/* =====================================================================
   Inferstrat Guard — "Console" design system (ported from the Inferstrat
   prototype style guide: assets/prototype.css). Spec §7.2.
   Enterprise, flat, ZERO-RADIUS, monochrome + ink.

   Design rules (enforced by tokens — do not override per-page):
     • radius = 0 EVERYWHERE. The only round things are status dots.
     • NO gradients, NO glow, NO neon. Depth = 1px borders + one hairline
       shadow used sparingly. Default surfaces are border-only.
     • Monochrome neutral ramp + a single "ink" primary. Hue is reserved
       for DATA / STATUS only (success / warning / danger / info) and for
       charts and data-coded accents (matte --chart-1..8) — never for
       decoration.
     • Light + dark via .dark. Geist / Geist Mono.
   Colours are hsl(var(--token)) only; raw hex lives in the token block.
   ===================================================================== */

:root {
  /* ---- neutral ramp (zinc/cool-gray) ---- */
  --n-0: 0 0% 100%;       /* pure white */
  --n-25: 240 20% 99%;    /* app canvas */
  --n-50: 240 14% 97.5%;  /* subtle fills / zebra */
  --n-100: 240 11% 95%;   /* muted chip / track */
  --n-150: 240 9% 92%;    /* hairline-strong */
  --n-200: 240 8% 88%;    /* border */
  --n-300: 240 7% 80%;    /* border-strong / disabled */
  --n-400: 240 5% 64%;
  --n-500: 240 4% 46%;    /* muted text */
  --n-600: 240 6% 34%;
  --n-700: 222 13% 24%;
  --n-800: 222 18% 17%;
  --n-900: 222 26% 12%;   /* near-black */

  /* ---- semantic surfaces / text ---- */
  --canvas: var(--n-25);
  --panel: var(--n-0);            /* cards, panels, table */
  --panel-2: var(--n-50);         /* inset / header strip */
  --popover: var(--n-0);
  --sidebar-bg: var(--n-0);
  --foreground: var(--n-900);
  --muted-foreground: var(--n-500);
  --subtle-foreground: var(--n-400);
  --border: var(--n-200);
  --border-strong: var(--n-300);
  --input: var(--n-300);
  --track: var(--n-100);

  /* ---- ink (the single primary accent) ---- */
  --ink: 222 47% 16%;             /* #111827-ish */
  --ink-foreground: 0 0% 100%;
  --ink-hover: 222 44% 22%;
  --primary: var(--ink);          /* alias */
  --primary-foreground: var(--ink-foreground);
  --ring: 222 47% 16%;

  /* ---- status (DATA / STATE only) ---- */
  --success: 142 64% 30%;   --success-fg: 142 64% 24%;   --success-soft: 142 50% 95%;
  --warning: 32 90% 36%;    --warning-fg: 30 90% 30%;    --warning-soft: 40 90% 94%;
  --danger:  0 70% 42%;     --danger-fg:  0 70% 38%;     --danger-soft:  0 80% 96%;
  --info:    222 76% 48%;   --info-fg:    222 76% 42%;   --info-soft:    222 90% 96%;

  /* ---- chart palette: matte, low-chroma hues (data only; ordered for adjacent contrast) ---- */
  --chart-1: 214 34% 46%;   /* slate blue */
  --chart-2: 152 24% 42%;   /* sage */
  --chart-3: 14 46% 55%;    /* terracotta */
  --chart-4: 38 52% 50%;    /* ochre */
  --chart-5: 276 18% 52%;   /* dusty plum */
  --chart-6: 186 32% 40%;   /* muted teal */
  --chart-7: 346 30% 58%;   /* dusty rose */
  --chart-8: 72 22% 42%;    /* olive */
  --on-chart: 0 0% 100%;    /* text on a solid chart fill */
  --grid: var(--n-150);     /* chart gridlines */

  /* ---- severity scale (matte): critical → info ---- */
  --sev-critical: 2 52% 42%;
  --sev-high: 16 54% 52%;
  --sev-medium: 38 58% 50%;
  --sev-low: 152 20% 52%;
  --sev-info: 214 22% 60%;

  --radius: 0px;                  /* HARD ZERO — every control is square */
  --on-solid: 0 0% 100%;         /* text on solid status fills */
  --shadow-sm: 0 1px 2px rgb(17 24 39 / .06);
  --shadow-pop: 0 8px 24px -8px rgb(17 24 39 / .18);
  --header-h: 52px;
  --side-w: 248px;
}

