/* ══════════════════════════════════════════════════════════════════════════
   plenum.css — a hand-authored control-plane UI.

   Design intent (not a template):
   · The signature is a DUAL accent that maps straight onto the physics: cold air
     (ice-blue, supply) + hot air (red, return). Surfaces are warm true-grey.
     No product-rainbow, no off-the-shelf Tailwind-blue. The cold blue also carries
     up/positive money, the hot red down/negative — so the colours tell the HVAC story.
   · Layout breaks the uniform grid: a featured revenue "hero", asymmetric stat
     band, one featured product card + compact secondaries. Varied aspect ratios.
   · Depth comes from layered shadows whose colour is tinted with the ink
     undertone (never pure black), paired with warm hairline borders.
   · Motion is spring-eased and restrained; focus states are custom-drawn.
   · Type is a fixed modular scale; headers sit at medium/semibold, never heavy.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  /* ── warm true-grey neutrals ── */
  --paper:#f4f6fa; --panel:#ffffff; --panel-2:#eef2f7; --sunken:#e9edf3;
  --ink:#131722; --ink-2:#4a5568; --ink-3:#6b7585;
  --hair:#e4e9f1; --hair-2:#d5dce8;
  /* ── signature dual accent: cold air (ice-blue, supply) is the interactive brand ── */
  --accent:#1493e6; --accent-2:#0f76bf; --accent-wash:#dcecfb; --accent-ring:rgba(20,147,230,.30);
  /* hot-cold pair: cold = supply / up / positive, hot = return / down / negative */
  --cold:#1493e6; --hot:#e23b3b;
  /* soft status tints (derive from cold/amber so they track the theme automatically) */
  --pos-soft:color-mix(in srgb,var(--cold) 12%,transparent); --amber-soft:color-mix(in srgb,var(--amber) 14%,transparent);
  --pos:var(--cold); --neg:var(--hot);
  /* ── type: fixed modular scale ── */
  --font:'Sora',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',monospace;
  --t-micro:10.5px; --t-xs:11.5px; --t-sm:12.5px; --t-base:13.5px;
  --t-md:15px; --t-lg:17px; --t-xl:20px; --t-2xl:25px; --t-3xl:33px;
  --track-cap:.145em; --track-tight:-.021em; --track-snug:-.012em;
  /* ── shape ── */
  --r-xs:7px; --r:11px; --r-lg:15px; --r-xl:19px;
  /* ── motion ──
     --spring OVERSHOOTS (~9% past target). It belongs to things arriving from
     nothing: a menu, a modal, a toast. `animation` only.
     --out is every `transition`, including the hover lift — a card that rises,
     retreats and settles under a pointer that never moved reads as wobble, not
     as life. Mirrors css/tokens.css:228; if one moves, both move. */
  --spring:cubic-bezier(.34,1.32,.52,1); --out:cubic-bezier(.22,.61,.36,1); --dur:.19s;
  /* ── depth: layered, ink-tinted (never pure black) ── */
  --sh-1:0 1px 1.5px rgba(28,26,22,.05),0 1px 2px rgba(28,26,22,.03);
  --sh-2:0 1px 2px rgba(28,26,22,.05),0 10px 20px -8px rgba(28,26,22,.11),0 22px 38px -20px rgba(28,26,22,.12);
  --sh-pop:0 2px 8px rgba(28,26,22,.07),0 22px 50px -14px rgba(28,26,22,.24);
  --ring:0 0 0 2px var(--panel),0 0 0 4px var(--accent-ring);
  /* back-compat aliases (login.html + inline refs) */
  --bg:var(--paper); --card:var(--panel); --card2:var(--panel-2); --bg2:var(--sunken);
  --line:var(--hair); --line2:var(--hair-2); --ink3:var(--ink-3); --ink2:var(--ink-2);
  --accent-ink:var(--accent-2); --accent2:var(--accent-2); --red:var(--neg); --green:var(--pos); --amber:#b45309;
  --design:var(--ink-2); --dispatch:var(--ink-2); --books:var(--ink-2); --portal:var(--ink-2);
  /* soft status washes — derived so they re-resolve per theme */
  --hot-soft:color-mix(in srgb, var(--hot) 12%, transparent);
  --accent-soft:color-mix(in srgb, var(--accent) 12%, transparent);
}
:root[data-theme="dark"]{
  --paper:#0e0f12; --panel:#1b1e25; --panel-2:#23272f; --sunken:#15171c;
  --ink:#f2f4f8; --ink-2:#aeb6c4; --ink-3:#8b95a7;
  --hair:#2c313b; --hair-2:#3a404c;
  --accent:#33b1ff; --accent-2:#5cc0ff; --accent-wash:#0a2233; --accent-ring:rgba(51,177,255,.32);
  --cold:#33b1ff; --hot:#ff5c5c; --amber:#f5a623;
  --sh-1:0 1px 2px rgba(0,0,0,.42);
  --sh-2:0 1px 2px rgba(0,0,0,.42),0 12px 28px -8px rgba(0,0,0,.55),0 28px 50px -22px rgba(0,0,0,.6);
  --sh-pop:0 18px 46px -12px rgba(0,0,0,.66);
}

/* ── The shared canon rail's own five, plus its chrome height ───────────────
   css/rail-canon.css reads 38 custom properties. This file already declares 32
   of them and rail-canon declares 4 itself; these are the remainder, and they
   live HERE because plenum is the hub's token layer — the same role tokens.css
   plays for Books, Dispatch and Canvas, which carry an identical block.

   They are kept separate from the palette above because they are CONTRAST
   FIXES rather than colour choices. --accent-2 on --accent-wash is 4.00:1,
   under AA, and it is what every "you are here" row uses; #fff on --accent is
   3.28:1 light and 2.37:1 dark. Values match tokens.css:545 / :562 exactly, so
   the hub cannot drift from the three surfaces already on the rail.

   Declared unconditionally, not under html.hub-v3: an unresolved custom
   property is not a fallback, it is an invalid value, and the rail's one
   filled control would render with no ground at all. They cost nothing on a
   page with no rail on it. */
