/* 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. */
    /* Font routing (0.13.2). --font-heading/--font-body are UNSET by default
       (see the typography block below) so "did the doc set a font?" is
       detectable; the concrete default stack lives in the var() fallback.
       Precedence, most specific wins:
         1. doc `::style` fonts — injected as `.surfdoc { --font-heading: … }`
         2. style pack / host page --ws-font-display/--ws-font-body (any scope:
            `:root` blocks, container inline styles)
         3. the default system stack
       The `.surfdoc`-scoped re-resolution lives right after this :root block. */
    --ws-font-display: var(--font-heading, var(--font-sans));   /* hero headline, section + card titles, h1–h3 */
    --ws-font-body: var(--font-body, var(--font-sans));          /* 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;

    /* ── App-shell chrome recipe (0.13.2 visual pass) ─────────────
       Private --sd-* tokens for the interactive chrome families (app-shell,
       sidebar, toolbar, rows, controls, floating layers). Aligned with the
       production Surf shell (tokens.css / surf-shell.css): 120ms ease-out
       state transitions, slate-tinted elevation in light, deeper black in
       dark. NOT part of the --ws-* style-pack contract. */
    --sd-ease: 120ms ease-out;
    --sd-shadow-raise: 0 1px 2px rgba(15, 23, 42, 0.05);
    --sd-shadow-pop: 0 12px 40px rgba(15, 23, 42, 0.16), 0 2px 8px rgba(15, 23, 42, 0.08);
    --sd-shadow-overlay: 0 24px 64px rgba(15, 23, 42, 0.22), 0 4px 12px rgba(15, 23, 42, 0.10);

    /* ── Typography: font stacks ── */
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    /* --font-heading / --font-body are declared `initial` (guaranteed-invalid)
       on purpose: a doc `::style` override or host page SETS them; every
       consumer carries a var() fallback. Giving them a concrete :root value
       here would make "unset" indistinguishable from "set", which is what
       froze doc-scoped font overrides before 0.13.2 (custom properties
       substitute their var()s at computed-value time on the element they're
       declared on, so a :root-resolved indirection never re-reads a
       .surfdoc-scoped override). */
    --font-heading: initial;
    --font-body: initial;
    --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;
}

/* ── Doc-scoped font re-resolution (0.13.2) ──────────────────────
   Ancestor capture: every element that is not itself a doc root records the
   font stacks resolved so far (pack `:root` blocks, container inline tokens,
   host overrides — whatever won the cascade above the doc). `.surfdoc` then
   re-derives the --ws-* slots on the doc root itself, so an injected
   `.surfdoc { --font-heading: …; --font-body: … }` override (the `::style`
   emission) finally reaches every var(--ws-font-*) consumer — while a doc
   with no `::style` fonts falls back to the captured pack/host value.
   :where() keeps specificity at zero. */
:where(:not(.surfdoc)) {
    --sd-font-display-above: var(--ws-font-display);
    --sd-font-body-above: var(--ws-font-body);
}
.surfdoc {
    --ws-font-display: var(--font-heading, var(--sd-font-display-above, var(--font-sans)));
    --ws-font-body: var(--font-body, var(--sd-font-body-above, var(--font-sans)));
}

/* ============================================================
   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 — Surfspace BLUE-NAVY dark palette (G7 ruling,
   2026-08-10: dark neutrals shift from the pure-black family to the
   web-surfspace mockup's blue-navy family). Values measured from
   preview/mockup.html: bg #0b1117 (the ruling's "#0d1420 family" —
   reconciled to the measured mockup value, which is design ground truth),
   sheet #151e28, text #e8eef4, muted #93a4b3, hairline white@9%, accent
   #2E8AD8. Mockup faint #5f7180 fails AA (3.0 on the soft surface), so
   --text-faint lifts to #8496a6 (4.97 on --surface-alt). Light mode is
   untouched (0.13.2). Keep this block and the auto-detect twin below
   IDENTICAL. */
[data-theme="dark"] {
    --accent: #2e8ad8;               /* brand accent (mockup Surf blue) */
    --accent-hover: #2578bd;
    --accent-light: #6ab0e8;
    --accent-soft: rgba(46, 138, 216, 0.18);
    --accent-text: #ffffff;
    --background: #0b1117;           /* mockup body: blue-navy */
    --surface: #151e28;              /* mockup sheet (surface-solid) */
    --surface-alt: #1b2734;          /* soft card, one step off the sheet */
    --surface-hover: #1b2734;
    --surface-code: #10161e;
    --border: rgba(255, 255, 255, 0.09);   /* mockup hairline */
    --border-light: rgba(255, 255, 255, 0.12);
    --text: #e8eef4;                 /* mockup text */
    --text-muted: #93a4b3;           /* mockup muted */
    --text-faint: #8496a6;           /* AA: ≥4.5 on --surface-alt (#1b2734) — mockup #5f7180 @ 3.0 */
    --text-secondary: #c6d2dc;
    --bg: #0b1117;                   /* alias → blue-navy body */
    --green: #22c55e;                /* alias → success (explicit in dark) */
    --code-bg: #10161e;
    --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;
    --sd-shadow-raise: 0 1px 2px rgba(0, 0, 0, 0.5);
    --sd-shadow-pop: 0 12px 40px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
    --sd-shadow-overlay: 0 24px 64px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.45);
    --ws-feature-card-bg: var(--surface-alt); /* dark: the light-mode surface/surface-alt color-mix reads
        too close to the --background navy; 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.
   Keep IDENTICAL to the [data-theme="dark"] block above. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --accent: #2e8ad8;               /* brand accent (mockup Surf blue) */
        --accent-hover: #2578bd;
        --accent-light: #6ab0e8;
        --accent-soft: rgba(46, 138, 216, 0.18);
        --accent-text: #ffffff;
        --background: #0b1117;           /* mockup body: blue-navy */
        --surface: #151e28;              /* mockup sheet (surface-solid) */
        --surface-alt: #1b2734;          /* soft card, one step off the sheet */
        --surface-hover: #1b2734;
        --surface-code: #10161e;
        --border: rgba(255, 255, 255, 0.09);   /* mockup hairline */
        --border-light: rgba(255, 255, 255, 0.12);
        --text: #e8eef4;                 /* mockup text */
        --text-muted: #93a4b3;           /* mockup muted */
        --text-faint: #8496a6;           /* AA on --surface-alt (see [data-theme="dark"]) */
        --text-secondary: #c6d2dc;
        --bg: #0b1117;                   /* alias → blue-navy body */
        --green: #22c55e;                /* alias → success (explicit in dark) */
        --code-bg: #10161e;
        --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;
        --sd-shadow-raise: 0 1px 2px rgba(0, 0, 0, 0.5);
        --sd-shadow-pop: 0 12px 40px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
        --sd-shadow-overlay: 0 24px 64px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.45);
        --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, var(--font-sans)); }
/* 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; }
/* Boolean / choice controls are intrinsically sized, not full-width fields. */
.surfdoc-form-field input[type="checkbox"], .surfdoc-form-field input[type="radio"] { width: auto; align-self: flex-start; accent-color: var(--accent); }
.surfdoc-form-field input[type="file"] { padding: 6px 8px; }
.surfdoc-form-options { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.surfdoc-form-group { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 12px 14px; border: var(--ws-border-w) var(--ws-border-style) var(--border); border-radius: var(--ws-radius-card); }
.surfdoc-form-group > legend { padding: 0 6px; font-size: var(--font-size-caption); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-muted); }
.surfdoc-form-field .surfdoc-form-option { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: var(--font-weight-regular); color: var(--text); cursor: pointer; }
.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; }

/* 0.17 chip-input — the compose "To:" line: label, removable chips
   (close glyph per dismiss canon), inline filter input. Shape only;
   the /next dispatcher owns add/remove behavior. */
