/* Drudgle — web/drudgle.com design tokens.
   Contract: docs/design/style-guide.md ("Paper & Ink", v1 2026-10-06).
   The tokens in :root are the only source of colour, type, spacing, radius,
   shadow and motion in web/drudgle.com/src; views reference names, never values. */

/* Self-hosted fonts via @fontsource-variable/* (font-display: swap is set in the
   package CSS; webpack emits the woff2 files under dist/fonts/). Newsreader is
   imported with its wght + opsz axes (optical sizing) plus italic for the hero
   keyword; Geist and Geist Mono with the wght axis. */

:root {
    color-scheme: light;

    /* ---- Colour (style guide §2.1) — single light theme; a dark theme is a
       later [data-theme="dark"] block over the same semantic names ---- */
    --color-bg: #f7f5ef;                 /* page paper */
    --color-surface: #fffdf8;            /* raised: cards, inputs, popovers */
    --color-panel: #efece3;              /* sunken: sidebar, code, table header, selected row */
    --color-border: #dcd8cb;             /* hairline rules, card edges (decorative) */
    --color-border-strong: #8f8a7a;      /* input and control boundaries (≈3.1:1 on bg) */
    --color-text: #1b1b18;               /* body ink */
    --color-heading: #121210;            /* display and headings */
    --color-muted: #5f5c53;              /* secondary text, captions, placeholders */
    --color-accent: #1e5a3c;             /* the one accent: primary button, links, active nav, keyword, stat */
    --color-accent-strong: #163f2b;      /* hover / pressed accent */
    --color-on-accent: #f7f5ef;          /* text on accent */
    --color-accent-soft: color-mix(in srgb, var(--color-accent) 10%, transparent);   /* active sidebar item, selected card, badge bg */
    --color-accent-muted: color-mix(in srgb, var(--color-accent) 24%, transparent);  /* hover tint on tinted surfaces, progress track */
    --color-accent-ring: color-mix(in srgb, var(--color-accent) 45%, transparent);   /* focus ring (2px, 2px offset) */
    --color-overlay: rgba(27, 27, 24, 0.48); /* modal scrim */

    /* Status (base + -soft tint for badge and banner backgrounds) */
    --color-success: #1e7a46;            /* ready, complete, passing */
    --color-success-soft: color-mix(in srgb, var(--color-success) 12%, transparent);
    --color-warning: #8a5200;            /* pending, attention */
    --color-warning-soft: color-mix(in srgb, var(--color-warning) 12%, transparent);
    --color-danger: #a8322d;             /* errors, destructive actions */
    --color-danger-soft: color-mix(in srgb, var(--color-danger) 12%, transparent);
    --color-info: #2a5db0;               /* informational notes */
    --color-info-soft: color-mix(in srgb, var(--color-info) 12%, transparent);

    /* Tiers */
    --color-tier-free: #5a6a5c;          /* free tier (≤ 8 variants) */
    --color-tier-free-soft: color-mix(in srgb, var(--color-tier-free) 12%, transparent);
    --color-tier-premium: #9a5a0a;       /* premium tier (≤ 25) */
    --color-tier-premium-soft: color-mix(in srgb, var(--color-tier-premium) 12%, transparent);
    --color-tier-pro: #27507a;           /* pro tier */
    --color-tier-pro-soft: color-mix(in srgb, var(--color-tier-pro) 12%, transparent);

    /* ---- Typography (§3) — fontsource registers the "… Variable" family names ---- */
    --font-display: 'Newsreader Variable', Newsreader, Georgia, 'Times New Roman', serif;
    --font-sans: 'Geist Variable', Geist, Inter, system-ui, sans-serif;
    --font-mono: 'Geist Mono Variable', 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Scale (base 16px, §3.1) */
    --text-xs: 0.75rem;                  /* mono labels, captions, counters */
    --text-sm: 0.875rem;                 /* secondary UI, table cells, breadcrumb */
    --text-base: 1rem;                   /* body, inputs, buttons */
    --text-md: 1.125rem;                 /* lead paragraphs, card premise */
    --text-lg: 1.375rem;                 /* card titles, h4 */
    --text-xl: 1.75rem;                  /* h3, dashboard page title */
    --text-2xl: 2.25rem;                 /* h2, section headings */
    --text-3xl: 3rem;                    /* h1 on inner pages */
    --text-display: clamp(2.75rem, 6vw, 4.75rem); /* hero statement, dictionary headword */

    --leading-tight: 1.15;
    --leading-snug: 1.25;
    --leading-normal: 1.55;

    /* ---- Spacing (§4, 4px base — the only spacing values allowed in views) ---- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --space-10: 8rem;

    /* ---- Radius ---- */
    --radius-1: 3px;                     /* buttons, inputs, badge corners when not pill */
    --radius-2: 6px;                     /* cards, panels, popovers, images */
    --radius-pill: 999px;                /* tier badges and status chips only */

    /* ---- Shadow (hairlines; no coloured shadows) ---- */
    --shadow-1: 0 1px 2px rgba(27, 27, 24, 0.06), 0 1px 1px rgba(27, 27, 24, 0.04); /* hover on clickable cards, inputs on focus */
    --shadow-2: 0 8px 24px rgba(27, 27, 24, 0.10);                                   /* menus, popovers, modals */

    /* ---- Motion ---- */
    --duration-1: 120ms;                 /* state change */
    --duration-2: 200ms;                 /* reveal */
    --duration-3: 320ms;                 /* layout */
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);

    /* ---- Layout (§5) ---- */
    --container-marketing: 1120px;
    --container-app: 1280px;
    --sidebar-w: 240px;
    /* Breakpoints are informational: custom properties cannot be read inside
       @media, so literal media queries must be kept in sync with these values. */
    --bp-sm: 640px;
    --bp-md: 900px;
    --bp-lg: 1200px;
}

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

