/* The landing page's Inter face, so the app reads the same on every operating system. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
}

/*
 * Design tokens. Every color, size, space, radius, border, shadow and duration in this file comes from here.
 * Type scale: 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36. Spacing: a 4px grid (--space-N = N × 4px).
 * The tenant's brand color arrives as --accent (branding.js); text, fill and focus colors are derived from it
 * so any brand color keeps WCAG AA contrast in both themes.
 */
:root {
  color-scheme: light;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 30px;
  --text-3xl: 36px;
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --measure: 40rem;

  --space-px: 1px;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-22: 88px;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 999px;
  --radius: var(--radius-md);

  --border-width: 1px;
  --border-width-strong: 2px;
  --border-width-accent: 3px;
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --control-height: 36px;
  --control-height-sm: 28px;
  --icon-size: 16px;
  --icon-size-disclosure: 18px;
  --icon-stroke: 2;

  --duration-fast: 120ms;
  --duration: 180ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-muted: #f8fafc;
  --surface-raised: #ffffff;
  --surface-hover: #f1f4f8;
  --border: #e3e8ef;
  --border-strong: #cbd5e1;
  --border-hover: #94a3b8;
  --overlay: rgb(15 23 42 / 45%);
  --overlay-strong: rgb(15 23 42 / 58%);
  --overlay-clear: rgb(15 23 42 / 0%);

  --text: #0f172a;
  --text-body: #1e293b;
  --text-secondary: #475569;
  --text-muted: #56657a;
  --text-on-fill: #ffffff;
  --code-bg: #f6f8fa;
  --document-surface: var(--surface);
  --document-rail: var(--surface-muted);

  --accent: #007dbc;
  --accent-strong: var(--accent);
  --accent-text: oklch(from var(--accent) min(l, 0.5) c h);
  --accent-fill: oklch(from var(--accent) min(l, 0.55) c h);
  --accent-fill-hover: oklch(from var(--accent-fill) calc(l - 0.06) c h);
  --accent-fill-active: oklch(from var(--accent-fill) calc(l - 0.1) c h);
  --accent-soft: color-mix(in srgb, var(--accent) 10%, var(--surface));
  --accent-border: color-mix(in srgb, var(--accent) 32%, var(--surface));
  --focus-ring: var(--accent-fill);
  --brand: var(--accent);
  --secondary: #7ac943;
  --secondary-strong: #7ac943;
  --secondary-soft: #d9f99d;
  --secondary-text: #1a2e05;

  --success-bg: #dcfce7;
  --success-border: #bbf7d0;
  --success-text: #166534;
  --success-solid: #16a34a;
  --success-fill: #15803d;
  --warn-bg: #fffbeb;
  --warn-border: #fde68a;
  --warn-text: #92400e;
  --warn-solid: #d97706;
  --highlight-bg: #fde68a;
  --highlight-text: var(--text);
  --error-bg: #fef2f2;
  --error-border: #fecaca;
  --error-text: #b91c1c;
  --error-solid: #dc2626;
  --error-fill: #c81e1e;
  --error-fill-hover: #a91b1b;
  /* Saturated "bad" colour for chart marks (not text): stays red, not salmon, in dark mode. */
  --chart-negative: #dc2626;
  /* Review diffs: word highlights, and the fainter tint of a whole changed line. */
  --diff-insert-bg: color-mix(in srgb, var(--success-solid) 22%, transparent);
  --diff-delete-bg: color-mix(in srgb, var(--error-solid) 18%, transparent);
  --diff-insert-line-bg: color-mix(in srgb, var(--success-solid) 10%, transparent);
  --diff-delete-line-bg: color-mix(in srgb, var(--error-solid) 9%, transparent);
  --info-bg: var(--accent-soft);
  --info-border: var(--accent-border);
  --info-text: var(--accent-text);

  --badge-lightness: 28%;
  --badge-bg-alpha: 12%;
  --badge-border-alpha: 40%;
  --workspace-bg-lightness: 93%;
  --workspace-text-lightness: 30%;
  --workspace-bg-saturation: 55%;
  --workspace-text-saturation: 45%;

  --app-header-height: 60px;
  --document-anchor-offset: 88px;
  --browser-header: var(--surface);
  --browser-chat: var(--bg);
  --browser-sidebar: var(--surface);
  --browser-input: var(--surface);

  --shadow-sm: 0 1px 2px rgb(15 23 42 / 5%);
  --shadow: 0 1px 3px rgb(15 23 42 / 8%), 0 1px 2px rgb(15 23 42 / 4%);
  --shadow-md: 0 4px 12px rgb(15 23 42 / 8%), 0 1px 3px rgb(15 23 42 / 6%);
  --shadow-lg: 0 10px 30px rgb(15 23 42 / 12%), 0 2px 8px rgb(15 23 42 / 6%);
  --shadow-xl: 0 18px 50px rgb(15 23 42 / 16%), 0 2px 6px rgb(15 23 42 / 6%);
  --shadow-focus: 0 0 0 3px var(--accent-soft);
  --ring-focus: 0 0 0 1px var(--focus-ring);
  --badge-ring: 0 0 0 2px var(--browser-header);
  --accent-soft-hover: color-mix(in srgb, var(--accent) 18%, var(--surface));
  --shadow-invalid: 0 0 0 3px var(--error-bg);
  --shadow-pressed: inset 0 1px 2px rgb(15 23 42 / 10%);
  --indicator-bottom: inset 0 calc(-1 * var(--border-width-strong)) 0 var(--focus-ring);
  --indicator-ring: inset 0 0 0 var(--border-width-strong) var(--focus-ring);
  --indicator-left: inset var(--border-width-accent) 0 0 var(--focus-ring);

  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration: 0ms;
  }
}

/* Paper stays light: the dark palette is for screens only. */
@media screen {
  html[data-theme="dark"] {
    color-scheme: dark;

    --badge-lightness: 80%;
    --badge-bg-alpha: 22%;
    --badge-border-alpha: 60%;
    --workspace-bg-lightness: 24%;
    --workspace-text-lightness: 80%;
    --workspace-bg-saturation: 22%;
    --workspace-text-saturation: 60%;
    --browser-header: #17181b;
    --browser-chat: #1a1b1e;
    --browser-sidebar: #17181b;
    --browser-input: #232428;
    --bg: #1a1b1e;
    --surface: #25262b;
    --surface-muted: #2c2d32;
    --surface-raised: #313238;
    --surface-hover: #35363c;
    --border: #3e3f45;
    --border-strong: #56575e;
    --border-hover: #777881;
    --overlay: rgb(0 0 0 / 55%);
    --overlay-strong: rgb(0 0 0 / 65%);
    --overlay-clear: rgb(0 0 0 / 0%);

    --text: #f2f3f5;
    --text-body: #dcdee2;
    --text-secondary: #b8bac0;
    --text-muted: #9d9fa6;
    --code-bg: #1d1e21;
    --document-surface: var(--browser-chat);
    --document-rail: var(--browser-sidebar);

    --accent-text: oklch(from var(--accent) max(l, 0.76) min(c, 0.14) h);
    --accent-soft: color-mix(in srgb, var(--accent) 20%, var(--surface));
    --accent-border: color-mix(in srgb, var(--accent) 45%, var(--surface));
    --focus-ring: oklch(from var(--accent) max(l, 0.72) c h);
    --brand: var(--text);
    --secondary-strong: #93d966;
    --secondary-soft: #3a5a1f;
    --secondary-text: #e4f7d2;

    --success-bg: #12301f;
    --success-border: #1f5a36;
    --success-text: #6ee7a0;
    --success-solid: #22c55e;
    --success-fill: #15803d;
    --warn-bg: #33270d;
    --warn-border: #6b4f12;
    --warn-text: #fbbf24;
    --warn-solid: #f59e0b;
    --highlight-bg: #f0c75e;
    --highlight-text: #1a1b1e;
    --error-bg: #3a1a1a;
    --error-border: #6e2a2a;
    --error-text: #fca5a5;
    --error-solid: #f87171;
    --error-fill: #c81e1e;
    --error-fill-hover: #e02424;
    --chart-negative: #ef4444;
    --diff-insert-bg: color-mix(in srgb, var(--success-solid) 34%, transparent);
    --diff-delete-bg: color-mix(in srgb, var(--error-solid) 38%, transparent);
    --diff-insert-line-bg: color-mix(in srgb, var(--success-solid) 15%, transparent);
    --diff-delete-line-bg: color-mix(in srgb, var(--error-solid) 14%, transparent);

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
    --shadow: 0 1px 2px rgb(0 0 0 / 40%);
    --shadow-md: 0 4px 12px rgb(0 0 0 / 40%);
    --shadow-lg: 0 10px 30px rgb(0 0 0 / 50%);
    --shadow-xl: 0 18px 50px rgb(0 0 0 / 55%), 0 2px 6px rgb(0 0 0 / 40%);
  }
}

@media screen and (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    color-scheme: dark;

    --badge-lightness: 80%;
    --badge-bg-alpha: 22%;
    --badge-border-alpha: 60%;
    --workspace-bg-lightness: 24%;
    --workspace-text-lightness: 80%;
    --workspace-bg-saturation: 22%;
    --workspace-text-saturation: 60%;
    --browser-header: #17181b;
    --browser-chat: #1a1b1e;
    --browser-sidebar: #17181b;
    --browser-input: #232428;
    --bg: #1a1b1e;
    --surface: #25262b;
    --surface-muted: #2c2d32;
    --surface-raised: #313238;
    --surface-hover: #35363c;
    --border: #3e3f45;
    --border-strong: #56575e;
    --border-hover: #777881;
    --overlay: rgb(0 0 0 / 55%);
    --overlay-strong: rgb(0 0 0 / 65%);
    --overlay-clear: rgb(0 0 0 / 0%);

    --text: #f2f3f5;
    --text-body: #dcdee2;
    --text-secondary: #b8bac0;
    --text-muted: #9d9fa6;
    --code-bg: #1d1e21;
    --document-surface: var(--browser-chat);
    --document-rail: var(--browser-sidebar);

    --accent-text: oklch(from var(--accent) max(l, 0.76) min(c, 0.14) h);
    --accent-soft: color-mix(in srgb, var(--accent) 20%, var(--surface));
    --accent-border: color-mix(in srgb, var(--accent) 45%, var(--surface));
    --focus-ring: oklch(from var(--accent) max(l, 0.72) c h);
    --brand: var(--text);
    --secondary-strong: #93d966;
    --secondary-soft: #3a5a1f;
    --secondary-text: #e4f7d2;

    --success-bg: #12301f;
    --success-border: #1f5a36;
    --success-text: #6ee7a0;
    --success-solid: #22c55e;
    --success-fill: #15803d;
    --warn-bg: #33270d;
    --warn-border: #6b4f12;
    --warn-text: #fbbf24;
    --warn-solid: #f59e0b;
    --highlight-bg: #f0c75e;
    --highlight-text: #1a1b1e;
    --error-bg: #3a1a1a;
    --error-border: #6e2a2a;
    --error-text: #fca5a5;
    --error-solid: #f87171;
    --error-fill: #c81e1e;
    --error-fill-hover: #e02424;
    --chart-negative: #ef4444;
    --diff-insert-bg: color-mix(in srgb, var(--success-solid) 34%, transparent);
    --diff-delete-bg: color-mix(in srgb, var(--error-solid) 38%, transparent);
    --diff-insert-line-bg: color-mix(in srgb, var(--success-solid) 15%, transparent);
    --diff-delete-line-bg: color-mix(in srgb, var(--error-solid) 14%, transparent);

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
    --shadow: 0 1px 2px rgb(0 0 0 / 40%);
    --shadow-md: 0 4px 12px rgb(0 0 0 / 40%);
    --shadow-lg: 0 10px 30px rgb(0 0 0 / 50%);
    --shadow-xl: 0 18px 50px rgb(0 0 0 / 55%), 0 2px 6px rgb(0 0 0 / 40%);
  }
}

/* Avoid a default-blue flash before this tenant's palette is known. */
html[data-branding-pending] {
  --accent: var(--text-secondary);
  --accent-strong: var(--text-secondary);
  --brand: var(--text-secondary);
  --secondary: var(--text-secondary);
  --secondary-strong: var(--text-secondary);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

::selection {
  background: var(--accent-soft);
  color: var(--accent-text);
}

a {
  color: var(--accent-text);
  text-decoration: none;
}

a:hover {
  color: var(--accent-text);
  text-decoration: underline;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* Focus: one visible ring for every interactive element (WCAG 2.4.7 / 2.4.11). */
:is(button, input, select, textarea, a, summary, [tabindex], [role="button"], [role="tab"], [role="menuitem"]):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Icons from icons.js share one stroke weight. */
svg.icon {
  flex: none;
  stroke-width: var(--icon-stroke);
}

/* Links inside running text are underlined, so they never depend on color alone. */
:is(p, li, td, blockquote, .form-help, .muted) > a:not([class]) {
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.18em;
}

/* Inputs */
input,
select,
textarea {
  background: var(--surface);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  padding: var(--space-2) var(--space-3);
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}

::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--border-hover);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent-fill);
  box-shadow: var(--shadow-focus);
  outline: none;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 0;
}

:is(input, select, textarea)[aria-invalid="true"],
:is(input, select, textarea):user-invalid {
  border-color: var(--error-solid);
  box-shadow: var(--shadow-invalid);
}

:is(input, select, textarea):disabled {
  background: var(--surface-muted);
  color: var(--text-muted);
  cursor: not-allowed;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--accent-fill);
  margin: var(--space-1);
  height: var(--space-4);
  width: var(--space-4);
}

textarea {
  min-height: 220px;
  resize: vertical;
  width: 100%;
  line-height: var(--leading-relaxed);
}

/* Buttons: neutral by default, primary on form submits, danger for destructive actions. */
button,
.actions a,
.session-actions a,
.button {
  align-items: center;
  background: var(--surface);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  gap: var(--space-2);
  justify-content: center;
  line-height: var(--leading-snug);
  min-height: var(--control-height);
  padding: var(--space-1) var(--space-4);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}

button:hover,
.actions a:hover,
.session-actions a:hover,
.button:hover {
  background: var(--surface-hover);
  border-color: var(--border-hover);
  color: var(--text);
  text-decoration: none;
}

button:active,
.button:active {
  background: var(--surface-muted);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-pressed);
}

button[type="submit"],
button.primary-action,
.button-primary {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: var(--text-on-fill);
}

button[type="submit"]:hover,
button.primary-action:hover,
.button-primary:hover {
  background: var(--accent-fill-hover);
  border-color: var(--accent-fill-hover);
  color: var(--text-on-fill);
}

button[type="submit"]:active,
button.primary-action:active,
.button-primary:active {
  background: var(--accent-fill-active);
  border-color: var(--accent-fill-active);
}

button.button-danger,
.button-danger {
  background: var(--surface);
  border-color: var(--error-border);
  color: var(--error-text);
}

button.button-danger:hover,
.button-danger:hover {
  background: var(--error-bg);
  border-color: var(--error-solid);
  color: var(--error-text);
}

button.button-danger-solid {
  background: var(--error-fill);
  border-color: var(--error-fill);
  color: var(--text-on-fill);
}

button.button-danger-solid:hover {
  background: var(--error-fill-hover);
  border-color: var(--error-fill-hover);
  color: var(--text-on-fill);
}

button.button-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}

button.button-ghost:hover {
  background: var(--surface-hover);
  border-color: transparent;
  color: var(--text);
}

button:disabled,
button[aria-disabled="true"],
.button[aria-disabled="true"] {
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.5;
}

button:disabled:hover {
  background: var(--surface);
  border-color: var(--border-strong);
}

button.is-pending {
  cursor: wait;
  opacity: 0.8;
}

.button-spinner {
  animation: button-spin 700ms linear infinite;
  border: var(--border-width-strong) solid currentColor;
  border-radius: var(--radius-full);
  border-right-color: transparent;
  display: inline-block;
  flex: 0 0 auto;
  height: var(--space-3);
  width: var(--space-3);
}

@keyframes button-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Loading placeholders */
.skeleton {
  animation: skeleton-pulse 1.4s ease-in-out infinite;
  background: var(--surface-muted);
  border-radius: var(--radius-xs);
  color: transparent;
}

@keyframes skeleton-pulse {
  50% {
    opacity: 0.55;
  }
}

/* Empty states: say what's missing, why it matters, and what to do next. */
.empty-state {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-10) var(--space-6);
  text-align: center;
}

.empty-state-icon {
  align-items: center;
  background: var(--accent-soft);
  border-radius: var(--radius-full);
  color: var(--accent-text);
  display: inline-flex;
  height: var(--space-12);
  justify-content: center;
  margin-bottom: var(--space-2);
  width: var(--space-12);
}

.empty-state-title {
  color: var(--text);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  margin: 0;
}

.empty-state-text {
  color: var(--text-secondary);
  font-size: var(--text-base);
  margin: 0;
  max-width: 28rem;
}

.empty-state-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-3);
}

.empty-state-actions .actions {
  justify-content: center;
  margin: 0;
}

.empty-state-actions:empty {
  display: none;
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* App shell */
.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* The account row and navigation row wrap independently at narrow widths. */
.app-header {
  align-items: center;
  background: var(--browser-header);
  border-bottom: var(--border-width) solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-5);
  min-height: 88px;
  padding: var(--space-2) var(--space-5) 0;
  position: sticky;
  top: 0;
  z-index: 50;
}

.brand {
  align-items: center;
  color: var(--text);
  display: inline-flex;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  min-height: 40px;
  text-decoration: none;
}

.brand:hover {
  color: var(--text);
  text-decoration: none;
}

.brand.is-branding-loading {
  visibility: hidden;
}
.app-header:has(.brand.is-branding-loading) .header-query[data-default-mount] {
  visibility: hidden;
}

.brand-logo {
  display: block;
  max-height: 36px;
  max-width: 180px;
  object-fit: contain;
}

/* The default logo, loaded beside a dark-mode logo so a printout shows the logo meant for white paper. */
.brand-print-logo {
  display: none;
}

.header-brand-group,
.app-header > .account {
  min-height: var(--space-12);
}

.header-brand-group {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-4);
  min-width: 0;
}

.product-brand {
  align-items: center;
  color: var(--text);
  display: inline-flex;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  gap: var(--space-3);
  text-decoration: none;
}

.product-brand:hover {
  color: var(--text);
  text-decoration: none;
}

.brand-separator {
  background: var(--border-strong);
  height: 26px;
  width: 1px;
}

.header-navigation {
  align-items: center;
  display: flex;
  flex-basis: 100%;
  gap: var(--space-3);
  min-width: 0;
}

/* Room for Home, Favorites, Recents and Help is reserved before the quick-access menu mounts, so the centers
   beside it don't jump sideways as the page loads: four 36px icon buttons and three 4px gaps. */
.header-shortcuts {
  align-items: center;
  display: flex;
  flex: none;
  gap: var(--space-1);
  min-width: calc(var(--control-height) * 4 + var(--space-1) * 3);
}

.header-shortcuts > .quick-access {
  gap: var(--space-1);
}

/* Second-row shortcuts: Home, Favorites, Recents and Help are 20px icons; their title and aria-label name them. */
.home-button,
.help-button {
  align-items: center;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  display: inline-flex;
  height: var(--control-height);
  justify-content: center;
  text-decoration: none;
  width: var(--control-height);
}

.home-button:hover,
.help-button:hover {
  background: var(--surface-hover);
  border-color: var(--border);
  color: var(--text);
  text-decoration: none;
}

.home-button[aria-current="page"] {
  background: var(--surface-hover);
  color: var(--text);
}

/* A settings section inside the Settings window (settings.css, ADR 0043) has no app header of its own. These rules
   load with the page, before it paints, so the header never flashes inside the window. */
.is-settings-frame .app-header {
  display: none;
}

.is-settings-frame body {
  background: var(--surface);
}

.is-settings-frame .main-content {
  margin: 0;
  max-width: none;
  padding: 28px 32px 48px;
}

/* Compact query control on document lists. */
.header-query.chat-input-wrap {
  align-items: center;
  background: var(--browser-input);
  border-radius: var(--radius-xl);
  flex: 1 1 300px;
  gap: var(--space-2);
  margin: 0 auto;
  max-width: 640px;
  min-width: 0;
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1);
  width: 100%;
}

.header-query .chat-input {
  font-size: var(--text-sm);
  min-width: 0;
  padding: var(--space-1) 0;
}

.header-query .chat-send {
  height: 28px;
  width: 28px;
}

.header-query .chat-mode-button {
  font-size: var(--text-sm);
  height: 28px;
  padding: 0 var(--space-2);
}

.header-query-clear {
  background: transparent;
  border-color: transparent;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  flex: none;
  height: var(--control-height-sm);
  min-height: 0;
  padding: 0;
  width: var(--control-height-sm);
}

.header-query-clear:hover {
  background: var(--surface-hover);
  border-color: var(--border);
  color: var(--text);
}

.header-query-clear[hidden] {
  display: none;
}

.query-scope-toggle {
  background: var(--surface-muted);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  flex: none;
  height: 28px;
  padding: 0;
  width: 28px;
}

.query-scope-toggle[aria-pressed="true"] {
  background: var(--accent-fill);
  color: white;
}

.query-scope-toggle[hidden] {
  display: none;
}

@media (min-width: 1400px) {
  .app-header.has-query-input {
    display: grid;
    /* The query takes the room between the brand and the actions: at least 420px, at most 640px (its max-width). */
    column-gap: var(--space-6);
    grid-template-columns: max-content minmax(420px, 1fr) max-content;
  }

  /* Explicit columns: the account stays in the last column even before the query box mounts into the middle. */
  .has-query-input > .header-brand-group {
    grid-column: 1;
    grid-row: 1;
  }

  .has-query-input > .header-query {
    grid-column: 2;
    grid-row: 1;
    /* Same height as the brand and account row, so mounting it never changes the header's height. */
    height: var(--space-12);
    margin-inline: 0;
  }

  .has-query-input > .account {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    margin-left: 0;
  }

  .has-query-input > .header-navigation {
    grid-column: 1 / -1;
  }
}

/* Top navigation */
.top-nav {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: var(--space-1);
  min-height: 40px;
  min-width: 0;
  position: relative;
}

/* On phones the panel spans the header row, so it hangs from the row rather than from the centre links. */
@media (max-width: 900px) {
  .header-navigation {
    position: relative;
  }

  .top-nav {
    position: static;
  }
}

/* Each centre opens one panel: its sections packed into newspaper columns (so short sections fill the gaps beside
   long ones), each listing its first few documents. shell.js opens the panel under its centre's name, sliding it
   left only as far as it must to stay on screen (--menu-left), and adds is-open with a short hover intent; hover
   alone does not open it. The panel scrolls if it would run past the bottom of the window. */
.nav-item {
  display: flex;
}

.nav-item > button {
  align-items: center;
  background: transparent;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  display: inline-flex;
  font-size: var(--text-sm);
  font-weight: 500;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-3);
  white-space: nowrap;
}

.nav-item > button::after {
  border-bottom: var(--border-width-strong) solid currentColor;
  border-right: var(--border-width-strong) solid currentColor;
  content: "";
  height: 6px;
  opacity: 0.75;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 140ms ease;
  width: 6px;
}

.nav-item > button:hover {
  background: var(--surface-muted);
  border-color: transparent;
  color: var(--text);
}

.nav-item.is-current > button {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  box-shadow: var(--indicator-bottom);
  color: var(--accent-text);
}

.nav-item.is-open > button,
.nav-item.is-keyboard-open > button {
  background: var(--accent-soft);
  color: var(--accent-text);
}

.nav-item.is-open > button::after,
.nav-item.is-keyboard-open > button::after {
  transform: translateY(1px) rotate(-135deg);
}

/* The panel scrolls, which would clip a bridge drawn on it, so the open centre bridges the gap above the panel. */
.nav-item.is-open::after {
  content: "";
  height: 16px;
  left: 0;
  position: absolute;
  right: 0;
  top: calc(100% - 4px);
}

.nav-menu {
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  display: none;
  left: var(--menu-left, 0px);
  max-height: calc(100vh - var(--app-header-height) - 24px);
  max-height: calc(100dvh - var(--app-header-height) - 24px);
  max-width: calc(100vw - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-5) var(--space-6) var(--space-0-5);
  position: absolute;
  top: calc(100% + 8px);
  width: calc(var(--menu-columns) * 212px + (var(--menu-columns) - 1) * 28px + 46px);
  z-index: 70;
}

.nav-menu[data-columns="1"] { --menu-columns: 1; }
.nav-menu[data-columns="2"] { --menu-columns: 2; }
.nav-menu[data-columns="3"] { --menu-columns: 3; }
.nav-menu[data-columns="4"] { --menu-columns: 4; }

.nav-item.is-open .nav-menu,
.nav-item.is-keyboard-open .nav-menu {
  display: block;
}

/* Columns live inside the scrolling panel: a height-capped multi-column box would overflow sideways instead. */
.nav-menu-columns {
  column-gap: var(--space-7);
  column-rule: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  columns: var(--menu-columns) 180px;
}

.dropdown-group {
  break-inside: avoid;
  margin: 0 0 var(--space-5);
  padding-top: var(--space-px);
}

.nav-menu a {
  border-radius: var(--radius-sm);
  display: block;
}

.nav-menu a:hover {
  background: var(--accent-soft);
  color: var(--accent-text);
  text-decoration: none;
}

.nav-menu a.section-link {
  align-items: baseline;
  color: var(--text);
  display: flex;
  font-size: var(--text-sm);
  font-weight: 650;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2) var(--space-1);
}

