/* ==================================================================
   Achieve AI Intranet — Chromatic Ethos
   Primary #FF4500 · Secondary #9F7DFF · Text #2D1559 · Highlight #DDFF7D
   Depth comes from tonal layers and 1px indigo-tinted outlines.
   Shadows are reserved for floating overlays only.
   ================================================================== */
:root{
  --ink:#2D1559;
  --ink-80:rgba(45,21,89,.80);
  --ink-60:rgba(45,21,89,.60);
  --ink-45:rgba(45,21,89,.45);
  --line:rgba(45,21,89,.10);
  --line-strong:rgba(45,21,89,.20);
  --line-faint:rgba(45,21,89,.05);

  --primary:#FF4500; --primary-dim:#E63E00; --on-primary:#fff;
  --secondary:#9F7DFF; --secondary-dim:#8A62F5;
  --lime:#DDFF7D; --lime-ink:#3B4D00;

  --peach:#FFF1EB; --lavender:#F0EBFF;
  --surface:#FEF7FF; --white:#fff;
  --pr-low:#FFE9E0;
  /* One-off sessions. Blue reads as "different kind of thing" against a
     palette that is otherwise orange and purple, without competing with
     the orange used for things that need attention. */
  --one:#3E8FD6; --one-bg:#E7F2FC; --one-ink:#1D5C93;
  --sc-low:#F9F1FF; --sc:#F4EAFF; --sc-high:#EFE3FF; --sc-highest:#EADDFF;

  --ok:#10B981; --ok-bg:#E9F9F3; --ok-ink:#0A6E4E;
  --warn:#FF4500; --warn-bg:#FFEDE6; --warn-ink:#A32C00;
  --err:#BA1A1A; --err-bg:#FFDAD6; --err-ink:#93000A;

  --r:.25rem; --r-lg:.5rem; --r-xl:.75rem;
  --shadow:0 12px 32px rgba(159,125,255,.16), 0 2px 8px rgba(45,21,89,.06);
  --shadow-soft:0 8px 24px rgba(159,125,255,.10);
  --nav-w:248px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--peach); color:var(--ink); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{margin:0;font-family:'Bitter',Georgia,serif;font-weight:600;color:var(--ink);letter-spacing:-.01em}
h1{letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;color:inherit}
::selection{background:var(--lime);color:var(--ink)}

/* ---------------------------- layout ---------------------------- */
.app{display:flex;min-height:100vh}
aside.nav{width:var(--nav-w);flex:none;background:var(--lavender);border-right:1px solid var(--line);
  position:fixed;left:0;top:0;height:100vh;display:flex;flex-direction:column;padding:24px 0;z-index:40}
.logo{display:flex;align-items:center;gap:11px;padding:0 20px 26px}
.logo-tile{width:38px;height:38px;border-radius:var(--r);background:var(--primary);color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;font-family:'Bitter',serif;font-weight:700;font-size:19px}
.logo b,.gatelogo b{font-family:'Bitter',serif;font-size:16px;font-weight:700;color:var(--primary);display:block;line-height:1.2}
.logo span span,.gatelogo span span{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-45);font-weight:600}
.navlist{padding:0 12px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1}
.navlist a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r);
  font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--ink-80);transition:background .12s,color .12s}
