/* ============================================================================
   AOA TEST CENTER — MARKED REVIEW (screen 07)
   The student's flagged-questions pile — the "come back to this" list.
   Screen-level composition ONLY. Every color, font, radius, shadow and motion
   value is inherited from test-center-system.css. No new tokens, no new colors.

   Two reusable components are born here:
     · QUESTION-PREVIEW CARD  (.mr-card)      — reused by Search (08)
     · IN-SESSION "WHY YOU'RE HERE" BANNER (.review-banner) — reused by any
        non-default session (missed, wasn't-sure, a Mastery-Map area drill).

   Discipline carried over: orange is a scalpel (selection only), got-wrong is
   CALM AMBER never harsh red, whitespace is generous, motion is named. The
   frame is PRODUCTIVE, never a guilt wall.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   SCREEN SHELL — a centered ~720px column so stems stay readable.
   -------------------------------------------------------------------------- */
.mr-screen {
  width: 100%;
  background: var(--surface);
  color: var(--body-text);
  font-family: var(--font-body);
}
.mr-screen .session-bar {
  border-bottom: 1px solid var(--line);
  /* Align the bar's content (wordmark / cluster) with the centered body column
     so the wordmark sits above the title and the cluster over the content's
     right edge — instead of the bar being full-bleed while the body is inset. */
  padding-inline: calc(max(0px, (100% - 760px)) / 2 + clamp(20px, 4vw, 32px));
}
.mr-screen__body {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 44px) clamp(20px, 4vw, 32px) clamp(40px, 6vw, 72px);
}

/* Help icon's sibling — quiet cert pill already inherited; meta row spacing. */
.mr-bar-cluster { display: flex; align-items: center; gap: var(--s-2); }

/* ----------------------------------------------------------------------------
   HEADER — eyebrow → heading → mentor subhead. Cert pill + primary CTA at right.
   -------------------------------------------------------------------------- */
.mr-head { margin-bottom: clamp(24px, 4vw, 36px); }
.mr-head__top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-6); flex-wrap: wrap;
}
.mr-head__lede { min-width: 0; flex: 1 1 360px; }
.mr-eyebrow { margin-bottom: var(--s-3); }
.mr-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  line-height: 1.06; letter-spacing: 0.005em; color: var(--ink);
}
.mr-subhead {
  margin-top: var(--s-3);
  font-size: clamp(1rem, 1.6vw, 1.1rem); line-height: 1.55;
  color: var(--muted); text-wrap: pretty; max-width: 54ch;
}
.mr-subhead b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }

/* The primary action — always reachable; top-right on desktop. */
.mr-head__cta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-2); padding-top: 4px; }
.mr-primary { white-space: nowrap; }
.mr-primary[disabled] { opacity: 1; background: var(--line); color: var(--muted); box-shadow: none; pointer-events: none; }
.mr-primary[disabled] svg { display: none; }

/* ----------------------------------------------------------------------------
   THE WHY-MARKED FILTER — the hero control. A segmented tablist reusing the
   Study / length-segment selection language: separate pills, orange selection.
   Each option carries its own reason DOT (category color) and a live count.
   -------------------------------------------------------------------------- */
.mr-filter {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.mr-tab {
  display: inline-flex; align-items: center; gap: var(--s-3);
  min-height: 48px; padding: 0 var(--s-4) 0 var(--s-4);
  border: 1px solid var(--line); border-left: 4px solid var(--line);
  border-radius: var(--r-md); background: var(--surface);
  font-family: var(--font-display); font-weight: 600; font-size: 0.96rem;
  letter-spacing: 0.01em; color: var(--ink); cursor: pointer;
  white-space: nowrap;
  transition: background var(--brief) var(--ease-calm),
              border-color var(--brief) var(--ease-calm),
              box-shadow var(--brief) var(--ease-calm);
}
.mr-tab__dot {
  flex: none; width: 9px; height: 9px; border-radius: var(--r-pill);
  background: var(--dot, var(--orange));
}
.mr-tab--all   { --dot: var(--orange); }
.mr-tab--wrong { --dot: var(--caution); }
.mr-tab--unsure{ --dot: var(--guess); }
.mr-tab__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-pill);
  background: var(--paper); border: 1px solid var(--line);
  font-family: var(--font-mono); font-weight: 500; font-size: 0.74rem;
  color: var(--muted); font-variant-numeric: tabular-nums;
  transition: all var(--brief) var(--ease-calm);
}
@media (hover: hover) {
  .mr-tab:hover { background: var(--orange-soft); border-left-color: var(--orange); }
}
.mr-tab[aria-selected="true"] {
  border-color: var(--orange); border-left-color: var(--orange);
  background: var(--orange-soft); box-shadow: var(--focus-ring);
}
.mr-tab[aria-selected="true"] .mr-tab__count {
  background: var(--surface); border-color: rgba(244,115,33,0.4); color: var(--orange-text); /* count text → AA role */
}

