/* ============================================================================
 * CoreOps — co-theme.css  v2 "control room"
 * Mark 2, Phase 2. The design system.
 * ----------------------------------------------------------------------------
 * v1 was too quiet. The existing app is genuinely VISUAL — 60+ gradients,
 * 21 backdrop-blurs, deep layered shadows and 20+ live-state animations
 * (alarmFlash, areaPulseRed, compPulse, erFlow…). Flattening that lost the
 * thing that made it feel like you were running a building.
 *
 * v2 keeps that DNA and brightens it: cool bright ground instead of beige,
 * vivid modern semantics instead of muted ones, real depth, and live state
 * that GLOWS. Navy and brass stay — they are CoreOps' identity — but they
 * are now chrome and accent, not the whole palette.
 *
 * RULES
 *   1. No !important. Only the reduced-motion and print blocks may use it.
 *   2. No inline style= for anything a token covers.
 *   3. Never hard-code a z-index. Use --z-*. The v6.72.0 header bug was a
 *      stacking-context collision; anything fixed is re-parented to <body>.
 *   4. Spacing from --sp-*.
 *   5. Colour carries MEANING. Accent = interactive. Semantic = state.
 *      Never decorate with a semantic colour.
 *   6. Movement is information. A thing glows or pulses only when it is
 *      genuinely LIVE or genuinely OVERDUE. Hover states change colour and
 *      depth, never position — rows that shuffle read as unfinished.
 *
 * WHAT "POLISHED" MEANS HERE, MEASURED AGAINST THE CURRENT APP
 *   font sizes    42 -> 9      (it currently has 6px, 7.5px, 8.5px, 16.5px, 27px)
 *   border radii  22 -> 6      (eight different values between 7px and 14px)
 *   box-shadows  188 -> 4
 *   hex colours  656 -> ~40    (20 distinct greys alone)
 *   button rules 197 -> 1 + variants
 *   font weights   6 -> 4
 * Nothing individually looks wrong today. What reads as unfinished is that
 * across 44 panels nothing quite lines up. Collapsing the ladders is the fix.
 * ==========================================================================*/

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* ---- chrome: deep navy, the app's own, now with real range ---- */
  --navy-950:#050b16;
  --navy-900:#081426;
  --navy-800:#0b1e3b;
  --navy-700:#15294a;
  --navy-600:#1f3a63;
  --navy-500:#2d4f80;
  --navy-300:#7d97bd;
  --navy-200:#a9bdd8;

  /* ---- accent: brass, brightened until it actually reads as gold ---- */
  --gold-700:#b57a1e;
  --gold-600:#d99425;
  --gold-500:#f0a92f;
  --gold-400:#ffc45c;
  --gold-100:#fff1d6;

  /* ---- live: the "it's working right now" colour. Teal is already in the
         app (its #00695c gradients); this is that, brightened. ---- */
  --live-700:#0b7c72;
  --live-600:#0fa79a;
  --live-500:#19c9b8;
  --live-100:#d5f6f2;

  /* ---- ground: cool and BRIGHT, not beige. #eef2f8 is already in the app. ---- */
  --cool-50:#f7f9fc;
  --cool-100:#eef2f8;
  --cool-200:#e2e9f3;
  --cool-300:#d0dae8;
  --cool-400:#aebbcd;

  --slate-900:#0f1729;
  --slate-700:#334158;
  --slate-500:#5b6c86;
  --slate-400:#8496ae;

  /* ---- semantic: vivid and modern, not muted ---- */
  --ok-600:#0f9d58;   --ok-500:#12b76a;   --ok-100:#d4f6e4;   --ok-line:#7ddcab;
  --warn-600:#dc7c06; --warn-500:#f79009; --warn-100:#ffeed4; --warn-line:#f7c073;
  --risk-600:#d92d20; --risk-500:#f04438; --risk-100:#ffe2df; --risk-line:#f9a8a1;
  --info-600:#1f6fd0; --info-500:#2f88ea; --info-100:#dceafb; --info-line:#9cc6f5;

  /* ---- roles: components use THESE, never a raw scale above ---- */
  --bg-app:var(--cool-100);
  --bg-sunken:var(--cool-200);
  --bg-surface:#ffffff;
  --bg-raised:#ffffff;
  --bg-inverse:var(--navy-800);
  --bg-hover:var(--cool-50);
  --bg-selected:var(--info-100);

  --fg:var(--slate-900);
  --fg-muted:var(--slate-500);
  --fg-subtle:var(--slate-400);
  --fg-inverse:#ffffff;
  --fg-inverse-muted:var(--navy-200);
  --fg-link:var(--info-600);
  --fg-link-hover:var(--info-500);

  --line:var(--cool-300);
  --line-soft:var(--cool-200);
  --line-strong:var(--cool-400);
  --line-inverse:rgba(255,255,255,.14);

  --accent:var(--gold-500);
  --accent-strong:var(--gold-600);
  --accent-soft:var(--gold-100);
  --accent-ink:var(--navy-900);
  --focus:var(--info-500);

  /* ---- gradients: the app already leans on 135deg navy. Kept, as tokens. ---- */
  --grad-chrome:linear-gradient(160deg,var(--navy-700) 0%,var(--navy-900) 100%);
  --grad-chrome-bar:linear-gradient(180deg,var(--navy-700) 0%,var(--navy-800) 100%);
  --grad-accent:linear-gradient(135deg,var(--gold-400),var(--gold-600));
  --grad-live:linear-gradient(135deg,var(--live-500),var(--live-700));
  --grad-ok:linear-gradient(135deg,#2ed47f,var(--ok-600));
  --grad-warn:linear-gradient(135deg,#ffb340,var(--warn-600));
  --grad-risk:linear-gradient(135deg,#ff6a5e,var(--risk-600));
  --grad-sheen:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0));

  /* ---- depth: tinted, not grey. Flat shadows look cheap on a bright ground. */
  --shadow-1:0 1px 2px rgba(15,23,41,.06), 0 1px 1px rgba(15,23,41,.04);
  --shadow-2:0 2px 6px rgba(15,23,41,.07), 0 8px 20px -10px rgba(15,23,41,.18);
  --shadow-3:0 4px 12px rgba(15,23,41,.09), 0 20px 44px -18px rgba(15,23,41,.30);
  --shadow-4:0 10px 28px rgba(15,23,41,.13), 0 40px 80px -30px rgba(15,23,41,.42);
  --shadow-chrome:0 8px 30px -8px rgba(5,11,22,.55);

  /* ---- glow: state you can see from across the room ---- */
  --glow-accent:0 0 0 3px rgba(240,169,47,.28);
  --glow-ok:0 0 0 3px rgba(18,183,106,.26);
  --glow-warn:0 0 0 3px rgba(247,144,9,.28);
  --glow-risk:0 0 0 3px rgba(240,68,56,.30);
  --glow-live:0 0 0 3px rgba(25,201,184,.28);
  --glow-focus:0 0 0 3px rgba(47,136,234,.35);

  --glass:saturate(1.5) blur(14px);

  /* ---- type ---- */
  --font-ui:"Nunito Sans","Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-display:"Nunito","Nunito Sans",-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;

  --fs-2xs:10.5px; --fs-xs:11.5px; --fs-sm:12.5px; --fs-md:13.5px;
  --fs-base:15px;  --fs-lg:17px;   --fs-xl:20px;   --fs-2xl:25px;
  --fs-3xl:32px;   --fs-4xl:44px;  --fs-5xl:60px;

  --lh-tight:1.15; --lh-snug:1.35; --lh-normal:1.55;
  --fw-normal:400; --fw-medium:600; --fw-bold:700; --fw-display:800; --fw-black:900;
  --tracking-label:.10em;

  /* ---- space / shape ---- */
  --sp-1:4px; --sp-2:6px; --sp-3:8px; --sp-4:12px; --sp-5:16px;
  --sp-6:20px; --sp-7:24px; --sp-8:32px; --sp-9:40px; --sp-10:56px;

  --r-xs:5px; --r-sm:8px; --r-md:11px; --r-lg:14px; --r-xl:20px; --r-pill:999px;

  /* ---- z: THE single source of truth ---- */
  --z-base:0; --z-raised:10; --z-sticky:100; --z-rail:200; --z-header:300;
  --z-dock:400; --z-overlay:1000; --z-modal:1100; --z-command:1200;
  --z-toast:1300; --z-tooltip:1400;

  --ease:cubic-bezier(.2,.7,.3,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:120ms; --dur:200ms; --dur-slow:320ms;

  --rail-w:82px; --header-h:60px; --dock-w:400px; --tap:44px;
}

[data-theme="dark"]{
  --bg-app:#080d16;
  --bg-sunken:#0c1320;
  --bg-surface:#111a2b;
  --bg-raised:#16223a;
  --bg-inverse:#050b16;
  --bg-hover:#16223a;
  --bg-selected:#152744;

  --fg:#eaf0fa; --fg-muted:#93a4bf; --fg-subtle:#6c7d99;
  --fg-inverse:#ffffff; --fg-inverse-muted:#8ea3c4;
  --fg-link:#6ab0ff; --fg-link-hover:#93c6ff;

  --line:#1f2c45; --line-soft:#182339; --line-strong:#33456a;

  --accent:var(--gold-400); --accent-strong:var(--gold-500); --accent-soft:#2a1f0c;
  --focus:#6ab0ff;

  --ok-100:#0b2a1c; --warn-100:#2c1f08; --risk-100:#2e1211; --info-100:#0e2137;
  --ok-line:#1c5a3c; --warn-line:#6a4a12; --risk-line:#7a2b25; --info-line:#22456e;

  --grad-chrome:linear-gradient(160deg,#101c31 0%,#050b16 100%);
  --grad-chrome-bar:linear-gradient(180deg,#101c31,#0a1424);
  --grad-sheen:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0));

  --shadow-1:0 1px 2px rgba(0,0,0,.5);
  --shadow-2:0 2px 6px rgba(0,0,0,.5), 0 8px 20px -10px rgba(0,0,0,.7);
  --shadow-3:0 4px 12px rgba(0,0,0,.55), 0 20px 44px -18px rgba(0,0,0,.75);
  --shadow-4:0 10px 28px rgba(0,0,0,.6), 0 40px 80px -30px rgba(0,0,0,.85);
}

/* ------------------------------------------------------------------ base -- */
*,*::before,*::after{box-sizing:border-box}
.co{
  margin:0;background:var(--bg-app);color:var(--fg);
  font-family:var(--font-ui);font-size:var(--fs-base);line-height:var(--lh-normal);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.co :where(h1,h2,h3,h4){font-family:var(--font-display);font-weight:var(--fw-display);
  line-height:var(--lh-tight);margin:0;text-wrap:balance;letter-spacing:-.02em}
.co :where(h1){font-size:var(--fs-3xl)}
.co :where(h2){font-size:var(--fs-2xl)}
.co :where(h3){font-size:var(--fs-xl);font-weight:var(--fw-bold)}
.co :where(h4){font-size:var(--fs-lg);font-weight:var(--fw-bold)}
.co :where(p){margin:0 0 var(--sp-4)}
.co :where(a){color:var(--fg-link);text-decoration-thickness:1px;text-underline-offset:2px}
.co :where(a:hover){color:var(--fg-link-hover)}
.co :where(button,input,select,textarea){font:inherit;color:inherit}
.co :where(:focus-visible){outline:none;box-shadow:var(--glow-focus);border-radius:var(--r-xs)}

.co-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.co-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.co-muted{color:var(--fg-muted)}
.co-subtle{color:var(--fg-subtle)}
.co-label{font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--fg-subtle)}
.co-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.co-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------- layout -- */
.co-stack{display:flex;flex-direction:column;gap:var(--sp-4)}
.co-stack-sm{display:flex;flex-direction:column;gap:var(--sp-2)}
.co-row{display:flex;align-items:center;gap:var(--sp-3)}
.co-row-tight{display:flex;align-items:center;gap:var(--sp-2)}
.co-spacer{flex-grow:1}
.co-grid{display:grid;gap:var(--sp-4)}
.co-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.co-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.co-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.co-scroll-x{overflow-x:auto;overscroll-behavior-x:contain}
.co-scroll-y{overflow-y:auto;overscroll-behavior-y:contain}

/* ----------------------------------------------------------------- shell -- */
.co-app{display:flex;height:100vh;height:100dvh;min-height:520px;overflow:hidden;background:var(--bg-app)}

.co-rail{
  width:var(--rail-w);flex:none;background:var(--grad-chrome);
  display:flex;flex-direction:column;align-items:center;
  padding:var(--sp-4) 0 var(--sp-3);gap:3px;
  z-index:var(--z-rail);box-shadow:var(--shadow-chrome);position:relative;
}
.co-rail::after{content:"";position:absolute;inset:0 0 auto;height:1px;background:var(--line-inverse)}
.co-rail-mark{
  width:44px;height:44px;border-radius:var(--r-md);background:var(--grad-accent);
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--sp-5);
  font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--fs-xl);
  color:var(--accent-ink);flex:none;
}
.co-rail-item{
  appearance:none;border:0;background:transparent;cursor:pointer;position:relative;
  width:68px;min-height:var(--tap);padding:var(--sp-2) 0 7px;border-radius:var(--r-md);
  display:flex;flex-direction:column;align-items:center;gap:5px;
  color:var(--fg-inverse-muted);
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);
}
.co-rail-item:hover{background:rgba(255,255,255,.08);color:var(--fg-inverse)}
.co-rail-item:active{transform:scale(.96)}
.co-rail-item[aria-current="page"]{
  background:rgba(255,255,255,.11);color:var(--fg-inverse);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
}
/* the active marker — a gold bar, so which area you are in reads instantly */
.co-rail-item[aria-current="page"]::before{
  content:"";position:absolute;left:-1px;top:50%;transform:translateY(-50%);
  width:3px;height:26px;border-radius:0 3px 3px 0;background:var(--grad-accent);
  box-shadow:0 0 12px 1px rgba(240,169,47,.75);
}
.co-rail-item svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.co-rail-label{font-size:var(--fs-2xs);font-weight:var(--fw-medium);letter-spacing:.02em}
.co-rail-item[aria-current="page"] .co-rail-label{font-weight:var(--fw-bold)}
.co-rail-item .co-badge{position:absolute;top:2px;right:12px}

