/* ─────────────────────────────────────────────────────────────────────────────
   Fionda Health — shared styles
   Loaded by every page. All styles live here, including the global nav /
   sub-pill bar (whose <fionda-nav> / <fionda-subbar> behavior is in nav.js)
   and the methodology-page prose — both at the bottom of this file.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Theme model ─────────────────────────────────────────────────────────────
   :root holds the DEFAULT (light "Ledger") values; [data-theme="dark"] holds
   the dark values verbatim. data-theme is set by the inline head script on
   every page (localStorage 'fh-theme' === 'dark'; OS preference deliberately
   NOT consulted — light for everyone until they toggle) BEFORE the stylesheet
   loads, so first paint is flash-free and no-JS renders light.
   Unforked groups (nav green family, type, deep gradient starts) live once
   in :root — never duplicate them into the dark block.
   Design record: dev/adhoc/light_theme_options.html (light-a "Ledger") +
   dev/docs/build/light_theme_build_brief.md. */
:root {
  --bg:      #f4f5f8;
  --surface: #ffffff;
  --border:  #e0e3ec;
  --muted:   #aab0c3;
  --text:    #171a26;
  --subdued: #5f6577;
  --accent:  #1e7c45;
  --accent2: #9a6c00;
  --green:   #1e7c45;
  --red:     #c62828;

  /* ── Tokenization sweep (see dev/adhoc/tokenization_map.md) ──
     Near-duplicate tokens were merged in the light-theme W0 pass
     (surface-3→surface-2, surface-inset-2→surface-inset,
     chart-tick→subdued, text-faint→subdued). */

  /* Elevated / inset surfaces (light: raised = white + shadow, not fill) */
  --surface-2:       #ffffff;
  --surface-inset:   #eceef4;
  --border-2:        #c9cede;

  /* Text extras */
  --text-mid:   #3d4256;

  /* Accent extras (light: hover darkens, not lightens) */
  --accent-hover: #186a3a;
  --on-accent:    #ffffff;

  /* Type — Voice B "The Filing": Newsreader carries display + prose; DM Mono
     carries both the Data role (nav/labels) and Figures (numbers, via --fig).
     See docs/build/Type Voice - Claude Code Handoff (A vs B).md. */
  --prose:   'Newsreader', Georgia, serif;          /* Voice B — The Filing */
  --display: 'Newsreader', Georgia, serif;          /* words: h1, panel/popover titles, logo */
  --fig:     'DM Mono', ui-monospace, monospace;     /* numbers: KPI hero, stat-pill value, fh-pop-big */
  --fig-weight: 500;
  --fig-ls:  -0.02em;

  /* Charts (read into JS via window.FH_THEME in fionda-charts.js) */
  --chart-grid:       #eceef4;
  --chart-primary:    #7053d6;
  --chart-comparison: #c65a11;

  /* Categorical palette — G3-final semantic grouping (hue family = denial
     driver). Stack order + grouping live in REASONS[] in fionda-charts.js;
     validation record in the build brief. */
  --cat-1: #ad3a36;  /* Not Medically Necessary — medical-necessity family */
  --cat-2: #0d7096;  /* Failure to Request Pre-auth — process family */
  --cat-3: #3d4a94;  /* Not Covered / Exceeds Limits — coverage family */
  --cat-4: #4480c8;  /* Not In Network — coverage family */
  --cat-5: #6cb7e7;  /* Coverage Not In Effect — coverage family */
  --cat-6: #97c37e;  /* Claim Not Timely — process family */
  --cat-7: #25b07d;  /* Coding Issue — process family */
  --cat-8: #26794f;  /* Duplicate Claim — process family */
  --cat-9: #c3c8cf;  /* Other / Unclassified */

  /* Deep gradient starts (preview bar fills) — unforked, same both themes */
  --green-deep: #2d8a56;
  --red-deep:   #b3402f;
  --amber-deep: #b8862a;

  /* Neutral chip (public-scope pill) */
  --chip-neutral-bg:     #eef0f5;
  --chip-neutral-border: #dcdfe9;

  /* Nav green family — brand chrome, themed as its own group */
  --nav-bg:            #0d2b1a;
  --nav-border:        #1a3326;
  --nav-text:          #d8f5e0;
  --nav-text-dim:      #6a9a7a;
  --nav-text-faint:    #6a9c7d;
  --nav-accent:        #2d8a56;
  --nav-accent-hover:  #34a166;
  --on-nav-accent:     #fff;
  --nav-chip-bg:       #121e16;
  --nav-chip-text:     #4a7a5a;
  --nav-avatar-bg:     #1a3d26;
  --subbar-bg:         #091812;
  --subbar-border:     #162a1e;
  --pill-text:         #6fa57e;
  --pill-text-hover:   #7ab880;
  --pill-active-bg:    #112a1a;
  --pill-active-border:#2a5a36;

  /* Government LOB — mode-signal accent (placeholder, flagged for revisit
     before government-tier launch; see dev/adhoc/lob_color_study.html).
     Two-token model: --lob-gov is page-level (themed light/dark, used by
     each page's eyebrow — fhScopeEyebrow() in nav.js); --nav-lob-gov is
     nav-level and constant across themes, since the nav chrome (D2 Anchor)
     is dark in both. Never used by chart code. */
  --lob-gov:          #9c2f72;
  --lob-gov-rgb:      156,47,114;
  --nav-lob-gov:       #ea80c6;
  --nav-lob-gov-rgb:   234,128,198;

  /* KPI hero tile — promotes the market-rate stat pill to the page headline.
     See dev/adhoc/phase0_signpost_kpihierarchy_mockups.html (Fix 5).
     Forked per theme (mockup light-a): pale mint in light, deep green in dark. */
  --kpi-hero-bg-1:     #e6f4ea;
  --kpi-hero-bg-2:     #f4faf6;
  --kpi-hero-label:    #1d6b3d;
  --kpi-hero-accent:   #17693a;

  /* RGB triplets — for rgba(var(--x-rgb), alpha); alpha stays per-use */
  --accent-rgb:  30,124,69;
  --accent2-rgb: 154,108,0;
  --subdued-rgb: 95,101,119;
  --tint-rgb:    23,26,38;      /* row tints flip to dark-on-light */
  --shadow-rgb:  45,55,90;      /* cool soft shadow */
  --scrim-rgb:   18,22,34;
  --chart-primary-rgb: 112,83,214;  /* = --chart-primary; Payer Compare bars + heatmap ramp */

  /* Partial-denial fill alpha (Chart 3 combined stack, full→combined band).
     Theme-forked by design — the pale fill needs more alpha on dark to stay
     legible (decision record: dev/adhoc/chart3_option2_final_mockup.html).
     Read by FH_THEME.partialAlpha and the .legend-swatch chip. */
  --partial-alpha: 0.06;

  /* Select chevron — whole data-URI hoisted because var() can't run inside
     a URI; a theme redefines this token with a re-colored chevron. */
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235f6577' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ── Dark theme — the shipped pre-inversion values, verbatim ────────────────
   Selected by the head init script (stored 'fh-theme', else OS preference).
   Only forked tokens appear here; nav/type/deep-start groups stay in :root.
   Interim: --cat-1..9 dark = the pre-W2 shipped REASONS[] hexes in the new
   grouped order; a dark re-step is a follow-up ticket in the build brief. */
[data-theme="dark"] {
  --bg:      #08090d;
  --surface: #0f1117;
  --border:  #1e2130;
  --muted:   #565d7a;
  --text:    #e2e4ec;
  --subdued: #8b90a8;
  --accent:  #52c97a;
  --accent2: #f9a825;
  --green:   #52c97a;
  --red:     #ef5350;

  --surface-2:       #1a1d28;
  --surface-inset:   #0c0e14;
  --border-2:        #2a2e45;

  --text-mid:   #b6bbcc;

  --accent-hover: #5dd88a;
  --on-accent:    #000;

  --chart-grid:       #13161f;
  --chart-primary:    #a78bfa;
  --chart-comparison: #fb923c;

  --cat-1: #ef5350;  /* Not Medically Necessary */
  --cat-2: #ff8a65;  /* Failure to Request Pre-auth */
  --cat-3: #ffa726;  /* Not Covered / Exceeds Limits */
  --cat-4: #66bb6a;  /* Not In Network */
  --cat-5: #26c6da;  /* Coverage Not In Effect */
  --cat-6: #7e57c2;  /* Claim Not Timely */
  --cat-7: #5b9bd5;  /* Coding Issue */
  --cat-8: #26a69a;  /* Duplicate Claim */
  --cat-9: #37474f;  /* Other / Unclassified */

  --chip-neutral-bg:     #161922;
  --chip-neutral-border: #232838;

  --kpi-hero-bg-1:     #102a1b;
  --kpi-hero-bg-2:     #0c1712;
  --kpi-hero-label:    #8fd8a6;
  --kpi-hero-accent:   #8fe6ad;

  --accent-rgb:  82,201,122;
  --accent2-rgb: 249,168,37;
  --subdued-rgb: 139,144,168;
  --tint-rgb:    255,255,255;
  --shadow-rgb:  0,0,0;
  --scrim-rgb:   4,6,9;
  --chart-primary-rgb: 167,139,250;

  --partial-alpha: 0.10;

  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238b90a8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");

  /* --nav-lob-gov stays in :root only — never re-themed (nav chrome is dark
     in both themes). --lob-gov is page-level and forks here. */
  --lob-gov:     #ea80c6;
  --lob-gov-rgb: 234,128,198;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg); color: var(--text);
  font-family: 'DM Mono', monospace; font-size: 14px;
  min-height: 100vh;
}

