/* Public calculators — the 1.2 redesign layer (2026-09-18).

   Loaded ONLY by /tools (the hub) and the 14 calculator pages, AFTER the shared
   /tools/tesserae-tools.css. Every rule is scoped to <body class="tc-page"> (a
   calculator) or <body class="tc-hub"> (the directory), so the /compare and
   /guides pages, which share tesserae-tools.css, can't be touched by anything
   here, even if one of them loaded this file by mistake.

   What it does: a wider workspace (inputs beside results from 980px), an
   editorial hero with breadcrumbs and a category chip, a distinct result
   headline, labelled input groups, framed charts and tables, 44px controls and
   13px minimum supporting text, in both paper-light and navy-dark.

   What it never does: change a calculation. No app.js was edited; the pages
   keep every id, default value, range, schema block and analytics tag. The
   chart colours still come from the shared tokens (--indigo actions and the
   primary series, --emerald sage for balances, --amber gold for targets,
   --rose for negatives), because the scripts paint with var(--…) names. */

/* ── Category identity ─────────────────────────────────────────────────── */
.tc-page, .tc-hub {
  --tc-grow: #3f6652;   --tc-grow-wash: #e7efe9;
  --tc-home: #86601f;   --tc-home-wash: #f6ecd9;
  --tc-retire: #5f45b8; --tc-retire-wash: #ece8fb;
  --tc-accent: var(--indigo-ink); --tc-accent-wash: var(--indigo-soft);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.tc-page, .tc-hub) {
    --tc-grow: #8fc4aa;   --tc-grow-wash: #1a2f28;
    --tc-home: #e0b46a;   --tc-home-wash: #33291a;
    --tc-retire: #b3a6f5; --tc-retire-wash: #29254a;
  }
}
:root[data-theme="dark"] :is(.tc-page, .tc-hub) {
  --tc-grow: #8fc4aa;   --tc-grow-wash: #1a2f28;
  --tc-home: #e0b46a;   --tc-home-wash: #33291a;
  --tc-retire: #b3a6f5; --tc-retire-wash: #29254a;
}
:is(.tc-page, .tc-hub) [data-cat="grow"], .tc-page[data-cat="grow"] { --tc-accent: var(--tc-grow); --tc-accent-wash: var(--tc-grow-wash); }
:is(.tc-page, .tc-hub) [data-cat="home"], .tc-page[data-cat="home"] { --tc-accent: var(--tc-home); --tc-accent-wash: var(--tc-home-wash); }
:is(.tc-page, .tc-hub) [data-cat="retire"], .tc-page[data-cat="retire"] { --tc-accent: var(--tc-retire); --tc-accent-wash: var(--tc-retire-wash); }

/* ── Canvas ────────────────────────────────────────────────────────────── */
:is(.tc-page, .tc-hub) .wrap { max-width: 1180px; }
@media (min-width: 720px) { :is(.tc-page, .tc-hub) .wrap { padding: 0 32px; } }
:is(.tc-page, .tc-hub) main { padding: 20px 0 72px; }
:is(.tc-page, .tc-hub) .topbar .cta,
:is(.tc-page, .tc-hub) .tblink { min-height: 44px; display: inline-flex; align-items: center; }
:is(.tc-page, .tc-hub) footer .wrap { font-size: .875rem; }
:is(.tc-page, .tc-hub) footer a { display: inline-flex; align-items: center; min-height: 44px; }
:is(.tc-page, .tc-hub) [id] { scroll-margin-top: 84px; }