.co-main{flex-grow:1;display:flex;flex-direction:column;min-width:0}

.co-header{
  height:var(--header-h);flex:none;
  background:var(--grad-chrome-bar);color:var(--fg-inverse);
  display:flex;align-items:center;gap:var(--sp-4);padding:0 var(--sp-5);
  position:relative;z-index:var(--z-header);box-shadow:var(--shadow-chrome);
}
.co-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--grad-accent);opacity:.9}
.co-sitename{font-family:var(--font-display);font-weight:var(--fw-black);
  font-size:var(--fs-lg);letter-spacing:-.02em;white-space:nowrap;color:#fff}
.co-divider{width:1px;height:24px;background:var(--line-inverse);flex:none}

.co-search{
  flex-grow:1;max-width:560px;min-height:38px;cursor:pointer;
  display:flex;align-items:center;gap:var(--sp-3);padding:0 var(--sp-4);
  border-radius:var(--r-md);border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.07);color:var(--fg-inverse-muted);
  -webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.co-search:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.28)}
.co-search svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.co-search-text{flex-grow:1;text-align:left;font-size:var(--fs-md)}

.co-avatar{
  width:34px;height:34px;border-radius:50%;flex:none;
  background:var(--grad-accent);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-sm);font-weight:var(--fw-black);
  box-shadow:0 4px 14px -4px rgba(240,169,47,.8);
}

