/* ════════════════════════════════════════════════════════════════════════════
   FirmForge — shared design system stylesheet
   Source of truth for every documentation HTML file in this folder tree.

   Update tokens or component styles here and every page that links this file
   inherits the change. Page-specific demos and one-off layouts stay inline in
   the consuming HTML's own <style> block.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Design Tokens ────────────────────────────────────────────────────────── */
:root {
  /* BEGIN GENERATED FIRMFORGE TOKENS */
  --color-ember: #D4541A;
  --color-ember-hover: #B84717;
  --color-ember-dark: #A83A0E;
  --color-ember-light: #F07C3A;
  --color-obsidian: #111827;
  --color-obsidian-light: #1F2D40;
  --color-slate: #4A5568;
  --color-page-bg: #FAFAF8;
  --color-surface: #F2F0EC;
  --color-border: #D0C8BF;
  --color-ink: #2C2218;
  --color-text-inverse: #F8F4F0;
  --color-muted: #5A5F66;
  --color-success: #1D9E75;
  --color-error: #E24B4A;
  --color-warning: #F5A623;
  --color-sev-high: #FFD5D5;
  --color-sev-medium: #FFE8C0;
  --color-sev-low: #F5F5C8;
  --color-sev-high-edge: #D64545;
  --color-sev-med-edge: #E0922A;
  --color-sev-low-edge: #C9C24A;
  --color-row-hover-neutral: #EAE6E0;
  --color-row-selected: #EDE5D8;
  --color-row-bulk-selected: #F0E6D0;
  --color-row-hover-sev-high: #FFAAAA;
  --color-row-hover-sev-med: #FFD88A;
  --color-row-hover-sev-low: #EEEE98;
  --color-caution-bg: #FBEFE3;
  --color-caution-border: #EBC59B;
  --color-caution-ink: #8A4B12;
  --color-success-bg: #E8F5EF;
  --color-success-border: #BFE5D4;
  --color-warn-bg: #FDF3E2;
  --color-warn-border: #F4D9A6;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --font-web: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-app-body: 'Segoe UI', sans-serif;
  --font-app-heading: 'Segoe UI Semibold', 'Segoe UI', sans-serif;
  --font-mono: Consolas, 'Courier New', monospace;
  --shadow-sm: 0 1px 3px rgba(17,24,39,0.08);
  --shadow-md: 0 4px 12px rgba(17,24,39,0.10);
  --shadow-lg: 0 8px 24px rgba(17,24,39,0.12);
  --shadow-ember: 0 4px 16px rgba(212,84,26,0.20);
  --border-default: 0.5px solid #D0C8BF;
  --border-active: 1px solid #D4541A;
  --border-featured: 2px solid #D4541A;
  --border-dark: 0.5px solid rgba(255,255,255,0.08);
  --stroke-hairline: 0.5px;
  --stroke-active: 1px;
  --stroke-featured: 2px;
/* END GENERATED FIRMFORGE TOKENS */
}
/* BEGIN GENERATED FIRMFORGE THEMES */
/* Default theme (firmforge), for a document with no
   data-theme stamped on it yet. See render_css_themes. */
