/* Reliquary web UI. Design system: docs/research/ui-design-system.md.

   Conventional first: neutral warm grays, one sans (Inter, self-hosted),
   sentence case everywhere, small radii, borders rather than shadows, and
   functional colors with fixed meanings (blue links and focus, green
   success, amber attention, red danger). Vermilion is the brand: the logo
   diamond, "you are here" bars, the Review count and text selection. It
   never means danger and is never used for text. Filled and hollow diamonds
   mark canon and open.

   No client script (the CSP forbids it): menus are <details>, header buttons
   submit forms further down with form="". */

/* Inter is the design's deliberate choice: the most common neutral UI face,
   which is the point (see the design doc's Font section). */
@font-face {
  /* impeccable-disable-next-line overused-font -- chosen in docs/research/ui-design-system.md */
  font-family: "Inter";
  src: url("/fonts/inter-latin-opsz-normal.woff2") format("woff2-variations"), url("/fonts/inter-latin-opsz-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  /* impeccable-disable-next-line overused-font -- chosen in docs/research/ui-design-system.md */
  font-family: "Inter";
  src: url("/fonts/inter-latin-wght-italic.woff2") format("woff2-variations"), url("/fonts/inter-latin-wght-italic.woff2") format("woff2");
  font-weight: 100 900; font-style: italic; font-display: swap;
}

/* Tokens ------------------------------------------------------------------ */

:root {
  color-scheme: light;

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

  --text-xs: 0.75rem;   --lh-xs: 1rem;
  --text-sm: 0.875rem;  --lh-sm: 1.25rem;
  --text-md: 1rem;      --lh-md: 1.5rem;
  --text-lg: 1.125rem;  --lh-lg: 1.75rem;
  --text-xl: 1.25rem;   --lh-xl: 1.75rem;
  --text-2xl: 1.5rem;   --lh-2xl: 2rem;

  --space-1: 2px;  --space-2: 4px;  --space-3: 8px;  --space-4: 12px; --space-5: 16px;
  --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-full: 999px;

  --control-sm: 28px;
  --control-md: 36px;
  --topbar-h: 56px;
  --sidebar-w: 248px;
  --content-max: 1280px;
  --measure: 60ch; /* about 75 characters of Inter: "ch" is the wide zero */

  /* Light */
  --bg: #ffffff;
  --bg-subtle: #f7f6f5;
  --bg-muted: #efedeb;
  --border: #e2dfdc;
  --border-strong: #8c8580;
  --fg: #1c1917;
  --fg-muted: #5c5652;
  --link: #0a58ca;
  --brand: #e8393a;
  --brand-strong: #c8302c;
  --on-brand: #ffffff;
  --primary-bg: #1c1917;
  --primary-hover: #3b3633;
  --primary-fg: #ffffff;
  --success: #1a7f37;      --success-bg: #dafbe1;
  --attention: #9a6700;    --attention-bg: #fff8c5;
  --danger: #cf222e;       --danger-bg: #ffebe9;
  --info: #0a58ca;         --info-bg: #ddf4ff;
  --diff-add: #e6ffec;     --diff-add-word: #abf2bc;
  --diff-del: #ffebe9;     --diff-del-word: #ffcecb;
  --diff-word-fg: #1c1917;
  --selection: rgb(232 57 58 / 0.22);
  --shadow-menu: 0 8px 24px -6px rgb(28 25 23 / 0.18), 0 0 0 1px var(--border);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #141312;
    --bg-subtle: #1c1a19;
    --bg-muted: #262322;
    --border: #34302e;
    --border-strong: #6f6863;
    --fg: #edebe9;
    --fg-muted: #a8a19c;
    --link: #6cb6ff;
    --brand: #ff5f57;
    --brand-strong: #ff5f57;
    --on-brand: #141312;
    --primary-bg: #edebe9;
    --primary-hover: #d3cfcc;
    --primary-fg: #141312;
    --success: #6bc46d;      --success-bg: #1b2e1f;
    --attention: #d4a72c;    --attention-bg: #2e2615;
    --danger: #ff7b72;       --danger-bg: #3a1d1b;
    --info: #6cb6ff;         --info-bg: #172a3d;
    --diff-add: #1b3524;     --diff-add-word: #2b6a3c;
    --diff-del: #40201f;     --diff-del-word: #7a2e2b;
    --diff-word-fg: #ffffff;
    --selection: rgb(255 95 87 / 0.3);
    --shadow-menu: 0 8px 24px -6px rgb(0 0 0 / 0.6), 0 0 0 1px var(--border);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141312;
  --bg-subtle: #1c1a19;
  --bg-muted: #262322;
  --border: #34302e;
  --border-strong: #6f6863;
  --fg: #edebe9;
  --fg-muted: #a8a19c;
  --link: #6cb6ff;
  --brand: #ff5f57;
  --brand-strong: #ff5f57;
  --on-brand: #141312;
  --primary-bg: #edebe9;
  --primary-hover: #d3cfcc;
  --primary-fg: #141312;
  --success: #6bc46d;      --success-bg: #1b2e1f;
  --attention: #d4a72c;    --attention-bg: #2e2615;
  --danger: #ff7b72;       --danger-bg: #3a1d1b;
  --info: #6cb6ff;         --info-bg: #172a3d;
  --diff-add: #1b3524;     --diff-add-word: #2b6a3c;
  --diff-del: #40201f;     --diff-del-word: #7a2e2b;
  --diff-word-fg: #ffffff;
  --selection: rgb(255 95 87 / 0.3);
  --shadow-menu: 0 8px 24px -6px rgb(0 0 0 / 0.6), 0 0 0 1px var(--border);
}

/* Base -------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--bg);
  scrollbar-color: var(--border-strong) transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--lh-md);
  font-optical-sizing: auto;
  font-variant-numeric: tabular-nums;
  caret-color: var(--brand);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex; flex-direction: column; min-height: 100vh;
}
/* Closed disclosures render nothing, whatever the browser's default. */
details:not([open]) > :not(summary) { display: none; }
::selection { background: var(--selection); color: var(--fg); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}
a:hover { text-decoration-color: currentColor; }

code, pre, kbd { font-family: var(--font-mono); }
code { font-size: 0.875em; background: var(--bg-muted); padding: 1px 5px; border-radius: var(--radius-sm); overflow-wrap: anywhere; }
strong { font-weight: 600; }

.skip {
  position: absolute; left: var(--space-5); top: -100px; z-index: 10;
  background: var(--primary-bg); color: var(--primary-fg); padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500; text-decoration: none;
}
.skip:focus { top: var(--space-3); }

/* Top bar ----------------------------------------------------------------- */

.top { background: var(--bg-subtle); border-bottom: 1px solid var(--border); }
.top-inner {
  max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-6);
  min-height: var(--topbar-h);
  display: flex; align-items: center; gap: var(--space-7);
}
.wordmark {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  color: var(--fg); text-decoration: none;
  font-size: var(--text-md); font-weight: 600; letter-spacing: -0.01em;
  min-height: var(--control-md);
}
.logo { width: 10px; height: 10px; background: var(--brand); transform: rotate(45deg); flex: none; }
.top nav { display: flex; align-items: stretch; gap: var(--space-2); align-self: stretch; }
.top nav a {
  display: inline-flex; align-items: center; gap: 6px; position: relative;
  padding: 0 var(--space-3); color: var(--fg-muted); text-decoration: none;
  font-size: var(--text-sm); font-weight: 500; white-space: nowrap;
}
.top nav a:hover { color: var(--fg); }
.top nav a[aria-current="page"] { color: var(--fg); }
.top nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: -1px;
  height: 2px; background: var(--brand); border-radius: 2px 2px 0 0;
}
.top nav a:focus-visible { outline-offset: -2px; border-radius: var(--radius-md); }
.count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-full);
  font-size: var(--text-xs); line-height: 1; font-weight: 600;
  background: var(--bg-muted); color: var(--fg);
}
.top nav .count { background: var(--brand-strong); color: var(--on-brand); }

