/* module-v3.css — the history lane on the Theory v2 design system.
 * Chat E (Learn design v2), 29 September 2026. Spec: theory-kit/SPEC-V2-HISTORY.md.
 *
 * Loaded after atlas-v3.css, module-v2.css (history pages) or learn-v5.css (series
 * pages), and theory-v2.css. A NEW FILENAME: Hostinger edge-caches CSS for seven
 * days, and module-v2.css stays exactly as it was for any page still cached.
 *
 * How it works, in three moves:
 *   1. BRIDGE. module-v2.css already paints through atlas tokens (--accent, --wash,
 *      --good, --chip). On body.hv3 those point at the v2 tokens theory-v2.css sets
 *      for both schemes, so most of the history engine's look turns v2 — and dark —
 *      with no selector rewritten.
 *   2. OVERRIDE the ~40 hard-coded colours in module-v2.css (answer boxes, cards,
 *      option states) with v2 tokens, so dark mode is real rather than light boxes
 *      on a dark page (the theory v1 mistake).
 *   3. SHAPE: step cards, callouts and the end screen take the v2 component shapes
 *      (one box, 4px rule, icon + uppercase label, 6px label-to-body).
 * Every text colour here is audited in the browser by tools/check_history_v2.mjs.
 */

/* ---- 1. bridge ------------------------------------------------------------- */
body.hv3 {
  --accent: var(--cat); --wash: var(--cat-fill); --good: var(--ok); --chip: var(--soft);
  --gold: var(--cat); --warm: var(--mis);
  --amb: #8a5a00; --amb-fill: #fbf5e9;
  --pop: 0 1px 2px rgba(18, 33, 63, .06);
}
@media (prefers-color-scheme: dark) {
  body.hv3 { --amb: #e0b04a; --amb-fill: #2a2418; --pop: none; }
}
body.hv3 .wrap { max-width: 680px; }
body.hv3 a { color: var(--cat); }

/* ---- header band: progress lives in it ------------------------------------ */
.hv3 .thero .bar {
  height: 6px; border-radius: 6px; background: var(--card); border: 1px solid var(--line);
  overflow: hidden; margin: 14px 0 6px;
}
.hv3 .thero .bar i { display: block; height: 100%; width: 0; background: var(--cat); border-radius: 6px; transition: width .28s ease; }
.hv3 .thero #pnum { margin: 0; font-size: 12.5px; font-weight: 650; color: var(--muted); }
.hv3 .thero .tout { color: var(--muted); }

/* ---- the opening (was the cover screen) ----------------------------------- */
.hv3 .step.cover { background: transparent; border: 0; box-shadow: none; padding: 2px 0 0; margin: 0 0 18px; }
.hv3 .cover .qkick {
  display: flex; align-items: center; gap: 7px; margin: 0 0 6px; font-size: 12px; line-height: 16px;
  font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cat);
}
.hv3 .cover .hook { font-size: 22px; line-height: 28px; letter-spacing: -.012em; font-weight: 780; margin: 0 0 10px; color: var(--ink); }
.hv3 .cover p { font-size: 16px; line-height: 25px; color: var(--ink); margin: 0 0 10px; }
.hv3 .cover .lvl { font-size: 13.5px; line-height: 20px; color: var(--muted); }
.hv3 .cover .cvh { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 12px 0 4px; }
.hv3 .cover .cvl { margin: 0 0 10px; padding-left: 20px; color: var(--ink); }
.hv3 .cover .cvl li { margin: 3px 0; font-size: 15px; line-height: 22px; }
.hv3 .cvmore { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 6px 0 0; }
.hv3 .cvmore > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 44px;
  font-weight: 700; font-size: 14.5px; color: var(--cat);
}
.hv3 .cvmore > summary::-webkit-details-marker { display: none; }
.hv3 .cvmore > summary .ic { transition: transform .2s; flex: 0 0 auto; }
.hv3 .cvmore[open] > summary .ic { transform: rotate(180deg); }
.hv3 .cvmore[open] { padding-bottom: 8px; }
.hv3 .cover .catchup {
  background: var(--amb-fill); border: 1px solid var(--line); border-left: 4px solid var(--amb);
  border-radius: 12px; padding: 12px 14px; color: var(--ink); font-size: 14.5px; line-height: 21px; margin: 0 0 14px;
}