.dark {
  --n-0: 222 28% 11%;
  --n-25: 222 30% 8%;
  --n-50: 222 24% 13%;
  --n-100: 222 20% 16%;
  --n-150: 222 16% 20%;
  --n-200: 222 14% 22%;
  --n-300: 222 12% 30%;
  --n-400: 222 9% 46%;
  --n-500: 220 9% 62%;
  --n-600: 220 12% 74%;
  --n-700: 220 16% 84%;
  --n-800: 220 20% 92%;
  --n-900: 210 24% 97%;

  --canvas: var(--n-25);
  --panel: var(--n-0);
  --panel-2: var(--n-50);
  --popover: var(--n-50);
  --sidebar-bg: var(--n-0);
  --foreground: var(--n-900);
  --muted-foreground: var(--n-500);
  --subtle-foreground: var(--n-400);
  --border: var(--n-200);
  --border-strong: var(--n-300);
  --input: var(--n-300);
  --track: var(--n-100);

  --ink: 210 30% 96%;             /* ink inverts to near-white */
  --ink-foreground: 222 47% 11%;
  --ink-hover: 210 20% 86%;
  --primary: var(--ink);
  --primary-foreground: var(--ink-foreground);
  --ring: 210 30% 80%;

  --success: 142 56% 52%;   --success-fg: 142 56% 60%;   --success-soft: 142 40% 16%;
  --warning: 38 92% 56%;    --warning-fg: 38 92% 62%;    --warning-soft: 36 50% 16%;
  --danger:  0 72% 60%;     --danger-fg:  0 72% 66%;     --danger-soft:  0 50% 18%;
  --info:    214 90% 64%;   --info-fg:    214 90% 70%;   --info-soft:    214 60% 18%;

  --chart-1: 214 38% 64%;
  --chart-2: 152 26% 56%;
  --chart-3: 14 50% 64%;
  --chart-4: 38 52% 60%;
  --chart-5: 276 22% 68%;
  --chart-6: 186 30% 54%;
  --chart-7: 346 34% 68%;
  --chart-8: 72 24% 56%;
  --on-chart: 222 30% 10%;
  --grid: var(--n-150);

  --sev-critical: 2 56% 60%;
  --sev-high: 16 56% 62%;
  --sev-medium: 38 56% 60%;
  --sev-low: 152 22% 56%;
  --sev-info: 214 24% 64%;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / .5);
  --shadow-pop: 0 10px 28px -10px rgb(0 0 0 / .7);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: hsl(var(--canvas));
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 13.5px;
  line-height: 1.5;
  letter-spacing: -0.005em;
}
a { color: inherit; text-decoration: none; }
svg { display: block; }
.icon { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.75;
        stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon-sm { width: 14px; height: 14px; }
.icon-lg { width: 18px; height: 18px; }
.icon-xl { width: 24px; height: 24px; }
.mono { font-family: "Geist Mono", ui-monospace, monospace; }
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ============================ App shell ============================ */
.app { display: grid; grid-template-columns: var(--side-w) 1fr; min-height: 100vh; }

.sidebar {
  background: hsl(var(--sidebar-bg));
  border-right: 1px solid hsl(var(--border));
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow: hidden;
}
.brand { display: flex; align-items: center; gap: 10px; height: var(--header-h); flex: none;
  padding: 0 14px; border-bottom: 1px solid hsl(var(--border)); }
.brand .logo { width: 26px; height: 26px; flex: none; background: hsl(var(--ink));
  color: hsl(var(--ink-foreground)); display: grid; place-items: center; }
.brand b { font-size: 13.5px; letter-spacing: -0.02em; font-weight: 650; }
.brand small { display: block; color: hsl(var(--muted-foreground)); font-weight: 500;
  font-size: 11px; letter-spacing: .02em; text-transform: uppercase; }

.org-switch { display: flex; align-items: center; gap: 9px; height: 44px; flex: none;
  margin: 8px; padding: 0 10px; border: 1px solid hsl(var(--border)); background: hsl(var(--panel));
  cursor: pointer; }
.org-switch:hover { border-color: hsl(var(--border-strong)); }
.org-switch .sq { width: 24px; height: 24px; background: hsl(var(--ink)); color: hsl(var(--ink-foreground));
  display: grid; place-items: center; font-weight: 700; font-size: 11px; flex: none; }
.org-switch .grow { flex: 1; min-width: 0; }
.org-switch b { font-size: 12.5px; display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-switch small { font-size: 11px; color: hsl(var(--muted-foreground)); }

.side-search { display: flex; align-items: center; gap: 8px; height: 32px; margin: 0 8px 6px;
  padding: 0 9px; border: 1px solid hsl(var(--border)); background: hsl(var(--panel-2));
  color: hsl(var(--muted-foreground)); font-size: 12.5px; cursor: text; }
.side-search .kbd { margin-left: auto; }

.side-scroll { flex: 1; overflow-y: auto; padding: 2px 8px 12px; }
.nav-group { padding-top: 10px; }
.nav-label { font-size: 10px; text-transform: uppercase; letter-spacing: .09em; font-weight: 700;
  color: hsl(var(--subtle-foreground)); padding: 8px 8px 4px; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 7px 8px;
  color: hsl(var(--muted-foreground)); font-weight: 500; font-size: 13px; cursor: pointer;
  position: relative; border: 1px solid transparent; }
.nav-item .icon { width: 15px; height: 15px; color: hsl(var(--subtle-foreground)); }
.nav-item:hover { background: hsl(var(--panel-2)); color: hsl(var(--foreground)); }
.nav-item.active { background: hsl(var(--panel-2)); color: hsl(var(--foreground)); font-weight: 600; }
.nav-item.active .icon { color: hsl(var(--foreground)); }
.nav-item.active::before { content: ""; position: absolute; left: -8px; top: 0; bottom: 0;
  width: 2px; background: hsl(var(--ink)); }
.nav-item .chev { margin-left: auto; color: hsl(var(--subtle-foreground)); transition: transform .15s; }
.nav-item.open .chev { transform: rotate(90deg); }
.nav-item .tag { margin-left: auto; }
.nav-sub { display: flex; flex-direction: column; border-left: 1px solid hsl(var(--border)); margin-left: 15px; }
.nav-sub .nav-item { padding-left: 14px; font-size: 12.5px; }
.nav-sub .nav-item.active::before { left: -1px; }

.side-foot { flex: none; border-top: 1px solid hsl(var(--border)); padding: 8px; }
.user-card { display: flex; align-items: center; gap: 9px; padding: 7px 8px; cursor: pointer;
  border: 1px solid transparent; }
.user-card:hover { background: hsl(var(--panel-2)); border-color: hsl(var(--border)); }
.user-card .grow { flex: 1; min-width: 0; }
.user-card b { font-size: 12.5px; display: block; font-weight: 600; }
.user-card small { font-size: 11px; color: hsl(var(--muted-foreground)); }

/* ---- main column ---- */
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar { height: var(--header-h); border-bottom: 1px solid hsl(var(--border));
  display: flex; align-items: center; gap: 12px; padding: 0 18px; position: sticky; top: 0; z-index: 30;
  background: hsl(var(--canvas)); }  /* above .sticky-filters (20) so its menus overlay the filter bar */
.crumbs { display: flex; align-items: center; gap: 6px; color: hsl(var(--muted-foreground));
  font-size: 12.5px; font-weight: 500; min-width: 0; overflow: hidden; }
.crumbs a:hover { color: hsl(var(--foreground)); }
.crumbs .sep { color: hsl(var(--subtle-foreground)); }
.crumbs b { color: hsl(var(--foreground)); font-weight: 600; white-space: nowrap; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.topbar-search { display: flex; align-items: center; gap: 8px; height: 32px; width: 240px; padding: 0 10px;
  border: 1px solid hsl(var(--border)); background: hsl(var(--panel)); color: hsl(var(--muted-foreground)); font-size: 12.5px; }
.topbar-search .kbd { margin-left: auto; flex: none; white-space: nowrap; }
.divider-v { width: 1px; height: 22px; background: hsl(var(--border)); }

.content { padding: 20px 24px 64px; max-width: 1320px; width: 100%; margin: 0 auto; }
.content-wide { max-width: 1600px; }
.content-narrow { max-width: 860px; }

/* ============================ Typography ============================ */
.h1 { font-size: 21px; font-weight: 680; letter-spacing: -0.025em; line-height: 1.2; }
.h2 { font-size: 15.5px; font-weight: 650; letter-spacing: -0.015em; }
.h3 { font-size: 13.5px; font-weight: 650; letter-spacing: -0.01em; }
.eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: hsl(var(--muted-foreground)); }
.lead { color: hsl(var(--muted-foreground)); margin-top: 4px; font-size: 13px; }
.muted { color: hsl(var(--muted-foreground)); }
.subtle { color: hsl(var(--subtle-foreground)); }
.small { font-size: 12px; }
.xs { font-size: 11px; }

.page-head { display: flex; align-items: flex-start; gap: 16px; padding-bottom: 16px;
  margin-bottom: 18px; border-bottom: 1px solid hsl(var(--border)); }
.page-head .grow { flex: 1; min-width: 0; }
.page-head .lead { max-width: 70ch; }

/* prev / next pager + back */
.pager { display: inline-flex; border: 1px solid hsl(var(--border)); }
.pager a, .pager span { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px;
  font-size: 12.5px; font-weight: 550; color: hsl(var(--muted-foreground)); cursor: pointer; }
.pager a + a, .pager span + a, .pager a + span { border-left: 1px solid hsl(var(--border)); }
.pager a:hover { background: hsl(var(--panel-2)); color: hsl(var(--foreground)); }
.pager .disabled { opacity: .4; cursor: not-allowed; }

/* ============================ Buttons ============================ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px;
  padding: 0 14px; border-radius: 0; font-weight: 550; font-size: 13px; cursor: pointer;
  border: 1px solid transparent; white-space: nowrap; font-family: inherit; letter-spacing: -0.005em;
  transition: background .12s, border-color .12s, color .12s; }
.btn-primary { background: hsl(var(--ink)); color: hsl(var(--ink-foreground)); }
.btn-primary:hover { background: hsl(var(--ink-hover)); }
.btn-outline { background: hsl(var(--panel)); border-color: hsl(var(--border-strong)); color: hsl(var(--foreground)); }
.btn-outline:hover { background: hsl(var(--panel-2)); }
.btn-ghost { background: transparent; color: hsl(var(--muted-foreground)); }
.btn-ghost:hover { background: hsl(var(--panel-2)); color: hsl(var(--foreground)); }
.btn-danger { background: hsl(var(--panel)); border-color: hsl(var(--border-strong)); color: hsl(var(--danger-fg)); }
.btn-danger:hover { background: hsl(var(--danger-soft)); border-color: hsl(var(--danger) / .5); }
.btn-danger-solid { background: hsl(var(--danger)); color: hsl(var(--on-solid)); }
.btn-sm { height: 28px; padding: 0 10px; font-size: 12.5px; }
.btn-lg { height: 38px; padding: 0 18px; font-size: 13.5px; }
.btn-icon { width: 34px; padding: 0; } .btn-sm.btn-icon { width: 28px; }
.btn-block { width: 100%; }
.btn:disabled, .btn.disabled { opacity: .5; cursor: not-allowed; }

/* ============================ Panels / cards ============================ */
.panel { background: hsl(var(--panel)); border: 1px solid hsl(var(--border)); }
.panel-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  border-bottom: 1px solid hsl(var(--border)); }
.panel-head .grow { flex: 1; min-width: 0; }
.panel-title { font-weight: 640; font-size: 13.5px; letter-spacing: -0.01em; }
.panel-desc { color: hsl(var(--muted-foreground)); font-size: 12px; margin-top: 2px; }
.panel-body { padding: 16px; }
.panel-foot { padding: 12px 16px; border-top: 1px solid hsl(var(--border)); display: flex; gap: 8px; align-items: center; }
.panel-2 { background: hsl(var(--panel-2)); }
a.panel { transition: border-color .12s, background .12s; display: block; }
a.panel:hover { border-color: hsl(var(--border-strong)); background: hsl(var(--panel-2)); }

/* generic card alias (kept for compatibility) */
.card { background: hsl(var(--panel)); border: 1px solid hsl(var(--border)); }
.card-body { padding: 16px; } .card-head { padding: 12px 16px 0; }
.card-title { font-weight: 640; font-size: 14px; letter-spacing: -0.01em; }
.card-desc { color: hsl(var(--muted-foreground)); font-size: 12.5px; margin-top: 3px; line-height: 1.5; }

/* ============================ Layout helpers ============================ */
.grid { display: grid; gap: 14px; }
/* grid children may shrink below their content's width (wide SVGs, long paths) instead of overflowing */
.grid > * { min-width: 0; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.row { display: flex; gap: 10px; align-items: center; }
.row-start { align-items: flex-start; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.stack-sm { display: flex; flex-direction: column; gap: 8px; }
.gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-16 { gap: 16px; } .gap-20 { gap: 20px; } .gap-24 { gap: 24px; }
.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-20{margin-top:20px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}
.split-main { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.split-wide { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
.split-composer { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.sticky-rail { position: sticky; top: calc(var(--header-h) + 16px); }

/* ============================ Badges / pills ============================ */
.badge { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; white-space: nowrap; flex: none;
  border-radius: 0; font-size: 11.5px; font-weight: 600; border: 1px solid transparent; letter-spacing: -0.005em; }
.badge-ink { background: hsl(var(--ink)); color: hsl(var(--ink-foreground)); }
.badge-muted { background: hsl(var(--track)); color: hsl(var(--muted-foreground)); }
.badge-outline { border-color: hsl(var(--border-strong)); color: hsl(var(--muted-foreground)); background: hsl(var(--panel)); }
.badge-success { background: hsl(var(--success-soft)); color: hsl(var(--success-fg)); border-color: hsl(var(--success) / .25); }
.badge-warning { background: hsl(var(--warning-soft)); color: hsl(var(--warning-fg)); border-color: hsl(var(--warning) / .25); }
.badge-danger  { background: hsl(var(--danger-soft));  color: hsl(var(--danger-fg));  border-color: hsl(var(--danger) / .25); }
.badge-info    { background: hsl(var(--info-soft));    color: hsl(var(--info-fg));    border-color: hsl(var(--info) / .25); }
.dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex: none; }
.status-dot { width: 7px; height: 7px; border-radius: 999px; flex: none; }
.sd-success { background: hsl(var(--success)); } .sd-warning { background: hsl(var(--warning)); }
.sd-danger { background: hsl(var(--danger)); } .sd-info { background: hsl(var(--info)); }
.sd-muted { background: hsl(var(--n-400)); }

/* ============================ Metric / KPI tiles ============================ */
.metric { padding: 14px 16px; border: 1px solid hsl(var(--border)); background: hsl(var(--panel)); }
.metric .k { font-size: 11px; color: hsl(var(--muted-foreground)); display: flex; align-items: center; gap: 6px;
  font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.metric .v { font-size: 25px; font-weight: 700; letter-spacing: -0.03em; margin-top: 8px; font-variant-numeric: tabular-nums; line-height: 1; }
.metric .v small { font-size: 14px; font-weight: 600; color: hsl(var(--muted-foreground)); }
.metric .sub { margin-top: 6px; font-size: 11.5px; display: flex; align-items: center; gap: 6px; }
.trend-up { color: hsl(var(--success-fg)); font-weight: 650; }
.trend-down { color: hsl(var(--danger-fg)); font-weight: 650; }
.trend-flat { color: hsl(var(--muted-foreground)); font-weight: 600; }

/* ============================ Tables ============================ */
.table-wrap { border: 1px solid hsl(var(--border)); background: hsl(var(--panel)); overflow: hidden; }
.table-scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.data thead th { text-align: left; font-weight: 600; font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; color: hsl(var(--muted-foreground)); padding: 9px 14px;
  border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--panel-2));
  position: sticky; top: 0; white-space: nowrap; }
table.data thead th.sortable { cursor: pointer; }
table.data thead th .icon { display: inline-block; vertical-align: -2px; width: 12px; height: 12px; opacity: .6; }
table.data tbody td { padding: 9px 14px; border-bottom: 1px solid hsl(var(--border)); vertical-align: middle; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: hsl(var(--panel-2)); }
table.data.zebra tbody tr:nth-child(even) { background: hsl(var(--n-50)); }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }
table.data .col-actions { text-align: right; white-space: nowrap; }
.cell-strong { font-weight: 600; color: hsl(var(--foreground)); }
.check { width: 15px; height: 15px; border: 1px solid hsl(var(--input)); background: hsl(var(--panel)); display: inline-grid; place-items: center; flex: none; }
.check.on { background: hsl(var(--ink)); border-color: hsl(var(--ink)); color: hsl(var(--ink-foreground)); }

.table-toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid hsl(var(--border)); flex-wrap: wrap; }
.pagination { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); font-size: 12px; }
/* Page-numbered pager (audit log). */
.pager { flex-wrap: wrap; row-gap: 8px; }
.pager-sizes { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; }
.pager-sizes a { color: hsl(var(--info-fg)); }
.pager-pages { flex-wrap: wrap; }
.pager .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.pager-gap { padding: 0 2px; }
@media (max-width: 640px) { .pager-sizes { margin-left: 0; } .pager-pages { margin-left: 0; width: 100%; } }
.page-btns { margin-left: auto; display: inline-flex; border: 1px solid hsl(var(--border)); }
.page-btns button { height: 28px; min-width: 28px; padding: 0 8px; border: 0; border-left: 1px solid hsl(var(--border));
  background: hsl(var(--panel)); font-family: inherit; font-size: 12px; cursor: pointer; color: hsl(var(--muted-foreground)); }
.page-btns button:first-child { border-left: 0; }
.page-btns button.on { background: hsl(var(--ink)); color: hsl(var(--ink-foreground)); }
.page-btns button:hover:not(.on) { background: hsl(var(--panel-2)); color: hsl(var(--foreground)); }

/* ============================ Forms ============================ */
.field { display: flex; flex-direction: column; gap: 6px; }
.label { font-size: 12.5px; font-weight: 600; letter-spacing: -0.005em; }
.label .req { color: hsl(var(--danger-fg)); }
.input, .textarea, .select { min-height: 34px; border: 1px solid hsl(var(--input)); border-radius: 0;
  padding: 0 11px; background: hsl(var(--panel)); color: hsl(var(--foreground)); font-size: 13px;
  font-family: inherit; width: 100%; transition: border-color .12s, box-shadow .12s; }
.select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; }
.textarea { padding: 9px 11px; resize: vertical; line-height: 1.55; min-height: 80px; }
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsl(var(--ring) / .18); }
.input::placeholder, .textarea::placeholder { color: hsl(var(--subtle-foreground)); }
.hint { font-size: 11.5px; color: hsl(var(--muted-foreground)); }
.input-group { display: flex; } .input-group .input { border-right: 0; } .input-group .addon { display: inline-flex; align-items: center; padding: 0 11px; border: 1px solid hsl(var(--input)); background: hsl(var(--panel-2)); font-size: 12.5px; color: hsl(var(--muted-foreground)); }

