/* ============================================================================
   eabcx — chrome.css
   The house chrome: top bar, pill nav, page frame, cards, buttons, badges,
   chips, form controls, tabs, modal / drawer / toast, kpi, empty, spinner,
   donut, split. Every value is a token from tokens.css.
   Source: App Rule 04b (Cx Tracker chrome) + CONTRACTS/design.md.
   Contents
     1  splash            7  cards + page title      13  modal
     2  top bar           8  filter bar              14  drawer
     3  pill nav          9  buttons                 15  toast
     4  switcher/search  10  badges + chips          16  kpi / empty / spinner / donut
     5  popovers         11  form controls           17  split (master-detail)
     6  page frame       12  tabs                    18  responsive + print
                                                       19  login card
   ==========================================================================*/

/* ------------------------------------------------------------- 1. splash  */
/* The brand moment. <=1.2s, one fade, no library. It sits on --bg so the
   pre-paint theme attribute means there is never a white flash in dark. */
#splash{
  position:fixed;inset:0;z-index:999;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);
  transition:opacity .32s var(--ease);
}
#splash img{width:190px;height:auto;opacity:0;animation:splashIn .62s var(--ease) .06s forwards}
html[data-theme="dark"] #splash img{filter:brightness(0) invert(1);opacity:0}
#splash.gone{opacity:0;pointer-events:none}
@keyframes splashIn{from{opacity:0;transform:translateY(4px)}to{opacity:.94;transform:none}}
@media (prefers-reduced-motion:reduce){#splash img{animation:none;opacity:.94}}

/* ------------------------------------------------------------- 2. top bar */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:10px;
  height:var(--bar-h);padding:0 var(--gutter);
  background:var(--glass);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.topbar .spacer{flex:1 1 auto;min-width:8px}

.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;cursor:pointer;background:none;border:0;padding:0}
.brand img{height:28px;width:auto;display:block;transition:opacity var(--t) var(--ease)}
html[data-theme="dark"] .brand img{filter:brightness(0) invert(1);opacity:.92}
.brand:hover img{opacity:.78}
.brand .ver{
  font-size:9.5px;font-weight:600;letter-spacing:.12em;color:var(--faint);
  border:1px solid var(--line);border-radius:var(--pill);padding:1px 7px;
}

/* the second row that appears when Menus is open */
.menusrow{
  position:sticky;top:var(--bar-h);z-index:49;
  display:flex;align-items:center;gap:0;
  padding:6px var(--gutter);
  background:var(--glass);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}

