/* =============================================================================
 * SC Scorecard — the one design system. Look C "Splice Sheet" (owner, 9 Oct).
 *
 * A field plan sheet: blueprint-gray ground, ruled ledger cells, one blue for
 * actions and the current place, the 12-colour fiber code as a single strand
 * under the navigation, and colour otherwise only for good / watch / bad.
 *
 * Rules (DESIGN.md has the long form):
 *  1. Never add an override sheet. Change the token or the component here.
 *  2. Every colour, size, space, radius and shadow reads a token below.
 *  3. Pages (css/pages/*.css) only lay out page-specific pieces, with tokens.
 *
 * Cascade: everything sits in layers (base < components < pages), so the one
 * unlayered rule at the bottom — [hidden] — always wins without !important.
 * ========================================================================== */
@layer base, components, pages;

@font-face{
  font-family:"Atkinson Hyperlegible Next";
  src:url("/fonts/atkinson-next.woff2") format("woff2");
  font-weight:200 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Atkinson Hyperlegible Mono";
  src:url("/fonts/atkinson-mono.woff2") format("woff2");
  font-weight:200 800; font-style:normal; font-display:swap;
}

/* ------------------------------------------------------------------ tokens --
   40 tokens. Light is the default; dark redefines the colours only. */
:root{
  color-scheme:light;
  /* colour */
  /* page background "Snow" (owner, 9 Oct: the grey looked blah) */
  --bg:#F7F9FB; --surface:#FFFFFF; --surface-2:#F1F4F7;
  --line:#E2E7ED; --line-strong:#B8C3CE;
  --ink:#12202C; --ink-2:#324353; --ink-3:#526273;
  --accent:#1C5DA3; --accent-soft:#DEE9F5;
  --good:#1A774E; --good-soft:#E3F1EA;
  --watch:#8F5D08; --watch-soft:#F7EDD9;
  --bad:#B3261E; --bad-soft:#F8E6E4;
  /* the 12-colour fiber code, used once: the strand under the navigation */
  --fiber:linear-gradient(90deg,#2F6FD0 0 8.33%,#F28C28 0 16.66%,#2E9E5B 0 25%,#8A5A35 0 33.33%,
          #8A97A5 0 41.66%,#F4F6F8 0 50%,#D43A33 0 58.33%,#1C232B 0 66.66%,#F2C230 0 75%,
          #7B4FBF 0 83.33%,#E98BB0 0 91.66%,#3FC1C9 0 100%);
  /* type: seven sizes. Owner floor (8 Oct): nothing under 14px; KPIs 40–52. */
  --t1:42px; --t2:26px; --t3:20px; --t4:18px; --t5:16px; --t6:15px; --t7:14px;
  --f-ui:"Atkinson Hyperlegible Next",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --f-num:"Atkinson Hyperlegible Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  /* space */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:40px;
  /* shape */
  --r1:3px; --r2:4px; --r3:6px;
  --sh1:0 1px 0 rgba(18,32,44,.05);
  --sh2:0 10px 24px -8px rgba(18,32,44,.28);
  /* page edges: one column, the same two edges for header, tabs, page, footer */
  --page-max:1600px; --gutter:28px;
  --pad-x:max(var(--gutter), calc((100vw - var(--page-max)) / 2 + var(--gutter)));
}
@media (max-width:900px){ :root{ --gutter:var(--s4) } }
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0E151C; --surface:#141D26; --surface-2:#1B2631;
  --line:#2A3846; --line-strong:#41536A;
  --ink:#E6EDF3; --ink-2:#B8C5D2; --ink-3:#93A3B4;
  --accent:#79AEEA; --accent-soft:#1A3048;
  --good:#5CC495; --good-soft:#12301F;
  --watch:#E0B45A; --watch-soft:#33280F;
  --bad:#F08A80; --bad-soft:#3A1916;
  --sh1:0 1px 0 rgba(0,0,0,.4);
  --sh2:0 12px 28px -8px rgba(0,0,0,.7);
}

/* -------------------------------------------------------------------- base -- */
@layer base{
  *,*::before,*::after{box-sizing:border-box}
  /* The hidden attribute always wins over a component's display (9 Oct: the loading
     curtain stayed up because .curtain sets display:grid). The one allowed !important. */
  [hidden]{display:none !important}
  html{scrollbar-gutter:stable;accent-color:var(--accent);caret-color:var(--accent)}
  html,body{margin:0;padding:0}
  body{font-family:var(--f-ui);font-size:var(--t5);line-height:1.5;color:var(--ink);background:var(--bg);
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
  ::selection{background:var(--accent-soft);color:var(--ink)}
  :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.01em;text-wrap:balance;line-height:1.25}
  p{margin:0 0 var(--s2)}
  a{color:var(--accent);text-decoration:none;text-underline-offset:3px}
  a:hover{text-decoration:underline}
  button{font:inherit;color:inherit}
  img,svg{max-width:100%}
  kbd{font-family:var(--f-num);font-size:var(--t7);border:1px solid var(--line-strong);border-radius:var(--r1);padding:0 var(--s1)}
  /* figures line up wherever they are compared, and the zero is slashed */
  .tnum,.num{font-variant-numeric:tabular-nums slashed-zero}
  .mono{font-family:var(--f-num);font-size:var(--t6);font-feature-settings:"zero" 1}
  .nw{white-space:nowrap}
  .sr,.vh,.ai-notelab{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  /* scrollbars belong to the sheet too */
  *{scrollbar-color:var(--line-strong) transparent;scrollbar-width:thin}
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:var(--r3);border:3px solid transparent;background-clip:content-box}
  ::-webkit-scrollbar-track{background:transparent}
  @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none;transition:none} }
}

