/* ═══════════════════════════════════════════════════════════════════════════
   Bonsai — the three tool pages (/tools/learn, /tools/notebook, /tools/review)

   Same bench as the landing page, narrowed to one column. These are articles,
   so the surface is quieter — no scattered ephemera, no draggable objects —
   but every material is the one bench.css defines: the cream card stock, the
   punched specimen tag, the typewriter label, the letterpress button, and the
   rule the whole system rests on —

     EVERY SURFACE CATCHES LIGHT ON ITS TOP EDGE.

   `inset 0 1px 0 rgba(255,255,255,.7)` is on the plate, the tag, the button
   and the pill here exactly as it is there. That repeated highlight is what
   makes flat CSS read as paper.

   One stylesheet for all three: they are the same page with different content,
   and three copies would drift apart by the second edit.

   Its own file rather than a <style> block for the reason bench.css is: inline
   CSS can only be permitted by 'unsafe-inline', and there is no build step here
   to hand out nonces. Nothing in the markup may carry a style="" attribute for
   the same reason.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── paper & ink ── */
  --paper:        #efe6d3;
  --paper-lit:    #f7f0df;
  --paper-panel:  #f6efdf;
  --paper-deep:   #e5d9bd;
  --ink:          #2b2618;
  --ink-soft:     #5b5340;
  --ink-faint:    #6f6450;
  --ink-ghost:    #8d8168;
  --line:         #d6c8a8;
  --line-strong:  #c3b290;

  /* ── the garden ── */
  --forest:       #34503a;
  --forest-deep:  #25402b;
  --forest-dark:  #1e3423;
  --leaf:         #4c6b46;

  --seal:         #8f3b2c;
  --seal-deep:    #6f2c20;

  /* The notebook's five pen colours, the same hexes app.html gives the picker
     (see [data-color] in app.html and styles.css). If a pen changes there, the
     swatches on /tools/notebook are wrong until they change here too. */
  --pen-ink:   #2b2618;
  --pen-red:   #c0392b;
  --pen-blue:  #2c6fae;
  --pen-green: #3f7a4e;
  --pen-amber: #c98a2e;

  --t-tag:   0.6875rem;
  --t-typed: 0.75rem;

  --maxw: 1180px;
  --col:  46rem;
  --rail-h: 3.25rem;

  --lip:       inset 0 1px 0 rgba(255,255,255,.72);
  --lip-soft:  inset 0 1px 0 rgba(255,255,255,.5);
  --lift-1:    0 1px 2px rgba(43,38,24,.10);
  --lift-2:    0 2px 4px rgba(43,38,24,.10), 0 14px 26px -18px rgba(43,38,24,.42);
  --lift-3:    0 3px 6px rgba(43,38,24,.12), 0 26px 46px -26px rgba(43,38,24,.5);

  --ease:      cubic-bezier(.22,.8,.32,1);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }

/* The bench surface: paper grain, a faint field-notebook grid, and a vignette
   so the middle of the page reads as the lit part of the desk. */
body {
  background-color: var(--paper);
  background-image:
    radial-gradient(120% 80% at 50% 0%, rgba(255,252,242,.55), transparent 60%),
    radial-gradient(100% 60% at 50% 100%, rgba(90,74,53,.06), transparent 70%),
    repeating-linear-gradient(0deg, rgba(120,100,60,.055) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(120,100,60,.045) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(0deg, rgba(120,100,60,.02) 0 1px, transparent 1px 3px);
  background-attachment: fixed, fixed, scroll, scroll, scroll;
  color: var(--ink);
  font-family: 'Spectral', Georgia, 'Times New Roman', serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(52,80,58,.2); }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2rem); }
.col  { width: 100%; max-width: var(--col); margin-inline: auto; }
img, svg, canvas { display: block; max-width: 100%; }

