/* Bonsai — the three tool pages (/tools/learn, /tools/notebook, /tools/review).
   One stylesheet for all three: they are the same page with different content,
   and three copies of this would drift apart by the second edit.

   Its own file rather than a <style> block for the reason landing.css and
   mission.css are: inline CSS can only be permitted by 'unsafe-inline', and
   there is no build step here to hand out nonces. Out here these pages keep
   style-src 'self' and, having no scripts at all, script-src 'none'.

   Tokens are the landing page's, verbatim. Single theme on purpose — paper is
   the brand, and every other public page holds the same ground. */
:root {
  --paper:       #efe6d3;
  --paper-panel: #f6efdf;
  --paper-edge:  #e7dcc4;
  --ink:         #2b2618;
  --ink-soft:    #5b5340;
  --ink-faint:   #6f6450;
  --line:        #d6c8a8;
  --line-strong: #c3b290;
  --forest:      #34503a;
  --forest-deep: #25402b;
  --leaf:        #4c6b46;

  /* 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;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Spectral', Georgia, 'Times New Roman', serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 46rem; margin: 0 auto; padding: 3rem 1.5rem 5rem; }

/* ── masthead ───────────────────────────────────────────────────────── */
.brand {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-bottom: 2.5rem; text-decoration: none;
}
.brand svg { width: 1.5rem; height: 1.5rem; color: var(--forest); }
.brand span { font-weight: 600; font-size: 1.25rem; color: var(--forest-deep); }

.kicker {
  display: block;
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 0.7rem;
}

h1 {
  font-size: clamp(2.25rem, 5.6vw, 3.25rem);
  line-height: 1.06; color: var(--forest-deep);
  font-weight: 600; text-wrap: balance;
}

.standfirst {
  font-size: 1.25rem; line-height: 1.55; color: var(--ink-soft);
  margin-top: 1rem; padding-bottom: 2.25rem;
  border-bottom: 1px solid var(--line-strong);
  text-wrap: pretty;
}

/* ── sections ───────────────────────────────────────────────────────── */
section { padding-top: 2.5rem; }
section + section { border-top: 1px solid var(--line); margin-top: 2.5rem; }

h2 {
  font-size: 1.55rem; line-height: 1.22; color: var(--forest-deep);
  font-weight: 600; margin-bottom: 0.7rem; text-wrap: balance;
}
h2 .h2-mode {
  display: block;
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--leaf); margin-bottom: 0.35rem;
}

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; }
em { font-style: italic; }

a { color: var(--forest); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--forest-deep); }
a:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; border-radius: 2px; }

/* ── specimens ────────────────────────────────────────────────────────
   Small, faithful reproductions of real controls, built from the same
   palette rather than screenshotted. They show what the page is describing
   without pretending to be the app. Each one is inert and carries a caption
   so it never reads as a live control. */
.specimen {
  margin: 1.5rem 0;
  padding: 1.25rem;
  background: var(--paper-panel);
  border: 1px solid var(--line);
  border-radius: 0.6rem;
}
.specimen-cap {
  display: block; margin-top: 0.9rem;
  font-size: 0.8125rem; line-height: 1.5; color: var(--ink-faint);
}

.tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tab {
  font: inherit; font-size: 0.9375rem;
  padding: 0.35rem 0.95rem;
  border: 1px solid var(--line-strong); border-radius: 999px;
  color: var(--ink-soft); background: transparent;
}
.tab.on { background: var(--forest); border-color: var(--forest); color: var(--paper-panel); font-weight: 600; }

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip {
  font: inherit; font-size: 0.875rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--line-strong); border-radius: 0.4rem;
  color: var(--ink-soft); background: var(--paper);
}
.chip.on { background: var(--forest); border-color: var(--forest); color: var(--paper-panel); }

.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 0.4rem; overflow: hidden; }
.seg span {
  padding: 0.3rem 0.9rem; font-size: 0.875rem; color: var(--ink-soft);
  border-right: 1px solid var(--line-strong); font-variant-numeric: tabular-nums;
}
.seg span:last-child { border-right: 0; }
.seg span.on { background: var(--forest); color: var(--paper-panel); font-weight: 600; }

.swatches { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.swatch {
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  border: 1px solid rgba(43, 38, 24, 0.18);
}
.swatch.on { box-shadow: 0 0 0 2px var(--paper-panel), 0 0 0 3px var(--forest); }
.sw-ink   { background: var(--pen-ink); }
.sw-red   { background: var(--pen-red); }
.sw-blue  { background: var(--pen-blue); }
.sw-green { background: var(--pen-green); }
.sw-amber { background: var(--pen-amber); }
.swatch-note { font-size: 0.8125rem; color: var(--ink-faint); margin-left: 0.2rem; }

.specimen-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
/* Stacked rows space themselves. A style="" attribute would be inline CSS, and
   these pages carry style-src 'self' with no 'unsafe-inline' — the browser
   would simply drop it. */
.specimen-row + .specimen-row { margin-top: 0.9rem; }
.specimen-label {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-faint);
}