.navlist a:hover{background:var(--sc)}
.navlist a[aria-current="true"]{background:var(--secondary);color:#fff}
.ic{width:18px;height:18px;flex:none;opacity:.8}
.navfoot{padding:16px 12px 0;margin:0 12px;border-top:1px solid var(--line)}
.who{margin-bottom:10px}
.whocard{background:var(--sc);border-radius:var(--r);padding:10px 12px}
.whocard b{font-size:13px;display:block;line-height:1.3}
.whocard span{font-size:11px;color:var(--ink-45)}
.main{flex:1;margin-left:var(--nav-w);min-width:0;display:flex;flex-direction:column}
header.top{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.top-in{padding:14px 40px;display:flex;align-items:center;gap:18px}
.top h1{font-size:26px;line-height:1.2;flex:none}
.searchbox{flex:1;max-width:460px;position:relative;margin-left:auto}
.searchbox input{width:100%;padding:9px 14px 9px 42px;border:1px solid var(--line-strong);border-radius:999px;
  background:#fff;font:inherit;font-size:14px;color:var(--ink);text-overflow:ellipsis}
.searchbox input::placeholder{color:var(--ink-45)}
.searchbox svg{position:absolute;left:16px;top:11px;opacity:.45;pointer-events:none}
.content{padding:32px 40px 80px;max-width:1360px;width:100%}
.mobilebar{display:none}
.brandname{color:var(--primary)}

/* ------------------------- primitives --------------------------- */
.card{background:var(--white);border-radius:var(--r-xl);border:1px solid var(--line);transition:border-color .14s,box-shadow .14s}
.card.pad{padding:22px}
.card-h{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;
  align-items:center;gap:12px;flex-wrap:wrap}
.card-h h3{font-size:16px}
.grid{display:grid;gap:20px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.mute{color:var(--ink-45)}
.sm{font-size:13px} .xs{font-size:12px}
.lbl{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-60)}
.serif{font-family:'Bitter',serif}

.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:12px;
  font-weight:600;background:var(--sc);color:var(--ink);white-space:nowrap;line-height:1.5}
.chip.ok{background:var(--lime);color:var(--lime-ink)}
.chip.warn{background:var(--warn-bg);color:var(--warn-ink)}
.chip.err{background:var(--err-bg);color:var(--err-ink)}
.chip.act{background:var(--secondary);color:#fff}
.chip.info{background:var(--sc-highest);color:var(--ink)}

.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:var(--r);
  border:1px solid var(--line-strong);background:#fff;color:var(--ink);font-size:14px;font-weight:600;
  letter-spacing:.02em;transition:all .12s;white-space:nowrap}
.btn:hover{border-color:var(--ink-45);background:var(--sc-low)}
.btn.pri{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.pri:hover{background:var(--primary-dim);border-color:var(--primary-dim)}
.btn.sec{background:var(--secondary);border-color:var(--secondary);color:#fff}
.btn.sec:hover{background:var(--secondary-dim);border-color:var(--secondary-dim)}
.btn.ghost{background:transparent}
.btn.plain{border-color:transparent;background:transparent;color:var(--ink-80)}
.btn.plain:hover{background:var(--sc)}
.btn.sm{padding:6px 11px;font-size:13px}
.btn.xs{padding:4px 9px;font-size:12px;gap:5px}
.btn.danger{color:var(--err-ink);border-color:rgba(186,26,26,.25)}
.btn.danger:hover{background:var(--err-bg);border-color:var(--err)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:disabled:hover{background:#fff;border-color:var(--line-strong)}

input[type=text],input[type=email],input[type=password],input[type=url],input[type=date],select,textarea{
  padding:8px 11px;border:1px solid var(--line-strong);border-radius:var(--r);background:#fff;color:var(--ink);
  font:inherit;font-size:14px;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px rgba(255,69,0,.18)}
select{cursor:pointer;appearance:none;padding-right:30px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232D1559' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center}
.field{margin-bottom:16px}
.field>label{display:block;font-size:12px;font-weight:600;letter-spacing:.05em;color:var(--ink-60);margin-bottom:5px}
.field .hint{font-size:12px;color:var(--ink-45);margin-top:4px}

table{width:100%;border-collapse:collapse;font-size:14px}
thead th{text-align:left;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-60);padding:11px 16px;background:var(--white);position:sticky;top:0;z-index:2;border-bottom:1px solid var(--line)}
tbody td{padding:12px 16px;border-bottom:1px solid var(--line-faint);vertical-align:middle}
tbody tr:hover td{background:var(--sc-low)}
tbody tr.sel td{background:var(--sc)}
.tbl{overflow:auto;max-height:calc(100vh - 300px);border-radius:var(--r-lg)}

.meter{height:7px;border-radius:999px;background:var(--sc-highest);overflow:hidden;min-width:70px;flex:1}
.meter i{display:block;height:100%;border-radius:999px;background:var(--secondary);transition:width .3s}
.meter.hi i{background:var(--ok)} .meter.lo i{background:var(--primary)}

.stat{background:var(--white);border-radius:var(--r-xl);padding:18px 20px;border:1px solid var(--line);
  display:flex;flex-direction:column;gap:3px}
.stat .k{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-45)}
.stat .v{font-family:'Bitter',serif;font-size:30px;font-weight:700;color:var(--ink);line-height:1.15}
.stat .s{font-size:12px;color:var(--ink-60)}

.note{border-radius:var(--r-lg);padding:14px 16px;font-size:13.5px;background:var(--lavender);
  border:1px solid var(--line);color:var(--ink)}
.note.warn{background:var(--peach);border-color:rgba(255,69,0,.22)}
.note.info{background:var(--sc);border-color:var(--line)}
.note b{font-weight:700}
.rochip{background:var(--peach);border:1px solid rgba(255,69,0,.22);color:var(--warn-ink);
  border-radius:var(--r);padding:9px 13px;font-size:12.5px;margin-bottom:14px}

.crumb{font-size:13px;color:var(--ink-45);margin-bottom:12px;display:flex;gap:7px;align-items:center}
.crumb a{color:var(--secondary-dim);font-weight:600}
.crumb a:hover{text-decoration:underline}
.empty{padding:56px 24px;text-align:center;color:var(--ink-45)}
.empty h3{color:var(--ink-80);margin-bottom:6px;font-size:17px}
.hl{background:var(--lime);border-radius:2px;padding:0 2px;color:var(--ink)}
.lk{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;padding:4px 9px;border:1px solid var(--line);
  border-radius:var(--r);color:var(--secondary-dim);background:#fff;max-width:230px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.lk:hover{border-color:var(--secondary);background:var(--sc-low)}

.arow{display:flex;align-items:center;gap:14px;padding:13px 20px;border-bottom:1px solid var(--line-faint)}
.arow:last-child{border-bottom:0}
.arow:hover{background:var(--sc-low)}
.arow .nm{flex:1;min-width:0}
.arow .nm b{font-size:14px;font-weight:600;display:block;color:var(--ink)}
.arow .acts{display:flex;gap:6px;opacity:0;transition:opacity .12s}
.arow:hover .acts,.arow:focus-within .acts{opacity:1}
.arow.gap{background:var(--peach)}
.arow.gap .acts{opacity:1}
.pip{width:8px;height:8px;border-radius:999px;flex:none}
.pip.ok{background:var(--ok)} .pip.warn{background:var(--primary)}
/* Part-way, not a problem: an account made but not yet used. */
.pip.half{background:var(--secondary)}
.pip.err{background:var(--err)} .pip.mute{background:var(--ink-45)}
.addrow{padding:14px 20px;background:var(--sc-low);border-top:1px dashed var(--line-strong)}

.scrim{position:fixed;inset:0;background:rgba(45,21,89,.45);z-index:90;opacity:0;pointer-events:none;transition:opacity .18s}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100vh;width:min(560px,100%);background:var(--white);z-index:91;
  box-shadow:var(--shadow);transform:translateX(100%);transition:transform .22s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column}
.drawer.on{transform:none}
.drawer>header{padding:20px 24px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.drawer>header h2{font-size:19px}
.drawer .body{padding:24px;overflow-y:auto;flex:1}
.drawer>footer{padding:16px 24px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;background:var(--sc-low)}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--ink);color:#fff;
  padding:12px 20px;border-radius:var(--r);font-size:14px;font-weight:600;z-index:120;box-shadow:var(--shadow);
  opacity:0;transition:all .25s}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.saving{position:fixed;top:12px;right:16px;z-index:80;background:var(--ink);color:#fff;padding:7px 14px;
  border-radius:999px;font-size:12.5px;font-weight:600;opacity:0;transition:opacity .2s;pointer-events:none}
.saving.on{opacity:1}

.tabbar{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:22px;overflow-x:auto}
.tabbar button{padding:10px 15px;border:0;background:none;font-size:14px;font-weight:600;letter-spacing:.02em;
  color:var(--ink-45);border-bottom:2px solid transparent;white-space:nowrap}
.tabbar button[aria-selected="true"]{color:var(--primary);border-bottom-color:var(--primary)}
.tabbar button:hover{color:var(--ink)}

.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.filters select,.filters input[type=text]{width:auto;min-width:150px}
.seg{display:inline-flex;background:var(--sc);border-radius:var(--r);padding:3px;gap:2px}
.seg button{padding:5px 12px;border:0;background:none;border-radius:var(--r);font-size:13px;font-weight:600;color:var(--ink-60)}
.seg button[aria-pressed="true"]{background:#fff;color:var(--primary)}
.chk{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink-80);cursor:pointer;user-select:none}
.chk input{width:16px;height:16px;accent-color:var(--secondary);cursor:pointer}

.hitcard,.hubtile{display:block;background:var(--white);border:1px solid var(--line);border-radius:var(--r-xl);
  transition:border-color .14s,box-shadow .14s,transform .14s}
.hitcard{padding:15px 18px;margin-bottom:10px}
.hubtile{padding:20px;height:100%}
.hitcard:hover,.hubtile:hover{border-color:var(--line-strong);box-shadow:var(--shadow-soft);transform:translateY(-1px)}
.hitcard h4{font-family:'IBM Plex Sans',sans-serif;font-size:14.5px;font-weight:600;color:var(--ink)}
.hubtile h3{font-size:16px;margin-bottom:6px}
.dl{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;font-size:13.5px;margin:0}
.dl dt{color:var(--ink-45)} .dl dd{margin:0;font-weight:600;text-align:right}

/* --------------------------- auth gate -------------------------- */
.gate{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--lavender)}
.gatebox{width:100%;max-width:430px}
.gatecard{background:#fff;border-radius:var(--r-xl);border:1px solid var(--line);box-shadow:var(--shadow-soft);padding:32px}
.gatelogo{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.gatelogo .logo-tile{width:42px;height:42px;font-size:21px}
.gatelogo b{font-size:19px}
.formerr{background:var(--err-bg);color:var(--err-ink);border-radius:var(--r);padding:11px 14px;
  font-size:13.5px;margin-bottom:16px}
.spin{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px}
.spin.d{border-color:rgba(45,21,89,.2);border-top-color:var(--primary)}
@keyframes sp{to{transform:rotate(360deg)}}
.boot{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  color:var(--ink-45);background:var(--lavender)}

@media(max-width:1000px){
  aside.nav{transform:translateX(-100%);transition:transform .22s;box-shadow:var(--shadow)}
  aside.nav.on{transform:none}
  .main{margin-left:0}
  .mobilebar{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--white);
    border-bottom:1px solid var(--line);position:sticky;top:0;z-index:35}
  .top-in{padding:12px 16px;flex-wrap:wrap}
  .top h1{font-size:21px}
  .content{padding:18px 16px 60px}
  .searchbox{max-width:none;margin-left:0;width:100%}
}
@media(max-width:640px){
  .arow{flex-wrap:wrap}
  .arow .acts{opacity:1}
  .drawer{width:100%}
}

/* ---- severity chips: same width, told apart by a dot not a wash ---- */
.chip.sev{min-width:76px;justify-content:flex-start;gap:7px;padding:3px 11px;
  text-transform:capitalize;color:var(--ink);background:var(--sc)}
.chip.sev::before{content:'';width:7px;height:7px;border-radius:999px;flex:none;background:var(--ink-45)}
.chip.sev.high{background:var(--err-bg)}
.chip.sev.high::before{background:var(--err)}
.chip.sev.medium{background:var(--peach)}
.chip.sev.medium::before{background:var(--primary)}
.chip.sev.low{background:var(--sc)}
.chip.sev.low::before{background:var(--secondary)}

/* ==================================================================
   Uniform pills and buttons.
   Every chip is the same height whatever it contains, and pips cannot
   be stretched by their flex parent. Dimensions are stated explicitly
   rather than left to line-height so nothing drifts.
   ================================================================== */
.chip{
  height:24px; min-height:24px; box-sizing:border-box;
  padding:0 11px; font-size:12px; line-height:1; letter-spacing:.01em;
  align-items:center; flex:0 0 auto; align-self:center;
}
.chip.sev{height:24px; min-height:24px; padding:0 11px}
.arow .chip, .hubtile .chip, .row .chip, td .chip{align-self:center}

.pip{
  width:8px !important; height:8px !important;
  min-width:8px; min-height:8px; max-width:8px; max-height:8px;
  border-radius:50%; flex:0 0 8px; align-self:center;
}

.btn{height:34px; min-height:34px; box-sizing:border-box; padding:0 15px; line-height:1}
.btn.sm{height:30px; min-height:30px; padding:0 12px}
.btn.xs{height:26px; min-height:26px; padding:0 10px; font-size:12px}
.btn.plain{height:auto; min-height:0; padding:6px 10px}
#signout{height:auto;min-height:0;padding:8px 10px}

/* chip rows in cards line up instead of stacking raggedly */
.hubtile .row{row-gap:6px}
.arow .row{row-gap:6px}

/* ==================================================================
   Row layout — grid, not flex guesswork.
   Every list row uses the same tracks, so the dot, the label, the
   status, the link and the action all line up down the page.
   ================================================================== */
.arow{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  column-gap:14px;
  padding:12px 20px;
  border-bottom:1px solid var(--line-faint);
}
.arow > .nm{min-width:0}

/* the trailing group: fixed tracks so columns agree row to row */
.tail{
  display:grid;
  grid-template-columns:var(--tail, 132px 200px 96px);
  align-items:center;
  column-gap:12px;
  justify-items:start;
}
.tail > *{min-width:0}
.tail .lk{max-width:100%}
.tail .acts{justify-self:end}
.arow .acts{opacity:1}          /* actions always visible; hover-reveal read as broken */

/* the status dot cannot be stretched by anything */
.arow > .pip{
  width:9px; height:9px; min-width:9px; max-width:9px;
  min-height:9px; max-height:9px;
  aspect-ratio:1 / 1; border-radius:50%;
  place-self:center; padding:0; margin:0; border:0; flex:none;
  box-sizing:border-box;
}

/* buttons: pills, and never full-width blocks inside rows */
.btn{border-radius:999px; width:auto}
.btn.xs{border-radius:999px; padding:0 12px}
.btn.sm{border-radius:999px; padding:0 14px}
.chip{border-radius:999px}

/* hub cards: chips on one tidy line */
.hubtile .row{display:flex; flex-wrap:wrap; gap:7px; align-items:center}
.hubtile .chip{flex:0 0 auto}

/* registry / queue tables: stop columns dancing between rows */
.tbl table{table-layout:fixed}
.tbl td, .tbl th{overflow:hidden; text-overflow:ellipsis}
.tbl td .lk{max-width:100%}

@media(max-width:900px){
  .arow{grid-template-columns:14px minmax(0,1fr); row-gap:10px}
  .tail{grid-column:1 / -1; grid-template-columns:auto 1fr auto; padding-left:28px}
}

/* ---- AI launchpad cards: title left, status pinned top-right ---- */
.apphead h3{font-size:15.5px; line-height:1.3}
.apphead .chip{justify-self:end; align-self:start}
.appcard .note{flex:1}

/* ==================================================================
   Corrections
   ================================================================== */

/* The generic input rule sits later in this file and was winning on
   source order, wiping the search box's left padding so the icon sat
   under the first letter. Higher specificity settles it. */
.searchbox input[type=text]{
  padding:9px 16px 9px 44px;
  border-radius:999px;
}
.searchbox svg{left:17px; top:12px}

/* ---- table columns: sized to their content, not split evenly ---- */
.tbl table{table-layout:fixed; width:100%}
.tbl th, .tbl td{vertical-align:middle}

/* work queue */
.t-queue col.c-sev{width:104px}
.t-queue col.c-scope{width:88px}
.t-queue col.c-item{width:21%}
.t-queue col.c-group{width:15%}
.t-queue col.c-exc{width:17%}
.t-queue col.c-detail{width:auto}
.t-queue col.c-go{width:72px}
.t-queue td:last-child, .t-queue th:last-child{text-align:right; padding-right:16px}

/* content registry */
.t-reg col.c-page{width:23%}
.t-reg col.c-hub{width:12%}
.t-reg col.c-type{width:9%}
.t-reg col.c-life{width:118px}
.t-reg col.c-owner{width:12%}
.t-reg col.c-aud{width:10%}
.t-reg col.c-pri{width:68px}
.t-reg col.c-rev{width:82px}
.t-reg col.c-src{width:12%}
.t-reg col.c-act{width:74px}
.t-reg td:last-child, .t-reg th:last-child{text-align:right; padding-right:16px}

/* curriculum catalog */
.t-cat col.c-name{width:28%}
.t-cat col.c-exam{width:11%}
.t-cat col.c-wks{width:64px}
.t-cat col.c-prof{width:15%}
.t-cat col.c-req{width:170px}
.t-cat col.c-gap{width:auto}
.t-cat col.c-open{width:82px}
.t-cat td:last-child, .t-cat th:last-child{text-align:right; padding-right:16px}

/* status chips in tables must never be clipped or wrapped */
.tbl td .chip{max-width:100%; overflow:hidden; text-overflow:ellipsis; display:inline-flex}
.tbl td:has(.chip){overflow:visible}

/* ---- hub cards: chip row pinned to the bottom so they line up ---- */
.hubtile{display:flex; flex-direction:column}
.hubtile .hub-desc{flex:1; margin:8px 0 14px; min-height:0}
.hubtile .hub-chips{margin-top:auto}

/* Chip and pip modifiers (.ok .warn .err .info .act) are only ever meant to
   change colour. Restate the geometry last so no unrelated single-class rule
   can win on source order and reshape them, as .err once did. */
.chip{height:24px; padding:0 11px; font-size:12px; line-height:1; margin:0; border-radius:999px}
.arow > .pip{width:9px; height:9px; padding:0; margin:0; font-size:0; border-radius:50%}

/* ---- chips in tables must never be truncated ---- */
.tbl td .chip{
  overflow:visible; text-overflow:clip; white-space:nowrap; max-width:none;
}
.t-reg col.c-life{width:146px}          /* "Blocked/Missing" needs the room */
.t-queue col.c-sev{width:112px}

/* ---- text wrapping ----
   Break long emails at sensible points only. Never per character: that is
   what happens when a column has collapsed, and it hides the real problem. */
.nm .xs, .nm .sm{overflow-wrap:break-word; word-break:normal}
.nm b{overflow-wrap:break-word; word-break:normal}

/* ---- the name column always keeps a usable minimum ----
   Previously minmax(0,1fr) let it shrink to nothing whenever the trailing
   controls were wide, which is how an email ended up one letter per line.

   Only SOME rows carry a leading status pip. Hard-coding a 14px first
   column meant that on the rows without one — accounts, staff, roles —
   the name landed in the 14px lane and wrapped one letter per line.
   So the pip lane only exists when there is actually a pip. */
.arow{grid-template-columns:minmax(190px,1fr) auto}
.arow:has(> .pip){grid-template-columns:14px minmax(190px,1fr) auto}
.arow:has(> .num){grid-template-columns:22px minmax(190px,1fr) auto}
.arow:has(> .grip){grid-template-columns:18px minmax(190px,1fr) auto}
.arow > .num{place-self:center;text-align:center;font-variant-numeric:tabular-nums}

/* Below this, the trailing controls take their own row rather than
   squeezing the name. */
@media(max-width:1180px){
  .arow{grid-template-columns:minmax(0,1fr); row-gap:10px}
  .arow:has(> .pip){grid-template-columns:14px minmax(0,1fr)}
  .arow:has(> .num){grid-template-columns:22px minmax(0,1fr)}
  .arow:has(> .grip){grid-template-columns:18px minmax(0,1fr)}
  .tail{grid-column:1 / -1; --tail:auto auto auto !important;
        grid-template-columns:repeat(3,auto); justify-content:start; column-gap:12px}
  .arow:has(> .pip) .tail, .arow:has(> .num) .tail,
  .arow:has(> .grip) .tail{grid-column:2 / -1}
  .tail:empty{display:none}
}
@media(max-width:560px){
  .tail{grid-template-columns:1fr; row-gap:8px; justify-items:start}
}

/* selects inside a row must not dictate the row's width */
.tail select{max-width:180px; min-width:0; width:100%}

/* ---- source links inside the record drawer ----
   A missing link is the single most common work-queue item, so it is an
   editable field here rather than a read-only footnote. */
.linklist{display:flex; flex-direction:column; gap:6px; margin-bottom:10px}
.linkrow{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; column-gap:10px;
  padding:7px 10px; border:1px solid var(--line-faint); border-radius:var(--r);
  background:var(--lavender);
}
.linkrow .trunc{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.linkrow .btn{justify-self:end}

/* ---- exceptions ----
   Rows that have been deliberately excluded read as settled, not as gaps:
   no peach warning tint, no red pip, just quieter than the rest. */
.arow.off{background:transparent}
.arow.off .nm b{color:var(--ink-60);font-weight:600}
.arow.off .chip{opacity:.75}

label.check{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  align-items:start; column-gap:10px;
  padding:11px 13px; border:1px solid var(--line-faint); border-radius:var(--r);
  background:var(--lavender); cursor:pointer; font-size:13.5px; line-height:1.45;
}
label.check input[type=checkbox]{width:16px;height:16px;margin:2px 0 0;accent-color:var(--primary)}
label.check:hover{border-color:var(--secondary)}

/* ---- user activity (admins only) ---- */
.navlist a.navtop{margin-top:14px;border-top:1px solid var(--line-faint);padding-top:14px}
.t-act col.c-when{width:104px}
.t-act col.c-who{width:19%}
.t-act col.c-did{width:104px}
.t-act col.c-what{width:19%}
.t-act col.c-item{width:auto}
.t-act .trunc{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ==================================================================
   Class schedule timeline

   One CSS grid per course: a sticky name column, then one column per
   week. Bars are placed with grid-column, so a ten-week class is
   literally ten columns wide and overlap is visible rather than
   inferred.
   ================================================================== */
.tl{
  --wcol:64px; --namew:210px;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:#fff; overflow-x:auto; overflow-y:visible;
}
.tl-head, .tl-g{
  display:grid;
  grid-template-columns:var(--namew) calc(var(--wk) * var(--wcol));
  min-width:calc(var(--namew) + var(--wk) * var(--wcol));
}
.tl-head{position:sticky; top:0; z-index:3; background:var(--lavender);
  border-bottom:1px solid var(--line)}
.tl-corner{position:sticky; left:0; z-index:4; background:var(--lavender);
  padding:9px 14px; font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-60); border-right:1px solid var(--line);
  display:flex; align-items:center}
.tl-weeks{display:grid; grid-template-columns:repeat(var(--wk), var(--wcol)); position:relative}
.tl-w{padding:7px 0 7px 7px; font-size:11px; color:var(--ink-45); line-height:1.3;
  border-left:1px solid var(--line-faint)}
.tl-w.mo{border-left:1px solid var(--line)}
.tl-w b{display:block; color:var(--primary); font-size:10px; letter-spacing:.04em;
  text-transform:uppercase}
.tl-today{grid-row:1; align-self:stretch; width:2px; background:var(--primary); opacity:.5;
  justify-self:start; margin-left:-1px}

/* A course, then one row per day-and-time it runs. Rows used to be
   packed to save space, which put a Tuesday evening class beside a
   Saturday morning one and implied they were related. */
.tl-course{border-bottom:1px solid var(--line)}
.tl-course:last-child{border-bottom:0}
.tl-title{position:sticky; left:0; z-index:2; display:flex; align-items:center; gap:10px;
  padding:9px 14px; background:var(--peach); border-bottom:1px solid var(--line-faint);
  width:max-content; min-width:100%}
.tl-title b{font-size:13.5px; font-weight:700}
.tl-title .chip{cursor:pointer}
.tl-g{border-bottom:1px solid var(--line-faint)}
.tl-g:last-child{border-bottom:0}
.tl-g:hover .tl-name{background:var(--sc-low)}
.tl-name{position:sticky; left:0; z-index:2; background:#fff;
  padding:9px 14px; border-right:1px solid var(--line);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center}
.tl-name b{font-size:12.5px; font-weight:600; line-height:1.3}
.tl-lanes{padding:7px 0; display:flex; flex-direction:column; gap:5px}
.tl-row{display:grid; grid-template-columns:repeat(var(--wk), var(--wcol)); min-height:26px}

.bar{
  grid-row:1; height:26px; border-radius:7px; padding:0 9px;
  display:flex; align-items:center; gap:6px; cursor:pointer;
  font-size:11.5px; line-height:1; overflow:hidden; white-space:nowrap;
  margin-right:2px; border:1px solid transparent;
}
.bar .bar-t{overflow:hidden; text-overflow:ellipsis}
.bar.rolling{background:var(--sc-low); border-color:var(--secondary); color:var(--ink)}
.bar.newstart{background:var(--pr-low); border-color:var(--primary); color:var(--ink);
  font-weight:600}
.bar:hover{filter:brightness(.97)}
.bar.clipl{border-top-left-radius:0; border-bottom-left-radius:0; border-left-style:dashed}
.bar.clipr{border-top-right-radius:0; border-bottom-right-radius:0; border-right-style:dashed}
.newdot{width:6px; height:6px; min-width:6px; border-radius:50%; background:var(--primary); flex:none}

label.inline{display:inline-flex; align-items:center; gap:7px; font-size:13px;
  color:var(--ink-80); cursor:pointer; white-space:nowrap}
label.inline input[type=checkbox]{width:15px; height:15px; accent-color:var(--primary)}

.t-sch col.c-start{width:120px} .t-sch col.c-cls{width:24%}
.t-sch col.c-when{width:150px}  .t-sch col.c-instr{width:17%}
.t-sch col.c-len{width:70px}    .t-sch col.c-end{width:104px}
.t-sch col.c-go{width:66px}


/* ==================================================================
   Week grid — seven day columns, one week at a time
   ================================================================== */
.wk-sum{margin:0 0 8px 2px}
.wk{
  display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:10px;
  align-items:start;
}
.wk-col{
  border:1px solid var(--line); border-radius:var(--r-lg); background:#fff;
  min-height:120px; display:flex; flex-direction:column; overflow:hidden;
}
.wk-col.is-today{border-color:var(--primary); box-shadow:0 0 0 1px var(--primary)}
.wk-h{
  display:flex; align-items:baseline; gap:6px; padding:9px 11px;
  background:var(--lavender); border-bottom:1px solid var(--line-faint);
}
.wk-col.is-today .wk-h{background:var(--pr-low)}
.wk-dn{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-60)}
.wk-dd{font-family:Bitter,serif; font-size:19px; font-weight:700; line-height:1}
.wk-dm{font-size:11px; color:var(--ink-45)}
.wk-n{margin-left:auto; font-size:11px; font-weight:700; color:var(--ink-60);
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:1px 7px}
.wk-body{padding:8px; display:flex; flex-direction:column; gap:7px}
.wk-none{color:var(--ink-45); font-size:13px; text-align:center; padding:14px 0}

.sess{
  display:flex; flex-direction:column; gap:3px; width:100%; text-align:left;
  border:1px solid var(--line); border-left:3px solid var(--secondary);
  border-radius:9px; background:var(--sc-low); padding:8px 9px; cursor:pointer;
  font:inherit; color:var(--ink);
}
.sess:hover{border-color:var(--secondary); background:var(--sc)}
.sess.newstart{border-left-color:var(--primary); background:var(--pr-low)}
.sess.first{border-left-width:4px}
.sess-t{font-size:11.5px; font-weight:700; letter-spacing:.01em}
.sess-t .mute{font-weight:400; color:var(--ink-45)}
.sess-n{font-size:12.5px; font-weight:600; line-height:1.25}
.sess-m{display:flex; gap:6px; align-items:baseline; font-size:11px; color:var(--ink-60);
  flex-wrap:wrap}
.sess-w{background:#fff; border:1px solid var(--line-faint); border-radius:999px;
  padding:0 6px; font-weight:600}
.sess-i{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sess-flag{align-self:flex-start; font-size:9.5px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; border-radius:999px; padding:2px 7px; margin-top:2px;
  background:var(--primary); color:#fff}
.sess-flag.roll{background:var(--sc-highest); color:var(--ink-80)}
.sess-flag.last{background:var(--ink); color:#fff}
.sess-flag.dup{background:var(--warn-bg,#FFF4E0); color:var(--warn-ink,#8A5A00);
  border:1px solid var(--warn,#F0A500)}

@media(max-width:1100px){
  .wk{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media(max-width:640px){
  .wk{grid-template-columns:1fr}
}

/* ---- shared cards ----
   One instructor, one course, one hour, several concurrent groups. The
   collapsed card is the thing worth seeing; the groups inside it are
   detail, so they live behind a disclosure rather than repeating the
   same three lines five times down a column. */
details.sess.grouped{padding:0; cursor:default}
details.sess.grouped > summary{
  list-style:none; cursor:pointer; padding:8px 9px;
  display:flex; flex-direction:column; gap:3px; position:relative;
  border-radius:7px;
}
details.sess.grouped > summary::-webkit-details-marker{display:none}
details.sess.grouped > summary:hover{background:rgba(255,255,255,.55)}
details.sess.grouped .sess-w{background:var(--secondary); color:#fff; border-color:transparent}
details.sess.grouped.newstart .sess-w{background:var(--primary)}
.sess-sub{font-size:10.5px; color:var(--ink-45)}
.sess-caret{position:absolute; right:8px; top:9px; font-size:15px; color:var(--ink-45);
  transition:transform .15s; line-height:1}
details.sess.grouped[open] > summary .sess-caret{transform:rotate(90deg)}
details.sess.grouped[open] > summary{border-bottom:1px solid var(--line-faint);
  border-radius:7px 7px 0 0}

.coh-list{display:flex; flex-direction:column; gap:5px; padding:7px}
.coh{
  display:flex; flex-direction:column; gap:2px; width:100%; text-align:left;
  border:1px solid var(--line-faint); border-left:3px solid var(--secondary);
  border-radius:7px; background:#fff; padding:6px 8px; cursor:pointer;
  font:inherit; color:var(--ink);
}
.coh:hover{border-color:var(--secondary); background:var(--sc-low)}
.coh.newstart{border-left-color:var(--primary)}

/* ---- per-course requirement checklist ----
   The whole row is the label, so the target is the row rather than a
   14px box. Unticked rows stay legible: they are a decision somebody
   made, not disabled controls. */
.rulerow{
  display:grid; grid-template-columns:18px minmax(0,1fr) auto;
  align-items:start; column-gap:13px; padding:11px 20px;
  border-bottom:1px solid var(--line-faint); cursor:pointer;
}
.rulerow:last-of-type{border-bottom:0}
.rulerow:hover{background:var(--sc-low)}
.rulerow input[type=checkbox]{width:17px; height:17px; margin:1px 0 0;
  accent-color:var(--primary); cursor:pointer}
.rule-n{display:flex; flex-direction:column; gap:2px; min-width:0}
.rule-n b{font-size:13.5px; font-weight:600}
.rulerow.off .rule-n b{color:var(--ink-45); text-decoration:line-through;
  text-decoration-color:var(--ink-45)}
.rulerow.off .rule-n .mute{color:var(--ink-45)}
.rule-tag{align-self:center}


/* ==================================================================
   AI launchpad board

   Columns are how far along something is, left to right. Colour says
   the same thing the chips say everywhere else: grey inert, purple
   moving, green done, orange needs attention. Parked sits at the end
   because it is not a stage.
   ================================================================== */
.board{
  display:grid; gap:12px; align-items:start;
  grid-template-columns:repeat(5, minmax(0,1fr));
}
.bcol{background:var(--lavender); border:1px solid var(--line); border-radius:var(--r-lg);
  display:flex; flex-direction:column; min-height:120px; overflow:hidden}
.bcol-h{display:flex; align-items:center; gap:8px; padding:10px 13px;
  border-bottom:1px solid var(--line-faint)}
.bcol-h b{font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-60)}
.bcol-n{margin-left:auto; font-size:11px; font-weight:700; color:var(--ink-60);
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:1px 7px}
.bcol-b{padding:10px; display:flex; flex-direction:column; gap:10px; flex:1; min-height:60px}
.bcol-b.over{background:var(--sc); outline:2px dashed var(--secondary); outline-offset:-6px}
.bcol-empty{color:var(--ink-45); font-size:12.5px; text-align:center; padding:16px 0}

.appcard{
  background:#fff; border:1px solid var(--line); border-left:4px solid var(--ink-45);
  border-radius:var(--r); padding:11px 12px; cursor:pointer;
  display:flex; flex-direction:column; gap:6px;
}
.appcard:hover{border-color:var(--secondary)}
.appcard.dragging{opacity:.45}
.appcard[draggable=true]{cursor:grab}
.appcard.ph-discovery, .appcard.ph-scoping{border-left-color:var(--tertiary,#9F7DFF)}
.appcard.ph-prototype, .appcard.ph-pilot{border-left-color:var(--secondary)}
.appcard.ph-live{border-left-color:var(--ok)}
.appcard.ph-on_hold{border-left-color:var(--primary)}
.appcard.ph-dropped{opacity:.6}
.appcard-h{display:flex; align-items:flex-start; gap:8px; justify-content:space-between}
.appcard-h b{font-size:13.5px; font-weight:600; line-height:1.3}
.appcard-s{margin:0; font-size:12.5px; color:var(--ink-80); line-height:1.45}
.appcard-g{font-size:11.5px; line-height:1.4; color:var(--ink-60);
  background:var(--peach); border-radius:7px; padding:7px 9px}
.appcard-f{display:flex; align-items:center; gap:7px; margin-top:2px}
.appcard-f .btn{flex:none}

@media(max-width:1200px){ .board{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media(max-width:680px){ .board{grid-template-columns:1fr} }

/* ---- background refresh ----
   What is on screen is real data, a few seconds old. That deserves a
   line at the bottom, not a spinner over the whole page. */
.freshbar{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  display:flex; align-items:center; gap:9px; z-index:60;
  background:var(--ink); color:#fff; border-radius:999px;
  padding:8px 16px; font-size:12.5px; box-shadow:0 6px 20px rgba(45,21,89,.25);
}
.freshbar .spin{border-color:rgba(255,255,255,.35); border-top-color:#fff;
  width:13px; height:13px}
.freshbar.warn{background:var(--primary)}
.freshbar .btn{background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.4);
  color:#fff; margin-left:4px}
.freshbar .btn:hover{background:rgba(255,255,255,.25)}

/* ---- section headers and drag handles ----
   A header is a title for what follows, so it reads as one: no status,
   no link column, and the row itself is quieter. */
.arow.hdrow{background:var(--lavender); border-bottom:1px solid var(--line)}
.arow.hdrow .nm b{font-family:Bitter,serif; font-size:14px; font-weight:700;
  letter-spacing:.01em}
.arow.hdrow + .arow{border-top:0}
.arow.dragging{opacity:.4}
#pagelist .arow{cursor:default}
#pagelist .arow[draggable=true]{cursor:grab}
.arow > .grip{
  place-self:center; color:var(--ink-45); font-size:13px; line-height:1;
  letter-spacing:-2px; user-select:none; cursor:grab;
  width:18px; text-align:center;
}
.arow:hover .grip{color:var(--secondary)}
.hubtile .spread{align-items:flex-start; gap:10px}

/* ---- one-off sessions ----
   A single session on a single date. Blue keeps it visibly apart from
   the recurring courses without implying anything is wrong with it. */
.chip.one{background:var(--one-bg); color:var(--one-ink)}
.note.one{background:var(--one-bg); color:var(--one-ink)}
.sess.oneoff{background:var(--one-bg); border-left-color:var(--one)}
.sess.oneoff:hover{background:#DCEBFA}
.coh.oneoff{border-left-color:var(--one)}
details.sess.grouped.oneoff .sess-w{background:var(--one)}
.sess-flag.one{background:var(--one); color:#fff}
.bar.oneoff{background:var(--one-bg); border-color:var(--one); color:var(--one-ink);
  font-weight:600}
.bar.oneoff .bar-t{color:var(--one-ink)}

/* ==================================================================
   eLearning projects and wishlist
   ================================================================== */
.prjgrid{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
  align-items:start}
.prjcard{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:15px 16px; display:flex; flex-direction:column; gap:9px;
}
.prjcard[draggable=true]{cursor:grab}
.prjcard:hover{border-color:var(--secondary)}
.prjcard.dragging{opacity:.4}
.prjcard.archived{background:var(--surface); opacity:.85}
.prjcard-h{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.prjcard-h b{font-family:Bitter,serif; font-size:15.5px; font-weight:700; line-height:1.25}
.prjcard-d{margin:0; font-size:13px; color:var(--ink-80); line-height:1.45}
.prjcount{
  display:grid; grid-template-columns:repeat(5,1fr); gap:4px;
  border-top:1px solid var(--line-faint); border-bottom:1px solid var(--line-faint);
  padding:10px 0; margin-top:2px;
}
.prjcount span{display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center}
.prjcount b{font-family:Bitter,serif; font-size:17px; font-weight:700; color:var(--primary);
  line-height:1}
.prjcount b.zero{color:var(--ink-45)}
.prjcount small{font-size:9.5px; letter-spacing:.03em; color:var(--ink-45); line-height:1.2}
.prjcard-f{display:flex; gap:7px; margin-top:auto}

/* ---- the lanes inside the drawer ---- */
.lanes{display:flex; flex-direction:column; gap:14px}
.lane{border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
  overflow:hidden}
.lane-h{display:flex; align-items:baseline; gap:9px; padding:9px 13px; background:var(--lavender);
  border-bottom:1px solid var(--line-faint); flex-wrap:wrap}
.lane-h b{font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-60)}
.lane-n{font-size:11px; font-weight:700; color:var(--ink-60); background:#fff;
  border:1px solid var(--line); border-radius:999px; padding:0 7px}
.lane-note{flex:1; min-width:0; text-align:right; font-size:10.5px}
.lane-b{padding:9px; display:flex; flex-direction:column; gap:7px; min-height:44px}
.lane-b.over{background:var(--sc); outline:2px dashed var(--secondary); outline-offset:-5px}
.lane-empty{color:var(--ink-45); font-size:12.5px; text-align:center; padding:8px 0}

.pitem{
  background:#fff; border:1px solid var(--line-faint); border-left:3px solid var(--ink-45);
  border-radius:8px; padding:8px 10px; cursor:pointer;
  display:flex; flex-direction:column; gap:5px;
}
.pitem[draggable=true]{cursor:grab}
.pitem:hover{border-color:var(--secondary)}
.pitem.dragging{opacity:.4}
.pitem.p-high{border-left-color:var(--warn)}
.pitem.p-critical{border-left-color:var(--err)}
.pitem.p-medium{border-left-color:var(--secondary)}
.pitem-t{font-size:13px; font-weight:600; line-height:1.35}
.pitem-m{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.pitem-tags{display:flex; gap:4px; flex-wrap:wrap}
.ptag{font-size:9.5px; letter-spacing:.03em; text-transform:uppercase; font-weight:700;
  background:var(--sc); color:var(--ink-60); border-radius:999px; padding:2px 7px}

/* ---- tag pickers ---- */
.tagpick{display:flex; flex-wrap:wrap; gap:6px}
.ptagbox{display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  border:1px solid var(--line); border-radius:999px; padding:5px 11px; font-size:12px;
  background:#fff; user-select:none}
.ptagbox:hover{border-color:var(--secondary)}
.ptagbox.on{background:var(--sc); border-color:var(--secondary); font-weight:600}
.ptagbox input{width:13px; height:13px; margin:0; accent-color:var(--primary)}

@media(max-width:640px){ .prjcount{grid-template-columns:repeat(3,1fr); row-gap:9px} }

/* ---- department chips ----
   The one you belong to is filled, so your own material stands out in
   a list that is mostly everybody else's. */
.chip.dept{background:var(--sc); color:var(--ink-80); font-weight:600}
.chip.dept.mine{background:var(--secondary); color:#fff}

/* ==================================================================
   Workspaces

   Each department's intranet has its own accent, set on the root as
   --ws and used sparingly: the active pill, the sidebar selection,
   and the top rule. Enough to know where you are without turning the
   whole product a different colour.
   ================================================================== */
.wsbar{
  display:flex; flex-wrap:wrap; gap:4px; padding:0 12px 10px;
  border-bottom:1px solid var(--line-faint); margin-bottom:10px;
}
.wspill{
  font-size:11.5px; font-weight:600; letter-spacing:.01em;
  padding:5px 10px; border-radius:999px; color:var(--ink-60);
  border:1px solid transparent; white-space:nowrap; transition:background .12s;
}
.wspill:hover{background:var(--sc-low); color:var(--ink)}
.wspill.on{background:var(--ws); color:#fff}
.wsname{
  padding:0 14px 8px; font-family:Bitter,serif; font-size:13px; font-weight:700;
  color:var(--ws); letter-spacing:.01em;
}
.navlist a[aria-current="true"]{background:var(--ws); color:#fff}
.content{border-top:2px solid var(--ws)}

.wsgrid{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.wscard{
  display:flex; flex-direction:column; gap:7px;
  background:#fff; border:1px solid var(--line); border-left:4px solid var(--ws);
  border-radius:var(--r-lg); padding:14px 16px; border-top-left-radius:0;
  border-bottom-left-radius:0;
}
.wscard:hover{border-color:var(--ws)}
.wscard.mine{margin-bottom:16px}
.wscard-h{display:flex; align-items:center; gap:9px; justify-content:space-between}
.wscard-h b{font-family:Bitter,serif; font-size:16px; font-weight:700}
.wscard p{margin:0; font-size:13px; color:var(--ink-80); line-height:1.45}

.stat{background:var(--peach); border-radius:var(--r-lg); padding:14px 16px}
.stat-n{font-family:Bitter,serif; font-size:26px; font-weight:700; color:var(--ws); line-height:1.1}
.stat-l{font-size:11.5px; color:var(--ink-60); margin-top:2px}