/* ---------- Design tokens (authoritative; mirror Avalonia app) ---------- Theme states: - Dark (default on `:root`) — original brand palette - Light via OS preference — `@media (prefers-color-scheme: light)` applies when no explicit override - Explicit light — `:root[data-site-theme="light"]` - Explicit dark (override OS-light) — `:root[data-site-theme="dark"]` `/js/site-theme.js` writes the `data-site-theme` attribute synchronously in before paint, so there's no flash. `localStorage.ffb-site-theme` holds `light` / `dark`. */ :root { --bg: #0E1013; --section-bg: #13161A; --card: #15181D; --card-2: #191D23; --card-hi: #1E232A; --card-hover: #1E232A; --well: #0A0C0F; --border: #24292F; --border-hi: #2F353D; --hairline: #1C2027; --fg: #E7EAEE; --text-primary: #E7EAEE; --fg-dim: #AEB4BD; --text-dim: #AEB4BD; --fg-mute: #9AA3AF; --text-mute: #9AA3AF; --fg-faint: #8A95A3; --text-faint: #8A95A3; --brand: #4F9CFF; --brand-hover: #68ADFF; --brand-on-fill: #0A1628; --brand-fill: #2563EB; --brand-fill-hover: #1D4ED8; --brand-soft: rgba(79, 156, 255, 0.4); --signal: #E8B53C; --signal-soft: rgba(232, 181, 60, 0.12); --beta: #6D28D9; --ok: #6CC66B; --err: #E86B6B; /* Theme-sensitive overlays that need to flip with the palette. `--nav-bg` is the translucent sticky nav; `--hover-wash` is the subtle hover-tint used on text links in compact lists (docs sidebar, list rows). */ --nav-bg: rgba(10, 12, 15, 0.9); --hover-wash: rgba(255, 255, 255, 0.03); --max: 1100px; --pad-v: 96px; --pad-v-mob: 64px; --nav-h: 64px; --radius-sm: 6px; --radius: 8px; --radius-lg: 12px; --font-ui: var(--font-sans); --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Consolas, "Liberation Mono", Menlo, monospace; --shadow: 0 10px 30px rgba(0,0,0,0.40); --shadow-lg: 0 30px 60px rgba(0,0,0,0.50); color-scheme: dark; } /* OS fallback — follow the browser preference when JS has not stamped an explicit light/dark choice yet. `:not([data-site-theme="dark"])` keeps explicit dark-on-light-OS working. */ @media (prefers-color-scheme: light) { :root:not([data-site-theme="dark"]) { --bg: #FBFCFD; --section-bg: #F3F5F8; --card: #FFFFFF; --card-2: #F7F9FB; --card-hi: #EEF1F5; --card-hover: #EEF1F5; --well: #F7F9FB; --border: #DDE2E8; --border-hi: #C7CDD5; --hairline: #E7EAEE; --fg: #0F172A; --text-primary: #0F172A; --fg-dim: #475569; --text-dim: #475569; --fg-mute: #5B6678; --text-mute: #5B6678; --fg-faint: #64748B; --text-faint: #64748B; /* `--brand-on-fill` is the dark navy still used by the small `.beta-tag` pill (dark bg / white text). Filled CTA buttons use `--brand-fill` + white text instead — see `.btn-primary`. */ --brand-on-fill: #0A1628; --brand-fill: #2563EB; --brand-fill-hover: #1D4ED8; --brand-soft: rgba(79, 156, 255, 0.28); --signal: #8A6200; --signal-soft: rgba(183, 134, 11, 0.14); --beta: #6D28D9; --ok: #15803D; --err: #B91C1C; --nav-bg: rgba(251, 252, 253, 0.9); --hover-wash: rgba(15, 23, 42, 0.045); --shadow-lg: 0 24px 60px rgba(15,23,42,.14); color-scheme: light; } } /* Explicit user override — wins over OS preference. */ :root[data-site-theme="light"] { --bg: #FBFCFD; --section-bg: #F3F5F8; --card: #FFFFFF; --card-2: #F7F9FB; --card-hi: #EEF1F5; --card-hover: #EEF1F5; --well: #F7F9FB; --border: #DDE2E8; --border-hi: #C7CDD5; --hairline: #E7EAEE; --fg: #0F172A; --text-primary: #0F172A; --fg-dim: #475569; --text-dim: #475569; --fg-mute: #5B6678; --text-mute: #5B6678; --fg-faint: #64748B; --text-faint: #64748B; --brand-on-fill: #0A1628; --brand-fill: #2563EB; --brand-fill-hover: #1D4ED8; --brand-soft: rgba(79, 156, 255, 0.28); --signal: #8A6200; --signal-soft: rgba(183, 134, 11, 0.14); --beta: #6D28D9; --ok: #15803D; --err: #B91C1C; --nav-bg: rgba(251, 252, 253, 0.9); --hover-wash: rgba(15, 23, 42, 0.045); --shadow-lg: 0 24px 60px rgba(15,23,42,.14); color-scheme: light; } /* Explicit dark override — defeats OS-light preference. The base `:root` already carries the dark tokens, so we just re-assert `color-scheme: dark` in case the media query above flipped it. */ :root[data-site-theme="dark"] { color-scheme: dark; } /* ---------- Theme-aware images ---------- ResponsiveAssetImage.razor emits a wrapper around two blocks (.theme-light + .theme-dark) when the root light/default PNG and an images/.../dark/ sibling exist. CSS hides the wrong variant per the active data-site-theme attribute. */ .theme-aware-image { display: contents; } :root[data-site-theme="light"] .theme-aware-image .theme-dark, :root[data-site-theme="dark"] .theme-aware-image .theme-light { display: none; } :root:not([data-site-theme]) .theme-aware-image .theme-dark { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-site-theme]) .theme-aware-image .theme-light { display: none; } :root:not([data-site-theme]) .theme-aware-image .theme-dark { display: block; } } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.55; color: var(--text-primary); background: var(--bg); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, p, ul, ol { margin: 0; } ul { padding: 0; list-style: none; } a { color: var(--brand); text-decoration: none; } a:hover { color: var(--brand-hover); } img { display: block; max-width: 100%; height: auto; } :where(.form-hint, .subscribe-consent, .legal, .confirm-card-body, .confirm-card-fine) a { text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; } :where(.docs-article p, .docs-article li, .docs-manual p, .docs-manual li, .docs-release-banner) a { text-decoration: underline; text-decoration-color: currentColor; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-decoration-thickness: 0.06em; text-underline-offset: 0.22em; } :where(.docs-article p, .docs-article li, .docs-manual p, .docs-manual li, .docs-release-banner) a:hover, :where(.docs-article p, .docs-article li, .docs-manual p, .docs-manual li, .docs-release-banner) a:focus-visible { text-decoration-color: currentColor; text-decoration-thickness: 0.08em; } a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]) { outline: 2px solid transparent; outline-offset: 3px; border-radius: 4px; } a[href]:focus, button:focus, input:focus, select:focus, textarea:focus, summary:focus, [tabindex]:not([tabindex="-1"]):focus { outline-color: var(--brand) !important; } /* Blazor's sets focus on the first h1 after route load so screen readers announce the new page. Sighted users shouldn't see a focus ring on something they didn't tab to; FocusOnNavigate marks the target with tabindex="-1", which we use as the signal to suppress the outline. */ [tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; } .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } code, .mono { font-family: var(--font-mono); } /* ---------- Layout ---------- */ .wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; } section { padding-top: var(--pad-v); padding-bottom: var(--pad-v); } @media (max-width: 900px) { section { padding-top: var(--pad-v-mob); padding-bottom: var(--pad-v-mob); } } @media (max-width: 500px) { .wrap { padding: 0 18px; } } .section-alt { background: var(--section-bg); } .eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand); margin-bottom: 12px; } .eyebrow-free { display: inline-block; margin-right: 10px; padding: 2px 8px; background: rgba(108, 198, 107, 0.16); color: var(--ok); font-weight: 700; letter-spacing: 0.08em; border-radius: 4px; } /* Hero trust strip — sits below the subscribe form (under the consent checkbox), replacing the old tiny uppercase eyebrow. Reads as a confident statement, not a row of buttons: a green "free" badge and the supported OSes as bold inline text, with the sims on a quieter line beneath. */ .hero-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 24px; } .hero-trust-free { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; background: rgba(108, 198, 107, 0.15); color: var(--ok); font-weight: 700; font-size: 13.5px; letter-spacing: 0.01em; border-radius: 999px; } .hero-trust-os { font-size: 16px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.005em; } .hero-trust-os i { font-style: normal; font-weight: 400; margin: 0 9px; color: var(--text-mute); opacity: 0.7; } .hero-trust-sims { margin: 11px 0 0; font-size: 13.5px; color: var(--text-mute); } h1 { font-size: 56px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 700; color: var(--text-primary); } h2 { font-size: 32px; line-height: 1.2; font-weight: 600; color: var(--text-primary); } h3 { font-size: 20px; line-height: 1.3; font-weight: 600; color: var(--text-primary); } .lede { color: var(--text-dim); font-size: 18px; line-height: 1.55; max-width: 560px; } .lede-emph { display: inline-block; padding: 1px 8px; background: rgba(108, 198, 107, 0.14); color: var(--ok); font-weight: 700; border-radius: 4px; letter-spacing: -0.01em; } .subhead { color: var(--text-dim); max-width: 640px; } .small { font-size: 14px; line-height: 1.5; color: var(--text-mute); } .tiny { font-size: 13px; line-height: 1.45; color: var(--text-faint); } @media (max-width: 700px) { h1 { font-size: 36px; line-height: 1.15; } h2 { font-size: 26px; } .lede { font-size: 16px; } } /* ---------- Nav ---------- */ .site-header { position: relative; z-index: 50; } .skip-link { position: fixed; top: 10px; left: 10px; transform: translateY(-160%); z-index: 100; padding: 10px 14px; color: var(--bg); background: var(--text-primary); border-radius: var(--radius-sm); font-weight: 700; transition: transform .15s ease; } /* Shadow only while the link is on-screen (focused). At rest the link is translated above the viewport, but a base box-shadow's 24px blur leaked a soft smudge into the top-left corner of every page. */ .skip-link:focus { transform: translateY(0); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28); } nav.top { position: sticky; top: 0; z-index: 50; height: var(--nav-h); background: var(--nav-bg); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } nav.top .wrap { display: flex; align-items: center; height: 100%; gap: 20px; } .brand { display: flex; align-items: center; gap: 10px; margin-right: auto; font-weight: 600; font-size: 16px; color: var(--text-primary); } /* The brand block is an on every page (see SiteNav.razor). Strip the default link styling so it reads the same whether we re-use the component on Home (anchor to self) or a sub-page. */ .brand-link { text-decoration: none; } .brand-link:hover .brand-glyph { filter: brightness(1.15); } .brand-link:hover > span { color: var(--brand); } .brand-glyph { width: 26px; height: 26px; display: inline-block; flex-shrink: 0; } .pill-beta { display: inline-block; margin-left: 8px; padding: 2px 7px; background: var(--beta); color: #fff; font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.08em; border-radius: 999px; vertical-align: 2px; } #primary-nav { display: flex; gap: 24px; align-items: center; } #primary-nav a { color: var(--text-dim); font-size: 15px; font-weight: 500; } #primary-nav a:hover { color: var(--text-primary); } /* ---- Dropdown menus (Features / Community / Docs) ----------------
-based: CSP-safe (no inline JS), keyboard-operable, and they expand inline inside the mobile drawer. site.js closes an open menu on outside-click / Escape / navigation as a progressive enhancement. */ .nav-dd-li { position: relative; display: flex; } .nav-dd { position: relative; } .nav-dd > summary { display: inline-flex; align-items: center; gap: 5px; color: var(--text-dim); font-size: 15px; font-weight: 500; cursor: pointer; list-style: none; user-select: none; } .nav-dd > summary::-webkit-details-marker { display: none; } .nav-dd > summary::marker { content: ""; } .nav-dd > summary:hover, .nav-dd[open] > summary { color: var(--text-primary); } .nav-dd-caret { transition: transform .15s ease; opacity: .7; } .nav-dd[open] .nav-dd-caret { transform: rotate(180deg); } .nav-dd-menu { position: absolute; top: calc(100% + 14px); left: -14px; min-width: 252px; z-index: 60; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 14px 36px rgba(0,0,0,.20); padding: 8px; display: flex; flex-direction: column; gap: 2px; } .nav-dd-menu a { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: var(--radius); text-decoration: none; } .nav-dd-menu a:hover { background: var(--hover-wash); } .nav-dd-t { font-size: 14px; font-weight: 600; color: var(--text-primary); } .nav-dd-d { font-size: 12px; color: var(--text-dim); } @media (max-width: 820px) { #primary-nav { gap: 16px; } #primary-nav a { font-size: 14px; } } /* Mobile nav drawer. A real button toggles `.is-open` so the drawer is reachable by keyboard and exposes aria-expanded state. */ .nav-burger { display: none; } .nav-scrim { display: none; } .language-selector { position: relative; flex: 0 0 auto; } .language-selector summary { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 10px; border: 1px solid var(--hairline); border-radius: var(--radius-sm); color: var(--text-dim); background: transparent; font-size: 13px; font-weight: 600; cursor: pointer; list-style: none; } .language-selector summary::-webkit-details-marker { display: none; } .language-selector summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); } .language-selector[open] summary, .language-selector summary:hover { color: var(--text-primary); background: var(--card); border-color: var(--border); } .language-selector-icon { width: 17px; height: 17px; flex: 0 0 auto; color: var(--text-faint); } .language-selector-current { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .language-selector ul { position: absolute; top: calc(100% + 8px); right: 0; display: grid; width: min(300px, calc(100vw - 28px)); max-height: min(520px, calc(100vh - var(--nav-h) - 30px)); overflow-y: auto; padding: 8px; margin: 0; list-style: none; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 20px 48px rgba(0, 0, 0, 0.32); z-index: 60; } .language-selector:not([open]) ul { display: none; } .language-selector li { display: block; } .language-selector a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 10px; border-radius: var(--radius-sm); color: var(--text-primary); text-decoration: none; font-size: 14px; } .language-selector a:hover, .language-selector a[aria-current="true"] { background: var(--hover-wash); } .language-selector a[aria-current="true"] { box-shadow: inset 3px 0 0 var(--brand); } .language-selector-english { color: var(--text-faint); font-size: 12px; white-space: nowrap; } .translation-notice { color: var(--text-primary); background: color-mix(in srgb, var(--brand) 14%, var(--bg)); border-bottom: 1px solid var(--border); } .translation-notice .wrap { display: flex; gap: 10px; align-items: baseline; padding-top: 10px; padding-bottom: 10px; font-size: 14px; line-height: 1.45; } .translation-notice strong { flex: 0 0 auto; } .translation-notice a { color: var(--brand); font-weight: 700; } @media (max-width: 640px) { .brand { font-size: 15px; } .language-selector summary { width: auto; justify-content: center; padding: 0 9px; } .language-selector-current { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } .translation-notice .wrap { display: block; font-size: 13px; } .translation-notice strong { display: block; margin-bottom: 2px; } .nav-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; padding: 8px; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; transition: border-color .15s ease, background-color .15s ease; } .nav-burger span { display: block; height: 2px; width: 100%; background: var(--text-dim); border-radius: 2px; transition: transform .2s ease, opacity .15s ease, background-color .15s ease; transform-origin: center; } .nav-burger:hover span { background: var(--text-primary); } /* Drawer state: ul becomes a column, pinned to the right edge below the nav. It stays out of layout entirely while closed so it does not create horizontal document overflow on mobile. */ #primary-nav { display: none; position: fixed; top: var(--nav-h); right: 0; width: min(260px, 80vw); max-height: calc(100vh - var(--nav-h)); overflow-y: auto; flex-direction: column; align-items: stretch; gap: 0; padding: 12px 0; margin: 0; background: var(--card); border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); box-shadow: -12px 20px 40px rgba(0, 0, 0, 0.35); z-index: 49; } #primary-nav li { display: block; } #primary-nav a { display: block; padding: 12px 20px; font-size: 15px; color: var(--text-primary); } /* Dropdowns expand inline within the drawer instead of as popovers. */ .nav-dd-li, .nav-dd { display: block; width: 100%; } .nav-dd > summary { display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; width: 100%; padding: 12px 20px; font-size: 15px; color: var(--text-primary); } .nav-dd-menu { position: static; min-width: 0; z-index: auto; background: transparent; border: none; box-shadow: none; border-radius: 0; padding: 0 0 6px 0; gap: 0; } .nav-dd-menu a { padding: 9px 20px 9px 34px; } .nav-dd-t { font-weight: 500; } .nav-dd-d { display: none; } #primary-nav a:hover { background: var(--hover-wash); } /* Scrim — full-viewport tint below the drawer. Hidden by default; becomes interactive + visible when the menu is open. */ .nav-scrim { display: block; position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.45); border: 0; padding: 0; opacity: 0; pointer-events: none; transition: opacity .2s ease-out; z-index: 48; } nav.top.is-open #primary-nav { display: flex; } nav.top.is-open .nav-scrim { opacity: 1; pointer-events: auto; } /* Burger → X animation when open. */ nav.top.is-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } nav.top.is-open .nav-burger span:nth-child(2) { opacity: 0; } nav.top.is-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } } /* Theme toggle — rightmost item in the top nav. Shows a sun OR moon depending on the active theme; click flips Light ↔ Dark via /js/site-theme.js. Visible on every viewport, including mobile (where ul hides but the button stays reachable). */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: 4px; padding: 0; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--text-dim); cursor: pointer; transition: color .15s ease, border-color .15s ease, background-color .15s ease; } .theme-toggle:hover { color: var(--text-primary); border-color: var(--hairline); background: var(--card); } .theme-toggle svg { width: 18px; height: 18px; display: block; } /* Swap which glyph is visible based on the current theme. Default visibility hides both; the .is-light / .is-dark class (set by site-theme.js) reveals the matching glyph. */ .theme-toggle .i-sun, .theme-toggle .i-moon { display: none; } .theme-toggle.is-dark .i-sun { display: block; } .theme-toggle.is-light .i-moon { display: block; } /* ---------- Hero ---------- */ .hero { position: relative; padding-top: 72px; padding-bottom: 96px; background: radial-gradient(circle at 50% 0%, rgba(79, 156, 255, 0.07) 0%, transparent 55%), var(--bg); } /* Hero breaks the standard 1100px wrap on wide screens so the product shot has more room to breathe — text still wraps nicely against the 580px lede max-width. Below 900px the layout stacks and we inherit the default wrap width again. */ .hero .wrap { max-width: var(--max); } .hero-grid { display: grid; grid-template-columns: 5fr 6fr; gap: 64px; align-items: center; } @media (max-width: 900px) { .hero .wrap { max-width: var(--max); } .hero-grid { grid-template-columns: 1fr; gap: 40px; } .hero { padding-top: 48px; padding-bottom: 64px; } } .hero picture { display: block; width: 100%; height: 100%; } .hero h1 { margin-bottom: 20px; } .hero .lede { margin-bottom: 28px; } .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; min-width: 168px; padding: 0 18px; font-family: var(--font-sans); font-size: 14px; font-weight: 600; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid transparent; transition: background 150ms ease-out, transform 150ms ease-out, border-color 150ms ease-out; text-decoration: none; } .btn-primary { background: var(--brand-fill); color: #fff; } .btn-primary:hover { background: var(--brand-fill-hover); color: #fff; transform: translateY(-1px); } .btn-secondary { background: var(--card); color: var(--text-primary); border-color: var(--border); } .btn-secondary:hover { background: var(--card-hover); border-color: var(--brand-soft); color: var(--text-primary); transform: translateY(-1px); } .btn-disabled { background: var(--card); color: var(--text-mute); border-color: var(--border); cursor: not-allowed; } .btn-disabled:hover { transform: none; } .btn .glyph { width: 16px; height: 16px; display: inline-block; flex-shrink: 0; } .btn .tag { font-size: 10px; font-weight: 500; padding: 2px 6px; border-radius: 999px; background: var(--well); color: var(--text-mute); letter-spacing: 0.05em; } .btn .beta-tag { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; padding: 2px 7px; border-radius: 999px; background: var(--brand-on-fill); color: #fff; margin-left: 2px; } .hero-spec { font-family: var(--font-mono); font-size: 12px; color: var(--text-mute); margin-top: 14px; } .hero-img-frame { border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--well); overflow: hidden; aspect-ratio: 1 / 1; } .hero-img-frame img { width: 100%; height: 100%; object-fit: cover; } /* ---------- Features ---------- */ .features .header { margin-bottom: 48px; } .features .header h2 { margin-bottom: 10px; } .feature-row { display: grid; grid-template-columns: 80px 1fr; gap: 28px; align-items: start; padding: 28px 0; border-top: 1px solid var(--hairline); } .feature-row:last-child { border-bottom: 1px solid var(--hairline); } .feature-icon { width: 56px; height: 56px; color: var(--brand); flex-shrink: 0; } .feature-row h3 { margin-bottom: 8px; } .feature-row p { color: var(--text-dim); } @media (max-width: 700px) { .feature-row { grid-template-columns: 1fr; gap: 14px; } } /* ---------- App tour ---------- */ .tour .header { margin-bottom: 40px; } .tour .header h2 { margin-bottom: 10px; } .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .tiles { grid-template-columns: 1fr; } } .tile { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color 150ms ease-out, background 150ms ease-out; } .tile:hover { border-color: var(--brand-soft); background: var(--card-hover); } .tile .shot { display: block; position: relative; aspect-ratio: 16 / 9; background: var(--well); border-bottom: 1px solid var(--border); overflow: hidden; cursor: zoom-in; } .tile .shot picture, .app-shot-link picture { display: block; width: 100%; height: 100%; } .tile .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform 200ms ease-out; } .tile .shot:hover img { transform: scale(1.03); } .tile .shot::after { content: ''; position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; background: rgba(10, 12, 15, 0.75); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 6px; opacity: 0; transition: opacity 150ms ease-out; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; background-size: 16px 16px; } .tile:hover .shot::after { opacity: 1; } /* ---------- Lightbox ---------- The backdrop stays dark in both themes (standard lightbox convention — focus the eye on the image, not the page). That means every control INSIDE the lightbox has to use fixed light-on-dark colours, not the site's theme tokens — otherwise in light mode the chrome inherits dark text on a dark overlay and the close + prev/next buttons vanish. */ .lightbox { padding: 0; border: none; background: transparent; color: #E5E7EB; max-width: none; max-height: none; width: 100vw; height: 100vh; margin: 0; overflow: visible; } .lightbox::backdrop { background: rgba(5, 7, 10, 0.92); backdrop-filter: blur(6px); } .lightbox[open] { display: flex; align-items: center; justify-content: center; } .lb-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 96vw; } .lb-stage img { max-width: 96vw; max-height: calc(100vh - 140px); width: auto; height: auto; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5); display: block; } .lb-caption { font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(229, 231, 235, 0.8); } .lb-caption .lb-count { color: rgba(229, 231, 235, 0.55); font-family: var(--font-mono); font-size: 12px; margin-left: 10px; letter-spacing: 0.04em; text-transform: none; } .lb-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; background: rgba(10, 12, 15, 0.7); border: 1px solid rgba(255, 255, 255, 0.18); color: #E5E7EB; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 150ms ease-out, border-color 150ms ease-out; } .lb-btn:hover { background: rgba(30, 35, 42, 0.9); border-color: rgba(120, 170, 255, 0.55); } .lb-prev { left: -60px; } .lb-next { right: -60px; } @media (max-width: 820px) { .lb-prev { left: 8px; } .lb-next { right: 8px; } .lb-btn { background: rgba(10, 12, 15, 0.85); } } .lb-close { position: fixed; top: 20px; right: 20px; width: 40px; height: 40px; background: rgba(10, 12, 15, 0.7); border: 1px solid rgba(255, 255, 255, 0.18); color: #E5E7EB; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; } .lb-close:hover { background: rgba(30, 35, 42, 0.9); border-color: rgba(120, 170, 255, 0.55); } .tile .body { padding: 16px 18px 18px; } .tile h3 { font-size: 17px; margin-bottom: 4px; } .tile p { font-size: 14px; color: var(--text-dim); line-height: 1.5; } /* ---------- Compatibility ---------- */ .compat .header { margin-bottom: 40px; } .compat .header h2 { margin-bottom: 10px; } .compat-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } @media (max-width: 800px) { .compat-cols { grid-template-columns: 1fr; gap: 24px; } } .compat-col { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; } .compat-col .label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 10px; } .compat-col h3 { font-size: 20px; margin-bottom: 10px; } .compat-col p { color: var(--text-dim); font-size: 16px; line-height: 1.6; } .compat-col .note { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hairline); font-family: var(--font-mono); font-size: 12px; color: var(--text-mute); line-height: 1.5; } /* ---------- FFB Probe promotion ---------- */ .probe-promo { padding-top: 80px; padding-bottom: 80px; background: var(--section-bg); } .probe-promo-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 44px; align-items: center; } .probe-promo h2 { margin-bottom: 12px; } .probe-promo .subhead { margin-bottom: 24px; } .probe-promo-actions { margin-bottom: 14px; } .probe-promo-facts { display: grid; gap: 14px; } .probe-promo-facts > div { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 6px 14px; align-items: start; padding: 18px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); } .probe-fact-k { grid-row: 1 / span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--brand) 45%, var(--border)); background: color-mix(in srgb, var(--brand) 12%, var(--card)); color: var(--brand); font-family: var(--font-mono); font-size: 12px; font-weight: 700; } .probe-promo-facts strong { color: var(--text-primary); font-size: 16px; } .probe-promo-facts p { margin: 0; color: var(--text-dim); font-size: 14px; line-height: 1.55; } @media (max-width: 850px) { .probe-promo-grid { grid-template-columns: 1fr; gap: 32px; } } /* ---------- Pricing ---------- */ .pricing .header { margin-bottom: 40px; max-width: 720px; } .pricing .header h2 { margin-bottom: 10px; } .pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; } @media (max-width: 800px) { .pricing-grid { grid-template-columns: 1fr; } } .pricing-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 14px; } .pricing-card .label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand); } .pricing-card h3 { font-size: 20px; margin: 0; } .pricing-support-cta { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--hairline); } .pricing-support-cta .btn { margin-bottom: 10px; } .pricing-support-cta p { color: var(--text-mute); font-size: 13px; line-height: 1.5; } .pricing-card-muted .label { color: var(--text-mute); } .pricing-card-muted { background: transparent; border-style: dashed; } .pricing-muted-body { color: var(--text-dim); font-size: 16px; line-height: 1.6; } .checklist { display: flex; flex-direction: column; gap: 10px; } .checklist li { position: relative; padding-left: 26px; color: var(--text-dim); font-size: 16px; line-height: 1.6; } .checklist li::before { content: ''; position: absolute; left: 4px; top: 7px; width: 6px; height: 10px; border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(45deg); } .checklist-dim li::before { border-color: var(--text-mute); } /* ---------- Support payment ---------- */ .support-dev { padding-top: 72px; padding-bottom: 88px; background: var(--bg); } .support-dev-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr); gap: 56px; align-items: start; } .support-dev h1 { max-width: 720px; margin-bottom: 20px; } .support-dev .lede { max-width: 680px; } .support-dev-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 30px; } .support-dev-facts > div, .support-dev-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); } .support-dev-facts > div { padding: 16px; } .support-dev-facts strong, .support-dev-facts span { display: block; } .support-dev-facts strong { margin-bottom: 4px; color: var(--text-primary); font-size: 14px; } .support-dev-facts span { color: var(--text-dim); font-size: 13px; line-height: 1.45; } .support-dev-card { padding: 28px; } .support-dev-card h2 { font-size: 24px; margin-bottom: 10px; } .support-dev-card > p { color: var(--text-dim); margin-bottom: 22px; } .support-form { display: grid; gap: 20px; } .support-form input[type="email"], .support-form input[type="number"] { background: var(--well); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-primary); padding: 12px 14px; font-family: inherit; font-size: 14px; line-height: 1.55; width: 100%; transition: border-color .15s ease, background-color .15s ease; } .support-form input:focus { border-color: var(--brand); background: var(--card-hover); } .money-input { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; background: var(--well); border: 1px solid var(--border); border-radius: var(--radius); padding-left: 14px; } .money-input span { color: var(--text-mute); font-family: var(--font-mono); } .money-input input[type="number"] { border: 0; background: transparent; padding-left: 0; } .money-input:focus-within { border-color: var(--brand); background: var(--card-hover); } .support-amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .amount-btn { display: inline-flex; align-items: center; justify-content: center; padding: 16px 8px; background: var(--well); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-primary); font-family: inherit; font-size: 18px; font-weight: 600; cursor: pointer; transition: border-color .12s ease, background .12s ease, transform .04s ease; } .amount-btn:hover { border-color: var(--brand); background: var(--card-hover); } .amount-btn:active { transform: translateY(1px); } .amount-btn.is-suggested { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); } .support-custom { border-top: 1px solid var(--hairline); padding-top: 18px; } .support-custom-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: stretch; } .support-custom-row .money-input { margin: 0; } .support-custom-row .btn { white-space: nowrap; } .support-checkout-note { margin-top: 2px; } .support-dev-notice { padding: 14px 16px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--well); color: var(--text-dim); font-size: 14px; line-height: 1.55; margin-bottom: 20px; } .support-dev-notice code { color: var(--text-primary); } .support-identity-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr); gap: 56px; align-items: start; } .support-identity h2, .support-funding h2 { margin-bottom: 14px; } .support-identity p { max-width: 710px; color: var(--text-dim); font-size: 16px; line-height: 1.7; margin-bottom: 16px; } .support-profile-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } .support-profile-links a { display: inline-flex; align-items: center; min-height: 38px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--text-primary); font-size: 14px; font-weight: 600; } .support-profile-links a:hover { border-color: color-mix(in srgb, var(--brand) 55%, var(--border)); color: var(--brand-hover); background: var(--card-hover); } .support-identity-panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; } .support-identity-panel p { margin-bottom: 18px; font-size: 15px; line-height: 1.65; } .support-proof-list { display: grid; gap: 10px; } .support-proof-list li { position: relative; padding-left: 22px; color: var(--text-dim); font-size: 14px; line-height: 1.5; } .support-proof-list li::before { content: ''; position: absolute; left: 3px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); } .support-section-header { max-width: 780px; margin-bottom: 36px; } .support-section-header h2 { margin-bottom: 12px; } .support-trust-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .support-trust-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; } .support-trust-card .label { margin-bottom: 10px; color: var(--brand); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .support-trust-card h3 { margin-bottom: 8px; font-size: 19px; } .support-trust-card p { color: var(--text-dim); font-size: 15px; line-height: 1.6; } .support-funding-grid { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: 48px; align-items: start; } .support-final-actions { margin-top: 28px; } .support-funded-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .support-funded-list > div { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; } .support-funded-list strong, .support-funded-list span { display: block; } .support-funded-list strong { margin-bottom: 6px; color: var(--text-primary); font-size: 15px; } .support-funded-list span { color: var(--text-dim); font-size: 14px; line-height: 1.55; } @media (max-width: 900px) { .support-dev-grid, .support-identity-grid, .support-funding-grid { grid-template-columns: 1fr; gap: 34px; } .support-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .support-dev-facts, .support-trust-grid, .support-funded-list { grid-template-columns: 1fr; } .support-dev-card, .support-identity-panel { padding: 22px; } } /* ---------- FAQ ---------- */ .faq .header { margin-bottom: 32px; } .faq .header h2 { margin-bottom: 10px; } .faq-list { display: flex; flex-direction: column; gap: 10px; } .faq-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } .faq-item summary { padding: 16px 20px; cursor: pointer; font-size: 16px; font-weight: 500; color: var(--text-primary); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .faq-item[open] summary { border-bottom: 1px solid var(--hairline); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: ''; flex-shrink: 0; width: 10px; height: 10px; border-right: 2px solid var(--text-mute); border-bottom: 2px solid var(--text-mute); transform: rotate(45deg) translate(-2px, -2px); transition: transform 180ms ease-out; } .faq-item[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); } .faq-item .faq-body { padding: 18px 20px 22px; color: var(--text-dim); font-size: 16px; line-height: 1.7; } .faq-item .faq-body p { margin: 0 0 14px; } .faq-item .faq-body p:last-child { margin-bottom: 0; } /* ---------- SEO landing + download pages ---------- */ .landing-hero, .download-hero { padding-top: 72px; padding-bottom: 88px; background: var(--bg); } .landing-hero-grid, .download-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr); gap: 48px; align-items: center; } .landing-hero-grid > *, .download-grid > *, .landing-split > *, .landing-shot-grid > * { min-width: 0; } .landing-hero h1, .download-hero h1 { margin-bottom: 20px; text-wrap: balance; overflow-wrap: normal; word-break: normal; hyphens: none; } .landing-hero .lede, .download-hero .lede { margin-bottom: 28px; } .landing-fact-panel, .download-panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; } .landing-panel-kicker, .download-panel-kicker, .landing-card .label, .trust-card .label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand); margin-bottom: 12px; } .landing-fact-panel dl, .download-panel dl { display: grid; grid-template-columns: 116px 1fr; gap: 12px 18px; margin: 0; } .landing-fact-panel dt, .download-panel dt { color: var(--text-mute); font-size: 13px; font-weight: 600; } .landing-fact-panel dd, .download-panel dd { margin: 0; color: var(--text-dim); font-size: 14px; line-height: 1.5; } .landing-fact-panel code, .download-panel code { color: var(--text-primary); } .landing-hero-media, .download-media, .landing-visual-stack { display: grid; gap: 16px; } .app-shot { margin: 0; min-width: 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .app-shot-link { display: block; aspect-ratio: 16 / 10; background: var(--well); border-bottom: 1px solid var(--hairline); overflow: hidden; } .app-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; } .app-shot figcaption { padding: 12px 14px 14px; color: var(--text-dim); font-size: 13.5px; line-height: 1.5; } .landing-shot-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .download-panel h2 { margin-bottom: 18px; } .download-manifest { margin-bottom: 24px !important; } .download-manifest dd strong, .download-manifest dd span { display: block; overflow-wrap: anywhere; } .download-manifest dd strong { color: var(--text-primary); font-family: var(--font-mono); font-size: 13px; margin-bottom: 4px; } .download-manifest dd span { font-family: var(--font-mono); font-size: 12px; color: var(--text-mute); } .probe-inline-note { margin-top: 18px; padding: 14px 16px; background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--brand); border-radius: var(--radius-sm); } .probe-inline-note .label { margin-bottom: 5px; color: var(--brand); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .probe-inline-note p { margin: 0 0 8px 0; color: var(--text-dim); font-size: 14px; line-height: 1.5; } .probe-inline-note a { font-weight: 700; } .landing-card-grid, .trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .landing-card, .trust-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; } .landing-card h2, .trust-card h2 { font-size: 20px; margin-bottom: 10px; } .landing-card p, .trust-card p { color: var(--text-dim); font-size: 15px; line-height: 1.6; margin-bottom: 14px; } .landing-split { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; } .landing-split-visual { align-items: center; } .landing-split h2 { margin-bottom: 10px; } .landing-list { display: grid; gap: 12px; } .landing-list > div { padding: 16px 18px; background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius); } .landing-list strong, .landing-list span { display: block; } .landing-list strong { margin-bottom: 4px; color: var(--text-primary); } .landing-list span { color: var(--text-dim); font-size: 14px; line-height: 1.5; } .landing-steps .header, .download-steps .header { margin-bottom: 22px; } .landing-steps ol, .download-steps ol { counter-reset: landing-step; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; list-style: none; padding: 0; margin: 0 0 28px 0; } .landing-steps li, .download-steps li { position: relative; padding: 44px 18px 18px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-dim); font-size: 14px; line-height: 1.5; } .landing-steps li::before, .download-steps li::before { counter-increment: landing-step; content: counter(landing-step); position: absolute; top: 16px; left: 18px; width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; background: var(--brand-fill); color: #fff; font-family: var(--font-mono); font-size: 12px; font-weight: 700; } .landing-split-visual .landing-steps ol, .landing-split-visual .download-steps ol { grid-template-columns: repeat(2, 1fr); } .landing-final h2 { margin-bottom: 10px; } .landing-final .subhead { margin-bottom: 24px; } .landing-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); } .landing-table { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 14px; } .landing-table th, .landing-table td { text-align: left; padding: 16px 18px; border-bottom: 1px solid var(--hairline); vertical-align: top; } .landing-table tr:last-child td { border-bottom: 0; } .landing-table th { color: var(--text-mute); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; } .landing-table td { color: var(--text-dim); line-height: 1.5; } .landing-table td:first-child { color: var(--text-primary); font-weight: 600; } .setup-paths .header { margin-bottom: 40px; } .setup-paths .header h2 { margin-bottom: 10px; } @media (max-width: 900px) { .landing-hero-grid, .download-grid, .landing-split, .landing-shot-grid { grid-template-columns: 1fr; gap: 32px; } .landing-card-grid, .trust-grid, .landing-steps ol, .download-steps ol { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .landing-hero, .download-hero { padding-top: 48px; padding-bottom: 64px; } .landing-fact-panel dl, .download-panel dl, .landing-card-grid, .trust-grid, .landing-steps ol, .download-steps ol { grid-template-columns: 1fr; } .landing-fact-panel, .download-panel, .landing-card, .trust-card { padding: 20px; } .app-shot figcaption { padding: 11px 12px 13px; font-size: 13px; } } /* ---------- Footer ---------- */ footer { background: var(--well); border-top: 1px solid var(--border); padding-top: 48px; padding-bottom: 40px; } footer .wrap { display: grid; grid-template-columns: 1.7fr 1fr 1.25fr 1fr; gap: 32px; align-items: start; } @media (max-width: 800px) { footer .wrap { grid-template-columns: 1fr; gap: 28px; } } .footer-heading { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mute); margin: 0 0 12px 0; } footer p, footer li { font-size: 14px; color: var(--text-dim); line-height: 1.55; } footer ul { display: flex; flex-direction: column; gap: 8px; } /* Links column has 6+ entries; break it into two visual columns so the column doesn't run long and crowd the skyline flourish below. */ footer ul.footer-links-split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; } footer a { color: var(--text-dim); } footer a:hover { color: var(--brand); } .footer-meta { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); } /* Toronto skyline flourish above the footer-bottom line. Pulled from FfbBridge.Desktop/Views/AboutView.axaml so site + app share the same 220×38 path. Kept faint — an ambient mark, not a visual anchor. */ .footer-skyline { max-width: var(--max); margin: 32px auto 0; padding: 0 24px; display: flex; justify-content: center; } .footer-skyline .skyline { width: 220px; height: 38px; color: var(--text-faint); opacity: 0.65; } .footer-bottom { max-width: var(--max); margin: 16px auto 0; padding: 20px 24px 0; border-top: 1px solid var(--hairline); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 12px; font-size: 12px; color: var(--text-faint); } .footer-bottom .footer-made-in { display: inline-flex; align-items: center; gap: 8px; } .footer-bottom .ca-flag { width: 22px; height: 11px; border-radius: 1px; } .footer-bottom-sep { color: var(--text-faint); opacity: 0.5; } @media (max-width: 500px) { .footer-bottom-sep { display: none; } .footer-bottom { flex-direction: column; gap: 6px; } } /* ---------- Subscribe form (hero island) ---------- */ .subscribe { margin: 24px 0 14px; max-width: 520px; } .subscribe-row { display: flex; gap: 8px; flex-wrap: wrap; } .subscribe-input { flex: 1 1 260px; min-width: 0; padding: 11px 14px; background: var(--well); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius); font: inherit; font-size: 15px; transition: border-color .15s ease, background .15s ease; } .subscribe-input::placeholder { color: var(--text-faint); } .subscribe-input:focus { border-color: var(--brand); background: var(--card-hover); } .subscribe-hint { margin-top: 10px; font-size: 13px; color: var(--text-mute); line-height: 1.5; } /* CASL consent row: checkbox + inline label. The checkbox is unchecked by default and the submit button stays disabled until it's ticked. Privacy policy link lives inside the label so the consent is genuinely informed. */ .subscribe-consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--text-dim); cursor: pointer; user-select: none; } .subscribe-consent input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; } .subscribe-consent a { color: var(--brand); } .subscribe-error { margin-top: 10px; font-size: 13px; color: var(--err); } /* Amber-toned "heads up" block — less severe than .subscribe-error. Used for the re-opt-in confirmation state when an address that previously unsubscribed is trying to sign up again. */ .subscribe-warning { margin-top: 10px; padding: 10px 14px; background: rgba(232, 181, 60, 0.10); border: 1px solid rgba(232, 181, 60, 0.35); border-radius: var(--radius); font-size: 13px; line-height: 1.5; color: var(--text-dim); } .subscribe-warning strong { color: var(--text-primary); } .subscribe-warning em { font-style: normal; color: var(--signal); font-weight: 600; } .subscribe-success { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 22px; } .subscribe-success h3 { margin-bottom: 8px; color: var(--text-primary); } .subscribe-success p { color: var(--text-dim); font-size: 15px; } .subscribe-success a { color: var(--brand); } /* ---------- Legal pages (Privacy, Terms etc) ---------- */ .legal { padding-top: 72px; padding-bottom: 72px; } .legal h1 { font-size: 40px; line-height: 1.15; margin-bottom: 16px; } .legal .lede { margin-bottom: 24px; } .legal .small { color: var(--text-faint); margin-bottom: 40px; } .legal h2 { font-size: 20px; font-weight: 600; color: var(--text-primary); margin: 36px 0 12px; padding-top: 20px; border-top: 1px solid var(--hairline); } .legal h2:first-of-type { padding-top: 0; border-top: 0; margin-top: 40px; } .legal p { color: var(--text-dim); font-size: 15px; line-height: 1.65; margin: 0 0 14px; } .legal p:last-child { margin-bottom: 0; } .legal-list { margin: 0 0 14px; padding-left: 0; list-style: none; } .legal-list li { position: relative; padding-left: 22px; margin-bottom: 10px; color: var(--text-dim); font-size: 15px; line-height: 1.6; } .legal-list li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); opacity: 0.6; } .legal-list strong { color: var(--text-primary); font-weight: 600; } /* Buttons opt out: .legal's link color has higher specificity than .btn-primary's white text, which turned the /beta download buttons brand-on-brand (owner report 2026-07-09 — /beta is the first page with buttons inside .legal). */ .legal a:not(.btn) { color: var(--brand); } /* ---------- /releases — rendered RELEASE-NOTES.md ---------- The markdown renderer emits bare h2/h3/p/ul/li/code with no classes, so restore list bullets (the global reset strips them) and give version headings the same section rhythm as .legal h2. h2 ids are the raw version strings (deep-link anchors); the scroll-margin keeps an anchored heading clear of the fixed nav. */ .release-notes ul { margin: 0 0 14px; padding-left: 0; list-style: none; } .release-notes li { position: relative; padding-left: 22px; margin-bottom: 10px; color: var(--text-dim); font-size: 15px; line-height: 1.6; } .release-notes li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); opacity: 0.6; } .release-notes h2 { scroll-margin-top: 90px; } .release-notes h3 { font-size: 16px; font-weight: 600; color: var(--text-primary); margin: 20px 0 8px; } .release-notes strong { color: var(--text-primary); font-weight: 600; } .release-notes code { font-size: 13px; background: var(--well); border: 1px solid var(--hairline); border-radius: 4px; padding: 1px 5px; } /* ---------- /beta — beta-channel downloads ---------- The current-beta block reuses .download-panel / .doc-callout / .cta-row; this class only supplies the section rhythm inside the .legal column (divs don't get the .legal p margins). */ .beta-current { margin: 28px 0; } .beta-current .cta-row { margin: 20px 0 0; } /* Content-sized buttons, all three on one row (owner report 2026-07-09: the macOS button wrapped because the buttons inherited a stretch basis). flex-wrap on .cta-row still lets them stack on narrow screens. */ .beta-current .cta-row .btn { flex: 0 0 auto; width: auto; } /* ---------- Confirm / download pages ---------- Tuned to fit a 1920×1080 viewport without scrolling at default zoom. If you add content to this page, trim an existing piece first — spacing here is lean on purpose. */ .confirm { padding-top: 44px; padding-bottom: 36px; } .wrap.narrow { max-width: 680px; } /* Override the site-wide 56px h1 with a more restrained size for the post-flow success headline — the hero's big marquee isn't needed on a transactional confirmation page. */ .confirm h1 { font-size: 38px; line-height: 1.15; } .confirm .lede { max-width: 580px; font-size: 16px; line-height: 1.5; } .confirm-hero { margin-bottom: 24px; } .confirm-check { width: 40px; height: 40px; color: var(--ok); margin-bottom: 12px; } /* Muted variant for "neutral" outcomes (unsubscribed, invalid token, etc.) where a green success tick would be too celebratory. */ .confirm-check-muted { color: var(--text-mute); } /* Body paragraph inside a default (non-muted) confirm-card — used on /unsubscribe's "Still on the fence?" card which isn't a status block like "Your downloads". */ .confirm-card-body { color: var(--text-dim); font-size: 14px; line-height: 1.55; margin: 0; } .confirm-card-body a { color: var(--brand); } .confirm-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 26px; margin-bottom: 14px; } /* Inside the downloads card specifically, size the two platform buttons to share width equally — side-by-side on desktop, equal full-width stack on mobile. Without this, "Download for Windows" and "Download for Linux" render at their natural (different) content widths when stacked and look misaligned. */ .confirm-card .cta-row { margin-bottom: 0; } .confirm-card .cta-row .btn { flex: 1 1 220px; } .confirm-card-muted { background: var(--section-bg); border-color: var(--hairline); } .confirm-card-label { font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 12px; } .confirm-card-fine { margin-top: 12px; font-size: 13px; line-height: 1.55; color: var(--text-mute); } .confirm-card-fine a { color: var(--brand); } .confirm-card-muted h2 { font-size: 17px; font-weight: 600; margin: 0 0 6px; color: var(--text-primary); } .confirm-card-muted p { color: var(--text-dim); font-size: 14px; line-height: 1.55; margin: 0; } /* Toronto skyline + Made-in-Canada line live in SiteFooter.razor now — shared across every page — see .footer-skyline and the .footer-bottom block above. The per-page .made-in-canada block that used to sit at the bottom of /confirm was retired when the global footer landed. */ /* ---------- Blazor error banner ---------- Hidden by default; Blazor sets display:block at runtime if an unhandled Interactive Server error occurs. Strip'd Bootstrap meant we lost the default display:none rule, which is why every page was showing "An unhandled error has occurred" as plain inline text. Keep this rule. */ #blazor-error-ui { background: #3c2a2a; color: var(--text-primary); border-top: 1px solid var(--err); bottom: 0; box-sizing: border-box; display: none; left: 0; padding: 12px 20px; position: fixed; width: 100%; z-index: 1000; font-size: 14px; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 16px; top: 10px; } #blazor-error-ui .reload { color: var(--brand); } /* ---------- Feedback page ---------- Uses the shared .confirm scaffold. Unlike the other utility pages (Confirm / Unsubscribe / Privacy) which lock content to a 680px narrow wrap, feedback uses the full .wrap (1100px) so the form can breathe and the two short fields (category + email) can sit side-by-side on desktop. */ /* Feedback form extends .confirm-card with form-specific padding and a two-column grid for fields that benefit from it. */ .feedback-form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; padding: 28px 32px; } /* Most form fields span both columns; only those explicitly marked as .form-field-half stick to one. */ .feedback-form > * { grid-column: 1 / -1; } .feedback-form .form-field-half { grid-column: auto; } @media (max-width: 680px) { .feedback-form { grid-template-columns: 1fr; padding: 22px; gap: 20px; } .feedback-form .form-field-half { grid-column: 1; } } .feedback-error { background: rgba(232, 107, 107, 0.08); border: 1px solid rgba(232, 107, 107, 0.35); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 24px; color: var(--text-primary); font-size: 14px; line-height: 1.5; } .feedback-error strong { color: var(--err); display: block; margin-bottom: 4px; } .form-field { display: flex; flex-direction: column; gap: 8px; } .form-field label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.005em; } .form-required { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--signal); } .form-optional { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mute); } .form-hint { font-size: 13px; color: var(--text-mute); line-height: 1.55; margin: 0; } .feedback-form textarea, .feedback-form input[type="email"], .feedback-form input[type="text"], .feedback-form select { background: var(--well); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-primary); padding: 12px 14px; font-family: inherit; font-size: 14px; line-height: 1.55; width: 100%; transition: border-color .15s ease, background-color .15s ease; } .feedback-form textarea:focus, .feedback-form input:focus, .feedback-form select:focus { border-color: var(--brand); background: var(--card-hover); } .feedback-form textarea { resize: vertical; min-height: 160px; font-family: var(--font-sans); } .feedback-form select { appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; } .feedback-form select option { background: var(--well); color: var(--text-primary); } /* File inputs: let the browser's default render, but tint the surrounding container so the row reads as part of the form. */ .feedback-form input[type="file"] { color: var(--text-dim); font-size: 13px; padding: 10px 0; } .feedback-form input[type="file"]::file-selector-button { background: var(--card-hover); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-primary); padding: 8px 14px; margin-right: 12px; font-size: 13px; cursor: pointer; transition: background .15s ease; } .feedback-form input[type="file"]::file-selector-button:hover { background: rgba(79, 156, 255, 0.12); border-color: var(--brand-soft); } .form-file-list { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 6px; } .form-file-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px; background: var(--well); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; color: var(--text-dim); } .form-file-list .fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .form-file-list .fsize { color: var(--text-mute); font-variant-numeric: tabular-nums; font-family: var(--font-mono); flex-shrink: 0; } /* Honeypot: off-screen so bots autofill it; inert keeps sighted, keyboard, and screen-reader users away from it. */ .hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* Char counter inherits .form-hint but right-aligns the number. */ #feedback-body-count { color: var(--text-dim); font-variant-numeric: tabular-nums; font-family: var(--font-mono); } .form-submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; border-top: 1px solid var(--hairline); padding-top: 20px; } .form-submit-row .form-hint { flex: 1; min-width: 240px; } .form-submit-row .btn { padding: 12px 28px; } .pro-beta-landing { background: var(--bg); } .pro-beta-hero { padding: 48px 0 42px; border-bottom: 1px solid var(--hairline); overflow: hidden; } .pro-beta-hero-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(24px, 3vw, 34px); align-items: center; } .pro-beta-hero-copy { min-width: 0; position: relative; z-index: 1; } .pro-beta-hero h1 { margin: 8px 0 16px; max-width: 660px; font-size: clamp(2.35rem, 3.7vw, 4rem); line-height: 1.02; letter-spacing: -0.03em; } .pro-beta-hero .lede { max-width: 680px; font-size: clamp(1.02rem, 1.28vw, 1.18rem); line-height: 1.58; color: var(--text-dim); } .pro-beta-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; } .pro-beta-shot { margin: 0; min-width: 0; } .pro-beta-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--well); box-shadow: 0 18px 42px rgba(20, 31, 46, 0.12); } .pro-beta-shot-main { width: 100%; max-width: 780px; justify-self: end; } #join-beta, #voice-privacy { scroll-margin-top: calc(var(--nav-h) + 24px); } .pro-beta-shot figcaption { margin-top: 10px; color: var(--text-dim); font-size: 0.96rem; line-height: 1.45; } .pro-beta-band, .pro-beta-flow, .pro-beta-screens, .pro-beta-faq { padding: 58px 0; border-bottom: 1px solid var(--hairline); } .pro-beta-feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .pro-beta-feature-grid > article, .pro-beta-request, .pro-beta-faq-list > article { border: 1px solid var(--hairline); border-radius: 8px; background: var(--card); padding: 22px; } .pro-beta-feature-grid h2, .pro-beta-request h3, .pro-beta-faq-list h3 { margin: 8px 0 10px; font-size: 1.4rem; line-height: 1.16; } .pro-beta-feature-grid p, .pro-beta-request p, .pro-beta-faq-list p { margin: 0; color: var(--text-dim); line-height: 1.55; } .pro-beta-screens .header { max-width: 940px; margin-bottom: 30px; } .pro-beta-shot-beta-home { max-width: 1040px; margin: 0 auto; } .pro-beta-shot-beta-home img { box-shadow: 0 22px 52px rgba(20, 31, 46, 0.12); } .pro-beta-shot-beta-home figcaption { max-width: 850px; margin-top: 16px; font-size: 1.05rem; } .pro-beta-cockpit-feature-grid, .pro-beta-cockpit-secondary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .pro-beta-cockpit-feature-grid { gap: 28px; } .pro-beta-cockpit-secondary-grid { gap: 22px; margin-top: 30px; } .pro-beta-shot-feature img { box-shadow: 0 22px 48px rgba(20, 31, 46, 0.14); } .pro-beta-shot-feature figcaption { max-width: 620px; margin-top: 14px; font-size: 1.05rem; } .pro-beta-pairing-callout { display: grid; grid-template-columns: minmax(280px, 0.58fr) minmax(0, 1fr); gap: 28px; align-items: center; margin-top: 34px; padding: 24px; border: 1px solid var(--hairline); border-radius: 8px; background: color-mix(in srgb, var(--card) 86%, var(--well)); } .pro-beta-pairing-callout h3 { margin: 8px 0 12px; font-size: clamp(1.55rem, 2vw, 2.1rem); line-height: 1.12; letter-spacing: -0.02em; } .pro-beta-pairing-callout p { margin: 0; color: var(--text-dim); line-height: 1.58; } .pro-beta-two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 0.62fr); gap: 42px; align-items: start; } .pro-beta-flow h2, .pro-beta-faq h2 { margin: 8px 0 14px; max-width: 860px; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.05; letter-spacing: -0.025em; } .pro-beta-flow .lede, .pro-beta-faq .lede { max-width: 780px; font-size: clamp(1.04rem, 1.7vw, 1.28rem); line-height: 1.55; color: var(--text-dim); } .pro-beta-steps { display: grid; gap: 12px; margin: 24px 0 0; padding-left: 1.3rem; color: var(--text-dim); line-height: 1.55; } .pro-beta-request .subscribe { margin-top: 18px; } .pro-beta-request .subscribe-row { grid-template-columns: 1fr; } .pro-beta-request .subscribe-row .btn { width: 100%; } .pro-beta-terms .pro-beta-feature-grid > article { background: color-mix(in srgb, var(--card) 90%, var(--well)); } .pro-beta-faq-list { display: grid; gap: 14px; } .pro-beta-join-page .feedback-success, .pro-beta-join-page .feedback-error { margin-bottom: 24px; } .pro-beta-accept-card { display: grid; gap: 18px; } .pro-beta-terms-list { display: grid; gap: 10px; margin: 0; padding-left: 1.3rem; color: var(--text-dim); line-height: 1.55; } .pro-beta-terms-check { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--well); color: var(--text); line-height: 1.45; } .pro-beta-terms-check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--brand); flex: 0 0 auto; } .beta-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; } .pro-beta-page { padding-top: 58px; padding-bottom: 72px; } .pro-beta-page .beta-wrap { max-width: 1240px; } .pro-beta-page .confirm-hero { margin-bottom: 34px; } .pro-beta-page .confirm-hero h1 { margin-bottom: 12px; } .pro-beta-page .lede { max-width: 760px; font-size: 18px; line-height: 1.58; } .pro-beta-page .confirm-card { padding: 26px 32px; margin-bottom: 22px; } .pro-beta-page .confirm-card h2 { font-size: 28px; line-height: 1.18; margin: 0 0 8px; } .pro-beta-page .form-submit-row .btn { padding: 10px 18px; } .pro-beta-follow-up-page .beta-wrap { max-width: 1160px; } .pro-beta-follow-up-page .confirm-card-body { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline; } .beta-recorder { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .beta-missions { margin: 34px 0 30px; } .pro-beta-page .beta-missions h2 { margin: 0 0 16px; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.05; letter-spacing: -0.02em; } .beta-missions > .form-hint { max-width: 860px; margin: 0 0 36px; color: var(--text-dim); font-size: clamp(1.1rem, 2vw, 1.55rem); line-height: 1.5; } .mission-list, .beta-report-list { display: grid; gap: 22px; } .mission-card { display: grid; gap: 24px; padding: 28px 32px; border: 1px solid var(--hairline); border-radius: 10px; background: color-mix(in srgb, var(--card) 92%, var(--bg)); } .mission-card-complete { border-color: rgba(52, 168, 120, 0.48); background: color-mix(in srgb, var(--card) 90%, rgba(52, 168, 120, 0.12)); } .mission-card-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: start; } .mission-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; min-width: 0; padding-top: 2px; } .mission-code { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--well); color: var(--text-dim); font-family: var(--font-mono); font-size: 0.95rem; letter-spacing: 0.04em; } .mission-saved { display: inline-flex; align-items: center; gap: 7px; color: var(--ok); font-family: var(--font-mono); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.04em; } .mission-actions { display: inline-grid; grid-template-columns: repeat(3, auto); align-items: center; gap: 4px; min-width: 0; padding: 4px; border: 1px solid var(--border); border-radius: 9px; background: var(--well); } .mission-choice { position: relative; min-width: 0; } .mission-choice input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; overflow: hidden; clip-path: inset(50%); pointer-events: none; } .mission-choice-body { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; min-width: 112px; padding: 0 18px; border-radius: 7px; background: transparent; color: var(--text-dim); font-size: 1rem; font-weight: 500; line-height: 1.1; text-align: center; white-space: nowrap; cursor: pointer; transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease; } .mission-choice:nth-child(2) .mission-choice-body { min-width: 128px; } .mission-choice:nth-child(3) .mission-choice-body { min-width: 92px; } .mission-choice-check { display: inline-grid; place-items: center; width: 0; height: 18px; border-radius: 999px; color: currentColor; font-size: 1.05rem; opacity: 0; overflow: hidden; transform: scale(0.85); transition: opacity 140ms ease, width 140ms ease, transform 140ms ease; } .mission-choice input:checked + .mission-choice-body { background: var(--brand); color: #fff; box-shadow: 0 1px 4px rgba(24, 97, 208, 0.26); } .mission-choice input:checked + .mission-choice-body .mission-choice-check { width: 20px; opacity: 1; transform: scale(1); } .mission-choice input:focus-visible + .mission-choice-body { outline: 2px solid color-mix(in srgb, var(--brand) 40%, transparent); outline-offset: 2px; } .mission-copy { max-width: 760px; min-width: 0; } .mission-card h3 { margin: 0 0 16px; font-size: clamp(1.5rem, 2.3vw, 2.05rem); line-height: 1.12; letter-spacing: -0.02em; } .mission-card p { margin: 0; color: var(--text-dim); font-size: clamp(1.05rem, 1.65vw, 1.35rem); line-height: 1.45; } .mission-note-row { display: grid; grid-template-columns: minmax(0, 1fr) 128px; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--well); } .mission-note { width: 100%; min-width: 0; min-height: 56px; border: 0; background: transparent; color: var(--text-primary); padding: 0 18px; font: inherit; font-size: 1.05rem; } .mission-note::placeholder { color: color-mix(in srgb, var(--text-dim) 72%, transparent); } .mission-note:focus { outline: none; } .mission-note-row:focus-within { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 18%, transparent); } .mission-submit { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 0; min-height: 56px; border: 0; border-left: 1px solid var(--border); background: color-mix(in srgb, var(--well) 72%, var(--card)); color: var(--brand); font: inherit; font-size: 1.02rem; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background 140ms ease, color 140ms ease; } .mission-submit:hover { background: color-mix(in srgb, var(--brand) 9%, var(--well)); } .mission-submit:focus-visible { outline: 2px solid color-mix(in srgb, var(--brand) 42%, transparent); outline-offset: -4px; } .mission-submit svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .beta-report-row { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 14px 12px; border-bottom: 1px solid var(--hairline); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; transition: background 160ms ease, border-color 160ms ease, transform 160ms ease; } .beta-report-row:hover { background: var(--card-2); transform: translateY(-1px); } .beta-report-action { justify-self: end; color: var(--brand); font-weight: 700; white-space: nowrap; } .beta-report-row:last-child { border-bottom: 0; } .beta-report-body { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-dim); line-height: 1.6; background: var(--well); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 16px 18px; max-height: 520px; overflow: auto; font-size: 14px; } .beta-media-list { display: grid; gap: 18px; } .beta-media-item { border-top: 1px solid var(--hairline); padding-top: 18px; } .beta-media-item:first-child { border-top: 0; padding-top: 0; } .beta-media-item strong { display: block; margin-top: 4px; } .beta-media-item p { margin: 6px 0 0; color: var(--text-dim); } .beta-media-image { display: block; width: 100%; max-height: 520px; object-fit: contain; margin-top: 12px; border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--card-2); } .beta-media-audio { display: block; width: 100%; margin-top: 12px; } @media (max-width: 760px) { .pro-beta-hero { padding: 36px 0 34px; } .pro-beta-hero-grid, .pro-beta-two-col, .pro-beta-cockpit-feature-grid, .pro-beta-cockpit-secondary-grid, .pro-beta-pairing-callout, .pro-beta-feature-grid { grid-template-columns: 1fr; } .pro-beta-shot-main { width: 100%; justify-self: stretch; } .pro-beta-band, .pro-beta-flow, .pro-beta-screens, .pro-beta-faq { padding: 38px 0; } .beta-grid, .beta-report-row { grid-template-columns: 1fr; } .pro-beta-page { padding-top: 36px; padding-bottom: 44px; } .pro-beta-page .confirm-hero { margin-bottom: 24px; } .pro-beta-page .confirm-card { padding: 20px; } .mission-card { padding: 18px; gap: 18px; } .mission-card-top { grid-template-columns: 1fr; gap: 14px; } .mission-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; } .mission-choice-body, .mission-choice:nth-child(2) .mission-choice-body, .mission-choice:nth-child(3) .mission-choice-body { min-width: 0; width: 100%; padding: 0 8px; font-size: 0.92rem; } .mission-choice-check { height: 16px; font-size: 0.95rem; } .mission-choice input:checked + .mission-choice-body .mission-choice-check { width: 16px; } .mission-note-row { grid-template-columns: minmax(0, 1fr) 98px; } .mission-submit { gap: 6px; font-size: 0.95rem; } .beta-report-action { justify-self: start; } } @media (min-width: 761px) and (max-width: 1040px) { .mission-card-top { grid-template-columns: 1fr; } } /* ---------- Documentation (/docs/*) ---------- */ /* Two-column shell: sticky left nav + article body. Narrower than the marketing pages' ample whitespace — these are read, not scrolled. Max article width ~760px preserves comfortable line length. */ .docs-shell { padding-top: 40px; padding-bottom: 96px; background: var(--bg); } .docs-wrap { max-width: 1180px; display: grid; grid-template-columns: 240px 1fr; gap: 56px; align-items: start; } @media (max-width: 900px) { .docs-wrap { grid-template-columns: 1fr; gap: 24px; } } /* CSS Grid items default to `min-width: auto` which makes them grow to fit unbreakable child content (wide 
 blocks, long paths in
     , wide tables). On a 393px viewport the article would then
     blow wider than the screen, dragging the H1 and paragraphs
     off-canvas. Forcing `min-width: 0` keeps both columns
     viewport-bounded; pre + table take care of their own overflow with
     the rules below. */
  .docs-wrap > * { min-width: 0; }

  .docs-side {
    position: sticky;
    top: calc(var(--nav-h) + 24px);
    align-self: start;
    max-height: calc(100vh - var(--nav-h) - 48px);
    overflow-y: auto;
    padding-right: 8px;
  }
  @media (max-width: 900px) {
    .docs-side {
      position: static;
      max-height: none;
      padding-right: 0;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--hairline);
    }
  }
  .docs-side-inner { padding-top: 4px; }

  /* Mobile collapse for the docs sidebar. A real button toggles
     `.is-open`, keeping hidden links out of the tab order while closed. */
  .docs-toc-button { display: none; }

  @media (max-width: 900px) {
    .docs-toc-button {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 12px 14px;
      font-size: 14px;
      font-weight: 500;
      color: var(--text-primary);
      background: var(--card);
      border: 1px solid var(--hairline);
      border-radius: var(--radius-sm);
      cursor: pointer;
      user-select: none;
    }
    .docs-toc-button:hover { background: var(--card-hover); }
    .docs-toc-caret {
      transition: transform .18s ease;
      color: var(--text-mute);
    }
    .docs-side.is-open .docs-toc-caret {
      transform: rotate(180deg);
    }

    .docs-side-inner {
      display: none;
      padding-top: 0;
    }
    .docs-side.is-open .docs-side-inner {
      display: block;
      max-height: 80vh;
      overflow-y: auto;
      padding-top: 12px;
    }

    /* Sidebar's bottom border looks weird when the menu is
       collapsed (a single line under just the button). Drop it on
       mobile and let the button itself carry the visual weight. */
    .docs-side {
      border-bottom: none;
      padding-bottom: 0;
    }
  }

  .docs-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 16px;
  }

  .docs-nav-group { margin-bottom: 20px; }
  .docs-nav-heading {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-mute);
    margin-bottom: 6px;
    padding-left: 10px;
  }
  .docs-nav ul { display: flex; flex-direction: column; gap: 1px; }
  .docs-nav a {
    display: block;
    font-size: 14px;
    color: var(--text-dim);
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    border-left: 2px solid transparent;
  }
  .docs-nav a:hover {
    color: var(--text-primary);
    background: var(--hover-wash);
  }
  .docs-nav a.is-active {
    color: var(--brand);
    background: rgba(79, 156, 255, 0.08);
    border-left-color: var(--brand);
    font-weight: 500;
  }

  /* --- Article body --- */
  .docs-article {
    max-width: 760px;
    font-size: 16px;
    color: var(--text-primary);
  }
  .docs-article h1 {
    font-size: 40px;
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin-bottom: 6px;
  }
  .docs-article .doc-lede {
    color: var(--text-dim);
    font-size: 17px;
    line-height: 1.55;
    margin-bottom: 32px;
  }
  .docs-article h2 {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.25;
    margin-top: 48px;
    margin-bottom: 10px;
    padding-top: 4px;
    scroll-margin-top: calc(var(--nav-h) + 16px);
  }
  .docs-article h2:first-of-type { margin-top: 36px; }
  .docs-article h3 {
    font-size: 18px;
    font-weight: 600;
    margin-top: 28px;
    margin-bottom: 6px;
    color: var(--text-primary);
  }
  .docs-article p {
    margin-bottom: 14px;
    line-height: 1.65;
    color: var(--text-primary);
  }
  .docs-article p.muted { color: var(--text-dim); }
  .docs-article a {
    color: var(--brand);
  }
  .docs-article a:hover { color: var(--brand-hover); }

  .docs-article ul, .docs-article ol {
    margin: 0 0 18px 0;
    padding-left: 22px;
    color: var(--text-primary);
  }
  .docs-article ul { list-style: disc; }
  .docs-article ol { list-style: decimal; }
  .docs-article li { margin-bottom: 6px; line-height: 1.6; }

  .docs-article code {
    font-family: var(--font-mono);
    font-size: 0.92em;
    padding: 1px 6px;
    background: var(--well);
    border: 1px solid var(--hairline);
    border-radius: 4px;
    color: var(--text-primary);
  }
  .docs-article pre {
    margin: 0 0 18px 0;
    padding: 14px 16px;
    background: var(--well);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-primary);
    overflow-x: auto;
    white-space: pre;
  }
  .docs-article pre code {
    padding: 0; background: transparent; border: 0; border-radius: 0;
    font-size: inherit;
  }

  .docs-article blockquote {
    margin: 0 0 18px 0;
    padding: 12px 16px;
    border-left: 3px solid var(--brand);
    background: rgba(79, 156, 255, 0.06);
    color: var(--text-primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  }
  .docs-article blockquote p:last-child { margin-bottom: 0; }

  /* Callout boxes: .note, .tip, .warn */
  .doc-callout {
    margin: 0 0 18px 0;
    padding: 14px 18px;
    border-radius: var(--radius);
    border: 1px solid var(--hairline);
    background: var(--card);
  }
  .doc-callout-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .doc-callout.note        { border-color: rgba(79, 156, 255, 0.35); background: rgba(79, 156, 255, 0.06); }
  .doc-callout.note .doc-callout-title    { color: var(--brand); }
  .doc-callout.tip         { border-color: rgba(108, 198, 107, 0.35); background: rgba(108, 198, 107, 0.06); }
  .doc-callout.tip .doc-callout-title     { color: var(--ok); }
  .doc-callout.warn        { border-color: rgba(232, 181, 60, 0.4);  background: rgba(232, 181, 60, 0.06); }
  .doc-callout.warn .doc-callout-title    { color: var(--signal); }
  .doc-callout.stop        { border-color: rgba(232, 107, 107, 0.4); background: rgba(232, 107, 107, 0.06); }
  .doc-callout.stop .doc-callout-title    { color: var(--err); }
  .doc-callout p:last-child { margin-bottom: 0; }

  /* Figures (screenshots with captions). */
  .doc-fig {
    margin: 0 0 28px 0;
    padding: 0;
  }
  .doc-fig-link {
    display: block;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: var(--well);
    overflow: hidden;
    transition: border-color 120ms ease;
  }
  .doc-fig-link:hover { border-color: var(--border); }
  .doc-fig-link picture {
    display: block;
    width: 100%;
  }
  .doc-fig-link img {
    display: block;
    width: 100%;
    height: auto;
  }
  .doc-fig figcaption {
    margin-top: 10px;
    font-size: 13.5px;
    color: var(--text-dim);
    line-height: 1.5;
  }
  .doc-fig-num {
    color: var(--text-mute);
    font-weight: 600;
    margin-right: 6px;
  }
  .doc-fig-wide .doc-fig-link { max-width: none; }
  .doc-fig-placeholder .doc-fig-link {
    border-style: dashed;
    border-color: rgba(232, 181, 60, 0.35);
  }
  .doc-fig-placeholder img {
    opacity: 0.78;
  }
  .doc-fig-pending {
    color: var(--signal);
    font-style: italic;
  }
  .doc-fig-pending code {
    font-size: 0.9em;
    padding: 0 4px;
    background: rgba(232, 181, 60, 0.12);
    border: 1px solid rgba(232, 181, 60, 0.3);
    border-radius: 3px;
  }

  /* Table for keyboard shortcuts / effect list / compatibility matrices. */
  .docs-article table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 22px 0;
    font-size: 14.5px;
  }
  .docs-article th, .docs-article td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--hairline);
    vertical-align: top;
  }
  .docs-article th {
    color: var(--text-mute);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom-color: var(--border);
  }
  .docs-article td code { font-size: 0.88em; }

  /* Grouped at-a-glance effects table (/docs/effects). Each  is a
     group; its first row (.grp) is a full-width header that reads as a
     divider rather than a column header — so it drops the uppercase
     column-head treatment and gets a tint + a little top breathing room. */
  .docs-article .doc-effects-table td:first-child {
    font-weight: 600;
    white-space: nowrap;
  }
  .docs-article .doc-effects-table tr.grp th {
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: 13px;
    font-weight: 700;
    color: var(--brand, var(--text-mute));
    background: var(--card-2);
    border-bottom-color: var(--border);
    padding-top: 16px;
  }
  @media (max-width: 640px) {
    .docs-article .doc-effects-table td:first-child { white-space: normal; }
  }

  /* Mobile overflow protection.
     - Tables can carry long unbreakable cells (file paths, GUIDs,
       URLs) that would push the table wider than the viewport even
       after the grid `min-width: 0` fix. Make the table itself
       scrollable horizontally on narrow screens — the inner row /
       cell layout is preserved by the browser even with
       `display: block` on the outer table.
     - Inline `` (paths, URLs) outside 
 needs to be
       breakable on phones, otherwise a single
       `%APPDATA%\Microsoft Flight Simulator 2024\SimConnect.xml`
       token is enough to push its parent row wider than the viewport. */
  @media (max-width: 900px) {
    .docs-article table {
      display: block;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
  }
  @media (max-width: 640px) {
    .docs-article p code,
    .docs-article li code,
    .docs-article td code {
      overflow-wrap: anywhere;
    }
  }

  /* "Previous / Next" page footer pager. */
  .docs-pager {
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid var(--hairline);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
  }
  .docs-pager a {
    display: inline-flex;
    flex-direction: column;
    padding: 14px 18px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    min-width: 180px;
    max-width: 320px;
    color: var(--text-primary);
    background: var(--card);
    transition: border-color 120ms ease, background 120ms ease;
  }
  .docs-pager a:hover {
    border-color: var(--border);
    background: var(--card-hover);
  }
  .docs-pager a .pager-dir {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-mute);
    margin-bottom: 2px;
  }
  .docs-pager a.pager-next { margin-left: auto; text-align: right; }
  .docs-pager a.pager-prev .pager-dir::before { content: "← "; }
  .docs-pager a.pager-next .pager-dir::after  { content: " →"; }
  /* On phones, two ~216px-min pager buttons + a 16px gap don't fit
     side-by-side in a 393px viewport. They'd flex-wrap, but
     `margin-left: auto` on .pager-next keeps it pinned to the right
     even when it's alone on its row, producing an "indented orphan"
     look. Stack vertically full-width and drop the auto-left so both
     buttons align to the same edge. */
  @media (max-width: 640px) {
    .docs-pager { flex-direction: column; gap: 12px; }
    .docs-pager a {
      min-width: 0;
      max-width: none;
      width: 100%;
    }
    .docs-pager a.pager-next {
      margin-left: 0;
      text-align: left;
    }
  }

  /* Key / value pair layout used for spec-style reference blocks. */
  .docs-article .doc-kv {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 6px 18px;
    margin: 0 0 20px 0;
    padding: 14px 16px;
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
  }
  .docs-article .doc-kv dt {
    color: var(--text-mute);
    font-size: 13px;
    font-weight: 500;
  }
  .docs-article .doc-kv dd { margin: 0; font-size: 14px; }
  @media (max-width: 500px) {
    .docs-article .doc-kv { grid-template-columns: 1fr; gap: 0; }
    .docs-article .doc-kv dt { margin-top: 8px; }
  }

  /* Changelog page. Each release is one .changelog-entry block;
     the version is the section's anchor target so external links
     can land on a specific release. */
  .docs-article .changelog { margin-top: 12px; }
  .docs-article .changelog-entry {
    padding: 18px 20px 4px 20px;
    margin-bottom: 18px;
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    scroll-margin-top: 80px;
  }
  .docs-article .changelog-entry header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 4px 0;
    border: 0;
  }
  .docs-article .changelog-entry header h2 {
    font-size: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--text-primary);
  }
  .docs-article .changelog-entry header time {
    font-size: 13px;
    color: var(--text-mute);
    font-variant-numeric: tabular-nums;
  }
  .docs-article .changelog-entry h3 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-mute);
    margin-top: 14px;
    margin-bottom: 6px;
  }
  .docs-article .changelog-entry ul {
    margin-top: 0;
    margin-bottom: 8px;
  }
  @media (max-width: 500px) {
    .docs-article .changelog-entry header {
      flex-direction: column;
      gap: 4px;
    }
  }

  /* Overview cards (index page). */
  .docs-index-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 32px;
  }
  .docs-index-card {
    display: block;
    padding: 16px 18px;
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    color: var(--text-primary);
    transition: border-color 120ms ease, background 120ms ease;
  }
  .docs-index-card:hover {
    border-color: var(--border);
    background: var(--card-hover);
  }
  .docs-index-card h3 {
    font-size: 15px;
    margin-bottom: 4px;
    color: var(--text-primary);
  }
  .docs-index-card p {
    font-size: 13.5px;
    color: var(--text-dim);
    margin: 0;
    line-height: 1.5;
  }

  /* Chip / pill used inline to mark OS-specific content. */
  .doc-os {
    display: inline-block;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 4px;
    vertical-align: 2px;
    margin-right: 6px;
  }
  .doc-os.win   { background: rgba(79, 156, 255, 0.16); color: var(--brand); }
  .doc-os.linux { background: rgba(232, 181, 60, 0.16); color: var(--signal); }
  .doc-os.both  { background: rgba(108, 198, 107, 0.16); color: var(--ok); }
  .doc-os.mac   { background: rgba(180, 142, 255, 0.16); color: #b48eff; }

  /* Manual single-page — wider, denser, no sidebar. */
  .docs-manual {
    max-width: 840px;
    margin: 0 auto;
    padding: 40px 24px 96px;
  }
  .docs-manual h1 { font-size: 44px; line-height: 1.1; margin-bottom: 4px; }
  .docs-manual .manual-cover {
    padding: 56px 0 40px;
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 28px;
  }
  .docs-manual .manual-cover .cover-sub {
    color: var(--text-dim);
    font-size: 18px;
    margin-top: 8px;
  }
  .docs-manual .manual-cover .cover-meta {
    margin-top: 28px;
    color: var(--text-mute);
    font-size: 13px;
    font-family: var(--font-mono);
  }
  .docs-manual h2.chapter {
    font-size: 28px;
    margin-top: 56px;
    padding-top: 28px;
    border-top: 2px solid var(--border);
  }
  .docs-manual h2.chapter .chap-num {
    color: var(--brand);
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.12em;
    display: block;
    margin-bottom: 4px;
  }
  /* Release note banner. Sits at the top of every /docs/*
     page (rendered by DocsLayout) and of /docs/manual (rendered
     manually inside its own shell). Amber-signal border on a
     faint tint keeps it visible without overwhelming the content
     below — same visual language as .doc-callout.warn, but
     full-width and pinned to the top of the article. */
  .docs-release-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 28px 0;
    padding: 12px 16px;
    border: 1px solid rgba(232, 181, 60, 0.38);
    background: rgba(232, 181, 60, 0.06);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 13.5px;
    line-height: 1.5;
  }
  .docs-release-banner svg {
    color: var(--signal);
    flex-shrink: 0;
    margin-top: 1px;
  }
  .docs-release-banner strong {
    color: var(--signal);
    font-weight: 600;
  }
  .docs-release-banner a {
    color: var(--brand);
  }
  .docs-release-banner a:hover {
    color: var(--brand-hover);
  }
  /* Manual shell doesn't have the article's max-width, so give
     the banner its own cap + a bit more breathing room before
     the cover block. */
  .docs-release-banner-manual {
    max-width: 820px;
    margin: 0 auto 36px;
  }

  /* Manual cover download button */
  .docs-manual .manual-cover-actions {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
  }
  .manual-dl-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--brand-fill);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    border-radius: var(--radius);
    border: 1px solid var(--brand-fill);
    text-decoration: none;
    transition: background 120ms ease, border-color 120ms ease;
  }
  .manual-dl-btn:hover {
    background: var(--brand-fill-hover);
    border-color: var(--brand-fill-hover);
    color: #fff;
  }
  .manual-dl-hint {
    color: var(--text-mute);
    font-size: 13px;
    max-width: 420px;
  }

  /* Sidebar PDF-download link — same left-rail pattern as the
     in-page nav links, but a brand-tinted variant so it reads as
     an action not a route. */
  .docs-nav a.docs-nav-pdf {
    color: var(--brand);
    font-weight: 500;
  }
  .docs-nav a.docs-nav-pdf:hover {
    color: var(--brand-hover);
    background: rgba(79, 156, 255, 0.10);
  }

  .docs-manual .manual-toc {
    padding: 18px 20px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    margin-bottom: 32px;
    background: var(--card);
  }
  .docs-manual .manual-toc ol { margin: 0; padding-left: 22px; list-style: decimal; }
  .docs-manual .manual-toc li { margin-bottom: 3px; font-size: 14.5px; }
  .docs-manual .manual-toc a { text-decoration: none; }

  /* --- Print / PDF styles (for /docs/manual when browser-printed) --- */
  @media print {
    nav.top, footer, .docs-side, .docs-pager,
    #blazor-error-ui { display: none !important; }
    body {
      background: #ffffff !important;
      color: #111 !important;
      font-size: 11pt;
    }
    .docs-shell, .docs-manual {
      padding: 0 !important;
      background: #ffffff !important;
    }
    .docs-wrap { grid-template-columns: 1fr !important; gap: 0 !important; }
    .docs-article, .docs-manual {
      max-width: none !important;
      color: #111 !important;
    }
    .docs-article h1, .docs-article h2, .docs-article h3,
    .docs-manual h1, .docs-manual h2, .docs-manual h3 {
      color: #000 !important;
      page-break-after: avoid;
    }
    .docs-article p, .docs-article li, .docs-manual p, .docs-manual li {
      color: #222 !important;
    }
    .docs-article a, .docs-manual a {
      color: #0b4fbf !important;
      border-bottom: 0 !important;
    }
    .docs-article code, .docs-article pre,
    .docs-manual code, .docs-manual pre {
      background: #f4f4f6 !important;
      border-color: #d5d7dc !important;
      color: #111 !important;
    }
    .doc-fig { page-break-inside: avoid; }
    .doc-fig-link {
      border-color: #d5d7dc !important;
      background: #f8f8fa !important;
    }
    .doc-fig figcaption { color: #555 !important; }
    .doc-callout {
      background: #f7f7f9 !important;
      border-color: #d5d7dc !important;
      color: #111 !important;
    }
    .doc-callout.note .doc-callout-title { color: #1a57b8 !important; }
    .doc-callout.tip  .doc-callout-title { color: #2f7d2f !important; }
    .doc-callout.warn .doc-callout-title { color: #8a6200 !important; }
    .doc-callout.stop .doc-callout-title { color: #a83030 !important; }
    .docs-manual h2.chapter { page-break-before: always; border-top: 0; }
    .docs-manual h2.chapter:first-of-type { page-break-before: auto; }
    /* Explicit URL after external links for the printed version. */
    .docs-article a[href^="http"]::after,
    .docs-manual a[href^="http"]::after {
      content: " (" attr(href) ")";
      font-size: 85%;
      color: #555;
    }
    @page { margin: 20mm 18mm 20mm 18mm; }
  }

  /* ---------- Staging translation review overlay ---------- */
  .ffb-tr-review-active .ffb-tr-text {
    cursor: help;
    border-radius: 3px;
    box-shadow: inset 0 -0.18em rgba(232, 181, 60, 0.34);
    transition: background 120ms ease, box-shadow 120ms ease;
  }
  .ffb-tr-review-active .ffb-tr-text:hover,
  .ffb-tr-review-active .ffb-tr-text:focus {
    background: rgba(232, 181, 60, 0.14);
    box-shadow: inset 0 -0.2em rgba(232, 181, 60, 0.56);
  }
  .ffb-tr-review-active .ffb-tr-text-noted {
    box-shadow: inset 0 -0.18em rgba(108, 198, 107, 0.45);
  }
  .ffb-tr-review-active .ffb-tr-text-has-notes {
    background: rgba(108, 198, 107, 0.10);
    box-shadow: inset 0 -0.18em rgba(108, 198, 107, 0.50);
  }
  .ffb-tr-review-active .ffb-tr-text-has-notes::after {
    content: attr(data-tr-note-count);
    display: inline-grid;
    place-items: center;
    min-width: 1.35em;
    height: 1.35em;
    margin-left: 0.25em;
    padding: 0 0.25em;
    border-radius: 999px;
    background: var(--ok);
    color: var(--bg);
    font-size: 0.72em;
    font-weight: 800;
    line-height: 1;
    vertical-align: 0.1em;
  }
  .ffb-tr-toolbar {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100vw - 32px);
    padding: 9px 10px;
    border: 1px solid rgba(232, 181, 60, 0.42);
    border-radius: 8px;
    background: color-mix(in srgb, var(--card) 92%, #111 8%);
    color: var(--text-primary);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
    font-size: 13px;
  }
  .ffb-tr-toolbar .ffb-tr-count {
    color: var(--text-mute);
    font-size: 12px;
  }
  .ffb-tr-toolbar button,
  .ffb-tr-button {
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--well);
    color: var(--text-primary);
    font: inherit;
    font-weight: 600;
    padding: 6px 9px;
    cursor: pointer;
  }
  .ffb-tr-toolbar button:hover,
  .ffb-tr-button:hover {
    border-color: var(--brand);
  }
  .ffb-tr-panel {
    position: fixed;
    z-index: 90;
    display: none;
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card);
    color: var(--text-primary);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
    max-height: calc(100vh - 24px);
    overflow: auto;
  }
  .ffb-tr-panel.is-open {
    display: grid;
  }
  .ffb-tr-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .ffb-tr-panel-title {
    font-weight: 700;
    font-size: 13px;
  }
  .ffb-tr-panel-close {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--well);
    color: var(--text-primary);
    font: inherit;
    font-size: 20px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
  }
  .ffb-tr-panel-close:hover {
    border-color: var(--brand);
    color: var(--brand);
  }
  .ffb-tr-context,
  .ffb-tr-preview {
    border-radius: 6px;
    padding: 8px;
    font-size: 12px;
    line-height: 1.45;
  }
  .ffb-tr-context {
    background: var(--well);
    color: var(--text-mute);
    max-height: 88px;
    overflow: auto;
  }
  .ffb-tr-preview {
    background: rgba(79, 156, 255, 0.10);
    color: var(--text-primary);
    max-height: 132px;
    overflow: auto;
  }
  .ffb-tr-existing {
    display: grid;
    gap: 7px;
    max-height: 180px;
    overflow: auto;
  }
  .ffb-tr-existing-title {
    color: var(--text-mute);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
  }
  .ffb-tr-existing-note {
    display: grid;
    gap: 5px;
    border: 1px solid var(--hairline);
    border-radius: 6px;
    background: color-mix(in srgb, var(--well) 82%, var(--ok) 18%);
    padding: 8px;
  }
  .ffb-tr-existing-meta {
    color: var(--text-mute);
    font-size: 11px;
  }
  .ffb-tr-existing-selected {
    border-left: 2px solid var(--ok);
    padding-left: 7px;
    color: var(--text-dim);
    font-size: 12px;
  }
  .ffb-tr-existing-body {
    color: var(--text-primary);
    font-size: 12.5px;
    line-height: 1.45;
    white-space: pre-wrap;
  }
  .ffb-tr-textarea {
    width: 100%;
    min-height: 96px;
    max-height: 220px;
    resize: vertical;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--well);
    color: var(--text-primary);
    font: inherit;
    font-size: 13px;
    padding: 9px;
  }
  .ffb-tr-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }
  .ffb-tr-button.primary {
    background: var(--brand-fill);
    border-color: var(--brand-fill);
    color: #fff;
  }
  .ffb-tr-button:disabled {
    cursor: wait;
    opacity: 0.7;
  }
  .ffb-tr-message {
    min-height: 18px;
    color: var(--text-mute);
    font-size: 12px;
  }

  @media (max-width: 620px) {
    .ffb-tr-toolbar {
      left: 12px;
      right: 12px;
      justify-content: space-between;
    }
    .ffb-tr-panel {
      left: 12px !important;
      right: 12px !important;
      width: auto !important;
    }
  }

