/* ─── Exam design system — ported from ielts-frontend prototype ──────────────
   Scoped to exam pages. Bootstrap stays loaded globally; this file adds the
   exam-specific token layer, layout shells, and all question-type styles. */

/* ── CSS custom properties ───────────────────────────────────────────────── */
:root {
  --color-brand:           #d71920;
  --color-brand-dark:      #b91218;
  --color-page:            #ffffff;
  --color-surface:         #ffffff;
  --color-surface-muted:   #f7f7f5;
  --color-surface-subtle:  #f1f1ed;
  --color-text:            #1f1f1f;
  --color-text-muted:      #565656;
  --color-text-subtle:     #747474;
  --color-text-inverse:    #ffffff;
  --color-border:          #d9d9d9;
  --color-border-strong:   #b8b8b8;
  --color-divider:         #9f9f9f;
  --color-control:         #ffffff;
  --color-control-muted:   #e7e7e7;
  --color-control-disabled:#eeeeee;
  --color-primary:         #2d86a8;
  --color-primary-hover:   #236f8c;
  --color-primary-soft:    #e8f4f8;
  --color-focus:           #2d86a8;
  --color-success:         #2f7d32;
  --color-warning:         #9a6a00;
  --color-danger:          #c62828;
  --font-family-exam:      Arial, Helvetica, sans-serif;
  --font-size-xs:          0.75rem;
  --font-size-sm:          0.875rem;
  --font-size-md:          1rem;
  --font-size-lg:          1.125rem;
  --font-size-xl:          1.25rem;
  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --line-height-tight:     1.25;
  --line-height-base:      1.5;
  --line-height-reading:   1.62;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --header-height:          3.5rem;
  --instruction-bar-height: 4.25rem;
  --navigator-height:       3.5rem;
  --footer-height:          var(--navigator-height);
  --question-number-size:   1.625rem;
  --control-height-md:      2.25rem;
  --border-width:           1px;
  --border-width-strong:    2px;
  --border-style:           solid;
  --radius-xs:  0.125rem;
  --radius-sm:  0.25rem;
  --radius-md:  0.375rem;
  --border-subtle: var(--border-width) var(--border-style) var(--color-border);
  --border-strong: var(--border-width) var(--border-style) var(--color-border-strong);
  --border-focus:  var(--border-width-strong) var(--border-style) var(--color-focus);
  --shadow-header: 0 1px 0 var(--color-border);
  --shadow-footer: 0 -1px 0 var(--color-border);
  --shadow-focus:  0 0 0 0.1875rem rgba(45, 134, 168, 0.2);
  --duration-fast:    120ms;
  --duration-base:    180ms;
  --ease-standard:    ease;
  --z-header: 20;
  --z-footer: 20;
  --z-overlay: 40;
}

/* ── Exam shell reset ────────────────────────────────────────────────────── */
.exam-shell,
.exam-shell * {
  box-sizing: border-box;
}

.exam-shell {
  font-family: var(--font-family-exam);
  color: var(--color-text);
  background: var(--color-page);
}

/* ── Layout ──────────────────────────────────────────────────────────────── */
.exam-header--fixed {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
}

.instruction-bar.instruction-bar--fixed {
  position: fixed;
  top: calc(var(--header-height) + var(--space-3));
  right: var(--space-4);
  left: var(--space-4);
  z-index: var(--z-header);
  margin: 0;
}

.exam-main {
  --left-panel-width: 50%;
  --divider-width: 18px;
  position: fixed;
  top: calc(var(--header-height) + 90px);
  right: 0;
  bottom: var(--navigator-height);
  left: 0;
  display: grid;
  grid-template-columns: var(--left-panel-width) var(--divider-width) minmax(0, 1fr);
  height: calc(100vh - var(--header-height) - var(--navigator-height) - 90px);
  background: var(--color-surface);
}

.reading-panel,
.question-panel {
  height: 100%;
  overflow-y: auto;
  padding: var(--space-6) var(--space-4) var(--space-8);
}

.reading-panel { padding-right: var(--space-6); }
.question-panel { padding-left: var(--space-5); padding-right: var(--space-10); }

.split-divider {
  position: relative;
  display: flex;
  justify-content: center;
  width: 18px;
  background: var(--color-surface);
  cursor: col-resize;
  touch-action: none;
  user-select: none;
}

.split-divider::before {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 18px;
  background: linear-gradient(
    to right,
    transparent 0,
    transparent 7px,
    var(--color-divider) 7px,
    var(--color-divider) 11px,
    transparent 11px
  );
  content: "";
}

.divider-handle {
  position: absolute;
  top: 48%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  background: var(--color-surface);
  border: var(--border-strong);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  cursor: col-resize;
  user-select: none;
}

.split-divider.is-dragging::before {
  background: linear-gradient(
    to right,
    transparent 0,
    transparent 6px,
    #777 6px,
    #777 12px,
    transparent 12px
  );
}

.split-divider.is-dragging .divider-handle {
  border-color: #777;
  color: var(--color-text);
}

body.exam-is-resizing {
  cursor: col-resize;
  user-select: none;
}

body.exam-is-resizing * {
  user-select: none;
}

.floating-navigation {
  position: fixed;
  right: var(--space-8);
  bottom: calc(var(--navigator-height) + var(--space-8));
  z-index: var(--z-footer);
  display: flex;
  gap: 2px;
}

.question-navigator {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-footer);
  display: grid;
  grid-template-columns: minmax(25rem, 1fr) minmax(12rem, 0.55fr) minmax(12rem, 0.55fr) var(--navigator-height);
  align-items: stretch;
  height: var(--navigator-height);
  background: var(--color-surface);
  box-shadow: var(--shadow-footer);
}

.navigator-part {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: var(--space-3);
  padding: 0 var(--space-5);
}

.navigator-part.is-active {
  align-items: end;
  padding-bottom: var(--space-2);
}

/* ── Header & toolbar ────────────────────────────────────────────────────── */
.exam-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: var(--header-height);
  padding: 0 var(--space-4);
  background: var(--color-surface);
  border-bottom: var(--border-subtle);
}

