/* Exam-mode preview styles. Scoped to mode=exam body classes only. */
:root {
  --exam-bg: #f4f5f7;
  --exam-panel: #ffffff;
  --exam-text: #1f2933;
  --exam-muted: #6b7280;
  --exam-line: #e5e7eb;
  --exam-accent: #b33a32;
  --exam-accent-dark: #8f2f29;
}

html.exam-mode-document,
html.exam-mode-document body {
  max-width: 100%;
  overflow-x: hidden;
}

body.reading-exam-mode {
  background: var(--exam-bg);
  color: var(--exam-text);
}

body.reading-exam-mode .header {
  min-height: 64px;
  background: var(--exam-panel);
  border-bottom: 1px solid var(--exam-line);
  box-shadow: none;
}

body.reading-exam-mode .header h1 {
  font-size: 1rem;
  letter-spacing: 0;
}

body.reading-exam-mode .header p,
body.reading-exam-mode .practice-nav .title {
  color: var(--exam-muted);
}

body.reading-exam-mode .header-link,
body.reading-exam-mode #note-btn,
body.reading-exam-mode #notes-panel,
body.reading-exam-mode #next-practice-btn,
body.reading-exam-mode .practice-nav .controls .practice-nav-link[href="/"] {
  display: none !important;
}

body.reading-exam-mode #timer,
body.reading-exam-mode .header-btn,
body.reading-exam-mode .exam-help-btn {
  border-color: var(--exam-line);
  border-radius: 6px;
  background: #ffffff;
  color: var(--exam-text);
  box-shadow: none;
}

body.reading-exam-mode #timer::before {
  content: "Time left ";
  color: var(--exam-muted);
  font-weight: 500;
}

body.reading-exam-mode .shell {
  background: var(--exam-bg);
}

body.reading-exam-mode #left {
  width: 52%;
  min-width: 0;
  border-right: 1px solid var(--exam-line);
}

body.reading-exam-mode #right {
  width: 48%;
  flex: 1 1 48%;
  min-width: 0;
  background: var(--exam-bg);
}

body.reading-exam-mode #divider {
  flex-basis: 6px;
  background: #eef0f3;
  border-left: 0;
  border-right: 1px solid var(--exam-line);
}

body.reading-exam-mode .pane,
body.reading-exam-mode .group {
  background: var(--exam-panel);
}

body.reading-exam-mode .group,
body.reading-exam-mode #results {
  border-color: var(--exam-line);
  border-radius: 6px;
  box-shadow: none;
}

body.reading-exam-mode .reading-explanation-card,
body.reading-exam-mode .reading-group-explanation,
body.reading-exam-mode .reading-question-explanation,
body.reading-exam-mode .reading-question-explanation-list,
body.reading-exam-mode .reading-vocabulary-panel,
body.reading-exam-mode .vocabulary-panel,
body.reading-exam-mode [class*="vocab"],
body.reading-exam-mode [data-vocab],
body.reading-exam-mode [class*="ai-"],
body.reading-exam-mode [class*="marketing"],
body.reading-exam-mode [class*="community"] {
  display: none !important;
}

body.reading-exam-mode #selbar {
  display: block;
}

body.reading-exam-mode .dropped-items:empty::after {
  content: "Drop here" !important;
}

.exam-mobile-hint,
.reading-exam-mobile-switch {
  display: none;
}

body.reading-exam-mode .practice-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 88px;
  align-items: stretch;
  gap: 14px;
  background: var(--exam-panel);
  border-top: 1px solid var(--exam-line);
  box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.05);
}

body.reading-exam-mode .practice-nav .questions {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  align-items: start;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 2px;
}

