/* ============================================================
   Shared design system — District A Governance Suite
   Offline-first. No web fonts, no CDN, no external assets.
   ============================================================ */

:root{
  /* Surfaces */
  --bg:#eef1f6;
  --surface:#ffffff;
  --surface-2:#f6f8fb;
  --surface-3:#eceff5;
  --line:#dde3ec;
  --line-strong:#c6cfdd;

  /* Chrome (sidebar / topbar) */
  --chrome:#141d33;
  --chrome-2:#1c2742;
  --chrome-line:#2a375a;
  --chrome-text:#a8b4cd;
  --chrome-text-bright:#ffffff;

  /* Text */
  --ink:#111827;
  --ink-2:#3f4a5f;
  --ink-3:#6b7688;
  --ink-4:#98a1b2;

  /* Accents */
  --accent:#2551d8;
  --accent-2:#dbe4ff;
  --accent-ink:#1a3ba6;

  --ok:#0f8a5f;
  --ok-bg:#e2f6ee;
  --warn:#b7791f;
  --warn-bg:#fdf3dd;
  --bad:#c62c3d;
  --bad-bg:#fdeaec;
  --info:#0e7490;
  --info-bg:#dff4f8;
  --vip:#7c3aed;
  --vip-bg:#efe6ff;

  --radius:10px;
  --radius-sm:7px;
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  --shadow-lg:0 10px 34px rgba(16,24,40,.13), 0 2px 8px rgba(16,24,40,.07);

  --sans:"Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;

  --sidebar-w:246px;
  --topbar-h:56px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  font-size:13.5px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;font-size:inherit;cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:640;letter-spacing:-.011em}
table{border-collapse:collapse;width:100%}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#c3cbd9;border-radius:6px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#a6b1c3;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---------------- App shell ---------------- */
.app{display:flex;min-height:100vh}

