/* ─── FEEDBACK / ANSWERED STATE ─── */
/* ============================================================
   VANGUARD BROADSHEET — feedback / answered screen
   Scope: #screen-feedback.bs and its descendants only.
   Specificity target: 0,2,0 minimum (".bs X"), 0,3,0 for anything
   that must beat an existing two-class rule (e.g. ".trap-card .solution-label").
   Tokens only — see --bs-* custom properties already defined on .bs.
   ============================================================ */

/* ── Screen root — paper ground, kill the dark-app backdrop ── */
#screen-feedback.bs {
  background: var(--bs-stock);
  color: var(--bs-ink);
  background-image: radial-gradient(rgba(12,15,11,.035) 1px, transparent 1px);
  background-size: 4px 4px;
}

/* ── Layout: keep the 2-col grid (question recap | verdict+coach) ──
   The coach margin lives INSIDE the right column (.feedback-body) as an
   indented, dashed-rule note directly under the explanation — not a third
   grid column. A true breakout sidebar would need row-count math CSS Grid
   can't do reliably with a variable number of optional cards (trap-card is
   conditional), so this stays a single flexible column with the note
   visually demoted via a left rule + rotation, matching how a student
   actually annotates a page margin next to whatever text happens to be there. */
.bs .feedback-layout {
  overflow-y: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  padding: 28px 32px;
  max-width: 1400px;
  margin: 0 auto;
  align-items: start;
  position: relative;
}
/* A newspaper column rule between the two panes, wide viewports only. */
.bs .feedback-layout::before {
  content: '';
  position: absolute;
  top: 28px;
  bottom: 28px;
  left: 50%;
  width: 1px;
  border-left: 1px dashed var(--bs-rule);
}
@media (max-width: 920px) {
  .bs .feedback-layout { grid-template-columns: 1fr; padding: 16px; gap: 20px; }
  .bs .feedback-layout::before { display: none; }
}

/* ── Left pane: the recap of the student's own ballot ──
   Not in the given override list but it's the direct paper-card container
   for .fbq-* and needs the same sheet/ink treatment or the recap sits on a
   jarring dark background inside an otherwise-paper screen. */
.bs .feedback-question-pane {
  background: var(--bs-sheet);
  border: 2px solid var(--bs-ink);
  border-radius: 0;
  padding: 22px 24px;
  position: relative;
}
.bs .feedback-question-pane::before {
  content: 'Your ballot';
  display: block;
  font-family: var(--bs-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bs-ink-3);
  margin-bottom: 14px;
}

.bs .fbq-stem {
  font-family: var(--bs-ed);
  font-variation-settings: normal;
  font-weight: 900;
  font-size: 24px;
  line-height: 1.22;
  letter-spacing: -.02em;
  color: var(--bs-ink);
  opacity: 1;
  margin-bottom: 18px;
}
.bs .fbq-figure-wrap { margin-bottom: 18px; }
.bs .fbq-figure-wrap img {
  border: 2px solid var(--bs-ink);
  border-radius: 0;
  background: #fff;
  padding: 10px;
}
.bs .fbq-choices { display: flex; flex-direction: column; gap: 8px; }
.bs .fbq-choice {
  border: 1.5px solid var(--bs-rule);
  border-radius: 0;
  background: transparent;
  color: var(--bs-ink-2);
  font-family: var(--bs-ui);
  font-variation-settings: 'wdth' 100;
  font-size: 15px;
  line-height: 1.5;
  /* Receding — only the correct pick and the wrong pick get full presence. The
     recede is a chosen tone, not alpha: opacity composited to 2.80:1 on the
     pane, and this is answer text a student re-reads to understand their own
     submission. --bs-ink-3 is the system's receded ink and clears AA.
     The base .fbq-choice rule sets its own opacity: 0.7, so it has to be
     zeroed out here too — dropping it from this rule alone left it applying. */
  color: var(--bs-ink-3);
  opacity: 1;
}
/* Full presence is now carried by the ink, since the base no longer recedes
   with alpha — otherwise removing that opacity would flatten the distinction
   these two states exist to make. */
