/* ==========================================================================
   CEO Metin Yazarı — Design System v2 · "Executive Writing Studio"
   --------------------------------------------------------------------------
   Owner: design. Living reference with copy-paste examples: /styleguide
   Macros: templates/components/ui.html · Icons: templates/components/icons.html

   Idea: a CEO office's writing desk. A deep-navy "spine" (sidebar) holds the
   tools; the canvas is warm paper; generated texts sit on white letter
   sheets set in a reading serif. Brand teal is used sparingly and precisely:
   the primary action, the active item, the focus ring — and the recurring
   "index tab" (a short teal bar that marks the start of a rule, like a
   binder divider). Navy panels carry a faint guilloche moiré, the engraved
   line-work of banknotes and certificates.

   Type: Newsreader (display + documents, optical sizes) + Instrument Sans (UI).
   Both loaded with latin-ext for Turkish (ç ğ ı İ ö ş ü â).

   Contents
     1. Tokens ............ fonts, type, space, radii, layout, z, motion, colours
     2. Base & reset
     3. Typography ........ headings, eyebrow, links, code, .prose-doc, .sheet
     4. Layout ............ app shell, sidebar, topbar, page, grids, stacks, split
     5. Components
        5.1 buttons   5.2 badges   5.3 cards   5.4 forms   5.5 dropzone
        5.6 tabs      5.7 stepper  5.8 score   5.9 stats   5.10 alerts
        5.11 empty    5.12 loading 5.13 table  5.14 lists  5.15 modal
        5.16 toasts   5.17 tooltip 5.18 kbd    5.19 marks  5.20 misc
     6. Motion ............ page-enter reveal, swap fades, keyframes
     7. Utilities
     8. HTMX helpers
     9. Accessibility & print
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* Brand anchors (Kuveyt Türk) — use the semantic tokens below in UI code */
  --brand-teal: #01b8aa;
  --brand-navy: #031d40;

  /* Families — solid system fallbacks with Turkish glyph coverage */
  --font-sans: "Instrument Sans", "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Charter, Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, "Liberation Mono", monospace;

  /* Type scale (UI body = --text-md, 15px) */
  --text-2xs: 0.6875rem;   /* 11 — eyebrows, table heads */
  --text-xs: 0.75rem;      /* 12 — meta, hints */
  --text-sm: 0.8125rem;    /* 13 — secondary UI */
  --text-base: 0.875rem;   /* 14 — controls, nav, buttons */
  --text-md: 0.9375rem;    /* 15 — UI body */
  --text-lg: 1.0625rem;    /* 17 */
  --text-xl: 1.25rem;      /* 20 — card/section titles (serif) */
  --text-2xl: 1.5rem;      /* 24 */
  --text-3xl: 1.875rem;    /* 30 — stat values */
  --text-4xl: 2.375rem;    /* 38 */
  --text-5xl: 3rem;        /* 48 */
  --text-display: clamp(1.875rem, 1.35rem + 1.7vw, 2.625rem); /* page titles */

  --leading-none: 1;
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.55;
  --leading-doc: 1.7;
  --tracking-tight: -0.018em;
  --tracking-caps: 0.14em;

  /* Documents (generated CEO texts) */
  --doc-size: 1.125rem;    /* 18px; 17px on small screens */
  --doc-measure: 68ch;

  /* Spacing — 4px base */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Radii — precise, never bubbly */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* Layout */
  --sidebar-w: 264px;
  --topbar-h: 56px;
  --page-max: 1200px;
  --page-pad: clamp(1rem, 0.4rem + 2.6vw, 2.75rem);
  --tab-w: 3rem;           /* width of the teal "index tab" motif */

  /* Z-index scale */
  --z-base: 0;
  --z-raised: 1;
  --z-sticky: 10;
  --z-topbar: 30;
  --z-backdrop: 40;
  --z-drawer: 50;
  --z-modal: 60;
  --z-toast: 70;
  --z-tooltip: 80;

  /* Motion */
  --dur-1: 120ms;          /* hovers, presses */
  --dur-2: 200ms;          /* small state changes */
  --dur-3: 320ms;          /* drawers, dialogs */
  --dur-4: 560ms;          /* page reveal */
  --dur-5: 1100ms;         /* score fill */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-std: cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* --- Light theme (default) ------------------------------------------------ */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* Surfaces: warm paper desk → white sheets */
  --surface-0: #f3f1ec;          /* canvas / desk */
  --surface-1: #fffefc;          /* cards */
  --surface-2: #f5f3ee;          /* inset wells inside cards */
  --surface-3: #ebe8e1;          /* hover on inset, tracks, skeleton */
  --surface-raised: #ffffff;     /* sheets, inputs, dialogs, popovers */
  --surface-inverse: #031d40;

  /* Hairlines (navy-tinted alpha so they sit on any surface) */
  --line-1: rgb(3 29 64 / 0.085);
  --line-2: rgb(3 29 64 / 0.15);
  --line-3: rgb(3 29 64 / 0.28);

  /* Ink */
  --ink-1: #031d40;              /* primary text — brand navy (14.8:1 on canvas) */
  --ink-2: #3a4a63;              /* secondary (7.9:1) */
  --ink-3: #5a687d;              /* muted, still AA (4.9:1 on canvas) */
  --ink-4: #8a95a6;              /* decorative only — never for text you must read */
  --ink-placeholder: #697588;
  --ink-inverse: #f7f5f0;

  /* Primary = Kuveyt Türk teal. White on #01b8aa fails AA → navy text on teal. */
  --primary: #01b8aa;
  --primary-hover: #00a598;
  --primary-press: #009286;
  --primary-ink: #00766c;        /* teal text/links on light surfaces (5.3:1) */
  --primary-soft: #e0f4f1;
  --primary-soft-2: #c9ebe6;
  --primary-line: rgb(1 184 170 / 0.5);
  --on-primary: #031d40;         /* 6.7:1 on #01b8aa */
  --focus: #008a80;
  --focus-ring: 0 0 0 3px rgb(1 184 170 / 0.26);

  /* Status */
  --success: #2f8f5b;
  --success-ink: #1c6b40;
  --success-soft: #e5f2e9;
  --success-line: rgb(47 143 91 / 0.35);
  --warning: #b87a0a;
  --warning-ink: #85540a;
  --warning-soft: #fbf0da;
  --warning-line: rgb(184 122 10 / 0.38);
  --danger: #c2372f;
  --danger-solid: #c2372f;       /* white text 5.4:1 */
  --danger-solid-hover: #a82c25;
  --danger-ink: #a12a24;
  --danger-soft: #fbe9e6;
  --danger-line: rgb(194 55 47 / 0.35);
  --info: #2f64b0;
  --info-ink: #22508f;
  --info-soft: #e7eef8;
  --info-line: rgb(47 100 176 / 0.35);

  /* Controls */
  --control-bg: var(--surface-raised);
  --control-off: #7c889a;        /* switch track off (3.2:1) */

  /* Navy spine (sidebar & ink panels) */
  --side-bg: #031d40;
  --side-bg-2: #07264f;
  --side-ink: #e8edf3;
  --side-ink-2: #aebdcf;
  --side-ink-3: #8196b0;
  --side-line: rgb(255 255 255 / 0.08);
  --side-hover: rgb(255 255 255 / 0.055);
  --side-active: rgb(1 184 170 / 0.15);
  --side-accent: #35d1c3;
  --guilloche: rgb(53 209 195 / 0.11);

  /* Elevation — navy-tinted, layered, never muddy */
  --shadow-1: 0 1px 0 rgb(3 29 64 / 0.03), 0 1px 2px rgb(3 29 64 / 0.05);
  --shadow-2: 0 1px 2px rgb(3 29 64 / 0.05), 0 6px 16px -6px rgb(3 29 64 / 0.12);
  --shadow-3: 0 2px 6px rgb(3 29 64 / 0.06), 0 18px 44px -12px rgb(3 29 64 / 0.28);
  --shadow-sheet: 0 1px 1px rgb(3 29 64 / 0.04), 0 3px 6px -2px rgb(3 29 64 / 0.05), 0 22px 40px -24px rgb(3 29 64 / 0.28);
  --shadow-inset: inset 0 1px 2px rgb(3 29 64 / 0.05);

  /* Specials */
  --toast-bg: #0a2447;
  --toast-ink: #eef2f6;
  --toast-ink-2: #b3c1d2;
  --tooltip-bg: #031d40;
  --tooltip-ink: #f3f1ec;
  --code-bg: #f5f3ee;
  --code-ink: #1d3252;
  --diff-add-bg: #daf1e1;
  --diff-add-ink: #14532d;
  --diff-del-bg: #fbe2df;
  --diff-del-ink: #8a1f1a;
  --selection: rgb(1 184 170 / 0.24);
  --backdrop: rgb(3 29 64 / 0.42);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .01 0 0 0 0 .11 0 0 0 0 .25 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23g)' opacity='.16'/></svg>");
}

/* --- Dark theme · "night desk" -------------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --surface-0: #07162a;
  --surface-1: #0c1f37;
  --surface-2: #091a2f;
  --surface-3: #142a48;
  --surface-raised: #10243e;
  --surface-inverse: #ebe7de;

  --line-1: rgb(205 219 237 / 0.09);
  --line-2: rgb(205 219 237 / 0.16);
  --line-3: rgb(205 219 237 / 0.3);

  --ink-1: #ece8df;              /* warm ivory ink */
  --ink-2: #b9c3cf;
  --ink-3: #8f9bad;
  --ink-4: #5f6d82;
  --ink-placeholder: #818ea2;
  --ink-inverse: #031d40;

  --primary: #01b8aa;
  --primary-hover: #1ac8ba;
  --primary-press: #00a598;
  --primary-ink: #45d6c9;
  --primary-soft: rgb(1 184 170 / 0.14);
  --primary-soft-2: rgb(1 184 170 / 0.22);
  --primary-line: rgb(69 214 201 / 0.5);
  --on-primary: #031d40;
  --focus: #45d6c9;
  --focus-ring: 0 0 0 3px rgb(69 214 201 / 0.28);

  --success: #3fae72;
  --success-ink: #7fd8a4;
  --success-soft: rgb(63 174 114 / 0.15);
  --success-line: rgb(127 216 164 / 0.35);
  --warning: #d9a13a;
  --warning-ink: #f1c26b;
  --warning-soft: rgb(217 161 58 / 0.15);
  --warning-line: rgb(241 194 107 / 0.35);
  --danger: #e25b52;
  --danger-solid: #c2372f;
  --danger-solid-hover: #d3453c;
  --danger-ink: #ff9d94;
  --danger-soft: rgb(226 91 82 / 0.15);
  --danger-line: rgb(255 157 148 / 0.35);
  --info: #5b8fdc;
  --info-ink: #a3c3f5;
  --info-soft: rgb(91 143 220 / 0.15);
  --info-line: rgb(163 195 245 / 0.35);

  --control-bg: var(--surface-2);
  --control-off: #62728a;

  --side-bg: #041126;
  --side-bg-2: #0a1d38;
  --side-ink: #e6ebf1;
  --side-ink-2: #a7b6c9;
  --side-ink-3: #7489a3;
  --side-line: rgb(255 255 255 / 0.07);
  --side-hover: rgb(255 255 255 / 0.05);
  --side-active: rgb(1 184 170 / 0.16);
  --side-accent: #45d6c9;
  --guilloche: rgb(69 214 201 / 0.08);

  --shadow-1: 0 1px 0 rgb(0 0 0 / 0.18), 0 1px 2px rgb(0 0 0 / 0.24);
  --shadow-2: 0 1px 2px rgb(0 0 0 / 0.28), 0 8px 20px -8px rgb(0 0 0 / 0.5);
  --shadow-3: 0 2px 8px rgb(0 0 0 / 0.3), 0 24px 56px -12px rgb(0 0 0 / 0.65);
  --shadow-sheet: 0 1px 0 rgb(255 255 255 / 0.03) inset, 0 2px 4px rgb(0 0 0 / 0.25), 0 24px 48px -24px rgb(0 0 0 / 0.7);
  --shadow-inset: inset 0 1px 2px rgb(0 0 0 / 0.25);

  --toast-bg: #17304f;
  --toast-ink: #eef2f6;
  --toast-ink-2: #aebdcf;
  --tooltip-bg: #e9e5dc;
  --tooltip-ink: #031d40;
  --code-bg: #081628;
  --code-ink: #c9d6e6;
  --diff-add-bg: rgb(63 174 114 / 0.2);
  --diff-add-ink: #a9ecc4;
  --diff-del-bg: rgb(226 91 82 / 0.2);
  --diff-del-ink: #ffb7b0;
  --selection: rgb(69 214 201 / 0.28);
  --backdrop: rgb(1 8 18 / 0.62);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .8 0 0 0 0 .86 0 0 0 0 .93 0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23g)' opacity='.05'/></svg>");
}

