/* ── Sum & Carry — shared styles for the static pages (privacy, terms, 404).
   Token values are kept in step with the app in index.html. ── */

:root,
:root[data-theme="dark"] {
    --bg: #0f1115;
    --surface: #191c24;
    --surface-raised: #1e222c;
    --hairline: rgba(255, 255, 255, 0.09);
    --text: #f0f2f5;
    --text-secondary: #a8b0bd;
    --text-muted: #838c9c;
    --accent: #60a5fa;
    --accent-subtle: rgba(96, 165, 250, 0.14);
    --btn-bg: #60a5fa;
    --btn-fg: #0b0d12;
    --btn-bg-hover: #93c5fd;
    --result: #34d399;
    --negative: #fca5a5;
}

:root[data-theme="light"] {
    --bg: #f4f6f9;
    --surface: #ffffff;
    --surface-raised: #eef1f6;
    --hairline: rgba(15, 23, 42, 0.12);
    --text: #111520;
    --text-secondary: #4a5261;
    --text-muted: #5f6878;
    --accent: #1d4ed8;
    --accent-subtle: rgba(29, 78, 216, 0.10);
    --btn-bg: #1d4ed8;
    --btn-fg: #ffffff;
    --btn-bg-hover: #1e40af;
    --result: #047857;
    --negative: #b91c1c;
}

:root {
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --radius: 14px;
    --radius-pill: 100px;
    --transition: 0.2s ease;
}

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

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

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── Header ── */
header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.5rem;
    max-width: 860px;
    width: 100%;
    margin: 0 auto;
}

.logo {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--text);
    text-decoration: none;
    display: flex;
    align-items: baseline;
    gap: 0.28em;
}
.logo .op { color: var(--accent); font-weight: 600; font-size: 0.95em; }
.logo .eq { color: var(--text-muted); font-weight: 600; font-size: 0.95em; }
.logo .caret {
    align-self: center;
    width: 0.42em;
    height: 0.9em;
    border-radius: 2px;
    background: var(--result);
}

.header-actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition);
}
.icon-btn:hover { background: var(--accent-subtle); color: var(--accent); }
.icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
:root[data-theme="dark"] .i-moon { display: none; }
:root[data-theme="light"] .i-sun { display: none; }

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.9rem;
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition);
}
.back-link:hover { background: var(--accent-subtle); color: var(--accent); }

/* ── Page body ── */
main {
    flex: 1;
    max-width: 860px;
    width: 100%;
    margin: 0 auto;
    padding: 0.5rem 1.5rem 3rem;
}

.page-head { margin-bottom: 1.75rem; }
.page-head h1 {
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-bottom: 0.6rem;
}
.page-head .lede { font-size: 1rem; color: var(--text-secondary); max-width: 60ch; }
.page-head .updated {
    display: inline-block;
    margin-top: 0.9rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.prose {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.75rem 2rem 2rem;
}
.prose h2 {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 1.9rem 0 0.6rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--hairline);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.prose h3 { font-size: 0.9rem; font-weight: 700; color: var(--text); margin: 1.2rem 0 0.4rem; }
.prose p, .prose li { font-size: 0.9rem; color: var(--text-secondary); }
.prose p + p { margin-top: 0.75rem; }
.prose ul { margin: 0.6rem 0 0 1.1rem; display: flex; flex-direction: column; gap: 0.45rem; }
.prose a { color: var(--accent); }
.prose strong { color: var(--text); }

.keynote {
    background: var(--accent-subtle);
    border-radius: var(--radius);
    padding: 1rem 1.15rem;
    margin: 1.1rem 0;
}
.keynote p { color: var(--text); font-weight: 500; }

.todo {
    background: var(--surface-raised);
    border-radius: 4px;
    padding: 0.05rem 0.35rem;
    font-weight: 600;
    color: var(--text);
}

/* ══ Landing pages ══════════════════════════════════════════
   Everything below is used by the keyword landing pages. They share
   this stylesheet with privacy/terms so there is one place to edit. */

:root { --font-mono: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace; }

/* The link into the tool. Repeated near the top and again after the
   worked examples — that second one is the click that converts. */
.cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 1.35rem;
    margin-bottom: 1.75rem;
    border-radius: var(--radius-pill);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: all var(--transition);
}
.cta:hover { background: var(--btn-bg-hover); }
.prose .cta { color: var(--btn-fg); margin: 1.75rem 0 0.5rem; }

.prose code {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    background: var(--accent-subtle);
    color: var(--accent);
    padding: 0.12rem 0.4rem;
    border-radius: 5px;
    white-space: nowrap;
}