/* ---- Base ---- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-padding-top: calc(64px + var(--space-4)); /* in-page anchors clear the sticky header */
}

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

/* Marketing container (§5): 1120px content width, 24px gutter. */
.container {
    width: 100%;
    max-width: calc(var(--container-marketing) + 2 * var(--space-5));
    margin: 0 auto;
    padding: 0 var(--space-5);
}

/* Typography (§3): display serif for headings, grotesk body, mono labels. */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    font-weight: 500;
    margin-bottom: var(--space-4);
    color: var(--color-heading);
    letter-spacing: -0.01em;
    line-height: var(--leading-snug);
}

h1 {
    font-size: var(--text-3xl);
    line-height: var(--leading-tight);
}

h2 {
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
}

h3 {
    font-size: var(--text-xl);
}

h4 {
    font-size: var(--text-lg);
}

code,
kbd,
pre,
samp {
    font-family: var(--font-mono);
}

p {
    margin-bottom: var(--space-4);
}

/* Mono eyebrow (§3.1): uppercase, 0.08em tracking — step counters, section labels, tier names. */
.eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: var(--space-3);
}

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--duration-1) var(--ease-standard);
}

a:hover {
    color: var(--color-accent-strong);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* Focus (§6): one ring for every interactive element — 2px --color-accent-ring at 2px offset. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-accent-ring);
    outline-offset: 2px;
    border-radius: var(--radius-1);
}
/* Header (style guide §5): a 64px hairline-bottom bar — wordmark left, ≤5 links, then the
   .site-header-actions group: the muted session link ("Sign in" → /app/sign-in, or "Dashboard"
   once a session exists — src/js/site-session.js sets the label) and the one primary button.
   main.js toggles .is-hidden on scroll-down (marketing pages only; the motion is here).
   Vue dashboard routes hide the bar entirely via body.app-hide-site-header — DashboardShell
   provides its own nav. Below --bp-sm the nav links hide (the wordmark links home; About is in
   the footer) so the actions fit a 390px viewport. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    transition: transform var(--duration-2) var(--ease-standard);
}

.site-header.is-hidden {
    transform: translateY(-100%);
}

body.app-hide-site-header .site-header {
    display: none;
}

/* The dashboard shell (router meta hideSiteHeader) carries its own chrome; the marketing
   footer, rendered by the host page outside #app, is hidden with it. */
