/* payback.css — the payback tool's structure. SHARED BY BOTH SITES.
 *
 * hirefriday.uk is cream, coral and Outfit; iamfriday.uk is near-black, green
 * and Barlow Condensed. They share no tokens and never will, so this file
 * refers only to its OWN --pb-* variables and each page maps its site's
 * palette onto them in a short block of its own. One structure, two skins,
 * and a change to the layout is a change in one file.
 *
 * Every value has a fallback, so if a page forgets to map something the tool
 * degrades to a readable grey rather than to invisible text.
 */

/* ── layout ──────────────────────────────────────────────────────────── */
.pb-step{
  padding:clamp(1.75rem,5vw,3.25rem) 0;
  border-top:1px solid var(--pb-line,rgba(128,128,128,.22));
}
.pb-step:first-child{border-top:0;padding-top:0}

.pb-step__n{
  margin:0 0 .5rem;font:600 .72rem/1 var(--pb-sans,system-ui,sans-serif);
  letter-spacing:.14em;text-transform:uppercase;color:var(--pb-accent,#777);
}
/* NO max-width on a heading. Titles run the full width of their column. */
.pb-step__h{
  margin:0 0 .75rem;
  font:var(--pb-h-weight,700) clamp(1.5rem,4.4vw,2.4rem)/1.08 var(--pb-disp,system-ui,sans-serif);
  color:var(--pb-head,inherit);letter-spacing:var(--pb-h-track,-.01em);
}
.pb-step__sub{margin:0 0 1.5rem;max-width:62ch;color:var(--pb-muted,#666);font-size:1.02rem;line-height:1.6}

/* ── step one: the hourly number ─────────────────────────────────────── */
.pb-rate{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin:0 0 1rem}
.pb-rate__k{font-size:1.05rem;color:var(--pb-body,inherit)}
.pb-rate__in{
  display:inline-flex;align-items:center;gap:.3rem;
  background:var(--pb-field,rgba(128,128,128,.07));
  border:2px solid var(--pb-line,rgba(128,128,128,.25));
  border-radius:var(--pb-r,14px);padding:.3rem .8rem;
  transition:border-color .18s;
}
.pb-rate__in:focus-within{border-color:var(--pb-accent,#555)}
.pb-rate__sym{font:700 1.4rem/1 var(--pb-disp,system-ui,sans-serif);color:var(--pb-muted,#777)}
.pb-rate__in input{
  /* 44px minimum. Measured at 39px on a 375px viewport before this: a
     text field is as much of a touch target as a button, and this is the
     first thing anybody taps on the page. */
  width:5.5ch;min-height:44px;border:0;background:none;padding:.35rem 0;
  font:700 1.6rem/1.1 var(--pb-disp,system-ui,sans-serif);
  color:var(--pb-head,inherit);
}
.pb-rate__in input:focus{outline:none}

.pb-help{margin:.25rem 0 0;max-width:62ch}
.pb-help summary{
  cursor:pointer;font-size:.95rem;color:var(--pb-accent,#555);
  min-height:44px;display:flex;align-items:center;   /* was 43px */
}
.pb-help p{margin:.25rem 0 0;color:var(--pb-muted,#666);font-size:.95rem;line-height:1.6}

/* ── the job cards ───────────────────────────────────────────────────── */
.pb-jobs{display:grid;gap:1rem;margin:0 0 1.25rem}
.pb-empty{margin:0 0 1.25rem;color:var(--pb-muted,#666)}

.pb-job{
  background:var(--pb-card,rgba(128,128,128,.05));
  border:1px solid var(--pb-line,rgba(128,128,128,.18));
  border-radius:var(--pb-r,16px);
  padding:clamp(.9rem,3vw,1.35rem);
}
.pb-job__head{display:flex;gap:.6rem;align-items:center}
.pb-job__name{
  flex:1 1 auto;min-width:0;min-height:44px;   /* measured 37px */       /* min-width:0 or a long value stretches the card */
  border:0;border-bottom:2px solid var(--pb-line,rgba(128,128,128,.3));
  background:none;padding:.45rem 0;
  font:var(--pb-h-weight,700) clamp(1.05rem,3vw,1.25rem)/1.25 var(--pb-disp,system-ui,sans-serif);
  color:var(--pb-head,inherit);
}
.pb-job__name:focus{outline:none;border-bottom-color:var(--pb-accent,#555)}
.pb-job__name::placeholder{color:var(--pb-muted,#888);opacity:.7;font-weight:400}
.pb-job__kill{
  flex:0 0 auto;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--pb-line,rgba(128,128,128,.3));
  background:none;color:var(--pb-muted,#777);
  font-size:1.35rem;line-height:1;cursor:pointer;
}
.pb-job__kill:hover{color:var(--pb-head,inherit);border-color:var(--pb-accent,#555)}

.pb-freq{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;margin:1rem 0 .25rem}
.pb-freq__f{display:flex;flex-direction:column;gap:.3rem}
.pb-freq__f span{font-size:.82rem;color:var(--pb-muted,#666)}
.pb-freq__f input{
  width:7ch;min-height:44px;padding:.6rem .7rem;   /* measured 43px */
  border:2px solid var(--pb-line,rgba(128,128,128,.25));
  border-radius:calc(var(--pb-r,14px) * .6);
  background:var(--pb-field,rgba(128,128,128,.06));
  color:var(--pb-head,inherit);
  font:600 1.05rem/1.2 var(--pb-sans,system-ui,sans-serif);
}
.pb-freq__f input:focus{outline:none;border-color:var(--pb-accent,#555)}

/* ── the four axes ───────────────────────────────────────────────────── */
.pb-axes{display:grid;gap:1rem;margin:1.25rem 0 0}
@media (min-width:760px){ .pb-axes{grid-template-columns:1fr 1fr;gap:1.25rem 1.75rem} }

.pb-axis{border:0;margin:0;padding:0;min-width:0}
.pb-axis__label{
  padding:0;font:600 .95rem/1.3 var(--pb-sans,system-ui,sans-serif);
  color:var(--pb-head,inherit);
}
.pb-axis__note{margin:.3rem 0 .6rem;font-size:.84rem;line-height:1.5;color:var(--pb-muted,#666)}

/* 1-5 as REAL BUTTONS, 44px tall.
 * Not a styled input[type=range]: styling the range as the bar leaves a
 * 6px-tall touch target, which is unusable on a phone. Five buttons at 44px
 * come to 220px on the widest row, so this fits a 320px screen with the
 * gutters still on. */
.pb-scale{display:flex;gap:.4rem}
.pb-dot{
  flex:1 1 0;min-width:0;height:44px;
  border:2px solid var(--pb-line,rgba(128,128,128,.28));
  border-radius:calc(var(--pb-r,14px) * .55);
  background:var(--pb-field,rgba(128,128,128,.05));
  color:var(--pb-muted,#777);
  font:700 1rem/1 var(--pb-sans,system-ui,sans-serif);
  cursor:pointer;transition:background .15s,color .15s,border-color .15s;
}
.pb-dot:hover{border-color:var(--pb-accent,#555);color:var(--pb-head,inherit)}
.pb-dot.is-on{
  background:var(--pb-accent,#444);
  border-color:var(--pb-accent,#444);
  color:var(--pb-on-accent,#fff);
}
.pb-scale__ends{
  display:flex;justify-content:space-between;gap:1rem;margin:.4rem 0 0;
  font-size:.74rem;line-height:1.35;color:var(--pb-muted,#777);
}
.pb-scale__ends span{flex:0 1 auto;max-width:48%}
.pb-scale__ends span:last-child{text-align:right}

/* ── a job's own figures ─────────────────────────────────────────────── */
.pb-job__out{
  display:flex;flex-wrap:wrap;gap:.75rem 1.75rem;align-items:baseline;
  margin:1.25rem 0 0;padding:.9rem 0 0;
  border-top:1px solid var(--pb-line,rgba(128,128,128,.18));
}
.pb-job__hint{margin:0;font-size:.9rem;color:var(--pb-muted,#777)}
.pb-fig{display:flex;flex-direction:column;gap:.1rem}
.pb-fig__k{font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--pb-muted,#777)}
.pb-fig__v{font:700 1.3rem/1.1 var(--pb-disp,system-ui,sans-serif);color:var(--pb-head,inherit)}
.pb-job__gross{flex:1 1 100%;margin:.2rem 0 0;font-size:.84rem;color:var(--pb-muted,#777)}

/* ── adding jobs ─────────────────────────────────────────────────────── */
.pb-adds{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 1.5rem}
.pb-add{
  min-height:48px;padding:.75rem 1.25rem;
  border-radius:999px;border:2px dashed var(--pb-line,rgba(128,128,128,.35));
  background:none;color:var(--pb-head,inherit);cursor:pointer;
  font:600 .98rem/1 var(--pb-sans,system-ui,sans-serif);
}
.pb-add:hover{border-color:var(--pb-accent,#555);border-style:solid}

.pb-chips__k{margin:0 0 .6rem;font-size:.84rem;letter-spacing:.06em;text-transform:uppercase;color:var(--pb-muted,#777)}
.pb-chips__row{display:flex;flex-wrap:wrap;gap:.5rem}
.pb-chip{
  min-height:44px;padding:.6rem 1rem;
  border-radius:999px;border:1px solid var(--pb-line,rgba(128,128,128,.3));
  background:var(--pb-field,rgba(128,128,128,.05));
  color:var(--pb-body,inherit);cursor:pointer;text-align:left;
  font:500 .92rem/1.3 var(--pb-sans,system-ui,sans-serif);
}
.pb-chip:hover{border-color:var(--pb-accent,#555);color:var(--pb-head,inherit)}

/* ── the verdict ─────────────────────────────────────────────────────── */
.pb-verdict{
  background:var(--pb-card,rgba(128,128,128,.05));
  border:1px solid var(--pb-line,rgba(128,128,128,.18));
  border-radius:var(--pb-r,16px);
  padding:clamp(1.1rem,3.5vw,1.9rem);
}
.pb-verdict__wait{margin:0;color:var(--pb-muted,#666);line-height:1.6}
.pb-verdict__kicker{
  margin:0 0 .3rem;font:600 .72rem/1 var(--pb-sans,system-ui,sans-serif);
  letter-spacing:.14em;text-transform:uppercase;color:var(--pb-accent,#777);
}
.pb-verdict__job{
  margin:0 0 1.25rem;
  font:var(--pb-h-weight,700) clamp(1.35rem,4vw,2rem)/1.12 var(--pb-disp,system-ui,sans-serif);
  color:var(--pb-head,inherit);
}
.pb-verdict__big{display:flex;flex-wrap:wrap;gap:1.25rem 2.5rem;margin:0 0 1.5rem}
.pb-big{display:flex;flex-direction:column;gap:.2rem}
.pb-big__v{font:700 clamp(2rem,7vw,3rem)/1 var(--pb-disp,system-ui,sans-serif);color:var(--pb-accent-strong,var(--pb-accent,#333))}
.pb-big--sm .pb-big__v{font-size:clamp(1.4rem,4.5vw,1.9rem);color:var(--pb-head,inherit)}
.pb-big__k{font-size:.84rem;line-height:1.4;color:var(--pb-muted,#777);max-width:22ch}

.pb-call{border-radius:calc(var(--pb-r,16px) * .75);padding:1rem 1.15rem;margin:0 0 1.5rem}
.pb-call p{margin:0;line-height:1.6;font-size:.98rem}
.pb-call--go{background:var(--pb-go-bg,rgba(60,160,90,.1));border:1px solid var(--pb-go-line,rgba(60,160,90,.35))}
.pb-call--wait{background:var(--pb-wait-bg,rgba(200,140,40,.1));border:1px solid var(--pb-wait-line,rgba(200,140,40,.35))}

.pb-league{border-top:1px solid var(--pb-line,rgba(128,128,128,.18));padding:1.25rem 0 0}
.pb-league__h{margin:0 0 .75rem;font:600 .95rem/1.3 var(--pb-sans,system-ui,sans-serif);color:var(--pb-head,inherit)}
.pb-league__list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.pb-league__row{
  display:grid;grid-template-columns:1fr auto auto;gap:.5rem 1rem;align-items:baseline;
  padding:.6rem 0;border-bottom:1px solid var(--pb-line,rgba(128,128,128,.12));
}
.pb-league__name{min-width:0;font-size:.98rem;color:var(--pb-body,inherit)}
.pb-league__score{font:600 .88rem/1 var(--pb-sans,system-ui,sans-serif);color:var(--pb-muted,#777)}
.pb-league__money{font:700 1rem/1 var(--pb-disp,system-ui,sans-serif);color:var(--pb-head,inherit);text-align:right}
.pb-league__note{margin:.9rem 0 0;font-size:.86rem;line-height:1.55;color:var(--pb-muted,#777)}
.pb-verdict__total{margin:1.25rem 0 0;font-size:.92rem;color:var(--pb-muted,#777)}

/* ── phones ──────────────────────────────────────────────────────────── */
@media (max-width:420px){
  .pb-league__row{grid-template-columns:1fr auto}
  .pb-league__name{grid-column:1 / -1}
  .pb-verdict__big{gap:1rem 1.75rem}
  .pb-scale{gap:.3rem}
  .pb-dot{font-size:.95rem}
}

@media (prefers-reduced-motion:reduce){
  .pb-dot,.pb-rate__in,.pb-add,.pb-chip{transition:none}
}