/* ── Quiz screens ──────────────────────────────────────── */
.quiz-screen {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  min-height: calc(100vh - 56px);
}

/* ── Intro ─────────────────────────────────────────────── */
.quiz-intro-card {
  max-width: 480px;
  width: 100%;
}

.quiz-intro-title {
  font-family: var(--serif);
  font-size: 2.6rem;
  font-weight: 400;
  line-height: 1.1;
  margin: 0.4rem 0 0.75rem;
}

.quiz-intro-desc {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 1.75rem;
}

.quiz-intro-meta {
  display: flex;
  gap: 2rem;
  margin-bottom: 2rem;
}

.quiz-intro-meta div {
  font-size: 0.65rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.quiz-intro-meta strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 0.15rem;
  letter-spacing: 0;
  text-transform: none;
}

/* ── Question layout ───────────────────────────────────── */
/* The same shape as the journey reader: a reading column that holds the
   question and its answer, beside the map in a rounded card. */
#quizQuestion {
  height: calc(100vh - 56px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.quiz-layout {
  position: relative;
  flex: 1;
  display: flex;
  gap: clamp(0.75rem, 1.6vw, 1.5rem);
  min-height: 0;
  padding: clamp(0.75rem, 1.4vw, 1.25rem);
  overflow: hidden;
}

.quiz-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: clamp(360px, 40%, 580px);
  flex-shrink: 0;
  padding: clamp(0.5rem, 1.5vw, 1.25rem) clamp(0.25rem, 1vw, 0.75rem) 0.25rem;
  overflow-y: auto;
}

.quiz-map-pane {
  flex: 1;
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: 0 10px 34px rgba(24, 32, 44, 0.08);
}

.quiz-map-pane.is-pin-mode,
.quiz-map-pane.is-pin-mode #map {
  cursor: crosshair;
}

.quiz-map-hint {
  position: absolute;
  top: 0.85rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 2rem;
  padding: 0.35rem 1rem;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
  box-shadow: var(--sh-sm);
  white-space: nowrap;
}

/* ── Question column ──────────────────────────────────── */
.quiz-figure {
  flex: none;
  width: 100%;
  aspect-ratio: 16 / 8;
  max-height: 32vh;
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

.quiz-figure[hidden] { display: none; }

.quiz-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quiz-eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ui-action, var(--accent));
}

.quiz-eyebrow span + span::before { content: " · "; }

.quiz-steps {
  display: flex;
  gap: 6px;
  margin-top: -0.35rem;
}

.quiz-steps i {
  width: 28px;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 14%, transparent);
}

.quiz-steps i.is-done { background: color-mix(in srgb, var(--ui-action, var(--accent)) 45%, transparent); }
.quiz-steps i.is-current { background: var(--ui-action, var(--accent)); }

.quiz-question-text {
  margin: 0.25rem 0 0;
  font-size: clamp(1.6rem, 2.4vw, 2.35rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.quiz-subtext {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}

/* ── The timeline, under the question ─────────────────── */
.quiz-year {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.5rem;
  padding: 1.1rem 1.1rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: 18px;
}

.quiz-year.is-passive { display: none; }

.quiz-year-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
}

/* The era the handle stands on, in its colour ([data-era] sets --era-c). */
.quiz-year-era {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--era-c, var(--muted)) 78%, var(--text));
}

.quiz-year-display {
  font-size: clamp(2.2rem, 3.6vw, 3.2rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

#yearSlider {
  width: 100%;
  height: 6px;
  margin: 0.6rem 0 0.2rem;
  -webkit-appearance: none;
  appearance: none;
  background: color-mix(in srgb, var(--text) 14%, transparent);
  background: var(--quiz-eras, color-mix(in srgb, var(--text) 14%, transparent));
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}

#yearSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  background: var(--era-c, var(--ui-action, var(--accent)));
  border: 3px solid var(--bg);
  border-radius: 50%;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
  cursor: grab;
}

#yearSlider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  background: var(--era-c, var(--ui-action, var(--accent)));
  border: 3px solid var(--bg);
  border-radius: 50%;
  cursor: grab;
}

#yearSlider:focus-visible { outline: 2px solid var(--ui-action, var(--accent)); outline-offset: 6px; }
#yearSlider:disabled { cursor: default; }
#yearSlider:disabled::-webkit-slider-thumb { cursor: default; }

/* The eras' names under their bands, as on the atlas's time track. */
.quiz-year-bands {
  position: relative;
  height: 0.9rem;
}

.quiz-year-bands:empty { display: none; }

.quiz-year-bands span {
  position: absolute;
  left: var(--l);
  transform: translateX(-50%);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  color: color-mix(in srgb, var(--era-c) 70%, var(--muted));
}

