:root {
  --bg: #f7f4ee;
  --surface: #ffffff;
  --ink: #23302c;
  --muted: #64716c;
  --line: #ded9cd;
  --accent: #17695a;
  --accent-ink: #ffffff;
  --accent-soft: #dcefe9;
  --good: #1c7a4d;
  --good-soft: #dff3e7;
  --bad: #b23a2e;
  --bad-soft: #fae3df;
  --warn: #9a6400;
  --warn-soft: #fbeed0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15201d;
    --surface: #1e2b27;
    --ink: #e8ece9;
    --muted: #9eaba6;
    --line: #34443f;
    --accent: #5cc4ae;
    --accent-ink: #0d1f1b;
    --accent-soft: #24423b;
    --good: #6fd29e;
    --good-soft: #1f3e2e;
    --bad: #f0978b;
    --bad-soft: #472823;
    --warn: #e6b95c;
    --warn-soft: #43361a;  }
}

:root[data-theme="dark"] {
  --bg: #15201d;
  --surface: #1e2b27;
  --ink: #e8ece9;
  --muted: #9eaba6;
  --line: #34443f;
  --accent: #5cc4ae;
  --accent-ink: #0d1f1b;
  --accent-soft: #24423b;
  --good: #6fd29e;
  --good-soft: #1f3e2e;
  --bad: #f0978b;
  --bad-soft: #472823;
  --warn: #e6b95c;
  --warn-soft: #43361a;}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 1rem/1.55 system-ui, -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
}

a { color: var(--accent); }
h1 { font-size: 1.6rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }
p { margin: 0 0 .75rem; }

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.5rem;
  padding: .75rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; font-size: 1.1rem; text-decoration: none; color: var(--ink); }
.topbar nav { display: flex; flex-wrap: wrap; gap: .25rem; }
.topbar nav a { padding: .3rem .65rem; border-radius: 6px; text-decoration: none; color: var(--muted); }
.topbar nav a.active { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.account { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.review-banner { margin: 0; padding: .4rem 1rem; background: var(--warn-soft); color: var(--ink); font-size: .85rem; text-align: center; }
.login { max-width: 420px; margin: 3rem auto; }
.login form { display: flex; gap: .5rem; flex-wrap: wrap; }
.login input { flex: 1 1 12rem; font-size: 1.05rem; letter-spacing: .05em; text-transform: uppercase; }

main { max-width: 960px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
}

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: .85rem 1rem; }
.stat b { display: block; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); font-size: .85rem; }

button, .button {
  font: inherit;
  padding: .5rem .95rem;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button:hover:not(:disabled), .button:hover { border-color: var(--accent); }
button:disabled { opacity: .5; cursor: not-allowed; }
button.primary, .button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
button.danger { color: var(--bad); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.spread { justify-content: space-between; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }

.options { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .35rem .75rem; }
.option { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; cursor: pointer; }
.option.disabled { color: var(--muted); cursor: not-allowed; }
.count { margin-left: auto; color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }

.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; margin-bottom: .75rem; }
.segmented button { border: 0; border-radius: 0; }
.segmented button.on { background: var(--accent-soft); font-weight: 600; }

input[type="number"], input[type="text"], textarea {
  font: inherit;
  padding: .45rem .6rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg);
  color: var(--ink);
}
input[type="number"] { width: 6rem; }
textarea, input.wide { width: 100%; }
textarea { min-height: 4.5rem; }

