/* =====================================================================================================================
   IntegrateAI card kit v1 (16 Oct 2026). One stylesheet for Mission Control v4, the client dashboard v3 and onboarding v3.
   The look is the client app's v0.8 "deck" language (Chad, 16 Oct: "I love the way that the app is designed"), on the
   values of the IntegrateAI design system v8 (https://claude.ai/artifact/DwSpGKruj8msCSoY1W8Khx). Where the two differ, the
   design system wins: light amber #BA7F27, nothing below 11px, chart colours theme-invariant (#3D8F5B now, #4A7FC0 second).

   Rules this file carries (a builder can check each one):
   1. Colour means something or it is not there. Amber needs you (and Keep customers), green done and money kept
      (Save money), blue sales (Grow revenue), sea Get efficient, red money leaving. Charts: --c-now for the period being
      read, --c-2 for a genuine second category, muted for the period before, amber only past where it should be.
   2. Words never wear a chart colour; status words use the -t ("text") step, which clears 4.5:1.
   3. Nothing below 11px. --faint is decoration only, never words. --em (the grey second half of a title) clears contrast
      only at 18.66px bold and up; a smaller title's second half uses --mut (17 Oct, Mission Control final pass).
   4. Arrive, respond, then be still. Only the orb loops. Red never moves. Reduced motion: no movement, quick fades only.
   5. Dark mode is all dark (Chad, 19 Oct 2026, replacing "light deck in dark mode"): in light mode the deck is dark; in dark
      mode the deck is a lifted graphite with a white orb, the logo keeps its dark tile, and a rail's current place is a
      soft grey key. Nothing turns white in dark mode except the one primary key and tooltips.
      The orb's dot ink follows --orb-ink, so kit.js needs no change; its comment still says the old thing and is left alone on
      purpose (kit.js stays byte-identical to Mission Control's, so no chart-geometry golden re-pins; KD-dark D3).
   ===================================================================================================================== */