/* switch / radio (square radio = tiny rounded allowed only for radio knob) */
.switch { width: 36px; height: 20px; border: 1px solid hsl(var(--border-strong)); background: hsl(var(--track)); position: relative; cursor: pointer; flex: none; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: hsl(var(--panel)); border: 1px solid hsl(var(--border-strong)); transition: left .14s; }
.switch.on { background: hsl(var(--ink)); border-color: hsl(var(--ink)); }
.switch.on::after { left: 18px; border-color: hsl(var(--ink)); }

/* segmented control / tabs */
.seg { display: inline-flex; border: 1px solid hsl(var(--border-strong)); background: hsl(var(--panel)); }
.seg button { height: 30px; padding: 0 12px; border: 0; border-left: 1px solid hsl(var(--border)); background: transparent;
  font-family: inherit; font-size: 12.5px; font-weight: 550; color: hsl(var(--muted-foreground)); cursor: pointer; }
.seg button:first-child { border-left: 0; }
.seg button.on { background: hsl(var(--ink)); color: hsl(var(--ink-foreground)); }
.tabs { display: flex; gap: 0; border-bottom: 1px solid hsl(var(--border)); }
.tabs a, .tabs button { padding: 9px 14px; font-size: 13px; font-weight: 550; color: hsl(var(--muted-foreground));
  border: 0; background: 0; cursor: pointer; font-family: inherit; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover, .tabs button:hover { color: hsl(var(--foreground)); }
.tabs a.on, .tabs button.on { color: hsl(var(--foreground)); font-weight: 600; border-bottom-color: hsl(var(--ink)); }

/* ============================ Stepper / wizard ============================ */
.stepper { display: flex; align-items: center; gap: 0; }
.step { display: flex; align-items: center; gap: 9px; color: hsl(var(--muted-foreground)); font-size: 12.5px; }
.step .num { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid hsl(var(--border-strong));
  font-size: 12px; font-weight: 650; flex: none; background: hsl(var(--panel)); }
.step.done .num { background: hsl(var(--ink)); color: hsl(var(--ink-foreground)); border-color: hsl(var(--ink)); }
.step.active .num { background: hsl(var(--ink)); color: hsl(var(--ink-foreground)); border-color: hsl(var(--ink)); }
.step.active { color: hsl(var(--foreground)); font-weight: 650; }
.step-line { flex: 1; height: 1px; background: hsl(var(--border-strong)); margin: 0 12px; min-width: 18px; }
/* vertical wizard rail */
.wizrail { display: flex; flex-direction: column; gap: 2px; }
.wizrail .step { padding: 9px 10px; border: 1px solid transparent; }
.wizrail .step.active { background: hsl(var(--panel-2)); border-color: hsl(var(--border)); }

/* ============================ Progress / bullet ============================ */
.progress { height: 6px; background: hsl(var(--track)); overflow: hidden; }
.progress > span { display: block; height: 100%; background: hsl(var(--ink)); }
.progress.success > span { background: hsl(var(--success)); }
.progress.warning > span { background: hsl(var(--warning)); }
.progress.danger > span { background: hsl(var(--danger)); }

/* ============================ Avatars (square) ============================ */
.avatar { width: 28px; height: 28px; background: hsl(var(--panel-2)); border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground)); display: grid; place-items: center; font-weight: 650; font-size: 11px; flex: none; }
.avatar-lg { width: 40px; height: 40px; font-size: 14px; }
.avatar-sm { width: 22px; height: 22px; font-size: 10px; }
.avatar-ink { background: hsl(var(--ink)); color: hsl(var(--ink-foreground)); border-color: hsl(var(--ink)); }