@layer components{
/* ============================================================ app header ==
   One row: brand, the data-age pill, search, the Period menu, who you are.
   Under it, the tabs; under those, the fiber strand. Solid surfaces, no glass. */
header.top{position:sticky;top:0;z-index:60;background:var(--surface);color:var(--ink);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:var(--s3) var(--s4);padding:var(--s2) var(--pad-x);min-height:calc(var(--s6) + var(--s4))}
.brandmark{display:flex;align-items:center;gap:var(--s3);margin-right:auto;min-width:0}
.brandmark .mark{flex:none;display:grid;place-items:center;color:var(--accent)}
.brandmark .mark svg{width:calc(var(--s5) + var(--s1));height:calc(var(--s5) + var(--s1));display:block}
.brandmark > div{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:var(--s3);min-width:0}
.brandmark h1{grid-column:1;font-size:var(--t4);font-weight:700;letter-spacing:-.01em;line-height:1.2;white-space:nowrap}
.brandmark .subrow{display:contents}
.brandmark .sub{grid-column:1;grid-row:2;font-size:var(--t7);color:var(--ink-3);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brandmark .fresh{grid-column:2;grid-row:1 / span 2}
/* The market badge: the same tag as everywhere else. */
.sc{display:inline-block;margin-left:var(--s1);padding:0 var(--s2);border:1px solid var(--line-strong);border-radius:var(--r1);
  font-size:var(--t7);font-weight:700;letter-spacing:.04em;color:var(--ink-2);line-height:1.5;vertical-align:2px}

/* Data age: a dot and the words, quiet while current; watch at 2+ days, bad at 4+. */
.fresh{display:inline-flex;align-items:center;gap:var(--s2);padding:var(--s1) var(--s2);border-radius:var(--r2);
  font-size:var(--t7);font-weight:600;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.fresh::before{content:"";width:var(--s2);height:var(--s2);border-radius:50%;background:var(--good);flex:none}
.fresh.stale{background:var(--watch-soft);color:var(--watch)}
.fresh.stale::before{background:var(--watch)}
.fresh.bad{background:var(--bad-soft);color:var(--bad)}
.fresh.bad::before{background:var(--bad)}

/* Search, with its results dropping under it. */
.searchwrap{position:relative;flex:0 1 300px;min-width:170px}
.searchwrap::before{content:"";position:absolute;left:var(--s3);top:50%;width:var(--s4);height:var(--s4);transform:translateY(-50%);
  background:var(--ink-3);pointer-events:none;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='6.5'/><path d='M16 16l4.5 4.5'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='6.5'/><path d='M16 16l4.5 4.5'/></svg>") center/contain no-repeat}
.searchwrap input{width:100%;padding-left:calc(var(--s6) - var(--s1));text-overflow:ellipsis}
.search-drop{position:absolute;top:calc(100% + var(--s2));left:0;right:0;z-index:80;max-height:min(70vh,560px);overflow:auto;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r2);box-shadow:var(--sh2)}
.sr-group{position:sticky;top:0;padding:var(--s2) var(--s3);font-size:var(--t7);font-weight:700;color:var(--ink-2);
  background:var(--surface-2);border-bottom:1px solid var(--line)}
.sr-item{display:block;width:100%;padding:var(--s2) var(--s3);text-align:left;background:none;border:0;border-bottom:1px solid var(--line);cursor:pointer}
.sr-item:last-child{border-bottom:0}
.sr-item:hover,.sr-item:focus-visible,.sr-item[aria-selected="true"]{background:var(--accent-soft);outline:none}
.sr-t{font-weight:600}
.sr-s,.sr-d{font-size:var(--t7);color:var(--ink-3)}
.sr-d{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sr-empty{padding:var(--s4) var(--s3);font-size:var(--t6);color:var(--ink-3)}
.sr-hit{background:var(--watch-soft);color:var(--ink);border-radius:var(--r1)}

/* The Period menu: one bordered control, its name and the period. */
.periodwrap{position:relative;flex:none;display:flex;align-items:center;gap:var(--s2);height:var(--s6);padding:0 0 0 var(--s3);
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r2)}
.periodwrap:hover{background:var(--surface-2)}
.periodwrap:focus-within{border-color:var(--accent);outline:3px solid var(--accent-soft)}
.plab{font-size:var(--t6);color:var(--ink-3)}
.periodwrap select{height:calc(var(--s6) - 2px);border:0;background-color:transparent;font-weight:600;min-width:0}
.periodwrap select:focus{outline:none}
.custombox{position:absolute;top:calc(100% + var(--s2));right:0;z-index:70;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);
  width:max-content;max-width:calc(100vw - 2 * var(--s4));padding:var(--s3);background:var(--surface);color:var(--ink);
  border:1px solid var(--line-strong);border-radius:var(--r2);box-shadow:var(--sh2)}
.custombox label{font-size:var(--t7);font-weight:600}
.custombox input[type=date]{height:calc(var(--s5) + var(--s2));padding:0 var(--s2)}
.cmsg{flex-basis:100%;font-size:var(--t7);color:var(--bad)}
.cmsg:empty{display:none}

/* Who you are: initials are the control; signing out is inside it. */
.whowrap{position:relative;flex:none}
.top .who{display:inline-flex;align-items:center;gap:var(--s1);height:var(--s6);padding:0 var(--s1);
  background:none;border:0;border-radius:var(--r2);cursor:pointer;color:var(--ink)}
.top .who:hover .avatar{background:var(--line)}
.avatar{display:grid;place-items:center;width:calc(var(--s6) - var(--s1));height:calc(var(--s6) - var(--s1));border-radius:50%;
  background:var(--surface-2);border:1px solid var(--line);font-size:var(--t7);font-weight:700;color:var(--ink);flex:none}
.whoname{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.whochev{width:var(--s3);height:var(--s3);color:var(--ink-3);transition:transform .2s cubic-bezier(.16,1,.3,1)}
.who[aria-expanded="true"] .whochev{transform:rotate(180deg)}
.whomenu{position:absolute;right:0;top:calc(100% + var(--s2));z-index:80;min-width:280px;padding:var(--s1);
  background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--r2);box-shadow:var(--sh2)}
.whohead{padding:var(--s3);border-bottom:1px solid var(--line)}
.whohead b{display:block;font-weight:700}
.whohead span{display:block;font-size:var(--t6);color:var(--ink-3)}
.whosect{padding:var(--s2) var(--s3) var(--s3)}
.whosect-l{font-size:var(--t7);font-weight:600;color:var(--ink-3);margin-bottom:var(--s1)}
.whomenu .seg{display:flex}
.whomenu .seg button{flex:1 1 0}
.whoout{display:block;width:100%;padding:var(--s2) var(--s3);text-align:left;font-weight:600;background:none;border:0;
  border-top:1px solid var(--line);cursor:pointer}
.whoout:hover{background:var(--surface-2)}

/* The tabs: readable words, the current one in blue with its underline. The
   fiber strand runs under the whole row. */
.tabs{position:sticky;top:var(--hd-h,0px);z-index:55;background:var(--surface);border-bottom:1px solid var(--line)}
.tabs::after{content:"";display:block;height:3px;background:var(--fiber)}
.tabs-in{display:flex;align-items:center;padding:0 var(--pad-x);padding-left:calc(var(--pad-x) - var(--s3));overflow-x:auto;scrollbar-width:none}
.tabs-in::-webkit-scrollbar{display:none}
.tsep{flex:none;width:var(--s3)}
.tab{position:relative;flex:none;display:inline-flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3) calc(var(--s2) + 2px);
  background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;
  font-size:var(--t5);font-weight:500;color:var(--ink-2)}
.tab:hover{color:var(--ink);border-bottom-color:var(--line-strong)}
.tab[aria-selected="true"]{color:var(--accent);font-weight:700;border-bottom-color:var(--accent)}
.tab:focus-visible{outline-offset:-3px}
/* Counts are plain numbers; only something waiting on somebody is a red badge. */
.badge{display:inline-block;min-width:calc(var(--s5) - var(--s1));padding:0 var(--s1);border-radius:var(--r1);text-align:center;
  font-size:var(--t7);font-weight:700;line-height:1.45;background:var(--bad);color:var(--surface);font-variant-numeric:tabular-nums}
.badge.q{min-width:0;padding:0;background:none;color:var(--ink-3);font-weight:500}

/* ======================================================= page and footer == */
.colmain{min-width:0}
main{padding:var(--s5) var(--pad-x) calc(var(--s6) * 2);min-width:0}
footer{padding:0 var(--pad-x) var(--s6);font-size:var(--t6);color:var(--ink-3)}
.view[hidden]{display:none}
.loading{padding:var(--s6);text-align:center;color:var(--ink-3)}
.spin{display:inline-block;width:var(--s5);height:var(--s5);border:3px solid var(--accent-soft);border-top-color:var(--accent);border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.mbanner{position:sticky;top:0;z-index:40;padding:var(--s2) var(--s4);text-align:center;font-weight:600;background:var(--watch-soft);color:var(--watch);border-bottom:1px solid var(--watch)}
.totop{position:fixed;left:max(var(--s2), calc((100vw - var(--page-max)) / 2 - var(--s5)));bottom:var(--s4);z-index:44;
  display:grid;place-items:center;width:var(--s6);height:var(--s6);padding:0;border-radius:50%;cursor:pointer;
  background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);box-shadow:var(--sh2)}
.totop:hover{background:var(--surface-2)}
.totop svg{width:var(--s4);height:var(--s4)}
.totop.stand-aside{visibility:hidden}

/* =========================================================== page header ==
   The page's name, the period it shows (said once), and one line on what it is for. */
.pageh{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--s3);margin:0 0 var(--s4)}
.pageh h2{font-size:var(--t2);font-weight:700;letter-spacing:-.015em;line-height:1.15}
.pageh-per{font-size:var(--t6);font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums;padding:var(--s1) var(--s2);
  border:1px solid var(--line-strong);border-radius:var(--r2);background:var(--surface)}
