/* KZ Tools Hub styles */

:root {
  color-scheme: light;
  --kz-accent: #0d9488;
  --kz-accent-2: #0891b2;
  --kz-accent-ink: #ffffff;
  --kz-back-to-top-ink: #041f1b;
  --kz-accent-soft: rgba(13, 148, 136, 0.12);
  --kz-accent-line: rgba(13, 148, 136, 0.38);
  --kz-surface: rgba(255, 255, 255, 0.88);
  --kz-surface-solid: #ffffff;
  --kz-surface-sunken: #f1f5f9;
  --kz-chip-bg: rgba(15, 23, 42, 0.05);
  --kz-border: rgba(15, 23, 42, 0.1);
  --kz-border-strong: rgba(15, 23, 42, 0.18);
  --kz-input-border: #cbd5e1;
  --kz-text: #14202e;
  --kz-muted: #57637a;
  --kz-bg: #f4f6f9;
  --kz-halo-1: rgba(13, 148, 136, 0.07);
  --kz-halo-2: rgba(8, 145, 178, 0.06);
  --kz-error: #b91c1c;
  --kz-error-bg: #fef2f2;
  --kz-error-border: #fecaca;
  --kz-ok: #065f46;
  --kz-ok-bg: #ecfdf5;
  --kz-ok-border: #a7f3d0;
  --kz-warn: #b45309;
  --kz-warn-bg: #fef3c7;
  --kz-live: #15803d;
  --kz-down: #dc2626;
  --kz-violet: #5b21b6;
  --kz-violet-bg: rgba(196, 181, 253, 0.35);
  --kz-violet-line: rgba(124, 58, 237, 0.32);
  --kz-radius-lg: 18px;
  --kz-radius-md: 14px;
  --kz-radius-sm: 10px;
  --kz-shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.04);
  --kz-shadow-md: 0 16px 40px rgba(15, 23, 42, 0.06);
  --kz-shadow-hover: 0 14px 30px rgba(13, 148, 136, 0.12);
  --kz-max-width: 1180px;
  --kz-touch-min: 44px;
  --kz-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kz-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* One hue per category. A card's tile and its section mark both read from
     --cat, so a section and its cards are visibly the same family. */
  --cat-default: #0d9488;
  --cat-work: #0d9488;
  --cat-agents-code: #4f46e5;
  --cat-knowledge: #7c3aed;
  --cat-media-home: #b45309;
  --cat-reports: #0369a1;
  --vn-bg: #f2f3ee;
  --vn-surface: #fbfcf8;
  --vn-ink: #20251f;
  --vn-muted: #485144;
  --vn-line: #d8ddd3;
  --vn-accent: #3e785a;
  --vn-accent-soft: #e8f2e9;
  --vn-on-accent: #fffefa;
  --vn-danger: #8b2a20;
  --vn-text-xs: 0.75rem;
  --vn-text-sm: 0.875rem;
  --vn-text-base: 1rem;
  --vn-text-lg: 1.25rem;
  --vn-text-xl: 1.75rem;
  --vn-text-2xl: 2.25rem;
  --fo-paper: #f7f8fa;
  --fo-ink: #171a20;
  --fo-graphite: #616874;
  --fo-line: #dfe3e8;
  --fo-signal: #0f766e;
  --fo-signal-soft: #ccfbf1;
  --fo-card: #ffffff;
}

/* Light is the default, unconditionally. The operating system preference is
   deliberately NOT consulted: the owner asked for a light dashboard, and a box
   that is set to dark system-wide should not override that. Dark stays
   available, but only when the toggle asks for it by name. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --kz-accent: #2dd4bf;
  --kz-accent-2: #38bdf8;
  --kz-accent-ink: #06231f;
  --kz-back-to-top-ink: #06231f;
  --kz-accent-soft: rgba(45, 212, 191, 0.16);
  --kz-accent-line: rgba(45, 212, 191, 0.42);
  --kz-surface: rgba(20, 28, 40, 0.86);
  --kz-surface-solid: #141c28;
  --kz-surface-sunken: #0f1620;
  --kz-chip-bg: rgba(148, 163, 184, 0.12);
  --kz-border: rgba(148, 163, 184, 0.18);
  --kz-border-strong: rgba(148, 163, 184, 0.3);
  --kz-input-border: rgba(148, 163, 184, 0.28);
  --kz-text: #e8eef6;
  --kz-muted: #94a3b8;
  --kz-bg: #0a0f16;
  --kz-halo-1: rgba(45, 212, 191, 0.1);
  --kz-halo-2: rgba(56, 189, 248, 0.08);
  --kz-error: #fca5a5;
  --kz-error-bg: rgba(153, 27, 27, 0.22);
  --kz-error-border: rgba(248, 113, 113, 0.35);
  --kz-ok: #6ee7b7;
  --kz-ok-bg: rgba(6, 95, 70, 0.28);
  --kz-ok-border: rgba(52, 211, 153, 0.32);
  --kz-warn: #fcd34d;
  --kz-warn-bg: rgba(120, 53, 15, 0.35);
  --kz-live: #34d399;
  --kz-down: #f87171;
  --kz-violet: #ddd6fe;
  --kz-violet-bg: rgba(124, 58, 237, 0.26);
  --kz-violet-line: rgba(167, 139, 250, 0.38);
  --kz-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.35);
  --kz-shadow-md: 0 16px 40px rgba(0, 0, 0, 0.45);
  --kz-shadow-hover: 0 14px 30px rgba(45, 212, 191, 0.16);
  --cat-default: #2dd4bf;
  --cat-work: #2dd4bf;
  --cat-agents-code: #a5b4fc;
  --cat-knowledge: #c4b5fd;
  --cat-media-home: #fbbf24;
  --cat-reports: #7dd3fc;
  --vn-bg: #151a16;
  --vn-surface: #1d231e;
  --vn-ink: #eef2eb;
  --vn-muted: #c2cbc0;
  --vn-line: #394238;
  --vn-accent: #9ac7a3;
  --vn-accent-soft: #26362b;
  --vn-on-accent: #151a16;
  --vn-danger: #ffb4a9;
  --fo-paper: #10161f;
  --fo-ink: #e6edf6;
  --fo-graphite: #94a3b8;
  --fo-line: rgba(148, 163, 184, 0.22);
  --fo-signal: #5eead4;
  --fo-signal-soft: rgba(45, 212, 191, 0.18);
  --fo-card: #161f2b;
}

[hidden] { display: none !important; }

* { box-sizing: border-box; }

html { overflow-x: hidden; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--kz-font);
  color: var(--kz-text);
  background:
    radial-gradient(circle at top left, var(--kz-halo-1), transparent 42%),
    radial-gradient(circle at bottom right, var(--kz-halo-2), transparent 36%),
    var(--kz-bg);
  overflow-x: hidden;
}
body.vn-page { color: var(--vn-ink); background: var(--vn-bg); }

body.hub-page {
  padding: 24px 16px 40px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  padding-bottom: max(40px, env(safe-area-inset-bottom));
}
body.login-page {
  display: grid;
  place-items: center;
  padding: 24px 16px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}
body.error-page {
  display: grid;
  place-items: center;
  padding: 24px 16px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 1000;
  padding: 10px 16px;
  min-height: var(--kz-touch-min);
  display: inline-flex;
  align-items: center;
  border-radius: var(--kz-radius-sm);
  background: var(--kz-accent);
  color: var(--kz-accent-ink);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--kz-shadow-sm);
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 16px;
  outline: 2px solid var(--kz-text);
  outline-offset: 2px;
}

@media (hover: none) and (pointer: coarse) {
  .btn-logout,
  .btn-primary,
  .tool-card {
    -webkit-tap-highlight-color: rgba(13, 148, 136, 0.18);
  }
}

/* Screen-reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.shell {
  width: min(var(--kz-max-width), 100%);
  margin: 0 auto;
}

/* Session bar */
.session-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 16px;
  padding: 12px 16px;
  border: 1px solid var(--kz-border);
  border-radius: var(--kz-radius-md);
  background: var(--kz-surface-solid);
  box-shadow: var(--kz-shadow-sm);
}
.session-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-size: 0.92rem;
  color: var(--kz-muted);
}
.session-user strong { color: var(--kz-text); }
.session-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}
.session-nav {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  background: var(--kz-chip-bg);
  border: 1px solid var(--kz-border);
}
.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--kz-muted);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
}
.nav-link:hover,
.nav-link:focus-visible {
  color: var(--kz-text);
  background: var(--kz-surface-solid);
  outline: none;
  box-shadow: 0 0 0 3px var(--kz-accent-soft);
}
.nav-link.is-active {
  color: var(--kz-accent-ink);
  background: linear-gradient(145deg, var(--kz-accent), var(--kz-accent-2));
}
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.badge-admin {
  background: linear-gradient(145deg, var(--kz-accent), var(--kz-accent-2));
  color: var(--kz-accent-ink);
}
.tool-count {
  font-size: 0.85rem;
  color: var(--kz-muted);
}

/* Theme control. The script unhides it, so a no-script page never shows a
   button that cannot do anything. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--kz-border);
  border-radius: 999px;
  background: var(--kz-surface-solid);
  color: var(--kz-muted);
  cursor: pointer;
}
.theme-toggle:hover,
.theme-toggle:focus-visible {
  color: var(--kz-accent);
  border-color: var(--kz-accent-line);
  outline: none;
  box-shadow: 0 0 0 3px var(--kz-accent-soft);
}
/* The button shows the theme that is on, not the one it would switch to. */
.theme-icon { display: none; width: 18px; height: 18px; }
.theme-toggle[data-theme="light"] .theme-icon-sun { display: block; }
.theme-toggle[data-theme="dark"] .theme-icon-moon { display: block; }

.btn,
.btn-logout,
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--kz-touch-min);
  padding: 10px 16px;
  border-radius: var(--kz-radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.btn {
  background: var(--kz-surface-solid);
  color: var(--kz-text);
  border: 1px solid var(--kz-border);
}
.btn:hover,
.btn:focus-visible {
  border-color: rgba(13, 148, 136, 0.4);
  box-shadow: 0 0 0 3px var(--kz-accent-soft);
  outline: none;
}
.btn-logout {
  background: var(--kz-surface-solid);
  color: var(--kz-text);
  border: 1px solid var(--kz-border);
}
.btn-logout:hover,
.btn-logout:focus-visible {
  border-color: rgba(13, 148, 136, 0.4);
  box-shadow: 0 0 0 3px var(--kz-accent-soft);
  outline: none;
}
.btn-primary {
  background: linear-gradient(145deg, var(--kz-accent), var(--kz-accent-2));
  color: var(--kz-accent-ink);
  width: 100%;
}
.btn-primary.btn-inline {
  width: auto;
  min-width: 160px;
  margin-top: 8px;
}
.btn-primary:hover,
.btn-primary:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--kz-shadow-hover);
  outline: none;
}

/* Hero */
.hero {
  border: 1px solid var(--kz-border);
  border-radius: var(--kz-radius-lg);
  background: var(--kz-surface);
  box-shadow: var(--kz-shadow-md);
  padding: 20px 22px;
  margin-bottom: 18px;
}
.brand-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.brand-text {
  flex: 1 1 auto;
  min-width: 0;
}
.brand-mark {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: var(--kz-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, var(--kz-accent), var(--kz-accent-2));
  color: var(--kz-accent-ink);
  font-weight: 700;
  letter-spacing: 0.04em;
}
h1 {
  margin: 0;
  font-size: clamp(1.45rem, 4vw, 1.8rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.subtitle {
  margin: 6px 0 0;
  color: var(--kz-muted);
  line-height: 1.5;
  font-size: 0.95rem;
}
/* How much of the box is actually answering right now, and whether anything
   that should be running is not. */
.hero-signals {
  flex: 0 0 auto;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hero-status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--kz-border);
  border-radius: 999px;
  background: var(--kz-surface-solid);
  color: var(--kz-muted);
  font-size: 0.82rem;
  font-weight: 650;
  white-space: nowrap;
}
.hero-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--kz-live);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kz-live) 22%, transparent);
}
a.hero-status { text-decoration: none; }
.hero-status.is-warn {
  color: var(--kz-warn);
  border-color: color-mix(in srgb, var(--kz-warn) 45%, transparent);
  background: var(--kz-warn-bg);
}
.hero-status.is-warn::before {
  background: var(--kz-warn);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kz-warn) 22%, transparent);
}
a.hero-status.is-warn:hover,
a.hero-status.is-warn:focus-visible {
  border-color: var(--kz-warn);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kz-warn) 25%, transparent);
}

/* Search */
.hub-search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
}
.search-field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}
.search-icon {
  position: absolute;
  left: 15px;
  width: 19px;
  height: 19px;
  color: var(--kz-muted);
  pointer-events: none;
}
.search-field input[type="search"] {
  width: 100%;
  min-height: 52px;
  padding: 12px 52px 12px 44px;
  border-radius: var(--kz-radius-md);
  border: 1px solid var(--kz-border);
  background: var(--kz-surface-solid);
  color: var(--kz-text);
  font-size: 1rem;
  box-shadow: var(--kz-shadow-sm);
  -webkit-appearance: none;
  appearance: none;
}
.search-field input[type="search"]::placeholder { color: var(--kz-muted); }
.search-field:focus-within .search-icon { color: var(--kz-accent); }
.search-kbd {
  position: absolute;
  right: 14px;
  padding: 3px 8px;
  border: 1px solid var(--kz-border-strong);
  border-radius: 6px;
  background: var(--kz-chip-bg);
  color: var(--kz-muted);
  font-family: var(--kz-mono);
  font-size: 0.74rem;
  line-height: 1.4;
  pointer-events: none;
  transition: opacity 120ms ease;
}
.search-field:focus-within .search-kbd { opacity: 0; }
.search-go { flex: 0 0 auto; }
.search-clear {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: var(--kz-touch-min);
  padding: 0 6px;
  color: var(--kz-muted);
  font-size: 0.86rem;
  font-weight: 600;
}
.search-clear:hover, .search-clear:focus-visible { color: var(--kz-accent); }
.search-summary {
  margin: 0 0 14px;
  color: var(--kz-muted);
  font-size: 0.84rem;
}