main { padding: 40px 48px 60px; }

header { border-bottom: 1px solid var(--border); padding-bottom: 24px; margin-bottom: 40px; }
.header-eyebrow { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
h1 { font-family: var(--display); font-size: 28px; font-weight: 700; color: var(--text); letter-spacing: 0; line-height: 1.15; margin-bottom: 10px; }
.header-meta { font-family: var(--prose); color: var(--subdued); font-size: 13px; line-height: 1.6; }
.header-meta span { color: var(--text); font-weight: 500; }

.stat-row { display: flex; gap: 16px; margin-top: 20px; flex-wrap: wrap; }
.stat-pill { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 10px 18px; display: flex; flex-direction: column; gap: 3px; min-width: 140px; }
.stat-pill .label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--subdued); }
.stat-pill .value { font-family: var(--fig); font-size: 20px; font-weight: var(--fig-weight); letter-spacing: var(--fig-ls); font-variant-numeric: tabular-nums; color: var(--text); }
.stat-pill .delta { font-size: 11px; color: var(--subdued); }
/* .wide modifier — for pills whose value is a string label (Top Reason,
   Largest Category Gap, Largest Reason Gap) instead of a short number.
   Wider tile + smaller value font so abbreviated labels like
   "Hosp. Inpatient" fit without ellipsis. */
.stat-pill.wide { min-width: 200px; }
.stat-pill.wide .value { font-size: 15px; line-height: 1.25; }

/* KPI hero — promotes the market-rate tile to the page headline. Engaged only
   when a pill descriptor sets hero:true (Index Market Trend); renderPills adds
   .has-hero to the row, switching it from flex to a 5-col grid. Pages without a
   hero pill (Payer Detail, Side-by-Side) keep the plain flex .stat-row. */
.stat-row.has-hero {
  display: grid;
  grid-template-columns: 1.55fr 1fr 1fr 1fr 1fr;
  align-items: stretch;
}
.stat-row.has-hero .stat-pill { min-width: 0; }   /* let grid tracks size tiles */
.stat-pill.hero {
  position: relative;
  border-color: var(--pill-active-border);
  background: linear-gradient(180deg, var(--kpi-hero-bg-1), var(--kpi-hero-bg-2));
  padding: 15px 18px;
  justify-content: center;
}
.stat-pill.hero .label { color: var(--kpi-hero-label); }
.stat-pill.hero .value { font-size: 46px; letter-spacing: -0.5px; }
.stat-pill.hero .delta { font-size: 12px; }
.stat-pill .hero-tag {
  position: absolute; top: 11px; right: 13px;
  font-family: 'DM Mono', monospace; font-size: 9px;
  letter-spacing: 0.1em; text-transform: uppercase;
  /* Chip stays nav-dark in both themes (Anchor accent); --nav-text is the
     unforked pale mint, readable on --nav-bg in both. (--kpi-hero-accent
     forks dark-green in light → invisible here.) */
  color: var(--nav-text); background: var(--nav-bg);
  border: 1px solid var(--pill-active-border); border-radius: 100px;
  padding: 2px 9px;
}
@media (max-width: 720px) {
  .stat-row.has-hero { grid-template-columns: repeat(2, 1fr); }
  .stat-row.has-hero .stat-pill.hero { grid-column: 1 / -1; }
}
.delta-up   { color: var(--red) !important; }
.delta-down { color: var(--green) !important; }

/* Footnote shown directly under .stat-row — currently only on the Index page
   for the Top Reason pill's asterisk explaining the "Other / Unclassified"
   exclusion. Hidden if empty (no extra layout cost). */
.stat-footnote { font-size: 11px; color: var(--subdued); margin-top: 10px; line-height: 1.5; }
.stat-footnote:empty { display: none; }

/* Note: the Compare Payer dropdown lives in the subbar's trailing slot
   (.fh-subbar-trailing, in the nav section below), not in a page-level
   row, so there's no .payer-selector-* rule here. */

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 28px 32px 24px; margin-bottom: 28px; }
.panel-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; gap: 20px; flex-wrap: wrap; }
.panel-eyebrow { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.title-row { display: flex; align-items: center; gap: 10px; }
.panel-title { font-family: var(--display); font-size: 17px; font-weight: 700; color: var(--text); letter-spacing: 0; }
.panel-subtitle { font-family: var(--prose); font-size: 12.5px; color: var(--subdued); margin-top: 4px; line-height: 1.55; }
/* Right-hand slot of .panel-header for source/scope annotations (Payer Compare) */
.panel-meta { font-size: 11px; color: var(--subdued); text-align: right; line-height: 1.6; }

/* "How is this calculated?" info button + popover.
   Pattern: small (i) button next to a chart title. Click opens an absolutely-
   positioned popover anchored under the button; click outside or press Esc to
   close. Markup is rendered per chart (see *.html). The open/close JS lives
   in fionda-charts.js as initInfoPopovers(). */
.info-wrap { position: relative; display: inline-block; }
.info-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--muted); background: transparent; color: var(--subdued);
  font-family: var(--display); font-style: italic; font-size: 12px; font-weight: 700;
  cursor: pointer; transition: all 0.15s; padding: 0; line-height: 1;
}
.info-btn:hover, .info-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.info-pop {
  position: absolute; top: calc(100% + 8px); left: -10px;
  width: 480px; max-width: calc(100vw - 80px);
  background: var(--surface-2); border: 1px solid var(--muted); border-radius: 8px;
  padding: 16px 20px; font-size: 13px; line-height: 1.55; color: var(--text);
  box-shadow: 0 8px 24px rgba(var(--shadow-rgb), 0.4);
  z-index: 50; display: none;
}
.info-pop[data-open="true"] { display: block; }
.info-pop::before {
  content: ""; position: absolute; top: -6px; left: 14px;
  width: 11px; height: 11px; background: var(--surface-2);
  border-left: 1px solid var(--muted); border-top: 1px solid var(--muted);
  transform: rotate(45deg);
}
.info-pop p { margin-bottom: 10px; }
.info-pop p:last-child { margin-bottom: 0; }
.info-pop strong { color: var(--text); }

/* Chart-3 "vs market" reference line caption, shown only when payer-compare
   reveals the market overlay. Harmless on other pages (display:none default). */