body.app-hide-site-header .site-footer {
    display: none;
}

.site-header-inner {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    min-height: 64px;
}

.brand-logo-link {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 0;
    color: var(--color-heading);
    border-radius: var(--radius-1);
}

/* Outlined Newsreader wordmark (src/assets/wordmark.svg, generated by web/scripts/build-wordmark.js). */
.brand-wordmark {
    display: block;
    height: 31.33px; /* 22px cap height (style guide §7): 22 × 97.55 / 68.5 viewBox units */
    width: auto;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-left: var(--space-2);
}

.site-nav a {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-muted);
    text-decoration: none;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-1);
    transition: color var(--duration-1) var(--ease-standard),
                background-color var(--duration-1) var(--ease-standard);
}

.site-nav a:hover {
    color: var(--color-text);
    background-color: var(--color-panel);
}

.site-nav a.is-active {
    color: var(--color-accent);
}

.site-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
    flex-shrink: 0;
}
/* ---- Hero (shared by index, about and the onboarding steps): on the paper, no card ---- */
.hero {
    padding: var(--space-9) 0 var(--space-8);
    text-align: center;
    color: var(--color-text);
}
/* ---- Dictionary entry (About) and onboarding step headings: the shared .definition-* classes ---- */
.definition-header {
    max-width: 720px;
    margin: 0 auto var(--space-7);
    text-align: center;
}

.definition-title {
    font-size: var(--text-3xl);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-3);
    color: var(--color-heading);
}

/* The dictionary headword on About takes the display size (§3.1). */
body.about .definition-title {
    font-size: var(--text-display);
    line-height: 1.05;
}

.definition-pronunciation {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--text-md);
    color: var(--color-muted);
    margin-bottom: var(--space-2);
}

.definition-type {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: var(--space-4);
}

.definition-meaning {
    font-size: var(--text-md);
    color: var(--color-text);
    margin-bottom: var(--space-5);
}

.definition-example {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--text-md);
    color: var(--color-muted);
    text-align: left;
    max-width: 48ch;
    margin: 0 auto;
    padding-left: var(--space-4);
    border-left: 3px solid var(--color-accent);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
}
/* ---- Home hero (§5): full-width on the paper, no card ---- */
.hero-home {
    text-align: left;
    padding: var(--space-9) 0 var(--space-8);
}

.hero-home .eyebrow {
    margin-bottom: var(--space-5);
}

.hero-statement {
    font-size: var(--text-display);
    line-height: 1.05;
    letter-spacing: -0.01em;
    max-width: 24ch;
    margin-bottom: var(--space-5);
}

/* The keyword: italic Newsreader 400 in the one accent. */
.keyword {
    font-style: italic;
    font-weight: 400;
    color: var(--color-accent);
}

.hero-lede {
    font-size: var(--text-md);
    color: var(--color-text);
    max-width: 65ch;
    margin-bottom: var(--space-6);
}

/* The vision input with its primary button inline; stacks below --bp-sm. */
.vision-form {
    max-width: 720px;
    margin-bottom: var(--space-8);
}

.vision-field {
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
}

.vision-field input {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-sans);
    font-size: var(--text-md);
    line-height: var(--leading-normal);
    color: var(--color-text);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-1);
    padding: var(--space-3) var(--space-4);
    transition: border-color var(--duration-1) var(--ease-standard),
                box-shadow var(--duration-1) var(--ease-standard);
}

.vision-field input::placeholder {
    color: var(--color-muted);
    opacity: 1;
}

.vision-field input:focus {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-1);
}

.vision-field .btn {
    flex-shrink: 0;
}

.vision-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-1) var(--space-4);
}

.vision-meta .field-hint,
.vision-meta .char-counter {
    margin: var(--space-2) 0 0;
}

.vision-meta .char-counter {
    margin-left: auto;
}

/* Hero art (§7): the product's objects as a line schematic — hairline nodes, mono labels, serif for
   what the founder reads, one accent stroke into Evolve. Framed like a product capture; a 2× capture
   of a real testbed overview replaces it once C-089 lands. */
