/* ===========================================================================
 * subjects/editing/styles.css
 * ===========================================================================
 * Scoped class rules for the SHSAT Editing practice surface (Part A + B).
 *
 * Target visual: reading-style passage chrome + vocab-style choice rows.
 * - Stem: 20px in --font-head, matches reading's .pi-stem.
 * - Passage strip: inset prose (no card border) — visually subordinate to
 *   the question, like reading where the passage is its own layer.
 * - Choice rows: 28px letter chip, 2px border, sage/coral tints — verbatim
 *   .quiz-screen .mc-choice geometry.
 *
 * All rules reference CANONICAL global tokens (--surface, --ink-10/30/70,
 * --accent-sage*, --accent-coral*, --font-head/ui/mono, --radius) so theme
 * variants flow through without per-surface aliases.
 * ========================================================================= */


/* PassageEditItem .pei-* rules retired here in favor of the canonical
 * unscoped rules in components/items/passage-edit-item.css (Sub-phase D
 * part 4). Editing practice inherits the canonical visual; no editing-
 * specific tweaks remain. */


/* --- Editing Lab: spot-the-error word taps ------------------------------
 * The tap targets in the "something's wrong here" pane are single WORDS, and
 * the short function words (`of`, `to`, `on`, `the`) are precisely the ones
 * the grammar rules make the answer. Drawn, they measured ~20x34 — under the
 * 44px floor in both axes (study P1.13).
 *
 * TWO mechanisms, because the overlay alone was not enough (SI-17, study
 * 2026-09-13): every word's ::after claimed 44px of the SAME band, so the
 * exclusive target — what elementFromPoint actually returns — was 29-43px for
 * the words that lost the z-index arbitration.
 *   1. 14px of real horizontal padding on the button (inline, in lab.jsx):
 *      this PUSHES the neighbours apart, which is the only way to buy
 *      EXCLUSIVE width. It costs some of the prose rhythm — word gaps go from
 *      ~4px to ~32px — and 14 is the smallest value that clears 44 on every
 *      one of the 35 rules at the SMALLEST text-size rung (textScale 1, where
 *      the words are narrowest); 12 left four words at 41-43.
 *      The dotted mark stays on an inner span, not on the padded button, or
 *      the marks of neighbouring words run into one continuous rule and the
 *      "each word is its own target" cue is lost.
 *   2. the ::after overlay below, which tops up whatever is still short by
 *      reaching into the gap. It is centred on the word so it grows evenly to
 *      both sides. Adjacent boxes on the SAME line still overlap; the button's
 *      inline z-index arbitrates that by word length, so the short words — the
 *      ones whose drawn box is furthest under 44 — take the contested band.
 *
 * The VERTICAL axis is not extended here, deliberately: it comes from the
 * pane's 2.75 line-height (16px x 2.75 = 44 exactly, see lab.jsx), so each
 * word owns a full 44px band with no cross-LINE overlap to arbitrate. An
 * ::after that reached past the line box would only re-take a band the line
 * above or below already owns.
 * Measured (all 35 rules; shell 402 and 320; textScale 1 and 1.1; exclusive
 * hit box via elementFromPoint): every word >= 44 x 44, none under.
 */
.edit-word-tap { position: relative; }
.edit-word-tap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%; transform: translateX(-50%);
  width: calc(100% + 16px);
  min-width: 44px;
}


/* --- Editing Lab: the rule row's leading bead ---------------------------
 * SI-28. The rows used to carry a category icon chip — the same lilac pencil
 * on all 18 Grammar rows, distinguishing nothing and costing ~44pt of row
 * width. The category is the open tab already; what the row genuinely reports
 * is POSITION and DONE, so it carries a numbered bubble that FILLS when the
 * rule is reviewed (with the ✓ inside it, not as a second badge).
 *
 * The look is the Lab's unit bubble verbatim (.mathlab-unit-dot, subjects/
 * math/styles.css): the app has one way of saying "done" in an ordered list.
 * The transition is the same two tokens, so it collapses to an instant swap
 * under prefers-reduced-motion with no code branch (CLAUDE.md "Motion is a
 * rare accent"): a value genuinely changed under the student.
 */
.edit-rule-bead {
  transition: background var(--dur-quick, 0ms) var(--ease-settle, linear),
              color var(--dur-quick, 0ms) var(--ease-settle, linear);
}