.nav-menu a.section-link:hover {
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.section-count {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 500;
}

.dropdown-group.is-current > a.section-link {
  color: var(--accent-text);
}

.section-documents {
  list-style: none;
  margin: 0;
  padding: 0;
}

.section-documents a {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.35;
  padding: var(--space-1) var(--space-2);
}

.section-documents a.is-current {
  color: var(--accent-text);
  font-weight: 600;
}

.section-documents .section-more a {
  color: var(--accent-text);
  font-size: var(--text-sm);
  font-weight: 600;
}

.section-documents .section-more a::after {
  content: " →";
}

.section-empty {
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-style: italic;
  margin: 0;
  padding: var(--space-0-5) var(--space-2);
}

/* Account area */
.account {
  align-items: center;
  display: flex;
  flex: 0 1 auto;
  gap: var(--space-2);
  justify-content: flex-end;
  margin-left: auto;
  min-width: 0;
  position: relative;
}

.current-user {
  align-items: center;
  display: flex;
  gap: var(--space-2);
  text-align: right;
}

.account-trigger {
  align-items: center;
  background: transparent;
  border-color: transparent;
  color: var(--text);
  display: inline-flex;
  gap: var(--space-2);
  max-width: min(280px, 100vw - 48px);
  padding: var(--space-1) var(--space-2);
  text-align: right;
}

.account-trigger:hover,
.account-trigger[aria-expanded="true"] {
  background: var(--surface-muted);
  border-color: var(--border);
  color: var(--text);
}

.account-header-action {
  align-items: center;
  background: transparent;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  display: inline-flex;
  flex: 0 0 auto;
  gap: var(--space-2);
  height: var(--control-height);
  justify-content: center;
  min-height: 0;
  padding: 0;
  position: relative;
  text-decoration: none;
  width: var(--control-height);
}

.account-header-action:hover {
  background: var(--surface-hover);
  border-color: var(--border);
  color: var(--text);
  text-decoration: none;
}

.account-header-action:active {
  transform: none;
}

/* The global Suggest action is a neutral secondary button, so each page's own primary action leads. */
.suggest-document-header-action {
  align-items: center;
  background: var(--surface);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: var(--text-sm);
  font-weight: 600;
  gap: var(--space-2);
  height: var(--control-height);
  padding: 0 var(--space-3);
  text-decoration: none;
  white-space: nowrap;
}

.suggest-document-header-action:hover {
  background: var(--surface-hover);
  border-color: var(--border-hover);
  color: var(--text);
  text-decoration: none;
}

.suggest-document-header-icon {
  height: 17px;
  width: 17px;
}

.account-review-action .suggestion-review-icon,
.my-suggestions-icon {
  height: var(--space-5);
  width: var(--space-5);
}

.account-my-suggestions-action[aria-current="page"] {
  background: var(--surface-muted);
  border-color: var(--border);
  color: var(--text);
}

.quick-access {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  position: relative;
}

.quick-access-trigger {
  align-items: center;
  background: transparent;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  display: inline-flex;
  flex: 0 0 auto;
  height: var(--control-height);
  justify-content: center;
  min-height: 0;
  padding: 0;
  width: var(--control-height);
}

.quick-access-trigger:hover,
.quick-access-trigger[aria-expanded="true"] {
  background: var(--surface-hover);
  border-color: var(--border);
  color: var(--text);
}

.quick-access-trigger:active {
  transform: none;
}

.quick-access-clock-icon {
  height: var(--space-5);
  width: var(--space-5);
}

/* The count sits on the bell's corner with a ring in the header colour, so it never merges into the icon. */
.account-review-action .suggestion-review-badge {
  box-shadow: var(--badge-ring);
  min-width: 17px;
  padding: var(--space-1) var(--space-1);
  position: absolute;
  right: -2px;
  top: -2px;
}

.avatar {
  align-items: center;
  background: var(--secondary-soft);
  border-radius: var(--radius-full);
  color: var(--secondary-text);
  display: inline-flex;
  flex: 0 0 28px;
  font-size: var(--text-xs);
  font-weight: 700;
  height: 28px;
  justify-content: center;
  line-height: 1;
  width: 28px;
}

.account-trigger .avatar::before {
  content: attr(data-initials);
}

.user-details {
  display: grid;
  gap: var(--space-px);
  min-width: 0;
}

.user-name {
  font-weight: 600;
  line-height: 1.25;
}

/* The account block stays quiet beside the header actions: name 14px medium, tenant 12px muted. */
.account-trigger .user-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.user-meta,
.muted {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.user-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
}

.session-actions.account-menu {
  align-items: stretch;
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: var(--space-0-5);
  justify-content: stretch;
  min-width: 220px;
  padding: var(--space-2);
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 80;
}

.session-actions.account-menu[hidden] {
  display: none;
}

.quick-access-menu {
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: var(--space-1);
  max-height: min(620px, calc(100vh - var(--app-header-height, 60px) - 32px));
  min-width: min(360px, calc(100vw - 32px));
  overflow-y: auto;
  padding: var(--space-3);
  position: absolute;
  left: 0;
  right: auto;
  top: calc(100% + 8px);
  width: 360px;
  z-index: 81;
}

.quick-access-menu[hidden] {
  display: none;
}

.quick-access-section-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  min-height: 32px;
  padding: var(--space-0-5) var(--space-1);
}

.quick-access-section-header:not(:first-of-type) {
  border-top: var(--border-width) solid var(--border);
  margin-top: var(--space-1);
  padding-top: var(--space-2);
}

.quick-access-section-title {
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  margin: 0;
  text-transform: uppercase;
}

.quick-access-section-action {
  background: transparent;
  border: 0;
  color: var(--accent-text);
  font-size: var(--text-xs);
  min-height: 28px;
  padding: var(--space-1) var(--space-2);
}

.quick-access-row {
  align-items: center;
  border-radius: var(--radius-sm);
  display: grid;
  gap: var(--space-2);
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 38px;
  padding: var(--space-0-5) var(--space-1) var(--space-0-5) var(--space-2);
}

.quick-access-row:hover {
  background: var(--surface-muted);
}

.quick-access-row[draggable="true"] {
  cursor: grab;
}

.quick-access-document-link {
  color: var(--text);
  font-size: var(--text-sm);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-access-row-actions {
  align-items: center;
  display: flex;
  gap: var(--space-px);
}

.quick-access-row-action {
  align-items: center;
  background: transparent;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  display: inline-flex;
  font-size: var(--text-base);
  height: 30px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  width: 30px;
}

.quick-access-row-action:hover {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

.quick-access-row-action:disabled {
  opacity: 0.35;
}

.quick-access-empty,
.quick-access-status {
  color: var(--text-muted);
  font-size: var(--text-xs);
  margin: 0;
  padding: var(--space-1) var(--space-3) var(--space-2);
}

.quick-access-status {
  align-items: center;
  background: var(--warn-bg);
  border: var(--border-width) solid var(--warn-border);
  border-radius: var(--radius-sm);
  color: var(--warn-text);
  display: flex;
  gap: var(--space-2);
  justify-content: space-between;
}

.quick-access-retry {
  background: transparent;
  border: var(--border-width) solid currentColor;
  color: inherit;
  flex: 0 0 auto;
  font-size: var(--text-xs);
  min-height: 28px;
  padding: var(--space-1) var(--space-2);
}

.session-actions a,
.session-actions button {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-2);
}

.session-actions.account-menu a,
.session-actions.account-menu button {
  border-radius: var(--radius-sm);
  justify-content: flex-start;
  min-height: 34px;
  padding: var(--space-2) var(--space-3);
  width: 100%;
}

.account-menu-item-label {
  min-width: 0;
}

.account-menu-item-icon {
  color: var(--text-secondary);
}

.account-menu-item-suffix {
  color: var(--text-muted);
  margin-left: auto;
}

.account-menu-item-suffix-icon {
  display: block;
}

.session-actions a:hover,
.session-actions button:hover {
  background: var(--surface-muted);
  color: var(--text);
}

.session-actions .suggestion-review-link {
  align-items: center;
  display: inline-flex;
  gap: var(--space-2);
}

.account-menu-separator {
  background: var(--border);
  height: 1px;
  margin: var(--space-1) var(--space-0-5);
}

.suggestion-review-icon {
  flex: 0 0 auto;
  height: 14px;
  width: 14px;
}

.suggestion-review-badge {
  align-items: center;
  background: var(--error-text);
  border-radius: var(--radius-full);
  color: var(--surface);
  display: inline-flex;
  font-size: var(--text-xs);
  font-weight: 700;
  justify-content: center;
  line-height: 1;
  min-width: 18px;
  padding: var(--space-1) var(--space-1);
}

.theme-toggle {
  min-width: 30px;
}

#theme-toggle-static {
  position: fixed;
  right: 16px;
  top: 16px;
  z-index: 20;
}

/* Main content */
.main-content {
  margin: var(--space-7) auto;
  max-width: 960px;
  padding: 0 var(--space-6) var(--space-16);
  width: 100%;
}

.main-content.has-document-layout {
  max-width: 1064px;
}

.eyebrow {
  color: var(--accent-text);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0 0 var(--space-2);
  text-transform: uppercase;
}

h1 {
  border-bottom: 0;
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 var(--space-2);
  padding-bottom: 0;
}

h2 {
  font-size: var(--text-lg);
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 0;
}

h3 {
  font-size: var(--text-base);
  font-weight: 600;
  margin: 0;
}

.lede {
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: 1.6;
  margin: var(--space-3) 0 var(--space-7);
  max-width: 65ch;
}

/* Cards and lists */
.section-card,
.document-list {
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.section-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  transition: box-shadow 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.section-card:hover {
  border-color: var(--accent-border);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.section-card p {
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}

.stack {
  display: grid;
  gap: var(--space-2);
}

.document-list {
  display: grid;
  gap: 0;
  margin-top: var(--space-6);
  padding: var(--space-2) var(--space-5);
}

.app-shell.has-list-page {
  background: var(--browser-chat);
}

.main-content.section-list-page {
  max-width: 1008px;
  margin-top: var(--space-8);
}

.section-list-page > h1 {
  font-size: var(--text-3xl);
}

.section-list-page > .section-list-actions {
  justify-content: flex-end;
  margin-top: var(--space-5);
}

.section-list-page .document-list {
  background: var(--browser-input);
  margin-top: var(--space-3);
  padding: var(--space-5) var(--space-6) var(--space-2);
}

.section-list-page .document-list > h2 {
  font-size: var(--text-lg);
  margin: 0;
}

/* The type badge sits beside the title, and the whole row is the link target. */
.document-row {
  align-items: baseline;
  border-bottom: var(--border-width) solid var(--border);
  column-gap: var(--space-4);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: var(--space-4) 0;
  position: relative;
}

.document-row:last-child {
  border-bottom: 0;
}

.document-row > * {
  grid-column: 1 / -1;
}

.document-row > h3 {
  font-size: var(--text-base);
  grid-column: 1;
  line-height: 1.35;
  margin: 0;
}

.document-row > .content-type-badge {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
}

.document-row > h3 a::after {
  content: "";
  inset: 0;
  position: absolute;
}

.document-row > h3 a:focus-visible {
  outline: none;
}

.document-row:has(> h3 a:focus-visible) {
  border-radius: var(--radius-sm);
  outline: var(--border-width-strong) solid var(--focus-ring);
  outline-offset: 2px;
}

.document-row:hover > h3 a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.document-row p {
  color: var(--text-secondary);
  line-height: 1.55;
  margin: var(--space-1) 0 0;
}

.document-row .document-row-meta {
  color: var(--text-muted);
  font-size: var(--text-xs);
  margin-top: var(--space-2);
}

.search-results {
  margin-top: var(--space-2);
}

/* The results header: an eyebrow and the result count as the page title; the query itself is in the header box. */
.search-results-header {
  display: grid;
  gap: var(--space-1);
}

.search-results-header .search-summary {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  margin: 0;
}

/* Search results: title, then type and location, then the matching passage. The whole row is the link target. */
.section-list-page .search-results {
  padding: var(--space-2);
}

.section-list-page .search-results > h2 {
  padding: var(--space-3) var(--space-4) var(--space-1);
}

.search-results .search-result {
  border-bottom: 0;
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--space-2);
  grid-template-columns: minmax(0, 1fr);
  padding: var(--space-4);
  transition: background-color var(--duration-fast) var(--ease);
}

/* An inset divider between results; it gives way to a hovered or focused result. */
.search-results .search-result + .search-result::before {
  border-top: var(--border-width) solid var(--border);
  content: "";
  left: var(--space-4);
  position: absolute;
  right: var(--space-4);
  top: 0;
}

.search-results .search-result:hover {
  background: var(--surface-hover);
}

.search-results .search-result:is(:hover, :has(> h3 a:focus-visible))::before,
.search-results .search-result:is(:hover, :has(> h3 a:focus-visible)) + .search-result::before {
  border-top-color: transparent;
}

.search-results .search-result:has(> h3 a:focus-visible) {
  background: var(--surface-hover);
  border-radius: var(--radius-md);
  outline-offset: 0;
}

.search-result > h3 {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

.search-result > h3 a {
  color: var(--accent-text);
}

.search-result-meta {
  align-items: center;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--text-sm);
  gap: var(--space-1) var(--space-3);
  line-height: var(--leading-snug);
}

.search-result-meta .content-type-badge {
  margin: 0;
}

.search-result-location {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  min-width: 0;
}

.search-result-separator {
  color: var(--text-muted);
}

.search-result-owner {
  color: var(--text-secondary);
}

.search-result .search-result-snippet {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: var(--text-body);
  display: -webkit-box;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  margin: 0;
  overflow: hidden;
}

/* Matched search words: an amber highlight with dark text in both themes (over 9:1), clear on dark surfaces too. */
mark.search-highlight {
  background: var(--highlight-bg);
  border-radius: var(--radius-xs);
  box-decoration-break: clone;
  color: var(--highlight-text);
  margin: 0 calc(-1 * var(--space-0-5));
  padding: 0 var(--space-0-5);
}

.empty-note {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin: 0;
  padding: var(--space-3) 0;
}

/* Ask Playbook */
.assistant-main {
  max-width: 920px;
}

/* Ask Playbook chat */
.main-content.has-chat-layout {
  margin: 0;
  max-width: none;
  padding: 0;
  flex: 1;
  min-height: 0;
  display: flex;
}

#home-chat,
#assistant-chat {
  flex: 1;
  min-height: 0;
  display: flex;
}

.app-shell.is-pwa-mode {
  background: var(--bg);
  min-height: 100dvh;
}

.app-shell.is-pwa-mode .app-header {
  display: none;
}

.pwa-main {
  min-height: 100dvh;
}

.pwa-chat-shell {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 100dvh;
  min-width: 0;
}

.pwa-chat-header {
  align-items: center;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border-bottom: var(--border-width) solid var(--border);
  display: grid;
  gap: var(--space-2);
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 58px;
  padding: max(var(--space-2), env(safe-area-inset-top)) max(var(--space-3), env(safe-area-inset-right)) var(--space-2) max(var(--space-3), env(safe-area-inset-left));
  position: sticky;
  top: 0;
  z-index: 20;
}

.pwa-title-block {
  display: grid;
  gap: var(--space-px);
  justify-items: center;
  min-width: 0;
  text-align: center;
}

.pwa-app-name {
  font-size: var(--text-base);
  font-weight: 700;
}

.pwa-tenant-name {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.pwa-icon-button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  display: inline-flex;
  height: 40px;
  justify-content: center;
  padding: 0;
  width: 40px;
}

.pwa-icon-button:hover {
  background: var(--surface-muted);
  color: var(--text);
}

.is-pwa-chat .chat-layout {
  grid-template-columns: minmax(0, 1fr);
  height: calc(100dvh - 58px);
}

/* In PWA mode the sidebar becomes a ChatGPT-style drawer sliding in from
   the left; a backdrop dims the chat and closes the drawer on tap. */
.is-pwa-chat .chat-sidebar {
  bottom: 0;
  box-shadow: var(--shadow-lg);
  display: flex;
  left: 0;
  max-width: calc(100vw - 56px);
  overflow: hidden;
  padding: max(var(--space-3), env(safe-area-inset-top)) var(--space-3) max(var(--space-3), env(safe-area-inset-bottom)) max(var(--space-3), env(safe-area-inset-left));
  position: fixed;
  top: 0;
  transform: translateX(-105%);
  transition: transform 220ms ease, visibility 220ms;
  visibility: hidden;
  width: 320px;
  z-index: 70;
}

.is-pwa-chat .chat-sidebar.is-open {
  transform: none;
  visibility: visible;
}

.is-pwa-chat .chat-history {
  flex: 1;
}

.chat-drawer-backdrop {
  background: var(--overlay);
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transition: opacity 220ms ease;
  z-index: 65;
}

.chat-drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.chat-drawer-top {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-left: var(--space-2);
}

.chat-drawer-brand {
  font-size: var(--text-base);
  font-weight: 700;
}

.chat-drawer-footer {
  border-top: var(--border-width) solid var(--border);
  display: grid;
  gap: var(--space-0-5);
  padding-top: var(--space-3);
}

.chat-drawer-action {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  display: flex;
  font-size: var(--text-sm);
  font-weight: 500;
  justify-content: flex-start;
  padding: var(--space-2) var(--space-3);
  text-align: left;
  width: 100%;
}

.chat-drawer-action:hover {
  background: var(--surface-muted);
  color: var(--text);
  text-decoration: none;
}

.chat-drawer-user {
  align-items: center;
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3) 0;
}

@media (prefers-reduced-motion: reduce) {
  .is-pwa-chat .chat-sidebar,
  .chat-drawer-backdrop {
    transition: none;
  }
}

.is-pwa-chat .chat-transcript {
  padding: var(--space-6) 0 var(--space-2);
}

.is-pwa-chat .chat-message,
.is-pwa-chat .chat-intro {
  width: min(720px, calc(100% - 28px));
}

.is-pwa-chat .chat-composer {
  padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
}

.chat-layout {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  flex: 1;
  min-height: 0;
  height: calc(100vh - 61px);
}

.chat-sidebar {
  background: var(--surface);
  border-right: var(--border-width) solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow-y: auto;
  padding: var(--space-4) var(--space-3);
}

/* New chat: the same full-width button on Home and in a conversation; filled softly while a new chat is open. */
.chat-new {
  flex: none;
  font-weight: var(--weight-semibold);
  gap: var(--space-2);
  justify-content: flex-start;
  min-height: var(--control-height);
  width: 100%;
}

.chat-new.is-active {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent-text);
}

.chat-new.is-active:hover {
  background: var(--accent-soft);
  border-color: var(--accent-fill);
  color: var(--accent-text);
}

.chat-sidebar-link {
  align-items: center;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  display: flex;
  flex: none;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: 0 var(--space-3);
  text-decoration: none;
}

.chat-sidebar-link:hover,
.chat-sidebar-link:focus-visible {
  background: var(--surface-hover);
  color: var(--text);
  text-decoration: none;
}

.chat-sidebar-link-label {
  flex: 1;
}

.chat-sidebar-link-badge {
  background: var(--accent-fill);
  border-radius: var(--radius-full);
  color: var(--text-on-fill);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1;
  min-width: 18px;
  padding: var(--space-1) var(--space-2);
  text-align: center;
}

.chat-history {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  overflow-y: auto;
}

.chat-history-group {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  margin: var(--space-4) var(--space-3) var(--space-1);
  text-transform: uppercase;
}

.chat-history-group:first-child {
  margin-top: var(--space-2);
}

.chat-history-row {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--control-height-sm);
  min-height: var(--control-height);
  padding-right: var(--space-1);
  transition: background-color var(--duration-fast) var(--ease);
}

/* Titles wrap to two lines before they are cut, so the meaningful words stay visible. */
.chat-history-item {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: -webkit-box;
  font-size: var(--text-sm);
  font-weight: inherit;
  justify-content: flex-start;
  line-height: var(--leading-snug);
  min-height: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  padding: var(--space-2) var(--space-1) var(--space-2) var(--space-3);
  text-align: left;
  white-space: normal;
  width: 100%;
}

.chat-history-item:hover {
  background: transparent;
  color: inherit;
}

.chat-history-item:focus-visible {
  border-radius: var(--radius-sm);
  outline-offset: calc(-1 * var(--focus-ring-width));
}

.chat-history-delete {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  display: inline-flex;
  height: 28px;
  justify-content: center;
  opacity: 0;
  padding: 0;
  width: 28px;
}

.chat-history-row:hover,
.chat-history-row:focus-within {
  background: var(--surface-hover);
  color: var(--text);
}

.chat-history-row:hover .chat-history-delete,
.chat-history-row:focus-within .chat-history-delete {
  opacity: 1;
}

.chat-history-delete:hover {
  color: var(--error-text);
}

.chat-history-row.is-active {
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: var(--weight-semibold);
}

.chat-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

/* Content scrolling under the header fades out instead of being cut at a hard edge. */
.chat-transcript {
  display: flex;
  flex: 1;
  flex-direction: column;
  mask-image: linear-gradient(to bottom, transparent var(--space-2), black var(--space-14));
  overflow-y: auto;
  padding: var(--space-12) 0 var(--space-6);
  scroll-padding-top: var(--space-12);
}

/* Rhythm: a question sits close to its answer, and exchanges are set further apart. */
.chat-transcript > .chat-message + .chat-message {
  margin-top: var(--space-4);
}

.chat-transcript > .chat-message.is-assistant + .chat-message.is-user {
  margin-top: var(--space-12);
}

.chat-layout.is-empty .chat-transcript {
  align-items: center;
  justify-content: center;
  mask-image: none;
}

.chat-message,
.chat-intro {
  margin: 0 auto;
  width: min(720px, 92%);
}

.chat-intro {
  color: var(--text-secondary);
  text-align: center;
}

.chat-intro h1 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}

.chat-intro-mark {
  align-items: center;
  background: var(--accent-soft);
  border: var(--border-width) solid var(--accent-border);
  border-radius: var(--radius-lg);
  color: var(--accent-text);
  display: inline-flex;
  height: var(--space-12);
  justify-content: center;
  margin-bottom: var(--space-4);
  width: var(--space-12);
}

.chat-message.is-user {
  display: flex;
  justify-content: flex-end;
}

.chat-bubble {
  background: var(--accent-soft);
  border: var(--border-width) solid var(--accent-border);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-xs) var(--radius-lg);
  color: var(--text);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  max-width: 80%;
  overflow-wrap: anywhere;
  padding: var(--space-3) var(--space-4);
  white-space: pre-wrap;
}

/* Answers read as body text: 16px with a relaxed line height. */
.chat-answer {
  color: var(--text-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.chat-answer :is(p, li) {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.chat-answer strong {
  color: var(--text);
}

.chat-answer.is-provisional {
  color: var(--text-secondary);
}

.chat-answer > :first-child {
  margin-top: 0;
}

.chat-answer h2 {
  font-size: var(--text-md);
  margin: var(--space-6) 0 var(--space-2);
}

.chat-answer h3,
.chat-answer h4,
.chat-answer h5 {
  font-size: var(--text-base);
  margin: var(--space-5) 0 var(--space-2);
}

.chat-answer p {
  margin: 0 0 var(--space-3);
}

.chat-answer .document-markdown-list {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-6);
}

.chat-answer code {
  background: var(--surface-muted);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  padding: var(--space-px) var(--space-1);
}

.chat-answer .document-blockquote {
  background: var(--accent-soft);
  border-left: var(--border-width-accent) solid var(--accent-border);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text-secondary);
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-4);
}

.chat-answer .document-table-wrap {
  margin: 0 0 var(--space-3);
  overflow-x: auto;
}

.chat-answer .document-table {
  border-collapse: collapse;
  width: 100%;
}

.chat-answer .document-table th,
.chat-answer .document-table td {
  border: var(--border-width) solid var(--border);
  padding: var(--space-2) var(--space-3);
  text-align: left;
}

.chat-refusal {
  color: var(--warn-text);
  font-size: var(--text-sm);
  margin: var(--space-2) 0 0;
}

.chat-citations {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.chat-citation {
  align-items: center;
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  display: inline-flex;
  font-size: var(--text-sm);
  gap: var(--space-2);
  line-height: var(--leading-snug);
  max-width: 100%;
  min-height: var(--control-height-sm);
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
  transition: border-color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease);
}

.chat-citation:hover {
  background: var(--surface-hover);
  border-color: var(--accent-border);
  color: var(--text);
  text-decoration: none;
}

.chat-citation-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The type is the shared content-type badge; inside a chip it drops the badge's list margins. */
.chat-citation .content-type-badge {
  margin: 0;
  min-height: var(--space-5);
  padding: 0 var(--space-2);
}

/* Source numbers: the badge on each source chip and the matching marker in the answer share one look. */
.chat-citation-index,
.chat-citation-ref {
  background: var(--accent-soft);
  border: var(--border-width) solid var(--accent-border);
  border-radius: var(--radius-xs);
  color: var(--accent-text);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  line-height: 1;
}

.chat-citation-index {
  align-items: center;
  display: inline-flex;
  flex: none;
  height: var(--space-5);
  justify-content: center;
  min-width: var(--space-5);
  padding: 0 var(--space-1);
}

/* A 24px box with a 14px number. chat.js groups it with the word before it and the punctuation after it in a
   .chat-cite-group, so it never wraps away from either. */
.chat-citation-ref {
  align-items: center;
  box-sizing: border-box;
  display: inline-flex;
  height: var(--space-6);
  justify-content: center;
  margin-left: var(--space-1);
  min-width: var(--space-6);
  padding: 0 var(--space-1);
  text-decoration: none;
  vertical-align: middle;
  transition: background-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
  white-space: nowrap;
}

.chat-cite-group {
  white-space: nowrap;
}

.chat-citation-ref + .chat-citation-ref {
  margin-left: var(--space-0-5);
}

.chat-citation-ref:hover,
.chat-citation-ref:focus-visible {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: var(--text-on-fill);
  text-decoration: none;
}

/* The icons line up with the answer's left edge; their hover fill reaches into the margin. */
.chat-actions {
  display: flex;
  gap: var(--space-1);
  margin: var(--space-2) 0 0 calc(-1 * var(--space-2));
}

.chat-thinking {
  align-items: center;
  color: var(--text-muted);
  display: flex;
  gap: var(--space-3);
}

.chat-run-progress {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin-top: var(--space-3);
}

.chat-run-progress > .chat-activity-icon {
  margin-right: var(--space-2);
}

.chat-activity-list {
  display: grid;
  gap: var(--space-1);
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
}

.chat-activity-list li::before {
  content: "○";
  display: inline-block;
  margin-right: var(--space-2);
}

.chat-activity-list li.is-completed::before {
  color: var(--secondary-strong);
  content: "✓";
}

.chat-run-failure,
.chat-run-cancelled {
  color: var(--text-secondary);
  margin: var(--space-2) 0 0;
}

.chat-run-failure {
  color: var(--error-text);
}

.chat-thinking-label {
  font-size: var(--text-sm);
}

.chat-activity-icon {
  display: inline-flex;
  vertical-align: -3px;
}

.chat-activity-icon svg {
  display: block;
  height: 16px;
  width: 16px;
}

.pbs-glass {
  animation: pbs-sweep 1.9s cubic-bezier(.45, 0, .55, 1) infinite;
}

@keyframes pbs-sweep {
  0%,
  100% { transform: translate(0, 0); }
  50% { transform: translate(7.5px, 2px); }
}

.pbs-l {
  animation: pbs-blip 1.9s ease-in-out infinite;
}

.pbs-l2 { animation-delay: .24s; }
.pbs-l3 { animation-delay: .48s; }

@keyframes pbs-blip {
  0%,
  100% { opacity: .18; }
  45% { opacity: .7; }
}

.pbr-l {
  animation: pbr-wave 1.7s ease-in-out infinite;
}

.pbr-l2 { animation-delay: .19s; }
.pbr-l3 { animation-delay: .38s; }

@keyframes pbr-wave {
  0%,
  100% { opacity: .22; }
  35% { opacity: 1; }
}

.pbt-l {
  animation: pbt-gather 1.8s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.pbt-l2 { animation-delay: .2s; }
.pbt-l3 { animation-delay: .4s; }

.pbt-core {
  animation: pbt-pulse 1.8s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes pbt-gather {
  0%,
  100% {
    opacity: .2;
    transform: scale(.78);
  }

  45% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pbt-pulse {
  0%,
  100% {
    opacity: .55;
    transform: scale(.82);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pbs-glass,
  .pbs-l,
  .pbr-l,
  .pbt-l,
  .pbt-core { animation: none; }

  .pbs-l,
  .pbr-l,
  .pbt-l { opacity: .5; }
}

.source-viewer {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  inset: 0;
  min-height: 100dvh;
  position: fixed;
  z-index: 80;
}

.source-viewer[hidden] {
  display: none;
}

.source-viewer-header {
  align-items: center;
  background: var(--surface);
  border-bottom: var(--border-width) solid var(--border);
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
  padding: max(var(--space-3), env(safe-area-inset-top)) max(var(--space-4), env(safe-area-inset-right)) var(--space-3) max(var(--space-4), env(safe-area-inset-left));
}

.source-viewer-title {
  min-width: 0;
}

.source-viewer-title h2 {
  font-size: var(--text-md);
  margin: 0;
}

.source-viewer-meta {
  color: var(--text-muted);
  font-size: var(--text-xs);
  margin: var(--space-0-5) 0 0;
}

.source-viewer-close {
  flex: 0 0 auto;
}

.source-viewer-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5) max(var(--space-4), env(safe-area-inset-right)) max(var(--space-7), env(safe-area-inset-bottom)) max(var(--space-4), env(safe-area-inset-left));
}

.source-viewer-body .document-body,
.source-excerpt {
  margin: 0 auto;
  max-width: 760px;
}

.source-excerpt {
  background: var(--surface);
  border: var(--border-width) solid var(--accent-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-4);
  padding: var(--space-4) var(--space-4);
}

.source-excerpt p:last-child {
  margin-bottom: 0;
}

.offline-page {
  display: grid;
  min-height: 100dvh;
  padding: var(--space-6);
  place-items: center;
}

.offline-panel {
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 460px;
  padding: var(--space-7);
}

.offline-panel h1 {
  margin-top: 0;
}

/* Answer controls: 32px ghost buttons with a tooltip and a visible hover, press and focus state. */
.chat-action {
  align-items: center;
  background: transparent;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  height: var(--space-8);
  justify-content: center;
  min-height: 0;
  padding: 0;
  width: var(--space-8);
}

.chat-action:hover {
  background: var(--surface-hover);
  border-color: var(--border);
  color: var(--text);
}

.chat-action.has-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  gap: var(--space-1);
  padding: 0 var(--space-2);
  width: auto;
}

.chat-action:disabled {
  cursor: default;
  opacity: 0.45;
}

.chat-action.is-done {
  color: var(--success-text);
}

.chat-cancel .icon {
  fill: currentColor;
}

.chat-composer {
  padding: var(--space-3) 0 var(--space-4);
}

.chat-input-wrap {
  align-items: flex-end;
  background: var(--surface);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  display: flex;
  gap: var(--space-2);
  margin: 0 auto;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);
  width: min(720px, 92%);
}

