/* The test practice pages: NAPLAN-style, OC-style, selective-style, thinking
   skills and AMC-style practice.

   Each is a page of reading printed straight onto the grid page, like the
   Terms of Use, at a reading measure. The sample questions are the only paper
   stuck on: each is a taped slip with a SAMPLE stamp, its options set out like
   a test paper, and its worked answer folded away until a parent opens it.
   book.css and public.css load first and bring the tokens, the keys, the page
   and the tape. */

.prep { max-width: 46rem; margin: 0 auto; overflow-wrap: break-word; }
.prep h1 {
  margin: 0;
  font-size: clamp(1.95rem, 1.35rem + 1.8vw, 2.6rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.018em;
}
.prep-meta { margin: 10px 0 0; font-size: 0.9rem; color: var(--ink-soft); }
.prep-lede { max-width: 38em; margin: 22px 0 0; font-size: clamp(1.1rem, 1rem + 0.3vw, 1.25rem); }
.prep-intro { max-width: 38em; margin: 18px 0 0; }

.prep-start { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin: 28px 0 0; }
/* On white paper the highlighter key is ruled in Highlighter Edge. */
.prep .key-start { border-color: var(--start-edge); }
.prep-price { margin: 0; color: var(--ink-soft); }
.prep-price a { font-weight: 700; }

/* Section headings on the page, ruled off in the margin's red. */
.prep-sec { margin-top: clamp(56px, 7vw, 88px); }
.prep h2 {
  display: inline;
  margin: 0;
  font-size: clamp(1.7rem, 1.25rem + 1.3vw, 2.35rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.018em;
  text-decoration: underline;
  text-decoration-color: var(--margin);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.24em;
}
.prep-sec > h2 + p, .prep-sec > h2 + dl, .prep-sec > h2 + ul, .prep-sec > h2 + .faq-list { margin-top: 22px; }
/* A link to a section (the front page's year chips open #samples-h) lands
   clear of the sticky nav. */
.prep-sec > h2 { scroll-margin-top: 100px; }
.prep-sec > p { max-width: 40em; margin-bottom: 0; }

/* The facts about a test: rows ruled in ink, the label above its line. */
.facts { margin: 22px 0 0; border-top: 2px solid var(--rule); }
.facts > div { padding: 14px 0; border-bottom: 1px solid var(--ink-soft); }
.facts dt { font-weight: 700; }
.facts dd { margin: 4px 0 0; max-width: 40em; }
.src { margin: 14px 0 0; font-size: 0.95rem; color: var(--ink-soft); }

/* What Learnest does, each line ticked in green. */
.mark { flex: none; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3.2; overflow: visible; }
.mark.ok { stroke: var(--done); }
.ticks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 16px; }
.ticks li { display: flex; gap: 14px; align-items: baseline; max-width: 40em; }
.ticks .mark { position: relative; top: 4px; width: 24px; height: 20px; }
.prep-not { margin: 22px 0 0; padding-top: 16px; border-top: 2px solid var(--rule); }

/* ------------------------------------------------------------------ the samples */

.qs { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 44px; }
.q {
  position: relative;
  padding: 30px clamp(20px, 3.4vw, 36px) 10px;
  background: var(--slip);
  box-shadow: var(--slip-shadow);
  transform: rotate(-0.35deg);
}
.q:nth-child(even) { transform: rotate(0.4deg); }

/* A rubber stamp, so nobody mistakes a sample for a child's own work. */
.stamp {
  position: absolute;
  top: 14px;
  right: 16px;
  padding: 3px 7px 2px;
  font: 800 0.7rem/1.2 var(--f-print);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  border: 2px solid var(--red);
  border-radius: 6px;
  transform: rotate(7deg);
  /* Full strength: at 0.88 the small bold red fell to 4.4:1 on white. */
  opacity: 1;
}

.q-label { display: flex; align-items: baseline; gap: 12px; margin: 0 6.5rem 12px 0; font-weight: 700; color: var(--ink-soft); }
.q-no { font-size: 1.6rem; font-weight: 700; line-height: 1; }
.q-stem { margin: 0; font-size: 1.12rem; line-height: 1.5; }
.q-type { margin: 14px 0 0; font-size: 0.95rem; color: var(--ink-soft); }

/* The options, lettered like a test paper: each letter in a ruled ring. */
.q-opts { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.q-opts li { display: flex; align-items: baseline; gap: 12px; }
.q-letter {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--pen);
  border: 2px solid var(--pen);
  border-radius: 50%;
}
/* Once the worked answer is open, the right option's ring turns green. */
.q:has(.q-work[open]) .is-answer .q-letter { color: var(--done); background: var(--done-bg); border-color: var(--done); }

.q-work { margin: 18px 0 0; border-top: 2px solid var(--rule); }
.q-work summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 56px;
  padding-right: 44px;
  font-weight: 800;
  color: var(--pen);
  list-style: none;
  cursor: pointer;
}
.q-work summary::-webkit-details-marker { display: none; }
.q-work summary::before,
.q-work summary::after,
.found-more summary::before,
.found-more summary::after,
.faq-list summary::before,
.faq-list summary::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 18px;
  height: 3px;
  margin-top: -1.5px;
  background: var(--pen);
  border-radius: 2px;
  transition: transform 180ms var(--ease);
}
.q-work summary::after, .found-more summary::after, .faq-list summary::after { transform: rotate(90deg); }
.q-work[open] summary::after, .found-more[open] summary::after, .faq-list details[open] summary::after { transform: rotate(0deg); }
.q-ans { display: flex; gap: 12px; align-items: baseline; margin: 2px 0 8px; font-weight: 700; }
.q-ans .mark { position: relative; top: 4px; width: 24px; height: 20px; }
.q-ans .pen { font-size: 1.3rem; }
.q-why { margin: 0 0 18px; }