.co-body{flex-grow:1;display:flex;min-height:0}
.co-canvas{flex-grow:1;position:relative;min-width:0;background:var(--bg-sunken);overflow:hidden}

/* The dock sits BESIDE the canvas — never over it. */
.co-dock{
  width:var(--dock-w);flex:none;background:var(--bg-surface);
  border-left:1px solid var(--line);display:flex;flex-direction:column;
  overflow-y:auto;z-index:var(--z-dock);box-shadow:-8px 0 30px -18px rgba(15,23,41,.35);
}
.co-dock-head{
  padding:var(--sp-5);border-bottom:1px solid var(--line-soft);
  display:flex;align-items:center;gap:var(--sp-3);position:sticky;top:0;
  background:var(--bg-surface);z-index:var(--z-raised);
}
.co-dock-title{font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-xl);letter-spacing:-.02em}
.co-section{padding:var(--sp-5);border-bottom:1px solid var(--line-soft)}
.co-section:last-child{border-bottom:0}

/* ------------------------------------------------------- command tiles --- */
/* The "I can see the whole school" row. Big figures, state in the colour. */
.co-tiles{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.co-tile{
  position:relative;overflow:hidden;
  background:var(--bg-surface);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-2);
  box-shadow:var(--shadow-1);transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);
}
.co-tile::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--line-strong)}
.co-tile--ok::before{background:var(--grad-ok)}
.co-tile--warn::before{background:var(--grad-warn)}
.co-tile--risk::before{background:var(--grad-risk)}
.co-tile--live::before{background:var(--grad-live)}
.co-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-3)}
.co-tile-fig{font-family:var(--font-display);font-weight:var(--fw-black);
  font-size:var(--fs-3xl);line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.co-tile--ok .co-tile-fig{color:var(--ok-600)}
.co-tile--warn .co-tile-fig{color:var(--warn-600)}
.co-tile--risk .co-tile-fig{color:var(--risk-600)}
.co-tile--live .co-tile-fig{color:var(--live-700)}
.co-tile-sub{font-size:var(--fs-sm);color:var(--fg-muted)}

/* ------------------------------------------------------------- controls -- */
.co-btn{
  appearance:none;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:36px;padding:0 var(--sp-4);
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--bg-surface);color:var(--fg);
  font-size:var(--fs-md);font-weight:var(--fw-bold);
  box-shadow:var(--shadow-1);
  transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),
             box-shadow var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);
}
.co-btn:hover{border-color:var(--line-strong);background:var(--bg-hover);box-shadow:var(--shadow-2)}
.co-btn:active{transform:translateY(1px)}
.co-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.co-btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
.co-btn--primary{background:var(--grad-chrome-bar);border-color:var(--navy-800);color:#fff;
  box-shadow:0 4px 14px -6px rgba(11,30,59,.8)}