.chat-input-wrap:focus-within {
  border-color: var(--accent-fill);
  box-shadow: var(--shadow-focus);
}

/* Keyboard focus in the composer draws the app's standard ring around the whole box. */
.chat-input-wrap:has(.chat-input:focus-visible),
.is-browser-chat.is-empty .chat-input-wrap:has(.chat-input:focus-visible) {
  border-color: var(--focus-ring);
  box-shadow: var(--ring-focus);
  outline: none;
}

/* Browser composer: the question on top, the mode switch and send controls in a row beneath it. */
.chat-input-wrap.has-toolbar {
  align-items: stretch;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-3) var(--space-2);
}

.chat-input-wrap.has-toolbar .chat-input {
  padding: var(--space-1) var(--space-2);
}

.chat-input-toolbar {
  align-items: center;
  display: flex;
  gap: var(--space-2);
}

.chat-input-toolbar-spacer {
  flex: 1;
}

/* On desktop every browser composer is one row: the mode switch, the question (one line that grows with its
   text), then mic and send. The controls sit on the question's first line, vertically centred on it; Home's
   composer only adds padding, so both read as the same control. */
@media (min-width: 821px) {
  .is-browser-chat .chat-input-wrap.has-toolbar {
    align-items: flex-start;
    flex-direction: row;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  }

  .is-browser-chat.is-empty .chat-input-wrap.has-toolbar {
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-4);
  }

  .is-browser-chat .chat-input-toolbar {
    display: contents;
  }

  .is-browser-chat .chat-input-toolbar-spacer {
    display: none;
  }

  /* 34px toggle beside 36px buttons: a 1px nudge puts all three centres on one line. */
  .is-browser-chat .chat-mode-toggle {
    margin-top: var(--space-px);
    order: -1;
  }

  /* 4px padding and a 28px line make a 36px first line, centred on the 36px controls beside it. */
  .is-browser-chat .chat-input-wrap.has-toolbar .chat-input {
    line-height: calc(var(--control-height) - 2 * var(--space-1));
    min-height: var(--control-height);
    padding: var(--space-1) var(--space-1);
  }
}

.chat-input {
  background: transparent;
  border: 0;
  box-shadow: none;
  flex: 1;
  /* 16px minimum: anything smaller makes iOS Safari auto-zoom on focus */
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  max-height: 200px;
  min-height: 0;
  outline: none;
  padding: var(--space-2) 0;
  resize: none;
}

.chat-input:hover,
.chat-input:focus {
  border: 0;
  box-shadow: none;
}

/* The wrap shows the focus ring; suppress the inner outline */
.chat-input:focus-visible {
  outline: none;
}

.chat-voice,
.chat-send {
  border-radius: var(--radius-full);
  flex: none;
  height: var(--control-height);
  min-height: 0;
  padding: 0;
  width: var(--control-height);
}

/* The microphone is an available action: a filled neutral round button with a firm border.
   While it listens it turns red, pressed and pulsing. */
.chat-voice {
  background: var(--surface-muted);
  border-color: var(--border-strong);
  color: var(--text-secondary);
}

.chat-voice:hover {
  background: var(--surface-hover);
  border-color: var(--border-hover);
  color: var(--text);
}

.chat-voice.is-listening,
.chat-voice.is-listening:hover {
  animation: chat-voice-listening 1.4s var(--ease) infinite;
  background: var(--error-bg);
  border-color: var(--error-solid);
  color: var(--error-text);
}

@keyframes chat-voice-listening {
  50% {
    border-color: var(--error-border);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-voice.is-listening {
    animation: none;
  }
}

/* Send is muted until there is a question to send, then fills with the accent colour. */
.chat-send {
  transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

/* Nothing to send yet: no fill, a solid outline and a muted icon at full opacity, visible in both themes but
   plainly not the filled accent button it becomes. */
.chat-send:disabled,
.chat-send:disabled:hover {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 1;
}

/* Notices under the composer: one line when they fit, otherwise one sentence group per tight line. */
.chat-footnote {
  color: var(--text-secondary);
  display: block;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  margin: var(--space-2) auto 0;
  max-width: min(720px, 92%);
  text-align: center;
  text-wrap: balance;
}

.is-browser-chat .chat-footnote {
  max-width: min(760px, 92%);
}

.chat-footnote[hidden] {
  display: none;
}

.chat-footnote-line {
  display: inline-block;
}

@media (max-width: 820px) {
  .chat-layout {
    grid-template-columns: 1fr;
    height: auto;
    min-height: calc(100vh - 61px);
  }

  /* Narrow browsers keep past chats in the same drawer as the installed app, opened from the chat's top bar. */
  .is-browser-chat .chat-sidebar {
    bottom: 0;
    box-shadow: var(--shadow-lg);
    left: 0;
    max-width: calc(100vw - 56px);
    overflow: hidden;
    padding: max(var(--space-3), env(safe-area-inset-top)) var(--space-3) max(var(--space-3), env(safe-area-inset-bottom)) max(var(--space-3), env(safe-area-inset-left));
    position: fixed;
    top: 0;
    transform: translateX(-105%);
    transition: transform 220ms ease, visibility 220ms;
    visibility: hidden;
    width: 320px;
    z-index: 70;
  }

  .is-browser-chat .chat-sidebar.is-open {
    transform: none;
    visibility: visible;
  }

  .is-browser-chat .chat-history {
    flex: 1;
    overflow-y: auto;
  }

  .is-browser-chat .chat-main {
    position: relative;
  }

  .chat-mobile-bar {
    align-items: center;
    display: flex;
    flex: none;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3) 0;
  }

  .is-empty .chat-mobile-bar {
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
  }

  .is-empty .chat-mobile-new {
    visibility: hidden;
  }

  .chat-mobile-bar button {
    background: transparent;
    border-color: transparent;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
  }
}

@media (min-width: 821px) {
  .is-browser-chat :is(.chat-drawer-top, .chat-drawer-backdrop),
  .chat-mobile-bar {
    display: none;
  }
}

@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  .is-browser-chat .chat-sidebar {
    transition: none;
  }
}

/* Browser home: the introduction and composer sit together in the upper middle of the canvas. */
.is-browser-chat {
  background: var(--browser-chat);
  height: calc(100dvh - var(--app-header-height));
  min-height: 360px;
}

.is-browser-chat.is-empty .chat-main {
  justify-content: flex-start;
  overflow-y: auto;
  padding: var(--space-8) 0;
}

/* Two flexible spacers split the free height 2:3, so the group rests above the centre. */
.is-browser-chat.is-empty .chat-main::before,
.is-browser-chat.is-empty .chat-main::after {
  content: "";
  flex: 2 1 0;
}

.is-browser-chat.is-empty .chat-main::after {
  flex-grow: 3;
}

.is-browser-chat.is-empty .chat-transcript {
  flex: none;
  overflow: visible;
  padding: 0;
}

.is-browser-chat .chat-intro h1 {
  color: var(--text);
  font-size: var(--text-3xl);
  letter-spacing: -0.01em;
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-3);
}

.is-browser-chat .chat-intro p {
  font-size: var(--text-md);
  text-wrap: balance;
  line-height: var(--leading-normal);
  margin: 0 auto var(--space-8);
  max-width: var(--measure);
}

.is-browser-chat .chat-sidebar {
  background: var(--browser-sidebar);
}

.is-browser-chat .chat-input-wrap {
  background: var(--browser-input);
  border-radius: var(--radius-lg);
  width: min(760px, 92%);
}

.is-browser-chat:not(.is-empty) .chat-input-wrap:not(:focus-within) {
  box-shadow: var(--shadow-sm);
}

/* On Home the composer is the focal point: a little taller, lifted off the canvas. */
.is-browser-chat.is-empty .chat-input-wrap {
  box-shadow: var(--shadow-md);
}

.is-browser-chat.is-empty .chat-input-wrap:focus-within {
  box-shadow: var(--shadow-focus), var(--shadow-md);
}

@media (max-width: 820px) {
  .is-browser-chat.is-empty .chat-input {
    min-height: var(--space-14);
  }
}

.is-browser-chat .chat-input {
  min-width: 0;
}

/* Ask / Search: its look is the shared segmented control at the end of this file; this only sizes it. */
.chat-mode-toggle {
  flex: none;
}

.chat-mode-button {
  height: var(--control-height-sm);
  min-height: 0;
}

@media (max-width: 820px) {
  .is-browser-chat {
    min-height: max(360px, calc(100dvh - var(--app-header-height)));
  }
}

/* Document page */
/* Document pages break out of the centered container: the TOC rail sits at
   the far left, separated from the content by a border and its own surface. */
/* The bottom padding lives in the column so the outline rail runs to the foot of the page. */
.app-shell:has(.doc-layout) .main-content {
  margin: 0;
  max-width: none;
  padding: 0;
}

.doc-layout {
  align-items: stretch;
  display: grid;
  gap: 0;
  grid-template-columns: 260px minmax(0, 1fr);
  justify-content: start;
  min-height: calc(100vh - var(--app-header-height));
}

/* The reading column is centred in the space beside the outline rather than pinned to it, and is exactly the
   reading measure wide, so the title block, actions, tabs, heading rules and text all share one right edge.
   It sits a fixed distance from the outline, so outline and content read as one unit; spare width goes to the
   right. The editor keeps a little more room for its toolbar. */
.document-column {
  margin: 0 auto 0 var(--space-8);
  min-width: 0;
  max-width: min(calc(var(--measure) + 2 * var(--space-12)), calc(100% - var(--space-8)));
  padding: var(--space-8) var(--space-12) var(--space-16);
  scroll-behavior: smooth;
  width: 100%;
}

/* Whatever the column's padding at a given width, its header, actions, tabs and body all stop at the measure. */
.doc-layout:not(.is-pdf-document) > .document-column:not(.document-editor-column) > * {
  max-width: var(--measure);
}

/* The editor column is as wide as the writing canvas (the reading measure plus page margins, wide enough for the
   toolbar on one row) and sits close to the settings rail, so no dead gutter opens between them; very wide
   screens centre it. */
.document-column.document-editor-column {
  margin: 0 auto 0 clamp(calc(0 * var(--space-px)), calc((100% - var(--measure) - 2 * (var(--space-22) + var(--space-8)) - 2 * var(--space-12)) / 2), var(--space-16));
  max-width: calc(var(--measure) + 2 * (var(--space-22) + var(--space-8)) + 2 * var(--border-width) + 2 * var(--space-12));
  padding-inline: var(--space-12);
}

@media (min-width: 1680px) {
  .document-column.document-editor-column {
    margin-inline: auto;
  }
}

.toc {
  align-self: start;
  background: var(--surface);
  border-right: var(--border-width) solid var(--border);
  color: var(--text-muted);
  height: calc(100vh - var(--app-header-height));
  overflow-y: auto;
  padding: var(--space-8) var(--space-4) var(--space-8) var(--space-5);
  position: sticky;
  top: var(--app-header-height);
}

.toc-inner {
  position: static;
}

.toc-eyebrow {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0 0 var(--space-3);
}

.toc nav {
  position: relative;
}

/* The rail the position indicator slides along. */
.toc nav::before {
  background: var(--border);
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  top: 0;
  width: var(--border-width-strong);
}

.toc-position-indicator {
  background: var(--accent-fill);
  border-radius: var(--radius-full);
  left: 0;
  min-height: 4px;
  pointer-events: none;
  position: absolute;
  top: 0;
  transition:
    transform 180ms ease,
    height 180ms ease;
  width: 2px;
  z-index: 1;
}

.toc-list,
.toc-children {
  display: grid;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.toc-children[hidden] {
  display: none;
}

.toc-row {
  align-items: flex-start;
  display: flex;
  gap: var(--space-1);
}

/* Each entry wraps under its own first letter (a hanging indent from its padding) with room between lines. */
.toc a {
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  display: block;
  flex: 1 1 auto;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: var(--leading-snug);
  min-width: 0;
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
  text-wrap: pretty;
}

.toc a:hover {
  background: var(--surface-hover);
  color: var(--text);
  text-decoration: none;
}

.toc a.is-active {
  color: var(--accent-text);
  font-weight: 600;
}

/* The section that holds the reader's subsection reads as its parent. */
.toc a.is-section-active {
  color: var(--text);
}

/* Subsections: indented under their section, along a quiet guide line. */
.toc-children {
  border-left: var(--border-width) solid var(--border);
  margin: var(--space-1) 0 var(--space-1) var(--space-3);
}

.toc a.toc-level-3,
.toc a.toc-level-4 {
  color: var(--text-secondary);
  font-weight: 400;
  padding-left: var(--space-3);
}

.toc a.toc-level-3.is-active,
.toc a.toc-level-4.is-active {
  color: var(--accent-text);
  font-weight: 600;
}

/* Opens or closes a section's subsections; a quiet 24px chevron at the end of the row. */
.toc .toc-toggle {
  background: transparent;
  border-color: transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  flex: none;
  height: var(--space-7);
  min-height: var(--space-7);
  padding: 0;
  width: var(--space-7);
}

.toc .toc-toggle:hover {
  background: var(--surface-hover);
  border-color: transparent;
  color: var(--text);
}

.toc .toc-toggle .icon {
  transition: transform var(--duration-fast) var(--ease);
}

.toc .toc-toggle[aria-expanded="true"] .icon {
  transform: rotate(90deg);
}

/* Disclosure chevrons share one size wherever they open or close something: the outline, the editor's menu
   buttons, a gap card's examples and a suggestion's details. */
:is(.toc-toggle, .editor-menu-button, .gap-disclosure, .suggestion-review-details) svg.icon:is(.disclosure-chevron, .editor-menu-chevron, .suggestion-review-details-chevron),
.gap-disclosure > svg.icon:last-child {
  height: var(--icon-size-disclosure);
  width: var(--icon-size-disclosure);
}

/* Shown in place of the sidebar on narrow screens; see Responsive. */
.toc-compact {
  background: var(--browser-input);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  display: none;
  margin: 0 0 var(--space-4);
}

.toc-compact > summary {
  align-items: center;
  border-radius: var(--radius);
  color: var(--text);
  cursor: pointer;
  display: flex;
  font-size: var(--text-sm);
  font-weight: 600;
  gap: var(--space-3);
  justify-content: space-between;
  list-style: none;
  min-height: 44px;
  padding: 0 var(--space-4);
}

.toc-compact > summary::-webkit-details-marker {
  display: none;
}

.toc-compact > summary::after {
  border-bottom: var(--border-width-strong) solid var(--text-muted);
  border-right: var(--border-width-strong) solid var(--text-muted);
  content: "";
  flex: none;
  height: 7px;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 180ms ease;
  width: 7px;
}

.toc-compact[open] > summary::after {
  transform: translateY(2px) rotate(225deg);
}

.toc-compact > summary:focus-visible {
  outline: var(--border-width-strong) solid var(--focus-ring);
  outline-offset: 2px;
}

.toc-compact nav {
  border-top: var(--border-width) solid var(--border);
  max-height: min(60vh, 480px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-2) 0;
}

.toc-compact a {
  color: var(--text);
  display: block;
  font-size: var(--text-sm);
  line-height: 1.35;
  overflow-wrap: anywhere;
  padding: var(--space-2) var(--space-4);
}

.toc-compact a.toc-level-3 {
  color: var(--text-muted);
  font-size: var(--text-sm);
  padding-left: var(--space-8);
}

.toc-compact a:hover {
  background: var(--surface-muted);
  color: var(--text);
  text-decoration: none;
}

.toc-compact a:focus-visible {
  outline-offset: -2px;
}

.breadcrumbs {
  align-items: center;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--text-sm);
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}

.breadcrumbs a {
  color: var(--text-muted);
}

.breadcrumbs a:hover {
  color: var(--accent-text);
}

.app-shell.has-document-page {
  background: var(--document-surface);
}

.has-document-page .toc {
  background: var(--document-rail);
}

/* A linked document's type is for screen readers only ("Procedure" after the link, read as "(Procedure)");
   sighted readers see it in the link's preview card, so it never interrupts the sentence. */
.document-content .content-type-badge.linked-document-type {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.document-content .linked-document-type::before {
  content: " (";
}

.document-content .linked-document-type::after {
  content: ")";
}

/* Preview card for a link to another document (app.js installLinkPreviews). */
.link-preview {
  background: var(--surface-raised);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: var(--space-1);
  max-width: 22rem;
  padding: var(--space-3) var(--space-4);
  pointer-events: auto;
  position: fixed;
  z-index: 40;
}

.link-preview[hidden] {
  display: none;
}

.link-preview-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
}

.link-preview-head .content-type-badge {
  margin: 0;
}

.link-preview-path {
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.link-preview-title {
  color: var(--text);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  margin-top: var(--space-1);
}

.link-preview-summary {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: var(--text-secondary);
  display: -webkit-box;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  margin: 0;
  overflow: hidden;
}

.document-title-row {
  margin-top: var(--space-5);
}

.document-title-row h1 {
  font-size: var(--text-3xl);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 0;
  min-width: 0;
  text-wrap: balance;
}

.document-summary {
  color: var(--text-secondary);
  font-size: var(--text-md);
  line-height: 1.55;
  margin: var(--space-3) 0 0;
  max-width: 62ch;
}

.document-meta {
  align-items: center;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--text-sm);
  gap: var(--space-2) var(--space-4);
  margin: var(--space-4) 0 var(--space-6);
}

.document-meta span {
  border-right: 0;
  padding-right: 0;
}

.document-meta .content-type-badge {
  flex: 0 0 auto;
  margin: 0;
  padding-inline: var(--space-4);
}

.document-meta-item,
.meta-separator {
  color: var(--text-muted);
}

.content-type-badge {
  align-items: center;
  background: var(--accent-soft);
  border: var(--border-width) solid var(--accent-border);
  border-radius: var(--radius-full);
  box-sizing: border-box;
  color: var(--accent-text);
  display: inline-flex;
  font-size: var(--text-xs);
  font-weight: 700;
  justify-content: center;
  letter-spacing: 0;
  line-height: 1;
  margin: var(--space-1) 0 var(--space-2);
  min-height: 22px;
  padding: 0 var(--space-4);
  white-space: nowrap;
}

/* Keep type labels readable independently of tenant accent colors. */
.content-type-badge[data-content-type] {
  --type-hue: 215;
  --type-bg: hsl(var(--type-hue) 65% 50% / var(--badge-bg-alpha));
  --type-border: hsl(var(--type-hue) 65% 50% / var(--badge-border-alpha));
  --type-text: hsl(var(--type-hue) 65% var(--badge-lightness));
  background: var(--type-bg);
  border-color: var(--type-border);
  color: var(--type-text);
}

.content-type-badge[data-content-type="standard"] { --type-hue: 142; }
.content-type-badge[data-content-type="process"] { --type-hue: 40; }
.content-type-badge[data-content-type="guideline"] { --type-hue: 280; }
.content-type-badge[data-content-type="procedure"] { --type-hue: 185; }
.content-type-badge[data-content-type="reference"] { --type-hue: 330; }

.document-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-start;
  margin: 0;
}

.document-actions a,
.document-actions button {
  font-size: var(--text-sm);
  min-height: var(--control-height);
  padding: var(--space-1) var(--space-3);
  white-space: nowrap;
}

/* Edit is the one filled action; the rest are quiet ghost buttons whose border appears on hover and focus,
   so the title and body lead. */
.document-actions:not(.document-editor-actions) > :is(a, button):not(.primary-action),
.document-actions:not(.document-editor-actions) > .action-menu > summary {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--text-secondary);
}

.document-actions:not(.document-editor-actions) > :is(a, button):not(.primary-action):hover,
.document-actions:not(.document-editor-actions) > :is(a, button):not(.primary-action):focus-visible,
.document-actions:not(.document-editor-actions) > .action-menu > summary:hover,
.document-actions:not(.document-editor-actions) > .action-menu > summary:focus-visible,
.document-actions:not(.document-editor-actions) > .action-menu[open] > summary {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  color: var(--text);
}

.document-actions .document-favorite-button {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-width: var(--control-height);
  padding: var(--space-1) var(--space-2);
}

.document-actions .document-favorite-button.is-favorite,
.document-actions .document-favorite-button.is-favorite:hover {
  color: var(--warn-solid);
}

.document-favorite-button.is-favorite svg {
  fill: currentColor;
}

/* Edit (or New Document) leads its toolbar; Delete sits apart at the far end so it is hard to hit by accident. */
.actions .primary-action {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: var(--text-on-fill);
  order: -1;
}

.actions .primary-action:hover {
  background: var(--accent-fill-hover);
  border-color: var(--accent-fill-hover);
  color: var(--text-on-fill);
  text-decoration: none;
}

.actions .primary-action:active {
  background: var(--accent-fill-active);
}

.actions .primary-action .button-icon {
  color: currentColor;
}

.document-actions .document-favorite-button {
  order: -2;
}

/* "More" overflow menu for rare and destructive document actions. */
.action-menu {
  position: relative;
}

.action-menu > summary {
  list-style: none;
}

.action-menu > summary::-webkit-details-marker {
  display: none;
}

.action-menu[open] > summary {
  background: var(--surface-hover);
  border-color: var(--border-hover);
}

.action-menu-list {
  background: var(--surface-raised);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  min-width: 13rem;
  padding: var(--space-1);
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-1));
  z-index: 30;
}

.document-actions .action-menu-item {
  background: transparent;
  border-color: transparent;
  border-radius: var(--radius-sm);
  color: var(--text);
  justify-content: flex-start;
  width: 100%;
}

.document-actions .action-menu-item:hover {
  background: var(--surface-hover);
  border-color: transparent;
}

.document-actions .action-menu-item.danger-action {
  border-top: var(--border-width) solid var(--border);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  color: var(--error-text);
}

.document-actions .action-menu-item.danger-action:hover {
  background: var(--error-bg);
  color: var(--error-text);
}

.danger-action {
  background: var(--error-bg);
  border-color: var(--error-border);
  color: var(--error-text);
}

.danger-action .button-icon {
  color: currentColor;
}

.button-icon {
  color: var(--text-secondary);
  flex: none;
}

:is(button, a):hover > .button-icon {
  color: currentColor;
}

.doc-tabs {
  border-bottom: var(--border-width) solid var(--border);
  display: flex;
  gap: var(--space-5);
  margin: 0 0 var(--space-5);
  overflow-x: auto;
}

.doc-tabs button {
  background: transparent;
  border: 0;
  border-bottom: var(--border-width-strong) solid transparent;
  border-radius: 0;
  color: var(--text-muted);
  flex: 0 0 auto;
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: 0;
  padding: 0 0 var(--space-3);
}

.doc-tabs button:hover {
  background: transparent;
  border-bottom-color: var(--accent-border);
  color: var(--text);
}

.doc-tabs button.is-active {
  border-bottom-color: var(--accent-fill);
  color: var(--text);
}

.tab-chip {
  background: var(--accent-soft);
  border: var(--border-width) solid var(--accent-border);
  border-radius: var(--radius-full);
  color: var(--accent-text);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1;
  min-width: 20px;
  padding: var(--space-1) var(--space-2);
  text-align: center;
}

.doc-tab-panels {
  min-width: 0;
}

.tab-list {
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.tab-row {
  border-bottom: var(--border-width) solid var(--border);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-4);
}

.tab-row:last-child {
  border-bottom: 0;
}

.suggestion-row {
  align-items: center;
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
}

.suggestion-row > div {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.suggestion-row strong {
  color: var(--text);
}

/* Document typography. Each heading level differs in size, weight and spacing, and only h2 draws a divider,
   so long documents read as sections and subsections. The visual editor shares these rules so authors see the
   hierarchy readers will see. */
.document-content {
  color: var(--text-body);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  overflow-wrap: break-word;
  padding: var(--space-1) 0 0;
}

/* Running text keeps a comfortable measure (about 70 characters); tables and code may use the full column. */
.document-content > :is(p, ul, ol, blockquote, h1, h2, h3, h4, h5, h6, .document-markdown-list, .document-blockquote) {
  max-width: var(--measure);
}

/* :is() keeps this reset as specific as the heading rules below, so a leading heading sits flush. */
:is(.document-content, .editor-surface .ProseMirror) > :first-child {
  margin-top: 0;
}

:is(.document-content, .editor-surface .ProseMirror) :is(h1, h2, h3, h4, h5, h6) {
  color: var(--text);
  line-height: 1.3;
  scroll-margin-top: var(--document-anchor-offset);
  text-wrap: balance;
}

:is(.document-content, .editor-surface .ProseMirror) h1 {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: var(--space-12) 0 var(--space-4);
}

:is(.document-content, .editor-surface .ProseMirror) h2 {
  border-bottom: var(--border-width) solid var(--border);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: var(--space-12) 0 var(--space-4);
  padding-bottom: var(--space-3);
}

:is(.document-content, .editor-surface .ProseMirror) h3 {
  font-size: var(--text-lg);
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: var(--space-9) 0 var(--space-3);
}

:is(.document-content, .editor-surface .ProseMirror) h4 {
  font-size: var(--text-base);
  font-weight: 650;
  margin: var(--space-7) 0 var(--space-2);
}

:is(.document-content, .editor-surface .ProseMirror) :is(h5, h6) {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  margin: var(--space-6) 0 var(--space-2);
  text-transform: uppercase;
}

:is(.document-content, .editor-surface .ProseMirror) h6 {
  color: var(--text-muted);
}

/* A heading straight under another heading belongs to it, so it sits closer. */
:is(.document-content, .editor-surface .ProseMirror) :is(h1, h2, h3, h4, h5, h6) + :is(h2, h3, h4, h5, h6) {
  margin-top: var(--space-5);
}

:is(.document-content, .editor-surface .ProseMirror) p {
  margin: 0 0 var(--space-4);
}

:is(.document-content, .editor-surface .ProseMirror) strong {
  color: var(--text);
  font-weight: 650;
}

.document-content a.document-link {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.document-content a.document-link:hover {
  text-decoration-color: currentColor;
}

/* Lists. Nested ordered steps switch to letters, then numerals, so 3.b reads differently from 3.2. */
.document-markdown-list {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-7);
}

:is(.document-content, .editor-surface .ProseMirror) :is(ul, ol) {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-7);
}

:is(.document-content, .editor-surface .ProseMirror) li {
  margin: var(--space-1) 0;
  padding-left: var(--space-1);
}

:is(.document-content, .editor-surface .ProseMirror) li::marker {
  color: var(--text-muted);
}