.surfdoc-chip-input { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 1rem 0; padding: 0.6rem 1rem; border: var(--ws-border-w, 1px) var(--ws-border-style, solid) var(--border, #dde2ec); border-radius: var(--radius-sm); background: var(--surface, #fff); }
.surfdoc-chip-input-label { color: var(--text-muted, #64748b); font-size: 0.8125rem; font-weight: 600; }
.surfdoc-chip-input-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 10px; border-radius: 999px; background: var(--accent-soft, #e3ebff); color: var(--accent, #2e8ad8); font-size: 0.78rem; font-weight: 600; }
.surfdoc-chip-input-remove { appearance: none; border: none; background: transparent; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--accent, #2e8ad8); cursor: pointer; padding: 0; }
.surfdoc-chip-input-remove:hover { background: var(--surface-alt, #eef1f7); }
.surfdoc-chip-input-field { flex: 1; min-width: 130px; background: none; border: none; outline: none; color: var(--text, #0f1422); font: inherit; font-size: 0.845rem; padding: 3px 0; }

/* 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; }
/* min-width: 0 — flex min-width:auto would let min-content (long thread
   lines, the composer input+Send) force a pane past its track and clip
   at narrow viewports; released, panes shrink to the track and inner
   content wraps/ellipsizes. */
.surfdoc-split-left, .surfdoc-split-right { flex: 1; min-width: 0; border: var(--ws-border-w) var(--ws-border-style) var(--border, #333); border-radius: var(--ws-radius-card); padding: 1rem; }
/* Two-plane back control (0.14, ruling R-C): emitted by the live layer for
   the small-screen messages swap; hidden everywhere except the ≤767px
   thread-open state (Section 74c). */
.surfdoc .surfdoc-split-back { display: none; }
/* F4: the thread-header title in the split RIGHT pane ellipsizes instead
   of hard-cutting — as a nowrap flex item its min-width:auto refuses to
   shrink past min-content and it overflows the bar at 390 full-plane.
   The classic chain on the title element itself completes the pane's
   min-width: 0 chain; scoped here so every other toolbar title keeps its
   current geometry. */
.surfdoc .surfdoc-split-right .surfdoc-toolbar .surfdoc-toolbar-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   53. ROW BLOCK
   ============================================================ */
/* Base row = tinted elevated card (G2 ruling, 2026-08-10: card rows
   EVERYWHERE, light AND dark). Mockup treatment: surface fill + hairline,
   hover lifts with a soft shadow and an accent-tinted border; the icon sits
   in a 34px rounded accent-soft badge. The sidebar overrides this into a
   pill nav row — see Section 57a. */
.surfdoc-row {
    display: flex; align-items: center; gap: 13px;
    padding: 11px 14px; border-radius: 14px;
    border: var(--ws-border-w) var(--ws-border-style) var(--border, #334155); background: var(--surface, #fff);
    box-shadow: var(--ws-shadow);
    text-decoration: none; color: var(--text, #e5e5ef);
    cursor: pointer; box-sizing: border-box;
    transition: background var(--sd-ease, 120ms ease-out), border-color var(--sd-ease, 120ms ease-out), box-shadow var(--sd-ease, 120ms ease-out);
}
.surfdoc-row:hover {
    box-shadow: 0 4px 18px rgba(16, 32, 48, 0.08);
    border-color: color-mix(in srgb, var(--accent, #2e8ad8) 50%, transparent);
}
.surfdoc-row:focus-visible { outline: 2px solid var(--accent, #3b82f6); outline-offset: 2px; }
/* Link rows are <a> inside .surfdoc, so the prose `.surfdoc a:hover`
   underline (0,1,1 + :hover) outranks the base row rule above and
   underlines the title/meta on hover (G10). Suppress it at (0,2,0)+ for
   every state — same precedent as the hero/event-card anchors. */
.surfdoc a.surfdoc-row, .surfdoc a.surfdoc-row:hover,
.surfdoc a.surfdoc-row:focus, .surfdoc a.surfdoc-row:active,
.surfdoc a.surfdoc-row:visited,
.surfdoc a.surfdoc-row .surfdoc-row-title, .surfdoc a.surfdoc-row .surfdoc-row-desc,
.surfdoc a.surfdoc-row .surfdoc-row-trailing, .surfdoc a.surfdoc-row .surfdoc-row-action { text-decoration: none; }
/* Icon badge (G2): 34px rounded accent-soft tile. The sidebar resets this
   back to a bare 18px glyph slot (Section 57a). */
.surfdoc-row-icon { flex-shrink: 0; color: var(--accent, #2e8ad8); background: var(--accent-soft, #e3ebff); width: 34px; height: 34px; border-radius: var(--ws-control-radius, 10px); display: flex; align-items: center; justify-content: center; }
/* Registry glyphs carry an intrinsic 16px; the badge glyph paints at 18px,
   normalized for every glyph — vendored or built-in. */
.surfdoc-row-icon svg { width: 18px; height: 18px; }
.surfdoc-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.surfdoc-row-title { font-size: 0.875rem; font-weight: 600; color: var(--text, #e5e5ef); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.35; }
.surfdoc-row-desc { font-size: 0.75rem; color: var(--text-muted, #94a3b8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.35; margin-top: 0.125rem; }
.surfdoc-row-desc:empty { display: none; }
/* D4 (0.14.1): optional usage bar under the description (`::row[progress=]`,
   modal plan rows: "Ultra — 8.4M of 20M used this cycle"). Thin rounded
   track + accent fill; the renderer stamps the width inline from the
   clamped fraction, so the fill can never paint outside the track. */
.surfdoc-row-progress { display: block; width: 100%; height: 4px; margin-top: 7px; border-radius: 999px; background: var(--surface-alt, #eef1f7); overflow: hidden; }
.surfdoc-row-progress-fill { display: block; height: 100%; border-radius: inherit; background: var(--accent, #2563eb); }
.surfdoc-row-arrow { margin-left: auto; color: var(--text-muted, #64748b); opacity: 0.6; flex-shrink: 0; display: flex; align-items: center; transition: opacity var(--sd-ease, 120ms ease-out); }
.surfdoc-row:hover .surfdoc-row-arrow { opacity: 1; }
/* Unread indicator — right-side blue dot ONLY. Renderer invariant:
   accent-left-border is BANNED for unread states; never add a
   border-left rule keyed off the unread dot, in any theme. */
.surfdoc .surfdoc-unread-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent, #2e8ad8); flex-shrink: 0; margin-left: auto; }
.surfdoc-row .surfdoc-unread-dot { margin-left: 0; }
/* 0.17 roster-row meta: circular initials avatar (group = users glyph),
   right-side bucketed time, unread COUNT pill (replaces the dot when a
   count is present). Right-side elements only — accent-left-border stays
   BANNED for unread states. */
.surfdoc-row-avatar { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft, #e3ebff); color: var(--accent, #2e8ad8); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; }
.surfdoc-row-avatar svg { width: 18px; height: 18px; }
.surfdoc-row-avatar-group { background: var(--surface-alt, #eef1f7); color: var(--text-muted, #64748b); }
.surfdoc-row-time { flex-shrink: 0; align-self: flex-start; margin-top: 2px; color: var(--text-faint, #94a3b8); font-size: 0.6875rem; }
.surfdoc-row-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent, #2e8ad8); color: var(--accent-text, #fff); font-size: 0.6875rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
/* Trailing action — right-side control next to the arrow */
.surfdoc .surfdoc-row-trailing { appearance: none; background: transparent; border: 1px solid var(--border, #30363d); border-radius: var(--ws-control-radius, 6px); color: var(--accent, #2e8ad8); cursor: pointer; font-size: 0.75rem; font-weight: 500; line-height: 1; padding: 5px 10px; flex-shrink: 0; white-space: nowrap; transition: background var(--sd-ease, 120ms ease-out), border-color var(--sd-ease, 120ms ease-out); }
.surfdoc .surfdoc-row-trailing:hover { background: var(--accent-soft, #e3ebff); border-color: var(--accent, #2563eb); }
/* Per-row actions (0.12) — labelled controls replacing the chevron */
.surfdoc .surfdoc-row-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.surfdoc .surfdoc-row-action { appearance: none; background: transparent; border: 1px solid var(--border, #30363d); border-radius: var(--ws-control-radius, 6px); color: var(--accent, #2e8ad8); cursor: pointer; font-size: 0.75rem; font-weight: 500; line-height: 1; padding: 5px 10px; white-space: nowrap; transition: background var(--sd-ease, 120ms ease-out), border-color var(--sd-ease, 120ms ease-out); }
.surfdoc .surfdoc-row-action:hover { background: var(--accent-soft, #e3ebff); border-color: var(--accent, #2563eb); }
/* Divider inside a sidebar — subtle inset section rule (G5, mockup
   .nav-sep: hairline with side gutters, tighter than document dividers) */
.surfdoc .surfdoc-sidebar .surfdoc-divider, .surfdoc .surfdoc-sidebar hr { margin: 8px 12px; border-color: var(--border, #30363d); }
.surfdoc .surfdoc-tab-bar [role="tab"] .surfdoc-unread-dot { margin-left: 6px; vertical-align: middle; }
@keyframes surfdoc-pulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 0.3; } }
.surfdoc-row--loading { cursor: default; }
.surfdoc-row--loading:hover { background: var(--surface, #fff); box-shadow: var(--ws-shadow); border-color: var(--border, #dde2ec); }
.surfdoc-row--loading .surfdoc-row-title {
    color: transparent; background: var(--border, #dde2ec); 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(--border, #dde2ec); 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(--border, #dde2ec); 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 { background: var(--surface, #fff); box-shadow: var(--ws-shadow); border-color: var(--border, #dde2ec); }

/* ============================================================
   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
   ============================================================ */

/* position:relative (0.14): the generated tab-bar, FAB, and medium-screen
   drawer overlay anchor to the shell box, not the viewport — static-render
   containment (Section 76) stays intact. */
.surfdoc .surfdoc-app-shell { position: relative; display: grid; height: 100vh; width: 100%; overflow: hidden; background: var(--background, #0a0a0f); color: var(--text, #e5e5ef); font-family: var(--ws-font-body); font-size: 13px; -webkit-font-smoothing: antialiased; }
/* Tracks are auto-sized (children carry their own heights/widths) so a shell
   without a tab-bar or bottom panel collapses those tracks instead of
   rendering dead strips. Column 3 (0.14) is the Surfy right drawer: auto
   collapses to 0 when absent or closed, and the main pane reflows as the
   drawer's width animates. */
.surfdoc .surfdoc-layout-sidebar-main-panel { grid-template-columns: auto 1fr auto; grid-template-rows: auto auto 1fr auto; }
.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; min-width: 0; }
.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; }
.surfdoc .surfdoc-layout-sidebar-main-panel > .surfdoc-panel-right { grid-column: 3; grid-row: 1 / -1; }

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

/* The sidebar is a quiet rail: sheet surface + one hairline, rows float as
   inset pills (Section 57a) — no boxed cards, no per-row borders. */
.surfdoc .surfdoc-sidebar { width: 250px; background: var(--surface, #12121a); border-right: 1px solid var(--border, #30363d); overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; padding-bottom: 10px; }
.surfdoc .surfdoc-sidebar-left { grid-column: 1; grid-row: 1 / -1; }
.surfdoc .surfdoc-nav-tree { padding: 8px 0; font-size: 0.8125rem; flex: 1; }

/* ============================================================
   57a. SIDEBAR NAV ROWS — inset pill rows (Finder/iOS source list)
   ============================================================ */

.surfdoc .surfdoc-sidebar .surfdoc-row {
    border: none; background: transparent; box-shadow: none;
    margin: 1px 10px; padding: 0 10px; min-height: 36px;
    gap: 11px; border-radius: var(--ws-control-radius, 8px);
    position: relative; /* anchors the unread dot on the icon corner (G5) */
    transition: background var(--sd-ease, 120ms ease-out), color var(--sd-ease, 120ms ease-out);
}
.surfdoc .surfdoc-sidebar .surfdoc-row:hover { background: var(--surface-alt, #eef1f7); box-shadow: none; border-color: transparent; }
.surfdoc .surfdoc-sidebar .surfdoc-row:hover .surfdoc-row-icon { color: var(--text, #0f1422); }
/* Unread dot rides the icon's top-right corner (G5, mockup .nav-item .dot):
   7px accent dot with a 2px surface ring, absolutely positioned over the
   icon slot — markup order stays as emitted. Right-side-dot canon holds for
   rows outside the rail. */
.surfdoc .surfdoc-sidebar .surfdoc-row .surfdoc-unread-dot {
    position: absolute; left: 21px; top: 7px; margin: 0;
    width: 7px; height: 7px; box-sizing: content-box;
    border: 2px solid var(--surface, #fff);
}
.surfdoc .surfdoc-sidebar .surfdoc-row:focus-visible { outline: 2px solid var(--accent, #3b82f6); outline-offset: -2px; }
.surfdoc .surfdoc-sidebar .surfdoc-row-title { font-size: 0.8125rem; font-weight: 500; color: var(--text, #0f1422); }
.surfdoc .surfdoc-sidebar .surfdoc-row-desc { font-size: 0.6875rem; }
/* Nav rows keep a bare glyph slot — the 34px card badge (Section 53) is a
   main-pane treatment, not a rail one. */
.surfdoc .surfdoc-sidebar .surfdoc-row-icon { color: var(--text-muted, #64748b); background: transparent; width: 18px; height: 18px; border-radius: 0; justify-content: flex-start; transition: color var(--sd-ease, 120ms ease-out); }
/* Nav rows don't advertise chevrons — the rail is a destination list, not a
   drill-down. (Hub/detail rows outside the sidebar keep theirs.) */
.surfdoc .surfdoc-sidebar .surfdoc-row-arrow { display: none; }
/* Active route — filled accent-soft tint block + accent icon/label (G5,
   mockup .nav-item.active). The renderer emits no active class yet; the
   runtime layer stamps `.is-active` / aria-current, and these rules are
   ready for it. */
.surfdoc .surfdoc-sidebar .surfdoc-row.is-active,
.surfdoc .surfdoc-sidebar .surfdoc-row[aria-current="page"] {
    background: var(--accent-soft, #e3ebff);
}
.surfdoc .surfdoc-sidebar .surfdoc-row.is-active .surfdoc-row-title,
.surfdoc .surfdoc-sidebar .surfdoc-row[aria-current="page"] .surfdoc-row-title {
    color: var(--accent, #2563eb); font-weight: 600;
}
.surfdoc .surfdoc-sidebar .surfdoc-row.is-active .surfdoc-row-icon,
.surfdoc .surfdoc-sidebar .surfdoc-row[aria-current="page"] .surfdoc-row-icon {
    color: var(--accent, #2563eb);
}
/* Brand/header strip at the top of the rail — no bar chrome, just type. */
.surfdoc .surfdoc-sidebar .surfdoc-toolbar { background: transparent; border-bottom: none; height: 54px; padding: 0 20px; overflow: visible; flex-shrink: 0; }
.surfdoc .surfdoc-sidebar .surfdoc-toolbar-text { font-family: var(--ws-font-display); font-weight: 700; letter-spacing: var(--tracking-tight); color: var(--text, #0f1422); padding: 0; }

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

/* Overflow discipline: the app-shell clips (overflow:hidden) and the grid
   track can shrink below the toolbar's natural width, so a crowded bar
   (e.g. a 5-facet filter set at 880px) must scroll horizontally instead
   of clipping — at every viewport, not only under the 768px media query.

   Look: the shell header bar sits on the page surface (production topbar
   blends into the body); its controls are bordered pills on the sheet
   surface (production .surf-toolbar-btn), so the bar itself needs no boxy
   fill to read as chrome. */
.surfdoc .surfdoc-toolbar { display: flex; align-items: center; gap: 6px; padding: 0 12px; height: 48px; background: var(--background, #0a0a0f); border-bottom: 1px solid var(--border, #30363d); flex-shrink: 0; min-width: 0; overflow-x: auto; overflow-y: hidden; }
.surfdoc .surfdoc-toolbar-title { color: var(--text, #e6edf3); font-size: 0.8125rem; font-weight: 600; padding: 0 8px; white-space: nowrap; }
.surfdoc .surfdoc-toolbar-btn { background: var(--surface, #fff); border: 1px solid var(--border, #dde2ec); color: var(--text, #0f1422); cursor: pointer; height: 30px; padding: 0 13px; border-radius: var(--ws-control-radius, 999px); font-size: 0.8125rem; font-weight: 500; font-family: inherit; line-height: 1; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex-shrink: 0; transition: background var(--sd-ease, 120ms ease-out), border-color var(--sd-ease, 120ms ease-out), color var(--sd-ease, 120ms ease-out); }
.surfdoc .surfdoc-toolbar-btn:hover { background: var(--surface-alt, #eef1f7); border-color: var(--text-muted, #6b7388); }
.surfdoc .surfdoc-toolbar-btn:focus-visible { outline: 2px solid var(--accent, #3b82f6); outline-offset: 1px; }
/* Registry glyphs inside toolbar buttons (G3): 16px, never squeezed. */
.surfdoc .surfdoc-toolbar-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
/* Workspace-chip avatar slot (G6, mockup .chip .avatar): circular initial
   badge before the label; on a primary (accent) chip it goes translucent
   white. Negative inset mimics the chip's tighter left padding. */
.surfdoc .surfdoc-toolbar-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft, #e3ebff); color: var(--accent, #2563eb); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; margin-left: -7px; }
.surfdoc .surfdoc-toolbar-btn-primary .surfdoc-toolbar-avatar { background: rgba(255, 255, 255, 0.25); color: #fff; }
/* Icon-only buttons (G3): a label-less `icon=` button renders as a square
   glyph pill; the aria-label carries its name. Toggled keeps the accent
   ring below — currentColor tints the glyph. */
.surfdoc .surfdoc-toolbar-btn--icon { width: 30px; padding: 0; justify-content: center; }
.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, #1d4ed8); border-color: var(--accent-hover, #1d4ed8); }
/* Toggled (open) state — accent ring: soft accent fill + accent border,
   e.g. a filter button whose row is open */
.surfdoc .surfdoc-toolbar-btn--toggled { color: var(--accent, #2563eb); background: var(--accent-soft, #e3ebff); border-color: var(--accent, #2563eb); font-weight: 600; }
.surfdoc .surfdoc-toolbar-separator { width: 1px; height: 18px; background: var(--border, #30363d); margin: 0 4px; flex-shrink: 0; }
.surfdoc .surfdoc-toolbar-spacer { flex: 1; }
.surfdoc .surfdoc-toolbar-text { color: var(--text, #e6edf3); font-size: 0.8125rem; font-weight: 500; padding: 0 6px; white-space: nowrap; }
/* Toolbar dropdown (0.13.3): dropdown-select markup in toolbar clothing — a
   compact collapsed pill (the old <select> silhouette), option list hidden
   until `.is-open` and floated as a popover so the bar never reflows.
   D9 (0.14.1): the pill rule carries .surfdoc-dropdown-select specificity —
   as a 2-class rule it LOST every conflicting declaration (min-width,
   margin, background, radius) to the later Section 72b base rule, which
   re-imposed a 220px pill around a label-width trigger; and the trigger
   fills its pill (width: 100%, not auto) so clicks right of the text land
   on the button, not the inert wrapper. */
.surfdoc .surfdoc-dropdown-select.surfdoc-toolbar-dropdown { position: relative; display: inline-block; min-width: 0; margin: 0; background: var(--surface, #fff); border: 1px solid var(--border, #dde2ec); border-radius: var(--ws-control-radius, 999px); flex-shrink: 0; transition: background var(--sd-ease, 120ms ease-out), border-color var(--sd-ease, 120ms ease-out); }
.surfdoc .surfdoc-dropdown-select.surfdoc-toolbar-dropdown:hover { background: var(--surface-alt, #eef1f7); border-color: var(--text-muted, #6b7388); }
.surfdoc .surfdoc-toolbar-dropdown .surfdoc-dropdown-trigger { width: 100%; height: 28px; padding: 0 13px; color: var(--text, #0f1422); font-weight: 500; }
.surfdoc .surfdoc-toolbar-dropdown .surfdoc-dropdown-trigger:hover { background: transparent; }
.surfdoc .surfdoc-toolbar-dropdown .surfdoc-dropdown-trigger:focus-visible { outline: 2px solid var(--accent, #3b82f6); outline-offset: 1px; }
.surfdoc .surfdoc-toolbar-dropdown .surfdoc-dropdown-label { color: var(--text, #0f1422); }
.surfdoc .surfdoc-toolbar-dropdown .surfdoc-dropdown-options { display: none; position: absolute; top: calc(100% + 4px); left: 0; margin: 0; min-width: max(100%, 180px); z-index: 40; }
.surfdoc .surfdoc-toolbar-dropdown.is-open .surfdoc-dropdown-options { display: block; }

/* ── Native topbar treatments (WP-R5, 0.14 — from preview/mockup.html) ──
   The TOPBAR is the only toolbar that is a direct app-shell child, so the
   `>` scope leaves surface title-row buttons untouched. Search renders
   icon-only (the a11y label stays in the markup; font-size:0 hides it,
   the SVG keeps its attribute size); Surfy renders as the branded
   accent-tinted pill. No !important — the live layer can still shrink
   these without a specificity war. */
.surfdoc .surfdoc-app-shell > .surfdoc-toolbar [data-action="openSearch"] {
    font-size: 0;
    gap: 0;
    background: transparent;
    border-color: transparent;
    padding: 0 8px;
}
.surfdoc .surfdoc-app-shell > .surfdoc-toolbar [data-action="toggleSurfy"] {
    color: var(--accent, #2563eb);
    background: var(--accent-soft, #e3ebff);
    border-color: transparent;
    font-weight: 600;
}

/* ── Toolbars inside the main pane (tab-content) ─────────────────────────
   These are content rows, not chrome bars: transparent, no hairline, and a
   type ramp — the FIRST toolbar is the pane's title row (display face), a
   text-only toolbar deeper in the list is a section header, and remaining
   toolbar text (counts, status) reads as meta. */
/* D3 (0.14.1): these bars must never scroll — the 880px detail column's
   breadcrumb bar grew a horizontal scroller from the chrome-bar escape
   valve above (overflow-x: auto is inherited from the base rule and was
   never reset here). Content rows wrap instead; the chrome-bar invariant
   from b1e5723 (scroll-not-clip on the DESKTOP chrome bar) is untouched. */
.surfdoc .surfdoc-tab-content .surfdoc-toolbar { background: transparent; border-bottom: none; height: auto; min-height: 42px; padding: 2px 0; flex-wrap: wrap; row-gap: 8px; overflow-x: visible; overflow-y: visible; }
/* Long breadcrumb/meta text in detail bars shrinks and ellipsizes instead
   of forcing the bar wide (mirrors the split-right title fix, F4). */
.surfdoc .surfdoc-tab-content .surfdoc-toolbar .surfdoc-toolbar-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.surfdoc .surfdoc-tab-content > .surfdoc-toolbar:first-child { min-height: 52px; margin-bottom: 2px; }
.surfdoc .surfdoc-tab-content > .surfdoc-toolbar:first-child .surfdoc-toolbar-text { font-family: var(--ws-font-display); font-size: 21px; font-weight: 700; letter-spacing: var(--tracking-tight); color: var(--text, #0f1422); padding: 0; }
/* Section headers — a toolbar whose only item is a text label ("To Do (4)") */
.surfdoc .surfdoc-tab-content .surfdoc-toolbar .surfdoc-toolbar-text:only-child { font-size: 0.8125rem; font-weight: 600; color: var(--text-muted, #6b7388); text-transform: uppercase; letter-spacing: var(--tracking-wide); padding: 0; margin-top: 14px; }
/* Meta text in secondary rows (result counts, statuses) */
.surfdoc .surfdoc-tab-content .surfdoc-toolbar:not(:first-child) .surfdoc-toolbar-text:not(:only-child) { color: var(--text-muted, #6b7388); font-weight: 400; font-size: 0.75rem; }

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

.surfdoc .surfdoc-tab-bar { display: flex; align-items: stretch; background: var(--background, #f7f8fc); border-bottom: 1px solid var(--border, #30363d); height: 38px; flex-shrink: 0; padding: 0 10px; gap: 2px; }
.surfdoc .surfdoc-tab-bar button { background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--text-muted, #8b949e); font-weight: 500; font-family: inherit; cursor: pointer; padding: 0 14px; font-size: 0.8125rem; transition: color var(--sd-ease, 120ms ease-out), border-color var(--sd-ease, 120ms ease-out); white-space: nowrap; }
.surfdoc .surfdoc-tab-bar button:hover { color: var(--text, #e6edf3); }
.surfdoc .surfdoc-tab-bar button:focus-visible { outline: 2px solid var(--accent, #3b82f6); outline-offset: -2px; border-radius: var(--ws-control-radius, 6px); }
.surfdoc .surfdoc-tab-bar button.active, .surfdoc .surfdoc-tab-bar button[aria-selected="true"] { color: var(--text, #e6edf3); font-weight: 600; border-bottom-color: var(--accent, #3b82f6); }

/* ============================================================
   59a. GENERATED APP TAB-BAR (ruling R-A, 0.14)
   Renderer-generated from the sidebar's nav rows; a floating pill on
   small screens ONLY (Section 74c). Distinct from the 38px document
   strip above — neither its CSS nor its switch script applies.
   ============================================================ */

.surfdoc .surfdoc-app-tabbar { display: none; }

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

.surfdoc .surfdoc-tab-content { overflow-y: auto; overflow-x: hidden; padding: 18px 24px 56px; background: var(--background, #0a0a0f); display: none; min-width: 0; }

/* ── Main-pane row lists (G2 ruling, 2026-08-10) ─────────────────────────
   The 0.13.2 ruled-column override is REPLACED: in-shell rows keep the
   tinted elevated card treatment from Section 53 (both themes) and stack
   with the mockup's 6px list rhythm. */
.surfdoc .surfdoc-tab-content .surfdoc-row + .surfdoc-row { margin-top: 6px; }
.surfdoc .surfdoc-tab-content .surfdoc-row--loading:hover,
.surfdoc .surfdoc-tab-content .surfdoc-row--empty:hover { background: var(--surface, #fff); box-shadow: var(--ws-shadow); border-color: var(--border, #dde2ec); }
.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; background: var(--surface, #12121a); 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); }

/* ── RIGHT DRAWER — Surfy panel (WP-R2, 0.14; mockup .surfy-panel) ──────
   Closed by default: width 0 + overflow hidden; the fixed-width inner
   wrapper keeps content from squashing while the outer width animates.
   Open state rides the shell root — [data-panel-open="true"] from the
   renderer's toggle script, or .is-panel-open stamped by a dispatcher. */
.surfdoc .surfdoc-panel-right {
    width: 0; overflow: hidden;
    border-top: none; border-left: 1px solid var(--border, #30363d);
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    transition: width .2s ease;
}
.surfdoc .surfdoc-panel-inner { width: 360px; display: flex; flex-direction: column; height: 100%; }
.surfdoc [data-panel-open="true"] .surfdoc-panel-right,
.surfdoc .is-panel-open .surfdoc-panel-right { width: 360px; }
/* ── Drawer anatomy (0.14, WP-N0/WP-N1) ─────────────────────────────────
   ONE head row (fin + tier switcher + toolbar items), grounding chip,
   flex-1 body, composer pinned last. The old blanket gray on every drawer
   chat button is gone: only the attach control is the gray circle — Send
   keeps the accent styling (D2). */
.surfdoc .surfdoc-panel-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border-light, #21262d); flex-shrink: 0; }
/* Fin-head (C1): the bare 26px accent fin — no chip, no circle. Native
   here so the frontend mask stopgap (next-shell.css) can be deleted. */
.surfdoc .surfdoc-panel-fin { display: inline-flex; align-items: center; justify-content: center; color: var(--accent, #2e8ad8); flex-shrink: 0; }
.surfdoc .surfdoc-panel-fin svg { width: 26px; height: 26px; }
/* Tier switcher in the head: quiet pill, chevron flips while open (B1).
   min-width: 0 releases the content dropdown's 220px floor (Section 72b)
   — the 3-class selector outranks it whatever the source order — so the
   head row (fin + tier + spacer + Chats + ✕) fits the 360px inner width
   instead of pushing the close ✕ past the viewport edge. */
.surfdoc .surfdoc-panel-head .surfdoc-dropdown-select { min-width: 0; }
.surfdoc .surfdoc-panel-head .surfdoc-toolbar-dropdown { background: transparent; border-color: transparent; }
.surfdoc .surfdoc-panel-head .surfdoc-dropdown-trigger { padding: 0 4px; font-weight: 600; }
.surfdoc .surfdoc-panel-head .surfdoc-dropdown-caret { transition: transform var(--sd-ease, 120ms ease-out); }
.surfdoc .surfdoc-panel-head .surfdoc-dropdown-select.is-open .surfdoc-dropdown-caret { transform: rotate(180deg); }
/* F3: the OPTIONS popup gets its own explicit width — the min-width: 0
   release above shrinks the closed trigger, but the absolutely-positioned
   popup then shrink-to-fits the collapsed ~91px trigger wrapper and wraps
   option descriptions unreadably. `width` (not a min-width floor) on
   purpose: the live layer's is-open options rule pins min-width at
   5-class specificity, but never touches width. 220px = the base content
   dropdown floor; the popup is positioned, so it cannot inflate the head
   row. */
.surfdoc .surfdoc-panel-head .surfdoc-dropdown-options { width: 220px; }
/* Grounding chip (D1): hairline pill under the head row; the explicit
   [hidden] rule must exist — the flex display would defeat the UA's
   hidden-attribute display:none otherwise. */
.surfdoc .surfdoc-panel-grounding { display: flex; align-items: center; gap: 6px; margin: 8px 12px 0; padding: 3px 6px 3px 10px; border: 1px solid var(--border, #dde2ec); border-radius: var(--ws-radius-chip, 999px); background: var(--surface-alt, #eef1f7); font-size: 0.75rem; color: var(--text-muted, #6b7388); flex-shrink: 0; min-width: 0; }
.surfdoc .surfdoc-panel-grounding[hidden] { display: none; }
.surfdoc .surfdoc-grounding-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.surfdoc .surfdoc-grounding-clear { border: none; background: transparent; color: var(--text-muted, #6b7388); cursor: pointer; padding: 0 4px; font-size: 0.6875rem; line-height: 1; flex-shrink: 0; }
.surfdoc .surfdoc-grounding-clear:hover { color: var(--text, #0f1422); }
/* Body region (B5): takes all remaining height whatever the child count,
   so the composer lands at the drawer bottom, not under the prose. */
.surfdoc .surfdoc-panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.surfdoc .surfdoc-panel-right .surfdoc-chat-input { margin-top: auto; }
/* Attach control (D2): 32px gray circle on surface-alt — deliberately not
   accent, so Send stays the only accent control in the composer. */
.surfdoc .surfdoc-chat-attach { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border, #dde2ec); background: var(--surface-alt, #eef1f7); color: var(--text, #0f1422); display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; flex-shrink: 0; transition: background var(--sd-ease, 120ms ease-out); }
.surfdoc .surfdoc-chat-attach:hover { background: var(--border-light, #dde2ec); }
/* FAB (WP-R2): hidden except on small screens (≤767px block, Section 74c),
   where it is the 52px accent circle that toggles the drawer. */
.surfdoc .surfdoc-panel-fab {
    display: none; position: absolute; right: 14px; bottom: 14px; z-index: 30;
    width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--accent, #2e8ad8); color: #fff;
    place-items: center;
    box-shadow: 0 8px 24px rgba(46, 138, 216, 0.45);
}
.surfdoc .surfdoc-panel-fab svg { width: 24px; height: 24px; }
.surfdoc .surfdoc-panel-fab:focus-visible { outline: 2px solid var(--accent, #3b82f6); outline-offset: 2px; }

/* ============================================================
   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: var(--sd-shadow-overlay, -4px 0 24px rgba(0,0,0,0.3)); }
.surfdoc .surfdoc-drawer-right { width: 320px; }
.surfdoc .surfdoc-drawer h1 { font-size: 0.9375rem; font-weight: 600; letter-spacing: var(--tracking-tight); padding: 14px 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(--ws-radius-chip, 999px); color: var(--text, #0f1422); cursor: pointer; font-size: 0.8125rem; font-weight: 500; font-family: inherit; padding: 0.35rem 0.85rem; transition: background var(--sd-ease, 120ms ease-out), border-color var(--sd-ease, 120ms ease-out), color var(--sd-ease, 120ms ease-out); }
.surfdoc-chip:hover { background: var(--accent-soft, #e3ebff); border-color: var(--accent, #2563eb); color: var(--accent, #2563eb); }
.surfdoc-chip:focus-visible { outline: 2px solid var(--accent, #2563eb); outline-offset: 1px; }

/* ============================================================
   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); }
/* 0.17 chat-thread real children — mockup bubble anatomy: width cap
   min(75%, 640px), timestamp INSIDE the bubble, sender-name lead above
   incoming bubbles in group threads, read-only reaction pills below. */
.surfdoc-chat-msg-row { display: flex; flex-direction: column; gap: 2px; }
.surfdoc-chat-msg-row-own { align-items: flex-end; }
.surfdoc-chat-msg-row-them { align-items: flex-start; }
.surfdoc-chat-sender { font-size: 0.6875rem; font-weight: 600; color: var(--text-muted, #64748b); margin: 0 4px; }
.surfdoc-chat-sender-surfy { color: var(--accent, #2e8ad8); }
.surfdoc-chat-bubble { max-width: min(75%, 640px); padding: 9px 13px; border-radius: 16px; font-size: 0.845rem; line-height: 1.45; }
.surfdoc-chat-bubble-them { background: var(--surface-alt, #eef1f7); border: 1px solid var(--border, #dde2ec); color: var(--text, #0f1422); border-bottom-left-radius: 6px; }
.surfdoc-chat-bubble-own { background: var(--accent, #2e8ad8); color: var(--accent-text, #fff); border-bottom-right-radius: 6px; }
.surfdoc-chat-time { display: block; font-size: 0.656rem; opacity: 0.6; margin-top: 3px; }
.surfdoc-chat-reacts { display: flex; gap: 4px; margin-top: 2px; }
.surfdoc-chat-react-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--surface, #fff); border: 1px solid var(--border, #dde2ec); font-size: 0.75rem; color: var(--text, #0f1422); }
.surfdoc-chat-react-pill-mine { border-color: var(--accent, #2e8ad8); background: var(--accent-soft, #e3ebff); color: var(--accent, #2e8ad8); font-weight: 600; }
.surfdoc-chat-react-count { font-size: 0.6875rem; opacity: 0.75; }
.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(--ws-control-radius, 8px); color: var(--text, #e6edf3); padding: 8px 12px; font-size: 0.8125rem; font-family: inherit; outline: none; transition: border-color var(--sd-ease, 120ms ease-out), box-shadow var(--sd-ease, 120ms ease-out); }
.surfdoc .surfdoc-chat-form input:focus { border-color: var(--accent, #3b82f6); box-shadow: 0 0 0 3px var(--accent-soft, rgba(37,99,235,0.18)); }
.surfdoc .surfdoc-chat-form button { background: var(--accent, #3b82f6); color: var(--accent-text, #fff); border: none; border-radius: var(--ws-control-radius, 8px); padding: 8px 16px; font-size: 0.8125rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: background var(--sd-ease, 120ms ease-out); }
.surfdoc .surfdoc-chat-form button:hover { background: var(--accent-hover, #1d4ed8); }
.surfdoc .surfdoc-chat-form button:focus-visible { outline: 2px solid var(--accent, #3b82f6); outline-offset: 2px; }

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

.surfdoc .surfdoc-modal { background: var(--surface, #12121a); border: 1px solid var(--border, #30363d); border-radius: 16px; padding: 0; color: var(--text, #e6edf3); max-width: 480px; width: 90%; box-shadow: var(--sd-shadow-overlay, 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: 0.9375rem; font-weight: 600; letter-spacing: var(--tracking-tight); padding: 16px 20px 12px; border-bottom: 1px solid var(--border, #30363d); margin: 0; }
/* Modal body: the header runs full-bleed (hairline spans the sheet), body
   blocks get the sheet's inner gutter. */
.surfdoc .surfdoc-modal > :not(.surfdoc-modal-header) { margin-left: 20px; margin-right: 20px; }
.surfdoc .surfdoc-modal > .surfdoc-modal-header + * { margin-top: 14px; }
.surfdoc .surfdoc-modal > :last-child:not(.surfdoc-modal-header) { margin-bottom: 18px; }
/* D5 + D8 (0.14.1): a toolbar INSIDE a modal is a button/content row, not a
   chrome bar — without this reset it keeps the Section 58 bar treatment
   (full-width --background fill + hairline + fixed 48px), painting the dark
   band Brady saw behind "Create a blank doc instead" and the filter
   dropdowns. Also D4: real vertical padding so modal button rows breathe. */
.surfdoc .surfdoc-modal .surfdoc-toolbar { background: transparent; border-bottom: none; height: auto; min-height: 0; padding: 10px 0; flex-wrap: wrap; row-gap: 8px; overflow-x: visible; overflow-y: visible; }

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

.surfdoc .surfdoc-badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--ws-radius-chip, 999px); 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: 12px; overflow: hidden; box-shadow: var(--sd-shadow-overlay, 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: 13px 16px; font-size: 0.875rem; font-family: inherit; outline: none; }
.surfdoc .surfdoc-command-search::placeholder { color: var(--text-muted, #8b949e); }
.surfdoc .surfdoc-command-list { list-style: none; padding: 6px; max-height: 300px; overflow-y: auto; }
.surfdoc .surfdoc-command-list li { padding: 8px 12px; border-radius: var(--ws-control-radius, 6px); cursor: pointer; font-size: 0.8125rem; transition: background var(--sd-ease, 120ms ease-out); }
.surfdoc .surfdoc-command-list li:hover { background: var(--surface-alt, #1a1a24); }

/* ============================================================
   72a. SEGMENTED CONTROL
   Compact pill single-select — a filter idiom, not a tab bar.
   ============================================================ */

.surfdoc .surfdoc-segmented-control { display: inline-flex; align-items: center; gap: 2px; padding: 2px; background: var(--surface, #fff); border: 1px solid var(--border, #30363d); border-radius: 999px; margin: 0.5rem 0; }
.surfdoc .surfdoc-segment { appearance: none; background: transparent; border: none; border-radius: 999px; color: var(--text-muted, #8b949e); font-size: 0.8125rem; font-weight: 500; font-family: inherit; line-height: 1; padding: 6px 13px; cursor: pointer; white-space: nowrap; transition: background var(--sd-ease, 120ms ease-out), color var(--sd-ease, 120ms ease-out); }
.surfdoc .surfdoc-segmented-control[data-size="compact"] .surfdoc-segment { font-size: 0.75rem; padding: 5px 11px; }
.surfdoc .surfdoc-segment:hover { color: var(--text, #e6edf3); background: var(--surface-alt, #eef1f7); }
.surfdoc .surfdoc-segment:focus-visible { outline: 2px solid var(--accent, #3b82f6); outline-offset: -2px; }
.surfdoc .surfdoc-segment.is-active { background: var(--accent-soft, #e3ebff); color: var(--accent, #2563eb); font-weight: var(--font-weight-semibold, 600); }

/* ============================================================
   72b. DROPDOWN SELECT
   Static-rendered inline: trigger row + option list, no overlay.
   ============================================================ */

.surfdoc .surfdoc-dropdown-select { display: inline-block; min-width: 220px; max-width: 100%; background: var(--surface, #12121a); border: 1px solid var(--border, #30363d); border-radius: var(--ws-control-radius, 10px); margin: 0.5rem 0; vertical-align: top; }
.surfdoc .surfdoc-dropdown-trigger { display: flex; align-items: center; gap: 8px; width: 100%; background: transparent; border: none; border-radius: inherit; color: var(--text, #e6edf3); padding: 8px 12px; font-size: 0.8125rem; font-family: inherit; cursor: pointer; text-align: left; transition: background var(--sd-ease, 120ms ease-out); }
.surfdoc .surfdoc-dropdown-trigger:hover { background: var(--surface-alt, #eef1f7); }
.surfdoc .surfdoc-dropdown-trigger:focus-visible { outline: 2px solid var(--accent, #3b82f6); outline-offset: -2px; }
.surfdoc .surfdoc-dropdown-label { color: var(--text-muted, #8b949e); }
.surfdoc .surfdoc-dropdown-selected { font-weight: var(--font-weight-semibold, 600); }
.surfdoc .surfdoc-dropdown-caret { margin-left: auto; color: var(--text-muted, #8b949e); }
/* Option list = a real popover surface: sheet fill, hairline, floating-layer
   shadow. In the static render it sits inside the control as a labeled-look
   preview; in the live shell next-shell.js positions it absolutely and the
   same treatment reads as the open menu. */
.surfdoc .surfdoc-dropdown-options { list-style: none; padding: 5px; margin: 6px; background: var(--surface, #12121a); border: 1px solid var(--border, #30363d); border-radius: var(--ws-control-radius, 10px); box-shadow: var(--sd-shadow-pop); }
.surfdoc .surfdoc-dropdown-option { padding: 8px 11px; border-radius: var(--ws-control-radius, 6px); cursor: pointer; font-size: 0.8125rem; transition: background var(--sd-ease, 120ms ease-out); }
.surfdoc .surfdoc-dropdown-option:hover { background: var(--surface-alt, #1a1a24); }
.surfdoc .surfdoc-dropdown-option.is-selected { background: var(--accent-soft, #e3ebff); }
.surfdoc .surfdoc-dropdown-option.is-selected .surfdoc-dropdown-option-label { color: var(--accent, #2563eb); font-weight: 600; }
.surfdoc .surfdoc-dropdown-option-label { display: block; color: var(--text, #e6edf3); }
.surfdoc .surfdoc-dropdown-option-desc { display: block; color: var(--text-muted, #8b949e); font-size: 0.75rem; margin-top: 2px; }

/* ============================================================
   72c. RECIPIENT PICKER (0.12)
   Static preview: chip strip + To: input + submit.
   ============================================================ */

.surfdoc .surfdoc-recipient-picker { display: flex; align-items: center; gap: 8px; background: var(--surface, #12121a); border: 1px solid var(--border, #30363d); border-radius: var(--ws-control-radius, 10px); padding: 8px 12px; margin: 0.5rem 0; transition: border-color var(--sd-ease, 120ms ease-out), box-shadow var(--sd-ease, 120ms ease-out); }
.surfdoc .surfdoc-recipient-picker:focus-within { border-color: var(--accent, #3b82f6); box-shadow: 0 0 0 3px var(--accent-soft, rgba(37,99,235,0.18)); }
.surfdoc .surfdoc-recipient-chips { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.surfdoc .surfdoc-recipient-chip { display: inline-block; background: var(--surface-alt, #1a1a24); border: 1px solid var(--border, #30363d); border-radius: 999px; color: var(--text, #e6edf3); font-size: 0.75rem; line-height: 1; padding: 4px 10px; white-space: nowrap; }
.surfdoc .surfdoc-recipient-picker input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--text, #e6edf3); font-size: 0.8125rem; }
.surfdoc .surfdoc-recipient-picker input::placeholder { color: var(--text-muted, #8b949e); }
.surfdoc .surfdoc-recipient-submit { appearance: none; background: var(--accent, #2e8ad8); border: none; border-radius: var(--ws-control-radius, 8px); color: var(--accent-text, #fff); cursor: pointer; font-size: 0.75rem; font-weight: var(--font-weight-semibold, 600); font-family: inherit; line-height: 1; padding: 7px 12px; flex-shrink: 0; transition: background var(--sd-ease, 120ms ease-out); }
.surfdoc .surfdoc-recipient-submit:hover { background: var(--accent-hover, #1d4ed8); }

/* ============================================================
   72d. QR (0.12)
   Platform-conditional: show-my-code / scan placeholder card.
   ============================================================ */

.surfdoc .surfdoc-qr { display: flex; flex-direction: column; align-items: center; gap: 8px; background: var(--surface, #12121a); border: 1px dashed var(--border, #30363d); border-radius: var(--radius-sm); padding: 20px; margin: 0.5rem 0; }
.surfdoc .surfdoc-qr-glyph { color: var(--text-muted, #8b949e); }
.surfdoc .surfdoc-qr-label { color: var(--text-muted, #8b949e); font-size: 0.8125rem; }

/* ============================================================
   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
   (768px → 767px in 0.14 so the medium icon-rail range, 768–1023px,
   is not clipped by the legacy sidebar-hiding rule at exactly 768px.)
   ============================================================ */

@media (max-width: 767px) {
    /* No grid-template-columns override here: shell children are pinned to
       grid-column 2 (Section 56), so forcing a single `1fr` template would
       push them into an implicit auto column beside an empty 1fr track.
       With the base `auto 1fr auto` template, column 1 auto-collapses when
       the sidebar hides and column 3 empties when the right drawer goes
       absolute (74b) — the main pane keeps the full width by itself. */
    .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: 0 10px; height: 28px; font-size: 0.75rem; }
    .surfdoc .surfdoc-tab-content { padding: 14px 14px 40px; }
}

/* ============================================================
   74b. MEDIUM — 68px ICON RAIL (WP-R1, 0.14; ≤1023px, app-shell scoped)
   Mockup ground truth: sidebar collapses to an icon rail — wordmark,
   labels, and the hub group (divider + rows after it) hide; the four
   surface rows render icon-only, centered. The Surfy drawer becomes an
   absolute overlay (NOT fixed — Section 76 static containment holds)
   and the main pane no longer reflows.
   ============================================================ */

@media (max-width: 1023px) {
    /* min/max clamps beat the renderer's inline style="width:NNNpx" (emitted
       whenever the sidebar carries a width= attr) — a bare `width` here would
       lose to the inline declaration and the rail would never narrow. */
    .surfdoc .surfdoc-app-shell .surfdoc-sidebar { width: 68px; min-width: 68px; max-width: 68px; padding: 14px 8px; }
    /* Wordmark strip hides */
    .surfdoc .surfdoc-app-shell .surfdoc-sidebar .surfdoc-toolbar { display: none; }
    /* Icon-only rows: the body span (title + desc) hides entirely — its
       flex:1 would otherwise drag the icon off-center. */
    .surfdoc .surfdoc-app-shell .surfdoc-sidebar .surfdoc-row-body,
    .surfdoc .surfdoc-app-shell .surfdoc-sidebar .surfdoc-row-title,
    .surfdoc .surfdoc-app-shell .surfdoc-sidebar .surfdoc-row-desc,
    .surfdoc .surfdoc-app-shell .surfdoc-sidebar .surfdoc-row-arrow { display: none; }
    .surfdoc .surfdoc-app-shell .surfdoc-sidebar .surfdoc-row { justify-content: center; padding: 10px 0; }
    /* Unread dot re-anchors to the centered icon's corner */
    .surfdoc .surfdoc-app-shell .surfdoc-sidebar .surfdoc-row .surfdoc-unread-dot { left: calc(50% + 4px); top: 6px; }
    /* Hub group hides: the divider and every row after it (rows are
       direct <aside> siblings; the sidebar divider is the plain <hr>
       form when unlabeled). */
    .surfdoc .surfdoc-app-shell .surfdoc-sidebar .surfdoc-divider,
    .surfdoc .surfdoc-app-shell .surfdoc-sidebar .surfdoc-divider-plain,
    .surfdoc .surfdoc-app-shell .surfdoc-sidebar .surfdoc-divider ~ .surfdoc-row,
    .surfdoc .surfdoc-app-shell .surfdoc-sidebar .surfdoc-divider-plain ~ .surfdoc-row { display: none; }
    /* Surfy drawer becomes an overlay: absolute (containment-safe), no
       grid reflow, min(400px, 100vw) when open. */
    .surfdoc .surfdoc-app-shell > .surfdoc-panel-right { position: absolute; right: 0; top: 0; bottom: 0; z-index: 35; box-shadow: var(--sd-shadow-overlay, -4px 0 24px rgba(0, 0, 0, 0.3)); }
    .surfdoc .surfdoc-app-shell .surfdoc-panel-inner { width: min(400px, 100vw); }
    .surfdoc [data-panel-open="true"] .surfdoc-panel-right,
    .surfdoc .is-panel-open .surfdoc-panel-right { width: min(400px, 100vw); }
}

/* ============================================================
   74c. SMALL — GENERATED TAB-BAR + FAB + SMALL FURNITURE
   (WP-R1/WP-R2 + ruling R-C, 0.14; ≤767px)
   Shell chrome rules are app-shell scoped; the furniture rules (kanban
   stacking, two-plane split, sheet geometry) apply to both static
   renders and the live shell.
   ============================================================ */

@media (max-width: 767px) {
    .surfdoc .surfdoc-app-shell .surfdoc-sidebar { display: none; }

    /* Floating pill tab-bar (mockup .tabbar): absolute to the shell,
       inset 76px on the right to clear the FAB. */
    .surfdoc .surfdoc-app-tabbar {
        display: flex; position: absolute; left: 12px; right: 76px; bottom: 12px; z-index: 30;
        background: var(--surface, #12121a);
        backdrop-filter: blur(24px) saturate(1.6);
        -webkit-backdrop-filter: blur(24px) saturate(1.6);
        border: 1px solid var(--border, #30363d); border-radius: 999px;
        box-shadow: var(--sd-shadow-pop, 0 8px 24px rgba(15, 23, 42, 0.18));
        padding: 6px; gap: 2px; justify-content: space-around; align-items: center;
    }
    .surfdoc .surfdoc-app-tabbar-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 12px; border-radius: 999px; background: transparent; border: none; cursor: pointer; color: var(--text-muted, #8b949e); font-family: inherit; }
    .surfdoc .surfdoc-app-tabbar-item.is-active { color: var(--accent, #2e8ad8); background: var(--accent-soft, #e3ebff); }
    .surfdoc .surfdoc-app-tabbar-icon { position: relative; display: flex; width: 18px; height: 18px; }
    .surfdoc .surfdoc-app-tabbar-icon svg { width: 18px; height: 18px; }
    /* 7px corner unread dot from the row's unread attr */
    .surfdoc .surfdoc-app-tabbar-icon .surfdoc-unread-dot { position: absolute; right: -4px; top: -2px; margin: 0; width: 7px; height: 7px; }
    .surfdoc .surfdoc-app-tabbar-label { font-family: var(--ws-font-display); font-weight: 900; font-size: 10px; letter-spacing: 0.03em; }

    /* FAB shows (base rule + geometry in Section 61) */
    .surfdoc .surfdoc-app-shell .surfdoc-panel-fab { display: grid; }

    /* Topbar keeps only the workspace chip and Search: the Surfy pill and
       the separator before it hide. */
    .surfdoc .surfdoc-app-shell > .surfdoc-toolbar [data-action="toggleSurfy"],
    .surfdoc .surfdoc-app-shell > .surfdoc-toolbar .surfdoc-toolbar-separator:has(+ [data-action="toggleSurfy"]) { display: none; }

    /* Content clears the floating tab-bar */
    .surfdoc .surfdoc-app-shell .surfdoc-tab-content { padding-bottom: 110px; }

    /* Surfy drawer goes full-screen while open; tab-bar + FAB hide. */
    .surfdoc .surfdoc-app-shell > .surfdoc-panel-right { z-index: 40; }
    .surfdoc [data-panel-open="true"] .surfdoc-panel-right,
    .surfdoc .is-panel-open .surfdoc-panel-right { width: 100vw; max-width: 100%; }
    .surfdoc [data-panel-open="true"] .surfdoc-panel-inner,
    .surfdoc .is-panel-open .surfdoc-panel-inner { width: 100%; }
    .surfdoc [data-panel-open="true"] .surfdoc-app-tabbar,
    .surfdoc [data-panel-open="true"] .surfdoc-panel-fab,
    .surfdoc .is-panel-open .surfdoc-app-tabbar,
    .surfdoc .is-panel-open .surfdoc-panel-fab { display: none; }

    /* ── Small furniture (ruling R-C) — static AND live contexts ── */

    /* Kanban stacks vertical */
    .surfdoc .surfdoc-board-columns { flex-direction: column; min-width: 0; }
    .surfdoc .surfdoc-board-column { min-width: 0; max-width: none; }

    /* Messages two-plane: one plane at a time, swapped by
       data-thread="open" on the shell root (or body); back button shows
       in the thread plane. */
    .surfdoc .surfdoc-split-pane .surfdoc-split-right { display: none; }
    [data-thread="open"] .surfdoc-split-pane .surfdoc-split-left { display: none; }
    [data-thread="open"] .surfdoc-split-pane .surfdoc-split-right { display: block; }
    [data-thread="open"] .surfdoc-split-back { display: inline-flex; align-items: center; gap: 6px; }

    /* Detail bars wrap; the title span takes the full width. */
    .surfdoc .surfdoc-tab-content .surfdoc-toolbar { flex-wrap: wrap; row-gap: 8px; height: auto; }
    .surfdoc .surfdoc-tab-content .surfdoc-toolbar .surfdoc-toolbar-title,
    .surfdoc .surfdoc-tab-content > .surfdoc-toolbar:first-child .surfdoc-toolbar-text { width: 100%; flex-basis: 100%; }

    /* Sheets go edge-to-edge in the live shell. Static renders are
       untouched: containment (Section 76) pins position:static, where
       left/right/transform do not apply. */
    .surfdoc.surfdoc-live .surfdoc-modal,
    .surfdoc.surfdoc-live .surfdoc-drawer { left: 10px !important; right: 10px !important; width: auto !important; max-width: none !important; transform: none !important; }
}

/* ============================================================
   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(--ws-control-radius, 10px);
    overflow: hidden;
}
/* D5 (0.14.1): modal keeps a sheet-scale corner — the grouped containment
   rule above re-imposed var(--ws-control-radius, 10px), and the live layer
   (next-shell.css) overrides overflow but declares no radius, so a squared
   --ws-control-radius squared the sheet. Scoped to the modal only: drawer
   and command-palette keep their containment geometry. The overflow clip
   stays so children cannot square the corners in the static render. */
.surfdoc .surfdoc-modal { border-radius: 16px; overflow: hidden; }
/* 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: 1.0625rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-tight);
    padding: 14px 20px 10px;
    color: var(--text);
}
/* Modal header — dismiss canon: title left, close control top-right.
   Must not assume overlay layout (static-render containment above). */
.surfdoc .surfdoc-modal .surfdoc-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.surfdoc .surfdoc-modal .surfdoc-modal-header .surfdoc-modal-title {
    flex: 1;
    min-width: 0;
}
.surfdoc .surfdoc-modal .surfdoc-modal-close {
    appearance: none;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    font-size: 14px;
    padding: 12px 16px 8px 8px;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
}
.surfdoc .surfdoc-modal .surfdoc-modal-close:hover {
    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(--ws-control-radius, 10px);
    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 wrapper — spacing only; the inner table inherits .surfdoc-data */
.surfdoc-schema { margin: 1rem 0; }
/* 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);
}

/* ::diagram — figure shell for the deterministic diagram SVGs.
   max-width scales wide diagrams (gantt, grids) into the column instead of
   clipping them at the content edge; intrinsic width is kept otherwise. */
.surfdoc-diagram { margin: 1.5rem 0; }
.surfdoc-diagram-svg { display: block; max-width: 100%; height: auto; }
.surfdoc-diagram-cap {
    margin-bottom: 8px;
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
}

/* Dark-theme diagram palette. The SVG bakes the fixed light palette
   (role → hex, src/diagram.rs role_color) so bytes stay deterministic;
   dark themes restyle the paints here by value. Shape-scoped so text
   fills are never touched (labels ride currentColor / their own hex). */
[data-theme="dark"] .surfdoc-diagram-svg :is(rect, polygon, ellipse, circle, path)[fill="#f8fafc"] { fill: #161616; }
[data-theme="dark"] .surfdoc-diagram-svg :is(rect, polygon, ellipse, circle, path)[fill="#e2e8f0"] { fill: #262626; }
[data-theme="dark"] .surfdoc-diagram-svg :is(rect, polygon, ellipse, circle, path)[fill="#ffffff"] { fill: #0d0d0d; }
[data-theme="dark"] .surfdoc-diagram-svg :is(rect, polygon, ellipse, circle, path)[fill="#cbd5e1"] { fill: #262626; }
[data-theme="dark"] .surfdoc-diagram-svg [stroke="#e2e8f0"] { stroke: #2a2a2a; }
[data-theme="dark"] .surfdoc-diagram-svg [stroke="#cbd5e1"] { stroke: #3f3f46; }
[data-theme="dark"] .surfdoc-diagram-svg text[fill="#64748b"] { fill: #8b8b8b; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .surfdoc-diagram-svg :is(rect, polygon, ellipse, circle, path)[fill="#f8fafc"] { fill: #161616; }
    :root:not([data-theme]) .surfdoc-diagram-svg :is(rect, polygon, ellipse, circle, path)[fill="#e2e8f0"] { fill: #262626; }
    :root:not([data-theme]) .surfdoc-diagram-svg :is(rect, polygon, ellipse, circle, path)[fill="#ffffff"] { fill: #0d0d0d; }
    :root:not([data-theme]) .surfdoc-diagram-svg :is(rect, polygon, ellipse, circle, path)[fill="#cbd5e1"] { fill: #262626; }
    :root:not([data-theme]) .surfdoc-diagram-svg [stroke="#e2e8f0"] { stroke: #2a2a2a; }
    :root:not([data-theme]) .surfdoc-diagram-svg [stroke="#cbd5e1"] { stroke: #3f3f46; }
    :root:not([data-theme]) .surfdoc-diagram-svg text[fill="#64748b"] { fill: #8b8b8b; }
}
/* Explicit light theme pins the baked palette back (mirrors the token
   pattern above: an explicit choice always beats the OS preference). */
[data-theme="light"] .surfdoc-diagram-svg :is(rect, polygon, ellipse, circle, path)[fill="#f8fafc"] { fill: #f8fafc; }
[data-theme="light"] .surfdoc-diagram-svg :is(rect, polygon, ellipse, circle, path)[fill="#e2e8f0"] { fill: #e2e8f0; }
[data-theme="light"] .surfdoc-diagram-svg :is(rect, polygon, ellipse, circle, path)[fill="#ffffff"] { fill: #ffffff; }
[data-theme="light"] .surfdoc-diagram-svg :is(rect, polygon, ellipse, circle, path)[fill="#cbd5e1"] { fill: #cbd5e1; }
[data-theme="light"] .surfdoc-diagram-svg [stroke="#e2e8f0"] { stroke: #e2e8f0; }
[data-theme="light"] .surfdoc-diagram-svg [stroke="#cbd5e1"] { stroke: #cbd5e1; }
[data-theme="light"] .surfdoc-diagram-svg text[fill="#64748b"] { fill: #64748b; }

/* 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(--ws-font-display);
    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(--ws-font-display);
    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(--ws-font-display);
    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-main { min-width: 0; }
.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-cart-items { display: flex; flex-direction: column; }
.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)); }

/* ============================================================
   80. SIZE-CLASS AXIS (0.18)

   One responsive axis for chrome: three classes (mobile / tablet /
   desktop) split at 768 and 1024 logical px. These four numbers —
   767, 768, 1023, 1024 — are the ONLY breakpoints the chrome layer
   may use, and tests/css_coverage.rs pins them against the exported
   Rust constants SIZE_CLASS_TABLET_MIN / SIZE_CLASS_DESKTOP_MIN.
   The content-block queries (480 / 640 / 720) are a separate, frozen
   canon and are NOT part of this axis.

   `data-size-class` (from classes=) and `data-min-size-class` (from
   min-class=) gate visibility. `data-size-class-width` marks an
   element whose width varies per class: the renderer emits only the
   three --sc-w-* custom properties inline, and the property itself is
   selected here — an inline shorthand would out-specify these rules.
   ============================================================ */

.surfdoc .surfdoc-tab-content[data-size-class-width] { max-width: var(--sc-w-mobile); }
.surfdoc .surfdoc-sidebar[data-size-class-width],
.surfdoc .surfdoc-drawer[data-size-class-width] { width: var(--sc-w-mobile); }

@media (max-width: 767px) {
    .surfdoc [data-size-class]:not([data-size-class~="mobile"]) { display: none; }
    .surfdoc [data-min-size-class="tablet"],
    .surfdoc [data-min-size-class="desktop"] { display: none; }
}

@media (min-width: 768px) {
    .surfdoc .surfdoc-tab-content[data-size-class-width] { max-width: var(--sc-w-tablet); }
    .surfdoc .surfdoc-sidebar[data-size-class-width],
    .surfdoc .surfdoc-drawer[data-size-class-width] { width: var(--sc-w-tablet); }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .surfdoc [data-size-class]:not([data-size-class~="tablet"]) { display: none; }
    .surfdoc [data-min-size-class="desktop"] { display: none; }
}

@media (min-width: 1024px) {
    .surfdoc .surfdoc-tab-content[data-size-class-width] { max-width: var(--sc-w-desktop); }
    .surfdoc .surfdoc-sidebar[data-size-class-width],
    .surfdoc .surfdoc-drawer[data-size-class-width] { width: var(--sc-w-desktop); }
    .surfdoc [data-size-class]:not([data-size-class~="desktop"]) { display: none; }
}

/* 0.18.1 gauge, caption, summary-row and price elements. */
.surfdoc-metric-meter { display: block; width: 100%; height: 6px; margin-top: 8px; }
.surfdoc-progress-bar { display: block; width: 100%; height: 8px; margin: 1rem 0; border: 0; border-radius: 999px; background: var(--surface-alt); accent-color: var(--accent); }
.surfdoc-data > caption { caption-side: top; text-align: left; padding: 0 0 8px; font-size: var(--font-size-caption); font-weight: 600; color: var(--text-muted); }
.surfdoc-data tfoot td { border-top: 2px solid var(--border); font-weight: 700; color: var(--text); }
.surfdoc-product-price { display: inline-block; margin: 4px 0 0; font-size: var(--font-size-h3); font-weight: 700; color: var(--text); }
.surfdoc-tier[data-current] { outline: var(--ws-border-w) var(--ws-border-style) var(--accent); outline-offset: 2px; }