.exam-header__identity,
.exam-header__brand,
.exam-toolbar {
  display: flex;
  align-items: center;
}

.exam-header__identity { gap: var(--space-6); }
.exam-header__brand { gap: 18px; min-width: 260px; }
.exam-toolbar { gap: var(--space-3); }

.exam-logo {
  color: var(--color-brand);
  font-size: 2rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
  line-height: 1;
  text-decoration: none;
}

.exam-header__logo-link {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.exam-header__logo {
  display: block;
  width: auto;
  height: 38px;
  object-fit: contain;
}

.test-taker-id,
.exam-header__test-id {
  color: var(--color-text);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.exam-save-status {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.icon-button {
  display: grid;
  place-items: center;
  width: var(--control-height-md);
  height: var(--control-height-md);
  color: var(--color-text);
  border-radius: var(--radius-xs);
  background: none;
  border: none;
  cursor: pointer;
}

.icon-button i {
  font-size: 1.25rem;
  line-height: 1;
}

/* ── Header timer & audio player ─────────────────────────────────────────── */
.exam-timer {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-text);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.header-audio-player {
  position: absolute;
  left: 50%;
  display: flex;
  align-items: center;
  width: min(28rem, 42vw);
  gap: var(--space-2);
  transform: translateX(-50%);
  color: var(--color-text);
}

.header-audio-player__button {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 2rem;
  height: 2rem;
  background: #000000;
  border: none;
  border-radius: var(--radius-xs);
  color: var(--color-text-inverse);
  font-size: var(--font-size-sm);
  line-height: 1;
  cursor: pointer;
}

.header-audio-player__button:focus-visible {
  outline: var(--border-focus);
  outline-offset: 2px;
}

.header-audio-player__time {
  flex: 0 0 auto;
  min-width: 2.625rem;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.header-audio-player__progress {
  flex: 1 1 auto;
  min-width: 6rem;
  accent-color: #000000;
  cursor: pointer;
}

/* ── Instruction bar ─────────────────────────────────────────────────────── */
.instruction-bar {
  width: auto;
  min-height: var(--instruction-bar-height);
  margin: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-subtle);
  border: var(--border-subtle);
  border-radius: var(--radius-sm);
}

.instruction-bar__title {
  margin-bottom: var(--space-1);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.instruction-bar__text {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-md);
  line-height: var(--line-height-tight);
}

/* ── Reading passage ─────────────────────────────────────────────────────── */
.reading-passage {
  color: var(--color-text);
  font-size: var(--font-size-md);
}

.reading-passage h2 {
  margin-bottom: var(--space-4);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.reading-passage p {
  max-width: 62rem;
  margin-bottom: var(--space-4);
  font-size: var(--font-size-md);
  line-height: var(--line-height-reading);
}

.reading-passage p:last-child { margin-bottom: 0; }

/* ── Question panel ──────────────────────────────────────────────────────── */
.question-group h2 {
  margin-bottom: var(--space-4);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.question-instruction {
  max-width: 54rem;
  margin-bottom: var(--space-4);
  font-size: var(--font-size-md);
  line-height: var(--line-height-base);
}

.question-form { max-width: 58rem; }

.question-block {
  margin: 0 0 var(--space-8);
  padding: 0;
  scroll-margin-top: var(--space-6);
}

.question-title {
  display: grid;
  grid-template-columns: var(--question-number-size) 1fr;
  align-items: start;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--font-size-md);
  line-height: var(--line-height-base);
}

.question-title p { margin: 0; }

.question-number {
  display: inline-grid;
  place-items: center;
  width: var(--question-number-size);
  height: var(--question-number-size);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.question-block.is-active .question-number {
  border: var(--border-focus);
  border-radius: var(--radius-xs);
}

/* ── Radio / Checkbox options ────────────────────────────────────────────── */
.radio-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: fit-content;
  margin-left: calc(var(--question-number-size) + var(--space-2));
  padding: var(--space-2) 0;
  color: var(--color-text);
  font-size: var(--font-size-md);
  line-height: var(--line-height-tight);
  cursor: pointer;
}

.radio-option input {
  width: 0.875rem;
  height: 0.875rem;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* ── MCQ multi-select ────────────────────────────────────────────────────── */
.multi-answer-group {
  margin-bottom: var(--space-10);
}

.multi-answer-group__legend {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--space-2);
  width: 100%;
  margin-bottom: var(--space-4);
  color: var(--color-text);
  font-size: var(--font-size-md);
  line-height: var(--line-height-base);
}

.multi-answer-group.is-active .question-number {
  border: var(--border-focus);
  border-radius: var(--radius-xs);
}

.question-number--range {
  width: auto;
  min-width: 2.125rem;
  padding: 0 var(--space-1);
}

.choice-option--checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  max-width: calc(100% - var(--question-number-size) - var(--space-4));
  margin-left: calc(var(--question-number-size) + var(--space-4));
  padding: var(--space-2) 0;
  color: var(--color-text);
  font-size: var(--font-size-md);
  line-height: var(--line-height-tight);
  cursor: pointer;
}

.choice-option--checkbox input {
  flex: 0 0 auto;
  width: 0.875rem;
  height: 0.875rem;
  margin-top: 0.125rem;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* ── Matching matrix ─────────────────────────────────────────────────────── */
.matching-features__matrix-wrap {
  width: 100%;
  padding: var(--space-8) var(--space-4) var(--space-6);
  overflow-x: auto;
  border: var(--border-width) solid var(--color-border-strong);
}

.matching-matrix {
  width: 100%;
  min-width: 46rem;
  border-collapse: collapse;
  table-layout: fixed;
  color: var(--color-text);
  font-size: var(--font-size-md);
  line-height: var(--line-height-base);
}

.matching-matrix th,
.matching-matrix td {
  height: 3.25rem;
  border-bottom: var(--border-width) solid var(--color-border-strong);
  vertical-align: middle;
}

.matching-matrix thead th {
  height: 2.625rem;
  border-bottom: var(--border-width-strong) solid var(--color-text);
  font-weight: var(--font-weight-bold);
  text-align: center;
}

.matching-matrix__item-heading { width: 62%; }

.matching-matrix tbody th {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 3.25rem;
  padding: 0 var(--space-2);
  font-weight: var(--font-weight-regular);
  text-align: left;
}

.matching-matrix tbody tr.is-active .question-number {
  border: var(--border-focus);
  border-radius: var(--radius-xs);
}

.matching-matrix td {
  width: 7.6%;
  border-left: var(--border-width) solid var(--color-text-muted);
  text-align: center;
}

.matching-matrix td label {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.matching-matrix input[type="radio"] {
  width: 0.875rem;
  height: 0.875rem;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* ── Completion (note / sentence / summary / table / flow / form) ─────────── */
.completion-input {
  display: inline-block;
  width: min(10rem, 100%);
  height: 1.5rem;
  padding: 0 var(--space-2);
  border: var(--border-subtle);
  border-radius: var(--radius-xs);
  background: var(--color-control);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  text-align: center;
  vertical-align: middle;
  font-family: var(--font-family-exam);
}

.completion-input::placeholder {
  color: var(--color-text);
  opacity: 1;
}

.completion-input:focus {
  outline: none;
  border-color: var(--color-focus);
  box-shadow: inset 0 0 0 1px var(--color-focus);
}

.completion-text {
  font-size: var(--font-size-md);
  line-height: var(--line-height-reading);
  color: var(--color-text);
}

.completion-word-bank {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
  padding: var(--space-4);
  border: var(--border-subtle);
  border-radius: var(--radius-sm);
  list-style: none;
}

.word-chip {
  min-height: 1.75rem;
  padding: 0 var(--space-2);
  background: var(--color-surface);
  border: var(--border-subtle);
  border-color: var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  line-height: 1.75rem;
}

/* ── Drag-drop answering (sentence endings / word bank / flow chart) ──────── */
.dnd-question {
  --dnd-gap-border: #6fa8ba;
  --dnd-gap-fill: #ffffff;

  color: var(--color-text);
}

.dnd-question [data-dnd-option],
.dnd-question [data-dnd-gap] {
  touch-action: none;
  user-select: none;
}

.sentence-ending-list,
.summary-text {
  color: var(--color-text);
  font-size: var(--font-size-md);
  line-height: var(--line-height-reading);
}

.sentence-ending-list {
  display: grid;
  gap: var(--space-5);
  padding: 0;
  margin: var(--space-6) 0 0;
  list-style: none;
}

.sentence-ending-item {
  display: grid;
  gap: var(--space-2);
}

.sentence-ending-item__prompt {
  margin: 0;
}

.ending-bank,
.summary-word-bank,
.flow-word-bank {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-2);
  padding: 0;
  margin: var(--space-6) 0 0;
  list-style: none;
}

.flow-word-bank {
  display: grid;
  margin-top: 0;
}

.answer-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.625rem;
  max-width: 100%;
  padding: 0 var(--space-2);
  background: var(--color-surface);
  border: var(--border-subtle);
  border-color: var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  cursor: grab;
  font-size: var(--font-size-sm);
  line-height: 1.25;
  text-align: left;
  white-space: normal;
}

.answer-chip:active {
  cursor: grabbing;
}

.answer-chip.is-selected {
  border-color: var(--color-focus);
  box-shadow: 0 0 0 2px rgb(65 142 170 / 25%);
}

.answer-chip.is-dragging {
  opacity: 0.35;
}

.answer-chip.is-used {
  display: none;
}

.answer-gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 32rem);
  min-width: 7rem;
  min-height: 1.75rem;
  padding: 0 var(--space-2);
  margin: 0 var(--space-1);
  background: var(--dnd-gap-fill);
  border: var(--border-width) dashed var(--dnd-gap-border);
  border-radius: var(--radius-xs);
  color: var(--color-text);
  cursor: pointer;
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  text-align: center;
  vertical-align: middle;
}

.answer-gap.is-filled {
  justify-content: flex-start;
  border-color: var(--color-focus);
  border-style: solid;
  box-shadow: inset 0 0 0 1px var(--color-focus);
  font-weight: var(--font-weight-regular);
  text-align: left;
}

.answer-gap.is-empty {
  color: var(--color-text);
}

.answer-gap.is-drag-over {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgb(0 118 168 / 18%);
}

.answer-gap.is-active {
  border-color: var(--color-focus);
  box-shadow: inset 0 0 0 1px var(--color-focus);
}

.answer-gap:focus-visible,
.answer-chip:focus-visible {
  outline: var(--border-focus);
  outline-offset: 2px;
}

.summary-text {
  margin: var(--space-8) 0 var(--space-5);
}

.summary-text p {
  margin: 0 0 var(--space-5);
}

.summary-text .answer-gap,
.completion-text .answer-gap {
  width: 6.25rem;
}

.sentence-ending-list .answer-gap {
  width: min(100%, 32rem);
  margin-left: 0;
}

.flow-chart-completion__workspace {
  display: grid;
  grid-template-columns: minmax(28rem, 31rem) minmax(11rem, 18rem);
  align-items: start;
  gap: var(--space-10);
}

.flow-chart-box {
  position: relative;
  min-height: 3.5rem;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 4px rgb(0 0 0 / 14%);
  color: var(--color-text);
  font-size: var(--font-size-md);
  line-height: var(--line-height-base);
}

.flow-chart-box:not(:last-child)::before {
  position: absolute;
  bottom: calc(var(--space-5) * -1);
  left: 50%;
  width: 0.1875rem;
  height: var(--space-5);
  background: var(--color-text);
  transform: translateX(-50%);
  content: "";
}

.flow-chart-box:not(:last-child)::after {
  position: absolute;
  bottom: calc((var(--space-5) + 0.125rem) * -1);
  left: 50%;
  width: 0;
  height: 0;
  border-top: 0.625rem solid var(--color-text);
  border-right: 0.375rem solid transparent;
  border-left: 0.375rem solid transparent;
  transform: translateX(-50%);
  content: "";
}

.flow-chart-box p {
  margin: 0;
}

.flow-chart-box .answer-gap {
  width: 6.25rem;
}

.drag-ghost {
  position: fixed;
  z-index: calc(var(--z-overlay) + 5);
  max-width: 24rem;
  pointer-events: none;
  transform: translate(-50%, -50%);
  box-shadow: 0 3px 12px rgb(0 0 0 / 20%);
}

.dnd-live-region {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── Short answer ────────────────────────────────────────────────────────── */
.short-answer-input {
  display: block;
  width: min(20rem, 100%);
  margin-top: var(--space-3);
  margin-left: calc(var(--question-number-size) + var(--space-2));
  padding: var(--space-2) var(--space-3);
  border: var(--border-strong);
  border-radius: var(--radius-xs);
  background: var(--color-control);
  color: var(--color-text);
  font-size: var(--font-size-md);
  font-family: var(--font-family-exam);
  line-height: var(--line-height-base);
}

.short-answer-input:focus {
  outline: none;
  border-color: var(--color-focus);
  box-shadow: inset 0 0 0 1px var(--color-focus);
}

/* ── Labeling ────────────────────────────────────────────────────────────── */
.labeling-image {
  max-width: 100%;
  height: auto;
  border: var(--border-subtle);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
}

/* ── Navigator chips ─────────────────────────────────────────────────────── */
.part-label,
.part-progress,
.question-chip {
  font-size: var(--font-size-md);
  line-height: 1;
}

.part-label { flex: 0 0 auto; font-weight: var(--font-weight-bold); }
.part-progress { color: var(--color-text-muted); }

.question-list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.question-chip {
  display: grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.625rem;
  color: var(--color-text);
  border-top: var(--border-width-strong) solid var(--color-border);
  background: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
  cursor: pointer;
  font-family: var(--font-family-exam);
  font-size: var(--font-size-md);
}

.question-chip.is-answered {
  background: #d9d9d9;
  border-color: #999;
}

.question-chip.is-current {
  width: var(--question-number-size);
  height: var(--question-number-size);
  border: var(--border-focus);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  color: var(--color-text);
}

/* ── Prev / Next buttons ─────────────────────────────────────────────────── */
.page-button {
  display: grid;
  place-items: center;
  width: 3.375rem;
  height: 3.375rem;
  color: var(--color-text-inverse);
  font-size: 2.25rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  background: #000;
  border: none;
  cursor: pointer;
}

.page-button i {
  font-size: 1.5rem;
  line-height: 1;
}

.page-button:disabled { cursor: not-allowed; opacity: 0.4; }

/* ── Submit button ───────────────────────────────────────────────────────── */
.submit-button {
  display: grid;
  place-items: center;
  width: var(--navigator-height);
  height: var(--navigator-height);
  margin-left: auto;
  background: var(--color-control-disabled);
  color: var(--color-text-muted);
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  border: none;
  cursor: pointer;
}

.submit-button i {
  font-size: 1.25rem;
  line-height: 1;
}

.submit-button.is-ready {
  background: var(--color-success);
  color: var(--color-surface);
}

.icon-button:hover,
.question-chip:hover,
.word-chip:hover,
.page-button:hover,
.submit-button:hover {
  filter: brightness(0.96);
}

.navigator-part:not(.is-active) {
  cursor: pointer;
}

.navigator-part:not(.is-active):hover {
  background: var(--color-surface-muted);
}

/* ── Loading / error / submitted states ─────────────────────────────────── */
.exam-loading,
.exam-error,
.exam-submitted {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  background: var(--color-surface);
  font-family: var(--font-family-exam);
  color: var(--color-text);
  font-size: var(--font-size-lg);
}

.exam-submitted__icon {
  font-size: 3rem;
  color: var(--color-success);
}

/* ── Listening layout ────────────────────────────────────────────────────── */
.listening-main {
  position: fixed;
  top: calc(var(--header-height) + 90px);
  right: 0;
  bottom: var(--navigator-height);
  left: 0;
  height: calc(100vh - var(--header-height) - var(--navigator-height) - 90px);
  padding: var(--space-4) var(--space-4) calc(var(--space-12) * 2);
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--color-surface);
}

.listening-question-panel {
  width: min(48rem, 100%);
}

/* Listening footer: 4 equal-width part slots + submit */
.listening-navigator {
  grid-template-columns: repeat(4, 1fr) var(--navigator-height);
}

/* Audio intro overlay */
.audio-intro-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  background: rgb(0 0 0 / 68%);
}

.audio-intro-overlay.is-visible { display: flex; }

.audio-intro {
  display: grid;
  justify-items: center;
  width: min(74rem, 100%);
  color: var(--color-surface);
  text-align: center;
}

.headphone-icon {
  position: relative;
  width: 7.25rem;
  height: 5.25rem;
  margin-bottom: var(--space-7);
}

.headphone-icon::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: 6rem;
  height: 4.25rem;
  border: 0.75rem solid var(--color-surface);
  border-bottom: 0;
  border-radius: 6rem 6rem 0 0;
  transform: translateX(-50%);
  content: "";
}

