/* SpanDock dashboard. Design tokens, type scale, components, and the
   responsive bands follow the handoff spec; values that look odd (half
   pixels, uneven tab padding) are deliberate. */

/* Inter, variable (400 to 900), the file spandock-site uses. */
@font-face { font-family: "Inter"; font-weight: 400 900; font-style: normal; font-display: swap; src: url("/fonts/InterVariable-latin.woff2") format("woff2"); }

/* The SpanDock Design System's tokens (docs/design/control-plane/BRIEF.md
   §1): paper, white cards on hairlines, ink, one action colour (teal-700),
   and green, red and amber only for states, always with an icon and words.
   The older names stay so every rule keeps working; they now point at the
   design system's values. */
:root {
  --ds-paper: #f8fafc; --ds-white: #ffffff; --ds-ink: #0f1729; --ds-slatey: #475569; --ds-hair: #e2e8f0; --ds-placeholder: #94a3b8;
  /* Settings-style form rows (.field under a panel or .form-grid): the
     control column, and each kind of control's width there. */
  --field-control-column: calc(40ch + 24px); --field-number-width: calc(10ch + 28px); --field-select-width: calc(28ch + 40px); --field-text-width: calc(40ch + 24px);
  --teal-50: #f0fdfa; --teal-100: #ccfbf1; --teal-200: #99f6e4; --teal-300: #5eead4; --teal-600: #0d9488; --teal-700: #0f766e; --teal-800: #115e59; --teal-900: #134e4a;

  --color-neutral-0: #FFFFFF;
  --color-neutral-50: #F8FAFC;
  --color-neutral-100: #F1F5F9;
  --color-neutral-200: #E2E8F0;
  --color-neutral-350: #CBD5E1;
  --color-neutral-400: #64748B;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-850: #1E293B;
  --color-neutral-900: #0F1729;
  --color-neutral-1000: #0A0B0D;
  --color-ink-900: #0F1729;
  --color-ink-800: #1E293B;
  --red-50: #FEF2F2; --red-700: #B91C1C; --red-line: #FCA5A5;
  --amber-50: #FFFBEB; --amber-700: #B45309; --amber-line: #FCD34D;
  --lime-50: #ECF5DA; --lime-700: #457F19;
  --green-50: #F0FDF4; --green-700: #15803D; --green-400: #16A34A; --green-line: #86EFAC;

  --bg-page: var(--ds-paper);
  --bg-canvas: var(--color-neutral-0);
  --bg-sidebar: var(--color-neutral-0);
  --bg-field: var(--color-neutral-0);
  --bg-field-on-canvas: var(--color-neutral-50);
  --bg-hover: var(--teal-50);
  --bg-raised: var(--color-neutral-0);
  --bg-primary: #0f766e;
  --bg-primary-hover: #115e59;
  --bg-logo: var(--color-neutral-1000);
  --text-primary: var(--color-neutral-900);
  --text-secondary: var(--color-neutral-600);
  --text-tertiary: var(--color-neutral-400);
  --text-on-primary: #ffffff;
  --text-link: var(--teal-700);
  --border-default: var(--color-neutral-200);
  --border-strong: var(--color-neutral-350);
  --icon-default: var(--color-neutral-600);
  --icon-muted: var(--color-neutral-400);
  --icon-strong: var(--color-neutral-900);

  --radius-checkbox: 5px;
  --radius-chip: 9999px;
  --radius-pill: 9999px;
  --radius-control: 12px;
  --radius-surface: 16px;

  --shadow-raised: 0 1px 2px rgba(15,23,41,.04), 0 6px 16px -10px rgba(15,23,41,.12);
  --shadow-floating: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  --shadow-glow: 0 8px 24px -8px rgba(15,118,110,.55);
  --shadow-focus: 0 0 0 4px rgba(15,118,110,.12);

  /* Fills that keep white text on both themes, the inverted chip (toasts,
     tooltips), tracks, overlays, the terminal look, and brand marks'
     inks (logos.js). */
  --bg-danger: #b91c1c;
  --bg-inverse: #0f1729; --text-inverse: #ffffff; --text-on-status: #ffffff;
  --overlay: rgba(13,15,20,.28); --chart-track: #f1f5f9;
  --meter-track: #cde2fb; --meter-warn-track: #fdf3dc; --meter-bad-track: #fde8e7;
  --term-bg: #0f1729; --term-line: transparent; --logo-pale-ink: #1b1e28;
  --switch-on: #0f766e; --switch-knob: #ffffff; --badge-fill: #ffffff;
  --wordmark-backing: transparent; --wordmark-pad: 0;
  color-scheme: light dark;
}

/* ---- Dark mode ------------------------------------------------------------
   SpanDock follows the computer's appearance: the dark values below apply
   under prefers-color-scheme: dark (on screen; printing stays light). data-theme on <html> forces one theme
   (screenshots, tests). Both copies must stay identical, and every colour
   token of the light :root blocks has a value here (web_theme_test.go). */
:root[data-theme="light"] { color-scheme: light; }
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ds-paper: #0b111c; --ds-white: #131b29; --ds-ink: #e8edf4; --ds-slatey: #a9b4c4; --ds-hair: #263246; --ds-placeholder: #7d899c;
    --teal-50: rgba(45,212,191,.10); --teal-100: rgba(45,212,191,.16); --teal-200: #1f6f66; --teal-300: #2a8a80; --teal-600: #0d9488; --teal-700: #2dd4bf; --teal-800: #5eead4; --teal-900: #134e4a;
    --color-neutral-0: #131b29; --color-neutral-50: #1c2636; --color-neutral-100: #1c2636; --color-neutral-200: #263246; --color-neutral-350: #3a475c;
    --color-neutral-400: #98a3b5; --color-neutral-600: #a9b4c4; --color-neutral-700: #c4cfdf; --color-neutral-850: #dbe3ef; --color-neutral-900: #e8edf4; --color-neutral-1000: #05080e;
    --color-ink-900: #e8edf4; --color-ink-800: #dbe3ef;
    --red-50: rgba(248,113,113,.12); --red-700: #f87171; --red-line: #6b2a2a;
    --amber-50: rgba(251,191,36,.10); --amber-700: #fbbf24; --amber-line: #6b5310;
    --lime-50: rgba(163,230,53,.12); --lime-700: #a3e635;
    --green-50: rgba(74,222,128,.10); --green-700: #4ade80; --green-400: #4ade80; --green-line: #1e5a35;
    --bg-hover: #1c2636; --bg-primary: #0f766e; --bg-primary-hover: #115e59; --text-on-primary: #ffffff; --bg-danger: #b91c1c;
    --bg-inverse: #e8edf4; --text-inverse: #0b111c; --text-on-status: #0b111c; --overlay: rgba(2,6,14,.6); --chart-track: #263246;
    --meter-track: #263246; --meter-warn-track: rgba(251,191,36,.14); --meter-bad-track: rgba(248,113,113,.14);
    --term-bg: #05080e; --term-line: #263246; --logo-pale-ink: initial; --logo-deep-ink: #e8edf4;
    --switch-on: #0d9488; --switch-knob: #131b29; --badge-fill: #1c2636;
    --wordmark-backing: #e8edf4; --wordmark-pad: 6px 10px;
    --shadow-raised: 0 1px 2px rgba(0,0,0,.3), 0 6px 16px -10px rgba(0,0,0,.5);
    --shadow-floating: 0 10px 15px -3px rgba(0,0,0,.5), 0 4px 6px -4px rgba(0,0,0,.4);
    --shadow-glow: 0 8px 24px -8px rgba(45,212,191,.35);
    --shadow-focus: 0 0 0 4px rgba(45,212,191,.18);
    --series-1: #2dd4bf; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100;
    --series-5: #e87ba4; --series-6: #3fb950; --series-7: #8b7cf0; --series-8: #e34948;
    --status-good: #4ade80; --status-warning: #fbbf24; --status-critical: #f87171;
    --grid-line: #263246; --axis-ink: #98a3b5;
    --tone-good: #4ade80; --tone-warn: #fbbf24; --tone-bad: #f87171;
    --nav-tone-monitor: #6ea8fe; --nav-tone-insights: #b79cff; --nav-tone-ai-tools: #3fc8b8; --nav-tone-mcp: #a5a8ff;
    --nav-tone-safety: #f47aa8; --nav-tone-people: #4cc4dd; --nav-tone-infrastructure: #9db0d4; --nav-tone-system: #a3a9b5;
    --tag-slate-bg: #2b313b; --tag-slate-fg: #c9d1de;
    --tag-blue-bg: #1c2d4a; --tag-blue-fg: #9cc0fb;
    --tag-indigo-bg: #262650; --tag-indigo-fg: #b4b3fb;
    --tag-violet-bg: #2f2349; --tag-violet-fg: #cdb2fb;
    --tag-pink-bg: #43202f; --tag-pink-fg: #f7a8cb;
    --tag-teal-bg: #163632; --tag-teal-fg: #8fdccf;
    --tag-cyan-bg: #14343e; --tag-cyan-fg: #8ad3e8;
    --tag-sand-bg: #3a3221; --tag-sand-fg: #e5cf98;
    --tag-brown-bg: #3a2a20; --tag-brown-fg: #e2bea4;
    --tag-olive-bg: #31341c; --tag-olive-fg: #ccd38c;
    --kit-teal-bg: rgba(20,184,166,.15); --kit-teal-fg: #5eead4; --kit-indigo-bg: rgba(99,102,241,.16); --kit-indigo-fg: #a5b4fc;
    --kit-violet-bg: rgba(168,85,247,.15); --kit-violet-fg: #d8b4fe; --kit-amber-bg: rgba(245,158,11,.14); --kit-amber-fg: #fcd34d;
    --kit-red-bg: rgba(239,68,68,.15); --kit-red-fg: #fca5a5; --kit-sky-bg: rgba(14,165,233,.15); --kit-sky-fg: #7dd3fc;
    --kit-green-bg: rgba(34,197,94,.14); --kit-green-fg: #86efac; --kit-orange-bg: rgba(249,115,22,.15); --kit-orange-fg: #fdba74;
    --kit-pink-bg: rgba(236,72,153,.15); --kit-pink-fg: #f9a8d4; --kit-slate-bg: rgba(100,116,139,.18); --kit-slate-fg: #cbd5e1;
    --kit-blue-bg: rgba(59,130,246,.15); --kit-blue-fg: #93c5fd;
    --kit-off-bg: #1c2636; --kit-off-fg: #e8edf4; --kit-suggest-bg: rgba(96,165,250,.13); --kit-suggest-fg: #93c5fd;
    --kit-warn-bg: rgba(251,191,36,.10); --kit-warn-fg: #fbbf24;
    --kit-sev-red: #dc2626; --kit-sev-orange: #c2410c; --kit-sev-amber: #b45309; --kit-sev-blue: #2563eb; --kit-sev-slate: #475569;
    --kit-unsaved-bg: rgba(251,191,36,.10); --kit-unsaved-line: #6b5310; --kit-unsaved-fg: #fbbf24; --kit-danger-line: #6b2a2a; --kit-danger-bg: rgba(248,113,113,.08);
    --ys-mb-bg: #020617;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ds-paper: #0b111c; --ds-white: #131b29; --ds-ink: #e8edf4; --ds-slatey: #a9b4c4; --ds-hair: #263246; --ds-placeholder: #7d899c;
  --teal-50: rgba(45,212,191,.10); --teal-100: rgba(45,212,191,.16); --teal-200: #1f6f66; --teal-300: #2a8a80; --teal-600: #0d9488; --teal-700: #2dd4bf; --teal-800: #5eead4; --teal-900: #134e4a;
  --color-neutral-0: #131b29; --color-neutral-50: #1c2636; --color-neutral-100: #1c2636; --color-neutral-200: #263246; --color-neutral-350: #3a475c;
  --color-neutral-400: #98a3b5; --color-neutral-600: #a9b4c4; --color-neutral-700: #c4cfdf; --color-neutral-850: #dbe3ef; --color-neutral-900: #e8edf4; --color-neutral-1000: #05080e;
  --color-ink-900: #e8edf4; --color-ink-800: #dbe3ef;
  --red-50: rgba(248,113,113,.12); --red-700: #f87171; --red-line: #6b2a2a;
  --amber-50: rgba(251,191,36,.10); --amber-700: #fbbf24; --amber-line: #6b5310;
  --lime-50: rgba(163,230,53,.12); --lime-700: #a3e635;
  --green-50: rgba(74,222,128,.10); --green-700: #4ade80; --green-400: #4ade80; --green-line: #1e5a35;
  --bg-hover: #1c2636; --bg-primary: #0f766e; --bg-primary-hover: #115e59; --text-on-primary: #ffffff; --bg-danger: #b91c1c;
  --bg-inverse: #e8edf4; --text-inverse: #0b111c; --text-on-status: #0b111c; --overlay: rgba(2,6,14,.6); --chart-track: #263246;
  --meter-track: #263246; --meter-warn-track: rgba(251,191,36,.14); --meter-bad-track: rgba(248,113,113,.14);
  --term-bg: #05080e; --term-line: #263246; --logo-pale-ink: initial; --logo-deep-ink: #e8edf4;
  --switch-on: #0d9488; --switch-knob: #131b29; --badge-fill: #1c2636;
  --wordmark-backing: #e8edf4; --wordmark-pad: 6px 10px;
  --shadow-raised: 0 1px 2px rgba(0,0,0,.3), 0 6px 16px -10px rgba(0,0,0,.5);
  --shadow-floating: 0 10px 15px -3px rgba(0,0,0,.5), 0 4px 6px -4px rgba(0,0,0,.4);
  --shadow-glow: 0 8px 24px -8px rgba(45,212,191,.35);
  --shadow-focus: 0 0 0 4px rgba(45,212,191,.18);
  --series-1: #2dd4bf; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100;
  --series-5: #e87ba4; --series-6: #3fb950; --series-7: #8b7cf0; --series-8: #e34948;
  --status-good: #4ade80; --status-warning: #fbbf24; --status-critical: #f87171;
  --grid-line: #263246; --axis-ink: #98a3b5;
  --tone-good: #4ade80; --tone-warn: #fbbf24; --tone-bad: #f87171;
  --nav-tone-monitor: #6ea8fe; --nav-tone-insights: #b79cff; --nav-tone-ai-tools: #3fc8b8; --nav-tone-mcp: #a5a8ff;
  --nav-tone-safety: #f47aa8; --nav-tone-people: #4cc4dd; --nav-tone-infrastructure: #9db0d4; --nav-tone-system: #a3a9b5;
  --tag-slate-bg: #2b313b; --tag-slate-fg: #c9d1de;
  --tag-blue-bg: #1c2d4a; --tag-blue-fg: #9cc0fb;
  --tag-indigo-bg: #262650; --tag-indigo-fg: #b4b3fb;
  --tag-violet-bg: #2f2349; --tag-violet-fg: #cdb2fb;
  --tag-pink-bg: #43202f; --tag-pink-fg: #f7a8cb;
  --tag-teal-bg: #163632; --tag-teal-fg: #8fdccf;
  --tag-cyan-bg: #14343e; --tag-cyan-fg: #8ad3e8;
  --tag-sand-bg: #3a3221; --tag-sand-fg: #e5cf98;
  --tag-brown-bg: #3a2a20; --tag-brown-fg: #e2bea4;
  --tag-olive-bg: #31341c; --tag-olive-fg: #ccd38c;
  --kit-teal-bg: rgba(20,184,166,.15); --kit-teal-fg: #5eead4; --kit-indigo-bg: rgba(99,102,241,.16); --kit-indigo-fg: #a5b4fc;
  --kit-violet-bg: rgba(168,85,247,.15); --kit-violet-fg: #d8b4fe; --kit-amber-bg: rgba(245,158,11,.14); --kit-amber-fg: #fcd34d;
  --kit-red-bg: rgba(239,68,68,.15); --kit-red-fg: #fca5a5; --kit-sky-bg: rgba(14,165,233,.15); --kit-sky-fg: #7dd3fc;
  --kit-green-bg: rgba(34,197,94,.14); --kit-green-fg: #86efac; --kit-orange-bg: rgba(249,115,22,.15); --kit-orange-fg: #fdba74;
  --kit-pink-bg: rgba(236,72,153,.15); --kit-pink-fg: #f9a8d4; --kit-slate-bg: rgba(100,116,139,.18); --kit-slate-fg: #cbd5e1;
  --kit-blue-bg: rgba(59,130,246,.15); --kit-blue-fg: #93c5fd;
  --kit-off-bg: #1c2636; --kit-off-fg: #e8edf4; --kit-suggest-bg: rgba(96,165,250,.13); --kit-suggest-fg: #93c5fd;
  --kit-warn-bg: rgba(251,191,36,.10); --kit-warn-fg: #fbbf24;
  --kit-sev-red: #dc2626; --kit-sev-orange: #c2410c; --kit-sev-amber: #b45309; --kit-sev-blue: #2563eb; --kit-sev-slate: #475569;
  --kit-unsaved-bg: rgba(251,191,36,.10); --kit-unsaved-line: #6b5310; --kit-unsaved-fg: #fbbf24; --kit-danger-line: #6b2a2a; --kit-danger-bg: rgba(248,113,113,.08);
  --ys-mb-bg: #020617;
}

* { box-sizing: border-box; }
html { background: var(--bg-page); }
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-secondary);
  font-family: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-size: 14px; line-height: 20px; letter-spacing: -0.1px;
}
*:focus-visible { outline: 2px solid var(--teal-700); outline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
[hidden] { display: none !important; }
svg.icon { width: 16px; height: 16px; flex-shrink: 0; display: block; }

/* Type scale */
.text-kpi-value { font-weight: 800; font-size: 28px; line-height: 36px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.text-heading-page { font-weight: 800; font-size: 26px; line-height: 32px; letter-spacing: -0.03em; }
.text-heading-brand { font-weight: 800; font-size: 15px; line-height: 22px; letter-spacing: -0.01em; }
.text-body-large { font-weight: 400; font-size: 16px; line-height: 22px; letter-spacing: 0; }
.text-body-medium { font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: -0.25px; }
.text-body-regular { font-weight: 400; font-size: 14px; line-height: 20px; letter-spacing: -0.1px; }
.text-body-small { font-weight: 400; font-size: 12.5px; line-height: 18px; letter-spacing: 0; }
.text-label-tab { font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: -0.15px; }
.text-label-score { font-weight: 500; font-size: 13px; line-height: 18px; letter-spacing: 0; }
.text-label-caps { font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: 0.5px; text-transform: uppercase; }
.primary { color: var(--text-primary); }
.secondary { color: var(--text-secondary); }
.tertiary { color: var(--text-tertiary); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; letter-spacing: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Shell */
.shell { display: flex; min-height: 100vh; }
#sidebar {
  width: 280px; min-width: 280px; max-width: 280px; flex-shrink: 0;
  background: var(--bg-sidebar); border-right: 1px solid var(--border-default);
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  padding: 19px 18px 0;
}
main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.min-w-0 { min-width: 0; }

/* Sidebar */
.brand { display: flex; align-items: center; height: 48px; position: relative; }
.logo-mark { width: 48px; height: 48px; border-radius: var(--radius-surface); background: var(--bg-logo); display: grid; place-items: center; flex-shrink: 0; }
.logo-mark svg { width: 22px; height: 22px; }
.brand-text { margin-left: 13px; min-width: 0; }
.brand-chevron { margin-left: auto; color: var(--icon-muted); }
.sidebar-search { margin-top: 37px; position: relative; }
.search-field { display: flex; align-items: center; gap: 8px; height: 38px; border-radius: var(--radius-control); color: var(--icon-muted); }
.search-field input { border: 0; background: transparent; outline: none; flex: 1; min-width: 0; height: 100%; color: var(--text-primary); }
.search-field input::placeholder { color: var(--text-tertiary); }
.search-field.sidebar-variant { width: 244px; background: var(--bg-field); padding: 0 8px 0 12px; }
.search-field.toolbar-variant { width: 283px; background: var(--bg-field-on-canvas); padding: 0 12px 0 9px; }
.kbd-chip { width: 26px; height: 20px; border-radius: var(--radius-chip); background: var(--color-neutral-0); color: var(--text-tertiary); display: grid; place-items: center; flex-shrink: 0; }
.search-rail-button { display: none; }
.nav { margin-top: 21px; display: flex; flex-direction: column; gap: 4px; }
.nav-item {
  height: 38px; padding: 0 12px; gap: 8px; border-radius: var(--radius-control); border: 0;
  display: flex; align-items: center; background: transparent; color: var(--text-secondary); cursor: pointer; text-align: left; width: 100%;
  transition: background-color 120ms ease-out, color 120ms ease-out;
}
.nav-item svg { color: var(--icon-default); }
.nav-item:hover { background: var(--bg-hover); }
.nav-item.active { background: var(--teal-50); color: var(--teal-800); font-weight: 700; }
.nav-item.active svg { color: var(--teal-700); }
.nav-label { flex: 1; min-width: 0; }
.nav-chip { width: 29px; height: 20px; border-radius: var(--radius-chip); background: var(--bg-raised); color: var(--text-secondary); display: grid; place-items: center; }
.user-block { margin-top: auto; height: 70px; display: flex; align-items: flex-start; gap: 12px; padding-left: 4px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--color-neutral-200); color: var(--text-primary); display: grid; place-items: center; position: relative; flex-shrink: 0; font-weight: 600; font-size: 14px; }
.online-dot { position: absolute; right: -2px; bottom: -2px; width: 14px; height: 14px; border-radius: 50%; background: var(--color-neutral-0); display: grid; place-items: center; }
.online-dot i { width: 10px; height: 10px; border-radius: 50%; background: var(--green-400); display: block; }
.online-dot.off i { background: var(--color-neutral-400); }
.online-dot.warn i { background: var(--amber-700); }
.user-text { min-width: 0; }

/* Sections */
.page-header { height: 67px; flex-shrink: 0; display: flex; align-items: center; padding: 0 18px 0 18.6px; border-bottom: 1px solid var(--border-default); min-width: 0; }
.page-header .title-group { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.spacer { flex: 1; min-width: 0; }
.header-icons { display: flex; align-items: center; gap: 22px; margin-right: 16px; }
.icon-button { border: 0; background: transparent; color: var(--icon-default); padding: 0; cursor: pointer; display: grid; place-items: center; position: relative; transition: background-color 120ms ease-out, color 120ms ease-out; }
.icon-button:hover { color: var(--icon-strong); }
.icon-button .badge-dot { position: absolute; top: -3px; right: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--red-700); }
/* Suggestions (header): the dot follows the worst level, with the count. */
.suggestions-button .suggestions-dot { position: absolute; top: -6px; right: -8px; min-width: 9px; height: 9px; padding: 0; border-radius: 999px; background: var(--status-good); color: var(--text-on-status); font-size: 10px; line-height: 14px; font-weight: 600; text-align: center; box-shadow: 0 0 0 2px var(--bg-canvas); }
.suggestions-button.level-recommended .suggestions-dot, .suggestions-button.level-critical .suggestions-dot { min-width: 14px; height: 14px; padding: 0 3px; }
.suggestions-button.level-recommended .suggestions-dot { background: var(--status-warning); color: #3d2a00; }
.suggestions-button.level-critical .suggestions-dot { background: var(--status-critical); }
.suggestions-button.level-critical { color: var(--status-critical); }
.hamburger { display: none; margin-right: 14px; }
.banner { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-bottom: 1px solid var(--border-default); background: var(--bg-field-on-canvas); color: var(--text-primary); }
.banner .spacer { flex: 1; }
.banner.activation-bar { background: var(--amber-50); color: var(--amber-700); font-weight: 500; flex-shrink: 0; }
/* A sales demo server's banner (demo.go): always shown, never dismissed. */
.banner.demo-bar { display: flex; align-items: center; gap: 8px; background: var(--bg-canvas); color: var(--text-primary); font-weight: 500; flex-shrink: 0; border-color: var(--border-default); }
.banner.demo-bar[hidden] { display: none; }

.kpi-scroll { height: 112px; flex-shrink: 0; display: flex; border-bottom: 1px solid var(--border-default); min-width: 0; }
.kpi-card { width: 290px; height: 111px; flex-shrink: 0; position: relative; }
.kpi-card + .kpi-card { border-left: 1px solid var(--border-default); }
.kpi-label { position: absolute; left: 20.8px; top: 19.8px; color: var(--text-secondary); white-space: nowrap; }
.kpi-row { position: absolute; left: 20.8px; top: 53px; display: flex; align-items: center; gap: 12px; }
.kpi-value { color: var(--text-primary); white-space: nowrap; }
.trend-chip { height: 26px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; gap: 8px; padding: 0 8px; white-space: nowrap; }
.trend-chip.up { background: var(--green-50); color: var(--green-700); }
.trend-chip.down { background: var(--red-50); color: var(--red-700); }
.trend-chip.flat { background: var(--bg-field-on-canvas); color: var(--text-secondary); }
.sparkline { position: absolute; right: 18.5px; top: 44px; width: 82px; height: 34px; }
.sparkline .sparkline-stop { stop-color: var(--series-1); }
.sparkline .sparkline-line { stroke: var(--series-1); }

.tabs { height: 55px; flex-shrink: 0; display: flex; align-items: stretch; padding-left: 20px; border-bottom: 1px solid var(--border-default); position: relative; min-width: 0; }
.tab { border: 0; background: transparent; display: flex; align-items: center; cursor: pointer; color: var(--text-secondary); white-space: nowrap; flex-shrink: 0; position: relative; transition: background-color 120ms ease-out, color 120ms ease-out; padding: 0 22px; }
.tab:hover { color: var(--text-primary); }
.tab.active { color: var(--text-primary); }
.tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); }
.tab:nth-child(1) { padding: 0 14px 0 16.6px; }
.tab:nth-child(2) { padding: 0 22.45px 0 24.8px; }
.tab:nth-child(3) { padding: 0 21.5px 0 22.45px; }
.tab:nth-child(4) { padding: 0 25.45px 0 21.5px; }
.tab:nth-child(5) { padding: 0 22.5px 0 25.45px; }
.tab:nth-child(6) { padding: 0 14px 0 22.5px; }
.tab-chip { margin-left: 4.4px; min-width: 37px; height: 26px; padding: 0 7px; border-radius: var(--radius-pill); background: var(--bg-field-on-canvas); color: var(--text-secondary); display: grid; place-items: center; }

.toolbar { height: 93px; flex-shrink: 0; display: flex; align-items: flex-start; padding: 29px 18px 26px; gap: 0; min-width: 0; }
.toolbar-left, .toolbar-right { display: flex; align-items: center; flex-shrink: 0; height: 38px; }
.toolbar-icons { display: flex; gap: 42px; margin-left: 22px; }
.view-toggle { display: flex; gap: 36px; margin-right: 24px; }
.view-toggle .icon-button.active { color: var(--icon-strong); }
.toolbar-buttons { display: flex; gap: 12px; }
.toolbar select.filter { height: 38px; border-radius: var(--radius-control); border: 0; background: var(--bg-field-on-canvas); padding: 0 12px; color: var(--text-secondary); margin-left: 22px; max-width: 200px; }

/* Buttons */
.button { height: 38px; border-radius: 9999px; border: 1px solid transparent; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; cursor: pointer; white-space: nowrap; flex-shrink: 0; font-weight: 700; text-decoration: none; transition: background-color 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out; }
.button span { white-space: nowrap; }
.button.primary { background: var(--bg-primary); border-color: var(--bg-primary); color: var(--text-on-primary); box-shadow: var(--shadow-glow); }
.button.primary:hover { background: var(--bg-primary-hover); border-color: var(--bg-primary-hover); }
.button.secondary { background: var(--color-neutral-0); border-color: var(--border-default); color: var(--text-primary); height: 36px; padding: 0 14px 0 12px; }
.button.secondary:hover { background: var(--bg-hover); border-color: var(--teal-300); }
.button.compact { height: 36px; }
.button.danger { background: var(--color-neutral-0); border-color: var(--red-line); color: var(--red-700); }
.button.danger:hover { background: var(--red-50); }
.button:disabled { opacity: .5; cursor: not-allowed; }
.button svg { color: currentColor; }

/* Badges */
.status-badge { height: 23px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--color-neutral-0); border: 1px solid var(--border-strong); color: var(--text-secondary); display: inline-flex; align-items: center; white-space: nowrap; }
.status-badge { gap: 4px; }
.status-badge-icon { width: 12px; height: 12px; flex-shrink: 0; }
.status-badge.tone-good { background: var(--green-50); border-color: var(--green-line); color: var(--green-700); }
.status-badge.tone-warn { background: var(--amber-50); border-color: var(--amber-line); color: var(--amber-700); }
.status-badge.tone-bad { background: var(--red-50); border-color: var(--red-line); color: var(--red-700); }
.score-badge { height: 26px; padding: 4px 6px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; white-space: nowrap; }
.tier-poor { background: var(--red-50); color: var(--red-700); }
.tier-fair { background: var(--amber-50); color: var(--amber-700); }
.tier-good { background: var(--lime-50); color: var(--lime-700); }
.tier-excellent { background: var(--green-50); color: var(--green-700); }

/* Checkbox */
input[type="checkbox"].checkbox { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border-radius: var(--radius-checkbox); background: var(--bg-field); border: 1px solid var(--border-strong); margin: 0; flex-shrink: 0; cursor: pointer; display: grid; place-items: center; }
input[type="checkbox"].checkbox:checked, input[type="checkbox"].checkbox:indeterminate { background: var(--bg-primary); border-color: var(--bg-primary); }
input[type="checkbox"].checkbox:checked::after { content: ""; width: 10px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }
input[type="checkbox"].checkbox:indeterminate::after { content: ""; width: 10px; height: 2px; background: #fff; border-radius: 1px; }

/* Table */
/* Positioned so it clips the absolutely positioned screen-reader labels. */
.table-scroll-container { min-width: 0; position: relative; overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.data th, table.data td { padding: 0; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border-default); }
table.data thead th { height: 36px; font-size: 12px; font-weight: 600; letter-spacing: 0.025em; text-transform: uppercase; color: var(--text-secondary); background: var(--ds-paper); }
table.data tbody td { height: 56px; }
table.data tbody tr { cursor: pointer; }
table.data tbody tr:hover td { background: var(--bg-hover); }
table.data td.cell-select, table.data th.cell-select { padding-left: 19px; padding-right: 0; }
table.data td.cell-actions, table.data th.cell-actions { padding-right: 18px; padding-left: 0; }
table.data td.cell-score { padding-top: 3px; }
table.data .cell-actions .icon-button { color: var(--icon-muted); }
.cell-stack { display: flex; flex-direction: column; min-width: 0; padding-right: 12px; }
.cell-inline { display: flex; align-items: center; gap: 8px; min-width: 0; padding-right: 12px; }
.empty-state { padding: 48px 18px; text-align: center; color: var(--text-tertiary); }
.signal-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--color-neutral-400); }
.signal-dot.trace { background: var(--color-ink-900); }
.signal-dot.log { background: var(--color-neutral-600); }
.signal-dot.metric { background: var(--color-neutral-350); }

/* Grid view */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; padding: 0 18px 24px; }
.card { border: 1px solid var(--border-default); border-radius: var(--radius-surface); padding: 16px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; background: var(--bg-canvas); box-shadow: var(--shadow-raised); min-width: 0; }
.card:hover { border-color: var(--teal-200); }
.card-row { display: flex; align-items: center; gap: 8px; min-width: 0; }

/* Panels (settings and forms) */
.panels { padding: 24px 18px 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.panel { border: 1px solid var(--border-default); border-radius: var(--radius-surface); padding: 20px; display: flex; flex-direction: column; gap: 16px; min-width: 0; background: var(--bg-canvas); box-shadow: var(--shadow-raised); }
.panel h3 { margin: 0; }
.panel p { margin: 0; }
.license-simulation { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.destination-options { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { color: var(--text-primary); font-weight: 600; }
.field small { color: var(--text-tertiary); }
.input, select.input, textarea.input { height: 38px; border: 1px solid var(--border-default); border-radius: var(--radius-control); background: var(--color-neutral-0); padding: 0 12px; color: var(--text-primary); width: 100%; min-width: 0; }
.input:focus, select.input:focus, textarea.input:focus { outline: none; border-color: var(--teal-600); box-shadow: var(--shadow-focus); }
textarea.input { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; }
.input::placeholder { color: var(--ds-placeholder); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.toggle-row { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.toggle-row .text { min-width: 0; }
/* Settings-style form rows, like the toggle rows: the label and its hint
   on the left, the control on the right at a width that fits its value
   (numbers ~10ch, choices ~28ch, text ~40ch), for a field directly in a
   panel or a .form-grid whose control is one input or select. Other fields
   (text areas, pickers, side-by-side .field-row) keep the stacked layout;
   narrow screens stack too. */
.form-grid { display: flex; flex-direction: column; gap: 16px; }
/* A side drawer is narrow whatever the window's width (the media query
   below looks at the viewport), so its fields always stack: the label, the
   control at full width, then the hint. */
@media (min-width: 641px) {
  :is(.panel, .form-grid):not(.drawer *) > .field:has(> input.input:not([type=checkbox], [type=radio]), > select.input) {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--field-control-column)); grid-template-areas: "label control" "hint control"; column-gap: 24px; row-gap: 2px; align-items: center;
  }
  :is(.panel, .form-grid):not(.drawer *) > .field:has(> input.input, > select.input) > span { grid-area: label; align-self: end; }
  :is(.panel, .form-grid):not(.drawer *) > .field:has(> input.input, > select.input) > small { grid-area: hint; align-self: start; }
  :is(.panel, .form-grid):not(.drawer *) > .field:has(> input.input, > select.input):not(:has(> small)) > span { grid-row: 1 / span 2; align-self: center; }
  :is(.panel, .form-grid):not(.drawer *) > .field > :is(input.input, select.input) { grid-area: control; justify-self: start; width: var(--field-text-width); max-width: 100%; }
  :is(.panel, .form-grid):not(.drawer *) > .field > select.input { width: var(--field-select-width); }
  :is(.panel, .form-grid):not(.drawer *) > .field > input.input[type=number] { width: var(--field-number-width); }
  :is(.panel, .form-grid):not(.drawer *) > .field > input.input:is([type=url], [type=password]) { width: 100%; }
}
/* Settings → General → Menu bar stats. */
.menubar-stats { display: flex; flex-direction: column; gap: 10px; }
.server-name { display: flex; flex-direction: column; gap: 10px; }
.menubar-stats-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 767px) { .menubar-stats-fields { grid-template-columns: 1fr; } }
.switch { appearance: none; -webkit-appearance: none; width: 36px; height: 20px; border-radius: 10px; background: var(--color-neutral-350); position: relative; cursor: pointer; flex-shrink: 0; margin: 0; transition: background-color 120ms ease-out; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--switch-knob); box-shadow: var(--shadow-raised); transition: left 120ms ease-out; }
.switch:checked { background: var(--switch-on); }
.switch:checked::after { left: 18px; }
.switch:disabled { opacity: .5; cursor: not-allowed; }
.managed-label { color: var(--text-tertiary); font-size: 12.5px; }
.code-block { background: var(--bg-field-on-canvas); border-radius: var(--radius-control); padding: 12px; overflow-x: auto; white-space: pre; color: var(--text-primary); }
.stat-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.stat-list div { display: flex; flex-direction: column; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }
/* Connect your accounts (views/connections.js) */
.connections-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.connection-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--border-default); border-radius: 10px; }
.connection-row .actions { margin: 0; justify-content: flex-end; }
.connection-row.highlight { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 640px) { .connection-row { grid-template-columns: 1fr; } .connection-row .actions { justify-content: flex-start; } }

/* Drawer and modal */
.overlay { position: fixed; inset: 0; background: var(--overlay); z-index: 40; }
/* Side drawers (ui.js drawer; SETTINGS_KIT.md "Side drawers"): a white
   header and footer around a soft body of white group cards. Every colour
   is a token, so dark mode follows the Dark mode block at the top. */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 100vw); background: var(--bg-page); box-shadow: var(--shadow-floating); z-index: 45; display: flex; flex-direction: column; border-left: 1px solid var(--border-default); }
.drawer.wide { width: min(640px, 100vw); }
.drawer-header { min-height: 72px; display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--bg-canvas); border-bottom: 1px solid var(--border-default); flex-shrink: 0; }
.drawer-heading { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.drawer-title { margin: 0; font-size: 17px; line-height: 24px; font-weight: 700; letter-spacing: -0.01em; color: var(--text-primary); }
.drawer-sub { margin: 1px 0 0; font-size: 12.5px; line-height: 17px; color: var(--text-secondary); }
.drawer-tile { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex: none; color: #fff; background: linear-gradient(135deg, var(--kt-a), var(--kt-b)); }
.drawer-tile svg.icon { width: 20px; height: 20px; }
.drawer-close { width: 34px; height: 34px; border-radius: 9999px; border: 1px solid var(--border-default); background: var(--bg-canvas); flex: none; }
.drawer-close:hover { background: var(--bg-hover); }
.drawer-close svg.icon { width: 16px; height: 16px; }
.drawer-body { flex: 1 1 auto; min-height: 0; padding: 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.drawer-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 14px 18px; background: var(--bg-canvas); border-top: 1px solid var(--border-default); flex-shrink: 0; }
.drawer-footer-note { flex: 1 1 auto; min-width: 0; font-size: 12.5px; line-height: 17px; color: var(--text-secondary); }
.drawer-footer-note:empty { flex-basis: 0; }
.drawer-footer > :not(.drawer-footer-note) { margin-left: auto; }
.drawer-footer .actions { gap: 8px; justify-content: flex-end; }
.drawer-savebar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; width: 100%; }
.drawer-savebar-note { flex: 1 1 auto; min-width: 0; }
.drawer-footer > .drawer-savebar { margin-left: 0; }
/* Group cards, their heads, and the fields in them. */
.drawer-group, .drawer-body > .panel { background: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 12px; min-width: 0; box-shadow: none; }
/* section() blocks and plain wrappers in a drawer: cards, 14px apart. */
.drawer .ui-section:not(.drawer-group .ui-section, .ui-section .ui-section, .panel .ui-section) { background: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.drawer .ui-section > h3 { margin: 0; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--text-primary); }
.drawer-body > div:not([class]) { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.drawer-tabs { background: var(--bg-canvas); position: sticky; top: -18px; z-index: 2; }
.drawer-group-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.drawer-group-text { min-width: 0; flex: 1 1 auto; }
.drawer-group-title { margin: 0; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--text-primary); }
.drawer-group-sub { margin: 1px 0 0; font-size: 12.5px; line-height: 17px; color: var(--text-secondary); }
.drawer .field > span { font-size: 13px; }
.drawer .field small { font-size: 12px; line-height: 16px; color: var(--text-secondary); }
.drawer .field-row { gap: 10px; }
.drawer-link { color: var(--text-link); font-weight: 600; font-size: 12.5px; text-decoration: none; align-self: flex-start; }
.drawer-link:hover { text-decoration: underline; }
/* Good to know: the drawer's explanations, one short line each. */
.drawer-know { display: flex; flex-direction: column; gap: 9px; padding: 14px; border-radius: 14px; background: var(--color-neutral-100); }
.drawer-know-title { margin: 0; font-size: 12px; font-weight: 700; color: var(--text-primary); text-transform: uppercase; letter-spacing: .04em; }
.drawer-know-item { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 18px; color: var(--text-secondary); }
.drawer-know-item > svg.icon { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--icon-default); }
.drawer-know-item a { color: var(--text-link); font-weight: 600; }
/* Detail drawers: the status line, small KPI tiles, the actions. */
.drawer-status { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; }
.drawer-status-main { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-width: 0; }
.drawer-status-meta { font-size: 12.5px; color: var(--text-secondary); }
.drawer-status select.input { width: auto; height: 32px; }
.drawer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.drawer-body .kit-kpis { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; }
.drawer-body .kit-kpi { padding: 10px 12px; border-radius: 12px; box-shadow: none; gap: 10px; }
.drawer-body .kit-kpi > .kit-tile { display: none; }
.drawer-body .kit-kpi-value { font-size: 19px; line-height: 24px; }
.drawer-body .kit-kpi-label { font-size: 11.5px; line-height: 15px; }
/* Choice cards in a drawer: a check on the chosen one; one column on a phone. */
.drawer .kit-choice-card { position: relative; }
.drawer .kit-choice-card.on { padding-right: 32px; }
.drawer .kit-choice-card.on::after { content: "✓"; position: absolute; top: 8px; right: 10px; width: 18px; height: 18px; border-radius: 9999px; background: var(--bg-primary); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.drawer .kit-choice-card .kit-logo.sm { width: 28px; height: 28px; }
.drawer-preview { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-secondary); background: var(--bg-page); border: 1px dashed var(--border-default); border-radius: 10px; padding: 8px 10px; }
.drawer-preview-av { width: 22px; height: 22px; border-radius: 9999px; background: var(--kit-indigo-bg); color: var(--kit-indigo-fg); font-size: 10.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.drawer-footer > .msg-compose { flex: 1 1 100%; margin-left: 0; }
.drawer-group .pv-group-rows .kit-row { padding: 10px 0; }
.drawer-group .pv-group-rows .kit-row:last-child { padding-bottom: 0; }
.drawer-group > section > h3 { margin: 0; }
.drawer-actions:empty { display: none; }
.drawer-footer > .st-dev-foot { flex: 1 1 auto; margin: 0; padding-top: 0; border-top: 0; }
.drawer-group .st-dev-drawer { min-height: 0; }
.drawer :is(.ui-section, .drawer-group) p { margin: 0; }
/* Logo choice cards (providers, tools): the mark above a short name. */
.drawer-logo-choice .kit-choice-card { flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 10px 6px; }
.drawer-logo-choice .kit-choice-card.on { padding-right: 6px; }
.drawer-logo-choice .kit-choice-text b { font-size: 12px; font-weight: 600; }
.drawer-logo-choice .kit-choice-card .kit-logo.sm { width: 32px; height: 32px; border: 0; background: transparent; }
.drawer-logo-choice .kit-choice-card .kit-logo.sm svg { width: 26px; height: 26px; }
/* A provider's "Set up in …" action, a soft teal box. */
.drawer-setup { padding: 12px; border-radius: 12px; background: var(--teal-50); border: 1px solid var(--teal-200); }
.drawer-setup h4 { margin: 0; display: flex; align-items: center; gap: 6px; }
.drawer-setup p, .drawer-setup ol { margin: 0; }
.drawer-setup-slot:empty { display: none; }
@media (max-width: 520px) {
  .drawer { border-left: 0; }
  .drawer .kit-choice { grid-template-columns: minmax(0, 1fr); }
  .drawer .drawer-logo-choice .kit-choice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .drawer .field-row { grid-template-columns: 1fr; }
}
.kv { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 8px 12px; }
.kv dt { color: var(--text-tertiary); }
.kv dd { margin: 0; color: var(--text-primary); overflow-wrap: anywhere; }
.modal { position: fixed; z-index: 46; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; background: var(--bg-canvas); border-radius: var(--radius-surface); box-shadow: var(--shadow-floating); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
/* Settings → Backup & restore: the import preview (settings-backup.js). */
.modal:has(.settings-import) { width: min(760px, calc(100vw - 32px)); }
.settings-import { display: flex; flex-direction: column; }
.settings-import-part { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--border-default); }
.settings-import-part td { overflow-wrap: anywhere; }

.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 60; background: var(--bg-inverse); color: var(--text-inverse); border-radius: var(--radius-control); padding: 10px 16px; box-shadow: var(--shadow-floating); opacity: 0; pointer-events: none; transition: opacity 120ms ease-out; max-width: calc(100vw - 32px); }
.toast.show { opacity: 1; }
.toast.error { background: var(--bg-danger); color: #fff; }

.bars { display: flex; align-items: flex-end; gap: 3px; height: 120px; }
.bars i { flex: 1; background: var(--color-ink-900); border-radius: 2px 2px 0 0; min-height: 1px; opacity: .85; }

/* 1024–1279: shell unchanged; regions scroll instead of crushing. */
@media (max-width: 1279px) {
  .table-scroll-container { overflow-x: auto; }
  .table-min-width { min-width: 1160px; }
  .toolbar-icons { gap: 20px; }
  .view-toggle { gap: 20px; }
  .tabs, .kpi-scroll { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .tabs::-webkit-scrollbar, .kpi-scroll::-webkit-scrollbar { display: none; }
  .toolbar { overflow-x: auto; scrollbar-width: none; gap: 16px; }
  .toolbar::-webkit-scrollbar { display: none; }
}

/* 768–1023: the sidebar collapses to a 72px icon rail. */
@media (min-width: 768px) and (max-width: 1023px) {
  #sidebar.sidebar-collapsed { width: 72px !important; min-width: 72px !important; max-width: 72px !important; padding: 19px 16px 0; align-items: center; }
  #sidebar.sidebar-collapsed .brand-text, #sidebar.sidebar-collapsed .brand-chevron, #sidebar.sidebar-collapsed .nav-label,
  #sidebar.sidebar-collapsed .nav-chip, #sidebar.sidebar-collapsed .user-text, #sidebar.sidebar-collapsed .kbd-chip,
  #sidebar.sidebar-collapsed .search-field { display: none; }
  #sidebar.sidebar-collapsed .brand { justify-content: center; width: 40px; }
  #sidebar.sidebar-collapsed .logo-mark { width: 40px; height: 40px; border-radius: 12px; }
  #sidebar.sidebar-collapsed .search-rail-button { display: grid; place-items: center; width: 40px; height: 38px; border-radius: var(--radius-control); background: var(--bg-field); color: var(--icon-muted); border: 0; cursor: pointer; }
  #sidebar.sidebar-collapsed .nav { align-items: center; }
  #sidebar.sidebar-collapsed .nav-item { width: 40px; padding: 0; justify-content: center; }
  #sidebar.sidebar-collapsed .user-block { padding-left: 0; justify-content: center; width: 40px; }
}

/* <768: off-canvas drawer, sticky first columns. */
@media (max-width: 767px) {
  #sidebar { position: fixed; left: -280px; top: 0; bottom: 0; z-index: 50; transition: left 300ms ease-out; height: auto; }
  #sidebar.active { left: 0; }
  .hamburger { display: grid; }
  .header-icons { gap: 16px; margin-right: 10px; }
  .page-header .title-group { flex-shrink: 1; overflow: hidden; }
  .page-header .title-group h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Send test keeps only its icon on a phone (its label stays the name). */
  .page-header .button.send-test { padding: 0 10px; }
  .page-header .button.send-test span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .page-header { padding-left: 18px; }
  .kpi-scroll { overflow-x: auto; scroll-snap-type: x mandatory; }
  .kpi-card { scroll-snap-align: start; }
  .sticky-col-1 { position: sticky; left: 0; z-index: 20; background: var(--bg-canvas); }
  .sticky-col-2 { position: sticky; left: 66px; z-index: 20; background: var(--bg-canvas); }
  tr:hover .sticky-col-1, tr:hover .sticky-col-2 { background-color: var(--color-neutral-50); }
  .search-field.toolbar-variant { width: 200px; }
  .field-row { grid-template-columns: 1fr; }
  .panels { grid-template-columns: 1fr; }
}

/* ---- Colour layer ----------------------------------------------------
   Categorical chart slots are the validated eight from the dataviz
   reference palette, in fixed order (never cycled). Text never wears a
   series colour; identity comes from the mark beside it. */
:root {
  --series-1: #0f766e; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100;
  --series-5: #e87ba4; --series-6: #008300; --series-7: #4a3aa7; --series-8: #e34948;
  --status-good: #0ca30c; --status-warning: #fab219; --status-critical: #d03b3b;
  --grid-line: #e2e8f0; --axis-ink: #64748b;
  --signal-trace: var(--series-1); --signal-log: var(--series-3); --signal-metric: var(--series-7);
  --accent: var(--teal-700); --accent-soft: var(--teal-50); --accent-ink: var(--teal-800);
}
/* The teal action colour is the same for servers and clients; each keeps its role icon. */

.logo-mark img { width: 34px; height: 34px; display: block; }
#sidebar.sidebar-collapsed .logo-mark img { width: 28px; height: 28px; }
.role-pill { display: inline-flex; align-items: center; gap: 6px; }
.role-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.nav-item.active { box-shadow: var(--shadow-raised), inset 3px 0 0 var(--accent); }
.nav-item.active svg { color: var(--accent); }
.nav-chip.attention { background: var(--amber-50); color: var(--amber-700); }

.signal-dot.trace { background: var(--signal-trace); }
.signal-dot.log { background: var(--signal-log); }
.signal-dot.metric { background: var(--signal-metric); }

.kpi-icon { position: absolute; right: 18.5px; top: 18px; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; }
.kpi-icon.c1 { background: var(--teal-50); color: var(--teal-700); }
.kpi-icon.c2 { background: var(--kit-orange-bg); color: var(--kit-orange-fg); }
.kpi-icon.c3 { background: var(--kit-green-bg); color: var(--kit-green-fg); }
.kpi-icon.c4 { background: var(--kit-amber-bg); color: var(--kit-amber-fg); }
.kpi-icon.c7 { background: var(--kit-indigo-bg); color: var(--kit-indigo-fg); }
.kpi-icon.c8 { background: var(--kit-red-bg); color: var(--kit-red-fg); }
.kpi-card.with-icon .sparkline { top: 60px; }

.delivery-badge { height: 23px; padding: 0 8px 0 7px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; background: var(--color-neutral-0); border: 1px solid var(--border-strong); color: var(--text-secondary); }
.delivery-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-neutral-400); }
.delivery-badge.good i { background: var(--status-good); }
.delivery-badge.warn i { background: var(--status-warning); }
.delivery-badge.bad i { background: var(--status-critical); }
.delivery-badge.info i { background: var(--accent); }

/* Live indicator: a green dot that pulses while a client is connected. */
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--status-good); position: relative; flex-shrink: 0; }
.live-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: var(--status-good); opacity: .35; animation: live-pulse 1.6s ease-out infinite; }
@keyframes live-pulse { 0% { transform: scale(.5); opacity: .5; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .live-dot::after { animation: none; opacity: .25; } }
.state-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--color-neutral-350); }
.state-dot.pending { background: var(--status-warning); }
.state-dot.revoked { background: var(--status-critical); }
.state-dot.invited { background: var(--accent); }

/* Tooltips: one floating element positioned next to [data-tip] targets. */
#tooltip { position: fixed; z-index: 80; max-width: 280px; padding: 7px 10px; border-radius: 8px; background: var(--bg-inverse); color: var(--text-inverse); font-size: 12.5px; line-height: 18px; pointer-events: none; box-shadow: var(--shadow-floating); opacity: 0; transition: opacity 80ms ease-out; white-space: pre-line; }
#tooltip.show { opacity: 1; }
#tooltip .tip-row { display: flex; align-items: center; gap: 8px; }
#tooltip .tip-key { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
#tooltip .tip-value { margin-left: auto; font-variant-numeric: tabular-nums; padding-left: 12px; }
[data-tip] { cursor: help; }
button[data-tip], a[data-tip], th[data-tip] { cursor: pointer; }
.help-dot { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--color-neutral-100); color: var(--text-tertiary); font-size: 10px; font-weight: 600; margin-left: 6px; vertical-align: 1px; }

/* Dashboard */
.dash-toolbar { display: block; padding: 4px 18px 0; }
.segmented { display: inline-flex; background: var(--bg-field-on-canvas); border-radius: var(--radius-control); padding: 3px; gap: 2px; }
.segmented button { border: 0; background: transparent; height: 32px; padding: 0 12px; border-radius: 8px; color: var(--text-secondary); cursor: pointer; white-space: nowrap; transition: background-color 120ms ease-out, color 120ms ease-out; }
.segmented button.active { background: var(--color-neutral-0); color: var(--text-primary); box-shadow: var(--shadow-raised); }
.dash-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; padding: 16px 18px 32px; }
.chart-card { grid-column: span 6; border: 1px solid var(--border-default); border-radius: var(--radius-surface); padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 12px; min-width: 0; background: var(--color-neutral-0); }
.chart-card.wide { grid-column: span 12; }
.chart-card.third { grid-column: span 4; }
.chart-card header { display: flex; align-items: flex-start; gap: 12px; }
.chart-card header .spacer { flex: 1; }
.chart-card h3 { margin: 0; }
.chart-subtitle { color: var(--text-tertiary); }
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-svg text { font-family: inherit; font-size: 11.5px; fill: var(--axis-ink); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 12.5px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: block; }
.bar-list { display: flex; flex-direction: column; gap: 10px; }
.bar-row { display: grid; grid-template-columns: minmax(90px, 34%) 1fr auto; align-items: center; gap: 10px; }
.bar-row .label { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 10px; border-radius: 4px; background: var(--color-neutral-100); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 0 4px 4px 0; }
.bar-row .value { color: var(--text-secondary); font-variant-numeric: tabular-nums; min-width: 56px; text-align: right; }
.donut-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.chart-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.chart-table th, .chart-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border-default); font-variant-numeric: tabular-nums; }
.chart-table th { color: var(--text-tertiary); font-weight: 500; }
.hero-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-bottom: 1px solid var(--border-default); }
.hero-strip .kpi-card { width: auto; }
/* Six cards share the row, so the value shrinks. The tiles flow instead of
   being absolutely placed: label, then value and trend chip (the chip wraps
   under the value when the tile is narrow), then the sparkline on its own
   full-width row, so it can never run over the chip at any tile width. */
.hero-strip .kpi-card { height: auto; min-height: 111px; display: flex; flex-direction: column; gap: 6px; padding: 18px 18.5px 14px 20.8px; min-width: 0; }
.hero-strip .kpi-label { position: static; padding-right: 36px; overflow: hidden; text-overflow: ellipsis; }
.hero-strip .kpi-row { position: static; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.hero-strip .kpi-value { font-size: 26px; line-height: 32px; }
.hero-strip .kpi-card .sparkline, .hero-strip .kpi-card.with-icon .sparkline { position: static; display: block; width: 100%; height: 24px; margin-top: auto; flex-shrink: 0; }
.empty-chart { padding: 28px 0; text-align: center; color: var(--text-tertiary); }

/* SQL explorer */
.sql-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; padding: 18px; align-items: start; }
.sql-schema { border: 1px solid var(--border-default); border-radius: var(--radius-surface); padding: 14px; display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 140px); overflow: auto; }
.sql-schema button { all: unset; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; padding: 3px 6px; border-radius: 6px; font-size: 12.5px; }
.sql-schema button:hover { background: var(--bg-sidebar); }
.sql-schema .type { color: var(--text-tertiary); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.sql-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
textarea.sql-editor { min-height: 150px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 20px; tab-size: 2; }
.sql-meta { display: flex; align-items: center; gap: 12px; color: var(--text-tertiary); flex-wrap: wrap; }
.sql-results { border: 1px solid var(--border-default); border-radius: var(--radius-surface); overflow: auto; max-height: 60vh; }
.sql-results table { border-collapse: collapse; font-size: 12.5px; min-width: 100%; }
.sql-results th, .sql-results td { padding: 7px 12px; border-bottom: 1px solid var(--border-default); text-align: left; white-space: nowrap; max-width: 420px; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.sql-results th { position: sticky; top: 0; background: var(--bg-sidebar); color: var(--text-secondary); font-weight: 500; }
.readonly-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: var(--radius-pill); background: var(--green-50); color: var(--green-700); }

/* Client drawer tabs */
.drawer-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-default); margin: -18px -18px 0; padding: 0 18px; }
.drawer-tabs button { border: 0; background: transparent; padding: 12px 10px; color: var(--text-secondary); cursor: pointer; position: relative; }
.drawer-tabs button.active { color: var(--text-primary); }
.drawer-tabs button.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); }
.hw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hw-card { border: 1px solid var(--border-default); border-radius: 12px; padding: 12px; display: flex; gap: 10px; align-items: flex-start; }
.hw-card .kpi-icon { position: static; flex-shrink: 0; }
.meter { height: 8px; border-radius: 4px; background: var(--meter-track); overflow: hidden; margin-top: 6px; }
.meter i { display: block; height: 100%; background: var(--series-1); border-radius: 0 4px 4px 0; }
.meter.warn { background: var(--meter-warn-track); } .meter.warn i { background: var(--status-warning); }
.meter.bad { background: var(--meter-bad-track); } .meter.bad i { background: var(--status-critical); }
.usage-cell { display: flex; flex-direction: column; min-width: 0; }
.usage-meter { margin-top: 4px; height: 6px; background: var(--border-default); }
.usage-meter.tone-good i { background: var(--tone-good); }
.usage-meter.tone-warn i { background: var(--tone-warn); }
.usage-meter.tone-bad i { background: var(--tone-bad); }
.usage-meter.tone-neutral i { background: var(--series-1); }

/* Product tour */
.tour-spot { position: fixed; z-index: 70; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(13,15,20,.55); transition: all 200ms ease-out; pointer-events: none; }
.tour-card { position: fixed; z-index: 71; width: min(340px, calc(100vw - 32px)); background: var(--color-neutral-0); border-radius: var(--radius-surface); box-shadow: var(--shadow-floating); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.tour-card .tour-step { color: var(--accent-ink); font-weight: 500; font-size: 12.5px; }
.tour-card .tour-actions { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.tour-card .tour-actions .spacer { flex: 1; }
.tour-dots { display: flex; gap: 5px; }
.tour-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-neutral-350); }
.tour-dots i.on { background: var(--accent); }

@media (max-width: 1279px) {
  .chart-card, .chart-card.third { grid-column: span 12; }
  /* KPI strips wrap into rows instead of scrolling sideways, so every card
     stays visible; 1px gaps over the border colour draw the dividers. */
  .hero-strip, .kpi-scroll { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; height: auto; overflow: visible; background: var(--border-default); }
  /* As many cards on a row as fit (four on a laptop), two on a phone. */
  .kpi-scroll { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  .hero-strip .kpi-card, .kpi-scroll .kpi-card { width: auto; background: var(--bg-canvas); }
  .hero-strip .kpi-card + .kpi-card, .kpi-scroll .kpi-card + .kpi-card { border-left: 0; }
}
@media (max-width: 767px) {
  .hero-strip, .kpi-scroll { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .sql-layout { grid-template-columns: 1fr; }
  .sql-schema { max-height: 220px; }
  .hw-grid { grid-template-columns: 1fr; }
}
.chart-svg text.donut-value { font-size: 21px; font-weight: 600; fill: var(--text-primary); }
.legend.legend-column { flex-direction: column; gap: 8px; }
.dash-toolbar select.input, .sql-main .actions select.input { width: auto; min-width: 220px; }
.chart-svg.donut { width: 150px; height: 150px; flex-shrink: 0; }

/* Live activity: new rows flash in their signal's colour with a stripe in
   the client's colour (the motions are in the Live activity block below). */
.client-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
table.data tbody tr td.cell-select { box-shadow: inset 3px 0 0 var(--client-color, transparent); }
@keyframes flash-trace { from { background-color: rgba(42,120,214,.22); } to { background-color: transparent; } }
@keyframes flash-log { from { background-color: rgba(27,175,122,.24); } to { background-color: transparent; } }
@keyframes flash-metric { from { background-color: rgba(74,58,167,.20); } to { background-color: transparent; } }
table.data tbody tr.flash td { animation: 1.4s ease-out var(--flash-delay, 0ms) both; }
table.data tbody tr.flash-trace td { animation-name: flash-trace; }
table.data tbody tr.flash-log td { animation-name: flash-log; }
table.data tbody tr.flash-metric td { animation-name: flash-metric; }
body.motion-off table.data tbody tr.flash td { animation: none !important; }
.live-indicator { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: var(--radius-pill); background: var(--green-50); color: var(--green-700); margin-right: 12px; flex-shrink: 0; }
.live-indicator i { width: 7px; height: 7px; border-radius: 50%; background: var(--status-good); animation: live-blink 1.4s ease-in-out infinite; }
.live-indicator.off { background: var(--bg-field-on-canvas); color: var(--text-tertiary); }
.live-indicator.off i { background: var(--color-neutral-400); animation: none; }
@keyframes live-blink { 50% { opacity: .25; } }
.icon-button[aria-pressed="false"] { color: var(--icon-muted); }
.server-tag { height: 20px; padding: 0 7px; border-radius: var(--radius-chip); background: var(--accent-soft); color: var(--accent-ink); display: inline-flex; align-items: center; flex-shrink: 0; }

/* Assistant chat */
.chat-layout { display: flex; flex-direction: column; height: calc(100vh - 67px); min-height: 420px; }
.chat-thread { flex: 1; overflow-y: auto; padding: 24px 18px; display: flex; flex-direction: column; gap: 18px; }
.chat-message { display: flex; gap: 12px; max-width: 860px; width: 100%; margin: 0 auto; }
.chat-message.user { justify-content: flex-end; }
.chat-bubble { background: var(--bg-primary); color: var(--text-on-primary); padding: 10px 14px; border-radius: 14px 14px 4px 14px; max-width: 80%; white-space: pre-wrap; }
.chat-avatar { width: 32px; height: 32px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; flex-shrink: 0; }
.chat-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
.chat-answer { color: var(--text-primary); }
.chat-answer > * + * { margin-top: 8px; }
.md-paragraph, .md-list { margin: 0; }
.md-list { padding-left: 20px; }
.md-heading { margin: 4px 0 0; color: var(--text-primary); font-size: 15px; }
.md-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; background: var(--bg-field-on-canvas); padding: 1px 5px; border-radius: 5px; }
.chat-answer a { color: var(--accent-ink); }
.chat-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.chat-step { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: var(--radius-pill); background: var(--bg-field-on-canvas); color: var(--text-secondary); font-size: 12.5px; }
.chat-step svg { width: 13px; height: 13px; color: var(--status-good); }
.chat-step.bad svg { color: var(--status-critical); }
.chat-thinking summary { cursor: pointer; }
.chat-thinking p { white-space: pre-wrap; margin: 6px 0 0; }
.chat-usage { margin-top: 2px; }
.chat-error { color: var(--red-700); background: var(--red-50); padding: 8px 12px; border-radius: 10px; }
/* Messages (messages-panel.js on a computer, views/messages.js on the hub). */
.msg-layout { display: grid; grid-template-columns: minmax(240px, 340px) 1fr; gap: 16px; min-height: calc(100vh - 220px); }
.msg-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.msg-list { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.msg-item { display: flex; flex-direction: column; gap: 3px; text-align: left; width: 100%; padding: 10px 12px; border: 1px solid transparent; border-radius: var(--radius-control); background: transparent; color: inherit; cursor: pointer; min-width: 0; }
.msg-item:hover { background: var(--bg-hover); }
.msg-item.active { background: var(--bg-raised); border-color: var(--border-default); }
.msg-item-head, .msg-item-foot { display: flex; align-items: center; gap: 8px; justify-content: space-between; min-width: 0; }
.msg-unread { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--bg-primary); color: var(--text-on-primary); font-size: 12px; display: inline-grid; place-items: center; }
.msg-pane { display: flex; flex-direction: column; gap: 12px; min-width: 0; background: var(--bg-raised); border: 1px solid var(--border-default); border-radius: var(--radius-surface); padding: 16px; }
.msg-pane-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.msg-thread { flex: 1; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; min-height: 200px; max-height: 60vh; padding: 4px 2px; }
.drawer .msg-thread { max-height: none; }
.msg { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: 85%; }
.msg.mine { align-self: flex-end; align-items: flex-end; }
.msg-bubble { background: var(--bg-field-on-canvas); color: var(--text-primary); padding: 10px 14px; border-radius: 14px 14px 14px 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.mine .msg-bubble { background: var(--bg-primary); color: var(--text-on-primary); border-radius: 14px 14px 4px 14px; }
.msg.pending .msg-bubble { opacity: .7; }
.msg-compose { display: flex; flex-direction: column; gap: 8px; }
.msg-input { width: 100%; resize: vertical; min-height: 72px; font: inherit; }
.msg-compose-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.msg-notice { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--bg-field-on-canvas); color: var(--text-secondary); }
.msg-notice.off { color: var(--text-primary); border: 1px solid var(--status-warning); }
.msg-empty { display: flex; flex-direction: column; gap: 4px; padding: 24px 8px; text-align: center; align-items: center; }
@media (max-width: 899px) { .msg-layout { grid-template-columns: 1fr; } .msg-thread { max-height: 50vh; } }
.chat-typing { display: inline-flex; gap: 4px; padding: 8px 0; }
.chat-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-neutral-400); animation: live-blink 1.2s ease-in-out infinite; }
.chat-typing i:nth-child(2) { animation-delay: .2s; } .chat-typing i:nth-child(3) { animation-delay: .4s; }
.chat-empty { margin: auto; max-width: 640px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.chat-suggestions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; width: 100%; }
.chat-suggestion { text-align: left; border: 1px solid var(--border-default); background: var(--color-neutral-0); border-radius: 12px; padding: 12px 14px; cursor: pointer; color: var(--text-primary); transition: background-color 120ms ease-out; }
.chat-suggestion:hover { background: var(--bg-sidebar); }
.chat-composer { border-top: 1px solid var(--border-default); padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.chat-composer > * { max-width: 860px; width: 100%; margin: 0 auto; }
textarea.chat-input { min-height: 52px; max-height: 200px; resize: vertical; }
.chat-composer-actions { display: flex; align-items: center; gap: 12px; }
.chat-composer-actions select.input { width: auto; max-width: 320px; }
.provider-row { border: 1px solid var(--border-default); border-radius: 12px; padding: 10px 12px; }
.provider-row summary { cursor: pointer; list-style: none; }
.provider-row summary::-webkit-details-marker { display: none; }
.provider-fields { border: 0; padding: 12px 0 2px; }
/* A pasted JSON key (Vertex AI): large, masked, never filled back in. */
textarea.secret-key { min-height: 120px; width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; -webkit-text-security: disc; }
@media (max-width: 767px) { .chat-suggestions { grid-template-columns: 1fr; } .chat-layout { height: calc(100vh - 67px); } }

/* Model leaderboard */
.leaderboard { display: flex; flex-direction: column; gap: 16px; padding: 16px 0 32px; min-width: 0; }
.leaderboard-summary { margin: 0; padding: 0 18px; }
.rank-cell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rank-number { width: 22px; flex-shrink: 0; text-align: right; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.rank-change { display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.rank-change .icon { width: 12px; height: 12px; }
.rank-change.up { color: var(--status-good); background: color-mix(in srgb, var(--status-good) 12%, transparent); }
.rank-change.down { color: var(--status-critical); background: color-mix(in srgb, var(--status-critical) 12%, transparent); }
.rank-change.same { color: var(--text-tertiary); }
.rank-change.new { color: var(--series-1); background: color-mix(in srgb, var(--series-1) 12%, transparent); }
.share-bar { display: block; width: 100%; max-width: 120px; height: 4px; border-radius: 2px; background: var(--bg-field-on-canvas); overflow: hidden; margin-top: 4px; }
.share-fill { display: block; height: 100%; width: var(--share, 0%); border-radius: 2px; background: var(--series-1); }

/* About */
.panel-wide { grid-column: 1 / -1; }
.about-head { display: flex; align-items: center; gap: 14px; }
.about-head p { margin: 2px 0 0; }
.about-components { display: flex; flex-direction: column; gap: 10px; }
.about-component { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.about-component .cell-stack { min-width: 0; }
.about-modules-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.about-modules-head .search-field { width: 280px; max-width: 100%; }
.notices { margin-top: 12px; }
.notices summary { cursor: pointer; }
.notices-text { max-height: 420px; overflow: auto; white-space: pre-wrap; font-size: 12px; line-height: 17px; }
.version-chip { flex-shrink: 0; padding: 2px 8px; border: 1px solid var(--border-default); border-radius: 999px; color: var(--text-secondary); white-space: nowrap; }
.panel a, .about-modules-head a, table.data td a { color: var(--text-primary); text-decoration: none; }
.panel a:hover, table.data td a:hover { text-decoration: underline; }

/* Onboarding (first run, before a mode is chosen) */
body.role-onboarding { background: var(--bg-canvas); }
.onboarding { max-width: 920px; margin: 0 auto; padding: 56px 24px 48px; display: flex; flex-direction: column; gap: 28px; }
.onboarding-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.onboarding-head p { max-width: 620px; margin: 0; }
.mode-logo { width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0; }
.mode-logo.large { width: 64px; height: 64px; border-radius: 16px; }
.mode-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mode-card { text-align: left; font: inherit; background: var(--color-neutral-0, #fff); border: 1.5px solid var(--border-default); border-radius: var(--radius-surface); padding: 22px; display: flex; flex-direction: column; gap: 14px; cursor: pointer; transition: border-color 120ms ease-out, box-shadow 120ms ease-out; }
.mode-card:hover { box-shadow: var(--shadow-raised); }
.mode-card:focus-visible { outline: 2px solid var(--series-1); outline-offset: 2px; }
.mode-card.selected.mode-server { border-color: #2a78d6; box-shadow: 0 0 0 3px color-mix(in srgb, #2a78d6 15%, transparent); }
.mode-card.selected.mode-client { border-color: #129a8f; box-shadow: 0 0 0 3px color-mix(in srgb, #129a8f 15%, transparent); }
.mode-card-head { display: flex; align-items: center; gap: 14px; }
.mode-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mode-points li { display: flex; gap: 8px; align-items: flex-start; }
.mode-points .icon { flex-shrink: 0; margin-top: 2px; color: var(--status-good); }
.mode-existing { margin: 0; color: var(--text-secondary); }
.onboarding-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.onboarding-actions .button { min-width: 240px; justify-content: center; }
.link-button { background: none; border: 0; color: var(--text-secondary); text-decoration: underline; cursor: pointer; padding: 4px; }
.link-button[aria-pressed="true"] { color: var(--text-primary); }
.onboarding-note { text-align: center; margin: 0; }
.onboarding-starting { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding-top: 80px; }
@media (max-width: 767px) { .mode-cards { grid-template-columns: 1fr; } .onboarding { padding-top: 32px; } }
.panel-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modal-body { display: flex; flex-direction: column; gap: 12px; }
.modal-body p { margin: 0; }
.reset-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.banner.remote { background: var(--accent-soft); color: var(--accent-ink); }
.token-list { display: flex; flex-direction: column; gap: 10px; }
.token-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--border-default); border-radius: 12px; min-width: 0; }

.page-subtitle { align-self: baseline; min-width: 0; }
@media (max-width: 767px) { .page-subtitle { display: none; } }

/* State colours: good / warn / bad / neutral, with a dot so colour is never alone */
:root { --tone-good: #13804a; --tone-warn: #b35c00; --tone-bad: #c0302b; --tone-neutral: var(--text-secondary); }
.state-text { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; min-width: 0; }
.state-text > i { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: currentColor; }
.state-text.tone-good { color: var(--tone-good); }
.state-text.tone-warn { color: var(--tone-warn); }
.state-text.tone-bad { color: var(--tone-bad); }
.state-text.tone-neutral { color: var(--tone-neutral); font-weight: 400; }
.state-text.tone-neutral > i { opacity: .5; }
.settings-tile-value .state-text > i { width: 8px; height: 8px; }

/* Server view opened from a client (remote management) */
.remote-bar { display: flex; align-items: center; gap: 12px; padding: 10px 18px; background: #1c5cab; color: #fff; flex-shrink: 0; }
.remote-bar[hidden] { display: none; }
.remote-bar-icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,.16); flex-shrink: 0; }
.remote-bar-text { display: flex; flex-direction: column; min-width: 0; }
.remote-bar-text .text-body-small { color: rgba(255,255,255,.82); }
.remote-back { background: #fff; color: #1c5cab; text-decoration: none; flex-shrink: 0; }
.remote-back:hover { background: var(--teal-50); }
.remote-chip { padding: 3px 8px; border-radius: 999px; background: var(--teal-50); color: var(--teal-800); white-space: nowrap; align-self: center; }
@media (max-width: 767px) { .remote-bar-text .text-body-small { display: none; } }

/* Collapsible menu: a manual icon rail on wide screens */
.nav-collapse { margin-top: auto; margin-bottom: 8px; color: var(--text-tertiary); }
@media (max-width: 1023px) { .nav-collapse { display: none !important; } }
@media (min-width: 1024px) {
  body.nav-rail #sidebar.sidebar-collapsed { width: 72px !important; min-width: 72px !important; max-width: 72px !important; padding: 19px 16px 0; align-items: center; }
  body.nav-rail #sidebar.sidebar-collapsed .brand-text, body.nav-rail #sidebar.sidebar-collapsed .brand-chevron, body.nav-rail #sidebar.sidebar-collapsed .nav-label,
  body.nav-rail #sidebar.sidebar-collapsed .nav-chip, body.nav-rail #sidebar.sidebar-collapsed .user-text, body.nav-rail #sidebar.sidebar-collapsed .kbd-chip,
  body.nav-rail #sidebar.sidebar-collapsed .search-field { display: none; }
  body.nav-rail #sidebar.sidebar-collapsed .brand { justify-content: center; width: 40px; }
  body.nav-rail #sidebar.sidebar-collapsed .logo-mark { width: 40px; height: 40px; border-radius: 12px; }
  body.nav-rail #sidebar.sidebar-collapsed .search-rail-button { display: grid; place-items: center; width: 40px; height: 38px; border-radius: var(--radius-control); background: var(--bg-field); color: var(--icon-muted); border: 0; cursor: pointer; }
  body.nav-rail #sidebar.sidebar-collapsed .nav { align-items: center; }
  body.nav-rail #sidebar.sidebar-collapsed .nav-item { width: 40px; padding: 0; justify-content: center; }
  body.nav-rail #sidebar.sidebar-collapsed .user-block { padding-left: 0; justify-content: center; width: 40px; }
}
.nav-collapse ~ .user-block { margin-top: 0; }
.kpi-scroll .kpi-card { width: auto; flex: 1 1 0; min-width: 0; }
.hw-card.hw-wide { grid-column: 1 / -1; }
.hw-card .mono { overflow-wrap: anywhere; }
.place-line { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.place-line .brand-logo { flex-shrink: 0; }
.place-flag { font-size: 14px; line-height: 1; flex-shrink: 0; }
.place-block { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin-top: 2px; }
.ys-hub .place-block { align-items: center; max-width: 100%; }
.ys-hub .place-line { display: block; text-align: center; }
.ys-hub .place-line > * { display: inline; vertical-align: middle; }
.ys-hub .place-line .place-flag { margin-right: 6px; }
.ys-hub .place-line .brand-logo { display: inline-flex; margin-right: 6px; }
.ys-hub .place-line .truncate { white-space: normal; overflow: visible; }

/* Assistant model suggestions */
.model-suggestions { display: flex; flex-direction: column; gap: 8px; }
.model-suggestions:empty { display: none; }
.model-suggestion { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border-default); border-radius: 12px; min-width: 0; }
.model-suggestion .cell-stack { flex: 1; min-width: 0; }
.model-suggestion.current { border-color: var(--accent); background: var(--accent-soft); }
.model-kind { padding: 2px 8px; border-radius: 999px; flex-shrink: 0; }
.model-kind.kind-recommended { background: var(--kit-green-bg); color: var(--kit-green-fg); }
.model-kind.kind-budget { background: var(--kit-amber-bg); color: var(--kit-amber-fg); }
.provider-group { color: var(--text-tertiary); margin: 10px 2px -4px; }
.provider-key-link { color: var(--accent-ink); text-decoration: none; }
.provider-key-link:hover { text-decoration: underline; }

/* Activity: project filter, sessions, and a session's calls */
.toolbar select.project-filter { width: auto; min-width: 180px; max-width: 260px; height: 38px; }
.sessions-note { padding: 8px 18px 0; margin: 0; }
.session-head { display: flex; align-items: center; gap: 14px; padding: 16px 18px 8px; min-width: 0; flex-wrap: wrap; }
.session-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1px; margin: 4px 18px 12px; background: var(--border-default); border: 1px solid var(--border-default); border-radius: var(--radius-surface); overflow: hidden; }
.session-stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; background: var(--bg-canvas); min-width: 0; }
.toggle-row.compact-toggle { gap: 10px; padding: 0; }
/* The toolbar wraps onto a second row when it doesn't fit, and grows to
   hold it, instead of scrolling or overlapping the table below. */
.toolbar { height: auto; min-height: 93px; flex-wrap: wrap; row-gap: 12px; overflow: visible; }
.toolbar > .spacer { flex: 1 1 0; min-width: 12px; }
/* Assistant: chat history beside the conversation, and the cost bar */
.chat-page { display: grid; grid-template-columns: 264px minmax(0, 1fr); height: calc(100vh - 67px); min-height: 420px; }
.chat-page .chat-layout { height: 100%; min-height: 0; }
.chat-history { border-right: 1px solid var(--border-default); display: flex; flex-direction: column; min-height: 0; background: var(--bg-sidebar); }
.chat-history-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 10px; }
.chat-history-list { flex: 1; overflow-y: auto; padding: 0 8px 14px; display: flex; flex-direction: column; gap: 2px; }
.chat-history-item { display: flex; align-items: center; border-radius: 10px; min-width: 0; }
.chat-history-item:hover, .chat-history-item.active { background: var(--bg-canvas); }
.chat-history-item.active { box-shadow: var(--shadow-raised); }
.chat-history-open { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; font: inherit; background: none; border: 0; padding: 9px 10px; cursor: pointer; }
.chat-history-item .icon-button { opacity: 0; margin-right: 4px; }
.chat-history-item:hover .icon-button, .chat-history-item.active .icon-button, .chat-history-item .icon-button:focus-visible { opacity: 1; }
.chat-history-empty { padding: 6px 10px; margin: 0; }
.chat-cost { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 8px 18px; border-top: 1px solid var(--border-default); background: var(--bg-sidebar); }
.chat-cost > * { max-width: 860px; }
.chat-cost-item { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; color: var(--text-secondary); }
.chat-cost-item strong { color: var(--text-primary); font-weight: 600; }
@media (max-width: 899px) {
  .chat-page { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .chat-history { border-right: 0; border-bottom: 1px solid var(--border-default); max-height: 132px; }
  .chat-history-list { flex-direction: row; overflow-x: auto; overflow-y: hidden; padding-bottom: 10px; }
  .chat-history-item { flex: 0 0 220px; border: 1px solid var(--border-default); background: var(--bg-canvas); }
}

.toolbar-left, .toolbar-right { flex-wrap: wrap; height: auto; min-height: 38px; row-gap: 10px; column-gap: 12px; flex-shrink: 1; min-width: 0; }
.toolbar-left .search-field { min-width: 0; }
@media (max-width: 767px) {
  .toolbar-left .search-field, .toolbar select.project-filter { flex: 1 1 100%; max-width: none; }
  .toolbar-icons { margin-left: 0; gap: 24px; }
  .toolbar-buttons { flex-wrap: wrap; }
}
.toolbar-buttons { flex-wrap: wrap; row-gap: 10px; justify-content: flex-end; min-width: 0; }

/* Model routing */
.assign-list { display: flex; flex-direction: column; gap: 8px; }
.assign-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 280px); gap: 12px; align-items: center; }
.rule-list { display: flex; flex-direction: column; gap: 12px; }
.rule-card { border: 1px solid var(--border-default); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.rule-head { display: flex; align-items: center; gap: 10px; }
.rule-head .input { flex: 1; min-width: 0; }
.rule-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.rule-backups { display: grid; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-default); }
.backup-list { display: grid; gap: 8px; }
.backup-row { display: grid; grid-template-columns: auto minmax(140px, 1fr) minmax(180px, 2fr) auto auto; gap: 8px; align-items: center; }
.backup-row input[type="number"] { width: 80px; }
.rule-backups > button { justify-self: start; }
.rule-reliability summary { cursor: pointer; }
.rule-reliability[open] .rule-grid { margin-top: 8px; }
@media (max-width: 720px) { .backup-row { grid-template-columns: auto 1fr; } }
.state-warn-note { color: var(--tone-warn); margin: 0; }
@media (max-width: 767px) { .assign-row { grid-template-columns: 1fr; } }

/* Scaling: hub and satellites */
.remote-bar.satellite-bar { background: #2f3b4c; }
.remote-bar.satellite-bar .state-text { color: #fff; background: rgba(255,255,255,.12); padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.scaling-note { border-left: 3px solid var(--tone-warn); padding: 8px 12px; background: var(--bg-canvas); border-radius: 0 8px 8px 0; margin: 0; }
.scaling-note[data-mode="hub"] { border-left-color: #2a78d6; }
.satellite-join { display: flex; flex-direction: column; gap: 10px; max-width: 640px; margin: 0 auto; width: 100%; }
.satellite-join p { margin: 0; }
.activation-step { display: flex; flex-direction: column; gap: 12px; max-width: 640px; margin: 0 auto; width: 100%; }
.activation-step p { margin: 0; }
.activation-code { letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }
textarea.join-code { font-family: var(--font-mono, ui-monospace, monospace); resize: vertical; min-height: 72px; width: 100%; }
.actions-cell { white-space: nowrap; display: flex; gap: 8px; justify-content: flex-end; }

/* Cluster view */
.cluster-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .cluster-grid { grid-template-columns: 1fr; } }
.cluster-diagram-scroll { overflow-x: auto; }
.cluster-diagram { width: 100%; min-width: 640px; height: auto; display: block; }
.cluster-diagram .edge { fill: none; stroke-width: 2; stroke: var(--border-strong); }
.cluster-diagram .edge.live { stroke: #8fb7ea; }
.cluster-diagram .edge.forward.live { stroke: #2a78d6; stroke-width: 2.5; }
.cluster-diagram .edge.fallback { stroke: var(--amber-700); stroke-dasharray: 6 4; }
.cluster-diagram .edge.down { stroke: var(--color-neutral-350); stroke-dasharray: 3 5; }
.cluster-diagram .edge.idle { stroke: var(--color-neutral-350); }
.cluster-diagram .edge.spare { stroke: var(--amber-700); stroke-dasharray: 2 6; opacity: 0; transition: opacity .15s; }
.cluster-diagram .edge.spare.show { opacity: .9; }
.cluster-diagram .flow-dot { fill: #2a78d6; stroke: var(--bg-canvas); stroke-width: 2; }
.cluster-diagram .server-card rect, .cluster-diagram .store-card rect { fill: var(--bg-raised); stroke: var(--border-strong); stroke-width: 1.5; }
.cluster-diagram .server-card.hub rect { stroke: var(--text-primary); stroke-width: 2; }
.cluster-diagram .server-card.tone-bad rect { stroke: var(--red-700); fill: var(--red-50); }
.cluster-diagram .server-card.tone-warn rect { stroke: var(--amber-700); }
.cluster-diagram .state-dot-svg { fill: var(--green-700); }
.cluster-diagram .tone-bad .state-dot-svg { fill: var(--red-700); }
.cluster-diagram .tone-warn .state-dot-svg { fill: var(--amber-700); }
.cluster-diagram .store-card.off rect { stroke-dasharray: 4 4; }
.cluster-diagram .card-title { font: 600 14px var(--font-sans, Inter, sans-serif); fill: var(--text-primary); }
.cluster-diagram .card-detail { font: 400 12px var(--font-sans, Inter, sans-serif); fill: var(--text-secondary); }
/* A halo in the canvas colour keeps names readable where lines pass under them. */
.cluster-diagram .client-label { font: 400 11px var(--font-sans, Inter, sans-serif); fill: var(--text-secondary); paint-order: stroke; stroke: var(--bg-canvas); stroke-width: 3px; stroke-linejoin: round; }
.cluster-diagram .client-dot { cursor: pointer; outline: none; }
.cluster-diagram .client-dot circle { fill: #2a78d6; stroke: var(--bg-canvas); stroke-width: 2; }
.cluster-diagram .client-dot.machine circle { fill: var(--text-primary); }
.cluster-diagram .client-dot.fallback circle { fill: var(--amber-700); }
.cluster-diagram .client-dot.down circle { fill: var(--color-neutral-350); }
.cluster-diagram .client-dot .pin-ring { fill: none; stroke: var(--text-primary); stroke-width: 1.5; }
.cluster-diagram .client-dot:hover circle:first-child, .cluster-diagram .client-dot:focus-visible circle:first-child { stroke: var(--text-primary); }
.cluster-diagram .client-bubble circle { fill: var(--teal-50); stroke: var(--teal-700); stroke-width: 1.5; }
.cluster-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; padding-top: 12px; border-top: 1px solid var(--border-default); margin-top: 8px; }
.cluster-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch { width: 22px; height: 0; border-top: 2px solid #8fb7ea; display: inline-block; }
.legend-swatch.fallback { border-top: 2px dashed var(--amber-700); }
.legend-swatch.down { border-top: 2px dotted var(--color-neutral-350); }
.legend-swatch.spare { border-top: 2px dotted var(--amber-700); }
.cluster-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; max-height: 560px; overflow-y: auto; }
.cluster-events li { display: flex; gap: 10px; align-items: flex-start; }
.cluster-events .event-icon { width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px; display: grid; place-items: center; background: var(--bg-field); color: var(--icon-default); }
.cluster-events .event-icon svg { width: 15px; height: 15px; }
.cluster-events .event-failover .event-icon, .cluster-events .event-offline .event-icon { background: var(--amber-50); color: var(--amber-700); }
.cluster-events .event-online .event-icon, .cluster-events .event-returned .event-icon { background: var(--green-50); color: var(--green-700); }
.server-pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-chip); background: var(--bg-field); color: var(--text-primary); white-space: nowrap; }
.server-pill.hub { background: var(--bg-inverse); color: var(--text-inverse); }
.server-pill.fallback { box-shadow: inset 0 0 0 1.5px var(--amber-700); }
.server-pill.fallback-tag { background: var(--amber-50); color: var(--amber-700); }
.server-pill.pinned { background: var(--color-neutral-100); color: var(--text-secondary); }
.status-server { gap: 4px; align-items: flex-start; }
.storage-card { border-top: 1px solid var(--border-default); padding-top: 16px; margin-top: 8px; display: flex; flex-direction: column; gap: 12px; }
.storage-card[hidden] { display: none; }
.tailscale-options { display: flex; flex-direction: column; gap: 12px; }
.tailscale-check:empty { display: none; }
.tailscale-check { display: flex; flex-direction: column; gap: 8px; }
.tailscale-check-list { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; overflow-wrap: anywhere; }

/* Third-party logos */
.brand-logo { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; }
.brand-logo svg { display: block; }
.brand-badge rect { fill: var(--badge-fill); stroke: var(--border-strong); stroke-width: 1; }
/* Brand marks that change with the theme (logos.js inkClass). */
.ink-pale { fill: var(--logo-pale-ink, var(--mark)); }
.ink-deep { fill: var(--logo-deep-ink, var(--mark)); }
.brand-badge text { font: 700 9.5px var(--font-sans, Inter, sans-serif); fill: var(--text-secondary); letter-spacing: -.02em; }
.logo-cell { gap: 10px; min-width: 0; }
/* Operating-system logos beside machine names. */
.os-name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; vertical-align: middle; }
.os-name .os-logo { opacity: .9; }
.os-logo.brand-badge text { font-size: 15px; }
.bar-row .label.with-icon { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.drawer-title-os { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.cluster-diagram .os-mark path { fill: #fff; }
.cluster-diagram .os-mark.brand-badge rect { fill: transparent; stroke: none; }
.cluster-diagram .os-mark.brand-badge text { fill: #fff; font-size: 11px; }
.cluster-diagram .server-card .os-mark path { fill: var(--text-secondary); }
.cluster-diagram .server-card .os-mark.brand-badge text { fill: var(--text-secondary); }
.cluster-diagram .client-dot.machine .os-mark path, .cluster-diagram .client-dot.machine .os-mark.brand-badge text { fill: var(--bg-canvas); }

/* Access */
.perm-toggles { display: flex; flex-direction: column; gap: 6px; }
.member-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; padding-top: 8px; max-height: 220px; overflow-y: auto; }
.member-row { gap: 8px; }
.tag-cloud { flex-wrap: wrap; gap: 6px; }
.perm-chips { flex-wrap: wrap; gap: 6px; }
.eula-accept { display: flex; flex-direction: column; gap: 8px; margin: 18px 0 4px; }
.eula-accept p { margin: 0; }
.eula-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.banner a { color: inherit; text-decoration: underline; }

/* Work insights */
.header-actions { display: flex; align-items: center; gap: 10px; }
.capture-bar { display: flex; align-items: center; gap: 12px; padding: 9px 18px; background: var(--amber-50); color: var(--amber-700); border-bottom: 1px solid var(--border-default); flex-shrink: 0; }
.capture-bar[hidden] { display: none; }
.capture-bar .spacer { flex: 1; }
.capture-bar-icon { display: inline-flex; flex-shrink: 0; }
.capture-bar-link { border: 0; background: transparent; color: inherit; text-decoration: underline; cursor: pointer; padding: 0; flex-shrink: 0; }
.insights-body { padding: 0 18px 24px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.insights-notice { flex-direction: row; align-items: flex-start; gap: 12px; margin: 18px 18px 0; padding: 14px 16px; }
.insights-notice.warn { background: var(--amber-50); color: var(--amber-700); border-color: transparent; }
.insights-notice p { margin: 0; }
.insights-empty { max-width: 760px; }
.insights-empty p { margin: 0; }
.insights-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.insights-date { width: auto; height: 38px; }
.insights-toolbar .search-field { width: 240px; }
.insights-toolbar .project-filter { width: 170px; }
.insights-dates { display: flex; align-items: center; gap: 8px; }
.insight-session { color: var(--accent); text-decoration: none; font-size: 13px; }
.insight-session:hover { text-decoration: underline; }
.insights-day { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.insights-day-title { margin: 0; padding: 0 4px; }
.insights-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border-default); border-radius: var(--radius-surface); overflow: hidden; }
.insight-item + .insight-item { border-top: 1px solid var(--border-default); }
.insight-row { width: 100%; border: 0; background: transparent; text-align: left; cursor: pointer; display: grid; grid-template-columns: 52px minmax(90px, 160px) minmax(0, 1fr) auto minmax(0, 140px) 80px 20px; align-items: center; gap: 12px; padding: 11px 14px; color: inherit; font: inherit; }
.insight-row:hover { background: var(--bg-field-on-canvas); }
.insight-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.insight-item.open .insight-row { background: var(--bg-field-on-canvas); }
.insight-chevron { display: inline-flex; color: var(--icon-default); }
.insight-count { text-align: right; white-space: nowrap; }
.insight-details { padding: 4px 14px 16px 78px; display: flex; flex-direction: column; gap: 12px; background: var(--bg-field-on-canvas); }
.insight-summary { margin: 0; max-width: 780px; line-height: 1.5; }
.insight-details .kv a { margin-right: 10px; }
.insights-more { margin: 0; text-align: center; }
.insights-warn { margin: 0 0 12px; }
.category-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--radius-chip); white-space: nowrap; background: var(--bg-field); color: var(--text-secondary); }
.category-chip.cat-feature { background: color-mix(in srgb, var(--series-1) 14%, transparent); color: var(--series-1); }
.category-chip.cat-bugfix { background: color-mix(in srgb, var(--series-2) 14%, transparent); color: var(--series-2); }
.category-chip.cat-refactor { background: color-mix(in srgb, var(--series-7) 14%, transparent); color: var(--series-7); }
.category-chip.cat-investigation { background: color-mix(in srgb, var(--series-4) 16%, transparent); color: var(--amber-700); }
.category-chip.cat-docs { background: color-mix(in srgb, var(--series-3) 14%, transparent); color: var(--green-700); }
.category-chip.cat-ops { background: color-mix(in srgb, var(--series-5) 14%, transparent); color: var(--series-5); }
@media (max-width: 760px) {
  .insight-row { grid-template-columns: 44px minmax(0, 1fr) auto 20px; row-gap: 4px; }
  .insight-person, .insight-repo, .insight-count { display: none; }
  .insight-details { padding-left: 14px; }
}

/* Project memory */
.memory-body { padding: 0 18px 24px; }
.memory-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.memory-actions select { width: auto; max-width: 100%; }
.memory-text { gap: 10px; min-width: 0; }
.memory-text .chat-answer, .chat-answer.memory-text { overflow-wrap: anywhere; line-height: 1.5; }
.drawer-group > .button { align-self: flex-start; }
.drawer .memory-note-add { flex-direction: column; align-items: flex-end; }
.memory-meta { margin: 0; }
.memory-text p { margin: 0; }
.memory-more:empty { display: none; }
.memory-text > .button { align-self: flex-start; }
.memory-notes { gap: 12px; min-width: 0; }
.memory-notes-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.memory-notes-head h3 { margin: 0; }
.memory-note-add { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.memory-note-input { width: 100%; height: auto; min-height: 64px; padding: 8px 10px; resize: vertical; font: inherit; }
.memory-note-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.memory-note { padding: 10px 0; border-top: 1px solid var(--border-default); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.memory-note p { margin: 0; overflow-wrap: anywhere; }
.memory-note-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.memory-note-tools { display: inline-flex; gap: 2px; flex-shrink: 0; }
@media (max-width: 767px) {
  .memory-header { gap: 6px; flex-shrink: 0; }
  .memory-header .button > span { display: none; }
}

/* Settings → License: the plan comparison, and upgrade prompts. */
.license-certificate { display: flex; flex-direction: column; gap: 12px; min-width: 0; border-top: 1px solid var(--border-default); padding-top: 16px; }
.license-certificate-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px; align-items: start; min-width: 0; }
.license-certificate-facts { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.license-certificate-preview { min-width: 0; }
.license-certificate-page { display: block; width: 100%; height: auto; aspect-ratio: 842 / 595; border: 1px solid var(--border-default); border-radius: 8px; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08); background: #FFFFFF; }
@media (max-width: 900px) { .license-certificate-body { grid-template-columns: minmax(0, 1fr); } }
.plan-comparison { display: flex; flex-direction: column; gap: 12px; min-width: 0; border-top: 1px solid var(--border-default); padding-top: 16px; scroll-margin-top: 16px; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.plan-card { border: 1px solid var(--border-default); border-radius: var(--radius-surface); padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; background: var(--bg-canvas); }
.plan-card.current { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.plan-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; min-height: 24px; }
.plan-card-head h4 { margin: 0; }
.plan-highlights { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.plan-card .kv { grid-template-columns: minmax(80px, 1fr) auto; gap: 4px 12px; margin-top: auto; }
.plan-card .kv dd { text-align: right; }
.plan-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.upgrade-links { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.upgrade-link, .panel a.upgrade-link { color: var(--accent-ink); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.toast.actionable { pointer-events: auto; display: flex; flex-direction: column; gap: 6px; width: max-content; max-width: min(560px, calc(100vw - 32px)); }
.toast .upgrade-link { color: inherit; }
.insights-notice .upgrade-links { margin-top: 6px; }

/* Grouped menu (server): collapsible categories. The rail shows every
   item, with a line between groups instead of their headings. */
.nav { overflow-y: auto; min-height: 0; scrollbar-width: thin; }
.nav.grouped { gap: 2px; margin-top: 16px; }
.nav-group { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.nav-group + .nav-group { margin-top: 4px; }
.nav-group-items { display: flex; flex-direction: column; gap: 2px; }
.nav-group.closed .nav-group-items { display: none; }
body.touring .nav-group.closed .nav-group-items { display: flex; }
.nav-group-head {
  height: 26px; flex-shrink: 0; padding: 0 12px; border: 0; border-radius: var(--radius-chip); background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; color: var(--text-tertiary); font-weight: 500; text-align: left; width: 100%;
}
.nav-group-head:hover { color: var(--text-secondary); background: var(--color-neutral-100); }
.nav-group-head:focus-visible, .nav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.nav-group-head > svg:last-child { width: 16px; height: 16px; color: var(--icon-muted); transition: transform 120ms ease-out; }
.nav-group:not(.closed) .nav-group-head > svg:last-child { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .nav-group-head > svg:last-child { transition: none; } }
.nav.grouped .nav-item { height: 32px; }
.nav-item { flex-shrink: 0; }
.nav.grouped ~ .nav-collapse { border-top: 1px solid var(--border-default); border-radius: 0 0 var(--radius-control) var(--radius-control); }
.nav-plan-tag { height: 20px; padding: 0 7px; border-radius: var(--radius-chip); border: 1px solid var(--border-default); color: var(--text-tertiary); display: inline-flex; align-items: center; white-space: nowrap; }
@media (min-width: 768px) and (max-width: 1023px) {
  #sidebar.sidebar-collapsed .nav-group-head, #sidebar.sidebar-collapsed .nav-plan-tag { display: none; }
  #sidebar.sidebar-collapsed .nav-group.closed .nav-group-items { display: flex; }
  #sidebar.sidebar-collapsed .nav-group + .nav-group { border-top: 1px solid var(--border-default); padding-top: 6px; }
  #sidebar.sidebar-collapsed .nav-group, #sidebar.sidebar-collapsed .nav-group-items { align-items: center; }
  #sidebar.sidebar-collapsed .nav-group[class*="tone-"] { border: 0; border-radius: 0; background: transparent; }
  #sidebar.sidebar-collapsed .nav-group[class*="tone-"] .nav-group-items { padding: 0; }
  #sidebar.sidebar-collapsed .nav-group[class*="tone-"] .nav-group-items::before, #sidebar.sidebar-collapsed .nav-group[class*="tone-"] .nav-item::before { display: none; }
}
@media (min-width: 1024px) {
  body.nav-rail #sidebar.sidebar-collapsed .nav-group-head, body.nav-rail #sidebar.sidebar-collapsed .nav-plan-tag { display: none; }
  body.nav-rail #sidebar.sidebar-collapsed .nav-group.closed .nav-group-items { display: flex; }
  body.nav-rail #sidebar.sidebar-collapsed .nav-group + .nav-group { border-top: 1px solid var(--border-default); padding-top: 6px; }
  body.nav-rail #sidebar.sidebar-collapsed .nav-group, body.nav-rail #sidebar.sidebar-collapsed .nav-group-items { align-items: center; }
  body.nav-rail #sidebar.sidebar-collapsed .nav-group[class*="tone-"] { border: 0; border-radius: 0; background: transparent; }
  body.nav-rail #sidebar.sidebar-collapsed .nav-group[class*="tone-"] .nav-group-items { padding: 0; }
  body.nav-rail #sidebar.sidebar-collapsed .nav-group[class*="tone-"] .nav-group-items::before, body.nav-rail #sidebar.sidebar-collapsed .nav-group[class*="tone-"] .nav-item::before { display: none; }
}
.nav-collapse { flex-shrink: 0; }
.nav-empty { margin: 4px 12px; }

/* ---- Menu groups: colours, sub-menus, flyouts ------------------------------
   Each group has its colour (heading icon), and its pages' icons take a tint
   of it. They mark the group only; states keep their own tones (stateText).
   All pass 4.5:1 on the sidebar, its hover and the active item, in both
   themes (the dark values are in the Dark mode block at the top). */
:root {
  --nav-tone-monitor: #2563c4; --nav-tone-insights: #7c3aed; --nav-tone-ai-tools: #0f766e; --nav-tone-mcp: #4f46e5;
  --nav-tone-safety: #be185d; --nav-tone-people: #0e7490; --nav-tone-infrastructure: #475f8a; --nav-tone-system: #5b6270;
}
.nav-group.tone-monitor { --nav-tone: var(--nav-tone-monitor); }
.nav-group.tone-insights { --nav-tone: var(--nav-tone-insights); }
.nav-group.tone-ai-tools { --nav-tone: var(--nav-tone-ai-tools); }
.nav-group.tone-mcp { --nav-tone: var(--nav-tone-mcp); }
.nav-group.tone-safety { --nav-tone: var(--nav-tone-safety); }
.nav-group.tone-people { --nav-tone: var(--nav-tone-people); }
.nav-group.tone-infrastructure { --nav-tone: var(--nav-tone-infrastructure); }
.nav-group.tone-system { --nav-tone: var(--nav-tone-system); }
.nav-group-head { justify-content: flex-start; gap: 8px; }
.nav-group-head > svg:last-child { margin-left: auto; }
.nav-group-label { min-width: 0; }
.nav-group-icon { display: inline-grid; place-items: center; color: var(--nav-tone, var(--icon-muted)); }
.nav-group-icon svg { width: 20px; height: 20px; }

/* The grouped tree: each heading is a full row (Recent plain, a category a
   card tinted with its colour). An open category shows its pages on a line
   with a dot each; the page being shown is a pill in the category's tint. */
.nav.grouped .nav-group-head { height: 40px; padding: 0 12px; border-radius: var(--radius-control); color: var(--text-primary); }
.nav.grouped .nav-group-head:hover { color: var(--text-primary); }
.nav.grouped .nav-group-label { font-size: 15px; line-height: 20px; }
.nav-group[class*="tone-"] {
  border: 1px solid color-mix(in srgb, var(--nav-tone) 16%, var(--border-default));
  background: color-mix(in srgb, var(--nav-tone) 5%, var(--bg-sidebar));
  border-radius: 12px; gap: 0;
}
.nav-group[class*="tone-"] + .nav-group { margin-top: 8px; }
.nav-group[class*="tone-"] .nav-group-head:hover { background: color-mix(in srgb, var(--nav-tone) 10%, var(--bg-sidebar)); }
.nav-group[class*="tone-"]:not(.closed) { background: color-mix(in srgb, var(--nav-tone) 7%, var(--bg-sidebar)); }
.nav-group[class*="tone-"]:not(.closed) .nav-group-head { font-weight: 600; color: color-mix(in srgb, var(--nav-tone) 70%, var(--text-primary)); }
.nav-group[class*="tone-"] .nav-group-items { position: relative; padding: 2px 8px 8px 30px; }
.nav-group[class*="tone-"] .nav-group-items::before {
  content: ""; position: absolute; left: 21px; top: 6px; bottom: 14px; width: 1px;
  background: color-mix(in srgb, var(--nav-tone) 25%, var(--border-default));
}
.nav-group[class*="tone-"] .nav-group-items > .nav-item, .nav-group[class*="tone-"] .nav-group-items > .nav-row { position: relative; }
.nav-group[class*="tone-"] .nav-group-items > .nav-item::before, .nav-group[class*="tone-"] .nav-group-items > .nav-row > .nav-item::before {
  content: ""; position: absolute; left: -11px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%;
  background: color-mix(in srgb, var(--nav-tone) 35%, var(--border-default));
}
.nav-group[class*="tone-"] .nav-item { color: var(--text-primary); }
.nav-group[class*="tone-"] .nav-item:hover { background: color-mix(in srgb, var(--nav-tone) 9%, var(--bg-sidebar)); }
.nav-group[class*="tone-"] .nav-item.active { background: color-mix(in srgb, var(--nav-tone) 14%, var(--bg-raised)); box-shadow: none; font-weight: 500; }
.nav-group[class*="tone-"] .nav-item .nav-chip { background: var(--bg-raised); }
.nav-group .nav-item svg, .nav-hit svg, .nav-flyout-item svg { color: color-mix(in srgb, var(--nav-tone, var(--icon-default)) 78%, var(--icon-default)); }
.nav-group .nav-item.active svg { color: var(--nav-tone, var(--accent)); }

/* A page with tabs: its row, the chevron (touch and the drawer) and the
   inline list it opens. */
.nav-row { display: flex; flex-direction: column; position: relative; flex-shrink: 0; }
.nav-sub-toggle { display: none; position: absolute; right: 2px; top: 0; width: 32px; height: 32px; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--icon-muted); cursor: pointer; place-items: center; }
.nav-sub-toggle svg { width: 16px; height: 16px; transition: transform 120ms ease-out; }
.nav-row.expanded .nav-sub-toggle svg { transform: rotate(180deg); }
.nav-sub-toggle:hover { background: var(--color-neutral-200); color: var(--icon-default); }
.nav-sub-toggle:focus-visible, .nav-sub-item:focus-visible, .nav-flyout-item:focus-visible, .nav-group-rail:focus-visible, .nav-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.nav-sub { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 4px 34px; padding-left: 8px; border-left: 1px solid var(--border-default); }
.nav-sub-head { color: var(--text-tertiary); padding: 6px 8px 2px; }
.nav-sub-item { display: flex; align-items: center; min-height: 30px; padding: 0 8px; border-radius: var(--radius-chip); color: var(--text-secondary); text-decoration: none; }
.nav-sub-item:hover { background: var(--color-neutral-100); color: var(--text-primary); }
.nav-sub-item[aria-current="page"] { color: var(--text-primary); font-weight: 500; }
@media (hover: none), (max-width: 767px) {
  .nav-sub-toggle { display: grid; }
  .nav-row .nav-item { padding-right: 40px; }
  .nav-row .nav-item .nav-chip, .nav-row .nav-item .nav-plan-tag { margin-right: 2px; }
}
a.nav-item { text-decoration: none; }
.nav-item .nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The group's icon in the icon rail (its pages in a flyout); hidden otherwise. */
.nav-group-rail { display: none; width: 40px; height: 30px; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--nav-tone, var(--icon-muted)); cursor: pointer; place-items: center; flex-shrink: 0; }
.nav-group-rail:hover { background: var(--color-neutral-100); }
@media (min-width: 768px) and (max-width: 1023px) {
  #sidebar.sidebar-collapsed .nav-group-rail { display: grid; }
  #sidebar.sidebar-collapsed .nav-row { align-items: center; }
  #sidebar.sidebar-collapsed .nav-sub-toggle, #sidebar.sidebar-collapsed .nav-sub, #sidebar.sidebar-collapsed .nav-subitems { display: none; }
}
@media (min-width: 1024px) {
  body.nav-rail #sidebar.sidebar-collapsed .nav-group-rail { display: grid; }
  body.nav-rail #sidebar.sidebar-collapsed .nav-row { align-items: center; }
  body.nav-rail #sidebar.sidebar-collapsed .nav-sub-toggle, body.nav-rail #sidebar.sidebar-collapsed .nav-sub, body.nav-rail #sidebar.sidebar-collapsed .nav-subitems { display: none; }
}

/* The flyout beside a menu item: its tabs or sections (Settings by category),
   or in the rail a whole group's pages. */
.nav-flyout {
  position: fixed; z-index: 60; min-width: 220px; max-width: 300px; max-height: calc(100vh - 16px); overflow-y: auto;
  padding: 6px; border-radius: var(--radius-control); border: 1px solid var(--border-default); background: var(--bg-raised); box-shadow: var(--shadow-floating);
}
.nav-flyout.animate { animation: nav-flyout-in 120ms ease-out; }
@keyframes nav-flyout-in { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
body.motion-off .nav-flyout.animate { animation: none; }
.nav-flyout-title { padding: 6px 10px 4px; color: var(--text-tertiary); font-weight: 500; }
.nav-flyout-head { padding: 8px 10px 2px; color: var(--text-tertiary); border-top: 1px solid var(--border-default); margin-top: 4px; }
.nav-flyout-title + .nav-flyout-head { border-top: 0; margin-top: 0; }
.nav-flyout-item { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 10px; border-radius: var(--radius-chip); color: var(--text-secondary); text-decoration: none; }
.nav-flyout-item:hover, .nav-flyout-item:focus { background: var(--bg-sidebar); color: var(--text-primary); outline: none; }
.nav-flyout-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.nav-flyout-item[aria-current="page"] { color: var(--text-primary); font-weight: 500; box-shadow: inset 3px 0 0 var(--nav-tone, var(--accent)); }
.mcpgw-moved { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; }
.mcpgw-moved svg { flex-shrink: 0; }

/* Plan banner (a page the license doesn't include) and plan footer. */
.plan-banner { display: flex; align-items: center; gap: 14px; margin: 16px 18px 0; padding: 14px 16px; border: 1px solid var(--border-default); border-radius: var(--radius-surface); background: var(--accent-soft); flex-wrap: wrap; }
.plan-banner[hidden], .plan-footer[hidden] { display: none; }
.plan-banner-icon { width: 36px; height: 36px; border-radius: var(--radius-control); background: var(--bg-raised); color: var(--accent-ink); display: grid; place-items: center; flex-shrink: 0; }
.plan-banner-text { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.plan-banner-text p { margin: 0; }
.plan-banner-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.plan-banner-actions .button.secondary { background: var(--bg-raised); padding: 0 12px; }
.plan-banner-actions a.button { text-decoration: none; }
.plan-banner.nudge { animation: plan-nudge 900ms ease-out; }
@keyframes plan-nudge { 0% { box-shadow: 0 0 0 0 var(--accent); } 100% { box-shadow: 0 0 0 8px transparent; } }
@media (prefers-reduced-motion: reduce) { .plan-banner.nudge { animation: none; outline: 2px solid var(--accent); } }
.plan-footer { margin-top: auto; padding: 14px 18px 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--text-tertiary); }
.plan-footer-dot { color: var(--border-strong); }
.plan-footer-link { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; }
.plan-footer-link:hover { color: var(--text-primary); }
.plan-gated .insights-notice:not(.warn) { display: none; }
/* The assistant's chat fills the window; its footer would only add a scroll. */
main:has(.chat-layout) .plan-footer { display: none; }
@media (max-width: 767px) { .plan-banner { margin: 12px 12px 0; } .plan-banner-actions { width: 100%; } }

/* Audit log */
.audit-pager { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 18px 0; flex-wrap: wrap; }
.audit-footnote { padding: 10px 18px 18px; margin: 0; }
.audit-fields { display: flex; flex-wrap: wrap; gap: 6px; }
.audit-fields span { padding: 2px 8px; border-radius: 999px; background: var(--bg-field-on-canvas); color: var(--text-secondary); font-size: 12px; overflow-wrap: anywhere; }

/* Action menu (row and card "…" menus) */
.menu { position: fixed; z-index: 55; min-width: 200px; max-width: calc(100vw - 16px); background: var(--bg-raised); border: 1px solid var(--border-default); border-radius: var(--radius-control); box-shadow: var(--shadow-floating); padding: 4px; display: flex; flex-direction: column; gap: 2px; }
.menu-item { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text-primary); cursor: pointer; text-align: left; white-space: nowrap; }
.menu-item .icon { width: 16px; height: 16px; color: var(--icon-default); flex-shrink: 0; }
.menu-item:hover:not(:disabled), .menu-item:focus-visible { background: var(--bg-sidebar); outline: none; }
.menu-item.danger, .menu-item.danger .icon { color: var(--red-700); }
.menu-item:disabled { opacity: .5; cursor: not-allowed; }
a.menu-item { text-decoration: none; }
.menu-item .menu-dot { position: static; flex-shrink: 0; margin-left: -4px; }
/* A switch in a menu (menuitemcheckbox): the track follows aria-checked. */
.menu-check { padding-right: 8px; }
.menu-switch { margin-left: auto; padding-left: 12px; box-sizing: content-box; width: 28px; height: 16px; position: relative; flex-shrink: 0; }
.menu-switch::before { content: ""; position: absolute; right: 0; top: 0; width: 28px; height: 16px; border-radius: 8px; background: var(--color-neutral-350); transition: background-color 120ms ease-out; }
.menu-switch::after { content: ""; position: absolute; top: 2px; right: 14px; width: 12px; height: 12px; border-radius: 50%; background: var(--switch-knob); box-shadow: var(--shadow-raised); transition: right 120ms ease-out; }
.menu-check[aria-checked="true"] .menu-switch::before { background: var(--switch-on); }
.menu-check[aria-checked="true"] .menu-switch::after { right: 2px; }

/* Integrations: Table | Cards switch, card grid, and a table that fits */
.view-switch button { display: inline-flex; align-items: center; gap: 6px; }
.view-switch .icon { width: 16px; height: 16px; }
.integrations-table .table-min-width { min-width: 0; }
.integration-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 0 18px 24px; }
@media (min-width: 700px) { .integration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .integration-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1440px) { .integration-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.integration-card { border: 1px solid var(--border-default); border-radius: var(--radius-surface); background: var(--bg-canvas); padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; cursor: pointer; transition: background-color 120ms ease-out, box-shadow 120ms ease-out; }
.integration-card:hover { background: var(--bg-sidebar); }
.integration-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.integration-card-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.integration-card-head .cell-stack { padding-right: 0; flex: 1; }
.integration-card-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.integration-card-text { margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; min-height: 40px; }
.integration-card-actions { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.integration-card-actions .icon-button { width: 36px; height: 36px; border-radius: var(--radius-control); color: var(--icon-muted); }
.integration-card-actions .icon-button:hover { background: var(--bg-field-on-canvas); color: var(--icon-strong); }
@media (max-width: 767px) { .view-switch button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .view-switch button { padding: 0 10px; } }
.integration-card-actions .button { min-width: 0; flex-shrink: 1; }
.integration-card-actions .button span { overflow: hidden; text-overflow: ellipsis; }

/* Settings → Network → Relays (settings-tailscale.js). */
.relay-notice { padding: 10px 12px; border-radius: var(--radius-control); background: var(--amber-50); color: var(--amber-700); }
.relays-list { display: flex; flex-direction: column; gap: 8px; }
.relays-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border-default); }
.relays-row:last-child { border-bottom: 0; }
.relays-row .server-pill { margin-left: 8px; }
.relays-grid { display: flex; flex-direction: column; }
.relays-grid-row { display: grid; grid-template-columns: minmax(180px, 1.4fr) repeat(3, minmax(110px, 1fr)); gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border-default); }
.relays-grid-head { padding-top: 0; }
.relays-cell-label { display: none; }
@media (max-width: 640px) {
  .relays-grid-head { display: none; }
  .relays-grid-row { grid-template-columns: 1fr; gap: 4px; }
  .relays-grid-row > div[role="cell"]:not(:first-child) { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .relays-cell-label { display: inline; }
}

/* Settings → Network: the connection diagram (settings-network-map.js) and the collapsible cards. */
.network-panels { display: flex; flex-direction: column; gap: 16px; max-width: 920px; min-width: 0; }
.netmap { display: grid; grid-template-columns: 176px minmax(0, 1fr) 176px; align-items: center; padding: 4px 0; }
.netmap-end { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px; border: 1.5px solid var(--border-strong); border-radius: 12px; background: var(--bg-raised); min-width: 0; z-index: 1; }
.netmap-end-right { border-color: var(--text-primary); border-width: 2px; }
.netmap-end-left { margin-right: 22px; }
.netmap-end-right { margin-left: 22px; }
.netmap-end::after { content: ""; position: absolute; top: 50%; width: 22px; height: 2px; background: var(--border-strong); }
.netmap-end-left::after { right: -23.5px; }
.netmap-end-right::after { left: -24px; }
.netmap-end-icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; background: var(--accent-soft); color: var(--accent-ink); }
.netmap-end-icon .icon { width: 16px; height: 16px; }
.netmap-lanes { display: flex; flex-direction: column; min-width: 0; }
.netmap-lane { position: relative; display: flex; justify-content: center; padding: 6px 26px; min-width: 0; }
/* The buses on either side join the lanes to the two ends. */
.netmap-lane::before, .netmap-lane::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--border-strong); }
.netmap-lane::before { left: 0; }
.netmap-lane::after { right: 0; }
.netmap-lane:first-child::before, .netmap-lane:first-child::after { top: 50%; }
.netmap-lane:last-child::before, .netmap-lane:last-child::after { bottom: 50%; }
.netmap-lane:only-child::before, .netmap-lane:only-child::after { display: none; }
.netmap-wire { position: absolute; left: 0; right: 0; top: 50%; height: 0; border-top: 2px solid var(--border-strong); }
.netmap-lane.state-off .netmap-wire { border-top-style: dashed; border-top-color: var(--color-neutral-350); }
.netmap-lane.state-blocked .netmap-wire { border-top: 2px dashed var(--tone-bad); opacity: .6; }
.netmap-lane.active .netmap-wire { border-top: 2.5px solid var(--accent); }
.netmap-lane.active.tone-warn .netmap-wire { border-top-color: var(--tone-warn); }
/* A relay that only did the handshake: grey and still; the data moves on
   the Direct lane. Each wire also says it in a word. */
.netmap-lane.state-handshake .netmap-wire { border-top: 2px solid var(--color-neutral-350); }
.netmap-wire-label { position: absolute; left: 4px; top: -17px; padding: 0 3px; border-radius: 4px; background: var(--bg-raised); color: var(--text-tertiary); font-size: 10px; line-height: 14px; white-space: nowrap; }
.netmap-lane.wire-direct .netmap-wire-label { color: var(--accent-ink); }
.netmap-dot { position: absolute; top: -5px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg-canvas); animation: netmap-flow 2.7s linear infinite; }
.netmap-lane.tone-warn .netmap-dot { background: var(--tone-warn); }
@keyframes netmap-flow { from { left: 0; } to { left: calc(100% - 7px); } }
.netmap-dot-2 { animation-delay: -0.9s; }
.netmap-dot-3 { animation-delay: -1.8s; }
.netmap-card { position: relative; z-index: 1; width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--border-default); border-radius: 12px; background: var(--bg-raised); min-width: 0; }
.netmap-lane.active .netmap-card { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.netmap-lane.active.tone-warn .netmap-card { border-color: var(--tone-warn); box-shadow: 0 0 0 3px var(--amber-50); }
.netmap-lane.state-off .netmap-card { background: var(--bg-field-on-canvas); }
.netmap-lane.state-off .netmap-mark { opacity: .55; }
.netmap-card-head { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.netmap-order { width: 18px; height: 18px; border-radius: 50%; background: var(--bg-field); color: var(--text-secondary); font-size: 11px; font-weight: 600; display: grid; place-items: center; flex-shrink: 0; }
.netmap-mark { width: 22px; height: 22px; display: grid; place-items: center; flex-shrink: 0; color: var(--icon-default); }
.netmap-mark .icon { width: 16px; height: 16px; }
.netmap-title { flex: 1 1 0; min-width: 0; }
.netmap-state { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.netmap-count { height: 22px; padding: 0 7px; border-radius: var(--radius-pill); background: var(--bg-field-on-canvas); color: var(--text-secondary); display: inline-flex; align-items: center; white-space: nowrap; font-size: 12px; }
.netmap-detail, .netmap-note { padding-left: 56px; }
.netmap-relays { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 0 56px; }
.netmap-relay { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border: 1px solid var(--border-default); border-radius: 12px; font-size: 12px; color: var(--text-secondary); max-width: 100%; background: var(--bg-canvas); }
.netmap-relay > i { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--tone-neutral); opacity: .5; }
.netmap-relay.tone-good > i { background: var(--tone-good); opacity: 1; }
.netmap-relay.tone-warn > i { background: var(--tone-warn); opacity: 1; }
.netmap-relay.tone-bad > i { background: var(--tone-bad); opacity: 1; }
.netmap-relay.current { border-color: var(--accent); color: var(--text-primary); font-weight: 500; }
.netmap-relay-name { max-width: 150px; }
.netmap-relay-ms { color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.netmap-relay-count { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-ink); font-size: 11px; display: inline-grid; place-items: center; }
.netmap-order-line { margin: 0; }
/* A client's servers (hub and satellites), the one in use connected. */
.netmap.netmap-multi { grid-template-columns: 160px minmax(0, 1fr) 236px; }
.netmap-servers { position: relative; display: flex; flex-direction: column; gap: 8px; margin-left: 22px; min-width: 0; z-index: 1; }
.netmap-server { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px; border: 1px solid var(--border-default); border-radius: 12px; background: var(--bg-raised); min-width: 0; }
.netmap-server.current { border: 2px solid var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.netmap-server.current::after { content: ""; position: absolute; top: 50%; left: -24px; width: 22px; height: 2px; background: var(--accent); }
.netmap-server.tone-bad:not(.current) { background: var(--bg-field-on-canvas); }
.netmap-server-head { display: flex; align-items: center; gap: 10px; min-width: 0; width: 100%; }
.netmap-server-name { flex: 1 1 0; }
.netmap-server-tags { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.netmap-server .button { height: 30px; }
.netmap-server-state { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.netmap-servers-title { margin: 16px 0 8px; }
.switcher-role { height: 20px; padding: 0 7px; border-radius: var(--radius-pill); background: var(--bg-field-on-canvas); color: var(--text-secondary); display: inline-flex; align-items: center; white-space: nowrap; font-size: 11px; }
/* The server switcher on the sidebar's brand chevron. */
button.brand-chevron { border: 0; background: transparent; cursor: pointer; width: 22px; height: 30px; margin-right: -4px; border-radius: 7px; display: grid; place-items: center; padding: 0; flex-shrink: 0; }
button.brand-chevron:hover, button.brand-chevron:focus-visible, button.brand-chevron[aria-expanded="true"] { background: var(--bg-field); color: var(--text-primary); outline: none; }
.menu.switcher { width: 320px; padding: 6px; }
.switcher-head { padding: 6px 8px 4px; }
.switcher-list { display: flex; flex-direction: column; gap: 2px; max-height: min(70vh, 480px); overflow-y: auto; }
.switcher-item { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--text-primary); cursor: pointer; text-align: left; text-decoration: none; width: 100%; font: inherit; }
.switcher-item:hover:not(.disabled), .switcher-item:focus-visible { background: var(--bg-sidebar); outline: none; }
.switcher-item:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.switcher-item.current { background: var(--accent-soft); }
.switcher-item.disabled { cursor: not-allowed; }
.switcher-item.disabled .switcher-icon, .switcher-item.disabled .switcher-text > .primary { opacity: .55; }
.switcher-icon { width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center; color: var(--icon-default); }
.switcher-icon .icon { width: 18px; height: 18px; }
.switcher-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 0; }
.switcher-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.switcher-reason { white-space: normal; }
.switcher-check { width: 18px; height: 18px; flex-shrink: 0; color: var(--accent-ink); }
.switcher-check .icon { width: 18px; height: 18px; }
.switcher-loading, .switcher-note { padding: 8px; }
.netmap-table th[scope="row"] { font-weight: 500; color: var(--text-primary); }
.netmap-table-sub th[scope="row"] { font-weight: 400; color: var(--text-secondary); }
@media (max-width: 760px) {
  .netmap, .netmap.netmap-multi { grid-template-columns: 1fr; gap: 0; }
  .netmap-servers { margin: 14px 0 0; }
  .netmap-server.current::after { display: none; }
  .netmap-end-left, .netmap-end-right { margin: 0; }
  .netmap-end-left { margin-bottom: 14px; }
  .netmap-end-right { margin-top: 14px; }
  .netmap-end::after { top: auto; width: 2px; height: 14px; left: 50%; right: auto; }
  .netmap-end-left::after { bottom: -15.5px; }
  .netmap-end-right::after { top: -16px; }
  .netmap-lanes { gap: 8px; position: relative; }
  .netmap-lane { padding: 0; }
  .netmap-lane::before, .netmap-lane::after, .netmap-wire { display: none; }
  .netmap-card { max-width: none; }
  .netmap-detail, .netmap-note, .netmap-relays { padding-left: 0; }
}

/* A one-line summary that opens to the details. */
.disclosure { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-control); background: var(--bg-field-on-canvas); font: inherit; color: var(--text-primary); text-align: left; cursor: pointer; }
.disclosure:hover { border-color: var(--border-strong); }
.disclosure:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.disclosure-summary { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.disclosure-label { margin-left: auto; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.disclosure-label .icon { width: 16px; height: 16px; transition: transform 120ms ease-out; }
.disclosure[aria-expanded="true"] .disclosure-label .icon { transform: rotate(180deg); }
.disclosure-body { display: flex; flex-direction: column; gap: 12px; }
.disclosure-body[hidden] { display: none; }
.title-with-mark { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.relays-compact { display: flex; flex-direction: column; }
.relays-compact-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 70px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border-default); }
.relays-compact-row:last-child { border-bottom: 0; }
.relays-compact-ms { font-variant-numeric: tabular-nums; color: var(--text-secondary); text-align: right; }
@media (max-width: 640px) {
  .relays-compact-row { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; }
  .relays-compact-row > :nth-child(3) { text-align: right; }
}
.netmap-end-text { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .netmap-state { order: 5; flex-basis: 100%; margin-left: 0; padding-left: 26px; }
  .disclosure-summary { gap: 2px 8px; }
  .disclosure-sep { display: none; }
}

/* Settings → Public endpoint (settings-public.js): the setup's steps. */
.public-status { display: flex; flex-direction: column; gap: 12px; }
.public-steps { display: flex; flex-wrap: wrap; gap: 8px; }
.public-step-chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 6px; border: 1px solid var(--border-default); border-radius: var(--radius-pill); background: transparent; color: var(--text-secondary); cursor: pointer; }
.public-step-chip.selected { border-color: var(--accent-ink); background: var(--accent-soft); color: var(--accent-ink); }
.public-step-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-field-on-canvas); font-size: 12px; }
.public-step-chip.selected .public-step-n { background: var(--accent-ink); color: var(--color-neutral-0); }
.public-step-body, .public-dns { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.public-dns { border-top: 1px solid var(--border-default); padding-top: 16px; }
.public-checks { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.public-check { display: inline-flex; align-items: center; gap: 8px; }
.public-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 8px; }
.public-inline .field { flex: 1 1 200px; }
@media (max-width: 600px) {
  .public-step-chip .text-body-small { display: none; }
  .public-step-chip.selected .text-body-small { display: inline; }
}

/* The setup guide (views/setup-guide.js): questions, recommendation,
   install steps and the solution diagram, in the language of the cluster
   diagram and the public endpoint's steps. */
.setup-guide { display: flex; flex-direction: column; gap: 16px; padding: 20px 18px 48px; max-width: 1040px; min-width: 0; }
.setup-body, .setup-step-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.setup-intro { flex-direction: row; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; background: var(--accent-soft); border-color: transparent; }
.setup-intro-text { display: flex; flex-direction: column; gap: 6px; flex: 1 1 420px; min-width: 0; }
.setup-intro-text h2 { margin: 0; }
.setup-intro-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.setup-readonly { margin: 0; }
.setup-question { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.setup-question + .setup-question { border-top: 1px solid var(--border-default); padding-top: 16px; }
.setup-alternatives { padding: 16px 20px; }
.setup-alternatives:not([open]) { gap: 0; }
.setup-options { display: flex; flex-wrap: wrap; gap: 8px; }
.setup-options.multi { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.setup-option { display: inline-flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-control); cursor: pointer; min-width: 0; }
.setup-option.with-detail { padding: 12px; }
.setup-option input { margin: 3px 0 0; accent-color: var(--accent); flex-shrink: 0; }
.setup-option:has(input:checked) { border-color: var(--accent-ink); background: var(--accent-soft); }
.setup-option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.setup-option:has(input:disabled) { cursor: default; }
.setup-option-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.setup-why { margin: 0; }
.pre-line { white-space: pre-line; }
.setup-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.setup-progress { white-space: nowrap; }
.setup-progress-bar { flex: 1 1 160px; height: 6px; accent-color: var(--teal-700); }
/* Templates (Start) and their policies (Policies). */
.setup-templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.setup-template { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border: 1px solid var(--border-default); border-radius: var(--radius-control); background: var(--bg-raised); cursor: pointer; min-width: 0; }
.setup-template input { margin: 3px 0 0; accent-color: var(--accent); flex-shrink: 0; }
.setup-template:has(input:checked) { border-color: var(--accent-ink); background: var(--accent-soft); }
.setup-template:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.setup-template:has(input:disabled) { cursor: default; }
.setup-template-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.setup-template-head { display: flex; flex-direction: column; gap: 1px; }
.setup-template-points { list-style: disc; padding-left: 16px; display: flex; flex-direction: column; gap: 2px; }
.setup-policy-preview:empty { display: none; }
.setup-policy-preview { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.setup-next { margin: 0; padding: 0; list-style: none; counter-reset: setup-next; display: flex; flex-direction: column; }
.setup-next-item { counter-increment: setup-next; display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border-default); }
.setup-next-item::before { content: counter(setup-next); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-field-on-canvas); font-size: 12px; flex-shrink: 0; }
.setup-next-item > .min-w-0 { flex: 1 1 auto; }
.setup-why-label { color: var(--text-secondary); font-weight: 500; }
.setup-clear { border: 0; background: none; padding: 0; color: var(--accent-ink); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.setup-rec { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.setup-rec-head { display: flex; align-items: center; gap: 12px; }
.setup-rec-icon, .setup-callout > .icon { width: 36px; height: 36px; border-radius: var(--radius-control); background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; flex-shrink: 0; }
.setup-callout > .icon { width: 20px; height: 20px; background: none; }
.setup-procon { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.setup-procon > div { display: flex; flex-direction: column; gap: 6px; }
.setup-callout { flex-direction: row; align-items: flex-start; gap: 12px; background: var(--accent-soft); border-color: transparent; }
.setup-callout.warn { background: var(--amber-50); }
.setup-callout.warn > .icon { color: var(--amber-700); }
.setup-callout-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.setup-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.setup-check { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.setup-check > .text-body-medium { min-width: 150px; }
.setup-alternatives summary { cursor: pointer; }
.setup-alternatives[open] { gap: 12px; }
.setup-alt { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; border-top: 1px solid var(--border-default); }
.setup-piece.done { border-color: var(--green-700); }
.setup-piece-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.setup-piece.done .public-step-n { background: var(--green-50); color: var(--green-700); }
.setup-install-ways { display: flex; flex-direction: column; gap: 12px; }
.setup-way { display: flex; flex-direction: column; gap: 8px; }
.setup-legend { display: inline-flex; gap: 14px; white-space: nowrap; }
.setup-solution-head { flex-wrap: wrap; }
.setup-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.setup-legend-item::before { content: ""; width: 18px; height: 0; border-top: 2px solid var(--accent); }
.setup-legend-item.todo::before { border-top: 2px dashed var(--color-neutral-400); }
.icon-button .badge-dot.info { background: var(--accent); }
.setup-diagram { width: 100%; min-width: 640px; height: auto; display: block; }
.setup-diagram .setup-col { font: 500 12px var(--font-sans, Inter, sans-serif); fill: var(--text-tertiary); letter-spacing: .02em; }
.setup-diagram .edge { fill: none; stroke-width: 2; }
.setup-diagram .edge.done { stroke: var(--teal-300); }
.setup-diagram .edge.todo { stroke: var(--color-neutral-400); stroke-dasharray: 6 5; }
.setup-diagram .edge.faint { stroke-width: 1.5; opacity: .55; }
.setup-diagram .edge.deliver { stroke-width: 1.5; stroke-dasharray: 2 5; opacity: .8; }
.setup-diagram .edge.blocked { stroke: var(--red-700); stroke-dasharray: 3 5; }
.setup-diagram .flow-dot { fill: var(--teal-700); stroke: var(--bg-canvas); stroke-width: 2; }
.setup-diagram .edge-label { font: 400 11px var(--font-sans, Inter, sans-serif); fill: var(--text-secondary); paint-order: stroke; stroke: var(--bg-canvas); stroke-width: 4px; stroke-linejoin: round; }
.setup-diagram .edge-label.blocked { fill: var(--red-700); }
.setup-diagram .setup-card rect { fill: var(--bg-raised); stroke: var(--border-strong); stroke-width: 1.5; }
.setup-diagram .setup-card.todo rect { stroke-dasharray: 5 4; stroke: var(--color-neutral-400); }
.setup-diagram .setup-card.kind-hub rect { stroke: var(--text-primary); stroke-width: 2; stroke-dasharray: none; }
.setup-diagram .setup-card.kind-edge.done rect { stroke: var(--teal-700); }
.setup-diagram .setup-card.blocked rect { stroke: var(--red-700); fill: var(--red-50); }
.setup-diagram .setup-state { fill: var(--color-neutral-350); }
.setup-diagram .done .setup-state { fill: var(--green-700); }
.setup-diagram .blocked .setup-state { fill: var(--red-700); }
.setup-diagram .card-title { font: 600 13px var(--font-sans, Inter, sans-serif); fill: var(--text-primary); }
.setup-diagram .card-detail { font: 400 11.5px var(--font-sans, Inter, sans-serif); fill: var(--text-secondary); }
@media (max-width: 767px) {
  .setup-guide { padding: 16px 12px 40px; }
  .setup-procon { grid-template-columns: 1fr; }
  .setup-options.multi { grid-template-columns: 1fr; }
  .setup-intro { padding: 16px; }
}

/* Brand (brand.js): the role icon in the plan's shade, the wordmark, Spander.
   Plan shades never stand in for status colours; the activate dot is amber
   because it asks for an action. */
.role-icon { position: relative; display: inline-block; flex-shrink: 0; width: var(--icon-size, 100%); height: var(--icon-size, 100%); line-height: 0; }
.role-icon img { width: 100%; height: 100%; display: block; border-radius: 23%; }
.role-icon.shade-soft img, .role-icon.shade-god img { box-shadow: inset 0 0 0 1px rgba(10, 11, 13, .14), 0 0 0 1px rgba(10, 11, 13, .12); }
.role-icon-badge { position: absolute; right: -6%; bottom: -8%; padding: 0 .4em; border-radius: 999px; background: #0A0B0D; color: #BFFF31; box-shadow: 0 0 0 1.5px var(--bg-canvas); font: 700 max(7px, calc(var(--icon-size, 40px) * .2)) / 1.45 ui-monospace, Menlo, monospace; letter-spacing: .02em; }
.role-icon-dot { position: absolute; top: -6%; right: -6%; width: 30%; height: 30%; border-radius: 50%; background: #F59E0B; box-shadow: 0 0 0 2px var(--bg-canvas); }
.logo-mark.brand-mark { background: none; }
.logo-mark.brand-mark .role-icon { width: 100%; height: 100%; }
.plan-chip { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: var(--radius-chip); border: 1px solid var(--border-default); color: var(--text-secondary); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.plan-chip.activate { border-color: var(--amber-700); color: var(--amber-700); }
/* The wordmark is on-light artwork (synced, never edited): on dark it sits on a light backing. */
.wordmark { display: block; width: 240px; max-width: 100%; height: auto; background: var(--wordmark-backing); padding: var(--wordmark-pad); border-radius: 10px; box-sizing: content-box; }
.wordmark.small { width: 180px; }
.spander { display: block; flex-shrink: 0; width: var(--spander-size, 120px); height: auto; max-width: 160px; }
.spander-note { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 32px 18px; text-align: left; color: var(--text-tertiary); }
.spander-note .spander { width: 96px; }
.spander-note-text { max-width: 460px; display: flex; flex-direction: column; gap: 6px; }
.spander-note-text p { margin: 0; }
.onboarding-head .spander { width: 120px; }
.activation-step .spander { width: 96px; }
.activation-step .spander-pair { align-self: center; }
/* Byte, the sidekick's robot dog: at Spander's feet, and a small mark
   beside every sidekick status (the status text stays the signal). */
.spander-pair { display: inline-flex; align-items: flex-end; flex-shrink: 0; }
.spander-pair .byte-companion { margin-left: -14px; margin-bottom: 2px; }
.byte-mark { display: inline-block; flex-shrink: 0; object-fit: contain; vertical-align: middle; }
.sidekick-status { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.sidekick-panel-head { display: flex; align-items: center; gap: 14px; }
.sidekick-panel-head .byte-mark { width: 56px; height: 56px; }
.settings-tile-icon .byte-mark { width: 22px; height: 22px; }
.suggestion-head .byte-mark, .notice-byte .byte-mark { margin-right: 2px; }
.notice-byte { display: flex; align-items: flex-start; gap: 8px; }
.notice-byte .byte-mark { margin-top: -2px; }
/* The header's companion slot (companion.js): Spander and Byte land here
   after their once-a-session flight; visible on phones too. */
.companion-slot { display: inline-flex; align-items: center; flex-shrink: 0; margin-right: 12px; }
.companion-slot:empty { display: none; }
.about-brand { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.about-brand .wordmark { width: 220px; }
@media (max-width: 767px) {
  .spander-note { flex-direction: column; text-align: center; padding: 24px 12px; }
  .spander-note .spander { width: 80px; }
  .spander-note .byte-companion { width: 40px; height: 40px; }
  .companion-slot { margin-right: 6px; }
}
#sidebar .logo-mark.brand-mark .role-icon img { width: 100%; height: 100%; }
.role-pill { white-space: nowrap; }
.role-pill .plan-chip { margin-left: 2px; height: 16px; padding: 0 5px; font-size: 11px; }

/* Analytics: header, one filter row, KPI tiles, then sections. */
.an-header { display: flex; align-items: center; gap: 12px; padding: 18px 18px 0; flex-wrap: wrap; }
.an-header .spacer { flex: 1; }
.an-custom { display: inline-flex; align-items: center; gap: 8px; }
.an-custom .input { width: 150px; }
.an-filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 18px 0; }
.an-filters select.input { width: auto; min-width: 0; max-width: 200px; flex: 1 1 140px; color: var(--text-secondary); }
.an-filters select.input.active { color: var(--text-primary); box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.an-scope { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 14px 18px 0; color: var(--text-tertiary); }
.an-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; margin: 12px 18px 0; background: var(--border-default); border: 1px solid var(--border-default); border-radius: var(--radius-surface); overflow: hidden; }
.an-kpis.compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.an-kpi { position: relative; background: var(--bg-canvas); padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.an-kpi-label { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-kpi-row { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; min-width: 0; }
.an-kpi-value { font-weight: 600; font-size: 24px; line-height: 30px; letter-spacing: -0.3px; color: var(--text-primary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.an-kpi .trend-chip { height: 22px; gap: 4px; padding: 0 6px; }
.an-kpi .trend-chip .icon { width: 14px; height: 14px; }
.an-kpi-sub { color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-kpi .sparkline { position: static; display: block; width: 100%; height: 22px; margin-top: auto; }
.an-empty { margin: 16px 18px 0; padding: 14px 16px; border-radius: var(--radius-control); background: var(--bg-field-on-canvas); color: var(--text-secondary); }
.an-section { padding: 26px 18px 0; }
.an-section:last-child { padding-bottom: 32px; }
.an-section-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.an-section-head h2 { margin: 0; font-size: 16px; }
.an-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.an-grid .chart-card header { flex-wrap: wrap; }
.an-grid .chart-card .chart-heading { min-width: 0; flex: 1 1 180px; }
.an-card-controls { display: flex; gap: 8px; flex-wrap: wrap; order: 10; flex-basis: 100%; }
.an-card-controls select.input, select.input.compact { height: 36px; width: auto; min-width: 0; padding: 0 10px; }
.bar-row.clickable { cursor: pointer; border-radius: 6px; }
.bar-row.clickable:hover .label, .bar-row.clickable:focus-visible .label { text-decoration: underline; text-underline-offset: 3px; }
.bar-row.clickable:focus-visible { outline: 2px solid var(--series-1); outline-offset: 2px; }
.bar-stack { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bar-track.thin { height: 6px; border-radius: 3px; }
.bar-list.grouped { gap: 12px; }
.an-sessions { display: flex; flex-direction: column; }
.an-session { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; background: transparent; padding: 9px 6px; border-radius: 8px; cursor: pointer; color: inherit; font: inherit; }
.an-session + .an-session { border-top: 1px solid var(--border-default); border-radius: 0; }
.an-session:hover { background: var(--bg-field-on-canvas); }
.an-session:focus-visible { outline: 2px solid var(--series-1); outline-offset: -2px; }
.an-session-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.an-session-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-session-cost { font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.an-heat { display: flex; flex-direction: column; gap: 8px; }
.chart-svg.heatmap { max-width: 1100px; }
.heat-legend { display: inline-flex; align-items: center; gap: 4px; color: var(--text-tertiary); align-self: flex-end; }
.heat-legend i { width: 14px; height: 10px; border-radius: 2px; display: block; }
.heat-legend span { padding: 0 4px; }
@media (max-width: 1279px) {
  .an-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .an-kpis, .an-kpis.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .an-grid .chart-card { grid-column: span 12; }
}
@media (max-width: 767px) {
  .an-header, .an-filters, .an-scope { padding-left: 16px; padding-right: 16px; }
  .an-kpis { margin-left: 16px; margin-right: 16px; }
  .an-section { padding-left: 16px; padding-right: 16px; }
  .an-kpis, .an-kpis.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an-header .segmented { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .an-header .spacer { display: none; }
  .an-filters select.input { flex: 1 1 calc(50% - 4px); max-width: none; }
  .an-kpi-value { font-size: 21px; line-height: 26px; }
}
.chart-card header .chart-actions { display: flex; gap: 8px; flex-shrink: 0; }
.chart-card header .chart-actions:empty { display: none; }
@media (max-width: 767px) {
  .an-header .segmented { width: 100%; }
  .an-header .segmented button { flex: 1; padding: 0 6px; }
}

/* Header: "Manage server" on a client with a management token (app.js). The
   warning icon carries the meaning when the server dashboard isn't up. */
.manage-server { margin-right: 10px; white-space: nowrap; }
.manage-server.warn .icon { color: var(--tone-warn); }
@media (max-width: 767px) {
  .manage-server { margin-right: 6px; padding-left: 10px; padding-right: 10px; }
  .manage-server span { display: none; }
}

/* Dashboard sign-in: the sign-in page, the account drawer, Settings → Sign-in. */
body.login-page { min-height: 100vh; background: var(--bg-sidebar); }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; }
.login-card { width: 100%; max-width: 400px; background: var(--bg-raised); border: 1px solid var(--border-default); border-radius: var(--radius-surface); box-shadow: var(--shadow-raised); padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.login-brand { display: flex; align-items: center; gap: 10px; }
.login-brand img { border-radius: 10px; }
.login-title { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; color: var(--text-primary); }
.login-subtitle { margin: -8px 0 0; }
.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-field { display: flex; flex-direction: column; gap: 6px; }
.login-field .input { width: 100%; }
.login-submit { width: 100%; justify-content: center; }
.login-providers { display: flex; flex-direction: column; gap: 8px; }
.login-provider { width: 100%; justify-content: center; gap: 8px; text-decoration: none; border: 1px solid var(--border-default); }
.login-provider img { border-radius: 4px; }
.login-divider { display: flex; align-items: center; gap: 10px; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; border-top: 1px solid var(--border-default); }
.login-message { margin: 0; padding: 10px 12px; border-radius: var(--radius-control); font-size: 13px; line-height: 18px; }
.login-message.tone-bad { background: var(--red-50); color: var(--red-700); }
.login-message.tone-good { background: var(--green-50); color: var(--green-700); }
.login-help, .login-alt, .login-back { margin: 0; text-align: center; color: var(--text-secondary); }
.login-help code { font-size: 12px; white-space: nowrap; }
.link-button { background: none; border: 0; padding: 0; color: var(--text-secondary); text-decoration: underline; cursor: pointer; align-self: center; font: inherit; }
.login-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.totp-setup { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.totp-qr { width: 184px; height: 184px; border-radius: 8px; border: 1px solid var(--border-default); background: #fff; image-rendering: pixelated; }
.totp-secret { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.totp-secret code { word-break: break-all; letter-spacing: .04em; }
.recovery-codes { margin: 0; padding: 12px 12px 12px 36px; background: var(--bg-field-on-canvas); border-radius: var(--radius-control); columns: 2; column-gap: 24px; font-size: 13px; line-height: 24px; }
.account-body { display: flex; flex-direction: column; gap: 20px; }
.account-section { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--border-default); }
.account-section h3 { margin: 0; }
.passkey-row { display: flex; align-items: center; gap: 10px; }
.account-setup { display: flex; flex-direction: column; gap: 14px; }
.account-setup:empty { display: none; }
.user-block.signed-in { align-items: center; gap: 4px; padding-left: 0; }
.user-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 4px; border: 0; background: none; border-radius: var(--radius-control); text-align: left; cursor: pointer; color: inherit; font: inherit; }
.user-open:hover { background: var(--bg-raised); }
.user-block.signed-in .sign-out { flex-shrink: 0; }
body.nav-rail #sidebar .user-block.signed-in .sign-out { display: none; }
@media (min-width: 768px) and (max-width: 1023px) { #sidebar.sidebar-collapsed:not(.active) .user-block.signed-in .sign-out { display: none; } }
.panel-stack { display: flex; flex-direction: column; gap: 16px; max-width: 920px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.panel h4 { margin: 4px 0 -4px; }
.signin-sso, .signin-first { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--radius-control); background: var(--bg-field-on-canvas); }
.signin-sso textarea { width: 100%; resize: vertical; }
.signin-sso .input, .signin-first .input { background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--border-default); }
.signin-methods { display: flex; flex-direction: column; gap: 14px; }
.users-table td.user-actions { text-align: right; white-space: nowrap; }
.copy-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.copy-row code { word-break: break-all; }
.toggle-row.muted .text-body-medium { color: var(--text-secondary); }
#panel-signin code { overflow-wrap: anywhere; }
.users-table { min-width: 640px; }
.users-table td { vertical-align: middle; }
.users-table select.input { min-width: 110px; }
.row-actions { display: flex; gap: 2px; justify-content: flex-end; }
.role-legend { display: flex; flex-direction: column; gap: 4px; color: var(--text-secondary); }
.modal-form { display: flex; flex-direction: column; gap: 12px; }
.checkbox-row { display: flex; align-items: center; gap: 8px; }
@media (max-width: 767px) {
  .login-card { padding: 20px; }
  .recovery-codes { columns: 1; }
  .totp-qr { width: 160px; height: 160px; }
}

/* Cluster-wide updates (rollout.js): Settings → Updates and the Cluster view */
.rollout-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rollout-head .actions { margin: 0; }
.rollout-progress { display: flex; flex-direction: column; gap: 8px; }
.rollout-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--bg-canvas); gap: 2px; }
.rollout-seg { min-width: 4px; }
.rollout-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.rollout-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.rollout-swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.state-updated { background: var(--tone-good); }
.state-updating { background: color-mix(in srgb, var(--tone-warn) 45%, var(--bg-raised)); }
.state-waiting, .state-offline, .state-skipped { background: var(--color-neutral-350, #c9c9c9); }
.state-pinned, .state-managed { background: var(--text-tertiary); }
.state-needsAdmin, .state-unsupported { background: var(--tone-warn); }
.state-failed { background: var(--tone-bad); }
.rollout-details summary { cursor: pointer; padding: 4px 0; }
.rollout-details .table-scroll-container { margin-top: 8px; }
.rollout-command { display: block; white-space: normal; word-break: break-all; max-width: 420px; }
.rollout-line { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin: 12px 18px 0; text-decoration: none; color: inherit; padding: 8px 12px; border: 1px solid var(--border-default); border-radius: 8px; background: var(--bg-raised); max-width: calc(100% - 36px); box-sizing: border-box; }
.rollout-line:hover { border-color: var(--border-strong); }
.cluster-diagram .card-badge rect { fill: var(--bg-raised); stroke-width: 1.5; }
.cluster-diagram .card-badge text { font: 600 11px var(--font-sans, Inter, sans-serif); }
.cluster-diagram .card-badge.tone-warn rect { stroke: var(--amber-700); fill: var(--amber-50); }
.cluster-diagram .card-badge.tone-warn text { fill: var(--amber-700); }
.cluster-diagram .card-badge.tone-bad rect { stroke: var(--red-700); fill: var(--red-50); }
.cluster-diagram .card-badge.tone-bad text { fill: var(--red-700); }

/* Cluster page: no satellites yet; the add-satellite dialog (join-code.js) */
.cluster-empty { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 16px; margin: 12px 18px 0; border: 1px dashed var(--border-strong); border-radius: 10px; background: var(--bg-raised); }
.panel .cluster-empty { margin: 12px 0 0; }
.cluster-empty p { margin: 4px 0 0; max-width: 620px; }
.cluster-empty .actions { margin: 0; }
.join-kinds { display: flex; flex-direction: column; gap: 8px; }
.join-kind { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border-default); border-radius: 8px; cursor: pointer; }
.join-kind:has(input:checked) { border-color: #2a78d6; box-shadow: 0 0 0 2px color-mix(in srgb, #2a78d6 18%, transparent); }
.join-kind input { margin-top: 3px; }
.join-notes { display: flex; flex-direction: column; gap: 8px; }
.join-port443 summary { cursor: pointer; }
.modal-body h4 { margin: 8px 0 0; }
.rollout-details table { min-width: 640px; }
.join-dialog .code-block { white-space: pre-wrap; word-break: break-all; }
.cluster-empty a.button { text-decoration: none; }

/* Sidebar: who the license belongs to, under the role and version (app.js). */
.brand-text { min-width: 0; }
.brand-account { margin-top: 1px; max-width: 100%; }

/* Satellites from the hub: hub management and troubleshooting (satellites.js). */
.remote-bar.hub-bar { background: #3b4a8a; }
.cluster-diagram .server-card.clickable { cursor: pointer; }
.cluster-diagram .server-card.clickable:hover rect, .cluster-diagram .server-card.clickable:focus-visible rect { stroke-width: 2.5; }
.cluster-diagram .server-card.clickable:focus { outline: none; }
.disabled-tip { display: inline-flex; }
.disabled-tip .button[disabled] { pointer-events: none; }
.cluster-server-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.cluster-server-action { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-control); }
.cluster-server-action.trouble { border-color: var(--red-700); background: var(--red-50); }
.cluster-server-action .actions { margin: 0; }
.ts-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ts-alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: var(--radius-control); background: var(--red-50); color: var(--red-700); }
.ts-alert .icon { flex-shrink: 0; margin-top: 2px; }
.ts-actions { flex-wrap: wrap; margin: 0; }
.ts-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ts-step { border: 1px solid var(--border-default); border-radius: var(--radius-control); padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ts-step.lead { border-color: var(--red-700); box-shadow: inset 3px 0 0 var(--red-700); }
.ts-step.ok { opacity: .8; }
.ts-step p { margin: 0; }
.ts-step-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ts-step-title { flex: 1; min-width: 160px; }
.ts-step-number { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-field-on-canvas); font-size: 12px; font-weight: 600; flex-shrink: 0; }
.ts-command { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ts-command-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ts-command .code-block { white-space: pre-wrap; word-break: break-all; margin: 0; padding: 8px 10px; }
.ts-install { display: flex; flex-direction: column; gap: 6px; }
.ts-others summary { cursor: pointer; }
.ts-others[open] { display: flex; flex-direction: column; gap: 10px; }

/* Settings → Sidekick (settings-sidekick.js) */
.sidekick-alert { border: 1px solid var(--border-default); border-radius: var(--radius-control); padding: 10px 12px; background: var(--bg-field-on-canvas); color: var(--text-primary); overflow-wrap: anywhere; }
.sidekick-controls { display: flex; flex-direction: column; gap: 12px; }
.sidekick-kit { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sidekick-kit .code-block { white-space: pre-wrap; word-break: break-all; margin: 0; }
.sidekick-log { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sidekick-log-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sidekick-log-lines { list-style: none; margin: 0; padding: 8px 12px; max-height: 320px; overflow-y: auto; background: var(--bg-field-on-canvas); border-radius: var(--radius-control); display: flex; flex-direction: column; gap: 6px; }
.sidekick-log-lines li { display: grid; grid-template-columns: 150px 1fr; gap: 12px; min-width: 0; }
.sidekick-log-lines li span { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .sidekick-log-lines li { grid-template-columns: 1fr; gap: 0; }
}

/* Settings → Phones (settings-phones.js): the pairing QR code and the
   6-character match code. */
.phone-pairing { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.phone-qr-wrap { display: flex; justify-content: center; }
.phone-qr { width: 280px; max-width: 100%; height: auto; aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--border-default); background: #fff; image-rendering: pixelated; }
.phone-qr-note { text-align: center; }
.phone-countdown { font-variant-numeric: tabular-nums; }
.phone-match { display: flex; justify-content: center; gap: 8px; margin: 4px 0; }
.phone-match span { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 52px; border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--bg-field); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 26px; font-weight: 600; color: var(--text-primary); }
.phone-pairing-actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; width: 100%; }
.phones-table .actions.compact { gap: 8px; flex-wrap: nowrap; justify-content: flex-end; }
@media (max-width: 767px) {
  .phone-qr { width: 240px; }
  .phone-match { gap: 6px; }
  .phone-match span { width: 38px; height: 46px; font-size: 22px; }
}

/* Token Saver (views/token-saver.js) */
.ts-grid > .panel { grid-column: span 6; background: var(--color-neutral-0); }
.ts-tools { display: flex; flex-direction: column; gap: 10px; }
.ts-tool { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--border-default); min-width: 0; }
.ts-tool .cell-stack { min-width: 0; flex: 1; }
.ts-tool > .state-text { flex-shrink: 0; }
.ts-form { display: flex; flex-direction: column; gap: 14px; }
.ts-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.ts-warn { color: var(--amber-700); margin: 0; }
.ts-log-wrap { padding: 0 18px 32px; }
.ts-log { background: var(--color-neutral-0); }
.ts-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.ts-filters .input { width: auto; min-width: 130px; max-width: 200px; }
.ts-banner { margin-bottom: 0; }
.ts-modal { display: flex; flex-direction: column; gap: 12px; }
.ts-kill .actions { justify-content: flex-start; }
/* Token Saver's dry run and its report (token-saver-report.js). */
.ts-dryrun .actions { justify-content: flex-start; }
.ts-dryrun-fields { display: flex; flex-direction: column; gap: 12px; }
.ts-dryrun-fields[hidden] { display: none; }
.ts-report { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ts-report-title { margin: 8px 0 12px; }
.ts-segment { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--border-default); min-width: 0; }
.ts-reasons { margin: 0; padding-left: 18px; }
.ts-side { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 0; }
.ts-pane { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ts-code { margin: 0; max-height: 360px; overflow: auto; white-space: pre-wrap; word-break: break-word; font-size: 12px; }
.ts-diff { margin: 0; max-height: 420px; overflow: auto; font-size: 12px; padding: 6px 0; }
.ts-diff-line { white-space: pre-wrap; word-break: break-word; padding: 0 10px; }
.ts-del { background: var(--red-50); color: var(--red-700); }
.ts-add { background: var(--green-50); color: var(--green-700); }
.ts-collapsed { font-style: italic; opacity: .75; }
.ts-mark { background: var(--amber-50); color: var(--amber-700); padding: 0 2px; }
.ts-details summary { cursor: pointer; }
.ts-details[open] { display: flex; flex-direction: column; gap: 6px; }
.ts-skips ul { margin: 6px 0 0; padding-left: 18px; }
@media (max-width: 1279px) { .ts-grid > .panel { grid-column: span 12; } }
@media (max-width: 767px) {
  .ts-filters .input { flex: 1 1 140px; max-width: none; }
  .ts-log-wrap { padding: 0 12px 24px; }
  .ts-form .field-row { grid-template-columns: 1fr; }
  .ts-side { grid-template-columns: 1fr; }
}

/* Client settings editor: tools with logos and the "Review and apply"
   summary (client-settings.js); the rows are under Control plane §6. */
.modal.modal-wide { width: min(760px, calc(100vw - 32px)); }
.cs-flow { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cs-intro { display: flex; flex-direction: column; gap: 6px; }
.cs-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cs-editor { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.cs-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; min-width: 0; }
.cs-info { width: 24px; height: 24px; border-radius: 50%; color: var(--icon-muted); }
.cs-info:hover, .cs-info[aria-expanded="true"] { color: var(--icon-strong); background: var(--bg-field-on-canvas); }
.cs-info .icon { width: 16px; height: 16px; }
.cs-badges { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.cs-does { line-height: 1.45; overflow-wrap: anywhere; }
.cs-now { line-height: 1.45; overflow-wrap: anywhere; }
.cs-now strong { font-weight: 600; }
.cs-error { display: flex; flex-direction: column; gap: 4px; }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; min-width: 0; }
.tool-card { display: flex; align-items: flex-start; gap: 10px; padding: 10px; border-radius: var(--radius-control); background: var(--bg-field-on-canvas); min-width: 0; }
.tool-card .brand-logo { margin-top: 2px; }
.tool-card .switch { margin-top: 2px; margin-left: auto; }
.tool-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; }
.tool-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.tool-chip { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--radius-pill); background: var(--bg-field); color: var(--text-secondary); white-space: nowrap; }
.tool-chip.tone-good { background: color-mix(in srgb, var(--tone-good) 14%, transparent); color: var(--tone-good); }
.tool-chip.tone-warn { background: color-mix(in srgb, var(--tone-warn) 14%, transparent); color: var(--tone-warn); }
.tool-chip.tone-bad { background: color-mix(in srgb, var(--tone-bad) 12%, transparent); color: var(--tone-bad); }
.review { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.review-summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.review-item { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border-default); border-radius: var(--radius-control); min-width: 0; }
.review-values { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.review-from, .review-to { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; overflow-wrap: anywhere; }
.review-from > span:first-child { text-decoration: line-through; text-decoration-color: var(--text-tertiary); }
.review-arrow { color: var(--text-tertiary); }
.review-consequences { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; color: var(--text-secondary); overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .tool-grid { grid-template-columns: 1fr; }
}

/* Delete records (Activity, activity-delete.js). */
.delete-preview { display: flex; flex-direction: column; gap: 12px; }
.delete-preview:empty { display: none; }
.delete-preview p { margin: 0; }
.delete-error { color: var(--red-700); }
.delete-breakdowns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.delete-breakdown-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.delete-breakdown { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.delete-breakdown li { display: flex; justify-content: space-between; gap: 8px; min-width: 0; }
@media (max-width: 767px) {
  .delete-breakdowns { grid-template-columns: 1fr; }
}
/* The MCP gateway (views/mcp-gateway.js). */
.mcpgw-body { display: flex; flex-direction: column; gap: 16px; padding: 0 18px 24px; min-width: 0; }
.mcpgw-body > .table-scroll-container, .mcpgw-body > .toolbar { margin: 0 -18px; }
.mcpgw-foot, .mcpgw-lead { margin: 0; }
.mcpgw-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mcpgw-panel-head h3 { margin: 0; }
.mcpgw-access { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.mcpgw-overrides { display: flex; flex-direction: column; gap: 12px; }
.mcpgw-override { padding: 14px; gap: 12px; }
.mcpgw-override-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mcpgw-override-head select { flex: 1; min-width: 0; }
.mcpgw-tool-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mcpgw-tool-list li { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.mcpgw-oauth { display: flex; flex-direction: column; gap: 8px; }
.mcpgw-catalog { display: flex; flex-direction: column; gap: 8px; }
.mcpgw-catalog .integration-grid { padding: 0; }
.mcpgw-section-title { margin: 8px 0 0; }
.mcpgw-badges { flex-wrap: wrap; gap: 6px; }
.mcpgw-catalog-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-width: 0; }
.mcpgw-catalog-filters .search-field { flex: 1 1 220px; min-width: 0; max-width: 360px; }
.mcpgw-catalog-filters select { width: auto; min-width: 0; max-width: 100%; }
.mcpgw-catalog-results { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mcpgw-community { flex-direction: row; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--amber-50); border-color: transparent; min-width: 0; }
.mcpgw-community > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mcpgw-community p { margin: 0; }
.mcpgw-community > .icon { color: var(--amber-700); flex: none; }
.mcpgw-community-switch { max-width: 560px; }
.mcpgw-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.mcpgw-empty p { margin: 0; }
.mcpgw-requests { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mcpgw-requests > .table-scroll-container { margin: 0 -18px; }
.mcpgw-add { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mcpgw-notes { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.mcpgw-modal { max-width: 560px; }
.mcpgw-effective { display: flex; flex-direction: column; gap: 10px; }
.mcpgw-eff-server { padding: 14px 16px; gap: 10px; }
.mcpgw-eff-server summary { cursor: pointer; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mcpgw-note { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--tone-warn); }
.mcpgw-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.mcpgw-suggestion { padding: 14px 16px; gap: 10px; }
.mcpgw-suggestion p { margin: 0; }
/* The rule editor: what to match, suggested tools, chips, the preview. */
.mcpgw-kind { align-self: flex-start; max-width: 100%; flex-wrap: wrap; height: auto; }
.mcpgw-hint { flex-direction: row; align-items: flex-start; gap: 10px; padding: 12px 14px; background: var(--amber-50); border-color: transparent; }
.mcpgw-hint > .icon { color: var(--amber-700); flex: none; margin-top: 2px; }
.mcpgw-hint > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mcpgw-hint p { margin: 0; }
.mcpgw-tool-note { color: var(--text-tertiary); }
.mcpgw-preview { background: var(--bg-field-on-canvas); border-color: transparent; gap: 8px; }
.mcpgw-preview h3 { margin: 0; }
.mcpgw-preview-text { display: flex; flex-direction: column; gap: 6px; overflow-wrap: anywhere; }
.mcpgw-preview-text p { margin: 0; }
.suggest-wrap { position: relative; min-width: 0; }
.suggest-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; max-height: 240px; overflow-y: auto; background: var(--color-neutral-0); border: 1px solid var(--border-default); border-radius: var(--radius-control); box-shadow: var(--shadow-raised); }
.suggest-list[hidden] { display: none; }
.suggest-item { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 10px; border-radius: 6px; cursor: pointer; min-width: 0; }
.suggest-item.active, .suggest-item:hover { background: var(--bg-field-on-canvas); }
.suggest-item.disabled { cursor: default; color: var(--text-tertiary); background: none; }
.suggest-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.suggest-item.disabled .suggest-value { color: var(--text-tertiary); }
.suggest-detail { flex: none; color: var(--text-tertiary); }
.suggest-detail.tone-warn { color: var(--tone-warn); }
.chip-picker { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 38px; padding: 4px 8px; border-radius: var(--radius-control); background: var(--bg-field-on-canvas); cursor: text; min-width: 0; }
.chip-picker:focus-within { box-shadow: inset 0 0 0 1.5px var(--text-primary); }
.chip-picker-chips { display: contents; }
.chip-picker-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 8px; border-radius: var(--radius-chip); background: var(--color-neutral-0); border: 1px solid var(--border-default); color: var(--text-primary); max-width: 100%; }
.chip-picker-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-picker-remove { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 0; padding: 0; border-radius: 50%; background: transparent; color: var(--text-secondary); cursor: pointer; flex: none; }
.chip-picker-remove:hover { background: var(--bg-field-on-canvas); color: var(--text-primary); }
.chip-picker-remove .icon { width: 14px; height: 14px; }
.chip-picker-input { flex: 1 1 120px; min-width: 80px; height: 30px; border: 0; background: transparent; color: var(--text-primary); padding: 0 4px; outline: none; }
.chip-picker-input::placeholder { color: var(--text-tertiary); }
/* Models allow-lists (model-picker.js modelMultiPicker) */
.mm { display: flex; flex-direction: column; gap: 8px; min-width: 0; max-width: 760px; }
.mm-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; min-width: 0; }
.mm-chips { flex: 1 1 260px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 38px; padding: 4px 8px; border-radius: var(--radius-control); background: var(--bg-field-on-canvas); min-width: 0; }
.mm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 6px; border-radius: var(--radius-chip); background: var(--color-neutral-0); border: 1px solid var(--border-default); color: var(--text-primary); max-width: 100%; }
.mm-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-chip > .icon { width: 14px; height: 14px; color: var(--text-secondary); flex: none; }
.mm-tag { font-size: 11px; color: var(--text-tertiary); }
.mm-empty { padding: 0 4px; }
.mm-panel { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--border-default); border-radius: 12px; background: var(--bg-canvas); min-width: 0; }
.mm-panel[hidden] { display: none; }
.mm-providers { display: flex; flex-wrap: wrap; gap: 6px; }
.mm-provider { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 6px; border: 1px solid var(--border-default); border-radius: 9999px; background: var(--color-neutral-0); color: var(--text-primary); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.mm-provider .icon { width: 16px; height: 16px; color: var(--text-secondary); }
.mm-provider[aria-pressed="true"] { border-color: var(--teal-700); background: var(--teal-50); }
.mm-status { margin: 0; }
.mm-list { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mm-all { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px dashed var(--border-strong); border-radius: 10px; cursor: pointer; }
.mm-all-text { display: flex; flex-direction: column; min-width: 0; }
.mm-search .input { width: 100%; max-width: 320px; }
.mm-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 2px 12px; max-height: 280px; overflow-y: auto; min-width: 0; }
.mm-row { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 2px; cursor: pointer; }
.mm-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-id { flex: 0 1 auto; }
.mm-name, .mm-price { flex: 1 1 0; min-width: 0; }
.mm-price { text-align: right; }
.mm-other { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border-default); }
.mm-other .input { flex: 1 1 240px; min-width: 0; }
.mm-field { min-width: 0; }
/* The developer's Register form (app-form.js), in the modal and in the
   builder's preview. */
.appf { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.appf h4 { margin: 8px 0 0; }
.appf-custom, .appf-choices { display: flex; flex-direction: column; gap: 12px; }
.appf-choices { gap: 6px; }
.appf-q[hidden] { display: none; }
fieldset.appf-q { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
/* ---- Tags (tag-picker.js, views/tags.js) ----------------------------------
   A tag's colour is one of a fixed palette of tag tokens, never a status
   colour. Each pair passes 4.5:1, in both themes (the dark values are in the
   Dark mode block at the top). */
:root {
  --tag-slate-bg: #eef1f5; --tag-slate-fg: #3c4657;
  --tag-blue-bg: #e3edfc; --tag-blue-fg: #1f4f9c;
  --tag-indigo-bg: #e8e8fd; --tag-indigo-fg: #3c3aa8;
  --tag-violet-bg: #f0e8fd; --tag-violet-fg: #5d2fa8;
  --tag-pink-bg: #fce7f1; --tag-pink-fg: #9c1f5c;
  --tag-teal-bg: #e0f3f0; --tag-teal-fg: #11615a;
  --tag-cyan-bg: #e0f2f7; --tag-cyan-fg: #0d5c72;
  --tag-sand-bg: #f6efdf; --tag-sand-fg: #6b5320;
  --tag-brown-bg: #f3e9e2; --tag-brown-fg: #6e4429;
  --tag-olive-bg: #eef0dc; --tag-olive-fg: #535b1b;
}
[data-color="slate"] { --tag-bg: var(--tag-slate-bg); --tag-fg: var(--tag-slate-fg); }
[data-color="blue"] { --tag-bg: var(--tag-blue-bg); --tag-fg: var(--tag-blue-fg); }
[data-color="indigo"] { --tag-bg: var(--tag-indigo-bg); --tag-fg: var(--tag-indigo-fg); }
[data-color="violet"] { --tag-bg: var(--tag-violet-bg); --tag-fg: var(--tag-violet-fg); }
[data-color="pink"] { --tag-bg: var(--tag-pink-bg); --tag-fg: var(--tag-pink-fg); }
[data-color="teal"] { --tag-bg: var(--tag-teal-bg); --tag-fg: var(--tag-teal-fg); }
[data-color="cyan"] { --tag-bg: var(--tag-cyan-bg); --tag-fg: var(--tag-cyan-fg); }
[data-color="sand"] { --tag-bg: var(--tag-sand-bg); --tag-fg: var(--tag-sand-fg); }
[data-color="brown"] { --tag-bg: var(--tag-brown-bg); --tag-fg: var(--tag-brown-fg); }
[data-color="olive"] { --tag-bg: var(--tag-olive-bg); --tag-fg: var(--tag-olive-fg); }
.tag-chips { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.tag-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; height: 22px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--tag-bg, var(--tag-slate-bg)); color: var(--tag-fg, var(--tag-slate-fg)); white-space: nowrap; }
.tag-chip-label { overflow: hidden; text-overflow: ellipsis; }
.tag-chip.inherited { background: transparent; box-shadow: inset 0 0 0 1px var(--tag-bg, var(--tag-slate-bg)); }
.tag-chip-from { color: var(--text-tertiary); }
.tag-chip.unknown { background: transparent; color: var(--text-secondary); box-shadow: inset 0 0 0 1px var(--border-default); }
.tag-chip-remove { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-right: -4px; border: 0; padding: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; flex: none; }
.tag-chip-remove:hover, .tag-chip-remove:focus-visible { background: color-mix(in srgb, currentColor 16%, transparent); }
.tag-chip-remove .icon { width: 12px; height: 12px; }
.tag-picker { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tag-create { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border-default); border-radius: var(--radius-control); background: var(--bg-raised); }
.tag-create[hidden] { display: none; }
.tag-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-swatch { position: relative; display: inline-flex; cursor: pointer; }
.tag-swatch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.tag-swatch-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--tag-bg); box-shadow: inset 0 0 0 6px var(--tag-bg), inset 0 0 0 11px var(--tag-fg); }
.tag-swatch input:checked + .tag-swatch-dot { outline: 2px solid var(--text-primary); outline-offset: 2px; }
.tag-swatch input:focus-visible + .tag-swatch-dot { outline: 2px solid var(--text-primary); outline-offset: 2px; }
.tag-impact { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: var(--radius-control); background: var(--bg-field); }
.tag-impact ul { margin: 0; padding-left: 18px; }
.target-picker { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.target-modes { gap: 16px; }
.target-mode { gap: 6px; cursor: pointer; }
.target-pane[hidden] { display: none; }
.mcpgw-citation { margin: 0; padding: 8px 12px; border-left: 3px solid var(--border-strong); color: var(--text-secondary); background: var(--bg-raised); border-radius: var(--radius-control); }
.mcpgw-policy-text { max-height: 60vh; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.mcpgw-checks { display: flex; flex-wrap: wrap; gap: 6px 16px; max-height: 180px; overflow-y: auto; }
.mcpgw-filters select { width: auto; max-width: 200px; }
tr.mcpgw-flagged > td:first-child { box-shadow: inset 3px 0 0 var(--tone-warn); }
@media (max-width: 767px) {
  .mcpgw-body { padding: 0 16px 20px; }
  .mcpgw-requests > .table-scroll-container { margin: 0 -16px; }
  .mcpgw-access, .mcpgw-people { grid-template-columns: 1fr; }
}

/* Attributes (attributes.js, attrs.js) */
.attributes-notes:empty { display: none; }
.attributes-notes { padding: 0 18px; display: flex; flex-direction: column; gap: 6px; }
.attr-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; align-items: center; }
.attr-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 260px; padding: 2px 8px; border: 1px solid var(--border-default); border-radius: var(--radius-chip); background: var(--bg-field-on-canvas); color: var(--text-primary); text-decoration: none; min-width: 0; }
a.attr-chip:hover { border-color: var(--border-strong); background: var(--bg-field); }
.attr-chip.redacted, .attr-value.redacted, .redacted { color: var(--text-tertiary); font-style: italic; }
.attr-chip-count { color: var(--text-tertiary); flex-shrink: 0; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0 18px 12px; }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-ink); max-width: 100%; overflow-wrap: anywhere; }
.filter-chip-x { border: 0; background: none; color: inherit; cursor: pointer; font-size: 16px; line-height: 1; padding: 0 4px; border-radius: 4px; }
.filter-chip-x:hover { background: var(--bg-hover); }
.attr-breakdown { display: flex; flex-direction: column; gap: 16px; }
.attr-panel { display: flex; flex-direction: column; gap: 8px; }
.attr-search-row { display: flex; gap: 12px; align-items: center; }
.attr-search { flex: 1; min-width: 0; }
.attr-list { display: flex; flex-direction: column; border: 1px solid var(--border-default); border-radius: var(--radius-control); max-height: 420px; overflow-y: auto; }
.attr-row { display: grid; grid-template-columns: minmax(120px, 38%) 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; border-top: 1px solid var(--border-default); min-width: 0; }
.attr-row:first-child { border-top: 0; }
.attr-key { color: var(--text-secondary); overflow-wrap: anywhere; display: flex; flex-direction: column; gap: 2px; }
.attr-source { color: var(--text-tertiary); font-family: inherit; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.attr-value { color: var(--text-primary); overflow-wrap: anywhere; white-space: pre-wrap; }
.attr-actions { display: flex; gap: 2px; }
.raw-attributes summary { cursor: pointer; padding: 4px 0; }

/* People (people.js) */
.people-body { padding: 0 0 32px; display: flex; flex-direction: column; gap: 16px; }
.people-body > p { margin: 0 18px; }
.people-others { margin: 0 18px; }
.person-avatar { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.person-avatar.large { width: 44px; height: 44px; font-size: 16px; }
.person-head { display: flex; align-items: center; gap: 14px; padding: 24px 18px 12px; flex-wrap: wrap; min-width: 0; }
.person-head .actions { gap: 8px; }
.person-section { margin: 0 18px; }
.person-notes { margin: 0 18px; white-space: pre-wrap; }
.person-charts { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; padding: 0 18px; }
.suggestion-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; padding: 0 18px; }
.suggestion-card { border: 1px solid var(--border-default); border-radius: var(--radius-surface); padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.suggestion-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.suggestion-ids { display: flex; flex-direction: column; gap: 4px; }
.suggestion-id { display: grid; grid-template-columns: minmax(100px, auto) 1fr auto; gap: 8px; align-items: baseline; min-width: 0; }
.suggestion-card .actions { gap: 8px; align-items: center; }
.suggestion-card .actions select { width: auto; min-width: 120px; flex: 1; }
@media (max-width: 900px) {
  .person-charts .chart-card { grid-column: span 12; }
}
@media (max-width: 767px) {
  .attr-row { grid-template-columns: 1fr auto; }
  .attr-row .attr-value { grid-column: 1 / -1; grid-row: 2; }
  .suggestion-list { grid-template-columns: 1fr; }
}

/* Debug mode (god licenses, debug.js): the header switch, and the footer
   network panel, like a browser's Network tab. */
.debug-switch { height: 30px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; margin-right: 16px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--bg-canvas); color: var(--text-secondary); cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.debug-switch:hover { color: var(--text-primary); }
.debug-switch.on { background: var(--bg-primary); border-color: var(--bg-primary); color: #fff; box-shadow: 0 0 0 3px var(--accent-soft); }
.debug-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body.debug-open main { padding-bottom: var(--debug-height, 280px); }
.debug-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--bg-canvas); border-top: 2px solid var(--accent); box-shadow: var(--shadow-floating); display: flex; flex-direction: column; min-height: 120px; }
.debug-resize { position: absolute; top: -5px; left: 0; right: 0; height: 9px; cursor: ns-resize; }
.debug-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border-default); flex-wrap: wrap; }
.debug-badge { padding: 2px 8px; border-radius: 999px; background: var(--bg-primary); color: #fff; }
.debug-toolbar .debug-search { width: 220px; height: 30px; }
.debug-toolbar .debug-select { width: auto; height: 30px; }
.debug-small.button { height: 30px; padding: 0 10px; }
.debug-check { display: inline-flex; align-items: center; gap: 4px; color: var(--text-secondary); white-space: nowrap; }
.debug-body { flex: 1; display: flex; min-height: 0; }
.debug-list { flex: 1; overflow: auto; min-width: 0; }
.debug-table { width: 100%; border-collapse: collapse; }
.debug-table th { position: sticky; top: 0; background: var(--bg-sidebar); text-align: left; font-weight: 500; color: var(--text-secondary); padding: 4px 8px; border-bottom: 1px solid var(--border-default); white-space: nowrap; }
.debug-table td { padding: 3px 8px; border-bottom: 1px solid var(--color-neutral-100); white-space: nowrap; }
.debug-table tr { cursor: pointer; }
.debug-table tbody tr:hover { background: var(--bg-sidebar); }
.debug-table tr.selected { background: var(--accent-soft); }
.debug-table tr.bad td { color: var(--red-700); }
.debug-path { max-width: 520px; overflow: hidden; text-overflow: ellipsis; }
.debug-caller { max-width: 240px; overflow: hidden; text-overflow: ellipsis; color: var(--text-secondary); }
.debug-detail { width: min(440px, 45vw); border-left: 1px solid var(--border-default); overflow: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 12px; }
.debug-detail-head { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.debug-kv { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: 4px 10px; margin: 0; }
.debug-kv dd { margin: 0; word-break: break-all; }
.debug-headers { display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 767px) {
  .debug-switch { margin-right: 8px; }
  .debug-detail { width: 100%; position: absolute; inset: 0; background: var(--bg-canvas); }
  .debug-body { position: relative; }
  .debug-toolbar .debug-search { width: 100%; }
}
/* Routing: a provider's models as a searchable list, and suggested Jev
   candidates (routing.js). */
.model-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.model-list-status:empty { display: none; }
.model-suggestions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.model-suggestions:empty { display: none; }
.suggest-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--border-default); border-radius: var(--radius-pill); background: var(--bg-canvas); color: var(--text-primary); cursor: pointer; min-width: 0; max-width: 100%; }
.suggest-chip:hover { border-color: var(--accent); }
.suggest-chip .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-chip .icon { width: 14px; height: 14px; flex-shrink: 0; }
.suggest-kind { color: var(--text-secondary); }

/* TLS inspection (settings-tls.js) */
.cert-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border-default); min-width: 0; flex-wrap: wrap; }
.cert-row > .min-w-0 { flex: 1 1 260px; }
.cert-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.tls-sightings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tls-check { overflow-x: auto; }
.tls-add { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.pem-input { display: flex; flex-direction: column; gap: 8px; }
.pem-input textarea { width: 100%; min-width: 0; resize: vertical; }

/* Four fields on one row on a wide panel (Routing → Default budget). */
.field-row.field-row-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: start; }

/* A page in beta: its menu item and title carry the tag (app.js betaTag). */
.beta-tag { color: var(--status-warning); border-color: color-mix(in srgb, var(--status-warning) 45%, var(--border-default)); }

/* Project memory: Boxes | List of projects, and sortable table headers */
.th-sort { border: 0; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; max-width: 100%; border-radius: 6px; }
.th-sort > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-sort:hover, .th-sort.active { color: var(--text-primary); }
.th-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.th-sort-icon { width: 14px; height: 14px; flex-shrink: 0; opacity: .35; }
.th-sort:hover .th-sort-icon, .th-sort.active .th-sort-icon { opacity: 1; }
.memory-list { min-width: 0; }
.memory-boxes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
@media (min-width: 700px) { .memory-boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .memory-boxes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1440px) { .memory-boxes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.memory-box { border: 1px solid var(--border-default); border-radius: var(--radius-surface); background: var(--bg-canvas); padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; cursor: pointer; transition: background-color 120ms ease-out; }
.memory-box:hover { background: var(--bg-sidebar); }
.memory-box:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.memory-box-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.memory-box-head .cell-stack { flex: 1; padding-right: 0; }
.memory-box-head .icon-button { width: 32px; height: 32px; border-radius: var(--radius-control); color: var(--icon-muted); flex-shrink: 0; }
.memory-box-head .icon-button:hover { background: var(--bg-field-on-canvas); color: var(--icon-strong); }
.memory-mark { display: inline-grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; background: var(--bg-field-on-canvas); color: var(--icon-default); }
.memory-list .memory-mark { width: 20px; height: 20px; border-radius: 6px; }
.memory-mark .icon { width: 16px; height: 16px; }
.memory-list .memory-mark .icon { width: 13px; height: 13px; }
.memory-box-state { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.memory-box-state > span:last-child { overflow-wrap: anywhere; }
.memory-box-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 8px; margin: 0; padding: 10px 0; border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); }
.memory-box-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.memory-box-stat dt, .memory-box-stat dd { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.memory-box-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.memory-box-actions .button { min-width: 0; }
.memory-box-seen { margin-left: auto; white-space: nowrap; }

/* Suggestions panel (suggestions.js): groups by category, critical first */
.suggestions-panel { display: flex; flex-direction: column; gap: 18px; }
.suggestion-group { display: flex; flex-direction: column; gap: 8px; }
.suggestion-group h3 { margin: 0; }
.suggestion-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.suggestion-item { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--border-default); border-left: 3px solid var(--status-warning); border-radius: 12px; background: var(--bg-canvas); min-width: 0; }
.suggestion-item.level-critical { border-left-color: var(--status-critical); }
.suggestion-item.dismissed { border-left-color: var(--border-default); }
.suggestion-item p { margin: 0; }
.suggestion-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.suggestion-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.suggestion-actions:empty { display: none; }
.suggestions-clear { display: flex; flex-direction: column; gap: 6px; }
.suggestion-dismissed summary { cursor: pointer; }
.suggestion-dismissed .suggestion-list { margin-top: 10px; }

/* Process inventory (client-processes.js, views/processes.js). */
.proc-grid { padding: 0 0 8px; }
.proc-title { margin: 20px 0 8px; }
.cs-ack { display: flex; align-items: flex-start; gap: 8px; color: var(--text-secondary, inherit); line-height: 1.45; }
.cs-ack input { margin-top: 2px; flex-shrink: 0; }

/* AI enablement report (views/enablement.js): the Analytics page's layout,
   a summary leadership reads first, the cohort grid, and a print layout
   (browser print or Save as PDF) without the menu and controls. */
.en-summary { margin: 14px 18px 0; padding: 16px 18px; border: 1px solid var(--border-default); border-radius: var(--radius-surface); background: var(--bg-canvas); display: flex; flex-direction: column; gap: 10px; }
.en-summary-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.en-summary-head h2 { margin: 0; font-size: 16px; }
.en-sentences { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; color: var(--text-secondary); }
.en-note { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--text-tertiary); }
.en-note .icon { width: 14px; height: 14px; }
.en-depth .an-kpis { margin: 0 0 16px; }
.en-cohorts td.en-cell { background: color-mix(in srgb, var(--series-1) var(--share, 0%), transparent); font-variant-numeric: tabular-nums; text-align: right; }
.en-cohorts td.en-cell-empty { background: transparent; }
.en-people td { white-space: nowrap; }
.en-footnote { padding: 18px 18px 28px; margin: 0; color: var(--text-tertiary); }
@media (max-width: 767px) {
  .en-summary { margin-left: 16px; margin-right: 16px; }
  .en-footnote { padding-left: 16px; padding-right: 16px; }
}
@media print {
  body:has(.en-page) #sidebar, body:has(.en-page) .page-header, body:has(.en-page) .banner, body:has(.en-page) .plan-footer,
  body:has(.en-page) .en-controls, body:has(.en-page) .chart-actions, body:has(.en-page) .help-dot { display: none !important; }
  body:has(.en-page) { background: #fff; }
  body:has(.en-page) .shell, body:has(.en-page) main { display: block; min-height: 0; }
  .en-page .an-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .en-page .an-grid { display: block; }
  .en-page .chart-card { break-inside: avoid; page-break-inside: avoid; margin-bottom: 12px; }
  .en-page .en-summary, .en-page .an-kpis { break-inside: avoid; }
}

/* Skills (beta) (views/skills.js). */
.skill-editor { width: 100%; min-height: 320px; resize: vertical; font-size: 13px; line-height: 1.5; white-space: pre; }
.skill-preview { max-height: 420px; overflow: auto; white-space: pre-wrap; word-break: break-word; margin: 0; }
.skill-files { margin: 4px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }
.skill-groups { display: flex; flex-direction: column; gap: 20px; }
.skill-group-head { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; }
.toolbar select.skill-category-filter { width: auto; min-width: 170px; height: 38px; }

/* Change management (views/changes.js): filters, the evidence block an
   export adds (period and SHA-256), and a print layout without the menu. */
.cm-controls .toolbar-left { flex-wrap: wrap; gap: 8px; }
.cm-check { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cm-checks { display: flex; flex-wrap: wrap; gap: 6px 14px; max-height: 160px; overflow-y: auto; }
.form-stack { display: flex; flex-direction: column; gap: 12px; min-width: min(520px, 100%); }
.cm-evidence:empty { display: none; }
.cm-evidence { margin: 12px 18px; padding: 12px 16px; border: 1px solid var(--border-default); border-radius: 8px; }
.cm-evidence .mono { word-break: break-all; }
@media (max-width: 767px) {
  .cm-evidence { margin-left: 16px; margin-right: 16px; }
}
@media print {
  body:has(.cm-page) #sidebar, body:has(.cm-page) .page-header, body:has(.cm-page) .banner, body:has(.cm-page) .plan-footer,
  body:has(.cm-page) .tabs, body:has(.cm-page) .cm-controls, body:has(.cm-page) .cell-actions, body:has(.cm-page) .cell-select { display: none !important; }
  body:has(.cm-page) { background: #fff; }
  body:has(.cm-page) .shell, body:has(.cm-page) main { display: block; min-height: 0; }
  .cm-page .cm-evidence { break-inside: avoid; }
  .cm-page table.data { width: 100% !important; }
}

/* Settings → Updates: the status beside the release notes (release-notes.js). */
.update-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 18px; align-items: start; }
.update-status, .release-notes { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.release-update, .release-current { border: 1px solid var(--border-default); border-radius: var(--radius-surface); padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.release-update.critical { border-color: var(--tone-bad); }
.release-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.release-head h4 { margin: 0; font-size: 15px; flex: 1 1 auto; color: var(--text-primary); }
.release-version summary, .release-current summary { cursor: pointer; padding: 2px 0; }
.release-summary { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.release-body { display: flex; flex-direction: column; gap: 6px; padding: 6px 0 2px; max-height: 360px; overflow: auto; overflow-wrap: anywhere; }
.release-body .code-block { white-space: pre-wrap; }
@media (max-width: 900px) {
  .update-layout { grid-template-columns: minmax(0, 1fr); }
}
/* Installing an update: the button, then its progress (update-progress.js). */
.update-progress { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 0; }
.update-progress-status { display: flex; flex-direction: column; gap: 2px; min-width: min(260px, 100%); }
.update-progress-status .meter { margin-top: 2px; }
.update-progress .code-block { align-self: stretch; }
.release-head .update-progress, .update-status .update-progress { align-items: flex-start; }

/* Destinations: signal chips, the type picker in the dialog, and the "Add a destination" gallery (views/destinations.js). */
.signal-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.type-picker { position: relative; }
.type-picker-trigger { display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer; font: inherit; }
.type-picker-trigger:disabled { cursor: default; opacity: 1; color: var(--text-secondary); }
.type-picker-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.type-picker-trigger > .icon { width: 16px; height: 16px; margin-left: auto; color: var(--icon-muted); flex-shrink: 0; }
.type-picker-value { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.type-picker-value .signal-chips { flex-wrap: nowrap; margin-left: auto; }
.type-picker-panel { border: 1px solid var(--border-default); border-radius: var(--radius-control); background: var(--bg-raised); box-shadow: var(--shadow-raised); padding: 6px; display: flex; flex-direction: column; gap: 6px; }
.type-picker-panel[hidden] { display: none; }
.type-picker-list { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.type-picker-option { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; min-width: 0; }
.type-picker-option.active { background: var(--bg-sidebar); box-shadow: inset 0 0 0 1px var(--border-strong); }
.type-picker-option[aria-selected="true"] .text-body-medium { font-weight: 600; }
.type-picker-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.type-picker-text .text-body-small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.type-picker-option .signal-chips { justify-content: flex-end; flex-shrink: 0; max-width: 45%; }
.type-picker-check { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }
.type-picker-empty { margin: 0; padding: 8px 10px; }
@media (max-width: 520px) { .type-picker-option .signal-chips, .type-picker-value .signal-chips { display: none; } }
.destination-gallery { display: flex; flex-direction: column; gap: 16px; padding: 32px 18px 24px; min-width: 0; border-top: 1px solid var(--border-default); margin-top: 8px; }
.destination-gallery h2, .destination-gallery h3 { margin: 0; }
.destination-gallery-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; min-width: 0; }
.destination-gallery-filters { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.destination-gallery-filters .search-field { width: 240px; max-width: 100%; }
.destination-gallery-results { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.destination-gallery-group { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.destination-gallery .destination-grid { padding: 0; }
.destination-card { gap: 10px; }
.destination-card .integration-card-tags { margin-top: auto; gap: 6px; }
.destination-plan-note { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: var(--radius-control); background: var(--amber-50); color: var(--amber-700); }
.destination-plan-note .icon { width: 16px; height: 16px; flex-shrink: 0; }
@media (max-width: 767px) {
  .destination-gallery { padding: 24px 16px; }
  .destination-gallery-filters, .destination-gallery-filters .search-field { width: 100%; }
  .destination-gallery-filters .segmented { width: 100%; }
  .destination-gallery-filters .segmented button { flex: 1; padding: 0 6px; }
}

/* Placeholder rows while a list's first answer is on its way. */
.skeleton-list { display: flex; flex-direction: column; }
.skeleton-row { display: grid; grid-template-columns: 2fr 1.4fr 1fr; gap: 24px; align-items: center; height: 61px; padding: 0 20px; border-bottom: 1px solid var(--border-default); }
.skeleton-row i { display: block; height: 10px; border-radius: var(--radius-pill); background: var(--border-default); animation: skeleton-pulse 1.4s ease-in-out infinite; }
.skeleton-row i:nth-child(2) { width: 70%; }
.skeleton-row i:nth-child(3) { width: 45%; }
@keyframes skeleton-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .skeleton-row i { animation: none; } }
.an-loading { padding: 24px 20px; }

/* Notices shown to the person (client settings editor), and the headless
   client's "Managed by your organization" page (headless.go). */
.cs-notices { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin-top: 8px; min-width: 0; }
.cs-notice { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: start; padding: 8px 10px; border: 1px solid var(--border-default); border-radius: 8px; min-width: 0; }
.cs-notice small { grid-column: 2; }
.cs-notice.locked { opacity: 0.75; }
.headless-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg-canvas); }
.headless-page { flex: 1; display: flex; justify-content: center; padding: 48px 16px; }
.headless-card { width: 100%; max-width: 560px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.headless-notice { padding: 12px 14px; border: 1px solid var(--border-default); border-radius: 10px; display: flex; flex-direction: column; gap: 8px; }
.headless-card p, .headless-card h1 { margin: 0; }
.headless-card a.button { text-decoration: none; align-self: flex-start; }

/* The assistant's settings proposals (assistant-proposals.js): a card with
   the diff and Apply / Dismiss, on the Assistant page and in Spander's
   "Assistant" tab (companion.js). */
.proposal-card { border: 1px solid var(--border-default); border-radius: 12px; background: var(--bg-canvas); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.proposal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.proposal-status.tone-good { color: var(--status-good); }
.proposal-status.tone-warn { color: var(--text-secondary); font-weight: 600; }
.proposal-status.tone-muted { color: var(--text-tertiary); }
.proposal-summary { margin: 0; }
.proposal-diff { overflow-x: auto; max-height: 280px; overflow-y: auto; }
.proposal-diff table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.proposal-diff th { text-align: left; font-weight: 600; color: var(--text-secondary); padding: 4px 8px; border-bottom: 1px solid var(--border-default); }
.proposal-diff td { padding: 4px 8px; vertical-align: top; border-bottom: 1px solid var(--border-default); overflow-wrap: anywhere; }
.proposal-diff td.proposal-path { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text-secondary); white-space: nowrap; overflow-wrap: normal; }
.proposal-diff del { color: var(--red-700); text-decoration: line-through; }
.proposal-diff ins { color: var(--status-good); text-decoration: none; font-weight: 600; }
.proposal-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Spander's "Assistant" tab, slotted into the helper's panel. */
.companion-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; font-family: Inter, ui-sans-serif, sans-serif; color: var(--text-primary); }
.companion-chat-note { padding: 18px 19px; margin: 0; }
.companion-chat-note a { color: var(--accent-ink); }
.companion-chat-thread { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.companion-chat-message { display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.5; }
.companion-chat-message.user { align-self: flex-end; max-width: 90%; background: var(--bg-primary); color: var(--text-on-primary); padding: 8px 12px; border-radius: 12px 12px 4px 12px; white-space: pre-wrap; }
.companion-chat-message .proposal-diff { max-height: 200px; }
.companion-chat-composer { border-top: 1px solid var(--border-default); padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 8px; }
textarea.companion-chat-input { min-height: 44px; max-height: 140px; resize: vertical; }
.companion-chat-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Settings → Model prices: filters, provider cell and category chips. */
.price-filters { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.price-count-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 8px 0; }
.price-provider { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.price-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.price-chip { padding: 1px 8px; border-radius: var(--radius-pill); background: var(--bg-field-on-canvas); color: var(--text-secondary); white-space: nowrap; }
@media (max-width: 640px) { .price-filters { grid-template-columns: 1fr; } }
/* Settings → AI models (settings-ai-models.js). */
.ai-models-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ai-features { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.ai-feature { border: 1px solid var(--border-default); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ai-model-table { overflow: auto; max-height: 420px; }
.ai-model-table:empty { display: none; }
table.ai-models { width: 100%; border-collapse: collapse; }
table.ai-models th, table.ai-models td { padding: 6px 8px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border-default); }
table.ai-models thead th { position: sticky; top: 0; background: var(--color-neutral-0); color: var(--text-secondary); font-weight: 400; }
table.ai-models td .mono { overflow-wrap: anywhere; }
/* The model picker (model-picker.js): radio cards, Other model…, Compare. */
.tabular { font-variant-numeric: tabular-nums; }
.model-picker { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.model-current { margin: 0; overflow-wrap: anywhere; }
.model-choices { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.model-choice { border: 1px solid var(--border-default); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; cursor: pointer; background: var(--color-neutral-0); }
.model-choice:hover { border-color: var(--border-strong); }
.model-choice:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.model-choice:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.model-choice input[type="radio"] { margin: 0; flex-shrink: 0; accent-color: var(--accent); width: 16px; height: 16px; }
.model-choice input[type="radio"]:focus-visible { outline: none; }
.model-choice-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.model-choice-head .status-badge { height: 20px; }
.model-choice-id { overflow-wrap: anywhere; }
.model-choice-body { display: flex; flex-direction: column; gap: 2px; }
.model-choice-other { justify-content: center; }
.model-other { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px dashed var(--border-strong); border-radius: 10px; min-width: 0; }
.model-other[hidden], .model-compare[hidden] { display: none; }
.model-other-table { overflow: auto; max-height: 320px; }
.model-pick { background: none; border: 0; padding: 2px 0; color: var(--text-primary); cursor: pointer; text-align: left; overflow-wrap: anywhere; font: inherit; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.model-pick:hover { text-decoration-color: currentColor; }
.model-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.model-compare { overflow-x: auto; }
.model-compare table.ai-models { min-width: 720px; }
.model-compare td, .model-compare th { vertical-align: top; }
@media (max-width: 640px) { .model-choices { grid-template-columns: 1fr; } }

/* The database console (db-console.js): admin mode is red everywhere. */
.db-admin-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: var(--radius-surface); background: var(--red-50); color: var(--red-700); border: 1px solid var(--red-700); }
.db-admin-banner .spacer { flex: 1; }
.db-admin-banner .db-countdown { font-variant-numeric: tabular-nums; }
.db-danger { padding: 12px 14px; border-radius: 10px; background: var(--red-50); color: var(--red-700); border: 1px solid var(--red-700); }
.db-danger p { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.db-danger ul { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.db-stepup { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; border-top: 1px solid var(--border-default); }
.db-stepup h4 { margin: 8px 0 0; }
.db-mode-switch { display: inline-flex; border: 1px solid var(--border-default); border-radius: var(--radius-pill); overflow: hidden; }
.db-mode { border: 0; background: transparent; color: var(--text-secondary); padding: 0 14px; height: 36px; font: inherit; cursor: pointer; }
.db-mode.active { background: var(--green-50); color: var(--green-700); font-weight: 600; }
.db-mode:last-child.active { background: var(--red-50); color: var(--red-700); }
.db-mode-bar:empty { display: none; }
textarea.sql-editor.admin { border-color: var(--red-700); box-shadow: 0 0 0 1px var(--red-700); }
.db-facts { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.db-access-users { display: flex; flex-direction: column; gap: 6px; }
.readonly-chip.admin-chip { background: var(--red-50); color: var(--red-700); }
.db-settings-stack { display: flex; flex-direction: column; gap: 16px; }
/* The local database being checked before it opens, or left off after an error (dbopen.go). */
.db-open-notice { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--border-default); background: var(--bg-field-on-canvas); }
.db-open-notice.bad { border-color: var(--status-critical); background: var(--red-50); }
.db-open-notice.bad .text-body-regular.primary { color: var(--red-700); font-weight: 500; }
.db-open-notice .actions { margin-top: 4px; }

/* Reset telemetry data (data-reset.js): the danger zone. */
.panel.danger-zone { border-color: var(--red-700); }
.danger-zone-head { display: flex; flex-direction: column; gap: 6px; }
.danger-zone-head h3 { margin: 0; }
.danger-zone-tag { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--red-50); color: var(--red-700); }
.danger-zone-tag svg { width: 14px; height: 14px; }
.danger-zone fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.danger-zone fieldset[disabled] { opacity: 0.55; }
.danger-zone legend { padding: 0; margin-bottom: 4px; }
.reset-choice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border-default); border-radius: 10px; cursor: pointer; }
.reset-choice input { margin-top: 3px; }
.reset-choice-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.reset-count { white-space: nowrap; padding-top: 2px; }
.reset-older { flex-wrap: wrap; }
.reset-older .input { width: auto; min-width: 160px; }
.reset-never { display: flex; align-items: center; gap: 6px; margin: 0; }
.reset-never svg { width: 14px; height: 14px; flex: none; }
.reset-preview .reset-table { width: 100%; border-collapse: collapse; }
.reset-table th, .reset-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border-default); vertical-align: top; }
.reset-table th { color: var(--text-tertiary); font-weight: 500; font-size: 12px; }
.reset-table .num { text-align: right; white-space: nowrap; }
.reset-table tr.reset-index td { color: var(--text-tertiary); }
.reset-backup { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .reset-table th:nth-child(3), .reset-table td:nth-child(3) { display: none; }
}

/* Settings → Attribute mapping (settings-attribute-mapping.js). */
.am-panel .am-switches { display: flex; flex-direction: column; gap: 8px; }
.am-list-head, .am-buttons { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.am-buttons { justify-content: flex-start; }
.am-rules { display: flex; flex-direction: column; gap: 8px; }
.am-rules .empty-state { padding: 24px 12px; border: 1px dashed var(--border-default); border-radius: 10px; }
.am-rule { border: 1px solid var(--border-default); border-radius: 10px; min-width: 0; }
.am-rule.am-off .am-rule-title { opacity: 0.6; }
.am-rule-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; }
.am-rule-order { width: 20px; text-align: center; }
.am-rule-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.am-rule-title > span { overflow-wrap: anywhere; }
.am-rule-actions { display: flex; align-items: center; gap: 6px; }
.am-rule-actions .icon-button { width: 28px; height: 28px; border-radius: 6px; }
.am-rule-actions .icon-button:disabled { opacity: 0.35; cursor: default; }
.am-editor { display: flex; flex-direction: column; gap: 12px; padding: 12px; border-top: 1px solid var(--border-default); }
.am-fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.am-fieldset legend { padding: 0; margin-bottom: 6px; }
.am-checks { display: flex; gap: 16px; flex-wrap: wrap; }
.am-check { display: inline-flex; align-items: center; gap: 6px; }
.am-rows, .am-actions-list { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.am-row { display: grid; grid-template-columns: minmax(90px, 0.7fr) minmax(0, 1.2fr) minmax(110px, 0.9fr) minmax(0, 1.2fr) auto; gap: 8px; align-items: center; width: 100%; }
.am-action .am-row { grid-template-columns: minmax(140px, 1fr) minmax(90px, 0.6fr) minmax(0, 1.4fr) auto; }
.am-row.am-row-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.am-action { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 10px; border-radius: 8px; background: var(--bg-field-on-canvas); }
.am-table { display: flex; flex-direction: column; gap: 8px; }
.am-preview:empty, .am-history:empty { display: none; }
.am-preview, .am-history { display: flex; flex-direction: column; gap: 10px; }
.am-preview-rule { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--border-default); }
table.am-diff { border-collapse: collapse; width: 100%; min-width: 560px; }
table.am-diff th, table.am-diff td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--border-default); vertical-align: top; overflow-wrap: anywhere; }
.am-versions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.am-version { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid var(--border-default); border-radius: 8px; }
@media (max-width: 640px) {
  .am-row, .am-action .am-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .am-row > .icon-button { grid-column: 2; justify-self: end; }
  .am-row.am-row-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .am-row.am-row-2 > .icon-button { grid-column: auto; }
  .am-rule-head { grid-template-columns: minmax(0, 1fr); }
  .am-rule-order { display: none; }
  .am-rule-actions { justify-content: flex-end; }
  .am-version { flex-direction: column; align-items: flex-start; }
}
table.am-diff td.am-nowrap { white-space: nowrap; overflow-wrap: normal; }
/* Attribute mapping v2: the one-sentence builder, searchable dropdowns,
   templates, reveal (settings-attribute-mapping.js). */
.am-outbound { margin: 0; padding: 8px 12px; border-radius: 8px; background: var(--bg-field-on-canvas); color: var(--text-secondary); }
.am-outbound strong { color: var(--text-primary); font-weight: 600; }
.am-rule-name { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.am-editor-top { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.am-editor-top .field { flex: 1 1 260px; }
.am-mode { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 8px; flex-wrap: wrap; }
.am-builder { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 10px; background: var(--bg-field-on-canvas); min-width: 0; }
.am-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.am-line > select.input { width: auto; max-width: 100%; }
.am-line > input.input { width: auto; flex: 0 1 220px; min-width: 120px; }
.am-word { color: var(--text-tertiary); font-weight: 500; min-width: 56px; }
.am-line > .am-word:first-child { text-align: right; }
.am-line .am-word + .am-word { min-width: 0; }
.am-keys { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.am-key { display: inline-flex; align-items: center; gap: 2px; min-width: 0; max-width: 100%; }
.am-help { padding-left: 64px; }
.am-sentence-box { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border-default); border-radius: 8px; }
.am-sentence-box .icon { flex: none; margin-top: 2px; color: var(--accent); }
.am-sentence { margin: 0; overflow-wrap: anywhere; }
.am-small { padding: 4px 10px; min-height: 0; }
.am-combo { position: relative; display: inline-block; min-width: 0; max-width: 100%; }
.am-combo-trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 180px; max-width: 100%; text-align: left; cursor: pointer; }
.am-combo-trigger:disabled { cursor: default; opacity: 0.7; }
.am-combo-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px; }
.am-combo-text .tertiary { font-family: inherit; }
.am-combo-chevron { flex: none; width: 16px; height: 16px; color: var(--text-tertiary); }
.am-combo-pop { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; width: min(380px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--border-default); border-radius: 10px; background: var(--bg-raised); box-shadow: var(--shadow-floating); }
.am-combo-search { width: 100%; }
.am-combo-list { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; }
.am-combo-group { padding: 8px 8px 4px; color: var(--text-tertiary); }
.am-combo-option { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.am-combo-option.active { background: var(--accent-soft); }
.am-combo-option.disabled { cursor: not-allowed; opacity: 0.55; }
.am-combo-label { font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px; overflow-wrap: anywhere; color: var(--text-primary); }
.am-combo-reason { grid-column: 1 / -1; }
.am-combo-note { padding: 8px; }
.am-gallery { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--border-default); border-radius: 10px; }
.am-gallery-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.am-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.am-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border-default); border-radius: 10px; background: var(--bg-canvas); min-width: 0; }
.am-card p { margin: 0; }
.am-card > .button { align-self: flex-start; margin-top: auto; }
.am-card-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.am-preview-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.am-where { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.am-reveal { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border-default); }
.am-reveal h4 { display: flex; align-items: center; gap: 6px; margin: 0; }
.am-reveal-input { width: 100%; resize: vertical; min-height: 64px; }
.am-keys-info { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.am-keys-info p { margin: 0; flex: 1 1 320px; }
table.am-diff td.am-token { max-width: 280px; overflow-wrap: anywhere; }
.attr-revealed { font-family: inherit; }
@media (max-width: 640px) {
  .am-word { min-width: 0; }
  .am-line > .am-word:first-child { text-align: left; width: 100%; }
  .am-help { padding-left: 0; }
  .am-combo, .am-combo-trigger, .am-line > select.input, .am-line > input.input, .am-key { width: 100%; flex: 1 1 100%; }
  .am-keys { width: 100%; }
  .am-combo-pop { width: calc(100vw - 48px); }
}
.am-combo-text.am-plain { font-family: inherit; font-size: inherit; }
.am-builder .input, .am-builder select.input { background: var(--bg-canvas); border: 1px solid var(--border-default); }
.am-card-title { flex-direction: column; align-items: flex-start; }
.am-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.am-badges:empty { display: none; }
/* Protect a person's data (person-protect.js). */
.pp-section { display: flex; flex-direction: column; gap: 8px; }
.pp-values { display: flex; flex-direction: column; gap: 6px; }
.pp-methods { display: flex; flex-direction: column; gap: 8px; }
.pp-method { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 10px 12px; border: 1px solid var(--border-default); border-radius: 10px; cursor: pointer; }
.pp-method:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.pp-method input { margin-top: 3px; }
.pp-method-text { display: flex; flex-direction: column; gap: 2px; }
.pp-warn { display: flex; gap: 6px; align-items: flex-start; margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--bg-field-on-canvas); color: var(--text-primary); }
.pp-pass, .pp-extra { display: flex; flex-direction: column; gap: 8px; }
.pp-extra:empty { display: none; }
.pp-preview { display: flex; flex-direction: column; gap: 10px; }
.pp-preview:empty { display: none; }
.pp-counts, .pp-elsewhere { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.pp-confirm { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding-top: 6px; }
.pp-confirm .field { width: 100%; }
.pp-stepup { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border-default); border-radius: 10px; }

/* "Can this client reach this server?" (views/reachability.js, reachability-ui.js) */
.reach-page { display: flex; flex-direction: column; gap: 16px; }
.reach-page .tabs { margin-bottom: 4px; }
.reach-intro { max-width: 72ch; margin: 0 0 12px; }
.reach-demo, .reach-live-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.reach-cast { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.reach-cast legend { margin-bottom: 8px; color: var(--text-secondary); }
.reach-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--border-default); border-radius: var(--radius-surface); background: var(--bg-raised); cursor: pointer; }
.reach-card input { position: absolute; opacity: 0; pointer-events: none; }
.reach-card.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.reach-card:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.reach-controls, .reach-pickers { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-end; }
.reach-control, .reach-pick { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.reach-pick .input { min-width: 220px; max-width: 100%; }
.reach-filter { flex-basis: 100%; }
.reach-seg { max-width: 100%; flex-wrap: wrap; }
.reach-seg.sim button.active { background: var(--amber-50); color: var(--amber-700); }
.reach-sim-banner { padding: 10px 14px; border-radius: var(--radius-control); background: var(--amber-50); color: var(--amber-700); border: 1px dashed var(--amber-700); }
.reach-stage { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--border-default); border-radius: var(--radius-surface); background: var(--bg-raised); min-width: 0; }
.reach-stage.simulated { border-style: dashed; border-color: var(--amber-700); }
.reach-ends { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.reach-path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; counter-reset: none; }
.reach-path.simulated .reach-step:nth-child(4) .reach-hop { border-style: dashed; }
.reach-step { position: relative; min-width: 0; }
.reach-step:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -8px; width: 8px; height: 2px; background: var(--border-strong); }
.reach-hop { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px; border: 1px solid var(--border-default); border-left-width: 4px; border-radius: var(--radius-control); background: var(--bg-canvas); color: var(--text-primary); text-align: left; cursor: pointer; transition: transform 160ms ease-out, background-color 120ms ease-out; }
.reach-hop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.reach-hop.active { background: var(--bg-field-on-canvas); box-shadow: var(--shadow-raised); }
.reach-hop.tone-good { border-left-color: var(--tone-good); }
.reach-hop.tone-warn { border-left-color: var(--tone-warn); }
.reach-hop.tone-bad { border-left-color: var(--tone-bad); }
.reach-hop.tone-neutral { border-left-color: var(--border-strong); }
.reach-hop.pending { opacity: .55; }
.reach-hop-n { color: var(--text-tertiary); }
.reach-hop-name { overflow-wrap: anywhere; }
.reach-hop-state { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); }
.reach-hop-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--tone-neutral); }
.reach-hop.tone-good .reach-hop-state { color: var(--tone-good); } .reach-hop.tone-good .reach-hop-state i { background: var(--tone-good); }
.reach-hop.tone-warn .reach-hop-state { color: var(--tone-warn); } .reach-hop.tone-warn .reach-hop-state i { background: var(--tone-warn); }
.reach-hop.tone-bad .reach-hop-state { color: var(--tone-bad); } .reach-hop.tone-bad .reach-hop-state i { background: var(--tone-bad); }
.reach-step.stop .reach-hop { box-shadow: 0 0 0 2px var(--tone-bad); }
body:not(.motion-off) .reach-step.stop .reach-hop { animation: reach-knock 420ms ease-out 1; }
@keyframes reach-knock { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-4px); } 60% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .reach-step.stop .reach-hop { animation: none !important; } }
.reach-sim-tag { padding: 1px 6px; border-radius: var(--radius-chip); background: var(--amber-50); color: var(--amber-700); }
.reach-result { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: var(--radius-control); background: var(--bg-field-on-canvas); border-left: 4px solid var(--border-strong); }
.reach-result.tone-good { border-left-color: var(--tone-good); }
.reach-result.tone-warn { border-left-color: var(--tone-warn); }
.reach-result.tone-bad { border-left-color: var(--tone-bad); }
.reach-detail { padding: 16px; border: 1px solid var(--border-default); border-radius: var(--radius-surface); background: var(--bg-raised); }
.reach-detail-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.reach-detail-head h3 { margin: 0; }
.reach-dl, .reach-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 0; }
.reach-dl dt, .reach-facts dt { color: var(--text-tertiary); padding-top: 2px; }
.reach-dl dd, .reach-facts dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .reach-path { grid-template-columns: 1fr; }
  .reach-step:not(:last-child)::after { top: auto; bottom: -8px; right: auto; left: 18px; width: 2px; height: 8px; }
  .reach-hop { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .reach-hop-state { margin-left: auto; }
}
@media (max-width: 560px) {
  .reach-dl, .reach-facts { grid-template-columns: 1fr; gap: 2px; }
  .reach-dl dd, .reach-facts dd { margin-bottom: 8px; }
  .reach-pick, .reach-pick .input { width: 100%; min-width: 0; }
}
.reach-facts { padding: 14px 16px; border: 1px solid var(--border-default); border-radius: var(--radius-surface); }
/* Settings → Diagnostics (settings-diagnostics.js) */
.diagnostics-panel .diag-warning { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.diag-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; margin: 16px 0; }
.diag-charts > * { min-width: 0; }
.diag-charts > .kv { grid-column: 1 / -1; }
.diag-runs, .diag-logs { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.diag-runs details summary { cursor: pointer; }
.diag-runs details .code-block { white-space: pre-wrap; word-break: break-all; margin-top: 6px; max-height: 240px; overflow: auto; }
.diag-log-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.diag-log-tools .input { flex: 1 1 220px; min-width: 0; }
.diag-log-tools .toggle-row { flex: 0 0 auto; gap: 8px; }
.diag-log { background: var(--bg-field-on-canvas); border-radius: var(--radius-control); padding: 10px 12px; max-height: 420px; overflow: auto; font-size: 12px; line-height: 1.5; color: var(--text-primary); }
.diag-line { white-space: pre-wrap; word-break: break-word; }
.diag-line.problem { color: var(--red-700); }

/* People → Import (people-provisioning.js) */
.people-import-counts { flex-wrap: wrap; gap: 8px 20px; padding-right: 0; }
.people-import-error { display: block; white-space: normal; overflow-wrap: anywhere; }
/* Insights → Delivery and My work (views/delivery.js) */
.dv-intro, .dv-settings, .dv-status { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; margin: 18px 18px 0; border: 1px solid var(--border-default); border-radius: var(--radius-surface); background: var(--bg-raised); }
.dv-intro p { max-width: 72ch; margin: 0; }
.dv-intro .button { align-self: flex-start; }
.dv-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.dv-row .input[type="number"] { width: 96px; }
.dv-advanced summary { cursor: pointer; }
.dv-advanced[open] { display: flex; flex-direction: column; gap: 10px; }
.dv-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dv-status p { margin: 0; }
.dv-problems summary { cursor: pointer; }
.dv-problems .table-scroll-container { margin-top: 8px; }
.dv-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 18px 18px 0; }
.dv-head h2 { margin: 0; }
.dv-page .an-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .dv-page .an-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dv-note { margin: 12px 18px 0; }
/* Team insights → AI productivity (views/productivity.js): the settings kit's
   cards, rows and side panel, on tokens only so dark mode follows. */
.pv-page .view-bar { margin: 0; }
.pv-glance { display: flex; flex-direction: column; gap: 10px; }
.pv-glance .kit-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .pv-glance .kit-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pv-glance .kit-kpis { grid-template-columns: minmax(0, 1fr); } }
.pv-glance .kit-kpi-of { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; }
.pv-body { display: flex; flex-direction: column; gap: 28px; }
.pv-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.pv-fact { display: inline-flex; gap: 4px; align-items: baseline; padding: 4px 10px; border: 1px solid var(--border-default); border-radius: 9999px; background: var(--bg-canvas); font-size: 13px; color: var(--text-secondary); }
.pv-fact b { color: var(--text-primary); font-weight: 600; }
.pv-grid { padding: 0; }
.pv-formula, .pv-note { margin: 10px 0 0; font-size: 13px; color: var(--text-tertiary); }
.pv-empty { display: flex; align-items: center; gap: 14px; padding: 18px; }
.pv-editor { display: flex; flex-direction: column; gap: 22px; }
.pv-editor .kit-row-ctl { justify-self: end; }
.pv-rates-row { grid-template-columns: minmax(0, 1fr) auto; }
.pv-rates { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; }
.pv-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border: 1px dashed var(--border-default); border-radius: var(--radius-surface); }
.pv-rate select { flex: 1 1 120px; min-width: 0; }
.pv-toggles { padding: 4px 18px; }
.pv-ack { padding: 10px 0; }
.pv-editor-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 14px; border-top: 1px solid var(--border-default); }

/* Page guides (guide-player.js): Nova in a round video at the bottom right,
   captions in a bubble beside her. Brand colours, the same in both themes. */
.guide-button { margin-right: 12px; }
.guide-player { --guide-size: 200px; --guide-ring: #BFFF31; position: fixed; right: 24px; bottom: 24px; z-index: 900; display: flex; align-items: flex-end; gap: 12px; font-family: Inter, ui-sans-serif, sans-serif; pointer-events: none; }
.guide-player > * { pointer-events: auto; }
.guide-player.large { --guide-size: 420px; }
.guide-stage { position: relative; width: var(--guide-size); height: var(--guide-size); flex-shrink: 0; transition: width .2s ease, height .2s ease; }
.motion-off .guide-stage { transition: none; }
.guide-circle { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: #0A0B0D; box-shadow: 0 0 0 3px var(--guide-ring), 0 12px 32px rgba(10, 11, 13, .35); }
.guide-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.guide-controls { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); display: flex; gap: 6px; padding: 4px; border-radius: 999px; background: #0A0B0D; box-shadow: 0 0 0 1.5px var(--guide-ring); }
.guide-control.icon-button { width: 30px; height: 30px; border-radius: 50%; color: #FFFFFF; background: transparent; }
.guide-control.icon-button:hover { color: #0A0B0D; background: #4FE3C1; }
.guide-control.icon-button:focus-visible { outline: 2px solid #4FE3C1; outline-offset: 2px; }
.guide-control[aria-pressed="true"] { color: #BFFF31; }
.guide-bubble { max-width: 260px; margin-bottom: calc(var(--guide-size) * .35); padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: #0A0B0D; color: #FFFFFF; box-shadow: 0 0 0 1.5px #4FE3C1, 0 8px 24px rgba(10, 11, 13, .3); }
.guide-bubble[hidden] { display: none; }
.guide-caption { margin: 0; color: inherit; line-height: 1.45; }
@media (max-width: 767px) {
  .guide-player { --guide-size: 160px; right: 16px; bottom: 16px; flex-direction: column-reverse; align-items: flex-end; gap: 24px; }
  .guide-player.large { --guide-size: min(420px, calc(100vw - 32px)); right: 16px; }
  .guide-bubble { margin-bottom: 0; max-width: calc(100vw - 32px); }
}
@media (forced-colors: active) {
  .guide-circle, .guide-controls, .guide-bubble { border: 2px solid CanvasText; }
}

/* Repository plans (views/repo-plan.js): the live plan of a repository. */
.rp-page { min-width: 0; padding-bottom: 32px; }
.rp-intro { padding: 8px 18px 0; margin: 0; max-width: 80ch; }
.rp-live { margin-left: auto; }
.rp-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .rp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rp-good { color: var(--tone-good); } .rp-warn { color: var(--tone-warn); } .rp-bad { color: var(--tone-bad); }
.rp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; padding: 18px; }
.rp-repo { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--border-default); border-radius: var(--radius-surface); background: var(--bg-raised); text-decoration: none; min-width: 0; overflow-wrap: anywhere; }
.rp-repo:hover, .rp-repo:focus-visible { border-color: var(--accent); }
.rp-plan { display: flex; flex-direction: column; gap: 10px; padding: 16px; margin-bottom: 14px; border: 1px solid var(--border-default); border-radius: var(--radius-surface); background: var(--bg-raised); min-width: 0; }
.rp-plan-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.rp-plan-head h3 { margin: 0 0 2px; }
.rp-plan-head .mono { overflow-wrap: anywhere; }
.rp-meter-row { display: flex; flex-direction: column; gap: 4px; }
.rp-meter-row .meter { margin-top: 0; }
.rp-thin { height: 4px; margin: 2px 0 4px; }
.rp-section { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; border-top: 1px solid var(--border-default); }
.rp-section:first-of-type { border-top: 0; }
.rp-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rp-items { list-style: none; margin: 0; padding: 0; }
.rp-item { padding: 3px 0; }
.rp-depth-1 { margin-left: 20px; } .rp-depth-2 { margin-left: 40px; } .rp-depth-3 { margin-left: 60px; }
.rp-depth-4, .rp-depth-5, .rp-depth-6 { margin-left: 80px; }
.rp-check { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; overflow-wrap: anywhere; }
.rp-check input { margin-top: 3px; flex: none; width: 16px; height: 16px; accent-color: var(--accent); }
.rp-item.done .rp-check span { color: var(--text-tertiary); text-decoration: line-through; }
.rp-add { display: flex; gap: 8px; margin-top: 4px; }
.rp-add .input { flex: 1; min-width: 0; }
.rp-list-plain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rp-list-plain li { overflow-wrap: anywhere; }
.rp-run { display: inline-flex; margin-left: 8px; vertical-align: middle; }
.rp-protected { margin: 14px 18px 0; max-width: 80ch; }
.rp-protected h3, .rp-protected p { margin: 0 0 2px; }
.rp-protected-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-cmd { display: block; margin-top: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--text-secondary); overflow-wrap: anywhere; }
.rp-stack { display: flex; flex-direction: column; gap: 6px; }
.rp-stack p { margin: 0; }
@media (max-width: 600px) {
  .rp-plan { padding: 12px; }
  .rp-live { margin-left: 0; }
}

/* ---- Control plane: every page (docs/design/control-plane/BRIEF.md §2) ------
   The header is part of the page (title, one line of context, round icon
   buttons), Needs attention cards sit under it, the notices that must stay
   visible keep their place as soft cards, and one view bar sits above a
   page's data. Content keeps a 32px gutter (16px on phones). */
main > .view { padding: 0 14px 32px; }
/* Wide windows: the header, its attention cards and the page share one
   column of up to --content-max, centred in what the menu leaves, so the
   header's actions sit at the content's right edge and very wide windows
   keep even margins instead of one empty band. */
:root { --content-max: 1760px; --measure: 80ch; }
main > :is(.page-header, .attention-slot, .view, .plan-footer) { width: 100%; max-width: var(--content-max); margin-inline: auto; }
.page-header { height: auto; min-height: 0; align-items: flex-start; gap: 16px; padding: 24px 32px 16px; border-bottom: 0; }
.page-header .title-group { flex-direction: column; align-items: flex-start; gap: 2px; flex: 0 1 auto; }
.page-header .title-row { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.page-header .title-row h1 { margin: 0; }
.page-header .page-subtitle { margin: 0; align-self: stretch; max-width: 72ch; }
.page-header .header-actions { flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.page-header .header-icons { gap: 8px; margin-right: 0; }
.icon-button.round { width: 36px; height: 36px; border-radius: 9999px; border: 1px solid var(--border-default); background: var(--bg-canvas); color: var(--text-secondary); }
.icon-button.round:hover { background: var(--bg-hover); color: var(--teal-800); }
.icon-button.round[aria-expanded="true"] { background: var(--teal-50); border-color: var(--teal-200); color: var(--teal-800); }
.icon-button.round .badge-dot { top: 4px; right: 4px; }
.page-header .suggestions-button { width: 36px; height: 36px; border-radius: 9999px; border: 1px solid var(--border-default); background: var(--bg-canvas); }
.button.small { height: 30px; padding: 0 12px; font-size: 13px; }
.button.secondary.small { height: 30px; padding: 0 12px; }

/* Needs attention: one card per thing wrong, each with one button. */
.attention-slot { padding: 0 32px 8px; }
.attention { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.attention-card { display: flex; align-items: center; gap: 10px; flex: 1 1 260px; min-width: 0; border-radius: 14px; padding: 8px 8px 8px 14px; border: 1px solid var(--border-default); background: var(--bg-canvas); color: var(--text-primary); font-size: 13px; line-height: 18px; }
.attention-card > .icon { color: var(--teal-700); }
.attention-card.tone-warn { background: var(--amber-50); border-color: var(--amber-line); }
.attention-card.tone-warn > .icon { color: var(--amber-700); }
.attention-card.tone-bad { background: var(--red-50); border-color: var(--red-line); }
.attention-card.tone-bad > .icon { color: var(--red-700); }
.attention-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.attention-text b { font-weight: 700; }
.attention-card .button { margin-left: auto; flex-shrink: 0; }
.attention-card .update-progress { margin-left: auto; }
.attention-more { border: 1px dashed var(--border-strong); background: transparent; color: var(--teal-700); border-radius: 14px; padding: 0 14px; cursor: pointer; }
.attention-more:hover { background: var(--teal-50); }

/* The notices that must stay visible: unchanged in behaviour, drawn as cards. */
.capture-bar, .banner, .banner.activation-bar { margin: 8px 32px 0; border: 1px solid var(--amber-line); border-radius: 14px; padding: 8px 14px; font-size: 13px; line-height: 18px; }
.banner { border-color: var(--border-default); background: var(--bg-canvas); }
.capture-bar .capture-bar-link { font-weight: 700; }
.remote-bar { background: var(--teal-900); }
.plan-banner { margin: 8px 32px 0; }

/* Popovers: the ? button's page help and the view bar's pickers. */
.popover { position: fixed; z-index: 48; min-width: 240px; max-width: min(360px, calc(100vw - 16px)); max-height: min(70vh, 560px); overflow-y: auto; background: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: 16px; box-shadow: var(--shadow-floating); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.popover-head p { margin: 2px 0 0; }
.popover-about { line-height: 18px; }
.popover-about p { margin: 0 0 6px; }
.popover-guide { align-self: flex-start; }
.popover-items { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--border-default); padding-top: 8px; }
.popover-item { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; border-radius: 10px; padding: 7px 8px; color: var(--text-primary); cursor: pointer; text-align: left; text-decoration: none; }
.popover-item:hover, .popover-item:focus-visible { background: var(--bg-hover); }
.popover-item > span { flex: 1; min-width: 0; }
.popover-item .icon { color: var(--icon-default); }
.popover-title { font-weight: 700; letter-spacing: .025em; text-transform: uppercase; color: var(--text-secondary); }
.pick-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pick-item { width: 100%; border: 0; background: transparent; text-align: left; padding: 7px 10px; border-radius: 10px; color: var(--text-primary); cursor: pointer; overflow-wrap: anywhere; }
.pick-item:hover, .pick-item:focus-visible { background: var(--bg-hover); }
.pick-empty { padding: 6px 10px; }

/* The view bar: segments, chips, a search, then group by, views and columns. */
.view-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: 16px; padding: 8px; box-shadow: var(--shadow-raised); min-width: 0; }
.view-bar .seg { display: inline-flex; flex-wrap: wrap; background: var(--ds-paper); border: 1px solid var(--border-default); border-radius: 9999px; padding: 3px; gap: 2px; }
.view-bar .seg button { border: 0; background: none; border-radius: 9999px; padding: 4px 12px; font-size: 13px; font-weight: 600; color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.view-bar .seg button.on { background: var(--bg-canvas); color: var(--text-primary); box-shadow: 0 1px 2px rgba(15, 23, 41, .12); }
.vb-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-default); background: var(--bg-canvas); border-radius: 9999px; padding: 5px 10px; font-size: 13px; font-weight: 600; color: var(--text-primary); cursor: pointer; white-space: nowrap; max-width: 100%; }
button.vb-chip:hover { background: var(--bg-hover); }
.vb-chip i { font-style: normal; color: var(--text-secondary); font-weight: 500; }
.vb-chip .icon { width: 14px; height: 14px; }
.vb-chip.set { background: var(--teal-50); border-color: var(--teal-200); color: var(--teal-800); padding-right: 4px; cursor: default; }
.vb-chip-label { overflow: hidden; text-overflow: ellipsis; }
.vb-chip-x { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 0; border-radius: 9999px; background: transparent; color: inherit; cursor: pointer; padding: 0; }
.vb-chip-x:hover { background: var(--teal-100); }
.vb-chip.add { border-style: dashed; color: var(--teal-700); }
.vb-search { display: flex; align-items: center; gap: 6px; flex: 1 1 200px; min-width: 140px; max-width: 360px; height: 32px; padding: 0 10px; border: 1px solid var(--border-default); border-radius: 12px; color: var(--text-secondary); background: var(--bg-canvas); }
.vb-search:focus-within { border-color: var(--teal-600); box-shadow: var(--shadow-focus); }
.vb-search input { border: 0; outline: none; background: transparent; flex: 1; min-width: 0; color: var(--text-primary); font-size: 13px; }
.vb-spacer { flex: 1 1 0; }
.view-bar select.input { height: 32px; width: auto; min-width: 0; max-width: 220px; border-radius: 9999px; font-size: 13px; font-weight: 600; }

@media (max-width: 767px) {
  main > .view { padding: 0 0 24px; }
  .page-header { padding: 16px 16px 12px; }
  .attention-slot { padding: 0 16px 8px; }
  .capture-bar, .banner, .banner.activation-bar, .plan-banner { margin: 8px 16px 0; }
  .page-header { flex-wrap: wrap; row-gap: 10px; }
  .page-header .title-group { flex: 1 1 calc(100% - 60px); }
  .page-header .spacer { display: none; }
  .page-header .header-actions { flex: 1 1 100%; justify-content: flex-start; flex-wrap: wrap; }
}

/* ---- Control plane: Computers ---- */
.clients-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; padding: 8px 12px; background: var(--teal-50); border: 1px solid var(--teal-200); border-radius: var(--radius-surface); }
.clients-viewbar { margin: 16px 0 12px; }
@media (max-width: 767px) {
  .clients-head { flex-wrap: nowrap; }
  .clients-head .button.secondary > span { display: none; }
}

/* ---- Control plane: Analytics ---- */
.an-toolbar { padding: 18px 18px 0; }
.an-toolbar:empty { display: none; }
.an-toolbar .an-custom .input { width: 150px; height: 32px; border-radius: 9999px; font-size: 13px; }
.vb-chip.an-compare { cursor: pointer; color: var(--text-secondary); }
.vb-chip.an-compare .switch { margin: 0; }
.an-card-controls .vb-chip { height: 36px; }
@media (max-width: 767px) {
  .an-toolbar { padding-left: 16px; padding-right: 16px; }
  .an-toolbar .an-custom { flex-wrap: wrap; }
  .an-toolbar .an-custom .input { width: auto; flex: 1 1 130px; }
}

/* ---- Control plane: People and Audit log ---- */
.people-bar, .audit-bar { padding: 12px 18px; min-width: 0; }
.people-bar:empty { display: none; }
.audit-dates { display: flex; justify-content: flex-end; padding: 8px 0 0; }
.audit-dates .insights-date { width: 150px; }
@media (max-width: 767px) {
  .people-bar, .audit-bar { padding: 8px 16px; }
  .audit-dates { justify-content: stretch; }
  .audit-dates .insights-dates { width: 100%; }
  .audit-dates .insights-date { flex: 1 1 0; width: auto; min-width: 0; }
}

/* ---- Control plane: Live activity ---- */
.activity-bar { padding: 12px 18px; min-width: 0; }
.activity-actions { display: inline-flex; align-items: center; gap: 2px; }
.activity-actions .icon-button { width: 30px; height: 30px; border-radius: 9999px; }
.activity-actions .icon-button:hover { background: var(--bg-hover); }
.activity-bar .live-indicator { border: 0; margin-right: 0; cursor: pointer; font: inherit; }
.activity-bar .live-indicator:focus-visible { box-shadow: var(--shadow-focus); outline: none; }
.activity-bar .live-indicator.paused { background: var(--ds-paper); color: var(--text-secondary); box-shadow: inset 0 0 0 1px var(--border-default); }
.activity-bar .live-indicator.paused i { background: var(--text-secondary); animation: none; border-radius: 1px; }
.view-bar .seg .vb-count { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 9999px; background: var(--red-50); color: var(--red-700); font-size: 11px; line-height: 18px; }
.view-bar .seg .vb-count[hidden] { display: none; }
.activity-cell { gap: 10px; min-width: 0; }
.activity-cell > .signal-dot { flex-shrink: 0; }
@media (max-width: 767px) {
  .activity-bar { padding: 8px 16px; }
}

/* ---- Control plane: the command bar (BRIEF.md §3) ------------------------- */
.cmd-overlay { position: fixed; inset: 0; z-index: 70; background: var(--overlay); }
.cmd { position: fixed; z-index: 71; left: 50%; top: 12vh; transform: translateX(-50%); width: min(600px, calc(100vw - 32px)); background: var(--bg-canvas); border-radius: 20px; box-shadow: 0 24px 64px -12px rgba(15, 23, 41, .45); overflow: hidden; display: flex; flex-direction: column; }
.cmd.from-dock { top: auto; bottom: 104px; }
body:not(.motion-off) .cmd { animation: cmd-rise .2s ease-out; }
@keyframes cmd-rise { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.cmd-foot { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--ds-paper); border-bottom: 1px solid var(--border-default); color: var(--text-secondary); }
.cmd.from-dock .cmd-foot { border-bottom: 0; border-top: 1px solid var(--border-default); }
.cmd-input { border: 0; outline: none; flex: 1 1 auto; min-width: 0; font-size: 16px; background: none; color: var(--text-primary); }
.cmd-input::placeholder { color: var(--ds-placeholder); }
.cmd-keys { white-space: nowrap; color: var(--text-secondary); }
.cmd-esc { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; border: 1px solid var(--border-default); border-radius: 6px; padding: 0 6px; color: var(--text-secondary); background: var(--bg-canvas); cursor: pointer; }
.cmd-list { padding: 8px; max-height: min(430px, 60vh); overflow-y: auto; }
.cmd-group + .cmd-group { margin-top: 4px; }
.cmd-group-title { padding: 8px 10px 4px; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .025em; text-transform: uppercase; color: var(--text-secondary); }
.cmd-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; color: var(--text-primary); cursor: pointer; }
.cmd-row .icon { color: var(--icon-muted); }
.cmd-row.active { background: var(--teal-50); color: var(--teal-800); font-weight: 700; }
.cmd-row.active .icon { color: var(--teal-700); }
.cmd-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-where { font-size: 12px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.cmd-enter { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; border: 1px solid var(--teal-200); border-radius: 6px; padding: 0 5px; }
.cmd-dot { width: 8px; height: 8px; border-radius: 9999px; flex: none; background: var(--teal-700); }
.cmd-dot.tone-bad { background: var(--red-700); }
.cmd-dot.tone-warn { background: var(--amber-700); }
.cmd-empty { margin: 0; padding: 16px 10px; color: var(--text-secondary); }
.cmd-open-button { display: flex; align-items: center; gap: 8px; width: 100%; border: 1px solid var(--border-default); border-radius: 12px; padding: 0 10px; height: 38px; color: var(--text-secondary); background: var(--ds-paper); cursor: pointer; font-size: 13px; text-align: left; }
.cmd-open-button:hover { background: var(--teal-50); border-color: var(--teal-200); }
.cmd-open-button span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-open-button kbd, .dock-search kbd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; border: 1px solid var(--border-default); border-radius: 6px; padding: 0 5px; background: var(--bg-canvas); color: var(--text-secondary); }
@media (max-width: 767px) { .cmd { top: 8px; } .cmd.from-dock { bottom: 88px; } .cmd-keys { display: none; } }

/* ---- Control plane: menu styles (BRIEF.md §4, menus.js) ------------------- */
.cmd-open-button { margin: 0; }
.sidebar-search { margin-top: 24px; }
.nav.jobs, .nav.searchfirst { gap: 2px; }
.nav-job-head { display: flex; align-items: center; gap: 8px; padding: 14px 8px 6px; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .025em; text-transform: uppercase; color: var(--text-secondary); }
.nav-job-head:first-child { padding-top: 4px; }
.nav-job-tone { width: 8px; height: 8px; border-radius: 3px; flex: none; background: var(--teal-700); }
.nav-job-head.tone-govern .nav-job-tone { background: var(--teal-300); }
.nav-job-head.tone-setup .nav-job-tone { background: var(--color-neutral-400); }
.nav.jobs .nav-item, .nav.searchfirst .nav-item { height: 36px; text-decoration: none; }
.nav.jobs .nav-chip.attention, .nav.searchfirst .nav-chip.attention { background: var(--amber-50); color: var(--amber-700); border: 1px solid var(--amber-line); width: auto; min-width: 22px; padding: 0 6px; border-radius: 9999px; }
.nav-head-action { margin-left: auto; border: 0; background: transparent; color: var(--teal-700); font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.nav-head-action:hover { background: var(--teal-50); }
.nav-dot { width: 8px; height: 8px; border-radius: 9999px; flex: none; background: var(--teal-700); margin: 0 4px; }
.nav-dot.tone-warn { background: var(--amber-700); }
.nav-dot.tone-bad { background: var(--red-700); }
.nav-need .nav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-unpin { border: 0; background: transparent; color: var(--icon-muted); cursor: pointer; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 9999px; padding: 0; }
.nav-unpin:hover { background: var(--red-50); color: var(--red-700); }
.nav-pin-this { color: var(--teal-700); }
.nav-all { margin-top: 8px; border-top: 1px solid var(--border-default); border-radius: 0; color: var(--teal-700); font-weight: 600; }
.all-pages { display: flex; flex-direction: column; gap: 16px; }
.all-pages-group { display: flex; flex-direction: column; gap: 2px; }
.all-pages-group h3 { margin: 0 0 4px; font-weight: 700; letter-spacing: .025em; text-transform: uppercase; }
.all-pages-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--text-primary); text-decoration: none; }
.all-pages-item:hover { background: var(--bg-hover); }
@media (min-width: 768px) and (max-width: 1023px) {
  #sidebar.sidebar-collapsed .nav-job-head, #sidebar.sidebar-collapsed .nav-head-action, #sidebar.sidebar-collapsed .nav-unpin, #sidebar.sidebar-collapsed .nav-empty, #sidebar.sidebar-collapsed .cmd-open-button { display: none; }
  #sidebar.sidebar-collapsed .search-rail-button { display: grid; }
}
@media (min-width: 1024px) {
  body.nav-rail #sidebar.sidebar-collapsed .nav-job-head, body.nav-rail #sidebar.sidebar-collapsed .nav-head-action, body.nav-rail #sidebar.sidebar-collapsed .nav-unpin, body.nav-rail #sidebar.sidebar-collapsed .nav-empty, body.nav-rail #sidebar.sidebar-collapsed .cmd-open-button { display: none; }
}

/* An entry's pages, indented under it in the side menu (one menu: no tabs
   above the page). The active entry keeps its tint; the page shown is bold. */
.nav-subitems { display: flex; flex-direction: column; gap: 1px; margin: 0 0 4px 30px; padding-left: 8px; border-left: 1px solid var(--border-default); }
.nav-subitem { display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 8px; border-radius: var(--radius-chip); color: var(--text-secondary); text-decoration: none; }
.nav-subitem:hover { background: var(--bg-hover); color: var(--text-primary); }
.nav-subitem.active { color: var(--teal-800); background: var(--teal-50); font-weight: 700; }
.nav-subitem:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.nav-subitem .nav-label { flex: 1 1 auto; min-width: 0; }
.nav-subitem .nav-chip { width: auto; min-width: 22px; height: 18px; padding: 0 6px; border-radius: 9999px; }

/* The dock: no sidebar; sections in a bar at the bottom. */
body.menu-dock #sidebar { display: none; }
body.menu-dock .hamburger { display: none !important; }
body.menu-dock main { padding-bottom: 120px; }
.dock { position: fixed; z-index: 40; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 8px; background: #0a0b0d; border-radius: 22px; box-shadow: 0 24px 48px -16px rgba(15, 23, 41, .55); max-width: calc(100vw - 16px); overflow-x: auto; }
.dock-button { position: relative; width: 48px; height: 48px; border-radius: 14px; border: 0; background: transparent; color: #f7f7f2; cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none; text-decoration: none; }
.dock-button .icon { width: 20px; height: 20px; }
.dock-button:hover { background: #1f2937; }
.dock-button.on { background: #f7f7f2; color: #0a0b0d; }
.dock-dot { position: absolute; top: 5px; right: 5px; width: 9px; height: 9px; border-radius: 9999px; background: var(--amber-line); }
.dock-search { height: 48px; border-radius: 14px; border: 0; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 0 16px; margin: 0 6px; font-weight: 600; background: #1f2937; color: #f7f7f2; flex: none; }
.dock-search[aria-expanded="true"], .dock-search:focus-visible { background: var(--bg-primary); }
.dock-search kbd { border-color: #4b5563; background: transparent; color: #f7f7f2; }
.dock-sep { width: 1px; height: 28px; background: #374151; margin: 0 4px; flex: none; }
.dock-me-mark { display: grid; place-items: center; width: 32px; height: 32px; }
.dock-me-mark svg, .dock-me-mark img { width: 28px; height: 28px; }
.dock-popover .user-block { height: auto; margin: 0; padding: 4px; }
.popover-item.on { background: var(--teal-50); color: var(--teal-800); font-weight: 700; }
.dock-crumb { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.dock-crumb-mark svg, .dock-crumb-mark img { width: 20px; height: 20px; display: block; }
@media (max-width: 767px) { .dock { bottom: 12px; } .dock-search span { display: none; } .dock-search { padding: 0 12px; margin: 0 2px; } .dock-button { width: 44px; height: 44px; } }

/* Settings → Appearance. */
.ap { display: flex; flex-direction: column; gap: 16px; }
.ap-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.ap-head h3 { margin: 0; }
.ap-styles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.ap-style { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--border-default); border-radius: 14px; padding: 12px; cursor: pointer; background: var(--bg-canvas); }
.ap-style:hover { border-color: var(--teal-200); }
.ap-style.on, .ap-style:has(input:checked) { border-color: var(--teal-700); box-shadow: 0 0 0 3px rgba(15, 118, 110, .12); }
.ap-style-text { display: flex; align-items: flex-start; gap: 8px; }
.ap-style-text > span { display: flex; flex-direction: column; gap: 2px; }
.ap-style input { margin-top: 3px; accent-color: var(--teal-700); }
.ap-mini { display: grid; grid-template-columns: 30% 1fr; grid-auto-rows: 6px; gap: 4px; height: 72px; padding: 8px; border-radius: 10px; background: var(--ds-paper); border: 1px solid var(--border-default); position: relative; overflow: hidden; }
.ap-mini i { display: block; border-radius: 3px; background: var(--color-neutral-200); grid-column: 1; }
.ap-mini .ap-mini-side { grid-column: 2; grid-row: 1 / span 9; background: var(--bg-canvas); border: 1px solid var(--border-default); }
.ap-mini .ap-mini-h { background: var(--teal-300); width: 60%; }
.ap-mini .ap-mini-s { background: var(--teal-100); }
.ap-mini .ap-mini-g { background: var(--color-neutral-350); }
.ap-mini-dock { display: block; }
.ap-mini-dock .ap-mini-dock { position: absolute; left: 25%; right: 25%; bottom: 6px; height: 12px; border-radius: 6px; background: #0a0b0d; }
.ap-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-top: 12px; border-top: 1px solid var(--border-default); }
.ap-row-text { min-width: 0; flex: 1 1 240px; }
.ap-row-control { flex: 0 1 280px; min-width: 0; }
.ap-seg { display: inline-flex; flex-wrap: wrap; background: var(--ds-paper); border: 1px solid var(--border-default); border-radius: 9999px; padding: 3px; gap: 2px; }
.ap-seg button { border: 0; background: none; border-radius: 9999px; padding: 4px 12px; font-size: 13px; font-weight: 600; color: var(--text-secondary); cursor: pointer; }
.ap-seg button.on { background: var(--bg-canvas); color: var(--text-primary); box-shadow: 0 1px 2px rgba(15, 23, 41, .12); }

/* Compact density: tighter rows and cards. */
body.density-compact table.data tbody td { height: 44px; }
body.density-compact .panel { padding: 14px; gap: 12px; }
body.density-compact .page-header { padding-top: 16px; padding-bottom: 10px; }
body.density-compact .nav.jobs .nav-item, body.density-compact .nav.searchfirst .nav-item { height: 32px; }
/* ---- Control plane §5: Live activity (totals and motion) ---- */
.lm-live { display: flex; flex-direction: column; gap: 16px; padding: 0 18px 16px; min-width: 0; }
.lm-totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lm-total { background: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: var(--radius-surface); padding: 14px 18px; box-shadow: var(--shadow-raised); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lm-l { color: var(--text-secondary); font-size: 13px; font-weight: 600; }
.lm-v { font-size: 28px; line-height: 36px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--text-primary); transform-origin: left center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.lm-hour { font-variant-numeric: tabular-nums; }
.lm-fix { color: var(--teal-700); font-weight: 600; }
.lm-total.bad { border-color: var(--red-line); }
.lm-panel:empty { display: none; }
.lm-card { background: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: var(--radius-surface); padding: 14px 18px; box-shadow: var(--shadow-raised); min-width: 0; }
.lm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.lm-head h3 { margin: 0; font-weight: 700; }
/* Fly to totals */
.lm-fly { position: fixed; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 9999px; background: var(--teal-600); box-shadow: 0 0 0 5px rgba(13, 148, 136, .18); pointer-events: none; z-index: 65; }
.lm-fly.bad, .lm-sdot.bad { background: var(--red-700); box-shadow: 0 0 0 5px rgba(185, 28, 28, .15); }
.lm-fly.batch, .lm-sdot.batch { width: 16px; height: 16px; margin: -8px 0 0 -8px; }
@keyframes lm-bump { 0% { border-color: var(--teal-300); box-shadow: 0 0 0 4px rgba(15, 118, 110, .12); } 100% { border-color: var(--border-default); } }
@keyframes lm-bumpv { 0% { color: var(--teal-700); transform: scale(1.06); } 100% { color: var(--text-primary); transform: none; } }
.lm-total.lm-bump, .lm-total.lm-now { animation: lm-bump .6s ease-out; }
.lm-total.lm-bump .lm-v, .lm-total.lm-now .lm-v { animation: lm-bumpv .6s ease-out; }
/* Slide and count */
@keyframes lm-slidein { from { opacity: 0; transform: translateY(-14px); background-color: var(--teal-50); } to { opacity: 1; transform: none; background-color: transparent; } }
table.data tbody tr.lm-slide td { animation: lm-slidein .5s ease-out var(--flash-delay, 0ms) both; }
@keyframes lm-roll { from { transform: translateY(55%); opacity: 0; } to { transform: none; opacity: 1; } }
.lm-total.lm-roll .lm-v { animation: lm-roll .45s ease-out; }
/* Heartbeat */
.lm-pulse { display: flex; align-items: flex-end; gap: 3px; height: 64px; }
.lm-pulse span { flex: 1 1 0; min-width: 0; border-radius: 3px 3px 0 0; background: var(--teal-200); transform-origin: bottom; }
.lm-pulse span.idle { background: var(--border-default); }
.lm-pulse span.new { background: var(--teal-700); animation: lm-grow .5s ease-out; }
.lm-pulse span.bad { background: var(--red-700); }
@keyframes lm-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
/* Flow: computer → server → destination */
.lm-stream { position: relative; height: 170px; overflow: hidden; }
.lm-col { position: absolute; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: space-around; max-width: 32%; }
.lm-col.from { left: 0; }
.lm-col.to { right: 0; align-items: flex-end; }
.lm-node { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.lm-node > i { width: 7px; height: 7px; border-radius: 9999px; background: var(--teal-600); flex-shrink: 0; }
.lm-hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 10px 16px; border-radius: 14px; background: var(--teal-900); color: #fff; font-weight: 800; font-size: 13px; box-shadow: 0 0 0 6px rgba(15, 118, 110, .12); white-space: nowrap; max-width: 34%; overflow: hidden; text-overflow: ellipsis; }
.lm-hub.lm-hit { animation: lm-hubhit .5s ease-out; }
@keyframes lm-hubhit { 0% { box-shadow: 0 0 0 14px rgba(45, 212, 191, .35); } 100% { box-shadow: 0 0 0 6px rgba(15, 118, 110, .12); } }
.lm-sdot { position: absolute; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 9999px; background: var(--teal-600); box-shadow: 0 0 0 5px rgba(13, 148, 136, .18); pointer-events: none; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .lm-fly, .lm-sdot { display: none; }
  table.data tbody tr.flash td, table.data tbody tr.lm-slide td, .lm-total.lm-bump, .lm-total.lm-bump .lm-v, .lm-total.lm-now, .lm-total.lm-now .lm-v, .lm-total.lm-roll .lm-v, .lm-pulse span.new, .lm-hub.lm-hit { animation: none; }
}
body.motion-off .lm-fly, body.motion-off .lm-sdot { display: none; }
@media (max-width: 1100px) { .lm-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .lm-live { padding: 0 16px 12px; }
  .lm-totals { gap: 10px; }
  .lm-total { padding: 12px 14px; }
  .lm-v { font-size: 22px; line-height: 30px; }
}
/* ---- Control plane §6: Models ---- */
.models-highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 0 18px; }
.models-tile { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 16px 18px; text-align: left; font: inherit; color: var(--text-primary); background: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: var(--radius-surface); box-shadow: var(--shadow-raised); }
button.models-tile { cursor: pointer; }
button.models-tile:hover, button.models-tile:focus-visible { border-color: var(--teal-700); outline: none; }
.models-tile-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--bg-primary); color: #fff; }
.models-tile-icon .icon { width: 18px; height: 18px; }
.models-tile.tone-warn .models-tile-icon { background: var(--amber-50); color: var(--amber-700); border: 1px solid var(--amber-line); }
.models-tile.tone-good .models-tile-icon { background: var(--green-50); color: var(--green-700); border: 1px solid var(--green-line); }
.models-tile-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.models-tile-text b { font-size: 15px; font-weight: 700; }
.models-name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.models-table { margin: 0 18px; background: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: var(--radius-surface); box-shadow: var(--shadow-raised); overflow: hidden; min-width: 0; }
.models-table td.num { font-variant-numeric: tabular-nums; }
.models-measure { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.models-measure-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-variant-numeric: tabular-nums; }
.models-measure .share-fill { background: var(--teal-700); }
.models-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.models-tag { padding: 1px 8px; border-radius: 9999px; background: var(--ds-paper); border: 1px solid var(--border-default); color: var(--text-secondary); white-space: nowrap; }
.models-empty { margin: 0 18px; padding: 28px 18px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; background: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: var(--radius-surface); }
.models-empty p { margin: 0; }
@media (max-width: 899px) { .models-highlights { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .models-highlights { padding: 0 16px; } .models-table, .models-empty { margin: 0 16px; } }
/* ---- Control plane §6: Analytics ---- */
.an-page .an-scope { padding-top: 12px; color: var(--text-secondary); }
.an-kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 12px 18px 0; }
.an-kpi-grid.big { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.an-kpi-card { background: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: var(--radius-surface); box-shadow: var(--shadow-raised); padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.an-kpi-card.big { padding: 14px 18px; }
.an-kpi-name { color: var(--text-secondary); font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-kpi-num { color: var(--text-primary); font-size: 20px; line-height: 28px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-kpi-card.big .an-kpi-num { font-size: 28px; line-height: 36px; letter-spacing: -0.03em; }
.an-kpi-foot { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); min-width: 0; }
.an-kpi-card.big .an-kpi-foot { justify-content: space-between; }
.an-kpi-note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.an-kpi-card .sparkline { position: static; display: block; width: 100%; height: 22px; margin-top: 6px; }
.an-page .trend-chip { height: auto; padding: 0; gap: 3px; background: none; font-size: 12px; font-weight: 700; }
.an-page .trend-chip .icon { width: 14px; height: 14px; }
.an-page .trend-chip.flat { color: var(--text-secondary); font-weight: 600; }
.an-page .an-top { padding: 16px 18px 0; }
.an-page .chart-card { background: var(--bg-canvas); border-color: var(--border-default); box-shadow: var(--shadow-raised); padding: 18px 20px; }
.an-page .chart-card h3 { font-size: 15px; line-height: 22px; font-weight: 800; letter-spacing: -0.01em; }
.an-page .chart-card header { align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.an-page .chart-card header > .legend { flex: 0 1 auto; }
.an-page .an-card-controls { order: 0; flex-basis: auto; align-items: center; }
.an-page .an-section-head h2 { font-size: 17px; line-height: 24px; font-weight: 800; letter-spacing: -0.01em; color: var(--text-primary); }
.an-page .seg { display: inline-flex; flex-wrap: wrap; background: var(--ds-paper); border: 1px solid var(--border-default); border-radius: 9999px; padding: 3px; gap: 2px; }
.an-page .seg button { border: 0; background: none; border-radius: 9999px; padding: 4px 12px; font-size: 13px; font-weight: 600; color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.an-page .seg button.on { background: var(--bg-canvas); color: var(--text-primary); box-shadow: 0 1px 2px rgba(15, 23, 41, .12); }
.an-page .an-card-controls .vb-chip { height: 32px; }
.an-link { color: var(--teal-700); font-weight: 600; font-size: 13px; text-decoration: underline; text-decoration-color: var(--teal-300); text-underline-offset: 3px; white-space: nowrap; }
.an-breakdown { padding-bottom: 6px; }
.an-table-scroll { overflow-x: auto; margin: 0 -20px; }
.an-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.an-table th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: 0.025em; text-transform: uppercase; color: var(--text-secondary); padding: 10px 12px; border-bottom: 1px solid var(--border-default); background: var(--ds-paper); white-space: nowrap; }
.an-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-default); white-space: nowrap; vertical-align: middle; color: var(--text-primary); }
.an-table tr:last-child td { border-bottom: 0; }
.an-table th:first-child, .an-table td:first-child { padding-left: 20px; }
.an-table th:last-child, .an-table td:last-child { padding-right: 20px; }
.an-table .r { text-align: right; }
.an-table .r .trend-chip { justify-content: flex-end; }
.an-num { font-variant-numeric: tabular-nums; }
.an-bd-name { font: inherit; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 13px; color: var(--text-primary); background: none; border: 0; padding: 0; text-align: left; max-width: 320px; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle; }
button.an-bd-name { cursor: pointer; }
button.an-bd-name:hover, button.an-bd-name:focus-visible { color: var(--teal-700); text-decoration: underline; text-underline-offset: 3px; }
.an-share { display: inline-flex; align-items: center; gap: 8px; }
.an-meter { display: block; width: 160px; height: 6px; border-radius: 9999px; background: var(--ds-paper); border: 1px solid var(--border-default); overflow: hidden; }
.an-meter span { display: block; height: 100%; background: var(--teal-700); }
.an-share-pct { font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; min-width: 36px; }
.an-card-empty { color: var(--text-secondary); padding: 8px 0 12px; }
.an-page .an-session { padding: 10px 0; }
.an-page .an-session:hover { background: none; }
.an-page .an-session:hover .an-session-main span:first-child { color: var(--teal-700); }
.an-page .an-session-cost { font-weight: 800; }
@media (max-width: 1100px) {
  .an-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .an-kpi-grid.big { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .an-kpi-grid, .an-page .an-top { margin-left: 16px; margin-right: 16px; }
  .an-page .an-top { padding-left: 0; padding-right: 0; }
  .an-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an-kpi-card.big .an-kpi-num { font-size: 24px; line-height: 32px; }
  .an-page .chart-card { padding: 16px; }
  .an-table-scroll { margin: 0 -16px; }
  .an-meter { width: 80px; }
  .an-page .seg { max-width: 100%; }
}
.an-page .chart-card header .chart-actions { margin-left: auto; }
.an-breakdown header .an-card-controls { order: 10; flex-basis: 100%; }
.an-page .an-top { align-items: start; }
/* ---- Control plane §6: Computers ---- */
/* Computers waiting to join: approve or reject each, or all at once. */
.clients-approval { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; padding: 10px 14px; border: 1px solid var(--amber-line); border-radius: 14px; background: var(--amber-50); }
.clients-approval-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; }
.clients-approval-head > .icon { color: var(--amber-700); flex-shrink: 0; }
.clients-approval-head b { font-weight: 700; }
.clients-approval-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.clients-approval-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 6px 0 6px 26px; border-top: 1px solid var(--amber-line); min-width: 0; }
.clients-approval-name { border: 0; background: none; padding: 0; cursor: pointer; min-width: 0; max-width: 100%; }
.clients-approval-name:hover .truncate { text-decoration: underline; }
/* Computers grouped by where their settings come from. */
.clients-groups { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.clients-group { background: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: var(--radius-surface); box-shadow: var(--shadow-raised); overflow: hidden; min-width: 0; }
.clients-group-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 16px 20px 12px; }
.clients-group-head p { margin: 2px 0 0; }
.clients-group-title { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; color: var(--text-primary); }
.clients-group-count { color: var(--text-secondary); font-weight: 600; }
.clients-foot { margin: 0; }
/* The settings editor: an index, sections of rows, Advanced, the apply bar. */
.cs-index { position: sticky; top: -24px; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 0; background: var(--bg-canvas); }
.drawer-body .cs-index { top: -18px; }
.cs-index-item { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-default); background: var(--bg-canvas); border-radius: 9999px; padding: 4px 10px; font-size: 13px; font-weight: 600; color: var(--text-primary); cursor: pointer; white-space: nowrap; }
.cs-index-item:hover { background: var(--teal-50); }
.cs-index-item[aria-pressed="true"] { background: var(--teal-50); border-color: var(--teal-200); color: var(--teal-800); }
.cs-index-count { color: var(--text-secondary); font-weight: 500; }
.cs-index-sep { width: 1px; height: 20px; background: var(--border-default); margin: 0 4px; }
.cs-section { border: 1px solid var(--border-default); border-radius: var(--radius-surface); background: var(--bg-canvas); padding: 4px 16px; min-width: 0; scroll-margin-top: 56px; }
.cs-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 12px 0 4px; }
.cs-section-title { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: var(--text-primary); }
.cs-advanced > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 12px 0; }
.cs-advanced > summary::-webkit-details-marker { display: none; }
.cs-advanced > summary::before { content: "›"; display: inline-block; width: 10px; color: var(--text-secondary); transition: transform .15s; }
.cs-advanced[open] > summary::before { transform: rotate(90deg); }
.cs-rows { display: flex; flex-direction: column; min-width: 0; }
.cs-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding: 12px 0; border-top: 1px solid var(--border-default); min-width: 0; }
.cs-section-head + .cs-rows > .cs-row:first-child { border-top: 0; }
.cs-row.has-error .cs-title > span:first-child { color: var(--red-700); }
.cs-row.cs-changed { box-shadow: inset 3px 0 0 var(--teal-600); padding-left: 12px; }
.cs-text { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cs-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.cs-control { flex: 0 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cs-control > .input, .cs-control > select, .cs-control > input { width: 100%; }
.cs-more { flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.cs-more:empty { display: none; }
.src-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--border-default); background: var(--ds-paper); color: var(--text-secondary); font-size: 11px; font-weight: 600; white-space: nowrap; }
.src-badge.src-override { border-color: var(--teal-200); background: var(--teal-50); color: var(--teal-800); }
.src-badge.src-policy, .src-badge.src-rollout { border-color: var(--amber-line); background: var(--amber-50); color: var(--amber-700); }
.src-badge.src-restart { border-color: var(--amber-line); background: var(--amber-50); color: var(--amber-700); }
.cs-editor[data-defaults="true"] .src-badge.src-default { border-color: var(--teal-200); background: var(--teal-50); color: var(--teal-800); }
.cs-footer { position: sticky; bottom: -24px; z-index: 2; padding: 12px 0 0; background: var(--bg-canvas); }
.drawer-body .cs-footer { bottom: -18px; padding-bottom: 18px; }
.modal-actions:has(> .cs-footer) { position: sticky; bottom: -24px; z-index: 2; margin: 0 -24px -24px; padding: 0 24px 24px; background: var(--bg-canvas); }
.modal .cs-footer { position: static; padding-top: 12px; flex: 1 1 auto; min-width: 0; }
.cs-applybar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; border: 1px solid var(--teal-200); border-radius: var(--radius-surface); background: var(--bg-canvas); box-shadow: var(--shadow-raised); }
@media (max-width: 767px) {
  .cs-control { flex-basis: 100%; }
  .cs-index { position: static; }
}
/* ---- Control plane §6: Routing ---- */
.routing-bar { padding: 12px 18px 0; min-width: 0; }
.routing-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 16px 18px 0; }
.routing-kpi { background: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: var(--radius-surface); box-shadow: var(--shadow-raised); padding: 14px 18px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.routing-kpi-label { color: var(--text-secondary); font-size: 13px; font-weight: 600; }
.routing-kpi-value { color: var(--text-primary); font-size: 28px; line-height: 36px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.routing-kpi-foot { color: var(--text-secondary); font-size: 12px; }
.routing-kpi .routing-meter { margin-top: 6px; }
.routing-warn { color: var(--amber-700, var(--tone-warn)); }
.routing-meter { height: 6px; border-radius: 9999px; background: var(--ds-paper); border: 1px solid var(--border-default); overflow: hidden; min-width: 80px; }
.routing-meter > span { display: block; height: 100%; background: var(--teal-700); }
.routing-meter.warn > span { background: var(--tone-warn); }
.routing-meter.bad > span { background: var(--tone-bad); }
.routing-used { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.routing-used .routing-meter { width: 100%; max-width: 200px; }
.routing-stack { display: flex; flex-direction: column; gap: 16px; padding: 16px 18px 48px; min-width: 0; }
.routing-card { background: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: var(--radius-surface); box-shadow: var(--shadow-raised); padding: 18px 20px; min-width: 0; }
.routing-card.flush { padding: 0; overflow: hidden; }
.routing-card.flush > .routing-card-head { padding: 16px 20px 12px; margin: 0; }
.routing-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.routing-card-head h3 { margin: 0; font-size: 15px; line-height: 22px; font-weight: 800; letter-spacing: -0.01em; color: var(--text-primary); }
.routing-meta { color: var(--text-secondary); font-size: 13px; }
.routing-hint { color: var(--text-secondary); font-size: 13px; margin: 8px 0 0; }
.routing-card-foot { display: flex; justify-content: flex-end; margin-top: 12px; }
.routing-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; flex: 1 1 auto; }
.routing-search { flex: 0 1 220px; min-width: 0; height: 34px; }
.routing-sentence { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15px; line-height: 32px; color: var(--text-primary); }
.routing-sentence .routing-inline { width: auto; min-width: 0; max-width: 100%; height: 34px; padding: 4px 10px; font-weight: 600; font-size: 15px; }
.routing-sentence select.routing-inline { padding-right: 28px; }
.routing-sentence .routing-money { width: 100px; }
.routing-sentence .routing-percent { width: 72px; }
.routing-src { font-size: 11px; font-weight: 600; border-radius: 6px; padding: 0 6px; border: 1px solid var(--border-default); color: var(--text-secondary); background: var(--ds-paper); }
.routing-src.own { border-color: var(--teal-200); background: var(--teal-50); color: var(--teal-800); }
.routing-link { font-size: 13px; font-weight: 600; color: var(--teal-700); }
.routing-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.routing-rules li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; border-top: 1px solid var(--border-default); font-size: 14px; color: var(--text-primary); }
.routing-rules li:first-child { border-top: 0; }
@media (max-width: 1023px) { .routing-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .routing-bar { padding: 8px 16px 0; }
  .routing-kpis { padding: 12px 16px 0; gap: 10px; }
  .routing-stack { padding: 12px 16px 40px; }
  .routing-card { padding: 16px; }
  .routing-card.flush > .routing-card-head { padding: 14px 16px 10px; }
  .routing-search { flex: 1 1 100%; }
}

/* ---- Control plane §6: Destinations ---- */
.dest-card { background: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: var(--radius-surface); box-shadow: var(--shadow-raised); padding: 18px 20px; margin: 16px 18px 0; min-width: 0; }
.dest-card.flush { padding: 0; overflow: hidden; }
.dest-card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.dest-card-head h3 { margin: 0; font-size: 15px; line-height: 22px; font-weight: 800; letter-spacing: -0.01em; color: var(--text-primary); }
.dest-overline { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--red-700, var(--tone-bad)); }
.dest-fix { border-color: var(--red-line, var(--border-default)); }
.dest-fix-text { margin: 0 0 14px; color: var(--text-secondary); font-size: 13px; overflow-wrap: anywhere; }
.dest-fix-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; align-items: end; }
.dest-fix-row .actions { margin: 0; }
.dest-center { text-align: left; }
.dest-sig { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; font-size: 13px; font-weight: 600; }
.dest-sig.on { color: var(--tone-good); }
.dest-sig.on .icon { width: 18px; height: 18px; }
.dest-sig.off, .dest-sig.na { color: var(--text-secondary); font-weight: 500; }
a.dest-sig { text-decoration: none; }
a.dest-sig:hover { text-decoration: underline; }
.destination-gallery { background: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: var(--radius-surface); box-shadow: var(--shadow-raised); margin: 16px 18px 48px; padding: 18px 20px; }
@media (max-width: 767px) {
  .dest-card { margin: 12px 16px 0; padding: 16px; }
  .dest-card.flush { padding: 0; }
  .dest-fix-row { grid-template-columns: 1fr; }
  .destination-gallery { margin: 12px 16px 40px; padding: 16px; }
}
/* ---- Control plane §6: Dashboard ---- */
.cpd { display: flex; flex-direction: column; gap: 16px; padding: 12px 18px 40px; min-width: 0; }
.cpd-g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cpd-g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cpd-g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cpd-g21 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; }
.cpd-g12 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.cpd-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cpd-g21 > *, .cpd-g3 > *, .cpd-g2 > * { min-width: 0; }
.cpd-kpi { background: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: var(--radius-surface); box-shadow: var(--shadow-raised); padding: 14px 18px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cpd-kpi-l { color: var(--text-secondary); font-size: 13px; font-weight: 600; }
.cpd-kpi-v { color: var(--text-primary); font-size: 28px; line-height: 36px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpd-kpi-f { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 8px; font-size: 12px; color: var(--text-secondary); }
.cpd-trend { font-weight: 700; font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.cpd-trend.up { color: var(--green-700); }
.cpd-trend.down { color: var(--red-700); }
.cpd-card, .cpd .chart-card { background: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: var(--radius-surface); box-shadow: var(--shadow-raised); padding: 18px 20px; min-width: 0; }
.cpd .chart-card { gap: 12px; grid-column: auto; }
.cpd-card { display: flex; flex-direction: column; gap: 4px; }
.cpd-card.flush { padding: 0; overflow: hidden; gap: 0; }
.cpd-card.flush > .cpd-hd { padding: 14px 20px 12px; }
.cpd-hd { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.cpd-hd h3, .cpd .chart-card h3 { margin: 0; font-size: 15px; line-height: 22px; font-weight: 800; letter-spacing: -0.01em; color: var(--text-primary); }
.cpd-hd-acts { display: inline-flex; align-items: center; gap: 12px; }
.cpd-meta { color: var(--text-secondary); font-size: 13px; }
.cpd-lnk { color: var(--teal-700); font-weight: 600; font-size: 14px; text-decoration: underline; text-decoration-color: var(--teal-300); text-underline-offset: 3px; cursor: pointer; }
.cpd .chart-card header { flex-wrap: wrap; align-items: center; }
.cpd .chart-card .chart-heading { min-width: 0; flex: 1 1 200px; }
.cpd .chart-card .chart-subtitle { color: var(--text-secondary); }
.cpd .bar-track { height: 8px; border-radius: 9999px; background: var(--ds-paper); border: 1px solid var(--border-default); }
.cpd .bar-fill { border-radius: 9999px; }
.cpd .bar-row .label { font-weight: 600; font-size: 13px; }
.cpd .bar-row .value { font-size: 13px; }
.cpd-seg { display: inline-flex; background: var(--ds-paper); border: 1px solid var(--border-default); border-radius: 9999px; padding: 3px; gap: 2px; }
.cpd-seg button { border: 0; background: none; border-radius: 9999px; padding: 3px 12px; font-size: 13px; font-weight: 600; color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.cpd-seg button.on { background: var(--bg-canvas); color: var(--text-primary); box-shadow: 0 1px 2px rgba(15, 23, 41, .12); }
.cpd-bd { display: inline-flex; align-items: center; gap: 5px; border-radius: 9999px; padding: 2px 9px 2px 7px; font-size: 12px; line-height: 16px; font-weight: 600; border: 1px solid var(--border-default); background: var(--ds-paper); color: var(--text-secondary); white-space: nowrap; }
.cpd-bd-icon { width: 12px; height: 12px; flex-shrink: 0; }
.cpd-bd.good { background: var(--green-50); border-color: var(--green-line); color: var(--green-700); }
.cpd-bd.warn { background: var(--amber-50); border-color: var(--amber-line); color: var(--amber-700); }
.cpd-bd.bad { background: var(--red-50); border-color: var(--red-line); color: var(--red-700); }
.cpd-bd.info { background: var(--teal-50); border-color: var(--teal-200); color: var(--teal-800); padding-left: 9px; }
.cpd-rows { display: flex; flex-direction: column; }
.cpd-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 12px 0; border-bottom: 1px solid var(--border-default); }
.cpd-row:last-child { border-bottom: 0; }
.cpd-row-tx { flex: 1 1 220px; min-width: 0; }
.cpd-row-t { color: var(--text-primary); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.cpd-hn { color: var(--text-secondary); font-size: 13px; margin-top: 2px; }
.cpd-outcomes { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border-default); }
.cpd-rows + .cpd-outcomes { margin-top: 0; }
.cpd-stack { display: flex; height: 8px; border-radius: 9999px; overflow: hidden; background: var(--ds-paper); gap: 2px; }
.cpd-stack span { display: block; height: 100%; min-width: 3px; }
.cpd-outcome-list { display: flex; flex-direction: column; gap: 6px; }
.cpd-outcome { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }
.cpd-outcome-name { display: inline-flex; align-items: center; gap: 8px; color: var(--text-primary); }
.cpd-outcome-name i { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.cpd-outcome-v { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.cpd-foot { padding-top: 10px; }
.cpd-empty { margin: 0; padding: 20px 0; text-align: center; color: var(--text-tertiary); }
.cpd-tw { overflow-x: auto; }
table.cpd-t { width: 100%; border-collapse: collapse; font-size: 14px; }
.cpd-t th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: 0.025em; text-transform: uppercase; color: var(--text-secondary); padding: 10px 12px; border-bottom: 1px solid var(--border-default); border-top: 1px solid var(--border-default); white-space: nowrap; background: var(--ds-paper); }
.cpd-t td { padding: 11px 12px; border-bottom: 1px solid var(--border-default); vertical-align: middle; white-space: nowrap; color: var(--text-primary); }
.cpd-t tbody tr { cursor: pointer; }
.cpd-t tbody tr:hover td, .cpd-t tbody tr:focus-visible td { background: var(--bg-hover); }
.cpd-t tr:last-child td { border-bottom: 0; }
.cpd-t .r { text-align: right; font-variant-numeric: tabular-nums; }
.cpd-t .s { color: var(--text-secondary); font-size: 13px; }
.cpd-t th:first-child, .cpd-t td:first-child { padding-left: 20px; }
.cpd-t th:last-child, .cpd-t td:last-child { padding-right: 20px; }
.cpd-computer { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; max-width: 260px; min-width: 0; }
.cpd-dot { width: 8px; height: 8px; border-radius: 9999px; flex: none; }
.cpd-dot.on { background: var(--green-400); }
.cpd-dot.off { background: var(--color-neutral-350); }
.cpd-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.cpd-tag { display: inline-flex; border-radius: 6px; padding: 1px 7px; font-size: 12px; font-weight: 600; background: var(--ds-paper); border: 1px solid var(--border-default); color: var(--text-secondary); }
.cpd-muted { color: var(--text-tertiary); }
.cpd-today-hd { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cpd-today-hd h2 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; color: var(--text-primary); }
.cpd-checks { display: flex; flex-direction: column; }
.cpd-check { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-default); }
.cpd-check:last-child { border-bottom: 0; }
.cpd-check-tx { flex: 1 1 auto; min-width: 0; color: var(--text-primary); overflow-wrap: anywhere; }
.cpd-check-tx b { font-weight: 600; }
.cpd-check-i { width: 22px; height: 22px; border-radius: 9999px; display: grid; place-items: center; flex: none; }
.cpd-check-i .icon { width: 14px; height: 14px; }
.cpd-check-i.ok { background: var(--green-50); color: var(--green-700); }
.cpd-check-i.warn { background: var(--amber-50); color: var(--amber-700); }
.cpd-check-i.bad { background: var(--red-50); color: var(--red-700); }
.cpd .spander-note { background: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: var(--radius-surface); }
@media (max-width: 1100px) {
  .cpd-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cpd-g3, .cpd-g21, .cpd-g12 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .cpd { padding: 8px 16px 32px; gap: 12px; }
  .cpd-g2 { grid-template-columns: minmax(0, 1fr); }
  .cpd-kpi { padding: 12px 14px; }
  .cpd-kpi-v { font-size: 22px; line-height: 30px; }
  .cpd-card, .cpd .chart-card { padding: 16px; }
  .cpd-card.flush > .cpd-hd { padding: 14px 16px 10px; }
}
/* ---- Control plane §6: MCP gateway and Guardrails ---- */
/* Adding a server (McpGateway.dc.html): steps, a card per step, a summary. */
.mcpgw-flow { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mcpgw-flow-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mcpgw-flow-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mcpgw-flow-title a { color: var(--teal-700); font-weight: 600; text-decoration: none; }
.mcpgw-flow-title a:hover { text-decoration: underline; }
.mcpgw-flow-title h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -.01em; color: var(--text-primary); overflow-wrap: anywhere; }
.mcpgw-flow-title p { margin: 0; }
.mcpgw-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mcpgw-step, .mcpgw-step > button { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.mcpgw-step { border: 1px solid var(--border-default); background: var(--bg-canvas); border-radius: 9999px; padding: 5px 14px 5px 5px; }
.mcpgw-step > button { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; color: inherit; }
.mcpgw-step > button:hover span { text-decoration: underline; }
.mcpgw-step i { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 9999px; background: var(--ds-paper); border: 1px solid var(--border-default); font-style: normal; font-size: 12px; }
.mcpgw-step i .icon { width: 13px; height: 13px; }
.mcpgw-step.on { border-color: var(--teal-200); background: var(--teal-50); color: var(--teal-800); }
.mcpgw-step.on i { background: var(--bg-primary); border-color: var(--bg-primary); color: #fff; }
.mcpgw-step.done i { background: var(--teal-50); border-color: var(--teal-200); color: var(--teal-700); }
.mcpgw-flow-split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.mcpgw-flow-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mcpgw-flow-card { gap: 14px; }
.mcpgw-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mcpgw-opts { display: flex; flex-direction: column; gap: 8px; }
.mcpgw-opt { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--border-default); border-radius: 14px; cursor: pointer; background: var(--bg-canvas); }
.mcpgw-opt:hover { background: var(--bg-hover); }
.mcpgw-opt.on { border-color: var(--teal-600); background: var(--teal-50); }
.mcpgw-opt input { margin: 2px 0 0; accent-color: var(--teal-700); flex: none; }
.mcpgw-opt-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; color: var(--text-secondary); }
.mcpgw-opt-text b { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.mcpgw-tile { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--teal-200); background: var(--teal-50); color: var(--teal-800); font-size: 13px; }
.mcpgw-tile .icon { flex: none; color: var(--teal-700); }
.mcpgw-kv-box { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.mcpgw-kv-list { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.mcpgw-kv-list:empty { display: none; }
.mcpgw-kv { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) 32px; gap: 6px; align-items: center; }
.mcpgw-link { border: 0; background: none; padding: 0; font: inherit; color: var(--teal-700); font-weight: 600; cursor: pointer; }
.mcpgw-link:hover { text-decoration: underline; }
.mcpgw-more { padding: 0; gap: 0; }
.mcpgw-more > summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; padding: 16px 20px; cursor: pointer; }
.mcpgw-more > .mcpgw-add { padding: 0 20px 20px; }
.mcpgw-table-wrap { border: 1px solid var(--border-default); border-radius: 14px; overflow-x: auto; }
.mcpgw-tool-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mcpgw-tool-table th { text-align: left; padding: 8px 12px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); background: var(--ds-paper); border-bottom: 1px solid var(--border-default); }
.mcpgw-tool-table td { padding: 8px 12px; border-bottom: 1px solid var(--border-default); vertical-align: middle; }
.mcpgw-tool-table tr:last-child td { border-bottom: 0; }
.mcpgw-tool-table td .mono { overflow-wrap: anywhere; }
.mcpgw-kind-sm { display: none; }
.mcpgw-seg { display: inline-flex; background: var(--ds-paper); border: 1px solid var(--border-default); border-radius: 9999px; padding: 2px; gap: 2px; }
.mcpgw-seg button { border: 0; background: none; border-radius: 9999px; padding: 3px 10px; font-size: 12px; font-weight: 600; color: var(--text-secondary); cursor: pointer; }
.mcpgw-seg button.on { background: var(--bg-canvas); color: var(--text-primary); box-shadow: 0 1px 2px rgba(15, 23, 41, .12); }
.mcpgw-flow-links { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.mcpgw-summary { position: sticky; top: 16px; gap: 10px; }
.mcpgw-summary h3 { margin: 0 0 4px; }
.mcpgw-check { display: flex; align-items: flex-start; gap: 10px; }
.mcpgw-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 9999px; background: var(--ds-paper); color: var(--text-secondary); }
.mcpgw-mark .icon { width: 13px; height: 13px; }
.mcpgw-mark.tone-good { background: var(--green-50); color: var(--green-700); }
.mcpgw-mark.tone-warn { background: var(--amber-50); color: var(--amber-700); }
.mcpgw-mark.tone-bad { background: var(--red-50); color: var(--red-700); }
.mcpgw-mark.tone-info { background: var(--teal-50); color: var(--teal-700); }
.mcpgw-summary-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.mcpgw-summary-actions .button { justify-content: center; }

/* Guardrails (Guardrails.dc.html): rules as sentences, the builder. */
.guard-rules { gap: 8px; }
.guard-rows { display: flex; flex-direction: column; }
.guard-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border-default); }
.guard-row:first-child { border-top: 0; }
.guard-row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
.guard-row-text .status-badge { vertical-align: 1px; margin-right: 2px; }
.guard-row.off .guard-row-text > div:first-child { color: var(--text-secondary); }
.guard-row-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.guard-starts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.guard-chip { display: inline-flex; align-items: center; border: 1px solid var(--border-default); background: var(--bg-canvas); border-radius: 9999px; padding: 4px 12px; font-size: 13px; font-weight: 600; color: var(--text-primary); cursor: pointer; }
.guard-chip:hover { background: var(--bg-hover); }
.guard-chip.set { background: var(--teal-50); border-color: var(--teal-200); color: var(--teal-800); }
.guard-sentence { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15px; color: var(--text-primary); }
.guard-sentence select.input { width: auto; max-width: 100%; height: 34px; border-radius: 9999px; font-weight: 600; }
.guard-words { border: 1px solid var(--border-default); background: var(--bg-canvas); }
.guard-advanced > summary { cursor: pointer; color: var(--teal-700); font-weight: 600; }
.guard-advanced[open] > summary { margin-bottom: 12px; }
.guard-preview { border-radius: 14px; padding: 12px 14px; }

@media (max-width: 1023px) {
  .mcpgw-flow-split { grid-template-columns: minmax(0, 1fr); }
  .mcpgw-summary { position: static; }
}
@media (max-width: 767px) {
  .mcpgw-grid2 { grid-template-columns: minmax(0, 1fr); }
  .mcpgw-step { padding-right: 10px; }
  .mcpgw-kind-col { display: none; }
  .mcpgw-kind-sm { display: block; }
  .mcpgw-tool-table th, .mcpgw-tool-table td { padding: 8px; }
  .mcpgw-seg button { padding: 3px 8px; }
  .guard-row { flex-wrap: wrap; }
  .guard-row-actions { width: 100%; justify-content: space-between; }
  .guard-sentence { font-size: 14px; }
  .guard-sentence select.input { flex: 1 1 100%; }
}

/* ---- Control plane §6: Settings ---- */
.st-search.search-field.toolbar-variant { width: 100%; }
.st-search input { width: 100%; }
.st-attn { display: flex; flex-direction: column; gap: 6px; }
.st-attn[hidden], .st-vbar[hidden], .st-apply[hidden], .st-list[hidden], .st-body[hidden] { display: none; }
.st-attn-item { display: flex; align-items: center; gap: 10px; min-width: 0; border-radius: 12px; padding: 7px 12px; border: 1px solid var(--amber-line); background: var(--amber-50); font-size: 13px; }
.st-attn-item.level-critical { border-color: var(--red-line); background: var(--red-50); }
.st-attn-icon { display: grid; place-items: center; color: var(--amber-700); flex-shrink: 0; }
.st-attn-item.level-critical .st-attn-icon { color: var(--red-700); }
.st-attn-icon .icon { width: 16px; height: 16px; }
.st-attn-text { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-attn-text b { font-weight: 700; }
.st-attn-acts { display: flex; gap: 6px; flex-shrink: 0; margin-left: auto; }
.st-vbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 18px 0; padding: 8px; background: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: var(--radius-surface); box-shadow: var(--shadow-raised); }
.st-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--ds-paper); border: 1px solid var(--border-default); border-radius: var(--radius-pill); }
.st-seg button { border: 0; background: none; border-radius: var(--radius-pill); padding: 4px 12px; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-secondary); cursor: pointer; }
.st-seg button.on { background: var(--bg-canvas); color: var(--text-primary); box-shadow: 0 1px 2px rgba(15, 23, 41, .12); }
.st-seg button:disabled { cursor: not-allowed; opacity: .6; }
.st-seg button:focus-visible { outline: 2px solid var(--teal-700); outline-offset: 1px; }
.st-k { margin-left: 4px; font-weight: 700; color: var(--teal-700); }
.st-layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; padding: 16px 18px 48px; }
.st-index-head { padding: 12px 10px 4px; }
.st-index-mark { flex-shrink: 0; display: inline-grid; place-items: center; width: 14px; height: 14px; }
.st-index-dot { width: 8px; height: 8px; border-radius: 9999px; background: var(--amber-700); }
.st-index-mark.critical .st-index-dot { background: var(--red-700); }
.st-index-count { flex-shrink: 0; min-width: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--bg-primary); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.st-index-count.info { background: none; color: var(--teal-700); }
.st-main { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.st-body { display: flex; flex-direction: column; gap: 12px; min-height: calc(100vh - 200px); }
/* Settings use the page's width (kit pages put pairs of sections side by
   side when wide, kitPair); a section still drawn as one old-style panel
   keeps a form's width. */
.st-body > .panel { max-width: 1040px; }
.st-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.st-note { margin: 0; }
.st-group { display: flex; flex-direction: column; gap: 2px; }
.st-group-head { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .025em; text-transform: uppercase; color: var(--teal-700); }
.st-rows { display: flex; flex-direction: column; }
.st-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 14px 0; border-bottom: 1px solid var(--border-default); border-radius: 4px; transition: background-color 400ms ease-out; }
.st-row:last-child { border-bottom: 0; }
.st-row-text { flex: 1 1 260px; min-width: 0; }
.st-row-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 600; }
.st-row-hint { margin-top: 2px; }
.st-row-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.st-tags { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.st-tags:empty { display: none; }
.st-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; line-height: 18px; border-radius: 6px; padding: 0 6px; border: 1px solid var(--border-default); color: var(--text-secondary); background: var(--ds-paper); white-space: nowrap; }
.st-tag .icon { width: 11px; height: 11px; }
.st-tag.changed { border-color: var(--teal-200); background: var(--teal-50); color: var(--teal-800); }
.st-tag.lock { border-color: var(--amber-line); background: var(--amber-50); color: var(--amber-700); }
.st-inline { display: flex; align-items: center; gap: 8px; min-width: 0; }
.st-wrap { flex-wrap: wrap; }
.st-wrap select { width: auto; min-width: 140px; }
.st-num { width: 120px; }
.st-text { width: 220px; max-width: 100%; }
details.st-more { border: 1px solid var(--border-default); border-radius: 14px; background: var(--bg-canvas); }
details.st-more > summary { cursor: pointer; padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; list-style: none; font-weight: 700; }
details.st-more > summary::-webkit-details-marker { display: none; }
details.st-more > .st-rows { padding: 0 16px 4px; }
.st-flash { background: var(--teal-50); }
.st-apply { position: sticky; bottom: 16px; z-index: 5; max-width: 920px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px; background: var(--bg-canvas); border: 1px solid var(--teal-200); border-radius: var(--radius-surface); box-shadow: var(--shadow-floating); }
.st-apply .state-text { display: inline-flex; }
.st-apply-sp { flex: 1 1 0; }
.st-list { display: flex; flex-direction: column; gap: 14px; padding: 20px; background: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: var(--radius-surface); box-shadow: var(--shadow-raised); }
.st-list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.st-list-head h3 { margin: 0; }
.st-list > p { margin: 0; }
.st-list-group { display: flex; flex-direction: column; gap: 2px; }
.st-list-group .st-index-head { padding: 4px 0; }
.st-list-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.st-list-rows > li + li { border-top: 1px solid var(--border-default); }
.st-list-row { width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 0; border-radius: 8px; display: grid; grid-template-columns: minmax(160px, 1fr) minmax(0, 1fr) 16px; align-items: center; gap: 12px; padding: 10px 6px; cursor: pointer; }
.st-list-row:hover:not(:disabled) { background: var(--teal-50); }
.st-list-row:disabled { cursor: default; }
.st-list-row:focus-visible { outline: 2px solid var(--teal-700); outline-offset: 1px; }
.st-list-row > .icon { width: 16px; height: 16px; color: var(--text-tertiary); }
.st-list-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.st-list-value .state-text { display: inline-flex; vertical-align: middle; }
.st-review { display: flex; flex-direction: column; gap: 12px; }
.st-review-list { margin: 4px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.st-review p { margin: 0; }
@media (max-width: 767px) {
  .st-vbar { margin: 12px 16px 0; }
  .st-layout { padding: 12px 16px 40px; gap: 12px; }
  .st-main { flex-basis: 100%; }
  .st-body { min-height: 0; }
  .st-list { padding: 16px; }
  .st-list-row { grid-template-columns: minmax(0, 1fr) 16px; row-gap: 2px; }
  .st-list-name { grid-column: 1; }
  .st-list-value { grid-column: 1; grid-row: 2; }
  .st-list-row > .icon { grid-column: 2; grid-row: 1 / span 2; }
  .st-row-ctl { width: 100%; }
  .st-row:has(> .st-row-ctl > .switch) { flex-wrap: nowrap; }
  .st-row-ctl:has(> .switch) { width: auto; }
  .st-text { width: 100%; }
}
.st-body [tabindex="-1"]:focus { outline: none; }

/* The Settings menu (settings-menu.js): it replaces the main menu while
   Settings, the Setup guide or About is open, so one menu shows at a time. */
.nav.settings-menu { gap: 2px; }
.settings-back { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 32px; padding: 0 8px; border-radius: var(--radius-chip); color: var(--text-secondary); text-decoration: none; }
.settings-back:hover { background: var(--bg-hover); color: var(--text-primary); }
.settings-back:focus-visible, .settings-menu-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.settings-menu-title { padding: 6px 10px 8px; }
.nav.settings-menu .st-search { margin: 0 0 8px; }
.settings-menu-group { display: flex; flex-direction: column; gap: 1px; padding-bottom: 10px; }
.settings-menu-head { padding: 4px 10px; color: var(--text-tertiary); font-weight: 600; }
.settings-menu-item { display: flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border-radius: var(--radius-chip); color: var(--text-primary); text-decoration: none; }
.settings-menu-item .nav-label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-menu-item:hover { background: var(--bg-hover); }
.settings-menu-item.active { background: var(--teal-50); color: var(--teal-800); font-weight: 700; }
/* The Dock has no sidebar: in Settings the menu shows instead of the dock. */
body.menu-dock.settings-menu #sidebar { display: flex; }
body.menu-dock.settings-menu main { padding-bottom: 0; }
@media (max-width: 767px) { body.menu-dock.settings-menu .hamburger { display: grid !important; } }

/* One chip in the header for the persistent notices (the organisation's
   guardrails, Secure SpanRoute traffic): always shown while they hold; the
   popover holds their words, as the bars did. */
.notice-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 9999px; border: 1px solid var(--border-default); background: var(--bg-canvas); color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.notice-chip:hover { background: var(--bg-hover); color: var(--text-primary); }
.notice-chip .icon { width: 14px; height: 14px; color: var(--teal-700); }
.notice-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.notice-popover { max-width: 360px; }
.notice-pop { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 6px 4px 10px; }
.notice-pop + .notice-pop { border-top: 1px solid var(--border-default); padding-top: 10px; }
.notice-pop-head { display: flex; align-items: center; gap: 6px; }
.notice-pop p { margin: 0; }
.icon-button .badge-dot.tone-warn, .badge-dot.menu-dot.tone-warn { background: var(--amber-700); }
.icon-button .badge-dot.tone-bad, .badge-dot.menu-dot.tone-bad { background: var(--red-700); }
.debug-item { cursor: default; }
@media (max-width: 767px) { .notice-chip span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .notice-chip { padding: 0 9px; } }

/* choiceChip (ui.js): a page's sections, a category or a view as one
   control in its row, never a tab strip (one menu at a time). */
.tabs-choice { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 20px; }
.panel .tabs-choice, .drawer .tabs-choice { padding: 0; }
.choice-chip { gap: 6px; }
.choice-chip .icon { width: 14px; height: 14px; }
.choice-count { font-size: 11px; font-weight: 700; color: var(--text-tertiary); }
.menu-meta { margin-left: auto; padding-left: 12px; }

/* Settings → Public endpoint → Set up: the steps in a side panel, one at a
   time (no step bar on the page). */
.setup-panel { display: flex; flex-direction: column; gap: 18px; }
.setup-panel-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.setup-panel-step { display: flex; align-items: center; gap: 10px; color: var(--text-secondary); }
.setup-panel-n { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 9999px; border: 1px solid var(--border-default); background: var(--bg-canvas); font-size: 12px; font-weight: 700; }
.setup-panel-n .icon { width: 14px; height: 14px; }
.setup-panel-step.done .setup-panel-n { background: var(--bg-primary); border-color: var(--bg-primary); color: #fff; }
.setup-panel-step.current { color: var(--text-primary); font-weight: 600; }
.setup-panel-step.current .setup-panel-n { border: 2px solid var(--teal-700); color: var(--teal-700); }
.setup-panel-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border-default); }
.team-budget { margin-top: 8px; }
.team-budget summary { cursor: pointer; }
.team-budget[open] .field-row { margin-top: 8px; }

/* Settings → Import from LiteLLM (settings-litellm.js). */
.litellm-import { display: flex; flex-direction: column; gap: 16px; }
.litellm-step { display: flex; flex-direction: column; gap: 14px; }
.litellm-source { width: 100%; min-height: 80px; font-size: 12.5px; }
.litellm-source-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.litellm-more summary { cursor: pointer; }
.litellm-more[open] { display: flex; flex-direction: column; gap: 12px; }
.litellm-area { display: flex; flex-direction: column; gap: 6px; }
.litellm-table td:first-child, .litellm-table th:first-child { width: 36px; }
.model-limit-row { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(0, 3fr) auto; gap: 10px; align-items: end; }
@media (max-width: 720px) { .model-limit-row { grid-template-columns: 1fr; } }

/* Settings → Notifications → Alert channels (settings-notifications.js). */
.alert-channel-list { display: grid; gap: 8px; }
.alert-channel-row { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--border-default); }
.alert-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 12px; }
@media (max-width: 720px) { .alert-channel-row { flex-direction: column; } }

/* System status (views/system-status.js) and resolved warnings under the bell. */
.status-page { display: flex; flex-direction: column; gap: 8px; }
.status-head { display: flex; align-items: baseline; gap: 12px; margin: 16px 0 0; }
.status-fix { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.status-counts { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 12px 16px; border: 1px solid var(--border-default); border-radius: var(--radius-surface); background: var(--bg-canvas); }
.status-count { display: flex; align-items: center; gap: 8px; }
.notice-resolved { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 8px 0; }
.notice-resolved .state-text { margin-right: 4px; }

/* ---- The friendly settings kit (ui.js; docs/design/control-plane/SETTINGS_KIT.md) ----
   Icon tiles, section heads, KPI cards, choice cards, the three-state
   switch, the severity scale, flow paths, logo tiles, Advanced and the
   danger zone, the header's unsaved-changes bar, steppers and chips. Colours
   are named tones (kt-<tone>) over the design system's tokens; every state
   also says a word. The dark values are in the Dark mode block at the top. */
:root {
  --kit-teal-bg: #ccfbf1; --kit-teal-fg: #0f766e; --kit-teal-a: #14b8a6; --kit-teal-b: #0f766e;
  --kit-indigo-bg: #e0e7ff; --kit-indigo-fg: #4338ca; --kit-indigo-a: #6366f1; --kit-indigo-b: #4338ca;
  --kit-violet-bg: #f3e8ff; --kit-violet-fg: #7e22ce; --kit-violet-a: #a855f7; --kit-violet-b: #7e22ce;
  --kit-amber-bg: #fef3c7; --kit-amber-fg: #b45309; --kit-amber-a: #f59e0b; --kit-amber-b: #b45309;
  --kit-red-bg: #fee2e2; --kit-red-fg: #b91c1c; --kit-red-a: #ef4444; --kit-red-b: #b91c1c;
  --kit-sky-bg: #e0f2fe; --kit-sky-fg: #0369a1; --kit-sky-a: #0ea5e9; --kit-sky-b: #0369a1;
  --kit-green-bg: #dcfce7; --kit-green-fg: #15803d; --kit-green-a: #22c55e; --kit-green-b: #15803d;
  --kit-orange-bg: #ffedd5; --kit-orange-fg: #c2410c; --kit-orange-a: #f97316; --kit-orange-b: #c2410c;
  --kit-pink-bg: #fce7f3; --kit-pink-fg: #be185d; --kit-pink-a: #ec4899; --kit-pink-b: #be185d;
  --kit-slate-bg: #f1f5f9; --kit-slate-fg: #475569; --kit-slate-a: #64748b; --kit-slate-b: #334155;
  --kit-blue-bg: #dbeafe; --kit-blue-fg: #1d4ed8; --kit-blue-a: #3b82f6; --kit-blue-b: #1d4ed8;
  /* The three-state switch and the severity scale. */
  --kit-off-bg: #f1f5f9; --kit-off-fg: #0f1729;
  --kit-suggest-bg: #eff6ff; --kit-suggest-fg: #1d4ed8;
  --kit-enforce-bg: #0f766e; --kit-enforce-fg: #ffffff;
  --kit-warn-bg: #fffbeb; --kit-warn-fg: #b45309;
  --kit-block-bg: #dc2626; --kit-block-fg: #ffffff;
  --kit-sev-red: #b91c1c; --kit-sev-orange: #ea580c; --kit-sev-amber: #d97706; --kit-sev-blue: #2563eb; --kit-sev-slate: #94a3b8;
  --kit-unsaved-bg: #fffbeb; --kit-unsaved-line: #fde68a; --kit-unsaved-fg: #b45309;
  --kit-danger-line: #fca5a5; --kit-danger-bg: #fef2f2;
}
.kt-teal { --kt-bg: var(--kit-teal-bg); --kt-fg: var(--kit-teal-fg); --kt-a: var(--kit-teal-a); --kt-b: var(--kit-teal-b); }
.kt-indigo { --kt-bg: var(--kit-indigo-bg); --kt-fg: var(--kit-indigo-fg); --kt-a: var(--kit-indigo-a); --kt-b: var(--kit-indigo-b); }
.kt-violet { --kt-bg: var(--kit-violet-bg); --kt-fg: var(--kit-violet-fg); --kt-a: var(--kit-violet-a); --kt-b: var(--kit-violet-b); }
.kt-amber { --kt-bg: var(--kit-amber-bg); --kt-fg: var(--kit-amber-fg); --kt-a: var(--kit-amber-a); --kt-b: var(--kit-amber-b); --kt-sev: var(--kit-sev-amber); }
.kt-red { --kt-bg: var(--kit-red-bg); --kt-fg: var(--kit-red-fg); --kt-a: var(--kit-red-a); --kt-b: var(--kit-red-b); --kt-sev: var(--kit-sev-red); }
.kt-sky { --kt-bg: var(--kit-sky-bg); --kt-fg: var(--kit-sky-fg); --kt-a: var(--kit-sky-a); --kt-b: var(--kit-sky-b); }
.kt-green { --kt-bg: var(--kit-green-bg); --kt-fg: var(--kit-green-fg); --kt-a: var(--kit-green-a); --kt-b: var(--kit-green-b); }
.kt-orange { --kt-bg: var(--kit-orange-bg); --kt-fg: var(--kit-orange-fg); --kt-a: var(--kit-orange-a); --kt-b: var(--kit-orange-b); --kt-sev: var(--kit-sev-orange); }
.kt-pink { --kt-bg: var(--kit-pink-bg); --kt-fg: var(--kit-pink-fg); --kt-a: var(--kit-pink-a); --kt-b: var(--kit-pink-b); }
.kt-slate { --kt-bg: var(--kit-slate-bg); --kt-fg: var(--kit-slate-fg); --kt-a: var(--kit-slate-a); --kt-b: var(--kit-slate-b); --kt-sev: var(--kit-sev-slate); }
.kt-blue { --kt-bg: var(--kit-blue-bg); --kt-fg: var(--kit-blue-fg); --kt-a: var(--kit-blue-a); --kt-b: var(--kit-blue-b); --kt-sev: var(--kit-sev-blue); }

.kit-tile { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--kt-bg); color: var(--kt-fg); }
.kit-tile svg.icon { width: 20px; height: 20px; }
.kit-tile.sm { width: 32px; height: 32px; border-radius: 10px; }
.kit-tile.sm svg.icon { width: 16px; height: 16px; }
.kit-tile.lg { width: 48px; height: 48px; border-radius: 14px; }
.kit-hero { width: 52px; height: 52px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; flex: none; color: #fff; background: linear-gradient(135deg, var(--kt-a), var(--kt-b)); box-shadow: 0 8px 20px -10px var(--kt-b); }
.kit-hero svg.icon { width: 26px; height: 26px; }
.kit-logo { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--color-neutral-0); border: 1px solid var(--border-default); }
.kit-logo.sm { width: 32px; height: 32px; border-radius: 10px; }
.kit-logo.lg { width: 48px; height: 48px; border-radius: 14px; }
.kit-logo-own { background: linear-gradient(135deg, var(--kit-teal-a), var(--kit-teal-b)); border-color: transparent; }
.kit-logo-own svg { width: 60%; height: 60%; }

/* A page built from the kit: groups of cards, 28px apart. */
.kit-page { display: flex; flex-direction: column; gap: 28px; min-width: 0; padding-top: 4px; }
.kit-page > section { min-width: 0; }
/* kitPair: two related sections side by side once each gets 600px (wide
   windows), stacked below that; paragraphs keep a readable measure however
   wide the cards grow. */
.kit-pair { display: grid; gap: 28px 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 600px), 1fr)); align-items: start; min-width: 0; }
.kit-pair > section { min-width: 0; }
.kit-page :is(p, .kit-sh-sub, .kit-row-hint) { max-width: var(--measure); }
.kit-card { background: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: var(--radius-surface); box-shadow: var(--shadow-raised); min-width: 0; }
.kit-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.kit-sh { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.kit-sh-text { flex: 1 1 auto; min-width: 0; }
.kit-sh-title { margin: 0; font-size: 17px; line-height: 24px; font-weight: 700; letter-spacing: -0.01em; color: var(--text-primary); }
.kit-sh-sub { margin: 2px 0 0; color: var(--text-secondary); font-size: 13.5px; line-height: 19px; }
.kit-sh-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.kit-pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 9999px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--kit-off-bg); color: var(--text-secondary); }
.kit-pill.p-good { background: var(--kit-green-bg); color: var(--kit-green-fg); }
.kit-pill.p-teal { background: var(--kit-teal-bg); color: var(--kit-teal-fg); }
.kit-pill.p-warn { background: var(--kit-warn-bg); color: var(--kit-warn-fg); }
.kit-pill.p-bad { background: var(--kit-red-bg); color: var(--kit-red-fg); }

/* KPI cards. */
.kit-kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.kit-kpi { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: var(--radius-surface); box-shadow: var(--shadow-raised); min-width: 0; }
.kit-kpi-text { min-width: 0; }
.kit-kpi-value { font-size: 24px; line-height: 30px; font-weight: 800; letter-spacing: -0.03em; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.kit-kpi-value.tone-good { color: var(--tone-good); }
.kit-kpi-value.tone-warn { color: var(--tone-warn); }
.kit-kpi-value.tone-bad { color: var(--tone-bad); }
.kit-kpi-of { font-size: 15px; font-weight: 600; color: var(--text-secondary); letter-spacing: 0; }
.kit-kpi-label { font-size: 12.5px; line-height: 17px; color: var(--text-secondary); }
.kit-ring { width: 48px; height: 48px; flex: none; }
.kit-ring-track { fill: none; stroke: var(--border-default); stroke-width: 6; }
.kit-ring-fill { fill: none; stroke: var(--kt-a); stroke-width: 6; stroke-linecap: round; }

/* Choice cards and chips. */
.kit-choice { display: grid; gap: 8px; grid-template-columns: repeat(var(--kit-cols, 3), minmax(0, 1fr)); }
.kit-choice-card { display: flex; align-items: flex-start; gap: 10px; text-align: left; padding: 10px 12px; border: 1px solid var(--border-default); border-radius: 12px; background: var(--bg-canvas); color: var(--text-primary); cursor: pointer; min-width: 0; }
.kit-choice-card:hover:not(:disabled) { border-color: var(--teal-300); }
.kit-choice-card.on { border-color: var(--teal-700); box-shadow: inset 0 0 0 1px var(--teal-700); background: var(--teal-50); }
.kit-choice-card:disabled { opacity: .55; cursor: not-allowed; }
.kit-choice-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.kit-choice-text b { font-size: 13.5px; font-weight: 700; }
.kit-choice-text span { font-size: 12px; line-height: 16px; color: var(--text-secondary); }
.kit-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.kit-chip { height: 32px; padding: 0 12px; border-radius: 9999px; border: 1px solid var(--border-default); background: var(--bg-canvas); color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer; }
.kit-chip.on { background: var(--kit-enforce-bg); border-color: var(--kit-enforce-bg); color: var(--kit-enforce-fg); }
.kit-chip:disabled { opacity: .55; cursor: not-allowed; }
.kit-chip-input { width: 96px; height: 32px; }

/* The three-state switch. */
.kit-tri { display: inline-flex; flex-wrap: nowrap; border: 1px solid var(--border-default); border-radius: 9999px; padding: 2px; background: var(--bg-canvas); max-width: 100%; }
.kit-tri-btn { height: 28px; padding: 0 12px; border: 0; border-radius: 9999px; background: transparent; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.kit-tri-btn:disabled { cursor: not-allowed; opacity: .6; }
.kit-tri-btn.on.t-off { background: var(--kit-off-bg); color: var(--kit-off-fg); }
.kit-tri-btn.on.t-suggest { background: var(--kit-suggest-bg); color: var(--kit-suggest-fg); }
.kit-tri-btn.on.t-enforce { background: var(--kit-enforce-bg); color: var(--kit-enforce-fg); }
.kit-tri-btn.on.t-warn { background: var(--kit-warn-bg); color: var(--kit-warn-fg); }
.kit-tri-btn.on.t-block { background: var(--kit-block-bg); color: var(--kit-block-fg); }
.kit-tri-btn.on:disabled { opacity: 1; }

/* The severity scale. */
.kit-sev-wrap { display: flex; flex-direction: column; gap: 10px; }
.kit-sev { display: flex; flex-wrap: wrap; gap: 6px; }
.kit-sev-step { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 9999px; border: 1px solid var(--border-default); background: var(--bg-canvas); color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer; }
.kit-sev-dot { width: 10px; height: 10px; border-radius: 9999px; background: var(--kt-sev, var(--kt-a)); }
.kit-sev-step.lit { background: var(--kt-sev, var(--kt-a)); border-color: var(--kt-sev, var(--kt-a)); color: #fff; }
.kit-sev-step.lit .kit-sev-dot { background: #fff; }
.kit-sev-step[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg-canvas), 0 0 0 4px var(--kt-sev, var(--kt-a)); }
.kit-sev-step:disabled { cursor: not-allowed; }
.kit-sev-text { margin: 0; font-size: 13px; color: var(--text-primary); }

/* A flow path: icon bubbles joined by a line; a stop may be the switch. */
.kit-flow { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; padding: 22px 18px 18px; }
.kit-stop { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; position: relative; padding: 0 10px; min-width: 0; }
.kit-stop::before { content: ""; position: absolute; top: 28px; left: -50%; width: 100%; height: 3px; background: var(--border-default); }
.kit-stop:first-child::before { display: none; }
.kit-stop.on::before { background: var(--teal-600); }
.kit-bubble { width: 56px; height: 56px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; border: 3px solid var(--bg-canvas); box-shadow: 0 0 0 1px var(--border-default); background: var(--kit-off-bg); color: var(--text-tertiary); padding: 0; flex: none; }
.kit-bubble svg.icon { width: 24px; height: 24px; }
button.kit-bubble { cursor: pointer; }
button.kit-bubble:hover:not(:disabled) { box-shadow: 0 0 0 2px var(--teal-300); }
button.kit-bubble:disabled { cursor: not-allowed; }
.kit-stop.on .kit-bubble { background: var(--teal-600); color: #fff; box-shadow: 0 0 0 1px var(--teal-600); }
.kit-stop-title { font-weight: 700; font-size: 14px; color: var(--text-primary); }
.kit-stop-text { font-size: 12.5px; line-height: 17px; color: var(--text-secondary); max-width: 220px; min-height: 34px; }

/* Rows inside a card (an action, a switch), with hairlines between. */
.kit-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 20px; padding: 14px 18px; border-bottom: 1px solid var(--border-default); }
.kit-row:last-child { border-bottom: 0; }
.kit-row-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.kit-row-text { min-width: 0; }
.kit-row-title { font-weight: 700; color: var(--text-primary); }
.kit-row-hint { font-size: 12.5px; line-height: 17px; color: var(--text-secondary); }
.kit-row-ctl { display: flex; align-items: center; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.kit-mini { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--text-primary); padding-top: 10px; border-top: 1px dashed var(--border-default); }
.kit-mini-note { font-size: 12px; color: var(--text-secondary); }

/* Advanced and the danger zone. */
.kit-disc { background: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: var(--radius-surface); box-shadow: var(--shadow-raised); min-width: 0; }
.kit-disc-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 18px; border: 0; background: transparent; text-align: left; cursor: pointer; color: var(--text-primary); border-radius: var(--radius-surface); }
.kit-disc-title { flex: 1 1 auto; min-width: 0; }
.kit-disc-title b { font-weight: 700; }
.kit-disc-sub { font-size: 13px; color: var(--text-secondary); }
.kit-disc-chevron { width: 18px; height: 18px; color: var(--text-secondary); transition: transform 120ms ease-out; }
.kit-disc.open .kit-disc-chevron { transform: rotate(180deg); }
.kit-disc-body { padding: 4px 18px 18px; }
.kit-disc.kit-danger { border-color: var(--kit-danger-line); }
.kit-disc.kit-danger .kit-disc-head b { color: var(--tone-bad); }
.kit-disc.kit-danger.open { background: var(--kit-danger-bg); }
.kit-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px 20px; }
.kit-fields .field { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.kit-fields .field .input { width: 100%; max-width: none; }
.kit-fields .toggle-row { grid-column: 1 / -1; }

/* The header's unsaved changes, Save and the page's main actions. */
.kit-head-actions, .kit-unsaved { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.kit-unsaved-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 9999px; background: var(--kit-unsaved-bg); border: 1px solid var(--kit-unsaved-line); color: var(--kit-unsaved-fg); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.kit-restart { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 9999px; background: var(--kit-orange-bg); color: var(--kit-orange-fg); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.kit-restart svg.icon { width: 14px; height: 14px; }

/* Steppers. */
.kit-stepper { display: inline-flex; align-items: center; gap: 6px; }
.kit-step-btn { width: 32px; height: 32px; border-radius: 9999px; border: 1px solid var(--border-default); background: var(--bg-canvas); color: var(--text-primary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.kit-step-btn:disabled { opacity: .5; cursor: not-allowed; }
.kit-step-input { width: 84px; height: 32px; text-align: center; }
.kit-step-unit { font-size: 13px; color: var(--text-secondary); }

@media (max-width: 767px) {
  /* Pages keep no gutter on phones; the kit's cards get 16px. */
  .kit-page { padding: 4px 16px 0; }
  .page-header .kit-hero { display: none; }
  .kit-kpi { padding: 12px 14px; gap: 10px; }
  .kit-choice { grid-template-columns: minmax(0, 1fr); }
  .kit-flow { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 18px; }
  .kit-stop { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-auto-rows: auto; column-gap: 12px; row-gap: 2px; align-items: center; justify-items: start; text-align: left; padding: 0; }
  .kit-stop .kit-bubble { grid-row: span 3; }
  .kit-stop::before { top: -18px; left: 27px; width: 3px; height: 18px; }
  .kit-stop-text { min-height: 0; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .kit-disc-chevron { transition: none; } }

/* Repository security → Policy (views/repo-security.js), the kit's reference page. */
.rpol-scanner { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.rpol-scanner-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rpol-scanner-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rpol-scanner-name b { display: block; color: var(--text-primary); }
.rpol-scanner-note { font-size: 13px; color: var(--text-primary); margin: 0; }
.rpol-required { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); }
.rpol-block { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.rpol-block-head { display: flex; align-items: center; gap: 12px; }
.rpol-block-head b { display: block; color: var(--text-primary); }
.rpol-fail { margin-top: 12px; padding: 12px 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.rpol-fail-text { flex: 1 1 240px; min-width: 0; }
.rpol-fail-text b { color: var(--text-primary); font-size: 13.5px; }
.rpol-last { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); white-space: nowrap; border: 0; background: none; padding: 0; cursor: default; }
button.rpol-last { cursor: pointer; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
button.rpol-last:hover { color: var(--text-primary); }
.rpol-last .rpol-dot { width: 8px; height: 8px; border-radius: 9999px; background: var(--border-strong); }
.rpol-last.tone-good .rpol-dot { background: var(--tone-good); }
.rpol-last.tone-warn .rpol-dot { background: var(--tone-warn); }
.rpol-last.tone-bad .rpol-dot { background: var(--tone-bad); }
.rpol-act-ctl { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.rpol-act { grid-template-columns: minmax(0, 1fr) auto auto; }
.rpol-rules { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 196px), 1fr)); }
.rpol-rule { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.rpol-rule.is-off { opacity: .8; }
.rpol-rule-head { display: flex; align-items: center; justify-content: space-between; }
.rpol-rule-name { font-weight: 700; color: var(--text-primary); }
.rpol-rule-value { display: flex; align-items: baseline; gap: 6px; }
.rpol-rule-value .input { width: 92px; height: 40px; font-size: 22px; font-weight: 800; letter-spacing: -0.03em; padding: 0 8px; }
.rpol-rule-unit { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.rpol-rule-value .input::placeholder { color: var(--text-secondary); }
.rpol-rule .kit-tri { align-self: flex-start; }
.rpol-langs { margin-top: 12px; padding: 14px 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rpol-langs-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-right: 6px; }
.rpol-lang { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px 0 5px; border: 1px solid var(--border-default); border-radius: 9999px; font-size: 12.5px; background: var(--bg-canvas); color: var(--text-primary); }
.rpol-lang .rpol-lang-alt { color: var(--text-secondary); }
.rpol-note { margin: 0; font-size: 12.5px; color: var(--text-tertiary); }
/* Repository security: "Across your repositories" and a scan's code. */
.rs-overview { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 24px 0 28px; }
.rs-card { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.rs-card-title { margin: 0; font-size: 14px; font-weight: 700; color: var(--text-primary); }
.rs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rs-tech { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 12px; }
.rs-tech-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-right: 4px; }
.rs-list { padding-bottom: 6px; }
.rs-rows { display: flex; flex-direction: column; margin: 0 -18px; }
.rs-repo-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 10px 18px; border: 0; border-top: 1px solid var(--border-default); background: transparent; color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; }
.rs-repo-row:hover { background: var(--bg-field-on-canvas); }
.rs-repo-row:focus-visible { outline: 2px solid var(--series-1); outline-offset: -2px; }
.rs-repo-text { display: flex; flex-direction: column; min-width: 0; }
.rs-repo-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-repo-sub { font-size: 12.5px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-repo-value { font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rs-logo-gap { width: 18px; }
.rs-empty { margin: 0; }
.rp-report { margin-left: 8px; }
.rp-report-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rp-report-line .rp-report { margin-left: 0; }
@media (max-width: 767px) {
  .rpol-act { grid-template-columns: minmax(0, 1fr); }
  .rpol-act-ctl { align-items: flex-start; }
}

/* Access → Permissions: the matrix (access-permissions.js), and Access →
   View as: their SpanDock in its own look (access-view-as.js). Kit cards,
   rows and pills, tokens only, so dark mode follows. */
.perm-card { overflow: hidden; }
.perm-matrix-wrap { overflow-x: auto; }
.perm-matrix { width: 100%; min-width: 640px; border-collapse: collapse; }
.perm-matrix th, .perm-matrix td { text-transform: none; letter-spacing: normal; padding: 12px 14px; border-bottom: 1px solid var(--border-default); text-align: left; vertical-align: top; color: var(--text-primary); font-weight: 400; }
.perm-matrix tbody tr:last-child th, .perm-matrix tbody tr:last-child td { border-bottom: 0; }
.perm-matrix thead th { background: var(--bg-field-on-canvas); }
.perm-matrix .perm-row-head { min-width: 220px; max-width: 340px; }
.perm-matrix .perm-col { min-width: 160px; }
.perm-matrix .perm-col .button { margin-top: 8px; }
.perm-col-head { display: flex; align-items: center; gap: 10px; }
.perm-col-text { min-width: 0; }
.perm-matrix .tag-chips { margin-top: 6px; }
.perm-group-row th { background: var(--bg-page); font-size: 12px; font-weight: 700; letter-spacing: .025em; text-transform: uppercase; color: var(--text-secondary); padding-top: 8px; padding-bottom: 8px; }
.perm-cell { min-width: 132px; font-weight: 600; }
.perm-cell.perm-allow { background-color: var(--kit-green-bg); color: var(--kit-green-fg); border-color: transparent; }
.perm-cell.perm-deny { background-color: var(--kit-red-bg); color: var(--kit-red-fg); border-color: transparent; }
.perm-cell.perm-inherit { background-color: var(--kit-off-bg); color: var(--text-secondary); border-color: transparent; }
.perm-note { margin-top: 4px; font-size: 12px; color: var(--text-tertiary); }
.perm-empty { margin-bottom: 12px; }
.perm-empty a, .perm-link { color: inherit; }
.perm-link { text-decoration: none; }
.perm-link:hover { background: var(--bg-hover); }
.perm-link .kit-row-ctl { color: var(--text-tertiary); }
.perm-foot { margin: 10px 0 0; font-size: 13px; color: var(--text-tertiary); }
.perm-drawer { display: flex; flex-direction: column; gap: 16px; }
.perm-drawer-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 14px; border-top: 1px solid var(--border-default); }
.va-preview { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.va-col .kit-card, .va-pick { overflow: hidden; }
.va-pick { gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.va-pick .field { flex: 1 1 200px; min-width: 0; }
.va-empty { display: flex; align-items: center; gap: 14px; padding: 18px; }
.va-frame { display: grid; grid-template-columns: 260px minmax(0, 1fr); border: 1px solid var(--border-default); border-radius: var(--radius-surface); overflow: hidden; background: var(--bg-page); box-shadow: var(--shadow-raised); }
.va-side { background: var(--bg-sidebar); padding: 16px 12px; border-right: 1px solid var(--border-default); }
.va-side-head { padding: 0 8px 4px; font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.va-nav { margin-top: 4px; }
.va-item { cursor: default; }
.va-hidden { opacity: .45; text-decoration: line-through; }
.va-page { padding: 16px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.va-page-head { display: flex; align-items: center; gap: 12px; }
.va-page-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--text-primary); }
.va-notice { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radius-control); background: var(--kit-warn-bg); color: var(--kit-warn-fg); font-size: 13px; }
.va-notice a { color: inherit; font-weight: 600; }
.va-headless { padding: 16px 18px; }
.va-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; align-items: start; }
.va-col { min-width: 0; }
.va-group-head { padding: 10px 18px 6px; font-size: 12px; font-weight: 700; letter-spacing: .025em; text-transform: uppercase; color: var(--text-secondary); background: var(--bg-field-on-canvas); border-bottom: 1px solid var(--border-default); }
.va-list { list-style: none; margin: 0; padding: 0; }
.va-group:last-child .va-row:last-child { border-bottom: 0; }
.va-reason a { color: var(--text-link); }
@media (max-width: 760px) { .va-frame { grid-template-columns: minmax(0, 1fr); } .va-side { border-right: 0; border-bottom: 1px solid var(--border-default); } }

/* Privacy Center → Mandatory notices on computers (views/privacy.js): kit
   rows with state pills; Change opens a side panel. */
.pc-notices { margin: 24px 0 8px; }
.pc-notice .kit-row-title .kit-pill { margin-left: 6px; vertical-align: middle; }
.pc-notice-policy { color: var(--text-secondary); }
.pc-notice-policy a { color: var(--text-link); }
.pc-note { margin: 10px 0 0; font-size: 13px; color: var(--text-tertiary); }
.pc-empty { margin: 0; padding: 14px 18px; font-size: 13px; color: var(--text-secondary); }
.pc-drawer { display: flex; flex-direction: column; gap: 16px; }
.pc-drawer-fields { display: flex; flex-direction: column; gap: 14px; }
.pc-ack { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--radius-control); background: var(--kit-warn-bg); color: var(--text-primary); font-size: 14px; }
.pc-ack input { margin-top: 3px; }
.pc-drawer-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 14px; border-top: 1px solid var(--border-default); }

/* AI Chats (views/ai-chats.js) and Connect tools → Browser extension
   (views/browser-extension.js). Tokens only, so dark mode follows. */
.ai-chats { display: flex; flex-direction: column; gap: 16px; padding-bottom: 24px; }
.ai-chats > p, .ai-chats-note, .ai-chats-more { margin: 0 18px; }
.ai-chat-pairs { display: flex; flex-direction: column; gap: 14px; }
.ai-chat-pair { display: flex; flex-direction: column; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--border-default); }
.ai-chat-pair:last-child { border-bottom: 0; padding-bottom: 0; }
.ai-chat-msg { max-width: 92%; padding: 10px 12px; border-radius: var(--radius-control); border: 1px solid var(--border-default); background: var(--bg-canvas); }
.ai-chat-msg.prompt { align-self: flex-end; background: var(--teal-50); border-color: var(--teal-100); }
.ai-chat-msg.answer { align-self: flex-start; }
.ai-chat-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; }
.ai-chat-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-chat-badge { padding: 1px 8px; border-radius: var(--radius-chip); background: var(--amber-50); color: var(--amber-700); border: 1px solid var(--amber-line); }
.browser-extension { display: flex; flex-direction: column; gap: 16px; padding: 0 18px 24px; }
.browser-extension > p { margin: 0; }
.be-code { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--teal-200); background: var(--teal-50); border-radius: var(--radius-surface); }
.be-code p { margin: 0; }
.be-code-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.be-code-value { font-size: 28px; letter-spacing: .12em; color: var(--text-primary); }
.be-endpoint { font-size: 16px; color: var(--text-primary); overflow-wrap: anywhere; }
.be-dev summary { cursor: pointer; }
.be-sites { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.be-site { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 767px) { .ai-chats > p, .ai-chats-note { margin: 0 16px; } .browser-extension { padding: 0 16px 24px; } .ai-chat-msg { max-width: 100%; } }

/* Live traffic (web/js/views/traffic.js) */
.tr-page { display: flex; flex-direction: column; gap: 12px; padding-bottom: 24px; min-width: 0; }
.tr-counters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 18px; }
.tr-counter { display: inline-flex; align-items: baseline; gap: 4px; border: 1px solid var(--border-default); background: var(--bg-canvas); border-radius: var(--radius-pill); padding: 3px 10px; font-size: 12px; color: var(--text-secondary); cursor: pointer; }
.tr-counter b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.tr-counter.total { cursor: default; background: transparent; }
.tr-counter.on { border-color: var(--teal-700); background: var(--teal-50); }
.tr-counter.bad { border-color: var(--red-line); background: var(--red-50); }
.tr-counter.bad b { color: var(--red-700); }
.tr-notes { margin: 0 18px; display: flex; flex-direction: column; gap: 4px; }
.tr-notes:empty { display: none; }
.tr-actions { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.tr-dir { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0; }
.tr-dir .icon { width: 13px; height: 13px; }
.tr-dir.tr-in { background: var(--teal-50); color: var(--teal-700); }
.tr-dir.tr-out { background: var(--kit-indigo-bg); color: var(--text-primary); }
.tr-preview { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin-bottom: 10px; }
.tr-preview .code-block { max-height: 320px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }
.tr-headers dt, .tr-headers dd { overflow-wrap: anywhere; }
.headless-card.headless-wide { max-width: 1100px; }
.tr-list { list-style: none; margin: 0; padding: 0; }
.tr-list li + li { border-top: 1px solid var(--border-default); }
.tr-item { display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; background: transparent; border: 0; padding: 10px 12px; cursor: pointer; color: inherit; font: inherit; min-width: 0; }
.tr-item:hover { background: var(--bg-hover); }
.tr-item-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tr-item-status { margin-left: auto; }
.tr-item-text { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .tr-counters, .tr-notes { margin: 0 16px; }
  .tr-table { margin: 0 16px; }
}

/* == settings group: you-server == */
/* Appearance, Mode, General, Backup & restore, Import from another
   gateway, Backups, Scaling and Server connection (ys-: you and server). */
:root { --ys-mb-bg: #1f2937; --ys-mb-fg: #e2e8f0; --ys-mb-dim: #94a3b8; --ys-mb-accent: #5eead4; --ys-mb-accent-fg: #04201d; --ys-mb-warn: #fbbf24; --ys-on-primary-line: rgba(255, 255, 255, .4); --ys-on-primary-bg: rgba(255, 255, 255, .16); }
.ys-note { margin: 0; font-size: 12.5px; line-height: 18px; color: var(--text-secondary); }
section > .ys-note, .kit-grid + .ys-note { margin-top: 10px; }
.ys-pad { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.ys-gap { margin-top: 12px; }
.ys-gap-sm { gap: 10px; }
.ys-stack { display: flex; flex-direction: column; gap: 12px; }
.ys-callout { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; font-size: 13px; color: var(--text-primary); }
.ys-callout svg.icon { width: 18px; height: 18px; flex: none; color: var(--text-secondary); margin-top: 1px; }
.ys-callout.warn { background: var(--kit-warn-bg); border-color: var(--kit-unsaved-line); }
.ys-callout.warn svg.icon { color: var(--kit-warn-fg); }
.ys-callout.bad { background: var(--kit-danger-bg); border-color: var(--kit-danger-line); }
.ys-callout.bad svg.icon { color: var(--tone-bad); }
.ys-callout.good { background: var(--kit-green-bg); border-color: transparent; }
.ys-callout.good svg.icon { color: var(--kit-green-fg); }
.ys-local { display: flex; align-items: center; gap: 14px; padding: 18px; }
.ys-local b { color: var(--text-primary); font-size: 14px; }
.ys-mini { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--text-secondary); min-width: 0; }
.ys-mini > span:first-child { font-weight: 600; }
.ys-mini .input { min-width: 140px; }
.ys-mini .kit-tri { align-self: flex-start; }
.ys-col { gap: 8px; }
.ys-select { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-secondary); }
.ys-select .input { width: auto; }
.ys-locks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ys-locks.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 10px 24px; }
.ys-locks li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 18px; color: var(--text-primary); }
.ys-locks li svg.icon { width: 16px; height: 16px; flex: none; color: var(--text-secondary); margin-top: 1px; }
.ys-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ys-bullets li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 18px; color: var(--text-primary); }
.ys-bullets li svg.icon { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--kit-teal-fg); }
.ys-bullets.bad li svg.icon { color: var(--tone-bad); }
.ys-facts { padding: 6px 18px; margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.ys-fact { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; min-width: 0; }
.ys-fact-k { font-size: 12px; color: var(--text-secondary); }
.ys-fact-v { font-size: 13.5px; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }

/* Side panels: a drawer's steps, its drop zones and its Back / Next. */
.ys-drawer { display: flex; flex-direction: column; gap: 16px; min-height: 100%; }
.ys-drawer-foot { position: sticky; bottom: -18px; margin: auto -18px -18px; padding: 12px 18px; background: var(--bg-canvas); border-top: 1px solid var(--border-default); justify-content: flex-end; }
.ys-drop { display: flex; align-items: center; gap: 12px; padding: 16px; border: 2px dashed var(--border-strong); border-radius: 14px; background: var(--ds-paper); flex-wrap: wrap; }
.ys-drop.over { border-color: var(--teal-700); background: var(--teal-50); }
.ys-drop-text { flex: 1 1 180px; min-width: 0; }
.ys-drop-text b { color: var(--text-primary); }
.ys-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ys-step { display: flex; align-items: flex-start; gap: 10px; color: var(--text-secondary); }
.ys-step-n { width: 26px; height: 26px; border-radius: 9999px; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; border: 1px solid var(--border-default); background: var(--bg-canvas); color: var(--text-secondary); }
.ys-step-n svg.icon { width: 14px; height: 14px; }
.ys-step.cur .ys-step-n { background: var(--kit-enforce-bg); border-color: var(--kit-enforce-bg); color: var(--kit-enforce-fg); }
.ys-step.done .ys-step-n { background: var(--kit-green-bg); border-color: transparent; color: var(--kit-green-fg); }
.ys-step-title { font-weight: 700; font-size: 13.5px; line-height: 26px; color: var(--text-primary); }
.ys-step:not(.cur) .ys-step-title { font-weight: 600; color: var(--text-secondary); }
.ys-step p { margin: 0; }
.ys-src { display: flex; flex-direction: column; gap: 8px; }
.ys-lists { display: flex; flex-direction: column; gap: 8px; }
.ys-lists p { margin: 0; }
.ys-mini2 { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--border-default); border-radius: 12px; }
.ys-mini2-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--text-primary); }
.ys-mini2-row > span:first-child { flex: 1 1 auto; }
.ys-filter { flex-wrap: wrap; }
.ys-review { display: flex; flex-direction: column; gap: 14px; }
.ys-area { display: flex; flex-direction: column; border: 1px solid var(--border-default); border-radius: 12px; overflow: hidden; }
.ys-area-head { padding: 8px 12px; font-size: 12px; font-weight: 700; letter-spacing: .025em; text-transform: uppercase; color: var(--text-secondary); background: var(--ds-paper); border-bottom: 1px solid var(--border-default); }
.ys-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border-default); font-size: 13px; color: var(--text-primary); cursor: pointer; }
.ys-item:last-child { border-bottom: 0; }
.ys-item-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }

/* Appearance. */
.ys-saved svg.icon { width: 13px; height: 13px; }
.ys-try { gap: 8px; }
.ys-kbd { display: inline-flex; gap: 3px; }
.ys-kbd kbd { min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 6px; background: var(--bg-canvas); color: var(--text-primary); font: inherit; font-size: 12px; font-weight: 600; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.ys-try .ys-kbd kbd { background: var(--ys-on-primary-bg); border-color: var(--ys-on-primary-line); color: inherit; }
.ys-styles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ys-style { display: flex; flex-direction: column; gap: 8px; text-align: left; padding: 10px; border: 1px solid var(--border-default); border-radius: 14px; background: var(--bg-canvas); color: var(--text-primary); cursor: pointer; min-width: 0; }
.ys-style:hover { border-color: var(--teal-300); }
.ys-style.on { border-color: var(--teal-700); box-shadow: inset 0 0 0 1px var(--teal-700); background: var(--teal-50); }
.ys-style b { font-size: 14px; }
.ys-style-hint { font-size: 12px; line-height: 16px; color: var(--text-secondary); }
.ys-scope { margin-top: 12px; padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ys-scope-text { flex: 1 1 220px; min-width: 0; }
.ys-scope-text b { color: var(--text-primary); }
.ys-scope-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ys-keys-card { padding: 16px 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.ys-keys { display: flex; flex-wrap: wrap; gap: 8px; }
.ys-key { height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--border-default); background: var(--bg-canvas); color: var(--text-secondary); display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.ys-key.on { border-color: var(--teal-700); box-shadow: inset 0 0 0 1px var(--teal-700); background: var(--teal-50); color: var(--kit-teal-fg); font-weight: 600; }
.ys-key-alt { font-size: 12px; }
.ys-look { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.ys-look > .input { width: 100%; max-width: none; }
.ys-motions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.ys-motion { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border: 1px solid var(--border-default); border-radius: 12px; background: var(--bg-canvas); color: var(--text-secondary); font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: center; }
.ys-motion svg.icon { width: 22px; height: 22px; }
.ys-motion.on { border-color: var(--teal-700); box-shadow: inset 0 0 0 1px var(--teal-700); background: var(--teal-50); color: var(--kit-teal-fg); }
.ys-motion:disabled { opacity: .45; cursor: not-allowed; }

/* Mode. */
.ys-mode { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.ys-mode.on { border-color: var(--teal-700); box-shadow: inset 0 0 0 1px var(--teal-700), var(--shadow-raised); }
.ys-mode-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.ys-mode .kit-pill svg.icon { width: 12px; height: 12px; }
.ys-warn { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 12px; background: var(--kit-danger-bg); border: 1px solid var(--kit-danger-line); }
.ys-warn b { color: var(--tone-bad); }
.ys-warn p { margin: 4px 0 0; font-size: 13px; color: var(--text-primary); }
.ys-list { display: flex; flex-direction: column; gap: 8px; }

/* General. */
.ys-rows { padding: 0 18px; }
.ys-rows .st-row.ys-trow { flex-wrap: nowrap; }
.ys-trow > .kit-tile { flex: none; }
.ys-rows .st-row.ys-trow.ys-wide { flex-wrap: wrap; }
.ys-trow.ys-wide .st-row-ctl { flex: 1 1 100%; padding-left: 52px; }
.ys-open { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.ys-mb { margin: 16px 0 4px; height: 34px; border-radius: 10px; background: var(--ys-mb-bg); color: var(--ys-mb-fg); display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 0 14px; font-size: 12.5px; font-weight: 600; }
.ys-mb.off { opacity: .55; }
.ys-mb-sys { display: inline-flex; align-items: center; color: var(--ys-mb-dim); }
.ys-mb-sys svg.icon { width: 14px; height: 14px; }
.ys-mb-app { display: inline-flex; align-items: center; gap: 8px; }
.ys-mb-icon { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 5px; }
.ys-mb-icon svg.icon { width: 14px; height: 14px; }
.ys-mb-icon.colour { background: var(--ys-mb-accent); color: var(--ys-mb-accent-fg); }
.ys-mb-num { font-variant-numeric: tabular-nums; }
.ys-mb-num.colour { color: var(--ys-mb-warn); }
.ys-mb-hidden { color: var(--ys-mb-dim); font-weight: 500; }
.ys-mb-ctl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 12px 16px; width: 100%; }

/* Backup & restore. */
.ys-big { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.ys-big .actions { margin-top: auto; }
.ys-big-title { margin: 4px 0 0; font-size: 17px; font-weight: 700; color: var(--text-primary); }
.ys-big-text { margin: 0; font-size: 13px; line-height: 19px; color: var(--text-secondary); }
.ys-flowx { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 10px 0 4px; }
.ys-flowchip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 1px solid var(--border-default); border-radius: 9999px; background: var(--ds-paper); font-size: 12.5px; color: var(--text-primary); }
.ys-flowchip svg.icon { width: 14px; height: 14px; color: var(--kit-teal-fg); }
.ys-dash { flex: 0 1 28px; min-width: 12px; border-top: 2px dashed var(--border-default); }
.ys-amber { background: var(--kit-warn-bg); border-color: var(--kit-unsaved-line); }
.ys-amber b { color: var(--text-primary); }
.ys-public { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 16px 18px; }
.ys-public-text { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ys-public-text b { color: var(--text-primary); }
.ys-urls { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--text-secondary); }

/* Import from another gateway. */
.ys-map { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.ys-map-head { display: flex; justify-content: space-between; gap: 12px; }
.ys-map-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--text-primary); }
.ys-map-rows { display: flex; flex-direction: column; gap: 8px; }
.ys-map-row { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); align-items: center; gap: 8px; }
.ys-map-from { padding: 8px 12px; border-radius: 10px; background: var(--ds-paper); border: 1px solid var(--border-default); font-size: 12.5px; color: var(--text-primary); overflow-wrap: anywhere; }
.ys-map-arrow { display: inline-flex; justify-content: center; color: var(--text-tertiary); }
.ys-map-arrow svg.icon { width: 16px; height: 16px; }
.ys-map-to { display: flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; border-radius: 12px; border: 1px solid var(--border-default); font-size: 13px; font-weight: 600; color: var(--text-primary); min-width: 0; }
.ys-callout-card { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; }
.ys-callout-card b { color: var(--text-primary); }

/* Backups. */
.ys-sched { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 14px 20px; align-items: end; }
.ys-sched-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px dashed var(--border-default); }
.ys-side .actions { margin-top: auto; }
.ys-where { font-size: 12px; color: var(--text-secondary); overflow-wrap: anywhere; }

/* Scaling. */
.ys-topo { padding: 18px; display: grid; grid-template-columns: 200px 40px minmax(0, 1fr); align-items: start; }
.ys-topo-sat { grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1fr); align-items: center; }
.ys-hub { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 16px 10px; border-radius: 14px; background: var(--teal-50); border: 1px solid var(--teal-200); }
.ys-hub b { color: var(--text-primary); }
.ys-link { align-self: stretch; position: relative; }
.ys-link::before { content: ""; position: absolute; left: 0; right: 0; top: 60px; border-top: 3px solid var(--teal-600); }
.ys-topo-sat .ys-link::before { top: 50%; }
.ys-link.down::before { border-top-style: dashed; border-top-color: var(--tone-bad); }
.ys-sats { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ys-sat { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: none; }
.ys-sat.off { opacity: .7; }
.ys-sat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ys-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ys-nums > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--ds-paper); min-width: 0; }
.ys-nums b { font-size: 15px; color: var(--text-primary); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ys-nums b.tone-warn { color: var(--tone-warn); }
.ys-nums span { font-size: 11.5px; color: var(--text-secondary); }
.ys-sat-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.ys-sat-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.ys-sat-ver { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; }
.ys-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; border: 1px dashed var(--border-default); border-radius: 14px; }
.ys-empty b { color: var(--text-primary); }
.ys-empty span { font-size: 12.5px; color: var(--text-secondary); }
.ys-buckets { display: flex; flex-direction: column; }
.ys-buckets-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border-default); }
.ys-buckets-head b { color: var(--text-primary); }
.ys-bucket .kit-row-ctl .button { height: 30px; }
.ys-works { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border-default); background: var(--ds-paper); border-radius: 0 0 var(--radius-surface) var(--radius-surface); }
.ys-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 2px; border-radius: 9999px; border: 1px solid var(--border-default); background: var(--bg-canvas); font-size: 12.5px; color: var(--text-primary); }
.ys-chip .kit-logo.sm { width: 26px; height: 26px; border-radius: 9999px; border: 0; }

@media (max-width: 1100px) {
  .ys-styles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .ys-styles { grid-template-columns: minmax(0, 1fr); }
  .ys-motions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ys-topo, .ys-topo-sat { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ys-link { height: 18px; }
  .ys-link::before { top: 0; bottom: 0; left: 50%; right: auto; border-top: 0; border-left: 3px solid var(--teal-600); }
  .ys-link.down::before { border-left-style: dashed; border-left-color: var(--tone-bad); }
  .ys-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ys-rows { padding: 0 14px; }
  .ys-rows .st-row.ys-trow { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: start; column-gap: 12px; }
  .ys-rows .st-row.ys-trow .st-row-text { flex: none; }
  .ys-rows .st-row.ys-trow .st-row-ctl { grid-column: 3; grid-row: 1; }
  .ys-rows .st-row.ys-trow:has(.st-inline) .st-row-ctl, .ys-trow.ys-wide .st-row-ctl { grid-column: 2 / -1; grid-row: 2; }
  .ys-trow.ys-wide .st-row-ctl { padding-left: 0; }
  .ys-map-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ys-map-arrow { transform: rotate(90deg); }
}
/* == end group == */

/* == settings group: network-security == */
/* Network, Encrypted tunnel, Public endpoint, Security, Sign-in, Remote and
   Server management (settings-netsec.js and the sections' files). */
.st-ns-pad { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.st-ns-flow .kit-flow { padding-top: 26px; }
/* A third party's mark keeps a light bubble, ringed in the path's colour when on. */
.kit-stop .kit-bubble:has(.brand-logo) { background: var(--color-neutral-0); }
.kit-stop.on .kit-bubble:has(.brand-logo) { background: var(--color-neutral-0); box-shadow: 0 0 0 2px var(--teal-600); }
.st-ns-hint { margin: 0; font-size: 12.5px; line-height: 17px; color: var(--text-secondary); }
.st-ns-inline { display: flex; align-items: center; gap: 8px; min-width: 0; }
.st-ns-wrap { flex-wrap: wrap; }
.st-ns-split { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.st-ns-mini-card { flex-direction: row; align-items: center; }
.st-ns-addr { display: flex; flex-direction: column; gap: 8px; }
.st-ns-addr .code-block { white-space: pre-wrap; word-break: break-all; margin: 0; }
.st-ns-addr .button { align-self: flex-start; }
.button.st-ns-danger-text { color: var(--tone-bad); }
.st-ns-err:empty { display: none; }
.st-ns-note { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border-default); background: var(--bg-canvas); font-size: 13.5px; color: var(--text-primary); flex-wrap: wrap; }
.st-ns-note-icon { display: inline-flex; flex: none; }
.st-ns-note-icon svg.icon { width: 18px; height: 18px; }
.st-ns-note-text { flex: 1 1 260px; min-width: 0; }
.st-ns-note-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.st-ns-note.t-good { background: var(--kit-green-bg); border-color: transparent; }
.st-ns-note.t-good .st-ns-note-icon { color: var(--kit-green-fg); }
.st-ns-note.t-warn { background: var(--kit-unsaved-bg); border-color: var(--kit-unsaved-line); }
.st-ns-note.t-warn .st-ns-note-icon { color: var(--kit-unsaved-fg); }
.st-ns-note.t-bad { background: var(--kit-danger-bg); border-color: var(--kit-danger-line); }
.st-ns-note.t-bad .st-ns-note-icon { color: var(--tone-bad); }
.st-ns-note.t-info .st-ns-note-icon { color: var(--text-secondary); }
.st-ns-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 26px 18px; }
.st-ns-empty b { color: var(--text-primary); }
.st-ns-empty-text { font-size: 13px; color: var(--text-secondary); max-width: 460px; }
.st-ns-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.st-ns-term { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-radius: var(--radius-surface); background: var(--term-bg); border: 1px solid var(--term-line); color: #e2e8f0; flex-wrap: wrap; }
.st-ns-term code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; word-break: break-all; min-width: 0; }
.st-ns-term-prompt { color: #5eead4; font-weight: 700; }
.st-ns-term .button { background: rgba(255,255,255,.08); color: #e2e8f0; border-color: rgba(255,255,255,.18); }
.st-ns-fact { min-width: 0; }
.st-ns-fact-k { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-tertiary); }
.st-ns-fact-v { font-size: 13px; color: var(--text-primary); overflow-wrap: anywhere; }
.st-ns-fact-sub { font-size: 12px; color: var(--text-secondary); }
.st-ns-list > * + * { border-top: 1px solid var(--border-default); }
.st-ns-token { display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
.st-ns-token.is-off { opacity: .65; }
.st-ns-token-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.st-ns-token-main b { color: var(--text-primary); }
.st-ns-drawer { display: flex; flex-direction: column; gap: 16px; }
.st-ns-drawer .field { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.st-ns-drawer .field .input { width: 100%; max-width: none; }
.st-ns-drawer-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 8px; }
.st-ns-mini { border-top: 0; padding: 12px 14px; border: 1px solid var(--border-default); border-radius: 12px; }
.st-ns-mini > span { display: flex; flex-direction: column; gap: 2px; }
.st-ns-form-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.st-ns-form-row .field { flex: 1 1 260px; max-width: 420px; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.st-ns-form-row .field .input { width: 100%; max-width: none; }
/* Security: the allowlist's big switch, ranges, doors and refusals. */
.st-ns-stack { display: flex; flex-direction: column; gap: 10px; }
.st-ns-hero { display: flex; align-items: center; gap: 16px; padding: 18px 20px; }
.st-ns-hero-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.st-ns-hero-title { font-size: 16px; color: var(--text-primary); }
.switch.st-ns-big-switch { width: 52px; height: 30px; border-radius: 15px; }
.switch.st-ns-big-switch::after { width: 24px; height: 24px; top: 3px; left: 3px; }
.switch.st-ns-big-switch:checked::after { left: 25px; }
.st-ns-starter { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 4px; border-radius: 12px; border: 1px dashed var(--border-strong); background: var(--bg-canvas); color: var(--text-primary); font-size: 13px; font-weight: 600; cursor: pointer; }
.st-ns-starter:hover { border-color: var(--teal-600); }
.st-ns-starter .kit-tile.sm { width: 30px; height: 30px; }
.st-ns-range { display: flex; align-items: flex-start; gap: 12px; padding: 12px 18px; }
.st-ns-range > .kit-tile { margin-top: 2px; }
.st-ns-range-fields { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px 12px; }
.st-ns-range-fields .input { width: 100%; max-width: none; }
.st-ns-areas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.st-ns-area { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; cursor: pointer; transition: opacity 120ms ease-out; }
.st-ns-area-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-ns-area .switch { margin-top: 4px; }
.st-ns-area.dim { opacity: .6; }
.st-ns-refusal { display: flex; align-items: center; gap: 12px; padding: 12px 18px; }
.st-ns-refusal-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
/* Sign-in: method cards, steppers, role cards and people. */
.st-ns-gap { margin-top: 12px; }
.st-ns-label { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
.st-ns-block { display: block; }
.st-ns-methods { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.st-ns-method { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.st-ns-method.is-off .st-ns-method-head .kit-tile, .st-ns-method.is-off .st-ns-method-head .kit-logo { filter: grayscale(1); opacity: .7; }
.st-ns-method-head { display: flex; align-items: center; gap: 12px; }
.st-ns-method-name { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.st-ns-method-name b { color: var(--text-primary); }
.st-ns-method-text { margin: 0; font-size: 13px; color: var(--text-primary); flex: 1 1 auto; }
.st-ns-method .kit-mini { margin-top: auto; }
.st-ns-method .kit-mini > span { display: flex; flex-direction: column; }
.st-ns-idps { display: flex; flex-wrap: wrap; gap: 6px; }
.st-ns-idp { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 6px; border: 1px solid var(--border-default); border-radius: 9999px; font-size: 12px; color: var(--text-primary); background: var(--bg-canvas); }
.st-ns-step { display: flex; align-items: center; gap: 14px; padding: 14px 16px; flex-wrap: wrap; }
.st-ns-step-text { flex: 1 1 140px; min-width: 0; display: flex; flex-direction: column; }
.st-ns-step-text .st-ns-hint:first-child { color: var(--text-primary); font-weight: 600; font-size: 13.5px; }
.st-ns-person { display: flex; align-items: center; gap: 12px; padding: 12px 18px; }
.st-ns-person-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-ns-person-main b { color: var(--text-primary); }
.st-ns-person-ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.st-ns-person-ctl select.input { width: auto; }
/* Network: the map's card, relays with their ping, HTTPS inspection, Advanced. */
.st-ns-sub { padding: 0 18px 12px 64px; }
.st-ns-sub:empty, .st-ns-sub:has(> .st-ns-err:empty:only-child) { display: none; }
.netmap-card-panel { padding: 16px 18px; }
.netmap-after[hidden] { display: none; }
.netmap-lane.netmap-preview-on .netmap-card { box-shadow: 0 0 0 2px var(--teal-600); }
.netmap-lane.netmap-preview-off .netmap-card { opacity: .6; }
.st-ns-relay { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 220px) auto; align-items: center; gap: 12px 18px; padding: 12px 18px; }
.st-ns-relay-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.st-ns-relay-ping { display: flex; align-items: center; gap: 10px; }
.st-ns-ping { flex: 1 1 auto; height: 6px; border-radius: 9999px; background: var(--kit-off-bg); overflow: hidden; }
.st-ns-ping i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--border-strong); }
.st-ns-ping.tone-good i { background: var(--tone-good); }
.st-ns-ping.tone-warn i { background: var(--tone-warn); }
.st-ns-ping.tone-bad i { background: var(--tone-bad); }
.st-ns-vendors { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 18px; }
.st-ns-adv-block { display: flex; flex-direction: column; gap: 10px; padding-bottom: 14px; border-bottom: 1px dashed var(--border-default); }
.st-ns-adv-block b { color: var(--text-primary); }
.st-ns-adv-block .code-block { white-space: pre-wrap; word-break: break-all; }

/* Public endpoint: tools it serves, key cards, Advanced's mTLS. */
.st-ns-works { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 18px 16px; justify-content: center; }
.st-ns-keys { display: flex; flex-direction: column; gap: 10px; }
.st-ns-key { display: flex; flex-direction: column; gap: 12px; padding: 14px 18px; }
.st-ns-key.is-off { opacity: .65; }
.st-ns-key-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.st-ns-key-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.st-ns-key-name b { color: var(--text-primary); display: block; }
.st-ns-key-ctl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.st-ns-key-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 10px 16px; padding-top: 12px; border-top: 1px dashed var(--border-default); }
.st-ns-adv { display: flex; flex-direction: column; gap: 12px; }
.st-ns-adv .field { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
@media (max-width: 767px) {
  .st-ns-key-ctl { justify-content: flex-start; }
  .st-ns-relay { grid-template-columns: minmax(0, 1fr) auto; }
  .st-ns-relay-ping { grid-column: 1 / -1; grid-row: 2; }
  .st-ns-sub { padding-left: 18px; }
  .st-ns-person { flex-wrap: wrap; }
  .st-ns-person-ctl { justify-content: flex-start; }
  .st-ns-token { flex-wrap: wrap; }
  .st-ns-range-fields { grid-template-columns: minmax(0, 1fr); }
  .st-ns-range { flex-wrap: wrap; }
  .st-ns-refusal { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .st-ns-area { transition: none; } }
/* == end group == */

/* == settings group: ai-models == */
/* AI models (settings-ai-models.js): feature rows, the provider grid,
   Router training, and the side panels. */
.st-ai-feat { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr) 104px auto; align-items: center; gap: 12px 20px; padding: 14px 18px; border-bottom: 1px solid var(--border-default); }
.st-ai-feat:last-child { border-bottom: 0; }
.st-ai-feat .kit-row-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* A long note (e.g. "Choose the model for … under Settings → AI models")
   wraps inside its column instead of running into the model column. */
.st-ai-feat > * { min-width: 0; }
.st-ai-feat .kit-row-title > * { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; height: auto; line-height: 1.35; }
.st-ai-feat .kit-row-title > :not(:first-child) { padding-top: 3px; padding-bottom: 3px; }
.st-ai-feat .kit-row-hint { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.st-ai-model { display: flex; align-items: center; gap: 10px; min-width: 0; }
.st-ai-model-text { min-width: 0; }
.st-ai-model-name { font-weight: 600; font-size: 13px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-ai-cost { font-size: 14px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.st-ai-provider { display: flex; align-items: flex-end; gap: 10px; }
.st-ai-provider .field { flex: 1 1 auto; }
.st-ai-mark { display: inline-flex; padding-bottom: 4px; }
.st-ai-drawer-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding-top: 4px; border-top: 1px solid var(--border-default); padding-top: 14px; }
.st-ai-filter { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; align-items: end; gap: 10px; }
.st-ai-show { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); }
.st-ai-show .input { height: 34px; width: auto; }
.st-ai-providers { padding: 4px 18px 18px; }
.st-ai-ghead { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); margin: 14px 0 8px; }
.st-ai-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.st-ai-prov { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--border-default); border-radius: 12px; background: var(--bg-canvas); color: var(--text-primary); text-align: left; cursor: pointer; min-width: 0; }
.st-ai-prov:hover { border-color: var(--teal-300); }
.st-ai-prov.on { border-color: var(--teal-200); background: var(--teal-50); }
.st-ai-prov-text { display: flex; flex-direction: column; min-width: 0; }
.st-ai-prov-text b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-ai-prov-state { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-secondary); }
.st-ai-dot { width: 7px; height: 7px; border-radius: 9999px; background: var(--kit-sev-slate); flex: none; }
.st-ai-prov-state.t-good .st-ai-dot { background: var(--tone-good); }
.st-ai-prov-state.t-warn .st-ai-dot { background: var(--tone-warn); }
.st-ai-keep { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-primary); }
.st-ai-rt { display: flex; flex-direction: column; gap: 14px; padding: 4px 18px 18px; }
.st-ai-rt .kit-flow { padding: 18px 0 4px; }
.st-ai-ack { justify-content: flex-start; gap: 8px; }
.st-ai-facts { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 19px; color: var(--text-secondary); }
.st-ai-who-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; gap: 12px 20px; }
.st-ai-past { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px dashed var(--border-default); }
.st-ai-past .actions { margin: 0; }
@media (max-width: 767px) {
  .st-ai-feat { grid-template-columns: minmax(0, 1fr) auto; }
  .st-ai-feat > .kit-row-main { grid-column: 1 / -1; }
  .st-ai-who-row, .st-ai-filter { grid-template-columns: minmax(0, 1fr); }
  .st-ai-pgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (max-width: 767px) {
  #panel-ai-models .kit-sh, #panel-assistant .kit-sh, #panel-model-proxy .kit-sh, #panel-apps .kit-sh { flex-wrap: wrap; }
}
.st-ai-keep { white-space: nowrap; }
#panel-ai-models > [hidden] { display: none; }

/* AI assistant (settings-ai-pages.js). */
.st-as-runs { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding: 18px; }
.st-as-chain { display: flex; align-items: center; gap: 10px; flex: 1 1 240px; min-width: 0; }
.st-as-arrow { color: var(--text-tertiary); font-weight: 700; }
.st-as-model { min-width: 0; }
.st-as-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.st-as-facts > div { display: flex; flex-direction: column; gap: 4px; }
.st-as-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; flex: none; margin-top: 2px; }
.st-as-bars i { width: 4px; border-radius: 2px; background: var(--border-default); }
.st-as-bars i:nth-child(1) { height: 5px; }
.st-as-bars i:nth-child(2) { height: 8px; }
.st-as-bars i:nth-child(3) { height: 11px; }
.st-as-bars i:nth-child(4) { height: 14px; }
.st-as-bars i:nth-child(5) { height: 16px; }
.st-as-bars i.on { background: var(--kit-violet-a); }
.st-as-lf { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; }
.st-as-lf-head { display: flex; align-items: center; gap: 14px; }
.st-as-lf-head .kit-row-text { flex: 1 1 auto; min-width: 0; }
.st-as-sw { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.st-as-attn { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--kit-warn-bg); color: var(--kit-warn-fg); font-size: 13px; }
.st-as-cmp { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.st-as-cmp-card { padding: 14px 16px; border: 1px solid var(--border-default); border-radius: 12px; background: var(--bg-canvas); color: var(--text-secondary); font-size: 13px; }
.st-as-cmp-card ul { margin: 6px 0 0; padding-left: 18px; }
.st-as-cmp-card.on { border-color: var(--teal-700); box-shadow: inset 0 0 0 1px var(--teal-700); background: var(--teal-50); color: var(--text-primary); }
.st-as-cmp-card.on b::after { content: " · now"; color: var(--kit-teal-fg); }
@media (max-width: 767px) { #panel-assistant .kit-choice { grid-template-columns: minmax(0, 1fr); } }

/* Model proxy. */
.st-px-card { padding: 4px 18px 18px; }
.st-px-master { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border-default); }
.st-px-master .kit-row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.st-px-flow { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1fr); align-items: center; gap: 8px; padding: 22px 0 6px; }
.st-px-node { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 14px 12px; border: 1px solid var(--border-default); border-radius: 14px; background: var(--bg-canvas); min-width: 0; }
.st-px-hub { border-color: var(--teal-300); background: var(--teal-50); }
.st-px-card.off .st-px-hub { opacity: .45; border-style: dashed; }
.st-px-t { font-weight: 700; font-size: 13.5px; color: var(--text-primary); }
.st-px-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.st-px-logos .kit-logo.sm { width: 28px; height: 28px; border-radius: 8px; }
.st-px-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.st-px-chips span { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 9999px; background: var(--kit-teal-bg); color: var(--kit-teal-fg); }
.st-px-arrow { height: 3px; background: var(--teal-600); border-radius: 2px; position: relative; }
.st-px-arrow::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left: 7px solid var(--teal-600); border-right: 0; }
.st-px-card.off .st-px-arrow { background: var(--border-default); }
.st-px-card.off .st-px-arrow::after { border-left-color: var(--border-default); }
.st-px-bypass { grid-column: 1 / -1; margin-top: 4px; border: 2px dashed var(--kit-amber-a); border-radius: 12px; padding: 6px 12px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--kit-amber-fg); background: var(--kit-warn-bg); }
.st-px-tool { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; }
.st-px-tool-head { display: flex; align-items: center; gap: 12px; }
.st-px-tool-head .kit-row-text { flex: 1 1 auto; min-width: 0; }
.st-px-warn { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--kit-warn-bg); color: var(--kit-warn-fg); font-size: 12.5px; line-height: 17px; }
.st-px-how { display: flex; flex-direction: column; gap: 8px; }
.st-px-how .code-block { white-space: pre-wrap; overflow-wrap: anywhere; }
.st-px-toolmarks, .st-sm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.st-px-toolchip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 6px; border: 1px solid var(--border-default); border-radius: 9999px; font-size: 12px; color: var(--text-primary); background: var(--bg-canvas); }
.st-px-ep { display: grid; grid-template-columns: auto 90px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--border-default); }
.st-px-ep:last-child { border-bottom: 0; }
.st-px-ep code { font-size: 12.5px; color: var(--text-primary); overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .st-px-flow { grid-template-columns: minmax(0, 1fr); }
  .st-px-arrow { width: 3px; height: 20px; justify-self: center; }
  .st-px-arrow::after { right: -4px; top: auto; bottom: -2px; border: 5px solid transparent; border-top: 7px solid var(--teal-600); border-bottom: 0; }
  .st-px-card.off .st-px-arrow::after { border-top-color: var(--border-default); border-left-color: transparent; }
  .st-px-ep { grid-template-columns: auto minmax(0, 1fr) auto; }
  .st-px-ep code { grid-column: 1 / -1; }
}

/* Model prices. */
.st-pr-src { display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
.st-pr-v { font-size: 22px; line-height: 28px; font-weight: 800; letter-spacing: -0.03em; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.st-pr-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.st-pr-search { flex: 1 1 200px; min-width: 0; }
.st-pr-search .input { width: 100%; }
.st-pr-sel { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 4px 0 12px; border: 1px solid var(--border-default); border-radius: 10px; background: var(--bg-canvas); font-size: 12.5px; color: var(--text-secondary); max-width: 100%; }
.st-pr-sel .input { border: 0; height: 32px; padding: 0 6px; background: transparent; max-width: 150px; color: var(--text-primary); font-weight: 600; }
.st-pr-mark { display: inline-flex; }
.st-pr-mark:empty { display: none; }
.st-pr-sp { flex: 1 1 auto; }
.st-pr-count { font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; }
.st-pr-table { overflow: hidden; }
.st-pr-rows th.num, .st-pr-rows td.num { text-align: right; }
.st-pr-model { display: inline-flex; align-items: center; gap: 8px; }
.st-pr-dot { width: 8px; height: 8px; border-radius: 9999px; flex: none; background: var(--kit-sev-slate); }
.st-pr-dot.t-free { background: var(--kit-green-a); }
.st-pr-dot.t-budget { background: var(--kit-sky-a); }
.st-pr-dot.t-standard { background: var(--kit-amber-a); }
.st-pr-dot.t-premium { background: var(--kit-violet-a); }
.st-pr-cat { display: inline-flex; padding: 1px 8px; border-radius: 9999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; background: var(--kit-slate-bg); color: var(--kit-slate-fg); }
.st-pr-cat.c-text { background: var(--kit-sky-bg); color: var(--kit-sky-fg); }
.st-pr-cat.c-vision { background: var(--kit-violet-bg); color: var(--kit-violet-fg); }
.st-pr-cat.c-image-generation { background: var(--kit-pink-bg); color: var(--kit-pink-fg); }
.st-pr-cat.c-audio { background: var(--kit-amber-bg); color: var(--kit-amber-fg); }
.st-pr-cat.c-embeddings { background: var(--kit-green-bg); color: var(--kit-green-fg); }
.st-pr-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--border-default); }
.st-pr-pages { display: inline-flex; gap: 8px; }
.st-pr-empty { padding: 24px 18px; margin: 0; }
.st-pr-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.st-pr-note { margin: -14px 0 0; }
.st-pr-link { border: 0; background: none; padding: 0; color: var(--text-link); font: inherit; cursor: pointer; text-decoration: underline; }

.st-pr-model { white-space: nowrap; }

/* Apps (settings-apps.js). */
.st-app-hero { display: flex; align-items: center; gap: 16px; padding: 18px; }
.st-app-hero .kit-row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.st-app-limits { display: flex; flex-wrap: wrap; gap: 14px 32px; padding: 14px 18px; margin-top: 12px; }
.st-app-prov { display: flex; flex-wrap: wrap; gap: 14px 32px; }
.st-app-prov[hidden], .st-app-team-prov[hidden], .st-app-empty[hidden] { display: none; }
.st-app-num { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-primary); }
.st-app-who { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; }
.st-app-team { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border-default); }
.st-app-team:last-child { border-bottom: 0; }
.st-app-team-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.st-app-team-head > select { flex: 1 1 200px; width: auto; min-width: 0; }
.st-app-team-prov { display: flex; flex-wrap: wrap; gap: 10px 24px; padding-left: 42px; }
.st-app-team-approvers { display: flex; flex-direction: column; gap: 6px; padding-left: 42px; }
.st-app-rules { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.st-app-rule { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; }
.st-app-rule-head { display: flex; align-items: center; gap: 10px; }
.st-app-rule-head > select { flex: 1 1 auto; width: auto; min-width: 0; font-weight: 600; }
.st-app-rule-tile { display: inline-flex; }
.st-app-empty { display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px 18px; font-size: 13px; color: var(--text-secondary); }
.st-app-paths { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; }
.st-app-chiprow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.st-app-chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 10px; border: 1px solid var(--border-default); border-radius: 9999px; font-size: 13px; color: var(--text-primary); background: var(--bg-canvas); cursor: pointer; }
.st-app-chip:has(input:checked) { border-color: var(--teal-700); background: var(--teal-50); }
.st-app-catalog { display: flex; flex-direction: column; gap: 6px; grid-column: 1 / -1; }
@media (max-width: 767px) {
  #panel-apps .kit-choice { grid-template-columns: minmax(0, 1fr); }
  .st-app-team-prov, .st-app-team-approvers { padding-left: 0; }
  .st-app-hero { flex-wrap: wrap; }
}

/* Settings → Apps → Registration form (settings-apps-form.js): the editor
   beside a sticky preview of the developer's form. */
.st-appf { display: flex; flex-direction: column; gap: 12px; }
.st-appf-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); gap: 20px; align-items: start; }
.st-appf-edit { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.st-appf-h { margin: 0; padding: 14px 18px 4px; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.st-appf-own { padding: 6px 0 0; }
.st-appf-hint { margin: 0; padding: 0 18px 6px; }
.st-appf-fields { padding-bottom: 6px; }
.st-appf-field { border-top: 1px solid var(--border-default); }
.st-appf-field:first-of-type { border-top: 0; }
.st-appf-ctl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.st-appf-sub { display: flex; flex-direction: column; gap: 10px; padding: 4px 18px 16px 62px; }
.st-appf-sub[hidden], .st-appf-sub [hidden] { display: none; }
.st-appf-qs { display: flex; flex-direction: column; gap: 12px; }
.st-appf-q { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
.st-appf-q.dragging { opacity: .55; }
.st-appf-q.drop { border-color: var(--teal-700); box-shadow: var(--shadow-focus); }
.st-appf-qhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.st-appf-qhead > .input { flex: 1 1 220px; min-width: 0; }
.st-appf-qhead > select.input { flex: 0 0 auto; width: auto; }
.st-appf-grip { cursor: grab; display: inline-flex; }
.st-appf-req { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); }
.st-appf-qbtns { display: inline-flex; gap: 4px; margin-left: auto; }
.st-appf-qbody { display: flex; flex-direction: column; gap: 10px; padding-left: 4px; }
.st-appf-opts { display: flex; flex-direction: column; gap: 8px; }
.st-appf-opt { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-control); background: var(--bg-field-on-canvas); }
.st-appf-optmain { display: flex; align-items: center; gap: 8px; }
.st-appf-optmain > .input { flex: 1 1 auto; min-width: 0; }
.st-appf-optmain > .st-appf-val { flex: 0 1 180px; }
.st-appf-yn { min-width: 3ch; }
.st-appf-policy { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.st-appf-tags { flex: 1 1 240px; min-width: 0; }
.st-appf-cond { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.st-appf-cond > select.input { width: auto; max-width: 100%; }
.st-appf-cond-rest { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.st-appf-cond-rest > .input { width: auto; }
.st-appf-preview { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; max-height: calc(100vh - 24px); overflow: auto; }
.st-appf-preview-head { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border-default); }
.st-appf-problem { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-color: var(--kit-unsaved-line); background: var(--kit-unsaved-bg); }
.st-appf-problem p { margin: 0; color: var(--text-primary); }
@media (max-width: 1100px) {
  .st-appf-grid { grid-template-columns: minmax(0, 1fr); }
  .st-appf-preview { position: static; max-height: none; }
}
@media (max-width: 767px) {
  .st-appf-sub { padding-left: 18px; }
  .st-appf-optmain { flex-wrap: wrap; }
}

/* Shared models and Work insights (clients). */
.st-sm-row { cursor: pointer; }
.st-sm-empty { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.st-sm-empty p { margin: 0; }
.st-sm-note[hidden] { display: none; }
.st-sm-note { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 13px; color: var(--kit-warn-fg); }
.st-sm-use { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; }
.st-sm-ep { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.st-sm-ep code { overflow-wrap: anywhere; }
.st-wi-card { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.st-wi-head { display: flex; align-items: center; gap: 14px; }
.st-wi-head .kit-row-text, .st-wi-head > .toggle-row { flex: 1 1 auto; min-width: 0; }
.st-wi-facts { list-style: none; margin: 0; padding: 6px 18px; }
.st-wi-facts li { display: flex; align-items: center; gap: 12px; padding: 10px 0; font-size: 13.5px; color: var(--text-primary); border-bottom: 1px solid var(--border-default); }
.st-wi-facts li:last-child { border-bottom: 0; }
/* == end group == */

/* == settings group: data == */
/* Local database, audit log, telemetry storage and attribute mapping
   (settings-database.js, settings-audit.js, settings-archive.js,
   settings-attribute-mapping.js). */
.st-data-keep { border-bottom: 1px solid var(--border-default); }
.st-data-note { margin: 10px 0 0; }
.st-data-space { padding: 18px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.st-data-space-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.st-data-big { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--text-primary); }
.st-data-meter { height: 14px; border-radius: 9999px; background: var(--kit-off-bg); overflow: hidden; display: flex; }
.st-data-meter span { display: block; height: 100%; }
.st-data-used { background: var(--kit-sky-a); }
.st-data-freed { background: repeating-linear-gradient(45deg, var(--kit-amber-a), var(--kit-amber-a) 4px, var(--kit-amber-bg) 4px, var(--kit-amber-bg) 8px); }
.st-data-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--text-secondary); }
.st-data-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.st-data-key.used { background: var(--kit-sky-a); }
.st-data-key.freed { background: var(--kit-amber-a); }
.st-data-key.left { background: var(--kit-off-bg); border: 1px solid var(--border-default); }
.st-data-file { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px dashed var(--border-default); min-width: 0; }
.st-data-path { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--text-secondary); overflow-wrap: anywhere; }
.st-data-ret { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.st-data-ret-head { display: flex; align-items: center; gap: 10px; }
.st-data-custom-row { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-primary); }
.st-data-custom { width: 110px; min-width: 0; }
.st-data-console { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.st-data-console-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.st-data-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 12px 16px; }
.st-data-fact { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; line-height: 17px; color: var(--text-secondary); }
.st-data-fact b { color: var(--text-primary); }
.st-data-access-text { flex: 1 1 auto; min-width: 0; color: var(--text-secondary); }
.st-data-access .kit-pill { margin-right: 6px; }
.st-data-link { font-weight: 600; white-space: nowrap; }
.st-data-reset { display: flex; flex-direction: column; gap: 14px; }
.st-data-reset > p { margin: 0; }
.st-data-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 8px; }
.st-data-pick { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border-default); border-radius: 12px; background: var(--bg-canvas); color: var(--text-primary); cursor: pointer; text-align: left; width: 100%; }
.st-data-pick:disabled { cursor: not-allowed; opacity: .7; }
.st-data-pick.on { border-color: var(--kit-danger-line); background: var(--kit-danger-bg); }
.st-data-box { width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--color-neutral-350); flex: none; display: inline-flex; align-items: center; justify-content: center; color: transparent; }
.st-data-box svg.icon { width: 12px; height: 12px; }
.st-data-pick.on .st-data-box { background: var(--kit-block-bg); border-color: var(--kit-block-bg); color: var(--kit-block-fg); }
.st-data-pick-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.st-data-pick-text b { font-size: 13.5px; }
.st-data-pick-count { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.st-data-range { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.st-data-range .input { width: auto; }
.st-data-never { display: flex; align-items: center; gap: 6px; margin: 0; }
.st-data-never svg.icon { width: 13px; height: 13px; flex: none; }

.st-audit-srcs { margin-bottom: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.st-audit-src { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; }
.st-audit-src b { font-size: 13.5px; color: var(--text-primary); }
.st-audit-src span:not(.kit-tile) { font-size: 12.5px; color: var(--text-secondary); }
.st-audit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 11px 18px; border-bottom: 1px solid var(--border-default); font-size: 13px; color: var(--text-primary); }
.st-audit-row:last-child { border-bottom: 0; }
.st-audit-who { color: var(--text-secondary); font-size: 12.5px; }
.st-audit-when { margin-left: auto; color: var(--text-secondary); font-size: 12px; white-space: nowrap; }
.st-audit-empty, .st-am-empty { margin: 0; padding: 14px 18px; font-size: 13px; color: var(--text-secondary); }
.st-audit-ret { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.st-audit-line { position: relative; height: 56px; margin: 4px 4px 0; }
.st-audit-bar, .st-audit-fill { position: absolute; left: 0; top: 20px; height: 10px; border-radius: 9999px; }
.st-audit-bar { right: 0; background: var(--kit-off-bg); }
.st-audit-fill { background: linear-gradient(90deg, var(--kit-indigo-bg), var(--kit-indigo-a)); }
.st-audit-now { position: absolute; top: 0; font-size: 11.5px; font-weight: 700; color: var(--kit-indigo-fg); transform: translateX(-100%); white-space: nowrap; }
.st-audit-tick { position: absolute; top: 38px; font-size: 11.5px; color: var(--text-secondary); transform: translateX(-50%); white-space: nowrap; }
.st-audit-tick:nth-last-child(4) { transform: none; }
.st-audit-tick:last-child { transform: translateX(-100%); }
.st-audit-custom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }

.st-arc-card { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.st-arc-card > p { margin: 0; }
.st-arc-provs { display: flex; flex-wrap: wrap; gap: 8px; }
.st-arc-prov { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px 0 5px; border: 1px solid var(--border-default); border-radius: 12px; background: var(--bg-canvas); color: var(--text-primary); font-size: 13px; font-weight: 600; }
button.st-arc-prov { cursor: pointer; }
button.st-arc-prov:disabled { cursor: not-allowed; opacity: .6; }
.st-arc-prov.on { border-color: var(--teal-700); box-shadow: inset 0 0 0 1px var(--teal-700); background: var(--teal-50); }
.st-arc-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.st-arc-pick p { margin: 0; }
.st-arc-select { width: auto; max-width: 100%; min-width: 0; flex: 0 1 460px; }
.st-arc-span { display: flex; min-height: 40px; border-radius: 12px; overflow: hidden; font-size: 12.5px; font-weight: 600; }
.st-arc-span > div { display: flex; align-items: center; gap: 8px; padding: 8px 14px; }
.st-arc-span svg.icon { width: 16px; height: 16px; flex: none; }
.st-arc-span-old { flex: 3 1 0; background: var(--kit-orange-bg); color: var(--kit-orange-fg); }
.st-arc-span-new { flex: 2 1 0; background: var(--kit-sky-a); color: #fff; }
.st-arc-cache { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.st-arc-meter { width: 200px; max-width: 100%; height: 8px; border-radius: 9999px; background: var(--kit-off-bg); overflow: hidden; }
.st-arc-meter span { display: block; height: 100%; background: var(--kit-sky-a); }
.st-arc-ds { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--border-default); }
.st-arc-ds:last-child { border-bottom: 0; }
.st-arc-ds.is-off .kit-tile { filter: grayscale(1); opacity: .6; }
.st-arc-ds-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; color: var(--text-primary); }
.st-arc-ds-ctl { display: flex; align-items: center; gap: 14px; }
.st-arc-days { display: inline-flex; align-items: center; gap: 6px; }
.st-arc-days .input { width: 76px; min-width: 0; height: 32px; text-align: right; }
.st-arc-readers.is-dim .st-arc-reader-list { opacity: .55; }
.st-arc-reader-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.st-arc-reader { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px 0 3px; border: 1px solid var(--border-default); border-radius: 9999px; font-size: 12.5px; font-weight: 600; color: var(--text-primary); background: var(--bg-canvas); }
.st-arc-mark { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--color-neutral-0); border: 1px solid var(--border-default); }
.st-arc-reader .st-arc-mark { width: 28px; height: 28px; border-radius: 9999px; border: 0; }
.st-arc-how { margin: 0 0 12px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-secondary); }

.st-am-out { padding: 12px 18px; border-top: 1px solid var(--border-default); }
.st-am-out p { margin: 0; }
.st-am .kit-stop-text { min-height: 0; }
.st-am-dests { display: flex; justify-content: center; gap: 6px; margin-top: 6px; }
.st-am-dest { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-neutral-0); border: 1px solid var(--border-default); font-size: 11px; font-weight: 700; color: var(--text-secondary); }
.st-am-count { font-weight: 500; color: var(--text-secondary); font-size: 14px; }
.st-am-rule { border-bottom: 1px solid var(--border-default); }
.st-am-rule:last-child { border-bottom: 0; }
.st-am-rule .am-editor { margin: 0 18px 16px; }
.st-am-rule-head { display: grid; grid-template-columns: 28px 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 18px; }
.st-am-rule.is-off .st-am-rule-head > :not(.st-am-rule-actions) { opacity: .6; }
.st-am-num { width: 28px; height: 28px; border-radius: 9999px; background: var(--text-primary); color: var(--bg-canvas); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.st-am-rule-text { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.st-am-rule-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; color: var(--text-primary); }
.st-am-rule-desc { font-size: 12.5px; line-height: 17px; color: var(--text-secondary); }
.st-am-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.st-am-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 9999px; font-size: 12px; font-weight: 600; background: var(--kit-off-bg); color: var(--text-secondary); }
.st-am-chip.bad { background: var(--kit-warn-bg); color: var(--kit-warn-fg); }
.st-am-rule-actions { display: flex; align-items: center; gap: 2px; }
.st-am-rule-actions .switch { margin-left: 8px; }
.st-am-version { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 18px; border-bottom: 1px solid var(--border-default); font-size: 13px; color: var(--text-primary); }
.st-am-version:last-child { border-bottom: 0; }
.st-am-version-meta { flex: 1 1 auto; color: var(--text-secondary); font-size: 12.5px; }
.st-am-locks { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.st-am-lock { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 8px; background: var(--kit-off-bg); font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 12px; color: var(--text-secondary); }
.st-am-lock svg.icon { width: 12px; height: 12px; }
.st-am-reveal { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.st-am-reveal-box, .st-am-key { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.st-am-key p { margin: 0; }
.st-am-key-head { display: flex; align-items: center; gap: 10px; color: var(--text-primary); }
@media (min-width: 1024px) {
  .st-am .kit-sh-actions { flex-wrap: nowrap; }
}
@media (max-width: 767px) {
  .st-data-file { flex-wrap: wrap; }
  .st-data-path { flex-basis: calc(100% - 44px); }
  .st-arc-ds { grid-template-columns: 40px minmax(0, 1fr); }
  .st-arc-ds-ctl { grid-column: 2; }
  .st-arc-span { flex-direction: column; }
  .st-am-rule-head { grid-template-columns: 28px minmax(0, 1fr); }
  .st-am-rule-head > .kit-tile { display: none; }
  .st-am-rule-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .st-am-reveal { grid-template-columns: minmax(0, 1fr); }
  .st-arc-reader-list { justify-content: flex-start; }
  .st-arc-readers { grid-template-columns: minmax(0, 1fr); }
}
/* == end group == */

/* == settings group: clients == */
/* Clients: the pairing-code lifetime card, and the server-as-client row. */
.st-cl-dur { display: flex; flex-direction: column; gap: 14px; padding: 18px; }
.st-cl label.kit-row { cursor: pointer; }
/* Privacy notice: the organisation's words, and one row per thing collected. */
.st-pn-text { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.st-pn-text p { margin: 0; }
.st-pn-line { font-size: 13.5px; line-height: 19px; color: var(--text-primary); }
@media (max-width: 767px) {
  .st-pn .kit-row { grid-template-columns: minmax(0, 1fr); }
  .st-pn .kit-row-ctl { justify-content: flex-start; }
}

/* == end group == */

/* == settings group: updates-maintenance == */
/* Shared by Updates, Sidekick and Diagnostics. */
.st-upd-note { margin: 0; font-size: 12.5px; line-height: 18px; color: var(--text-secondary); }
.st-upd-alert { margin: 0; padding: 12px 16px; border: 1px solid var(--kit-unsaved-line); background: var(--kit-unsaved-bg); border-radius: var(--radius-surface); font-size: 13px; color: var(--text-primary); overflow-wrap: anywhere; }
.st-upd-follow, .st-sk-show { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.st-sk-show span { font-weight: 500; color: var(--text-secondary); }
.st-sk-show select.input { width: auto; min-width: 150px; }

/* Settings → Updates (settings-updates.js, rollout.js, settings-content.js). */
.st-upd-hero { padding: 22px 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.st-upd-hero.solo { grid-template-columns: minmax(0, 1fr); }
.st-upd-hero-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.st-upd-ver-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.st-upd-ver { font-size: 40px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--text-primary); }
.st-upd-hero .release-notes { margin-top: 6px; }
.st-upd-tl-wrap { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.st-upd-tl { list-style: none; margin: 0; padding: 6px 0 0; position: relative; display: flex; justify-content: space-between; gap: 6px; }
.st-upd-tl::before { content: ""; position: absolute; left: 8px; right: 8px; top: 14px; height: 3px; border-radius: 3px; background: var(--kit-teal-bg); }
.st-upd-tl li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); text-align: center; min-width: 0; }
.st-upd-tl li i { width: 14px; height: 14px; border-radius: 9999px; background: var(--bg-canvas); border: 3px solid var(--teal-300); box-sizing: border-box; }
.st-upd-tl li.now i { width: 20px; height: 20px; margin-top: -3px; background: var(--teal-700); border: 4px solid var(--kit-teal-bg); }
.st-upd-tl li b { font-size: 12.5px; color: var(--text-primary); overflow-wrap: anywhere; }
.st-upd-tl li.now b { color: var(--kit-teal-fg); }
.st-upd-pin { margin-top: 10px; padding: 14px 18px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.st-upd-pin b { font-size: 13.5px; color: var(--text-primary); }
.st-upd-pin .input { width: 180px; }
.st-upd > section > .managed-label { margin-top: 8px; }
.st-upd-roll.is-off .kit-flow { opacity: .5; }
.st-upd-roll-foot { border-top: 1px solid var(--border-default); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.st-upd-roll-foot:empty { display: none; }
.st-upd-roll-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.st-upd-roll-head b { color: var(--text-primary); }
.st-upd-packs { margin-top: 12px; }
.st-upd-packs-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 14px 18px; }
.st-upd-pack-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; padding: 0 18px 18px; }
.st-upd-pack { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--border-default); border-radius: 12px; background: var(--bg-canvas); min-width: 0; }
.st-upd-pack b { display: block; font-size: 13px; color: var(--text-primary); }
.st-upd-pack > div > span { display: block; font-size: 12px; color: var(--text-secondary); }
.st-upd-pack .kit-pill { margin-left: auto; }

/* Settings → Sidekick (settings-sidekick.js). */
.st-sk-does.is-off .kit-row, .st-sk-does.is-off .st-sk-steps { opacity: .5; }
.st-sk-steps { border-bottom: 1px solid var(--border-default); background: var(--bg-field-on-canvas); }
.st-sk-steps .kit-flow { padding: 18px 12px 14px; }
.st-sk-tl { padding: 6px 0 8px; }
.st-sk-day { padding: 12px 18px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); }
.st-sk-ev { display: grid; grid-template-columns: 48px 14px minmax(0, 1fr); gap: 10px; align-items: start; padding: 6px 18px; }
.st-sk-tm { font-size: 12px; color: var(--text-secondary); padding-top: 1px; }
.st-sk-dot { width: 10px; height: 10px; border-radius: 9999px; margin-top: 4px; background: var(--kit-sev-slate); }
.st-sk-ev.k-bad .st-sk-dot { background: var(--tone-bad); }
.st-sk-ev.k-warn .st-sk-dot { background: var(--tone-warn); }
.st-sk-ev.k-good .st-sk-dot { background: var(--tone-good); }
.st-sk-ev.k-info .st-sk-dot { background: var(--kit-sev-blue); }
.st-sk-text { font-size: 13px; color: var(--text-primary); overflow-wrap: anywhere; }
.st-sk-ev.k-bad .st-sk-text { font-weight: 600; }
.st-sk-tl > .st-upd-note { padding: 12px 18px; }
.st-sk-more { padding: 8px 18px 4px; }
.st-sk-facts { padding: 14px 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px 20px; }
.st-sk-fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; color: var(--text-primary); }
.st-sk-fact span { font-size: 12px; color: var(--text-secondary); }
.st-sk-fact b { font-weight: 600; overflow-wrap: anywhere; }
.st-sk-fact small { font-size: 12px; color: var(--text-tertiary); overflow-wrap: anywhere; }
.st-sk-kit { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.st-sk-kit .code-block { white-space: pre-wrap; word-break: break-all; margin: 0; }
.st-sk .kit-kpi-value .byte-mark { vertical-align: -4px; }
.st-sk .kit-kpi-value, .st-diag .kit-kpi-value { font-size: 20px; line-height: 26px; }

/* Settings → Diagnostics (settings-diagnostics.js). */
.st-diag-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 12px; }
.st-diag-charts > * { min-width: 0; grid-column: auto; }
.st-diag-table { max-height: 300px; overflow: auto; }
.st-diag-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.st-diag-chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: 1px solid var(--border-default); border-radius: 9999px; background: var(--bg-canvas); font-size: 12.5px; color: var(--text-secondary); }
.st-diag-chip svg.icon { width: 15px; height: 15px; }
.st-diag-chip b { color: var(--text-primary); }
.st-diag-chip b.tone-good { color: var(--tone-good); }
.st-diag-runs { padding: 18px 18px 12px; display: flex; flex-direction: column; gap: 10px; }
.st-diag-empty { padding: 14px 18px; }
.st-diag-strip { height: 110px; display: flex; align-items: flex-end; gap: 4px; }
.st-diag-bar { flex: 1 1 0; min-width: 4px; max-width: 40px; border-radius: 4px 4px 2px 2px; background: var(--kit-indigo-bg); border: 1px solid var(--kit-indigo-fg); box-sizing: border-box; }
.st-diag-bar.k-now { background: var(--teal-600); border-color: var(--teal-600); }
.st-diag-bar.k-warn { background: var(--tone-warn); border-color: var(--tone-warn); }
.st-diag-bar.k-bad { background: var(--tone-bad); border-color: var(--tone-bad); }
.st-diag-axis { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; font-size: 12px; color: var(--text-secondary); }
.st-diag-legend { display: inline-flex; flex-wrap: wrap; gap: 6px 14px; }
.st-diag-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.st-diag-key { width: 10px; height: 10px; border-radius: 3px; background: var(--kit-indigo-bg); border: 1px solid var(--kit-indigo-fg); }
.st-diag-key.k-now { background: var(--teal-600); border-color: var(--teal-600); }
.st-diag-key.k-warn { background: var(--tone-warn); border-color: var(--tone-warn); }
.st-diag-key.k-bad { background: var(--tone-bad); border-color: var(--tone-bad); }
.st-diag-sats { margin-top: 12px; }
.st-diag-satnote { padding: 10px 18px 12px; }
.st-diag-logcard { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.st-diag-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border-default); }
.st-diag-filters .input[type="search"] { flex: 0 1 260px; min-width: 0; }
.st-diag-sp { flex: 1 1 auto; }
.st-diag-log { border-radius: 0; max-height: 460px; }
.st-diag-trace { margin: 2px 0 4px 18px; }
.st-diag-trace summary { cursor: pointer; color: var(--text-secondary); font-size: 12px; }
.st-diag-trace pre { margin: 4px 0 0; white-space: pre-wrap; word-break: break-all; color: var(--text-secondary); }

@media (max-width: 767px) {
  .st-upd-hero { grid-template-columns: minmax(0, 1fr); padding: 18px; gap: 20px; }
  .st-upd-ver { font-size: 32px; }
  .st-upd-tl { overflow-x: auto; }
  .st-upd .kit-sh, .st-sk .kit-sh, .st-diag .kit-sh { flex-wrap: wrap; }
  .st-upd .kit-sh-text, .st-sk .kit-sh-text, .st-diag .kit-sh-text { flex: 1 1 calc(100% - 44px); }
  .st-upd .kit-sh-actions, .st-sk .kit-sh-actions, .st-diag .kit-sh-actions { flex: 1 1 100%; justify-content: flex-start; padding-left: 44px; }
  .st-diag-filters .input[type="search"] { flex: 1 1 100%; }
  .st-diag-strip { gap: 2px; }
}
/* == end group == */

/* == settings group: notifications == */
/* Notifications (settings-notifications.js): how alerts reach you, the
   event cards with their two icon switches, alert channels. */
.st-nt-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); border-top: 1px solid var(--border-default); }
.st-nt-fact { padding: 12px 18px; min-width: 0; border-left: 1px solid var(--border-default); margin-left: -1px; }
.st-nt-fact-label { display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 2px; }
.st-nt-fact-value { font-size: 13px; color: var(--text-primary); overflow-wrap: anywhere; }
.st-nt-lock { display: inline-flex; align-items: center; gap: 5px; }
.st-nt-lock svg.icon { width: 14px; height: 14px; color: var(--text-secondary); }
.st-nt-problems { padding: 0 18px 14px; display: flex; flex-direction: column; gap: 8px; }
.st-nt-notice { margin-bottom: 12px; }
.st-nt-note, .st-nt-empty { margin: 0; font-size: 13px; color: var(--text-secondary); }
.st-nt-empty { padding: 14px 18px; }
.st-nt-danger { color: var(--tone-bad); }
.st-nt-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 12px; }
.st-nt-filter { display: inline-flex; align-items: center; gap: 8px; }
.st-nt-filter-label { font-size: 13px; color: var(--text-secondary); }
.st-nt-filter .input { width: auto; min-width: 120px; }
.st-nt-legend { margin-left: auto; display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--text-secondary); }
.st-nt-legend span { display: inline-flex; align-items: center; gap: 5px; }
.st-nt-legend svg.icon { width: 14px; height: 14px; }
.st-nt-groups { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); align-items: start; }
.st-nt-group { padding-bottom: 6px; }
.st-nt-group-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 8px; font-size: 14px; color: var(--text-primary); }
.st-nt-er { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 8px 16px; border-top: 1px solid var(--border-default); font-size: 13px; color: var(--text-primary); }
.st-nt-er-text { min-width: 0; }
.st-nt-off { color: var(--text-tertiary); font-size: 12px; }
.st-nt-sev { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 9999px; padding: 1px 7px; white-space: nowrap; }
.st-nt-sev.sev-critical { background: var(--kit-red-bg); color: var(--kit-red-fg); }
.st-nt-sev.sev-warning { background: var(--kit-warn-bg); color: var(--kit-warn-fg); }
.st-nt-sev.sev-info { background: var(--kit-blue-bg); color: var(--kit-blue-fg); }
.st-nt-it { width: 32px; height: 28px; border-radius: 8px; border: 1px solid var(--border-default); background: var(--bg-canvas); color: var(--text-tertiary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.st-nt-it svg.icon { width: 15px; height: 15px; }
.st-nt-it.on { background: var(--kit-enforce-bg); border-color: var(--kit-enforce-bg); color: var(--kit-enforce-fg); }
.st-nt-it:hover:not(:disabled) { border-color: var(--teal-300); }
.st-nt-it:disabled { cursor: not-allowed; opacity: .7; }
.st-nt-silent { grid-template-columns: minmax(0, 1fr) auto; color: var(--text-secondary); }
.st-nt-hours-wrap { display: inline-flex; align-items: center; gap: 6px; }
.st-nt-hours { width: 72px; height: 30px; }
.st-nt-channels { display: flex; flex-direction: column; gap: 12px; }
.st-nt-chan-tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.st-nt-chan { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px dashed var(--border-strong); border-radius: 12px; background: var(--bg-canvas); min-width: 0; }
.st-nt-chan-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.st-nt-chan-text b { font-size: 13.5px; color: var(--text-primary); }
.st-nt-chan-text span { font-size: 12px; color: var(--text-secondary); }

/* Uptime (settings-notifications.js). */
.st-up-master { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; }
.st-up-privacy { margin-top: 12px; }
.st-up-card { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.st-up-card b { font-size: 13.5px; color: var(--text-primary); }
.st-up-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.st-up-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 9999px; font-size: 12.5px; font-weight: 600; background: var(--kit-green-bg); color: var(--kit-green-fg); }
.st-up-chip svg.icon { width: 13px; height: 13px; }
.st-up-chips.never .st-up-chip { background: var(--kit-off-bg); color: var(--text-secondary); text-decoration: line-through; }

/* Device Admin (settings-phones.js): feature cards, a card per device,
   and the three steps of adding one in a side panel. */
.st-dev-feats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.st-dev-feat { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.st-dev-feat b { display: block; font-size: 13.5px; color: var(--text-primary); }
.st-dev-feat span:not(.kit-tile) { font-size: 12.5px; color: var(--text-secondary); }
.st-dev-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.st-dev { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.st-dev-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.st-dev-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; font-size: 13px; color: var(--text-primary); }
.st-dev-kv > div > span { display: block; font-size: 12px; color: var(--text-secondary); }
.st-dev-push { display: inline-flex; align-items: center; gap: 6px; }
.st-dev-push .kit-logo.sm { width: 22px; height: 22px; border-radius: 6px; }
.st-dev-push .kit-logo.sm svg { width: 13px; height: 13px; }
.st-dev-exp-line { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
.st-dev-meter { height: 6px; border-radius: 9999px; background: var(--kit-off-bg); overflow: hidden; }
.st-dev-fill { display: block; height: 100%; border-radius: 9999px; background: var(--kit-teal-a); }
.st-dev-fill.low { background: var(--kit-amber-a); }
.st-dev-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.st-dev-danger { color: var(--tone-bad); }
.st-dev-empty { display: flex; align-items: center; gap: 14px; padding: 18px; flex-wrap: wrap; }
.st-dev-empty > div { flex: 1 1 240px; display: flex; flex-direction: column; }
.st-dev-empty b { color: var(--text-primary); }
.st-dev-empty span:not(.kit-tile) { font-size: 13px; color: var(--text-secondary); }
.st-dev-secure { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; }
.st-dev-secure p { margin: 0; font-size: 13px; color: var(--text-primary); }
.st-dev-sub { margin: 4px 0 0; font-size: 12.5px; color: var(--text-secondary); }
.st-dev-secure p.st-dev-sub { color: var(--text-secondary); }
.st-dev-drawer { display: flex; flex-direction: column; gap: 20px; min-height: 100%; }
.st-dev-steps { display: flex; flex-direction: column; gap: 18px; }
.st-dev-step { display: flex; align-items: flex-start; gap: 12px; }
.st-dev-step-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.st-dev-step-body > b { padding-top: 4px; color: var(--text-secondary); font-weight: 600; }
.st-dev-step.cur .st-dev-step-body > b, .st-dev-step.done .st-dev-step-body > b { color: var(--text-primary); }
.st-dev-step-body > .st-dev-sub { margin: -6px 0 0; }
.st-dev-num { width: 28px; height: 28px; border-radius: 9999px; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; background: var(--kit-off-bg); color: var(--text-secondary); }
.st-dev-step.cur .st-dev-num { background: var(--kit-enforce-bg); color: var(--kit-enforce-fg); }
.st-dev-step.done .st-dev-num { background: var(--kit-green-bg); color: var(--kit-green-fg); }
.st-dev-qr { display: flex; flex-direction: column; gap: 8px; }
.st-dev-count { font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.st-dev-ask { margin: 0; font-size: 14px; color: var(--text-primary); }
.st-dev-foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid var(--border-default); }
@media (max-width: 767px) {
  .st-nt-legend { margin-left: 0; }
  .st-nt-er { padding: 8px 12px; }
  .st-up-master { padding: 14px 16px; }
}
/* Notifications to people: one row per kind with its switch; off shows who. */
.st-nt-people { overflow: hidden; }
.st-nt-person { border-bottom: 1px solid var(--border-default); }
.st-nt-person:last-child { border-bottom: 0; }
.st-nt-person .kit-row { border-bottom: 0; }
.st-nt-person .kit-row-title .kit-pill { margin-left: 6px; vertical-align: middle; }
.st-nt-audience { display: flex; flex-direction: column; gap: 8px; margin: 0 18px 14px 58px; padding: 12px 14px; border: 1px dashed var(--border-default); border-radius: var(--radius-control); background: var(--bg-field-on-canvas); }
.st-nt-audience-label { font-size: 13px; font-weight: 600; color: var(--text-primary); }
@media (max-width: 640px) { .st-nt-audience { margin-left: 18px; } }
.st-nt-people + .st-nt-note { margin-top: 10px; }
/* == end group == */

/* == settings group: account == */
/* License (settings-license.js, license-certificate.js). */
.st-cert { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px; padding: 24px 26px; border-radius: 18px; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, var(--kit-teal-a) 0%, var(--kit-teal-b) 45%, #0f1729 100%); box-shadow: var(--shadow-raised); }
.st-cert-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.st-cert-pill { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 9999px; background: #dcfce7; color: #15803d; font-size: 12px; font-weight: 700; }
.st-cert-pill.bad { background: #fee2e2; color: #b91c1c; }
.st-cert-pill svg.icon { width: 13px; height: 13px; }
.st-cert-kicker { font-size: 12.5px; color: #ccfbf1; }
.st-cert-tier { font-size: 30px; line-height: 1.15; font-weight: 800; letter-spacing: -0.03em; }
.st-cert-sub { margin: 4px 0 0; font-size: 14px; color: #ccfbf1; }
.st-cert-seal { width: 76px; height: 76px; border-radius: 9999px; border: 2px dashed rgba(255, 255, 255, .5); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #ccfbf1; }
.st-cert-seal svg.icon { width: 22px; height: 22px; }
.st-cert-facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 12px 20px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .18); }
.st-cert-label { display: block; font-size: 11.5px; color: #99f6e4; margin-bottom: 2px; }
.st-cert-facts b { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.st-cert-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.st-cert-actions .button.secondary { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .28); color: #fff; }
.st-cert-actions .button.secondary:hover { background: rgba(255, 255, 255, .2); }
.st-cert-note { flex: 1 1 260px; font-size: 12.5px; color: #99f6e4; }
.st-acct-intro { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; padding: 18px 20px; }
.st-acct-intro.warn { border-color: var(--kit-unsaved-line); background: var(--kit-unsaved-bg); }
.st-acct-intro-text { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.st-acct-intro-text b { font-size: 15px; color: var(--text-primary); }
.st-acct-intro-text p { margin: 0; font-size: 13.5px; line-height: 19px; color: var(--text-secondary); }
.st-acct-note { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 16px; font-size: 13.5px; color: var(--text-primary); }
.st-acct-note svg.icon { width: 18px; height: 18px; flex: none; color: var(--text-secondary); }
.st-acct-note.warn { border-color: var(--kit-unsaved-line); background: var(--kit-unsaved-bg); }
.st-acct-note.warn svg.icon { color: var(--kit-unsaved-fg); }
.st-acct-facts { margin: 12px 0 0; padding: 14px 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 10px 20px; }
.st-acct-facts dt { font-size: 12px; color: var(--text-secondary); }
.st-acct-facts dd { margin: 2px 0 0; font-size: 13.5px; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.st-acct-feat-card { padding: 16px 18px; }
.st-acct-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.st-acct-feat { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 6px; border-radius: 9999px; border: 1px solid var(--border-default); background: var(--bg-canvas); font-size: 12.5px; color: var(--text-primary); }
.st-acct-feat svg.icon { width: 16px; height: 16px; padding: 2px; border-radius: 9999px; background: var(--kit-green-bg); color: var(--kit-green-fg); }
.st-acct-plans { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.st-acct-plan { padding: 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; border-top: 4px solid var(--kt-a); }
.st-acct-plan.current { box-shadow: inset 0 0 0 1px var(--teal-700), var(--shadow-raised); border-color: var(--teal-700); border-top-color: var(--kt-a); }
.st-acct-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }
.st-acct-plan-head b { font-size: 16px; color: var(--text-primary); }
.st-acct-plan .kit-pill svg.icon { width: 12px; height: 12px; }
.st-acct-plan-list { margin: 0; padding: 0 0 0 16px; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; line-height: 17px; color: var(--text-secondary); }
.st-acct-limits { margin: auto 0 0; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; padding-top: 10px; border-top: 1px solid var(--border-default); font-size: 12px; }
.st-acct-limits div { display: flex; justify-content: space-between; gap: 6px; }
.st-acct-limits dt { color: var(--text-secondary); }
.st-acct-limits dd { margin: 0; font-weight: 700; color: var(--text-primary); }
.st-acct-plan-action { width: 100%; }
.st-acct-plan-action .button { width: 100%; justify-content: center; }
.st-acct-staff { padding: 18px; display: flex; flex-direction: column; gap: 14px; border: 1px dashed var(--kit-amber-a); background: var(--kit-unsaved-bg); box-shadow: none; }
.st-acct-staff-head { display: flex; align-items: flex-start; gap: 12px; }
.st-acct-staff-text { flex: 1 1 auto; min-width: 0; }
.st-acct-staff-text b { color: var(--text-primary); }
.st-acct-staff-text p { margin: 4px 0 0; font-size: 13px; line-height: 18px; color: var(--text-secondary); }
.st-acct-staff-row { display: flex; align-items: flex-start; gap: 10px; }
.st-acct-staff-label { width: 60px; flex: none; padding-top: 7px; font-size: 13px; color: var(--text-secondary); }
.st-acct-staff-chips { flex: 1 1 auto; min-width: 0; }
.st-acct-staff-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.st-acct-staff-foot p { margin: 0; }
.button.st-acct-danger { color: var(--tone-bad); }

/* Setup guide (views/setup-guide.js). */
.st-setup-journey { background: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: var(--radius-surface); box-shadow: var(--shadow-raised); padding: 20px 12px 16px; }
.st-setup-stops { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.st-setup-stop { position: relative; min-width: 0; }
.st-setup-stop::before { content: ""; position: absolute; top: 26px; left: -50%; width: 100%; height: 3px; background: var(--border-default); }
.st-setup-stop:first-child::before { display: none; }
.st-setup-stop.done::before, .st-setup-stop.cur::before { background: var(--teal-600); }
.st-setup-stop-btn { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 6px; border: 0; background: transparent; font: inherit; color: inherit; text-align: center; cursor: pointer; }
.st-setup-bubble { width: 52px; height: 52px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; background: var(--kit-off-bg); color: var(--text-tertiary); border: 3px solid var(--bg-canvas); box-shadow: 0 0 0 1px var(--border-default); }
.st-setup-bubble svg.icon { width: 22px; height: 22px; }
.st-setup-stop.done .st-setup-bubble { background: var(--teal-600); color: #fff; box-shadow: 0 0 0 1px var(--teal-600); }
.st-setup-stop.cur .st-setup-bubble { background: var(--bg-primary); color: #fff; box-shadow: 0 0 0 4px var(--teal-200); }
.st-setup-stop-btn:hover .st-setup-bubble { box-shadow: 0 0 0 2px var(--teal-300); }
.st-setup-stop-title { font-weight: 700; font-size: 13.5px; color: var(--text-primary); }
.st-setup-stop-text { font-size: 12px; line-height: 16px; color: var(--text-secondary); }
.st-setup-tpls { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-setup-tpl { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 18px; border: 1px solid var(--border-default); border-radius: 16px; background: var(--bg-canvas); color: var(--text-primary); text-align: left; font: inherit; cursor: pointer; min-width: 0; box-shadow: var(--shadow-raised); }
.st-setup-tpl:hover:not(:disabled) { border-color: var(--teal-300); }
.st-setup-tpl.on { border-color: var(--teal-700); box-shadow: inset 0 0 0 1px var(--teal-700), 0 8px 24px -14px var(--teal-700); }
.st-setup-tpl:disabled { cursor: default; opacity: .8; }
.st-setup-tpl.scratch { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.st-setup-tpl-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.st-setup-tpl-name { display: flex; flex-direction: column; min-width: 0; }
.st-setup-tpl-name b { font-size: 15px; font-weight: 800; }
.st-setup-tpl-name span, .st-setup-tpl-text { font-size: 13px; line-height: 18px; color: var(--text-secondary); }
.st-setup-tpl-text { color: var(--text-primary); }
.st-setup-tpl-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-primary); }
.st-setup-tpl-points li { display: flex; align-items: flex-start; gap: 8px; }
.st-setup-tpl-points svg.icon { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--teal-600); }
.st-setup-tpl-sets { display: flex; flex-wrap: wrap; gap: 6px; }

/* About (views/about.js). */
.st-about { max-width: 1040px; }
.st-about-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; padding: 24px; background: linear-gradient(120deg, var(--teal-50), var(--bg-canvas) 60%); }
.st-about-mark { width: 88px; height: 88px; border-radius: 24px; display: flex; align-items: center; justify-content: center; background: var(--kit-teal-bg); }
.st-about-hero-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.st-about-title { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 26px; line-height: 32px; font-weight: 800; letter-spacing: -0.03em; color: var(--text-primary); }
.st-about-desc { margin: 4px 0 0; max-width: 620px; color: var(--text-secondary); }
.st-about-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 12px 20px; margin-top: 16px; font-size: 13px; }
.st-about-fact > span { display: block; font-size: 12px; color: var(--text-secondary); }
.st-about-fact b { font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.st-about-gauges { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.st-about-gauge { display: flex; align-items: center; gap: 16px; padding: 18px; }
.st-about-gauge .kit-ring { width: 64px; height: 64px; }
.st-about-pct { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; color: var(--text-primary); }
.st-about-gauge-title { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.st-about-gauge-text { font-size: 12.5px; color: var(--text-secondary); }
.st-about-split { margin-top: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.st-about-split-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; font-size: 13.5px; color: var(--text-primary); }
.st-about-stack { display: flex; height: 12px; border-radius: 9999px; overflow: hidden; background: var(--kit-off-bg); }
.st-about-seg { display: block; height: 100%; }
.st-about-seg.db, .st-about-dot.db { background: var(--teal-600); }
.st-about-seg.go, .st-about-dot.go { background: var(--kit-indigo-a); }
.st-about-seg.other, .st-about-dot.other { background: var(--border-strong); }
.st-about-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--text-secondary); }
.st-about-legend span { display: inline-flex; align-items: center; gap: 6px; }
.st-about-dot { width: 9px; height: 9px; border-radius: 9999px; display: inline-block; }
.st-about-nets { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.st-about-net { display: flex; align-items: center; gap: 12px; padding: 14px 16px; min-width: 0; }
.st-about-net > div { min-width: 0; }
.st-about-net b { display: block; font-weight: 700; color: var(--text-primary); overflow-wrap: anywhere; }
.st-about-net span { font-size: 12.5px; color: var(--text-secondary); }
.st-about-wifi { margin-top: 12px; padding: 14px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.st-about-wifi p { margin: 0; flex: 1 1 280px; }
.st-about-parts { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.st-about-part { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border-default); border-radius: 12px; background: var(--bg-canvas); min-width: 0; }
.st-about-part > div { min-width: 0; }
.st-about-part b { display: block; font-size: 13.5px; color: var(--text-primary); overflow-wrap: anywhere; }
.st-about-part span { font-size: 12px; color: var(--text-secondary); }
.st-about-note { margin: 10px 0 0; font-size: 12.5px; color: var(--text-tertiary); }
.st-about-empty { margin: 0; padding: 14px 16px; color: var(--text-tertiary); }
.st-about-notices { display: flex; flex-direction: column; gap: 10px; }
.st-about-search { max-width: 320px; }
@media (max-width: 767px) {
  .st-cert { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .st-cert-seal { display: none; }
  .st-cert-tier { font-size: 24px; }
  .st-acct-staff-row { flex-direction: column; gap: 6px; }
  .st-acct-staff-label { padding-top: 0; }
  .st-setup-journey { padding: 16px; }
  .st-setup-stops { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .st-setup-stop::before { top: -12px; left: 25px; width: 3px; height: 12px; }
  .st-setup-stop-btn { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 12px; align-items: center; justify-items: start; text-align: left; padding: 0; }
  .st-setup-bubble { grid-row: span 2; }
  .st-setup-tpls { grid-template-columns: minmax(0, 1fr); }
  .st-about-hero { grid-template-columns: minmax(0, 1fr); padding: 18px; gap: 14px; }
  .st-about-mark { width: 64px; height: 64px; border-radius: 18px; }
  .st-about-title { font-size: 22px; line-height: 28px; }
}
/* == end group == */