.hero-art {
    margin: 0;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2);
    padding: var(--space-6);
}

.schematic {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr 1.2fr 1fr;
    gap: var(--space-5);
    margin: 0;
    padding: 0;
}

.schematic-node {
    position: relative;
    min-width: 0;
    padding: var(--space-4);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2);
}

/* Connector from the previous node, drawn across the grid gap. */
.schematic-node + .schematic-node::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    width: var(--space-5);
    border-top: 1px solid var(--color-border-strong);
}

.schematic-node .eyebrow {
    margin-bottom: var(--space-2);
}

.schematic-serif {
    font-family: var(--font-display);
    font-size: var(--text-md);
    line-height: var(--leading-snug);
    color: var(--color-heading);
    margin: 0;
}

.schematic-meta {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-muted);
    margin: var(--space-3) 0 0;
}

.schematic-projects,
.schematic-rows {
    list-style: none;
    margin: 0;
    padding: 0;
}

.schematic-project {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-top: 1px solid var(--color-border);
}

.schematic-project:first-child {
    padding-top: 0;
    border-top: 0;
}

.schematic-project .schematic-serif {
    font-size: var(--text-base);
}

.schematic-num {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-muted);
}

.schematic-rows li {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    font-size: var(--text-sm);
    border-top: 1px solid var(--color-border);
}

.schematic-rows li:first-child {
    padding-top: 0;
    border-top: 0;
}

.schematic-rows .schematic-meta {
    margin: 0;
    flex-shrink: 0;
}

/* The one accent stroke: the connector into Evolve and its node. */
.schematic-evolve {
    border-color: var(--color-accent);
}

.schematic-evolve::before {
    border-top-color: var(--color-accent);
}

.schematic-evolve .eyebrow {
    color: var(--color-accent);
}

/* ---- How it works (§5): numbered steps in bordered cells ---- */
.how-it-works {
    padding: var(--space-9) 0;
    border-top: 1px solid var(--color-border);
}

.section-heading {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-6);
}

/* Cells share hairlines: a 1px grid gap on the border colour, cells painted paper on top. */
.steps {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin: 0;
    padding: 0;
    background-color: var(--color-border);
    border: 1px solid var(--color-border);
}

.steps .cell {
    border: 0;
    background-color: var(--color-bg);
}

.step h3 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-2);
}

.step p:last-child {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text);
}
/* ---- Buttons (§6): primary / secondary / muted link / destructive; sizes sm · md · lg ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: 500;
    line-height: var(--leading-snug);
    padding: var(--space-2) var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-1);
    background: none;
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--duration-1) var(--ease-standard),
                border-color var(--duration-1) var(--ease-standard),
                color var(--duration-1) var(--ease-standard);
}

.btn:hover {
    text-decoration: none;
}

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

.btn-primary {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-on-accent);
}

.btn-primary:hover {
    background-color: var(--color-accent-strong);
    border-color: var(--color-accent-strong);
    color: var(--color-on-accent);
}

.btn-secondary {
    background-color: transparent;
    border-color: var(--color-border-strong);
    color: var(--color-text);
}

.btn-secondary:hover {
    background-color: var(--color-panel);
    color: var(--color-text);
}

/* Muted link button: no border, same padding box so it aligns beside the others. */
.btn-link {
    border-color: transparent;
    color: var(--color-muted);
}

.btn-link:hover {
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* Destructive: the secondary style in the danger colour; callers confirm before acting. */
.btn-danger {
    background-color: transparent;
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.btn-danger:hover {
    background-color: var(--color-danger-soft);
    color: var(--color-danger);
}

.btn-sm {
    font-size: var(--text-sm);
    padding: var(--space-1) var(--space-3);
}

.btn-lg {
    font-size: var(--text-md);
    padding: var(--space-3) var(--space-5);
}

/* ---- Inputs (§6) ---- */
.form-group {
    margin-bottom: var(--space-5);
}

.form-group label,
.field-label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text);
}