/* ============================ Kanban / timeline ============================ */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: 270px; gap: 14px; overflow-x: auto; padding-bottom: 6px; }
.kcol { background: hsl(var(--panel-2)); border: 1px solid hsl(var(--border)); display: flex; flex-direction: column; }
.kcol-head { padding: 10px 12px; border-bottom: 1px solid hsl(var(--border)); font-weight: 650; font-size: 12.5px; display: flex; align-items: center; gap: 8px; }
.kcol-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.kcard { background: hsl(var(--panel)); border: 1px solid hsl(var(--border)); padding: 10px 12px; }
.timeline { display: flex; flex-direction: column; }
.tl-item { display: flex; gap: 12px; padding-bottom: 16px; position: relative; }
.tl-item::before { content: ""; position: absolute; left: 8px; top: 18px; bottom: 0; width: 1px; background: hsl(var(--border)); }
.tl-item:last-child::before { display: none; }
.tl-dot { width: 17px; height: 17px; border: 1px solid hsl(var(--border-strong)); background: hsl(var(--panel)); flex: none; z-index: 1; display: grid; place-items: center; }
.tl-dot.ink { background: hsl(var(--ink)); border-color: hsl(var(--ink)); }

/* ============================ Empty / loading / error ============================ */
.empty { text-align: center; padding: 48px 24px; border: 1px dashed hsl(var(--border-strong)); background: hsl(var(--panel)); }
.empty .ic { width: 44px; height: 44px; border: 1px solid hsl(var(--border)); background: hsl(var(--panel-2));
  display: grid; place-items: center; margin: 0 auto 14px; color: hsl(var(--muted-foreground)); }
