/* shared.css — the Hyre app design language. Every page loads this one file.
   ═══════════════════════════════════════════════════════════════════════════
   Modelled on Midday (midday.ai), at Derek's request, 2026-11-01. Every colour
   below was measured from Midday's own light and dark screens on Mobbin and
   from the screenshot Derek shared. The Figma file "Hyre App Design Language"
   holds the same tokens with the same names, light and dark.

   The rules, in short:
     1. Black and white. Colour appears only where it means something:
        status pills, and gains and losses.
     2. One design, two modes. Every colour is a variable with a light and a
        dark value. theme.js sets <html data-theme="light|dark">; nothing on a
        page is ever drawn twice.
     3. Pages live in a 70px icon rail on the left. Search sits in the top bar;
        the person's initial and the theme switch sit top right.
     4. Square corners and 1px hairlines. Only menus cast a shadow.
     5. Hedvig Letters Serif for page titles and headline figures; Hedvig
        Letters Sans for everything else. ONE weight: emphasis is colour
        (full black or white against grey), never bold.

   ⚠ LOSSES ARE RED in this design, as the approved Figma file shows. That
   replaces the Logbook's earlier "losses are blue" rule. Meaning still never
   rests on colour alone: a loss always carries a minus sign or a word.

   ⚠ CLASS NAMES ARE UNCHANGED (.card, .cards, section, .scroll, .pill, .seg,
   .notice, .board …). The pages' JavaScript writes those names into innerHTML.
   Same hooks, new skin. New here: .rail, .frame, .search, .me, .menu.

   Values marked "derived" were not on any Midday screen (light-mode status
   tints, the warning amber, the red) and were worked out from measured ones.
   ═══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Hedvig+Letters+Sans&family=Hedvig+Letters+Serif&display=swap');

:root{
  color-scheme: light;
  /* Measured from Midday, light mode */
  --bg:#FFFFFF;             /* page, rail, top bar, cards */
  --subtle:#F7F7F7;         /* inputs, the active nav item, summary cards */
  --selected:#F1EFEE;       /* a selected row */
  --line:#E5E5E5;           /* every hairline */
  --ink:#000000;            /* figures, headings, the facts in a sentence */
  --muted:#555555;          /* labels, connecting words */
  --faint:#777777;          /* axis labels, footer links, placeholders */
  --primary-bg:#1A1A1A;     /* the primary button */
  --on-primary:#FFFFFF;
  --icon:#555555;
  --icon-active:#000000;
  --data-1:#000000;         /* current period, the main line */
  --data-2:#C6C6C6;         /* previous period, unlit bars */
  /* Chart series, in the same order as Hyre.C in charts.js, for legend keys. */
  --series-1:#000000; --series-2:#555555; --series-3:#8E8E8E; --series-4:#C6C6C6;

  /* Status. Light-mode tints are derived from the measured dark values. */
  --positive:#1E8A5C;  --positive-soft:#E5F6EF;
  --info:#2F5BB8;      --info-soft:#EBF0FA;
  --negative:#C9302C;  --negative-soft:#FCEBEA;
  --warn:#9A6700;      --warn-soft:#FBF3DB;     /* derived */
  --neutral-soft:#F7F7F7;

  --shadow-menu:0 4px 16px rgba(0,0,0,.08);

  /* Older names still read by some pages' own <style> blocks. */
  --hairline:var(--line); --hairline-2:var(--line); --soft:var(--subtle);
  --panel:var(--bg); --panel-2:var(--subtle); --panel-3:var(--subtle);
  --glass:var(--bg); --glass-deep:var(--subtle);
  --ink-2:var(--ink); --information:var(--muted); --neutral-line:var(--data-2);
  --violet-soft:var(--subtle); --violet:var(--ink); --pink:var(--ink);

  --font-body:"Hedvig Letters Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --font-display:"Hedvig Letters Serif",ui-serif,Georgia,serif;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px;
  /* Square, as Midday. Only pills and avatars are rounded. */
  --r-control:0; --r-sm:0; --r-md:0; --r2:0; --r-panel:0; --r-shell:0;
  --rail:70px; --bar:70px;
}
:root[data-theme="dark"]{
  color-scheme: dark;
  /* Measured from Midday, dark mode, and from Derek's screenshot */
  --bg:#0C0C0C;
  --subtle:#131313;
  --selected:#1C1C1C;
  --line:#1D1D1D;
  --ink:#FFFFFF;
  --muted:#6B6B6B;
  --faint:#3A3A3A;
  --primary-bg:#FFFFFF;
  --on-primary:#000000;
  --icon:#6B6B6B;
  --icon-active:#FFFFFF;
  --data-1:#FFFFFF;
  --data-2:#323232;
  --series-1:#FFFFFF; --series-2:#9A9A9A; --series-3:#6B6B6B; --series-4:#4A4A4A;
  --positive:#29B478;  --positive-soft:#101F16;
  --info:#3866C9;      --info-soft:#15161F;
  --negative:#E5484D;  --negative-soft:#2A1415;   /* derived */
  --warn:#D9A441;      --warn-soft:#231C0E;       /* derived */
  --neutral-soft:#1C1C1C;
  --shadow-menu:0 8px 24px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:13.5px/1.5 var(--font-body); font-weight:400;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
h1,h2,h3{font-family:var(--font-body); font-weight:400; margin:0; letter-spacing:0}
/* One weight. Emphasis is colour, never bold. */
strong,b{font-weight:400; color:var(--ink)}

/* ── The frame: rail, top bar, content ─────────────────────────────────── */
.rail{
  position:fixed; left:0; top:0; bottom:0; width:var(--rail); z-index:30;
  display:flex; flex-direction:column; align-items:center;
  background:var(--bg); border-right:1px solid var(--line);
}
.rail:empty{display:none}
.rail .logo{
  width:100%; height:var(--bar); flex:none; display:grid; place-items:center;
  border-bottom:1px solid var(--line); color:var(--icon-active); text-decoration:none;
}
.rail .logo svg{width:26px; height:24px; display:block}
.rail .pages{display:flex; flex-direction:column; align-items:center; gap:8px; padding-top:20px}
.rail a.item{
  position:relative; width:40px; height:40px; display:grid; place-items:center;
  color:var(--icon); border:1px solid transparent; text-decoration:none;
}
.rail a.item svg{width:18px; height:18px}
.rail a.item:hover{color:var(--icon-active)}
.rail a.item.on{background:var(--subtle); border-color:var(--line); color:var(--icon-active)}
/* The page name appears beside its icon on hover. */
.rail a.item::after{
  content:attr(data-tip); position:absolute; left:calc(100% + 10px); top:50%;
  transform:translateY(-50%); white-space:nowrap; pointer-events:none; opacity:0;
  padding:5px 9px; font-size:12px; color:var(--ink); background:var(--bg);
  border:1px solid var(--line); box-shadow:var(--shadow-menu); transition:opacity .1s;
}
.rail a.item:hover::after{opacity:1}

.frame{margin-left:var(--rail); min-width:0}
header.topbar{
  position:sticky; top:0; z-index:20; height:var(--bar);
  display:flex; align-items:center; gap:12px; padding:0 40px;
  background:var(--bg); border-bottom:1px solid var(--line);
}
.spacer{flex:1}
.sub{color:var(--muted); font-size:12.5px}

/* "Find anything": opens the page search (⌘K). */
.search{
  display:flex; align-items:center; gap:10px; padding:8px 0; border:0; background:none;
  color:var(--faint); font:inherit; font-size:13.5px; cursor:pointer;
}
.search svg{width:16px; height:16px; color:var(--icon)}
.search:hover{color:var(--muted)}
.search kbd{font:inherit; font-size:11px; color:var(--muted); border:1px solid var(--line); padding:0 5px; margin-left:4px}

/* "Updated Nov 1, 3:00 AM", beside the refresh button. */
.status{display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12.5px; white-space:nowrap}
.status:empty{display:none}
.status::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--positive)}

