/* ============================================================
   Keystone — design tokens
   Ground: white / near-black. Accent: deep green. Rules: hairline.
   ============================================================ */
:root{
  --bg:            255 255 255;
  --panel:         252 253 252;
  --raised:        242 245 243;
  --sunken:        247 249 248;

  --ink:            13  17  23;
  --ink-2:          78  86 100;
  --ink-3:         130 138 152;

  --line:          226 230 236;
  --line-2:        201 207 217;
  --line-3:        168 177 190;

  --accent:         33  92 208;
  --accent-hi:      46 111 224;
  --accent-tint:   232 240 253;
  --accent-ink:    255 255 255;

  --good:           27 122  77;
  --good-tint:     233 244 238;
  --warn:          169 112  26;
  --warn-tint:     251 243 228;
  --bad:           174  49  40;
  --bad-tint:      251 237 235;
  --info:           42 107 140;
  --info-tint:     234 242 246;

  --s1:             33  92 208;
  --s2:             13 148 136;
  --s3:            168  80 140;

  --rail-bg:    9   9  10;
  --rail-ink: 238 239 241;
  --rail-ink2:152 155 161;
  --rail-ink3:110 113 120;
  --rail-line: 32  33  37;
  --rail-hov:  22  23  26;

  --shadow-1: 0 1px 2px rgb(13 17 23 / .05);
  --shadow-2: 0 8px 24px -8px rgb(13 17 23 / .14), 0 1px 2px rgb(13 17 23 / .05);
  --shadow-3: 0 24px 60px -16px rgb(13 17 23 / .22), 0 2px 6px rgb(13 17 23 / .06);
}
:root.dark{
  --bg:             10  12  17;
  --panel:          15  19  16;
  --raised:         23  28  25;
  --sunken:         12  15  21;

  --ink:           236 240 246;
  --ink-2:         158 167 182;
  --ink-3:         110 119 134;

  --line:           32  38  48;
  --line-2:         45  53  66;
  --line-3:         63  73  90;

  --accent:         96 154 246;
  --accent-hi:     132 178 252;
  --accent-tint:    18  32  56;
  --accent-ink:      8  14  26;

  --good:           52 178 122;
  --good-tint:      16  40  29;
  --warn:          212 158  72;
  --warn-tint:      45  35  16;
  --bad:           230 111  99;
  --bad-tint:       49  25  22;
  --info:          111 179 212;
  --info-tint:      18  36  45;

  --s1:             96 154 246;
  --s2:             45 190 180;
  --s3:            188 111 168;

  --shadow-1: 0 1px 2px rgb(0 0 0 / .5);
  --shadow-2: 0 8px 24px -8px rgb(0 0 0 / .7), 0 1px 2px rgb(0 0 0 / .4);
  --shadow-3: 0 24px 60px -16px rgb(0 0 0 / .8), 0 2px 6px rgb(0 0 0 / .5);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:rgb(var(--bg));
  color:rgb(var(--ink));
  font-family:"IBM Plex Sans","Segoe UI",Helvetica,Arial,sans-serif;
  font-size:13.5px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- typography ---------- */
h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.012em; text-wrap:balance; color:rgb(var(--ink)); }
h1{ font-size:24px; letter-spacing:-.026em; }
h2{ font-size:15px; }
h3{ font-size:13.5px; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }

.mono{ font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; font-feature-settings:"zero" 1; }
.num{ font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums; font-feature-settings:"zero" 1; }
.eyebrow{
  font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:rgb(var(--ink-3));
}
.muted{ color:rgb(var(--ink-2)); }
.dim{ color:rgb(var(--ink-3)); }

::selection{ background:rgb(var(--accent) / .18); }

/* ---------- focus ---------- */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid rgb(var(--accent));
  outline-offset:2px;
  border-radius:5px;
}

/* ---------- scrollbars ---------- */
*::-webkit-scrollbar{ width:9px; height:9px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:rgb(var(--line-2)); border-radius:99px; border:2px solid rgb(var(--bg)); }
*::-webkit-scrollbar-thumb:hover{ background:rgb(var(--line-3)); }

/* ============================================================
   Icons
   ============================================================ */
.ic{ width:16px; height:16px; flex:none; display:inline-block; vertical-align:-.18em; }
.ic-sm{ width:14px; height:14px; }
.ic-lg{ width:18px; height:18px; }
.ic-xl{ width:22px; height:22px; }

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

.rail{
  width:244px; flex:none;
  position:sticky; top:0; align-self:flex-start;
  height:100vh;
  display:flex; flex-direction:column;
  background:rgb(var(--rail-bg));
  color:rgb(var(--rail-ink));
  border-right:1px solid rgb(var(--rail-line));
}
.rail-brand{
  height:57px; flex:none;
  display:flex; align-items:center; gap:10px;
  padding:0 16px;
  border-bottom:1px solid rgb(var(--rail-line));
}
.brand-mark{
  width:26px; height:26px; flex:none; border-radius:7px;
  background:rgb(var(--accent-hi));
  color:rgb(var(--rail-bg));
  display:grid; place-items:center;
}
.brand-name{ font-size:14.5px; font-weight:600; letter-spacing:-.02em; color:rgb(var(--rail-ink)); }
.brand-env{
  margin-left:auto;
  font-size:9.5px; font-weight:600; letter-spacing:.07em;
  padding:2px 5px; border-radius:4px;
  border:1px solid rgb(var(--rail-line)); color:rgb(var(--rail-ink3));
}