/* Account menu */
.account { margin-left: auto; }
.menu-wrap { position: relative; }
.menu-wrap > summary { list-style: none; }
.menu-wrap:not([open]) > .menu { display: none; }
.menu-wrap > summary::-webkit-details-marker { display: none; }
.menu-wrap > summary::after {
  content: ""; width: 6px; height: 6px; margin: -3px 2px 0 2px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
}
.menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 5;
  width: max-content; min-width: 240px; max-width: calc(100vw - 32px);
  background: var(--bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-menu);
  padding: var(--space-4); display: grid; gap: var(--space-4);
}
.menu-meta { margin: 0; font-size: var(--text-sm); color: var(--fg-muted); }
.menu-meta strong { color: var(--fg); }
.menu-label { font-size: var(--text-sm); font-weight: 600; }
.theme { display: grid; gap: var(--space-3); margin: 0; }

/* Layout ------------------------------------------------------------------- */

main { flex: 1; width: 100%; max-width: var(--content-max); margin: 0 auto; padding: var(--space-7) var(--space-6) var(--space-10); }
footer {
  border-top: 1px solid var(--border); color: var(--fg-muted); font-size: var(--text-sm);
}
footer {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); justify-content: space-between;
  max-width: var(--content-max); width: 100%; margin: 0 auto; padding: var(--space-6);
}

/* Vault shell: sidebar + content */
.vault { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); gap: var(--space-7); align-items: start; }
.content { min-width: 0; }

/* Type ---------------------------------------------------------------------- */

h1 {
  font-size: var(--text-2xl); line-height: var(--lh-2xl); font-weight: 600; letter-spacing: -0.01em;
  margin: 0; text-wrap: balance;
}
h1.path { overflow-wrap: anywhere; }
h2 {
  font-size: var(--text-lg); line-height: var(--lh-lg); font-weight: 600;
  margin: var(--space-8) 0 var(--space-4);
}
p { margin: 0 0 var(--space-4); max-width: var(--measure); }
.lede { color: var(--fg-muted); max-width: var(--measure); margin-bottom: var(--space-6); }
.muted { color: var(--fg-muted); }
.small { font-size: var(--text-sm); line-height: var(--lh-sm); }
.meta { color: var(--fg-muted); font-size: var(--text-sm); line-height: var(--lh-sm); margin: 0; }
.meta span + span::before { content: "·"; margin: 0 var(--space-3); }

/* Page header ---------------------------------------------------------------- */

.page-head { margin: 0 0 var(--space-6); display: grid; gap: var(--space-3); }
.crumb { font-size: var(--text-sm); line-height: var(--lh-sm); margin: 0; color: var(--fg-muted); overflow-wrap: anywhere; }
.crumb a { color: var(--fg-muted); text-decoration: none; }
.crumb a:hover { color: var(--link); text-decoration: underline; }
.page-title-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-4) var(--space-6); }
.page-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); min-width: 0; flex: 1 1 20rem; }
.page-title h1 { min-width: 0; }
.page-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.page-head .rule { margin: 0; }
.form-title { margin-top: 0; }

/* Buttons ------------------------------------------------------------------ */

.button, button, .segmented > a {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  min-height: var(--control-md); padding: 0 14px;
  font: 500 var(--text-sm)/1.2 var(--font-sans); letter-spacing: 0;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--bg); color: var(--fg); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out;
}
.button:hover, button:hover, .segmented > a:hover { background: var(--bg-subtle); border-color: var(--fg-muted); }
.button:active, button:active { background: var(--bg-muted); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

.primary, a.button.primary { background: var(--primary-bg); border-color: var(--primary-bg); color: var(--primary-fg); }
.primary:hover, a.button.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.primary:active { background: var(--primary-hover); }

.danger { color: var(--danger); border-color: var(--danger); }
.danger:hover { background: var(--danger-bg); border-color: var(--danger); }

/* Ghost: Cancel, toolbar actions, the account menu. */
.quiet { background: transparent; border-color: transparent; color: var(--fg-muted); }
.quiet:hover { background: var(--bg-muted); border-color: transparent; color: var(--fg); }

.actions { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; margin: var(--space-5) 0 0; }
.actions form { margin: 0; }

/* Segmented: a row of buttons or links, one current. */
.segmented { display: inline-flex; }
.segmented > a, .segmented > button { border-radius: 0; margin-left: -1px; min-height: var(--control-sm); padding: 0 12px; font-size: 0.8125rem; }
.segmented > :first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); margin-left: 0; }
.segmented > :last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.segmented > [aria-current="page"], .segmented > [aria-pressed="true"] {
  background: var(--bg-muted); color: var(--fg); font-weight: 600; position: relative; z-index: 1;
}
.segmented > :focus-visible { position: relative; z-index: 2; }

/* Forms --------------------------------------------------------------------- */

form.panel {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6) var(--space-6); margin: 0 0 var(--space-6); max-width: 80ch;
}
label { display: block; font-weight: 600; font-size: var(--text-sm); line-height: var(--lh-sm); margin: var(--space-5) 0 6px; }
form.panel > label:first-of-type, form > label:first-child { margin-top: 0; }
.hint { color: var(--fg-muted); font-size: var(--text-sm); line-height: var(--lh-sm); margin: var(--space-2) 0 0; font-weight: 400; }
input[type="text"], input[type="search"], input[type="date"], textarea, select {
  width: 100%; min-height: var(--control-md);
  font: 400 var(--text-md)/1.4 var(--font-sans); color: var(--fg);
  background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  padding: 6px 12px; transition: border-color 120ms ease-out;
}
input::placeholder, textarea::placeholder { color: var(--fg-muted); opacity: 1; }
input[type="text"]:hover, input[type="search"]:hover, input[type="date"]:hover, textarea:hover, select:hover { border-color: var(--fg-muted); }
input[type="text"]:focus-visible, input[type="search"]:focus-visible, input[type="date"]:focus-visible,
textarea:focus-visible, select:focus-visible { outline: 2px solid var(--link); outline-offset: 0; border-color: var(--link); }
textarea { min-height: 280px; resize: vertical; line-height: 1.6; padding: 10px 12px; }
textarea.short { min-height: 96px; }
textarea.note-field { min-height: 0; }
select { width: auto; min-width: 10rem; max-width: 100%; padding-right: 32px; }
input.narrow { width: 5rem; }
input[type="radio"], input[type="checkbox"] { accent-color: var(--fg); width: 16px; height: 16px; margin: 0; }