/* ── Secondary refine: subject / ACS-area chips, clearly subordinate. ── */
.mr-refine {
  display: flex; align-items: baseline; gap: var(--s-3) var(--s-4);
  flex-wrap: wrap; margin-bottom: clamp(20px, 3vw, 28px);
  padding-top: var(--s-4); border-top: 1px dashed var(--line);
}
.mr-refine__label {
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap;
  padding-top: 6px;
}
.mr-chiprow { display: flex; flex-wrap: wrap; gap: var(--s-2); flex: 1 1 auto; }
.mr-subj {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 36px; padding: 0 var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface);
  font-family: var(--font-body); font-weight: 500; font-size: 0.86rem;
  color: var(--body-text); cursor: pointer;
  transition: border-color var(--glance) var(--ease-calm),
              background var(--glance) var(--ease-calm), color var(--glance) var(--ease-calm);
}
.mr-subj__n { font-family: var(--font-mono); font-size: 0.66rem; color: var(--muted); }
@media (hover: hover) { .mr-subj:hover { border-color: var(--orange); background: var(--orange-soft); } }
.mr-subj.is-selected {
  border-color: var(--orange); background: var(--orange-soft); color: var(--ink);
  box-shadow: var(--focus-ring);
}
.mr-subj.is-selected .mr-subj__n { color: var(--orange-text); } /* count text → AA role */

/* ----------------------------------------------------------------------------
   THE LIST
   -------------------------------------------------------------------------- */
.mr-list { display: flex; flex-direction: column; gap: var(--s-4); }
.mr-list__count {
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted);
  letter-spacing: 0.04em; margin-bottom: var(--s-3);
}

/* ----------------------------------------------------------------------------
   QUESTION-PREVIEW CARD — the key new reusable component (Search 08 reuses it).
   Inherited card surface + a reason-colored left rail + the focus treatment.
   -------------------------------------------------------------------------- */
.mr-card {
  position: relative; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  padding: var(--s-5) var(--s-6) var(--s-5) calc(var(--s-6) + 3px);
  transition: border-color var(--brief) var(--ease-calm),
              box-shadow var(--brief) var(--ease-calm),
              opacity var(--brief) var(--ease-calm), transform var(--brief) var(--ease-calm);
}
/* Reason left-rail — category color, words still lead (chip below carries text). */
.mr-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--rail, var(--line));
}
.mr-card--wrong  { --rail: var(--caution); }
.mr-card--unsure { --rail: var(--guess); }
.mr-card--marked { --rail: var(--orange); }
@media (hover: hover) {
  .mr-card:hover { box-shadow: var(--shadow-card), 0 4px 16px rgba(22,19,18,0.06); }
}
/* Calm collapse on unflag. */
.mr-card.is-removing {
  opacity: 0; transform: translateY(-6px);
  margin-top: calc(-1 * var(--s-4)); margin-bottom: 0;
  max-height: 0; padding-top: 0; padding-bottom: 0;
  pointer-events: none;
  transition: opacity var(--brief) var(--ease-calm), transform var(--brief) var(--ease-calm),
              max-height var(--beat) var(--ease-calm) var(--tap),
              padding var(--beat) var(--ease-calm) var(--tap), margin var(--beat) var(--ease-calm) var(--tap);
}