.chart3-market-ref { font-size: 11px; color: var(--subdued); margin-top: 5px; display: none; }
.chart3-market-ref.visible { display: block; }

.legend { display: flex; gap: 20px; align-items: center; flex-shrink: 0; flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--subdued); }
.legend-line { width: 28px; height: 2px; border-radius: 2px; flex-shrink: 0; }
.legend-line.solid  { background: var(--accent); }
.legend-line.dashed { background: transparent; border-top: 2px dashed var(--accent2); height: 0; margin-top: 1px; }
.legend-line.violet { background: var(--chart-primary); }
/* Comparison-payer swatch — matches the COLOR_COMPARISON line on Side-by-Side
   (orange, picked for high contrast with violet primary and clear distinction
   from the green market line). */
.legend-line.orange { background: var(--chart-comparison); }
/* Faded market reference swatch — matches the makeFadedMarketSet line on
   payer-focused pages (Payer Detail, Side-by-Side) where market is reference,
   not focal. Pages where the market line is primary keep .legend-line.solid. */
.legend-line.market-faded { background: var(--accent); opacity: 0.4; }
/* Filer-range band swatch — matches the gray min/max band added by
   makeVolWithBandSet on Market Trend (index.html, Charts 1 & 2). Same fill
   color and outline opacity as the band itself so the legend reads as a
   shrunken version of the chart band. */
.legend-band {
  width: 24px; height: 10px; border-radius: 2px; flex-shrink: 0;
  background: rgba(var(--subdued-rgb), 0.22);
  border: 1px solid rgba(var(--subdued-rgb), 0.35);
}
/* Partial-denial fill swatch — pairs the exact Option-2 fill token + top-edge
   treatment used by Chart 3's combined stack; the fill alpha reads the same
   --partial-alpha token the chart fill reads, so the legend forks with the
   theme too. No colors beyond accent, at the specified alphas. */
.legend-swatch {
  width: 24px; height: 10px; border-radius: 2px; flex-shrink: 0;
  background: rgba(var(--accent-rgb), var(--partial-alpha));
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  border-top: 1px solid rgba(var(--accent-rgb), 0.32);
}
/* Violet variant for the payer-hued combined stack (Payer Detail Chart 3),
   where the partial fill rides --chart-primary-rgb, not accent. */
.legend-swatch.violet {
  background: rgba(var(--chart-primary-rgb), var(--partial-alpha));
  border-color: rgba(var(--chart-primary-rgb), 0.18);
  border-top-color: rgba(var(--chart-primary-rgb), 0.32);
}

.control-row { display: flex; align-items: center; gap: 12px; }
/* .panel-header is space-between + wrap: a control cluster that wraps to its
   own line lands at flex-start and drifts left. margin-left:auto is a no-op
   while the cluster shares the title's line, and pins it right when it wraps. */
.panel-header > .control-row { margin-left: auto; }
/* The title block otherwise claims its longest line's intrinsic width, so a
   long subtitle pushes the legend/controls onto their own rows below. Let it
   flex instead (min-width:0 allows text wrap beside the cluster); the 320px
   basis keeps narrow viewports wrapping to the stacked layout as before. */
.panel-header > :first-child { flex: 1 1 320px; min-width: 0; }
.control-label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--subdued); flex-shrink: 0; }

/* Period chips — pill-group control (Payer Compare year rail + FY/Q picker;
   promoted from dev/adhoc/payer_compare_wireframe.html). Accent-tint active
   state derived from the .chart-hint vocabulary. .disabled marks periods the
   data doesn't cover yet (e.g. FY of a partially-loaded year). */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--border); border-radius: 100px; padding: 4px 12px;
  font-size: 12px; color: var(--subdued); cursor: pointer; user-select: none;
  transition: border-color 0.15s, color 0.15s;
}
.chip:hover { color: var(--text-mid); border-color: var(--muted); }
.chip.active {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.28);
}
.chip.disabled { opacity: 0.35; cursor: default; pointer-events: none; }

/* Segmented view toggle — two-state pill (Rate / Share %) on the Reasons
   charts. Same accent-tint active vocabulary as .chip; state is aria-pressed
   on the buttons. Promoted from dev/adhoc/chart4_share_toggle_mockup.html. */
.fh-seg { display: inline-flex; border: 1px solid var(--muted); border-radius: 100px; overflow: hidden; flex-shrink: 0; }
.fh-seg button {
  font: 500 12px 'DM Mono', monospace; color: var(--subdued);
  background: transparent; border: 0; padding: 5px 14px; cursor: pointer;
  transition: color 0.15s, background 0.15s; line-height: 1.4;
}
.fh-seg button + button { border-left: 1px solid var(--border); }
.fh-seg button:hover { color: var(--text-mid); }
.fh-seg button[aria-pressed="true"] {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
}

select {
  background: var(--bg); border: 1px solid var(--muted); border-radius: 5px;
  color: var(--text); font-family: 'DM Mono', monospace; font-size: 13px;
  padding: 6px 28px 6px 12px; cursor: pointer; outline: none;
  appearance: none; -webkit-appearance: none;
  background-image: var(--select-chevron);
  background-repeat: no-repeat; background-position: right 10px center; transition: border-color 0.15s;
}
select:hover, select:focus { border-color: var(--accent); }
select option { background: var(--surface-2); }

.chart-wrap { position: relative; height: 340px; }
.bar-wrap   { position: relative; height: 360px; margin-bottom: 4px; }

/* Chart signposting (Fix 3) — micro-hint pill that advertises hover depth on
   the Market Trend charts; fades (once) on first hover via .faded. */
.chart-hint {
  position: absolute; top: 2px; right: 4px; z-index: 2;
  font-family: 'DM Mono', monospace; font-size: 10.5px; letter-spacing: 0.02em;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  border-radius: 100px; padding: 3px 10px;
  pointer-events: none;             /* never intercept the chart's own hover */
  transition: opacity 0.4s ease;
}
.chart-hint.faded { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .chart-hint { transition: none; } }

.bar-legend { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 28px; margin-top: 14px; }
/* Grouped legend (light-theme W2): one .l-block per denial-driver family —
   header with subtotal %, members beneath. */
.l-block { display: flex; flex-direction: column; gap: 5px; }
.l-group { font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.l-group-sub { color: var(--text-mid); font-weight: 600; letter-spacing: 0; margin-left: 4px; }
.l-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--subdued); transition: opacity 0.15s; cursor: pointer; }
.l-item.l-dimmed { opacity: 0.25; }
.l-item.l-active  { color: var(--text); }
.l-item.l-active .l-swatch { outline: 2px solid rgba(var(--tint-rgb), 0.5); outline-offset: 1px; }
.l-swatch { width: 12px; height: 12px; border-radius: 2px; flex-shrink: 0; }

/* External floating tooltip for stacked-bar Reasons charts.
   Anchored under the hovered bar's column (not over it) so it doesn't block
   the highlighted segments. Single shared element, lazy-created in JS. */
.bar-tt {
  position: fixed; z-index: 100; pointer-events: none;
  background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 6px;
  padding: 10px 12px; min-width: 170px;
  font-family: 'DM Mono', monospace; font-size: 11px; color: var(--subdued);
  box-shadow: 0 4px 14px rgba(var(--shadow-rgb), 0.45);
  opacity: 0; transition: opacity 0.12s;
}
.bar-tt.visible { opacity: 1; }
/* Caret triangle, drawn as two stacked pseudo-elements so the border shows */
.bar-tt::before, .bar-tt::after {
  content: ''; position: absolute; left: var(--caret-x, 50%);
  transform: translateX(-50%); width: 0; height: 0;
  border-left: 7px solid transparent; border-right: 7px solid transparent;
}
.bar-tt::before { top: -7px; border-bottom: 7px solid var(--border-2); }
.bar-tt::after  { top: -6px; border-left-width: 6px; border-right-width: 6px;
                  border-bottom: 6px solid var(--surface-2); }