/* Ink scope: re-maps tokens so ANY component placed on a navy panel just works.
   Used by .sidebar and .card--ink; available as .surface-ink. */
.surface-ink,
.sidebar,
.card--ink {
  --surface-1: rgb(255 255 255 / 0.05);
  --surface-2: rgb(255 255 255 / 0.04);
  --surface-3: rgb(255 255 255 / 0.09);
  --surface-raised: rgb(255 255 255 / 0.07);
  --control-bg: rgb(255 255 255 / 0.06);
  --line-1: rgb(255 255 255 / 0.09);
  --line-2: rgb(255 255 255 / 0.16);
  --line-3: rgb(255 255 255 / 0.3);
  --ink-1: #ffffff;
  --ink-2: var(--side-ink-2);
  --ink-3: var(--side-ink-3);
  --ink-4: rgb(255 255 255 / 0.35);
  --primary-ink: var(--side-accent);
  --primary-soft: rgb(1 184 170 / 0.16);
  --focus: var(--side-accent);
  --shadow-1: none;
  color: var(--ink-1);
}


/* ==========================================================================
   2. BASE & RESET
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-width: thin;
  scrollbar-color: var(--line-3) transparent;
  scroll-padding-top: calc(var(--topbar-h) + 1rem);
}

html:has(dialog:modal),
html.is-drawer-open {
  overflow: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  font-weight: 400;
  color: var(--ink-1);
  background-color: var(--surface-0);
  background-image: var(--grain);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, pre {
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: 600;
  line-height: var(--leading-tight);
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

ul[class],
ol[class] {
  list-style: none;
  margin: 0;
  padding: 0;
}

img, svg, video, canvas {
  display: block;
  max-width: 100%;
}

svg {
  flex-shrink: 0;
}

/* Safety net: an inline SVG with no size would otherwise fill its container
   (e.g. legacy markup). Zero specificity, so any component rule wins. */
:where(svg:not([width]):not([height])) {
  width: 1.25em;
  height: 1.25em;
}

img {
  height: auto;
}

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

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

table {
  border-collapse: collapse;
}

hr {
  border: 0;
  border-top: 1px solid var(--line-1);
  margin: var(--space-6) 0;
}

[hidden] {
  display: none !important;
}

::selection {
  background: var(--selection);
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Smooth colour hand-off when the theme changes (disabled during the switch) */
.no-transitions *,
.no-transitions *::before,
.no-transitions *::after {
  transition: none !important;
}


/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

a {
  color: var(--primary-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 0.2em;
  transition: color var(--dur-1) var(--ease-std), text-decoration-color var(--dur-1) var(--ease-std);
}

a:hover {
  text-decoration-color: currentColor;
}

/* Standalone link (no underline until hover) */
.link {
  color: var(--primary-ink);
  font-weight: 500;
  text-decoration: none;
}

.link:hover {
  text-decoration: underline;
}

.link--muted {
  color: var(--ink-3);
}

.link--muted:hover {
  color: var(--ink-1);
}

/* Display & headings — serif for editorial moments, sans for chrome */
.display {
  font-family: var(--font-serif);
  font-size: var(--text-display);
  font-weight: 450;
  line-height: 1.08;
  letter-spacing: var(--tracking-tight);
  font-optical-sizing: auto;
}

.h1, .h2, .h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.2;
  color: var(--ink-1);
}

.h1 { font-size: var(--text-4xl); }
.h2 { font-size: var(--text-2xl); }
.h3 { font-size: var(--text-xl); }

.h4 {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--ink-1);
}

/* Eyebrow: small caps label. Turkish casing is correct because <html lang="tr">. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-3);
}

.eyebrow--primary {
  color: var(--primary-ink);
}

.lead {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--ink-2);
}

small,
.small {
  font-size: var(--text-sm);
}

strong, b {
  font-weight: 600;
}

code,
kbd,
samp {
  font-family: var(--font-mono);
  font-size: 0.86em;
}

:not(pre) > code {
  padding: 0.12em 0.38em;
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  border: 1px solid var(--line-1);
  color: var(--code-ink);
  word-break: break-word;
}

.code-block {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--code-ink);
  background: var(--code-bg);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-md);
  white-space: pre;
  tab-size: 2;
  scrollbar-width: thin;
}

.code-block code {
  font-size: inherit;
  background: none;
  border: 0;
  padding: 0;
}

.code-block--wrap {
  white-space: pre-wrap;
  word-break: break-word;
}

/* --- .prose-doc: generated CEO documents --------------------------------- */
.prose-doc {
  --doc-bg: var(--surface-raised);
  max-width: var(--doc-measure);
  font-family: var(--font-serif);
  font-size: var(--doc-size);
  line-height: var(--leading-doc);
  font-optical-sizing: auto;
  font-weight: 400;
  color: var(--ink-1);
  overflow-wrap: break-word;
  hyphens: manual;
}

.card .prose-doc {
  --doc-bg: var(--surface-1);
}

/* Block rhythm: every block after the first starts 1em lower — consecutive
   paragraphs included. (No `.prose-doc p { margin: 0 }` here: <p> margins are
   already reset in BASE, and at 0-1-1 that rule used to beat this 0-1-0 one,
   so answer paragraphs ran together as one block.) */
.prose-doc > * + * {
  margin-top: 1em;
}

.prose-doc h1,
.prose-doc h2,
.prose-doc h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--ink-1);
  margin-top: 1.9em;
}

.prose-doc h1 { font-size: 1.7em; font-weight: 500; }
.prose-doc h2 { font-size: 1.35em; }
.prose-doc h3 { font-size: 1.12em; }

.prose-doc h4 {
  margin-top: 1.9em;
  font-family: var(--font-sans);
  font-size: 0.68em;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-3);
}

.prose-doc h1 + *,
.prose-doc h2 + *,
.prose-doc h3 + *,
.prose-doc h4 + * {
  margin-top: 0.6em;
}

.prose-doc > :first-child {
  margin-top: 0;
}

.prose-doc a {
  color: var(--primary-ink);
}

.prose-doc strong {
  font-weight: 600;
}

.prose-doc em {
  font-style: italic;
}

.prose-doc ul,
.prose-doc ol {
  padding-left: 1.35em;
}

.prose-doc li + li {
  margin-top: 0.4em;
}

.prose-doc li::marker {
  color: var(--primary-ink);
}

.prose-doc ol > li::marker {
  font-family: var(--font-sans);
  font-size: 0.82em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.prose-doc blockquote {
  margin: 1.6em 0;
  padding-left: 1.2em;
  border-left: 2px solid var(--primary);
  font-style: italic;
  color: var(--ink-2);
}

/* Section break ornament: hairline with a teal lozenge */
.prose-doc hr {
  position: relative;
  width: 38%;
  height: 1px;
  margin: 2.2em auto;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--line-3), transparent);
  overflow: visible;
}

.prose-doc hr::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  background: var(--doc-bg);
  border: 1px solid var(--primary);
  transform: translate(-50%, -50%) rotate(45deg);
}

.prose-doc mark {
  background: var(--primary-soft);
  color: inherit;
  padding: 0 0.1em;
  border-radius: 2px;
}

/* Interview / Q&A: questions are set in the UI sans, numbers hang in the margin */
.prose-doc .question {
  position: relative;
  margin-top: 2em;
  font-family: var(--font-sans);
  font-size: 0.86em;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.003em;
  color: var(--ink-1);
}

.prose-doc > .question:first-child {
  margin-top: 0;
}

.prose-doc .question + * {
  margin-top: 0.55em;
}

.prose-doc .question__num {
  display: inline-block;
  min-width: 1.9em;
  color: var(--primary-ink);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 900px) {
  .sheet .prose-doc .question__num {
    position: absolute;
    right: 100%;
    min-width: 0;
    padding-right: 0.9em;
    text-align: right;
  }
}

.prose-doc .signature {
  margin-top: 2em;
  font-style: italic;
  color: var(--ink-2);
}

/* Modifiers */
.prose-doc--pre {               /* raw plain text: keep line breaks */
  white-space: pre-wrap;
}

/* …its children are inline runs (streamed text + caret, diff marks): the text's
   own line breaks are the spacing, the block rhythm above must not add any. */
.prose-doc--pre > * + * {
  margin-top: 0;
}

.prose-doc--compact {
  --doc-size: 1rem;
  line-height: 1.62;
}

.prose-doc--wide {
  max-width: none;
}

.prose-doc--letter > p:first-of-type::first-letter {
  float: left;
  margin: 0.08em 0.1em 0 0;
  font-size: 3.35em;
  line-height: 0.82;
  font-weight: 500;
  color: var(--primary-ink);
}

@media (max-width: 640px) {
  .prose-doc {
    --doc-size: 1.0625rem;
  }
}

/* --- .sheet: a letter sheet on the desk ----------------------------------- */
.sheet {
  --sheet-pad-x: clamp(1.25rem, 0.25rem + 4.5vw, 4rem);
  --sheet-pad-y: clamp(1.5rem, 0.75rem + 3vw, 3.5rem);
  position: relative;
  background: var(--surface-raised);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sheet);
  padding: var(--sheet-pad-y) var(--sheet-pad-x);
}

/* the index tab */
.sheet::before {
  content: "";
  position: absolute;
  top: -1px;
  left: var(--sheet-pad-x);
  width: var(--tab-w);
  height: 3px;
  background: var(--primary);
  border-radius: 0 0 2px 2px;
}

.sheet--centered {
  max-width: var(--sheet-max, 54rem);
  margin-inline: auto;
}

.sheet__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  margin: 0 0 var(--space-8);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line-1);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-3);
}