/* Meta line — code · area · marked-time. */
.mr-card__meta {
  display: flex; align-items: baseline; gap: var(--s-2) var(--s-3);
  flex-wrap: wrap; margin-bottom: var(--s-3);
}
.mr-card__code {
  font-family: var(--font-mono); font-weight: 500; font-size: 0.74rem;
  color: var(--orange-text); letter-spacing: 0.02em; /* question code is text → AA role */
}
.mr-card__area { font-size: 0.82rem; color: var(--muted); }
.mr-card__dot-sep { color: var(--line); }
.mr-card__time {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted);
  letter-spacing: 0.02em; white-space: nowrap;
}

/* The stem — clamped to ~2 lines, clean ellipsis (never mid-word). */
.mr-card__stem {
  font-family: var(--font-body); font-weight: 500;
  font-size: 1.02rem; line-height: 1.45; color: var(--ink);
  text-wrap: pretty;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Tag row — why-marked chip + mastery state. */
.mr-card__tags {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  margin-top: var(--s-4);
}

/* Why-marked chip — words lead, the dot is the second carrier. */
.mr-why {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 28px; padding: 0 var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface);
  font-family: var(--font-display); font-weight: 600; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--body-text);
}
.mr-why__dot { flex: none; width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--wd, var(--guess)); }
.mr-why--wrong  { --wd: var(--caution); border-color: rgba(196,123,31,0.3);  background: var(--caution-soft); color: var(--caution); }
.mr-why--unsure { --wd: var(--guess);   border-color: var(--line);            background: var(--guess-soft);   color: var(--body-text); }
.mr-why--marked { --wd: var(--orange);  border-color: rgba(244,115,33,0.32); background: var(--orange-soft);  color: var(--orange-text); } /* chip words → AA; dot stays brand */

/* Mastery state — SAME label + color + icon family as the Dashboard/Results. */
.mr-mastery {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--ms, var(--guess));
}
.mr-mastery svg { flex: none; }
.mr-mastery--strong   { --ms: var(--success); --ms-soft: var(--success-soft, rgba(44,122,75,.12)); }
.mr-mastery--building { --ms: var(--guess);   --ms-soft: var(--guess-soft, rgba(176,140,40,.14)); }
.mr-mastery--needs    { --ms: var(--caution); --ms-soft: var(--caution-soft, rgba(196,123,31,.14)); }
.mr-mastery--new      { --ms: var(--muted, #6b6663); --ms-soft: rgba(107,102,99,.1); }
/* A question that's quietly gone green since flagging — a small win, gently noted. */
.mr-mastery__win {
  font-family: var(--font-mono); font-weight: 500; font-size: 0.62rem;
  text-transform: none; letter-spacing: 0.02em; color: var(--success);
  opacity: 0.9;
}

/* Affordance row — peek toggle (left), Review + unflag (right). */
.mr-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  margin-top: var(--s-5);
}
.mr-peektoggle {
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: none; border: none; padding: var(--s-2) 0; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
  transition: color var(--glance) var(--ease-calm);
}
.mr-peektoggle:hover { color: var(--orange-text); } /* hover label is text → AA role */
.mr-peektoggle svg { transition: transform var(--brief) var(--ease-decisive); }
.mr-peektoggle[aria-expanded="true"] { color: var(--orange-text); } /* persistent state text → AA role */
.mr-peektoggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.mr-card__actions { display: flex; align-items: center; gap: var(--s-2); }

/* Per-card secondary "Review →" — the surgical single-question path. */
.mr-review {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 40px; padding: 0 var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink);
  font-family: var(--font-display); font-weight: 600; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer;
  text-decoration: none;
  transition: border-color var(--brief) var(--ease-calm),
              color var(--brief) var(--ease-calm), background var(--brief) var(--ease-calm);
}
.mr-review svg { flex: none; transition: transform var(--brief) var(--ease-decisive); }
.mr-review:hover { border-color: var(--orange); color: var(--orange-text); background: var(--orange-soft); } /* label text → AA; border keeps brand */
.mr-review:hover svg { transform: translateX(3px); }