/* ------------------------------------------------------------ 3. pill nav */
.nav{display:flex;align-items:center;gap:0;flex:0 0 auto}
.nav .pill{
  position:relative;
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;border:0;border-radius:var(--pill);
  background:transparent;color:var(--muted);
  font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  white-space:nowrap;cursor:pointer;text-decoration:none;
  transition:color var(--t) var(--ease),background var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.nav .pill:hover{color:var(--txt);text-decoration:none}
.nav .pill.on{background:var(--panel);color:var(--txt);box-shadow:var(--shadow)}
/* hairline dividers between items; the lifted pill eats its own and its neighbour's */
.nav .pill + .pill::before{
  content:"";position:absolute;left:-1px;top:50%;transform:translateY(-50%);
  width:1px;height:13px;background:var(--line);transition:opacity var(--t) var(--ease);
}
.nav .pill.on::before,.nav .pill:hover::before,.nav .pill.on + .pill::before,.nav .pill:hover + .pill::before{opacity:0}
.nav .pill .ic{opacity:.65}
.menusrow .nav{flex:1 1 auto;min-width:0;flex-wrap:wrap;row-gap:2px}
.menusrow .nav .pill{color:var(--faint)}
/* the primary items are duplicated into the Menus row and only appear there
   once the bar itself has run out of room */
.menusrow .pill.only-narrow{display:none}
.menusrow .nav .pill:hover{color:var(--txt)}
.menusrow .nav .pill.on{color:var(--txt)}

/* the Menus control itself */
.menusbtn{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 13px;border:1px solid var(--line);border-radius:var(--pill);
  background:var(--panel);color:var(--muted);
  font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  cursor:pointer;white-space:nowrap;transition:all var(--t) var(--ease);
}
.menusbtn:hover{color:var(--txt);border-color:var(--faint);transform:translateY(-1px)}
.menusbtn.on{color:var(--txt);background:var(--bg2)}
.menusbtn .ic{transition:transform var(--t) var(--ease)}
.menusbtn.on .ic{transform:rotate(180deg)}

/* --------------------------------------------------- 4. switcher + search */
.switcher{
  display:inline-flex;align-items:center;gap:8px;
  min-width:158px;max-width:300px;height:36px;flex:0 1 auto;overflow:hidden;
  padding:0 12px 0 14px;border:1px solid var(--line);border-radius:var(--pill);
  background:var(--panel);color:var(--txt);cursor:pointer;font-size:12.5px;line-height:1;
  white-space:nowrap;transition:all var(--t) var(--ease);
}
.switcher:hover{border-color:var(--faint);transform:translateY(-1px)}
.switcher .no{font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.01em;flex:0 0 auto}
.switcher .nm{color:var(--muted);overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 auto;text-align:left}
.switcher .ic{color:var(--faint);flex:0 0 auto;display:flex}
.switcher.none{color:var(--muted)}
.switcher.none .no{display:none}

.search{position:relative;flex:0 1 240px;min-width:150px}
/* [type] is carried on purpose: a generic field rule must never win the
   padding-left back and slide the magnifier under the placeholder (Rule 04b §6) */
.search input[type=search]{
  width:100%;height:36px;padding:0 14px 0 34px;
  border:1px solid var(--line);border-radius:var(--pill);
  background:var(--panel);color:var(--txt);font-size:12.5px;outline:none;
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);
  -webkit-appearance:none;appearance:none;
}
.search input[type=search]::-webkit-search-cancel-button{display:none}
.search input[type=search]:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.search input[type=search]::placeholder{color:var(--faint)}
.search .sic{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--faint);pointer-events:none;display:flex}

/* circular icon button — 36px */
.iconbtn{
  width:36px;height:36px;border-radius:var(--pill);
  border:1px solid var(--line);background:var(--panel);color:var(--muted);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:all var(--t) var(--ease);flex:0 0 auto;padding:0;
}
.iconbtn:hover{color:var(--txt);border-color:var(--faint);transform:translateY(-1px)}
.iconbtn:disabled{opacity:.45;cursor:default;transform:none}
.iconbtn.quiet{border-color:transparent;background:transparent}
.iconbtn.quiet:hover{background:var(--bg2);border-color:var(--line)}
.iconbtn.sm{width:28px;height:28px}
.iconbtn.on{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
/* theme toggle: moon in light, sun in dark */
.iconbtn .i-sun{display:none}
html[data-theme="dark"] .iconbtn .i-sun{display:block}
html[data-theme="dark"] .iconbtn .i-moon{display:none}

/* user menu trigger */
.userbtn{
  display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 6px 0 12px;
  border:1px solid var(--line);border-radius:var(--pill);background:var(--panel);
  color:var(--txt);font-size:12.5px;cursor:pointer;white-space:nowrap;
  transition:all var(--t) var(--ease);flex:0 1 auto;max-width:150px;
}
.userbtn:hover{border-color:var(--faint);transform:translateY(-1px)}
.userbtn .av{
  width:24px;height:24px;border-radius:var(--pill);background:var(--txt);color:var(--bg);
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;letter-spacing:.02em;
}
.userbtn .uname{overflow:hidden;text-overflow:ellipsis;min-width:0}

/* ----------------------------------------------------------- 5. popovers  */
.pop{
  position:absolute;z-index:120;min-width:240px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);
  box-shadow:var(--shadow-lg);padding:6px;
  animation:popIn .14s var(--ease) both;
}
@keyframes popIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.pop .pophead{padding:8px 10px 6px}
.pop .popname{font-size:13px;font-weight:600}
.pop .popsub{font-size:11.5px;color:var(--muted)}
.pop hr{border:0;border-top:1px solid var(--line);margin:6px 0}
.pop .item{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:8px 10px;border:0;border-radius:var(--radius-ctl);
  background:transparent;color:var(--txt);font-size:12.5px;text-align:left;cursor:pointer;
  transition:background var(--t) var(--ease);
}
.pop .item:hover,.pop .item.active{background:var(--bg2)}
.pop .item .ic{color:var(--muted);flex:0 0 auto}
.pop .item.danger{color:var(--red)}
.pop .item .no{font-weight:700;font-variant-numeric:tabular-nums;min-width:58px;flex:0 0 auto}
.pop .item .nm{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pop .list{max-height:340px;overflow:auto;padding:2px}
.pop .popsearch{padding:6px}
.pop .popsearch input[type=search]{
  width:100%;height:34px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius-ctl);
  background:var(--bg2);color:var(--txt);font-size:13px;outline:none;
}
.pop .popsearch input[type=search]:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.pop .none{padding:14px 10px;color:var(--muted);font-size:12.5px;text-align:center}

