/* RxTrail theme — latte-light chrome by default, bright airy neutral
   surfaces, fox-coral brand accent (rxtrail.com language: cream page,
   monochrome ink-pill buttons, accent reserved for focus/selection/active
   states). The `--rose*` token names are kept for stability but carry the
   coral sampled from the fox logo (static/img/logo-mark.png). Tokens first;
   components below. Dark theme overrides the same tokens under
   [data-theme="dark"] (toggled by static/js/theme.js). `--rose`/`--lime` are
   FILL colors; `--rose-strong`/`--lime-strong` are the same accents stepped
   for use as text/icons/borders, so they stay legible on either surface
   while fills keep the hue. `--lime` is a status green reserved for
   success/done states. `--btn-ink*` drive the monochrome primary button: ink
   pill on light, inverted to a white pill on dark. #fdfbf7;*/
:root {
  --page: #fff;
  --panel: #ffffff;
  --panel-2: #f3f4f6;
  --hairline: rgba(15, 23, 42, 0.12);
  --hairline-strong: rgba(15, 23, 42, 0.22);
  --ink: #241f19;
  --ink-2: #545660;
  --ink-muted: #8c8d96;
  --grid: #e5e7eb;

  --rose: #e25459;
  --rose-soft: rgba(226, 84, 89, 0.1);
  --rose-strong: #b73338;
  --rose-hover: #cf4348;
  --rose-border: rgba(226, 84, 89, 0.4);
  --rose-tint: rgba(226, 84, 89, 0.06);

  --btn-ink: #241f19;
  --btn-ink-text: #fffdf9;
  --btn-ink-hover: #3a3228;
  --amber-strong: #b45309;
  --amber-soft: rgba(180, 83, 9, 0.1);
  --amber-border: rgba(180, 83, 9, 0.4);
  --lime: #22c55e;
  --lime-soft: rgba(34, 197, 94, 0.12);
  --lime-strong: #15803d;
  --lime-border: rgba(34, 197, 94, 0.35);
  --lime-border-hover: rgba(34, 197, 94, 0.55);

  /* Quiet chrome: no card elevation — clean, subtle borders carry structure.
     (Overlays like modals/popovers keep their own shadow for lift.) */
  --shadow-1: none;

  --band-ink: #2b2b2b;

  --feature-head-1: #f6e8e8;
  --feature-head-2: #fdfcfc;
  --error-ink: #8f2327;

  /* read by charts.js at render time */
  --chart-1: #2b8ab5;
  --chart-2: #c07b18;
  --chart-3: #7a6bb5;

  /* financial data series — the green-mono standard (othercardstandars.png):
     green carries the money story, --fin-neutral is de-emphasis texture
     (identity via legend/position/tooltips, P&L table is the relief), rose
     stays reserved for negatives/gaps. Greens validated ≥3:1 on each panel. */
  --fin: #2e7d4f;
  --fin-deep: #1c5c38;
  --fin-soft: rgba(46, 125, 79, 0.14);
  --fin-neutral: #d4d6db;
  /* sequential ramp endpoints for value-shaded fills (Mix treemap):
     pale tint → near-black green, wide enough that steps read apart */
  --fin-ramp-lo: #d9e9df;
  --fin-ramp-hi: #14532d;

  /* KPI hero card — deliberately dark in BOTH themes (the one number the
     dashboard leads with), so these are fixed values, not theme-flipped.
     charts.js reads --hero-line/--hero-fill/--hero-gap for the net area. */
  --hero-bg-1: #142016;
  --hero-bg-2: #0c130e;
  --hero-ink: #f2f7f3;
  --hero-ink-2: rgba(242, 247, 243, 0.62);
  --hero-ink-muted: rgba(242, 247, 243, 0.4);
  --hero-line: #86d9a4;
  --hero-fill: rgba(134, 217, 164, 0.12);
  --hero-gap: #f0999b;
  --hero-badge-bg: rgba(134, 217, 164, 0.14);
  --hero-badge-bad-bg: rgba(242, 153, 155, 0.16);
  --hero-hairline: rgba(255, 255, 255, 0.07);

  --radius: 12px;
  --radius-lg: 20px;
  --sidebar-w: 272px;
  --content-max: 1520px;   /* content/topbar reading-width cap (was a hardcoded 1180px) */
  --content-pad-x: 28px;   /* content/topbar side gutter (was 40px); matches wide-mode */
  --font: "Archivo", system-ui, sans-serif;
  --font-display: "Archivo", system-ui, sans-serif;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

[data-theme="dark"] {
  --page: #121316;
  --panel: #1b1c20;
  --panel-2: #26272c;
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.2);
  --ink: #ffffff;
  --ink-2: #bcbdc4;
  --ink-muted: #8d8e96;
  --grid: #2d2e33;

  --rose: #f26567;
  --rose-soft: rgba(242, 101, 103, 0.16);
  --rose-strong: #f26567;
  --rose-hover: #e5555a;
  --rose-border: rgba(242, 101, 103, 0.4);
  --rose-tint: rgba(242, 101, 103, 0.07);

  --btn-ink: #ffffff;
  --btn-ink-text: #121110;
  --btn-ink-hover: #e8e4de;
  --amber-strong: #f0b429;
  --amber-soft: rgba(240, 180, 41, 0.12);
  --amber-border: rgba(240, 180, 41, 0.38);
  --lime: #4ade80;
  --lime-soft: rgba(74, 222, 128, 0.12);
  --lime-strong: #4ade80;
  --lime-border: rgba(74, 222, 128, 0.28);
  --lime-border-hover: rgba(74, 222, 128, 0.45);

  --shadow-1: none;

  --feature-head-1: #efe4e4;
  --feature-head-2: #fbfafa;
  --error-ink: #f5b9ba;

  /* dark categorical steps — re-validated for the dark lightness band
     (OKLCH L 0.48–0.67) + CVD separation + 3:1 contrast on the dark panel */
  --chart-1: #3596c6;
  --chart-2: #c47f1a;
  --chart-3: #8f7ed0;

  /* financial series, dark steps — --fin-deep matches the hero line */
  --fin: #45a873;
  --fin-deep: #86d9a4;
  --fin-soft: rgba(69, 168, 115, 0.16);
  --fin-neutral: #393a40;
  --fin-ramp-lo: #26402f;
  --fin-ramp-hi: #a3e6c0;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
code { background: var(--panel-2); padding: 1px 6px; border-radius: 6px; font-size: 0.85em; }

/* ---------- shell ---------- */
.shell { display: flex; min-height: 100vh; padding-left: var(--sidebar-w); }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.content { padding: 24px var(--content-pad-x) 44px; display: flex; flex-direction: column; gap: 18px; max-width: var(--content-max); width: 100%; margin-inline: auto; }
/* Data-dense pages (e.g. /s/sheets) opt out of the reading-width cap and use
   the full viewport, so wide tables fit without horizontal scrolling. In wide
   mode the topbar (page title) widens to match the content. */
.content.content-wide { max-width: none; padding-inline: var(--content-pad-x); }
html[data-wide-mode] .topbar { max-width: none; padding-inline: var(--content-pad-x); }
html[data-wide-mode] .palette-btn { right: var(--content-pad-x); }

/* ---------- sidebar ---------- */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  font-family: var(--font-display);
  background: var(--panel);
  border-right: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  padding: 26px 16px;
  gap: 26px;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 40;
}
/* Quiet chrome: the drawn fox mark + a plain black wordmark. */
.sidebar-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px 0 8px; }
.brand { display: flex; align-items: center; gap: 9px; padding: 0; min-width: 0; }
.brand-glyph { display: inline-flex; color: var(--rose-strong); flex-shrink: 0; }
.sidebar-collapse {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: none; cursor: pointer;
  background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--ink-muted);
}
.sidebar-collapse:hover { background: var(--panel-2); color: var(--ink); }
.sidebar-collapse-chevron {
  width: 7px; height: 7px; border-left: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor;
  transform: rotate(45deg); margin-left: 2px;
  transition: transform .22s var(--ease-standard);
}
/* collapsed: slide the sidebar out, widen the content; a floating expand button
   in the mobile-bar area brings it back (the collapse button flips direction).

   The slide is driven by transform (composited, no per-frame reflow) rather than
   margin/padding. The content's reclaimed width (.shell padding-left) is NOT
   transitioned — it snaps at collapse time — so we never reflow the whole content
   subtree (tables, charts, topbar) frame-by-frame. The eye tracks the sliding
   sidebar; the instant content resize reads as intentional, not janky. */
body.sidebar-collapsed .sidebar,
html.pre-sidebar-collapsed .sidebar { transform: translateX(calc(var(--sidebar-w) * -1)); }
body.sidebar-collapsed .shell,
html.pre-sidebar-collapsed .shell { padding-left: 0; }
body.sidebar-collapsed .sidebar-collapse-chevron { transform: rotate(-135deg); margin-left: -2px; }
.sidebar { transition: transform .22s var(--ease-standard); will-change: transform; }
/* floating expand button — only while collapsed (desktop) */
.sidebar-expand {
  display: none; position: fixed; top: 16px; left: 14px; z-index: 45;
  width: 34px; height: 34px; align-items: center; justify-content: center; cursor: pointer;
  background: var(--panel); border: 1px solid var(--hairline); border-radius: 9px; color: var(--ink-2);
}
.sidebar-expand:hover { border-color: var(--hairline-strong); color: var(--ink); }
.sidebar-expand .sidebar-collapse-chevron { transform: rotate(-45deg); margin-left: -2px; }
body.sidebar-collapsed .sidebar-expand,
html.pre-sidebar-collapsed .sidebar-expand { display: inline-flex; }

/* Wide mode (data-dense pages): auto-collapse the shell for maximum table
   width, independent of the user's global collapse preference. A per-page
   manual expand (body.sidebar-force-open) reveals the sidebar again without
   disturbing that saved preference. Desktop only. */
@media (min-width: 769px) {
  html[data-wide-mode] body:not(.sidebar-force-open) .sidebar { transform: translateX(calc(var(--sidebar-w) * -1)); }
  html[data-wide-mode] body:not(.sidebar-force-open) .shell { padding-left: 0; }
  html[data-wide-mode] body:not(.sidebar-force-open) .sidebar-expand { display: inline-flex; }
  /* Force-open on a wide page reveals the sidebar AND reserves its space again,
     overriding any global collapse preference so expand always fully works. */
  html[data-wide-mode] body.sidebar-force-open .sidebar { transform: none; }
  html[data-wide-mode] body.sidebar-force-open .shell { padding-left: var(--sidebar-w); }
  html[data-wide-mode] body.sidebar-force-open .sidebar-expand { display: none; }
}
@media (max-width: 768px) { .sidebar-expand { display: none !important; } }
.brand-mark { height: 24px; width: auto; flex-shrink: 0; }
.brand-name { font-family: var(--font-display); font-size: 20px; font-weight: 650; letter-spacing: -0.01em; color: var(--ink); }
.brand-name em { font-style: normal; color: inherit; }
.brand-lg .brand-name { font-size: 25px; }
.brand-lg .brand-mark { height: 32px; }

.nav { display: flex; flex-direction: column; gap: 3px; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: 8px;
  color: var(--ink-2); font-weight: 550; font-size: 14.5px;
  border: 1px solid transparent;
}
.nav-item:hover { background: var(--panel-2); color: var(--ink); }
.nav-item.active {
  background: var(--rose-soft);
  color: var(--ink);
}

.nav-group summary.nav-item { cursor: pointer; list-style: none; justify-content: space-between; }
.nav-group summary.nav-item::-webkit-details-marker { display: none; }
.nav-group summary.nav-item::after {
  content: ""; width: 8px; height: 8px; flex-shrink: 0;
  border-right: 2px solid var(--ink-muted); border-bottom: 2px solid var(--ink-muted);
  transform: rotate(-45deg); margin-left: auto; transition: transform 0.15s ease;
}
.nav-group[open] > summary.nav-item::after { transform: rotate(45deg); }

/* icon-free nav: children indent modestly under the parent label, not under a
   (now absent) icon column */
.nav-sub { display: flex; flex-direction: column; gap: 3px; margin: 2px 0 6px; padding-left: 22px; }
.nav-sub-item {
  padding: 8px 12px; border-radius: 8px;
  color: var(--ink-muted); font-weight: 500; font-size: 13.5px;
  border: 1px solid transparent;
}
.nav-sub-item:hover { background: var(--panel-2); color: var(--ink); }
.nav-sub-item.active { background: var(--rose-soft); color: var(--ink); }
/* third-level tabs under an active group-child (Documents/Mail/Learning):
   tucked in with a soft left rule so the extra depth reads without shouting */
.nav-sub-leaf {
  margin: 2px 0 4px; padding-left: 12px; gap: 2px;
  border-left: 1px solid var(--hairline);
}
.nav-sub-leaf .nav-sub-item { padding: 6px 10px; font-size: 13px; }

.sidebar-foot { margin-top: auto; padding: 16px 12px 4px; border-top: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 8px; }
.whoami { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; margin: -6px -8px 0; border-radius: 8px; }
a.whoami:hover, a.whoami:focus-visible { background: var(--panel-2); }
a.whoami[aria-current="page"] { background: var(--panel-2); }
.whoami-name { font-weight: 600; font-size: 14px; color: var(--ink); }
.whoami-role { color: var(--ink-muted); font-size: 12px; }
.ghost-link { color: var(--ink-muted); font-size: 13px; }
.ghost-link:hover { color: var(--rose-strong); }

/* ---------- topbar / page header ----------
   Layout redesign: ONE flat, quiet row — the sidebar carries the "where am
   I" weight, so the page heading whispers: small-caps eyebrow · modest
   title · the page's controls · ⌘K, all on a single baseline. */
.topbar { position: relative; padding: 24px var(--content-pad-x) 0; max-width: var(--content-max); margin-inline: auto; width: 100%; }
.topbar-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  flex: none;
}
.topbar-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
}
.topbar-icon {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  flex-shrink: 0;
}
.topbar-title {
  margin: 0;
  font-family: var(--font-display);
  /* de-emphasized: a label, not a billboard */
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
}

.topbar-tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding-top: 10px;
}
.topbar-tab {
  font-size: 13.5px; font-weight: 550; color: var(--ink-muted);
  padding: 7px 14px; border-radius: 8px;
  border: 1px solid transparent;
}
.topbar-tab:hover { color: var(--ink); background: var(--panel-2); }
.topbar-tab.active { color: var(--ink); background: var(--rose-soft); border-color: var(--rose-border); }

