/* ======================================================================
   RevAllow shared theme.
   Light tokens on :root; dark tokens under prefers-color-scheme AND an
   explicit [data-theme="dark"] (set by the top-bar toggle via session.js).
   [data-theme="light"] forces light even when the OS is dark.
   ====================================================================== */
:root{
  --brand:#0a63b0;
  --brand-hover:#084f8c;
  --brand-tint:#eaf2fb;
  --brand-contrast:#ffffff;

  --bg:#f5f7fa;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --surface-raised:#ffffff;

  --text:#1b2733;
  --text-soft:#4a5a6b;
  --text-faint:#7a8798;

  --border:#e3e8ef;
  --border-strong:#c8d2de;

  --accent-green:#0f7d55;
  --accent-green-hover:#0b6244;

  --ok-bg:#e4f6ea;--ok-ink:#136c39;--ok-line:#a9dcbb;
  --warn-bg:#fdf3d9;--warn-ink:#8a5a00;--warn-line:#eecf8b;
  --bad-bg:#fce9e9;--bad-ink:#a01c1c;--bad-line:#f0bcbc;

  --focus:#2b8fe0;
  --radius:14px;
  --radius-sm:10px;
  --radius-xs:7px;
  --shadow-sm:0 1px 2px rgba(15,30,50,.06);
  --shadow-md:0 1px 3px rgba(15,30,50,.06),0 6px 20px rgba(15,30,50,.06);
  --shadow-lg:0 12px 40px rgba(15,30,50,.14);

  --topbar-bg:#0a63b0;
  --topbar-fg:#ffffff;

  color-scheme:light;
}
/* Back-compat aliases for earlier token names still used in some page-level
   <style> blocks. They inherit the theme because they point at the tokens above. */
:root,:root[data-theme]{
  --ink:var(--text);
  --ink-soft:var(--text-soft);
  --line:var(--border);
  --line-strong:var(--border-strong);
  --shadow:var(--shadow-sm);
  --brand-dark:var(--brand-hover);
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --brand:#4ea6ea;
    --brand-hover:#6fb8ef;
    --brand-tint:#16283a;
    --brand-contrast:#08131e;

    --bg:#0e151e;
    --surface:#161f2b;
    --surface-2:#131b25;
    --surface-raised:#1b2632;

    --text:#e7edf4;
    --text-soft:#a7b4c2;
    --text-faint:#7a8896;

    --border:#293643;
    --border-strong:#3a4a5a;

    --accent-green:#3fbd86;
    --accent-green-hover:#5fcd9c;

    --ok-bg:#12331f;--ok-ink:#7ede9f;--ok-line:#245a38;
    --warn-bg:#3a2c0d;--warn-ink:#f0c775;--warn-line:#5c4718;
    --bad-bg:#3a1a1a;--bad-ink:#f2a3a3;--bad-line:#5e2b2b;

    --focus:#6fb8ef;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 1px 3px rgba(0,0,0,.4),0 6px 20px rgba(0,0,0,.35);
    --shadow-lg:0 14px 44px rgba(0,0,0,.5);

    --topbar-bg:#12202f;
    --topbar-fg:#e7edf4;

    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --brand:#4ea6ea;--brand-hover:#6fb8ef;--brand-tint:#16283a;--brand-contrast:#08131e;
  --bg:#0e151e;--surface:#161f2b;--surface-2:#131b25;--surface-raised:#1b2632;
  --text:#e7edf4;--text-soft:#a7b4c2;--text-faint:#7a8896;
  --border:#293643;--border-strong:#3a4a5a;
  --accent-green:#3fbd86;--accent-green-hover:#5fcd9c;
  --ok-bg:#12331f;--ok-ink:#7ede9f;--ok-line:#245a38;
  --warn-bg:#3a2c0d;--warn-ink:#f0c775;--warn-line:#5c4718;
  --bad-bg:#3a1a1a;--bad-ink:#f2a3a3;--bad-line:#5e2b2b;
  --focus:#6fb8ef;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 1px 3px rgba(0,0,0,.4),0 6px 20px rgba(0,0,0,.35);
  --shadow-lg:0 14px 44px rgba(0,0,0,.5);
  --topbar-bg:#12202f;--topbar-fg:#e7edf4;
  color-scheme:dark;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--text);min-height:100vh;
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:var(--brand);text-decoration:none;text-underline-offset:2px}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:3px}
::selection{background:rgba(43,143,224,.25)}