a { color: var(--forest); text-decoration-color: var(--line-strong);
    text-decoration-thickness: 1px; text-underline-offset: 3px;
    transition: color .18s ease, text-decoration-color .18s ease; }
a:hover { color: var(--forest-deep); text-decoration-color: var(--forest); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--leaf); outline-offset: 3px; border-radius: 2px; }


/* ═══ MATERIALS ══════════════════════════════════════════════════════════════
   Three of the four primitives bench.css builds the landing page from. The
   fourth, the handwritten marginalia, stays on the landing page: these are
   articles, and an aside in the margin of one is just a distraction.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. TAG — the punched typed label. Section kickers and plate strips. */
.tag {
  display: inline-flex; align-items: center; gap: .5rem;
  height: 27px; padding: 0 .7rem 0 .55rem;
  background: linear-gradient(180deg, #fbf6e9, #ede3cb);
  border: 1px solid var(--line-strong); border-radius: 2px;
  box-shadow: var(--lip), var(--lift-1);
  font-family: 'Courier Prime', ui-monospace, monospace;
  font-size: var(--t-tag); font-weight: 700; letter-spacing: .17em;
  text-transform: uppercase; color: var(--ink-faint); white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255,255,255,.85);
  text-decoration: none;
}
.tag::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--paper-deep);
  box-shadow: inset 0 1px 1.5px rgba(43,38,24,.5), 0 1px 0 rgba(255,255,255,.6);
}
.tag-leaf::before { background: var(--leaf); box-shadow: inset 0 1px 1px rgba(255,255,255,.35); }

/* 2. TYPED — the field-journal typewriter voice. Folios, units, captions. */
.typed {
  font-family: 'Courier Prime', ui-monospace, monospace;
  font-size: var(--t-typed); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-ghost);
}

/* 3. BUTTON — letterpress, not plastic. Ink pressed into paper. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: inherit; font-size: 1rem; font-weight: 600;
  padding: .8rem 1.6rem; border-radius: 3px; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform .12s var(--ease), box-shadow .18s ease,
              background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(180deg, #3d5c42 0%, var(--forest) 45%, #2b4630 100%);
  color: #f5f0e3; border-color: #1f3324;
  text-shadow: 0 1px 0 rgba(0,0,0,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -2px 0 rgba(0,0,0,.2),
              0 2px 3px rgba(43,38,24,.16), 0 14px 26px -16px rgba(37,64,43,.8);
}
.btn-primary:hover { background: linear-gradient(180deg, #446649 0%, #375440 45%, #2c4a32 100%); color: #f5f0e3; }
.btn-primary:active { box-shadow: inset 0 2px 5px rgba(0,0,0,.34), 0 1px 1px rgba(43,38,24,.2); }
.btn-ghost {
  background: linear-gradient(180deg, #fbf6e9, #ece2c9);
  color: var(--forest-deep); border-color: var(--line-strong);
  text-shadow: 0 1px 0 rgba(255,255,255,.9);
  box-shadow: var(--lip), var(--lift-1), 0 10px 20px -16px rgba(43,38,24,.5);
}
.btn-ghost:hover { border-color: var(--ink-ghost); color: var(--forest-dark); }
.btn-ghost:active { box-shadow: inset 0 2px 4px rgba(43,38,24,.2); }
.btn-lg { font-size: 1.0625rem; padding: .95rem 1.9rem; }


/* ═══ THE RAIL ═══════════════════════════════════════════════════════════════
   The landing page's bench lip, minus the conditions readout — that one needs
   a script, and these pages each ship exactly one, for their demo.
   ═══════════════════════════════════════════════════════════════════════════ */