/* A worked example, rendered as real markup rather than a screenshot —
   it is the part of the page a search engine can actually read. */
.worked-example {
    background: var(--surface-raised);
    border-radius: var(--radius);
    padding: 1.15rem 1.3rem;
    margin: 1.25rem 0;
    overflow-x: auto;
}
.worked-example table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.worked-example caption {
    text-align: left;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    padding-bottom: 0.7rem;
}
.worked-example td { padding: 0.4rem 0; color: var(--result); font-weight: 600; }
.worked-example td:first-child { width: 100%; color: var(--text-secondary); font-weight: 400; }
.worked-example .op {
    padding: 0 0.7rem;
    text-align: center;
    font-family: var(--font-mono);
    opacity: 0.85;
}
.worked-example .num {
    text-align: right;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}
.worked-example tr.neg td:not(:first-child) { color: var(--negative); }
.worked-example tr.derived td:not(:first-child) { color: var(--text); }
.worked-example tr.derived .op { color: var(--accent); opacity: 1; }
.worked-example tfoot td {
    padding-top: 0.7rem;
    border-top: 1px solid var(--hairline);
    color: var(--text);
    font-weight: 800;
}
.worked-example .note {
    margin-top: 0.9rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.55;
}

/* ── FAQ. <details> keeps the answers in the markup for crawlers
      while the page stays scannable. ── */
.faq { margin-top: 0.5rem; }
.faq details { border-top: 1px solid var(--hairline); }
.faq details:last-child { border-bottom: 1px solid var(--hairline); }
.faq summary {
    cursor: pointer;
    padding: 0.85rem 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    transition: color var(--transition);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary::after {
    content: '+';
    font-family: var(--font-mono);
    font-size: 1rem;
    color: var(--text-muted);
    flex-shrink: 0;
}
.faq details[open] summary::after { content: '−'; }
.faq details p { padding: 0 0 1rem; }

.related { margin-top: 0.6rem; }

/* On a narrow screen a three-column worked example pushes the numbers off
   the right edge, so the reader sees the input lines and none of the
   results. Stack each row instead: the typed line, then its value beneath. */
@media (max-width: 620px) {
    .worked-example { overflow-x: visible; padding: 1rem 1.1rem; }
    .worked-example table,
    .worked-example tbody,
    .worked-example tfoot { display: block; width: 100%; }
    .worked-example caption { display: block; }

    .worked-example tr {
        display: grid;
        grid-template-columns: 1fr auto auto;
        column-gap: 0.55rem;
        padding: 0.6rem 0;
        border-bottom: 1px solid var(--hairline);
    }
    .worked-example tr:last-child { border-bottom: none; }
    .worked-example td { display: block; padding: 0; }
    .worked-example td:first-child { grid-column: 1 / -1; margin-bottom: 0.4rem; }
    .worked-example .op { grid-column: 2; text-align: right; padding: 0; }
    .worked-example .num { grid-column: 3; text-align: right; }
    .worked-example code { white-space: normal; overflow-wrap: anywhere; }

    /* The total keeps its label and figure on one line. */
    .worked-example tfoot tr {
        grid-template-columns: 1fr auto;
        border-top: 1px solid var(--hairline);
        border-bottom: none;
        margin-top: 0.2rem;
    }
    .worked-example tfoot td:first-child { grid-column: 1; margin-bottom: 0; }
    .worked-example tfoot td:nth-child(2) { display: none; }
    .worked-example tfoot .num { grid-column: 2; }
}

/* ── Ad slot ──
   Sits under the first CTA: past the headline and the button, so the page
   has already answered the visitor's question before anything is sold to
   them, and above the worked examples, so it is seen without interrupting
   one. ads.js fills it and removes [hidden]; while there is no slot id the
   element stays hidden and reserves no space, so nothing on the page moves
   when ads eventually start serving. */
.ad-slot { margin-bottom: 1.75rem; }
.ad-slot[hidden] { display: none; }

/* ── Footer ── */
footer {
    padding: 2rem 1.5rem;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: auto;
    line-height: 1.8;
}
footer a { color: var(--text-secondary); text-decoration: none; }
footer a:hover { color: var(--accent); text-decoration: underline; }
.footer-line { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem; }
.footer-line .sep { color: var(--text-muted); opacity: 0.55; }

@media (max-width: 600px) {
    header { padding: 0.9rem 1rem; }
    main { padding: 0.5rem 1rem 2rem; }
    .page-head h1 { font-size: 1.5rem; }
    .prose { padding: 1.25rem 1.15rem 1.5rem; }
}