.headphone-icon__cup {
  position: absolute;
  bottom: 0;
  width: 1.25rem;
  height: 2.5rem;
  background: var(--color-surface);
  border-radius: 0.5rem 0.5rem 0 0;
}

.headphone-icon__cup--left { left: 1.25rem; }
.headphone-icon__cup--right { right: 1.25rem; }

.audio-intro__message {
  max-width: 73rem;
  margin-bottom: var(--space-6);
  font-size: var(--font-size-md);
  line-height: var(--line-height-base);
}

.audio-intro__continue {
  margin-bottom: var(--space-4);
  font-size: var(--font-size-md);
  line-height: var(--line-height-base);
}

.audio-play-button {
  display: inline-flex;
  align-items: center;
  min-height: 2.875rem;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  background: var(--color-text);
  border: none;
  border-radius: var(--radius-xs);
  color: var(--color-surface);
  font-family: var(--font-family-exam);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}

.audio-play-button:hover { background: #000; }

.audio-play-button__icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  background: var(--color-surface);
  border-radius: 50%;
}

.audio-play-button__icon::before {
  width: 0;
  height: 0;
  margin-left: 0.1875rem;
  border-top: 0.3125rem solid transparent;
  border-bottom: 0.3125rem solid transparent;
  border-left: 0.5rem solid var(--color-text);
  content: "";
}