/* ---- a step: the v2 card --------------------------------------------------- */
.hv3 .step {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--pop);
  color: var(--ink); padding: 18px 16px;
}
@media (min-width: 720px) { .hv3 .step { padding: 22px 24px; } }
.hv3 .beat + .beat, .hv3 .beat { margin-bottom: 14px; }
.hv3 .step .pin, .hv3 .pin {
  display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--cat); background: none; padding: 0; margin: 0 0 6px;
}
.hv3 .step h3 { font-size: 21px; line-height: 27px; letter-spacing: -.012em; font-weight: 750; margin: 0 0 12px; color: var(--ink); }
.hv3 .step p { font-size: 16px; line-height: 25px; color: var(--ink); }
.hv3 .step .small, .hv3 .small { color: var(--muted); }
.hv3 .sref .sm, .hv3 .sm { color: var(--cat); }

/* terms: dotted, in the series colour (SPEC-V2 design-findings A.1) */
.hv3 .tm {
  color: inherit; text-decoration: underline dotted; text-decoration-color: var(--cat);
  text-decoration-thickness: 1.5px; text-underline-offset: 3px; background: none;
}
.hv3 .tm:hover, .hv3 .tm[aria-expanded="true"] { color: var(--cat); }
/* the term and source panels: the v2 box */
.hv3 .tp, .hv3 .sp {
  background: var(--soft); border: 1px solid var(--line); border-left: 4px solid var(--cat);
  border-radius: 12px; padding: 12px 14px; color: var(--ink); font-size: 14.5px; line-height: 22px;
}
.hv3 .sp { border-left-color: var(--tip); }
.hv3 .tp .tt, .hv3 .tp b, .hv3 .sp b { color: var(--ink); }
.hv3 .tp em, .hv3 .sp i { color: var(--muted); }

/* the explainer row ("The economics") */
.hv3 .xp {
  background: var(--cat-fill); border: 1px solid var(--line); border-left: 4px solid var(--cat);
  border-radius: 12px; margin: 14px 0; overflow: hidden;
}
.hv3 .xh {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; width: 100%; text-align: left; font: inherit;
  background: none; border: 0; padding: 12px 14px; cursor: pointer; color: var(--ink); min-height: 48px;
}
.hv3 .xh .xl {
  grid-column: 1; display: flex; align-items: center; gap: 6px; font-size: 11.5px; line-height: 16px;
  font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cat);
}
.hv3 .xh .xq { grid-column: 1; font-weight: 700; font-size: 15.5px; line-height: 22px; color: var(--ink); }
.hv3 .xh i { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--cat); font-style: normal; transition: transform .2s; display: inline-flex; }
.hv3 .xh[aria-expanded="true"] i { transform: rotate(180deg); }
.hv3 .xb { padding: 0 14px 14px; }
.hv3 .xb p, .hv3 .xb li { font-size: 15px; line-height: 23px; color: var(--ink); }
.hv3 .xb .anal b { color: var(--cat); }

/* the question */
.hv3 .guessnote { font-size: 13.5px; line-height: 20px; font-weight: 500; color: var(--muted); margin: 18px 0 4px; }
.hv3 .step .q { font-size: 17.5px; line-height: 25px; font-weight: 750; color: var(--ink); margin: 8px 0 12px; }