/* ---------- cards ---------- */
.card {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 24px 28px;
  box-shadow: var(--shadow-1);
}
.card-head h2 { margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.card-head .icon { color: var(--rose-strong); }
.card-sub { margin: 3px 0 0; color: var(--ink-muted); font-size: 13.5px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 980px) { .grid-2 { grid-template-columns: 1fr; } }

.placeholder-copy { color: var(--ink-2); max-width: 68ch; }

/* ---------- stat tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 980px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
.tile {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 24px 28px;
  display: flex; flex-direction: column; gap: 2px;
  box-shadow: var(--shadow-1);
}
.tile-label { color: var(--ink-2); font-size: 13px; font-weight: 600; }
.tile-value { font-family: var(--font-display); font-size: 30px; font-weight: 550; line-height: 1.15; font-variant-numeric: tabular-nums; }
.tile-hint { color: var(--ink-muted); font-size: 12px; }
/* trend hint: a geo arrow inside the card, colored by direction (system status
   palette — this is meaning, so it never uses the location color) */
.tile-trend { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.tile-trend .icon { flex: none; }
.tile-trend.trend-up { color: var(--lime-strong); }
.tile-trend.trend-down { color: var(--rose-strong); }
.tile-trend.trend-flat { color: var(--ink-muted); }

/* ---------- KPI hero row (Money) — one loud number, a quiet stack ---------- */
.kpi-row { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 980px) { .kpi-row { grid-template-columns: 1fr; } }
.kpi-hero {
  background: linear-gradient(160deg, var(--hero-bg-1) 0%, var(--hero-bg-2) 100%);
  border: 1px solid var(--hero-hairline);
  border-radius: var(--radius);
  padding: 26px 30px 0;
  color: var(--hero-ink);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.kpi-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kpi-hero-label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--hero-ink-2);
}
.kpi-hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 600;
  background: var(--hero-badge-bg); color: var(--hero-line);
}
.kpi-hero-badge .icon { flex: none; }
.kpi-hero-badge.trend-down { background: var(--hero-badge-bad-bg); color: var(--hero-gap); }
.kpi-hero-badge.trend-flat { background: var(--hero-hairline); color: var(--hero-ink-2); }
.kpi-hero-badge.badge-warn { background: rgba(240, 193, 92, 0.14); color: #f0c15c; }
/* unvalued window: the hero says so instead of showing $0 performance */
.kpi-hero-unvalued { color: #f0c15c; font-size: 40px; }
.kpi-hero-link { color: var(--hero-line); text-decoration: underline; text-underline-offset: 3px; }
.kpi-hero-link:hover { color: var(--hero-ink); }
.tile-unvalued {
  flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 14px; padding: 26px 30px;
}
.tile-unvalued p { margin: 0; color: var(--ink-2); font-size: 14.5px; max-width: 40ch; }
.tile-unvalued-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.kpi-hero-value {
  margin-top: 14px;
  font-family: var(--font-display); font-size: 52px; font-weight: 620;
  line-height: 1.02; letter-spacing: -0.01em;
}
.kpi-hero-cents { color: var(--hero-ink-muted); }
.kpi-hero-meta { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: 12px; font-size: 13px; color: var(--hero-ink-2); }
/* chart bleeds to the card's edges; the card's own padding frames the top */
.kpi-hero-chart { height: 132px; margin: 18px -30px 0; }

/* ---------- Money · Story — three slides on the dark stage ---------- */
/* Same always-dark surface family as the KPI hero. Each slide: kicker →
   main point → subpoint on the left, one big chart on the right. All
   content is in the DOM from the start and fades in (opacity/transform
   only), so nothing reflows mid-story and screen readers get everything. */
.story-stage {
  background: linear-gradient(165deg, var(--hero-bg-1) 0%, var(--hero-bg-2) 100%);
  border: 1px solid var(--hero-hairline);
  border-radius: var(--radius);
  color: var(--hero-ink);
  padding: 16px 52px 24px;
}
.story-slide {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 20px 56px; align-items: center;
  padding: 30px 0;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.5s var(--ease-standard), transform 0.5s var(--ease-standard);
}
.story-slide.is-on, .story-done .story-slide { opacity: 1; transform: none; }
/* deck disclosure: anything [hidden] on the stage (off-deck slides, nav
   buttons out of phase) must actually collapse — the display rules on
   .story-slide/.btn would otherwise out-rank the hidden attribute */
.story-stage [hidden] { display: none !important; }
.story-slide { flex: 1; } /* deck mode: the one visible slide fills the stage */
@media (max-width: 980px) {
  .story-stage { padding: 8px 26px 20px; }
  .story-slide { grid-template-columns: 1fr; gap: 14px; }
}
.story-kicker {
  margin: 0 0 10px; font-size: 11px; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(242, 247, 243, 0.42);
}
.story-main {
  margin: 0; font-family: var(--font-display);
  font-size: 30px; font-weight: 600; line-height: 1.28; letter-spacing: -0.01em;
}
.story-sub { margin: 12px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--hero-ink-2); }
.story-w {
  opacity: 0; transform: translateY(7px); display: inline-block;
  transition: opacity 0.4s var(--ease-standard), transform 0.4s var(--ease-standard);
  white-space: pre-wrap;
}
.story-chart {
  opacity: 0; transform: translateY(7px);
  transition: opacity 0.5s var(--ease-standard), transform 0.5s var(--ease-standard);
}
.story-w.is-in, .story-chart.is-in,
.story-done .story-w, .story-done .story-chart { opacity: 1; transform: none; }
.story-em-up { color: var(--hero-line); font-weight: 650; }
.story-em-down { color: var(--hero-gap); font-weight: 650; }
.story-em-warn { color: #f0c15c; font-weight: 650; }
.story-strong { color: #ffffff; font-weight: 650; }
.story-svg { width: 100%; height: auto; display: block; }
.story-svg-donut { max-width: 190px; margin: 0 auto; }
.story-chart .story-draw {
  stroke-dasharray: 900; stroke-dashoffset: 900;
  transition: stroke-dashoffset 1s var(--ease-standard);
}
.story-chart.is-in .story-draw, .story-done .story-chart .story-draw { stroke-dashoffset: 0; }
.story-chart .story-fade { opacity: 0; transition: opacity 0.8s var(--ease-standard) 0.25s; }
.story-chart.is-in .story-fade, .story-done .story-chart .story-fade { opacity: 1; }
.story-chart .story-sweep { transition: stroke-dasharray 0.8s var(--ease-standard); }
/* group share bars (slide 3) */
.story-hbars { display: grid; gap: 12px; }
.story-hbar {
  display: grid; grid-template-columns: minmax(90px, auto) 1fr auto;
  gap: 12px; align-items: center; font-size: 13px;
}
.story-hbar-label {
  color: var(--hero-ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px;
}
.story-hbar-track {
  height: 12px; border-radius: 999px; background: rgba(242, 247, 243, 0.12);
  overflow: hidden;
}
.story-hbar-fill {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: rgba(242, 247, 243, 0.34);
  transition: width 0.8s var(--ease-standard);
}
.story-hbar-fill.is-hot { background: var(--hero-line); }
.story-hbar-value { font-weight: 650; font-variant-numeric: tabular-nums; }
.story-actions { margin-top: 6px; display: flex; gap: 10px; }
/* scoped to the stage so these out-rank .btn-ghost's light-mode ink — the
   stage is always dark, so the controls read in the hero ink family */
.story-stage .story-btn {
  color: var(--hero-ink-2);
  border-color: rgba(242, 247, 243, 0.28);
  background: transparent;
}
.story-stage .story-btn:hover { color: var(--hero-ink); background: rgba(255, 255, 255, 0.08); }
/* the See-more gate control reads a notch louder than the ghost buttons */
.story-stage .story-btn-more { color: var(--hero-line); border-color: var(--hero-line); }
.story-stage .story-btn-more:hover { color: var(--hero-line); background: var(--hero-badge-bg); }

/* reality check: a chartless slide is just the statements, a bit larger but
   compact — the statements, the sub-line, and See more share one screen */
.story-slide-solo { grid-template-columns: 1fr; padding: 22px 0 14px; }
.story-slide-solo .story-main { font-size: 32px; }
.story-main + .story-main { margin-top: 12px; }

/* ---------- Money · Story — the chain report slide ---------- */
/* Full-width slide: text on top, then the contribution treemap, the
   per-group cards (contribution order, color-ranked dots), and the
   click-to-open dive. */
.story-slide-wide { grid-template-columns: 1fr; align-items: start; }
/* contribution treemap: each group a block sized by its share of gross,
   ranked palette shared with the card dots; click a block to dive in.
   Blocks are absolutely positioned by squarify() at layout time. */
.story-treemap {
  position: relative; width: 100%;
  height: clamp(200px, 34vw, 300px);
  margin-top: 6px;
}
.story-tm-tile {
  position: absolute; appearance: none; border: 0; margin: 0; cursor: pointer;
  padding: 9px 11px; border-radius: 8px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 1px;
  text-align: left; font: inherit;
  opacity: 0; transform: scale(0.965);
  transition: opacity 0.5s var(--ease-standard),
              transform 0.5s var(--ease-standard),
              box-shadow 0.15s var(--ease-standard),
              outline-color 0.15s var(--ease-standard);
  outline: 2.5px solid transparent; outline-offset: -2.5px;
}
.story-chart.is-in .story-tm-tile { opacity: 1; transform: none; }
.story-tm-tile:hover { box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.08); }
.story-tm-tile.is-sel { outline-color: #ffffff; }
.story-tm-name {
  font-weight: 650; font-size: 13.5px; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.story-tm-share { font-size: 12px; opacity: 0.82; font-variant-numeric: tabular-nums; }
.story-tm-tile.is-short { justify-content: center; }
.story-tm-tile.is-short .story-tm-name { font-size: 12px; }
.story-tm-tile.is-tiny { padding: 5px 6px; }
.story-tm-tile.is-tiny .story-tm-name,
.story-tm-tile.is-tiny .story-tm-share { display: none; }
/* deck navigation: Back ‹ dots › Next pinned under the slide */
.story-stage { display: flex; flex-direction: column; min-height: 360px; }
.story-deck-nav { margin-top: auto; padding-top: 14px; display: flex; align-items: center; gap: 14px; }
.story-dots { display: flex; gap: 8px; margin-inline: auto; }
.story-dot {
  appearance: none; border: 0; padding: 0; cursor: pointer;
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(242, 247, 243, 0.25);
  transition: background 0.2s var(--ease-standard);
}
.story-dot:hover { background: rgba(242, 247, 243, 0.5); }
.story-dot.is-here { background: var(--hero-line); }
/* reality-check bars: quiet caption over the monthly profit chart */
.story-bars-cap {
  margin: 0 0 8px; font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--hero-ink-2);
}
.story-chain-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px; margin-top: 16px;
}
.story-chain-card {
  appearance: none; font: inherit; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--hero-hairline);
  background: rgba(242, 247, 243, 0.05);
  color: var(--hero-ink);
  transition: background 0.2s var(--ease-standard), border-color 0.2s var(--ease-standard);
}
.story-chain-card:hover { background: rgba(242, 247, 243, 0.09); }
.story-chain-card.is-open { border-color: var(--hero-line); background: rgba(242, 247, 243, 0.08); }
.story-chain-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.story-chain-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.story-chain-name {
  font-weight: 650; font-size: 14.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.story-chain-share { font-size: 12.5px; color: var(--hero-ink-2); font-variant-numeric: tabular-nums; }
.story-chip {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
}
.story-chip-up { background: var(--hero-badge-bg); color: var(--hero-line); }
.story-chip-down { background: var(--hero-badge-bad-bg); color: var(--hero-gap); }
.story-chip-flat { background: var(--hero-hairline); color: var(--hero-ink-2); }
.story-chip-new { background: rgba(240, 193, 92, 0.14); color: #f0c15c; }
.story-dive {
  margin-top: 16px; padding: 18px 20px; border-radius: 12px;
  border: 1px solid var(--hero-hairline);
  background: rgba(0, 0, 0, 0.18);
}
.story-dive-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.story-dive-head p { margin: 0; }
.story-dive-title { font-weight: 650; font-size: 15px; }
.story-dive-note { margin-top: 2px; font-size: 12px; color: var(--hero-ink-2); }
.story-toggle {
  display: inline-flex; border-radius: 999px; overflow: hidden;
  border: 1px solid rgba(242, 247, 243, 0.24);
}
.story-toggle button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 14px;
  color: var(--hero-ink-2);
}
.story-toggle button:hover { color: var(--hero-ink); }
.story-toggle button.is-on { background: rgba(242, 247, 243, 0.16); color: #ffffff; }
.story-dive-svg { margin-top: 12px; }

.kpi-stack { display: grid; gap: 12px; grid-auto-rows: 1fr; }
.tile-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; }
.tile-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tile-row .tile-label {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-muted);
}
.tile-row .tile-value { font-size: 25px; }
.tile-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.tile-row-side .tile-trend { font-size: 13px; }
.tile-spark { width: 104px; height: 32px; }
.tile-meter { display: block; width: 120px; height: 8px; border-radius: 999px; overflow: visible; }
.tile-meter .hbar-fill { border-radius: 999px; }
.hbar-tick {
  position: absolute; top: -3px; bottom: -3px; width: 2px;
  margin-left: -1px; border-radius: 1px; background: var(--ink);
}
/* stack-tile delta chip (othercardstandars 1a): soft pill, arrow + signed value */
.tile-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
}
.tile-badge .icon { flex: none; }
.tile-badge.trend-up { background: var(--lime-soft); color: var(--lime-strong); }
.tile-badge.trend-down { background: var(--rose-soft); color: var(--rose-strong); }
.tile-badge.trend-flat { background: var(--panel-2); color: var(--ink-muted); }
.tile-cents { color: var(--ink-muted); }
.hbar-fill.fin { background: var(--fin); }
.tile-count { font-family: var(--font-display); font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.tile-count-label {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-muted);
}

/* Revenue streams — stat tiles with a share donut (replaced the weak hbars):
   each stream is a tile; the donut fill is the slice of gross, driven by the
   data-supplied --share custom property (dynamic value, hence inline) */
.stream-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.tile-stream { gap: 6px; padding: 18px 22px; }
.tile-stream .tile-label {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-muted);
}
.tile-stream .tile-value { font-size: 23px; }
.tile-stream-foot {
  display: flex; align-items: center; gap: 8px; margin-top: 2px; min-height: 24px;
  font-weight: 650; font-size: 13.5px; font-variant-numeric: tabular-nums;
}
.stream-donut {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: conic-gradient(var(--fin) calc(var(--share, 0) * 1%), var(--panel-2) 0);
  position: relative;
}
.stream-donut::after {
  content: ""; position: absolute; inset: 6px; border-radius: 50%;
  background: var(--panel);
}

/* ---------- feature columns (inspiration: header -> arrow -> tinted panel) ---------- */
.feature-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 980px) { .feature-cols { grid-template-columns: 1fr; } }
.feature { display: flex; flex-direction: column; align-items: center; }
.feature-head {
  width: 100%;
  background: linear-gradient(180deg, var(--feature-head-1) 0%, var(--feature-head-2) 100%);
  border: 1px solid var(--hairline);
  color: var(--band-ink);
  border-radius: 10px;
  padding: 16px 14px;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}
.feature-arrow {
  width: 10px; height: 20px;
  background: var(--rose);
  position: relative;
  margin: 6px 0 0;
}
.feature-arrow::after {
  content: "";
  position: absolute; left: 50%; top: 100%;
  transform: translateX(-50%);
  border: 12px solid transparent;
  border-top-color: var(--rose);
  border-bottom-width: 0;
}
.feature-body {
  width: 100%;
  margin-top: 12px;
  background: linear-gradient(180deg, #e9f9ee 0%, #d5f3df 100%);
  color: #14532d;
  border-radius: 10px;
  padding: 16px 16px;
  font-size: 14.5px;
  font-weight: 500;
}

/* ---------- pills + checklist ---------- */
.pill {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12.5px;
  margin-bottom: 10px;
  background: var(--panel-2);
  border: 1px solid transparent;
  color: var(--ink-2);
}
.pill-rose { background: var(--rose-soft); color: var(--error-ink); }
.pill-lime { background: var(--lime-soft); color: var(--lime-strong); }
.pill-amber { background: var(--amber-soft); color: var(--amber-strong); }

.checklist-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 12px; }
@media (max-width: 980px) { .checklist-cols { grid-template-columns: 1fr; } }
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.checklist li {
  background: var(--panel-2);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 10px 14px 10px 40px;
  position: relative;
}
.checklist li::before {
  content: "✓";
  position: absolute; left: 14px; top: 10px;
  color: var(--lime-strong);
  font-weight: 800;
}
.checklist strong { display: block; font-size: 14px; }
.checklist span { color: var(--ink-2); font-size: 13px; }

/* ---------- charts ---------- */
.chart { width: 100%; height: 300px; margin-top: 8px; }
.chart-wide { height: 380px; }
.chart-tall { height: 460px; }

