/* ═══════════════════════════════════════════════════════════════════
   site.css — the one skin for every page outside the editor.

   Landing page, article and calculator hubs, the articles and
   calculators themselves, privacy and terms. Before 2026-09 each of
   those carried its own copy of the tokens, nav, buttons and footer,
   and a 973-line light-mode.css re-coloured the copies one selector at
   a time. They drifted: the landing page was rewritten flat while the
   sub-pages kept the glassmorphic look. Now there is one file, and the
   light theme is one block of token overrides.

   Nothing in here blurs, glows, lifts on hover or uses gradient text.
   That was deliberate on the landing page rewrite (it read as template
   output to the engineers these pages are for) and it holds here.

   The editor (app.html) does NOT use this file; it has design-tokens.css
   and style.css. The two share the copper accent and the fonts, nothing
   else, on purpose: the app is a tool and the site is prose.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Icon font ───
   Self-hosted so the theme-toggle glyph never flashes a missing-glyph box
   while a font CDN answers. Only a handful of glyphs are used site-wide. */
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url('/fonts/material-symbols.woff2') format('woff2');
}

/* `.ms` is the short alias the calculator pages have always used. */
.material-symbols-outlined,
.ms {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

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

/* ─── Tokens ───
   Dark is the default because the editor is dark and its screenshots sit
   on these pages; the copper accent is the app's own. */
:root {
    --bg: #0B0E14;
    --bg-2: #10131A;
    --surface: #151920;
    --field-bg: #0E1117;
    --line: rgba(255, 255, 255, 0.10);
    --line-strong: rgba(255, 255, 255, 0.18);
    --text: #E6E7EC;
    --text-2: #B4B7BF;
    --text-3: #858892;
    --accent: #FFB77B;
    --accent-hover: #FFC89D;
    --accent-ink: #2B1600;
    --accent-soft: rgba(255, 183, 123, 0.10);
    /* Pass / marginal / fail, used by the calculators and the article
       comparison cards. Muted enough to sit on the dark ground. */
    --ok: #22C55E;
    --warn: #F59E0B;
    --bad: #EF4444;
    --ok-soft: rgba(34, 197, 94, 0.10);
    --warn-soft: rgba(245, 158, 11, 0.10);
    --bad-soft: rgba(239, 68, 68, 0.10);
    --radius: 8px;
    --radius-lg: 12px;
    --max: 1120px;
    --pad: clamp(20px, 5vw, 48px);
    --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
    --font-mono: ui-monospace, 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;
}

/* The light accent is blue rather than copper: copper on white does not
   pass contrast as button text, and blue is what these pages used before. */
[data-theme="light"] {
    --bg: #FBFBFA;
    --bg-2: #F3F4F2;
    --surface: #FFFFFF;
    --field-bg: #FFFFFF;
    --line: rgba(17, 24, 39, 0.10);
    --line-strong: rgba(17, 24, 39, 0.20);
    --text: #15181E;
    --text-2: #3F4550;
    --text-3: #6B7280;
    --accent: #2563EB;
    --accent-hover: #1D4ED8;
    --accent-ink: #FFFFFF;
    --accent-soft: rgba(37, 99, 235, 0.08);
    --ok: #15803D;
    --warn: #B45309;
    --bad: #B91C1C;
    --ok-soft: rgba(21, 128, 61, 0.08);
    --warn-soft: rgba(180, 83, 9, 0.08);
    --bad-soft: rgba(185, 28, 28, 0.08);
}

/* ─── Base ─── */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

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

/* body is a flex column, and a flex item's minimum width defaults to its
   content's intrinsic width. Without this a wide screenshot or table
   would force the whole page wider than a phone screen. */
main,
header,
footer {
    min-width: 0;
}

.wrap {
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--pad);
}