/* -------------------------------------------------------- 6. page frame   */
.page{
  display:block;width:100%;
  padding:18px var(--gutter) 48px;
  /* full screen width on data pages: small gutters, no max-width cap */
}
.page.prose{max-width:760px;margin:0 auto}   /* the documented exception */
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rowend{display:flex;align-items:center;gap:10px;margin-left:auto}

/* -------------------------------------------------- 7. card + page title  */
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);
  box-shadow:var(--shadow);overflow:hidden;
}
.card > .cardhead{
  display:flex;align-items:center;gap:10px;
  padding:13px 16px;border-bottom:1px solid var(--line2);
}
.card > .cardhead h3{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.card > .cardhead .rowend{margin-left:auto}
.card > .cardbody{padding:16px}
.card.flush > .cardbody{padding:0}

.page-title{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin:4px 0 16px}
.page-title h1{
  font-size:27px;font-weight:300;letter-spacing:-.015em;line-height:1.15;
  display:flex;align-items:baseline;gap:11px;
}
.page-title h1 .no{font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.page-title .sub{color:var(--muted);font-size:12.5px;padding-bottom:4px}
.page-title .acts{display:flex;align-items:center;gap:8px;margin-left:auto;padding-bottom:2px}

/* --------------------------------------------------------- 8. filter bar  */
.filterbar{
  display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;
  padding:12px 16px;margin-bottom:14px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);
  box-shadow:var(--shadow);
}
.filterbar .fb{display:flex;flex-direction:column;gap:5px;min-width:0}
.filterbar .fb > label:not(.check){
  font-size:10px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);
}
.filterbar .fb.inline{flex-direction:row;align-items:center;gap:8px;padding-bottom:7px}
/* a checkbox at the end of the bar (Show Archived) is a control, not a column label */
.filterbar .fb > label.check{color:var(--muted);white-space:nowrap}
.filterbar .fb > label.check:hover{color:var(--txt)}
.filterbar .fbend{margin-left:auto;display:flex;align-items:flex-end;gap:10px}

/* ---------------------------------------------------------- 9. buttons    */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:8px 16px;border-radius:var(--pill);
  border:1px solid var(--line);background:var(--panel);color:var(--txt);
  font-size:12.5px;font-weight:500;white-space:nowrap;cursor:pointer;
  transition:all var(--t) var(--ease);
}
.btn:hover{border-color:var(--faint);transform:translateY(-1px);text-decoration:none}
.btn:active{transform:none}
.btn:disabled{opacity:.45;cursor:default;transform:none}
.btn .ic{opacity:.8}
/* the primary button is solid --txt (near-black light / near-white dark);
   the accent is reserved for focus and selection */