.pageh p{order:3;flex-basis:100%;margin:var(--s1) 0 0;font-size:var(--t5);color:var(--ink-2)}
/* a page's own action (Customize) sits on the title's line, at the right */
.pageh > .pageh-act{order:2;margin-left:auto;align-self:center}

/* ============================================================== KPI tile ==
   One design in two sizes. LARGE: the Overview number strip — ruled ledger
   cells sharing hairlines, label over a 42px figure. SMALL: tile rows on the
   other pages and in detail windows — the same cell, 26px figure. */
.kpibar{margin:0 0 var(--s5)}
.kpi-status{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s3);margin-bottom:var(--s3);font-size:var(--t6);color:var(--ink-2)}
.badge-prov{display:inline-flex;align-items:center;padding:0 var(--s2);border:1px solid currentColor;border-radius:var(--r1);
  font-size:var(--t7);font-weight:700;line-height:1.6;color:var(--watch);background:var(--watch-soft)}
.badge-prov.badge-final{color:var(--good);background:var(--good-soft)}
.dotsep{width:3px;height:3px;border-radius:50%;background:var(--line-strong);flex:none}

.kpi-main{display:flex;flex-wrap:wrap;gap:1px;background:var(--line-strong);border:1px solid var(--line-strong);border-radius:var(--r2);overflow:hidden}
.kpi-grid{display:contents}
.kpi-goal,.kpi-stat{appearance:none;display:flex;flex-direction:column;gap:var(--s1);min-width:0;margin:0;
  padding:var(--s3) var(--s4) var(--s4);background:var(--surface);border:0;border-radius:0;text-align:left;cursor:pointer;color:var(--ink)}
.kpi-goal{flex:1.55 1 300px}
.kpi-stat{flex:1 1 170px}
.kpi-goal:hover,.kpi-stat:hover{background:var(--surface-2)}
.kpi-goal:focus-visible,.kpi-stat:focus-visible{outline-offset:-3px}
.kpi-goal .lab,.kpi-stat .l{font-size:var(--t6);font-weight:700;color:var(--ink-2);padding-bottom:var(--s2);border-bottom:1px solid var(--line);
  line-height:1.3;overflow-wrap:normal}
.kpi-goal .big,.kpi-stat .v{font-size:var(--t1);font-weight:700;letter-spacing:-.02em;line-height:1.05;margin-top:var(--s1);
  font-variant-numeric:tabular-nums slashed-zero;white-space:nowrap}