/* ============================================================
   Community — Profile Library + Forum
   Built on the site design tokens (--card / --border / --well /
   --text-* / --radius / --brand / --signal) so it flips cleanly
   for light/dark and matches the rest of the site exactly.
   ============================================================ */
.profiles { padding: 48px 0 72px; }
.profiles .wrap.narrow { max-width: 720px; }
.profiles-hero { max-width: 720px; margin-bottom: 28px; }
.profiles-hero h1 { margin: 0 0 8px; }

.profiles-filter {
  display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end;
  padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--card); margin-bottom: 28px;
}
.profiles-filter .form-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.profiles-filter input, .profiles-filter select {
  padding: 9px 11px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--well); color: var(--text-primary); font: inherit; min-width: 160px;
  transition: border-color .15s ease, background-color .15s ease;
}
.profiles-filter input:focus, .profiles-filter select:focus {
  border-color: var(--brand); background: var(--card-hover); outline: none;
}
.profiles-filter select {
  appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml;utf8,");
  background-repeat: no-repeat; background-position: right 12px center;
}
.profiles-filter .btn { white-space: nowrap; min-width: 0; }
.profiles-clear { align-self: center; font-size: 14px; text-decoration: underline; color: var(--text-mute); }
.profiles-count { font-size: 14px; color: var(--text-mute); margin: 0 0 14px; }