:is(.document-content, .editor-surface .ProseMirror) ol > li::marker {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

:is(.document-content, .editor-surface .ProseMirror) li > :is(ul, ol) {
  margin: var(--space-1) 0 var(--space-2);
}

:is(.document-content, .editor-surface .ProseMirror) li > p {
  margin-bottom: var(--space-2);
}

:is(.document-content, .editor-surface .ProseMirror, .chat-answer) ol ol {
  list-style-type: lower-alpha;
}

:is(.document-content, .editor-surface .ProseMirror, .chat-answer) ol ol ol {
  list-style-type: lower-roman;
}

.document-task-item {
  list-style: none;
}

/* Read-only checkboxes keep full contrast instead of the browser's greyed-out disabled look. */
.document-task-checkbox {
  appearance: none;
  background: var(--surface);
  border: var(--border-width-strong) solid var(--border-strong);
  border-radius: var(--radius-xs);
  height: 16px;
  margin: 0 var(--space-2) 0 calc(-1 * var(--space-6));
  vertical-align: -3px;
  width: 16px;
}

.document-task-checkbox:checked {
  background: var(--accent-fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
  border-color: var(--accent-fill);
}

.document-task-item:has(> .document-task-checkbox:checked, > p > .document-task-checkbox:checked) {
  color: var(--text-muted);
}

.document-table [align="left"] { text-align: left; }
.document-table [align="center"] { text-align: center; }
.document-table [align="right"] { text-align: right; }

.document-image {
  border-radius: var(--radius-sm);
  display: block;
  height: auto;
  margin: var(--space-5) 0;
  max-width: 100%;
}

:is(.document-content, .editor-surface .ProseMirror) hr {
  border: 0;
  border-top: var(--border-width) solid var(--border);
  margin: var(--space-10) 0;
}

/* Code */
:is(.document-content, .editor-surface .ProseMirror) code {
  background: var(--code-bg);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  padding: var(--space-0-5) var(--space-2);
}

.document-code-block,
.editor-surface .ProseMirror pre {
  background: var(--code-bg);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  margin: var(--space-1) 0 var(--space-5);
  overflow-x: auto;
  padding: var(--space-4) var(--space-4);
}

:is(.document-code-block, .editor-surface .ProseMirror pre) code {
  background: transparent;
  border: 0;
  border-radius: 0;
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.65;
  padding: 0;
  white-space: pre;
}

.document-code-block code[data-language]::before {
  color: var(--text-muted);
  content: attr(data-language);
  display: block;
  font: 600 11px/1 var(--font-sans);
  letter-spacing: 0.08em;
  margin-bottom: var(--space-3);
  text-transform: uppercase;
}

.document-code {
  margin: var(--space-1) 0 var(--space-5);
  position: relative;
}

.document-code > .document-code-block {
  margin: 0;
}

.document-code-copy {
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
  opacity: 0;
  padding: var(--space-1) var(--space-2);
  position: absolute;
  right: 8px;
  top: 8px;
  transition: opacity 120ms ease;
}

.document-code:hover > .document-code-copy,
.document-code-copy:focus-visible,
.document-code-copy.is-copied {
  opacity: 1;
}

@media (hover: none) {
  .document-code-copy {
    opacity: 1;
  }
}

/* Quotes and callouts. A plain quote stays neutral; `> [!WARNING]` or `> **Warning:**` picks a colour. */
.document-blockquote {
  background: var(--accent-soft);
  border-left: var(--border-width-accent) solid var(--accent-border);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text-secondary);
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
}

.document-content .document-blockquote,
.editor-surface .ProseMirror blockquote {
  background: var(--surface-muted);
  border: var(--border-width) solid var(--border);
  border-left: var(--border-width-accent) solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  margin: var(--space-1) 0 var(--space-5);
  padding: var(--space-3) var(--space-5);
}

:is(.document-blockquote, .editor-surface .ProseMirror blockquote) p {
  margin: 0 0 var(--space-2);
}

:is(.document-blockquote, .editor-surface .ProseMirror blockquote) p:last-child {
  margin-bottom: 0;
}

.document-callout { --callout-hue: 205; }

:is(.document-content, .chat-answer) .document-callout {
  --callout-bg: hsl(var(--callout-hue) 80% 50% / 7%);
  --callout-border: hsl(var(--callout-hue) 70% 45% / 22%);
  --callout-rule: hsl(var(--callout-hue) 75% 45%);
  --callout-text: hsl(var(--callout-hue) 70% var(--badge-lightness));
  background: var(--callout-bg);
  border-color: var(--callout-border);
  border-left-color: var(--callout-rule);
  color: var(--text-body);
}

.document-callout-tip { --callout-hue: 142; }
.document-callout-important { --callout-hue: 268; }
.document-callout-warning { --callout-hue: 36; }
.document-callout-caution { --callout-hue: 0; }

.document-callout-title,
.document-callout > p:first-child > strong:first-child {
  color: var(--callout-text);
}

.document-callout .document-callout-title {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  margin-bottom: var(--space-1);
  text-transform: uppercase;
}

/* Tables: row rules only, a soft header, and tabular figures so number columns line up. */
.document-table-wrap {
  margin: 0 0 var(--space-4);
  overflow-x: auto;
}

.document-table {
  border-collapse: collapse;
  width: 100%;
}

.document-table th,
.document-table td {
  border: var(--border-width) solid var(--border);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  vertical-align: top;
}

.document-table th {
  background: var(--surface-muted);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 650;
}

.document-content .document-table-wrap {
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  margin: var(--space-1) 0 var(--space-6);
}

.document-content .document-table {
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

.document-content .document-table :is(th, td) {
  border: 0;
  border-bottom: var(--border-width) solid var(--border);
  padding: var(--space-3) var(--space-4);
}

.document-content .document-table th {
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
}

.document-content .document-table tbody tr:last-child td {
  border-bottom: 0;
}

.document-content .document-table tbody tr:hover td {
  background: color-mix(in srgb, var(--accent-fill) 4%, transparent);
}

/* Document authoring */
.document-editor-form {
  margin: 0;
}

.document-editor-sidebar-inner {
  display: grid;
  gap: var(--space-3);
}

.document-editor-sidebar label,
.document-title-field,
.document-body-field {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.document-editor-sidebar label > span,
.document-title-field > span,
.document-body-field > span {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
}

.document-editor-column .breadcrumbs,
.document-editor-column .breadcrumbs a {
  color: var(--text-secondary);
}

.document-editor-column .breadcrumbs a:hover {
  color: var(--accent-text);
}

.document-editor-sidebar input,
.document-editor-sidebar select,
.document-editor-sidebar textarea {
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

/* The summary grows with its text (field-sizing, or document_edit.js where unsupported) instead of clipping it. */
.document-editor-sidebar textarea {
  field-sizing: content;
  line-height: var(--leading-normal);
  max-height: 60vh;
  min-height: calc(4lh + var(--space-5));
}

.document-editor-sidebar .checkbox-field {
  align-items: center;
  display: flex;
  gap: var(--space-2);
}

.document-editor-sidebar .checkbox-field input {
  flex: 0 0 auto;
  width: 15px;
}

.document-editor-sidebar .checkbox-field span {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
}

.document-title-row.document-editor-title-row {
  align-items: end;
  display: grid;
  gap: var(--space-4);
  margin-bottom: 0;
}

.document-title-field {
  flex: 1 1 auto;
}

.document-title-field input {
  background: transparent;
  border-color: transparent transparent var(--border-strong);
  border-radius: 0;
  box-shadow: none;
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.2;
  min-width: 0;
  padding: var(--space-0-5) 0 var(--space-2);
  width: 100%;
}

.document-title-field input:hover,
.document-title-field input:focus {
  background: transparent;
  border-color: transparent transparent var(--accent-fill);
  box-shadow: none;
}

.document-body-field {
  margin-top: var(--space-4);
}

/* Markdown source is edited in a fixed-width face so tables, lists and indentation line up. */
.document-body-field textarea {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.65;
  min-height: 420px;
  tab-size: 4;
}

.document-body-field .playbook-editor {
  margin-top: var(--space-1);
  /* A scrolling ancestor prevents the toolbar from sticking to the viewport. */
  overflow: visible;
}

.document-body-field .editor-header {
  position: sticky;
  top: var(--app-header-height);
  z-index: 10;
}

.document-body-field .editor-surface,
.document-body-field .editor-surface .ProseMirror {
  min-height: 420px;
}

/* The primary action says it publishes; the note beside it says when readers see the change. */
.document-editor-actions {
  align-items: center;
}

.document-editor-publish-note {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin: 0;
}

/* Generic action rows */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Sign-in and account-access pages (sign_in_base.html) */
.sign-in-page {
  background:
    radial-gradient(1100px 480px at 50% -180px, color-mix(in srgb, var(--accent-fill) 14%, transparent), transparent 70%),
    var(--bg);
  min-height: 100vh;
}

.sign-in-page [hidden] {
  display: none;
}

.sign-in-page #theme-toggle-static {
  background: transparent;
  border-color: transparent;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  height: 36px;
  padding: 0;
  width: 36px;
}

.sign-in-page #theme-toggle-static:hover {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

/* Top-anchored so the card doesn't jump as its content changes between steps. */
.sign-in-main {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  padding: clamp(var(--space-12), 14vh, calc(var(--space-16) * 2 + var(--space-2))) var(--space-4) var(--space-8);
}

.sign-in-mark {
  align-items: center;
  color: var(--text);
  display: inline-flex;
  font-size: var(--text-xl);
  font-weight: 700;
  gap: var(--space-3);
  letter-spacing: -0.01em;
}

.sign-in-mark:hover {
  color: var(--text);
  text-decoration: none;
}

.sign-in-card {
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: var(--space-6);
  padding: var(--space-10) var(--space-10) var(--space-8);
  width: min(440px, 100%);
}

.sign-in-heading {
  display: grid;
  gap: var(--space-2);
}

.sign-in-heading.is-centered,
.sign-in-fine-print.is-centered {
  text-align: center;
}

.sign-in-heading h1 {
  font-size: var(--text-xl);
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0;
}

.sign-in-lede {
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: 1.5;
  margin: 0;
}

.sign-in-badge {
  background: var(--warn-bg);
  border: var(--border-width) solid var(--warn-border);
  border-radius: var(--radius-full);
  color: var(--warn-text);
  font-size: var(--text-xs);
  font-weight: 600;
  justify-self: start;
  margin: 0 0 calc(-1 * var(--space-2));
  padding: var(--space-0-5) var(--space-3);
}

.sign-in-alert {
  background: var(--accent-soft);
  border: var(--border-width) solid var(--accent-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  line-height: 1.5;
  margin: 0;
  padding: var(--space-3) var(--space-3);
}

.sign-in-alert.is-error {
  background: var(--error-bg);
  border-color: var(--error-border);
  color: var(--error-text);
}

.sign-in-body,
.sign-in-actions,
.sign-in-methods,
.tenant-picker {
  display: grid;
  gap: var(--space-3);
}

.sign-in-body {
  gap: var(--space-5);
}

.sign-in-status {
  align-items: center;
  color: var(--text-secondary);
  display: flex;
  font-size: var(--text-sm);
  gap: var(--space-3);
  line-height: 1.5;
  margin: 0;
}

.sign-in-status.is-busy::before {
  animation: button-spin 700ms linear infinite;
  border: var(--border-width-strong) solid var(--border-strong);
  border-radius: var(--radius-full);
  border-top-color: var(--accent-fill);
  content: "";
  flex: 0 0 auto;
  height: 14px;
  width: 14px;
}

.sign-in-status.is-centered {
  justify-content: center;
}

.sign-in-status.is-error {
  background: var(--error-bg);
  border: var(--border-width) solid var(--error-border);
  border-radius: var(--radius-sm);
  color: var(--error-text);
  padding: var(--space-3) var(--space-3);
}

.sign-in-form {
  display: grid;
  gap: var(--space-2);
}

.sign-in-form label {
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 600;
}

.sign-in-form label:not(:first-of-type),
.sign-in-form .sign-in-status {
  margin-top: var(--space-2);
}

.sign-in-form input,
.sign-in-form select {
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  min-height: 44px;
  padding: var(--space-3) var(--space-3);
  width: 100%;
}

.sign-in-form .sign-in-primary {
  margin-top: var(--space-2);
}

button.sign-in-primary,
.sign-in-secondary {
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  min-height: 44px;
  width: 100%;
}

button.sign-in-primary {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: var(--text-on-fill);
  font-weight: 600;
}

button.sign-in-primary:hover {
  background: var(--accent-fill-hover);
  border-color: var(--accent-fill-hover);
  color: var(--text-on-fill);
}

.sign-in-secondary {
  align-items: center;
  border: var(--border-width) solid var(--border-strong);
  display: inline-flex;
  font-weight: 500;
  justify-content: center;
}

/* Outranks the app's primary submit styling, which secondary submit buttons here must not take. */
.sign-in-page .sign-in-card .sign-in-secondary,
.sign-in-page .sign-in-card button.sign-in-method {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
}

.sign-in-page .sign-in-card .sign-in-secondary:hover {
  background: var(--surface-muted);
  border-color: var(--text-muted);
  color: var(--text);
  text-decoration: none;
}

.sign-in-divider {
  align-items: center;
  color: var(--text-muted);
  display: grid;
  font-size: var(--text-xs);
  gap: var(--space-3);
  grid-template-columns: 1fr auto 1fr;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sign-in-divider::before,
.sign-in-divider::after {
  background: var(--border);
  content: "";
  height: 1px;
}

.sign-in-identity {
  background: var(--surface-muted);
  border-color: var(--border);
  border-radius: var(--radius-full);
  gap: var(--space-3);
  justify-content: flex-start;
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
  text-align: left;
  width: 100%;
}

.sign-in-identity-avatar {
  align-items: center;
  background: var(--accent-soft);
  border-radius: var(--radius-full);
  color: var(--accent-text);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: var(--text-sm);
  font-weight: 700;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.sign-in-identity-email {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sign-in-identity-change {
  color: var(--accent-text);
  flex: 0 0 auto;
  font-size: var(--text-sm);
  font-weight: 600;
}

.sign-in-method {
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  gap: var(--space-3);
  justify-content: flex-start;
  min-height: 48px;
  padding: 0 var(--space-4);
  width: 100%;
}

.sign-in-page .sign-in-card button.sign-in-method:hover {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--text);
}

.sign-in-method svg {
  color: var(--text-secondary);
  fill: none;
  flex: 0 0 auto;
  height: 20px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 20px;
}

/* Workspace chooser */
.tenant-filter input {
  border-radius: var(--radius-sm);
  min-height: 40px;
  width: 100%;
}

.tenant-filter-empty {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin: var(--space-3) 0 0;
}

.tenant-list {
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  display: grid;
  max-height: min(424px, 56vh);
  overflow-y: auto;
}

.tenant-list-heading {
  align-items: center;
  background: var(--surface-muted);
  border-bottom: var(--border-width) solid var(--border);
  color: var(--text-muted);
  display: flex;
  font-size: var(--text-xs);
  font-weight: 600;
  gap: var(--space-2);
  justify-content: space-between;
  letter-spacing: 0.04em;
  margin: 0;
  min-height: 34px;
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-4);
  text-transform: uppercase;
}

.tenant-list-heading[hidden] {
  display: none;
}

/* Opens Organization settings for an Organization this sign-in administers (decision 0042). */
.tenant-organization-settings {
  align-items: center;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  display: inline-flex;
  flex: 0 0 auto;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.tenant-organization-settings:hover {
  background: var(--surface);
  color: var(--accent-text);
}

.tenant-organization-settings .tenant-option-icon {
  color: inherit;
  height: 16px;
  width: 16px;
}

.tenant-option {
  background: transparent;
  border: 0;
  border-bottom: var(--border-width) solid var(--border);
  border-radius: 0;
  gap: var(--space-3);
  justify-content: flex-start;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  width: 100%;
}

.tenant-option:last-child {
  border-bottom: 0;
}

.tenant-option:hover {
  background: var(--surface-muted);
  border-color: var(--border);
}

.tenant-option:active {
  transform: none;
}

.tenant-option:focus-visible {
  border-radius: 0;
  outline-offset: -2px;
}

.tenant-option-avatar {
  align-items: center;
  --workspace-bg: hsl(var(--workspace-hue, 205) var(--workspace-bg-saturation) var(--workspace-bg-lightness));
  --workspace-text: hsl(var(--workspace-hue, 205) var(--workspace-text-saturation) var(--workspace-text-lightness));
  background: var(--workspace-bg);
  border-radius: var(--radius-sm);
  color: var(--workspace-text);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: var(--text-sm);
  font-weight: 700;
  height: 36px;
  justify-content: center;
  letter-spacing: 0.02em;
  width: 36px;
}

.tenant-option-text {
  display: grid;
  flex: 1 1 auto;
  gap: var(--space-0-5);
  min-width: 0;
}

.tenant-option-label {
  color: var(--text);
  font-size: var(--text-base);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tenant-option-meta {
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 400;
}

.tenant-option-icon {
  color: var(--text-muted);
  fill: none;
  flex: 0 0 auto;
  height: 18px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transition: color 120ms ease, transform 120ms ease;
  width: 18px;
}

.tenant-option:not(:disabled):hover .tenant-option-icon {
  color: var(--accent-text);
  transform: translateX(2px);
}

/* A client the current sign-in can't open (SSO required, decision 0031). */
.tenant-option:disabled {
  cursor: not-allowed;
  opacity: 1;
}

.tenant-option:disabled:hover {
  background: transparent;
}

.tenant-option:disabled:not(.is-pending) .tenant-option-avatar {
  filter: grayscale(1);
  opacity: 0.6;
}

.tenant-option:disabled:not(.is-pending) .tenant-option-label {
  color: var(--text-secondary);
}

.tenant-list:has(.is-pending) .tenant-option:not(.is-pending) {
  opacity: 0.5;
}

.tenant-option.is-pending {
  background: var(--accent-soft);
  cursor: wait;
}

.tenant-option.is-pending .tenant-option-icon {
  display: none;
}

.tenant-option.is-pending::after {
  animation: button-spin 700ms linear infinite;
  border: var(--border-width-strong) solid var(--border-strong);
  border-radius: var(--radius-full);
  border-top-color: var(--accent-fill);
  content: "";
  flex: 0 0 auto;
  height: 16px;
  width: 16px;
}

.sign-in-account {
  align-items: center;
  border-top: var(--border-width) solid var(--border);
  color: var(--text-muted);
  display: flex;
  font-size: var(--text-sm);
  gap: var(--space-3);
  justify-content: space-between;
  padding-top: var(--space-4);
}

.sign-in-account-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sign-in-account strong {
  color: var(--text);
  font-weight: 600;
}

button.sign-in-link-button {
  background: transparent;
  border: 0;
  color: var(--accent-text);
  flex: 0 0 auto;
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--space-1) 0;
}

button.sign-in-link-button:hover {
  background: transparent;
  color: var(--accent-text);
  text-decoration: underline;
}

.sign-in-footer {
  color: var(--text-muted);
  display: flex;
  font-size: var(--text-sm);
  gap: var(--space-2);
}

.sign-in-footer a {
  color: var(--text-muted);
}

.sign-in-footer a:hover {
  color: var(--text);
}

/* Status pages and connector consent */
.sign-in-icon {
  align-items: center;
  background: var(--accent-soft);
  border-radius: var(--radius-full);
  color: var(--accent-text);
  display: inline-flex;
  height: 52px;
  justify-content: center;
  justify-self: center;
  margin-bottom: calc(-1 * var(--space-2));
  width: 52px;
}

.sign-in-icon.is-error {
  background: var(--error-bg);
  color: var(--error-text);
}

.sign-in-icon.is-warning {
  background: var(--warn-bg);
  color: var(--warn-text);
}

.sign-in-icon svg,
.sign-in-connection svg,
.sign-in-scopes svg,
.sign-in-redirect svg {
  fill: none;
  flex: 0 0 auto;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.sign-in-icon svg {
  height: 26px;
  width: 26px;
}

.sign-in-connection {
  align-items: center;
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  margin-bottom: calc(-1 * var(--space-1));
}

.sign-in-connection-tile {
  align-items: center;
  background: var(--surface-muted);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  display: inline-flex;
  font-size: var(--text-lg);
  font-weight: 700;
  height: 52px;
  justify-content: center;
  width: 52px;
}

.sign-in-connection-link {
  color: var(--text-muted);
  display: inline-flex;
}

.sign-in-connection-link svg {
  height: 20px;
  width: 20px;
}

.sign-in-consent {
  display: grid;
  gap: var(--space-5);
}

.sign-in-scopes p {
  font-size: var(--text-sm);
  font-weight: 600;
  margin: 0 0 var(--space-3);
}

.sign-in-scopes ul {
  display: grid;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.sign-in-scopes li {
  align-items: flex-start;
  color: var(--text-secondary);
  display: flex;
  font-size: var(--text-sm);
  gap: var(--space-3);
  line-height: 1.45;
}

.sign-in-scopes li svg {
  color: var(--accent-text);
  height: 16px;
  margin-top: var(--space-0-5);
  stroke-width: 2.5;
  width: 16px;
}

.sign-in-redirect {
  align-items: center;
  background: var(--surface-muted);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  display: flex;
  font-size: var(--text-sm);
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-3) var(--space-3);
}

.sign-in-redirect svg {
  color: var(--text-muted);
  height: 16px;
  width: 16px;
}

.sign-in-redirect strong {
  color: var(--text);
  word-break: break-all;
}

.sign-in-choice {
  display: grid;
  gap: var(--space-3);
}

.sign-in-fine-print {
  color: var(--text-muted);
  font-size: var(--text-xs);
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 520px) {
  .sign-in-main {
    gap: var(--space-5);
    padding-top: var(--space-12);
  }

  .sign-in-card {
    border-radius: var(--radius-lg);
    gap: var(--space-5);
    padding: var(--space-7) var(--space-5) var(--space-6);
  }

  .sign-in-heading h1 {
    font-size: var(--text-xl);
  }
}

/* Status toasts: status_toast.js shows each #app-status message at the bottom of the screen. */
.toast-stack {
  align-items: center;
  bottom: max(var(--space-6), calc(env(safe-area-inset-bottom) + var(--space-4)));
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  left: 50%;
  pointer-events: none;
  position: fixed;
  transform: translateX(-50%);
  width: min(28rem, calc(100% - var(--space-8)));
  z-index: 90;
}

.toast {
  align-items: flex-start;
  animation: toast-enter 240ms var(--ease) backwards;
  background: var(--surface-raised);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  color: var(--text);
  display: flex;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  gap: var(--space-3);
  line-height: var(--leading-snug);
  max-width: 100%;
  padding: var(--space-3) var(--space-4);
  pointer-events: auto;
  transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.toast.is-leaving {
  opacity: 0;
  transform: translateY(var(--space-2)) scale(0.98);
}

.toast-icon {
  align-items: center;
  border-radius: var(--radius-full);
  display: inline-flex;
  flex: 0 0 auto;
  height: var(--space-6);
  justify-content: center;
  margin-block: calc(var(--space-0-5) * -1);
  width: var(--space-6);
}

.toast.is-success .toast-icon {
  background: color-mix(in srgb, var(--success-solid) 14%, transparent);
  color: var(--success-solid);
}

.toast.is-error {
  border-color: var(--error-border);
}

.toast.is-error .toast-icon {
  background: color-mix(in srgb, var(--error-solid) 14%, transparent);
  color: var(--error-solid);
}

.toast.is-progress .toast-icon {
  color: var(--accent-text);
}

.toast .button-spinner {
  height: var(--space-4);
  width: var(--space-4);
}

.toast-message {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  padding-top: var(--space-0-5);
}

.toast-message a {
  color: var(--accent-text);
  display: inline-block;
  font-weight: var(--weight-semibold);
  margin-left: var(--space-2);
}

.toast-close {
  align-items: center;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  height: var(--space-6);
  justify-content: center;
  margin: calc(var(--space-0-5) * -1) calc(var(--space-1) * -1) 0 0;
  padding: 0;
  width: var(--space-6);
}

.toast-close:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.toast-close:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 0;
}

@keyframes toast-enter {
  from {
    opacity: 0;
    transform: translateY(var(--space-3)) scale(0.96);
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    animation: none;
  }

  .toast.is-leaving {
    transform: none;
  }
}

/* Notices and findings */
.notice {
  background: var(--warn-bg);
  border: var(--border-width) solid var(--warn-border);
  border-radius: var(--radius);
  color: var(--warn-text);
  line-height: 1.5;
  margin: var(--space-4) auto;
  max-width: 960px;
  padding: var(--space-3) var(--space-4);
}

.notice.is-error {
  background: var(--error-bg);
  border-color: var(--error-border);
  color: var(--error-text);
}

.notice[hidden] {
  display: none;
}

.suggestion-conflict-action {
  margin-left: var(--space-2);
}

.validation-findings {
  margin-left: 0;
  margin-right: 0;
}

.validation-findings h3 {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.03em;
  margin: 0 0 var(--space-2);
  text-transform: uppercase;
}

.validation-findings ul {
  margin: 0;
  padding-left: var(--space-5);
}

.validation-finding {
  margin: var(--space-1) 0;
}

/* Admin lists */
.users-admin-main,
.suggestions-admin-main {
  max-width: 1440px;
}

.users-page-header {
  align-items: flex-end;
  display: flex;
  gap: var(--space-6);
  justify-content: space-between;
}

.users-page-header .lede {
  margin-bottom: 0;
}

.users-page-actions {
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-2);
}

.users-table-wrap {
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-top: var(--space-6);
  overflow-x: auto;
}

.users-table {
  border-collapse: collapse;
  min-width: 1120px;
  width: 100%;
}

.users-table th,
.users-table td {
  border-bottom: var(--border-width) solid var(--border);
  padding: var(--space-3) var(--space-3);
  text-align: left;
  vertical-align: middle;
}

.users-table th {
  background: var(--surface-muted);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.users-table th:first-child,
.users-table td:first-child {
  min-width: 220px;
  padding-left: var(--space-4);
}

.users-table th:last-child,
.users-table td:last-child {
  min-width: 210px;
  padding-right: var(--space-4);
}

.users-table tbody tr:last-child td {
  border-bottom: 0;
}

.users-table tbody tr:hover {
  background: color-mix(in srgb, var(--surface-muted) 65%, transparent);
}

.users-table tr.is-muted {
  color: var(--text-muted);
  opacity: 0.72;
}

.users-table-identity {
  align-items: center;
  display: flex;
  gap: var(--space-2);
  min-width: 0;
}

.user-sso-required {
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-full);
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  margin-top: var(--space-1);
  padding: var(--space-px) var(--space-2);
  width: fit-content;
}

.user-status {
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-full);
  display: inline-flex;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: var(--space-1) var(--space-2);
  text-transform: capitalize;
}

.user-status-active {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success-text);
}

.user-status-invited {
  background: var(--warn-bg);
  border-color: var(--warn-border);
  color: var(--warn-text);
}

.user-status-disabled {
  background: var(--surface-muted);
  color: var(--text-muted);
}

.users-table-wrap > .empty-note {
  padding: var(--space-6);
  text-align: center;
}

.access-admin-tabs[hidden],
.access-admin-tab[hidden],
.access-admin-panel[hidden],
.access-group-form[hidden] {
  display: none;
}

.access-admin-tabs {
  border-bottom: var(--border-width) solid var(--border);
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-7);
}

.access-admin-tab {
  background: transparent;
  border: 0;
  border-bottom: var(--border-width-accent) solid transparent;
  border-radius: 0;
  color: var(--text-secondary);
  font-weight: 650;
  margin-bottom: calc(-1 * var(--space-px));
  padding: var(--space-3) var(--space-4);
}

.access-admin-tab:hover {
  background: var(--surface-muted);
  border-color: transparent;
  color: var(--text);
}

.access-admin-tab[aria-selected="true"],
.access-admin-tab[aria-selected="true"]:hover {
  background: transparent;
  border-bottom-color: var(--accent-fill);
  color: var(--accent-text);
}

.access-admin-tab:focus-visible {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.access-admin-panel {
  margin-top: var(--space-6);
}

.access-group-form {
  background: var(--surface-muted);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  margin-top: var(--space-5);
  padding: var(--space-5);
}

.access-group-form-fields {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
}

.access-group-form-fields label {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.access-group-form-fields input,
.access-group-form-fields select {
  max-width: none;
  min-width: 0;
  width: 100%;
}

.access-group-members {
  grid-column: 1 / -1;
}

.access-group-members select {
  min-height: 150px;
}

.access-group-form .field-hint {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 400;
}

.access-group-form > .actions {
  justify-content: flex-end;
  width: 100%;
}

/* A seat caps what a grant gives (decision 0034); the note names members a Reader seat holds back. */
.access-seat-note {
  color: var(--text-muted);
  display: block;
  font-size: var(--text-xs);
  font-weight: 400;
}

.access-policy-group-actions {
  margin-top: var(--space-3);
}

.access-inline-group {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.access-inline-group label {
  display: grid;
  gap: var(--space-1);
}

.access-inline-group > .actions {
  justify-content: flex-end;
}

.access-group-list {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.access-group-list > .empty-note {
  background: var(--surface-muted);
  border: var(--border-width) dashed var(--border-strong);
  border-radius: var(--radius);
  padding: var(--space-7) var(--space-4);
  text-align: center;
}

.access-policy-table-wrap {
  overflow-x: hidden;
}

.access-policy-table {
  min-width: 0;
  table-layout: fixed;
}

.access-policy-table th:first-child,
.access-policy-table td:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
  width: 40%;
}

.access-policy-table th:last-child,
.access-policy-table td:last-child {
  min-width: 0;
}

.access-policy-table th:not(:first-child),
.access-policy-table td:not(:first-child) {
  text-align: center;
}

.access-policy-table th:not(:first-child) {
  white-space: normal;
}

@media (max-width: 720px) {
  .access-admin-panel {
    padding: var(--space-5);
  }

  .access-admin-tab {
    flex: 1 1 0;
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }

  .access-group-form-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .access-group-members {
    grid-column: auto;
  }

}

.taxonomy-tree-row.is-dragging {
  opacity: 0.55;
}

.taxonomy-tree-row.is-drop-before::before,
.taxonomy-tree-row.is-drop-after::after {
  background: var(--accent-fill);
  border-radius: var(--radius-full);
  content: "";
  height: 3px;
  left: 12px;
  position: absolute;
  right: 12px;
}

.taxonomy-tree-row.is-drop-after::after {
  bottom: -7px;
}

.taxonomy-tree-row.is-drop-before::before {
  top: -2px;
}

.admin-drag-handle {
  align-items: center;
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
  cursor: grab;
  display: inline-flex;
  flex: 0 0 auto;
  height: 30px;
  justify-content: center;
  padding: 0;
  touch-action: none;
  user-select: none;
  width: 30px;
}

.admin-drag-handle::before {
  background-image: radial-gradient(circle, currentColor 1.4px, transparent 1.5px);
  background-size: 6px 6px;
  content: "";
  height: 18px;
  opacity: 0.7;
  width: 14px;
}

.admin-drag-handle:hover,
.admin-drag-handle:focus-visible {
  background: var(--surface-muted);
  border-color: var(--border);
  color: var(--text-secondary);
}

.admin-drag-handle:active {
  cursor: grabbing;
}

.admin-drag-handle-spacer {
  flex: 0 0 30px;
  width: 30px;
}

.admin-detail {
  background: var(--surface-muted);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  margin: var(--space-1) 0 var(--space-1) var(--space-5);
  padding: var(--space-4) var(--space-4);
  width: 100%;
}

.taxonomy-tree-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-5) 0 var(--space-3);
}

.taxonomy-tree-toolbar .primary-action {
  margin-left: auto;
}

.taxonomy-create-panel {
  background: var(--surface);
  border: var(--border-width) solid var(--accent-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-3);
  padding: var(--space-4);
}

.taxonomy-create-panel h2 {
  font-size: var(--text-base);
  margin: 0;
}

.taxonomy-tree {
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-top: var(--space-3);
  min-height: 72px;
  padding: var(--space-2) 0;
}

.taxonomy-tree-node {
  position: relative;
}

.taxonomy-tree-row {
  align-items: center;
  display: flex;
  gap: var(--space-2);
  min-height: 46px;
  padding: var(--space-2) var(--space-3);
  position: relative;
}

.taxonomy-tree-row:hover,
.taxonomy-tree-row:focus-within {
  background: var(--surface-muted);
}

.taxonomy-tree-center-row {
  font-weight: 650;
}

.taxonomy-tree-section-row {
  min-height: 43px;
}

.taxonomy-tree-document-row {
  min-height: 40px;
}

.taxonomy-tree-row.is-document-drop-target {
  background: var(--accent-soft);
  box-shadow: var(--indicator-ring);
}

.taxonomy-tree-children {
  margin-left: var(--space-6);
  padding-left: var(--space-5);
  position: relative;
}

.taxonomy-tree-children::before {
  background: var(--border);
  bottom: 6px;
  content: "";
  left: 7px;
  position: absolute;
  top: 0;
  width: 1px;
}

.taxonomy-tree-toggle,
.taxonomy-tree-toggle-spacer {
  align-items: center;
  display: inline-flex;
  flex: 0 0 26px;
  height: 26px;
  justify-content: center;
  width: 26px;
}

.taxonomy-tree-toggle {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
  padding: 0;
}

.taxonomy-tree-toggle:hover {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent-text);
}

.taxonomy-node-icon {
  display: inline-block;
  flex: 0 0 18px;
  height: 16px;
  position: relative;
  width: 18px;
}

.taxonomy-node-icon.is-center,
.taxonomy-node-icon.is-section {
  background: var(--accent-soft);
  border: var(--border-width-strong) solid var(--accent-fill);
  border-radius: var(--radius-xs);
  height: 13px;
  margin-top: var(--space-1);
}

.taxonomy-node-icon.is-center::before,
.taxonomy-node-icon.is-section::before {
  background: var(--accent-soft);
  border: var(--border-width-strong) solid var(--accent-fill);
  border-bottom: 0;
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  content: "";
  height: 4px;
  left: 1px;
  position: absolute;
  top: -5px;
  width: 8px;
}

.taxonomy-node-icon.is-section {
  background: var(--surface);
  border-color: var(--text-muted);
}

.taxonomy-node-icon.is-section::before {
  background: var(--surface);
  border-color: var(--text-muted);
}

.taxonomy-node-icon.is-document {
  border: var(--border-width-strong) solid var(--text-muted);
  border-radius: var(--radius-xs);
  height: 17px;
  width: 14px;
}

.taxonomy-node-icon.is-document::after {
  border-bottom: var(--border-width-strong) solid var(--text-muted);
  content: "";
  left: 3px;
  position: absolute;
  right: 3px;
  top: 5px;
}

.taxonomy-node-label {
  flex: 1 1 220px;
  font-weight: 600;
  min-width: 80px;
  overflow-wrap: anywhere;
  text-align: left;
}

.taxonomy-node-label-button {
  background: transparent;
  border: 0;
  color: var(--text);
  justify-content: flex-start;
  padding: var(--space-1) var(--space-0-5);
}

.taxonomy-node-label-button:hover {
  background: transparent;
  color: var(--accent-text);
}

.taxonomy-node-meta,
.taxonomy-node-count {
  color: var(--text-muted);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.taxonomy-node-meta {
  text-transform: capitalize;
}

.taxonomy-status-badge {
  background: var(--surface-muted);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 650;
  line-height: 1;
  padding: var(--space-1) var(--space-2);
  text-transform: capitalize;
  white-space: nowrap;
}

.taxonomy-status-badge.is-hidden {
  background: var(--warn-bg);
  border-color: var(--warn-border);
  color: var(--warn-text);
}

.taxonomy-status-badge.is-menu {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent-text);
}

.taxonomy-access-badge {
  align-items: center;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-full);
  display: inline-flex;
  font-size: var(--text-xs);
  font-weight: 650;
  line-height: 1;
  padding: var(--space-1) var(--space-2);
  white-space: nowrap;
}

.taxonomy-access-badge::before {
  content: "●";
  font-size: var(--text-xs);
  margin-right: var(--space-1);
}

.taxonomy-access-badge.is-inherited {
  background: var(--surface-muted);
  border-color: var(--border);
  color: var(--text-muted);
}

.taxonomy-access-badge.is-custom {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent-text);
}

.taxonomy-access-badge.is-admins-only {
  background: var(--warn-bg);
  border-color: var(--warn-border);
  color: var(--warn-text);
}

.taxonomy-access-button {
  background: transparent;
  border-color: var(--border);
  color: var(--text-secondary);
  flex: 0 0 auto;
  font-size: var(--text-xs);
  min-height: 30px;
  padding: var(--space-1) var(--space-2);
}

.taxonomy-access-button:hover {
  border-color: var(--accent-border);
  color: var(--accent-text);
}

.taxonomy-node-menu {
  flex: 0 0 auto;
  position: relative;
}

.taxonomy-node-menu > summary {
  align-items: center;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  font-weight: 800;
  height: 30px;
  justify-content: center;
  list-style: none;
  width: 34px;
}

.taxonomy-node-menu > summary::-webkit-details-marker {
  display: none;
}

.taxonomy-node-menu > summary:hover,
.taxonomy-node-menu[open] > summary {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

.taxonomy-node-menu-content {
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: var(--space-0-5);
  min-width: 220px;
  padding: var(--space-2);
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
}

.taxonomy-node-menu-content :is(button, a) {
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text);
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  padding: var(--space-2) var(--space-2);
  text-align: left;
  text-decoration: none;
  width: 100%;
}

.taxonomy-node-menu-content :is(button, a):hover {
  background: var(--surface-muted);
  color: var(--accent-text);
}

.taxonomy-node-menu-content button.is-danger {
  color: var(--error-text);
}

.taxonomy-tree-inline-detail {
  background: var(--surface-muted);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  margin: var(--space-0-5) var(--space-3) var(--space-2) var(--space-22);
  padding: var(--space-4);
}

.taxonomy-tree-inline-detail.is-create {
  margin-left: var(--space-11);
}

.taxonomy-inline-form {
  margin-top: 0;
}

.taxonomy-move-form {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.taxonomy-move-form label {
  display: grid;
  flex: 1 1 260px;
  gap: var(--space-1);
}

.taxonomy-move-form label > span {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
}

.taxonomy-tree-empty {
  margin: 0;
  padding: var(--space-3) var(--space-4);
}

@media (max-width: 720px) {
  .taxonomy-tree-toolbar .primary-action {
    margin-left: 0;
  }

  .taxonomy-tree-row {
    gap: var(--space-1);
    padding-left: var(--space-1);
    padding-right: var(--space-1);
  }

  .taxonomy-tree-children {
    margin-left: var(--space-3);
    padding-left: var(--space-3);
  }

  .taxonomy-node-count,
  .taxonomy-node-meta,
  .taxonomy-status-badge.is-menu {
    display: none;
  }

  .taxonomy-tree-inline-detail {
    margin-left: var(--space-5);
  }
}

.admin-form {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.admin-form label {
  display: grid;
  gap: var(--space-1);
}

.admin-form label > span,
.admin-form-stacked label > span {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
}

.admin-form-stacked {
  align-items: stretch;
  flex-direction: column;
}

.feedback-layout {
  margin: var(--space-6) auto;
  max-width: 760px;
  width: 100%;
}

.feedback-card:hover {
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
  transform: none;
}

.feedback-form textarea {
  min-height: 140px;
}

.feedback-form .checkbox-label {
  align-items: center;
  display: flex;
  gap: var(--space-2);
}

.feedback-form .checkbox-label > span {
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 500;
}

.feedback-form button[type="submit"] {
  align-self: flex-start;
}

.feedback-dialog {
  background: var(--surface);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  height: min(760px, calc(100vh - 32px));
  max-height: calc(100vh - 32px);
  max-width: calc(100vw - 32px);
  overflow: hidden;
  padding: 0;
  transform: translateY(0) scale(1);
  transition: opacity 180ms ease, transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
  width: min(760px, calc(100vw - 32px));
}

.feedback-dialog::backdrop {
  background: var(--overlay-strong);
  transition: background 180ms ease;
}

.feedback-dialog.is-closing {
  opacity: 0;
  transform: translateY(10px) scale(0.98);
}

.feedback-dialog.is-closing::backdrop {
  background: var(--overlay-clear);
}

.feedback-dialog-header {
  align-items: center;
  background: var(--surface-muted);
  border-bottom: var(--border-width) solid var(--border);
  display: flex;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
}

.feedback-dialog-title {
  font-size: var(--text-md);
  margin: 0;
}

.feedback-dialog-close {
  background: transparent;
  color: var(--text-secondary);
  padding: var(--space-2) var(--space-3);
}

.feedback-dialog-frame {
  border: 0;
  display: block;
  height: calc(100% - 54px);
  width: 100%;
}

.feedback-submission-status {
  align-items: center;
  background: var(--surface);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  color: var(--text);
  display: flex;
  font-size: var(--text-sm);
  font-weight: 650;
  gap: var(--space-3);
  left: 50%;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 1200;
}

.feedback-submission-status[hidden] {
  display: none;
}

.feedback-submission-status-icon {
  align-items: center;
  border-radius: 50%;
  display: inline-flex;
  flex: 0 0 22px;
  height: 22px;
  justify-content: center;
  width: 22px;
}

.feedback-submission-status.is-loading .feedback-submission-status-icon {
  animation: feedback-status-spin 700ms linear infinite;
  border: var(--border-width-strong) solid var(--accent-border);
  border-top-color: var(--accent-fill-hover);
}

.feedback-submission-status.is-success .feedback-submission-status-icon {
  animation: feedback-status-success 320ms cubic-bezier(0.2, 0.9, 0.3, 1.35);
  background: var(--secondary);
  color: var(--secondary-text);
  font-size: var(--text-base);
  font-weight: 800;
}

.feedback-submission-status.is-leaving {
  opacity: 0;
  transform: translate(-50%, calc(-50% + 8px)) scale(0.98);
}

@keyframes feedback-status-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes feedback-status-success {
  from {
    opacity: 0;
    transform: scale(0.55);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .feedback-dialog,
  .feedback-dialog::backdrop,
  .feedback-submission-status,
  .feedback-submission-status-icon {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}

.feedback-embedded-body,
.feedback-embedded-shell {
  background: var(--surface);
  min-height: 100%;
}

.feedback-embedded-layout {
  margin: 0;
  max-width: none;
  padding: var(--space-5);
}

.feedback-embedded-layout .feedback-card {
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* Markdown-serializing editor */
.playbook-editor {
  background: var(--surface);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius);
  display: grid;
  gap: 0;
  overflow: hidden;
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}

/* Typing in the visual surface or the Markdown source rings the whole editor frame. */
.playbook-editor:has(.ProseMirror:focus, .editor-source:focus) {
  border-color: var(--focus-ring);
  box-shadow: var(--shadow-focus);
}

.playbook-editor:has(.ProseMirror:focus-visible, .editor-source:focus-visible) {
  border-color: var(--focus-ring);
  box-shadow: var(--ring-focus);
}

.playbook-editor [hidden],
.editor-dialog [hidden] {
  display: none !important;
}

/* Header: the formatting toolbar, then the Visual / Markdown switch at the far end. */
.editor-header {
  align-items: flex-start;
  background: var(--surface);
  border-bottom: var(--border-width) solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
  min-width: 0;
}

/* 32px targets, 4px apart inside a group; groups sit 16px apart around a quiet hairline. */
.editor-toolbar {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  min-width: 0;
  padding: var(--space-1) var(--space-2);
}

.editor-toolbar-group {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.editor-toolbar-group + .editor-toolbar-group::before {
  align-self: center;
  background: var(--border);
  content: "";
  height: var(--space-5);
  margin-right: var(--space-1);
  width: var(--border-width);
}

/* Labelled menu buttons: Text style, and Insert for the commands whose icons alone would be ambiguous. */
.editor-toolbar .editor-menu-button {
  color: var(--text);
  gap: var(--space-1);
  padding: 0 var(--space-2);
}

.editor-toolbar .editor-menu-button .icon {
  color: var(--text-secondary);
}

/* Wide enough for "Heading 4", so the toolbar doesn't shift as the caret moves between blocks. */
.editor-toolbar .editor-style-button {
  justify-content: space-between;
  min-width: 7.5rem;
  padding-left: var(--space-3);
}

.editor-toolbar .editor-menu-button .editor-menu-chevron {
  transition: transform var(--duration-fast) var(--ease);
}

.editor-toolbar .editor-menu-button[aria-expanded="true"] {
  background: var(--surface-hover);
  color: var(--text);
}

.editor-toolbar .editor-menu-button[aria-expanded="true"] .editor-menu-chevron {
  transform: rotate(180deg);
}

.editor-menu {
  background: var(--surface-raised);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: var(--space-0-5);
  min-width: 220px;
  padding: var(--space-1);
  position: fixed;
  z-index: 30;
}

.editor-menu .editor-menu-item {
  background: transparent;
  border-color: transparent;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-weight: var(--weight-regular);
  gap: var(--space-3);
  justify-content: flex-start;
  min-height: var(--space-9);
  padding: 0 var(--space-3);
  text-align: left;
}

.editor-menu .editor-menu-item .icon {
  color: var(--text-secondary);
}

.editor-menu .editor-menu-item:hover,
.editor-menu .editor-menu-item:focus-visible {
  background: var(--surface-hover);
  border-color: transparent;
  color: var(--text);
}

.editor-menu .editor-menu-item:focus-visible {
  outline-offset: calc(-1 * var(--focus-ring-width));
}

.editor-menu .editor-menu-item:disabled:hover {
  background: transparent;
  border-color: transparent;
}

.editor-menu-item-label {
  flex: 1 1 auto;
}

/* Each text style previews itself at the size and weight it gives the document. */
.editor-menu .editor-menu-item:has(.editor-style-preview) {
  min-height: var(--space-10);
}

.editor-style-preview {
  color: var(--text);
  line-height: var(--leading-tight);
}

.editor-style-preview-p {
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
}

.editor-style-preview-h2 {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}

.editor-style-preview-h3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.editor-style-preview-h4 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

.editor-style-preview-quote {
  border-left: var(--border-width-accent) solid var(--border-strong);
  color: var(--text-secondary);
  font-size: var(--text-base);
  font-style: italic;
  padding-left: var(--space-2);
}

.editor-style-preview-code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.editor-menu-item-hint {
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.editor-menu .editor-menu-item-check {
  color: var(--accent-text);
  visibility: hidden;
}

.editor-menu .editor-menu-item[aria-checked="true"] .editor-menu-item-check {
  visibility: visible;
}

.editor-toolbar-button,
.editor-dialog-tabs button {
  font-size: var(--text-sm);
  min-height: var(--space-8);
  padding: var(--space-1) var(--space-2);
}

:is(.editor-toolbar, .editor-table-group) .editor-toolbar-button {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
  gap: var(--space-1);
}

:is(.editor-toolbar, .editor-table-group) .editor-icon-button {
  height: var(--control-height);
  min-height: var(--control-height);
  padding: 0;
  width: var(--control-height);
}

/* The labelled menu buttons match the 36px icon buttons beside them. */
.editor-toolbar .editor-menu-button {
  min-height: var(--control-height);
}

/* Code and Link carry their names beside the icon. */
.editor-toolbar .editor-labelled-button {
  gap: var(--space-1);
  min-height: var(--control-height);
  padding: 0 var(--space-2) 0 var(--space-1);
}

:is(.editor-toolbar, .editor-table-group) .editor-toolbar-button:hover {
  background: var(--surface-hover);
  border-color: transparent;
  color: var(--text);
}

:is(.editor-toolbar, .editor-table-group) .editor-toolbar-button:active {
  background: var(--surface-muted);
  box-shadow: var(--shadow-pressed);
}

/* Pressed toggles (Bold inside bold text, the current heading level, ...) use the accent tint. */
:is(.editor-toolbar, .editor-table-group) .editor-toolbar-button.is-active,
:is(.editor-toolbar, .editor-table-group) .editor-toolbar-button[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent-text);
}

:is(.editor-toolbar, .editor-table-group) .editor-toolbar-button:disabled,
:is(.editor-toolbar, .editor-table-group) .editor-toolbar-button:disabled:hover {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}

/* Table commands appear only while the caret is in a table: a labelled panel on a row of its own. */
.editor-table-group {
  background: var(--surface-muted);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-sm);
  align-items: center;
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0 var(--space-2) var(--space-2);
  padding: var(--space-0-5) var(--space-1) var(--space-0-5) var(--space-3);
}

.editor-table-group-label {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  margin-right: var(--space-2);
  text-transform: uppercase;
}

:is(.editor-toolbar, .editor-table-group) .editor-text-button {
  color: var(--text);
  padding: var(--space-1) var(--space-2);
}

:is(.editor-toolbar, .editor-table-group) .editor-text-button .icon {
  color: var(--text-secondary);
}

:is(.editor-toolbar, .editor-table-group) .editor-danger-button {
  margin-left: auto;
}

:is(.editor-toolbar, .editor-table-group) .editor-danger-button:hover,
:is(.editor-toolbar, .editor-table-group) .editor-danger-button:hover .icon {
  background: var(--error-bg);
  color: var(--error-text);
}

.editor-dialog-tabs button.is-active {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent-text);
}

/* Visual / Markdown: the shared segmented control (see "Segmented controls" below), at the header's far end. */
.editor-modebar {
  flex: none;
  margin: var(--space-1) var(--space-2) var(--space-1) auto;
}

.editor-surface {
  min-height: 300px;
}

/* The visual surface reads like the published page: the same type size, line-height and measure. */
.editor-surface .ProseMirror {
  color: var(--text-body);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  min-height: 300px;
  outline: none;
  /* Page margins as on a printed page; the text between them keeps the reading measure. */
  padding: var(--space-10) calc(var(--space-22) + var(--space-8)) var(--space-12);
}

/* Running text keeps the reading view's measure; tables and code blocks may use the full width. */
.editor-surface .ProseMirror > :is(p, ul, ol, blockquote, h1, h2, h3, h4, h5, h6) {
  max-width: var(--measure);
}

.editor-surface .ProseMirror a {
  color: var(--accent-text);
  /* Invisible padding grows each link's hit area to 24px without changing the line spacing. */
  padding-block: var(--space-1);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 3px;
}

/* The Markdown source fills the same frame, under the same header. */
.playbook-editor .editor-source,
.playbook-editor .editor-source:hover,
.playbook-editor .editor-source:focus {
  background: transparent;
  border: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: none;
  outline: none;
  padding: var(--space-5) var(--space-6);
  resize: vertical;
}

.editor-surface .ProseMirror > *:last-child {
  margin-bottom: 0;
}

.editor-surface .ProseMirror img {
  display: block;
  height: auto;
  margin: var(--space-4) 0;
  max-width: 100%;
}

.editor-surface .ProseMirror table {
  border-collapse: collapse;
  margin: 0 0 var(--space-4);
  width: 100%;
}

.editor-surface .ProseMirror th,
.editor-surface .ProseMirror td {
  border: var(--border-width) solid var(--border);
  min-width: 80px;
  padding: var(--space-2) var(--space-3);
  vertical-align: top;
}

.editor-surface .ProseMirror th {
  background: var(--surface-muted);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 650;
  text-align: left;
}

.editor-surface .ProseMirror :is(th, td) > p {
  margin: 0;
}

/* Cells picked with a drag or shift-click. */
.editor-surface .ProseMirror .selectedCell {
  background: var(--accent-soft);
}

.editor-surface .ProseMirror .tableWrapper {
  margin: 0 0 var(--space-4);
  overflow-x: auto;
}

.editor-lossy-notice,
.editor-upload-notice {
  align-items: center;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  display: flex;
  justify-content: space-between;
  margin: 0;
  max-width: none;
}

.editor-dialog-backdrop {
  align-items: center;
  background: var(--overlay);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: var(--space-5);
  position: fixed;
  z-index: 100;
}

.editor-dialog {
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: var(--space-3);
  max-width: 520px;
  padding: var(--space-5);
  width: min(520px, 100%);
}

.editor-dialog h2 {
  font-size: var(--text-md);
  margin: 0;
}

.editor-dialog label {
  display: grid;
  gap: var(--space-1);
}

.editor-dialog label > span {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
}

.editor-dialog-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.editor-dialog-notice {
  color: var(--error-text);
  margin: 0;
}

.editor-document-results {
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-sm);
  display: grid;
  gap: 0;
  max-height: 220px;
  overflow: auto;
}

.editor-document-result {
  align-items: start;
  background: transparent;
  border: 0;
  border-bottom: var(--border-width) solid var(--border);
  border-radius: 0;
  display: grid;
  justify-items: start;
  padding: var(--space-2) var(--space-3);
  text-align: left;
}

.editor-document-result:last-child {
  border-bottom: 0;
}

.editor-document-result-title {
  font-weight: 600;
}

.editor-document-result-path {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.color-control {
  align-items: center;
  display: flex;
  gap: var(--space-3);
}

.color-control input[type="color"] {
  height: 40px;
  padding: var(--space-1);
  width: 48px;
}

/* Suggestion review */
html.has-modal {
  overflow: hidden;
}

.suggestion-panel {
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-top: var(--space-5);
  overflow: hidden;
}

.suggestion-toolbar {
  align-items: center;
  border-bottom: var(--border-width) solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

.suggestion-status-filters {
  background: var(--surface-muted);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-full);
  display: inline-flex;
  flex: 0 0 auto;
  gap: var(--space-0-5);
  /* On narrow screens the statuses scroll inside the pill instead of being clipped by the panel. */
  max-width: 100%;
  overflow-x: auto;
  padding: var(--space-1);
  scrollbar-width: none;
}

.suggestion-status-filter {
  background: transparent;
  border: 0;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  flex: 0 0 auto;
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--space-1) var(--space-4);
  white-space: nowrap;
}

.suggestion-status-filter:hover {
  background: color-mix(in srgb, var(--border-strong) 45%, transparent);
  border: 0;
  color: var(--text);
}

.suggestion-status-filter.is-active,
.suggestion-status-filter.is-active:hover {
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--accent-text);
}

.suggestion-facets {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-left: auto;
}

.suggestion-filter {
  display: grid;
}

.suggestion-filter > span {
  block-size: 1px;
  clip-path: inset(50%);
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

.suggestion-filter select {
  font-size: var(--text-sm);
  min-width: 130px;
  padding-bottom: var(--space-2);
  padding-top: var(--space-2);
}

.suggestion-clear-filters {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.suggestion-table-region .empty-note {
  margin: 0;
  padding: var(--space-8) var(--space-4);
  text-align: center;
}

.suggestion-filter-summary {
  border-bottom: var(--border-width) solid var(--border);
  font-size: var(--text-sm);
  margin: 0;
  padding: var(--space-2) var(--space-4);
}

.suggestions-table-wrap {
  overflow-x: auto;
}

.suggestions-table {
  border-collapse: collapse;
  min-width: 1080px;
  width: 100%;
}

.suggestions-table th,
.suggestions-table td {
  border-bottom: var(--border-width) solid var(--border);
  padding: var(--space-3) var(--space-3);
  text-align: left;
  vertical-align: middle;
}

.suggestions-table th {
  background: var(--surface-muted);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.suggestions-table tbody tr:last-child td {
  border-bottom: 0;
}

.suggestions-table td > time {
  white-space: nowrap;
}

.suggestions-table tbody tr:hover {
  background: color-mix(in srgb, var(--surface-muted) 68%, transparent);
}

.suggestion-sort-button {
  align-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  display: inline-flex;
  font: inherit;
  gap: var(--space-1);
  letter-spacing: inherit;
  padding: var(--space-0-5) 0;
  text-transform: inherit;
}

.suggestion-sort-button:hover {
  background: transparent;
  border: 0;
  color: var(--text);
}

.suggestion-sort-indicator {
  color: var(--text-muted);
  display: inline-flex;
  opacity: 0.7;
  transition: opacity var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}

.suggestion-sort-button:hover .suggestion-sort-indicator {
  color: var(--text);
  opacity: 1;
}

.suggestion-sort-indicator.is-active,
.suggestion-sort-button:hover .suggestion-sort-indicator.is-active {
  color: var(--accent-text);
  opacity: 1;
}

.suggestion-selection-column {
  padding-left: var(--space-4) !important;
  padding-right: var(--space-1) !important;
  width: 58px;
}

.suggestion-action-column {
  width: 92px;
}

.suggestion-review-button {
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-3);
}

.suggestion-review-button:hover {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent-text);
}

.suggestion-row-actions {
  display: flex;
  gap: var(--space-2);
  white-space: nowrap;
}

.suggestion-edit-link {
  align-items: center;
  background: var(--surface);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  display: inline-flex;
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-3);
  text-decoration: none;
}

.suggestion-edit-link:hover {
  background: var(--surface-muted);
  text-decoration: none;
}

.suggestion-bulk-controls {
  align-items: center;
  display: flex;
  gap: var(--space-0-5);
}

.suggestion-bulk-menu {
  position: relative;
}

.suggestion-bulk-toggle {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
  line-height: 1;
  min-height: var(--control-height-sm);
  min-width: var(--control-height-sm);
  padding: 0;
}

.suggestion-bulk-toggle:hover {
  background: var(--surface-hover);
  border-color: var(--border);
  color: var(--text);
}

.suggestion-bulk-popup {
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: var(--space-0-5);
  left: 0;
  letter-spacing: normal;
  min-width: 200px;
  padding: var(--space-2);
  position: absolute;
  text-transform: none;
  top: calc(100% + 6px);
  z-index: 60;
}

.suggestion-bulk-popup[hidden] {
  display: none;
}

.suggestion-bulk-item {
  background: transparent;
  border-color: transparent;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 500;
  justify-content: flex-start;
  padding: var(--space-2) var(--space-3);
  text-align: left;
  width: 100%;
}

.suggestion-bulk-item:hover:not(:disabled) {
  background: var(--surface-muted);
  color: var(--text);
}

.suggestion-table-title,
.suggestion-table-submitter {
  display: block;
}

.suggestion-table-title {
  min-width: 180px;
}

.suggestion-table-submitter {
  margin-bottom: var(--space-1);
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suggestion-table-placement {
  display: block;
  max-width: 240px;
}

.suggestion-type-badge,
.suggestion-status-badge {
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-full);
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 650;
  padding: var(--space-1) var(--space-2);
  white-space: nowrap;
}

.suggestion-type-badge {
  align-items: center;
  display: inline-flex;
  gap: var(--space-1);
}

.suggestion-type-new_document {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent-text);
}

.suggestion-type-delete_document,
.suggestion-status-badge.is-rejected {
  background: var(--error-bg);
  border-color: var(--error-border);
  color: var(--error-text);
}

.suggestion-status-badge {
  text-transform: capitalize;
}

.suggestion-status-badge.is-approved {
  background: color-mix(in srgb, var(--secondary) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--secondary) 45%, var(--border));
  color: var(--text);
}