.fields { display: grid; grid-template-columns: minmax(0, 1fr) 10rem 7rem; gap: var(--space-4); align-items: end; }
.fields label { margin-top: 0; }
.fields select { width: 100%; }
.inline-field { display: flex; gap: var(--space-3); align-items: stretch; }
.inline-field input { flex: 1; }
.result { margin: var(--space-4) 0 0; }

/* Forms with radio or checkbox choices (tokens, new vault) */
:is(.token-form, .choice-form) fieldset { border: 0; padding: 0; margin: var(--space-5) 0 0; min-width: 0; }
:is(.token-form, .choice-form) legend { font-weight: 600; font-size: var(--text-sm); padding: 0; margin-bottom: var(--space-2); }
:is(.token-form, .choice-form) label.choice {
  display: flex; align-items: center; gap: 10px; margin: 0; min-height: 32px;
  font-weight: 400; font-size: var(--text-md); line-height: var(--lh-md); cursor: pointer;
}
.token-form .choice input, .choice-form .choice input { flex: none; }
/* A choice with a sentence after it: the control aligns with the first line. */
.choice-form label.choice { align-items: flex-start; }
.choice-form label.choice input { margin-top: 4px; }
.token-form .choice-list { margin: 0 0 0 7px; padding-left: 18px; border-left: 1px solid var(--border); }
.token-form select.token-expiry { min-width: 12rem; }

/* Callouts ------------------------------------------------------------------ */

.callout {
  display: block; max-width: 62ch; margin: 0 0 var(--space-5);
  padding: var(--space-4) var(--space-5); border: 1px solid; border-radius: var(--radius-lg);
  font-size: var(--text-sm); line-height: var(--lh-sm);
  background: var(--bg-subtle); border-color: var(--border); color: var(--fg);
}
.callout > :last-child { margin-bottom: 0; }
.callout p { margin: 0 0 var(--space-3); }
.callout.info { background: var(--info-bg); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.callout.success { background: var(--success-bg); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.callout.attention { background: var(--attention-bg); border-color: color-mix(in srgb, var(--attention) 35%, transparent); }
.callout.danger { background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.callout.neutral { color: var(--fg-muted); }
.callout form { margin: 0; }
.flash { margin-bottom: var(--space-6); }

/* The one-time token: an attention callout with the secret in a mono field. */
.reveal strong { display: block; font-size: var(--text-md); }
.reveal p { margin: var(--space-2) 0 0; }
.secret {
  font: 500 var(--text-sm)/1.5 var(--font-mono); color: var(--fg);
  word-break: break-all; user-select: all;
  background: var(--bg); padding: 10px 12px; margin-top: var(--space-4) !important;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
}

/* Badges -------------------------------------------------------------------- */

.badge {
  display: inline-flex; align-items: center; gap: 6px; vertical-align: middle;
  min-height: 20px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: var(--text-xs); line-height: var(--lh-xs); font-weight: 500; white-space: nowrap;
  background: var(--bg-muted); color: var(--fg-muted);
}
.badge.info, .state.open { background: var(--info-bg); color: var(--info); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.badge.success, .state.applied { background: var(--success-bg); color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.badge.attention, .state.changes_requested { background: var(--attention-bg); color: var(--attention); border-color: color-mix(in srgb, var(--attention) 35%, transparent); }
.badge.danger { background: var(--danger-bg); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.page-title .badge { min-height: 24px; font-size: var(--text-sm); }

/* Canon: filled diamond. Open: hollow diamond on an outline badge. */
.policy::before { content: ""; width: 6px; height: 6px; flex: none; transform: rotate(45deg); }
.policy.canon { color: var(--fg); }
.policy.canon::before { background: currentColor; }
.policy.open { background: transparent; border-color: var(--border-strong); }
.policy.open::before { box-shadow: inset 0 0 0 1.25px currentColor; }

/* Boxes: lists and tables ------------------------------------------------- */

.rows {
  list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg); overflow: hidden;
}
.rows li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5);
  padding: var(--space-4) var(--space-5); min-height: 56px; border-top: 1px solid var(--border);
}
.rows li:first-child { border-top: 0; }
.rows li:hover { background: var(--bg-subtle); }
.rows .name { font-weight: 500; color: var(--fg); text-decoration: none; overflow-wrap: anywhere; }
.rows .name:hover { color: var(--link); text-decoration: underline; }
.rows li form { margin: 0; flex: none; }
.rows .row-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-3) var(--space-4); flex: none; }
.results li { display: block; }
.rows + p { margin-top: var(--space-4); }
.results .snippet { display: block; color: var(--fg-muted); font-size: var(--text-sm); line-height: var(--lh-sm); margin-top: var(--space-2); max-width: var(--measure); }
.results .badge { margin-left: var(--space-2); }

.table-wrap { overflow-x: auto; }
table {
  width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); line-height: var(--lh-sm);
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg); overflow: hidden;
}
th, td { text-align: left; padding: 10px var(--space-5); border-top: 1px solid var(--border); vertical-align: middle; }
tr:first-child > th, tr:first-child > td { border-top: 0; }
th { font-size: 0.8125rem; font-weight: 600; color: var(--fg-muted); background: var(--bg-subtle); white-space: nowrap; }
td { height: 40px; }
tr:hover > td { background: var(--bg-subtle); }
td a { color: var(--fg); text-decoration: none; font-weight: 500; }
td a:hover { color: var(--link); text-decoration: underline; }
td.num, th.num { text-align: right; }
td form { margin: 0; }
td .button, td button { min-height: var(--control-sm); padding: 0 10px; font-size: 0.8125rem; }
td .quiet { color: var(--fg-muted); }
a.dir { font-weight: 600; }
.prose .table-wrap, .prose table { border: 0; }

.token-list .token-client, .env-log .token-client { display: block; color: var(--fg-muted); }
.token-list tr.inactive td:not(.num) { color: var(--fg-muted); }
/* Members: a role picker in a table cell (Settings, Members). */
.role-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.role-form select { min-width: 7rem; }

/* Empty states ------------------------------------------------------------- */

.empty {
  border: 1px dashed var(--border-strong); border-radius: var(--radius-lg);
  padding: var(--space-6); text-align: center; color: var(--fg-muted);
  font-size: var(--text-sm); line-height: var(--lh-sm);
}
.empty strong { display: block; color: var(--fg); font-size: var(--text-md); margin-bottom: var(--space-2); }
.empty p { max-width: var(--measure); margin: 0 auto var(--space-4); }
.empty p:last-child { margin-bottom: 0; }

/* Tabs ----------------------------------------------------------------------- */