/* Audio status in header */
.test-taker { display: grid; gap: 0.125rem; }

.audio-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  line-height: 1;
}

.audio-status i { font-size: 0.875rem; }

/* ── Writing layout ──────────────────────────────────────────────────────── */
.writing-main {
  --left-panel-width: 50%;

  position: fixed;
  top: calc(var(--header-height) + 90px);
  right: 0;
  bottom: var(--navigator-height);
  left: 0;
  display: grid;
  grid-template-columns: var(--left-panel-width) 18px minmax(0, 1fr);
  height: calc(100vh - var(--header-height) - var(--navigator-height) - 90px);
  background: var(--color-surface);
}

.writing-task-panel,
.writing-answer-panel {
  height: 100%;
  overflow-y: auto;
  background: var(--color-surface);
}

.writing-task-panel {
  padding: var(--space-8) var(--space-4) var(--space-10);
}

.writing-answer-panel {
  padding: var(--space-12) var(--space-10) var(--space-10) var(--space-5);
}

.writing-task {
  max-width: 54rem;
  color: var(--color-text);
  font-size: var(--font-size-md);
  line-height: var(--line-height-base);
}

.writing-task__stimulus {
  display: block;
  max-width: 100%;
  height: auto;
  margin-bottom: var(--space-6);
  border-radius: var(--radius-sm);
}

