/* ============================================================
   SKEWSET USSD — design direction sample "Signal"
   Canvas + sheet layout · serif titling · three palettes.
   Standalone: no build, no network, no images.
   ============================================================ */

/* ---------- 1. NEUTRALS + STATUS (light) -------------------- */
:root{
  --canvas:#ECEEF4; --sheet:#FFFFFF; --sheet-2:#F7F8FC; --sheet-3:#EDEFF6; --inset:#F4F6FB;
  --line:#E0E4EE; --line-2:#C6CDDC;
  --ink:#141A24; --ink-2:#4E5768; --ink-3:#7C869A;

  --ok:#1F7A4C;   --ok-wash:#E4F3EA;   --ok-line:#BEE3CF;
  --warn:#96680A; --warn-wash:#FBF1DA; --warn-line:#EEDCA8;
  --danger:#B32626;--danger-wash:#FBE7E7;--danger-line:#F0C6C6;
  --info:#1D4ED8; --info-wash:#E7EEFC; --info-line:#C3D5F6;
  --quiet:#5D6270;--quiet-wash:#EEF0F4;--quiet-line:#DFE2E9;

  --t1:#3F5FA8; --t2:#0E7180; --t3:#5C7A21; --t4:#A05A2C; --t5:#6A4AA8; --t6:#9C3A5A;

  --shadow-1:0 1px 2px rgba(20,24,35,.05);
  --shadow-2:0 2px 4px -1px rgba(20,24,35,.07), 0 8px 20px -10px rgba(20,24,35,.18);
  --shadow-3:0 18px 44px -12px rgba(20,24,35,.26), 0 4px 12px -6px rgba(20,24,35,.12);

  /* ui-serif / ui-sans-serif / ui-monospace resolve to the platform's own
     typefaces — New York, SF Pro and SF Mono on Apple, Segoe UI Variable and
     Cascadia on Windows. They are already on the machine, already hinted for
     the screen, and cost nothing to load. Inter and JetBrains Mono stay in the
     stack for anyone who has them; the self-hosting path is in the notes. */
  --serif:ui-serif,"New York","Iowan Old Style",Charter,"Palatino Linotype",Palatino,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI",Inter,ui-sans-serif,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,"JetBrains Mono","Cascadia Mono",Menlo,Consolas,monospace;

  /* How strongly a card wears its identity tint. One place to dial the whole
     console up or down; dark needs a touch more because the tints are pastels. */
  --mix-card:7%; --mix-head:18%; --mix-head-2:10%; --mix-th:15%; --mix-row:13%;
  --mix-kpi:9%; --mix-kpi-hover:18%;

  /* ---- typography controls (the Type lab writes these) ----
     One scale for every size, four rungs for every weight, one tracking nudge
     for titling. Nothing in the stylesheet sets a raw px size or weight. */
  --tscale:1;
  --w1:500; --w2:600; --w3:700; --w4:800;   /* "Thick" — see the Type lab */
  --track:0em;
  --icon-stroke:1.95;

  --r-s:6px; --r-m:10px; --r-l:14px; --r-xl:18px;
  --ease:cubic-bezier(.32,.72,0,1);
}

/* ---------- 2. NEUTRALS + STATUS (dark) --------------------- */
:root[data-theme="dark"]{
  --canvas:#0B0C0F; --sheet:#141519; --sheet-2:#17181D; --sheet-3:#1F2027; --inset:#0F1013;
  --line:#25262E; --line-2:#383A44;
  --ink:#F2F3F5; --ink-2:#A2A7B3; --ink-3:#71757F;

  --ok:#54C98D;   --ok-wash:#0E2A1D;   --ok-line:#1D5537;
  --warn:#E3B341; --warn-wash:#2B2108; --warn-line:#5E4614;
  --danger:#F08787;--danger-wash:#2E1416;--danger-line:#7C2C2C;
  --info:#7FB0FF; --info-wash:#101E38; --info-line:#24406E;
  --quiet:#9AA0AC;--quiet-wash:#1C1D23;--quiet-line:#2C2E36;

  --t1:#8CA6E4; --t2:#5BC4D4; --t3:#A8C766; --t4:#DFA271; --t5:#B4A0EC; --t6:#E68AA2;

  --mix-card:11%; --mix-head:22%; --mix-head-2:13%; --mix-th:17%; --mix-row:15%;
  --mix-kpi:12%; --mix-kpi-hover:22%;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 2px 6px rgba(0,0,0,.5), 0 10px 24px -12px rgba(0,0,0,.7);
  --shadow-3:0 20px 50px -12px rgba(0,0,0,.72), 0 4px 14px rgba(0,0,0,.5);
}

/* ---------- 3. PALETTES (accent + neutral bias) ------------- */
[data-palette="ink"]{
  --accent:#24467F; --accent-h:#1B3765; --accent-fg:#FFFFFF;
  --accent-wash:#E9EFF9; --accent-line:#C6D6EE; --accent-on-wash:#1B3765;
}
[data-palette="ink"][data-theme="dark"]{
  --accent:#8CADEE; --accent-h:#A7C2F5; --accent-fg:#0B0C0F;
  --accent-wash:#152341; --accent-line:#2B4677; --accent-on-wash:#B9CFF7;
}
[data-palette="verdigris"]{
  --canvas:#EDEDE4; --sheet:#FFFEFA; --sheet-2:#F8F8F1; --sheet-3:#F0F0E7; --inset:#F6F6EF;
  --line:#DCDCCF; --line-2:#C3C4B3; --ink:#1A1C15; --ink-2:#585C4C; --ink-3:#878B78;
  --accent:#0E6A5F; --accent-h:#0A534A; --accent-fg:#FFFFFF;
  --accent-wash:#E2F0EC; --accent-line:#B5D8D0; --accent-on-wash:#0A534A;
  --t1:#0E6A5F; --t2:#3F6E93; --t3:#6E7A1E; --t4:#A65A33; --t5:#6B5B8E; --t6:#9A4A4A;
}
[data-palette="verdigris"][data-theme="dark"]{
  --canvas:#0E0F0C; --sheet:#171814; --sheet-2:#1B1C17; --sheet-3:#24251F; --inset:#111210;
  --line:#2A2B24; --line-2:#3C3D34; --ink:#F1F0EA; --ink-2:#A6A599; --ink-3:#75746A;
  --accent:#49C6B0; --accent-h:#66D6C2; --accent-fg:#0E0F0C;
  --accent-wash:#0D2B27; --accent-line:#18564C; --accent-on-wash:#8BDDCE;
  --t1:#49C6B0; --t2:#7FAAD4; --t3:#B7C55E; --t4:#DFA271; --t5:#B3A3D8; --t6:#DD9090;
}
[data-palette="brass"]{
  --canvas:#EEEBE3; --sheet:#FFFDF9; --sheet-2:#F9F6EF; --sheet-3:#F2EEE5; --inset:#F7F4EC;
  --line:#DFDACD; --line-2:#C7C1B0; --ink:#1C1A15; --ink-2:#5B564A; --ink-3:#8A8577;
  --accent:#8F5C12; --accent-h:#744A0D; --accent-fg:#FFFFFF;
  --accent-wash:#F9EFDA; --accent-line:#E7D3A6; --accent-on-wash:#744A0D;
  --t1:#8F5C12; --t2:#2E5E86; --t3:#4F7340; --t4:#8C4A4A; --t5:#5E5480; --t6:#7C4B70;
}
[data-palette="brass"][data-theme="dark"]{
  --accent:#DFAA4A; --accent-h:#ECBE68; --accent-fg:#0B0C0F;
  --accent-wash:#2A1F09; --accent-line:#5D4514; --accent-on-wash:#EFC97F;
  --t1:#DFAA4A; --t2:#79A8CE; --t3:#9DBE84; --t4:#D08C8C; --t5:#AEA0D0; --t6:#C98FBB;
}

/* first paint for viewers on "system" who never touch the toggle */
@media (prefers-color-scheme:dark){
  /* Guarded against BOTH stamps: once a theme is chosen (by the host, the toggle
     or the boot script) the explicit blocks own the tokens, so this fallback can
     never out-rank a palette's own dark values. */
  :root:not([data-theme="light"]):not([data-theme="dark"]){
    --canvas:#0B0C0F; --sheet:#141519; --sheet-2:#17181D; --sheet-3:#1F2027; --inset:#0F1013;
    --line:#25262E; --line-2:#383A44; --ink:#F2F3F5; --ink-2:#A2A7B3; --ink-3:#71757F;
    --ok:#54C98D; --ok-wash:#0E2A1D; --ok-line:#1D5537;
    --warn:#E3B341; --warn-wash:#2B2108; --warn-line:#5E4614;
    --danger:#F08787; --danger-wash:#2E1416; --danger-line:#7C2C2C;
    --info:#7FB0FF; --info-wash:#101E38; --info-line:#24406E;
    --quiet:#9AA0AC; --quiet-wash:#1C1D23; --quiet-line:#2C2E36;
    --t1:#8CA6E4; --t2:#5BC4D4; --t3:#A8C766; --t4:#DFA271; --t5:#B4A0EC; --t6:#E68AA2;
    --accent:#8CADEE; --accent-h:#A7C2F5; --accent-fg:#0B0C0F;
    --accent-wash:#152341; --accent-line:#2B4677; --accent-on-wash:#B9CFF7;
    --mix-card:11%; --mix-head:22%; --mix-head-2:13%; --mix-th:17%; --mix-row:15%;
    --mix-kpi:12%; --mix-kpi-hover:22%;
    --shadow-1:0 1px 2px rgba(0,0,0,.4);
    --shadow-2:0 2px 6px rgba(0,0,0,.5), 0 10px 24px -12px rgba(0,0,0,.7);
    --shadow-3:0 20px 50px -12px rgba(0,0,0,.72), 0 4px 14px rgba(0,0,0,.5);
  }
}

/* ---------- 4. BASE ---------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark}}
body{
  margin:0;color:var(--ink);
  /* one soft light source on the ground — the only layout flourish */
  background:
    radial-gradient(118% 68% at 50% -12%, color-mix(in srgb,var(--accent) 10%,var(--canvas)), transparent 62%),
    var(--canvas);
  background-attachment:fixed;
  font-family:var(--sans);font-size:calc(13px * var(--tscale));line-height:1.46;
  -webkit-font-smoothing:antialiased;
  /* every digit in the console is tabular so live numbers never reflow, and
     zero is slashed wherever the face offers it — this screen is full of
     session ids where O and 0 must not be a guess */
  font-variant-numeric:tabular-nums slashed-zero;
  font-optical-sizing:auto;
  font-synthesis-weight:none;   /* never fake a weight the family does not have */
}
h1,h2,h3,h4,p,figure{margin:0}
button,input,select{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
svg{flex:none}
/* Data is set in mono with ligatures off: "*384*22#" must show every glyph it
   contains, and a coding ligature would quietly redraw a USSD code. */
.mono{font-family:var(--mono);font-size:calc(11.5px * var(--tscale));letter-spacing:-.004em;font-variant-ligatures:none}
.sym{color:var(--ink-3)}                      /* the * and # in a code, stepped back */
.unit{font-size:.72em;font-weight:var(--w2);color:var(--ink-3);margin-left:1px;font-variant-numeric:normal}
/* prose reads better with proportional figures; only tabular data keeps them aligned */
p,.lead{text-wrap:pretty;font-variant-numeric:proportional-nums}
h1,h2,h3,h4{text-wrap:balance}
.muted{color:var(--ink-2)}.subtle{color:var(--ink-3)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sheet),0 0 0 4px var(--accent)}
.scroll::-webkit-scrollbar{width:9px;height:9px}
.scroll::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px;border:3px solid transparent;background-clip:content-box}
.scroll::-webkit-scrollbar-track{background:transparent}
.eyebrow{font-size:calc(10px * var(--tscale));font-weight:var(--w3);letter-spacing:.115em;text-transform:uppercase;color:var(--ink-3);
  font-variant-numeric:proportional-nums}

/* ---------- 5. SHELL ---------------------------------------
   The canvas is the ground; the working surface is a single raised sheet.
   The sidebar sits ON the canvas with no divider, so the active nav item can
   become a tab of the sheet itself — the nav and the content are one object. */
.frame{position:relative;max-width:1380px;margin:0 auto;padding:22px 22px 0;
  container-type:inline-size;container-name:app;
  transition:max-width .34s var(--ease)}
/* device preview: the console reflows to the frame, not the window, so phone and
   tablet are real layouts rather than a screenshot at a smaller size */
.frame[data-vp]{border:1px solid var(--line);border-radius:28px;background:var(--sheet-2);
  box-shadow:var(--shadow-2);padding:14px}
.frame[data-vp="tablet"]{max-width:872px}
.frame[data-vp="phone"]{max-width:412px}
.frame[data-vp] .app{height:min(760px,calc(100vh - 120px))}
.app{
  display:grid;grid-template-columns:238px minmax(0,1fr);column-gap:14px;
  height:min(830px,calc(100vh - 44px));min-height:640px;
  transition:grid-template-columns .28s var(--ease);
}
.app[data-rail="1"]{grid-template-columns:62px minmax(0,1fr)}
.side{display:flex;flex-direction:column;min-width:0;padding:2px 2px 10px 2px;gap:2px}

.brand{display:flex;align-items:center;gap:9px;height:46px;padding:0 8px;min-width:0}
.mark{
  width:26px;height:26px;border-radius:7px;flex:none;display:grid;place-items:center;
  background:linear-gradient(160deg,var(--accent),var(--accent-h));color:var(--accent-fg);
  font-family:var(--serif);font-size:calc(14px * var(--tscale));font-weight:var(--w3);letter-spacing:.01em;
  box-shadow:var(--shadow-1),inset 0 1px 0 rgba(255,255,255,.22);
}
.brand .name{font-family:var(--serif);font-size:calc(17px * var(--tscale));font-weight:var(--w3);letter-spacing:.004em;white-space:nowrap}
.brand .sub{font-family:var(--mono);font-size:calc(9.5px * var(--tscale));letter-spacing:.1em;color:var(--ink-3);
  border:1px solid var(--line);border-radius:4px;padding:1px 4px;text-transform:uppercase}

.tenant{
  display:flex;align-items:center;gap:8px;width:100%;margin:2px 0 10px;padding:7px 8px;
  background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-m);
  box-shadow:var(--shadow-1);cursor:pointer;text-align:left;
  transition:border-color .16s,box-shadow .16s,transform .16s var(--ease);
}
.tenant:hover{border-color:var(--line-2);box-shadow:var(--shadow-2);transform:translateY(-1px)}
.tenant .ava{width:24px;height:24px;border-radius:6px;flex:none;display:grid;place-items:center;
  background:var(--accent-wash);color:var(--accent-on-wash);border:1px solid var(--accent-line);
  font-size:calc(10px * var(--tscale));font-weight:var(--w4);letter-spacing:.02em}