.sheet__foot {
  margin: var(--space-8) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line-1);
  font-size: var(--text-xs);
  color: var(--ink-3);
}

/* Stacked paper: signals several versions behind the current one */
.sheet--stacked {
  box-shadow:
    var(--shadow-sheet),
    7px 7px 0 -1px var(--surface-raised),
    7px 7px 0 0 var(--line-2),
    14px 14px 0 -1px var(--surface-raised),
    14px 14px 0 0 var(--line-1);
  margin-right: 14px;
  margin-bottom: 14px;
}

.sheet--flush {
  --sheet-pad-x: var(--space-6);
  --sheet-pad-y: var(--space-6);
}


/* ==========================================================================
   4. LAYOUT
   ========================================================================== */

/* --- App shell ------------------------------------------------------------- */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

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

.main {
  flex: 1;
  outline: none;
}

.skip-link {
  position: fixed;
  top: -4rem;
  left: var(--space-4);
  z-index: var(--z-tooltip);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-inverse);
  color: var(--ink-inverse);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--dur-2) var(--ease-out);
}

.skip-link:focus {
  top: var(--space-4);
}

/* --- Sidebar: the navy spine ----------------------------------------------- */
.sidebar {
  position: sticky;
  top: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background: var(--side-bg);
  color: var(--side-ink);
  border-right: 1px solid var(--side-line);
}

/* Guilloche: two offset families of engraved rings interfere into moiré */
.sidebar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 300px;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-radial-gradient(circle at 118% -18%, transparent 0 7px, var(--guilloche) 7px 8px),
    repeating-radial-gradient(circle at 142% 4%, transparent 0 7px, var(--guilloche) 7px 8px);
  -webkit-mask-image: linear-gradient(180deg, #000 10%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 10%, transparent 92%);
}

.sidebar__brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-4) var(--space-4) var(--space-5);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.brand__mark {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
}

.brand__mark svg {
  width: 100%;
  height: 100%;
}

.brand__text {
  display: block;
  min-width: 0;
}

.brand__name {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.1875rem;
  font-weight: 560;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: #fff;
  white-space: nowrap;
}

.brand__sub {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--side-accent);
  opacity: 0.88;
  white-space: nowrap;
}

.btn.sidebar__close {
  display: none;
}

.sidebar__cta {
  padding: var(--space-1) var(--space-4) var(--space-4);
}

.sidebar__cta .btn[aria-current="page"] {
  box-shadow: 0 0 0 2px var(--side-bg), 0 0 0 4px var(--side-accent);
}

.sidebar__nav {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-1) var(--space-3) var(--space-5);
  scrollbar-width: thin;
  scrollbar-color: rgb(255 255 255 / 0.18) transparent;
}

.nav-group + .nav-group {
  margin-top: var(--space-5);
}

.nav-group__label {
  padding: 0 var(--space-3) var(--space-2);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--side-ink-3);
}

.nav-list {
  display: grid;
  gap: 2px;
}

.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.25rem;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  color: var(--side-ink-2);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color var(--dur-1) var(--ease-std), color var(--dur-1) var(--ease-std);
}

.nav-link .icon {
  color: var(--side-ink-3);
  transition: color var(--dur-1) var(--ease-std);
}

.nav-link:hover {
  background: var(--side-hover);
  color: var(--side-ink);
}

.nav-link:hover .icon {
  color: var(--side-ink-2);
}

.nav-link.is-active {
  background: var(--side-active);
  color: #fff;
}

.nav-link.is-active .icon {
  color: var(--side-accent);
}

.nav-link.is-active::before {
  content: "";
  position: absolute;
  left: calc(var(--space-3) * -1);
  top: 0.5rem;
  bottom: 0.5rem;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--side-accent);
}

.nav-link__badge {
  margin-left: auto;
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--side-ink-3);
  font-variant-numeric: tabular-nums;
}

.sidebar__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--side-line);
}

.sidebar__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--side-ink-3);
  text-decoration: none;
}

.sidebar__meta:hover {
  color: var(--side-ink);
}

/* Theme switch (light / dark / system) */
.theme-switch {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.05);
  border: 1px solid var(--side-line);
}

.theme-switch__btn {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--side-ink-3);
  transition: background-color var(--dur-1) var(--ease-std), color var(--dur-1) var(--ease-std);
}

.theme-switch__btn:hover {
  color: var(--side-ink);
}

.theme-switch__btn[aria-pressed="true"] {
  background: rgb(255 255 255 / 0.13);
  color: #fff;
}

/* --- Topbar (< 1024px) ----------------------------------------------------- */
.topbar {
  display: none;
}

.app-backdrop {
  display: none;
}

@media (max-width: 1023.98px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(calc(var(--sidebar-w) + 24px), 86vw);
    transform: translateX(-104%);
    visibility: hidden;
    box-shadow: var(--shadow-3);
    transition: transform var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3);
  }

  .is-drawer-open .sidebar {
    transform: none;
    visibility: visible;
    transition: transform var(--dur-3) var(--ease-out), visibility 0s;
  }

  .btn.sidebar__close {
    display: inline-flex;
  }

  .app-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: var(--z-backdrop);
    background: var(--backdrop);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3);
  }

  .is-drawer-open .app-backdrop {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--dur-3) var(--ease-out), visibility 0s;
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: var(--z-topbar);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--topbar-h);
    padding: 0 var(--space-3) 0 var(--space-2);
    background: color-mix(in srgb, var(--surface-0) 86%, transparent);
    -webkit-backdrop-filter: saturate(1.5) blur(12px);
    backdrop-filter: saturate(1.5) blur(12px);
    border-bottom: 1px solid var(--line-1);
  }

  .topbar__brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    color: var(--ink-1);
    text-decoration: none;
    font-family: var(--font-serif);
    font-size: 1.0625rem;
    font-weight: 560;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }

  .topbar__brand .brand__mark {
    width: 1.875rem;
    height: 1.875rem;
  }

  .topbar__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
  }
}

@media (max-width: 420px) {
  .topbar__actions .btn__label {
    display: none;
  }
}

/* --- Page ------------------------------------------------------------------ */
.page {
  width: 100%;
  max-width: calc(var(--page-max) + var(--page-pad) * 2);
  margin-inline: auto;
  padding: clamp(1.25rem, 0.6rem + 2.4vw, 2.75rem) var(--page-pad) clamp(3rem, 2rem + 4vw, 5rem);
}

.page--narrow { --page-max: 820px; }
.page--wide { --page-max: 1560px; }
.page--full { --page-max: 100vw; }

.container {
  width: 100%;
  max-width: var(--container-max, var(--page-max));
  margin-inline: auto;
}

.container--narrow { --container-max: 760px; }
.container--prose { --container-max: calc(var(--doc-measure) + 10rem); }

/* Page header: eyebrow · serif title · subtitle · actions, over a tabbed rule */
.page-header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-4) var(--space-8);
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-8);
  border-bottom: 1px solid var(--line-1);
}

.page-header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: var(--tab-w);
  height: 2px;
  background: var(--primary);
}

.page-header__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--primary-ink);
}

.page-header__title {
  font-family: var(--font-serif);
  font-size: var(--text-display);
  font-weight: 450;
  line-height: 1.08;
  letter-spacing: var(--tracking-tight);
  color: var(--ink-1);
  font-optical-sizing: auto;
}

.page-header__subtitle {
  margin-top: var(--space-3);
  max-width: 64ch;
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--ink-2);
}

.page-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

@media (max-width: 767.98px) {
  .page-header {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}

/* Section: a titled block inside a page */
.section + .section {
  margin-top: var(--space-12);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  margin-bottom: var(--space-5);
}

.section-title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink-1);
}

.section-subtitle {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--ink-3);
}

/* --- Grids ----------------------------------------------------------------- */
.grid,
.grid-2,
.grid-3,
.grid-4,
.grid-auto {
  display: grid;
  gap: var(--grid-gap, var(--space-5));
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 640px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.grid-auto {
  grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-min, 16rem), 100%), 1fr));
}

.grid--tight { --grid-gap: var(--space-3); }
.grid--loose { --grid-gap: var(--space-8); }
.col-span-full { grid-column: 1 / -1; }

/* --- Stacks & clusters ----------------------------------------------------- */
.stack,
.stack-sm,
.stack-lg,
.stack-xl {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, var(--space-4));
}

.stack-sm { --stack-gap: var(--space-2); }
.stack-lg { --stack-gap: var(--space-8); }
.stack-xl { --stack-gap: var(--space-12); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, var(--space-3));
}

.cluster--tight { --cluster-gap: var(--space-2); }
.cluster--loose { --cluster-gap: var(--space-5); }
.cluster--between { justify-content: space-between; }
.cluster--end { justify-content: flex-end; }
.cluster--center { justify-content: center; }
.cluster--top { align-items: flex-start; }
.cluster--nowrap { flex-wrap: nowrap; }

/* --- Split: editor / result ------------------------------------------------ */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.split__pane {
  min-width: 0;
}

@media (min-width: 1100px) {
  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-8);
  }

  .split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--aside { grid-template-columns: minmax(0, 1fr) 21rem; }
  .split--aside-left { grid-template-columns: 21rem minmax(0, 1fr); }

  .sticky-panel {
    position: sticky;
    top: var(--sticky-top, 1.5rem);
    max-height: calc(100vh - var(--sticky-top, 1.5rem) * 2);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}


/* ==========================================================================
   5. COMPONENTS
   ========================================================================== */

/* --- 5.1 Buttons ----------------------------------------------------------- */
.btn {
  --btn-h: 2.375rem;
  --btn-px: 0.9375rem;
  --btn-bg: var(--surface-raised);
  --btn-bg-hover: var(--surface-2);
  --btn-ink: var(--ink-1);
  --btn-line: var(--line-2);
  --btn-line-hover: var(--line-3);
  --btn-shadow: var(--shadow-1);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: var(--btn-h);
  padding: 0 var(--btn-px);
  border: 1px solid var(--btn-line);
  border-radius: var(--radius-md);
  background: var(--btn-bg);
  box-shadow: var(--btn-shadow);
  color: var(--btn-ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  transition:
    background-color var(--dur-1) var(--ease-std),
    border-color var(--dur-1) var(--ease-std),
    color var(--dur-1) var(--ease-std),
    box-shadow var(--dur-1) var(--ease-std),
    transform var(--dur-1) var(--ease-std);
}

.btn:hover {
  background: var(--btn-bg-hover);
  border-color: var(--btn-line-hover);
  color: var(--btn-ink);
}

.btn:active {
  transform: translateY(1px);
}

.btn .icon {
  margin-inline: -0.0625rem;
}

.btn__label {
  display: inline-block;
}

.btn--primary {
  --btn-bg: var(--primary);
  --btn-bg-hover: var(--primary-hover);
  --btn-ink: var(--on-primary);
  --btn-line: transparent;
  --btn-line-hover: transparent;
  --btn-shadow: inset 0 1px 0 rgb(255 255 255 / 0.24), 0 1px 2px rgb(3 29 64 / 0.18);
}

.btn--primary:active {
  --btn-bg-hover: var(--primary-press);
}

.btn--secondary {
  /* defaults above */
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-bg-hover: color-mix(in srgb, var(--ink-1) 6%, transparent);
  --btn-ink: var(--ink-2);
  --btn-line: transparent;
  --btn-line-hover: transparent;
  --btn-shadow: none;
}

.btn--ghost:hover {
  --btn-ink: var(--ink-1);
}

.btn--subtle {
  --btn-bg: var(--primary-soft);
  --btn-bg-hover: var(--primary-soft-2);
  --btn-ink: var(--primary-ink);
  --btn-line: transparent;
  --btn-line-hover: transparent;
  --btn-shadow: none;
}

.btn--danger {
  --btn-bg: var(--danger-solid);
  --btn-bg-hover: var(--danger-solid-hover);
  --btn-ink: #ffffff;
  --btn-line: transparent;
  --btn-line-hover: transparent;
  --btn-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), 0 1px 2px rgb(3 29 64 / 0.18);
}

