/* ============================================================================
   Insurance app — MASTER THEME (token-based; workspace rule: no inline styles).
   Tokens + components vendored from ../shared-ui (Meridian/Ocean, the Stats
   look); rail + grid patterns match Stats/web/css/app.css. Retheme here only.
   ============================================================================ */
:root {
  /* brand + interaction */
  --accent: #1663E9; --accent-strong: #0E4FC7; --accent-soft: #E8EFFE;
  /* neutrals */
  --bg: #F6F8FB; --surface: #ffffff; --surface-2: #F7F9FC;
  --border: #E3E8EE; --border-soft: #EBEFF3;
  --text: #1A1F36; --text-2: #3C4257; --muted: #697386; --faint: #8A94A6;
  --danger: #DF1B41;
  /* semantic */
  --good: #09825D; --good-bg: #E8F5EE;
  --bad: #DF1B41;  --bad-bg: #FBE9EE;
  --warn: #BB5504; --warn-bg: #FCF0E4;
  /* type scale */
  --fs-title: 15px; --fs-body: .875rem; --fs-table: .84rem; --fs-label: .8rem;
  --fs-caption: 11.5px; --fs-eyebrow: 10.5px; --fs-kpi: 25px;
  /* shape */
  --radius: 10px; --radius-sm: 6px;
  --shadow: 0 1px 3px rgba(0,0,0,.08); --shadow-card: 0 1px 4px rgba(0,0,0,.07);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --chip: var(--surface-2);
}

* { box-sizing: border-box; }
/* the hidden attribute must beat any display: rule a class sets (grid/flex/…) —
   without this, "hidden" cards with display:grid keep rendering (Clear bug 7/30) */
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font); background: var(--bg); color: var(--text);
  display: flex; flex-direction: row; height: 100vh; overflow: hidden; font-size: 14px; }
.muted { color: var(--muted); }
.small { font-size: .82rem; }
.spacer { flex: 1; }
a { color: var(--accent); text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── buttons / inputs / chips (shared-ui components) ── */
.btn { border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  min-height: 32px; padding: .4rem .85rem; border-radius: 8px; cursor: pointer; font: inherit;
  font-size: var(--fs-body); display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 28%, var(--border)); }
.btn.small { min-height: 26px; padding: .22rem .6rem; font-size: .8rem; }
.icon-btn { width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 50%;
  background: var(--surface); color: var(--text); display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer; }
.icon-btn:hover { background: var(--surface-2); }
.input, select.input { border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 8px; min-height: 32px; padding: .35rem .6rem; font: inherit; font-size: var(--fs-body); }
.input:focus { border-color: var(--accent); outline: 2px solid var(--accent-soft); }
textarea.input { min-height: 64px; resize: vertical; }
.chip { display: inline-flex; align-items: center; gap: .35rem; min-height: 24px;
  padding: .18rem .55rem; border-radius: 999px; border: 1px solid var(--border);
  background: var(--chip); color: var(--text-2); font-size: var(--fs-caption); font-weight: 650; }