:root {
  --tint-highlight-bg: #F5F5C8;
  --tint-highlight-border: #C9C24A;
  --text-absent: #978571;
  --tint-info-bg: #E9EAEC;
  --tint-info-border: #AAAFB6;
  --text-link: #A83A0E;
  --skeleton-base: #E5E5E7;
  --skeleton-shine: #F3F4F4;
  --chart-status-pending: #0072B2;
  --scrim: rgba(17,24,39,.45);
  color-scheme: light;
  --chart-cat-1: #D4541A;
  --chart-cat-2: #0072B2;
  --chart-cat-3: #CC79A7;
  --chart-cat-4: #882255;
  --chart-cat-5: #56B4E9;
  --chart-neutral: #4A5568;
  --chart-status-good: #1D9E75;
  --chart-status-warn: #A8700D;
  --chart-status-crit: #B3261E;
  --accent-brand-ink: #B84717;
  --tint-danger-bg: #FFD5D5;
  --tint-danger-border: #D64545;
  --tint-warning-bg: #FDF3E2;
  --tint-warning-border: #F4D9A6;
  --tint-success-bg: #E8F5EF;
  --tint-success-border: #BFE5D4;
  --text-on-brand-muted: #808287;
  --state-hover-brand: #1F2D40;
  --text-strong: #111827;
  --text-secondary: #4A5568;
  --surface-brand: #111827;
  --text-on-brand: #F8F4F0;
  --surface-sunken: #F2F0EC;
  --surface-chrome: #FAFAF8;
  --surface-base: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-overlay: #FFFFFF;
  --surface-selected: #EDE5D8;
  --text-primary: #2C2218;
  --text-muted: #5A5F66;
  --text-on-accent: #F8F4F0;
  --text-code-comment: #5A5F66;
  --border-subtle: #D0C8BF;
  --border-strong: #4A5568;
  --focus-ring: #D4541A;
  --accent-primary: #A83A0E;
  --accent-secondary: #1F2D40;
  --status-danger: #D64545;
  --status-success: #1D9E75;
  --status-warning: #8A4B12;
  --status-info: #1F2D40;
  --fill-primary: #D4541A;
  --fill-secondary: #1F2D40;
  --fill-danger: #D64545;
  --fill-warning: #E0922A;
  --fill-success: #1D9E75;
  --fill-info: #1F2D40;
  --code-surface: #F2F0EC;
  --elevation-sm: 0 1px 3px rgba(17,24,39,0.08);
  --elevation-md: 0 4px 12px rgba(17,24,39,0.10);
  --elevation-lg: 0 8px 24px rgba(17,24,39,0.12);
  --state-hover: rgba(150,130,100,.20);
  --state-active: rgba(17,24,39,.09);
  --state-disabled-opacity: 0.50;
}

:root[data-theme="firmforge"] {
  --tint-highlight-bg: #F5F5C8;
  --tint-highlight-border: #C9C24A;
  --text-absent: #978571;
  --tint-info-bg: #E9EAEC;
  --tint-info-border: #AAAFB6;
  --text-link: #A83A0E;
  --skeleton-base: #E5E5E7;
  --skeleton-shine: #F3F4F4;
  --chart-status-pending: #0072B2;
  --scrim: rgba(17,24,39,.45);
  color-scheme: light;
  --chart-cat-1: #D4541A;
  --chart-cat-2: #0072B2;
  --chart-cat-3: #CC79A7;
  --chart-cat-4: #882255;
  --chart-cat-5: #56B4E9;
  --chart-neutral: #4A5568;
  --chart-status-good: #1D9E75;
  --chart-status-warn: #A8700D;
  --chart-status-crit: #B3261E;
  --accent-brand-ink: #B84717;
  --tint-danger-bg: #FFD5D5;
  --tint-danger-border: #D64545;
  --tint-warning-bg: #FDF3E2;
  --tint-warning-border: #F4D9A6;
  --tint-success-bg: #E8F5EF;
  --tint-success-border: #BFE5D4;
  --text-on-brand-muted: #808287;
  --state-hover-brand: #1F2D40;
  --text-strong: #111827;
  --text-secondary: #4A5568;
  --surface-brand: #111827;
  --text-on-brand: #F8F4F0;
  --surface-sunken: #F2F0EC;
  --surface-chrome: #FAFAF8;
  --surface-base: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-overlay: #FFFFFF;
  --surface-selected: #EDE5D8;
  --text-primary: #2C2218;
  --text-muted: #5A5F66;
  --text-on-accent: #F8F4F0;
  --text-code-comment: #5A5F66;
  --border-subtle: #D0C8BF;
  --border-strong: #4A5568;
  --focus-ring: #D4541A;
  --accent-primary: #A83A0E;
  --accent-secondary: #1F2D40;
  --status-danger: #D64545;
  --status-success: #1D9E75;
  --status-warning: #8A4B12;
  --status-info: #1F2D40;
  --fill-primary: #D4541A;
  --fill-secondary: #1F2D40;
  --fill-danger: #D64545;
  --fill-warning: #E0922A;
  --fill-success: #1D9E75;
  --fill-info: #1F2D40;
  --code-surface: #F2F0EC;
  --elevation-sm: 0 1px 3px rgba(17,24,39,0.08);
  --elevation-md: 0 4px 12px rgba(17,24,39,0.10);
  --elevation-lg: 0 8px 24px rgba(17,24,39,0.12);
  --state-hover: rgba(150,130,100,.20);
  --state-active: rgba(17,24,39,.09);
  --state-disabled-opacity: 0.50;
}