:root{
  --nr-on-wash:#0b5f9b;
  --nr-cta:#0f76bf; --nr-cta-hover:#0b5f9b; --nr-cta-ink:#ffffff;
  --nr-on-accent:#0e0f12;
  --nr-danger-ink:#b32626;
  /* What the sub-page side nav sticks under. Was a bare 78px in hub-page.css,
     tuned to the 58px topbar — so it already slid beneath the 47px subnav. One
     number now, and the canon rail's 54px is what it follows. */
  --hub-chrome:54px; --hub-side-top:74px;
  /* Where a popover sits once the phone pins it to the viewport instead of to
     its trigger: the gutter each side, and the drop below the rail. Same
     numbers rail-canon.css uses for its own panels — named here because the
     hub has no --sp-* scale (tokens.css cannot be loaded on these pages: its
     :root would repaint 37 of plenum's own tokens, the whole palette among
     them). */
  --hub-panel-x:12px; --hub-panel-y:6px;

  /* Customer-portal document state (css/portal-v2.css). Declared HERE, not in
     that component file, for the same reason the --nr-* block above is: colour
     belongs in the token layer, and a colour defined next to the thing that
     consumes it is a colour that gets forked. These are deliberately NOT the
     accent — the accent says "where you are" and "what to press", so it cannot
     also say "overdue". Every one is paired with an icon and a word in the
     markup, so colour is never the only signal. */
  --pv-owing:#c62828; --pv-owing-wash:#fdeaea; --pv-on-owing:#ffffff;
  --pv-paid:#1f7a45;  --pv-paid-wash:#e2f3e9;
  --pv-await:#9a5b00; --pv-await-wash:#fbeedc;
  --pv-on-brand:#ffffff;
}
:root[data-theme="dark"]{
  --nr-on-wash:var(--accent-2);
  --nr-cta:var(--accent); --nr-cta-hover:var(--accent-2); --nr-cta-ink:#0e0f12;
  --nr-danger-ink:var(--hot);
  /* The dark danger and success tones are LIGHT, so their filled controls take
     dark ink — white on #ff7a7a fails contrast, dark ink on it passes. */
  --pv-owing:#ff7a7a; --pv-owing-wash:#3a1414; --pv-on-owing:#2a0b0b;
  --pv-paid:#5fd08c;  --pv-paid-wash:#102c1b;
  --pv-await:#f0b95c; --pv-await-wash:#35270e;
  --pv-on-brand:#04121c;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);background:var(--paper);color:var(--ink);font-size:var(--t-base);line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"ss01" 1}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.muted{color:var(--ink-3)}
[hidden]{display:none!important}

/* one custom focus system for the whole app (no browser defaults) */
:where(a,button,[tabindex],input){outline:none}
:where(a,button,input,.clickable,.wapp,.org):focus-visible{box-shadow:var(--ring);border-radius:var(--r-xs)}
.kpi:focus-visible,.stat:focus-visible,.app:focus-visible{box-shadow:var(--ring)}

/* ── TOP BAR ─────────────────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;
  padding:0 26px;height:58px;background:color-mix(in srgb,var(--paper) 80%,transparent);
  backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--hair)}
/* ── tier-2 hub subnav (secondary bar, matches the toprail mockup) ─────────── */
.hub-subnav{position:sticky;top:58px;z-index:39;display:flex;align-items:center;gap:1px;height:47px;padding:0 26px;
  background:color-mix(in srgb,var(--paper) 80%,transparent);backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--hair)}
.hub-subnav .tab{display:inline-flex;align-items:center;gap:8px;height:100%;padding:0 13px;font-size:13px;font-weight:500;
  color:var(--ink-2);cursor:pointer;position:relative;white-space:nowrap;border-bottom:2px solid transparent;
  text-decoration:none;transition:color var(--dur)}
.hub-subnav .tab i{font-size:17px;color:var(--ink-3);transition:color var(--dur)}
.hub-subnav .tab:hover{color:var(--ink)}
.hub-subnav .tab:hover i{color:var(--ink-2)}
.hub-subnav .tab.active{color:var(--accent-2);font-weight:600;border-bottom-color:var(--accent)}
.hub-subnav .tab.active i{color:var(--accent)}
.hub-subnav .tag{font-family:var(--mono);font-size:10px;font-weight:600;line-height:1;padding:3px 6px;border-radius:999px;
  background:var(--hot-soft);color:var(--hot)}
