/* Salary Calculator — additions on top of the shared state-tax stylesheet
   (loaded before this file). Scoped to this page's own root class; no
   family rule is overridden. Pattern follows the hourly-after-tax family. */

/* hero: split strip + per-hour line (hero card is dark in both themes) */
.stax .hsplit{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.16);font-size:13.5px;color:var(--hero-muted)}
.stax .hsplit b{color:var(--hero-ink);font-weight:700}
.stax .h-netline{margin:12px 0 0;font-size:14.5px;color:var(--hero-ink)}
.stax .h-netline b{font-size:16px}

/* salary ladder figure */
.stax .hladder{margin-top:6px}
.stax .hl-row{display:grid;grid-template-columns:96px 1fr 168px;align-items:center;gap:12px;padding:5px 0}
.stax .hl-lab{font-weight:600;font-size:14px;color:var(--ink)}
.stax .hl-lab span{display:block;font-weight:400;font-size:12px;color:var(--muted)}
.stax .hl-track{background:var(--chart-grid);border-radius:3px;height:16px;position:relative;overflow:hidden}
.stax .hl-fill{position:absolute;left:0;top:0;bottom:0;background:var(--accent);border-radius:3px}
.stax .hl-row.cur .hl-fill{background:var(--good)}
.stax .hl-val{text-align:right;font-size:14px;color:var(--ink)}
.stax .hl-val span{display:block;font-size:12px;color:var(--muted)}
.stax .hl-row.cur .hl-lab,.stax .hl-row.cur .hl-val{color:var(--good)}

/* preset chip rows inside the input card */
.stax .hchips-lab{font-size:12.5px;color:var(--muted);margin:10px 0 6px}
.stax .hub-chips{display:flex;flex-wrap:wrap;gap:8px}

/* the six-way period segment may wrap on narrow screens */
.stax .seg{flex-wrap:wrap}

/* the hours field is toggled with the hidden attribute */
.stax #hoursField[hidden]{display:none!important}

.stax table .r{white-space:nowrap}

@media (max-width:640px){
  .stax .hl-row{grid-template-columns:76px 1fr 128px;gap:8px}
  .stax .hl-val{font-size:13px}
  .stax .hsplit{gap:4px 14px}
}

/* Chip + segment hover text: tool-page-v2's blanket `.tool-panel
   button:hover` fills buttons with a dark indigo but sets no text colour,
   which can leave dark text on the indigo fill in light mode. On the
   indigo hover fill the label is white. Scoped to light mode only; dark
   mode's fills already carry light text (same fix as the hourly family,
   2026-11-04). */
html[data-theme="light"] .stax.stax .hub-chips button:hover,
html[data-theme="light"] .stax.stax .hub-chips button:active,
html[data-theme="light"] .stax.stax .seg button:hover,
html[data-theme="light"] .stax.stax .seg button:active{color:#ffffff!important}

/* The hero follows the theme on this page (owner-approved pattern from
   the hourly family, 2026-11-04): light mode gets the subtle indigo tint
   instead of dark navy; dark mode keeps the dark hero exactly. The
   stickybar reads the same variables, so it follows automatically. */
html[data-theme="light"] .stax{
  --hero-bg:#eef2ff; --hero-tile:#ffffff; --hero-ink:#1c2333; --hero-muted:#55677d;
}
html[data-theme="light"] .stax .hero{border:1px solid var(--line)}
html[data-theme="light"] .stax .hero .tile{border-color:var(--line-strong)}
html[data-theme="light"] .stax .hsplit{border-top-color:var(--line-strong)}