/* quiet destructive action (e.g. in lists) */
.btn--danger-ghost {
  --btn-bg: transparent;
  --btn-bg-hover: var(--danger-soft);
  --btn-ink: var(--danger-ink);
  --btn-line: transparent;
  --btn-line-hover: transparent;
  --btn-shadow: none;
}

.btn--sm {
  --btn-h: 2rem;
  --btn-px: 0.75rem;
  gap: 0.375rem;
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
}

.btn--lg {
  --btn-h: 3rem;
  --btn-px: 1.375rem;
  gap: 0.625rem;
  font-size: var(--text-md);
  border-radius: var(--radius-md);
}

.btn--icon {
  width: var(--btn-h);
  padding: 0;
}

.btn--block {
  display: flex;
  width: 100%;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.48;
  pointer-events: none;
  box-shadow: none;
}

/* Busy: label hides, a spinner takes its place (width is preserved) */
.btn[aria-busy="true"],
.btn.htmx-request,
.htmx-request .btn[type="submit"]:not(.btn--no-busy) {
  color: transparent !important;
  pointer-events: none;
}

.btn[aria-busy="true"] > *,
.btn.htmx-request > *,
.htmx-request .btn[type="submit"]:not(.btn--no-busy) > * {
  visibility: hidden;
}

.btn[aria-busy="true"]::before,
.btn.htmx-request::before,
.htmx-request .btn[type="submit"]:not(.btn--no-busy)::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 1rem;
  height: 1rem;
  margin: auto;
  border-radius: 50%;
  border: 2px solid var(--btn-ink);
  border-right-color: transparent;
  animation: spin 0.7s linear infinite;
}

/* Button group: joined secondary buttons */
.btn-group {
  display: inline-flex;
}

.btn-group > .btn {
  border-radius: 0;
}

.btn-group > .btn + .btn {
  margin-left: -1px;
}

.btn-group > .btn:first-child {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.btn-group > .btn:last-child {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.btn-group > .btn:hover,
.btn-group > .btn:focus-visible {
  z-index: 1;
}

/* Copy-button feedback: [data-copy] buttons get .is-copied for ~1.6s */
.btn .copy-done {
  display: none;
}

.btn.is-copied .copy-idle {
  display: none;
}

.btn.is-copied .copy-done {
  display: inline-flex;
  color: var(--success);
}

/* --- 5.2 Badges ------------------------------------------------------------ */
.badge {
  --badge-bg: var(--surface-2);
  --badge-ink: var(--ink-2);
  --badge-line: var(--line-1);
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  height: 1.375rem;
  padding: 0 0.5rem;
  border: 1px solid var(--badge-line);
  border-radius: var(--radius-pill);
  background: var(--badge-bg);
  color: var(--badge-ink);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

.badge .icon {
  width: 0.8125rem;
  height: 0.8125rem;
}

.badge__dot {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: currentColor;
}

.badge--primary { --badge-bg: var(--primary-soft); --badge-ink: var(--primary-ink); --badge-line: transparent; }
.badge--success { --badge-bg: var(--success-soft); --badge-ink: var(--success-ink); --badge-line: transparent; }
.badge--warning { --badge-bg: var(--warning-soft); --badge-ink: var(--warning-ink); --badge-line: transparent; }
.badge--danger  { --badge-bg: var(--danger-soft);  --badge-ink: var(--danger-ink);  --badge-line: transparent; }
.badge--info    { --badge-bg: var(--info-soft);    --badge-ink: var(--info-ink);    --badge-line: transparent; }
.badge--solid   { --badge-bg: var(--surface-inverse); --badge-ink: var(--ink-inverse); --badge-line: transparent; }
.badge--outline { --badge-bg: transparent; --badge-line: var(--line-2); }

/* legacy aliases (pre-v2 templates) */
.badge--muted { --badge-bg: var(--surface-2); --badge-ink: var(--ink-2); }
.badge--green { --badge-bg: var(--success-soft); --badge-ink: var(--success-ink); --badge-line: transparent; }
.badge--amber { --badge-bg: var(--warning-soft); --badge-ink: var(--warning-ink); --badge-line: transparent; }
.badge--red   { --badge-bg: var(--danger-soft);  --badge-ink: var(--danger-ink);  --badge-line: transparent; }

.badge--pulse .badge__dot {
  animation: pulse-dot 1.6s var(--ease-in-out) infinite;
}

/* --- 5.3 Cards ------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  color: inherit;
}

.card__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5) 0;
}

.card__header--divided {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line-1);
}

.card__icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--primary-soft);
  color: var(--primary-ink);
}

.card__heading {
  flex: 1;
  min-width: 0;
}

.card__title {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-1);
}

.card__title--serif {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.card__subtitle {
  margin-top: 0.125rem;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--ink-3);
}

.card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: -0.25rem -0.375rem 0 auto;
}

.card__body {
  flex: 1;
  padding: var(--space-5);
  min-width: 0;
}

.card__body--flush {
  padding: 0;
}

.card__header + .card__body--flush {
  margin-top: var(--space-4);
}

.card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--line-1);
  background: var(--surface-2);
  border-radius: 0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px);
}

.card__footer--between {
  justify-content: space-between;
}

/* Interactive card (whole card is a link) */
.card--interactive {
  text-decoration: none;
  transition: border-color var(--dur-2) var(--ease-std), box-shadow var(--dur-2) var(--ease-std), transform var(--dur-2) var(--ease-out);
}

.card--interactive:hover {
  border-color: var(--primary-line);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}

.card--interactive:active {
  transform: translateY(0);
}

.card--interactive .card__arrow {
  color: var(--ink-4);
  transition: transform var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-std);
}

.card--interactive:hover .card__arrow {
  color: var(--primary-ink);
  transform: translateX(3px);
}

/* Inset: a recessed well (inside another card or on its own) */
.card--inset {
  background: var(--surface-2);
  box-shadow: none;
}

/* Flat: no shadow, hairline only */
.card--flat {
  box-shadow: none;
}

/* Tabbed: carries the teal index tab on top */
.card--tabbed::before {
  content: "";
  position: absolute;
  top: -1px;
  left: var(--space-5);
  width: var(--tab-w);
  height: 2px;
  background: var(--primary);
}

/* Ink: navy panel with guilloche (hero moments) */
.card--ink {
  /* .card sets color: inherit later in the cascade — restore the ink-scope text colour */
  color: var(--ink-1);
  background: var(--side-bg);
  border-color: transparent;
  box-shadow: var(--shadow-2);
  overflow: hidden;
  isolation: isolate;
}

.card--ink::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-radial-gradient(circle at 104% -30%, transparent 0 8px, var(--guilloche) 8px 9px),
    repeating-radial-gradient(circle at 124% 10%, transparent 0 8px, var(--guilloche) 8px 9px);
  -webkit-mask-image: linear-gradient(250deg, #000 0%, transparent 70%);
  mask-image: linear-gradient(250deg, #000 0%, transparent 70%);
}

.card--ink .card__footer {
  background: rgb(0 0 0 / 0.12);
}

/* --- 5.4 Forms ------------------------------------------------------------- */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.field__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.field__aside {
  font-size: var(--text-xs);
  color: var(--ink-3);
}

.label {
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-1);
}

legend.label {
  margin-bottom: var(--space-2);
}

.label__req {
  color: var(--danger-ink);
  font-weight: 600;
}

.label__opt {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--ink-3);
}

.field__foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 0;
}

.hint {
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--ink-3);
}

.error {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.5;
  color: var(--danger-ink);
}

.error .icon {
  margin-top: 0.1rem;
}

.field__counter {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--ink-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.field__counter.is-near-limit { color: var(--warning-ink); }
.field__counter.is-over-limit { color: var(--danger-ink); font-weight: 600; }

.input,
.textarea,
.select {
  display: block;
  width: 100%;
  min-height: 2.5rem;
  padding: 0.5625rem 0.75rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-md);
  background-color: var(--control-bg);
  box-shadow: var(--shadow-inset);
  color: var(--ink-1);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.4;
  transition: border-color var(--dur-1) var(--ease-std), box-shadow var(--dur-1) var(--ease-std), background-color var(--dur-1) var(--ease-std);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--ink-placeholder);
  opacity: 1;
}

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

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

.input[aria-invalid="true"],
.textarea[aria-invalid="true"],
.select[aria-invalid="true"],
.field--error .input,
.field--error .textarea,
.field--error .select {
  border-color: var(--danger);
}

.input[aria-invalid="true"]:focus,
.textarea[aria-invalid="true"]:focus,
.field--error .input:focus,
.field--error .textarea:focus {
  box-shadow: 0 0 0 3px var(--danger-soft);
}

.input:disabled,
.textarea:disabled,
.select:disabled,
.input[readonly],
.textarea[readonly] {
  background-color: var(--surface-2);
  color: var(--ink-2);
  box-shadow: none;
}

.input:disabled,
.textarea:disabled,
.select:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.input--sm {
  min-height: 2rem;
  padding: 0.375rem 0.625rem;
  font-size: var(--text-base);
}

.input--lg {
  min-height: 3rem;
  font-size: var(--text-lg);
}

/* Input with a leading icon: <div class="input-icon">{icon}<input class="input"></div> */
.input-icon {
  position: relative;
}

.input-icon > .icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3);
  pointer-events: none;
}

.input-icon > .input {
  padding-left: 2.25rem;
}

.textarea {
  min-height: 6rem;
  line-height: 1.55;
  resize: vertical;
}

.textarea[data-autosize] {
  resize: none;
  overflow-y: hidden;
}

/* The draft is written in the same face as the result */
.textarea--doc {
  padding: 0.875rem 1rem;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-optical-sizing: auto;
}

.select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.25rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position:
    calc(100% - 1.125rem) 52%,
    calc(100% - 0.8125rem) 52%;
  background-size: 0.3125rem 0.3125rem, 0.3125rem 0.3125rem;
  background-repeat: no-repeat;
  cursor: pointer;
  text-overflow: ellipsis;
}

.select option,
.select optgroup {
  background: var(--surface-raised);
  color: var(--ink-1);
}

/* Native checkbox / radio, brand-tinted */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--primary);
  width: 1rem;
  height: 1rem;
  margin: 0;
  cursor: pointer;
}

.check {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: var(--text-base);
  line-height: 1.35;
  color: var(--ink-1);
  cursor: pointer;
}

.check input {
  margin-top: 0.0625rem;
  flex-shrink: 0;
}