.suggestion-status-badge.is-pending {
  background: var(--warn-bg);
  border-color: var(--warn-border);
  color: var(--warn-text);
}

.suggestion-status-badge.is-hold {
  background: var(--info-bg);
  border-color: var(--info-border);
  color: var(--info-text);
}

.suggestion-status-badge.is-withdrawn {
  background: var(--surface-muted);
  color: var(--text-secondary);
}

.suggestion-status-badge.is-withdrawn {
  border-style: dashed;
}

.suggestion-view-switch {
  border-bottom: var(--border-width) solid var(--border);
  display: flex;
  gap: var(--space-1);
  margin: var(--space-1) 0 var(--space-4);
}

.suggestion-view-link {
  border-bottom: var(--border-width-strong) solid transparent;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: calc(-1 * var(--space-px));
  padding: var(--space-2) var(--space-3);
  text-decoration: none;
}

.suggestion-view-link:hover {
  color: var(--text);
  text-decoration: none;
}

.suggestion-view-link.is-active {
  border-bottom-color: var(--accent-fill);
  color: var(--accent-text);
}

.submission-status-note {
  display: block;
  margin-top: var(--space-1);
}

.submission-detail .suggestion-review-preview {
  height: auto;
  max-height: 520px;
  min-height: 0;
}