/* Shared empty / zero-result state — a styled dashed placeholder. */
.profiles-empty, .community-empty {
  color: var(--text-dim); padding: 28px 22px; text-align: center;
  background: var(--card); border: 1px dashed var(--hairline); border-radius: var(--radius);
}

.profile-grid {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.profile-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.profile-card:hover { border-color: var(--brand-soft); background: var(--card-hover); transform: translateY(-2px); }
.profile-card-link { display: block; padding: 18px; color: inherit; text-decoration: none; }
.profile-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.profile-card-head h2 { margin: 0; font-size: 18px; line-height: 1.25; }
.profile-card-title { margin: 6px 0 14px; font-size: 14px; color: var(--text-mute); }
.profile-card-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--text-faint); margin-top: 12px; }

.profile-badge {
  flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 999px; text-transform: uppercase;
}
.profile-badge-verified { background: rgba(79,156,255,.16); color: var(--brand); }
.profile-badge-community { background: var(--well); color: var(--text-dim); border: 1px solid var(--hairline); }

/* Fingerprint — mini (vertical bars on cards) + full (labelled rows). */
.profile-fp-mini { display: flex; align-items: flex-end; gap: 4px; height: 38px; }
.profile-fp-mini .profile-fp-bar {
  position: relative; flex: 1 1 0; height: 100%; min-width: 0;
  background: var(--well); border-radius: 3px; overflow: hidden;
}
.profile-fp-mini .profile-fp-fill {
  position: absolute; left: 0; right: 0; bottom: 0; background: var(--brand); border-radius: 3px;
}
.profile-fp-full { display: grid; gap: 10px; margin-top: 14px; max-width: 560px; }
.profile-fp-row { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 12px; }
.profile-fp-label { font-size: 13px; color: var(--text-dim); }
.profile-fp-track { height: 10px; background: var(--well); border-radius: 999px; overflow: hidden; }
.profile-fp-full .profile-fp-fill { display: block; height: 100%; background: var(--brand); border-radius: 999px; }