.bs .fbq-choice.correct {
  border-color: var(--bs-ok);
  color: var(--bs-ink);
}
.bs .fbq-choice.picked-wrong {
  border-color: var(--bs-miss);
  color: var(--bs-ink);
}
.bs .fbq-choice-letter {
  font-family: var(--bs-mono);
  font-weight: 700;
  color: var(--bs-ink-3);
}
.bs .fbq-choice.correct .fbq-choice-letter { color: var(--bs-ok); }
.bs .fbq-choice.picked-wrong .fbq-choice-letter { color: var(--bs-miss); }
.bs .fbq-choice-tag {
  font-family: var(--bs-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .12em;
  border-radius: 0;
  border: 1px solid var(--bs-rule);
  background: transparent;
  color: var(--bs-ink-3);
}
.bs .fbq-choice.correct .fbq-choice-tag { color: var(--bs-ok); border-color: var(--bs-ok); background: transparent; }
.bs .fbq-choice.picked-wrong .fbq-choice-tag { color: var(--bs-miss); border-color: var(--bs-miss); background: transparent; }

/* ── Right pane: verdict, explanation, coach margin ── */
.bs .feedback-body {
  display: block;
  position: relative;
  padding: 4px 4px 8px;
}
.bs .feedback-body > * { margin: 0 auto 22px; }
.bs .feedback-body > *:last-child { margin-bottom: 0; }

/* ── 1. THE STAMP — struck ink, not a filled banner ── */
@keyframes bsStampIn {
  from { opacity: 0; transform: rotate(-8deg) scale(1.3); }
  to   { opacity: .88; transform: rotate(-2.4deg) scale(1); }
}
.bs .result-banner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: auto;
  max-width: 100%;
  background: none;
  border: 3px solid var(--bs-ink);
  border-radius: 0;
  padding: 9px 20px;
  transform: rotate(-2.4deg);
  transform-origin: left center;
  opacity: .88;
  /* Left-aligned stamp, not centred like the paper cards below it. No !important
     needed: this rule and `.bs .feedback-body > *` are both 0,2,0 and this one is
     later in the sheet, so it already wins. */
  margin: 0 0 26px;
  overflow: visible;
}
.bs .result-banner.anim-slide-up { animation: bsStampIn .3s cubic-bezier(.2,1.1,.4,1) both; }
.bs .result-banner.correct   { border-color: var(--bs-ok);   color: var(--bs-ok); }
.bs .result-banner.incorrect { border-color: var(--bs-miss); color: var(--bs-miss); }
.bs .result-banner::before { content: none; } /* kill the old full-width accent bar */
.bs .result-icon {
  font-size: 20px;
  line-height: 1;
  color: inherit;
  flex-shrink: 0;
}
.bs .result-icon.anim-bounce-in { animation: none; }
.bs .result-label {
  font-family: var(--bs-ed);
  font-variation-settings: normal;
  font-weight: 900;
  font-size: 24px;
  letter-spacing: .01em;
  text-transform: uppercase;
  line-height: 1;
}
.bs .result-label.correct, .bs .result-label.incorrect { color: inherit; }
.bs .result-sub {
  font-family: var(--bs-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: inherit;
  opacity: .82;
  margin-top: 3px;
}
.bs .retry-rep { color: var(--bs-blue); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .bs .result-banner.anim-slide-up { animation: none; opacity: .88; transform: rotate(-2.4deg); }
}

/* ── 3. Explanation blocks — printed, on sheet stock ── */
.bs .solution-card {
  width: 100%;
  max-width: 640px;
  background: var(--bs-sheet);
  border: 2px solid var(--bs-ink);
  border-radius: 0;
  padding: 22px 26px;
}
.bs .solution-label {
  font-family: var(--bs-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bs-ink-3);
  margin-bottom: 12px;
}
.bs .solution-text {
  font-family: var(--bs-ui);
  font-variation-settings: 'wdth' 100;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: var(--bs-ink-2);
}
.bs .trap-card .solution-label { color: var(--bs-ink); }

/* ── 7. XP — handwritten, inside the explanation ── */
.bs .bs-xp {
  display: inline-flex;
  align-items: baseline;
  margin-top: 14px;
  font-family: var(--bs-hand);
  font-size: 22px;
  color: var(--bs-blue);
  transform: rotate(-1.2deg);
  transform-origin: left center;
}

/* ── Distractor / trap analysis — a printed list, not chip soup ──
   Per the brief: trap rows carry the coach's red pen here specifically
   (this IS the coach's annotation on the wrong answers), while the correct
   row carries the neutral --bs-ok semantic. */
.bs .distractor-row {
  background: transparent;
  border-radius: 0;
  border: none;
  border-top: 1px solid var(--bs-rule);
  border-left: 2px solid var(--bs-rule);
  padding: 16px 4px 16px 16px;
  margin-bottom: 0;
}
.bs .distractor-row:first-child { border-top: none; }
.bs .distractor-row.is-correct { border-left-color: var(--bs-ok); background: transparent; }
.bs .distractor-row.is-trap    { border-left-color: var(--bs-pen); background: transparent; }
.bs .distractor-row.is-picked  { border-left-width: 3px; box-shadow: none; border-color: var(--bs-miss); }
.bs .distractor-head { gap: 10px; }
.bs .distractor-letter {
  border-radius: 0;
  background: var(--bs-sheet);
  border: 1.5px solid var(--bs-ink-3);
  color: var(--bs-ink-2);
  font-family: var(--bs-mono);
}
.bs .distractor-letter.correct { background: var(--bs-sheet); border-color: var(--bs-ok); color: var(--bs-ok); }
.bs .distractor-letter.trap    { background: var(--bs-sheet); border-color: var(--bs-pen); color: var(--bs-pen); }
.bs .distractor-tag {
  font-family: var(--bs-mono);
  border-radius: 0;
  background: transparent;
  border: 1px solid var(--bs-rule);
  color: var(--bs-ink-3);
}
.bs .distractor-tag.correct { color: var(--bs-ok); background: transparent; border-color: var(--bs-ok); }
.bs .distractor-tag.trap    { color: var(--bs-pen); background: transparent; border-color: var(--bs-pen); }
.bs .distractor-tag.picked  { color: var(--bs-miss); background: transparent; border-color: var(--bs-miss); }
.bs .distractor-choicetext {
  font-family: var(--bs-ui);
  font-style: italic;
  color: var(--bs-ink-2);
}
.bs .distractor-note {
  font-family: var(--bs-ui);
  color: var(--bs-ink-2);
  line-height: 1.6;
}

/* ── 2. THE COACH — red pen in the margin, not a pill row ──
   .coach-mark (the ◈ avatar chip) is dropped: a filled circular badge reads
   as UI chrome, which contradicts the whole point of this element. The
   actual commentary now lives in .coach-quip (new — see notes below);
   .coach-name is repurposed as the "— your coach" signature via ::before
   so no JS text change is needed for it. */
.bs .coach-strip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  max-width: 480px;
  background: none;
  border: none;
  border-left: 1px dashed var(--bs-rule);
  border-radius: 0;
  padding: 4px 0 4px 20px;
  /* Not margin-top alone: .bs .feedback-body > * sets `margin: 0 auto 22px`,
     and at equal specificity the auto sides survived — so a margin NOTE sat
     centred in the column with ~98px of gutter each side. It hangs left, the
     way a student actually annotates a page. */
  margin: 6px 0 22px;
}
.bs .coach-mark { display: none; }
.bs .coach-quip {
  font-family: var(--bs-hand);
  font-size: 25px;
  line-height: 1.18;
  color: var(--bs-pen);
  transform: rotate(-1.6deg);
  transform-origin: left top;
  display: block;
}
.bs .coach-name {
  font-family: var(--bs-hand);
  font-size: 16px;
  color: var(--bs-pen);
  opacity: .72;
  transform: rotate(-1deg);
  letter-spacing: normal;
  text-transform: none;
}
.bs .coach-name::before { content: '— '; }
.bs .coach-toggles {
  margin-left: 0;
  display: flex;
  gap: 16px;
  margin-top: 4px;
}
.bs .coach-toggle {
  background: none;
  border: none;
  border-radius: 0;
  padding: 2px 0;
  font-family: var(--bs-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bs-ink-3);
  transition: color .12s;
}
.bs .coach-toggle:hover { color: var(--bs-ink); text-decoration: underline; }
.bs .coach-toggle:focus-visible {
  outline: 2px solid var(--bs-blue);
  outline-offset: 2px;
  border-radius: 0;
}
.bs .coach-toggle.on { color: var(--bs-blue); }