.suggestion-review-dialog {
  background: var(--surface);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  color: var(--text);
  height: min(1200px, calc(100dvh - 40px));
  max-height: calc(100dvh - 40px);
  max-width: none;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  transform: translateY(18px) scale(0.94);
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  width: min(1320px, calc(100vw - 40px));
}

.suggestion-review-dialog[open] {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.suggestion-review-dialog::backdrop {
  backdrop-filter: blur(1px);
  background: var(--overlay-clear);
  transition: background 180ms ease;
}

.suggestion-review-dialog.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.suggestion-review-dialog.is-open::backdrop {
  background: var(--overlay);
}

.suggestion-review-dialog.is-closing {
  opacity: 0;
  transform: translateY(10px) scale(0.97);
}

.suggestion-review-dialog.is-closing::backdrop {
  background: var(--overlay-clear);
}

.suggestion-review-dialog-header {
  align-items: flex-start;
  background: var(--surface);
  border-bottom: var(--border-width) solid var(--border);
  display: flex;
  gap: var(--space-5);
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
}

.suggestion-review-dialog-header .eyebrow,
.suggestion-review-dialog-header .muted {
  margin: 0;
}

.suggestion-review-dialog-header .eyebrow {
  color: var(--accent-text);
}

.suggestion-review-dialog-header .muted {
  font-size: var(--text-sm);
}

/* Type · date · submitter · version, on one quiet line under the title. */
/* The type as a chip, then labelled facts split by thin rules: quiet labels, slightly stronger values. */
.suggestion-review-dialog-meta {
  align-items: center;
  color: var(--text-secondary);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-1);
}

.suggestion-meta-type {
  background: var(--surface-muted);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: 0 var(--space-2);
}

.suggestion-meta-item {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.suggestion-meta-item + .suggestion-meta-item {
  border-left: var(--border-width) solid var(--border-strong);
  padding-left: var(--space-3);
}

.suggestion-meta-label {
  color: var(--text-muted);
}

.suggestion-meta-value {
  color: var(--text-secondary);
  font-weight: var(--weight-medium);
}

.suggestion-meta-value.is-error {
  color: var(--error-text);
}

.suggestion-review-dialog-title {
  font-size: var(--text-xl);
  margin: var(--space-0-5) 0 var(--space-0-5);
}

.suggestion-review-dialog-close {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
  flex: 0 0 auto;
  height: var(--control-height);
  line-height: 1;
  padding: 0;
  width: var(--control-height);
}

.suggestion-review-dialog-status {
  border-radius: 0;
  border-width: 0 0 var(--border-width);
  margin: 0;
  max-width: none;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

.suggestion-review-scroll > .notice {
  margin: var(--space-4) 0 0;
  max-width: none;
}

/* The dialog is header / status / body; the body holds a panel whose content scrolls above a pinned action bar. */
.suggestion-review-dialog-body {
  display: flex;
  flex-direction: column;
  /* The last, flexible row even while the status line above it is hidden. */
  grid-row: 3;
  min-height: 0;
  overflow: auto;
}

.suggestion-review-dialog .admin-detail {
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
}

.suggestion-review-panel {
  display: grid;
  flex: 1 1 auto;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
}

.suggestion-review-scroll {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--space-5) var(--space-6);
}

.suggestion-review-scroll > * {
  flex: none;
}

.suggestion-review-loading,
.suggestion-review-load-error {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-3);
  justify-content: center;
  min-height: 360px;
  padding: var(--space-6);
  text-align: center;
}

.suggestion-review-loading-spinner {
  border-width: var(--border-width-accent);
  color: var(--accent-text);
  height: 28px;
  width: 28px;
}

.suggestion-review-actions {
  align-items: center;
  background: var(--surface);
  border-top: var(--border-width) solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
  margin: 0;
  padding: var(--space-3) var(--space-6);
}

/* Secondary actions sit left of the primary one, which always ends the row. */
.suggestion-review-actions .primary-action {
  order: 0;
}

.suggestion-review-back {
  margin-right: auto;
}

/* What approving does, said quietly beside the buttons. */
.suggestion-review-outcome {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin: 0 var(--space-2) 0 0;
}

@media (max-width: 760px) {
  .suggestion-facets {
    align-items: stretch;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-left: 0;
    width: 100%;
  }

  .suggestion-filter select {
    min-width: 0;
    width: 100%;
  }

  .suggestion-review-dialog {
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    width: calc(100vw - 16px);
  }

  .suggestion-review-dialog-header,
  .suggestion-review-scroll,
  .suggestion-review-actions {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .suggestion-review-dialog .suggestion-review-fields {
    grid-template-columns: 1fr;
  }

  .suggestion-review-dialog .suggestion-review-editor,
  .suggestion-review-form .suggestion-review-preview {
    flex-basis: 360px;
    min-height: 360px;
  }
}

.suggestion-meta {
  color: var(--text-secondary);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--text-sm);
  gap: var(--space-1) var(--space-5);
  margin: 0 0 var(--space-4);
}

.suggestion-meta > .muted,
.suggestion-meta > .is-error {
  font-size: var(--text-sm);
  margin: 0;
}

.suggestion-meta-line {
  align-items: center;
  color: var(--text-secondary);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--text-sm);
  gap: var(--space-2);
}

.suggestion-channel-chip {
  background: var(--surface-muted);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-0-5) var(--space-2);
}

.suggestion-pagination {
  align-items: center;
  border-top: var(--border-width) solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: flex-end;
  padding: var(--space-3) var(--space-4);
}

.suggestion-pagination .muted {
  font-size: var(--text-sm);
  margin-right: auto;
}

.suggestion-pagination button {
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-3);
}

.suggestion-review-rationale {
  align-items: center;
  background: var(--surface-muted);
  border-left: var(--border-width-accent) solid var(--accent-border);
  border-radius: var(--radius-sm);
  display: flex;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-4);
}

.suggestion-review-rationale.is-expanded {
  align-items: flex-end;
}

/* One line, cut with an ellipsis, until Show opens the whole rationale. */
.suggestion-review-rationale-text {
  flex: 1;
  line-height: var(--leading-normal);
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suggestion-review-rationale.is-expanded .suggestion-review-rationale-text {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

button.suggestion-review-rationale-more {
  color: var(--accent-text);
  flex: none;
  min-height: var(--control-height-sm);
  padding: 0 var(--space-2);
}

button.suggestion-review-rationale-more[hidden] {
  display: none;
}

/* In the review dialog the form grows to fill the scroll area, so the diff gets every spare pixel. */
.suggestion-review-form {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
}

.suggestion-review-form > * {
  flex: none;
}

.suggestion-review-diff {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}

.suggestion-review-diff[hidden] {
  display: none;
}

/* Proposed changes heading: the title, then the change count with Previous / Next. */
.suggestion-review-view-title {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.suggestion-change-nav {
  align-items: center;
  display: inline-flex;
  gap: var(--space-1);
}

.suggestion-change-nav[hidden] {
  display: none;
}

.suggestion-change-count {
  color: var(--text);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  margin-right: var(--space-1);
  white-space: nowrap;
}

button.suggestion-change-step {
  font-size: var(--text-sm);
  gap: var(--space-1);
  min-height: var(--space-8);
  padding: 0 var(--space-3);
}

/* The Changes view: the edit as reading text, each changed block in a card with its words marked. */
/* The frame holds the scrolling text and, at its right edge, the change rail. */
.suggestion-review-changes {
  background: var(--surface-muted);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  display: grid;
  flex: 1 0 320px;
  grid-template-columns: minmax(0, 1fr) var(--space-22);
  grid-template-rows: minmax(0, 1fr);
  min-height: 320px;
  overflow: hidden;
  position: relative;
}

.suggestion-review-changes[hidden] {
  display: none;
}

.suggestion-review-changes-scroll {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--space-4) var(--space-6) var(--space-12);
  position: relative;
}

/* A soft fade at the bottom edge, so a card cut by the scroll edge reads as continuing below. */
.suggestion-review-changes::after {
  background: linear-gradient(to bottom, transparent, var(--surface-muted));
  bottom: 0;
  content: "";
  height: var(--space-10);
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: var(--space-22);
  transition: opacity var(--duration) var(--ease);
}

.suggestion-review-changes.has-more-below::after {
  opacity: 1;
}

/* Reviewed prose keeps a readable measure (about 90 characters) rather than stretching across the dialog. */
.suggestion-changes-document {
  display: grid;
  gap: var(--space-3);
  margin-inline: auto;
  max-width: calc(var(--measure) + var(--space-16));
}

/* A deletion followed by its replacement reads as two marks, not one run. */
.suggestion-changes-document del + ins,
.suggestion-changes-document ins + del {
  margin-inline-start: var(--space-1);
}

/* The change rail: where each change sits (green adds, red removes, both for an edit) and the stretch in view. */
.suggestion-changes-rail {
  background: var(--surface);
  border-left: var(--border-width) solid var(--border);
  cursor: pointer;
  position: relative;
  transition: background var(--duration-fast) var(--ease);
}

.suggestion-changes-rail:hover {
  background: var(--surface-hover);
}

.suggestion-changes-rail-thumb {
  /* The stretch in view: a thin line down the rail's inner edge, not a block. */
  border-left: var(--border-width-strong) solid var(--accent-border);
  left: 0;
  position: absolute;
  width: 0;
}

/* Rail chips ("2 Edit"): the number matches "Change N of M", the word says what the change does, and a tint with a
   coloured left edge repeats it. Hover only deepens the tint; the selected chip is filled solid in its kind's colour. */
.suggestion-changes-rail-tick,
.suggestion-change-label {
  align-items: center;
  background: var(--chip-tint);
  border: var(--border-width) solid var(--chip-border);
  border-left: var(--border-width-accent) solid var(--chip-edge);
  border-radius: var(--radius-xs);
  color: var(--chip-text);
  display: flex;
  gap: var(--space-1);
  line-height: 1;
  white-space: nowrap;
}

:is(.suggestion-changes-rail-tick, .suggestion-change-label).is-insert {
  --chip-tint: var(--success-bg);
  --chip-border: var(--success-border);
  --chip-edge: var(--success-solid);
  --chip-text: var(--success-text);
  --chip-fill: var(--success-fill);
}

:is(.suggestion-changes-rail-tick, .suggestion-change-label).is-delete {
  --chip-tint: var(--error-bg);
  --chip-border: var(--error-border);
  --chip-edge: var(--error-solid);
  --chip-text: var(--error-text);
  --chip-fill: var(--error-fill);
}

:is(.suggestion-changes-rail-tick, .suggestion-change-label).is-edit {
  --chip-tint: var(--info-bg);
  --chip-border: var(--info-border);
  --chip-edge: var(--accent-fill);
  --chip-text: var(--info-text);
  --chip-fill: var(--accent-fill);
}

.suggestion-changes-rail-tick {
  cursor: pointer;
  height: var(--space-6);
  left: var(--space-2);
  padding: 0 var(--space-2);
  position: absolute;
  right: var(--space-1);
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}

.suggestion-changes-rail-tick:hover {
  background: color-mix(in srgb, var(--chip-edge) 22%, var(--surface));
  z-index: 2;
}

.suggestion-changes-rail-number {
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-bold);
}

.suggestion-changes-rail-kind {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

/* The selected chip: solid fill, light text, bold word. */
.suggestion-changes-rail-tick.is-current,
.suggestion-changes-rail-tick.is-current:hover {
  background: var(--chip-fill);
  border-color: var(--chip-fill);
  color: var(--text-on-fill);
  z-index: 1;
}

.suggestion-changes-rail-tick.is-current .suggestion-changes-rail-kind {
  font-weight: var(--weight-bold);
}

/* The change's preview, beside the chip under the pointer (or the one Previous / Next moved to). */
.suggestion-changes-preview {
  background: var(--surface-raised);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  max-width: 340px;
  padding: var(--space-2) var(--space-3);
  pointer-events: none;
  position: absolute;
  right: calc(var(--space-22) + var(--space-2));
  z-index: 3;
}

.suggestion-changes-preview[hidden] {
  display: none;
}

.suggestion-changes-preview p {
  margin: 0;
}

.suggestion-changes-preview-title {
  color: var(--text);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.suggestion-changes-preview-section {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.suggestion-changes-preview-text {
  color: var(--text-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  margin-top: var(--space-1) !important;
}

/* "Change 2 · Edited" at the top of each changed card, styled like its rail chip. */
.suggestion-change-label {
  align-self: start;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  justify-self: start;
  padding: var(--space-1) var(--space-2);
}

.suggestion-change-kind {
  font-weight: var(--weight-medium);
}

.suggestion-changes-unfolded {
  display: grid;
  gap: var(--space-3);
}

.suggestion-diff-block {
  color: var(--text-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  margin: 0;
  overflow-wrap: anywhere;
}

.suggestion-diff-block.is-heading {
  color: var(--text);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  margin-top: var(--space-1);
}

.suggestion-diff-block.is-level-1 {
  font-size: var(--text-xl);
}

.suggestion-diff-block.is-level-2 {
  font-size: var(--text-lg);
}

.suggestion-diff-block.is-level-3 {
  font-size: var(--text-md);
}

.suggestion-diff-block.is-item {
  padding-left: var(--space-5);
  position: relative;
}

.suggestion-diff-block.is-item::before {
  background: currentColor;
  border-radius: var(--radius-full);
  content: "";
  height: calc(var(--space-1) * 1.5);
  left: var(--space-1);
  position: absolute;
  top: 0.7em;
  width: calc(var(--space-1) * 1.5);
}

.suggestion-diff-block.is-row {
  font-variant-numeric: tabular-nums;
}

.suggestion-diff-block.is-code {
  background: var(--code-bg);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-4);
  white-space: pre-wrap;
}

/* Unchanged context reads in full-contrast secondary text; it sits outside the cards, which keeps it secondary. */
.suggestion-diff-block.is-context {
  color: var(--text-secondary);
}

.suggestion-diff-block.is-heading.is-context {
  color: var(--text-secondary);
}

.suggestion-change {
  background: var(--surface);
  border: var(--border-width) solid var(--border-strong);
  border-left: var(--border-width-accent) solid var(--accent-fill);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  scroll-margin: var(--space-6);
  transition: outline-color var(--duration) var(--ease);
}

.suggestion-change:focus {
  outline: none;
}

/* The current change gets one ring that hugs its card, not a second outline floating outside the border. */
.suggestion-change.is-current {
  border-color: var(--accent-fill);
  box-shadow: var(--ring-focus);
}

:is(.suggestion-changes-document, .suggestion-changes-preview) ins,
:is(.suggestion-changes-document, .suggestion-changes-preview) del {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  border-radius: var(--radius-xs);
  color: var(--text);
  padding: 0 var(--space-0-5);
}

/* Inserted words are underlined and deleted ones struck through, so neither relies on colour. */
:is(.suggestion-changes-document, .suggestion-changes-preview) ins {
  background: var(--diff-insert-bg);
  text-decoration: underline;
  text-decoration-color: var(--success-text);
  text-underline-offset: 0.2em;
}

.suggestion-changes-document del,
.suggestion-changes-preview del {
  background: var(--diff-delete-bg);
  text-decoration: line-through;
  text-decoration-color: var(--error-text);
  text-decoration-thickness: var(--border-width-strong);
}

/* Screen readers don't announce ins / del by default, so each says where it starts and ends. */
.suggestion-changes-document :is(ins, del)::before,
.suggestion-changes-document :is(ins, del)::after {
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.suggestion-changes-document ins::before {
  content: " [added: ";
}

.suggestion-changes-document del::before {
  content: " [removed: ";
}

.suggestion-changes-document :is(ins, del)::after {
  content: "] ";
}

.suggestion-change-note {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin: 0;
}

.suggestion-changes-empty {
  color: var(--text-secondary);
  margin: var(--space-8) 0;
  text-align: center;
}

/* A dashed divider with a pill button centred on it. */
.suggestion-changes-fold {
  align-items: center;
  display: flex;
  gap: var(--space-3);
}

.suggestion-changes-fold::before,
.suggestion-changes-fold::after {
  border-top: var(--border-width) dashed var(--border-strong);
  content: "";
  flex: 1;
}

button.suggestion-changes-gap {
  background: var(--surface);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  gap: var(--space-1);
  min-height: var(--control-height-sm);
  padding: 0 var(--space-3) 0 var(--space-2);
}

button.suggestion-changes-gap:hover {
  background: var(--surface-hover);
  border-color: var(--border-hover);
  color: var(--text);
}

button.suggestion-changes-gap[aria-expanded="true"] {
  color: var(--text);
}

.suggestion-changes-unfolded[hidden] {
  display: none;
}

@media (max-width: 760px) {
  .suggestion-review-changes-scroll {
    padding: var(--space-3);
  }

  .suggestion-change {
    padding: var(--space-3) var(--space-4);
  }
}

.suggestion-review-diff-labels {
  background: var(--surface-muted);
  border: var(--border-width) solid var(--border);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  color: var(--text-secondary);
  display: grid;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  grid-template-columns: 1fr 1fr;
}

.suggestion-review-diff-labels > span {
  align-items: center;
  display: inline-flex;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
}

.suggestion-review-diff-labels > span + span {
  border-left: var(--border-width) solid var(--border);
}

.suggestion-review-diff-labels .is-current .icon {
  color: var(--error-text);
}

.suggestion-review-diff-labels .is-proposed .icon {
  color: var(--success-text);
}

.suggestion-review-diff-labels + .suggestion-review-editor {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Below about 990px Monaco shows the diff inline in one pane, so there are no columns to label. */
@media (max-width: 990px) {
  .suggestion-review-diff-labels {
    display: none;
  }

  .suggestion-review-diff-labels + .suggestion-review-editor {
    border-radius: var(--radius);
  }
}

.suggestion-review-details {
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
}

.suggestion-review-details > summary {
  align-items: center;
  border-radius: var(--radius);
  color: var(--text);
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  gap: var(--space-2);
  list-style: none;
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-4);
  transition: background var(--duration-fast) var(--ease);
}

.suggestion-review-details > summary::-webkit-details-marker {
  display: none;
}

.suggestion-review-details > summary:hover {
  background: var(--surface-hover);
}

.suggestion-review-details[open] > summary {
  border-bottom: var(--border-width) solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
}

.suggestion-review-details-chevron {
  color: var(--text-secondary);
  transition: transform var(--duration-fast) var(--ease);
}

.suggestion-review-details[open] .suggestion-review-details-chevron {
  transform: rotate(90deg);
}

.suggestion-review-details-hint {
  color: var(--text-muted);
  font-weight: var(--weight-regular);
}

.suggestion-review-details-status {
  color: var(--text-secondary);
  font-weight: var(--weight-regular);
}

.suggestion-review-details-status + .suggestion-review-details-hint::before {
  content: "·";
  margin-right: var(--space-2);
}

.suggestion-review-details-changed,
.suggestion-review-changed-badge {
  background: var(--warn-bg);
  border: var(--border-width) solid var(--warn-border);
  border-radius: var(--radius-full);
  color: var(--warn-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: 0 var(--space-2);
}

.suggestion-review-changed-badge {
  margin-left: var(--space-2);
}

.suggestion-review-fields {
  align-items: start;
  display: grid;
  gap: var(--space-3) var(--space-4);
  grid-template-columns: repeat(3, minmax(180px, 1fr));
}

.suggestion-review-details .suggestion-review-fields {
  padding: var(--space-4);
}

.suggestion-review-fields label {
  display: grid;
  gap: var(--space-1);
}

.suggestion-review-fields label > span {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
}

.suggestion-review-fields label.is-changed :is(input:not([type="checkbox"]), select, textarea) {
  border-color: var(--warn-solid);
}

.suggestion-review-was {
  color: var(--text-muted);
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
}

.suggestion-review-summary-field {
  grid-column: 1 / -1;
}

/* The summary grows with its text instead of clipping it. */
.suggestion-review-fields textarea {
  field-sizing: content;
  max-height: 240px;
  min-height: var(--space-20);
  resize: vertical;
}

.suggestion-review-fields .checkbox-label {
  align-items: center;
  align-self: end;
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-height: var(--control-height);
}

.suggestion-review-fields .checkbox-label .suggestion-review-was {
  flex-basis: 100%;
}

.suggestion-review-editor-heading {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0;
  text-transform: uppercase;
}

.suggestion-review-view-heading {
  align-items: center;
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
}

.suggestion-review-view-toggle {
  background: var(--surface-muted);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-full);
  display: inline-flex;
  flex: 0 0 auto;
  gap: var(--space-0-5);
  padding: var(--space-1);
}

.suggestion-review-view-button {
  background: transparent;
  border: 0;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--space-1) var(--space-4);
}

.suggestion-review-view-button:hover {
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  border: 0;
  color: var(--text);
}

.suggestion-review-view-button.is-active,
.suggestion-review-view-button.is-active:hover {
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--accent-text);
}

.suggestion-review-editor {
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  height: 520px;
  min-height: 360px;
  overflow: hidden;
}

.suggestion-review-diff > .suggestion-review-editor,
.suggestion-review-form > .suggestion-review-preview {
  flex: 1 0 320px;
  height: auto;
  min-height: 320px;
}

.suggestion-review-editor[hidden],
.suggestion-review-preview[hidden] {
  display: none;
}

.suggestion-review-preview {
  background: var(--surface-muted);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  height: 520px;
  min-height: 360px;
  overflow: auto;
  padding: var(--space-6);
}

.suggestion-review-preview-document {
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin: 0 auto;
  max-width: 850px;
  min-height: 100%;
  padding: var(--space-9) var(--space-11);
}

.suggestion-review-preview-document .document-title-row h1 {
  margin-top: 0;
}

.suggestion-review-preview-document .document-meta {
  margin-bottom: var(--space-6);
}

.suggestion-review-editor .diff-columns {
  height: 100%;
  margin: 0;
}

.suggestion-review-editor textarea {
  background: var(--surface);
  border: 0;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  min-height: 360px;
  padding: var(--space-4);
  resize: vertical;
  width: 100%;
}

.suggestion-review-editor > textarea {
  height: 100%;
  resize: none;
}

/* Monaco's diff colors, drawn from the theme's success and error tokens: clearly red and green, calm in both themes. */
.suggestion-review-editor .monaco-editor,
.suggestion-review-editor .monaco-diff-editor {
  --vscode-diffEditor-insertedLineBackground: var(--diff-insert-line-bg);
  --vscode-diffEditor-insertedTextBackground: var(--diff-insert-bg);
  --vscode-diffEditor-removedLineBackground: var(--diff-delete-line-bg);
  --vscode-diffEditor-removedTextBackground: var(--diff-delete-bg);
  --vscode-diffEditorGutter-insertedLineBackground: color-mix(in srgb, var(--success-solid) 16%, transparent);
  --vscode-diffEditorGutter-removedLineBackground: color-mix(in srgb, var(--error-solid) 16%, transparent);
  --vscode-diffEditor-diagonalFill: color-mix(in srgb, var(--border-strong) 45%, transparent);
  --vscode-editor-background: var(--surface);
  --vscode-editorGutter-background: var(--surface);
  --vscode-editorLineNumber-foreground: var(--text-muted);
}

@media (max-width: 760px) {
  .suggestion-review-view-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .suggestion-review-preview {
    height: 440px;
    padding: var(--space-3);
  }

  .suggestion-review-preview-document {
    padding: var(--space-6) var(--space-5);
  }
}

.diff-columns {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin: var(--space-4) 0;
}

.diff-pane {
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-4);
}

.diff-pane h4 {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0;
  text-transform: uppercase;
}

.diff-pane pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.6;
  margin: var(--space-3) 0 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Modal */
.modal-backdrop {
  align-items: center;
  backdrop-filter: blur(2px);
  background: var(--overlay);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: var(--space-6);
  position: fixed;
  z-index: 100;
}

.modal {
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: var(--space-3);
  max-height: calc(100vh - 48px);
  max-width: 680px;
  overflow: auto;
  padding: var(--space-6);
  width: 100%;
}

.users-modal {
  gap: var(--space-4);
  max-width: 720px;
}

.access-policy-modal {
  gap: var(--space-4);
  max-width: 980px;
  overflow-x: hidden;
  overflow-y: auto;
}

.access-policy-modal .modal-body,
.access-policy-modal form {
  min-width: 0;
}

.access-policy-assignment-table {
  max-height: min(52vh, 520px);
  overflow-x: hidden;
  overflow-y: auto;
}

.access-policy-assignment-table .users-table {
  min-width: 0;
  table-layout: fixed;
}

.access-policy-assignment-table th:first-child,
.access-policy-assignment-table td:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
  width: 40%;
}

.access-policy-assignment-table th:last-child,
.access-policy-assignment-table td:last-child {
  min-width: 0;
}

.access-policy-assignment-table th:not(:first-child),
.access-policy-assignment-table td:not(:first-child) {
  text-align: center;
}

.access-policy-assignment-table th:not(:first-child) {
  white-space: normal;
}

.modal-heading {
  align-items: flex-start;
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
}

.modal-heading .eyebrow {
  margin-bottom: var(--space-1);
}

.modal-heading .muted {
  display: block;
  font-size: var(--text-sm);
  margin-top: var(--space-2);
}

.modal-close {
  flex: 0 0 auto;
  font-size: var(--text-xl);
  height: 34px;
  padding: 0;
  width: 34px;
}

.modal-body {
  display: grid;
  gap: var(--space-3);
}

.modal-actions {
  justify-content: flex-end;
  margin-top: var(--space-1);
}

.form-help {
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
  margin: 0;
}

.csv-header {
  background: var(--surface-muted);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-sm);
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  overflow-x: auto;
  padding: var(--space-3) var(--space-3);
  white-space: nowrap;
}

.import-results:empty {
  display: none;
}

.import-results .notice {
  margin: 0;
}

.import-error-list {
  margin: 0;
  max-height: 180px;
  overflow: auto;
  padding-left: var(--space-6);
}

.import-error-list li {
  margin: var(--space-1) 0;
}

.modal .notice {
  margin: 0;
}

.email-preview-body {
  background: var(--surface-muted);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.6;
  margin: 0;
  overflow-wrap: anywhere;
  padding: var(--space-4);
  white-space: pre-wrap;
}

/* API tokens */
.token-reveal {
  background: var(--warn-bg);
  border: var(--border-width) solid var(--warn-border);
  border-radius: var(--radius);
  display: grid;
  gap: var(--space-3);
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
}

.token-secret,
.token-snippet {
  background: var(--surface);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  margin: 0;
  overflow-wrap: anywhere;
  padding: var(--space-3);
  white-space: pre-wrap;
}

.api-token-table {
  border-collapse: collapse;
  margin-top: var(--space-3);
  width: 100%;
}

.token-list-heading {
  align-items: center;
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
}

.token-visibility-toggle {
  align-items: center;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--text-sm);
  gap: var(--space-2);
  white-space: nowrap;
}

