surf-parse 0.10.0

/* surfdoc.css v1.0.0 — Unified CSS for the Surf Suite
   CloudSurf Software LLC — https://cloudsurf.com

   A single stylesheet for app chrome AND SurfDoc content rendering.
   Dark-first theme with CSS custom property theming.

   Customization:
   - Override :root variables for accent, surface, background, fonts
   - Use data-theme="light" for explicit light mode
   - System preference auto-detected via prefers-color-scheme
*/

/* ============================================================
   1. THEME VARIABLES
   ============================================================ */

:root {
    /* ── Surf Shell light palette (canonical — Reference loads data-theme="light") ── */
    /* Accent — Surf Blue */
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --accent-light: #3b82f6;
    --accent-soft: #e3ebff;          /* --surf-shell-accent-soft */
    --accent-text: #ffffff;          /* text on top of --accent (theme-invariant) */

    /* Backgrounds */
    --background: #f7f8fc;            /* --surf-shell-page */
    --surface: #ffffff;              /* --surf-shell-sheet */
    --surface-alt: #eef1f7;          /* --surf-shell-soft */
    --surface-hover: #eef1f7;        /* alias → soft (back-compat) */
    --surface-code: #ffffff;         /* alias → sheet (back-compat) */

    /* Borders */
    --border: #dde2ec;               /* --surf-shell-line */
    --border-light: #dde2ec;         /* alias → line (back-compat) */

    /* Text */
    --text: #0f1422;                 /* --surf-shell-text */
    --text-muted: #636a7e;           /* shell muted retuned for WCAG AA: ≥4.5 on --surface-alt (#eef1f7), was #6b7388 @ 4.19 */
    --text-faint: #636a7e;           /* alias → muted (back-compat) */
    --text-secondary: #636a7e;       /* alias → muted (app-shell widgets) */

    /* Aliases used by app-shell / chat widgets (back-compat) */
    --bg: #f7f8fc;                   /* alias → page */
    --green: #22c55e;                /* alias → success */

    /* Code */
    --code-bg: #f7f8fc;

    /* Semantic colors */
    --danger: #ef4444;
    --danger-light: rgba(239, 68, 68, 0.08);
    --success: #22c55e;
    --success-light: rgba(34, 197, 94, 0.08);
    --warning: #f59e0b;
    --warning-light: rgba(245, 158, 11, 0.08);

    /* Radii — prose / long-tail corners. Default 2px (sharp) keeps the Surf
       identity byte-identical. A style pack rounds the ENTIRE prose + misc
       long-tail (~100 var(--radius*) consumers: code, tables, inline badges,
       nav rows, forms, decision/code blocks, …) by setting one --ws-* token,
       --ws-radius-prose — no edits to those call sites. --ws-radius-base lets
       a pack diverge the slightly-larger var(--radius) consumers from the sm
       ones; it falls back to the prose token so a single override rounds both.
       Genuine cards/controls/images keep their own --ws-radius-card /
       --ws-control-radius / --ws-radius-img buckets. */
    --radius: var(--ws-radius-base, var(--ws-radius-prose, 2px));
    --radius-sm: var(--ws-radius-prose, 2px);
    --radius-circle: 50%;

    /* ── Style-pack contract tokens (rendering annex) ──────────────
       Defaults = the "Surf Simple" pack: rounded-rect controls + 16px
       cards, matching the Surf app shell. Style packs (container-injected or
       host-page overrides) re-set ONLY these tokens — packs change
       visuals, never layout. Doc-prose blocks keep --radius/--radius-sm. */
    --ws-radius-card: 16px;          /* hero, feature/stat/product/testimonial cards */
    --ws-radius-btn: 10px;           /* hero buttons, CTAs — Surfspace rounded rect */
    --ws-radius-chip: 999px;         /* badges, hero badge — pill */
    --ws-radius-img: 10px;           /* images inside web blocks, icon tiles */
    --ws-border-w: 1px;
    --ws-border-style: solid;
    --ws-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); /* card shadow recipe (Comic: hard-offset) */
    --ws-shadow-hover: 0 10px 30px rgba(15, 23, 42, 0.10); /* card hover lift */
    --ws-bg-texture: none;           /* page background image/texture layer */
    /* Hero surface — derived from the palette accent (NOT hardcoded purple),
       so all six palettes produce a designed-looking gradient. Layered: a soft
       radial highlight at top-center over a deep accent gradient. */
    --ws-hero-bg: radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.12), transparent 60%), linear-gradient(160deg, var(--accent), color-mix(in oklab, var(--accent) 68%, #0b1023));

    /* ── Style-pack contract, Phase 2 (typography · controls · texture) ─────
       Lets a pack diverge on MORE than shape — fonts, heading treatment,
       button fill, control corners, dividers, texture scale. Each default
       reproduces today's Surf look so the identity pack stays byte-identical.
       Tokens whose current value DIFFERS by block (control-radius: forms 2px
       vs app-controls 8px; heading-weight/tracking) are intentionally NOT
       declared here — those consumers carry a per-element fallback
       (`var(--ws-…, <today's value>)`) so the identity look is exact, and a
       pack sets the token once to shift them all. */
    --ws-font-display: var(--font-heading);   /* hero headline, section + card titles, h1–h3 */
    --ws-font-body: var(--font-body);          /* prose / body copy */
    --ws-heading-transform: none;              /* uppercase eyebrows/labels in editorial packs */
    --ws-heading-style: normal;                /* italic display in some packs */
    --ws-btn-bg: var(--accent);                /* marketing CTA fill — a pack can make it outline/ghost */
    --ws-btn-border: var(--accent);            /* default = fill colour ⇒ invisible; outline packs set this to the accent over a transparent fill */
    --ws-btn-color: var(--accent-text, #fff);  /* CTA label colour */
    --ws-bg-texture-size: auto;                /* halftone/grid scale for textured packs */
    --ws-divider: var(--ws-border-w) var(--ws-border-style) var(--border); /* editorial hairline / double rules */
    /* --ws-control-radius   — set by packs; consumers default to 8px (app
       controls) or var(--radius-sm) (forms) via per-element fallback. */
    /* --ws-heading-weight   — set by packs; display headings fall back to
       their own current weights via var(--ws-heading-weight, <n>). */
    /* --ws-heading-tracking — set by packs; display headings fall back to
       var(--ws-heading-tracking, var(--tracking-tight)). */

    /* Web-block component tokens — a consumer WaveSite overrides these VALUES
       (DOG-3) to retheme hero/feature blocks without touching layout. Each
       default below == the literal it replaced in the rule, so an unset token
       is a visual no-op (no consumer change until a value is supplied). */
    --ws-hero-btn-radius: var(--ws-radius-btn);          /* hero action buttons */
    --ws-cta-radius: var(--ws-radius-btn);               /* standalone CTA button */
    --ws-banner-btn-radius: var(--radius-sm);            /* ::banner action buttons */
    --ws-feature-card-bg: color-mix(in srgb, var(--surface) 50%, var(--surface-alt) 50%); /* feature-card surface — must differ from BOTH .section-muted (--surface) and .section-dark (--surface-alt) */
    --ws-feature-card-pad: 1.5rem;                       /* feature-card padding */
    --ws-feature-card-radius: var(--ws-radius-card);     /* feature-card corner */
    --ws-feature-card-hover-transform: translateY(-2px); /* feature-card hover lift */

    /* SS-1 component tokens (0.9.3) — same DOG-3 pattern: each `:root`
       default below == the per-element fallback it mirrors in the consuming
       rule, so an unset token stays a visual no-op while a consumer site
       re-themes by VALUE (no specificity ties). --ws-control-radius stays
       fallback-only on purpose (divergent per-element defaults, see the
       Phase-2 comment above). */
    --ws-tile-surface-bg: var(--surface);                /* ::product-grid tile-surface fill */
    --ws-post-card-bg: var(--surface);                   /* ::post-grid card surface */
    --ws-post-card-radius: var(--ws-radius-card);        /* ::post-grid card corner */
    --ws-pg-card-bg: color-mix(in srgb, var(--surface) 72%, transparent); /* ::product-grid row card */
    --ws-pg-card-radius: var(--ws-radius-card-lg, 20px); /* ::product-grid row-card corner */
    --ws-pg-tile-radius: 0;                              /* ::product-grid tiles — square by spec */
    --ws-details-bg: var(--surface-alt);                 /* ::details disclosure surface */
    --ws-details-radius: var(--radius-sm);               /* ::details corner */
    --ws-form-input-bg: var(--surface);                  /* ::form input fill */
    --ws-form-submit-radius: var(--ws-control-radius, var(--radius-sm)); /* ::form submit corner */
    --ws-doc-page-bg: var(--surface);                    /* doc-page sheet surface */
    --ws-doc-page-radius: var(--ws-radius-card);         /* doc-page sheet corner */
    --ws-drawer-link-size: 0.9375rem;                    /* shell drawer link face */
    --ws-drawer-link-weight: 500;

    /* Spacing rhythm — the 4/8-based scale every site block draws from (style
       annex vNext). Blocks reference the scale, never ad-hoc pixel values, so a
       consumer can retune the whole page rhythm by overriding these. */
    --ws-space-2xs: 4px;
    --ws-space-xs: 8px;
    --ws-space-sm: 16px;
    --ws-space-md: 24px;
    --ws-space-lg: 40px;
    --ws-space-xl: 64px;
    --ws-space-2xl: 96px;
    --ws-space-3xl: 144px;
    /* Vertical padding of a marketing band (hero/banner/product-grid/post-grid)
       and the tighter variant for a heading band that introduces the content
       band right under it (apple.com rhythm: sections breathe, a heading hugs
       what it introduces). */
    --ws-section-pad: clamp(64px, 7vw, 120px);
    --ws-section-pad-compact: clamp(32px, 4vw, 56px);
    /* Site page cap: full-bleed bands stop growing at this width and stay
       centered on ultrawide viewports (apple.com-style page cap). */
    --ws-site-max: 2572px;
    /* Marketing band inner content column (wider than the 48rem prose column). */
    --ws-band-inner: 1120px;
    /* Capped full-bleed breakout: width + negative margins that pull a band out
       of the 48rem reading column to the viewport edge, stopping at the site
       cap. Shared by hero, banner, grids, and tinted section bands. */
    --ws-bleed-width: min(100vw, var(--ws-site-max));
    --ws-bleed-margin: calc(50% - min(50vw, var(--ws-site-max) / 2));

    /* Shadows */
    --shadow-sm: none;
    --shadow: none;

    /* ── Typography: font stacks ── */
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: "SF Mono", "Fira Code", "Cascadia Code", Menlo, Consolas, monospace;

    /* ── Typography: semantic size scale ──
       Proven on cloudsurf.com (style-v2): the old scale read small on
       modern displays; every step gets ~+2–6px. */
    --font-size-micro: 12px;         /* status badges, microlabel */
    --font-size-caption: 14px;       /* helper text, footnote, table cell */
    --font-size-ui: 15px;            /* dense UI, drawer row, button */
    --font-size-body: 17px;          /* default paragraph */
    --font-size-body-lg: 18px;       /* long-form prose */
    --font-size-h3: 21px;            /* subsection / card title */
    --font-size-h2: 24px;            /* section title */
    --font-size-h1: 28px;            /* page header */
    --font-size-display: 38px;       /* hero / display */

    /* ── Typography: weights ── */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;        /* display headings h1–h3, hero headline */

    /* ── Typography: tracking ── */
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.05em;

    /* ── Shell re-skin hooks ──────────────────────────────────────
       Defaults equal today's neutral shell values → zero visual change
       for existing consumers. A host page can override these (e.g. a
       frosted-glass nav) without re-declaring the whole shell rules. */
    --shell-nav-bg: var(--surface);
    --shell-btn-bg: var(--surface);
    --shell-drawer-bg: var(--surface);
    --shell-drawer-link-hover-bg: var(--surface-hover);
    --shell-control-border: var(--border);
    --shell-nav-h: 56px;
}

/* ============================================================
   2. THEME OVERRIDES
   ============================================================ */

/* Explicit light mode toggle — same as :root (light is canonical). */
[data-theme="light"] {
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --accent-light: #3b82f6;
    --accent-soft: #e3ebff;
    --accent-text: #ffffff;
    --background: #f7f8fc;
    --surface: #ffffff;
    --surface-alt: #eef1f7;
    --surface-hover: #eef1f7;
    --surface-code: #ffffff;
    --border: #dde2ec;
    --border-light: #dde2ec;
    --text: #0f1422;
    --text-muted: #636a7e;
    --text-faint: #636a7e;
    --text-secondary: #636a7e;
    --bg: #f7f8fc;
    --green: #22c55e;
    --code-bg: #f7f8fc;
    --danger-light: rgba(239, 68, 68, 0.08);
    --success-light: rgba(34, 197, 94, 0.08);
    --warning-light: rgba(245, 158, 11, 0.08);
    --shadow-sm: none;
    --shadow: none;
}

/* Explicit dark mode toggle — Surf shell PURE-BLACK dark palette (aligned to the
   Reference's `.sd-*` mocks, which resolve through the surf-shell tokens:
   page #000, sheet #0a0a0a, soft #161616, line #262626, text #fafafa, muted
   #a3a3a3). Part C alignment: the render was previously on the tokens.css
   blue-cast neutrals (#111118/#1e1e2a/#e5e5ef), one step lighter and bluer than
   the reference — this retunes the render dark palette to match the reference
   pixel-for-token. Light mode is untouched. */
[data-theme="dark"] {
    --accent: #2563eb;               /* brand accent (stays blue) */
    --accent-hover: #2563eb;
    --accent-light: #60a5fa;
    --accent-soft: rgba(37, 99, 235, 0.18);
    --accent-text: #ffffff;
    --background: #000000;           /* reference body: pure black */
    --surface: #0d0d0d;              /* neutral, lifted off black */
    --surface-alt: #161616;          /* reference cards: neutral gray */
    --surface-hover: #161616;        /* neutral */
    --surface-code: #0d0d0d;         /* neutral */
    --border: #262626;               /* neutral line */
    --border-light: #2a2a2a;         /* neutral line (light) */
    --text: #e5e5e5;                 /* neutral text */
    --text-muted: #8b8b8b;           /* neutral muted */
    --text-faint: #7f7f7f;           /* fainter, but AA: ≥4.5 on --surface-alt (#161616), was #5a5a5a @ 2.82 */
    --text-secondary: #cbcbcb;       /* neutral secondary */
    --bg: #000000;                   /* alias → pure black body */
    --green: #22c55e;                /* alias → success (explicit in dark) */
    --code-bg: #0d0d0d;              /* neutral */
    --danger-light: rgba(239, 68, 68, 0.1);
    --success-light: rgba(34, 197, 94, 0.1);
    --warning-light: rgba(245, 158, 11, 0.1);
    --shadow-sm: none;
    --shadow: none;
    --ws-feature-card-bg: var(--surface-alt); /* dark: the light-mode surface/surface-alt color-mix reads
        too close to pure-black --background; pin back to --surface-alt so tier/stat/product cards keep
        the same visible fill as untouched siblings (testimonial/metric/logo/booking/store). */
}

/* Auto-detect: dark mode only when the OS asks and no explicit theme set. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --accent: #2563eb;               /* brand accent (stays blue) */
        --accent-hover: #2563eb;
        --accent-light: #60a5fa;
        --accent-soft: rgba(37, 99, 235, 0.18);
        --accent-text: #ffffff;
        --background: #000000;           /* reference body: pure black */
        --surface: #0d0d0d;              /* neutral, lifted off black */
        --surface-alt: #161616;          /* reference cards: neutral gray */
        --surface-hover: #161616;        /* neutral */
        --surface-code: #0d0d0d;         /* neutral */
        --border: #262626;               /* neutral line */
        --border-light: #2a2a2a;         /* neutral line (light) */
        --text: #e5e5e5;                 /* neutral text */
        --text-muted: #8b8b8b;           /* neutral muted */
        --text-faint: #7f7f7f;           /* fainter, but AA on --surface-alt (see [data-theme="dark"]) */
        --text-secondary: #cbcbcb;       /* neutral secondary */
        --bg: #000000;                   /* alias → pure black body */
        --green: #22c55e;                /* alias → success (explicit in dark) */
        --code-bg: #0d0d0d;              /* neutral */
        --danger-light: rgba(239, 68, 68, 0.1);
        --success-light: rgba(34, 197, 94, 0.1);
        --warning-light: rgba(245, 158, 11, 0.1);
        --shadow-sm: none;
        --shadow: none;
        --ws-feature-card-bg: var(--surface-alt); /* see [data-theme="dark"] override above */
    }
}

/* ============================================================
   3. RESET & BASE
   ============================================================ */

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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background: var(--background);
    background-image: var(--ws-bg-texture); /* style-pack texture hook (Surf Simple: none) */
    background-size: var(--ws-bg-texture-size); /* halftone/grid/paper scale for textured packs */
    overflow-x: clip; /* clip (not hidden) — prevents scrollbar-gutter slide while keeping sticky/overflow-y intact */
}

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

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

img {
    max-width: 100%;
    height: auto;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: var(--radius-sm); }

/* ============================================================
   4. NAVIGATION (app chrome)
   ============================================================ */

.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(10, 10, 15, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

[data-theme="light"] .nav {
    background: rgba(255, 255, 255, 0.88);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .nav {
        background: rgba(255, 255, 255, 0.88);
    }
}

.nav-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    font-weight: 700;
    font-size: 1.125rem;
    text-decoration: none;
}

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

.nav-emblem {
    width: 26px;
    height: 26px;
    border-radius: var(--radius-sm);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-link {
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    text-decoration: none;
}

.nav-link:hover {
    color: var(--text);
}

.nav-link.active,
.nav-link-active {
    color: var(--text);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-cta {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: var(--accent);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    text-decoration: none;
}

.nav-cta:hover {
    background: var(--accent-hover);
    color: #fff;
}

/* Theme toggle */
.nav-theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
}

.nav-theme-toggle:hover {
    color: var(--text);
}

.nav-theme-toggle .icon-moon { display: none; }
[data-theme="light"] .nav-theme-toggle .icon-sun { display: none; }
[data-theme="light"] .nav-theme-toggle .icon-moon { display: block; }

/* Mobile hamburger */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 36px;
    height: 36px;
    padding: 8px;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: transform 200ms ease, opacity 200ms ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Nav badge (notification count) */
.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-sm);
    background: var(--danger);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
}

main {
    padding-top: var(--shell-nav-h);
}

/* ============================================================
   5. BUTTONS
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1;
    cursor: pointer;
    min-height: 44px;
    border: none;
    text-decoration: none;
    font-family: inherit;
}

.btn-primary {
    background: var(--accent);
    color: #fff;
}

.btn-primary:hover {
    background: var(--accent-hover);
    color: #fff;
}

.btn-ghost {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-ghost:hover {
    background: var(--surface);
    color: var(--text);
}

.btn-danger {
    background: var(--danger);
    color: #fff;
}

.btn-danger:hover {
    background: #dc2626;
    color: #fff;
}

.btn-success {
    background: var(--success);
    color: #fff;
}

.btn-sm {
    padding: 6px 14px;
    font-size: 0.8125rem;
    min-height: 32px;
    border-radius: var(--radius-sm);
}

.btn-block {
    width: 100%;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================================
   6. CARDS & GRIDS
   ============================================================ */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
}

.card-title {
    font-weight: 700;
    font-size: 1.125rem;
    margin-bottom: 8px;
}

.card-body {
    font-size: 0.9375rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

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

/* ============================================================
   7. SECTIONS
   ============================================================ */

.section {
    border-top: 1px solid var(--border);
}

.section-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 80px 24px;
}

.section-header {
    text-align: center;
}

.section-headline {
    font-weight: 700;
    font-size: clamp(1.5rem, 4vw, 2rem);
    line-height: 1.2;
    margin-bottom: 12px;
    letter-spacing: -0.03em;
}

.section-subtitle {
    font-size: 1.125rem;
    color: var(--text-muted);
    margin-bottom: 48px;
    max-width: 560px;
}

.section-header .section-subtitle {
    margin-left: auto;
    margin-right: auto;
}

.section-muted {
    background: var(--surface);
}

/* ============================================================
   8. HERO
   ============================================================ */

.hero {
    text-align: center;
}

.hero-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 120px 24px 96px;
}

.hero-headline {
    font-weight: 800;
    font-size: clamp(2.25rem, 6vw, 3rem);
    line-height: 1.1;
    margin-bottom: 16px;
    letter-spacing: -0.035em;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--text-muted);
    margin-bottom: 36px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.hero-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--accent-light);
    background: transparent;
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: var(--radius);
    padding: 6px 14px;
    margin-bottom: 24px;
}

.hero-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    animation: sui-pulse 2s ease-in-out infinite;
}

@keyframes sui-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.hero-accent {
    color: var(--accent-light);
}

/* ============================================================
   9. TABLES (app chrome)
   ============================================================ */

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.table,
.platform-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.table th,
.platform-table th {
    text-align: left;
    padding: 12px 16px;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.table td,
.platform-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.table tbody tr:hover,
.platform-table tbody tr:hover {
    background: var(--surface);
}

.platform-file {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* Comparison table */
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.comparison-table th {
    text-align: left;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    font-weight: 700;
    font-size: 0.8125rem;
    white-space: nowrap;
}

.comparison-table td {
    padding: 12px 16px;
    border: 1px solid var(--border);
    vertical-align: top;
}

.comparison-table tbody tr:hover { background: var(--surface); }
.comparison-table td:first-child { font-weight: 600; white-space: nowrap; }
.comparison-highlight { background: rgba(59, 130, 246, 0.06); }

/* ============================================================
   10. FORMS (app chrome)
   ============================================================ */

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}

.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: inherit;
    font-size: 0.9375rem;
    line-height: 1.5;
}

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

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    border-color: var(--accent);
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-result {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
    margin-top: 16px;
}

.form-result.success {
    background: var(--success-light);
    color: var(--success);
}

.form-result.error {
    background: var(--danger-light);
    color: var(--danger);
}

/* ============================================================
   11. BADGES & STATUS
   ============================================================ */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.badge:empty { display: none; }

.badge-available,
.badge-success {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: #22c55e;
}

.badge-coming,
.badge-warning {
    background: rgba(234, 179, 8, 0.12);
    border: 1px solid rgba(234, 179, 8, 0.25);
    color: #eab308;
}

.badge-primary {
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.25);
    color: var(--accent);
}

.badge-danger {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #ef4444;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-supported {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
}