/* Category filters */
.hub-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 5px 14px;
  border: 1px solid var(--kz-border);
  border-radius: 999px;
  background: var(--kz-surface-solid);
  color: var(--kz-muted);
  font-size: 0.86rem;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}
.chip:hover, .chip:focus-visible {
  color: var(--kz-text);
  border-color: var(--kz-accent-line);
  outline: none;
}
.chip:focus-visible { box-shadow: 0 0 0 3px var(--kz-accent-soft); }
.chip-n {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--kz-chip-bg);
  font-size: 0.73rem;
  font-weight: 700;
}
.chip.is-active {
  color: var(--kz-accent-ink);
  border-color: transparent;
  background: linear-gradient(145deg, var(--kz-accent), var(--kz-accent-2));
}
.chip.is-active .chip-n { background: rgba(255, 255, 255, 0.25); }

/* Admin-only network selector */
.link-mode {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: -4px 0 20px;
  padding: 4px 0 0;
}
.link-mode-label,
.link-mode-hint {
  color: var(--kz-muted);
  font-size: 0.82rem;
}
.link-mode-label { font-weight: 650; }
.link-mode-hint { margin-left: auto; font-family: var(--kz-mono); font-size: 0.75rem; }
.link-mode-options {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--kz-border);
  border-radius: 999px;
  background: var(--kz-chip-bg);
}
.link-mode-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--kz-muted);
  font-size: 0.82rem;
  font-weight: 650;
  text-decoration: none;
}
.link-mode-option:hover,
.link-mode-option:focus-visible {
  color: var(--kz-text);
  outline: none;
  box-shadow: 0 0 0 3px var(--kz-accent-soft);
}
.link-mode-option.is-active {
  color: var(--kz-accent-ink);
  background: linear-gradient(145deg, var(--kz-accent), var(--kz-accent-2));
}

/* One hue per category, resolved once and inherited by everything inside. */
[data-hue] { --cat: var(--cat-default); }
[data-hue="work"] { --cat: var(--cat-work); }
[data-hue="agents-code"] { --cat: var(--cat-agents-code); }
[data-hue="knowledge"] { --cat: var(--cat-knowledge); }
[data-hue="media-home"] { --cat: var(--cat-media-home); }
[data-hue="reports"] { --cat: var(--cat-reports); }

/* Sections */
.hub-main {
  display: grid;
  gap: 24px;
}
.section-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--kz-border);
}
.section-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kz-text);
}
.section-head h2::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--cat, var(--cat-default));
}
.section-count {
  margin-left: auto;
  color: var(--kz-muted);
  font-size: 0.78rem;
  white-space: nowrap;
}
.tool-section.is-recents .section-head h2 { color: var(--kz-accent); }

/* Tool grid */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 258px), 1fr));
  gap: 14px;
  align-items: stretch;
}
.tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  min-height: var(--kz-touch-min);
  padding: 16px;
  border-radius: var(--kz-radius-md);
  border: 1px solid var(--kz-border);
  background: var(--kz-surface-solid);
  text-decoration: none;
  color: inherit;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
  box-shadow: var(--kz-shadow-sm);
}
.tool-card:hover,
.tool-card:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--cat, var(--cat-default)) 45%, transparent);
  box-shadow: var(--kz-shadow-hover);
  outline: none;
}
.tool-card:focus-visible {
  box-shadow: var(--kz-shadow-hover), 0 0 0 3px var(--kz-accent-soft);
}
.tool-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
/* Emoji and two-letter tags share one tile, so no row looks half-drawn. */
.tool-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  line-height: 1;
}
/* Both tiles are the same soft square in the card's category hue. An emoji
   keeps its own colours; a letter tag borrows the hue for its type. Filling
   one and tinting the other made every row look half-drawn. */
.tool-icon {
  background: var(--kz-chip-bg);
  background: color-mix(in srgb, var(--cat, var(--cat-default)) 13%, transparent);
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--cat, var(--cat-default)) 16%, transparent);
}
.tool-icon.is-glyph { font-size: 1.32rem; }
.tool-icon.is-mono {
  color: var(--cat, var(--cat-default));
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.tool-open {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--kz-muted);
  white-space: nowrap;
  transition: color 140ms ease;
}
.tool-card:hover .tool-open,
.tool-card:focus-visible .tool-open { color: var(--cat, var(--kz-accent)); }
.tool-name {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.tool-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 6px;
  color: var(--kz-muted);
  line-height: 1.45;
  font-size: 0.875rem;
}
.tool-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
}
.tool-host {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--kz-muted);
  font-family: var(--kz-mono);
  font-size: 0.74rem;
}
.tool-state {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--kz-muted);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}
.tool-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.tool-state[data-state="online"] { color: var(--kz-live); }
.tool-state[data-state="offline"] { color: var(--kz-down); }
.tool-state[data-state="missing"] { color: var(--kz-warn); }
/* A private-only tool never travels the public domain; from there its card
   jumps to the Tailscale host, and this tag says so before the click. */
.tool-foot:has(.tool-private) { flex-wrap: wrap; row-gap: 6px; }
.tool-private {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid var(--kz-border);
  border-radius: 999px;
  background: var(--kz-chip-bg);
  color: var(--kz-muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* A report card is an <article>: its title link is stretched over the whole
   box so the card opens the report, and the download link sits above that
   layer so it stays clickable. */
.tool-card-report { border-style: dashed; }
.tool-card-link {
  color: inherit;
  text-decoration: none;
}
.tool-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.tool-card:focus-within {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--cat, var(--cat-default)) 45%, transparent);
  box-shadow: var(--kz-shadow-hover), 0 0 0 3px var(--kz-accent-soft);
}
.tool-card-link:focus-visible { outline: none; }
.tool-download {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  margin-left: auto;
  padding: 3px 9px;
  border: 1px solid var(--kz-border);
  border-radius: 999px;
  color: var(--kz-muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.tool-download:hover,
.tool-download:focus-visible {
  color: var(--cat, var(--kz-accent));
  border-color: color-mix(in srgb, var(--cat, var(--cat-default)) 45%, transparent);
  outline: none;
  box-shadow: 0 0 0 3px var(--kz-accent-soft);
}
.tool-card-report .tool-host { flex: 0 1 auto; min-width: 0; }

/* Empty state */
.empty-state {
  grid-column: 1 / -1;
  padding: 34px 22px;
  border-radius: var(--kz-radius-md);
  border: 1px dashed var(--kz-border-strong);
  background: var(--kz-surface-solid);
  text-align: center;
}
.empty-state h2 {
  margin: 0 0 8px;
  font-size: 1.1rem;
}
.empty-state p {
  margin: 0;
  color: var(--kz-muted);
  line-height: 1.5;
}
.empty-state a { color: var(--kz-accent); font-weight: 600; }

/* Login */
.login-card {
  width: min(420px, 100%);
  background: var(--kz-surface-solid);
  border: 1px solid var(--kz-border);
  border-radius: var(--kz-radius-lg);
  padding: 28px 24px;
  box-shadow: var(--kz-shadow-md);
}
.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.login-brand h1 { font-size: 1.35rem; }
label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  margin: 12px 0 6px;
}
input[type="text"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="number"],
select,
textarea {
  width: 100%;
  min-height: var(--kz-touch-min);
  padding: 10px 12px;
  border-radius: var(--kz-radius-sm);
  border: 1px solid var(--kz-input-border);
  background: var(--kz-surface-solid);
  color: var(--kz-text);
  font-size: 1rem;
  font-family: inherit;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--kz-accent);
  outline-offset: 1px;
  border-color: var(--kz-accent);
  box-shadow: 0 0 0 3px var(--kz-accent-soft);
}
.error {
  color: var(--kz-error);
  background: var(--kz-error-bg);
  border: 1px solid var(--kz-error-border);
  border-radius: var(--kz-radius-sm);
  font-size: 0.9rem;
  margin: 0 0 14px;
  padding: 10px 12px;
}
.success {
  color: var(--kz-ok);
  background: var(--kz-ok-bg);
  border: 1px solid var(--kz-ok-border);
  border-radius: var(--kz-radius-sm);
  font-size: 0.9rem;
  margin: 0 0 14px;
  padding: 10px 12px;
}
.muted { color: var(--kz-muted); }
.notice { color: var(--kz-ok); background: var(--kz-ok-bg); padding: 10px 12px; border-radius: var(--kz-radius-sm); }

/* Admin users */
.admin-layout {
  display: grid;
  gap: 16px;
}
.admin-layout > * { min-width: 0; }
.panel {
  min-width: 0;
  border: 1px solid var(--kz-border);
  border-radius: var(--kz-radius-lg);
  background: var(--kz-surface-solid);
  box-shadow: var(--kz-shadow-sm);
  padding: 22px 20px;
}
.panel-head {
  margin-bottom: 16px;
}
.panel-head h2 {
  margin: 0;
  font-size: 1.15rem;
}
.panel-sub {
  margin: 6px 0 0;
  color: var(--kz-muted);
  font-size: 0.9rem;
  line-height: 1.45;
}
.admin-form .form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px 16px;
  margin-bottom: 8px;
}
.tool-fieldset {
  margin: 16px 0 8px;
  padding: 14px 14px 10px;
  border: 1px solid var(--kz-border);
  border-radius: var(--kz-radius-md);
  background: var(--kz-surface-sunken);
}
.tool-fieldset legend {
  padding: 0 6px;
  font-weight: 700;
  font-size: 0.95rem;
}
.tool-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 10px;
  margin-top: 10px;
}
.tool-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 12px;
  min-height: var(--kz-touch-min);
  border: 1px solid var(--kz-border);
  border-radius: var(--kz-radius-sm);
  background: var(--kz-surface-solid);
  cursor: pointer;
}
.tool-check:has(input:checked) {
  border-color: rgba(13, 148, 136, 0.45);
  box-shadow: 0 0 0 3px var(--kz-accent-soft);
}
.tool-check input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--kz-accent);
  flex-shrink: 0;
}
.tool-check-icon {
  flex: 0 0 auto;
  min-width: 1.6em;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.tool-check-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tool-check-name {
  font-weight: 650;
  font-size: 0.95rem;
  color: var(--kz-text);
}
.tool-check-id {
  font-size: 0.78rem;
  color: var(--kz-muted);
  word-break: break-all;
}
.tool-check-owner-only {
  border-color: rgba(124, 58, 237, 0.35);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.06), transparent);
}
.tool-check-owner-only:has(input:checked) {
  border-color: rgba(124, 58, 237, 0.55);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}
.tool-check-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
  color: var(--kz-violet);
  background: var(--kz-violet-bg);
  border: 1px solid var(--kz-violet-line);
}
.tool-card-static {
  border-color: color-mix(in srgb, var(--cat, var(--cat-default)) 26%, var(--kz-border));
}

/* KZ-Brain search */
.brain-layout {
  display: grid;
  gap: 18px;
}
.brain-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
  border: 1px solid var(--kz-violet-line);
  border-radius: var(--kz-radius-lg);
  background:
    radial-gradient(circle at 92% 12%, rgba(124, 58, 237, 0.14), transparent 36%),
    var(--kz-surface-solid);
  box-shadow: var(--kz-shadow-sm);
}
.brain-hero h1 { margin: 2px 0 8px; }
.brain-hero p { margin: 0; color: var(--kz-muted); line-height: 1.5; }
.brain-freshness {
  flex: 0 0 auto;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}
.brain-freshness.is-current { color: var(--kz-ok); background: var(--kz-ok-bg); }
.brain-freshness.is-stale { color: var(--kz-warn); background: var(--kz-warn-bg); }
.brain-search-form {
  padding: 18px 20px 20px;
  border: 1px solid var(--kz-border);
  border-radius: var(--kz-radius-lg);
  background: var(--kz-surface-solid);
  box-shadow: var(--kz-shadow-sm);
}
.brain-search-form label { margin-top: 0; }
.brain-search-row { display: flex; gap: 10px; }
.brain-search-row input { flex: 1 1 auto; min-width: 0; }
.brain-search-row .btn-primary { flex: 0 0 auto; width: auto; min-width: 130px; }
.brain-results { display: grid; gap: 12px; }
.brain-result {
  padding: 18px 20px;
  border: 1px solid var(--kz-border);
  border-radius: var(--kz-radius-md);
  background: var(--kz-surface-solid);
  box-shadow: var(--kz-shadow-sm);
}
.brain-result-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.brain-result h2 { margin: 0; font-size: 1.05rem; }
.brain-classification {
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--kz-violet);
  background: var(--kz-violet-bg);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}
.brain-result-path,
.brain-result-meta {
  margin: 7px 0 0;
  color: var(--kz-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.76rem;
  overflow-wrap: anywhere;
}
.brain-result-snippet { margin: 13px 0 0; line-height: 1.55; }
.brain-links { margin: 2px 0 0; color: var(--kz-muted); font-size: 0.88rem; }
.brain-links:where(ul) { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.brain-links a { color: var(--kz-accent); }
.brain-links:where(ul) a {
  display: inline-flex;
  align-items: center;
  min-height: var(--kz-touch-min);
  padding: 7px 10px;
}
.brain-links a[aria-current="page"] { font-weight: 800; text-decoration-thickness: 3px; }
.brain-result form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.brain-result textarea { width: 100%; min-height: 112px; padding: 10px; }
.brain-result label { width: 100%; }
.table-wrap {
  overflow-x: auto;
}
.user-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.user-table th,
.user-table td {
  text-align: left;
  padding: 12px 10px;
  border-bottom: 1px solid var(--kz-border);
  vertical-align: top;
}
.user-table th {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kz-muted);
}
.tool-pills {
  color: var(--kz-text);
  line-height: 1.45;
  word-break: break-word;
}
.user-card-list {
  display: grid;
  gap: 14px;
}
.user-card {
  border: 1px solid var(--kz-border);
  border-radius: var(--kz-radius-md);
  background: var(--kz-surface-sunken);
  padding: 16px;
}
.user-card-head h3 {
  margin: 0;
  font-size: 1.05rem;
}
.user-card .admin-form {
  margin-top: 8px;
}
.empty-users {
  margin: 0;
  padding: 12px 0;
}

/* Autostart & services */
.sv-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: 12px;
}
.sv-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--kz-border);
  border-radius: var(--kz-radius-md);
  background: var(--kz-surface-solid);
  box-shadow: var(--kz-shadow-sm);
}
.sv-tile-value { font-size: 1.7rem; font-weight: 700; line-height: 1; }
.sv-tile-label { color: var(--kz-muted); font-size: 0.82rem; }
.sv-tile-warn { border-color: var(--kz-warn); }
.sv-tile-warn .sv-tile-value { color: var(--kz-warn); }
.sv-tile-ok .sv-tile-value { color: var(--kz-live); }
.sv-alert { border-color: var(--kz-warn); }
.sv-list { margin: 0; padding-left: 20px; line-height: 1.7; }
.sv-list code { font-family: var(--kz-mono); font-size: 0.86rem; }