.tenant .who{min-width:0;flex:1}
.tenant .who b{display:block;font-size:calc(12px * var(--tscale));font-weight:var(--w3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tenant .who span{display:block;font-family:var(--mono);font-size:calc(10px * var(--tscale));color:var(--ink-3)}
.tenant svg{color:var(--ink-3);transition:transform .16s var(--ease)}
.tenant:hover svg{transform:translateY(1px)}

.nav{flex:1;overflow-y:auto;min-height:0;padding-right:2px}
.navgroup{margin-top:14px}
.navgroup:first-child{margin-top:0}
.navgroup > .eyebrow{display:block;padding:0 8px 6px;font-size:calc(9.5px * var(--tscale))}
.navitem{
  position:relative;display:flex;align-items:center;gap:10px;height:32px;padding:0 9px;
  border-radius:var(--r-m);color:var(--ink-2);font-size:calc(12.5px * var(--tscale));font-weight:var(--w2);
  border:1px solid transparent;margin-bottom:1px;cursor:pointer;
  transition:color .15s,background-color .15s,border-color .15s,transform .15s var(--ease);
}
.navitem svg{width:15px;height:15px;stroke-width:1.7;color:var(--ink-3);transition:color .15s,transform .2s var(--ease)}
.navitem:hover{background:var(--sheet-3);color:var(--ink)}
.navitem:hover svg{color:var(--ink-2);transform:translateX(1px)}
.navitem .n{margin-left:auto;font-size:calc(10.5px * var(--tscale));color:var(--ink-3);font-variant-numeric:tabular-nums;
  background:var(--sheet-3);border-radius:20px;padding:1px 6px;transition:background-color .15s,color .15s}
.navitem:hover .n{background:var(--line)}
/* active = a tab cut from the sheet, with the accent bleeding in from the left rail */
.navitem.on{
  background:var(--sheet);border-color:var(--line);color:var(--ink);font-weight:var(--w3);
  box-shadow:var(--shadow-1);
}
.navitem.on::before{
  content:"";position:absolute;left:-2px;top:7px;bottom:7px;width:3px;border-radius:3px;
  background:var(--accent);
}
.navitem.on svg{color:var(--accent)}
.navitem.on .n{background:var(--accent-wash);color:var(--accent-on-wash)}
.side-foot{display:flex;align-items:center;gap:8px;padding:8px 4px 0;border-top:1px solid var(--line);margin-top:6px}
.lamp{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none;position:relative}
.lamp::after{content:"";position:absolute;inset:-3px;border-radius:50%;background:var(--ok);opacity:.22;animation:breathe 2.6s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(.6);opacity:.28}50%{transform:scale(1);opacity:0}}

/* rail mode */
.app[data-rail="1"] .brand{justify-content:center;padding:0}
.app[data-rail="1"] .brand .name,.app[data-rail="1"] .brand .sub,
.app[data-rail="1"] .tenant .who,.app[data-rail="1"] .tenant svg,
.app[data-rail="1"] .navgroup > .eyebrow,.app[data-rail="1"] .navitem span,
.app[data-rail="1"] .navitem .n,.app[data-rail="1"] .side-foot span{display:none}
.app[data-rail="1"] .tenant{justify-content:center;padding:7px 0}
.app[data-rail="1"] .navitem{justify-content:center;padding:0}
.app[data-rail="1"] .side-foot{justify-content:center}

/* ---------- 6. SHEET + TOPBAR ------------------------------ */
.sheet{
  display:flex;flex-direction:column;min-width:0;background:var(--sheet);
  border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-2);overflow:hidden;
}
.topbar{display:flex;align-items:center;gap:8px;height:50px;flex:none;padding:0 12px;border-bottom:1px solid var(--line);background:var(--sheet-2)}
.crumb{display:flex;align-items:center;gap:7px;font-size:calc(12px * var(--tscale));color:var(--ink-3);min-width:0}
.crumb b{color:var(--ink);font-weight:var(--w3)}
.crumb .sep{opacity:.5}
.search{
  display:flex;align-items:center;gap:9px;height:32px;min-width:262px;padding:0 13px;cursor:text;
  background:var(--sheet);border:1px solid var(--line);border-radius:999px;color:var(--ink-3);font-size:calc(12px * var(--tscale));
  transition:border-color .16s,box-shadow .16s,color .16s;
}
.search:hover{border-color:var(--line-2);color:var(--ink-2);box-shadow:var(--shadow-1)}
.search kbd{margin-left:auto;font-family:var(--mono);font-size:calc(9.5px * var(--tscale));border:1px solid var(--line);border-radius:4px;padding:1px 4px;background:var(--sheet-2)}
.iconbtn{
  width:31px;height:31px;display:grid;place-items:center;border-radius:999px;cursor:pointer;
  background:transparent;border:1px solid transparent;color:var(--ink-2);position:relative;
  transition:background-color .15s,color .15s,border-color .15s,transform .15s var(--ease);
}
.iconbtn:hover{background:var(--sheet-3);color:var(--ink);border-color:var(--line)}
.iconbtn:active{transform:scale(.94)}
.dot-badge{position:absolute;top:5px;right:5px;width:6px;height:6px;border-radius:50%;background:var(--danger);border:1.5px solid var(--sheet-2)}
.user{display:flex;align-items:center;gap:7px;height:31px;padding:0 10px 0 4px;border-radius:999px;cursor:pointer;font-size:calc(12px * var(--tscale));
  border:1px solid transparent;transition:background-color .15s,border-color .15s}
.user:hover{background:var(--sheet-3);border-color:var(--line)}
.user .ava{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;font-size:calc(9.5px * var(--tscale));font-weight:var(--w4);
  background:var(--sheet-3);border:1px solid var(--line);color:var(--ink-2)}

/* ---------- 7. PAGE + PRIMITIVES --------------------------- */
.page{flex:1;overflow-y:auto;min-height:0;padding:22px 22px 36px;
}
.page-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}
.page-head h1{font-family:var(--serif);font-size:calc(26px * var(--tscale));line-height:1.12;letter-spacing:-.004em;font-weight:var(--w3)}
.page-head p{margin-top:4px;font-size:calc(12.5px * var(--tscale));line-height:1.5;color:var(--ink-2);max-width:74ch}
.page-head .acts{margin-left:auto;display:flex;gap:8px;flex:none}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;height:32px;padding:0 15px;cursor:pointer;
  border-radius:999px;border:1px solid var(--line);background:var(--sheet);color:var(--ink);
  font-size:calc(12.5px * var(--tscale));font-weight:var(--w2);white-space:nowrap;box-shadow:var(--shadow-1);
  transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s,transform .15s var(--ease);
}
.btn svg{width:14px;height:14px;stroke-width:1.8}
.btn:hover{border-color:var(--line-2);background:var(--sheet-2);transform:translateY(-1px);box-shadow:var(--shadow-2)}
.btn:active{transform:translateY(0);box-shadow:var(--shadow-1)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-fg);
  box-shadow:0 2px 10px -3px color-mix(in srgb,var(--accent) 55%,transparent),inset 0 1px 0 rgba(255,255,255,.18)}
.btn.pri:hover{background:var(--accent-h);border-color:var(--accent-h);
  box-shadow:0 5px 16px -4px color-mix(in srgb,var(--accent) 62%,transparent),inset 0 1px 0 rgba(255,255,255,.18)}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--ink-2)}
.btn.ghost:hover{background:var(--sheet-3);color:var(--ink);box-shadow:none;transform:none}
.btn.sm{height:27px;padding:0 11px;font-size:calc(11.5px * var(--tscale))}

.badge{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 7px;border-radius:20px;
  font-size:calc(10.5px * var(--tscale));font-weight:var(--w3);letter-spacing:.004em;border:1px solid var(--quiet-line);background:var(--quiet-wash);color:var(--quiet)}
.badge::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.85}
.badge.ok{background:var(--ok-wash);border-color:var(--ok-line);color:var(--ok)}
.badge.warn{background:var(--warn-wash);border-color:var(--warn-line);color:var(--warn)}
.badge.bad{background:var(--danger-wash);border-color:var(--danger-line);color:var(--danger)}
.badge.acc{background:var(--accent-wash);border-color:var(--accent-line);color:var(--accent-on-wash)}
.badge.info{background:var(--info-wash);border-color:var(--info-line);color:var(--info)}
.badge.flat::before{display:none}

/* ---------- 8. CARDS --------------------------------------- */
.card{
  background:color-mix(in srgb,var(--tint,var(--accent)) var(--mix-card),var(--sheet));
  border:1px solid color-mix(in srgb,var(--tint,var(--accent)) 22%,var(--line));
  border-radius:var(--r-l);overflow:hidden;
  box-shadow:var(--shadow-1);transition:border-color .18s,box-shadow .18s,transform .18s var(--ease);
}
.card.lift:hover{border-color:var(--line-2);box-shadow:var(--shadow-2);transform:translateY(-2px)}
.card-head{
  display:flex;align-items:center;gap:11px;min-height:50px;padding:11px 16px;border-bottom:1px solid var(--line);
  /* the header band is where a card declares its subject colour; the body stays
     neutral so numbers are never read against a tint */
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--tint,var(--accent)) var(--mix-head),var(--sheet)),
    color-mix(in srgb,var(--tint,var(--accent)) var(--mix-head-2),var(--sheet)));
  border-bottom-color:color-mix(in srgb,var(--tint,var(--accent)) 24%,var(--line));
}
.card-head h2{font-size:calc(13px * var(--tscale));font-weight:var(--w3);letter-spacing:-.008em}
.card-head p{font-size:calc(11px * var(--tscale));color:var(--ink-3);margin-top:1px}
.card-head .acts{margin-left:auto;display:flex;align-items:center;gap:7px}
.chip{
  width:28px;height:28px;border-radius:9px;display:grid;place-items:center;flex:none;
  color:var(--tint,var(--accent));background:color-mix(in srgb,var(--tint,var(--accent)) 11%,var(--sheet));
  border:1px solid color-mix(in srgb,var(--tint,var(--accent)) 26%,transparent);
  transition:background-color .18s,transform .18s var(--ease);
}
.chip svg{width:14px;height:14px;stroke-width:1.8}
.card:hover .chip{background:color-mix(in srgb,var(--tint,var(--accent)) 18%,var(--sheet));transform:rotate(-4deg)}
.card-body{padding:16px}
[data-tint="1"]{--tint:var(--t1)}[data-tint="2"]{--tint:var(--t2)}
[data-tint="3"]{--tint:var(--t3)}[data-tint="4"]{--tint:var(--t4)}
[data-tint="5"]{--tint:var(--t5)}[data-tint="6"]{--tint:var(--t6)}

/* KPI strip: one card, six cells, a wash that arrives on hover */
.kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.kpi-card{margin-bottom:16px}
.kpi{position:relative;padding:13px 15px 12px;border-left:1px solid var(--line);cursor:default;overflow:hidden;
  background:color-mix(in srgb,var(--tint,var(--accent)) var(--mix-kpi),var(--sheet));
  transition:background-color .2s}
.kpi:first-child{border-left:0}
.kpi::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--tint,var(--accent));
  transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease)}
.kpi:hover{background:color-mix(in srgb,var(--tint,var(--accent)) var(--mix-kpi-hover),var(--sheet))}
.kpi:hover::after{transform:scaleX(1)}
.kpi .lab{display:flex;align-items:center;gap:6px;font-size:calc(11px * var(--tscale));color:var(--ink-2);font-weight:var(--w2);letter-spacing:.002em}
.kpi .lab svg{width:13px;height:13px;stroke-width:1.8;color:var(--tint,var(--accent));opacity:.85}
.kpi .valrow{display:flex;align-items:flex-end;gap:8px;margin-top:5px}
.kpi .val{font-size:calc(24px * var(--tscale));line-height:1.04;font-weight:var(--w3);letter-spacing:-.028em}
.kpi .foot{display:flex;align-items:baseline;gap:6px;margin-top:4px;min-height:16px}
.kpi .delta{font-size:calc(10.5px * var(--tscale));font-weight:var(--w3);white-space:nowrap}
.kpi .delta.up{color:var(--ok)}.kpi .delta.down{color:var(--danger)}
.kpi .note{font-size:calc(10.5px * var(--tscale));color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi svg.spark{margin-left:auto;margin-bottom:2px;opacity:.85;transition:opacity .2s,transform .2s var(--ease)}
.kpi:hover svg.spark{opacity:1;transform:translateY(-1px)}

.cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.stack{display:flex;flex-direction:column;gap:16px;min-width:0}

/* segmented control with a sliding thumb */
.seg{position:relative;display:flex;background:var(--sheet-3);border:1px solid var(--line);border-radius:7px;padding:2px}
.seg button{position:relative;z-index:1;height:22px;padding:0 9px;border:0;background:transparent;cursor:pointer;
  font-size:calc(11px * var(--tscale));font-weight:var(--w3);color:var(--ink-3);border-radius:5px;transition:color .18s}
.seg button[aria-pressed="true"]{color:var(--ink)}
.seg .thumb{position:absolute;top:2px;bottom:2px;border-radius:5px;background:var(--sheet);
  border:1px solid var(--line);box-shadow:var(--shadow-1);transition:transform .26s var(--ease),width .26s var(--ease)}

/* ---------- 9. TABLE --------------------------------------- */
table{width:100%;border-collapse:collapse}
thead th{
  position:sticky;top:0;background:color-mix(in srgb,var(--tint,var(--accent)) var(--mix-th),var(--sheet));text-align:left;font-size:calc(10px * var(--tscale));font-weight:var(--w3);
  letter-spacing:.105em;text-transform:uppercase;color:var(--ink-3);padding:0 15px;height:33px;
  border-bottom:1px solid var(--line);white-space:nowrap;
}
tbody tr{border-bottom:1px solid var(--line);cursor:pointer;transition:background-color .14s}
tbody tr:last-child{border-bottom:0}
tbody td{padding:0 15px;height:42px;font-size:calc(12px * var(--tscale));white-space:nowrap;position:relative}
tbody tr:hover{background:color-mix(in srgb,var(--tint,var(--accent)) var(--mix-row),var(--sheet))}
tbody tr td:first-child::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);
  transform:scaleY(0);transition:transform .18s var(--ease)
}
tbody tr:hover td:first-child::before{transform:scaleY(1)}
tbody tr .go{opacity:0;transform:translateX(-3px);transition:opacity .16s,transform .16s var(--ease);color:var(--ink-3)}
tbody tr:hover .go{opacity:1;transform:none}
td.right,th.right{text-align:right}

/* ---------- 10. SMALL PARTS -------------------------------- */
.meter{display:flex;height:9px;border-radius:5px;overflow:hidden;gap:2px;background:var(--sheet-3)}
.meter span{display:block;transition:flex-grow .5s var(--ease)}
.legend{display:grid;grid-template-columns:1fr 1fr;gap:9px 14px;margin-top:13px}
.legend div{display:flex;align-items:baseline;gap:6px;font-size:calc(11.5px * var(--tscale));padding-top:7px;border-top:2px solid var(--lc)}
.legend b{font-size:calc(14px * var(--tscale));font-weight:var(--w3);letter-spacing:-.02em}
.legend em{margin-left:auto;font-style:normal;color:var(--ink-3);font-size:calc(11px * var(--tscale))}
.kv{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-top:1px solid var(--line);font-size:calc(12px * var(--tscale))}
.kv:first-child{border-top:0}
.kv b{font-weight:var(--w3);font-variant-numeric:tabular-nums}
.listrow{display:flex;align-items:center;gap:11px;padding:11px 16px;border-top:1px solid var(--line);cursor:pointer;
  transition:background-color .15s,padding-left .18s var(--ease)}
