:root{
  --ground:#ECEFEF; --panel:#FBFCFC; --panel-2:#F2F5F5; --rail:#35494C; --rail-ink:#B3C4C2;
  --ink:#1B2426; --ink-2:#3D4C4C; --muted:#5F6E6D;
  --rule:#E0E6E6; --rule-2:#CBD5D5;
  --accent:#1F6E8C; --accent-line:#1C79A6; --wash:#DCEAF0; --wash-line:#B9D6E2;
  --brass:#8A5F1E; --brass-line:#B87B43; --brass-soft:#F4EBDD;
  /* The benchmark lines share one chart, so they get their own slots rather
     than borrowing category hues that are busy elsewhere. */
  --corp:#5F369D; --fran:#03642B;
  /* A two-part split is one hue at two strengths: parts of a whole, and
     separable on lightness alone. */
  --sp1:#09597D; --sp2:#5595B9;
  --good:#2B7050; --good-soft:#E3EFE7; --bad:#9C4838; --bad-soft:#F7E6E1;
  --c1:#006F95; --c2:#BD7936; --c3:#8D5CA2; --c4:#509253;
  /* One hue stepped by lightness for the category ring: share is a magnitude,
     not an identity, so the biggest slice is the darkest. */
  /* Six categories, six identities: hues far apart and lightness alternating,
     so neighbouring slices separate by value as well as by hue. */
  --k1:#3763A4; --k2:#C08349; --k3:#0D836D; --k4:#B57DB8; --k5:#9D423E;
  --k6:#6C3D75; --k7:#859298;
  --shadow:0 1px 2px rgba(27,36,38,.04), 0 10px 26px -18px rgba(27,36,38,.22);
  /* One spacing unit: the page gutter, the gap between panels and the
     padding inside every one of them are the same measure. */
  --pad:18px; --band:#E3E9E9;
  /* The five grades, one colour each — final UI review, 5 Oct 2026. -ink is
     a chip's text, -soft its ground, -fill a bar or dot. Critical is the one
     FILLED chip (light text on its colour): the worst grade is the loudest,
     and it no longer reads as a paler At Risk. */
  --g-plat:#1F5F7A; --g-plat-soft:#DCEAF0; --g-plat-fill:#2C7FA3;
  --g-gold:#2B7050; --g-gold-soft:#E3EFE7; --g-gold-fill:#2E7A55;
  --g-silver:#4B6270; --g-silver-soft:#E6ECF0; --g-silver-fill:#7D93A0;
  --g-bronze:#7E5A14; --g-bronze-soft:#F3EAD6; --g-bronze-fill:#A9802F;
  --g-risk:#A8432A; --g-risk-soft:#FBE5DE; --g-risk-fill:#D4775B;
  --g-crit:#9C3B32; --g-crit-soft:#F7E3DE; --g-crit-ink:#FFFFFF; --g-crit-chip:#9C3B32; --g-crit-fill:#9C3B32;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#12181A; --panel:#182022; --panel-2:#1F2A2C; --rail:#0C1214; --rail-ink:#849796;
    --ink:#E8EDEC; --ink-2:#B9C6C5; --muted:#93A3A2;
    --rule:#26302F; --rule-2:#34413F;
    --accent:#7FC0D8; --accent-line:#4096C5; --wash:#1C3238; --wash-line:#2E505A;
    --brass:#DCA86A; --brass-line:#C0834A; --brass-soft:#2C2418;
    --corp:#88579F; --fran:#197B5B;
    --sp1:#80C1E6; --sp2:#347A9F;
    --good:#8CD0A8; --good-soft:#17322A; --bad:#E5A08E; --bad-soft:#33211C;
    --c1:#007DA2; --c2:#C68243; --c3:#9565AA; --c4:#59995C;
    --k1:#3B6FBC; --k2:#C8813C; --k3:#008E75; --k4:#B979BC; --k5:#B34945;
    --k6:#8C5891; --k7:#8B99A0;
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 12px 28px -18px rgba(0,0,0,.7);
    --band:#0D1315;
    --g-plat:#7FC0D8; --g-plat-soft:#1C3238; --g-plat-fill:#4096C5;
    --g-gold:#8CD0A8; --g-gold-soft:#17322A; --g-gold-fill:#5DB088;
    --g-silver:#B3C3CC; --g-silver-soft:#26323A; --g-silver-fill:#7E95A2;
    --g-bronze:#DCB46A; --g-bronze-soft:#2E2716; --g-bronze-fill:#B58F45;
    --g-risk:#F2A58E; --g-risk-soft:#3A231C; --g-risk-fill:#D97D63;
    --g-crit:#EE8B76; --g-crit-soft:#33201C; --g-crit-ink:#FFF4F0; --g-crit-chip:#A8382D; --g-crit-fill:#B03A2E;
  }
}
:root[data-theme="dark"]{
  --ground:#12181A; --panel:#182022; --panel-2:#1F2A2C; --rail:#0C1214; --rail-ink:#849796;
  --ink:#E8EDEC; --ink-2:#B9C6C5; --muted:#93A3A2;
  --rule:#26302F; --rule-2:#34413F;
  --accent:#7FC0D8; --accent-line:#4096C5; --wash:#1C3238; --wash-line:#2E505A;
  --brass:#DCA86A; --brass-line:#C0834A; --brass-soft:#2C2418;
  --corp:#88579F; --fran:#197B5B;
  --sp1:#80C1E6; --sp2:#347A9F;
  --good:#8CD0A8; --good-soft:#17322A; --bad:#E5A08E; --bad-soft:#33211C;
  --c1:#007DA2; --c2:#C68243; --c3:#9565AA; --c4:#59995C;
  --k1:#3B6FBC; --k2:#C8813C; --k3:#008E75; --k4:#B979BC; --k5:#B34945;
  --k6:#8C5891; --k7:#8B99A0;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 12px 28px -18px rgba(0,0,0,.7);
  --band:#0D1315;
  --g-plat:#7FC0D8; --g-plat-soft:#1C3238; --g-plat-fill:#4096C5;
  --g-gold:#8CD0A8; --g-gold-soft:#17322A; --g-gold-fill:#5DB088;
  --g-silver:#B3C3CC; --g-silver-soft:#26323A; --g-silver-fill:#7E95A2;
  --g-bronze:#DCB46A; --g-bronze-soft:#2E2716; --g-bronze-fill:#B58F45;
  --g-risk:#F2A58E; --g-risk-soft:#3A231C; --g-risk-fill:#D97D63;
  --g-crit:#EE8B76; --g-crit-soft:#33201C; --g-crit-ink:#FFF4F0; --g-crit-chip:#A8382D; --g-crit-fill:#B03A2E;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--ground);color:var(--ink);
  font:14px/1.5 "Instrument Sans",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
.num{font-family:"Archivo",system-ui,sans-serif;font-variant-numeric:tabular-nums}
.eyebrow{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* ---------- shell ---------- */
.wrap{display:flex;min-height:100vh;align-items:stretch}
/* position:sticky makes a stacking context even at z-index auto, which trapped
   the rail's tooltips beneath the sticky control strip. The rail sits above it. */
.rail{width:68px;flex:none;background:var(--rail);display:flex;flex-direction:column;
  align-items:center;gap:3px;padding:14px 0 18px;position:sticky;top:0;height:100vh;
  z-index:50}
.mark{width:38px;height:38px;border-radius:12px;background:var(--wash);color:var(--accent);
  display:grid;place-items:center;align-content:center;
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  font-weight:700;font-size:13px;line-height:1.02;letter-spacing:.01em;margin-bottom:10px}
.railbtn{width:40px;height:38px;border:0;background:transparent;color:var(--rail-ink);
  border-radius:10px;display:grid;place-items:center;cursor:pointer;position:relative}
.railbtn:hover{background:rgba(255,255,255,.07);color:#fff}
.railbtn[aria-current="page"]{background:rgba(255,255,255,.1);color:#fff}
.railbtn[aria-current="page"]::before{content:"";position:absolute;left:-14px;top:9px;
  width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--accent-line)}
.railbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.railtip{position:absolute;left:52px;top:50%;transform:translateY(-50%);white-space:nowrap;
  background:var(--rail);color:#fff;font-size:12px;padding:5px 10px;border-radius:7px;
  opacity:0;pointer-events:none;transition:opacity .12s;z-index:40;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.6)}
.railbtn:hover .railtip,.railbtn:focus-visible .railtip{opacity:1}
.railsp{flex:1}

/* ---------- the labelled menu (review item 4) ----------
   Wide: a 212px sidebar, full names in five groups. Below 1360px: 84px,
   an icon with a short name under it and a rule between groups. The link
   markup is the same; these rules pick which label shows. */
.rail a.railbtn{text-decoration:none}
.railtip{display:none}
.railfoot{display:flex;flex-direction:column;align-items:center;gap:10px}
.rail{width:212px;align-items:stretch;padding:14px 12px 14px;gap:0;overflow:hidden}
.rail .mark{margin:0 0 6px 4px;flex:none;text-decoration:none}
/* Only the list scrolls; the logo and the account stay put. The two
   'local' covers hide the two 'scroll' shadows until there is something
   above or below to scroll to. */
.raillist{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;margin:0 -12px;padding:0 12px 6px;
  --shade:rgba(0,0,0,.42);
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent;
  background:
    linear-gradient(var(--rail) 30%, rgba(0,0,0,0)) center top / 100% 28px no-repeat local,
    linear-gradient(rgba(0,0,0,0), var(--rail) 70%) center bottom / 100% 28px no-repeat local,
    radial-gradient(farthest-side at 50% 0, var(--shade), rgba(0,0,0,0)) center top / 100% 12px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, var(--shade), rgba(0,0,0,0)) center bottom / 100% 12px no-repeat scroll;
  background-color:var(--rail)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .raillist{--shade:rgba(255,255,255,.14)}}
:root[data-theme="dark"] .raillist{--shade:rgba(255,255,255,.14)}
.raillinks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.raillinks.shut{display:none}
.raillinks-plain{margin-top:10px}
.raillinks li{display:block;margin:0;padding:0}
.railgrp{font:600 10px/1 "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rail-ink);margin:10px 0 4px 10px}
/* A heading that folds is a button the full width of the menu, with an arrow
   that points down when open and right when closed. */
.railfold{display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;
  margin:6px 0 2px;padding:9px 10px;border:0;border-radius:8px;background:transparent;
  cursor:pointer;text-align:left;white-space:nowrap}
.railfold:hover{background:rgba(255,255,255,.07);color:#fff}
.railfold:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.railchev{flex:none;margin-left:auto;width:12px;height:12px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.railfold[aria-expanded="false"] .railchev{transform:rotate(-90deg)}
.railsep{display:none}
.rail .railbtn{flex:none;width:auto;height:31px;display:flex;align-items:center;justify-content:flex-start;
  gap:11px;padding:0 10px;font-size:13px;line-height:1.2}
.rail .railbtn svg{flex:none}
.rail .railbtn .lbl-short{display:none}
.rail .railbtn .lbl-long{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail .railbtn[aria-current="page"]::before{left:-12px;top:5.5px}
.rail .railfoot{flex-direction:row;margin:6px 0 0;align-items:stretch}
@media (min-width:761px) and (max-width:1359px){
  .rail{width:84px;align-items:center;padding:14px 0 14px;gap:0}
  .rail .mark{margin:0 0 8px}
  .raillist{width:100%;margin:0;padding:0 0 6px;align-items:center}
  .raillinks{align-items:center;gap:2px}
  /* The icon menu has no headings, so nothing folds: every link shows. */
  .raillinks.shut{display:flex}
  .raillinks-plain{margin-top:0}
  .railgrp{display:none}
  .railsep{display:block;width:36px;height:1px;background:rgba(255,255,255,.12);margin:5px 0}
  .rail .railbtn{width:72px;height:50px;flex-direction:column;justify-content:center;gap:4px;
    padding:0;font-size:10px;line-height:1.1;min-height:36px}
  .rail .railbtn .lbl-long{display:none}
  .rail .railbtn .lbl-short{display:block;white-space:nowrap;text-align:center}
  .rail .railbtn[aria-current="page"]::before{left:-6px;top:15px}
  .rail .railfoot{flex-direction:column;margin:6px 0 0}
}
/* ---------- the account button and its menu (Bobby, 4 Oct 2026) ---------- */
.acctbtn{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:6px 8px;
  border:0;border-top:1px solid rgba(255,255,255,.1);border-radius:0;background:transparent;
  color:var(--rail-ink);font:inherit;font-size:13px;cursor:pointer;text-align:left;padding-top:12px}
.acctbtn:hover,.acctbtn[aria-expanded="true"]{color:#fff}
.acctbtn:hover .acct-ini,.acctbtn[aria-expanded="true"] .acct-ini{border-color:rgba(255,255,255,.5)}
.acct-ini{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:inherit;
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  font-weight:600;font-size:11.5px;letter-spacing:.02em}
.acct-ini svg,.acct-chev{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.acct-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-chev{flex:none;opacity:.7}
.acctmenu{position:fixed;z-index:200;width:240px;background:var(--panel);color:var(--ink);
  border:1px solid var(--rule-2);border-radius:12px;box-shadow:0 14px 34px -12px rgba(0,0,0,.45);
  padding:6px;font-size:13px}
.acctmenu[hidden]{display:none}
.acct-who{padding:8px 10px 10px}
.acct-full{font-weight:600;color:var(--ink)}
.acct-sub{color:var(--muted);font-size:12px;margin-top:2px;overflow-wrap:anywhere}
.acct-sec{border-top:1px solid var(--rule);padding:8px 4px 4px}
.acct-lab{display:block;font:500 9.5px/1.6 "IBM Plex Mono",ui-monospace,Menlo,monospace;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 6px 6px}
.acct-segs{display:flex;gap:2px;background:var(--panel-2);border:1px solid var(--rule);
  border-radius:8px;padding:2px}
.acct-seg{flex:1;border:0;background:transparent;color:var(--ink-2);font:inherit;font-size:12.5px;
  padding:6px 0;border-radius:6px;cursor:pointer}
.acct-seg:hover{color:var(--ink)}
.acct-seg[aria-checked="true"]{background:var(--panel);color:var(--ink);font-weight:600;
  box-shadow:0 1px 2px rgba(0,0,0,.12)}
.acct-item{width:100%;display:flex;align-items:center;gap:10px;border:0;background:transparent;
  color:var(--ink);font:inherit;font-size:13px;padding:8px 8px;border-radius:8px;cursor:pointer;text-align:left}
.acct-item:hover{background:var(--panel-2)}
a.acct-item{text-decoration:none}
.acct-item[aria-current="page"]{font-weight:600}
.acct-item svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.acctbtn:focus-visible,.acct-seg:focus-visible,.acct-item:focus-visible{outline:2px solid var(--accent);
  outline-offset:2px;border-radius:8px}
/* The icon menu (below 1360px): the initials alone, the name in the menu. */
@media (min-width:761px) and (max-width:1359px){
  .acctbtn{flex:none;width:72px;justify-content:center;padding:12px 0 4px}
  .acct-name,.acct-chev{display:none}
}
@media print{.acctmenu{display:none !important}}
button.acct-item+button.acct-item{margin-top:1px}

/* ---------- the change-password dialog (4 Oct 2026) ---------- */
.pwdlg{border:1px solid var(--rule-2);border-radius:14px;background:var(--panel);color:var(--ink);
  padding:22px 22px 18px;width:min(380px,calc(100vw - 32px));box-shadow:0 24px 60px -20px rgba(0,0,0,.55)}
.pwdlg::backdrop{background:rgba(10,16,18,.5)}
.pwdlg h2{margin:0 0 6px;font:700 19px/1.25 "Archivo",system-ui,sans-serif}
.pw-note{margin:0 0 14px;color:var(--muted);font-size:13px;line-height:1.45}
.pw-f{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin:0 0 12px}
.pw-f input{display:block;width:100%;box-sizing:border-box;margin-top:5px;padding:9px 11px;
  font:inherit;font-size:14px;font-weight:400;color:var(--ink);background:var(--panel-2);
  border:1px solid var(--rule-2);border-radius:9px}
.pw-f input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.pw-msg{min-height:1.3em;margin:0 0 10px;color:var(--bad);font-size:13px}
.pw-btns{display:flex;justify-content:flex-end;gap:8px}
.pw-btn{font:inherit;font-size:13.5px;font-weight:600;padding:9px 16px;border-radius:9px;cursor:pointer;
  border:1px solid var(--rule-2);background:var(--panel);color:var(--ink)}
.pw-btn.pw-go{background:var(--accent);border-color:var(--accent);color:#fff}
:root[data-theme="dark"] .pw-btn.pw-go{color:#0C1214}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .pw-btn.pw-go{color:#0C1214}}
.pw-btn:disabled{opacity:.6;cursor:default}
.pw-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- the phone's menu: a drawer (nav review item 1, 4 Oct 2026) ---- */
.menubtn{display:none}
.railscrim[hidden]{display:none}
@media (max-width:760px){
  .rail{position:fixed;left:0;top:0;bottom:0;height:auto;width:264px;max-width:86vw;z-index:120;
    transform:translateX(-105%);visibility:hidden;
    transition:transform .2s ease, visibility 0s linear .2s;
    box-shadow:0 0 40px -10px rgba(0,0,0,.6)}
  .rail.open{transform:none;visibility:visible;transition:transform .2s ease, visibility 0s}
  .railscrim{position:fixed;inset:0;z-index:110;background:rgba(10,16,18,.45)}
  .menubtn{display:inline-flex;float:right;align-items:center;gap:6px;margin:0 0 6px 12px;
    min-height:40px;padding:0 12px;border:1px solid var(--rule-2);border-radius:10px;
    background:var(--panel);color:var(--ink);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
  .menubtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
}
@media print{.menubtn,.railscrim{display:none !important}}

.page{flex:1;min-width:0;display:flex;flex-direction:column}
/* ⚠ THE PAGE'S NAME IS THE HEADING, THE GREETING IS A LINE — review item 9,
   Bobby's choice of 30 September from three mock-ups. The greeting was 54px,
   the largest thing on every page, and pushed the first figure 259px down;
   it is now a quiet line above the heading and the figures start ~45px
   higher. */
.topbar{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;
  padding:16px var(--pad) 12px;border-bottom:1px solid var(--rule)}
.hello{font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:14px;font-weight:500;color:var(--muted);letter-spacing:0;margin:0;line-height:1.3}
/* ⚠ THE PAGE'S OWN NAME, AND THE STORE ON SCREEN. Until 2026-09-22 no
   rebuilt page said either one anywhere a reader could see it — only the
   browser tab did. The greeting above is a greeting; this is the heading. */
.ptitle{margin:4px 0 0;font-family:"Archivo",system-ui,sans-serif;font-size:30px;
  font-weight:700;color:var(--ink);letter-spacing:-.01em;line-height:1.15;text-wrap:balance}
.ptsep{color:var(--muted);font-weight:400;padding:0 .4em}
.subline{margin:6px 0 0;color:var(--muted);font-size:13px}

/* ---------- phase 26: the skip link, restored 2026-09-22 ----------
   Eleven rail items sit above every page's content. On a keyboard that is
   eleven tabs before the first figure, on every page, every time. The link is
   the first thing in the tab order and invisible until it is focused — the
   standard pattern. It was in shell.js and the rebuilt shell never called it.
   ⚠ NEVER give this display:none. An element that is not rendered is not
   focusable, and a skip link that cannot be focused is decoration. */
.skiplink{position:absolute;left:-9999px;top:0;z-index:100;padding:9px 14px;
  background:var(--accent);color:#fff;border-radius:0 0 6px 0;font-size:13px;
  font-weight:600;text-decoration:none}
.skiplink:focus{left:0}
#page:focus{outline:none}
#page:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media (max-width:760px){.ptitle{font-size:24px}}
.grow{flex:1}

/* ---------- control strip ---------- */
.controls{display:flex;gap:22px;flex-wrap:wrap;align-items:center;
  padding:14px var(--pad);border-bottom:1px solid var(--rule);background:var(--panel);
  position:sticky;top:0;z-index:20}
.field{display:flex;flex-direction:column;gap:6px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font:inherit;font-size:13px;border:1px solid var(--rule-2);background:var(--panel);
  color:var(--ink-2);border-radius:999px;padding:6px 14px;cursor:pointer;white-space:nowrap}
.chip:hover{border-color:var(--wash-line);background:var(--panel-2);color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--wash);border-color:var(--wash-line);color:var(--accent);
  font-weight:600}
select.chip{padding-right:28px;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 15px) 15px,calc(100% - 11px) 15px;
  background-size:4px 4px,4px 4px;background-repeat:no-repeat}
select.chip:disabled{opacity:.4;cursor:not-allowed}
/* "My home" — a quiet chip beside the store picker (flow review, 30 Sep). */
.chip.homebtn{font-size:12px;padding:6px 12px;color:var(--muted)}
.chip.homebtn[aria-pressed="true"]{font-weight:500}

/* ---------- the strip as five groups (Bobby, 5 Oct 2026) ----------
   Thirteen outlined pills read as thirteen equal things. Each field is now
   one segmented bar — the same trough-and-raised-tab look as the account
   menu's Light/Dark switch — so the eye sees Year, Level, Time frame and
   Measure, and the one filled tab in each says what the view is. */
.controls{gap:14px 20px;align-items:flex-end;padding-top:12px;padding-bottom:12px}
.controls .eyebrow{font-size:9.5px;letter-spacing:.12em;color:var(--muted);padding-left:2px}
.controls .field{gap:5px}
.field-end{margin-left:auto}
.seg{display:inline-flex;align-items:center;gap:2px;flex-wrap:nowrap;padding:2px;
  background:var(--panel-2);border:1px solid var(--rule);border-radius:9px}
.seg > .chip,.seg > .rangewrap > .chip{border:0;background-color:transparent;border-radius:7px;
  padding:0 11px;height:28px;line-height:28px;font-size:13px;color:var(--ink-2);font-weight:400}
.seg > .chip:hover,.seg > .rangewrap > .chip:hover{background-color:transparent;color:var(--ink)}
.seg > .chip[aria-pressed="true"],.seg > .rangewrap > .chip[aria-pressed="true"]{background-color:var(--wash);
  color:var(--accent);font-weight:600;box-shadow:0 0 0 1px var(--wash-line),0 1px 2px rgba(0,0,0,.10)}
.seg > .chip:focus-visible,.seg > .rangewrap > .chip:focus-visible{outline:2px solid var(--accent);
  outline-offset:0;border-radius:7px}
/* Selects: arrow centred, and as wide as the choice showing rather than the
   longest option ("Operations manager", "vs 2 years ago — no data") where
   the browser can do that (field-sizing; others keep the old width). */
.controls select.chip{background-position:calc(100% - 15px) 50%,calc(100% - 11px) 50%;field-sizing:content}
.seg > select.chip{padding-right:28px;font-weight:500;color:var(--ink)}
/* The rolling/custom pair, set a little apart inside the time-frame bar. */
.seg > [data-kind="rolling"]{margin-left:9px;position:relative}
.seg > [data-kind="rolling"]::before{content:"";position:absolute;left:-6px;top:6px;bottom:6px;
  width:1px;background:var(--rule-2)}
/* My home: a star at the end of the Level group, the words for hover and
   screen readers. Filled and accent when this view is home. */
.seg > .chip.homebtn{padding:0 10px;font-size:15px;color:var(--muted);box-shadow:none}
.seg > .chip.homebtn[aria-pressed="true"]{background-color:transparent;color:var(--accent);box-shadow:none}
.seg > .chip.homebtn:hover{color:var(--accent)}
.vh{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0}
/* The picker for the chosen frame sits after the bar, as a plain dropdown. */
#basis{align-items:center;gap:8px;flex-wrap:nowrap}
#basis > .framepick{height:34px;padding:0 30px 0 13px;border-radius:9px;font-weight:500;color:var(--ink)}
@media (max-width:760px){
  .field-end{margin-left:0}
  .seg,#basis{flex-wrap:wrap}
  .seg{border-radius:12px}
  .seg > [data-kind="rolling"]{margin-left:0}
  .seg > [data-kind="rolling"]::before{display:none}
}

/* Is each source in for the last closed week (freshness.js; ruled 4 Oct
   2026). One pill right of the title: green when every weekly source covers
   the week that closed last Friday, red naming what has not. The detail
   opens from it. Operations, which has only filed reports, shows their
   dates instead. */
.topbar > div:first-child{flex:1 1 auto;min-width:0}
.freshbox{position:relative;flex:0 0 auto;min-width:0;margin-top:4px;font-size:12px;color:var(--muted)}
.fr-pill{display:inline-flex;align-items:center;gap:7px;font:500 12px/1 inherit;font-family:inherit;
  border:0;border-radius:999px;padding:6px 12px;cursor:pointer;white-space:nowrap}
.fr-pill.ok{background:var(--good-soft);color:var(--good)}
.fr-pill.no{background:var(--bad-soft);color:var(--bad);font-weight:600}
.fr-pill.due{background:var(--brass-soft);color:var(--brass);font-weight:600}
.fr-pill.info{background:var(--panel-2);color:var(--ink-2)}
.fr-pill:focus-visible{outline:2px solid var(--accent-line);outline-offset:2px}
.fr-dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.fr-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:40;width:240px;
  background:var(--panel);border:1px solid var(--rule-2);border-radius:8px;
  box-shadow:var(--shadow);padding:10px 12px;color:var(--ink-2)}
.fr-pop[hidden]{display:none}
.fr-h,.fr-lab{display:block;margin:0 0 4px;font:500 9.5px/1.6 "IBM Plex Mono",ui-monospace,Menlo,monospace;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fr-pop table + .fr-h{margin-top:10px;padding-top:8px;border-top:1px solid var(--rule)}
.fr-pop table,.fr-filed table{width:100%;border-collapse:collapse}
.fr-pop td,.fr-filed td{padding:2px 0}
.fr-d{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.fr-pop tr.ok .fr-d{color:var(--good)}
.fr-pop tr.no .fr-d{color:var(--bad);font-weight:600}
.fr-pop tr.due .fr-d{color:var(--brass);font-weight:600}
.fr-filed{text-align:right}
.fr-filed td:first-child{padding-right:10px}
.fr-filed .fr-d{color:var(--ink);font-weight:500}
.fr-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:760px){
  .topbar > div:first-child{flex-basis:100%}
  .freshbox{margin-top:6px}
  .fr-pop{width:min(240px,calc(100vw - 32px))}
  .fr-filed{text-align:left}
}
@media print{.fr-pop{display:none}}

main{padding:0 var(--pad) 60px;display:flex;flex-direction:column;gap:var(--pad)}
/* Follow-up 2, 30 Sep: <main> is the container every page's width rules ask
   about, so a page lays out for the room it has whatever the menu takes. */
main#page{container-type:inline-size;container-name:page}
/* ---------- vertical rhythm (5 Oct 2026, margins review) ----------
   ⚠ MAIN'S GAP IS THE ONLY SPACE BETWEEN ITS SECTIONS. The strips and cards
   that arrived with their own margin-bottom (framewarn, notes, quarter close,
   needs attention, At a Glance's grids, feedback) doubled it to 36px wherever
   they landed; an empty #framewarn still took a gap, so the band sat 18px off
   the strip on eight pages and flush on three; and main had no top padding,
   so a warning or a panel that came first touched the strip. So: main pads
   its top by one --pad, nothing directly in main has a vertical margin, an
   empty slot takes no gap, and a full-bleed band that is the first thing on
   the page pulls up to meet the strip. tools/check_spacing.js pins it. */
main#page{padding-top:var(--pad)}
main#page > *{margin-top:0;margin-bottom:0}
main#page > #framewarn:empty,main#page > #qclose:empty{display:none}
main#page > .band:first-child,
main#page > :is(:empty,[hidden]):first-child + .band,
main#page > :is(:empty,[hidden]):first-child + :is(:empty,[hidden]) + .band{margin-top:calc(-1 * var(--pad))}
#framewarn > .framewarn,#qclose > .qclose{margin:0}
#framewarn > .framewarn + .framewarn{margin-top:8px}
/* A section heading belongs to what follows it, not to what came before. */
main#page > .gl-sechead{margin:4px 0 -8px}
/* The five figures are the page's hero, so they sit on their own ground and
   bleed to the edges rather than floating in the same field as everything else. */
.band{margin:0 calc(-1 * var(--pad));padding:var(--pad);background:var(--band);
  border-bottom:1px solid var(--rule)}

/* ---------- the pillar's grade, above its tiles (review item 3) ---------- */
.phead{display:flex;align-items:center;gap:10px 28px;flex-wrap:wrap;
  margin:0 0 var(--pad);padding:12px 16px;background:var(--panel);
  border:1px solid var(--rule);border-radius:14px}
.phead:empty{display:none}
.ph-l{display:flex;flex-direction:column;gap:2px;min-width:0}
.ph-g{font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:28px;font-weight:700;line-height:1.05;letter-spacing:-.015em}
.ph-g.good{color:var(--good)} .ph-g.warn{color:var(--brass)}
.ph-g.bad{color:var(--bad)} .ph-g.none{color:var(--muted)}
.ph-m{display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--ink-2)}
.ph-pts b{color:var(--ink);font-weight:700}
/* Plain text, so a glossary term wrapped in its own element stays in the
   sentence. Only the list of tests (Wage) is laid out as a row of items — as a
   flex row the Performance line broke apart round "All CeX" (4 Oct 2026). */
.ph-d{color:var(--muted)}
.ph-d.ph-tests{display:flex;flex-wrap:wrap;gap:4px 14px}
.ph-t.yes{color:var(--good)} .ph-t.no{color:var(--bad)}
.ph-note{margin:0;flex:1 1 260px;font-size:12.5px;color:var(--ink-2)}
.ph-note.bad{color:var(--bad)}
.ph-link{margin-left:auto;font-size:12.5px;color:var(--accent);text-decoration:none;
  white-space:nowrap}
.ph-link:hover{text-decoration:underline;text-underline-offset:3px}
@container page (max-width:456px){.ph-link{margin-left:0}}

/* ---------- tiles ---------- */
/* Six across is the row's shape, so the tiles compress rather than wrap: the
   figure and the padding scale with the viewport down to a readable floor. */
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--pad)}
@container page (max-width:1040px){.tiles{grid-template-columns:repeat(3,1fr)}}
@container page (max-width:656px){.tiles{grid-template-columns:repeat(2,1fr)}}
@container page (max-width:456px){.tiles{grid-template-columns:1fr}}
.tile{background:var(--panel);border:1px solid var(--rule);border-radius:14px;
  padding:clamp(11px, 1.134cqi, var(--pad));display:flex;flex-direction:column;gap:2px;
  min-width:0}
/* The wash marks the tile whose breakdown is open below — it is a state, not a
   ranking, so nothing wears it until it is expanded. */
.tile.open{background:var(--wash);border-color:var(--wash-line);box-shadow:var(--shadow)}
.tile.open .eyebrow{color:var(--accent)}
.tile.open .tsub{color:var(--ink-2)}
.trow{display:flex;align-items:center;justify-content:space-between;gap:8px}
/* The label holds one line at any width — a wrapped eyebrow drops that tile's
   figure below its neighbours' and the row stops reading as a row. */
.trow .eyebrow{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:clamp(9px, 0.778cqi, 10px);letter-spacing:clamp(.03em, 0.092cqi, .14em)}
@container page (max-width:1250px){.trow .eyebrow{letter-spacing:.01em}.trow{gap:6px}}
.trow .badge{flex:none}
/* Two decimal places made every change badge wider (final UI review, 5 Oct
   2026): at 1200 "+10.75%" took the room "Retail sales" needed. The badge
   gives up a point and some padding as the page narrows; the label keeps its
   words. */
.trow .badge{font-size:clamp(11px, 0.886cqi, 12.5px);padding:2px clamp(6px, 0.648cqi, 9px)}
/* The headline figure carries the same weight as the greeting — 42px, the
   page's display size. */
.tval{font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  font-variant-numeric:tabular-nums;font-size:clamp(23px, 2.506cqi, 42px);font-weight:600;
  letter-spacing:-.035em;line-height:1.08;margin-top:8px;white-space:nowrap}
.tsub{font-size:clamp(10.5px, 0.864cqi, 12px);color:var(--muted);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Reserved whether or not the tile has a ratio to state, so the four
   comparisons sit on one baseline across the whole row. */
.tile .tsub{min-height:18px}
/* The scored comparison, given its own surface directly under the figure. */
.gaprow{margin-top:11px;display:flex;align-items:baseline;justify-content:space-between;
  gap:6px;padding:6px clamp(6px, 0.648cqi, 10px);border-radius:8px;
  font-size:clamp(10.5px, 0.886cqi, 12px);white-space:nowrap}
/* The pill holds one line at every width. Where there is not room for both,
   the benchmark's own figure gives way — never the gap, and never by cutting a
   number in half. */
.gaprow span{min-width:0}
.gaprow b{flex:none;margin-left:auto}
@container page (max-width:1296px){.bmv{display:none}}
.gaprow b{font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  font-variant-numeric:tabular-nums;font-size:clamp(12.5px, 1.026cqi, 15px);font-weight:600;
  letter-spacing:-.01em}
.gaprow.up{background:var(--good-soft);color:var(--good)}
.gaprow.down{background:var(--bad-soft);color:var(--bad)}
/* A gap that prints as 0.00ppt is level, and is not toned as a fall. */
.gaprow.flat{background:var(--panel-2);color:var(--ink-2)}
.lastline{margin-top:8px;font-size:clamp(10.5px, 0.864cqi, 12px);color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lastline b{font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  font-variant-numeric:tabular-nums;font-weight:600}
.lastline b.pos{color:var(--good)} .lastline b.neg{color:var(--bad)}
.badge{display:inline-flex;align-items:center;gap:4px;font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:600;
  border-radius:999px;padding:2px 9px;white-space:nowrap}
.badge.up{background:var(--good-soft);color:var(--good)}
.badge.down{background:var(--bad-soft);color:var(--bad)}
.badge.flat{background:var(--panel-2);color:var(--muted)}
.tile.open .badge{background:var(--panel)}
/* The expanded tile sits on a wash, so its quietest line needs a darker ink to
   clear the contrast floor the others clear on the plain panel. */
.tile.open .lastline{color:var(--ink-2)}

/* A tile opens a breakdown under the row; the open one keeps a marker so it is
   clear which tile the panel belongs to. */
.tile{position:relative}
.tile.can{cursor:pointer;text-align:left;width:100%;font:inherit;color:inherit}
.tile.can:hover{border-color:var(--rule-2)}
.tile.can:hover .more{color:var(--accent)}
.tile.open{border-color:var(--accent);box-shadow:var(--shadow), inset 0 0 0 1px var(--accent)}
.tile .more{margin-top:auto;padding-top:10px;font-size:11.5px;color:var(--muted)}
.tile.open .more{color:var(--accent)}
.tile.open::after{content:"";position:absolute;left:50%;bottom:calc(-1 * var(--pad) - 1px);
  width:14px;height:14px;margin-left:-7px;background:var(--panel);
  border-left:1px solid var(--accent);border-top:1px solid var(--accent);
  transform:rotate(45deg)}
.drill{gap:0}
.drillhead{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding-bottom:12px;border-bottom:1px solid var(--rule)}

.drillhead .sub{color:var(--muted);font-size:12.5px}
.closebtn{font:inherit;font-size:12.5px;border:1px solid var(--rule-2);background:var(--panel);
  color:var(--ink-2);border-radius:999px;padding:4px 12px;cursor:pointer}
.closebtn:hover{border-color:var(--accent);color:var(--accent)}
/* The headline before the detail: the figure, what it did, and the year it is
   read against, all on one line at the top of the panel. */
.printonly{display:none}
.dhero{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px 18px;
  padding:14px 0 2px;border-bottom:1px solid var(--rule)}
.dhero .hv{font-size:clamp(30px,3.348cqi,44px);font-weight:600;letter-spacing:-.03em;
  line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.dhero .hside{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.dhero .hnote{color:var(--muted);font-size:13px}
.drillgrid{display:grid;grid-template-columns:minmax(230px,1fr) 1.75fr;
  gap:var(--pad);padding-top:14px}
.dcol{display:flex;flex-direction:column;gap:var(--pad);min-width:0}
@container page (max-width:796px){.drillgrid{grid-template-columns:1fr}}
/* Ring on one half, the supporting figures on the other. */
.dline{transition:opacity .13s}
.btab tbody tr{transition:opacity .13s}
.btab tbody tr.dim{opacity:.5}
.btab tbody tr:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.insidegrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 12px;align-items:start;
  padding:2px 0 4px}
/* Only the ring centres against its neighbour; blocks line up from the top. */
.insidegrid.ring{align-items:center}
@container page (max-width:1136px){.insidegrid{grid-template-columns:1fr 1fr}}
.stats{display:flex;flex-direction:column;gap:14px;min-width:0}
.stat{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:2px 8px;min-width:0}
.stat .eyebrow{grid-column:1 / -1}
.statv{font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:clamp(19px,1.674cqi,24px);font-weight:600;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;color:var(--ink);line-height:1.1;white-space:nowrap}
.stat .badge{justify-self:end;align-self:center}
/* Two bars, this year over last, both against the larger of the pair — so a
   figure that barely moved looks like one that barely moved. */
.statbars{grid-column:1 / -1;display:flex;flex-direction:column;gap:3px;margin-top:6px}
.statbars i{display:block;height:7px;border-radius:3px;min-width:2px}
.statbars i.now{background:var(--accent-line)}
.statbars i.was{background:var(--rule-2)}
.statwas{grid-column:1 / -1;font-size:11px;color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.splitwrap{position:relative;display:grid;justify-items:center;padding:4px 0 2px}
.sringbox{position:relative;width:100%;max-width:150px}
.sring{display:block;width:100%;max-width:150px;height:auto}
.sslice{transition:opacity .12s}
/* The readout has to live inside the ring's hole, which is 57% of the ring's
   width — so its text is capped to that and wraps rather than spilling over
   the slices. */
.scentre{position:absolute;top:0;left:0;right:0;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;pointer-events:none;text-align:center}
.scentre > span{max-width:80px}
.scentre .sv{font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:16px;font-weight:600;letter-spacing:-.025em;font-variant-numeric:tabular-nums;
  color:var(--ink);line-height:1.15}
.scentre .sl{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.2}
.scentre .sc{font-size:9.5px;color:var(--muted);line-height:1.25}
.skeys{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;padding-top:8px}
.skey{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12px;
  background:none;border:0;padding:2px 0;cursor:default;color:var(--ink-2)}
.skey .sw{width:9px;height:9px;border-radius:2px;flex:none}
.skey .ss{font-variant-numeric:tabular-nums;color:var(--muted)}
.skey:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.bnote{color:var(--muted);font-size:11.5px;line-height:1.55;margin:10px 0 0;
  padding-top:9px;border-top:1px solid var(--rule)}
/* Movers: one bar per row, sized against the biggest, biggest first. */
/* Ring on one half, the supporting figures on the other. */
.insidegrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 12px;align-items:start;
  padding:2px 0 4px}
/* Only the ring centres against its neighbour; blocks line up from the top. */
.insidegrid.ring{align-items:center}
@container page (max-width:1136px){.insidegrid{grid-template-columns:1fr 1fr}}
.stats{display:flex;flex-direction:column;gap:14px;min-width:0}
.stat{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:2px 8px;min-width:0}
.stat .eyebrow{grid-column:1 / -1}
.statv{font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:clamp(19px,1.674cqi,24px);font-weight:600;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;color:var(--ink);line-height:1.1;white-space:nowrap}
.stat .badge{justify-self:end;align-self:center}
/* Two bars, this year over last, both against the larger of the pair — so a
   figure that barely moved looks like one that barely moved. */
.statbars{grid-column:1 / -1;display:flex;flex-direction:column;gap:3px;margin-top:6px}
.statbars i{display:block;height:7px;border-radius:3px;min-width:2px}
.statbars i.now{background:var(--accent-line)}
.statbars i.was{background:var(--rule-2)}
.statwas{grid-column:1 / -1;font-size:11px;color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.splitwrap{position:relative;display:grid;justify-items:center;padding:4px 0 2px}
.sringbox{position:relative;width:100%;max-width:150px}
.sring{display:block;width:100%;max-width:150px;height:auto}
.sslice{transition:opacity .12s}
/* The readout has to live inside the ring's hole, which is 57% of the ring's
   width — so its text is capped to that and wraps rather than spilling over
   the slices. */
.scentre{position:absolute;top:0;left:0;right:0;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;pointer-events:none;text-align:center}
.scentre > span{max-width:80px}
.scentre .sv{font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:16px;font-weight:600;letter-spacing:-.025em;font-variant-numeric:tabular-nums;
  color:var(--ink);line-height:1.15}
.scentre .sl{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.2}
.scentre .sc{font-size:9.5px;color:var(--muted);line-height:1.25}
.skeys{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;padding-top:8px}
.skey{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12px;
  background:none;border:0;padding:2px 0;cursor:default;color:var(--ink-2)}
.skey .sw{width:9px;height:9px;border-radius:2px;flex:none}
.skey .ss{font-variant-numeric:tabular-nums;color:var(--muted)}
.skey:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.bnote{color:var(--muted);font-size:11.5px;line-height:1.5;margin:10px 0 0;
  padding-top:9px;border-top:1px solid var(--rule)}
/* With the benchmark column the row gains a fifth cell; the wash marks how far
   from All CeX, the same device the store table uses. */
.cdriv.g{grid-template-columns:minmax(72px,1.1fr) minmax(48px,1.4fr)
  minmax(56px,auto) minmax(50px,auto) minmax(58px,auto)}
.cdhead span:nth-child(5){text-align:right}
.cdg{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600;
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  border-radius:5px;padding:2px 6px}
.cdhead span:nth-child(5){padding-right:6px}
.cdg.washed.pos{background:color-mix(in srgb, var(--good-soft) calc(var(--w) * 100%), transparent);
  color:var(--good)}
.cdg.washed.neg{background:color-mix(in srgb, var(--bad-soft) calc(var(--w) * 100%), transparent);
  color:var(--bad)}
/* The header and every row are ONE grid, not several. Sized separately they
   each measured their own text and drifted apart by up to 45px, so the
   container owns the tracks and the rows borrow them. */
.cdriv{display:grid;grid-template-columns:minmax(72px,1.1fr) minmax(48px,1.4fr)
  minmax(56px,auto) minmax(50px,auto);gap:0 clamp(8px,0.918cqi,14px)}
.cdhead,.cdrow{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;
  align-items:center;gap:4px clamp(8px,0.918cqi,14px)}
@supports not (grid-template-columns: subgrid){
  .cdhead,.cdrow{grid-template-columns:minmax(72px,1.1fr) minmax(48px,1.4fr)
    minmax(56px,auto) minmax(50px,auto)}
  .cdriv.g .cdhead,.cdriv.g .cdrow{grid-template-columns:minmax(72px,1.1fr)
    minmax(48px,1.4fr) minmax(56px,auto) minmax(50px,auto) minmax(58px,auto)}
}
.cdhead{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  padding-bottom:6px;border-bottom:1px solid var(--rule);margin-bottom:2px}
.cdhead span:nth-child(3),.cdhead span:nth-child(4){text-align:right}
.cdrow{padding:5px 0;font-size:13px}
.cdrow+.cdrow{border-top:1px solid var(--rule)}
.cdn{display:flex;align-items:center;gap:7px;min-width:0;color:var(--ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cdn i{flex:none;width:9px;height:9px;border-radius:2px}
.cdbar{position:relative;height:13px;border-radius:2px;background:var(--panel-2)}
.cdbar.div::before{content:"";position:absolute;left:50%;top:-1px;bottom:-1px;width:1px;
  background:var(--rule-2)}
.cdbar i{position:absolute;top:2px;bottom:2px;border-radius:2px;min-width:2px}
.cdbar i.pos{background:var(--good)} .cdbar i.neg{background:var(--bad)}
.cdv,.cdl{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif}
.cdv{font-weight:600}
.cdv.pos,.cdl.pos{color:var(--good)} .cdv.neg,.cdl.neg{color:var(--bad)}
.dpanel{min-width:0}
.dpanel h3{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);font-weight:500;margin:0 0 9px}
.btab{width:100%;min-width:0;border-collapse:collapse;font-size:13px}
.btab th{text-align:right;font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);font-weight:500;padding:0 0 7px;
  border-bottom:1px solid var(--rule)}
.btab th:first-child,.btab td:first-child{text-align:left}
.btab td{text-align:right;padding:7px 0;border-bottom:1px solid var(--rule);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;font-variant-numeric:tabular-nums}
.btab tr:last-child td{border-bottom:0}
.btab td:first-child{font-family:"Instrument Sans",sans-serif;font-size:14px}
.btab .who{display:inline-flex;align-items:center;gap:7px}
.btab .who i{width:15px;height:0;border-top:2.5px solid currentColor;display:inline-block;flex:none}
.btab .self{font-weight:600}
.dchart{position:relative}
.dchart svg{display:block;width:100%;height:auto}

/* ---------- panels ---------- */
.grid{display:grid;grid-template-columns:1.55fr 1fr;gap:var(--pad);align-items:stretch}
@container page (max-width:996px){.grid{grid-template-columns:1fr}}
.card{background:var(--panel);border:0;border-radius:14px;box-shadow:0 1px 2px rgba(0,0,0,.04);
  padding:var(--pad);min-width:0;display:flex;flex-direction:column}
/* Every panel heading is the same object; only the size changes. */
.card h2,.drillhead h2{font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:17px;font-weight:600;letter-spacing:-.012em;line-height:1.25;margin:0;
  color:var(--ink)}
.cardhead{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-2);align-items:center}
.key{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.key i{width:16px;height:0;border-top:2px solid currentColor;display:inline-block}
.key.gd{color:var(--accent-line)} .key.ac{color:var(--brass-line)}

.metricchips{margin-top:12px}
.metricchips .chip{padding:5px 12px;font-size:12.5px}
.framepick{min-width:72px}
/* Rolling and custom frames (functionality review item 7, 4 Oct 2026). */
.rangewrap{position:relative;display:inline-flex}
.rangepop{position:absolute;top:calc(100% + 8px);right:0;z-index:70;width:320px;max-width:calc(100vw - 32px);
  background:var(--panel);border:1px solid var(--rule-2);border-radius:12px;padding:14px 16px;
  box-shadow:0 12px 30px rgba(0,0,0,.18);font-size:13px}
.rangepop[hidden]{display:none}
.rp-h{margin:0 0 10px;font-weight:700;color:var(--ink)}
.rp-f{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 8px;color:var(--ink-2)}
.rp-n{margin:4px 0 10px;color:var(--muted);line-height:1.4}
.rp-b{display:flex;justify-content:flex-end;gap:8px}
@media (max-width:760px){.rangepop{right:auto;left:0}}

.chartbox{position:relative;margin-top:14px;flex:none}
/* The chart above is a thirteen-week zoom. This strip is the whole year at a
   glance, one bar per week, with the charted weeks marked — so the card ends
   on context rather than on empty space. */
.ystrip{margin-top:auto;padding-top:14px;border-top:1px solid var(--rule)}
/* A sentence, not small capitals (final UI review, 5 Oct 2026). */
.ycap{display:flex;justify-content:space-between;gap:12px;
  font-size:12.5px;color:var(--muted);padding-bottom:7px}
.ycap .pos,.ycap .neg{font-weight:600}
.ystrip svg{display:block;width:100%;height:auto}
.ystrip rect.wk{transition:opacity .1s}
.ystrip:hover rect.wk{opacity:.55}
.ystrip rect.wk:hover{opacity:1}
.chip:focus-visible,.railbtn:focus-visible,.tile.can:focus-visible{outline:2px solid var(--accent);
  outline-offset:2px}
.chartbox svg{display:block;width:100%;height:auto}
.tip{position:absolute;pointer-events:none;background:var(--panel);border:1px solid var(--rule-2);
  border-radius:9px;padding:8px 11px;box-shadow:var(--shadow);font-size:12.5px;min-width:140px;
  transform:translate(-50%,-108%);opacity:0;transition:opacity .1s}
.tip.on{opacity:1}
.tip .tw{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.tip .tr{display:flex;justify-content:space-between;gap:16px;line-height:1.7}
.tip .tr b{font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;font-variant-numeric:tabular-nums;font-weight:600}
.tip .sw{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px}

/* category ring */
.mix{display:flex;flex-direction:column}

.donutwrap{position:relative;display:grid;place-items:center;flex:1;min-height:0;padding:14px 0 6px}
.donutwrap svg{width:100%;max-width:326px;height:auto;display:block}
.donutwrap .slice{cursor:default;transition:opacity .12s}
.dcentre{position:absolute;text-align:center;pointer-events:none;max-width:172px}
.dcentre .nm{font-size:12.5px;color:var(--ink-2);display:block;line-height:1.3}
.dcentre .v{font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;font-variant-numeric:tabular-nums;font-size:26px;font-weight:600;
  letter-spacing:-.03em;display:block;line-height:1.15;margin-top:1px}
.dcentre .sub{font-size:12px;color:var(--muted);display:block;margin-top:2px}
.dcentre .sub b{font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;font-variant-numeric:tabular-nums;font-weight:600}
.dcentre .sub b.pos{color:var(--good)} .dcentre .sub b.neg{color:var(--bad)}
.catkeys{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:10px;padding-top:11px;
  border-top:1px solid var(--rule);justify-content:center;font-size:12px}
.catkey{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-2);
  background:none;border:0;padding:0;font-family:inherit;cursor:default}
.catkey .sw{width:9px;height:9px;border-radius:2px;flex:none}

/* table */

.tw-scroll{overflow-x:auto;margin-top:10px}
table{width:100%;border-collapse:collapse;font-size:13px}
#tbl{min-width:640px}
th{text-align:right;font-weight:600;color:var(--muted);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;padding:0 0 8px;
  border-bottom:1px solid var(--rule);white-space:nowrap}
th:first-child,td:first-child{text-align:left}
th button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;
  letter-spacing:inherit;text-transform:inherit}
th button:hover{color:var(--accent)}
th .car{opacity:.45;margin-left:3px}
th[aria-sort] button{color:var(--ink)}
th[aria-sort] .car{opacity:1;color:var(--accent)}
td{text-align:right;padding:7px 0;border-bottom:1px solid var(--rule);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;font-variant-numeric:tabular-nums}
td:first-child{font-family:"Instrument Sans",sans-serif;font-weight:500}
td.store{font-size:14px;font-weight:500;letter-spacing:-.005em}
/* Review item 7: one store's table is one row; a footer would repeat it. */
body[data-level="store"] #tfoot{display:none}
/* A store name that opens the store: reads as the name, not as a blue link
   column, and says it is one on hover — the Score Card's look. */
td.store .storelink{font:inherit;letter-spacing:inherit;color:inherit;background:none;
  border:0;padding:0;margin:0;cursor:pointer;text-align:left}
td.store .storelink:hover,tbody tr:hover td.store .storelink{color:var(--accent);
  text-decoration:underline;text-underline-offset:3px}
td.store .storelink:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
/* Onward links on a card: Store information's "See this store on". */
.golinks{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:12px;padding-top:10px;
  border-top:1px solid var(--rule);font-size:12.5px}
.golinks .gol{color:var(--muted);margin-right:2px}
.golinks a{color:var(--accent);text-decoration:none}
.golinks a:hover{text-decoration:underline;text-underline-offset:3px}
tbody tr:hover td{background:var(--panel-2)}
tbody tr:last-child td{border-bottom:0}
/* Like for like as a shape: one track, one zero line, bars either side of it. */
th.barcol{width:130px;padding-left:16px;position:relative}
th.barcol .zero{position:absolute;left:calc(16px + 50% - 3px);font-size:9px;color:var(--muted)}
td.barcol{padding-left:16px}
.track{position:relative;display:block;height:9px;border-radius:2px;background:var(--panel-2);
  width:100%}
.track .fill{position:absolute;top:0;height:9px;border-radius:2px}
.track .fill.pos{background:var(--good);opacity:.5}
.track .fill.neg{background:var(--bad);opacity:.5}
.track .zeroline{position:absolute;left:50%;top:-2px;width:1px;height:13px;background:var(--rule-2)}
tbody tr:hover .track{background:var(--rule)}
/* The distance from the estate is the column that decides attention, so it
   carries a wash whose strength follows the size of the gap. */
td.washed{padding-right:9px;border-radius:4px}
td.washed.pos{background:color-mix(in srgb, var(--good-soft) calc(var(--w) * 100%), transparent);
  color:var(--good)}
td.washed.neg{background:color-mix(in srgb, var(--bad-soft) calc(var(--w) * 100%), transparent);
  color:var(--bad)}
.midrow td{text-align:center;padding:10px 0;background:var(--panel-2)}
#showall{font:inherit;font-size:12.5px;color:var(--accent);background:none;border:0;cursor:pointer;
  font-family:"Instrument Sans",system-ui,sans-serif}
#showall:hover{text-decoration:underline}
.pos{color:var(--good)} .neg{color:var(--bad)}
.tfoot td{font-weight:600;border-bottom:0;border-top:1px solid var(--rule-2);padding-top:9px}

/* ---------- paper ---------- */
/* A printed copy is read away from the controls, so the chrome goes and the
   header carries what the screen version puts in the rail and the pickers. */
@media print{
  :root{--shadow:none}
  /* The skip link is a keyboard affordance and means nothing on paper. It is
     the ONE place display:none is right for it — see its rule above. */
  .rail,.controls,.chips,.more,.closebtn,#showall,.tip,.skiplink{display:none !important}
  .printonly{display:block !important}
  .wrap{display:block}
  .page{padding:0}
  body{background:#fff}
  .card,.tile,.drill{break-inside:avoid;box-shadow:none;border:1px solid #D6DEDE}
  .grid{display:block}
  .grid > .card{margin-bottom:12px}
  .tiles{grid-template-columns:repeat(3,1fr) !important}
  .midrow{display:none}
  #tbl{min-width:0}
  .drill[hidden]{display:none}
  a[href]:after{content:""}
}

/* ---------- the gate, and the two states before a page has data ----------
   ⚠ THE GATE IS NOT A PAGE. It is the one sentence between opening the file
   and having something to read, so it gets the width of a paragraph and the
   weight of an aside — not a full-bleed panel that looks like the content
   failed to arrive. */
.gate{max-width:52ch;margin:6px 0 0;padding:var(--pad);background:var(--panel);
  border:1px solid var(--rule);border-radius:12px;box-shadow:var(--shadow)}
.gate p{margin:0;color:var(--ink-2);font-size:13.5px;line-height:1.55}
.gate p + p{margin-top:8px}
.gate code{font:500 12.5px/1 "IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--panel-2);border:1px solid var(--rule);border-radius:5px;padding:1px 5px}
#gateNote{color:var(--muted);font-size:12.5px}
#gateNote.err{color:var(--bad)}

/* The loading stamp reports how far through the import we are. It sits in the
   topbar rather than over the content because it is a fact about the FETCH,
   not about the page — and because a message that moves the layout when it
   clears is a message that makes the page flinch. */
.stamp{font:500 12px/1 "IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--muted);letter-spacing:.02em;white-space:nowrap;align-self:center}

button.primary{font:600 12.5px/1 "Instrument Sans",system-ui,sans-serif;
  color:#fff;background:var(--accent);border:1px solid var(--accent-line);
  border-radius:8px;padding:8px 14px;cursor:pointer;align-self:center}
button.primary:hover{filter:brightness(1.06)}
button.primary:disabled{opacity:.5;cursor:not-allowed}

/* ⚠ READ-ONLY IS SAID ONCE, AT THE TOP, and then every control that would not
   work is simply absent — shell.js's rule, and the reason the hosted copy is
   not a broken version of the editable one. */
.notice{margin:0 0 var(--pad);padding:10px 14px;border-radius:10px;
  background:var(--wash);border:1px solid var(--wash-line);
  color:var(--ink-2);font-size:13px;line-height:1.5}
.notice strong{color:var(--ink)}

/* ---------- the frame warning ----------
   ⚠ SHOWN ON THE PAGE, NOT IN A FOOTNOTE. The quarter is the scored basis;
   every other frame is what that frame WOULD award, and a grade that does not
   say so is a grade somebody will act on. The warning scales — a single week
   earns a stronger one than a period — and it NAMES the pillars, because
   "these figures may be unreliable" is not something a reader can weigh. */
.framewarn{margin:0 0 var(--pad);padding:11px 14px;border-radius:10px;
  font-size:12.5px;line-height:1.55;color:var(--ink-2);
  background:var(--panel-2);border:1px solid var(--rule-2)}
.framewarn b{color:var(--ink);font-weight:700}
.framewarn.strong{background:var(--bad-soft);border-color:var(--bad);
  color:var(--ink-2)}
.framewarn.strong b{color:var(--bad)}
.framewarn.mild{background:var(--brass-soft);border-color:var(--brass-line)}
.framewarn.mild b{color:var(--brass)}
@media print{.framewarn{break-inside:avoid}}

/* ---------- the score beside the grade ----------
   Bobby, 2026-09-22: "the pillar pages should show what the stores actually
   earned so for example Silver and 3.5 because that will let them know how far
   they are from the next grade."

   ⚠ IT WAS IN THE TOOLTIP, WHICH IS NOT SHOWING IT. Every pillar page put the
   earned score in the grade cell's title and nowhere else, so the one number
   that says how close a store is to the next grade was invisible to anyone not
   hovering — and invisible on a printed page and on a phone entirely.

   It sits beside the grade rather than in a column of its own because the two
   are one fact read at two resolutions: Silver, and how much Silver. A column
   would also cost the four pillar tables a header each, on tables that are
   already at the width the overflow check polices. */
.rawby{margin-left:6px;color:var(--muted);font-variant-numeric:tabular-nums;
  font-size:12px;white-space:nowrap}

/* ---------- forms that write to the record ----------
   Shared by Operations (commercial, compliance and training reports) and Wage
   (hours credits). One copy, so the two forms cannot drift apart. */
.lform{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;
  align-items:end;padding:2px 0 10px}
.lform label{display:flex;flex-direction:column;gap:5px;min-width:0}
.lform select,.lform input{font:inherit;font-size:13px;font-family:"Instrument Sans",system-ui,sans-serif;
  color:var(--ink);background:var(--panel-2);border:1px solid var(--rule-2);
  border-radius:8px;padding:7px 9px;min-width:0;width:100%}
.lform select:focus-visible,.lform input:focus-visible{outline:2px solid var(--accent);
  outline-offset:1px}
.lbtn{grid-column:1 / -1;font:inherit;font-size:13px;font-weight:600;
  font-family:"Archivo",system-ui,sans-serif;color:var(--panel);
  background:var(--accent);border:0;border-radius:8px;padding:9px 14px;cursor:pointer}
.lbtn:hover{filter:brightness(1.06)}
.lbtn.ghost{color:var(--accent);background:none;border:1px solid var(--rule-2);
  margin-top:10px;display:block;width:100%}
.linkbtn{font:inherit;font-size:12px;color:var(--accent);background:none;border:0;
  cursor:pointer;padding:0}
.linkbtn:hover{text-decoration:underline}
.bnote.bad{color:var(--bad)}
.jsonout{margin:10px 0 0;padding:10px;border-radius:8px;background:var(--panel-2);
  border:1px solid var(--rule-2);font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  font-size:11.5px;line-height:1.5;color:var(--ink-2);white-space:pre;
  overflow:auto;max-height:220px}
/* A placeholder is a hint, not a value — drawn in the muted ink, or "blank =
   £12.71 from Settings" reads as if £12.71 had been typed. */
.lform input::placeholder{color:var(--muted);opacity:1}
@container page (max-width:516px){.lform{grid-template-columns:1fr}}

/* ---------- the glossary (glossary.js, flow review 30 Sep) ----------
   The first use of a term on a page wears a dotted rule; hover, focus or a tap
   shows its definition in one tooltip the script keeps on screen. */
abbr.gl{text-decoration:underline dotted;text-decoration-color:var(--muted);
  text-underline-offset:3px;cursor:help;border-radius:3px}
abbr.gl:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gltip{position:fixed;z-index:60;background:var(--panel);color:var(--ink);
  border:1px solid var(--rule-2);border-radius:10px;box-shadow:var(--shadow);
  padding:10px 12px;font-size:12.5px;line-height:1.45;pointer-events:none}
.gltip b{display:block;margin-bottom:3px;font-size:12.5px}
.glpage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--pad)}
@container page (max-width:760px){.glpage{grid-template-columns:1fr}}
.glgroup dl{margin:0}
.glrow{display:grid;grid-template-columns:minmax(120px,32%) 1fr;gap:12px;padding:10px 0;
  border-top:1px solid var(--rule)}
.glrow:first-child{border-top:0}
.glrow dt{font-weight:600;color:var(--ink)}
.glrow dd{margin:0;color:var(--ink-2);font-size:13.5px;line-height:1.5}
@container page (max-width:456px){.glrow{grid-template-columns:1fr;gap:4px}}
@media print{abbr.gl{text-decoration:none}.gltip{display:none}}

/* ---------- the phone's one-line control summary (Bobby, 4 Oct 2026) ------
   Design item 14. Under 760px the strip wrapped onto five rows and filled the
   first screen; it now sits behind one line that says what the view is. */
.ctlsum{display:none}
@media (max-width:760px){
  .ctlsum:not([hidden]){display:flex;align-items:center;gap:10px;width:100%;
    font:inherit;font-size:13.5px;font-weight:600;color:var(--accent);text-align:left;
    padding:12px var(--pad);min-height:44px;border:0;border-bottom:1px solid var(--rule);
    background:var(--panel);cursor:pointer;position:sticky;top:0;z-index:21}
  .ctlsum-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ctlsum-a{flex:0 0 auto;transition:transform .15s}
  .ctlsum[aria-expanded="true"] .ctlsum-a{transform:rotate(180deg)}
  .ctlsum:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  .controls:not(.open){display:none}
  .controls.open{position:static;gap:14px 22px}
}
@media print{.ctlsum{display:none !important}}

/* Notes on the timeline (functionality review item 9, 4 Oct 2026). */
.notescard{margin-bottom:var(--pad)}
.notescard[hidden]{display:none}
.nt-wrap{position:relative;display:inline-flex;align-self:flex-start}
.nt-list{list-style:none;margin:6px 0 0;padding:0}
.nt-row{display:grid;grid-template-columns:22px minmax(90px,auto) 1fr auto auto;gap:10px;align-items:center;
  padding:7px 0;border-top:1px solid var(--rule);font-size:13.5px}
.nt-n{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--brass);
  color:#fff;font-size:11px;font-weight:700}
.nt-wk{white-space:nowrap}
.nt-t{color:var(--ink-2)}
.nt-op{font-size:11.5px;color:var(--brass);border:1px solid var(--brass-line);border-radius:999px;padding:0 7px;margin-left:4px;white-space:nowrap}
.nt-by{color:var(--muted);font-size:12.5px;white-space:nowrap}
.nt-del{border:1px solid var(--rule-2);background:var(--panel);color:var(--muted);border-radius:999px;
  min-width:26px;height:26px;font:inherit;font-size:13px;cursor:pointer;padding:0 8px}
.nt-del:hover,.nt-del.sure{color:var(--bad);border-color:var(--bad)}
.nt-pop{position:absolute;top:calc(100% + 8px);right:0;z-index:70;width:340px;max-width:calc(100vw - 32px);
  background:var(--panel);border:1px solid var(--rule-2);border-radius:12px;padding:14px 16px;
  box-shadow:0 12px 30px rgba(0,0,0,.18);font-size:13px;text-align:left}
.nt-h{margin:0 0 10px;font-weight:700}
.nt-f{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 8px;color:var(--ink-2)}
.nt-col{flex-direction:column;align-items:stretch}
.nt-col textarea{font:inherit;font-size:13px;border:1px solid var(--rule-2);border-radius:8px;padding:8px;
  background:var(--panel);color:var(--ink);resize:vertical;margin-top:4px}
.nt-chk{display:flex;gap:8px;align-items:center;margin:0 0 10px;color:var(--ink-2)}
.nt-msg{color:var(--bad);margin:0 0 8px;font-size:12.5px}
.nt-b{display:flex;justify-content:flex-end;gap:8px}
.nt-fl{stroke:var(--brass);stroke-width:1.2;stroke-dasharray:4 4}
.nt-fc{fill:var(--brass)}
.nt-ft{fill:#fff;font-size:10px;font-weight:700}
@media (max-width:760px){
  .nt-row{grid-template-columns:22px 1fr auto;row-gap:2px}
  .nt-t,.nt-by{grid-column:2 / -1}
  .nt-pop{right:auto;left:0}
}
@media print{#nt-add,.nt-del,.nt-pop{display:none}}

/* Quick find and Copy link (functionality review item 12, 4 Oct 2026). */
.toptools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.toptools .chip{display:inline-flex;gap:8px;align-items:center;min-height:36px}
.toptools .chip svg,.qf-in svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;flex:none}
.qfbtn{color:var(--muted)}
.qfbtn kbd,.qf-in kbd{font:11px/1.4 system-ui,sans-serif;border:1px solid var(--rule-2);border-radius:5px;padding:0 6px;color:var(--muted)}
.qf{border:0;border-radius:14px;padding:8px;width:min(620px,calc(100vw - 32px));background:var(--panel);color:var(--ink);
  box-shadow:0 20px 50px rgba(0,0,0,.3);margin-top:12vh}
.qf::backdrop{background:rgba(20,30,32,.35)}
.qf-in{display:flex;align-items:center;gap:10px;padding:8px 10px;border-bottom:1px solid var(--rule);color:var(--muted)}
.qf-in input{flex:1;border:0;outline:0;background:none;font:inherit;font-size:16px;color:var(--ink);min-height:32px}
.qf-list{list-style:none;margin:6px 0 0;padding:0;max-height:min(60vh,460px);overflow:auto}
.qf-g{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:10px 12px 4px}
.qf-o{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:8px;cursor:pointer;font-size:14px}
.qf-o.on,.qf-o:hover{background:var(--wash)}
.qf-sub{color:var(--muted)}
.qf-hint{margin-left:auto;color:var(--muted);font-size:12px}
.qf-none{padding:12px;color:var(--muted);font-size:13.5px}
.qf-foot{margin:6px 0 2px;padding:8px 12px 2px;border-top:1px solid var(--rule);color:var(--muted);font-size:12px}
.hubtoast{position:fixed;right:24px;bottom:24px;z-index:300;background:var(--ink);color:var(--panel);padding:10px 14px;
  border-radius:10px;font-size:13px;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;pointer-events:none;
  max-width:calc(100vw - 48px)}
.hubtoast.on{opacity:1;transform:none}
/* Icons only: labelled, the two buttons squeezed the page title onto more
   lines (check_header). The names are on the buttons for screen readers and
   as tooltips. */
.toptools .tl-l{display:none}
.toptools .chip.qfbtn,.toptools .chip.copybtn{padding:7px 10px}
@media print{.toptools .chip,.qf{display:none}}
@media (max-width:760px){.toptools .chip.qfbtn,.toptools .chip.copybtn{min-height:32px;padding:5px 9px}}

/* ---------- the grade colours — final UI review, 5 Oct 2026 ----------
   GDMPShell.gradeClass(g) adds "gc gr-<grade>" beside a mark's old tone class.
   The tone stays (code reads it); these rules out-rank the pages' own
   .pill.good/.warn/.bad (the doubled .gc beats Export's three-class rule), so every page paints the same five. */
.gr-plat{--gi:var(--g-plat);--gs:var(--g-plat-soft);--gf:var(--g-plat-fill);--gw:var(--g-plat)}
.gr-gold{--gi:var(--g-gold);--gs:var(--g-gold-soft);--gf:var(--g-gold-fill);--gw:var(--g-gold)}
.gr-silver{--gi:var(--g-silver);--gs:var(--g-silver-soft);--gf:var(--g-silver-fill);--gw:var(--g-silver)}
.gr-bronze{--gi:var(--g-bronze);--gs:var(--g-bronze-soft);--gf:var(--g-bronze-fill);--gw:var(--g-bronze)}
.gr-risk{--gi:var(--g-risk);--gs:var(--g-risk-soft);--gf:var(--g-risk-fill);--gw:var(--g-risk)}
.gr-crit{--gi:var(--g-crit-ink);--gs:var(--g-crit-chip);--gf:var(--g-crit-fill);--gw:var(--g-crit)}
html :is(.pill,.gmark,.sg,.badge).gc.gc{background:var(--gs);color:var(--gi)}
html .gmark.gc.gc.ring{background:transparent;color:var(--gw)}
html .gc:not(.pill):not(.gmark):not(.sg):not(.badge):not(.rdot):not(.gfill){color:var(--gw)}
html .rdot.gc,html .gfill.gc{background:var(--gf)}

/* ---------- a page's way in — final UI review, 5 Oct 2026 ----------
   Operations' "Log a report" and Weekly's "Submit a report" were tiles in a
   row of measures. They are a button at the top right of the band now, where
   the pillar pages keep "All eight on the Score card". */
.actbar{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin:0 0 var(--pad)}
.actbar[hidden]{display:none}
.actnote{font-size:12.5px;color:var(--muted)}
.actbtn{font:inherit;font-weight:600;font-size:13px;line-height:1.2;padding:8px 16px;border-radius:999px;
  border:1px solid var(--wash-line);background:var(--wash);color:var(--accent);cursor:pointer}
.actbtn:hover{background:var(--panel)}
.actbtn[aria-expanded="true"]{background:var(--panel);color:var(--ink-2);border-color:var(--rule-2)}
.actbtn:focus-visible{outline:2px solid var(--accent-line);outline-offset:2px}
@media print{.actbar{display:none !important}}

/* ---------- in-card toggles — final UI review, 5 Oct 2026 ----------
   Every "pick one view" control inside a card (By type / By category, Net
   sales / Retail…, Trading / Stock / Scores, FPS / Laminates, % / Value,
   All / STV not done) is the control strip's segmented bar: one trough, the
   chosen tab filled. Two tab styles on the site now — this, and Admin's
   underlined sections. */
main#page .chips{display:inline-flex;width:max-content;max-width:100%;align-self:flex-start;
  gap:2px;flex-wrap:wrap;padding:2px;background:var(--panel-2);border:1px solid var(--rule);border-radius:9px}
main#page .chips > .chip{border:0;background:transparent;border-radius:7px;padding:0 11px;
  height:28px;line-height:28px;font-size:13px;color:var(--ink-2);font-weight:400}
main#page .chips > .chip:hover{background:transparent;color:var(--ink)}
main#page .chips > .chip[aria-pressed="true"]{background:var(--wash);color:var(--accent);font-weight:600;
  box-shadow:0 0 0 1px var(--wash-line),0 1px 2px rgba(0,0,0,.10)}
main#page .chips > .chip:focus-visible{outline:2px solid var(--accent);outline-offset:0}

/* Export offers quarters only (final UI review, 5 Oct 2026): the frame bar
   and the other pickers are built but not shown. */
.field.frame-quarter #basis > .seg,
.field.frame-quarter #weekpick,.field.frame-quarter #periodpick,
.field.frame-quarter #rollingpick{display:none !important}
.field.frame-quarter #quarterpick{display:inline-block !important}
/* "Show the N stores in between" is centred in every table (final UI review,
   5 Oct 2026) — the pages' right-aligned figure cells were claiming it. */
#tbl tr.midrow td,table tr.midrow > td{text-align:center}

/* A grade an auto-critical forced carries the Score card's "!" wherever a
   pill shows it (final UI review, 5 Oct 2026). */
.pill .ov{font-style:normal;font-weight:800;margin-left:4px;opacity:.85}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* The pill holds its own screen-reader text, so that text is clipped by a
   scrolling table rather than widening the page on a phone. */
.pill{position:relative}