/* The free spelling practice (templates/spelling_year.html, spelling_pick.html).

   The year's words sit printed on the grid page, as the practice pages print
   their reading, and the practice itself runs on one taped slip: the pattern
   keys and the yellow Start key, then the word's number, Hear it again, a
   ruled box to type in and Check, then the pen's tick or the right spelling
   with its tricky letters under the highlighter. practice.css loads first
   and brings the page shell, the keys, the tape, the pen marks and the FAQ;
   this file adds the slip, the box, the marked word and the printed sheet. */

/* .key sets a display, which beats the browser's own [hidden] rule. */
.spell [hidden] { display: none !important; }

.spell-run { margin-top: clamp(40px, 5vw, 60px); }
.spell-slip {
  position: relative;
  max-width: 40rem;
  margin: 24px 0 0;
  padding: 34px clamp(20px, 3.4vw, 36px) 30px;
  background: var(--slip);
  box-shadow: var(--slip-shadow);
  transform: rotate(-0.35deg);
}
.spell-ask { margin: 0; font-weight: 800; }

/* ------------------------------------------------------------------ before a run */

.spell-picks { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
.spell-pick {
  flex-direction: column;
  gap: 2px;
  min-height: 56px;
  padding: 10px 16px;
  font-size: 1rem;
  line-height: 1.25;
  text-align: left;
  align-items: flex-start;
}
.spell-pick-n { font-size: 0.82rem; font-weight: 400; color: var(--ink-soft); }
.spell-pick[aria-pressed="true"] {
  color: var(--hl-ink);
  background: var(--start);
  border-color: var(--start-line);
  box-shadow: 0 4px 0 var(--start-edge);
}
.spell-pick[aria-pressed="true"] .spell-pick-n { color: var(--hl-ink); }
.spell-quiet { margin-top: 18px; }

/* ------------------------------------------------------------------ a run */

.spell-play { margin: 0; }
.spell-count { margin: 0; font-weight: 800; color: var(--ink-soft); }
.spell-bar { height: 6px; margin: 8px 0 0; background: var(--tint); border-radius: 3px; overflow: hidden; }
.spell-bar span { display: block; height: 100%; width: 0; background: var(--pen); border-radius: 3px; transition: width 200ms ease; }
.spell-hear { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin: 22px 0 0; }
.spell-again { min-height: 56px; }
.spell-show-list { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

/* The box the child types in: a ruled line in the slip, big letters, the
   pen's caret, and no autocorrect capitals (the input's own attributes). */
.spell-in {
  display: block;
  width: 100%;
  max-width: 22rem;
  margin: 22px 0 0;
  padding: 8px 4px 6px;
  font: 700 clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem)/1.2 var(--f-print);
  letter-spacing: 0.04em;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 3px solid var(--rule);
  border-radius: 0;
  caret-color: var(--pen);
}
.spell-in:focus { outline: none; border-bottom-color: var(--pen); box-shadow: 0 3px 0 var(--pen); }
.spell-in:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

.spell-keys { margin-top: 22px; }
.spell-keys .key { min-height: 56px; }

/* The mark: the pen's tick or cross, a line, and on a slip the right word
   with the letters that differ under the highlighter, then the pattern in pen. */
.spell-mark { min-height: 1.5em; margin: 18px 0 0; }
.spell-verdict { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 800; }
.spell-verdict .mark.no { stroke: var(--red); }
.spell-verdict.is-right { color: var(--done); }
.spell-verdict.is-wrong { color: var(--red); }
.spell-word {
  display: block;
  margin: 8px 0 0;
  font: 700 clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem)/1.2 var(--f-print);
  letter-spacing: 0.04em;
  color: var(--ink);
}
.spell-word mark { padding: 0 0.04em; color: var(--hl-ink); background: var(--hl); border-radius: 3px; }
.spell-note { margin: 6px 0 0; font-size: 1.2rem; line-height: 1.3; }
.spell-typed { margin: 6px 0 0; color: var(--ink-soft); }
.spell-typed s { text-decoration-thickness: 2px; text-decoration-color: var(--red); }