/* Breadcrumbs — the visible twin of each page's BreadcrumbList schema. */
.tc-page .tc-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; list-style: none; margin: 0 0 6px; padding: 0; font-size: .875rem; color: var(--muted); }
.tc-page .tc-crumbs li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.tc-page .tc-crumbs li + li::before { content: "/"; color: var(--faint); }
.tc-page .tc-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-weight: 500; }
.tc-page .tc-crumbs a:hover { color: var(--indigo-ink); }
.tc-page .tc-crumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ── Hero ──────────────────────────────────────────────────────────────── */
:is(.tc-page, .tc-hub) .tc-hero { position: relative; padding: 10px 0 30px; margin: 0 0 30px; border-bottom: 1px solid var(--border); overflow: hidden; }
:is(.tc-page, .tc-hub) .tc-hero > :not(.tc-hero-art) { position: relative; z-index: 1; max-width: 760px; }
:is(.tc-page, .tc-hub) .tc-hero h1 { font-size: clamp(2.15rem, 5vw, 3.25rem); margin: 0 0 16px; }
:is(.tc-page, .tc-hub) .tc-hero .intro { font-size: 1.125rem; line-height: 1.6; margin: 0; max-width: 62ch; color: color-mix(in srgb, var(--ink) 72%, var(--muted)); }
:is(.tc-page, .tc-hub) .tc-hero .kicker { font-size: .8125rem; margin: 0 0 14px; }
.tc-page .tc-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 14px; }
.tc-page .tc-hero-meta .kicker { margin: 0; }
.tc-page .tc-chip { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 5px 12px; border-radius: 999px; background: var(--tc-accent-wash); color: var(--tc-accent); font-size: .8125rem; font-weight: 700; letter-spacing: .02em; }
.tc-page .tc-chip::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: currentColor; transform: rotate(45deg); }

/* Hero diamonds — ONE arrangement for all 14 calculators and the directory:
   the same five tiles, sizes, positions and colours everywhere (no category
   or hub variants). Each tile is a square rotated 45°, i.e. a diamond whose
   half-diagonal is side/√2. Two diamonds are clear of each other when the
   distance between their centres measured as |dx| + |dy| exceeds the sum of
   their half-diagonals; every pair here clears that by at least 16px (about
   11px between facing edges). The box is 240 × 190px, anchored top-right and
   shown from 900px, and the hero's text is held to (100% − 264px) at those
   widths, so nothing overlaps the title, kicker or intro. Decorative only
   (aria-hidden). publicCalculators.test.mjs recomputes the clearances. */
:is(.tc-page, .tc-hub) .tc-hero-art { position: absolute; right: 0; top: 16px; width: 240px; height: 190px; pointer-events: none; z-index: 0; display: none; }
@media (min-width: 900px) {
  :is(.tc-page, .tc-hub) .tc-hero-art { display: block; }
  :is(.tc-page, .tc-hub) .tc-hero > :not(.tc-hero-art) { max-width: min(760px, calc(100% - 264px)); }
}
:is(.tc-page, .tc-hub) .tc-hero-art i { position: absolute; display: block; border-radius: 8px; transform: rotate(45deg); }
:is(.tc-page, .tc-hub) .tc-hero-art i:nth-child(1) { width: 84px; height: 84px; left: 108px; top: 38px; background: var(--indigo); opacity: .16; }
:is(.tc-page, .tc-hub) .tc-hero-art i:nth-child(2) { width: 52px; height: 52px; left: 34px; top: 104px; background: var(--emerald); opacity: .2; }
:is(.tc-page, .tc-hub) .tc-hero-art i:nth-child(3) { width: 40px; height: 40px; left: 185px; top: 138px; background: var(--amber); opacity: .22; }
:is(.tc-page, .tc-hub) .tc-hero-art i:nth-child(4) { width: 30px; height: 30px; left: 25px; top: 15px; background: var(--rose); opacity: .2; }
:is(.tc-page, .tc-hub) .tc-hero-art i:nth-child(5) { width: 22px; height: 22px; left: 209px; top: 13px; background: var(--indigo); opacity: .28; }

/* ── The workspace: inputs beside results on a wide screen ─────────────── */
.tc-page .calc { border-radius: 24px; }
@media (min-width: 980px) {
  .tc-page .calc { display: grid; grid-template-columns: minmax(0, 43fr) minmax(0, 57fr); }
  .tc-page .calc-body { padding: 30px 28px 32px; }
  .tc-page .result { border-top: 0; border-left: 1px solid var(--border); padding: 30px 32px 32px; }
}
.tc-page .tc-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 0 0 16px; padding: 0 0 12px; border-bottom: 1px solid var(--border); }
.tc-page .tc-panel-title { margin: 0; font-family: var(--serif); font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; }
.tc-page .tc-panel-hint { margin: 0; font-size: .8125rem; color: var(--muted); }