.frac { font-size: 0.82em; white-space: nowrap; }
.frac sup, .frac sub { font-size: 0.8em; }

/* Trying a sample. static/try.js turns each option of a multiple-choice slip
   into a key and adds .can-try. The teacher marks the pick: a green tick and
   ring beside a right answer; a red cross and ring beside a wrong one, with
   the usual mistake behind it written under it in pen. Without the script the
   slip stays the printed list above. */
.mark.no { stroke: var(--red); }
.can-try .q-opts { gap: 6px; }
.can-try .q-opts li { display: block; }
.q-pick {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: calc(100% + 20px);
  min-height: 48px;
  margin: 0 -10px;
  padding: 7px 10px;
  font: inherit;
  line-height: 1.45;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 120ms ease, border-color 120ms ease;
}
/* A touch screen keeps :hover on the last key tapped, so only a pointer gets it. */
@media (hover: hover) {
  .q-pick:hover { background: var(--tint); border-color: var(--pen); }
}
.q-pick:focus-visible { outline-offset: 2px; border-radius: 10px; }
.q-pick .q-letter { align-self: center; }
.q-pick .q-text { flex: 1 1 auto; min-width: 0; }
.is-right .q-pick, .is-right .q-pick:hover { background: var(--done-bg); border-color: var(--done); }
.is-right .q-letter { color: var(--done); background: var(--done-bg); border-color: var(--done); }
.is-wrong .q-pick, .is-wrong .q-pick:hover { background: transparent; border-color: var(--red); }
.is-wrong .q-letter { color: var(--red); border-color: var(--red); }
.try-mark { flex: none; align-self: center; width: 30px; height: 26px; }
.q-note { margin: 4px 0 6px 42px; font-size: 1.2rem; line-height: 1.3; }
.q-again { min-height: 48px; margin: 14px 0 0; padding: 0 1.25rem; font-size: 1rem; }
.q-again[hidden] { display: none; }

@keyframes try-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes try-write {
  from { clip-path: inset(-0.4em 100% -0.4em -0.2em); }
  to { clip-path: inset(-0.4em -0.6em -0.4em -0.2em); }
}
@media (prefers-reduced-motion: no-preference) {
  .try-mark { stroke-dasharray: 1; animation: try-draw 420ms var(--ease) both; }
  .q-note { animation: try-write 600ms var(--ease) 260ms both; }
  /* A marked check or paper prints its marks: the teacher has already marked
     every question, so only the found slip at the top writes (see below). */
  .chk-marked .try-mark, .chk-marked .q-note { animation: none; }
}

/* ------------------------------------------------------------------ questions parents ask */

