/* ============================================================
     1. Tokens — canonical v3 set (design-system-v3.md §1, verbatim)
     ============================================================ */
  :root{
    color-scheme:light;
    --page:#F8FAFC; --surface:#FFFFFF; --tint:#F1F5F9; --hair:#E2E8F0; --strong:#CBD5E1;
    --deco:#94A3B8; --muted:#64748B; --secondary:#475569; --ink2:#334155; --ink:#0F172A;
    --accent:#4F46E5; --accent-h:#4338CA; --link:#4F46E5; --accent-soft:#EEF2FF; --focus:#6366F1;
    --ok-dot:#059669; --ok-ink:#047857; --ok-soft:#ECFDF5;
    --warn-dot:#D97706; --warn-ink:#B45309; --warn-soft:#FFFBEB;
    --crit-dot:#DC2626; --crit-ink:#B91C1C; --crit-soft:#FEF2F2;
    --info-dot:#2563EB; --info-ink:#1D4ED8; --info-soft:#EFF6FF;
    --unk-dot:#94A3B8; --unk-ink:#475569; --unk-soft:#F1F5F9;
    --sh1:0 1px 2px rgba(15,23,42,.05);
    --sh2:0 1px 2px rgba(15,23,42,.05), 0 8px 20px -12px rgba(15,23,42,.12);
    --sans:-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,sans-serif;
    --mono:ui-monospace,"SF Mono",Menlo,monospace;

    /* --- legacy v2 aliases (compat only; delete as pages are ported) --- */
    --bg:var(--page); --sunken:var(--tint); --raise:var(--tint);
    --ink-2:var(--secondary); --ink-3:var(--muted); --hair-2:var(--strong);
    --disp:var(--sans);
    --accent-2:var(--link); --accent-ink:var(--link);
    --accent-btn:var(--accent); --accent-btn-h:var(--accent-h);
    --good:var(--ok-dot); --good-ink:var(--ok-ink); --good-soft:var(--ok-soft);
    --warn:var(--warn-dot); --crit:var(--crit-dot); --info:var(--info-dot);
  }
  /* dark — re-picked SOLID inks/tints (no rgba overlays). Duplicated for the
     media query AND the data-theme attribute so the explicit toggle always
     wins over the OS preference, in both directions (design-system-v3.md §5). */
  @media (prefers-color-scheme:dark){:root{
    color-scheme:dark;
    --page:#0A0E17; --surface:#131926; --tint:#1B2333; --hair:#232B3D; --strong:#33405A;
    --deco:#4A5A73; --muted:#8B97AC; --secondary:#A7B2C5; --ink2:#C7CFDD; --ink:#EDF1F7;
    --accent:#4F46E5; --accent-h:#4338CA; --link:#7C83F7; --accent-soft:#222A4E; --focus:#7C83F7;
    --ok-dot:#059669; --ok-ink:#34D399; --ok-soft:#122B22;
    --warn-dot:#D97706; --warn-ink:#FBBF24; --warn-soft:#2A2112;
    --crit-dot:#DC2626; --crit-ink:#F87171; --crit-soft:#301818;
    --info-dot:#2563EB; --info-ink:#60A5FA; --info-soft:#16233C;
    --unk-dot:#4A5A73; --unk-ink:#A7B2C5; --unk-soft:#1B2333;
    --sh1:0 1px 2px rgba(0,0,0,.4);
    --sh2:0 1px 2px rgba(0,0,0,.4), 0 10px 24px -14px rgba(0,0,0,.6);

    --bg:var(--page); --sunken:var(--tint); --raise:var(--tint);
    --ink-2:var(--secondary); --ink-3:var(--muted); --hair-2:var(--strong);
    --disp:var(--sans);
    --accent-2:var(--link); --accent-ink:var(--link);
    --accent-btn:var(--accent); --accent-btn-h:var(--accent-h);
    --good:var(--ok-dot); --good-ink:var(--ok-ink); --good-soft:var(--ok-soft);
    --warn:var(--warn-dot); --crit:var(--crit-dot); --info:var(--info-dot);
  }}
  :root[data-theme="dark"]{
    color-scheme:dark;
    --page:#0A0E17; --surface:#131926; --tint:#1B2333; --hair:#232B3D; --strong:#33405A;
    --deco:#4A5A73; --muted:#8B97AC; --secondary:#A7B2C5; --ink2:#C7CFDD; --ink:#EDF1F7;
    --accent:#4F46E5; --accent-h:#4338CA; --link:#7C83F7; --accent-soft:#222A4E; --focus:#7C83F7;
    --ok-dot:#059669; --ok-ink:#34D399; --ok-soft:#122B22;
    --warn-dot:#D97706; --warn-ink:#FBBF24; --warn-soft:#2A2112;
    --crit-dot:#DC2626; --crit-ink:#F87171; --crit-soft:#301818;
    --info-dot:#2563EB; --info-ink:#60A5FA; --info-soft:#16233C;
    --unk-dot:#4A5A73; --unk-ink:#A7B2C5; --unk-soft:#1B2333;
    --sh1:0 1px 2px rgba(0,0,0,.4);
    --sh2:0 1px 2px rgba(0,0,0,.4), 0 10px 24px -14px rgba(0,0,0,.6);

    --bg:var(--page); --sunken:var(--tint); --raise:var(--tint);
    --ink-2:var(--secondary); --ink-3:var(--muted); --hair-2:var(--strong);
    --disp:var(--sans);
    --accent-2:var(--link); --accent-ink:var(--link);
    --accent-btn:var(--accent); --accent-btn-h:var(--accent-h);
    --good:var(--ok-dot); --good-ink:var(--ok-ink); --good-soft:var(--ok-soft);
    --warn:var(--warn-dot); --crit:var(--crit-dot); --info:var(--info-dot);
  }
  :root[data-theme="light"]{
    color-scheme:light;
    --page:#F8FAFC; --surface:#FFFFFF; --tint:#F1F5F9; --hair:#E2E8F0; --strong:#CBD5E1;
    --deco:#94A3B8; --muted:#64748B; --secondary:#475569; --ink2:#334155; --ink:#0F172A;
    --accent:#4F46E5; --accent-h:#4338CA; --link:#4F46E5; --accent-soft:#EEF2FF; --focus:#6366F1;
    --ok-dot:#059669; --ok-ink:#047857; --ok-soft:#ECFDF5;
    --warn-dot:#D97706; --warn-ink:#B45309; --warn-soft:#FFFBEB;
    --crit-dot:#DC2626; --crit-ink:#B91C1C; --crit-soft:#FEF2F2;
    --info-dot:#2563EB; --info-ink:#1D4ED8; --info-soft:#EFF6FF;
    --unk-dot:#94A3B8; --unk-ink:#475569; --unk-soft:#F1F5F9;
    --sh1:0 1px 2px rgba(15,23,42,.05);
    --sh2:0 1px 2px rgba(15,23,42,.05), 0 8px 20px -12px rgba(15,23,42,.12);

    --bg:var(--page); --sunken:var(--tint); --raise:var(--tint);
    --ink-2:var(--secondary); --ink-3:var(--muted); --hair-2:var(--strong);
    --disp:var(--sans);
    --accent-2:var(--link); --accent-ink:var(--link);
    --accent-btn:var(--accent); --accent-btn-h:var(--accent-h);
    --good:var(--ok-dot); --good-ink:var(--ok-ink); --good-soft:var(--ok-soft);
    --warn:var(--warn-dot); --crit:var(--crit-dot); --info:var(--info-dot);
  }

  /* ============================================================
     2. Base
     ============================================================ */
  *{box-sizing:border-box;} body{margin:0; background:var(--page);}
  .cab{font-family:var(--sans); color:var(--ink); background:var(--page); -webkit-font-smoothing:antialiased;
    display:grid; grid-template-columns:264px 1fr; min-height:100vh; font-size:14px; line-height:1.5;}
  .cab *::selection{background:var(--accent-soft);}
  a{color:inherit; text-decoration:none;} button{font-family:inherit; color:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:6px;}
  .mono{font-family:var(--mono); font-variant-numeric:tabular-nums;}

  /* ============================================================
     3. Chrome: rail
     ============================================================ */
  .rail{background:var(--surface); border-right:1px solid var(--hair); display:flex; flex-direction:column; padding:16px 12px; position:sticky; top:0; height:100vh;}
  .switch{display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:8px 10px; border:1px solid var(--strong); border-radius:12px; cursor:pointer; background:var(--surface); box-shadow:var(--sh1); transition:border-color .15s;}
  .switch:hover{border-color:var(--link);}
  .switch .mk{width:32px; height:32px; border-radius:9px; flex:0 0 auto; background:var(--accent); color:#fff; display:grid; place-items:center; font-weight:700; font-size:13.5px;}
  .switch .who{display:flex; flex-direction:column; min-width:0; line-height:1.3;}
  .switch .who b{font-size:14px; font-weight:600;}
  .switch .who span{font-size:12px; color:var(--muted);}
  .switch .cv{margin-left:auto; color:var(--muted);}
  .nav{margin-top:16px; display:flex; flex-direction:column; gap:2px;}
  .nav .g{padding:12px 10px 4px; font-size:12px; font-weight:600; color:var(--muted);}
  .nav a{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:9px; color:var(--secondary); font-weight:500; font-size:14px; transition:background .14s,color .14s;}
  .nav a svg{width:18px; height:18px; flex:0 0 auto; color:var(--muted);}
  .nav a .ct{margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums;}
  .nav a .ct.info{color:var(--info-ink);}
  .nav a .ct.crit{color:var(--crit-ink); background:var(--crit-soft); padding:1px 6px; border-radius:999px; font-weight:600;}
  .nav a:hover{background:var(--tint); color:var(--ink);} .nav a:hover svg{color:var(--secondary);}
  .nav a.on{background:var(--accent-soft); color:var(--link); font-weight:600;}
  .nav a.on svg{color:var(--link);} .nav a.on .ct:not(.crit){color:var(--link);}
  .rail .ft{margin-top:auto; display:flex; flex-direction:column; gap:2px; padding-top:12px; border-top:1px solid var(--hair);}
  .rail .ft a{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:9px; color:var(--secondary); font-size:14px; font-weight:500;}
  .rail .ft a:hover{background:var(--tint); color:var(--ink);}
  .rail .ft a svg{width:18px; height:18px; color:var(--muted);}
  .rail .ft .signout{margin:0;}
  .rail .ft .signout button{display:flex; width:100%; align-items:center; gap:10px; padding:8px 10px; border:0; border-radius:9px; background:none; cursor:pointer; color:var(--muted); font:500 13px var(--sans); text-align:left;}
  .rail .ft .signout button:hover{background:var(--tint); color:var(--ink);}
  .rail .ft a.on svg{color:var(--link);}

  /* ============================================================
     4. Chrome: topbar
     ============================================================ */
  .main{min-width:0; display:flex; flex-direction:column;}
  .top{height:60px; border-bottom:1px solid var(--hair); background:color-mix(in srgb,var(--page) 84%, transparent); backdrop-filter:blur(10px); position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:14px; padding:0 24px;}
  .crumb{font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:8px; white-space:nowrap; min-width:0;} .crumb b{color:var(--ink); font-weight:600;} .crumb .s{opacity:.45;}
  .crumb b.mono{font-family:var(--mono); font-size:12.5px; overflow:hidden; text-overflow:ellipsis;}
  .search{margin-left:6px; flex:1; max-width:320px; height:36px; border:1px solid var(--strong); border-radius:10px; background:var(--surface); display:flex; align-items:center; gap:9px; padding:0 12px; color:var(--muted); box-shadow:var(--sh1);}
  .search:focus-within{border-color:var(--focus);}
  .search svg{flex:0 0 auto;}
  .search input{min-width:0; width:100%; border:0; outline:0; background:transparent; color:var(--ink); font:13.5px var(--sans);}
  .search input::placeholder{color:var(--muted); opacity:1;}
  .search kbd, .search .k{margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--muted); border:1px solid var(--hair); border-radius:5px; padding:1px 5px;}
  .top .r{margin-left:auto; display:flex; align-items:center; gap:10px;}
  .pill{display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 13px; border-radius:999px; border:1px solid var(--strong); background:var(--surface); font-size:12.5px; color:var(--secondary); font-weight:500; box-shadow:var(--sh1); transition:border-color .15s; cursor:pointer;}
  .pill:hover{border-color:var(--link);}
  .ib{width:36px; height:36px; border:1px solid var(--strong); border-radius:10px; background:var(--surface); display:grid; place-items:center; color:var(--secondary); cursor:pointer; box-shadow:var(--sh1); transition:border-color .15s,color .15s;}
  .ib:hover{color:var(--ink); border-color:var(--link);}
  .av{width:36px; height:36px; border-radius:999px; background:var(--tint); border:1px solid var(--strong); color:var(--secondary); display:grid; place-items:center; font-size:12.5px; font-weight:600;}
  .dot{width:7px; height:7px; border-radius:999px; flex:0 0 auto;}
  .dot.ok, .dot.good{background:var(--ok-dot);}
  .dot.warn{background:var(--warn-dot);}
  .dot.crit{background:var(--crit-dot);}
  .dot.info{background:var(--info-dot);}
  .dot.unknown, .dot.gray{background:var(--unk-dot);}
  .pls{position:relative;} .pls::after{content:""; position:absolute; inset:-4px; border-radius:999px; border:1px solid currentColor; opacity:.5; animation:pl 1.8s ease-out infinite;}
  @keyframes pl{from{transform:scale(.6);opacity:.55;} to{transform:scale(1.5);opacity:0;}}

  /* ============================================================
     5. DegradedBanner (C8) — keyed off the sweep timestamp
     ============================================================ */
  .banner{display:flex; align-items:center; gap:12px; padding:10px 24px; background:var(--warn-soft); border-bottom:1px solid var(--hair); font-size:13.5px; color:var(--ink2);}
  .banner svg{flex:0 0 auto; color:var(--warn-ink);}
  .banner b{color:var(--warn-ink);}
  .banner form{margin-left:auto;}
  .banner.crit{background:var(--crit-soft);}
  .banner.crit svg{color:var(--crit-ink);}
  .banner.crit b{color:var(--crit-ink);}

  /* ============================================================
     6. Page scaffold — NO entrance animation (design-system-v3.md §4:
     "the .wrap rise-on-navigation animation is DELETED")
     ============================================================ */
  .wrap{padding:24px 28px 48px; max-width:1400px; width:100%; margin-inline:auto;}
  .back{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); font-weight:600; margin-bottom:14px; cursor:pointer;}
  .back svg{width:15px; height:15px;} .back:hover{color:var(--ink);}
  .head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:20px;}
  .head h1{font-size:29px; font-weight:700; letter-spacing:-.03em; margin:0 0 5px; line-height:1.06;}
  .head p{margin:0; color:var(--secondary); font-size:14px;}
  .head p b{color:var(--ink); font-weight:600;}
  .head .sweep, .sweep{font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:5px; font-variant-numeric:tabular-nums;}
  .sweep .s-stale{color:var(--warn-ink);}
  .title-line{display:flex; align-items:center; gap:12px; margin-bottom:7px; flex-wrap:wrap;}
  .title-line h1{margin:0; font-family:var(--mono); font-size:22px; font-weight:600; letter-spacing:-.03em;}
  .store-meta{color:var(--secondary); font-size:12.5px; display:flex; align-items:center; gap:9px; flex-wrap:wrap;}
  .head-actions{display:flex; align-items:center; gap:9px; flex:0 0 auto;}

  /* ============================================================
     7. Buttons (C7) — FLAT, one primary per view region
     ============================================================ */
  .btn{height:36px; padding:0 14px; border-radius:10px; border:1px solid transparent; cursor:pointer; font-size:13.5px; font-weight:600; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; background:none; transition:background .15s,border-color .15s;}
  .btn.pr{background:var(--accent); color:#fff;}
  .btn.pr:hover{background:var(--accent-h);}
  .btn.sec{background:var(--surface); border-color:var(--strong); color:var(--ink2); box-shadow:var(--sh1);}
  .btn.sec:hover{background:var(--tint);}
  .btn.gh{color:var(--secondary);}
  .btn.gh:hover{background:var(--tint); color:var(--ink);}
  .btn.dng{background:var(--surface); border:1px solid color-mix(in srgb, var(--crit-dot) 30%, var(--strong)); color:var(--crit-ink); box-shadow:var(--sh1);}
  .btn.dng:hover{background:var(--crit-soft); border-color:color-mix(in srgb, var(--crit-dot) 45%, var(--strong));}
  .btn.sm{height:30px; padding:0 10px; font-size:12.5px; border-radius:8px;}
  .btn svg{width:16px; height:16px;} .btn.sm svg{width:14px; height:14px;}

  .card{background:var(--surface); border:1px solid var(--hair); border-radius:16px; box-shadow:var(--sh2);}
  .ph{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 20px; border-bottom:1px solid var(--hair);}
  .ph h2{margin:0; font-size:16px; font-weight:650; letter-spacing:-.02em;}
  .ph .cnt{font-size:12.5px; color:var(--muted); font-weight:500;}
  .ph a{font-size:12.5px; color:var(--link); font-weight:600; cursor:pointer;} .ph a:hover{text-decoration:underline;}
  .split, .detail-grid{display:grid; grid-template-columns:minmax(0,1fr) 372px; gap:16px; align-items:start;}
  .stack{display:flex; flex-direction:column; gap:16px; min-width:0;}

  /* ============================================================
     8. Shared vocabulary — Badge (C1), ReasonChip (C2)
     ============================================================ */
  .badge{display:inline-flex; align-items:center; gap:7px; height:26px; padding:0 10px; border-radius:8px; font-size:12.5px; font-weight:600; white-space:nowrap;}
  .badge .dot{width:6px; height:6px;}
  .badge.ok, .badge.good{color:var(--ok-ink); background:var(--ok-soft);}
  .badge.warn{color:var(--warn-ink); background:var(--warn-soft);}
  .badge.crit{color:var(--crit-ink); background:var(--crit-soft);}
  .badge.info{color:var(--info-ink); background:var(--info-soft);}
  .badge.unknown, .badge.gray{color:var(--unk-ink); background:var(--unk-soft);}
  .chip{font-family:var(--mono); font-size:11px; color:var(--secondary); background:var(--tint); border:1px solid var(--hair); padding:3px 7px; border-radius:7px; white-space:nowrap; font-variant-numeric:tabular-nums;}
  /* ReasonChip — explicit variants chosen by the renderer; NO descendant
     overrides (e.g. "tr.sev-crit .code{…}") are permitted anywhere. */
  .reason{font-family:var(--mono); font-size:11px; padding:3px 7px; border-radius:7px; white-space:nowrap;}
  .reason--neutral{color:var(--secondary); background:var(--tint); border:1px solid var(--hair);}
  .reason--crit{color:var(--crit-ink); background:var(--crit-soft);}
  .reason--warn{color:var(--warn-ink); background:var(--warn-soft);}
  .reason--unknown{color:var(--unk-ink); background:var(--unk-soft);}
  .dom{font-family:var(--mono); font-size:12.5px; font-weight:500; white-space:nowrap;}
  .step{color:var(--ink); font-size:13.5px; white-space:nowrap;}
  .tm{font-family:var(--mono); font-size:11px; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums;}
  .tm.warn{color:var(--warn-ink);} .tm.crit{color:var(--crit-ink);}

  /* ============================================================
     9. StatTile v2 (C4) — one band API, zero-value rule
     ============================================================ */
  .stats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:16px;}
  .stat{padding:16px 18px 14px; display:flex; flex-direction:column; gap:8px; position:relative; transition:border-color .15s;}
  a.stat:hover{border-color:var(--strong);}
  .stat .l{display:flex; align-items:center; justify-content:space-between;}
  .stat .lbl{font-size:12.5px; color:var(--muted); font-weight:600;}
  .stat .go{color:var(--muted); display:inline-flex;}
  .stat .v{font-size:33px; font-weight:700; letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums; display:flex; align-items:baseline; gap:7px;}
  .stat .v .u{font-size:14px; color:var(--muted); font-weight:600; letter-spacing:normal;}
  .stat .v.crit{color:var(--crit-ink);} .stat .v.warn{color:var(--warn-ink);} .stat .v.info{color:var(--info-ink);}
  .stat .cap{font-size:12px; color:var(--muted);}
  .stat .cap b{color:var(--secondary); font-weight:600;}
  .stat.sev-crit{border-color:color-mix(in srgb, var(--crit-dot) 32%, var(--hair));}
  .stat.sev-crit::before{content:""; position:absolute; left:-1px; top:14px; bottom:14px; width:3px; border-radius:0 3px 3px 0; background:var(--crit-dot);}

  /* DistBar — the one proportional band, reused by StatTile and RolloutModule.
     Sums to the stated total; ok 45% opacity, warn 90%, crit 100%, unknown = --deco 80%. */
  .band{display:flex; gap:2px; height:6px; border-radius:3px; overflow:hidden; margin-top:2px;}
  .band i{border-radius:2px; min-width:3px;}
  .band .b-ok{background:var(--ok-dot); opacity:.45;}
  .band .b-warn{background:var(--warn-dot); opacity:.9;}
  .band .b-crit{background:var(--crit-dot);}
  .band .b-info{background:var(--info-dot); opacity:.85;}
  .band .b-unknown{background:var(--deco); opacity:.8;}

  /* ============================================================
     10. SeverityLadder (C3) — the needs-attention triage list variant
     ============================================================ */
  .attn-item{display:flex; align-items:center; gap:14px; padding:13px 20px; border-bottom:1px solid var(--hair); position:relative;}
  .attn-item:last-child{border-bottom:0;}
  .attn-item::before{content:""; position:absolute; left:0; top:10px; bottom:10px; width:3px; border-radius:0 3px 3px 0;}
  .attn-item.sev-crit::before{background:var(--crit-dot);}
  .attn-item.sev-warn::before{background:var(--warn-dot);}
  .attn-item.sev-unknown::before{background:var(--unk-dot);}
  .attn-item .tx{min-width:0; display:flex; flex-direction:column; gap:4px;}
  .attn-item .t1{font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
  .attn-item .t2{font-size:12.5px; color:var(--secondary); display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
  .attn-item .ac{margin-left:auto; display:flex; align-items:center; gap:6px; flex:0 0 auto;}
  .attn-item .open{font-size:12.5px; color:var(--link); font-weight:600; padding:6px 8px; border-radius:8px;}
  .attn-item .open:hover{background:var(--tint);}

  /* ============================================================
     11. Table v2 (C6) — group headers, per-row action column, aging
     ============================================================ */
  table{width:100%; border-collapse:collapse;}
  .scroll{overflow-x:auto;}
  thead th{text-align:left; padding:10px 16px; border-bottom:1px solid var(--hair); font-size:12px; color:var(--muted); font-weight:600; white-space:nowrap; background:var(--tint);}
  thead th:first-child{padding-left:20px;} thead th:last-child{padding-right:20px;}
  thead th.r, td.r{text-align:right;}
  tbody td{padding:11px 16px; border-bottom:1px solid var(--hair); vertical-align:middle; font-size:13.5px;}
  tbody td:first-child{padding-left:20px;} tbody td:last-child{padding-right:20px;}
  tbody tr:last-child td{border-bottom:0;}
  tbody tr.row, tbody tr[data-href]{cursor:pointer; transition:background .12s;}
  tbody tr.row:hover, tbody tr[data-href]:hover{background:var(--tint);}
  tbody tr.row:focus-visible, tbody tr[data-href]:focus-visible{outline:2px solid var(--focus); outline-offset:-2px;}
  /* SeverityLadder (C3) — table-row carrier: 3px stripe, crit adds a 4% wash.
     One visual spec, two mechanical carriers (this + the .stripe/attn-item
     block-element carrier above). */
  tr.sev-crit td{background:color-mix(in srgb, var(--crit-dot) 4%, transparent);}
  tr.sev-crit td:first-child{border-left:3px solid var(--crit-dot); padding-left:17px;}
  tr.sev-warn td:first-child{border-left:3px solid var(--warn-dot); padding-left:17px;}
  tr.sev-unknown td:first-child{border-left:3px solid var(--unk-dot); padding-left:17px;}
  tr.grp td{padding:8px 16px 8px 20px; background:var(--tint); border-bottom:1px solid var(--hair); font-size:12px; font-weight:600; color:var(--secondary);}
  tr.grp .g-in{display:flex; align-items:center; gap:8px;}
  tr.grp .g-ct{font-family:var(--mono); font-size:11px; color:var(--muted); font-weight:500; font-variant-numeric:tabular-nums;}
  tr.grp form{margin-left:auto;}
  tr.grp .btn.sm{height:26px; font-size:12px;}
  tr.more td{padding:0; border-bottom:1px solid var(--hair);}
  tr.more a{display:block; width:100%; color:var(--link); font-size:12.5px; font-weight:600; padding:10px; text-align:center;}
  tr.more a:hover{background:var(--tint);}
  .diag{display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:0;}
  .diag .d1{font-size:13.5px; color:var(--ink); white-space:nowrap;}
  .diag .d1.quiet{color:var(--secondary);}
  .arrow-cell{width:28px; color:var(--muted);}
  td.act-cell{white-space:nowrap;}
  td.act-cell .none{color:var(--deco);}

  .seg{display:flex; gap:2px; background:var(--tint); border:1px solid var(--hair); border-radius:9px; padding:2px;}
  .seg a{height:26px; display:inline-flex; align-items:center; padding:0 11px; color:var(--muted); font-size:12px; font-weight:600; border-radius:7px;}
  .seg a[aria-current="true"]{background:var(--surface); color:var(--ink); box-shadow:var(--sh1);}

  /* ============================================================
     12. Cockpit severity tiles (fleet-health summary strip)
     ============================================================ */
  .cockpit{padding:20px; margin-bottom:16px;}
  .ctiles{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px;}
  .ctile{position:relative; border:1px solid var(--hair); border-radius:12px; background:var(--surface); padding:14px 16px 12px; display:flex; flex-direction:column; gap:6px; transition:border-color .15s;}
  .ctile:hover{border-color:var(--strong);}
  .ctile .lbl{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--muted); font-weight:600;}
  .ctile .num{font-size:33px; font-weight:700; letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums;}
  .ctile .cap{font-size:12px; color:var(--muted);}
  .ctile.crit{border-color:color-mix(in srgb, var(--crit-dot) 32%, var(--hair));}
  .ctile.crit::before{content:""; position:absolute; left:-1px; top:12px; bottom:12px; width:3px; border-radius:0 3px 3px 0; background:var(--crit-dot);}
  .ctile.crit .num{color:var(--crit-ink);}
  .ctile.warn .num{color:var(--warn-ink);}
  .ctile.unknown .num{color:var(--unk-ink);}
  .ctile.ok .num{color:var(--ok-ink);}

  /* ============================================================
     13. FleetPulse (C5) — staleness seismograph; SSR: a server loop of <i>
     ============================================================ */
  .pulse-h{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px;}
  .pulse-h h3{margin:0; font-size:16px; font-weight:650; letter-spacing:-.02em;}
  .pulse-h .note{font-family:var(--mono); font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums;}
  /* scoped to <div class="pulse"> (the mockups' actual element) so this never
     collides with connect-shopify.ts's unrelated <span class="dot gray pulse">
     waiting-indicator, which predates this component. */
  div.pulse{display:flex; align-items:flex-end; gap:2px; height:36px;}
  .pulse i{flex:1 1 0; min-width:2px; max-width:7px; border-radius:2px 2px 1px 1px; height:var(--h,6px);}
  .pulse i.crit{background:var(--crit-dot);}
  .pulse i.warn{background:var(--warn-dot); opacity:.9;}
  .pulse i.unknown{background:var(--deco); opacity:.8;}
  .pulse i.ok{background:var(--ok-dot); opacity:.45;}
  .pulse-legend{display:flex; align-items:center; gap:16px; margin-top:12px; font-size:12.5px; color:var(--secondary); flex-wrap:wrap;}
  .pulse-legend .li{display:inline-flex; align-items:center; gap:6px;}
  .pulse-legend .exp{margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--muted);}

  /* ============================================================
     14. RolloutModule (C11) — config drift / fleet push
     ============================================================ */
  .roll{padding:16px 20px;}
  .roll .master{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--secondary); margin-bottom:10px;}
  .roll .vcap{font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:8px; font-variant-numeric:tabular-nums;}
  .roll .rac{display:flex; align-items:center; gap:8px; margin-top:12px;}
  .roll .rac a{font-size:12.5px; color:var(--link); font-weight:600;}
  .roll .note{font-size:12px; color:var(--muted); margin-top:10px; line-height:1.5; max-width:72ch;}

  /* ============================================================
     15. Filter bar
     ============================================================ */
  .filters{display:flex; align-items:center; gap:10px; margin:16px 0 14px; flex-wrap:wrap;}
  .fsearch{height:36px; width:280px; border:1px solid var(--strong); border-radius:10px; background:var(--surface); color:var(--ink); display:flex; align-items:center; gap:9px; padding:0 12px; box-shadow:var(--sh1);}
  .fsearch:focus-within{border-color:var(--focus);}
  .fsearch svg{color:var(--muted); flex:0 0 auto;}
  .fsearch input{min-width:0; width:100%; border:0; outline:0; background:transparent; color:var(--ink); font:13.5px var(--sans);}
  .fsearch input::placeholder{color:var(--muted); opacity:1;}
  .facet{height:32px; padding:0 12px; border:1px solid var(--strong); border-radius:999px; background:var(--surface); color:var(--secondary); display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:500; box-shadow:var(--sh1); transition:border-color .15s; cursor:pointer;}
  .facet:hover{border-color:var(--link);}
  .facet[aria-current="true"]{background:var(--accent-soft); border-color:transparent; color:var(--link); font-weight:600;}
  .facet .fn{font-family:var(--mono); font-size:11px;}
  .facet .fc{font-family:var(--mono); font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums;}
  .facet[aria-current="true"] .fc{color:var(--link);}
  .facet.off{border-style:dashed; box-shadow:none; color:var(--muted);}
  .fright{margin-left:auto; font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:6px;}

  /* ============================================================
     16. Truth-state primitives (C12) — loading / empty / error
     ============================================================ */
  .sk{background:var(--tint); border-radius:8px; animation:skp 1.2s ease-in-out infinite;}
  @keyframes skp{0%,100%{opacity:1;} 50%{opacity:.6;}}
  .sk-tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px;}
  .sk-tile{height:92px; border-radius:12px;}
  .sk-lane{height:36px; border-radius:8px;}
  .sk-row{height:20px; margin:14px 20px;}
  .empty-box{padding:48px 24px; text-align:center;}
  .empty-box .ring{width:64px; height:64px; border-radius:999px; background:var(--tint); display:grid; place-items:center; margin:0 auto 16px; color:var(--muted);}
  .empty-box h3{margin:0 0 6px; font-size:16px; font-weight:650; letter-spacing:-.02em;}
  .empty-box p{margin:0 0 16px; color:var(--secondary); font-size:14px;}
  .err-box{display:flex; align-items:center; gap:12px; padding:20px; font-size:13.5px; color:var(--ink2);}
  .err-box svg{color:var(--crit-dot); flex:0 0 auto;}
  .err-box form{margin-left:auto;}

  /* ============================================================
     17. Activity / lifecycle feed rows, partner/app summary rows
     ============================================================ */
  .prow{display:flex; align-items:center; gap:13px; padding:16px 20px;}
  .prow .pm{width:36px; height:36px; border-radius:10px; background:var(--accent); color:#fff; display:grid; place-items:center; font-weight:700; font-size:14px; flex:0 0 auto;}
  .prow .pn{font-weight:600; font-size:14px;}
  .prow .pmeta{font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:3px;}
  .prow .pr{margin-left:auto; text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:6px;}
  .act{padding:4px 20px 6px;} .act ul{margin:0; padding:0;}
  .act li{list-style:none; display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--hair);} .act li:last-child{border-bottom:0;}
  .act .ic{width:28px; height:28px; border-radius:8px; background:var(--tint); border:1px solid var(--hair); display:grid; place-items:center; color:var(--muted); flex:0 0 auto; margin-top:1px;}
  .act .ic svg{width:14px; height:14px;}
  .act .ic.ok, .act .ic.good{color:var(--ok-ink);} .act .ic.warn{color:var(--warn-ink);} .act .ic.info{color:var(--info-ink);} .act .ic.crit{color:var(--crit-ink);}
  .act .tx{flex:1; font-size:13.5px; color:var(--ink); line-height:1.5;}
  .act .tx .t{font-family:var(--mono); font-size:11px; color:var(--muted); display:block; margin-top:3px;}
  .act .va{display:block; text-align:center; padding:12px; font-size:12.5px; color:var(--link); font-weight:600; border-top:1px solid var(--hair); cursor:pointer;} .act .va:hover{background:var(--tint);}

  /* ============================================================
     18. Motion, theme-swap, responsive
     ============================================================ */
  /* Applied by the theme toggle for exactly one frame so every surface swaps
     in a single frame instead of staggered per-property transitions (§5). */
  .no-anim *, .no-anim *::before, .no-anim *::after{transition:none!important; animation:none!important;}
  @media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important;}}
  @media (max-width:1180px){
    .cab{grid-template-columns:1fr;} .rail{display:none;}
    .stats, .sk-tiles, .ctiles{grid-template-columns:repeat(2,1fr);}
    .split, .detail-grid{grid-template-columns:1fr;}
  }
  @media (max-width:640px){
    .stats, .sk-tiles, .ctiles{grid-template-columns:1fr;}
    .fsearch{width:100%;}
  }
  @media (max-width:760px){
    .head{align-items:flex-start; flex-direction:column;}
    .facet-row{grid-template-columns:120px minmax(0,1fr) auto;}
  }