.skel { position: relative; background: hsl(var(--track)); overflow: hidden; }
.skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, hsl(var(--foreground) / .05), transparent); animation: shimmer 1.5s infinite; }
@keyframes shimmer { 100% { transform: translateX(100%); } }
@keyframes spin { 100% { transform: rotate(360deg); } }
.spin { animation: spin .9s linear infinite; }
/* Scan activity (partials/scan_status.html): spinning refresh icon (.spin), topbar pill, banner progress. */
.btn .loader { margin-right: 6px; }
.scan-status:empty { display: none; }
.scan-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid hsl(var(--info) / .25); background: hsl(var(--info-soft)); color: hsl(var(--info-fg)); font-size: 12px; font-weight: 600; white-space: nowrap; text-decoration: none; }
.scan-pill:hover { border-color: hsl(var(--info) / .5); }
.scan-banner { align-items: center; }
.scan-progress { display: block; width: 100%; height: 4px; margin: 6px 0 4px; border: 0; background: hsl(var(--info) / .15); color: hsl(var(--info)); -webkit-appearance: none; appearance: none; }
.scan-progress::-webkit-progress-bar { background: transparent; }
.scan-progress::-webkit-progress-value { background: hsl(var(--info)); transition: width .4s ease; }
.scan-progress::-moz-progress-bar { background: hsl(var(--info)); }
@media (max-width: 640px) { .scan-pill span:last-child { display: none; } .scan-banner { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { .spin.loader { animation-duration: 2.4s; } .scan-progress::-webkit-progress-value { transition: none; } }
.state-banner { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid hsl(var(--border)); background: hsl(var(--panel-2)); }
.state-danger { border-color: hsl(var(--danger) / .35); background: hsl(var(--danger-soft)); color: hsl(var(--danger-fg)); }
.state-warning { border-color: hsl(var(--warning) / .35); background: hsl(var(--warning-soft)); color: hsl(var(--warning-fg)); }
.state-info { border-color: hsl(var(--info) / .35); background: hsl(var(--info-soft)); color: hsl(var(--info-fg)); }
.state-success { border-color: hsl(var(--success) / .35); background: hsl(var(--success-soft)); color: hsl(var(--success-fg)); }

/* ============================ AI assist (flat, bordered — NO gradient) ============================ */
.ai-banner { display: flex; gap: 11px; padding: 13px 15px; align-items: flex-start;
  background: hsl(var(--panel-2)); border: 1px solid hsl(var(--border-strong)); border-left: 3px solid hsl(var(--ink)); }
.ai-banner .spark { color: hsl(var(--ink)); flex: none; margin-top: 1px; }
.kbd { font-family: "Geist Mono", ui-monospace, monospace; font-size: 10.5px; font-weight: 500;
  background: hsl(var(--track)); border: 1px solid hsl(var(--border)); padding: 1px 5px; color: hsl(var(--muted-foreground)); }

/* upload dropzone */
.dropzone { border: 1px dashed hsl(var(--border-strong)); background: hsl(var(--panel-2)); padding: 28px; text-align: center; color: hsl(var(--muted-foreground)); }

/* ============================ Modal / drawer shells ============================ */
.scrim { position: fixed; inset: 0; background: rgb(17 24 39 / .45); z-index: 50; display: grid; place-items: center; padding: 24px; }
.modal { background: hsl(var(--panel)); border: 1px solid hsl(var(--border-strong)); box-shadow: var(--shadow-pop); width: 100%; max-width: 520px; }
.modal-head { display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid hsl(var(--border)); }
.modal-body { padding: 16px; } .modal-foot { padding: 12px 16px; border-top: 1px solid hsl(var(--border)); display: flex; justify-content: flex-end; gap: 8px; }
.drawer { position: fixed; top: 0; right: 0; height: 100vh; width: 420px; max-width: 92vw; background: hsl(var(--panel)); border-left: 1px solid hsl(var(--border-strong)); box-shadow: var(--shadow-pop); z-index: 51; display: flex; flex-direction: column; }

/* swatch */
.swatch { width: 100%; height: 44px; border: 1px solid hsl(var(--border)); }

/* ============================ Mobile nav chrome ============================ */
.nav-toggle { display: none; }
.nav-scrim { display: none; }

/* ============================ Responsive ============================ */
@media (max-width: 1200px) {
  .cols-6 { grid-template-columns: repeat(3, 1fr); }
  .cols-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1100px) {
  .split-main, .split-composer, .split-wide { grid-template-columns: 1fr; }
  .sticky-rail { position: static; }
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 60; top: 0; left: 0; width: 280px; height: 100vh;
    transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow-pop); }
  body.nav-open .sidebar { transform: translateX(0); }
  .nav-scrim { display: block; position: fixed; inset: 0; background: rgb(17 24 39 / .45);
    opacity: 0; pointer-events: none; transition: opacity .18s; z-index: 55; }
  body.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
  .nav-toggle { display: inline-flex; }
  .topbar-search { display: none; }
  .cols-2, .cols-3, .cols-5, .cols-6 { grid-template-columns: 1fr; }
  .content { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 680px) {
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .page-head { flex-direction: column; align-items: stretch; }
  .h1 { font-size: 19px; }
  .metric .v { font-size: 21px; }
  .topbar-actions .hide-sm { display: none; }
  /* stacked tables: turn rows into cards */
  table.stack-mobile thead { display: none; }
  table.stack-mobile, table.stack-mobile tbody, table.stack-mobile tr, table.stack-mobile td { display: block; width: 100%; }
  table.stack-mobile tr { border-bottom: 1px solid hsl(var(--border)); padding: 6px 0; }
  table.stack-mobile td { border: 0; padding: 5px 14px; display: flex; justify-content: space-between; gap: 12px; }
  table.stack-mobile td::before { content: attr(data-label); font-weight: 600; color: hsl(var(--muted-foreground)); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
}
@media (max-width: 420px) {
  .cols-4 { grid-template-columns: 1fr; }
}

/* =====================================================================
   Guard additions (spec §7.2). Everything below uses tokens only.
   ===================================================================== */

/* ---- utilities (the CSP forbids inline style attributes) ---- */
.ml-auto { margin-left: auto; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.w-full { width: 100%; }
.mw-38 { max-width: 38ch; margin-left: auto; margin-right: auto; }
.mw-60 { max-width: 60ch; }
.inline-form { display: inline; }
.nowrap { white-space: nowrap; }
.break { word-break: break-all; }
.mt-2 { margin-top: 2px; }
.mb-4 { margin-bottom: 4px; } .mb-12 { margin-bottom: 12px; } .mb-24 { margin-bottom: 24px; }
.link { text-decoration: underline; text-underline-offset: 2px; color: hsl(var(--foreground)); font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
a.btn.disabled { pointer-events: none; }
.justify-center { justify-content: center; }
.span-2 { grid-column: 1 / -1; }
.gated-empty { padding: 22px 16px; }
/* In-widget pickers (trajectory repo, trace screen): sized to content, not the full panel. */
.select.select-inline { width: auto; min-width: 220px; max-width: min(100%, 360px); min-height: 30px; font-size: 12.5px; }
/* Two compact charts side by side; stacks on narrow panels. */
.chart-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px 24px; }
button.nav-item { width: 100%; background: transparent; font-family: inherit; text-align: left; }
.nav-item.disabled { opacity: .55; }

/* ---- brand logo cube (shared by app, auth and marketing headers) ---- */
.logo-cube { background: hsl(var(--ink)); color: hsl(var(--ink-foreground)); display: grid; place-items: center; flex: none; }
.brand .logo-cube { width: 26px; height: 26px; }

/* ---- topbar: project switcher, bell, menus ---- */
.proj-switch { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px;
  border: 1px solid hsl(var(--border)); background: hsl(var(--panel)); font-family: inherit; font-size: 12.5px;
  font-weight: 600; color: hsl(var(--foreground)); cursor: pointer; max-width: 260px; }
.proj-switch:hover { border-color: hsl(var(--border-strong)); }
.proj-switch .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-static { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.menu-wrap { position: relative; }
.menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 240px; background: hsl(var(--popover));
  border: 1px solid hsl(var(--border-strong)); box-shadow: var(--shadow-pop); z-index: 40; padding: 4px 0; display: none; }
.menu.right { left: auto; right: 0; }
.menu-wrap.open > .menu { display: block; }
.menu-head { padding: 8px 12px; border-bottom: 1px solid hsl(var(--border)); margin-bottom: 4px; }
.menu-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 12px; font-size: 12.5px;
  color: hsl(var(--foreground)); background: transparent; border: 0; font-family: inherit; cursor: pointer; text-align: left; }
.menu-item:hover, .menu-item:focus { background: hsl(var(--panel-2)); outline: none; }
.menu-item .grow { flex: 1; min-width: 0; }
.menu-item small { color: hsl(var(--muted-foreground)); font-size: 11px; }
.menu-item.on { font-weight: 650; }
.menu-sep { height: 1px; background: hsl(var(--border)); margin: 4px 0; }
.menu-search { padding: 4px 8px 6px; }
.menu-search .input { min-height: 28px; font-size: 12.5px; }
.bell { position: relative; }
.bell-count { position: absolute; top: 3px; right: 3px; min-width: 15px; height: 15px; padding: 0 3px;
  background: hsl(var(--danger)); color: hsl(var(--on-solid)); font-size: 9.5px; font-weight: 700;
  display: grid; place-items: center; }

/* ---- toast (bottom-right stack; 3px status border; auto-dismiss in app.js) ---- */
.toast-stack { position: fixed; right: 16px; bottom: 16px; z-index: 70; display: flex; flex-direction: column; gap: 8px; max-width: 380px; }
.toast { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; background: hsl(var(--panel));
  border: 1px solid hsl(var(--border-strong)); border-left: 3px solid hsl(var(--ink)); box-shadow: var(--shadow-pop); font-size: 12.5px; }
.toast-success { border-left-color: hsl(var(--success)); }
.toast-warning { border-left-color: hsl(var(--warning)); }
.toast-danger { border-left-color: hsl(var(--danger)); }
.toast-info { border-left-color: hsl(var(--info)); }

/* ---- tooltip ---- */
.tip { position: relative; }
.tip[data-tip]:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%); background: hsl(var(--ink)); color: hsl(var(--ink-foreground)); font-size: 12px;
  font-weight: 500; padding: 5px 8px; white-space: nowrap; z-index: 45; }