.faq-list { margin-top: 22px; }
.faq-list details { border-top: 2px solid var(--rule); }
.faq-list details:last-child { border-bottom: 2px solid var(--rule); }
.faq-list summary {
  position: relative;
  padding: 18px 52px 18px 0;
  font-size: clamp(1.08rem, 1rem + 0.25vw, 1.2rem);
  font-weight: 800;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover, .q-work summary:hover { color: var(--pen); text-decoration: underline; text-decoration-thickness: 2px; }
.faq-list details p { max-width: 40em; margin: -2px 0 22px; }

/* ------------------------------------------------------------------ the way out */

.prep-end h2 { display: block; text-decoration: none; }
.prep-more { margin-top: clamp(56px, 7vw, 88px); padding-top: 22px; border-top: 2px solid var(--rule); }
.prep-more h2 { display: block; font-size: clamp(1.35rem, 1.1rem + 0.7vw, 1.7rem); line-height: 1.15; text-decoration: none; }
.prep-more ul { list-style: none; margin: 10px 0 0; padding: 0; }
.prep-more a { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; }
.prep-fine { margin: 26px 0 0; font-size: 0.95rem; color: var(--ink-soft); }

/* A year page: the tests around that year, each a link with one line under it,
   and the other years in a row that wraps. */
.year-tests { list-style: none; margin: 22px 0 0; padding: 0; border-top: 2px solid var(--rule); }
.year-tests li { padding: 6px 0 14px; border-bottom: 1px solid var(--ink-soft); }
.year-tests a { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; }
.year-tests span { display: block; max-width: 40em; }
.prep-more .year-list { display: flex; flex-wrap: wrap; gap: 0 1.4em; }

/* ------------------------------------------------------------------ the free checks

   A free check (templates/check.html) is the samples' slips turned into one
   form: each option a radio key whose lettered ring fills in pen when picked.
   The marked check (check_result.html) reuses the samples' marks: a green
   ring and tick on the right answer picked, a red ring and cross on a wrong
   one with the usual slip written under it in pen. Figures are drawn by
   learn/web/figures.py from three colours, set here for the page. */

.chk { --accent: var(--pen); --card: var(--slip); --head-bg: var(--tint); }
.chk .figure { margin: 12px 0 14px; color: var(--ink); }
/* A label can sit a few units past the figure's own box ("2 cm" beside a
   rectangle), so the drawing may spill into the slip's padding, not be cut. */
.chk .figure svg { max-width: 320px; overflow: visible; }

/* The links to a check from a practice page, under its start key. */
.prep-check { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 18px 0 0; }
.prep-check .key { min-height: 56px; }

.chk-q fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
/* A check's slip carries no SAMPLE stamp, so its label takes the full width. */
.chk-q .q-label, .chk-q legend.q-label { margin-right: 0; }
.chk-q legend { float: left; width: 100%; padding: 0; }
.chk-q legend + * { clear: both; }
.chk-opts { list-style: none; gap: 6px; }
.chk-opts li { display: block; }
.chk-opt {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-height: 48px;
  margin: 0 -10px;
  padding: 7px 10px;
  line-height: 1.45;
  border: 2px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 120ms ease, border-color 120ms ease;
}
/* The radio itself stays in the page for the keyboard and a screen reader;
   the lettered ring shows it. */
.chk-opt input { position: absolute; top: 50%; left: 14px; width: 22px; height: 22px; margin: -11px 0 0; opacity: 0; }
.chk-opt .q-letter { align-self: center; }
.chk-opt .q-text { flex: 1 1 auto; min-width: 0; }
@media (hover: hover) {
  .chk-opt:hover { background: var(--tint); border-color: var(--pen); }
}
.chk-opt input:checked + .q-letter { color: var(--slip); background: var(--pen); }
.chk-opt:has(input:checked) { background: var(--tint); border-color: var(--pen); }
.chk-opt input:focus-visible + .q-letter { outline: 3px solid var(--focus); outline-offset: 3px; }

.chk-error { margin: 22px 0 0; padding: 10px 14px; font-weight: 700; color: var(--red); background: var(--slip); border: 2px solid var(--red); border-radius: 10px; }
.chk-send { margin-top: 40px; }

/* The marked check. */
.chk-marked h1 { margin-top: 6px; }
.chk-marked .prep-meta { margin: 0; font-weight: 700; }
.chk-honest { max-width: 40em; margin: 26px 0 0; padding-top: 14px; border-top: 2px solid var(--rule); }
.chk-share { margin: 22px 0 0; }
.chk-share .key { margin: 0 0 12px; }
/* .key sets a display, which beats the browser's own [hidden] rule: keep the
   share key away until check.js turns it on, so no JavaScript means no dead key. */
.chk-share-key[hidden] { display: none; }
.chk-share .prep-price a { overflow-wrap: anywhere; }
.chk-shared { margin: 8px 0 0; font-weight: 700; color: var(--done); }
.chk-shared:empty { display: none; }
.chk-verdict { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-weight: 800; }
.chk-wrong .chk-verdict { color: var(--red); }
.chk-right .chk-verdict { color: var(--done); }
.chk-blank .chk-verdict { color: var(--ink-soft); }
.chk-line { display: flex; align-items: baseline; gap: 12px; padding: 4px 0; }
.chk-line .q-letter { align-self: center; }
.chk-line .q-text { flex: 1 1 auto; min-width: 0; }
.chk-marked .is-answer .q-letter { color: var(--done); background: var(--done-bg); border-color: var(--done); }
.chk-marked .is-wrong .q-letter { color: var(--red); border-color: var(--red); }
.chk-marked .q-ans { margin: 14px 0 6px; }

/* ------------------------------------------------------------------ the finding first

   A marked check or practice paper opens with what it found
   (templates/_found.html, learn/web/ringed.py): the skills on a taped slip,
   each ringed in the teacher's red with the usual slip written under it in
   pen, and the rest folded under "And N more". Then one sentence on what
   happens next, the one start key and the short trial line; the demo's
   parent panel has the same three under its email. */

.found-slip {
  position: relative;
  max-width: 30rem;
  margin: 20px 0 0;
  padding: 28px clamp(20px, 3.4vw, 32px) 16px;
  background: var(--slip);
  box-shadow: var(--slip-shadow);
  transform: rotate(-0.35deg);
}
.found-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.found-skill { display: flex; flex-direction: column; align-items: flex-start; }
.found-subj { font-size: 0.9rem; font-weight: 700; color: var(--ink-soft); }
.found-ring { margin: 0.4em 0.35em 0.2em; font-size: 1.1rem; line-height: 1.35; }
.found-note { margin-top: 6px; font: 600 clamp(1.1rem, 0.98rem + 0.35vw, 1.3rem)/1.25 var(--f-pen); color: var(--pen); }
.found-none { margin: 0; font-weight: 700; }
.found-more { margin: 16px 0 0; border-top: 1px solid var(--rule); }
.found-more summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 48px;
  padding-right: 44px;
  font-weight: 700;
  color: var(--pen);
  list-style: none;
  cursor: pointer;
}
.found-more summary::-webkit-details-marker { display: none; }
.found-more summary:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.found-rest { margin: 2px 0 8px; padding-left: 1.2em; display: grid; gap: 8px; }
.found-rest li::marker { color: var(--pen); }

