/* 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-…, )`) so the identity look is exact, and a pack sets the token once to shift them all. */ --ws-font-display: var(--font-heading); /* hero headline, section + card titles, h1–h3 */ --ws-font-body: var(--font-body); /* prose / body copy */ --ws-heading-transform: none; /* uppercase eyebrows/labels in editorial packs */ --ws-heading-style: normal; /* italic display in some packs */ --ws-btn-bg: var(--accent); /* marketing CTA fill — a pack can make it outline/ghost */ --ws-btn-border: var(--accent); /* default = fill colour ⇒ invisible; outline packs set this to the accent over a transparent fill */ --ws-btn-color: var(--accent-text, #fff); /* CTA label colour */ --ws-bg-texture-size: auto; /* halftone/grid scale for textured packs */ --ws-divider: var(--ws-border-w) var(--ws-border-style) var(--border); /* editorial hairline / double rules */ /* --ws-control-radius — set by packs; consumers default to 8px (app controls) or var(--radius-sm) (forms) via per-element fallback. */ /* --ws-heading-weight — set by packs; display headings fall back to their own current weights via var(--ws-heading-weight, ). */ /* --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 */ /* Spacing rhythm — the 4/8-based scale every site block draws from (style annex vNext). Blocks reference the scale, never ad-hoc pixel values, so a consumer can retune the whole page rhythm by overriding these. */ --ws-space-2xs: 4px; --ws-space-xs: 8px; --ws-space-sm: 16px; --ws-space-md: 24px; --ws-space-lg: 40px; --ws-space-xl: 64px; --ws-space-2xl: 96px; --ws-space-3xl: 144px; /* Vertical padding of a marketing band (hero/banner/product-grid/post-grid) and the tighter variant for a heading band that introduces the content band right under it (apple.com rhythm: sections breathe, a heading hugs what it introduces). */ --ws-section-pad: clamp(64px, 7vw, 120px); --ws-section-pad-compact: clamp(32px, 4vw, 56px); /* Site page cap: full-bleed bands stop growing at this width and stay centered on ultrawide viewports (apple.com-style page cap). */ --ws-site-max: 2572px; /* Marketing band inner content column (wider than the 48rem prose column). */ --ws-band-inner: 1120px; /* Capped full-bleed breakout: width + negative margins that pull a band out of the 48rem reading column to the viewport edge, stopping at the site cap. Shared by hero, banner, grids, and tinted section bands. */ --ws-bleed-width: min(100vw, var(--ws-site-max)); --ws-bleed-margin: calc(50% - min(50vw, var(--ws-site-max) / 2)); /* Shadows */ --shadow-sm: none; --shadow: none; /* ── Typography: font stacks ── */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "SF Mono", "Fira Code", "Cascadia Code", Menlo, Consolas, monospace; /* ── Typography: semantic size scale ── Proven on cloudsurf.com (style-v2): the old scale read small on modern displays; every step gets ~+2–6px. */ --font-size-micro: 12px; /* status badges, microlabel */ --font-size-caption: 14px; /* helper text, footnote, table cell */ --font-size-ui: 15px; /* dense UI, drawer row, button */ --font-size-body: 17px; /* default paragraph */ --font-size-body-lg: 18px; /* long-form prose */ --font-size-h3: 21px; /* subsection / card title */ --font-size-h2: 24px; /* section title */ --font-size-h1: 28px; /* page header */ --font-size-display: 38px; /* hero / display */ /* ── Typography: weights ── */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; /* display headings h1–h3, hero headline */ /* ── Typography: tracking ── */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.05em; /* ── Shell re-skin hooks ────────────────────────────────────── Defaults equal today's neutral shell values → zero visual change for existing consumers. A host page can override these (e.g. a frosted-glass nav) without re-declaring the whole shell rules. */ --shell-nav-bg: var(--surface); --shell-btn-bg: var(--surface); --shell-drawer-bg: var(--surface); --shell-drawer-link-hover-bg: var(--surface-hover); --shell-control-border: var(--border); --shell-nav-h: 56px; } /* ============================================================ 2. THEME OVERRIDES ============================================================ */ /* Explicit light mode toggle — same as :root (light is canonical). */ [data-theme="light"] { --accent: #2563eb; --accent-hover: #1d4ed8; --accent-light: #3b82f6; --accent-soft: #e3ebff; --accent-text: #ffffff; --background: #f7f8fc; --surface: #ffffff; --surface-alt: #eef1f7; --surface-hover: #eef1f7; --surface-code: #ffffff; --border: #dde2ec; --border-light: #dde2ec; --text: #0f1422; --text-muted: #636a7e; --text-faint: #636a7e; --text-secondary: #636a7e; --bg: #f7f8fc; --green: #22c55e; --code-bg: #f7f8fc; --danger-light: rgba(239, 68, 68, 0.08); --success-light: rgba(34, 197, 94, 0.08); --warning-light: rgba(245, 158, 11, 0.08); --shadow-sm: none; --shadow: none; } /* Explicit dark mode toggle — Surf shell PURE-BLACK dark palette (aligned to the Reference's `.sd-*` mocks, which resolve through the surf-shell tokens: page #000, sheet #0a0a0a, soft #161616, line #262626, text #fafafa, muted #a3a3a3). Part C alignment: the render was previously on the tokens.css blue-cast neutrals (#111118/#1e1e2a/#e5e5ef), one step lighter and bluer than the reference — this retunes the render dark palette to match the reference pixel-for-token. Light mode is untouched. */ [data-theme="dark"] { --accent: #2563eb; /* brand accent (stays blue) */ --accent-hover: #2563eb; --accent-light: #60a5fa; --accent-soft: rgba(37, 99, 235, 0.18); --accent-text: #ffffff; --background: #000000; /* reference body: pure black */ --surface: #0d0d0d; /* neutral, lifted off black */ --surface-alt: #161616; /* reference cards: neutral gray */ --surface-hover: #161616; /* neutral */ --surface-code: #0d0d0d; /* neutral */ --border: #262626; /* neutral line */ --border-light: #2a2a2a; /* neutral line (light) */ --text: #e5e5e5; /* neutral text */ --text-muted: #8b8b8b; /* neutral muted */ --text-faint: #7f7f7f; /* fainter, but AA: ≥4.5 on --surface-alt (#161616), was #5a5a5a @ 2.82 */ --text-secondary: #cbcbcb; /* neutral secondary */ --bg: #000000; /* alias → pure black body */ --green: #22c55e; /* alias → success (explicit in dark) */ --code-bg: #0d0d0d; /* neutral */ --danger-light: rgba(239, 68, 68, 0.1); --success-light: rgba(34, 197, 94, 0.1); --warning-light: rgba(245, 158, 11, 0.1); --shadow-sm: none; --shadow: none; --ws-feature-card-bg: var(--surface-alt); /* dark: the light-mode surface/surface-alt color-mix reads too close to pure-black --background; pin back to --surface-alt so tier/stat/product cards keep the same visible fill as untouched siblings (testimonial/metric/logo/booking/store). */ } /* Auto-detect: dark mode only when the OS asks and no explicit theme set. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --accent: #2563eb; /* brand accent (stays blue) */ --accent-hover: #2563eb; --accent-light: #60a5fa; --accent-soft: rgba(37, 99, 235, 0.18); --accent-text: #ffffff; --background: #000000; /* reference body: pure black */ --surface: #0d0d0d; /* neutral, lifted off black */ --surface-alt: #161616; /* reference cards: neutral gray */ --surface-hover: #161616; /* neutral */ --surface-code: #0d0d0d; /* neutral */ --border: #262626; /* neutral line */ --border-light: #2a2a2a; /* neutral line (light) */ --text: #e5e5e5; /* neutral text */ --text-muted: #8b8b8b; /* neutral muted */ --text-faint: #7f7f7f; /* fainter, but AA on --surface-alt (see [data-theme="dark"]) */ --text-secondary: #cbcbcb; /* neutral secondary */ --bg: #000000; /* alias → pure black body */ --green: #22c55e; /* alias → success (explicit in dark) */ --code-bg: #0d0d0d; /* neutral */ --danger-light: rgba(239, 68, 68, 0.1); --success-light: rgba(34, 197, 94, 0.1); --warning-light: rgba(245, 158, 11, 0.1); --shadow-sm: none; --shadow: none; --ws-feature-card-bg: var(--surface-alt); /* see [data-theme="dark"] override above */ } } /* ============================================================ 3. RESET & BASE ============================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font); font-size: 16px; line-height: 1.6; color: var(--text); background: var(--background); background-image: var(--ws-bg-texture); /* style-pack texture hook (Surf Simple: none) */ background-size: var(--ws-bg-texture-size); /* halftone/grid/paper scale for textured packs */ overflow-x: clip; /* clip (not hidden) — prevents scrollbar-gutter slide while keeping sticky/overflow-y intact */ } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } img { max-width: 100%; height: auto; } /* Scrollbar */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: var(--radius-sm); } /* ============================================================ 4. NAVIGATION (app chrome) ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 10, 15, 0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } [data-theme="light"] .nav { background: rgba(255, 255, 255, 0.88); } @media (prefers-color-scheme: light) { :root:not([data-theme]) .nav { background: rgba(255, 255, 255, 0.88); } } .nav-inner { max-width: 1120px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; } .nav-brand { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 700; font-size: 1.125rem; text-decoration: none; } .nav-brand:hover { color: var(--text); } .nav-emblem { width: 26px; height: 26px; border-radius: var(--radius-sm); } .nav-links { display: flex; align-items: center; gap: 4px; } .nav-link { color: var(--text-muted); font-size: 0.875rem; font-weight: 500; padding: 6px 12px; border-radius: var(--radius-sm); text-decoration: none; } .nav-link:hover { color: var(--text); } .nav-link.active, .nav-link-active { color: var(--text); } .nav-actions { display: flex; align-items: center; gap: 4px; } .nav-cta { display: inline-flex; align-items: center; padding: 6px 14px; background: var(--accent); color: #fff; font-size: 0.8125rem; font-weight: 600; border-radius: var(--radius-sm); text-decoration: none; } .nav-cta:hover { background: var(--accent-hover); color: #fff; } /* Theme toggle */ .nav-theme-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer; } .nav-theme-toggle:hover { color: var(--text); } .nav-theme-toggle .icon-moon { display: none; } [data-theme="light"] .nav-theme-toggle .icon-sun { display: none; } [data-theme="light"] .nav-theme-toggle .icon-moon { display: block; } /* Mobile hamburger */ .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 36px; height: 36px; padding: 8px; background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); cursor: pointer; } .nav-toggle span { display: block; width: 100%; height: 2px; background: currentColor; border-radius: 1px; transition: transform 200ms ease, opacity 200ms ease; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* Nav badge (notification count) */ .nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-sm); background: var(--danger); color: #fff; font-size: 0.6875rem; font-weight: 700; line-height: 1; } main { padding-top: var(--shell-nav-h); } /* ============================================================ 5. BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: var(--radius); font-weight: 600; font-size: 0.9375rem; line-height: 1; cursor: pointer; min-height: 44px; border: none; text-decoration: none; font-family: inherit; } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-hover); color: #fff; } .btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); } .btn-ghost:hover { background: var(--surface); color: var(--text); } .btn-danger { background: var(--danger); color: #fff; } .btn-danger:hover { background: #dc2626; color: #fff; } .btn-success { background: var(--success); color: #fff; } .btn-sm { padding: 6px 14px; font-size: 0.8125rem; min-height: 32px; border-radius: var(--radius-sm); } .btn-block { width: 100%; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } /* ============================================================ 6. CARDS & GRIDS ============================================================ */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; } .card-title { font-weight: 700; font-size: 1.125rem; margin-bottom: 8px; } .card-body { font-size: 0.9375rem; color: var(--text-muted); line-height: 1.6; } .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .card-grid-2 { grid-template-columns: repeat(2, 1fr); } /* ============================================================ 7. SECTIONS ============================================================ */ .section { border-top: 1px solid var(--border); } .section-inner { max-width: 1120px; margin: 0 auto; padding: 80px 24px; } .section-header { text-align: center; } .section-headline { font-weight: 700; font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.2; margin-bottom: 12px; letter-spacing: -0.03em; } .section-subtitle { font-size: 1.125rem; color: var(--text-muted); margin-bottom: 48px; max-width: 560px; } .section-header .section-subtitle { margin-left: auto; margin-right: auto; } .section-muted { background: var(--surface); } /* ============================================================ 8. HERO ============================================================ */ .hero { text-align: center; } .hero-inner { max-width: 1120px; margin: 0 auto; padding: 120px 24px 96px; } .hero-headline { font-weight: 800; font-size: clamp(2.25rem, 6vw, 3rem); line-height: 1.1; margin-bottom: 16px; letter-spacing: -0.035em; } .hero-subtitle { font-size: 1.25rem; color: var(--text-muted); margin-bottom: 36px; max-width: 560px; margin-left: auto; margin-right: auto; line-height: 1.6; } .hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 600; color: var(--accent-light); background: transparent; border: 1px solid rgba(59, 130, 246, 0.2); border-radius: var(--radius); padding: 6px 14px; margin-bottom: 24px; } .hero-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: sui-pulse 2s ease-in-out infinite; } @keyframes sui-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .hero-accent { color: var(--accent-light); } /* ============================================================ 9. TABLES (app chrome) ============================================================ */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; } .table, .platform-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; } .table th, .platform-table th { text-align: left; padding: 12px 16px; font-weight: 600; color: var(--text-muted); border-bottom: 2px solid var(--border); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; } .table td, .platform-table td { padding: 14px 16px; border-bottom: 1px solid var(--border); } .table tbody tr:hover, .platform-table tbody tr:hover { background: var(--surface); } .platform-file { font-family: var(--font-mono); font-size: 0.875rem; color: var(--text-muted); } /* Comparison table */ .comparison-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .comparison-table th { text-align: left; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); font-weight: 700; font-size: 0.8125rem; white-space: nowrap; } .comparison-table td { padding: 12px 16px; border: 1px solid var(--border); vertical-align: top; } .comparison-table tbody tr:hover { background: var(--surface); } .comparison-table td:first-child { font-weight: 600; white-space: nowrap; } .comparison-highlight { background: rgba(59, 130, 246, 0.06); } /* ============================================================ 10. FORMS (app chrome) ============================================================ */ .form-group { margin-bottom: 20px; } .form-group label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--text); margin-bottom: 6px; } .form-input, .form-textarea, .form-select { width: 100%; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: inherit; font-size: 0.9375rem; line-height: 1.5; } .form-input::placeholder, .form-textarea::placeholder { color: var(--text-muted); } .form-input:focus, .form-textarea:focus, .form-select:focus { outline: none; border-color: var(--accent); } .form-textarea { resize: vertical; min-height: 100px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-result { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 0.9375rem; margin-top: 16px; } .form-result.success { background: var(--success-light); color: var(--success); } .form-result.error { background: var(--danger-light); color: var(--danger); } /* ============================================================ 11. BADGES & STATUS ============================================================ */ .badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; } .badge:empty { display: none; } .badge-available, .badge-success { background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.25); color: #22c55e; } .badge-coming, .badge-warning { background: rgba(234, 179, 8, 0.12); border: 1px solid rgba(234, 179, 8, 0.25); color: #eab308; } .badge-primary { background: rgba(59, 130, 246, 0.12); border: 1px solid rgba(59, 130, 246, 0.25); color: var(--accent); } .badge-danger { background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.25); color: #ef4444; } .status-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-sm); } .status-dot { width: 8px; height: 8px; border-radius: 50%; } .status-supported { color: #22c55e; background: rgba(34, 197, 94, 0.1); } .status-supported .status-dot { background: #22c55e; } .status-planned { color: var(--accent-light); background: rgba(59, 130, 246, 0.1); } .status-planned .status-dot { background: var(--accent-light); } /* ============================================================ 12. ALERTS ============================================================ */ .alert { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 0.9375rem; margin-bottom: 16px; } .alert-error { background: var(--danger-light); color: var(--danger); border: 1px solid rgba(239, 68, 68, 0.2); } .alert-success { background: var(--success-light); color: var(--success); border: 1px solid rgba(34, 197, 94, 0.2); } .alert-info { background: rgba(59, 130, 246, 0.08); border: 1px solid rgba(59, 130, 246, 0.2); color: var(--text); } .alert-info strong { color: var(--accent); } /* ============================================================ 13. CODE BLOCKS (app chrome) ============================================================ */ .code-block { position: relative; background: #0d0d14; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .code-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--border); font-size: 0.8125rem; font-weight: 600; color: var(--text-muted); } .code-block pre { margin: 0; padding: 16px; overflow-x: auto; font-size: 0.875rem; line-height: 1.7; } .code-block code { font-family: var(--font-mono); color: var(--text); background: none; } .code-copy { position: absolute; top: 8px; right: 8px; padding: 4px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); font-size: 0.75rem; font-family: inherit; cursor: pointer; z-index: 2; } .code-copy:hover { color: var(--text); border-color: var(--border-light); } /* Syntax highlighting — dark */ .code-block .kw { color: #c792ea; } .code-block .str { color: #c3e88d; } .code-block .cm { color: #546e7a; } .code-block .fn { color: #82aaff; } .code-block .num { color: #f78c6c; } .code-block .attr { color: #ffcb6b; } .code-block .tag { color: #f07178; } .code-block .punct { color: #89ddff; } /* Syntax highlighting — light */ [data-theme="light"] .code-block .kw { color: #7c3aed; } [data-theme="light"] .code-block .str { color: #16a34a; } [data-theme="light"] .code-block .cm { color: #94a3b8; } [data-theme="light"] .code-block .fn { color: #2563eb; } [data-theme="light"] .code-block .num { color: #ea580c; } [data-theme="light"] .code-block .attr { color: #b45309; } [data-theme="light"] .code-block .tag { color: #dc2626; } [data-theme="light"] .code-block .punct { color: #0891b2; } /* Inline code */ :not(pre) > code { font-family: var(--font-mono); font-size: 0.875em; padding: 2px 6px; background: rgba(255,255,255,0.06); border: none; border-radius: var(--radius-sm); color: var(--accent-light); } /* ============================================================ 14. STATS ============================================================ */ .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 48px; } .stat-item { background: transparent; border: none; border-radius: 0; padding: 24px; text-align: center; } .stat-value { font-size: 2rem; font-weight: 800; color: var(--accent); line-height: 1.2; margin-bottom: 4px; } .stat-label { font-size: 0.8125rem; color: var(--text-muted); font-weight: 500; } /* ============================================================ 15. STEPS ============================================================ */ .steps-list { display: flex; flex-direction: column; gap: 16px; counter-reset: step; } .step-card { display: flex; gap: 20px; align-items: flex-start; padding: 24px; background: transparent; border: 1px solid var(--border); border-radius: 0; } .step-number { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; border-radius: 50%; font-weight: 700; font-size: 0.75rem; } .step-card h3 { font-weight: 700; font-size: 1rem; margin-bottom: 4px; } .step-card p { color: var(--text-muted); font-size: 0.9375rem; line-height: 1.6; } /* ============================================================ 16. CAPABILITY GRID ============================================================ */ .capability-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .capability-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; } .capability-card h3 { font-weight: 700; font-size: 1rem; margin-bottom: 8px; } .capability-card p { font-size: 0.9375rem; color: var(--text-muted); line-height: 1.6; } .capability-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .capability-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-sm); font-size: 1.25rem; flex-shrink: 0; } .capability-location { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); } /* ============================================================ 17. FOOTER (app chrome) ============================================================ */ .footer { border-top: 1px solid var(--border); padding: 56px 0 32px; } .footer-inner { max-width: 1120px; margin: 0 auto; padding: 0 24px; } .footer-columns { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; margin-bottom: 40px; } .footer-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.125rem; margin-bottom: 8px; } .footer-brand-icon { color: var(--accent); font-family: var(--font-mono); } .footer-tagline { font-size: 0.9375rem; color: var(--text-muted); line-height: 1.5; } .footer-heading { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text); margin-bottom: 16px; } .footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; } .footer-links a { font-size: 0.875rem; color: var(--text-muted); text-decoration: none; } .footer-links a:hover { color: var(--text); } .footer-text { font-size: 0.875rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 8px; } .footer-text a { color: var(--accent-light); text-decoration: none; } .footer-text a:hover { color: var(--accent); } .footer-bottom { padding-top: 24px; border-top: 1px solid var(--border); font-size: 0.8125rem; color: var(--text-muted); } /* ============================================================ 18. MODAL ============================================================ */ dialog.modal { max-width: 440px; width: calc(100% - 48px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 24px; } dialog.modal::backdrop { background: rgba(0, 0, 0, 0.6); } dialog.modal h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 16px; } .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 24px; } /* ============================================================ 19. EMPTY STATE ============================================================ */ .empty-state { text-align: center; padding: 48px 24px; color: var(--text-muted); font-size: 0.9375rem; } /* ============================================================ 20. UTILITIES ============================================================ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .text-muted { color: var(--text-muted); } .text-danger { color: var(--danger); } .text-success { color: var(--success); } /* ============================================================ 21. FOCUS ACCESSIBILITY ============================================================ */ .btn:focus-visible, .nav-link:focus-visible, .form-input:focus-visible, .form-textarea:focus-visible, .form-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ================================================================ ================================================================ SURFDOC CONTENT RENDERING ================================================================ ================================================================ */ /* ============================================================ 22. SURFDOC LAYOUT ============================================================ */ /* NAV CLIPPING FIX (A2 §5): overflow-x:hidden removed so the full-bleed .surfdoc-nav (width:100vw + margin-left:calc(-50vw+50%)) is not clipped. Wide blocks keep their own overflow-x:auto (.surfdoc-table-wrap, .surfdoc-code pre). */ .surfdoc { max-width: 48rem; margin: 0 auto; padding: 2rem 1.5rem 4rem; line-height: 1.7; font-family: var(--ws-font-body); color: var(--text); overflow-wrap: break-word; } /* Responsive table scroll wrapper — looks like Reference .sd-data container. Keeps overflow-x:auto so wide tables scroll inside their own box. */ .surfdoc-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.5rem 0; border: 1px solid var(--border); border-radius: var(--radius-sm); } /* Inline icons */ .surfdoc-icon { display: inline-flex; align-items: center; vertical-align: middle; line-height: 0; } .surfdoc-icon svg { width: 1em; height: 1em; } /* Sections — uniform background (auto-alternating backgrounds were removed: they full-bled to 100vw and broke any embedded/constrained layout). */ .surfdoc-section { padding: 2rem 0; } .surfdoc-section h2 { margin-top: 0; } /* ============================================================ 23. SURFDOC IN-DOCUMENT NAVIGATION ============================================================ */ /* ── Nav shell: sticky topbar + slide-in left drawer + theme toggle ── */ /* display:contents so the sticky topbar's containing block is .surfdoc (the tall article) rather than this short wrapper — otherwise the topbar un-sticks the moment you scroll past the nav's own height. */ .surfdoc-nav { display: contents; } .surfdoc-nav-toggle { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; } .surfdoc-nav-topbar { display: flex; align-items: stretch; height: 64px; padding-left: 10px; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; width: 100vw; margin-left: calc(-50vw + 50%); margin-top: -2rem; margin-bottom: 1.5rem; } .surfdoc-nav-topbar-left { display: flex; align-items: stretch; flex-shrink: 0; } .surfdoc-nav-topbar-right { display: flex; align-items: center; gap: 6px; margin-left: auto; padding-right: 16px; flex-shrink: 0; } .surfdoc-nav-hamburger { width: 64px; height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; color: var(--text); transition: background 120ms ease; } .surfdoc-nav-hamburger:hover { background: var(--surface-alt); } .surfdoc-nav-hamburger span { display: block; width: 24px; height: 2px; background: currentColor; border-radius: 1px; transition: transform 0.2s, opacity 0.2s; } .surfdoc-nav-toggle:checked ~ .surfdoc-nav-topbar .surfdoc-nav-hamburger span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .surfdoc-nav-toggle:checked ~ .surfdoc-nav-topbar .surfdoc-nav-hamburger span:nth-child(2) { opacity: 0; } .surfdoc-nav-toggle:checked ~ .surfdoc-nav-topbar .surfdoc-nav-hamburger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } .surfdoc-nav-logo { display: flex; align-items: center; padding: 0 16px; height: 64px; font-weight: var(--font-weight-bold); font-size: var(--font-size-body-lg); color: var(--text); text-decoration: none; white-space: nowrap; } .surfdoc-nav-logo-img { height: 26px; width: auto; display: block; } /* No underline on nav links (overrides the equal-specificity .surfdoc a:hover underline) */ .surfdoc-nav a, .surfdoc-nav a:hover { text-decoration: none !important; } .surfdoc-nav-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-muted); cursor: pointer; transition: background 120ms ease, color 120ms ease; } .surfdoc-nav-theme-toggle:hover { background: var(--surface-alt); color: var(--text); } .surfdoc-nav-theme-toggle svg { width: 18px; height: 18px; } .surfdoc-nav-theme-toggle .surfdoc-nav-icon-sun { display: none; } .surfdoc-nav-theme-toggle .surfdoc-nav-icon-moon { display: block; } [data-theme="dark"] .surfdoc-nav-theme-toggle .surfdoc-nav-icon-sun { display: block; } [data-theme="dark"] .surfdoc-nav-theme-toggle .surfdoc-nav-icon-moon { display: none; } .surfdoc-nav-drawer { position: fixed; top: 64px; left: 0; bottom: 0; width: 248px; max-width: 84vw; background: var(--surface); border-right: 1px solid var(--border); z-index: 120; transform: translateX(-100%); transition: transform 200ms cubic-bezier(0.2,0.8,0.2,1); overflow-y: auto; } .surfdoc-nav-toggle:checked ~ .surfdoc-nav-drawer { transform: translateX(0); } .surfdoc-nav-drawer-nav { display: flex; flex-direction: column; padding: 10px 10px; gap: 2px; } /* .surfdoc prefix bumps specificity to (0,2,0), beating .surfdoc a (0,1,1) link color so nav rows read as neutral text, not raw blue links — accent is reserved for active. */ .surfdoc .surfdoc-nav-drawer-row { display: flex; align-items: center; gap: 11px; padding: 0 12px; min-height: 40px; border-radius: var(--radius-sm); color: var(--text); font-size: var(--font-size-ui); font-weight: var(--font-weight-medium); letter-spacing: -0.006em; text-decoration: none; transition: background 120ms ease, color 120ms ease; } .surfdoc .surfdoc-nav-drawer-row:hover { background: var(--surface-alt); color: var(--accent); } .surfdoc .surfdoc-nav-drawer-row.is-active { background: var(--accent-soft); color: var(--accent); font-weight: var(--font-weight-semibold); } .surfdoc-nav-drawer-row .surfdoc-icon { display: inline-flex; align-items: center; width: 18px; height: 18px; flex-shrink: 0; } .surfdoc-nav-scrim { position: fixed; inset: 64px 0 0 0; background: rgba(0,0,0,0.4); z-index: 110; opacity: 0; pointer-events: none; transition: opacity 200ms ease; cursor: pointer; } .surfdoc-nav-toggle:checked ~ .surfdoc-nav-scrim { opacity: 1; pointer-events: auto; } /* Background scroll-lock is handled in the nav's JS (with scrollbar-width compensation) so locking doesn't shift the full-bleed topbar. */ /* ============================================================ 24. SURFDOC TYPOGRAPHY ============================================================ */ .surfdoc h1, .surfdoc h2, .surfdoc h3, .surfdoc h4, .surfdoc h5, .surfdoc h6 { line-height: 1.3; color: var(--text); } /* Display headings carry the pack display face + heading treatment (weight, tracking, transform, style — each defaulting to today's value so Surf is unchanged); the h5/h6 micro-eyebrows stay on the UI font. */ .surfdoc h1, .surfdoc h2, .surfdoc h3, .surfdoc h4 { font-family: var(--ws-font-display); font-style: var(--ws-heading-style); text-transform: var(--ws-heading-transform); } .surfdoc h5, .surfdoc h6 { font-family: var(--font-heading); } /* h1–h3 default to the black display weight (style-v2 spec: titles own the heaviest face); packs still override via --ws-heading-weight. */ .surfdoc h1 { font-size: var(--font-size-h1); font-weight: var(--ws-heading-weight, var(--font-weight-black)); margin: 2.5rem 0 1rem; letter-spacing: var(--ws-heading-tracking, var(--tracking-tight)); } .surfdoc h2 { font-size: var(--font-size-h2); font-weight: var(--ws-heading-weight, var(--font-weight-black)); margin: 2rem 0 0.75rem; padding-bottom: 0.5rem; border-bottom: var(--ws-divider); letter-spacing: var(--ws-heading-tracking, var(--tracking-tight)); } .surfdoc h3 { font-size: var(--font-size-h3); font-weight: var(--ws-heading-weight, var(--font-weight-black)); margin: 1.5rem 0 0.5rem; letter-spacing: var(--ws-heading-tracking, var(--tracking-tight)); } .surfdoc h4 { font-size: var(--font-size-body-lg); font-weight: var(--font-weight-semibold); margin: 1.2rem 0 0.5rem; letter-spacing: -0.015em; } .surfdoc h5, .surfdoc h6 { font-size: var(--font-size-ui); font-weight: var(--font-weight-semibold); margin: 1rem 0 0.5rem; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-muted); } .surfdoc p { margin: 0.75rem 0; } .surfdoc a { color: var(--accent-ink, var(--accent)); text-decoration: none; } .surfdoc a:hover { text-decoration: underline; } .surfdoc strong { font-weight: var(--font-weight-semibold); color: var(--text); } .surfdoc em { color: var(--text-muted); } /* Muted em is a prose treatment only — headings, card titles, and hero copy keep their own color (em inside a title was going gray). */ .surfdoc h1 em, .surfdoc h2 em, .surfdoc h3 em, .surfdoc h4 em, .surfdoc-hero em { color: inherit; } .surfdoc ul, .surfdoc ol { margin: 0.5rem 0; padding-left: 1.5rem; } .surfdoc li { margin: 0.25rem 0; } .surfdoc li::marker { color: var(--text-muted); } .surfdoc blockquote { border-left: 3px solid var(--border); padding: 0.5rem 0 0.5rem 1.5rem; margin: 1.25rem 0; background: transparent; border-radius: 0; font-style: italic; color: var(--text-muted); } .surfdoc blockquote p { margin: 0.25rem 0; } .surfdoc code { font-family: var(--font-mono); font-size: 0.85em; background: var(--surface-alt); padding: 0.15em 0.4em; border-radius: var(--radius-sm); color: var(--text); } .surfdoc pre { background: var(--surface-code); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1.2rem; overflow-x: auto; margin: 1.5rem 0; } .surfdoc pre code { background: transparent; padding: 0; font-size: var(--font-size-caption); line-height: 1.65; font-family: var(--font-mono); color: var(--text); } .surfdoc table { width: 100%; border-collapse: collapse; font-size: var(--font-size-caption); border: none; } /* Wide tables scroll inside their wrapper instead of clipping on narrow viewports. .surfdoc-table-wrap already has overflow-x:auto; letting the table grow to its content width (rather than being squeezed to 100%) is what actually engages the scroll on a 390px screen. */ .surfdoc-table-wrap > table { width: auto; min-width: 100%; } .surfdoc th { text-align: left; padding: 0.6rem 1rem; border-bottom: 1px solid var(--border); font-weight: var(--font-weight-semibold); color: var(--text-muted); font-size: var(--font-size-micro); text-transform: uppercase; letter-spacing: var(--tracking-wide); background: transparent; } .surfdoc td { padding: 0.6rem 1rem; border-bottom: 1px solid var(--border); } .surfdoc tr:last-child td { border-bottom: none; } .surfdoc hr { border: none; border-top: 1px solid var(--border); margin: 2.5rem 0; } .surfdoc img { max-width: 100%; border-radius: var(--radius-sm); } /* ============================================================ 25. SURFDOC CALLOUTS ============================================================ */ /* Look: a tinted card — full pack-reactive border + soft type-tinted wash + icon, NO left-only accent stripe (the type reads from the whole card, not a bar on one edge). `--callout-tone` is the per-type colour, set below. */ .surfdoc-callout { --callout-tone: var(--accent); display: flex; gap: 12px; padding: 14px 16px; margin: 1.5rem 0; border: var(--ws-border-w) var(--ws-border-style) color-mix(in srgb, var(--callout-tone) 28%, var(--border)); border-radius: var(--ws-radius-card); background: color-mix(in srgb, var(--callout-tone) 6%, var(--surface)); box-shadow: var(--ws-shadow); } .surfdoc-callout-icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; color: var(--callout-tone); stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .surfdoc-callout-title { font-weight: var(--font-weight-semibold); font-size: var(--font-size-ui); margin-bottom: 2px; color: var(--text); } .surfdoc-callout-body { margin: 0; font-size: var(--font-size-ui); line-height: 1.55; color: var(--text); } .surfdoc-callout-body p { margin: 0; } .surfdoc-callout-body p + p { margin-top: 0.5rem; } /* Legacy: bare 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 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:
shell with optional
header (file + lang badge) and a 
 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 
, 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 
  •  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; 
     body; quote-by attribution.
   Works whether root is 
     or a wrapper containing a nested 
    .
   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 
     — 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  and