.iconbtn{
  width:36px; height:36px; flex:none; padding:0; display:grid; place-items:center;
  border:1px solid var(--line); background:var(--bg); color:var(--icon); cursor:pointer;
}
.iconbtn:hover{color:var(--icon-active)}
.iconbtn svg{width:16px; height:16px}

/* The person, top right, and the menu with the theme switch. */
.me{position:relative}
.me > button{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line);
  background:var(--subtle); color:var(--ink); font:inherit; font-size:12px; cursor:pointer;
}
.menu{
  position:absolute; right:0; top:calc(100% + 8px); width:260px; z-index:50;
  background:var(--bg); border:1px solid var(--line); box-shadow:var(--shadow-menu); padding:6px 0;
}
.menu[hidden]{display:none}
.menu .who{padding:8px 14px 10px; overflow:hidden; text-overflow:ellipsis}
.menu .who span{display:block; color:var(--muted); font-size:12px}
.menu hr{border:0; border-top:1px solid var(--line); margin:6px 0}
.menu .row{display:flex; align-items:center; gap:10px; padding:7px 14px}
.menu .row .seg button{padding:4px 9px; font-size:12px}
.menu button.row{width:100%; border:0; background:none; color:var(--ink); font:inherit; text-align:left; cursor:pointer}
.menu button.row:hover{background:var(--subtle)}

