/*
 * Portal design system. Two shells share one set of tokens:
 *   layout-sidebar  manufacturer network pages (left page list, white canvas, table-style cards)
 *   layout-topbar   sites, practices and admins (wordmark + tabs, grey canvas, white cards)
 */
:root {
  --text: #1d1f24;
  --muted: #5b6570;
  --muted-2: #6b6f76;
  --th: #4d5157;
  --border: #e5e5e5;
  --border-strong: #dcdee1;
  --canvas: #f4f6f8;
  --surface: #ffffff;
  --sidebar: #f8f8f8;
  --sidebar-active: #e6e8ec;
  --head: #f8f8f8;

  /* Brand cyan (Veriscope and Third Rail): fills, borders, active states and highlights. */
  --brand: #00c4d9;
  --badge: #00c4d9;
  --teal: #00c4d9;
  --teal-dark: #00a9bb;
  --teal-soft: #e0f8fb;
  /* Cyan text on white is too faint to read at body size, so text uses a deeper shade of the same hue; ink sits on cyan fills. */
  --teal-ink: #007c8a;
  --on-teal: #04232a;

  /* Dark sidebar */
  --side-bg: #0e1a22;
  --side-text: #dce6eb;
  --side-muted: #7f93a0;
  --side-line: rgba(255, 255, 255, 0.08);
  --side-hover: rgba(255, 255, 255, 0.06);
  --side-active: rgba(0, 196, 217, 0.16);
  --red: #b32418;
  --red-soft: #fcefec;
  --green: #1e7a46;
  --green-soft: #e7f5ee;
  --callout: #f4f8f9;
  --line: #dce1e5;
  --select: #eef4ff;
  --select-edge: #2e7ff9;
  --bar: #2e7ff9;
  --track: #f2f2f2;

  /* Table-style pills (network pages) */
  --p-red: #ffdce0;    --p-red-text: #7a1520;
  --p-green: #d0f7c5;  --p-green-text: #2d6a1f;
  --p-teal: #c9f4f9;   --p-teal-text: #035e69;
  --p-amber: #feeab6;  --p-amber-text: #6c4e00;
  --p-blue: #cfdfff;   --p-blue-text: #213f78;
  --p-grey: #eeeeee;   --p-grey-text: #444444;

  --radius: 8px;
  --radius-lg: 10px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-feature-settings: "cv11", "ss01";
  color: var(--text);
  background: var(--canvas);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--canvas); font-size: 15px; line-height: 1.45; color: var(--text); }
body.layout-sidebar { background: var(--surface); }
a { color: var(--teal-ink); }
[hidden] { display: none !important; }

/* --- Shell ------------------------------------------------------------------- */