.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group select,
.form-group textarea,
.input {
    display: block;
    width: 100%;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-1);
    padding: var(--space-3);
    transition: border-color var(--duration-1) var(--ease-standard),
                box-shadow var(--duration-1) var(--ease-standard);
}

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

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.input:focus {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-1);
}

/* Invalid only once the user has interacted, so required fields are not red on arrival. */
.form-group input:user-invalid,
.form-group select:user-invalid,
.form-group textarea:user-invalid,
.input:user-invalid {
    border-color: var(--color-danger);
}

.field-hint {
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    color: var(--color-muted);
}

.field-error {
    margin: var(--space-2) 0 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-danger);
}

/* Character counter: mono, right-aligned; main.js adds .is-warning at 90% and .is-danger at 100%. */
.char-counter {
    margin: var(--space-2) 0 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--color-muted);
    text-align: right;
}

.char-counter.is-warning {
    color: var(--color-warning);
}

.char-counter.is-danger {
    color: var(--color-danger);
}

.checkbox-group {
    display: flex;
    align-items: flex-start;
}

.form-group .checkbox-label,
.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: 0;
    font-size: var(--text-base);
    font-weight: 400;
    color: var(--color-text);
    cursor: pointer;
}

.checkbox-label input[type="checkbox"],
.form-group input[type="radio"] {
    width: auto;
    margin-top: 0.3em;
    accent-color: var(--color-accent);
}

/* ---- Cells and cards (§1.6, §6) ---- */
/* Bordered cell: proof rows, how-it-works steps, feature lists. Hairlines, not boxes. */
.cell {
    border: 1px solid var(--color-border);
    padding: var(--space-5);
}

/* Card: a raised surface, only where something is clickable or grouped. */
.card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2);
    padding: var(--space-4);
}

a.card,
.card.is-clickable {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: border-color var(--duration-1) var(--ease-standard),
                box-shadow var(--duration-1) var(--ease-standard);
}

a.card:hover,
.card.is-clickable:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-1);
    text-decoration: none;
}

/* Selectable card (radio-style choice: stack, evolve mode, ticket, project count):
   the chosen one sits on the accent tint with an accent edge — no second colour. */
.card.is-selected,
.card.is-selected:hover {
    border-color: var(--color-accent);
    background-color: var(--color-accent-soft);
    box-shadow: none;
}

/* ---- App components (§6) — shared by the Vue views: onboarding + dashboard shell/home/account
   (C-089) and the testbed/project views (C-090). Views reference these classes instead of
   restyling badges, chips, banners, empty states and progress bars per component. ---- */

/* Tier badge and status chip: pill, mono, uppercase; text in the semantic colour, bg its -soft tint. */
.badge,
.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-muted);
    background-color: var(--color-panel);
}

.badge-tier-free    { color: var(--color-tier-free);    background-color: var(--color-tier-free-soft); }
.badge-tier-premium { color: var(--color-tier-premium); background-color: var(--color-tier-premium-soft); }
.badge-tier-pro     { color: var(--color-tier-pro);     background-color: var(--color-tier-pro-soft); }

/* Status words (§8): "Ready" not "Complete", "Generating" not "Processing". */
.chip-success { color: var(--color-success); background-color: var(--color-success-soft); }
.chip-warning { color: var(--color-warning); background-color: var(--color-warning-soft); }
.chip-danger  { color: var(--color-danger);  background-color: var(--color-danger-soft); }
.chip-info    { color: var(--color-info);    background-color: var(--color-info-soft); }

/* Banner: 3px left rule in the status colour over the status -soft tint, --radius-1.
   "Recommended next step" is an info banner with a mono eyebrow in the accent. */
.banner {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-info);
    border-radius: var(--radius-1);
    background-color: var(--color-surface);
}

.banner > :last-child {
    margin-bottom: 0;
}

.banner .eyebrow {
    margin-bottom: var(--space-1);
    color: var(--color-accent);
}

.banner-info    { border-left-color: var(--color-info);    background-color: var(--color-info-soft); }
.banner-success { border-left-color: var(--color-success); background-color: var(--color-success-soft); }
.banner-warning { border-left-color: var(--color-warning); background-color: var(--color-warning-soft); }
.banner-danger  { border-left-color: var(--color-danger);  background-color: var(--color-danger-soft); }