/* Input groups: a labelled row that spans the field grid. */
.tc-page .tc-fgroup { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 8px 0 -4px; font-size: .8125rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--tc-accent); }
.tc-page .tc-fgroup::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.tc-page .fields > .tc-fgroup:first-child { margin-top: 0; }

/* Fields: readable labels, 44px boxes, bigger slider hit areas. */
.tc-page .field label { font-size: .8125rem; letter-spacing: .04em; color: color-mix(in srgb, var(--ink) 62%, var(--muted)); }
.tc-page .control { min-height: 48px; padding: 0 12px; }
.tc-page .control input, .tc-page .control select { min-height: 46px; font-size: 1.0625rem; }
.tc-page .control .affix { font-size: 1rem; color: var(--muted); }
.tc-page .fslider { height: 44px; margin: 0; }
.tc-page .seg button { min-height: 44px; padding: 8px 14px; font-size: .875rem; }
.tc-page .dp-toggle { align-self: stretch; margin: 0 -12px 0 8px; border: 0; border-left: 1px solid var(--border); border-radius: 0 11px 11px 0; }
.tc-page .dp-toggle button { min-width: 44px; min-height: 46px; font-size: .875rem; }
.tc-page .dp-equiv, .tc-page .add-hint { font-size: .8125rem; }
.tc-page .chip { min-height: 44px; font-size: .875rem; }
.tc-page .add-debt { min-height: 44px; font-size: .9375rem; }
.tc-page .dr-del { min-height: 44px; min-width: 44px; }
.tc-page .debt-row .field label { font-size: .8125rem; }
.tc-page .method-card { min-height: 44px; }
.tc-page .method-card .mc-stat { font-size: .875rem; }

