/*
 * CertaRounds — Mock exam / Board Round results (src/screens/mockresults.js).
 * Semantic tokens only (docs/COMPONENTS.md §2). Scoped to this screen's own mr-* classes;
 * widgets (RingGauge, BreakdownBar, MasteryBars) and components are composed, never restyled.
 *
 *   phone     header · score hero · time · by specialty · flagged · question by question · next
 *   ≥1024     main: header · hero · by specialty · question by question   rail: time · flagged · next
 */

.mr-card-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-17);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-snug);
  line-height: var(--lh-snug);
  color: var(--text-strong);
}
.mr-card-title .icon { color: var(--warning); flex-shrink: 0; }

/* ---------- Header ---------- */
.mr-header { margin-bottom: 0; }
.mr-over {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-accent);
}
.mr-title { margin-top: var(--sp-1); }
@media (max-width: 767px) {
  .mr-title { font-size: var(--fs-24); }
}

/* ---------- Score hero ---------- */
.mr-hero { display: flex; flex-direction: column; gap: var(--sp-5); }
.mr-hero__top { display: flex; align-items: center; gap: var(--sp-5); }
.mr-hero__ring { flex: 0 0 auto; }
.mr-hero__text { flex: 1 1 auto; min-width: 0; }
.mr-hero__title {
  font-size: var(--fs-20);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-snug);
  color: var(--text-2);
  line-height: 1.25;
}
.mr-hero__num {
  font-size: var(--fs-36);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.mr-hero__lead { margin-top: var(--sp-1); font-size: var(--fs-15); color: var(--text-2); }
.mr-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--sp-2);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  background: var(--surface-2);
  color: var(--text-2);
}
.mr-delta--up { background: var(--success-bg); color: var(--success-strong); }
.mr-delta--down { background: var(--surface-sunken); color: var(--text-2); }
.mr-hero__weak {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--surface-2);
  font-size: var(--fs-13);
  line-height: 1.5;
  color: var(--text-2);
}
.mr-hero__weak .icon { flex-shrink: 0; margin-top: 2px; color: var(--accent); }
.mr-hero__weak strong { color: var(--text-strong); font-weight: var(--fw-semibold); }
.mr-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
@media (max-width: 767px) {
  .mr-hero__top { gap: var(--sp-4); }
  .mr-hero__num { font-size: var(--fs-30); }
  .mr-hero__title { font-size: var(--fs-17); }
  .mr-hero__actions .btn { flex: 1 1 100%; }
}

/* ---------- Time ---------- */
.mr-time { display: flex; flex-direction: column; gap: var(--sp-4); }
.mr-time__row { display: flex; align-items: center; gap: var(--sp-4); }
.mr-time__gem { display: inline-flex; flex-shrink: 0; }
.mr-time__text { min-width: 0; }
.mr-time__used {
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.mr-time__of { font-size: var(--fs-15); font-weight: var(--fw-medium); color: var(--text-2); letter-spacing: 0; }
.mr-time__sub { margin-top: 2px; font-size: var(--fs-13); color: var(--text-2); }
.mr-time__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  margin: 0;
}
.mr-time__facts > div { padding: var(--sp-3); border-radius: var(--r-md); background: var(--surface-2); min-width: 0; }
.mr-time__facts dt { font-size: var(--fs-12); color: var(--text-2); }
.mr-time__facts dd {
  margin: 2px 0 0;
  font-size: var(--fs-15);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}

/* ---------- By specialty (MasteryBars + raw counts) ---------- */
.mr-spec__note { margin-top: var(--sp-3); font-size: var(--fs-12); color: var(--text-3); }

/* ---------- Flagged ---------- */
.mr-flagged { display: flex; flex-direction: column; gap: var(--sp-3); }
.mr-flagged__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.mr-flagged__count {
  min-width: 28px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--warning-bg);
  color: var(--warning);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.mr-flagged__none { font-size: var(--fs-13); color: var(--text-2); }
.mr-flagged > .btn { align-self: flex-start; }

/* ---------- Question by question ---------- */
.mr-review { display: flex; flex-direction: column; gap: var(--sp-4); }
.mr-review__sub { margin-top: 2px; font-size: var(--fs-13); color: var(--text-2); }
.mr-review__list { display: flex; flex-direction: column; }
.mr-review__list > li + li { border-top: 1px solid var(--divider); }
.mr-review__none { padding: var(--sp-4); font-size: var(--fs-13); color: var(--text-2); text-align: center; }

