/* SEO pages shared base — chrome + universals.
   Lifted from the 33 inline <style> blocks audited 2026-05-25.
   Page-specific selectors (.tldr, .comparison, .matrix, .callout,
   .steps, .feature-card, .use-case-block, .post-list, etc.) stay
   inline per page in Phase 1; lift to additional shared files if
   warranted in Phase 2. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg: #ffffff;
    --text: #000000;
    --text-muted: #555555;
    --border: #dedede;
    --accent-bg: #f6f6f6;
    --link: #111111;
}

/* Dark tokens. The inline pre-paint script in each page's <head> (verbatim from
   App.razor, covered by the same CSP hash) writes data-bs-theme from
   localStorage["theme"] so the static SEO pages honor the in-app light/dark
   toggle. "system"/unset leaves the attribute off, so the media query below
   decides from the OS. An explicit in-app choice always wins over the OS:
   - OS dark + not forced light  -> media query applies dark
   - explicit dark (any OS)      -> :root[data-bs-theme="dark"] applies dark
   - explicit light (any OS)     -> neither matches, base :root light wins */
@media (prefers-color-scheme: dark) {
    :root:not([data-bs-theme="light"]) {
        --bg: #171717;
        --text: #ffffff;
        --text-muted: #aaaaaa;
        --border: #393939;
        --accent-bg: #212121;
        --link: #f0f0f0;
    }
}

:root[data-bs-theme="dark"] {
    --bg: #171717;
    --text: #ffffff;
    --text-muted: #aaaaaa;
    --border: #393939;
    --accent-bg: #212121;
    --link: #f0f0f0;
}

body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); line-height: 1.65; font-size: 1rem; }
a { color: var(--link); }
/* Body anchors get an underline-on-hover (Linear Docs pattern, [from memory] —
   Linear Docs WebFetch has failed three sessions, citation remains unverified).
   Excluded: .breadcrumb a and footer a, both of which already define their own
   muted hover styling above/below. */
main a:hover { text-decoration: underline; }

.site-header { border-bottom: 1px solid var(--border); padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.site-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-family: 'Outfit', system-ui, -apple-system, sans-serif; font-weight: 600; font-size: 1.1rem; }
.site-logo svg { width: 28px; height: 28px; }
.header-cta { display: inline-block; padding: 7px 18px; border: 1px solid var(--text); border-radius: 6px; text-decoration: none; font-size: .875rem; font-weight: 500; color: var(--text); white-space: nowrap; }
.header-cta:hover { background: var(--accent-bg); }
.header-cta:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
a:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 2px; }

main { max-width: 760px; margin: 0 auto; padding: 48px 24px 80px; }

.breadcrumb { font-size: .8rem; color: var(--text-muted); margin-bottom: 28px; }
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* h1 switched to Outfit for brand-coherence with the app's wordmark + home hero.
   Outfit ships only 400/500/600 — bumping h1 from Inter 700 down to Outfit 600
   avoids browser font-synthesis. Slight visual lightening expected at the 28-40px
   clamp range; brand-voice match outweighs the half-step weight loss. */
h1 { font-family: 'Outfit', system-ui, -apple-system, sans-serif; font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 600; line-height: 1.2; margin-bottom: 8px; }
h2 { font-size: 1.3rem; font-weight: 600; margin: 32px 0 12px; }
h3 { font-size: 1rem; font-weight: 600; margin: 24px 0 8px; }
p { margin-bottom: 14px; }
ul, ol { margin: 0 0 14px 20px; }
li { margin-bottom: 8px; }
/* Bulleted-list inline emphasis — strong inside li gets semibold weight to
   match Linear Docs grammar ([from memory], unverified — WebFetch failed
   three sessions). At Inter 400 body, `font-weight: 600` is one tier up,
   readable without being shouty. */
li strong { font-weight: 600; }
code { font-family: monospace; font-size: .9em; background: var(--accent-bg); padding: 1px 5px; border-radius: 3px; }

footer { border-top: 1px solid var(--border); padding: 20px 24px; font-size: .8rem; color: var(--text-muted); text-align: center; display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
footer a { color: var(--text-muted); text-decoration: none; }
footer a:hover { text-decoration: underline; }

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

/* Inline icon used in transfer-step copy on per-platform SEO pages.
   Renders an SVG glyph inline at the surrounding font size (1em),
   slightly raised to align with cap height, inheriting text color.
   Pattern: <svg class="seo-icon-inline" viewBox="0 0 448 512" aria-hidden="true"><path d="..."/></svg>.
   The visible body shows the icon; JSON-LD HowToStep.text stays verbal
   ("the paperclip icon") because structured data must be plain text. */
.seo-icon-inline { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; fill: currentColor; }