.token-visibility-toggle input {
  margin: 0;
}

.token-visibility-count {
  font-variant-numeric: tabular-nums;
}

.api-token-table-wrap {
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-top: var(--space-4);
  overflow-x: auto;
  padding: var(--space-1) var(--space-4) var(--space-2);
}

.api-token-table th,
.api-token-table td {
  border-bottom: var(--border-width) solid var(--border);
  padding: var(--space-3) var(--space-2);
  text-align: left;
  vertical-align: top;
}

.api-token-table tr:last-child td {
  border-bottom: 0;
}

.api-token-table th {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.api-token-name {
  font-weight: 600;
}

.api-token-table tr.is-muted {
  color: var(--text-muted);
  opacity: 0.6;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition: none !important;
  }

  .button-spinner {
    animation: none;
  }
}

/* Responsive */
@media (max-width: 999px) {
  .doc-layout {
    display: block;
  }

  .toc {
    display: none;
  }

  .toc-compact {
    display: block;
  }

  .document-edit-layout .document-editor-sidebar {
    border-bottom: var(--border-width) solid var(--border);
    border-right: 0;
    display: block;
    height: auto;
    padding: var(--space-5) var(--space-5);
    position: static;
  }

  .document-edit-layout .document-editor-sidebar-inner {
    position: static;
  }

  .document-column {
    margin: 0 auto;
    max-width: calc(var(--measure) + 2 * var(--space-12));
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .account-trigger .user-details {
    display: none;
  }
}

@media (max-width: 900px) {
  .app-header {
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3) 0;
    position: sticky;
  }

  .app-header > .account {
    flex-basis: auto;
    margin-left: auto;
  }

  .header-navigation {
    align-items: flex-start;
    gap: var(--space-1);
  }

  .header-brand-group {
    gap: var(--space-3);
  }

  .product-brand {
    font-size: var(--text-lg);
    gap: var(--space-2);
  }

  .brand-logo {
    max-width: 120px;
  }

  .top-nav {
    min-height: auto;
    overflow: visible;
  }

  .nav-menu {
    left: 12px;
    padding: var(--space-4) var(--space-4) 0;
    right: 12px;
    top: 100%;
    width: auto;
  }

  .nav-menu-columns {
    columns: 1;
  }

  .account {
    justify-content: flex-start;
  }

  .current-user {
    text-align: left;
  }

  .suggest-document-header-action {
    order: -1;
  }

  .account-trigger {
    text-align: left;
  }

  .session-actions.account-menu {
    left: 0;
    right: auto;
  }

  .quick-access-menu {
    left: 16px;
    max-height: min(520px, calc(100vh - var(--app-header-height, 60px) - 24px));
    min-width: min(360px, calc(100vw - 32px));
    position: fixed;
    right: auto;
    top: calc(var(--app-header-height, 60px) + 8px);
    width: min(360px, calc(100vw - 32px));
  }

  .main-content {
    margin-top: var(--space-4);
    padding: 0 var(--space-4) var(--space-12);
  }

  .users-page-header {
    align-items: stretch;
    display: grid;
  }

  .users-page-actions {
    justify-content: flex-start;
  }

  .document-column,
  .document-column.document-editor-column {
    padding: var(--space-6) var(--space-5) var(--space-12);
  }

  .document-title-row {
    display: grid;
    gap: var(--space-3);
  }

  .document-title-row h1 {
    font-size: var(--text-2xl);
  }

  .document-actions .danger-action {
    margin-left: 0;
  }

  .document-actions {
    justify-content: flex-start;
  }

  .suggestion-row {
    align-items: start;
    display: grid;
  }
}

@media (max-width: 480px) {
  .suggest-document-header-action {
    padding: 0;
    width: 34px;
  }

  .suggest-document-header-label {
    display: none;
  }
}

/* Phones: the header keeps to a brand-and-account row, the query row where a page has one, and one row of
   shortcuts and centres that scrolls sideways rather than wrapping. shell.js slides it away while the reader
   scrolls down and brings it back on the way up. */
@media (max-width: 640px) {
  .app-header {
    gap: 0 var(--space-2);
    min-height: 0;
    padding: var(--space-1) var(--space-3) 0;
    transition: transform 200ms ease;
  }

  .app-header.is-scrolled-away {
    transform: translateY(calc(-100% - 8px));
  }

  .header-brand-group {
    flex: 1 1 0;
    gap: var(--space-2);
  }

  .product-brand span,
  .brand-separator {
    display: none;
  }

  .brand {
    display: block;
    font-size: var(--text-md);
    line-height: 40px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .brand-logo {
    max-height: 30px;
  }

  .account {
    flex: none;
    gap: var(--space-0-5);
    justify-content: flex-end;
  }

  .account-trigger {
    padding: var(--space-1);
  }

  .account-trigger .user-details {
    display: none;
  }

  .session-actions.account-menu {
    left: auto;
    right: 0;
  }

  .header-query.chat-input-wrap {
    flex-basis: 100%;
    margin: var(--space-0-5) 0 var(--space-2);
    max-width: none;
    order: 1;
  }

  .header-navigation {
    order: 2;
  }

  .top-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .top-nav::-webkit-scrollbar {
    display: none;
  }

  /* Wrapped, the editor's toolbar would stand six rows deep over the text it edits; it scrolls sideways instead. */
  .editor-toolbar,
  .editor-toolbar-group {
    flex-wrap: nowrap;
  }

  .editor-table-group {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  /* A phone has no room for page margins around the text. */
  .editor-surface .ProseMirror {
    padding: var(--space-5) var(--space-4) var(--space-8);
  }

  .editor-table-group > * {
    flex: none;
  }

  .editor-toolbar {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .editor-toolbar > * {
    flex: none;
  }

  .app-shell:has(.is-scrolled-away) .document-body-field .editor-header {
    top: 0;
  }

  /* Squeezed to the phone's width, a wide table stacks a word per line; at these widths it scrolls instead. */
  .document-table :is(th, td) {
    min-width: 7.5em;
  }

  .access-policy-table-wrap {
    overflow-x: auto;
  }

  .access-policy-table {
    min-width: 520px;
  }

  /* A content structure row's badges and actions drop below its name rather than past the edge. */
  .taxonomy-tree-row {
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .app-header {
    transition: none;
  }
}

/* iOS Safari zooms the page into any focused field set smaller than 16px and leaves it zoomed. */
@media (max-width: 820px) {
  input:not([type="checkbox"], [type="radio"], [type="range"], .document-title-field input),
  select,
  textarea:not(.monaco-editor textarea) {
    font-size: var(--text-base) !important;
  }
}

.app-shell.is-pwa-mode .main-content {
  margin-top: 0;
  padding: 0;
}

.app-shell.is-pwa-mode .chat-layout {
  height: calc(100dvh - 58px);
  min-height: 0;
}
/* Product administration is a separate, global shell. */
/* Report an issue: with several sources, a small menu picks the document the feedback is about. */
.chat-report-menu-wrap {
  position: relative;
}

.chat-report-menu {
  background: var(--surface-raised);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  display: grid;
  gap: var(--space-0-5);
  left: 0;
  min-width: 280px;
  padding: var(--space-1);
  position: absolute;
  top: calc(100% + var(--space-1));
  z-index: 20;
}

.chat-report-menu[hidden] {
  display: none;
}

.chat-report-menu-title {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  margin: 0;
  padding: var(--space-1) var(--space-2);
}

.chat-report-menu-item {
  background: transparent;
  border-color: transparent;
  font-weight: var(--weight-regular);
  justify-content: flex-start;
  min-height: var(--control-height);
  padding: 0 var(--space-2);
  text-align: left;
}

.chat-report-menu-item:hover,
.chat-report-menu-item:focus-visible {
  background: var(--surface-hover);
  border-color: transparent;
}

/* Answer feedback: Helpful / Not helpful sit in the action row; the chosen one stays pressed. */
.chat-action.chat-feedback-rating[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent-text);
}

.chat-feedback-detail {
  margin-top: var(--space-3);
  max-width: 560px;
}

.chat-feedback-reasons {
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.chat-feedback-reasons legend {
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  padding: 0 var(--space-1);
}

.chat-feedback-reason {
  align-items: center;
  color: var(--text-body);
  display: inline-flex;
  font-size: var(--text-sm);
  gap: var(--space-2);
  min-height: var(--control-height-sm);
}

.chat-feedback-reasons textarea {
  flex-basis: 100%;
  font-size: var(--text-sm);
  min-height: var(--space-16);
  resize: vertical;
}
.assistant-research-controls { max-width: none; }
#assistant-research-detail pre { background: var(--surface-muted); max-height: 28rem; overflow: auto; padding: var(--space-3); white-space: pre-wrap; }


/* Shared Documents: lists for management, dialogs for explicit changes. */
.sharing-page { max-width: 1240px; }
.sharing-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-8); margin-bottom: var(--space-8); }
.sharing-heading h1 { margin: var(--space-1) 0 var(--space-2); }
.sharing-description { color: var(--text-secondary); margin: var(--space-2) 0 var(--space-5); }
.sharing-row-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.sharing-page button { margin: 0; white-space: normal; }
.sharing-tabs { display: flex; gap: var(--space-6); border-bottom: var(--border-width) solid var(--border-strong); margin-bottom: var(--space-6); }
.sharing-tabs button { border: 0; border-radius: 0; background: transparent; padding: var(--space-3) var(--space-1); color: var(--text-secondary); border-bottom: var(--border-width-accent) solid transparent; }
.sharing-tabs button[aria-selected="true"] { border-bottom-color: var(--accent-fill); color: var(--accent-text); font-weight: 650; }
.sharing-content h2 { font-size: var(--text-md); margin: var(--space-7) 0 var(--space-3); }
.sharing-list-tools { display: flex; align-items: end; gap: var(--space-4); margin: var(--space-4) 0; flex-wrap: wrap; }
.sharing-list-tools input[type="search"] { flex: 1; min-width: 180px; max-width: 420px; margin: 0; }
.sharing-field { display: block; color: var(--text-secondary); font-size: var(--text-sm); }
.sharing-field select { display: block; margin: var(--space-1) 0 0; width: 100%; }
.sharing-table-wrap { overflow-x: auto; width: 100%; border-top: var(--border-width) solid var(--border); }
.sharing-table { border-collapse: collapse; width: 100%; background: transparent; font-size: var(--text-sm); }
.sharing-table th { text-align: left; color: var(--text-muted); font-size: var(--text-xs); font-weight: 600; padding: var(--space-3) var(--space-3); white-space: nowrap; }
.sharing-table td { border-top: var(--border-width) solid var(--border); padding: var(--space-4) var(--space-3); vertical-align: middle; }
.sharing-table tbody tr:hover { background: var(--surface-muted); }
.sharing-table td:first-child, .sharing-table th:first-child { padding-left: var(--space-1); }
.sharing-table input[type="checkbox"] { margin: 0; }
.sharing-document-cell { min-width: 180px; }
.sharing-document-cell a, .sharing-document-cell strong { font-weight: 600; }
.sharing-state { display: inline-block; color: var(--text-secondary); font-size: var(--text-sm); white-space: nowrap; }
.sharing-state.is-pending { color: var(--warn-text); background: var(--warn-bg); border-radius: var(--radius-xs); padding: var(--space-0-5) var(--space-2); }
.sharing-state.is-accepted { color: var(--accent-text); }
.sharing-empty { color: var(--text-secondary); padding: var(--space-10) 0; border-top: var(--border-width) solid var(--border); }
.sharing-dialog { box-sizing: border-box; width: min(580px, calc(100vw - 2rem)); max-height: calc(100dvh - 3rem); padding: var(--space-7); border: var(--border-width) solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); }
.sharing-dialog::backdrop { background: var(--overlay); }
.sharing-dialog h2 { margin: 0 0 var(--space-4); font-size: var(--text-xl); }
.sharing-dialog-body > p { color: var(--text-secondary); }
.sharing-dialog-body .sharing-field { margin: var(--space-5) 0; }
.sharing-recipients { min-width: 0; margin: var(--space-5) 0 0; padding: 0; border: 0; }
.sharing-recipients legend { margin-bottom: var(--space-2); color: var(--text-secondary); font-size: var(--text-sm); }
.sharing-recipient-list { max-height: 260px; overflow-y: auto; border: var(--border-width) solid var(--border); border-radius: var(--radius-sm); }
.sharing-recipient-list > p { padding: var(--space-3); color: var(--text-secondary); }
.sharing-recipient { display: flex; align-items: center; gap: var(--space-3); margin: 0; padding: var(--space-3); cursor: pointer; }
.sharing-recipient + .sharing-recipient { border-top: var(--border-width) solid var(--border); }
.sharing-recipient:hover { background: var(--surface-muted); }
.sharing-recipient input[type="checkbox"] { flex: 0 0 auto; width: 1rem; height: 1rem; margin: 0; }
.sharing-recipient-details { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.sharing-recipient-details small { color: var(--text-secondary); font-weight: normal; }
.sharing-dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); border-top: var(--border-width) solid var(--border); padding-top: var(--space-5); }
.sharing-dialog-actions button { margin: 0; }
.sharing-placement-preview { padding-left: var(--space-3); border-left: var(--border-width-accent) solid var(--accent-border); font-size: var(--text-sm); }
.sharing-audience { max-height: 190px; overflow: auto; }
.sharing-audience label { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) 0; }
.sharing-feedback { font-size: var(--text-sm); color: var(--text-secondary); }
.sharing-feedback.is-error, .sharing-danger { color: var(--error-text); }
.sharing-feedback.is-working::before { content: ""; display: inline-block; width: .9em; height: .9em; margin-right: var(--space-2); border: var(--border-width-strong) solid var(--border-strong); border-top-color: var(--accent-fill); border-radius: 50%; animation: sharing-spin .8s linear infinite; }
@keyframes sharing-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sharing-feedback.is-working::before { animation: none; } }
@media (max-width: 700px) {
  .sharing-heading { display: block; margin-bottom: var(--space-5); }
  .sharing-tabs { gap: var(--space-4); font-size: var(--text-sm); }
  .sharing-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .sharing-table, .sharing-table tbody { display: block; }
  .sharing-table tr { display: grid; grid-template-columns: 1fr; padding: var(--space-3) 0; border-bottom: var(--border-width) solid var(--border); }
  .sharing-table td, .sharing-table td:first-child { display: flex; gap: var(--space-3); align-items: baseline; border: 0; padding: var(--space-1) 0; min-width: 0; }
  .sharing-table td::before { content: attr(data-label); min-width: 82px; color: var(--text-muted); font-size: var(--text-xs); }
  .sharing-table .sharing-document-cell { font-size: var(--text-base); padding: var(--space-2) 0; }
  .sharing-table .sharing-document-cell::before { display: none; }
  .sharing-table .sharing-select-cell { justify-content: flex-end; }
  .sharing-list-tools { gap: var(--space-3); }
  .sharing-list-tools input[type="search"] { max-width: none; }
  .sharing-dialog { padding: var(--space-5); }
}

/* Content feedback: feedback on documents, reviewed alongside suggestions. */
.content-feedback-field > span { display: block; }
.content-feedback-field input,
.content-feedback-field textarea { box-sizing: border-box; display: block; margin: var(--space-1) 0 0; width: 100%; }
.content-feedback-field textarea { min-height: 8rem; resize: vertical; }
.content-feedback-deeper { margin-right: auto; }
.shared-suggestion-notice { margin: var(--space-3) 0; }
.suggestion-type-feedback { background: var(--surface-muted); border-color: var(--border-strong); color: var(--text-secondary); }
.suggestion-feedback-category { color: var(--text-muted); display: block; font-size: var(--text-xs); margin-top: var(--space-1); }
.suggestion-table-excerpt { display: block; font-size: var(--text-xs); margin-top: var(--space-1); max-width: 360px; overflow-wrap: anywhere; }
.suggestion-tenant-chip { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-text); margin-left: var(--space-1); }
.feedback-review-facts { display: grid; gap: var(--space-2) var(--space-4); grid-template-columns: max-content 1fr; margin: var(--space-4) 0; }
.feedback-review-facts dt { color: var(--text-muted); font-weight: 600; }
.feedback-review-facts dd { margin: 0; overflow-wrap: anywhere; }
.feedback-review-heading { font-size: var(--text-base); margin: var(--space-4) 0 var(--space-2); }
.feedback-review-text { background: var(--surface-muted); border-left: var(--border-width-accent) solid var(--accent-border); border-radius: var(--radius-sm); margin: 0; overflow-wrap: anywhere; padding: var(--space-3) var(--space-4); white-space: pre-wrap; }
.feedback-review-reply { display: block; margin: var(--space-4) 0 0; }
.feedback-review-reply > span { display: block; font-weight: 600; margin-bottom: var(--space-2); }
.feedback-review-reply textarea { box-sizing: border-box; display: block; min-height: 5rem; width: 100%; }
.feedback-review-reply small { display: block; margin-top: var(--space-1); }
.sharing-contributions { border: var(--border-width) solid var(--border); border-radius: var(--radius-sm); margin: 0 0 var(--space-6); min-width: 0; padding: var(--space-4) var(--space-5); }
.sharing-contributions legend { font-weight: 650; padding: 0 var(--space-1); }
.sharing-contributions .sharing-description { margin: 0 0 var(--space-3); }
.sharing-contribution-option { align-items: center; cursor: pointer; display: flex; gap: var(--space-2); padding: var(--space-1) 0; }
.sharing-contribution-option input[type="checkbox"] { flex: 0 0 auto; height: 1rem; margin: 0; width: 1rem; }
@media (max-width: 640px) {
  .feedback-review-facts { grid-template-columns: 1fr; }
  .content-feedback-deeper { margin-right: 0; }
}

/* Tenant administrator Sign-in page */
.sign-in-policy-form {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-3);
}