.listrow:hover{background:color-mix(in srgb,var(--tint,var(--accent)) var(--mix-row),var(--sheet));padding-left:16px}
.listrow .sev{width:3px;align-self:stretch;border-radius:3px;background:var(--danger);flex:none}
.listrow .sev.warn{background:var(--warn)}
.listrow div{min-width:0;flex:1}
.listrow b{display:block;font-size:calc(12px * var(--tscale));font-weight:var(--w3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.listrow svg{color:var(--ink-3);opacity:0;transform:translateX(-4px);transition:opacity .16s,transform .16s var(--ease)}
.listrow:hover svg{opacity:1;transform:none}

/* ---------- 11. DRAWER ------------------------------------- */
.scrim{position:absolute;inset:0;background:rgba(12,14,20,.42);z-index:80;
  opacity:0;backdrop-filter:blur(0);animation:scrimin .4s ease forwards}
@keyframes scrimin{from{opacity:0;backdrop-filter:blur(0)}to{opacity:1;backdrop-filter:blur(4px)}}
:root[data-theme="dark"] .scrim{background:rgba(0,0,0,.62)}
@keyframes fade{to{opacity:1}}
.drawer{
  position:absolute;top:12px;right:12px;bottom:12px;width:min(580px,calc(100vw - 24px));z-index:90;
  display:flex;flex-direction:column;background:var(--sheet);border:1px solid var(--line);
  border-radius:22px;box-shadow:var(--shadow-3);overflow:hidden;
  animation:slide .42s cubic-bezier(.16,.86,.3,1.02);
}
/* settles rather than stops: a little travel, a little scale, no bounce you can name */
@keyframes slide{
  from{transform:translateX(34px) scale(.965);opacity:0}
  60%{opacity:1}
  to{transform:none;opacity:1}
}
/* the work steps back to make room, which is what a drawer is for */
.frame{transition:transform .42s cubic-bezier(.16,.86,.3,1.02),filter .42s ease}
.frame.pushed{transform:scale(.988) translateX(-10px);filter:saturate(.92) brightness(.985)}
@media (prefers-reduced-motion:reduce){ .frame{transition:none} .frame.pushed{transform:none;filter:none} }
.drawer-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 15%,var(--sheet)),var(--sheet))}
.drawer-body{padding:18px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.stat{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:13px;
  background:color-mix(in srgb,var(--tint,var(--accent)) var(--mix-card),var(--sheet));
  border:1px solid color-mix(in srgb,var(--tint,var(--accent)) 22%,var(--line))}
.stat b{display:block;font-size:calc(18px * var(--tscale));font-weight:var(--w3);letter-spacing:-.025em;line-height:1.15}
.seclabel{display:flex;align-items:center;gap:9px;margin:18px 0 9px}
.seclabel::after{content:"";flex:1;height:1px;background:var(--line)}
.seclabel .act{opacity:0;transition:opacity .16s}
.drawer-body:hover .seclabel .act{opacity:1}
.json .k{color:var(--accent-on-wash);font-weight:var(--w3)}
.json .s{color:var(--ok)}
.json .p{color:var(--ink-3)}
.drawer-head h2{font-family:var(--serif);font-size:calc(18px * var(--tscale));font-weight:var(--w3);letter-spacing:-.004em}
.drawer-body{flex:1;overflow-y:auto;min-height:0}
.drawer-foot{display:flex;gap:8px;padding:11px 14px;border-top:1px solid var(--line);background:var(--sheet-2)}
.reveal{opacity:0;transform:translateY(6px);animation:rise .38s var(--ease) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.transcript{background:var(--inset);border:1px solid var(--line);border-radius:var(--r-m);padding:11px;display:flex;flex-direction:column;gap:11px}
.turnwrap{display:flex;flex-direction:column;gap:3px;max-width:82%;
  animation:enter .4s var(--ease) both}
.turnwrap.gw{align-self:flex-start}
.turnwrap.sub{align-self:flex-end;align-items:flex-end}
.turnwrap.sys{align-self:center;align-items:center;max-width:94%}
.turn{padding:7px 10px;border-radius:9px;font-family:var(--mono);font-size:calc(11px * var(--tscale));line-height:1.6;white-space:pre-wrap;
  font-variant-ligatures:none}
.turn.gw{background:var(--sheet);border:1px solid var(--line);border-bottom-left-radius:3px}
.turn.sub{background:var(--accent);color:var(--accent-fg);border-bottom-right-radius:3px;min-width:34px;text-align:center}
.turn.sys{background:var(--danger-wash);border:1px solid var(--danger-line);color:var(--danger);font-size:calc(10.5px * var(--tscale));
  border-radius:20px;padding:5px 12px}
.turnmeta{font-size:calc(9.5px * var(--tscale));color:var(--ink-3);font-family:var(--mono);padding:0 2px}

.toast{position:absolute;bottom:18px;left:50%;z-index:100;display:flex;align-items:center;gap:9px;
  padding:9px 14px;background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-m);
  box-shadow:var(--shadow-3);font-size:calc(12px * var(--tscale));animation:pop .28s var(--ease)}
@keyframes pop{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---------- 12. NOTES (below the mock) --------------------- */
.notes{max-width:1380px;margin:0 auto;padding:34px 22px 60px}
.notes h2{font-family:var(--serif);font-size:calc(22px * var(--tscale));font-weight:var(--w3);letter-spacing:-.004em;margin-bottom:5px}
.notes .lead{color:var(--ink-2);font-size:calc(13.5px * var(--tscale));line-height:1.6;max-width:66ch;margin-bottom:18px}
.notegrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.notes .note{background:color-mix(in srgb,var(--accent) var(--mix-card),var(--sheet));border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));border-radius:var(--r-l);padding:13px;box-shadow:var(--shadow-1);
  transition:border-color .18s,box-shadow .18s,transform .18s var(--ease)}
.notes .note:hover{border-color:var(--line-2);box-shadow:var(--shadow-2);transform:translateY(-2px)}
.notes .note h3{font-size:calc(12.5px * var(--tscale));font-weight:var(--w3);margin-bottom:5px;display:flex;align-items:center;gap:7px}
.notes .note p{font-size:calc(12px * var(--tscale));color:var(--ink-2);line-height:1.55}
.swatches{display:flex;gap:6px;margin-top:9px}
.sw{width:22px;height:22px;border-radius:6px;border:1px solid rgba(0,0,0,.08)}
.palettebar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pbtn{display:flex;align-items:center;gap:7px;height:30px;padding:0 10px 0 7px;border-radius:20px;cursor:pointer;
  background:var(--sheet);border:1px solid var(--line);font-size:calc(11.5px * var(--tscale));font-weight:var(--w3);color:var(--ink-2);
  transition:border-color .16s,color .16s,box-shadow .16s,transform .16s var(--ease)}
.pbtn i{width:13px;height:13px;border-radius:50%;display:block}
.pbtn:hover{border-color:var(--line-2);color:var(--ink);transform:translateY(-1px);box-shadow:var(--shadow-1)}
.pbtn[aria-pressed="true"]{border-color:var(--accent);color:var(--ink);box-shadow:0 0 0 1px var(--accent)}

@media (max-width:1100px){
  .cols{grid-template-columns:minmax(0,1fr)}
  .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kpi:nth-child(4){border-left:0}
  .kpi:nth-child(n+4){border-top:1px solid var(--line)}
}
@media (max-width:820px){
  .notegrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app{grid-template-columns:62px minmax(0,1fr)}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ============================================================
   13. LIVE TABLE — streaming rows, and a pill instead of a jump
   A table that moves under your cursor is worse than a stale one, so rows only
   insert while you are at the top; otherwise they queue behind a pill you press.
   ============================================================ */
.livebtn{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:20px;cursor:pointer;
  font-size:calc(10.5px * var(--tscale));font-weight:var(--w3);border:1px solid var(--ok-line);background:var(--ok-wash);color:var(--ok);
  transition:background-color .15s,border-color .15s,color .15s}
.livebtn::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;
  animation:beat 2s ease-in-out infinite}
@keyframes beat{0%,100%{opacity:1}50%{opacity:.25}}
.livebtn[aria-pressed="false"]{background:var(--quiet-wash);border-color:var(--quiet-line);color:var(--quiet)}
.livebtn[aria-pressed="false"]::before{animation:none}
.newpill{position:sticky;top:31px;z-index:3;display:flex;justify-content:center;height:0;overflow:visible}
.newpill button{
  transform:translateY(-50%) scale(.96);opacity:0;pointer-events:none;
  display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 12px;border-radius:20px;cursor:pointer;
  background:var(--accent);color:var(--accent-fg);border:0;box-shadow:var(--shadow-2);
  font-size:calc(11.5px * var(--tscale));font-weight:var(--w3);transition:opacity .2s,transform .25s var(--ease)}
.newpill.on button{opacity:1;pointer-events:auto;transform:translateY(6px) scale(1)}
@keyframes landed{from{background:color-mix(in srgb,var(--accent) 26%,var(--sheet))}to{background:transparent}}
tbody tr.fresh{animation:landed 1.6s ease-out}
tbody tr.fresh td:first-child::before{transform:scaleY(1);opacity:.5;transition:opacity 1.4s ease 1s}

/* ----- filter bar + saved views ----------------------------- */
.filterbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:11px 15px;border-bottom:1px solid var(--line)}
.fchip{display:inline-flex;align-items:center;gap:6px;height:25px;padding:0 10px;border-radius:20px;cursor:pointer;
  font-size:calc(11.5px * var(--tscale));font-weight:var(--w2);color:var(--ink-2);background:var(--sheet);
  border:1px solid color-mix(in srgb,var(--tint,var(--accent)) 20%,var(--line));
  transition:color .15s,border-color .15s,background-color .15s,transform .15s var(--ease)}
.fchip b{font-variant-numeric:tabular-nums;font-weight:var(--w3);color:var(--ink-3)}
.fchip:hover{transform:translateY(-1px);border-color:var(--line-2);color:var(--ink)}
.fchip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.fchip[aria-pressed="true"] b{color:var(--accent-fg);opacity:.75}
.fchip .swatch{width:7px;height:7px;border-radius:50%}
.viewname{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:calc(11px * var(--tscale));color:var(--ink-3)}
.viewname code{font-family:var(--mono);font-size:calc(10.5px * var(--tscale));background:var(--sheet-3);border:1px solid var(--line);
  border-radius:4px;padding:1px 5px;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
tbody tr.cursor{background:color-mix(in srgb,var(--accent) 12%,var(--sheet));box-shadow:inset 2px 0 0 var(--accent)}

/* ============================================================
   14. EVENT RIBBON — what changed, on the same axis as what happened
   ============================================================ */
.ribbon{position:relative;height:26px;margin:2px 24px 0;border-top:1px dashed var(--line)}
.ribbon .ev{position:absolute;top:-5px;transform:translateX(-50%);width:9px;height:9px;border-radius:50%;
  border:2px solid var(--sheet);cursor:pointer;transition:transform .16s var(--ease)}
.ribbon .ev:hover{transform:translateX(-50%) scale(1.45)}
.ribbon .ev.deploy{background:var(--t5)} .ribbon .ev.publish{background:var(--t2)} .ribbon .ev.incident{background:var(--danger)}
.ribbon .tip{position:absolute;top:12px;transform:translateX(-50%);white-space:nowrap;font-size:calc(10px * var(--tscale));
  color:var(--ink-3);pointer-events:none}
.evcard{position:absolute;bottom:26px;transform:translateX(-50%);z-index:5;min-width:190px;padding:8px 10px;
  background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow-3);
  font-size:calc(11.5px * var(--tscale));animation:pop2 .16s var(--ease)}
@keyframes pop2{from{opacity:0;transform:translate(-50%,4px)}to{opacity:1;transform:translate(-50%,0)}}

/* ============================================================
   15. COMMAND PALETTE — verbs, not just links
   ============================================================ */
.cmdk{position:absolute;inset:0;z-index:95;display:flex;justify-content:center;padding-top:12vh;
  background:rgba(12,14,20,.4);backdrop-filter:blur(3px);animation:fade .18s ease}
:root[data-theme="dark"] .cmdk{background:rgba(0,0,0,.6)}
.cmdk-box{width:min(620px,92vw);max-height:66vh;display:flex;flex-direction:column;align-self:flex-start;
  background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-3);
  overflow:hidden;animation:slideup .22s var(--ease)}
@keyframes slideup{from{opacity:0;transform:translateY(-8px) scale(.985)}to{opacity:1;transform:none}}
.cmdk-in{display:flex;align-items:center;gap:9px;padding:12px 14px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 10%,var(--sheet)),var(--sheet))}
.cmdk-in input{flex:1;border:0;outline:0;background:transparent;font-size:calc(14px * var(--tscale))}
.cmdk-in input::placeholder{color:var(--ink-3)}
.cmdk-list{overflow-y:auto;padding:6px}
.cmdk-group{padding:8px 10px 4px}
.cmdk-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-m);cursor:pointer;
  font-size:calc(12.5px * var(--tscale));border:1px solid transparent}
.cmdk-item[aria-selected="true"]{background:color-mix(in srgb,var(--accent) 12%,var(--sheet));
  border-color:color-mix(in srgb,var(--accent) 28%,var(--line))}
.cmdk-item .verb{font-weight:var(--w3)}
.cmdk-item .arg{font-family:var(--mono);font-size:calc(11px * var(--tscale));color:var(--accent-on-wash);background:var(--accent-wash);
  border:1px solid var(--accent-line);border-radius:4px;padding:0 5px}
.cmdk-item .hint{margin-left:auto;font-size:calc(10.5px * var(--tscale));color:var(--ink-3)}
.cmdk-foot{display:flex;gap:14px;padding:8px 14px;border-top:1px solid var(--line);background:var(--sheet-2);
  font-size:calc(10.5px * var(--tscale));color:var(--ink-3)}
kbd.k{font-family:var(--mono);font-size:calc(9.5px * var(--tscale));border:1px solid var(--line);border-bottom-width:2px;
  border-radius:4px;padding:1px 4px;background:var(--sheet);color:var(--ink-2)}

/* ----- shortcut sheet --------------------------------------- */
.sheetgrid{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px;padding:14px}
.sk{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--r-s);font-size:calc(12px * var(--tscale))}
.sk:hover{background:var(--sheet-2)}
.sk span{margin-left:auto;display:flex;gap:4px}

/* ============================================================
   16. FAILURE EXPLAINED — the parsed cause, and the fix
   ============================================================ */
.explain{border:1px solid var(--danger-line);background:var(--danger-wash);border-radius:var(--r-m);padding:11px 12px}
.explain h4{font-size:calc(12px * var(--tscale));font-weight:var(--w3);color:var(--danger);display:flex;align-items:center;gap:7px;margin-bottom:5px}
.explain p{font-size:calc(12px * var(--tscale));color:var(--ink-2);line-height:1.55}
.explain .fix{margin-top:8px;padding-top:8px;border-top:1px solid var(--danger-line);font-size:calc(11.5px * var(--tscale))}
.explain mark{background:color-mix(in srgb,var(--danger) 26%,transparent);color:inherit;
  border-radius:3px;padding:0 2px;font-family:var(--mono)}