.kpi-goal .big small,.kpi-stat .v small{font-size:var(--t3);font-weight:500;color:var(--ink-3);letter-spacing:0;margin-left:2px}
.kpi-vrow{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s1) var(--s2)}
.kpi-vrow .v,.kpi-vrow .val{min-width:0}
/* the ✨ figure wraps under the number rather than running off the cell */
.kpi-vrow .v{display:flex;flex-wrap:wrap;align-items:baseline;row-gap:var(--s1)}
.kpi-stat .s,.kpi-goal .cap{font-size:var(--t6);color:var(--ink-2);line-height:1.35}
.kpi-track{height:6px;margin-top:var(--s2);background:var(--surface-2);border-radius:var(--r1);overflow:hidden}
.kpi-track i{display:block;height:100%;border-radius:var(--r1)}
.kpi-split{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);font-size:var(--t6);color:var(--ink-2)}
.kpi-split div{display:flex;align-items:center;gap:var(--s2);white-space:nowrap}
.kpi-split b{font-weight:700;color:var(--ink)}
.kpi-split .dot{width:var(--s2);height:var(--s2);border-radius:50%;flex:none}
.kpi-split .tsub{flex-basis:100%;padding-left:var(--s4);margin:0}
/* The month line beside a figure. */
.kpi-spark{flex:none;display:block;overflow:visible;margin:0 0 var(--s1) auto;color:var(--accent)}
.kpi-spark.sp-none{width:64px;height:28px}
.kpi-spark .sp-line{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linejoin:round;stroke-linecap:round}
.kpi-spark .sp-area{fill:currentColor;fill-opacity:.1;stroke:none}
.kpi-spark .sp-dot{fill:currentColor;stroke:var(--surface);stroke-width:1.5}
.kpi-spark .sp-dot.part{fill:var(--surface);stroke:currentColor}
/* Goal word and the change since last month, on the tile's bottom edge. */
.kpi-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s2);margin-top:auto;padding-top:var(--s1)}
.kpi-foot:empty{display:none}
.kpi-stat .d,.delta{display:flex;align-items:center;gap:var(--s1);font-size:var(--t7);font-weight:600;font-variant-numeric:tabular-nums}
.d.up,.delta.up{color:var(--bad)}
.d.down,.delta.down{color:var(--good)}
.d.flat,.delta.flat,.d.partial,.delta.partial{color:var(--ink-3)}
.pt-partial{display:none}

/* Pinned: once you scroll the Overview the strip folds to one line of figures. */
.kpibar.slim{position:sticky;top:var(--stick-top,0px);z-index:50;margin:0 calc(-1 * var(--pad-x)) var(--s5);padding:var(--s1) var(--pad-x) var(--s2);
  background:var(--bg);border-bottom:1px solid var(--line-strong);box-shadow:var(--sh1)}
.kpibar.slim .kpi-status,.kpibar.slim .kpi-goal .cap,.kpibar.slim .kpi-track,.kpibar.slim .kpi-split,
.kpibar.slim .kpi-stat .s,.kpibar.slim .kpi-foot,.kpibar.slim .kpi-spark{display:none}
.kpibar.slim .kpi-goal,.kpibar.slim .kpi-stat{padding:var(--s1) var(--s3);gap:0}
.kpibar.slim .kpi-goal .lab,.kpibar.slim .kpi-stat .l{font-size:var(--t7);padding:0;border:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpibar.slim .kpi-goal .big,.kpibar.slim .kpi-stat .v{font-size:var(--t3);margin:0}
.kpibar.slim .kpi-goal .big small,.kpibar.slim .kpi-stat .v small{font-size:var(--t7)}

/* SMALL: tile rows. */
.tile{display:flex;flex-direction:column;gap:var(--s1);min-width:0;padding:var(--s3) var(--s4) var(--s4);
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r2)}
.tile.act{cursor:pointer}
.tile.act:hover{background:var(--surface-2)}
.tile .lab{font-size:var(--t6);font-weight:700;color:var(--ink-2);padding-bottom:var(--s2);border-bottom:1px solid var(--line);line-height:1.3}
.tile .val,.tile .n,.tile .big{font-size:var(--t2);font-weight:700;letter-spacing:-.015em;line-height:1.1;margin-top:var(--s1);
  font-variant-numeric:tabular-nums slashed-zero}
.tile .val small{font-size:var(--t6);font-weight:500;color:var(--ink-3);letter-spacing:0}
.tile .sub{font-size:var(--t6);color:var(--ink-2)}
.tile-win{margin-top:var(--s2);font-size:var(--t7);line-height:1.4}
.tw-goal{margin-top:2px;font-weight:700}
.tw-goal.up{color:var(--bad)} .tw-goal.down{color:var(--good)} .tw-goal.flat{color:var(--ink-3)}

/* =============================================================== stat row ==
   Label-over-figure cells in one ruled band (Admin status, Coaching owed). */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--line-strong);
  border:1px solid var(--line-strong);border-radius:var(--r2);overflow:hidden}
.stat-row > *{padding:var(--s3) var(--s4);background:var(--surface);min-width:0}
.stat-row .l{font-size:var(--t7);font-weight:700;color:var(--ink-2)}
.stat-row .v{font-size:var(--t3);font-weight:700;line-height:1.2;margin-top:var(--s1);font-variant-numeric:tabular-nums slashed-zero}
.stat-row .s{font-size:var(--t7);color:var(--ink-3);margin-top:2px}

/* =================================================================== card ==
   A plan-sheet panel: hairline frame, its title on a gray band. */
.card{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r2);padding:var(--s4);margin-bottom:var(--s4);min-width:0}
.card > h2:first-child{margin:calc(-1 * var(--s4)) calc(-1 * var(--s4)) var(--s3);padding:var(--s2) var(--s4);
  background:var(--surface-2);border-bottom:1px solid var(--line-strong);border-radius:var(--r2) var(--r2) 0 0;
  font-size:var(--t4);font-weight:700}