.wrap{max-width:1140px;margin:0 auto;padding:26px 22px 64px}

/* ── Top bar ─────────────────────────────────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:50;
  background:var(--topbar-bg);color:var(--topbar-fg);padding:12px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:nowrap;
  box-shadow:0 1px 0 rgba(0,0,0,.08),0 2px 14px rgba(0,20,45,.16);
}
/* .topbar itself never wraps — flex-wrap:nowrap above is a hard structural
   guarantee, not just a preference. Reason: flex-wrap's line-breaking
   decision is made from each *outer* flex item's own hypothetical/max-content
   size, and that calculation does NOT look inside the item at what its own
   children could shrink to. .topbar-right's "natural" size is nav-at-full-
   width + who — often 1400px+ once a hospital has several nav links and a
   longish name — so with flex-wrap:wrap the browser would decide to wrap
   .app onto its own line and drop the whole nav+who group to a second row
   long before nav's internal flex:1/min-width:0 shrink ever got a chance to
   run (that shrink only applies once a container is done being sized as an
   *item* of its own parent). This bit twice before nowrap was added: first
   nav and who wrapped independently (asymmetric jump), then — after grouping
   them into .topbar-right — the *group* still wrapped away from .app at
   ordinary laptop widths (~900-1400px), which is what an admin with a full
   nav (Data/Team/Reports) and a longer hospital name kept hitting. Banning
   the wrap outright removes the failure mode for good: .topbar-right is
   flex:1 1 0%/min-width:0 (below) so it always yields the space app needs,
   and nav (further below) is the one piece that absorbs the rest by
   scrolling internally — never by pushing something onto a new row. */
.topbar-right{display:flex;align-items:center;justify-content:flex-end;gap:16px;flex-wrap:nowrap;flex:1 1 0%;min-width:0}
.topbar .app{display:flex;flex-direction:column;gap:3px;color:var(--topbar-fg);flex:0 0 auto}
.topbar .app-logo-img{height:22px;width:auto;display:block}
.topbar .app small{display:block;font-weight:400;opacity:.78;font-size:11.5px;letter-spacing:.01em}
/* nav is the one ELASTIC piece of the header — flex:1 1 0% with min-width:0
   means it never demands its own full (unwrapped) width from the "does this
   fit" calculation the way who (flex:0 0 auto, its natural size) does.
   Instead it takes whatever room .topbar-right has left and scrolls
   horizontally within that, so app + who — the high-priority content — never
   move, and adding a nav link never changes when anything wraps (nothing
   ever wraps; nav just gets a little more to scroll through). The fade at
   each edge (mask-image, toggled by .nav-scrollable/.at-start/.at-end from
   the boot() script in each page) is the visual cue that there's more to
   scroll to — plain overflow-x:auto with no cue reads as "the link is just
   gone", which is worse than a two-line header. */
.topbar nav{
  display:flex;gap:2px;align-items:center;flex-wrap:nowrap;flex:1 1 0%;min-width:0;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.4) transparent;
}
/* scrollbar-width:thin (above) only styles Firefox -- Chrome/Safari/Edge need
   their own pseudo-elements, and without them the scrollbar is invisible by
   default on macOS (scrollbars only appear while actively scrolling with a
   trackpad) with no other affordance. That combined with nav being squeezed
   to a sliver by a long hospital name + logo (see the big comment above) was
   a real bug, not hypothetical: a real hospital name ("Pine Ridge Rural
   Medical Center") + its uploaded logo left nav too narrow to show its full
   link list, the last visible link got hard-clipped flush against the logo
   with no visible scrollbar and no obvious fade, and Data/Team/Reports were
   effectively gone with no cue a user would ever find them (2026-10-02).
   A persistently-visible, always-rendered scrollbar fixes the "no cue at
   all" half of that; the ellipsis truncation on the hospital name below
   fixes the "nav gets squeezed too far in the first place" half. */