/* ---- provenance badges + freshness pills ---- */
.prov-measured { background: hsl(var(--success-soft)); color: hsl(var(--success-fg)); border-color: hsl(var(--success) / .25); }
.prov-heuristic { background: hsl(var(--warning-soft)); color: hsl(var(--warning-fg)); border-color: hsl(var(--warning) / .25); }
.prov-estimated { background: hsl(var(--track)); color: hsl(var(--muted-foreground)); }
.fresh-ok, .fresh-warn, .fresh-stale { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; }
.fresh-ok::before, .fresh-warn::before, .fresh-stale::before { content: ""; width: 7px; height: 7px; border-radius: 999px; }
.fresh-ok { color: hsl(var(--success-fg)); } .fresh-ok::before { background: hsl(var(--success)); }
.fresh-warn { color: hsl(var(--warning-fg)); } .fresh-warn::before { background: hsl(var(--warning)); }
.fresh-stale { color: hsl(var(--danger-fg)); } .fresh-stale::before { background: hsl(var(--danger)); }

/* ---- show-once secret ---- */
.secret-box { display: flex; align-items: stretch; border: 1px solid hsl(var(--border-strong)); background: hsl(var(--panel-2)); }
.secret-box code { flex: 1; min-width: 0; padding: 9px 11px; font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 12px; word-break: break-all; }
.secret-box .btn { height: auto; border: 0; border-left: 1px solid hsl(var(--border-strong)); }