.card h2{font-size:var(--t4);font-weight:700;margin-bottom:var(--s2)}
.card h3{font-size:var(--t4);font-weight:700;margin:var(--s5) 0 var(--s2)}
.hint{font-size:var(--t6);color:var(--ink-2);margin:0 0 var(--s3);line-height:1.5}
.grid{display:grid;gap:var(--s4)}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(178px,100%),1fr))}
.g6{grid-template-columns:repeat(auto-fit,minmax(min(158px,100%),1fr))}
.grid.tilerow{display:flex;flex-wrap:wrap;gap:var(--s3)}
.grid.tilerow > .tile{flex:1 1 170px}
.grid.tilerow > .tile:has(.tile-win){flex-grow:1.8}

/* A card that folds from its own heading; the heading is a real button. */
.sect{padding-top:0}
.sect > .sect-h{appearance:none;display:flex;align-items:center;gap:var(--s3);width:calc(100% + 2 * var(--s4));
  margin:0 calc(-1 * var(--s4)) var(--s3);padding:var(--s2) var(--s4);text-align:left;cursor:pointer;
  background:var(--surface-2);border:0;border-bottom:1px solid var(--line-strong);border-radius:var(--r2) var(--r2) 0 0}
.sect.closed > .sect-h{border-bottom:0;margin-bottom:0;border-radius:var(--r2)}
.sect.closed{padding-bottom:0}
.sect.closed > .sect-b{display:none}
.sect > .sect-h:hover .sect-t{color:var(--accent)}
.sect > .sect-h:focus-visible{outline-offset:-3px}
.sect-t{font-size:var(--t4);font-weight:700}
.sect-meta{font-size:var(--t6);color:var(--ink-3)}
.sect-h .chev{margin-left:auto;flex:none;display:grid;place-items:center;width:var(--s5);height:var(--s5);color:var(--ink-3);transition:transform .18s ease}
.sect.closed .sect-h .chev{transform:rotate(-90deg)}
.chev-i{display:block;width:var(--s4);height:var(--s4)}

/* ================================================================== table ==
   Ruled rows, figures right-aligned in the mono face, a sticky heading. */
.tablewrap{overflow:auto;border:1px solid var(--line-strong);border-radius:var(--r2);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:var(--t5)}
th{position:sticky;top:0;z-index:3;padding:var(--s2) var(--s3);text-align:left;vertical-align:bottom;white-space:nowrap;
  font-size:var(--t7);font-weight:600;color:var(--ink-3);background:var(--surface-2);border-bottom:1px solid var(--line-strong)}
th.num{text-align:right}
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{color:var(--ink)}
th.sortable:focus-visible{outline-offset:-3px}
.arrow{margin-left:var(--s1);color:var(--ink-3)}
th.sorted,th.sorted .arrow{color:var(--accent)}
th .scope{font-weight:500}
th .scope:not(:empty)::before{content:"· "}
td{padding:var(--s3);border-top:1px solid var(--line);vertical-align:middle}
td.num{text-align:right;font-family:var(--f-num);font-size:var(--t6);font-variant-numeric:tabular-nums slashed-zero;white-space:nowrap}
/* Mono is for pure figures only. Words in a figure cell ("4 of 7 match",
   "— too few jobs", "(3)", chips) read in the body face with even-width digits. */
td.num :is(.tsub,.thinden,.chip,.spark-chip.pending,.mixed),td.num.mixed{font-family:var(--f-ui);font-variant-numeric:tabular-nums}
tbody tr:hover{background:var(--surface-2)}
tbody tr.clickable{cursor:pointer}
tr.clickable:focus-visible{outline-offset:-2px;background:var(--accent-soft)}
.tname{font-weight:600}
.tsub,.thinden{font-size:var(--t6);color:var(--ink-3);margin-top:2px}
@media (max-width:1399px){ th{white-space:normal} td,th{padding-left:var(--s2);padding-right:var(--s2)} }
/* Column headings stay in view under the pinned header on a table that fits. */
main .tablewrap.pin-head{overflow:clip;overflow-clip-margin:0}
main .tablewrap.pin-head thead th{top:var(--pin-h,0px)}
main .tablewrap.pin-head tr.grouphead > td{top:calc(var(--pin-h,0px) + var(--s6))}
/* Grouped tables: each market or partner is a fold row inside the same table. */
tr.grouphead > td{position:sticky;top:var(--s6);z-index:2;padding:0;background:var(--surface-2);border-top:1px solid var(--line-strong)}
tr.grouphead .gh{display:flex;align-items:center;gap:var(--s3);width:100%;padding:var(--s2) var(--s3);text-align:left;cursor:pointer;background:none;border:0}
tr.grouphead .gh:hover{background:var(--accent-soft)}
tr.grouphead .gh .chev{color:var(--ink-3);font-weight:700;transition:transform .18s}
tr.grouphead.open .gh .chev{transform:rotate(90deg)}
tr.grouphead .gh b{font-weight:700}
tr.grouphead .gh .n{padding:0 var(--s2);border:1px solid var(--line-strong);border-radius:var(--r1);font-size:var(--t7);font-weight:700;color:var(--ink-2);background:var(--surface)}
tr.grouphead .gh .sum{font-size:var(--t6);color:var(--ink-3)}
tr.grouphead .gh .act{margin-left:auto;font-size:var(--t6);font-weight:700;color:var(--accent)}
/* "Show 25 more" under a long table, and a folded log row. */
.more-rows{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--s3);padding:var(--s3) 0 var(--s1)}
.fold-row > td{padding:0;border-bottom:0}
.fold-btn{width:100%;padding:var(--s2) var(--s3);text-align:left;background:none;border:0;cursor:pointer;font-size:var(--t6);font-weight:600;color:var(--ink-3)}
.fold-btn:hover{color:var(--ink);background:var(--surface-2)}
.fold-btn .caret{display:inline-block;width:1em}
/* What search jumped you to, marked long enough to find your eye. */
@keyframes rowflash{from{background:var(--watch-soft)}to{background:transparent}}
tr.flash > td{animation:rowflash 2.4s ease-out}
/* An empty list says what it means and offers a way on. */
.empty{padding:var(--s6) var(--s5);text-align:center;color:var(--ink-3);line-height:1.6}
.empty b{display:block;margin-bottom:var(--s2);font-size:var(--t4);font-weight:700;color:var(--ink)}
.empty .btn{margin-top:var(--s4)}
.empty.calm{max-width:62ch;margin:0 auto}

