/* Shared styles for Tesserae's free public calculator pages (/tools/*).
   Theme-aware, brand-matched (indigo + emerald), self-contained. Loaded via
   <link rel="stylesheet" href="/tools/tesserae-tools.css"> — same-origin, so it
   passes the app's CSP (style-src 'self' 'unsafe-inline'; the 'unsafe-inline'
   is load-bearing — the SS page's bar chart is drawn with inline styles). */

:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #eef1f5;
  --ink: #12141c;
  --muted: #57607a;
  --faint: #8b93a7;
  --border: #e2e6ec;
  --border-strong: #d2d8e2;
  --indigo: #4f46e5;
  --indigo-ink: #4338ca;
  --indigo-soft: #eceafe;
  --emerald: #059669;
  --emerald-soft: #e6f6ee;
  --rose: #e11d48;
  --amber: #b45309;
  --shadow: 0 1px 2px rgba(18,20,28,.04), 0 10px 30px rgba(18,20,28,.06);
  --serif: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0e14; --surface: #141824; --surface-2: #1b2130; --ink: #eaecf3; --muted: #a1a9bd; --faint: #727b91;
    --border: #232a3a; --border-strong: #313a4e; --indigo: #818cf8; --indigo-ink: #aab2fb; --indigo-soft: #20233f;
    --emerald: #34d399; --emerald-soft: #10261f; --rose: #fb7185; --amber: #f0b054;
    --shadow: 0 1px 2px rgba(0,0,0,.35), 0 12px 34px rgba(0,0,0,.4);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); line-height: 1.62; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
a { color: var(--indigo); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 780px; margin: 0 auto; padding: 0 20px; }

/* Top bar */
.topbar { border-bottom: 1px solid var(--border); background: var(--surface); }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand .mark { width: 26px; height: 26px; display: block; flex: 0 0 auto; }
.topbar .cta { font-size: .86rem; font-weight: 600; color: #fff; background: var(--indigo); padding: 8px 15px; border-radius: 9px; }
.topbar .cta:hover { text-decoration: none; filter: brightness(1.06); }

/* Hero / heading */
main { padding: 40px 0 64px; }
.kicker { text-transform: uppercase; letter-spacing: .13em; font-size: .72rem; font-weight: 700; color: var(--indigo); margin: 0 0 12px; }
h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.9rem, 5vw, 2.6rem); line-height: 1.1; letter-spacing: -.01em; margin: 0 0 14px; text-wrap: balance; }
.intro { font-size: 1.1rem; color: var(--muted); margin: 0 0 28px; max-width: 60ch; }
h2 { font-family: var(--serif); font-weight: 600; font-size: 1.4rem; margin: 40px 0 12px; letter-spacing: -.01em; }
h3 { font-size: 1.05rem; margin: 24px 0 6px; }
p { margin: 0 0 14px; }
.prose { color: var(--ink); }
.prose p, .prose li { color: color-mix(in srgb, var(--ink) 88%, var(--muted)); }
.prose strong { color: var(--ink); }
.prose ul { padding-left: 20px; margin: 0 0 16px; }
.prose li { margin: 6px 0; }
.muted { color: var(--muted); }
code { font-family: var(--mono); font-size: .88em; background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; }

/* Calculator card */
.calc { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.calc-body { padding: 22px; }
@media (min-width: 620px) { .calc-body { padding: 26px; } }
.fields { display: grid; grid-template-columns: 1fr; gap: 15px; }
@media (min-width: 520px) { .fields { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--muted); }
.control { display: flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 10px; padding: 10px 12px; }
.control:focus-within { border-color: var(--indigo); }
.control .affix { color: var(--faint); font-size: .95rem; flex: 0 0 auto; }
.control input, .control select { border: 0; background: transparent; color: var(--ink); font-size: 1rem; width: 100%; outline: none; font-family: inherit; }
.control select { cursor: pointer; }
select { color-scheme: light dark; }
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 9px; padding: 3px; gap: 3px; }
.seg button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: .82rem; font-weight: 600; padding: 6px 12px; border-radius: 7px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--indigo); color: #fff; }