.profile-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.profile-detail-head h1 { margin: 0 0 4px; }
.profile-crumb { margin: 0 0 18px; font-size: 14px; }
.profile-crumb a { text-decoration: none; color: var(--text-mute); }
.profile-crumb a:hover { color: var(--brand); }
.profile-facts { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0 0 22px; padding: 0; }
.profile-facts > div { display: flex; flex-direction: column; }
.profile-facts dt { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); }
.profile-facts dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; }
.profile-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.profile-section { margin-top: 34px; }
.profile-section h2 { margin: 0 0 6px; font-size: 20px; }
.profile-notes { white-space: pre-wrap; line-height: 1.6; max-width: 640px; color: var(--text-dim); }
.profile-json {
  max-height: 460px; overflow: auto; padding: 16px; border-radius: var(--radius);
  background: var(--well); border: 1px solid var(--border);
  font-size: 12.5px; line-height: 1.5; white-space: pre; -webkit-overflow-scrolling: touch;
}

@media (max-width: 560px) {
  .profile-fp-row { grid-template-columns: 96px 1fr; }
  .profile-detail-head { flex-direction: column; }
}

/* ---- Community: submit, reviews, UGC ---- */
/* Hero / page action button-rows reuse the site .cta-row geometry. */
.profiles-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

.feedback-success {
  border: 1px solid color-mix(in srgb, var(--ok) 55%, transparent);
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  border-radius: var(--radius); padding: 12px 14px; margin: 0 0 18px; line-height: 1.5;
}
.feedback-success strong { display: block; }

