/**
 * RxBoardPrep universal exam runtime — B1 REAL-EXAM SHELL (CANDIDATE).
 *
 * CANDIDATE ASSET. Loaded ONLY by the private QA page. The live student page
 * continues to load exam-universal.css untouched.
 *
 * Visual language ported from the B1 preview
 * (rxbp-universal-frontend-b1-preview.html, sha256 3380c24c…96a0).
 * Two B1 accessibility fixes are preserved deliberately:
 *   --rxn-toolbar  #3d7ab5 (not #6ea6d9 — 2.59:1 with white fails AA)
 *   --rxn-muted-weak #6b7a88 (not #9aa8b5 — 2.43:1 fails AA)
 *
 * FULLY SCOPED. Every rule is nested under .rxbp-u-next, a class this runtime
 * adds to its own root. Nothing here can reach theme or WordPress styling, and
 * no global element selector is used.
 */

.rxbp-u-next {
  /* palette — B1 tokens, namespaced */
  --rxn-navy:       #14538f;
  --rxn-navy-dark:  #0f4272;
  --rxn-navy-deep:  #0b3157;
  --rxn-toolbar:    #3d7ab5;
  --rxn-btn:        #1a5fa8;
  --rxn-btn-hover:  #14538f;
  --rxn-btn-quiet:  #5b6f80;

  --rxn-ink:        #1c1c1c;
  --rxn-ink-soft:   #33414d;
  --rxn-muted:      #5a6b7a;
  --rxn-muted-weak: #6b7a88;

  --rxn-line:       #c9d4de;
  --rxn-line-soft:  #e3eaf0;
  --rxn-bg:         #ffffff;
  --rxn-panel:      #f4f7fa;
  --rxn-panel-2:    #eef3f8;

  --rxn-good:       #1e7a45;
  --rxn-good-bg:    #e8f5ec;
  --rxn-good-line:  #a9d5ba;
  --rxn-bad:        #b3261e;
  --rxn-bad-bg:     #fdeceb;
  --rxn-bad-line:   #e6b4b0;
  --rxn-warn:       #9a6212;
  --rxn-warn-bg:    #fdf3e2;
  --rxn-mark:       #d98c1f;
  --rxn-hl:         #ffe680;

  --rxn-focus:      #ffbf47;
  --rxn-radius:     3px;
  --rxn-radius-lg:  6px;
  --rxn-shadow:     0 14px 34px rgba(11,49,87,.28);
  --rxn-shadow-soft:0 2px 6px rgba(11,49,87,.10);

  --rxn-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;
  --rxn-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --rxn-fs-base: 15px;
  --rxn-fs-sm:   13.5px;
  --rxn-fs-xs:   12px;
  --rxn-fs-lg:   17px;
  --rxn-fs-xl:   22px;

  font-family: var(--rxn-font);
  font-size: var(--rxn-fs-base);
  line-height: 1.5;
  color: var(--rxn-ink);
  display: block;
  margin: 0 0 24px;
}

/* student-selectable text scale (toolbar control) */
.rxbp-u-next[data-textscale="l"]  { --rxn-fs-base: 16.5px; --rxn-fs-sm: 15px;   --rxn-fs-lg: 19px; }
.rxbp-u-next[data-textscale="xl"] { --rxn-fs-base: 18px;   --rxn-fs-sm: 16.5px; --rxn-fs-lg: 21px; }

@media (prefers-contrast: more) {
  .rxbp-u-next { --rxn-line: #7d8fa0; --rxn-muted: #3d4d5c; --rxn-muted-weak: #3d4d5c; }
}

.rxbp-u-next *,
.rxbp-u-next *::before,
.rxbp-u-next *::after { box-sizing: border-box; }

.rxbp-u-next button,
.rxbp-u-next input,
.rxbp-u-next textarea,
.rxbp-u-next select { font: inherit; color: inherit; }

.rxbp-u-next :focus-visible {
  outline: 3px solid var(--rxn-focus); outline-offset: 2px; border-radius: 2px;
}

.rxbp-u-next .rxn-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;
}

/* ---------------------------------------------------------- exam room ---- */
/* Bounded exam console rather than a viewport takeover: this runs inside a
   WordPress page, so hijacking 100vh would break page scrolling and the theme
   header. The internal header/toolbar/footer still frame it as an exam room. */
.rxbp-u-next .rxn-room {
  display: flex; flex-direction: column;
  height: clamp(560px, 84vh, 1000px);
  border: 1px solid var(--rxn-line);
  border-radius: var(--rxn-radius-lg);
  overflow: hidden;
  background: var(--rxn-bg);
  box-shadow: var(--rxn-shadow-soft);
}