.status-supported .status-dot { background: #22c55e; }

.status-planned {
    color: var(--accent-light);
    background: rgba(59, 130, 246, 0.1);
}

.status-planned .status-dot { background: var(--accent-light); }

/* ============================================================
   12. ALERTS
   ============================================================ */

.alert {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
    margin-bottom: 16px;
}

.alert-error {
    background: var(--danger-light);
    color: var(--danger);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.alert-success {
    background: var(--success-light);
    color: var(--success);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.alert-info {
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    color: var(--text);
}

.alert-info strong { color: var(--accent); }

/* ============================================================
   13. CODE BLOCKS (app chrome)
   ============================================================ */

.code-block {
    position: relative;
    background: #0d0d14;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.code-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
}

.code-block pre {
    margin: 0;
    padding: 16px;
    overflow-x: auto;
    font-size: 0.875rem;
    line-height: 1.7;
}

.code-block code {
    font-family: var(--font-mono);
    color: var(--text);
    background: none;
}

.code-copy {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-family: inherit;
    cursor: pointer;
    z-index: 2;
}

.code-copy:hover {
    color: var(--text);
    border-color: var(--border-light);
}

/* Syntax highlighting — dark */
.code-block .kw { color: #c792ea; }
.code-block .str { color: #c3e88d; }
.code-block .cm { color: #546e7a; }
.code-block .fn { color: #82aaff; }
.code-block .num { color: #f78c6c; }
.code-block .attr { color: #ffcb6b; }
.code-block .tag { color: #f07178; }
.code-block .punct { color: #89ddff; }

/* Syntax highlighting — light */
[data-theme="light"] .code-block .kw { color: #7c3aed; }
[data-theme="light"] .code-block .str { color: #16a34a; }
[data-theme="light"] .code-block .cm { color: #94a3b8; }
[data-theme="light"] .code-block .fn { color: #2563eb; }
[data-theme="light"] .code-block .num { color: #ea580c; }
[data-theme="light"] .code-block .attr { color: #b45309; }
[data-theme="light"] .code-block .tag { color: #dc2626; }
[data-theme="light"] .code-block .punct { color: #0891b2; }

/* Inline code */
:not(pre) > code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    padding: 2px 6px;
    background: rgba(255,255,255,0.06);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--accent-light);
}

/* ============================================================
   14. STATS
   ============================================================ */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 48px;
}

.stat-item {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 24px;
    text-align: center;
}

.stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--accent);
    line-height: 1.2;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* ============================================================
   15. STEPS
   ============================================================ */

.steps-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    counter-reset: step;
}

.step-card {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 24px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 0;
}

.step-number {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #fff;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.75rem;
}

.step-card h3 {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 4px;
}

.step-card p {
    color: var(--text-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
}

/* ============================================================
   16. CAPABILITY GRID
   ============================================================ */

.capability-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.capability-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
}

.capability-card h3 {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 8px;
}

.capability-card p {
    font-size: 0.9375rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.capability-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.capability-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.capability-location {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ============================================================
   17. FOOTER (app chrome)
   ============================================================ */

.footer {
    border-top: 1px solid var(--border);
    padding: 56px 0 32px;
}

.footer-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
}

.footer-columns {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 40px;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 1.125rem;
    margin-bottom: 8px;
}

.footer-brand-icon {
    color: var(--accent);
    font-family: var(--font-mono);
}

.footer-tagline {
    font-size: 0.9375rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.footer-heading {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text);
    margin-bottom: 16px;
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-links a {
    font-size: 0.875rem;
    color: var(--text-muted);
    text-decoration: none;
}

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

.footer-text {
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 8px;
}

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

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

.footer-bottom {
    padding-top: 24px;
    border-top: 1px solid var(--border);
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* ============================================================
   18. MODAL
   ============================================================ */

dialog.modal {
    max-width: 440px;
    width: calc(100% - 48px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    padding: 24px;
}

dialog.modal::backdrop {
    background: rgba(0, 0, 0, 0.6);
}

dialog.modal h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 16px;
}

.modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 24px;
}

/* ============================================================
   19. EMPTY STATE
   ============================================================ */

.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-muted);
    font-size: 0.9375rem;
}

/* ============================================================
   20. UTILITIES
   ============================================================ */

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

.text-muted { color: var(--text-muted); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }

/* ============================================================
   21. FOCUS ACCESSIBILITY
   ============================================================ */

.btn:focus-visible,
.nav-link:focus-visible,
.form-input:focus-visible,
.form-textarea:focus-visible,
.form-select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}


/* ================================================================
   ================================================================
   SURFDOC CONTENT RENDERING
   ================================================================
   ================================================================ */


/* ============================================================
   22. SURFDOC LAYOUT
   ============================================================ */

/* NAV CLIPPING FIX (A2 §5): overflow-x:hidden removed so the full-bleed
   .surfdoc-nav (width:100vw + margin-left:calc(-50vw+50%)) is not clipped.
   Wide blocks keep their own overflow-x:auto (.surfdoc-table-wrap, .surfdoc-code pre). */
.surfdoc { max-width: 48rem; margin: 0 auto; padding: 2rem 1.5rem 4rem; line-height: 1.7; font-family: var(--ws-font-body); color: var(--text); overflow-wrap: break-word; }

/* Responsive table scroll wrapper — looks like Reference .sd-data container.
   Keeps overflow-x:auto so wide tables scroll inside their own box. */
.surfdoc-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.5rem 0; border: 1px solid var(--border); border-radius: var(--radius-sm); }

/* Inline icons */
.surfdoc-icon { display: inline-flex; align-items: center; vertical-align: middle; line-height: 0; }
.surfdoc-icon svg { width: 1em; height: 1em; }

/* Sections — uniform background (auto-alternating backgrounds were removed:
   they full-bled to 100vw and broke any embedded/constrained layout). */
.surfdoc-section { padding: 2rem 0; }
.surfdoc-section h2 { margin-top: 0; }

/* ============================================================
   23. SURFDOC IN-DOCUMENT NAVIGATION
   ============================================================ */

/* ── Nav shell: sticky topbar + slide-in left drawer + theme toggle ── */
/* display:contents so the sticky topbar's containing block is .surfdoc (the tall
   article) rather than this short wrapper — otherwise the topbar un-sticks the
   moment you scroll past the nav's own height. */
.surfdoc-nav { display: contents; }
.surfdoc-nav-toggle { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }

.surfdoc-nav-topbar { display: flex; align-items: stretch; height: 64px; padding-left: 10px; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; width: 100vw; margin-left: calc(-50vw + 50%); margin-top: -2rem; margin-bottom: 1.5rem; }
.surfdoc-nav-topbar-left { display: flex; align-items: stretch; flex-shrink: 0; }
.surfdoc-nav-topbar-right { display: flex; align-items: center; gap: 6px; margin-left: auto; padding-right: 16px; flex-shrink: 0; }

.surfdoc-nav-hamburger { width: 64px; height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; color: var(--text); transition: background 120ms ease; }
.surfdoc-nav-hamburger:hover { background: var(--surface-alt); }
.surfdoc-nav-hamburger span { display: block; width: 24px; height: 2px; background: currentColor; border-radius: 1px; transition: transform 0.2s, opacity 0.2s; }
.surfdoc-nav-toggle:checked ~ .surfdoc-nav-topbar .surfdoc-nav-hamburger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.surfdoc-nav-toggle:checked ~ .surfdoc-nav-topbar .surfdoc-nav-hamburger span:nth-child(2) { opacity: 0; }
.surfdoc-nav-toggle:checked ~ .surfdoc-nav-topbar .surfdoc-nav-hamburger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.surfdoc-nav-logo { display: flex; align-items: center; padding: 0 16px; height: 64px; font-weight: var(--font-weight-bold); font-size: var(--font-size-body-lg); color: var(--text); text-decoration: none; white-space: nowrap; }
.surfdoc-nav-logo-img { height: 26px; width: auto; display: block; }
/* No underline on nav links (overrides the equal-specificity .surfdoc a:hover underline) */
.surfdoc-nav a, .surfdoc-nav a:hover { text-decoration: none !important; }

.surfdoc-nav-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-muted); cursor: pointer; transition: background 120ms ease, color 120ms ease; }
.surfdoc-nav-theme-toggle:hover { background: var(--surface-alt); color: var(--text); }
.surfdoc-nav-theme-toggle svg { width: 18px; height: 18px; }
.surfdoc-nav-theme-toggle .surfdoc-nav-icon-sun { display: none; }
.surfdoc-nav-theme-toggle .surfdoc-nav-icon-moon { display: block; }
[data-theme="dark"] .surfdoc-nav-theme-toggle .surfdoc-nav-icon-sun { display: block; }
[data-theme="dark"] .surfdoc-nav-theme-toggle .surfdoc-nav-icon-moon { display: none; }

.surfdoc-nav-drawer { position: fixed; top: 64px; left: 0; bottom: 0; width: 248px; max-width: 84vw; background: var(--surface); border-right: 1px solid var(--border); z-index: 120; transform: translateX(-100%); transition: transform 200ms cubic-bezier(0.2,0.8,0.2,1); overflow-y: auto; }
.surfdoc-nav-toggle:checked ~ .surfdoc-nav-drawer { transform: translateX(0); }
.surfdoc-nav-drawer-nav { display: flex; flex-direction: column; padding: 10px 10px; gap: 2px; }
/* .surfdoc prefix bumps specificity to (0,2,0), beating .surfdoc a (0,1,1) link color
   so nav rows read as neutral text, not raw blue links — accent is reserved for active. */
.surfdoc .surfdoc-nav-drawer-row { display: flex; align-items: center; gap: 11px; padding: 0 12px; min-height: 40px; border-radius: var(--radius-sm); color: var(--text); font-size: var(--font-size-ui); font-weight: var(--font-weight-medium); letter-spacing: -0.006em; text-decoration: none; transition: background 120ms ease, color 120ms ease; }
.surfdoc .surfdoc-nav-drawer-row:hover { background: var(--surface-alt); color: var(--accent); }
.surfdoc .surfdoc-nav-drawer-row.is-active { background: var(--accent-soft); color: var(--accent); font-weight: var(--font-weight-semibold); }
.surfdoc-nav-drawer-row .surfdoc-icon { display: inline-flex; align-items: center; width: 18px; height: 18px; flex-shrink: 0; }

.surfdoc-nav-scrim { position: fixed; inset: 64px 0 0 0; background: rgba(0,0,0,0.4); z-index: 110; opacity: 0; pointer-events: none; transition: opacity 200ms ease; cursor: pointer; }
.surfdoc-nav-toggle:checked ~ .surfdoc-nav-scrim { opacity: 1; pointer-events: auto; }
/* Background scroll-lock is handled in the nav's JS (with scrollbar-width
   compensation) so locking doesn't shift the full-bleed topbar. */

/* ============================================================
   24. SURFDOC TYPOGRAPHY
   ============================================================ */

.surfdoc h1, .surfdoc h2, .surfdoc h3, .surfdoc h4, .surfdoc h5, .surfdoc h6 { line-height: 1.3; color: var(--text); }
/* Display headings carry the pack display face + heading treatment (weight,
   tracking, transform, style — each defaulting to today's value so Surf is
   unchanged); the h5/h6 micro-eyebrows stay on the UI font. */
.surfdoc h1, .surfdoc h2, .surfdoc h3, .surfdoc h4 { font-family: var(--ws-font-display); font-style: var(--ws-heading-style); text-transform: var(--ws-heading-transform); }
.surfdoc h5, .surfdoc h6 { font-family: var(--font-heading); }
/* h1–h3 default to the black display weight (style-v2 spec: titles own the
   heaviest face); packs still override via --ws-heading-weight. */
.surfdoc h1 { font-size: var(--font-size-h1); font-weight: var(--ws-heading-weight, var(--font-weight-black)); margin: 2.5rem 0 1rem; letter-spacing: var(--ws-heading-tracking, var(--tracking-tight)); }
.surfdoc h2 { font-size: var(--font-size-h2); font-weight: var(--ws-heading-weight, var(--font-weight-black)); margin: 2rem 0 0.75rem; padding-bottom: 0.5rem; border-bottom: var(--ws-divider); letter-spacing: var(--ws-heading-tracking, var(--tracking-tight)); }
.surfdoc h3 { font-size: var(--font-size-h3); font-weight: var(--ws-heading-weight, var(--font-weight-black)); margin: 1.5rem 0 0.5rem; letter-spacing: var(--ws-heading-tracking, var(--tracking-tight)); }
.surfdoc h4 { font-size: var(--font-size-body-lg); font-weight: var(--font-weight-semibold); margin: 1.2rem 0 0.5rem; letter-spacing: -0.015em; }
.surfdoc h5, .surfdoc h6 { font-size: var(--font-size-ui); font-weight: var(--font-weight-semibold); margin: 1rem 0 0.5rem; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-muted); }
.surfdoc p { margin: 0.75rem 0; }
.surfdoc a { color: var(--accent-ink, var(--accent)); text-decoration: none; }
.surfdoc a:hover { text-decoration: underline; }
.surfdoc strong { font-weight: var(--font-weight-semibold); color: var(--text); }
.surfdoc em { color: var(--text-muted); }
/* Muted em is a prose treatment only — headings, card titles, and hero copy
   keep their own color (em inside a title was going gray). */
.surfdoc h1 em, .surfdoc h2 em, .surfdoc h3 em, .surfdoc h4 em, .surfdoc-hero em { color: inherit; }
.surfdoc ul, .surfdoc ol { margin: 0.5rem 0; padding-left: 1.5rem; }
.surfdoc li { margin: 0.25rem 0; }
.surfdoc li::marker { color: var(--text-muted); }
.surfdoc blockquote { border-left: 3px solid var(--border); padding: 0.5rem 0 0.5rem 1.5rem; margin: 1.25rem 0; background: transparent; border-radius: 0; font-style: italic; color: var(--text-muted); }
.surfdoc blockquote p { margin: 0.25rem 0; }
.surfdoc code { font-family: var(--font-mono); font-size: 0.85em; background: var(--surface-alt); padding: 0.15em 0.4em; border-radius: var(--radius-sm); color: var(--text); }
.surfdoc pre { background: var(--surface-code); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1.2rem; overflow-x: auto; margin: 1.5rem 0; }
.surfdoc pre code { background: transparent; padding: 0; font-size: var(--font-size-caption); line-height: 1.65; font-family: var(--font-mono); color: var(--text); }
.surfdoc table { width: 100%; border-collapse: collapse; font-size: var(--font-size-caption); border: none; }
/* Wide tables scroll inside their wrapper instead of clipping on narrow viewports.
   .surfdoc-table-wrap already has overflow-x:auto; letting the table grow to its
   content width (rather than being squeezed to 100%) is what actually engages the
   scroll on a 390px screen. */
.surfdoc-table-wrap > table { width: auto; min-width: 100%; }
.surfdoc th { text-align: left; padding: 0.6rem 1rem; border-bottom: 1px solid var(--border); font-weight: var(--font-weight-semibold); color: var(--text-muted); font-size: var(--font-size-micro); text-transform: uppercase; letter-spacing: var(--tracking-wide); background: transparent; }
.surfdoc td { padding: 0.6rem 1rem; border-bottom: 1px solid var(--border); }
.surfdoc tr:last-child td { border-bottom: none; }
.surfdoc hr { border: none; border-top: 1px solid var(--border); margin: 2.5rem 0; }
.surfdoc img { max-width: 100%; border-radius: var(--radius-sm); }

/* ============================================================
   25. SURFDOC CALLOUTS
   ============================================================ */

/* Look: a tinted card — full pack-reactive border + soft type-tinted wash +
   icon, NO left-only accent stripe (the type reads from the whole card, not a
   bar on one edge). `--callout-tone` is the per-type colour, set below. */
.surfdoc-callout { --callout-tone: var(--accent); display: flex; gap: 12px; padding: 14px 16px; margin: 1.5rem 0; border: var(--ws-border-w) var(--ws-border-style) color-mix(in srgb, var(--callout-tone) 28%, var(--border)); border-radius: var(--ws-radius-card); background: color-mix(in srgb, var(--callout-tone) 6%, var(--surface)); box-shadow: var(--ws-shadow); }
.surfdoc-callout-icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; color: var(--callout-tone); stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.surfdoc-callout-title { font-weight: var(--font-weight-semibold); font-size: var(--font-size-ui); margin-bottom: 2px; color: var(--text); }
.surfdoc-callout-body { margin: 0; font-size: var(--font-size-ui); line-height: 1.55; color: var(--text); }
.surfdoc-callout-body p { margin: 0; }
.surfdoc-callout-body p + p { margin-top: 0.5rem; }
/* Legacy: bare <strong> heading inside a callout (markup without title div) */
.surfdoc-callout > strong { display: block; margin-bottom: 2px; font-weight: var(--font-weight-semibold); font-size: var(--font-size-ui); color: var(--text); }
.surfdoc-callout > p { margin: 0; font-size: var(--font-size-ui); line-height: 1.55; }

/* Per-type tone — one variable drives border tint, background wash AND icon
   colour together, so the type reads from the whole card (no edge stripe). */
.surfdoc-callout-tip,
.surfdoc-callout-info,
.surfdoc-callout-note { --callout-tone: var(--accent); }
.surfdoc-callout-success { --callout-tone: var(--success); }
.surfdoc-callout-warning { --callout-tone: var(--warning); }
.surfdoc-callout-danger { --callout-tone: var(--danger); }

/* ============================================================
   26. SURFDOC DATA TABLES
   ============================================================ */

/* B0: outer div keeps .surfdoc-table-wrap (styled as Reference .sd-data container,
   border + sharp radius — see §22). The <table> keeps .surfdoc-data. */
.surfdoc-data { width: 100%; border-collapse: collapse; font-size: var(--font-size-caption); border: none; }
.surfdoc-data thead th { text-align: left; padding: 8px 12px; background: var(--surface-alt); border-bottom: 1px solid var(--border); font-weight: var(--font-weight-semibold); color: var(--text); white-space: nowrap; text-transform: none; letter-spacing: 0; font-size: var(--font-size-caption); }
.surfdoc-data thead th[aria-sort]::after { content: " ↕"; color: var(--text-muted); }
.surfdoc-data tbody td { padding: 8px 12px; border-bottom: 1px solid var(--border); color: var(--text); }
.surfdoc-data tbody tr:last-child td { border-bottom: none; }
.surfdoc-data tbody td.num { font-family: var(--font-mono); text-align: right; }

/* ============================================================
   27. SURFDOC CODE
   ============================================================ */

/* Reference look: <figure> shell with optional <figcaption> header (file + lang badge)
   and a <pre><code> body. Tolerant of missing head (no file/lang). */
.surfdoc-code { margin: 1.5rem 0; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.surfdoc-code-head { display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: var(--surface-alt); border-bottom: 1px solid var(--border); }
.surfdoc-code-head:empty { display: none; }
.surfdoc-code-file { font-family: var(--font-mono); font-size: var(--font-size-micro); color: var(--text); }
.surfdoc-code-lang { margin-left: auto; font-family: var(--font-mono); font-size: var(--font-size-micro); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-muted); padding: 1px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.surfdoc-code pre { margin: 0; padding: 12px 14px; background: var(--background); overflow-x: auto; }
.surfdoc-code code { font-family: var(--font-mono); font-size: var(--font-size-caption); line-height: 1.6; color: var(--text); white-space: pre; background: transparent; padding: 0; }
.surfdoc-code-hl { display: block; background: rgba(37, 99, 235, 0.14); box-shadow: inset 3px 0 0 var(--accent); margin: 0 -14px; padding: 0 14px; }
/* Back-compat: if markup still emits a bare <pre class="surfdoc-code" data-lang>, show a lang tag */
.surfdoc-code[data-lang]:not(:has(.surfdoc-code-head)) { position: relative; }
.surfdoc-code[data-lang]:not(:has(.surfdoc-code-head))::after { content: attr(data-lang); position: absolute; top: 0.5rem; right: 0.6rem; font-size: var(--font-size-micro); color: var(--text-muted); font-family: var(--font-mono); text-transform: uppercase; pointer-events: none; }

/* ============================================================
   28. SURFDOC TASK LISTS
   ============================================================ */

.surfdoc-tasks { list-style: none; margin: 1rem 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
/* Beat the generic `.surfdoc ul,.surfdoc ol { padding-left:1.5rem }` rule (same
   specificity, defined earlier) so the task list isn't indented 24px — the
   reference `.sd-tasks` has zero left padding. */
ul.surfdoc-tasks { padding-left: 0; }
.surfdoc-task { display: flex; align-items: center; gap: 10px; padding: 6px 4px; font-size: var(--font-size-ui); color: var(--text); }
.surfdoc-check { flex-shrink: 0; width: 16px; height: 16px; border: 1.5px solid var(--text-muted); border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; font-size: var(--font-size-micro); line-height: 1; color: #fff; }
.surfdoc-task.is-done .surfdoc-check { background: var(--success); border-color: var(--success); }
.surfdoc-task.is-done .surfdoc-task-text { color: var(--text-muted); text-decoration: line-through; }
.surfdoc-task-text { flex: 1; }
.surfdoc-assignee { font-family: var(--font-mono); font-size: var(--font-size-micro); color: var(--accent); padding: 1px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
/* Back-compat: legacy <li> with native checkbox + .assignee span */
.surfdoc-tasks li:not(.surfdoc-task) { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.25rem; font-size: var(--font-size-ui); }
.surfdoc-tasks input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }
.surfdoc-tasks .assignee { color: var(--accent); font-size: var(--font-size-micro); margin-left: auto; }

/* ============================================================
   29. SURFDOC DECISION RECORDS
   ============================================================ */

/* Reference look: bordered card on soft surface, head row with status pill + date,
   body paragraph(s), optional deciders meta footer. Tolerant of missing date/meta. */
.surfdoc-decision { padding: 14px 16px; margin: 1.5rem 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-alt); }
.surfdoc-decision-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
/* B0 status pill: .surfdoc-decision-status + --accepted/--proposed/--rejected */
.surfdoc-decision-status, .surfdoc-decision .status { display: inline-block; font-family: var(--font-mono); font-size: var(--font-size-micro); font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-wide); padding: 2px 8px; border-radius: var(--radius-sm); color: #fff; }
.surfdoc-decision-date, .surfdoc-decision .date { font-family: var(--font-mono); font-size: var(--font-size-micro); color: var(--text-muted); }
.surfdoc-decision-body p, .surfdoc-decision > p { margin: 0; font-size: var(--font-size-ui); line-height: 1.6; color: var(--text); }
.surfdoc-decision-body p + p, .surfdoc-decision > p + p { margin-top: 0.5rem; }
.surfdoc-decision-meta { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); font-size: var(--font-size-micro); color: var(--text-muted); }
.surfdoc-decision-meta:empty { display: none; }
/* Status variants (B0 double-dash + legacy single-dash wrapper variant) */
.surfdoc-decision-status--accepted, .surfdoc-decision-accepted .status { background: var(--success); }
.surfdoc-decision-status--proposed, .surfdoc-decision-proposed .status { background: var(--warning); color: #1a1205; }
.surfdoc-decision-status--rejected, .surfdoc-decision-rejected .status { background: var(--danger); }
.surfdoc-decision-status--superseded, .surfdoc-decision-superseded .status { background: var(--text-muted); }

/* ============================================================
   30. SURFDOC METRICS
   ============================================================ */

/* Reference look: flex row of metric cards; value+unit on line 1, label+trend on line 2. */
.surfdoc-metric-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 1rem 0; }
.surfdoc-metric { flex: 1; min-width: 120px; padding: 14px 16px; margin: 0.5rem 0.5rem 0.5rem 0; border: var(--ws-border-w) var(--ws-border-style) var(--border); border-radius: var(--ws-radius-card); box-shadow: var(--ws-shadow); background: var(--surface-alt); }
.surfdoc-metric-row .surfdoc-metric { margin: 0; }
.surfdoc-metric-value { font-size: var(--font-size-h1); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-tight); line-height: 1.1; color: var(--text); }
.surfdoc-metric-unit { font-size: var(--font-size-ui); font-weight: var(--font-weight-medium); color: var(--text-muted); }
.surfdoc-metric-label { margin-top: 6px; font-size: var(--font-size-caption); color: var(--text-muted); display: flex; align-items: center; gap: 8px; }
.surfdoc-trend { font-size: var(--font-size-micro); font-weight: var(--font-weight-semibold); }
.surfdoc-trend--up, .surfdoc-trend.up { color: var(--success); }
.surfdoc-trend--down, .surfdoc-trend.down { color: var(--danger); }
.surfdoc-trend--flat, .surfdoc-trend.flat { color: var(--text-muted); }
/* Back-compat: legacy inline metric with nested .label/.value/.unit/.trend */
.surfdoc-metric .label { color: var(--text-muted); font-size: var(--font-size-caption); font-weight: var(--font-weight-medium); }
.surfdoc-metric .value { font-size: var(--font-size-h2); font-weight: var(--font-weight-bold); color: var(--text); }
.surfdoc-metric .unit { color: var(--text-muted); font-size: var(--font-size-caption); }
.surfdoc-metric .trend { font-size: var(--font-size-ui); }
.surfdoc-metric .trend.up { color: var(--success); }
.surfdoc-metric .trend.down { color: var(--danger); }
.surfdoc-metric .trend.flat { color: var(--text-muted); }

/* ============================================================
   31. SURFDOC SUMMARIES
   ============================================================ */

.surfdoc-summary { padding: 14px 16px; margin: 1.5rem 0; border: var(--ws-border-w) var(--ws-border-style) color-mix(in srgb, var(--accent) 28%, var(--border)); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); border-radius: var(--ws-radius-card); box-shadow: var(--ws-shadow); }
.surfdoc-summary-label { font-family: var(--font-mono); font-size: var(--font-size-micro); font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--accent); margin-bottom: 4px; }
.surfdoc-summary p { margin: 0; font-size: var(--font-size-ui); font-style: italic; line-height: 1.55; color: var(--text); }

/* ============================================================
   32. SURFDOC FIGURES
   ============================================================ */

/* Reference look (.sd-figure): 16/9 placeholder box that renders cleanly even
   when the image 404s; caption below centred in micro text. */
.surfdoc-figure { margin: 1.5rem 0; text-align: center; }
.surfdoc-figure-img {
    aspect-ratio: 16 / 9; display: grid; place-items: center;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    overflow: hidden;
    position: relative;
}
.surfdoc-figure-img img { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; }
/* Show image-placeholder icon when img is hidden (onerror removes it from flow) */
.surfdoc-figure-img::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%236b7388' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E");
    display: block;
    z-index: 0;
}
.surfdoc-figure-cap, .surfdoc-figure figcaption { margin-top: 6px; font-size: var(--font-size-micro); color: var(--text-muted); font-style: normal; text-align: center; }

/* ============================================================
   33. SURFDOC UNKNOWN BLOCKS
   ============================================================ */

.surfdoc-unknown { padding: 0.75rem 1rem; margin: 1.5rem 0; background: transparent; border: 1px dashed var(--border); border-radius: var(--radius-sm); color: var(--text-muted); font-size: var(--font-size-ui); }

/* ============================================================
   34. SURFDOC TABS
   ============================================================ */

/* Reference look (.sd-tabs): a flex bar of sharp pill-buttons; active tab gets
   accent background. Panel content below in ui-size text. */
.surfdoc-tabs { margin: 1.5rem 0; }
.surfdoc-tabs nav {
    display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px;
    background: transparent; border: none;
}
.surfdoc-tabs nav button {
    height: 30px; padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-alt); color: var(--text-muted);
    font-size: var(--font-size-ui); font-weight: var(--font-weight-medium);
    cursor: pointer; font-family: inherit;
}
.surfdoc-tabs nav button:hover { color: var(--text); border-color: var(--text-muted); }
.surfdoc-tabs nav button.active {
    background: var(--accent); border-color: var(--accent); color: #fff;
    font-weight: var(--font-weight-semibold);
}
.surfdoc-tabs .tab-panel {
    font-size: var(--font-size-ui); line-height: 1.55; color: var(--text);
    display: none;
}
.surfdoc-tabs .tab-panel p { margin: 0; }
.surfdoc-tabs .tab-panel.active { display: block; }

/* ============================================================
   35. SURFDOC COLUMNS
   ============================================================ */

/* Reference look (.sd-columns): tight 12px gap, each column is a soft bordered
   card. h4 inside a column is a small-caps caption heading. */
.surfdoc-columns { display: grid; gap: 12px; margin: 1.25rem 0; }
/* Default: 2-col (most common). data-cols from the block attr overrides. */
.surfdoc-columns:not([data-cols]) { grid-template-columns: repeat(2, 1fr); }
.surfdoc-columns[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.surfdoc-columns[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.surfdoc-columns[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.surfdoc-column {
    min-width: 0;
    padding: 12px 14px;
    font-size: var(--font-size-ui); line-height: 1.55;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
}
.surfdoc-column h4 { margin: 0 0 6px; font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); }
.surfdoc-column p { margin: 0; color: var(--text-muted); }

/* ============================================================
   36. SURFDOC QUOTES
   ============================================================ */

/* Reference look: blockquote root with left border; <p> body; quote-by attribution.
   Works whether root is <blockquote> or a wrapper containing a nested <blockquote>.
   The `blockquote.surfdoc-quote` selector (0,1,1) is needed to beat the generic
   `.surfdoc blockquote` rule (0,1,1, defined earlier) when the quote root is itself
   a <blockquote> — otherwise that generic rule forces padding-left:1.5rem (24px)
   and color:--text-muted, diverging from the reference's 16px pad + full-text color. */
.surfdoc-quote { margin: 1.5rem 0; padding: 8px 0 8px 16px; border-left: 3px solid var(--border); font-style: normal; background: none; color: var(--text); }
blockquote.surfdoc-quote { padding: 8px 0 8px 16px; color: var(--text); }
.surfdoc-quote p { font-style: normal; }
.surfdoc-quote p { margin: 0; font-size: var(--font-size-body-lg); line-height: 1.5; color: var(--text); }
.surfdoc-quote blockquote { border: none; padding: 0; margin: 0; background: none; font-size: var(--font-size-body-lg); font-style: italic; color: var(--text); line-height: 1.6; }
.surfdoc-quote-by, .surfdoc-quote .attribution { margin-top: 8px; font-size: var(--font-size-caption); color: var(--text-muted); font-style: normal; }
.surfdoc-quote-by cite, .surfdoc-quote .attribution cite { font-style: normal; }
.surfdoc-quote-by::before, .surfdoc-quote .attribution::before { content: "\2014\00a0"; }

/* ============================================================
   37. SURFDOC CTA BUTTONS
   ============================================================ */

/* CTA group — centers consecutive CTA buttons */
.surfdoc .surfdoc-cta-group { text-align: center; margin: 1rem 0; }

/* .surfdoc .surfdoc-cta (0,2,0) beats .surfdoc a (0,1,1) by specificity, matches <a> and <button> */
.surfdoc .surfdoc-cta { display: inline-block; padding: 0.625rem 1.5rem; margin: 0.5rem; border-radius: var(--ws-cta-radius); font-weight: var(--font-weight-semibold); font-size: var(--font-size-body); text-decoration: none; cursor: pointer; border: none; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; }
.surfdoc > .surfdoc-cta { display: block; width: fit-content; margin: 1rem auto; text-align: center; }
.surfdoc .surfdoc-cta-primary { background: var(--accent); color: var(--accent-text, #fff); border: 1px solid var(--accent); }
.surfdoc .surfdoc-cta-primary:hover { background: var(--accent-hover); color: #fff; text-decoration: none; }
.surfdoc .surfdoc-cta-secondary { background: var(--surface-alt); color: var(--accent-ink, var(--accent)); border: 1px solid var(--border); }
.surfdoc .surfdoc-cta-secondary:hover { border-color: var(--text-muted); color: var(--accent-ink, var(--accent)); text-decoration: none; }

/* ============================================================
   38. SURFDOC HERO IMAGE
   ============================================================ */

.surfdoc-hero-image { margin: 2rem 0; text-align: center; }
.surfdoc-hero-image img { max-width: 100%; border-radius: var(--ws-radius-img); border: var(--ws-border-w) var(--ws-border-style) var(--border); }

/* ============================================================
   39. SURFDOC TESTIMONIALS
   ============================================================ */

/* Reference look (.sd-testimonial): quoted blockquote (not italic) + a
   figcaption with an accent initials-avatar and name/role meta. */
.surfdoc-testimonial { padding: 20px 24px; margin: 1.5rem 0; background: var(--surface-alt); border: var(--ws-border-w) var(--ws-border-style) var(--border); border-radius: var(--ws-radius-card); box-shadow: var(--ws-shadow); }
.surfdoc-testimonial blockquote { border: none; background: none; padding: 0; margin: 0 0 12px; font-size: var(--font-size-body-lg); font-style: normal; color: var(--text); line-height: 1.6; }
.surfdoc-testimonial-by { display: flex; align-items: center; gap: 10px; }
.surfdoc-testimonial-avatar { flex-shrink: 0; width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-circle); background: var(--accent); color: #fff; font-size: var(--font-size-caption); font-weight: var(--font-weight-bold); }
.surfdoc-testimonial-meta { font-size: var(--font-size-caption); line-height: 1.35; color: var(--text); }
.surfdoc-testimonial-meta strong { font-size: var(--font-size-ui); }
.surfdoc-testimonial-meta span { color: var(--text-muted); }

/* ============================================================
   40. SURFDOC STYLE & SITE (invisible metadata)
   ============================================================ */

.surfdoc-style { display: none; }
.surfdoc-site { display: none; }

/* ============================================================
   41. SURFDOC FAQ ACCORDION
   ============================================================ */

.surfdoc-faq { display: flex; flex-direction: column; gap: 6px; margin: 1rem 0; }
.surfdoc-faq-item, .surfdoc-faq details { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.surfdoc-faq-item summary, .surfdoc-faq summary { cursor: pointer; list-style: none; padding: 10px 14px; font-size: var(--font-size-ui); font-weight: var(--font-weight-semibold); color: var(--text); display: flex; align-items: center; gap: 8px; }
.surfdoc-faq-item summary::-webkit-details-marker, .surfdoc-faq summary::-webkit-details-marker { display: none; }
.surfdoc-faq-item summary::after, .surfdoc-faq summary::after { content: "+"; margin-left: auto; color: var(--text-muted); font-size: var(--font-size-body-lg); }
.surfdoc-faq-item[open] summary::after, .surfdoc-faq details[open] summary::after { content: "\2212"; }
.surfdoc-faq summary:hover { color: var(--accent-ink, var(--accent)); }
.surfdoc-faq-answer, .surfdoc-faq .faq-answer { padding: 0 14px 12px; font-size: var(--font-size-caption); line-height: 1.55; color: var(--text-muted); }
.surfdoc-faq-answer p, .surfdoc-faq .faq-answer p { margin: 0; }

/* ============================================================
   42. SURFDOC PRICING TABLE
   ============================================================ */

/* Reference look (.sd-pricing): a grid of tier CARDS. Featured tier gets an
   accent border. Price `/suffix` renders muted; features are a bulleted list. */
.surfdoc-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 1.5rem 0; }
.surfdoc-tier { padding: 24px; border: var(--ws-border-w) var(--ws-border-style) var(--border); border-radius: var(--ws-radius-card); box-shadow: var(--ws-shadow); background: var(--ws-feature-card-bg); display: flex; flex-direction: column; gap: 10px; }
.surfdoc-tier-featured { border-color: var(--accent); box-shadow: var(--ws-shadow-hover); background: color-mix(in srgb, var(--accent) 5%, var(--ws-feature-card-bg)); }
.surfdoc-tier-name { font-size: var(--font-size-micro); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-weight: var(--font-weight-semibold); color: var(--text-muted); }
.surfdoc-tier-price { font-size: var(--font-size-h1); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-tight); color: var(--text); }
.surfdoc-tier-price span { font-size: var(--font-size-ui); font-weight: var(--font-weight-regular); color: var(--text-muted); }
.surfdoc-tier ul { margin: 0; padding-left: 16px; font-size: var(--font-size-caption); color: var(--text-muted); line-height: 1.7; flex: 1; }
/* Subscribe CTA — present on every tier; margin-top:auto pins it to the card
   bottom so all CTAs align regardless of feature-list length. Featured tier =
   primary fill (pack-reactive via --ws-btn-*); other tiers = outline. */
.surfdoc .surfdoc-tier-cta { display: block; margin-top: auto; padding: 0.6rem 1rem; border-radius: var(--ws-control-radius, var(--radius-sm)); text-align: center; font-size: var(--font-size-ui); font-weight: var(--font-weight-semibold); text-decoration: none; cursor: pointer; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; border: var(--ws-border-w) var(--ws-border-style) var(--ws-btn-border); }
.surfdoc .surfdoc-tier-cta-primary { background: var(--ws-btn-bg); color: var(--ws-btn-color); }
.surfdoc .surfdoc-tier-cta-primary:hover { filter: brightness(0.94); text-decoration: none; }
.surfdoc .surfdoc-tier-cta-secondary { background: var(--surface); color: var(--accent-ink, var(--accent)); border-color: var(--border); }
.surfdoc .surfdoc-tier-cta-secondary:hover { border-color: var(--text-muted); text-decoration: none; }

/* ============================================================
   43. SURFDOC PAGES
   ============================================================ */

.surfdoc-page { margin: 2rem 0; padding: 2rem 0; border-top: 2px solid var(--border); }
.surfdoc-page:first-of-type { border-top: none; margin-top: 0; }
.surfdoc-page[data-layout="hero"] { text-align: center; padding: 4rem 0; }
.surfdoc-page[data-layout="hero"] h1 { font-size: 2.5rem; margin-bottom: 1rem; }
.surfdoc-page[data-layout="hero"] p { font-size: 1.15rem; color: var(--text-muted); max-width: 36rem; margin: 0 auto 1.5rem; }
.surfdoc-page[data-layout="hero"] .surfdoc-cta { margin: 0.5rem; }
.surfdoc-page[data-layout="cards"] { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.surfdoc-page[data-layout="split"] { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }

/* ============================================================
   44. SURFDOC EMBEDS
   ============================================================ */

/* Reference look (.sd-embed): compact link-card — icon + title + src text.
   No iframe so unembeddable URLs (youtu.be/xyz etc.) render cleanly. */
.surfdoc-embed {
    display: flex; gap: 12px; align-items: center;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
    margin: 1.5rem 0;
}
.surfdoc-embed-icon {
    flex-shrink: 0; width: 52px; height: 36px;
    display: grid; place-items: center;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text-muted);
}
.surfdoc-embed-body { min-width: 0; }
.surfdoc-embed-title { font-size: var(--font-size-ui); font-weight: var(--font-weight-semibold); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.surfdoc-embed-src { font-family: var(--font-mono); font-size: var(--font-size-micro); color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Generic iframe embeds (e.g. ::embed[src=...policy-viewer height=80vh]) —
   responsive, full-width, inline-rendered content. */
.surfdoc-embed-frame { display: block; width: 100%; max-width: 100%; margin: 1.5rem 0; border: 0; border-radius: var(--radius-sm); background: #fff; }

/* ============================================================
   45. SURFDOC FORMS
   ============================================================ */

/* Reference look (.sd-form): flex-column form, labels as micro uppercase,
   inputs below their label, accent submit button flush-start. */
.surfdoc-form { display: flex; flex-direction: column; gap: 10px; margin: 1.5rem 0; }
.surfdoc-form-field {
    display: flex; flex-direction: column; gap: 4px;
    font-size: var(--font-size-micro); font-weight: var(--font-weight-semibold);
    text-transform: uppercase; letter-spacing: var(--tracking-wide);
    color: var(--text-muted);
}
.surfdoc-form-field label {
    display: flex; flex-direction: row; align-items: baseline; gap: 4px;
    font-size: var(--font-size-micro); font-weight: var(--font-weight-semibold);
    text-transform: uppercase; letter-spacing: var(--tracking-wide);
    color: var(--text-muted);
}
.surfdoc-form-field .required { color: var(--danger); }
.surfdoc-form-field input, .surfdoc-form-field textarea, .surfdoc-form-field select {
    font-family: var(--font-sans); font-size: var(--font-size-ui);
    font-weight: var(--font-weight-regular); text-transform: none; letter-spacing: 0;
    padding: 8px 10px;
    border: var(--ws-border-w) var(--ws-border-style) var(--border);
    border-radius: var(--ws-control-radius, var(--radius-sm));
    background: var(--ws-form-input-bg, var(--surface)); color: var(--text);
    width: 100%; outline: none;
}
.surfdoc-form-field input:focus, .surfdoc-form-field textarea:focus, .surfdoc-form-field select:focus { border-color: var(--accent); }
.surfdoc-form-field select { appearance: auto; }
.surfdoc-form-submit {
    align-self: flex-start;
    height: 36px; padding: 0 16px;
    border: var(--ws-border-w) var(--ws-border-style) var(--ws-btn-border);
    border-radius: var(--ws-form-submit-radius, var(--ws-control-radius, var(--radius-sm)));
    background: var(--ws-btn-bg); color: var(--ws-btn-color);
    font-size: var(--font-size-ui); font-weight: var(--font-weight-semibold);
    font-family: inherit; cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease, filter 120ms ease;
}
.surfdoc-form-submit:hover { filter: brightness(0.94); }

/* ============================================================
   46. SURFDOC GALLERY
   ============================================================ */

/* Reference look (.sd-gallery): square tiles in a CSS-var grid; each tile is a
   bordered placeholder (image hidden behind onerror) with a centered icon. */
.surfdoc-gallery { margin: 1.5rem 0; }
.surfdoc-gallery-filters { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.surfdoc-gallery-filters .filter-btn { padding: 0.375rem 0.875rem; border: 1px solid var(--border); background: transparent; color: var(--text-muted); border-radius: var(--radius-sm); font-size: var(--font-size-caption); cursor: pointer; }
.surfdoc-gallery-filters .filter-btn:hover { color: var(--text); border-color: var(--text-muted); }
.surfdoc-gallery-filters .filter-btn.active { background: var(--accent); color: var(--accent-text, #fff); border-color: var(--accent); }
/* Grid uses custom property so JS filter can change cols without touching the grid class */
.surfdoc-gallery-grid { display: grid; gap: 8px; }
.surfdoc-gallery[data-cols="2"] .surfdoc-gallery-grid { grid-template-columns: repeat(2, 1fr); }
.surfdoc-gallery[data-cols="3"] .surfdoc-gallery-grid { grid-template-columns: repeat(3, 1fr); }
.surfdoc-gallery[data-cols="4"] .surfdoc-gallery-grid { grid-template-columns: repeat(4, 1fr); }
.surfdoc-gallery-item {
    margin: 0; cursor: pointer;
    /* Square tile — matches .sd-gallery-tile aspect-ratio:1 */
    aspect-ratio: 1;
    display: grid; place-items: center;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    overflow: hidden;
    position: relative;
}
.surfdoc-gallery-item img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    position: absolute; inset: 0;
}
/* Placeholder icon when image is hidden/missing */
.surfdoc-gallery-item::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236b7388' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E");
    display: block;
    z-index: 0;
}
.surfdoc-gallery-item figcaption { display: none; /* captions shown in lightbox */ }

/* Broken/missing image fallback — onerror adds .broken class */
img.broken { display: flex !important; align-items: center; justify-content: center; min-height: 120px; background: var(--surface); border: 1px dashed var(--border); color: var(--text-muted); font-size: 0.85rem; text-align: center; position: relative; overflow: hidden; }
img.broken::before { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2' ry='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/%3E%3C/svg%3E"); display: block; position: absolute; top: calc(50% - 28px); left: 50%; transform: translateX(-50%); }
img.broken::after { content: attr(alt); display: block; position: absolute; bottom: 0; left: 0; right: 0; padding: 0.5rem; background: rgba(0,0,0,0.4); color: var(--text-muted); font-size: 0.75rem; }

/* Gallery Lightbox */
.surfdoc-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.92); display: flex; align-items: center; justify-content: center; flex-direction: column; }
.surfdoc-lightbox[hidden] { display: none; }
.surfdoc-lightbox .sl-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; color: #fff; font-size: 2rem; cursor: pointer; z-index: 2; width: 44px; height: 44px; line-height: 44px; text-align: center; }
.surfdoc-lightbox .sl-prev, .surfdoc-lightbox .sl-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.1); border: none; color: #fff; font-size: 2.5rem; cursor: pointer; z-index: 2; width: 48px; height: 64px; border-radius: var(--radius-sm); }
.surfdoc-lightbox .sl-prev:hover, .surfdoc-lightbox .sl-next:hover { background: rgba(255,255,255,0.2); }
.surfdoc-lightbox .sl-prev { left: 1rem; }
.surfdoc-lightbox .sl-next { right: 1rem; }
.surfdoc-lightbox .sl-img-wrap { max-width: 90vw; max-height: 80vh; display: flex; align-items: center; justify-content: center; }
.surfdoc-lightbox .sl-img { max-width: 90vw; max-height: 80vh; object-fit: contain; border-radius: var(--radius-sm); }
.surfdoc-lightbox .sl-caption { color: #fff; text-align: center; padding: 0.75rem 1rem; font-size: 0.9rem; max-width: 600px; opacity: 0.85; }
.surfdoc-lightbox .sl-counter { color: rgba(255,255,255,0.5); font-size: 0.75rem; margin-top: 0.25rem; }
@media (max-width: 640px) {
  .surfdoc-lightbox .sl-prev, .surfdoc-lightbox .sl-next { display: none; }
}

/* ============================================================
   47. SURFDOC FOOTER
   ============================================================ */

/* Reference look (.sd-footer-block): compact inline card with flex-wrap columns.
   Headings are <strong> (not <h4>) so they don't enter the TOC. */
.surfdoc-footer {
    display: flex; flex-wrap: wrap; gap: 24px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
    margin: 2rem 0;
}
.surfdoc-footer-sections { display: contents; }
.surfdoc-footer-col { display: flex; flex-direction: column; gap: 5px; }
.surfdoc-footer-col-head {
    font-size: var(--font-size-micro); font-weight: var(--font-weight-semibold);
    text-transform: uppercase; letter-spacing: var(--tracking-wide);
    color: var(--text-muted); display: block; margin-bottom: 2px;
}
/* Legacy h4 inside footer col (pre-fix) */
.surfdoc-footer-col h4 { font-size: var(--font-size-micro); font-weight: var(--font-weight-semibold); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); margin: 0 0 2px; }
.surfdoc-footer-col ul { list-style: none; padding: 0; margin: 0; }
.surfdoc-footer-col li { margin: 0; }
.surfdoc-footer-col a { color: var(--text); text-decoration: none; font-size: var(--font-size-caption); }
.surfdoc-footer-col a:hover { color: var(--accent); text-decoration: none; }
.surfdoc-footer-social { display: flex; gap: 1rem; }
.surfdoc-footer-social .social-link { color: var(--text-muted); text-decoration: none; font-size: var(--font-size-ui); text-transform: capitalize; }
.surfdoc-footer-social .social-link:hover { color: var(--accent); }
.surfdoc-footer-copyright { width: 100%; font-size: var(--font-size-micro); color: var(--text-muted); }

/* ============================================================
   48. SURFDOC DETAILS / COLLAPSIBLE
   ============================================================ */

/* Reference look: bordered card on soft surface, summary with rotating chevron,
   body indented. Supports both B0 names (-summary / -body) and legacy bare summary / -content. */
.surfdoc-details { margin: 1.25rem 0; border: 1px solid var(--border); border-radius: var(--ws-details-radius, var(--radius-sm)); background: var(--ws-details-bg, var(--surface-alt)); overflow: hidden; }
.surfdoc-details-summary, .surfdoc-details > summary { cursor: pointer; list-style: none; padding: 10px 14px; font-weight: var(--font-weight-semibold); color: var(--text); font-size: var(--font-size-ui); display: flex; align-items: center; gap: 8px; }
.surfdoc-details-summary::-webkit-details-marker, .surfdoc-details > summary::-webkit-details-marker { display: none; }
.surfdoc-details-summary::before, .surfdoc-details > summary::before { content: "\203A"; font-size: var(--font-size-body-lg); line-height: 1; color: var(--text-muted); transition: transform 150ms ease; }
.surfdoc-details[open] .surfdoc-details-summary::before, .surfdoc-details[open] > summary::before { transform: rotate(90deg); }
.surfdoc-details-body { padding: 0 14px 12px 30px; font-size: var(--font-size-ui); line-height: 1.55; color: var(--text); }
/* Give stacked paragraphs/lists real spacing instead of collapsing to zero
   (multi-paragraph detail bodies were crowded); the last child stays flush so
   the body padding isn't doubled. */
.surfdoc-details-body p { margin: 0 0 10px; }
.surfdoc-details-body p:last-child { margin-bottom: 0; }
.surfdoc-details-body ul, .surfdoc-details-body ol { margin: 0 0 10px; }
.surfdoc-details-body ul:last-child, .surfdoc-details-body ol:last-child { margin-bottom: 0; }
.surfdoc-details-content { padding: 0 14px 12px 30px; font-size: var(--font-size-ui); line-height: 1.55; color: var(--text); }

/* ============================================================
   49. SURFDOC DIVIDERS
   ============================================================ */

/* Reference look (.sd-divider): two flex rules flanking a mono-font label. */
.surfdoc-divider { display: flex; align-items: center; gap: 12px; margin: 2rem 0; color: var(--text-muted); }
.surfdoc-divider::before, .surfdoc-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.surfdoc-divider > span { font-family: var(--font-mono); font-size: var(--font-size-micro); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.surfdoc-divider-plain { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }


/* ============================================================
   50. SURFDOC HERO
   ============================================================ */

/* Reference look (.sd-hero): blue→purple gradient panel + white text, sharp radius.
   The default (centered) hero is the gradient panel; the `-left` variant is the
   side-by-side image layout, which keeps the page background + dark text. */
.surfdoc-hero { margin: 1.5rem 0; padding: clamp(3.5rem, 7vw, 5rem) 2rem; border-radius: var(--ws-radius-card); box-shadow: var(--ws-shadow); overflow: hidden; background: linear-gradient(135deg, var(--accent), #7c3aed); background: var(--ws-hero-bg); background-size: cover; background-position: center; color: #fff; text-align: center; }
.surfdoc-hero-left { text-align: left; background: none; color: var(--text); padding: 0.5rem 0 1.5rem; border-radius: 0; }

/* ── Full-bleed centered hero (home-page header) ────────────────────────────
   The centered (gradient/banner/image) hero is a full-width band: it breaks
   out of the 48rem reading column to the viewport edges (100vw technique — no
   clipping ancestor, see §22). Inner content stays centered + readable via
   .surfdoc-hero-inner. The `-left` side-by-side content hero is exempt (it
   lives in the column with its image). */
.surfdoc-hero:not(.surfdoc-hero-left) {
    width: var(--ws-bleed-width); max-width: var(--ws-bleed-width);
    margin-left: var(--ws-bleed-margin); margin-right: var(--ws-bleed-margin);
    border-radius: 0; padding: var(--ws-section-pad) 2rem;
}
/* The first block on a page touches the TOP edge: drop the reading column's
   first-page top padding and pull the hero up over the container's own top
   padding (2rem), so a home-page header runs flush to the top (under the nav)
   and edge-to-edge. */
.surfdoc > .surfdoc-page:first-child { padding-top: 0; }
.surfdoc > .surfdoc-page:first-child > .surfdoc-hero:not(.surfdoc-hero-left):first-child,
.surfdoc > .surfdoc-hero:not(.surfdoc-hero-left):first-child { margin-top: -2rem; }
/* When a hero carries a background image, darken it so white text stays
   legible (image set inline as `background-image` by the renderer/author). */
.surfdoc-hero[style*="background-image"]::before,
.surfdoc-hero[data-bg]::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(15,23,42,0.35), rgba(15,23,42,0.6));
    z-index: 0;
}
.surfdoc-hero { position: relative; }
.surfdoc-hero-inner { position: relative; z-index: 1; }
/* layout=cover — the image IS the hero background (home-page header): give it
   presence and vertically center the headline over it. */
.surfdoc-hero-cover { min-height: min(74vh, 44rem); display: flex; align-items: center; justify-content: center; padding-top: 6rem; padding-bottom: 6rem; }
.surfdoc-hero-inner { max-width: 640px; margin: 0 auto; }
.surfdoc-hero-left .surfdoc-hero-inner { margin: 0; max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.surfdoc-hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; border: var(--ws-border-w) var(--ws-border-style) rgba(255,255,255,0.5); background: rgba(255,255,255,0.14); border-radius: var(--ws-radius-chip); padding: 0.25rem 0.75rem; font-size: var(--font-size-micro); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: #fff; margin-bottom: 1.5rem; }
.surfdoc-hero-left .surfdoc-hero-badge { border-color: var(--border); background: transparent; color: var(--text-muted); text-transform: none; }
/* .surfdoc prefix → (0,2,0) beats `.surfdoc h1` (0,1,1) so the headline goes white. */
.surfdoc .surfdoc-hero-headline { font-family: var(--ws-font-display); font-size: clamp(2rem, 4.5vw, 3rem); font-weight: var(--ws-heading-weight, var(--font-weight-black)); font-style: var(--ws-heading-style); text-transform: var(--ws-heading-transform); color: #fff; line-height: 1.05; margin: 0 0 0.75rem; letter-spacing: var(--ws-heading-tracking, var(--tracking-tight)); }
.surfdoc .surfdoc-hero-left .surfdoc-hero-headline { color: var(--text); }
.surfdoc .surfdoc-hero-subtitle { font-size: var(--font-size-h3); color: rgba(255,255,255,0.92); line-height: 1.6; margin: 0 0 1.5rem; max-width: 560px; }
.surfdoc-hero-left .surfdoc-hero-subtitle { color: var(--text-muted); }
.surfdoc-hero:not(.surfdoc-hero-left) .surfdoc-hero-subtitle { margin-left: auto; margin-right: auto; }
.surfdoc-hero-actions { display: flex; gap: 0.75rem; flex-wrap: nowrap; }
.surfdoc-hero:not(.surfdoc-hero-left) .surfdoc-hero-actions { justify-content: center; }
.surfdoc-hero-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.8rem 1.6rem; border-radius: var(--ws-hero-btn-radius); font-size: var(--font-size-body); font-weight: 700; text-decoration: none; white-space: nowrap; min-height: 44px; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; }
/* .surfdoc prefix bumps specificity to (0,2,0), beating .surfdoc a (0,1,1) link color.
   On the gradient: primary = white fill / accent text, secondary = translucent white. */
.surfdoc .surfdoc-hero-btn-primary { background: #fff; color: var(--accent); border: 1px solid #fff; }
/* Hover darkens the resting fill (whatever it is) instead of forcing it toward
   white. The old `background: rgba(255,255,255,0.9)` only read as feedback on the
   dark gradient hero and looked broken on transparent/light/accent-filled heroes.
   `filter: brightness()` darkens the gradient-hero white button (light gray) AND
   an accent-filled transparent-hero button, so consumers need no override. */
.surfdoc .surfdoc-hero-btn-primary:hover { color: var(--accent); filter: brightness(0.94); }
.surfdoc .surfdoc-hero-btn-secondary { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.6); }
.surfdoc .surfdoc-hero-btn-secondary:hover { background: rgba(255,255,255,0.2); }
/* Button/card anchors are <a> inside .surfdoc, so the prose `.surfdoc a:hover`
   underline (0,2,1) would otherwise win. Suppress it at (0,2,0)+ for every
   button/card anchor, resting and hover. */
.surfdoc .surfdoc-hero-btn, .surfdoc .surfdoc-hero-btn:hover,
.surfdoc .surfdoc-banner-btn, .surfdoc .surfdoc-banner-btn:hover,
.surfdoc .surfdoc-pg-card, .surfdoc .surfdoc-pg-card:hover,
.surfdoc a.surfdoc-feature-card, .surfdoc a.surfdoc-feature-card:hover,
.surfdoc a.surfdoc-event-card, .surfdoc a.surfdoc-event-card:hover { text-decoration: none; }
.surfdoc .surfdoc-hero-left .surfdoc-hero-btn-primary { background: var(--accent); color: var(--accent-text, #fff); border-color: var(--accent); }
.surfdoc .surfdoc-hero-left .surfdoc-hero-btn-primary:hover { background: var(--accent-hover); color: #fff; }
.surfdoc .surfdoc-hero-left .surfdoc-hero-btn-secondary { background: var(--surface-alt); color: var(--text); border-color: var(--border); }
.surfdoc .surfdoc-hero-left .surfdoc-hero-btn-secondary:hover { background: var(--surface-alt); border-color: var(--text-muted); }
/* Hero CTAs never stack — on phones the pair fits inline by compacting the
   pills with viewport-scaled type instead of wrapping (44px tap height
   stays). Declared after the base button rules so the compact size wins. */
@media (max-width: 480px) {
    .surfdoc-hero-actions { gap: 8px; }
    .surfdoc-hero-btn { font-size: clamp(11px, 3.4vw, var(--font-size-ui)); padding: 0.6rem clamp(0.6rem, 2.4vw, 1rem); }
}
.surfdoc-hero-image { margin-bottom: 1.5rem; }
.surfdoc-hero-image img { max-height: 280px; border-radius: var(--ws-radius-img); }
.surfdoc-hero-image-side { display: flex; align-items: center; justify-content: center; }
.surfdoc-hero-image-side img { max-width: 100%; border-radius: var(--ws-radius-img); border: var(--ws-border-w) var(--ws-border-style) var(--border); }

/* ---- ::banner — centered CTA band (defaults for the render_html block) ---- */
/* Structural geometry: the centered band, its inner column, the action row, and
   the shared button shape. Bare-class (0,1,0) so a consumer's theme/context rule
   can still override values; tokens fall back to the surfdoc :root defaults. */
.surfdoc-banner { border-top: none; }
.surfdoc-banner-inner { max-width: 720px; margin: 0 auto; padding: var(--ws-section-pad) var(--ws-space-md); text-align: center; }
/* A banner that introduces the band right under it (product grid / features /
   post grid) hugs its content: full top breath, compact bottom (apple.com
   rhythm — big gaps BETWEEN sections, tight gap inside one). */
.surfdoc-banner:has(+ .surfdoc-product-grid) .surfdoc-banner-inner,
.surfdoc-banner:has(+ .surfdoc-features) .surfdoc-banner-inner,
.surfdoc-banner:has(+ .surfdoc-post-grid) .surfdoc-banner-inner { padding-bottom: var(--ws-section-pad-compact); }
.surfdoc-banner-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.surfdoc-banner-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; border-radius: var(--ws-banner-btn-radius); font-weight: 700; font-size: 1rem; text-decoration: none; border: 1px solid transparent; transition: all 200ms ease; }
.surfdoc-banner-btn-secondary { border-color: var(--border); color: var(--text); }
/* The banner headline is an <h2>, so the prose `.surfdoc h2` rule (0,1,1) would
   force a section-divider border-bottom + large prose margins onto it. Banners
   are centered marketing bands, not doc sections — reset that at (0,2,0). */
.surfdoc .surfdoc-banner-headline { font-size: clamp(1.625rem, 3vw, 2rem); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-tight); margin: 0 0 14px; padding-bottom: 0; border-bottom: none; }
.surfdoc .surfdoc-banner-subtitle { color: var(--text-muted); font-size: var(--font-size-body-lg); line-height: 1.65; margin: 0 0 28px; }
/* Primary banner button: the prose `.surfdoc a` color (0,1,1) would paint the
   label the accent color — i.e. the button's own background, hiding the text.
   Pin an explicit on-accent label at (0,2,0). */
.surfdoc .surfdoc-banner-btn-primary { background: var(--accent); color: var(--accent-text, #fff); }
.surfdoc .surfdoc-banner-btn-primary:hover { color: var(--accent-text, #fff); filter: brightness(0.94); }

/* ---- ::product-grid — grouped emblem link-cards (defaults for the block) ---- */
/* Structural geometry: the band, its inner column, group label, the 2-col row
   (collapsing to 1 on mobile), the card and its body/emblem/name/tagline/arrow,
   and the base hover surface. Per-product accent colors + any frosted-glass skin
   are consumer concerns (set --product-accent / override the card background). */
.surfdoc-product-grid { border-top: none; }
/* The grid is a full-bleed band (capped at the site max) so its inner column
   can run wider than the 48rem reading column. */
.surfdoc-product-grid {
    width: var(--ws-bleed-width); max-width: var(--ws-bleed-width);
    margin-left: var(--ws-bleed-margin); margin-right: var(--ws-bleed-margin);
}
.surfdoc-pg-inner { max-width: var(--ws-pg-width, 880px); margin: 0 auto; padding: 0 var(--ws-space-md) var(--ws-section-pad); }
/* Consecutive grids read as one section: the leading grid keeps only a
   card-gap-sized breath before the next. */
.surfdoc-product-grid:has(+ .surfdoc-product-grid) .surfdoc-pg-inner { padding-bottom: var(--ws-space-md); }
.surfdoc-pg-label { font-size: 1.25rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; margin: var(--ws-space-lg) 0 var(--ws-space-sm); }
.surfdoc-pg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 8px; }
/* Material card treatment (surf.space lp-material reference): translucent
   surface, hairline border, larger radius + padding, no resting shadow —
   hover lifts and brightens the border instead. */
.surfdoc-pg-card { display: flex; align-items: center; gap: 20px; background: var(--ws-pg-card-bg, color-mix(in srgb, var(--surface) 72%, transparent)); border: 1px solid var(--border); border-radius: var(--ws-pg-card-radius, var(--ws-radius-card-lg, 20px)); padding: 28px 32px; color: var(--text); text-decoration: none; transition: background 200ms ease, border-color 200ms ease, transform 200ms ease; }
/* Odd trailing card centers under the pair instead of sticking left. */
.surfdoc-pg-row > .surfdoc-pg-card:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: calc(50% - 12px); margin-inline: auto; width: 100%; }
.surfdoc-pg-card:hover { background: var(--surface-hover); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .surfdoc-pg-card:hover { transform: none; } }
/* Linkless card (href `-`): a static div — no hover lift/tint, default cursor. */
.surfdoc-pg-card-static, .surfdoc .surfdoc-pg-card-static:hover { background: var(--ws-pg-card-bg, color-mix(in srgb, var(--surface) 72%, transparent)); border-color: var(--border); transform: none; cursor: default; }
.surfdoc-pg-body { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; }
.surfdoc-pg-emblem { border-radius: 8px; object-fit: contain; flex-shrink: 0; }
.surfdoc-pg-name { font-weight: 700; font-size: 1.125rem; display: block; }
.surfdoc-pg-tagline { font-size: 0.875rem; color: var(--text-muted); line-height: 1.4; margin-top: 2px; }
.surfdoc-pg-arrow { flex-shrink: 0; color: var(--text-muted); transition: transform 200ms ease, color 200ms ease; }
.surfdoc-pg-card:hover .surfdoc-pg-arrow { transform: translateX(2px); }
@media (max-width: 768px) {
  .surfdoc-pg-row { grid-template-columns: 1fr; }
  .surfdoc-pg-row > .surfdoc-pg-card:last-child:nth-child(odd) { max-width: 100%; }
  .surfdoc-banner-inner { padding: var(--ws-space-xl) var(--ws-space-sm); }
}
/* The card's accent-on-hover border is declared at (0,2,0) (`.surfdoc` prefix)
   so a context resting rule at the base card specificity can't silently outrank
   it and strand the hover border. Theme-scoped resting rules in a consumer
   (e.g. `[data-theme] .home .surfdoc-pg-card`) still need a matching hover rule
   of their own — see handoff. */
.surfdoc .surfdoc-pg-card:hover { border-color: var(--product-accent, var(--accent)); }
.surfdoc .surfdoc-pg-card:hover .surfdoc-pg-arrow { color: var(--product-accent, var(--accent)); }

/* ---- ::product-grid[tiles] — apple.com-style promo tiles ---- */
/* A 2-up band of tall square-corner tiles: centered copy at the top (name /
   tagline / CTA pill), per-card background (image/color/gradient/transparent
   via the bg field), tiny gaps, capped at the site max. An odd trailing tile
   spans the full row (the apple.com "big top tile" shape). */
.surfdoc-pg-tiles {
    display: flex;
    flex-direction: column;
    gap: var(--ws-space-sm);
    max-width: var(--ws-site-max);
    margin: 0 auto;
    padding: 0 var(--ws-space-sm) var(--ws-section-pad);
}
.surfdoc-pg-tiles-label { margin: var(--ws-space-lg) var(--ws-space-sm) 0; }
/* One row per group; {cols=N} (1–3) picks the row's columns, default 2. */
.surfdoc-pg-tiles-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ws-space-sm); }
.surfdoc-pg-tiles-row[data-cols="1"] { grid-template-columns: 1fr; }
.surfdoc-pg-tiles-row[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
/* In a default 2-col row an odd trailing tile spans the row (apple.com shape). */
.surfdoc-pg-tiles-row[data-cols="2"] > .surfdoc-pg-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
.surfdoc-pg-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Copy-only tiles center vertically; a media area (flex:1) or the
       copy-bottom auto margin absorbs the free space first, so those
       variants keep their layouts. */
    justify-content: center;
    min-height: clamp(400px, 42vw, 640px);
    padding: clamp(40px, 5vw, 64px) var(--ws-space-md) var(--ws-space-lg);
    background: transparent; /* color:/gradient: specs set their own; transparent tiles show the page background */
    color: var(--text);
    text-decoration: none;
    overflow: hidden;
    border-radius: var(--ws-pg-tile-radius, 0); /* square by spec; hosts round via the token */
    transition: opacity 200ms ease, box-shadow 200ms ease;
}
/* The tile is an <a>, so the prose `.surfdoc a` / `a:hover` rules (0,1,1)
   would paint the copy accent-blue and underline it on hover — pin the scheme
   at (0,2,0) for both variants. */
.surfdoc .surfdoc-pg-tile,
.surfdoc .surfdoc-pg-tile:hover { color: var(--text); text-decoration: none; }
/* An explicit background (image/color/gradient) doesn't follow the site theme,
   so its copy can't either: -bg pins dark ink; the ` dark` flag flips to white
   (declared after -bg so it wins at equal specificity). Transparent tiles keep
   the theme-following var(--text) above. */
.surfdoc .surfdoc-pg-tile-bg,
.surfdoc .surfdoc-pg-tile-bg:hover { color: #0f172a; }
.surfdoc .surfdoc-pg-tile-dark,
.surfdoc .surfdoc-pg-tile-dark:hover { color: #fff; }
/* ` theme` token: translucent explicit bg — the page backdrop dominates, so
   the ink follows the theme after all (declared last to win the tie). */
.surfdoc .surfdoc-pg-tile-theme,
.surfdoc .surfdoc-pg-tile-theme:hover { color: var(--text); }
.surfdoc-pg-tile-copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--ws-space-xs);
}
.surfdoc-pg-tile-emblem { width: 48px; height: 48px; object-fit: contain; margin-bottom: var(--ws-space-2xs); }
.surfdoc-pg-tile-emblem.broken { display: none; }
/* `icon:<name>` emblem — accent chip, same footprint as an image emblem
   (feature-icon treatment at tile scale). Centered: tile copy is centered. */
.surfdoc-pg-tile-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--ws-radius-img); background: var(--accent-soft); color: var(--accent); margin-bottom: var(--ws-space-2xs); align-self: center; }
.surfdoc-pg-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--ws-radius-img); background: var(--accent-soft); color: var(--accent); flex-shrink: 0; }
/* `surface` bg keyword — theme surface; ink keeps following the theme
   (no -bg pinning), so it works in both light and dark. Hosts re-skin the
   fill via --ws-tile-surface-bg (e.g. a translucent frosted value). */
.surfdoc-pg-tile-surface { background: var(--ws-tile-surface-bg, var(--surface)); border: 1px solid var(--border); }
/* (0,2,0) so the prose h3 rule can't impose doc margins/dividers. */
.surfdoc .surfdoc-pg-tile-name {
    font-family: var(--ws-font-display);
    font-size: clamp(1.75rem, 2.6vw, 2.5rem);
    font-weight: var(--ws-heading-weight, var(--font-weight-bold));
    letter-spacing: var(--ws-heading-tracking, var(--tracking-tight));
    line-height: 1.1;
    margin: 0;
    border: none;
    padding: 0;
    color: inherit;
}
.surfdoc .surfdoc-pg-tile-tagline { font-size: 1.0625rem; line-height: 1.5; margin: 0; color: inherit; opacity: 0.85; max-width: 36rem; }
/* Whole tile is the link; the pill is a visual affordance (surf.space/apple
   pill CTA). (0,2,0) pins the on-accent label against the global a:hover. */
.surfdoc .surfdoc-pg-tile-cta {
    margin-top: var(--ws-space-xs);
    padding: 8px 18px;
    border-radius: var(--ws-radius-chip);
    background: var(--product-accent, var(--accent));
    color: var(--accent-text, #fff);
    font-size: 0.875rem;
    font-weight: 700;
}
/* ` bottom` token: media on top, copy pushed to the tile bottom. */
.surfdoc-pg-tile-copy-bottom > .surfdoc-pg-tile-media { margin-top: 0; margin-bottom: var(--ws-space-md); }
.surfdoc-pg-tile-copy-bottom > .surfdoc-pg-tile-copy { margin-top: auto; }
.surfdoc-pg-tile-actions { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: var(--ws-space-xs); flex-wrap: nowrap; }
.surfdoc-pg-tile-actions .surfdoc-pg-tile-cta { margin-top: 0; }
/* The pills render ~40px tall; a transparent overlay stretches each one's
   hit area to the 44px accessible minimum without growing it visually. */
.surfdoc-pg-tile-cta { position: relative; }
.surfdoc-pg-tile-cta::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
/* Secondary pill: outline over the tile surface (apple "Buy" shape). (0,2,0)
   pins label + border against the global anchor rules in both schemes. */
.surfdoc .surfdoc-pg-tile-cta-secondary,
.surfdoc .surfdoc-pg-tile-cta-secondary:hover {
    background: transparent;
    border: 1px solid var(--product-accent, var(--accent));
    color: var(--product-accent, var(--accent));
    text-decoration: none;
}
.surfdoc .surfdoc-pg-tile-dark .surfdoc-pg-tile-cta-secondary,
.surfdoc .surfdoc-pg-tile-dark .surfdoc-pg-tile-cta-secondary:hover {
    border-color: rgba(255, 255, 255, 0.65);
    color: #fff;
}
.surfdoc-pg-tile:hover .surfdoc-pg-tile-cta { filter: brightness(0.94); }
.surfdoc-pg-tile:hover .surfdoc-pg-tile-cta-secondary { filter: none; }
/* Whole-tile click: a linked tile (explicit first CTA, else the card href)
   carries an invisible stretched anchor to its primary action. The copy sits
   above the stretch in paint order, so it goes pointer-transparent and the
   actions row re-enables itself — the pills keep their own destinations.
   Text on a linked tile is therefore not selectable (the stretched-link
   tradeoff); linkless tiles are untouched. */
.surfdoc-pg-tile-stretch { position: absolute; inset: 0; z-index: 1; }
.surfdoc-pg-tile-linked .surfdoc-pg-tile-copy { pointer-events: none; }
.surfdoc-pg-tile-linked .surfdoc-pg-tile-actions { pointer-events: auto; }
/* Hover echoes the affordance: a 1px accent outline drawn just inside the
   tile edge (offset -1px — grid gaps and explicit backgrounds never clip or
   double it; it follows --ws-pg-tile-radius) plus a soft same-accent glow.
   Hosts re-skin via --ws-pg-tile-hover-outline (the glow follows it), or
   kill the glow alone with --ws-pg-tile-hover-shadow: none. */
.surfdoc-pg-tile-linked:hover {
    outline: 1px solid var(--ws-pg-tile-hover-outline, var(--product-accent, var(--accent)));
    outline-offset: -1px;
    box-shadow: var(--ws-pg-tile-hover-shadow,
        0 0 24px -4px color-mix(in srgb, var(--ws-pg-tile-hover-outline, var(--product-accent, var(--accent))) 45%, transparent));
}
.surfdoc .surfdoc-pg-tile-cta,
.surfdoc .surfdoc-pg-tile-cta:hover { text-decoration: none; }
/* image: spec → product imagery fills the area BELOW the copy/CTA (apple.com
   tile shape), contained + bottom-weighted, never cropping over the text. */
.surfdoc-pg-tile-media {
    flex: 1 1 auto;
    align-self: stretch;
    margin-top: var(--ws-space-md);
    min-height: 160px;
    background-image: var(--tile-image);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
@media (max-width: 768px) {
    /* Mobile is ALWAYS 1 column per row, whatever {cols=N} says. */
    .surfdoc-pg-tiles-row[data-cols] { grid-template-columns: 1fr; }
    .surfdoc-pg-tile { min-height: clamp(360px, 96vw, 520px); }
}

/* ============================================================
   51. SURFDOC FEATURES
   ============================================================ */

.surfdoc-features { display: grid; gap: 1.5rem; margin: 2rem 0; align-items: stretch; }
/* A features grid introduced by a banner band is a marketing band, not doc
   prose: break it out of the reading column (capped at the site max) and give
   its cards the wider marketing column. Features inside plain docs keep the
   48rem prose geometry. */
.surfdoc-banner + .surfdoc-features {
    width: min(var(--ws-band-inner), var(--ws-bleed-width));
    max-width: min(var(--ws-band-inner), var(--ws-bleed-width));
    margin-left: max(var(--ws-bleed-margin), calc(50% - var(--ws-band-inner) / 2));
    margin-right: max(var(--ws-bleed-margin), calc(50% - var(--ws-band-inner) / 2));
    margin-top: 0;
    margin-bottom: var(--ws-section-pad);
}
.surfdoc-features[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.surfdoc-features[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.surfdoc-features[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.surfdoc-features:not([data-cols]) { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.surfdoc-feature-card { height: 100%; padding: var(--ws-feature-card-pad); border: var(--ws-border-w) var(--ws-border-style) var(--border); border-radius: var(--ws-feature-card-radius); box-shadow: var(--ws-shadow); background: var(--ws-feature-card-bg); transition: transform 150ms ease, box-shadow 150ms ease; }
.surfdoc-feature-card:hover { transform: var(--ws-feature-card-hover-transform); box-shadow: var(--ws-shadow-hover); }
.surfdoc-feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--ws-radius-img); background: var(--accent-soft); color: var(--accent); font-size: 1.125rem; margin-bottom: 0.75rem; }
/* .surfdoc prefix → (0,2,0): beats .surfdoc h3 / .surfdoc p margins (same trap as steps). */
.surfdoc .surfdoc-feature-title { font-size: 1.0625rem; font-weight: var(--font-weight-semibold); letter-spacing: -0.01em; color: var(--text); margin: 0 0 0.5rem; }
.surfdoc .surfdoc-feature-body { font-size: var(--font-size-ui); color: var(--text-muted); line-height: 1.6; margin: 0; }
.surfdoc-feature-link { display: inline-block; margin-top: 0.75rem; font-size: var(--font-size-ui); color: var(--accent); text-decoration: none; font-weight: var(--font-weight-medium); }
.surfdoc-feature-link:hover { text-decoration: underline; }

/* ============================================================
   52. SURFDOC STEPS
   ============================================================ */

.surfdoc-steps { list-style: none; padding: 0 0 0 1rem; margin: 2rem 0; counter-reset: none; border-left: 1px solid var(--border); }
/* Beat the generic `.surfdoc ol { padding-left:1.5rem }` rule so the steps
   timeline keeps its intended 1rem (16px) inset beside the left border, not 24px. */
ol.surfdoc-steps { padding-left: 1rem; }
.surfdoc-step { display: flex; gap: 1rem; padding: 1rem 0; position: relative; }
.surfdoc-step:first-child { padding-top: 0; }
.surfdoc-step:last-child { padding-bottom: 0; }
/* Ring (background-colored shadow) lifts the number chip off the rail. */
.surfdoc-step-number { display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--accent); color: var(--accent-text, #fff); font-size: 0.6875rem; font-weight: 700; font-family: var(--font-mono); flex-shrink: 0; margin-top: 0; margin-left: -1.75rem; box-shadow: 0 0 0 4px var(--background); }
.surfdoc-step-content { flex: 1; min-width: 0; }
/* .surfdoc prefix → (0,2,0): beats the generic .surfdoc h3 / .surfdoc p margins,
   which otherwise add 1.5rem above every step title and blow the timeline apart. */
.surfdoc .surfdoc-step-title { font-size: var(--font-size-body-lg); font-weight: var(--font-weight-semibold); color: var(--text); margin: 0 0 0.25rem; display: flex; align-items: center; gap: 0.75rem; letter-spacing: -0.01em; }
.surfdoc-step-time { font-size: var(--font-size-micro); font-family: var(--font-mono); font-weight: var(--font-weight-medium); color: var(--text-muted); border: var(--ws-border-w) var(--ws-border-style) var(--border); border-radius: var(--ws-radius-chip); padding: 1px 8px; }
.surfdoc .surfdoc-step-body { font-size: var(--font-size-ui); color: var(--text-muted); line-height: 1.6; margin: 0; }

/* ============================================================
   53. SURFDOC STATS
   ============================================================ */

/* Reference look (.sd-stat): each stat is its own soft-bg bordered card (no
   divider lines), value at h1, label at micro caps. */
.surfdoc-stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 2rem 0; }
/* Flex column + margin-top:auto pins labels to the bottom, so the label row
   stays level across the strip even when one value wraps to two lines. */
.surfdoc-stat { flex: 1; min-width: 90px; display: flex; flex-direction: column; text-align: center; padding: 18px 16px; border: var(--ws-border-w) var(--ws-border-style) var(--border); border-radius: var(--ws-radius-card); box-shadow: var(--ws-shadow); background: var(--ws-feature-card-bg); }
.surfdoc-stat-value { display: block; font-size: var(--font-size-h1); font-weight: var(--font-weight-bold); color: var(--text); line-height: 1.2; letter-spacing: var(--tracking-tight); }
.surfdoc-stat-label { display: block; font-size: var(--font-size-micro); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); margin-top: auto; padding-top: 4px; }

/* ============================================================
   54. SURFDOC COMPARISON
   ============================================================ */

.surfdoc-comparison { width: 100%; border: none; border-radius: var(--radius-sm); border-collapse: collapse; font-size: var(--font-size-caption); }
.surfdoc-comparison thead tr { background: transparent; border-bottom: 1px solid var(--border); }
.surfdoc-comparison th { text-align: center; padding: 0.625rem 1rem; font-weight: var(--font-weight-semibold); color: var(--text); text-transform: none; letter-spacing: normal; font-size: var(--font-size-ui); }
.surfdoc-comparison th:first-child { text-align: left; }
.surfdoc-comparison td { text-align: center; padding: 0.5rem 1rem; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.surfdoc-comparison td:first-child { text-align: left; font-weight: var(--font-weight-medium); color: var(--text); }
.surfdoc-comparison tbody tr:last-child td { border-bottom: none; }
.surfdoc-comparison-highlight { background: var(--accent-soft); }
.surfdoc-comparison th.surfdoc-comparison-highlight { color: var(--accent); font-weight: var(--font-weight-bold); }
/* Comparison cell glyphs — SCOPED to .surfdoc-comparison so they do NOT collide
   with the task-list .surfdoc-check checkbox (B0 §3). */
.surfdoc-comparison .surfdoc-check { color: var(--success); font-weight: var(--font-weight-bold); font-size: var(--font-size-ui); border: none; background: none; width: auto; height: auto; border-radius: 0; display: inline; flex-shrink: unset; }
.surfdoc-comparison .surfdoc-dash { color: var(--text-muted); font-size: var(--font-size-ui); }

/* ============================================================
   55. SURFDOC LOGO
   ============================================================ */

.surfdoc-logo { margin: 2rem 0; display: grid; place-items: center; padding: 24px; border: var(--ws-border-w) var(--ws-border-style) var(--border); border-radius: var(--ws-radius-card); box-shadow: var(--ws-shadow); background: var(--surface-alt); }
.surfdoc-logo img { height: 40px; display: inline-block; }

/* ============================================================
   56. SURFDOC TOC
   ============================================================ */

/* Reference look (.sd-toc): soft-bg card with a "Contents" label + an indented
   list of links auto-generated from the document headings. */
.surfdoc-toc { margin: 1.5rem 0; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-alt); }
.surfdoc-toc-label { font-family: var(--font-mono); font-size: var(--font-size-micro); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-muted); margin-bottom: 6px; }
.surfdoc-toc ol { margin: 0; padding-left: 18px; font-size: var(--font-size-ui); line-height: 1.8; list-style: decimal; }
.surfdoc-toc ol ol { padding-left: 16px; }
.surfdoc-toc a { color: var(--text); text-decoration: none; }
.surfdoc-toc a:hover { color: var(--accent); }

/* ============================================================
   57. SURFDOC BEFORE-AFTER
   ============================================================ */

/* Reference look (.sd-ba): two columns side-by-side with the transition between
   them (grid 1fr / auto / 1fr). BEFORE heading red, AFTER heading green. */
.surfdoc-before-after { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; margin: 2rem 0; }
.surfdoc-ba-before, .surfdoc-ba-after { display: grid; gap: 0.5rem; margin: 0; align-content: start; min-width: 0; }
/* .surfdoc prefix → (0,2,0) beats `.surfdoc h3` (0,1,1) for font-size + margin. */
.surfdoc .surfdoc-ba-heading { font-size: var(--font-size-ui); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-muted); margin: 0 0 0.25rem; }
.surfdoc-ba-before .surfdoc-ba-heading { color: var(--danger); }
.surfdoc-ba-after .surfdoc-ba-heading { color: var(--success); }
.surfdoc-ba-item { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-alt); }
.surfdoc-ba-item strong { white-space: nowrap; }
.surfdoc-ba-item span { color: var(--text-muted); }
.surfdoc-ba-dot { width: 8px; height: 8px; border-radius: var(--radius-circle); flex-shrink: 0; }
.surfdoc-ba-dot-red { background: var(--danger); }
.surfdoc-ba-dot-green { background: var(--success); }
.surfdoc-ba-item-green { border-color: rgba(34, 197, 94, 0.3); }
.surfdoc-ba-transition { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; align-self: center; }
.surfdoc-ba-line { width: 1px; height: 16px; flex: none; background: var(--border); }
.surfdoc-ba-label { font-size: var(--font-size-ui); font-weight: var(--font-weight-semibold); color: var(--accent); white-space: nowrap; }
@media (max-width: 768px) {
    .surfdoc-before-after { grid-template-columns: 1fr; }
    .surfdoc-ba-transition { flex-direction: row; justify-content: center; }
    .surfdoc-ba-line { width: 16px; height: 1px; }
}

/* ============================================================
   58. SURFDOC PIPELINE
   ============================================================ */

/* Reference look (.sd-pipeline): compact chips, caption text, 6px gaps, left-aligned. */
.surfdoc-pipeline { display: flex; align-items: center; gap: 6px; margin: 2rem 0; flex-wrap: wrap; }
.surfdoc-pipeline-step { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-alt); text-align: center; }
.surfdoc-pipeline-label { font-size: var(--font-size-caption); font-weight: var(--font-weight-medium); }
.surfdoc-pipeline-desc { font-size: var(--font-size-ui); color: var(--text-muted); }
.surfdoc-pipeline-arrow { display: flex; align-items: center; padding: 0 0.5rem; font-size: 1.25rem; color: var(--text-muted); }
@media (max-width: 640px) {
    .surfdoc-pipeline { flex-direction: column; align-items: center; }
    .surfdoc-pipeline-arrow { transform: rotate(90deg); padding: 0.25rem 0; }
}

/* ============================================================
   59. SURFDOC SECTION
   ============================================================ */

.surfdoc-section { margin: 0; padding: var(--ws-section-pad) 0; }
/* A section directly under the page hero keeps a compact top: the hero's own
   bottom breath already separates them — full pads on both sides double up. */
.surfdoc-hero + .surfdoc-section,
.surfdoc-hero + .surfdoc-banner .surfdoc-banner-inner { padding-top: var(--ws-section-pad-compact); }
.surfdoc-section-inner { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; }
.surfdoc-section-header { text-align: center; margin-bottom: 3rem; }
/* Site treatment: no doc hairline; clamp scales the headline on phones. */
.surfdoc-section-header h2 { font-size: clamp(1.5rem, 3.5vw, var(--font-size-h1)); margin: 0 0 0.5rem; border-bottom: none; padding-bottom: 0; }
.surfdoc-section-header p { font-size: var(--font-size-h3); color: var(--text-muted); margin: 0 auto; max-width: 560px; line-height: 1.6; }
.section-muted { background: var(--surface); margin-left: var(--ws-bleed-margin); margin-right: var(--ws-bleed-margin); padding-left: calc(-1 * var(--ws-bleed-margin)); padding-right: calc(-1 * var(--ws-bleed-margin)); }
.section-dark { background: var(--surface-alt); margin-left: var(--ws-bleed-margin); margin-right: var(--ws-bleed-margin); padding-left: calc(-1 * var(--ws-bleed-margin)); padding-right: calc(-1 * var(--ws-bleed-margin)); }

/* ============================================================
   60. SURFDOC PRODUCT CARD
   ============================================================ */

/* Reference look (.sd-product): a narrow (max 320px) soft-bg card, flex column.
   Badge sits top-left above the title (accent fill), via column-reverse header. */
.surfdoc-product-card { max-width: 320px; border: var(--ws-border-w) var(--ws-border-style) var(--border); border-radius: var(--ws-radius-card); box-shadow: var(--ws-shadow); padding: 20px; background: var(--ws-feature-card-bg); margin: 1.5rem 0; display: flex; flex-direction: column; gap: 10px; transition: box-shadow 150ms ease, transform 150ms ease; }
.surfdoc-product-card:hover { transform: translateY(-2px); box-shadow: var(--ws-shadow-hover); }
.surfdoc-product-header { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 8px; margin: 0; }
.surfdoc-product-titles { flex: 1; }
.surfdoc-product-title { margin: 0; font-size: var(--font-size-h2); }
.surfdoc .surfdoc-product-subtitle { margin: 0.25rem 0 0; color: var(--text-muted); font-size: var(--font-size-caption); }
/* (0,3,0) beats the generic green `.surfdoc .surfdoc-badge` (0,2,0): product badge = accent. */
.surfdoc .surfdoc-product-header .surfdoc-badge { background: var(--accent); border-color: var(--accent); color: #fff; }
.surfdoc-badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: var(--font-size-micro); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide); background: var(--surface-alt); border: 1px solid var(--border); color: var(--text-muted); }
.surfdoc-badge-green { background: rgba(34, 197, 94, 0.15); border-color: transparent; color: var(--success); }
.surfdoc-badge-yellow { background: rgba(245, 158, 11, 0.15); border-color: transparent; color: var(--warning); }
.surfdoc-badge-blue { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.surfdoc-badge-red { background: rgba(239, 68, 68, 0.15); border-color: transparent; color: var(--danger); }
.surfdoc-product-body { margin: 0; color: var(--text-muted); font-size: var(--font-size-ui); line-height: 1.5; }
.surfdoc-product-body p { margin: 0; }
.surfdoc-product-features { list-style: none; padding: 0; margin: 0; }
.surfdoc-product-features li { padding: 0.25rem 0; padding-left: 1.25rem; position: relative; color: var(--text-muted); }
.surfdoc-product-features li::before { content: "\2713"; position: absolute; left: 0; color: var(--success); font-weight: var(--font-weight-bold); }
/* .surfdoc prefix bumps specificity to (0,2,0), beating .surfdoc a (0,1,1) link color */
.surfdoc .surfdoc-product-cta { display: inline-block; padding: 0.5rem 1.25rem; border-radius: var(--ws-radius-btn); background: var(--accent); color: var(--accent-text, #fff); text-decoration: none; font-weight: var(--font-weight-semibold); font-size: var(--font-size-ui); }
.surfdoc .surfdoc-product-cta { transition: opacity 120ms ease; }
.surfdoc .surfdoc-product-cta:hover { opacity: 0.9; text-decoration: none; }

/* ================================================================
   ================================================================
   THEME NOTES — SURFDOC CONTENT
   ================================================================
   ================================================================ */

/* Light is now the CANONICAL palette: every .surfdoc rule above resolves
   through design tokens (--text, --surface-alt, --border, --accent, …), which
   the Reference loads as light. The old per-element light overrides have been
   removed because they conflicted with the token-based, sharp-radius restyle
   (re-setting full callout border-color over the new left stripe, faint bg
   tints, hardcoded #111/#888 text). Dark mode is restored entirely by the
   [data-theme="dark"] / prefers-color-scheme:dark token blocks in section 2. */


/* ================================================================
   ================================================================
   RESPONSIVE
   ================================================================
   ================================================================ */

/* ============================================================
   50. RESPONSIVE (768px — app chrome)
   ============================================================ */

@media (max-width: 768px) {
    .hero-inner {
        padding: 96px 24px 64px;
    }

    .hero-headline { font-size: 2rem; }

    .section-inner { padding: 56px 16px; }

    /* Nav mobile */
    .nav-toggle { display: flex; }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 2px;
        padding: 8px 16px 16px;
        background: rgba(10, 10, 15, 0.96);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--border);
    }

    [data-theme="light"] .nav-links {
        background: rgba(255, 255, 255, 0.96);
    }

    .nav-links.open { display: flex; }

    .nav-links a {
        padding: 10px 12px;
        font-size: 0.9375rem;
    }

    /* Grids */
    .card-grid,
    .capability-grid { grid-template-columns: 1fr; }

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

    .form-row { grid-template-columns: 1fr; }

    /* Footer */
    .footer-columns { grid-template-columns: 1fr; gap: 32px; }

    /* Tables */
    .comparison-table { font-size: 0.8125rem; }
    .comparison-table th,
    .comparison-table td { padding: 10px 12px; }

    .hide-mobile { display: none; }
}

/* ============================================================
   51. RESPONSIVE (640px — SurfDoc content)
   ============================================================ */

@media (max-width: 640px) {
    /* SurfDoc columns */
    .surfdoc-columns { grid-template-columns: 1fr !important; }

    /* SurfDoc pages */
    .surfdoc-page[data-layout="split"] { grid-template-columns: 1fr; }
    .surfdoc-page[data-layout="hero"] h1 { font-size: 1.75rem; }

    /* SurfDoc gallery */
    .surfdoc-gallery-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* SurfDoc footer */
    .surfdoc-footer-sections { grid-template-columns: repeat(2, 1fr); }

    /* SurfDoc hero (headline size handled by the clamp — min is already 2rem) */
    .surfdoc-hero-left .surfdoc-hero-inner { grid-template-columns: 1fr; }
    .surfdoc-hero-image-side { display: none; }

    /* SurfDoc features */
    .surfdoc-features { grid-template-columns: 1fr !important; }

    /* SurfDoc stats */
    .surfdoc-stats { flex-direction: column; }
    .surfdoc-stat { min-width: 0; }

    /* SurfDoc comparison */
    .surfdoc-comparison { font-size: 0.8rem; }
    .surfdoc-comparison th, .surfdoc-comparison td { padding: 0.375rem 0.5rem; }
}

/* ============================================================
   52. APP DESCRIPTION BLOCKS — List, Board, Action, FilterBar, Search, etc.
   ============================================================ */

/* List */
.surfdoc-list { margin: 1rem 0; }
.surfdoc-list-filters { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.surfdoc-list-filter { font-size: 0.85rem; color: var(--text-secondary, #888); }
.surfdoc-list-items { display: grid; gap: 0.75rem; }
.surfdoc-list-card .surfdoc-list-items { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.surfdoc-list-compact .surfdoc-list-items { display: flex; flex-direction: column; gap: 0.25rem; }
.surfdoc-list-empty { color: var(--text-secondary, #888); font-style: italic; }
.surfdoc-list-item { padding: 0.65rem 0.9rem; border: var(--ws-border-w) var(--ws-border-style) var(--border, #dde2ec); border-radius: var(--ws-radius-card); background: var(--surface, #fff); display: flex; flex-direction: column; gap: 0.25rem; }
.surfdoc-list-item-title { font-size: 0.875rem; font-weight: 600; color: var(--text, #0f1422); }
.surfdoc-list-item-meta { font-size: 0.75rem; color: var(--text-muted, #6b7388); }

/* Board */
.surfdoc-board { margin: 1rem 0; overflow-x: auto; }
.surfdoc-board-columns { display: flex; gap: 1rem; min-width: max-content; }
.surfdoc-board-column { flex: 1; min-width: 240px; max-width: 320px; background: var(--surface-alt); border: var(--ws-border-w) var(--ws-border-style) var(--border); border-radius: var(--ws-radius-card); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.07); padding: 0.75rem; }
.surfdoc-board-column-title { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary, #888); margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: var(--ws-divider); }
.surfdoc-board-cards { display: flex; flex-direction: column; gap: 0.5rem; min-height: 60px; }

/* Action form */
.surfdoc-action { margin: 1rem 0; padding: 1.25rem; background: transparent; border: var(--ws-border-w) var(--ws-border-style) var(--border, #333); border-radius: var(--ws-radius-card); }
.surfdoc-action .surfdoc-form-field { margin-bottom: 0.75rem; }
.surfdoc-action .surfdoc-form-field label { display: block; font-size: 0.85rem; font-weight: 500; margin-bottom: 0.25rem; }
.surfdoc-action input, .surfdoc-action select, .surfdoc-action textarea { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border, #333); border-radius: var(--radius-sm); background: var(--background, #0f0f1a); color: var(--text, #e0e0e0); font-size: 0.9rem; }
.surfdoc-action input:focus, .surfdoc-action select:focus, .surfdoc-action textarea:focus { outline: 2px solid var(--accent, #3b82f6); outline-offset: -1px; border-color: var(--accent, #3b82f6); }

/* Filter bar */
.surfdoc-filter-bar { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin: 1rem 0; padding: 0.75rem 1rem; background: transparent; border: var(--ws-border-w) var(--ws-border-style) var(--border, #333); border-radius: var(--ws-radius-card); }
.surfdoc-filter-field { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.surfdoc-filter-field select { padding: 0.35rem 0.5rem; border: 1px solid var(--border, #333); border-radius: var(--radius-sm); background: var(--background, #0f0f1a); color: var(--text, #e0e0e0); font-size: 0.85rem; }

/* Search */
.surfdoc-search { margin: 1rem 0; }
.surfdoc-search input[type="search"] { width: 100%; padding: 0.6rem 1rem; border: 1px solid var(--border, #333); border-radius: var(--radius-sm); background: var(--background, #0f0f1a); color: var(--text, #e0e0e0); font-size: 0.9rem; }
.surfdoc-search input[type="search"]:focus { outline: 2px solid var(--accent, #3b82f6); outline-offset: -1px; }
.surfdoc-search-results { margin-top: 0.5rem; }

/* Dashboard */
.surfdoc-dashboard { margin: 1rem 0; }
.surfdoc-dashboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }

/* Chat input */
.surfdoc-chat-input { margin: 1rem 0; }
.surfdoc-chat-modes { display: flex; gap: 0.25rem; margin-bottom: 0.5rem; }
.surfdoc-chat-mode { padding: 0.35rem 0.75rem; border: 1px solid var(--border, #333); border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary, #888); cursor: pointer; font-size: 0.85rem; }
.surfdoc-chat-mode.active { background: var(--accent, #3b82f6); color: var(--accent-text, #fff); border-color: var(--accent, #3b82f6); }
.surfdoc-chat-form { display: flex; gap: 0.5rem; }
.surfdoc-chat-form input { flex: 1; padding: 0.6rem 1rem; border: 1px solid var(--border, #333); border-radius: var(--radius-sm); background: var(--background, #0f0f1a); color: var(--text, #e0e0e0); font-size: 0.9rem; }
.surfdoc-chat-form button { padding: 0.6rem 1.25rem; border: none; border-radius: var(--radius-sm); background: var(--accent, #3b82f6); color: var(--accent-text, #fff); cursor: pointer; font-weight: 500; }
/* chat-input-simple: bare input+button get flex layout and base styling when outside app-shell */
.surfdoc-chat-input > input[type="text"] { flex: 1; padding: 0.55rem 0.9rem; border: 1px solid var(--border, #333); border-radius: var(--radius-sm); background: var(--surface, #fff); color: var(--text, #0f1422); font-size: 0.9rem; min-width: 0; }
.surfdoc-chat-input > button { padding: 0.55rem 1.1rem; border: none; border-radius: var(--radius-sm); background: var(--accent, #3b82f6); color: var(--accent-text, #fff); cursor: pointer; font-size: 0.875rem; font-weight: 500; white-space: nowrap; }
.surfdoc-chat-input:has(> input[type="text"]) { display: flex; gap: 0.5rem; align-items: center; border: 1px solid var(--border, #333); padding: 0.4rem; }

/* Feed */
.surfdoc-feed { margin: 1rem 0; }
.surfdoc-feed-items { display: flex; flex-direction: column; gap: 0.5rem; }

/* Mount point placeholder (editor, chart, split-pane) */
.surfdoc-mount-placeholder { color: var(--text-secondary, #888); font-style: italic; padding: 2rem; text-align: center; border: 1px dashed var(--border, #333); border-radius: var(--ws-radius-card); }
.surfdoc-editor, .surfdoc-chart { margin: 1rem 0; min-height: 200px; }
.surfdoc-editor-preview { padding: 1.25rem 1.5rem; border: var(--ws-border-w) var(--ws-border-style) var(--border, #333); border-radius: var(--ws-radius-card); background: var(--surface, #fff); }
.surfdoc-split-pane { display: flex; gap: 4px; margin: 1rem 0; min-height: 200px; }
.surfdoc-split-left, .surfdoc-split-right { flex: 1; border: var(--ws-border-w) var(--ws-border-style) var(--border, #333); border-radius: var(--ws-radius-card); padding: 1rem; }

/* ============================================================
   53. ROW BLOCK
   ============================================================ */
.surfdoc-row {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 1rem; border-radius: var(--ws-radius-card);
    border: var(--ws-border-w) var(--ws-border-style) var(--border, #334155); background: transparent;
    text-decoration: none; color: var(--text, #e5e5ef);
    cursor: pointer; box-sizing: border-box;
}
.surfdoc-row:hover { border-color: var(--accent, #3b82f6); }
.surfdoc-row-icon { flex-shrink: 0; color: var(--text-secondary, #64748b); width: 18px; height: 18px; display: flex; align-items: center; }
.surfdoc-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.surfdoc-row-title { font-size: 0.8125rem; font-weight: 600; color: var(--text, #e5e5ef); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; }
.surfdoc-row-desc { font-size: 0.6875rem; color: var(--text-secondary, #94a3b8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; margin-top: 0.25rem; }
.surfdoc-row-arrow { margin-left: auto; color: var(--text-secondary, #64748b); flex-shrink: 0; display: flex; align-items: center; }
@keyframes surfdoc-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.15; } }
.surfdoc-row--loading { cursor: default; }
.surfdoc-row--loading:hover { border-color: var(--border, #334155); background: transparent; }
.surfdoc-row--loading .surfdoc-row-title {
    color: transparent; background: var(--text-secondary, #64748b); border-radius: var(--radius-sm);
    animation: surfdoc-pulse 1.5s ease-in-out infinite;
    font-size: 0; line-height: 0; height: 0.8125rem; width: 55%; display: block;
}
.surfdoc-row--loading .surfdoc-row-desc {
    color: transparent; background: var(--text-secondary, #64748b); border-radius: var(--radius-sm);
    animation: surfdoc-pulse 1.5s ease-in-out infinite;
    font-size: 0; line-height: 0; height: 0.6875rem; width: 80%; display: block; margin-top: 0.25rem;
}
.surfdoc-row--loading .surfdoc-row-icon svg, .surfdoc-row--loading .surfdoc-row-arrow svg { opacity: 0; }
.surfdoc-row--loading .surfdoc-row-icon, .surfdoc-row--loading .surfdoc-row-arrow { background: var(--text-secondary, #64748b); border-radius: var(--radius-sm); animation: surfdoc-pulse 1.5s ease-in-out infinite; }
.surfdoc-row--empty { cursor: default; opacity: 0.4; }
.surfdoc-row--empty:hover { border-color: var(--border, #334155); background: transparent; }

/* ============================================================
   54. INFOCARD BLOCK
   ============================================================ */
.surfdoc-infocard { background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; min-height: 16rem; }
.surfdoc-infocard-header { display: flex; gap: 1rem; padding: 1.25rem; }
.surfdoc-infocard-image { width: 80px; height: 80px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; background: var(--border, #334155); }
.surfdoc-infocard-info { flex: 1; min-width: 0; }
.surfdoc-infocard-title { font-size: 1.25rem; font-weight: 700; color: var(--text, #e5e5ef); margin: 0; line-height: 1.3; }
.surfdoc-infocard-subtitle { font-size: 0.8125rem; color: var(--text-secondary, #94a3b8); margin-top: 0.125rem; }
.surfdoc-infocard-badge { display: inline-block; font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.125rem 0.5rem; border-radius: var(--radius-sm); margin-top: 0.375rem; background: rgba(59,130,246,0.12); color: #60a5fa; }
.surfdoc-infocard-badge.who { background: rgba(139,92,246,0.12); color: #a78bfa; }
.surfdoc-infocard-badge.what { background: rgba(59,130,246,0.12); color: #60a5fa; }
.surfdoc-infocard-badge.when { background: rgba(251,191,36,0.12); color: #fbbf24; }
.surfdoc-infocard-badge.where { background: rgba(34,197,94,0.12); color: #4ade80; }
.surfdoc-infocard-badge.how { background: rgba(244,63,94,0.12); color: #fb7185; }
.surfdoc-infocard-summary { font-size: 0.8125rem; color: var(--text-secondary, #cbd5e1); line-height: 1.5; padding: 0 1.25rem; margin: 0; }
.surfdoc-infocard-facts { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.75rem; padding: 0.75rem 1.25rem 1.25rem; font-size: 0.8125rem; }
.surfdoc-infocard-fact-label { font-weight: 600; color: var(--text-secondary, #94a3b8); white-space: nowrap; }
.surfdoc-infocard-fact-value { color: var(--text, #e5e5ef); }
.surfdoc-infocard-steps { padding: 0.75rem 1.25rem 1.25rem; font-size: 0.8125rem; display: flex; flex-direction: column; gap: 0.5rem; }
.surfdoc-infocard-step { display: flex; gap: 0.625rem; align-items: flex-start; }
.surfdoc-infocard-step-num { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; background: var(--accent, #3b82f6); color: white; font-size: 0.6875rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.surfdoc-infocard-step-text { color: var(--text, #e5e5ef); line-height: 1.5; }
.surfdoc-infocard--loading .surfdoc-infocard-title, .surfdoc-infocard--loading .surfdoc-infocard-subtitle, .surfdoc-infocard--loading .surfdoc-infocard-badge, .surfdoc-infocard--loading .surfdoc-infocard-summary, .surfdoc-infocard--loading .surfdoc-infocard-fact-label, .surfdoc-infocard--loading .surfdoc-infocard-fact-value { color: transparent; background: var(--text-secondary, #64748b); border-radius: var(--radius-sm); animation: surfdoc-pulse 1.5s ease-in-out infinite; }

/* ============================================================
   55. REDUCED MOTION
   ============================================================ */

/* ============================================================
   56. APP SHELL — VS Code-style layout
   ============================================================ */

.surfdoc .surfdoc-app-shell { display: grid; height: 100vh; width: 100%; overflow: hidden; background: var(--background, #0a0a0f); color: var(--text, #e5e5ef); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 13px; }
.surfdoc .surfdoc-layout-sidebar-main-panel { grid-template-columns: 250px 1fr; grid-template-rows: 40px 36px 1fr 200px; }
.surfdoc .surfdoc-layout-sidebar-main-panel > .surfdoc-sidebar { grid-column: 1; grid-row: 1 / -1; }
.surfdoc .surfdoc-layout-sidebar-main-panel > .surfdoc-toolbar { grid-column: 2; grid-row: 1; }
.surfdoc .surfdoc-layout-sidebar-main-panel > .surfdoc-tab-bar { grid-column: 2; grid-row: 2; }
.surfdoc .surfdoc-layout-sidebar-main-panel > .surfdoc-tab-content { grid-column: 2; grid-row: 3; min-width: 0; }
.surfdoc .surfdoc-layout-sidebar-main-panel > .surfdoc-panel { grid-column: 2; grid-row: 4; }

/* ============================================================
   57. SIDEBAR
   ============================================================ */

.surfdoc .surfdoc-sidebar { background: var(--surface, #12121a); border-right: 1px solid var(--border, #30363d); overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; }
.surfdoc .surfdoc-sidebar-left { grid-column: 1; grid-row: 1 / -1; }
.surfdoc .surfdoc-nav-tree { padding: 8px 0; font-size: 0.8125rem; flex: 1; }

/* ============================================================
   58. TOOLBAR
   ============================================================ */

.surfdoc .surfdoc-toolbar { display: flex; align-items: center; gap: 4px; padding: 0 12px; height: 40px; background: var(--surface, #12121a); border-bottom: 1px solid var(--border, #30363d); flex-shrink: 0; }
.surfdoc .surfdoc-toolbar-btn { background: transparent; border: 1px solid transparent; color: var(--text-secondary, #8b949e); cursor: pointer; padding: 4px 10px; border-radius: var(--radius-sm); font-size: 0.8125rem; display: inline-flex; align-items: center; gap: 4px; transition: background 0.15s, color 0.15s; }
.surfdoc .surfdoc-toolbar-btn:hover { background: var(--surface-alt, #1a1a24); color: var(--text, #e6edf3); }
.surfdoc .surfdoc-toolbar-btn-primary { background: var(--accent, #3b82f6); color: var(--accent-text, #fff); border-color: var(--accent, #3b82f6); font-weight: 600; }
.surfdoc .surfdoc-toolbar-btn-primary:hover { background: var(--accent-hover, #60a5fa); border-color: var(--accent-hover, #60a5fa); }
.surfdoc .surfdoc-toolbar-separator { width: 1px; height: 20px; background: var(--border, #30363d); margin: 0 4px; }
.surfdoc .surfdoc-toolbar-spacer { flex: 1; }
.surfdoc .surfdoc-toolbar-text { color: var(--text, #e6edf3); font-size: 0.8125rem; font-weight: 500; padding: 0 8px; }
.surfdoc .surfdoc-toolbar-dropdown { background: var(--surface-alt, #1a1a24); border: 1px solid var(--border, #30363d); color: var(--text-secondary, #8b949e); border-radius: var(--radius-sm); padding: 3px 8px; font-size: 0.75rem; cursor: pointer; }

/* ============================================================
   59. TAB BAR
   ============================================================ */

.surfdoc .surfdoc-tab-bar { display: flex; align-items: stretch; background: var(--surface, #12121a); border-bottom: 1px solid var(--border, #30363d); height: 36px; flex-shrink: 0; padding: 0 8px; gap: 0; }
.surfdoc .surfdoc-tab-bar button { background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--text-secondary, #8b949e); cursor: pointer; padding: 0 14px; font-size: 0.8125rem; transition: color 0.15s, border-color 0.15s; white-space: nowrap; }
.surfdoc .surfdoc-tab-bar button:hover { color: var(--text, #e6edf3); }
.surfdoc .surfdoc-tab-bar button.active, .surfdoc .surfdoc-tab-bar button[aria-selected="true"] { color: var(--text, #e6edf3); border-bottom-color: var(--accent, #3b82f6); }

/* ============================================================
   60. TAB CONTENT
   ============================================================ */

.surfdoc .surfdoc-tab-content { overflow-y: auto; overflow-x: hidden; padding: 16px; background: var(--background, #0a0a0f); display: none; min-width: 0; }
.surfdoc .surfdoc-tab-content[data-tab="preview"] { display: block; }
.surfdoc .surfdoc-tab-content.active { display: block; }

/* ============================================================
   61. BOTTOM PANEL
   ============================================================ */

.surfdoc .surfdoc-panel { border-top: 1px solid var(--border, #30363d); background: var(--surface, #12121a); display: flex; flex-direction: column; flex-shrink: 0; }
.surfdoc .surfdoc-panel-bottom { height: 200px; }
.surfdoc .surfdoc-panel .surfdoc-tab-bar { height: 32px; border-bottom: 1px solid var(--border-light, #21262d); }
.surfdoc .surfdoc-panel .surfdoc-tab-bar button { font-size: 0.75rem; padding: 0 12px; }
.surfdoc .surfdoc-panel .surfdoc-tab-content { padding: 8px 12px; font-family: var(--font-mono, monospace); font-size: 0.75rem; background: var(--surface, #12121a); }

/* ============================================================
   62. TERMINAL
   ============================================================ */

.surfdoc .surfdoc-terminal { font-family: var(--font-mono, monospace); font-size: 0.8125rem; color: var(--text, #e6edf3); padding: 8px 12px; flex: 1; background: var(--surface, #12121a); }
.surfdoc .surfdoc-terminal::after { content: "$ "; color: var(--green, #3fb950); }

/* ============================================================
   63. LOG STREAM
   ============================================================ */

.surfdoc .surfdoc-log-stream { font-family: var(--font-mono, monospace); font-size: 0.75rem; color: var(--text-secondary, #8b949e); padding: 8px 12px; flex: 1; overflow-y: auto; }
.surfdoc .surfdoc-log-stream pre { margin: 0; white-space: pre-wrap; }

/* ============================================================
   64. PROBLEM LIST
   ============================================================ */

.surfdoc .surfdoc-problem-list { font-size: 0.75rem; padding: 8px 12px; color: var(--text-secondary, #8b949e); }
.surfdoc .surfdoc-problem-list:empty::after { content: "No problems detected."; color: var(--text-faint, #484f58); font-style: italic; }

/* ============================================================
   65. DRAWER (Mako)
   ============================================================ */

.surfdoc .surfdoc-drawer { position: fixed; top: 0; right: 0; height: 100vh; background: var(--surface, #12121a); border-left: 1px solid var(--border, #30363d); display: flex; flex-direction: column; z-index: 200; box-shadow: -4px 0 24px rgba(0,0,0,0.3); }
.surfdoc .surfdoc-drawer-right { width: 320px; }
.surfdoc .surfdoc-drawer h1 { font-size: 1rem; font-weight: 600; padding: 12px 16px; border-bottom: 1px solid var(--border, #30363d); margin: 0; flex-shrink: 0; }

/* ============================================================
   66. SUGGESTION CHIPS
   ============================================================ */

.surfdoc .surfdoc-suggestion-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--border-light, #21262d); flex-shrink: 0; }
/* Standalone suggestion-chips (outside app-shell) */
.surfdoc-suggestion-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 1rem 0; padding: 0.75rem 0; }
.surfdoc-chip { background: var(--surface, #fff); border: 1px solid var(--border, #dde2ec); border-radius: var(--radius-sm); color: var(--text, #0f1422); cursor: pointer; font-size: 0.8125rem; padding: 0.35rem 0.85rem; }
.surfdoc-chip:hover { background: var(--surface-alt, #eef1f7); border-color: var(--accent, #2563eb); color: var(--accent, #2563eb); }

/* ============================================================
   67. CHAT THREAD + INPUT
   ============================================================ */

.surfdoc .surfdoc-chat-thread { flex: 1; overflow-y: auto; padding: 16px; font-size: 0.8125rem; line-height: 1.6; }
.surfdoc .surfdoc-chat-thread:empty::after { content: "Start a conversation with Mako..."; color: var(--text-faint, #484f58); font-style: italic; }
/* Standalone chat-thread (outside app-shell) */
.surfdoc-chat-thread { margin: 1rem 0; padding: 1rem; border: var(--ws-border-w) var(--ws-border-style) var(--border, #dde2ec); border-radius: var(--ws-radius-card); background: var(--surface, #fff); display: flex; flex-direction: column; gap: 0.75rem; }
.surfdoc-chat-msg { max-width: 85%; padding: 0.5rem 0.85rem; border-radius: var(--radius-sm); font-size: 0.875rem; line-height: 1.5; }
.surfdoc-chat-msg-user { align-self: flex-end; background: var(--accent-soft, #e3ebff); color: var(--text, #0f1422); }
.surfdoc-chat-msg-assistant { align-self: flex-start; background: var(--surface-alt, #eef1f7); color: var(--text, #0f1422); }
.surfdoc .surfdoc-chat-input { border-top: 1px solid var(--border, #30363d); padding: 12px; flex-shrink: 0; }
.surfdoc .surfdoc-chat-form { display: flex; gap: 8px; }
.surfdoc .surfdoc-chat-form input { flex: 1; background: var(--bg, #0a0a0f); border: 1px solid var(--border, #30363d); border-radius: var(--radius-sm); color: var(--text, #e6edf3); padding: 8px 12px; font-size: 0.8125rem; outline: none; }
.surfdoc .surfdoc-chat-form input:focus { border-color: var(--accent, #3b82f6); }
.surfdoc .surfdoc-chat-form button { background: var(--accent, #3b82f6); color: var(--accent-text, #fff); border: none; border-radius: var(--radius-sm); padding: 8px 16px; font-size: 0.8125rem; font-weight: 600; cursor: pointer; }
.surfdoc .surfdoc-chat-form button:hover { background: var(--accent-hover, #60a5fa); }

/* ============================================================
   68. MODAL
   ============================================================ */

.surfdoc .surfdoc-modal { background: var(--surface, #12121a); border: 1px solid var(--border, #30363d); border-radius: var(--radius-sm); padding: 0; color: var(--text, #e6edf3); max-width: 480px; width: 90%; box-shadow: 0 16px 48px rgba(0,0,0,0.4); }
.surfdoc .surfdoc-modal::backdrop { background: rgba(0,0,0,0.5); }
.surfdoc .surfdoc-modal h2 { font-size: 1rem; font-weight: 600; padding: 16px 20px; border-bottom: 1px solid var(--border, #30363d); margin: 0; }

/* ============================================================
   69. BADGE
   ============================================================ */

.surfdoc .surfdoc-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wide); background: rgba(63,185,80,0.15); color: var(--green, #3fb950); }

/* ============================================================
   70. CODE EDITOR
   ============================================================ */

.surfdoc .surfdoc-code-editor { font-family: var(--font-mono, monospace); font-size: 0.8125rem; line-height: 1.6; background: var(--bg, #0a0a0f); padding: 16px; min-height: 200px; }
.surfdoc .surfdoc-code-editor pre { margin: 0; }

/* ============================================================
   71. BLOCK EDITOR
   ============================================================ */

.surfdoc .surfdoc-block-editor { padding: 16px; min-height: 200px; }
.surfdoc .surfdoc-block-editor:empty::after { content: "Click + Add Block to get started"; color: var(--text-faint, #484f58); font-style: italic; }

/* ============================================================
   72. COMMAND PALETTE
   ============================================================ */

.surfdoc .surfdoc-command-palette { position: fixed; top: 20%; left: 50%; transform: translateX(-50%); width: 500px; max-width: 90vw; background: var(--surface, #12121a); border: 1px solid var(--border, #30363d); border-radius: var(--radius-sm); box-shadow: 0 16px 48px rgba(0,0,0,0.5); z-index: 300; }
.surfdoc .surfdoc-command-search { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--border, #30363d); color: var(--text, #e6edf3); padding: 12px 16px; font-size: 0.875rem; outline: none; }
.surfdoc .surfdoc-command-list { list-style: none; padding: 4px; max-height: 300px; overflow-y: auto; }
.surfdoc .surfdoc-command-list li { padding: 8px 12px; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.8125rem; }
.surfdoc .surfdoc-command-list li:hover { background: var(--surface-alt, #1a1a24); }

/* ============================================================
   73. PROGRESS
   ============================================================ */

.surfdoc .surfdoc-progress { list-style: none; padding: 12px 20px; font-size: 0.8125rem; }
.surfdoc .surfdoc-progress li { padding: 4px 0; display: flex; align-items: center; gap: 8px; }

/* ============================================================
   74. MOBILE RESPONSIVE — interactive blocks
   ============================================================ */

@media (max-width: 768px) {
    .surfdoc .surfdoc-layout-sidebar-main-panel { grid-template-columns: 1fr; }
    .surfdoc .surfdoc-sidebar { display: none; }
    .surfdoc .surfdoc-panel[data-desktop-only="true"] { display: none; }
    .surfdoc .surfdoc-drawer { width: 100% !important; height: 70vh; top: auto; bottom: 0; border-left: none; border-top: 1px solid var(--border, #30363d); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
    .surfdoc .surfdoc-toolbar { padding: 0 8px; overflow-x: auto; }
    .surfdoc .surfdoc-toolbar-btn { padding: 4px 8px; font-size: 0.75rem; }
}

/* ============================================================
   75. SCROLLBAR — thin dark scrollbars
   ============================================================ */

.surfdoc ::-webkit-scrollbar { width: 8px; height: 8px; }
.surfdoc ::-webkit-scrollbar-track { background: transparent; }
.surfdoc ::-webkit-scrollbar-thumb { background: var(--border, #30363d); border-radius: var(--radius-sm); }
.surfdoc ::-webkit-scrollbar-thumb:hover { background: var(--text-faint, #484f58); }

/* ============================================================
   76. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   76. STATIC-RENDER CONTAINMENT — interactive overlay/app blocks
   A rendered SurfDoc is a static document with no JS to open/close
   overlays, so command-palette / drawer / modal must NOT float over
   the page (z-index/position:fixed), and app-shell must not consume a
   full viewport height. Render them contained, in normal flow, at
   their actual position in the document as labeled previews.
   ============================================================ */
.surfdoc .surfdoc-command-palette,
.surfdoc .surfdoc-drawer,
.surfdoc .surfdoc-modal {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 1.5rem 0 !important;
    box-shadow: none !important;
    z-index: auto !important;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
/* Overlay preview labels — show block type in top-left corner of each contained overlay */
.surfdoc .surfdoc-command-palette::before { content: "Command Palette"; }
.surfdoc .surfdoc-drawer::before { content: "Drawer"; }
.surfdoc .surfdoc-modal::before { content: "Modal"; }
.surfdoc .surfdoc-command-palette::before,
.surfdoc .surfdoc-drawer::before,
.surfdoc .surfdoc-modal::before {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-weight: var(--font-weight-semibold);
    color: var(--text-muted);
    padding: 6px 12px 6px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-alt);
}
/* Modal title — <strong class="surfdoc-modal-title"> replaces bare <h2> so it stays out of TOC */
.surfdoc .surfdoc-modal .surfdoc-modal-title {
    display: block;
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    padding: 12px 20px 8px;
    color: var(--text);
}
.surfdoc .surfdoc-app-shell {
    height: auto !important;
    min-height: 300px;
    max-height: 460px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin: 1.5rem 0;
}

/* ============================================================
   77. INFRA / APP-SPEC CONFIG CARDS
   Styled as compact bordered cards with a mono label header.
   <strong class="surfdoc-infra-label"> replaces bare <h4> so
   headings do NOT enter the TOC.
   ============================================================ */
.surfdoc-infra-card {
    margin: 0.75rem 0;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
    font-size: var(--font-size-caption);
}
.surfdoc-infra-label {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-muted);
    margin-bottom: 6px;
}
.surfdoc-infra-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.surfdoc-infra-card li {
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    color: var(--text);
    line-height: 1.5;
}
.surfdoc-infra-card li code {
    background: transparent;
    padding: 0;
    font-size: inherit;
    color: var(--accent-light);
}
/* Deploy badge — env chip inside the deploy card */
.surfdoc-deploy-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    margin-bottom: 6px;
}
/* Route card — method badge coloring */
.surfdoc-infra-card.surfdoc-route { padding: 10px 14px; }
.surfdoc-route-head { margin-bottom: 8px; }
.surfdoc-route-method {
    display: inline-block;
    padding: 1px 7px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    margin-right: 6px;
}
.surfdoc-method-get { background: rgba(34,197,94,0.12); color: var(--success); }
.surfdoc-method-post { background: rgba(59,130,246,0.12); color: var(--accent); }
.surfdoc-method-put { background: rgba(245,158,11,0.12); color: var(--warning); }
.surfdoc-method-patch { background: rgba(245,158,11,0.12); color: var(--warning); }
.surfdoc-method-delete { background: rgba(239,68,68,0.12); color: var(--danger); }
.surfdoc-route-path { font-size: var(--font-size-caption); }
.surfdoc-route-auth { font-size: var(--font-size-micro); color: var(--text-muted); margin-left: 4px; }
/* Model table — inherits .surfdoc-data but needs a bit of breathing room */
.surfdoc-model .surfdoc-model-table { margin-top: 6px; }
.surfdoc-model-constraints { font-size: var(--font-size-micro); color: var(--text-muted); }
/* Schema name — already has a class so it doesn't enter TOC; style it */
.surfdoc-schema-name {
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-muted);
    margin: 0 0 6px;
}
/* App section wrapper */
.surfdoc-app {
    margin: 1.5rem 0;
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
    overflow: hidden;
}
.surfdoc-app-header {
    padding: 10px 14px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: var(--font-size-caption);
    color: var(--text);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.surfdoc-app > .surfdoc-infra-card { margin: 8px; }
/* Smoke check table */
.surfdoc-smoke { width: 100%; border-collapse: collapse; font-size: var(--font-size-micro); font-family: var(--font-mono); }
.surfdoc-smoke th { text-align: left; padding: 4px 8px; background: var(--surface); border-bottom: 1px solid var(--border); font-weight: var(--font-weight-semibold); color: var(--text-muted); }
.surfdoc-smoke td { padding: 4px 8px; border-bottom: 1px solid var(--border); color: var(--text); }
.surfdoc-smoke tbody tr:last-child td { border-bottom: none; }

/* ============================================================
   78. DATA-DRIVEN BLOCK PREVIEW STATES
   Static sample content for blocks that fetch /api/... (404 in demo).
   Each block gets a tasteful preview so the demo shows no blank boxes.
   ============================================================ */

/* Suppress the generic ::after "$ " prompt on terminals that have their own preview content */
.surfdoc .surfdoc-terminal.surfdoc-terminal-preview::after { content: "" !important; display: none !important; }

/* Terminal preview */
.surfdoc-terminal-preview {
    font-family: var(--font-mono);
    font-size: var(--font-size-caption);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin: 1rem 0;
    color: var(--text);
}
.surfdoc-terminal-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border);
}
.surfdoc-terminal-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.surfdoc-terminal-dot-red { background: #ff5f57; }
.surfdoc-terminal-dot-yellow { background: #febc2e; }
.surfdoc-terminal-dot-green { background: #28c840; }
.surfdoc-terminal-title { font-size: var(--font-size-micro); color: var(--text-muted); margin-left: 4px; }
.surfdoc-terminal-body { margin: 0; padding: 10px 14px; overflow-x: auto; }
.surfdoc-terminal-prompt { color: var(--success); user-select: none; margin-right: 6px; }
.surfdoc-terminal-out { color: var(--text-muted); }
.surfdoc-terminal-cursor {
    display: inline-block;
    width: 7px;
    height: 14px;
    background: var(--text);
    vertical-align: text-bottom;
    animation: surfdoc-blink 1.1s step-end infinite;
}
@keyframes surfdoc-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Chart preview */
.surfdoc-chart-preview {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
    margin: 1rem 0;
    overflow: hidden;
}
.surfdoc-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.surfdoc-chart-type-label {
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-muted);
    font-weight: var(--font-weight-semibold);
}
.surfdoc-chart-source-label {
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}
.surfdoc-chart-svg {
    display: block;
    width: 100%;
    height: auto;
    padding: 8px;
    color: var(--text-muted);
}

/* Board preview — sample cards */
.surfdoc-board-card-sample {
    padding: 8px 10px;
    background: var(--surface);
    border: var(--ws-border-w) var(--ws-border-style) var(--border);
    border-radius: var(--ws-radius-card);
    font-size: var(--font-size-caption);
    color: var(--text);
    line-height: 1.4;
}

/* Dashboard preview tiles */
.surfdoc-dashboard-preview .surfdoc-dashboard-grid {
    padding: 12px;
    gap: 10px;
}
.surfdoc-dashboard-tile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border: var(--ws-border-w) var(--ws-border-style) var(--border);
    border-radius: var(--ws-radius-card);
    background: var(--surface);
}
.surfdoc-dashboard-tile-value {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    color: var(--text);
    letter-spacing: var(--tracking-tight);
    line-height: 1.1;
}
.surfdoc-dashboard-tile-label {
    font-size: var(--font-size-micro);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}
.surfdoc-dashboard-tile-trend {
    font-size: var(--font-size-micro);
    font-weight: var(--font-weight-semibold);
    margin-top: 2px;
}

/* Feed preview */
.surfdoc-feed-preview .surfdoc-feed-items { gap: 0; }
.surfdoc-feed-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}
.surfdoc-feed-item:last-child { border-bottom: none; }
.surfdoc-feed-avatar {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-circle);
    background: var(--accent);
    color: #fff;
    font-size: var(--font-size-micro);
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
}
.surfdoc-feed-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.surfdoc-feed-name {
    display: block;
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-semibold);
    color: var(--text);
}
.surfdoc-feed-text {
    display: block;
    font-size: var(--font-size-caption);
    color: var(--text-muted);
    line-height: 1.4;
}
.surfdoc-feed-time {
    display: block;
    font-size: var(--font-size-micro);
    color: var(--text-muted);
    margin-top: 2px;
}

/* Log stream preview */
.surfdoc-log-stream-preview {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #0d0d14;
    color: #8b8ba0;
    margin: 1rem 0;
    overflow: hidden;
}
.surfdoc-log-stream-preview pre {
    margin: 0;
    padding: 10px 14px;
    overflow-x: auto;
    font-size: var(--font-size-micro);
    line-height: 1.7;
}
.surfdoc-log-info { color: #60a5fa; }
.surfdoc-log-warn { color: var(--warning); }
.surfdoc-log-error { color: var(--danger); }

/* Problem list preview — empty state */
.surfdoc-problem-list-preview {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
    margin: 1rem 0;
    padding: 16px 14px;
}
.surfdoc-problem-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-caption);
    color: var(--text-muted);
    font-style: italic;
}
.surfdoc-problem-empty svg { color: var(--success); flex-shrink: 0; }

/* Nav tree preview */
.surfdoc-nav-tree-preview {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
    margin: 1rem 0;
    padding: 8px 0;
}
.surfdoc-tree-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.surfdoc-tree-list li { list-style: none; }
.surfdoc-tree-list li::marker { content: ""; display: none; }
.surfdoc-tree-list .surfdoc-tree-list {
    padding-left: 16px;
}
.surfdoc-tree-folder,
.surfdoc-tree-file {
    display: flex;
    align-items: center;
    padding: 3px 12px;
    font-size: var(--font-size-caption);
    font-family: var(--font-mono);
    color: var(--text);
    cursor: default;
    line-height: 1.5;
}
.surfdoc-tree-toggle {
    display: inline-block;
    width: 14px;
    font-size: 9px;
    color: var(--text-muted);
    margin-right: 4px;
    flex-shrink: 0;
}
.surfdoc-tree-file { padding-left: 30px; color: var(--text-muted); }
.surfdoc-tree-active { color: var(--accent) !important; background: var(--accent-soft); border-radius: var(--radius-sm); }

/* Block editor preview */
.surfdoc-block-editor-preview {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    margin: 1rem 0;
    padding: 20px 24px;
    min-height: 120px;
}
.surfdoc-block-editor-h1 {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    color: var(--text);
    margin-bottom: 8px;
}
.surfdoc-block-editor-p {
    font-size: var(--font-size-ui);
    color: var(--text-muted);
    margin-bottom: 16px;
    line-height: 1.6;
}
.surfdoc-block-editor-add {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-caption);
    color: var(--text-muted);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    padding: 4px 12px;
    cursor: default;
}
.surfdoc-block-editor-p kbd {
    display: inline-block;
    padding: 1px 5px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    background: var(--surface-alt);
    color: var(--text);
}

/* ============================================================
   RICH SHELL (::nav drawer / ::footer brand column / theme)
   Structural layout for the cloudsurf.com-quality shell. Opt-in
   via ::nav[drawer ...] / ::footer[brand ...]. Site-specific polish
   (frosted glass, starfield) is layered on by the consumer's own CSS;
   these defaults give every consumer a clean working shell.
   The drawer is driven by `.drawer-open` on <html> (set by the
   toggleDrawer()/closeDrawer() helpers to_html_page emits).
   ============================================================ */

.surfdoc-shell-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--shell-nav-bg);
    border-bottom: 1px solid var(--border);
}
.surfdoc-shell-nav-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
}
.surfdoc-shell-nav-spacer { flex: 1; }
.surfdoc-shell-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
}
.surfdoc-shell-emblem { width: 34px; height: 34px; border-radius: 8px; }
.surfdoc-shell-reg {
    font-size: 0.55em;
    vertical-align: super;
    color: var(--text-muted);
    font-weight: 400;
    margin-left: 1px;
}
.surfdoc-shell-menu-btn,
.surfdoc-shell-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px = the minimum accessible tap target (Apple HIG / WCAG 2.5.5). */
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--shell-control-border);
    border-radius: 50%;
    background: var(--shell-btn-bg);
    color: var(--text);
    cursor: pointer;
    transition: background 150ms ease;
}
.surfdoc-shell-theme-toggle { margin-left: 4px; }
.surfdoc-shell-menu-btn:hover,
.surfdoc-shell-theme-toggle:hover { background: var(--surface-hover); }

.surfdoc-shell-nav-links { display: flex; align-items: center; gap: 4px; }

/* Inline menu links — the nav's flat items surface on the bar itself on larger
   screens (the grouped/product links stay in the drawer). Hidden on small
   screens where the hamburger + drawer is the menu. */
.surfdoc-shell-nav-inline { display: none; }
@media (min-width: 1024px) {
    .surfdoc-shell-nav-inline { display: flex; align-items: center; gap: 2px; margin-left: var(--ws-space-sm, 16px); }
}
.surfdoc-shell-nav-link {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 150ms ease, background 150ms ease;
}
/* (0,2,0) so the global `a:hover` (0,1,1) can't repaint the label. */
.surfdoc-shell-nav .surfdoc-shell-nav-link:hover { color: var(--text); background: var(--surface-hover); text-decoration: none; }
.surfdoc-shell-nav .surfdoc-shell-nav-link.is-active { color: var(--text); font-weight: 600; }
.surfdoc-shell-nav-cta {
    padding: 6px 16px;
    font-size: 0.875rem;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--accent-text);
    text-decoration: none;
    font-weight: 600;
}
/* (0,2,0) beats the global `a:hover` (0,1,1) which would otherwise repaint the
   label to var(--accent-hover) — invisible on the accent-filled button. Keep the
   on-accent label; darken the fill on hover instead. */
.surfdoc-shell-nav-cta:hover {
    color: var(--accent-text);
    filter: brightness(0.94);
    text-decoration: none;
}

/* Theme toggle sun/moon swap */
.surfdoc-shell-icon-sun { display: none; }
[data-theme="dark"] .surfdoc-shell-icon-sun { display: block; }
[data-theme="dark"] .surfdoc-shell-icon-moon { display: none; }

/* Scrim + slide-in drawer */
.surfdoc-shell-scrim {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: rgba(8, 12, 24, 0.28);
    opacity: 0;
    pointer-events: none;
    transition: opacity 280ms ease;
}
.drawer-open .surfdoc-shell-scrim { opacity: 1; pointer-events: auto; }

.surfdoc-shell-drawer {
    position: fixed;
    z-index: 200;
    top: 12px;
    bottom: 12px;
    left: 12px;
    width: min(320px, calc(100vw - 24px));
    border-radius: 24px;
    background: var(--shell-drawer-bg);
    border: 1px solid var(--border);
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
    transform: translateX(calc(-100% - 16px));
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
}
.drawer-open .surfdoc-shell-drawer { transform: translateX(0); }
.surfdoc-shell-drawer-inner { height: 100%; overflow-y: auto; padding: 18px 18px 28px; }
.surfdoc-shell-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.surfdoc-shell-drawer-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text);
}
.surfdoc-shell-drawer-emblem { width: 28px; height: 28px; border-radius: 7px; }
.surfdoc-shell-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--shell-control-border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: background 150ms ease;
}
.surfdoc-shell-drawer-close:hover { background: var(--surface-hover); }
.surfdoc-shell-drawer-nav { display: flex; flex-direction: column; gap: 2px; }
.surfdoc-shell-drawer-label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    padding: 16px 12px 6px;
}
.surfdoc-shell-drawer-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 12px;
    color: var(--text);
    text-decoration: none;
    /* Hosts re-scale the menu type (e.g. an apple.com-style large-type menu)
       without forking the drawer. */
    font-size: var(--ws-drawer-link-size, 0.9375rem);
    font-weight: var(--ws-drawer-link-weight, 500);
    transition: background 150ms ease, color 150ms ease;
}
/* Opening the drawer cascades its entries in (apple.com menu rhythm): each
   row fades/slides with a small per-row delay. Inert under reduced motion
   and while the drawer is closed (the animation re-runs on every open since
   `.drawer-open` re-applies the rules). */
@media (prefers-reduced-motion: no-preference) {
    .drawer-open .surfdoc-shell-drawer-nav > * {
        animation: surfdoc-drawer-cascade 320ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }
    .drawer-open .surfdoc-shell-drawer-nav > :nth-child(1) { animation-delay: 30ms; }
    .drawer-open .surfdoc-shell-drawer-nav > :nth-child(2) { animation-delay: 60ms; }
    .drawer-open .surfdoc-shell-drawer-nav > :nth-child(3) { animation-delay: 90ms; }
    .drawer-open .surfdoc-shell-drawer-nav > :nth-child(4) { animation-delay: 120ms; }
    .drawer-open .surfdoc-shell-drawer-nav > :nth-child(5) { animation-delay: 150ms; }
    .drawer-open .surfdoc-shell-drawer-nav > :nth-child(6) { animation-delay: 180ms; }
    .drawer-open .surfdoc-shell-drawer-nav > :nth-child(7) { animation-delay: 210ms; }
    .drawer-open .surfdoc-shell-drawer-nav > :nth-child(8) { animation-delay: 240ms; }
    .drawer-open .surfdoc-shell-drawer-nav > :nth-child(9) { animation-delay: 270ms; }
    .drawer-open .surfdoc-shell-drawer-nav > :nth-child(10) { animation-delay: 300ms; }
    .drawer-open .surfdoc-shell-drawer-nav > :nth-child(n+11) { animation-delay: 330ms; }
}
@keyframes surfdoc-drawer-cascade {
    from { opacity: 0; transform: translateX(14px); }
    to { opacity: 1; transform: none; }
}
.surfdoc-shell-drawer-link:hover { background: var(--shell-drawer-link-hover-bg); color: var(--accent); }
.surfdoc-shell-drawer-link.is-active { color: var(--text); background: var(--shell-drawer-link-hover-bg); font-weight: 600; }
.surfdoc-shell-drawer-link:hover .surfdoc-shell-drawer-link-icon,
.surfdoc-shell-drawer-link:hover .surfdoc-shell-drawer-link-emblem { color: var(--accent); }
.surfdoc-shell-drawer-link-icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-muted); transition: color 150ms ease; }
.surfdoc-shell-drawer-link-icon svg { width: 18px; height: 18px; }
/* Product emblems are tinted single-color via a CSS mask (asset path passed as
   --emblem) so they read like the monochrome line icons and recolor on hover. */
.surfdoc-shell-drawer-link-emblem {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--text-muted);
    background-color: currentColor;
    -webkit-mask-image: var(--emblem);
    mask-image: var(--emblem);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: color 150ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .surfdoc-shell-drawer,
    .surfdoc-shell-scrim { transition: none; }
    .surfdoc-reveal { opacity: 1; transform: none; transition: none; }
}

/* Footer brand column */
/* Page-load intro — the hero's content staggers in on load and the shell nav
   fades down with it (reference: surf.space landing, lp-fade-up: 16px rise,
   0.8s cubic-bezier(0.22,0.61,0.36,1), delays stepping 100ms per element).
   Pure CSS (`both` fill), so content is never stranded without JS; the whole
   block is inert under prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
    @keyframes surfdoc-intro-up {
        from { opacity: 0; transform: translateY(16px); }
        to { opacity: 1; transform: none; }
    }
    @keyframes surfdoc-intro-fade {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    .surfdoc-shell-nav { animation: surfdoc-intro-fade 0.6s ease-out both; }
    .surfdoc-hero:not(.surfdoc-hero-left) .surfdoc-hero-inner > * {
        opacity: 0;
        animation: surfdoc-intro-up 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }
    .surfdoc-hero:not(.surfdoc-hero-left) .surfdoc-hero-inner > :nth-child(1) { animation-delay: 0.05s; }
    .surfdoc-hero:not(.surfdoc-hero-left) .surfdoc-hero-inner > :nth-child(2) { animation-delay: 0.15s; }
    .surfdoc-hero:not(.surfdoc-hero-left) .surfdoc-hero-inner > :nth-child(3) { animation-delay: 0.25s; }
    .surfdoc-hero:not(.surfdoc-hero-left) .surfdoc-hero-inner > :nth-child(4) { animation-delay: 0.35s; }
    .surfdoc-hero:not(.surfdoc-hero-left) .surfdoc-hero-inner > :nth-child(5) { animation-delay: 0.45s; }
    .surfdoc-hero:not(.surfdoc-hero-left) .surfdoc-hero-inner > :nth-child(n+6) { animation-delay: 0.55s; }
}

/* Scroll-reveal — shell pages fade sections in as they enter the viewport.
   The class pair is applied by the shell's IntersectionObserver script, which
   bails (leaving content fully visible) without JS, without IO support, or
   under prefers-reduced-motion — so `.surfdoc-reveal` only ever exists where
   the reveal can actually complete. */
.surfdoc-reveal { opacity: 0; transform: translateY(16px); transition: opacity 600ms cubic-bezier(0.2, 0.6, 0.2, 1), transform 600ms cubic-bezier(0.2, 0.6, 0.2, 1); }
.surfdoc-reveal.surfdoc-reveal-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .surfdoc-reveal { opacity: 1; transform: none; transition: none; }
}

.surfdoc-shell-footer { padding: 48px 0 32px; }
.surfdoc-shell-footer-inner { max-width: 1120px; padding: 0 24px; margin: 0 auto; }
.surfdoc-shell-footer-grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 32px;
}
.surfdoc-shell-footer-brand-col { display: flex; flex-direction: column; gap: 8px; }
.surfdoc-shell-footer-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
}
.surfdoc-shell-footer-emblem { width: 34px; height: 34px; border-radius: 6px; }
.surfdoc-shell-footer-tagline { font-size: 0.875rem; color: var(--text-muted); line-height: 1.5; }
.surfdoc-shell-footer-col { display: flex; flex-direction: column; gap: 8px; }
.surfdoc-shell-footer-heading {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}
.surfdoc-shell-footer-col a { font-size: 0.875rem; color: var(--text-muted); text-decoration: none; transition: color 150ms ease; }
.surfdoc-shell-footer-col a:hover { color: var(--text); }
.surfdoc-shell-footer-copyright { font-size: 0.8125rem; color: var(--text-muted); padding-top: 24px; }

@media (max-width: 768px) {
    .surfdoc-shell-footer-grid { grid-template-columns: 1fr 1fr; }
    .surfdoc-shell-nav-links { display: none; }
}

/* ============================================================
   POST-GRID — blog / news / events index (::post-grid)
   ============================================================ */
.surfdoc-post-grid {
    padding: var(--ws-section-pad-compact) 0 var(--ws-section-pad);
    /* Full-bleed band (capped) — the 1120px inner column outgrows the 48rem
       reading column, so the band must break out for it to be real. */
    width: var(--ws-bleed-width); max-width: var(--ws-bleed-width);
    margin-left: var(--ws-bleed-margin); margin-right: var(--ws-bleed-margin);
}
.surfdoc-pg2-inner { max-width: min(var(--ws-band-inner), 100%); margin: 0 auto; padding: 0 var(--ws-space-md); }
.surfdoc-post-grid-head { max-width: 720px; margin: 0 0 36px; }
.surfdoc-post-grid-title {
    font-family: var(--font-heading);
    font-size: var(--font-size-display);
    font-weight: var(--font-weight-extrabold);
    letter-spacing: var(--tracking-tight);
    line-height: 1.1;
    color: var(--text);
    margin: 0 0 12px;
}
.surfdoc-post-grid-subtitle {
    font-size: var(--font-size-body-lg);
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
}
.surfdoc-post-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}
.surfdoc-post-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: var(--ws-border-w) var(--ws-border-style) var(--border);
    border-radius: var(--ws-post-card-radius, var(--ws-radius-card));
    background: var(--ws-post-card-bg, var(--surface));
    box-shadow: var(--ws-shadow);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 180ms ease, border-color 180ms ease;
}
.surfdoc-post-card:hover {
    box-shadow: var(--ws-shadow-hover);
    border-color: var(--accent);
}
/* The whole card is an <a>, so the prose `.surfdoc a:hover` underline would
   propagate to the card's title/excerpt. Suppress it (0,2,2 beats 0,2,1). */
.surfdoc a.surfdoc-post-card,
.surfdoc a.surfdoc-post-card:hover { text-decoration: none; }
.surfdoc-post-card-img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--surface-alt);
    background-image: var(--img);
    background-size: cover;
    background-position: center;
}
.surfdoc-post-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 22px 22px;
    flex: 1;
}
.surfdoc-post-card-meta {
    font-size: var(--font-size-micro);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-muted);
}
.surfdoc-post-card-title {
    font-family: var(--font-heading);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
    color: var(--text);
    margin: 0;
}
.surfdoc-post-card-excerpt {
    font-size: var(--font-size-caption);
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.surfdoc-post-card-more {
    margin-top: auto;
    padding-top: 6px;
    font-size: var(--font-size-ui);
    font-weight: var(--font-weight-semibold);
    color: var(--accent);
}

/* ============================================================
   GATE — access-code card (::gate)
   ============================================================ */
.surfdoc-gate {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 48px 24px;
}
.surfdoc-gate-card {
    width: 100%;
    max-width: 400px;
    padding: 36px 32px;
    text-align: center;
    background: var(--surface);
    border: var(--ws-border-w) var(--ws-border-style) var(--border);
    border-radius: var(--ws-radius-card);
    box-shadow: var(--ws-shadow-hover);
}
.surfdoc-gate-title {
    font-family: var(--font-heading);
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-tight);
    color: var(--text);
    margin: 0 0 8px;
}
.surfdoc-gate-subtitle {
    font-size: var(--font-size-body);
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0 0 24px;
}
.surfdoc-gate-error {
    font-size: var(--font-size-caption);
    color: var(--danger);
    background: var(--danger-light);
    border-radius: var(--radius);
    padding: 8px 12px;
    margin: 0 0 16px;
}
.surfdoc-gate-input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    font-size: var(--font-size-body);
    color: var(--text);
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 14px;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.surfdoc-gate-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.surfdoc-gate-submit {
    width: 100%;
    padding: 12px 18px;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: var(--accent-text);
    background: var(--accent);
    border: none;
    border-radius: var(--ws-radius-btn);
    cursor: pointer;
    transition: background 150ms ease;
}
.surfdoc-gate-submit:hover { background: var(--accent-hover); }

/* ============================================================
   READING FRAME — toolbar + centered sheet (PageConfig.reading_frame)
   ============================================================ */
.surfdoc-doc-toolbar {
    position: sticky;
    top: var(--shell-nav-h);
    z-index: 50;
    /* Transparent floating bar — no background/border; the back capsule carries
       its own surface. pointer-events lets clicks pass through to the content
       everywhere except the button itself. */
    pointer-events: none;
}
.surfdoc-doc-toolbar .surfdoc-doc-back,
.surfdoc-doc-toolbar .surfdoc-doc-title { pointer-events: auto; }
.surfdoc-doc-toolbar-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    /* Full-width so the back button sits in the page's left margin, clear of the
       centered sheet; the title stays centered across the viewport. */
    padding: 10px 32px;
}
/* iOS-style capsule back button: matches the shell's pill controls (uses the
   same --shell-btn-bg / --shell-control-border hooks, so it inherits each
   consumer's skin — e.g. cloudsurf's frosted glass). */
.surfdoc-doc-back {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 6px 14px 6px 11px;
    border: 1px solid var(--shell-control-border);
    border-radius: 999px;
    background: var(--shell-btn-bg);
    font-size: var(--font-size-ui);
    font-weight: var(--font-weight-medium);
    color: var(--text);
    text-decoration: none;
    transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}
.surfdoc-doc-back:hover { color: var(--accent); border-color: var(--accent); }
/* Kill the prose `.surfdoc a:hover` underline on the capsule (0,2,2 > 0,2,1). */
.surfdoc a.surfdoc-doc-back,
.surfdoc a.surfdoc-doc-back:hover { text-decoration: none; }
.surfdoc-doc-title {
    flex: 1;
    text-align: center;
    font-size: var(--font-size-ui);
    font-weight: var(--font-weight-semibold);
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.surfdoc-doc-toolbar-spacer { flex-shrink: 0; width: 64px; }
/* The frame hosts its own centered sheet, so the main wrapper (which also
   carries .surfdoc) must NOT impose the base document max-width/padding — let
   the toolbar + stage run full-bleed and only the sheet stay constrained. */
.surfdoc-doc-main { max-width: none; padding: 0; }
.surfdoc-doc-stage {
    padding: 104px 24px 96px;
    /* Transparent by default so the host page background shows through behind
       the sheet; a consumer can set --doc-stage-bg for a distinct stage band. */
    background: var(--doc-stage-bg, transparent);
}
.surfdoc-doc-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 48px 56px;
    background: var(--ws-doc-page-bg, var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--ws-doc-page-radius, var(--ws-radius-card));
    box-shadow: var(--ws-shadow-hover);
}
@media (max-width: 768px) {
    .surfdoc-doc-page { padding: 32px 24px; }
    .surfdoc-doc-toolbar-spacer { width: 0; }
}

/* ── ::booking — self-contained scheduling widget ───────────────────────────
   Service radios + month calendar + slot picker + confirmation. Themed via
   the same tokens as the rest of the doc; driven by BOOKING_WIDGET_JS. */
.surfdoc-booking { border: var(--ws-border-w) var(--ws-border-style) var(--border); border-radius: var(--ws-radius-card); background: var(--surface-alt); padding: 20px; margin: 1.5rem 0; box-shadow: var(--ws-shadow); }
.surfdoc-booking-head { font-size: var(--font-size-h3); font-weight: 700; margin: 0 0 14px; color: var(--text); }
.surfdoc-booking-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; align-items: start; }
.surfdoc-booking-col { min-width: 0; }
.surfdoc-booking-label { font-size: var(--font-size-caption); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 8px; }
.surfdoc-booking-services { display: flex; flex-direction: column; gap: 8px; }
.surfdoc-booking-service { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 10px 12px; border: var(--ws-border-w) var(--ws-border-style) var(--border); border-radius: var(--ws-control-radius, 8px); background: var(--surface); color: var(--text); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.surfdoc-booking-service:hover { border-color: var(--accent); }
.surfdoc-booking-service.is-sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); box-shadow: inset 0 0 0 1px var(--accent); }
.surfdoc-booking-service-name { font-weight: 600; }
.surfdoc-booking-service-meta { font-size: var(--font-size-caption); color: var(--text-muted); }
.surfdoc-booking-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.surfdoc-booking-month { font-weight: 700; color: var(--text); }
.surfdoc-booking-nav { width: 32px; height: 32px; border-radius: var(--ws-control-radius, 8px); border: var(--ws-border-w) var(--ws-border-style) var(--border); background: var(--surface); color: var(--text); cursor: pointer; font-size: 1.1rem; line-height: 1; }
.surfdoc-booking-nav:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-ink, var(--accent)); }
.surfdoc-booking-nav:disabled { opacity: 0.35; cursor: default; }
.surfdoc-booking-weekdays, .surfdoc-booking-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.surfdoc-booking-weekdays { margin-bottom: 4px; }
.surfdoc-booking-weekdays span { text-align: center; font-size: 0.7rem; font-weight: 600; color: var(--text-faint); text-transform: uppercase; }
.surfdoc-booking-day { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; min-height: 34px; border-radius: var(--ws-control-radius, 8px); font-size: var(--font-size-ui); border: 1px solid transparent; }
.surfdoc-booking-day.is-pad { visibility: hidden; }
.surfdoc-booking-day.is-empty, .surfdoc-booking-day.is-full { color: var(--text-faint); }
.surfdoc-booking-day.is-full { text-decoration: line-through; }
button.surfdoc-booking-day.is-open { cursor: pointer; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent-ink, var(--accent)); font-weight: 600; border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
button.surfdoc-booking-day.is-open:hover { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
button.surfdoc-booking-day.is-sel { background: var(--accent); color: var(--accent-text, #fff); border-color: var(--accent); }
.surfdoc-booking-hint { color: var(--text-muted); font-size: var(--font-size-ui); margin: 0; }
.surfdoc-booking-slots-head { font-weight: 600; margin-bottom: 10px; color: var(--text); }
.surfdoc-booking-slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.surfdoc-booking-slot { padding: 8px 10px; border-radius: var(--ws-control-radius, 8px); border: var(--ws-border-w) var(--ws-border-style) var(--border); background: var(--surface); color: var(--text); cursor: pointer; font-size: var(--font-size-ui); transition: border-color 0.15s, background 0.15s; }
.surfdoc-booking-slot:hover { border-color: var(--accent); }
.surfdoc-booking-slot.is-sel { background: var(--accent); color: var(--accent-text, #fff); border-color: var(--accent); }
.surfdoc-booking-form { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
.surfdoc-booking-summary { font-weight: 600; color: var(--accent-ink, var(--accent)); }
.surfdoc-booking-field { display: flex; flex-direction: column; gap: 4px; font-size: var(--font-size-caption); font-weight: 600; color: var(--text-muted); }
.surfdoc-booking-field input { padding: 9px 11px; border-radius: var(--ws-control-radius, 8px); border: var(--ws-border-w) var(--ws-border-style) var(--border); background: var(--surface); color: var(--text); font-size: var(--font-size-ui); font-weight: 400; }
.surfdoc-booking-field input:focus { outline: 2px solid var(--accent-ink, var(--accent)); outline-offset: 1px; border-color: var(--accent); }
.surfdoc-booking-confirm-btn { align-self: flex-start; padding: 10px 20px; border-radius: var(--ws-control-radius, 8px); border: var(--ws-border-w) var(--ws-border-style) var(--ws-btn-border); background: var(--ws-btn-bg); color: var(--ws-btn-color); font-weight: 600; font-size: var(--font-size-ui); cursor: pointer; }
.surfdoc-booking-confirm-btn:hover { filter: brightness(1.05); }
.surfdoc-booking-confirm { margin-top: 18px; }
.surfdoc-booking-confirm-card { padding: 18px 20px; border-radius: var(--ws-radius-card); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.surfdoc-booking-confirm-title { font-weight: 700; font-size: var(--font-size-h3); color: var(--text); margin-bottom: 6px; }
.surfdoc-booking-confirm-detail { margin: 0 0 6px; color: var(--text-muted); }
.surfdoc-booking-confirm-ref { margin: 0; font-family: var(--font-mono, monospace); font-size: var(--font-size-caption); color: var(--text-faint); }

/* ── ::store — self-contained storefront widget ─────────────────────────────
   Category filter + product grid with add-to-cart + live cart + checkout. */
.surfdoc-store { border: var(--ws-border-w) var(--ws-border-style) var(--border); border-radius: var(--ws-radius-card); background: var(--surface-alt); padding: 20px; margin: 1.5rem 0; box-shadow: var(--ws-shadow); }
.surfdoc-store-head { font-size: var(--font-size-h3); font-weight: 700; margin: 0 0 14px; color: var(--text); }
.surfdoc-store-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: start; }
.surfdoc-store-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.surfdoc-store-chip { padding: 6px 14px; border-radius: var(--ws-radius-chip); border: var(--ws-border-w) var(--ws-border-style) var(--border); background: var(--surface); color: var(--text-muted); cursor: pointer; font-size: var(--font-size-caption); }
.surfdoc-store-chip:hover { border-color: var(--accent); color: var(--text); }
.surfdoc-store-chip.is-sel { background: var(--accent); border-color: var(--accent); color: var(--accent-text, #fff); }
.surfdoc-store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.surfdoc-store-card { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: var(--ws-border-w) var(--ws-border-style) var(--border); border-radius: var(--ws-radius-card); background: var(--surface); }
.surfdoc-store-badge { align-self: flex-start; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 7px; border-radius: var(--ws-control-radius, 6px); background: color-mix(in srgb, var(--accent) 15%, var(--surface)); color: var(--accent-ink, var(--accent)); }
.surfdoc-store-name { font-weight: 600; color: var(--text); }
.surfdoc-store-blurb { margin: 0; font-size: var(--font-size-caption); color: var(--text-muted); flex: 1; }
.surfdoc-store-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.surfdoc-store-price { font-weight: 700; color: var(--text); }
.surfdoc-store-add { padding: 6px 14px; border-radius: var(--ws-control-radius, 8px); border: var(--ws-border-w) var(--ws-border-style) var(--ws-btn-border); background: var(--ws-btn-bg); color: var(--ws-btn-color); font-weight: 600; cursor: pointer; font-size: var(--font-size-caption); }
.surfdoc-store-add:hover { filter: brightness(1.05); }
.surfdoc-store-cart { border: var(--ws-border-w) var(--ws-border-style) var(--border); border-radius: var(--ws-radius-card); background: var(--surface); padding: 16px; position: sticky; top: 80px; }
.surfdoc-store-cart-head { font-weight: 700; color: var(--text); margin-bottom: 12px; }
.surfdoc-store-empty { color: var(--text-faint); font-size: var(--font-size-caption); margin: 0; }
.surfdoc-store-line { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.surfdoc-store-line-name { font-size: var(--font-size-caption); color: var(--text); }
.surfdoc-store-line-total { font-size: var(--font-size-caption); font-weight: 600; color: var(--text); text-align: right; }
.surfdoc-store-qty { display: inline-flex; align-items: center; gap: 8px; }
.surfdoc-store-qty button { width: 24px; height: 24px; border-radius: var(--ws-control-radius, 6px); border: 1px solid var(--border); background: var(--surface-alt); color: var(--text); cursor: pointer; line-height: 1; font-size: 0.9rem; }
.surfdoc-store-qty button:hover { border-color: var(--accent); }
.surfdoc-store-qty-n { min-width: 16px; text-align: center; font-size: var(--font-size-caption); }
.surfdoc-store-cart-foot { margin-top: 14px; }
.surfdoc-store-total { display: flex; justify-content: space-between; font-weight: 700; color: var(--text); margin-bottom: 12px; }
.surfdoc-store-checkout-btn, .surfdoc-store-place-btn { width: 100%; padding: 10px; border-radius: var(--ws-control-radius, 8px); border: var(--ws-border-w) var(--ws-border-style) var(--ws-btn-border); background: var(--ws-btn-bg); color: var(--ws-btn-color); font-weight: 600; cursor: pointer; font-size: var(--font-size-ui); }
.surfdoc-store-checkout-btn:disabled { opacity: 0.4; cursor: default; }
.surfdoc-store-form { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; max-width: 460px; }
.surfdoc-store-form-title { font-weight: 700; font-size: var(--font-size-h3); color: var(--text); }
.surfdoc-store-field { display: flex; flex-direction: column; gap: 4px; font-size: var(--font-size-caption); font-weight: 600; color: var(--text-muted); }
.surfdoc-store-field input { padding: 9px 11px; border-radius: var(--ws-control-radius, 8px); border: var(--ws-border-w) var(--ws-border-style) var(--border); background: var(--surface); color: var(--text); font-size: var(--font-size-ui); font-weight: 400; }
.surfdoc-store-field input:focus { outline: 2px solid var(--accent-ink, var(--accent)); outline-offset: 1px; border-color: var(--accent); }
.surfdoc-store-place-btn { align-self: flex-start; width: auto; padding: 10px 22px; }
.surfdoc-store-confirm { margin-top: 18px; }
.surfdoc-store-confirm-card { padding: 18px 20px; border-radius: var(--ws-radius-card); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.surfdoc-store-confirm-title { font-weight: 700; font-size: var(--font-size-h3); color: var(--text); margin-bottom: 6px; }
.surfdoc-store-confirm-detail { margin: 0 0 6px; color: var(--text-muted); }
.surfdoc-store-confirm-ref { margin: 0; font-family: var(--font-mono, monospace); font-size: var(--font-size-caption); color: var(--text-faint); }
@media (max-width: 720px) { .surfdoc-store-layout { grid-template-columns: 1fr; } .surfdoc-store-cart { position: static; } }

/* ===== Image slot placeholders (unresolved «IMG:» generation slots) ===== */
.surfdoc-img-slot { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--ws-radius-img); border: var(--ws-border-w) var(--ws-border-style) var(--border); background: color-mix(in srgb, var(--accent) 6%, var(--surface-alt)); }