.hub-subnav .tag.cold{background:color-mix(in srgb,var(--cold) 14%,transparent);color:var(--cold)}
.hub-subnav .appdot{width:9px;height:9px;border-radius:3px;flex:none}
.hub-subnav .appdot.design{background:#1493e6}
.hub-subnav .appdot.dispatch{background:#5b6b82}
.hub-subnav .appdot.books{background:#e23b3b}
.hub-subnav .tab.ico{padding:0 10px}
.hub-subnav .tb-apps{margin-left:auto;display:flex;align-items:center;gap:1px}
.hub-subnav .tb-div{width:1px;height:20px;background:var(--hair-2);margin:0 8px;flex:none}
@media (max-width:760px){
  .hub-subnav{padding:0 16px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
  .hub-subnav::-webkit-scrollbar{display:none}
  .hub-subnav .tb-apps{margin-left:0}
  .hub-subnav .tb-apps::before{content:"";width:1px;height:20px;background:var(--hair-2);margin:0 8px;flex:none}
}

.brand{display:flex;align-items:center;gap:9px;font-weight:600;letter-spacing:var(--track-snug);font-size:var(--t-md);flex-shrink:0}
.brand .dot{width:23px;height:23px;border-radius:6px;background:var(--accent);display:grid;place-items:center;color:#fff;font-size:13px}
.brand .dot i{color:#fff}
.brand .brand-logo{width:28px;height:28px;object-fit:contain;display:block;flex-shrink:0}

.pop{position:relative}
.waffle-btn{display:flex;align-items:center;gap:7px;height:33px;padding:0 12px;border-radius:9px;flex-shrink:0;
  border:1px solid var(--hair-2);background:var(--panel);cursor:pointer;font-size:var(--t-sm);font-weight:500;
  box-shadow:var(--sh-1);transition:border-color var(--dur) var(--out),box-shadow var(--dur) var(--out)}
.waffle-btn i{font-size:15px;color:var(--ink-2)}
.waffle-btn:hover,.waffle-btn[aria-expanded="true"]{border-color:var(--ink-3);box-shadow:var(--sh-2)}
.menu{position:absolute;top:44px;background:var(--panel);border:1px solid var(--hair-2);
  border-radius:16px;padding:9px;box-shadow:var(--sh-pop);z-index:50;
  transform-origin:top;animation:menu .16s var(--spring)}
@keyframes menu{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.waffle-menu{left:0;width:320px}
.waffle-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.wapp{display:flex;flex-direction:column;gap:9px;padding:13px;border-radius:12px;border:1px solid var(--hair);
  background:var(--panel);position:relative;cursor:pointer;text-align:left;
  transition:transform var(--dur) var(--out),border-color var(--dur) var(--out),background var(--dur)}
.wapp:hover{border-color:var(--hair-2);background:var(--panel-2);transform:translateY(-2px)}
.wapp .ic{width:29px;height:29px;border-radius:8px;display:grid;place-items:center;font-size:15px;
  background:var(--panel-2);color:var(--ink-2);border:1px solid var(--hair)}
.wapp b{font-size:var(--t-sm);font-weight:600}
.wapp span{font-size:var(--t-xs);color:var(--ink-3)}
.wapp.locked{opacity:.62}
.wapp .lock{position:absolute;top:12px;right:12px;font-size:13px;color:var(--ink-3)}
.menu-foot{margin-top:8px;padding:9px 8px 3px;border-top:1px solid var(--hair);display:flex;justify-content:space-between;
  align-items:center;font-size:var(--t-xs);color:var(--ink-3)}
.menu-foot a{color:var(--accent);font-weight:600;cursor:pointer;transition:color var(--dur)}
.menu-foot a:hover{color:var(--accent-2)}

.spacer{flex:1}
.tb-btn{width:33px;height:33px;border-radius:9px;border:1px solid var(--hair-2);background:var(--panel);flex-shrink:0;
  color:var(--ink-2);display:grid;place-items:center;cursor:pointer;position:relative;box-shadow:var(--sh-1);
  transition:color var(--dur) var(--out),border-color var(--dur) var(--out),transform var(--dur) var(--out)}
.tb-btn:hover,.tb-btn[aria-expanded="true"]{color:var(--ink);border-color:var(--ink-3)}
.tb-btn:active{transform:scale(.93)}
.tb-btn .badge{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  background:var(--accent);color:#fff;font-size:9px;font-weight:700;display:grid;place-items:center;font-family:var(--mono)}
.notif-menu{right:0;width:326px}
.notif-menu h4{font-size:var(--t-sm);font-weight:600;padding:4px 6px 10px}
.notif{display:flex;gap:11px;padding:10px 8px}
.notif .d{width:7px;height:7px;border-radius:50%;margin-top:5px;flex-shrink:0}
.notif p{font-size:var(--t-sm);line-height:1.4;font-weight:500}
.notif span{font-size:var(--t-micro);color:var(--ink-3)}
.notif-link{text-decoration:none;color:inherit;border-radius:10px;cursor:pointer;align-items:center;
  transition:background var(--dur) var(--out)}
.notif-link:hover{background:var(--panel-2)}
.notif .nic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:15px;flex-shrink:0;
  background:var(--panel-2);color:var(--ink-2);border:1px solid var(--hair)}
.notif .nic.urgent{background:color-mix(in srgb,var(--neg) 12%,var(--panel));color:var(--neg);border-color:color-mix(in srgb,var(--neg) 22%,var(--panel))}
.notif-row{display:flex;align-items:center;gap:2px}
.notif-row .notif-link{flex:1 1 auto;min-width:0}
.notif-x{flex-shrink:0;width:26px;height:26px;border:0;border-radius:7px;background:none;color:var(--ink-3);
  cursor:pointer;display:grid;place-items:center;font-size:14px;opacity:0;
  transition:opacity var(--dur) var(--out),background var(--dur) var(--out),color var(--dur) var(--out)}
.notif-row:hover .notif-x,.notif-x:focus-visible{opacity:1}
.notif-x:hover{background:var(--panel-2);color:var(--ink)}
@media (hover:none){.notif-x{opacity:.55}}

.org{display:flex;align-items:center;gap:8px;height:33px;padding:0 7px 0 9px;border-radius:9px;flex-shrink:0;
  border:1px solid var(--hair-2);background:var(--panel);cursor:pointer;box-shadow:var(--sh-1);
  transition:border-color var(--dur) var(--out)}
.org:hover,.org[aria-expanded="true"]{border-color:var(--ink-3)}
.org .av{width:22px;height:22px;border-radius:6px;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-size:10px;font-weight:600}
.org b{font-size:var(--t-sm);font-weight:600}
.org i{font-size:14px;color:var(--ink-3)}
.org-menu{right:0;width:284px}
.org-row{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:10px;cursor:pointer;transition:background var(--dur)}
.org-row:hover,.org-row.active{background:var(--panel-2)}
.org-row[data-switch-org]:hover .ti-arrows-exchange{color:var(--accent-2)}
.org-row .av{width:29px;height:29px;border-radius:8px;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-size:10.5px;font-weight:600}
.org-row b{font-size:var(--t-sm);display:block;line-height:1.25}
.org-row span{font-size:var(--t-micro);color:var(--ink-3)}
/* menu section label + vertical action rows + separators */
.menu-cap{font-family:var(--mono);font-size:9.5px;letter-spacing:var(--track-cap);text-transform:uppercase;
  color:var(--ink-3);font-weight:600;padding:5px 9px 8px}
.menu-sep{height:1px;background:var(--hair);margin:7px 5px}
.menu-links{display:flex;flex-direction:column;gap:1px}
.menu-link{display:flex;align-items:center;gap:11px;padding:9px 9px;border-radius:9px;cursor:pointer;
  font-size:var(--t-sm);font-weight:500;color:var(--ink-2);transition:background var(--dur) var(--out),color var(--dur) var(--out)}
.menu-link i{font-size:16px;color:var(--ink-3);transition:color var(--dur) var(--out)}
.menu-link:hover{background:var(--panel-2);color:var(--ink)}
.menu-link:hover i{color:var(--ink-2)}
.menu-link.danger:hover{background:color-mix(in srgb,var(--neg) 9%,var(--panel));color:var(--neg)}
.menu-link.danger:hover i{color:var(--neg)}

/* ── + New create button (hub topbar — mirrors the shared NDNav rail) ── */
.hub-new{display:flex;align-items:center;gap:7px;height:33px;padding:0 12px 0 10px;border:0;border-radius:9px;cursor:pointer;flex-shrink:0;
  background:var(--accent);color:#fff;font-size:var(--t-sm);font-weight:600;box-shadow:var(--sh-1);
  transition:filter var(--dur) var(--out),transform var(--dur) var(--out)}
.hub-new:hover,.hub-new[aria-expanded="true"]{filter:brightness(1.07)}
.hub-new:active{transform:scale(.96)}
.hub-new i:first-child{font-size:15px}
.hub-new .hub-new-chev{font-size:13px;opacity:.85}
.hub-new-menu{left:0;width:214px}
.hub-new-row{display:flex;align-items:center;gap:11px;padding:9px 9px;border-radius:9px;cursor:pointer;color:var(--ink-2);
  font-size:var(--t-sm);font-weight:500;text-decoration:none;transition:background var(--dur) var(--out),color var(--dur) var(--out)}
.hub-new-row:hover{background:var(--panel-2);color:var(--ink)}
.hub-new-row i{font-size:16px;color:var(--accent)}

/* ── AI-credit chip + buy popover (hub topbar) ── */
.hub-credit{display:flex;align-items:center;gap:7px;height:33px;padding:0 11px;border:1px solid var(--hair-2);border-radius:9px;cursor:pointer;flex-shrink:0;
  background:var(--panel);color:var(--ink);font-size:var(--t-sm);font-weight:600;box-shadow:var(--sh-1);transition:border-color var(--dur) var(--out)}
.hub-credit:hover,.hub-credit[aria-expanded="true"]{border-color:var(--ink-3)}
.hub-credit i{font-size:15px;color:var(--accent)}
.hub-credit .tnum{font-family:var(--mono)}
.hub-credit small{color:var(--ink-3);font-weight:500}
.hub-credit-menu{right:0;width:288px;padding:15px}
.hcm-k{font-family:var(--mono);font-size:9.5px;letter-spacing:var(--track-cap);text-transform:uppercase;color:var(--ink-3);font-weight:600}
.hcm-bal{font-size:24px;font-weight:600;letter-spacing:-.02em;margin-top:2px}
.hcm-bal small{font-size:var(--t-sm);color:var(--ink-3);font-weight:500;margin-left:4px}
.hcm-meter{height:7px;border-radius:5px;background:var(--panel-2);margin:12px 0 6px;overflow:hidden}
.hcm-meter i{display:block;height:100%;width:0;background:var(--accent);border-radius:5px;transition:width var(--dur) var(--out)}
.hcm-sub{font-size:var(--t-xs);color:var(--ink-3)}
.hcm-cap{padding:13px 2px 8px}
.hcm-packs{display:flex;flex-direction:column;gap:7px}
.hcm-pack{display:flex;align-items:center;gap:11px;padding:9px 11px;border:1px solid var(--hair-2);border-radius:11px;background:var(--panel);color:var(--ink);cursor:pointer;font:inherit;transition:border-color var(--dur),background var(--dur)}
.hcm-pack:hover{border-color:var(--ink-3)}
.hcm-pack.is-on{border-color:var(--accent);background:var(--accent-wash)}
.hcm-radio{width:15px;height:15px;border-radius:50%;border:2px solid var(--hair-2);flex:none}
.hcm-pack.is-on .hcm-radio{border-color:var(--accent);box-shadow:inset 0 0 0 3px var(--accent)}
.hcm-amt{flex:1;font-size:var(--t-sm);font-weight:600}
.hcm-price{font-family:var(--mono);font-weight:600;font-size:var(--t-sm)}
.hcm-cta{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;height:38px;margin-top:12px;border:0;border-radius:10px;background:var(--accent);color:#fff;font-size:var(--t-sm);font-weight:600;cursor:pointer;transition:filter var(--dur)}
.hcm-cta:hover{filter:brightness(1.07)}
.hcm-cta i{font-size:15px}
.hcm-note{font-size:var(--t-xs);color:var(--ink-3);line-height:1.45;margin-top:11px;padding-top:11px;border-top:1px solid var(--hair)}
.hcm-foot{display:block;text-align:center;margin-top:9px;font-size:var(--t-xs);font-weight:600;color:var(--accent);cursor:pointer;text-decoration:none}
@media (max-width:640px){
  .hub-new .hub-new-lbl,.hub-new .hub-new-chev{display:none}
  .hub-new{padding:0;width:33px;justify-content:center}
  .hub-credit small{display:none}
}
@media (max-width:480px){ .hub-credit{display:none} }

/* ── Pick up where you left off (resume carousel — hub home) ── */
.resume-wrap[hidden]{display:none}
.rz-ctl{display:flex;align-items:center;gap:9px}
.rz-arrow{width:30px;height:30px;border-radius:8px;border:1px solid var(--hair-2);background:var(--panel);display:grid;place-items:center;cursor:pointer;color:var(--ink-2);box-shadow:var(--sh-1);font-size:16px;transition:color var(--dur) var(--out),border-color var(--dur) var(--out)}
.rz-arrow:hover{color:var(--ink);border-color:var(--ink-3)}
.rz-count{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink-2);min-width:44px;text-align:center}
.rz-count b{color:var(--ink)}
.rz-list{display:flex;flex-direction:column}
.rz-card{display:none;padding:17px 20px 20px;background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.rz-card.show{display:block}
.rz-empty{display:flex!important;align-items:center;gap:13px}
.rz-empty>i{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:20px;background:var(--accent-wash);color:var(--accent);flex:none}
.rz-empty b{display:block;font-size:var(--t-md);font-weight:600}
.rz-empty span{font-size:12.5px;color:var(--ink-3)}
.rz-top{display:flex;align-items:center;gap:16px}
.rz-who{flex:1;min-width:0}
.rz-who .cust{font-size:15px;font-weight:600;letter-spacing:var(--track-snug);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rz-who .meta{font-size:12.5px;color:var(--ink-3);margin-top:3px}
.rz-who .meta .val{font-family:var(--mono);font-weight:600;color:var(--ink-2)}
.rz-next{font-size:11.5px;font-weight:600;color:var(--accent-2);white-space:nowrap;text-align:right}
.rz-next .k{font-family:var(--mono);font-size:9px;letter-spacing:var(--track-cap);text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:2px}
.rz-cont{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:10px;cursor:pointer;font-size:12.5px;font-weight:600;color:#fff;background:var(--accent);border:0;box-shadow:var(--sh-1);white-space:nowrap;flex:none;text-decoration:none;transition:filter var(--dur),transform var(--dur) var(--out)}
.rz-cont:hover{filter:brightness(1.07)}.rz-cont:active{transform:scale(.97)}
.rz-cont.ghost{color:var(--accent);background:var(--accent-wash)}
.rz-cont i{font-size:15px}
.rz-track{display:flex;margin-top:20px}
.rz-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:9px;position:relative;min-width:0}
.rz-step::before{content:"";position:absolute;top:12px;left:calc(-50% + 13px);width:calc(100% - 26px);height:2px;background:var(--hair-2);z-index:0}
.rz-step:first-child::before{display:none}
.rz-dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:13px;z-index:1;background:var(--panel);border:2px solid var(--hair-2);color:var(--ink-3)}
.rz-lbl{display:flex;flex-direction:column;align-items:center;gap:2px}
.rz-lbl b{font-size:11.5px;font-weight:600;color:var(--ink-3)}
.rz-owner{font-size:9px;font-family:var(--mono);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);opacity:.7}
.rz-step.done .rz-dot{background:var(--cold);border-color:transparent;color:#fff}
.rz-step.done .rz-lbl b{color:var(--ink)}
.rz-step.done::before{background:var(--cold)}
.rz-step.active .rz-dot{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 4px var(--accent-ring)}
.rz-step.active .rz-lbl b{color:var(--ink)}
@media (max-width:640px){
  .rz-top{flex-wrap:wrap;gap:12px}
  .rz-next{order:3;width:100%;text-align:left}
  .rz-track{flex-direction:column;margin-top:14px}
  .rz-step{flex:none;flex-direction:row;align-items:center;gap:13px;height:44px}
  .rz-step .rz-dot{flex:none}
  .rz-lbl{flex-direction:row;align-items:baseline;gap:8px}
  .rz-step::before{top:-22px;left:12px;width:2px;height:44px}
  .rz-step:first-child::before{display:none}
}

/* revenue-hero sparkline (cumulative revenue this month) */
.stat--hero .hero-spark{display:block;width:100%;height:52px;margin:14px 0 2px}
.hero-spark[hidden]{display:none}

/* product launcher — 3 equal cards (matches the mockup) */
.apps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.app-card{display:flex;flex-direction:column;gap:14px;padding:20px;border-radius:var(--r-lg);cursor:pointer;
  background:var(--panel);border:1px solid var(--hair);box-shadow:var(--sh-1);position:relative;overflow:hidden;
  text-decoration:none;color:inherit;
  transition:transform var(--dur) var(--out),border-color var(--dur),box-shadow var(--dur)}
.app-card:hover{transform:translateY(-3px);border-color:var(--hair-2);box-shadow:var(--sh-2)}
.app-card::after{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--accent);opacity:0;transition:opacity var(--dur)}
.app-card:hover::after{opacity:1}
.app-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff}
.app-ic i{font-size:22px}
.app-ic.design{background:linear-gradient(140deg,#1493e6,#0f76bf)}
.app-ic.dispatch{background:linear-gradient(140deg,#5b6b82,#3a4657)}
.app-ic.books{background:linear-gradient(140deg,#e23b3b,#b8302f)}
.app-ic.other{background:linear-gradient(140deg,var(--accent),var(--accent-2))}
.app-card h4{font-size:15px;font-weight:600;letter-spacing:var(--track-snug)}
.app-card p{font-size:12.5px;color:var(--ink-3);line-height:1.5}
.app-card .go{margin-top:auto;display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:600;color:var(--ink-2)}
.app-card .go i{color:var(--accent);font-size:16px}
.app-card.locked{opacity:.72;border-style:dashed;background:var(--panel);font:inherit;text-align:left}
@media (max-width:760px){.apps{grid-template-columns:1fr}}

/* ── LAYOUT SHELL ────────────────────────────────────────── */
.wrap{max-width:1600px;margin:0 auto;padding:48px 26px 96px}
.hello{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.hello .eyebrow{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--track-cap);text-transform:uppercase;color:var(--ink-3);font-weight:600}
.hello h1{font-size:var(--t-3xl);font-weight:600;letter-spacing:var(--track-tight);margin-top:10px;line-height:1.05}
.hello .sub{color:var(--ink-2);font-size:var(--t-md);margin-top:9px;max-width:52ch}
.plan-pill{display:flex;align-items:center;gap:16px;padding:11px 15px;border-radius:12px;background:var(--panel);
  border:1px solid var(--hair);box-shadow:var(--sh-1);white-space:nowrap}
.plan-pill .k{font-family:var(--mono);font-size:9.5px;letter-spacing:var(--track-cap);text-transform:uppercase;color:var(--ink-3)}
.plan-pill b{font-size:var(--t-base);font-weight:600;margin-top:2px;display:block}
.plan-pill .up{font-size:var(--t-xs);font-weight:600;color:var(--accent);cursor:pointer;transition:color var(--dur)}
.plan-pill .up:hover{color:var(--accent-2)}

/* section label */
.sect-head{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 16px}
.sect-head h2{font-family:var(--mono);font-size:var(--t-xs);font-weight:600;letter-spacing:var(--track-cap);text-transform:uppercase;color:var(--ink-3)}
.sect-head a{font-size:var(--t-sm);color:var(--ink-2);font-weight:500;cursor:pointer;transition:color var(--dur)}
.sect-head a:hover{color:var(--ink)}

/* ── STAT BAND (asymmetric, broken grid) ─────────────────── */
.stats{display:grid;grid-template-columns:1.55fr minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;gap:14px;margin:40px 0 46px}
.stat{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-lg);padding:20px;box-shadow:var(--sh-1);
  display:flex;flex-direction:column;min-height:118px;
  transition:transform var(--dur) var(--out),box-shadow var(--dur) var(--out),border-color var(--dur) var(--out)}
.stat.clickable{cursor:pointer}
.stat.clickable:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--hair-2)}
.stat.clickable:active{transform:translateY(-1px)}
.stat .slab{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--track-cap);text-transform:uppercase;color:var(--ink-3);font-weight:600}
.stat .snum{font-size:var(--t-2xl);font-weight:600;letter-spacing:var(--track-tight);font-variant-numeric:tabular-nums;margin-top:auto;line-height:1}
.stat .ssub{font-size:var(--t-xs);color:var(--ink-3);margin-top:8px}
/* featured revenue hero — tall, larger figure, ledger breakdown */
.stat--hero{grid-column:1;grid-row:1 / span 2;padding:24px;justify-content:flex-start}
.stat--hero .slab{color:var(--ink-2)}
.stat--hero .snum{font-size:var(--t-3xl);margin-top:20px}
.stat--hero .hero-break{display:flex;gap:0;margin-top:auto;padding-top:18px;border-top:1px solid var(--hair)}
.hero-break .hb{flex:1;display:flex;flex-direction:column;gap:3px}
.hero-break .hb+.hb{border-left:1px solid var(--hair);padding-left:18px}
.hero-break .hb .hbk{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.hero-break .hb .hbv{font-size:var(--t-md);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:var(--track-snug)}
.stat--designs{grid-column:2;grid-row:1}
.stat--jobs{grid-column:3;grid-row:1}
/* attention = a distinct slim alert strip, not another identical card */
.stat--alert{grid-column:2 / span 2;grid-row:2;flex-direction:row;align-items:center;gap:15px;min-height:0;
  background:var(--accent-wash);border-color:color-mix(in srgb,var(--accent) 26%,var(--panel))}
.stat--alert .aic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;
  background:color-mix(in srgb,var(--accent) 18%,var(--panel));color:var(--accent-2);font-size:17px}
.stat--alert .atxt b{font-size:var(--t-base);font-weight:600;display:block}
.stat--alert .atxt span{font-size:var(--t-xs);color:var(--ink-2)}
.stat--alert .anum{margin-left:auto;font-size:var(--t-xl);font-weight:600;font-variant-numeric:tabular-nums;color:var(--accent-2)}
.stat--alert .arr{color:var(--accent-2);font-size:16px;transition:transform var(--dur) var(--out)}
.stat--alert:hover .arr{transform:translateX(3px)}
/* zero items → positive all-clear state (dashboard.js swaps the class/icon) */
.stat--alert.all-clear{background:color-mix(in srgb,var(--pos) 8%,var(--panel));border-color:color-mix(in srgb,var(--pos) 26%,var(--panel))}
.stat--alert.all-clear .aic{background:color-mix(in srgb,var(--pos) 16%,var(--panel));color:var(--pos)}
.stat--alert.all-clear .anum,.stat--alert.all-clear .arr{color:var(--pos)}

/* ── PRODUCT LAUNCHER (featured + compact) ───────────────── */
.apps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.app{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-lg);padding:18px;
  display:flex;flex-direction:column;gap:15px;box-shadow:var(--sh-1);
  transition:transform var(--dur) var(--out),box-shadow var(--dur) var(--out),border-color var(--dur) var(--out)}
.app:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--hair-2)}
.app .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:19px;flex-shrink:0;
  background:var(--panel-2);color:var(--ink);border:1px solid var(--hair)}
.app-name b{font-size:var(--t-md);font-weight:600;letter-spacing:var(--track-snug);display:block}
.app-name span{font-size:var(--t-xs);color:var(--ink-3)}
.app-top{display:flex;align-items:center;gap:13px}
.app .open{margin-left:auto;font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);display:flex;align-items:center;gap:4px;cursor:pointer;transition:color var(--dur)}
.app .open:hover{color:var(--ink)}
.app .open i{transition:transform var(--dur) var(--out)}
.app .open:hover i{transform:translate(2px,-2px)}
.app-stat{display:flex;gap:26px}
.app-stat .s .n{font-size:var(--t-xl);font-weight:600;letter-spacing:var(--track-tight);font-variant-numeric:tabular-nums;line-height:1}
.app-stat .s .l{font-size:var(--t-micro);color:var(--ink-3);margin-top:5px;font-family:var(--mono);letter-spacing:.04em;text-transform:uppercase}
.app-cta{display:flex;align-items:center;gap:9px;margin-top:auto;flex-wrap:wrap}
/* featured: full width, horizontal, more presence */
.app--featured{grid-column:1 / -1;flex-direction:row;align-items:center;gap:28px;padding:22px 26px;
  background:linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--panel-2) 40%,var(--panel)))}