.topbar nav::-webkit-scrollbar{height:5px}
.topbar nav::-webkit-scrollbar-track{background:transparent}
.topbar nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.4);border-radius:4px}
.topbar nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.6)}
.topbar nav.nav-scrollable{-webkit-mask-image:linear-gradient(to right,transparent,#000 14px,#000 calc(100% - 14px),transparent);mask-image:linear-gradient(to right,transparent,#000 14px,#000 calc(100% - 14px),transparent)}
.topbar nav.nav-scrollable.at-start{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 14px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 14px),transparent)}
.topbar nav.nav-scrollable.at-end{-webkit-mask-image:linear-gradient(to right,transparent,#000 14px);mask-image:linear-gradient(to right,transparent,#000 14px)}
.topbar nav a{
  color:var(--topbar-fg);text-decoration:none;font-size:12.5px;font-weight:600;
  padding:7px 9px;border-radius:8px;opacity:.8;transition:background .12s,opacity .12s;
  flex:0 0 auto;white-space:nowrap;
}
.topbar nav a:hover{opacity:1;background:rgba(255,255,255,.14);text-decoration:none}
.topbar nav a.active{opacity:1;background:rgba(255,255,255,.22)}
.topbar .who{display:flex;align-items:center;gap:10px;font-size:13px;flex:0 0 auto}
/* #whoHospital/#topbarLogo (the hospital name + its uploaded logo) used to
   live here too, and were exactly what kept starving nav of room (see the
   big comment on .topbar nav above) -- a long real name (e.g. "Pine Ridge
   Rural Medical Center") plus the hospital's own logo easily added 200px+
   that nav never got back, to the point where nav's own links could become
   effectively unreachable. Removed from the topbar entirely on 2026-10-02
   (home.html already shows both) rather than continuing to shrink them --
   the account code/status pill/theme toggle/logout button left here are
   fixed-width regardless of which hospital is signed in, so nav's available
   room no longer depends on how long that hospital's name happens to be.
   This rule is now just a safety cap for #acctHospital/#whoEmail (other
   pages' equivalents) in case either is ever a long value. */
.topbar .who #acctHospital,.topbar .who #whoEmail{font-weight:600;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:bottom}
.topbar .who button,.topbar .theme-toggle{
  background:rgba(255,255,255,.14);color:var(--topbar-fg);border:1px solid rgba(255,255,255,.34);
  border-radius:8px;padding:6px 12px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:background .12s;
}
.topbar .who button:hover,.topbar .theme-toggle:hover{background:rgba(255,255,255,.26)}
.topbar .theme-toggle{padding:6px 10px;line-height:1}
/* .topbar can no longer wrap (flex-wrap:nowrap, above) — nav just scrolls
   instead — so this media query is an optimization, not a correctness fix:
   it sheds the lowest-priority pieces (tagline, account code) early enough
   that a full 7-link admin nav fits with NO scrolling on typical laptop
   widths, now that the hospital name/logo are gone from here entirely (see
   the comment above) and no longer the dominant factor. */
@media (max-width:1300px){
  .topbar .app small{display:none}
  .topbar .who #whoCode{display:none}
}
/* Below ~600px, .who's own natural width (status pill + theme toggle +
   logout button, all flex:0 0 auto so none of them shrink) can exceed the
   whole space .topbar-right has left after the logo -- nav (flex:1 1 0%,
   min-width:0) then has nothing left to take and collapses to 0 width,
   not just "squeezed" but gone outright with no scroll affordance at all
   (confirmed on a 375px viewport: nav's clientWidth measured 0). Shedding
   the status pill here (same status is shown on home.html's welcome card)
   and trimming button padding/gaps follows the same "shed low-priority
   pieces so nav keeps real room" approach as the 1300px rule above, just
   carried further -- nav still scrolls (per the big comment on .topbar nav
   above), it just needs a non-zero width to do that in. */
@media (max-width:600px){
  .topbar{padding:10px 14px;gap:10px}
  .topbar .app-logo-img{height:18px}
  .topbar-right{gap:8px}
  .topbar .who{gap:6px}
  .topbar .who .pill{display:none}
  .topbar .who button,.topbar .theme-toggle{padding:5px 8px;font-size:11.5px}
}

/* ── Page heading ───────────────────────────────────────────────────── */
.page-head{margin:6px 0 22px}
.page-head h1{font-size:23px;font-weight:700;letter-spacing:-.015em;line-height:1.25}
.page-head p{color:var(--text-soft);font-size:13.5px;margin-top:6px;max-width:74ch;line-height:1.6}

/* ── Status pill ────────────────────────────────────────────────────── */
.pill{display:inline-block;padding:3px 11px;border-radius:999px;font-size:11.5px;font-weight:700;text-transform:capitalize;letter-spacing:.01em;border:1px solid transparent}
.pill.active{background:var(--ok-bg);color:var(--ok-ink);border-color:var(--ok-line)}
.pill.past_due{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-line)}
.pill.canceled,.pill.inactive{background:var(--bad-bg);color:var(--bad-ink);border-color:var(--bad-line)}

/* ── Cards ──────────────────────────────────────────────────────────── */
.card{
  background:var(--surface);border-radius:var(--radius);border:1px solid var(--border);
  padding:24px 26px;margin-bottom:20px;box-shadow:var(--shadow-sm);
}
.card h2{font-size:16.5px;font-weight:650;margin-bottom:6px;letter-spacing:-.005em;color:var(--text)}
.card h3{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);margin:20px 0 8px}
.card p.hint,.hint{margin:0 0 16px;color:var(--text-soft);font-size:13px;line-height:1.6}
.card h2 + .hint{margin-top:0}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.card-head h2{margin:0}