.bar-tt-title { font-family: var(--display); font-weight: 700; font-size: 12px; color: var(--text); margin-bottom: 8px; }
.bar-tt-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.bar-tt-row .bar-tt-swatch { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.bar-tt-row .bar-tt-label  { flex: 1; color: var(--text); }
.bar-tt-row .bar-tt-value  { color: var(--text); font-weight: 500; }
.bar-tt-row.bar-tt-sub .bar-tt-label,
.bar-tt-row.bar-tt-sub .bar-tt-value { color: var(--subdued); font-weight: 400; }
.bar-tt-total { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--border-2); }
.bar-tt-total .bar-tt-label { color: var(--subdued); }

.footnote { margin-top: 12px; font-size: 12px; color: var(--subdued); line-height: 1.6; min-height: 1em; }

footer { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); color: var(--subdued); font-size: 12px; line-height: 1.7; }
footer strong { color: var(--text); }

/* ─────────────────────────────────────────────────────────────────────────────
   Global nav + sub-pill bar
   The <fionda-nav> / <fionda-subbar> custom elements (defined in nav.js) ARE
   the bars — no inner wrapper — so they're styled directly here. Previously
   injected from nav.js; consolidated into the stylesheet so all CSS lives in
   one place.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Top nav ── */
/* The <fionda-nav> element IS the bar (no inner wrapper). It needs to be
   the sticky element directly, with body as its containing block — if we
   made an inner div sticky, that div's containing block would be the
   (52px-tall) host element, leaving it no room to stick within. */
fionda-nav {
  background: var(--nav-bg);
  height: 52px;
  display: flex;
  align-items: center;
  padding: 0 48px;
  position: sticky;
  top: 0;
  z-index: 200;
  border-bottom: 1px solid var(--nav-border);
}
/* ── Government LOB mode-signal band ──
   3px strip on the nav's own bottom edge, unconditional on menu state or
   theme — reads under the tabs and above the subbar regardless of which
   government LOB or theme is active. fionda-nav is already a positioned
   element (sticky), so it's the pseudo-element's containing block without
   any extra position:relative. ::before, not ::after — the mobile P0·1
   nav block below already claims fionda-nav::after as its row-break
   spacer, and an element can only have one ::after box. Keyed on data-lob
   (set by the head-script snippet + FiondaNav's settings menu, nav.js)
   rather than FH_PUBLIC — the public demo never renders LOB UI, so
   data-lob there stays 'commercial' in practice. */
html[data-lob]:not([data-lob="commercial"]) fionda-nav::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: var(--nav-lob-gov);
  z-index: 2;
  pointer-events: none;
}
.fh-logo {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  color: var(--nav-text);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 40px;
  flex-shrink: 0;
  letter-spacing: 0.01em;
  text-decoration: none;
}
.fh-logo-mark {
  width: 26px;
  height: 26px;
  background: var(--nav-accent);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: var(--on-nav-accent);
  font-family: var(--display);
}
.fh-tabs {
  display: flex;
  height: 52px;
  align-items: stretch;
}
.fh-tab {
  padding: 0 18px;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: var(--nav-text-dim);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
  letter-spacing: 0.03em;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.fh-tab:hover { color: var(--nav-text); }
.fh-tab.active {
  color: var(--nav-text);
  border-bottom-color: var(--nav-accent);
}
.fh-tab.soon {
  color: var(--nav-text-faint);
  cursor: default;
  pointer-events: none;
}
.fh-soon-badge {
  font-size: 9px;
  background: var(--nav-chip-bg);
  color: var(--nav-text-faint);
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 6px;
  letter-spacing: 0.08em;
}
/* ── Gated-item lock (public demo) ──
   The gating signal is a lock icon (inline SVG via currentColor — see
   FH_LOCK_SVG in nav.js), not the label: gated items are live popover
   triggers (lockedPopovers in nav.js) whose labels render at live-link
   brightness — the old whole-item dimming read as disabled. One treatment
   for all gated items; subdued at rest, warms on attention so the item
   responds like a live element without spending green at rest (brief rev 2
   — supersedes the v1 FULL PRODUCT / PREVIEW text chips). */
.fh-lock {
  margin-left: 7px;
  color: var(--subdued);
  flex-shrink: 0;
  transition: color 120ms ease;
}
/* Whole gated item is the hover/click target — the lock warms with it. */
.fh-tab.gated:hover  .fh-lock,
.fh-pill.gated:hover .fh-lock,
.fh-tab.gated[aria-expanded="true"]  .fh-lock,
.fh-pill.gated[aria-expanded="true"] .fh-lock {
  color: var(--accent);
}
/* Gated tab labels match live-tab colors (rest + hover/open). */
.fh-tab.gated { color: var(--nav-text-dim); cursor: pointer; }
.fh-tab.gated:hover,
.fh-tab.gated[aria-expanded="true"] { color: var(--nav-text); }
/* Gated subbar pill: button reset + live-pill alignment. */
.fh-pill.gated {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
/* Theme toggle (light-theme W3) — nav tokens only; chrome is dark in both
   themes, so no per-theme fork. */
.fh-theme-toggle { display: flex; border: 1px solid var(--nav-border); border-radius: 999px; overflow: hidden; }
.fh-theme-toggle button {
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 4px 10px; background: transparent;
  border: 0; color: var(--nav-text-dim); cursor: pointer;
}
.fh-theme-toggle button:hover { color: var(--nav-text); }
.fh-theme-toggle button[aria-pressed="true"] { background: var(--nav-chip-bg); color: var(--nav-text); }

.fh-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.fh-period {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  background: var(--nav-chip-bg);
  color: var(--nav-chip-text);
  padding: 3px 10px;
  border-radius: 10px;
  letter-spacing: 0.06em;
  border: 1px solid var(--nav-border);
}
/* ── Preview pill ──
   Amber-tinted to match --accent2. Sits in .fh-meta next to the period pill.
   Clickable: re-opens the welcome modal so a returning visitor can re-read
   the scope notice. */
.fh-preview-pill {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  background: rgba(var(--accent2-rgb), 0.10);
  color: var(--accent2);
  padding: 3px 10px 3px 8px;
  border-radius: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border: 1px solid rgba(var(--accent2-rgb), 0.32);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s, border-color 0.15s;
}
.fh-preview-pill:hover {
  background: rgba(var(--accent2-rgb), 0.18);
  border-color: rgba(var(--accent2-rgb), 0.55);
}
.fh-preview-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent2);
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(var(--accent2-rgb), 0.6);
}
/* ── Public scope chip (public demo) ──
   Neutral grey, non-interactive. Deliberately NOT the amber Preview pill —
   labels the surface by scope ("Public"), keeping "Preview" reserved for the
   gated app. */
.fh-public-pill {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  background: var(--chip-neutral-bg);
  color: var(--subdued);
  padding: 3px 10px;
  border-radius: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border: 1px solid var(--chip-neutral-border);
}
/* ── Book-a-demo CTA (public demo) ──
   High-intent primary action. Solid accent so it reads as the primary CTA;
   sits in the .fh-meta slot (persistent nav) and in the modal/footer. */
.fh-book-demo {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  background: var(--nav-accent);
  color: var(--on-nav-accent);
  padding: 5px 14px;
  border-radius: 10px;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--nav-accent);
  transition: background 0.15s, border-color 0.15s;
}
.fh-book-demo:hover { background: var(--nav-accent-hover); border-color: var(--nav-accent-hover); }
/* ── Methodology utility link ──
   Quiet reference link in .fh-meta — NOT a TABS pill (methodology is
   reference material, not a product section). Persistent on every page.
   As of the chrome cleanup (2026-09-02) this is the PUBLIC DEMO's home for
   methodology; the gated app removed the inline link from its chrome and
   reaches methodology.html via the avatar menu's Methodology row and the
   footer preview note's Methodology link instead. Design record:
   dev/adhoc/chrome_cleanup_mockup.html. The class itself is unchanged. */