/* ---------- buttons ---------- */
/* Monochrome ink pills (reference: rxtrail.com "Meet with Us" / "Schedule a
   Call"): solid ink primary, bold-outlined secondary. The coral accent is
   reserved for focus rings, selection, and active states — not button fills. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px; padding: 12px 22px;
  font-weight: 600; font-size: 15px; line-height: 1.2; cursor: pointer;
  border: 1.5px solid transparent; font-family: inherit; white-space: nowrap;
  transition: background 0.15s var(--ease-standard), border-color 0.15s var(--ease-standard), color 0.15s var(--ease-standard);
}
.btn:focus-visible { outline: 2px solid var(--rose-strong); outline-offset: 2px; }
.btn:disabled, .btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.btn:disabled:hover, .btn[disabled]:hover { background: var(--btn-ink); }
.btn-ghost:disabled:hover, .btn-ghost[disabled]:hover { background: transparent; }
.btn-sm { padding: 7px 14px; font-size: 13px; border-radius: 999px; }
.btn-primary { background: var(--btn-ink); color: var(--btn-ink-text); }
.btn-primary:hover { background: var(--btn-ink-hover); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--panel-2); }

/* ---------- login ---------- */
.login-body { display: grid; place-items: center; min-height: 100vh; }
.login-card {
  width: min(400px, 92vw);
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 34px 32px 30px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: var(--shadow-1);
}
.login-tag { margin: 0 0 6px; color: var(--ink-muted); font-size: 13px; }
.login-divider {
  display: flex; align-items: center; gap: 10px;
  color: var(--ink-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
}
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
.btn-google {
  background: #fff; color: #1f1f1f; border-color: var(--hairline);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.btn-google:hover { filter: brightness(0.94); }
.login-error {
  margin: 0; padding: 10px 12px; font-size: 13px; line-height: 1.5;
  color: var(--rose); border: 1px solid var(--rose); border-radius: 10px;
}
.login-fineprint { margin: 0; color: var(--ink-muted); font-size: 12px; text-align: center; line-height: 1.6; }
.login-fineprint-left { text-align: left; }
.login-fineprint strong { color: var(--ink-2); }
.login-notice {
  margin: 0; padding: 10px 12px; font-size: 13px; line-height: 1.5;
  color: var(--lime-strong); background: var(--lime-soft);
  border: 1px solid var(--lime-border); border-radius: 10px;
}
.login-form { display: flex; flex-direction: column; text-align: left; }
.login-form .field { margin-bottom: 12px; }
.login-form .btn { width: 100%; }
.login-link { margin-top: 12px; align-self: center; color: var(--ink-muted); font-size: 12.5px; }
.login-link:hover { color: var(--ink); }

/* ---------- database CRUDL ---------- */
.db-filter-field { margin-bottom: 0; }
.db-filter-field input { min-width: 220px; }
.db-count-col { text-align: right; font-variant-numeric: tabular-nums; }
#db-tables .row-link { text-transform: capitalize; }

.crumbs { display: flex; gap: 8px; color: var(--ink-muted); font-size: 13px; }
.crumbs a:hover { color: var(--ink); }
.crumbs-here { color: var(--ink-2); text-transform: capitalize; }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.toolbar-actions { display: flex; gap: 10px; align-items: center; }
.toolbar-actions form { margin: 0; }

/* Fuzzy search box in a database-table toolbar: sits between the row count and
   the New button, grows to fill, capped so it never crowds either side. The
   input grows; the Search button and (when a search is active) Clear sit beside
   it so it's clear you submit — and how to reset. */
.db-search { margin: 0; flex: 1; max-width: 420px; display: flex; align-items: center; gap: 8px; }
.db-search input[type="search"] {
  flex: 1; min-width: 0; background: var(--panel); border: 1px solid var(--hairline-strong);
  border-radius: 10px; color: var(--ink); padding: 9px 14px; font-size: 14px;
  font-family: inherit;
}
.db-search input[type="search"]:focus {
  outline: none; border-color: var(--rose); box-shadow: 0 0 0 3px var(--rose-soft);
}
.db-search .btn { flex: none; }
.db-search-clear { flex: none; color: var(--ink-muted); font-size: 13px; white-space: nowrap; }
.db-search-clear:hover { color: var(--ink); }

.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.data-table th {
  text-align: left; color: var(--ink-muted); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 8px 12px; border-bottom: 1px solid var(--hairline); white-space: nowrap;
}
.data-table td { padding: 9px 12px; border-bottom: 1px solid var(--hairline); white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.data-table tbody tr:hover { background: var(--panel-2); }
.row-actions { text-align: right; }
.row-actions a { color: var(--ink-muted); margin-left: 10px; font-size: 12.5px; }
.row-actions a:hover { color: var(--ink); }
/* Pin the trailing actions column to the right edge so its CTAs (view/edit)
   stay reachable while a wide table scrolls horizontally inside .table-scroll.
   The left shadow reads as a "pinned column" seam over scrolled cells. */
.data-table th:last-child,
.data-table td.row-actions {
  position: sticky; right: 0; background: var(--panel);
  box-shadow: -8px 0 8px -8px var(--hairline);
}
.data-table tbody tr:hover td.row-actions { background: var(--panel-2); }

/* FLASK-49: an interior gap month's whole column, header + body, tinted rose.
   The tr:hover rule below is more specific than the row-hover fill above so the
   gap column stays tinted (stepped to --rose-soft) even while its row hovers. */
.pnl-table th.cell-gap, .pnl-table td.cell-gap { background: var(--rose-tint); }
.pnl-table tbody tr:hover td.cell-gap { background: var(--rose-soft); }

.empty { color: var(--ink-muted); padding: 18px 0; }
.empty a { color: var(--rose-strong); }
.pager { display: flex; gap: 16px; align-items: center; justify-content: flex-end; padding-top: 12px; color: var(--ink-muted); font-size: 13px; }
.pager a { color: var(--ink-2); }
.pager a:hover { color: var(--ink); }

/* Pharmacy channels bulk editor (js/pharm-map.js): a search box + a
   select-then-apply-a-TPA toolbar above the mapping table, name-prefix group
   header rows, and a narrow leading checkbox column. All client-side over the
   current page's rows. */
.pharm-bulkbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 12px;
}
.pharm-search {
  flex: 1 1 240px; max-width: 340px;
  background: var(--panel-2); border: 1px solid var(--hairline); border-radius: 8px;
  color: var(--ink); padding: 8px 11px; font-size: 13.5px; font-family: inherit;
}
.pharm-search:focus { outline: none; border-color: var(--rose); box-shadow: 0 0 0 3px var(--rose-soft); }
.pharm-bulkbar-apply { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pharm-count { color: var(--ink-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pharm-bulk-tpa {
  background: var(--panel-2); border: 1px solid var(--hairline); border-radius: 8px;
  color: var(--ink); padding: 7px 10px; font-size: 13px; font-family: inherit;
}
.pharm-bulk-tpa:focus { outline: none; border-color: var(--rose); box-shadow: 0 0 0 3px var(--rose-soft); }
.pharm-flash {
  margin: 0 0 12px; padding: 8px 12px; font-size: 13px;
  background: var(--rose-soft); border: 1px solid var(--rose-border); border-radius: 8px;
  color: var(--ink);
}

.pharm-check-col { width: 34px; text-align: center; }
.pharm-check-col input[type="checkbox"] { width: 16px; height: 16px; }
.pharm-table tbody tr.pharm-group td {
  background: var(--panel-2); border-bottom: 1px solid var(--hairline);
}
.pharm-table tbody tr.pharm-group:hover td { background: var(--panel-2); }
.pharm-group-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-muted);
}
.pharm-group-count { margin-left: 10px; color: var(--ink-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
/* Location cell shows the street address (distinguishes identical-name rows)
   on its own line with the city/state muted beneath. */
.pharm-addr { display: block; }
.pharm-place { display: block; color: var(--ink-muted); font-size: 12.5px; }

/* Unmapped-pharmacies nudge banner (js/pharm-banner.js) — shown at the top of
   every page while the active location has pharmacies with no TPA. Soft amber
   tint + full border + status dot (no one-sided accent stripe). */
.pharm-banner {
  display: flex; align-items: center; gap: 12px;
  background: var(--amber-soft); border: 1px solid var(--amber-border); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 16px; font-size: 13.5px;
}
.pharm-banner-dot {
  flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  background: var(--amber-strong);
}
.pharm-banner-text { margin: 0; flex: 1 1 auto; color: var(--ink-2); }
.pharm-banner-close {
  flex: 0 0 auto; background: none; border: 0; padding: 0 4px; cursor: pointer;
  color: var(--ink-muted); font-size: 20px; line-height: 1; font-family: inherit;
}
.pharm-banner-close:hover { color: var(--ink); }

.form-card { max-width: 640px; }
.form-error {
  background: var(--rose-soft); border: 1px solid var(--rose); color: var(--error-ink);
  border-radius: 9px; padding: 10px 14px; margin-bottom: 14px; font-size: 13.5px;
}
/* ---------- inputs: global base ----------
   Zero-specificity fallback (`:where()` keeps specificity at 0) so EVERY
   text-like input, textarea and select gets app chrome even when it lives
   outside a .field wrapper. Because it's specificity-0, every real rule below
   — .field, .month-grid input, .pharm-search, .palette-input, the search bars,
   .filters select, .map-select — still wins and overrides as before. This only
   fills the gap for otherwise-bare inputs (e.g. the ledger skip-reason input
   and the reconcile-grid inputs) that previously fell back to browser defaults. */
:where(
  input[type="text"], input[type="number"], input[type="date"],
  input[type="email"], input[type="password"], input[type="search"],
  input[type="tel"], input[type="url"], input[type="month"],
  input[type="week"], input[type="time"], input[type="datetime-local"],
  textarea, select
) {
  background: var(--panel);
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  color: var(--ink);
  padding: 10px 13px;
  font-size: 14px;
  font-family: inherit;
}
:where(
  input[type="text"], input[type="number"], input[type="date"],
  input[type="email"], input[type="password"], input[type="search"],
  input[type="tel"], input[type="url"], input[type="month"],
  input[type="week"], input[type="time"], input[type="datetime-local"],
  textarea, select
):focus {
  outline: none;
  border-color: var(--rose);
  box-shadow: 0 0 0 3px var(--rose-soft);
}

.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.field label { font-size: 13px; font-weight: 600; color: var(--ink-2); text-transform: capitalize; }
.field label em { color: var(--rose-strong); font-style: normal; }
.field input[type="text"], .field input[type="number"], .field input[type="date"],
.field input[type="email"], .field input[type="password"],
.field select, .field textarea {
  background: var(--panel); border: 1px solid var(--hairline-strong); border-radius: 8px;
  color: var(--ink); padding: 10px 13px; font-size: 14px; font-family: inherit;
}
.field textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--rose);
  box-shadow: 0 0 0 3px var(--rose-soft);
}
.form-actions { display: flex; gap: 10px; margin-top: 6px; }

/* ---------------------------------------------------------------------------
   Custom checkbox — one polished control app-wide. appearance:none draws a
   rounded box; :checked fills it with the brand color and reveals a crisp
   drawn checkmark. The `.switch` toggle opts OUT (it hides its own input).
   ------------------------------------------------------------------------- */
input[type="checkbox"]:not(.switch input) {
  appearance: none; -webkit-appearance: none; margin: 0;
  width: 18px; height: 18px; flex: none; box-sizing: border-box;
  border: 1.5px solid var(--hairline-strong); border-radius: 6px;
  background: var(--panel); cursor: pointer; position: relative;
  transition: background .15s ease, border-color .15s ease;
}
input[type="checkbox"]:not(.switch input):hover { border-color: var(--rose); }
input[type="checkbox"]:not(.switch input):checked {
  background: var(--rose); border-color: var(--rose);
}
/* drawn checkmark — a rotated box with two visible sides, centered so it holds
   at any box size (16–18px) */
input[type="checkbox"]:not(.switch input):checked::after {
  content: ""; position: absolute; left: 50%; top: 46%;
  width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(42deg);
}
input[type="checkbox"]:not(.switch input):focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--rose-soft); border-color: var(--rose);
}
input[type="checkbox"]:not(.switch input):disabled {
  opacity: .5; cursor: not-allowed;
}

/* live "next task fires…" line in the schedule form (js/schedule-preview.js).
   Full soft border + tint (no side stripe): neutral by default, amber when the
   next task is a whole period out or the schedule has ended. */
.sched-preview {
  margin: 4px 0 14px; padding: 9px 12px; border-radius: 10px;
  font-size: 13px; line-height: 1.45;
  background: var(--panel-2); border: 1px solid var(--hairline); color: var(--ink-2);
}
.sched-preview.is-warn {
  background: var(--amber-soft); border-color: var(--amber-border); color: var(--ink);
}

/* checkbox rows (DRL checklist, audit flags) — label wraps the box, reads as one line */
.field-check { flex-direction: row; align-items: flex-start; }
.field-check label {
  display: flex; align-items: flex-start; gap: 9px; text-transform: none;
  font-weight: 500; color: var(--ink); font-size: 13.5px; line-height: 1.45; cursor: pointer;
}
.field-check input[type="checkbox"] { flex: none; margin-top: 1px; }
.field-check small { color: var(--ink-muted); display: block; font-weight: 400; }
.card-subhead {
  margin: 20px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-muted);
}
.field-hint { display: block; color: var(--ink-muted); font-size: 12px; white-space: normal; }

/* module dashboards — horizontal bar rows, submission-window chips, P&L table */
.hbars {
  display: grid; grid-template-columns: minmax(130px, auto) 1fr auto;
  gap: 6px 12px; align-items: center; font-size: 13px;
}
.hbar-label { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar-value { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; white-space: nowrap; }
.hbar-track { background: var(--panel-2); border-radius: 4px; height: 14px; position: relative; overflow: hidden; }
.hbar-fill { position: absolute; inset: 0 auto 0 0; border-radius: 0 4px 4px 0; background: var(--chart-1); }
.hbar-fill.alt { background: var(--chart-2); }
.hbar-fill.good { background: var(--lime); }
.hbar-fill.bad { background: var(--rose); }
.hbar-fill.warn { background: var(--amber-strong); }
.hbar-share { color: var(--ink-muted); font-weight: 400; font-size: 12px; }
.timeline { display: flex; gap: 8px; flex-wrap: wrap; }
.tl {
  flex: 1 1 108px; min-width: 108px; border: 1px solid var(--hairline);
  border-radius: 8px; padding: 8px 10px;
  font-size: 12px; background: var(--panel);
}
a.tl { display: block; text-decoration: none; color: inherit; transition: border-color .12s, box-shadow .12s; }
a.tl:hover { border-color: var(--hairline-strong); box-shadow: var(--shadow-1); }
.tl-period { color: var(--ink-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: 10.5px; }
.tl-state { font-weight: 700; margin-top: 2px; }
.tl-meta { color: var(--ink-muted); margin-top: 2px; }
.tl.ok { border-color: var(--lime-border); background: var(--lime-soft); }
.tl.ok .tl-state { color: var(--lime-strong); }
.tl.late { border-color: var(--rose-border); background: var(--rose-tint); }
.tl.late .tl-state { color: var(--rose-strong); }
.tl.due { border-color: var(--amber-border); background: var(--amber-soft); border-style: dashed; }
.tl.due .tl-state { color: var(--amber-strong); }
.tl.pend { border-color: var(--hairline-strong); }
.tl.pend .tl-state { color: var(--ink-2); }
.pnl-table td.num, .pnl-table th.num,
.data-table td.num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table td.mono { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12.5px; color: var(--ink-2); }
.pnl-table tr.pnl-section td {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-muted); font-weight: 700; padding-top: 14px; border-bottom: 0;
}
.pnl-table tr.pnl-total td { font-weight: 700; border-top: 2px solid var(--ink); border-bottom: 0; }
.num-neg { color: var(--rose-strong); }
.dash-note { color: var(--ink-muted); font-size: 12.5px; margin: 10px 0 0; }
.dash-actions { display: flex; gap: 10px; align-items: center; }
/* flush icon-only toolbar button (the persistent Story shortcut) */
.btn-iconic { padding: 7px 9px; line-height: 0; }
.btn-iconic.is-current { background: var(--rose-soft); border-color: var(--rose-border); color: var(--ink); }

/* Canonical sheets (/s/sheets) — month-per-row spreadsheet, one view per
   location. The wrapper scrolls both axes; the header row and the Month
   column stay pinned so wide metric sets keep their labels. Gap months
   (FLASK-49 heuristic) tint the whole ROW here, since months run vertically. */
.sheet-loc { margin-bottom: 30px; }
.sheet-loc-head { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 12px; }
.sheet-loc-head h2 { font-family: var(--font-display); font-size: 19px; margin: 0; }
.sheet-loc-id { color: var(--ink-muted); font-size: 12.5px; font-family: var(--font-mono, ui-monospace, monospace); }
/* Cap the height so the sticky header stays useful on tall sheets, but only
   scroll when the content actually exceeds the box — short sheets sit inline. */
.sheet-scroll { max-height: 82vh; overflow: auto; }
/* Dense money table: shrink the numeric grid so the full width fits the wide
   viewport without horizontal overflow. Tighter padding + slightly smaller
   tabular figures reclaim the most space where there are many columns. */
.sheet-table { font-size: 12.5px; table-layout: auto; }
.sheet-table th, .sheet-table td { padding: 6px 9px; }
.sheet-table td.num, .sheet-table th.num { padding-inline: 8px; }
.sheet-table thead th { position: sticky; top: 0; background: var(--panel); z-index: 2; }
.sheet-table th:first-child, .sheet-table td:first-child {
  position: sticky; left: 0; background: var(--panel); z-index: 1;
  box-shadow: 8px 0 8px -8px var(--hairline);
}
.sheet-table thead th:first-child { z-index: 3; }
.sheet-table tbody tr:hover td:first-child { background: var(--panel-2); }
.sheet-table tr.row-gap td { background: var(--rose-tint); }
.sheet-table tbody tr.row-gap:hover td { background: var(--rose-soft); }
.sheet-table td.src-file { max-width: 340px; }
.sheet-table .src-key {
  display: block; font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px; color: var(--ink-muted);
  overflow: hidden; text-overflow: ellipsis;
}
.sheet-refs { color: var(--ink-muted); font-size: 12px; }
.mapview-subtotal td { font-weight: 700; border-top: 2px solid var(--ink); border-bottom: 0; }

/* Data-gaps wizard actions (FB-539): Prev/Next lead with the ACTION, client
   name demoted to a caption; per-category fix actions sit inline. */
.gap-nav-btn { display: inline-flex; flex-direction: column; align-items: flex-start;
  gap: 1px; padding: 7px 14px; line-height: 1.2; }
.gap-nav-btn .gap-nav-name { font-size: 11px; font-weight: 400; opacity: .75; }
.gap-fix-actions { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.gap-fix-actions form { margin: 0; display: inline-flex; gap: 8px; align-items: center; }
.gap-upload input[type=file] { font-size: 12.5px; max-width: 240px; }
.notice-ok { background: var(--lime-soft); border: 1px solid var(--lime-border); }

/* Atom search (documents/search): one natural query box leads; the narrowing
   filters sit on a secondary row. Matched source columns highlight in results. */
.atom-search { display: flex; flex-direction: column; gap: 10px; }
.atom-search-hero { display: flex; gap: 10px; }
.atom-search-hero .atom-q { flex: 1; font-size: 15px; padding: 10px 14px; }
.atom-search-narrow { display: flex; gap: 8px; flex-wrap: wrap; }
.search-note { color: var(--ink-muted); font-weight: 400; }
.search-suggest { font-size: 13.5px; color: var(--ink-2); margin: 4px 0 10px; }
.extract-kv.extract-hit { background: var(--amber-soft); border: 1px solid var(--amber-border); border-radius: 5px; }
/* query-driven kind facets: clickable hit counts for the current query */
.search-facets { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 10px; }
.search-facets .pill { text-decoration: none; cursor: pointer; }
.search-facets .pill b { font-weight: 700; margin-left: 2px; }
/* canonical meaning of a matched header, from the header-synonym registry */
.extract-canon { font-size: 10.5px; color: var(--ink-muted); text-transform: lowercase; letter-spacing: .02em; }

/* Sheet money toolbar: tab switch (P&L / metric breakouts) + column picker */
.sheet-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 12px; flex-wrap: wrap; }
.seg { display: inline-flex; background: var(--panel-2); border: 1px solid var(--hairline); border-radius: 9px; padding: 2px; }
.seg-btn { border: 0; background: transparent; color: var(--ink-2); font-size: 12.5px; font-weight: 600; padding: 5px 14px; border-radius: 7px; cursor: pointer; }
.seg-btn:hover { color: var(--ink); }
.seg-btn.is-on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.colpick { position: relative; }
.colpick-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  background: var(--panel); border: 1px solid var(--hairline); border-radius: 10px;
  box-shadow: 0 12px 28px -12px rgba(0,0,0,.35); padding: 10px; min-width: 210px; max-height: 340px; overflow: auto;
}
.colpick-head { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); margin: 2px 4px 8px; font-weight: 700; }
.colpick-item { display: flex; align-items: center; gap: 8px; padding: 5px 4px; font-size: 13px; cursor: pointer; border-radius: 6px; }
.colpick-item:hover { background: var(--panel-2); }
.colpick-item em { color: var(--ink-muted); font-style: normal; font-size: 11.5px; }
.metric-note { color: var(--ink-muted); font-size: 12.5px; margin: 0 0 10px; }

/* Column visibility: empty columns hidden by default; the picker's checkboxes
   stamp an explicit override (force-show reveals an empty one, force-hide drops
   a populated one). Explicit overrides win over the default-empty rule. */
.sheet-table .col-empty { display: none; }
.sheet-table .col-force-hide { display: none; }
.sheet-table .col-empty.col-force-show { display: table-cell; }

/* Canonical row validation flags. A flagged row gets a soft tinted fill (whole
   row, since months run vertically here) + a leading dot; the detail sits in a
   full-width sub-row beneath it. bad = doesn't reconcile; warn = missing source
   / outlier / conflicting sources. */
.sheet-table tr.flag-bad > td { background: var(--rose-tint); }
.sheet-table tr.flag-warn > td { background: var(--amber-soft); }
/* Expandable month rows (FLASK-51): a disclosure chevron + "N groups" hint make
   it obvious the row opens a pharmacy-group breakdown. Chevron rotates on open. */
.sheet-table tbody tr.sheet-row.has-detail { cursor: pointer; }
.sheet-table tbody tr.sheet-row.has-detail:hover > td { background: var(--panel-2); }
.sheet-table tbody tr.sheet-row.has-detail:focus-visible { outline: 2px solid var(--rose-strong); outline-offset: -2px; }
.month-cell { position: relative; }
.disclosure {
  display: inline-block; width: 0; height: 0; margin-right: 8px; vertical-align: middle;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  border-left: 5px solid var(--ink-muted); transition: transform .15s var(--ease-standard);
}
.sheet-table tr.sheet-row.has-detail:hover .disclosure { border-left-color: var(--ink); }
.sheet-table tr.sheet-row.is-open .disclosure { transform: rotate(90deg); border-left-color: var(--ink); }
.detail-hint {
  margin-left: 8px; font-size: 11px; font-weight: 600; color: var(--ink-muted);
  background: var(--panel-2); border: 1px solid var(--hairline); border-radius: 999px; padding: 1px 8px;
}
.sheet-table tr.sheet-row.has-detail:hover .detail-hint { color: var(--ink-2); border-color: var(--hairline-strong); }
.sheet-table tr.sheet-row.is-open .detail-hint { color: var(--rose-strong); border-color: var(--rose-border); }
.flag-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%; margin-right: 6px;
  font-size: 10px; font-weight: 800; color: #fff; vertical-align: middle;
}
.flag-dot-bad { background: var(--rose-strong); }
.flag-dot-warn { background: var(--amber-strong); }
.flag-pill {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.flag-pill-warn { background: var(--amber-soft); color: var(--amber-strong); border: 1px solid var(--amber-border); }
.sheet-flagrow > td { padding-top: 0 !important; border-bottom: 1px solid var(--hairline); }
.flag-list { list-style: none; margin: 0; padding: 4px 0 8px; display: flex; flex-direction: column; gap: 5px; }
.flag-list li { font-size: 12.5px; color: var(--ink-2); }
.flag-list li.flag-bad strong { color: var(--rose-strong); }
.flag-list li.flag-warn strong { color: var(--amber-strong); }
.flag-fix { display: block; color: var(--ink-muted); font-size: 12px; margin-top: 1px; }

/* per-month pharmacy-group breakdown, revealed under a canonical row */
.sheet-detail > td { background: var(--panel-2); padding: 6px 12px 14px; }
.detail-head { font-size: 12.5px; font-weight: 700; color: var(--ink-2); margin: 6px 0 8px; }
.detail-sub { font-weight: 400; color: var(--ink-muted); margin-left: 8px; }
.detail-table { background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius); }
.sheet-table tr.sheet-row.is-open > td:first-child { font-weight: 700; }
.src-cell { white-space: nowrap; }
.src-doc { font-size: 11.5px; font-weight: 700; margin-right: 6px; }
.src-none { color: var(--ink-muted); font-size: 12px; }