/* ============================================================
   17. MENU TREE — the editor IS the analytics view
   Each node is coloured by the share of subscribers who abandon there, so the
   place the product is losing people is visible while you are editing it.
   ============================================================ */
.mcols{display:grid;grid-template-columns:minmax(0,1fr) 358px;gap:16px;align-items:start}
.tree{padding:6px}
.node{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-m);cursor:pointer;
  border:1px solid transparent;margin-bottom:2px;transition:background-color .15s,border-color .15s,transform .15s var(--ease)}
.node:hover{border-color:var(--line-2);transform:translateX(2px)}
.node[aria-selected="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--sheet))}
.node .key{font-family:var(--mono);font-size:calc(10.5px * var(--tscale));width:20px;height:20px;flex:none;display:grid;place-items:center;
  border-radius:5px;background:var(--sheet-3);border:1px solid var(--line);color:var(--ink-2)}
.node .label{font-size:calc(12.5px * var(--tscale));font-weight:var(--w2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.node .bar{margin-left:auto;width:120px;height:7px;border-radius:4px;background:var(--sheet-3);overflow:hidden;flex:none}
.node .bar i{display:block;height:100%;border-radius:4px;transition:width .5s var(--ease)}
.node .pct{width:46px;text-align:right;font-size:calc(11px * var(--tscale));font-variant-numeric:tabular-nums;font-weight:var(--w3);flex:none}
.node .n{width:52px;text-align:right;font-size:calc(10.5px * var(--tscale));color:var(--ink-3);font-variant-numeric:tabular-nums;flex:none}
.heatkey{display:flex;align-items:center;gap:8px;font-size:calc(10.5px * var(--tscale));color:var(--ink-3);padding:2px 12px 10px}
.heatkey .ramp{height:7px;width:120px;border-radius:4px;
  background:linear-gradient(90deg,var(--ok),var(--warn),var(--danger))}

/* ============================================================
   HANDSET — a device, not a preview pane
   The subscriber never sees the CON/END verb, a monospace font or our colours;
   they see a system dialog on a phone. Simulating that exactly is the only way
   the preview can be trusted, so the device keeps its own light "One UI" world
   whatever theme the console is in.
   ============================================================ */
.handset{padding:16px 16px 14px;display:flex;flex-direction:column;align-items:center}
.phone{
  position:relative;width:286px;padding:9px;border-radius:42px;
  background:linear-gradient(155deg,#4A4E57 0%,#1A1D22 26%,#101215 62%,#33373E 100%);
  box-shadow:0 26px 50px -22px rgba(0,0,0,.6),0 6px 16px -8px rgba(0,0,0,.45),
             inset 0 0 0 1px rgba(255,255,255,.1);
}
.phone .cam{position:absolute;top:19px;left:50%;transform:translateX(-50%);z-index:4;
  width:9px;height:9px;border-radius:50%;background:#04060A;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.phone .side{position:absolute;right:-2px;width:3px;border-radius:3px;
  background:linear-gradient(180deg,#5A5F68,#2A2D33)}
.phone .side.v1{top:112px;height:34px} .phone .side.v2{top:152px;height:34px} .phone .side.pw{top:200px;height:52px}
.phone .side.l{left:-2px;right:auto;top:126px;height:26px}
.glass{position:relative;height:524px;border-radius:34px;overflow:hidden;display:flex;flex-direction:column;
  background:linear-gradient(168deg,#25325C 0%,#3B3068 46%,#17224A 100%)}
/* the hint of a home screen behind the dialog */
.glass::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(circle at 22% 26%,rgba(255,255,255,.16) 0 34px,transparent 35px),
    radial-gradient(circle at 50% 26%,rgba(255,255,255,.12) 0 34px,transparent 35px),
    radial-gradient(circle at 78% 26%,rgba(255,255,255,.14) 0 34px,transparent 35px),
    radial-gradient(circle at 22% 46%,rgba(255,255,255,.1) 0 34px,transparent 35px),
    radial-gradient(circle at 50% 46%,rgba(255,255,255,.13) 0 34px,transparent 35px);
  filter:blur(9px)}
/* glass sheen */
.glass::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;
  background:linear-gradient(112deg,rgba(255,255,255,.1) 0 22%,transparent 46%)}
.statusbar{position:relative;z-index:3;display:flex;align-items:center;gap:5px;height:34px;padding:0 18px;
  color:#fff;font-size:calc(11px * var(--tscale));font-weight:var(--w3);letter-spacing:.01em}
.statusbar .icons{margin-left:auto;display:flex;align-items:center;gap:5px;opacity:.95}
.statusbar svg{width:13px;height:13px}
.statusbar .batt{font-size:calc(9.5px * var(--tscale));font-weight:var(--w3);opacity:.9}

/* the Android/One UI USSD dialog */
/* Android dims the screen behind a USSD dialog, and every step is its own
   dialog: the old one is dismissed, a progress dialog runs, the reply arrives.
   Simulating that sequence is the difference between a preview and a rehearsal. */
.dimmer{position:absolute;inset:0;z-index:2;background:rgba(5,7,13,.45);opacity:0;
  transition:opacity .26s ease}
.dimmer.on{opacity:1}
.ussd{position:relative;z-index:3;margin:auto 10px 10px;background:#FCFCFD;color:#16181C;
  border-radius:26px;padding:22px 20px 10px;box-shadow:0 22px 44px -12px rgba(0,0,0,.5)}
.ussd.in{animation:ussdin .32s cubic-bezier(.18,.92,.26,1.04)}
.ussd.out{animation:ussdout .16s ease forwards}
.ussd.gone{opacity:0;pointer-events:none}
@keyframes ussdin{from{opacity:0;transform:translateY(12px) scale(.955)}to{opacity:1;transform:none}}
@keyframes ussdout{to{opacity:0;transform:translateY(5px) scale(.975)}}
.ussd .loadrow{display:none;align-items:center;gap:13px;padding:2px 0 12px;font-size:calc(13.5px * var(--tscale));color:#3A3F48}
.ussd.loading .loadrow{display:flex}
.ussd.loading .msg,.ussd.loading .entry,.ussd.loading .acts{display:none}
.spin{width:21px;height:21px;border-radius:50%;flex:none;
  border:2.5px solid rgba(0,114,222,.22);border-top-color:#0072DE;animation:spin .75s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* the entry line answers the key press */
@keyframes entrytap{0%{transform:scale(1)}40%{transform:scale(1.03)}100%{transform:scale(1)}}
.ussd .entry.tap{animation:entrytap .18s ease;transform-origin:left center}
.ussd .msg{font-size:calc(13.5px * var(--tscale));line-height:1.52;white-space:pre-wrap;letter-spacing:.002em;
  font-variant-numeric:proportional-nums}
.ussd .entry{margin-top:14px;border-bottom:2px solid #0072DE;padding-bottom:5px;min-height:22px;
  font-size:calc(14px * var(--tscale));letter-spacing:.06em}
.ussd .entry .car{display:inline-block;width:1.5px;height:15px;background:#0072DE;vertical-align:-2px;
  animation:beat 1.1s steps(1) infinite}
.ussd .acts{display:flex;justify-content:flex-end;gap:6px;margin-top:8px}
.ussd .acts button{background:none;border:0;cursor:pointer;padding:9px 14px;border-radius:20px;
  font-size:calc(13px * var(--tscale));font-weight:var(--w3);color:#0072DE;transition:background-color .14s}
.ussd .acts button.grey{color:#5B6068}
.ussd .acts button:hover{background:rgba(0,114,222,.1)}
.ussd .acts button.grey:hover{background:rgba(0,0,0,.06)}
.ussd.ended .entry,.ussd.ended .acts button.grey{display:none}

/* Samsung numeric keyboard */
.kb{position:relative;z-index:3;background:#E7E9EE;padding:7px 6px 4px;display:grid;
  grid-template-columns:repeat(3,1fr);gap:6px}
.kb button{position:relative;overflow:hidden;height:38px;border-radius:9px;border:0;cursor:pointer;background:#FFF;color:#16181C;
  font-size:calc(16px * var(--tscale));font-weight:var(--w2);box-shadow:0 1px 2px rgba(0,0,0,.14);
  transition:background-color .1s,transform .1s var(--ease)}
.kb button:hover{background:#F2F3F6}
.kb button:active{transform:scale(.95);background:#E3E5EA}
.rip{position:absolute;left:50%;top:50%;width:120%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  translate:-50% -50%;background:radial-gradient(circle,rgba(0,114,222,.34),rgba(0,114,222,0) 62%);
  animation:rip .45s ease-out forwards}
@keyframes rip{from{transform:scale(.25);opacity:.95}to{transform:scale(1.7);opacity:0}}
.kb button.fn{background:#D6D9E0;font-size:calc(13px * var(--tscale));font-weight:var(--w3)}
.homebar{position:relative;z-index:3;height:22px;background:#E7E9EE;display:grid;place-items:center}
.homebar span{width:104px;height:4px;border-radius:4px;background:rgba(0,0,0,.3)}

.gsm{display:flex;align-items:center;justify-content:space-between;width:286px;margin-top:11px;
  font-size:calc(10.5px * var(--tscale));color:var(--ink-3)}
.gsm b{font-variant-numeric:tabular-nums;color:var(--ink-2)}
.gsm.over b{color:var(--danger)}
.gsm .verb{font-family:var(--mono);font-size:calc(10px * var(--tscale));font-weight:var(--w4);padding:1px 5px;border-radius:4px;
  background:var(--accent-wash);color:var(--accent-on-wash);border:1px solid var(--accent-line)}

/* pages crossfade through the View Transitions API where it exists */
@view-transition{navigation:none}
::view-transition-old(page),::view-transition-new(page){animation-duration:.22s}

/* ============================================================
   18. ARRIVAL — content lands, it does not blink into place
   One shared keyframe, a 55ms stagger, and nothing longer than 440ms. The
   delay is set per element in JS so the order follows reading order rather
   than DOM order, and reduced-motion skips the whole thing.
   ============================================================ */
@keyframes enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.rise{animation:enter .44s var(--ease) both}
@media (prefers-reduced-motion:reduce){ .rise{animation:none} }

/* ============================================================
   19. DIALOG — asks one question, in one place
   ============================================================ */
.dlg{position:absolute;inset:0;z-index:96;display:grid;place-items:center;padding:20px;
  background:rgba(12,14,20,.46);backdrop-filter:blur(4px);animation:fade .2s ease}
:root[data-theme="dark"] .dlg{background:rgba(0,0,0,.64)}
.dlg-box{width:min(470px,94vw);max-height:88vh;display:flex;flex-direction:column;overflow:hidden;
  background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-3);
  animation:dlgin .36s cubic-bezier(.2,.9,.25,1.04)}
@keyframes dlgin{from{opacity:0;transform:translateY(14px) scale(.965)}to{opacity:1;transform:none}}
.dlg-head{padding:18px 20px 14px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 13%,var(--sheet)),var(--sheet))}
.dlg-head h2{font-family:var(--serif);font-size:calc(20px * var(--tscale));font-weight:var(--w3);letter-spacing:-.004em}
.dlg-head p{margin-top:4px;font-size:calc(12.5px * var(--tscale));line-height:1.5;color:var(--ink-2)}
.dlg-body{padding:6px 20px 18px;display:flex;flex-direction:column;gap:13px;overflow-y:auto}
.dlg-foot{display:flex;align-items:center;gap:9px;padding:13px 20px;border-top:1px solid var(--line);background:var(--sheet-2)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:calc(11px * var(--tscale));font-weight:var(--w3);letter-spacing:.02em;color:var(--ink-2)}
.field input,.field select{height:36px;border-radius:10px;padding:0 12px;font-size:calc(12.5px * var(--tscale));
  border:1px solid var(--line);background:var(--sheet-2);color:var(--ink);outline:0;
  transition:border-color .16s,background-color .16s,box-shadow .16s}
.field input::placeholder{color:var(--ink-3)}
.field input:focus,.field select:focus{background:var(--sheet);border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.field .hint{font-size:calc(10.5px * var(--tscale));color:var(--ink-3)}
.field.mono input{font-family:var(--mono);letter-spacing:.02em;font-variant-ligatures:none}
.seglist{display:flex;gap:7px}
.seglist button{flex:1;height:34px;border-radius:10px;cursor:pointer;font-size:calc(12px * var(--tscale));font-weight:var(--w3);
  border:1px solid var(--line);background:var(--sheet-2);color:var(--ink-2);
  transition:border-color .16s,color .16s,background-color .16s,transform .16s var(--ease)}
.seglist button:hover{transform:translateY(-1px);border-color:var(--line-2);color:var(--ink)}
.seglist button[aria-pressed="true"]{background:var(--accent-wash);border-color:var(--accent);color:var(--accent-on-wash)}
.changelist{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.changelist div{display:flex;align-items:center;gap:10px;padding:10px 13px;font-size:calc(12px * var(--tscale));background:var(--sheet-2)}
.changelist .op{font-family:var(--mono);font-size:calc(10px * var(--tscale));font-weight:var(--w4);width:22px;text-align:center;
  border-radius:5px;padding:2px 0}
.changelist .add{background:var(--ok-wash);color:var(--ok)}
.changelist .edit{background:var(--warn-wash);color:var(--warn)}
.changelist .del{background:var(--danger-wash);color:var(--danger)}

/* ============================================================
   20. TYPE LAB — a control panel for the decisions above
   The device keeps its own typography: it simulates a handset, so it must not
   follow the console's font, scale or weight.
   ============================================================ */
svg[data-icon]{stroke-width:var(--icon-stroke)}
.page-head h1,.drawer-head h2,.brand .name,.notes h2,.dlg-head h2,.ussd .msg{
  letter-spacing:calc(var(--track) + -.004em)}
.eyebrow,thead th{letter-spacing:calc(var(--track) * .5 + .11em)}

.phone{--tscale:1;--w1:400;--w2:500;--w3:600;--w4:700;--track:0em;
  font-family:-apple-system,BlinkMacSystemFont,Roboto,"Segoe UI",sans-serif}
.phone svg{stroke-width:1.8}

.typelab{position:fixed;right:18px;bottom:18px;z-index:70;width:306px;
  background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--shadow-3);overflow:hidden;transition:transform .3s var(--ease),opacity .2s}
.typelab.shut{transform:translateY(calc(100% + 26px));opacity:0;pointer-events:none}
.lab-head{display:flex;align-items:center;gap:9px;padding:12px 14px;cursor:default;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 14%,var(--sheet)),var(--sheet));
  border-bottom:1px solid var(--line)}
.lab-head h3{font-size:calc(13px * var(--tscale));font-weight:var(--w3)}
.lab-body{padding:13px 14px 15px;display:flex;flex-direction:column;gap:14px;max-height:62vh;overflow-y:auto}
.lab-row > .eyebrow{display:block;margin-bottom:7px}
.faces{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.face{padding:8px 9px;border-radius:10px;cursor:pointer;text-align:left;
  border:1px solid var(--line);background:var(--sheet-2);color:var(--ink-2);
  transition:border-color .15s,background-color .15s,transform .15s var(--ease)}
.face:hover{transform:translateY(-1px);border-color:var(--line-2);color:var(--ink)}
.face[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-wash);color:var(--accent-on-wash)}
.face b{display:block;font-size:calc(14px * var(--tscale));font-weight:var(--w4);line-height:1.2}
.face span{display:block;font-size:calc(9.5px * var(--tscale));letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.typelab .seglist button{height:30px;font-size:calc(11.5px * var(--tscale))}
input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:4px;
  background:var(--sheet-3);border:1px solid var(--line);outline:0}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--accent);border:2px solid var(--sheet);box-shadow:var(--shadow-1);cursor:grab}
input[type="range"]:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.08)}
.typelab .val{float:right;font-family:var(--mono);font-size:calc(10.5px * var(--tscale));color:var(--ink-2)}
/* which tenant you are in must never be off-screen, least of all on a phone */
.tenantmini{display:none;align-items:center;gap:7px;min-width:0;font-size:calc(12px * var(--tscale));
  font-weight:var(--w3)}
.tenantmini i{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;flex:none;
  font-style:normal;font-size:calc(9.5px * var(--tscale));font-weight:var(--w4);
  background:var(--accent-wash);color:var(--accent-on-wash);border:1px solid var(--accent-line)}
.tenantmini span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.labfab{position:fixed;right:18px;bottom:18px;z-index:69;display:flex;align-items:center;gap:8px;
  height:38px;padding:0 15px;border-radius:999px;cursor:pointer;border:1px solid var(--line);
  background:var(--sheet);color:var(--ink);box-shadow:var(--shadow-2);
  font-size:calc(12.5px * var(--tscale));font-weight:var(--w3);
  transition:transform .2s var(--ease),box-shadow .2s,opacity .2s}
.labfab:hover{transform:translateY(-2px);box-shadow:var(--shadow-3)}
.labfab.hide{opacity:0;pointer-events:none;transform:translateY(8px)}
@media (max-width:900px){ .typelab{display:none} .labfab{display:none} }
/* client build: the Design lab and the internal notes are review tools, not the
   product. <html data-demo> hides both without touching anything else. */
[data-demo] .typelab, [data-demo] .labfab, [data-demo] .notes{display:none}
[data-demo] .frame{padding-bottom:22px}

/* ============================================================
   21. SHELL VARIANTS — the same markup, four navigations
   Nothing below reorders the DOM: the aside is still the aside, so keyboard
   order and screen-reader order survive every layout.
   ============================================================ */
/* --- navigation on the right ------------------------------- */
[data-layout="right"] .app{grid-template-columns:minmax(0,1fr) 238px}
[data-layout="right"] .side{order:2;padding:2px 2px 10px}
[data-layout="right"] .navitem.on::before{left:auto;right:-2px}

/* --- navigation across the top ----------------------------- */
[data-layout="top"] .app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);
  column-gap:0;row-gap:10px}
[data-layout="top"] .side{flex-direction:row;align-items:center;gap:12px;padding:0 4px;min-width:0}
[data-layout="top"] .brand{height:auto;flex:none}
[data-layout="top"] .tenant{width:auto;max-width:210px;margin:0;flex:none}
[data-layout="top"] .side nav.nav{display:flex;flex-direction:row;align-items:center;gap:4px;padding:0;overflow-x:auto}
[data-layout="top"] .navgroup{display:flex;align-items:center;gap:3px;margin:0;border:0;padding:0}
[data-layout="top"] .navgroup > .eyebrow{display:none}
[data-layout="top"] .navitem{margin:0;height:33px;white-space:nowrap}
[data-layout="top"] .navitem.on::before{left:12px;right:12px;top:auto;bottom:-4px;width:auto;height:3px}
[data-layout="top"] .side-foot{border:0;margin:0;padding:0 4px;flex:none}
[data-layout="top"] .side-foot span{display:none}      /* the lamp is enough up here */
[data-layout="top"] .navitem .n{display:none}          /* counts do not survive a crowded bar */
[data-layout="top"] .nav::-webkit-scrollbar{height:0}

/* --- a dock along the bottom ------------------------------- */
[data-layout="bottom"] .app{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;
  column-gap:0;row-gap:10px}
[data-layout="bottom"] .side{order:2;flex-direction:row;justify-content:center;gap:4px;padding:6px;
  background:var(--sheet);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-2)}
[data-layout="bottom"] .brand,[data-layout="bottom"] .tenant,[data-layout="bottom"] .side-foot{display:none}
[data-layout="bottom"] .side nav.nav{display:flex;flex-direction:row;justify-content:center;gap:4px;padding:0;overflow:visible}
[data-layout="bottom"] .navgroup{display:flex;gap:4px;margin:0;border:0;padding:0}
[data-layout="bottom"] .navgroup:nth-child(n+4){display:none}   /* a dock holds five, not eleven */
[data-layout="bottom"] .navgroup > .eyebrow{display:none}
[data-layout="bottom"] .navitem{flex-direction:column;gap:3px;height:auto;padding:7px 14px;
  font-size:calc(10px * var(--tscale));margin:0}
[data-layout="bottom"] .navitem svg{width:18px;height:18px}
[data-layout="bottom"] .navitem .n{display:none}
[data-layout="bottom"] .navitem.on::before{left:14px;right:14px;top:-6px;bottom:auto;width:auto;height:3px}

/* ============================================================
   22. RESPONSIVE — measured against the frame, not the window
   ============================================================ */
@container app (max-width:1120px){
  .cols,.mcols{grid-template-columns:minmax(0,1fr)}
  .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kpi:nth-child(4){border-left:0}
  .kpi:nth-child(n+4){border-top:1px solid var(--line)}
  .drawer{width:min(520px,calc(100% - 24px))}
  .notegrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .search{min-width:0;flex:1;max-width:300px}
  .search span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@container app (max-width:980px){
  /* the breadcrumb is the first thing to go: the page title is right below it */
  .crumb{display:none}
  .tenantmini{display:flex}
}
@container app (max-width:760px){
  .page{padding:14px 14px 30px}
  .page-head{flex-direction:column;gap:12px;margin-bottom:14px}
  .page-head .acts{margin-left:0;width:100%}
  .page-head .acts .btn{flex:1}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi:nth-child(odd){border-left:0}
  .kpi:nth-child(n+3){border-top:1px solid var(--line)}
  .crumb{display:none}
  .tenantmini{display:flex}
  .topbar{height:52px;gap:6px}
  /* a card header has room for a title or a subtitle here, not both */
  .card-head{gap:9px}
  .card-head p{display:none}
  .card-head h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .stat{flex-direction:column;align-items:flex-start;gap:7px;padding:10px}
  .drawer-body{padding:14px}
  .search{min-width:0;width:34px;justify-content:center;padding:0}
  .search span,.search kbd{display:none}
  .user span,.user svg{display:none}
  .filterbar .viewname{display:none}
  .notegrid{grid-template-columns:minmax(0,1fr)}
  .mcols .handset{padding:8px 0 0}

  /* an eight-column table is unreadable on a phone at any size: it becomes a list */
  thead{display:none}
  tbody tr{display:block;padding:11px 14px}
  tbody tr td:first-child::before{display:none}
  tbody td{display:flex;align-items:center;justify-content:space-between;gap:12px;
    height:auto;padding:3px 0;white-space:normal}
  tbody td::after{content:attr(data-label);order:-1;font-size:calc(10px * var(--tscale));
    letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:var(--w2)}
  tbody td:last-child{display:none}
  tbody tr:hover{background:transparent}

  /* overlays become sheets, the way they do on a phone */
  .drawer{top:auto;left:0;right:0;bottom:0;width:auto;max-height:88%;
    border-radius:24px 24px 0 0;animation:sheetup .4s cubic-bezier(.16,.86,.3,1.02)}
  .dlg{place-items:end center;padding:0}
  .dlg-box{width:100%;max-width:none;border-radius:24px 24px 0 0;animation:sheetup .36s cubic-bezier(.16,.86,.3,1.02)}
  .cmdk{padding-top:0;align-items:flex-end}
  .cmdk-box{width:100%;border-radius:24px 24px 0 0;align-self:flex-end;max-height:74%}
  .toast{left:12px;right:12px;bottom:12px;transform:none;justify-content:center}
  @keyframes pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}
@keyframes sheetup{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}


/* ============================================================
   SIGNAL ⇄ YII INTEGRATION APPENDIX
   Full-viewport shell + coexistence with Bootstrap 5 / FontAwesome
   for the ~300 un-ported views that still render inside this shell.
   Everything above is the design verbatim; nothing here changes it.
   ============================================================ */

/* Fill the window instead of the centred artifact frame. */
html, body { height: 100%; }
.frame { max-width: 100%; padding: 14px 16px 0; height: 100vh; }
.app { height: calc(100vh - 14px); min-height: 0; }
@media (max-width: 860px){ .frame{ padding:10px 10px 0 } .app{ height:calc(100vh - 10px) } }

/* Server-rendered nav (we don't build it in JS as the prototype does). */
.nav a.navlink{
  display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-radius:var(--r-m);
  color:var(--ink-2);text-decoration:none;font-size:calc(13px * var(--tscale));font-weight:var(--w1);
  position:relative;transition:background .14s var(--ease),color .14s var(--ease)}
.nav a.navlink svg{width:17px;height:17px;flex:none;color:var(--ink-3)}
.nav a.navlink .count{margin-left:auto;font-family:var(--mono);font-size:calc(11px * var(--tscale));color:var(--ink-3)}
.nav a.navlink:hover{background:var(--sheet-3);color:var(--ink)}
.nav a.navlink.active{background:var(--sheet);color:var(--ink);box-shadow:var(--shadow-1);border:1px solid var(--line)}
.nav a.navlink.active::before{content:"";position:absolute;left:-2px;top:7px;bottom:7px;width:3px;border-radius:3px;background:var(--accent)}
.nav a.navlink.active svg{color:var(--accent)}
.nav .group{font-size:calc(10.5px * var(--tscale));text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-3);font-weight:var(--w2);padding:12px 10px 4px}
.nav details{border:none}
.nav details > summary{list-style:none;cursor:pointer}
.nav details > summary::-webkit-details-marker{display:none}
.nav details .sub{display:flex;flex-direction:column;gap:1px;padding:2px 0 2px 26px}
.nav details .sub a{height:30px;font-size:calc(12.5px * var(--tscale))}
.nav details > summary .chev{margin-left:auto;transition:transform .16s var(--ease)}
.nav details[open] > summary .chev{transform:rotate(90deg)}

/* The page content area holds either a Signal view or a Bootstrap fallback view. */
.page .content-wrapper{display:block}

/* Keep Bootstrap dropdown menus (notifications / user) above the sheet. */
.dropdown-menu{z-index:60}

/* FontAwesome icons used by fallback nav keep the design ink colour. */
.page .content-wrapper i.fas,
.page .content-wrapper i.far,
.page .content-wrapper i.fab{color:inherit}

/* Signal login canvas (centered card on the grid-line ground). */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;position:relative;overflow:hidden}
.auth-grid{position:absolute;inset:0;background-image:
   linear-gradient(var(--line) 1px,transparent 1px),
   linear-gradient(90deg,var(--line) 1px,transparent 1px);
   background-size:46px 46px;opacity:.5;
   -webkit-mask-image:radial-gradient(circle at 50% 42%,#000,transparent 72%);
           mask-image:radial-gradient(circle at 50% 42%,#000,transparent 72%)}
.auth-brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:18px;position:relative}
.auth-brand .mark{width:30px;height:30px;border-radius:8px}
.auth-brand .name{font-weight:var(--w3);font-size:calc(17px * var(--tscale))}
.auth-brand .sub{color:var(--ink-3);font-weight:var(--w1)}
.auth-card{width:min(420px,100%);background:var(--sheet);border:1px solid var(--line);
   border-radius:var(--r-xl);box-shadow:var(--shadow-3);padding:26px 26px 22px;position:relative;
   animation:sheetup .5s var(--ease) both}
.auth-card h1{font-family:var(--serif);font-size:calc(22px * var(--tscale));font-weight:var(--w3);margin:0 0 3px}
.auth-card .lede{color:var(--ink-2);font-size:calc(13px * var(--tscale));margin:0 0 18px}
.auth-foot{text-align:center;color:var(--ink-3);font-size:calc(12px * var(--tscale));margin-top:16px;position:relative}
.auth-foot .lamp{display:inline-block}

/* Form fields in the Signal look (used by login + ported forms). */
.field{margin-bottom:14px}
.field label{display:block;font-size:calc(12px * var(--tscale));font-weight:var(--w2);color:var(--ink-2);margin-bottom:6px}
.field .row{display:flex;align-items:center;justify-content:space-between}
.inp{width:100%;height:40px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r-m);
   background:var(--sheet);color:var(--ink);font-size:calc(14px * var(--tscale));font-family:var(--sans);
   transition:border-color .14s var(--ease),box-shadow .14s var(--ease);outline:none}
.inp:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.inp::placeholder{color:var(--ink-3)}
.btn.block{width:100%;justify-content:center;height:42px}
.check{display:flex;align-items:center;gap:9px;font-size:calc(13px * var(--tscale));color:var(--ink-2);cursor:pointer;user-select:none}
.check input{width:16px;height:16px;accent-color:var(--accent)}
.auth-or{display:flex;align-items:center;gap:12px;color:var(--ink-3);font-size:calc(12px * var(--tscale));margin:16px 0}
.auth-or::before,.auth-or::after{content:"";height:1px;flex:1;background:var(--line)}
.link{color:var(--accent);text-decoration:none;font-size:calc(12px * var(--tscale));font-weight:var(--w2)}
.link:hover{text-decoration:underline}
.err-note{background:var(--danger-wash);border:1px solid var(--danger-line);color:var(--danger);
   padding:10px 12px;border-radius:var(--r-m);font-size:calc(12.5px * var(--tscale));margin-bottom:14px}
.err-note ul{margin:4px 0 0;padding-left:18px}
.field .error{color:var(--danger);font-size:calc(11.5px * var(--tscale));margin-top:5px;display:block}
.field .inp.has-error{border-color:var(--danger-line)}

/* ---- Bootstrap collision guards -------------------------------------------
   Bootstrap 5 is still loaded for the un-ported CRUD views. A few of its base
   class names clash with Signal shell classes; re-assert the Signal layout at
   higher specificity so the shell is never pulled into Bootstrap's defaults. */
.side nav.nav{display:flex;flex-direction:column;flex-wrap:nowrap;gap:2px;align-items:stretch;margin:0;padding-right:2px}
.side nav.nav .navlink{width:100%}
.dropdown-menu .navlink{width:100%}
/* Bootstrap .badge sets its own padding/radius/colour — keep Signal badges. */
.topbar .badge, .card .badge, .kpi .badge, td .badge{--bs-badge-padding-x:0;--bs-badge-padding-y:0}

/* Bootstrap sets `color:#212529` on body and .card; the design never declared a
   base colour (it ran standalone). Re-assert the ink colour on the shell so card
   titles and KPI values are not painted dark-on-dark in dark mode. */
body, .frame, .side, .sheet, .page, .card, .kpi, .card-head h2, .kpi .val, .page-head h1{color:var(--ink)}

/* ============================================================
   FALLBACK SKIN — Signal-native styling for un-ported views
   Scoped to the page content area so the shell is never touched.
   Restyles Bootstrap 5, Kartik GridView, and this app's custom
   page classes (page-header / stat-card / content-box / …) to the
   Signal tokens, so every inherited CRUD/dashboard page looks
   intentional without being individually rebuilt. No markup/logic
   changes — purely visual.
   ============================================================ */
.content-wrapper{--bs-body-color:var(--ink);color:var(--ink)}

/* ---- the gradient "page-header" hero → quiet Signal page head ---- */
.content-wrapper .page-header{
  background:none !important;color:var(--ink) !important;padding:0 0 4px !important;
  border:0 !important;box-shadow:none !important;margin-bottom:18px !important;border-radius:0 !important;
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.content-wrapper .page-header *{color:inherit !important}
.content-wrapper .page-title{font-family:var(--serif);font-size:calc(22px * var(--tscale));font-weight:var(--w3);letter-spacing:-.01em;margin:0}
.content-wrapper .page-description{color:var(--ink-2) !important;font-size:calc(13px * var(--tscale));margin-top:2px}
.content-wrapper .header-actions{display:flex;gap:8px;align-items:center;flex:none}

/* ---- stat tiles → Signal KPI cells ---- */
.content-wrapper .stat-card{
  background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:var(--shadow-1);padding:14px 16px;display:flex;align-items:center;gap:13px;transition:border-color .16s,box-shadow .16s,transform .16s var(--ease)}
.content-wrapper .stat-card:hover{border-color:var(--line-2);box-shadow:var(--shadow-2);transform:translateY(-2px)}
.content-wrapper .stat-icon{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:linear-gradient(140deg,var(--accent),var(--accent-h,var(--accent)));color:#fff;font-size:16px !important;
  box-shadow:0 2px 6px -2px color-mix(in srgb,var(--accent) 55%,transparent)}
/* Glyph stays white. The varied per-card tints are assigned at runtime by
   tintStatCards() (signal.js), which overwrites each tile's inline background —
   this works no matter how a dashboard nests its cards (.stats-cards>.stat-card
   or Bootstrap .row>.col>.stat-card) and replaces the hardcoded pastel gradients
   some views ship, keeping every dashboard consistent and palette-aware. */
.content-wrapper .stat-icon *{background:none !important;color:#fff !important;-webkit-text-fill-color:#fff}
.content-wrapper .stat-number{font-size:calc(22px * var(--tscale));font-weight:var(--w3);line-height:1.05;color:var(--ink)}
.content-wrapper .stat-label{font-size:calc(11.5px * var(--tscale));color:var(--ink-3)}

/* ---- generic containers → Signal cards ---- */
.content-wrapper .card,
.content-wrapper .content-box,
.content-wrapper .table-wrapper,
.content-wrapper .recent-clients,
.content-wrapper .quick-actions,
.content-wrapper .panel,
.content-wrapper .box{
  background:var(--sheet) !important;border:1px solid var(--line) !important;border-radius:var(--r-l) !important;
  box-shadow:var(--shadow-1) !important;color:var(--ink)}
.content-wrapper .card-header,
.content-wrapper .panel-heading{
  background:var(--sheet-2) !important;border-bottom:1px solid var(--line) !important;color:var(--ink) !important;
  font-weight:var(--w3);font-size:calc(14px * var(--tscale));padding:13px 16px !important}
.content-wrapper .card-body,.content-wrapper .panel-body{padding:16px !important;color:var(--ink)}
.content-wrapper .text-muted{color:var(--ink-3) !important}

/* ---- buttons ---- */
.content-wrapper .btn{
  border-radius:var(--r-m) !important;font-weight:var(--w2) !important;font-size:calc(12.5px * var(--tscale)) !important;
  padding:7px 13px !important;border:1px solid var(--line-2) !important;background:var(--sheet) !important;color:var(--ink) !important;
  box-shadow:var(--shadow-1);transition:background .14s,border-color .14s,transform .05s;display:inline-flex;align-items:center;gap:7px;line-height:1.2}
.content-wrapper .btn:hover{background:var(--sheet-3) !important;border-color:var(--line-2) !important}
.content-wrapper .btn:active{transform:translateY(1px)}
.content-wrapper .btn-primary,.content-wrapper .btn-success,.content-wrapper .btn-info{
  background:linear-gradient(180deg,var(--accent),var(--accent-h)) !important;border-color:transparent !important;color:var(--accent-fg) !important;box-shadow:var(--shadow-1)}
.content-wrapper .btn-primary:hover,.content-wrapper .btn-success:hover,.content-wrapper .btn-info:hover{filter:brightness(1.05)}
.content-wrapper .btn-danger{background:var(--danger) !important;border-color:transparent !important;color:#fff !important}
.content-wrapper .btn-outline-primary,.content-wrapper .btn-outline-secondary{background:var(--sheet) !important;color:var(--ink) !important}
.content-wrapper .btn-sm{padding:5px 10px !important;font-size:calc(11.5px * var(--tscale)) !important}

/* ---- form controls ---- */
.content-wrapper .form-control,
.content-wrapper .form-select,
.content-wrapper textarea,
.content-wrapper select,
.content-wrapper input[type=text],
.content-wrapper input[type=email],
.content-wrapper input[type=password],
.content-wrapper input[type=number],
.content-wrapper input[type=search],
.content-wrapper input[type=date]{
  background:var(--sheet) !important;border:1px solid var(--line-2) !important;border-radius:var(--r-m) !important;
  color:var(--ink) !important;font-size:calc(13.5px * var(--tscale)) !important;min-height:38px;box-shadow:none !important}
.content-wrapper .form-control:focus,.content-wrapper .form-select:focus,
.content-wrapper input:focus,.content-wrapper textarea:focus,.content-wrapper select:focus{
  border-color:var(--accent) !important;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent) !important;outline:none}
.content-wrapper .form-control::placeholder{color:var(--ink-3) !important}
.content-wrapper label,.content-wrapper .control-label{color:var(--ink-2) !important;font-weight:var(--w2);font-size:calc(12.5px * var(--tscale))}

/* ---- badges ---- */
.content-wrapper .badge{border-radius:999px !important;font-weight:var(--w2) !important;font-size:calc(10.5px * var(--tscale)) !important;padding:3px 9px !important;border:1px solid transparent}
.content-wrapper .badge-success,.content-wrapper .bg-success,.content-wrapper .badge.badge-success{background:var(--ok-wash) !important;color:var(--ok) !important;border-color:var(--ok-line) !important}
.content-wrapper .badge-danger,.content-wrapper .bg-danger{background:var(--danger-wash) !important;color:var(--danger) !important;border-color:var(--danger-line) !important}
.content-wrapper .badge-warning,.content-wrapper .bg-warning{background:var(--warn-wash) !important;color:var(--warn) !important;border-color:var(--warn-line) !important}
.content-wrapper .badge-info,.content-wrapper .bg-info,.content-wrapper .badge-primary,.content-wrapper .bg-primary{background:var(--info-wash) !important;color:var(--info) !important;border-color:var(--info-line) !important}
.content-wrapper .badge-secondary,.content-wrapper .bg-secondary{background:var(--quiet-wash) !important;color:var(--quiet) !important;border-color:var(--quiet-line) !important}

/* ---- tables (Bootstrap + Kartik GridView) ---- */
.content-wrapper .table,
.content-wrapper .kv-grid-table,
.content-wrapper .grid-view table{width:100%;border-collapse:collapse;color:var(--ink);background:var(--sheet)}
.content-wrapper .table thead th,
.content-wrapper .kv-grid-table thead th,
.content-wrapper .grid-view thead th{
  background:var(--sheet-2) !important;color:var(--ink-2) !important;border-bottom:1px solid var(--line) !important;border-top:0 !important;
  text-transform:uppercase;font-size:calc(10px * var(--tscale));letter-spacing:.06em;font-weight:var(--w3);padding:10px 14px !important}
.content-wrapper .table tbody td,
.content-wrapper .kv-grid-table tbody td,
.content-wrapper .grid-view tbody td{
  border-top:0 !important;border-bottom:1px solid var(--line) !important;padding:11px 14px !important;font-size:calc(12.5px * var(--tscale));vertical-align:middle;color:var(--ink)}
.content-wrapper .table tbody tr:hover td,
.content-wrapper .kv-grid-table tbody tr:hover td{background:var(--sheet-2) !important}
.content-wrapper .table-bordered,.content-wrapper .table-bordered td,.content-wrapper .table-bordered th{border-color:var(--line) !important}

/* ---- Kartik grid chrome: filter row, summary, pager ---- */
.content-wrapper .kv-grid-table .filters .form-control{min-height:32px}
.content-wrapper .summary{color:var(--ink-3) !important;font-size:calc(12px * var(--tscale));margin-bottom:8px}
.content-wrapper .pagination{gap:4px}
.content-wrapper .pagination .page-link{border:1px solid var(--line) !important;border-radius:var(--r-s) !important;color:var(--ink-2) !important;background:var(--sheet) !important;font-size:calc(12px * var(--tscale));padding:5px 10px}
.content-wrapper .pagination .active .page-link{background:var(--accent) !important;border-color:var(--accent) !important;color:var(--accent-fg) !important}
.content-wrapper .panel.panel-default{overflow:hidden}

/* ---- alerts, breadcrumb, tabs, modal, dropdowns inside content ---- */
.content-wrapper .alert{border-radius:var(--r-m) !important;border:1px solid var(--line) !important;font-size:calc(13px * var(--tscale))}
.content-wrapper .alert-success{background:var(--ok-wash) !important;color:var(--ok) !important;border-color:var(--ok-line) !important}
.content-wrapper .alert-danger{background:var(--danger-wash) !important;color:var(--danger) !important;border-color:var(--danger-line) !important}
.content-wrapper .alert-warning{background:var(--warn-wash) !important;color:var(--warn) !important;border-color:var(--warn-line) !important}
.content-wrapper .alert-info{background:var(--info-wash) !important;color:var(--info) !important;border-color:var(--info-line) !important}
.content-wrapper .nav-tabs{border-bottom:1px solid var(--line)}
.content-wrapper .nav-tabs .nav-link{color:var(--ink-2);border:0;border-bottom:2px solid transparent;border-radius:0;font-size:calc(13px * var(--tscale))}
.content-wrapper .nav-tabs .nav-link.active{color:var(--accent);border-bottom-color:var(--accent);background:none}
.content-wrapper .modal-content{background:var(--sheet) !important;border:1px solid var(--line) !important;border-radius:var(--r-l) !important;color:var(--ink)}
.content-wrapper .modal-header,.content-wrapper .modal-footer{border-color:var(--line) !important}
.content-wrapper hr{border-color:var(--line)}
.content-wrapper a{color:var(--accent)}
.content-wrapper a:hover{color:var(--accent-h)}

/* ---- Collapsed (rail) mode for the server-rendered nav --------------------
   The design's rail rules target the prototype's .navitem/.eyebrow classes;
   our server-rendered nav uses .navlink/.group, so collapse them here too and
   add a hover flyout label so a collapsed icon still names itself. */
.app[data-rail="1"] .nav .group{display:none}
.app[data-rail="1"] .nav .navlink span{display:none}
.app[data-rail="1"] .nav .navlink .count{display:none}
.app[data-rail="1"] .nav .navlink{justify-content:center;padding:0;position:relative}
.app[data-rail="1"] .nav .navlink.active::before{left:-2px}
/* hover flyout "panel" naming the destination while collapsed */
.app[data-rail="1"] .nav .navlink:hover span{
  display:block;position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);
  background:var(--ink);color:var(--canvas);padding:5px 11px;border-radius:var(--r-s);white-space:nowrap;
  z-index:80;box-shadow:var(--shadow-3);font-size:calc(12px * var(--tscale));font-weight:var(--w2);pointer-events:none}
.app[data-rail="1"] .nav .navlink:hover span::before{
  content:"";position:absolute;left:-4px;top:50%;transform:translateY(-50%) rotate(45deg);
  width:8px;height:8px;background:var(--ink);border-radius:1px}

/* ============================================================
   MENU BUILDER CANVAS → Signal tokens
   The builder's stylesheet (menu-builder.css) and builder.php's inline
   styles drive everything off CSS variables that lived in the admin
   theme (not loaded here) plus a hardcoded indigo gradient. Remap those
   variables to Signal tokens and override the gradient, so the whole
   drag-and-drop canvas adopts the design with no markup/JS change.
   ============================================================ */
.content-wrapper{
  --bg-primary: var(--sheet);
  --bg-secondary: var(--canvas);
  --bg-tertiary: var(--sheet-2);
  --border-color: var(--line);
  --primary-color: var(--accent);
  --text-primary: var(--ink);
  --text-secondary: var(--ink-2);
  --shadow-sm: var(--shadow-1);
  --shadow-md: var(--shadow-1);
  --shadow-lg: var(--shadow-2);
  --shadow-xl: var(--shadow-3);
}
/* gradient hero → quiet tinted Signal header */
.content-wrapper .menu-builder-header{
  background: var(--sheet-2) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-l) !important;
  box-shadow: var(--shadow-1) !important;
}
.content-wrapper .menu-builder-header .page-title,
.content-wrapper .menu-builder-header h1,
.content-wrapper .menu-builder-header .menu-status,
.content-wrapper .menu-builder-header span{ color: var(--ink) !important; }
.content-wrapper .menu-builder-header .menu-status{ background: color-mix(in srgb,var(--accent) 12%, var(--sheet)) !important; border:1px solid var(--line) !important; }
/* header action buttons: were white-on-gradient — restate as Signal buttons */
.content-wrapper .menu-builder-header .btn{ background: var(--sheet) !important; color: var(--ink) !important; border:1px solid var(--line-2) !important; }
.content-wrapper .menu-builder-header .btn:hover{ background: var(--sheet-3) !important; }
.content-wrapper .menu-builder-header .btn-primary{ background: linear-gradient(180deg,var(--accent),var(--accent-h)) !important; color: var(--accent-fg) !important; border-color: transparent !important; }
/* nodes / items / tree / panels pick up the remapped vars; fix hardcoded indigo */
.content-wrapper .drop-zone{ border-color: var(--accent) !important; background: color-mix(in srgb,var(--accent) 6%, var(--sheet)) !important; }
.content-wrapper .menu-node.selected,
.content-wrapper .menu-item.selected,
.content-wrapper .menu-item:hover,
.content-wrapper .menu-node:hover{ border-color: var(--accent) !important; }
.content-wrapper .menu-node{ box-shadow: var(--shadow-1) !important; }
.content-wrapper .status-active,.content-wrapper .status-badge.status-active{ background: var(--ok-wash) !important; color: var(--ok) !important; border:1px solid var(--ok-line) !important; }
.content-wrapper .status-draft,.content-wrapper .status-badge.status-draft{ background: var(--warn-wash) !important; color: var(--warn) !important; border:1px solid var(--warn-line) !important; }
/* dotted canvas grid → quiet neutral */
.content-wrapper .menu-canvas .canvas-content{ background-color: var(--inset) !important; }
/* builder header: Bootstrap .text-white + translucent pill were made for the
   old gradient; restate on the light Signal header. */
.content-wrapper .menu-builder-header .text-white{ color: var(--ink) !important; }
.content-wrapper .menu-builder-header p{ background: color-mix(in srgb,var(--accent) 10%, var(--sheet)) !important; color: var(--ink-2) !important; border:1px solid var(--line) !important; border-radius: 999px; }

/* ============================================================
   DARK-MODE + DROPDOWN FIXES
   ============================================================ */
/* Dropdown menus (user / notifications) use .navlink, which only gets its flex
   layout inside .nav — restate it here so items stack as proper rows. */
.dropdown-menu .navlink{
  display:flex;align-items:center;gap:10px;width:100%;height:34px;padding:0 10px;
  border-radius:var(--r-m);color:var(--ink-2);text-decoration:none;
  font-size:calc(13px * var(--tscale));font-weight:var(--w1);white-space:nowrap;transition:background .14s var(--ease),color .14s var(--ease)}
.dropdown-menu .navlink svg{width:16px;height:16px;flex:none;color:var(--ink-3)}
.dropdown-menu .navlink:hover{background:var(--sheet-3);color:var(--ink)}

/* Bootstrap paints table cell backgrounds via the --bs-table-* vars (as an inset
   box-shadow for striping), so a plain background override leaves white cells in
   dark mode. Drive those vars from Signal tokens and clear the cell box-shadow so
   every table follows the theme. */
.content-wrapper .table,
.content-wrapper .kv-grid-table,
.content-wrapper .grid-view table{
  --bs-table-bg:transparent;
  --bs-table-color:var(--ink);
  --bs-table-striped-bg:color-mix(in srgb,var(--ink) 4%, transparent);
  --bs-table-striped-color:var(--ink);
  --bs-table-hover-bg:var(--sheet-2);
  --bs-table-hover-color:var(--ink);
  --bs-table-active-bg:var(--sheet-2);
  --bs-table-border-color:var(--line);
  --bs-table-accent-bg:transparent;
  background:var(--sheet) !important;color:var(--ink) !important;
}
.content-wrapper .table > :not(caption) > * > *,
.content-wrapper .kv-grid-table > :not(caption) > * > *{
  background-color:transparent !important;color:var(--ink) !important;box-shadow:none !important;
}
.content-wrapper .table-responsive,
.content-wrapper .grid-view,
.content-wrapper .kv-grid-container,
.content-wrapper .menus-section,
.content-wrapper .table-wrapper{ background:transparent !important; }

/* ============================================================
   NAV LAYOUTS for the server-rendered nav (.navlink / .group)
   The design's data-layout rules target .navitem/.navgroup; our shell uses
   .navlink/.group, so the top & dock layouts broke. Restate them for our
   classes so Top nav and Dock lay out correctly (left/right already work).
   ============================================================ */
/* --- top nav --- */
[data-layout="top"] .side{flex-direction:row;align-items:center;gap:12px;height:54px;padding:0 8px;min-width:0}
[data-layout="top"] .brand{height:auto;flex:none}
[data-layout="top"] .tenant{flex:none;width:auto;max-width:210px;margin:0}
[data-layout="top"] .side nav.nav{flex-direction:row;align-items:center;gap:2px;overflow-x:auto;overflow-y:hidden;padding:0;min-height:0}
[data-layout="top"] .nav .group{display:none}
[data-layout="top"] .nav .navlink{height:36px;white-space:nowrap;flex:none}
[data-layout="top"] .nav .navlink.active::before{left:10px;right:10px;top:auto;bottom:-1px;width:auto;height:3px}
[data-layout="top"] .nav::-webkit-scrollbar{height:0}
[data-layout="top"] .side-foot{flex:none;border:0;margin:0;padding:0 2px}
[data-layout="top"] .side-foot .subtle{display:none}

/* --- bottom dock --- */
[data-layout="bottom"] .side{flex-direction:row;justify-content:center;align-items:center;gap:4px;padding:6px;height:auto}
[data-layout="bottom"] .brand,[data-layout="bottom"] .tenant,[data-layout="bottom"] .side-foot{display:none}
[data-layout="bottom"] .side nav.nav{flex-direction:row;justify-content:center;gap:6px;overflow-x:auto;padding:0;min-height:0}
[data-layout="bottom"] .nav .group{display:none}
[data-layout="bottom"] .nav .navlink{flex-direction:column;gap:3px;height:auto;padding:6px 12px;justify-content:center}
[data-layout="bottom"] .nav .navlink span{font-size:calc(10px * var(--tscale))}
[data-layout="bottom"] .nav .navlink .count{display:none}
[data-layout="bottom"] .nav .navlink.active::before{left:12px;right:12px;top:-4px;bottom:auto;width:auto;height:3px}
/* navlinks must size to content (not 100%) in the horizontal layouts */
[data-layout="top"] .side nav.nav .navlink,
[data-layout="bottom"] .side nav.nav .navlink{width:auto;flex:none}

/* ============================================================
   DARK-SAFE LIGHT BACKGROUNDS
   Bootstrap utility backgrounds (.bg-light/.bg-white) and inline light hexes
   (#f8f9fa, #fff, white, …) rendered white-on-dark. Map them to Signal surface
   tokens, which are white in light mode and dark in dark mode — so light is
   unchanged and dark stops showing white patches.
   ============================================================ */
.content-wrapper .bg-light,
.content-wrapper .bg-white{ background-color: var(--sheet-2) !important; color: var(--ink) !important; }
.content-wrapper .user-item,
.content-wrapper .role-item,
.content-wrapper .client-item,
.content-wrapper .list-group-item{ background-color: var(--sheet-2) !important; color: var(--ink) !important; border-color: var(--line) !important; }
.content-wrapper [style*="#f8f9fa" i],
.content-wrapper [style*="#f9fafb" i],
.content-wrapper [style*="#f5f5f5" i],
.content-wrapper [style*="#fafafa" i],
.content-wrapper [style*="#ffffff" i],
.content-wrapper [style*="#fff;" i],
.content-wrapper [style*="background: #fff" i],
.content-wrapper [style*="background:#fff" i],
.content-wrapper [style*="background: white" i],
.content-wrapper [style*="background:white" i],
.content-wrapper [style*="background-color: #fff" i],
.content-wrapper [style*="background-color: white" i],
.content-wrapper [style*="rgb(255, 255, 255)" i]{ background-color: var(--sheet) !important; }
/* text-dark utility must not stay dark-on-dark */
.content-wrapper .text-dark,
.content-wrapper .text-black{ color: var(--ink) !important; }

/* ============================================================
   DOCUMENTATION — advanced Signal docs reader
   Reskins the existing docs pages (.docs-container) into a two-pane reader:
   sticky scroll-spy TOC + serif content, Signal code blocks, live search.
   Content markup is untouched; this styles it and signal.js enhances it.
   ============================================================ */
.content-wrapper .docs-container{ background:transparent !important; padding:0 !important; min-height:0 !important; }
.content-wrapper .docs-container .row{ display:grid; grid-template-columns:260px minmax(0,1fr); gap:20px; margin:0; }
@media (max-width:900px){ .content-wrapper .docs-container .row{ grid-template-columns:minmax(0,1fr); } }
.content-wrapper .docs-container [class*="col-"]{ width:auto; max-width:none; padding:0; flex:none; }

/* sidebar TOC */
.content-wrapper .docs-sidebar{
  position:sticky; top:8px; align-self:start; background:var(--sheet) !important; border:1px solid var(--line) !important;
  border-radius:var(--r-l) !important; box-shadow:var(--shadow-1) !important; overflow:hidden; max-height:calc(100vh - 90px); display:flex; flex-direction:column; }
.content-wrapper .docs-sidebar .card-header{
  background:color-mix(in srgb,var(--accent) 12%,var(--sheet)) !important; color:var(--ink) !important;
  border-bottom:1px solid var(--line) !important; font-family:var(--serif); font-weight:var(--w3); }
.content-wrapper .docs-sidebar .card-header *{ color:var(--ink) !important; }
.content-wrapper #docs-nav{ overflow-y:auto; padding:8px; gap:1px; display:flex; flex-direction:column; }
.content-wrapper #docs-nav .list-group-item{
  border:0 !important; background:transparent !important; color:var(--ink-2) !important; border-radius:var(--r-m) !important;
  padding:7px 11px !important; font-size:calc(12.5px * var(--tscale)); font-weight:var(--w1); position:relative; cursor:pointer;
  transition:background .14s var(--ease),color .14s var(--ease); }
.content-wrapper #docs-nav .list-group-item:hover{ background:var(--sheet-3) !important; color:var(--ink) !important; }
.content-wrapper #docs-nav .list-group-item.active{ background:var(--sheet-3) !important; color:var(--ink) !important; font-weight:var(--w2); }
.content-wrapper #docs-nav .list-group-item.active::before{
  content:""; position:absolute; left:2px; top:7px; bottom:7px; width:3px; border-radius:3px; background:var(--accent); }
.content-wrapper #docs-nav .list-group-item.ml-3{ margin-left:14px; font-size:calc(12px * var(--tscale)); }
.content-wrapper #docs-nav .list-group-item[hidden]{ display:none; }
/* search box injected by signal.js */
.content-wrapper .docs-search{ padding:10px; border-bottom:1px solid var(--line); }
.content-wrapper .docs-search input{
  width:100%; height:34px; padding:0 10px; border:1px solid var(--line-2); border-radius:var(--r-m);
  background:var(--inset); color:var(--ink); font-size:calc(12.5px * var(--tscale)); outline:none; }
.content-wrapper .docs-search input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent); }
.content-wrapper .docs-nav-empty{ padding:12px; color:var(--ink-3); font-size:calc(12px * var(--tscale)); }