.btn.primary{background:var(--txt);border-color:var(--txt);color:var(--bg)}
.btn.primary:hover{opacity:.86;border-color:var(--txt)}
.btn.primary .ic{opacity:1}
.btn.danger{color:var(--red)}
.btn.danger:hover{border-color:var(--red);background:var(--red-soft)}
.btn.accent{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.accent:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn.sm{padding:5px 12px;font-size:12px}
.btn.quiet{border-color:transparent;background:transparent;color:var(--muted)}
.btn.quiet:hover{color:var(--txt);background:var(--bg2);border-color:var(--line)}
.btn.block{width:100%}

/* --------------------------------------------------- 10. badges + chips   */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 10px;border-radius:var(--pill);border:1px solid var(--line);color:var(--muted);
  white-space:nowrap;
}
.badge .dot{width:6px;height:6px;border-radius:50%;background:var(--faint);flex:0 0 auto}
.badge.b-green{color:var(--green);border-color:transparent;background:var(--green-soft)} .badge.b-green .dot{background:var(--green)}
.badge.b-amber{color:var(--amber);border-color:transparent;background:var(--amber-soft)} .badge.b-amber .dot{background:var(--amber)}
.badge.b-red  {color:var(--red);border-color:transparent;background:var(--red-soft)}     .badge.b-red .dot{background:var(--red)}
.badge.b-acc  {color:var(--accent);border-color:transparent;background:var(--accent-soft)}.badge.b-acc .dot{background:var(--accent)}
.badge.b-muted{color:var(--muted);border-color:var(--line);background:transparent}

.chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 12px;border-radius:var(--pill);border:1px solid var(--line);
  background:var(--panel);color:var(--muted);font-size:12px;cursor:pointer;
  white-space:nowrap;transition:all var(--t) var(--ease);
}
.chip:hover{color:var(--txt);border-color:var(--faint);transform:translateY(-1px)}
.chip .box{
  width:13px;height:13px;border-radius:4px;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:transparent;flex:0 0 auto;
  transition:all var(--t) var(--ease);
}
.chip.on{color:var(--txt);border-color:var(--accent);background:var(--accent-soft)}
.chip.on .box{background:var(--accent);border-color:var(--accent);color:#fff}
.chip.static{cursor:default}
.chip.static:hover{transform:none;color:var(--muted);border-color:var(--line)}

/* --------------------------------------------------- 11. form controls    */
.field{display:flex;flex-direction:column;gap:5px}
.field > label,.lbl{
  font-size:10px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);
}
input[type=text],input[type=password],input[type=email],input[type=number],
input[type=date],input[type=datetime-local],input[type=tel],input[type=url],
input[type=search],
select,textarea{
  height:34px;padding:0 11px;
  border:1px solid var(--line);border-radius:var(--radius-ctl);
  background:var(--panel);color:var(--txt);font-size:13px;outline:none;
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);
  max-width:100%;
}
textarea{height:auto;min-height:76px;padding:8px 11px;line-height:1.5;resize:vertical}
select{
  padding-right:30px;cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 15px) 15px,calc(100% - 11px) 15px;
  background-size:4px 4px,4px 4px;background-repeat:no-repeat;
}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
input:disabled,select:disabled,textarea:disabled{background:var(--bg2);color:var(--muted);cursor:default}
input::placeholder,textarea::placeholder{color:var(--faint)}
input[type=search]::-webkit-search-cancel-button{display:none}
input[type=date]::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer}
html[data-theme="dark"] input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.55}
.err{color:var(--red);font-size:12px;min-height:16px}
.hint{color:var(--muted);font-size:11.5px}