.chip.status-good { color: var(--good); background: var(--good-bg); border-color: color-mix(in srgb, var(--good) 30%, var(--surface)); }
.chip.status-warn { color: var(--warn); background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 30%, var(--surface)); }
.chip.status-bad  { color: var(--bad);  background: var(--bad-bg);  border-color: color-mix(in srgb, var(--bad) 30%, var(--surface)); }
.chip.status-info { color: var(--accent-strong); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 25%, var(--surface)); }
.countchip { font-size: var(--fs-caption); font-weight: 650; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 999px; padding: .14rem .55rem; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.panel-header { min-height: 44px; display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; padding: .6rem 1rem; border-bottom: 1px solid var(--border-soft); }
.panel-body { padding: 1rem; }
.title { margin: 0; font-size: var(--fs-title); font-weight: 650; color: var(--text); }
.alert { border: 1px solid var(--border); border-radius: var(--radius); padding: .7rem 1rem;
  background: var(--surface); color: var(--text-2); margin-bottom: .6rem; }
.alert.warn { border-color: color-mix(in srgb, var(--warn) 30%, var(--border)); background: var(--warn-bg); }
.alert.bad  { border-color: color-mix(in srgb, var(--bad) 30%, var(--border)); background: var(--bad-bg); }

/* ── hover info: titles with data-info explain themselves on mouseover; the
   faint dotted underline is the only affordance (owner: no ⓘ buttons) ── */
[data-info] { cursor: help; }
.hi, label[data-info] { text-decoration: underline dotted color-mix(in srgb, var(--faint) 55%, transparent);
  text-underline-offset: 3px; text-decoration-thickness: 1px; }
[data-info]:hover { text-decoration-color: var(--accent); }
.chip [data-info], .chip[data-info] { text-decoration: none; }  /* chips read as pills, keep them clean */
.info-pop { position: fixed; z-index: 90; max-width: 360px; background: var(--text); color: #fff;
  font-size: 12.5px; line-height: 1.45; font-weight: 400; padding: .6rem .75rem;
  border-radius: 8px; box-shadow: 0 10px 30px rgba(26,31,54,.28); pointer-events: none; }
.info-pop[hidden] { display: none; }
/* the verbatim phone script inside a popup */
.info-pop .ask { margin-top: .55rem; padding: .45rem .6rem; border-radius: 6px;
  background: rgba(255,255,255,.12); border-left: 3px solid var(--accent);
  font-style: italic; }
.info-pop .ask-tag { display: block; font-style: normal; font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: #9EC1FA; margin-bottom: .15rem; }

/* ── Meridian icon rail (Stats pattern) ── */
.appcol { flex: 1; min-width: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; }
.rail { width: 54px; min-width: 54px; height: 100vh; background: var(--surface);
  border-right: 1px solid var(--border-soft); display: flex; flex-direction: column;
  padding: 10px 9px; gap: 2px; transition: width .16s ease, min-width .16s ease;
  overflow: hidden; white-space: nowrap; z-index: 40; }
html.rail-pinned .rail { width: 224px; min-width: 224px; box-shadow: 6px 0 24px rgba(26,31,54,.08); }
.rail .logo { display: flex; align-items: center; gap: 9px; padding: 4px 2px 12px; }
.rail .logo .mark { min-width: 28px; display: flex; align-items: baseline; justify-content: center; color: var(--accent); }
.rail .logo .mark b { font-weight: 800; font-size: 20px; font-style: normal; line-height: 1; }
.rail .logo .mark i { font-family: Georgia, 'Times New Roman', serif; font-style: italic;
  font-weight: 600; font-size: 20px; line-height: 1; margin-left: 1px; }
.rail .logo .co { opacity: 0; transition: opacity .14s; }
html.rail-pinned .rail .logo .co { opacity: 1; }
.rail .logo .co b { display: block; font-size: 13px; font-weight: 650; color: var(--text); }
.rail .logo .co b em { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 600; }
.rail .logo .co span { display: block; font-size: 11px; color: var(--muted); }
.rail .sec { font-size: 10px; font-weight: 700; letter-spacing: .09em; color: var(--faint);
  padding: 10px 8px 4px; opacity: 0; transition: opacity .14s; height: 26px; }
html.rail-pinned .rail .sec { opacity: 1; }
.rail .tabs { display: flex; flex-direction: column; gap: 2px; }
.rail .tab { display: flex; align-items: center; gap: 10px; height: 31px; padding: 0 8px;
  border: none; border-radius: 6px; background: none; color: var(--text-2); font-weight: 500;
  font-size: 12.5px; cursor: pointer; width: 100%; text-align: left; white-space: nowrap; }
.rail .tab svg { width: 16px; min-width: 16px; height: 16px; stroke: var(--muted); fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rail .tab span { opacity: 0; transition: opacity .14s; overflow: hidden; text-overflow: ellipsis; }
html.rail-pinned .rail .tab span { opacity: 1; }
.rail .tab:hover { background: var(--surface-2); color: var(--text); }
.rail .tab.active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.rail .tab.active svg { stroke: var(--accent); }
.railfoot { margin-top: auto; border-top: 1px solid var(--border-soft); padding-top: 8px;
  display: flex; flex-direction: column; gap: 2px; }
.userchip { display: flex; align-items: center; gap: 9px; padding: 4px 3px; }
.userchip .av { width: 24px; min-width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-strong); font-size: 10.5px; font-weight: 700;
  display: grid; place-items: center; }
.userchip .nm { opacity: 0; transition: opacity .14s; font-size: 12px; font-weight: 500;
  color: var(--text-2); overflow: hidden; text-overflow: ellipsis; }
html.rail-pinned .rail .userchip .nm { opacity: 1; }
.rail-pin { position: fixed; top: var(--rail-pin-top, 64px); left: 42px; z-index: 41;
  transform: translateY(-50%); display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin: 0; padding: 0; border: 1px solid var(--border);
  border-radius: 50%; background: var(--surface); box-shadow: var(--shadow); color: var(--muted);
  cursor: pointer; transition: left .16s ease, color .12s ease, border-color .12s ease; }
.rail-pin:hover { color: var(--text); border-color: var(--faint); }
.rail-pin svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; transition: transform .16s ease; }
html.rail-pinned .rail-pin { left: 212px; }
html.rail-pinned .rail-pin svg { transform: rotate(180deg); }
.rail-tooltip { position: fixed; z-index: 55; transform: translateY(-50%);
  background: var(--text); color: #fff; font-size: 12px; font-weight: 600;
  padding: 5px 9px; border-radius: 6px; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(26,31,54,.18); opacity: 0; pointer-events: none;
  transition: opacity .12s ease; }
.rail-tooltip.show { opacity: 1; transition-delay: .15s; }

/* ── workspace + data grid (Stats pattern) ── */
.workspace { flex: 1; display: flex; flex-direction: column; padding: .75rem 1rem; gap: .6rem; min-height: 0; }
.view[hidden] { display: none; }
.gridhead { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.gridhead h2 { margin: 0; font-size: 1.05rem; }
.gridhead .input[type=search] { width: 260px; }
.gridfoot { text-align: center; padding: .4rem 0; }
.grid-wrap { overflow: auto; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); min-height: 0; }
.grid { border-collapse: separate; border-spacing: 0; font-size: var(--fs-table); width: 100%; }
.grid th, .grid td { padding: .38rem .55rem; border-bottom: 1px solid var(--border-soft); text-align: left; }
.grid td { white-space: nowrap; }
.grid thead th { position: sticky; top: 0; background: var(--surface-2); z-index: 3;
  font-weight: 600; font-size: var(--fs-caption); color: var(--muted); }
.grid tbody tr:hover td { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.grid td.num, .grid th.num { text-align: right; font-variant-numeric: tabular-nums; min-width: 3.4rem; }
.grid td.ellip { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; }
.grid td.empty { color: var(--faint); }
.grid tr.rowlink { cursor: pointer; }
/* treatment-fees table: fixed, compact columns (don't stretch to the viewport) */
#f-grid { width: auto; min-width: 560px; }
#f-grid th:first-child { min-width: 220px; }
#f-grid td.num, #f-grid th.num { width: 140px; min-width: 120px; }
.grid td.editable { cursor: cell; }
.grid td.editable:hover { outline: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: -1px; }
.grid td.editing { padding: 0; }
.cell-input { width: 100%; min-width: 4rem; border: 2px solid var(--accent); background: var(--surface);
  font: inherit; font-size: var(--fs-table); padding: .3rem .45rem; border-radius: 0; outline: none; }

/* ── calculator ── */
.calc-cols { display: grid; grid-template-columns: 380px minmax(0, 900px); gap: .75rem;
  align-items: start; overflow-y: auto; min-height: 0; padding-bottom: 1rem; }
.calc-in .panel-body { display: flex; flex-direction: column; gap: .7rem; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.field { display: grid; gap: .25rem; }
.field label { font-size: var(--fs-label); color: var(--text-2); font-weight: 600; }
.combo { position: relative; }
/* fixed overlay (positioned/sized by JS from the input's rect) — floats above
   all panels and grows to the viewport instead of clipping in the scroll area */
.combo-pop { position: fixed; z-index: 80;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: 0 12px 32px rgba(26,31,54,.2); overflow-y: auto; }
.combo-hd { position: sticky; top: 0; z-index: 1; padding: .3rem .65rem .25rem;
  background: var(--surface-2); border-bottom: 1px solid var(--border-soft);
  font-size: var(--fs-eyebrow); font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); }
.combo-item { padding: .45rem .65rem; cursor: pointer; font-size: .82rem; border-bottom: 1px solid var(--border-soft); }
.combo-item:last-child { border-bottom: none; }
.combo-item:hover, .combo-item.sel { background: var(--accent-soft); }
.combo-item .ci-main { font-weight: 650; }
.combo-item .ci-sub { color: var(--muted); font-size: var(--fs-caption); }
.verifcard { border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  background: var(--surface-2); padding: .75rem .85rem; font-size: .82rem;
  display: flex; flex-direction: column; gap: .5rem; }
.verifcard .vc-head { display: flex; flex-direction: column; gap: .1rem; }
.verifcard .vc-carrier { display: flex; align-items: center; gap: .5rem;
  font-weight: 650; font-size: .88rem; }
.verifcard .vc-line { display: flex; justify-content: space-between; align-items: baseline; }
.verifcard .vc-k { color: var(--muted); }
.kpirow .netnote { grid-column: 1 / -1; margin: 0; }
details#c-adv summary { cursor: pointer; color: var(--muted); font-size: var(--fs-label); font-weight: 600; }
details#c-adv[open] summary { margin-bottom: .6rem; }
details#c-adv .two { margin-bottom: .6rem; }
.calc-empty .panel-body { padding: 2.2rem 1.4rem; text-align: center; }
.checkrow { display: flex; flex-wrap: wrap; gap: .4rem; }
.checkrow:empty { display: none; }
/* eligibility chips: stacked column on the estimate card's right (owner 2026-07-30) */
/* chips sit just right of the In/Out table: the gap before them takes 1/4 of
   the free space, the ::after spacer takes the rest (owner 2026-07-30) */
.est-body { display: flex; align-items: stretch; }
.est-body::after { content: ""; flex: 3; }
.est-main { flex: 0 1 auto; min-width: 0; }
.est-gap { flex: 1; min-width: 1.2rem; }
.checks-col { display: flex; flex-direction: column; gap: .5rem; max-width: 250px;
  justify-content: center; align-items: flex-start; padding-bottom: 2rem; }
.checks-col:empty { display: none; }
.checks-col .chip { justify-content: flex-start; text-align: left; white-space: normal;
  line-height: 1.3; padding: .3rem .7rem; }
/* dual-coverage secondary-plan card (left panel) */
.dualcard { border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: var(--radius-sm); background: var(--accent-soft);
  padding: .6rem .75rem; font-size: .82rem; display: flex; flex-direction: column; gap: .4rem; }
.dualcard .dc-head { display: flex; align-items: center; justify-content: space-between;
  font-weight: 700; color: var(--accent-strong); font-size: .8rem; }
.dualcard .dc-x { width: 24px; height: 24px; }
.dualcard .btn { align-self: flex-start; }
.kpirow .dualnote { grid-column: 1 / -1; margin: 0; background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); font-size: .82rem; }
.kpirow { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.kpi { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: .6rem .75rem; background: var(--surface-2); }
.kpi .k-label { font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); font-weight: 700; }
.kpi .k-val { font-size: var(--fs-kpi); font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi.k-accent .k-val { color: var(--accent-strong); }
.kpi.k-good .k-val { color: var(--good); }
.kpi .k-sub { font-size: var(--fs-caption); color: var(--muted); }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-table); }
.table th, .table td { padding: .45rem .6rem; border-bottom: 1px solid var(--border-soft); text-align: left; }
.table th { color: var(--muted); font-size: var(--fs-caption); font-weight: 700; }
/* In/Out comparison: compact (don't stretch across the panel), with the office's
   actual network column highlighted and the other dimmed (owner 2026-07-30) */