.co-btn--primary:hover{background:var(--navy-600);border-color:var(--navy-600)}
.co-btn--accent{background:var(--grad-accent);border-color:var(--gold-600);color:var(--accent-ink);
  box-shadow:0 4px 16px -5px rgba(240,169,47,.85)}
.co-btn--accent:hover{filter:brightness(1.06)}
.co-btn--ghost{background:transparent;border-color:transparent;box-shadow:none}
.co-btn--ghost:hover{background:var(--bg-hover);border-color:var(--line-soft);box-shadow:none}
.co-btn--danger{color:#fff;background:var(--grad-risk);border-color:var(--risk-600);
  box-shadow:0 4px 16px -5px rgba(240,68,56,.7)}
.co-btn--lg{min-height:var(--tap);padding:0 var(--sp-5);font-size:var(--fs-base);border-radius:var(--r-md)}
.co-btn--icon{width:36px;padding:0}
.co-btn--icon.co-btn--lg{width:var(--tap)}
/* on the dark header */
.co-header .co-btn--ghost{color:var(--fg-inverse-muted)}
.co-header .co-btn--ghost:hover{background:rgba(255,255,255,.12);border-color:transparent;color:#fff}

.co-field{
  width:100%;min-height:36px;padding:var(--sp-2) var(--sp-4);
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--bg-surface);color:var(--fg);font-size:var(--fs-md);
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
.co-field:focus{outline:none;border-color:var(--focus);box-shadow:var(--glow-focus)}
.co-field::placeholder{color:var(--fg-subtle)}

.co-kbd{
  font-family:var(--font-mono);font-size:var(--fs-xs);
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-xs);padding:2px 7px;white-space:nowrap;color:inherit;
}
.co-section .co-kbd,.co-card .co-kbd{background:var(--bg-sunken);border-color:var(--line);color:var(--fg-subtle)}