.tabs {
  display: flex; gap: var(--space-2); overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  box-shadow: inset 0 -1px 0 var(--border); margin: 0 0 var(--space-5);
}
.tabs a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-4); position: relative;
  color: var(--fg-muted); text-decoration: none; font-size: var(--text-sm); font-weight: 500; white-space: nowrap;
}
.tabs a:hover { color: var(--fg); }
.tabs a[aria-current="page"] { color: var(--fg); font-weight: 600; }
.tabs a[aria-current="page"]::after {
  content: ""; position: absolute; left: var(--space-4); right: var(--space-4); bottom: 0;
  height: 2px; background: var(--brand); border-radius: 2px 2px 0 0;
}
.tabs a:focus-visible { outline-offset: -2px; border-radius: var(--radius-md); }

/* Sidebar --------------------------------------------------------------------- */

.side {
  position: sticky; top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4);
  font-size: var(--text-sm); line-height: var(--lh-sm);
  background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-4); max-height: calc(100vh - 32px); overflow-y: auto;
}
.side-title { font-weight: 600; font-size: var(--text-md); color: var(--fg); text-decoration: none; padding: var(--space-2) var(--space-3) 0; overflow-wrap: anywhere; }
.side-title:hover { color: var(--link); }
.side-search input { min-height: 32px; font-size: var(--text-sm); padding: 4px 10px; }
.side-links { display: flex; flex-direction: column; gap: var(--space-1); }
.side-links a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: 32px; padding: 0 var(--space-3); border-radius: var(--radius-md); position: relative;
  color: var(--fg-muted); text-decoration: none; font-weight: 500;
}
.side-links a:hover { background: var(--bg-muted); color: var(--fg); }
.side-links a[aria-current="page"] { background: var(--bg-muted); color: var(--fg); font-weight: 600; }
.side-links a[aria-current="page"]::before {
  content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 2px; border-radius: 2px; background: var(--brand);
}
.tree { border-top: 1px solid var(--border); padding-top: var(--space-3); }
.tree ul { list-style: none; margin: 0; padding: 0 0 0 14px; }
.tree > ul { padding-left: 0; }
.tree li { margin: 0; }
.tree summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  min-height: 28px; padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2); border-radius: var(--radius-md);
}
.tree summary::-webkit-details-marker { display: none; }
.tree summary::before {
  content: ""; width: 5px; height: 5px; flex: none;
  border-right: 1.5px solid var(--fg-muted); border-bottom: 1.5px solid var(--fg-muted);
  transform: rotate(-45deg); transition: transform 120ms ease-out;
}
.tree details[open] > summary::before { transform: rotate(45deg); }
.tree summary:hover, .tree .leaf:hover { background: var(--bg-muted); }
.tree a { color: var(--fg); text-decoration: none; overflow-wrap: anywhere; flex: 1; }
.tree a:hover { color: var(--link); }
.tree a[aria-current="page"] { font-weight: 600; }
.tree .leaf { display: flex; align-items: center; min-height: 28px; padding: var(--space-2) var(--space-3) var(--space-2) 21px; border-radius: var(--radius-md); }
.tree .leaf:has(a[aria-current="page"]), .tree summary:has(a[aria-current="page"]) { background: var(--bg-muted); }
.tree-empty { padding: 0 var(--space-3); margin: 0; }
/* Folder marks: filled diamond for canon, hollow for open. */
.mark { width: 7px; height: 7px; flex: none; transform: rotate(45deg); }
.mark.canon { background: var(--fg); }
.mark.open { box-shadow: inset 0 0 0 1.25px var(--fg-muted); }
.tree-mobile { display: none; }

/* Rule line on file and folder headers */
.rule { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; color: var(--fg-muted); font-size: var(--text-sm); line-height: var(--lh-sm); margin: 0; }
.rule a { color: inherit; }

/* File text and rendered markdown ---------------------------------------------- */

.file {
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg);
  padding: var(--space-5) var(--space-6); margin: 0 0 var(--space-3); max-width: 100%;
  white-space: pre-wrap; word-break: break-word;
  font: 400 var(--text-sm)/1.6 var(--font-mono);
}

.prose {
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg);
  padding: var(--space-6) var(--space-7); line-height: 1.65; overflow-wrap: break-word;
}
.prose > * { max-width: var(--measure); }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose h1, .prose h2, .prose h3, .prose h4 { color: var(--fg); font-weight: 600; margin: var(--space-7) 0 var(--space-3); }
.prose h1 { font-size: var(--text-2xl); line-height: var(--lh-2xl); letter-spacing: -0.01em; }
.prose h2 { font-size: var(--text-xl); line-height: var(--lh-xl); }
.prose h3, .prose h4 { font-size: var(--text-md); line-height: var(--lh-md); }
.prose p, .prose ul, .prose ol { margin: 0 0 14px; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: var(--space-2); }
.prose blockquote { margin: 0 0 14px; padding: 0 0 0 var(--space-5); border-left: 1px solid var(--border-strong); color: var(--fg-muted); }
.prose pre { background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); overflow-x: auto; font-size: var(--text-sm); }
.prose pre code { background: none; padding: 0; font-size: inherit; }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-6) 0; }
.prose table { margin: 0 0 14px; border: 1px solid var(--border); }

pre.code {
  background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5); overflow-x: auto; max-width: 80ch; margin: 0 0 var(--space-4);
  font: var(--text-sm)/1.55 var(--font-mono);
}
.endpoint { display: flex; flex-direction: column; gap: var(--space-2); margin: 0 0 var(--space-5); }
.endpoint code { font-size: var(--text-md); padding: 6px 10px; align-self: flex-start; max-width: 100%; }
section { scroll-margin-top: var(--space-5); }

/* Diffs --------------------------------------------------------------------- */

.diff-box { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg); margin: 0 0 var(--space-6); overflow: hidden; }
.diff-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
  background: var(--bg-subtle); border-bottom: 1px solid var(--border);
}
.diff-stat { margin: 0; font-size: var(--text-sm); font-weight: 600; }
.diff-stat .plus { color: var(--success); }
.diff-stat .minus { color: var(--danger); }
.diff-stat .muted { font-weight: 400; }
.diff-note { padding: var(--space-4) var(--space-5) 0; margin: 0; font-size: var(--text-sm); }
.diff-box > .file { border: 0; border-radius: 0; margin: 0; }

.diff { font: 400 0.8125rem/18px var(--font-mono); padding: var(--space-2) 0; }
.diff.unified > div, .diff.unified .fold > div { display: grid; grid-template-columns: 3rem 3rem 1.25rem minmax(0, 1fr); padding: 3px 0; }
.diff.unified > div > span:last-child, .diff.unified .fold > div > span:last-child { grid-column: 4; white-space: pre-wrap; word-break: break-word; padding-right: var(--space-5); }
.diff.unified > div::before, .diff.unified .fold > div::before { grid-column: 3; grid-row: 1; text-align: center; color: var(--fg-muted); }
.diff .ln { text-align: right; padding-right: var(--space-3); color: var(--fg-muted); user-select: none; }
.diff.unified .ln:nth-child(1) { grid-column: 1; grid-row: 1; }
.diff.unified .ln:nth-child(2) { grid-column: 2; grid-row: 1; }
.diff .add { background: var(--diff-add); }
.diff .add::before { content: "+"; }
.diff .del { background: var(--diff-del); }
.diff .del::before { content: "\2212"; }
.diff .same::before { content: ""; }
.diff ins { background: var(--diff-add-word); color: var(--diff-word-fg); text-decoration: none; border-radius: 2px; }
.diff del { background: var(--diff-del-word); color: var(--diff-word-fg); text-decoration: line-through; text-decoration-color: var(--danger); border-radius: 2px; }

