/* DynamicsOfWealth.com: the page shell and the reading pages.
   The calculators and charts are styled in tools.css, which uses the tokens defined here.

   Look: clean and saturated. The masthead is always the black band the logo was drawn on; the page under it is
   white by day and near-black by night (it follows the visitor's system setting). The neutrals carry no hue of
   their own, the accent is one electric blue, and amber is the second color. No tints: every colored thing is
   a full-strength color on a neutral ground (the owner's rule, 2026-11-14: "no pastels", "professional").
   Every color used as text is checked at 4.5:1 or better against paper, surface and sunken in both themes. */

/* ---------- Tokens ---------- */
:root {
    color-scheme: light dark;

    --paper:        #f5f6f8;    /* page */
    --surface:      #ffffff;    /* cards, the chart */
    --sunken:       #eef0f4;    /* wells, table stripes */
    --ink:          #0f172a;    /* text */
    --muted:        #5b6475;    /* secondary text */
    --rule:         #e1e4ea;    /* hairlines */
    --accent:       #3567ad;    /* steel blue, one step deeper than the chart bars: links, buttons, numbers you can drag */
    --accent-ink:   #ffffff;    /* text on the accent */
    --gold:         #a8500a;    /* amber, deep enough to read as text: headings' ornament */
    --danger:       #cf2020;
    --shadow:       0 1px 2px rgb(15 23 42 / 6%), 0 6px 24px rgb(15 23 42 / 7%);

    --band:         #000000;    /* masthead and footer: the logo's own black */
    --band-ink:     #ece8da;
    --band-muted:   #a9a595;
    --band-gold:    #d9b84a;

    --serif:        "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --sans:         system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --radius:       10px;
    --wrap:         1040px;
    --gutter:       clamp(16px, 4vw, 32px);
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper:        #090a0f;
        --surface:      #12141c;
        --sunken:       #1c1f2b;
        --ink:          #eef0f6;
        --muted:        #9aa3b2;
        --rule:         #272b38;
        --accent:       #8fb6ee;
        --accent-ink:   #06121f;
        --gold:         #f59e0b;
        --danger:       #f25555;
        --shadow:       0 1px 2px rgb(0 0 0 / 40%), 0 6px 24px rgb(0 0 0 / 35%);
    }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    color: var(--ink);
    font: 400 1rem/1.6 var(--sans);
    font-variant-numeric: lining-nums tabular-nums;
}

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

a { color: var(--accent); text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 2px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; text-wrap: balance; }

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

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

.skip-link {
    position: absolute; left: 8px; top: -60px; z-index: 100;
    padding: 10px 14px; border-radius: 6px;
    background: var(--accent); color: var(--accent-ink); text-decoration: none;
}
.skip-link:focus { top: 8px; }

/* ---------- Masthead ---------- */
.masthead {
    background: var(--band);
    color: var(--band-ink);
    border-bottom: 4px double var(--band-gold);     /* the engraver's double rule */
}

.masthead__brand {
    display: flex; align-items: center; justify-content: space-between; gap: 16px 32px;
    padding-block: 10px 2px;
}

.brand { display: block; flex: 0 1 430px; min-width: 0; }
.brand img { display: block; width: 100%; }

.masthead__tagline {
    flex: 0 1 300px; margin: 0;
    font: italic 400 1rem/1.4 var(--serif);
    color: var(--band-muted);
    text-align: right;
}

.nav__list {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 6px;
    margin-block: 0; padding-block: 4px 8px; list-style: none;
}

.nav__list a,
.share > summary {
    display: block; padding: 10px 12px;
    font: 600 .8rem/1.2 var(--serif);
    letter-spacing: .14em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
    color: var(--band-ink);
    border-bottom: 2px solid transparent;
    cursor: pointer;
}
.nav__list a:hover,
.share > summary:hover { color: var(--band-gold); }
.nav__list a[aria-current="page"] { color: var(--band-gold); border-bottom-color: var(--band-gold); }
.masthead :focus-visible { outline-color: var(--band-gold); }

.share { position: relative; }
.share > summary { list-style: none; }
.share > summary::-webkit-details-marker { display: none; }
.share > summary::after { content: " \25BE"; }
.share__menu {
    position: absolute; right: 0; top: 100%; z-index: 20;
    display: grid; min-width: 170px; padding: 6px;
    background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.share__menu a,
.share__menu button {
    display: block; width: 100%; padding: 10px 12px;
    font: 500 .95rem/1.2 var(--sans); letter-spacing: 0; text-transform: none; text-align: left;
    color: var(--ink); background: none; border: 0; border-radius: 6px; cursor: pointer;
}
.share__menu a:hover,
.share__menu button:hover { background: var(--sunken); color: var(--ink); }
.share__menu :focus-visible { outline-color: var(--accent); }

@media (max-width: 720px) {
    .masthead__brand { justify-content: center; padding-top: 8px; }
    .brand { flex-basis: 320px; }
    .masthead__tagline { display: none; }
    .nav__list a, .share > summary { padding: 9px 8px; font-size: .72rem; letter-spacing: .1em; }
    .share__menu { right: auto; left: 50%; transform: translateX(-50%); }
}

/* ---------- Main ---------- */
.main { flex: 1 0 auto; padding-block: clamp(20px, 4vw, 40px) clamp(32px, 6vw, 64px); }

.page-title { margin: 0 0 .6em; font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.5rem); }

/* On a calculator the visitor's own headline is the big one, so the page's H1 sits above it as an eyebrow. */
.eyebrow,
.has-headline .page-title {
    margin: 0 0 .9em;
    font: 600 .78rem/1.3 var(--sans);
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--gold);
}
.is-tool .page-title { text-align: center; margin-bottom: .4em; }