:root[data-theme="light"] {
  --tint-highlight-bg: #EBD5BC;
  --tint-highlight-border: #D6AD8A;
  --text-absent: #545458;
  --tint-info-bg: #E6ECE2;
  --tint-info-border: #9FC4CB;
  --text-link: #644AC9;
  --skeleton-base: #E4E0D3;
  --skeleton-shine: #F3EFE1;
  --chart-status-pending: #0072B2;
  --scrim: rgba(31,31,31,.40);
  color-scheme: light;
  --chart-cat-1: #D4541A;
  --chart-cat-2: #0072B2;
  --chart-cat-3: #CC79A7;
  --chart-cat-4: #882255;
  --chart-cat-5: #56B4E9;
  --chart-neutral: #4A5568;
  --chart-status-good: #1D9E75;
  --chart-status-warn: #A8700D;
  --chart-status-crit: #B3261E;
  --accent-brand-ink: #B84717;
  --tint-danger-bg: #FAE8D8;
  --tint-danger-border: #EBB2A2;
  --tint-warning-bg: #F6EAD6;
  --tint-warning-border: #DCB999;
  --tint-success-bg: #E8EDD4;
  --tint-success-border: #A6C796;
  --text-on-brand-muted: #696864;
  --state-hover-brand: rgba(31,31,31,.05);
  --text-strong: #1F1F1F;
  --text-secondary: #3D3D3F;
  --surface-brand: #ECE9DF;
  --text-on-brand: #1F1F1F;
  --surface-sunken: #DEDCCF;
  --surface-chrome: #ECE9DF;
  --surface-base: #FFFBEB;
  --surface-raised: #FFFBEB;
  --surface-overlay: #FFFBEB;
  --surface-selected: #CFCFDE;
  --text-primary: #1F1F1F;
  --text-muted: #545458;
  --text-on-accent: #F8F8F2;
  --text-code-comment: #6C664B;
  --border-subtle: #DEDCCF;
  --border-strong: #6E6E75;
  --focus-ring: #644AC9;
  --accent-primary: #644AC9;
  --accent-secondary: #A3144D;
  --status-danger: #CB3A2A;
  --status-warning: #A34D14;
  --status-success: #14710A;
  --status-info: #036A96;
  --fill-primary: #644AC9;
  --fill-secondary: #A3144D;
  --fill-danger: #CB3A2A;
  --fill-warning: #A34D14;
  --fill-success: #14710A;
  --fill-info: #036A96;
  --code-surface: #ECE9DF;
  --elevation-sm: 0 1px 2px rgba(31,31,31,.08);
  --elevation-md: 0 4px 12px rgba(31,31,31,.12);
  --elevation-lg: 0 16px 40px rgba(31,31,31,.18);
  --state-hover: rgba(31,31,31,.05);
  --state-active: rgba(31,31,31,.09);
  --state-disabled-opacity: 0.50;
}