.rxbp-u-next .rxn-header {
  flex: 0 0 auto; background: var(--rxn-navy); color: #fff; padding: 8px 16px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  font-size: var(--rxn-fs-sm);
}
.rxbp-u-next .rxn-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.rxbp-u-next .rxn-mark {
  width: 30px; height: 30px; border-radius: 5px; background: #fff; color: var(--rxn-navy);
  display: grid; place-items: center; font-weight: 800; font-size: 14px; letter-spacing: -.02em; flex: 0 0 auto;
}
.rxbp-u-next .rxn-brandname { line-height: 1.15; }
.rxbp-u-next .rxn-brandname small { display: block; font-weight: 400; opacity: .82; font-size: var(--rxn-fs-xs); }
.rxbp-u-next .rxn-headmeta { text-align: center; line-height: 1.35; }
.rxbp-u-next .rxn-headstatus { text-align: right; line-height: 1.35; }
.rxbp-u-next .rxn-pill {
  background: rgba(255,255,255,.16); border-radius: 20px; padding: 2px 9px;
  font-size: var(--rxn-fs-xs); margin-left: 6px; white-space: nowrap; display: inline-block;
}
.rxbp-u-next .rxn-clock { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: .01em; }
.rxbp-u-next .rxn-clock.is-warn { color: #ffd9a0; }
.rxbp-u-next .rxn-clock.is-critical { color: #ffc9c4; }

/* ------------------------------------------------------------ toolbar ---- */
.rxbp-u-next .rxn-toolbar {
  flex: 0 0 auto; background: var(--rxn-toolbar); color: #fff; padding: 5px 12px;
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.rxbp-u-next .rxn-tool {
  background: transparent; border: 0; color: #fff; padding: 6px 10px; border-radius: var(--rxn-radius);
  cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-size: var(--rxn-fs-sm);
  min-height: 34px;
}
.rxbp-u-next .rxn-tool:hover { background: rgba(255,255,255,.20); color: #ffffff; }
.rxbp-u-next .rxn-tool[aria-pressed="true"],
.rxbp-u-next .rxn-tool[aria-expanded="true"] {
  background: rgba(255,255,255,.32); box-shadow: inset 0 0 0 1px rgba(255,255,255,.65);
}
.rxbp-u-next .rxn-tool__glyph { font-size: 15px; line-height: 1; }
.rxbp-u-next .rxn-tool__swatch {
  width: 14px; height: 14px; border-radius: 2px; background: var(--rxn-hl);
  border: 1px solid rgba(0,0,0,.35); display: inline-block;
}
.rxbp-u-next .rxn-toolspacer { flex: 1 1 auto; }

/* ------------------------------------------------------------- stage ----- */
.rxbp-u-next .rxn-stage { flex: 1 1 auto; min-height: 0; position: relative; display: flex; }

.rxbp-u-next .rxn-split { display: flex; width: 100%; min-height: 0; }
.rxbp-u-next .rxn-pane { overflow: auto; padding: 20px 24px 40px; }
.rxbp-u-next .rxn-pane--stimulus {
  flex: 0 0 46%; border-right: 1px solid var(--rxn-line); background: var(--rxn-bg);
}
.rxbp-u-next .rxn-pane--question { flex: 1 1 54%; }
/* Chapter 25 has zero stimuli, so single-pane is the normal path. */
.rxbp-u-next .rxn-split.is-single .rxn-pane--stimulus { display: none; }
.rxbp-u-next .rxn-split.is-single .rxn-pane--question { flex: 1 1 100%; }

/* -------------------------------------------------------------- footer --- */
.rxbp-u-next .rxn-footer {
  flex: 0 0 auto; background: var(--rxn-navy); color: #fff; display: flex; align-items: stretch;
  font-size: var(--rxn-fs-sm);
}
.rxbp-u-next .rxn-fbtn {
  background: transparent; border: 0; border-right: 1px solid rgba(255,255,255,.20); color: #fff;
  padding: 12px 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 46px;
}
.rxbp-u-next .rxn-fbtn:hover:not(:disabled) { background: rgba(255,255,255,.14); color: #ffffff; }
.rxbp-u-next .rxn-fbtn:disabled { opacity: .42; cursor: not-allowed; }
.rxbp-u-next .rxn-footright { margin-left: auto; display: flex; }
.rxbp-u-next .rxn-footright .rxn-fbtn { border-right: 0; border-left: 1px solid rgba(255,255,255,.20); }
.rxbp-u-next .rxn-fbtn--primary { background: var(--rxn-btn); font-weight: 600; }
.rxbp-u-next .rxn-fbtn--primary:hover:not(:disabled) { background: #2a72bd; color: #ffffff; }

/* ------------------------------------------------------------ question --- */
.rxbp-u-next .rxn-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.rxbp-u-next .rxn-chip {
  font-size: var(--rxn-fs-xs); padding: 2px 9px; border-radius: 20px; background: var(--rxn-panel-2);
  color: var(--rxn-ink-soft); border: 1px solid var(--rxn-line);
}
.rxbp-u-next .rxn-instruction { font-weight: 600; margin: 0 0 6px; }
.rxbp-u-next .rxn-stem { margin: 0 0 18px; max-width: 70ch; }
.rxbp-u-next .rxn-stem p, .rxbp-u-next .rxn-block { margin: 0 0 10px; }

.rxbp-u-next .rxn-options { list-style: none; margin: 0; padding: 0; max-width: 70ch; }
.rxbp-u-next .rxn-options > li { margin: 0 0 8px; }
.rxbp-u-next .rxn-optrow { display: flex; gap: 8px; align-items: flex-start; }
.rxbp-u-next .rxn-option {
  display: flex; gap: 11px; align-items: flex-start; padding: 9px 11px; border-radius: var(--rxn-radius);
  border: 1px solid transparent; cursor: pointer; flex: 1 1 auto; min-width: 0;
}
.rxbp-u-next .rxn-option:hover { background: var(--rxn-panel); }
.rxbp-u-next .rxn-option input { margin: 3px 0 0; flex: 0 0 auto; width: 17px; height: 17px; cursor: pointer; }
.rxbp-u-next .rxn-optletter { flex: 0 0 20px; color: var(--rxn-ink-soft); font-weight: 600; }
.rxbp-u-next .rxn-opttext { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }

/* eliminate / restore */
.rxbp-u-next .rxn-elim {
  flex: 0 0 auto; width: 40px; min-height: 40px; border: 1px solid var(--rxn-line);
  background: #fff; border-radius: var(--rxn-radius); color: var(--rxn-muted);
  cursor: pointer; font-size: 15px; line-height: 1;
}
.rxbp-u-next .rxn-elim:hover { background: var(--rxn-panel-2); border-color: var(--rxn-btn); color: var(--rxn-btn); }
.rxbp-u-next .rxn-optrow.is-eliminated .rxn-opttext {
  text-decoration: line-through; text-decoration-thickness: 1.6px; color: #657481;
}
.rxbp-u-next .rxn-optrow.is-eliminated .rxn-optletter { color: #657481; }
.rxbp-u-next .rxn-optrow.is-eliminated .rxn-option { opacity: .72; }
.rxbp-u-next .rxn-optrow.is-eliminated .rxn-elim { background: var(--rxn-panel-2); color: var(--rxn-ink-soft); }

/* graded / feedback option states */
.rxbp-u-next .rxn-option.is-correct { background: var(--rxn-good-bg); border-color: var(--rxn-good-line); }
.rxbp-u-next .rxn-option.is-wrong { background: var(--rxn-bad-bg); border-color: var(--rxn-bad-line); }
.rxbp-u-next .rxn-opttag {
  margin-left: auto; font-size: var(--rxn-fs-xs); font-weight: 700; letter-spacing: .04em; white-space: nowrap;
}
.rxbp-u-next .rxn-option.is-correct .rxn-opttag { color: var(--rxn-good); }
.rxbp-u-next .rxn-option.is-wrong .rxn-opttag { color: var(--rxn-bad); }

/* highlight mark */
.rxbp-u-next .rxn-hl { background: var(--rxn-hl); border-radius: 2px; padding: 0 1px; }

/* actions */
.rxbp-u-next .rxn-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 22px; }
.rxbp-u-next .rxn-btn {
  background: var(--rxn-btn); color: #fff; border: 0; padding: 10px 22px; border-radius: var(--rxn-radius);
  cursor: pointer; font-size: var(--rxn-fs-base); min-height: 44px;
}
.rxbp-u-next .rxn-btn:hover:not(:disabled) { background: var(--rxn-btn-hover); color: #ffffff; }
.rxbp-u-next .rxn-btn:disabled { background: #9db4c9; cursor: not-allowed; }
.rxbp-u-next .rxn-btn--quiet { background: var(--rxn-btn-quiet); }
.rxbp-u-next .rxn-btn--ghost { background: transparent; color: var(--rxn-btn); border: 1px solid var(--rxn-btn); }
.rxbp-u-next .rxn-btn--ghost:hover:not(:disabled) { background: var(--rxn-panel-2); color: var(--rxn-navy-dark); }

/* ------------------------------------------------------------ feedback --- */
.rxbp-u-next .rxn-feedback {
  margin-top: 24px; border-top: 3px solid var(--rxn-line); padding-top: 16px; max-width: 72ch;
}
.rxbp-u-next .rxn-verdict {
  font-weight: 700; font-size: var(--rxn-fs-lg); margin: 0 0 12px; display: flex; gap: 9px; align-items: center;
}
.rxbp-u-next .rxn-verdict.is-ok { color: var(--rxn-good); }
.rxbp-u-next .rxn-verdict.is-no { color: var(--rxn-bad); }
.rxbp-u-next .rxn-fbh {
  margin: 18px 0 6px; font-size: var(--rxn-fs-xs); text-transform: uppercase; letter-spacing: .07em;
  color: var(--rxn-muted); font-weight: 700;
}
.rxbp-u-next .rxn-pearl {
  background: var(--rxn-panel); border-left: 3px solid var(--rxn-btn); padding: 10px 14px; margin: 10px 0;
}
.rxbp-u-next .rxn-why { margin: 2px 0 8px 30px; font-size: var(--rxn-fs-sm); color: var(--rxn-ink-soft); max-width: 62ch; }
.rxbp-u-next .rxn-refs { font-size: var(--rxn-fs-sm); color: var(--rxn-muted); }

/* ------------------------------------------------------------- dialogs --- */
.rxbp-u-next .rxn-overlay {
  position: fixed; inset: 0; background: rgba(11,49,87,.55); display: grid; place-items: center;
  z-index: 100060; padding: 20px;
}
.rxbp-u-next .rxn-dialog {
  background: #fff; border-radius: var(--rxn-radius-lg); width: min(720px, 100%); max-height: 88vh;
  display: flex; flex-direction: column; box-shadow: var(--rxn-shadow); color: var(--rxn-ink);
}
.rxbp-u-next .rxn-dialog--sm { width: min(460px, 100%); }
.rxbp-u-next .rxn-dialoghead {
  background: var(--rxn-navy); color: #fff; padding: 12px 18px;
  border-radius: var(--rxn-radius-lg) var(--rxn-radius-lg) 0 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.rxbp-u-next .rxn-dialoghead h2 { margin: 0; font-size: var(--rxn-fs-lg); font-weight: 600; }
.rxbp-u-next .rxn-close {
  background: transparent; border: 0; color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
  padding: 0; min-width: 44px; min-height: 44px;
}
.rxbp-u-next .rxn-dialogbody { padding: 18px; overflow: auto; }
.rxbp-u-next .rxn-dialogfoot {
  padding: 14px 18px; border-top: 1px solid var(--rxn-line); display: flex; gap: 10px;
  justify-content: flex-end; flex-wrap: wrap;
}

/* ----------------------------------------------------------- navigator --- */
.rxbp-u-next .rxn-navgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px; }
.rxbp-u-next .rxn-navcell {
  border: 1px solid var(--rxn-line); background: #fff; padding: 11px 0; border-radius: var(--rxn-radius);
  cursor: pointer; position: relative; font-variant-numeric: tabular-nums; min-height: 44px;
}
.rxbp-u-next .rxn-navcell:hover:not(:disabled) { border-color: var(--rxn-btn); }
.rxbp-u-next .rxn-navcell.is-answered { background: var(--rxn-good-bg); border-color: var(--rxn-good-line); }
.rxbp-u-next .rxn-navcell.is-current { box-shadow: 0 0 0 2px var(--rxn-btn); font-weight: 700; }
.rxbp-u-next .rxn-navcell__mark { position: absolute; top: 3px; right: 4px; color: var(--rxn-mark); font-size: 10px; }
.rxbp-u-next .rxn-legend {
  display: flex; gap: 18px; flex-wrap: wrap; margin-top: 18px; font-size: var(--rxn-fs-sm); color: var(--rxn-muted);
}
.rxbp-u-next .rxn-legend span { display: inline-flex; align-items: center; gap: 7px; }
.rxbp-u-next .rxn-legend i {
  width: 15px; height: 15px; border: 1px solid var(--rxn-line); border-radius: 2px; display: inline-block;
}

/* --------------------------------------------------------------- notes --- */
.rxbp-u-next .rxn-notes {
  width: 100%; min-height: 210px; padding: 11px; border: 1px solid var(--rxn-line);
  border-radius: var(--rxn-radius); resize: vertical; font-family: var(--rxn-font);
}
.rxbp-u-next .rxn-notecount { font-size: var(--rxn-fs-sm); color: var(--rxn-muted); margin-top: 8px; }

/* ---------------------------------------------------------- calculator --- */
.rxbp-u-next .rxn-calc {
  position: fixed; width: 312px; background: #eef2f6; border: 1px solid #7d8fa0;
  border-radius: var(--rxn-radius-lg); box-shadow: var(--rxn-shadow); z-index: 100070; user-select: none;
}
.rxbp-u-next .rxn-calc__head {
  background: var(--rxn-navy); color: #fff; padding: 8px 10px; display: flex; justify-content: space-between;
  align-items: center; border-radius: var(--rxn-radius-lg) var(--rxn-radius-lg) 0 0;
  font-size: var(--rxn-fs-sm); cursor: move; touch-action: none;
}
.rxbp-u-next .rxn-calc__grip { display: flex; gap: 8px; align-items: center; }
/* Calculator display: light neutral face, near-black navy figures. */
.rxbp-u-next .rxn-calc__display {
  background: #f4f7fa; margin: 9px; padding: 9px 11px; border: 1px solid #b9c6d3;
  border-radius: var(--rxn-radius); text-align: right; font-family: var(--rxn-mono);
}
.rxbp-u-next .rxn-calc__mem { font-size: 11px; color: #4a5c6d; text-align: left; min-height: 14px; }
.rxbp-u-next .rxn-calc__expr { font-size: var(--rxn-fs-sm); color: #33414d; min-height: 19px; word-break: break-all; }
.rxbp-u-next .rxn-calc__out { font-size: 25px; font-weight: 700; color: #0b3157; min-height: 31px; word-break: break-all; }

.rxbp-u-next .rxn-calc__keys { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; padding: 0 9px 8px; }
.rxbp-u-next .rxn-calc__pad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 0 9px 11px; }
.rxbp-u-next .rxn-k--wide { grid-column: 1 / -1; }

/* ---------------------------------------------------------------------------
   CALCULATOR KEY STATES — every state pins BOTH background and text colour.
   The active theme ships a bare `button:hover,button:focus,button:active
   { color: var(--global-palette-btn-hover) }` rule, which resolves to white.
   Any key that left `color` unset inherited that white on hover and became
   unreadable against these light key faces. Declaring the colour in each
   state (and neutralising the theme's hover box-shadow) closes that hole.
   Only the equals key uses white text, and its background stays dark.
   --------------------------------------------------------------------------- */
.rxbp-u-next .rxn-k {
  border: 1px solid #9fb0c0; background: #ffffff; color: #16202b;
  border-radius: var(--rxn-radius); padding: 11px 0; font-size: var(--rxn-fs-sm);
  cursor: pointer; min-height: 42px; box-shadow: none;
}
.rxbp-u-next .rxn-k:hover { background: #dce7f2; color: #16202b; border-color: #7d97b0; box-shadow: none; }
.rxbp-u-next .rxn-k:focus { color: #16202b; box-shadow: none; }
.rxbp-u-next .rxn-k:active { background: #c6d6e6; color: #16202b; border-color: #5f7c96; transform: translateY(1px); box-shadow: none; }
.rxbp-u-next .rxn-k:focus-visible {
  outline: 3px solid var(--rxn-focus); outline-offset: 1px;
  box-shadow: inset 0 0 0 2px var(--rxn-navy); color: #16202b;
}
.rxbp-u-next .rxn-k[disabled],
.rxbp-u-next .rxn-k:disabled {
  background: #eef1f4; color: #55636f; border-color: #c3cdd6; cursor: not-allowed;
}

/* scientific function keys — subtle blue-grey, dark navy text */
.rxbp-u-next .rxn-k--fn { background: #e7edf4; color: #16202b; font-size: var(--rxn-fs-xs); }
.rxbp-u-next .rxn-k--fn:hover { background: #d5e1ee; color: #16202b; }
.rxbp-u-next .rxn-k--fn:active { background: #c2d3e5; color: #16202b; }

/* operators — stronger pale blue, dark navy text */
.rxbp-u-next .rxn-k--op { background: #d7e4f2; color: #16202b; font-weight: 600; }
.rxbp-u-next .rxn-k--op:hover { background: #c3d6ec; color: #16202b; }
.rxbp-u-next .rxn-k--op:active { background: #aec8e4; color: #16202b; }

/* memory keys — restrained but distinct: navy label on a cooler face.
   Matched on the semantic aria-label rather than position, so re-ordering
   the keypad cannot silently detach this styling. */
.rxbp-u-next .rxn-k[aria-label^="Memory"] {
  background: #eef2f7; color: var(--rxn-navy-dark); border-color: #9aaec2; font-weight: 600;
}
.rxbp-u-next .rxn-k[aria-label^="Memory"]:hover { background: #dde6f0; color: var(--rxn-navy-dark); border-color: #7d97b0; }
.rxbp-u-next .rxn-k[aria-label^="Memory"]:active { background: #ccd9e7; color: var(--rxn-navy-dark); }

/* equals — solid RxBoardPrep blue, white text on a dark face in every state */
.rxbp-u-next .rxn-k--eq { background: var(--rxn-btn); color: #ffffff; border-color: var(--rxn-btn-hover); font-weight: 700; }
.rxbp-u-next .rxn-k--eq:hover { background: var(--rxn-btn-hover); color: #ffffff; border-color: var(--rxn-navy-deep); }
.rxbp-u-next .rxn-k--eq:active { background: var(--rxn-navy-deep); color: #ffffff; }
.rxbp-u-next .rxn-k--eq:focus-visible { box-shadow: inset 0 0 0 2px #ffffff; color: #ffffff; }

/* calculator close control sits on the navy title bar, so white is correct
   there — pinned in every state so the theme cannot repaint it either. */
.rxbp-u-next .rxn-calc__head .rxn-close,
.rxbp-u-next .rxn-calc__head .rxn-close:hover,
.rxbp-u-next .rxn-calc__head .rxn-close:focus,
.rxbp-u-next .rxn-calc__head .rxn-close:active { color: #ffffff; background: transparent; box-shadow: none; }
.rxbp-u-next .rxn-calc__head .rxn-close:hover { background: rgba(255,255,255,.18); color: #ffffff; }

/* Mobile: no free dragging. Docked bottom sheet, full width, large targets. */
@media (max-width: 700px) {
  .rxbp-u-next .rxn-calc {
    left: 8px !important; right: 8px; top: auto !important; bottom: 8px; width: auto;
    max-height: 76vh; overflow: auto;
  }
  .rxbp-u-next .rxn-calc__head { cursor: default; }
  .rxbp-u-next .rxn-k { min-height: 48px; font-size: var(--rxn-fs-base); }
}

/* --------------------------------------------------------------- start --- */
.rxbp-u-next .rxn-screen { flex: 1 1 auto; overflow: auto; background: var(--rxn-bg); }
.rxbp-u-next .rxn-screen__inner { max-width: 900px; margin: 0 auto; padding: 34px 24px 60px; }
.rxbp-u-next .rxn-screen h1 { font-size: var(--rxn-fs-xl); margin: 0 0 6px; color: var(--rxn-navy); }
.rxbp-u-next .rxn-lede { color: var(--rxn-muted); margin: 0 0 26px; }
.rxbp-u-next .rxn-section {
  font-size: var(--rxn-fs-lg); margin: 30px 0 12px; padding-bottom: 7px;
  border-bottom: 2px solid var(--rxn-line); color: var(--rxn-navy);
}
.rxbp-u-next .rxn-spec { border: 1px solid var(--rxn-line); border-radius: var(--rxn-radius-lg); overflow: hidden; margin: 18px 0 26px; }
.rxbp-u-next .rxn-spec__row { display: flex; justify-content: space-between; gap: 20px; padding: 10px 15px; font-size: var(--rxn-fs-sm); }
.rxbp-u-next .rxn-spec__row:nth-child(odd) { background: var(--rxn-panel); }
.rxbp-u-next .rxn-spec__row b { text-align: right; }
.rxbp-u-next .rxn-modes { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 6px 0 20px; }
.rxbp-u-next .rxn-mode {
  border: 2px solid var(--rxn-line); border-radius: var(--rxn-radius-lg); padding: 16px 18px; background: #fff;
  text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 6px;
}
.rxbp-u-next .rxn-mode:hover { border-color: #9dbedd; }
.rxbp-u-next .rxn-mode[aria-pressed="true"] { border-color: var(--rxn-btn); background: #f2f8fd; }
.rxbp-u-next .rxn-mode h3 { margin: 0; font-size: var(--rxn-fs-base); color: var(--rxn-navy); }
.rxbp-u-next .rxn-mode p { margin: 0; font-size: var(--rxn-fs-sm); color: var(--rxn-muted); }

/* ------------------------------------------------------------- results --- */
.rxbp-u-next .rxn-hero {
  display: flex; gap: 26px; align-items: center; flex-wrap: wrap;
  border: 1px solid var(--rxn-line); border-radius: var(--rxn-radius-lg); padding: 22px 26px; margin-bottom: 8px;
}
.rxbp-u-next .rxn-hero__value { font-size: 48px; font-weight: 800; line-height: 1; color: var(--rxn-navy); }
.rxbp-u-next .rxn-hero__label { font-size: var(--rxn-fs-sm); color: var(--rxn-muted); }
.rxbp-u-next .rxn-hero__counts { font-size: var(--rxn-fs-lg); font-weight: 600; }
.rxbp-u-next .rxn-disclaimer {
  font-size: var(--rxn-fs-sm); color: var(--rxn-muted); border-left: 3px solid var(--rxn-line);
  padding: 8px 14px; margin: 0 0 24px;
}
.rxbp-u-next .rxn-barrow { margin-bottom: 15px; }
.rxbp-u-next .rxn-barrow__top { display: flex; justify-content: space-between; gap: 16px; font-size: var(--rxn-fs-sm); margin-bottom: 5px; }
.rxbp-u-next .rxn-bartrack { height: 10px; background: var(--rxn-line-soft); border-radius: 5px; overflow: hidden; }
.rxbp-u-next .rxn-barfill { height: 100%; background: var(--rxn-btn); border-radius: 5px; }
.rxbp-u-next .rxn-barfill.is-high { background: var(--rxn-good); }
.rxbp-u-next .rxn-barfill.is-low { background: #c86a2b; }
.rxbp-u-next .rxn-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin: 18px 0; }
.rxbp-u-next .rxn-count {
  padding: 14px; border: 1px solid var(--rxn-line); border-radius: var(--rxn-radius-lg); text-align: center;
}
.rxbp-u-next .rxn-count b { display: block; font-size: 1.5rem; color: var(--rxn-navy); }
.rxbp-u-next .rxn-count span { font-size: var(--rxn-fs-sm); color: var(--rxn-muted); }

/* --------------------------------------------------------------- misc ---- */
.rxbp-u-next .rxn-status {
  position: absolute; right: 12px; bottom: 10px; background: var(--rxn-navy-deep); color: #fff;
  padding: 7px 13px; border-radius: 20px; font-size: var(--rxn-fs-sm); box-shadow: var(--rxn-shadow-soft);
  pointer-events: none; opacity: 0; transition: opacity .15s ease;
}
.rxbp-u-next .rxn-status.is-on { opacity: 1; }
.rxbp-u-next .rxn-notice {
  border: 1px solid #e2c48c; background: var(--rxn-warn-bg); border-radius: var(--rxn-radius-lg);
  padding: 14px 16px; margin: 14px 0; color: #6b4a12;
}
.rxbp-u-next .rxn-blocked { padding: 30px 24px; }

@media (max-width: 900px) {
  .rxbp-u-next .rxn-header { grid-template-columns: 1fr; text-align: center; gap: 4px; }
  .rxbp-u-next .rxn-headmeta, .rxbp-u-next .rxn-headstatus { text-align: center; }
  .rxbp-u-next .rxn-brand { justify-content: center; }
  .rxbp-u-next .rxn-split { flex-direction: column; }
  .rxbp-u-next .rxn-pane--stimulus { flex: 0 0 42%; border-right: 0; border-bottom: 2px solid var(--rxn-line); }
}
@media (max-width: 560px) {
  .rxbp-u-next .rxn-room { height: auto; min-height: 70vh; }
  .rxbp-u-next .rxn-pane { padding: 14px 14px 30px; }
  .rxbp-u-next .rxn-fbtn { padding: 12px 11px; }
  .rxbp-u-next .rxn-fbtn__label { display: none; }
  .rxbp-u-next .rxn-fbtn--primary .rxn-fbtn__label { display: inline; }
  .rxbp-u-next .rxn-toolbar { gap: 2px; }
  .rxbp-u-next .rxn-tool { padding: 6px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .rxbp-u-next * { transition: none !important; animation: none !important; }
}

/* ===========================================================================
   THEME-OVERRIDE CONTRAST GUARD
   ---------------------------------------------------------------------------
   The active theme ships a bare, unscoped rule:

     button:hover, button:focus, button:active, … {
       color: var(--global-palette-btn-hover);      <- resolves to white
       background: var(--global-palette-btn-bg-hover);
       box-shadow: 0 15px 25px -7px rgba(0,0,0,…);
     }

   Any candidate control that leaves `color` unset in an interactive state
   inherits that white text. On a light control face the label then vanishes.
   Controls that set only `border-color` on hover are worse still: the theme
   supplies the background *and* the text colour, erasing the state meaning.

   This block is deliberately LAST in the file so that, at equal specificity,
   these declarations win. Every interactive state pins its own colour, and the
   theme's hover shadow is neutralised so the exam room keeps its flat chrome.

   Dark faces keep white text. Light faces keep dark navy / near-black text.
   =========================================================================== */

/* ---- dark-faced controls: white text held in every state ---------------- */
.rxbp-u-next .rxn-tool,
.rxbp-u-next .rxn-tool:hover,
.rxbp-u-next .rxn-tool:focus,
.rxbp-u-next .rxn-tool:active,
.rxbp-u-next .rxn-fbtn,
.rxbp-u-next .rxn-fbtn:hover,
.rxbp-u-next .rxn-fbtn:focus,
.rxbp-u-next .rxn-fbtn:active,
.rxbp-u-next .rxn-btn,
.rxbp-u-next .rxn-btn:hover,
.rxbp-u-next .rxn-btn:focus,
.rxbp-u-next .rxn-btn:active,
.rxbp-u-next .rxn-close,
.rxbp-u-next .rxn-close:hover,
.rxbp-u-next .rxn-close:focus,
.rxbp-u-next .rxn-close:active { color: #ffffff; box-shadow: none; }

.rxbp-u-next .rxn-tool:hover { background: rgba(255,255,255,.20); color: #ffffff; }
.rxbp-u-next .rxn-tool:active { background: rgba(255,255,255,.30); color: #ffffff; }
.rxbp-u-next .rxn-fbtn:hover:not(:disabled) { background: rgba(255,255,255,.16); color: #ffffff; }
.rxbp-u-next .rxn-fbtn:active:not(:disabled) { background: rgba(255,255,255,.24); color: #ffffff; }
.rxbp-u-next .rxn-fbtn--primary:hover:not(:disabled) { background: #2a72bd; color: #ffffff; }
.rxbp-u-next .rxn-fbtn--primary:active:not(:disabled) { background: var(--rxn-navy-dark); color: #ffffff; }
.rxbp-u-next .rxn-btn:hover:not(:disabled) { background: var(--rxn-btn-hover); color: #ffffff; }
.rxbp-u-next .rxn-btn:active:not(:disabled) { background: var(--rxn-navy-deep); color: #ffffff; }
.rxbp-u-next .rxn-close:hover { background: rgba(255,255,255,.18); color: #ffffff; }

/* disabled: lower emphasis, still legible — never opacity-faded to a whisper */
.rxbp-u-next .rxn-fbtn:disabled {
  opacity: 1; color: #cbdae8; background: rgba(0,0,0,.16); cursor: not-allowed;
}
.rxbp-u-next .rxn-btn:disabled {
  background: #566f85; color: #ffffff; cursor: not-allowed;
}

/* ---- light-faced controls: dark text held in every state ---------------- */
.rxbp-u-next .rxn-btn--ghost,
.rxbp-u-next .rxn-btn--ghost:hover,
.rxbp-u-next .rxn-btn--ghost:focus,
.rxbp-u-next .rxn-btn--ghost:active,
.rxbp-u-next .rxn-navcell,
.rxbp-u-next .rxn-navcell:hover,
.rxbp-u-next .rxn-navcell:focus,
.rxbp-u-next .rxn-navcell:active,
.rxbp-u-next .rxn-mode,
.rxbp-u-next .rxn-mode:hover,
.rxbp-u-next .rxn-mode:focus,
.rxbp-u-next .rxn-mode:active,
.rxbp-u-next .rxn-elim,
.rxbp-u-next .rxn-elim:hover,
.rxbp-u-next .rxn-elim:focus,
.rxbp-u-next .rxn-elim:active { color: #16202b; }

/* ghost / secondary */
.rxbp-u-next .rxn-btn--ghost { background: transparent; color: var(--rxn-btn); border: 1px solid var(--rxn-btn); box-shadow: none; }
.rxbp-u-next .rxn-btn--ghost:hover:not(:disabled) { background: #e4eef8; color: var(--rxn-navy-dark); border-color: var(--rxn-navy-dark); box-shadow: none; }
.rxbp-u-next .rxn-btn--ghost:active:not(:disabled) { background: #d3e3f4; color: var(--rxn-navy-deep); box-shadow: none; }
.rxbp-u-next .rxn-btn--ghost:disabled { background: #f1f4f7; color: #55636f; border-color: #c3cdd6; cursor: not-allowed; }

/* eliminate / restore */
.rxbp-u-next .rxn-elim { background: #ffffff; color: #3d4d5c; border: 1px solid #9fb0c0; box-shadow: none; }
.rxbp-u-next .rxn-elim:hover { background: #dce7f2; color: var(--rxn-navy-dark); border-color: var(--rxn-btn); box-shadow: none; }
.rxbp-u-next .rxn-elim:active { background: #c6d6e6; color: var(--rxn-navy-deep); box-shadow: none; }
.rxbp-u-next .rxn-elim:focus-visible { outline: 3px solid var(--rxn-focus); outline-offset: 1px; color: var(--rxn-navy-dark); }
.rxbp-u-next .rxn-optrow.is-eliminated .rxn-elim { background: #e3eaf1; color: #2b3a48; border-color: #8ea2b5; }
.rxbp-u-next .rxn-optrow.is-eliminated .rxn-elim:hover { background: #d2dee9; color: var(--rxn-navy-deep); }

/* mode cards — selected state must stay obvious without relying on colour */
.rxbp-u-next .rxn-mode { background: #ffffff; box-shadow: none; }
.rxbp-u-next .rxn-mode:hover { background: #f4f9fd; border-color: #9dbedd; box-shadow: none; color: #16202b; }
.rxbp-u-next .rxn-mode:active { background: #e9f2fb; box-shadow: none; color: #16202b; }
.rxbp-u-next .rxn-mode[aria-pressed="true"] {
  background: #eaf3fc; border-color: var(--rxn-btn); box-shadow: inset 0 0 0 1px var(--rxn-btn);
}
.rxbp-u-next .rxn-mode[aria-pressed="true"]:hover { background: #e0edfa; border-color: var(--rxn-navy-dark); color: #16202b; }
.rxbp-u-next .rxn-mode h3 { color: var(--rxn-navy); }
.rxbp-u-next .rxn-mode p { color: var(--rxn-muted); }

/* ---- navigator: state modifiers come AFTER the base states so the
        answered / current / marked meaning survives hover ---------------- */
.rxbp-u-next .rxn-navcell { background: #ffffff; border: 1px solid var(--rxn-line); box-shadow: none; }
.rxbp-u-next .rxn-navcell:hover:not(:disabled) { background: #dce7f2; border-color: var(--rxn-btn); color: #16202b; box-shadow: none; }
.rxbp-u-next .rxn-navcell:active:not(:disabled) { background: #c6d6e6; color: #16202b; }
.rxbp-u-next .rxn-navcell:disabled { background: var(--rxn-panel-2); color: #55636f; cursor: not-allowed; }

.rxbp-u-next .rxn-navcell.is-answered { background: var(--rxn-good-bg); border-color: var(--rxn-good-line); color: #16202b; }
.rxbp-u-next .rxn-navcell.is-answered:hover:not(:disabled) { background: #d3ecdc; border-color: var(--rxn-good); color: #16202b; }

/* current ring is a box-shadow, so it is declared last and re-declared on
   hover — otherwise the guard above would flatten it away */
.rxbp-u-next .rxn-navcell.is-current { box-shadow: 0 0 0 2px var(--rxn-btn); font-weight: 700; color: #16202b; }
.rxbp-u-next .rxn-navcell.is-current:hover:not(:disabled) { box-shadow: 0 0 0 2px var(--rxn-navy-dark); color: #16202b; }
.rxbp-u-next .rxn-navcell.is-answered.is-current { box-shadow: 0 0 0 2px var(--rxn-btn); }

/* marked flag keeps its own colour and glyph in every state */
.rxbp-u-next .rxn-navcell .rxn-navcell__mark,
.rxbp-u-next .rxn-navcell:hover .rxn-navcell__mark,
.rxbp-u-next .rxn-navcell:focus .rxn-navcell__mark,
.rxbp-u-next .rxn-navcell:active .rxn-navcell__mark { color: #8a5200; }

/* option rows are labels, not buttons, but pin the hover face anyway */
.rxbp-u-next .rxn-option:hover { background: var(--rxn-panel); color: var(--rxn-ink); }

/* focus-visible everywhere: an outline, never colour alone */
.rxbp-u-next .rxn-tool:focus-visible,
.rxbp-u-next .rxn-fbtn:focus-visible,
.rxbp-u-next .rxn-btn:focus-visible,
.rxbp-u-next .rxn-btn--ghost:focus-visible,
.rxbp-u-next .rxn-navcell:focus-visible,
.rxbp-u-next .rxn-mode:focus-visible,
.rxbp-u-next .rxn-elim:focus-visible,
.rxbp-u-next .rxn-close:focus-visible {
  outline: 3px solid var(--rxn-focus); outline-offset: 2px;
}

/* ==========================================================================
   MEDIA CANDIDATE — structure exhibits and enlarge viewer.
   Appended to the canonical B1 stylesheet; nothing above is modified.
   ========================================================================== */

.rxbp-u-next .rxn-figure {
  margin: 14px 0 18px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--rxn-line, #d7dde7);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Aspect ratio is preserved by height:auto; width never exceeds the pane. */
.rxbp-u-next .rxn-figure__img {
  display: block;
  max-width: 100%;
  height: auto;
  /* Never blow a small structure up past its natural size. */
  width: auto;
  background: #fff;
  border-radius: 4px;
}

.rxbp-u-next .rxn-figure__zoom {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--rxn-ink, #12263f);
  background: var(--rxn-soft, #eef2f7);
  border: 1px solid var(--rxn-line, #d7dde7);
  border-radius: 6px;
  padding: 7px 14px;
  cursor: pointer;
  min-height: 36px;
}
.rxbp-u-next .rxn-figure__zoom:hover { background: #e3eaf3; }
.rxbp-u-next .rxn-figure__zoom:focus-visible { outline: 3px solid #2f6fb2; outline-offset: 2px; }

/* ------------------------------------------------------- enlarge viewer */
.rxbp-u-next-viewer-host .rxn-viewer,
.rxn-viewer {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(10, 22, 40, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.rxn-viewer__panel {
  background: #fff;
  border-radius: 10px;
  max-width: min(96vw, 1400px);
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4);
}

.rxn-viewer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  border-bottom: 1px solid #d7dde7;
  background: #f6f8fb;
  flex: 0 0 auto;
}
.rxn-viewer__title { font-size: 14px; font-weight: 700; color: #12263f; }
.rxn-viewer__close {
  font: inherit; font-size: 14px; font-weight: 700;
  background: #12263f; color: #fff;
  border: 0; border-radius: 6px;
  padding: 9px 18px; cursor: pointer; min-height: 40px;
}
.rxn-viewer__close:focus-visible { outline: 3px solid #7fb3ff; outline-offset: 2px; }

/* Scrolls in both axes when the structure is larger than the viewport. */
.rxn-viewer__scroll { overflow: auto; padding: 14px; background: #fff; flex: 1 1 auto; }
.rxn-viewer__img { display: block; margin: 0 auto; max-width: none; height: auto; }
.rxn-viewer__img:focus-visible { outline: 3px solid #2f6fb2; outline-offset: 2px; }

/*
   STACKED LAYOUT: let a FIGURE pane size to its content.

   Below 900px the split becomes a column, so the canonical
   `.rxn-pane--stimulus { flex: 0 0 42% }` resolves to 42% of HEIGHT. That is
   right for a text case pane but leaves a tall structure in a ~276px window
   with an inner scrollbar, so the student sees about half the molecule.
   Only panes carrying a figure are changed; text stimulus panes keep the
   canonical behaviour exactly.
*/
@media (max-width: 900px) {
  .rxbp-u-next .rxn-pane--stimulus.rxn-pane--figure {
    flex: 0 0 auto;
    max-height: none;
    overflow: visible;
  }
}

/* On narrow screens fit to width first; the viewer supplies magnification. */
@media (max-width: 700px) {
  .rxbp-u-next .rxn-figure { padding: 10px; }
  .rxn-viewer { padding: 8px; }
  .rxn-viewer__img { max-width: 200%; }
}

@media (prefers-reduced-motion: reduce) {
  .rxn-viewer { transition: none; }
}

/* ===========================================================================
   RESULT REVIEW + FOCUSED PRACTICE (CANDIDATE)
   ---------------------------------------------------------------------------
   Additive only. Every rule below is a NEW class, so the existing result
   summary, exam view and study feedback render exactly as they did before.
   Scoped under .rxbp-u-next like the rest of this sheet.
   =========================================================================== */

/* ------------------------------------------------- result: review & practice */
.rxbp-u-next .rxn-actionsblock { margin-top: 26px; }
.rxbp-u-next .rxn-actionlist {
  display: grid; gap: 10px; margin-top: 12px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.rxbp-u-next .rxn-action {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: left;
  padding: 14px 16px; border: 1px solid var(--rxn-line); border-radius: var(--rxn-radius-lg);
  background: var(--rxn-bg); color: var(--rxn-ink); font: inherit; cursor: pointer;
  text-decoration: none; min-height: 64px;
}
.rxbp-u-next .rxn-action:hover:not(:disabled) { background: var(--rxn-panel); border-color: var(--rxn-btn); }
.rxbp-u-next .rxn-action__label { font-weight: 700; color: var(--rxn-navy); }
.rxbp-u-next .rxn-action__hint { font-size: var(--rxn-fs-sm); color: var(--rxn-muted); }
.rxbp-u-next .rxn-action--primary { border-color: var(--rxn-btn); box-shadow: inset 3px 0 0 var(--rxn-btn); }
.rxbp-u-next .rxn-action--link .rxn-action__label { color: var(--rxn-btn); }

/* A disabled focused-practice action must still READ, so it is dimmed by
   colour only to the AA floor rather than faded into unreadability. */
.rxbp-u-next .rxn-action:disabled {
  cursor: not-allowed; background: var(--rxn-panel); border-color: var(--rxn-line-soft);
}
.rxbp-u-next .rxn-action:disabled .rxn-action__label { color: var(--rxn-muted); }
.rxbp-u-next .rxn-action:disabled .rxn-action__hint { color: var(--rxn-muted-weak); }

.rxbp-u-next .rxn-notice--result {
  border-color: var(--rxn-line); background: var(--rxn-panel); color: var(--rxn-ink-soft);
}
.rxbp-u-next .rxn-notice--result p { margin: 0 0 8px; }

/* The exam stage is a flex row; the review stage stacks filters above the split. */
.rxbp-u-next .rxn-stage--review { flex-direction: column; }
.rxbp-u-next .rxn-stage--review .rxn-split { flex: 1 1 auto; min-height: 0; }

/* ------------------------------------------------------------ review filters */
.rxbp-u-next .rxn-filters {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding: 10px 24px; border-bottom: 1px solid var(--rxn-line);
  background: var(--rxn-panel); flex: 0 0 auto;
}
.rxbp-u-next .rxn-filter {
  display: inline-flex; gap: 7px; align-items: center; font: inherit;
  font-size: var(--rxn-fs-sm); padding: 6px 12px; border-radius: 20px;
  border: 1px solid var(--rxn-line); background: var(--rxn-bg);
  color: var(--rxn-ink-soft); cursor: pointer;
}
.rxbp-u-next .rxn-filter:hover { border-color: var(--rxn-btn); }
.rxbp-u-next .rxn-filter__count { font-weight: 700; }
/* Selected state is border + weight + aria-pressed, never colour alone. */
.rxbp-u-next .rxn-filter.is-on {
  background: var(--rxn-navy); border-color: var(--rxn-navy); color: #ffffff; font-weight: 700;
}
.rxbp-u-next .rxn-filter.is-on:hover { background: var(--rxn-navy-dark); border-color: var(--rxn-navy-dark); color: #ffffff; }

/* -------------------------------------------------------------- empty state */
.rxbp-u-next .rxn-empty {
  flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px;
  align-items: flex-start; justify-content: center; padding: 40px 24px; max-width: 60ch;
}
.rxbp-u-next .rxn-empty__title { font-size: var(--rxn-fs-lg, 17px); font-weight: 700; margin: 0; color: var(--rxn-ink); }
.rxbp-u-next .rxn-empty p { margin: 0; color: var(--rxn-muted); }

/* ----------------------------------------------------- outcome chip on review */
.rxbp-u-next .rxn-chip--outcome { display: inline-flex; gap: 6px; align-items: center; font-weight: 700; }
.rxbp-u-next .rxn-chip--outcome.is-ok { background: var(--rxn-good-bg); border-color: var(--rxn-good-line); color: var(--rxn-good); }
.rxbp-u-next .rxn-chip--outcome.is-no { background: var(--rxn-bad-bg); border-color: var(--rxn-bad-line); color: var(--rxn-bad); }
.rxbp-u-next .rxn-chip--outcome.is-blank { background: var(--rxn-warn-bg); border-color: #e2c48c; color: var(--rxn-warn); }

/* ------------------------------------------------------- read-only options */
.rxbp-u-next .rxn-options--review > li { margin: 0 0 8px; }
.rxbp-u-next .rxn-rvopt {
  display: flex; gap: 11px; align-items: flex-start; flex-wrap: wrap;
  padding: 9px 11px; border-radius: var(--rxn-radius);
  border: 1px solid var(--rxn-line-soft); background: var(--rxn-bg);
}
.rxbp-u-next .rxn-rvopt.is-correct { background: var(--rxn-good-bg); border-color: var(--rxn-good-line); }
.rxbp-u-next .rxn-rvopt.is-wrong { background: var(--rxn-bad-bg); border-color: var(--rxn-bad-line); }
.rxbp-u-next .rxn-rvopt.is-chosen:not(.is-correct):not(.is-wrong) { border-color: var(--rxn-line); }
.rxbp-u-next .rxn-rvtags { margin-left: auto; display: inline-flex; gap: 6px; flex-wrap: wrap; }
.rxbp-u-next .rxn-tag {
  font-size: var(--rxn-fs-xs); font-weight: 700; letter-spacing: .03em; white-space: nowrap;
  padding: 2px 8px; border-radius: 20px; border: 1px solid var(--rxn-line); background: var(--rxn-bg);
}
.rxbp-u-next .rxn-tag--ok { color: var(--rxn-good); border-color: var(--rxn-good-line); }
.rxbp-u-next .rxn-tag--you { color: var(--rxn-ink-soft); }

/* --------------------------------------------------------- answer summary */
.rxbp-u-next .rxn-answersummary {
  margin: 18px 0 0; max-width: 70ch; display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px; border-radius: var(--rxn-radius-lg);
  border: 1px solid var(--rxn-line); background: var(--rxn-panel);
}
.rxbp-u-next .rxn-answerline { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.rxbp-u-next .rxn-answerline__label { flex: 0 0 auto; font-weight: 700; color: var(--rxn-ink-soft); }
.rxbp-u-next .rxn-answerline__label::after { content: ":"; }
.rxbp-u-next .rxn-answerline__value { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rxbp-u-next .rxn-answerpart { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.rxbp-u-next .rxn-answerpart__letter { flex: 0 0 auto; }
.rxbp-u-next .rxn-answerpart__text { min-width: 0; overflow-wrap: break-word; }
.rxbp-u-next .rxn-answerpart__text p { margin: 0; }
.rxbp-u-next .rxn-answerline.is-key .rxn-answerpart__letter { color: var(--rxn-good); }
.rxbp-u-next .rxn-answerpart--blank { color: var(--rxn-muted); font-style: italic; }

/* ------------------------------------------------------------ review body */
.rxbp-u-next .rxn-feedback--review { display: block; margin-top: 20px; max-width: 70ch; }

/* -------------------------------------------------------- review navigator */
.rxbp-u-next .rxn-navcell--review.is-ok { background: var(--rxn-good-bg); border-color: var(--rxn-good-line); }
.rxbp-u-next .rxn-navcell--review.is-no { background: var(--rxn-bad-bg); border-color: var(--rxn-bad-line); }
.rxbp-u-next .rxn-navcell--review.is-blank { background: var(--rxn-warn-bg); border-color: #e2c48c; }

@media (max-width: 560px) {
  .rxbp-u-next .rxn-filters { padding: 8px 14px; gap: 6px; }
  .rxbp-u-next .rxn-actionlist { grid-template-columns: 1fr; }
  .rxbp-u-next .rxn-rvtags { margin-left: 0; width: 100%; }
}

/* ==========================================================================
   TEXT ENTRY + ORDERED RESPONSE
   Added 2026-08-25 with the approved frontend unfreeze. These two mechanisms
   were already implemented by the server evaluator and already projected to
   the client; only the browser could not draw them. Tokens and focus
   treatment follow the existing rxn-* system exactly.
   ========================================================================== */

.rxn-entry {
	margin: 18px 0 4px;
}

.rxn-entry__label {
	display: block;
	font-weight: 700;
	color: var(--rxn-ink-soft);
	margin: 0 0 6px;
}

.rxn-entry__hint {
	margin: 0 0 10px;
	color: var(--rxn-muted);
	font-size: 0.95em;
}

.rxn-entry__row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.rxn-entry__input {
	flex: 0 1 240px;
	min-height: 44px;
	padding: 10px 12px;
	font: inherit;
	color: var(--rxn-ink);
	background: var(--rxn-bg);
	border: 1px solid var(--rxn-line);
	border-radius: 3px;
}

.rxn-entry__input:focus-visible {
	outline: 2px solid var(--rxn-btn);
	outline-offset: 2px;
	border-color: var(--rxn-btn);
}

.rxn-entry__input:disabled {
	background: var(--rxn-panel);
	color: var(--rxn-muted);
}

.rxn-entry__unit {
	color: var(--rxn-muted);
	font-weight: 600;
	white-space: nowrap;
}

/* --------------------------------------------------------- ordered list */

.rxn-ordered {
	margin: 18px 0 4px;
}

/* Announced to assistive tech, not shown twice on screen. */
.rxn-ordered__live {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.rxn-ordered__list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}

.rxn-ordered__list > li {
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
}

.rxn-ordered__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	background: var(--rxn-bg);
	border: 1px solid var(--rxn-line);
	border-radius: 3px;
}

.rxn-ordered__pos {
	flex: 0 0 auto;
	min-width: 26px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	color: #ffffff;
	background: var(--rxn-toolbar);
	border-radius: 3px;
}

.rxn-ordered__text {
	flex: 1 1 auto;
	color: var(--rxn-ink);
}

.rxn-ordered__text > p:first-child { margin-top: 0; }
.rxn-ordered__text > p:last-child { margin-bottom: 0; }

.rxn-ordered__controls {
	flex: 0 0 auto;
	display: inline-flex;
	gap: 6px;
}

.rxn-ordered__btn {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	line-height: 1;
	color: var(--rxn-btn);
	background: var(--rxn-bg);
	border: 1px solid var(--rxn-line);
	border-radius: 3px;
	cursor: pointer;
}

.rxn-ordered__btn:hover:not(:disabled) {
	background: var(--rxn-panel-2);
	border-color: var(--rxn-btn);
}

.rxn-ordered__btn:focus-visible {
	outline: 2px solid var(--rxn-btn);
	outline-offset: 2px;
}

.rxn-ordered__btn:disabled {
	color: var(--rxn-muted-weak);
	border-color: var(--rxn-line-soft);
	cursor: default;
}

/* ------------------------------------------------- ordered, review screen */

.rxn-ordered__review {
	margin: 4px 0 0;
	padding: 0 0 0 22px;
}

.rxn-ordered__reviewitem {
	margin: 0 0 4px;
	color: var(--rxn-ink);
}

.rxn-ordered__reviewitem > p:first-child { margin-top: 0; }
.rxn-ordered__reviewitem > p:last-child { margin-bottom: 0; }

@media (max-width: 560px) {
	.rxn-entry__input { flex: 1 1 100%; }

	.rxn-ordered__row {
		flex-wrap: wrap;
		gap: 8px;
	}

	.rxn-ordered__text {
		flex: 1 1 100%;
		order: 2;
	}

	.rxn-ordered__controls {
		order: 3;
		margin-left: auto;
	}
}

/* -------------------------------------------- exam pass criterion band ---
   Distinct from .rxn-verdict, which is the Study-mode per-item feedback.
   Rendered only when an exam configuration declares passThresholdPct. */
.rxbp-u-next .rxn-passband {
  display: flex; align-items: center; gap: 10px; margin: 0 0 16px;
  padding: 12px 14px; border-radius: 3px; font-weight: 700;
  border: 1px solid var(--rxn-line); background: var(--rxn-panel);
}
.rxbp-u-next .rxn-passband.is-pass { background: var(--rxn-good-bg); border-color: var(--rxn-good-line); color: var(--rxn-good); }
.rxbp-u-next .rxn-passband.is-fail { background: var(--rxn-bad-bg); border-color: var(--rxn-bad-line); color: var(--rxn-bad); }
.rxbp-u-next .rxn-passband__mark { font-size: 18px; line-height: 1; }

/* Locked completed-review notice. A normal state, deliberately not styled as an error. */
.rxbp-u-next .rxn-reviewlock {
  margin: 0 0 16px; padding: 10px 12px; border-radius: 3px;
  background: var(--rxn-panel); border: 1px solid var(--rxn-line);
  color: var(--rxn-ink-soft); font-size: var(--rxn-fs-sm);
}