/* A table is the honest shape for this: many rows, same columns, scanned not
   read. It scrolls inside its own box so the page never does. */
.sv-scroll {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.sv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.sv-table th {
  padding: 8px 10px;
  border-bottom: 1px solid var(--kz-border);
  color: var(--kz-muted);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}
.sv-table td {
  padding: 10px;
  border-bottom: 1px solid var(--kz-border);
  vertical-align: top;
}
.sv-table tr:last-child td { border-bottom: 0; }
.sv-table code {
  font-family: var(--kz-mono);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}
.sv-sub {
  display: block;
  margin-top: 3px;
  color: var(--kz-muted);
  font-size: 0.8rem;
}
.sv-exec {
  display: block;
  max-width: 42ch;
  overflow: hidden;
  color: var(--kz-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sv-command-cell { min-width: min(100%, 32rem); }
.sv-command {
  position: relative;
  margin: 0;
  padding: 8px 10px 8px 28px;
  border: 1px solid var(--kz-border);
  border-radius: 5px;
  background: #101827;
  color: #f8fafc;
  font-family: var(--kz-mono);
  font-size: 0.78rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: all;
}
.sv-command::before {
  content: "$";
  position: absolute;
  inset: 8px auto 8px 0;
  width: 20px;
  border-right: 1px solid #334155;
  color: #94a3b8;
  text-align: center;
  user-select: none;
}
.sv-command-note, .sv-copy-note { color: var(--kz-muted); font-size: 0.8rem; }
.sv-command-note { display: block; margin-bottom: 4px; }
@media (max-width: 720px) {
  .sv-table { min-width: 42rem; }
  .sv-command-cell { min-width: 18rem; }
}
.sv-row-attention { background: var(--kz-warn-bg); }
.sv-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}
.sv-pill-ok { color: var(--kz-ok); background: var(--kz-ok-bg); }
.sv-pill-bad { color: var(--kz-error); background: var(--kz-error-bg); }
.sv-pill-warn { color: var(--kz-warn); background: var(--kz-warn-bg); }
.sv-pill-idle { color: var(--kz-muted); background: var(--kz-chip-bg); }

/* Voice Notes: private listening desk */
.vn-page { color: var(--vn-ink); background: var(--vn-bg); }
.vn-page .site-shell { width: min(1228px, 100%); max-width: 100%; margin: 0 auto; padding: 1.25rem .875rem 2.125rem; }
.vn-page .session-bar,
.vn-page .footer,
.vn-shell,
.vn-sidebar,
.vn-search-form,
.vn-card,
.vn-system-work { color: var(--vn-ink); background: var(--vn-surface); border-color: var(--vn-line); }
.vn-page .session-meta,
.vn-page .tool-count,
.vn-page .footer,
.vn-page .footer a,
.vn-page .session-nav .nav-link { color: var(--vn-muted); }
.vn-page .session-nav { background: var(--vn-bg); border-color: var(--vn-line); }
.vn-page .session-nav .nav-link.is-active { color: var(--vn-on-accent); background: var(--vn-accent); }
.vn-page .btn-logout { color: var(--vn-ink); background: var(--vn-surface); border-color: var(--vn-line); }

.vn-shell {
  display: grid;
  /* The rail is 60px of icons unless he asks for words. Driven off the
     data-rail attribute set before first paint, so it never flashes wide. */
  grid-template-columns: var(--vn-rail, 3.75rem) minmax(0, 1fr);
  width: min(1180px, 100%);
  min-height: 42.5rem;
  margin: 0 auto;
  border: 1px solid var(--vn-line);
  border-radius: var(--kz-radius-lg);
  overflow: clip;
  font-family: Lato, "Noto Sans", "Segoe UI", system-ui, sans-serif;
  font-size: var(--vn-text-base);
}
.vn-shell *,
.vn-shell *::before,
.vn-shell *::after { box-sizing: border-box; min-width: 0; }

.vn-sidebar {
  position: sticky;
  top: 1rem;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  max-height: calc(100vh - 2rem);
  overflow-x: clip;
  overflow-y: auto;
  padding: .75rem .5rem;
  border-right: 1px solid var(--vn-line);
}
:root[data-rail="open"] .vn-shell { --vn-rail: 12.5rem; }
.vn-rail-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  padding: 0;
  color: var(--vn-muted);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--kz-radius-sm);
  cursor: pointer;
}
.vn-rail-toggle:hover { color: var(--vn-ink); background: var(--vn-accent-soft); }
.vn-icon { flex: 0 0 auto; display: block; }
.vn-nav-divider { height: 1px; margin: .3125rem .375rem; background: var(--vn-line); }
/* Labels are present for a screen reader at both widths; only the rail's
   own clipping takes them off the screen. */
.vn-nav-label { white-space: nowrap; }
:root:not([data-rail="open"]) .vn-nav-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.vn-wordmark,
.vn-band-title,
.vn-topbar h1,
.vn-section > h2,
.vn-detail > h2,
.vn-item-group h2,
.vn-management h2,
.vn-card h2,
.vn-card h3,
.vn-note-row h2,
.vn-note-row h3,
.vn-summary h2 {
  color: var(--vn-ink);
  font-family: "Bitstream Charter", Charter, Georgia, serif;
}
.vn-wordmark { font-size: var(--vn-text-lg); font-weight: 700; text-decoration: none; }
.vn-nav,
.vn-folders ul { margin: 0; padding: 0; list-style: none; }
.vn-nav { display: grid; gap: .1875rem; }
.vn-note-jumps { color: var(--vn-muted); font-size: var(--vn-text-xs); }
.vn-note-jumps p { margin: .25rem .375rem .4rem; font-weight: 700; }
.vn-note-jumps ul { display: grid; gap: .125rem; margin: 0; padding: 0; list-style: none; }
.vn-note-jumps a { display: block; padding: .3rem .375rem; color: inherit; border-radius: var(--kz-radius-sm); text-decoration: none; }
.vn-note-jumps a:hover,
.vn-note-jumps a[aria-current="true"] { color: var(--vn-ink); background: var(--vn-accent-soft); }
.vn-search-note-strip { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin: .75rem 0; padding: .65rem .8rem; border: 1px solid var(--vn-line); border-radius: var(--kz-radius-sm); background: var(--vn-accent-soft); }
.vn-search-note-strip > span { display: flex; flex-wrap: wrap; gap: .35rem; }
.vn-search-note-chip { padding: .15rem .45rem; border: 1px solid var(--vn-line); border-radius: 999px; background: var(--vn-surface); font-weight: 700; text-decoration: none; }
.vn-search-note-chip:hover, .vn-search-note-chip:focus-visible { color: var(--vn-accent); text-decoration: underline; }
.vn-detail mark { padding: 0 .12em; color: var(--vn-ink); background: var(--vn-accent-soft); border-radius: .2rem; }
.vn-turn-match { background: color-mix(in srgb, var(--vn-accent-soft) 72%, transparent); outline: 2px solid var(--vn-accent); outline-offset: 3px; border-radius: var(--kz-radius-sm); }
.vn-note-jumps-mobile { display: none; }
.vn-detail section[id], .vn-detail h2[id] { scroll-margin-top: 1rem; }
/* A collapsed icon rail cannot carry a readable chapter index; the band chips
   are the no-JavaScript fallback until the owner opens the rail. */
:root:not([data-rail="open"]) .vn-note-jumps-desktop { display: none; }
:root:not([data-rail="open"]) .vn-note-jumps-mobile { display: block; margin: .75rem 0 1rem; overflow-x: auto; white-space: nowrap; }
:root:not([data-rail="open"]) .vn-note-jumps-mobile p { display: inline; margin: 0 .35rem 0 0; }
:root:not([data-rail="open"]) .vn-note-jumps-mobile ul { display: inline-flex; gap: .35rem; }
:root:not([data-rail="open"]) .vn-note-jumps-mobile li { flex: 0 0 auto; }
:root:not([data-rail="open"]) .vn-note-jumps-mobile a { display: inline-block; padding: .35rem .6rem; border: 1px solid var(--vn-line); border-radius: 999px; }
.vn-nav a,
.vn-folders a {
  display: flex;
  align-items: center;
  gap: .625rem;
  min-height: 2.5rem;
  padding: .5rem .625rem;
  color: var(--vn-muted);
  border: 1px solid transparent;
  border-radius: var(--kz-radius-sm);
  font-size: var(--vn-text-sm);
  font-weight: 650;
  text-decoration: none;
}
.vn-nav a:hover,
.vn-folders a:hover,
.vn-nav a[aria-current="page"],
.vn-folders a[aria-current="page"] { color: var(--vn-ink); background: var(--vn-accent-soft); }
.vn-nav a[aria-current="page"],
.vn-folders a[aria-current="page"] { border-color: var(--vn-accent); box-shadow: inset .25rem 0 0 var(--vn-accent); }
.vn-folders { margin-top: .25rem; }
.vn-folders h2,
.vn-kicker { margin: 0 0 .4375rem; color: var(--vn-muted); font-family: Lato, "Noto Sans", "Segoe UI", system-ui, sans-serif; font-size: var(--vn-text-xs); font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.vn-folders li + li { margin-top: .125rem; }

.vn-pane { width: 100%; max-width: 100%; padding: clamp(1.375rem, 4vw, 3.375rem); overflow-wrap: anywhere; }
.vn-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.25rem;
  padding: .5625rem .625rem .5625rem 1rem;
  background: var(--vn-accent-soft);
  border: 1px solid var(--vn-line);
  border-radius: var(--kz-radius-sm);
}
/* The title used to be `white-space: nowrap` in a baseline flex row beside the
   counts, with nothing letting it shrink. A note called "One-up, hiring,
   load-size bug, and haul-weight alignment" overflowed its flex item and ran
   straight under the date and the speaker labels. It wraps now, and the counts
   drop to their own line when it does, so a short page title still sits beside
   them the way it did. */