/* inline DOCX preview — a slide-in panel over a scrim */
.doc-panel { position: fixed; inset: 0; z-index: 80; }
.doc-panel-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.32); }
.doc-panel-body {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(720px, 92vw);
  background: var(--panel); box-shadow: -12px 0 32px -12px rgba(0,0,0,.4);
  display: flex; flex-direction: column;
}
.doc-panel-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px; border-bottom: 1px solid var(--hairline);
  font-weight: 650; font-size: 14px;
}
.doc-panel-content { overflow: auto; padding: 18px 20px; }
.docx-doc { font-size: 13.5px; color: var(--ink); line-height: 1.5; }
.docx-doc h3 { font-family: var(--font-display); font-size: 17px; margin: 4px 0 10px; }
.docx-doc h4 { font-size: 14px; margin: 14px 0 6px; color: var(--ink-2); }
.docx-doc p { margin: 6px 0; }
.docx-table { width: 100%; border-collapse: collapse; margin: 10px 0 16px; font-size: 12.5px; }
.docx-table th, .docx-table td { border: 1px solid var(--hairline); padding: 6px 9px; text-align: left; }
.docx-table th { background: var(--panel-2); font-weight: 700; }
.docx-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.docx-preview-name { font-weight: 650; font-size: 13px; color: var(--ink-2); }

/* task filter cards — the row of actionable counts above the worklist; each
   card IS a filter (click toggles it), the attention card leads the page */
.attention-card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-radius: var(--radius); padding: 16px 20px; margin-bottom: 16px;
  border: 1px solid var(--hairline);
}
.attention-card .att-title { font-family: var(--font-display); font-size: 17px; font-weight: 650; margin: 0; }
.attention-card .att-sub { color: var(--ink-2); font-size: 13px; margin: 2px 0 0; }
.attention-card.att-bad { background: var(--rose-tint); border-color: var(--rose-border); }
.attention-card.att-bad .att-title { color: var(--rose-strong); }
.attention-card.att-warn { background: var(--amber-soft); border-color: var(--amber-border); }
.attention-card.att-warn .att-title { color: var(--amber-strong); }
.attention-card.att-ok { background: var(--lime-soft); border-color: var(--lime-border); }
.attention-card.att-ok .att-title { color: var(--lime-strong); }
.task-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  gap: 10px; margin-bottom: 16px;
}
.task-card {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--panel); border: 1px solid var(--hairline); border-radius: 10px;
  padding: 12px 14px; text-decoration: none; color: var(--ink);
  transition: border-color .12s var(--ease-standard), background .12s var(--ease-standard);
}
.task-card:hover { border-color: var(--hairline-strong); background: var(--panel-2); }
.task-card .tc-count { font-family: var(--font-display); font-size: 24px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.task-card .tc-label { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.task-card .tc-hint { font-size: 11px; color: var(--ink-muted); }
.task-card.on { border-color: var(--rose); background: var(--rose-tint); }
.task-card.on .tc-label::after { content: " ✕"; color: var(--rose-strong); }
.task-card.tc-bad .tc-count { color: var(--rose-strong); }
.task-card.tc-warn .tc-count { color: var(--amber-strong); }
.task-card.tc-good .tc-count { color: var(--lime-strong); }

/* Tasks board — the unified worklist. A top search box filters grouped lists
   of simple item rows (js/worklist.js), each row click-thrus to its solve
   surface. Monday-esque: groups of lists, quiet affordances, no full reload. */
.board-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.board-search {
  flex: 1; max-width: 520px; position: relative; display: flex; align-items: center;
}
.board-search-icon {
  position: absolute; left: 11px; display: inline-flex; pointer-events: none;
}
.board-search input[type="search"] {
  flex: 1; min-width: 0; background: var(--panel); border: 1px solid var(--hairline-strong);
  border-radius: 10px; color: var(--ink); padding: 10px 12px 10px 34px; font-size: 14px;
  font-family: inherit;
}
.board-search input[type="search"]:focus {
  outline: none; border-color: var(--rose); box-shadow: 0 0 0 3px var(--rose-soft);
}
.board-head .btn { flex: none; margin-left: auto; }

.worklist { display: flex; flex-direction: column; gap: 22px; }
.wl-group-head { margin-bottom: 8px; }
.wl-group-title {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-family: var(--font-display); font-size: 16px; font-weight: 650; color: var(--ink);
}
.wl-count { font-size: 11px; font-weight: 600; }
.wl-group-desc { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-muted); }

.wl-list { list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--hairline); border-radius: 12px; overflow: hidden; }
.wl-item + .wl-item .wl-item-link { border-top: 1px solid var(--hairline); }
.wl-item[hidden] { display: none; }
.wl-item-link {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  text-decoration: none; color: var(--ink); background: var(--panel);
  transition: background .12s var(--ease-standard);
}
.wl-item-link:hover { background: var(--panel-2); }
.wl-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-muted); }
.wl-dot-overdue { background: var(--rose-strong); }
.wl-dot-soon { background: var(--amber-strong); }
.wl-dot-normal { background: var(--lime-strong); }
.wl-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.wl-title { font-size: 13.5px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-sub { font-size: 12px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-meta { flex: none; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wl-go { flex: none; color: var(--ink-muted); font-size: 14px; }
.wl-item-link:hover .wl-go { color: var(--ink); }
.wl-empty, .wl-no-match {
  margin: 0; padding: 14px; font-size: 13px; color: var(--ink-muted);
  border: 1px dashed var(--hairline); border-radius: 12px; background: var(--panel);
}

/* printable client reports (monthly financials, mock-audit) */
.report-head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 3px solid var(--ink); padding-bottom: 10px; margin-bottom: 18px;
}
.report-head h2 { margin: 0; font-family: var(--font-display); font-size: 22px; }
.report-head .report-meta { color: var(--ink-muted); font-size: 13px; text-align: right; }
.report-section { margin-top: 26px; }
.report-section > h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--rose-strong); margin: 0 0 8px;
}
@media print {
  .sidebar, .nav-scrim, .mobile-bar, .topbar, .no-print { display: none !important; }
  .shell, .main { display: block; }
  .shell { padding-left: 0; }
  .content { padding: 0; max-width: none; }
  .card { border: none; box-shadow: none; padding: 0; }
  body { background: #fff; }
}

/* stacked multi-card forms — larger forms split into titled card sections */
.form-stack { max-width: 640px; }
.form-stack, .form-stack > form { display: flex; flex-direction: column; gap: 18px; }
.form-stack > .form-error, .form-stack > form > .form-error { margin-bottom: 0; }
.form-stack > .form-actions, .form-stack > form > .form-actions { margin-top: 0; }
.form-stack .card > .field:last-child,
.form-stack .card > .grid-2:last-child .field { margin-bottom: 0; }

.card-title { margin: 0 0 14px; font-family: var(--font-display); font-size: 18px; font-weight: 600; }

.btn-danger { background: transparent; color: var(--rose-strong); border-color: var(--rose); }
.btn-danger:hover { background: var(--rose-soft); }

/* scheduler — filter bar, requirement badges, inline row actions */
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filters select {
  background: var(--panel); border: 1px solid var(--hairline-strong); border-radius: 8px;
  color: var(--ink); padding: 8px 12px; font-size: 14px; font-family: inherit;
}
.filters select:focus { outline: none; border-color: var(--rose); box-shadow: 0 0 0 3px var(--rose-soft); }

/* FLASK-48 time slicer — the period dropdown every dashboard anchors to,
   flanked by ‹ › chevrons stepping prev/next data periods */
/* (the slicer's native <select> is gone — the month picker is now a
   dots-menu <details> dropdown, styled with the ⋯ menu rules below) */
.req-badges { display: inline-flex; gap: 6px; }
.row-actions form { display: inline; margin: 0; }
.link-btn {
  background: none; border: 0; padding: 0; margin-left: 10px; cursor: pointer;
  color: var(--ink-muted); font-size: 13px; font-family: inherit;
}
.link-btn:hover { color: var(--ink); }
.link-btn-danger:hover { color: var(--rose-strong); }
.notice {
  background: var(--lime-soft); border: 1px solid var(--lime-border); color: var(--ink-2);
  border-radius: 9px; padding: 10px 14px; margin-bottom: 14px; font-size: 13.5px;
}
.report-hints { margin: 0; padding-left: 18px; font-size: 13px; color: var(--ink-2); }
.report-hints li { margin-bottom: 4px; }
.report-hints small { color: var(--ink-muted); display: block; }

.kv { display: grid; grid-template-columns: 220px 1fr; gap: 0; margin: 0; }
.kv dt { color: var(--ink-muted); font-size: 13px; padding: 9px 0; border-bottom: 1px solid var(--hairline); text-transform: capitalize; }
.kv dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--hairline); font-size: 14px; overflow-wrap: anywhere; }
.kv pre { margin: 0; background: var(--panel-2); border-radius: 8px; padding: 10px 12px; font-size: 12.5px; overflow-x: auto; }

.fk-link { color: var(--ink-2); border-bottom: 1px dotted var(--ink-muted); }
.fk-link:hover { color: var(--ink); border-bottom-color: var(--ink-muted); }
.fk-id { color: var(--ink-muted); font-size: 12px; }

.row-link { font-weight: 600; color: var(--ink); border-bottom: 1px dotted var(--ink-muted); }
.row-link:hover { color: var(--rose-strong); border-bottom-color: var(--rose-strong); }

/* Tasks worklist: the row reads as a sentence of work, not a join dump. */
.task-title { display: inline-block; font-weight: 600; color: var(--ink); }
.task-title:hover { color: var(--rose-strong); }
.task-sub { display: block; font-size: 12.5px; color: var(--ink-muted); margin-top: 2px; }

.field input[type="file"] {
  background: var(--panel); border: 1px solid var(--hairline-strong); border-radius: 8px;
  color: var(--ink-2); padding: 8px; font-size: 13px; font-family: inherit;
}
.field input[type="file"]::file-selector-button {
  background: transparent; border: 1px solid var(--hairline); border-radius: 7px;
  color: var(--ink-2); padding: 6px 12px; margin-right: 10px;
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.field-hint { color: var(--ink-muted); font-size: 12px; margin: 2px 0 0; }

/* ---------- drawer (reusable shell: components/drawer.html + js/drawer.js) ---------- */
.drawer { position: fixed; inset: 0; z-index: 70; }
.drawer[hidden] { display: none; }
.drawer-scrim {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.25s var(--ease-standard);
}
.drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(440px, 100%);
  background: var(--panel);
  border-left: 1px solid var(--hairline);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s var(--ease-standard);
  outline: none;
}
.drawer.open .drawer-scrim { opacity: 1; }
.drawer.open .drawer-panel { transform: none; }
.drawer-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--hairline);
}
.drawer-head h2 { margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 600; }
.drawer-head .card-sub { margin: 3px 0 0; }
.drawer-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: none;
  background: transparent;
  border: 1px solid var(--hairline); border-radius: 8px;
  color: var(--ink-2); cursor: pointer;
}
.drawer-x:hover { border-color: var(--hairline-strong); color: var(--ink); }
.drawer-body { flex: 1; overflow-y: auto; padding: 18px 20px; }
body.drawer-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .drawer-scrim, .drawer-panel { transition: none; }
}

/* ---------- mobile ---------- */
.mobile-bar { display: none; }
.nav-scrim { display: none; }

@media (max-width: 768px) {
  .shell { padding-left: 0; }
  .mobile-bar {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px;
    background: var(--panel);
    border-bottom: 1px solid var(--hairline);
    position: sticky; top: 0; z-index: 40;
  }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    background: transparent;
    border: 1px solid var(--hairline); border-radius: 9px;
    color: var(--ink-2); cursor: pointer;
  }
  .nav-toggle:hover { color: var(--ink); border-color: var(--hairline-strong); }

  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0;
    height: 100dvh;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }
  body.nav-open .sidebar {
    transform: translateX(0);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  }
  body.nav-open .nav-scrim {
    display: block;
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 50;
  }
  body.nav-open { overflow: hidden; }

  .content { padding: 16px 16px 40px; gap: 16px; }
  .topbar { padding: 16px 16px 0; }

  .toolbar, .form-actions { flex-wrap: wrap; gap: 10px; }
}

@media (max-width: 600px) {
  .tile-value { font-size: 26px; }
  .chart { height: 240px; }
  .data-table td { max-width: 240px; }
  .kv { grid-template-columns: 1fr; }
  .kv dt { padding: 9px 0 2px; border-bottom: 0; }
  .kv dd { padding: 0 0 9px; }
}

/* ---------- theme toggle ---------- */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--ink-muted);
  padding: 6px 12px;
  font-family: inherit; font-size: 13px; font-weight: 550;
  cursor: pointer;
  align-self: flex-start;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-muted); }
/* Each label names the theme the button switches TO. */
[data-theme="light"] .theme-toggle-when-dark { display: none; }
html:not([data-theme="light"]) .theme-toggle-when-light { display: none; }
.login-theme-toggle { position: fixed; top: 18px; right: 18px; }

/* The brand mark is the full-color fox PNG (static/img/logo-mark.png) and
   works on both surfaces — no invert filter. */

@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
  .sidebar-collapse-chevron { transition: none; }
}

/* ============================================================
   Geo icon kit — layered geometric SVGs (ported from ui-kit)
   .sg-geo__back  soft offset layer  ·  .sg-geo__front crisp layer
   .sg-geo__spin  rotates when animated · .sg-geo__float bobs
   ============================================================ */

.sg-geo {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
}

.sg-geo__back,
.sg-geo__front,
.sg-geo__spin,
.sg-geo__float {
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes sg-geo-float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(0.6px, -1.4px); }
}

@keyframes sg-geo-drift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-1px, 1px); }
}

@keyframes sg-geo-spin {
  to { transform: rotate(360deg); }
}

.sg-geo--animated .sg-geo__back {
  animation: sg-geo-drift 3.2s var(--ease-standard) infinite;
}
.sg-geo--animated .sg-geo__float {
  animation: sg-geo-float 2.6s var(--ease-standard) infinite;
}
.sg-geo--animated .sg-geo__spin {
  animation: sg-geo-spin 9s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .sg-geo--animated .sg-geo__back,
  .sg-geo--animated .sg-geo__float,
  .sg-geo--animated .sg-geo__spin {
    animation: none;
  }
}

/* ---------- icons demo page ---------- */

.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}
.icon-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 6px 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--ink-2);
}
.icon-tile:hover { color: var(--ink); border-color: var(--hairline-strong); }
.icon-tile span {
  font-size: 11px;
  color: var(--ink-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.icon-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.icon-row + .icon-row { margin-top: 14px; }
.icon-row-label { min-width: 84px; font-size: 12px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.icon-chip { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); }
.icon-chip small { color: var(--ink-muted); font-size: 11px; }

.code-demo pre {
  margin: 0;
  padding: 14px 16px;
  background: var(--panel-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
}
.code-demo pre code { background: none; padding: 0; font-size: inherit; }

/* members — role/location choice rows on the invite & edit forms */
.field-choice {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13.5px; font-weight: 400; text-transform: none; color: var(--ink-2);
  padding: 8px 10px; border: 1px solid var(--hairline); border-radius: 8px;
}
.field-choice:has(input:checked) { border-color: var(--rose-border); background: var(--rose-soft); }
.field-choice input { margin-top: 2px; accent-color: var(--rose); }
.field-choice strong { color: var(--ink); }
.notice-warn { background: var(--rose-soft); border-color: var(--rose); }
/* prominent variant — page-level warnings that must not be skimmed past
   (e.g. Money's reports-in-arrears landing banner) */
.notice-lg { font-size: 16px; padding: 14px 18px; }

/* FLASK-49: dismissible notice — text left, close affordance right. Scoped to
   the dismissible warn variant so plain notices elsewhere are untouched. */
.notice.notice-warn[data-dismissible] { display: flex; align-items: flex-start; gap: 10px; }
.notice-dismiss {
  margin-left: auto; flex-shrink: 0; background: none; border: 0; cursor: pointer;
  color: var(--rose-strong); font-size: 18px; line-height: 1; padding: 0 2px;
}
.notice-dismiss:hover { color: var(--rose-hover); }
.notice-dismiss:focus-visible { outline: 2px solid var(--rose-strong); outline-offset: 2px; }

/* mail — inbox split pane (message list + reading pane) and email preview */
.mail-layout { display: grid; grid-template-columns: 340px 1fr; gap: 0; padding: 0; overflow: hidden; }
.mail-list { border-right: 1px solid var(--hairline); max-height: 680px; overflow-y: auto; }
.mail-list-head {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 12px 14px; border-bottom: 1px solid var(--hairline);
}
.mail-list-head .card-sub { margin: 0; }
.mail-list .empty { padding: 18px 14px; }
.mail-chip {
  font-size: 12px; color: var(--ink-muted); text-decoration: none;
  border: 1px solid var(--hairline); border-radius: 999px; padding: 3px 10px;
}
.mail-chip:hover { border-color: var(--hairline-strong); color: var(--ink); }
.mail-chip.active { background: var(--rose-soft); border-color: var(--rose-border); color: var(--rose-strong); }
.mail-item {
  display: flex; flex-direction: column; gap: 4px; padding: 12px 16px;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none; color: var(--ink);
}
.mail-item:hover { background: var(--panel-2); }
.mail-item.active { background: var(--panel-2); }
.mail-item.active .mail-item-name::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--rose-strong); margin-right: 7px; vertical-align: 2px;
}
.mail-item-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.mail-item-name { font-weight: 650; font-size: 13.5px; }
.mail-item-to, .mail-item-date { color: var(--ink-muted); font-size: 12px; }
.mail-detail { padding: 18px 20px; min-width: 0; }
.mail-meta { margin-bottom: 14px; }
.mail-meta-row {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  padding: 7px 0; border-bottom: 1px solid var(--hairline); font-size: 13.5px;
}
.mail-meta-row > span:first-child {
  color: var(--ink-muted); font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.04em; flex: 0 0 90px;
}
.mail-detail-actions { display: flex; gap: 10px; margin: 0 0 14px; }
.mail-detail-actions form { margin: 0; }
.mail-edit { margin: 0 0 14px; }
.field-warn { color: var(--rose-strong); font-weight: 550; }

/* @handle autocomplete (static/js/mail.js) */
.handle-menu {
  position: absolute;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  box-shadow: var(--shadow-1);
  padding: 4px;
  max-height: 260px;
  overflow-y: auto;
}
.handle-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 10px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}
.handle-item span { color: var(--ink-muted); font-size: 12.5px; }
.handle-item:hover, .handle-item.active { background: var(--rose-soft); }
.mail-frame {
  width: 100%; min-height: 480px; border: 1px solid var(--hairline);
  border-radius: 10px; background: #f6f3ee;
}
.form-card .mail-frame, .card > .mail-frame { margin: 0 0 6px; }
@media (max-width: 980px) {
  .mail-layout { grid-template-columns: 1fr; }
  .mail-list { max-height: 320px; border-right: 0; border-bottom: 1px solid var(--hairline); }
}