/* content */
.content-wrapper .docs-content{ background:var(--sheet) !important; border:1px solid var(--line) !important; border-radius:var(--r-l) !important; box-shadow:var(--shadow-1) !important; }
.content-wrapper .docs-content .card-body{ padding:34px 40px !important; }
@media (max-width:900px){ .content-wrapper .docs-content .card-body{ padding:22px !important; } }
.content-wrapper .docs-content h2{ font-family:var(--serif); font-weight:var(--w3); font-size:calc(24px * var(--tscale)); color:var(--ink) !important; border-bottom:1px solid var(--line) !important; padding-bottom:12px; }
.content-wrapper .docs-content h3{ font-family:var(--serif); font-weight:var(--w3); font-size:calc(18px * var(--tscale)); color:var(--ink) !important; }
.content-wrapper .docs-content h5{ font-weight:var(--w3); color:var(--ink) !important; }
.content-wrapper .docs-content section{ scroll-margin-top:16px; }
.content-wrapper .docs-content p,.content-wrapper .docs-content li{ color:var(--ink-2); line-height:1.6; }
.content-wrapper .docs-content .lead{ color:var(--ink-2) !important; font-size:calc(15px * var(--tscale)); }
.content-wrapper .docs-content code{ background:color-mix(in srgb,var(--accent) 12%,var(--inset)); color:var(--accent-on-wash,var(--ink)); padding:1px 6px; border-radius:6px; font-family:var(--mono); font-size:.9em; }
.content-wrapper .docs-content pre{ background:var(--inset) !important; border:1px solid var(--line); border-radius:var(--r-m); padding:16px 18px !important; overflow:auto; position:relative; }
.content-wrapper .docs-content pre code{ background:none; color:var(--ink-2); padding:0; font-size:calc(12.5px * var(--tscale)); }
.content-wrapper .docs-content .text-success,.content-wrapper .docs-content .text-info{ color:var(--accent) !important; }
.content-wrapper .docs-copy{ position:absolute; top:8px; right:8px; height:26px; padding:0 9px; font-size:11px; border:1px solid var(--line-2); border-radius:var(--r-s); background:var(--sheet); color:var(--ink-2); cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
.content-wrapper .docs-copy:hover{ background:var(--sheet-3); color:var(--ink); }

/* ============================================================
   CKEDITOR (2amigos / CKEditor 4) — theme-aware chrome
   The toolbar/chrome lives in the main document; style it with Signal tokens.
   The editing area is an <iframe> the CSS can't reach — signal.js injects a
   dark stylesheet into that iframe in dark mode.
   ============================================================ */
.content-wrapper .cke_chrome{ border:1px solid var(--line) !important; border-radius:var(--r-m); overflow:hidden; }
.content-wrapper .cke_top,
.content-wrapper .cke_bottom{ background:var(--sheet-2) !important; border-color:var(--line) !important; box-shadow:none !important; }
.content-wrapper .cke_toolbar,
.content-wrapper .cke_toolgroup{ background:transparent !important; border:0 !important; box-shadow:none !important; }
.content-wrapper .cke_button,
.content-wrapper .cke_combo_button,
.content-wrapper .cke_combo_text,
.content-wrapper .cke_path_item{ color:var(--ink-2) !important; }
.content-wrapper .cke_button:hover,
.content-wrapper .cke_button_on,
.content-wrapper .cke_combo_button:hover{ background:var(--sheet-3) !important; }
.content-wrapper .cke_toolbar_separator{ background:var(--line) !important; }
.content-wrapper .cke_wysiwyg_frame,
.content-wrapper .cke_wysiwyg_div{ background:var(--sheet) !important; }
.content-wrapper .cke_combo_text{ background:transparent !important; }
/* the CKEditor icon sprite is dark artwork; invert it in dark mode so it shows */
:root[data-theme="dark"] .content-wrapper .cke_button_icon,
:root[data-theme="dark"] .content-wrapper .cke_combo_open{ filter:invert(.85) hue-rotate(180deg); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .content-wrapper .cke_button_icon,
  :root:not([data-theme="light"]) .content-wrapper .cke_combo_open{ filter:invert(.85) hue-rotate(180deg); }
}

/* ============================================================
   SETTINGS FORM — sectioned, two-column, sticky save
   ============================================================ */
.settings-form{max-width:960px}
.settings-form .settings-card{margin-bottom:18px}
.settings-form .settings-card .card-body{padding:18px 20px}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 22px}
@media (max-width:760px){.settings-grid{grid-template-columns:1fr}}
.settings-form .field{margin-bottom:15px}
.settings-form .field > label,.settings-form .field label.form-label,.settings-form .field .control-label{
  display:block;font-size:calc(12.5px * var(--tscale));font-weight:var(--w2);color:var(--ink-2);margin-bottom:5px}