/* ---------- tokens: light (the default room) ---------- */
:root{
  --room:#F1F1EF; --card:#FFFFFF; --card2:#FAFAF9; --sunk:rgba(0,0,0,.034); --sunk2:rgba(0,0,0,.055);
  --ink:#191919; --ink2:#2B2B2E; --mut:#6A6A6E; --faint:#9C9CA0; --ghost:#C9C9C5; --em:#77777B;
  --hair:rgba(0,0,0,.07); --hair2:rgba(0,0,0,.12);

  /* status and goal colours (dots, rings, small marks) and their word steps (-t) */
  --green:#3E8E6B; --green-t:#2F7556; --blue:#4A7FC0; --blue-t:#3A67A0; --sea:#448796; --sea-t:#366C78;
  --amber:#BA7F27; --amber-t:#92641F; --red:#B23D39; --red-t:#9A302C;
  --need-100:#FBF1E3; --ok-100:#EAF3EE; --blue-100:#EBF1F8; --sea-100:#E7F1F3; --red-100:#F8EAE9;

  /* chart marks: theme-invariant (validated: both pass CVD and normal-vision separation on light and dark) */
  --c-now:#3D8F5B; --c-2:#4A7FC0; --c-prev:rgba(25,25,25,.34); --c-grid:rgba(0,0,0,.06); --c-area:rgba(61,143,91,.10);
  --c-empty:rgba(0,0,0,.075); --ring:#8C8C88;

  /* material */
  --lift:inset 0 1px 0 #fff,0 0 0 1px rgba(0,0,0,.045),0 26px 40px -28px rgba(20,20,10,.42);
  --lift-sm:inset 0 1px 0 #fff,0 0 0 1px rgba(0,0,0,.045),0 14px 24px -18px rgba(20,20,10,.32);
  --lift-hover:inset 0 1px 0 #fff,0 0 0 1px rgba(0,0,0,.07),0 34px 52px -30px rgba(20,20,10,.5);

  /* the deck: the logo's tile as big as the picture needs. Dark in light mode. */
  --deck-bg:radial-gradient(130% 95% at 50% -12%,#2C2C30 0%,#151517 62%,#0B0B0C 100%);
  --deck-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.05),0 44px 64px -34px rgba(10,10,5,.6),0 14px 24px -16px rgba(10,10,5,.32);
  --deck-glow:rgba(255,255,255,.075); --deck-fg:#FFFFFF; --deck-mut:rgba(255,255,255,.64); --deck-faint:rgba(255,255,255,.38);
  --deck-hair:rgba(255,255,255,.1); --deck-ok:#7CC4A2; --deck-need:#E6B061; --deck-blue:#9DBCE3; --deck-sea:#86C0CD; --deck-red:#E89189;
  --deck-key:rgba(255,255,255,.1); --deck-key-h:rgba(255,255,255,.16); --deck-ring:rgba(255,255,255,.22);
  --orb-ink:255,255,255;

  --tile-bg:radial-gradient(130% 95% at 50% -12%,#4A4A50 0%,#303035 60%,#26262A 100%);
  --tile-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 14px -8px rgba(0,0,0,.45);
  --logo-filter:none;

  /* keys: graphite, never pure black */
  --key-bg:radial-gradient(130% 95% at 50% -12%,#4A4A50 0%,#303035 60%,#26262A 100%); --key-fg:#FFFFFF;
  --key-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 12px 20px -12px rgba(0,0,0,.55);
  --key-shadow-h:inset 0 1px 0 rgba(255,255,255,.32),0 16px 26px -12px rgba(0,0,0,.6);
  --seg-on:#FFFFFF; --tip-bg:#1E1E21; --tip-fg:#FFFFFF; --tip-mut:rgba(255,255,255,.66);
  --dock:rgba(255,255,255,.94); --scrim:rgba(20,20,18,.28);

  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* motion (design system v8): arrive, respond, then be still */
  --ease:cubic-bezier(.22,1,.36,1); --out:cubic-bezier(.23,1,.32,1); --spring:cubic-bezier(.34,1.42,.5,1);
  --crisp:cubic-bezier(.2,0,.2,1); --brand:cubic-bezier(.16,1,.3,1);
  --d-micro:120ms; --d-press:160ms; --d-trans:240ms; --d-drawer:320ms; --d-arrive:520ms; --d-draw:1100ms; --d-count:900ms;

  --r-card:28px; --r-deck:32px; --r-med:16px; --r-key:14px; --r-tip:10px;
  color-scheme:light;
}

/* ---------- tokens: dark (all dark: the deck is a lifted graphite, the orb stays white; Chad, 19 Oct 2026) ---------- */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --room:#0B0B0C; --card:#151517; --card2:#1A1A1D; --sunk:rgba(255,255,255,.04); --sunk2:rgba(255,255,255,.07);
  --ink:#F2F2F2; --ink2:#D9D9DC; --mut:#9C9CA0; --faint:#6E6E72; --ghost:#45454A; --em:#7E7E84;
  --hair:rgba(255,255,255,.075); --hair2:rgba(255,255,255,.14);
  --green:#6AA98C; --green-t:#7CC4A2; --blue:#92B2D9; --blue-t:#A9C3E3; --sea:#6FB0BF; --sea-t:#86C0CD;
  --amber:#E6B061; --amber-t:#E6B061; --red:#E07A72; --red-t:#E89189;
  --need-100:rgba(230,176,97,.12); --ok-100:rgba(106,169,140,.13); --blue-100:rgba(146,178,217,.12); --sea-100:rgba(111,176,191,.12); --red-100:rgba(224,122,114,.12);
  --c-prev:rgba(242,242,242,.34); --c-grid:rgba(255,255,255,.07); --c-area:rgba(61,143,91,.16); --c-empty:rgba(255,255,255,.09); --ring:#6E6E72;
  --lift:inset 0 1px 0 rgba(255,255,255,.065),0 0 0 1px rgba(255,255,255,.065),0 26px 40px -28px rgba(0,0,0,.9);
  --lift-sm:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px rgba(255,255,255,.06),0 14px 24px -18px rgba(0,0,0,.8);
  --lift-hover:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(255,255,255,.12),0 34px 52px -30px rgba(0,0,0,.95);
  --deck-bg:radial-gradient(130% 95% at 50% -12%,#34343A 0%,#202024 58%,#17171A 100%);
  --deck-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.07),0 44px 64px -34px rgba(0,0,0,.9);
  --deck-glow:rgba(255,255,255,.06); --deck-fg:#FFFFFF; --deck-mut:rgba(255,255,255,.64); --deck-faint:rgba(255,255,255,.38);
  --deck-hair:rgba(255,255,255,.1); --deck-ok:#7CC4A2; --deck-need:#E6B061; --deck-blue:#9DBCE3; --deck-sea:#86C0CD; --deck-red:#E89189;
  --deck-key:rgba(255,255,255,.1); --deck-key-h:rgba(255,255,255,.16); --deck-ring:rgba(255,255,255,.22);
  --orb-ink:255,255,255;
  --tile-bg:radial-gradient(130% 95% at 50% -12%,#3A3A40 0%,#26262A 60%,#1C1C1F 100%); --tile-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 0 1px rgba(255,255,255,.06),0 8px 14px -8px rgba(0,0,0,.6);
  --logo-filter:none;
  --key-bg:#F2F2F2; --key-fg:#141416; --key-shadow:inset 0 1px 0 #fff,0 12px 20px -12px rgba(0,0,0,.8); --key-shadow-h:inset 0 1px 0 #fff,0 16px 26px -12px rgba(0,0,0,.9);
  --seg-on:#2A2A2F; --tip-bg:#F2F2F2; --tip-fg:#141416; --tip-mut:rgba(0,0,0,.6);
  --dock:rgba(28,28,31,.94); --scrim:rgba(0,0,0,.5);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --room:#0B0B0C; --card:#151517; --card2:#1A1A1D; --sunk:rgba(255,255,255,.04); --sunk2:rgba(255,255,255,.07);
  --ink:#F2F2F2; --ink2:#D9D9DC; --mut:#9C9CA0; --faint:#6E6E72; --ghost:#45454A; --em:#7E7E84;
  --hair:rgba(255,255,255,.075); --hair2:rgba(255,255,255,.14);
  --green:#6AA98C; --green-t:#7CC4A2; --blue:#92B2D9; --blue-t:#A9C3E3; --sea:#6FB0BF; --sea-t:#86C0CD;
  --amber:#E6B061; --amber-t:#E6B061; --red:#E07A72; --red-t:#E89189;
  --need-100:rgba(230,176,97,.12); --ok-100:rgba(106,169,140,.13); --blue-100:rgba(146,178,217,.12); --sea-100:rgba(111,176,191,.12); --red-100:rgba(224,122,114,.12);
  --c-prev:rgba(242,242,242,.34); --c-grid:rgba(255,255,255,.07); --c-area:rgba(61,143,91,.16); --c-empty:rgba(255,255,255,.09); --ring:#6E6E72;
  --lift:inset 0 1px 0 rgba(255,255,255,.065),0 0 0 1px rgba(255,255,255,.065),0 26px 40px -28px rgba(0,0,0,.9);
  --lift-sm:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px rgba(255,255,255,.06),0 14px 24px -18px rgba(0,0,0,.8);
  --lift-hover:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(255,255,255,.12),0 34px 52px -30px rgba(0,0,0,.95);
  --deck-bg:radial-gradient(130% 95% at 50% -12%,#34343A 0%,#202024 58%,#17171A 100%);
  --deck-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.07),0 44px 64px -34px rgba(0,0,0,.9);
  --deck-glow:rgba(255,255,255,.06); --deck-fg:#FFFFFF; --deck-mut:rgba(255,255,255,.64); --deck-faint:rgba(255,255,255,.38);
  --deck-hair:rgba(255,255,255,.1); --deck-ok:#7CC4A2; --deck-need:#E6B061; --deck-blue:#9DBCE3; --deck-sea:#86C0CD; --deck-red:#E89189;
  --deck-key:rgba(255,255,255,.1); --deck-key-h:rgba(255,255,255,.16); --deck-ring:rgba(255,255,255,.22);
  --orb-ink:255,255,255;
  --tile-bg:radial-gradient(130% 95% at 50% -12%,#3A3A40 0%,#26262A 60%,#1C1C1F 100%); --tile-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 0 1px rgba(255,255,255,.06),0 8px 14px -8px rgba(0,0,0,.6);
  --logo-filter:none;
  --key-bg:#F2F2F2; --key-fg:#141416; --key-shadow:inset 0 1px 0 #fff,0 12px 20px -12px rgba(0,0,0,.8); --key-shadow-h:inset 0 1px 0 #fff,0 16px 26px -12px rgba(0,0,0,.9);
  --seg-on:#2A2A2F; --tip-bg:#F2F2F2; --tip-fg:#141416; --tip-mut:rgba(0,0,0,.6);
  --dock:rgba(28,28,31,.94); --scrim:rgba(0,0,0,.5);
  color-scheme:dark;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--room);color:var(--ink);font:400 15px/1.5 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"cv11","ss01";overflow-x:hidden;transition:background-color var(--d-drawer) var(--brand),color var(--d-drawer) var(--brand)}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ol,ul,dl,dd,figure{margin:0}
ol,ul{padding:0;list-style:none}
svg{display:block}
::selection{background:color-mix(in srgb,var(--ink) 14%,transparent)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
.deck :focus-visible{outline-color:var(--deck-fg)}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ic{display:block;flex:none}

/* ---------- type ---------- */
.eyebrow{font:500 11px/1.25 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.eyebrow.ink{color:var(--ink)}
.annot{font:400 11px/1.45 var(--mono);letter-spacing:.03em;color:var(--mut)}
.ctl{font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.h1{font-size:30px;line-height:1.08;font-weight:600;letter-spacing:-.04em;text-wrap:balance}
.h1 em,.h2 em,.h3 em{font-style:normal;color:var(--em)}
.h2{font-size:19px;line-height:1.26;font-weight:600;letter-spacing:-.025em;text-wrap:balance}
.h3{font-size:15px;line-height:1.32;font-weight:600;letter-spacing:-.015em}
.lede{font-size:17px;line-height:1.45;letter-spacing:-.012em;color:var(--ink2);text-wrap:pretty}
.body{font-size:15px;line-height:1.5;color:var(--ink2);text-wrap:pretty}
.small{font-size:13px;line-height:1.5;color:var(--mut);text-wrap:pretty}
.small b,.body b{font-weight:600;color:var(--ink)}
.num{font-variant-numeric:tabular-nums lining-nums slashed-zero}
.fig{font-family:var(--mono);font-weight:500;letter-spacing:-.045em;font-variant-numeric:tabular-nums lining-nums slashed-zero;line-height:1;white-space:nowrap}
.fig .cur{font-size:.5em;color:var(--mut);letter-spacing:0;margin-right:.06em;vertical-align:baseline}
.fig .suf{font-size:.5em;color:var(--mut);letter-spacing:0;margin-left:.08em;position:relative;top:-.18em}
.fig.xl{font-size:64px}.fig.l{font-size:44px}.fig.m{font-size:32px}.fig.s{font-size:22px}.fig.xs{font-size:17px;letter-spacing:-.03em}
.amt{font:500 15px/1.2 var(--mono);letter-spacing:-.03em;font-variant-numeric:tabular-nums slashed-zero;white-space:nowrap}
.unit{font:400 11.5px/1.3 var(--mono);color:var(--mut);letter-spacing:.02em}
.delta{display:inline-flex;align-items:center;gap:5px;font:500 12px/1 var(--mono);letter-spacing:.02em}
.delta.up{color:var(--green-t)} .delta.down{color:var(--red-t)} .delta.flat{color:var(--mut)}
.link{display:inline-flex;align-items:center;gap:6px;font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);padding:8px 0;border-radius:6px}
.link .ic{transition:transform var(--d-trans) var(--out)}
@media (hover:hover) and (pointer:fine){.link:hover .ic{transform:translateX(3px)}}

/* ---------- layout ---------- */
.page{max-width:1344px;margin:0 auto;padding-block:30px 96px;padding-left:max(clamp(16px,3.2vw,40px),env(safe-area-inset-left,0px));padding-right:max(clamp(16px,3.2vw,40px),env(safe-area-inset-right,0px))}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:stretch}
.grid>*{min-width:0}
.span-12{grid-column:span 12}.span-8{grid-column:span 8}.span-7{grid-column:span 7}.span-6{grid-column:span 6}.span-5{grid-column:span 5}.span-4{grid-column:span 4}.span-3{grid-column:span 3}
@media (max-width:1100px){.span-7,.span-5,.span-8,.span-4{grid-column:span 12}.span-6{grid-column:span 12}.span-3{grid-column:span 6}}
@media (max-width:767px){.grid{gap:14px}.span-3{grid-column:span 12}}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.row.top{align-items:flex-start}.row.base{align-items:baseline}.row.wrap{flex-wrap:wrap}
.cluster{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.grow{flex:1;min-width:0}
.gap-4{gap:4px}.gap-6{gap:6px}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-20{gap:20px}.gap-24{gap:24px}
.mt-4{margin-top:4px}.mt-6{margin-top:6px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-20{margin-top:20px}.mt-24{margin-top:24px}.mt-auto{margin-top:auto}

/* ---------- cards ---------- */
.card{position:relative;border-radius:var(--r-card);background:var(--card);box-shadow:var(--lift);min-width:0;display:flex;flex-direction:column;transition:box-shadow var(--d-drawer) var(--ease),transform var(--d-drawer) var(--spring),background-color var(--d-drawer) var(--brand)}
.card.pad{padding:22px 24px 20px}
.card.tight{padding:18px 20px 16px}
.card.flat{box-shadow:inset 0 0 0 1px var(--hair)}
.card.is-link{cursor:pointer}
@media (hover:hover) and (pointer:fine){.card.is-link:hover{transform:translateY(-4px);box-shadow:var(--lift-hover)}}
.c-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:22px}
.c-head .l,.c-head .r{display:flex;align-items:center;gap:10px;min-width:0}
.c-head .r{flex:none}
.c-title{margin-top:10px}
.c-body{margin-top:14px}
.c-foot{margin-top:auto;padding-top:14px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.c-foot.rule{border-top:1px solid var(--hair);margin-top:16px}
.c-split{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:767px){.card.pad{padding:18px 18px 16px}.card{border-radius:24px}.c-split{grid-template-columns:1fr}}
.inset{border-radius:var(--r-med);background:var(--card2);box-shadow:inset 0 0 0 1px var(--hair);padding:14px 16px}
.inset.quote{background:var(--card2)}
.inset .eyebrow{margin-bottom:6px}
.divider{height:1px;background:var(--hair);border:0;margin:0}
.src{font:400 11px/1.4 var(--mono);letter-spacing:.03em;color:var(--mut);display:inline-flex;align-items:center;gap:6px}
.src .ic{opacity:.7}

/* ---------- the deck ---------- */
.deck{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-deck);background:var(--deck-bg);box-shadow:var(--deck-shadow);color:var(--deck-fg);min-width:0}
.deck::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(80% 45% at 50% 0%,var(--deck-glow) 0%,rgba(255,255,255,0) 70%);z-index:0}
.deck>*{position:relative;z-index:1}
.deck .eyebrow,.deck .annot,.deck .src,.deck .small{color:var(--deck-mut)}
.deck .fig .cur,.deck .fig .suf,.deck .unit{color:var(--deck-mut)}
.deck .divider{background:var(--deck-hair)}
.deck .st.need{--c:var(--deck-need);--c-t:var(--deck-need)} .deck .st.ok,.deck .st.live{--c:var(--deck-ok);--c-t:var(--deck-ok)} .deck .st.idle{--c:var(--deck-faint);--c-t:var(--deck-mut)}
.deck .key.ghost{background:var(--deck-key);color:var(--deck-fg);box-shadow:inset 0 0 0 1px var(--deck-hair)}
@media (hover:hover) and (pointer:fine){.deck .key.ghost:hover{background:var(--deck-key-h)}}
.deck .orb-host{position:absolute;pointer-events:none}
.tile{width:44px;height:44px;border-radius:var(--r-key);background:var(--tile-bg);display:grid;place-items:center;flex:none;box-shadow:var(--tile-shadow);overflow:hidden}
.tile.s{width:36px;height:36px;border-radius:11px}
.tile.l{width:56px;height:56px;border-radius:17px}
svg.logo-orb{display:block;filter:var(--logo-filter)}
.lockup{display:inline-flex;align-items:center;gap:12px}
.wordmark{font:600 16px/1.1 var(--sans);letter-spacing:-.02em;color:var(--ink)}
.lockup .ctx{display:block;margin-top:3px;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}

/* ---------- keys, chips, segments, tabs ---------- */
.key{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:20px;font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;user-select:none;transition:transform var(--d-press) var(--out),box-shadow var(--d-trans) var(--ease),background-color var(--d-trans) var(--ease),color var(--d-trans) var(--ease)}
.key:active{transform:scale(.97)}
.key .ic{transition:transform var(--d-trans) var(--out)}
.key.ink{background:var(--key-bg);color:var(--key-fg);box-shadow:var(--key-shadow)}
.key.line{box-shadow:inset 0 0 0 1px var(--hair2);color:var(--ink)}
.key.ghost{color:var(--mut)}
.key.white{background:var(--card);color:var(--ink);box-shadow:var(--lift-sm)}
.key.sm{height:34px;padding:0 14px;border-radius:17px;gap:6px}
.key.lg{height:52px;padding:0 24px;border-radius:26px;gap:10px}
.key.icon{width:40px;padding:0}.key.icon.sm{width:34px}
.key[disabled],.key[aria-disabled="true"]{opacity:.42;pointer-events:none}
@media (hover:hover) and (pointer:fine){
  .key.ink:hover{box-shadow:var(--key-shadow-h)}
  .key.line:hover,.key.ghost:hover{background:color-mix(in srgb,var(--ink) 4.5%,transparent);color:var(--ink)}
  .key:hover .ic.go{transform:translateX(3px)}
}
.key.done-state{background:var(--ok-100);color:var(--green-t);box-shadow:none}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px;border-radius:16px;font-size:13px;font-weight:500;color:var(--mut);box-shadow:inset 0 0 0 1px var(--hair2);white-space:nowrap;transition:background-color var(--d-trans) var(--ease),color var(--d-trans) var(--ease),box-shadow var(--d-trans) var(--ease),transform var(--d-press) var(--out)}
.chip:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.chip:hover{color:var(--ink)}}
.chip[aria-pressed="true"],.chip.on{background:var(--key-bg);color:var(--key-fg);box-shadow:var(--key-shadow)}
.chip .n{font:500 11px/1 var(--mono);opacity:.7}
.seg{position:relative;display:inline-flex;padding:4px;border-radius:21px;background:var(--sunk2);box-shadow:inset 0 1px 2px rgba(0,0,0,.05);gap:2px}
.seg button{position:relative;z-index:1;height:32px;min-width:34px;padding:0 12px;border-radius:16px;color:var(--mut);display:inline-flex;align-items:center;justify-content:center;gap:6px;font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;transition:color var(--d-trans) var(--ease)}
.seg.icons button{padding:0;width:34px}
.seg button[aria-checked="true"],.seg button[aria-pressed="true"],.seg button[aria-selected="true"]{color:var(--ink)}
.seg .thumb{position:absolute;z-index:0;top:4px;left:0;height:32px;border-radius:16px;background:var(--seg-on);box-shadow:0 0 0 1px rgba(0,0,0,.04),0 6px 12px -8px rgba(0,0,0,.35);transition:transform var(--d-drawer) var(--spring),width var(--d-drawer) var(--spring)}
.seg:not(.has-thumb) button[aria-checked="true"],.seg:not(.has-thumb) button[aria-pressed="true"],.seg:not(.has-thumb) button[aria-selected="true"]{background:var(--seg-on);box-shadow:0 0 0 1px rgba(0,0,0,.04),0 6px 12px -8px rgba(0,0,0,.35)}
.tabs{display:flex;gap:22px;border-bottom:1px solid var(--hair);position:relative}
.tabs button{position:relative;height:40px;display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:500;color:var(--mut);transition:color var(--d-trans) var(--ease)}
.tabs button .n{font:500 11px/1 var(--mono);color:var(--mut)}
.tabs button[aria-selected="true"]{color:var(--ink)}
.tabs .bar{position:absolute;bottom:-1px;left:0;height:2px;border-radius:1px;background:var(--ink);transition:transform var(--d-drawer) var(--spring),width var(--d-drawer) var(--spring)}
@media (hover:hover) and (pointer:fine){.tabs button:hover{color:var(--ink)}}

/* ---------- status, goals, people ---------- */
.st{display:inline-flex;align-items:center;gap:7px;font:500 11px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--c-t,var(--mut));white-space:nowrap}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c,var(--ghost));flex:none}
.st.need{--c:var(--amber);--c-t:var(--amber-t)} .st.need::before{box-shadow:0 0 0 3px color-mix(in srgb,var(--amber) 18%,transparent)}
.st.need.pulse::before{animation:ia-amber 3.4s ease-in-out infinite}
.st.ok{--c:var(--green);--c-t:var(--green-t)} .st.ok::before{box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 16%,transparent)}
.st.live{--c:var(--green);--c-t:var(--green-t)} .st.live::before{box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 16%,transparent)}
.st.live.pulse::before{animation:ia-breath 2.6s ease-in-out infinite}
.st.stop{--c:var(--red);--c-t:var(--red-t)}
.st.idle{--c:transparent;--c-t:var(--mut)} .st.idle::before{box-shadow:inset 0 0 0 1.25px var(--ring)}
.st.blue{--c:var(--blue);--c-t:var(--blue-t)} .st.sea{--c:var(--sea);--c-t:var(--sea-t)}
.st.plain{text-transform:none;letter-spacing:.02em;font-size:12px}
@keyframes ia-breath{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes ia-amber{0%,100%{opacity:.72}50%{opacity:1}}
.g{font:500 11px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.g.green{color:var(--green-t)} .g.blue{color:var(--blue-t)} .g.sea{color:var(--sea-t)} .g.amber{color:var(--amber-t)} .g.red{color:var(--red-t)} .g.ink{color:var(--ink)}
.g .gl{width:14px;height:14px}
.pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:13px;background:var(--sunk);font:500 11px/1 var(--mono);letter-spacing:.06em;color:var(--ink2);white-space:nowrap}
.pill.need{background:var(--need-100);color:var(--amber-t)} .pill.ok{background:var(--ok-100);color:var(--green-t)} .pill.red{background:var(--red-100);color:var(--red-t)} .pill.blue{background:var(--blue-100);color:var(--blue-t)}
.badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;display:inline-grid;place-items:center;font:600 11px/1 var(--mono);background:var(--sunk2);color:var(--ink)}
.badge.need{background:var(--amber-t);color:var(--card)} .badge.red{background:var(--red-t);color:var(--card)}
.face{width:30px;height:30px;border-radius:50%;background:var(--card);display:grid;place-items:center;font:600 11px/1 var(--mono);color:var(--ink);box-shadow:0 0 0 1px var(--hair2),0 6px 10px -8px rgba(0,0,0,.4);flex:none}
.face.s{width:24px;height:24px;font-size:11px}
.face.l{width:40px;height:40px;font-size:12px}
.faces{display:inline-flex}.faces .face+.face{margin-left:-7px;box-shadow:0 0 0 2px var(--card),0 0 0 3px var(--hair2)}
.owner{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink2)}
.glyph{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:var(--sunk);color:var(--ink);flex:none}
.glyph.s{width:28px;height:28px;border-radius:10px}

