:root{
  --ink:#2A2F7A; --ink-2:#3A40A6; --text:#1A1E2C; --muted:#5D6378; --line:#DADDE8; --line-2:#ECEDF3;
  --bg:#F3F4F9; --panel:#FFFFFF; --panel-2:#F8F9FC;
  --red:#B4362B; --red-bg:#FBEDEB; --amber:#955A00; --amber-bg:#FBF3E3; --green:#166F4B; --green-bg:#E8F3EE; --blue:#2F5F8F; --blue-bg:#E9F0F7;
  --r:6px; --rail:232px; --aside:380px;
}
*{box-sizing:border-box} html,body{height:100%} body{margin:0;font-family:"Public Sans",system-ui,sans-serif;font-size:15px;line-height:1.45;color:var(--text);background:var(--bg)}
a{color:var(--blue)} button{font:inherit;cursor:pointer}
.app{display:grid;grid-template-columns:var(--rail) 1fr var(--aside);min-height:100vh}
/* rail */
.rail{background:var(--ink);color:#DEE1EC;padding:22px 18px;display:flex;flex-direction:column;gap:18px;position:sticky;top:0;height:100vh}
.brand{font-weight:700;font-size:20px;letter-spacing:-.02em;color:#fff}
.brand small{display:block;font-weight:500;font-size:12.5px;color:#A2A8C0;margin-top:2px;letter-spacing:0}
.nav{display:flex;flex-direction:column;gap:2px}
.nav button{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;padding:10px 12px;border:0;border-radius:var(--r);background:transparent;color:#DEE1EC;font-weight:500}
.nav button:hover{background:rgba(255,255,255,.07)} .nav button.on{background:#fff;color:var(--ink);font-weight:600}
.nav .count{font-size:12.5px;font-weight:600;padding:1px 8px;border-radius:99px;background:rgba(255,255,255,.14)} .nav button.on .count{background:var(--red-bg);color:var(--red)}
.rail .foot{margin-top:auto;font-size:12.5px;color:#A2A8C0;line-height:1.5}
.rail .foot b{color:#DEE1EC;font-weight:600}
/* main */
.main{padding:26px 32px 60px;min-width:0}
h1{font-size:24px;font-weight:700;letter-spacing:-.02em;margin:0 0 4px} .sub{color:var(--muted);margin:0 0 22px}
h2{font-size:16px;font-weight:700;margin:26px 0 10px} h2:first-child{margin-top:0}
.grid{display:grid;gap:12px} .g3{grid-template-columns:repeat(3,1fr)} .g2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.card .hd{padding:12px 16px;border-bottom:1px solid var(--line-2);display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.card .hd h3{margin:0;font-size:14.5px;font-weight:700} .card .hd span{color:var(--muted);font-size:13px}
.list{list-style:none;margin:0;padding:0} .list li{display:grid;grid-template-columns:4px 1fr auto;gap:12px;align-items:center;padding:10px 16px 10px 12px;border-bottom:1px solid var(--line-2)} .list li:last-child{border-bottom:0}
.list .edge{width:4px;height:100%;min-height:34px;border-radius:2px;background:var(--line)}
.edge.red{background:var(--red)} .edge.amber{background:var(--amber)} .edge.green{background:var(--green)} .edge.blue{background:var(--blue)}
.list .t{font-weight:600} .list .m{color:var(--muted);font-size:13px;margin-top:1px} .list .r{text-align:right;font-size:13px;color:var(--muted);white-space:nowrap}
.tag{display:inline-block;font-size:12.5px;font-weight:600;padding:2px 8px;border-radius:99px;background:var(--panel-2);color:var(--muted)}
.tag.red{background:var(--red-bg);color:var(--red)} .tag.amber{background:var(--amber-bg);color:var(--amber)} .tag.green{background:var(--green-bg);color:var(--green)} .tag.blue{background:var(--blue-bg);color:var(--blue)}
.btn{border:1px solid var(--line);background:#fff;color:var(--text);padding:6px 11px;border-radius:var(--r);font-size:13.5px;font-weight:600}
.btn:hover{border-color:var(--ink);} .btn.primary{background:var(--ink);border-color:var(--ink);color:#fff} .btn.primary:hover{background:var(--ink-2)} .btn.sm{padding:4px 9px;font-size:12.5px} .btn:disabled{opacity:.5;cursor:default}
/* Build 21: the number sits on one line with its label. At 44px the label wrapped and every tile
   was twice the height it needed, which is most of why the screens read as a stack of boxes. */
.score{display:flex;align-items:baseline;gap:10px;padding:14px 16px} .score .n{font-size:26px;font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--ink)} .score .d{color:var(--muted);font-size:13.5px;line-height:1.35;padding-bottom:0}
.bar{height:8px;background:var(--line-2);border-radius:99px;overflow:hidden;display:flex;margin:0 16px 16px} .bar i{display:block;height:100%} .bar .g{background:var(--green)} .bar .a{background:var(--amber)} .bar .rd{background:var(--red)}
table{width:100%;border-collapse:collapse;font-size:14px} th{text-align:left;font-weight:600;color:var(--muted);font-size:12.5px;padding:8px 12px;border-bottom:1px solid var(--line)} td{padding:9px 12px;border-bottom:1px solid var(--line-2);vertical-align:top} tr:last-child td{border-bottom:0}
.day{display:grid;grid-template-columns:64px repeat(3,1fr);border-top:1px solid var(--line-2)} .day>div{border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);min-height:40px;padding:5px 8px;font-size:13px} .day>div:nth-child(4n){border-right:0}
.day .tm{color:var(--muted);font-size:12.5px;padding-top:8px} .day .gph{font-weight:700;background:var(--panel-2);padding:8px} .day .ap{border-radius:4px;padding:4px 6px;background:var(--blue-bg);color:var(--blue);font-weight:500;line-height:1.3} .day .ap.dna{background:var(--red-bg);color:var(--red)} .day .ap.done{background:var(--green-bg);color:var(--green)} .day .ap small{display:block;color:inherit;opacity:.8;font-weight:400}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.req{padding:14px 16px;border-bottom:1px solid var(--line-2)} .req:last-child{border-bottom:0} .req .who{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted);margin-bottom:6px} .req .who b{color:var(--text);font-weight:600} .req p{margin:0 0 10px} .req .acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.assess{margin-top:10px;padding:10px 12px;background:var(--panel-2);border-left:3px solid var(--ink);border-radius:0 var(--r) var(--r) 0;white-space:pre-wrap;font-size:13.5px} .assess.emerg{border-color:var(--red);background:var(--red-bg)} .assess.same{border-color:var(--amber);background:var(--amber-bg)}
.note{font-size:12.5px;color:var(--muted);margin-top:10px}
/* aside */
.aside{background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.aside .hd{padding:16px 18px;border-bottom:1px solid var(--line-2)} .aside .hd h3{margin:0;font-size:15px;font-weight:700} .aside .hd p{margin:3px 0 0;color:var(--muted);font-size:13px}
.chat{flex:1;overflow:auto;padding:14px 18px;display:flex;flex-direction:column;gap:12px}
.msg{max-width:100%;white-space:pre-wrap;font-size:14px;line-height:1.5} .msg.u{align-self:flex-end;background:var(--ink);color:#fff;padding:9px 12px;border-radius:12px 12px 2px 12px;max-width:88%} .msg.a{background:var(--panel-2);padding:10px 12px;border-radius:12px 12px 12px 2px;border:1px solid var(--line-2)} .msg.a .meta{display:block;margin-top:8px;font-size:12px;color:var(--muted)}
.composer{border-top:1px solid var(--line-2);padding:12px 14px;display:flex;gap:8px} .composer textarea{flex:1;resize:none;border:1px solid var(--line);border-radius:var(--r);padding:9px 10px;font:inherit;font-size:14px;min-height:44px;max-height:140px} .composer textarea:focus{outline:2px solid var(--ink);outline-offset:0;border-color:transparent}
.starters{display:flex;flex-wrap:wrap;gap:6px;padding:0 18px 12px} .starters button{border:1px solid var(--line);background:#fff;border-radius:99px;padding:5px 10px;font-size:12.5px;color:var(--ink)} .starters button:hover{border-color:var(--ink)}
.banner{background:var(--amber-bg);color:#6B4A0E;border:1px solid #EAD4A3;border-radius:var(--r);padding:9px 12px;font-size:13px;margin-bottom:18px}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (max-width:1180px){.app{grid-template-columns:var(--rail) 1fr}.aside{position:fixed;right:0;top:0;width:min(420px,100vw);transform:translateX(100%);transition:transform .2s;z-index:5;box-shadow:-8px 0 30px rgba(0,0,0,.12)} .aside.open{transform:none} .ask-fab{display:inline-flex}}
@media (min-width:1181px){.ask-fab{display:none}}
.ask-fab{position:fixed;right:18px;bottom:18px;background:var(--ink);color:#fff;border:0;border-radius:99px;padding:12px 18px;font-weight:600;box-shadow:0 6px 20px rgba(0,0,0,.18);z-index:4}
@media (max-width:820px){.app{grid-template-columns:1fr}.rail{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;padding:14px 16px}.rail .foot{display:none}.nav{flex-direction:row;flex-wrap:wrap}.main{padding:18px 16px}.g3,.g2{grid-template-columns:1fr}.day{grid-template-columns:52px repeat(3,1fr)}}
@media (prefers-reduced-motion:reduce){.aside{transition:none}}

.nav a.navlink{display:block;padding:10px 12px;border-radius:var(--r);color:#DEE1EC;text-decoration:none;font-weight:500} .nav a.navlink:hover{background:rgba(255,255,255,.07)}
.kv{display:grid;grid-template-columns:150px 1fr;gap:6px 14px;padding:12px 16px;font-size:14px} .kv div:nth-child(odd){color:var(--muted)}
.pill-row{display:flex;gap:6px;flex-wrap:wrap}
.total{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
[hidden]{display:none!important}
/* Build 14 — shared severity boxes (INFO/WARN/BLOCK/REJECT/CRITICAL), explainability panel, print */
.chk{display:flex;gap:10px;padding:10px 12px;border-radius:var(--r);margin-top:8px;font-size:13.5px;align-items:flex-start}
.chk > div > b:first-child{display:block}
.chk.BLOCK,.chk.REJECT,.chk.CRITICAL{background:var(--red-bg);color:#7A241D}
.chk.WARN{background:var(--amber-bg);color:#6B4A0E}
.chk.INFO{background:var(--blue-bg);color:#244A70}
.chk.OK{background:var(--green-bg);color:#1E5A43}
.sev{font-size:11.5px;font-weight:700;letter-spacing:.04em;padding:2px 7px;border-radius:99px;background:rgba(0,0,0,.08);white-space:nowrap}
.xp{border:1px solid var(--line);border-radius:var(--r);margin-top:10px;background:var(--panel-2);font-size:13.5px}
.xp summary{cursor:pointer;padding:8px 12px;font-weight:600;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.xp .xb{padding:4px 12px 12px}
.xp table{width:100%;border-collapse:collapse;font-size:13px}.xp td,.xp th{border-top:1px solid var(--line-2);padding:5px 6px;text-align:left;vertical-align:top}
.sup-lo{background:#FBEDEB}.sup-mid{background:#FBF3E3}
.reg{font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:99px;border:1px solid currentColor}
.reg.excluded{color:#2A7A5B}.reg.not-device{color:#2A7A5B}.reg.exempt{color:#2F5F8F}.reg.disabled{color:#B4362B}
.demo-clock{font-size:12px;color:#A2A8C0}
@media print{.rail,.tabs,.toolbar,button,#tc-banner,.no-print{display:none!important}body{background:#fff}.card{break-inside:avoid;border:1px solid #999}}
.pad{padding:14px 16px}

/* Build 16: keep the two assistants' buttons apart */
@media (min-width:1181px){body:has(#aside) #tca-fab,body:has(#aside) #tca{right:calc(var(--aside) + 18px)}}
@media (max-width:1180px){body:has(.ask-fab) #tca-fab{bottom:74px}body:has(.ask-fab) #tca{bottom:126px}}
/* Build 16: phone width — wide tables scroll inside their card, never the page */
@media (max-width:820px){.card{overflow-x:auto}.main{min-width:0;overflow-x:hidden}.tabs{overflow-x:auto;flex-wrap:nowrap}.tabs button{white-space:nowrap}table{min-width:0}}

/* ── Build 21: flow ─────────────────────────────────────────────────────────
   The screens were reading as a stack of identical bordered boxes: an alarm
   banner, three floating number tiles, two rows of controls, then a boxed
   table. These rules give a page one object per idea rather than one box per
   paragraph, and let colour carry severity instead of decorating. */

/* An explanation is not a warning. .banner stays amber for what must be acted
   on; .lede is for the sentence that says what a screen is for. */
.lede{max-width:82ch;color:var(--muted);font-size:13.5px;line-height:1.55;border-left:2px solid var(--line);padding:1px 0 1px 14px;margin:0 0 20px}
.lede b{color:var(--text);font-weight:600}

/* One panel divided into cells, sized to its content, rather than three
   floating boxes stretched across the page. */
.stats{display:inline-flex;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:18px}
.stats>div{display:flex;align-items:baseline;gap:9px;padding:11px 18px;border-right:1px solid var(--line-2)}
.stats>div:last-child{border-right:0}
.stats .n{font-size:24px;font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.stats .n.red{color:var(--red)} .stats .n.amber{color:var(--amber)} .stats .n.green{color:var(--green)}
.stats .d{color:var(--muted);font-size:13.5px;line-height:1.3}

/* Tables read as content: tighter rows, no wrapping in the columns that scan
   vertically, severity as a thin edge rather than a pill that wraps. */
table.rows td{padding:11px 12px}
table.rows th{padding:9px 12px}
.nw{white-space:nowrap}
table.rows tr>td:first-child{border-left:3px solid transparent}
table.rows tr.sev-BLOCK>td:first-child{border-left-color:var(--red)}
table.rows tr.sev-WARN>td:first-child{border-left-color:var(--amber)}
table.rows tr.sev-INFO>td:first-child{border-left-color:var(--line)}
table.rows tr.open>td{background:var(--panel-2)}
.when{font-weight:600} .when small{display:block;font-weight:400;font-size:12.5px;margin-top:1px}
.when small.s-BLOCK{color:var(--red);font-weight:600}
.when small.s-WARN{color:var(--amber);font-weight:600}
.when small.s-INFO,.when small.s-OK{color:var(--muted)}
.what{font-weight:600;line-height:1.35} .what small{display:block;font-weight:400;color:var(--muted);font-size:12.5px;margin-top:2px}

/* An expanded row belongs to its row: inset, shaded, with its own left rule. */
tr.detail>td{padding:0;background:var(--panel-2);border-bottom:1px solid var(--line)}
.detail-in{padding:16px 20px 18px;border-left:3px solid var(--ink)}
.detail-in>p{margin:0 0 10px;max-width:84ch}
.detail-in .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.detail-in table{margin-top:12px;background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r)}

/* Controls on one line instead of two stacked rows of furniture. */
.controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 14px}
.chip.sm{padding:4px 10px;font-size:12.5px}
/* Build 22: the rail shows where you are, and a secondary destination is quieter. */
.nav a.navlink.on{background:#fff;color:var(--ink);font-weight:600}
.nav a.navlink.quiet{color:#A2A8C0;font-size:13px;margin-top:6px}