/* Spotlight Scoreboard — shared design tokens & primitives.
   One place for color, type, spacing, status vocabulary, header/nav, buttons,
   tiles, panels, tables and forms. Pages add only page-specific layout. */

:root{
  color-scheme: light;
  /* surfaces & ink */
  --page:#f3f3f1; --surface-1:#ffffff; --surface-2:#fafaf8;
  --ink-1:#111110; --ink-2:#4d4d4b; --ink-muted:#83837f;
  --grid:#e5e5e1; --baseline:#c4c4c0; --ring:rgba(17,17,16,.10);
  --brand:#111110; --brand-ink:#ffffff;
  /* status — the one vocabulary. Text always accompanies these colors. */
  --ok:#0b7d0b; --risk:#9a6a00; --risk-bg:#fab219; --bad:#c22f2f; --blocked:#4f46b8;
  --delta-up:#0b6b0b; --delta-down:#b03030;
  /* accents */
  --accent:#2a6fd0; --meter-track:#e9e8e3;
  /* type */
  --display:'Archivo',system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",sans-serif;
  --focus:0 0 0 2px var(--page),0 0 0 4px var(--accent);
}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme: dark;
    --page:#0a0a09; --surface-1:#161615; --surface-2:#1d1d1b;
    --ink-1:#f4f4f2; --ink-2:#c6c6c0; --ink-muted:#8f8f8a;
    --grid:#282826; --baseline:#3a3a37; --ring:rgba(255,255,255,.13);
    --brand:#f4f4f2; --brand-ink:#111110;
    --ok:#3fbf3f; --risk:#e9b13a; --risk-bg:#e9b13a; --bad:#e66a6a; --blocked:#8f88e8;
    --delta-up:#3fbf3f; --delta-down:#e66a6a;
    --accent:#5c9ae6; --meter-track:#2c2c2a;
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--page);color:var(--ink-1);font-family:var(--body);
  font-size:14px;line-height:1.45;padding:0 16px 56px}
.wrap{max-width:1080px;margin:0 auto}
img,svg{max-width:100%}
:is(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline:none;box-shadow:var(--focus);border-radius:8px}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--brand);color:var(--brand-ink);
  padding:9px 14px;border-radius:8px;font-weight:700;text-decoration:none}
.skip:focus{left:8px}

/* ---- global header & nav ------------------------------------------------- */
.appbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 0 0}
.appbar .wordmark{font-family:var(--display);font-weight:900;font-size:16px;letter-spacing:-.01em;
  color:var(--ink-1);text-decoration:none;white-space:nowrap}
.appbar .wordmark .mk{margin-right:5px}
.appbar .wordmark span{font-weight:500;color:var(--ink-2)}
.envbadge{font:700 10px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;
  padding:4px 8px;border-radius:6px;background:#7c2d12;color:#fff}
.appbar .fresh{font-size:12px;color:var(--ink-muted);margin-left:auto;white-space:nowrap}
.appbar form{display:inline}
.btn{font-family:var(--display);font-size:12.5px;font-weight:700;padding:9px 15px;min-height:38px;
  border-radius:9px;border:1px solid var(--ring);background:var(--surface-1);color:var(--ink-1);
  cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.btn:hover{border-color:var(--ink-2)}
.btn.primary{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.btn.ghost{background:transparent}
.btn.quiet{border-color:transparent;color:var(--ink-2)}
.btn.quiet:hover{border-color:var(--ring)}
.btn:disabled{opacity:.5;cursor:default}
.navrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:10px 0 6px;
  border-bottom:1px solid var(--grid);padding-bottom:0}
nav.appnav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;max-width:100%}
nav.appnav::-webkit-scrollbar{display:none}
nav.appnav a{font-family:var(--display);font-weight:700;font-size:13.5px;color:var(--ink-2);
  text-decoration:none;padding:11px 14px;min-height:44px;display:inline-flex;align-items:center;
  border-bottom:2px solid transparent;white-space:nowrap}
nav.appnav a:hover{color:var(--ink-1)}
nav.appnav a[aria-current=page]{color:var(--ink-1);border-bottom-color:var(--ink-1)}
.datactions{display:flex;gap:8px;margin-left:auto;align-items:center}
.datactions .grouplbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-muted)}
.pagehead{margin:18px 0 4px}
.pagehead h1{font-family:var(--display);font-size:21px;font-weight:900;letter-spacing:-.02em}
.pagehead .sub{color:var(--ink-2);font-size:13px;margin-top:3px}

/* ---- status vocabulary --------------------------------------------------- */
.st{display:inline-flex;align-items:center;gap:5px;font-weight:600;white-space:nowrap}
.st .mk{font-size:10px}
.st-on_pace{color:var(--ok)} .st-at_risk{color:var(--risk)} .st-behind{color:var(--bad)}
.st-blocked{color:var(--blocked)} .st-no_target,.st-no_data{color:var(--ink-muted);font-weight:500}
.stchip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
  padding:2px 8px;border-radius:99px;border:1px solid currentColor;white-space:nowrap}