.settings-form .field .help-block,.settings-form .field .hint-block{color:var(--ink-3);font-size:calc(11.5px * var(--tscale));margin-top:4px}
.settings-form .form-control,.settings-form .form-select,.settings-form textarea{width:100%}
.settings-checks{display:flex;flex-direction:column;gap:4px;margin-top:8px;padding-top:12px;border-top:1px solid var(--line)}
.settings-checks .field{margin:0;display:flex;align-items:center;gap:9px}
.settings-checks .field label{margin:0;color:var(--ink);font-weight:var(--w1)}
.settings-actions{position:sticky;bottom:0;z-index:10;display:flex;justify-content:flex-end;gap:10px;
  padding:14px 2px;margin-top:6px;background:linear-gradient(180deg,transparent,var(--canvas) 45%)}

/* company settings: make the plain content-box heading read as a Signal page title */
.content-wrapper .company-settings-update{background:transparent !important;border:0 !important;box-shadow:none !important;padding:0 !important;border-radius:0 !important}
.content-wrapper .company-settings-update > h3{font-family:var(--serif);font-size:calc(24px * var(--tscale));font-weight:var(--w3);color:var(--ink) !important;letter-spacing:-.01em;margin:0 0 18px}

/* reports filter bar */
.report-filter{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;align-items:end}
.report-filter .field{margin:0}
.report-filter .field label{display:block;font-size:calc(12px * var(--tscale));font-weight:var(--w2);color:var(--ink-2);margin-bottom:5px}
.report-filter-acts{grid-column:1/-1;display:flex;gap:10px;margin-top:2px}
@media (max-width:760px){.report-filter{grid-template-columns:1fr}}