/* ── numbered flow ──────────────────────────────────────────────────── */
.flow { list-style: none; counter-reset: flow; margin: 1.5rem 0 0; display: flex; flex-direction: column; gap: 1.1rem; }
.flow li { counter-increment: flow; position: relative; padding-left: 2.4rem; }
.flow li::before {
  content: counter(flow);
  position: absolute; left: 0; top: 0.1em;
  width: 1.6rem; height: 1.6rem;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: 50%;
  font-size: 0.8125rem; font-weight: 600; color: var(--forest);
  font-variant-numeric: tabular-nums;
}
.flow strong { display: block; }

/* ── pull quote for the one line that carries the page ──────────────── */
.pull {
  margin: 1.75rem 0;
  padding-left: 1.15rem;
  border-left: 3px solid var(--leaf);
  font-size: 1.1875rem; line-height: 1.5; color: var(--forest-deep);
  text-wrap: pretty;
}

/* ── cross links + CTA ──────────────────────────────────────────────── */
.siblings { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line-strong); }
.siblings h2 { font-size: 1.15rem; margin-bottom: 1rem; }
.sib-list { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.sib {
  display: block; padding: 1rem 1.1rem;
  background: var(--paper-panel); border: 1px solid var(--line);
  border-radius: 0.6rem; text-decoration: none; color: inherit;
}
.sib:hover { border-color: var(--line-strong); background: var(--paper-edge); }
.sib-name { display: block; font-weight: 600; color: var(--forest-deep); margin-bottom: 0.15rem; }
.sib-note { display: block; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-soft); }

.cta {
  margin-top: 2.5rem; padding-top: 2rem;
  border-top: 1px solid var(--line-strong);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.25rem;
}
.cta-link { font-weight: 600; font-size: 1.125rem; color: var(--forest-deep); }
.cta-note { color: var(--ink-faint); font-size: 0.9375rem; }

footer {
  margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--line);
  color: var(--ink-faint); font-size: 0.9rem;
  display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem;
}
footer a { color: var(--forest); }

@media (max-width: 480px) {
  .wrap { padding: 2.25rem 1.25rem 4rem; }
  .specimen { padding: 1rem; }
}

/* ══ Interactive demos ═══════════════════════════════════════════════
   Each tool page carries a small working version of the thing it is
   describing: the three Learn modes answering one question, a canvas you
   can actually draw on with a tutor that marks it up, and a three-question
   test that marks itself. Prose can claim "it asks questions instead of
   answering"; a demo shows it in about four seconds.

   Everything here degrades: the markup ships with its first state visible,
   so a visitor with no JavaScript reads a static specimen rather than an
   empty box. */
.demo {
  margin: 1.75rem 0 0;
  background: var(--paper-panel);
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  overflow: hidden;
}
.demo-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.9rem;
  padding: 0.7rem 1.1rem;
  background: var(--paper-edge);
  border-bottom: 1px solid var(--line);
}
.demo-label {
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--forest);
}
.demo-hint { font-size: 0.875rem; color: var(--ink-faint); }
.demo-body { padding: 1.1rem; }
.demo-foot {
  display: block; padding: 0 1.1rem 1.1rem;
  font-size: 0.8125rem; line-height: 1.5; color: var(--ink-faint);
}

/* ── shared control look ── */
.demo button { font: inherit; cursor: pointer; }
.demo button:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }

/* ── Learn: one question, three modes ── */
.demo-q {
  margin-bottom: 0.9rem; padding-left: 0.9rem;
  border-left: 2px solid var(--line-strong);
  font-size: 1.0625rem; color: var(--ink-soft); font-style: italic;
}
.tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
button.tab {
  font-size: 0.9375rem; padding: 0.35rem 0.95rem;
  border: 1px solid var(--line-strong); border-radius: 999px;
  color: var(--ink-soft); background: transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
button.tab:hover { border-color: var(--forest); color: var(--forest-deep); }
button.tab[aria-selected="true"] {
  background: var(--forest); border-color: var(--forest);
  color: var(--paper-panel); font-weight: 600;
}
.thread { display: flex; flex-direction: column; gap: 0.7rem; }
.thread[hidden] { display: none; }
.msg { max-width: 90%; padding: 0.6rem 0.85rem; border-radius: 0.6rem; font-size: 0.9375rem; line-height: 1.55; }
.msg-you { align-self: flex-end; background: var(--forest); color: #f3efe2; }
.msg-ai  { align-self: flex-start; background: var(--paper); border: 1px solid var(--line); color: var(--ink); }
.msg-who {
  display: block; font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.65; margin-bottom: 0.2rem;
}

/* ── Notebook: a canvas that draws back ── */
.nb-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-bottom: 0.8rem; }
.nb-pen {
  width: 1.6rem; height: 1.6rem; border-radius: 50%; padding: 0;
  border: 1px solid rgba(43, 38, 24, 0.2); background: var(--c);
}
.nb-pen[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--paper-panel), 0 0 0 3px var(--forest); }
.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-btn {
  font-size: 0.875rem; padding: 0.28rem 0.7rem;
  border: 1px solid var(--line-strong); border-radius: 0.4rem;
  background: var(--paper); color: var(--ink-soft);
}
.nb-btn:hover { border-color: var(--forest); color: var(--forest-deep); }
.nb-sep { flex: 1 1 auto; }
.nb-canvas-wrap {
  position: relative; border: 1px solid var(--line); border-radius: 0.5rem;
  background: #fbf7ec; overflow: hidden;
}
#nbCanvas { display: block; width: 100%; height: 260px; touch-action: none; cursor: crosshair; }
.nb-tutor {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem;
  margin-top: 0.8rem; padding: 0.7rem 0.85rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: 0.5rem;
}
.nb-tutor-text { flex: 1 1 14rem; font-size: 0.9375rem; line-height: 1.5; color: var(--ink); min-width: 0; }
.nb-next {
  font-size: 0.9375rem; font-weight: 600; padding: 0.4rem 1.1rem;
  border: 1px solid var(--forest); border-radius: 0.4rem;
  background: var(--forest); color: var(--paper-panel);
}
.nb-next:hover { background: var(--forest-deep); border-color: var(--forest-deep); }
.nb-next[disabled] { opacity: 0.45; cursor: default; }