.check__hint {
  display: block;
  margin-top: 0.125rem;
  font-size: var(--text-xs);
  color: var(--ink-3);
}

/* Chips / segmented / switch: the real <input> is invisible and sits inside
   the visible control (the pill, the segment, the switch track), covering it.
   So the accessible element has the control's size and position, and a click
   on the text as well as a click aimed at the input itself (voice control,
   the accessibility tree, test automation) lands on the input. It used to be
   a clipped 1 px box just outside the pill's top-left corner, where clicks
   aimed at it missed — the chip seemed not to react.
   Markup: label.chip > span.chip__label > input + … ·
           label.segmented__item > span > input + … ·
           label.switch > span.switch__track > input + span.switch__thumb */
.chip__label > input,
.segmented__item > span > input,
.switch__track > input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  opacity: 0;
  appearance: none;
  cursor: inherit;
}

/* Chips: radio/checkbox pills */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip {
  display: inline-flex;
}

.chip__label {
  position: relative;
  isolation: isolate;            /* the input overlay's z-index stays inside the pill */
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.125rem;
  padding: 0.3125rem 0.875rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  background: var(--control-bg);
  color: var(--ink-2);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dur-1) var(--ease-std), border-color var(--dur-1) var(--ease-std), color var(--dur-1) var(--ease-std);
}

.chip__label .icon {
  color: var(--ink-3);
}

.chip__tick {
  display: inline-grid;
  place-items: center;
  width: 0;
  margin-right: -0.375rem;
  overflow: hidden;
  opacity: 0;
  transition: width var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out), margin var(--dur-2) var(--ease-out);
}

.chip:hover .chip__label {
  border-color: var(--line-3);
  color: var(--ink-1);
}

.chip > .chip__label:has(> input:checked) {
  background: var(--primary-soft);
  border-color: var(--primary-line);
  color: var(--primary-ink);
}

.chip > .chip__label:has(> input:checked) .icon {
  color: var(--primary-ink);
}

.chip > .chip__label:has(> input:checked) .chip__tick {
  width: 0.875rem;
  margin-right: 0;
  opacity: 1;
}

.chip > .chip__label:has(> input:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.chip > .chip__label:has(> input:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}

.chip__hint {
  font-weight: 400;
  color: var(--ink-3);
}

/* Segmented control (single choice) */
.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line-1);
  border-radius: calc(var(--radius-md) + 2px);
  background: var(--surface-2);
}

.segmented--block {
  display: flex;
}

.segmented--block .segmented__item {
  flex: 1;
}

.segmented__item {
  display: inline-flex;
}

.segmented__item > span {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 1.875rem;
  padding: 0.25rem 0.8125rem;
  border-radius: var(--radius-sm);
  color: var(--ink-3);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dur-1) var(--ease-std), color var(--dur-1) var(--ease-std), box-shadow var(--dur-1) var(--ease-std);
}

.segmented__item:hover > span {
  color: var(--ink-1);
}

.segmented__item > span:has(> input:checked) {
  background: var(--surface-raised);
  color: var(--ink-1);
  box-shadow: var(--shadow-1), 0 0 0 1px var(--line-1);
}

.segmented__item > span:has(> input:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.segmented__item > span:has(> input:disabled) {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Switch */
.switch {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
  user-select: none;
}

.switch__track {
  position: relative;
  isolation: isolate;
  flex-shrink: 0;
  width: 2.25rem;
  height: 1.25rem;
  margin-top: 0.0625rem;
  border-radius: var(--radius-pill);
  background: var(--control-off);
  transition: background-color var(--dur-2) var(--ease-std);
}

.switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgb(3 29 64 / 0.3);
  transition: transform var(--dur-2) var(--ease-out);
}

.switch__track:has(> input:checked) {
  background: var(--primary);
}

.switch__track:has(> input:checked) .switch__thumb {
  transform: translateX(1rem);
}

.switch__track:has(> input:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.switch__track:has(> input:disabled) {
  opacity: 0.45;
}

.switch:has(input:disabled) {
  cursor: not-allowed;
}

.switch__text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.switch__label {
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink-1);
}

.switch__hint {
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--ink-3);
}

/* Form layout helpers */
.form-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
  .form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-1);
}

.form-actions--between {
  justify-content: space-between;
}

/* --- 5.5 Dropzone ---------------------------------------------------------- */
.dropzone {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.375rem;
  padding: var(--space-8) var(--space-5);
  border: 1.5px dashed var(--line-3);
  border-radius: var(--radius-lg);
  background:
    repeating-linear-gradient(135deg, transparent 0 11px, color-mix(in srgb, var(--ink-1) 2.2%, transparent) 11px 12px),
    var(--surface-2);
  color: var(--ink-2);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease-std), background-color var(--dur-2) var(--ease-std), box-shadow var(--dur-2) var(--ease-std);
}

.dropzone__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.dropzone__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-2);
  border-radius: 50%;
  border: 1px solid var(--line-1);
  background: var(--surface-raised);
  box-shadow: var(--shadow-1), 0 0 0 5px var(--surface-2), 0 0 0 6px var(--line-1);
  color: var(--primary-ink);
  transition: transform var(--dur-3) var(--ease-out);
}

.dropzone__title {
  font-size: var(--text-md);
  color: var(--ink-1);
}

.dropzone__title strong {
  color: var(--primary-ink);
  font-weight: 600;
}

.dropzone__hint {
  font-size: var(--text-xs);
  color: var(--ink-3);
}

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

.dropzone__files:empty {
  display: none;
}

.dropzone__file {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  max-width: 100%;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  border: 1px solid var(--line-2);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--ink-1);
}

.dropzone__file span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropzone__file small {
  color: var(--ink-3);
}

.dropzone:hover {
  border-color: var(--primary-line);
}

.dropzone:hover .dropzone__icon {
  transform: translateY(-2px);
}

.dropzone:has(.dropzone__input:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.dropzone.is-dragover {
  border-color: var(--primary);
  border-style: solid;
  background: var(--primary-soft);
  box-shadow: var(--focus-ring);
}

.dropzone.is-dragover .dropzone__icon {
  transform: translateY(-4px) scale(1.06);
}

.dropzone.has-files {
  border-style: solid;
  border-color: var(--primary-line);
}

.dropzone--compact {
  grid-template-columns: auto 1fr;
  justify-items: start;
  align-items: center;
  column-gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  text-align: left;
}

.dropzone--compact .dropzone__icon {
  grid-row: span 2;
  margin: 0;
  width: 2.5rem;
  height: 2.5rem;
  box-shadow: var(--shadow-1);
}

.dropzone--compact .dropzone__files {
  grid-column: 1 / -1;
  justify-content: flex-start;
}

/* --- 5.6 Tabs -------------------------------------------------------------- */
.tabs__list {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--line-1);
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs__list::-webkit-scrollbar {
  display: none;
}

.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.625rem;
  padding: 0 0.875rem;
  border: 0;
  background: none;
  color: var(--ink-3);
  font-size: var(--text-base);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease-std);
}

.tab:hover {
  color: var(--ink-1);
}

.tab[aria-selected="true"] {
  color: var(--ink-1);
}

.tab::after {
  content: "";
  position: absolute;
  left: 0.625rem;
  right: 0.625rem;
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--primary);
  transform: scaleX(0);
  transition: transform var(--dur-2) var(--ease-out);
}

.tab[aria-selected="true"]::after {
  transform: scaleX(1);
}

.tab:focus-visible {
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

.tab .icon {
  color: var(--ink-3);
}

.tab[aria-selected="true"] .icon {
  color: var(--primary-ink);
}

.tab__count {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3125rem;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: var(--text-2xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.tab[aria-selected="true"] .tab__count {
  background: var(--primary-soft);
  color: var(--primary-ink);
}

.tab-panel {
  padding-top: var(--space-5);
}

.tab-panel:focus-visible {
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

/* Pills variant: compact, inside toolbars */
.tabs--pills .tabs__list {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line-1);
  border-radius: calc(var(--radius-md) + 2px);
  background: var(--surface-2);
}

.tabs--pills .tab {
  height: 1.875rem;
  padding: 0 0.75rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.tabs--pills .tab::after {
  display: none;
}

.tabs--pills .tab[aria-selected="true"] {
  background: var(--surface-raised);
  box-shadow: var(--shadow-1), 0 0 0 1px var(--line-1);
}

/* --- 5.7 Stepper / progress timeline --------------------------------------
   <ol class="stepper"> <li class="step" data-step="draft" data-status="running">
   Status lives in data-status so live updates only flip one attribute:
   pending · running · completed · failed · skipped                            */
.stepper {
  --node: 1.75rem;
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: var(--node) minmax(0, 1fr);
  column-gap: 0.875rem;
  padding-bottom: 1.375rem;
}

.step:last-child {
  padding-bottom: 0;
}

/* connector */
.step::before {
  content: "";
  position: absolute;
  left: calc(var(--node) / 2 - 1px);
  top: calc(var(--node) + 4px);
  bottom: 4px;
  width: 2px;
  border-radius: 2px;
  background: var(--line-2);
}

.step:last-child::before {
  display: none;
}

.step[data-status="completed"]::before {
  background: var(--primary);
}

.step[data-status="running"]::before {
  background: linear-gradient(180deg, var(--primary) 0%, var(--line-2) 70%);
  background-size: 100% 200%;
  animation: flow 1.8s var(--ease-in-out) infinite;
}

.step__node {
  position: relative;
  z-index: var(--z-raised);
  display: grid;
  place-items: center;
  width: var(--node);
  height: var(--node);
  border-radius: 50%;
  border: 1.5px solid var(--line-3);
  background: var(--surface-raised);
  color: var(--ink-3);
  font-size: var(--text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std), color var(--dur-2) var(--ease-std);
}

.step__node > * {
  grid-area: 1 / 1;
}

.step__icon {
  display: none;
}

.step__body {
  min-width: 0;
  padding-top: 0.1875rem;
}

.step__label {
  display: block;
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-1);
}

.step__meta {
  display: block;
  margin-top: 0.125rem;
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

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

/* pending */
.step[data-status="pending"] .step__label {
  color: var(--ink-3);
  font-weight: 500;
}

/* running */
.step[data-status="running"] .step__node {
  border-color: var(--primary);
  color: var(--primary-ink);
  background: var(--primary-soft);
}

.step[data-status="running"] .step__node::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--primary);
  border-right-color: var(--primary);
  animation: spin 1.1s linear infinite;
}

.step[data-status="running"] .step__node::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  animation: halo 2s var(--ease-out) infinite;
}

/* completed */
.step[data-status="completed"] .step__node {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--on-primary);
}

.step[data-status="completed"] .step__num { display: none; }
.step[data-status="completed"] .step__icon--completed { display: block; }

/* failed */
.step[data-status="failed"] .step__node {
  border-color: var(--danger);
  background: var(--danger-soft);
  color: var(--danger-ink);
}

.step[data-status="failed"] .step__num { display: none; }
.step[data-status="failed"] .step__icon--failed { display: block; }
.step[data-status="failed"] .step__meta { color: var(--danger-ink); }

/* skipped */
.step[data-status="skipped"] .step__node {
  border-style: dashed;
  color: var(--ink-4);
  background: transparent;
}