.mr-q {
  display: grid;
  grid-template-columns: 28px 24px minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: var(--sp-3);
  width: 100%;
  min-height: 56px;
  padding: var(--sp-3) var(--sp-2);
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out);
}
.mr-q:hover { background: var(--surface-hover); }
.mr-q:active { background: var(--surface-pressed); }
.mr-q:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.mr-q__n { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--text-3); font-variant-numeric: tabular-nums; text-align: right; }
.mr-q__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mr-q__topic {
  font-size: var(--fs-15);
  font-weight: var(--fw-medium);
  color: var(--text-strong);
  line-height: 1.35;
  overflow-wrap: break-word;          /* D6 / R3: topic names are never ellipsized */
}
/* D16 / R3: one line of whole tokens; a token that doesn't fit wraps onto a hidden second row (dropped whole) */
.mr-q__meta {
  display: flex; flex-wrap: wrap; align-items: center;
  height: 20px; overflow: hidden;
  font-size: var(--fs-13); line-height: 20px;
  color: var(--text-2); font-variant-numeric: tabular-nums;
}
.mr-q__tok { white-space: nowrap; }
.mr-q__tok + .mr-q__tok::before { content: "·"; margin: 0 6px; color: var(--text-3); }
.mr-q__gem { display: inline-flex; margin-right: 6px; }
.mr-q__meta .mr-q__flag--inline { margin: 0 6px 0 0; }
.mr-q__flag { display: inline-flex; color: var(--warning); }
.mr-q__chev { color: var(--text-3); }

/* Status mark: shape (check / cross / dash) + colour + SR text */
.mr-mark {
  display: inline-grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mr-mark--correct { background: var(--success-bg); color: var(--success); }
.mr-mark--incorrect { background: var(--danger-bg); color: var(--danger); }
.mr-mark--unanswered { background: var(--surface-sunken); color: var(--text-3); border: 1.5px dashed var(--border-control); }

/* ---------- What happens next ---------- */
.mr-next { display: flex; flex-direction: column; gap: var(--sp-3); }
.mr-next__list { display: flex; flex-direction: column; gap: var(--sp-3); }
.mr-next__list li { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-13); line-height: 1.5; color: var(--text-2); }
.mr-next__list .icon { flex-shrink: 0; margin-top: 1px; color: var(--accent); }
.mr-next__list strong { color: var(--text-strong); font-weight: var(--fw-semibold); }
.mr-next__links { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ---------- Review sheet ---------- */
.mr-sheet { display: flex; flex-direction: column; gap: var(--sp-4); }
.mr-sheet__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.mr-sheet__topic { font-size: var(--fs-13); font-weight: var(--fw-medium); color: var(--text-2); }
.mr-sheet__flag { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--warning); }
.mr-sheet__stem {
  font-size: var(--fs-stem);
  line-height: var(--lh-stem);
  color: var(--text);
  overflow-wrap: break-word;
}
.mr-sheet__unanswered {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: var(--fs-15);
  color: var(--text-2);
}
.mr-sheet__ustitle { font-weight: var(--fw-semibold); color: var(--text-strong); }
.mr-sheet__explain { border-top: 1px solid var(--divider); }
.mr-sheet__source { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--divider); }
.mr-sheet__source-label {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-3);
}
.mr-whywrong { display: flex; flex-direction: column; gap: var(--sp-3); }
.mr-whywrong li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.mr-whywrong__letter {
  flex: 0 0 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-sunken);
  color: var(--text-strong);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
}

/* ---------- Empty / missing ---------- */
.mr-state { padding: var(--sp-8) 0; }

/* Compact rows (flagged card in the rail): status · topic / "Q7 · specialty · choice" · chevron */
.mr-q--compact { grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: var(--sp-3); padding-left: var(--sp-1); padding-right: var(--sp-1); }
.mr-q--compact .mr-q__topic { font-size: var(--fs-13); font-weight: var(--fw-semibold); }
.mr-q--compact .mr-q__meta { font-size: var(--fs-12); }

/* Specialties with fewer than 3 answers: raw counts only, no bar */
.mr-few { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--divider); }
.mr-few__label { font-size: var(--fs-12); font-weight: var(--fw-semibold); color: var(--text-2); margin-bottom: var(--sp-2); }
.mr-few__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-1) var(--sp-4); }
.mr-few__item {
  display: flex; align-items: center; gap: 8px;
  min-height: 32px;
  min-width: 0;
  font-size: var(--fs-13);
  color: var(--text);
}
.mr-few__name { min-width: 0; flex: 1 1 auto; }
.mr-few > .btn { margin-top: var(--sp-2); margin-left: calc(-1 * var(--sp-2)); }
.mr-few__gem { display: inline-flex; }
.mr-few__n { color: var(--text-3); font-variant-numeric: tabular-nums; font-weight: var(--fw-medium); }