/* ---- surfaces ------------------------------------------------------------ */
.panel{background:var(--surface-1);border:1px solid var(--ring);border-radius:12px;padding:16px;margin:10px 0 14px}
.panel>h2{font-family:var(--display);font-size:14px;margin-bottom:2px}
.panel .psub{font-size:12.5px;color:var(--ink-2);margin-bottom:12px;line-height:1.5}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:14px 0 10px}
.tile{background:var(--surface-1);border:1px solid var(--ring);border-radius:11px;padding:13px 15px}
.tile .lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-muted);margin-bottom:5px}
.tile .val{font-family:var(--display);font-size:23px;font-weight:800;font-variant-numeric:tabular-nums}
.tile .note{font-size:12px;color:var(--ink-2);margin-top:4px;line-height:1.45}
.attnq{background:var(--surface-1);border:1px solid var(--ring);border-left:3px solid var(--bad);
  border-radius:11px;padding:13px 15px;margin:0 0 14px}
.attnq h2{font-family:var(--display);font-size:12px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-muted);margin-bottom:6px}
.attnq .aitem{display:flex;gap:10px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--grid);
  font-size:13px;line-height:1.5;flex-wrap:wrap}
.attnq .aitem:last-child{border-bottom:none}
.attnq .aitem .who{font-weight:700;white-space:nowrap}
.attnq .aitem .act{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.attnq .alink{font-size:12px;font-weight:700;font-family:var(--display);color:var(--accent);
  text-decoration:none;border:1px solid var(--ring);border-radius:99px;padding:5px 11px;min-height:30px;
  display:inline-flex;align-items:center;background:transparent;cursor:pointer}
.attnq .alink:hover{border-color:var(--accent)}

/* ---- tables -------------------------------------------------------------- */
.tscroll{overflow-x:auto;max-width:100%}
table{border-collapse:collapse;font-size:12.5px}
th{text-align:left;color:var(--ink-muted);font-weight:600;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.05em;padding:7px 10px 7px 0;border-bottom:1px solid var(--grid)}
td{padding:8px 10px 8px 0;border-bottom:1px solid var(--grid);vertical-align:middle}
tr:last-child>td{border-bottom:none}
th.num,td.num{text-align:right;font-variant-numeric:tabular-nums}
.share{color:var(--ink-muted);font-size:11px}

/* ---- forms --------------------------------------------------------------- */
input,select{font:inherit;color:var(--ink-1);background:var(--surface-2);
  border:1px solid var(--ring);border-radius:8px;padding:7px 9px}
input::placeholder{color:var(--ink-muted)}
input.overridden{border-color:var(--accent);font-weight:600}
label{cursor:pointer}

/* ---- misc shared --------------------------------------------------------- */
.d-up{color:var(--delta-up)} .d-down{color:var(--delta-down)} .d-flat{color:var(--ink-muted)}
[data-tip]{position:relative}
.ui-tooltip{position:fixed;z-index:1000;display:none;pointer-events:none;width:max-content;
  min-width:180px;max-width:min(300px,calc(100vw - 16px));max-height:45vh;overflow:auto;
  background:var(--ink-1);color:var(--surface-1);font-size:11px;font-weight:400;text-align:left;
  text-transform:none;letter-spacing:normal;padding:7px 9px;border-radius:6px;white-space:normal;
  line-height:1.4;box-shadow:0 5px 18px rgba(0,0,0,.24)}
.ui-tooltip.show{display:block}
details.howto{margin:18px 0 0;font-size:12.5px;color:var(--ink-2);line-height:1.6}
details.howto summary{cursor:pointer;font-family:var(--display);font-weight:700;color:var(--ink-2);
  padding:8px 0;min-height:38px;display:flex;align-items:center}
#status{font-size:13px;color:var(--ink-2);margin:30px 0;text-align:center}
.meter .track{position:relative;height:9px;background:var(--meter-track);border-radius:5px}
.meter .fill{position:absolute;left:0;top:0;bottom:0;border-radius:5px 0 0 5px}
.meter .expect{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink-1);opacity:.55}
.meter .cap{font-size:11px;color:var(--ink-2);margin-top:5px;font-variant-numeric:tabular-nums}
@media (max-width:640px){
  body{padding:0 10px 56px}
  .tile .val{font-size:19px}
  .appbar .fresh{display:none}
}
/* pointer-shortcut pseudo-link rendered inside a larger button (keyboard path exists elsewhere) */
.golink{text-decoration:underline;text-underline-offset:2px;cursor:pointer;color:inherit}
.golink:hover{color:var(--ink-1)}
/* --- the Why chain: verdict + five one-tap levels inside a card detail ----- */
.diag.verdict{border-left-color:var(--bad)}
.seatchip{display:inline-block;font-family:var(--display);font-weight:800;font-size:10px;text-transform:uppercase;
  letter-spacing:.06em;padding:2px 8px;border-radius:99px;background:color-mix(in srgb, var(--bad) 12%, transparent);
  color:var(--bad);margin-right:4px;vertical-align:1px}
