/* Debt With a Dream — companion site stylesheet.
   Since 2026-10-21 the reading pages follow publishers' book pages: paper, a plain header, the
   cover as the one piece of artwork, serif text in a reading column, hairline rules between
   sections. The tool pages keep their instrument styling below.

   Two palettes, deliberately separate (guides/BRAND.md + guides/ACCENT-SCHEME.md):
   - CHART semantics (never reassigned): red #e11d48 bond floor, green #16a34a equity,
     yellow #eab308 convertible, blue #2563eb optionality, gray #6b7280 neutral.
   - SITE CHROME, sampled from the production cover (dashboard/lib/bookcover.php, ASSUMPTIONS
     #447): ink #171d1f, off-white paper #f2efe9, forest #2e6b3a (the cover's "Dream"/kicker —
     the accent on paper), curve green #39aa2d (the painted line/arrow — the accent on ink),
     slate #5a676a (the subtitle).

   Type: Playfair Display (display; the cover's high-contrast serif), Spectral (body; the site
   reads like the book), Inter (utility: UI labels, controls, data, chart internals). All vendored. */

@font-face{ font-family:'Playfair Display'; font-style:normal; font-weight:400 900; font-display:swap;
  src:url('../fonts/playfair/playfair-display-var.woff2') format('woff2'); }
@font-face{ font-family:'Spectral'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/spectral/spectral-400.woff2') format('woff2'); }
@font-face{ font-family:'Spectral'; font-style:italic; font-weight:400; font-display:swap;
  src:url('../fonts/spectral/spectral-400-italic.woff2') format('woff2'); }
@font-face{ font-family:'Spectral'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/spectral/spectral-600.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/inter/inter-v20-latin-regular.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/inter/inter-v20-latin-600.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/inter/inter-v20-latin-700.woff2') format('woff2'); }

:root{
  /* chrome (the cover's scheme) */
  --ink:#171d1f; --ink-2:#212a2d;
  --paper:#f8f6f1; --paper-deep:#edeae2; --card:#fffdf9;
  --line:#e0dcd2; --line-2:#b3afa4;
  --text:#1d2224; --muted:#5d6560;
  --cream:#f2efe9; --cream-dim:rgba(242,239,233,.72); --gilt:rgba(242,239,233,.30);
  --dream:#2e6b3a; --dream-deep:#24552e; --dream-wash:rgba(46,107,58,.09);
  --curve:#39aa2d;
  --teal:#4e6469; --teal-wash:rgba(78,100,105,.08);
  --display:'Playfair Display',Georgia,'Times New Roman',serif;
  --serif:Spectral,Georgia,'Times New Roman','Liberation Serif',serif;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  /* chart semantics (BRAND.md — meaning, never reassigned) */
  --c-red:#e11d48; --c-green:#16a34a; --c-yellow:#eab308; --c-blue:#2563eb; --c-gray:#6b7280;
  /* aliases for the pre-2026-08 token names still used by page-local styles */
  --border:var(--line); --surface:var(--card); --accent:var(--dream); --accent2:var(--teal);
}

*{ box-sizing:border-box }
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth }
html,body{ height:100% }
body{ margin:0; color:var(--text); background:var(--paper); font-family:var(--serif);
  font-size:16px; line-height:1.6; }
a{ color:var(--dream-deep); }
img{ max-width:100% }
::selection{ background:var(--dream); color:#fff; }
:focus-visible{ outline:2px solid var(--dream); outline-offset:2px; }

/* labels inside the instruments (tool pages, tools browser) keep a small caps voice;
   the reading pages (home, contents) do not use it at all */
.caps, .tools-nav-label, .section-h, .toolcard .lbl, .toolrow .lbl, .booklabel{
  font-family:var(--sans); text-transform:uppercase; letter-spacing:.1em; }

/* ================= masthead =================
   A plain publisher's header on paper: the wordmark, a few text links, one hairline.
   (Until 2026-10-21 this was an ink band with the payoff-curve .edge under it; the .edge
   markup chartkit.js and tools/index.php still emit is hidden here.) */
.nav{ background:var(--paper); border-bottom:1px solid var(--line); }
.nav-inner{ width:min(1120px,92vw); margin:0 auto; display:flex; align-items:baseline; gap:12px 28px;
  flex-wrap:wrap; padding:22px 0 18px; }
.wordmark{ font-family:var(--display); font-size:21px; font-weight:500; color:var(--text);
  text-decoration:none; white-space:nowrap; }
.wordmark em{ color:var(--dream); font-style:normal; }
.nav-links{ margin-left:auto; display:flex; gap:26px; align-items:baseline; flex-wrap:wrap; }
.nav-links a{ color:var(--muted); text-decoration:none; font-size:16px; white-space:nowrap; }
.nav-links a:hover, .nav-links a[aria-current]{ color:var(--text); text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:5px; }
.edge{ display:none; }

/* skip link: visible only when focused (WCAG 2.4.1) */
.skip-link{ position:absolute; left:-999px; top:8px; z-index:100; background:var(--dream); color:#fff;
  padding:8px 14px; text-decoration:none; }
.skip-link:focus{ left:8px; }

/* ================= home ================= */
.wrap{ width:min(1120px,92vw); margin:0 auto; }
.book-hero{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(36px,6vw,88px);
  align-items:center; padding:clamp(40px,7vw,88px) 0 clamp(48px,7vw,96px); }
/* the cover as an object: a hard edge, a soft contact shadow, a faint spine crease */
.cover{ position:relative; justify-self:center; width:min(400px,100%); }
.cover img{ display:block; width:100%; height:auto; border-radius:1px 3px 3px 1px;
  box-shadow:0 1px 1px rgba(0,0,0,.12), 0 6px 12px rgba(0,0,0,.10), 0 26px 50px -10px rgba(30,30,20,.35); }
.cover::after{ content:""; position:absolute; top:0; bottom:0; left:10px; width:5px; pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.10),rgba(0,0,0,.18),rgba(255,255,255,.06)); }
.book-hero h1{ font-family:var(--display); font-weight:600; font-size:clamp(44px,5.6vw,70px);
  line-height:1.02; letter-spacing:-.01em; margin:0; }