/* ─── Navigation ───
   Solid background rather than a blurred one: blur is the single strongest
   "template" tell, and a solid bar reads fine over a scrolling page.
   theme-toggle.js reads #btn-theme-toggle, #nav-toggle-btn and .nav-links;
   keep those if you restyle. */
.nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 60px;
}

.nav-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.ea-logo-img {
    height: 28px;
    width: auto;
}

/* Two logo files, one per theme; the theme attribute picks which shows. */
.ea-logo-dark { display: block; }
.ea-logo-light { display: none; }
[data-theme="light"] .ea-logo-light { display: block; }
[data-theme="light"] .ea-logo-dark { display: none; }

.nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
    list-style: none;
}

.nav-links a {
    color: var(--text-2);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
    color: var(--text);
}

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

.theme-toggle-btn,
.nav-toggle {
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle-btn:hover,
.nav-toggle:hover {
    color: var(--text);
    border-color: var(--line-strong);
}

.theme-toggle-btn .material-symbols-outlined,
.nav-toggle .material-symbols-outlined {
    font-size: 18px;
}

.nav-toggle {
    display: none;
}

/* ─── Buttons ───
   Only colour changes on hover. Buttons that lift or grow a shadow were
   part of what the rewrite set out to remove. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    border-radius: var(--radius);
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}

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

.btn-secondary {
    background: transparent;
    border-color: var(--line-strong);
    color: var(--text);
}

.btn-secondary:hover {
    background: var(--surface);
}

.btn-lg {
    height: 48px;
    padding: 0 24px;
    font-size: 15px;
}

.btn-sm {
    height: 34px;
    padding: 0 14px;
    font-size: 13px;
}

.btn .material-symbols-outlined {
    font-size: 18px;
}

/* ─── Page hero (sub-pages) ───
   Left-aligned title block for an article, a calculator or a hub. The
   crumb above it is the way back; there is no separate "back" button. */
.page-hero {
    padding: clamp(40px, 6vw, 72px) 0 clamp(28px, 4vw, 44px);
}

.crumb {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-3);
    margin-bottom: 18px;
}

.crumb a {
    color: var(--text-3);
    text-decoration: none;
}

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

.page-hero h1 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(32px, 4.4vw, 52px);
    line-height: 1.08;
    letter-spacing: -0.012em;
    max-width: 820px;
    margin-bottom: 16px;
}

.page-hero .lede {
    font-size: clamp(16px, 1.5vw, 18px);
    color: var(--text-2);
    max-width: 720px;
}

.page-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 18px;
    font-size: 13px;
    color: var(--text-3);
}

.page-meta a {
    color: var(--text-2);
    text-decoration: none;
}

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

/* ─── Sections ─── */
.section {
    padding: clamp(64px, 8vw, 104px) 0;
}

.section-tight {
    padding: clamp(32px, 4vw, 48px) 0 clamp(64px, 8vw, 96px);
}

.section-band {
    background: var(--bg-2);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.section-head {
    max-width: 700px;
    margin-bottom: 48px;
}

.section-head h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(28px, 3.4vw, 40px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
}

.section-head p {
    color: var(--text-2);
    font-size: 17px;
}

/* ─── Screenshot frame ───
   The editor is dark, so the frame keeps a dark ground in both themes and
   the light theme adds a soft shadow so the block does not look pasted on. */
.shot {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #0B0E14;
}

[data-theme="light"] .shot {
    box-shadow: 0 8px 32px rgba(17, 24, 39, 0.08);
}

.shot-caption {
    font-size: 13px;
    color: var(--text-3);
    text-align: center;
    max-width: 640px;
    margin: 14px auto 0;
}

/* ─── Ruled lists (articles, calculators) ───
   A list with hairline rules, not a grid of icon cards. Used on the landing
   page and on both hub pages. */
.res-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
}

.res-col h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
}

.res-list {
    list-style: none;
}

.res-list a,
.res-list .res-static {
    display: block;
    padding: 16px 0;
    border-top: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
}