main{padding:36px 40px 64px}

/* Page title: serif, as Midday's "Morning Viktor". The second half is muted. */
.pagehead{margin:0 0 8px}
.pagetitle{font-family:var(--font-display); font-weight:400; font-size:34px; line-height:1.2; letter-spacing:-.01em; color:var(--ink)}
.pagetitle .thin{color:var(--muted); margin-left:4px}
.lede{color:var(--muted); font-size:14px; max-width:88ch; margin:0 0 24px}
.lede strong{color:var(--ink)}
.titlerow{display:flex; align-items:flex-end; gap:var(--s4); flex-wrap:wrap}
.titlerow h1{font-family:var(--font-display); font-size:30px}
.titlerow p{margin:3px 0 0; color:var(--muted)}

/* ── Search (⌘K) ──────────────────────────────────────────────────────────── */
.palette-back{position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.25)}
:root[data-theme="dark"] .palette-back{background:rgba(0,0,0,.55)}
.palette{
  position:fixed; left:50%; top:90px; transform:translateX(-50%); z-index:61;
  width:min(560px, calc(100vw - 32px)); background:var(--bg); border:1px solid var(--line); box-shadow:var(--shadow-menu);
}
.palette input{
  display:block; width:100%; border:0; border-bottom:1px solid var(--line); background:var(--bg); color:var(--ink);
  font:inherit; font-size:14px; padding:14px 16px; outline:none;
}
.palette input::placeholder{color:var(--faint)}
.palette .grp{color:var(--muted); font-size:11.5px; padding:10px 16px 4px}
.palette ul{list-style:none; margin:0; padding:0 0 6px; max-height:52vh; overflow:auto}
.palette li a{display:flex; align-items:center; gap:12px; padding:9px 16px; text-decoration:none; color:var(--ink)}
.palette li a svg{width:16px; height:16px; color:var(--icon); flex:none}
.palette li a span{color:var(--muted); font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.palette li a b{font-weight:400; white-space:nowrap}
.palette li a kbd{margin-left:auto; font:inherit; font-size:11px; color:var(--muted); border:1px solid var(--line); padding:0 6px}
.palette li.sel a{background:var(--subtle)}
.palette .none{padding:10px 16px 14px; color:var(--muted)}

/* ── Panels. Square, hairline, never nested. ──────────────────────────────── */
.glass, .card, section{min-width:0; background:var(--bg); border:1px solid var(--line)}

.exec{display:grid; grid-template-columns:minmax(0,1.45fr) minmax(240px,.65fr); gap:16px}
.lower{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr); gap:16px; margin-top:16px}