.rail {
  position: sticky; top: 0; z-index: 100;
  background: linear-gradient(180deg, rgba(247,240,223,.96), rgba(239,230,211,.92));
  -webkit-backdrop-filter: blur(9px) saturate(1.1);
  backdrop-filter: blur(9px) saturate(1.1);
  border-bottom: 1px solid var(--line);
}
.rail::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px;
  background: linear-gradient(180deg, rgba(43,38,24,.07), transparent);
  pointer-events: none;
}
.rail-inner { display: flex; align-items: center; gap: 1.5rem; height: var(--rail-h); }
.brand {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: 1.0625rem; font-weight: 600; color: var(--forest-deep);
  text-decoration: none; flex: none;
}
.brand-leaf { width: 22px; height: 22px; object-fit: contain; }
.rail-links { display: flex; align-items: center; gap: 1.35rem; margin-inline: auto; }
.rail-links a {
  font-size: .9375rem; color: var(--ink-soft); text-decoration: none;
  position: relative; padding-block: .3rem; transition: color .18s ease;
}
.rail-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--leaf); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.rail-links a:hover { color: var(--forest-deep); }
.rail-links a:hover::after, .rail-links a[aria-current="page"]::after { transform: scaleX(1); }
.rail-links a[aria-current="page"] { color: var(--forest-deep); }
.rail-end { display: flex; align-items: center; gap: .85rem; flex: none; margin-left: auto; }
.rail-signin { font-size: .9375rem; color: var(--ink-soft); text-decoration: none; }
.rail-signin:hover { color: var(--forest-deep); }
.rail .btn { padding: .5rem 1rem; font-size: .9375rem; }
/* With the chapter links present the auto margin is on .rail-links; when they
   go, .rail-end's own auto margin takes over. Both are declared so neither
   state needs a second rule. */
.rail-links + .rail-end { margin-left: 0; }


/* ═══ THE ARTICLE ════════════════════════════════════════════════════════════ */
.page { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5rem); }

.masthead { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.masthead h1 {
  font-size: clamp(2.2rem, 5.4vw, 3.15rem); font-weight: 500;
  line-height: 1.05; letter-spacing: -.02em; color: var(--forest-deep);
  text-wrap: balance;
}
.standfirst {
  font-size: 1.1875rem; line-height: 1.6; color: var(--ink-soft);
  text-wrap: pretty; max-width: 58ch;
}
/* the double hairline that closes every masthead on the bench */
.rule-double { position: relative; height: 1px; background: var(--line-strong); margin-top: 2rem; }
.rule-double::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 1px; background: var(--line); }

section { padding-top: clamp(2.25rem, 5vw, 3rem); }
section + section { border-top: 1px solid var(--line); margin-top: clamp(2.25rem, 5vw, 3rem); }

h2 {
  font-size: clamp(1.45rem, 3vw, 1.85rem); font-weight: 500; line-height: 1.15;
  letter-spacing: -.015em; color: var(--forest-deep);
  margin-bottom: .85rem; text-wrap: balance;
}
/* the mode folio above a heading — typed, not set in the text face */
h2 .h2-mode {
  display: block; margin-bottom: .5rem;
  font-family: 'Courier Prime', ui-monospace, monospace;
  font-size: var(--t-tag); font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-ghost);
}

p { margin-bottom: 1rem; max-width: 66ch; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; color: var(--ink); }
em { font-style: italic; }


/* ── the pull quote: the one line that carries the page ── */
.pull {
  position: relative;
  margin: 1.75rem 0; padding: 1.15rem 1.35rem 1.15rem 1.5rem;
  background: linear-gradient(180deg, rgba(244,246,238,.9), rgba(233,238,224,.7));
  border: 1px solid var(--line); border-left: 3px solid var(--leaf);
  border-radius: 2px; box-shadow: var(--lip-soft), var(--lift-1);
  font-size: 1.125rem; line-height: 1.55; color: var(--forest-deep);
  text-wrap: pretty; max-width: none;
}