.step[data-status="skipped"] .step__num { display: none; }
.step[data-status="skipped"] .step__icon--skipped { display: block; }

.step[data-status="skipped"] .step__label {
  color: var(--ink-3);
  font-weight: 500;
  text-decoration: line-through;
  text-decoration-color: var(--line-3);
}

/* Horizontal variant: compact progress header */
.stepper--horizontal {
  display: flex;
  align-items: flex-start;
}

.stepper--horizontal .step {
  flex: 1 1 0;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  padding: 0 0.25rem;
  text-align: center;
}

.stepper--horizontal .step::before {
  top: calc(var(--node) / 2 - 1px);
  bottom: auto;
  left: calc(50% + var(--node) / 2 + 6px);
  right: calc(-50% + var(--node) / 2 + 6px);
  width: auto;
  height: 2px;
}

.stepper--horizontal .step[data-status="running"]::before {
  background: linear-gradient(90deg, var(--primary) 0%, var(--line-2) 70%);
  background-size: 200% 100%;
  animation-name: flow-x;
}

.stepper--horizontal .step__body {
  padding-top: 0.5rem;
}

.stepper--horizontal .step__label {
  font-size: var(--text-sm);
}

@media (max-width: 560px) {
  .stepper--horizontal .step__meta {
    display: none;
  }

  .stepper--horizontal .step__label {
    font-size: var(--text-xs);
  }
}

/* --- 5.8 Score ring, score bars, progress ---------------------------------- */
.score {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

.score__caption {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-3);
}

.score-ring {
  --size: 96px;
  --tone: var(--primary);
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  flex-shrink: 0;
}

.score-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}

.score-ring__ticks {
  fill: none;
  stroke: var(--line-3);
  stroke-width: 2.5;
  stroke-dasharray: 0.35 1.65;
}

.score-ring__track {
  fill: none;
  stroke: var(--surface-3);
  stroke-width: 7;
}

.score-ring__value {
  fill: none;
  stroke: var(--tone);
  stroke-width: 7;
  stroke-linecap: round;
  animation: ring-fill var(--dur-5) var(--ease-out) both;
}

.score-ring__label {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  line-height: 1;
}

.score-ring__num {
  font-family: var(--font-serif);
  font-size: calc(var(--size) * 0.33);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink-1);
  font-variant-numeric: lining-nums tabular-nums;
}

.score-ring__max {
  margin-top: 0.2em;
  font-size: max(0.625rem, calc(var(--size) * 0.105));
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

.score-ring--success { --tone: var(--success); }
.score-ring--primary { --tone: var(--primary); }
.score-ring--warning { --tone: var(--warning); }
.score-ring--danger  { --tone: var(--danger); }
.score-ring--neutral { --tone: var(--line-3); }
.score-ring--neutral .score-ring__value { visibility: hidden; }

/* Score bars: labelled sub-scores (üslup 34/40 …) */
.score-bars {
  display: grid;
  gap: var(--space-4);
}

.score-bar {
  --tone: var(--primary);
  display: grid;
  gap: 0.4375rem;
}

.score-bar__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.score-bar__label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-2);
}

.score-bar__value {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-1);
  font-variant-numeric: tabular-nums;
}

.score-bar__value small {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--ink-3);
}

.score-bar__track,
.progress {
  position: relative;
  height: 6px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
}

.score-bar__fill,
.progress__bar {
  height: 100%;
  border-radius: inherit;
  background: var(--tone, var(--primary));
  transform-origin: left center;
  animation: bar-grow var(--dur-5) var(--ease-out) both;
}

.score-bar--success { --tone: var(--success); }
.score-bar--primary { --tone: var(--primary); }
.score-bar--warning { --tone: var(--warning); }
.score-bar--danger  { --tone: var(--danger); }

.progress--indeterminate .progress__bar {
  width: 38% !important;
  animation: indeterminate 1.4s var(--ease-in-out) infinite;
}

.progress--thin {
  height: 3px;
}

/* --- 5.9 Stat tiles -------------------------------------------------------- */
.stat {
  --stat-tone: var(--line-3);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
  padding: var(--space-5);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  box-shadow: var(--shadow-1);
}

.stat::before {
  content: "";
  position: absolute;
  top: -1px;
  left: var(--space-5);
  width: 1.5rem;
  height: 2px;
  background: var(--stat-tone);
}

.stat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.stat__label {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--ink-3);
}

.stat__icon {
  color: var(--ink-4);
}

.stat__value {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem 0.625rem;
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink-1);
  font-variant-numeric: lining-nums tabular-nums;
}

.stat__unit {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-3);
}

.stat__delta {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-3);
}

.stat__delta--up { color: var(--success-ink); }
.stat__delta--down { color: var(--danger-ink); }

.stat__hint {
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--ink-3);
}

.stat--primary { --stat-tone: var(--primary); }
.stat--success { --stat-tone: var(--success); }
.stat--warning { --stat-tone: var(--warning); }
.stat--danger  { --stat-tone: var(--danger); }
.stat--info    { --stat-tone: var(--info); }

a.stat {
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dur-2) var(--ease-std), box-shadow var(--dur-2) var(--ease-std);
}

a.stat:hover {
  border-color: var(--primary-line);
  box-shadow: var(--shadow-2);
}

/* --- 5.10 Alerts ----------------------------------------------------------- */
.alert {
  --alert-bg: var(--info-soft);
  --alert-ink: var(--info-ink);
  --alert-accent: var(--info);
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--alert-bg);
  box-shadow: inset 3px 0 0 var(--alert-accent);
  color: var(--ink-1);
}

.alert__icon {
  display: flex;
  margin-top: 0.0625rem;
  color: var(--alert-ink);
}

.alert__content {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 0.125rem;
}

.alert__title {
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.4;
  color: var(--alert-ink);
}

.alert__message {
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--ink-2);
}

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

.alert__close {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  margin: -0.25rem -0.375rem -0.25rem 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink-3);
}

.alert__close:hover {
  color: var(--ink-1);
  background: color-mix(in srgb, var(--ink-1) 6%, transparent);
}

.alert--success { --alert-bg: var(--success-soft); --alert-ink: var(--success-ink); --alert-accent: var(--success); }
.alert--warning { --alert-bg: var(--warning-soft); --alert-ink: var(--warning-ink); --alert-accent: var(--warning); }
.alert--danger  { --alert-bg: var(--danger-soft);  --alert-ink: var(--danger-ink);  --alert-accent: var(--danger); }
.alert--primary { --alert-bg: var(--primary-soft); --alert-ink: var(--primary-ink); --alert-accent: var(--primary); }
.alert--neutral { --alert-bg: var(--surface-2); --alert-ink: var(--ink-1); --alert-accent: var(--line-3); }

/* --- 5.11 Empty states ----------------------------------------------------- */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-12) var(--space-6);
  text-align: center;
}

/* seal rings around the icon */
.empty__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  border: 1px solid var(--line-1);
  background: var(--surface-raised);
  box-shadow: 0 0 0 7px var(--surface-2), 0 0 0 8px var(--line-1), 0 0 0 15px transparent, 0 0 0 16px var(--line-1);
  color: var(--primary-ink);
}

.empty__title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink-1);
}

.empty__body {
  max-width: 46ch;
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--ink-3);
}

.empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.empty--compact {
  padding: var(--space-8) var(--space-4);
}

.empty--compact .empty__icon {
  width: 2.75rem;
  height: 2.75rem;
  box-shadow: 0 0 0 5px var(--surface-2), 0 0 0 6px var(--line-1);
}

/* --- 5.12 Loading: skeleton & spinner -------------------------------------- */
.skeleton {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--surface-3);
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.5), transparent);
  animation: shimmer 1.5s var(--ease-in-out) infinite;
}

:root[data-theme="dark"] .skeleton::after {
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.06), transparent);
}

.skeleton-block {
  display: grid;
  gap: 0.625rem;
}

.skeleton-line {
  height: 0.75rem;
}

.skeleton-title {
  height: 1.375rem;
  width: 45%;
  margin-bottom: 0.375rem;
}

.skeleton-circle {
  border-radius: 50%;
}

.spinner {
  --spinner-size: 1.25rem;
  display: inline-block;
  position: relative;
  width: var(--spinner-size);
  height: var(--spinner-size);
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--line-2);
  border-top-color: var(--primary);
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
}

.spinner--sm { --spinner-size: 0.875rem; border-width: 1.5px; }
.spinner--lg { --spinner-size: 2rem; border-width: 2.5px; }

.loading-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--ink-3);
}

/* --- 5.13 Table ------------------------------------------------------------ */
.table-wrap {
  --shade: color-mix(in srgb, var(--ink-1) 14%, transparent);
  position: relative;
  max-height: var(--table-max-h, none);
  overflow: auto;
  border: 1px solid var(--line-1);
  border-radius: var(--radius-lg);
  /* scroll shadows: edges darken only while more content is hidden */
  background:
    linear-gradient(to right, var(--surface-1) 40%, transparent) left center / 2.5rem 100% no-repeat local,
    linear-gradient(to left, var(--surface-1) 40%, transparent) right center / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--shade), transparent) left center / 0.75rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--shade), transparent) right center / 0.75rem 100% no-repeat scroll,
    var(--surface-1);
  box-shadow: var(--shadow-1);
  scrollbar-width: thin;
}

.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-base);
}

.table th {
  position: sticky;
  top: 0;
  z-index: var(--z-raised);
  padding: 0.6875rem var(--space-4);
  border-bottom: 1px solid var(--line-2);
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  line-height: 1.2;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.table td {
  padding: 0.8125rem var(--space-4);
  border-bottom: 1px solid var(--line-1);
  color: var(--ink-1);
  vertical-align: middle;
}

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

.table tbody tr {
  transition: background-color var(--dur-1) var(--ease-std);
}

.table tbody tr:hover {
  background: color-mix(in srgb, var(--primary) 4%, transparent);
}

.table .num,
.table td.num,
.table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.table .actions {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}

.table__primary {
  font-weight: 600;
  color: var(--ink-1);
}

.table__sub {
  display: block;
  margin-top: 0.125rem;
  font-size: var(--text-xs);
  color: var(--ink-3);
}

.table--compact td {
  padding: 0.5rem var(--space-3);
}

.table--compact th {
  padding: 0.5rem var(--space-3);
}

/* --- 5.14 List rows --------------------------------------------------------
   Whole-row link without nesting interactive elements: the title link is
   stretched over the row; actions sit above it (z-index).                    */
.list {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line-1);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  box-shadow: var(--shadow-1);
}

.list--flush {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.list-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line-1);
  transition: background-color var(--dur-1) var(--ease-std);
}

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

.list-row--link:hover,
.list-row:has(.list-row__title a:hover) {
  background: color-mix(in srgb, var(--primary) 4%, transparent);
}

.list-row__icon {
  display: grid;
  place-items: center;
  width: 2.375rem;
  height: 2.375rem;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-1);
  background: var(--surface-2);
  color: var(--ink-2);
}

.list-row__body {
  flex: 1;
  min-width: 0;
}

.list-row__title {
  overflow: hidden;
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-1);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-row__title a {
  color: inherit;
  text-decoration: none;
}

