/*
  Shared exercise styles for lessons rendered from the plain-text format
  (includes/lesson_text.php). These are the bits NOT already carried by a
  series stylesheet (readimagine.css has most of the exercise vocabulary:
  .ex/.wordbox/.cloze/.blank/.item/.pick/.opt/.scram/.legend/.ansline …).

  Link this AFTER the series stylesheet so a series can still override. The set
  grows as more exercise types move here from individual lessons — the point of
  Phase 3: one exercise type, styled once, shared across every book.

  Colour variables (--soft, --soft-b, --blue-d, --c-v) come from the series
  stylesheet, so these rules match whichever series includes them.
*/

/* picture-clue emoji sitting next to a fill-in blank */
.hint { font-size: 1.15em; margin-left: 2px; vertical-align: -2px; }

/* one-line grammar reminder under a "Choose and write" instruction */
.guide {
  font-size: 13pt; line-height: 1.35;
  background: var(--soft); border: 2px solid var(--soft-b);
  border-radius: 10px; padding: 6px 12px; margin: 3px 0 6px;
  color: var(--blue-d);
}
.guide .hl { color: var(--c-v); font-weight: 700; }   /* the added -s, highlighted */
.guide .g  { color: #6f7d86; }                          /* grey (Ben and Rosie) hints */

/* Unscramble-the-letters picture grid. The series stylesheet's base .grid is a
   3-col 1fr layout; here the cells are a fixed width and centred, with the
   column count authorable (cols: N -> --cols). Linked after the series sheet,
   so this wins. */
.grid.unscramble {
  /* each cell is at least 42mm but grows to fit a long letter hint; the columns
     are centred as a group, so a short set (4 pics) stays compact and a wide one
     (8-letter words) still fits on one line. */
  grid-template-columns: repeat(var(--cols, 2), minmax(42mm, max-content));
  justify-content: center;
  column-gap: 34px;
  row-gap: 14px;
  margin-top: 10px;
}
/* keep the picture a fixed size no matter how wide its cell grows, and keep the
   scrambled-letter hint on one line */
.grid.unscramble .pic     { max-width: 42mm; }
.grid.unscramble .letters { white-space: nowrap; }
/* a wider gap between the scrambled letters of a two-word answer ("ice hockey") */
.letters .wbreak { display: inline-block; width: 1.3em; }

/* ---- Answer-the-questions box: mixed-up answers to copy (answers: directive) ---- */
.answers {
  font-size: 12.5pt; color: var(--blue-d);
  background: var(--soft); border: 2px dashed var(--soft-b);
  border-radius: 10px; padding: 7px 14px; margin-top: 12px;
  text-align: center; line-height: 1.7;
}
.answers .sep { color: #9aa8ae; margin: 0 9px; }

/* ---- Sequencing: an empty box to write the order number into + story pics ---- */
.numbox {
  flex: 0 0 auto; width: 27px; height: 27px;
  border: 2.5px solid var(--blue); border-radius: 6px;
  background: #fff; align-self: center;
}
.seq .item {
  background: #fff; border: 2.5px solid var(--soft-b);
  border-radius: 12px; padding: 8px 14px; margin-top: 9px;
}
.storypix { display: flex; justify-content: center; gap: 12px; margin-top: 14px; }
.storypix img {
  width: 46mm; height: 39mm; object-fit: cover;
  border: 2.5px solid var(--soft-b); border-radius: 12px;
  display: block; background: #fff;
}

/* Phrase word bank: multi-word answers flow in centred rows and never break
   mid-phrase, instead of being forced into a rigid squashing grid. */
.wordbox.phrases { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px 26px; }
.wordbox.phrases span { white-space: nowrap; }

/* Auto single-word bank: evenly balanced, centred rows (no orphan last word).
   The parser splits the words into rows of near-equal count; each row centres
   on its own, so a 2-row bank reads 4+4 / 4+3, never 4+1. */
.wordbox.rows { display: flex; flex-direction: column; gap: 9px; }
.wordbox.rows .wbrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px 30px; }

/* ---- Project: a big dashed box to draw in (draw: directive; height set inline) ---- */
/* an optional bold label above a draw box ("draw: fill | Draw your team's jersey.") */
.drawlabel { font-weight: 700; color: var(--blue-d); font-size: var(--t-body); margin-top: 16px; }
.drawbox {
  border: 3px dashed var(--soft-b); border-radius: 16px;
  background: #fbfeff; margin: 10px 0 4px;
}
/* draw: fill -> the box grows to soak up the page's leftover height, so a short
   page has no big empty gap above the footer. (.page is a flex column.) */
.drawbox.fill { flex: 1 1 auto; min-height: 70mm; }

/* spread -> the exercise's items share the page's leftover height as EQUAL gaps
   all the way down (an even rhythm), instead of pooling the slack in one big gap
   above the footer or flinging the first and last items to the very edges. The
   per-item margin is dropped so every gap is the same size (space-evenly + the
   default margin would make the end gaps smaller than the ones between items). */
.fillcol.spread { flex: 1 1 auto; justify-content: space-evenly; }
.fillcol.spread .item { margin-top: 0; }

/* center -> the exercise keeps its natural line spacing but the whole block is
   centred in the page's leftover height: a balanced gap above and below instead
   of the block jammed under the instruction with a void beneath it. Best for a
   SHORT block; a tall list wants "spread" so the slack is shared, not doubled up
   into one gap above and one below. */
.fillcol.center { flex: 1 1 auto; justify-content: center; }

/* space -> a flexible vertical spacer (emitted by the "space" line). It soaks up
   the page's leftover height at exactly the point the author drops it, so a gap
   opens there — e.g. a "space" line just before a pics: row pushes the pictures
   down the sheet with one clean gap rather than hugging the last item. */
.vspace { flex: 1 1 auto; }

/* write -> numbered ruled lines (emitted by the "write" line) for the student to
   copy out the finished sentences. The block grows to fill the page's leftover
   height and spaces its lines evenly, so the copy-out area uses the whole sheet
   instead of bunching under the exercise. Each row is a .numline (bold number +
   full-width write line, styled in readimagine.css). */
.writeout {
  flex: 1 1 auto; display: flex; flex-direction: column;
  justify-content: space-evenly; margin-top: 6px;
}
.writeout .numline { margin-top: 0; }

/* Inline "choose the word" options — keep a "get / getting / gets" list together
   on one line rather than letting it wrap mid-choice. (The .opt pills and the
   grey "/" come from the series stylesheet.) */
.choice { white-space: nowrap; }

/* spread on a match exercise: the grid grows to fill the page and each column
   spaces its rows evenly, so a short 4- or 5-row match doesn't leave a void. */
.match.spread { flex: 1 1 auto; }
.match.spread .col { justify-content: space-evenly; }

/* Turn OFF the grammar colour-coding for word-order exercises (target level):
   a lesson/exercise marked .plain shows the function words in normal ink and
   drops the colour legend. */
.plain .scram .s, .plain .scram .v, .plain .scram .o, .plain .scram .c, .plain .scram .mod { color: inherit; -webkit-text-stroke: 0; }
.plain .legend { display: none; }

/* Print-hide ("challenge") toggles — WHOLE-PAGE versions of the above, set as
   <body> classes (by ?hide=… on the render pages, or the editor's checkboxes) so
   one lesson can print an easier or a harder version WITHOUT editing the .txt.
   Keyed on body so they win over the per-role colours; they apply on screen
   (so the editor preview shows what will print) and in print.
     hide-hints  — drop the picture/emoji clue beside each blank
     plain-print — hide the colour key and render the word-order tokens in plain ink */
body.hide-hints .hint { display: none; }
body.plain-print .legend, body.plain-print .legend-edit { display: none; }
body.plain-print .s, body.plain-print .v, body.plain-print .o, body.plain-print .c, body.plain-print .mod { color: inherit; -webkit-text-stroke: 0; }