.fh-methodology-link {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--nav-text-dim);
  text-decoration: none;
  letter-spacing: 0.03em;
  white-space: nowrap;
  transition: color 0.15s;
}
.fh-methodology-link:hover { color: var(--nav-text); }
.fh-nav-divider { width: 1px; height: 18px; background: var(--nav-border); }

/* ── Chrome-level scope label (gated app) ──
   A LABEL, not a control — no hover state, no cursor:pointer; the settings
   menu (below) is the only place scope actually changes. Dot is
   aria-hidden; the text itself is ordinary nav content. Always-on: every
   LOB gets one, commercial included — .muted swaps the hue for the
   no-signal (commercial) case rather than hiding the label. Shares its
   copy with fhScopeEyebrow() (nav.js) via the same LOB_SCOPE map, so the
   two never drift. Design record: dev/adhoc/lob_settings_mockup.html. */
.fh-scope-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nav-lob-gov);
  cursor: default;
  user-select: none;
}
.fh-scope-label-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nav-lob-gov);
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(var(--nav-lob-gov-rgb), 0.6);
}
.fh-scope-label.muted { color: var(--nav-text-dim); }
.fh-scope-label.muted .fh-scope-label-dot { background: var(--nav-text-dim); box-shadow: none; }

/* ── Avatar → settings menu (gated app) ──
   .fh-user is a <button aria-haspopup="menu"> rendering a neutral person
   glyph (nav.js FH_AVATAR_SVG) — never hardcoded initials (the old "SL"
   was a POC placeholder). Opens .fh-user-menu, a right-aligned dropdown
   carrying the Preview-release row (moved out of the nav chrome), the LOB
   radio group, and the Appearance control (moved out of the nav chrome). */
.fh-user-wrap { position: relative; display: inline-flex; align-items: center; }
.fh-user {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--nav-avatar-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  color: var(--nav-text-dim);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s;
}
.fh-user:hover { color: var(--nav-text); }
.fh-user[aria-expanded="true"] { border-color: var(--nav-accent); color: var(--nav-text); }
/* Signed-in state (bucket 4, magic-link auth): derived initials replace the
   neutral glyph — see nav.js initialsFromEmail(). Font only; sizing/layout
   is identical to the glyph button above. */
.fh-user-initials { font: 700 10.5px var(--fig); letter-spacing: 0.01em; color: var(--nav-text); }

/* Single sun/moon icon button — the public demo's collapsed theme control
   (replaces the gated app's two-button .fh-theme-toggle; there's no avatar
   slot to also carry, so the icon shows the CURRENT theme and a click
   flips it — see nav.js). */
.fh-theme-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--nav-border);
  color: var(--nav-text-dim);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s;
}
.fh-theme-icon-btn:hover { color: var(--nav-text); border-color: var(--nav-accent); }
.fh-theme-icon-moon { display: none; }
[data-theme="dark"] .fh-theme-icon-sun { display: none; }
[data-theme="dark"] .fh-theme-icon-moon { display: block; }

.fh-user-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 210;             /* above the nav (200) */
  width: 240px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 12px 32px rgba(var(--shadow-rgb), 0.32);
  font-family: 'DM Mono', monospace;
}
.fh-user-menu.open { display: block; }
/* Identity head block (bucket 4, magic-link auth) — top of the menu, above
   the preview row, only when signed in (nav.js gates userMenuHead on the
   fh_email display cookie). Ported from dev/adhoc/magic_link_auth_mockup.html
   screen 06. */
.fh-user-menu-head { padding: 9px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.fh-user-menu-signedin {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}
.fh-user-menu-email { font-size: 12px; color: var(--subdued); letter-spacing: 0.01em; word-break: break-all; }
/* Preview-release row — the old nav-chrome Preview pill's affordance,
   relocated into the menu. Reuses .fh-user-menu-item's button/hover/padding,
   adds its own dot + body-text label + a muted link-style action so it
   reads as informational, not a LOB choice. */
.fh-user-menu-item.preview-row { font-family: var(--fig); }
/* Desktop carries the Preview affordance as the nav pill instead (chrome
   cleanup, 2026-09-02); hide the row + its divider here so only one shows.
   The <=768px block below re-shows both — nav pill hides at that width and
   the menu row takes over. Same affordance, one visible at a time. */
.fh-user-menu-item.preview-row, .fh-user-menu-item.preview-row + .fh-user-menu-divider { display: none; }
.preview-row-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.preview-row-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent2);
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(var(--accent2-rgb), 0.6);
}
.preview-row-label { font-family: var(--prose); font-size: 13px; color: var(--text); }
.preview-row-action { font-size: 10.5px; letter-spacing: 0.04em; color: var(--subdued); flex-shrink: 0; }
.fh-user-menu-group {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 10px 5px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.fh-user-menu-group::before, .fh-user-menu-group::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.fh-user-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  font-size: 12.5px;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 6px;
  padding: 9px 10px;
  cursor: pointer;
}
.fh-user-menu-item:hover { background: var(--surface-inset); }
.fh-user-menu-item .check { color: var(--accent); font-size: 12px; flex-shrink: 0; }
.fh-user-menu-item.locked { cursor: default; color: var(--muted); }
.fh-user-menu-item.locked:hover { background: transparent; }
.fh-user-menu-item.locked .fh-lock { color: var(--muted); }
.fh-user-menu-item .item-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fh-user-menu-item .item-hint { font-size: 10px; color: var(--muted); letter-spacing: 0.02em; }
.fh-user-menu-divider { height: 1px; background: var(--border); margin: 5px 8px; }
.fh-user-menu-item.appearance-row { cursor: default; padding: 4px 10px 9px; }
.fh-user-menu-item.appearance-row:hover { background: transparent; }

/* Methodology row — it's an <a> unlike the button rows, so it needs an
   explicit text-decoration:none (.fh-user-menu-item's rules don't set that,
   since every other row is a <button> where underline never applied). The
   right-aligned ↗ hint matches .fh-lock's own size/color (11px, --muted) so
   it reads as the same "not a live choice" hint family as the lock icons. */
.fh-user-menu-item.methodology-row { color: var(--text); text-decoration: none; }
.fh-user-menu-item.methodology-row .methodology-arrow { color: var(--muted); font-size: 11px; flex-shrink: 0; }

/* Sign out (bucket 4, magic-link auth) — last row, de-emphasized per the
   mockup so it doesn't compete with the LOB/Appearance choices above it. */
.fh-user-menu-item.muted { color: var(--subdued); }

/* Compact segmented Light/Dark control — same visual language as the old
   nav-chrome .fh-theme-toggle, shrunk to fill the menu row width. */
.fh-theme-toggle.compact {
  display: flex;
  width: 100%;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  overflow: hidden;
}
.fh-theme-toggle.compact button {
  flex: 1;
  font-family: 'DM Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 0;
  background: transparent;
  border: 0;
  color: var(--subdued);
  cursor: pointer;
  text-align: center;
}
.fh-theme-toggle.compact button[aria-pressed="true"] { background: var(--surface-inset); color: var(--text); }

/* ── Sub-pill bar ── */
/* The <fionda-subbar> element IS the bar (no inner wrapper), so any
   page-provided children (e.g. a Compare Payer dropdown wrapped in
   .fh-subbar-trailing) sit in the same flex row as the pills. */