.error { color: var(--bad); margin: .5rem 0 0; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
td.wrap { white-space: normal; min-width: 14rem; }
th { color: var(--muted); font-weight: 600; font-size: .82rem; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.pill { display: inline-block; padding: .05rem .5rem; border-radius: 99px; font-size: .8rem; font-weight: 600; }
.pill.correct { background: var(--good-soft); color: var(--good); }
.pill.incorrect { background: var(--bad-soft); color: var(--bad); }
.pill.omitted, .pill.suspended { background: var(--warn-soft); color: var(--warn); }
.pill.active { background: var(--accent-soft); color: var(--ink); }

.runner { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 1rem; align-items: start; }
@media (max-width: 720px) { .runner { grid-template-columns: minmax(0, 1fr); } }
.runner-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.timer { font-weight: 700; font-variant-numeric: tabular-nums; }
.timer.low { color: var(--bad); }
.stem { font-size: 1.05rem; margin-bottom: 1rem; }

.choice {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  padding: .6rem .75rem;
  margin-bottom: .45rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}
.choice input { margin-top: .3rem; }
.choice.locked { cursor: default; }
.choice.is-correct { border-color: var(--good); background: var(--good-soft); }
.choice.is-wrong { border-color: var(--bad); background: var(--bad-soft); }
.choice .tag { margin-left: auto; font-size: .78rem; font-weight: 600; white-space: nowrap; }

.explanation { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: 1rem; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: .3rem; }
.grid button { padding: .3rem 0; font-size: .85rem; font-variant-numeric: tabular-nums; }
.grid button.current { border-color: var(--accent); border-width: 2px; font-weight: 700; }
.grid button.answered { background: var(--accent-soft); }
.grid button.correct { background: var(--good-soft); }
.grid button.incorrect { background: var(--bad-soft); }
.grid button.omitted { background: var(--warn-soft); }
.grid button.marked::after { content: " ⚑"; color: var(--warn); font-size: .7rem; }

.answer-area { margin-bottom: 1rem; }
.answer-area > :last-child { margin-bottom: 0; }
.tag.good { color: var(--good); }
.tag.bad { color: var(--bad); }
.center { text-align: center; }
.matrix th { white-space: normal; }
.matrix td.wrap { min-width: 8rem; }
.matrix td.is-correct { background: var(--good-soft); }
.matrix td.is-wrong { background: var(--bad-soft); }

.groups { display: grid; gap: 1rem; }
.group h3 { font-size: .95rem; margin: 0 0 .4rem; }

.bowtie-figure, .bowtie-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.bowtie-figure { align-items: center; margin-bottom: 1rem; }
.bowtie-side { display: grid; gap: .6rem; }
.bowtie-target { min-height: 3.2rem; width: 100%; border: 1px dashed var(--line); border-radius: 7px; background: var(--bg); color: var(--muted); font-size: .85rem; white-space: normal; }
.bowtie-target.filled { border-style: solid; border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.bowtie-target.is-correct { background: var(--accent-soft); }
.bowtie-target.is-wrong { border-color: var(--bad); }
.bowtie-bank h3 { font-size: .85rem; margin: 0 0 .4rem; text-align: center; }
.bowtie-option { display: block; width: 100%; margin-bottom: .35rem; font-size: .85rem; text-align: left; white-space: normal; cursor: grab; }
.bowtie-option.placed { opacity: .35; cursor: default; }
.bowtie-option .tag { display: block; margin-top: .2rem; }
.format-note { margin: .5rem 0 0; }
.choice:has(.choice-why) { flex-wrap: wrap; }
.choice-why { flex-basis: 100%; margin-top: .3rem; color: var(--muted); font-size: .88rem; }
.slot-why { margin: .75rem 0 0; padding-left: 1.1rem; font-size: .9rem; }
.slot-why li { margin-bottom: .25rem; }
.key-point { padding: .55rem .7rem; background: var(--accent-soft); border-radius: 7px; }
.fillin-input { width: 8rem; }
.hotspot { position: relative; width: min(100%, 460px); cursor: crosshair; line-height: 0; }
.hotspot img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; }
.hotspot-region { position: absolute; padding: 0; min-height: 0; background: transparent; border: 0; border-radius: 50%; cursor: crosshair; }
.hotspot-region.on { background: rgb(0 103 169 / .28); outline: 2px solid var(--accent); }
.hotspot-region.is-correct { background: rgb(30 130 76 / .28); outline: 2px solid #1e824c; }
.hotspot-region.is-wrong { background: rgb(192 57 43 / .28); outline: 2px solid #c0392b; }
.choice-image { display: block; width: min(100%, 420px); height: auto; border: 1px solid var(--line); border-radius: 6px; }

.slotted { line-height: 2.4; }
.slot-wrap { display: inline; }
select {
  font: inherit;
  max-width: 100%;
  padding: .3rem .45rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg);
  color: var(--ink);
}
select.is-correct, .slot.is-correct { border-color: var(--good); background: var(--good-soft); }
select.is-wrong, .slot.is-wrong { border-color: var(--bad); background: var(--bad-soft); }

.slot {
  display: inline-block;
  min-width: 6rem;
  padding: .15rem .6rem;
  line-height: 1.6;
  border: 1px dashed var(--muted);
  border-radius: 7px;
  color: var(--muted);
  background: var(--bg);
}
.slot.filled { border-style: solid; border-color: var(--accent); color: var(--ink); background: var(--accent-soft); }
span.slot { border-style: solid; color: var(--ink); }

.bank { display: flex; flex-wrap: wrap; gap: .4rem; padding: .65rem; margin-top: .75rem; background: var(--bg); border-radius: 8px; min-height: 3rem; }
.token { cursor: grab; }
.token.picked { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.passage { line-height: 2; }
.segment {
  padding: .05rem .25rem;
  border: 0;
  border-bottom: 1px dotted var(--muted);
  border-radius: 3px;
  background: transparent;
  text-align: left;
}
.segment.on { background: var(--warn-soft); border-bottom-color: var(--warn); }
.segment:disabled { opacity: 1; cursor: default; }
.segment.is-correct { background: var(--good-soft); border-bottom-color: var(--good); }
.segment.is-wrong { background: var(--bad-soft); border-bottom-color: var(--bad); text-decoration: line-through; }
.segment.missed { outline: 1px dashed var(--good); }

main:has(.with-case) { max-width: 1320px; }
.runner.with-case { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) 170px; }
@media (max-width: 1080px) { .runner.with-case { grid-template-columns: minmax(0, 1fr) 170px; } .case-panel { grid-column: 1 / -1; } }
@media (max-width: 720px) { .runner.with-case { grid-template-columns: minmax(0, 1fr); } }
.case-panel .segmented { flex-wrap: wrap; }
.exhibit p:last-child { margin-bottom: 0; }
.chart-toggle { display: none; }
.chart-scenario { margin: 0 0 .75rem; }
.chart-tabs { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: -1px; }
.chart-tabs button { border: 1px solid var(--line); border-bottom-color: var(--line); border-radius: 7px 7px 0 0; background: var(--bg); font-weight: 600; }
.chart-tabs button.on { background: var(--surface); border-bottom-color: var(--surface); position: relative; }
.chart-tabs + .exhibit { border: 1px solid var(--line); border-radius: 0 7px 7px 7px; padding: .9rem; }
.exhibit table { width: 100%; }
.exhibit th, .exhibit td { white-space: normal; word-break: keep-all; }
.exhibit td.wrap { min-width: 0; }
.explanation-aid { margin-top: 1rem; }
.concept-note { margin-top: 1rem; padding: .7rem .85rem; border-left: 3px solid var(--accent); background: var(--bg); }
.concept-note p:last-child { margin-bottom: 0; }
.aid-title { font-weight: 700; margin: 0 0 .35rem; }
.exhibit-figure { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; }

.flash { text-align: center; padding: 2rem 1.25rem; }
.flash .front { font-size: 1.2rem; font-weight: 600; }
.flash .back { font-size: 1.1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.answer-buttons { justify-content: center; margin-top: 1.25rem; }
.answer-buttons button { min-width: 84px; }
.answer-buttons small { display: block; color: var(--muted); }

dialog {
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  max-width: min(92vw, 520px);
  width: 100%;
}
dialog::backdrop { background: rgb(0 0 0 / .45); }
dialog.floating {
  position: fixed;
  inset: auto 1rem 1rem auto;
  margin: 0;
  width: min(92vw, 320px);
  z-index: 10;
  box-shadow: 0 8px 24px rgb(0 0 0 / .25);
}
.dialog-head { margin-bottom: .5rem; }
.dialog-head h2 { margin: 0; }
.dialog-head button { padding: .1rem .5rem; }
.dialog-actions { justify-content: flex-end; margin-top: .85rem; }
.dialog-scroll { max-height: 50vh; overflow: auto; }
button.danger-solid { background: var(--bad); border-color: var(--bad); color: var(--surface); font-weight: 600; }

.stack { display: grid; gap: .5rem; }
.stack select, .stack textarea { width: 100%; }
.pre { white-space: pre-wrap; margin: 0; }
.plain { list-style: none; margin: 0; padding: 0; }
.notice { border-color: var(--warn); background: var(--warn-soft); }
.notice-text { color: var(--warn); }
.search-row { display: flex; gap: .5rem; }
.search-row input { flex: 1; min-width: 0; }
kbd { border: 1px solid var(--line); border-radius: 4px; padding: .05rem .35rem; font: inherit; font-size: .85rem; }

.toolbar { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .75rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line); }
button.tool { padding: .2rem .55rem; font-size: .82rem; }
mark { background: var(--warn-soft); color: inherit; border-bottom: 2px solid var(--warn); }
.struck { text-decoration: line-through; color: var(--muted); }
.strike-button { margin-left: auto; padding: 0 .4rem; font-size: .75rem; text-decoration: line-through; color: var(--muted); align-self: center; flex-shrink: 0; }
.choice .tag + .strike-button { margin-left: .4rem; }

.runner > .case-panel { grid-column: 1 / -1; }
@media (min-width: 1081px) { .runner.with-case > .case-panel { grid-column: auto; } }

.calc-screen { display: block; padding: .5rem .75rem; margin-bottom: .5rem; text-align: right; font-size: 1.4rem; font-variant-numeric: tabular-nums; background: var(--bg); border-radius: 7px; overflow: hidden; }
.calc-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; }
.calc-keys button { padding: .55rem 0; }
.calc-keys .wide-key { grid-column: span 2; }

.settings { display: grid; gap: .5rem; }
.setting { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; }
.setting input[type="number"] { width: 5rem; }

.stats.flat { margin-bottom: 0; }
.stats.flat .stat { background: var(--bg); }
.bars { display: flex; align-items: flex-end; gap: .3rem; height: 160px; overflow-x: auto; }
.bar { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 26px; flex: 1 1 0; max-width: 48px; text-decoration: none; color: var(--muted); font-size: .72rem; }
.bar-fill { display: block; width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; }

.notebook { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 720px) { .notebook { grid-template-columns: minmax(0, 1fr); } }
.page-list { display: grid; gap: .15rem; }
.page-link { border: 0; text-align: left; background: transparent; padding: .3rem .6rem; overflow-wrap: anywhere; }
.page-link.on { background: var(--accent-soft); font-weight: 600; }
.page-title { font-size: 1.15rem; font-weight: 600; }
.page-body { min-height: 16rem; margin-bottom: .5rem; }

.plan-type { align-items: flex-start; padding: .5rem 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .25rem; }
.cal-head { text-align: center; color: var(--muted); font-size: .8rem; }
.cal-cell { min-height: 58px; padding: .25rem; text-align: left; display: flex; flex-direction: column; gap: .1rem; border-radius: 6px; font-size: .85rem; }
.cal-cell.empty { visibility: hidden; }
.cal-cell.today { border-color: var(--accent); border-width: 2px; }
.cal-cell.selected { background: var(--accent-soft); }
.cal-cell.late { border-color: var(--bad); }
.cal-cell.exam { background: var(--warn-soft); }
.cal-note { font-size: .7rem; color: var(--muted); overflow-wrap: anywhere; }
.task-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.task-label { flex: 1 1 200px; }
.task-done { text-decoration: line-through; color: var(--muted); }
input[type="date"] { font: inherit; padding: .35rem .5rem; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); color: var(--ink); }
details > summary { cursor: pointer; font-weight: 600; }

.language-option { align-items: flex-start; padding: .4rem 0; }
.language-filter { margin-top: .6rem; }
.language-switch .segmented { display: flex; flex-wrap: wrap; margin-bottom: .6rem; }
.language-switch .segmented button { flex: 1 1 auto; padding: .25rem .5rem; font-size: .82rem; }
.promoted { color: var(--good); font-weight: 600; }
.demoted { color: var(--warn); font-weight: 600; }
.ladder { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .75rem; margin-top: .5rem; }
.ladder-step { display: grid; gap: .15rem; font-size: .85rem; color: var(--muted); }
.ladder-step b { font-size: 1.4rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.ladder-bar { display: block; height: 6px; background: var(--bg); border-radius: 3px; overflow: hidden; }
.ladder-bar span { display: block; height: 100%; background: var(--accent); }

/* Phones. The layout stays the same above 720px. */
@media (max-width: 720px) {
  main { padding: 1rem .75rem 5rem; }
  h1 { font-size: 1.35rem; }
  .card { padding: .9rem; }

  /* The brand and account share the first row, and the menu scrolls sideways on one row. */
  .topbar { gap: .35rem .75rem; padding: .5rem .75rem 0; }
  .topbar nav { order: 3; flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: .4rem; }
  .topbar nav::-webkit-scrollbar { display: none; }
  .topbar nav a { white-space: nowrap; padding: .4rem .6rem; }
  .review-banner { font-size: .78rem; padding: .3rem .75rem; }
  /* The exam has no site menu, so a test on a phone keeps only the brand, which links home. */
  :root[data-exam] .topbar { padding-bottom: .5rem; }
  :root[data-exam] .topbar nav { display: none; }

  /* Tools and the language switch stay on one row each. */
  .toolbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .toolbar::-webkit-scrollbar { display: none; }
  .toolbar button { flex: 0 0 auto; white-space: nowrap; }
  .language-switch .segmented { flex-wrap: nowrap; }
  .language-switch .segmented button { padding: .35rem .2rem; font-size: .76rem; white-space: nowrap; }

  /* Previous, next, and mark stay reachable without scrolling to the end of the question. */
  .runner-foot { position: sticky; bottom: 0; z-index: 5; margin-top: 1rem; padding: .5rem 0; background: var(--surface); border-top: 1px solid var(--line); }
  :root[data-exam] .runner-foot { padding: .45rem .6rem; }
  .runner-foot button { min-height: 42px; min-width: 4.5rem; }

  /* The chart scrolls inside its own box, so the question stays close below it. */
  .chart-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .chart-tabs::-webkit-scrollbar { display: none; }
  .chart-tabs button { flex: 0 0 auto; white-space: nowrap; }
  .case-panel .exhibit { max-height: 30vh; overflow: auto; }
  .chart-toggle { display: block; float: right; margin: 0 0 .4rem .5rem; }
  .case-panel.folded .chart-tabs, .case-panel.folded .exhibit, .case-panel.folded > p { display: none; }
  .case-panel.folded h2 { margin: 0; }
  .case-panel h2 { font-size: 1rem; margin-bottom: .35rem; }
  .case-panel > p { margin-bottom: .5rem; }

  /* Bigger targets for fingers. */
  button.tool { min-height: 36px; padding: .35rem .65rem; }
  .strike-button { min-width: 34px; min-height: 34px; }
  .option { padding: .5rem 0; }
  input[type="checkbox"], input[type="radio"] { width: 1.15rem; height: 1.15rem; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); }
  .grid button { min-height: 40px; }
  .segmented button { min-height: 38px; }
  .choice { padding: .7rem .75rem; }

  /* Bow-tie: the figure keeps its shape, and the option lists stack. */
  .bowtie-columns { grid-template-columns: minmax(0, 1fr); }
  .bowtie-target { font-size: .78rem; min-height: 3.6rem; }
  .bowtie-option { min-height: 40px; }
}

/* The test screen uses the colors read from the official NCLEX candidate tutorial
   (home.pearsonvue.com/ncsbn/sample-test/ngn/enu). The exam has no dark mode, so neither does this.
   Green and red stay for revealed answers, which the exam does not have. */
:root[data-exam] {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --ink: #000000;
  --muted: #444444;
  --line: #e0e0e0;
  --accent: #006daa;
  --accent-ink: #ffffff;
  --accent-soft: #e6f2ff;
  --good: #1c7a4d;
  --good-soft: #dff3e7;
  --bad: #b23a2e;
  --bad-soft: #fae3df;
  --warn: #9a6400;
  --warn-soft: #fbeed0;
  --exam-band: #80aee1;
  --exam-gutter: #f2f2f2;
  --exam-tab: #eeeeee;
  --exam-highlight: #fdff00;
  --exam-target: #eceff3;
  --exam-target-line: #d8e6f5;
  --exam-option: #ecf5f4;
  --exam-middle: #bae6f1;
}
:root[data-exam] body { background: var(--exam-gutter); font-family: Arial, "Malgun Gothic", sans-serif; }

:root[data-exam] .topbar { background: var(--accent); border-bottom: 10px solid var(--exam-band); }
:root[data-exam] .topbar .brand, :root[data-exam] .topbar nav a { color: #ffffff; }
:root[data-exam] .topbar nav a.active { background: rgba(255, 255, 255, .22); color: #ffffff; }

:root[data-exam] .card { border-radius: 0; }
:root[data-exam] .toolbar { background: var(--exam-band); border-bottom: 0; padding: .35rem; }
:root[data-exam] .toolbar button { background: transparent; border-color: transparent; }
:root[data-exam] .toolbar button:hover:not(:disabled) { border-color: #000000; }

:root[data-exam] .runner-foot { background: var(--accent); padding: .45rem .6rem; }
:root[data-exam] .runner-foot button { background: transparent; border-color: #ffffff; color: #ffffff; border-radius: 0; }

:root[data-exam] .choice { border-radius: 0; }
:root[data-exam] .choice:not(.is-correct):not(.is-wrong) { border-color: transparent; }

:root[data-exam] th { background: var(--accent-soft); color: #000000; }
:root[data-exam] .answer-area tbody tr:nth-child(odd) { background: var(--exam-gutter); }
:root[data-exam] .exhibit th, :root[data-exam] .exhibit td { border: 1px solid #000000; background: #ffffff; font-weight: 400; }
:root[data-exam] .exhibit th { font-weight: 700; }

:root[data-exam] .chart-tabs button { background: var(--exam-tab); border-radius: 0; font-weight: 700; }
:root[data-exam] .chart-tabs button:hover:not(:disabled) { background: var(--line); border-color: var(--line); }
:root[data-exam] .chart-tabs button.on { background: #ffffff; border-bottom-color: #ffffff; }
:root[data-exam] .chart-tabs + .exhibit { border-radius: 0; }

:root[data-exam] .segment.on { background: var(--exam-highlight); border-bottom-color: transparent; }
:root[data-exam] .segment:hover:not(:disabled) { background: rgba(255, 255, 0, .5); }
:root[data-exam] .segment.on:hover:not(:disabled) { background: var(--exam-highlight); }
:root[data-exam] .segment.is-correct { background: var(--good-soft); border-bottom-color: var(--good); }
:root[data-exam] .segment.is-wrong { background: var(--bad-soft); border-bottom-color: var(--bad); }

:root[data-exam] .bowtie-target { background: var(--exam-target); border: 1px solid var(--exam-target-line); border-radius: 0; color: #000000; }
:root[data-exam] .bowtie-side:nth-child(2) .bowtie-target { background: var(--exam-middle); }
:root[data-exam] .bowtie-bank { border: 1px solid #000000; padding: 0 .35rem .35rem; }
:root[data-exam] .bowtie-bank h3 { background: var(--accent-soft); margin: 0 -.35rem .35rem; padding: .35rem; border-bottom: 1px solid #000000; }
:root[data-exam] .bowtie-option { background: var(--exam-option); border-color: transparent; border-radius: 0; }
:root[data-exam] .bowtie-bank:nth-child(2) .bowtie-option { background: var(--exam-middle); }
:root[data-exam] .bowtie-side .bowtie-target.is-correct { background: var(--good-soft); border-color: var(--good); }
:root[data-exam] .bowtie-side .bowtie-target.is-wrong { background: var(--bad-soft); border-color: var(--bad); }