/* ---- capability-gated panel, filter bar ---- */
.gated { border: 1px dashed hsl(var(--border-strong)); background: hsl(var(--panel-2)); padding: 18px; }
.filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 14px;
  border: 1px solid hsl(var(--border)); background: hsl(var(--panel)); position: sticky; top: var(--header-h); z-index: 10; }
.filter-bar .select, .filter-bar .input { width: auto; min-width: 150px; min-height: 30px; font-size: 12.5px; }
.metric .v.na { color: hsl(var(--subtle-foreground)); }

/* =====================================================================
   Marketing chrome (landing; always light, never receives .dark)
   ===================================================================== */
.mk-header { position: sticky; top: 0; z-index: 30; background: hsl(var(--canvas)); border-bottom: 1px solid hsl(var(--border)); }
.mk-header .inner { max-width: 1200px; margin: 0 auto; height: 60px; display: flex; align-items: center; gap: 18px; padding: 0 24px; }
.mk-brand { display: flex; align-items: center; gap: 10px; }
.mk-brand .logo-cube { width: 28px; height: 28px; }
.mk-brand b { font-size: 14.5px; font-weight: 700; letter-spacing: -0.02em; }
.mk-brand small { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: hsl(var(--muted-foreground)); font-weight: 600; }
.mk-nav { display: flex; align-items: center; gap: 4px; margin-left: 14px; }
.mk-nav a { padding: 7px 11px; font-size: 13px; font-weight: 550; color: hsl(var(--muted-foreground)); }
.mk-nav a:hover { color: hsl(var(--foreground)); }
.mk-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.mk-main { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.hero-band { padding: 64px 0; border-bottom: 1px solid hsl(var(--border)); display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.hero-band .eyebrow { margin-bottom: 14px; }
.hero-h { font-size: 42px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; max-width: 18ch; }
.hero-sub { color: hsl(var(--muted-foreground)); font-size: 16px; margin-top: 18px; max-width: 58ch; line-height: 1.55; }
.section { padding: 56px 0; border-bottom: 1px solid hsl(var(--border)); }
.section-h { font-size: 26px; font-weight: 700; letter-spacing: -0.025em; }
.section-lead { color: hsl(var(--muted-foreground)); font-size: 15px; line-height: 1.6; margin-top: 10px; max-width: 70ch; }
.feat-icon { width: 36px; height: 36px; border: 1px solid hsl(var(--border-strong)); background: hsl(var(--panel-2));
  display: grid; place-items: center; color: hsl(var(--foreground)); margin-bottom: 12px; }
.stats-band { background: hsl(var(--ink)); color: hsl(var(--ink-foreground)); padding: 36px 0; }
.stats-band .metric { background: transparent; border-color: hsl(var(--ink-foreground) / .18); }
.stats-band .metric .k, .stats-band .metric .sub { color: hsl(var(--ink-foreground) / .7); }
.stats-band .metric .v { color: hsl(var(--ink-foreground)); }
.mk-footer { border-top: 1px solid hsl(var(--border)); background: hsl(var(--panel-2)); }
.mk-footer .inner { max-width: 1200px; margin: 0 auto; padding: 40px 24px 28px; }
.foot-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.foot-col h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: hsl(var(--subtle-foreground)); margin-bottom: 12px; }
.foot-col a { display: block; padding: 4px 0; font-size: 13px; color: hsl(var(--muted-foreground)); }
.foot-col a:hover { color: hsl(var(--foreground)); }
.foot-legal { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 32px; padding-top: 20px;
  border-top: 1px solid hsl(var(--border)); font-size: 12px; color: hsl(var(--muted-foreground)); }

/* hero graph: ink nodes + edges with a slow pulse; static under reduced motion */
.hero-graph { width: 100%; height: auto; border: 1px solid hsl(var(--border)); background: hsl(var(--panel)); }
.hero-graph .hg-edge { stroke: hsl(var(--border-strong)); stroke-width: 1.25; fill: none; }
.hero-graph .hg-pulse { stroke: hsl(var(--ink)); stroke-width: 1.75; fill: none; stroke-dasharray: 10 190; animation: hg-flow 6s linear infinite; }
.hero-graph .hg-pulse.d2 { animation-delay: -2s; } .hero-graph .hg-pulse.d3 { animation-delay: -4s; }
.hero-graph .hg-node { fill: hsl(var(--panel)); stroke: hsl(var(--ink)); stroke-width: 1.5; }
.hero-graph .hg-node.ink { fill: hsl(var(--ink)); }
.hero-graph text { font-family: "Geist Mono", ui-monospace, monospace; font-size: 9px; fill: hsl(var(--muted-foreground)); }
@keyframes hg-flow { to { stroke-dashoffset: -200; } }
@media (prefers-reduced-motion: reduce) { .hero-graph .hg-pulse { animation: none; stroke-dasharray: none; opacity: .35; } }

.flow-steps { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid hsl(var(--border)); background: hsl(var(--panel)); }
.flow-step { padding: 18px; border-left: 1px solid hsl(var(--border)); }
.flow-step:first-child { border-left: 0; }
.flow-step .n { width: 24px; height: 24px; display: grid; place-items: center; background: hsl(var(--ink)); color: hsl(var(--ink-foreground)); font-size: 12px; font-weight: 700; margin-bottom: 10px; }
.state-svg { width: 100%; height: auto; border: 1px solid hsl(var(--border)); background: hsl(var(--panel)); }
.state-svg .st { fill: hsl(var(--panel)); stroke: hsl(var(--border-strong)); }
.state-svg .st.ink { fill: hsl(var(--ink)); stroke: hsl(var(--ink)); }
.state-svg .st-t { font-family: "Geist Mono", ui-monospace, monospace; font-size: 10.5px; fill: hsl(var(--foreground)); }
.state-svg .st-t.inv { fill: hsl(var(--ink-foreground)); }
.state-svg .st-e { stroke: hsl(var(--muted-foreground)); stroke-width: 1.25; fill: none; }
.state-svg .st-e.back { stroke-dasharray: 4 3; }
.state-svg .st-l { font-size: 9.5px; fill: hsl(var(--muted-foreground)); }
.state-svg .arrow-head { fill: hsl(var(--muted-foreground)); }
.ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-items: end; }
.ladder .rung { border: 1px solid hsl(var(--border)); background: hsl(var(--panel)); padding: 14px; }
.ladder .rung:nth-child(1) { min-height: 110px; } .ladder .rung:nth-child(2) { min-height: 140px; }
.ladder .rung:nth-child(3) { min-height: 170px; } .ladder .rung:nth-child(4) { min-height: 200px; border-color: hsl(var(--ink)); }
.illustrative { border-left: 3px solid hsl(var(--warning)); }