/* User-generated content box: scope + safe defaults for rendered markdown. */
.ugc { line-height: 1.6; max-width: 680px; overflow-wrap: anywhere; }
.ugc p { margin: 0 0 12px; }
.ugc ul { margin: 0 0 12px; padding-left: 22px; }
.ugc li { margin-bottom: 6px; }
.ugc a { color: var(--brand); }
.ugc strong { font-weight: 700; }
.ugc blockquote {
  margin: 0 0 12px; padding: 10px 14px;
  background: var(--well); border: 1px solid var(--hairline); border-left: 3px solid var(--brand-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text-mute); font-style: italic;
}
.ugc blockquote p { margin: 0; }
.ugc blockquote p + p { margin-top: 8px; }

.profile-stars { color: var(--signal); letter-spacing: 2px; font-size: 15px; line-height: 1; }
.profile-stars .star-empty { color: var(--text-faint); }
.profile-rating-line { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; }

.profile-reviews { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 16px; }
.profile-review { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.profile-review-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 6px; }
.profile-review-by { font-weight: 600; }
.profile-review-date { color: var(--text-faint); }

.profile-submit-form, .profile-review-form { display: grid; gap: 14px; max-width: 640px; }
.profile-submit-form .form-row { display: flex; flex-wrap: wrap; gap: 14px; }
.profile-submit-form .form-row .form-field { flex: 1 1 140px; min-width: 0; }
.profile-submit-form textarea, .profile-review-form textarea,
.profile-submit-form input, .profile-submit-form select {
  width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--well); color: var(--text-primary); font: inherit;
  transition: border-color .15s ease, background-color .15s ease;
}
.profile-submit-form textarea:focus, .profile-review-form textarea:focus,
.profile-submit-form input:focus, .profile-submit-form select:focus {
  border-color: var(--brand); background: var(--card-hover); outline: none;
}
.profile-submit-form textarea, .profile-review-form textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; resize: vertical;
}
.profile-submit-form input[type="file"] { font-family: inherit; padding: 8px 10px; color: var(--text-dim); }
.profile-review-form { margin-top: 8px; }
/* "paste or upload" divider on the share form */
.profile-or-sep {
  display: flex; align-items: center; gap: 12px; margin: 2px 0;
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint);
}
.profile-or-sep::before, .profile-or-sep::after {
  content: ""; flex: 1; height: 1px; background: var(--hairline);
}

/* ---- Community: search ---- */
.community-search-form {
  display: flex; flex-wrap: wrap; gap: 10px; max-width: 540px; margin: 4px 0 28px;
}
.community-search-form input[type="search"] {
  flex: 1 1 260px; min-width: 0; padding: 11px 14px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--well); color: var(--text-primary);
  font: inherit; font-size: 15px; transition: border-color .15s ease, background-color .15s ease;
}
.community-search-form input[type="search"]:focus { border-color: var(--brand); background: var(--card-hover); outline: none; }
.search-kind {
  display: inline-block; margin-right: 8px; padding: 1px 8px; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; border-radius: 4px;
  background: rgba(79,156,255,.16); color: var(--brand); vertical-align: 1px;
}

/* ============================================================
   Community FORUM look — the furniture people recognise as "a
   forum": breadcrumbs, a bordered board with divided rows, topic
   rows with reply counts + last activity, and classic two-column
   "postbit" threads (author rail on the left, post on the right).
   Built on the site tokens; letter-avatars are first-party.
   ============================================================ */

/* ---- Letter avatars (first-party; bg colour set inline) ---- */
.forum-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; border-radius: 50%; color: #fff; font-weight: 700;
  font-size: 15px; line-height: 1; text-transform: uppercase; overflow: hidden;
  /* Take the neon edge off the letter-avatar palette without maintaining a
     second set of hexes — solid colour discs are a forum staple, just calmer. */
  filter: saturate(.8);
}
.forum-avatar-sm { width: 26px; height: 26px; font-size: 12px; }
.forum-avatar-lg { width: 56px; height: 56px; font-size: 24px; }

/* ---- Breadcrumbs ---- */
.forum-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 16px; font-size: 13.5px; color: var(--text-faint); }
.forum-crumbs a { color: var(--text-mute); text-decoration: none; }
.forum-crumbs a:hover { color: var(--brand); }
.forum-crumbs .sep { color: var(--text-faint); }
.forum-crumbs .here { color: var(--text-dim); }

/* ---- Board frame (wraps a category or topic list) ---- */
.forum-board { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--card); margin: 0 0 22px; }
.forum-board-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 18px; background: var(--section-bg); border-bottom: 1px solid var(--border);
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute);
}
.forum-board-head .col-stat { font-size: 11px; }

/* ---- Category rows: icon | name+desc | topic count ---- */
.forum-cats, .forum-topics { list-style: none; margin: 0; padding: 0; }
.forum-cat, .forum-topic { border-bottom: 1px solid var(--hairline); }
.forum-cat:last-child, .forum-topic:last-child { border-bottom: none; }
.forum-cat:hover, .forum-topic:hover { background: var(--card-hover); }

/* Category rows: coloured left bar (set inline per category) | name+desc |
   topic/post counts | last-post column. */
.forum-cat { border-left: 4px solid var(--border); }
/* Fixed count/last-post tracks so columns line up vertically across rows. */
.forum-cat > a { display: grid; grid-template-columns: minmax(0, 1fr) 132px minmax(180px, 240px); align-items: center; gap: 0 18px; padding: 14px 18px; color: inherit; text-decoration: none; }
.forum-cat-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.forum-cat-name { font-size: 16.5px; font-weight: 700; color: var(--text-primary); }
.forum-cat-desc { font-size: 13.5px; color: var(--text-mute); line-height: 1.5; }
.forum-cat-badge {
  margin-left: 8px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; background: var(--well); border: 1px solid var(--hairline);
  color: var(--text-mute); vertical-align: 2px;
}
.forum-cat-counts { text-align: right; white-space: nowrap; line-height: 1.4; font-size: 12px; color: var(--text-faint); }
.forum-cat-counts .n { font-weight: 700; color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* Last-post column (forum index): small avatar + latest topic + by/when. */
.forum-lastpost { display: flex; align-items: center; gap: 10px; min-width: 0; }
.forum-lastpost-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.forum-lastpost-title { font-size: 13px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.forum-lastpost-meta { font-size: 11.5px; color: var(--text-faint); }
.forum-lastpost-empty { font-size: 12.5px; color: var(--text-faint); }

/* ---- Topic rows: starter avatar | title+meta | replies/views | last activity ----
   Fixed count/last tracks (124px/172px) so the columns line up across rows. */
.forum-topic > a { display: grid; grid-template-columns: auto minmax(0, 1fr) 124px 172px; align-items: center; gap: 0 14px; padding: 12px 16px; color: inherit; text-decoration: none; }
.forum-topic-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.forum-topic-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.forum-topic-by { font-size: 12.5px; color: var(--text-mute); }
/* coloured category tag (used in the Latest list + search). Soft tinted label,
   not a solid fill — keeps the colour-coding for scanning without the
   "ransom-note" loudness of saturated pills stacked down a list. Driven by an
   inline --cat custom property so one rule themes every category, and the
   color-mix toward --text-primary keeps the label legible in light AND dark. */
.forum-cat-tag {
  display: inline-block; padding: 1px 8px; margin-right: 8px; font-size: 11px; font-weight: 700;
  border-radius: 5px; vertical-align: 1px;
  background: color-mix(in srgb, var(--cat, var(--brand)) 15%, transparent);
  color: color-mix(in srgb, var(--cat, var(--brand)) 72%, var(--text-primary));
  border: 1px solid color-mix(in srgb, var(--cat, var(--brand)) 28%, transparent);
}
.forum-topic-counts { display: flex; gap: 0; justify-content: center; white-space: nowrap; }
.forum-topic-counts .stat { width: 62px; text-align: center; line-height: 1.15; }
.forum-topic-counts .n { display: block; font-size: 14px; font-weight: 700; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.forum-topic-counts .l { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); }
/* meta (right-aligned) | avatar pinned to the track's right edge, so the
   avatars form a straight vertical column regardless of name length. */
.forum-topic-last { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; white-space: nowrap; font-size: 12px; color: var(--text-faint); }
.forum-topic-last .forum-lastpost-meta { display: flex; flex-direction: column; text-align: right; line-height: 1.25; min-width: 0; }

.forum-toolbar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 0 0 14px; font-size: 14px; }
.forum-toolbar .forum-sort { display: flex; gap: 4px; }
.forum-toolbar .forum-sort a { padding: 4px 10px; border-radius: 999px; text-decoration: none; color: var(--text-mute); }
.forum-toolbar .forum-sort a.is-active { background: var(--card); border: 1px solid var(--border); color: var(--text-primary); }

.forum-section-title { margin: 28px 0 12px; font-size: 18px; }
.forum-topic-substats { margin: -10px 0 18px; font-size: 13px; color: var(--text-faint); }
.forum-support-note { margin-top: 20px; color: var(--text-mute); }
.forum-locked-note { margin-top: 14px; padding: 10px 14px; border-radius: var(--radius); background: var(--well); border: 1px solid var(--hairline); color: var(--text-mute); font-size: 14px; }

/* "new since last visit" markers. */
.forum-new-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); margin-right: 6px; vertical-align: 1px; }
.forum-new-tag {
  display: inline-block; margin-left: 8px; padding: 0 7px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; border-radius: 999px; background: rgba(79,156,255,.16); color: var(--brand);
}

/* ---- Postbit thread: author rail (left) + post (right) ---- */
/* A thread reads as a forum at a roomy width — wider than the 720px narrow
   transactional wrap, so it doesn't float cramped in the centre. */
.forum-thread-wrap { max-width: 960px; }
.forum-posts { list-style: none; margin: 0 0 22px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--card); }
.forum-post { display: grid; grid-template-columns: 156px 1fr; border-bottom: 1px solid var(--border); }
.forum-post:last-child { border-bottom: none; }
.forum-postbit-aside {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  padding: 18px 14px; background: var(--well); border-right: 1px solid var(--border);
}
.forum-postbit-author { font-weight: 700; font-size: 14px; }
.forum-postbit-author a { color: var(--text-primary); text-decoration: none; }
.forum-postbit-author a:hover { color: var(--brand); }
.forum-postbit-rank { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); }
.forum-postbit-stat { font-size: 11.5px; color: var(--text-faint); }
.forum-postbit-main { display: flex; flex-direction: column; min-width: 0; }
.forum-postbit-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 16px; border-bottom: 1px solid var(--hairline); font-size: 12.5px; color: var(--text-faint);
}
.forum-postbit-bar .forum-post-num { font-weight: 600; color: var(--text-mute); }
.forum-postbit-when { color: var(--text-faint); }
.forum-postbit-edited { font-style: italic; }
.forum-postbit-body { padding: 14px 18px; min-width: 0; }
/* Let the post body fill the (now wider) post column instead of the global
   680px UGC cap, with a comfortable readability ceiling. */
.forum-postbit-body .ugc { max-width: 760px; }
.forum-post.is-deleted, .forum-post.is-blocked { display: block; padding: 14px 16px; background: var(--well); }
.forum-post.is-blocked { border-left: 3px solid var(--border); }
.forum-blocked-stub { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--text-faint); font-size: 14px; }

.forum-quote-ref {
  display: inline-block; margin: 0 0 8px; padding: 2px 10px; font-size: 12px;
  border-radius: 999px; background: var(--well); border: 1px solid var(--hairline); color: var(--text-mute);
}
.forum-quote-ref:hover { color: var(--brand); }

/* Per-post action links (quote / edit / delete / report) — right-aligned. */
.forum-post-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 16px; padding: 0 16px 14px; font-size: 13px; }
.forum-post-actions a, .forum-post-actions button {
  color: var(--text-mute); text-decoration: none; background: none; border: none; padding: 0; font: inherit; font-size: 13px; cursor: pointer;
}
.forum-post-actions a:hover, .forum-post-actions button:hover { color: var(--brand); }

/* Reaction (like) toggle — a flat per-item count, no leaderboard. */
.reaction-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card); color: var(--text-mute);
  font: inherit; font-size: 13px; cursor: pointer; transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.reaction-btn:hover { border-color: var(--brand-soft); color: var(--text-primary); }
.reaction-btn.is-on { border-color: var(--brand-soft); background: rgba(79,156,255,.12); color: var(--brand); }
.reaction-btn .reaction-count { font-variant-numeric: tabular-nums; }

/* Lighter "comment" style for the inline profile-discussion thread (a
   profile page is narrow; the full postbit rail is overkill there). */
.forum-comments { list-style: none; margin: 0 0 20px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--card); }
.forum-comment { display: grid; grid-template-columns: auto 1fr; gap: 0 12px; padding: 14px 16px; border-bottom: 1px solid var(--hairline); }
.forum-comment:last-child { border-bottom: none; }
.forum-comment.is-deleted, .forum-comment.is-blocked { display: block; background: var(--well); }
.forum-comment.is-blocked { border-left: 3px solid var(--border); }
.forum-comment-body { min-width: 0; }
.forum-comment-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.forum-comment-by { font-weight: 700; font-size: 14px; }
.forum-comment-by a { color: var(--text-primary); text-decoration: none; }
.forum-comment-by a:hover { color: var(--brand); }
.forum-comment-when { font-size: 12.5px; color: var(--text-faint); }

/* The reply / new-post composer. */
.forum-post-form { display: grid; gap: 12px; max-width: 680px; margin-top: 8px; }
.forum-post-form textarea {
  width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--well); color: var(--text-primary); font: inherit; resize: vertical;
  transition: border-color .15s ease, background-color .15s ease;
}
.forum-post-form textarea:focus { border-color: var(--brand); background: var(--card-hover); outline: none; }

/* The "Profile discussion" feed (compact topic rows in a board). */
.forum-feed { list-style: none; margin: 0; padding: 0; }
.forum-feed-row { border-bottom: 1px solid var(--hairline); }
.forum-feed-row:last-child { border-bottom: none; }
.forum-feed-row:hover { background: var(--card-hover); }
.forum-feed-row a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 14px; padding: 12px 16px; color: inherit; text-decoration: none; }
.forum-feed-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.forum-feed-aircraft { font-weight: 600; color: var(--text-primary); }
.forum-feed-title { font-size: 12.5px; color: var(--text-mute); }
.forum-feed-meta { font-size: 12.5px; color: var(--text-faint); white-space: nowrap; text-align: right; }

@media (max-width: 600px) {
  /* Postbit collapses to a stacked card with a horizontal author header. */
  .forum-post { grid-template-columns: 1fr; }
  .forum-postbit-aside {
    flex-direction: row; align-items: center; text-align: left; gap: 10px;
    padding: 10px 14px; border-right: none; border-bottom: 1px solid var(--border);
  }
  .forum-postbit-aside .forum-avatar-lg { width: 36px; height: 36px; font-size: 16px; }
  .forum-postbit-stat, .forum-postbit-rank { font-size: 11px; }
  /* Drop the secondary columns on small screens. */
  .forum-cat > a { grid-template-columns: 1fr auto; }
  .forum-lastpost { display: none; }
  .forum-topic > a { grid-template-columns: auto 1fr auto; }
  .forum-topic-last { display: none; }
  .forum-topic-counts { gap: 10px; }
}

/* ============================================================
   FORUM CANVAS — read as a dense, boxed forum app (white panels
   on a faint canvas, compact type, full width, two-column thread)
   rather than an airy marketing page.
   ============================================================ */
.forum-canvas { background: var(--well); }
.forum-canvas.profiles { padding: 26px 0 60px; }
.forum-wide { max-width: 1200px; }

/* Forum headings are forum-sized, not marketing-hero-sized. */
.forum-canvas .profiles-hero { margin-bottom: 16px; }
.forum-canvas .profiles-hero h1 { font-size: 25px; line-height: 1.2; letter-spacing: -0.01em; }
.forum-canvas .profiles-hero .lede { font-size: 14.5px; margin-top: 4px; }
.forum-canvas .forum-section-title { font-size: 16px; margin: 24px 0 10px; }

/* White boards read as panels on the faint canvas. */
.forum-canvas .forum-board,
.forum-canvas .forum-posts,
.forum-canvas .forum-side-box { box-shadow: 0 1px 2px rgba(0,0,0,.05); }

/* ---- Forum header bar: search (left) + member menu (right) ----
   Sits on the forum canvas (var(--well)) as a quiet toolbar, NOT a second white
   nav — so it reads as the top of the forum area, not another header strip. */
.community-bar { background: var(--well); }
.community-bar-inner { display: flex; align-items: center; gap: 16px; min-height: 48px; padding-top: 10px; padding-bottom: 2px; }
.cbar-search { position: relative; flex: 0 1 340px; min-width: 0; display: flex; align-items: center; }
.cbar-search-icon { position: absolute; left: 11px; width: 15px; height: 15px; color: var(--text-faint); pointer-events: none; }
.cbar-search input { width: 100%; box-sizing: border-box; padding: 7px 12px 7px 33px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text-primary); font: inherit; font-size: 13.5px; }
.cbar-search input::placeholder { color: var(--text-faint); }
.cbar-search input:focus { outline: none; border-color: var(--brand); }
.cbar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.cbar-link { color: var(--text-mute); text-decoration: none; font-size: 14px; white-space: nowrap; }
.cbar-link:hover { color: var(--brand); }
.btn.btn-sm { padding: 6px 14px; font-size: 13.5px; }
/* member menu — native 
 disclosure (CSP-safe, no JS to open) */
.cbar-user { position: relative; }
.cbar-user > summary { display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border-radius: 999px; cursor: pointer; list-style: none; user-select: none; border: 1px solid transparent; }
.cbar-user > summary::-webkit-details-marker { display: none; }
.cbar-user > summary:hover { background: var(--well); }
.cbar-user[open] > summary { background: var(--well); border-color: var(--border); }
.cbar-user-name { font-size: 14px; font-weight: 600; color: var(--text-primary); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbar-caret { width: 11px; height: 11px; color: var(--text-faint); flex: none; }
.cbar-pop { position: absolute; right: 0; top: calc(100% + 6px); min-width: 188px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 28px rgba(0,0,0,.18); padding: 6px; z-index: 60; display: flex; flex-direction: column; gap: 2px; }
.cbar-pop a, .cbar-pop button { display: block; width: 100%; text-align: left; box-sizing: border-box; padding: 8px 12px; border-radius: var(--radius-sm); background: none; border: none; color: var(--text-dim); font: inherit; font-size: 14px; text-decoration: none; cursor: pointer; }
.cbar-pop a:hover, .cbar-pop button:hover { background: var(--well); color: var(--text-primary); }
.cbar-pop form { margin: 0; padding-top: 6px; border-top: 1px solid var(--hairline); }
@media (max-width: 560px) {
  .cbar-search { flex: 1 1 auto; }
  .cbar-user-name, .cbar-link { display: none; }
}

/* Thread head: a compact title + a Reply action (forum, not blog hero). */
.forum-thread-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 20px; margin: 2px 0; }
.forum-thread-head h1 { margin: 0; font-size: 23px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; min-width: 0; }
.forum-thread-actions { display: flex; gap: 8px; flex: none; }
.forum-thread-actions .btn { height: 36px; min-width: 0; padding: 0 16px; font-size: 13px; }
.forum-topic-substats { margin: 4px 0 16px; font-size: 13px; color: var(--text-faint); }

/* Two-column thread: posts + an "About this topic" sidebar. */
.forum-thread-layout { display: grid; grid-template-columns: minmax(0, 1fr) 268px; gap: 24px; align-items: start; }
.forum-side-box { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; position: sticky; top: 84px; }
.forum-side-box h3 { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); }
.forum-side-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--hairline); font-size: 13px; }
.forum-side-row .k { color: var(--text-faint); }
.forum-side-row .v { margin-left: auto; text-align: right; font-weight: 600; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.forum-side-person { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.forum-side-person a { color: var(--text-primary); text-decoration: none; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.forum-side-person a:hover { color: var(--brand); }
.forum-side-box form { margin-top: 14px; }
.forum-side-box .btn { width: 100%; }

/* Denser postbit. */
.forum-post { grid-template-columns: 132px 1fr; }
.forum-postbit-aside { padding: 14px 10px; gap: 4px; }
.forum-postbit-aside .forum-avatar-lg { width: 44px; height: 44px; font-size: 18px; }
.forum-postbit-author { font-size: 13.5px; }
.forum-postbit-stat { font-size: 11px; }
.forum-postbit-bar { padding: 7px 16px; font-size: 12px; }
.forum-postbit-body { padding: 12px 16px; font-size: 14px; }
.forum-postbit-body .ugc { font-size: 14px; line-height: 1.55; max-width: none; }
.forum-post-actions { padding: 0 16px 11px; }

/* ---- Markdown composer (reply / new topic / comment) ---- */
/* A white panel so it doesn't vanish into the canvas, a formatting toolbar,
   a clean textarea, and a normal-sized submit button (not a full-width slab). */
.forum-reply-form { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; max-width: none; }
#reply.profile-section { margin-top: 22px; }
.forum-composer-title { margin: 0 0 12px; font-size: 16px; font-weight: 700; }

/* Forum "compose" page (new topic): a white form panel on the canvas with a
   forum-sized heading + breadcrumb, so it reads as part of the forum rather
   than a generic feedback form. */
.forum-narrow { max-width: 760px; }
.forum-page-title { font-size: 25px; line-height: 1.2; letter-spacing: -0.01em; margin: 2px 0 16px; }
.forum-form-panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 22px; display: grid; gap: 16px; }
.forum-form-panel .form-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.forum-form-panel input, .forum-form-panel select, .forum-form-panel textarea {
  width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--well); color: var(--text-primary); font: inherit; font-size: 14px; transition: border-color .15s ease, background-color .15s ease;
}
.forum-form-panel textarea { resize: vertical; min-height: 92px; line-height: 1.5; }
.forum-form-panel input:focus, .forum-form-panel select:focus, .forum-form-panel textarea:focus { outline: none; border-color: var(--brand); background: var(--card-hover); }
.forum-form-panel select {
  appearance: none; padding-right: 38px;
  background-image: url("data:image/svg+xml;utf8,");
  background-repeat: no-repeat; background-position: right 13px center;
}
/* The composer inside the form panel shouldn't double up borders. */
.forum-form-panel .forum-composer { margin-top: 0; }
/* Direct-child buttons/links in a form panel are grid items; keep them
   auto-width + left-aligned instead of stretching to the full column. */
.forum-form-panel > .btn, .forum-form-panel > button, .forum-form-panel > a { justify-self: start; }
/* A checkbox row stays horizontal even though the panel's .form-field rule is
   more specific than .form-check-row. */
.forum-form-panel .form-check-row { flex-direction: row; align-items: flex-start; gap: 10px; }
/* Account/settings sections read tighter on the forum canvas. */
.forum-canvas .account-section { margin-top: 26px; padding-top: 22px; }
.forum-canvas .account-section h2 { font-size: 16px; margin: 0 0 6px; }

.forum-composer { display: block; }
.forum-composer-bar { display: flex; flex-wrap: wrap; gap: 3px; padding: 6px; background: var(--well); border: 1px solid var(--border); border-bottom: none; border-radius: var(--radius) var(--radius) 0 0; }
.md-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 30px; padding: 0 9px; border: 1px solid transparent; border-radius: var(--radius-sm); background: none; color: var(--text-mute); font: inherit; font-size: 13.5px; line-height: 1; cursor: pointer; transition: background-color .12s ease, border-color .12s ease, color .12s ease; }
.md-btn:hover { background: var(--card); border-color: var(--border); color: var(--text-primary); }
.forum-composer textarea {
  display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius);
  background: var(--card); color: var(--text-primary); font: inherit; font-size: 14px; line-height: 1.6;
  min-height: 160px; resize: vertical; transition: border-color .15s ease;
}
.forum-composer textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79,156,255,.12); }
.forum-composer-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; }
.forum-composer-hint { font-size: 12.5px; color: var(--text-faint); line-height: 1.5; }
.forum-composer-hint code { font-size: 12px; }
.forum-composer-submit { min-width: 0; padding: 0 24px; flex: none; }