/* Admin previewing a manufacturer's portal: a thin bar above everything. */
.preview-banner { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; background: #fff4d6; color: #5c4300; border-bottom: 1px solid #f0d78c; padding: 6px 16px; font-size: 14px; text-align: center; }
.preview-banner .button { padding: 3px 10px; font-size: 13.5px; }

.shell { min-height: 100vh; }
.layout-sidebar .shell { display: grid; grid-template-columns: 262px minmax(0, 1fr); }
.frame { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }

.sidebar { background: var(--side-bg); color: var(--side-text); border-right: 1px solid var(--side-bg); padding: 0 9px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.sidebar-head { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; min-height: 72px; padding: 12px 9px; border-bottom: 1px solid var(--side-line); margin: 0 0 24px; }
.sidebar-logo { height: auto; display: block; }
.sidebar-logo.logo-vs { width: 168px; }
.sidebar-logo.logo-tr { width: 150px; }
.sidebar-name { color: var(--side-muted); font-size: 13.5px; font-weight: 500; line-height: 1.3; }
.sidebar-label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; color: var(--side-muted); padding: 0 9px; margin: 0 0 10px; text-transform: uppercase; }
.sidebar nav { display: grid; gap: 1px; }
.sidebar nav a { display: flex; align-items: center; gap: 12px; padding: 7px 9px; border-radius: 7px; color: var(--side-text); text-decoration: none; font-size: 15.5px; }
.sidebar nav a::before { content: ""; width: 15px; height: 15px; border: 1.5px solid #4f6370; border-radius: 3px; flex: none; background: transparent; }
.sidebar nav a:hover { background: var(--side-hover); }
.sidebar nav a[aria-current="page"] { background: var(--side-active); color: #ffffff; font-weight: 600; }
.sidebar nav a[aria-current="page"]::before { border-color: var(--teal); background: var(--teal); }

.topbar { display: flex; align-items: center; gap: 28px; background: var(--surface); border-bottom: 1px solid var(--border); padding: 0 max(24px, calc((100vw - 1432px) / 2)); height: 69px; flex-wrap: wrap; }
.layout-sidebar .topbar { height: 57px; padding: 0 28px 0 32px; gap: 16px; }
.wordmark { font-size: 28px; font-weight: 500; letter-spacing: 0.1em; color: var(--brand); text-decoration: none; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.layout-sidebar .wordmark { font-size: 22px; }
.wordmark.long { font-size: 20px; letter-spacing: 0.08em; }
.wordmark img { display: block; width: auto; }
.wordmark img.logo-vs { height: 24px; }
.wordmark img.logo-tr { height: 40px; }
.logo-in-sidebar .topbar .wordmark { visibility: hidden; }
#nav { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
.layout-sidebar #nav { display: none; }
#nav a { padding: 8px 18px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 15.5px; font-weight: 500; }
#nav a:hover { background: #f1f4f6; }
#nav a[aria-current="page"] { color: var(--teal-ink); background: var(--teal-soft); }
.account { display: flex; gap: 12px; align-items: center; color: var(--muted); font-size: 15px; margin-left: auto; position: relative; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: #14161b; color: #fff; border: none; display: grid; place-items: center; font-weight: 600; font-size: 14px; letter-spacing: 0.02em; padding: 0; cursor: pointer; }
.avatar:hover { background: #2a2d34; }
.layout-sidebar .avatar { width: 32px; height: 32px; font-size: 12.5px; background: #e8e3f5; color: #4a3b8f; }
.layout-sidebar .avatar:hover { background: #ddd6f0; }
.menu { position: absolute; right: 0; top: calc(100% + 8px); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(20, 22, 27, 0.12); padding: 12px; min-width: 220px; z-index: 20; display: grid; gap: 10px; }
.menu .who { font-size: 13.5px; color: var(--muted); word-break: break-all; }
.menu nav { display: grid; }
.menu nav:empty { display: none; }
.menu nav a { color: var(--text); text-decoration: none; padding: 6px 2px; font-size: 15px; }
.menu nav a:hover, .menu nav a[aria-current="page"] { color: var(--teal-ink); }

main { width: 100%; max-width: 1480px; margin: 0 auto; padding: 36px 24px 64px; }
.layout-sidebar main { max-width: none; margin: 0; padding: 26px 28px 48px 34px; }
.layout-sidebar main.panes { padding: 0; display: grid; grid-template-columns: 382px minmax(0, 1fr); flex: 1; }
/* Pane pages: the list runs full height beside the sidebar; the top bar sits over the detail only. */
.pane-right { min-width: 0; display: flex; flex-direction: column; }
.pane-right .topbar { padding: 0 28px 0 34px; }
.pane-page .avatar { display: none; }
main:focus { outline: none; }

/* --- Type -------------------------------------------------------------------- */

h1 { font-size: 28px; font-weight: 600; margin: 0 0 4px; letter-spacing: -0.015em; line-height: 1.2; }
.layout-sidebar h1 { font-size: 26px; }
h2 { font-size: 16px; font-weight: 600; margin: 0 0 12px; }
h3 { font-size: 16px; font-weight: 600; margin: 0; }
.subtitle { color: var(--muted); margin: 0 0 22px; font-size: 16px; }
.layout-sidebar .subtitle { color: var(--muted-2); }
.muted { color: var(--muted); }
.small { font-size: 13.5px; }
.lead { font-size: 16px; margin: 0; }
h2.section { margin: 28px 0 12px; }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; background: var(--canvas); padding: 2px 6px; border-radius: 4px; }
.num { font-variant-numeric: tabular-nums; }
.red { color: var(--red); }
.teal { color: var(--teal-ink); }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-ink); }

/* --- Layout helpers ------------------------------------------------------------ */

.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.page-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.page-head .subtitle { margin: 0; }
.page-head > :first-child { flex: 1; min-width: 240px; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-bottom: 16px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 362px; gap: 28px; align-items: start; }
.split > aside { display: grid; gap: 24px; }
.overview-mid { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 16px; margin-bottom: 20px; align-items: stretch; }
.overview-low { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }

/* --- Cards and tiles ------------------------------------------------------------ */

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 24px; margin-bottom: 18px; }
.grid .card, .pair .card, .overview-mid .card, .overview-low .card, .split .card { margin-bottom: 0; }
.layout-sidebar .card { border-radius: 9px; }
/* A card with a titled header bar and flush content (tables, lists). */
.panel { padding: 0; overflow: hidden; }
.panel-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; min-height: 52px; }
.panel-head h2 { margin: 0; font-size: 16px; }
.panel-head .aside { margin-left: auto; color: var(--muted-2); font-size: 14.5px; }
.panel.ruled > .panel-head { border-bottom: 1px solid var(--border); }
.layout-topbar .panel-head { padding: 20px 26px; }
.panel-body { padding: 18px 20px 20px; }
.layout-topbar .panel-body { padding: 20px 26px; }

.tiles { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 22px; }
.tiles .card, .tile { margin: 0; padding: 18px 20px 20px; border-radius: 9px; }
.layout-topbar .tile { padding: 22px 22px 20px; }
.tile-label { color: var(--muted); font-size: 15px; margin-bottom: 6px; line-height: 1.3; }
.stat { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.layout-sidebar .stat { font-size: 36px; }
.layout-topbar .tile-label { font-size: 14px; }
.layout-topbar .tile .stat { font-size: 27px; }
.tiles .stat { margin-top: 8px; }
.tile-detail { color: var(--muted-2); font-size: 14px; margin-top: 4px; line-height: 1.3; }
/* A word in place of a number (the plan tier): same weight, smaller. */
.stat.stat-text, .layout-sidebar .stat.stat-text { font-size: 23px; padding-top: 6px; line-height: 1.2; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.fact-value { font-weight: 600; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 4px 0 22px; }
.metric-label { display: flex; align-items: center; gap: 6px; color: var(--muted-2); font-size: 14.5px; margin-bottom: 4px; }
.metric-value { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* --- Buttons and forms ------------------------------------------------------------ */

button, .button {
  font: inherit; font-weight: 600; border: 1px solid var(--teal); background: var(--teal); color: var(--on-teal);
  padding: 9px 18px; border-radius: 6px; cursor: pointer; text-decoration: none; display: inline-block; line-height: 1.35; font-size: 15.5px;
}
button:hover, .button:hover { background: var(--teal-dark); border-color: var(--teal-dark); }
button.secondary, .button.secondary, button.outline, .button.outline { background: var(--surface); color: var(--teal-ink); border-color: var(--teal); }
button.secondary:hover, .button.secondary:hover, button.outline:hover, .button.outline:hover { background: var(--teal-soft); }
button.quiet, .button.quiet { background: var(--surface); color: var(--text); border-color: var(--border-strong); font-weight: 500; padding: 5px 11px; font-size: 14.5px; }
button.quiet:hover, .button.quiet:hover { background: #f4f5f6; border-color: #cfd2d6; }
button.link { background: none; border: none; color: var(--teal-ink); padding: 0; font-weight: 500; }
button:disabled { opacity: 0.55; cursor: not-allowed; }

form.stack, .stack { display: grid; gap: 12px; max-width: 460px; }
label { display: grid; gap: 6px; font-weight: 500; font-size: 15px; }
input, select, textarea { font: inherit; font-size: 15px; padding: 10px 14px; border: 1px solid var(--border-strong); border-radius: 6px; background: #fff; color: var(--text); }
input::placeholder, textarea::placeholder { color: #8a929b; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.checkbox { display: flex; gap: 8px; align-items: center; font-weight: 400; }
textarea { resize: vertical; }

/* Filter chips: a labelled select that looks like a button. */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-strong); border-radius: 6px; padding: 0 0 0 12px; font-weight: 400; font-size: 15px; color: var(--muted-2); background: var(--surface); height: 34px; }
.chip select { border: none; padding: 0 12px 0 0; background: transparent; color: var(--text); font-size: 15px; appearance: none; cursor: pointer; height: 100%; }
.chip select:focus { outline: none; }
.chip:focus-within { outline: 2px solid var(--teal); outline-offset: 1px; }

/* --- Tables ---------------------------------------------------------------------- */

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th { text-align: left; font-weight: 500; color: var(--th); font-size: 15px; background: var(--head); white-space: nowrap; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
tr:last-child td { border-bottom: none; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
td.rownum { color: #9a9ea5; width: 1%; text-align: center; padding-left: 14px; padding-right: 14px; }
/* Grid tables (network pages): vertical rules, column-type glyphs. */
table.grid-table th, table.grid-table td { border-right: 1px solid var(--border); padding: 11px 12px; vertical-align: middle; }
table.grid-table th:last-child, table.grid-table td:last-child { border-right: none; }
table.grid-table thead th { border-top: 1px solid var(--border); }
table.nowrap td { white-space: nowrap; }
table.nowrap td.wrap { white-space: normal; min-width: 170px; }
.ft { color: #9a9ea5; font-size: 12px; margin-right: 6px; font-weight: 500; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--select); }

/* --- Pills ------------------------------------------------------------------------ */

.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 14.5px; font-weight: 500; background: var(--p-grey); color: var(--p-grey-text); white-space: nowrap; line-height: 1.45; border: none; }
.pill.red, .pill.error { background: var(--p-red); color: var(--p-red-text); }
.pill.green, .pill.ok { background: var(--p-green); color: var(--p-green-text); }
.pill.teal { background: var(--p-teal); color: var(--p-teal-text); }
.pill.amber { background: var(--p-amber); color: var(--p-amber-text); }
.pill.blue, .pill.accent { background: var(--p-blue); color: var(--p-blue-text); }
/* Site report pills: softer, bolder. */
.layout-topbar .pill { font-weight: 600; font-size: 14.5px; padding: 3px 12px; }
.layout-topbar .pill.red, .layout-topbar .pill.error { background: var(--red-soft); color: var(--red); }
.layout-topbar .pill.green, .layout-topbar .pill.ok { background: var(--green-soft); color: var(--green); }
.layout-topbar .pill.teal, .layout-topbar .pill.accent { background: var(--teal-soft); color: var(--teal-ink); }

/* --- Network pages ------------------------------------------------------------------ */

.stops { list-style: none; margin: 0; padding: 0; }
.stops li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--border); }
.stops li:first-child { border-top: none; }
.stops .title { font-weight: 600; font-size: 15.5px; }
.stops .detail { color: var(--muted-2); font-size: 14.5px; line-height: 1.35; }
.stops .count { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }

.bars { display: grid; gap: 9px; }
.bars .bar-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 34px; gap: 14px; align-items: center; font-size: 15px; }
.bars .track { height: 18px; background: var(--track); border-radius: 2px; overflow: hidden; }
.bars .fill { height: 100%; background: var(--teal); border-radius: 2px; }
.bars .n { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.bars-note { color: var(--muted-2); font-size: 14.5px; margin: 14px 0 0; }

.list { list-style: none; margin: 0; padding: 0; }
.list > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--border); }
.list > li:first-child { border-top: none; }
.list .title { font-weight: 600; }
.list .detail { color: var(--muted-2); font-size: 14.5px; line-height: 1.35; }
.layout-topbar .list > li { padding: 14px 26px; }
.layout-topbar .list .detail { color: var(--muted); }

/* Network overview: four KPI tiles, a recovered-dollars band, three charts, the sites table */
.kpis { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 16px; }
.kpis.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpis.five .stat { font-size: 34px; }
.kpis .tile { padding: 20px 22px 22px; }
.kpis .stat { font-size: 40px; font-weight: 700; margin-top: 6px; }
.kpis .stat.red { color: var(--red); }
.tile.recovered { background: #e9f7ee; border-color: #c4ead2; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 18px 22px; margin-bottom: 20px; }
.tile.recovered .tile-label { color: #1e6b3d; font-weight: 600; margin: 0; }
.tile.recovered .stat { color: #1e7a46; font-size: 34px; font-weight: 700; margin: 0; }
.tile.recovered .tile-detail { color: #3d7a55; margin: 0; }
/* Nothing recovered: a neutral band with a grey dash, never green. */
.tile.recovered.none { background: var(--surface); border-color: var(--border); }
.tile.recovered.none .tile-label, .tile.recovered.none .stat, .tile.recovered.none .tile-detail { color: var(--muted-2); }
.charts { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 20px; align-items: stretch; }
.charts .card { margin-bottom: 0; }
.donut-wrap { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; align-items: center; padding: 6px 20px 22px; }
.donut { width: 150px; height: 150px; display: block; }
.donut .total { font: 700 15px Inter, sans-serif; fill: var(--text); }
.donut .total-label { font: 500 9px Inter, sans-serif; fill: var(--muted-2); letter-spacing: 0.04em; text-transform: uppercase; }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; }
.legend li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.legend .swatch { width: 12px; height: 12px; border-radius: 3px; }
.legend .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend .val { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.legend .pct { color: var(--muted-2); font-weight: 500; margin-left: 6px; }
.hbars { display: grid; gap: 10px; padding: 6px 20px 22px; }
.hbar { display: grid; grid-template-columns: 70px minmax(0, 1fr) 30px; gap: 12px; align-items: center; font-size: 14.5px; }
.hbar .hbar-code { font-weight: 600; font-variant-numeric: tabular-nums; }
.hbar .track { height: 18px; background: var(--track); border-radius: 3px; overflow: hidden; }
.hbar .fill { height: 100%; background: var(--teal); border-radius: 3px; }
.hbar .n { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.chart-empty { padding: 6px 20px 22px; margin: 0; }

/* Claims: list pane and detail pane */
.pane-list { border-right: 1px solid var(--border); min-height: 100vh; }
.pane-list .pane-head { padding: 16px 20px 18px; border-bottom: 1px solid var(--border); }
.pane-list .pane-head h1 { font-size: 19px; margin: 0 0 12px; }
.items { list-style: none; margin: 0; padding: 0; }
.items a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 14px 20px 14px 18px; border-bottom: 1px solid var(--border); border-left: 3px solid transparent; color: var(--text); text-decoration: none; }
.items a:hover { background: #f7f9fc; }
.items a[aria-current="true"] { background: var(--select); border-left-color: var(--select-edge); }
.items .id { font-weight: 600; font-size: 16px; letter-spacing: 0.01em; }
.items .meta { grid-column: 1 / -1; color: var(--muted-2); font-size: 15px; }
.pane-detail { padding: 22px 34px 40px; min-width: 0; }
.detail-head { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 16px; }
.detail-head > :first-child { flex: 1; min-width: 200px; }
.detail-head h1 { letter-spacing: 0.01em; }
.kv { margin: 0; display: grid; grid-template-columns: 178px minmax(0, 1fr); gap: 8px 16px; padding: 18px 20px 20px; font-size: 15.5px; }
.kv dt { color: var(--muted-2); }
.kv dd { margin: 0; min-width: 0; }
/* Long contradiction labels wrap inside the panel instead of running past it. */
.kv dd .pill { white-space: normal; }
.prose { padding: 18px 20px 22px; margin: 0; font-size: 16px; line-height: 1.6; }
.withheld { color: var(--muted-2); font-style: italic; }

/* --- Practice dashboard ------------------------------------------------------------------ */

.dash { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 16px; align-items: start; }
.dash .card, .dash-side .card { margin-bottom: 0; }
.dash-side { display: grid; gap: 16px; }
.dash .list a.title { color: var(--text); text-decoration: none; }
.dash .list a.title:hover { color: var(--teal-ink); text-decoration: underline; }
.panel-head .aside a { color: var(--teal-ink); font-weight: 500; text-decoration: none; }
.panel-head .aside a:hover { text-decoration: underline; }
.panel-note:not(:empty) { padding: 0 20px 14px; }
button[aria-busy="true"] { opacity: 0.6; cursor: progress; }
.dash-side .panel-body { padding-top: 2px; }
.dash table.nowrap td.wrap { min-width: 150px; }
.copy-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.copy-row .code { font-size: 14px; padding: 6px 10px; word-break: break-all; }
button.small, .button.small { padding: 5px 12px; font-size: 14px; }

/* --- Site report ---------------------------------------------------------------------- */

.new { font-size: 14.5px; font-weight: 600; color: var(--teal-ink); background: var(--teal-soft); border-radius: 999px; padding: 2px 11px; vertical-align: middle; margin-left: 10px; letter-spacing: 0; }
.patient { padding: 0; overflow: hidden; }
.split .report-main > .card { margin-bottom: 20px; }
.claim-block { margin-bottom: 18px; }
.patient-body.short .said { margin-bottom: 0; }
.patient-head { display: flex; gap: 12px; align-items: flex-start; padding: 20px 26px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.patient-head > :first-child { flex: 1; min-width: 200px; }
.patient-head h3 { font-size: 18px; }
.patient-head .muted { font-size: 15.5px; }
.patient-body { padding: 20px 26px 22px; }
.patient-foot { display: flex; gap: 12px; align-items: center; padding: 16px 26px; border-top: 1px solid var(--border); flex-wrap: wrap; font-size: 16px; }
.patient-foot .spacer { min-width: 12px; }

.stepper { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 4px 0 22px; text-align: center; }
.step { position: relative; display: grid; justify-items: center; gap: 2px; font-size: 15px; color: var(--muted); padding: 0 4px; }
.step .dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--teal); background: var(--surface); position: relative; z-index: 1; margin-bottom: 6px; }
.step.bad .dot { background: var(--red); border-color: var(--red); }
.step.warn .dot { border: 2px dashed #8e959d; }
.step::before { content: ""; position: absolute; top: 6px; right: calc(50% + 20px); left: calc(-50% + 20px); height: 3px; background: var(--line); }
.step:first-child::before { display: none; }
.step.bad::before, .step.after-bad::before { background: var(--red); }
.step .caption { color: var(--muted); line-height: 1.3; }

.said { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.said .label { color: var(--muted); font-size: 15px; }
.said .value { font-weight: 600; font-size: 16.5px; line-height: 1.35; }
.said .value.red { color: var(--red); }
.said .value.teal { color: var(--teal-ink); }

.argument { background: var(--callout); border-left: 4px solid var(--teal); border-radius: 0 6px 6px 0; padding: 16px 22px 18px; }
.argument .eyebrow { margin-bottom: 4px; }
.argument p { margin: 0; font-size: 16.5px; line-height: 1.45; }

.dropzone {
  border: 1.5px dashed #b9c0c7; border-radius: 6px; background: var(--surface);
  padding: 32px 20px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s;
}
.dropzone.over, .dropzone:hover { border-color: var(--teal); background: var(--teal-soft); }
.dropzone strong { display: block; font-size: 17px; margin-bottom: 4px; }
.dropzone span { color: var(--muted); font-size: 16px; }

/* --- Notices, misc ------------------------------------------------------------------- */

.notice { padding: 12px 14px; border-radius: 6px; margin: 12px 0; font-size: 15px; }
.notice.error { background: var(--red-soft); color: var(--red); }
.notice.ok { background: var(--green-soft); color: var(--green); }
.toast { position: fixed; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); background: #14161b; color: #fff; padding: 10px 16px; border-radius: 6px; font-size: 14.5px; z-index: 30; }
.empty { padding: 40px 20px; text-align: center; color: var(--muted); }

.claim-card ul, .card ol { margin: 8px 0 0; padding-left: 20px; }
.claim-card li, .card ol li { margin-bottom: 4px; }
.callout { border-left: 4px solid var(--border); }
.callout.accent { border-left-color: var(--teal); background: linear-gradient(90deg, var(--teal-soft), var(--surface) 40%); }
.callout h2 { margin: 2px 0 6px; }
.callout p { margin: 0; }
ol.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
ol.timeline::before { content: ""; position: absolute; left: 44px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
ol.timeline li { display: grid; grid-template-columns: 76px 1fr auto; gap: 12px; align-items: start; padding: 10px 0; position: relative; }
ol.timeline li::before { content: ""; position: absolute; left: 40px; top: 16px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--teal); }
ol.timeline .day { font-weight: 600; color: var(--muted); font-size: 13px; padding-top: 2px; }
ol.timeline .event { padding-left: 8px; }
blockquote { margin: 0 0 12px; padding: 8px 12px; border-left: 3px solid var(--border); background: var(--canvas); border-radius: 0 6px 6px 0; }
blockquote p { margin: 0 0 4px; }
cite { color: var(--muted); font-size: 12.5px; font-style: normal; }
.plan.highlight { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal) inset; }
.plan .stat span { font-size: 14px; font-weight: 500; }
.legal { max-height: 360px; overflow-y: auto; font-size: 14px; }

/* --- Narrow screens ---------------------------------------------------------------------- */

/* The activity table needs about 900px; below that width the side panels move under it. */
@media (max-width: 1600px) {
  .dash { grid-template-columns: minmax(0, 1fr); }
  .dash-side { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
}
/* Two donuts side by side, the bar chart across the full width under them. */
@media (max-width: 1440px) {
  .charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .charts > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 1280px) {
  .overview-mid { grid-template-columns: minmax(0, 1fr); }
  .overview-low { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 1080px) {
  /* Stacked: top bar, then the list, then the detail. */
  .layout-sidebar main.panes { display: flex; flex-direction: column; }
  .pane-right { display: contents; }
  .pane-right .topbar { order: -1; }
  .pane-detail { order: 1; }
  .pane-list { min-height: 0; border-right: none; border-bottom: 1px solid var(--border); }
  .split { grid-template-columns: minmax(0, 1fr); }
  .said, .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .kpis, .kpis.five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .charts { grid-template-columns: minmax(0, 1fr); }
  .layout-sidebar .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--side-bg); padding-bottom: 10px; }
  .sidebar-head { min-height: 60px; margin-bottom: 12px; }
  .sidebar nav { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .overview-low, .pair { grid-template-columns: minmax(0, 1fr); }
  .topbar { height: auto; padding-block: 12px; gap: 10px 14px; }
  /* Wordmark and account on one line, the tabs on their own scrolling line below. */
  #nav { order: 3; flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; }
  #nav a { padding: 7px 14px; white-space: nowrap; }
  .account > span { display: none; }
  .wordmark { font-size: 22px; }
  .stepper { grid-auto-flow: row; grid-auto-columns: auto; text-align: left; gap: 10px; }
  .step { grid-template-columns: 20px auto 1fr; justify-items: start; align-items: center; gap: 10px; }
  .step .dot { margin: 0; }
  .step::before { display: none; }
  .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .kv dd { margin-bottom: 10px; }
}
@media (max-width: 520px) {
  .donut-wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .legend { width: 100%; }
  /* Phone: the three counts on one row, open dollars (the widest number) on its own row. */
  .kpis, .kpis.five { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .kpis .tile { padding: 14px 14px 16px; }
  .kpis .tile-label { font-size: 13.5px; }
  .kpis .stat { font-size: 28px; }
  .kpis .tile:last-child { grid-column: 1 / -1; }
  main, .layout-sidebar main { padding: 22px 16px 48px; }
  .pane-detail { padding: 20px 16px 36px; }
  .said, .metrics { grid-template-columns: minmax(0, 1fr); }
  .stat, .layout-sidebar .stat { font-size: 28px; }
}

/* ===== Manufacturer pages (/m/*) ===================================================== */
.coral { color: #c8312b; }
.green { color: var(--green); }
.grey { color: #8a939b; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; font-size: 13px; color: var(--muted); }
.crumbs li + li::before { content: '›'; margin-right: 6px; color: #a9b4bd; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--teal-ink); text-decoration: underline; }
.crumbs [aria-current] { color: var(--text); font-weight: 500; }

a.link, .card.link { color: inherit; text-decoration: none; transition: border-color .12s, box-shadow .12s, background .12s; }
.card.link:hover { border-color: var(--brand); box-shadow: 0 2px 10px rgba(0, 196, 217, .14); }
.card.link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Period selector */
.period { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; }
.seg-btn { background: var(--surface); color: var(--text); border: 0; border-radius: 0; padding: 7px 12px; font-weight: 500; }
.seg-btn + .seg-btn { border-left: 1px solid var(--border-strong); }
.seg-btn:hover { background: var(--teal-soft); color: var(--text); }
.seg-btn[aria-pressed="true"] { background: var(--brand); color: var(--on-teal); }
.period-body { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.period-body select { width: auto; padding: 6px 8px; }
.month-year { display: inline-flex; align-items: center; gap: 4px; }

/* Health card and KPI tiles */
.overview-top { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 16px; margin-bottom: 16px; }
.health-card { padding: 18px 20px; }
.health-top { display: flex; gap: 16px; align-items: center; }
.health-score { font-size: 34px; font-weight: 700; display: flex; align-items: baseline; gap: 6px; }
.health-score .of { font-size: 15px; color: var(--muted); font-weight: 500; }
.driven { margin: 12px 0 8px; font-weight: 500; }
.components summary { cursor: pointer; color: var(--teal-ink); font-size: 13px; }
.components summary:hover { text-decoration: underline; }
table.mini { width: 100%; font-size: 13px; margin-top: 6px; }
table.mini td { padding: 4px 6px; border-bottom: 1px solid var(--border); }
.kpis.six { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.kpi { display: block; }
.kpi .stat { font-size: 30px; }
.kpi .stat.coral { color: #c8312b; }
.kpi.green { background: var(--green-soft); border-color: #bfe3cd; }
.kpi .stat.green { color: var(--green); }
.kpi.none { background: var(--surface); }
.delta { display: inline-flex; align-items: center; gap: 2px; font-size: 12.5px; font-weight: 600; margin-top: 4px; }
.delta.up { color: var(--green); }
.delta.down { color: #c8312b; }
.delta.flat { color: #8a939b; }
.delta-text { font-weight: 500; }

/* Rings, sparklines */
.ring { display: inline-flex; flex: none; }
.ring-num { font: 700 15px Inter, sans-serif; fill: var(--text); }
.spark { display: block; }

/* Site and payer cards */
.site-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; padding: 4px 16px 16px; }
.site-grid.wide { padding: 0; margin-bottom: 16px; }
.site-card, .payer-card { display: block; padding: 14px 16px; }
.site-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.site-code, .payer-name { font-weight: 700; font-size: 16px; margin-bottom: 6px; }
.site-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 8px; }
.site-facts.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-facts dt { font-size: 12px; color: var(--muted); }
.site-facts dd { margin: 2px 0 0; font-weight: 600; }
.site-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--border); padding-top: 8px; }

/* Layout rows */
.cols-2, .cols-3 { display: grid; gap: 16px; margin-bottom: 16px; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-site { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 16px; margin-bottom: 16px; align-items: start; }
.stack-col { display: grid; gap: 16px; align-content: start; }
.layout-sidebar main > .card, .layout-sidebar main > section.panel { margin-bottom: 16px; }
.cols-2 > .card, .cols-3 > .card, .stack-col > .card, .cols-site > .card { margin: 0; }
.panel-sub { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.pin { background: none; border: 0; color: #a9b4bd; padding: 0 0 0 8px; font-size: 16px; line-height: 1; }
.pin:hover, .pin.on { background: none; color: var(--brand); }

/* Activity feed */
.feed { list-style: none; margin: 0; padding: 0 0 6px; }
.feed-row { display: grid; grid-template-columns: 10px 1fr auto 96px; gap: 10px; align-items: center; padding: 9px 16px; border-top: 1px solid var(--border); }
.feed li:first-child .feed-row { border-top: 0; }
.feed-row:hover { background: var(--teal-soft); }
.feed-when { text-align: right; font-size: 12.5px; }
.feed-amt { font-variant-numeric: tabular-nums; font-weight: 600; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #a9b4bd; }
.dot.denied, .dot.upheld { background: #e5484d; }
.dot.paid, .dot.overturned { background: #46a758; }
.dot.appeal_filed { background: #2e7ff9; }
.dot.auth_approved { background: var(--brand); }
.hbar.link { text-decoration: none; color: inherit; border-radius: 6px; }
.hbar.link:hover { background: var(--teal-soft); }

/* Site page */
.site-header { display: flex; gap: 18px; align-items: center; padding: 16px 20px; flex-wrap: wrap; }
.site-header-main { flex: 1; min-width: 260px; display: grid; gap: 8px; }
.site-header-main h2 { margin: 0; font-size: 20px; }
.row.payer-pills { gap: 6px; }
a.pill.link:hover { filter: brightness(.95); text-decoration: underline; }
.header-facts { display: flex; gap: 28px; margin: 0; flex-wrap: wrap; }
.header-facts dt { font-size: 12px; color: var(--muted); }
.header-facts dd { margin: 2px 0 0; font-size: 20px; font-weight: 700; }
.breakdown { display: grid; gap: 12px; padding: 4px 16px 16px; }
.breakdown.compact { padding: 8px 0 0; }
.comp-label { font-size: 13px; font-weight: 500; }
.comp-track { position: relative; height: 8px; background: var(--track); border-radius: 4px; margin: 5px 0 3px; }
.comp-fill { height: 100%; background: var(--brand); border-radius: 4px; }
.comp-mark { position: absolute; top: -3px; width: 2px; height: 14px; background: #1f3a5f; }
.comp-val { font-size: 13px; }
.month-tabs { display: flex; gap: 4px; padding: 0 16px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.month-tab { padding: 9px 12px; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.month-tab:hover { color: var(--text); background: var(--teal-soft); }
.month-tab[aria-selected="true"] { color: var(--text); font-weight: 600; border-bottom-color: var(--brand); }
.live-badge { background: #e5484d; color: #fff; border-radius: 4px; font-size: 10.5px; font-weight: 700; padding: 1px 5px; text-transform: uppercase; letter-spacing: .04em; }
.feed-summary { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; padding: 12px 16px; background: var(--callout); border-bottom: 1px solid var(--border); }
.fs-val { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.feed-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 16px; }
.layout-sidebar main > .feed-tools { padding: 0 0 12px; }
.feed-tools .spacer { flex: 1; }
.panel-note-text { padding: 8px 16px 12px; margin: 0; }
a.serial, .serial { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; letter-spacing: .01em; }
a.serial { color: var(--teal-ink); }
a.serial:hover { text-decoration: underline; }

/* Journeys grid: paid green, denied or open coral, auth pending amber, scheduled grey outline, stopped dark grey */
table.journeys td.c, table.journeys th.c { text-align: center; }
.cell { display: inline-block; width: 26px; height: 18px; border-radius: 4px; vertical-align: middle; }
.cell.inline { width: 14px; height: 12px; }
.cell.paid { background: #46a758; }
.cell.denied { background: #e5484d; }
.cell.pending { background: #f5b83d; }
.cell.scheduled { background: transparent; border: 1.5px solid #b9c1c8; }
.cell.stopped { background: #4a5259; }
.cell.none { background: transparent; }
a.cell:hover { outline: 2px solid var(--text); outline-offset: 1px; }
.cell-legend { list-style: none; display: flex; gap: 12px; margin: 0; padding: 0; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.cell-legend li { display: inline-flex; align-items: center; gap: 5px; }
.cell-legend .cell { width: 14px; height: 12px; }

/* Patients */
.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.feed-tools .filter-chips { margin: 0; }
.filter-chip { border: 1px solid var(--border-strong); border-radius: 999px; padding: 5px 12px; text-decoration: none; color: var(--text); background: var(--surface); font-size: 13px; }
.filter-chip:hover { border-color: var(--brand); background: var(--teal-soft); }
.filter-chip.on { background: var(--brand); border-color: var(--brand); color: var(--on-teal); font-weight: 600; }
.patient-header { padding: 16px 20px; display: grid; gap: 12px; }
.patient-header h2 { margin: 0; font-size: 20px; }
.callout.warn { border-left: 4px solid #f2a541; background: #fff8eb; padding: 12px 16px; margin-bottom: 16px; border-radius: var(--radius); }
.callout.warn h2 { margin: 0 0 4px; font-size: 15px; }
.callout.warn p { margin: 0; }
.callout.consolidated { border-left: 4px solid var(--brand); background: var(--teal-soft); padding: 12px 16px; margin-bottom: 16px; border-radius: var(--radius); }
.callout.consolidated h2 { margin: 0 0 4px; font-size: 15px; }
.callout.consolidated p { margin: 0; }

/* Payer page */
.stack-chart { width: 100%; height: auto; }
.stack-chart .axis { font: 11px Inter, sans-serif; fill: var(--muted); }
.chart-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0 0; padding: 0; font-size: 12px; color: var(--muted); }
.chart-legend .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.chart-legend .swatch.line { height: 3px; background: #1f3a5f; vertical-align: 2px; }
.signals { margin: 0; padding: 10px 16px 14px 34px; display: grid; gap: 6px; }
.list .count { font-weight: 700; font-size: 18px; }
tr.total td { font-weight: 700; background: var(--head); }
.arguments { display: grid; gap: 10px; padding: 4px 16px 16px; }
.argument-entry { padding: 0; }
.argument-entry summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; list-style: none; }
.argument-entry summary::-webkit-details-marker { display: none; }
.argument-entry summary:hover { background: var(--teal-soft); }
.argument-entry[open] summary { border-bottom: 1px solid var(--border); }
.arg-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.arg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 12px 16px; }
.arg-grid p, .arg-grid blockquote { margin: 4px 0 0; }
.arg-claims { padding: 0 16px 14px; }
.claim-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; padding: 0; }
.claim-chips a { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--border-strong); border-radius: 999px; padding: 3px 4px 3px 10px; text-decoration: none; color: var(--text); font-size: 13px; }
.claim-chips a:hover { border-color: var(--brand); background: var(--teal-soft); }
.target { scroll-margin-top: 80px; }
.argument-entry { scroll-margin-top: 80px; }

/* Search, skeletons, empty states, footer */
.account .search { margin: 0; }
.account .search input { width: 320px; padding: 7px 12px; border-radius: 999px; background: var(--canvas); }
.account .search input:focus { background: var(--surface); }
.search-groups { display: grid; gap: 16px; }
.empty-state { color: var(--muted); padding: 18px 16px; margin: 0; }
.skeleton { display: grid; gap: 14px; }
.skel { background: linear-gradient(90deg, #eef1f3 25%, #f6f8f9 50%, #eef1f3 75%); background-size: 200% 100%; animation: skel 1.2s ease-in-out infinite; border-radius: 8px; }
.skel.title { height: 30px; width: 320px; }
.skel.subtitle { height: 16px; width: 440px; }
.skel.tile { height: 104px; }
.skel.card { height: 150px; }
.skel.panel { height: 260px; }
.skel.panel.short { height: 140px; }
.skel-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.skel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
@keyframes skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }
.m-footer { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--muted); }
tr.clickable:focus-visible td { background: var(--teal-soft); }

@media (max-width: 1280px) {
  .overview-top, .cols-site { grid-template-columns: 1fr; }
  .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account .search input { width: 220px; }
}
@media (max-width: 860px) {
  .cols-2, .cols-3, .arg-grid { grid-template-columns: 1fr; }
  .kpis.six, .feed-summary, .skel-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account .search input { width: 150px; }
  .feed-row { grid-template-columns: 10px 1fr auto; }
  .feed-when { grid-column: 2 / -1; text-align: left; }
}
/* Manufacturer bar charts: labels sized to their content, values never wrap. */
.hbars.m .hbar { grid-template-columns: 80px minmax(0, 1fr) max-content; }
.hbars.m.wide .hbar { grid-template-columns: 190px minmax(0, 1fr) max-content; }
.hbars.m .hbar .n { white-space: nowrap; min-width: 30px; }
.hbars.m .hbar-code { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The sidebar's dark column runs the full page height, not just the viewport. */
.layout-sidebar .shell { background: linear-gradient(to right, var(--side-bg) 262px, transparent 262px); }
@media (max-width: 860px) { .layout-sidebar .shell { background: none; } }
.chart-narrow { max-width: 760px; }
.metrics.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1080px) { .metrics.six { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cell.withheld { background: repeating-linear-gradient(45deg, #d5dbdf 0 3px, #f2f4f6 3px 6px); }

/* Reports: index cards, the quarterly dashboard and the comparison */
.report-card { display: block; padding: 14px 16px; }
.report-card.brief p { margin: 8px 0; }
.pdf-btn { display: inline-flex; align-items: center; gap: 6px; }
.report-tabs { margin: 0 0 16px; padding: 0; }
.report { display: grid; gap: 4px; }
.report-section { padding: 18px 0 8px; border-top: 1px solid var(--border); }
.report-section:first-child { border-top: 0; padding-top: 4px; }
.report-section > .eyebrow { color: var(--teal-ink); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
.report-section h3 { margin: 18px 0 8px; font-size: 16px; }
.report-headline { font-size: 24px; line-height: 1.25; margin: 0 0 6px; }
.lede { color: var(--muted); margin: 0 0 14px; max-width: 70ch; }
.kpis.six-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 0 0 6px; }
.kpis.four-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; }
.kpis.six-row .stat { font-size: 26px; }
.finding { padding: 10px 14px; border-radius: 6px; margin: 0 0 8px; border-left: 4px solid; line-height: 1.5; }
.finding.coral { background: #fdf1ee; border-color: #e5484d; }
.finding.cyan { background: #eefafc; border-color: var(--brand); }
.health-mini { display: flex; gap: 12px; align-items: center; padding: 14px 16px; margin: 10px 0 0; }
.or-chart { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; align-items: end; min-height: 170px; }
.or-col { display: grid; grid-template-rows: 140px auto; gap: 6px; }
.or-bars { display: flex; align-items: flex-end; justify-content: center; gap: 6px; height: 140px; }
.or-bar { width: 24px; border-radius: 3px 3px 0 0; min-height: 1px; }
.or-bar.open { background: #e8604c; }
.or-bar.rec { background: #5cc3a4; }
.or-label { text-align: center; font-size: 12px; color: var(--muted); }
.or-wrap .chart-legend { margin-top: 8px; }
.compare-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
table.compare td:first-child { font-weight: 500; }
@media (max-width: 1280px) { .kpis.six-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .kpis.four-row, .compare-charts { grid-template-columns: 1fr 1fr; } }