/* 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. Light values live in :root, dark in :root[data-theme="dark"];
   base.html sets data-theme before first paint. 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; }

.theme-toggle { border:1px solid var(--line-2); border-radius:4px; background:var(--panel); color:var(--ink-2); font-size:13px; line-height:1.2; padding:3px 9px; margin-bottom:6px; }
.theme-toggle:hover { color:var(--ink); border-color:var(--ink-3); }
/* Show the icon of the theme you would switch TO. */
:root[data-theme="light"] .theme-icon-to-light { display:none; }
:root[data-theme="dark"] .theme-icon-to-dark { display:none; }

/* 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; }
.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; }
#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; }
table.cmp { border-collapse:collapse; width:100%; font-size:13px; }
.cmp th, .cmp td { padding:9px 16px; 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 */
.grid-scroll { max-height:68vh; overflow:auto; }
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:8px 14px; 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); }
.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; }
.trend-svg-wrap { overflow-x: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); }
.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); }

.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: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 (2026-08-14). The PNGs are dark-on-transparent;
   dark theme flattens them to white via filter - legible, loses the green. */
.brand-mark { height:24px; display:block; margin-bottom:6px; width:auto; }
.login-logo { display:block; max-width:280px; width:100%; margin:0 auto 14px; }
:root[data-theme="dark"] .brand-mark,
:root[data-theme="dark"] .login-logo { filter: brightness(0) invert(1); }