/* Insight and bottom-line panels: Midday's weekly summary card. */
.insight, .bottom{background:var(--subtle); border:1px solid var(--line); position:relative}
.insight{padding:20px 22px}
.insight-label{display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12.5px}
.sparkle{display:none}
.insight-value{
  font-family:var(--font-display); font-weight:400; margin:22px 0 8px; font-variant-numeric:tabular-nums;
  font-size:clamp(44px, 6vw, 64px); line-height:1; letter-spacing:-.02em; color:var(--ink);
}
.insight-copy{color:var(--ink); max-width:48ch; margin:0; font-size:15px; line-height:1.5}
.actions{margin-top:20px; padding:0 16px; border:1px solid var(--line); background:var(--bg)}
.action{display:flex; align-items:center; gap:12px; padding:11px 0; font-size:13px}
.action + .action{border-top:1px solid var(--line)}
.action span:last-child{margin-left:auto; text-align:right; color:var(--positive)}
.action span.neutral:last-child{color:var(--muted)}
.action span.warn:last-child{color:var(--warn)}

/* Key figures: separate square boxes, serif figure, as Midday's invoice summary. */
.kpi-stack{display:grid; gap:16px}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; margin-top:16px}
.card{padding:20px 22px; position:relative; overflow:hidden}
.card .label{color:var(--muted); font-size:12.5px}
.card .value{
  display:block; font-family:var(--font-display); font-weight:400; font-size:28px; line-height:1.2;
  margin:8px 0 4px; font-variant-numeric:tabular-nums; color:var(--ink);
}
.card .note{color:var(--muted); font-size:12.5px}

.pill{
  display:inline-block; margin-top:var(--s3); padding:2px 8px; border-radius:4px;
  font-size:11.5px; white-space:nowrap; color:var(--positive); background:var(--positive-soft);
}
.pill:empty{display:none}
.pill.info, .pill.blue{color:var(--info); background:var(--info-soft)}
.pill.good{color:var(--positive); background:var(--positive-soft)}
.pill.warn{color:var(--warn); background:var(--warn-soft)}
.pill.bad{color:var(--negative); background:var(--negative-soft)}
.pill.quiet{color:var(--ink); background:var(--neutral-soft)}
td .pill{margin-top:0}

/* ── Headings and controls ────────────────────────────────────────────────── */
section{margin-bottom:16px; overflow:hidden}
section h2{font-size:14px; padding:18px 20px 8px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; color:var(--ink)}
section h2 span{color:var(--muted); font-size:12.5px}
.panel{padding:18px 20px}
.card-head{display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap}
.card-head h2{padding:0; margin-bottom:4px; font-size:14px}
.card-head p{margin:0; color:var(--muted); font-size:12.5px; max-width:100ch}
.card-head p strong{color:var(--ink)}
.phead{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; padding:18px 20px 6px}
.phead h2{padding:0; font-size:14px}
.panel > .phead, .panel > .caption{padding-left:0; padding-right:0}
.panel > .phead{padding-top:0; margin-bottom:12px}
.tools{margin-left:auto; display:flex; align-items:center; gap:8px}
.tools button{border:1px solid var(--line); background:var(--bg); color:var(--ink); padding:6px 12px; font:inherit; font-size:12.5px; cursor:pointer}
.tools button:hover{background:var(--subtle)}
.caption{color:var(--muted); font-size:12px; padding:0 20px 14px}

