/* ════════════════════════════════════════════════════════════════════════
   CALCULATEMINE — "FIGURED" THEME LAYER
   FIGURED. (the locked blog design, ~/workspace/figured-blog) ported onto
   the whole flood site. Source of truth: theme-figured/theme.css
   (the build copies this to /theme-figured.css — edit here, re-run
   theme-figured/apply-theme.py)

   Steve's order (2026-11-04 11:00), on the live blog: "I love the design.
   The ticker at the top. I want this for the whole site."

   WHAT MOVES: the ticker (global chrome, real figures only) · a color
   field per aisle, the way FIGURED stories own theirs · Anton display
   type · ink borders · hard offset shadows · poster grain · the odometer
   as hub wayfinding · the tip jar in every footer ("Keep it free ·
   Buy us a coffee" — URL is apply-theme.py's COFFEE_URL config).
   WHAT NEVER MOVES (the overhaul's clarity laws): content, structure,
   labeled inputs on calm white surfaces, readable fan-out grids. Every
   text/background pair in this file is WCAG-AA-proven by
   theme-figured/check-contrast.py.

   V2 (Steve, 2026-11-04 11:16: "I want that blog feel with the big
   colors on the whole page across the site"): v1 kept the field in the
   chrome over a paper ground. V2 makes the aisle's FULL saturated field
   the page ground itself, edge to edge, like a FIGURED story cover.
   Legibility is the blog's own mechanism: the intro plays the cover
   (ink-chip eyebrow, display text in the locked --on pairing) and all
   working content floats on ink/paper PANELS — masthead, crumbs,
   how-to, footer, map wrap — with ink borders and hard shadows. The
   hub is exempt: it remains the multi-field poster wall on paper.

   V3 (Steve, 2026-11-04 11:27: "I want to see the bg on the home page
   turn to. Those cards were so amazing."): the hub ground TURNS. The
   odometer's current aisle is stamped on the hub body (theme.js
   setOdo), the ground transitions smoothly to that aisle's field, and
   every element standing on the ground — headline zone, shelf heads,
   counts, footer — takes the field's locked --on pairing for the
   duration, the blog's cover treatment. The masthead becomes the same
   paper bar the aisle pages carry, so it never has to survive a field.
   check-contrast.py proves the hub audit: ground text × all fields.

   V3 PAIRING PASS (Steve, 2026-11-04 11:32, on a Money tool: "You need
   better contrast on fonts when you change the bg. Every design
   element must be thought out. Matched colors so you don't need a
   single color for all. Black on that green for example."): MATCHED
   COLORS PER FIELD. No universal ink is forced onto any field again.
   Each aisle is a designed set: the field (ground) · --on (display
   text standing on the field) · --panel/--panelon (a DEEPENED shade
   of the field's own hue with its matched text — the answer panel,
   the calc button, filled chips and the odometer wear the deep
   scheme, never the ground's own color with raw ink on it; school's
   panel is ink with a yellow figure, the ticker pairing flipped) ·
   --slabbg/--slabtx (the step chips inside the panel) · --fieldink
   (the field deepened for text on paper). Cover sentences and hub
   ground sentences sit on paper panels — mid-luminance fields
   physically cap near 5–6:1 for ANY text color, so sentences never
   stand raw on them. AA is the floor; main text pairs run 7:1+.
   check-contrast.py carries the full per-field element matrix.
   ════════════════════════════════════════════════════════════════════════ */
:root{
  --paper:#FAF6EE; --ink:#141419; --cream:#FFF7E8; --white:#FFFFFF;
  --soft:#55555E;  /* secondary text on paper/white/cream — 6.84:1 min */
  --sub:#3A3A42;   /* subline text on paper — 10.45:1 */
  --yellow:#FFC800; --cobalt:#2B3BFF; --coral:#FF4A2D;
  --shadow:rgba(10,10,20,.85);
  /* default aisle (pages with no single aisle): cobalt, as FIGURED Nº 01 */
  --field:#2B3BFF; --on:#FFF7E8; --fieldink:#2B3BFF;
  --panel:#1E2AA8; --panelon:#FFF7E8; --slabbg:#FFF7E8; --slabtx:#1E2AA8;
}
/* ── one MATCHED SET per aisle (Steve's pairing rule, v3): --field =
      the ground; --on = DISPLAY text standing on the field (covers,
      hub ground display); --panel/--panelon = the deep scheme (a
      deepened shade of the field's own hue + its matched text) worn
      by the answer panel, filled buttons/chips and the odometer —
      never the ground's own color with raw ink forced on it;
      --slabbg/--slabtx = the step chips inside the panel; --fieldink
      = the field deepened for TEXT on paper/white (links, labels,
      markers). Every value is proven in check-contrast.py. ── */