/* =====================================================================
   Auth pages (always light)
   ===================================================================== */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; background: hsl(var(--canvas)); }
.auth-brand { border-right: 1px solid hsl(var(--border)); background: hsl(var(--panel-2)); padding: 48px; display: flex; flex-direction: column; }
.brand-mark { display: flex; align-items: center; gap: 11px; }
.brand-mark .logo-cube { width: 32px; height: 32px; }
.brand-mark b { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
.brand-mark small { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: hsl(var(--muted-foreground)); font-weight: 600; }
.auth-brand .pitch { margin-top: auto; max-width: 42ch; }
.auth-brand .pitch .h1 { margin-top: 10px; font-size: 26px; line-height: 1.18; }
.auth-card-col { display: grid; place-items: center; padding: 40px 24px; }
.auth-card { width: 100%; max-width: 408px; }
.auth-card .h1 { font-size: 22px; }
.feature-row { display: flex; gap: 11px; align-items: flex-start; padding: 12px 0; }
.feature-row .fic { width: 30px; height: 30px; border: 1px solid hsl(var(--border-strong)); background: hsl(var(--panel));
  display: grid; place-items: center; flex: none; color: hsl(var(--foreground)); }
.divider-or { display: flex; align-items: center; gap: 12px; color: hsl(var(--subtle-foreground)); font-size: 11px;
  text-transform: uppercase; letter-spacing: .08em; font-weight: 600; margin: 16px 0; }
.divider-or::before, .divider-or::after { content: ""; height: 1px; background: hsl(var(--border)); flex: 1; }
.center-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: hsl(var(--canvas)); }
.center-card { width: 100%; max-width: 460px; text-align: center; }
.code-big { font-size: 56px; font-weight: 750; letter-spacing: -0.04em; line-height: 1; }

@media (max-width: 900px) {
  .mk-nav { display: none; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .hero-band { grid-template-columns: 1fr; }
  .hero-h { font-size: 32px; }
  .flow-steps, .ladder { grid-template-columns: 1fr 1fr; }
  .auth-wrap { grid-template-columns: 1fr; } .auth-brand { display: none; }
}
@media (max-width: 560px) { .foot-cols, .flow-steps, .ladder { grid-template-columns: 1fr; } .hero-h { font-size: 27px; } }

/* =====================================================================
   Set Up (M1): repo picker, member autocomplete, notification popover
   ===================================================================== */
table.data .col-check { width: 1%; white-space: nowrap; }
.skel-line { height: 14px; }
details.panel > summary { cursor: pointer; list-style: none; }
details.panel > summary::-webkit-details-marker { display: none; }
details.panel[open] > summary { border-bottom: 1px solid hsl(var(--border)); }
details.panel:not([open]) > summary { border-bottom: 0; }
.stepper .step a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* member autocomplete: a dropdown list under the login input */
.suggest-wrap { position: relative; }
.suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 40; background: hsl(var(--popover));
  border: 1px solid hsl(var(--border-strong)); padding: 4px 0; max-height: 260px; overflow-y: auto; }
.suggest:empty { display: none; }

/* notification bell popover */
.notif-menu { width: 360px; max-width: calc(100vw - 32px); padding: 0; }
.notif-menu .menu-head { margin-bottom: 0; }
.notif-scroll { max-height: 380px; overflow-y: auto; }
.notif { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-bottom: 1px solid hsl(var(--border)); font-size: 12.5px; }
.notif:last-child { border-bottom: 0; }
.notif .status-dot { margin-top: 5px; }
.notif:not(.unread) .status-dot { background: hsl(var(--n-300)); }
.notif.unread { background: hsl(var(--panel-2)); }