/* ── The answer ────────────────────────────────────────────────────────── */
.tc-page .result { background: linear-gradient(160deg, color-mix(in srgb, var(--emerald) 11%, var(--surface)), var(--surface) 62%); }
.tc-page .tc-answer { padding: 18px 20px 20px; margin: 0 0 4px; border-radius: 18px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--emerald) 28%, var(--border)); box-shadow: var(--shadow); }
.tc-page .tc-answer .rlabel { font-size: .8125rem; letter-spacing: .08em; }
.tc-page .tc-answer .rvalue { font-size: clamp(2.4rem, 6.4vw, 3.6rem); letter-spacing: -.025em; line-height: 1.02; overflow-wrap: anywhere; }
.tc-page .tc-answer .rsub { font-size: .9375rem; line-height: 1.5; margin-top: 10px; }
.tc-page .tiles { gap: 12px; margin-top: 16px; }
@media (min-width: 481px) and (max-width: 979px) { .tc-page .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tc-page .tile { position: relative; background: var(--surface); border-radius: 14px; padding: 14px 14px 13px; border-top: 3px solid var(--border-strong); min-width: 0; }
.tc-page .tile.indigo { border-top-color: var(--indigo); }
.tc-page .tile.emerald { border-top-color: var(--emerald); }
.tc-page .tile.amber { border-top-color: var(--amber); }
.tc-page .tile.rose { border-top-color: var(--rose); }
.tc-page .tile .tl { font-size: .8125rem; letter-spacing: .03em; text-transform: none; font-weight: 600; }
.tc-page .tile .tv { font-size: 1.3rem; overflow-wrap: anywhere; }
.tc-page .tile .ts { font-size: .8125rem; }
.tc-page .rlabel { font-size: .8125rem; }
.tc-page .chart-caption, .tc-page .share-line { font-size: .875rem; }
.tc-page .share-btn { min-height: 44px; padding: 8px 14px; font-size: .875rem; }
.tc-page .note { font-size: .9375rem; }

/* Charts: a framed card with a real title and legend chips. */
.tc-page .chartbox { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px 16px 14px; }
.tc-page .chart-title { font-size: .8125rem; letter-spacing: .05em; color: var(--ink); margin: 0 0 12px; }
.tc-page .chart-y { width: 54px; }
.tc-page .chart-x { margin-left: 54px; height: 20px; }
.tc-page .chart-y span, .tc-page .chart-x span { font-size: .8125rem; color: var(--muted); }
.tc-page .chart-legend { gap: 8px 10px; font-size: .8125rem; }
.tc-page .chart-legend span { padding: 3px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: color-mix(in srgb, var(--ink) 75%, var(--muted)); }
.tc-page .hover-readout { font-size: .8125rem; }
.tc-page .viz .legend { font-size: .8125rem; }
.tc-page .pbar-tick { font-size: .8125rem; }
/* Chart annotations the scripts write with inline font sizes (the percentile
   marker, the Social Security crossover labels and cumulative totals). Sized
   up here rather than in app.js, which stays untouched. */
.tc-page [style*="font-size:.66rem"], .tc-page [style*="font-size:.68rem"] { font-size: .8125rem !important; }
.tc-page [style*="font-size:11px"] { font-size: 13px !important; width: auto !important; min-width: 78px; }

/* Tables: sticky header, banding, tabular figures. */
.tc-page .mini-table { font-size: .875rem; }
.tc-page .mini-table th { font-size: .8125rem; letter-spacing: .03em; text-transform: none; font-weight: 700; color: var(--ink); background: var(--surface-2); position: sticky; top: 0; }
.tc-page .mini-table td, .tc-page .mini-table th { padding: 8px 10px; }
.tc-page .mini-table tbody tr:nth-child(even) td, .tc-page .mini-table tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.tc-page .aside-body > div[style*="overflow-x"], .tc-page #sensWrap > div[style*="overflow-x"] { border: 1px solid var(--border); border-radius: 12px; max-height: 440px; overflow-y: auto; }

/* Disclosures and FAQ: 44px rows, readable bodies. */
.tc-page .aside summary, .tc-page .faq summary { min-height: 44px; align-items: center; }
.tc-page .aside-body { font-size: .9375rem; }
.tc-page .faq .fa { font-size: .9375rem; }

/* ── Below the workspace ───────────────────────────────────────────────────
   Notes, the explainer, the CTA card and the related links run the full width
   of the workspace, so their right edge lines up with the calculator's (Bryan,
   2026-09-18: no reading-column caps). */
@media (min-width: 900px) { .tc-page .related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tc-page .prose > h2:first-child { margin-top: 44px; }
.tc-page .prose h2 { font-size: 1.6rem; }
.tc-page .prose p, .tc-page .prose li { font-size: 1.0625rem; line-height: 1.68; }
.tc-page .cta-card p { max-width: 72ch; }
.tc-page .related h2 { font-size: 1.35rem; }
.tc-page .related-grid a { min-height: 44px; display: flex; flex-direction: column; justify-content: center; padding: 14px 16px; border-left: 3px solid var(--tc-accent); }
.tc-page .related-grid a span { font-size: .875rem; }
.tc-page .tc-all { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 14px; font-weight: 600; color: var(--indigo-ink); }
.tc-page .tc-all span { transition: transform .15s; }
.tc-page .tc-all:hover span { transform: translateX(3px); }

/* ── The directory (/tools) ────────────────────────────────────────────── */
.tc-hub .tc-hero { padding: 26px 0 34px; }
.tc-hub .tc-hero h1 { font-size: clamp(2.4rem, 6vw, 3.75rem); }

.tc-hub .tc-catnav { position: sticky; top: 62px; z-index: 10; margin: 0 -20px 8px; padding: 10px 20px; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
@media (min-width: 720px) { .tc-hub .tc-catnav { margin: 0 -32px 8px; padding: 10px 32px; } }
.tc-hub .tc-catnav ul { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.tc-hub .tc-catnav ul::-webkit-scrollbar { display: none; }
.tc-hub .tc-catnav a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; white-space: nowrap; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: .9375rem; font-weight: 600; }
.tc-hub .tc-catnav a::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--tc-accent); transform: rotate(45deg); }
.tc-hub .tc-catnav a:hover { text-decoration: none; border-color: var(--tc-accent); }
.tc-hub .tc-catnav a .tc-count { font-weight: 500; color: var(--muted); font-size: .8125rem; }

.tc-hub .group { margin: 40px 0 0; }
.tc-hub .tc-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 16px; }
:root .tc-hub .tc-group-head > .group-label { color: var(--ink); }
.tc-hub .group-label { font-family: var(--serif); font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; text-transform: none; color: var(--ink); margin: 0; }
.tc-hub .group-label::after { content: none; }
.tc-hub .tc-group-desc { margin: 0; font-size: .9375rem; color: var(--muted); }
.tc-hub .group { border-top: 3px solid var(--tc-accent); padding-top: 22px; }