[data-aisle="money"]{--field:#0A9150;--on:#141419;--fieldink:#076B3B;--panel:#065C33;--panelon:#FFF7E8;--slabbg:#FFF7E8;--slabtx:#065C33}
[data-aisle="home"]{--field:#FF7A1A;--on:#201203;--fieldink:#8F3C00;--panel:#8F3C00;--panelon:#FFF7E8;--slabbg:#FFF7E8;--slabtx:#8F3C00}
[data-aisle="cars"]{--field:#2B3BFF;--on:#FFF7E8;--fieldink:#2B3BFF;--panel:#1E2AA8;--panelon:#FFF7E8;--slabbg:#FFF7E8;--slabtx:#1E2AA8}
[data-aisle="electrical"]{--field:#2B3BFF;--on:#FFF7E8;--fieldink:#2B3BFF;--panel:#1E2AA8;--panelon:#FFF7E8;--slabbg:#FFF7E8;--slabtx:#1E2AA8}
[data-aisle="cooking"]{--field:#FF4A2D;--on:#141419;--fieldink:#A52608;--panel:#992206;--panelon:#FFF7E8;--slabbg:#FFF7E8;--slabtx:#992206}
[data-aisle="health"]{--field:#FF2E88;--on:#141419;--fieldink:#A80E57;--panel:#9C0B50;--panelon:#FFF7E8;--slabbg:#FFF7E8;--slabtx:#9C0B50}
[data-aisle="school"]{--field:#FFC800;--on:#141419;--fieldink:#6E5100;--panel:#141419;--panelon:#FFF7E8;--panelbig:#FFC800;--slabbg:#FFC800;--slabtx:#141419}
[data-aisle="convert"]{--field:#6C2BEE;--on:#FFF7E8;--fieldink:#6C2BEE;--panel:#4A1CA8;--panelon:#FFF7E8;--slabbg:#FFF7E8;--slabtx:#4A1CA8}
[data-aisle="text"]{--field:#6C2BEE;--on:#FFF7E8;--fieldink:#6C2BEE;--panel:#4A1CA8;--panelon:#FFF7E8;--slabbg:#FFF7E8;--slabtx:#4A1CA8}
[data-aisle="games"]{--field:#141419;--on:#FFF7E8;--fieldink:#141419;--panel:#26262E;--panelon:#FFF7E8;--slabbg:#FFF7E8;--slabtx:#141419}
[data-aisle="hobbies"]{--field:#0A9150;--on:#141419;--fieldink:#076B3B;--panel:#065C33;--panelon:#FFF7E8;--slabbg:#FFF7E8;--slabtx:#065C33}
[data-aisle="dates"]{--field:#FF2E88;--on:#141419;--fieldink:#A80E57;--panel:#9C0B50;--panelon:#FFF7E8;--slabbg:#FFF7E8;--slabtx:#9C0B50}
[data-aisle="generators"]{--field:#6C2BEE;--on:#FFF7E8;--fieldink:#6C2BEE;--panel:#4A1CA8;--panelon:#FFF7E8;--slabbg:#FFF7E8;--slabtx:#4A1CA8}
[data-aisle="chance"]{--field:#FFC800;--on:#141419;--fieldink:#6E5100;--panel:#141419;--panelon:#FFF7E8;--panelbig:#FFC800;--slabbg:#FFC800;--slabtx:#141419}

/* ── the ground (v2): the aisle's FULL saturated field, top to bottom,
      edge to edge. The hub keeps the paper — it is the poster wall. ── */
body{background:var(--field);color:var(--ink);
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased}
body.fig-hub{background:var(--paper)}
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
::selection{background:var(--yellow);color:var(--ink)}
:focus-visible{outline:3px solid var(--fieldink);outline-offset:2px}

/* ── THE TICKER — FIGURED's tape, site-wide (injected by theme-figured.js;
      figures baked from the catalog data at build time, never invented).
      CLICKABLE (Steve 2026-11-04 13:26): every item is a door. The visual
      strip stays exactly 32px of ink; the links' hit area is 44px tall,
      centred on the strip (the ticker does not clip vertically, and its
      ink lives on the ::before strip so the taller hit area paints no
      new ink). The tape pauses on hover / focus-within / touch-down so
      a tap on a moving item lands. ── */
.fig-ticker{position:fixed;top:0;left:0;right:0;z-index:60;height:32px;
  color:var(--cream);display:flex;align-items:center}
.fig-ticker::before{content:"";position:absolute;top:0;left:0;right:0;height:32px;background:var(--ink)}
.fig-ticker .fig-track{position:relative;display:flex;white-space:nowrap;animation:figtick 38s linear infinite;will-change:transform}
.fig-ticker:hover .fig-track,.fig-ticker:focus-within .fig-track,.fig-ticker.fig-paused .fig-track{animation-play-state:paused}
.fig-ticker .fig-half{display:flex;align-items:center;height:32px;margin:0;padding:0;list-style:none}
.fig-ticker .fig-itemwrap{display:flex;align-items:center}
.fig-ticker .fig-item{display:flex;align-items:center;min-height:44px;padding:0 1px;
  font-family:'Anton',sans-serif;font-size:13px;letter-spacing:1.6px;text-transform:uppercase;color:var(--cream)}
.fig-ticker a.fig-item{text-decoration:none;cursor:pointer}
.fig-ticker a.fig-item:hover{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:3px}
.fig-ticker a.fig-item:active{color:var(--yellow)}
.fig-ticker .fig-sep{font-family:'Anton',sans-serif;font-size:13px;padding:0 4px}
.fig-ticker b{color:var(--yellow);font-weight:400}
@keyframes figtick{to{transform:translateX(-50%)}}
body.fig-ticked{padding-top:32px}

/* ── masthead: the paper bar, nothing under it. v2 made it a PAPER
   PANEL floating on the field (FIGURED's paper bar, boxed); v3 made
   the hub masthead the same bar. v4 (Steve 2026-11-04 12:11): the
   band that hung under the bar — the aisle field strip, and the
   rainbow palette strip on the hub — is DELETED on every page type:
   "The rainbow at the top is not right." Ticker, masthead bar, page.
   Palette treatments elsewhere (poster-wall aisle sections, chips)
   are not this strip and stay. ── */
header{border-bottom:2.5px solid var(--ink);padding:16px 0 14px;position:relative}
body:not(.fig-hub) header,body.fig-hub header{background:var(--paper);border:2.5px solid var(--ink);
  border-radius:20px;box-shadow:7px 7px 0 var(--shadow);padding:14px 18px;margin-top:16px}
.cmmark{width:44px;height:44px;border-radius:12px;background:var(--cobalt);color:var(--cream);
  border:2.5px solid var(--ink);box-shadow:4px 4px 0 var(--shadow);
  font-family:'Anton',sans-serif;font-weight:400;font-size:21px}
.cmword{font-family:'Anton',sans-serif;font-weight:400;font-size:32px;letter-spacing:.5px;color:var(--ink)}
.cmword b{color:var(--coral);font-weight:400}
.backlink{color:var(--sub);background:#fff;border:2px solid var(--ink);border-radius:999px;
  padding:8px 13px;box-shadow:3px 3px 0 var(--shadow);transition:transform .18s ease,box-shadow .18s ease}
.backlink:hover{color:var(--ink);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--shadow)}

/* ── type voice: Anton display, Archivo text ── */
h1{font-family:'Anton',sans-serif;font-weight:400;color:var(--ink);
  font-size:clamp(44px,10.5vw,68px);letter-spacing:.01em}
body.fig-hub h1{font-size:clamp(48px,12vw,76px)}
.eyebrow{display:inline-block;background:var(--panel);color:var(--panelon);
  border:2.5px solid var(--ink);border-radius:999px;padding:5px 12px;
  font-size:11px;font-weight:800;letter-spacing:2.2px;box-shadow:3px 3px 0 var(--shadow)}
.subline{color:var(--ink);font-weight:700}
.pledge{color:var(--sub);font-weight:600}
.countline{font-family:'Anton',sans-serif;font-weight:400;color:var(--ink);
  text-transform:uppercase;letter-spacing:.06em;font-size:19px}

/* ── v2 cover intro, v3 pairing pass: on aisle pages the intro plays
      the FIGURED cover — the eyebrow becomes an ink chip (cream on
      ink, 17.24:1) and the H1 stands directly on the field in the
      aisle's --on pairing (display size; every pair ≥4.53 anyway).
      The SENTENCES no longer stand raw on the field: mid-luminance
      fields cap near 5–6:1 for any text color, so the subline and
      pledge ride one fused PAPER PANEL (ink/sub on paper, 17.03 /
      10.45) — display shouts on the field, sentences sit on paper. ── */
body:not(.fig-hub) .eyebrow{background:var(--ink);color:var(--cream)}
body:not(.fig-hub) h1{color:var(--on)}
body:not(.fig-hub) .subline{background:var(--paper);border:2.5px solid var(--ink);
  border-radius:20px;box-shadow:7px 7px 0 var(--shadow);padding:13px 18px;margin:0 0 14px}
body:not(.fig-hub) .pledge{background:var(--paper);border:2.5px solid var(--ink);
  border-radius:20px;box-shadow:7px 7px 0 var(--shadow);padding:13px 18px;margin:0 0 14px}
body:not(.fig-hub) .subline:has(+ .pledge){border-bottom:none;border-radius:20px 20px 0 0;
  box-shadow:7px 0 0 var(--shadow);margin-bottom:0;padding-bottom:2px}
body:not(.fig-hub) .subline + .pledge{border-top:none;border-radius:0 0 20px 20px;padding-top:2px}

/* ── hub furniture ── */
.search input{background:#fff;border:2.5px solid var(--ink);color:var(--ink);
  box-shadow:5px 5px 0 var(--shadow);font-family:'Archivo',sans-serif;border-radius:14px;
  min-height:64px;font-size:19px}
.search input::placeholder{color:#6E6E77}
.search input:focus{outline:3px solid var(--fieldink);outline-offset:2px}
.catnav a{background:#fff;border:2px solid var(--ink);color:var(--ink);
  box-shadow:3px 3px 0 var(--shadow);transition:transform .18s ease,box-shadow .18s ease}
.catnav a:hover{border-color:var(--ink);color:var(--ink);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--shadow)}
.catnav a b{background:var(--panel);color:var(--panelon);border:2px solid var(--ink);
  border-radius:999px;padding:0 7px;margin-left:7px}
.noresults{color:var(--sub)}
.fineprint{color:var(--soft)}

/* ── hub aisle heads: poster heads, numbered like FIGURED stories ── */
.slabel{font-family:'Anton',sans-serif;font-weight:400;color:var(--ink);letter-spacing:.03em}
#shelves{counter-reset:aisle}
#shelves .slabel{counter-increment:aisle;font-size:clamp(34px,7vw,50px);line-height:1;
  margin:48px 0 16px;display:flex;align-items:center;gap:14px}
#shelves .slabel::before{content:counter(aisle,decimal-leading-zero);
  font-size:.42em;line-height:1;background:var(--panel);color:var(--panelon);
  border:2.5px solid var(--ink);border-radius:10px;padding:.22em .45em;
  box-shadow:3px 3px 0 var(--shadow)}
.docsec .slabel{font-size:clamp(26px,5.6vw,34px);padding-bottom:9px;
  background-image:linear-gradient(var(--field),var(--field));
  background-size:64px 5px;background-repeat:no-repeat;background-position:0 100%}
/* v2: off the hub, a section head is an INK PANEL chip floating on the
   field (cream on ink) — the field underline bar is gone with the paper. */
body:not(.fig-hub) .slabel{display:inline-block;background:var(--ink);color:var(--cream);
  border:2.5px solid var(--ink);border-radius:12px;padding:9px 16px;
  box-shadow:4px 4px 0 var(--shadow);background-image:none}

/* ── cards: white poster shells, ink borders, hard shadows, field bar ── */
.toolcard{background:#fff;border:2.5px solid var(--ink);border-radius:20px;
  box-shadow:7px 7px 0 var(--shadow);position:relative;overflow:hidden;padding:20px;padding-top:27px;
  transition:transform .18s ease,box-shadow .18s ease}
.toolcard::before{content:"";position:absolute;top:0;left:0;right:0;height:7px;background:var(--field)}
.toolcard:hover{border-color:var(--ink);transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--shadow)}
.toolcard h3{font-family:'Anton',sans-serif;font-weight:400;color:var(--ink);font-size:27px}
.toolcard p{color:var(--soft);font-size:15.5px}

/* ── the hub odometer: FIGURED's bar, translated to shelf wayfinding ── */
.fig-odo{position:fixed;left:0;right:0;bottom:0;z-index:45;
  height:calc(56px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
  display:flex;align-items:center;gap:10px;padding-left:16px;padding-right:12px;
  background:var(--panel);color:var(--panelon);border-top:2.5px solid var(--ink);transition:background .4s}
.fig-odo .num{font-family:'Anton',sans-serif;font-size:21px;white-space:nowrap}
.fig-odo .sec{flex:1;text-align:center;font-size:11px;font-weight:800;letter-spacing:2.2px;
  text-transform:uppercase;white-space:nowrap;overflow:hidden}
.fig-odo button{font-family:'Anton',sans-serif;font-size:13px;letter-spacing:.6px;text-transform:uppercase;
  background:rgba(0,0,0,.25);color:inherit;border:2px solid currentColor;border-radius:999px;
  padding:7px 12px;cursor:pointer;white-space:nowrap}
.fig-odo button:active{transform:scale(.96)}
body.fig-hub{padding-bottom:76px}

/* ── V3 · THE HUB TURNOVER — the ground itself turns. setOdo stamps the
      current aisle on the hub body (same signal that drives the
      odometer); the background eases to that aisle's field. Standing
      on the turned ground, DISPLAY text (the H1, shelf heads) takes
      the field's --on pairing — the blog's cover treatment — while
      every SENTENCE moves onto paper (the intro trio fuses into one
      paper panel; the footer becomes the aisle pages' paper panel;
      fine print and the no-results line get paper chips), because
      mid-luminance fields cap near 5–6:1 for any raw text color.
      Proven per field in check-contrast.py's HUB TURNOVER audit. At
      rest (no aisle stamped yet) the hub is v2's paper poster wall.
      --gon ("ground on") mirrors the CURRENT aisle's --on at body
      level: shelf heads carry their own data-aisle (it sets their
      number chip's field), which would shadow --on with the wrong
      aisle's pairing whenever a neighbouring shelf peeks into view —
      their text pairs with the GROUND, so it reads --gon instead.
      Reduced motion: the global block at the end of this file kills
      the transition, so the turn is instant for those readers. ── */
body.fig-hub{transition:background-color .6s ease}
body.fig-hub[data-aisle]{background:var(--field)}
body[data-aisle="money"]{--gon:#141419}
body[data-aisle="home"]{--gon:#201203}
body[data-aisle="cars"]{--gon:#FFF7E8}
body[data-aisle="electrical"]{--gon:#FFF7E8}
body[data-aisle="cooking"]{--gon:#141419}
body[data-aisle="health"]{--gon:#141419}
body[data-aisle="school"]{--gon:#141419}
body[data-aisle="convert"]{--gon:#FFF7E8}
body[data-aisle="text"]{--gon:#FFF7E8}
body[data-aisle="games"]{--gon:#FFF7E8}
body[data-aisle="hobbies"]{--gon:#141419}
body[data-aisle="dates"]{--gon:#141419}
body[data-aisle="generators"]{--gon:#FFF7E8}
body[data-aisle="chance"]{--gon:#141419}
body.fig-hub[data-aisle] h1{color:var(--on)}
body.fig-hub[data-aisle] .subline{background:var(--paper);border:2.5px solid var(--ink);
  border-bottom:none;border-radius:20px 20px 0 0;box-shadow:7px 0 0 var(--shadow);
  padding:13px 18px 2px;margin:0}
body.fig-hub[data-aisle] .pledge{background:var(--paper);border:2.5px solid var(--ink);
  border-top:none;border-bottom:none;border-radius:0;box-shadow:7px 0 0 var(--shadow);
  padding:2px 18px;margin:0}
body.fig-hub[data-aisle] .countline{background:var(--paper);border:2.5px solid var(--ink);
  border-top:none;border-radius:0 0 20px 20px;box-shadow:7px 7px 0 var(--shadow);
  padding:2px 18px 13px;margin:0 0 6px}
body.fig-hub[data-aisle] .noresults{background:var(--paper);color:var(--sub);
  border:2.5px solid var(--ink);border-radius:12px;box-shadow:4px 4px 0 var(--shadow);
  padding:12px 16px}
body.fig-hub[data-aisle] .fineprint{display:inline-block;background:var(--paper);color:var(--sub);
  border:2px solid var(--ink);border-radius:10px;box-shadow:3px 3px 0 var(--shadow);
  padding:7px 12px}
body.fig-hub #shelves .slabel{color:var(--gon,var(--ink))}
body.fig-hub[data-aisle] :focus-visible{outline-color:var(--on)}
body.fig-hub[data-aisle] .search input:focus{outline-color:var(--on)}

/* ── the working surface stays calm: white card, paper wells, ink text ── */
.tool{background:#fff;border:2.5px solid var(--ink);border-radius:20px;
  box-shadow:7px 7px 0 var(--shadow);padding:26px}
.field label{color:var(--ink);font-size:15px;font-weight:800}
.field input,.field select{background:var(--paper);border:2px solid var(--ink);
  color:var(--ink);font-family:'Archivo',sans-serif;border-radius:12px;
  min-height:64px;font-size:20px;padding:12px 16px}
.field input:focus,.field select:focus{outline:3px solid var(--fieldink);outline-offset:1px}
.fhelp{color:var(--soft)}
.calc{background:var(--panel);color:var(--panelon);border:2.5px solid var(--ink);
  box-shadow:4px 4px 0 rgba(10,10,20,.45);font-family:'Anton',sans-serif;font-weight:400;
  font-size:19px;letter-spacing:.08em;min-height:60px;padding:14px 24px}
.calc:active{transform:translate(2px,2px);box-shadow:2px 2px 0 rgba(10,10,20,.45)}
#favBtn{background:#fff!important;color:var(--ink)!important;
  border:2.5px solid var(--ink)!important;box-shadow:3px 3px 0 var(--shadow)!important;
  font-family:'Archivo',sans-serif!important}

/* ── the answer panel wears the aisle's DEEP SCHEME (v3 pairing pass):
      a deepened shade of the field's own hue with its matched text —
      never the ground's own color with raw ink forced on it (that was
      the green-on-green panel Steve caught). School/chance flips to
      an ink panel whose big figure runs yellow — the ticker pairing.
      Inside: body text --panelon, STEP chips --slabbg/--slabtx, each
      pair designed per aisle and proven in check-contrast.py. ── */
.ans{background:var(--panel);color:var(--panelon);border:2.5px solid var(--ink);
  border-radius:20px;box-shadow:7px 7px 0 var(--shadow);padding:22px 24px}
.ans .big{font-family:'Anton',sans-serif;font-weight:400;color:var(--panelbig,var(--panelon));letter-spacing:.01em;
  font-size:clamp(54px,12vw,92px);line-height:1.02}
.ans .sub{color:var(--panelon);font-weight:600}
.ans .steps li,.mathbox .steps li{color:var(--panelon);border-top:1px dashed rgba(128,128,128,.5)}
.ans .steps .slab,.mathbox .steps .slab{background:var(--slabbg);color:var(--slabtx);
  display:inline-block;border-radius:999px;padding:2px 9px;font-size:10.5px;
  letter-spacing:.14em;margin:0 8px 2px 0}
.ans .src,.mathbox .src{color:var(--panelon);font-weight:600}
.also{border-top:2px solid var(--panelon)}
.alsoh{color:var(--panelon)}
.alsorow{color:var(--panelon);border-top:1px dashed rgba(128,128,128,.5)}
.alsorow b{color:var(--panelon)}
.alsonote{color:var(--panelon)}

/* ── doc sections under the tool ── */
/* v2: the how-to list is a PAPER PANEL on the field — body text never
   sits raw on a field. */
.howto{color:var(--ink);background:var(--paper);border:2.5px solid var(--ink);
  border-radius:20px;box-shadow:7px 7px 0 var(--shadow);padding:18px 20px 18px 42px}
.howto li::marker{color:var(--fieldink);font-weight:800}
.mathbox{background:var(--panel);color:var(--panelon);border:2.5px solid var(--ink);
  border-radius:20px;box-shadow:7px 7px 0 var(--shadow);padding:18px 20px}
.mathcap{color:var(--panelon)}
.faqitem{background:#fff;border:2.5px solid var(--ink);border-radius:20px;
  box-shadow:7px 7px 0 var(--shadow);position:relative;overflow:hidden;padding-top:20px}
.faqitem::before{content:"";position:absolute;top:0;left:0;right:0;height:7px;background:var(--field)}
.faqitem h3{font-family:'Anton',sans-serif;font-weight:400;color:var(--ink)}
.faqitem p{color:#2A2A30}
/* v2: crumbs + hubline ride as slim PAPER PANELS on the field — their
   v1 text pairings are the paper pairings, unchanged inside the panel. */
.crumbs{color:var(--soft);background:var(--paper);border:2px solid var(--ink);
  border-radius:12px;box-shadow:4px 4px 0 var(--shadow);padding:9px 14px}
.crumbs a{color:var(--soft)}
.crumbs a:hover{color:var(--fieldink)}
.crumbs .here{color:var(--ink)}
.crumbs span{color:var(--fieldink);opacity:1;font-weight:800}
.hubline{color:var(--soft);background:var(--paper);border:2px solid var(--ink);
  border-radius:12px;box-shadow:4px 4px 0 var(--shadow);padding:10px 14px}
.hubline a{color:var(--fieldink);text-decoration:underline;text-underline-offset:3px}
footer{border-top:2.5px solid var(--ink);padding-top:16px;color:var(--soft)}
/* v2: the footer (tip jar included) is a PAPER PANEL. v3 layout pass:
   ONE footer construction on every page type, the hub included — the
   panel below replaces the border-top rule above wherever it lands. */
footer{background:var(--paper);border:2.5px solid var(--ink);
  border-radius:20px;box-shadow:7px 7px 0 var(--shadow);padding:16px 18px}

/* ── THE TIP JAR — injected into the footer by theme-figured.js.
      Ink on signal yellow is the ::selection pairing (9.5:1+). ── */
.fig-tipjar-row{margin:14px 0 2px}
.fig-tipjar{display:inline-flex;align-items:center;gap:8px;
  font-family:'Anton',sans-serif;font-size:14px;letter-spacing:.6px;
  text-transform:uppercase;text-decoration:none;
  color:var(--ink);background:var(--yellow);
  border:2.5px solid var(--ink);border-radius:999px;padding:9px 17px;
  box-shadow:3px 3px 0 var(--shadow)}
.fig-tipjar:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--shadow)}
.fig-tipjar svg{flex:none}

/* ── standalone pages (page <style> blocks load after this layer's link,
      so these carry the extra element of specificity) ── */
body .card{background:#fff;border:2.5px solid var(--ink);border-radius:20px;
  box-shadow:7px 7px 0 var(--shadow)}
body .card h2{font-family:'Anton',sans-serif;font-weight:400;color:var(--ink)}
body .card p.d{color:var(--soft)}
body .lab{color:var(--ink)}
body .chip{background:#fff;color:var(--ink);border:2px solid var(--ink);
  font-family:'Archivo',sans-serif;box-shadow:2px 2px 0 var(--shadow)}
body .chip.on{background:var(--panel);color:var(--panelon);border-color:var(--ink)}
body .card select,body .card input[type=text],body .card input[type=number],
body .card textarea{background:var(--paper);border:2px solid var(--ink);
  color:var(--ink);font-family:'Archivo',sans-serif}
body .card select:focus,body .card input:focus,body .card textarea:focus{
  outline:3px solid var(--fieldink);outline-offset:1px}
body .btn,body .bigbtn{background:var(--panel);color:var(--panelon);
  font-family:'Anton',sans-serif;font-weight:400;letter-spacing:.08em;
  border:2.5px solid var(--ink);box-shadow:4px 4px 0 rgba(10,10,20,.45)}
body .btn:active,body .bigbtn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 rgba(10,10,20,.45)}
body .btn2{background:#fff;color:var(--ink);border:2px solid var(--ink);
  font-family:'Archivo',sans-serif;box-shadow:2px 2px 0 var(--shadow)}
body .btn2.on{background:var(--panel);color:var(--panelon);border-color:var(--ink)}
body .name{background:var(--paper);border:2px solid var(--ink);border-radius:14px;
  box-shadow:3px 3px 0 var(--shadow)}
body .name b{font-family:'Anton',sans-serif;font-weight:400;color:var(--ink)}
body .name .m{color:#2A2A30}
body .name .o{color:var(--fieldink)}
body .name .w{color:var(--soft)}
body .uname{color:var(--ink);font-family:'Archivo',sans-serif}
body .bigout{font-family:'Anton',sans-serif;font-weight:400;color:var(--ink)}
body .out{color:var(--ink)}
body .small{color:var(--soft)}
body .ball{background:#fff;border:2.5px solid var(--ink);color:var(--ink);
  box-shadow:2px 2px 0 var(--shadow)}
body .ball.bonus{background:var(--yellow);color:var(--ink);border-color:var(--ink)}
body .canary{background:#fff;border:2.5px solid var(--ink);border-radius:20px;
  box-shadow:7px 7px 0 var(--shadow)}
body .qtext{font-family:'Anton',sans-serif;font-weight:400;color:var(--ink)}
body .qcount{color:var(--fieldink)}
body .abtn{background:#fff;color:var(--ink);border:2px solid var(--ink);
  font-family:'Archivo',sans-serif;box-shadow:3px 3px 0 var(--shadow);
  transition:transform .18s ease,box-shadow .18s ease}
body .abtn:hover{border-color:var(--ink);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--shadow)}
body .guesstext{font-family:'Anton',sans-serif;font-weight:400;color:var(--fieldink)}
body .meter{background:#E9E1CE;border:2px solid var(--ink)}
body .meter i{background:var(--field)}
/* v2: the whole map stage is one PAPER PANEL on the games field —
   measure line, pin list and fine print keep their paper pairings. */
body .mapwrap{background:var(--paper);border:2.5px solid var(--ink);border-radius:20px;
  box-shadow:7px 7px 0 var(--shadow);padding:18px}
body .mapwrap canvas{border:2.5px solid var(--ink);box-shadow:5px 5px 0 var(--shadow)}
body .mtools button{background:#fff;color:var(--ink);border:2px solid var(--ink);
  font-family:'Archivo',sans-serif;box-shadow:2px 2px 0 var(--shadow)}
body .mtools button.on{background:var(--panel);color:var(--panelon);border-color:var(--ink)}
body .pinlist{color:var(--sub)}
body .pinlist b{color:var(--ink)}
body .measure{color:var(--fieldink)}

/* ── inline-style rescues: the audience pages carry dark gradient cards
      and placeholder boxes as inline styles; !important is the only key
      that opens an inline style, and it opens nothing else. ── */
div[style*="4A2C15"]{background:var(--cream)!important;border:2.5px solid var(--ink)!important;
  box-shadow:7px 7px 0 var(--shadow)!important}
div[style*="4A2C15"] h3{font-family:'Anton',sans-serif!important;font-weight:400!important;color:var(--ink)!important}
div[style*="4A2C15"] [style*="--c"]{color:#2A2A30!important}
div[style*="4A2C15"] [style*="--mustard"]{color:var(--fieldink)!important}
div[style*="dashed"]{color:var(--ink)!important;border:2px dashed var(--ink)!important;background:#fff!important}
#cmInstallBtn{background:var(--cobalt)!important;color:var(--cream)!important;
  border:2.5px solid var(--ink)!important;box-shadow:4px 4px 0 var(--shadow)!important;
  font-family:'Archivo',sans-serif!important}
div[style*="position:fixed;left:12px"]{background:var(--paper)!important;
  border:2.5px solid var(--ink)!important;color:var(--ink)!important;
  box-shadow:5px 5px 0 var(--shadow)!important;font-family:'Archivo',sans-serif!important}
#cmCkOk{background:var(--cobalt)!important;color:var(--cream)!important;border:2px solid var(--ink)!important}
#cmCkNo{background:#fff!important;color:var(--ink)!important;border:2px solid var(--ink)!important}

/* ── rescues for the base pages' inline-styled text, whose ground
      changed under it. V3 pairing pass: a --csoft paragraph standing
      loose on the field (the legal pages' body text) becomes a PAPER
      PANEL — sentences never stand raw on a mid-luminance field. The
      same paragraph inside a panel that already exists (the canary's
      white stage, the audience cards, standalone .card panels) just
      goes dark — the neutralizers below outrank the panel rule, and
      the audience cards' blanket !important color rescue still wins
      inside them. ── */
p[style*="--csoft"]{color:#2A2A30!important;background:var(--paper);border:2.5px solid var(--ink);
  border-radius:14px;box-shadow:4px 4px 0 var(--shadow);padding:13px 16px}
.canary p[style*="--csoft"]{color:#2A2A30!important;background:transparent;
  border:none;box-shadow:none;padding:0;border-radius:0}
div[style*="4A2C15"] p[style*="--csoft"]{background:transparent;
  border:none;box-shadow:none;padding:0;border-radius:0}
body .card p[style*="--csoft"]{color:#2A2A30!important;background:transparent;
  border:none;box-shadow:none;padding:0;border-radius:0}
/* the account page's delete button: its inline #FFB59D label washes out
   on the cream card — a deep red keeps the meaning and passes AA. */
#deleteBtn{color:#A11C00!important}

/* ── V3 LAYOUT PASS (Steve, 2026-11-04 11:37: "Formatting is off.
      It's to the left. Make the calcs bigger. I'm not feeling
      cohesive."): the base stylesheet caps the tool-page working
      column (.tool, .relgrid, .crumbs, .docsec, .hubline) at 720px
      inside the centred 1080px wrap — that cap is what pinned every
      calculator to the left under a full-width intro. The working
      column now takes the FULL MEASURE of the centred column, the
      calculator is the hero of its page (taller inputs at 20px, a
      60px action, the answer at poster scale — clamp(54px,12vw,92px)
      Anton), and one geometry system runs everywhere: PANELS are
      2.5px ink border / 20px radius / 7px hard shadow (masthead bar,
      tool, answer, mathbox, how-to, FAQ, cards, footer, intro
      panels); filled ACTIONS take the blog's button construction
      (4px shadow at .45 alpha); slim CHIPS (crumbs, hubline, fine
      print) keep the smaller 10–12px tier, consistently. ── */
.tool,.relgrid,.crumbs,.docsec,.hubline{max-width:none}

/* ── THE FLOW (2026-11-04 12:42, Steve's "Go"): the hub Fun Desk band
      + the next-number hooks + the wander shuffle, built by
      flow-figured.js. Pairing discipline, per the v3 pass: the band's
      cards are WHITE poster shells (the toolcard construction) so
      their text keeps the proven card pairs whatever field the hub
      ground has turned to; the category/field colours ride the 7px
      top bar as pure decoration and carry no text. The band head
      stands on the ground like a shelf head (--gon). The hook panel
      is a PAPER panel on the aisle field (the how-to construction):
      ink text, the big figure in --fieldink (the deepened field,
      proven on paper per aisle in check-contrast.py), the kicker a
      cream-on-ink chip, filled actions in the aisle's deep scheme. ── */
.fig-desk{margin:34px 0 8px}
.fig-desk-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.fig-desk-chip{background:var(--panel);color:var(--panelon);border:2.5px solid var(--ink);
  border-radius:999px;padding:5px 12px;font-size:11px;font-weight:800;letter-spacing:2.2px;
  box-shadow:3px 3px 0 var(--shadow)}
.fig-desk-title{font-family:'Anton',sans-serif;font-weight:400;color:var(--ink);
  font-size:clamp(34px,7vw,50px);line-height:1;margin:0;flex:1}
body.fig-hub[data-aisle] .fig-desk-title{color:var(--gon,var(--ink))}
.fig-desk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:820px){.fig-desk-grid{grid-template-columns:1fr}}
.fig-desk-card{background:#fff;border:2.5px solid var(--ink);border-radius:20px;
  box-shadow:7px 7px 0 var(--shadow);position:relative;overflow:hidden;
  padding:22px 20px 18px;display:flex;flex-direction:column;gap:9px;
  text-decoration:none;color:var(--ink);
  transition:transform .18s ease,box-shadow .18s ease}
.fig-desk-card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--shadow)}
.fig-desk-bar{position:absolute;top:0;left:0;right:0;height:7px}
.fig-desk-kick{align-self:flex-start;background:var(--ink);color:var(--cream);
  border-radius:999px;padding:3px 10px;font-size:10.5px;font-weight:800;letter-spacing:.14em}
.fig-desk-fig{font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(40px,8vw,58px);
  line-height:1;color:var(--ink)}
.fig-desk-quote{font-size:21px;font-weight:700;line-height:1.35;color:var(--ink)}
.fig-desk-text{color:var(--soft);font-size:15.5px;line-height:1.45}
.fig-desk-text b{color:var(--ink)}
.fig-desk-src{color:var(--soft);font-size:13px;font-weight:600}
.fig-desk-door{margin-top:auto;color:var(--cobalt);font-weight:800;font-size:14.5px;
  text-decoration:underline;text-underline-offset:3px}
.fig-shuffle{background:var(--panel);color:var(--panelon);border:2.5px solid var(--ink);
  border-radius:999px;box-shadow:3px 3px 0 var(--shadow);font-family:'Anton',sans-serif;
  font-weight:400;font-size:14px;letter-spacing:.6px;text-transform:uppercase;
  padding:10px 18px;cursor:pointer;white-space:nowrap}
.fig-shuffle:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--shadow)}

/* ── the next-number hook: one paper panel under the answer ── */
.fig-hook{background:var(--paper);border:2.5px solid var(--ink);border-radius:20px;
  box-shadow:7px 7px 0 var(--shadow);padding:18px 22px 16px;margin:22px 0 6px}
.fig-hook-head{display:flex;align-items:center;margin-bottom:8px}
.fig-hook-chip{background:var(--ink);color:var(--cream);border-radius:999px;
  padding:3px 10px;font-size:10.5px;font-weight:800;letter-spacing:.14em}
.fig-hook-stage{min-height:158px;display:flex}
.fig-hook-slide{display:none;flex-direction:column;gap:6px;justify-content:center;
  width:100%;text-decoration:none;color:var(--ink);text-align:left;
  background:none;border:none;font:inherit;padding:0}
.fig-hook-slide.on{display:flex;animation:figfade .55s ease}
@keyframes figfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.fig-hook-kick{color:var(--fieldink);font-size:11px;font-weight:800;letter-spacing:2.2px}
.fig-hook-big{font-family:'Anton',sans-serif;font-weight:400;color:var(--fieldink);
  font-size:clamp(40px,9vw,64px);line-height:1.02;letter-spacing:.01em}
.fig-hook-line{font-size:17px;font-weight:600;color:var(--ink);line-height:1.4}
.fig-hook-src{color:var(--sub);font-size:13px;font-weight:600;line-height:1.45}
.fig-hook-door{color:var(--fieldink);font-weight:800;font-size:14.5px;
  text-decoration:underline;text-underline-offset:3px}
.fig-hook-btn{cursor:pointer}
.fig-hook-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.fig-hook-dots{display:flex;gap:8px}
.fig-hook-dot{width:14px;height:14px;border-radius:50%;background:#fff;
  border:2px solid var(--ink);padding:0;cursor:pointer}
.fig-hook-dot.on{background:var(--panel)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .toolcard:hover,.backlink:hover,body .abtn:hover{transform:none}
}