fionda-subbar {
  background: var(--subbar-bg);
  border-bottom: 1px solid var(--subbar-border);
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 48px;
  gap: 4px;
  position: sticky;
  top: 52px;
  z-index: 199;
}
.fh-subbar-label {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nav-text-faint);
  margin-right: 8px;
}
.fh-pill {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  padding: 4px 14px;
  border-radius: 100px;
  border: 1px solid transparent;
  cursor: pointer;
  color: var(--pill-text);
  background: transparent;
  transition: color 0.13s, background 0.13s, border-color 0.13s;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.fh-pill:hover { color: var(--pill-text-hover); }
.fh-pill.active {
  background: var(--pill-active-bg);
  border-color: var(--pill-active-border);
  color: var(--accent);
}

/* Right-aligned slot for page-provided controls (e.g. Compare Payer) */
.fh-subbar-trailing {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Compact select sized for the 36px subbar */
fionda-subbar select {
  font-size: 11px;
  padding: 3px 22px 3px 10px;
  border-radius: 4px;
}

/* Public demo: every sub-nav item is live (link or popover trigger), so all
   pills render at link brightness — bright = clickable holds everywhere.
   (Payer Detail previously sat at the dim resting color and read as
   disabled.) The gated app keeps its quieter resting state above. */
fionda-subbar.fh-public .fh-pill { color: var(--pill-text-hover); }
fionda-subbar.fh-public .fh-pill:hover,
fionda-subbar.fh-public .fh-pill.gated[aria-expanded="true"],
fionda-subbar.fh-public .fh-pill.active { color: var(--accent); }

/* ─────────────────────────────────────────────────────────────────────────────
   Locked-item popovers (public demo)
   Card anatomy + copy are locked in dev/adhoc/popover_language_mockup.html
   (Cases 1, 2, 4); behavior lives in nav.js (lockedPopovers). Desktop: fixed
   card anchored under the (sticky) trigger. ≤768px: the .sheet variant — a
   bottom sheet with scrim (mode is decided in JS via matchMedia, so the
   sheet styles are class-keyed, not media-keyed). Only rendered when
   window.FIONDA_PUBLIC is true; the gated app never creates these nodes.
   ───────────────────────────────────────────────────────────────────────────── */
.fh-pop-scrim {
  position: fixed; inset: 0;
  background: rgba(var(--scrim-rgb), 0.6);
  z-index: 299;
  display: none;
}
.fh-pop-scrim.visible { display: block; }

.fh-popover {
  position: fixed;
  display: none;
  z-index: 300;               /* above nav (200), below the welcome modal (1000) */
  width: 360px;
  max-width: calc(100vw - 16px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 16px rgba(var(--shadow-rgb), 0.4);
  font-family: 'DM Mono', monospace;
}
.fh-popover.open { display: block; }
.fh-popover:focus { outline: none; }

.fh-pop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.fh-pop-title {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.fh-pop-prop {
  font-family: var(--prose);
  color: var(--subdued);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 16px;
}
.fh-pop-stat {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
  font-size: 13px;
}
.fh-pop-stat-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--subdued);
  margin-bottom: 8px;
  font-weight: 600;
}
.fh-pop-big {
  font-family: var(--fig);
  font-weight: var(--fig-weight);
  letter-spacing: var(--fig-ls);
  font-variant-numeric: tabular-nums;
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.fh-pop-context {
  font-size: 13px;
  color: var(--subdued);
  line-height: 1.5;
}
.fh-pop-stat-divider {
  border-top: 1px solid var(--border);
  padding-top: 8px;
  margin-top: 8px;
}
.fh-pop-blurred {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--subdued);
  font-size: 13px;
  margin: 6px 0;
}
.fh-pop-blur {
  filter: blur(5px);
  user-select: none;
  font-weight: 500;
}
.fh-pop-lock { margin-right: 4px; font-size: 11px; }
.fh-pop-gap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--text);
  border-top: 1px solid var(--border);
  padding-top: 8px;
  margin-top: 8px;
}
.fh-pop-val { text-align: right; color: var(--text); font-weight: 500; }

.fh-pop-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.fh-pop-table th {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--subdued); font-weight: 500; text-align: right;
  padding: 0 0 6px 8px;
}
.fh-pop-table th:first-child { text-align: left; padding-left: 0; }
.fh-pop-table td {
  padding: 4px 0 4px 8px; text-align: right;
  color: var(--text); border-top: 1px solid var(--border);
}
.fh-pop-table td:first-child { text-align: left; padding-left: 0; color: var(--subdued); }
/* Overall row styled as a total: heavier rule, faint tint, bolder. */
.fh-pop-table tr.overall td {
  font-weight: 600;
  border-top: 2px solid var(--muted);
  background: rgba(var(--tint-rgb), 0.03);
  padding-top: 6px;
  padding-bottom: 6px;
}
.fh-pop-table tr.overall td:first-child { color: var(--text); }
/* Delta colors via the site-wide .delta-up (red) / .delta-down (green). */
.fh-pop-arrow { font-size: 9px; vertical-align: 1px; margin-right: 2px; }

.fh-pop-cta {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: 6px;
  padding: 10px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'DM Mono', monospace;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
  margin-bottom: 6px;
}
.fh-pop-cta:hover { background: var(--accent-hover); }
.fh-pop-microcopy {
  text-align: center;
  font-size: 11px;
  color: var(--subdued);
  letter-spacing: 0.02em;
}