.book-hero h1 em{ font-style:normal; color:var(--dream); }
.book-hero .subtitle{ font-style:italic; font-size:clamp(19px,2vw,23px); line-height:1.4;
  color:var(--muted); margin:14px 0 0; max-width:30ch; }
.book-hero .author{ font-size:19px; margin:22px 0 0; }
.book-hero .pitch{ font-size:18px; line-height:1.7; margin:30px 0 0; max-width:52ch; }
.actions{ display:flex; gap:22px; align-items:center; flex-wrap:wrap; margin:32px 0 0; }
.button{ display:inline-block; background:var(--dream); color:#fff; text-decoration:none;
  font-size:16.5px; padding:12px 22px; border-radius:3px; }
.button:hover{ background:var(--dream-deep); color:#fff; }
.textlink{ color:var(--dream-deep); text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:4px; font-size:16.5px; }
.textlink:hover{ color:var(--text); }
.facts{ margin:30px 0 0; font-size:14.5px; color:var(--muted); }
@media (max-width:820px){
  .book-hero{ grid-template-columns:1fr; }
  .cover{ width:min(260px,70vw); }
  .book-hero .text{ text-align:left; }
}

/* ruled sections: a margin heading on the left, reading column on the right */
.band{ border-top:1px solid var(--line); }
.band-inner{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.4fr); gap:20px clamp(28px,5vw,72px);
  padding:clamp(44px,6vw,72px) 0; }
.band h2{ font-family:var(--display); font-weight:500; font-size:26px; line-height:1.2; margin:0; }
.prose{ max-width:62ch; }
.prose p{ font-size:18px; line-height:1.72; margin:0 0 1.1em; }
.prose p:last-child{ margin-bottom:0; }
@media (max-width:820px){ .band-inner{ grid-template-columns:1fr; } }