.list-row__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.list-row__title a:focus-visible {
  outline: none;
}

.list-row__title a:focus-visible::after {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

.list-row__preview {
  display: -webkit-box;
  margin-top: 0.25rem;
  overflow: hidden;
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-2);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.list-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin-top: 0.3125rem;
  font-size: var(--text-xs);
  color: var(--ink-3);
}

.list-row__meta > span + span::before {
  content: "·";
  margin-right: 0.5rem;
  color: var(--ink-4);
}

.list-row__aside {
  flex-shrink: 0;
  font-size: var(--text-xs);
  color: var(--ink-3);
  text-align: right;
  white-space: nowrap;
}

.list-row__actions {
  position: relative;
  z-index: var(--z-raised);
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-1);
}

@media (max-width: 560px) {
  .list-row {
    flex-wrap: wrap;
    row-gap: var(--space-2);
    padding: var(--space-4);
  }

  .list-row__icon {
    display: none;
  }

  .list-row__body {
    flex: 1 1 100%;
  }

  .list-row__title {
    white-space: normal;
  }

  .list-row__aside {
    text-align: left;
  }

  .list-row__actions {
    margin-left: auto;
  }
}

/* Definition list (key/value pairs, e.g. job metadata) */
.dl {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
  gap: var(--space-2) var(--space-5);
  font-size: var(--text-base);
}

.dl dt {
  color: var(--ink-3);
}

.dl dd {
  margin: 0;
  color: var(--ink-1);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* --- 5.15 Modal (native <dialog>) ------------------------------------------ */
.modal {
  width: min(560px, calc(100vw - 2rem));
  max-width: none;
  max-height: calc(100dvh - 2rem);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-1);
  border-radius: var(--radius-xl);
  background: var(--surface-raised);
  box-shadow: var(--shadow-3);
  color: var(--ink-1);
}

.modal::backdrop {
  background: var(--backdrop);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.modal[open] {
  animation: modal-in var(--dur-3) var(--ease-out);
}

.modal[open]::backdrop {
  animation: fade-in var(--dur-3) var(--ease-out);
}

.modal--sm { width: min(420px, calc(100vw - 2rem)); }
.modal--lg { width: min(860px, calc(100vw - 2rem)); }
.modal--xl { width: min(1120px, calc(100vw - 2rem)); }

.modal__panel {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 2rem);
}

.modal__panel > form {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5) var(--space-3) var(--space-6);
}

.modal__title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink-1);
}

.modal__subtitle {
  margin-top: 0.25rem;
  font-size: var(--text-sm);
  color: var(--ink-3);
}

.modal__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-2) var(--space-6) var(--space-6);
}

.modal__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--line-1);
  background: var(--surface-2);
}

/* Confirm dialog (shared, in base.html) */
.confirm__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-ink);
}

.modal--confirm[data-tone="danger"] .confirm__icon {
  background: var(--danger-soft);
  color: var(--danger-ink);
}

.modal--confirm .modal__body {
  padding-top: var(--space-6);
}

.confirm__message {
  margin-top: var(--space-2);
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--ink-2);
  white-space: pre-line;
}

@media (max-width: 640px) {
  .modal,
  .modal--sm,
  .modal--lg,
  .modal--xl {
    width: 100%;
    max-width: 100%;
    margin: auto 0 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    border-bottom: 0;
  }

  .modal[open] {
    animation-name: sheet-in;
  }
}

/* --- 5.16 Toasts ------------------------------------------------------------ */
.toast-region {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  width: min(400px, calc(100vw - 2rem));
  pointer-events: none;
}

.toast {
  --toast-accent: var(--side-accent);
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  padding: 0.8125rem 0.625rem 0.8125rem 1rem;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--toast-bg);
  box-shadow: var(--shadow-3), inset 3px 0 0 var(--toast-accent);
  color: var(--toast-ink);
  pointer-events: auto;
  animation: toast-in var(--dur-3) var(--ease-out) both;
}

.toast.is-leaving {
  animation: toast-out var(--dur-2) var(--ease-std) both;
}

.toast__icon {
  display: flex;
  margin-top: 0.0625rem;
  color: var(--toast-accent);
}

.toast__body {
  flex: 1;
  min-width: 0;
}

.toast__title {
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.4;
}

.toast__msg {
  font-size: var(--text-base);
  line-height: 1.45;
  color: var(--toast-ink);
  overflow-wrap: anywhere;
}

.toast__title + .toast__msg {
  color: var(--toast-ink-2);
}

.toast__close {
  display: grid;
  place-items: center;
  width: 1.625rem;
  height: 1.625rem;
  margin-top: -0.125rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--toast-ink-2);
}

.toast__close:hover {
  color: #fff;
  background: rgb(255 255 255 / 0.08);
}

.toast__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--toast-accent);
  opacity: 0.55;
  transform-origin: left center;
  animation: toast-timer var(--toast-timeout, 4500ms) linear both;
}

.toast:hover .toast__progress,
.toast:focus-within .toast__progress {
  animation-play-state: paused;
}

.toast--success { --toast-accent: #5fd39a; }
.toast--warning { --toast-accent: #f3c060; }
.toast--danger  { --toast-accent: #ff8f86; }
.toast--info    { --toast-accent: #8fb8ff; }
.toast--primary { --toast-accent: var(--side-accent); }

@media (max-width: 640px) {
  .toast-region {
    left: var(--space-3);
    right: var(--space-3);
    bottom: var(--space-3);
    width: auto;
    align-items: stretch;
  }
}

/* --- 5.17 Tooltip (CSS-only) ------------------------------------------------
   <button data-tooltip="Kopyala">…  ·  data-tooltip-pos="bottom|left|right"
   The bubble is generated only while it is shown — on hover (devices that can
   hover) and on keyboard focus — and fades in after 350 ms. An idle tooltip is
   therefore no box at all and can never widen the page (an icon button at the
   right edge of a 390 px screen used to add horizontal scroll). Touch screens
   show none: a tap would leave it stuck under the finger. */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: var(--z-tooltip);
  width: max-content;
  max-width: min(16rem, calc(100vw - 2rem));
  padding: 0.375rem 0.5625rem;
  border-radius: var(--radius-sm);
  background: var(--tooltip-bg);
  box-shadow: var(--shadow-2);
  color: var(--tooltip-ink);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
  white-space: normal;
  pointer-events: none;
  transform: translate(-50%, 0);
  --tooltip-from: translate(-50%, 4px);   /* where the fade-in starts */
}

@media (any-hover: hover) {
  [data-tooltip]:hover::after {
    content: attr(data-tooltip);
    animation: tooltip-in var(--dur-1) var(--ease-std) 350ms both;
  }
}

[data-tooltip]:focus-visible::after {
  content: attr(data-tooltip);
  animation: tooltip-in var(--dur-1) var(--ease-std) 350ms both;
}

[data-tooltip-pos="bottom"]::after {
  top: calc(100% + 8px);
  bottom: auto;
  --tooltip-from: translate(-50%, -4px);
}

[data-tooltip-pos="left"]::after {
  left: auto;
  right: calc(100% + 8px);
  top: 50%;
  bottom: auto;
  transform: translate(0, -50%);
  --tooltip-from: translate(4px, -50%);
}

[data-tooltip-pos="right"]::after {
  left: calc(100% + 8px);
  top: 50%;
  bottom: auto;
  transform: translate(0, -50%);
  --tooltip-from: translate(-4px, -50%);
}

[data-tooltip=""]::after {
  display: none;
}

@keyframes tooltip-in {
  from { opacity: 0; transform: var(--tooltip-from); }
}

/* --- 5.18 Kbd -------------------------------------------------------------- */
.kbd-group {
  display: inline-flex;
  align-items: center;
  gap: 0.1875rem;
  vertical-align: middle;
}

.kbd {
  display: inline-grid;
  place-items: center;
  min-width: 1.375rem;
  height: 1.375rem;
  padding: 0 0.375rem;
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--surface-raised);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: 600;
  line-height: 1;
}

.kbd-plus {
  font-size: var(--text-2xs);
  color: var(--ink-4);
}

/* --- 5.19 Diff, issue marks, issues, stream caret -------------------------- */
ins.diff-add {
  padding: 0 0.08em;
  border-radius: 3px;
  background: var(--diff-add-bg);
  box-shadow: inset 0 -1.5px 0 var(--success);
  color: var(--diff-add-ink);
  text-decoration: none;
}

del.diff-del {
  padding: 0 0.08em;
  border-radius: 3px;
  background: var(--diff-del-bg);
  color: var(--diff-del-ink);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: color-mix(in srgb, var(--danger) 70%, transparent);
}

/* Quality-issue highlights inside a document */
mark.issue-mark {
  --issue-bg: var(--warning-soft);
  --issue-line: var(--warning);
  padding: 0 0.06em;
  border-radius: 2px;
  background: var(--issue-bg);
  box-shadow: inset 0 -2px 0 var(--issue-line);
  color: inherit;
  cursor: help;
  transition: background-color var(--dur-2) var(--ease-std), box-shadow var(--dur-2) var(--ease-std);
}

mark.issue-mark--yuksek,
mark.issue-mark--high {
  --issue-bg: var(--danger-soft);
  --issue-line: var(--danger);
}

mark.issue-mark--orta,
mark.issue-mark--medium {
  --issue-bg: var(--warning-soft);
  --issue-line: var(--warning);
}

mark.issue-mark--dusuk,
mark.issue-mark--low {
  --issue-bg: var(--info-soft);
  --issue-line: var(--info);
}

mark.issue-mark.is-active,
mark.issue-mark:target {
  box-shadow: inset 0 -2px 0 var(--issue-line), 0 0 0 3px color-mix(in srgb, var(--issue-line) 30%, transparent);
}

/* Issue card (quality report) */
.issue {
  --issue-line: var(--warning);
  position: relative;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  box-shadow: inset 3px 0 0 var(--issue-line);
}

.issue--yuksek { --issue-line: var(--danger); }
.issue--orta { --issue-line: var(--warning); }
.issue--dusuk { --issue-line: var(--info); }

.issue__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.issue__category {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-3);
}

.issue__quote {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--ink-1);
}

.issue__desc {
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--ink-2);
}

.issue__suggestion {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--ink-1);
}

.issue__suggestion .icon {
  margin-top: 0.2rem;
  color: var(--primary-ink);
}

/* Live "typing" caret for streamed text */
.stream-caret,
.stream-caret--after::after {
  display: inline-block;
  width: 2px;
  height: 1.08em;
  margin: 0 0 0 2px;             /* margin-top 0: never takes the .prose-doc block rhythm */
  border-radius: 1px;
  background: var(--primary);
  vertical-align: -0.16em;
  animation: caret-blink 1.05s steps(1, end) infinite;
}

.stream-caret--after::after {
  content: "";
}

.is-streaming {
  position: relative;
}

/* --- 5.20 Misc: divider, avatar, brand mark, guilloche, callouts ----------- */
.divider {
  height: 1px;
  margin: var(--space-6) 0;
  border: 0;
  background: var(--line-1);
}

.divider--label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: auto;
  background: none;
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-3);
}

.divider--label::before,
.divider--label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-1);
}

.avatar {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-ink);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.icon-tile {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--primary-soft);
  color: var(--primary-ink);
}