/* learning — library cards, player progress rail, quiz options, builder
   inline forms, and the rich-text widget on the text-step editor */
.lrn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lrn-card {
  display: flex; flex-direction: column; gap: 10px;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--panel-2); padding: 16px; color: var(--ink);
}
.lrn-card:hover { border-color: var(--hairline-strong); }
.lrn-card-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.lrn-card-top strong { font-size: 15px; }
.lrn-card-sub {
  margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.lrn-card-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.lrn-card-foot { margin-top: auto; }
.lrn-card-cta { color: var(--rose-strong); font-size: 13px; font-weight: 600; }

.progress-rail { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.progress-dot {
  width: 12px; height: 12px; border-radius: 999px; display: block;
  background: var(--panel-2); border: 1px solid var(--hairline-strong);
}
.progress-dot.is-quiz { border-radius: 3px; }
.progress-dot.is-done { background: var(--lime); border-color: var(--lime-border); }
.progress-dot.is-current { outline: 2px solid var(--rose-strong); outline-offset: 2px; }
.progress-dot.is-locked { opacity: 0.35; pointer-events: none; }
.progress-dot.is-summary {
  width: auto; height: auto; background: none; border: none;
  color: var(--ink-muted); font-size: 13px; line-height: 1; text-decoration: none;
}
a.progress-dot.is-summary { color: var(--rose-strong); }

.lrn-step-title { margin: 0 0 14px; font-family: var(--font-display); font-size: 21px; font-weight: 600; }
.step-body { max-width: 68ch; color: var(--ink-2); font-size: 15px; line-height: 1.7; }
.step-body p { margin: 0 0 12px; }
.step-body h3, .step-body h4 { color: var(--ink); margin: 18px 0 8px; }
.step-body ul, .step-body ol { margin: 0 0 12px; padding-left: 22px; }
.step-body li { margin-bottom: 4px; }
.step-body a { color: var(--rose-strong); text-decoration: underline; }
.step-media iframe, .step-media video {
  width: 100%; max-width: 760px; aspect-ratio: 16 / 9;
  border: 0; border-radius: 10px; background: #000;
}
.step-media img { max-width: 100%; border-radius: 10px; }
.step-caption { color: var(--ink-muted); font-size: 13px; margin: 6px 0 0; }

.lrn-question { max-width: 68ch; font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.quiz-options { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; max-width: 560px; }
.quiz-option {
  display: flex; align-items: center; justify-content: space-between; gap: 9px;
  padding: 10px 12px; border: 1px solid var(--hairline); border-radius: 8px;
  font-size: 13.5px; color: var(--ink-2); cursor: pointer;
}
.quiz-option > span:first-child { display: flex; align-items: center; gap: 9px; }
.quiz-option input { accent-color: var(--rose); }
label.quiz-option { flex-direction: row; justify-content: flex-start; }
.quiz-option:has(input:checked) { border-color: var(--rose-border); background: var(--rose-soft); }
.quiz-option.is-correct { border-color: var(--lime-border); background: var(--lime-soft); color: var(--ink); }
.quiz-option.is-wrong { border-color: var(--rose); background: var(--rose-soft); }

.lrn-inline { display: flex; gap: 8px; align-items: center; flex: 1; max-width: 480px; }
.lrn-inline input[type="text"] {
  flex: 1; background: var(--panel); border: 1px solid var(--hairline-strong);
  border-radius: 8px; color: var(--ink); padding: 9px 12px; font-size: 14px; font-family: inherit;
}
.lrn-inline input[type="text"]:focus {
  outline: none; border-color: var(--rose); box-shadow: 0 0 0 3px var(--rose-soft);
}
.lrn-add-step { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.lrn-add-step .card-sub { margin: 0; }
.lrn-option-row input[type="text"] {
  flex: 1; background: var(--panel); border: 1px solid var(--hairline-strong);
  border-radius: 7px; color: var(--ink); padding: 7px 10px; font-size: 13.5px; font-family: inherit;
}
.lrn-option-row { align-items: center; }

.rt-toolbar { display: flex; gap: 4px; margin-bottom: 6px; }
.rt-toolbar button {
  min-width: 32px; height: 28px; padding: 0 8px;
  background: var(--panel-2); border: 1px solid var(--hairline); border-radius: 7px;
  color: var(--ink-2); font-family: inherit; font-size: 12.5px; cursor: pointer;
}
.rt-toolbar button:hover { color: var(--ink); border-color: var(--hairline-strong); }
.rt-editor {
  min-height: 180px; background: var(--panel);
  border: 1px solid var(--hairline-strong); border-radius: 9px;
  padding: 10px 12px; font-size: 14px; line-height: 1.6; color: var(--ink);
}
.rt-editor:focus {
  outline: none; border-color: var(--rose); box-shadow: 0 0 0 3px var(--rose-soft);
}
.rt-editor a { color: var(--rose-strong); text-decoration: underline; }

@media (max-width: 900px) { .lrn-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .lrn-grid { grid-template-columns: 1fr; } }

/* program setup — vendor × module matrix with quiet toggles
   (static/js/setup.js). Still used by the onboarding wizard's module steps;
   the location account page itself now renders module CARDS (below). */
.setup-matrix { width: 100%; min-width: 800px; border-collapse: collapse; font-size: 13.5px; }
.setup-matrix th, .setup-matrix td { border-bottom: 1px solid var(--hairline); }
/* pharmacy→TPA channels summary on the location profile's OPA card */
.pharm-channels { margin-top: 16px; }

/* active-location context (FLASK-44) — sidebar picker, heading snack, card selector */
.loc-picker {
  display: flex; flex-direction: column; gap: 6px;
  padding: 9px 10px 11px; margin: 0 -8px 6px; border-radius: 10px;
  border: 1px solid var(--hairline); background: var(--panel);
}
.loc-picker-label { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.loc-picker .loc-snack { margin-top: 2px; display: flex; width: 100%; }
.loc-picker-single { font-size: 13.5px; font-weight: 600; color: var(--ink); }
/* quick path from the picker to the active location's account/setup page */
.loc-account-link {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 550; color: var(--ink-muted);
  padding: 6px 8px; margin: 0 -8px 2px; border-radius: 8px;
}
.loc-account-icon { display: inline-flex; flex: none; color: var(--ink-muted); }
.loc-account-link:hover, .loc-account-link:focus-visible { background: var(--panel-2); color: var(--ink); }
.loc-account-link:hover .loc-account-icon { color: var(--rose-strong); }
.loc-account-link.active { background: var(--panel-2); color: var(--ink); }
.loc-account-link.active .loc-account-icon { color: var(--rose-strong); }

.loc-snack {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 8px;
  font-size: 12.5px; color: var(--ink-muted); font-weight: 550;
}
.loc-snack-link { border-radius: 999px; padding: 3px 4px 3px 2px; }
/* the sidebar snack is a <button> that opens the location overlay — reset the
   native chrome so it reads as the old inline link */
button.loc-snack-link {
  width: 100%; background: none; border: 0; cursor: pointer;
  font: inherit; color: var(--ink-muted); text-align: left;
}
.loc-snack-link:hover { color: var(--ink); }
.loc-snack-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loc-snack-chevron {
  width: 6px; height: 6px; flex: none; margin-left: auto;
  border-right: 1.6px solid var(--ink-muted); border-bottom: 1.6px solid var(--ink-muted);
  transform: rotate(-45deg);
}
.loc-snack-link:hover .loc-snack-chevron { border-color: var(--rose-strong); }

.pick-body { min-height: 100vh; background: var(--page); color: var(--ink); display: grid; place-items: center; padding: 40px 20px; }
.pick-wrap { width: min(560px, 100%); display: flex; flex-direction: column; gap: 22px; }
.pick-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pick-head .brand { margin-bottom: 8px; }
.pick-title { margin: 0; font-family: var(--font-display); font-size: 26px; font-weight: 600; }
.pick-sub { margin: 0; color: var(--ink-muted); max-width: 52ch; }
.pick-filter { display: flex; justify-content: center; }
.pick-filter input {
  width: min(420px, 100%); background: var(--panel); border: 1.5px solid var(--hairline-strong);
  border-radius: 999px; color: var(--ink); padding: 11px 18px; font-size: 14.5px; font-family: inherit;
}
.pick-filter input:focus { outline: none; border-color: var(--rose); box-shadow: 0 0 0 3px var(--rose-soft); }
.pick-none { text-align: center; color: var(--ink-muted); margin: 0; }
/* a basic list, not cards — one location per row, hairline-separated */
.pick-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; }
.pick-row { border-top: 1px solid var(--hairline); }
.pick-row:first-child { border-top: 0; }
.pick-row[hidden] { display: none; }
.pick-row-main { display: flex; align-items: center; gap: 12px; padding: 0 16px; background: var(--panel); transition: background .12s; }
.pick-row-main:hover { background: var(--panel-2); }
.pick-row.is-active .pick-row-main { background: var(--rose-soft); }
.pick-row-go { margin: 0; flex: 1; min-width: 0; }
.pick-row-enter {
  width: 100%; display: flex; align-items: baseline; gap: 12px;
  background: none; border: 0; padding: 15px 0; cursor: pointer; text-align: left; font-family: inherit;
}
.pick-row-name { font-size: 15px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-row-id { font-size: 12px; color: var(--ink-muted); white-space: nowrap; }
.pick-row-arrow { margin-left: auto; color: var(--rose-strong); font-weight: 600; opacity: 0; transition: opacity .12s; }
.pick-row-main:hover .pick-row-arrow { opacity: 1; }

.pick-close {
  position: fixed; top: 18px; right: 22px; z-index: 5;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 999px;
  border: 1px solid var(--hairline); background: var(--panel);
  color: var(--ink-2); font-size: 22px; line-height: 1;
}
.pick-close:hover { border-color: var(--hairline-strong); color: var(--ink); }
.pick-foot { text-align: center; margin: 0; }

/* money pharmacy map + TPA-grouped list (FLASK-EP-5) */
.mapview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 14px; }
.mapview-periods { display: inline-flex; gap: 4px; }
.mapview-period {
  font-size: 13px; font-weight: 550; color: var(--ink-muted);
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--hairline);
  background: transparent; cursor: pointer; font-family: inherit;
}
.mapview-period:hover { color: var(--ink); background: var(--panel-2); }
.mapview-period.is-on { color: var(--ink); background: var(--rose-soft); border-color: var(--rose-border); }
.mapview-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 16px; }
@media (max-width: 980px) { .mapview-kpis { grid-template-columns: repeat(2, 1fr); } }
.mapview-kpis .tile { padding: 14px 16px; }
.mapview-kpis .tile-value { font-size: 22px; }
.mapview-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 980px) { .mapview-split { grid-template-columns: 1fr; } }
.mapview-map { height: 460px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--hairline); background: var(--panel-2); }
.mapview-map .empty { padding: 24px; text-align: center; }
.mapview-list { max-height: 460px; overflow-y: auto; }
.mapview-group + .mapview-group { margin-top: 14px; }
.mapview-group-head {
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-muted); padding: 6px 2px; border-bottom: 2px solid var(--hairline-strong);
}
.mapview-rows tbody tr { cursor: pointer; }
.mapview-rows tbody tr.is-selected { background: var(--rose-soft); }
.mapview-rows tbody tr.mapview-noloc { color: var(--ink-muted); }
/* Admin → Integrations: enter-once API-key blocks */
.int-block { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--hairline); }
.int-block:first-of-type { margin-top: 8px; padding-top: 0; border-top: 0; }
.int-status { margin: 8px 0 14px; }
.int-result { margin: 12px 0 0; font-size: 13.5px; padding: 9px 12px; border-radius: 8px; }
.int-result.int-ok { background: var(--lime-soft); color: var(--lime-strong); border: 1px solid var(--lime-border); }
.int-result.int-bad { background: var(--rose-soft); color: var(--error-ink); border: 1px solid var(--rose); }
/* the per-row TPA picker on the pharmacy-mapping table */
.map-select {
  background: var(--panel); border: 1px solid var(--hairline-strong); border-radius: 8px;
  color: var(--ink); padding: 8px 12px; font-size: 14px; font-family: inherit;
  min-width: 180px; max-width: 100%;
}
.map-select:focus { outline: none; border-color: var(--rose); box-shadow: 0 0 0 3px var(--rose-soft); }
.map-select:disabled { opacity: 0.5; cursor: not-allowed; }
/* a row whose pharmacy still has no TPA — a soft tint, no side stripe */
.data-table tr.is-unmapped { background: var(--rose-tint); }
.data-table tr.is-unmapped:hover { background: var(--rose-soft); }
.matrix-corner {
  width: 32%; text-align: left; padding: 12px;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-muted); font-weight: 600;
  border-bottom: 2px solid var(--hairline-strong);
}
.matrix-vendor {
  text-align: center; padding: 10px 8px; font-weight: 700; color: var(--ink);
  border-bottom: 2px solid var(--hairline-strong);
}
.matrix-vendor-meta {
  display: block; font-weight: 400; font-size: 10.5px;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-muted);
  margin-top: 2px;
}
.matrix-module {
  text-align: left; font-weight: 600; color: var(--ink-2);
  padding: 10px 12px; white-space: normal;
}
.setup-matrix tbody tr:hover .matrix-module { color: var(--ink); }
.matrix-cell {
  text-align: center; vertical-align: top; padding: 9px 6px 7px;
  border-left: 1px solid var(--hairline);
  transition: background 0.15s var(--ease-standard);
}
.matrix-cell.is-on { background: var(--rose-tint); }
.matrix-na {
  background: var(--panel-2); color: var(--ink-muted);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em;
  vertical-align: middle;
}
.sched-slot { display: block; min-height: 18px; margin-top: 6px; }
.sched-link { font-size: 11.5px; white-space: nowrap; }
.sched-link:hover { text-decoration: underline; }
.sched-link-unset { color: var(--amber-strong); }
.sched-link-set { color: var(--ink-muted); }
.sched-link-set:hover { color: var(--ink); }

/* location account page (Program setup → location) — card layout:
   vendors + OPA half-and-half, members roster, then one card per module
   grouped under its parent heading (static/js/setup.js). */
.setup-intro { margin-bottom: 18px; }
.setup-intro .card-sub { max-width: 72ch; }

.vendor-list { list-style: none; margin: 0; padding: 0; }
.vendor-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-top: 1px solid var(--hairline);
}
.vendor-row:first-child { border-top: 0; }
.vendor-name { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; color: var(--ink); }
.vendor-row form { margin-left: auto; }

.vendor-attach, .invite-inline {
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hairline);
}
.vendor-attach .field, .invite-inline .field { flex: 1; min-width: 150px; margin: 0; }
.vendor-attach .form-actions { margin: 0; }
.invite-inline > .btn { margin-bottom: 2px; }

.setup-modules { margin-top: 6px; }
.module-group-title {
  margin: 26px 0 12px; font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted);
  padding-bottom: 6px; border-bottom: 2px solid var(--hairline-strong);
}
.module-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.card.module-card { padding: 16px 18px; }
.card.module-card.is-on { background: var(--rose-tint); border: 1px solid var(--rose-border); }
.module-head { display: flex; align-items: flex-start; gap: 10px; }
.module-name { flex: 1; min-width: 0; margin: 0; font-size: 14.5px; font-weight: 650; color: var(--ink); }
.module-vendors { list-style: none; margin: 10px 0 0; padding: 0; }
.module-vendor { display: flex; align-items: baseline; gap: 8px; padding: 2px 0; }
.module-vendor-name { flex: 1; min-width: 0; font-size: 13px; color: var(--ink-2); }
.module-next { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-muted); }
.module-off { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-muted); }
.module-seed { margin: 10px 0 0; }
.module-wiring { display: block; margin-top: 10px; font-size: 12.5px; }

/* wiring dialog — one checkbox per offering vendor */
.wiring-list { list-style: none; margin: 14px 0 4px; padding: 0; }
.wiring-row + .wiring-row { margin-top: 8px; }
.wiring-row label { display: flex; align-items: center; gap: 9px; font-size: 14px; cursor: pointer; }

/* danger zone — full soft border + tinted background (no side stripes) */
.card.danger-card {
  margin-top: 26px; background: var(--rose-tint); border: 1px solid var(--rose-border);
}
.danger-card .card-sub { max-width: 64ch; }

/* onboarding wizard — the top progress rail (every step is its own page,
   no SPA), the step action bar, and the OPA-contact invite rows. */