/* Unflag toggle — the inherited flag/bookmark control; filled = still marked. */
.mr-unflag {
  flex: none; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--orange); cursor: pointer;
  transition: color var(--glance) var(--ease-calm),
              border-color var(--glance) var(--ease-calm), background var(--glance) var(--ease-calm);
}
.mr-unflag svg { fill: currentColor; }
.mr-unflag[aria-pressed="true"] { border-color: rgba(244,115,33,0.4); background: var(--orange-soft); }
.mr-unflag[aria-pressed="false"] { color: var(--muted); }
.mr-unflag[aria-pressed="false"] svg { fill: none; }
.mr-unflag:hover { border-color: var(--orange); color: var(--orange); }

/* ── PROGRESSIVE PEEK — inline disclosure (callout.lift). Reuses the charcoal
      Key-Takeaway tray DNA from the Question Card. Collapsed by default. ── */
.mr-peek { display: none; }
.mr-peek.is-open {
  display: block; margin-top: var(--s-5); padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  animation: callout-lift var(--beat) var(--ease-cinematic) both;
}
.mr-peek__answer {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--success); border-left: 3px solid var(--success);
  border-radius: var(--r-md); background: var(--success-soft);
  margin-bottom: var(--s-4);
}
.mr-peek__check { flex: none; color: var(--success); padding-top: 1px; }
.mr-peek__answer-body { min-width: 0; }
.mr-peek__answer-label {
  font-family: var(--font-display); font-weight: 600; font-size: 0.66rem;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--success);
  margin-bottom: 3px;
}
.mr-peek__answer-text { font-size: 0.96rem; line-height: 1.45; color: var(--ink); text-wrap: pretty; }
/* Charcoal Key-Takeaway tray, reused verbatim from the Question Card. */
.mr-peek .takeaway { margin-top: 0; padding: var(--s-5) var(--s-6); }
.mr-peek .takeaway__head { font-size: 1.18rem; }
.mr-peek__open {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-4);
  font-family: var(--font-display); font-weight: 600; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--orange-text); /* link label is text → AA role */
  text-decoration: none; cursor: pointer;
}
.mr-peek__open svg { transition: transform var(--brief) var(--ease-decisive); }
.mr-peek__open:hover svg { transform: translateX(3px); }

/* ----------------------------------------------------------------------------
   "REMOVED — UNDO" — calm, reversible, never a destructive-red dialog.
   -------------------------------------------------------------------------- */
.mr-undo {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--ink); color: #f3efe9;
  box-shadow: var(--shadow-elevated);
  animation: callout-lift var(--brief) var(--ease-cinematic) both;
}
.mr-undo__text { font-size: 0.92rem; line-height: 1.4; }
.mr-undo__btn {
  margin-left: auto;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 0.82rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--orange-hover);
  display: inline-flex; align-items: center; gap: 6px;
}
.mr-undo__btn:hover { color: #fff; }
/* When the toast is inline in the list it sits where the card was. */
.mr-undo--inline { margin: 0; }

/* aria-live announcer — visually hidden. */
.mr-sr {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ----------------------------------------------------------------------------
   THE IN-SESSION "WHY YOU'RE HERE" BANNER — reusable strip atop the Question
   Card whenever a session launches from a non-default source. Built here.
   -------------------------------------------------------------------------- */
.review-banner {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-3) clamp(16px, 4vw, 28px);
  background: var(--bn-soft, var(--orange-soft));
  border-bottom: 1px solid var(--line);
  border-left: 4px solid var(--bn, var(--orange));
}
.review-banner--flagged { --bn: var(--orange);  --bn-soft: var(--orange-soft); }
.review-banner--wrong   { --bn: var(--caution); --bn-soft: var(--caution-soft); }
.review-banner--unsure  { --bn: var(--guess);   --bn-soft: var(--guess-soft); }
.review-banner__icon { flex: none; color: var(--bn, var(--orange)); display: flex; }
.review-banner__text {
  flex: 1; min-width: 0;
  font-family: var(--font-display); font-weight: 600; font-size: 0.94rem;
  letter-spacing: 0.01em; color: var(--ink);
}
.review-banner__text b { color: var(--bn, var(--orange)); font-weight: 600; font-variant-numeric: tabular-nums; }
.review-banner__exit {
  flex: none;
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: none; border: none; padding: var(--s-2) 0; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 0.76rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
  text-decoration: none;
  transition: color var(--glance) var(--ease-calm);
}
.review-banner__exit:hover { color: var(--orange-text); } /* hover label is text → AA role */
.review-banner__exit svg { flex: none; }

/* ----------------------------------------------------------------------------
   EMPTY STATES — mentor voice, never shaming. Three flavors.
   -------------------------------------------------------------------------- */
.mr-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--s-5); padding: clamp(36px, 6vw, 64px) var(--s-6);
}
.mr-empty__icon {
  width: 56px; height: 56px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  color: var(--orange); background: var(--orange-soft); border: 1px solid rgba(244,115,33,0.28);
}
.mr-empty__icon--calm { color: var(--success); background: var(--success-soft); border-color: rgba(44,122,75,0.28); }
.mr-empty__title {
  font-family: var(--font-display); font-weight: 600; font-size: 1.3rem;
  color: var(--ink); letter-spacing: 0.005em;
}
.mr-empty__body { max-width: 44ch; font-size: 1rem; line-height: 1.55; color: var(--muted); text-wrap: pretty; }