:root[data-theme="dark"] {
  --tint-highlight-bg: #574942;
  --tint-highlight-border: #896A4E;
  --text-absent: #B9BABD;
  --tint-info-bg: #323D4A;
  --tint-info-border: #4E7382;
  --text-link: #C5A1F8;
  --skeleton-base: #494C59;
  --skeleton-shine: #3D404E;
  --chart-status-pending: #4894DB;
  --scrim: rgba(0,0,0,.60);
  color-scheme: dark;
  --chart-cat-1: #C37D25;
  --chart-cat-2: #52A27A;
  --chart-cat-3: #4894DB;
  --chart-cat-4: #783DBB;
  --chart-cat-5: #A03F41;
  --chart-neutral: #8B8FA0;
  --chart-status-good: #41A472;
  --chart-status-warn: #C0871C;
  --chart-status-crit: #C74A4F;
  --accent-brand-ink: #F07C3A;
  --tint-danger-bg: #3E2E39;
  --tint-danger-border: #7A3A42;
  --tint-warning-bg: #3E383B;
  --tint-warning-border: #7A604B;
  --tint-success-bg: #2C3F3D;
  --tint-success-border: #377950;
  --text-on-brand-muted: #88898B;
  --state-hover-brand: rgba(248,248,242,.07);
  --text-strong: #F8F8F2;
  --text-secondary: #D6D6D5;
  --surface-brand: #21222C;
  --text-on-brand: #F8F8F2;
  --surface-sunken: #191A21;
  --surface-chrome: #21222C;
  --surface-base: #282A36;
  --surface-raised: #343746;
  --surface-overlay: #424450;
  --surface-selected: #44475A;
  --text-primary: #F8F8F2;
  --text-muted: #B9BABD;
  --text-on-accent: #1F1F1F;
  --text-code-comment: #6272A4;
  --border-subtle: #44475A;
  --border-strong: #95979E;
  --focus-ring: #BD93F9;
  --accent-primary: #BD93F9;
  --accent-secondary: #FF79C6;
  --status-danger: #FF5555;
  --status-warning: #FFB86C;
  --status-success: #50FA7B;
  --status-info: #8BE9FD;
  --fill-primary: #BD93F9;
  --fill-secondary: #FF79C6;
  --fill-danger: #FF5555;
  --fill-warning: #FFB86C;
  --fill-success: #50FA7B;
  --fill-info: #8BE9FD;
  --code-surface: #191A21;
  --elevation-sm: 0 1px 2px rgba(0,0,0,.40);
  --elevation-md: 0 4px 12px rgba(0,0,0,.45);
  --elevation-lg: 0 16px 40px rgba(0,0,0,.55);
  --state-hover: rgba(248,248,242,.07);
  --state-active: rgba(248,248,242,.12);
  --state-disabled-opacity: 0.45;
}
/* END GENERATED FIRMFORGE THEMES */

/* ── Reset + base type ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-web);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-page-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p { margin-bottom: var(--space-md); }
p:last-child { margin-bottom: 0; }

a { color: var(--color-ember); text-decoration: none; }
a:hover { color: var(--color-ember-dark); }

/* ── Print ────────────────────────────────────────────────────────────────── */
@page { size: letter; margin: 0.75in 0.75in 0.85in; }
@media print {
  .no-print { display: none !important; }
  body { background: #fff; font-size: 12px; }
  a { color: inherit; text-decoration: none; }
}

/* ── Top nav (obsidian bar across the top of every doc) ───────────────────── */
.topnav {
  background: var(--color-obsidian);
  border-bottom: var(--border-dark);
  height: 52px;
  padding: 0 var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.topnav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
}
.topnav-brand:hover { color: inherit; }
.topnav-brand img {
  height: 28px;
  width: auto;
}
.topnav-wordmark {
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.02em;
  color: var(--color-text-inverse);
}
.topnav-sublabel {
  font-weight: 400;
  font-size: 13px;
  color: var(--color-ember);
  letter-spacing: 0.04em;
  margin-left: 4px;
}
.topnav-links {
  display: flex;
  gap: var(--space-xl);
}
.topnav-links a {
  font-size: 13px;
  font-weight: 400;
  color: rgba(248,244,240,0.5);
  transition: color var(--transition-fast);
}
.topnav-links a:hover {
  color: var(--color-text-inverse);
}
.topnav-links a.active {
  color: var(--color-ember-light);
  font-weight: 500;
}

/* ── Hero (obsidian header band) ──────────────────────────────────────────── */
.hero {
  background: var(--color-obsidian);
  padding: var(--space-3xl) var(--space-xl) var(--space-3xl);
  color: var(--color-text-inverse);
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
}
.hero-mark {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}
.hero-mark img {
  width: 120px;
  height: 120px;
  object-fit: contain;
}
.hero-wordmark {
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--color-text-inverse);
  line-height: 1;
}
.hero-text {
  flex: 1;
}
.hero-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ember-light);
  margin-bottom: var(--space-sm);
}
.hero-title {
  font-size: 36px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin-bottom: var(--space-xs);
}
.hero-title-accent {
  color: var(--color-ember);
}
.hero-subtitle {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(248,244,240,0.7);
  max-width: 640px;
}

/* ── Page content shell ───────────────────────────────────────────────────── */
.page {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-xl) var(--space-4xl);
}

/* ── Doc nav (single-row dropdown nav under the hero) ─────────────────────── */
.docnav-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--color-surface);
  border: var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-3xl);
  flex-wrap: wrap;
}

.docnav-home {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ember);
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast);
}
.docnav-home:hover {
  background: rgba(212, 84, 26, 0.08);
  color: var(--color-ember);
}