/* Midday's Overview / Metrics switch: a soft well, the chosen one boxed. */
.seg{display:inline-flex; background:var(--subtle)}
.seg button{
  border:1px solid transparent; background:transparent; color:var(--muted);
  padding:7px 14px; font:inherit; font-size:13px; cursor:pointer; display:inline-flex; align-items:center;
}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--bg); border-color:var(--line); color:var(--ink)}
.seg button[disabled]{opacity:.4; cursor:not-allowed}
.card-head .seg{margin-left:auto}
.controls{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin:0 0 16px}
.controls .lbl{color:var(--muted); font-size:12.5px; margin-right:-4px}

/* ── Tables: full width, hairline rows, a divider between header cells ────── */
.scroll{overflow-x:auto}
table{border-collapse:separate; border-spacing:0; width:100%; font-size:13px}
th,td{text-align:left; padding:13px 16px; white-space:nowrap}
thead th{
  position:sticky; top:0; z-index:1; color:var(--muted); font-weight:400; font-size:12px;
  background:var(--bg); border-bottom:1px solid var(--line); padding-top:12px; padding-bottom:12px;
}
thead th + th{border-left:1px solid var(--line)}
thead th.sortable{cursor:pointer; user-select:none}
thead th.sortable:hover{color:var(--ink)}
tbody td{border-bottom:1px solid var(--line); color:var(--ink)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--subtle)}
tbody tr.tap{cursor:pointer}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
tr.mark td{background:var(--selected)}
tr.grouprow td{background:var(--subtle); color:var(--ink)}
tr.detail td{white-space:normal; color:var(--muted); font-size:12.5px; line-height:1.7; background:var(--subtle)}
tr.detail strong{color:var(--ink)}
.good{color:var(--positive)} .bad{color:var(--negative)} .warn{color:var(--warn)}
.faint{color:var(--muted)}
.empty{padding:20px; color:var(--muted)}
.def{border-bottom:1px dotted var(--muted); cursor:help}

/* ── Ranked list ──────────────────────────────────────────────────────────── */
.ranklist{margin-top:12px}
.rankrow{display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--line)}
.rankrow:first-child{border-top:0}
.rankrow .rank{color:var(--muted); width:20px; font-variant-numeric:tabular-nums; font-size:12px; font-family:var(--font-body)}
.rankname{min-width:0; flex:1}
.rankname strong{display:block; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rankname span{color:var(--muted); font-size:12px}
.rankvalue{text-align:right}
.rankvalue strong{display:block; font-variant-numeric:tabular-nums}
.rankvalue span{color:var(--muted); font-size:12px}

/* ── Charts ───────────────────────────────────────────────────────────────── */
.chartbox{position:relative; padding:8px 16px 16px}
.chartbox.h220{height:264px} .chartbox.h180{height:224px} .chartbox.h260{height:304px}
/* Legend keys are small squares, as Midday's "■ Current ■ Previous". */
.legend, .legendrow{display:flex; gap:16px; flex-wrap:wrap; padding:0 20px 16px; font-size:12px; color:var(--muted)}
.legend i, .legendrow i{width:8px; height:8px; display:inline-block; margin-right:7px; vertical-align:0}
.donutwrap{display:flex; gap:12px; align-items:center; justify-content:space-around; flex-wrap:wrap; padding:8px 20px 20px}
.donut{position:relative; width:150px; height:150px}
.donut .mid{position:absolute; inset:0; display:grid; place-content:center; text-align:center; pointer-events:none}
.donut .mid b{display:block; font-family:var(--font-display); font-size:24px; font-weight:400}
.donut .mid span{display:block; font-size:11.5px; color:var(--muted)}

/* ── Notices, errors, footnotes, sign-in ──────────────────────────────────── */
.notice{
  display:flex; gap:10px; align-items:flex-start; margin-bottom:8px; padding:12px 16px;
  border:1px solid var(--line); background:var(--subtle); color:var(--ink); font-size:13px;
}
.notice::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--warn); margin-top:7px; flex:none}
.err{padding:12px 16px; margin-bottom:16px; font-size:13px; border:1px solid var(--line); background:var(--negative-soft); color:var(--negative)}
.footnote{
  color:var(--muted); font-size:12.5px; line-height:1.7; max-width:100ch; margin:0 0 16px;
  padding:14px 18px; border:1px solid var(--line); background:var(--bg);
}
.footnote:empty{display:none}
.footnote strong{color:var(--ink)}
.notes p{margin:0 0 12px; max-width:92ch; font-size:13px; color:var(--muted); line-height:1.7}
.notes h3{font-size:12px; color:var(--ink); margin:20px 0 8px}
.notes h3:first-child{margin-top:0}
.notes strong{color:var(--ink)}
.notes code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; background:var(--subtle); padding:1px 5px; color:var(--ink)}