/* ================================================================== chips ==
   Exactly three kinds.
   STATUS  .chip + a tone: good / watch / bad, and plain for neutral words.
   TAG     .codechip, .jtag: a label for what something is.
   FILTER  .pill with aria-pressed: picks what a list shows. */
.chip{display:inline-flex;align-items:center;gap:var(--s1);padding:0 var(--s2);border:1px solid transparent;border-radius:var(--r1);
  font-size:var(--t7);font-weight:700;line-height:1.6;white-space:nowrap;color:var(--ink-2)}
.chip .ic{line-height:1}
/* good: a mark and the word, no fill — a column of them stays quiet */
.chip.clean,.chip.good,.chip.upheld,.chip.praise,.chip.st-resolved,.chip.st-ack,.chip.ota-ok,.kpi-chip.good{
  color:var(--good);padding-left:0;padding-right:0}
.chip.clean,.chip.good{color:var(--ink-2)}
.chip.clean .ic,.chip.good .ic{color:var(--good)}
/* watch: tinted */
.chip.watch,.chip.slipping,.chip.reviewing,.chip.rr-disagree,.chip.st-waiting,.chip.ota-mid{
  color:var(--watch);background:var(--watch-soft);border-color:color-mix(in srgb,var(--watch) 35%,transparent)}
/* bad: tinted */
.chip.bad,.chip.needs-look,.chip.ota-low,.kpi-chip.bad{
  color:var(--bad);background:var(--bad-soft);border-color:color-mix(in srgb,var(--bad) 35%,transparent)}
/* neutral: words with a hairline */
.chip.unrated,.chip.denied,.chip.st-draft,.chip.st-withdrawn,.chip.ota-none,.kpi-chip.none{color:var(--ink-3);font-weight:500}
.chip.denied,.chip.st-draft,.chip.st-withdrawn,.chip.ota-none{border-color:var(--line-strong)}
.chip.unrated,.kpi-chip.none{padding-left:0;padding-right:0}
.chip.open,.chip.st-replied,.chip.st-praise{color:var(--accent);background:var(--accent-soft)}
/* the goal word on a KPI tile reads the same tones */
.kpi-chip{display:inline-flex;align-items:center;gap:var(--s1);padding:0 var(--s2);border:1px solid transparent;border-radius:var(--r1);
  font-size:var(--t7);font-weight:700;line-height:1.6;white-space:nowrap}
.kpi-chip i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.kpi-chip.none{display:none}

.codechip,.jtag{display:inline-flex;align-items:center;gap:var(--s2);padding:0 var(--s2);margin:0 var(--s1) var(--s1) 0;
  border:1px solid var(--line-strong);border-radius:var(--r1);background:var(--surface-2);color:var(--ink);
  font-size:var(--t7);font-weight:600;line-height:1.7}

.pills{display:flex;flex-wrap:wrap;gap:var(--s2)}
.pill{display:inline-flex;align-items:center;gap:var(--s2);height:calc(var(--s5) + var(--s2));padding:0 var(--s3);cursor:pointer;
  border:1px solid var(--line-strong);border-radius:var(--r2);background:var(--surface);font-size:var(--t6);font-weight:600;color:var(--ink-2)}
.pill:hover{color:var(--ink);background:var(--surface-2)}
.pill[aria-pressed="true"]{color:var(--accent);background:var(--accent-soft);border-color:var(--accent);font-weight:700}

/* =============================================================== callouts ==
   A tinted panel with a hairline, never a thick coloured edge. */
/* .note is also a coaching severity on .co-item / .co-card rows; those are not callouts. */
.note:not(.co-item, .co-card),.warnbox,.errbox,.okbox{margin:var(--s3) 0;padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--r2);
  background:var(--surface-2);color:var(--ink-2);font-size:var(--t5);line-height:1.5}
.note strong,.warnbox strong,.errbox strong,.okbox strong{color:var(--ink)}
.warnbox{background:var(--watch-soft);border-color:color-mix(in srgb,var(--watch) 30%,transparent);color:var(--ink)}
.errbox{background:var(--bad-soft);border-color:color-mix(in srgb,var(--bad) 30%,transparent);color:var(--bad)}
.okbox{background:var(--good-soft);border-color:color-mix(in srgb,var(--good) 30%,transparent);color:var(--good)}
/* A short line with the reasoning on demand. */
.note.note-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px var(--s4);padding:var(--s2) var(--s3);margin:var(--s2) 0}
.note-line > p{margin:0;flex:1 1 300px;min-width:0}
.note-line > details.why{margin:0}
.note-line > details.why[open]{flex-basis:100%}
details.why > summary{display:inline-flex;align-items:center;gap:var(--s2);min-height:var(--s5);cursor:pointer;list-style:none;
  font-size:var(--t7);font-weight:600;color:var(--accent)}
details.why > summary::-webkit-details-marker{display:none}
details.why > summary::before{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg);transition:transform .15s ease-out}
details.why[open] > summary::before{transform:rotate(45deg)}
details.why > p{margin:var(--s2) 0 0;max-width:80ch;color:var(--ink-2)}
/* A quoted note or comment. */
.quote{margin:var(--s2) 0;padding:var(--s1) 0 var(--s1) var(--s3);border-left:1px solid var(--line-strong);color:var(--ink-2);white-space:pre-wrap;overflow-wrap:anywhere}
.kudos{margin-bottom:var(--s2);padding:var(--s3) var(--s4);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r2);
  font-style:italic;color:var(--ink);overflow-wrap:anywhere}