/* Folded unchanged lines: a strip that opens in place. */
.diff .fold > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; min-height: 28px;
  padding: 0 var(--space-5) 0 calc(6rem + 1.25rem);
  background: var(--bg-subtle); color: var(--fg-muted); font: 500 0.8125rem/1.2 var(--font-sans);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.diff .fold > summary::-webkit-details-marker { display: none; }
.diff .fold > summary::before { content: "Show "; white-space: pre; }
.diff .fold[open] > summary::before { content: "Hide "; }
.diff .fold > summary:hover { color: var(--fg); }

/* Split: current left, proposed right. It scrolls inside its own box on a
   narrow screen, so the page never scrolls sideways. */
.split-scroll { overflow-x: auto; }
.diff.split { min-width: 36rem; padding-top: 0; }
.diff.split .row { display: grid; grid-template-columns: 3rem minmax(0, 1fr) 3rem minmax(0, 1fr); }
.diff.split .row > span:not(.ln) { padding: 3px var(--space-4) 3px var(--space-2); white-space: pre-wrap; word-break: break-word; }
.diff.split .row > .ln { padding-top: 3px; padding-bottom: 3px; }
.diff.split .row > .ln + span + .ln { box-shadow: inset 1px 0 0 var(--border); }
.diff.split .add::before, .diff.split .del::before { margin-right: var(--space-3); color: var(--fg-muted); }
.diff.split .none { background: var(--bg-subtle); }
.diff.split .head > span {
  font: 600 var(--text-sm)/1.2 var(--font-sans); color: var(--fg-muted);
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-2); border-bottom: 1px solid var(--border);
}

/* Rendered: proposed and current as they'll read, side by side when there's
   room (current left, like the split), stacked with the proposal first. */
.rendered { display: grid; gap: var(--space-5) var(--space-6); padding: var(--space-5); }
.pane-label { font-size: var(--text-sm); line-height: var(--lh-sm); font-weight: 600; color: var(--fg-muted); margin: 0 0 var(--space-3); }
.rendered .prose { padding: var(--space-5) var(--space-6); }
@media (min-width: 1000px) {
  .rendered { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rendered .current { grid-column: 1; grid-row: 1; }
  .rendered .proposed { grid-column: 2; grid-row: 1; }
}

/* Proposal page ------------------------------------------------------------- */

/* Above the diff: feedback, risks, the decision and snooze. */
.review-top { margin: 0 0 var(--space-6); max-width: 80ch; display: grid; gap: var(--space-4); }
.review-top > * { margin: 0; }
.risks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.risks .badge { min-height: 24px; font-size: var(--text-sm); }

.feedback {
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg);
  background: var(--attention-bg); border: 1px solid color-mix(in srgb, var(--attention) 35%, transparent);
}
.feedback h2 { font-size: var(--text-md); line-height: var(--lh-md); margin: 0; }
.feedback p { margin: 0 0 var(--space-3); }
.feedback blockquote.claim { background: var(--bg); }

/* The decision: compact and always open. */
form.decide { margin: 0; padding: var(--space-4) var(--space-5); background: var(--bg-subtle); }
form.decide label { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); }
form.decide .actions { margin-top: var(--space-4); }

blockquote.claim {
  margin: 0; padding: var(--space-4) var(--space-5); max-width: 80ch; white-space: pre-wrap;
  background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-lg);
}

/* Discussion: comments, review notes and approvals in one timeline. Entries
   an agent wrote sit on a tinted ground, so a reader always knows which
   words came from a model; the meta line names the agent. */
.discussion { max-width: 80ch; }
.notes { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.notes li { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border); }
.notes li:first-child { border-top: 0; }
.notes li p { margin: 0; white-space: pre-wrap; }
.notes li p + p { margin-top: var(--space-2); }
.thread li.by-agent { background: var(--bg-subtle); }
form.comment { margin-top: var(--space-5); }
form.comment .actions { margin-top: var(--space-4); }

/* Snooze: a quiet row of small buttons. */
.snooze, .snoozed-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  margin: 0; color: var(--fg-muted); font-size: var(--text-sm); line-height: var(--lh-sm);
}
.snooze span, .snoozed-note span { margin-right: var(--space-2); }
.snooze button, .snoozed-note button { min-height: var(--control-sm); padding: 0 10px; font-size: 0.8125rem; }
.snooze .hint { flex-basis: 100%; margin: 0; }
.snooze-toggle { margin: var(--space-5) 0 0; }
/* Review rows: one "Snooze" menu per row. */
.row-snooze-menu > summary { min-height: var(--control-sm); padding: 0 10px; font-size: 0.8125rem; gap: var(--space-2); }
.rows form.row-snooze { min-width: 200px; gap: var(--space-2); padding: var(--space-3); }
.rows form.row-snooze button { justify-content: flex-start; width: 100%; border-color: transparent; background: transparent; }
.rows form.row-snooze button:hover { background: var(--bg-muted); }
.rows form.row-snooze .menu-label { padding: 0 14px var(--space-2); color: var(--fg-muted); font-weight: 500; }
/* Risk badge in a row: the first reason, the rest in its title. */
.risk-count { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The three snooze choices read as one segmented control. */
.snooze { column-gap: 0; }
.snooze > span { margin-right: var(--space-3); }
.snooze > button { border-color: var(--border); border-radius: 0; margin-left: -1px; }
.snooze > button:hover { border-color: var(--border); position: relative; }
.snooze > button:focus-visible { position: relative; z-index: 1; }
.snooze > span + button { border-radius: var(--radius-md) 0 0 var(--radius-md); margin-left: 0; }
.snooze > button:last-of-type { border-radius: 0 var(--radius-md) var(--radius-md) 0; }

/* Edit page: a delete section set apart. */
.danger-zone {
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5); max-width: 80ch;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5);
}
.danger-zone p { margin: 0; }

/* A page header's "More" menu: rare or destructive actions, as links. */
.more-menu .menu { min-width: 200px; padding: var(--space-2); gap: var(--space-1); }
.more-menu .menu a {
  display: flex; align-items: center; min-height: var(--control-sm); padding: 0 12px;
  border-radius: var(--radius-md); text-decoration: none;
}
.more-menu .menu a:hover { background: var(--bg-muted); }
.more-menu .menu a.danger { color: var(--danger); }
.more-menu .menu a.danger:hover { background: var(--danger-bg); }

/* Activity ------------------------------------------------------------------- */