.excerpt{ margin:0; }
.excerpt p{ font-size:clamp(19px,2vw,22px); line-height:1.65; margin:0 0 1em; }
.excerpt footer{ font-size:15px; color:var(--muted); font-style:italic; }

.parts-list{ list-style:none; margin:0; padding:0; }
.parts-list li{ display:flex; gap:18px; align-items:baseline; padding:10px 0; border-bottom:1px solid var(--line);
  font-size:18px; }
.parts-list li:first-child{ border-top:1px solid var(--line); }
.parts-list .pn{ color:var(--muted); font-style:italic; min-width:5.5em; font-size:15.5px; }
.parts-list a{ color:var(--text); text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:4px; }
.parts-list a:hover{ color:var(--dream); }
.parts-list .cc{ margin-left:auto; color:var(--muted); font-size:14.5px; white-space:nowrap; }

/* the quote rotor: every quote occupies the same grid cell, so the block is as tall as the
   longest one and nothing below it jumps; the visible quote fades in */
.quote-stage{ display:grid; }
.quote-stage .excerpt{ grid-area:1 / 1; opacity:0; visibility:hidden; }
.quote-stage .excerpt.on{ opacity:1; visibility:visible; }
/* the first quote appears at once; the cross-fade only runs once the rotor is live (.ready) */
.ready .quote-stage .excerpt{ transition:opacity 2.2s ease-in-out, visibility 0s linear 2.2s; }
.ready .quote-stage .excerpt.on{ transition:opacity 2.2s ease-in-out, visibility 0s; }
@media (prefers-reduced-motion:reduce){ .quote-stage .excerpt{ transition:none; } }
.quote-nav{ display:flex; align-items:center; gap:14px; margin-top:22px; }
.qbtn{ font:inherit; font-size:18px; line-height:1; color:var(--text); background:none; border:none;
  cursor:pointer; padding:4px 6px; min-width:24px; min-height:24px; }
.qbtn:hover{ color:var(--text); }
.qdots{ display:flex; gap:8px; }
/* 24px hit targets (WCAG 2.5.8) drawn as 10px dots */
.qdot{ width:24px; height:24px; padding:0; border:none; background:none; cursor:pointer; display:grid; place-items:center; }
.qdot::before{ content:""; width:10px; height:10px; border-radius:50%; border:1px solid var(--muted); }
.qdot.on::before{ background:var(--dream); border-color:var(--dream); }
.qbtn.pause{ font-size:14px; min-width:24px; min-height:24px; }

/* the store rows: format, seller, then the button (or "Link coming soon" until the URL is set) */
.stores{ list-style:none; margin:0; padding:0; }
.stores li{ display:flex; gap:8px 18px; align-items:center; flex-wrap:wrap; padding:16px 0;
  border-bottom:1px solid var(--line); font-size:18px; }
.stores li:first-child{ border-top:1px solid var(--line); }
.stores .fmt{ min-width:9em; }
.stores .where{ color:var(--muted); font-style:italic; font-size:16px; }
.stores .button, .stores .soon{ margin-left:auto; }
.stores .soon{ color:var(--muted); font-size:15px; }

.figure-plate{ margin:28px 0 0; background:#fff; border:1px solid var(--line); padding:18px; }
.figure-plate img{ display:block; width:100%; height:auto; }
.figure-plate figcaption{ margin-top:10px; font-size:14.5px; color:var(--muted); font-style:italic; }

/* ================= contents page ================= */
.page-head{ padding:clamp(40px,6vw,72px) 0 8px; max-width:66ch; }
.page-head h1{ font-family:var(--display); font-weight:600; font-size:clamp(38px,4.6vw,54px); line-height:1.08; margin:0; }
.page-head p{ font-size:18px; line-height:1.72; margin:20px 0 0; }
.parts{ display:grid; gap:0; margin:44px 0 0; }
.part{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.4fr); gap:14px clamp(28px,5vw,72px);
  border-top:1px solid var(--line); padding:34px 0; }