/* ── Forms ──────────────────────────────────────────────────────────── */
label.field{display:block;font-size:12px;font-weight:600;color:var(--text-soft);margin-bottom:6px;letter-spacing:0}
input[type=number],input[type=text],input[type=email],input[type=date],input[type=password],select,textarea{
  width:100%;padding:9px 12px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  font-size:14px;outline:none;background:var(--surface);font-family:inherit;color:var(--text);
  transition:border-color .12s,box-shadow .12s;
}
input:hover,select:hover,textarea:hover{border-color:var(--brand)}
input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(43,143,224,.22)}
input::placeholder,textarea::placeholder{color:var(--text-faint)}
input[readonly]{background:var(--surface-2);color:var(--text-soft);cursor:default;border-color:var(--border)}
input[readonly]:hover{border-color:var(--border)}
input[type=checkbox]{accent-color:var(--brand)}
/* Native date field: keep it (best a11y) but make it sit flush with selects. */
input[type=date]{min-height:39px}
input[type=date]::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer;transition:opacity .12s}
input[type=date]:hover::-webkit-calendar-picker-indicator{opacity:.9}
select{min-height:39px;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%234a5a6b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid transparent;border-radius:var(--radius-sm);cursor:pointer;font-family:inherit;font-weight:600;
  padding:10px 18px;font-size:13.5px;line-height:1;
  transition:background .12s,border-color .12s,box-shadow .12s,transform .04s;
}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn-primary{background:var(--brand);color:var(--brand-contrast)}
.btn-primary:hover{background:var(--brand-hover)}
/* .btn-sm is both a size and a default brand fill (used standalone widely). */
.btn-sm{background:var(--brand);color:var(--brand-contrast);padding:8px 14px;font-size:12.5px}
.btn-sm:hover{background:var(--brand-hover)}
.btn-reset,.btn-secondary{background:var(--surface-2);color:var(--text-soft);border-color:var(--border-strong)}
.btn-reset:hover,.btn-secondary:hover{background:var(--surface);border-color:var(--brand);color:var(--text)}
.btn-export{background:var(--accent-green);color:var(--brand-contrast)}
.btn-export:hover{background:var(--accent-green-hover)}