.icon-tile--neutral {
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--line-1);
}

/* Decorative guilloche for any positioned container */
.guilloche {
  position: relative;
  isolation: isolate;
}

.guilloche::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background:
    repeating-radial-gradient(circle at 100% 0%, transparent 0 8px, color-mix(in srgb, var(--primary) 9%, transparent) 8px 9px),
    repeating-radial-gradient(circle at 120% 30%, transparent 0 8px, color-mix(in srgb, var(--primary) 7%, transparent) 8px 9px);
  -webkit-mask-image: linear-gradient(240deg, #000, transparent 65%);
  mask-image: linear-gradient(240deg, #000, transparent 65%);
}

/* Meta line: small facts separated by middots */
.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  font-size: var(--text-xs);
  color: var(--ink-3);
}

.meta > * + *::before {
  content: "·";
  margin-right: 0.5rem;
  color: var(--ink-4);
}

.meta .icon {
  display: inline-block;
  vertical-align: -0.2em;
}

/* Toolbar: row of controls above a document/panel */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}

.toolbar__sep {
  width: 1px;
  height: 1.25rem;
  margin: 0 var(--space-1);
  background: var(--line-2);
}

.toolbar__spacer {
  flex: 1;
}

/* Disclosure (<details class="disclosure">) */
.disclosure {
  border: 1px solid var(--line-1);
  border-radius: var(--radius-md);
  background: var(--surface-1);
}

.disclosure + .disclosure {
  margin-top: var(--space-2);
}

.disclosure > summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  list-style: none;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--ink-1);
  border-radius: inherit;
}

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

.disclosure > summary::after {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  margin-left: auto;
  border-right: 1.5px solid var(--ink-3);
  border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur-2) var(--ease-out);
}

.disclosure[open] > summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

.disclosure > summary:hover {
  background: var(--surface-2);
}

.disclosure__body {
  padding: var(--space-1) var(--space-4) var(--space-4);
}


/* ==========================================================================
   6. MOTION
   ========================================================================== */

/* One orchestrated page-enter: direct children of .page rise in sequence.
   Opt out with .page--static. */
.page > * {
  animation: rise var(--dur-4) var(--ease-out) both;
}

.page > :nth-child(1) { animation-delay: 30ms; }
.page > :nth-child(2) { animation-delay: 90ms; }
.page > :nth-child(3) { animation-delay: 150ms; }
.page > :nth-child(4) { animation-delay: 210ms; }
.page > :nth-child(5) { animation-delay: 270ms; }
.page > :nth-child(6) { animation-delay: 330ms; }
.page > :nth-child(n + 7) { animation-delay: 390ms; }

.page--static > * {
  animation: none;
}

/* The entrance plays once per page load: when it is over, app.js marks
   <html class="is-entered">, so a child that htmx swaps into .page later
   appears in place instead of replaying the rise (invisible for ~0.6 s). */
.is-entered .page > * {
  animation: none;
}

/* Opt-in stagger for the children of any element: <div class="reveal-children"> */
.reveal-children > * {
  animation: rise var(--dur-4) var(--ease-out) both;
}

.reveal-children > :nth-child(2) { animation-delay: 60ms; }
.reveal-children > :nth-child(3) { animation-delay: 120ms; }
.reveal-children > :nth-child(4) { animation-delay: 180ms; }
.reveal-children > :nth-child(5) { animation-delay: 240ms; }
.reveal-children > :nth-child(n + 6) { animation-delay: 300ms; }

.fade-in {
  animation: fade-up var(--dur-3) var(--ease-out) both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes halo {
  0% { box-shadow: 0 0 0 0 rgb(1 184 170 / 0.32); }
  70%, 100% { box-shadow: 0 0 0 10px rgb(1 184 170 / 0); }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@keyframes flow {
  0% { background-position: 0 100%; }
  100% { background-position: 0 0; }
}

@keyframes flow-x {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

@keyframes ring-fill {
  from { stroke-dasharray: 0 100; }
}

@keyframes bar-grow {
  from { transform: scaleX(0); }
}

@keyframes indeterminate {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(290%); }
}

@keyframes shimmer {
  to { transform: translateX(100%); }
}

@keyframes caret-blink {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0; }
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

@keyframes sheet-in {
  from { transform: translateY(100%); }
  to { transform: none; }
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@keyframes toast-out {
  to { opacity: 0; transform: translateX(16px); }
}

@keyframes toast-timer {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

/* No end keyframe: the highlight fades into the element's own background
   (a card or sheet keeps its surface colour instead of flashing transparent
   and then snapping back when the animation ends). */
@keyframes flash {
  from { background-color: var(--primary-soft-2); }
}

.flash {
  animation: flash 1.6s var(--ease-out);
}


/* ==========================================================================
   7. UTILITIES (small, deliberate set)
   ========================================================================== */

/* text tone */
.text-ink { color: var(--ink-1) !important; }
.text-subtle { color: var(--ink-2) !important; }
.text-muted { color: var(--ink-3) !important; }
.text-primary { color: var(--primary-ink) !important; }
.text-success { color: var(--success-ink) !important; }
.text-warning { color: var(--warning-ink) !important; }
.text-danger { color: var(--danger-ink) !important; }
.text-info { color: var(--info-ink) !important; }

/* text size */
.text-2xs { font-size: var(--text-2xs) !important; }
.text-xs { font-size: var(--text-xs) !important; }
.text-sm { font-size: var(--text-sm) !important; }
.text-base { font-size: var(--text-base) !important; }
.text-md { font-size: var(--text-md) !important; }
.text-lg { font-size: var(--text-lg) !important; }
.text-xl { font-size: var(--text-xl) !important; }
.text-2xl { font-size: var(--text-2xl) !important; }

/* text style */
.font-serif { font-family: var(--font-serif) !important; }
.font-sans { font-family: var(--font-sans) !important; }
.font-mono { font-family: var(--font-mono) !important; }
.font-medium { font-weight: 500 !important; }
.font-semibold { font-weight: 600 !important; }
.italic { font-style: italic !important; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.uppercase { text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.nowrap { white-space: nowrap !important; }
.pre-wrap { white-space: pre-wrap !important; }
.break-words { overflow-wrap: anywhere; }

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

.line-clamp-2,
.line-clamp-3 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.line-clamp-2 { -webkit-line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; }

/* visibility */
.hidden { display: none !important; }

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

@media (max-width: 767.98px) {
  .hide-mobile { display: none !important; }
}

@media (min-width: 768px) {
  .show-mobile { display: none !important; }
}

/* sizing & flex */
.w-full { width: 100% !important; }
.min-w-0 { min-width: 0 !important; }
.flex { display: flex !important; }
.inline-flex { display: inline-flex !important; }
.flex-col { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-1 { flex: 1 1 0% !important; min-width: 0; }
.shrink-0 { flex-shrink: 0 !important; }
.items-start { align-items: flex-start !important; }
.items-center { align-items: center !important; }
.items-end { align-items: flex-end !important; }
.items-baseline { align-items: baseline !important; }
.justify-start { justify-content: flex-start !important; }
.justify-center { justify-content: center !important; }
.justify-end { justify-content: flex-end !important; }
.justify-between { justify-content: space-between !important; }
.self-start { align-self: flex-start !important; }
.self-center { align-self: center !important; }
.ml-auto { margin-left: auto !important; }
.mx-auto { margin-inline: auto !important; }

/* gaps */
.gap-1 { gap: var(--space-1) !important; }
.gap-2 { gap: var(--space-2) !important; }
.gap-3 { gap: var(--space-3) !important; }
.gap-4 { gap: var(--space-4) !important; }
.gap-6 { gap: var(--space-6) !important; }

/* margins (few steps) */
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--space-1) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-6 { margin-top: var(--space-6) !important; }
.mt-8 { margin-top: var(--space-8) !important; }
.mt-12 { margin-top: var(--space-12) !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--space-1) !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-3 { margin-bottom: var(--space-3) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mb-6 { margin-bottom: var(--space-6) !important; }
.mb-8 { margin-bottom: var(--space-8) !important; }

/* padding (for bare containers) */
.p-0 { padding: 0 !important; }
.p-4 { padding: var(--space-4) !important; }
.p-6 { padding: var(--space-6) !important; }

/* surfaces */
.surface-1 { background: var(--surface-1); }
.surface-2 { background: var(--surface-2); }
.rounded { border-radius: var(--radius-md); }
.bordered { border: 1px solid var(--line-1); }


/* ==========================================================================
   8. HTMX HELPERS
   ========================================================================== */

/* Hidden until a request is in flight on the element or an ancestor */
.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: inline-flex;
}

.htmx-request .htmx-indicator--block,
.htmx-request.htmx-indicator--block {
  display: block;
}

/* Hide something while its request runs (e.g. an empty-state behind a spinner) */
.htmx-request .htmx-hide-on-request,
.htmx-request.htmx-hide-on-request {
  display: none !important;
}

/* Dim a region while it reloads */
.htmx-request.dim-on-request,
.htmx-request .dim-on-request {
  opacity: 0.55;
  transition: opacity var(--dur-2) var(--ease-std);
  pointer-events: none;
}

/* Opt-in fade for swapped content: put .swap-fade on the hx-target */
.swap-fade,
.swap-fade > * {
  transition: opacity var(--dur-3) var(--ease-out);
}

.swap-fade.htmx-added,
.swap-fade > .htmx-added,
.swap-fade.htmx-swapping {
  opacity: 0;
}


/* ==========================================================================
   9. ACCESSIBILITY & PRINT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    /* 0s, not 1ms: a forced non-zero duration makes EVERY element transition
       every property (transition-property defaults to "all"), so an inherited
       value such as visibility trickles down one frame per nesting level — the
       drawer's links were still hidden (unfocusable) when it moved focus */
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  /* status indicators keep turning, gently — they carry meaning */
  .spinner,
  .btn[aria-busy="true"]::before,
  .btn.htmx-request::before,
  .htmx-request .btn[type="submit"]::before,
  .step[data-status="running"] .step__node::after {
    animation-duration: 1.6s !important;
    animation-iteration-count: infinite !important;
  }

  .stream-caret,
  .stream-caret--after::after {
    animation: none !important;
  }

  /* tooltips still wait before appearing (no fade), so they don't flash by */
  [data-tooltip]::after {
    animation-delay: 350ms !important;
  }
}

@media (forced-colors: active) {
  .btn,
  .chip__label,
  .segmented__item > span,
  .card,
  .sheet {
    border: 1px solid CanvasText;
  }

  .step__node {
    forced-color-adjust: none;
  }
}

@media print {
  body {
    background: #fff !important;
    color: #000;
  }

  .sidebar,
  .topbar,
  .app-backdrop,
  .toast-region,
  .page-header__actions,
  .no-print,
  dialog {
    display: none !important;
  }

  .app {
    display: block;
  }

  .page {
    max-width: none;
    padding: 0;
  }

  .page > * {
    animation: none !important;
  }

  .sheet {
    border: 0;
    box-shadow: none;
    padding: 0;
  }

  .sheet::before {
    display: none;
  }

  .prose-doc {
    max-width: none;
    color: #000;
    font-size: 12pt;
  }

  a {
    color: inherit;
    text-decoration: none;
  }
}