.found-next { margin: 26px 0 0; }
.found-what { max-width: 34em; margin: 0 0 16px; }
.found-next .key-start { width: 100%; max-width: 26rem; }
.found-terms { max-width: 34em; margin: 14px 0 0; font-size: 0.95rem; color: var(--ink-soft); }
.found-terms + .found-terms { margin-top: 6px; }
.found-terms a { font-weight: 700; }
.dp-sample { margin: 22px 0 0; }
.dp-sample a { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; }

/* ------------------------------------------------------------------ the parent guides

   A guide (templates/guides/) is a longer page of reading on the same grid
   page: question headings, short paragraphs, a few lists, the test facts in
   the ruled rows above, and the sources at the foot. The index lists the six
   guides as ruled rows. */

.guide-sec > h2 + ol, .guide-sec > h2 + h3 { margin-top: 22px; }
.guide-sec p { max-width: 40em; }
.guide-sec h3 { margin: 26px 0 0; font-size: 1.15rem; font-weight: 800; line-height: 1.3; }
.guide-sec h3 + p { margin-top: 8px; }
.guide-sec ul, .guide-sec ol { max-width: 40em; margin: 16px 0 0; padding-left: 1.3em; display: grid; gap: 10px; }
.guide-sec li { padding-left: 0.2em; }
.guide-sec li::marker { font-weight: 700; color: var(--pen); }
.guide-sec .guide-sources { list-style: none; padding: 0; gap: 0; border-top: 2px solid var(--rule); }
.guide-sources li { padding: 10px 0; border-bottom: 1px solid var(--ink-soft); }
.guide-sources a { font-weight: 700; overflow-wrap: anywhere; }
.guide-sources span { color: var(--ink-soft); }
.guide-list { list-style: none; margin: 22px 0 0; padding: 0; border-top: 2px solid var(--rule); }
.guide-list li { padding: 8px 0 16px; border-bottom: 1px solid var(--ink-soft); }
.guide-list a.guide-title { display: inline-flex; align-items: center; min-height: 48px; font-size: 1.15rem; font-weight: 800; line-height: 1.3; }
.guide-list p { max-width: 40em; margin: 0; }
.guide-list .guide-check { margin-top: 6px; font-size: 0.95rem; color: var(--ink-soft); }
.guide-list .guide-check a { font-weight: 700; }
.prep-guides a { font-weight: 700; }
.prep-tool a { font-weight: 700; }
.prep-papers a { font-weight: 700; }
/* The line after a guide's lede that leads to its free check (design audit
   change 6), ruled off like a note so a parent who searched finds it. */