.lede { font: 400 1.2rem/1.55 var(--serif); color: var(--ink); }
.notice {
    padding: 12px 16px; border: 1px solid var(--rule); border-left: 4px solid var(--gold);
    border-radius: 6px; background: var(--surface);
}

.button {
    display: inline-block; padding: 10px 18px;
    font: 600 1rem/1.2 var(--sans); text-decoration: none;
    color: var(--accent-ink); background: var(--accent);
    border: 0; border-radius: 999px; cursor: pointer;
}
.button:hover { filter: brightness(1.08); }

/* ---------- Reading pages ---------- */
.prose { max-width: 68ch; }
.prose--essay { margin-inline: auto; font-size: 1.06rem; }
.main:has(> .prose--essay) > .page-title { max-width: 26.5em; margin-inline: auto; }
.prose h2 { margin: 2em 0 .5em; font-size: 1.45rem; }
.prose h3 { margin: 1.6em 0 .4em; font-size: 1.15rem; }
.prose p { margin: 0 0 1.1em; }
.prose--essay h2::before {
    content: ""; display: block; width: 56px; margin-bottom: .7em;
    border-top: 3px double var(--gold);
}
.prose--legal { font-size: .95rem; color: var(--muted); }
.prose--legal h2, .prose--legal h3, .prose--legal strong { color: var(--ink); }

.callout {
    margin: 2.5em 0 0; padding: clamp(18px, 4vw, 28px);
    background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.callout__figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 28px; }
.callout__figures p { color: var(--muted); font-size: .95rem; }
.figure { display: block; font: 600 clamp(1.5rem, 1rem + 2.4vw, 2.2rem)/1.15 var(--serif); color: var(--ink); }
.figure--accent { color: var(--accent); }
.callout .button { margin-left: .4em; }

.cards {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px;
    margin: 0 0 2.5em; padding: 0; list-style: none;
}
.card { display: flex; }
.card__link {
    display: flex; flex-direction: column; flex: 1; padding: 20px;
    color: inherit; text-decoration: none;
    background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: transform .15s ease, border-color .15s ease;
}
.card__link:hover { transform: translateY(-2px); border-color: var(--accent); }
.card__title { margin: 0 0 .5em; font-size: 1.25rem; }
.card__text { margin: 0 0 1.2em; flex: 1; color: var(--muted); font-size: .95rem; }
.card__go { font-weight: 600; color: var(--accent); }

.topics {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 28px;
    margin: 0; padding: 0; list-style: none; color: var(--muted);
}
.topics li { padding: 10px 0; border-bottom: 1px solid var(--rule); }

.tool-list { padding-left: 1.2em; }
.tool-list li { margin-bottom: .5em; }
.tool-list--plain { padding: 0; list-style: none; font-size: 1.1rem; }
.tool-list--plain li { margin: 0; border-bottom: 1px solid var(--rule); }
.tool-list--plain a { display: block; padding: 14px 2px; text-decoration: none; }
.tool-list--plain a:hover { text-decoration: underline; }

.steps { display: grid; gap: 16px; padding: 0; margin: 0 0 1.5em; list-style: none; }
.steps > li { padding: 16px 20px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); }
.steps h2 { margin: 0 0 .4em; font-size: 1.15rem; }
.steps ol { margin: 0; padding-left: 1.3em; }

/* ---------- Tip jar and footer ---------- */
/* The tip widget (sent-tip.web.app/widget.js) draws itself in a shadow root; these variables are its theme. */
.tip-theme {
    --tip-accent: var(--accent);    --tip-accent-fg: var(--accent-ink);
    --tip-fg: var(--ink);           --tip-muted: var(--muted);
    --tip-surface: var(--surface);  --tip-raised: var(--sunken);
    --tip-border: var(--rule);      --tip-danger: var(--danger);
    --tip-font: var(--sans);        --tip-radius: var(--radius);
}
/* The space under the jar belongs to the mount element, not to .support: when the widget declines to render
   (site not registered, origin not allowed) it sets display:none on its mount, and the space goes with it.
   Never hide .support with `#support:empty`: a shadow root is not a child, so a rendered jar is still :empty. */
#support { margin-bottom: clamp(24px, 5vw, 48px); }

/* The line under the masthead that asks and jumps to the jar ("Find Dynamics of Wealth useful? Leave a tip").
   The widget fills it after the jar has rendered. Its height is reserved either way, so nothing moves when it
   appears, and unfilled it reads as the page's top spacing: .main gives back that much of its own top padding.
   On a narrow screen the question and the button are two lines, so two lines are reserved. */
.tip-prompt { min-height: 2.25rem; margin-top: clamp(12px, 2.4vw, 20px); }
.tip-prompt + .main { padding-top: clamp(10px, 2vw, 20px); }
@media (max-width: 460px) {
    .tip-prompt { min-height: 4rem; }
}

.footer {
    background: var(--band); color: var(--band-muted);
    border-top: 4px double var(--band-gold);
    font-size: .9rem;
}
.footer__in { padding-block: 22px 28px; text-align: center; }
.footer__tools, .footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; }
.footer__tools { margin-bottom: 8px; }
.footer a { display: inline-block; padding: 6px 0; color: var(--band-ink); text-decoration: none; }
.footer a:hover { color: var(--band-gold); text-decoration: underline; }
.footer__tools a { font: 600 .78rem/1.2 var(--serif); letter-spacing: .14em; text-transform: uppercase; }
.footer__legal { margin: 14px 0 0; font-size: .8rem; line-height: 1.5; }
.footer :focus-visible { outline-color: var(--band-gold); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media print {
    .masthead, .footer, .support, .tip-prompt, .skip-link { display: none; }
    body { background: #fff; color: #000; }
}