@media (max-width: 700px) {
  .bs .coach-strip { max-width: 100%; }
  .bs .coach-quip, .bs .coach-name { transform: none; } /* rotated full-width text can visually clip on narrow screens */
}

/* ── next-row — align width with the rest of the printed column ── */
.bs .next-row { max-width: 640px; }

/* ── 6. Rate-this-question panel ── */
.bs .fb-panel {
  background: var(--bs-sheet);
  border: 1.5px solid var(--bs-ink);
  border-radius: 0;
  max-width: 640px;
  padding: 14px 18px;
}
.bs .fb-panel-title {
  font-family: var(--bs-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--bs-ink-3);
}
.bs .fb-lbl {
  font-family: var(--bs-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--bs-ink-3);
  flex: 0 0 auto;
  min-width: 0;      /* was a fixed 72px that overflowed on "EXPLANATION" — stays content-sized */
  white-space: nowrap;
}
.bs .fb-chip {
  font-family: var(--bs-ui);
  font-variation-settings: 'wdth' 82;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 0;
  border: 1px solid var(--bs-rule);
  background: transparent;
  color: var(--bs-ink-3);
}
.bs .fb-chip:hover { color: var(--bs-ink); border-color: var(--bs-ink-3); }
.bs .fb-chip.active { background: transparent; color: var(--bs-blue); border-color: var(--bs-blue); }
.bs .fb-chip:focus-visible { outline: 2px solid var(--bs-blue); outline-offset: 1px; }