/* ── numbered flow: typed folios rather than circled digits ── */
.flow { list-style: none; counter-reset: flow; margin: 1.5rem 0 0; display: flex; flex-direction: column; gap: 1.15rem; }
.flow li { counter-increment: flow; position: relative; padding-left: 3.1rem; max-width: 66ch; }
.flow li::before {
  content: "No. " counter(flow, decimal-leading-zero);
  position: absolute; left: 0; top: .28em;
  font-family: 'Courier Prime', ui-monospace, monospace;
  font-size: .625rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--leaf);
  font-variant-numeric: tabular-nums;
}
.flow li::after {
  content: ""; position: absolute; left: 0; top: 2em; bottom: -.35rem; width: 1px;
  background: var(--line);
}
.flow li:last-child::after { display: none; }
.flow strong { display: block; }


/* ═══ PLATES ═════════════════════════════════════════════════════════════════
   Every specimen and demo on these pages is a plate: a mounted sheet with a
   typed strip above it and a caption below, the same object the landing page
   uses for its tool illustrations.
   ═══════════════════════════════════════════════════════════════════════════ */
.specimen, .demo {
  margin: 1.75rem 0 0; padding: 10px 10px 0;
  background: linear-gradient(180deg, var(--paper-lit), var(--paper-panel) 55%, var(--paper-deep));
  border: 1px solid var(--line); border-radius: 4px;
  box-shadow: var(--lip), var(--lift-3);
}
.specimen { padding-bottom: 0; }

/* the sheet inside the mount */
.demo-body, .specimen > :not(.specimen-cap):not(.demo-head):not(.demo-foot) {
  position: relative; border-radius: 2px;
  background: linear-gradient(180deg, #fdfaf1, #f6efdd);
  box-shadow: inset 0 0 0 1px rgba(43,38,24,.1), inset 0 2px 6px -3px rgba(43,38,24,.2);
  padding: 1.15rem 1.25rem;
}

/* the typed strip above the sheet, and the caption below it */
.demo-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .8rem;
  padding: 0 .2rem .55rem;
}
.demo-label {
  font-family: 'Courier Prime', ui-monospace, monospace;
  font-size: .625rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--leaf);
}
.demo-hint, .demo-foot, .specimen-cap {
  font-family: 'Courier Prime', ui-monospace, monospace;
  font-size: .625rem; letter-spacing: .06em; line-height: 1.7;
  color: var(--ink-ghost); text-transform: none;
}
.demo-foot, .specimen-cap { display: block; padding: .6rem .2rem .65rem; }

/* ── shared control look inside a plate ──
   Only the cursor. The `font: inherit` this used to carry is (0,1,1) and beat
   the `.tab`/`.chip`/`.nb-btn` pill rule below it at (0,1,0), which silently
   reset every toggle on these pages back to the body serif. Each control now
   declares its own face. */
.demo button, .specimen button { cursor: pointer; }
.demo button:focus-visible { outline: 2px solid var(--leaf); outline-offset: 2px; }

/* pill: the bench's small toggle, as on the landing page's weather dial */
.tab, .chip, .nb-btn, .mark-reset, .dupe-toggle button, .seg span {
  font-family: 'Courier Prime', ui-monospace, monospace;
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint);
  background: linear-gradient(180deg, #fbf6e9, #ece2c9);
  border: 1px solid var(--line-strong);
  box-shadow: var(--lip), var(--lift-1);
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
  transition: transform .12s var(--ease), color .18s ease, background-color .18s ease, border-color .18s ease;
}
.tab { padding: .45rem .85rem; border-radius: 999px; }
.chip { padding: .38rem .75rem; border-radius: 2px; }
.nb-btn, .mark-reset { padding: .4rem .8rem; border-radius: 2px; }
.tab:hover, .chip:hover, .nb-btn:hover, .mark-reset:hover, .dupe-toggle button:hover { color: var(--forest-deep); }
.tab:active, .chip:active, .nb-btn:active, .mark-reset:active { transform: translateY(1px); }