.vn-band-id { display: flex; align-items: baseline; gap: .25rem .625rem; min-width: 0; flex: 1 1 auto; flex-wrap: wrap; }
.vn-band-title { min-width: 0; margin: 0; font-family: "Bitstream Charter", Charter, Georgia, serif; font-size: var(--vn-text-lg); font-weight: 700; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; }
.vn-band-counts {
  min-width: 0;
  overflow: hidden;
  color: var(--vn-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--vn-text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vn-band-counts strong { color: var(--vn-ink); font-weight: 700; }
.vn-band-live {
  display: inline-block;
  padding: .0625rem .3125rem;
  color: var(--vn-accent);
  background: var(--vn-accent-soft);
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
}
.vn-band-live strong { color: currentColor; }
.vn-band-live:hover { color: var(--vn-on-accent); background: var(--vn-accent); }
.vn-band-live:focus-visible { outline: 2px solid var(--vn-accent); outline-offset: 2px; }
.vn-skill-card a,
.vn-band-counts a:not(.vn-band-live),
.vn-calendar-totals a { color: var(--vn-ink); text-decoration: none; }
.vn-skill-card a:hover,
.vn-skill-card a:focus-visible,
.vn-band-counts a:not(.vn-band-live):hover,
.vn-band-counts a:not(.vn-band-live):focus-visible,
.vn-calendar-totals a:hover,
.vn-calendar-totals a:focus-visible { color: var(--vn-accent); text-decoration: underline; }
.vn-band-counts a:not(.vn-band-live) strong,
.vn-calendar-totals a strong { color: currentColor; }
/* A wrapping title used to squeeze these until "Back to notes" broke as
   "note s". Holding them at their content width fixed the break and made them
   overlap instead. They need all three: never shrink, never break inside a
   word, and drop to their own line when the title has taken the row. */
.vn-band-tail { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; margin-left: auto; }
.vn-band-tail > .btn, .vn-band-tail > a { white-space: nowrap; }
.vn-band-id { flex: 1 1 18rem; }
.vn-bandsearch {
  display: flex;
  align-items: center;
  gap: .375rem;
  flex: 0 1 20rem;
  min-width: 16.5rem;
  height: 2.125rem;
  padding: 0 .6875rem;
  color: var(--vn-muted);
  background: var(--vn-surface);
  border: 1px solid var(--vn-line);
  border-radius: 999px;
}
.vn-bandsearch:focus-within { border-color: var(--vn-accent); box-shadow: 0 0 0 3px var(--vn-accent-soft); }
.vn-bandsearch-label { flex: 0 0 auto; padding-right: .5rem; color: var(--vn-ink); border-right: 1px solid var(--vn-line); font-size: var(--vn-text-xs); font-weight: 700; white-space: nowrap; }
.vn-shell .vn-bandsearch input {
  width: 100%;
  min-width: 0;
  height: auto;
  padding: 0;
  color: var(--vn-ink);
  background: none;
  border: 0;
  font-size: var(--vn-text-sm);
}
.vn-shell .vn-bandsearch input:focus { outline: none; box-shadow: none; }
.vn-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.625rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--vn-line); }
.vn-topbar h1 { margin: 0 0 .4375rem; font-size: var(--vn-text-2xl); line-height: 1.05; }
.vn-topbar p:not(.vn-kicker) { max-width: 40.625rem; margin: 0; color: var(--vn-muted); line-height: 1.55; }
.vn-owner-status { padding: .5rem .6875rem; color: var(--vn-ink); background: var(--vn-accent-soft); border: 1px solid var(--vn-line); border-radius: 999px; font-size: var(--vn-text-sm); font-weight: 700; }
.vn-section { margin-top: 1.875rem; }
.vn-pane > .vn-section:has(.vn-vrow, .vn-vgroup) { margin-top: 1.125rem; }
.vn-pane > .vn-section:has(.vn-vrow, .vn-vgroup) > h2 { margin-bottom: .375rem; }
.vn-home-details { margin-top: 1.25rem; padding: .875rem 1rem; border: 1px solid var(--vn-line); border-radius: var(--kz-radius-sm); }
.vn-home-details > summary { color: var(--vn-ink); font-weight: 700; cursor: pointer; }
.vn-home-details > :not(summary) { margin-top: 1rem; }
.vn-day-group { border-bottom: 1px solid var(--vn-line); }
.vn-day-group:first-of-type { border-top: 1px solid var(--vn-line); }
.vn-day-group > summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
  padding: .75rem .25rem; color: var(--vn-ink); cursor: pointer;
}
.vn-day-group > summary:hover { color: var(--vn-accent, var(--vn-ink)); }
.vn-day-group > summary > strong { font-size: var(--vn-text-lg); }
.vn-day-group > :not(summary) { margin: 0 0 .75rem; }
.vn-section > h2,
.vn-detail > h2,
.vn-item-group h2,
.vn-management h2 { margin: 0 0 .625rem; font-size: var(--vn-text-lg); }
.vn-local-controls { margin-top: 1rem; }
.vn-local-controls > h2 { margin: 0 0 .5rem; font-size: var(--vn-text-base); }
.vn-todo-search { margin-top: .5rem; }
.vn-todo-search-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .625rem; padding: 0; border: 0; }
.vn-todo-search-form input[type="search"] { min-width: 0; }
.vn-todo-keyboard { display: none; }
.has-js .vn-todo-keyboard { display: block; }
.vn-search-form { padding: 1rem; border: 1px solid var(--vn-line); border-radius: var(--kz-radius-sm); }
.vn-search-form.vn-todo-search-form { padding: 0; border: 0; }
.vn-search-row { display: flex; flex-wrap: wrap; align-items: end; gap: .625rem; }
.vn-search-row input[type="search"] { flex: 2 1 13.75rem; }
.vn-search-row input,
.vn-search-row select,
.vn-search-row details { flex: 1 1 8.125rem; }
.vn-shell input,
.vn-shell select,
.vn-shell textarea { max-width: 100%; color: var(--vn-ink); background: var(--vn-bg); border-color: var(--vn-line); font: var(--vn-text-base) Lato, "Noto Sans", "Segoe UI", system-ui, sans-serif; }
.vn-shell input[type="file"] { padding: .45rem; border: 1px dashed var(--vn-line); border-radius: .5rem; }
.vn-shell input[type="file"]::file-selector-button { margin-right: .65rem; padding: .45rem .7rem; color: var(--vn-on-accent); background: var(--vn-accent); border: 1px solid var(--vn-accent); border-radius: .35rem; font-family: Lato, "Noto Sans", "Segoe UI", system-ui, sans-serif; font-size: var(--vn-text-sm); font-weight: 700; cursor: pointer; }
.vn-result-count,
.vn-meta,
.vn-transcript-meta,
.vn-date-group > h2,
.vn-spine-axis,
.vn-spine-clock { color: var(--vn-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--vn-text-xs); }
.vn-result-count { margin: 1.0625rem 0 .625rem; }
.vn-date-group + .vn-date-group { margin-top: 1.5625rem; }
.vn-date-group > h2 { margin: 0 0 .5rem; }
.vn-note-list { border-top: 1px solid var(--vn-line); }
.vn-waveform { display: none; }
.vn-note-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 24rem); gap: 1.25rem; align-items: start; padding: 1rem 0; border-bottom: 1px solid var(--vn-line); }
.vn-note-row h2,
.vn-note-row h3,
.vn-card h2,
.vn-card h3,
.vn-summary h2 { margin: 0; font-size: var(--vn-text-lg); }
.vn-note-row h2 a,
.vn-note-row h3 a { color: var(--vn-ink); text-decoration: none; }
.vn-note-row h2 a:hover,
.vn-note-row h3 a:hover { color: var(--vn-accent); text-decoration: underline; }
.vn-note-row p,
.vn-gist,
.vn-audio-note,
.vn-note-reference,
.vn-task-class,
.vn-task-evidence,
.vn-task-detail,
.vn-timing-note,
.vn-system-help,
.vn-download p,
.vn-transcript-intro { color: var(--vn-muted); font-size: var(--vn-text-sm); }
.vn-search-speakers { margin-top: .4rem; }
.vn-gist mark,
.vn-search-speakers mark { padding: 0 .12em; color: var(--vn-ink); background: var(--vn-accent-soft); border-radius: .2rem; }
.vn-status { display: inline-block; justify-self: start; margin-top: .35rem; padding: .2rem .55rem; color: var(--vn-ink); background: var(--vn-accent-soft); border: 1px solid var(--vn-line); border-radius: 999px; font-size: var(--vn-text-xs); font-weight: 700; }
.vn-todo-receipt { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.vn-todo-receipt form { display: inline; margin: 0; }
.vn-skill-slug,
.vn-failure-code { display: inline-block; margin: .375rem 0 .75rem; padding: .2rem .5rem; color: var(--vn-muted); background: var(--vn-surface); border: 1px solid var(--vn-line); border-radius: 999px; font: var(--vn-text-xs) ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.vn-conversation { max-width: 48.75rem; }
.vn-conversation-downloads { display: flex; flex-wrap: wrap; gap: .5rem; margin: .875rem 0; }
.vn-evidence-disclosure { margin-top: .5rem; }
.vn-evidence-disclosure > summary { padding: .75rem 0; font-weight: 600; cursor: pointer; }
.vn-evidence-count { margin-left: .5rem; color: var(--vn-muted); font-weight: 400; }
.vn-evidence-intro { margin: .25rem 0 .5rem; color: var(--vn-muted); }
/* A thousand turns is a page of its own. Bound it, and let the note keep the
   rest of its height. The left padding keeps the timeline dots inside the
   scroll box; they hang outside the thread and would otherwise be clipped. */
.vn-evidence-scroll { max-width: 100%; max-height: 62vh; padding-left: .5rem; padding-right: .375rem; overflow: auto; overscroll-behavior: contain; }
.vn-evidence-thread { position: relative; margin-top: 1rem; padding-left: 1.25rem; border-left: 2px solid var(--vn-accent); }
/* Three thousand turns are three thousand turns, open or closed. This lets the
   browser skip layout and paint for the ones off screen, so the thread scrolls
   like a short list. The text stays in the DOM and stays findable. */
.vn-evidence-turn { position: relative; padding: .875rem 0 .875rem .5rem; border-bottom: 1px solid var(--vn-line); content-visibility: auto; contain-intrinsic-size: auto 4.5rem; }
.vn-evidence-turn::before { content: ""; position: absolute; left: -1.63rem; top: 1.15rem; width: .55rem; height: .55rem; border: 2px solid var(--vn-accent); border-radius: 50%; background: var(--vn-bg); }
.vn-evidence-turn p { margin: .25rem 0 0; line-height: 1.65; overflow-wrap: anywhere; }
.vn-evidence-time, .vn-evidence-end { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--vn-text-xs); }
.vn-evidence-time { color: var(--vn-accent); font-weight: 700; }
.vn-evidence-end { margin-right: .55rem; color: var(--vn-muted); }
.vn-empty-summary { margin: 1.5rem 0; color: var(--vn-muted); font-size: var(--vn-text-sm); }
.vn-card { margin-top: .625rem; padding: 1.0625rem; border: 1px solid var(--vn-line); border-radius: var(--kz-radius-sm); }
.vn-card form,
.vn-detail form { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.vn-card label,
.vn-detail label { width: 100%; }
.vn-card textarea,
.vn-detail textarea { width: 100%; min-height: 7rem; padding: .625rem; }
/* The task's own sentence of context is content, not chrome: it reads at the
   body colour so it is not mistaken for the provenance lines under it. */
.vn-task-detail { margin: .35rem 0 .6rem; color: var(--vn-ink); font-size: var(--vn-text-base); }
/* Before and after, side by side on a wide screen and stacked on a phone.
   The judgement is made by ear, so the two players sit at the same size and
   neither is presented as the default. */
.vn-noise-compare { margin-top: 1.5rem; padding: 1.125rem; border: 1px solid var(--vn-line); border-radius: var(--kz-radius-sm); }
.vn-noise-compare h3 { margin: 0 0 .5rem; font-size: var(--vn-text-lg); }
.vn-noise-compare h4 { margin: 0 0 .35rem; font-size: var(--vn-text-sm); color: var(--vn-muted); font-weight: 700; }
.vn-noise-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin: 1rem 0; }
.vn-noise-pair .vn-audio { width: 100%; margin-top: 0; }
.vn-noise-choices { display: grid; gap: .5rem; margin-top: .75rem; }
.vn-noise-choices form { display: flex; align-items: baseline; gap: .625rem; flex-wrap: wrap; margin: 0; }
.vn-choice-note { color: var(--vn-muted); font-size: var(--vn-text-sm); }
.vn-todo,
.vn-summary { border-left: .1875rem solid var(--vn-accent); }
.vn-detail { max-width: 53.125rem; }
.vn-listening-desk { max-width: 48.75rem; }
.vn-summary { padding: 1.375rem 1.5rem; background: var(--vn-surface); }
.vn-summary > p:last-child { margin-bottom: 0; line-height: 1.6; }
.vn-audio { display: block; width: min(100%, 32.5rem); height: 2.25rem; margin-top: 1.125rem; }
.vn-audio-panel { padding: 1.125rem 0; border-bottom: 1px solid var(--vn-line); }
.vn-voices { margin-top: 1.875rem; }
.vn-voices > h2 { margin-bottom: .625rem; }
.vn-voice-card { margin-top: .75rem; padding: 1rem; border: 1px solid var(--vn-line); border-radius: var(--kz-radius-sm); }
.vn-voice-card h2,
.vn-voice-card h3 { margin: 0; font-size: var(--vn-text-lg); }
.vn-voice-card .vn-speaker-form { margin-top: .75rem; }
/* A profile link is deliberately a short separate action: typing a new name
   below still has its original consent choice and POST contract. */
.vn-people-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .75rem; }
.vn-person-card,
.vn-person-group { min-width: 0; padding: 1rem; border: 1px solid var(--vn-line); border-radius: var(--kz-radius-sm); }
.vn-person-card { color: var(--vn-ink); background: var(--vn-surface); }
.vn-person-card h3,
.vn-person-group > h3 { margin: 0; color: var(--vn-ink); font-size: var(--vn-text-lg); }
.vn-person-card p { margin: .35rem 0 0; }
.vn-person-meta { color: var(--vn-muted); font-size: var(--vn-text-sm); }
.vn-person-group + .vn-person-group { margin-top: 1rem; }
.vn-person-group .vn-voice-card { margin-top: .75rem; }
.vn-voice-link-form { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem; margin-top: .875rem; padding: .75rem; border: 1px solid var(--vn-line); border-radius: var(--kz-radius-sm); }
.vn-voice-link-form label { flex: 1 1 13rem; color: var(--vn-ink); font-size: var(--vn-text-sm); }
.vn-voice-link-form select { width: 100%; margin-top: .25rem; }
/* Settled voices stay available without competing with the one decision this
   page is for: giving an unnamed voice a person. */
.vn-named-voices,
.vn-note-named-voices { border-top: 1px solid var(--vn-line); border-bottom: 1px solid var(--vn-line); }
.vn-named-voices > summary,
.vn-note-named-voices > summary,
.vn-voice-change > summary { padding: .875rem 0; color: var(--vn-ink); font-weight: 700; cursor: pointer; }
.vn-named-voices-content { padding: .125rem 0 1rem; }
.vn-named-voice { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 20rem); gap: .75rem 1rem; align-items: center; padding: .875rem 0; border-top: 1px solid var(--vn-line); }
.vn-person-group > h3 { margin-bottom: .25rem; }
.vn-named-voice-meta { display: grid; min-width: 0; gap: .25rem; color: var(--vn-muted); font-size: var(--vn-text-sm); }
.vn-named-voice-meta strong,
.vn-named-voice-meta a { color: var(--vn-ink); }
.vn-named-voice > .vn-voice-player { grid-column: 1 / -1; }
.vn-history-pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin: .5rem 0; }
.vn-history-pages p { margin: 0; color: var(--vn-muted); font-size: var(--vn-text-sm); }
.vn-history-pages div { display: flex; gap: .375rem; }
.vn-voice-change { grid-column: 1 / -1; min-width: 0; }
.vn-voice-change > summary { padding-bottom: 0; font-size: var(--vn-text-sm); }
.vn-voice-change .vn-speaker-form { margin-top: .75rem; }
.vn-audio-panel h2,
.vn-transcript-date > h2 { color: var(--vn-ink); font-family: "Bitstream Charter", Charter, Georgia, serif; font-size: var(--vn-text-lg); }
.vn-transcript-block h3 { color: var(--vn-ink); font-family: Lato, "Noto Sans", "Segoe UI", system-ui, sans-serif; font-size: var(--vn-text-base); }
.vn-problem { color: var(--vn-danger); font-size: var(--vn-text-sm); }
.vn-failure { margin-top: .625rem; }
.vn-failure .vn-failure-code { margin: 0 0 .375rem; }
.vn-failure .vn-problem { margin: 0; }
.vn-item-group { margin-top: 1.875rem; }
.vn-item-group ul { margin: 0; padding-left: 1.2rem; }
.vn-item-group li + li { margin-top: .5rem; }
/* The evidence sits under the written line, quieter and on its own row, so the
   two are never read as one sentence. */