/* ------------------------------------------------------------------ after a run */

.spell-score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0; font-weight: 800; }
.spell-score-n { font-size: 2.4rem; line-height: 1; }
.spell-h3 { margin: 22px 0 0; font-size: 1.15rem; font-weight: 800; line-height: 1.3; }
.spell-misses { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.spell-misses li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 6px 0; border-bottom: 1px solid var(--ink-soft); }
.spell-misses b { font-size: 1.25rem; letter-spacing: 0.03em; }
.spell-misses span { color: var(--ink-soft); }
.spell-all-right { margin: 14px 0 0; font-weight: 700; color: var(--done); }
.spell-honest { max-width: 40em; margin-top: 26px; padding-top: 18px; border-top: 2px solid var(--rule); }
.spell-end .spell-pitch .prep-start { margin-top: 18px; }
.spell-links { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 4px; }
.spell-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

/* ------------------------------------------------------------------ the list */

.spell-list .prep-intro { max-width: 44em; }
.spell-print-list { min-height: 48px; margin: 10px 0 0; padding: 0 1.1rem; font-size: 1rem; vertical-align: middle; }
.spell-words {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 6px 24px;
}
.spell-words li { padding: 6px 0; border-bottom: 1px solid var(--ink-soft); line-height: 1.4; }
.spell-words b { display: inline-block; min-width: 7.5em; font-size: 1.12rem; letter-spacing: 0.03em; }
.spell-words span { color: var(--ink-soft); }
.spell-sheet { display: none; }

/* The picker: under each year, its patterns as a short list. */
.spell-front .guide-list p { margin-top: 4px; }
.spell-front-patterns { max-width: 40em; margin: 6px 0 0; padding: 0 0 0 1.2em; color: var(--ink-soft); }
.spell-front .guide-list .spell-front-patterns li { padding: 2px 0; border-bottom: 0; }

@media (max-width: 620px) {
  .spell-slip { margin-left: -4px; margin-right: -4px; padding: 28px 18px 26px; }
  .spell-keys .key, .spell-again, .spell-pick { width: 100%; }
  .spell-picks { gap: 8px; }
  .spell-words { grid-template-columns: minmax(0, 1fr); }
  .spell-words b { display: block; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .spell-bar span { transition: none; }
}

/* ------------------------------------------------------------------ paper

   The list prints as a sheet: the words with their sentences, pattern by
   pattern, then ten ruled lines for the child. The print key on a finished
   run prints the words to practise instead (html.spell-print-misses). */
@media print {
  html, body.pub, .page { background: #fff; box-shadow: none; }
  .page::before { display: none; }
  .nav, .back, .skip, .spell-run, .faq-list, .prep-end, .prep-more, .prep-fine, .prep-meta,
  .prep-lede, .prep-intro, .spell .prep-sec > h2#faq-h, .spell-print-list { display: none !important; }
  .spell .page, .prep { padding: 0; max-width: none; }
  .spell-list, .spell-list h2 { display: block !important; margin-top: 0; }
  .spell-words { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 24px; }
  .spell-words li, .spell-misses li { border-bottom-color: #999; break-inside: avoid; }
  .spell-words span, .spell-misses span { color: #444; }
  .spell-sheet { display: block; margin-top: 28px; break-before: page; }
  .spell-lines { margin: 12px 0 0; padding: 0 0 0 1.6em; }
  .spell-lines li { height: 2.4em; border-bottom: 1px solid #333; }
  html.spell-print-misses .spell-list { display: none !important; }
  html.spell-print-misses .spell-run, html.spell-print-misses .spell-run h2,
  html.spell-print-misses .spell-slip, html.spell-print-misses .spell-end { display: block !important; }
  html.spell-print-misses .spell-slip { padding: 0; box-shadow: none; transform: none; }
  html.spell-print-misses .tape, html.spell-print-misses .spell-keys, html.spell-print-misses .spell-pitch,
  html.spell-print-misses .spell-later,
  html.spell-print-misses .spell-setup, html.spell-print-misses [data-setup], html.spell-print-misses [data-play] { display: none !important; }
}