@media (max-width: 560px) {
  .forum-composer-foot { flex-direction: column; align-items: stretch; }
  .forum-composer-submit { width: 100%; }
}

@media (max-width: 880px) {
  .forum-thread-layout { grid-template-columns: 1fr; }
  .forum-side-box { position: static; }
}

/* ---- Community: pagination (public Pager) ---- */
.pager { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin: 28px 0 0; }
.pager a, .pager span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px;
  padding: 0 12px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--card); color: var(--text-dim); text-decoration: none; font-size: 14px;
}
.pager a:hover { border-color: var(--brand-soft); background: var(--card-hover); color: var(--text-primary); }
.pager .is-current { background: var(--brand-fill); border-color: var(--brand-fill); color: #fff; font-weight: 600; }
.pager .pager-gap { border: none; background: none; color: var(--text-faint); min-width: 0; padding: 0 4px; }

/* ---- Community: member profile page ---- */
/* Member profile — two-column forum profile: a profile card in a sticky left
   sidebar + the member's activity on the right. Fills the width cleanly instead
   of one wide, sparse, half-empty card. */
.member-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 28px; align-items: start; }
.member-side { min-width: 0; }
.member-main { min-width: 0; }
.member-main > .forum-section-title:first-child { margin-top: 0; }
.member-pcard { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px 20px; text-align: center; position: sticky; top: 84px; }
.member-pcard .forum-avatar-lg { width: 78px; height: 78px; font-size: 32px; margin: 0 auto 12px; }
.member-pcard-name { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; word-break: break-word; }
.member-pcard .member-trust { margin-top: 8px; }
.member-pcard-stats { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 7px; font-size: 14px; color: var(--text-mute); }
.member-pcard-stats strong { color: var(--text-primary); font-weight: 700; font-variant-numeric: tabular-nums; }
.member-pcard-joined { font-size: 12.5px; color: var(--text-faint); }
.member-pcard-action { margin-top: 16px; }
.member-pcard-action form { margin: 0; }
.member-pcard-action .btn { width: 100%; }
.member-trust { display: inline-block; padding: 1px 8px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-radius: 999px; background: var(--well); border: 1px solid var(--hairline); color: var(--text-mute); }
.member-blocked-note { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--well); border: 1px solid var(--hairline); color: var(--text-mute); font-size: 12.5px; }
.member-empty { color: var(--text-faint); font-size: 14px; margin: 0 0 8px; padding: 2px; }
@media (max-width: 760px) {
  .member-layout { grid-template-columns: 1fr; gap: 18px; }
  .member-pcard { position: static; }
}

/* ---- Community: account preferences ---- */
.form-check-row { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; }
.form-check-row input { margin-top: 3px; }
.account-section { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--hairline); }
.account-block-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.account-block-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }


/* ============================================================
   Community Forum redesign (x- visual system)
   Source: docs/community/forum-redesign/Forum.html
   ============================================================ */
  /* fx-root carries the community accent tokens. It deliberately does NOT
     force a min-height:100vh sticky-footer flex column — the marketing pages
     flow content then footer, and the community pages now match, so a sparse
     page (sign-in, empty search) no longer opens a tall gap before the footer. */