.wiz-rail { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.wiz-step {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 7px;
  border: 1px solid var(--hairline); border-radius: 999px;
  background: var(--panel-2); color: var(--ink-2); font-size: 12.5px;
}
.wiz-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--hairline-strong);
  font-size: 11px; font-weight: 600; color: var(--ink-2);
}
a.wiz-step:hover { border-color: var(--hairline-strong); color: var(--ink); }
.wiz-step.is-done { border-color: var(--lime-border); background: var(--lime-soft); }
.wiz-step.is-done .wiz-step-num { background: var(--lime); border-color: var(--lime-border); color: #fff; }
.wiz-step.is-current { border-color: var(--rose); background: var(--rose-soft); color: var(--ink); font-weight: 600; }
.wiz-step.is-current .wiz-step-num { background: var(--rose); border-color: var(--rose); color: #fff; }
.wiz-step.is-locked { opacity: 0.45; }
.wiz-actions { align-items: center; gap: 10px; margin: 16px 0 4px; }
.wiz-contact {
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
  padding: 12px 0; border-bottom: 1px solid var(--hairline);
}
.wiz-contact:last-of-type { border-bottom: 0; }
.wiz-contact-who { display: flex; align-items: center; gap: 8px; min-width: 260px; padding-bottom: 9px; }
.wiz-contact-title { color: var(--ink-muted); font-size: 12.5px; }
.wiz-contact-email { flex: 1; min-width: 220px; margin: 0; }
.wiz-search { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.wiz-search-state { width: 110px; margin: 0; flex: 0 0 auto; }
.wiz-search-q { flex: 1; min-width: 220px; margin: 0; }
.wiz-search .btn { margin-bottom: 2px; }
.wiz-result-sub { display: block; color: var(--ink-muted); font-size: 12px; margin-top: 2px; }

/* pick-a-result → green go-light (full soft border + tint, no side stripe) and
   the create bar that reveals on selection (js/onboarding.js). */
.wiz-results { margin-bottom: 6px; }
.wiz-result .wiz-choose { white-space: nowrap; }
tr.wiz-result.selected { background: var(--lime-soft); }
tr.wiz-result.selected td { border-color: var(--lime-border); }
tr.wiz-result.selected:hover { background: var(--lime-soft); }
.wiz-chosen-flag { color: var(--lime-strong); font-size: 12.5px; font-weight: 600; margin-left: 10px; }
.wiz-manual { color: var(--ink-muted); font-size: 13px; margin: 4px 0 0; }
.wiz-create { display: none; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hairline); max-width: 640px; }
.wiz-create[data-open] { display: block; }

/* ============================================================================
   Mock HRSA audit wizard — two-column resumable layout (header + progress
   meter, sticky section rail, section card whose items reveal an evidence body
   when checked, footer actions). Uses theme tokens throughout.
   ========================================================================= */
/* the wizard renders inside the standard centered .content shell — it fills
   that column and shares the topbar's left edge (no extra max-width/centering) */
.audit-shell { width: 100%; }

/* screen-reader-only utility (visually hidden, still announced) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* header */
.audit-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; padding-bottom: 22px; border-bottom: 1px solid var(--hairline);
}
.audit-head-lead { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.audit-title { margin: 0; font-size: 32px; font-weight: 700; letter-spacing: -0.02em; }
.audit-meta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 14px; color: var(--ink-2);
}
.audit-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--hairline-strong); }
.audit-progress {
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  padding-bottom: 4px; flex: none;
}
.audit-progress-count { display: flex; align-items: baseline; gap: 8px; }
.audit-progress-count strong { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.audit-progress-count span { font-size: 14px; color: var(--ink-2); }
.audit-progress-bar {
  width: 220px; height: 4px; border-radius: 999px;
  background: var(--panel-2); overflow: hidden;
}
.audit-progress-fill {
  height: 100%; border-radius: 999px; background: var(--ink);
  transition: width .35s cubic-bezier(.4, 0, .2, 1);
}

/* two-column body */
.audit-body {
  display: grid; grid-template-columns: 260px minmax(0, 1fr);
  gap: 44px; padding-top: 28px; align-items: start;
}

/* left section rail */
.audit-rail { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 2px; }
.audit-rail-label {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-muted); padding: 0 0 12px 2px;
}
.audit-rail-row {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px;
  border-radius: 9px; color: var(--ink-2); font-size: 14px;
}
.audit-rail-row:hover { background: var(--panel-2); color: var(--ink); }
.audit-rail-row.is-active { background: var(--rose-soft); color: var(--ink); font-weight: 600; }
.audit-rail-row.is-review {
  margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--hairline);
  border-radius: 0 0 9px 9px;
}
.audit-rail-title { flex: 1; text-align: left; }
.audit-rail-count { font-size: 12px; color: var(--ink-muted); }
.audit-dot-num {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: var(--ink-muted);
  background: var(--panel); border: 1px solid var(--hairline-strong);
}
.audit-dot-num.is-done { background: var(--lime); border-color: var(--lime-border); color: #fff; }
.audit-dot-num.is-star { border-style: dashed; }

/* main column + section card */
.audit-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.audit-card { padding: 28px 30px; }
.audit-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; padding-bottom: 22px; margin-bottom: 4px;
  border-bottom: 1px solid var(--hairline);
}
.audit-step-ordinal {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: 6px;
}
.audit-card-title { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -0.015em; }
.audit-step-count { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; padding-top: 4px; }

/* a DRL item — checkbox reveals its evidence body when checked */
.drl-item { padding: 20px 0; border-bottom: 1px solid var(--hairline); }
.drl-item:last-of-type { border-bottom: 0; }
.drl-check { display: flex; align-items: flex-start; gap: 13px; cursor: pointer; margin: 0; }
.drl-check input { width: 17px; height: 17px; margin: 2px 0 0; flex: none; cursor: pointer; }
.drl-check-text { display: flex; flex-direction: column; gap: 3px; }
.drl-label { font-size: 15px; font-weight: 500; line-height: 1.45; }
.drl-note { font-size: 12.5px; color: var(--ink-muted); }
.drl-evidence {
  display: flex; flex-direction: column; gap: 10px;
  padding-left: 30px; max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .3s ease, opacity .2s ease, margin-top .3s ease;
}
/* reveal on check — evidence only matters once the item is asserted */
.drl-item:has(.drl-check input:checked) .drl-evidence {
  max-height: 400px; opacity: 1; margin-top: 14px;
}
.drl-evidence .field { margin: 0; }
/* narrative prose, not code — override the monospace .field textarea default */
.drl-evidence textarea {
  font-family: inherit; font-size: 14px; line-height: 1.5; min-height: 76px;
}
.drl-evidence-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btn-file { position: relative; overflow: hidden; cursor: pointer; }
.file-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.file-list li { font-size: 13px; }
.drl-attach { display: inline-block; }
.drl-attach > summary { display: inline-flex; list-style: none; cursor: pointer; }
.drl-attach > summary::-webkit-details-marker { display: none; }
.drl-attach-body {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-top: 8px; padding: 10px; border-radius: var(--radius);
  background: var(--panel-2); border: 1px solid var(--hairline);
}

/* footer actions */
.audit-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.audit-actions-end { display: flex; align-items: center; gap: 12px; }
.audit-actions-end form { display: inline; }
.audit-saved { font-size: 13px; color: var(--ink-muted); }

/* review recap */
.audit-recap { display: flex; flex-direction: column; }
.audit-recap-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 90px 110px;
  align-items: center; gap: 16px; padding: 14px 12px; margin: 0 -12px;
  border-bottom: 1px solid var(--hairline); color: var(--ink); border-radius: 8px;
}
.audit-recap-row:last-child { border-bottom: 0; }
.audit-recap-row:hover { background: var(--panel-2); }
.audit-recap-count { font-size: 13px; color: var(--ink-2); }
.audit-recap-row .pill { justify-self: end; }

.inline-form { display: flex; gap: 8px; align-items: center; }
.cell-actions { text-align: right; white-space: nowrap; }

@media (max-width: 860px) {
  .audit-body { grid-template-columns: 1fr; gap: 24px; }
  .audit-rail { position: static; }
  .audit-head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .audit-progress { align-items: flex-start; }
}

/* schedule popover — one floating panel, anchored to a quiet link by
   popover.js; content is the server-rendered ?frame=1 fragment. */
.popover {
  position: absolute; z-index: 80; width: 340px; max-width: calc(100vw - 20px);
  background: var(--panel); border: 1px solid var(--hairline-strong);
  border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  padding: 14px 16px;
}
.popover[hidden] { display: none; }
/* wide variant — opted into by fragments carrying [data-popover-wide]; the
   form lays out two columns, with the lead field and actions spanning both */
.popover.popover-wide { width: 600px; padding: 18px 20px; }
.popover-wide form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; align-items: start; }
.popover-wide form > .field:first-of-type,
.popover-wide form > .form-actions { grid-column: 1 / -1; }
.popover-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding-bottom: 8px; margin-bottom: 10px;
  border-bottom: 1px solid var(--hairline);
}
.popover-title { margin: 0; font-family: var(--font-display); font-size: 16px; font-weight: 600; }
.popover-head .card-sub { margin: 2px 0 0; }
.popover-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: none;
  background: transparent;
  border: 1px solid var(--hairline); border-radius: 8px;
  color: var(--ink-2); cursor: pointer; font-size: 15px; line-height: 1;
}
.popover-x:hover { border-color: var(--hairline-strong); color: var(--ink); }
/* submission work modal (FLASK-41) — guided 2-step submit flow in the shell
   modal. Metadata as header pills (said once), a dropzone that auto-uploads,
   then an activating submit CTA. Themed with the shared tokens (light + dark). */
.submit-frame { position: relative; }
/* leave clearance for the modal's built-in close button (top-right) */
.submit-head { padding: 0 40px 14px 0; margin-bottom: 14px; border-bottom: 1px solid var(--hairline); }
.submit-eyebrow {
  display: block; font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted);
}
.submit-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 3px; }
.submit-title { margin: 0; font-family: var(--font-display); font-size: 24px; font-weight: 650; letter-spacing: -0.01em; }
.submit-sub { margin: 4px 0 0; color: var(--ink-muted); font-size: 13px; }

/* header/context pills */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 7px; font-size: 11.5px; font-weight: 600;
  border: 1px solid var(--hairline); background: var(--panel-2); color: var(--ink-2);
}
.tag-amber { background: var(--amber-soft); border-color: var(--amber-border); color: var(--amber-strong); }
.tag-danger { background: var(--rose-soft); border-color: var(--rose-border); color: var(--error-ink); }

/* steps */
.submit-step { padding: 6px 0 14px; }
.submit-step-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.submit-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex: none; border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
  background: var(--btn-ink); color: var(--btn-ink-text);
}
.submit-step-num.done { background: var(--lime); color: #fff; }
.submit-step-num.idle { background: var(--panel-2); color: var(--ink-muted); border: 1px solid var(--hairline); }
.submit-step-label { font-size: 13px; font-weight: 650; color: var(--ink); }
.submit-step-label.idle { color: var(--ink-muted); font-weight: 600; }
.submit-step-action {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--rose-strong); font-size: 12.5px; font-weight: 500; padding: 0;
}
.submit-step-action:hover { text-decoration: underline; }

/* dropzone */
.dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 22px 16px; text-align: center; cursor: pointer;
  border: 1.5px dashed var(--hairline-strong); border-radius: 12px;
  background: var(--panel-2); transition: border-color .12s, background .12s;
}
.dropzone:hover { border-color: var(--rose-border); }
.dropzone.is-dragging { border-color: var(--rose); background: var(--rose-soft); }
.dropzone.is-uploading { border-style: solid; opacity: 0.75; pointer-events: none; }
.dropzone-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dropzone-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 999px; font-size: 18px;
  background: var(--rose-soft); color: var(--rose-strong);
}
.dropzone-text { font-size: 13.5px; color: var(--ink); }
.dropzone-text strong { font-weight: 650; }
.dropzone-hint { font-size: 11.5px; color: var(--ink-muted); }

/* selected-file card */
.file-card {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border: 1px solid var(--hairline); border-radius: 12px;
  background: var(--panel-2);
}
.file-card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none; border-radius: 9px;
  background: var(--lime-soft); color: var(--lime-strong);
}
.file-card-meta { display: flex; flex-direction: column; min-width: 0; }
.file-card-name { font-size: 13.5px; font-weight: 550; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-card-hint { font-size: 11.5px; color: var(--lime-strong); }
.file-card-more { margin-left: auto; font-size: 11.5px; color: var(--ink-muted); }

/* submit CTA */
.submit-cta { width: 100%; }

/* success view */
.submit-done { text-align: center; padding: 18px 8px 8px; }
.submit-done-seal { display: inline-flex; }
.submit-done h4 { margin: 8px 0 4px; font-family: var(--font-display); font-size: 18px; font-weight: 650; }
.submit-done .submit-sub { max-width: 34ch; margin: 0 auto; }
.submit-done-actions { justify-content: center; margin-top: 16px; }

.field-row { display: flex; gap: 10px; }
.field-row .field { flex: 1; min-width: 0; }
.radio-row { display: flex; gap: 14px; }
.radio-opt {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; color: var(--ink-2); cursor: pointer;
}
.radio-opt input { accent-color: var(--rose); margin: 0; }

/* app modal — the shell's generic viewing channel (components/modal.html +
   js/modal.js): a centered dialog whose body is a fetched ?frame=1 fragment. */
.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; }
.modal[hidden] { display: none; }
.modal-scrim {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.25s var(--ease-standard);
}
.modal-panel {
  position: relative; width: min(560px, 100%);
  max-height: min(85vh, 720px); overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  padding: 18px 20px;
  opacity: 0; transform: translateY(12px) scale(0.98);
  transition: transform 0.28s var(--ease-standard), opacity 0.28s var(--ease-standard);
  outline: none;
}
.modal.open .modal-scrim { opacity: 1; }
.modal.open .modal-panel { opacity: 1; transform: none; }
.modal-x {
  position: absolute; top: 14px; right: 14px; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: transparent;
  border: 1px solid var(--hairline); border-radius: 8px;
  color: var(--ink-2); cursor: pointer; font-size: 15px; line-height: 1;
}
.modal-x:hover { border-color: var(--hairline-strong); color: var(--ink); }
/* The shell modal renders its own close × (.modal-x). A fragment served into
   .modal-body may carry its own .popover-x for the popover channel (which has
   no built-in ×) — hide that one inside the modal so it never doubles up. */
.modal-body .popover-x { display: none; }
/* confirm dialog — the themed confirm() replacement (components/confirm.html
   + js/confirm.js); sits above the app modal so it can confirm from inside one */
.modal-confirm { z-index: 90; }
.confirm-panel { width: min(400px, 100%); }
.confirm-msg { margin: 2px 0 16px; font-size: 15px; }
body.modal-open { overflow: hidden; }

/* command palette (components/palette.html + js/palette.js) — the ⌘K
   quick-switcher/search overlay: a top-anchored panel on the modal's scrim
   tokens. Same z-tier as .modal — the two are opened exclusively (activating
   a data row closes the palette before the extract modal opens). */
.palette {
  position: fixed; inset: 0; z-index: 80;
  display: flex; justify-content: center; align-items: flex-start;
  padding: 12vh 24px 24px;
}
.palette[hidden] { display: none; }
.palette-scrim {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.25s var(--ease-standard);
}
.palette-panel {
  position: relative; width: min(600px, 100%);
  max-height: min(65vh, 640px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  opacity: 0; transform: translateY(12px) scale(0.98);
  transition: transform 0.28s var(--ease-standard), opacity 0.28s var(--ease-standard);
}
.palette.open .palette-scrim { opacity: 1; }
.palette.open .palette-panel { opacity: 1; transform: none; }
.palette-input-row {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--hairline);
}
.palette-input {
  flex: 1; min-width: 0;
  background: transparent; border: none; outline: none;
  font: inherit; font-size: 15px; color: var(--ink);
}
.palette-input::placeholder { color: var(--ink-muted); }
.palette-results { overflow-y: auto; padding: 6px; }
.palette-results .empty { margin: 10px; }
.palette-section-head {
  padding: 10px 10px 4px; font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted);
}
.palette-mode-hint { text-transform: none; letter-spacing: 0; font-weight: 500; }
.palette-opt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border-radius: 8px; text-align: left;
  background: transparent; border: none; cursor: pointer;
  font: inherit; font-size: 13.5px; color: var(--ink); text-decoration: none;
}
.palette-opt.is-active { background: var(--panel-2); }
.palette-opt .icon { flex: none; color: var(--ink-muted); }
.palette-opt-label {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.palette-opt-group {
  margin-left: auto; flex: none;
  font-size: 11.5px; color: var(--ink-muted);
}
.palette-opt-date { flex: none; font-size: 12.5px; color: var(--ink-2); }
.palette-see-all { color: var(--ink-2); font-weight: 550; }
.palette-kbd {
  flex: none; padding: 2px 6px;
  font-family: var(--font-display); font-size: 10.5px; font-weight: 600;
  color: var(--ink-muted); background: var(--panel-2);
  border: 1px solid var(--hairline); border-radius: 6px;
}
/* topbar trigger — lives inline at the header row's right edge; when a page
   supplies its own controls they sit before it (single auto margin wins) */
.palette-btn {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 8px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--hairline);
  color: var(--ink-2); cursor: pointer;
}
.topbar-controls + .palette-btn { margin-left: 0; }
.palette-btn:hover { border-color: var(--hairline-strong); color: var(--ink); }

/* location switcher overlay (components/locpicker.html) — reuses the palette
   panel/scrim/input; rows are forms wrapping a .palette-opt submit button */
.locpicker form { margin: 0; }
.locpicker form[hidden] { display: none; }
.locpicker .palette-opt.is-current .palette-opt-label { font-weight: 700; }
.palette-results-none { margin: 10px; color: var(--ink-muted); font-size: 13.5px; }

@media (prefers-reduced-motion: reduce) {
  .modal-scrim, .modal-panel, .palette-scrim, .palette-panel, .matrix-cell { transition: none; }
}

.switch { position: relative; display: inline-flex; flex: 0 0 auto; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch-track {
  width: 34px; height: 20px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--hairline-strong);
  transition: background 0.15s var(--ease-standard), border-color 0.15s var(--ease-standard);
}
.switch-track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px;
  border-radius: 999px; background: var(--ink-muted);
  transition: transform 0.15s var(--ease-standard), background 0.15s var(--ease-standard);
}
.switch input:checked + .switch-track { background: var(--rose); border-color: var(--rose); }
.switch input:checked + .switch-track::after { transform: translateX(14px); background: #fff; }
.switch input:focus-visible + .switch-track { box-shadow: 0 0 0 3px var(--rose-soft); }
.switch input:disabled + .switch-track { opacity: 0.5; }

/* ---- API contracts page (/s/api) + cross-file search --------------------- */
.api-method {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em;
  vertical-align: 2px; margin-right: 6px;
}
.api-method-post { background: var(--lime-soft); color: var(--lime-strong); }
.api-method-get { background: var(--amber-soft); color: var(--amber-strong); }
.api-contract h2 code { font-size: 15px; }
.api-h3 { font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 14px 0 8px; }
.api-copy { font-size: 13.5px; color: var(--ink-2); margin: 8px 0; max-width: 76ch; }
.api-desc { white-space: normal; max-width: 48ch; }
.data-table td.api-desc { white-space: normal; overflow: visible; text-overflow: clip; }
.api-toc { font-size: 13px; line-height: 2; }
.api-toc a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.api-toc a:hover { color: var(--ink); }
.api-notes { font-size: 13px; color: var(--ink-2); padding-left: 18px; margin: 8px 0; }
.api-notes li { margin: 4px 0; }
.api-kinds { display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  font-size: 13px; color: var(--ink-2); margin-top: 12px; }
.code-block {
  background: var(--panel-2); border: 1px solid var(--hairline);
  border-radius: 8px; padding: 12px 14px; margin: 8px 0;
  font-size: 12.5px; line-height: 1.55; overflow-x: auto;
  font-family: var(--font-mono, ui-monospace, monospace);
}

/* cross-file search (documents · search) — atom rows + compact detail cells */
.filters input {
  background: var(--panel); border: 1.5px solid var(--hairline-strong); border-radius: 999px;
  color: var(--ink); padding: 9px 16px; font-size: 14px; font-family: inherit;
  min-width: 240px;
}
.filters input:focus { outline: none; border-color: var(--rose); box-shadow: 0 0 0 3px var(--rose-soft); }
.extract-detail { max-width: 260px; }
.extract-kv { display: inline-block; margin-right: 8px; font-size: 12px; color: var(--ink-2); }
.extract-kv b { font-weight: 600; color: var(--ink-muted); text-transform: lowercase; }
.extract-more { font-size: 11.5px; color: var(--ink-muted); }

/* the DETAIL cell is a button that opens the full atom in the shell modal:
   the same inline preview, plus a "Detail →" cue that shows on row hover. */
.extract-open {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer;
}
.extract-detail-cue {
  display: inline-block; margin-left: 4px; font-size: 11.5px; font-weight: 600;
  color: var(--rose); opacity: 0; transition: opacity 0.12s var(--ease-standard);
}
.data-table tr:hover .extract-detail-cue,
.extract-open:focus-visible .extract-detail-cue { opacity: 1; }

/* the atom-detail modal fragment: grouped sections, the source row wider than
   the standard kv so long file columns read cleanly. */
.modal-panel:has(.extract-source) { width: min(720px, 100%); }
.extract-section { margin-top: 18px; }
.extract-section:first-of-type { margin-top: 12px; }
.extract-section-title {
  margin: 0 0 4px; font-family: var(--font-display); font-size: 13px;
  font-weight: 600; color: var(--ink-muted); text-transform: uppercase;
  letter-spacing: 0.04em;
}
.extract-section-title .card-sub { display: inline; font-size: 12px; text-transform: none; letter-spacing: 0; }
.extract-source dt { font-family: var(--font-mono, ui-monospace, monospace); text-transform: none; }

/* live per-entity geocode prompt (money pharmacy map empty state) */
.map-geocode { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 16px; text-align: center; }
.map-geocode .empty { margin: 0; }
.map-geocode-status { font-size: 12.5px; color: var(--ink-2); margin: 0; max-width: 90%; }

/* ---------- data-gaps punch list (FLASK-52) ---------- */
/* (The old persistent .gap-bar alarm is retired — gaps signal via the zen
   red dots on the ⋯ menu, the Data-sheet entry, and the picker badges.) */

/* Tracker matrix — first column stays put while the category columns scroll */
.gaps-progress {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 14px;
}
.gaps-progress .hbars { flex: 1 1 320px; }
.gaps-progress .toolbar-actions { display: flex; align-items: center; gap: 12px; }
.gaps-matrix th:first-child, .gaps-matrix td:first-child {
  position: sticky; left: 0; background: var(--panel); z-index: 1; min-width: 220px;
}
.gaps-matrix .pill { margin-bottom: 0; }
.gaps-group-row td {
  font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-muted); background: var(--panel-2); padding-top: 10px; padding-bottom: 10px;
}
.gaps-total-row td { font-weight: 600; border-top: 2px solid var(--hairline-strong); }
.gaps-clear { color: var(--ink-muted); }