.nettable { width: auto; min-width: 460px; margin-bottom: .8rem; }
.nettable td.num, .nettable th.num { text-align: right; font-variant-numeric: tabular-nums;
  width: 132px; min-width: 110px; }
.nettable td:first-child { padding-right: 1.2rem; }
.nettable tr.emph td { font-weight: 700; }
.nettable td.dim { color: var(--faint); }
.nettable th.on, .nettable td.on { background: var(--accent-soft); }
.nettable th.on { color: var(--accent-strong); }
.nettable th.on .netchip { display: inline-block; margin-left: .3rem; padding: .05rem .4rem;
  border-radius: 999px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; }
/* math derivation panel: sectioned plain-language steps */
#c-trace { margin-top: .8rem; max-width: 760px; }
.math-sec { margin-bottom: .9rem; }
.math-sec.dim-sec { opacity: .5; }
.math-title { font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: 700; margin-bottom: .2rem; display: flex;
  align-items: center; gap: .45rem; }
.math-title .netchip { display: inline-block; padding: .05rem .4rem; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0; }
.math-tbl td { padding: .3rem .5rem; }
.math-tbl .mt-l { width: 220px; font-weight: 600; }
.math-tbl .mt-f { color: var(--muted); }
.math-tbl .mt-v { width: 110px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; }
.math-tbl tr.emph td { background: color-mix(in srgb, var(--accent) 4%, transparent); }