/* ------------------------------------------------------------ containers -- */
.co-card{
  background:var(--bg-surface);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-4);box-shadow:var(--shadow-1);
}
.co-card--raised{box-shadow:var(--shadow-3)}
.co-card--flat{box-shadow:none;border-radius:var(--r-md);padding:var(--sp-4)}

.co-list{display:flex;flex-direction:column;gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:var(--r-md);overflow:hidden}
.co-list-row{
  background:var(--bg-surface);padding:var(--sp-3) var(--sp-4);
  display:flex;align-items:center;gap:var(--sp-3);min-height:var(--tap);cursor:pointer;
  transition:background var(--dur-fast) var(--ease);
}
.co-list-row:hover{background:var(--bg-hover)}
.co-list-row[aria-selected="true"]{background:var(--bg-selected)}

/* severity stripe — reserve it for rows that actually need action */
.co-item{
  position:relative;background:var(--bg-surface);border:1px solid var(--line-soft);
  border-radius:var(--r-md);padding:var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);
  display:flex;flex-direction:column;gap:var(--sp-1);box-shadow:var(--shadow-1);
  transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.co-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  border-radius:var(--r-md) 0 0 var(--r-md);background:var(--line-strong)}
.co-item--ok::before{background:var(--grad-ok)}
.co-item--warn::before{background:var(--grad-warn)}
.co-item--risk::before{background:var(--grad-risk)}
.co-item:hover{box-shadow:var(--shadow-2)}