form.filters { max-width: none; background: var(--bg-subtle); padding: var(--space-4) var(--space-5); }
.filter-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: var(--space-4); }
.filter-fields label { margin: 0 0 6px; }
.filter-fields > div { min-width: 0; }
.filter-fields select { width: 100%; min-width: 0; }
.filters .actions { margin-top: var(--space-4); }
table.activity .num:first-child { color: var(--fg-muted); }
table.activity .nowrap { white-space: nowrap; }
table.activity .path-cell { overflow-wrap: anywhere; }
.pager { display: flex; justify-content: space-between; gap: var(--space-6); padding: var(--space-5) 0; font-weight: 500; font-size: var(--text-sm); }
.pager .older { margin-left: auto; }

/* Variables ------------------------------------------------------------------ */

/* A column per environment where there's room; where there isn't (a phone,
   or a narrow content column beside the sidebar), one block per variable
   with a labelled line per environment. No horizontal scroll either way. */
.vars-wrap { container: vars / inline-size; margin: 0 0 var(--space-6); }
table.vars { table-layout: fixed; }
table.vars th[scope="row"] { background: transparent; font-weight: 500; color: var(--fg); white-space: normal; vertical-align: top; }
table.vars th[scope="row"] code { overflow-wrap: anywhere; font-size: var(--text-sm); color: var(--fg); }
table.vars td { vertical-align: top; }
table.vars tbody tr:hover > td { background: transparent; }
@container vars (max-width: 44rem) {
  table.vars, table.vars tbody, table.vars tr, table.vars th, table.vars td { display: block; }
  table.vars thead { display: none; }
  table.vars tr + tr { border-top: 1px solid var(--border); }
  table.vars th[scope="row"] { background: var(--bg-subtle); border-top: 0; }
  table.vars td {
    height: auto; border-top: 1px solid var(--border);
    display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: var(--space-4); align-items: start;
  }
  table.vars td::before { content: attr(data-label); font-size: 0.8125rem; font-weight: 600; color: var(--fg-muted); }
  table.vars tr > td:first-child { border-top: 0; }
  table.env-log td:first-child { background: var(--bg-subtle); font-weight: 500; }
}
@container vars (max-width: 26rem) {
  table.vars td { grid-template-columns: minmax(0, 1fr); }
  table.env-log td { grid-template-columns: 5rem minmax(0, 1fr); }
}

.var-set { font-weight: 600; font-size: var(--text-sm); }
.var-readers { display: block; color: var(--fg-muted); margin-top: var(--space-1); }
.var-readers a { color: var(--link); text-decoration: underline; font-weight: 400; }
.var-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.var-actions form { margin: 0; }
table.env-log td:nth-child(2) { min-width: 7rem; }
table.env-log tr.refused td { background: color-mix(in srgb, var(--danger-bg) 50%, transparent); }
.var-caveats { list-style: none; padding: 0; margin: var(--space-5) 0 0; display: grid; gap: var(--space-3); max-width: var(--measure); }
.var-caveats strong { color: var(--fg); }
pre.secret { white-space: pre-wrap; overflow-wrap: anywhere; margin-bottom: 0; }
textarea.secret-input { font-family: var(--font-mono); font-size: var(--text-sm); }

/* Small screens ---------------------------------------------------------------- */

@media (max-width: 900px) {
  .vault { grid-template-columns: 208px minmax(0, 1fr); gap: var(--space-6); }
}

@media (max-width: 767px) {
  .vault { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .side { display: none; }
  .tree-mobile { display: block; }
  .tree-mobile > summary {
    display: inline-flex; align-items: center; gap: var(--space-3); list-style: none; cursor: pointer;
    min-height: var(--control-md); padding: 0 14px; font-size: var(--text-sm); font-weight: 500;
    border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg);
  }
  .tree-mobile > summary::-webkit-details-marker { display: none; }
  .tree-mobile > summary::after {
    content: ""; width: 6px; height: 6px; margin-top: -3px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
  }
  .tree-mobile[open] > summary { margin-bottom: var(--space-3); }
  .tree-mobile .side-links, .tree-mobile .tree {
    background: var(--bg-subtle); border: 1px solid var(--border); padding: var(--space-3);
  }
  .tree-mobile .side-links { border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 0; }
  .tree-mobile .tree { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
}

@media (max-width: 640px) {
  .top-inner { flex-wrap: wrap; column-gap: var(--space-5); row-gap: 0; padding: 0 var(--space-5); }
  .wordmark { min-height: 52px; }
  .top nav {
    order: 3; width: calc(100% + 2 * var(--space-5)); margin: 0 calc(-1 * var(--space-5));
    padding: 0 var(--space-3); overflow-x: auto; scrollbar-width: none;
    border-top: 1px solid var(--border); min-height: 44px;
  }
  .top nav::-webkit-scrollbar { display: none; }
  main { padding: var(--space-5) var(--space-5) var(--space-9); }
  footer { padding: var(--space-5); }
  h2 { margin-top: var(--space-7); }
  .fields { grid-template-columns: minmax(0, 1fr); }
  .fields select { width: 100%; }
  .rows li { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .rows .row-end { justify-content: flex-start; }
  /* Rows stack here, so the snooze menu opens under the row, full width. */
  .rows li:has(.row-snooze-menu) { position: relative; }
  .row-snooze-menu { position: static; }
  .rows form.row-snooze { left: var(--space-4); right: var(--space-4); top: calc(100% - 4px); width: auto; min-width: 0; }
  .hide-sm { display: none; }
  th, td { padding: 10px var(--space-3); }
  th { white-space: normal; }
  .prose { padding: var(--space-5); }
  .rendered { padding: var(--space-3); }
  .rendered .prose { padding: var(--space-4); }
  form.panel { padding: var(--space-4); }
  .inline-field { flex-direction: column; }
  .inline-field button { align-self: flex-start; }
  .filter-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  table.activity, table.token-list { min-width: 34rem; }
  /* Wide tables scroll edge to edge, starting in line with the text. */
  .table-wrap { margin: 0 calc(-1 * var(--space-5)); padding: 0 var(--space-5); }
  .split-scroll { overscroll-behavior-x: contain; }
  .diff.unified > div, .diff.unified .fold > div { grid-template-columns: 2.5rem 2.5rem 1rem minmax(0, 1fr); }
  .diff .fold > summary { padding-left: 6rem; }
  .snooze > span { flex-basis: 100%; }
  .snooze > span + button { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* Public site: landing and legal pages (web/src/site.ts, landing.ts, legal.ts).
   Mobile first; the same tokens, header and buttons as the app. -------------- */

.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.footer-links a, .site-footer > a { display: inline-block; padding: var(--space-1) 0; }
footer a { color: var(--fg-muted); }
footer a:hover { color: var(--link); }
.footer-version { display: inline-block; padding: var(--space-1) 0; font-variant-numeric: tabular-nums; }

/* Reading copy, not tables: proportional figures and punctuation. */
body.site { font-variant-numeric: normal; }
.wordmark-by { color: var(--fg-muted); font-weight: 400; margin-left: -4px; }
.site-signin { margin-left: auto; flex: none; }
.site-main { padding-top: var(--space-8); }
.site-section[id] { scroll-margin-top: var(--space-6); }
.site-footer { align-items: center; }
.site-footer-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--fg); font-weight: 500; }

/* Hero */
.hero { display: grid; gap: var(--space-8); align-items: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 var(--space-5);
  font-size: var(--text-sm); line-height: var(--lh-sm); font-weight: 600; color: var(--fg-muted);
}
.hero h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem); line-height: 1.08; letter-spacing: -0.025em; max-width: 16ch; }
.hero-sub { font-size: var(--text-xl); line-height: var(--lh-xl); font-weight: 600; margin: var(--space-5) 0 var(--space-4); }
.hero-lede { color: var(--fg-muted); font-size: var(--text-lg); line-height: var(--lh-lg); margin: 0 0 var(--space-6); }
.hero-small { color: var(--fg-muted); font-size: var(--text-sm); line-height: var(--lh-sm); margin: var(--space-4) 0 0; }
.site-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.site-cta .button { min-height: 44px; padding: 0 20px; font-size: var(--text-md); }