/* ── Review: a test that marks itself ── */
.q { padding: 0.9rem 0; border-top: 1px solid var(--line); }
.q:first-child { border-top: 0; padding-top: 0; }
.q-ask { font-weight: 600; margin-bottom: 0.55rem; }
.q-ask .q-n { color: var(--ink-faint); font-weight: 400; margin-right: 0.4rem; font-variant-numeric: tabular-nums; }
.opts { display: flex; flex-direction: column; gap: 0.3rem; }
.opt { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.9375rem; cursor: pointer; }
.opt input { margin-top: 0.42rem; accent-color: var(--forest); }
.q-text {
  font: inherit; font-size: 0.9375rem; width: 100%; max-width: 18rem;
  padding: 0.35rem 0.6rem; border: 1px solid var(--line-strong);
  border-radius: 0.35rem; background: var(--paper); color: var(--ink);
}
.q-text:focus-visible { outline: 2px solid var(--forest); outline-offset: 1px; }
.verdict {
  display: inline-block; margin-top: 0.55rem; padding: 0.15rem 0.5rem;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; border-radius: 0.25rem;
}
.verdict-right  { background: #dfe9dc; color: #2c4a32; }
.verdict-wrong  { background: #f0ded7; color: #8a4b3a; }
/* The third verdict the app really has: read, not guessed at. */
.verdict-review { background: #f2e7cf; color: #7a5a1e; }
.q-fb { margin-top: 0.4rem; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-soft); }
.q-fb strong { color: var(--ink); }
.mark-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line-strong); }
.mark-btn {
  font-size: 0.9375rem; font-weight: 600; padding: 0.42rem 1.15rem;
  border: 1px solid var(--forest); border-radius: 0.4rem;
  background: var(--forest); color: var(--paper-panel);
}
.mark-btn:hover { background: var(--forest-deep); border-color: var(--forest-deep); }
.mark-reset {
  font-size: 0.9375rem; padding: 0.42rem 0.9rem;
  border: 1px solid var(--line-strong); border-radius: 0.4rem;
  background: transparent; color: var(--ink-soft);
}
.mark-reset:hover { border-color: var(--forest); color: var(--forest-deep); }
.score { font-weight: 600; color: var(--forest-deep); font-variant-numeric: tabular-nums; }

/* ── Review: what the de-duplicator throws away ── */
.dupe-toggle { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 0.4rem; overflow: hidden; margin-bottom: 0.9rem; }
.dupe-toggle button {
  font-size: 0.875rem; padding: 0.32rem 0.85rem; border: 0;
  border-right: 1px solid var(--line-strong); background: var(--paper); color: var(--ink-soft);
}
.dupe-toggle button:last-child { border-right: 0; }
.dupe-toggle button[aria-pressed="true"] { background: var(--forest); color: var(--paper-panel); font-weight: 600; }
.dupe-list { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; }
.dupe-list li { display: flex; gap: 0.6rem; align-items: baseline; font-size: 0.9375rem; line-height: 1.5; }
.dupe-n { color: var(--ink-faint); font-variant-numeric: tabular-nums; flex: none; }
.dupe-list li.cut { color: var(--ink-faint); text-decoration: line-through; text-decoration-color: rgba(138, 75, 58, 0.6); }
.dupe-tag {
  flex: none; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: #8a4b3a; background: #f0ded7;
  padding: 0.1rem 0.4rem; border-radius: 0.25rem; align-self: center;
}

@media (prefers-reduced-motion: reduce) {
  .demo *, .demo { animation: none !important; transition: none !important; }
}

/* Social. Three marks on the end of the footer row; the handle each one points
   at is in its aria-label and title rather than spelled out beside it. */
.foot-social { display: inline-flex; align-items: center; gap: 0.45rem; margin-left: 0.35rem; }
.soc {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; flex: none;
  border: 1px solid var(--line-strong); border-radius: 50%;
  color: var(--forest); text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.soc svg { width: 0.9rem; height: 0.9rem; display: block; }
.soc:hover { background: var(--forest); border-color: var(--forest); color: var(--paper); text-decoration: none; }