.app--featured .ic{width:46px;height:46px;font-size:23px;border-radius:13px}
.app--featured .af-id{display:flex;align-items:center;gap:15px;min-width:230px}
.app--featured .app-name b{font-size:var(--t-lg)}
.app--featured .app-stat{gap:34px;margin-left:8px}
.app--featured .app-cta{margin-left:auto;margin-top:0}
/* locked / upsell — quieter, dashed */
.app.locked{background:transparent;border-style:dashed;box-shadow:none}
.app.locked:hover{transform:none;box-shadow:none;border-color:var(--hair-2)}
.app.locked .ic{background:transparent;color:var(--ink-3)}
.app.locked .app-name b{color:var(--ink-2)}
.upsell-note{font-size:var(--t-sm);color:var(--ink-2);line-height:1.55}

/* ── AI CREDITS METER (feature_ai_credits) ───────────────
   Compact usage bar between the greeting and the setup checklist. --aic ramps
   the accent from cold (plenty) to hot (low) via the .low class. */
.ai-credits{--aic:var(--cold);display:flex;align-items:center;gap:16px;margin-top:28px;margin-bottom:22px;
  background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-lg);padding:13px 18px;box-shadow:var(--sh-1)}
.ai-credits.low{--aic:var(--hot)}
.ai-credits .aic-l{display:flex;align-items:center;gap:11px;flex:1 1 auto;min-width:0}
.ai-credits .aic-l>div{min-width:0}
.aic-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:17px;flex-shrink:0;
  background:color-mix(in srgb,var(--aic) 15%,transparent);color:var(--aic);border:1px solid color-mix(in srgb,var(--aic) 30%,transparent)}