/* ── Banners ────────────────────────────────────────────────────────── */
.banner{border-radius:var(--radius-sm);padding:13px 16px;margin-bottom:18px;font-size:13px;border:1px solid;line-height:1.55}
.banner strong{display:block;margin-bottom:2px;font-weight:700}
.banner.amber{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-line)}
.banner.red{background:var(--bad-bg);color:var(--bad-ink);border-color:var(--bad-line)}

/* ── Tables ─────────────────────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
thead th{
  position:sticky;top:0;z-index:1;
  padding:11px 14px;text-align:left;font-weight:700;font-size:11px;white-space:nowrap;
  text-transform:uppercase;letter-spacing:.045em;color:var(--text-soft);
  background:var(--surface-2);border-bottom:1px solid var(--border);
}
tbody td{padding:11px 14px;vertical-align:middle;border-bottom:1px solid var(--border);color:var(--text)}
tbody tr:last-child td{border-bottom:none}
tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--surface-2) 55%,transparent)}
tbody tr:hover td{background:var(--brand-tint)}
td.num,th.num,td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
tfoot td{padding:11px 14px;font-weight:700;border-top:2px solid var(--border-strong)}

/* ── Result / KPI emphasis ─────────────────────────────────────────── */
.result{margin-top:18px;padding:18px 20px;border-radius:var(--radius-sm);background:var(--brand-tint);border:1px solid color-mix(in srgb,var(--brand) 30%,transparent)}
.result .big{font-size:32px;font-weight:750;color:var(--brand);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.result .sub{color:var(--text-soft);font-size:13px;margin-top:5px;line-height:1.55}

/* "Lesser of charges applied" — a deliberately loud internal billing alert.
   Fixed high-contrast reds in both themes; never shown on a patient estimate. */
.loc-note{
  margin:20px 0 6px;border:2px solid #d9342b;border-left-width:7px;border-radius:11px;
  background:#fff2f1;color:#6e1a14;font-size:13px;line-height:1.55;overflow:hidden;
  box-shadow:0 6px 22px rgba(201,45,33,.22);
}
.loc-note h4{
  background:#d9342b;color:#fff;margin:0;padding:11px 16px;
  font-size:12.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  display:flex;align-items:center;gap:9px;
}
.loc-note h4::before{content:"\26A0\FE0F";font-size:16px}
.loc-note > div{padding:13px 16px 0;font-weight:600;color:#5a1712}
.loc-note > div b{color:#b32116}
.loc-note table{width:calc(100% - 32px);margin:11px 16px 16px;font-size:12px;border-collapse:collapse}
.loc-note th,.loc-note td{padding:7px 9px;text-align:right;border-bottom:1px solid #f2c8c3;background:transparent!important;color:inherit}
.loc-note th:first-child,.loc-note td:first-child{text-align:left}
.loc-note thead th{color:#a02c22;font-size:10px;text-transform:uppercase;letter-spacing:.05em;font-weight:800}
.loc-note tr.tot td{font-weight:800;color:#b32116;border-bottom:none;border-top:2px solid #e79a92;font-size:12.5px}
.loc-note .loc-flag{margin:0 16px 16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.loc-note .loc-flag-btn{background:#fff;color:#b32116;border:2px solid #b32116;padding:8px 16px;font-size:12.5px;font-weight:800;border-radius:8px;cursor:pointer;font-family:inherit}
.loc-note .loc-flag-btn:hover{background:#ffe3e0}
.loc-note .loc-flag-btn:disabled{opacity:.85;cursor:default;border-color:#cf9a94}
.loc-note .loc-flag-msg{font-size:12px;color:#7a1c16;font-weight:600}
.loc-note .loc-flag-msg a{color:#8a1a12;font-weight:700}
/* Outlier-exposure flag (drg.html, Oklahoma Medicaid track) — deliberately
   amber/theme-aware, not the lesser-of-charges flag's fixed red/white, so
   the two "flag for supervisor review" buttons never look like the same
   action: one says "we may be losing money" (red), the other says "this
   charge may be inflating what we bill Medicaid" (amber). Lives inside
   .banner.amber, which already uses the theme's warn tokens, so this
   button follows suit instead of hardcoding colors the way .loc-note does
   (that one is deliberately theme-fixed; this one doesn't need to be). */
.outlier-flag{margin-top:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.outlier-flag-btn{background:transparent;color:var(--warn-ink);border:2px solid var(--warn-ink);padding:8px 16px;font-size:12.5px;font-weight:800;border-radius:8px;cursor:pointer;font-family:inherit}
.outlier-flag-btn:hover{background:var(--warn-line)}
.outlier-flag-btn:disabled{opacity:.85;cursor:default}
.outlier-flag-msg{font-size:12px;color:var(--warn-ink);font-weight:600}
.outlier-flag-msg a{color:var(--warn-ink);font-weight:700}
.loc-note:empty{display:none}
/* The lesser-of-charges note stays a loud light-red siren in BOTH themes —
   a bright alert box on a dark page is exactly the intended attention grab. */

/* "Contract provision applied" — a hospital_contract_exceptions row (cap /
   carve-out / alternate-rate / excluded-code) changed the standard
   base-rate-x-weight math. Deliberately its OWN loud, fixed-color identity
   (indigo) rather than reusing .loc-note's red or .banner's amber: red here
   already means "billing under allowable, losing money" and amber means
   "verify this charge before it inflates a Medicaid bill" — reusing either
   for "a negotiated contract term is why this number differs" would make
   staff mis-read which situation they're looking at. Same loud treatment
   (icon header, thick left border, shadow) so it's impossible to miss —
   this exists specifically so nobody mistakes a correctly-applied contract
   term for a calculator error (see the DRG stop-loss case that prompted it).
   Fixed colors in both themes, same reasoning as .loc-note. */
.exception-note{
  margin:20px 0 6px;border:2px solid #4338ca;border-left-width:7px;border-radius:11px;
  background:#eef0ff;color:#312a6b;font-size:13px;line-height:1.55;overflow:hidden;
  box-shadow:0 6px 22px rgba(67,56,202,.22);
}
.exception-note h4{
  background:#4338ca;color:#fff;margin:0;padding:11px 16px;
  font-size:12.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  display:flex;align-items:center;gap:9px;
}
.exception-note h4::before{content:"\2696\FE0F";font-size:15px}
.exception-note > div{padding:13px 16px 0;font-weight:600;color:#312a6b}
.exception-note > div b{color:#2c2470}
.exception-note table{width:calc(100% - 32px);margin:11px 16px 16px;font-size:12px;border-collapse:collapse}
.exception-note th,.exception-note td{padding:7px 9px;text-align:right;border-bottom:1px solid #c7cbf5;background:transparent!important;color:inherit}
.exception-note th:first-child,.exception-note td:first-child{text-align:left}
.exception-note thead th{color:#3730a3;font-size:10px;text-transform:uppercase;letter-spacing:.05em;font-weight:800}
.exception-note tr.tot td{font-weight:800;color:#2c2470;border-bottom:none;border-top:2px solid #b4baf0;font-size:12.5px}
.exception-note .citation{font-size:11px;color:#4c4899;font-style:italic}
.exception-note:empty{display:none}

/* ── Pills never wrap ───────────────────────────────────────────────── */
.pill,.tag{white-space:nowrap}

/* ── File inputs (native control is ugly & inconsistent) ───────────── */
input[type=file]{
  width:100%;font:inherit;font-size:13px;color:var(--text-soft);
  border:1px dashed var(--border-strong);border-radius:var(--radius-sm);
  background:var(--surface-2);padding:8px 10px;cursor:pointer;transition:border-color .12s,background .12s;
}
input[type=file]:hover{border-color:var(--brand);background:var(--brand-tint)}
input[type=file]::file-selector-button{
  font:inherit;font-weight:600;font-size:12.5px;margin-right:12px;cursor:pointer;
  background:var(--brand);color:var(--brand-contrast);border:0;border-radius:var(--radius-xs);padding:7px 14px;
  transition:background .12s;
}
input[type=file]:hover::file-selector-button{background:var(--brand-hover)}

/* ── Interactive / pickable cards ──────────────────────────────────── */
.pick-card{
  display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px;text-decoration:none;color:inherit;cursor:pointer;
  box-shadow:var(--shadow-sm);transition:transform .12s,box-shadow .12s,border-color .12s;
}
.pick-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--brand);text-decoration:none}
.pick-card:active{transform:translateY(-1px)}
.pick-card .pick-cta{color:var(--brand);font-weight:700;font-size:13px;margin-top:12px;display:inline-flex;gap:5px;align-items:center}
.pick-card:hover .pick-cta{gap:9px}
.pick-card .pick-cta::after{content:"→";transition:none}

/* ── Onboarding / setup checklist with progress ────────────────────── */
.progress{height:7px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);overflow:hidden}
.progress > i{display:block;height:100%;background:var(--accent-green);border-radius:999px;transition:width .35s ease}
.progress.warn > i{background:var(--warn-ink)}
.checklist{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:1px}
.checklist li{display:flex;align-items:flex-start;gap:10px;padding:9px 4px;font-size:13px;border-bottom:1px solid var(--border)}
.checklist li:last-child{border-bottom:0}
.checklist .ck{flex:0 0 18px;width:18px;height:18px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;margin-top:1px}
.checklist .ck.on{background:var(--ok-bg);color:var(--ok-ink);border:1px solid var(--ok-line)}
.checklist .ck.off{background:var(--surface-2);color:var(--text-faint);border:1px solid var(--border-strong)}
.checklist .ck-body{flex:1 1 auto;line-height:1.45}
.checklist .ck-hint{color:var(--text-faint);font-size:12px}
.checklist li.on .ck-body{color:var(--text)}
.checklist li.off .ck-body{color:var(--text-soft)}

/* ── KPI hover lift ────────────────────────────────────────────────── */
.kpi{transition:box-shadow .12s,transform .12s}
.kpi:hover{box-shadow:var(--shadow-sm);transform:translateY(-1px)}

/* ── Split auth layout (sign-in pages) ─────────────────────────────── */
.auth{min-height:calc(100vh - 56px);display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch}
.auth-brand{
  background:linear-gradient(150deg,var(--brand) 0%,var(--brand-hover) 60%,#063a67 100%);
  color:#fff;padding:56px 52px;display:flex;flex-direction:column;justify-content:center;gap:18px;
}
.auth-brand .mark{display:block;width:min(280px,60%);height:auto;margin-bottom:8px}
.auth-brand h1{font-size:30px;line-height:1.22;font-weight:750;letter-spacing:-.02em;max-width:22ch}
.auth-brand p{font-size:14.5px;line-height:1.65;opacity:.92;max-width:44ch}
.auth-brand ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.auth-brand li{font-size:13.5px;opacity:.92;display:flex;gap:10px;align-items:flex-start}
.auth-brand li::before{content:"✓";font-weight:800;opacity:.85}
.auth-panel{display:flex;align-items:center;justify-content:center;padding:44px 28px;background:var(--bg)}
.auth-panel .card{width:100%;max-width:400px;margin:0;box-shadow:var(--shadow-md)}
@media(max-width:840px){
  .auth{grid-template-columns:1fr}
  .auth-brand{display:none}
  .auth-panel{padding:36px 20px}
}

.mono,code{font-family:'SF Mono',ui-monospace,'Cascadia Code','Consolas','Courier New',monospace}
code{background:var(--surface-2);border:1px solid var(--border);padding:1px 6px;border-radius:5px;font-size:12px;color:var(--text-soft)}
.muted{color:var(--text-soft)}
footer{margin-top:32px;font-size:11px;color:var(--text-faint);text-align:center;line-height:1.7}
.hide{display:none!important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .btn:active{transform:none}
}