.res-list li:last-child a,
.res-list li:last-child .res-static {
    border-bottom: 1px solid var(--line);
}

.res-title {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.res-list a .res-title::after {
    content: '→';
    color: var(--text-3);
    font-weight: 400;
}

.res-list a:hover .res-title {
    color: var(--accent);
}

.res-desc {
    font-size: 14px;
    color: var(--text-2);
}

/* An entry that is not a link: a guide that is planned but not written.
   Muted so nobody clicks expecting a page. */
.res-static .res-title {
    color: var(--text-3);
    font-weight: 500;
}

.res-static .res-desc {
    color: var(--text-3);
}

.res-more {
    display: inline-block;
    margin-top: 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
}

.res-more:hover {
    text-decoration: underline;
}

/* Wider entries for a hub page, where the list is the whole page. */
.res-list.wide .res-title {
    font-size: 18px;
}

.res-list.wide a,
.res-list.wide .res-static {
    padding: 22px 0;
}

.res-list.wide .res-desc {
    font-size: 15px;
    max-width: 720px;
}

/* ─── Prose (article bodies) ─── */
.prose {
    font-size: 17px;
    line-height: 1.7;
    color: var(--text-2);
    max-width: 760px;
}

.prose p {
    margin-bottom: 22px;
}

.prose strong {
    color: var(--text);
    font-weight: 700;
}

.prose a {
    color: var(--accent);
}

.prose h2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 48px 0 16px;
}

.prose h3 {
    font-size: 19px;
    font-weight: 700;
    color: var(--text);
    margin: 32px 0 12px;
}

.prose ul,
.prose ol {
    padding-left: 24px;
    margin-bottom: 22px;
}

.prose li {
    margin-bottom: 8px;
}

.prose li::marker {
    color: var(--text-3);
}

.prose blockquote,
.prose .callout {
    border-left: 2px solid var(--accent);
    padding: 4px 0 4px 20px;
    margin: 32px 0;
    color: var(--text);
    font-size: 17px;
}

.prose .callout p:last-child {
    margin-bottom: 0;
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin: 0;
}

.prose th,
.prose td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.prose th {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.prose code {
    font-family: var(--font-mono);
    font-size: 0.92em;
}

/* Wide tables scroll inside their own box; the page never scrolls sideways. */
.table-scroll {
    overflow-x: auto;
    margin: 28px 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

.table-scroll table {
    min-width: 560px;
}

.table-scroll tr:last-child td {
    border-bottom: 0;
}

/* ─── Small print and notices ─── */
.fine-print {
    font-size: 12px;
    color: var(--text-3);
    text-align: center;
    max-width: 720px;
    margin: 40px auto 0;
    padding: 0 var(--pad);
}

.notice {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    padding: 24px 28px;
    max-width: 720px;
}

.notice p {
    color: var(--text-2);
}

.notice p + p {
    margin-top: 10px;
}

.notice .actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 20px;
}

/* ─── Footer ─── */
.footer {
    border-top: 1px solid var(--line);
    padding: 32px 0;
    margin-top: auto;
}

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.footer-brand {
    display: flex;
    align-items: center;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 13px;
    color: var(--text-3);
}

.footer-links a {
    color: var(--text-3);
    text-decoration: none;
}

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

/* ─── Responsive ─── */
@media (max-width: 900px) {
    .res-cols {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

/* The mobile menu is a plain column under the bar. theme-toggle.js flips
   its inline display between flex and none, so the closed state has to be
   the stylesheet default. */
@media (max-width: 820px) {
    .nav-links {
        display: none;
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--bg);
        border-bottom: 1px solid var(--line);
        padding: 8px var(--pad) 16px;
    }

    .nav-links a {
        display: block;
        padding: 12px 0;
        font-size: 15px;
    }

    .nav-toggle {
        display: flex;
    }
}

@media (max-width: 640px) {
    .nav-launch {
        display: none;
    }

    .footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}