body.reading-exam-mode .practice-nav .controls {
  min-width: 0;
  margin-left: 0;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

body.reading-exam-mode .practice-nav .controls .practice-nav-link,
body.reading-exam-mode .practice-nav .controls button {
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 6px;
  white-space: nowrap;
}

.exam-mode-nav-group {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.exam-mode-nav-label {
  color: var(--exam-muted);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.exam-mode-nav-items {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

body.reading-exam-mode .q-item,
.listening-exam-nav .exam-q-item {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--exam-line);
  border-radius: 4px;
  background: #ffffff;
  color: var(--exam-text);
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

body.reading-exam-mode .q-item.is-missing,
.listening-exam-nav .exam-q-item.is-missing {
  color: #c7ccd4;
  background: #f6f7f9;
  cursor: default;
}

body.reading-exam-mode .q-item.answered,
.listening-exam-nav .exam-q-item.answered {
  border-color: rgba(31, 41, 51, 0.22);
  background: #eef2f7;
}

body.reading-exam-mode .q-item.current,
.listening-exam-nav .exam-q-item.current {
  border-color: var(--exam-accent);
  background: #fff5f4;
  color: var(--exam-accent-dark);
  box-shadow: inset 0 0 0 1px rgba(179, 58, 50, 0.18);
}

body.reading-exam-mode .q-item.review,
.listening-exam-nav .exam-q-item.review {
  border-style: dashed;
  border-color: #9ca3af;
}

body.reading-exam-mode .q-item.review::after,
.listening-exam-nav .exam-q-item.review::after {
  content: "";
  width: 5px;
  height: 5px;
  margin-left: 2px;
  border-radius: 999px;
  background: var(--exam-accent);
}

.exam-review-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: -2px 0 8px;
  padding: 0;
  border: 0;
}

.exam-review-toggle {
  min-height: 26px;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--exam-muted);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 700;
}

.exam-review-toggle:hover {
  border-color: var(--exam-line);
  background: #ffffff;
}

.exam-review-toggle.is-active {
  border-color: var(--exam-accent);
  color: var(--exam-accent-dark);
  background: #fff5f4;
}

body.listening-exam-mode {
  background: var(--exam-bg);
  color: var(--exam-text);
  overflow-x: hidden;
}

body.listening-exam-mode .lp-shell {
  width: 100%;
  max-width: none;
  padding: 78px 18px 128px;
}

body.listening-exam-mode .lp-practice {
  max-width: 1160px;
  margin: 0 auto;
}

body.listening-exam-mode .lp-beta-note {
  display: none !important;
}

body.listening-exam-mode .lp-back,
body.listening-exam-mode .lp-audio-range,
body.listening-exam-mode .lp-audio-time,
body.listening-exam-mode .lp-audio-separator,
body.listening-exam-mode .lp-audio-button:not(.lp-audio-play):not(.lp-audio-retry),
body.listening-exam-mode .lp-location,
body.listening-exam-mode .lp-explanation,
body.listening-exam-mode .lp-transcript-review,
body.listening-exam-mode .lp-results .lp-evidence,
body.listening-exam-mode .lp-results .lp-explanation,
body.listening-exam-mode [class*="transcript"],
body.listening-exam-mode [class*="evidence"],
body.listening-exam-mode [class*="intensive"] {
  display: none !important;
}

body.listening-exam-mode .lp-test-header,
body.listening-exam-mode .lp-audio,
body.listening-exam-mode .lp-question-group {
  border-color: var(--exam-line);
  border-radius: 6px;
  box-shadow: none;
  background: var(--exam-panel);
}

body.listening-exam-mode .lp-test-header .lp-kicker,
body.listening-exam-mode .lp-test-header .lp-duration {
  display: none !important;
}

body.listening-exam-mode .lp-audio-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

body.listening-exam-mode .lp-audio-play {
  background: var(--exam-accent);
}

.lp-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.lp-start.lp-start-secondary,
.lp-start.lp-start-exam {
  border: 1px solid var(--lp-line);
  background: #ffffff;
  color: var(--lp-blue);
}

.lp-start.lp-start-exam {
  border-color: rgba(179, 58, 50, 0.28);
  color: var(--exam-accent-dark);
}

.lp-start.lp-start-secondary:hover,
.lp-start.lp-start-exam:hover {
  background: #f8fafc;
  color: var(--lp-blue-dark);
}

.lp-exam-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  display: grid;
  grid-template-columns: minmax(170px, 1fr) auto auto auto;
  gap: 14px;
  align-items: center;
  min-height: 58px;
  padding: 10px 18px;
  background: var(--exam-panel);
  border-bottom: 1px solid var(--exam-line);
}

.lp-exam-topbar strong {
  color: var(--exam-text);
  font-size: 0.98rem;
}

.lp-exam-topbar span {
  color: var(--exam-muted);
  font-size: 0.88rem;
}

.lp-exam-time {
  color: var(--exam-accent-dark) !important;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.lp-exam-audio-state {
  min-width: 150px;
}

.listening-exam-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 18px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--exam-panel);
  border-top: 1px solid var(--exam-line);
  box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.05);
}

.listening-exam-nav-title {
  color: var(--exam-muted);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 30px;
  white-space: nowrap;
}

.listening-exam-nav-groups {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 12px;
  min-width: 0;
}