.tc-hub .tool-grid { grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .tc-hub .tool-grid { grid-template-columns: 1fr 1fr; } }
.tc-hub .tool-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 14px; align-content: start; padding: 18px 18px 16px; border-radius: 18px; min-height: 44px; }
.tc-hub .tool-card:hover { border-color: var(--tc-accent); }
.tc-hub .tc-icon { grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--tc-accent-wash); color: var(--tc-accent); }
.tc-hub .tc-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tc-hub .tool-card .tc-name { font-family: var(--serif); font-size: 1.15rem; font-weight: 700; color: var(--ink); margin: 2px 0 2px; letter-spacing: -.005em; }
.tc-hub .tool-card .tc-desc { font-size: .9375rem; line-height: 1.55; }
.tc-hub .tool-card .tc-go { grid-column: 2; margin-top: 8px; font-size: .875rem; font-weight: 600; color: var(--indigo-ink); }
.tc-hub .tool-card .tc-go span { display: inline-block; transition: transform .15s; }
.tc-hub .tool-card:hover .tc-go span { transform: translateX(3px); }
.tc-hub .cta-card { margin-top: 56px; }

@media (prefers-reduced-motion: reduce) {
  .tc-hub .tool-card, .tc-hub .tool-card .tc-go span, .tc-page .tc-all span { transition: none; }
  .tc-hub .tool-card:hover, .tc-hub .tool-card:hover .tc-go span, .tc-page .tc-all:hover span { transform: none; }
}

/* Keyboard focus on the new controls. */
:is(.tc-page, .tc-hub) :is(.tc-crumbs a, .tc-catnav a, .tc-all, .fslider, .control select):focus-visible { outline: 3px solid color-mix(in srgb, var(--indigo) 45%, transparent); outline-offset: 2px; }

/* Script-built rows that act as controls: keep them 44px tall. */
/* Debt rows (built by app.js: name, balance, APR, min payment, remove). The
   page's own five-across grid squeezed APR and truncated names in the 420px
   desktop input column, so every width now uses the phone's two-column shape
   inside a card: the name spans the full width, balance | APR, then min
   payment | the 44px remove button at the bottom right. CSS only; the script,
   its data-k inputs and the .dr-del handler are unchanged. */
.tc-page .debt-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 12px; align-items: end; margin: 0 0 12px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--tc-debt-card); box-shadow: 0 1px 2px rgba(25, 20, 38, .05); }
.tc-page .debt-row .dr-name { grid-column: 1 / -1; }
.tc-page .debt-row .dr-del { justify-self: end; width: 44px; height: 48px; }
.tc-page [data-claim] { min-height: 44px; }
.tc-page .mini-table tr[role="button"] td { height: 44px; }

/* ── White text on a filled action (tools-only controls) ───────────────────
   The shared --indigo token lightens to #818cf8 in dark mode (white on it is
   2.98:1). The active segment button and the mortgage $/% toggle use the fixed
   deep indigo from public-chrome.css (--tc-action #4f46e5, 6.29:1; hover
   #4338ca, 7.90:1) with a 1px --indigo-ink ring. The top-bar CTA's matching
   rule lives in public-chrome.css, shared with the compare pages. */