/* Client walkthrough — queue navigation + per-category item lists */
.gap-queue-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.gap-items { margin: 0 0 12px; padding-left: 20px; font-size: 13.5px; color: var(--ink-2); }
.gap-items li { margin: 3px 0; }
.gap-items-more { list-style: none; color: var(--ink-muted); font-style: italic; }
.gap-fix {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border-top: 1px solid var(--hairline); padding-top: 12px;
}

/* chart controls row — granularity/metric seg + context note above a chart */
.chart-controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 10px;
}
.chart-controls .dash-note { margin: 0; }
a.seg-btn { text-decoration: none; }

/* topbar tab attention dot — the zen signal that a tab holds open work */
.tab-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--rose); margin-left: 6px; vertical-align: 2px;
}

/* Money · Data — the month-picker calendar; each tile opens the month modal */
.cal-year { margin-bottom: 20px; }
.cal-year:last-child { margin-bottom: 0; }
.cal-year-label {
  margin: 0 0 8px; font-family: var(--font-display); font-size: 15px;
  letter-spacing: 0.06em; font-variant-numeric: tabular-nums;
}
.cal-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 1100px) { .cal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cal-month {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 9px 11px; text-align: left; font-family: inherit;
  background: var(--panel); border: 1px solid var(--hairline);
  border-radius: 10px;
  transition: border-color 0.12s, box-shadow 0.12s;
}
button.cal-month { cursor: pointer; }
button.cal-month:hover {
  border-color: var(--hairline-strong);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.cal-m { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.cal-net { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--ink); }
.cal-missing { background: var(--rose-tint, var(--rose-soft)); border-color: var(--rose-border); }
.cal-missing .cal-flag { color: var(--rose-strong); font-weight: 600; }
.cal-empty { border-style: dashed; }
.cal-empty .cal-m, .cal-empty .cal-add { color: var(--ink-muted); }
.cal-future { border-style: dashed; opacity: 0.45; }
.cal-future .cal-m { color: var(--ink-muted); }

/* the month modal — Step 1 Income/Expenses totals + Net strip, Step 2 the
   pharmacy-group allocation grid; wide panel only when the grid is present */
.modal-panel:has([data-month-grid]) { width: min(940px, 100%); }
.month-step { padding: 2px 0 10px; }
.month-step-sub { margin: -4px 0 10px 32px; }
.month-sec {
  border: 1px solid var(--hairline); border-radius: 10px;
  padding: 10px 14px 14px; margin: 0 0 12px;
}
.month-sec legend {
  padding: 0 6px; font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2);
}
.month-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.month-fields .field { margin-bottom: 0; }
.month-net {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 14px; margin-bottom: 14px; font-weight: 700;
  background: var(--panel-2); border: 1px solid var(--hairline);
  border-radius: 10px;
}
.month-net output { font-variant-numeric: tabular-nums; }
.month-ro { margin-bottom: 12px; }
.month-ro-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 2px; border-bottom: 1px solid var(--hairline);
  font-size: 13.5px;
}
.month-ro-val { font-variant-numeric: tabular-nums; }
.month-ro-h { margin: 16px 0 8px; font-family: var(--font-display); font-size: 15px; }
.month-grid { font-size: 12.5px; }
.month-grid th, .month-grid td { padding: 6px 8px; }
.month-grid .month-grid-label { font-weight: 600; white-space: nowrap; }
.month-grid input {
  width: 100%; min-width: 88px; padding: 5px 7px; text-align: right;
  background: var(--panel-2); border: 1px solid var(--hairline);
  border-radius: 6px; color: var(--ink); font-size: 12.5px;
  font-family: inherit; font-variant-numeric: tabular-nums;
}
.month-grid input:focus {
  outline: none; border-color: var(--rose);
  box-shadow: 0 0 0 2px var(--rose-soft);
}
.month-grid .month-unalloc td {
  font-weight: 600; color: var(--ink-2); background: var(--panel-2);
  font-variant-numeric: tabular-nums;
}
.month-grid .month-unalloc td.is-neg {
  background: var(--rose-tint, var(--rose-soft)); color: var(--rose-strong);
}
/* fourth-order drill-down: the ▸ expander on a group row + its store rows */
.month-expand {
  display: inline-block; width: 24px; height: 24px; margin-right: 6px;
  padding: 0; border: 1px solid var(--hairline-strong); border-radius: 7px;
  background: var(--panel-2); color: var(--rose-strong, var(--rose));
  font-size: 12px; font-weight: 700; line-height: 22px; cursor: pointer;
}
.month-expand:hover { border-color: var(--rose); background: var(--panel); }
.month-expand:focus-visible {
  outline: none; box-shadow: 0 0 0 2px var(--rose-soft);
}
.month-grid .month-store-row .month-store-label {
  padding-left: 34px; font-weight: 400; color: var(--ink-2);
  white-space: nowrap;
}
.month-grid .month-store-row input { background: var(--panel); }
.month-grid .month-gunalloc td { font-weight: 500; font-style: italic; }
.month-grid .month-store-empty td { font-style: italic; white-space: normal; }

/* Shared dropdown (components/dropdown.html + js/dropdown.js) — the styled
   <select> replacement. Toggle reads as a field; menu panel matches the
   dots-menu look. */
.dd { position: relative; display: inline-block; min-width: 180px; }
.dd-toggle {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; width: 100%; padding: 7px 10px 7px 12px;
  background: var(--panel); border: 1px solid var(--hairline-strong);
  border-radius: 8px; color: var(--ink); font-size: 13px;
  font-family: inherit; cursor: pointer; text-align: left;
}
.dd-toggle:hover { border-color: var(--ink-2); }
.dd-toggle:focus-visible {
  outline: none; border-color: var(--rose);
  box-shadow: 0 0 0 2px var(--rose-soft);
}
.dd-toggle[aria-expanded="true"] .dd-chevron { transform: rotate(180deg); }
.dd-chevron { flex: none; color: var(--ink-2); transition: transform 0.15s ease; }
@media (prefers-reduced-motion: reduce) { .dd-chevron { transition: none; } }
.dd-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-placeholder { color: var(--ink-2); }
.dd-menu {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 100%; max-height: 320px; overflow-y: auto;
  display: flex; flex-direction: column; padding: 6px;
  background: var(--panel); border: 1px solid var(--hairline-strong);
  border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
}
.dd-opt {
  padding: 7px 10px; border: none; border-radius: 7px; background: none;
  color: var(--ink); font-size: 13px; font-family: inherit;
  text-align: left; cursor: pointer; white-space: nowrap;
}
.dd-opt:hover, .dd-opt:focus-visible { background: var(--panel-2); outline: none; }
.dd-opt.is-selected { font-weight: 700; }
.dd-loading { padding: 8px 10px; color: var(--ink-2); font-size: 12.5px; }

/* Groupings Manager (/s/money/groupings) — membership-first group cards */
.grouping-new {
  display: flex; align-items: flex-end; gap: 10px; max-width: 420px;
}
.grouping-new .field { flex: 1; margin-bottom: 0; }
.grouping-card > summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap;
}
.grouping-card > summary::-webkit-details-marker { display: none; }
.grouping-card > summary::before {
  content: "▸"; flex: none; width: 30px; height: 30px; line-height: 30px;
  text-align: center; border: 1px solid var(--hairline-strong);
  border-radius: 8px; color: var(--rose-strong, var(--rose));
  font-size: 15px; font-weight: 700; background: var(--panel-2);
}
.grouping-card[open] > summary::before { content: "▾"; }
.grouping-card[open] > summary { margin-bottom: 12px; }
.grouping-title { flex: 1; min-width: 200px; }
.grouping-kicker {
  display: block; font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2);
}
.grouping-name {
  font-family: var(--font-display); font-weight: 800; font-size: 22px;
  line-height: 1.2;
}
.grouping-meta {
  display: flex; gap: 14px; align-items: baseline;
  color: var(--ink-2); font-size: 12.5px;
}
.grouping-actions { display: flex; gap: 6px; }
.grouping-actions form { display: inline; }
.grouping-move { display: flex; gap: 6px; align-items: center; }
.grouping-stem {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; padding: 10px 12px; margin-top: 10px;
  background: var(--panel-2); border: 1px solid var(--hairline);
  border-radius: 10px; font-size: 13px;
}
.grouping-rename {
  display: flex; gap: 8px; align-items: center; max-width: 380px;
  margin-top: 12px;
}
.grouping-rename input { flex: 1; }
/* the groupings modal subview gets the wide panel */
.modal-panel:has([data-groupings-frame]) { width: min(1000px, 100%); }

/* Complete Ledger wizard — chooser queue + step-1 TPA report rows */
.ledger-queue { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.ledger-queue-item {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 10px 14px; border: 1px solid var(--hairline);
  border-radius: 10px; background: var(--panel-2); color: var(--ink);
  text-decoration: none;
}
.ledger-queue-item:hover { border-color: var(--rose); }
.ledger-queue-month { font-weight: 650; }
.ledger-tpas { display: flex; flex-direction: column; gap: 12px; margin: 12px 0; }
.ledger-tpa {
  padding: 12px 14px; border: 1px solid var(--hairline); border-radius: 10px;
  background: var(--panel-2);
}
.ledger-tpa-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap; margin-bottom: 8px;
}
.ledger-tpa-name { font-weight: 700; }
.ledger-tpa-actions {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}
.ledger-tpa-actions form { display: flex; gap: 8px; align-items: center; }
.ledger-exempt input[type="text"] { min-width: 280px; }
.ledger-review-row td { border-top: 2px solid var(--hairline-strong); }
.ledger-h { margin: 18px 0 8px; font-family: var(--font-display); font-size: 15px; }
.ledger-queue-meta { display: flex; gap: 12px; align-items: baseline; }
.muted-note { color: var(--ink-2); font-size: 12px; }

/* checkout lifecycle timeline — five states as numbered circles joined by
   connector rules (Layout redesign). Rendered near the "All ledgers" bar. */
.ledger-timeline {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-bottom: 22px;
}
.ledger-tl-step {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 8px; border-radius: 999px;
  background: var(--panel-2); color: var(--ink-2); font-size: 14px;
}
.ledger-tl-dot {
  display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 999px; background: var(--hairline-strong);
  font-size: 12px; font-weight: 600; color: var(--ink-2);
}
.ledger-tl-join { width: 18px; height: 1px; background: var(--hairline-strong); }
.ledger-tl-step.is-done { color: var(--ink); }
.ledger-tl-step.is-done .ledger-tl-dot {
  background: var(--lime-soft, var(--rose-soft)); color: var(--lime-strong, var(--rose-strong));
}
.ledger-tl-step.is-current {
  background: var(--rose-soft); color: var(--rose-strong); font-weight: 600;
}
.ledger-tl-step.is-current .ledger-tl-dot {
  background: var(--rose-strong); color: #fff;
}
.ledger-tl-at { color: inherit; opacity: 0.7; font-size: 12px; font-weight: 400; }

/* Layout redesign · the framed "collect the reports" card: a header with the
   DUE date, a numbered STEP SPINE (44px gutter of circled numbers + content),
   and a footer skip affordance. */
.collect-card {
  border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  background: var(--panel); overflow: hidden; margin-bottom: 18px;
}
.collect-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
  padding: 26px 30px 22px; border-bottom: 1px solid var(--hairline);
}
.collect-head-main { max-width: 640px; }
.collect-title {
  margin: 0; font-family: var(--font-display); font-size: 25px;
  font-weight: 700; letter-spacing: -0.015em; line-height: 1.2;
}
.collect-sub {
  margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-2);
  text-wrap: pretty;
}
.collect-due { flex: none; text-align: right; }
.collect-due-label {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-muted);
}
.collect-due-date { display: block; margin-top: 4px; font-size: 16px; font-weight: 600; }
.collect-empty { margin: 20px 30px 0; }

.collect-steps {
  display: grid; grid-template-columns: 44px minmax(0, 1fr);
  gap: 0 20px; padding: 6px 30px;
}
.collect-num { display: grid; place-items: center; align-self: start; padding-top: 26px; }
.collect-num span {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; background: var(--ink); color: var(--page);
  font-size: 15px; font-weight: 600;
}
.collect-body { padding: 26px 0 30px; }
/* the hairline above steps 2 & 3 spans both grid columns */
.collect-ruled { border-top: 1px solid var(--hairline); }
.collect-h { margin: 5px 0 0; font-size: 19px; font-weight: 600; }
.collect-p {
  margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-2);
  text-wrap: pretty; max-width: 620px;
}
.collect-p em { font-style: italic; }

/* step 1 — download copy + the workbook mockup, side by side */
.collect-step1 { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.collect-s1-copy { flex: 1 1 300px; min-width: 0; }
.collect-s1-copy .btn { margin-top: 18px; }
.collect-s1-book { flex: 1 1 340px; min-width: 0; max-width: 440px; }

/* the animated workbook: an Excel window whose SHEETS read as bottom tabs
   (one per TPA) — grid rows fade in, tabs pop in, each takes a turn active */
.workbook {
  border: 1px solid var(--hairline); border-radius: 12px;
  background: var(--panel-2); overflow: hidden;
}
.workbook-bar {
  display: flex; align-items: center; gap: 9px; padding: 11px 14px;
  border-bottom: 1px solid var(--hairline);
}
.workbook-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--hairline-strong); }
.workbook-file {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px;
  color: var(--ink-2);
}
.workbook-cols {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px;
  padding: 10px 14px 6px; font-size: 11px; font-weight: 600;
  color: var(--ink-muted);
}
.workbook-grid { display: grid; gap: 7px; padding: 0 14px 12px; }
.workbook-row {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px;
  animation: wb-row-in 0.5s var(--ease-standard) both;
  animation-delay: calc(0.2s + var(--wbi) * 0.16s);
}
.workbook-row span { height: 11px; border-radius: 3px; background: var(--hairline); }
.workbook-row.is-head span { background: var(--hairline-strong); }
@keyframes wb-row-in {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}
.workbook-tabs {
  display: flex; gap: 7px; padding: 10px 14px; overflow-x: auto;
  border-top: 1px solid var(--hairline);
}
.workbook-tab {
  flex: none; padding: 5px 9px; border: 1px solid var(--hairline-strong);
  border-radius: 6px; background: var(--panel);
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11.5px;
  color: var(--ink-2); white-space: nowrap;
  animation: wb-tab-in 0.45s var(--ease-standard) both,
             wb-tab-live calc(var(--wbn) * 2.4s) linear infinite;
  animation-delay: calc(0.5s + var(--wbi) * 0.14s),
                   calc(1.4s + var(--wbi) * 2.4s);
}
@keyframes wb-tab-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes wb-tab-live {
  0%, 3% { border-color: var(--hairline-strong); color: var(--ink-2); background: var(--panel); }
  6%, 34% { border-color: var(--rose-border); color: var(--rose-strong); background: var(--rose-soft); }
  40%, 100% { border-color: var(--hairline-strong); color: var(--ink-2); background: var(--panel); }
}
.workbook-cap { margin: 8px 2px 0; font-size: 13px; color: var(--ink-muted); }
@media (prefers-reduced-motion: reduce) {
  .workbook-row, .workbook-tab { animation: none; opacity: 1; transform: none; }
  .workbook-tab:first-child {
    border-color: var(--rose-border); color: var(--rose-strong); background: var(--rose-soft);
  }
}

/* step 2 — two feature cards + the PHI warning */
.collect-facts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.collect-fact {
  flex: 1 1 260px; min-width: 0; padding: 16px 18px; border-radius: 12px;
  background: var(--panel-2);
}
.collect-fact-h { font-size: 15px; font-weight: 600; }
.collect-fact p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.collect-phi { margin: 12px 0 0; font-size: 14.5px; color: var(--rose-strong); }

/* step 3 — dropzone + button inline */
.collect-upload {
  display: flex; align-items: center; gap: 20px; margin-top: 16px;
  flex-wrap: wrap;
}
.collect-upload .dropzone { flex: 1 1 280px; margin: 0; }

.collect-foot {
  padding: 16px 30px; border-top: 1px solid var(--hairline);
  background: var(--panel-2);
}
.collect-foot .ledger-skip { margin: 0; }
.collect-foot .ledger-skip > summary { font-size: 15px; color: var(--ink-2); }