.guide-try { max-width: 40em; margin: 20px 0 0; padding: 12px 0; border-top: 1px solid var(--key-line); border-bottom: 1px solid var(--key-line); }
.guide-try a { font-weight: 700; }

/* "Get these results by email" on a marked check, and "Email me when the
   dates are published" on the applications page (learn/web/leads.py): one
   56px email field in public.css's field style, the 24px box, and a key. */
.lead-form { max-width: 34rem; margin: 22px 0 0; }
.lead-form .field { margin: 0 0 14px; }
.lead-form .check { align-items: flex-start; min-height: 0; margin: 0 0 18px; padding: 4px 0; line-height: 1.4; }
.lead-form .check input { margin-top: 2px; }
.lead-form .key { min-height: 56px; }
.lead-form .hint { margin: 12px 0 0; }
.lead-ask { max-width: 40em; margin: 0 0 16px; }
.lead-dates { margin-top: 28px; padding-top: 22px; border-top: 2px solid var(--rule); }
/* The slip the forms answer on: its lede is a line, not a form's reserved slot. */
.lead-slip .lede:has(+ form) { min-height: 0; }
.lead-slip .slip-links { margin-top: 22px; }
.lead-addr { overflow-wrap: anywhere; }
.lead-slip .lead-again .check { align-items: flex-start; min-height: 0; margin: 0 0 18px; padding: 4px 0; line-height: 1.4; }
.lead-slip .lead-again .check input { margin-top: 2px; }
/* Clear of the key's bottom edge. */
.lead-slip .lead-again .hint { margin-top: 14px; }

@media (max-width: 620px) {
  .q { padding: 28px 18px 8px; }
  .q-label { margin-right: 5.5rem; }
  .prep-start .key-start { width: 100%; }
  .prep-check .key, .chk-share .key, .lead-form .key { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .q-work summary::after, .found-more summary::after, .faq-list summary::after { transition: none; }
}

/* ------------------------------------------------------------------ the demo

   Try it with your child (learn/web/demo.py): the front of the demo, where a
   parent picks a year, and the parent panel after it, where tonight's email
   is drawn as a slip taped to the page. */

/* The five year keys sit on a phone's first screen (design audit change 1):
   the lede is short, the section opens close under it, and each key is the
   year alone, two to a row with the last across both, at every width. */
.demo-pick .prep-lede { margin-top: 16px; }
.demo-pick .pick-sec { margin-top: 30px; }
.demo-stages { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 34rem; }
.demo-stages li:last-child { grid-column: 1 / -1; }
.demo-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: 8px 12px;
  text-align: center;
  line-height: 1.2;
}
.demo-stage b { font-size: 1.1rem; font-weight: 800; }
.demo-stage:hover b { text-decoration: underline; text-decoration-thickness: 2px; }
.years-note { max-width: 34rem; margin: 14px 0 0; font-size: 0.95rem; color: var(--ink-soft); }

.demo-steps { max-width: 40em; margin: 22px 0 0; padding: 0 0 0 1.4em; display: grid; gap: 12px; }
.demo-steps li::marker { font-weight: 800; color: var(--pen); }
.demo-steps b { font-weight: 800; }

/* ------------------------------------------------------------------ now or tomorrow

   A parent who lands at night has no child beside them (learn/web/later_email.py).
   On /try a slip taped under the year keys keeps the page for tomorrow with
   one email field; on a free check the same field opens from a one-line fold
   under the intro, so the questions still come first. The key is a paper
   key: the page's one highlighter key stays the start key. */

