/*
 * The exam room.
 *
 * Four rooms use this: the free Diagnostic Test, a question-bank drill, a
 * practice exam and a full-length. They differ in what they enforce — a clock
 * that runs out, a section that closes, an explanation shown at once — but a
 * student moving between them should not feel they have moved between four
 * different sites, so the chrome is defined once, here, rather than four times.
 *
 * Loaded AFTER site.css and BEFORE any page's own <style>, so page-specific
 * rules still win where a page genuinely needs to differ.
 */

.mc-hide { display: none; }
.mc-bar-track { height: 7px; background: var(--line); border-radius: 4px; overflow: hidden; margin: 10px 0 4px; }
.mc-bar-track span { display: block; height: 100%; background: var(--brand); }

/* ---- shared by every marked-up question, wherever it is reviewed ---- */
.mc-exam-q { padding: 18px 0; border-top: 1px solid var(--line); }
.mc-qnum {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-mute);
}
.mc-score-big { display: flex; gap: 34px; flex-wrap: wrap; align-items: baseline; }
.mc-score-big b { font-size: 3rem; letter-spacing: -.03em; line-height: 1; }
.mc-score-cav { color: var(--ink-soft); font-size: .95rem; max-width: 54ch; }

/* ---- question bank ---- */
.mc-cat-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.mc-cat-table th {
  text-align: left; font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-mute);
  padding: 6px 10px; border-bottom: 1px solid var(--line);
}
.mc-cat-table td { padding: 8px 10px; border-bottom: 1px solid var(--line-soft, var(--line)); }
.mc-cat-table td.mc-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Scoped to the table so it never argues with a page's own .mc-cat-code,
   and so the code reads the same on a page that has no such rule. */