.writing-task__intro,
.writing-task__topic,
.writing-task__question {
  margin: 0 0 var(--space-5);
}

.writing-task__topic,
.writing-task__question {
  font-weight: var(--font-weight-bold);
}

.writing-task__note {
  margin: var(--space-6) 0 0;
}

.writing-answer-form {
  display: grid;
  justify-items: end;
  width: 100%;
}

.writing-answer {
  width: 100%;
  min-height: 11rem;
  padding: var(--space-3);
  resize: none;
  background: var(--color-control);
  border: var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
  line-height: var(--line-height-base);
}

.writing-answer:focus {
  border-color: var(--color-focus);
  box-shadow: inset 0 0 0 1px var(--color-focus);
  outline: none;
}

.word-count {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-md);
  line-height: var(--line-height-tight);
  text-align: right;
}

.word-count--met {
  color: var(--color-success, #0a7b44);
  font-weight: var(--font-weight-bold);
}

/* Writing footer: 2 equal task slots + submit */
.writing-navigator {
  grid-template-columns: repeat(2, minmax(0, 1fr)) var(--navigator-height);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 56.25rem) {
  .exam-main {
    position: static;
    display: block;
    height: auto;
    min-height: calc(100vh - var(--header-height) - var(--navigator-height) - 90px);
    margin-top: calc(var(--header-height) + 90px);
    margin-bottom: var(--navigator-height);
    overflow-x: hidden;
  }

  .reading-panel,
  .question-panel {
    height: auto;
    min-height: 30rem;
    max-width: 100%;
    overflow: visible;
    padding: var(--space-5) var(--space-4);
  }

  .reading-panel { border-bottom: var(--border-subtle); }
  .question-panel { padding-bottom: calc(var(--space-12) + var(--space-4)); }

  .split-divider { display: none; }

  .question-navigator {
    grid-template-columns: 1fr var(--navigator-height);
  }

  .navigator-part:not(.is-active) { display: none; }

  .floating-navigation {
    right: calc(var(--navigator-height) + var(--space-3));
  }

  .writing-main {
    position: static;
    display: grid;
    grid-template-columns: 1fr;
    height: auto;
    min-height: calc(100vh - var(--header-height) - var(--navigator-height) - 90px);
    margin-top: calc(var(--header-height) + 90px);
    margin-bottom: var(--navigator-height);
  }

  .writing-main .split-divider { display: none; }

  .writing-task-panel,
  .writing-answer-panel {
    height: auto;
    overflow: visible;
  }

  .writing-answer-panel { padding: var(--space-4); }
  .writing-answer { min-height: 18rem; }

  .writing-navigator {
    grid-template-columns: repeat(2, minmax(0, 1fr)) var(--navigator-height);
  }

  .flow-chart-completion__workspace {
    grid-template-columns: 1fr;
  }

  .flow-word-bank {
    display: flex;
  }
}

@media (max-width: 42rem) {
  :root {
    --header-height:          3rem;
    --instruction-bar-height: 4rem;
    --navigator-height:       3.25rem;
  }

  .exam-header { padding: 0 var(--space-3); }
  .exam-header__identity { gap: var(--space-3); }
  .exam-logo { font-size: 1.625rem; }

  .instruction-bar {
    right: var(--space-2);
    left: var(--space-2);
    padding: var(--space-2) var(--space-3);
  }

  .exam-toolbar { gap: var(--space-1); }
  .navigator-part { padding: 0 var(--space-3) var(--space-2); }
  .question-list { gap: var(--space-1); }

  .floating-navigation {
    right: var(--space-3);
    bottom: calc(var(--navigator-height) + var(--space-4));
  }

  .page-button { width: 3rem; height: 3rem; }
}

/* ── Utility ─────────────────────────────────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Contrast theme (light/dark) ─────────────────────────────────────────── */
body.theme-default {
  color-scheme: light;
}

body.theme-contrast-dark {
  color-scheme: dark;
  --color-page: #000000;
  --color-surface: #000000;
  --color-surface-muted: #111111;
  --color-surface-subtle: #000000;
  --color-surface-raised: #0b0b0b;
  --color-text: #ffffff;
  --color-text-muted: #d0d0d0;
  --color-text-subtle: #a8a8a8;
  --color-text-inverse: #ffffff;
  --color-border: #6f6f6f;
  --color-border-strong: #bdbdbd;
  --color-divider: #8a8a8a;
  --color-control: #000000;
  --color-control-muted: #111111;
  --color-control-disabled: #141414;
  --color-primary: #b46f4d;
  --color-primary-hover: #d68b65;
  --color-primary-soft: #21110a;
  --color-focus: #b46f4d;
}

body.theme-contrast-dark,
body.theme-contrast-dark .exam-main,
body.theme-contrast-dark .listening-main,
body.theme-contrast-dark .writing-main {
  background: var(--color-page);
  color: var(--color-text);
}

body.theme-contrast-dark input,
body.theme-contrast-dark textarea,
body.theme-contrast-dark select {
  background: var(--color-control);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

body.theme-contrast-dark input[type="radio"],
body.theme-contrast-dark input[type="checkbox"] {
  accent-color: #ffffff;
}

body.theme-contrast-dark .writing-answer {
  background: #000000;
  border-color: #bdbdbd;
  color: #ffffff;
}

body.theme-contrast-dark .completion-table,
body.theme-contrast-dark .matching-matrix,
body.theme-contrast-dark .map-answer-table {
  border-color: #bdbdbd;
  color: #ffffff;
}

body.theme-contrast-dark .completion-table th,
body.theme-contrast-dark .completion-table td,
body.theme-contrast-dark .matching-matrix th,
body.theme-contrast-dark .matching-matrix td,
body.theme-contrast-dark .map-answer-table th,
body.theme-contrast-dark .map-answer-table td {
  border-color: #bdbdbd;
}

body.theme-contrast-dark .exam-header,
body.theme-contrast-dark .instruction-bar,
body.theme-contrast-dark .question-navigator,
body.theme-contrast-dark .exam-part-navigator .navigator-part,
body.theme-contrast-dark .reading-panel,
body.theme-contrast-dark .question-panel,
body.theme-contrast-dark .listening-question-panel,
body.theme-contrast-dark .writing-task-panel,
body.theme-contrast-dark .writing-answer-panel {
  background: #000000;
  color: #ffffff;
}

body.theme-contrast-dark .exam-header {
  border-bottom-color: #242424;
}

body.theme-contrast-dark .instruction-bar {
  border-color: #8a8a8a;
}

body.theme-contrast-dark .icon-button,
body.theme-contrast-dark .exam-timer,
body.theme-contrast-dark .test-taker-id,
body.theme-contrast-dark .part-label,
body.theme-contrast-dark .part-progress {
  color: #ffffff;
}

body.theme-contrast-dark .navigator-part:not(.is-active):hover {
  background: #111111;
}

body.theme-contrast-dark .page-button {
  background: #ffffff;
  color: #000000;
}

body.theme-contrast-dark .header-audio-player__button {
  background: #ffffff;
  color: #000000;
}

body.theme-contrast-dark .submit-button {
  background: #141414;
  color: #ffffff;
}

body.theme-contrast-dark .question-chip.is-current,
body.theme-contrast-dark .question-block.is-active .question-number,
body.theme-contrast-dark .multi-answer-group.is-active .question-number,
body.theme-contrast-dark .divider-handle {
  background: #000000;
  color: #ffffff;
  border-color: #b46f4d;
}

body.theme-contrast-dark .question-chip {
  color: #ffffff;
  border-top-color: #242424;
}

body.theme-contrast-dark .question-chip.is-answered {
  background: #262626;
  border-color: #6f6f6f;
}

body.theme-contrast-dark .split-divider::before {
  background: linear-gradient(
    to right,
    transparent 0,
    transparent 6px,
    #8a8a8a 6px,
    #8a8a8a 12px,
    transparent 12px
  );
}

body.theme-contrast-dark .divider-handle {
  border-color: #bdbdbd;
}

body.theme-contrast-dark .audio-intro-overlay.is-visible {
  background: rgb(0 0 0 / 80%);
}

body.theme-contrast-dark ::-webkit-scrollbar {
  width: 1rem;
  height: 1rem;
}

body.theme-contrast-dark ::-webkit-scrollbar-track {
  background: #000000;
}

body.theme-contrast-dark ::-webkit-scrollbar-thumb {
  background: #777777;
  border: 3px solid #000000;
}

body.theme-contrast-dark .answer-chip,
body.theme-contrast-dark .answer-gap,
body.theme-contrast-dark .flow-chart-box {
  background: #000000;
  border-color: #bdbdbd;
  color: #ffffff;
}

body.theme-contrast-dark .answer-gap.is-filled,
body.theme-contrast-dark .answer-gap.is-drag-over,
body.theme-contrast-dark .answer-chip.is-selected {
  border-color: #8fd7ff;
  box-shadow: 0 0 0 2px rgb(143 215 255 / 30%);
}

/* ── Text size (regular / large / extra-large) ───────────────────────────── */
body.text-size-regular {
  --exam-content-font-size: 1rem;
  --exam-content-heading-size: 1rem;
  --exam-content-line-height: var(--line-height-reading);
  --exam-control-text-size: 1rem;
  --options-text-size-label-size: 1.125rem;
}

body.text-size-large {
  --exam-content-font-size: 1.125rem;
  --exam-content-heading-size: 1.125rem;
  --exam-content-line-height: 1.68;
  --exam-control-text-size: 1.0625rem;
  --options-text-size-label-size: 1.375rem;
}

body.text-size-extra-large {
  --exam-content-font-size: 1.25rem;
  --exam-content-heading-size: 1.25rem;
  --exam-content-line-height: 1.7;
  --exam-control-text-size: 1.125rem;
  --options-text-size-label-size: 1.625rem;
}

.instruction-bar__title,
.instruction-bar__text,
.reading-passage,
.question-panel,
.listening-question-panel,
.writing-task,
.writing-answer {
  font-size: var(--exam-content-font-size, 1rem);
}

.reading-passage h2,
.question-panel h2,
.listening-question-panel h2,
.writing-task__topic,
.writing-task__question {
  font-size: var(--exam-content-heading-size, 1rem);
}

.reading-passage,
.reading-passage p,
.question-instruction,
.question-title,
.radio-option,
.choice-option,
.listening-question-panel,
.writing-task,
.writing-answer {
  line-height: var(--exam-content-line-height, var(--line-height-reading));
}

.radio-option,
.choice-option {
  font-size: var(--exam-control-text-size, 1rem);
}

/* ── Options overlay (contrast / text size) ──────────────────────────────── */
.is-hidden {
  display: none !important;
}

body.has-open-dialog {
  overflow: hidden;
}

.options-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-overlay) + 10);
  min-height: 100vh;
  padding: var(--space-6) var(--space-4);
  background: var(--color-surface);
  color: var(--color-text);
}