.co-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--fg-subtle)}
.co-dot--ok{background:var(--ok-500)}
.co-dot--warn{background:var(--warn-500)}
.co-dot--risk{background:var(--risk-500)}
.co-dot--live{background:var(--live-500);box-shadow:var(--glow-live);animation:co-breathe 2.4s var(--ease) infinite}

.co-pill{
  display:inline-flex;align-items:center;gap:var(--sp-2);white-space:nowrap;
  font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:.02em;
  padding:4px var(--sp-3);border-radius:var(--r-pill);
  background:var(--bg-sunken);color:var(--fg-muted);border:1px solid transparent;
}
.co-pill--ok{background:var(--ok-100);color:var(--ok-600);border-color:var(--ok-line)}
.co-pill--warn{background:var(--warn-100);color:var(--warn-600);border-color:var(--warn-line)}
.co-pill--risk{background:var(--risk-100);color:var(--risk-600);border-color:var(--risk-line)}
.co-pill--info{background:var(--info-100);color:var(--info-600);border-color:var(--info-line)}
.co-pill--live{background:var(--live-100);color:var(--live-700)}
.co-pill svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.co-badge{
  min-width:19px;height:19px;padding:0 5px;border-radius:var(--r-pill);
  background:var(--grad-risk);color:#fff;font-size:var(--fs-2xs);font-weight:var(--fw-black);
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-1);
}

/* ----------------------------------------------------------------- table -- */
.co-table-wrap{overflow-x:auto;border:1px solid var(--line-soft);border-radius:var(--r-lg);
  background:var(--bg-surface);box-shadow:var(--shadow-1)}
.co-table{border-collapse:collapse;width:100%;font-size:var(--fs-md)}
.co-table th{
  text-align:left;font-family:var(--font-mono);font-size:var(--fs-2xs);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--fg-subtle);font-weight:var(--fw-medium);
  padding:var(--sp-4);border-bottom:1px solid var(--line);white-space:nowrap;
  position:sticky;top:0;background:var(--bg-surface);z-index:var(--z-raised);
}
.co-table td{padding:var(--sp-4);border-bottom:1px solid var(--line-soft);vertical-align:middle}
.co-table tr:last-child td{border-bottom:0}
.co-table tbody tr{transition:background var(--dur-fast) var(--ease)}
.co-table tbody tr:hover{background:var(--bg-hover)}

/* --------------------------------------------------------------- overlay -- */
.co-scrim{
  position:fixed;inset:0;background:rgba(8,20,38,.55);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  z-index:var(--z-overlay);opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease);
}
.co-scrim[data-open]{opacity:1;pointer-events:auto}

.co-modal{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(680px,92vw);max-height:86vh;overflow:auto;
  background:var(--bg-surface);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--shadow-4);z-index:var(--z-modal);
}

/* Command bar — appended to <body>, never inside <header>. See rule 3. */
.co-command{
  position:fixed;left:50%;top:13vh;transform:translateX(-50%);
  width:min(640px,92vw);background:var(--bg-surface);
  border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--shadow-4);z-index:var(--z-command);overflow:hidden;
  animation:co-pop var(--dur) var(--ease-out);
}
.co-command-input{
  width:100%;border:0;border-bottom:1px solid var(--line-soft);
  padding:var(--sp-6) var(--sp-6);font-size:var(--fs-xl);background:transparent;
  font-family:var(--font-display);font-weight:var(--fw-bold);letter-spacing:-.02em;
}
.co-command-input:focus{outline:none}
.co-command-input::placeholder{color:var(--fg-subtle);font-weight:var(--fw-medium)}
.co-command-list{max-height:52vh;overflow-y:auto;padding:var(--sp-2)}
.co-command-item{
  display:flex;align-items:center;gap:var(--sp-4);width:100%;
  padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);
  cursor:pointer;background:transparent;border:0;text-align:left;font-size:var(--fs-md);
}
.co-command-item[data-active]{background:var(--bg-selected);box-shadow:inset 0 0 0 1px var(--info-line)}
.co-command-item svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;color:var(--fg-muted);flex:none}
.co-command-item[data-active] svg{color:var(--info-600)}
.co-command-group{padding:var(--sp-4) var(--sp-4) var(--sp-2)}