.part-num{ display:block; font-style:italic; color:var(--muted); font-size:15.5px; margin-bottom:4px; }
.part-head h2{ font-family:var(--display); font-weight:500; font-size:25px; line-height:1.2; margin:0; }
.part-blurb{ color:var(--muted); font-size:16.5px; line-height:1.65; margin:0 0 16px; max-width:62ch; }
.part-chapters{ display:block; max-width:62ch; }
@media (max-width:820px){ .part{ grid-template-columns:1fr; } }
.toc-cols{ max-width:62ch; }
.toc-item{ display:flex; gap:16px; align-items:baseline; padding:7px 0; text-decoration:none; color:var(--text);
  font-size:17.5px; line-height:1.45; }
.toc-item .n{ font-variant-numeric:oldstyle-nums tabular-nums; color:var(--muted); min-width:1.6em; text-align:right; }
.toc-item .tools-n{ margin-left:auto; padding-left:12px; font-size:14.5px; font-style:italic; color:var(--dream); white-space:nowrap; }
a.toc-item:hover .t{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }

.footer{ border-top:1px solid var(--line); margin-top:40px; padding:34px 0 46px; color:var(--muted); font-size:14.5px; }
.footer-inner{ width:min(1120px,92vw); margin:0 auto; display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.footer img{ height:40px; width:auto; opacity:.85; }
.footer a{ color:var(--muted); }
.footer .fl{ margin-left:auto; display:flex; gap:20px; }

/* ================= tools gate =================
   tools/index.php only: the tool list is behind a shared password (the tool pages themselves are
   open). The check is server-side — a locked request is answered with this form INSTEAD of the
   page below it, so there is no hidden state here to toggle. */
.gate{ display:flex; justify-content:center; padding:11vh 4vw 4vh; }
.gate-card{ position:relative; width:min(480px,100%); background:var(--card);
  border:1.5px solid var(--ink); padding:36px 34px 30px; text-align:center; }
.gate-card::after{ content:""; position:absolute; inset:6px; border:1px solid var(--line-2); pointer-events:none; }
.gate-ico{ margin-bottom:14px; color:var(--teal); }
.gate-ico svg{ width:30px; height:30px; }
.gate-card h1{ font-family:var(--display); font-weight:600; font-size:25px; margin:0 0 10px; }
.gate-card p{ color:var(--muted); font-size:15px; line-height:1.6; margin:0 0 20px; }
.gate-row{ position:relative; z-index:1; display:flex; gap:10px; }
.gate-row input{ flex:1; min-width:0; font-family:var(--sans); font-size:15px; color:var(--text);
  background:#fff; border:1px solid var(--muted); padding:11px 13px; outline:none; }
.gate-row input:focus{ border-color:var(--dream); box-shadow:0 0 0 2px var(--dream-wash); }
.gate-row button{ font-family:var(--sans); font-weight:600; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--cream); background:var(--dream); border:1px solid var(--dream);
  padding:11px 20px; cursor:pointer; }
.gate-row button:hover{ background:var(--dream-deep); border-color:var(--dream-deep); color:var(--cream); }
.gate-err{ color:#b91c1c; font-size:13.5px; margin:14px 0 0 !important; }

/* ================= tools browser ================= */
.tools-page{ width:min(1520px,96vw); margin:30px auto 0; padding-bottom:72px; }
.tools-page > h1{ font-family:var(--display); font-weight:600; font-size:clamp(28px,3.6vw,40px); margin:6px 0 6px; }
.tools-sub{ color:var(--muted); font-size:16px; line-height:1.65; margin:8px 0 0; }
/* the representative-numbers notice ([tw] 2026-10-22): full width, quiet, above the search bar */
.notice{ margin:16px 0 0; padding:12px 16px; border:1px solid var(--line-2); border-left:4px solid var(--teal);
  background:var(--card); font-size:14.5px; line-height:1.55; color:var(--text); }
.notice b{ font-weight:600; }
.tools-sub b{ color:var(--dream); font-weight:600; }

.searchbar{ display:flex; gap:12px; align-items:center; background:var(--card);
  border:1px solid var(--muted); padding:12px 16px; margin:18px 0 24px; }
.searchbar svg{ width:16px; height:16px; flex:none; color:var(--muted); }
.searchbar input{ flex:1; font-family:var(--sans); font-size:15px; border:none; outline:none;
  background:transparent; color:var(--text); }
.searchbar input::placeholder{ color:var(--muted); }
.searchbar:focus-within{ border-color:var(--dream); box-shadow:0 0 0 2px var(--dream-wash); }

/* left column: every chapter, always visible, jumps to its section on the right.
   ONE scroller only — the page's. The list is set compact enough to fit a laptop viewport
   without a nested scrollbar (that inner scroll read as "cut off"); on a viewport too short
   for the whole list it simply stops sticking, so the page scroll still reaches every row. */
.tools-layout{ display:grid; grid-template-columns:290px 1fr; gap:40px; align-items:start; }
.tools-nav{ position:sticky; top:14px; border-top:2px solid var(--ink); padding-top:10px; }
@media (max-height:820px){ .tools-nav{ position:static; } }
/* one column on narrow screens: the nav must come AFTER the sticky rule to win (it used to sit
   before it, so phones got a sticky nav riding over the cards) */
@media (max-width:860px){ .tools-layout{ grid-template-columns:1fr; }
  .tools-nav{ position:static; margin-bottom:8px; } }
.tools-nav-label{ margin:0 0 8px; color:var(--muted); font-size:10.5px; font-weight:700; }
.tools-nav a{ display:flex; gap:10px; align-items:baseline; padding:4px 0 4px 10px;
  border-left:2px solid transparent; text-decoration:none; color:var(--muted);
  font-size:14.5px; line-height:1.35; }
.tools-nav a .n{ font-family:var(--sans); font-variant-numeric:tabular-nums; color:var(--teal);
  font-size:12.5px; min-width:20px; }
.tools-nav a:hover{ color:var(--text); border-left-color:var(--line-2); }
.tools-nav a.active{ border-left-color:var(--dream); color:var(--text); }
.tools-nav a.active .n{ color:var(--dream); }

/* chapter sections: a ruled ledger head, cards always shown below it */
.chx{ margin:0 0 44px; scroll-margin-top:18px; }
.chx-head{ display:flex; align-items:baseline; gap:14px; border-top:2px solid var(--ink);
  padding:12px 0 0; }
.chx-num{ font-family:var(--sans); font-variant-numeric:tabular-nums; font-size:13px;
  font-weight:700; color:var(--teal); letter-spacing:.06em; }
.chx-num::before{ content:"Ch. "; letter-spacing:.1em; }
.chx-title{ font-family:var(--display); font-weight:600; font-size:22px; margin:0; }
.chx-counts{ margin-left:auto; color:var(--muted); font-family:var(--sans); font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.chx-counts b{ color:var(--dream); font-weight:700; }
.chx-body{ padding:18px 0 0; }
@media (max-width:640px){ .chx-counts{ display:none } }

.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px; }
.toolcard{ position:relative; display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--card); border:1px solid var(--line-2); transition:border-color .15s; }
a.toolcard:hover{ border-color:var(--ink); }
.toolcard .thumb{ height:140px; background:#fff; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; overflow:hidden; }
.toolcard .thumb img{ width:100%; height:100%; object-fit:contain; padding:8px; }
.toolcard .tc-body{ padding:13px 15px 14px; display:flex; flex-direction:column; gap:6px; }
.toolcard h3{ margin:0; font-family:var(--serif); font-weight:600; font-size:15.5px; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.toolcard .lbl{ order:-1; font-size:10px; font-weight:700; color:var(--teal); }
.toolcard .act{ margin-top:2px; font-family:var(--sans); font-size:10.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--dream); }
a.toolcard:hover .act{ color:var(--dream-deep); }

/* table tools and chartless tools: one compact row each, under the chapter's chart cards */
.toolrows{ list-style:none; margin:14px 0 0; padding:0; border-top:1px solid var(--line-2); }
.toolrows li{ margin:0; border-bottom:1px solid var(--line); }
.toolrow{ display:grid; grid-template-columns:150px 1fr auto; gap:14px; align-items:baseline;
  padding:11px 6px; text-decoration:none; color:inherit; }
.toolrow:hover .name{ text-decoration:underline; text-decoration-color:var(--dream); text-underline-offset:3px; }
.toolrow .lbl{ font-size:10px; font-weight:700; color:var(--teal); }
.toolrow .name{ font-family:var(--serif); font-weight:600; font-size:15.5px; line-height:1.35; }
.toolrow .act{ font-family:var(--sans); font-size:10.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--dream); white-space:nowrap; }
.toolrow:hover .act{ color:var(--dream-deep); }
@media (max-width:640px){
  .toolrow{ grid-template-columns:1fr auto; }
  .toolrow .lbl{ grid-column:1 / -1; }
}

/* ================= tool pages =================
   Anatomy (chartkit.js renders the toolbar + header): a slim ink masthead with the curve edge,
   the ledger context line, then the instrument: controls left, chart + coupon-stub metrics right. */
.page{ width:min(1360px,95vw); margin:14px auto 0; padding-bottom:72px; display:grid; grid-template-columns:340px 1fr; gap:22px; }   /* padding, not margin: a trailing margin collapses out of the scroll height, so the last card sat on the page edge ([tw] 2026-10-22) */
@media (max-width:1100px){ .page{ grid-template-columns:1fr; } .aside{ position:static; } }

.header{ grid-column:1 / -1; padding:2px 0 6px; border-bottom:1px solid var(--line-2); }
/* the way back: a real button at the reading start, beside the ledger context line */
.headrow{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:2px 0 9px; }
.headrow .booklabel{ margin:0; }
.crumb{ font-family:var(--sans); font-size:10.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; text-decoration:none; color:var(--dream);
  border:1px solid var(--dream); padding:6px 12px; white-space:nowrap; }
.crumb:hover{ background:var(--dream); color:var(--cream); }
.booklabel{ display:block; font-size:10.5px; font-weight:700; color:var(--teal); margin:0 0 8px; }
.title{ margin:0; font-family:var(--display); font-weight:600; font-size:clamp(24px,3.2vw,31px);
  line-height:1.12; letter-spacing:-.005em; }
.sub{ margin:7px 0 0; color:var(--muted); font-size:15.5px; line-height:1.55; }   /* full width ([tw] 2026-10-22) */
.caveat{ margin:8px 0 0; color:var(--muted); font-size:12.5px; line-height:1.5; }
.inbook{ margin:9px 0 0; color:var(--muted); font-style:italic; font-size:13.5px; line-height:1.5;
  border-top:1px solid var(--line); padding-top:7px; }
.inbook b{ color:var(--teal); font-style:normal; font-family:var(--sans); font-weight:600;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; margin-right:4px; }
.nav-links a.backlink{ color:var(--muted); }
.nav-links a.backlink:hover{ color:var(--text); }

.aside{ position:sticky; top:18px; align-self:start; background:var(--paper-deep);
  border:1px solid var(--line-2); }
/* a viewport too short for the whole control column: stop sticking, keep the page the one scroller */
@media (max-height:740px){ .aside{ position:static; } }
.section-h{ padding:14px 16px 0; color:var(--muted); font-size:10.5px; font-weight:700; }
.controls{ display:grid; gap:10px; padding:12px 14px 14px; }
.control{ background:var(--card); border:1px solid var(--line); padding:11px 12px; }
.control label{ display:block; font-family:var(--sans); font-size:12px; color:var(--muted); margin-bottom:8px; }
.row{ display:flex; align-items:center; gap:10px; }
input[type="range"]{ flex:1; height:4px; accent-color:var(--dream); }
.val{ min-width:56px; text-align:right; font-family:var(--sans); font-variant-numeric:tabular-nums;
  padding:4px 8px; background:var(--paper); border:1px solid var(--muted); font-size:13px; }
.reset{ margin:0 14px 14px; padding:10px 12px; font-family:var(--sans); font-size:10.5px;
  font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text);
  background:transparent; border:1px solid var(--muted); cursor:pointer; }