.options-title {
  margin: 0 0 var(--space-8);
  color: var(--color-text);
  font-size: 1.75rem;
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-tight);
  text-align: center;
}

.options-back {
  position: fixed;
  top: var(--space-4);
  left: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: none;
  border: none;
  color: var(--color-text);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}

.options-back i { font-size: 1.5rem; line-height: 1; }

.options-close {
  position: fixed;
  top: var(--space-4);
  right: var(--space-8);
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  background: none;
  border: none;
  color: var(--color-text);
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  cursor: pointer;
}

.options-close i { font-size: 1.5rem; line-height: 1; }

.options-close:focus-visible,
.options-back:focus-visible,
.contrast-option:focus-visible,
.options-row:focus-visible {
  outline: var(--border-focus);
  outline-offset: 2px;
}

.options-panel {
  display: grid;
  width: min(40.75rem, 100%);
  margin: 0 auto;
}

.options-row {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) 1.25rem;
  align-items: center;
  min-height: 4.5rem;
  padding: 0 var(--space-6);
  gap: var(--space-3);
  background: var(--color-surface);
  border: none;
  color: var(--color-text);
  font-size: var(--font-size-lg);
  text-align: left;
  cursor: pointer;
}

.options-row:not(.options-row--primary) {
  border-right: var(--border-subtle);
  border-bottom: var(--border-subtle);
  border-left: var(--border-subtle);
}