/* ---------- lists ---------- */
.rows>*+*{border-top:1px solid var(--hair)}
.ri{display:flex;align-items:center;gap:14px;padding:13px 0;min-width:0}
.ri.top{align-items:flex-start}
.ri .grow{min-width:0}
.ri .name{font-size:15px;font-weight:500;letter-spacing:-.012em;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ri .meta{font-size:13px;color:var(--mut);margin-top:2px}
.ri .end{text-align:right;flex:none}
.ri.press{margin:0 -12px;padding-left:12px;padding-right:12px;border-radius:var(--r-med);transition:background-color var(--d-press) var(--ease)}
.rows>.ri.press+.ri.press{border-top-color:transparent;box-shadow:0 -1px 0 0 var(--hair)}
@media (hover:hover) and (pointer:fine){.ri.press:hover{background:var(--sunk)}}
.ri .chev{color:var(--faint);transition:transform var(--d-trans) var(--out)}
@media (hover:hover) and (pointer:fine){.ri.press:hover .chev{transform:translateX(2px);color:var(--mut)}}

/* ---------- honest states ---------- */
/* Coming next: drawn in pencil, never a fake figure. Names what turns it on. */
.pencil{position:relative;border-radius:18px;border:1.5px dashed color-mix(in srgb,var(--ink) 18%,transparent);background:repeating-linear-gradient(135deg,transparent 0 9px,color-mix(in srgb,var(--ink) 2.6%,transparent) 9px 10px);padding:16px}
.pencil .st{margin-bottom:8px}
svg .pen{fill:none;stroke:color-mix(in srgb,var(--ink) 26%,transparent);stroke-width:1.25;stroke-dasharray:4 4;stroke-linecap:round}
svg .pen-fill{fill:color-mix(in srgb,var(--ink) 4%,transparent);stroke:none}
/* Not exact yet: the figure's place says so and names the unlock. */
.notexact{display:flex;flex-direction:column;gap:6px}
.notexact .what{font:500 15px/1.3 var(--sans);color:var(--ink)}
.notexact .why{font-size:13px;line-height:1.5;color:var(--mut)}
/* A read that failed or went stale: the card keeps its last good figures and says so. Red never moves. */
.notice{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;border-radius:14px;font-size:13px;line-height:1.45}
.notice .ic{margin-top:1px}
.notice.need{background:var(--need-100);color:var(--ink2)} .notice.need .ic{color:var(--amber-t)}
.notice.red{background:var(--red-100);color:var(--ink2)} .notice.red .ic{color:var(--red-t)}
.notice.ok{background:var(--ok-100);color:var(--ink2)} .notice.ok .ic{color:var(--green-t)}
.notice.plain{background:var(--sunk);color:var(--ink2)}
/* stale: marks fade, words stay readable (opacity on text failed 4.5:1); figures go to the muted ink */
.is-stale .fig,.is-stale .fig .cur,.is-stale .amt{color:var(--mut)}
.is-stale .chart circle,.is-stale .chart path,.is-stale .chart .hb-f,.is-stale .chart .mt-f{opacity:.42}
.is-stale .chart text{fill:var(--mut)}
/* Loading: still blocks, no shimmer (design system: no shimmer, no glow pulses). */
.skel{border-radius:10px;background:var(--sunk2)}
.skel.line{height:12px}.skel.fig{height:40px;width:60%}.skel.block{height:140px;border-radius:16px}

/* ---------- charts ---------- */
.chart{position:relative;width:100%;user-select:none;-webkit-user-select:none}
.chart svg{overflow:visible}
.chart text{font-family:var(--mono);font-size:11px;fill:var(--mut);letter-spacing:.02em}
.chart text.ink{fill:var(--ink)} .chart text.strong{fill:var(--ink);font-weight:500}
.chart .grid-l{stroke:var(--c-grid);stroke-width:1;shape-rendering:crispEdges}
.chart .base-l{stroke:var(--hair2);stroke-width:1;shape-rendering:crispEdges}
.chart .tgt-l{stroke:var(--ink);stroke-opacity:.5;stroke-width:1;stroke-dasharray:3 3}
.chart .now-l{fill:none;stroke:var(--c-now);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .two-l{fill:none;stroke:var(--c-2);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .prev-l{fill:none;stroke:var(--c-prev);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.chart .area{fill:var(--c-area);stroke:none}
.chart .cross{stroke:var(--ink);stroke-opacity:.28;stroke-width:1;shape-rendering:crispEdges;opacity:0;transition:opacity var(--d-micro) var(--ease)}
.chart.hovering .cross{opacity:1}
.chart .hit{fill:transparent;cursor:crosshair}
.chart .col-hit{fill:transparent;cursor:pointer}
.chart .dim{transition:opacity var(--d-press) var(--ease)}
.chart.hovering .dim:not(.hot){opacity:.3}
.legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;font-size:13px;color:var(--mut)}
.legend .k{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.legend .k b{font:500 13px/1 var(--mono);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.legend .sw{width:14px;height:2px;border-radius:1px;background:var(--c-now)}
.legend .sw.prev{background:var(--c-prev)} .legend .sw.two{background:var(--c-2)}
.legend .sw.dot{width:8px;height:8px;border-radius:50%}
.legend .sw.ring{width:9px;height:9px;border-radius:50%;background:transparent;box-shadow:inset 0 0 0 1.5px var(--amber)}
.legend .sw.grey{background:var(--ghost)}
.axis-row{display:flex;justify-content:space-between;font:400 11px/1 var(--mono);letter-spacing:.04em;color:var(--mut);margin-top:10px;text-transform:uppercase}
/* dots: the app's language. Each dot can fall into place once (see kit.js IA.motion). */
.chart .dt{transform-box:fill-box;transform-origin:center}
.js .chart:not(.drawn) .dt.anim{opacity:.22;transform:scale(.55)}
.chart.drawn .dt.anim{animation:ia-dot-in 460ms var(--out) var(--dd,0ms) both}
@keyframes ia-dot-in{from{opacity:.22;transform:translateY(-6px) scale(.55)}to{opacity:var(--o,1);transform:none}}
.js .chart:not(.drawn) .draw{stroke-dashoffset:1}
.chart .draw{stroke-dasharray:1;stroke-dashoffset:0}
.chart.drawn .draw{animation:ia-draw var(--d-draw) var(--out) var(--dd,0ms) both}
@keyframes ia-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.js .chart:not(.drawn) .fade-in{opacity:0}
.chart.drawn .fade-in{animation:ia-fade 600ms var(--ease) var(--dd,300ms) both}
@keyframes ia-fade{from{opacity:0}to{opacity:var(--o,1)}}
.js .chart:not(.drawn) .grow-x{transform:scaleX(0)}
.chart .grow-x{transform-box:fill-box;transform-origin:left center}
.chart.drawn .grow-x{animation:ia-grow-x 900ms var(--out) var(--dd,0ms) both}
@keyframes ia-grow-x{from{transform:scaleX(0)}to{transform:none}}
.js .chart:not(.drawn) .grow-y{transform:scaleY(0)}
.chart .grow-y{transform-box:fill-box;transform-origin:center bottom}
.chart.drawn .grow-y{animation:ia-grow-y 760ms var(--out) var(--dd,0ms) both}
@keyframes ia-grow-y{from{transform:scaleY(0)}to{transform:none}}

/* ranked bars (hbars) and meters: thin, rounded at the data end, pressed-in tracks */
.hb{display:flex;flex-direction:column;gap:14px}
.hb-l{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13.5px;color:var(--ink2);margin-bottom:7px}
.hb-l b{font:500 13.5px/1 var(--mono);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.hb-t,.mt-t{position:relative;height:8px;border-radius:4px;background:var(--sunk2);box-shadow:inset 0 1px 1.5px rgba(0,0,0,.06)}
.mt-t.thin{height:5px;border-radius:3px}
.hb-f,.mt-f{position:absolute;left:0;top:0;bottom:0;border-radius:inherit;background:var(--c-now);transform-origin:left center}
.hb-f.two,.mt-f.two{background:var(--c-2)} .hb-f.amber,.mt-f.amber{background:var(--amber)} .hb-f.red,.mt-f.red{background:var(--red)} .hb-f.grey,.mt-f.grey{background:var(--ghost)} .hb-f.ink,.mt-f.ink{background:var(--ink)}
.hb-n{margin-top:6px;font-size:12.5px;color:var(--mut)}
.mt-g{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;border-radius:1px;background:var(--ink);opacity:.55}
.js .chart:not(.drawn) .hb-anim{transform:scaleX(0)}
.chart.drawn .hb-anim{animation:ia-grow-x 900ms var(--out) var(--dd,0ms) both}
.chart .breath{transform-box:fill-box;transform-origin:center}

/* the tooltip: values lead, labels follow; one per page, moved by kit.js */
.tip{position:fixed;z-index:80;left:0;top:0;pointer-events:none;min-width:150px;max-width:260px;padding:10px 12px 11px;border-radius:var(--r-tip);background:var(--tip-bg);color:var(--tip-fg);box-shadow:0 18px 34px -16px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.12);opacity:0;transform:translateY(4px) scale(.97);transform-origin:var(--tip-origin,50% 100%);transition:opacity 125ms var(--out),transform 125ms var(--out)}
.tip.on{opacity:1;transform:none}
.tip.instant{transition:none}
.tip .tv{font:500 17px/1.1 var(--mono);letter-spacing:-.03em;font-variant-numeric:tabular-nums slashed-zero}
.tip .tl{margin-top:4px;font-size:12.5px;line-height:1.35;color:var(--tip-mut)}
.tip .tr{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:6px;font-size:12.5px;color:var(--tip-mut)}
.tip .tr b{font:500 12.5px/1 var(--mono);color:var(--tip-fg);font-variant-numeric:tabular-nums}
.tip .tr i{display:inline-block;width:12px;height:2px;border-radius:1px;margin-right:7px;vertical-align:middle;background:var(--c-now)}
.tip .tr i.prev{background:var(--tip-mut)} .tip .tr i.two{background:var(--c-2)} .tip .tr i.amber{background:var(--amber)}

/* ---------- shell: the client rail (88px icons) ---------- */
.shell{display:flex;min-height:100vh}
.rail{position:sticky;top:0;height:100vh;width:88px;flex:none;display:flex;flex-direction:column;align-items:center;padding:20px 0 18px;gap:6px;border-right:1px solid var(--hair);background:color-mix(in srgb,var(--room) 92%,var(--card));z-index:40}
.rail .ritem{position:relative;width:44px;height:44px;border-radius:var(--r-key);display:grid;place-items:center;color:var(--mut);transition:background-color var(--d-trans) var(--ease),color var(--d-trans) var(--ease),transform var(--d-press) var(--out)}
.rail .ritem:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.rail .ritem:hover{background:var(--sunk);color:var(--ink)}}
.rail .ritem[aria-current="page"]{background:var(--key-bg);color:var(--key-fg);box-shadow:var(--key-shadow)}
.rail .ritem .n{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--amber-t);color:var(--card);font:600 11px/16px var(--mono);text-align:center;box-shadow:0 0 0 2px var(--room)}
.rail .rtip{position:absolute;left:56px;top:50%;transform:translateY(-50%) translateX(-4px);padding:6px 9px;border-radius:8px;background:var(--tip-bg);color:var(--tip-fg);font-size:12.5px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 125ms var(--out),transform 125ms var(--out)}
@media (hover:hover) and (pointer:fine){.rail .ritem:hover .rtip{opacity:1;transform:translateY(-50%)}}
.rail .rnav{display:flex;flex-direction:column;gap:6px;margin-top:22px}
.rail .rfoot{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:10px}
.main{flex:1;min-width:0}

/* ---------- shell: Mission Control's labelled rail (232px), same keys ---------- */
.mrail{position:sticky;top:0;height:100vh;width:236px;flex:none;display:flex;flex-direction:column;padding:20px 14px 16px;border-right:1px solid var(--hair);background:color-mix(in srgb,var(--room) 92%,var(--card));z-index:40;overflow-y:auto;scrollbar-width:none}
.mrail::-webkit-scrollbar{display:none}
.mrail .lockup{padding:0 6px}
.mrail .search{display:flex;align-items:center;gap:10px;height:40px;margin:18px 0 6px;padding:0 10px 0 12px;border-radius:12px;background:var(--card);box-shadow:var(--lift-sm);color:var(--mut);font-size:13.5px;width:100%;text-align:left}
.mrail .search kbd{margin-left:auto;font:500 11px/1 var(--mono);padding:4px 6px;border-radius:6px;background:var(--sunk2);color:var(--mut)}
.mrail .sec{margin:18px 0 6px;padding:0 10px}
.mrail .mi{position:relative;display:flex;align-items:center;gap:11px;height:38px;padding:0 10px;border-radius:12px;color:var(--ink2);font-size:14px;font-weight:500;letter-spacing:-.01em;width:100%;text-align:left;transition:background-color var(--d-trans) var(--ease),color var(--d-trans) var(--ease),transform var(--d-press) var(--out)}
.mrail .mi .ic{color:var(--mut);transition:color var(--d-trans) var(--ease)}
.mrail .mi:active{transform:scale(.985)}
@media (hover:hover) and (pointer:fine){.mrail .mi:hover{background:var(--sunk)}}
.mrail .mi[aria-current="page"]{background:var(--key-bg);color:var(--key-fg);box-shadow:var(--key-shadow)}
.mrail .mi[aria-current="page"] .ic{color:var(--key-fg)}
.mrail .mi .tail{margin-left:auto;display:inline-flex;align-items:center;gap:6px}
.mrail .mi .tail .annot{color:var(--amber-t)}
.mrail .mi[aria-current="page"] .tail .annot{color:inherit;opacity:.75}
.mrail .sub{padding-left:22px}
.mrail .sub .mi{height:34px;font-size:13.5px;color:var(--mut)}
.mrail .me{margin-top:auto;padding:12px;border-radius:16px;background:var(--card);box-shadow:var(--lift-sm);display:flex;align-items:center;gap:10px}

/* ---------- phone: the app's dock ---------- */
.dock{position:fixed;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:max(14px,env(safe-area-inset-bottom,0px));z-index:40;display:none;gap:10px}
.dock .bar{flex:1;height:62px;border-radius:31px;background:var(--dock);display:flex;align-items:center;justify-content:space-between;padding:0 7px;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 0 1px var(--hair),0 26px 36px -20px rgba(20,20,10,.42);-webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3)}
.dock .tab{position:relative;height:48px;min-width:48px;border-radius:24px;display:inline-flex;align-items:center;justify-content:center;gap:8px;color:var(--mut);font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;transition:background-color var(--d-trans) var(--ease),color var(--d-trans) var(--ease)}
.dock .tab[aria-current="page"]{padding:0 16px 0 14px;background:var(--key-bg);color:var(--key-fg);box-shadow:var(--key-shadow)}
.dock .tab .n{position:absolute;right:4px;top:3px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--amber-t);color:var(--card);font:600 11px/16px var(--mono);text-align:center;box-shadow:0 0 0 2px var(--dock)}
.phone-top{display:none}
@media (max-width:767px){
  .rail,.mrail{display:none}
  .dock{display:flex}
  .phone-top{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 0}
  .page{padding-block:16px 120px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .h1{font-size:26px}
}

/* ---------- sheets and the command palette ---------- */
.scrim{position:fixed;inset:0;z-index:70;background:var(--scrim);opacity:0;pointer-events:none;transition:opacity var(--d-drawer) var(--ease)}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;z-index:71;right:16px;top:16px;bottom:16px;width:min(520px,calc(100vw - 32px));border-radius:28px;background:var(--card);box-shadow:0 40px 80px -30px rgba(0,0,0,.5);transform:translateX(calc(100% + 24px));transition:transform 420ms cubic-bezier(.32,.72,0,1);overflow:auto}
.sheet.on{transform:none}
@media (max-width:767px){.sheet{left:0;right:0;top:auto;bottom:0;width:auto;max-height:88vh;border-radius:28px 28px 0 0;transform:translateY(100%)}}

/* ---------- motion: cards settle in once ---------- */
.js [data-a]:not(.is-in){opacity:.55;transform:translateY(12px)}
.js [data-a].is-in{opacity:1;transform:none;transition:opacity var(--d-arrive) var(--ease) var(--delay,0ms),transform var(--d-arrive) var(--ease) var(--delay,0ms)}
.pop{animation:ia-pop 420ms var(--spring) both}
@keyframes ia-pop{0%{transform:scale(.6);opacity:0}100%{transform:none;opacity:1}}
.tick-draw path{stroke-dasharray:24;stroke-dashoffset:24;animation:ia-tick 380ms var(--out) 80ms forwards}
@keyframes ia-tick{to{stroke-dashoffset:0}}

/* still mode (screenshots, #still) and reduced motion: everything at its last frame */
.still *,.still *::before,.still *::after{animation-duration:0s!important;animation-delay:0s!important;transition-duration:0s!important;transition-delay:0s!important}
.still [data-a]{opacity:1!important;transform:none!important}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js [data-a]{opacity:1;transform:none}
  .st.live::before,.st.need::before{animation:none}
}