.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);
  background:var(--chrome);color:var(--chrome-text);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
}
.brand{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;border-bottom:1px solid var(--chrome-line);
  min-height:var(--topbar-h);
}
.brand .crest{
  width:30px;height:30px;flex:0 0 30px;border-radius:7px;
  background:linear-gradient(155deg,#3a63e8,#7c3aed);
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:12px;
  letter-spacing:.02em;
}
.brand .bt{line-height:1.15;min-width:0}
.brand .bt b{display:block;color:#fff;font-size:12.5px;font-weight:640;letter-spacing:-.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand .bt span{display:block;font-size:11px;color:#7f8db0;letter-spacing:.04em;text-transform:uppercase}

.navwrap{flex:1;overflow-y:auto;padding:10px 0 20px}
.navwrap::-webkit-scrollbar-thumb{background:#33406a;background-clip:content-box}
.navgrp{padding:12px 16px 5px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#65739a;font-weight:640}
.nav a{
  display:flex;align-items:center;gap:9px;
  padding:7px 16px;font-size:13px;color:var(--chrome-text);
  border-left:2.5px solid transparent;transition:background .12s,color .12s;
}
.nav a:hover{background:rgba(255,255,255,.05);color:#e6ebf5}
.nav a.on{background:rgba(58,99,232,.2);color:#fff;border-left-color:#5b82ff;font-weight:600}
.nav a .ic{width:16px;height:16px;flex:0 0 16px;opacity:.85}
.nav a.on .ic{opacity:1}
.nav a .tail{margin-left:auto;font-size:10.5px;background:rgba(255,255,255,.11);
  padding:1px 6px;border-radius:20px;color:#cfd8ea}
.nav a.on .tail{background:rgba(255,255,255,.2);color:#fff}

.sidefoot{padding:11px 16px;border-top:1px solid var(--chrome-line);font-size:10.5px;color:#65739a}
.sidefoot .ofl{display:flex;align-items:center;gap:6px;color:#4ea67f;margin-bottom:3px;font-weight:600}
.sidefoot .dot{width:6px;height:6px;border-radius:50%;background:#4ea67f;box-shadow:0 0 0 3px rgba(78,166,127,.18)}

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

.topbar{
  height:var(--topbar-h);background:var(--surface);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:14px;padding:0 20px;position:sticky;top:0;z-index:30;
}
.topbar h1{font-size:15px;font-weight:640}
.topbar .sub{font-size:11.5px;color:var(--ink-3);margin-top:-1px}
.topbar .spacer{flex:1}
.tb-clock{font-size:11.5px;color:var(--ink-3);text-align:right;line-height:1.3}
.tb-clock b{display:block;color:var(--ink);font-size:12.5px;font-weight:600}
.tb-user{display:flex;align-items:center;gap:8px;padding-left:14px;border-left:1px solid var(--line)}
.tb-user .av{width:30px;height:30px;border-radius:50%;background:var(--accent-2);color:var(--accent-ink);
  display:grid;place-items:center;font-weight:680;font-size:11px}
.tb-user .un{line-height:1.2}
.tb-user .un b{display:block;font-size:12px;font-weight:620}
.tb-user .un span{display:block;font-size:10.5px;color:var(--ink-3)}

.content{padding:18px 20px 44px;flex:1}

/* ---------------- Cards / sections ---------------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-h{display:flex;align-items:center;gap:10px;padding:12px 15px;border-bottom:1px solid var(--line)}
.card-h h3{font-size:13.5px;font-weight:640}
.card-h .hint{font-size:11.5px;color:var(--ink-3);font-weight:400}
.card-h .spacer{flex:1}
.card-b{padding:15px}
.card-b.flush{padding:0}

.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.span2{grid-column:span 2}
.span3{grid-column:span 3}
@media(max-width:1400px){.g5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1180px){.g4,.g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .span2,.span3{grid-column:span 2}}

/* ---------------- KPI tiles ---------------- */
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:13px 14px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.kpi .lb{font-size:11px;color:var(--ink-3);font-weight:560;letter-spacing:.01em;
  display:flex;align-items:center;gap:5px}
.kpi .vl{font-size:26px;font-weight:680;letter-spacing:-.028em;margin-top:5px;line-height:1.05}
.kpi .vl small{font-size:14px;font-weight:600;color:var(--ink-3);letter-spacing:0}
.kpi .ft{font-size:11px;color:var(--ink-3);margin-top:5px;display:flex;align-items:center;gap:5px}
.kpi .spark{position:absolute;right:0;bottom:0;opacity:.5;pointer-events:none}
.kpi.acc-ok{border-left:3px solid var(--ok)}
.kpi.acc-bad{border-left:3px solid var(--bad)}
.kpi.acc-warn{border-left:3px solid var(--warn)}
.kpi.acc-accent{border-left:3px solid var(--accent)}
.kpi.acc-vip{border-left:3px solid var(--vip)}

.delta{font-weight:640;font-size:11px;display:inline-flex;align-items:center;gap:2px}
.delta.up{color:var(--ok)} .delta.down{color:var(--bad)} .delta.flat{color:var(--ink-4)}

/* ---------------- Pills / badges ---------------- */
.pill{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:20px;
  font-size:11px;font-weight:600;white-space:nowrap;line-height:1.55}
.pill .d{width:5px;height:5px;border-radius:50%;background:currentColor;flex:0 0 5px}
.p-ok{background:var(--ok-bg);color:var(--ok)}
.p-warn{background:var(--warn-bg);color:var(--warn)}
.p-bad{background:var(--bad-bg);color:var(--bad)}
.p-info{background:var(--info-bg);color:var(--info)}
.p-vip{background:var(--vip-bg);color:var(--vip)}
.p-mute{background:var(--surface-3);color:var(--ink-3)}
.p-accent{background:var(--accent-2);color:var(--accent-ink)}

.tag{display:inline-block;padding:1px 6px;border-radius:4px;font-size:10.5px;font-weight:600;
  background:var(--surface-3);color:var(--ink-2);letter-spacing:.01em}

/* ---------------- Buttons ---------------- */
.btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--radius-sm);
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2);
  font-size:12.5px;font-weight:580;transition:.12s;white-space:nowrap}
.btn:hover{background:var(--surface-2);border-color:#adb8c9;color:var(--ink)}
.btn:active{transform:translateY(.5px)}
.btn-p{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-p:hover{background:#1c44bd;border-color:#1c44bd;color:#fff}
.btn-ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn-ok:hover{background:#0c7350;border-color:#0c7350;color:#fff}
.btn-dn{background:var(--surface);border-color:#e4b8bd;color:var(--bad)}
.btn-dn:hover{background:var(--bad-bg);border-color:#d99aa2;color:var(--bad)}
.btn-sm{padding:3px 8px;font-size:11.5px}
.btn-gh{border-color:transparent;background:transparent}
.btn-gh:hover{background:var(--surface-3);border-color:transparent}

/* ---------------- Segmented control ---------------- */
.seg{display:inline-flex;background:var(--surface-3);border-radius:var(--radius-sm);padding:2.5px;gap:2px}
.seg button{border:0;background:transparent;padding:4.5px 11px;border-radius:5px;font-size:12px;
  font-weight:580;color:var(--ink-3);transition:.12s}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(16,24,40,.11);font-weight:620}

/* ---------------- Inputs ---------------- */
.inp,select.inp{padding:6px 9px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  font-family:inherit;font-size:12.5px;background:var(--surface);color:var(--ink);outline:0;min-width:0}
.inp:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,81,216,.13)}
.fld{display:flex;flex-direction:column;gap:4px}
.fld label{font-size:11px;font-weight:600;color:var(--ink-3)}

/* ---------------- Tables ---------------- */
.tbl-wrap{overflow-x:auto}
.tbl{font-size:12.5px}
.tbl thead th{
  background:var(--surface-2);text-align:left;padding:8px 12px;font-size:10.5px;font-weight:660;
  color:var(--ink-3);text-transform:uppercase;letter-spacing:.055em;border-bottom:1px solid var(--line);
  white-space:nowrap;position:sticky;top:0;z-index:2
}
.tbl tbody td{padding:9px 12px;border-bottom:1px solid var(--surface-3);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:#f7f9fc}
.tbl tbody tr.clickable{cursor:pointer}
.tbl .r{text-align:right}
.tbl .c{text-align:center}
.tbl .strong{font-weight:620;color:var(--ink)}
.tbl .muted{color:var(--ink-3)}
.tbl .mono{font-family:var(--mono);font-size:11.5px}
.tbl tbody tr.row-alert{background:#fffbfb}
.tbl tbody tr.row-alert:hover{background:#fff5f6}

.empty{padding:38px 20px;text-align:center;color:var(--ink-3);font-size:12.5px}

/* ---------------- Mini bar in table ---------------- */
.mbar{height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden;min-width:64px}
.mbar i{display:block;height:100%;border-radius:3px;background:var(--accent);transition:width .4s}
.mbar i.ok{background:var(--ok)} .mbar i.warn{background:#e0a324} .mbar i.bad{background:var(--bad)}

/* ---------------- Legend ---------------- */
.legend{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:11px;color:var(--ink-3)}
.legend i{display:inline-block;width:9px;height:9px;border-radius:2.5px;margin-right:5px;vertical-align:-1px}

/* ---------------- Drawer ---------------- */
.scrim{position:fixed;inset:0;background:rgba(15,23,42,.42);opacity:0;pointer-events:none;
  transition:opacity .2s;z-index:80;backdrop-filter:blur(1.5px)}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100vh;width:min(560px,94vw);background:var(--surface);
  box-shadow:var(--shadow-lg);transform:translateX(100%);transition:transform .24s cubic-bezier(.32,.72,0,1);
  z-index:90;display:flex;flex-direction:column}
.drawer.on{transform:none}
.drawer-h{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:12px}
.drawer-h h3{font-size:15px}
.drawer-h .sub{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.drawer-b{flex:1;overflow-y:auto;padding:16px 18px}
.drawer-f{padding:12px 18px;border-top:1px solid var(--line);display:flex;gap:8px;background:var(--surface-2)}
.x{margin-left:auto;border:0;background:transparent;color:var(--ink-3);font-size:19px;line-height:1;
  padding:2px 6px;border-radius:5px}
.x:hover{background:var(--surface-3);color:var(--ink)}

/* Definition rows inside drawer */
.dl{display:grid;grid-template-columns:132px 1fr;gap:7px 12px;font-size:12.5px;align-items:baseline}
.dl dt{color:var(--ink-3);font-weight:560}
.dl dd{margin:0;font-weight:560;color:var(--ink)}

.sec-t{font-size:10.5px;font-weight:680;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-4);margin:20px 0 9px;padding-bottom:5px;border-bottom:1px solid var(--line)}
.sec-t:first-child{margin-top:0}

/* Timeline */
.tl{list-style:none;margin:0;padding:0 0 0 18px;border-left:2px solid var(--surface-3)}
.tl li{position:relative;padding:0 0 15px 14px;font-size:12.5px}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:"";position:absolute;left:-25px;top:4px;width:9px;height:9px;border-radius:50%;
  background:var(--surface);border:2.5px solid var(--line-strong)}
.tl li.done::before{border-color:var(--ok);background:var(--ok)}
.tl li.now::before{border-color:var(--accent);background:var(--accent);
  box-shadow:0 0 0 4px rgba(37,81,216,.16)}
.tl li b{display:block;font-weight:620}
.tl li span{color:var(--ink-3);font-size:11.5px}

/* ---------------- Toast ---------------- */
.toasts{position:fixed;bottom:20px;right:20px;z-index:200;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--chrome);color:#fff;padding:10px 15px;border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg);font-size:12.5px;display:flex;align-items:center;gap:9px;
  animation:tin .26s cubic-bezier(.32,.72,0,1);max-width:390px}
.toast.ok{background:#0d6e4d}
.toast.bad{background:#a52434}
@keyframes tin{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}

/* ---------------- Print ---------------- */
@media print{
  .sidebar,.topbar,.no-print,.toasts,.scrim{display:none!important}
  .content{padding:0}
  body{background:#fff;font-size:11pt}
  .card{border:1px solid #999;box-shadow:none;break-inside:avoid}
  .drawer{position:static;transform:none;width:auto;box-shadow:none;height:auto}
}

/* ---------------- Utilities ---------------- */
.row{display:flex;align-items:center;gap:9px}
.row.wrap{flex-wrap:wrap}
.spacer{flex:1}
.mut{color:var(--ink-3)}
.sm{font-size:11.5px}
.xs{font-size:10.5px}
.b{font-weight:640}
.mt0{margin-top:0}.mt8{margin-top:8px}.mt14{margin-top:14px}.mt20{margin-top:20px}
.nowrap{white-space:nowrap}
.tr{text-align:right}
.hl{background:#fff3c4;padding:0 2px;border-radius:2px}

/* ============================================================
   Action Centre — shared across every tool
   ============================================================ */
.bell{position:relative;border:1px solid var(--line-strong);background:var(--surface);
  color:var(--ink-2);width:34px;height:34px;border-radius:var(--radius-sm);
  display:grid;place-items:center;transition:.12s}
.bell:hover{background:var(--surface-2);color:var(--ink);border-color:#adb8c9}
.bell-n{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;
  border-radius:9px;background:var(--ink-3);color:#fff;font-size:10.5px;font-weight:700;
  display:grid;place-items:center;border:2px solid var(--surface);font-variant-numeric:tabular-nums}
.bell-n.hot{background:var(--bad);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(198,44,61,.45)}50%{box-shadow:0 0 0 5px rgba(198,44,61,0)}}

.al-list{display:flex;flex-direction:column}
.al-grp{display:flex;align-items:center;gap:7px;padding:9px 15px;background:var(--surface-2);
  border-bottom:1px solid var(--line);font-size:10.5px;font-weight:680;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);position:sticky;top:0;z-index:3}
.al-grp b{margin-left:auto;background:var(--surface-3);color:var(--ink-2);border-radius:20px;
  padding:1px 8px;font-size:11px;letter-spacing:0}
.al-gd{width:7px;height:7px;border-radius:50%}

.al{display:flex;gap:11px;align-items:center;padding:12px 15px;
  border-bottom:1px solid var(--surface-3);cursor:pointer;transition:background .12s}
.al:last-child{border-bottom:0}
.al:hover{background:#f7f9fc}
.al-dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.al-b{flex:1;min-width:0}
.al-t{font-size:13.5px;font-weight:640;letter-spacing:-.008em}
.al-d{font-size:12px;color:var(--ink-3);margin-top:1px}
.al-a{display:flex;gap:6px;flex:0 0 auto}

.al-empty{padding:44px 20px;text-align:center;color:var(--ink-3);display:flex;
  flex-direction:column;align-items:center;gap:6px}
.al-empty svg{color:var(--ok);margin-bottom:2px}
.al-empty b{font-size:14px;color:var(--ink);font-weight:640}
.al-empty span{font-size:12px}

@media(max-width:900px){
  .al{flex-wrap:wrap}
  .al-a{width:100%;padding-left:19px}
}


/* ---------- Top-navigation layout (used by monitoring-style tools) ---------- */
.app-top,.app-office{display:block}
.apex,.tabbar,.pagewrap{width:100%}
.pagewrap{padding:18px 20px 48px}
.pghead h1{font-size:20px}
@media(max-width:760px){
  .apex-in{padding:0 14px;gap:10px}
  .apex-clock,.apex-user .un{display:none}
  .tabs{padding:0 10px}
  .pagewrap{padding:14px 12px 40px}
}

/* ============================================================
   Icon-rail layout (register-style tools)
   ============================================================ */
.rail{width:82px;flex:0 0 82px;background:var(--chrome);border-right:1px solid var(--chrome-line);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.rail-crest{width:44px;height:44px;margin:14px auto 10px;border-radius:8px;
  background:var(--accent);color:#fff;display:grid;place-items:center;
  font-weight:750;font-size:14px;letter-spacing:.01em}
.rail-nav{flex:1;overflow-y:auto;padding:6px 6px 14px;display:flex;flex-direction:column;gap:3px}
.rail-nav::-webkit-scrollbar{width:0}
.rail-nav a{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:11px 4px 9px;border-radius:8px;color:var(--chrome-text);
  font-size:10.5px;font-weight:600;text-align:center;line-height:1.2;transition:.12s}
.rail-nav a:hover{background:rgba(0,0,0,.05);color:var(--ink)}
.rail-nav a.on{background:var(--accent-2);color:var(--accent-ink)}
.rail-nav a.on::before{content:"";position:absolute;left:-6px;top:12px;bottom:12px;width:3px;
  border-radius:0 3px 3px 0;background:var(--accent)}
.rail-nav a .ic{opacity:.7}
.rail-nav a.on .ic{opacity:1}
.rail-nav a .tail{position:absolute;top:5px;right:7px;background:var(--bad);color:#fff;
  font-size:9.5px;font-weight:700;padding:0 5px;border-radius:9px;line-height:1.5}
.rail-foot{padding:10px 4px;border-top:1px solid var(--chrome-line);text-align:center;
  font-size:9.5px;font-weight:600;color:var(--ok);letter-spacing:.03em}
.rail-foot .dot{display:block;width:6px;height:6px;border-radius:50%;background:var(--ok);
  margin:0 auto 4px}

.masthead{display:flex;align-items:center;gap:20px;background:var(--surface);
  border-bottom:1px solid var(--line);padding:0 24px;min-height:68px;position:sticky;top:0;z-index:30}
.masthead .mh-id{padding-right:20px;border-right:1px solid var(--line);line-height:1.2}
.masthead .mh-id b{display:block;font-size:14px;font-weight:680;letter-spacing:-.012em}
.masthead .mh-id span{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-4);margin-top:2px}
.masthead .mh-t h1{font-size:20px;font-weight:680;letter-spacing:-.022em}
.masthead .mh-t .sub{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.masthead .mh-clock{font-size:11.5px;color:var(--ink-3);text-align:right;line-height:1.3}
.masthead .mh-clock b{display:block;color:var(--ink);font-size:12.5px;font-weight:620}
.masthead .mh-user{display:flex;align-items:center;gap:9px;padding-left:18px;
  border-left:1px solid var(--line)}
.masthead .mh-user .av{width:34px;height:34px;border-radius:8px;background:var(--accent-2);
  color:var(--accent-ink);display:grid;place-items:center;font-weight:700;font-size:12px}
.masthead .mh-user .un b{display:block;font-size:12.5px;font-weight:640;line-height:1.25}
.masthead .mh-user .un span{display:block;font-size:10.5px;color:var(--ink-3)}

@media(max-width:900px){
  .rail{width:64px;flex:0 0 64px}
  .rail-nav a span{display:none}
  .masthead{gap:12px;padding:0 14px}
  .masthead .mh-id,.masthead .mh-clock,.masthead .mh-user .un{display:none}
}

.al-more{display:block;padding:10px 16px;font-size:12.5px;font-weight:640;color:var(--accent);
  border-top:1px solid var(--surface-3);background:var(--surface-2)}
.al-more:hover{background:var(--surface-3)}
.grid.top{align-items:start}

/* ============================================================
   Account / alert chrome — three different treatments so the
   three tools never read as one template.
   ============================================================ */

/* --- labelled bell pill (Allotment) --- */
.bell-wide{width:auto;padding:0 12px;gap:7px;display:flex;align-items:center;
  font-size:12.5px;font-weight:620;height:34px}
.bell-wide .bell-c{background:var(--ink-3);color:#fff;border-radius:20px;
  padding:0 7px;font-size:11px;font-weight:700;line-height:1.7;font-variant-numeric:tabular-nums}
.bell-wide.hot .bell-c{background:var(--bad)}

/* --- plain text alert link (Case Disposal) --- */
.bell-link{border:0;background:transparent;color:var(--ink-2);font-size:13px;font-weight:640;
  display:flex;align-items:center;gap:7px;padding:6px 2px;border-bottom:2px solid transparent}
.bell-link:hover{color:var(--accent);border-bottom-color:var(--accent)}
.bell-link .bell-c{background:var(--ink-3);color:#fff;border-radius:3px;padding:0 6px;
  font-size:11px;font-weight:700;line-height:1.7;font-variant-numeric:tabular-nums}
.bell-link.hot .bell-c{background:var(--bad)}

/* --- Allotment: file date + office block --- */
.tb-file{text-align:right;line-height:1.25;padding-right:14px;border-right:1px solid var(--line)}
.tb-file span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-4)}
.tb-file b{display:block;font-size:13px;font-weight:640}
.tb-office{display:flex;align-items:center;gap:10px;padding-left:14px;border-left:1px solid var(--line)}
.tb-office .seal{width:34px;height:34px;flex:0 0 34px;border-radius:50%;
  display:grid;place-items:center;font-weight:700;font-size:11.5px;
  background:#fdf6e6;color:#8a5f18;box-shadow:inset 0 0 0 1.5px #d9b877}
.tb-office .un b{display:block;font-size:12.5px;font-weight:640;line-height:1.25}
.tb-office .un span{display:block;font-size:10.5px;color:var(--ink-3)}

/* --- Sanitation: shift indicator --- */
.apex-shift{text-align:right;line-height:1.3;color:rgba(255,255,255,.72);font-size:11px}
.apex-shift span{display:block;text-transform:uppercase;letter-spacing:.09em;font-size:9.5px}
.apex-shift b{display:block;color:#fff;font-size:12.5px;font-weight:620;font-variant-numeric:tabular-nums}

/* --- Case Disposal: sitting hours + signed-in block --- */
.mh-sitting{text-align:right;line-height:1.25;padding-right:16px;border-right:1px solid var(--line)}
.mh-sitting span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-4)}
.mh-sitting b{display:block;font-size:12.5px;font-weight:640;font-variant-numeric:tabular-nums}
.mh-signed{padding-left:16px;border-left:1px solid var(--line)}
.mh-signed .lbl{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink-4);margin-bottom:3px}
.mh-signed .who{display:flex;align-items:center;gap:9px}
.mh-signed .av{width:32px;height:32px;flex:0 0 32px;border-radius:50%;display:grid;place-items:center;
  font-weight:700;font-size:11.5px;background:var(--accent-2);color:var(--accent-ink);
  box-shadow:inset 0 0 0 1.5px var(--accent)}
.mh-signed .un b{display:block;font-size:12.5px;font-weight:660;line-height:1.2}
.mh-signed .un span{display:block;font-size:10.5px;color:var(--ink-3)}

@media(max-width:1100px){
  .tb-file,.mh-sitting,.apex-shift{display:none}
  .tb-office .un,.mh-signed .un{display:none}
}

/* ---- phones. Last in the sheet on purpose: these override rules declared
       further up at equal specificity. ---- */
@media(max-width:760px){
  .topbar{height:auto;min-height:var(--topbar-h);flex-wrap:wrap;row-gap:8px;padding:10px 14px}
  .al,.al-a,.card-h,.card-h > *{flex-wrap:wrap}
  .al-a{row-gap:6px;min-width:0}
  .al-a .btn{flex:0 1 auto;min-width:0}
  /* these are dense desktop office consoles. On a phone the content column
     scrolls inside itself rather than dragging the whole page sideways, so the
     header and nav stay put. */
  .content,.pagewrap{overflow-x:auto;min-width:0}
  .topbar .spacer{flex:1 0 100%;height:0}
  .tb-clock{display:none}
  .bell span{display:none}
  .tb-user{padding-left:10px}
}
/* An off-canvas drawer is parked outside the right edge with a transform. A
   fixed element sitting beyond the viewport still widens the document, which
   is what made these demos scroll sideways on a phone. `clip` rather than
   `hidden`: hidden on the root forces overflow-y to auto and breaks sticky. */
html{overflow-x:clip}