/* ============================================================
   MOBILE / RESPONSIVE (≤767px)
   The server-rendered sidebar becomes a scrollable bottom dock; content
   collapses to one column; wide tables scroll inside their card.
   ============================================================ */
@media (max-width:767px){
  .frame{padding:0 !important;height:100vh}
  .app{grid-template-columns:minmax(0,1fr) !important;grid-template-rows:minmax(0,1fr) auto !important;height:100vh !important;gap:0}
  /* sidebar → bottom dock */
  .side{order:2;flex-direction:row;align-items:center;justify-content:flex-start;gap:4px;height:auto;
    padding:6px 8px;overflow-x:auto;overflow-y:hidden;border-top:1px solid var(--line);background:var(--sheet);box-shadow:var(--shadow-2)}
  .side .brand,.side .tenant,.side .side-foot{display:none}
  .side nav.nav{flex-direction:row !important;align-items:center;justify-content:flex-start;gap:4px;
    overflow-x:auto;overflow-y:hidden;min-height:0;padding:0}
  .side nav.nav .group{display:none}
  .side nav.nav .navlink{flex-direction:column;gap:3px;height:auto;padding:6px 11px;width:auto !important;flex:none;white-space:nowrap}
  .side nav.nav .navlink svg{width:18px;height:18px}
  .side nav.nav .navlink span{font-size:calc(9.5px * var(--tscale))}
  .side nav.nav .navlink .count{display:none}
  .side nav.nav .navlink.active{box-shadow:none;border:0;background:transparent}
  .side nav.nav .navlink.active::before{left:11px;right:11px;top:-6px;bottom:auto;width:auto;height:3px}
  .side nav.nav::-webkit-scrollbar{height:0}
  /* sheet + page */
  .sheet{border-radius:0;border-left:0;border-right:0;border-top:0}
  .page{padding:16px 12px 24px}
  .topbar{padding:0 10px}
  .topbar .search{display:none}
  .topbar .crumb .sep,.topbar .crumb span:first-child{display:none}
  .page-head{flex-direction:column;align-items:flex-start;gap:12px}
  .page-head .acts{width:100%}
  /* content grids */
  .cols,.mcols{grid-template-columns:minmax(0,1fr) !important}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .settings-grid,.report-filter,.sim-wrap{grid-template-columns:1fr !important}
  .settings-form,.settings-actions{max-width:100%}
  /* wide tables scroll inside the card instead of overflowing the page */
  .card-body{overflow-x:auto}
  .content-wrapper .table-responsive,.content-wrapper .grid-view{overflow-x:auto}
  /* command palette + dialogs full-width-ish */
  .cmdk-box{width:94vw}
}
@media (max-width:420px){ .kpis{grid-template-columns:1fr !important} }