/* Result */
.result { background: linear-gradient(135deg, color-mix(in srgb, var(--emerald) 18%, var(--surface)), var(--surface) 70%); border-top: 1px solid var(--border); padding: 22px; }
.result .rlabel { text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 700; color: var(--emerald); margin: 0 0 4px; }
.result .rvalue { font-size: clamp(2.1rem, 7vw, 3rem); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: 0; line-height: 1; }
.result .rsub { color: var(--muted); font-size: .92rem; margin: 8px 0 0; }
.tiles { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 18px; }
@media (max-width: 480px) { .tiles { grid-template-columns: 1fr; } }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.tile .tl { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; margin: 0 0 4px; }
.tile .tv { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tile .ts { font-size: .72rem; color: var(--muted); margin: 4px 0 0; }
.tile.amber .tv { color: var(--amber); } .tile.indigo .tv { color: var(--indigo-ink); } .tile.emerald .tv { color: var(--emerald); }
.tile.rose .tv { color: #e11d48; } .tile.sky .tv { color: #0284c7; }
@media (prefers-color-scheme: dark) { .tile.rose .tv { color: #fb7185; } .tile.sky .tv { color: #38bdf8; } }
:root[data-theme="dark"] .tile.rose .tv { color: #fb7185; } :root[data-theme="dark"] .tile.sky .tv { color: #38bdf8; }
:root[data-theme="light"] .tile.rose .tv { color: #e11d48; } :root[data-theme="light"] .tile.sky .tv { color: #0284c7; }

/* Topbar "All tools" back-link on each calculator page */
.tblink { margin-left: auto; margin-right: 14px; font-size: .88rem; font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap; }
.tblink:hover { color: var(--indigo); }
/* At very narrow widths the topbar (brand + back-link + CTA ≈ 345px) overflows;
   drop the back-link — the footer's "All tools" link still covers navigation. */
@media (max-width: 380px) { .tblink { display: none; } }
.topbar .cta { margin-left: 0; }

/* Small data table (payoff schedules etc.) */
.mini-table { width: 100%; border-collapse: collapse; font-size: .82rem; font-variant-numeric: tabular-nums; min-width: 380px; }
.mini-table th { text-align: right; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 6px 10px; border-bottom: 1px solid var(--border); }
.mini-table th:first-child, .mini-table td:first-child { text-align: left; }
.mini-table td { text-align: right; padding: 6px 10px; border-bottom: 1px solid var(--border); }
.mini-table tr:last-child td { border-bottom: 0; }

/* Growth chart. Axis labels live in HTML gutters (not inside the SVG) so the plot
   can stretch with preserveAspectRatio="none" without distorting any text. */
.chartbox { margin-top: 20px; }
.chart-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--muted); margin: 0 0 8px; }
.chart { display: flex; }
.chart-y { width: 46px; flex: 0 0 auto; position: relative; height: 190px; }
.chart-y span { position: absolute; right: 6px; transform: translateY(-50%); font-size: .66rem; color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.chart-plot { flex: 1 1 auto; height: 190px; position: relative; min-width: 0; }
.chart-plot svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* Chart paint lives here, NOT as SVG fill="var(--x)" attributes — var() only
   resolves in CSS declarations, not in XML presentation attributes (paths would
   render invisible). Styling by class also keeps the chart theme-aware for free. */
.chart-plot .c-grid { stroke: rgba(128,128,128,0.18); stroke-width: 1; stroke-dasharray: 2 3; }
.chart-plot .c-bal-area { fill: var(--emerald); opacity: .14; }
.chart-plot .c-con-area { fill: var(--indigo); opacity: .16; }
.chart-plot .c-con { fill: none; stroke: var(--indigo); stroke-width: 2; }
.chart-plot .c-bal { fill: none; stroke: var(--emerald); stroke-width: 2.5; }
.chart-plot .c-cross { stroke: var(--emerald); stroke-width: 1; stroke-dasharray: 3 3; opacity: .75; }
.chart-x { display: flex; margin-left: 46px; position: relative; height: 16px; margin-top: 4px; }
.chart-x span { position: absolute; transform: translateX(-50%); font-size: .66rem; color: var(--faint); white-space: nowrap; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: .78rem; color: var(--muted); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend b { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.chart-caption { font-size: .82rem; color: var(--muted); margin: 10px 0 0; }
.chart-caption strong { color: var(--emerald); }

/* Collapsible aside — for detail that shouldn't block the main reading flow
   (e.g. the raw formula). Skippable for those who know it, there for those who want it. */
.aside { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; margin: 16px 0 22px; }
.aside summary { cursor: pointer; padding: 12px 15px; font-weight: 600; font-size: .93rem; color: var(--indigo); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.aside summary::-webkit-details-marker { display: none; }
.aside summary::after { content: "+"; font-weight: 700; }
.aside[open] summary::after { content: "\2013"; }
.aside[open] summary { border-bottom: 1px solid var(--border); }
.aside-body { padding: 12px 15px 4px; font-size: .92rem; }
.aside-body code { font-size: .95em; }

/* Mini bar viz */
.viz { margin-top: 16px; }
.viz .bar { height: 26px; border-radius: 8px; overflow: hidden; display: flex; background: var(--surface-2); border: 1px solid var(--border); }
.viz .bar i { display: block; height: 100%; }
.viz .bseg-contrib { background: var(--indigo); }
.viz .bseg-interest { background: var(--emerald); }
.viz .legend { display: flex; gap: 16px; margin-top: 8px; font-size: .8rem; color: var(--muted); }
.viz .legend span { display: inline-flex; align-items: center; gap: 6px; }
.viz .legend b { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* Callout / note */
.note { display: flex; gap: 11px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--amber); border-radius: 12px; padding: 14px 16px; margin: 22px 0; font-size: .92rem; color: var(--muted); box-shadow: var(--shadow); }
.note .ni { flex: 0 0 auto; color: var(--amber); font-weight: 800; }

/* FAQ */
.faq details { border: 1px solid var(--border); border-radius: 12px; margin: 8px 0; background: var(--surface); overflow: hidden; }
.faq summary { cursor: pointer; padding: 14px 16px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--indigo); font-weight: 700; }
.faq details[open] summary::after { content: "\2013"; }
.faq details[open] summary { border-bottom: 1px solid var(--border); }
.faq .fa { padding: 4px 16px 16px; color: var(--muted); font-size: .94rem; }

/* CTA */
.cta-card { margin: 40px 0 8px; border-radius: 18px; padding: 26px; background: linear-gradient(135deg, var(--indigo), #7c3aed); color: #fff; box-shadow: var(--shadow); }
.cta-card h2 { font-family: var(--serif); color: #fff; margin: 0 0 8px; font-size: 1.5rem; }
.cta-card p { color: rgba(255,255,255,.9); margin: 0 0 18px; max-width: 52ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { font-weight: 600; font-size: .92rem; padding: 11px 18px; border-radius: 11px; display: inline-block; }
.btn-primary { background: #fff; color: var(--indigo-ink); }
.btn-primary:hover { text-decoration: none; filter: brightness(.97); }
.btn-ghost { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.4); }
.btn-ghost:hover { text-decoration: none; background: rgba(255,255,255,.22); }

/* Related tools */
.related { margin-top: 44px; }
.related-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 12px; }
@media (min-width: 560px) { .related-grid { grid-template-columns: 1fr 1fr; } }
.related-grid a { display: block; padding: 13px 15px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--ink); font-weight: 600; font-size: .92rem; box-shadow: var(--shadow); }
.related-grid a:hover { text-decoration: none; border-color: var(--indigo); }
.related-grid a span { display: block; font-weight: 400; font-size: .82rem; color: var(--muted); margin-top: 2px; }

/* Footer */
footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 48px; }
footer .wrap { padding: 26px 20px; font-size: .84rem; color: var(--faint); display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; justify-content: space-between; }
footer a { color: var(--muted); }
footer .fnav { display: flex; gap: 16px; flex-wrap: wrap; }

/* ── Percentile bar (net-worth-percentile-by-age) ─────────────────────────── */
.pbar-track { position: relative; height: 12px; border-radius: 999px; background: var(--border, #2b3348); margin: 6px 0 34px; }
.pbar-fill { height: 100%; border-radius: 999px; background: var(--indigo, #6366f1); transition: width .25s ease; }
.pbar-marker { position: absolute; top: -4px; width: 6px; height: 20px; border-radius: 3px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); transition: left .25s ease; }
.pbar-tick { position: absolute; top: 16px; transform: translateX(-50%); font-size: 10px; color: var(--muted, #8b93a7); white-space: nowrap; text-align: center; }
.pbar-tick i { display: block; width: 1px; height: 6px; background: var(--border, #2b3348); margin: 0 auto 2px; }

/* ── Share row (all tool pages) ────────────────────────────────────────────
   The quotable one-sentence result + its copy button. The sentence is the
   unit people paste into forums; the button copies sentence + the page's
   shareable URL (inputs ride in the query string). */
.share-row { display: flex; align-items: flex-start; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 13px 16px; margin: 18px 0 0; box-shadow: var(--shadow); }
.share-line { flex: 1 1 auto; font-size: .92rem; color: var(--muted); margin: 0; }
.share-line strong { color: var(--ink); }
.share-btn { flex: 0 0 auto; font: inherit; font-size: .84rem; font-weight: 600; color: var(--indigo, #4f46e5); background: none; border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px; cursor: pointer; white-space: nowrap; }
.share-btn:hover { border-color: var(--indigo, #4f46e5); }
.share-btn.copied { color: var(--emerald, #059669); border-color: var(--emerald, #059669); }
@media (max-width: 480px) { .share-row { flex-direction: column; } .share-btn { align-self: flex-start; } }

/* ── Field sliders + chart hover (all tool pages) ──────────────────────────
   A slider paired under a number box (two-way synced) for the inputs whose
   whole point is dragging-and-watching; and the hover guide for charts. */
.fslider { display: block; width: 100%; margin: 8px 0 2px; accent-color: var(--indigo, #4f46e5); cursor: pointer; }
.hover-guide { pointer-events: none; }
.hover-guide line { stroke: var(--muted, #8b93a7); stroke-width: 1; stroke-dasharray: 3 3; }
.hover-dot { pointer-events: none; }
.hover-readout { position: absolute; pointer-events: none; background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px; font-size: .78rem; color: var(--muted); box-shadow: var(--shadow); white-space: nowrap; z-index: 5; }
.hover-readout strong { color: var(--ink); }
.chartbox { position: relative; }