/* ===========================================================================
 * 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 list with [N] markers (Combining / Logical-sequence items). */
.pei-sent-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pei-sent {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 0;
  border-radius: 6px;
  border-left: 3px solid transparent;
  transition: background 0.18s, padding 0.18s, border-color 0.18s;
}
.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;
}
.pei-sent-text { flex: 1; }
.pei-sent.pei-sent-pair-hl {
  padding: 6px 10px;
  background: var(--accent-coral-tint, rgba(201, 111, 74, 0.08));
  border-left-color: var(--accent-coral);
}
.pei-sent.pei-sent-pair-hl .pei-sent-marker {
  color: var(--accent-coral);
}

/* Prose passage with target highlight */
.pei-prose {
  white-space: pre-wrap;
}
.pei-prose mark.pei-target-hl {
  background: var(--accent-coral-tint, rgba(201, 111, 74, 0.18));
  text-decoration: underline;
  text-decoration-color: var(--accent-coral, #C96F4A);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  padding: 1px 2px;
  color: inherit;
}

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

.pei-eyebrow {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface, var(--bg-card));
  border: 1px solid var(--ink-10, var(--line));
  color: var(--ink, #18130E);
}

.pei-stem {
  font-family: var(--font-head, var(--font-display, Georgia, serif));
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  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; }

/* --- Choices — pixel-equiv to .mc-choice canon ------------------------- */
.pei-choices {
  display: grid;
  gap: 8px;
}
.pei-choice {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: start;
  gap: 12px;
  padding: 12px;
  text-align: left;
  border-radius: var(--radius, 12px);
  background: var(--surface, var(--bg-card));
  border: 2px solid var(--ink-10, var(--line));
  color: var(--ink, #18130E);
  font-family: var(--font-ui, system-ui);
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
  width: 100%;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.pei-choice:hover:not(:disabled) { border-color: var(--ink-30); }
.pei-choice:disabled { cursor: default; }
.pei-choice:active:not(:disabled) { transform: scale(0.99); }

.pei-choice.is-selected:not(.is-correct):not(.is-wrong) {
  background: var(--accent-coral-tint);
  border-color: var(--accent-coral);
}
.pei-choice.is-selected:not(.is-correct):not(.is-wrong) .pei-letter {
  background: var(--accent-coral);
  color: #fff;
}
.pei-choice.is-eliminated {
  opacity: 0.5;
  cursor: default;
}
.pei-choice.is-eliminated .pei-choice-text {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--ink-30, var(--ink-soft));
}
.pei-choice.is-correct {
  background: var(--accent-sage-tint, rgba(91, 122, 74, 0.12));
  border-color: var(--accent-sage, #5B7A4A);
  color: var(--accent-sage-ink, var(--ink));
}
.pei-choice.is-correct .pei-letter {
  background: var(--accent-sage, #5B7A4A);
  color: #fff;
}
.pei-choice.is-wrong {
  background: var(--accent-coral-tint, rgba(201, 111, 74, 0.12));
  border-color: var(--accent-coral, #C96F4A);
  color: var(--accent-coral-ink, var(--ink));
}
.pei-choice.is-wrong .pei-letter {
  background: var(--accent-coral, #C96F4A);
  color: #fff;
}
.pei-choice.is-dimmed { opacity: 0.75; }

/* --- Letter chip — match .mc-letter canon -------------------------------- */
.pei-letter {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: var(--ink-10, rgba(0, 0, 0, 0.06));
  color: var(--ink-70, var(--ink-soft));
  border-radius: 8px;
  font-weight: 700;
  font-size: 12px;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.pei-choice-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.pei-choice-text { display: block; }

/* --- Eliminate × button — match .pi-elim canon ------------------------- */
.pei-elim {
  align-self: center;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--ink-10, var(--line));
  background: transparent;
  color: var(--ink-30, var(--ink-soft));
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.pei-elim:hover {
  border-color: var(--ink-30, var(--ink));
  color: var(--ink, var(--ink-70));
}
.pei-elim.is-on {
  background: var(--accent-coral-tint);
  border-color: var(--accent-coral);
  color: var(--accent-coral);
}

/* --- Why panel --------------------------------------------------------- */
.pei-why {
  margin-top: 14px;
  padding: 14px;
  border-radius: var(--radius, 12px);
  border: 1px solid var(--ink-10, var(--line));
  background: var(--bg-muted, var(--surface));
  font-family: var(--font-body, var(--font-ui));
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
.pei-why.is-correct {
  background: var(--accent-sage-tint);
  border-color: var(--accent-sage);
}
.pei-why-label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: var(--ink-70, var(--ink-soft));
}
.pei-why.is-correct .pei-why-label { color: var(--accent-sage); }

/* --- Mobile breakpoint ------------------------------------------------- */
@media (max-width: 480px) {
  .pei-passage-strip { font-size: 15px; padding-left: 12px; }
  .pei-stem { font-size: 18px; }
  .pei-choice { font-size: 13px; padding: 10px 12px; }
}