/* Empty state: a display heading at --text-lg, one sentence, one primary action. Never error colours. */
.empty-state {
    max-width: 48ch;
    padding: var(--space-7) 0;
}

.empty-state h1,
.empty-state h2 {
    margin-bottom: var(--space-2);
    font-size: var(--text-lg);
}

.empty-state p {
    margin-bottom: var(--space-5);
    color: var(--color-muted);
}

/* Hairline grid (§1.6): cells separated by 1px rules, drawn as a 1px gap over the border
   colour — the same construction as .steps / .features-grid. Children paint the page paper;
   set grid-template-columns on the grid itself. */
.hairline-grid {
    display: grid;
    gap: 1px;
    background-color: var(--color-border);
    border: 1px solid var(--color-border);
}

.hairline-grid > * {
    background-color: var(--color-bg);
}

/* Progress: 4px track on the accent-muted tint, accent fill, a failed segment in danger at the end. */
.progress {
    display: flex;
    height: 4px;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background-color: var(--color-accent-muted);
}

.progress-fill {
    height: 100%;
    background-color: var(--color-accent);
    transition: width var(--duration-3) var(--ease-standard);
}

.progress-failed {
    height: 100%;
    margin-left: auto;
    background-color: var(--color-danger);
}

/* ---- About (pre-pivot content, C-029): feature cells and the closing call to action ---- */
.features {
    padding: var(--space-9) 0;
    border-top: 1px solid var(--color-border);
}

.section-title {
    text-align: center;
    margin-bottom: var(--space-6);
}

/* Cells share hairlines (same 1px-gap grid as .steps). */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background-color: var(--color-border);
    border: 1px solid var(--color-border);
}

.feature-card {
    padding: var(--space-5);
    background-color: var(--color-bg);
}

.feature-card h3 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-2);
}

.feature-card p {
    margin: 0;
    color: var(--color-muted);
}

.cta {
    padding: var(--space-9) 0;
    border-top: 1px solid var(--color-border);
    text-align: center;
}

.cta h2 {
    margin-bottom: var(--space-3);
}

.cta p {
    max-width: 65ch;
    margin: 0 auto var(--space-6);
    color: var(--color-muted);
}
/* Footer (§5): one hairline rule, mono small print. Shared by footer.html and footer-onboarding.html. */
.site-footer {
    border-top: 1px solid var(--color-border);
    padding: var(--space-6) 0;
}

.site-footer-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
}

.site-footer-text {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-muted);
}