.mc-cat-table .mc-cat-code {
  font-weight: 700; color: var(--brand-deep); font-size: .82rem; letter-spacing: .04em;
}
.mc-cat-none { color: var(--ink-mute); }
.mc-acc { font-variant-numeric: tabular-nums; font-weight: 700; }
.mc-acc.low  { color: var(--bad, #b3261e); }
.mc-acc.mid  { color: var(--ink); }
.mc-acc.high { color: var(--good, #2e6b3e); }

.mc-passage {
  background: var(--card-sunk); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 26px; margin-bottom: 18px;
}
.mc-passage h3 { margin: 0 0 4px; font-size: 1rem; }
.mc-plabel {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand-deep);
}
.mc-passage p {
  font-family: var(--serif); font-size: 1.03rem; line-height: 1.8; color: var(--ink);
}
.mc-passage p:last-child { margin-bottom: 0; }
.mc-psource {
  font-family: var(--sans, inherit); font-size: .8rem; font-style: italic;
  color: var(--ink-mute); margin-top: 14px !important;
  padding-top: 10px; border-top: 1px solid var(--line);
}
.mc-verdict { font-weight: 700; margin: 14px 0 6px; }
.mc-verdict.right { color: var(--good, #2e6b3e); }
.mc-verdict.wrong { color: var(--bad, #b3261e); }

/* ---- the room itself: bar, clock, split, navigation ---- */
.xm-steps { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.xm-step {
  font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-mute); background: var(--card-sunk);
}
.xm-step.done { color: var(--good,#2e6b3e); border-color: var(--good,#2e6b3e); }
.xm-step.timed-out { color: var(--bad,#b3261e); border-color: var(--bad,#b3261e); }
.xm-step.current { border-color: var(--brand); background: var(--brand-tint); color: var(--ink); }

.xm-bar {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 18px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--card); z-index: 6;
}
.xm-bar .xm-name { font-weight: 700; font-size: 1.05rem; }
.xm-bar .xm-meta { color: var(--ink-soft); font-size: .88rem; }
.xm-right { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.xm-clock {
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.2rem;
  padding: 5px 13px; border-radius: var(--radius-sm);
  background: var(--card-sunk); border: 1px solid var(--line); color: var(--ink);
}
.xm-elapsed { font-weight: 600; color: var(--ink-soft); font-size: 1.05rem; }
.xm-clock.warn { color: #8a5a00; border-color: #d8a83a; background: #fdf6e3; }
.xm-clock.crit { color: var(--bad,#b3261e); border-color: var(--bad,#b3261e); background: var(--bad-tint,#fdecea); }

.xm-split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.xm-split .mc-passage {
  margin-bottom: 0; position: sticky; top: 72px;
  max-height: calc(100vh - 108px); overflow-y: auto;
}
@media (max-width: 940px) {
  .xm-split { grid-template-columns: 1fr; }
  .xm-split .mc-passage { position: static; max-height: none; }
}

/* Answer choices are a vertical list on the real exam, and beside a passage
   in a half-width pane a two-column grid mangles a long CARS option. Explained
   options need the room even more — site.css already says exactly that for
   .lx-mc.reviewed, which none of these three rooms use. */
/* body.hx, because site.css sets the option grid as `body.hx .lx-options` and a
   bare `.xm-room .lx-options` loses to it on specificity. Every page adds `hx`;
   site.css is built on it throughout. */
body.hx .xm-room .lx-options,
body.hx .mc-exam-q.reviewed .lx-options { grid-template-columns: 1fr; }

.xm-nav { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 24px; }
.xm-nav .xm-spacer { margin-left: auto; }
.hx-btn.xm-flag.on { border-color: #d8a83a; background: #fdf6e3; color: #8a5a00; }

.xm-grid {
  display: grid; grid-template-columns: repeat(auto-fill,minmax(54px,1fr));
  gap: 8px; margin: 16px 0 24px;
}
.xm-cell {
  appearance: none; font: inherit; cursor: pointer; padding: 10px 0; text-align: center;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); color: var(--ink-mute); font-variant-numeric: tabular-nums;
}
.xm-cell:hover { border-color: var(--brand-line); }
.xm-cell.answered { background: var(--brand-tint); border-color: var(--brand); color: var(--ink); font-weight: 700; }
.xm-cell.flagged { box-shadow: inset 0 -4px 0 #d8a83a; }
.xm-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: .82rem; color: var(--ink-mute); margin-bottom: 4px; }
.xm-key { display: inline-block; width: 13px; height: 13px; border-radius: 3px; vertical-align: -2px;
          margin-right: 6px; border: 1px solid var(--line); }
.xm-key.answered { background: var(--brand-tint); border-color: var(--brand); }
.xm-key.flagged { box-shadow: inset 0 -4px 0 #d8a83a; }

.xm-break { text-align: center; padding: 46px 20px 40px; }
.xm-break .xm-clock { font-size: 2.8rem; display: inline-block; margin: 12px 0 10px; padding: 10px 24px; }
.xm-break h3 { margin: 0 0 4px; }
.xm-break p { color: var(--ink-soft); max-width: 52ch; margin: 0 auto 8px; }

.xm-scores { display: grid; grid-template-columns: repeat(auto-fit,minmax(158px,1fr)); gap: 12px; margin-top: 18px; }
.xm-score {
  background: var(--card-sunk); border: 1px solid var(--line); border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm); padding: 14px 16px;
}
.xm-score.unscored { border-left-color: var(--line-strong,var(--line)); opacity: .75; }
.xm-sname { font-size: .72rem; text-transform: uppercase; letter-spacing: .09em;
            color: var(--ink-mute); font-weight: 700; margin-bottom: 7px; }
.xm-score b { display: block; font-size: 2.1rem; line-height: 1; letter-spacing: -.02em; }
.xm-sdet { font-size: .82rem; color: var(--ink-soft); margin-top: 7px; }
.xm-flagnote { font-size: .82rem; color: #8a5a00; }

/* ==================================================== exam-room tools ====
 *
 * Highlighter, calculator, and the distraction-free mode that puts the site's
 * navigation away while a test is open. Paired with assets/exam-room.js.
 */

.xm-tools { display: flex; gap: 6px; align-items: center; }
.xm-tool { position: relative; display: inline-flex; }

.xm-tool-btn {
  appearance: none; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); color: var(--ink-soft);
}
.xm-tool-btn:hover { border-color: var(--brand-line); color: var(--ink); }
.xm-tool-btn.on {
  background: #fdf6e3; border-color: #d8a83a; color: #8a5a00;
}

/* ---- the highlighter's colour popover ---- */
.xm-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 30;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px; min-width: 186px;
  box-shadow: 0 10px 30px rgba(9, 18, 32, .14);
}
.xm-pop.xm-hide { display: none; }
.xm-pop-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 9px;
}
.xm-swatches { display: flex; gap: 8px; margin-bottom: 10px; }
.xm-swatch {
  appearance: none; cursor: pointer; width: 34px; height: 26px; padding: 0;
  border: 2px solid var(--line); border-radius: 6px;
}
.xm-swatch:hover { border-color: var(--ink-mute); }
.xm-swatch.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ink); }
.xm-swatch-yellow { background: #ffef9c; }
.xm-swatch-green  { background: #b9f0c8; }
.xm-swatch-pink   { background: #ffc9de; }

.xm-pop-action {
  appearance: none; cursor: pointer; font: inherit; font-size: .84rem;
  display: block; width: 100%; text-align: left; padding: 6px 8px;
  margin-top: 2px; border: 0; border-radius: 5px;
  background: transparent; color: var(--ink-soft);
}
.xm-pop-action:hover { background: var(--card-sunk); color: var(--ink); }

/* ---- the marks themselves ---- */
.xm-mark { background: #ffef9c; color: inherit; padding: 0; border-radius: 2px; }
.xm-mark-yellow { background: #ffef9c; }
.xm-mark-green  { background: #b9f0c8; }
.xm-mark-pink   { background: #ffc9de; }

/* While a colour is loaded, say so with the cursor over anything markable. */
body.xm-arming [data-xm-region] { cursor: text; }
body.xm-arming [data-xm-region]::selection,
body.xm-arming [data-xm-region] *::selection { background: #ffe066; }

/* ---- the calculator ---- */
.xm-calc {
  position: fixed; right: 24px; bottom: 24px; z-index: 400; width: 232px;
  background: var(--card); border: 1px solid var(--line-strong, var(--line));
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 18px 44px rgba(9, 18, 32, .22);
}
.xm-calc-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; background: var(--card-sunk);
  border-bottom: 1px solid var(--line);
  font-size: .74rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-mute);
}
.xm-calc-close {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font-size: 1.15rem; line-height: 1; color: var(--ink-mute); padding: 0 2px;
}
.xm-calc-close:hover { color: var(--ink); }
.xm-calc-screen {
  padding: 14px 14px 12px; text-align: right;
  font-size: 1.6rem; font-variant-numeric: tabular-nums;
  overflow-x: auto; white-space: nowrap;
}
.xm-calc-pad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); }
.xm-calc-key {
  appearance: none; cursor: pointer; font: inherit; font-size: 1rem;
  border: 0; padding: 13px 0; background: var(--card); color: var(--ink);
}
.xm-calc-key:hover { background: var(--card-sunk); }
.xm-calc-key.op { color: var(--brand-deep); font-weight: 700; }
.xm-calc-key.wide { grid-column: span 2; }
.xm-calc-note {
  margin: 0; padding: 10px 12px; font-size: .76rem; line-height: 1.5;
  color: var(--ink-mute); background: var(--card-sunk);
  border-top: 1px solid var(--line);
}

/* ---- distraction-free ----
 *
 * An exam is not a page to browse, so the navigation rail is put away while one
 * is open. Every room keeps its own way out, so nobody is trapped.
 */
body.xm-focus .hx-rail,
body.xm-focus .hx-topbar { display: none; }
body.xm-focus .hx-content { margin-left: 0; }
body.xm-focus .site-footer { display: none; }

@media (max-width: 900px) {
  .xm-calc { right: 12px; bottom: 12px; width: 206px; }
}

/* The step at the foot of a topic: where the course goes next. */
.mc-next { margin-top: 18px; border-left: 3px solid var(--brand); }
.mc-next h3 { margin: 4px 0 2px; }
.mc-next .hx-btn { margin-top: 14px; }

/* CARS practice, shown under the CARS topics in Content Prep. */
.mc-cars-practice { margin-top: 16px; border-left: 3px solid var(--brand); }
.mc-cars-practice .mc-qnum { margin-bottom: 4px; }