.vn-item-said { display: block; margin-top: .2rem; color: var(--vn-muted); font-size: var(--vn-text-sm); }
.vn-item-advisory { display: block; margin: .35rem 0 0; color: var(--vn-muted); font-size: var(--vn-text-sm); }
.vn-management,
.vn-full-transcript > details { margin-top: 2rem; border-top: 1px solid var(--vn-line); border-bottom: 1px solid var(--vn-line); }
.vn-management > summary,
.vn-full-transcript > details > summary { padding: .9375rem .125rem; color: var(--vn-ink); font-weight: 700; cursor: pointer; }
.vn-management-content { padding: .3125rem 0 1.375rem; }
.vn-management-group { padding: 1.25rem 0; border-top: 1px solid var(--vn-line); }
.vn-management-group:first-child { border-top: 0; }
.vn-danger-zone { margin-top: 1rem; padding-inline: .875rem; border: 1px solid var(--vn-line); border-radius: var(--kz-radius-sm); }
.vn-danger-zone .btn,
.vn-destructive-action .btn { color: var(--vn-danger); border-color: var(--vn-danger); }
.vn-destructive-action { order: 99; }
.vn-full-transcript { margin-top: 2rem; }
.vn-transcript-scroll,
.vn-system-prompt,
.vn-folders ul { max-width: 100%; overflow: auto; overscroll-behavior: contain; }
.vn-transcript-scroll { max-height: 62vh; padding-right: .375rem; }
/* --- The five habits as one line, above everything that explains them ------
   The full panel is what he asked for and it is eight inches tall, so it
   cannot be the first thing on a note. These are the same five figures as
   glyphs: above his own median, below it, or the same. The arrow is a
   direction and never a verdict -- more questions is usually good and more
   filler usually is not -- so nothing here is coloured for good or bad. */
.vn-speak-strip { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .5rem; margin: 1rem 0 .25rem; }
.vn-chip-head { color: var(--vn-muted); font-size: var(--vn-text-xs); font-weight: 750; letter-spacing: .06em; text-transform: uppercase; margin-right: .125rem; }
.vn-chip { display: inline-flex; align-items: baseline; gap: .3rem; padding: .2rem .5rem; color: var(--vn-ink); background: var(--vn-surface); border: 1px solid var(--vn-line); border-radius: 999px; font-size: var(--vn-text-xs); text-decoration: none; white-space: nowrap; }
.vn-chip:hover, .vn-chip:focus-visible { border-color: var(--vn-accent); }
.vn-chip-l { color: var(--vn-muted); }
.vn-chip-v { font-weight: 700; font-variant-numeric: tabular-nums; }
.vn-chip-d { color: var(--vn-accent); font-size: .8rem; line-height: 1; }
.vn-chip-more { border-style: dashed; color: var(--vn-accent); }
@media (max-width: 30rem) { .vn-chip-head { flex: 1 1 100%; } }

/* --- How you came across: a number nobody can read is not information ------
   Five bare tiles said "21.5 filler". They did not say what was counted, what
   the unit was, or whether the reading was unusual. Each row now carries the
   figure, what it counts in words, this recording against his own median, and
   one thing to try when the reading is above it. */
.vn-speak-rows { margin-top: .875rem; }
.vn-speak-row { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .5rem 1rem; padding: .875rem 0; border-top: 1px solid var(--vn-line); }
.vn-speak-row:first-child { border-top: 0; padding-top: .25rem; }
.vn-speak-figure { margin: 0; }
.vn-speak-n { display: block; font-family: "Bitstream Charter", Charter, Georgia, serif; font-size: 1.6rem; line-height: 1.05; color: var(--vn-ink); }
.vn-speak-l { display: block; margin-top: .2rem; color: var(--vn-muted); font-size: var(--vn-text-xs); line-height: 1.35; }
.vn-speak-row.is-high .vn-speak-n { color: var(--vn-accent); }
.vn-speak-read { min-width: 0; }
.vn-speak-bar { position: relative; display: block; max-width: 17rem; height: 5px; margin: .3rem 0 .5rem; border-radius: 3px; background: var(--vn-line); }
.vn-speak-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--vn-accent); }
.vn-speak-bar b { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--vn-ink); opacity: .5; }
.vn-speak-mean { margin: 0; font-size: var(--vn-text-sm); line-height: 1.55; }
.vn-speak-mean em { font-style: normal; color: var(--vn-muted); }
.vn-speak-try { display: block; margin-top: .35rem; color: var(--vn-accent); font-size: var(--vn-text-sm); }

/* --- Two lists, because a compliment and a correction are different work --- */
.vn-speak-half { margin-top: 1.125rem; }
.vn-speak-half .vn-kicker { margin-bottom: .375rem; }
.vn-speak-change { margin: 0; padding-left: 1.125rem; }
.vn-speak-change li { margin: .5rem 0; line-height: 1.55; }
.vn-speak-change li span { display: block; margin-top: .1875rem; color: var(--vn-accent); font-size: var(--vn-text-sm); }

/* --- What to watch: standing things, quoted, with no conclusion attached --- */
.vn-watch { margin-top: .75rem; padding: .875rem 1rem; background: var(--vn-surface); border: 1px solid var(--vn-line); border-left: 3px solid var(--vn-accent); border-radius: var(--kz-radius-sm); }
.vn-watch-kind { margin: 0 0 .25rem; color: var(--vn-muted); font-size: var(--vn-text-xs); font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.vn-watch h3 { margin: 0; font-size: var(--vn-text-base); }
.vn-watch > p { margin: .35rem 0 0; color: var(--vn-muted); font-size: var(--vn-text-sm); }
.vn-watch-quote { margin: .625rem 0 0; padding-left: .75rem; border-left: 2px solid var(--vn-line); font-family: "Bitstream Charter", Charter, Georgia, serif; line-height: 1.55; overflow-wrap: anywhere; }
.vn-watch-quote .vn-evidence-time { margin-left: .4rem; }

@media (max-width: 45rem) {
  .vn-speak-row { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
  .vn-speak-l { margin-bottom: .3rem; }
}

/* --- An aside: true, needed once, and not worth a paragraph every time ---- */
.vn-aside { margin-top: .625rem; }
.vn-aside > summary { display: inline-block; color: var(--vn-muted); font-size: var(--vn-text-xs); cursor: pointer; }
.vn-aside > summary:hover, .vn-aside > summary:focus-visible { color: var(--vn-accent); }
.vn-aside > p { margin: .375rem 0 0; padding-left: .75rem; border-left: 2px solid var(--vn-line); color: var(--vn-muted); font-size: var(--vn-text-sm); line-height: 1.55; }

/* --- A prompt he can take away and run himself ------------------------------ */
.vn-prompt { margin-top: 1rem; padding: .875rem 1rem; background: var(--vn-accent-soft); border: 1px solid var(--vn-accent); border-radius: var(--kz-radius-sm); }
.vn-prompt-text { display: block; width: 100%; margin: .25rem 0 .625rem; padding: .625rem .75rem; color: var(--vn-ink); background: var(--vn-surface); border: 1px solid var(--vn-line); border-radius: var(--kz-radius-sm); font: var(--vn-text-sm) ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; line-height: 1.55; resize: vertical; }

/* --- Sections that open on request ---------------------------------------- */
.vn-chapters > details > summary,
.vn-their-words > details > summary { display: flex; align-items: baseline; gap: .5rem; cursor: pointer; list-style: revert; }
.vn-chapters > details > summary h2,
.vn-their-words > details > summary h2 { display: inline; }
.vn-count { color: var(--vn-muted); font-size: var(--vn-text-sm); }

.vn-transcript-line { padding: 1rem 0; border-top: 1px solid var(--vn-line); }
.vn-transcript-line p { margin: 0; line-height: 1.6; overflow-wrap: anywhere; }
.vn-correction { margin-top: .625rem; }
.vn-correction summary { color: var(--vn-muted); font-size: var(--vn-text-sm); cursor: pointer; }
.vn-correction form { display: grid; gap: .5625rem; margin-top: .625rem; }
.vn-correction textarea { width: 100%; min-height: 7.5rem; padding: .625rem; }
.vn-footer-actions { margin-top: 1.625rem; }
.vn-review { display: grid; gap: .625rem; }
.vn-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem; }
.vn-actions form { margin: 0; }
.vn-destructive-action { flex-basis: 100%; padding-top: .75rem; margin-top: .5rem !important; border-top: 1px solid var(--vn-line); }
.vn-shell .btn { max-width: 100%; color: var(--vn-ink); background: var(--vn-surface); border-color: var(--vn-line); font-family: inherit; font-size: var(--vn-text-sm); }
.vn-shell label { font-size: var(--vn-text-sm); }
.vn-shell .muted { color: var(--vn-muted); }
.vn-shell .btn-primary { color: var(--vn-on-accent); background: var(--vn-accent); border-color: var(--vn-accent); }
.vn-system-work { display: none; margin-top: 1.375rem; padding: 1.125rem; border: 1px solid var(--vn-line); border-radius: var(--kz-radius-sm); }
.vn-system-work:target { display: block; }
.vn-system-work-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; padding-bottom: .875rem; border-bottom: 1px solid var(--vn-line); }
.vn-system-work-heading h2 { margin: 0; font-size: var(--vn-text-lg); }
.vn-system-log { padding: 1.125rem 0; border-bottom: 1px solid var(--vn-line); }
.vn-system-log > p { color: var(--vn-muted); font-size: var(--vn-text-sm); }
.vn-system-prompt { max-height: 65vh; margin: .875rem 0 .5rem; padding: .875rem; color: var(--vn-ink); background: var(--vn-bg); border: 1px solid var(--vn-line); border-radius: var(--kz-radius-sm); font: var(--vn-text-sm)/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; user-select: all; white-space: pre-wrap; overflow-wrap: anywhere; }
.vn-todo-note-group { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--vn-line); }
.vn-todo-note-group h3 { margin: 0; color: var(--vn-ink); font-family: "Bitstream Charter", Charter, Georgia, serif; font-size: var(--vn-text-lg); }
.vn-todo-note-group h3 a { color: inherit; }
.vn-todo-note-stamp { margin: .25rem 0 0; color: var(--vn-muted); font-size: var(--vn-text-sm); }
.vn-todo-system,
.vn-calendar-tasks,
.vn-calendar-system-tasks { margin-top: 1.5rem; padding: 1rem; border: 1px solid var(--vn-line); border-radius: var(--kz-radius-sm); }
.vn-todo-system > summary,
.vn-calendar-tasks > summary,
.vn-calendar-system-tasks > summary { color: var(--vn-ink); font-weight: 700; cursor: pointer; }
.vn-calendar-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.vn-calendar-controls h2 { margin: 0; color: var(--vn-ink); font-family: "Bitstream Charter", Charter, Georgia, serif; font-size: var(--vn-text-xl); }
.vn-calendar-totals { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin: 1rem 0; padding: .875rem 1rem; color: var(--vn-ink); background: var(--vn-accent-soft); border: 1px solid var(--vn-line); border-radius: var(--kz-radius-sm); }
.vn-calendar-totals p { margin: 0; font-size: var(--vn-text-sm); }
.vn-calendar-summary { margin: 1rem 0; color: var(--vn-muted); line-height: 1.55; }
.vn-weeks { display: grid; gap: .625rem; margin: 1rem 0; }
.vn-week { color: var(--vn-ink); background: var(--vn-surface); border: 1px solid var(--vn-line); border-radius: var(--kz-radius-sm); }
.vn-week > summary { padding: .75rem 1rem; color: var(--vn-ink); font-weight: 700; cursor: pointer; }
.vn-week[open] > summary { border-bottom: 1px solid var(--vn-line); }
.vn-week-body { padding: 0 1rem 1rem; }
.vn-week-points h3 { margin: .75rem 0 .375rem; color: var(--vn-muted); font-size: var(--vn-text-sm); text-transform: uppercase; letter-spacing: .04em; }
.vn-week-points ul { margin: 0; padding-left: 1.1rem; color: var(--vn-ink); line-height: 1.55; }
.vn-week-points li + li { margin-top: .25rem; }
.vn-calendar { max-width: 100%; overflow-x: auto; overscroll-behavior: contain; border: 1px solid var(--vn-line); border-radius: var(--kz-radius-sm); }
.vn-calendar-weekdays,
.vn-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(7.5rem, 1fr)); min-width: 52.5rem; }
.vn-calendar-weekday { padding: .625rem; color: var(--vn-muted); background: var(--vn-bg); border-bottom: 1px solid var(--vn-line); font-size: var(--vn-text-sm); font-weight: 700; text-align: center; }
.vn-calendar-day { position: relative; min-height: 7.25rem; padding: .625rem; color: var(--vn-ink); background: var(--vn-surface); border-right: 1px solid var(--vn-line); border-bottom: 1px solid var(--vn-line); overflow-wrap: anywhere; }
.vn-calendar-grid > :nth-child(7n) { border-right: 0; }
.vn-calendar-day-empty { background: var(--vn-bg); }
.vn-calendar-date { margin: 0; font-weight: 750; }
.vn-calendar-count { margin: .5rem 0 0; color: var(--vn-muted); font-size: var(--vn-text-xs); }
.vn-calendar-day-summary { position: absolute; z-index: 1; inset: auto .35rem .35rem; display: none; padding: .625rem; color: var(--vn-ink); background: var(--vn-surface); border: 1px solid var(--vn-accent); border-radius: var(--kz-radius-sm); box-shadow: var(--kz-shadow-md); font-size: var(--vn-text-xs); }
.vn-calendar-day:hover .vn-calendar-day-summary,
.vn-calendar-day:focus-within .vn-calendar-day-summary { display: block; }
.vn-calendar-day-summary p,
.vn-calendar-day-summary ul { margin: 0; }
.vn-calendar-day-summary ul { margin-top: .25rem; padding-left: 1rem; }
.vn-calendar-task-day { margin-top: 1.25rem; }
.vn-calendar-task-day h3 { margin: 0; color: var(--vn-ink); font-family: "Bitstream Charter", Charter, Georgia, serif; font-size: var(--vn-text-lg); }
.vn-downloads { display: grid; grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr)); gap: .625rem; }
.vn-download { padding: .8125rem; background: var(--vn-bg); border: 1px solid var(--vn-line); border-radius: var(--kz-radius-sm); }
.vn-download h3 { margin: 0 0 .3125rem; color: var(--vn-ink); font-size: var(--vn-text-sm); }