/* ── verification form: spreadsheet-style call sheet ──
   Mirrors the owner's 'Patient Insurance Verification' sheet: a single dense
   document (right-aligned labels : gray input boxes, four columns), light-blue
   underlined section bands, practice card + notes in a slim sidebar, computed
   cells inline, conditional formatting on bad entries. */
.sheetwrap { overflow-y: auto; min-height: 0; display: flex; gap: .8rem;
  align-items: flex-start; padding-bottom: 1.2rem; }
.sheet { flex: 1; max-width: 780px; padding: 1rem 1.4rem 1.2rem;
  display: flex; flex-direction: column; gap: 3px; }
.sheet-title { margin: 0 0 .6rem; text-align: center; font-size: 1.02rem; }
.srow { display: grid; grid-template-columns: 172px 1fr 158px 1fr;
  gap: 2px 8px; align-items: center; }
.srow label { text-align: right; font-weight: 600; font-size: .8rem; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow label.lbl-long { grid-column: 1 / 3; text-align: right; white-space: normal; }
.sheet .input { min-height: 26px; padding: .18rem .45rem; font-size: .82rem;
  background: var(--surface-2); border-radius: 4px; }
.sheet input[type=date].input { font-size: .78rem; }
.srow .wide3 { grid-column: 2 / -1; }
.srow .wide2 { grid-column: 3 / -1; }   /* pairs with .lbl-long (label across cols 1-2) */
.srow.ins { grid-template-columns: 172px 1fr 24px .8fr; }
.srow.ins .of { text-align: center; color: var(--muted); font-size: .8rem; }
.scomp { font-size: .8rem; font-weight: 600; color: var(--accent-strong); min-height: 1.1em; }
.scomp.span2 { grid-column: 3 / -1; }
.scomp.cf-bad { color: var(--bad); }
.ssec { grid-column: 1 / -1; margin-top: .55rem; padding: .22rem .5rem;
  background: var(--accent-soft); border-radius: 4px; font-size: .8rem; font-weight: 700;
  color: var(--accent-strong); }
.srow.completedby { margin-top: .7rem; }
.sheet-save { text-align: center; margin-top: .9rem; }
.sheet-save .btn { min-width: 160px; }
#form-alerts { display: flex; flex-direction: column; gap: .3rem; margin-top: .6rem; }
#form-alerts .alert { margin: 0; padding: .45rem .8rem; font-size: .8rem; font-weight: 600; }
/* conditional formatting (the sheet's error colors) */
.sheet .input.cf-err { background: var(--bad-bg) !important; border-color: var(--bad) !important; }
.sheet .input.cf-warn { background: var(--warn-bg) !important; border-color: var(--warn) !important; }
/* sidebar: practice card + notes (the sheet's right column) */
.sheet-side { width: 218px; min-width: 218px; display: flex; flex-direction: column; gap: .8rem; }
.practice-card { border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border-radius: var(--radius-sm); padding: .7rem .8rem; display: flex;
  flex-direction: column; gap: 1px; font-size: .78rem; color: var(--text-2); }
.practice-card b { color: var(--text); font-size: .8rem; }
.practice-card .gap { margin-top: .5rem; }
.practice-card b.gap { margin-top: .5rem; }
.side-notes { display: flex; flex-direction: column; gap: .25rem; }
.side-notes label { font-weight: 600; font-size: .8rem; }
.side-notes textarea { min-height: 300px; background: var(--surface-2); }
@media (max-width: 1000px) { .sheetwrap { flex-direction: column; } .sheet-side { width: 100%; flex-direction: row; } .side-notes { flex: 1; } .side-notes textarea { min-height: 120px; } }

/* ── modal ── */
.modal { position: fixed; inset: 0; background: rgba(32,33,36,.5); display: grid;
  place-items: center; z-index: 60; padding: 1rem; }
.modal[hidden] { display: none; }
.modal-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  min-width: 420px; max-width: min(860px, 94vw); max-height: 90vh; display: flex; flex-direction: column; }
.modal-head { display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1.25rem; border-bottom: 1px solid var(--border-soft); }
.modal-head h3 { margin: 0; font-size: 1.02rem; }
.modal-body { padding: 1.1rem 1.25rem; overflow: auto; }
.modal-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1rem; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .25rem .9rem; font-size: .84rem; }
.kv .k { color: var(--muted); }
/* record detail modal, shaped like the entry sheet */
.kvsheet { display: grid; grid-template-columns: max-content 1fr max-content 1fr;
  gap: 3px 10px; font-size: .8rem; align-items: baseline; min-width: 560px; }
