/* Barnes Benchmarks — light theme carried over from the approved preview
   (webapp/app_template.html), plus a dark theme added 2026-07-27 at Barnes'
   request and WITHDRAWN 2026-09-08 (Spencer: the logo reads wrong on dark).
   base.html now stamps data-theme="light" unconditionally, so the
   :root[data-theme="dark"] block below is unreachable — kept for the day a
   dark-ground logo exists. Light values live in :root. Every color below must be a
   custom property — a literal hex outside these two blocks will break one of
   the themes. */
:root {
  color-scheme: light;
  --paper:#FBFBF9; --panel:#FFFFFF; --ink:#20262C; --ink-2:#565E66; --ink-3:#8A9099;
  --line:#EEEDE8; --line-2:#DFDDD5;
  --accent:#A17F14; --accent-ink:#86690F; --highlight:#F7EFC8; --highlight-ink:#5C4A08;
  --bench:#46637F; --bench-soft:#F1F4F7;
  --good:#257A54; --good-soft:#EBF5F0; --bad:#B04328; --bad-soft:#FAEFEA;
  --ink-strong:#000000;
  --display:'Charter','Cambria',Georgia,'Times New Roman',serif;
  --ui:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',sans-serif;
  --mono:'Cascadia Code',Consolas,ui-monospace,'SF Mono',monospace;
  --shadow:0 1px 2px rgba(32,38,44,.04);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:#16191C; --panel:#1D2126; --ink:#E8E9EA; --ink-2:#A8AEB5; --ink-3:#767D85;
  --line:#282D33; --line-2:#353B43;
  --accent:#C9A227; --accent-ink:#D8B84A; --highlight:#3A3418; --highlight-ink:#E8D9A0;
  --bench:#7FA3C4; --bench-soft:#232A31;
  --good:#4FB185; --good-soft:#1B2A24; --bad:#E0765A; --bad-soft:#2E1F1B;
  --ink-strong:#FFFFFF;
  --shadow:0 1px 2px rgba(0,0,0,.35);
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body { background:var(--paper); color:var(--ink); font-family:var(--ui); font-size:14px; line-height:1.45; }
button { font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
button:focus-visible, select:focus-visible, a:focus-visible, input:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
select, input[type=text], input[type=email], input[type=file], input[type=search] {
  font:inherit; color:var(--ink); background:var(--panel);
  border:1px solid var(--line-2); border-radius:4px; padding:6px 9px;
}
a { color:var(--accent-ink); }

.wrap { max-width:1140px; margin:0 auto; padding:0 24px; }

/* masthead */
.masthead { background:var(--panel); border-bottom:1px solid var(--line-2); padding:38px 0 24px; }
.masthead .wrap { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.eyebrow { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-ink); font-weight:600; margin-bottom:7px; }
h1 { font-family:var(--display); font-size:32px; font-weight:600; margin:0; letter-spacing:-.01em; text-wrap:balance; }
.mast-meta { text-align:right; font-size:12px; color:var(--ink-2); }
.conf-chip { display:inline-block; border:1px solid var(--accent-ink); color:var(--accent-ink); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; padding:2px 8px; border-radius:3px; margin-bottom:6px; }


/* toolbar */
.toolbar { position:sticky; top:0; z-index:10; background:var(--panel); border-bottom:1px solid var(--line); }
.toolbar .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.tabs { display:flex; gap:22px; }
.tab { padding:12px 1px 10px; color:var(--ink-3); font-weight:500; font-size:13.5px; border-bottom:2px solid transparent; margin-bottom:-1px; text-decoration:none; }
.tab:hover { color:var(--ink); }
.tab.on { color:var(--ink); font-weight:600; border-bottom-color:var(--accent); }
.globals { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
/* A thin rule between each filter (Spencer, 2026-09-25 meeting). The toolbar
   holds placeholder spans that stay EMPTY for some viewers (members get no
   #scope-ctl, a single-company book gets no #co-switch), so the rule goes on
   a non-empty child that has a non-empty child before it — never on an empty
   placeholder, never doubled, never on the first visible control. The Through
   label and its select share one .ctl span so the rule cannot split them. */
.globals > :empty { display:none; }
.globals > :not(:empty) ~ :not(:empty) { border-left:1px solid var(--line-2); padding-left:12px; }
.globals .ctl, .globals #scope-ctl { display:inline-flex; align-items:center; gap:8px; }
.globals label { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:600; }
.seg { display:inline-flex; border:1px solid var(--line-2); border-radius:5px; overflow:hidden; background:var(--panel); }
.seg button { padding:5px 12px; font-size:13px; color:var(--ink-2); border-right:1px solid var(--line); }
.seg button:last-child { border-right:none; }
.seg button.on { background:var(--ink); color:var(--paper); font-weight:600; }
.admin-cue { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin-left:8px; white-space:nowrap; }

/* metric shelf */
.ctl-label { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:600; }
/* Admin group checklist in the toolbar. */
.scope-opts { display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; }
.scope-opt { display:inline-flex; align-items:center; gap:4px; font-size:12.5px; color:var(--ink-2); cursor:pointer; white-space:nowrap; }
.scope-opt input { margin:0; accent-color:var(--accent); }
/* Peers tab checklist. */
.peer-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:8px 18px; }
.peer-opt { display:flex; align-items:center; gap:8px; font-size:13.5px; cursor:pointer; }
.peer-opt input { margin:0; accent-color:var(--accent); }
#metric-ctl { display:inline-flex; align-items:center; gap:10px; }
.metric-btn { border:1px solid var(--line-2); border-radius:5px; background:var(--panel); color:var(--ink); font-size:13px; font-weight:600; padding:5px 11px; display:inline-flex; align-items:center; gap:8px; }
.metric-btn:hover { border-color:var(--ink-3); }
.metric-btn .caret { color:var(--ink-3); font-size:11px; }
.shelf { background:var(--panel); border-bottom:1px solid var(--line-2); box-shadow:var(--shadow); }
.shelf .wrap { padding-top:14px; padding-bottom:14px; }
.shelf-group { margin-bottom:6px; }
.shelf-search { width:100%; max-width:340px; margin-bottom:10px; }
.shelf-empty { color:var(--ink-3); font-size:13px; margin:6px 0 0; }
.shelf-formula { border-top:1px solid var(--line); margin-top:10px; padding-top:10px; min-height:74px; }
.shelf-formula .formula-card { margin-top:0; border:none; box-shadow:none; background:transparent; padding:0 0 0 12px; }

/* Deliberately NOT .chip — squarer, lighter, and it selects with the bench
   colour rather than the near-black chip fill. A second row of pills would read
   as another row of metrics, which is the density the feedback objects to. */
.shelf-filter { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.gfilter { border:1px solid var(--line-2); background:var(--panel); border-radius:4px;
           padding:3px 10px; font-size:11.5px; letter-spacing:.04em; color:var(--ink-2); }
.gfilter:hover { border-color:var(--ink-3); color:var(--ink); }
.gfilter.on { background:var(--bench-soft); border-color:var(--bench); color:var(--bench); font-weight:600; }

/* layout */
main { padding:30px 0 10px; }
.panel { background:var(--panel); border:1px solid var(--line-2); border-radius:6px; box-shadow:var(--shadow); }
.view-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
h2 { font-family:var(--display); font-size:21px; font-weight:600; margin:0; }
.view-sub { color:var(--ink-2); font-size:13px; }

/* KPI picker */
.kpi-groups { display:flex; flex-direction:column; gap:8px; }
.kpi-group-label { font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin:6px 0 2px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { border:1px solid var(--line-2); background:var(--panel); border-radius:14px; padding:4px 13px; font-size:12.5px; color:var(--ink-2); }
.chip:hover { border-color:var(--ink-3); color:var(--ink); }
.chip.on { background:var(--ink); border-color:var(--ink); color:var(--paper); font-weight:600; }

/* leaderboard */
.lb { padding:24px 28px; }
.lb-row { display:grid; grid-template-columns:26px 200px 1fr 92px; gap:12px; align-items:center; padding:5px 0; }
.lb-rank { font-variant-numeric:tabular-nums; color:var(--ink-3); font-size:12px; text-align:right; }
.lb-name { font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lb-name button { padding:0; font-size:inherit; text-align:left; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-name button:hover { color:var(--accent-ink); text-decoration:underline; }
.lb-track { position:relative; height:18px; }
.lb-bar { position:absolute; top:2px; height:14px; background:var(--bench); opacity:.55; border-radius:2px; }
.lb-bar.neg { background:var(--bad); opacity:.5; }
.lb-row.focus .lb-bar { background:var(--accent); opacity:.9; }
.lb-row.focus { background:var(--highlight); border-radius:4px; }
.lb-row.focus .lb-name, .lb-row.focus .lb-val { color:var(--highlight-ink); font-weight:600; }
.lb-zero { position:absolute; top:0; bottom:0; width:1px; background:var(--line-2); }
/* A repeating gradient, not `border-left: dotted` — the gradient states the dot
   and gap lengths exactly (2px on, 3px off) instead of leaving them to the
   browser's dotted rendering, which differs per engine and per zoom.
   Barnes feedback 2026-07-29: "make the dashes shorter or closer to dots". */
.lb-avg { position:absolute; top:-2px; bottom:-2px; width:2px;
          background:repeating-linear-gradient(var(--accent-ink) 0 2px, transparent 2px 5px); }
.lb-range { position:absolute; top:8px; height:2px; background:var(--line-2); }
.lb-val { font-variant-numeric:tabular-nums; text-align:right; font-size:13px; }
/* Red = negative, green = rank 1. Last place is deliberately UNTINTED — see
   lbValueClass() in dashboard.js for why. The focus row recolours .lb-val to
   --highlight-ink, so the negative rule has to out-specify it or a member's own
   negative number would be the one value on screen that isn't red. */
.lb-best { color:var(--good); }
.lb-neg, .lb-row.focus .lb-val.lb-neg { color:var(--bad); }
.lb-legend { display:flex; gap:20px; padding:12px 28px; border-top:1px solid var(--line); color:var(--ink-2); font-size:12px; flex-wrap:wrap; }
.lb-legend .key { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:-1px; }

/* Caption row above the bars. It mirrors .lb-row's grid EXACTLY so the callout
   lands on the same x scale as the .lb-avg ticks inside each track — an overlay
   on .lb would have to re-derive the track column's geometry, which the row
   grid already knows. Keep these columns in sync with .lb-row above. */
.lb-cap { display:grid; grid-template-columns:26px 200px 1fr 92px; gap:12px; align-items:end; padding:0 0 6px; }
.lb-cap .lb-track { height:16px; }
.lb-avgcap { position:absolute; bottom:0; white-space:nowrap; font-size:11px; font-weight:600;
             color:var(--accent-ink); background:var(--panel); padding:0 5px; border-radius:3px; }

/* formula card */
.formula-card { margin-top:14px; padding:14px 18px; border-left:3px solid var(--accent); }
.formula-card .fname { font-weight:600; font-size:13px; margin-bottom:4px; }
.formula-card code { font-family:var(--mono); font-size:12px; color:var(--ink-2); display:block; white-space:pre-wrap; }
.formula-card .fnote { font-size:12px; color:var(--ink-3); margin-top:6px; }

/* scorecard */
.sc-head { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:22px 28px; border-bottom:1px solid var(--line); }
.sc-co h3 { font-family:var(--display); font-size:19px; margin:0 0 2px; }
.sc-co .sc-meta { color:var(--ink-2); font-size:12.5px; }
.warn-chip { display:inline-block; background:var(--bad-soft); color:var(--bad); font-size:11px; font-weight:600; padding:2px 8px; border-radius:3px; margin-left:8px; }
.sc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:0; }
.sc-cell { padding:18px 26px; border-bottom:1px solid var(--line); border-right:1px solid var(--line); }
.sc-cell .k-name { font-size:12px; color:var(--ink-2); margin-bottom:2px; }
.sc-cell .k-row { display:flex; align-items:baseline; gap:10px; }
.sc-cell .k-val { font-size:19px; font-weight:600; font-variant-numeric:tabular-nums; }
.rank-chip { font-size:11px; font-weight:600; border-radius:3px; padding:1px 7px; font-variant-numeric:tabular-nums; }
.rank-chip.good { background:var(--good-soft); color:var(--good); }
.rank-chip.bad { background:var(--bad-soft); color:var(--bad); }
.rank-chip.mid { background:var(--bench-soft); color:var(--bench); }
.k-bench { font-size:11.5px; color:var(--ink-3); margin-top:3px; font-variant-numeric:tabular-nums; }
.pct-track { height:4px; background:var(--line); border-radius:2px; margin-top:8px; position:relative; }
.pct-fill { position:absolute; height:4px; border-radius:2px; background:var(--bench); opacity:.6; }
.pct-dot { position:absolute; top:-3px; width:10px; height:10px; border-radius:50%; background:var(--accent); border:2px solid var(--panel); }
.spark { margin-top:8px; display:block; }
.spark .sline { fill:none; stroke:var(--bench); stroke-width:1.5; }
.spark .send { fill:var(--accent); }

/* compare */
.cmp-pick { padding:16px 28px; border-bottom:1px solid var(--line); }
.pick-head { display:flex; align-items:baseline; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.pick-label { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:600; }
.linkbtn { color:var(--accent-ink); font-size:12.5px; text-decoration:underline; padding:0; }
.linkbtn:hover { color:var(--ink); }
.pick-sep { color:var(--ink-3); font-size:12.5px; }
.pick-count { color:var(--ink-3); font-size:12px; margin-left:6px; font-variant-numeric:tabular-nums; }
.table-scroll { overflow-x:auto; }
.cmp-filter { padding:14px 28px 0; }
.cmp-filter .shelf-filter { margin-bottom:6px; }
table.cmp { border-collapse:collapse; width:100%; font-size:13px; }
.cmp th.cmp-section { text-align:left; font-size:10.5px; letter-spacing:.1em; color:var(--ink-3); background:var(--paper); padding-top:12px; position:sticky; left:0; }
.cmp th, .cmp td { padding:7px 10px; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; border-bottom:1px solid var(--line); }
.cmp th { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); font-weight:600; }
.cmp th:first-child, .cmp td:first-child { text-align:left; position:sticky; left:0; background:var(--panel); }
.cmp td:first-child { font-size:12.5px; color:var(--ink-2); }
.cmp .col-sel { background:var(--highlight); color:var(--highlight-ink); }
.cmp .col-bench { color:var(--bench); font-weight:600; }
/* Same rule as the Leaderboard: red = negative, green = best of selection.
   `.col-sel` sets a colour on the same element, so both need to out-specify it
   — hence td.col-sel rather than bare td. */
.cmp td.col-sel.best { color:var(--good); font-weight:600; }
.cmp td.col-sel.neg { color:var(--bad); }
.cmp tr:hover td { background:var(--bench-soft); }
.cmp tr:hover td.col-sel { background:var(--highlight); }

/* metrics table. No height cap and no scroll box (Spencer, 2026-09-25: every
   quarter visible, no scrolling): the table fits the panel at laptop width
   with the tighter cell padding below, the header sticks to the viewport
   instead (the dashboard toolbar is position:static, so nothing sits above
   it), and only under 900px does .grid-fit turn into a sideways scroller. */
.grid-fit { overflow:visible; }
table.grid { border-collapse:separate; border-spacing:0; width:100%; font-size:13px; }
/* Column rules as well as row rules — this view is read across a row and down a
   column, so cells need to be bounded on both axes. Vertical lines are one step
   lighter than horizontal ones so the table still reads as rows first. */
.grid th, .grid td { padding:6px 8px; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; border-bottom:1px solid var(--line); border-right:1px solid var(--line); }
.grid th:last-child, .grid td:last-child { border-right:none; }
/* The pinned name column is a boundary, not just another gridline. */
.grid th:first-child { border-right:1px solid var(--line-2); }
.grid thead th { position:sticky; top:0; z-index:2; background:var(--bench-soft); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); font-weight:600; }
.grid th:first-child { text-align:left; position:sticky; left:0; z-index:1; background:var(--panel); }
/* .grid th:first-child sets background:var(--panel) for the sticky-left column
   and is declared AFTER .grid thead th, so the corner cell would keep the pale
   panel fill and break the header band. Restate it. Sticky cells must stay
   fully opaque — rows scroll underneath them. */
.grid thead th:first-child { background:var(--bench-soft); }
.grid tbody th:first-child { font-weight:500; font-size:12.5px; color:var(--ink-2); }
/* Company names wrap rather than push twelve quarter columns off the panel. */
.grid tbody th:first-child, .grid tfoot th:first-child { white-space:normal; max-width:200px; }
.grid thead th:first-child, .grid tfoot th:first-child { z-index:3; }
.grid tbody tr:hover td { background:var(--bench-soft); }
.grid tbody tr.focus th, .grid tbody tr.focus td { background:var(--highlight); color:var(--highlight-ink); font-weight:600; }
.grid tfoot th, .grid tfoot td { position:sticky; bottom:0; z-index:2; border-top:2px solid var(--line-2); border-bottom:none; font-weight:600; color:var(--bench); background:var(--panel); }
.sort-btn { display:inline-flex; align-items:center; justify-content:flex-end; gap:4px;
            width:100%; padding:0; font:inherit; color:inherit;
            letter-spacing:inherit; text-transform:inherit; }
.grid th:first-child .sort-btn { justify-content:flex-start; }
.sort-btn:hover { color:var(--ink); }
.sort-caret { font-size:8px; color:var(--accent-ink); }

/* trends */
.trend-panel { padding:22px 28px; }
/* The chart scales with the panel — viewBox does the work, the element is
   fluid — so all 44 quarter labels sit inside the panel with no sideways
   scroll (Spencer, 2026-09-25). */
.trend-svg { display:block; width:100%; height:auto; }
.legend { display:flex; gap:14px; flex-wrap:wrap; padding-top:10px; font-size:12.5px; }
.legend .key { display:inline-block; width:14px; height:3px; border-radius:1px; margin-right:5px; vertical-align:3px; }
.legend .key-dash { -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 3px,transparent 3px 5px); mask-image:repeating-linear-gradient(90deg,#000 0 3px,transparent 3px 5px); }
.legend .key-dash2 { -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 1px,transparent 1px 3px); mask-image:repeating-linear-gradient(90deg,#000 0 1px,transparent 1px 3px); }

/* methodology */
.meth { padding:26px 30px; max-width:860px; }
.meth h3 { font-family:var(--display); font-size:17px; margin:22px 0 8px; }
.meth h3:first-child { margin-top:0; }
.meth p, .meth li { font-size:13.5px; color:var(--ink-2); max-width:65ch; }
.meth table { border-collapse:collapse; width:100%; font-size:12.5px; }
.meth th, .meth td { text-align:left; padding:7px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
.meth th { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.meth code { font-family:var(--mono); font-size:11.5px; }
.dir-tag { font-size:10.5px; font-weight:600; padding:1px 6px; border-radius:3px; white-space:nowrap; }
.dir-high { background:var(--good-soft); color:var(--good); }
.dir-low { background:var(--bad-soft); color:var(--bad); }
.dir-none { background:var(--bench-soft); color:var(--bench); }
/* "annualized rate" marker. Deliberately NEUTRAL — it states the period a
   number covers, it is not a verdict, so it must not read as good/bad the way
   the .dir-* tags do. Lives here rather than beside .lb-* because it appears in
   four places (view-sub lines, the formula card, Methodology). */
.ann-tag { font-size:10.5px; font-weight:600; padding:1px 6px; border-radius:3px; white-space:nowrap;
           background:var(--bench-soft); color:var(--bench); letter-spacing:0; text-transform:none; }

footer { border-top:1px solid var(--line-2); margin-top:26px; padding:16px 0 30px; color:var(--ink-3); font-size:12px; }
footer .wrap { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }

/* ---------- server-rendered pages (auth / upload / admin) ---------- */
.auth-wrap { max-width:420px; margin:70px auto 0; padding:0 24px; }
.auth-card { padding:30px 32px; }
.auth-card h2 { margin-bottom:6px; }
.auth-card p { color:var(--ink-2); font-size:13px; }
.auth-card form { display:flex; flex-direction:column; gap:12px; margin-top:16px; }
.btn { display:inline-block; background:var(--ink); color:var(--paper); font-weight:600; border-radius:5px; padding:8px 18px; text-align:center; text-decoration:none; }
.btn:hover { background:var(--ink-strong); }
.btn.secondary { background:var(--panel); color:var(--ink); border:1px solid var(--line-2); }
.btn.secondary:hover { background:var(--bench-soft); }
.btn-sm { padding:5px 12px; font-size:12.5px; }
.flash { border-radius:5px; padding:10px 14px; font-size:13px; margin-bottom:14px; }
.flash.error { background:var(--bad-soft); color:var(--bad); }
.flash.ok { background:var(--good-soft); color:var(--good); }
.flash.note { background:var(--highlight); color:var(--highlight-ink); }
.err-list { background:var(--bad-soft); border-radius:5px; padding:14px 18px 14px 32px; color:var(--bad); font-size:13px; }
.err-list li { margin:3px 0; }

table.data { border-collapse:collapse; width:100%; font-size:13px; }
.data th, .data td { padding:9px 14px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }
.data th { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); font-weight:600; }
.data tr:hover td { background:var(--bench-soft); }
.status-chip { font-size:11px; font-weight:600; border-radius:3px; padding:1px 8px; }
.status-chip.accepted { background:var(--good-soft); color:var(--good); }
.status-chip.rejected { background:var(--bad-soft); color:var(--bad); }
.status-chip.deleted { background:var(--line); color:var(--ink-3); text-decoration:line-through; }

.form-grid { display:grid; grid-template-columns:150px 1fr; gap:10px 14px; align-items:center; max-width:560px; }
.checks { display:flex; flex-wrap:wrap; gap:8px 16px; }
.checks label { font-size:13px; color:var(--ink-2); }

.drop { border:2px dashed var(--line-2); border-radius:8px; padding:36px 24px; text-align:center; color:var(--ink-2); }
.drop.hover { border-color:var(--accent); background:var(--highlight); }

@media (max-width:900px) {
  /* Narrow screens: the rules would land at the start of a wrapped line, and
     the fit-width tables cannot fit — fall back to a sideways scroller
     rather than clipping. */
  .globals > :not(:empty) ~ :not(:empty) { border-left:none; padding-left:0; }
  .grid-fit { overflow-x:auto; }
  /* A fluid 44-quarter chart at phone width is a smear; hold a readable
     minimum and let the panel scroll instead. */
  .trend-panel { overflow-x:auto; }
  .trend-svg { min-width:760px; }
}
@media (max-width:720px) {
  /* .lb-cap must narrow in lockstep with .lb-row — see the comment above
     .lb-cap: its grid is a deliberate copy of .lb-row's so the callout lands
     on the same x scale as the bars. */
  .lb-row, .lb-cap { grid-template-columns:22px 120px 1fr 80px; }
  .sc-grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: no-preference) {
  .lb-bar { transition:width .25s ease; }
  .pct-dot { transition:left .25s ease; }
}

/* RMR Levers brand assets. The supplied PNGs are artwork on an OPAQUE WHITE
   plate - only the outer corners carry alpha. That is invisible in light theme
   because --panel is #FFFFFF, but a CSS filter cannot tell plate from artwork:
   the old `brightness(0) invert(1)` painted the whole plate white, so dark
   theme showed a solid white rectangle (2026-08-16). Dark theme now swaps in
   its own asset - plate knocked out, neutrals lifted, green kept and
   brightened to 5:1. Regenerate with scripts/make_logo_variants.py. */
.brand-mark { height:24px; display:block; margin-bottom:6px; width:auto; }
.login-logo { display:block; max-width:280px; width:100%; margin:0 auto 14px; }
/* Theme-swapped assets. Must follow the rules above - same specificity, later
   wins. base.html always stamps data-theme before first paint, so there is no
   unstamped state to cover. */
.only-dark { display:none; }
:root[data-theme="dark"] .only-light { display:none; }
:root[data-theme="dark"] .only-dark { display:block; }