.check{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:12.5px;user-select:none}
.check input[type=checkbox]{
  width:15px;height:15px;margin:0;border-radius:4px;border:1px solid var(--line);
  background:var(--panel);cursor:pointer;-webkit-appearance:none;appearance:none;
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  transition:all var(--t) var(--ease);
}
.check input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}
.check input[type=checkbox]:checked::after{
  content:"";width:4px;height:8px;margin-top:-2px;
  border:solid #fff;border-width:0 1.8px 1.8px 0;transform:rotate(45deg);
}
.check input[type=checkbox]:focus-visible{box-shadow:0 0 0 3px var(--accent-soft)}

/* ------------------------------------------------------------- 12. tabs   */
.tabs{display:inline-flex;align-items:center;gap:3px;padding:3px;background:var(--bg2);border-radius:var(--pill)}
.tabs button{
  display:inline-flex;align-items:center;gap:7px;
  border:0;background:transparent;color:var(--muted);
  padding:6px 18px;border-radius:var(--pill);cursor:pointer;
  font-size:12px;font-weight:600;letter-spacing:.04em;
  transition:all var(--t) var(--ease);white-space:nowrap;
}
.tabs button:hover{color:var(--txt)}
.tabs button.on{background:var(--accent);color:#fff;box-shadow:var(--shadow)}
.tabs button .cnt{
  font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums;
  padding:1px 7px;border-radius:var(--pill);background:var(--panel);color:var(--muted);
}
.tabs button.on .cnt{background:rgba(255,255,255,.22);color:#fff}

/* ------------------------------------------------------------ 13. modal   */
.modal-back,.drawer-back{
  position:fixed;inset:0;z-index:200;
  background:var(--backdrop);
  display:flex;align-items:center;justify-content:center;padding:24px;
  animation:fadeIn .16s var(--ease) both;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{
  width:min(520px,100%);max-height:88vh;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);
  box-shadow:var(--shadow-lg);overflow:hidden;
  animation:modalIn .2s var(--ease) both;
}
.modal.wide{width:min(880px,100%)}
@keyframes modalIn{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
.modal .mhead{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--line2)}
.modal .mhead h2{font-size:15px;font-weight:600}
.modal .mhead .iconbtn{margin-left:auto}
.modal .mbody{padding:18px;overflow:auto;flex:1 1 auto}
.modal .mbody:empty{padding:0}   /* a title-only confirm has no message — don't leave a void */
.modal .mfoot{display:flex;align-items:center;gap:9px;justify-content:flex-end;padding:13px 18px;border-top:1px solid var(--line2);background:var(--bg2)}

/* ----------------------------------------------------------- 14. drawer   */
.drawer-back{align-items:stretch;justify-content:flex-end;padding:0}
.drawer{
  width:min(480px,100%);height:100%;display:flex;flex-direction:column;
  background:var(--panel);border-left:1px solid var(--line);
  box-shadow:var(--shadow-lg);
  animation:drawerIn .22s var(--ease) both;
}
.drawer.left{border-left:0;border-right:1px solid var(--line);animation-name:drawerInL}
@keyframes drawerIn{from{transform:translateX(100%)}to{transform:none}}
@keyframes drawerInL{from{transform:translateX(-100%)}to{transform:none}}
.drawer .dhead{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--line2)}
.drawer .dhead h2{font-size:15px;font-weight:600}
.drawer .dhead .iconbtn{margin-left:auto}
.drawer .dbody{padding:18px;overflow:auto;flex:1 1 auto}

/* ------------------------------------------------------------ 15. toast   */
.toastwrap{position:fixed;right:18px;bottom:18px;z-index:300;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.toast{
  display:flex;align-items:center;gap:9px;max-width:420px;
  padding:10px 15px;border-radius:var(--pill);
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-lg);
  color:var(--txt);font-size:12.5px;
  animation:toastIn .2s var(--ease) both;
}
.toast.leaving{animation:toastOut .2s var(--ease) both}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(6px)}}
.toast .dot{width:7px;height:7px;border-radius:50%;background:var(--faint);flex:0 0 auto}
.toast.t-green .dot{background:var(--green)}
.toast.t-red .dot{background:var(--red)}
.toast.t-amber .dot{background:var(--amber)}
.toast.t-accent .dot{background:var(--accent)}