.whychain{margin:0 0 14px}
.whychain details.whylvl{border:1px solid var(--grid);border-radius:8px;margin-bottom:5px;background:var(--surface-2)}
.whychain summary{cursor:pointer;padding:9px 12px;font-family:var(--display);font-weight:700;font-size:12px;
  color:var(--ink-2);list-style:none;min-height:38px;display:flex;align-items:center}
.whychain summary::before{content:'▸';margin-right:8px;color:var(--ink-muted);transition:transform .15s}
.whychain details[open] summary::before{transform:rotate(90deg)}
.whychain summary::-webkit-details-marker{display:none}
.whychain .wbody{padding:4px 12px 11px;font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.whychain .wbody p{margin:0 0 6px}
.wrow{display:flex;gap:10px;align-items:baseline;padding:3px 0;flex-wrap:wrap}
.wrow>span:first-child{min-width:140px;font-weight:600}
.wnote{font-size:11px;color:var(--ink-muted);margin-top:6px}
.wtable{width:100%;font-size:12px;min-width:420px}
.wtable th{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-muted);text-align:left;padding:4px 8px}
.wtable td{padding:4px 8px;border-top:1px solid var(--grid);font-variant-numeric:tabular-nums}
.wtable .num,.wtable th.num{text-align:right}
/* --- sampling pace chips on the Targets grid ------------------------------- */
.pchip{display:block;font-size:10px;font-variant-numeric:tabular-nums;margin-top:2px;font-weight:700}
.pchip.st-on_pace{color:var(--ok)}
.pchip.st-at_risk{color:var(--risk)}
.pchip.st-behind{color:var(--bad)}
.pchip.st-no_data{color:var(--ink-muted);font-weight:400}
/* --- Do next: the verdict's concrete moves, numbered for a first-week AM --- */
.donext{font-size:12.5px;border:1px solid var(--grid);border-left:3px solid var(--ok);border-radius:8px;padding:9px 13px;margin:0 0 14px;background:var(--surface-2)}
.donext b{font-family:var(--display);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-muted)}
.donext ol{margin:5px 0 0;padding-left:18px}
.donext li{margin:3px 0;line-height:1.5}
/* on-plan verdicts are opportunities, not fires */
.diag.verdict.calm{border-left-color:var(--ok)}
.seatchip.calm{background:color-mix(in srgb, var(--ok) 14%, transparent);color:var(--ok)}
.diag.alsoverdict{border-left-color:var(--risk-bg);font-size:12.5px}
.diag.alsoverdict>b{font-family:var(--display);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-muted);display:block;margin-bottom:3px}
/* product-first why chain */
.wmove{font-size:12.5px;color:var(--ink-2);margin:0 0 6px}
.wstrip{font-size:12px;color:var(--ink-2);border:1px solid var(--grid);border-radius:8px;padding:7px 11px;margin:0 0 8px;background:var(--surface-2)}
.wprod{border:1px solid var(--grid);border-left:3px solid var(--ring);border-radius:8px;padding:8px 12px;margin:0 0 6px;background:var(--surface-2)}
.wphd{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;font-size:13px}
.wpl{font-size:12px;color:var(--ink-2);margin-top:3px;line-height:1.5}
.wkey{font-size:11px;color:var(--ink-muted);margin:0 0 8px;line-height:1.5}
.wfacts{border-collapse:collapse;margin-top:4px;font-size:12px;color:var(--ink-2);width:100%;max-width:520px}
.wfacts td{padding:2px 14px 2px 0;vertical-align:baseline}
.wfacts td.k{color:var(--ink-muted);white-space:nowrap;cursor:default}
.wfacts td.num{text-align:right;padding-right:0;white-space:nowrap}
.vkick{color:var(--ink)}
.pchip.closed{opacity:.62;font-style:italic}
/* People page: brand-grouped person detail — one header line per brand, then
   only the behind products as compact number lines. */
.pgroup{margin:0 0 12px}
.pghd{display:flex;gap:8px;align-items:center;font-size:12.5px;margin-bottom:2px}
.pgrow{display:flex;gap:16px;justify-content:space-between;align-items:baseline;
  font-size:12px;color:var(--ink-2);padding:2px 0 2px 26px}
.pgrow .pgname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pgrow .pgnum{white-space:nowrap;font-variant-numeric:tabular-nums;flex-shrink:0}
.wmore{margin:0 0 6px}
.wmore>summary{font-size:12px;color:var(--ink-muted);cursor:pointer;padding:4px 2px;list-style-position:inside}
.wmore[open]>summary{margin-bottom:6px}