/* "Show where the flag lives" — a tiny inline depiction of the flag control. */
.mr-flaghint {
  display: inline-flex; align-items: center; gap: var(--s-3);
  margin-top: var(--s-2); padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--paper);
  font-family: var(--font-body); font-size: 0.86rem; color: var(--body-text);
}
.mr-flaghint__btn {
  flex: none; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(244,115,33,0.4); border-radius: var(--r-md);
  background: var(--orange-soft); color: var(--orange);
}
.mr-flaghint__btn svg { fill: currentColor; }

/* ----------------------------------------------------------------------------
   MICROCOPY — the AOA-voice copy deck for this surface (for the team to review).
   -------------------------------------------------------------------------- */
.mr-copy { padding: clamp(28px, 4vw, 40px); }
.mr-copy__group { margin-bottom: var(--s-8); }
.mr-copy__group:last-child { margin-bottom: 0; }
.mr-copy__group .t-label { margin-bottom: var(--s-4); display: block; }
.mr-copy__row {
  display: grid; grid-template-columns: 130px 1fr; gap: var(--s-5);
  align-items: baseline; padding: var(--s-3) 0; border-bottom: 1px solid var(--line);
}
.mr-copy__row:last-child { border-bottom: none; }
.mr-copy__tag {
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--orange-text); /* deck tag is text → AA role */
  letter-spacing: 0.04em; text-transform: uppercase;
}
.mr-copy__text { font-size: 0.96rem; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.mr-copy__text em { font-style: normal; color: var(--muted); }

/* ----------------------------------------------------------------------------
   MINI QUESTION CARD — the banner shown atop a Question Card, for the demo.
   Reuses the inherited .card / .t-question / .answers system verbatim.
   -------------------------------------------------------------------------- */
.mr-qhost { background: var(--surface); }
.mr-qhost .session-bar { border-bottom: 1px solid var(--line); }
.mr-qhost__page { max-width: 760px; margin: 0 auto; padding: clamp(20px, 4vw, 36px) clamp(20px, 4vw, 32px) clamp(28px, 4vw, 40px); }
.mr-qhost .card { border: none; box-shadow: none; padding: 0; }

/* ----------------------------------------------------------------------------
   RESPONSIVE — the focus/preview guard (artboards are fixed desktop frames).
   Mobile: filter scrolls, chips scroll, primary CTA sticky-bottom full-width.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .mr-head__top { flex-direction: column; }
  /* Collapse the desktop 360px WIDTH-basis so the column layout doesn't read it as a
     HEIGHT (the flex-basis-as-height bug, same as .mm-next__lede) — kills the dead gap
     above the "Review these N" CTA on the Marked Review header. */
  .mr-head__lede { flex: 0 1 auto; }
  .mr-head__cta { align-items: stretch; width: 100%; }
  .mr-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: var(--s-1); }
  .mr-filter::-webkit-scrollbar { display: none; }
  .mr-tab { flex: none; }
  .mr-chiprow { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .mr-chiprow::-webkit-scrollbar { display: none; }
  .mr-subj { flex: none; }
  .mr-card__foot { flex-direction: column; align-items: stretch; gap: var(--s-3); }
  .mr-card__actions { justify-content: space-between; }
  .mr-review { flex: 1; justify-content: center; }
}