/* ------------------------------- 16. kpi / empty / spinner / donut / pct  */
.kpi{
  display:flex;flex-direction:column;gap:3px;
  padding:14px 16px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-card);box-shadow:var(--shadow);min-width:0;
}
.kpi .k-label{font-size:10px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--faint)}
.kpi .k-value{font-size:26px;font-weight:300;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15}
.kpi .k-sub{font-size:11.5px;color:var(--muted)}
.kpi.t-green .k-value{color:var(--green)}
.kpi.t-amber .k-value{color:var(--amber)}
.kpi.t-red .k-value{color:var(--red)}
.kpi.t-accent .k-value{color:var(--accent)}
.kpirow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}

.empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  padding:56px 24px;text-align:center;color:var(--muted);
}
.empty .eic{
  width:44px;height:44px;border-radius:var(--pill);
  display:flex;align-items:center;justify-content:center;
  background:var(--bg2);color:var(--faint);border:1px solid var(--line);
}
.empty h3{font-size:14.5px;font-weight:600;color:var(--txt)}
.empty p{font-size:12.5px;color:var(--muted);max-width:46ch;margin:0}

.spinner{
  width:18px;height:18px;border-radius:50%;display:inline-block;flex:0 0 auto;
  border:2px solid var(--line);border-top-color:var(--accent);
  animation:spin .7s linear infinite;
}
.spinner.lg{width:28px;height:28px;border-width:2.5px}
@keyframes spin{to{transform:rotate(360deg)}}
.loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:52px;color:var(--muted);font-size:12.5px}

.donut{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.donut svg{display:block;transform:rotate(-90deg)}
.donut .dcenter{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
}
.donut .dpct{font-size:20px;font-weight:300;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.donut .dlbl{font-size:9px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--faint)}
.donut .seg-completed{stroke:var(--green)}
.donut .seg-missing{stroke:var(--amber)}
.donut .seg-inactive{stroke:var(--line)}

.pctbar{display:inline-flex;align-items:center;gap:8px;min-width:92px;width:100%}
.pctbar .track{flex:1 1 auto;height:4px;border-radius:var(--pill);background:var(--bg2);overflow:hidden;min-width:34px}
.pctbar .fill{display:block;height:100%;border-radius:var(--pill);background:var(--accent);transition:width var(--t) var(--ease)}
.pctbar.p-green .fill{background:var(--green)}
.pctbar.p-amber .fill{background:var(--amber)}
.pctbar.p-red .fill{background:var(--red)}
.pctbar .val{font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--muted);min-width:32px;text-align:right}

/* --------------------------------------------- 17. split (master-detail)  */
/* left rail has a 320px floor, right takes the rest; both size with the
   window — never two fixed-width cards */
.split{display:grid;grid-template-columns:minmax(320px,22%) minmax(0,1fr);gap:16px;align-items:start}
.split > .rail{position:sticky;top:calc(var(--bar-h) + var(--bar2-h,0px) + 16px);max-height:calc(100vh - var(--bar-h) - var(--bar2-h,0px) - 32px);overflow:auto}
.split > .detail{min-width:0}
.split.wide-rail{grid-template-columns:minmax(360px,28%) minmax(0,1fr)}

/* card grid used by Training / Tools / dashboards */
.cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.tile{
  display:flex;flex-direction:column;gap:8px;padding:16px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);
  box-shadow:var(--shadow);color:inherit;text-decoration:none;
  transition:all var(--t) var(--ease);
}
a.tile:hover{transform:translateY(-1px);border-color:var(--faint);text-decoration:none}
.tile .tic{
  width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--accent);
}
.tile h3{font-size:14px;font-weight:600}
.tile p{font-size:12.5px;color:var(--muted);margin:0;line-height:1.5}
.tile .foot{display:flex;align-items:center;gap:7px;margin-top:auto;padding-top:4px;color:var(--muted);font-size:11.5px}