.ai-credits .aic-l b{font-size:var(--t-sm);font-weight:600;display:block;letter-spacing:var(--track-snug)}
.aic-sub{display:block;font-size:var(--t-micro);color:var(--ink-3);font-family:var(--mono);letter-spacing:.03em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aic-bar{flex:0 1 220px;max-width:220px;height:6px;border-radius:99px;background:var(--panel-2);overflow:hidden;min-width:80px}
.aic-bar i{display:block;height:100%;border-radius:99px;background:var(--aic)}
.ai-credits .aic-r{flex:0 0 auto;text-align:right}
.ai-credits .aic-r b{font-size:var(--t-lg);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:var(--track-tight);color:var(--aic)}
.ai-credits .aic-r span{font-size:var(--t-micro);color:var(--ink-3);margin-left:4px}
.ai-credits .aic-buy{flex:0 0 auto;appearance:none;cursor:pointer;font:inherit;font-size:var(--t-micro);font-weight:600;line-height:1;
  letter-spacing:var(--track-snug);padding:8px 14px;border-radius:99px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  color:var(--aic);border:1px solid color-mix(in srgb,var(--aic) 35%,transparent);
  background:color-mix(in srgb,var(--aic) 12%,transparent);
  transition:background var(--dur) var(--out),transform var(--dur) var(--out)}
.ai-credits .aic-buy .ti{flex:0 0 auto;font-size:1.2em;line-height:1;letter-spacing:normal}
.ai-credits .aic-buy:hover{background:color-mix(in srgb,var(--aic) 20%,transparent);transform:translateY(-1px)}
.ai-credits .aic-buy:active{transform:translateY(0)}

/* ── WORK PIPELINE (feature_hub_pipeline) ─────────────────
   "Ledger" treatment: one quiet panel, the golden path as hairline-divided
   cells — colour is reduced to a small stage dot (each .stage carries a --sc
   accent ramped cold→hot along the pipeline, set inline in dashboard.js), the
   numbers do the talking. Needs-action nudges surface as an amber "↳ n to …"
   line; stages with nothing to do keep an empty sub line so baselines align.
   ≤760px: the strip folds to a 2×2 grid (an odd last cell goes full-width). */
.pipeline-wrap{margin-bottom:26px}
.pipeline{display:flex;background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);overflow:hidden}
.stage{--sc:var(--cold);flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:7px;cursor:pointer;
  padding:17px 20px 15px;border-left:1px solid var(--hair);
  transition:background var(--dur) var(--out)}