.vn-time-spine { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .375rem .75rem; align-items: center; color: var(--vn-muted); font-size: var(--vn-text-xs); }
.vn-spine-axis { grid-column: 1 / -1; display: flex; justify-content: space-between; }
.vn-spine-axis i { display: block; font-style: normal; }
.vn-spine-track { position: relative; grid-column: 1 / -1; height: .5rem; background: var(--vn-bg); border: 1px solid var(--vn-line); border-radius: 999px; }
.vn-spine-track::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 24.7%, var(--vn-line) 25%, transparent 25.3%, transparent 49.7%, var(--vn-line) 50%, transparent 50.3%, transparent 74.7%, var(--vn-line) 75%, transparent 75.3%); }
.vn-spine-bar { position: absolute; inset-block: 0; left: var(--vn-start); width: var(--vn-width); min-width: .125rem; background: var(--vn-accent); border-radius: 999px; }
.vn-spine-continuation { grid-column: 1 / -1; width: var(--vn-end); min-width: .125rem; height: .3125rem; background: var(--vn-accent); border-radius: 999px; }
.vn-spine-estimate { color: var(--vn-muted); font-size: var(--vn-text-xs); font-weight: 700; }
.vn-time-spine.is-estimated .vn-spine-bar,
.vn-time-spine.is-estimated .vn-spine-continuation { background: repeating-linear-gradient(90deg, var(--vn-accent) 0 .3rem, transparent .3rem .5rem); border: 1px dashed var(--vn-accent); }
.vn-pane > .notice { color: var(--vn-ink); background: var(--vn-accent-soft); font-size: var(--vn-text-sm); }
.vn-pane > .error { color: var(--vn-danger); background: var(--vn-accent-soft); font-size: var(--vn-text-sm); }

.vn-shell a:focus-visible,
.vn-shell button:focus-visible,
.vn-shell input:focus-visible,
.vn-shell select:focus-visible,
.vn-shell summary:focus-visible,
.vn-shell textarea:focus-visible,
.vn-shell audio:focus-visible { outline: .1875rem solid var(--vn-accent); outline-offset: .1875rem; }

@media (max-width: 720px) {
  .vn-shell { grid-template-columns: minmax(0, 1fr); border-radius: 0; }
  .vn-sidebar { position: static; display: grid; grid-template-columns: minmax(0, 1fr); max-height: none; gap: .75rem; }
  .vn-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Below 720px the rail is a static two-column block, so its labels are read
     rather than guessed at and the collapse toggle has nothing to collapse. */
  .vn-sidebar .vn-nav-label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .vn-rail-toggle { display: none; }
  .vn-nav-divider { display: none; }
  .vn-note-jumps-desktop { display: none; }
  .vn-note-jumps-mobile { display: block; margin: .75rem -.875rem 1rem; padding: 0 .875rem .5rem; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .vn-note-jumps-mobile p { display: inline; margin: 0 .35rem 0 0; }
  .vn-note-jumps-mobile ul { display: inline-flex; gap: .35rem; margin: 0; padding: 0; list-style: none; }
  .vn-note-jumps-mobile li { flex: 0 0 auto; }
  .vn-note-jumps-mobile a { display: inline-block; padding: .35rem .6rem; border: 1px solid var(--vn-line); border-radius: 999px; }
  .vn-band { flex-wrap: wrap; }
  .vn-band-tail { flex: 1 1 100%; }
  .vn-bandsearch { flex: 1 1 auto; }
  .vn-voice-player { width: 100%; }
  .vn-vrow-actions { flex-wrap: wrap; }
  .vn-folders ul { display: flex; gap: .25rem; }
  .vn-folders li { flex: 0 0 auto; }
  .vn-pane { padding: 1.375rem .875rem 2rem; }
  .vn-topbar { flex-direction: column; }
  .vn-note-row { grid-template-columns: minmax(0, 1fr); }
  .vn-transcript-scroll, .vn-evidence-scroll { max-height: 70vh; }
  .vn-evidence-thread { padding-left: .9rem; }
  .vn-evidence-turn { padding-left: 0; }
  .vn-evidence-turn::before { left: -1.29rem; }
  .vn-evidence-turn strong { display: block; margin-top: .35rem; }
  .vn-named-voice { grid-template-columns: minmax(0, 1fr); }
  .vn-event { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .vn-shell *,
  .vn-shell *::before,
  .vn-shell *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Error pages */
.error-card {
  width: min(480px, 100%);
  padding: 28px 24px;
  border-radius: var(--kz-radius-lg);
  border: 1px solid var(--kz-border);
  background: var(--kz-surface-solid);
  box-shadow: var(--kz-shadow-md);
  text-align: center;
}
.error-code {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kz-muted);
}
.error-card h1 {
  margin: 8px 0 10px;
  font-size: 1.4rem;
}
.error-card p {
  margin: 0 0 18px;
  color: var(--kz-muted);
  line-height: 1.5;
}

/* Footer */
.footer {
  margin-top: 32px;
  padding: 16px 8px 4px;
  border-top: 1px solid var(--kz-border);
  text-align: center;
  color: var(--kz-muted);
  font-size: 0.84rem;
}
.footer a {
  color: var(--kz-accent);
  font-weight: 600;
  text-decoration: none;
}
.footer a:hover { text-decoration: underline; }
.footer a:focus-visible {
  outline: 2px solid var(--kz-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.fo-shell {
  min-height: 680px;
  margin: 0 -6px;
  padding: 36px clamp(22px, 5vw, 76px) 54px;
  color: var(--fo-ink);
  background: var(--fo-paper);
  border: 1px solid var(--fo-line);
  border-radius: var(--kz-radius-lg);
}
.fo-kicker {
  margin: 0 0 6px;
  color: var(--fo-graphite);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.fo-topbar {
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--fo-line);
}
.fo-topbar h1 {
  margin: 0 0 7px;
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  font-size: clamp(1.7rem, 3vw, 2.45rem);
  letter-spacing: -0.045em;
}
.fo-topbar p:not(.fo-kicker) {
  max-width: 650px;
  margin: 0;
  color: var(--fo-graphite);
  line-height: 1.55;
}
.fo-section { margin-top: 34px; }
.fo-section > h2 {
  margin: 0 0 13px;
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  font-size: 1.05rem;
  letter-spacing: -0.015em;
}
.fo-path-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 650;
}
.fo-path {
  display: block;
  width: 100%;
  min-height: var(--kz-touch-min);
  padding: 10px 12px;
  border: 1px solid var(--fo-line);
  border-radius: 11px;
  background: var(--fo-card);
  color: var(--fo-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
}
.fo-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0 0;
}
.fo-stats > div {
  border: 1px solid var(--fo-line);
  border-radius: 11px;
  background: var(--fo-card);
  padding: 14px;
}
.fo-stats dt {
  margin: 0 0 6px;
  color: var(--fo-graphite);
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.fo-stats dd {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.98rem;
}
.fo-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.fo-card {
  border: 1px solid var(--fo-line);
  border-radius: 11px;
  background: var(--fo-card);
  padding: 17px;
}
.fo-card h3 { margin: 0 0 8px; }
.fo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.fo-actions .btn,
.fo-actions .btn-primary {
  width: auto;
  min-width: 120px;
  min-height: var(--kz-touch-min);
}
.fo-section .btn-primary {
  width: auto;
  min-width: 200px;
}
.fo-footer-actions { margin-top: 26px; }
.fo-live { white-space: pre-wrap; }
.fo-shell a:focus-visible,
.fo-shell input:focus-visible,
.fo-shell button:focus-visible {
  outline: 3px solid var(--fo-signal);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .fo-shell { padding: 25px 20px 38px; }
  .fo-stats,
  .fo-cards { grid-template-columns: 1fr; }
}

@media (max-width: 375px) {
  .fo-shell { padding: 22px 14px 30px; }
  .fo-topbar { margin-bottom: 22px; padding-bottom: 18px; }
  .fo-actions .btn,
  .fo-actions .btn-primary,
  .fo-section .btn-primary { width: 100%; min-width: 0; }
}

/* Hub chrome goes single-column on a phone, not only on a 375px phone.
   These rules used to sit inside the 375px block above, so every handset
   wider than an iPhone SE kept the desktop session bar and the wrapped
   filter rows. */
@media (max-width: 720px) {
  body.hub-page {
    padding: 16px 12px 32px;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: max(32px, env(safe-area-inset-bottom));
  }
  .hero { padding: 18px 16px; }
  .session-bar {
    padding: 10px 12px;
    flex-direction: column;
    align-items: stretch;
  }
  .session-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .session-nav {
    width: 100%;
    justify-content: stretch;
  }
  .session-nav .nav-link {
    flex: 1;
    justify-content: center;
  }
  .session-bar .btn-logout {
    flex: 1;
    justify-content: center;
  }
  .session-actions .theme-toggle {
    flex: 0 0 auto;
    width: var(--kz-touch-min);
    height: var(--kz-touch-min);
  }
  .session-actions > :last-child,
  .session-actions .theme-toggle {
    order: 1;
  }
  .session-bar .session-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .hero { display: block; }
  .brand-row { flex-wrap: wrap; }
  /* flex-basis 0 keeps the title beside the mark instead of letting the
     subtitle's width push it onto its own line and eat a phone screen. */
  .brand-text { flex: 1 1 0; }
  .brand-mark { width: 44px; height: 44px; }
  .hero-signals { width: 100%; }
  .hero-status { flex: 1 1 auto; justify-content: center; }
  .hub-search { flex-wrap: wrap; }
  .search-field { flex: 1 1 100%; }
  .search-go { flex: 1 1 auto; }
  /* Chips scroll sideways instead of stacking into a wall of rows. */
  .hub-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
    margin-inline: -12px;
    padding-inline: 12px;
  }
  .hub-filters::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; }
  .link-mode {
    align-items: stretch;
  }
  .link-mode-label,
  .link-mode-hint {
    width: 100%;
  }
  .link-mode-hint { margin-left: 0; }
  .link-mode-options { width: 100%; }
  .link-mode-option { flex: 1; }
  .brain-hero { flex-direction: column; }
  .brain-search-row { flex-direction: column; }
  .brain-search-row .btn-primary { width: 100%; }
  .btn-primary.btn-inline {
    width: 100%;
  }
  .tool-card {
    padding: 14px;
    min-height: var(--kz-touch-min);
  }
  .tool-grid { gap: 12px; }
  .hub-main { gap: 20px; }
  .btn-logout,
  .btn,
  .btn-primary {
    min-height: var(--kz-touch-min);
    padding: 12px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn-primary:hover,
  .btn-primary:focus-visible,
  .tool-card:hover,
  .tool-card:focus-visible {
    transform: none;
  }
}

/* A month reads at a glance only if the days with something on them stand out
   from the days without. The quiet ones keep their number and lose everything
   else. */
.vn-calendar-day-active { background: var(--vn-accent-soft, rgba(13,148,136,.10)); border-color: var(--vn-accent); }
.vn-calendar-day-quiet { opacity: .55; }
.vn-calendar-summary-block { margin: 1rem 0; }
/* Work as a board. What needs a person is on the left; the rest is one click
   away rather than mixed in among it. */
/* One editor, on the line being edited. Every line used to carry its own. */
.vn-correction-open { color: var(--vn-muted); font-size: var(--vn-text-xs); text-decoration: none; }
.vn-correction-open:hover, .vn-correction-open:focus-visible { color: var(--vn-accent); text-decoration: underline; }
form.vn-correction { display: grid; gap: .5rem; margin-top: .5rem; padding: .75rem; background: var(--vn-surface); border: 1px solid var(--vn-accent); border-radius: var(--kz-radius-sm); }
form.vn-correction textarea { width: 100%; min-height: 4.5rem; }
.vn-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 1rem 0; }
.vn-chip { padding: .375rem .75rem; color: var(--vn-muted); font-size: var(--vn-text-sm); text-decoration: none; background: var(--vn-surface); border: 1px solid var(--vn-line); border-radius: 999px; }
.vn-chip:hover, .vn-chip:focus-visible { color: var(--vn-ink); border-color: var(--vn-accent); }
.vn-chip.is-on { color: var(--vn-on-accent); background: var(--vn-accent); border-color: var(--vn-accent); }
.vn-chip-count { font-variant-numeric: tabular-nums; opacity: .75; }
.vn-chip-gap { flex: 1 1 1rem; }
.vn-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: 1rem; align-items: start; }
.vn-column { min-width: 0; padding: .875rem; background: var(--vn-surface); border: 1px solid var(--vn-line); border-radius: var(--kz-radius-sm); }
.vn-column header h2 { margin: 0; color: var(--vn-ink); font-size: var(--vn-text-base); }
.vn-column-hint { margin: .125rem 0 0; color: var(--vn-muted); font-size: var(--vn-text-xs); }
.vn-column-cards { display: grid; gap: .625rem; margin-top: .75rem; }
.vn-column-candidate { border-left: 3px solid var(--vn-accent); }
.vn-task-card { min-width: 0; padding: .75rem .875rem; background: var(--vn-bg); border: 1px solid var(--vn-line); border-radius: var(--kz-radius-sm); }
.vn-task-card h3 { margin: 0; color: var(--vn-ink); font-size: var(--vn-text-sm); line-height: 1.45; }
.vn-task-card[data-class="system"] { opacity: .85; }
.vn-task-source { display: inline-block; margin-top: .375rem; color: var(--vn-muted); font-size: var(--vn-text-xs); }
.vn-task-said > summary { margin-top: .375rem; color: var(--vn-muted); font-size: var(--vn-text-xs); cursor: pointer; }
.vn-task-said p { margin: .25rem 0 0; color: var(--vn-muted); font-size: var(--vn-text-xs); line-height: 1.5; }
.vn-task-card form { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .625rem; }
.vn-task-card .btn { padding: .25rem .625rem; font-size: var(--vn-text-xs); }
.vn-month-parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: 1rem; margin-top: .75rem; }
.vn-month-part { min-width: 0; padding: .875rem 1rem; background: var(--vn-surface); border: 1px solid var(--vn-line); border-radius: var(--kz-radius-sm); }
.vn-month-part h3 { margin: 0 0 .375rem; color: var(--vn-muted); font-size: var(--vn-text-sm); text-transform: uppercase; letter-spacing: .04em; }
.vn-month-part ul { margin: 0; padding-left: 1.1rem; color: var(--vn-ink); line-height: 1.55; }
.vn-month-part li + li { margin-top: .25rem; }
.vn-calendar-summary-block form { margin-top: .5rem; }
/* A day cell is one link, not a link buried under a list of note titles. */
a.vn-calendar-day { display: flex; flex-direction: column; gap: .25rem; text-decoration: none; }
a.vn-calendar-day:hover, a.vn-calendar-day:focus-visible { background: var(--vn-accent-soft); border-color: var(--vn-accent); }
a.vn-calendar-day .vn-calendar-date { color: var(--vn-ink); }
.vn-calendar-count { color: var(--vn-muted); font-size: var(--vn-text-sm); }
/* A day, told as the things that happened in it. The clock column is what
   turns thirty-four nine-minute parts back into a morning. */