.docnav-divider {
  width: 1px;
  height: 18px;
  background: var(--color-border);
  margin: 0 var(--space-xs);
}

.docnav-group {
  position: relative;
}

.docnav-trigger {
  font-family: var(--font-web);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition: all var(--transition-fast);
}
.docnav-trigger::after {
  content: '▾';
  font-size: 12px;
  line-height: 1;
  margin-left: 6px;
  display: inline-block;
  transform: scale(1.6);
  transform-origin: center;
  transition: transform var(--transition-fast);
  opacity: 0.85;
}
.docnav-trigger:hover,
.docnav-group:hover .docnav-trigger,
.docnav-group:focus-within .docnav-trigger {
  background: rgba(17, 24, 39, 0.06);
  color: var(--color-ink);
}
.docnav-trigger.has-current {
  background: var(--color-obsidian);
  color: var(--color-ember-light);
}
.docnav-trigger.has-current:hover,
.docnav-group:hover .docnav-trigger.has-current,
.docnav-group:focus-within .docnav-trigger.has-current {
  background: var(--color-obsidian-light);
  color: var(--color-ember-light);
}
.docnav-group:hover .docnav-trigger::after,
.docnav-group:focus-within .docnav-trigger::after {
  transform: scale(1.6) rotate(180deg);
}

.docnav-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: white;
  border: var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  min-width: 240px;
  padding: var(--space-xs);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--transition-fast),
              visibility var(--transition-fast),
              transform var(--transition-fast);
  z-index: 100;
}
/* Transparent bridge so the cursor doesn't fall out of :hover when crossing
   the gap from the trigger down to the menu. */
.docnav-menu::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}
.docnav-group:hover .docnav-menu,
.docnav-group:focus-within .docnav-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.docnav-menu a {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--color-ink);
  padding: 8px 14px 8px 16px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}
.docnav-menu a:hover {
  background: var(--color-surface);
  color: var(--color-ember);
}
.docnav-menu a.current {
  background: var(--color-obsidian);
  color: var(--color-ember-light);
  font-weight: 500;
}
/* Right-edge groups: anchor menu to the right so it doesn't overflow viewport */
.docnav-group.docnav-right .docnav-menu {
  left: auto;
  right: 0;
}

/* ── Section structure ────────────────────────────────────────────────────── */
.section {
  margin-bottom: var(--space-4xl);
}
.section-eyebrow {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ember);
  margin-bottom: var(--space-xs);
}
.section-title {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.3px;
  line-height: 1.2;
  margin-bottom: var(--space-sm);
}
.section-lede {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-muted);
  max-width: 720px;
  margin-bottom: var(--space-xl);
}
.subsection-title {
  font-size: 18px;
  font-weight: 500;
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  font-family: var(--font-web);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  padding: var(--space-sm) 18px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-primary {
  background: var(--color-ember);
  color: var(--color-text-inverse);
}
.btn-primary:hover  { background: var(--color-ember-light); }
.btn-primary:active { background: var(--color-ember-dark); }
.btn-secondary {
  background: transparent;
  color: var(--color-ember);
  border: 0.5px solid var(--color-ember);
}
.btn-secondary:hover { background: rgba(212,84,26,0.06); }
.btn-ghost {
  background: transparent;
  color: var(--color-ink);
  border: 0.5px solid var(--color-border);
}
.btn-ghost:hover { background: rgba(17,24,39,0.04); }
.btn-dark {
  background: var(--color-obsidian);
  color: var(--color-text-inverse);
}
.btn-dark:hover { background: var(--color-obsidian-light); }

.btn-row {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--space-md);
}

/* ── Inputs ───────────────────────────────────────────────────────────────── */
.input {
  background: var(--color-page-bg);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-web);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-ink);
  width: 100%;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.input:focus {
  outline: none;
  border: 1px solid var(--color-ember);
  box-shadow: 0 0 0 3px rgba(212,84,26,0.10);
}
.input::placeholder { color: var(--color-muted); }

