/* ADV Command Center shell — token tree, WRAPPER-SCOPED (R-A path 1).
   The 78 declarations of docs/design/shell-reference/tokens/ (fonts, colors,
   typography, spacing, chart, elevation, motion) copied BY VALUE and declared
   on .shell, not :root, so they resolve only inside a .shell element and
   dashboard.css's :root names (--bg, --card, --border, --font-mono collide)
   keep winning everywhere else, including inside every #panel-*.
   Generated from the reference on 2026-09-23; the reference is read-only.
   Chart tokens are declared and unused in this PR (R-F is PR two). */
.shell{
  /* fonts.css */
  --font-sans:'DM Sans','Inter',-apple-system,system-ui,sans-serif;
  --font-mono:'DM Mono',ui-monospace,Menlo,monospace;
  /* colors.css */
  --bg:#0A1118;
  --bg-2:#0E1620;
  --card:#111B27;
  --card-2:#16212F;
  --card-3:#1B2838;
  --overlay:rgba(7,12,18,0.72);
  --border:rgba(255,255,255,0.06);
  --border-2:rgba(255,255,255,0.10);
  --divider:rgba(255,255,255,0.05);
  --t-1:#E6EDF3;
  --t-2:#9AA7B6;
  --t-3:#5B6776;
  --t-on-accent:#FFFFFF;
  --p:#006FA0;
  --p-hover:#0A85BC;
  --p-press:#00567C;
  --p-soft:rgba(0,111,160,0.14);
  --p-ring:rgba(0,111,160,0.45);
  --standout:#22C55E;
  --standout-bg:rgba(34,197,94,0.13);
  --solid:#3B82F6;
  --solid-bg:rgba(59,130,246,0.13);
  --mixed:#F59E0B;
  --mixed-bg:rgba(245,158,11,0.13);
  --watch:#EF4444;
  --watch-bg:rgba(239,68,68,0.13);
  /* typography.css */
  --f-display:clamp(48px,14vw,64px);
  --f-h1:22px;
  --f-h2:18px;
  --f-h3:15px;
  --f-body:14px;
  --f-small:12px;
  --f-eyebrow:11px;
  --lh-tight:1;
  --lh-snug:1.45;
  --lh-prose:1.55;
  --ls-display:-0.04em;
  --ls-num:-0.02em;
  --ls-eyebrow:0.22em;
  --ls-label:0.12em;
  /* spacing.css */
  --s1:4px;
  --s2:8px;
  --s3:12px;
  --s4:16px;
  --s5:20px;
  --s6:24px;
  --s7:32px;
  --s8:40px;
  --s9:56px;
  --r1:6px;
  --r2:10px;
  --r3:14px;
  --r4:18px;
  --r5:24px;
  --r-pill:999px;
  --bp-mobile-max:1024px;
  /* chart.css */
  --chart-1:#00567C;
  --chart-2:#0079AE;
  --chart-3:#52A5D4;
  --chart-4:#A3CDE9;
  --chart-unknown:#5B6776;
  --chart-other:#1B2838;
  /* elevation.css */
  --shadow-1:0 1px 0 rgba(255,255,255,0.02),0 1px 2px rgba(0,0,0,0.4);
  --shadow-2:0 6px 24px rgba(0,0,0,0.45),0 2px 6px rgba(0,0,0,0.3);
  --shadow-sheet:0 -10px 40px rgba(0,0,0,0.55);
  --z-chrome:100;
  --z-scrim:1000;
  --z-sheet:1010;
  --z-toast:2000;
  /* motion.css */
  --ease:cubic-bezier(0.22,0.61,0.36,1);
  --d1:120ms;
  --d2:220ms;
  --d3:320ms;
}
@media (prefers-reduced-motion:reduce){
  .shell{
    --d1:0ms;
    --d2:0ms;
    --d3:0ms;
  }
}

/* tokens/base.css, non-token rules, re-scoped beneath .shell. body{} is
   OMITTED: the page background stays dashboard.css's until retirement
   (audit section 7, path 1). body's TYPE declarations (color, family, size,
   line-height, smoothing) are carried onto .shell itself so chrome text does
   not inherit dashboard.css's 15px / 1.5 body metrics; background and margin
   are not. html{-webkit-text-size-adjust} cannot be scoped and dashboard.css
   already sets it. */
.shell *,.shell *::before,.shell *::after{box-sizing:border-box}
.shell{color:var(--t-1);font-family:var(--font-sans);font-size:var(--f-body);line-height:var(--lh-snug);-webkit-font-smoothing:antialiased}
.shell button{font-family:inherit;cursor:pointer;border:0;background:transparent;color:inherit;padding:0}
.shell a{color:var(--p-hover);text-decoration:none}
.shell a:hover{color:var(--t-1);text-decoration:underline}

/* Numbers are the hero: every figure gets .num so columns align. */
.shell .num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}
.shell .mono{font-family:var(--font-mono)}

/* Keyboard reachability: DOM order only, no tab-order attribute. Every control shows a ring. */
.shell :focus-visible{outline:2px solid var(--p-ring);outline-offset:2px;border-radius:var(--r1)}
.shell :focus:not(:focus-visible){outline:none}

.shell ::-webkit-scrollbar{width:5px;height:5px}
.shell ::-webkit-scrollbar-track{background:transparent}
.shell ::-webkit-scrollbar-thumb{background:var(--card-3);border-radius:3px}