.vn-events { display: grid; gap: .25rem; margin-top: .5rem; }
.vn-event { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: .5rem 1.25rem; padding: .875rem 0; border-top: 1px solid var(--vn-line); }
.vn-event:last-child { border-bottom: 1px solid var(--vn-line); }
.vn-event-clock { margin: 0; color: var(--vn-muted); font-size: var(--vn-text-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vn-event-body { min-width: 0; }
.vn-event-body h3 { margin: 0; color: var(--vn-ink); font-size: var(--vn-text-base); }
.vn-event-body p { margin: .25rem 0 0; color: var(--vn-muted); line-height: 1.55; }
/* Both sides of a conversation, side by side, because the person who ran it is
   being reviewed as much as the person answering. */
.vn-conversation-gist { margin: .25rem 0 1rem; color: var(--vn-ink); line-height: 1.6; }
.vn-review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); gap: 1rem; }
.vn-review-card { min-width: 0; padding: 1rem 1.125rem; background: var(--vn-surface); border: 1px solid var(--vn-line); border-radius: var(--kz-radius-sm); }
.vn-review-card header h3 { margin: 0; color: var(--vn-ink); font-size: var(--vn-text-lg); }
.vn-review-card header .vn-status { margin: .125rem 0 0; }
.vn-review-part { margin-top: .875rem; }
.vn-review-part h4 { margin: 0 0 .25rem; color: var(--vn-muted); font-size: var(--vn-text-sm); text-transform: uppercase; letter-spacing: .04em; }
.vn-review-part ul { margin: 0; padding-left: 1.1rem; color: var(--vn-ink); line-height: 1.55; }
.vn-review-part li + li { margin-top: .25rem; }
.vn-review-concerns h4 { color: var(--vn-danger); }
/* The other half of a review: what the person across the table did, and what
   to do about it next time. */
.vn-coaching-heading { margin: 1.25rem 0 .5rem; color: var(--vn-ink); font-size: var(--vn-text-base); }
.vn-coaching-card { background: var(--vn-accent-soft); }
.vn-review-watch_for h4 { color: var(--vn-muted); }
.vn-review-guide_by h4 { color: var(--vn-accent); }

/* Storing somebody else's voiceprint is a decision about a person who is not
   in the room. The explanation sits with the checkbox, not in a tooltip. */
.vn-consent { display: flex; align-items: baseline; gap: .5rem; margin-top: .625rem; }
.vn-consent-note { margin: .25rem 0 .5rem; color: var(--vn-muted); font-size: var(--vn-text-sm); }

/* Fixed at the page edge so long reports never demand a full reverse scroll.
   The footer still owns the bottom of the document, so this leaves it room. */
/* This flat accent/ink pair is painted together, so it keeps its own tested
   contrast value instead of inheriting a token intended for other surfaces. */
.back-to-top { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(5rem, calc(1rem + env(safe-area-inset-bottom))); z-index: 20; display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: .5rem .75rem; color: var(--kz-back-to-top-ink); background: var(--kz-accent); border: 1px solid var(--kz-accent); border-radius: 999px; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); text-decoration: none; transition: opacity .16s ease, transform .16s ease; }
.back-to-top:hover, .back-to-top:focus-visible { color: var(--kz-back-to-top-ink); transform: translateY(-2px); }
/* Voice Notes' floating control belongs to its green identity, rather than
   becoming the page's only teal accent. */
body.vn-page .back-to-top { color: var(--vn-on-accent); background: var(--vn-accent); border-color: var(--vn-accent); }
body.vn-page .back-to-top:hover, body.vn-page .back-to-top:focus-visible { color: var(--vn-on-accent); }
.back-to-top[hidden] { display: none; }
@media (max-width: 360px) {
  .back-to-top { right: .75rem; bottom: max(.75rem, env(safe-area-inset-bottom)); max-width: calc(100vw - 1.5rem); font-size: var(--vn-text-xs, .75rem); }
  /* The control occupies this reserved footer space at the bottom of a phone,
     rather than sitting over the company and external links. */
  .footer { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .back-to-top { transition: none; } }

/* --- Voices: one row per voice ------------------------------------------
   The page used to render, per unnamed voice, a heading plus three status
   paragraphs plus two separate forms carrying seven controls between them --
   all inside a per-note disclosure, so reaching a single voice meant opening
   something first. A voice is now one row: what it probably is, hear it, name
   it, dismiss it. Colours come from the VN tokens, so both themes follow. */
.vn-voice-row { margin-top: .75rem; padding: 1rem; border: 1px solid var(--vn-line); border-radius: var(--kz-radius-sm); background: var(--vn-surface); }
.vn-voice-row-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .75rem; }
.vn-voice-row-head h3 { margin: 0; color: var(--vn-ink); font-size: var(--vn-text-lg); }
/* justify-self keeps the pill from blockifying and reading as a progress bar,
   the way an inline-block child of a grid did on the note cards. */
.vn-voice-rating { justify-self: start; padding: .15rem .55rem; border: 1px solid var(--vn-line); border-radius: 999px; font-size: var(--vn-text-xs); font-weight: 600; white-space: nowrap; }
.vn-rating-strong { color: var(--vn-on-accent); background: var(--vn-accent); border-color: var(--vn-accent); }
.vn-rating-likely { color: var(--vn-accent); background: var(--vn-accent-soft); border-color: var(--vn-accent); }
.vn-rating-weak { color: var(--vn-muted); background: transparent; }
.vn-rating-background { color: var(--vn-muted); background: transparent; border-style: dashed; }
.vn-voice-why { margin: .35rem 0 0; color: var(--vn-ink); font-size: var(--vn-text-sm); }
.vn-voice-where { margin: .2rem 0 0; color: var(--vn-muted); font-size: var(--vn-text-sm); }
.vn-voice-where a { color: inherit; }
.vn-voice-row .vn-audio { margin-top: .625rem; }
/* Name and dismiss sit side by side: they are the two answers to the same
   question, and burying either one is what made this page slow to clear. */
.vn-voice-actions { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem; margin-top: .625rem; }
.vn-voice-actions .vn-voice-link-form { flex: 1 1 16rem; margin-top: 0; }
.vn-voice-dismiss-form { flex: 0 0 auto; }
.vn-btn-quiet { color: var(--vn-muted); background: transparent; border: 1px solid var(--vn-line); }
.vn-btn-quiet:hover { color: var(--vn-ink); border-color: var(--vn-ink); }
.vn-voice-more { margin-top: .5rem; }
/* The row IS the card. The 299px card this replaces fit three to a screen, so
   47 voices ran to fifteen screens of scrolling. Everything it carried is
   still here, laid on one line: play, a name select, dismiss, and "Someone
   new" one disclosure away. */
.vn-vrow,
.vn-vgroup-head,
.vn-vclip {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .25rem .625rem;
}
.vn-vrow,
.vn-vgroup {
  margin-top: .25rem;
  background: var(--vn-surface);
  border: 1px solid var(--vn-line);
  border-radius: var(--kz-radius-sm);
}
.vn-vrow { flex-wrap: wrap; }
.vn-vrow-main { flex: 1 1 14rem; min-width: 0; }
.vn-vrow-top { display: flex; align-items: baseline; gap: .5rem; margin: 0; min-width: 0; }
.vn-vrow-name { color: var(--vn-ink); font-size: var(--vn-text-sm); font-weight: 700; white-space: nowrap; }
.vn-vrow-len { color: var(--vn-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--vn-text-xs); white-space: nowrap; }
.vn-vrow-where {
  margin: .0625rem 0 0;
  overflow: hidden;
  color: var(--vn-muted);
  font-size: var(--vn-text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vn-vrow-where a { color: inherit; }
/* Excerpts begin as ordinary authenticated links. One native player appears
   only after intent and moves to whichever excerpt is requested next. */
.vn-voice-play { flex: 0 0 auto; }
.vn-voice-player { flex: 1 1 18rem; width: min(100%, 24rem); height: 2rem; }
.vn-vrow-actions { display: flex; align-items: center; gap: .375rem; flex: 0 0 auto; }
.vn-vrow-actions .vn-voice-link-form { flex: 0 0 auto; margin-top: 0; padding: 0; border: 0; gap: .375rem; }
.vn-vrow-actions .vn-voice-link-form label { flex: 0 0 auto; }
.vn-vrow-actions .vn-voice-link-form select { width: auto; max-width: 9.5rem; margin-top: 0; }
.vn-vrow .vn-btn-quiet,
.vn-vrow .btn { padding: .25rem .5rem; font-size: var(--vn-text-xs); }
.vn-vrow .vn-voice-more > summary { font-size: var(--vn-text-xs); }
.vn-vrow .vn-voice-more { flex: 0 0 auto; margin-top: 0; }
.vn-vrow .vn-voice-more[open] { flex: 1 1 100%; margin-top: .375rem; }
.vn-vrow-actions .vn-voice-link-form label { display: flex; align-items: center; gap: .375rem; margin: 0; font-size: var(--vn-text-xs); }

/* One decision for one person. A group is a guess, and the pill says so on
   the row rather than in a paragraph nobody reads. */
.vn-guess-pill { padding: .1rem .45rem; color: var(--vn-muted); border: 1px dashed var(--vn-line); border-radius: 999px; font-size: var(--vn-text-xs); white-space: nowrap; }
.vn-vgroup-head { flex-wrap: wrap; padding: .5rem .625rem; }
.vn-vgroup-clips { border-top: 1px solid var(--vn-line); }
.vn-vgroup-clips > summary { padding: .375rem .625rem; color: var(--vn-muted); font-size: var(--vn-text-xs); cursor: pointer; }
.vn-vclip + .vn-vclip { border-top: 1px solid var(--vn-line); }
.vn-vclip { background: var(--vn-bg); }
/* Never the default, and its count is in its own label. */
.vn-bulkbar { display: flex; justify-content: flex-end; margin: .5rem 0 .25rem; }
/* Days are what he thinks in, so days are the index. Closed, the whole
   backlog fits under one screen; the board this replaced drew 25 cards per
   column and said nothing about the rest. */
.vn-day-row {
  margin-top: .25rem;
  background: var(--vn-surface);
  border: 1px solid var(--vn-line);
  border-radius: var(--kz-radius-sm);
}
.vn-day-row > summary {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  padding: .625rem .75rem;
  cursor: pointer;
}
.vn-day-row[open] > summary { border-bottom: 1px solid var(--vn-line); }
.vn-day-name { color: var(--vn-ink); font-size: var(--vn-text-sm); font-weight: 700; white-space: nowrap; }
.vn-day-facts { color: var(--vn-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--vn-text-xs); }
.vn-day-body { padding: .5rem .75rem .75rem; }
/* One level only. A note inside a day is a block, never a second disclosure. */
.vn-note-block + .vn-note-block { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--vn-line); }
.vn-note-block-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .75rem; margin-bottom: .375rem; }
.vn-note-block-title { color: var(--vn-ink); font-size: var(--vn-text-sm); font-weight: 700; }
.vn-note-block-facts { color: var(--vn-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--vn-text-xs); }
/* Both buttons carry their count, and neither is the default. */
.vn-note-block-bulk { display: flex; gap: .375rem; margin-left: auto; }
.vn-note-block-bulk .btn { padding: .25rem .5rem; font-size: var(--vn-text-xs); }
/* A kept note is its title and its clock. The summary, the player and the
   link open in place -- the same one level of expansion the other pages use. */
.vn-note-gist > summary { cursor: pointer; }
/* Words he said to the app, shown back. Marked as a quotation, because that
   is exactly what it is -- the system never acts on it. */
.vn-asked-list { margin: .5rem 0 .5rem; padding-left: 1.125rem; }
.vn-asked-list li { margin-bottom: .25rem; color: var(--vn-ink); }
.vn-asked-at { color: var(--vn-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--vn-text-xs); }
/* How he came across. The number carries the weight; the mark is a quiet
   ring, not an alarm -- it says "high for you", not "wrong". */