.options-row--primary {
  min-height: 4.625rem;
  margin-bottom: var(--space-4);
  background: var(--color-brand);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-text-inverse);
}

.options-row--primary + .options-row {
  border-top: var(--border-subtle);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.options-row:last-child {
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.options-row__icon {
  color: currentColor;
  font-size: 1.125rem;
  text-align: center;
}

.options-row__icon i { font-size: 1.125rem; line-height: 1; }

.options-row:not(.options-row--primary) .options-row__icon {
  color: var(--color-text-muted);
}

.options-row__label { min-width: 0; }

.options-row__arrow {
  color: currentColor;
  font-size: 1rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  text-align: right;
}

.options-row__arrow i { font-size: 1rem; line-height: 1; }

.options-row:hover { filter: brightness(0.97); }

.contrast-panel,
.text-size-panel {
  display: grid;
  width: min(40.75rem, 100%);
  margin: 0 auto;
  border: var(--border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.contrast-option {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) 4rem;
  align-items: center;
  min-height: 4.5rem;
  padding: 0 var(--space-6);
  gap: var(--space-4);
  background: var(--color-surface);
  border: none;
  border-bottom: var(--border-subtle);
  color: var(--color-text);
  font-size: var(--font-size-lg);
  text-align: left;
  cursor: pointer;
}

.contrast-option:last-child { border-bottom: 0; }
.contrast-option:hover { background: var(--color-surface-muted); }

.contrast-option__check {
  font-size: 1.125rem;
  font-weight: var(--font-weight-bold);
  text-align: center;
}

.contrast-option__check i { font-size: 1.125rem; line-height: 1; }

.contrast-preview {
  display: grid;
  place-items: center;
  justify-self: end;
  width: 3.25rem;
  height: 2.25rem;
  padding: 0.4375rem;
  border: var(--border-subtle);
  box-shadow: 0 1px 4px rgb(0 0 0 / 18%);
}

.contrast-preview--light { background: #ffffff; color: #111111; }
.contrast-preview--dark { background: #000000; color: #ffffff; }
.contrast-preview i { font-size: 1.375rem; line-height: 1; }

.text-size-option {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: center;
  min-height: 5.875rem;
  padding: 0 var(--space-8);
  gap: var(--space-5);
  background: var(--color-surface);
  border: none;
  border-bottom: var(--border-subtle);
  color: var(--color-text);
  font-size: 1.375rem;
  text-align: left;
  cursor: pointer;
}

.text-size-option:last-child { border-bottom: 0; }
.text-size-option:hover { background: var(--color-surface-muted); }

.text-size-option__check {
  font-size: 1.125rem;
  font-weight: var(--font-weight-bold);
  text-align: center;
}

.text-size-option__check i { font-size: 1.125rem; line-height: 1; }

.text-size-option__label {
  font-size: var(--options-text-size-label-size, 1.125rem);
  line-height: var(--line-height-tight);
}

@media (max-width: 48rem) {
  .options-overlay { padding-top: var(--space-5); }
  .options-close { right: var(--space-4); }
  .options-back { left: var(--space-3); font-size: 1.375rem; }
  .options-title { font-size: 1.5rem; }
  .options-row { min-height: 4rem; padding: 0 var(--space-4); font-size: var(--font-size-md); }
  .contrast-option { min-height: 4rem; padding: 0 var(--space-4); font-size: var(--font-size-md); }
  .text-size-option { min-height: 4.5rem; padding: 0 var(--space-4); font-size: var(--font-size-lg); }
}

/* ── Notes & highlighting ─────────────────────────────────────────────────── */
.notes-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--z-header) + 2);
  display: grid;
  grid-template-rows: var(--header-height) 1fr;
  width: min(19.5rem, 86vw);
  background: #e9e9e9;
  border-left: var(--border-subtle);
  box-shadow: -2px 0 8px rgb(0 0 0 / 12%);
  pointer-events: none;
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform var(--duration-base) var(--ease-standard),
    visibility 0ms linear var(--duration-base);
}

.notes-panel.is-open {
  pointer-events: auto;
  transform: translateX(0);
  visibility: visible;
  transition:
    transform var(--duration-base) var(--ease-standard),
    visibility 0ms linear 0ms;
}

.notes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-4);
  background: var(--color-surface);
  border-bottom: var(--border-subtle);
  color: var(--color-text);
}