.stage:first-child{border-left:0}
.stage:hover{background:color-mix(in srgb,var(--sc) 4%,var(--panel))}
.stage:focus-visible{outline:2px solid var(--sc);outline-offset:-2px;border-radius:var(--r-xs)}
.stage-label{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:var(--track-cap);text-transform:uppercase;color:var(--ink-3);font-weight:600;white-space:nowrap}
.stage-dot{width:7px;height:7px;border-radius:50%;background:var(--sc);flex-shrink:0}
.stage-count{font-size:var(--t-3xl);font-weight:600;letter-spacing:var(--track-tight);
  font-variant-numeric:tabular-nums;line-height:1;color:var(--ink)}
.stage-act{border:0;background:none;padding:0;cursor:pointer;text-align:left;font:inherit;
  font-size:var(--t-xs);font-weight:600;color:var(--amber);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage-act::before{content:"↳ "}
.stage-act:hover{text-decoration:underline;text-underline-offset:3px}
/* resting sub line keeps cell heights equal; swapped out when the nudge shows */
.stage-sub{font-size:var(--t-xs);color:var(--ink-3);min-height:17px}
.stage-act:not([hidden])+.stage-sub{display:none}
@media (max-width:760px){
  .pipeline{display:grid;grid-template-columns:1fr 1fr}
  .stage{padding:15px 17px 13px;border-left:0}
  .stage:nth-child(2n){border-left:1px solid var(--hair)}
  .stage:nth-child(n+3){border-top:1px solid var(--hair)}
  .stage:last-child:nth-child(odd){grid-column:1 / -1;border-left:0}
  .stage-count{font-size:var(--t-2xl)}
}
/* slim apps strip once the pipeline is the centerpiece — every tile is compact
   (Canvas included; renderApps drops its featured variant in pipeline mode), and
   the strip is pure quick-access, so stat rows and CTA buttons are hidden. */
.apps--slim{grid-template-columns:repeat(5,minmax(0,1fr))}
.apps--slim .app{padding:14px 15px;gap:11px}
.apps--slim .app--featured{grid-column:auto}
.apps--slim .app-stat,.apps--slim .app-cta{display:none}

/* buttons */
.btn{height:35px;padding:0 15px;border-radius:9px;border:1px solid transparent;font-weight:600;font-size:var(--t-sm);
  cursor:pointer;display:inline-flex;align-items:center;gap:7px;letter-spacing:var(--track-snug);
  transition:transform var(--dur) var(--out),background var(--dur) var(--out),border-color var(--dur),box-shadow var(--dur)}
.btn:active{transform:scale(.96)}
.btn i{font-size:15px}
.btn-primary{background:var(--ink);color:var(--paper);box-shadow:var(--sh-1)}
.btn-primary:hover{box-shadow:var(--sh-2)}
.btn-ghost{background:var(--panel);color:var(--ink-2);border-color:var(--hair-2)}
.btn-ghost:hover{color:var(--ink);border-color:var(--ink-3)}
.btn-accent{background:var(--accent);color:#fff;box-shadow:var(--sh-1)}
.btn-accent:hover{background:var(--accent-2);box-shadow:var(--sh-2)}

/* ── ACTIVITY (ledger) + AGENDA ──────────────────────────── */
.cols{display:grid;grid-template-columns:1.5fr 1fr;gap:14px;margin-top:52px}
.panel{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-lg);padding:20px 22px;box-shadow:var(--sh-1)}
.panel .ph{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px}
.panel h3{font-size:var(--t-base);font-weight:600;letter-spacing:var(--track-snug)}
.panel .ph small{font-size:var(--t-xs);color:var(--ink-3)}
.panel .ph small a{cursor:pointer;transition:color var(--dur)}
.panel .ph small a:hover{color:var(--ink)}
.feed{display:flex;flex-direction:column}
.ev{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:13px;padding:13px 0;border-top:1px solid var(--hair)}
.ev:first-child{border-top:none}
.ev .eic{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font-size:14px;
  background:var(--panel-2);color:var(--ink-2);border:1px solid var(--hair)}
.ev .body p{font-size:var(--t-sm);line-height:1.45}
.ev .body p b{font-weight:600}
.ev .meta{display:flex;align-items:center;gap:7px;margin-top:2px;font-size:var(--t-micro);color:var(--ink-3);
  font-family:var(--mono);letter-spacing:.03em}
.ev .amt{font-family:var(--mono);font-weight:600;font-size:var(--t-sm);font-variant-numeric:tabular-nums;text-align:right;color:var(--pos)}
/* agenda */
.ag{display:grid;grid-template-columns:46px 2px 1fr;align-items:start;gap:14px;padding:13px 0;border-top:1px solid var(--hair)}
.ag:first-child{border-top:none}
.ag .time{font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-2);font-variant-numeric:tabular-nums;padding-top:1px}
.ag .bar{width:2px;height:100%;border-radius:2px;background:var(--hair-2)}
.ag.now .bar{background:var(--accent)}
.ag .info b{font-size:var(--t-sm);font-weight:600;display:block}
.ag .info span{font-size:var(--t-xs);color:var(--ink-3);margin-top:2px;display:block}

