/* Test-day interface, matched to the official full-length exam: blue title bar, light-blue tool bar,
   gray Pause bar, two white panes on blue, blue footer; Verdana content, Tahoma footer. Three color
   schemes (body.scheme-default, -salmon, -black) recolor it the way the exam's menu does. */

:root {
  --x-blue: #006daa;
  --x-light: #80aee1;
  --x-gray: #a6a6a6;
  --x-pane: #fff;
  --x-ink: #000;
  --x-bar-ink: #fff;
  --x-rule: #fff;
  --x-hot: #ff0;
  --x-radio: #0075ff;
  --x-scheme-ink: #ff0;
  --x-scheme-line: #000;
  --x-pause-bg: #f4f4f4;
  --x-pause-ink: #000;
  --x-split: var(--x-blue);
  /* the explanation and our extras */
  --line: #d2d2d2;
  --btn-line: #dbdbdb;
  --ink: #222;
  --navy: #002c57;
  --sel-bg: #ccd5dd;
  --ok: #2e7d32;
  --bad: #c62828;
  --chrome-font: Arial, Helvetica, sans-serif;
  --content-font: Verdana, Geneva, Tahoma, sans-serif;
  --foot-font: Tahoma, Verdana, Geneva, sans-serif;
}
body.scheme-salmon {
  --x-blue: #fdd3c5;
  --x-light: #fdd3c5;
  --x-pane: #fdd3c5;
  --x-ink: #000;
  --x-bar-ink: #000;
  --x-rule: #000;
  --x-radio: #000;
  --x-scheme-ink: #000;
  --x-scheme-line: #000;
  --x-pause-bg: #fdd3c5;
  --x-pause-ink: #000;
  --x-split: #000;
}
body.scheme-black {
  --x-blue: #000;
  --x-light: #000;
  --x-pane: #000;
  --x-ink: #fff;
  --x-bar-ink: #fff;
  --x-rule: #fff;
  --x-radio: #fff;
  --x-scheme-ink: #fff;
  --x-scheme-line: #fff;
  --x-pause-bg: #000;
  --x-pause-ink: #fff;
  --x-split: #fff;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body.tdi { font-family: var(--content-font); color: var(--x-ink); background: var(--x-blue); overflow: hidden; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 1px dotted currentColor; outline-offset: 1px; }
.ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
u { text-decoration: underline; text-underline-offset: 2px; }

.tdi-app { height: 100vh; display: flex; flex-direction: column; }

/* ---------- title bar ---------- */
.x-head { flex: none; height: 45px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 20px; background: var(--x-blue); color: var(--x-bar-ink); }
.x-title { min-width: 0; margin: 0; font: 400 21.33px/1.2 var(--content-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x-head-right { flex: none; display: flex; flex-direction: column; align-items: flex-end; align-self: flex-start; padding-top: 2px; }
.x-hbtn { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 1px; border: 1px solid transparent; background: none; font-size: 14.67px; line-height: 20px; color: inherit; cursor: pointer; }
.x-hbtn .ic { width: 15px; height: 15px; stroke-width: 2.2; }
.x-hbtn.is-hidden .x-hbtn-text { display: none; }
.x-hbtn:hover, .x-hbtn:focus-visible { border-color: var(--x-hot); outline: none; }
.tdi-time { font-variant-numeric: tabular-nums; }
.x-rule { flex: none; height: 2px; margin: 0; border: 0; background: var(--x-rule); }

/* ---------- tool bar ---------- */
.x-tools { flex: none; height: 30px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px 0 18px; background: var(--x-light); color: var(--x-bar-ink); font: 16px var(--content-font); }
.x-tools-left, .x-tools-right { display: flex; align-items: center; gap: 6px; }
.x-tools-right { gap: 16px; }
.x-link { display: inline-flex; align-items: center; gap: 0; height: 25px; padding: 0 9px; border: 1px solid transparent; background: none; font: inherit; color: inherit; white-space: nowrap; cursor: pointer; }
.x-link .ic { width: 16px; height: 16px; margin-right: 5px; stroke-width: 1.8; }
.x-link .ic:last-child { margin: 0 0 0 7px; }
.x-link:hover:not(:disabled), .x-link:focus-visible { border-color: var(--x-hot); color: var(--x-hot); outline: none; }
.x-link:disabled { opacity: 0.5; cursor: default; }
.x-link[hidden] { display: none; }
/* Flagged: the flag fills yellow. */
#flagBtn.is-on .ic { fill: var(--x-hot); color: var(--x-hot); }

.tdi-hl { position: relative; display: flex; align-items: center; gap: 4px; }
.x-swatch-btn { display: inline-flex; align-items: center; gap: 2px; height: 25px; padding: 0 2px; border: 1px solid transparent; background: none; cursor: pointer; color: inherit; }
.x-swatch-btn:hover, .x-swatch-btn:focus-visible { border-color: var(--x-hot); outline: none; }
.x-swatch { width: 19px; height: 19px; border: 1px solid #fff; }
.x-caret { width: 12px; height: 12px; }
.x-hl-menu { position: absolute; top: 28px; left: 0; z-index: 30; width: 212px; padding: 5px; border: 1px solid #000; background: #006daa; color: #fff; }
.x-hl-menu[hidden] { display: none; }
.x-hl-colors { display: flex; gap: 5px; margin-bottom: 5px; }
.x-hl-menu button { display: flex; align-items: center; gap: 6px; padding: 2px 0; border: 1px solid transparent; background: none; color: #fff; cursor: pointer; }
.x-hl-menu button:hover, .x-hl-menu button:focus-visible { border-color: var(--x-hot); outline: none; }
.x-hl-colors i { display: block; width: 23px; height: 23px; }
.x-hl-colors button.is-on i { box-shadow: 0 0 0 2px #fff; }
.x-hl-remove { width: 100%; font-size: 16px; }
.x-hl-remove i { width: 23px; height: 23px; border: 1.6px solid #fff; }
.x-hl-remove span { text-decoration: underline; }

.x-scheme { position: relative; }
.x-scheme-btn { width: 202px; height: 27px; display: flex; align-items: center; justify-content: space-between; gap: 2px; padding: 0 4px; white-space: nowrap; overflow: hidden; border: 1px solid var(--x-scheme-line); background: none; font: 16px var(--content-font); color: var(--x-scheme-ink); cursor: pointer; }
.x-scheme-menu { position: absolute; top: 26px; right: 0; z-index: 30; width: 202px; border: 1px solid #555; background: #fff; }
.x-scheme-menu[hidden] { display: none; }
.x-scheme-menu button { display: block; width: 100%; padding: 1px 6px; border: 0; background: #fff; font: 16px var(--content-font); color: #000; text-align: left; cursor: pointer; }
.x-scheme-menu button:hover, .x-scheme-menu button.is-on { background: #d6d6d6; }

/* ---------- Pause bar, with our Review Answer switch and question timer at its far left ---------- */
.x-sys { position: relative; flex: none; min-height: 28px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 3px 8px; background: var(--x-gray); color: #000; font: 12.5px var(--chrome-font); }
.x-pause { position: absolute; left: 50%; top: 3px; height: 22px; padding: 0 12px; transform: translateX(-50%); border: 0; background: var(--x-pause-bg); font: 16px var(--content-font); color: var(--x-pause-ink); cursor: pointer; }
.x-pause:hover, .x-pause:focus-visible, .x-pause-like:hover, .x-pause-like:focus-visible { outline: 1px solid #000; }
/* Done Practicing: the same button as Pause. */
.x-pause-like { height: 22px; padding: 0 12px; border: 0; background: var(--x-pause-bg); font: 16px var(--content-font); color: var(--x-pause-ink); white-space: nowrap; cursor: pointer; }
.x-extras { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: calc(50% - 50px); } /* stays clear of the centered Pause */
.x-keys { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #333; }
.x-keys b { font-weight: 600; color: #000; }
.x-mini { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border: 1px solid #7d7d7d; border-radius: 2px; background: #e6e6e6; font: 12.5px var(--chrome-font); color: #111; white-space: nowrap; cursor: pointer; }
.x-mini .ic { width: 14px; height: 14px; }
.x-mini:hover:not(:disabled) { background: #f4f4f4; }
.x-mini[hidden] { display: none; }
#noteBtn.has-note { background: #fff7c2; }
.x-qtime { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.tdi-time.is-hidden { visibility: hidden; }
.tdi-eye { display: inline-flex; padding: 0; border: 0; background: none; color: #333; cursor: pointer; }
.tdi-eye .ic { width: 16px; height: 16px; }
.tdi-review { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.tdi-switch { position: relative; width: 46px; height: 18px; padding: 0; border: 1px solid #7d7d7d; border-radius: 2px; background: #e6e6e6; cursor: pointer; flex: none; }
.tdi-knob { position: absolute; top: 1px; left: 1px; width: 20px; height: 14px; background: #fff; border: 1px solid #aaa; border-radius: 1px; transition: left 0.15s ease; }
.tdi-switch-text { position: absolute; top: 50%; right: 5px; transform: translateY(-50%); font-size: 10px; color: #444; }
.tdi-switch[aria-checked='true'] { background: var(--navy); border-color: var(--navy); }
.tdi-switch[aria-checked='true'] .tdi-knob { left: 23px; border-color: #fff; }
.tdi-switch[aria-checked='true'] .tdi-switch-text { right: auto; left: 5px; color: #fff; }
.tdi-switch:disabled { cursor: default; opacity: 0.6; }
.tdi-conf { display: flex; align-items: center; gap: 3px; }
.tdi-conf-label { margin-right: 2px; white-space: nowrap; }
.tdi-conf-btn { height: 22px; display: inline-flex; align-items: center; gap: 2px; padding: 0 5px; border: 1px solid #7d7d7d; border-radius: 2px; background: #e6e6e6; font-size: 12px; color: #111; cursor: pointer; }
.tdi-conf-btn .ic { width: 13px; height: 13px; stroke-width: 2.2; }
.tdi-conf-btn.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.tdi-conf-btn:disabled { cursor: default; }
.tdi-conf-btn:disabled:not(.is-on) { opacity: 0.5; }
.tdi-next-wrap { position: relative; display: flex; align-items: center; gap: 8px; }
.tdi-confirm { height: 22px; min-width: 70px; padding: 0 12px; border: 0; border-radius: 2px; background: var(--navy); font: 700 12.5px var(--chrome-font); color: #fff; cursor: pointer; }
.tdi-confirm:hover:not(:disabled) { background: #0a3a6e; }
.tdi-confirm:disabled { background: #8e98a3; cursor: default; }
.tdi-fb[aria-expanded="true"] { background: #fff; }
.x-sys-right { display: flex; align-items: center; gap: 8px; }
.tdi-fb-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: min(380px, calc(100vw - 32px)); display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; padding: 10px; border: 1px solid var(--btn-line); border-radius: 6px; background: #fff; box-shadow: 0 8px 24px rgba(15, 23, 33, 0.18); }
.tdi-fb-pop[hidden] { display: none; }
.tdi-fb-pop textarea { width: 100%; min-height: 64px; resize: vertical; padding: 6px 8px; border: 1px solid var(--btn-line); border-radius: 4px; font: 14px var(--chrome-font); }
.tdi-fb-send { height: 34px; padding: 0 16px; border: 0; border-radius: 3px; background: var(--navy); color: #fff; font-size: 14px; cursor: pointer; }
.tdi-fb-send:disabled { background: #9aa6b2; cursor: default; }
.tdi-fb-msg { grid-column: 1 / -1; margin: 0; font-size: 12.5px; color: #555; }
.tdi-fb-msg:empty { display: none; }

/* Under the answer choices (Review Answer on, a choice picked): confidence, then Review (styled like
   the footer's Next), Notes and Feedback, one line each. */
.x-qa-line { display: flex; align-items: center; gap: 12px; }
/* Confidence, Notes and Feedback in the question's own font and size. */
.x-qactions .tdi-conf, .x-qactions .tdi-conf-label, .x-qactions .tdi-conf-btn, .x-qactions .x-mini { font: 16px var(--content-font); }
.x-qactions .tdi-conf { gap: 6px; }
.x-qactions .tdi-conf-btn, .x-qactions .x-mini { height: 30px; gap: 5px; padding: 0 10px; }
.x-qactions .tdi-conf-btn .ic, .x-qactions .x-mini .ic { width: 16px; height: 16px; }
.tdi-panel textarea#noteText { font: 16px/24px var(--content-font); }
/* A fixed size, so switching between Review and Hide only changes the word. */
.x-review-btn { width: 107px; height: 36px; justify-content: center; padding: 0; background: var(--x-blue); font: 18.67px var(--foot-font); color: var(--x-bar-ink); }
.x-review-btn:disabled { opacity: 0.55; }
.x-qactions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 14px 0 6px; padding-top: 12px; border-top: 1px solid #d2d2d2; font: 12.5px var(--chrome-font); color: #111; }
.x-qactions[hidden] { display: none; }
.scheme-black .x-qactions { color: #fff; border-color: #555; }

/* ---------- the two panes ---------- */
.tdi-main { flex: 1; min-height: 0; display: flex; gap: 6px; background: var(--x-split); }
.tdi-left, .tdi-right { flex: 1 1 0; min-width: 0; overflow: auto; background: var(--x-pane); color: var(--x-ink); }
.tdi-left-inner, .tdi-right-inner { padding: 40px; font: 16px/24px var(--content-font); }
/* Scroll bars in the exam's style: gray thumb, light-blue arrow buttons. */
.tdi-left::-webkit-scrollbar, .tdi-right::-webkit-scrollbar, .x-win-body::-webkit-scrollbar { width: 17px; height: 17px; }
.tdi-left::-webkit-scrollbar-track, .tdi-right::-webkit-scrollbar-track, .x-win-body::-webkit-scrollbar-track { background: var(--x-pane); }
.tdi-left::-webkit-scrollbar-thumb, .tdi-right::-webkit-scrollbar-thumb, .x-win-body::-webkit-scrollbar-thumb { background: #808080; border: 0; }
.tdi-left::-webkit-scrollbar-button, .tdi-right::-webkit-scrollbar-button, .x-win-body::-webkit-scrollbar-button { display: block; width: 17px; height: 17px; background: #80aee1 no-repeat center / 9px 9px; }
.tdi-left::-webkit-scrollbar-button:vertical:decrement, .tdi-right::-webkit-scrollbar-button:vertical:decrement, .x-win-body::-webkit-scrollbar-button:vertical:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 8h8L5 2z' fill='%23000'/%3E%3C/svg%3E"); }
.tdi-left::-webkit-scrollbar-button:vertical:increment, .tdi-right::-webkit-scrollbar-button:vertical:increment, .x-win-body::-webkit-scrollbar-button:vertical:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 2h8L5 8z' fill='%23000'/%3E%3C/svg%3E"); }
.tdi-left::-webkit-scrollbar-button:horizontal:decrement, .tdi-right::-webkit-scrollbar-button:horizontal:decrement, .x-win-body::-webkit-scrollbar-button:horizontal:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M8 1v8L2 5z' fill='%23000'/%3E%3C/svg%3E"); }
.tdi-left::-webkit-scrollbar-button:horizontal:increment, .tdi-right::-webkit-scrollbar-button:horizontal:increment, .x-win-body::-webkit-scrollbar-button:horizontal:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 1v8L8 5z' fill='%23000'/%3E%3C/svg%3E"); }
.tdi-left::-webkit-scrollbar-button:vertical:start:increment, .tdi-left::-webkit-scrollbar-button:vertical:end:decrement,
.tdi-right::-webkit-scrollbar-button:vertical:start:increment, .tdi-right::-webkit-scrollbar-button:vertical:end:decrement,
.x-win-body::-webkit-scrollbar-button:vertical:start:increment, .x-win-body::-webkit-scrollbar-button:vertical:end:decrement,
.tdi-left::-webkit-scrollbar-button:horizontal:start:increment, .tdi-left::-webkit-scrollbar-button:horizontal:end:decrement,
.tdi-right::-webkit-scrollbar-button:horizontal:start:increment, .tdi-right::-webkit-scrollbar-button:horizontal:end:decrement,
.x-win-body::-webkit-scrollbar-button:horizontal:start:increment, .x-win-body::-webkit-scrollbar-button:horizontal:end:decrement { display: none; }
.tdi-left::-webkit-scrollbar-corner, .tdi-right::-webkit-scrollbar-corner { background: var(--x-pane); }

/* Passage: "Passage 1 (Questions 1-4)", then indented paragraphs. */
.x-passage-head { margin: 0 0 10px; font: 700 18.67px/28px var(--content-font); }
.tdi-passage p { margin: 0 0 10px; text-indent: 24px; }
.x-discrete-note { margin: 0; font-weight: 700; }
/* The source line under a passage, as the exam sets it: small, upright, journal in italics. */
.tdi-passage p.x-cite { margin: 40px 0 0; text-indent: 0; font-size: 13px; line-height: 30px; }
.hl-zone p { margin: 0 0 10px; }
.hl-zone p:last-child { margin-bottom: 0; }
.hl-zone table { border-collapse: collapse; margin: 6px 0 16px; font-size: 15px; text-indent: 0; }
.hl-zone th, .hl-zone td { border: 1px solid #bdbdbd; padding: 4px 10px; text-align: center; }
.hl-zone th { background: #f4f5f6; color: #000; }
.hl-zone img { max-width: 100%; }
.x-qhead { margin: 0 0 10px; font: 700 16px/19px var(--content-font); color: #333; }
.scheme-salmon .x-qhead { color: #000; }
.scheme-black .x-qhead { color: #fff; }
.tdi-qstem { margin-bottom: 10px; }
.tdi-missing { color: #8a1c1c; }

/* highlights (yellow and blue in the menu; green and pink still show on older tests) and strikethrough */
.hl-yellow { background: #ff0; }
.hl-blue { background: #42c0fb; }
.hl-green { background: #b5f0a5; }
.hl-pink { background: #ffc1df; }
mark.hl { color: #000; padding: 0; }
.x-strike { text-decoration: line-through; text-decoration-thickness: 1px; }
body.erasing .hl-zone mark.hl { cursor: pointer; }
body.erasing .hl-zone mark.hl:hover { outline: 1px dashed #555; }

/* answer choices: blue radio, bold "A.", the text */
.tdi-choices { display: flex; flex-direction: column; gap: 5px; margin: 0 0 10px; }
.tdi-choice { position: relative; display: flex; align-items: flex-start; gap: 0; padding: 5px 0; line-height: 22.4px; cursor: pointer; }
.tdi-choice:focus-visible { outline: 1px dotted currentColor; }
.tdi-radio { flex: none; width: 13px; height: 13px; margin: 5px 9px 0 3px; border: 1.5px solid var(--x-radio); border-radius: 50%; }
.tdi-choice.is-selected .tdi-radio { background: radial-gradient(circle, var(--x-radio) 0 3.2px, transparent 3.8px); box-shadow: 0 0 0 2px var(--x-pane), 0 0 0 3px var(--x-ink); }
.tdi-letter { flex: none; min-width: 30px; font: 700 15px/22.4px var(--content-font); color: #353535; }
.scheme-salmon .tdi-letter { color: #000; }
.scheme-black .tdi-letter { color: #fff; }
.tdi-ctext { flex: 1; min-width: 0; }
.tdi-ctext.hl-zone p { margin: 0; }
.tdi-choice.is-struck .tdi-ctext { text-decoration: line-through; }
.tdi-choice.is-locked { cursor: default; }
/* Review Answer (ours): the key in green, a wrong pick in red. */
.tdi-choice.is-answer { box-shadow: inset 4px 0 0 var(--ok); padding-left: 8px; }
.tdi-choice.is-wrong { box-shadow: inset 4px 0 0 var(--bad); padding-left: 8px; }
.tdi-pct { flex: none; margin-left: 10px; font: 13px var(--chrome-font); color: #6b6b6b; }
.tdi-cap { display: none; }

/* ---------- footer ---------- */
.x-foot { flex: none; height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; background: var(--x-blue); color: var(--x-bar-ink); font: 18.67px var(--foot-font); }
.x-foot-left, .x-foot-right { display: flex; align-items: center; }
.x-foot-btn { height: 30px; padding: 0 10px; font: 18.67px var(--foot-font); }
.x-foot-btn .ic { width: 17px; height: 17px; }
#ptBtn, #endSectionBtn { position: relative; padding-left: 4px; margin-right: 10px; }
#ptBtn::after, #endSectionBtn::after { content: ''; position: absolute; right: -7px; top: 0; width: 1px; height: 30px; background: var(--x-bar-ink); }
.x-foot-right .x-foot-btn { position: relative; margin-left: 12px; }
.x-foot-right .x-foot-btn::before { content: ''; position: absolute; left: -7px; top: 0; width: 1px; height: 30px; background: var(--x-bar-ink); }

/* ---------- Section Review ---------- */
.x-review { flex: 1; min-height: 0; overflow: auto; padding: 0 32px 24px; background: #f2f3f5; color: #000; font-family: Arial, Helvetica, sans-serif; }
.x-review[hidden] { display: none; }
.x-review-head { display: flex; align-items: center; justify-content: space-between; padding: 32px 32px 0 28px; }
.x-review-head h2 { margin: 0; font: 700 28px var(--foot-font); }
.x-review-all { padding: 8px 16px; border: 0; border-radius: 6px; background: #007394; font: 18.67px var(--foot-font); color: #fff; cursor: pointer; }
.x-review-all:hover { background: #005f7a; }
.x-review-tabs { display: flex; margin: 40px 0 30px; border-bottom: 0.8px solid #007394; }
.x-review-tabs button { flex: 1; padding: 0 0 6px; border: 0; border-bottom: 2.4px solid transparent; background: none; font: 700 16px Arial, sans-serif; color: #333; cursor: pointer; }
.x-review-tabs button.is-on { border-bottom-color: #007394; color: #007394; }
.x-review-table { width: 100%; border-collapse: collapse; border-radius: 8px; overflow: hidden; background: #fff; }
.x-review-table th { padding: 22px 16px; font: 700 12px Arial, sans-serif; letter-spacing: 0.12em; color: #666; text-align: left; text-transform: uppercase; }
.x-review-table td { height: 55px; padding: 0 16px; border-top: 1px solid #e4e4e4; font-size: 16px; }
.x-pill { display: inline-block; padding: 1px 12px; border-radius: 14px; font-weight: 700; }
.x-pill.complete { background: #f1f7e5; color: #1e6500; }
.x-pill.unseen { background: #ffecb4; color: #ab4c03; }
.x-pill.incomplete { background: #fce8e6; color: #c21d00; }
.x-review-flag { display: inline-flex; align-items: center; gap: 6px; }
.x-review-flag .ic { width: 22px; height: 22px; fill: #5aa0d0; color: #5aa0d0; }
.x-review-go { border: 0; background: none; font: 700 16px Arial, sans-serif; color: #007394; cursor: pointer; }
.x-review-go:hover { text-decoration: underline; }
body.on-review .tdi-main, body.on-review .x-sys, body.on-review .x-tools-left > *, body.on-review #flagBtn, body.on-review #counterBtn { display: none; }
body.on-review .x-review { display: block; }

/* ---------- exam windows: Navigation, End Section, Periodic Table ---------- */
.tdi-modal.x-modal-wrap { background: transparent; }
.x-win { display: flex; flex-direction: column; border: 1px solid #000; background: #006daa; color: #fff; font-family: var(--foot-font); }
.x-win[hidden] { display: none; }
.x-win-head { flex: none; height: 29px; display: flex; align-items: center; justify-content: space-between; padding: 0 4px 0 10px; border-bottom: 1px solid #fff; font-size: 18.67px; }
.x-win-head > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.x-win-head .ic { width: 18px; height: 18px; }
.x-win-head b { font-weight: 700; }
.x-win-x { width: 20px; height: 20px; display: grid; place-items: center; padding: 0; border: 1.5px solid #fff; background: none; color: #fff; cursor: pointer; }
.x-win-x .ic { width: 14px; height: 14px; stroke-width: 3; }
.x-win-body { flex: 1; min-height: 0; overflow: auto; background: #fff; color: #000; }
.x-win-foot { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 4px 10px; font-size: 16px; }
.x-win-close { padding: 0 3px; border: 0.8px solid #fff; background: none; font: 17.33px var(--foot-font); color: #fff; cursor: pointer; }
.x-win-close:hover, .x-win-close:focus-visible { border-color: var(--x-hot); color: var(--x-hot); outline: none; }

.x-nav-win { width: min(965px, calc(100vw - 32px)); height: min(488px, calc(100vh - 60px)); }
.x-nav-body { margin: 0 10px; }
.x-nav-table { width: 100%; border-collapse: collapse; font: 14px var(--foot-font); }
.x-nav-table th { position: sticky; top: 0; height: 33px; background: #80aee1; color: #fff; font: 700 16px var(--foot-font); cursor: pointer; white-space: nowrap; }
.x-nav-table th .x-sort { width: 12px; height: 12px; margin-left: 4px; vertical-align: -1px; visibility: hidden; }
.x-nav-table th.is-sorted .x-sort { visibility: visible; }
.x-nav-table th:nth-child(1) { width: 39%; }
.x-nav-table th:nth-child(2) { width: 13%; }
.x-nav-table td { height: 32px; padding: 0 5px; border-top: 0.8px solid #000; border-right: 0.8px solid #000; color: #000; cursor: pointer; }
.x-nav-table td:last-child { border-right: 0; text-align: center; }
.x-nav-table tbody tr:last-child td { border-bottom: 0.8px solid #000; }
.x-nav-table tbody tr:nth-child(odd) td { background: #f4f4f4; }
.x-nav-table tbody tr:nth-child(even) td { background: #fff; }
.x-nav-table tbody tr.is-current td { background: #fffd67; }
.x-nav-table tbody tr:hover td { background: #e2ecf7; }
.x-nav-table td.unseen, .x-nav-table td.incomplete { color: #f00; }
.x-nav-table td .ic { width: 16px; height: 16px; fill: #1f5fa0; color: #1f5fa0; }

.x-end-win { width: min(700px, calc(100vw - 32px)); }
.x-end-body { padding: 22px 70px 10px; font: 16px/22px var(--content-font); }
.x-end-body p { margin: 0 0 22px; }
.x-end-actions { display: flex; justify-content: center; gap: 6px; }

.x-pt-win { position: fixed; z-index: 45; left: 94px; top: 55px; width: min(1029px, calc(100vw - 16px)); height: min(468px, calc(100vh - 70px)); resize: both; overflow: hidden; }
.x-pt-head { background: #80aee1; cursor: move; touch-action: none; user-select: none; }
.x-pt-win.is-front .x-pt-head { background: #006daa; }
.x-pt-body { padding: 12px 12px 16px; }
.x-pt-title { margin: 6px 0 14px; font: 700 26px Arial, Helvetica, sans-serif; text-align: center; }

/* explanation */
.tdi-sol { max-width: 640px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); font-family: var(--content-font); font-size: 15px; line-height: 1.6; color: #1d1d1d; }
.tdi-sol-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 14px; font-family: var(--chrome-font); font-size: 15px; }
.tdi-verdict { padding: 3px 10px; border-radius: 3px; color: #fff; font-weight: 700; }
.tdi-verdict.ok { background: var(--ok); }
.tdi-verdict.bad { background: var(--bad); }
.tdi-verdict.none { background: #6f6f6f; }
.tdi-sol-body p { margin: 0 0 12px; }
.tdi-sol-body hr.tdi-sol-break { margin: 18px 0; border: 0; border-top: 1px solid var(--line); }
.tdi-sol-body ul { margin: 0 0 12px; padding-left: 22px; }
.tdi-sol-body li { margin-bottom: 6px; }
.tdi-sol-body table { border-collapse: collapse; margin: 8px 0 14px; font-size: 14px; }
.tdi-sol-body th, .tdi-sol-body td { border: 1px solid #c4c4c4; padding: 5px 9px; text-align: center; }
.tdi-sol-body th { background: #f2f4f6; }
.tdi-sol-body p.skills { margin: 12px 0; padding: 9px 12px; border-left: 3px solid #1d4f91; border-radius: 0 3px 3px 0; background: #f2f6fb; font-size: 14.5px; line-height: 1.55; }
.tdi-hint { margin-top: 22px; font-size: 14px; color: #6a6a6a; }
.tdi-locked { max-width: 488px; display: flex; align-items: flex-start; gap: 9px; margin-top: 22px; padding: 9px 12px; border: 1px solid #d5dbe2; border-radius: 3px; background: #f5f7f9; color: #39424c; font-size: 14px; line-height: 1.45; }
.tdi-locked .ic { width: 17px; height: 17px; margin-top: 1px; color: #5b6673; stroke-width: 1.8; }
.tdi-link-inline { padding: 0; border: 0; background: none; color: #1d4f91; font: inherit; text-decoration: underline; cursor: pointer; }
/* loot: the "Take to test" cards, collected into My Deck */
.loot-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; margin: 22px 0 8px; }
.loot-bar h2, .loot-bar h3, .loot-bar h4 { margin: 0; }
.loot-side { display: flex; align-items: center; gap: 10px; }
.loot-total { font-family: var(--chrome-font); font-size: 12.5px; color: #6a6a6a; }
.loot-all, .loot-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #d9a600; background: #fff8e1; color: #6b4e00; font-family: var(--chrome-font); font-weight: 700; cursor: pointer; white-space: nowrap; }
.loot-all { height: 30px; padding: 0 12px; border-radius: 15px; font-size: 13.5px; }
.loot-all[hidden] { display: none; } /* a question with only the student's own row */
.loot-btn { height: 26px; padding: 0 10px; border-radius: 13px; font-size: 12.5px; }
/* Ask about a card: a quiet button after Collect, and the box it opens (public/js/test.js openAsk). */
.loot-ask { height: 26px; margin-left: 6px; padding: 0 10px; border: 1px solid #b9c7d8; border-radius: 13px; background: #fff; color: #1d4f91; font-family: var(--chrome-font); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.loot-ask:hover, .loot-ask:focus-visible { border-color: #1d4f91; background: #edf3fb; }
.ask-pop { position: absolute; z-index: 80; width: 300px; padding: 10px 12px; border: 1px solid #c9d1da; border-radius: 8px; background: #fff; box-shadow: 0 10px 28px rgba(0, 0, 0, .18); font-family: var(--chrome-font); }
.ask-pop[hidden] { display: none; }
.ask-pop-h { margin: 0 0 6px; font-weight: 700; font-size: 13.5px; color: #1d4f91; }
.ask-pop textarea { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid #c9d1da; border-radius: 6px; font: 13.5px var(--chrome-font); resize: vertical; }
.ask-pop textarea:focus { outline: none; border-color: #1d4f91; box-shadow: 0 0 0 3px rgba(29, 79, 145, .15); }
.ask-pop-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.ask-pop-row button { height: 28px; padding: 0 14px; border: 0; border-radius: 14px; background: #1d4f91; color: #fff; font-weight: 700; cursor: pointer; }
.ask-pop-msg { font-size: 12px; color: #2f7a46; }
.loot-all:hover:not(:disabled):not(.is-got), .loot-btn:hover:not(:disabled):not(.is-got) { background: #ffefb0; }
.loot-all:disabled, .loot-btn:disabled { cursor: default; }
/* Collected: green text, no pill. It still links to the Drill page (tooltip and click). */
.loot-all.is-got, .loot-btn.is-got { border-color: transparent; background: none; color: var(--ok); }
.loot-all.is-got:hover, .loot-btn.is-got:hover { text-decoration: underline; }
.loot-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #e0a800; color: #fff; font-size: 12px; }
.tdi-sol-body table.loot td.loot-cell { width: 1%; vertical-align: middle; text-align: right; white-space: nowrap; } /* Collect and Ask side by side */
/* The student's own cards: an empty row with grey "Your prompt" / "Your answer" and a grey Collect
   until both are filled. */
.tdi-sol-body table.loot tr.custom-empty td { background: #fff; padding-top: 4px; padding-bottom: 4px; }
.tdi-sol-body table.loot tr.custom-empty td:first-child { background: #fafbfc; }
.custom-in { width: 100%; box-sizing: border-box; padding: 5px 7px; border: 1px dashed #c9cdd2; border-radius: 4px; background: transparent; font: inherit; font-weight: inherit; color: #222; }
.custom-in::placeholder { color: #a3a8ae; font-weight: 400; }
.custom-in:focus { outline: none; border-style: solid; border-color: var(--navy); background: #fff; }
.loot-btn.custom-collect:disabled { border-color: #d3d6da; background: #f1f2f4; color: #a3a8ae; }
.tdi-sol-body table.loot tr.is-collected td { background: #f2f9f3; }
.tdi-sol-body table.loot tr.is-collected td:first-child { background: #e7f4ea; }
.tdi-sol-body table.loot tr.loot-pop td { animation: loot-glow 750ms ease-out var(--loot-delay, 0ms) both; }
@keyframes loot-glow {
  from { box-shadow: inset 0 0 0 999px rgba(255, 205, 40, 0.6); }
  to { box-shadow: inset 0 0 0 999px rgba(255, 205, 40, 0); }
}
.loot-float { position: fixed; z-index: 70; pointer-events: none; padding: 3px 10px; border-radius: 12px; background: #e0a800; color: #fff; font: 700 13px var(--chrome-font); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); animation: loot-rise 950ms ease-out forwards; }
@keyframes loot-rise {
  0% { opacity: 0; transform: translate(-50%, 6px) scale(0.8); }
  15% { opacity: 1; transform: translate(-50%, -6px) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%, -46px) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .tdi-sol-body table.loot tr.loot-pop td, .loot-float { animation-duration: 1ms; }
}
.tdi-sol-body h2, .tdi-sol-body h3 { margin: 22px 0 8px; font-family: var(--chrome-font); font-size: 16px; color: #1a1a1a; }
.tdi-sol-body hr { margin: 20px 0 0; border: 0; border-top: 1px solid var(--line); }
.tdi-sol-body pre { max-width: 100%; overflow-x: auto; padding: 10px; background: #f6f7f8; font-size: 13px; }
.tdi-sol-body table.tsv { width: 100%; font-size: 14px; }
.tdi-sol-body table.tsv td { text-align: left; vertical-align: top; }
.tdi-sol-body table.tsv td:first-child { width: 42%; font-weight: 700; background: #f7f8f9; }
.tdi-author { max-width: 640px; margin-top: 26px; padding: 12px 14px; border: 1px dashed #c9a227; background: #fffbea; font-size: 14px; line-height: 1.5; }
.tdi-author h3 { margin: 0 0 6px; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: #8a6d00; }
.tdi-author p { margin: 0 0 6px; }


/* ---------- dialogs ---------- */
.tdi-modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(15, 23, 33, 0.38); }
.tdi-modal[hidden] { display: none; }
.tdi-dialog { width: min(470px, 100%); padding: 22px 24px; background: #fff; border-radius: 6px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); }
.tdi-dialog h2 { margin: 0 0 10px; font-size: 19px; }
.tdi-dialog p { margin: 0; font-size: 15px; line-height: 1.5; color: #333; }
.tdi-dialog-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }
.tdi-dialog-actions .tdi-confirm { min-width: 0; }
.tdi-dialog-actions .tdi-btn { height: 42px; padding: 0 16px; }
.tdi-dialog-wide { width: min(720px, 100%); }
.tdi-dialog-pt { width: min(1120px, 100%); max-height: 94vh; overflow: auto; }
.tdi-dialog-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.tdi-dialog-head h2 { margin: 0; }
.tdi-x { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 4px; background: none; color: #444; cursor: pointer; }
.tdi-x:hover { background: #f1f3f5; }
.tdi-x .ic { width: 20px; height: 20px; }
.tdi-link { padding: 6px; border: 0; background: none; color: #1d4f91; font-size: 15px; text-decoration: underline; cursor: pointer; }


.tdi-panel { position: fixed; top: 118px; right: 24px; z-index: 40; width: 370px; max-width: calc(100vw - 32px); padding: 14px 16px 16px; background: #fff; border: 1px solid var(--btn-line); border-radius: 6px; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18); }
.tdi-panel[hidden] { display: none; }
.tdi-panel h2 { font-size: 17px; }
/* Drag the panel by its title bar to move it off the answer choices. */
.tdi-panel .tdi-dialog-head { cursor: move; touch-action: none; user-select: none; }
.tdi-panel textarea { width: 100%; height: 230px; padding: 10px; border: 1px solid #cfcfcf; border-radius: 4px; font: 15px/1.5 var(--chrome-font); resize: vertical; }

.tdi-toast { position: fixed; bottom: 150px; left: 50%; z-index: 60; max-width: 90vw; padding: 10px 16px; transform: translateX(-50%); border-radius: 4px; background: #222; color: #fff; font-size: 14px; }
.tdi-toast[hidden] { display: none; }

/* periodic table */
/* On a narrow screen the table keeps readable cells and scrolls sideways under its title. */
.pt-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pt { display: grid; grid-template-columns: repeat(18, minmax(0, 1fr)); gap: 3px; min-width: 760px; }
.pt-el { min-width: 0; padding: 3px 1px 4px; border: 1px solid #8f99a3; border-radius: 2px; background: #fff; text-align: center; }
.pt-z, .pt-m { font-size: 10px; line-height: 1.15; color: #333; }
.pt-sym { font-size: 16px; font-weight: 700; line-height: 1.25; }
.pt-gap { grid-column: 1 / -1; height: 8px; }
.pt-label { grid-column: 1 / span 3; display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; font-size: 11px; color: #555; }


/* Buttons in our own dialogs (Done Practicing, the sample's closing prompt). */
.tdi-btn { height: 42px; padding: 0 16px; border: 1px solid var(--btn-line); border-radius: 4px; background: #fff; font: 15px var(--chrome-font); color: #3c3c3c; white-space: nowrap; cursor: pointer; }
.tdi-btn:hover { background: #f5f6f7; }
.tdi-dialog { font-family: var(--chrome-font); color: #222; }
.tdi-dialog-actions .tdi-confirm { height: 42px; padding: 0 20px; font-size: 15px; }
.tdi-panel { font-family: var(--chrome-font); color: #222; }

/* The explanation keeps its own light card in the dark color schemes. */
.scheme-black .tdi-sol, .scheme-black .tdi-hint, .scheme-black .tdi-locked, .scheme-black .tdi-author { padding: 12px 14px; background: #fff; color: #1d1d1d; }
.scheme-salmon .tdi-sol { color: #000; }

/* ---------- modes ---------- */
.mode-review #skipBtn, .mode-review #eraseBtn, .mode-review .tdi-hl, .mode-review #strikeBtn { visibility: hidden; }

/* ---------- phones: the Pause bar wraps and the panes stack ---------- */
@media (max-width: 700px) {
  .x-sys { flex-wrap: wrap; justify-content: center; }
  .x-pause { position: static; transform: none; order: -1; }
}
@media (max-width: 900px) {
  body.tdi { overflow: auto; }
  .tdi-app { height: auto; min-height: 100vh; }
  .x-head { height: auto; flex-wrap: wrap; padding: 6px 10px; }
  .x-title { font-size: 17px; }
  .x-tools { height: auto; flex-wrap: wrap; gap: 4px; padding: 3px 8px; }
  .x-scheme-btn { width: 180px; font-size: 14px; }
  .tdi-main { flex-direction: column; }
  .tdi-left, .tdi-right { flex: none; overflow: visible; }
  .tdi-left-inner, .tdi-right-inner { padding: 20px 16px; }
  .x-foot { position: sticky; bottom: 0; height: auto; flex-wrap: wrap; padding: 4px 6px; font-size: 16px; }
  .x-foot-btn { font-size: 16px; padding: 0 6px; }
  .x-review { padding: 0 10px 20px; }
  .x-review-head { padding: 20px 6px 0; }
  .x-review-table th, .x-review-table td { padding: 0 6px; }
}

/* Question figures (diagrams, graphs, structures) */
.q-fig { display: block; max-width: 100%; height: auto; margin: 8px 0 14px; }

/* Tooltips, plain like the rest of the test page: white panel, thin gray border, dark text, navy links.
   They take the pointer so their text can be selected; dotted words open nested tooltips. */
.tw-tip { position: fixed; z-index: 80; max-width: min(270px, calc(100vw - 16px)); padding: 9px 12px; border: 1px solid #c8c8c8; border-radius: 3px; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14); color: #222; font: 13px/1.45 var(--chrome-font); text-align: left; cursor: auto; user-select: text; -webkit-user-select: text; opacity: 0; transform: translateY(4px); transition: opacity 120ms ease, transform 120ms ease; }
.tw-tip[hidden] { display: none; }
.tw-tip[data-place='below'] { transform: translateY(-4px); }
.tw-tip[data-place='right'] { transform: translateX(-4px); }
.tw-tip[data-place='left'] { transform: translateX(4px); }
.tw-tip.is-on { opacity: 1; transform: none; }
.tw-tip-title { font: 700 13.5px var(--chrome-font); color: #111; }
.tw-tip-rule { height: 1px; margin: 5px 0 6px; background: #e2e2e2; }
.tw-tip-effect { margin-top: 6px; color: #2e6b2e; font-size: 12.5px; font-weight: 700; }
.tw-tip ::selection { background: #cfe0f5; color: #111; }
.tw-tip .tip-ref.is-live { text-decoration: underline dotted #8a8a8a; text-underline-offset: 3px; cursor: help; }
.tw-tip .tip-ref.is-live:hover, .tw-tip .tip-ref.tip-open { color: var(--navy); }
.tw-tip a.tip-link, .tw-tip a.tip-link.tip-ref.is-live { color: var(--navy); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.tw-tip a.tip-link:hover { color: #3b73c8; }
@media (prefers-reduced-motion: reduce) {
  .tw-tip { transition: none; }
}

/* "Take to test" cards with an explanation: hover (or tab to) a row for the tooltip */
.tw-tip.tw-tip-wide { max-width: min(380px, calc(100vw - 16px)); }
.tdi-sol-body table.loot tr.has-why td:not(.loot-cell) { cursor: help; }
.tdi-sol-body table.loot tr.has-why td:first-child { text-decoration: underline dotted #8a8a8a; text-underline-offset: 3px; }
.tdi-sol-body table.loot tr.has-why:focus-visible { outline: 2px solid #3b73c8; outline-offset: -2px; }
/* Links styled as dialog buttons (the public sample's closing prompt). */
a.tdi-confirm, a.tdi-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* ---------- Between sections (MCAT-structured tests): break offer, break, next section's start ---------- */
.x-gate { flex: 1; min-height: 0; overflow: auto; background: #fff; color: #000; font: 15px/1.55 var(--content-font); }
.x-gate[hidden] { display: none; }
.x-gate-inner { max-width: 640px; padding: 28px 24px; }
.x-gate-inner.is-intro { margin: 0 auto; }
.x-gate-inner p { margin: 0 0 12px; }
.x-gate-inner h2 { margin: 6px 0 14px; font: 700 28px/1.2 Arial, Helvetica, sans-serif; text-align: center; }
.x-gate-count { font-weight: 700; text-align: center; }
.x-gate-clock { font-size: 22px; font-variant-numeric: tabular-nums; }
body.on-gate .tdi-main, body.on-gate .x-sys, body.on-gate .x-tools-left > *, body.on-gate #flagBtn, body.on-gate #counterBtn,
body.on-gate .x-foot-btn:not(.x-gate-btn) { display: none; }
body.on-gate.gate-paused #timerBtn { visibility: hidden; }

/* The free passages' score page (test.js sampleResults), over the test screen, under the popups. Laid
   out and styled like the signed-in results page (views/app/results.ejs, site.css). */
.x-results { position: fixed; inset: 0; z-index: 40; overflow: auto; background: #f4f6f9; color: #1f2a37; font: 15.5px/1.55 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif; }
.x-results[hidden] { display: none; }
.xr-top { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 24px; background: var(--navy); }
.xr-brand { color: #fff; font-weight: 700; font-size: 16px; text-decoration: none; }
.xr-top-link { color: #dbe4ee; font-size: 14.5px; text-decoration: none; }
.xr-top-link:hover { color: #fff; }
.xr-page { max-width: 960px; margin: 0 auto; padding: 26px 16px 40px; }
.xr-title { margin: 0 0 16px; font-size: 24px; color: #0d1b2a; line-height: 1.25; }
.xr-card { margin-bottom: 18px; padding: 20px 22px; border: 1px solid #e3e8ee; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(13, 27, 42, 0.04); }
.xr-card h2 { margin: 0 0 14px; font-size: 18px; color: #0d1b2a; }
.xr-flush { padding: 0; overflow: hidden; }
.xr-pad { padding: 18px 22px 0; }
.xr-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; }
.xr-score { flex: none; min-width: 140px; }
.xr-score b { display: block; font-size: 44px; line-height: 1.1; color: #0d1b2a; }
.xr-score span { font-size: 13.5px; color: #5b6878; }
.xr-next { flex: 1; min-width: 260px; }
.xr-next p { margin: 0 0 12px; }
.xr-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.xr-arrow { color: #8a96a5; }
.xr-btn { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border: 1px solid transparent; border-radius: 8px; font: 600 14px 'Segoe UI', system-ui, sans-serif; text-decoration: none; cursor: pointer; }
.xr-btn-accent { background: #f0b429; color: #0d1b2a; }
.xr-btn-accent:hover { background: #e5a91f; }
.xr-btn-primary { background: var(--navy); color: #fff; }
.xr-btn-primary:hover { background: #0b3d73; color: #fff; }
.xr-meta { flex-basis: 100%; margin: 0; padding-top: 12px; border-top: 1px solid #edf0f4; font-size: 13px; color: #5b6878; }
.xr-meters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 40px; }
.xr-meter { margin-bottom: 12px; }
.xr-meter-label { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 14.5px; }
.xr-meter-label small { color: #5b6878; font-size: 12.5px; }
.xr-bar { height: 8px; border-radius: 99px; background: #e6eaef; overflow: hidden; }
.xr-bar i { display: block; height: 100%; border-radius: 99px; background: #0b3d73; }
.xr-table-wrap { overflow-x: auto; }
.xr-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.xr-table th, .xr-table td { padding: 9px 14px; border-bottom: 1px solid #edf0f4; text-align: left; white-space: nowrap; }
.xr-table th { background: #f8fafc; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: #5b6878; }
.xr-table tbody tr:last-child td { border-bottom: 0; }
.xr-table tbody tr:hover { background: #f8fafc; }
.xr-table .xr-topic { white-space: normal; font-size: 13.5px; color: #3c4857; }
.xr-table .xr-c { text-align: center; }
.xr-table .xr-n, .xr-table .xr-r { text-align: right; font-variant-numeric: tabular-nums; }
.xr-res { font-weight: 600; }
.xr-res-correct { color: #1e7b45; }
.xr-res-incorrect { color: #b42318; }
.xr-res-omitted { color: #5b6878; }
.xr-flag { color: #b42318; }
.xr-one-passage .xr-pcol { display: none; }
.xr-review { padding: 0; border: 0; background: none; color: #0b3d73; font: inherit; font-weight: 600; cursor: pointer; }
.xr-review:hover { text-decoration: underline; }
.xr-note { margin: 0; font-size: 13px; color: #5b6878; text-align: center; }
@media (max-width: 640px) { .xr-meters { grid-template-columns: 1fr; } .xr-top { padding: 0 16px; } }