/* Phones: rows use the full width — no chevron column; the flag rides inline in the meta line */
.mr-q__flag--inline { display: none; }
@media (max-width: 767px) {
  .mr-q:not(.mr-q--compact) { grid-template-columns: 22px 24px minmax(0, 1fr); column-gap: var(--sp-3); padding-left: var(--sp-1); padding-right: var(--sp-1); }
  .mr-q:not(.mr-q--compact) .mr-q__chev, .mr-q__flag--end { display: none; }
  .mr-q__flag--inline { display: inline-flex; }
}
.mr-hero__acc { margin-top: 2px; font-size: var(--fs-13); color: var(--text-2); }
.mr-hero__acc strong { color: var(--text-strong); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }

/* Milestone without the mascot (D9: a low score is never celebrated) */
.mr-milestone-calm__row { display: flex; align-items: flex-start; gap: var(--sp-3); }
.mr-milestone-calm__gem { display: inline-flex; flex-shrink: 0; }
.mr-milestone-calm__over {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-accent);
}
.mr-milestone-calm__title { margin-top: 2px; font-size: var(--fs-17); font-weight: var(--fw-bold); letter-spacing: var(--tracking-snug); color: var(--text-strong); }
.mr-milestone-calm__text { margin-top: 2px; font-size: var(--fs-13); line-height: 1.5; color: var(--text-2); }
.mr-review__filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* F2 (R2) ---------------------------------------------------------------------------- */
/* Phones: the facts sit full width under the ring + score row, each on one line */
.mr-hero__facts { display: flex; flex-direction: column; gap: 4px; margin-top: calc(-1 * var(--sp-2)); }
.mr-hero__facts .mr-hero__lead { margin-top: 0; }
.mr-hero__facts .mr-delta { align-self: flex-start; margin-top: var(--sp-1); }
/* A duration and its "of …" never break inside */
.mr-time__of { white-space: nowrap; }
/* Phones: the review filter is one scrollable row, never three wrapped rows */
@media (max-width: 767px) {
  .mr-review__filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin: -4px calc(-1 * var(--sp-5));   /* F4: 8 px pad keeps the chips' 44 px hit areas inside the scroller */
    padding: 8px var(--sp-5);
    scroll-padding-inline: var(--sp-5);
  }
  .mr-review__filters::-webkit-scrollbar { display: none; }
  .mr-review__filters > * { flex: 0 0 auto; }
}

/* F3 (R3) ---------------------------------------------------------------------------- */
/* Phones: the filter row fades out at the right edge (it scrolls), and keeps an end gutter */
@media (max-width: 767px) {
  .mr-review__filters {
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 40px), transparent);
            mask-image: linear-gradient(to right, black calc(100% - 40px), transparent);
  }
  .mr-review__filters::after { content: ""; flex: 0 0 var(--sp-5); }
}
/* Time: the allowed time is its own line; the two tiles keep one-line labels */
.mr-time__used { line-height: 1.15; }
p.mr-time__of { margin-top: 2px; font-size: var(--fs-13); font-weight: var(--fw-medium); color: var(--text-2); white-space: nowrap; }
.mr-time__facts dt, .mr-time__facts dd { white-space: nowrap; }
/* Small-sample note (no empty-state illustration) */
.mr-spec__note { font-size: var(--fs-13); line-height: 1.5; color: var(--text-2); }
/* 768–1199: Time and Flagged side by side under the score */
.mr-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); align-items: start; }

/* F4 (R4) ---------------------------------------------------------------------------- */
/* Sentence-case meta line under the heading (phones: the page's first line) */
.mr-title { margin-top: 0; }
.mr-meta { margin-top: var(--sp-1); font-size: var(--fs-15); color: var(--text-2); }
@media (max-width: 767px) { .mr-meta { margin-top: 0; font-size: var(--fs-13); } }
/* Review sheet heading: "Question 7 of 50" / "1 of 20 not answered" — the position is one unbreakable line */
.sheet__title .mr-sheet__q { display: block; }
.sheet__title .mr-sheet__pos {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  color: var(--text-2);
  white-space: nowrap;
}