.site-footer-text a {
    color: var(--color-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.site-footer-text a:hover {
    color: var(--color-text);
}
/* ---- Onboarding steps 2–5 (Vue, body.onboarding): centred heading, left-aligned form ---- */
body.onboarding .onboarding-step-form {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

body.onboarding .onboarding-step-form .step-actions {
    margin-top: var(--space-6);
}
/* ---- Breakpoints (§5): custom properties cannot be read inside @media, so these literals mirror
   --bp-md (900px) and --bp-sm (640px) in :root — keep them in sync. ---- */
@media (max-width: 899.98px) {
    .hero,
    .hero-home,
    .waitlist-hero {
        padding: var(--space-8) 0 var(--space-7);
    }

    .features,
    .cta,
    .benefits,
    .how-it-works {
        padding: var(--space-8) 0;
    }

    .features-grid,
    .benefits-grid {
        grid-template-columns: 1fr;
    }

    /* Schematic flows top-to-bottom; connectors turn vertical. */
    .schematic {
        grid-template-columns: 1fr;
    }

    .schematic-node + .schematic-node::before {
        top: auto;
        right: auto;
        bottom: 100%;
        left: var(--space-5);
        width: 0;
        height: var(--space-5);
        border-top: 0;
        border-left: 1px solid var(--color-border-strong);
    }

    .schematic-evolve::before {
        border-left-color: var(--color-accent);
    }

    .steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 639.98px) {
    .site-header-inner {
        gap: var(--space-3);
    }

    /* No room beside the actions at phone width: the wordmark links home, About is in the footer. */
    .site-nav {
        display: none;
    }

    .site-header-actions {
        gap: var(--space-1);
    }

    .site-header-session {
        padding-left: var(--space-2);
        padding-right: var(--space-2);
    }

    .hero-art {
        padding: var(--space-4);
    }

    .vision-field {
        flex-direction: column;
    }

    .vision-field .btn {
        width: 100%;
    }

    .steps {
        grid-template-columns: 1fr;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .form-container {
        padding: var(--space-5);
    }
}
/* ---- Whitepaper (pre-pivot content, C-029): markdown → src/html/whitepaper.html inside
   templates/whitepaper-template.html. Long-form measure, ink body, serif headings. ---- */
.whitepaper {
    padding: var(--space-8) 0 var(--space-9);
}

.whitepaper .container {
    max-width: calc(72ch + 2 * var(--space-5)); /* long-form measure (§3.1) */
}

.whitepaper h1 {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-5);
}

.whitepaper h2 {
    font-size: var(--text-xl);
    margin-top: var(--space-8);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
}

.whitepaper h3 {
    font-size: var(--text-lg);
    margin-top: var(--space-6);
    margin-bottom: var(--space-3);
}

.whitepaper p,
.whitepaper li {
    color: var(--color-text);
}

.whitepaper strong {
    font-weight: 600;
    color: var(--color-heading);
}

.whitepaper ul,
.whitepaper ol {
    margin: 0 0 var(--space-4) var(--space-5);
    padding-left: var(--space-3);
    list-style-position: outside;
}

.whitepaper li {
    margin-bottom: var(--space-2);
}

.whitepaper code,
.whitepaper pre {
    font-size: var(--text-sm);
    background-color: var(--color-panel);
    border-radius: var(--radius-1);
}

.whitepaper code {
    padding: 0 var(--space-1);
}

.whitepaper pre {
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    overflow-x: auto;
}

.whitepaper blockquote {
    margin-bottom: var(--space-4);
    padding-left: var(--space-4);
    border-left: 3px solid var(--color-accent);
    color: var(--color-muted);
}

.whitepaper table {
    width: 100%;
    margin-bottom: var(--space-5);
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.whitepaper th {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-panel);
}

.whitepaper td {
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--color-border);
}
/* ---- Waitlist and thank-you (pre-pivot content, C-029): tokens only ---- */
.waitlist-hero {
    padding: var(--space-9) 0 var(--space-7);
    text-align: center;
}

.waitlist-hero h1 {
    margin-bottom: var(--space-4);
}

.waitlist-subtitle {
    font-size: var(--text-md);
    color: var(--color-muted);
    max-width: 65ch;
    margin: 0 auto;
}

.waitlist-form {
    padding: var(--space-7) 0 var(--space-9);
}

.form-container {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--space-6);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2);
}

.form-container h2 {
    text-align: center;
    margin-bottom: var(--space-3);
}

.form-container > p {
    text-align: center;
    color: var(--color-muted);
    margin-bottom: var(--space-6);
}

/* Success banner (§6): 3px left rule in the status colour on its -soft tint. */
.form-success {
    padding: var(--space-5);
    background-color: var(--color-success-soft);
    border-left: 3px solid var(--color-success);
    border-radius: var(--radius-1);
    text-align: center;
}

.form-success h3 {
    color: var(--color-success);
    margin-bottom: var(--space-2);
}

.form-success p {
    margin: 0;
}

.benefits {
    padding: var(--space-9) 0;
    border-top: 1px solid var(--color-border);
    text-align: center;
}

.benefits h2 {
    margin-bottom: var(--space-6);
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background-color: var(--color-border);
    border: 1px solid var(--color-border);
    text-align: left;
}

.benefit-card {
    padding: var(--space-5);
    background-color: var(--color-bg);
}

.benefit-card h3 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-2);
}

.benefit-card p {
    margin: 0;
    color: var(--color-muted);
}
/* Screen-reader-only text (keeps real copy in DOM for headings; pair with decorative backgrounds). */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}