/* ── Cards ────────────────────────────────────────────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-lg);
}
.card {
  background: var(--color-surface);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}
.card-dark {
  background: var(--color-obsidian);
  border: 0.5px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  color: var(--color-text-inverse);
}
.card-featured {
  border: var(--border-featured);
  background: var(--color-page-bg);
}
.card-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: var(--space-xs);
}
.card-body {
  font-size: 12px;
  color: var(--color-muted);
  line-height: 1.6;
}
.card-dark .card-body { color: rgba(248,244,240,0.65); }

/* ── Status badges ────────────────────────────────────────────────────────── */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  letter-spacing: 0.02em;
}
.badge-clear {
  background: rgba(29,158,117,0.12);
  color: #0F6E56;
}
.badge-flag {
  background: rgba(226,75,74,0.12);
  color: #A82E2D;
}
.badge-review {
  background: rgba(245,166,35,0.12);
  color: #7A5200;
}
/* Match-type badges (used in result-type reference tables) */
.badge-strong {
  background: rgba(29,158,117,0.12);
  color: #0F6E56;
}
.badge-fuzzy {
  background: rgba(245,166,35,0.12);
  color: #7A5200;
}

/* ── Doc footer ───────────────────────────────────────────────────────────── */
.doc-footer {
  margin-top: var(--space-4xl);
  padding-top: var(--space-lg);
  border-top: var(--border-default);
  font-size: 11px;
  color: var(--color-muted);
  letter-spacing: 0.02em;
}

/* ════════════════════════════════════════════════════════════════════════════
   Documentation prose components
   Used by every Process/* doc and the index. The shell components above
   build the page chrome; the components below build the document body.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Body prose primitives ───────────────────────────────────────────────── */
ul, ol { margin: var(--space-sm) 0 var(--space-lg) var(--space-xl); }
li { margin-bottom: var(--space-xs); line-height: 1.65; }
strong { font-weight: 500; color: var(--color-ink); }

code {
  background: var(--color-surface);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-family: Consolas, 'Courier New', monospace;
  font-size: 0.92em;
  color: var(--color-obsidian);
}

pre {
  background: var(--color-obsidian);
  color: var(--color-text-inverse);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  font-family: Consolas, 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.7;
  overflow-x: auto;
  margin: var(--space-md) 0 var(--space-lg);
  white-space: pre;
}
pre code {
  background: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
}

/* ── Flow diagram (horizontal step boxes with arrows between) ────────────── */
.flow {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: var(--space-lg) 0 var(--space-xl);
  flex-wrap: wrap;
}
.flow-step {
  background: var(--color-surface);
  border: var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-size: 12px;
  line-height: 1.5;
  flex: 1;
  min-width: 120px;
}
.flow-step strong {
  display: block;
  font-size: 11px;
  color: var(--color-ember);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}
.flow-arrow {
  padding: 0 var(--space-xs);
  font-size: 18px;
  color: var(--color-ember);
  display: flex;
  align-items: center;
}