.kudos .who{display:block;margin-top:var(--s2);font-style:normal;font-size:var(--t7);color:var(--ink-3)}
.coach{margin-bottom:var(--s2);padding:var(--s3) var(--s4);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r2)}
.coach .who{font-weight:700}
.coach .why{margin-top:var(--s1);color:var(--ink-2)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:var(--s1) var(--s4);margin:var(--s3) 0}
.kv dt{color:var(--ink-3);font-weight:600}
.kv dd{margin:0}
details.meth{margin-bottom:var(--s2);padding:var(--s3) var(--s4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r2)}
details.meth summary{cursor:pointer;font-weight:700}
details.meth[open] summary{margin-bottom:var(--s2)}
details.meth p{margin:var(--s2) 0;color:var(--ink-2)}

/* ====================================================== segmented control == */
.seg{display:inline-flex;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r2);overflow:hidden}
.seg button{appearance:none;padding:var(--s1) var(--s3);min-height:calc(var(--s5) + var(--s2));background:none;border:0;cursor:pointer;
  font-size:var(--t6);font-weight:600;color:var(--ink-2);white-space:nowrap}
.seg button + button{border-left:1px solid var(--line)}
.seg button:hover{color:var(--ink);background:var(--surface-2)}
.seg button[aria-pressed="true"]{color:var(--accent);background:var(--accent-soft);font-weight:700}
.seg button:focus-visible{outline-offset:-3px}
.viewby{display:inline-flex;align-items:center;gap:var(--s2)}
.vb-lab{font-size:var(--t7);font-weight:700;color:var(--ink-3)}

/* ================================================================ buttons ==
   Primary (.btn), secondary (.btn.sec) and ghost (.btn.ghost / .linkish). */
.btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);height:var(--s6);padding:0 var(--s4);
  border:1px solid var(--accent);border-radius:var(--r2);background:var(--accent);color:var(--surface);cursor:pointer;
  font-size:var(--t6);font-weight:700;white-space:nowrap;text-decoration:none}
.btn:hover{background:color-mix(in srgb,var(--accent) 86%,var(--ink));text-decoration:none}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn.sec{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
.btn.sec:hover{background:var(--surface-2)}
.btn.ghost{background:none;border-color:transparent;color:var(--accent)}
.btn.ghost:hover{background:var(--accent-soft)}
.btn.sm{height:calc(var(--s5) + var(--s2));padding:0 var(--s3);font-size:var(--t7)}
.btn.danger{background:var(--bad);border-color:var(--bad)}
.btn.danger:hover{background:color-mix(in srgb,var(--bad) 86%,var(--ink))}
.btn.ok{background:var(--good);border-color:var(--good)}
.btn.sec.co-danger-t{color:var(--bad)}
.btn-lg{width:100%;height:calc(var(--s6) + var(--s3));font-size:var(--t4)}
.linkish{padding:0;background:none;border:0;font-size:var(--t6);color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--s3);margin-top:var(--s4)}
.toolbar,.filters{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-bottom:var(--s3)}
.search{flex:1;min-width:190px}

/* ========================================================== form controls == */
input,select,textarea{font:inherit;font-size:var(--t5);font-weight:500;height:var(--s6);padding:0 var(--s3);color:var(--ink);
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r2);box-shadow:none;appearance:none}
input[type=checkbox],input[type=radio]{height:auto;width:auto;padding:0;border:0;background:none;appearance:auto}
input[type=file]{height:auto;padding:var(--s2) var(--s3);font-weight:400}
textarea{width:100%;height:auto;min-height:96px;padding:var(--s2) var(--s3);line-height:1.5;resize:vertical}
select{padding-right:calc(var(--s5) + var(--s2));cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px;background-repeat:no-repeat}
select option{color:var(--ink);background:var(--surface)}
input::placeholder,textarea::placeholder{color:var(--ink-3);font-weight:400}
input:hover,select:hover,textarea:hover{border-color:var(--ink-3)}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:3px solid var(--accent-soft);outline-offset:0}
input[readonly],input:disabled,select:disabled,textarea:disabled{background:var(--surface-2);color:var(--ink-3);cursor:default}
.field{margin-bottom:var(--s3);min-width:0}
.field label{display:block;margin-bottom:var(--s1);font-size:var(--t7);font-weight:700;color:var(--ink-2)}
.field input:not([type=file]):not([type=checkbox]),.field select,.field textarea{width:100%}

/* ========================================================= detail window ==
   A technician, partner, job or number opens in one big window over the page;
   the page stays where it was, dimmed and out of reach. */
.dscrim{position:fixed;inset:0;z-index:95;display:flex;justify-content:center;align-items:stretch;
  padding:calc(var(--hd-h,64px) + var(--s2)) 0 var(--s5);background:color-mix(in srgb,var(--ink) 48%,transparent)}
:root.win-open{overflow:hidden}
.dwin{display:flex;flex-direction:column;width:92vw;max-width:1400px;min-height:0;overflow:hidden;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r3);box-shadow:var(--sh2);
  animation:dwinIn .2s cubic-bezier(.16,1,.3,1)}
@keyframes dwinIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.dwin-h{flex:none;display:flex;align-items:flex-start;gap:var(--s4);padding:var(--s3) var(--s4) var(--s3) var(--s5);
  background:var(--surface-2);border-bottom:1px solid var(--line-strong)}
.dwin-hm{flex:1;min-width:0}
.dwin-h h2{font-size:var(--t2);font-weight:700;letter-spacing:-.015em;line-height:1.15;overflow-wrap:anywhere}
.dwin-h h2:focus{outline:none}
.dwin-sub{margin:var(--s1) 0 0;font-size:var(--t6);color:var(--ink-2)}
.dback{display:inline-flex;align-items:center;gap:var(--s1);max-width:100%;min-height:calc(var(--s5) + var(--s2));margin:0 0 var(--s1) calc(-1 * var(--s2));
  padding:0 var(--s3) 0 var(--s2);background:none;border:0;border-radius:var(--r2);color:var(--accent);font-size:var(--t6);font-weight:600;cursor:pointer}
.dback:hover{background:var(--accent-soft)}
.dback svg{width:var(--s4);height:var(--s4);flex:none}
.dback-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:60ch}
.dx,.modal-head .x{flex:none;display:grid;place-items:center;width:var(--s6);height:var(--s6);padding:0;cursor:pointer;
  background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--r2)}