/* .roast-note — appears to be dead markup (no JS creates it any more, the
   5-band slider it belonged to was retired for the single voice toggle),
   left alone per house rules but given a harmless paper-consistent style
   in case it's ever revived. */
.bs .roast-note {
  font-family: var(--bs-mono);
  font-size: 10.5px;
  color: var(--bs-ink-3);
}

/* ── Mobile ── */
@media (max-width: 560px) {
  .bs .result-label { font-size: 20px; }
  .bs .fbq-stem { font-size: 20px; }
  .bs .solution-card, .bs .feedback-question-pane { padding: 18px 18px; }
}

/* The margin needs a track to sit in. Scoped to the practice screen only —
   .practice-body is shared with the dashboard and history, which must stay
   flex. Below 920px the margin's own rules turn it into a stacked block with
   a dashed rule on TOP, so the single-column fallback is already designed. */
@media (min-width: 921px) {
  #screen-practice.bs .practice-body {
    display: grid;
    grid-template-columns: minmax(0, 812px) minmax(168px, 230px);
    column-gap: 34px;
    justify-content: center;
    align-items: start;
  }
  #screen-practice.bs .bs-doc { grid-column: 1; min-width: 0; }
  #screen-practice.bs .margin { grid-column: 2; position: sticky; top: 18px; }
}
#screen-practice.bs .bs-doc { display: flex; flex-direction: column; align-items: center; }