.rail-scroll{ flex:1; overflow-y:auto; padding:14px 10px 18px; }
.rail-scroll::-webkit-scrollbar-thumb{ background:rgb(var(--rail-line)); border-color:rgb(var(--rail-bg)); }
.nav-group{ margin-bottom:19px; }
.nav-group > .eyebrow{ padding:0 8px; margin-bottom:7px; display:block; color:rgb(var(--rail-ink3)); }
.nav-item{
  display:flex; align-items:center; gap:10px;
  padding:7px 9px; margin-bottom:1px; border-radius:7px;
  color:rgb(var(--rail-ink2));
  font-size:13px; font-weight:500;
  position:relative;
  transition:background .12s ease,color .12s ease;
}
.nav-item .ic{ color:rgb(var(--rail-ink3)); transition:color .12s ease; }
.nav-item:hover{ background:rgb(var(--rail-hov)); color:rgb(var(--rail-ink)); }
.nav-item:hover .ic{ color:rgb(var(--rail-ink2)); }
.nav-item.active{ background:rgb(var(--accent-hi) / .13); color:#fff; font-weight:600; }
.nav-item.active .ic{ color:rgb(var(--accent-hi)); }
.nav-item.active::before{
  content:""; position:absolute; left:-10px; top:7px; bottom:7px;
  width:2px; border-radius:0 2px 2px 0; background:rgb(var(--accent-hi));
}
.nav-count{
  margin-left:auto;
  font-size:10.5px; font-weight:600;
  font-family:"IBM Plex Mono",monospace;
  color:rgb(var(--rail-ink3));
  background:rgb(var(--rail-hov));
  border:1px solid rgb(var(--rail-line));
  padding:0 5px; border-radius:99px; line-height:16px;
}
.nav-item.active .nav-count{ color:rgb(var(--accent-hi)); background:rgb(var(--rail-bg)); border-color:rgb(var(--accent-hi) / .35); }

.rail-foot{
  flex:none; border-top:1px solid rgb(var(--rail-line));
  padding:10px;
}
.rail-user{
  display:flex; align-items:center; gap:9px;
  padding:6px; border-radius:7px; width:100%;
  background:none; border:0; cursor:pointer; text-align:left;
  color:inherit; font:inherit;
}
.rail-user:hover{ background:rgb(var(--rail-hov)); }
.rail-user .who-name{ color:rgb(var(--rail-ink)); }
.rail-user .who-sub{ color:rgb(var(--rail-ink3)); }
.rail-user .ic{ color:rgb(var(--rail-ink3)); }
.rail .av{ background:rgb(var(--accent-hi) / .16); color:rgb(var(--accent-hi)); border-color:rgb(var(--accent-hi) / .3); }

/* role switcher, in the rail */
.role-box{
  margin:0 0 16px; padding:10px 11px;
  border:1px solid rgb(var(--rail-line)); border-radius:8px;
  background:rgb(var(--rail-hov) / .7);
}
.role-box .eyebrow{ color:rgb(var(--rail-ink3)); display:block; margin-bottom:6px; }
.role-sel{
  width:100%; height:28px; padding:0 24px 0 8px;
  border:1px solid rgb(var(--rail-line)); border-radius:6px;
  background:rgb(var(--rail-bg)); color:rgb(var(--rail-ink));
  font:inherit; font-size:12.5px; font-weight:500; cursor:pointer;
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,rgb(var(--rail-ink3)) 50%),linear-gradient(135deg,rgb(var(--rail-ink3)) 50%,transparent 50%);
  background-position:calc(100% - 13px) 12px,calc(100% - 8px) 12px;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.role-scope{ margin-top:8px; font-size:11px; line-height:1.45; color:rgb(var(--rail-ink3)); }
.role-scope b{ color:rgb(var(--rail-ink2)); font-weight:600; }

/* ---------- main + topbar ---------- */
.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{
  height:57px; flex:none;
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:12px;
  padding:0 24px;
  background:rgb(var(--bg) / .88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgb(var(--line));
}
.crumbs{ display:flex; align-items:center; gap:6px; font-size:13px; color:rgb(var(--ink-3)); min-width:0; }
.crumbs b{ color:rgb(var(--ink)); font-weight:600; }
.crumbs .ic{ color:rgb(var(--line-3)); }

.searchbox{
  margin-left:auto;
  display:flex; align-items:center; gap:7px;
  height:30px; width:250px; padding:0 9px;
  border:1px solid rgb(var(--line)); border-radius:7px;
  background:rgb(var(--panel));
  color:rgb(var(--ink-3)); font-size:12.5px;
  cursor:text; transition:border-color .12s ease;
}
.searchbox:hover{ border-color:rgb(var(--line-2)); }
.kbd{
  margin-left:auto;
  font-family:"IBM Plex Mono",monospace; font-size:10px;
  border:1px solid rgb(var(--line-2)); border-radius:4px;
  padding:1px 4px; color:rgb(var(--ink-3)); background:rgb(var(--bg));
}

.icon-btn{
  width:30px; height:30px; flex:none;
  display:grid; place-items:center;
  border:1px solid rgb(var(--line)); border-radius:7px;
  background:rgb(var(--panel)); color:rgb(var(--ink-2));
  cursor:pointer; position:relative;
  transition:background .12s ease,border-color .12s ease,color .12s ease;
}
.icon-btn:hover{ background:rgb(var(--raised)); color:rgb(var(--ink)); border-color:rgb(var(--line-2)); }
.dot-badge::after{
  content:""; position:absolute; top:5px; right:5px;
  width:6px; height:6px; border-radius:99px;
  background:rgb(var(--accent));
  box-shadow:0 0 0 2px rgb(var(--panel));
}

.content{ padding:26px 24px 44px; max-width:1420px; width:100%; }
.content-wide{ max-width:none; }

.page-head{ display:flex; align-items:flex-start; gap:16px; margin-bottom:24px; flex-wrap:wrap; }
.page-head .grow{ flex:1; min-width:220px; }
.page-sub{ color:rgb(var(--ink-2)); font-size:13px; margin-top:5px; max-width:76ch; }

/* ============================================================
   Surfaces
   ============================================================ */
.panel{
  background:rgb(var(--panel));
  border:1px solid rgb(var(--line));
  border-radius:9px;
}
.panel-head{
  display:flex; align-items:center; gap:10px;
  padding:13px 16px;
  border-bottom:1px solid rgb(var(--line));
}
.panel-head h2{ font-size:13.5px; }
.panel-head .tools{ margin-left:auto; display:flex; align-items:center; gap:6px; }
.panel-body{ padding:16px; }
.panel-foot{
  padding:11px 16px; border-top:1px solid rgb(var(--line));
  display:flex; align-items:center; gap:10px;
  font-size:12.5px; color:rgb(var(--ink-2));
  background:rgb(var(--sunken));
  border-radius:0 0 8px 8px;
}

/* (Tailwind owns .grid) */
.stack{ display:flex; flex-direction:column; gap:14px; }
.section{ margin-top:34px; }
.section:first-of-type{ margin-top:0; }
.section-head{
  display:flex; align-items:baseline; gap:11px;
  padding-bottom:9px; margin-bottom:16px;
  border-bottom:1px solid rgb(var(--line-2));
}
.section-head h2{ font-size:14px; letter-spacing:-.01em; }
.section-head p{ font-size:12.5px; color:rgb(var(--ink-3)); }
.section-head .tools{ margin-left:auto; display:flex; align-items:center; gap:7px; }
.row{ display:flex; align-items:center; gap:8px; }
.row-wrap{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.spacer{ flex:1; }

/* ---------- KPI ---------- */
.kpi{ padding:16px; display:flex; flex-direction:column; gap:8px; }
.kpi-top{ display:flex; align-items:center; gap:7px; }
.kpi-top .ic{ color:rgb(var(--ink-3)); }
.kpi-label{ font-size:11.5px; font-weight:500; color:rgb(var(--ink-2)); }
.kpi-val{
  font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
  font-size:23px; font-weight:600; letter-spacing:-.03em; line-height:1.1;
}
.kpi-val small{ font-size:13px; font-weight:500; color:rgb(var(--ink-3)); letter-spacing:0; }
.kpi-foot{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:rgb(var(--ink-3)); }

.delta{ display:inline-flex; align-items:center; gap:2px; font-weight:600; font-size:11.5px; font-family:"IBM Plex Mono",monospace; }
.delta.up{ color:rgb(var(--good)); }
.delta.down{ color:rgb(var(--bad)); }
.delta .ic{ width:12px; height:12px; }

/* ---------- pills ---------- */
.pill{
  display:inline-flex; align-items:center; gap:4px;
  height:19px; padding:0 7px;
  border-radius:99px; border:1px solid;
  font-size:11px; font-weight:600; letter-spacing:.005em;
  white-space:nowrap;
}
.pill .ic{ width:11px; height:11px; stroke-width:2.4; }
.pill-good{ color:rgb(var(--good)); background:rgb(var(--good-tint)); border-color:rgb(var(--good) / .28); }
.pill-warn{ color:rgb(var(--warn)); background:rgb(var(--warn-tint)); border-color:rgb(var(--warn) / .28); }
.pill-bad { color:rgb(var(--bad));  background:rgb(var(--bad-tint));  border-color:rgb(var(--bad)  / .28); }
.pill-info{ color:rgb(var(--info)); background:rgb(var(--info-tint)); border-color:rgb(var(--info) / .28); }
.pill-mute{ color:rgb(var(--ink-2)); background:rgb(var(--raised)); border-color:rgb(var(--line-2)); }

.tag{
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:500;
  padding:1px 6px; border-radius:4px;
  border:1px solid rgb(var(--line)); background:rgb(var(--raised)); color:rgb(var(--ink-2));
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:30px; padding:0 11px;
  border:1px solid rgb(var(--line-2)); border-radius:7px;
  background:rgb(var(--panel)); color:rgb(var(--ink));
  font:inherit; font-size:12.5px; font-weight:500;
  cursor:pointer; white-space:nowrap;
  transition:background .12s ease,border-color .12s ease,box-shadow .12s ease;
}
.btn:hover{ background:rgb(var(--raised)); border-color:rgb(var(--line-3)); }
.btn .ic{ color:rgb(var(--ink-2)); }
.btn-primary{
  background:rgb(var(--accent)); border-color:rgb(var(--accent));
  color:rgb(var(--accent-ink)); font-weight:600;
  box-shadow:var(--shadow-1);
}
.btn-primary:hover{ background:rgb(var(--accent-hi)); border-color:rgb(var(--accent-hi)); }
.btn-primary .ic{ color:currentColor; }
.btn-ghost{ background:transparent; border-color:transparent; color:rgb(var(--ink-2)); }
.btn-ghost:hover{ background:rgb(var(--raised)); border-color:transparent; color:rgb(var(--ink)); }
.btn-sm{ height:26px; padding:0 8px; font-size:12px; border-radius:6px; }
.btn-danger{ color:rgb(var(--bad)); border-color:rgb(var(--bad) / .35); background:rgb(var(--bad-tint)); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }

/* ---------- segmented ---------- */
.seg{
  display:inline-flex; padding:2px; gap:2px;
  border:1px solid rgb(var(--line)); border-radius:8px; background:rgb(var(--raised));
}
.seg button{
  height:24px; padding:0 10px; border:0; border-radius:6px;
  background:transparent; color:rgb(var(--ink-2));
  font:inherit; font-size:12px; font-weight:500; cursor:pointer;
  transition:background .12s ease,color .12s ease;
}
.seg button:hover{ color:rgb(var(--ink)); }
.seg button[aria-pressed="true"]{
  background:rgb(var(--bg)); color:rgb(var(--ink)); font-weight:600;
  box-shadow:var(--shadow-1);
}

/* ---------- tabs ---------- */
.tabs{ display:flex; gap:2px; border-bottom:1px solid rgb(var(--line)); overflow-x:auto; }
.tabs button{
  position:relative; border:0; background:none; cursor:pointer;
  font:inherit; font-size:13px; font-weight:500;
  color:rgb(var(--ink-2)); padding:8px 11px 9px;
  white-space:nowrap;
}
.tabs button:hover{ color:rgb(var(--ink)); }
.tabs button[aria-selected="true"]{ color:rgb(var(--ink)); font-weight:600; }
.tabs button[aria-selected="true"]::after{
  content:""; position:absolute; left:8px; right:8px; bottom:-1px; height:2px;
  background:rgb(var(--accent)); border-radius:2px 2px 0 0;
}

/* ---------- inputs ---------- */
.input,.select,.textarea{
  height:30px; padding:0 9px;
  border:1px solid rgb(var(--line-2)); border-radius:7px;
  background:rgb(var(--bg)); color:rgb(var(--ink));
  font:inherit; font-size:12.5px; width:100%;
  transition:border-color .12s ease,box-shadow .12s ease;
}
.textarea{ height:auto; padding:8px 9px; resize:vertical; }
.input::placeholder,.textarea::placeholder{ color:rgb(var(--ink-3)); }
.input:focus,.select:focus,.textarea:focus{
  outline:none; border-color:rgb(var(--accent));
  box-shadow:0 0 0 3px rgb(var(--accent) / .13);
}
.select{
  appearance:none; padding-right:26px; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,rgb(var(--ink-3)) 50%),linear-gradient(135deg,rgb(var(--ink-3)) 50%,transparent 50%);
  background-position:calc(100% - 14px) 13px,calc(100% - 9px) 13px;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.field{ display:flex; flex-direction:column; gap:5px; }
.field > label{ font-size:11.5px; font-weight:600; color:rgb(var(--ink-2)); }
.hint{ font-size:11.5px; color:rgb(var(--ink-3)); }

/* ---------- avatars ---------- */
.av{
  width:26px; height:26px; flex:none; border-radius:99px;
  display:grid; place-items:center;
  font-size:10px; font-weight:700; letter-spacing:.02em;
  color:rgb(var(--ink)); background:rgb(var(--raised));
  border:1px solid rgb(var(--line-2));
  font-family:"IBM Plex Sans",sans-serif;
  overflow:hidden;
}
.av-sm{ width:21px; height:21px; font-size:8.5px; }
.av-lg{ width:34px; height:34px; font-size:12px; }
.av-xl{ width:52px; height:52px; font-size:17px; border-radius:10px; }
.av-stack{ display:flex; }
.av-stack .av{ margin-left:-6px; box-shadow:0 0 0 2px rgb(var(--panel)); border-color:transparent; }
.av-stack .av:first-child{ margin-left:0; }
.av-a{ background:rgb(var(--s1) / .14); color:rgb(var(--s1)); border-color:rgb(var(--s1) / .25); }
.av-b{ background:rgb(var(--s2) / .14); color:rgb(var(--s2)); border-color:rgb(var(--s2) / .25); }
.av-c{ background:rgb(var(--s3) / .14); color:rgb(var(--s3)); border-color:rgb(var(--s3) / .25); }
.av-d{ background:rgb(var(--warn) / .14); color:rgb(var(--warn)); border-color:rgb(var(--warn) / .25); }
.av-e{ background:rgb(var(--info) / .14); color:rgb(var(--info)); border-color:rgb(var(--info) / .25); }

.who{ display:flex; align-items:center; gap:8px; min-width:0; }
.who-name{ font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.who-sub{ font-size:11px; color:rgb(var(--ink-3)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ============================================================
   Tables
   ============================================================ */
.tbl-wrap{ overflow-x:auto; }
table.tbl{ width:100%; border-collapse:separate; border-spacing:0; font-size:12.5px; }
table.tbl th{
  text-align:left; font-weight:600; font-size:10.5px;
  letter-spacing:.07em; text-transform:uppercase;
  color:rgb(var(--ink-3));
  padding:9px 14px;
  background:rgb(var(--sunken));
  border-bottom:1px solid rgb(var(--line));
  white-space:nowrap;
  position:sticky; top:0;
}
table.tbl td{
  padding:11px 14px;
  border-bottom:1px solid rgb(var(--line));
  vertical-align:middle;
}
table.tbl tbody tr:last-child td{ border-bottom:0; }
table.tbl tbody tr{ transition:background .1s ease; }
table.tbl tbody tr:hover{ background:rgb(var(--raised) / .6); }
table.tbl tbody tr.is-link{ cursor:pointer; }
.ta-r{ text-align:right; }
td.mono,th.mono{ white-space:nowrap; }
.ta-c{ text-align:center; }
.w-1{ width:1%; white-space:nowrap; }
td.strong,th.strong{ font-weight:600; color:rgb(var(--ink)); }

/* ---------- meters ---------- */
.meter{ display:block; height:5px; border-radius:99px; background:rgb(var(--raised)); overflow:hidden; border:1px solid rgb(var(--line)); }
.meter > span{ display:block; height:100%; background:rgb(var(--accent)); border-radius:99px; }
.meter.warn > span{ background:rgb(var(--warn)); }
.meter.bad > span{ background:rgb(var(--bad)); }
.meter-lg{ height:7px; }

/* ---------- misc blocks ---------- */
.def{ display:grid; grid-template-columns:118px 1fr; gap:7px 12px; font-size:12.5px; align-items:baseline; }
.def dt{ color:rgb(var(--ink-3)); font-size:11.5px; }
.def dd{ margin:0; font-weight:500; }

.list-rows > *{ border-bottom:1px solid rgb(var(--line)); }
.list-rows > *:last-child{ border-bottom:0; }
.lrow{ display:flex; align-items:center; gap:11px; padding:11px 16px; }
.lrow:hover{ background:rgb(var(--raised) / .55); }

.scope-bar{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; margin-bottom:20px;
  border:1px solid rgb(var(--line)); border-radius:8px;
  background:rgb(var(--sunken));
  font-size:12.5px; color:rgb(var(--ink-2));
}
.scope-bar .ic{ color:rgb(var(--accent)); }
.scope-bar b{ color:rgb(var(--ink)); font-weight:600; }

.note{
  display:flex; gap:9px; padding:10px 12px;
  border:1px solid rgb(var(--line)); border-left:2px solid rgb(var(--accent));
  border-radius:7px; background:rgb(var(--accent-tint) / .5);
  font-size:12.5px; color:rgb(var(--ink-2));
}
.note .ic{ color:rgb(var(--accent)); margin-top:1px; }
.note strong{ color:rgb(var(--ink)); font-weight:600; }
.note-warn{ border-left-color:rgb(var(--warn)); background:rgb(var(--warn-tint) / .5); }
.note-warn .ic{ color:rgb(var(--warn)); }

/* ---------- timeline ---------- */
.tl{ position:relative; padding-left:22px; }
.tl::before{ content:""; position:absolute; left:7px; top:6px; bottom:6px; width:1px; background:rgb(var(--line-2)); }
.tl-item{ position:relative; padding-bottom:15px; }
.tl-item:last-child{ padding-bottom:0; }
.tl-dot{
  position:absolute; left:-19px; top:2px;
  width:15px; height:15px; border-radius:99px;
  background:rgb(var(--panel)); border:1px solid rgb(var(--line-2));
  display:grid; place-items:center; color:rgb(var(--ink-3));
}
.tl-dot .ic{ width:9px; height:9px; stroke-width:2.6; }
.tl-dot.on{ background:rgb(var(--accent)); border-color:rgb(var(--accent)); color:rgb(var(--accent-ink)); }
.tl-dot.warn{ background:rgb(var(--warn-tint)); border-color:rgb(var(--warn) / .4); color:rgb(var(--warn)); }
.tl-t{ font-size:12.5px; font-weight:500; }
.tl-m{ font-size:11.5px; color:rgb(var(--ink-3)); margin-top:1px; }

/* ---------- kanban ---------- */
.board{ display:flex; gap:12px; overflow-x:auto; padding-bottom:6px; align-items:flex-start; }
.col{ width:274px; flex:none; background:rgb(var(--sunken)); border:1px solid rgb(var(--line)); border-radius:9px; }
.col-head{ display:flex; align-items:center; gap:7px; padding:9px 11px; border-bottom:1px solid rgb(var(--line)); }
.col-head .eyebrow{ letter-spacing:.07em; }
.col-body{ padding:9px; display:flex; flex-direction:column; gap:8px; }
.card{
  background:rgb(var(--panel)); border:1px solid rgb(var(--line));
  border-radius:7px; padding:10px; cursor:grab;
  transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease;
}
.card:hover{ border-color:rgb(var(--line-3)); box-shadow:var(--shadow-2); transform:translateY(-1px); }
.card-title{ font-size:12.5px; font-weight:600; line-height:1.35; }
.card-meta{ display:flex; align-items:center; gap:7px; margin-top:8px; font-size:11px; color:rgb(var(--ink-3)); }

/* ---------- chat ---------- */
.chat{ display:grid; grid-template-columns:216px 1fr 250px; height:calc(100vh - 57px); }
.chat-pane{ border-right:1px solid rgb(var(--line)); display:flex; flex-direction:column; min-height:0; }
.chat-scroll{ flex:1; overflow-y:auto; }
.msg{ display:flex; gap:9px; padding:7px 16px; }
.msg:hover{ background:rgb(var(--raised) / .5); }
.msg-head{ display:flex; align-items:baseline; gap:7px; }
.msg-name{ font-weight:600; font-size:12.5px; }
.msg-time{ font-size:10.5px; color:rgb(var(--ink-3)); font-family:"IBM Plex Mono",monospace; }
.msg-body{ font-size:13px; color:rgb(var(--ink-2)); margin-top:1px; }
.msg-body strong{ color:rgb(var(--ink)); font-weight:600; }
.chan{ display:flex; align-items:center; gap:7px; padding:5px 9px; border-radius:6px; font-size:12.5px; color:rgb(var(--ink-2)); }
.chan:hover{ background:rgb(var(--raised)); color:rgb(var(--ink)); }
.chan.active{ background:rgb(var(--accent-tint)); color:rgb(var(--ink)); font-weight:600; }
.chan .ic{ color:rgb(var(--ink-3)); }
.chan.active .ic{ color:rgb(var(--accent)); }
.unread{ margin-left:auto; font-size:10px; font-weight:700; background:rgb(var(--accent)); color:rgb(var(--accent-ink)); border-radius:99px; padding:0 5px; line-height:15px; font-family:"IBM Plex Mono",monospace; }

/* ---------- charts ---------- */
.chart{ width:100%; display:block; overflow:visible; }
.chart text{ font-family:"IBM Plex Mono",monospace; font-size:9.5px; fill:rgb(var(--ink-3)); font-variant-numeric:tabular-nums; }
.chart .grid-line{ stroke:rgb(var(--line)); stroke-width:1; }
.chart .axis{ stroke:rgb(var(--line-2)); stroke-width:1; }
.legend{ display:flex; align-items:center; gap:13px; flex-wrap:wrap; font-size:11.5px; color:rgb(var(--ink-2)); }
.legend i{ width:8px; height:8px; border-radius:2px; display:inline-block; margin-right:5px; vertical-align:-.02em; }

/* ---------- calendar ---------- */
.cal{ display:grid; grid-template-columns:repeat(7,1fr); border-left:1px solid rgb(var(--line)); border-top:1px solid rgb(var(--line)); }
.cal > div{ border-right:1px solid rgb(var(--line)); border-bottom:1px solid rgb(var(--line)); min-height:92px; padding:6px; }
.cal .cal-h{ min-height:0; padding:6px; background:rgb(var(--sunken)); text-align:center; }
.cal-day{ font-size:11px; font-family:"IBM Plex Mono",monospace; color:rgb(var(--ink-3)); }
.cal-ev{
  font-size:10.5px; padding:2px 5px; border-radius:4px; margin-top:4px;
  background:rgb(var(--accent-tint)); color:rgb(var(--accent));
  border:1px solid rgb(var(--accent) / .25);
  font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cal-ev.b{ background:rgb(var(--info-tint)); color:rgb(var(--info)); border-color:rgb(var(--info) / .25); }
.cal-ev.c{ background:rgb(var(--warn-tint)); color:rgb(var(--warn)); border-color:rgb(var(--warn) / .25); }
.cal-off{ background:rgb(var(--sunken)); }

/* ---------- attendance grid ---------- */
.att{ display:flex; gap:2px; }
.att i{ width:11px; height:17px; border-radius:2px; background:rgb(var(--raised)); border:1px solid rgb(var(--line)); display:block; }
.att i.p{ background:rgb(var(--accent) / .75); border-color:rgb(var(--accent)); }
.att i.l{ background:rgb(var(--warn) / .65); border-color:rgb(var(--warn)); }
.att i.a{ background:rgb(var(--bad) / .55); border-color:rgb(var(--bad)); }
.att i.o{ background:rgb(var(--raised)); }

/* ---------- integration tiles ---------- */
.integ{ display:flex; align-items:center; gap:10px; padding:11px 12px; }
.integ-mark{
  width:32px; height:32px; border-radius:7px; flex:none;
  display:grid; place-items:center;
  border:1px solid rgb(var(--line)); background:rgb(var(--bg));
}
.integ-mark svg{ width:16px; height:16px; }

/* ---------- utility ---------- */
.hr{ height:1px; background:rgb(var(--line)); border:0; margin:0; }
.nw{ white-space:nowrap; }
.trunc{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

@media (max-width:1180px){
  .content{ padding:20px 16px 36px; }
  /* rail is a drawer on small screens — see the responsive block */
  .chat{ grid-template-columns:200px 1fr; }
  .chat-aside{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ============================================================
   Refinement layer — depth, accent presence, launcher
   Appended: overrides the base rules above by source order.
   Everything stays token-driven so dark mode follows for free.
   ============================================================ */
:root{
  --panel:         255 255 255;
  --raised:        242 245 250;
  --sunken:        247 249 252;

  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 14px;
  --r-xl: 18px;

  /* softer, wider, colour-tinted elevation */
  --shadow-1: 0 1px 2px rgb(15 27 50 / .06);
  --shadow-2: 0 2px 4px -1px rgb(15 27 50 / .07), 0 10px 22px -8px rgb(15 27 50 / .13);
  --shadow-3: 0 4px 10px -2px rgb(15 27 50 / .09), 0 26px 56px -18px rgb(15 27 50 / .20);
  --ring-accent: 0 0 0 3px rgb(var(--accent) / .14);

  /* module tones */
  --t-green:  16 139  92;
  --t-blue:   37 108 200;
  --t-violet:124  78 196;
  --t-amber: 176 116  22;
  --t-rose:  190  60  76;
  --t-teal:   13 134 132;
  --t-indigo: 79  86 196;
  --t-slate:  90 102  96;
}
:root.dark{
  --panel:          16  19  26;
  --raised:         25  30  40;
  --sunken:         12  15  21;

  --shadow-1: 0 1px 2px rgb(0 0 0 / .55);
  --shadow-2: 0 2px 4px -1px rgb(0 0 0 / .5), 0 10px 22px -8px rgb(0 0 0 / .7);
  --shadow-3: 0 4px 10px -2px rgb(0 0 0 / .55), 0 26px 56px -18px rgb(0 0 0 / .8);
  --ring-accent: 0 0 0 3px rgb(var(--accent) / .22);

  --t-green:  52 189 129;
  --t-blue:   96 156 240;
  --t-violet:170 132 240;
  --t-amber: 224 168  76;
  --t-rose:  238 120 132;
  --t-teal:   60 190 186;
  --t-indigo:138 144 240;
  --t-slate: 150 162 156;
}

body{ background:rgb(var(--sunken)); }
h1{ font-size:26px; }

/* ---------- rail: gradient ground, glow on active ---------- */
.rail{
  background:linear-gradient(180deg, rgb(var(--rail-bg)) 0%, rgb(6 6 7) 100%);
}
.nav-item{ border-radius:var(--r-sm); transition:background .14s ease,color .14s ease; }
.nav-item.active{
  background:linear-gradient(90deg, rgb(var(--accent-hi) / .20), rgb(var(--accent-hi) / .07));
  box-shadow:inset 0 0 0 1px rgb(var(--accent-hi) / .18);
}
.nav-item.active::before{ box-shadow:0 0 10px 1px rgb(var(--accent-hi) / .7); }
.brand-mark{
  background:linear-gradient(145deg, rgb(var(--accent-hi)), rgb(var(--accent)));
  box-shadow:0 3px 10px -2px rgb(var(--accent-hi) / .55);
  border-radius:8px;
}

/* ---------- topbar ---------- */
.topbar{
  background:rgb(var(--bg) / .82);
  backdrop-filter:blur(14px) saturate(1.6);
  box-shadow:0 1px 0 rgb(var(--line)), 0 6px 20px -18px rgb(15 27 50 / .5);
  border-bottom:0;
}
.searchbox{ border-radius:var(--r-sm); height:32px; }
.searchbox:hover{ border-color:rgb(var(--accent) / .45); box-shadow:var(--ring-accent); }
.icon-btn{ border-radius:var(--r-sm); height:32px; width:32px; }
.icon-btn:hover{ border-color:rgb(var(--accent) / .4); color:rgb(var(--accent)); }

.content{ padding:30px 28px 60px; }

/* ---------- surfaces ---------- */
.panel{
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);
  transition:box-shadow .16s ease, border-color .16s ease, transform .16s ease;
}
.panel-foot{ border-radius:0 0 var(--r-lg) var(--r-lg); }
.col,.card{ border-radius:var(--r-md); }
.card:hover{ box-shadow:var(--shadow-2); }

.section-head{ border-bottom-color:rgb(var(--line)); padding-bottom:11px; margin-bottom:18px; }
.section-head h2{ font-size:15px; }

/* ---------- KPI: icon chip, bigger figure, lift ---------- */
.kpi{ padding:18px; gap:9px; position:relative; overflow:hidden; }
.kpi::after{
  content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg, rgb(var(--accent) / .8), rgb(var(--accent) / 0));
  opacity:0; transition:opacity .18s ease;
}
.kpi:hover{ box-shadow:var(--shadow-2); transform:translateY(-2px); }
.kpi:hover::after{ opacity:1; }
.kpi-top{ gap:9px; }
.kpi-top .ic{
  color:rgb(var(--accent));
  width:26px; height:26px; padding:5px; border-radius:7px;
  background:rgb(var(--accent) / .10);
  box-sizing:content-box; flex:none;
}
.kpi-label{ font-size:12px; font-weight:600; color:rgb(var(--ink-2)); }
.kpi-val{ font-size:27px; letter-spacing:-.035em; }

/* ---------- buttons ---------- */
.btn{ border-radius:var(--r-sm); height:32px; padding:0 13px; }
.btn:hover{ box-shadow:var(--shadow-1); }
.btn-primary{
  background:linear-gradient(180deg, rgb(var(--accent-hi)), rgb(var(--accent)));
  border-color:rgb(var(--accent));
  box-shadow:0 1px 2px rgb(15 27 50 / .18), 0 6px 16px -6px rgb(var(--accent) / .65);
}
.btn-primary:hover{
  background:linear-gradient(180deg, rgb(var(--accent-hi)), rgb(var(--accent-hi)));
  box-shadow:0 1px 2px rgb(15 27 50 / .2), 0 10px 22px -6px rgb(var(--accent) / .8);
  transform:translateY(-1px);
}
.btn-sm{ height:28px; border-radius:7px; }
.seg{ border-radius:var(--r-sm); }
.seg button{ border-radius:6px; }
.input,.select,.textarea{ height:34px; border-radius:var(--r-sm); border-color:rgb(var(--line-2)); }
.input:focus,.select:focus,.textarea:focus{ box-shadow:var(--ring-accent); }
.pill{ height:20px; }

/* ---------- tables ---------- */
table.tbl th{ background:rgb(var(--sunken)); padding:10px 16px; }
table.tbl td{ padding:13px 16px; }
table.tbl tbody tr:hover{ background:rgb(var(--accent) / .045); }
.meter > span{ background:linear-gradient(90deg, rgb(var(--accent)), rgb(var(--accent-hi))); }

/* ============================================================
   Launcher — hero + module grid
   ============================================================ */
.hero{
  display:flex; flex-wrap:wrap; gap:40px; align-items:center; justify-content:space-between;
  padding:30px 40px; margin-bottom:34px;
  border:1px solid rgb(var(--line));
  border-radius:var(--r-xl);
  background:
    radial-gradient(120% 160% at 0% 0%, rgb(var(--accent) / .09) 0%, rgb(var(--accent) / 0) 55%),
    rgb(var(--panel));
  box-shadow:var(--shadow-2);
}
.hero-copy{ min-width:280px; flex:1; }
.hero-copy h1{ margin-top:6px; font-size:30px; letter-spacing:-.03em; }
.hero-copy h1 span{
  background:linear-gradient(90deg, rgb(var(--accent)), rgb(var(--accent-hi)));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-stats{
  display:grid; grid-template-columns:repeat(2,minmax(128px,1fr)); gap:1px;
  background:rgb(var(--line)); border:1px solid rgb(var(--line));
  border-radius:var(--r-md); overflow:hidden;
}
@media (min-width:1100px){ .hero-stats{ grid-template-columns:repeat(4,minmax(122px,1fr)); } }
.hstat{
  display:flex; flex-direction:column; gap:6px; align-items:flex-start;
  padding:14px 16px; background:rgb(var(--panel));
}
.hstat .kpi-val{ font-size:21px; }
.hstat .meter{ width:100%; }

.mod-grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill, minmax(196px, 1fr));
}
.mod{
  display:flex; flex-direction:column; gap:4px;
  padding:18px;
  background:rgb(var(--panel));
  border:1px solid rgb(var(--line));
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);
  position:relative; overflow:hidden;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.mod::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(160deg, rgb(var(--tone) / .08), rgb(var(--tone) / 0) 58%);
  opacity:0; transition:opacity .18s ease;
}
.mod:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-2);
  border-color:rgb(var(--tone) / .38);
}
.mod:hover::before{ opacity:1; }
.mod-ic{
  width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center; margin-bottom:12px;
  color:#fff;
  background:linear-gradient(145deg, rgb(var(--tone)), rgb(var(--tone) / .78));
  box-shadow:0 5px 14px -5px rgb(var(--tone) / .8);
  position:relative;
}
.mod-name{ font-size:13.5px; font-weight:600; color:rgb(var(--ink)); position:relative; }
.mod-meta{ font-size:11.5px; color:rgb(var(--ink-3)); position:relative; }

.t-green { --tone: var(--t-green);  }
.t-blue  { --tone: var(--t-blue);   }
.t-violet{ --tone: var(--t-violet); }
.t-amber { --tone: var(--t-amber);  }
.t-rose  { --tone: var(--t-rose);   }
.t-teal  { --tone: var(--t-teal);   }
.t-indigo{ --tone: var(--t-indigo); }
.t-slate { --tone: var(--t-slate);  }

@media (max-width:1180px){
  .content{ padding:22px 16px 40px; }
  .hero{ padding:22px; border-radius:var(--r-lg); }
  .hero-copy h1{ font-size:25px; }
}

/* ---------- popover rows ---------- */
.ks-row{ color:inherit; transition:background .12s ease; }
.ks-row:last-of-type{ border-bottom:0 !important; }
.ks-row:hover{ background:rgb(var(--accent) / .07); }

/* ============================================================
   Rail corner — brand lockup + "viewing as" switcher
   Kept at 57px so the brand row stays flush with the topbar.
   ============================================================ */
.rail-brand{
  padding:0 14px;
  border-bottom:0;
  background:linear-gradient(180deg, rgb(255 255 255 / .05), rgb(255 255 255 / 0));
  position:relative;
}
/* hairline that fades out, instead of a hard rule */
.rail-brand::after{
  content:""; position:absolute; left:14px; right:14px; bottom:0; height:1px;
  background:linear-gradient(90deg, rgb(var(--accent-hi) / .45), rgb(var(--rail-line)) 55%, transparent);
}
.brand-mark{
  width:30px; height:30px; border-radius:9px;
  background:linear-gradient(145deg, rgb(var(--accent-hi)), rgb(var(--accent)));
  box-shadow:0 4px 12px -3px rgb(var(--accent) / .55),
             inset 0 1px 0 rgb(255 255 255 / .3);
  color:#fff;
}
.brand-name{ font-size:15px; letter-spacing:-.025em; }

/* LIVE reads as a status, not a label */
.brand-env{
  display:inline-flex; align-items:center; gap:5px;
  font-size:9px; letter-spacing:.1em;
  padding:3px 7px 3px 6px; border-radius:99px;
  color:rgb(var(--accent-hi));
  background:rgb(var(--accent-hi) / .12);
  border-color:rgb(var(--accent-hi) / .3);
}
.brand-env::before{
  content:""; width:5px; height:5px; border-radius:99px; flex:none;
  background:rgb(var(--accent-hi));
  animation:ks-pulse 2.4s ease-out infinite;
}
@keyframes ks-pulse{
  0%  { box-shadow:0 0 0 0 rgb(var(--accent-hi) / .55); }
  70% { box-shadow:0 0 0 5px rgb(var(--accent-hi) / 0); }
  100%{ box-shadow:0 0 0 0 rgb(var(--accent-hi) / 0); }
}

/* role switcher: raised card with an accent edge */
.role-box{
  margin:0 0 18px;
  padding:12px 12px 13px;
  border-radius:11px;
  border-color:rgb(255 255 255 / .08);
  background:linear-gradient(160deg, rgb(255 255 255 / .06), rgb(255 255 255 / .02));
  position:relative; overflow:hidden;
}
.role-box::before{
  content:""; position:absolute; left:0; top:12px; bottom:12px; width:2px;
  border-radius:0 2px 2px 0;
  background:linear-gradient(180deg, rgb(var(--accent-hi)), rgb(var(--accent-hi) / .15));
}
.role-box .eyebrow{ font-size:9.5px; letter-spacing:.11em; margin-bottom:7px; }
.role-sel{
  height:32px; border-radius:8px;
  padding:0 26px 0 9px;
  background-color:rgb(var(--rail-bg) / .85);
  border-color:rgb(255 255 255 / .1);
  font-size:12.5px; font-weight:600;
  background-position:calc(100% - 14px) 14px, calc(100% - 9px) 14px;
  transition:border-color .14s ease, background-color .14s ease;
}
.role-sel:hover{
  border-color:rgb(var(--accent-hi) / .45);
  background-color:rgb(var(--rail-bg));
}
.role-sel:focus-visible{ outline-color:rgb(var(--accent-hi)); }
.role-scope{ margin-top:9px; font-size:10.8px; line-height:1.5; }

/* ============================================================
   Role switcher — custom animated listbox
   ============================================================ */
.role-box{ overflow:visible; }
.role-drop{ position:relative; z-index:60; }

.role-trigger{
  display:flex; align-items:center; gap:9px; width:100%;
  padding:7px 8px;
  border:1px solid rgb(255 255 255 / .1); border-radius:9px;
  background:rgb(var(--rail-bg) / .85);
  color:rgb(var(--rail-ink)); font:inherit; text-align:left; cursor:pointer;
  transition:border-color .15s ease, background-color .15s ease;
}
.role-trigger:hover{ border-color:rgb(var(--accent-hi) / .45); background-color:rgb(var(--rail-hov)); }
.role-trigger .av{ background:rgb(var(--accent-hi) / .16); color:rgb(var(--accent-hi)); border-color:rgb(var(--accent-hi) / .32); }
.role-tx{ min-width:0; flex:1; display:block; }
.role-tx-1{ display:block; font-size:12px; font-weight:600; line-height:1.25;
  color:rgb(var(--rail-ink)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.role-tx-2{ display:block; font-size:10.5px; line-height:1.3;
  color:rgb(var(--rail-ink3)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.role-caret{ flex:none; color:rgb(var(--rail-ink3));
  transition:transform .2s cubic-bezier(.2,.9,.3,1), color .15s ease; }
.role-box.open .role-caret{ transform:rotate(180deg); color:rgb(var(--accent-hi)); }

.role-menu{
  position:absolute; left:-13px; right:-13px; top:calc(100% + 6px);
  padding:5px;
  border:1px solid rgb(255 255 255 / .11); border-radius:12px;
  background:rgb(20 21 25);
  box-shadow:0 20px 44px -14px rgb(0 0 0 / .85);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(-8px) scale(.96); transform-origin:top center;
  transition:opacity .16s ease, transform .2s cubic-bezier(.2,.9,.3,1), visibility 0s .2s;
}
.role-box.open .role-menu{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateY(0) scale(1);
  transition:opacity .16s ease, transform .2s cubic-bezier(.2,.9,.3,1), visibility 0s;
}

.role-opt{
  display:flex; align-items:center; gap:9px; width:100%;
  padding:7px; border:0; border-radius:8px;
  background:none; color:inherit; font:inherit; text-align:left; cursor:pointer;
  transition:background .13s ease;
}
.role-box.open .role-opt{
  animation:ks-opt-in .26s cubic-bezier(.2,.9,.3,1) backwards;
  animation-delay:calc(var(--i) * 28ms);
}
@keyframes ks-opt-in{
  from{ opacity:0; transform:translateY(-6px); }
  to  { opacity:1; transform:none; }
}
.role-opt:hover{ background:rgb(255 255 255 / .07); }
.role-opt.on{ background:rgb(var(--accent-hi) / .12); }
.role-opt .av{ background:rgb(var(--tone) / .2); color:rgb(var(--tone)); border-color:rgb(var(--tone) / .38); }
.role-tick{ flex:none; margin-left:auto; color:rgb(var(--accent-hi)); }

/* ============================================================
   Kanban drag and drop
   ============================================================ */
.board .card{ user-select:none; }
.board .card:active{ cursor:grabbing; }
.card.is-dragging{
  opacity:.5; cursor:grabbing;
  box-shadow:var(--shadow-2);
  transform:rotate(1.5deg);
}
.col.drop-on{
  border-color:rgb(var(--accent) / .5);
  background:rgb(var(--accent) / .05);
}
.col.drop-on .col-body{
  outline:1px dashed rgb(var(--accent) / .45);
  outline-offset:-4px; border-radius:9px;
}

/* money figures should never wrap between symbol and amount */
td.num, th.num, .kpi-val, .card-meta .num{ white-space:nowrap; }

/* ============================================================
   Completed actions, running timers
   ============================================================ */
.btn.is-done{
  opacity:1; cursor:default;
  color:rgb(var(--good)); border-color:rgb(var(--good) / .35);
  background:rgb(var(--good-tint));
}
.btn.is-done .ic{ color:rgb(var(--good)); }
.btn:disabled.is-done{ opacity:1; }
.btn.is-running{ color:rgb(var(--accent)); border-color:rgb(var(--accent) / .45); background:rgb(var(--accent) / .08); }
.btn.is-running .ic{ color:rgb(var(--accent)); }
[data-timer-out]{ font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; }
[data-timer-out].is-running{ color:rgb(var(--accent)); font-weight:600; }

/* ============================================================
   Responsive — tablet and phone
   The rail becomes an off-canvas drawer; every grid collapses;
   wide content scrolls inside its own container, never the page.
   ============================================================ */

.nav-toggle{ display:none; }
.nav-scrim{
  position:fixed; inset:0; z-index:110;
  background:rgb(6 10 16 / .5);
  opacity:0; visibility:hidden;
  transition:opacity .2s ease, visibility 0s .2s;
}

/* nothing may push the page sideways */
html, body{ max-width:100%; }
.main{ min-width:0; }
.tbl-wrap{ -webkit-overflow-scrolling:touch; }

@media (max-width:1180px){
  /* ---- rail as a drawer ---- */
  .rail{
    display:flex;
    position:fixed; top:0; left:0; bottom:0;
    width:272px; height:100%;
    z-index:120;
    transform:translateX(-100%);
    transition:transform .24s cubic-bezier(.2,.9,.3,1);
    box-shadow:0 0 40px -8px rgb(0 0 0 / .5);
  }
  body.nav-open .rail{ transform:none; }
  body.nav-open .nav-scrim{ opacity:1; visibility:visible; transition:opacity .2s ease; }
  body.nav-open{ overflow:hidden; }

  .nav-toggle{ display:grid; flex:none; }
  .topbar{ padding:0 14px; gap:10px; }
  .content{ padding:20px 14px 44px; }
}

@media (max-width:900px){
  /* ---- topbar compresses to icons ---- */
  .searchbox{ width:auto; padding:0 9px; }
  .searchbox span:not(.kbd){ display:none; }
  .searchbox .kbd{ display:none; }
  .crumbs{ font-size:12.5px; }
  .crumbs span:not(:last-child), .crumbs .ic{ display:none; }
  .crumbs b{ font-size:13px; }

  /* ---- headings and page furniture ---- */
  h1{ font-size:21px; }
  .page-head{ gap:12px; margin-bottom:18px; }
  .page-sub{ font-size:12.5px; }
  .section{ margin-top:26px; }
  .section-head{ flex-wrap:wrap; gap:6px 10px; }
  .section-head .tools{ margin-left:0; width:100%; }

  /* ---- panels ---- */
  .panel-head{ flex-wrap:wrap; gap:8px; padding:12px 14px; }
  .panel-head .tools{ margin-left:0; width:100%; flex-wrap:wrap; }
  .panel-head .tools .select,
  .panel-head .tools .input{ flex:1 1 140px; width:auto; min-width:0; }
  .panel-body{ padding:14px; }
  .panel-foot{ flex-wrap:wrap; gap:8px; padding:11px 14px; }
  .panel-foot .spacer{ display:none; }

  /* ---- forms ---- */
  .field > label{ font-size:12px; }
  .input, .select, .textarea{ font-size:16px; }   /* 16px stops iOS zooming on focus */
  .btn{ height:34px; }
  .btn-sm{ height:30px; }
  .icon-btn{ width:34px; height:34px; }

  /* ---- tables: scroll inside the panel, tighter cells ---- */
  table.tbl{ font-size:12px; }
  table.tbl th{ padding:9px 12px; }
  table.tbl td{ padding:11px 12px; }
  table.tbl th, table.tbl td{ white-space:nowrap; }
  .tbl-wrap{ overflow-x:auto; }

  /* ---- kanban ---- */
  .board{ gap:10px; }
  .col{ width:250px; }

  /* ---- launcher ---- */
  .hero{ padding:20px; gap:18px; }
  .hero-copy h1{ font-size:23px; }
  .hero-stats{ width:100%; grid-template-columns:repeat(2,1fr); }
  .mod-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
  .mod{ padding:14px; }
  .mod-ic{ width:38px; height:38px; border-radius:10px; margin-bottom:9px; }

  /* ---- chat: channels shrink to a strip above the thread ---- */
  .chat{ grid-template-columns:1fr; height:auto; min-height:calc(100vh - 57px); }
  .chat-aside{ display:none; }
  .chat > .chat-pane:first-child{
    border-right:0; border-bottom:1px solid rgb(var(--line));
    max-height:140px;
  }

  /* ---- definition lists and timelines ---- */
  .def{ grid-template-columns:104px 1fr; gap:6px 10px; }
  .lrow{ flex-wrap:wrap; gap:8px; padding:11px 14px; }
  .cal > div{ min-height:70px; }
}

@media (max-width:640px){
  .content{ padding:16px 12px 40px; }
  .topbar{ padding:0 10px; gap:8px; }
  h1{ font-size:19px; }

  /* one column for anything the utility grid left at two */
  .grid.grid-cols-2{ grid-template-columns:1fr; }
  .hero{ padding:16px; border-radius:var(--r-md); }
  .hero-copy h1{ font-size:21px; }
  .hero-stats{ grid-template-columns:1fr 1fr; }
  .kpi{ padding:14px; }
  .kpi-val{ font-size:23px; }

  .seg{ width:100%; }
  .seg button{ flex:1; }
  .row-wrap{ width:100%; }
  .row-wrap > .btn{ flex:1 1 auto; }

  /* dialogs go near full-screen */
  #ks-targets, #ks-newrow{ padding:10px !important; align-items:flex-end !important; }
  #ks-targets > div, #ks-newrow > div{ width:100% !important; max-height:92vh !important; }
  #ks-palette{ padding:10px !important; padding-top:8vh !important; }
  #ks-targets .row{ flex-wrap:wrap; gap:6px !important; }
  #ks-targets .row > span:first-child{ flex:1 1 100%; }
  #ks-targets .row > span{ font-size:12px; }
  #ks-targets .row input{ width:100% !important; text-align:left !important; }
  #ks-targets .eyebrow{ display:none; }

  /* popovers may not exceed the screen */
  [role="dialog"][data-for]{ width:calc(100vw - 20px) !important; }

  .av-xl{ width:44px; height:44px; font-size:15px; }
  .board{ margin:0 -12px; padding:0 12px 6px; }
  .col{ width:230px; }
}

@media (max-width:420px){
  .hero-stats{ grid-template-columns:1fr; }
  .mod-grid{ grid-template-columns:1fr 1fr; }
  .def{ grid-template-columns:1fr; }
  .def dt{ margin-top:6px; }
}

/* pointer-coarse devices get roomier hit areas regardless of width */
@media (hover:none) and (pointer:coarse){
  .nav-item{ padding:9px; }
  .role-opt{ padding:9px 8px; }
  .tabs button{ padding:10px 12px; }
  table.tbl tbody tr.is-link td{ padding-top:13px; padding-bottom:13px; }
}

/* grid and flex children must be allowed to shrink, or wide tables push the page */
.panel{ min-width:0; }
.grid > *{ min-width:0; }
.tbl-wrap{ max-width:100%; }
.chat-pane{ min-width:0; }
@media (max-width:900px){
  .chat{ grid-template-columns:minmax(0,1fr); }
  .chat-pane{ max-width:100%; }
}

/* wide calendars scroll inside their panel */
.cal-scroll{ overflow-x:auto; max-width:100%; }
@media (max-width:900px){
  .cal-scroll .cal{ min-width:560px; }
  /* chat composer: let the action row wrap rather than push the page */
  .chat .row{ flex-wrap:wrap; }
  .chat [data-composer]{ width:100%; min-width:0; }
  .pill{ max-width:100%; height:auto; white-space:normal; }
  .lrow > *{ min-width:0; }
}

/* final guard: content may scroll inside its own box, never the page.
   clip (not hidden) keeps the sticky topbar working. */
.main{ overflow-x:clip; }
@media (max-width:900px){
  .chat .spacer{ display:none; }
  .chat .row{ flex-wrap:wrap; gap:8px; }
  .chat .row .btn{ margin-left:auto; }
  .panel-foot > span{ min-width:0; }
}

/* flex children must shrink so long labels wrap instead of escaping */
@media (max-width:900px){
  .row > *, .row-wrap > *{ min-width:0; }
  .who-sub, .kpi-foot, .card-meta{ white-space:normal; }
  .who-name{ white-space:normal; }
  .panel-head h2{ min-width:0; }
}

/* Dark mode: the accent is a light tint, so a primary button filled with it
   reads washed out. Use a saturated blue with white text instead. */
:root.dark .btn-primary{
  background:linear-gradient(180deg, rgb(59 118 232), rgb(37 92 208));
  border-color:rgb(37 92 208);
  color:#fff;
  box-shadow:0 1px 2px rgb(0 0 0 / .45), 0 6px 16px -6px rgb(37 92 208 / .8);
}
:root.dark .btn-primary:hover{
  background:linear-gradient(180deg, rgb(74 132 244), rgb(48 104 224));
  border-color:rgb(48 104 224);
  box-shadow:0 1px 2px rgb(0 0 0 / .5), 0 10px 22px -6px rgb(48 104 224 / .95);
}
:root.dark .btn-primary .ic{ color:#fff; }
:root.dark .unread{ background:rgb(37 92 208); color:#fff; }