/* ===========================================================================
 * passage-edit-item.css — canonical visual for PassageEditItem.
 * ===========================================================================
 * Single source of truth for .pei-* classes — passage strip (eyebrow,
 * sentence list with [N] markers, prose+target highlight), per-Q block
 * (eyebrow chip, stem, choices, letter chip, eliminate button, why panel),
 * state classes (.is-selected/.is-correct/.is-wrong/.is-eliminated/
 * .is-dimmed), plus mobile breakpoint.
 *
 * Replaces the per-surface scoped duplicates that previously lived in
 * subjects/editing/styles.css (.editing-screen .pei-*). The diagnostic-ui.css
 * .diag-passage-edit-region .pei-* block stays as a surface-specific
 * override (diagnostic uses different chrome).
 *
 * Uses GLOBAL tokens directly. Loaded BEFORE surface stylesheets in
 * index.html so per-surface overrides win on specificity.
 * ========================================================================= */

/* --- Passage strip ----------------------------------------------------- */
.pei-passage-strip {
  padding: 0 0 0 14px;
  margin-bottom: 22px;
  border-left: 2px solid var(--ink-10);
  font-family: var(--font-reading, var(--font-body, var(--font-ui)));
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink, #18130E);
}
.pei-passage-eyebrow {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft, var(--ink-70));
  margin-bottom: 10px;
}

/* Sentence markers. Every sentence-array passage renders as the paragraph FLOW
   below (the real exam layout); the old [N] block list is gone. */
.pei-sent-marker {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-70, var(--ink-soft));
  font-variant-numeric: tabular-nums;
  min-width: 22px;
  flex-shrink: 0;
}

/* Paragraph-structured sentence flow (paragraphBreaks) — sentences inline with (N) markers,
 * exam layout. Pair highlight becomes an inline background span. */
.pei-sent-paras { margin: 0; }
.pei-sent-para { margin: 0 0 12px; line-height: 1.6; text-wrap: pretty; }
.pei-sent-para:last-child { margin-bottom: 0; }
.pei-sent-inline .pei-sent-marker { min-width: 0; }
/* A FILL MEANS "I MARKED THIS" — AND ONLY THAT. The question's target used to
   be a tinted background too, and on the cream paper the coral tint and the
   student's yellow read as one family: a student looking at a passage could not
   tell what the app was pointing at from what they had marked themselves. So
   every anchor treatment in this file is now a LINE in the coral accent — an
   underline where the target is a run of text, a margin bar where it is a
   whole block — and background fill belongs to the highlighter alone. */