/* for scale: an exam-tip-style neutral box with its own label */
.hv3 .step .bm {
  background: var(--tip-fill); border: 1px solid var(--line); border-left: 4px solid var(--tip);
  border-radius: 12px; padding: 12px 14px; font-size: 14.5px; line-height: 22px; color: var(--ink); margin: 14px 0 0;
}
.hv3 .bm .tlab { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; color: var(--tip);
  font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

/* options, all forms */
.hv3 .opt, .hv3 .oitem, .hv3 .hlcard, .hv3 .mtile {
  background: var(--card); color: var(--ink); border: 1.5px solid var(--line); border-radius: 12px;
}
.hv3 .opt { padding: 13px 14px; min-height: 48px; font-size: 15.5px; line-height: 22px; }
.hv3 .opt:hover:not(:disabled), .hv3 .oitem:hover:not(:disabled), .hv3 .hlcard:hover:not(:disabled) { border-color: var(--cat); }
.hv3 .opt.right, .hv3 .hlcard.right, .hv3 .oitem.right, .hv3 .mtile.right, .hv3 .opt.taken { border-color: var(--ok); background: var(--ok-fill); }
.hv3 .opt.wrong, .hv3 .hlcard.wrong, .hv3 .oitem.wrong, .hv3 .mtile.wrong { border-color: var(--bad); background: var(--bad-fill); }
.hv3 .opt.right::after, .hv3 .hlcard.right::after, .hv3 .oitem.right::after, .hv3 .opt.taken::after { color: var(--ok); }
.hv3 .opt.wrong::after, .hv3 .hlcard.wrong::after, .hv3 .oitem.wrong::after { color: var(--bad); }
/* theory-v2 prefixes ✓/✗; history already labels the state in words, so the
   decision step (where nothing is marked) and the order rows drop the tick. */
.hv3 [data-type="decide"] .opt.right::before, .hv3 [data-type="decide"] .opt.taken::before,
.hv3 .oitem.right::before, .hv3 .oitem.wrong::before { content: none; }
.hv3 [data-type="decide"] .opt.right { border-color: var(--cat); background: var(--cat-fill); }
.hv3 [data-type="decide"] .opt.right::after { content: 'Your decision'; color: var(--cat); }
.hv3 [data-type="decide"] .opt.right.taken { border-color: var(--ok); background: var(--ok-fill); }
.hv3 [data-type="decide"] .opt.right.taken::after { content: 'Your decision, and what was done'; color: var(--ok); }
.hv3 .done .opt:not(.right):not(.wrong):not(.taken), .hv3 .opt.other, .hv3 .oitem.dim {
  opacity: 1; color: var(--muted); }   /* muted, not faded: opacity is a contrast cut */
.hv3 .opt:disabled, .hv3 .hlcard[disabled], .hv3 .oitem[disabled] { color: var(--ink); }

/* order and odd-one-out rows: flex, as module-v2 had them (theory-v2 makes .oitem a block) */
.hv3 .ord .oitem, .hv3 .odd .oitem { display: flex; align-items: center; gap: 10px; min-height: 48px; font-size: 15px; }
.hv3 .oitem .onum { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800; }
.hv3 .oitem .olab { flex: 1 1 auto; }
.hv3 .oitem.right::after, .hv3 .oitem.wrong::after { flex: 0 0 auto; margin-left: auto; }
/* order */
.hv3 .oitem .onum { background: var(--cat-fill); color: var(--cat); }
.hv3 .oitem.picked .onum { background: var(--cat); color: var(--cat-ink); }
.hv3 .oitem em, .hv3 .oitem .olab { color: var(--ink); }
.hv3 .ordans, .hv3 .ordlist li { color: var(--ink); }

/* higher / lower */
.hv3 .hlcard .hlab { color: var(--muted); }
.hv3 .hlcard .hval { color: var(--ink); }
.hv3 .hl .vs, .hv3 .hl .tie { color: var(--muted); }

/* a typed number */
.hv3 .val .num { background: var(--card); color: var(--ink); border: 1.5px solid var(--line); border-radius: 12px; }
.hv3 .val .num:focus { border-color: var(--cat); outline: 3px solid var(--focus); outline-offset: 2px; }
.hv3 .val .vlab, .hv3 .val .guess { color: var(--muted); }
.hv3 .val .chip { background: var(--card); color: var(--ink); border-color: var(--line); }
.hv3 .val .chip.on { background: var(--cat); border-color: var(--cat); color: var(--cat-ink); }
.hv3 .trk .mk.t { background: var(--ok); }
.hv3 .trk .mk.t b { background: var(--ok); color: var(--cat-ink); }
.hv3 .trk .mk.g { background: var(--bad); }
.hv3 .trk .mk.g b { background: var(--bad); color: var(--cat-ink); }

/* buttons: v2 */
.hv3 .btn { border-radius: 10px; font-weight: 750; }
.hv3 .btn.sec { background: var(--soft); color: var(--ink); border: 1px solid var(--line); }
.hv3 .btn:disabled, .hv3 .btn[disabled] {   /* legible even while inactive; no opacity */
  opacity: 1; background: var(--soft); color: var(--muted); border: 1px solid var(--line); cursor: default; }

/* the answer box: the v2 callout, coloured by how close */
.hv3 .rev {
  background: var(--soft); border: 1px solid var(--line); border-left: 4px solid var(--muted);
  border-radius: 12px; padding: 12px 14px; color: var(--ink); font-size: 15px; line-height: 23px;
}
.hv3 .rev > b { color: var(--ink); }
.hv3 .rev.a { background: var(--ok-fill); border-left-color: var(--ok); }
.hv3 .rev.a > b { color: var(--ok); }
.hv3 .rev.b { background: var(--amb-fill); border-left-color: var(--amb); }
.hv3 .rev.b > b { color: var(--amb); }
.hv3 .rev.c { background: var(--bad-fill); border-left-color: var(--bad); }
.hv3 .rev.c > b { color: var(--bad); }
.hv3 .rev.n { background: var(--cat-fill); border-left-color: var(--cat); }
.hv3 .rev.n > b { color: var(--cat); }
.hv3 .rev .pts { color: var(--ok); }
.hv3 .rev p, .hv3 .rev li { color: var(--ink); }
.hv3 .rev .arole, .hv3 .then .arole { color: var(--muted); }

/* the decision: the dashboard and what was done */
.hv3 .board { background: var(--soft); border: 1px solid var(--line); border-radius: 12px; }
.hv3 .brow { border-color: var(--line); }
.hv3 .brow .bq, .hv3 .brow .bm2 { color: var(--muted); }
.hv3 .brow .bv { color: var(--ink); }
.hv3 .then {
  background: var(--cat-fill); border: 1px solid var(--line); border-left: 4px solid var(--cat);
  border-radius: 12px; padding: 14px 16px; color: var(--ink);
}
.hv3 .then > b { display: flex; align-items: center; gap: 7px; color: var(--cat); font-size: 12px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; margin: 0 0 6px; }
.hv3 .then .yours { font-weight: 700; }
.hv3 .two .side { background: var(--soft); color: var(--ink); border-color: var(--line); }

/* quotes, pictures, timelines, tiles */
.hv3 .pull { border-left: 4px solid var(--cat); background: none; }
.hv3 .pull blockquote { color: var(--ink); }
.hv3 .pull blockquote::before, .hv3 .pull blockquote::after { color: var(--cat); }
.hv3 .pull figcaption, .hv3 .pull figcaption span { color: var(--muted); }
.hv3 .pull figcaption b { color: var(--ink); }
.hv3 .pic img { border-radius: 12px; border: 1px solid var(--line); }
.hv3 .pic figcaption, .hv3 .pic .cred { color: var(--muted); }
.hv3 .tl li::before { background: var(--cat); }
.hv3 .tl b { color: var(--cat); }
.hv3 .tile { background: var(--soft); color: var(--ink); border-color: var(--line); }
.hv3 .tile i, .hv3 .tile em { color: var(--muted); }

/* ---- the end screen ---------------------------------------------------------- */
.hv3 .nextbox { background: var(--cat-fill); }
.hv3 .btn.gonow {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  background: var(--cat); color: var(--cat-ink); text-decoration: none; padding: 14px 16px; font-size: 16px; min-height: 50px;
}
.hv3 .btn.go {
  display: flex; flex-direction: column; gap: 2px; background: var(--card); color: var(--ink);
  border: 1px solid var(--line); text-decoration: none; text-align: left; padding: 12px 14px; margin-top: 10px;
}
.hv3 .btn.go .gon { color: var(--ink); font-weight: 750; }
.hv3 .btn.go .god { color: var(--muted); font-weight: 500; font-size: 14px; line-height: 20px; }
.hv3 .nextbox .prog { color: var(--muted); }
.hv3 .pbar i { background: var(--line); }
.hv3 .pbar i.on { background: var(--cat); }
.hv3 .yourdec .ydm { color: var(--ink); font-weight: 700; }
.hv3 .yourdec .yds { color: var(--muted); }
.hv3 .scorebox { text-align: center; }
.hv3 .scorebox .big { color: var(--ink); }
.hv3 .scorebox .bigsub { color: var(--muted); }
.hv3 .hagain { justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.hv3 #retry { width: auto; }
.hv3 .hagain .btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; padding: 9px 12px; min-height: 40px; }
.hv3 .tscorenav { margin-top: 16px; }
.hv3 .tscorenav .btn { width: 100%; }
.hv3 .tscorenav .btn.gonow { justify-content: space-between; }
.hv3 .tscorenav .btn.sec { color: var(--ink); text-align: left; justify-content: space-between; }
.hv3 .tscorenav .btn.sec .ic { color: var(--cat); }

/* the recap, as recall */
.hv3 .step.recap h2 { display: flex; align-items: center; gap: 8px; font-size: 19px; line-height: 25px; margin: 0 0 4px; color: var(--ink); }
.hv3 .step.recap h2 .ic { color: var(--cat); }
.hv3 .rcue { font-size: 14px; color: var(--muted); margin: 0 0 10px; }
.hv3 .rrecall .row.pt {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center;
  padding: 10px 0; border-top: 1px solid var(--line); background: none;
}
.hv3 .rrecall .row.pt:first-child { border-top: 0; }
.hv3 .rrecall .row.pt .nm { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink); white-space: normal; }
.hv3 .rrecall .row.pt .tp { grid-column: 1 / -1; }
.hv3 details.rv { justify-self: end; text-align: right; max-width: 46vw; }
.hv3 details.rv > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 36px;
  padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--soft);
  font-size: 13px; font-weight: 750; color: var(--cat);
}
.hv3 details.rv > summary::-webkit-details-marker { display: none; }
.hv3 details.rv[open] > summary { display: none; }
.hv3 details.rv .vl { font-weight: 800; font-size: 16px; line-height: 21px; color: var(--cat); display: block; overflow-wrap: anywhere; }
.hv3 .recap .cvh { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin: 16px 0 4px; }
.hv3 .terml { color: var(--ink); }
.hv3 #bend > h2 { font-size: 19px; line-height: 25px; margin: 26px 0 8px; color: var(--ink); }
.hv3 .rowlist .row { background: var(--card); border-color: var(--line); color: var(--ink); }
.hv3 .rowlist .row .nm { color: var(--ink); }
.hv3 .rowlist .row .vl { color: var(--cat); }
.hv3 .rowlist .row .fl { color: var(--muted); }
.hv3 .srcs { color: var(--muted); font-size: 13px; line-height: 20px; }
.hv3 .srcs b { color: var(--ink); }
.hv3 .again2 { background: var(--amb-fill); color: var(--ink); border-left: 4px solid var(--amb); border-radius: 12px; padding: 10px 12px; }