.dx:hover,.modal-head .x:hover{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.dx svg{width:var(--s4);height:var(--s4)}
.dwin-b{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--s5) var(--s5) var(--s6)}
.dwin-b h3{font-size:var(--t4);font-weight:700;margin:var(--s5) 0 var(--s2)}
.dwin-b > :first-child{margin-top:0}
.dwin-b .tablewrap{max-width:100%}
/* The short dialog: a form, a confirmation, a photo. Same family. */
.scrim{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-start;justify-content:center;padding:var(--s5) var(--s3);
  overflow-y:auto;background:color-mix(in srgb,var(--ink) 48%,transparent)}
.modal{width:100%;max-width:860px;margin:auto;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r3);box-shadow:var(--sh2);overflow:hidden}
.modal:focus{outline:none}
.modal-head{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s3) var(--s4) var(--s3) var(--s5);background:var(--surface-2);border-bottom:1px solid var(--line-strong)}
.modal-head h2{font-size:var(--t3);font-weight:700}
.mh-sub{margin-top:2px;font-size:var(--t6);color:var(--ink-2)}
.modal-body{padding:var(--s5)}
/* The tooltip on charts. */
.dwin-b .quote,.dwin-b .kudos{overflow-wrap:anywhere}
@media (max-width:600px){
  .dscrim{padding:0}
  .dwin{width:100%;max-width:none;border:0;border-radius:0}
  .dwin-h{padding:var(--s2) var(--s2) var(--s3) var(--s4)}
  .dwin-h h2{font-size:var(--t3)}
  .dwin-b{padding:var(--s4) var(--s3) var(--s5)}
}
@media (pointer:coarse){ .dx,.modal-head .x{width:44px;height:44px} }
.tip{position:fixed;z-index:200;max-width:260px;padding:var(--s2) var(--s3);pointer-events:none;opacity:0;transition:opacity .1s;
  background:var(--ink);color:var(--surface);border-radius:var(--r2);box-shadow:var(--sh2);font-size:var(--t6);line-height:1.4}
.tip.on{opacity:1}
.tip b{color:var(--surface)}

/* ========================================================= the ✨ figure ==
   The repeat rate with the "not on the tech" calls taken off. A quiet but
   readable second figure (look C): body face with even-width digits, ink-2 on
   the gray band, the sparkle drawn at text size. Never louder than the official
   figure beside it, no colour of its own. Same tag everywhere; one step larger
   in the Overview strip. "reading R of F" while pending: lighter, no fill. */
.spark-chip{display:inline-flex;align-items:center;gap:var(--s1);margin-left:var(--s2);padding:2px var(--s2) 2px var(--s1);
  border:1px solid transparent;border-radius:var(--r1);background:var(--surface-2);color:var(--ink-2);
  font-family:var(--f-ui);font-size:var(--t6);font-weight:700;line-height:1.3;letter-spacing:0;vertical-align:middle;white-space:nowrap;
  font-variant-numeric:tabular-nums slashed-zero}
.spark-chip .spark-i{flex:none;width:.875em;height:.875em;color:var(--ink-3)}
.kpi-main .spark-chip{font-size:var(--t5);padding:var(--s1) var(--s2) var(--s1) var(--s1)}
.kpibar.slim .spark-chip{font-size:var(--t7);padding:0 var(--s2) 0 var(--s1)}
button.spark-chip{cursor:pointer}
button.spark-chip:hover{border-color:var(--accent);color:var(--accent)}
.spark-chip.pending{font-weight:500;color:var(--ink-3);background:transparent;border-color:var(--line)}
.kpi-vrow .v .spark-chip.pending{display:flex;width:fit-content;margin:var(--s1) 0 0}
.spark-line{margin-top:var(--s2);font-size:var(--t6)}
.spark-line .spark-chip,.spark-row .spark-chip{margin-left:0}
.spark-what{color:var(--ink-2)}
.spark-small,.spark-row{font-size:var(--t7);color:var(--ink-3);margin-top:2px}

/* ================================================================ charts == */
.chart{display:block;width:100%;max-width:640px;margin:0 auto;overflow:visible}
.chart text,svg text{font-family:var(--f-ui);font-size:var(--t7);font-variant-numeric:tabular-nums}
.chart text:not([fill]){fill:var(--ink-2)}
.chart text.val{fill:var(--ink-2);font-weight:700}
.chart .grid-line{stroke:var(--line);stroke-width:1}
.chart .axis-line{stroke:var(--line-strong);stroke-width:1}
.bar{fill:var(--accent)}
.bar:hover{opacity:.82}
.bar.b-good{fill:var(--good)} .bar.b-ok{fill:var(--accent)} .bar.b-warn{fill:var(--watch)} .bar.b-bad,.chart .bar.over{fill:var(--bad)}
.refline{stroke:var(--ink-2);stroke-width:1.5;stroke-dasharray:5 4}
.chart .goalline{stroke:var(--bad);stroke-width:1.5;stroke-dasharray:3 4}
.chart text.goaltext{fill:var(--bad);font-weight:600}
.chart-key,.codekey{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);font-size:var(--t6);color:var(--ink-2);margin-top:var(--s2)}
.chart-key{justify-content:center}
.codekey{margin:0 0 var(--s3)}
.codekey span{display:inline-flex;align-items:center;gap:var(--s2)}
.chart-key i{display:inline-block;width:10px;height:10px;margin-right:var(--s2);border-radius:var(--r1);vertical-align:-1px}
/* close-out code kinds: four values a legend can tell apart */
.cdot{display:inline-block;width:var(--s2);height:var(--s2);border-radius:50%;flex:none;background:var(--line-strong)}
.cdot.k-plant{background:var(--accent)} .cdot.k-equip{background:var(--ink)}
.cdot.k-cust{background:var(--ink-3)} .cdot.k-gen{background:var(--watch)}
}

/* The one unlayered rule: hidden means hidden, whatever a component sets. */
[hidden]{display:none}