.kvsheet label { text-align: right; font-weight: 600; white-space: nowrap; }
.kvsheet span { color: var(--text-2); }
.kvsheet .ssec { grid-column: 1 / -1; }
.ratesedit { display: flex; flex-direction: column; gap: .4rem; }
.ratesedit .rrow { display: grid; grid-template-columns: 1.2fr 1fr .8fr .8fr auto; gap: .4rem; align-items: center; }
.ratesedit .rhead { font-size: var(--fs-caption); color: var(--muted); font-weight: 700; }

/* ── contracted rates: master/detail ── */
.rates-cols { display: grid; grid-template-columns: 250px minmax(0, 860px); gap: .75rem;
  align-items: start; overflow-y: auto; min-height: 0; padding-bottom: 1rem; }
.co-list { display: flex; flex-direction: column; gap: 2px; padding: .45rem; }
.co-item { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .5rem .6rem; border: none; background: none; border-radius: 6px; cursor: pointer;
  font: inherit; font-size: .85rem; color: var(--text); text-align: left; }
.co-item:hover { background: var(--surface-2); }
.co-item.sel { background: var(--accent-soft); font-weight: 650; color: var(--accent-strong); }
.co-item .chip { flex: 0 0 auto; }
.co-detail { display: flex; flex-direction: column; gap: .75rem; }
.co-head .panel-body { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: flex-start; }
.co-field { display: grid; gap: .25rem; align-content: start; }
.co-field.grow { flex: 1; min-width: 200px; }
.co-field label { font-size: var(--fs-caption); color: var(--muted); font-weight: 700; }
.ratetbl td.num, .ratetbl th.num { text-align: right; font-variant-numeric: tabular-nums; width: 120px; }
.ratetbl .src { font-size: var(--fs-caption); color: var(--faint); font-weight: 400; }

/* staff see reference tables but never the edit controls (server enforces too) */
.is-staff .admin-only { display: none !important; }

/* ── audit log ── */
.audit-ev { border-bottom: 1px solid var(--border-soft); padding: .6rem 0; }
.audit-ev:last-child { border-bottom: none; }
.audit-head { display: flex; align-items: center; gap: .5rem; font-size: .82rem;
  color: var(--muted); margin-bottom: .35rem; }
.audit-tbl { font-size: .78rem; }
.audit-tbl td, .audit-tbl th { padding: .3rem .5rem; }
.sheet-save { display: flex; justify-content: center; gap: .6rem; }

@media (max-width: 900px) {
  .rail, .rail-pin, .rail-tooltip { display: none; }
  .calc-cols { grid-template-columns: 1fr; }
}