/* ---------- dark mode: a current place (rail, phone dock) is a soft grey key, not the white key; the primary key on the deck stays white (Chad, 19 Oct 2026; KD-dark D1, D2) ---------- */
:root[data-theme="dark"] .rail .ritem[aria-current="page"],:root[data-theme="dark"] .mrail .mi[aria-current="page"],:root[data-theme="dark"] .dock .tab[aria-current="page"]{background:#26262B;color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(255,255,255,.34)}
:root[data-theme="dark"] .mrail .mi[aria-current="page"] .ic{color:var(--ink)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .rail .ritem[aria-current="page"],:root:not([data-theme="light"]) .mrail .mi[aria-current="page"],:root:not([data-theme="light"]) .dock .tab[aria-current="page"]{background:#26262B;color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(255,255,255,.34)}
  :root:not([data-theme="light"]) .mrail .mi[aria-current="page"] .ic{color:var(--ink)}
}
/* the primary key ON THE DECK (.deck .key.white; a white key on a card stays var(--card)) is white with dark ink in dark mode too (D1); D3: kit.js is byte-identical to mission-control-v2 origin/main design/kit/kit.js, so the 19 Oct rule 5 note lives here, not in kit.js; the current-place ring is rgba(255,255,255,.34) = 3:1 on rail, dock and board (D5, decided 19 Oct under Chad's delegation: the approved .1 ring measured 1.25:1, below 3:1): var(--card) is #151517 in dark, about 1.1:1 on the graphite deck */
:root[data-theme="dark"] .deck .key.white{background:#FFFFFF;color:#141416;box-shadow:inset 0 1px 0 #fff,0 12px 20px -12px rgba(0,0,0,.8)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .deck .key.white{background:#FFFFFF;color:#141416;box-shadow:inset 0 1px 0 #fff,0 12px 20px -12px rgba(0,0,0,.8)}
}