.gate{max-width:380px; margin:18vh auto; padding:36px 32px 30px; text-align:center; border:1px solid var(--line); background:var(--bg)}
.gate-mark{display:block; width:32px; height:30px; margin:0 auto 18px; color:var(--ink)}
.gate-mark svg{width:32px; height:30px; display:block}
.gate h2{font-family:var(--font-display); font-size:24px; margin-bottom:6px}
.gate p{color:var(--muted); margin:0 0 22px; font-size:13px}

/* ── Hub tiles (Home): Midday widget cards ────────────────────────────────── */
.hub{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px}
.hub a.tile{display:block; min-height:180px; padding:20px; color:inherit; text-decoration:none; border:1px solid var(--line); background:var(--bg)}
.hub a.tile:hover{background:var(--subtle)}
.hub .tile .ico{display:flex; align-items:center; gap:8px; color:var(--icon); margin-bottom:14px}
.hub .tile .ico svg{width:15px; height:15px}
.hub .tile h3{margin:0 0 8px; font-size:14px}
.hub .tile p{margin:0; color:var(--muted); font-size:13px; line-height:1.6}

/* ── Bottom-line statement (Sales, Pipeline) ─────────────────────────────── */
.bottom{margin:0 0 16px; padding:20px 22px}
.bottom .lbl{color:var(--muted); font-size:12.5px; margin-bottom:12px}
.bottom p{margin:0; font-size:15px; line-height:1.55; color:var(--ink); max-width:92ch}
.bottom .analogy{margin-top:10px; font-size:12.5px; color:var(--muted)}

/* ── At-a-glance verdict cards (Sales) ────────────────────────────────────── */
.glance{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:16px}
@media(max-width:900px){.glance{grid-template-columns:1fr}}
.glance .card{display:flex; flex-direction:column; padding:18px 20px}
.glance .q{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); margin-bottom:12px}
.light{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.dot{width:26px; height:26px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--subtle)}
.dot::after{content:""; width:8px; height:8px; border-radius:50%; background:var(--muted)}
.g .dot{background:var(--positive-soft)} .g .dot::after{background:var(--positive)}
.a .dot{background:var(--warn-soft)}     .a .dot::after{background:var(--warn)}
.r .dot{background:var(--negative-soft)} .r .dot::after{background:var(--negative)}
.verdict{font-family:var(--font-display); font-size:19px; line-height:1.25}
.g .verdict{color:var(--positive)} .a .verdict{color:var(--warn)} .r .verdict{color:var(--negative)}
.facts{list-style:none; margin:0; padding:0}
.facts li{font-size:12.5px; padding:7px 0; line-height:1.5; color:var(--ink); border-top:1px solid var(--line)}
.facts li:first-child{border-top:none}
.facts li.ok::before{content:"✓ "; color:var(--positive)}
.facts li.no::before{content:"✗ "; color:var(--negative)}
.facts li.na::before{content:"– "; color:var(--muted)}
.glance .note{color:var(--muted); font-size:11.5px; margin-top:auto; padding-top:11px}