.co-toast-area{position:fixed;left:50%;bottom:var(--sp-7);transform:translateX(-50%);
  z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--sp-2);align-items:center;pointer-events:none}
.co-toast{
  background:var(--grad-chrome-bar);color:#fff;
  padding:var(--sp-4) var(--sp-6);border-radius:var(--r-pill);
  font-size:var(--fs-md);font-weight:var(--fw-bold);box-shadow:var(--shadow-4);
  max-width:min(520px,90vw);animation:co-rise var(--dur) var(--ease-out);
  border:1px solid rgba(255,255,255,.12);
}
.co-toast--risk{background:var(--grad-risk);border-color:transparent}
.co-toast--ok{background:var(--grad-ok);border-color:transparent}

/* ------------------------------------------------------------- feedback -- */
.co-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--sp-4);padding:var(--sp-10) var(--sp-6);text-align:center;color:var(--fg-subtle);
}
.co-empty svg{width:44px;height:44px;stroke:currentColor;fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;opacity:.7}

.co-skeleton{
  background:linear-gradient(90deg,var(--bg-sunken) 25%,var(--bg-hover) 37%,var(--bg-sunken) 63%);
  background-size:400% 100%;animation:co-shimmer 1.3s linear infinite;border-radius:var(--r-sm);
}

/* ------------------------------------------------------- live behaviour -- */
/* State you can see across a room. Reserved for things that are genuinely
   live or genuinely overdue — never decoration. */
@keyframes co-shimmer{from{background-position:100% 0}to{background-position:0 0}}
@keyframes co-breathe{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.86)}}
@keyframes co-pulse-risk{0%,100%{box-shadow:0 0 0 0 rgba(240,68,56,.55)}70%{box-shadow:0 0 0 12px rgba(240,68,56,0)}}
@keyframes co-pulse-warn{0%,100%{box-shadow:0 0 0 0 rgba(247,144,9,.5)}70%{box-shadow:0 0 0 12px rgba(247,144,9,0)}}
@keyframes co-pop{from{opacity:0;transform:translateX(-50%) translateY(-8px) scale(.98)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
@keyframes co-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

.co-pulse-risk{animation:co-pulse-risk 2s infinite}
.co-pulse-warn{animation:co-pulse-warn 2.4s infinite}

/* ----------------------------------------------------------- responsive -- */
/* Field vs office, not desktop vs mobile. */
@media (max-width:860px){
  :root{--dock-w:100%;--header-h:56px}
  .co-app{flex-direction:column-reverse}
  .co-rail{
    width:auto;flex-direction:row;justify-content:space-around;align-items:stretch;
    padding:var(--sp-1) var(--sp-2);
    padding-bottom:calc(var(--sp-1) + env(safe-area-inset-bottom,0px));
    box-shadow:0 -8px 30px -8px rgba(5,11,22,.55);
  }
  .co-rail-mark{display:none}
  .co-rail-item{width:auto;flex:1 1 0;min-height:54px;justify-content:center}
  .co-rail-item[aria-current="page"]::before{
    left:50%;top:2px;transform:translateX(-50%);width:22px;height:3px;border-radius:0 0 3px 3px;
  }
  .co-body{flex-direction:column}
  .co-canvas{min-height:36vh}
  .co-dock{width:auto;border-left:0;border-top:1px solid var(--line);max-height:54vh;box-shadow:none}
  .co-header{padding:0 var(--sp-4);gap:var(--sp-3)}
  .co-search-text{display:none}
  .co-search{flex-grow:0;width:38px;padding:0;justify-content:center}
  .co-search .co-kbd{display:none}
  .co-command{top:5vh;width:96vw}
  .co-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (prefers-reduced-motion:reduce){
  .co *,.co *::before,.co *::after{animation-duration:1ms !important;animation-iteration-count:1 !important;transition-duration:1ms !important}
}
@media print{
  .co-rail,.co-header,.co-command,.co-toast-area,.co-scrim{display:none !important}
  .co-app{display:block;height:auto}
  .co-dock{width:auto;border:0;box-shadow:none}
}