.hero-card {
  margin: 0; padding: var(--space-5); display: grid; gap: var(--space-4);
  background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
}
.hero-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.hero-card-path { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; }
.hero-card-meta { margin: 0; color: var(--fg-muted); font-size: var(--text-sm); line-height: var(--lh-sm); }
.hero-card-meta strong { color: var(--fg); }
.hero-diff {
  border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden;
  font: 400 var(--text-sm)/1.7 var(--font-mono);
}
.hero-diff > div { padding: 6px var(--space-4); overflow-wrap: anywhere; }
.hero-diff span { display: inline-block; width: 1.5ch; color: var(--fg-muted); }
.hero-diff .del { background: var(--diff-del); }
.hero-diff .add { background: var(--diff-add); }
.hero-card-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero-card-actions .button { pointer-events: none; cursor: default; }
.hero-card figcaption { color: var(--fg-muted); font-size: var(--text-sm); line-height: var(--lh-sm); border-top: 1px solid var(--border); padding-top: var(--space-4); }

/* Sections */
.site-section { margin-top: var(--space-10); padding-top: var(--space-8); border-top: 1px solid var(--border); }
.site-section > h2 { font-size: var(--text-2xl); line-height: var(--lh-2xl); letter-spacing: -0.01em; margin: 0 0 var(--space-6); }
.site-section h3 { font-size: var(--text-lg); line-height: var(--lh-lg); font-weight: 600; margin: 0 0 var(--space-2); }
.site-section .feature p, .steps p { color: var(--fg-muted); margin: 0; }

.problem-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); max-width: 44rem; }
.problem-list li { position: relative; padding-left: var(--space-6); font-size: var(--text-lg); line-height: var(--lh-lg); }
.problem-list li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 8px; height: 8px; transform: rotate(45deg); box-shadow: inset 0 0 0 1.5px var(--brand); }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); counter-reset: step; }
.steps li { counter-increment: step; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); background: var(--bg-subtle); }
.steps li::before {
  content: counter(step); display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin-bottom: var(--space-4); border-radius: var(--radius-full);
  background: var(--primary-bg); color: var(--primary-fg); font-size: var(--text-sm); font-weight: 600;
}
.steps code { overflow-wrap: anywhere; }

.grid-2, .grid-3 { display: grid; gap: var(--space-6) var(--space-7); }
.feature { padding-left: var(--space-5); border-left: 2px solid var(--border); }
.not-for { margin: var(--space-7) 0 var(--space-3); }

.ceiling { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.ceiling li {
  display: inline-flex; align-items: center; padding: var(--space-3) 14px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 500;
}

/* Pricing */
.beta-banner { font-size: var(--text-md); line-height: var(--lh-md); }
.tiers { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; gap: var(--space-5); }
.tier { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-5); display: flex; flex-direction: column; }
.tier-highlight { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.tier h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.tier-for { color: var(--fg-muted); font-size: var(--text-sm); line-height: var(--lh-sm); margin: 0 0 var(--space-5); }
.tier-price { margin: 0; }
.tier-price .amount { font-size: var(--text-2xl); line-height: var(--lh-2xl); font-weight: 600; letter-spacing: -0.01em; }
.tier-price .per, .tier-yearly { color: var(--fg-muted); font-size: var(--text-sm); }
.tier-yearly { margin: 0 0 var(--space-5); line-height: var(--lh-sm); }
.tier ul { margin: 0; padding: var(--space-5) 0 0; border-top: 1px solid var(--border); list-style: none; display: grid; gap: var(--space-3); font-size: var(--text-sm); line-height: var(--lh-sm); }
.tier ul li { display: flex; gap: var(--space-3); }
.tier ul li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 7px; transform: rotate(45deg); background: var(--fg-muted); }

/* FAQ */
.faq { max-width: 48rem; border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  min-height: 52px; padding: var(--space-3) 0; cursor: pointer; list-style: none; font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
}
.faq details[open] > summary::after { transform: rotate(225deg); margin-top: 6px; }
.faq details p { color: var(--fg-muted); margin: 0 0 var(--space-5); }

/* Legal pages */
.legal { max-width: 46rem; }
.legal .crumb { margin-bottom: var(--space-3); }
.legal h1 { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem); line-height: 1.2; margin-bottom: var(--space-5); }

.legal h2 { margin: var(--space-8) 0 var(--space-3); }
.legal ul { padding-left: 1.25em; margin: 0 0 var(--space-4); max-width: var(--measure); }
.legal li + li { margin-top: var(--space-2); }
.legal .table-wrap { margin-bottom: var(--space-4); }
.legal th[scope="row"] { white-space: normal; width: 11rem; vertical-align: top; }
.legal td { vertical-align: top; height: auto; }
.legal td a { color: var(--link); text-decoration: underline; font-weight: 400; }
.legal .caveats li { margin-top: var(--space-3); }
mark.placeholder { background: none; color: var(--attention); font-weight: 500; text-decoration: underline dashed; text-underline-offset: 0.2em; }

@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-9); }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .tiers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .site-main { padding-top: var(--space-6); }
  .site-section { margin-top: var(--space-9); padding-top: var(--space-7); }
  .wordmark-by { display: none; }
  .legal th[scope="row"] { width: 7rem; }
  /* The sub-processor table stacks: one bordered block per provider. */
  .legal .table-wrap:has(> .subprocessors) { margin: 0 0 var(--space-4); padding: 0; }
  table.subprocessors, .subprocessors tbody, .subprocessors tr, .subprocessors td { display: block; }
  table.subprocessors { border: 0; background: none; }
  .subprocessors thead { display: none; }
  .subprocessors tr { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-4); }
  .subprocessors td { border: 0; padding: var(--space-2) 0; }
  .subprocessors td[data-label]::before { content: attr(data-label); display: block; font-size: var(--text-xs); font-weight: 600; color: var(--fg-muted); }
  .subprocessors tr:hover > td { background: none; }
}