.reset:hover{ border-color:var(--dream); color:var(--dream); }

.main{ display:grid; gap:18px; min-width:0; }
.card{ background:var(--card); border:1px solid var(--line-2); }
.chart-card{ position:relative; padding:16px 16px 8px; height:520px; background:#fff; }
.chart-card canvas{ width:100%; height:100%; }
.note-card{ padding:16px 20px; color:var(--muted); font-size:15px; line-height:1.65;
  border-left:3px solid var(--dream); }
.note-card strong{ color:var(--text); font-family:var(--sans); font-size:13.5px; font-weight:700;
  font-variant-numeric:tabular-nums; }

.chips{ display:flex; flex-wrap:wrap; gap:10px; padding:12px 14px; background:var(--card);
  border:1px solid var(--line-2); }
.chip{ display:inline-flex; align-items:center; gap:8px; padding:7px 12px;
  border:1px dashed var(--muted); background:transparent; cursor:pointer; user-select:none;
  font-family:var(--sans); font-size:12px; color:var(--muted); }
.chip:hover{ border-color:var(--muted); }
/* the checkbox stays in the tab order (visually hidden, not display:none) so the chip works from the keyboard */
.chip{ position:relative; }
.chip input{ position:absolute; width:1px; height:1px; margin:0; opacity:0; }
.chip:focus-within{ outline:2px solid var(--dream); outline-offset:2px; }
/* text for assistive tech only (a table's corner header, for one) */
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.chip.on{ background:#fff; border:1px solid var(--ink); color:var(--text); }
.dot{ width:10px; height:10px; border-radius:999px; opacity:.45; }
.chip.on .dot{ opacity:1; }
.cr{ background:var(--c-red); } .cg{ background:var(--c-green); } .cy{ background:var(--c-yellow); }
.cb{ background:var(--c-blue); } .cgr{ background:var(--c-gray); }

/* metric tiles as a coupon sheet: one plate, stubs divided by perforation rules */
.metrics{ display:grid; grid-template-columns:repeat(3,1fr); background:var(--card);
  border:1px solid var(--line-2); padding:0; }
.metric{ padding:16px 18px 15px; border-left:1px dashed var(--line-2); }
.metric:nth-child(3n+1){ border-left:none; }
.metric:nth-child(n+4){ border-top:1px dashed var(--line-2); }
.metric strong{ display:block; color:var(--muted); font-family:var(--sans); font-size:10.5px;
  font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom:8px; }
.num{ font-family:var(--sans); font-size:23px; font-weight:700; letter-spacing:.2px;
  font-variant-numeric:tabular-nums; }
@media (max-width:600px){ .metrics{ grid-template-columns:1fr; }
  .metric{ border-left:none !important; border-top:1px dashed var(--line-2); }
  .metric:first-child{ border-top:none; } }

/* recomputed tables (table tools) */
.tooltable{ padding:16px 18px; overflow-x:auto; }
.tooltable table{ border-collapse:collapse; width:100%; font-family:var(--sans); font-size:14px;
  font-variant-numeric:tabular-nums; }
.tooltable th{ text-align:left; color:var(--teal); font-size:10.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; border-bottom:2px solid var(--ink);
  padding:8px 10px; white-space:nowrap; }
.tooltable td{ padding:8px 10px; border-bottom:1px solid var(--line); }
.tooltable td.n, .tooltable th.n{ text-align:right; }
.tooltable tr.hl td{ background:var(--dream-wash); }
/* text-weight tints of the chart greens/reds: the chart colors themselves fall short of 4.5:1 on white */
.tooltable .pos{ color:#15803d; } .tooltable .neg{ color:#be123c; }
.tooltable tr.hl .pos{ color:#166534; } .tooltable tr.hl .neg{ color:#9f1239; }