.vn-speak-tiles { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 .5rem; }
.vn-speak-tile {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  flex: 1 1 7.5rem;
  min-width: 6.75rem;
  padding: .625rem .75rem;
  background: var(--vn-surface);
  border: 1px solid var(--vn-line);
  border-radius: var(--kz-radius-sm);
}
.vn-speak-tile.is-high { border-color: var(--vn-accent); box-shadow: inset 0 0 0 1px var(--vn-accent-soft); }
.vn-speak-n { color: var(--vn-ink); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--vn-text-lg); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.vn-speak-tile.is-high .vn-speak-n { color: var(--vn-accent); }
.vn-speak-l { color: var(--vn-muted); font-size: var(--vn-text-xs); line-height: 1.3; }
/* The trend. A wide table earns its own scroller so the page never moves. */
.vn-scroll { overflow-x: auto; }
.vn-speak-table { width: 100%; min-width: 44rem; border-collapse: collapse; font-size: var(--vn-text-sm); }
.vn-speak-table th,
.vn-speak-table td { padding: .375rem .625rem; text-align: left; border-bottom: 1px solid var(--vn-line); }
.vn-speak-table th { color: var(--vn-muted); font-size: var(--vn-text-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.vn-speak-table td.num { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vn-speak-table td.vn-worse { color: var(--vn-accent); font-weight: 700; }
.vn-speak-table tfoot td { border-top: 1px solid var(--vn-line); border-bottom: 0; color: var(--vn-muted); font-weight: 700; }
.vn-speak-table a { color: var(--vn-ink); text-decoration: none; }
.vn-speak-table a:hover,
.vn-speak-table a:focus-visible { color: var(--vn-accent); text-decoration: underline; }



.vn-note-gist-title {
  display: inline-block;
  margin-bottom: .1875rem;
  color: var(--vn-ink);
  font-family: "Bitstream Charter", Charter, Georgia, serif;
  font-size: var(--vn-text-lg);
  font-weight: 700;
  line-height: 1.2;
}
.vn-note-gist > summary .vn-time-spine { margin-bottom: 0; }
.vn-note-gist > summary::marker { color: var(--vn-muted); }
.vn-note-gist[open] > summary { margin-bottom: .5rem; }
.vn-card.vn-review:has(> .vn-note-gist) { padding: .625rem .75rem; }
.vn-card.vn-review:has(> .vn-note-gist:not([open])) .vn-time-spine { margin-bottom: .25rem; }




.vn-voice-more > summary { color: var(--vn-muted); font-size: var(--vn-text-sm); cursor: pointer; }

/* Phone pass, 2026-09-02. Measured at 390px with the real stylesheet:
   the band counts were `nowrap` + ellipsis, so a phone read
   "48 notes · 158 h 50 min recorded · …" and lost the "clips to name"
   indicator and the owner; the band search box kept a 16.5rem floor and ran
   16px past the pane; the calendar demanded 840px and hid Thu–Sun behind a
   sideways scroll; the two-column nav pushed the note title 413px down. */
@media (max-width: 720px) {
  .vn-band-counts { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.7; }
  .vn-bandsearch { flex: 1 1 100%; min-width: 0; max-width: 100%; }
  .vn-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .25rem; }
  .vn-nav a { flex-direction: column; justify-content: center; gap: .2rem; min-height: 0; padding: .45rem .2rem; font-size: .75rem; text-align: center; }
  .vn-nav a[aria-current="page"] { box-shadow: inset 0 -.2rem 0 var(--vn-accent); }
  .vn-calendar { overflow-x: hidden; }
  .vn-calendar-weekdays,
  .vn-calendar-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); min-width: 0; }
  .vn-calendar-weekday { padding: .4rem .1rem; font-size: var(--vn-text-xs); }
  .vn-calendar-day { min-height: 3.6rem; padding: .35rem .25rem; font-size: var(--vn-text-sm); }
  .vn-calendar-count { display: block; margin-top: .2rem; font-size: .6875rem; line-height: 1.2; }
  .vn-calendar-dur { display: none; }
  .vn-calendar-day-summary { display: none !important; }
}
/* Touch targets: inline pills and bare summaries were 14–16px tall. */
@media (hover: none) and (pointer: coarse) {
  summary { padding-block: .25rem; }
  .vn-band-live { padding: .2rem .5rem; }
  .vn-evidence-time { display: inline-block; padding: .15rem .25rem; margin: -.15rem -.25rem; }
}

/* Agent sessions: dense host controls with no JavaScript. The existing
   service tiles and tables carry the visual system; as-* only handles the
   two-row window groups, folded process detail, forms, and state colours
   whose contrast is measured separately. The page is an operations console
   with wide tables, so its shell is wider than the launchpad, and each table
   still scrolls inside its own panel rather than the page. */
body.as-page .shell { width: min(1760px, 100%); }
body.as-page,
body.as-page .shell,
body.as-page .admin-layout,
body.as-page .panel {
  min-width: 0;
  max-width: 100%;
}
body.as-page { overflow-x: hidden; }
body.as-page .table-wrap.sv-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}
.as-refresh,
.as-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
.as-refresh { margin-top: 1rem; justify-content: flex-start; }
.as-refresh .btn {
  flex: 0 0 auto;
  width: auto;
}
.as-tiles { margin-bottom: .25rem; }
.as-update-banner { border-color: var(--kz-warn); }
.as-message { margin: 0; }

/* Cells: a muted second line, and code that reads as text — paths and
   commands are left-aligned, wrap at any character, and can be copied. */
.as-table td { vertical-align: top; }
.as-table code {
  text-align: left;
  user-select: text;
}
.as-sub {
  display: block;
  margin-top: .2rem;
  color: var(--kz-muted);
  font-size: .78rem;
  font-weight: 400;
  line-height: 1.35;
}
.as-dir,
.as-cwd,
.as-args,
.as-restart-command {
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
}
.as-dir { margin-top: .2rem; max-width: 24rem; }
.as-cwd { max-width: 22rem; }
.as-args { max-width: 44rem; }
.as-session span,
.as-session a { display: block; }
.as-session a { margin-top: .3rem; }

/* Windows: one tbody per window. The first row is identity and state; the
   second row spans every column and holds the full restart command and the
   controls, so no column needs a fixed width and nothing is clipped. */
.as-window-name { font-size: 1rem; }
.as-windows-table .as-window-row td {
  padding-bottom: .35rem;
  border-bottom: 0;
}
.as-windows-table tbody.as-window .as-window-detail td {
  padding-top: .1rem;
  border-bottom: 1px solid var(--kz-border);
}
.as-windows-table .as-window:last-child .as-window-detail td { border-bottom: 0; }
.as-detail {
  display: grid;
  gap: .6rem;
}
.as-detail-command {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .75rem;
}
.as-detail-label {
  color: var(--kz-muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.as-restart-command {
  flex: 1 1 24rem;
  min-width: 0;
  padding: .35rem .55rem;
  border-radius: var(--kz-radius-sm);
  background: var(--kz-chip-bg);
}
.as-window-actions { align-items: stretch; }
.as-action { margin: 0; }
.as-action .btn {
  width: auto;
  min-height: 2.25rem;
  padding: .4rem .65rem;
  font-size: .78rem;
}
.as-confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .6rem;
  padding: .3rem .5rem;
  border: 1px solid var(--kz-border);
  border-radius: var(--kz-radius-sm);
}
.as-confirm label {
  display: flex;
  align-items: center;
  gap: .35rem;
  color: var(--kz-muted);
  font-size: .75rem;
}
.as-confirm input[type="checkbox"] { width: 1rem; height: 1rem; margin: 0; }
.as-danger { color: var(--kz-error); border-color: var(--kz-error-border); }
.as-danger:hover,
.as-danger:focus-visible { color: var(--kz-error); background: var(--kz-error-bg); }
.as-edit-details > summary {
  display: inline-block;
  color: var(--kz-accent);
  font-weight: 700;
  cursor: pointer;
}
.as-edit,
.as-add {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  align-items: end;
  gap: .65rem;
  margin-top: .65rem;
}
.as-edit label,
.as-add label {
  display: grid;
  gap: .25rem;
  color: var(--kz-muted);
  font-size: .75rem;
  font-weight: 700;
}
.as-edit input,
.as-edit select,
.as-add input,
.as-add select {
  min-width: 0;
  min-height: 2.5rem;
  padding: .45rem .55rem;
  color: var(--kz-text);
  background: var(--kz-surface-solid);
  border: 1px solid var(--kz-input-border);
  border-radius: var(--kz-radius-sm);
  font: inherit;
}
.as-edit input:focus-visible,
.as-edit select:focus-visible,
.as-add input:focus-visible,
.as-add select:focus-visible { outline: 3px solid var(--kz-accent-line); outline-offset: 1px; }
/* Process cells that must never break mid-value: PID, parent, elapsed, memory. */
.as-process-table td:nth-child(2),
.as-process-table td:nth-child(3),
.as-process-table td:nth-child(6),
.as-process-table td:nth-child(7) { white-space: nowrap; }
.as-row-attention td:first-child { box-shadow: inset 3px 0 0 var(--kz-warn); }
.as-row-helper .as-kind-cell { padding-left: 1.75rem; }
.as-restart-all .as-action { display: inline-block; }

/* Each foreground/background pair is opaque, so the same measured contrast
   reaches the screen without depending on the surface behind the pill. */
.as-pill-idle { color: #065f46; background: #d1fae5; }
.as-pill-busy { color: #7c2d12; background: #ffedd5; }
.as-pill-shell { color: #3730a3; background: #e0e7ff; }
.as-pill-down { color: #991b1b; background: #fee2e2; }
.as-pill-update { color: #78350f; background: #fef3c7; }
.as-kind-window { color: #1e3a8a; background: #dbeafe; }
.as-kind-helper { color: #334155; background: #e2e8f0; }
.as-kind-service { color: #134e4a; background: #ccfbf1; }
.as-kind-remote { color: #3730a3; background: #e0e7ff; }
.as-kind-stray,
.as-kind-orphan { color: #7c2d12; background: #ffedd5; }

:root[data-theme="dark"] .as-pill-idle { color: #a7f3d0; background: #064e3b; }
:root[data-theme="dark"] .as-pill-busy { color: #fed7aa; background: #7c2d12; }
:root[data-theme="dark"] .as-pill-shell { color: #c7d2fe; background: #3730a3; }
:root[data-theme="dark"] .as-pill-down { color: #fecaca; background: #7f1d1d; }
:root[data-theme="dark"] .as-pill-update { color: #fde68a; background: #78350f; }
:root[data-theme="dark"] .as-kind-window { color: #bfdbfe; background: #1e3a8a; }
:root[data-theme="dark"] .as-kind-helper { color: #e2e8f0; background: #334155; }
:root[data-theme="dark"] .as-kind-service { color: #99f6e4; background: #134e4a; }
:root[data-theme="dark"] .as-kind-remote { color: #c7d2fe; background: #3730a3; }
:root[data-theme="dark"] .as-kind-stray,
:root[data-theme="dark"] .as-kind-orphan { color: #fed7aa; background: #7c2d12; }

@media (max-width: 720px) {
  .as-refresh { align-items: stretch; }
  .as-refresh .btn { flex: 1 1 12rem; text-align: center; }
  .as-add { grid-template-columns: 1fr; }
  .as-window-actions { flex-direction: column; align-items: stretch; }
  .as-window-actions .as-action,
  .as-window-actions .btn { width: 100%; }
  /* Phones: each window becomes a stacked card with labelled values, so the
     windows table never scrolls sideways. The process table still does. */
  .as-windows-table thead { display: none; }
  /* The shared .sv-table rule pins a 42rem minimum under 720px; the stacked
     cards must be allowed to shrink to the phone or they scroll sideways. */
  .as-windows-table { min-width: 0; }
  .as-windows-table,
  .as-windows-table tbody,
  .as-windows-table tr,
  .as-windows-table td { display: block; }
  .as-windows-table .as-window-row td { padding: .2rem 0; border: 0; }
  .as-windows-table .as-window-row td.as-window-cell { padding-top: .8rem; }
  .as-windows-table .as-window-row td[data-label]::before {
    content: attr(data-label) ": ";
    color: var(--kz-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .as-windows-table .as-session span { display: inline; }
  .as-windows-table .as-session a { margin-top: .1rem; }
  .as-windows-table tbody.as-window .as-window-detail td { padding: .4rem 0 .9rem; }
  .as-dir { max-width: none; }
  /* Phones: each process becomes a card as well. The kind pill and the PID
     share the first line, helpers are indented under their parent, and an
     attention row keeps its marker down the whole card. */
  .as-process-table { min-width: 0; }
  .as-process-table thead { display: none; }
  .as-process-table,
  .as-process-table tbody,
  .as-process-table tr,
  .as-process-table td { display: block; }
  .as-process-table tr { padding: .6rem .5rem; border-bottom: 1px solid var(--kz-border); }
  .as-process-table tr:last-child { border-bottom: 0; }
  .as-process-table td { padding: .15rem 0; border: 0; white-space: normal; }
  .as-process-table td.as-kind-cell,
  .as-process-table td[data-label="PID"] {
    display: inline-block;
    vertical-align: middle;
    margin-right: .6rem;
  }
  .as-process-table td[data-label]::before {
    content: attr(data-label) ": ";
    color: var(--kz-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .as-process-table td.as-empty { display: none; }
  .as-process-table td[data-label="PID"] .as-sub,
  .as-process-table td[data-label="Elapsed"] .as-sub,
  .as-process-table td[data-label="Memory"] .as-sub { display: inline; margin: 0 0 0 .35rem; }
  .as-cwd,
  .as-args { max-width: none; }
  .as-row-helper .as-kind-cell { padding-left: 0; }
  .as-process-table tr.as-row-helper {
    margin-left: .9rem;
    padding-left: .6rem;
    border-left: 2px solid var(--kz-border);
  }
  .as-row-attention td:first-child { box-shadow: none; }
  .as-process-table tr.as-row-attention { box-shadow: inset 3px 0 0 var(--kz-warn); }
  .as-process-table .as-actions { margin-top: .35rem; }
}

/* Home: the primary reviewer backend has been failing. A readable line, not
   a pill: the owner found out about a six-hour codex outage from the pace. */
.vn-shell .vn-status-warning { display: block; justify-self: stretch; margin: .5rem 0 .75rem; padding: .6rem .8rem; border-radius: .5rem; border-left: 4px solid var(--vn-danger); background: var(--vn-accent-soft); color: var(--vn-ink); font-size: var(--vn-text-sm); font-weight: 400; line-height: 1.45; }