/* ── SKELETON LOADERS (mirror real layout) ───────────────── */
.skel{position:relative;overflow:hidden;background:var(--panel-2);border-radius:6px;display:inline-block}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ink) 7%,transparent),transparent);
  animation:shimmer 1.4s var(--out) infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}
.sk-num{height:26px;width:82px} .sk-num-lg{height:34px;width:140px}
.sk-line{height:10px;width:100%} .sk-line.sm{width:60%} .sk-line.xs{width:38%}
.sk-chip{height:19px;width:64px;border-radius:6px}
.sk-circ{width:26px;height:26px;border-radius:7px}
.ev.sk,.ag.sk{pointer-events:none}

/* ── REVEAL: soften the skeleton→content swap (no abrupt pop) ─────────────── */
@keyframes ndReveal{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.nd-reveal{animation:ndReveal .34s var(--out) both}
@media (prefers-reduced-motion:reduce){.nd-reveal{animation:none}}

/* ── EMPTY STATES (designed, not afterthoughts) ──────────── */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;padding:30px 18px 24px;color:var(--ink-3)}
.empty .ei{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:18px;
  background:var(--panel-2);color:var(--ink-3);border:1px solid var(--hair)}
.empty b{font-size:var(--t-sm);color:var(--ink-2);font-weight:600}
.empty span{font-size:var(--t-xs);max-width:230px;line-height:1.55}

/* toast */
.toasts{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:var(--ink);color:var(--paper);border-radius:11px;padding:11px 16px;font-size:var(--t-sm);font-weight:500;
  box-shadow:var(--sh-pop);display:flex;align-items:center;gap:9px;animation:menu .18s var(--spring)}
.toast i{font-size:16px;color:var(--accent)}