.tc-page .seg button[aria-pressed="true"],
.tc-page .dp-toggle button[aria-pressed="true"] { background: var(--tc-action); color: #fff; box-shadow: 0 0 0 1px var(--indigo-ink); }
.tc-page .seg button[aria-pressed="true"]:hover,
.tc-page .dp-toggle button[aria-pressed="true"]:hover { background: var(--tc-action-hover); color: #fff; text-decoration: none; }

/* Hub grid: the two four-card groups sit two-by-two on desktop (no orphan);
   the six-card retirement group gets three columns. */
@media (min-width: 1000px) {
  .tc-hub .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tc-hub .group[data-cat="retire"] .tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Hub category jumps clear BOTH sticky bars: the top bar (62px) plus the
   category nav (10px + 44px pills + 10px + 1px border = 65px) end at 127px;
   144px leaves a 17px gap above the section's top rule. The generic 84px
   [id] margin above only clears the top bar. */
.tc-hub .group[id] { scroll-margin-top: 144px; }

/* ── Row alignment: labels, boxes and sliders line up across each row ─────
   A field is its label, its box, and at most one extra line (a slider or a
   hint such as the mortgage's "= 20% of the price"). When two fields share a
   row and one label wraps, the boxes used to sit at different heights.
   With subgrid, each field spans three shared row tracks — label, box,
   extra — so the tallest label in a row sets the label track for both, every
   box in the row starts on the same line, and so does every slider. No fixed
   heights: tracks size to content, whatever the line count or width.
   Group headings still span the full row (one track). Hidden fields
   (display:none) take no tracks. Spacing comes from padding and margins
   because the parent's row gap would otherwise open between every track.
   Browsers without subgrid keep the stacked layout above. Debt rows are a
   separate grid (.debt-row) and are not affected. */
@supports (grid-template-rows: subgrid) {
  .tc-page .fields { row-gap: 0; align-items: start; }
  .tc-page .fields > .field { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; padding-bottom: 16px; }
  .tc-page .fields > .field > label { grid-row: 1; align-self: end; padding-bottom: 7px; }
  .tc-page .fields > .field > .control { grid-row: 2; }
  .tc-page .fields > .field > :not(label):not(.control) { grid-row: 3; align-self: start; }
  .tc-page .fields > .field > .dp-equiv { margin-top: 6px; }
  .tc-page .fields > .tc-fgroup { margin: 4px 0 12px; }
  .tc-page .fields > .tc-fgroup:first-child { margin-top: 0; }

  /* Metric tiles: label, value, sub-line on shared tracks, so a two-line label
     ("Among all households") never pushes its value below its neighbours'. */
  .tc-page .tiles { row-gap: 0; }
  .tc-page .tiles > .tile { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; margin-bottom: 12px; }
  .tc-page .tiles > .tile > .tl { grid-row: 1; align-self: end; }
  .tc-page .tiles > .tile > .tv { grid-row: 2; }
  .tc-page .tiles > .tile > .ts { grid-row: 3; }
}

/* ── Debt payoff: three deliberate layers ─────────────────────────────────
   The debt cards used to share the input panel's colour and blended in. Now:
   the "Your numbers" panel is a warm tint, each debt card is the plain surface
   (white / navy card), and the boxes inside are warm again, so panel → card →
   input read as three steps. Dark mode uses three navy steps instead. Only
   the debt page has #debtRows, so :has() scopes the panel to it. Without
   :has() support the panel stays white and the cards still stand out by their
   border and shadow. */
.tc-page { --tc-debt-panel: #f7f1e7; --tc-debt-card: var(--surface); --tc-debt-input: #fbf6ee; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tc-page { --tc-debt-panel: #172136; --tc-debt-card: #1e293b; --tc-debt-input: #111a2d; }
}
:root[data-theme="dark"] .tc-page { --tc-debt-panel: #172136; --tc-debt-card: #1e293b; --tc-debt-input: #111a2d; }
.tc-page .calc-body:has(#debtRows) { background: var(--tc-debt-panel); }
.tc-page .calc-body:has(#debtRows) .control { background: var(--tc-debt-input); }
.tc-page .debt-row .control { background: var(--tc-debt-input); }
.tc-page .calc-body:has(#debtRows) .method-card { background: var(--tc-debt-card); }