/* ---- page foot ---------------------------------------------------------------- */
.hv3 .foot { margin-top: 26px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; line-height: 1.6; text-align: center; }
.hv3 .foot a { color: var(--muted); }
.hv3 .tpn .ttl { color: var(--ink); }

/* ---- series pages --------------------------------------------------------------- */
.hv3 .mod {
  display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none;
  box-shadow: none; overflow: hidden; margin: 0 0 10px; opacity: 1;
}
.hv3 a.mod:hover { border-color: var(--cat); }
.hv3 .mod .ico, .hv3 .mod .scrim { display: none; }
.hv3 .mod .num {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; background: var(--cat-fill); color: var(--cat);
  font-weight: 800; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; position: static;
}
.hv3 .mod .in { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hv3 .mod .ttl { font-weight: 750; font-size: 16px; line-height: 21px; color: var(--ink); }
.hv3 .mod .dsc { font-size: 14px; line-height: 20px; color: var(--muted); }
.hv3 .mod .tag { font-size: 12.5px; font-weight: 650; color: var(--muted); background: none; padding: 0; letter-spacing: 0; text-transform: none; }
.hv3 .mod .tag.price { display: none; }
.hv3 .mod .tick { display: inline-flex; align-self: flex-start; font-size: 12px; font-weight: 800; color: var(--ok); background: var(--ok-fill); border-radius: 999px; padding: 2px 8px; }
.hv3 .mod .tick[hidden] { display: none; }
.hv3 .mod .part { font-size: 12.5px; font-weight: 700; color: var(--cat); background: none; }
.hv3 .mod.read .num { background: var(--ok-fill); color: var(--ok); }
.hv3 .mod.soon { background: var(--soft); }
.hv3 .mod.soon .num { background: var(--card); color: var(--muted); }
.hv3 .mod.soon .tag.soon { color: var(--muted); font-weight: 800; }
.hv3 .mod .want { font: inherit; font-size: 13px; font-weight: 700; color: var(--cat); background: var(--card);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; margin-top: 6px; align-self: flex-start; min-height: 36px; }
.hv3 .serstate { margin: 0 0 18px; }
.hv3 .serstate .cont, .hv3 .serstate .startblk { background: var(--cat-fill); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.hv3 .serstate .conth { margin: 0 0 2px; color: var(--cat); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hv3 .serstate .contt { margin: 0 0 4px; font-weight: 750; color: var(--ink); }
.hv3 .serstate .btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; padding: 12px 18px; }
.hv3 .order { color: var(--muted); }
.hv3 h2.tlisth .ic { color: var(--cat); }

/* the email box, made quiet: one line and a disclosure */
.hv3 .buy {
  display: block; background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 16px; margin: 18px 0; color: var(--ink); box-shadow: none;
}
.hv3 .buy .in { display: block; }
.hv3 .buy .btitle { display: block; font-weight: 750; color: var(--ink); font-size: 15px; }
.hv3 .buy .bcopy { display: block; color: var(--muted); font-size: 14px; line-height: 20px; margin: 2px 0 8px; }
.hv3 .buy .tellme, .hv3 .qmail .tellme {
  font: inherit; font-size: 14px; font-weight: 700; color: var(--cat); background: none; border: 0;
  padding: 6px 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 36px;
}
.hv3 .door .dcopy, .hv3 .door .dsmall, .hv3 .door .saidit { color: var(--muted); }
.hv3 .door .dsmall { font-size: 12.5px; line-height: 18px; }
.hv3 .door form { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.hv3 .door input[type=email] {
  flex: 1 1 200px; font: inherit; padding: 11px 12px; border-radius: 10px; border: 1.5px solid var(--line);
  background: var(--card); color: var(--ink); min-height: 44px;
}
.hv3 .door input[type=email]::placeholder { color: var(--muted); }
.hv3 .door button[type=submit] {
  font: inherit; font-weight: 750; padding: 10px 16px; border-radius: 10px; border: 0;
  background: var(--cat); color: var(--cat-ink); min-height: 44px; cursor: pointer;
}

/* ---- decisions page ------------------------------------------------------------ */
.hv3 .declist { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.hv3 .decrow { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.hv3 .decrow h3 { margin: 0 0 6px; font-size: 16.5px; }
.hv3 .decrow h3 a { color: var(--ink); }
.hv3 .decmine, .hv3 .decreal { color: var(--ink); }
.hv3 .decnone { color: var(--muted); }
.hv3 .decspine { margin-top: 14px; }

/* ---- the wall on a history page (paywall-v1.js draws its body; tv2 rules style it) */
.hv3 #bwall .step { background: var(--card); }

/* ---- the lane tiles on /learn/history.html and the hub ---------------------------- */
.hcat .ttile { background: var(--cat-fill); border-color: transparent; color: var(--cat); }
.hcat.soon { background: var(--soft); }
.hcat .tag .free { color: var(--cat); font-weight: 800; }

/* ==== THE HUB (/learn.html) ======================================================= */
body.hhub .wrap { max-width: 960px; }
.hhub .hhero { margin-bottom: 14px; }
@media (min-width: 712px) { .hhub .hhero { padding: 22px 26px; } }
.hhub .hhero .tout { color: var(--ink); max-width: 62ch; }
/* search */
.hsearch { margin: 16px 0 0; }
.hsl { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.hsearch input {
  width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; min-height: 48px; border-radius: 12px;
  border: 1.5px solid var(--line); background: var(--card); color: var(--ink); -webkit-appearance: none; appearance: none;
}
.hsearch input::placeholder { color: var(--muted); opacity: 1; }
.hsearch input:focus { border-color: var(--cat); outline: 3px solid var(--focus); outline-offset: 2px; }
.htop { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.htopic {
  font: inherit; font-size: 13px; font-weight: 700; padding: 6px 11px; min-height: 34px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer;
}
.htopic:hover { border-color: var(--cat); }
.htopic[aria-pressed="true"] { background: var(--cat); border-color: var(--cat); color: var(--cat-ink); }
.hres { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; margin: 0 0 18px; }
.hresn { margin: 0 0 6px; font-size: 13.5px; color: var(--muted); }
.hresl { list-style: none; margin: 0; padding: 0; }
.hresl li { border-top: 1px solid var(--line); }
.hresl li:first-child { border-top: 0; }
.hresl a { display: flex; flex-direction: column; gap: 1px; padding: 10px 0; text-decoration: none; min-height: 44px; }
.hresl .hrt { color: var(--ink); font-weight: 700; font-size: 15.5px; }
.hresl .hrg { color: var(--muted); font-size: 13px; }

/* start here */
.hstart { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 16px 8px; margin: 0 0 26px; }
@media (min-width: 720px) { .hstart { padding: 20px 24px 12px; } }
.hstart .qkick { display: flex; align-items: center; gap: 7px; margin: 0 0 4px; font-size: 12px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--cat); }
.hstart h2 { margin: 0 0 4px; font-size: 21px; line-height: 27px; letter-spacing: -.012em; color: var(--ink); }
.hstart .small { margin: 0 0 8px; font-size: 14px; line-height: 20px; }
.hroute { list-style: none; margin: 0; padding: 0; counter-reset: none; }
@media (min-width: 900px) { .hroute { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding-bottom: 8px; } }
.hroute li { border-top: 1px solid var(--line); }
.hroute li:first-child { border-top: 0; }
@media (min-width: 900px) { .hroute li { border: 1px solid var(--line); border-radius: 12px; } .hroute li:first-child { border-top: 1px solid var(--line); } }
.hroute a { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; text-decoration: none; min-height: 48px; }
@media (min-width: 900px) { .hroute a { flex-direction: column; gap: 8px; padding: 12px; } }
.hrn { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--cat-fill); color: var(--cat);
  font-weight: 800; font-size: 13.5px; display: inline-flex; align-items: center; justify-content: center; }
.hrin { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hroute .hrt { color: var(--ink); font-weight: 750; font-size: 15.5px; line-height: 21px; }
.hroute .hrg { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; color: var(--muted); font-size: 12.5px; line-height: 18px; }
.hroute .hrg .ic { color: var(--cat); }

/* lanes */
.hsec { font-size: 21px; line-height: 27px; letter-spacing: -.012em; margin: 0 0 10px; color: var(--ink); }
.hlanes { display: grid; gap: 14px; }
@media (min-width: 900px) { .hlanes { grid-template-columns: 1fr 1fr; align-items: start; } }
.hl { background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.hlhead { display: flex; gap: 14px; align-items: flex-start; padding: 16px; text-decoration: none; color: var(--ink);
  background: var(--cat-fill); border-bottom: 1px solid var(--line); }
.hlhead:hover .hlt { text-decoration: underline; }
.hlhead .ttile { width: 46px; height: 46px; border-radius: 12px; background: var(--card); color: var(--cat); border: 1px solid var(--line); }
.hlin { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.hlt { font-size: 19px; line-height: 24px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.hlb { font-size: 14.5px; line-height: 21px; color: var(--ink); }
.hlc { font-size: 12.5px; line-height: 18px; font-weight: 700; color: var(--muted); margin-top: 2px; }
.hlc .free { color: var(--cat); }
.hlgo { flex: 0 0 auto; color: var(--cat); align-self: center; }
.hgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
.hg { display: flex; align-items: center; gap: 10px; padding: 11px 12px; background: var(--card); text-decoration: none; min-height: 56px; min-width: 0; }
.hg:hover { background: var(--soft); }
.hg .ttile { width: 34px; height: 34px; border-radius: 9px; background: var(--cat-fill); color: var(--cat); border: 0; }
.hgin { display: flex; flex-direction: column; min-width: 0; }
.hgt { color: var(--ink); font-weight: 700; font-size: 14px; line-height: 18px; }
.hgc { color: var(--muted); font-size: 12px; line-height: 16px; font-weight: 600; }
.hgrid .hg:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* how it works, email, feedback */
.hhow { margin: 22px 0 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hhow > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 48px;
  font-weight: 750; color: var(--ink); }
.hhow > summary::-webkit-details-marker { display: none; }
.hhow > summary .ic:first-child { color: var(--cat); }
.hhow > summary .ic:last-child { margin-left: auto; color: var(--muted); transition: transform .2s; }
.hhow[open] > summary .ic:last-child { transform: rotate(180deg); }
.hhow dl { margin: 0 0 14px; display: grid; gap: 10px; }
@media (min-width: 720px) { .hhow dl { grid-template-columns: 1fr 1fr; } }
.hhow dt { font-weight: 750; color: var(--ink); }
.hhow dd { margin: 2px 0 0; color: var(--muted); font-size: 14.5px; line-height: 21px; }
.qmail { margin: 14px 0 0; }
.qmail .door { margin: 4px 0 8px; }
.hhub #feedbackSlot { margin-top: 18px; }
/* feedback-v3.js paints its fields white; on a v2 page they take the tokens */
.hv3 .fbbox { background: var(--card); border-color: var(--line); color: var(--ink); }
.hv3 .fbta, .hv3 .fbem { background: var(--card); color: var(--ink); border-color: var(--line); }
.hv3 .fbta::placeholder, .hv3 .fbem::placeholder { color: var(--muted); opacity: 1; }
.hv3 .fbbtn { background: var(--cat); color: var(--cat-ink); }
.hv3 .fbhint, .hv3 .fbcap, .hv3 .fbk { color: var(--muted); }
.hv3 .fbmsg { color: var(--ink); }
.hv3 .fbmsg.ok { color: var(--ok); }
/* learn-v5.css card leftovers, neutralised on v2 pages */
.hv3 .mod::before, .hv3 .mod::after { content: none; display: none; }
.hv3 .mod[data-mc] { background: var(--card); border-color: var(--line); }
.hv3 .mod.soon[data-mc] { background: var(--soft); }
.hv3 .mod > .in, .hv3 .mod .num ~ .in { padding: 0; margin: 0; position: static; }
.hv3 .mod .ttl, .hv3 .mod .dsc { padding-right: 0; margin-top: 0; }
.hv3 .mod .tag { margin-top: 2px; }
.hv3 .mod.read .num { background: var(--ok-fill); color: var(--ok); }
.hv3 #snum:empty { display: none; }
.hcat .ttl { color: var(--ink); }
.hv3 .mod[data-mc] .ttl { color: var(--ink); }
.hv3 .mod[data-mc] .dsc { color: var(--muted); }
.hv3 .mod[data-mc] .tag { background: none; color: var(--muted); }
.hv3 .mod.soon { opacity: 1; }
.hv3 .mod[data-mc] .ttl::before { content: none; display: none; }
.hv3 .pic .cred, .hv3 .pic .cred a { color: var(--muted); opacity: 1; }
.hv3 .btn.go .god, .hv3 .btn.go .gon { opacity: 1; }

.hv3 .done .opt.taken, .hv3 .opt.taken { opacity: 1; }
@media (min-width: 900px) { .hroute .hrg .ic { display: none; } .hroute .hrg { display: block; } }