/* ── Numbered section divider (badge + rule line) ────────────────────────── */
.section-label {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-2xl) 0 var(--space-lg);
}
.section-badge {
  display: inline-block;
  font-family: var(--font-web);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-inverse);
  background: var(--color-obsidian);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.section-rule {
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* ── Callouts (left border + tinted background) ──────────────────────────── */
.callout {
  border-left: 3px solid var(--color-ember);
  background: var(--color-surface);
  padding: var(--space-md) var(--space-lg);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin: var(--space-lg) 0;
  font-size: 13px;
  line-height: 1.65;
}
.callout strong { color: var(--color-obsidian); }

.callout-info {
  border-left-color: var(--color-obsidian);
  background: var(--color-surface);
}
.callout-success {
  border-left-color: var(--color-success);
  background: rgba(29, 158, 117, 0.08);
}
.callout-success strong { color: #0F6E56; }

.callout-warning {
  border-left-color: var(--color-warning);
  background: rgba(245, 166, 35, 0.10);
}
.callout-warning strong { color: #7A5200; }

.callout-danger {
  border-left-color: var(--color-error);
  background: rgba(226, 75, 74, 0.08);
}
.callout-danger strong { color: #A82E2D; }

/* ── Numbered step list (ember circles) ──────────────────────────────────── */
.step-list {
  list-style: none;
  margin-left: 0;
  counter-reset: steps;
  padding-left: 0;
}
.step-list li {
  counter-increment: steps;
  position: relative;
  padding-left: 40px;
  margin-bottom: var(--space-md);
  min-height: 28px;
}
.step-list li::before {
  content: counter(steps);
  position: absolute;
  left: 0;
  top: 1px;
  background: var(--color-ember);
  color: var(--color-text-inverse);
  font-weight: 500;
  font-size: 11px;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Checklist (square checkbox marker before each item) ─────────────────── */
.checklist {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}
.checklist li {
  position: relative;
  padding-left: 28px;
  margin-bottom: var(--space-sm);
  line-height: 1.65;
}
.checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--color-ember);
  border-radius: var(--radius-sm);
  background: white;
}

/* ── Interactive checklist (HTML checkbox inputs, used in smoke tests) ───── */
.checklist-form {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}
.checklist-form li {
  position: relative;
  padding: 6px 0 6px 28px;
  border-bottom: var(--border-default);
  font-size: 13px;
  line-height: 1.55;
}
.checklist-form li:last-child { border-bottom: none; }
.checklist-form input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 8px;
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--color-ember);
}
.checklist-form .note {
  display: block;
  font-size: 12px;
  color: var(--color-muted);
  margin-top: 2px;
  font-style: italic;
}
@media print {
  .checklist-form input[type="checkbox"] {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ── Run header form (3-column input grid for verification docs) ─────────── */
.run-header {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
}
.run-field label {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ember);
  margin-bottom: 4px;
}
.run-field input[type="text"] {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--color-ember);
  background: transparent;
  font-family: var(--font-web);
  font-size: 13px;
  color: var(--color-ink);
  padding: 2px 0 4px;
  outline: none;
}
@media print {
  .run-field input[type="text"] { border-bottom: 1px solid #999; }
}

/* ── Sub-group label (used inside a section to title a checklist subset) ─── */
.check-group {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-ember);
  margin: var(--space-md) 0 var(--space-xs);
  padding-bottom: 3px;
  border-bottom: var(--border-default);
}

/* ── Step block (manually-numbered, header + body layout) ────────────────── */
.step {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  align-items: flex-start;
}
.step-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--color-ember);
  color: var(--color-text-inverse);
  font-weight: 500;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-body { flex: 1; }
.step-body strong {
  display: block;
  margin-bottom: 4px;
  color: var(--color-obsidian);
  font-size: 14px;
}

/* ── Credential box (label + key/value table) ────────────────────────────── */
.cred-box {
  border: var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-md) 0 var(--space-lg);
  background: white;
}
.cred-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ember);
  margin-bottom: var(--space-sm);
}
.cred-box table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.cred-box td {
  padding: 6px 8px;
  border-bottom: var(--border-default);
  vertical-align: top;
  line-height: 1.55;
}
.cred-box td:first-child {
  font-weight: 500;
  color: var(--color-ink);
  white-space: nowrap;
  width: 38%;
}
.cred-box tr:last-child td { border-bottom: none; }

/* ── Generic data table ──────────────────────────────────────────────────── */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: var(--space-md) 0 var(--space-xl);
  border: var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.table thead th {
  background: var(--color-obsidian);
  color: var(--color-text-inverse);
  font-weight: 500;
  text-align: left;
  padding: 10px 14px;
  font-size: 12px;
  letter-spacing: 0.02em;
}
.table tbody td {
  padding: 10px 14px;
  border-bottom: var(--border-default);
  line-height: 1.55;
  vertical-align: top;
}
.table tbody tr:nth-child(even) { background: var(--color-surface); }
.table tbody tr:last-child td { border-bottom: none; }

/* ════════════════════════════════════════════════════════════════════════════
   Roadmap components (collapsible version bands, feature items, highlight
   cards). Used by product_roadmap.html and reusable for any release-notes
   style document.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Version band (collapsible <details>) ────────────────────────────────── */
.version-band { margin-bottom: var(--space-xl); }
.version-band > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  user-select: none;
}
.version-band > summary::marker,
.version-band > summary::-webkit-details-marker { display: none; }
.version-band[open] > summary { margin-bottom: var(--space-md); }
.version-band:not([open]) > summary { margin-bottom: 0; }

.version-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.badge-current     { background: var(--color-ember); color: var(--color-text-inverse); }
.badge-development { background: var(--color-obsidian); color: var(--color-ember-light); }
.badge-prior       { background: var(--color-surface); color: var(--color-muted); }
.badge-prior:hover { background: var(--color-border); color: var(--color-ink); }

.version-badge .chevron {
  font-style: normal;
  font-size: 9px;
  line-height: 1;
  transition: transform var(--transition-fast);
  display: inline-block;
}
details.version-band[open] .chevron { transform: rotate(90deg); }