.sign-in-policy-section {
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.sign-in-policy-section legend {
  font-weight: 650;
  padding: 0 var(--space-1);
}

.sign-in-policy-form .checkbox-label {
  align-items: center;
  display: flex;
  gap: var(--space-2);
}

.sign-in-policy-impact {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
}

.sign-in-connection-panel {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.sign-in-connection-panel h2,
.sign-in-connection-panel h3 {
  margin: 0;
}

.sign-in-connection-panel h3 {
  font-size: var(--text-base);
  margin-top: var(--space-2);
}

.sign-in-connection-kind {
  align-items: flex-start;
  display: flex;
  gap: var(--space-2);
}

.sign-in-connection-kind > span {
  display: grid;
  gap: var(--space-0-5);
}

.sign-in-connection-steps {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-left: var(--space-5);
}

.sign-in-connection-uris {
  display: grid;
  gap: var(--space-2);
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
}

.sign-in-connection-copy {
  align-items: center;
  display: flex;
  gap: var(--space-2);
  min-width: 0;
}

.sign-in-connection-copy code {
  background: var(--surface-muted);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
  padding: var(--space-1) var(--space-2);
}

.sign-in-connection-form {
  display: grid;
  gap: var(--space-4);
  max-width: 560px;
}

.sign-in-connection-field {
  display: grid;
  gap: var(--space-1);
}

.sign-in-connection-field > span:first-child {
  font-weight: 600;
}

.sign-in-connection-summary {
  display: grid;
  gap: var(--space-1) var(--space-4);
  grid-template-columns: max-content minmax(0, 1fr);
  margin: 0;
}

.sign-in-connection-summary dt {
  color: var(--text-muted);
}

.sign-in-connection-summary dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.sign-in-connection-status {
  font-weight: 600;
  margin: 0;
}

.sign-in-connection-note {
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
}

.sign-in-connection-note p {
  margin: var(--space-1) 0 0;
  white-space: pre-wrap;
}

/* Self-service company sign-in on the Sign-in page (enterprise SSO Stage 3). */
.sso-setup {
  display: grid;
  gap: var(--space-4);
}

.sso-setup .panel {
  display: grid;
  gap: var(--space-3);
}

.sso-setup h2,
.sso-setup h3 {
  margin: 0;
}

.sso-setup h3 {
  font-size: var(--text-base);
}

.sso-setup-domain-list,
.sso-setup-connection-list,
.sso-setup-certificate-list {
  display: grid;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.sso-setup-domain,
.sso-setup-connection,
.sso-setup-certificate {
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius);
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
}

.sso-setup-domain-heading,
.sso-setup-connection-heading {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}

.sso-setup-domain-status {
  color: var(--text-muted);
}

.sso-setup-copy {
  align-items: center;
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 48px minmax(0, 1fr) auto;
}

.sso-setup-copy code {
  background: var(--surface-muted);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
  padding: var(--space-1) var(--space-2);
}

.sso-setup-copy-label {
  color: var(--text-muted);
}

.sso-setup-badge {
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  padding: var(--space-px) var(--space-2);
}

.sso-setup-badge.is-active {
  font-weight: 600;
}

.sso-setup-add-domain {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.sso-setup-steps,
.sso-setup-certificates {
  display: grid;
  gap: var(--space-2);
}

.sign-in-summary {
  display: grid;
  margin: 0 0 var(--space-4);
}

.sign-in-summary dt {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin-top: var(--space-3);
}

.sign-in-summary dd {
  margin: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  .sign-in-connection-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .sso-setup-copy {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .sso-setup-copy-label {
    grid-column: 1 / -1;
  }
}

/* PDF documents (decision 0037). The page shows the PDF in PDF.js instead of a body and outline; PDF.js scrolls its
   pages inside an absolutely positioned container, which its viewer requires. */
.doc-layout.is-pdf-document {
  grid-template-columns: minmax(0, 1fr);
}

.doc-layout.is-pdf-document .document-column {
  margin-inline: auto;
  max-width: 1120px;
}

.pdf-viewer {
  --pdf-viewer-surface: color-mix(in srgb, var(--text) 6%, var(--surface));
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.pdf-viewer-toolbar {
  align-items: center;
  background: var(--surface);
  border-bottom: var(--border-width) solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-2) var(--space-3);
}

.pdf-viewer-group {
  align-items: center;
  display: flex;
  gap: var(--space-1);
  margin: 0;
}

.pdf-viewer-find {
  flex: 1 1 260px;
  justify-content: flex-end;
}

.pdf-viewer .pdf-viewer-button {
  font-size: var(--text-base);
  line-height: 1;
  min-width: 32px;
  padding: var(--space-2) var(--space-2);
}

.pdf-viewer .pdf-viewer-fit {
  font-size: var(--text-sm);
}

.pdf-viewer-page-input {
  padding: var(--space-1) var(--space-2);
  text-align: center;
  width: 4.2em;
}

.pdf-viewer-page-count,
.pdf-viewer-scale,
.pdf-viewer-find-count {
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pdf-viewer-scale {
  min-width: 3.4em;
  text-align: center;
}

.pdf-viewer-find-input {
  flex: 1 1 140px;
  max-width: 260px;
  min-width: 0;
  padding: var(--space-1) var(--space-2);
}

.pdf-viewer-frame {
  background: var(--pdf-viewer-surface);
  height: clamp(420px, calc(100dvh - var(--app-header-height) - 96px), 1400px);
  position: relative;
}

.pdf-viewer-frame[hidden] {
  display: none;
}

.pdf-viewer-container {
  inset: 0;
  overflow: auto;
  position: absolute;
}

.pdf-viewer-container:focus-visible {
  outline-offset: -2px;
}

.pdf-viewer-status {
  color: var(--text-secondary);
  margin: 0;
  padding: var(--space-4) var(--space-4);
}

.pdf-viewer-status.is-error {
  color: var(--error-text);
}

.pdf-viewer-status[hidden] {
  display: none;
}

.pdf-viewer-dialog {
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  box-sizing: border-box;
  color: var(--text);
  background: var(--surface);
  max-height: calc(100dvh - 2rem);
  padding: var(--space-4);
  width: min(1100px, calc(100vw - 2rem));
}

.pdf-viewer-dialog::backdrop {
  background: var(--overlay-strong);
}

.pdf-viewer-dialog-header {
  align-items: center;
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.pdf-viewer-dialog-header h2 {
  font-size: var(--text-md);
  margin: 0;
  overflow-wrap: anywhere;
}

.pdf-viewer-dialog .pdf-viewer-frame {
  height: min(72dvh, 1000px);
}

.pdf-upload-progress {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin: calc(-1 * var(--space-2)) 0 0;
}

.pdf-upload-progress[hidden] {
  display: none;
}

.pdf-upload-progress.is-error {
  color: var(--error-text);
}

.pdf-upload-progress.is-ready {
  color: var(--accent-text);
}

.pdf-upload-progress.is-working::before {
  animation: sharing-spin .8s linear infinite;
  border: var(--border-width-strong) solid var(--border-strong);
  border-radius: 50%;
  border-top-color: var(--accent-fill);
  content: "";
  display: inline-block;
  height: .9em;
  margin-right: var(--space-2);
  vertical-align: -.1em;
  width: .9em;
}

.pdf-upload-label input[type="file"],
.pdf-upload-rationale textarea {
  display: block;
  margin-top: var(--space-1);
  width: 100%;
}

.pdf-upload-rationale textarea {
  min-height: 90px;
  resize: vertical;
}

.document-body-field[hidden],
.document-pdf-upload[hidden],
.document-editor-actions button[hidden] {
  display: none;
}

.document-pdf-upload {
  background: var(--surface-muted);
  border: var(--border-width) dashed var(--border-strong);
  border-radius: var(--radius);
  margin-top: var(--space-4);
  padding: var(--space-5) var(--space-5);
}

.document-pdf-upload h2 {
  font-size: var(--text-base);
  margin: 0 0 var(--space-1);
}

.document-pdf-upload .pdf-upload-field {
  margin: var(--space-4) 0;
}

.document-pdf-upload .pdf-upload-progress {
  margin-top: var(--space-2);
}

.pdf-print-pointer {
  display: none;
}

.suggestion-pdf-note {
  font-size: var(--text-sm);
  margin: var(--space-2) 0 var(--space-3);
}

.source-open-document {
  display: inline-block;
  font-weight: 600;
  margin-top: var(--space-2);
}

@media (max-width: 700px) {
  .pdf-viewer-find {
    flex-basis: 100%;
    justify-content: flex-start;
  }

  .pdf-viewer-find-input {
    max-width: none;
  }

  .pdf-viewer-dialog {
    padding: var(--space-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pdf-upload-progress.is-working::before {
    animation: none;
  }
}

/* Printing a document page puts only the Tenant's logo, the title and meta line, and the body on paper. The body's
   paper styles are in document_print.css, which the PDF export will load too (decision 0036). */
@media print {
  body:has(> .has-document-page) > :not(#playbook-app),
  .has-document-page > :not(.app-header, .main-content),
  .has-document-page .app-header > :not(.header-brand-group),
  .has-document-page .header-brand-group > :not(.brand),
  .has-document-page .brand-logo:has(+ .brand-print-logo),
  .has-document-page .main-content > :not(.doc-layout),
  .has-document-page .doc-layout > :not(.document-column),
  .has-document-page .document-column > :not(.document-title-row, .document-meta, .doc-tab-panels),
  .has-document-page .doc-tab-panels > :not(#doc-panel-body),
  .has-document-page #doc-panel-body > :not(.document-content, .pdf-print-pointer) {
    display: none !important;
  }

  /* PDF.js draws only the pages in view, so a PDF document prints a line pointing to Export PDF instead. */
  .has-document-page .pdf-print-pointer {
    display: block;
  }

  /* Ctrl+P from the History or Suggestions tab still prints the document. */
  .has-document-page #doc-panel-body[hidden] {
    display: block;
  }

  .has-document-page .brand-print-logo {
    display: block;
  }

  .has-document-page .brand-logo {
    max-height: 48px;
    max-width: 240px;
  }

  :root:has(.has-document-page),
  .app-shell.has-document-page {
    background: none;
    min-height: 0;
  }

  .has-document-page .app-header {
    background: none;
    box-shadow: none;
    min-height: 0;
    padding: 0 0 var(--space-3);
    position: static;
  }

  .has-document-page .main-content,
  .has-document-page .document-column {
    margin: 0;
    max-width: none;
    padding: 0;
  }

  .has-document-page .doc-layout {
    display: block;
    min-height: 0;
  }
}

/* What's New */
.whats-new-page h1 {
  margin-bottom: 0;
}

.whats-new-toolbar {
  margin: calc(-1 * var(--space-2)) 0 var(--space-5);
}

.whats-new-filters {
  background: var(--surface-muted);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-full);
  display: inline-flex;
  gap: var(--space-0-5);
  padding: var(--space-1);
}

.whats-new-filter {
  background: transparent;
  border: 0;
  border-radius: var(--radius-full);
  box-shadow: none;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  min-height: 30px;
  padding: 0 var(--space-4);
}

.whats-new-filter[aria-pressed="true"] {
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--text);
}

.whats-new-group {
  margin-bottom: var(--space-7);
}

.whats-new-group-title {
  align-items: center;
  color: var(--text-muted);
  display: flex;
  font-size: var(--text-xs);
  font-weight: 700;
  gap: var(--space-2);
  letter-spacing: 0.06em;
  margin: 0 0 var(--space-3);
  text-transform: uppercase;
}

.whats-new-group-count {
  background: var(--surface-muted);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  letter-spacing: 0;
  padding: var(--space-0-5) var(--space-2);
}

.whats-new-list {
  display: grid;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.whats-new-item {
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.whats-new-item.is-unseen {
  border-color: var(--accent-border);
  box-shadow: var(--indicator-left), var(--shadow-sm);
}

.whats-new-item:hover {
  border-color: var(--accent-border);
  box-shadow: var(--shadow);
}

.whats-new-item.is-unseen:hover {
  box-shadow: var(--indicator-left), var(--shadow);
}

.whats-new-link {
  color: inherit;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  text-decoration: none;
}

.whats-new-heading {
  align-items: center;
  display: flex;
  gap: var(--space-3);
}

.whats-new-title {
  color: var(--text);
  flex: 1;
  font-size: var(--text-base);
  font-weight: 650;
}

.whats-new-link:hover .whats-new-title {
  color: var(--accent-text);
}

.whats-new-kind {
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: var(--space-1) var(--space-2);
  text-transform: uppercase;
}

.whats-new-kind.is-new {
  background: var(--success-bg);
  color: var(--success-text);
}

.whats-new-kind.is-updated {
  background: var(--info-bg);
  color: var(--info-text);
}

.whats-new-unseen {
  background: var(--accent-fill);
  border-radius: var(--radius-full);
  height: 8px;
  overflow: hidden;
  text-indent: -999px;
  width: 8px;
}

.whats-new-meta {
  align-items: center;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--text-sm);
  gap: var(--space-2);
}

.whats-new-meta .content-type-badge {
  margin: 0 0 0 var(--space-1);
  min-height: 20px;
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
}

.whats-new-note {
  background: var(--surface-muted);
  border-radius: var(--radius-sm);
  margin-top: var(--space-1);
  padding: var(--space-3) var(--space-3);
}

.whats-new-note-label {
  align-items: center;
  color: var(--text-muted);
  display: inline-flex;
  font-size: var(--text-xs);
  font-weight: 700;
  gap: var(--space-1);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.whats-new-note-label::before {
  color: var(--accent-text);
  content: "✦";
  font-size: var(--text-xs);
  letter-spacing: 0;
}

.whats-new-note-source {
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.whats-new-note-source::before {
  content: "· ";
}

.whats-new-note p {
  color: var(--text-body);
  font-size: var(--text-sm);
  line-height: 1.55;
  margin: var(--space-1) 0 0;
}

.whats-new-empty {
  background: var(--surface);
  border: var(--border-width) dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-muted);
  padding: var(--space-8);
  text-align: center;
}

/* Gap Analysis (decision 0040) */
.gap-page {
  --gap-answered: var(--success-solid);
  --gap-partly: var(--warn-solid);
  --gap-unanswered: var(--chart-negative);
  /* Partly answered is striped as well as amber, so the three outcomes differ without colour. */
  --gap-partly-pattern: repeating-linear-gradient(135deg, transparent 0 3px, color-mix(in srgb, var(--surface) 55%, transparent) 3px 5px);
  max-width: 1120px;
}

.gap-heading {
  align-items: flex-start;
  display: flex;
  gap: var(--space-6);
  justify-content: space-between;
}

.gap-heading h1 {
  align-items: center;
  display: flex;
  gap: var(--space-3);
}

.gap-heading .lede {
  max-width: 680px;
}

.gap-plan-badge {
  background: var(--accent-soft);
  border: var(--border-width) solid var(--accent-border);
  border-radius: var(--radius-full);
  color: var(--accent-text);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: var(--space-1) var(--space-3);
}

.gap-link-button,
.gap-link-button:hover {
  background: none;
  border: 0;
  color: var(--accent-text);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 0;
}

.gap-link-button:hover {
  text-decoration: underline;
}

.gap-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-4);
}

.gap-updated {
  align-self: center;
  margin: 0 0 0 auto;
}

.gap-empty {
  background: var(--surface);
  border: var(--border-width) dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-secondary);
  margin: 0;
  padding: var(--space-5) var(--space-5);
}

.gap-segmented {
  background: var(--surface-muted);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-full);
  display: inline-flex;
  gap: var(--space-0-5);
  padding: var(--space-1);
}

.gap-segment,
.gap-segment:hover {
  background: transparent;
  border: 0;
  border-radius: var(--radius-full);
  box-shadow: none;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  min-height: 30px;
  padding: 0 var(--space-4);
}

.gap-segment[aria-pressed="true"] {
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--text);
}

.gap-tiles {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: var(--space-4);
}

.gap-tile {
  background: var(--surface);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  display: grid;
  align-content: start;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-4);
}

.gap-tile.is-link {
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.gap-tile.is-link:hover,
.gap-tile.is-link:focus-visible {
  border-color: var(--accent-border);
  box-shadow: var(--shadow);
}

.gap-tile.is-attention {
  box-shadow: var(--indicator-left), var(--shadow-sm);
}

.gap-tile-label {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  margin: 0;
}

.gap-tile-value {
  color: var(--text);
  font-size: var(--text-2xl);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
}

.gap-tile-detail {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  line-height: 1.4;
  margin: 0;
}

.gap-outcome-bar {
  border-radius: var(--radius-xs);
  display: flex;
  gap: var(--space-0-5);
  height: 10px;
  margin: var(--space-1) 0 var(--space-0-5);
  overflow: hidden;
  width: 100%;
}

.gap-outcome-part {
  min-width: 3px;
}

.gap-outcome-part.is-answered,
.gap-stack-part.is-answered,
.gap-swatch.is-answered {
  background: var(--gap-answered);
}

.gap-outcome-part.is-partly,
.gap-stack-part.is-partly,
.gap-swatch.is-partly {
  background: var(--gap-partly-pattern), var(--gap-partly);
}

.gap-swatch.is-faded {
  background: var(--gap-answered);
  opacity: 0.35;
}

.gap-outcome-part.is-unanswered,
.gap-stack-part.is-unanswered,
.gap-swatch.is-unanswered {
  background: var(--gap-unanswered);
}

.gap-chart-panel {
  margin-bottom: var(--space-5);
  padding: var(--space-5) var(--space-5);
}

.gap-panel-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.gap-panel-head h2 {
  font-size: var(--text-base);
  margin: 0;
  margin-right: auto;
}

.gap-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.gap-legend-item {
  align-items: center;
  color: var(--text-secondary);
  display: inline-flex;
  font-size: var(--text-sm);
  gap: var(--space-2);
}

.gap-swatch {
  border-radius: var(--radius-xs);
  display: inline-block;
  flex: 0 0 auto;
  height: 12px;
  width: 12px;
}

.gap-chart {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: auto 1fr;
  height: 220px;
}

.gap-chart-axis {
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  justify-content: space-between;
  padding-bottom: var(--space-6);
  text-align: right;
}

.gap-chart-axis span {
  transform: translateY(-50%);
}

.gap-chart-axis span:last-child {
  transform: translateY(50%);
}

.gap-chart-plot {
  align-items: stretch;
  background-image: linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  background-position: 0 0;
  background-repeat: repeat-y;
  background-size: 100% calc((100% - 22px) / 2);
  display: flex;
  gap: var(--space-2);
  position: relative;
}

.gap-column {
  border-radius: var(--radius-sm);
  cursor: default;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  outline: none;
  position: relative;
}

.gap-column::before {
  border-top: var(--border-width) solid var(--border-strong);
  bottom: 22px;
  content: "";
  left: -3px;
  position: absolute;
  right: -3px;
}

.gap-column.is-outside .gap-stack {
  opacity: 0.35;
}

.gap-column.is-active,
.gap-column:focus-visible {
  background: color-mix(in srgb, var(--text) 5%, transparent);
}

.gap-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  margin: 0 auto var(--space-6);
  max-width: 40px;
  width: 70%;
}

.gap-stack-part {
  min-height: 2px;
}

.gap-stack-part:first-child {
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
}

.gap-column-label {
  bottom: 0;
  color: var(--text-muted);
  font-size: var(--text-xs);
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}

.gap-tooltip {
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  display: grid;
  font-size: var(--text-xs);
  gap: var(--space-1);
  min-width: 170px;
  padding: var(--space-3) var(--space-3);
  pointer-events: none;
  position: absolute;
  top: 0;
  z-index: 2;
}

.gap-tooltip[hidden] {
  display: none;
}

.gap-tooltip-line {
  align-items: center;
  color: var(--text-secondary);
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 10px 1fr auto;
}

.gap-tooltip-line.is-total {
  border-top: var(--border-width) solid var(--border);
  color: var(--text);
  font-weight: 600;
  padding-top: var(--space-1);
}

.gap-tooltip-value {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.gap-sources {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin: var(--space-3) 0 0;
}

.gap-section-head {
  align-items: flex-end;
  border-bottom: var(--border-width) solid var(--border-strong);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-8);
  margin-bottom: var(--space-4);
  scroll-margin-top: calc(var(--app-header-height) + 16px);
}

.gap-section-title {
  color: var(--text);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0;
  padding-bottom: var(--space-2);
}

.gap-tabs {
  display: flex;
  gap: var(--space-1);
}

.gap-tab,
.gap-tab:hover {
  background: none;
  border: 0;
  border-bottom: var(--border-width-strong) solid transparent;
  border-radius: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: calc(-1 * var(--space-px));
  padding: var(--space-3) var(--space-4);
}

.gap-tab:hover {
  color: var(--text);
}

.gap-tab[aria-selected="true"] {
  border-bottom-color: var(--accent-fill);
  color: var(--text);
}

.gap-tab-count {
  background: var(--surface-muted);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  padding: var(--space-px) var(--space-2);
}

.gap-tab-intro {
  color: var(--text-secondary);
  font-size: var(--text-base);
  margin: 0 0 var(--space-4);
  max-width: 760px;
}

.gap-list {
  display: grid;
  gap: var(--space-4);
}

.gap-card {
  background: var(--surface);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: var(--space-3);
  grid-template-columns: minmax(0, 1fr);
  padding: var(--space-5) var(--space-5) var(--space-4);
}

.gap-card.is-done {
  background: var(--surface-muted);
  border-style: dashed;
  box-shadow: none;
}

.gap-card.is-done .gap-card-title,
.gap-card.is-done .gap-card-head h3 {
  color: var(--text-secondary);
}

.gap-card-top,
.gap-card-head {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  justify-content: space-between;
}

.gap-card-title,
.gap-card-head h3 {
  color: var(--text);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0;
}

.gap-card-top .gap-card-title {
  flex: 1 1 320px;
  min-width: 0;
}

/* Quiet metadata beside the title: text with a small icon, no pill, so the title leads. */
.gap-badges {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
  padding-top: var(--space-1);
}

.gap-trend,
.gap-kind {
  align-items: center;
  color: var(--text-secondary);
  display: inline-flex;
  font-size: var(--text-sm);
  font-weight: 500;
  gap: var(--space-1);
  line-height: 1.4;
  white-space: nowrap;
}

.gap-trend .icon,
.gap-kind .icon {
  color: var(--text-secondary);
  flex: 0 0 auto;
}

/* Plain metadata: a muted label and its value beside a small icon. No box, so it never reads as a button. */
.gap-kind {
  cursor: default;
  max-width: 100%;
  white-space: normal;
}

.gap-kind-label {
  color: var(--text-secondary);
  font-weight: 400;
}

.gap-kind-value {
  color: var(--text);
  font-weight: 500;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Rising demand is something to act on, so it takes the attention colour; new topics take the accent. */
.gap-trend.is-rising,
.gap-trend.is-rising .icon {
  color: var(--warn-text);
}

.gap-trend.is-new,
.gap-trend.is-new .icon {
  color: var(--accent-text);
}

.gap-card-summary {
  color: var(--text-secondary);
  font-size: var(--text-base);
  margin: calc(-1 * var(--space-2)) 0 0;
  max-width: 820px;
}

/* Two fixed-width groups, counts then outcomes, so both line up from card to card. */
.gap-card-metrics {
  align-items: center;
  display: grid;
  gap: var(--space-3) var(--space-6);
  grid-template-columns: 14rem 24rem;
  justify-content: start;
}

.gap-counts {
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: 1.4;
  margin: 0;
  white-space: nowrap;
}

.gap-counts-period {
  color: var(--text-secondary);
  display: block;
  font-size: var(--text-sm);
  margin-top: var(--space-0-5);
}

.gap-counts strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.gap-counts-separator {
  color: var(--text-muted);
  padding: 0 var(--space-2);
}

.gap-outcome {
  border-left: var(--border-width) solid var(--border-strong);
  display: grid;
  gap: var(--space-2);
  padding-left: var(--space-6);
}

.gap-outcome .gap-outcome-bar {
  margin: 0;
}

.gap-outcome-key {
  color: var(--text-secondary);
  display: grid;
  font-size: var(--text-sm);
  gap: var(--space-1) var(--space-3);
  grid-template-columns: 8rem 6.5rem auto;
  margin: 0;
}

.gap-outcome-item {
  align-items: center;
  display: inline-flex;
  gap: var(--space-1);
  white-space: nowrap;
}

.gap-outcome-item .gap-swatch {
  margin-right: var(--space-0-5);
}

.gap-outcome-item strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.gap-card-footer {
  align-items: center;
  border-top: var(--border-width) solid var(--border-strong);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  justify-content: space-between;
  padding-top: var(--space-3);
}

/* A real secondary control: 36px, an icon, and a border on hover so it reads as a button. */
/* A text-style disclosure under the stats, left-aligned with the card content (the negative margin offsets its padding). */
button.gap-disclosure {
  color: var(--accent-text);
  font-weight: 600;
  gap: var(--space-1);
  justify-self: start;
  margin: calc(-1 * var(--space-1)) 0 0 calc(-1 * var(--space-2));
  min-height: var(--space-8);
  padding: var(--space-1) var(--space-2);
}

button.gap-disclosure:hover {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent-text);
}

button.gap-disclosure:active {
  background: var(--accent-soft-hover);
}

.gap-disclosure .icon {
  color: currentColor;
  flex: 0 0 auto;
}

.gap-disclosure > svg.icon:last-child {
  transition: transform var(--duration-fast) var(--ease);
}

.gap-disclosure[aria-expanded="true"] > svg.icon:last-child {
  transform: rotate(180deg);
}

/* Evidence sits flat in the card: no inner box, a 12–16px rhythm, sources right after the examples. */
.gap-card-details {
  display: grid;
  gap: var(--space-3) var(--space-8);
  grid-template-columns: minmax(0, max-content) minmax(16rem, 1fr);
}

.gap-card-details[hidden] {
  display: none;
}

.gap-detail-column {
  display: grid;
  align-content: start;
  gap: var(--space-2);
}

.gap-label {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  margin: 0;
}

.gap-label:not(:first-child) {
  margin-top: var(--space-2);
}

.gap-label-aside {
  color: var(--text-muted);
  font-weight: 400;
}

.gap-examples {
  display: grid;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.gap-examples li {
  color: var(--text-body);
  font-size: var(--text-base);
  line-height: 1.4;
  padding-left: var(--space-4);
  position: relative;
}

.gap-examples li::before {
  background: var(--border-hover);
  border-radius: var(--radius-full);
  content: "";
  height: var(--space-2);
  left: var(--space-0-5);
  position: absolute;
  top: 0.6em;
  width: var(--space-2);
}

.gap-doc-list {
  display: grid;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.gap-doc-list li {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  font-size: var(--text-base);
  gap: var(--space-1) var(--space-2);
}

.gap-match {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.gap-muted {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin: 0;
}

.gap-place {
  color: var(--text-body);
  font-size: var(--text-base);
  margin: 0;
}

.gap-reader-requests {
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  color: var(--text-body);
  font-size: var(--text-sm);
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3);
}

.gap-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.gap-page a.button-link {
  align-items: center;
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-sm);
  display: inline-flex;
  font-size: var(--text-sm);
  font-weight: 500;
  padding: var(--space-2) var(--space-4);
  text-decoration: none;
}

.gap-page a.button-link.primary-action {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: var(--text-on-fill);
}

.gap-page a.button-link.primary-action:hover {
  background: var(--accent-fill-hover);
}

.gap-done {
  align-items: center;
  color: var(--text-secondary);
  display: inline-flex;
  flex-wrap: wrap;
  font-size: var(--text-sm);
  gap: var(--space-1) var(--space-2);
  margin: 0;
}

.gap-done-icon {
  color: var(--success-text);
  flex: 0 0 auto;
}

.gap-table-panel {
  overflow-x: auto;
  padding: 0;
}

.gap-table {
  border-collapse: collapse;
  font-size: var(--text-sm);
  width: 100%;
}

.gap-table th {
  border-bottom: var(--border-width) solid var(--border-strong);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  white-space: nowrap;
}

.gap-table td {
  border-bottom: var(--border-width) solid var(--border);
  font-variant-numeric: tabular-nums;
  padding: var(--space-3) var(--space-4);
  vertical-align: middle;
}

.gap-table tr:last-child td {
  border-bottom: 0;
}

.gap-topic-cell {
  font-weight: 600;
}

.gap-rate-cell {
  white-space: nowrap;
}

.gap-rate {
  background: var(--surface-muted);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-xs);
  display: inline-block;
  height: 8px;
  margin-right: var(--space-2);
  overflow: hidden;
  vertical-align: middle;
  width: 90px;
}

.gap-rate-fill {
  background: var(--gap-answered);
  display: block;
  height: 100%;
}

.gap-rate-fill.is-low {
  background: var(--gap-unanswered);
}

.gap-rate-value {
  font-weight: 600;
}

.gap-attention-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gap-attention {
  padding: var(--space-5) var(--space-5);
}

.gap-attention h2 {
  font-size: var(--text-base);
  margin: 0 0 var(--space-1);
}

.gap-attention-list {
  display: grid;
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
}

.gap-attention-list li {
  align-items: baseline;
  border-top: var(--border-width) solid var(--border);
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
  padding: var(--space-3) 0;
}

.gap-attention-meta {
  color: var(--text-muted);
  font-size: var(--text-sm);
  text-align: right;
  white-space: nowrap;
}

.gap-privacy {
  align-items: flex-start;
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-secondary);
  display: flex;
  font-size: var(--text-sm);
  gap: var(--space-3);
  margin: var(--space-7) 0 var(--space-2);
  padding: var(--space-3) var(--space-4);
}

.gap-privacy p {
  margin: 0;
}

.gap-privacy-icon {
  color: var(--text-secondary);
  flex: 0 0 auto;
  margin-top: var(--space-0-5);
}

.gap-field {
  display: grid;
  font-size: var(--text-sm);
  font-weight: 600;
  gap: var(--space-1);
}

.gap-field textarea {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  resize: vertical;
}

.gap-teaser {
  margin-top: var(--space-4);
  max-width: 760px;
  padding: var(--space-7);
}

.gap-teaser h2 {
  margin: 0 0 var(--space-2);
}

.gap-teaser-lede {
  color: var(--text-body);
  font-size: var(--text-base);
}

.gap-teaser-preview {
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  filter: blur(4px);
  margin: var(--space-4) 0;
  user-select: none;
}

.gap-teaser-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
}

.gap-teaser-row + .gap-teaser-row {
  border-top: var(--border-width) solid var(--border);
}

.gap-teaser-list {
  color: var(--text-body);
  margin: 0 0 var(--space-5);
  padding-left: var(--space-5);
}

@media (max-width: 960px) {
  .gap-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gap-card-details,
  .gap-attention-grid {
    grid-template-columns: 1fr;
  }

  .gap-heading {
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .gap-segmented {
    border-radius: var(--radius);
    flex-wrap: wrap;
  }

  .gap-tabs {
    overflow-x: auto;
  }

  .gap-card-metrics {
    grid-template-columns: minmax(0, 1fr);
  }

  .gap-outcome {
    border-left: 0;
    padding-left: 0;
  }

  .gap-outcome-key {
    display: flex;
    flex-wrap: wrap;
  }

  .gap-section-head {
    gap: 0;
  }

  .gap-section-head .gap-tabs {
    max-width: 100%;
  }

  .gap-tab {
    white-space: nowrap;
  }

  .gap-chart-plot {
    gap: var(--space-0-5);
  }
}

.gap-page .panel {
  background: var(--surface);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* Gap Analysis conflicts (decision 0040, item 5) */
.gap-confidence {
  align-items: center;
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  display: inline-flex;
  font-size: var(--text-xs);
  font-weight: 600;
  gap: var(--space-1);
  line-height: 1.5;
  padding: var(--space-0-5) var(--space-3);
  white-space: nowrap;
}

.gap-confidence.is-clear {
  background: var(--error-bg);
  border-color: var(--error-border);
  color: var(--error-text);
}

.gap-confidence.is-possible {
  background: var(--warn-bg);
  border-color: var(--warn-border);
  color: var(--warn-text);
}

.gap-sides {
  align-items: stretch;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.gap-versus {
  align-self: center;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
}

.gap-quote {
  background: var(--surface-muted);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-sm);
  margin: 0;
  padding: var(--space-3) var(--space-4);
}

.gap-quote figcaption {
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.gap-quote blockquote {
  border: 0;
  color: var(--text-body);
  font-size: var(--text-base);
  margin: 0;
  padding: 0;
}

.gap-hint {
  color: var(--text-body);
  font-size: var(--text-base);
  margin: 0;
}

.gap-card.is-done .gap-sides,
.gap-card.is-done .gap-hint {
  display: none;
}

.gap-quote-actions {
  font-size: var(--text-sm);
  margin: var(--space-2) 0 0;
}

@media (max-width: 640px) {
  .gap-sides {
    grid-template-columns: 1fr;
  }

  .gap-versus {
    justify-self: center;
  }
}

/* Gap Analysis drafts (decision 0040, item 7). The dialog sits outside .gap-page, so it sets its own colour. */
.gap-draft-modal {
  --gap-answered: var(--success-solid);
  max-width: 760px;
}

.gap-draft-note {
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  margin: 0;
  padding: var(--space-2) var(--space-3);
}

.gap-draft-form {
  display: grid;
  gap: var(--space-3);
}

.gap-draft-meta {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.gap-draft-addition pre {
  background: var(--code-bg);
  border: var(--border-width) solid var(--border);
  border-left: var(--border-width-accent) solid var(--gap-answered);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  margin: 0;
  padding: var(--space-2) var(--space-3);
  white-space: pre-wrap;
}

.gap-draft-findings ul {
  margin: 0;
  padding-left: var(--space-5);
}

.gap-draft-findings,
.gap-draft-error {
  color: var(--warn-text);
  font-size: var(--text-sm);
}

.gap-draft-error {
  color: var(--error-text);
  margin: 0;
}

/* Selected tabs, segments and pressed toggles still answer the pointer, so every control has a hover state. */
.doc-tabs button:hover,
.gap-tab:hover,
.gap-tab[aria-selected="true"]:hover {
  background: var(--surface-hover);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.suggestion-review-view-button.is-active:hover {
  border-color: var(--border-hover);
  color: var(--text);
}

:is(.editor-toolbar, .editor-table-group) .editor-toolbar-button[aria-pressed="true"]:hover,
:is(.editor-toolbar, .editor-table-group) .editor-toolbar-button.is-active:hover {
  background: var(--accent-soft-hover);
  border-color: var(--accent-fill);
}

/* Segmented controls: Ask/Search in the composer, Visual/Markdown in the editor and Markdown/Preview in review
   share one look, so "which mode am I in" reads the same everywhere. */
:is(.chat-mode-toggle, .editor-modebar, .suggestion-review-view-toggle) {
  align-items: center;
  background: var(--surface-muted);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-full);
  display: inline-flex;
  gap: var(--space-0-5);
  padding: var(--space-0-5);
}

:is(.chat-mode-toggle .chat-mode-button, .editor-modebar .editor-mode-button, .suggestion-review-view-toggle .suggestion-review-view-button) {
  background: transparent;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-full);
  box-shadow: none;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  gap: var(--space-1);
  min-height: var(--control-height-sm);
  padding: 0 var(--space-3);
}

:is(.chat-mode-toggle .chat-mode-button, .editor-modebar .editor-mode-button, .suggestion-review-view-toggle .suggestion-review-view-button):hover {
  background: var(--surface-hover);
  border-color: transparent;
  color: var(--text);
}

:is(.chat-mode-toggle .chat-mode-button, .editor-modebar .editor-mode-button, .suggestion-review-view-toggle .suggestion-review-view-button)[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  box-shadow: var(--shadow-sm);
  color: var(--accent-text);
  font-weight: var(--weight-semibold);
}

:is(.chat-mode-toggle .chat-mode-button, .editor-modebar .editor-mode-button, .suggestion-review-view-toggle .suggestion-review-view-button)[aria-pressed="true"]:hover {
  background: var(--accent-soft-hover);
  border-color: var(--accent-fill);
  color: var(--accent-text);
}

/* A Playbook's Sign-in page notes the Organization's rules it adds to (decision 0042). */
.sign-in-policy-organization {
  background: var(--surface-muted);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
}

.sign-in-policy-organization p {
  margin: var(--space-1) 0 0;
}