/* Minimum Wage family — additions on top of the shared state-tax
   stylesheet (loaded before this file). Everything here is scoped to the
   hourly pages' own classes; no family rule is overridden. */

/* 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}

/* wage ladder figure */
.stax .hladder{margin-top:6px}
.stax .hl-row{display:grid;grid-template-columns:86px 1fr 148px;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}

/* hub comparison table */
.stax .hub-wagebar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px;margin:0 0 14px}
.stax .hub-wagebar .field{margin:0;min-width:170px}
.stax .hub-wagebar .seg{margin:0}
.stax table .r{white-space:nowrap}

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

/* --- Owner fixes 2026-11-04 (asset v20261104-2), this family only --- */
/* (1) Chip hover text: tool-page-v2's blanket `.tool-panel button:hover`
   fills every button with --accent-dim (dark indigo) but sets no text
   colour, while the kit pins chip text to --ink-2 — dark text on the
   indigo fill in light mode. On the indigo hover fill the label is
   white. Scoped to light: dark mode's chip text is already light on
   its mid-indigo hover fill, and dark stays byte-untouched. */
html[data-theme="light"] .stax.stax .hub-chips button:hover,
html[data-theme="light"] .stax.stax .hub-chips button:active{color:#ffffff!important}

/* (2) The hero follows the theme in this family (owner-approved
   2026-11-04). The inherited kit defines its hero tokens dark navy in
   BOTH themes; overruled here for light mode only: a subtle indigo
   tint (the accent-soft #eef2ff) instead of the dark navy, white
   tiles with a real border, dark ink, AA muted labels. The stickybar
   reads the same variables, so it follows automatically. Dark mode
   keeps the dark hero exactly as before. */
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)}

/* minimum-wage family extras */
/* rate facts table: first column labels stay put, values right-aligned */
.stax .ratecard{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stax .ratefact{border:1px solid var(--line);border-radius:4px;padding:10px 12px;background:var(--surface)}
.stax .ratefact .t{font-size:12.5px;color:var(--muted)}
.stax .ratefact .v{font-size:20px;font-weight:700;color:var(--ink);margin-top:2px}
.stax .ratefact .s{font-size:12.5px;color:var(--muted);margin-top:2px}
@media (max-width:640px){.stax .ratecard{grid-template-columns:1fr 1fr}}
.stax .tipnote{display:none;border:1px solid var(--line-strong);border-radius:4px;padding:10px 12px;margin-top:12px;font-size:13.5px;color:var(--ink);background:var(--surface)}
.stax .tipnote.show{display:block}