.fx-root { --accent: var(--brand); --accent-hover: var(--brand-hover); --accent-soft: var(--brand-soft); --accent-ink: #fff; }
  .fx-wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
  .fx-page { max-width: 1100px; margin: 0 auto; padding: 32px 24px 72px; }
  /* Narrow pages (forms, articles, threads) keep a comfortable ~820 reading
     column, but it sits LEFT-aligned inside the full 1100 frame rather than
     being a centered 820 page — so every community page's header lines up
     with the sub-nav and the full-width pages (no "shifted in" headers). */
  .fx-page.narrow { max-width: 1100px; }
  .fx-page.narrow > * { max-width: 820px; }
  .fx-link { color: var(--accent); }
  .fx-link:hover { text-decoration: underline; text-underline-offset: 2px; }
  .fx-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
  .fx-row-gap { display: flex; gap: 10px; }
  .fx-dotsep { width: 3px; height: 3px; border-radius: 999px; background: var(--fg-faint); display: inline-block; flex: none; }
  *:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; border-radius: 4px; }

  /* ---------- BUTTONS ---------- */
  .fx-btn { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; font-size: 13.5px; padding: 9px 15px;
    border-radius: 7px; border: 1px solid transparent; line-height: 1; transition: all .15s ease-out; white-space: nowrap; }
  .fx-btn-primary { background: var(--brand-fill); color: #fff; }
  .fx-btn-primary:hover { background: var(--brand-fill-hover); color: #fff; transform: translateY(-1px); }
  .fx-btn-primary:disabled { opacity: .45; transform: none; cursor: not-allowed; }
  .fx-btn-ghost { background: var(--card-2); color: var(--fg); border-color: var(--border); }
  .fx-btn-ghost:hover { background: var(--card-hover); border-color: var(--border-hi); }
  .fx-kbd { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-mute); background: var(--card-2);
    border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; padding: 3px 6px; line-height: 1; }
  .fx-kbd.sm { padding: 1px 4px; font-size: 9.5px; border-bottom-width: 1px; }
  button.fx-kbd:hover { color: var(--fg); border-color: var(--border-hi); }

  /* ---------- NAV ---------- */
  .fx-nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); background: var(--nav-bg);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
  .fx-nav .fx-wrap { max-width: none; padding: 0 28px; }
  .fx-nav-in { display: flex; align-items: center; gap: 20px; height: 100%; }
  .fx-brand { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 16px; letter-spacing: -.01em; flex: none; }
  .fx-nav-links { display: flex; align-items: center; gap: 18px; flex: 1 1 0; min-width: 0; overflow: hidden; }
  .fx-nav-link { font-size: 13.5px; color: var(--fg-dim); transition: color .15s; position: relative; }
  .fx-nav-link:hover { color: var(--fg); }
  .fx-nav-link.active { color: var(--fg); font-weight: 500; }
  .fx-nav-link.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -22px; height: 2px; background: var(--accent); border-radius: 2px; }
  .fx-nav-cta { display: flex; align-items: center; gap: 12px; flex: none; }
  .fx-icon-btn { display: inline-flex; align-items: center; gap: 5px; background: none; border: 1px solid transparent; color: var(--fg-mute);
    padding: 7px 8px; border-radius: 7px; transition: all .15s; }
  .fx-icon-btn:hover { color: var(--fg); background: var(--card-2); }
  .fx-lang { position: relative; }
  .fx-lang-code { font-family: var(--font-mono); font-size: 11px; font-weight: 500; }
  .fx-menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 210px; z-index: 60; background: var(--card);
    border: 1px solid var(--border-hi); border-radius: 10px; padding: 6px; box-shadow: var(--shadow-lg); max-height: 340px; overflow: auto; }
  .fx-menu.right { right: 0; left: auto; min-width: 180px; }
  .fx-menu-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left;
    background: none; border: none; color: var(--fg-dim); font-size: 13px; padding: 8px 10px; border-radius: 7px; transition: all .12s; }
  .fx-menu-item:hover { background: var(--card-2); color: var(--fg); }
  .fx-menu-item.on { color: var(--fg); }
  .fx-scrim-bare { position: fixed; inset: 0; z-index: 40; }

  /* ---------- PAGE HEADER ---------- */
  .fx-pagehead { margin-bottom: 22px; }
  .fx-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
  .fx-h1 { font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin: 8px 0 0; }
  .fx-h1.topic { font-size: 27px; margin-top: 12px; max-width: 800px; text-wrap: balance; }
  .fx-lede { font-size: 15.5px; line-height: 1.55; color: var(--fg-dim); max-width: 620px; margin: 12px 0 0; }
  .fx-crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-mute); margin-bottom: 6px; }
  .fx-crumbs a { color: var(--fg-mute); }
  .fx-crumbs a:hover { color: var(--accent); }
  .fx-crumb-cur { color: var(--fg-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50ch; }

  /* ---------- SEARCH BAR ---------- */
  .fx-searchbar { display: flex; align-items: center; gap: 10px; width: 100%; background: var(--well);
    border: 1px solid var(--border); border-radius: 9px; padding: 0 12px; height: 42px; transition: border-color .15s, box-shadow .15s; }
  .fx-searchbar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .fx-searchbar.trigger { cursor: text; }
  .fx-searchbar.trigger:hover { border-color: var(--border-hi); }
  .fx-search-input { flex: 1; background: none; border: none; outline: none; color: var(--fg); font-size: 14px; font-family: var(--font-ui); }
  .fx-search-input::placeholder { color: var(--fg-mute); }
  .fx-search-ph { flex: 1; color: var(--fg-mute); font-size: 14px; text-align: left; }
  .fx-search-clear { display: inline-flex; background: none; border: none; color: var(--fg-mute); padding: 4px; border-radius: 5px; }
  .fx-search-clear:hover { color: var(--fg); background: var(--card-2); }

  .fx-hero-search { background: var(--section-bg); border: 1px solid var(--border); border-radius: 12px; padding: 22px 22px 18px; margin-bottom: 16px;
    background-image: radial-gradient(circle at 50% -40%, var(--accent-soft) 0%, transparent 60%); }
  .fx-hero-search-inner .fx-searchbar { height: 50px; background: var(--card); font-size: 15px; }
  .fx-hero-search-hint { margin-top: 10px; font-size: 12.5px; color: var(--fg-mute); display: flex; gap: 6px; align-items: center; }
  .fx-hero-search-hint code, .fx-ic { font-family: var(--font-mono); font-size: .88em; background: var(--card-2); border: 1px solid var(--border);
    padding: 1px 6px; border-radius: 5px; color: var(--fg-dim); }

  /* ---------- TOOLBAR ---------- */
  .fx-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
  .fx-toolbar-search { flex: 1; min-width: 0; }
  .fx-toolbar-right { display: flex; align-items: center; gap: 10px; flex: none; }
  .fx-sort { position: relative; }
  .fx-sort-cur { font-size: 13.5px; }
  .fx-seeall { font-size: 12.5px; color: var(--fg-mute); }
  .fx-seeall:hover { color: var(--accent); }

  /* ---------- CARD + SECTION ---------- */
  .fx-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; }
  .fx-cat-wrap, .fx-activity-wrap { margin-bottom: 22px; overflow: hidden; }
  .fx-sec-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); }
  .fx-sec-title { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--fg-dim); }
  .fx-sec-count { font-family: var(--font-mono); font-size: 11px; color: var(--fg-mute); background: var(--card-2); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; }

  /* ---------- CATEGORY LIST ---------- */
  .fx-cat-list { display: flex; flex-direction: column; }
  .fx-cat-row { display: grid; grid-template-columns: 44px 1fr 130px 250px; align-items: center; gap: 16px; width: 100%; text-align: left;
    background: none; border: none; border-bottom: 1px dashed var(--hairline); padding: 16px 18px; transition: background .15s; }
  .fx-cat-row:last-child { border-bottom: none; }
  .fx-cat-row:hover { background: var(--hover-wash); }
  .fx-cat-ic { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px;
    background: var(--card-2); border: 1px solid var(--border); }
  .fx-cat-ic.lg { width: 48px; height: 48px; }
  .fx-cat-ic.xl { width: 60px; height: 60px; border-radius: 14px; }
  .fx-cat-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .fx-cat-name-row { display: flex; align-items: center; gap: 9px; }
  .fx-cat-name { font-size: 15.5px; font-weight: 600; color: var(--fg); }
  .fx-cat-desc { font-size: 13px; color: var(--fg-mute); line-height: 1.45; max-width: 60ch;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .fx-pill-ro { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-mute);
    background: var(--card-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px 7px; }
  .fx-cat-stats { display: grid; grid-template-columns: auto 1fr; gap: 1px 8px; align-items: baseline; }
  .fx-stat-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 14px; color: var(--fg); text-align: right; }
  .fx-stat-lab { font-size: 11.5px; color: var(--fg-mute); }
  .fx-cat-last { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .fx-cat-last-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .fx-cat-last-title { font-size: 12.5px; color: var(--fg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fx-cat-last-meta { font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint); }

  /* ---------- CATEGORY CARDS ---------- */
  .fx-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); }
  .fx-cat-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; background: var(--card);
    border: none; padding: 20px 20px 16px; transition: background .15s; }
  .fx-cat-card:hover { background: var(--card-hover); }
  .fx-cat-card-head { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 4px; }
  .fx-cat-card .fx-cat-name { font-size: 15px; }
  .fx-cat-card .fx-cat-desc { -webkit-line-clamp: 2; min-height: 2.9em; }
  .fx-cat-card-foot { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--fg-mute); margin-top: 8px; width: 100%; }
  .fx-cat-card-foot .fx-stat-num { font-size: 12.5px; }
  .fx-cat-card-last { margin-left: auto; display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint); }

  /* ---------- TOPIC ROWS ---------- */
  .fx-topic-list.pinned { background: color-mix(in srgb, var(--accent-soft) 7%, transparent); border-bottom: 1px solid var(--border); }
  .fx-topic-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 16px; width: 100%; text-align: left;
    background: none; border: none; border-bottom: 1px dashed var(--hairline); padding: 13px 18px; transition: background .15s; }
  .fx-topic-row:last-child { border-bottom: none; }
  .fx-topic-row:hover { background: var(--hover-wash); }
  .fx-topic-av { flex: none; }
  .fx-topic-main { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
  .fx-topic-titleline { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .fx-topic-title { font-size: 14.5px; font-weight: 500; color: var(--fg); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fx-topic-row:hover .fx-topic-title { color: var(--accent); }
  .fx-topic-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--fg-mute); }
  .fx-topic-by { color: var(--fg-mute); }
  .fx-topic-author { color: var(--fg-dim); font-weight: 500; }
  .fx-topic-time { font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint); }
  .fx-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500; color: var(--fg-dim);
    background: var(--card-2); border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px; transition: all .12s; }
  .fx-chip:hover { border-color: var(--accent); color: var(--accent); }
  .fx-chip svg { color: var(--accent); }
  .fx-tag-sm { font-family: var(--font-mono); font-size: 11px; color: var(--fg-mute); background: var(--well); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; }
  .fx-flag { display: inline-flex; align-items: center; gap: 4px; flex: none; border-radius: 6px; }
  .fx-flag.pin { color: var(--accent); }
  .fx-flag.solved { color: var(--ok); }
  .fx-flag.ans { color: var(--fg-mute); }
  .fx-flag.lg { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 4px 9px; border: 1px solid; }
  .fx-flag.pin.lg { background: var(--accent-soft); border-color: transparent; }
  .fx-flag.solved.lg { background: rgba(108,198,107,.12); border-color: rgba(108,198,107,.3); }
  .fx-topic-counts { display: flex; align-items: center; gap: 14px; flex: none; }
  .fx-count { display: inline-flex; align-items: center; gap: 5px; }
  .fx-count-n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 500; color: var(--fg-dim); }
  .fx-topic-last { display: flex; align-items: center; gap: 8px; flex: none; width: 92px; }
  .fx-topic-last-time { font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint); }

  /* compact density */
  .fx-root[data-density="compact"] .fx-topic-row { padding: 8px 16px; gap: 12px; }
  .fx-root[data-density="compact"] .fx-topic-meta { gap: 7px; }
  .fx-root[data-density="compact"] .fx-cat-row { padding: 11px 16px; }
  .fx-root[data-density="compact"] .fx-topic-title { font-size: 14px; }

  /* ---------- CATEGORY HERO ---------- */
  .fx-cat-hero { display: flex; gap: 18px; align-items: flex-start; padding: 8px 0 24px; }
  .fx-cat-hero-main { flex: 1; }
  .fx-cat-hero-title { display: flex; align-items: center; gap: 12px; }
  .fx-cat-hero-stats { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 13px; color: var(--fg-mute); }

  /* ---------- PRIVACY NOTE ---------- */
  .fx-privacy-note { display: flex; gap: 10px; align-items: flex-start; background: var(--section-bg); border: 1px solid var(--border);
    border-radius: 10px; padding: 14px 16px; font-size: 13px; color: var(--fg-mute); line-height: 1.5; }
  .fx-privacy-note svg { margin-top: 2px; }

  /* ---------- COMMAND PALETTE ---------- */
  .fx-palette-scrim { position: fixed; inset: 0; z-index: 100; background: rgba(5,7,10,.55); backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 20px 20px; }
  .fx-palette { width: 100%; max-width: 600px; background: var(--card); border: 1px solid var(--border-hi); border-radius: 14px;
    box-shadow: var(--shadow-lg); overflow: hidden; opacity: 1; transform: none; animation: fx-pop .14s ease-out both; }
  @keyframes fx-pop { from { transform: translateY(-8px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }
  .fx-palette-top { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
  .fx-palette-input { flex: 1; background: none; border: none; outline: none; color: var(--fg); font-size: 16px; font-family: var(--font-ui); }
  .fx-palette-input::placeholder { color: var(--fg-mute); }
  .fx-palette-list { max-height: 50vh; overflow: auto; padding: 6px; }
  .fx-palette-label { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faint); padding: 8px 10px 4px; }
  .fx-palette-empty { padding: 20px 10px; font-size: 13.5px; color: var(--fg-mute); text-align: center; }
  .fx-palette-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; border: none;
    padding: 10px 10px; border-radius: 9px; color: var(--fg-dim); }
  .fx-palette-row.active { background: var(--card-2); color: var(--fg); }
  .fx-pal-ic { width: 30px; height: 30px; flex: none; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 7px; background: var(--well); border: 1px solid var(--border); color: var(--fg-mute); }
  .fx-pal-ic.accent { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
  .fx-palette-row.active .fx-pal-ic.accent { color: var(--accent); }
  .fx-pal-main { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fx-pal-sub { font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint); flex: none; }
  .fx-palette-foot { display: flex; gap: 18px; padding: 10px 16px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--fg-mute); }
  .fx-palette-foot .fx-kbd { margin-right: 3px; }

  /* ---------- SEARCH RESULTS ---------- */
  .fx-search-hero { margin: 6px 0 18px; }
  .fx-results-head { margin-bottom: 14px; }
  .fx-results-count { font-size: 15px; color: var(--fg-dim); }
  .fx-results-count strong { color: var(--fg); font-family: var(--font-mono); }
  .fx-q { color: var(--accent); }
  .fx-scope-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
  .fx-scope { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--fg-dim); background: var(--card-2);
    border: 1px solid var(--border); border-radius: 999px; padding: 6px 13px; transition: all .12s; }
  .fx-scope:hover { border-color: var(--border-hi); }
  .fx-scope.on { background: var(--accent-soft); border-color: transparent; color: var(--fg); font-weight: 500; }
  .fx-scope-n { font-family: var(--font-mono); font-size: 11px; color: var(--fg-mute); }
  .fx-scope.on .fx-scope-n { color: var(--fg-dim); }
  .fx-result-list { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
  .fx-result-list .fx-topic-row { border-bottom: 1px solid var(--hairline); }
  .fx-empty { display: flex; gap: 14px; align-items: flex-start; padding: 28px 20px; }
  .fx-empty.pad { justify-content: center; color: var(--fg-mute); font-size: 14px; }
  .fx-empty-ic { width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px;
    background: var(--well); border: 1px solid var(--border); color: var(--fg-mute); }
  .fx-empty-h { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
  .fx-empty-p { font-size: 13.5px; color: var(--fg-mute); }
  .fx-empty-p code { font-family: var(--font-mono); font-size: .9em; color: var(--accent); }

  /* ---------- TOPIC PAGE ---------- */
  .fx-topic-hero { padding: 6px 0 22px; border-bottom: 1px solid var(--border); margin-bottom: 22px; }
  .fx-topic-hero-flags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .fx-topic-hero-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; font-size: 13px; color: var(--fg-mute); }
  .fx-topic-hero-meta .fx-mono { color: var(--fg-dim); }
  .fx-tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
  .fx-tag-cloud.inline { margin-left: 4px; }
  .fx-topic-grid { display: grid; grid-template-columns: 1fr 280px; gap: 28px; align-items: start; }
  .fx-thread { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

  .fx-post { display: grid; grid-template-columns: 150px 1fr; gap: 4px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
  .fx-post.op { border-color: var(--border-hi); }
  .fx-post-author { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 14px; border-right: 1px dashed var(--hairline);
    background: var(--card-2); text-align: center; }
  .fx-post-author-meta { display: flex; flex-direction: column; align-items: center; gap: 3px; }
  .fx-post-name { font-size: 13.5px; font-weight: 600; color: var(--fg); }
  .fx-post-name:hover { color: var(--accent); }
  .fx-post-badges { display: flex; gap: 5px; margin: 2px 0; }
  .fx-badge-op { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; color: var(--accent); background: var(--accent-soft);
    border-radius: 4px; padding: 1px 5px; font-weight: 600; }
  .fx-post-since { font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint); }
  .fx-post-body-wrap { padding: 18px 22px 12px; min-width: 0; }
  .fx-post-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
  .fx-post-num { font-family: var(--font-mono); font-size: 12px; color: var(--fg-faint); }
  .fx-post-time { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-mute); margin-left: auto; }
  .fx-post-body { font-size: 15px; line-height: 1.6; color: var(--fg-dim); }
  .fx-post-body code.fx-ic { font-family: var(--font-mono); font-size: .85em; background: var(--well); border: 1px solid var(--border); padding: 1px 6px; border-radius: 5px; color: var(--accent); }
  .fx-quote { margin: 0 0 14px; padding: 10px 14px; background: var(--well); border-left: 2px solid var(--accent); border-radius: 0 8px 8px 0; }
  .fx-quote-head { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-mute); margin-bottom: 5px; }
  .fx-quote-head strong { color: var(--fg-dim); }
  .fx-quote-text { font-size: 13.5px; color: var(--fg-mute); line-height: 1.45; }
  .fx-post-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--hairline); }
  .fx-post-act { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid transparent; color: var(--fg-mute);
    font-size: 12.5px; padding: 6px 10px; border-radius: 7px; white-space: nowrap; transition: all .12s; }
  .fx-post-act:hover { background: var(--card-2); color: var(--fg); }
  .fx-post-act.on { color: var(--err); }
  .fx-post-act.subtle { margin-left: auto; }

  /* ABOUT sidebar */
  .fx-about { display: flex; flex-direction: column; gap: 14px; position: sticky; top: calc(var(--nav-h) + 18px); }
  .fx-about-card { padding: 16px 18px; }
  .fx-about-h { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faint); margin: 0 0 14px; font-weight: 600; }
  .fx-about-dl { margin: 0; display: flex; flex-direction: column; gap: 11px; }
  .fx-about-dl > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .fx-about-dl dt { font-size: 12.5px; color: var(--fg-mute); }
  .fx-about-dl dd { margin: 0; font-size: 12.5px; color: var(--fg-dim); display: flex; align-items: center; gap: 7px; }
  .fx-parts { display: flex; flex-wrap: wrap; gap: 7px; }

  /* SIGN-IN CTA + REPLY */
  .fx-signin-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--section-bg);
    border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; flex-wrap: wrap; }
  .fx-signin-text { display: flex; flex-direction: column; gap: 3px; }
  .fx-signin-h { font-size: 15px; font-weight: 600; }
  .fx-signin-p { font-size: 13px; color: var(--fg-mute); }
  .fx-signin-acts { display: flex; gap: 10px; }
  .fx-reply { padding: 16px 18px; }
  .fx-reply-head { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; margin-bottom: 12px; }
  .fx-reply-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; padding: 0 2px; }
  .fx-reply-hint { font-size: 12px; color: var(--fg-mute); line-height: 1.5; }

  /* EDITOR */
  .fx-editor { border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: var(--well); }
  .fx-editor-bar { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; border-bottom: 1px solid var(--border); background: var(--card-2); }
  .fx-editor-tools { display: flex; gap: 2px; }
  .fx-tool { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; background: none; border: none; color: var(--fg-mute); padding: 6px 8px; border-radius: 6px; font: inherit; font-size: 13px; line-height: 1; transition: all .12s; }
  .fx-tool:hover { background: var(--card-hover); color: var(--fg); }
  .fx-editor-tabs { display: flex; gap: 2px; }
  .fx-etab { background: none; border: none; color: var(--fg-mute); font-size: 12.5px; padding: 5px 11px; border-radius: 6px; }
  .fx-etab.on { background: var(--card); color: var(--fg); border: 1px solid var(--border); }
  .fx-textarea { width: 100%; min-height: 130px; resize: vertical; background: var(--well); border: none; outline: none; color: var(--fg);
    font-family: var(--font-ui); font-size: 14.5px; line-height: 1.6; padding: 14px; }
  .fx-textarea::placeholder { color: var(--fg-mute); }
  .fx-preview { min-height: 130px; padding: 14px; font-size: 14.5px; line-height: 1.6; color: var(--fg-dim); }
  .fx-preview.empty { color: var(--fg-faint); font-style: italic; }
  .fx-preview code.fx-ic { font-family: var(--font-mono); font-size: .85em; background: var(--card-2); border: 1px solid var(--border); padding: 1px 6px; border-radius: 5px; color: var(--accent); }

  /* COMPOSER */
  .fx-compose { padding: 22px 24px; display: flex; flex-direction: column; gap: 20px; }
  .fx-field { display: flex; flex-direction: column; gap: 8px; position: relative; }
  fieldset.fx-field { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
  .fx-field-lab { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-mute); }
  .fx-field-opt { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--fg-faint); }
  .fx-field-hint { font-size: 12px; color: var(--fg-mute); }
  .fx-field > .fx-field-hint { position: absolute; right: 2px; top: 0; font-family: var(--font-mono); }
  .fx-input { width: 100%; min-width: 0; background: var(--well); border: 1px solid var(--border); border-radius: 9px; padding: 12px 14px; font-family: var(--font-ui);
    font-size: 14.5px; color: var(--fg); outline: none; transition: border-color .15s, box-shadow .15s; }
  .fx-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .fx-input::placeholder { color: var(--fg-mute); }
  .fx-cat-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
  .fx-cat-opt { display: inline-flex; align-items: center; justify-content: flex-start; gap: 7px; min-height: 42px; font-size: 13px; color: var(--fg-dim); background: var(--card-2);
    border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; cursor: pointer; user-select: none; transition: all .12s; }
  .fx-cat-opt svg { color: var(--fg-mute); }
  .fx-cat-opt:hover { border-color: var(--border-hi); }
  .fx-cat-opt.on,
  .fx-cat-picker .fx-cat-opt.on { background: var(--card); border-color: var(--accent); color: var(--fg); font-weight: 500; box-shadow: 0 0 0 2px var(--accent-soft); }
  .fx-cat-opt.on svg,
  .fx-cat-picker .fx-cat-opt.on svg { color: var(--accent); }
  .fx-cat-opt:has(input:focus-visible) { outline: 2px solid var(--accent-soft); outline-offset: 2px; }
  .fx-tag-input { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; background: var(--well); border: 1px solid var(--border);
    border-radius: 9px; padding: 9px 12px; min-height: 44px; }
  .fx-tag-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .fx-tag-edit { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-dim);
    background: var(--card-2); border: 1px solid var(--border); border-radius: 6px; padding: 3px 4px 3px 8px; }
  .fx-tag-edit button { display: inline-flex; background: none; border: none; color: var(--fg-mute); padding: 2px; border-radius: 4px; }
  .fx-tag-edit button:hover { color: var(--err); background: var(--card-hover); }
  .fx-tag-field { flex: 1; min-width: 120px; background: none; border: none; outline: none; color: var(--fg); font-size: 13.5px; font-family: var(--font-ui); }
  .fx-tag-field::placeholder { color: var(--fg-mute); }
  .fx-compose-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; flex-wrap: wrap; }

  /* ---------- FOOTER ---------- */
  .fx-footer { border-top: 1px solid var(--border); padding: 48px 0 36px; margin-top: 24px; }
  .fx-foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
  .fx-foot-blurb { font-size: 13.5px; color: var(--fg-dim); line-height: 1.6; max-width: 320px; margin: 12px 0 0; }
  .fx-foot-ln { color: var(--accent); }
  .fx-foot-ln:hover { text-decoration: underline; }
  .fx-skyline { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-faint); letter-spacing: .08em; }
  .fx-foot-col h5 { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faint); margin: 0 0 14px; font-weight: 500; }
  .fx-foot-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
  .fx-foot-col a { font-size: 13.5px; color: var(--fg-dim); transition: color .15s; }
  .fx-foot-col a:hover { color: var(--fg); }
  .fx-foot-meta { font-family: var(--font-mono); font-size: 12px; color: var(--fg-faint); }
  .fx-foot-copy { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 36px; padding-top: 22px;
    border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-faint); flex-wrap: wrap; }

  /* ---------- USER MENU + BUTTON SIZES ---------- */
  .fx-usermenu-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--card-2); border: 1px solid var(--border);
    border-radius: 999px; padding: 4px 12px 4px 5px; font-size: 13.5px; font-weight: 500; color: var(--fg); transition: all .15s; }
  .fx-usermenu-btn:hover { border-color: var(--border-hi); background: var(--card-hover); }
  .fx-menu-sep { height: 1px; background: var(--border); margin: 5px 2px; }
  .fx-btn-lg { padding: 12px 20px; font-size: 14.5px; }
  .fx-btn-sm { padding: 6px 12px; font-size: 12.5px; }

  /* ---------- SIGN IN ---------- */
  .fx-auth-page { padding-top: 56px; }
  .fx-auth-h { font-size: 42px; margin-bottom: 10px; }
  .fx-auth-card { padding: 26px 28px; margin-top: 28px; }
  .fx-auth-form { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
  .fx-auth-form .fx-field { width: 100%; }
  .fx-auth-fine { font-size: 12.5px; color: var(--fg-mute); margin: 2px 0 0; line-height: 1.5; max-width: 52ch; }
  .fx-sent { display: flex; gap: 16px; align-items: flex-start; }
  .fx-sent-ic { width: 40px; height: 40px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
    background: rgba(108,198,107,.14); border: 1px solid rgba(108,198,107,.34); color: var(--ok); }
  .fx-sent-h { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
  .fx-sent-p { font-size: 14px; color: var(--fg-dim); line-height: 1.55; }
  .fx-demo-link { display: inline-block; margin-top: 12px; font-size: 13px; background: none; border: none; padding: 0; cursor: pointer; }

  /* ---------- YOUR ACCOUNT ---------- */
  .fx-acct-card { padding: 22px 24px; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
  .fx-acct-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; width: 100%; align-items: start; }
  .fx-acct-aside { display: flex; flex-direction: column; gap: 14px; padding-top: 26px; }
  .fx-acct-note { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-faint); }
  .fx-input-avatar { position: relative; }
  .fx-input-avatar .fx-input { width: 100%; padding-right: 44px; }
  .fx-input-adorn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
  .fx-acct-sec { padding: 24px 0; border-top: 1px solid var(--border); }
  .fx-acct-sec-h { font-size: 17px; font-weight: 600; margin: 0 0 4px; display: flex; align-items: baseline; gap: 8px; }
  .fx-acct-count { font-family: var(--font-mono); font-size: 13px; color: var(--fg-mute); font-weight: 400; }
  .fx-acct-desc { font-size: 13.5px; color: var(--fg-mute); line-height: 1.55; margin: 0 0 16px; max-width: 70ch; }
  .fx-acct-text { font-size: 14px; color: var(--fg-dim); line-height: 1.55; margin: 0; }
  .fx-acct-text.mute { color: var(--fg-mute); }
  .fx-empty-card { background: var(--well); border: 1px dashed var(--border-hi); border-radius: 10px; padding: 26px 20px; text-align: center;
    font-size: 13.5px; color: var(--fg-mute); line-height: 1.55; }
  .fx-quote-inline { color: var(--fg-dim); }
  .fx-acct-foot { padding: 24px 0 0; border-top: 1px solid var(--border); margin-top: 8px; }
  .fx-toggle-row { display: flex; align-items: center; gap: 12px; background: none; border: none; padding: 0; text-align: left; color: var(--fg-dim); font-size: 14px; }
  .fx-switch { width: 38px; height: 22px; flex: none; border-radius: 999px; background: var(--card-hi); border: 1px solid var(--border); position: relative; transition: all .18s; }
  .fx-switch.on { background: var(--accent); border-color: transparent; }
  .fx-switch-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 999px; background: #fff; transition: transform .18s; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
  .fx-switch.on .fx-switch-knob { transform: translateX(16px); }
  .fx-toggle-label { line-height: 1.45; }
  .fx-check-row { display: flex; align-items: flex-start; gap: 10px; background: none; border: none; padding: 0; text-align: left; color: var(--fg-dim); font-size: 14px; line-height: 1.45; }
  .fx-check { width: 18px; height: 18px; flex: none; margin-top: 1px; border-radius: 5px; border: 1px solid var(--border-hi); background: var(--well);
    display: inline-flex; align-items: center; justify-content: center; color: var(--accent-ink); transition: all .15s; }
  .fx-check.on { background: var(--accent); border-color: transparent; }

  /* ---------- USER PROFILE ---------- */
  .fx-profile-grid { display: grid; grid-template-columns: 280px 1fr; gap: 32px; align-items: start; margin-top: 8px; }
  .fx-profile-card { padding: 28px 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
  .fx-profile-name { font-size: 20px; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; margin-top: 4px; }
  .fx-profile-stats { display: flex; flex-direction: column; gap: 12px; width: 100%; margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--hairline); font-size: 14px; color: var(--fg-dim); }
  .fx-profile-joined { font-family: var(--font-mono); font-size: 12.5px; color: var(--fg-faint); }
  .fx-prof-h { font-size: 18px; font-weight: 600; margin: 0 0 14px; }
  .fx-prof-posts { overflow: hidden; }
  .fx-prof-post { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; text-align: left; background: none;
    border: none; border-bottom: 1px dashed var(--hairline); padding: 15px 18px; transition: background .15s; }
  .fx-prof-post:last-child { border-bottom: none; }
  .fx-prof-post:hover { background: var(--hover-wash); }
  .fx-prof-post-title { font-size: 14.5px; font-weight: 500; color: var(--fg); }
  .fx-prof-post:hover .fx-prof-post-title { color: var(--accent); }
  .fx-prof-post-time { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-faint); flex: none; }
  .fx-post-av-btn { background: none; border: none; padding: 0; cursor: pointer; }

  /* ---------- GUIDELINES ---------- */
  .fx-guide { padding: 6px 24px; }
  .fx-guide-row { display: flex; gap: 18px; align-items: flex-start; padding: 20px 0; border-bottom: 1px dashed var(--hairline); }
  .fx-guide-row:last-child { border-bottom: none; }
  .fx-guide-n { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--accent); flex: none; padding-top: 1px; }
  .fx-guide-h { font-size: 15.5px; font-weight: 600; margin-bottom: 4px; }
  .fx-guide-p { font-size: 13.5px; color: var(--fg-mute); line-height: 1.55; }

  /* ============ PROFILE LIBRARY ============ */
  .fx-lib-actions { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
  .fx-statstrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin: 24px 0 10px; }
  .fx-stat { background: var(--card); padding: 16px 18px; display: flex; flex-direction: column; gap: 3px; }
  .fx-stat-v { font-family: var(--font-mono); font-size: 24px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  .fx-stat-k { font-size: 11px; color: var(--fg-mute); text-transform: uppercase; letter-spacing: .08em; }

  .fx-lib-featured { margin: 28px 0; }
  .fx-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 4px; }
  .fx-pcard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
  .fx-accard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }

  /* profile table (list view) */
  .fx-ptable { --cols: minmax(0,1fr) 150px 200px 116px 96px; padding: 0; overflow: hidden; }
  .fx-ptable-head { display: grid; grid-template-columns: var(--cols); align-items: center; gap: 16px; padding: 11px 18px; border-bottom: 1px solid var(--border); font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--fg-faint); font-weight: 600; background: var(--card-2); }
  .fx-prow-dl-h { text-align: right; }
  .fx-prow { display: grid; grid-template-columns: var(--cols); align-items: center; gap: 16px; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px dashed var(--hairline); padding: 12px 18px; transition: background .15s; }
  .fx-prow:last-child { border-bottom: none; }
  .fx-prow:hover { background: var(--hover-wash); }
  .fx-prow-title { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .fx-prow-titlerow { display: flex; align-items: center; gap: 9px; min-width: 0; }
  .fx-prow-name { font-size: 14.5px; font-weight: 600; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fx-prow:hover .fx-prow-name { color: var(--accent); }
  .fx-prow-ac { font-size: 12px; color: var(--fg-mute); display: inline-flex; align-items: center; gap: 5px; }
  .fx-prow-author { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--fg-dim); min-width: 0; }
  .fx-prow-author-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fx-prow-traits { display: flex; gap: 6px; overflow: hidden; }
  .fx-prow-rating { display: flex; }
  .fx-prow-dl { justify-self: end; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--fg-dim); }

  .fx-pgroup-head { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 12px 18px; background: var(--card-2); border: none; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); transition: background .15s; }
  .fx-pgroup-head.first { border-top: none; }
  .fx-pgroup-head:hover { background: var(--card-hi); }
  .fx-pgroup-ic { width: 28px; height: 28px; border-radius: 7px; background: var(--card); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: var(--accent); flex: none; }
  .fx-pgroup-name { font-size: 14.5px; font-weight: 600; }
  .fx-chip.sm { padding: 1px 7px; font-size: 10.5px; }
  .fx-pgroup-cat { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-faint); }
  .fx-pgroup-meta { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 12.5px; color: var(--fg-mute); }
  .fx-pgroup-rate { display: inline-flex; align-items: center; gap: 4px; }
  .fx-pgroup-count { color: var(--fg-dim); }
  .fx-pgroup-count .fx-mono { color: var(--accent); font-weight: 600; }
  .fx-pgroup-all { display: inline-flex; align-items: center; gap: 3px; color: var(--accent); font-weight: 500; }

  @media (max-width: 880px) {
    .fx-hide-md { display: none !important; }
    .fx-ptable { --cols: minmax(0,1fr) 116px 92px; }
  }

  /* force signature */
  .fx-sig { display: flex; align-items: flex-end; width: 100%; border-bottom: 1px solid var(--hairline); padding-bottom: 1px; }
  .fx-sig-bar { flex: 1; background: var(--accent); border-radius: 2px 2px 0 0; min-height: 6px; }
  .fx-sigpanel { display: flex; flex-direction: column; gap: 9px; margin-top: 6px; }
  .fx-sigrow { display: grid; grid-template-columns: 96px 1fr 30px; align-items: center; gap: 12px; }
  .fx-sigrow-lab { font-size: 12.5px; color: var(--fg-dim); }
  .fx-sigrow-track { height: 8px; border-radius: 999px; background: var(--well); border: 1px solid var(--border); overflow: hidden; }
  .fx-sigrow-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
  .fx-sigrow-val { font-family: var(--font-mono); font-size: 12px; color: var(--fg-mute); text-align: right; }

  /* character traits */
  .fx-traits { display: flex; flex-wrap: wrap; gap: 6px; }
  .fx-trait { font-size: 11.5px; font-weight: 500; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--card-2); color: var(--fg-dim); white-space: nowrap; }
  .fx-trait.tone-strong, .fx-trait.tone-firm { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
  .fx-trait.tone-light, .fx-trait.tone-min { color: var(--fg-mute); }
  .fx-traitlist { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; margin-top: 4px; }
  .fx-traitrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--hairline); }
  .fx-traitrow-lab { font-size: 13.5px; color: var(--fg-mute); }
  .fx-traitrow-word { font-size: 12.5px; font-weight: 400; color: var(--fg-dim); }
  .fx-traitrow-word.tone-strong, .fx-traitrow-word.tone-firm, .fx-traitrow-word.tone-mod { color: var(--fg-dim); }
  .fx-traitrow-word.tone-light { color: var(--fg-mute); }
  .fx-traitrow-word.tone-min { color: var(--fg-faint); }
  .fx-accard-toppick { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--well); border: 1px solid var(--border); border-radius: 8px; }
  .fx-accard-tp-lab { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-faint); }
  .fx-accard-tp-name { font-size: 13px; font-weight: 500; color: var(--fg-dim); }
  .fx-preview-ph { font-size: 12.5px; color: var(--fg-faint); font-style: italic; padding: 12px 0; border-top: 1px dashed var(--hairline); border-bottom: 1px dashed var(--hairline); }

  /* stars */
  .fx-stars-wrap { display: inline-flex; align-items: center; gap: 6px; }
  .fx-stars { position: relative; display: inline-flex; }
  .fx-stars-bg { display: inline-flex; color: var(--border-hi); }
  .fx-stars-bg svg { fill: none; }
  .fx-stars-fg { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; }
  .fx-stars-fgrow { display: inline-flex; color: var(--signal); }
  .fx-stars-fgrow svg { fill: currentColor; }
  .fx-stars-num { font-family: var(--font-mono); font-size: 12px; color: var(--fg-dim); }
  .fx-stars-num.muted { color: var(--fg-faint); }
  .fx-stars-ct { color: var(--fg-mute); }

  /* badges */
  .fx-srcbadge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; flex: none; }
  .fx-srcbadge.dev { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); }
  .fx-srcbadge.comm { color: var(--fg-mute); background: var(--card-2); border: 1px solid var(--border); }
  .fx-cat-tag { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-mute); background: var(--card-2); border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px; }

  /* profile card */
  .fx-pcard { display: flex; flex-direction: column; gap: 14px; text-align: left; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 18px; transition: all .15s ease-out; }
  .fx-pcard:hover { border-color: var(--accent-soft); transform: translateY(-2px); box-shadow: var(--shadow); }
  .fx-pcard-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
  .fx-pcard-titles { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
  .fx-pcard-title { font-size: 15.5px; font-weight: 600; line-height: 1.3; }
  .fx-pcard-ac { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--fg-mute); }
  .fx-pcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px dashed var(--hairline); }
  .fx-pcard-by { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--fg-dim); }
  .fx-pcard-dl { display: inline-flex; align-items: center; gap: 5px; }

  /* aircraft card */
  .fx-accard { display: flex; flex-direction: column; gap: 14px; text-align: left; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 18px; transition: all .15s ease-out; }
  .fx-accard:hover { border-color: var(--accent-soft); transform: translateY(-2px); box-shadow: var(--shadow); }
  .fx-accard-head { display: flex; gap: 12px; align-items: center; }
  .fx-accard-ic { width: 42px; height: 42px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: var(--accent); flex: none; }
  .fx-accard-titles { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .fx-accard-name { font-size: 16px; font-weight: 600; }
  .fx-accard-sub { font-size: 12px; color: var(--fg-mute); }
  .fx-accard-count { display: flex; align-items: baseline; gap: 6px; }
  .fx-accard-n { font-family: var(--font-mono); font-size: 26px; font-weight: 600; color: var(--accent); letter-spacing: -.02em; }
  .fx-accard-nlab { font-size: 13px; color: var(--fg-mute); }
  .fx-accard-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px dashed var(--hairline); }
  .fx-avstack { display: inline-flex; }
  .fx-avstack-i { margin-left: -7px; } .fx-avstack-i:first-child { margin-left: 0; }
  .fx-accard-meta { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--fg-mute); }

  /* filters */
  .fx-lib-filters { display: flex; gap: 14px; align-items: flex-end; padding: 16px 18px; margin: 10px 0 18px; flex-wrap: wrap; }
  .fx-lfield { display: flex; flex-direction: column; gap: 6px; }
  .fx-lfield.grow { flex: 1; min-width: 200px; }
  .fx-lfield-lab { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-mute); }
  .fx-search-inline { display: flex; align-items: center; gap: 8px; background: var(--well); border: 1px solid var(--border); border-radius: 8px; padding: 0 12px; height: 40px; }
  .fx-search-inline:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .fx-linput { flex: 1; background: none; border: none; outline: none; color: var(--fg); font-size: 14px; font-family: var(--font-ui); }
  .fx-linput::placeholder { color: var(--fg-mute); }
  .fx-select-wrap { position: relative; }
  .fx-select { appearance: none; -webkit-appearance: none; background: var(--well); border: 1px solid var(--border); border-radius: 8px; height: 40px; padding: 0 34px 0 12px; font-size: 14px; font-family: var(--font-ui); color: var(--fg); min-width: 140px; cursor: pointer; }
  .fx-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .fx-select-caret { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); color: var(--fg-mute); pointer-events: none; }

  /* sub-bar */
  .fx-lib-subbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; flex-wrap: wrap; }
  .fx-lib-count { font-size: 13.5px; color: var(--fg-mute); }
  .fx-lib-count strong { color: var(--fg); font-family: var(--font-mono); }
  .fx-seg { display: inline-flex; background: var(--card-2); border: 1px solid var(--border); border-radius: 8px; padding: 3px; gap: 2px; }
  .fx-seg-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fg-mute); background: none; border: none; padding: 6px 12px; border-radius: 6px; }
  .fx-seg-btn.on { background: var(--card); color: var(--fg); box-shadow: var(--shadow-sm); }

  /* aircraft hero */
  .fx-ac-hero { display: flex; gap: 18px; align-items: flex-start; padding: 8px 0 22px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
  .fx-ac-hero-ic { width: 60px; height: 60px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: var(--accent); flex: none; }
  .fx-ac-hero-main { flex: 1; min-width: 0; }
  .fx-ac-hero-titles { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .fx-ac-hero-stats { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; font-size: 13.5px; color: var(--fg-mute); }

  /* profile detail */
  .fx-pd-hero { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; padding-bottom: 22px; border-bottom: 1px solid var(--border); margin-bottom: 22px; flex-wrap: wrap; }
  .fx-pd-hero-main { min-width: 0; flex: 1; }
  .fx-pd-flags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .fx-pd-by { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; font-size: 13.5px; color: var(--fg-mute); }
  .fx-pd-author { display: inline-flex; align-items: center; gap: 7px; background: none; border: none; color: var(--fg-dim); font-size: 13.5px; font-weight: 500; }
  .fx-pd-author:hover { color: var(--accent); }
  .fx-pd-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .fx-pd-report { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; color: var(--fg-mute); font-size: 12.5px; }
  .fx-pd-report:hover { color: var(--err); }
  .fx-pd-license { flex-basis: 100%; margin: 12px 0 0; font-size: 12.5px; color: var(--fg-mute); line-height: 1.55; }
  .fx-pd-grid { display: grid; grid-template-columns: 1fr 300px; gap: 28px; align-items: start; }
  .fx-pd-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .fx-pd-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--nav-h) + 18px); }
  .fx-pd-card { padding: 20px 22px; }
  .fx-pd-h { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; margin-bottom: 6px; }
  .fx-pd-sub { font-size: 13px; color: var(--fg-mute); margin: 0 0 16px; line-height: 1.5; }
  .fx-pd-notes { font-size: 14.5px; line-height: 1.65; color: var(--fg-dim); }
  .fx-pd-notes p { margin: 0 0 12px; } .fx-pd-notes p:last-child { margin: 0; }

  .fx-rev-summary { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px dashed var(--hairline); }
  .fx-rev-big { font-family: var(--font-mono); font-size: 40px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
  .fx-rev-ct { font-size: 12.5px; color: var(--fg-mute); margin-top: 5px; }
  .fx-rev-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 18px; }
  .fx-rev { display: flex; gap: 12px; }
  .fx-rev-body { flex: 1; min-width: 0; }
  .fx-rev-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
  .fx-rev-user { font-size: 13.5px; font-weight: 600; }
  .fx-rev-time { font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint); margin-left: auto; }
  .fx-rev-text { font-size: 14px; color: var(--fg-dim); line-height: 1.55; margin: 0; }
  .fx-rev-form { padding-top: 16px; border-top: 1px dashed var(--hairline); display: flex; flex-direction: column; gap: 12px; }
  .fx-rev-form-row { display: flex; align-items: center; gap: 14px; }
  .fx-starpick { display: inline-flex; gap: 2px; }
  .fx-starpick-b { background: none; border: none; color: var(--border-hi); padding: 2px; }
  .fx-starpick-b svg { fill: none; }
  .fx-starpick-b.on { color: var(--signal); }
  .fx-starpick-b.on svg { fill: currentColor; }
  .fx-rev-ta { min-height: 80px; }
  .fx-rev-form-foot { display: flex; justify-content: flex-end; }
  .fx-signin-cta.sm { padding: 14px 16px; }

  .fx-cmt-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
  .fx-cmt { display: flex; gap: 12px; }
  .fx-cmt-body { flex: 1; min-width: 0; }
  .fx-cmt-head { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
  .fx-cmt-user { font-size: 13px; font-weight: 600; }
  .fx-cmt-time { font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint); }
  .fx-cmt-text { font-size: 14px; color: var(--fg-dim); line-height: 1.55; margin: 0; }
  .fx-cmt-form { display: flex; flex-direction: column; gap: 10px; }
  .fx-empty-card + .fx-cmt-form { margin-top: 16px; }

  .fx-json { background: var(--well); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; overflow: auto; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; color: var(--fg-dim); max-height: 360px; margin: 0; }

  .fx-side-list { display: flex; flex-direction: column; }
  .fx-side-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: none; border: none; border-bottom: 1px dashed var(--hairline); padding: 10px 0; text-align: left; }
  .fx-side-row:hover .fx-side-title { color: var(--accent); }
  .fx-side-row-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .fx-side-title { font-size: 13px; font-weight: 500; }
  .fx-side-by { font-size: 11.5px; color: var(--fg-mute); }
  .fx-side-dl { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--fg-mute); flex: none; }
  .fx-side-all { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; color: var(--accent); font-size: 13px; font-weight: 500; padding: 12px 0 0; }
  .fx-author-card { display: flex; align-items: center; gap: 12px; background: none; border: none; text-align: left; width: 100%; }
  .fx-author-name { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
  .fx-author-meta { font-size: 12px; color: var(--fg-mute); }
  .fx-author-card:hover .fx-author-name { color: var(--accent); }

  /* share */
  .fx-share-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
  .fx-share-form { min-width: 0; padding: 8px 24px 24px; display: flex; flex-direction: column; }
  .fx-share-sec { padding: 20px 0; border-bottom: 1px solid var(--border); }
  .fx-share-sec:last-child { border-bottom: none; }
  .fx-share-sec-h { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-mute); margin-bottom: 16px; }
  .fx-field-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
  .fx-field-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
  .fx-field-row2 > .fx-field, .fx-field-row3 > .fx-field { min-width: 0; }
  .fx-field-ok { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ok); margin-top: 2px; }
  .fx-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; border: 1.5px dashed var(--border-hi); border-radius: 12px; padding: 28px 20px; cursor: pointer; transition: all .15s; background: var(--well); }
  .fx-dropzone:hover { border-color: var(--accent); background: var(--card-2); }
  .fx-dropzone.has { border-style: solid; border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
  .fx-dropzone-main { font-size: 14px; font-weight: 500; color: var(--fg); }
  .fx-dropzone-sub { font-size: 12px; color: var(--fg-mute); }
  .fx-or { display: flex; align-items: center; gap: 12px; color: var(--fg-faint); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; margin: 16px 0; }
  .fx-or::before, .fx-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
  .fx-json-ta { min-height: 120px; font-family: var(--font-mono); font-size: 12.5px; }
  .fx-share-terms { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--border); line-height: 1.55; }
  .fx-share-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; flex-wrap: wrap; }
  .fx-share-preview { position: sticky; top: calc(var(--nav-h) + 18px); display: flex; flex-direction: column; gap: 10px; }
  .fx-preview-label { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-faint); }
  .fx-pcard.preview { cursor: default; }
  .fx-pcard.preview:hover { transform: none; box-shadow: none; border-color: var(--border); }
  .fx-preview-note { font-size: 12px; color: var(--fg-mute); line-height: 1.5; }

  @media (max-width: 900px) {
    .fx-pd-grid { grid-template-columns: 1fr; }
    .fx-pd-side { position: static; flex-direction: row; flex-wrap: wrap; }
    .fx-pd-side .fx-about-card { flex: 1; min-width: 220px; }
    .fx-share-grid { grid-template-columns: 1fr; }
    .fx-share-preview { position: static; }
    .fx-statstrip { grid-template-columns: repeat(2, 1fr); }
    .fx-feat-grid { grid-template-columns: 1fr; }
    .fx-field-row2, .fx-field-row3 { grid-template-columns: 1fr; }
  }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 980px) {
    .fx-nav-links { display: none; }
  }
  @media (max-width: 900px) {
    .fx-topic-grid { grid-template-columns: 1fr; }
    .fx-about { position: static; flex-direction: row; flex-wrap: wrap; }
    .fx-about-card { flex: 1; min-width: 220px; }
    .fx-cat-grid { grid-template-columns: repeat(2, 1fr); }
    .fx-cat-row { grid-template-columns: 40px 1fr auto; }
    .fx-cat-last { display: none; }
    .fx-profile-grid { grid-template-columns: 1fr; }
    .fx-acct-grid { grid-template-columns: 1fr; gap: 18px; }
    .fx-acct-aside { padding-top: 0; }
  }
  @media (max-width: 720px) {
    .fx-root,
    .fx-main {
      width: 100%;
      max-width: 100vw;
      overflow-x: clip;
    }
    .fx-page {
      box-sizing: border-box;
      width: 100%;
      max-width: 100vw;
      padding: 28px 16px 64px;
      overflow-x: clip;
    }
    .fx-page > *,
    .fx-card,
    .fx-searchbar,
    .fx-search-inline,
    .fx-lib-filters,
    .fx-statstrip,
    .fx-ptable,
    .fx-pcard,
    .fx-accard,
    .fx-topic-grid,
    .fx-profile-grid,
    .fx-acct-grid,
    .fx-pd-grid,
    .fx-share-grid,
    .fx-topic-hero,
    .fx-ac-hero,
    .fx-pd-hero {
      max-width: 100%;
      min-width: 0;
    }
    .fx-toolbar {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-items: stretch;
      gap: 10px;
    }
    .fx-toolbar-search,
    .fx-toolbar-right,
    .fx-toolbar-right .fx-btn {
      width: 100%;
      min-width: 0;
    }
    .fx-toolbar-right {
      justify-content: stretch;
    }
    .fx-toolbar .fx-searchbar,
    .fx-search-inline,
    .fx-lfield,
    .fx-lfield.grow,
    .fx-select {
      width: 100%;
      min-width: 0;
    }
    .fx-btn {
      max-width: 100%;
      justify-content: center;
    }
    .fx-lib-actions,
    .fx-pd-actions,
    .fx-share-foot {
      width: 100%;
      align-items: stretch;
    }
    .fx-lib-actions .fx-btn,
    .fx-pd-actions .fx-btn,
    .fx-share-foot .fx-btn {
      flex: 1 1 auto;
      min-width: 0;
    }
    .fx-lib-filters {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      padding: 14px;
    }
    .fx-cat-picker {
      grid-template-columns: minmax(0, 1fr);
    }
    .fx-sec-head,
    .fx-cat-row,
    .fx-topic-row,
    .fx-prow,
    .fx-pgroup-head {
      min-width: 0;
    }
    .fx-cat-name-row {
      flex-wrap: wrap;
    }
    .fx-lede,
    .fx-cat-desc,
    .fx-topic-title,
    .fx-pcard-title,
    .fx-pd-notes,
    .fx-rev-text,
    .fx-cmt-text {
      max-width: 100%;
      overflow-wrap: anywhere;
    }
    .fx-topic-title {
      white-space: normal;
    }
    .fx-topic-counts {
      display: none;
    }
    .fx-nav-links { display: none; }
    .fx-hide-sm { display: none; }
    .fx-cat-grid { grid-template-columns: 1fr; }
    .fx-cat-row { grid-template-columns: 40px minmax(0, 1fr); padding: 16px; gap: 14px; }
    .fx-cat-stats { display: none; }
    .fx-topic-row { grid-template-columns: auto minmax(0, 1fr) auto; padding: 13px 16px; gap: 12px; }
    .fx-prow { grid-template-columns: minmax(0, 1fr) auto auto; padding: 12px 16px; gap: 12px; }
    .fx-ptable-head { display: none; }
    .fx-pgroup-head { flex-wrap: wrap; }
    .fx-pgroup-meta { margin-left: 0; flex: 1 1 100%; flex-wrap: wrap; gap: 8px; }
    .fx-topic-last { display: none; }
    .fx-foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
    .fx-post { grid-template-columns: 1fr; }
    .fx-post-author { flex-direction: row; border-right: none; border-bottom: 1px dashed var(--hairline); justify-content: flex-start; gap: 12px; padding: 14px 18px; }
    .fx-post-author-meta { align-items: flex-start; }
    .fx-post-act.subtle { margin-left: 0; }
    .fx-h1 { font-size: 25px; }
  }