/* Fallback .content-wrapper .btn{!important} was overriding Signal .btn.pri —
   restore the accent on primary buttons inside the content area. */
.content-wrapper .btn.pri,
.content-wrapper button.btn.pri,
.content-wrapper a.btn.pri{
  background:linear-gradient(180deg,var(--accent),var(--accent-h)) !important;
  color:var(--accent-fg) !important;border-color:transparent !important;box-shadow:var(--shadow-1)}
.content-wrapper .btn.pri:hover{filter:brightness(1.06)}
.content-wrapper .btn.sm{padding:5px 10px !important;font-size:calc(11.5px * var(--tscale)) !important}

/* ============================================================
   GLOBAL FORM POLISH (fallback create/update forms, both modules)
   Cards the form, makes the title serif with an accent icon, and tidies
   labels/hints/required markers — so every un-ported form looks intentional.
   ============================================================ */
.content-wrapper > [class*="-create"],
.content-wrapper > [class*="-update"],
.content-wrapper > [class*="-form"]:not(.settings-form):not(.staff-form){
  background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:var(--shadow-1);padding:22px 24px;max-width:1080px}
.content-wrapper .card-title{
  font-family:var(--serif);font-size:calc(20px * var(--tscale));font-weight:var(--w3);
  color:var(--ink) !important;letter-spacing:-.01em;margin:0 0 20px;padding-bottom:14px;
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.content-wrapper .card-title i,.content-wrapper legend i{color:var(--accent)}
.content-wrapper form legend{font-family:var(--serif);font-weight:var(--w3);font-size:calc(17px * var(--tscale));
  color:var(--ink);border:0;margin:0 0 14px;padding:0}
.content-wrapper form fieldset{border:0;padding:0;margin:0}
/* fields */
.content-wrapper form label,.content-wrapper .control-label{
  font-size:calc(12.5px * var(--tscale)) !important;font-weight:var(--w2) !important;color:var(--ink-2) !important;margin-bottom:5px !important}
.content-wrapper .help-block,.content-wrapper .hint-block,.content-wrapper small.form-text{
  color:var(--ink-3) !important;font-size:calc(11.5px * var(--tscale)) !important;margin-top:5px;display:block}
.content-wrapper .help-block strong,.content-wrapper .hint-block strong{color:var(--ink-2)}
.content-wrapper .form-group{margin-bottom:16px}
.content-wrapper .required > label:after,.content-wrapper label.required:after{content:" *";color:var(--danger);font-weight:var(--w3)}
/* checkbox rows */
.content-wrapper .form-check,.content-wrapper .checkbox{display:flex;align-items:center;gap:9px;margin:4px 0}
.content-wrapper .form-check-input,.content-wrapper input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent)}
/* the submit row: separate it and make the primary action an accent button */
.content-wrapper form > .form-group:last-child,.content-wrapper .form-actions{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--line);display:flex;gap:10px;align-items:center}
.content-wrapper .btn-success,.content-wrapper .btn-primary{
  background:linear-gradient(180deg,var(--accent),var(--accent-h)) !important;color:var(--accent-fg) !important;border-color:transparent !important}

/* content-box wrappers (used by many create/update forms) get inner padding */
.content-wrapper .content-box{padding:20px 22px}
/* .form-width-full is an inner layout div, not a card — don't card it */
.content-wrapper > .form-width-full{background:none;border:0;box-shadow:none;padding:0;max-width:none}

/* native file input button — theme-aware */
.content-wrapper input[type=file]{color:var(--ink-2);font-size:calc(12.5px * var(--tscale))}
.content-wrapper input[type=file]::file-selector-button{
  background:var(--sheet-2);color:var(--ink);border:1px solid var(--line-2);border-radius:var(--r-s);
  padding:6px 12px;margin-right:12px;cursor:pointer;font-size:calc(12px * var(--tscale));font-weight:var(--w2)}
.content-wrapper input[type=file]::file-selector-button:hover{background:var(--sheet-3)}

/* ============================================================
   Select2 — Signal skin (searchable dropdowns, light + dark)
   kartik Select2 ships its own light CSS; these rules re-tint it
   with Signal tokens so it matches our inputs in every palette.
   ============================================================ */
.select2-container{width:100% !important;max-width:100%}
.content-wrapper .select2-container--krajee-bs5 .select2-selection,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple{
  background:var(--sheet) !important;border:1px solid var(--line-2) !important;
  border-radius:var(--r-m) !important;min-height:38px !important;color:var(--ink) !important;
  box-shadow:none !important;display:flex;align-items:center;flex-wrap:wrap;gap:4px;padding:3px 8px !important}
.select2-container--krajee-bs5.select2-container--focus .select2-selection,
.select2-container--default.select2-container--focus .select2-selection,
.select2-container--open .select2-selection{
  border-color:var(--accent) !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent) !important}
.select2-container .select2-selection--single{height:38px !important}
.select2-selection__rendered,.select2-container--default .select2-selection--single .select2-selection__rendered{
  color:var(--ink) !important;line-height:30px !important;padding:0 !important}
.select2-selection__placeholder{color:var(--ink-3) !important}
.select2-selection__arrow{height:36px !important}
.select2-selection__arrow b{border-color:var(--ink-3) transparent transparent !important}
.select2-selection__clear{color:var(--ink-3) !important;font-weight:400 !important;margin-right:4px}
/* multiple-select chips */
.select2-selection--multiple .select2-selection__choice{
  background:color-mix(in srgb,var(--accent) 14%,var(--sheet)) !important;
  border:1px solid color-mix(in srgb,var(--accent) 32%,var(--line)) !important;
  color:var(--ink) !important;border-radius:999px !important;
  padding:1px 9px 1px 6px !important;font-size:calc(12px * var(--tscale)) !important;margin:2px 2px 0 0 !important}
.select2-selection--multiple .select2-selection__choice__remove{color:var(--ink-3) !important;margin-right:4px !important;border:0 !important;background:none !important}
.select2-selection--multiple .select2-selection__choice__remove:hover{color:var(--danger) !important;background:none !important}
.select2-search--inline .select2-search__field{color:var(--ink) !important;margin-top:4px}
/* dropdown panel */
.select2-dropdown{
  background:var(--sheet) !important;border:1px solid var(--line-2) !important;
  border-radius:var(--r-m) !important;box-shadow:var(--shadow-2) !important;color:var(--ink) !important;overflow:hidden}
.select2-search--dropdown{padding:8px !important}
.select2-search--dropdown .select2-search__field{
  background:var(--sheet-2) !important;border:1px solid var(--line-2) !important;
  border-radius:var(--r-s) !important;color:var(--ink) !important;padding:6px 9px !important;outline:none}
.select2-search--dropdown .select2-search__field:focus{border-color:var(--accent) !important}
.select2-results__option{color:var(--ink) !important;padding:7px 11px !important;font-size:calc(13px * var(--tscale)) !important}
.select2-results__option--highlighted,
.select2-results__option--highlighted[aria-selected]{
  background:color-mix(in srgb,var(--accent) 16%,var(--sheet)) !important;color:var(--ink) !important}
.select2-results__option[aria-selected=true],
.select2-results__option--selected{
  background:color-mix(in srgb,var(--accent) 24%,var(--sheet)) !important;color:var(--ink) !important}
.select2-results__message{color:var(--ink-3) !important}

/* ============================================================
   Data-table enhancements — search toolbar, sortable headers,
   totals footer (injected by SignalTables). Light + dark.
   ============================================================ */
.content-wrapper .tbl-toolbar{display:flex;align-items:center;gap:12px;margin:0 0 10px;flex-wrap:wrap}
.content-wrapper .tbl-search{display:inline-flex;align-items:center;gap:7px;background:var(--sheet);
  border:1px solid var(--line-2);border-radius:var(--r-m);padding:0 10px;min-width:240px;max-width:320px;flex:0 1 300px}
.content-wrapper .tbl-search svg{width:15px;height:15px;color:var(--ink-3);flex:none}
.content-wrapper .tbl-search input{border:0 !important;background:none !important;outline:none;box-shadow:none !important;
  min-height:34px !important;padding:0 !important;width:100%;color:var(--ink);font-size:calc(13px * var(--tscale))}
.content-wrapper .tbl-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.content-wrapper .tbl-count{font-size:calc(11.5px * var(--tscale));color:var(--ink-3);font-family:var(--mono);
  background:var(--sheet-2);border:1px solid var(--line);border-radius:999px;padding:3px 10px}

/* sortable header affordance */
.content-wrapper .grid-view thead th.sortable{cursor:pointer;user-select:none;position:relative;padding-right:20px;transition:color .14s var(--ease)}
.content-wrapper .grid-view thead th.sortable:hover{color:var(--ink)}
.content-wrapper .grid-view thead th.sortable a{color:inherit !important;text-decoration:none !important;cursor:pointer}
.content-wrapper .grid-view thead th.sortable:after{content:"";position:absolute;right:7px;top:50%;width:7px;height:7px;
  opacity:.28;background:currentColor;
  -webkit-mask:center/7px no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 9l4-4 4 4M8 15l4 4 4-4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  mask:center/7px no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 9l4-4 4 4M8 15l4 4 4-4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  transform:translateY(-50%)}
.content-wrapper .grid-view thead th.sort-asc:after,
.content-wrapper .grid-view thead th.sort-desc:after{opacity:.9;color:var(--accent)}
.content-wrapper .grid-view thead th.sort-asc:after{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 15l6-6 6 6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 15l6-6 6 6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
.content-wrapper .grid-view thead th.sort-desc:after{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>")}

/* totals footer */
.content-wrapper .grid-view tfoot td{border-top:2px solid var(--line-2);padding:9px 12px;font-size:calc(12px * var(--tscale));
  background:var(--sheet-2);color:var(--ink-2);font-weight:var(--w3)}
.content-wrapper .grid-view tfoot td.tbl-foot-label{color:var(--ink-3);font-family:var(--mono);font-weight:var(--w2)}
.content-wrapper .grid-view tfoot td.tbl-foot-num{color:var(--ink);font-family:var(--mono);text-align:right}

/* ============================================================
   Dashboard charts — donut + horizontal bars (SignalDonut/Bars)
   ============================================================ */
.donut-wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.donut-ring{position:relative;flex:none;width:136px;height:136px}
.donut{width:136px;height:136px;display:block}
.donut-seg{transition:stroke-dasharray .6s var(--ease)}
.donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.donut-center b{font-family:var(--serif);font-size:calc(22px * var(--tscale));font-weight:var(--w3);color:var(--ink);line-height:1}
.donut-center span{font-size:calc(10px * var(--tscale));color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;margin-top:3px}
.donut-legend{flex:1;min-width:150px;display:flex;flex-direction:column;gap:7px}
.dl-row{display:flex;align-items:center;gap:8px;font-size:calc(12.5px * var(--tscale))}
.dl-row .dot{width:9px;height:9px;border-radius:3px;flex:none}
.dl-row .dl-lab{color:var(--ink-2);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-row .dl-val{color:var(--ink);font-family:var(--mono);font-weight:var(--w3)}
.dl-row .dl-pct{color:var(--ink-3);font-family:var(--mono);font-size:calc(11px * var(--tscale));width:38px;text-align:right}

.hbars{display:flex;flex-direction:column;gap:12px}
.hbar-row .hbar-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px;font-size:calc(12.5px * var(--tscale))}
.hbar-row .hbar-lab{color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70%}
.hbar-row .hbar-val{color:var(--ink);font-family:var(--mono);font-weight:var(--w3)}
.hbar-track{height:8px;border-radius:5px;background:var(--inset);overflow:hidden}
.hbar-fill{display:block;height:100%;border-radius:5px;transition:width .6s var(--ease);min-width:2px}