.version-rule {
  flex: 1;
  height: 1px;
  background: var(--color-border);
}
.version-band:not([open]) > summary .version-rule { opacity: 0.6; }

/* ── Feature item (colored dot + bold title + description) ───────────────── */
.feature-item {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  margin-bottom: var(--space-sm);
  padding-left: 4px;
}
.feature-dot {
  width: 9px;
  height: 9px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  margin-top: 6px;
}
.dot-built   { background: var(--color-success); }
.dot-next    { background: var(--color-ember); }
.dot-horizon { background: var(--color-muted); }

.feature-text strong {
  display: block;
  font-size: 13px;
  color: var(--color-obsidian);
  margin-bottom: 2px;
}
.feature-text span {
  font-size: 12px;
  color: var(--color-muted);
  line-height: 1.55;
}

/* ── Next card (highlighted "coming next" panel) ─────────────────────────── */
.next-card {
  border: 2px solid var(--color-ember);
  border-radius: var(--radius-md);
  padding: 0;
  margin-top: var(--space-xl);
  overflow: hidden;
}
.next-card-header {
  background: var(--color-ember);
  color: var(--color-text-inverse);
  font-family: var(--font-web);
  font-size: 16px;
  font-weight: 500;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.next-eyebrow {
  font-family: var(--font-web);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(248, 244, 240, 0.75);
  margin-bottom: 1px;
  display: block;
}
.next-card-body {
  padding: var(--space-lg) var(--space-lg) var(--space-sm);
  background: white;
}
.next-card-body .feature-item { margin-bottom: var(--space-md); }
.next-card .feature-dot { background: var(--color-ember); }

/* ── Horizon section (de-emphasized future-state list) ───────────────────── */
.horizon-section { margin-top: var(--space-3xl); }
.horizon-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}
.horizon-header-text {
  font-family: var(--font-web);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-muted);
}
.horizon-rule {
  flex: 1;
  height: 1px;
  background: var(--color-border);
}
.horizon-section .feature-item { opacity: 0.85; }
.horizon-section .feature-text strong { color: var(--color-muted); }

/* ── Legend (color-coded key) ────────────────────────────────────────────── */
.legend {
  display: flex;
  gap: var(--space-xl);
  flex-wrap: wrap;
  background: var(--color-surface);
  border: var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-lg);
  margin-bottom: var(--space-2xl);
  font-size: 12px;
  color: var(--color-muted);
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.legend-dot {
  width: 9px;
  height: 9px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

/* ── Doc-card grid (for the documentation overview / index page) ─────────── */
.doc-group {
  margin: var(--space-3xl) 0 var(--space-lg);
}
.doc-group-label {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}
.doc-group-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  color: var(--color-text-inverse);
}
.doc-group-rule {
  flex: 1;
  height: 1px;
  background: var(--color-border);
}
.doc-group-desc {
  font-size: 13px;
  color: var(--color-muted);
  margin-bottom: var(--space-md);
  max-width: 720px;
}

/* Group badge variants — use distinct names to avoid collision with .status-badge variants */
.doc-group-badge-user    { background: var(--color-obsidian); }
.doc-group-badge-admin   { background: var(--color-muted); }
.doc-group-badge-release { background: var(--color-muted); }
.doc-group-badge-plan    { background: var(--color-ember); }
.doc-group-badge-design  { background: var(--color-obsidian-light); }

.doc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
@media (max-width: 600px) { .doc-grid { grid-template-columns: 1fr; } }

.doc-card {
  display: block;
  text-decoration: none;
  background: white;
  border: var(--border-default);
  border-left: 4px solid var(--color-ember);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.doc-card:hover {
  background: var(--color-surface);
  border-left-color: var(--color-ember-dark);
}
.doc-card-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-obsidian);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.doc-card-desc {
  font-size: 13px;
  color: var(--color-muted);
  line-height: 1.55;
}
.doc-card-muted { border-left-color: var(--color-border); }
.doc-card-muted:hover { border-left-color: var(--color-ember); }

/* ── Print helpers ───────────────────────────────────────────────────────── */
@media print {
  .page-break { page-break-before: always; }
  .avoid-break { page-break-inside: avoid; }
  .callout, .cred-box, .table, .section-label, .doc-group { page-break-inside: avoid; }
}