.listening-exam-nav-group {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.listening-exam-nav-label {
  color: var(--exam-muted);
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.listening-exam-nav-items {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.listening-exam-exit {
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid var(--exam-line);
  border-radius: 4px;
  background: #ffffff;
  color: var(--exam-text);
  cursor: pointer;
  font-weight: 700;
}

@media (max-width: 980px) {
  body.reading-exam-mode {
    overflow: auto;
    min-height: 100dvh;
  }

  body.reading-exam-mode .header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    justify-content: stretch;
    min-height: 0;
    gap: 6px;
    padding: 8px 10px;
    align-items: center;
  }

  body.reading-exam-mode .header h1 {
    font-size: 0.84rem;
    line-height: 1.25;
  }

  body.reading-exam-mode #exam-subtitle {
    display: none;
  }

  body.reading-exam-mode .header-content {
    grid-column: 1;
    flex: 1 1 112px;
    gap: 0;
  }

  body.reading-exam-mode .header-controls {
    grid-column: 2;
    width: auto !important;
    flex-wrap: nowrap;
    gap: 5px;
    justify-content: flex-end;
  }

  body.reading-exam-mode #timer,
  body.reading-exam-mode .header-btn,
  body.reading-exam-mode .exam-help-btn {
    min-height: 28px;
    padding: 5px 6px;
    font-size: 0.7rem;
  }

  body.reading-exam-mode #timer::before {
    content: "";
  }

  body.reading-exam-mode .shell {
    display: block;
    min-height: calc(100dvh - 132px);
  }

  body.reading-exam-mode #left,
  body.reading-exam-mode #right {
    width: 100%;
    min-width: 0;
    border-right: 0;
  }

  body.reading-exam-mode #divider {
    display: none;
  }

  body.reading-exam-mode.reading-mobile-show-passage #right,
  body.reading-exam-mode.reading-mobile-show-questions #left {
    display: none;
  }

  body.reading-exam-mode .practice-nav {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    max-height: 22dvh;
    padding: 8px 10px;
    overflow: hidden;
  }

  body.reading-exam-mode .practice-nav .title {
    display: none;
  }

  body.reading-exam-mode .practice-nav .questions {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 3px;
  }

  body.reading-exam-mode .practice-nav .controls {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
  }

  .reading-exam-mobile-switch,
  body.reading-exam-mode .exam-mobile-hint {
    display: flex;
  }

  .reading-exam-mobile-switch {
    grid-column: 1 / -1;
    width: 100%;
    gap: 5px;
  }

  .reading-exam-mobile-switch button {
    min-height: 28px;
    flex: 1 1 0;
    border: 1px solid var(--exam-line);
    border-radius: 4px;
    background: #ffffff;
    color: var(--exam-text);
    font-size: 0.78rem;
    font-weight: 800;
  }

  .reading-exam-mobile-switch button.is-active {
    border-color: var(--exam-accent);
    color: var(--exam-accent-dark);
    background: #fff5f4;
  }

  .exam-mobile-hint {
    grid-column: 1 / -1;
    margin: 0;
    padding: 5px 8px;
    border: 1px solid var(--exam-line);
    border-radius: 4px;
    background: #ffffff;
    color: var(--exam-muted);
    font-size: 0.72rem;
    line-height: 1.3;
  }

  .exam-mode-nav-group {
    display: block;
    flex: 0 0 auto;
    width: max-content;
    min-width: max-content;
  }

  .exam-mode-nav-label {
    margin-bottom: 4px;
    font-size: 0.68rem;
  }

  .exam-mode-nav-items {
    flex-wrap: nowrap;
    gap: 4px;
  }

  body.reading-exam-mode .practice-nav .controls .practice-nav-link,
  body.reading-exam-mode .practice-nav .controls button {
    min-height: 28px;
    padding: 5px 8px;
    font-size: 0.74rem;
  }
}

@media (max-width: 760px) {
  body.listening-exam-mode .lp-shell {
    padding: 86px 8px 106px;
  }

  .lp-card-actions {
    grid-template-columns: 1fr;
  }

  .lp-exam-topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 8px;
    min-height: 0;
    padding: 7px 10px;
  }

  .lp-exam-topbar strong {
    grid-column: 1 / -1;
    font-size: 0.84rem;
    line-height: 1.2;
  }

  .lp-exam-topbar span {
    min-width: 0;
    font-size: 0.72rem;
    line-height: 1.2;
  }

  body.listening-exam-mode .exam-mobile-hint {
    display: block;
    grid-column: 1 / -1;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 0.7rem;
  }

  .listening-exam-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    max-height: 94px;
    padding: 7px 8px;
    padding-bottom: calc(7px + env(safe-area-inset-bottom, 0px));
    overflow-x: auto;
    overflow-y: hidden;
  }

  .listening-exam-nav-title {
    display: none;
  }

  .listening-exam-nav-groups {
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
  }

  .listening-exam-nav-group {
    display: block;
    flex: 0 0 auto;
    grid-template-columns: 1fr;
    min-width: max-content;
  }

  .listening-exam-nav-label {
    margin-bottom: 4px;
    font-size: 0.68rem;
  }

  .listening-exam-nav-items {
    flex-wrap: nowrap;
    gap: 4px;
  }

  body.listening-exam-mode .lp-question,
  body.listening-exam-mode .lp-audio-controls {
    grid-template-columns: 1fr;
  }

  body.listening-exam-mode .lp-test-header,
  body.listening-exam-mode .lp-audio,
  body.listening-exam-mode .lp-question-group {
    padding: 10px;
  }

  body.listening-exam-mode .lp-test-header h1 {
    font-size: 1rem;
  }

  body.listening-exam-mode .lp-audio-controls {
    display: flex;
    gap: 8px;
  }

  body.listening-exam-mode .lp-audio-play {
    min-height: 32px;
    padding: 6px 12px;
  }

  .listening-exam-exit {
    min-height: 28px;
    padding: 4px 8px;
    font-size: 0.74rem;
  }

  body.reading-exam-mode .q-item,
  .listening-exam-nav .exam-q-item {
    width: 28px;
    height: 28px;
    font-size: 0.76rem;
  }
}