.pei-sent-inline.pei-sent-pair-hl {
  text-decoration: underline;
  text-decoration-color: var(--accent-coral, #C96F4A);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.pei-sent-inline.pei-sent-pair-hl .pei-sent-marker { color: var(--accent-coral); }

/* Prose passage with target highlight */
.pei-prose {
  white-space: pre-wrap;
}
/* NOT scoped to .pei-prose (study L2-10). The reading pane reuses this class
   for the cited span a line-reference question scrolls to (subjects/reading/
   ui.jsx `marks`), and its container is .pb-*, not .pei-prose — so the one
   <mark> in the product a student is MEANT to look at fell through to the UA
   default, rgb(255,255,0), on a cream-paper app. The class name is unique
   enough to carry the rule on its own. */
mark.pei-target-hl {
  /* `transparent`, not absent: a bare <mark> falls back to the UA's yellow. */
  background: transparent;
  text-decoration: underline;
  text-decoration-color: var(--accent-coral, #C96F4A);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  padding: 1px 2px;
  color: inherit;
  /* A cited span in a READING passage wraps across lines at 1.65 leading;
     without `clone` the browser paints one box over the whole run and the tint
     runs past the end of the short last line. Same reason .pb-anchor-hl and
     .pp-student-hl carry it. */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ACT-English multi-underline prose: every tested span is underlined with a
   superscript number; the active question's span is tinted so it's findable
   without hunting. Same coral accent as the Part B target highlight. */
.pei-uspan {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.pei-uspan-num {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 9px;
  font-weight: 700;
  color: var(--ink-70, var(--ink-soft));
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  display: inline-block;
  vertical-align: super;
  line-height: 1;
  margin-left: 1px;
}
.pei-uspan-active {
  text-decoration-color: var(--accent-coral, #C96F4A);
  text-decoration-thickness: 2px;
}
.pei-uspan-active .pei-uspan-num { color: var(--accent-coral, #C96F4A); }

/* ACT-English INSERTION POINT: `{{N::}}` (empty body) prints as a small boxed
   question number sitting in the prose — the print convention for "at this
   point, the writer is considering adding…". Nothing is underlined, so the box
   is the whole affordance; the number stays readable (not aria-hidden). */
.pei-insert-num {
  display: inline-block;
  border: 1px solid var(--ink-30, rgba(0, 0, 0, 0.3));
  border-radius: 3px;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 0.75em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  padding: 0 4px;
  margin: 0 2px;
  vertical-align: 1px;
  color: var(--ink-70, var(--ink-soft));
  text-decoration: none;
}
.pei-insert-num-active {
  background: var(--accent-coral-tint, rgba(201, 111, 74, 0.18));
  border-color: var(--accent-coral, #C96F4A);
  color: var(--accent-coral, #C96F4A);
}

/* --- Anchor highlights in PassageBody ---------------------------------- */
/* Same coral family as .pei-sent-pair-hl: the anchored paragraph / line rows
   the active question points at. Passage text is READ-ONLY — a tint only, no
   border, no shadow, nothing that reads as tappable. */
/* ONE CONTINUOUS RUN ACROSS LINES (study A-43). In the flowing presentation
   this lands on an INLINE span, and without `box-decoration-break: clone` the
   browser paints one box across the whole wrapped run: the fill ran past the
   end of the short last line and left a hard edge mid-sentence, so a
   three-line sentence read as three disconnected ragged blocks. `clone` gives
   every line its own box with its own radius and padding, which is what the
   student's own yellow mark already does two rules below. The vertical padding
   is what closes the gap between those boxes at the passage's 1.65 leading. */
/* …which is now moot for the fill (there is none — see "A FILL MEANS" above)
   but is why the two shapes below differ. A BLOCK target (a paragraph, the
   gutter rows of a line range) takes a bar in the margin: consecutive rows
   have no gap between them, so the bar runs unbroken down the cited lines.
   An INLINE target (a cited line inside a flowing paragraph) cannot carry a
   margin bar — it starts and ends mid-row — so it takes the same underline
   the sentence and quote targets use. */
div.pb-anchor-hl {
  border-left: 3px solid var(--accent-coral, #C96F4A);
  padding-left: 8px;
  margin-left: -11px;
}
span.pb-anchor-hl {
  text-decoration: underline;
  text-decoration-color: var(--accent-coral, #C96F4A);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
/* --- Student highlighter (PASSAGE_UI_PLAN §6) --------------------------- */
/* The student's OWN marks — yellow, never the coral anchor family, so "what I
   marked" can never be read as "what the question points at". The two coexist
   on one element (anchor tints the block, the mark paints the run). */
.pp-student-hl {
  background: var(--hl-student, rgba(240, 199, 58, 0.42));
  border-radius: 2px;
  color: inherit;
  /* Same vertical padding as the anchor tint above, for the same reason: at
     1.65 leading a zero-padding inline fill leaves a white stripe between the
     lines of a wrapped mark (study A-43). */
  padding: 0.16em 1px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
mark.pp-student-hl { cursor: pointer; }
/* Armed mode only: the tap targets say so. A bare tap must never make a mark,
   so nothing here applies unless the pane carries .pp-hl-arm. */
.pp-hl-arm [data-sent] {
  cursor: pointer;
  text-decoration: underline dashed;
  text-decoration-color: var(--ink-30, rgba(0, 0, 0, 0.2));
  text-underline-offset: 4px;
}
/* The armed dash must not replace the question's own line: same specificity,
   later rule, so without this the target sentence lost its underline the
   moment the pen was picked up. */
.pp-hl-arm [data-sent].pei-sent-pair-hl {
  text-decoration: underline solid;
  text-decoration-color: var(--accent-coral, #C96F4A);
  text-decoration-thickness: 2px;
}
/* No dashed rule under each PARAGRAPH any more: it advertised the paragraph as
   the tap target, and a tap now marks the sentence on every passage. Prose
   sentences have no element to decorate, so there the cursor carries it. */
.pp-hl-arm [data-para] { cursor: pointer; }
/* The student's RANGE marks. Painted as an overlay of measured line rects
   (PassagePane.jsx "Range marks") rather than wrapped text, so the layer sits
   over the prose and must neither take a tap nor dim the ink: `multiply` keeps
   black text black through the yellow. */
.pp-hl-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.pp-hl-rect {
  position: absolute;
  background: var(--hl-student, rgba(240, 199, 58, 0.42));
  border-radius: 2px;
  mix-blend-mode: multiply;
}
/* Floating selection affordance (desktop) — raised, because it IS tappable. */
.pp-hl-float {
  position: absolute;
  z-index: 5;
  border-radius: 999px;
  padding: 5px 12px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

/* An anchored figure keeps its own card; the outline just says "this one". */
.pb-fig-anchor {
  outline: 1px solid var(--accent-coral, #C96F4A);
  outline-offset: 3px;
  border-radius: var(--radius-inset, 4px);
}

/* --- Per-Q block ------------------------------------------------------- */
.pei-q-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* SI-16 — ONE TREATMENT FOR A LABEL THAT DOES NOTHING. This chip used to be a
 * raised white pill (card ground + hairline border), which is the app's signal
 * for TAPPABLE, while Reading printed the same information as the inset tan
 * caps label below — two treatments for one thing, one of them lying. Matched
 * to `.pi-eyebrow` (passage-item.css) exactly: read-only, so inset. */
.pei-eyebrow {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent-coral-tint);
  border: none;
  color: var(--accent-coral);
}

/* No typography of its own — same rule as .pi-stem (passage-item.css): a
 * question nested in a Part B testlet renders its stem blocks through McItem's
 * block renderer, so the text blocks are `.mc-stem` and inherit body type. */
.pei-stem {
  color: var(--ink, #18130E);
  text-wrap: pretty;
}
.pei-stem-p {
  margin: 0 0 10px;
  text-wrap: pretty;
}
.pei-stem-p:last-child { margin-bottom: 0; }
/* stemBlocks stream: space between blocks (text or figure) */
.pei-stem--blocks > * + * { margin-top: 10px; }

/* --- The answer rows ---------------------------------------------------- *
 * THE ROW RECIPE IS SHARED (study S-04). PassageEditItem emits the `.mcq-*`
 * choice primitives alongside its own `.pei-*` names, so the list, the row, the
 * button, the letter chip, the strike and the eliminate × come from ONE block
 * in mc-item.css. This was the FOURTH copy of that recipe and the furthest
 * adrift: it pinned `font-size: 14px`, and 13px below 480px — so on the phone a
 * SHSAT student met Editing Part A at 16px (McItem serves those as plain
 * singles) and Part B at 13px, inside one Editing section.
 *
 * What stays is the only thing about an editing row that IS different: the
 * two-across SHORT layout, which is a layout decision PassageEditItem makes
 * per question — and one cursor: this renderer DISABLES a struck choice (the ×
 * beside it is what puts it back), so the shared row's "struck is still
 * tappable" pointer would be a lie here. */
.pei-choice:disabled { cursor: default; }


/* --- Short answers: two across (study P2.9) ---------------------------- *
 * Editing Part A's options are "dance. The" / "source. Helping" — four
 * two-word cards, each holding a full row, filling most of a phone screen for
 * a question whose text sits above them. PassageEditItem decides WHEN
 * (`peiShortChoices`): plain string options, no math, ≤ 16 characters each, at
 * least four of them.
 *
 * Two across at EVERY surface, unlike `.mc-choices.is-short` (tablet/desktop
 * only): what the study measured is the phone screen, and these options are
 * short enough to sit in half of a 560px column. Metrics mirror
 * `.mc-choices.is-compact` — 22px letter chip, 10px padding, 10px gaps,
 * min-height 44 so the tighter padding keeps the tap target. Equal row heights
 * come free: .pei-choices is a grid and .pei-choice-row is itself a single-cell
 * grid, so a wrapped option's neighbour stretches with it. */
.pei-choices.is-short {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.pei-choices.is-short .pei-choice {
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  min-height: 44px;
}
.pei-choices.is-short .pei-letter {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  font-size: 11px;
}
/* Tracks the tighter padding above (10px padding + 2px border). */
.pei-choices.is-short .pei-choice-row { --mcq-elim-inset: 12px; }

/* --- Why panel --------------------------------------------------------- */
/* It is McItem's `.mc-why-block` (study A17) — one design and one verdict head
   for every item kind. The `.pei-why*` rules that used to live here are gone
   with it. */

/* --- Mobile breakpoint ------------------------------------------------- */
/* The choice rule that used to live here (13px type, tighter padding on the
   phone) is gone with the shared row: an answer choice is the most-read text
   in the product and the phone is where it is read (study S-04 / L1-08). */
@media (max-width: 480px) {
  .pei-passage-strip { font-size: 15px; padding-left: 12px; }
}