.notes-header__title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: 1;
}

.notes-close {
  display: grid;
  place-items: center;
  width: var(--control-height-md);
  height: var(--control-height-md);
  background: none;
  border: none;
  color: var(--color-text);
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  cursor: pointer;
}

.notes-close i { font-size: 1.25rem; line-height: 1; }

.notes-close:focus-visible,
.selection-toolbar__button:focus-visible,
.highlight-popover__button:focus-visible,
.note-card__delete:focus-visible,
.note-card__confirm:focus-visible,
.note-card__cancel:focus-visible {
  outline: var(--border-focus);
  outline-offset: 2px;
}

.notes-content {
  overflow-y: auto;
  color: var(--color-text);
}

.notes-empty {
  display: grid;
  min-height: calc(100vh - var(--header-height));
  place-items: center;
  padding: var(--space-8) var(--space-4);
  text-align: center;
}

.notes-empty__title {
  max-width: 15rem;
  margin: 0 0 var(--space-8);
  font-size: 1.375rem;
  font-weight: var(--font-weight-regular);
  line-height: 1.25;
}

.notes-empty__text {
  max-width: 13.75rem;
  margin: 0;
  font-size: var(--font-size-md);
  line-height: var(--line-height-tight);
}

.notes-list {
  display: grid;
  gap: var(--space-1);
  padding: 0;
  margin: 0;
  list-style: none;
}

.note-card {
  padding: var(--space-5) var(--space-4);
  background: var(--color-surface);
  border-bottom: var(--border-subtle);
  color: var(--color-text);
}

.note-card.is-active {
  background: #254dbc;
  border-bottom-color: #254dbc;
  color: #ffffff;
}

.note-card__meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  line-height: var(--line-height-tight);
}

.note-card__part { font-weight: var(--font-weight-bold); }

.note-card__snippet {
  min-width: 0;
  overflow: hidden;
  font-style: italic;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-card__textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-2);
  resize: vertical;
  background: var(--color-surface);
  border: var(--border-subtle);
  border-radius: var(--radius-xs);
  color: var(--color-text);
  font: inherit;
  line-height: var(--line-height-base);
}

.note-card__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-4);
}

.note-card__delete,
.note-card__confirm,
.note-card__cancel {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: var(--font-size-md);
  cursor: pointer;
}

.note-card__delete i,
.note-card__confirm i { font-size: 0.875rem; line-height: 1; }

.note-card.is-active .note-card__delete,
.note-card.is-active .note-card__confirm,
.note-card.is-active .note-card__cancel {
  color: #ffffff;
}

.note-card__delete:hover,
.note-card__confirm:hover,
.note-card__cancel:hover {
  text-decoration: underline;
}

.note-card__delete-confirm {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.note-card__delete-confirm p {
  margin: 0;
  line-height: var(--line-height-base);
}

.note-card__confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-5);
}

.text-selection-toolbar,
.highlight-action-popover {
  position: fixed;
  z-index: calc(var(--z-overlay) + 2);
  display: none;
  padding: var(--space-2);
  background: var(--color-surface);
  border: var(--border-subtle);
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 8px rgb(0 0 0 / 18%);
}

.text-selection-toolbar.is-visible,
.highlight-action-popover.is-visible {
  display: flex;
}

.selection-toolbar__button,
.highlight-popover__button {
  display: grid;
  min-width: 3.5rem;
  justify-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-tight);
  cursor: pointer;
}

.selection-toolbar__button:hover,
.highlight-popover__button:hover {
  background: var(--color-surface-muted);
  color: var(--color-text);
}

.selection-toolbar__icon,
.highlight-popover__icon { font-size: 1rem; line-height: 1; }

.selection-toolbar__icon i,
.highlight-popover__icon i { font-size: 1rem; line-height: 1; }

.highlighted-text {
  background: #FFF176;
  color: #000;
  cursor: pointer;
}

.highlighted-text.has-note { background: #4DD0E1; }

body.has-notes-open .exam-header,
body.has-notes-open .instruction-bar.instruction-bar--fixed,
body.has-notes-open .exam-main,
body.has-notes-open .listening-main,
body.has-notes-open .writing-main,
body.has-notes-open .question-navigator {
  right: min(19.5rem, 86vw);
}

body.has-notes-open .floating-navigation {
  right: calc(min(19.5rem, 86vw) + var(--space-8));
}

body.theme-contrast-dark .notes-panel {
  background: #111111;
  border-left-color: #777777;
}

body.theme-contrast-dark .notes-header {
  background: #000000;
  border-bottom-color: #777777;
}

body.theme-contrast-dark .note-card {
  background: #000000;
  border-bottom-color: #555555;
  color: #ffffff;
}

body.theme-contrast-dark .note-card.is-active {
  background: #102f8d;
  border-bottom-color: #102f8d;
}

body.theme-contrast-dark .note-card__delete,
body.theme-contrast-dark .note-card__confirm,
body.theme-contrast-dark .note-card__cancel {
  color: #9fd4ff;
}

body.theme-contrast-dark .note-card.is-active .note-card__delete,
body.theme-contrast-dark .note-card.is-active .note-card__confirm,
body.theme-contrast-dark .note-card.is-active .note-card__cancel {
  color: #ffffff;
}

body.theme-contrast-dark .text-selection-toolbar,
body.theme-contrast-dark .highlight-action-popover {
  background: #111111;
  border-color: #777777;
}

body.theme-contrast-dark .selection-toolbar__button,
body.theme-contrast-dark .highlight-popover__button {
  color: #ffffff;
}

@media (max-width: 56.25rem) {
  body.has-notes-open .exam-header,
  body.has-notes-open .instruction-bar.instruction-bar--fixed,
  body.has-notes-open .exam-main,
  body.has-notes-open .listening-main,
  body.has-notes-open .writing-main,
  body.has-notes-open .question-navigator {
    right: 0;
  }

  body.has-notes-open .floating-navigation {
    right: var(--space-8);
  }
}