.later-slip {
  position: relative;
  max-width: 34rem;
  margin: 36px 0 0;
  padding: 28px clamp(20px, 3vw, 32px) 24px;
  background: var(--slip);
  box-shadow: var(--slip-shadow);
  transform: rotate(-0.35deg);
}
.later-slip h2 {
  display: block;
  font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.6rem);
  line-height: 1.2;
  text-decoration: none;
}
.later-slip > p { max-width: 30em; margin: 8px 0 0; }
.later-slip .lead-form { margin-top: 18px; }
.later-slip .key, .later-fold .key { width: 100%; }

.later-fold { max-width: 34rem; margin: 18px 0 0; border-top: 1px solid var(--key-line); border-bottom: 1px solid var(--key-line); }
.later-fold summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 8px 44px 8px 0;
  font-weight: 700;
  line-height: 1.3;
  color: var(--pen);
  list-style: none;
  cursor: pointer;
}
.later-fold summary::-webkit-details-marker { display: none; }
.later-fold summary::before,
.later-fold summary::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 16px;
  height: 3px;
  margin-top: -1.5px;
  background: var(--pen);
  border-radius: 2px;
  transition: transform 180ms var(--ease);
}
.later-fold summary::after { transform: rotate(90deg); }
.later-fold[open] summary::after { transform: rotate(0deg); }
@media (hover: hover) {
  .later-fold summary:hover { text-decoration: underline; text-decoration-thickness: 2px; }
}
.later-fold > p { max-width: 34em; margin: 4px 0 0; }
.later-fold .lead-form { margin: 16px 0 22px; }
@media (prefers-reduced-motion: reduce) {
  .later-fold summary::after { transition: none; }
}

/* The email, built from the demo's marks, on a taped slip the size of a phone. */
.demo-mail { max-width: 26rem; margin: 30px 0 0; padding-bottom: 22px; }
.dm-from { display: flex; justify-content: space-between; margin: 0 6.5rem 2px 0; padding-bottom: 8px; font-weight: 800; border-bottom: 1px solid var(--rule); }
.dm-when { font-weight: 400; color: var(--ink-soft); }
.dm-subject { margin: 8px 0 14px; font-size: 0.95rem; color: var(--ink-soft); }
.dm-card { padding: 12px 14px 8px; background: var(--tint); border-radius: 10px; }
.dm-card p { margin: 0 0 8px; line-height: 1.45; }
.dm-kid { font-size: 1.15rem; }
.dm-kid span { margin-left: 0.3em; font-size: 0.85rem; font-weight: 700; color: var(--done); }
.dm-ring { position: relative; display: inline-block; margin: 0.3em 0.3em 0.2em 0.3em; padding: 0.1em 0.3em; font-weight: 700; }
.dm-ring .ring { position: absolute; left: -0.4em; top: -0.35em; width: calc(100% + 0.8em); height: calc(100% + 0.7em); overflow: visible; fill: none; pointer-events: none; }
.dm-ring .ring path { fill: none; stroke: var(--red); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.dm-note { display: block; margin-top: 4px; font: 600 1.05rem/1.3 var(--f-pen); color: var(--pen); }

/* The teacher's hand on a result (design audit motion M1): once, as the page
   opens, the ring draws round the first skill found (700 ms), then its usual
   slip writes in pen (600 ms); the second skill follows 250 ms behind, and
   all of it is done by 1.4 s. Only these two rings and two lines move, by
   stroke-dashoffset and clip-path; every other ring is already drawn, the
   key works from the first frame, and with reduced motion everything is in
   place at first paint. The marked check, the marked paper and the demo's
   email share it (.writes-1 and .writes-2, templates/_found.html). */
@keyframes pen-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pen-write {
  from { clip-path: inset(-0.4em calc(100% + 0.2em) -0.4em -0.2em); }
  to { clip-path: inset(-0.4em -0.6em -0.4em -0.2em); }
}
@media (prefers-reduced-motion: no-preference) {
  .writes-1 .ring path, .writes-2 .ring path { stroke-dasharray: 1; animation: pen-draw 700ms var(--ease) both; }
  .writes-2 .ring path { animation-delay: 250ms; }
  .writes-1 .found-note, .writes-1 .dm-note { animation: pen-write 600ms var(--ease) 550ms both; }
  .writes-2 .found-note, .writes-2 .dm-note { animation: pen-write 600ms var(--ease) 800ms both; }
}