/* Community redesign integration on the existing public header */
.community-nav-actions {
  margin-left: auto;
  gap: 10px;
}
.community-guidelines-link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
}
.fx-usermenu {
  position: relative;
}
.fx-usermenu > summary {
  list-style: none;
  cursor: pointer;
}
.fx-usermenu > summary::-webkit-details-marker {
  display: none;
}
.community-nav-avatar {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--fg);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}
.community-nav-handle {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.community-user-menu form {
  margin: 0;
}
.community-user-menu .fx-menu-item {
  text-decoration: none;
  cursor: pointer;
}
.top .community-nav-actions .fx-btn {
  text-decoration: none;
}
@media (max-width: 760px) {
  .community-guidelines-link,
  .community-nav-handle {
    display: none;
  }
  .community-nav-actions {
    margin-left: 0;
  }
}

/* Small glue classes used by the Razor implementation */
.fx-crumbs svg {
  flex: none;
  color: var(--fg-faint);
}
.fx-cat-wrap,
.fx-activity-wrap,
.fx-lib-featured {
  padding: 0;
}
.fx-search-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 16px;
  flex-wrap: wrap;
}
.fx-scopes {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.fx-rule-list {
  list-style: none;
  counter-reset: fx-rule;
  margin: 0;
  padding: 0;
}
.fx-rule-list li {
  counter-increment: fx-rule;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px dashed var(--hairline);
}
.fx-rule-list li:last-child {
  border-bottom: none;
}
.fx-rule-list li::before {
  content: counter(fx-rule);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--card-2);
  border: 1px solid var(--border);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
}
/* The number is the ::before pseudo (auto-placed in column 1). Pin BOTH the
   heading and the body text to column 2 so grid auto-placement can't drop the
    into the narrow 34px first column — which rendered it one word per
   line. */
.fx-rule-list strong {
  grid-column: 2;
  display: block;
  font-size: 14px;
  color: var(--fg);
  margin-bottom: 2px;
}
.fx-rule-list span {
  grid-column: 2;
  color: var(--fg-mute);
  font-size: 13.5px;
  line-height: 1.55;
}
.fx-inline-form {
  display: inline-flex;
  margin: 0;
}
.fx-post-actions.compact {
  align-items: center;
  flex-wrap: wrap;
}
.fx-post-actions.compact .fx-post-act {
  text-decoration: none;
}
.fx-report-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.fx-share-sec > .fx-field + .fx-field,
.fx-share-sec > .fx-field-row2,
.fx-share-sec > .fx-field-row3 {
  margin-top: 14px;
}
.fx-textarea {
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 12px 14px;
}
.fx-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.fx-editor .fx-textarea {
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 13px 14px;
}
.fx-field-row3 .fx-select {
  width: 100%;
  min-width: 0;
}
.fx-cmt .fx-empty-card {
  padding: 14px 16px;
  text-align: left;
}
.fx-rev-text.ugc,
.fx-cmt-text.ugc {
  max-width: none;
}
.fx-srcbadge,
.fx-chip {
  white-space: nowrap;
}

/* ============================================================
   Unified member page (Account Section handoff): shared header
   + underline tab bar. /community/u/{handle} and /community/account
   both render CommunityMemberPage; Settings is a self-only tab.
   ============================================================ */

/* Header: avatar | name+stats | right-aligned action. */
.fx-uhead {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
  margin-top: 8px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
.fx-uhead-avatar { flex: none; }
.fx-uhead .forum-avatar-lg { width: 76px; height: 76px; font-size: 30px; }
.fx-uhead-main { min-width: 0; }
.fx-uhead-titlerow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.fx-uhead-name { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
/* "This is you" pill — accent text on a soft accent fill (handoff §6). */
.fx-uhead-you {
  flex: none;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 999px;
  padding: 3px 10px;
}
/* Stats line: dot-separated, mono numerals. */
.fx-uhead-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 0;
  margin-top: 8px;
  font-size: 14px;
  color: var(--fg-mute);
}
.fx-uhead-stats > span + span::before {
  content: "·";
  margin: 0 10px;
  color: var(--fg-faint);
}
.fx-uhead-stats .fx-mono { font-family: var(--font-mono); font-weight: 600; color: var(--fg); }
.fx-uhead-joined { font-family: var(--font-mono); font-size: 12.5px; color: var(--fg-faint); }
.fx-uhead-action { justify-self: end; }

/* Underline tab bar. */
.fx-utabs {
  display: flex;
  gap: 26px;
  margin: 0 0 24px;
  border-bottom: 1px solid var(--border);
}
.fx-utab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 2px;
  margin-bottom: -1px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-mute);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.fx-utab:hover { color: var(--fg); }
.fx-utab.on { color: var(--fg); border-bottom-color: var(--accent); font-weight: 600; }
/* Count pill: muted by default; accent on the active tab (handoff §6). */
.fx-utab-ct {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-mute);
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
}
.fx-utab.on .fx-utab-ct {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.fx-utab-panel { display: block; }
/* Sign out sits in its own bordered footer at the bottom of Settings. */
.fx-utab-signout {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

@media (max-width: 720px) {
  .fx-uhead {
    grid-template-columns: auto 1fr;
    gap: 16px;
  }
  .fx-uhead-action {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 4px;
  }
  .fx-utabs { gap: 18px; overflow-x: auto; }
}

/* ============================================================
   Community sub-nav — secondary bar under the main nav, shown only on the
   Community + Profiles surface (rendered by SiteNav). Shares the marketing
   `.wrap` so it lines up with the page content frame. Lives OUTSIDE .fx-root,
   so it uses the global tokens (--brand, not the fx-scoped --accent).
   ============================================================ */
.community-subnav {
  border-bottom: 1px solid var(--border);
  background: var(--card);
}
.community-subnav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 46px;
}
.community-subnav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.community-subnav-links::-webkit-scrollbar { display: none; }
.community-subnav-link {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: 13.5px;
  color: var(--fg-mute);
  text-decoration: none;
  padding: 13px 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s;
}
.community-subnav-link:hover { color: var(--fg); }
.community-subnav-link.active {
  color: var(--fg);
  font-weight: 600;
  border-bottom-color: var(--brand);
}
.community-subnav-auth {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}
.community-nav-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.community-nav-handle {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.community-language-note {
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--brand) 10%, var(--bg));
  color: var(--fg);
}
.community-language-note .wrap {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-top: 9px;
  padding-bottom: 9px;
  font-size: 13.5px;
  line-height: 1.45;
}
.community-language-note strong {
  flex: 0 0 auto;
  color: var(--brand);
}

@media (max-width: 640px) {
  .community-subnav .wrap { gap: 10px; }
  .community-subnav-links { gap: 16px; }
  .community-nav-handle { display: none; }
  .community-language-note .wrap {
    display: block;
    font-size: 13px;
  }
  .community-language-note strong {
    display: block;
    margin-bottom: 2px;
  }
}

/* ============================================================
   1.1 marketing pages (/hardware, /force-model, /accessibility,
   /why-force-feedback). Built on the existing landing-* classes; these
   are the few additions they need.
   ============================================================ */

/* Centered section header (eyebrow + h2 + subhead). */
.section-head { max-width: 720px; margin: 0 auto 38px; text-align: center; }
.section-head .eyebrow { justify-content: center; }
.section-head h2 { margin-bottom: 10px; }
.section-head .subhead { margin: 0 auto; }

/* Plain bulleted lists inside landing cards. */
.hw-list { list-style: none; margin: 4px 0 0; padding: 0; }
.hw-list li {
  position: relative; padding: 6px 0 6px 18px;
  font-size: 14.5px; color: var(--text-dim); line-height: 1.5;
}
.hw-list li::before {
  content: ""; position: absolute; left: 0; top: 13px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand);
}
.hw-list code {
  font-family: var(--font-mono); font-size: .85em;
  color: var(--text-primary); background: var(--card-2);
  border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px;
}

/* "new" badge (matches .pill-beta sizing, brand-tinted). */
.pill-new {
  display: inline-block; margin-left: 8px; padding: 2px 7px;
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  color: var(--brand); border: 1px solid color-mix(in srgb, var(--brand) 38%, transparent);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; border-radius: 999px;
  vertical-align: 2px;
}

/* Support matrix table (/hardware). */
.hw-matrix-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.hw-matrix { width: 100%; border-collapse: collapse; min-width: 620px; }
.hw-matrix th, .hw-matrix td {
  padding: 14px 18px; text-align: left; font-size: 14.5px;
  border-bottom: 1px solid var(--border);
}
.hw-matrix thead th {
  font-size: 12.5px; letter-spacing: .03em; text-transform: uppercase;
  color: var(--text-dim); font-weight: 600; background: var(--card-2);
}
.hw-matrix tbody th { font-weight: 600; color: var(--text-primary); }
.hw-matrix tbody tr:last-child td, .hw-matrix tbody tr:last-child th { border-bottom: none; }
.hw-matrix td.yes { color: var(--text-primary); font-weight: 500; }
.hw-matrix td.no { color: var(--text-faint, var(--text-dim)); }
.hw-note { color: var(--text-dim); font-weight: 400; font-size: 12.5px; }
.hw-fineprint { margin-top: 16px; font-size: 13.5px; color: var(--text-dim); line-height: 1.6; }

/* Accessibility FAQ (narrow, simple). */
.landing-faq-narrow { max-width: 760px; }
.acc-faq { display: flex; flex-direction: column; gap: 18px; }
.acc-faq-item h3 { font-size: 16px; margin-bottom: 6px; color: var(--text-primary); }
.acc-faq-item p { font-size: 14.5px; color: var(--text-dim); line-height: 1.6; }

/* Clickable pillar cards on Home (whole card is an ). */
.landing-card-link { display: flex; flex-direction: column; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.landing-card-link:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.14); }
.landing-card-link .landing-card-go { margin-top: auto; padding-top: 14px; color: var(--brand); font-weight: 600; font-size: 14px; }

@media (max-width: 700px) {
  .section-head { margin-bottom: 28px; }
}

/* Testimonials (Home) — approved beta-tester quotes. */
.tcard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tcard {
  margin: 0; padding: 24px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); display: flex; flex-direction: column;
}
.tcard blockquote { margin: 0 0 16px; font-size: 15.5px; line-height: 1.55; color: var(--text-primary); }
.tcard blockquote::before { content: "\201C"; }
.tcard blockquote::after { content: "\201D"; }
.tcard figcaption { margin-top: auto; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.tcard-ctx { display: block; font-weight: 400; font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
/* Pro-waitlist email capture inside the muted pricing card. */
.pricing-pro-signup { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
@media (max-width: 900px) { .tcard-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tcard-grid { grid-template-columns: 1fr; } }

/* Give the CTA breathing room below a lede/subhead (was hugging the text). */
.subhead + .cta-row,
.lede + .cta-row { margin-top: 22px; }

/* Four-up card row (Home pillars, "what you've been missing") — one row on
   desktop, then 2-up / 1-up as it narrows. */
.landing-card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .landing-card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .landing-card-grid.cols-4 { grid-template-columns: 1fr; } }

/* A single screenshot in a shot grid shouldn't span full width and look
   stranded — cap and centre it as a framed figure. */
.landing-shot-grid:has(> :only-child) { max-width: 920px; margin-left: auto; margin-right: auto; }

/* Self-hosted demo video section (MOZA AB9). Native