.quiz-year-ends {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.quiz-panel-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 0.5rem;
}

/* With a picture, a timeline and an answer card the column outgrows the
   screen; the button on stays at its foot, as the journey's step row does. */
@media (min-width: 701px) {
  .quiz-panel-footer {
    position: sticky;
    bottom: 0;
    z-index: 1;
    padding-bottom: 0.25rem;
    background: var(--bg);
  }

  .quiz-panel-footer::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    height: 1.25rem;
    background: linear-gradient(transparent, var(--bg));
    pointer-events: none;
  }
}

.quiz-score-tally {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.quiz-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ── A written question's answers ─────────────────────── */
.quiz-choices {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.quiz-choices[hidden] { display: none; }

.quiz-choice {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  min-height: 48px;
  padding: 0.6rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  border-radius: 14px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.quiz-choice:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }

.quiz-choice-letter {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  font-size: 13px;
  font-weight: 700;
}

.quiz-choice[aria-pressed="true"] {
  border-color: var(--ui-action, var(--accent));
  background: color-mix(in srgb, var(--ui-action, var(--accent)) 8%, var(--bg));
}

.quiz-choice[aria-pressed="true"] .quiz-choice-letter {
  background: var(--ui-action, var(--accent));
  color: var(--bg);
}

/* After the answer: the right one in green, a wrong pick in red. */
.quiz-choices.is-answered .quiz-choice { cursor: default; }
.quiz-choices.is-answered .quiz-choice:hover { background: var(--bg); }

.quiz-choice.is-right {
  border-color: var(--quiz-right);
  background: color-mix(in srgb, var(--quiz-right) 10%, var(--bg));
}

.quiz-choice.is-right .quiz-choice-letter { background: var(--quiz-right); color: #fff; }

.quiz-choice.is-wrong {
  border-color: var(--quiz-wrong);
  background: color-mix(in srgb, var(--quiz-wrong) 9%, var(--bg));
}

.quiz-choice.is-wrong .quiz-choice-letter { background: var(--quiz-wrong); color: #fff; }

.quiz-keys {
  margin: -0.25rem 0 0;
  font-size: 12px;
  color: var(--muted);
}

/* Only where there is a keyboard to use. */
.quiz-keys:not([hidden]) { display: none; }
@media (hover: hover) and (pointer: fine) {
  .quiz-keys:not([hidden]) { display: block; }
}

/* ── Feedback ─────────────────────────────────────────── */
/* One meaning for colour everywhere: the right answer is always green, the
   pupil's own answer green when right and red when not, as on the answer
   buttons. The verdict and points carry the grade (a near miss is amber). */
:root {
  --quiz-right: #276749;
  --quiz-wrong: #b84040;
}

.quiz-feedback {
  --grade: #6b6f68;
  padding: 1.1rem 1.2rem 1rem;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--text) 3%, var(--bg));
  font-size: 14px;
  line-height: 1.5;
}

.quiz-feedback.is-good { --grade: #276749; }
.quiz-feedback.is-ok   { --grade: #9c5c17; }
.quiz-feedback.is-bad  { --grade: #b84040; }

.quiz-feedback-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.quiz-feedback-verdict {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grade);
}

.quiz-feedback-score {
  flex: none;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: var(--grade);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.quiz-feedback-label {
  margin: 0.9rem 0 0.1rem;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.quiz-feedback-answer {
  margin: 0;
  font-size: clamp(1.45rem, 2.2vw, 1.9rem);
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--quiz-right);
  font-variant-numeric: tabular-nums;
}

.quiz-feedback-yours {
  margin: 0.35rem 0 0;
  font-weight: 600;
}

.quiz-feedback-yours.is-right,
.summary-row-yours.is-right { color: var(--quiz-right); }
.quiz-feedback-yours.is-wrong,
.summary-row-yours.is-wrong { color: var(--quiz-wrong); }

.quiz-feedback-text {
  margin: 0.9rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  font-size: 15px;
  color: var(--text);
}

.quiz-feedback-culture {
  margin: 0.35rem 0 0;
  font-size: 12px;
  color: var(--muted);
}

/* ── Buttons ──────────────────────────────────────────── */
.quiz-btn-primary {
  display: block;
  width: 100%;
  padding: 0.7rem 1rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r);
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.15s;
}

.quiz-btn-primary:hover  { opacity: 0.88; }
.quiz-btn-primary:disabled { opacity: 0.38; cursor: not-allowed; }

.quiz-btn-secondary {
  display: block;
  width: 100%;
  padding: 0.7rem 1rem;
  background: none;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  border-radius: var(--r);
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background 0.15s;
}

.quiz-btn-secondary:hover { background: var(--surf-2); }

/* ── Pin markers ──────────────────────────────────────── */
.quiz-pin { display: flex; }

/* The miss, written on the line between the two pins. */
.quiz-distance {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--bg);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}

/* ── Summary ──────────────────────────────────────────── */
.quiz-summary-card {
  max-width: 680px;
  width: 100%;
  text-align: center;
}

.summary-score-display {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.6rem 0 0.4rem;
}

.summary-score {
  font-family: var(--serif);
  font-size: 4.5rem;
  font-weight: 400;
  line-height: 1;
}

.summary-score-max {
  font-size: 1rem;
  color: var(--muted);
}

.summary-grade {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 2rem;
  font-style: italic;
}

.summary-results {
  text-align: left;
  margin-bottom: 1.75rem;
}

/* Each question with the right answer and the pupil's, marked by grade,
   and a link to read about the stop. */
.summary-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.9rem 0 0.9rem 0.9rem;
  border-bottom: 1px solid var(--sep);
  border-left: 3px solid var(--grade, transparent);
}

.summary-row:first-child { border-top: 1px solid var(--sep); }
.summary-row.is-good { --grade: #276749; }
.summary-row.is-ok   { --grade: #9c5c17; }
.summary-row.is-bad  { --grade: #b84040; }

.summary-row-main { flex: 1; min-width: 0; }

.summary-row-type {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.summary-row-q {
  margin: 0.2rem 0 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}

.summary-row-answer {
  margin: 0.35rem 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--quiz-right);
}

.summary-row-yours {
  margin: 0.1rem 0 0;
  font-size: 13px;
  font-weight: 600;
}

.summary-row-link {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 13px;
  font-weight: 600;
  color: var(--ui-action, var(--accent));
  text-decoration: none;
}

.summary-row-link:hover { text-decoration: underline; }

.summary-row-pts {
  flex-shrink: 0;
  min-width: 48px;
  font-weight: 700;
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* One way on, and a quiet one to another quiz; the cross leaves. */
.summary-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

.quiz-more-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ui-action, var(--accent));
  text-decoration: underline;
  text-underline-offset: 3px;
}

.quiz-more-link:hover { text-decoration-thickness: 2px; }

/* ── Quiz nav elements ────────────────────────────────── */
.quiz-back-link {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s;
  white-space: nowrap;
}

.quiz-back-link:hover { color: var(--text); }

.quiz-nav-sep {
  color: var(--faint);
  margin: 0 0.5rem;
  font-size: 0.75rem;
}

.quiz-nav-title {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
}

.quiz-progress-nav {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--muted);
  white-space: nowrap;
}

/* ── Every journey's quiz, when no journey is chosen ──── */
/* Explore's own cards and sections (atlas-explore.css), on a page. */
#quizIntro:has(#quizChooser:not([hidden])) { align-items: flex-start; }

.quiz-chooser a.browse-card { color: inherit; text-decoration: none; }

/* ── Top bar ──────────────────────────────────────────── */
/* While answering, the top bar steps aside as it does on a journey, and
   the question column's own arrow is the way out. */
body.is-quizzing .site-nav { display: none; }

/* On the two-column layout the question fills the screen the bar left. A
   phone scrolls the page instead, so its height stays as the content needs. */
@media (min-width: 701px) {
  body.is-quizzing #quizQuestion { height: 100vh; height: 100dvh; }
}

.quiz-hero { position: relative; flex: none; }

.quiz-exit {
  position: absolute;
  top: calc(clamp(0.75rem, 1.4vw, 1.25rem) + 14px);
  right: calc(clamp(0.75rem, 1.4vw, 1.25rem) + 14px);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(20, 29, 29, 0.38);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  color: #fff;
  cursor: pointer;
}

.quiz-exit svg { width: 16px; height: 16px; }
.quiz-exit:hover,
.quiz-exit:focus-visible { background: rgba(21, 25, 23, 0.8); }

/* On a phone the cross sits on the picture; with no picture, on the page,
   in a row of its own above the question. */
@media (max-width: 700px) {
  /* A phone reads the start and the results from the top, below the cross,
     not centred halfway down the screen. */
  .quiz-screen { align-items: flex-start; padding-top: 4.5rem; }


  .quiz-hero:has(> .quiz-figure[hidden]) { min-height: 44px; }

  .quiz-layout:has(.quiz-figure[hidden]) .quiz-exit {
    top: clamp(0.75rem, 1.4vw, 1.25rem);
    right: clamp(0.75rem, 1.4vw, 1.25rem);
    border-color: color-mix(in srgb, var(--text) 14%, transparent);
    background: var(--bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: var(--text);
  }
}