/* Bottom-sheet variant (≤768px, applied by JS) */
.fh-pop-handle { display: none; }
.fh-popover.sheet {
  left: 0; right: 0; bottom: 0; top: auto;
  width: auto;
  max-width: none;
  border-radius: 14px 14px 0 0;
  border-left: none; border-right: none; border-bottom: none;
  padding-bottom: max(20px, env(safe-area-inset-bottom));
  max-height: 80vh;
  overflow-y: auto;
}
@keyframes fh-sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.fh-popover.sheet.open { animation: fh-sheet-up 0.22s ease-out; }
.fh-popover.sheet .fh-pop-handle {
  display: block;
  width: 36px; height: 4px;
  border-radius: 2px;
  background: var(--muted);
  margin: -8px auto 12px;
  touch-action: none;
  cursor: grab;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Methodology page prose (methodology.html)
   The site's only prose-heavy page; the rules above cover chart pages, but
   section headings, body paragraphs, inline emphasis, and the "—" bullet list
   have no home elsewhere. Scoped to .method so they can't leak into chart
   pages. Values ported from the locked mockup; colors via shared tokens.
   ───────────────────────────────────────────────────────────────────────────── */
.method { max-width: 760px; margin: 0 auto; }
.method header { margin-bottom: 8px; }
.method .header-meta { line-height: 1.65; max-width: 660px; }
.method .header-meta b { color: var(--text); font-weight: 500; }
.method h2 {
  font-family: var(--display); font-size: 22px; font-weight: 700;
  margin: 38px 0 4px; letter-spacing: 0; color: var(--text);
}
.method p {
  font-family: var(--prose);
  color: var(--text); font-size: 17px; line-height: 1.75;
  margin: 10px 0; max-width: 680px;
}
.method b, .method strong { font-weight: 500; color: var(--text); }
.method a { color: var(--accent); }
.method ul {
  margin: 10px 0; padding: 0; list-style: none; max-width: 680px;
}
.method ul li {
  position: relative; padding-left: 18px; margin: 8px 0;
  font-family: var(--prose);
  font-size: 17px; color: var(--text); line-height: 1.75;
}
.method ul li::before {
  content: "—"; position: absolute; left: 0; color: var(--accent);
}

/* ─────────────────────────────────────────────────────────────────────────────
   404 page (404.html)
   Soft landing for unmatched URLs on both deploys; on the demo it also catches
   the excluded paid pages. Scoped to .notfound. Values ported from the locked
   mockup (dev/adhoc/404_page_mockup.html); colors via shared tokens.
   ───────────────────────────────────────────────────────────────────────────── */
.notfound { max-width: 560px; margin: 0 auto; padding: 56px 0 24px; text-align: center; }
.notfound .nf-kicker {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--subdued); margin-bottom: 16px; font-weight: 500;
}
.notfound h1 { font-size: 32px; margin-bottom: 16px; }
.notfound p { font-family: var(--prose); font-size: 14px; color: var(--subdued); line-height: 1.7; margin: 16px 0 28px; }
.notfound .nf-links { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
.notfound .nf-links a {
  font-size: 14px; color: var(--accent); text-decoration: none;
  padding: 8px 0; transition: opacity 0.15s;
}
.notfound .nf-links a:hover { opacity: 0.8; }
.notfound footer { text-align: left; margin-top: 72px; }

/* ─────────────────────────────────────────────────────────────────────────────
   Payer Compare page (payer-compare.html)
   Ranked-bars + reason-heatmap view. .pc-* and .hm* are page-local classes;
   values ported from the locked wireframe (dev/adhoc/payer_compare_wireframe.html
   rev 3 + payer_compare_build_brief.md). The shared .chips component lives up
   with the control vocabulary.
   ───────────────────────────────────────────────────────────────────────────── */
/* Payer Compare: tighten the gap between the header divider and the sticky
   control row. Scoped via #controls-sentinel (unique to this page) so the
   global 40px header margin is untouched elsewhere. Combined with the control
   row's 12px top padding this roughly halves the original ~52px gap. */
main:has(> #controls-sentinel) > header { margin-bottom: 14px; }

/* Sticky control row: pins below the nav stack (--fh-nav-stack is measured and
   set on :root by nav.js — nav + subbar heights, updated on resize). Negative
   margins span main's side padding so the pinned band runs edge to edge.
   .stuck (border + shadow) is toggled by an IntersectionObserver sentinel. */
.pc-controls {
  display: flex; gap: 26px; align-items: center; flex-wrap: wrap;
  position: sticky; top: var(--fh-nav-stack, 0px); z-index: 10;
  background: var(--bg); margin: 0 -48px 26px; padding: 12px 48px;
  border-bottom: 1px solid transparent; transition: border-color 0.2s, box-shadow 0.2s;
}
.pc-controls.stuck {
  border-bottom-color: var(--border);
  box-shadow: 0 8px 24px -12px rgba(var(--scrim-rgb), 0.6);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Sticky service-category bar (index.html / payer-detail.html /
   side-by-side.html) — a `.pc-controls--docked` modifier on the shared
   .pc-controls / .pc-inner / .stuck pattern above. Two visual states,
   constant geometry (only paint changes, so toggling .stuck never causes a
   layout jump):
     · unstuck — a docked card (surface + border + radius) sitting in
       natural flow directly above the governed chart stack.
     · stuck (pinned under the nav) — the card chrome dissolves and the
       outer band takes over, matching payer-compare's plain-band treatment
       above.
   payer-compare's own plain .pc-controls stays pixel-untouched — this only
   ever adds a variant, never edits the base rule.
   Design reference: dev/adhoc/index_sticky_category_bar_mockup.html
   ("Design notes + build brief"); build brief:
   dev/adhoc/sticky_category_bar_build_brief.md. ─────────────────────────── */
.pc-controls--docked {
  margin: 34px -48px 28px;
  padding: 4px 48px;
  background: transparent;
  border-bottom-color: transparent;
}
.pc-controls--docked .pc-inner {
  display: flex; gap: 24px; row-gap: 10px; align-items: center; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 22px;
  transition: background 0.2s, border-color 0.2s;
}
.pc-controls--docked.stuck { background: var(--bg); }
.pc-controls--docked.stuck .pc-inner {
  background: transparent; border-color: transparent; padding: 12px 0;
}

.scope-head { display: flex; flex-direction: column; gap: 2px; min-width: 150px; }
.scope-head .panel-eyebrow { margin-bottom: 0; }
.scope-title { font-family: var(--display); font-size: 15px; font-weight: 600; color: var(--text); }

/* Category echo chip — the panel-level reminder of the bar's current
   selection, shown in each governed chart's title row. */
.cat-chip {
  font-family: 'DM Mono', monospace; font-size: 10.5px; letter-spacing: 0.05em;
  color: var(--text-mid); background: rgba(var(--subdued-rgb), 0.10);
  border: 1px solid var(--border); border-radius: 100px; padding: 3px 10px;
  white-space: nowrap;
}

/* Bar-chart wrap — height is set inline by the page (rows × row-height). */
.pc-chart { position: relative; }

/* Reason heatmap — HTML table, not canvas: cells carry title tooltips, the
   payer column can go position:sticky on mobile, and the violet ramp is
   plain rgba() backgrounds. */
.hm-scroll { overflow-x: auto; }
.hm { border-collapse: separate; border-spacing: 3px; width: 100%; min-width: 860px; table-layout: fixed; }
.hm th {
  font-size: 10.5px; font-weight: 400; color: var(--subdued); text-align: center;
  padding: 0 2px 6px; cursor: pointer; user-select: none; white-space: nowrap;
  transition: color 0.15s;
}
.hm th:hover { color: var(--text-mid); }
.hm th.sorted { color: var(--accent); }
.hm th.col-payer { text-align: left; }
.hm col.c-payer { width: 150px; }
.hm col.c-total { width: 64px; }
.hm td { text-align: center; padding: 6px 2px; border-radius: 3px; font-size: 11px; }
.hm td.payer { text-align: right; color: var(--subdued); font-size: 12px; white-space: nowrap; padding-right: 8px; }
.hm td.total {
  font-family: var(--fig); font-weight: var(--fig-weight); letter-spacing: var(--fig-ls);
  font-variant-numeric: tabular-nums; color: var(--text); font-size: 12px;
  background: var(--surface-inset);
}
.hm tr.hm-spacer td { padding: 2px 0; border-radius: 0; }
/* NY Market footer band — amber label per the site's reference convention;
   cells keep the violet ramp. Excluded from sorting by the page JS. */
.hm tr.hm-mkt td.payer { color: var(--accent2); }

/* DQ marker + footnote lines (amber, matching the site's flag convention) */
.dq { color: var(--accent2); cursor: help; }
.footnote .fn { display: block; }
.footnote .mark { color: var(--accent2); }

/* ─────────────────────────────────────────────────────────────────────────────
   Mobile — @media (max-width: 768px)
   All mobile overrides live here. Desktop output is unchanged.
   Order: gutters (P1·1) → nav Option A (P0·1) → control rows (P1·2).
   Payer-table fixes (P0·2 / P0·3) and unlock guard (P1·3) live in
   payer-compare-preview.html's own <style> block (page-local classes).
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

  /* ── P1·1 Gutters ── */
  main        { padding: 24px 16px 40px; }
  .panel      { padding: 20px 16px 16px; }

  /* ── P0·1 Nav — Option A (two-row) ── */
  /*
   * DOM injected by nav.js:
   *   <fionda-nav>
   *     <a class="fh-logo">…</a>
   *     <div class="fh-tabs">…tabs…</div>
   *     <div class="fh-meta">
   *       <!-- Public: .fh-methodology-link + divider + .fh-theme-icon-btn +
   *                    divider + .fh-public-pill + .fh-book-demo -->
   *       <!-- Gated (chrome cleanup, 2026-09-02): .fh-scope-label +
   *                    .fh-preview-pill (hidden at this width, see below) +
   *                    .fh-user-wrap (.fh-user + .fh-user-menu) — no inline
   *                    Methodology link or dividers; Methodology lives in
   *                    the avatar menu and the footer note instead. -->
   *     </div>
   *   </fionda-nav>
   *
   * Two-row layout (CSS-only, no nav.js markup changes):
   *   Row 1 (~48px): logo  ···  right chrome (chips / CTA / avatar)
   *   Row 2 (~40px): tabs + Methodology link (public only, scrollable)
   *
   * Technique: flex-wrap on the host; display:contents on .fh-meta so its
   * children become direct flex items; a ::after row-break spacer (order:2)
   * with flex-basis:100% forces everything order>=3 onto row 2; .fh-tabs (order:3)
   * and .fh-methodology-link (order:4, public only) share row 2.
   */
  fionda-nav {
    flex-wrap: wrap;
    height: auto;
    padding: 0 16px;
    align-items: stretch;   /* rows stretch to their content height */
  }

  /* Row-break spacer: zero height, full width at order:2 — pushes tabs + meth
     link onto row 2.  Using ::after on fionda-nav avoids any DOM change. */
  fionda-nav::after {
    content: '';
    flex-basis: 100%;
    height: 0;
    order: 2;
  }

  /* Logo: row 1, left edge */
  .fh-logo {
    order: 0;
    margin-right: 0;
    height: 48px;           /* row-1 height */
    align-items: center;
  }

  /*
   * .fh-meta becomes a display-contents container so its children (methodology
   * link, dividers, chips, CTA/avatar) participate directly in the flex layout.
   */
  .fh-meta {
    display: contents;
  }

  /*
   * Right-chrome items — row 1, right side (order 1, before the row-break).
   * .fh-theme-icon-btn, .fh-public-pill, .fh-book-demo (public mode)
   * .fh-scope-label, .fh-user-wrap                     (gated mode)
   */
  .fh-theme-icon-btn,
  .fh-public-pill,
  .fh-book-demo,
  .fh-scope-label,
  .fh-user-wrap {
    order: 1;
    align-self: center;
    height: auto;
  }
  /* Push the first visible right-chrome item to the far right of row 1.
     In public mode .fh-theme-icon-btn is first; in gated mode
     .fh-scope-label is first. The scope label also carries its own trailing
     gap so it reads as its own element immediately left of the avatar, not
     fused to it. */
  .fh-theme-icon-btn,
  .fh-scope-label {
    margin-left: auto;
  }
  .fh-scope-label { margin-right: 12px; }

  /* Fix: .fh-user keeps an explicit height so border-radius:50% still reads
     as a circle even though its wrapper (.fh-user-wrap) is height:auto in
     this block — without it the avatar's circle collapses to an oval. */
  .fh-user { height: 28px; }

  /* Settings menu as a full-width sheet under row 1 — the menu's containing
     block becomes the nav itself (position:static on the wrap), so it spans
     the full nav width instead of the 240px desktop dropdown. */
  .fh-user-wrap { position: static; }
  .fh-user-menu {
    left: 0;
    right: 0;
    top: 100%;
    width: auto;
    box-shadow: 0 10px 26px rgba(var(--shadow-rgb), 0.30);
  }

  /* Preview affordance swaps to the menu row at this width — the nav pill
     hides (scoped to fionda-nav so the footer's own .fh-preview-pill
     survives) and the menu row + its divider re-show (row at
     .fh-user-menu-item's normal display value, divider at its own). */
  .fh-user-menu-item.preview-row { display: flex; }
  .fh-user-menu-item.preview-row + .fh-user-menu-divider { display: block; }
  fionda-nav .fh-preview-pill { display: none; }

  /* Tabs: row 2 (after the ::after row-break), left side.
     flex-basis:1px ensures tabs cannot fit on the same row as the ::after
     row-break (which takes 100%), so it wraps to its own row and then
     flex-grow:1 gives it all free space (minus the methodology link). */
  .fh-tabs {
    order: 3;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 1px;
    min-width: 0;
    height: 40px;           /* row-2 height */
    overflow-x: auto;
    scrollbar-width: none;  /* Firefox */
    border-top: 1px solid rgba(var(--tint-rgb), .05);
    align-items: stretch;
  }
  .fh-tabs::-webkit-scrollbar { display: none; }

  /* Methodology link: row 2, after tabs (right side). Public-demo-only as
     of the chrome cleanup (2026-09-02) — the gated app no longer renders
     .fh-methodology-link at all. */
  .fh-methodology-link {
    order: 4;
    align-self: center;
    padding: 0 8px 0 10px;
    flex-shrink: 0;
    height: 40px;
    display: flex;
    align-items: center;
    border-top: 1px solid rgba(var(--tint-rgb), .05);
    white-space: nowrap;
  }

  /* Nav dividers: hide on mobile (don't look right in display:contents context) */
  .fh-nav-divider {
    display: none;
  }

  /* ── Subbar: stays glued under the now-taller nav ── */
  /* Row 1 (48px) + Row 2 (40px) + 1px border-bottom on fionda-nav = 89px total.
     sticky top:89px keeps subbar flush under the nav at all scroll positions.
     height:auto + flex-wrap:wrap allow the trailing controls to spill onto a
     second row when the viewport is too narrow (payer-compare, side-by-side). */
  fionda-subbar {
    top: 89px;
    padding: 0 16px;
    height: auto;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  /*
   * ── Paid-app subbar trailing controls — wrap to own row ──
   *    (follow-up to the P0/P1 brief; deferred item, not in its numbering)
   *
   * DOM on payer-compare.html:
   *   .fh-subbar-trailing
   *     <span class="fh-subbar-label">Compare Payer</span>
   *     <select id="payerSel">…</select>
   *
   * DOM on side-by-side.html:
   *   .fh-subbar-trailing
   *     <div style="display:flex; align-items:center; gap:8px;">
   *       <span class="fh-subbar-label">Primary</span>
   *       <select id="primarySel">…</select>
   *     </div>
   *     <div style="display:flex; align-items:center; gap:8px;">
   *       <span class="fh-subbar-label">Comparison</span>
   *       <select id="comparisonSel">…</select>
   *     </div>
   *
   * On index.html / methodology.html / payer-compare-preview.html the
   * .fh-subbar-trailing element is absent entirely, so no guard is needed.
   *
   * Strategy:
   *   flex: 1 1 100% puts the trailing block on its own row below the pills.
   *   flex-wrap:wrap + column-gap let the two selector groups (side-by-side)
   *   each claim full width — a 390px bar cannot fit two 153px selects +
   *   labels side by side (they'd need ~340px + gaps).
   *   flex:1 on selects stretches them across the available width, matching
   *   the .control-row select rule below (consistent tap-target sizing).
   */
  .fh-subbar-trailing {
    flex: 1 1 100%;
    margin-left: 0;              /* override desktop margin-left:auto */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
    row-gap: 4px;
    padding: 2px 0 4px;
  }

  /* Each inline-flex group inside .fh-subbar-trailing (side-by-side has two) —
     stretch to full row width so the label + select pair spans the bar.
     !important overrides the element's inline style="display:flex; …". */
  .fh-subbar-trailing > div {
    flex: 1 1 100% !important;
    min-width: 0;
  }

  /* Select elements inside the subbar trailing: stretch to fill their row,
     consistent with .control-row select { flex:1 } below. */
  .fh-subbar-trailing select {
    flex: 1;
    min-width: 0;
  }

  /* ── P1·2 Control rows ── */
  .control-row {
    flex-wrap: wrap;
  }
  .control-row select {
    flex: 1;
  }

  /* ── Legend overflow fix ──
     .legend has flex-shrink:0 in desktop styles (prevents the legend from
     shrinking in the panel-header flex row). On mobile the panel is narrower
     so the legend's combined item width exceeds the panel width; allow it to
     shrink/wrap within the panel-header. Its own flex-wrap:wrap already set. */
  .legend {
    flex-shrink: 1;
    min-width: 0;
  }

  /* ── Payer Compare ──
     Controls track the mobile gutters (main padding drops to 16px); the
     heatmap payer column goes sticky so rows stay identifiable while the
     table h-scrolls inside .hm-scroll. Solid backgrounds cover scroll-under
     (header row scrolls under the nav, cells scroll under the payer column). */
  .pc-controls {
    margin: 0 -16px 20px;
    padding: 10px 16px;
    gap: 12px 26px;
  }
  /* Sticky service-category bar (index / payer-detail / side-by-side) —
     mobile gutters match the pattern above, minus payer-compare's plain-band
     geometry (the docked card keeps its own inset padding at every width). */
  .pc-controls--docked {
    margin: 28px -16px 20px;
    padding: 4px 16px;
  }
  .pc-controls--docked .pc-inner {
    padding: 10px 16px;
    gap: 10px 16px;
  }
  .hm th.col-payer, .hm td.payer {
    position: sticky; left: 0; z-index: 1;
    background: var(--surface);
  }

} /* end @media (max-width: 768px) */