.tab[aria-selected="true"], .chip.on, .tab.on, .seg span.on,
.dupe-toggle button[aria-pressed="true"] {
  background: linear-gradient(180deg, #3d5c42, #2c4630);
  border-color: #1f3324; color: #f2ecdd; font-weight: 700;
  text-shadow: 0 1px 0 rgba(0,0,0,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), var(--lift-1);
}

/* primary action inside a plate */
.nb-next, .mark-btn {
  font-family: inherit; font-size: .9375rem; font-weight: 600;
  padding: .48rem 1.15rem; border-radius: 3px;
  background: linear-gradient(180deg, #3d5c42 0%, var(--forest) 45%, #2b4630 100%);
  color: #f5f0e3; border: 1px solid #1f3324;
  text-shadow: 0 1px 0 rgba(0,0,0,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -2px 0 rgba(0,0,0,.2), var(--lift-1);
  transition: transform .12s var(--ease), background-color .18s ease;
}
.nb-next:hover, .mark-btn:hover { background: linear-gradient(180deg, #446649 0%, #375440 45%, #2c4a32 100%); }
.nb-next:active, .mark-btn:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(0,0,0,.34); }
.nb-next[disabled] { opacity: .45; cursor: default; }


/* ── specimen internals ── */
.tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.seg { display: inline-flex; border-radius: 2px; overflow: hidden; box-shadow: var(--lift-1); }
.seg span { border-radius: 0; border-right-width: 0; box-shadow: var(--lip); padding: .38rem .85rem; }
.seg span:last-child { border-right-width: 1px; }

.specimen-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.specimen-row + .specimen-row { margin-top: .9rem; }
.specimen-label {
  font-family: 'Courier Prime', ui-monospace, monospace;
  font-size: .625rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-ghost);
}


/* ── Learn: one question, three modes ── */
.demo-q {
  margin-bottom: .95rem; padding-left: .9rem;
  border-left: 2px solid var(--line-strong);
  font-size: 1.0625rem; color: var(--ink-soft); font-style: italic; max-width: none;
}
.demo-q + .tabs { margin-bottom: 1.1rem; }
.thread { display: flex; flex-direction: column; gap: .85rem; }
.thread[hidden] { display: none; }
.msg {
  max-width: 88%; padding: .6rem .85rem; border-radius: 3px;
  font-size: .9375rem; line-height: 1.55; margin-bottom: 0;
  border: 1px solid var(--line); box-shadow: var(--lip-soft), var(--lift-1);
}
.msg-you { align-self: flex-end; text-align: right;
  background: linear-gradient(180deg, #fbf6e9, #f0e6cf); color: var(--ink-soft); }
.msg-ai { align-self: flex-start;
  background: linear-gradient(180deg, #f4f6ee, #e9eee0); color: var(--ink); }
.msg-who {
  display: block; margin-bottom: .25rem;
  font-family: 'Courier Prime', ui-monospace, monospace;
  font-size: .5625rem; font-weight: 400; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-ghost);
}


/* ── Notebook: a canvas that draws back ── */
.nb-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-bottom: .85rem; }
.nb-pen {
  width: 1.6rem; height: 1.6rem; border-radius: 50%; padding: 0;
  border: 1px solid rgba(43,38,24,.2); background: var(--c);
  box-shadow: var(--lip-soft), var(--lift-1);
}
.nb-pen[aria-pressed="true"] { box-shadow: 0 0 0 2px #fdfaf1, 0 0 0 3px var(--forest), var(--lift-1); }
.nb-pen-ink { --c: var(--pen-ink); } .nb-pen-red { --c: var(--pen-red); }
.nb-pen-blue { --c: var(--pen-blue); } .nb-pen-green { --c: var(--pen-green); }
.nb-pen-amber { --c: var(--pen-amber); }
.nb-sep { flex: 1 1 auto; }
/* ruled paper, the same pitch the landing page's notebook plate uses */
.nb-canvas-wrap {
  position: relative; border-radius: 2px; overflow: hidden;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 25px, rgba(109,148,155,.3) 25px 26px),
    linear-gradient(180deg, #fdfaf1, #f7f1e0);
  box-shadow: inset 0 0 0 1px rgba(43,38,24,.12), inset 0 2px 6px -3px rgba(43,38,24,.22);
}
#nbCanvas { display: block; width: 100%; height: 260px; touch-action: none; cursor: crosshair; }
.nb-tutor {
  display: flex; flex-wrap: wrap; align-items: center; gap: .7rem;
  margin-top: .85rem; padding: .7rem .85rem; border-radius: 3px;
  background: linear-gradient(180deg, #f4f6ee, #e6ecdc);
  border: 1px solid var(--line); box-shadow: var(--lip-soft), var(--lift-1);
}
.nb-tutor-text { flex: 1 1 14rem; font-size: .9375rem; line-height: 1.5; color: var(--ink); min-width: 0; }


/* ── Review: a test that marks itself ── */
.q { padding: .95rem 0; border-top: 1px solid var(--line); }
.q:first-child { border-top: 0; padding-top: 0; }
.q-ask { font-weight: 600; margin-bottom: .55rem; max-width: none; }
.q-ask .q-n {
  font-family: 'Courier Prime', ui-monospace, monospace;
  color: var(--ink-ghost); font-weight: 400; margin-right: .5rem; font-size: .8125rem;
  font-variant-numeric: tabular-nums;
}
.opts { display: flex; flex-direction: column; gap: .3rem; }
.opt { display: flex; align-items: flex-start; gap: .5rem; font-size: .9375rem; cursor: pointer; }
.opt input { margin-top: .42rem; accent-color: var(--forest); }
.q-text {
  font: inherit; font-size: .9375rem; width: 100%; max-width: 18rem;
  padding: .4rem .65rem; border: 1px solid var(--line-strong); border-radius: 2px;
  background: #fdfaf1; color: var(--ink);
  box-shadow: inset 0 1px 3px rgba(43,38,24,.14);
}
.q-text:focus-visible { outline: 2px solid var(--leaf); outline-offset: 1px; }
.verdict {
  display: inline-block; margin-top: .55rem; padding: .18rem .55rem;
  font-family: 'Courier Prime', ui-monospace, monospace;
  font-size: .625rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; border-radius: 2px;
  box-shadow: var(--lip-soft);
}
.verdict-right  { background: #dfe9dc; color: #2c4a32; border: 1px solid rgba(52,80,58,.28); }
.verdict-wrong  { background: rgba(143,59,44,.1); color: var(--seal-deep); border: 1px solid rgba(143,59,44,.28); }
/* The third verdict the app really has: read, not guessed at. */
.verdict-review { background: #f2e7cf; color: #7a5a1e; border: 1px solid rgba(122,90,30,.3); }
.q-fb {
  margin-top: .5rem; padding: .5rem .7rem; border-radius: 3px;
  font-size: .875rem; line-height: 1.5; color: var(--ink-soft); max-width: none;
  background: rgba(143,59,44,.07); border: 1px solid rgba(143,59,44,.18);
}
.q-fb strong { color: var(--ink); }
.mark-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem;
  margin-top: 1.15rem; padding-top: 1.05rem; border-top: 1px solid var(--line-strong);
}
.score {
  font-family: 'Courier Prime', ui-monospace, monospace;
  font-weight: 700; color: var(--forest-deep); font-variant-numeric: tabular-nums;
}

/* ── Review: what the de-duplicator throws away ── */
.dupe-toggle { display: inline-flex; border-radius: 2px; overflow: hidden; margin-bottom: .95rem; box-shadow: var(--lift-1); }
.dupe-toggle button { padding: .38rem .85rem; border-radius: 0; border-right-width: 0; }
.dupe-toggle button:last-child { border-right-width: 1px; }
.dupe-list { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.dupe-list li { display: flex; gap: .6rem; align-items: baseline; font-size: .9375rem; line-height: 1.5; }
.dupe-n {
  font-family: 'Courier Prime', ui-monospace, monospace;
  color: var(--ink-ghost); font-variant-numeric: tabular-nums; flex: none; font-size: .8125rem;
}
.dupe-list li.cut { color: var(--ink-ghost); text-decoration: line-through; text-decoration-color: rgba(143,59,44,.6); }
.dupe-tag {
  flex: none; align-self: center;
  font-family: 'Courier Prime', ui-monospace, monospace;
  font-size: .5625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--seal-deep); background: rgba(143,59,44,.1);
  border: 1px solid rgba(143,59,44,.24);
  padding: .12rem .42rem; border-radius: 2px;
}


/* ═══ THE OTHER TWO TOOLS ════════════════════════════════════════════════════ */
.siblings { margin-top: clamp(3rem, 6vw, 4rem); padding-top: 2rem; border-top: 1px solid var(--line-strong); }
.siblings h2 { font-size: 1.15rem; margin-bottom: 1.1rem; }
.sib-list { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.sib {
  display: block; padding: 1.1rem 1.2rem; border-radius: 3px; text-decoration: none; color: inherit;
  background: linear-gradient(180deg, var(--paper-lit), var(--paper-panel) 45%, var(--paper-deep));
  border: 1px solid var(--line); box-shadow: var(--lip), var(--lift-2);
  transition: transform .25s var(--ease), box-shadow .25s ease;
}
.sib:hover { transform: translateY(-3px); box-shadow: var(--lip), var(--lift-3); }
.sib-name {
  display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .3rem;
  font-weight: 600; color: var(--forest-deep);
}
.sib-note { display: block; font-size: .9375rem; line-height: 1.5; color: var(--ink-soft); }


/* ═══ THE CALL ═══════════════════════════════════════════════════════════════ */
.cta {
  margin-top: clamp(2.5rem, 5vw, 3.25rem); padding-top: 2rem;
  border-top: 1px solid var(--line-strong);
  display: flex; flex-wrap: wrap; align-items: center; gap: .85rem 1.25rem;
}
.cta-note {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: 'Courier Prime', ui-monospace, monospace;
  font-size: var(--t-typed); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-ghost);
}
.cta-note svg { width: 14px; height: 14px; color: var(--leaf); }


/* ═══ FOOTER ═════════════════════════════════════════════════════════════════ */
footer { padding-block: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--line-strong); }
footer::before { content: ""; display: block; height: 1px; background: var(--line); margin-top: -3px; margin-bottom: 2.5rem; }
.foot-grid {
  display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr));
  gap: 2rem clamp(1.5rem, 4vw, 3rem); align-items: start;
}
.foot-brand { display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }
.foot-brand .typed { max-width: 30ch; text-transform: none; letter-spacing: .04em; line-height: 1.7; }
.foot-col h4 {
  font-family: 'Courier Prime', ui-monospace, monospace;
  font-size: var(--t-tag); font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: .85rem;
}
.foot-col a { display: block; font-size: .9375rem; color: var(--ink-soft); text-decoration: none; padding-block: .28rem; }
.foot-col a:hover { color: var(--forest-deep); }
.foot-end {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 2.75rem; padding-top: 1.35rem; border-top: 1px solid var(--line);
}
.foot-copy { font-size: .8125rem; color: var(--ink-ghost); }
.foot-social { display: flex; gap: .35rem; }
.soc {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: none; border-radius: 3px;
  color: var(--ink-faint); border: 1px solid transparent; text-decoration: none;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.soc:hover { color: var(--forest-deep); background: var(--paper-panel); border-color: var(--line); }
.soc svg { width: 17px; height: 17px; }


/* ═══ RESPONSIVE ═════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .rail-links { display: none; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .msg { max-width: 100%; }
  .cta { flex-direction: column; align-items: stretch; }
  .cta .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}