/* ------------------------------------------------ 18. responsive + print  */
/* nothing in the bar may shrink, so it has to give things up on the way down
   or the userbtn walks off the right edge (1280 and 1366 are both in here) */
@media (max-width:1420px){
  .brand .ver{display:none}
  .nav .pill{padding:7px 11px}
  .search{flex-basis:200px;min-width:132px}
}
@media (max-width:1340px){
  .userbtn .uname{display:none}
  .userbtn{padding:0 8px}
}
@media (max-width:1220px){
  .topbar{gap:10px;padding:0 14px}
  .search{flex-basis:180px;min-width:120px}
  .switcher{max-width:210px}
}
@media (max-width:1024px){
  :root{--gutter:14px}
  /* the secondary items are already in Menus; below 1024 the rest of the nav
     joins them there so the bar never wraps */
  .topbar .nav.primary .pill.collapsible{display:none}
  .menusrow .pill.only-narrow{display:inline-flex}
  .userbtn .uname{display:none}
  .userbtn{padding:0 8px}
  .split{grid-template-columns:1fr}
  .split > .rail{position:static;max-height:none}
}
@media (max-width:760px){
  .topbar .nav.primary{display:none}
  .menusbtn{padding:7px 10px}
  .search{display:none}
  .page-title h1{font-size:22px}
}

/* short viewports (a laptop at 125 %: 1254×568): the chrome gives the grid
   its rows back — a lower bar, a tighter Menus row, a smaller page title.
   Nothing here applies above 760 px tall. */
@media (max-height:760px){
  :root{--bar-h:50px}
  .menusrow{padding:2px var(--gutter)}
  .menusrow .nav .pill{padding-top:5px;padding-bottom:5px}
  .page{padding-top:10px;padding-bottom:10px}
  .page-title{margin:0 0 12px}
  .page-title h1{font-size:22px}
  .page-title .sub{padding-bottom:3px}
  .filterbar{padding:6px 14px;margin-bottom:10px}
  .filterbar .fb{gap:3px}
  .filterbar .fb.inline{padding-bottom:5px}
  .filterbar select,.filterbar input:not([type=checkbox]),.filterbar .combo-i{height:30px}
  .dg-pager{padding-top:6px;padding-bottom:0}
}

@media print{
  .topbar,.menusrow,#splash,.toastwrap,.filterbar .fbend,.iconbtn,.page-title .acts{display:none!important}
  body{background:#fff;color:#000}
  .page{padding:0}
  .card{box-shadow:none;border-color:#ccc;break-inside:avoid}
}

/* ------------------------------------------------------ 19. login card    */
/* The one prose-shaped exception to full-width: a centred card on the gray
   page, no chrome behind it. */
.login{
  min-height:calc(100vh - 90px);
  display:flex;align-items:center;justify-content:center;
  padding:40px 20px;
}
.login .lcard{
  width:100%;max-width:376px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);
  box-shadow:var(--shadow-lg);padding:28px 26px 24px;
}
.login .lmark{display:flex;justify-content:center;margin-bottom:22px}
.login .lmark img{height:30px;width:auto}
html[data-theme="dark"] .login .lmark img{filter:brightness(0) invert(1);opacity:.92}
.login h1{font-size:19px;font-weight:600;text-align:center;letter-spacing:-.01em}
.login .lsub{text-align:center;color:var(--muted);font-size:12.5px;margin:4px 0 20px}
.login .field input{width:100%}
.login .lactions{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.login .lalt{display:flex;justify-content:center}
.login .lfoot{margin-top:20px;text-align:center;color:var(--faint);font-size:11px;letter-spacing:.06em;text-transform:uppercase}