/* drill-through row: back pill left, lifecycle timeline right — one line */
.ledger-monthbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.ledger-monthbar .ledger-timeline { margin-bottom: 0; }
/* drop zone — proper chrome around the hidden file input */
.dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 20px 16px; margin: 10px 0; cursor: pointer; text-align: center;
  border: 1.5px dashed var(--hairline-strong); border-radius: 12px;
  background: var(--panel); color: var(--ink-2); font-size: 12.5px;
}
.dropzone:hover, .dropzone.is-drag {
  border-color: var(--rose); background: var(--rose-soft); color: var(--ink);
}
.dropzone:focus-within {
  border-color: var(--rose); box-shadow: 0 0 0 2px var(--rose-soft);
}
.dropzone-input {
  position: absolute; width: 1px; height: 1px; opacity: 0;
  overflow: hidden; clip: rect(0 0 0 0);
}
.dropzone-icon { color: var(--rose-strong, var(--rose)); }
.dropzone-label strong { color: var(--ink); }
.dropzone-file {
  padding: 3px 10px; border-radius: 99px; background: var(--panel-2);
  border: 1px solid var(--hairline); color: var(--ink); font-weight: 600;
}
/* compact/inline drop zone (step 3): icon + text on one row */
.dropzone-inline {
  flex-direction: row; align-items: center; text-align: left; gap: 14px;
  padding: 18px 22px;
}
.dropzone-inline .dropzone-icon {
  flex: none; box-sizing: content-box; width: 22px; height: 22px;
  padding: 8px; border-radius: 50%; background: var(--rose-soft);
}
.dropzone-inline .dropzone-label { flex: 1 1 auto; }
/* skip affordances */
.ledger-skip, .ledger-reupload { margin-top: 14px; }
.ledger-skip > summary, .ledger-reupload > summary {
  cursor: pointer; color: var(--ink-2); font-size: 13px;
}
.ledger-skip-form {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-top: 10px;
}
.ledger-skip-form input { min-width: 320px; }
.ledger-pick { cursor: pointer; }
.ledger-pick-main { display: flex; gap: 12px; align-items: center; }
.ledger-pick input[type="checkbox"] {
  width: 17px; height: 17px; accent-color: var(--rose);
}
/* FLASK-55: a picked row SAYS so — full soft border + tint, house rules */
.ledger-pick:has(input:checked) {
  border-color: var(--rose); background: var(--rose-soft);
}
.ledger-pick:has(input:checked) .ledger-queue-month { color: var(--rose-strong, var(--rose)); }
.ledger-picked-line { font-variant-numeric: tabular-nums; }
.ledger-skipped { cursor: default; }
.ledger-skipped:hover { border-color: var(--hairline); }
.ledger-queue-meta form { display: inline; }

/* the full-screen grid editor — the review's repair surface */
.gridedit { position: fixed; inset: 0; z-index: 80; }
.gridedit-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); }
.gridedit-panel {
  position: absolute; inset: 18px; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.gridedit-form { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.gridedit-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap; padding: 16px 20px 12px;
  border-bottom: 1px solid var(--hairline);
}
.gridedit-head h2 { margin: 0 0 2px; font-family: var(--font-display); font-size: 18px; }
.gridedit-actions { display: flex; gap: 8px; align-items: center; }
.gridedit-scroll { flex: 1; overflow: auto; padding: 0 20px 16px; }
.gridedit-table thead th {
  position: sticky; top: 0; background: var(--panel); z-index: 2;
}
.gridedit-table tfoot td {
  position: sticky; bottom: 0; z-index: 2;
}
.gridedit-name input { text-align: left; min-width: 220px; }
@media (max-width: 700px) { .gridedit-panel { inset: 0; border-radius: 0; } }

/* ⋯ view-switcher menu (Money) — pure <details>, right-aligned panel */
.dots-menu { position: relative; }
.dots-menu > summary { list-style: none; cursor: pointer; font-size: 18px; line-height: 1; }
.dots-menu > summary::-webkit-details-marker { display: none; }
.dots-menu[open] > summary { background: var(--panel-2); border-radius: 8px; }
.dots-menu-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  min-width: 180px; display: flex; flex-direction: column; padding: 6px;
  background: var(--panel); border: 1px solid var(--hairline-strong);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.dots-menu-item {
  display: block; padding: 8px 12px; border-radius: 7px;
  color: var(--ink); text-decoration: none; font-size: 13.5px; font-weight: 500;
  white-space: nowrap;
}
.dots-menu-item:hover { background: var(--panel-2); }
.dots-menu-item.is-current { color: var(--rose-strong); font-weight: 700; }
.dots-menu-rule { border-top: 1px solid var(--hairline); margin: 5px 8px; }

/* time-slicer stepper — ‹ Month Year › with the label still a direct-jump
   dropdown; arrows step by the page's granularity */
.time-slicer-nav { display: flex; align-items: center; gap: 4px; }
.slicer-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  font-size: 17px; line-height: 1; color: var(--ink-muted);
  text-decoration: none; user-select: none;
}
a.slicer-arrow:hover { background: var(--panel-2); color: var(--ink); }
.slicer-arrow.is-disabled { opacity: 0.3; }

/* month picker as a dots-menu dropdown (no native select chrome) */
.time-slicer-menu > summary { font-size: 14px; }
.slicer-caret { margin-left: 7px; font-size: 11px; line-height: 1; }
.slicer-menu-list { left: 0; right: auto; max-height: 340px; overflow-y: auto; }
.slicer-menu-list .dots-menu-item { font-variant-numeric: tabular-nums; }

/* folded slicer dropdown: scrollable period list + persistent gran footer */
.slicer-menu-list { display: flex; flex-direction: column; max-height: 400px; overflow: hidden; }
.slicer-menu-scroll { overflow-y: auto; flex: 1 1 auto; }
.slicer-gran {
  flex: 0 0 auto; display: flex; gap: 2px; justify-content: center;
  border-top: 1px solid var(--hairline); margin-top: 6px; padding-top: 8px;
}
.slicer-gran .seg-btn { font-size: 12px; padding: 5px 10px; }

/* "you are here" hint — the period containing the anchor when browsing a
   list at another granularity (is-current stays the strong selected state) */
.dots-menu-item.is-here { background: var(--panel-2); font-weight: 600; }
.dots-menu-item.is-here::after {
  content: ""; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--rose); margin-left: 8px;
  vertical-align: 2px; opacity: 0.6;
}

/* Money mega-menu — one ⋯ control: Views | Reports | Pharmacy groups columns */
.mega-menu { flex-direction: row; align-items: stretch; gap: 6px; min-width: 0; }
.mega-col { display: flex; flex-direction: column; min-width: 150px; padding: 2px; }
.mega-col + .mega-col { border-left: 1px solid var(--hairline); padding-left: 10px; }
.mega-col-title {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-muted); padding: 6px 12px 4px;
}
.mega-sentence { font-size: 12.5px; font-weight: 600; margin-right: 8px; }
.mega-col-filter { min-width: 210px; }
.filter-options { overflow-y: auto; max-height: 300px; flex: 1 1 auto; }
.filter-option {
  display: flex; align-items: center; gap: 9px; padding: 6px 12px;
  font-size: 13px; color: var(--ink); cursor: pointer; border-radius: 7px;
}
.filter-option:hover { background: var(--panel-2); }
.filter-option input[type="checkbox"] { width: 16px; height: 16px; flex: none; }
.filter-actions {
  display: flex; justify-content: space-between; gap: 8px;
  border-top: 1px solid var(--hairline); margin-top: 6px; padding: 8px 6px 2px;
}
@media (max-width: 860px) { .mega-menu { flex-direction: column; } .mega-col + .mega-col { border-left: 0; padding-left: 2px; } }

/* page control cluster in the header's top-right (period pill, ⋯ menu, …) */
.topbar-controls {
  margin-left: auto; display: flex; align-items: center; gap: 10px;
  position: relative; z-index: 6;
}

/* ---------- Reports — quiet list + report blocks ---------- */
/* The inventory is a QUIET LIST — no thumbnails, no cards, no motion.
   A report page is a single readable column of blocks: kicker, a verdict in
   very few words, one clear subpoint, one calm visual (js/bitecharts.js),
   then careful related-report links, with short story transitions between
   blocks. Financial green-mono discipline: --fin carries the money story,
   --fin-neutral de-emphasizes, rose = negatives/gaps. */
.askbar { position: relative; margin-bottom: 20px; max-width: 560px; }
.askbar input {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 14px;
  padding: 10px 14px 10px 38px; border-radius: 11px;
  border: 1px solid var(--hairline-strong); background: var(--panel); color: var(--ink);
}
.askbar input::placeholder { color: var(--ink-muted); }
.askbar svg {
  position: absolute; left: 13px; top: 50%; translate: 0 -50%;
  width: 15px; height: 15px; color: var(--ink-muted); pointer-events: none;
}

/* ---- the quiet list ---- */
.rlist-wrap { max-width: 860px; }
.rlist-note { font-size: 12.5px; color: var(--ink-muted); margin: 0 0 14px; }
.rlist-section { margin-bottom: 26px; }
.rlist-family {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-muted); margin: 0 0 4px;
}
.rlist { list-style: none; margin: 0; padding: 0; }
.rlist-row {
  display: flex; align-items: center; gap: 12px; padding: 11px 4px;
  border-bottom: 1px solid var(--hairline);
}
.rlist-row:last-child { border-bottom: 0; }
.rlist-fav { display: flex; flex: none; }
.rlist-star {
  background: none; border: 0; cursor: pointer; padding: 2px; line-height: 1;
  font-size: 15px; color: var(--ink-muted);
}
.rlist-star:hover, .rlist-star.is-fav { color: var(--amber-strong); }
.rlist-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rlist-title { font-weight: 650; color: var(--ink); text-decoration: none; }
.rlist-title:hover { color: var(--rose-strong); }
.rlist-desc {
  font-size: 12.5px; color: var(--ink-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rlist-cadence { flex: none; font-size: 12px; color: var(--ink-muted); }
.rlist-cadence-link { color: var(--ink-2); text-decoration: none; }
.rlist-cadence-link:hover { color: var(--rose-strong); }
.rlist-cadence-link.is-default { font-weight: 650; }
@media (max-width: 700px) {
  .rlist-cadence { display: none; }
  .rlist-desc { white-space: normal; }
}

/* ---- report page: a readable column of blocks ---- */
.report-page { max-width: 1120px; }
.report-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.report-head-main { flex: 1; min-width: 0; }
.report-title { margin: 0; font-size: 24px; letter-spacing: -0.015em; }
.report-sub { margin: 3px 0 0; font-size: 13.5px; color: var(--ink-muted); }
.report-grouppick {
  display: flex; align-items: center; gap: 9px; margin-bottom: 14px;
  font-size: 12.5px; color: var(--ink-2);
}
.report-grouppick select {
  font: inherit; font-size: 13px; padding: 5px 9px; border-radius: 8px;
  border: 1px solid var(--hairline-strong); background: var(--panel); color: var(--ink);
}

.report-flow { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.blk {
  border: 1px solid var(--hairline-strong); border-radius: var(--radius-lg);
  background: var(--panel); padding: 24px 28px 20px;
  display: flex; flex-direction: column; gap: 9px; min-width: 0;
}
.blk-top { display: flex; align-items: center; gap: 8px; }
.blk-kicker {
  font-size: 10px; font-weight: 700; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--ink-muted);
}
.blk-remove {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  padding: 2px; font-size: 13px; color: var(--ink-muted);
}
.blk-remove:hover { color: var(--rose-strong); }
.blk-verdict { font-size: 27px; font-weight: 700; letter-spacing: -0.018em; line-height: 1.2; margin: 0; }
.blk-strong { font-weight: 750; }
.blk-em-up { color: var(--fin); }
.blk-em-down { color: var(--rose-strong); }
.blk-em-warn { color: var(--amber-strong); }
.blk-detail { font-size: 15px; line-height: 1.55; color: var(--ink-2); margin: 0; max-width: 62ch; }
.blk-detail .blk-strong { color: var(--ink); }
.blk-chart { margin-top: 10px; max-width: 560px; }
.blk-chart-stat { display: flex; align-items: baseline; gap: 10px; }
.blk-stat { font-size: 30px; font-weight: 750; letter-spacing: -0.02em; }
.blk-stat-cap { font-size: 11.5px; color: var(--ink-muted); }
.blk-related { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-muted); }
.blk-related a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--hairline-strong); }
.blk-related a:hover { color: var(--rose-strong); border-color: var(--rose-border); }
.blk-transition {
  display: flex; align-items: center; gap: 18px; margin: 22px 0 4px;
  font-size: 17px; font-style: italic; color: var(--ink-2); text-align: center;
}
.blk-transition::before, .blk-transition::after {
  content: ""; flex: 1; border-top: 1px solid var(--hairline-strong);
}
.blk-transition span { max-width: 56ch; flex: none; }

/* feature section — half-viewport chapter: text centered over the visual */
.blk-feature {
  min-height: min(48vh, 520px); justify-content: center; align-items: center;
  text-align: center; padding: 40px 48px 32px;
}
.blk-feature .blk-top { justify-content: center; }
.blk-feature .blk-verdict { font-size: 34px; }
.blk-feature .blk-detail { font-size: 16px; max-width: 68ch; }
.blk-feature .blk-chart { width: 100%; max-width: 780px; margin-top: 18px; }
.blk-feature .bite-svg { height: 168px; }
.blk-feature .bite-treemap { height: 120px; }
.blk-feature .bite-treemap-cell { font-size: 12px; padding: 6px 9px; }
.blk-feature .bite-hbars { max-width: 620px; margin: 0 auto; }
.blk-feature .bite-donut { justify-content: center; }
.blk-feature .bite-donut-svg { width: 96px; height: 96px; }
.blk-feature .bite-donut-big { font-size: 24px; }
.blk-feature .bite-bars-labels span { font-size: 11px; }
.blk-feature .bite-cap { text-align: center; }
.blk-feature .blk-chart-stat { justify-content: center; }

/* two-up row — a pair of half blocks sharing one line of the story */
.report-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch;
}
.report-row .blk { min-height: min(34vh, 380px); }
@media (max-width: 860px) {
  .report-row { grid-template-columns: 1fr; }
  .report-row .blk, .blk-feature { min-height: 0; }
}

/* ---- executive summary (Opus) ---- */
.exec-card {
  border: 1px solid var(--hairline-strong); border-radius: var(--radius-lg);
  background: var(--panel-2); padding: 20px 28px 16px; margin-bottom: 18px;
}
.exec-head { display: flex; align-items: center; gap: 10px; }
.exec-head h3 { margin: 0; font-size: 13px; flex: 1; }
.exec-body { margin-top: 8px; }
.exec-body p { margin: 0 0 8px; font-size: 15px; line-height: 1.6; max-width: 66ch; }
.exec-bullet { padding-left: 14px; position: relative; }
.exec-bullet::before { content: "–"; position: absolute; left: 0; color: var(--ink-muted); }
.exec-meta { margin: 4px 0 0; font-size: 11.5px; color: var(--ink-muted); }
.exec-hint { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-2); max-width: 62ch; }
.exec-error {
  margin: 8px 0 0; font-size: 12.5px; color: var(--error-ink);
  background: var(--rose-soft); border: 1px solid var(--rose-border);
  border-radius: 9px; padding: 7px 11px;
}

/* ---- block visuals (drawn by js/bitecharts.js) ---- */
.bite-svg { width: 100%; height: 84px; display: block; }
.bite-bars { width: 100%; }
.bite-bars-labels { display: flex; margin-top: 3px; }
.bite-bars-labels span {
  flex: 1; text-align: center; font-size: 10px; color: var(--ink-muted);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.bite-cap { font-size: 11.5px; color: var(--ink-muted); margin: 5px 0 0; }
.bite-donut { display: flex; align-items: center; gap: 12px; }
.bite-donut-svg { width: 74px; height: 74px; flex: none; }
.bite-donut-big { font-size: 19px; font-weight: 750; letter-spacing: -0.01em; }
.bite-donut-small { font-size: 11.5px; color: var(--ink-muted); }
.bite-hbars { display: flex; flex-direction: column; gap: 5px; width: 100%; }
.bite-hbar { display: grid; grid-template-columns: 130px 1fr 70px; gap: 10px; align-items: center; font-size: 12.5px; }
.bite-hbar-label { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bite-hbar-track { height: 11px; border-radius: 6px; background: var(--fin-soft); overflow: hidden; }
.bite-hbar-fill { display: block; height: 100%; border-radius: 5px; background: var(--fin-neutral); }
.bite-hbar-fill.is-hot { background: var(--fin); }
.bite-hbar-value { color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.bite-treemap { display: flex; gap: 2px; height: 84px; border-radius: 8px; overflow: hidden; width: 100%; align-items: stretch; }
.bite-treemap-col { display: flex; flex-direction: column; gap: 2px; }
.bite-treemap-cell {
  display: flex; align-items: flex-end; padding: 3px 6px; font-size: 10.5px;
  line-height: 1.1; font-weight: 600; min-width: 0; min-height: 0;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  background: var(--fin-ramp-lo); color: var(--ink-2);
}
.bite-treemap-cell.is-lead { background: var(--fin-ramp-hi); color: var(--page); }
.bite-treemap-cell.is-mid { background: var(--fin); color: var(--page); }

/* ---- my reports (the composer) ---- */
.report-new { display: flex; gap: 8px; align-items: center; }
.report-new input {
  font: inherit; font-size: 13px; padding: 7px 11px; border-radius: 9px;
  border: 1px solid var(--hairline-strong); background: var(--panel); color: var(--ink);
}
.report-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.report-row { display: flex; align-items: center; gap: 10px; padding: 10px 2px; }
.report-row + .report-row { border-top: 1px solid var(--hairline); }
.report-row-link { flex: 1; min-width: 0; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 2px; }
.report-row-link:hover .report-row-title { color: var(--rose-strong); }
.report-row-title { font-weight: 650; }
.report-row-meta { font-size: 12px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.report-layout { display: grid; grid-template-columns: 1fr 250px; gap: 18px; align-items: start; }
.report-rail {
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--panel-2); padding: 14px; font-size: 12.5px;
  position: sticky; top: 12px; display: flex; flex-direction: column; gap: 5px;
}
.report-rail-title {
  margin: 0 0 2px; font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--ink-muted);
}
.report-rail-sub { margin: 0 0 8px; color: var(--ink-2); }
.report-rail-add {
  width: 100%; box-sizing: border-box; text-align: left; font: inherit;
  border: 1px dashed var(--hairline-strong); background: none; border-radius: 9px;
  padding: 7px 10px; font-size: 12.5px; color: var(--ink-2); cursor: pointer;
}
.report-rail-add:hover { border-color: var(--fin); color: var(--fin); }
@media (max-width: 900px) { .report-layout { grid-template-columns: 1fr; } .report-rail { position: static; } }