/* clickable ticket rows + thread modal */
.list-row.is-clickable{cursor:pointer;transition:background .12s,border-color .12s}
.list-row.is-clickable:hover{background:var(--panel-2)}
.list-row.is-clickable:focus-visible{outline:none;box-shadow:var(--ring)}
.modal-overlay{position:fixed;inset:0;z-index:90;background:rgba(8,10,14,.55);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px}
.modal-overlay[hidden]{display:none}
.modal-card{background:var(--panel);border:1px solid var(--hair-2);border-radius:16px;box-shadow:var(--sh-pop);width:100%;max-width:560px;display:flex;flex-direction:column;max-height:86vh;overflow:hidden;animation:menu .18s var(--spring)}
.modal-head{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border-bottom:1px solid var(--hair)}
.modal-head .mh-main{flex:1;min-width:0}
.modal-head h3{margin:0;font-size:var(--t-md);font-weight:650;color:var(--ink)}
.modal-head .mh-sub{display:block;margin-top:3px;font-size:var(--t-xs);color:var(--ink-3)}
.icon-btn{width:32px;height:32px;flex:0 0 auto;border-radius:9px;border:1px solid var(--hair-2);background:var(--panel);color:var(--ink-2);cursor:pointer;display:grid;place-items:center;font-size:16px}
.icon-btn:hover{color:var(--ink);border-color:var(--ink-3)}
.ticket-thread{padding:16px 18px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.tmsg{max-width:82%;padding:10px 13px;border-radius:12px;font-size:var(--t-sm);line-height:1.5}
.tmsg-who{font-size:var(--t-xs);color:var(--ink-3);margin-bottom:3px;font-weight:600}
.tmsg-body{white-space:pre-wrap;color:var(--ink)}
.tmsg-you{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:4px}
.tmsg-you .tmsg-who{color:rgba(255,255,255,.8)}
.tmsg-you .tmsg-body{color:#fff}
.tmsg-staff{align-self:flex-start;background:var(--panel-2);border-bottom-left-radius:4px}
.tmsg-note{align-self:center;font-size:var(--t-xs);color:var(--ink-3);padding:4px 0}
.ticket-reply{border-top:1px solid var(--hair);padding:12px 18px;display:flex;flex-direction:column;gap:10px}
.ticket-reply textarea{width:100%;resize:vertical;border:1px solid var(--hair-2);border-radius:10px;padding:10px 12px;background:var(--panel);color:var(--ink);font:inherit;font-size:var(--t-sm)}
.ticket-reply-actions{display:flex;justify-content:space-between;gap:8px}

.foot{max-width:1160px;margin:0 auto;padding:0 26px 48px}
.foot .box{border-top:1px solid var(--hair);padding:18px 2px 0;font-size:var(--t-xs);color:var(--ink-3);line-height:1.65;max-width:78ch}
.foot .box b{color:var(--ink-2);font-weight:600}

/* ── GLOBAL SEARCH (command palette) ─────────────────────── */
.search-overlay{position:fixed;inset:0;z-index:90;display:flex;justify-content:center;align-items:flex-start;
  padding:96px 20px 20px;background:color-mix(in srgb,var(--ink) 34%,transparent);backdrop-filter:blur(4px);
  animation:menu .14s var(--out)}
.search-box{width:100%;max-width:580px;background:var(--panel);border:1px solid var(--hair-2);border-radius:var(--r-lg);
  box-shadow:var(--sh-pop);overflow:hidden;display:flex;flex-direction:column;max-height:72vh}
.search-head{display:flex;align-items:center;gap:13px;padding:16px 18px;border-bottom:1px solid var(--hair)}
.search-head i{font-size:20px;color:var(--ink-3)}
.search-in{flex:1;border:none;background:none;outline:none;color:var(--ink);font-family:inherit;font-size:var(--t-lg);font-weight:500;letter-spacing:var(--track-snug)}
.search-in::placeholder{color:var(--ink-3);font-weight:400}
.search-kbd{font-family:var(--mono);font-size:var(--t-micro);color:var(--ink-3);border:1px solid var(--hair-2);
  border-radius:6px;padding:2px 7px;background:var(--panel-2)}
.search-results{overflow-y:auto;padding:8px;min-height:96px}
.search-group{font-family:var(--mono);font-size:9.5px;letter-spacing:var(--track-cap);text-transform:uppercase;
  color:var(--ink-3);font-weight:600;padding:12px 10px 6px}
.sr{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:10px;cursor:pointer;
  transition:background var(--dur) var(--out)}
.sr:hover,.sr.sel{background:var(--panel-2)}
.sr .sic{width:30px;height:30px;border-radius:8px;flex-shrink:0;display:grid;place-items:center;font-size:15px;
  background:var(--panel-2);color:var(--ink-2);border:1px solid var(--hair)}
.sr.sel .sic,.sr:hover .sic{color:var(--accent-2)}
.sr .stxt{min-width:0;flex:1}
.sr .stxt b{font-size:var(--t-sm);font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr .stxt span{font-size:var(--t-xs);color:var(--ink-3)}
.sr .sarr{color:var(--ink-3);font-size:15px;opacity:0;transition:opacity var(--dur)}
.sr:hover .sarr,.sr.sel .sarr{opacity:1}
.search-empty{padding:40px 18px;text-align:center;color:var(--ink-3);font-size:var(--t-sm);line-height:1.55}
.search-foot{display:flex;align-items:center;gap:18px;padding:10px 16px;border-top:1px solid var(--hair);
  font-size:var(--t-xs);color:var(--ink-3)}
.search-foot > span{display:flex;align-items:center;gap:5px}
.skbd{font-family:var(--mono);font-size:10px;color:var(--ink-2);border:1px solid var(--hair-2);border-radius:5px;
  min-width:17px;height:17px;padding:0 4px;display:inline-grid;place-items:center;background:var(--panel-2)}

/* ── responsive ──────────────────────────────────────────── */
@media (max-width:920px){
  .stats{grid-template-columns:1fr 1fr}
  .stat--hero{grid-column:1 / -1;grid-row:auto}
  .stat--designs{grid-column:1;grid-row:auto}.stat--jobs{grid-column:2;grid-row:auto}
  .stat--alert{grid-column:1 / -1;grid-row:auto}
  .apps{grid-template-columns:1fr 1fr}
  .apps--slim{grid-template-columns:repeat(3,minmax(0,1fr))}
  .app--featured{flex-direction:column;align-items:flex-start;gap:16px}
  .app--featured .app-cta{margin-left:0}
  .cols{grid-template-columns:1fr}
  .hello{flex-direction:column;align-items:flex-start;gap:16px}
}
/* App tiles carry an icon + name + stat + CTA row, so two-up gets cramped well
   before the 560px phone breakpoint — drop them to a single column earlier. */
@media (max-width:680px){
  .apps{grid-template-columns:1fr}
  .apps--slim{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .stats,.apps,.apps--slim{grid-template-columns:1fr}
  /* Reset the ≤920 two-up placements — otherwise grid-column:2 on Jobs forces a
     phantom second track and the stat cards stay cramped 2-up on phones. */
  .stat--hero,.stat--designs,.stat--jobs,.stat--alert{grid-column:1 / -1}
  .app--featured .af-id{min-width:0}
  .org b,.brand span:not(.dot){display:none}
  /* The full topbar (logo + Apps label + 4 icons + org) overflows 390px and the
     browser squishes the fixed-size buttons into ovals — tighten the gap and drop
     the Apps button to icon-only so every control keeps its square footprint. */
  .topbar{gap:8px}
  .waffle-btn{padding:0 9px}
  .waffle-btn .wl,.waffle-btn .ti-chevron-down{display:none}
  /* Reclaim edge space on phones: 26px gutters leave narrow cards. */
  .wrap{padding:34px 16px 72px}
  .topbar,.foot{padding-left:16px;padding-right:16px}
  .app{padding:16px}
  .stat{padding:16px}
  .hello h1{font-size:var(--t-2xl)}
  /* The credit meter's 3-across row (label · bar · count) can't hold on phones —
     wrap the bar onto its own full-width line below the label + remaining count. */
  .ai-credits{flex-wrap:wrap;gap:10px 14px}
  .ai-credits .aic-l{order:1;flex:1 1 0}
  .ai-credits .aic-r{order:2}
  .ai-credits .aic-buy{order:4;flex:1 1 100%;justify-content:center}
  .aic-bar{order:3;flex:1 1 100%;min-width:0;max-width:none}
  .stat--hero .hero-break{flex-wrap:wrap;gap:14px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* ── Direct-messaging drawer: token bridge ─────────────────────────────────
   The shared messenger (js/messaging/dm.js + dm-ui.js) styles itself from a
   generic token set (--bg-card / --text / --border / --accent …) that the app
   design systems provide. The hub uses its own names (--panel / --ink / --hair
   …), so without this bridge the drawer + launcher fall back to their hardcoded
   dark defaults and render dark-on-light on the hub. Map the messenger tokens
   onto the hub palette; because the hub tokens flip with the light/dark theme,
   the drawer follows the hub theme automatically. */
.dm-drawer,.dm-launch{
  --bg-card:var(--panel); --bg-input:var(--panel-2); --bg-hover:var(--panel-2);
  --surface-hover:var(--panel-2); --border:var(--hair-2);
  --text:var(--ink); --text-primary:var(--ink);
  --text-secondary:var(--ink-2); --text-muted:var(--ink-3);
  --accent-light:var(--accent-wash);
}

/* ── First-run setup checklist (hub home; dashboard.js renderSetup) ──────── */
.setup{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-lg);padding:18px 20px;box-shadow:var(--sh-1);margin:24px 0 0}
.setup[hidden]{display:none}
.setup-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.setup-head b{display:block;font-size:var(--t-md);font-weight:600}
.setup-head span{display:block;font-size:var(--t-sm);color:var(--ink-3);margin-top:2px}
.setup-x{flex-shrink:0;width:28px;height:28px;border:0;border-radius:8px;background:transparent;color:var(--ink-3);cursor:pointer;font-size:16px;display:grid;place-items:center}
.setup-x:hover{background:var(--panel-2);color:var(--ink)}
.setup-bar{height:6px;border-radius:99px;background:var(--sunken);overflow:hidden;margin-bottom:16px}
.setup-bar>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent-2),var(--accent));transition:width .5s var(--out)}
.setup-steps{display:flex;flex-direction:column;gap:8px}
.setup-step{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:11px;border:1px solid var(--hair-2);background:var(--panel);text-decoration:none;color:inherit;transition:border-color var(--dur) var(--out),transform var(--dur) var(--out)}
a.setup-step:hover{border-color:var(--accent);transform:translateY(-1px)}
.setup-step.done{opacity:.62}
.setup-step .sb{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;font-size:13px;flex-shrink:0;background:var(--accent-wash);color:var(--accent-2);border:1px dashed var(--accent-ring)}
.setup-step.done .sb{background:color-mix(in srgb,var(--pos) 16%,var(--panel));color:var(--pos);border:1px solid transparent}
.setup-step .sl{flex:1;font-size:var(--t-sm);font-weight:500}
/* The one-line hint under a step (health-card `subs`). Set as <em> so it still
   reads as secondary with stylesheets off, un-italicised here. */
.setup-step .sl em{display:block;font-style:normal;font-weight:400;font-size:var(--t-xs);color:var(--ink-3);margin-top:2px}
/* Tone bands (health-card): the same 0–100 fill can't say whether one step is
   left or only one is done, so the colour does. `complete` is the only one that
   leaves the accent — finished is not more accent, it's a different fact. */
.setup-bar[data-tone="complete"]>i{background:var(--pos)}
.setup-bar[data-tone="unknown"]>i{background:var(--hair-2)}
.setup-step .sgo{color:var(--ink-3);font-size:15px}