/* ===========================================================================
 * 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. a real `min-width` floor on the button (below), plus 4px of inline
 *      padding (lab.jsx): layout width PUSHES the neighbours apart, which is
 *      the only way to buy EXCLUSIVE width. It used to be 14px of padding on
 *      every word, which bought the floor by making word gaps ~32px — the
 *      sentence stopped reading as a sentence, which is the one thing this
 *      pane needs (A-31/B-41). A floor on the SHORT words only costs nothing
 *      on the long ones and leaves the prose rhythm intact.
 *      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.875 line-height (see lab.jsx). The button draws at pitch + 2 (its
 * inner mark span is an inline-block with a 2px dotted rule) and SETS the line
 * box with it, so box and pitch agree at 48 and each word owns a full 48px
 * 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.
 * 2.875, not the 2.75 this shipped with: that band was 46 — over the 44pt
 * floor, but it reads as 41 through the dev frame's 0.893 scale and leaves no
 * headroom for a mark or a border moving by a pixel (A-31/B-41 follow-up).
 * Measured after (shell 402, textScale 1): 48 tall per word, 40-64 wide.
 */
/* A REAL floor plus a small overlay, since A-31/B-41 moved the horizontal
 * slack out of the button's padding (14px a side → 4px) so the sentence reads
 * as a sentence again. The floor is layout width, which PUSHES neighbours
 * apart instead of overlapping them; the overlay then tops up the last few
 * pixels. Splitting it this way is what keeps every word at the 44px floor:
 * with the slack in the overlay alone, adjacent boxes overlap and the higher-z
 * sibling takes the contested band, so a 3-letter word next to a 2-letter one
 * measured 38 exclusive (the z-order deliberately favours the shortest word,
 * which starves its next-shortest neighbour). Measured after: 43–82 exclusive
 * across the sentence, at the phone's 1.0 default text scale. */
.edit-word-tap { position: relative; min-width: 40px; }
.edit-word-tap::after {
  content: '';
  position: absolute;
  /* Vertically: the LINE PITCH (2.875em, set on the pane in lab.jsx). Exactly
   * the pitch, so the band a word owns touches its neighbours' above and below
   * and overlaps neither — there is nothing to arbitrate across lines. In `em`
   * so it follows the Aa control. */
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  height: 2.875em;
  width: calc(100% + 10px);
  min-width: 48px;
}


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

/* --- Rules Lab: a choice list that was never live -----------------------
 * S-25. The worked-example panes (steps 3+ of a strategy) print a question
 * that arrives already resolved — key green, trap struck — and their choices
 * do nothing when tapped. They rendered in the canonical `.mc-choice` row,
 * which is the SAME markup step 1 of the same rule uses for a list that IS
 * live: cream fill, 2px border, 16px corners. CLAUDE.md: "a dead card that
 * still looks raised is the exact confusion this rule exists to kill."
 *
 * So the whole list stands down to the read-only treatment. The rows carrying
 * a VERDICT keep their semantic fill and border — that is feedback, and it is
 * the content of the pane — but they take the inset corner with their
 * neighbours so the list still reads as one block. Everything else takes the
 * inset fill and loses its border outright. `.mc-choice:disabled` already
 * dropped the shadow; it is restated here so the three raised channels are
 * revoked in one place rather than two.
 *
 * Scoped to `.lab-choices--inert`, which ONLY the worked-example panes set:
 * a list the student actually answered keeps the raised look after the
 * reveal, exactly as the practice runner's does.
 */
/* NAMED `mcq-*`, like everything else that overrides the answer row (NEW-07):
 * the recipe these rules stand down from lives under `.mcq-choice` since S-04,
 * so an override written against `.mc-choice` layers on a base that no longer
 * exists — it silently did nothing, and the key stopped being green. */
.lab-choices--inert .mcq-choice,
.lab-choices--inert .mcq-choice.is-correct,
.lab-choices--inert .mcq-choice.is-wrong {
  border-radius: var(--radius-inset, 4px);
  box-shadow: none;
  cursor: default;
}
.lab-choices--inert .mcq-choice:not(.is-correct):not(.is-wrong) {
  background: var(--bg-inset, var(--ink-5));
  border-color: transparent;
}

/* --- A RING IS FOR THE KEYBOARD, NEVER FOR A THUMB (A-21) ----------------
 * The same refusal components/items/focus-rings.css writes out for the four
 * item renderers' choice rows, for the Lab's own tappable words and rule
 * beads: WebKit paints a ring for a :focus that :focus-visible would refuse,
 * and a sheet closing over one of these leaves it wearing a mark that reads
 * as a selection. The keyboard ring itself is untouched. */
.edit-word-tap:focus:not(:focus-visible),
.edit-rule-bead:focus:not(:focus-visible),
.edit-word-tap button:focus:not(:focus-visible) {
  outline: none;
}