/* ── Avatars ──────────────────────────────────────────────────────────────── */
.av{
  display:inline-grid; place-items:center; width:22px; height:22px; flex:none; border-radius:50%;
  font-size:9.5px; color:var(--ink); background:var(--subtle); border:1px solid var(--line);
}
.seg button .av{width:19px; height:19px; margin-right:8px}
.avrow{display:flex; align-items:center}
.avrow .av{width:28px; height:28px; font-size:11px; margin-left:-8px; box-shadow:0 0 0 2px var(--bg)}
.avrow .av:first-child{margin-left:0}

/* ── Scoreboard (Sales) ───────────────────────────────────────────────────── */
.board{display:flex; flex-direction:column; border:1px solid var(--line)}
.board .row{
  display:grid; grid-template-columns:40px 1fr repeat(4,minmax(86px,auto)) 96px;
  gap:14px; align-items:center; padding:14px 16px; cursor:pointer; background:var(--bg);
  border-bottom:1px solid var(--line);
}
.board .row:last-child{border-bottom:0}
.board .row:hover{background:var(--subtle)}
.board .row.lead{background:var(--selected); box-shadow:inset 2px 0 0 var(--ink)}
.rank{font-family:var(--font-display); font-size:18px; text-align:center; color:var(--muted); font-variant-numeric:tabular-nums}
.board .row.lead .rank{color:var(--ink)}
.rname{display:flex; align-items:center; gap:10px; min-width:0; font-size:13.5px}
.rname small{display:block; color:var(--muted); font-size:11.5px; margin-top:1px}
.stat{text-align:right}
.stat strong{display:block; font-size:15px; font-variant-numeric:tabular-nums}
.stat span{display:block; font-size:11px; color:var(--muted); margin-top:1px}
.spark{height:32px}
@media(max-width:900px){
  .board .row{grid-template-columns:32px 1fr repeat(2,minmax(74px,auto))}
  .board .row .hidesm{display:none}
}
.split{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:900px){.split{grid-template-columns:1fr}}

/* ── Phone: the rail becomes a bottom bar ─────────────────────────────────── */
@media (max-width:760px){
  .rail{top:auto; bottom:0; right:0; width:auto; height:60px; flex-direction:row; border-right:0; border-top:1px solid var(--line)}
  .rail .logo{display:none}
  .rail .pages{flex-direction:row; padding:0 8px; gap:4px; overflow-x:auto; width:100%; justify-content:space-around}
  .rail a.item::after{display:none}
  .frame{margin-left:0; padding-bottom:60px}
  header.topbar{padding:0 16px; height:60px}
  .search .lbl, .search kbd{display:none}
  .status{font-size:0; gap:0}
  main{padding:24px 16px 48px}
  .pagetitle{font-size:28px}
  .pagetitle .thin{display:none}
  .exec,.lower{grid-template-columns:1fr}
  .kpi-stack{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){
  .kpi-stack{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .card-head .seg{margin-left:0}
  .action{flex-direction:column; align-items:flex-start; gap:4px}
  .action span:last-child{margin-left:0; text-align:left}
}
@media (max-width:360px){ .cards{grid-template-columns:1fr} }

/* ── Accessibility ────────────────────────────────────────────────────────── */
:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} }
.visually-hidden{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ── Fewer words ──────────────────────────────────────────────────────────
   Derek, 2026-11-01: "extremely clean", no sources or explanations on screen.
   Intro paragraphs, footnotes, the "what each number counts" notes, the
   paragraph under each panel heading, captions and analogies are hidden on
   every page. The definitions are not lost: every underlined heading still
   carries its definition as hover text, and the notes remain in the page
   source and the README. Warnings that ask someone to act (.notice, .fixme,
   .warnbox) stay visible. Delete this block to bring the words back. */
.lede, .footnote, .notes, .caption, .analogy, .glance .note,
.card-head p, .fixme p, section:has(> .notes), section:has(> .panel.notes){display:none !important}
.card-head h2{margin-bottom:0}