/* Stage: the pre-alpha badge in every top bar, and its sentence (html.ts). */
.stage {
  display: inline-flex; align-items: center; flex: none; min-height: 22px; padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--attention) 35%, transparent); border-radius: var(--radius-full);
  background: var(--attention-bg); color: var(--attention);
  font-size: var(--text-xs); line-height: var(--lh-xs); font-weight: 600; text-decoration: none; white-space: nowrap;
}
.top-inner .stage { margin-left: calc(-1 * var(--space-5)); }
.stage:hover { text-decoration: underline; }
.prealpha-note { color: var(--fg-muted); font-size: var(--text-sm); line-height: var(--lh-sm); margin: var(--space-3) 0 0; }
.prealpha-note strong { color: var(--attention); }
.menu-links { display: flex; gap: var(--space-5); margin: 0; font-size: var(--text-sm); }
/* The public site's nav (with Docs and Roadmap) gets its own row before it
   would crowd the header; phones already do this (the 640px rules). */
@media (min-width: 641px) and (max-width: 960px) {
  .site-top .top-inner { flex-wrap: wrap; row-gap: 0; }
  .site-top nav {
    order: 3; width: calc(100% + 2 * var(--space-6)); margin: 0 calc(-1 * var(--space-6));
    padding: 0 var(--space-4); overflow-x: auto; scrollbar-width: none;
    border-top: 1px solid var(--border); min-height: 44px;
  }
  .site-top nav::-webkit-scrollbar { display: none; }
}

/* Docs (web/src/docs.ts): sidebar, article, on-page contents. No script:
   the phone menu is a <details>, like the vault sidebar. ------------------- */

.docs { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.docs-side { display: none; }
.docs-nav-section + .docs-nav-section { margin-top: var(--space-5); }
.docs-nav-title { margin: 0 0 var(--space-2); padding: 0 var(--space-3); font-size: var(--text-xs); line-height: var(--lh-xs); font-weight: 600; color: var(--fg-muted); }
.docs-nav-section ul, .docs-toc ul { list-style: none; margin: 0; padding: 0; }
.docs-nav-section a {
  display: flex; align-items: center; min-height: 32px; padding: 6px var(--space-3); border-radius: var(--radius-md); position: relative;
  color: var(--fg-muted); text-decoration: none; font-size: var(--text-sm); line-height: var(--lh-sm); font-weight: 500;
}
.docs-nav-section a:hover { background: var(--bg-muted); color: var(--fg); }
.docs-nav-section a[aria-current="page"] { background: var(--bg-muted); color: var(--fg); font-weight: 600; }
.docs-nav-section a[aria-current="page"]::before {
  content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 2px; border-radius: 2px; background: var(--brand);
}
.docs-side .prealpha-note { margin-top: var(--space-6); padding: var(--space-4) var(--space-3) 0; border-top: 1px solid var(--border); }

.docs-menu > summary {
  display: inline-flex; align-items: center; gap: var(--space-3); list-style: none; cursor: pointer;
  min-height: var(--control-md); padding: 0 14px; font-size: var(--text-sm); font-weight: 500;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg);
}
.docs-menu > summary::-webkit-details-marker { display: none; }
.docs-menu > summary::after {
  content: ""; width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
}
.docs-menu[open] > summary { margin-bottom: var(--space-3); }
.docs-menu > nav { background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-3); }

.docs-article { min-width: 0; }
.docs-article > .crumb { margin-bottom: var(--space-4); }
.docs-prose { border: 0; border-radius: 0; background: none; padding: 0; }
.docs-prose h1 { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem); line-height: 1.2; margin-bottom: var(--space-5); }
.docs-prose h1 + p { color: var(--fg-muted); font-size: var(--text-lg); line-height: var(--lh-lg); }
.docs-prose h2 { margin-top: var(--space-8); padding-top: var(--space-2); }
.docs-prose [id] { scroll-margin-top: var(--space-5); }
.docs-prose .table-wrap { margin: 0 0 var(--space-5); max-width: 100%; }
.docs-prose table { border: 1px solid var(--border); margin: 0; }
.docs-prose td { height: auto; vertical-align: top; }
.docs-prose th { white-space: normal; }
.docs-prose td a { color: var(--link); text-decoration: underline; font-weight: 400; }
.docs-prose pre { max-width: 100%; }

.docs-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-9) 0 var(--space-5); max-width: var(--measure); }
.docs-pager a {
  display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border); border-radius: var(--radius-lg); text-decoration: none; color: var(--fg); font-weight: 500;
}
.docs-pager a:hover { border-color: var(--border-strong); background: var(--bg-subtle); }
.docs-pager span { font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--fg-muted); font-weight: 500; }
.docs-next { grid-column: 2; text-align: right; align-items: flex-end; }
.docs-source { color: var(--fg-muted); font-size: var(--text-sm); line-height: var(--lh-sm); }

.docs-toc { display: none; font-size: var(--text-sm); line-height: var(--lh-sm); }
.docs-toc li a { display: block; padding: 6px 0 6px var(--space-3); border-left: 1px solid var(--border); color: var(--fg-muted); text-decoration: none; }
.docs-toc li.toc-3 a { padding-left: var(--space-6); }
.docs-toc li a:hover { color: var(--link); border-left-color: var(--border-strong); }
.docs-toc .docs-nav-title { padding: 0; }

@media (min-width: 768px) {
  .docs { grid-template-columns: 216px minmax(0, 1fr); gap: var(--space-8); }
  .docs-menu { display: none; }
  .docs-side { display: block; position: sticky; top: var(--space-5); max-height: calc(100vh - 32px); overflow-y: auto; scrollbar-width: thin; }
}
@media (min-width: 1180px) {
  .docs { grid-template-columns: 216px minmax(0, 1fr) 200px; }
  .docs-toc { display: block; position: sticky; top: var(--space-5); max-height: calc(100vh - 32px); overflow-y: auto; }
}
@media (max-width: 640px) {
  .top-inner .stage { margin-left: calc(-1 * var(--space-3)); }
  /* Wide tables scroll sideways rather than squeeze a column to a word. */
  .docs-prose th, .docs-prose td { padding: 10px var(--space-4); }
  .docs-prose table:has(th:nth-child(4)) { min-width: 38rem; }
  .docs-pager { grid-template-columns: minmax(0, 1fr); }
  .docs-next { grid-column: 1; }
}

/* Roadmap (/roadmap, docs.ts): four columns, stacked on a phone. */
.roadmap-page > h1 { margin-bottom: var(--space-4); }
.roadmap-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-7); }
.roadmap { display: grid; gap: var(--space-6); }
.roadmap-col > h2 { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-4); }
.roadmap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.roadmap-item { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); background: var(--bg); }
.roadmap-item h3 { font-size: var(--text-md); line-height: var(--lh-md); font-weight: 600; margin: 0 0 var(--space-2); }
.roadmap-item p { margin: 0; color: var(--fg-muted); font-size: var(--text-sm); line-height: var(--lh-sm); }
.roadmap-item .roadmap-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-3); }
@media (min-width: 700px) { .roadmap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .roadmap { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* New vault: a template's folders and suggested variables, under its name. */
.template-detail { display: block; margin: 2px 0 var(--space-2); color: var(--fg-muted); font-size: var(--text-sm); line-height: var(--lh-sm); }