/* salary.css — the salary screen. */
/* ── salary ── */
.pay{display:grid;grid-template-columns:1fr;gap:14px}
/* A grid column's items keep their min-content width unless told otherwise, and
   a flex label does the same: on a 390px phone the roster card measured 503px
   and ran off the right edge, taking the inputs with it. */
.pay>*{min-width:0}
@media(min-width:760px){.pay{grid-template-columns:1.05fr .95fr}}
.inp{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--line2)}
.inp:last-child{border-bottom:0}
.inp label{flex:1;min-width:0;font-size:13px;color:var(--dim)}
.inp label small{display:block;color:var(--faint);font-size:10px}
/* The eighteen explanations on the pay screen are reference, not running
   content. They collapse to nothing and the rows close up behind them, so
   turning them off actually shortens the screen rather than leaving holes. */
.pay.nohints .inp label small:not(.keep){display:none}
.pay.nohints .inp{padding-top:7px;padding-bottom:7px}
.hintbtn{margin-left:auto;background:none;border:1px solid var(--line);color:var(--dim);
  border-radius:999px;padding:4px 11px;font-size:11px;font-weight:600;cursor:pointer;
  white-space:nowrap;transition:color .15s,border-color .15s}
.hintbtn:hover{color:var(--txt);border-color:var(--faint)}
.hintbtn:active{transform:scale(.94)}
.hdr .tag{margin-left:0}
.inp input,.inp select{width:96px;background:var(--raise);border:1px solid var(--line);border-radius:8px;padding:7px 9px;font-family:var(--mono);text-align:right;outline:none;flex:none}
.inp select{width:auto;max-width:56%;text-align:left;text-overflow:ellipsis}
.inp input:focus,.inp select:focus{border-color:var(--acc)}
.inp input.auto{border-color:rgba(56,210,154,.4);color:var(--air)}
.hdr{padding:11px 14px;border-bottom:1px solid var(--line);font-size:11px;text-transform:uppercase;letter-spacing:1.1px;color:var(--faint);font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hdr .tag{margin-left:auto;font-size:10px;color:var(--air);border:1px solid rgba(56,210,154,.3);border-radius:12px;padding:2px 7px;letter-spacing:.4px;text-transform:none}
.big{padding:18px;text-align:center;border-bottom:1px solid var(--line)}
/* The net figure is the answer this screen exists to give, and it was sitting
   at the top of the SECOND column — which on a phone put it below eighteen
   input rows. It leads the page now, at full width, above the inputs that
   produce it. */
.mnote{font-size:12.5px;color:var(--dim);margin:-6px 0 12px}
.netlead{border:1px solid var(--line);border-radius:16px;background:var(--surface);
  padding:18px 20px;margin-bottom:14px;text-align:center}
.netlead .k{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.09em;font-weight:700}
.netlead .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:44px;
  font-weight:800;color:var(--acc-txt);line-height:1.05;margin:4px 0 5px}
.netlead .sub{font-size:12.5px;color:var(--dim);font-family:var(--mono)}
.netlead .sub b{color:var(--air);font-weight:700}
@media(min-width:760px){.netlead .v{font-size:52px}}
.big .k{font-size:10px;color:var(--faint);text-transform:uppercase;letter-spacing:1.1px}
.big .v{font-family:var(--mono);font-size:36px;font-weight:700;color:var(--acc);line-height:1.15;margin-top:3px}
.big .sub{font-size:12px;color:var(--dim);margin-top:3px}
.ln{display:flex;padding:7px 14px;font-size:13px;gap:10px;border-bottom:1px solid var(--line2)}
.ln:last-child{border-bottom:0}
.ln .l{flex:1;color:var(--dim)}
.ln .l small{color:var(--faint);font-size:10px;font-family:var(--mono)}
.ln .v{font-family:var(--mono);font-weight:600;flex:none}
.ln.tot{background:var(--raise);font-weight:700}.ln.tot .l{color:var(--txt)}
.ln.neg .v{color:var(--bad)}.ln.pos .v{color:var(--air)}
.note{font-size:11px;color:var(--faint);padding:10px 14px;line-height:1.55;border-top:1px solid var(--line)}
.warn{font-size:11.5px;color:var(--trn);background:color-mix(in srgb,var(--trn) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--trn) 28%,transparent);border-radius:8px;
  padding:9px 11px 9px 32px;margin-bottom:10px;line-height:1.55}
.ln .v.defer{color:var(--trn)}
.big .nexth{margin-top:9px;padding-top:9px;border-top:1px solid var(--line);
 font-size:13px;color:var(--dim)}
.big .nexth b{color:var(--air);font-family:var(--mono);font-size:15px}
/* ── your pay details ──
   A detail the pilot has not given is drawn as missing, not as a value: the
   dashed amber outline is the system's "provisional" mark (DESIGN.md, Data
   Chips), and the greyed placeholder inside it is only what the engine assumes. */
.inp.pdmiss input,.inp.pdmiss .pdyn{border:1px dashed var(--trn)}
.pdyn{flex:none}
.pdcard input[type=date]{width:auto}
/* The engine's assumption, not a value: it must not read like one. */
.inp.pdmiss input::placeholder{color:var(--faint);opacity:.7}
.pdlead{color:var(--dim);font-size:13px;line-height:1.5;padding:0 0 14px}
.pdyn button{min-width:46px}
.pdask{border-color:color-mix(in srgb,var(--trn) 35%,var(--line))}
.pdsave{width:100%;margin-top:14px;background:var(--acc);border:0;color:var(--on-acc);font-weight:700;
  padding:13px 20px;border-radius:12px;cursor:pointer;text-transform:uppercase;letter-spacing:.09em}
.pdsave:active{transform:scale(.98)}
/* payslip check: a gap past the tolerance reads in the warning hue, not red —
   the slip is right by definition, so a gap is the app's to answer for */
.slipcheck .ln.slipoff .v{color:var(--trn)}
.sliphist{border-top:1px solid var(--line)}
.sliphist .sub{font-size:11px;color:var(--faint);padding:10px 14px 4px}