/* ==========================================================================
   TRIDENT components.
   One strong idea per screen; everything around it stays quiet.
   ========================================================================== */

/* ==========================================================================
   HOME — Today's Expedition
   ========================================================================== */

/* The hero: a picture and the facts beside it. Shorter than the white box it
   replaces, and the picture carries the weight so the type need not. */
.expedition {
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 0; align-items: stretch; overflow: hidden;
  background: var(--surface); border: 2px solid var(--ink);
  border-radius: var(--radius); margin-bottom: var(--sp-5);
}
.exp-art { position: relative; background: var(--sky); min-height: 240px; display: flex; }
.exp-art .hi { margin: 0; display: flex; flex-direction: column; width: 100%; }
.exp-art .hi-frame { flex: 1 1 auto; min-height: 200px; aspect-ratio: auto !important; border-radius: 0; border: 0; }
.exp-art .hi-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.exp-art .hi-cap { border-radius: 0; padding: var(--sp-3) var(--sp-5) var(--sp-4); gap: var(--sp-2); }

.exp-body { padding: var(--sp-6); display: flex; flex-direction: column; justify-content: center; }
.exp-where {
  display: flex; align-items: center; gap: 6px; margin: 0 0 var(--sp-2);
  font-size: var(--step--1); font-weight: 600; color: var(--teal-ink);
}
.exp-title { font-size: var(--step-5); line-height: 1.06; margin: 0 0 var(--sp-3); }
.exp-facts { font-size: var(--step-1); margin: 0 0 var(--sp-5); color: var(--text); max-width: none; }
.exp-xp { display: block; color: var(--gold-ink); margin-top: 2px; }
.exp-body .btn-lg { align-self: flex-start; font-size: var(--step-1); padding: var(--sp-4) var(--sp-6); min-height: 54px; }

/* the small route inside the hero: three dots on a line */
.exp-route {
  list-style: none; display: flex; align-items: center; gap: 0;
  margin: var(--sp-5) 0 0; padding: 0;
}
.exp-stop { display: flex; align-items: center; gap: 6px; font-size: var(--step--1); color: var(--text-muted); }
.exp-stop + .exp-stop::before {
  content: ''; width: 26px; height: 2px; background: var(--line-strong); margin: 0 10px;
}
.exp-dot {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--line-strong); background: var(--surface); color: var(--text-muted);
}
.exp-stop.is-done { color: var(--green-ink); }
.exp-stop.is-done .exp-dot { background: var(--green); border-color: var(--green); color: var(--text-on-green); }
.exp-stop.is-now { color: var(--saffron-ink); font-weight: 700; }
.exp-stop.is-now .exp-dot { border-color: var(--saffron); color: var(--saffron-ink); }

/* --- the pair below the hero --- */
.home-pair {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--sp-5); margin-bottom: var(--sp-6); align-items: start;
}
.home-pair-low { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* Continue your journey: picture | text, on one grid. The picture keeps its
   proportions (cover, never stretched) and the text column stacks heading,
   era, title, progress, action and source on one 8px rhythm. */
.journey-card {
  display: grid; grid-template-columns: 184px minmax(0, 1fr);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.jc-art { background: var(--sky); position: relative; min-height: 232px; }
.jc-art img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block;
}
.jc-art .hi-motif { position: absolute; inset: 0; height: 100%; aspect-ratio: auto !important; border: 0; border-radius: 0; }
.jc-body {
  padding: var(--sp-5); display: grid; gap: var(--sp-2);
  align-content: start; justify-items: start; min-width: 0;
}
.jc-heading { font-size: var(--step-0); font-weight: 700; color: var(--text-muted); margin: 0; letter-spacing: 0; }
.jc-title { font-size: var(--step-2); line-height: 1.25; margin: 0; max-width: 32ch; }
.jc-progress { width: 100%; margin-top: var(--sp-2); }
.jc-actions { margin-top: var(--sp-2); }
.jc-source {
  display: flex; align-items: flex-start; gap: 6px; margin: var(--sp-1) 0 0;
  font-size: var(--step--1); color: var(--text-muted); max-width: none;
}
.jc-source svg { flex: none; margin-top: 3px; }

/* Today in History */
.today-history {
  background: var(--wash-sky); border: 1px solid var(--teal);
  border-radius: var(--radius); padding: var(--sp-4);
  display: flex; flex-direction: column;
}
.th-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.th-head h2 { font-size: var(--step-1); margin: 0; }
.th-frame, .today-history .hi-motif {
  border-radius: var(--radius-sm); overflow: hidden; background: var(--sky);
  aspect-ratio: 16 / 9 !important; margin-bottom: var(--sp-3); max-height: 180px;
}
.th-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.th-year { font-weight: 800; font-size: var(--step-2); margin: 0; color: var(--teal-ink); }
.th-title { margin: 0 0 var(--sp-3); font-weight: 600; }
.th-down { margin: 0 0 var(--sp-3); color: var(--red-ink); font-weight: 600; }

/* --- the mission route --- */
.route-track { list-style: none; margin: 0; padding: 0; position: relative; }
.route-track::before {
  content: ''; position: absolute; left: 25px; top: 30px; bottom: 30px;
  width: 3px; background: var(--line-strong);
}
.checkpoint {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-3) var(--sp-3) 0; position: relative;
}
.cp-mark {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 3px solid var(--line-strong);
  color: var(--text-muted); position: relative; z-index: 1;
}
.checkpoint.is-active .cp-mark { border-color: var(--saffron); color: var(--saffron-ink); }
.checkpoint.is-done .cp-mark { background: var(--green); border-color: var(--green); color: var(--text-on-green); }
/* the line behind a finished checkpoint turns with it */
.checkpoint.is-done::before {
  content: ''; position: absolute; left: 25px; top: 0; bottom: 0; width: 3px;
  background: var(--green); z-index: 0;
}
.cp-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cp-title { font-weight: 700; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.cp-sub { font-size: var(--step--1); color: var(--text-muted); }
.cp-side { display: flex; align-items: center; gap: var(--sp-3); white-space: nowrap; }
.cp-xp { font-weight: 700; font-size: var(--step--1); color: var(--gold-ink); }
.checkpoint.is-locked .cp-mark { border-style: dashed; }

/* --- the guide's invitation --- */
.guide-invite {
  display: flex; align-items: center; gap: var(--sp-4);
  background: var(--wash-teal); border: 1px solid var(--teal);
  border-radius: var(--radius); padding: var(--sp-4);
}
.gi-fish {
  width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex: none;
  border: 2px solid var(--ink); background: var(--gold);
}
.gi-fish img { width: 100%; height: 100%; object-fit: cover; }
.guide-invite > div:not(.gi-fish) { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }

/* --- next reward --- */
.next-reward {
  display: flex; align-items: center; gap: var(--sp-4);
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
  padding: var(--sp-4); background: var(--surface);
}
.nr-art { flex: none; color: var(--line-strong); }
.nr-body { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }
.nr-kicker { font-size: var(--step--1); color: var(--text-muted); }
.nr-body b { font-size: var(--step-1); }

/* ==========================================================================
   LEARN — the class, the journey, the books
   ========================================================================== */
.course-head h1 { margin-bottom: var(--sp-3); }
/* the course meter and its action share a row, with clear air between them
   so the button never reads as the end of the bar */
.course-progress {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: end; gap: var(--sp-3) var(--sp-6);
  padding: var(--sp-4) var(--sp-5); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.cp-meter { min-width: 0; }

.journey-track {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: stretch; gap: 0; position: relative;
  border-top: 2px solid var(--line-strong); padding-top: var(--sp-5);
}
.waypoint { flex: 1; min-width: 0; position: relative; }
.waypoint::before {
  content: ''; position: absolute; top: calc(var(--sp-5) * -1 - 2px);
  left: 50%; width: 2px; height: var(--sp-5); background: var(--line-strong);
}
.wp-btn {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  width: 100%; background: none; border: 0; cursor: pointer; padding: var(--sp-2);
  color: var(--text); text-align: center;
}
.wp-mark {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--line-strong); background: var(--surface); color: var(--text-muted);
}
.waypoint.is-started .wp-mark { border-color: var(--saffron); color: var(--saffron-ink); }
.waypoint.is-complete .wp-mark { background: var(--green); border-color: var(--green); color: var(--text-on-green); }
.wp-name { font-weight: 700; font-size: var(--step--1); }
.wp-count { font-size: var(--step--1); color: var(--text-muted); }

/* --- filters: three on the surface, the rest in a drawer --- */
.filter-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field label { color: var(--text-muted); }
.search-wrap { position: relative; display: flex; align-items: center; }
.search-wrap svg { position: absolute; left: 10px; color: var(--text-muted); pointer-events: none; }
.search-wrap input { padding-left: 34px; }

.filter-foot { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-3); flex-wrap: wrap; }
.more-filters summary {
  cursor: pointer; font-weight: 600; font-size: var(--step--1); color: var(--teal-ink);
  padding: var(--sp-1) 0; list-style: none;
}
.more-filters summary::-webkit-details-marker { display: none; }
.more-filters summary::before { content: '+ '; font-weight: 800; }
.more-filters[open] summary::before { content: '– '; }
.filter-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-4);
  margin-top: var(--sp-3); padding: var(--sp-4);
  background: var(--surface-sunken); border-radius: var(--radius);
}

/* --- the lessons of a book --- */
.book-block .section-head h2 { font-size: var(--step-2); }
.lesson-list { list-style: none; margin: 0; padding: 0; }
.lesson-row {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center; gap: var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.lesson-row:last-child { border-bottom: 0; }
.lr-mark { color: var(--text-muted); display: grid; place-items: center; }
.lesson-row.is-done .lr-mark { color: var(--green); }
.lr-main {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: var(--sp-3) 0; text-decoration: none; color: var(--text);
}
.lr-main:hover .lr-title { color: var(--saffron-ink); text-decoration: underline; }
.lr-title { font-weight: 600; }
.lr-meta { font-size: var(--step--1); color: var(--text-muted); }
.lr-side { display: flex; align-items: center; gap: var(--sp-3); white-space: nowrap; }
.lr-time { font-size: var(--step--1); color: var(--text-muted); }

/* ==========================================================================
   THE READER — a single column, nothing beside it
   ========================================================================== */
.reader, .story { max-width: var(--shell-read); margin-inline: auto; }

.reader-top {
  display: flex; align-items: center; gap: var(--sp-4);
  padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-5);
}
.back-link {
  display: inline-flex; align-items: center; gap: 4px;
  text-decoration: none; font-weight: 600; color: var(--teal-ink);
}
.back-link:hover { text-decoration: underline; }
.reader-time { margin-left: auto; font-size: var(--step--1); color: var(--text-muted); }

.reader-title, .story-title {
  font-size: var(--step-5); line-height: 1.08; margin: 0 0 var(--sp-5);
}
.reader-rail { margin-bottom: var(--sp-6); }

.reader-intro { font-size: var(--step-1); line-height: 1.6; }

/* the passage itself: the only thing on the page with a tinted ground */
.passage {
  background: var(--surface); border-left: 3px solid var(--ink);
  padding: var(--sp-5) var(--sp-5) var(--sp-3);
  margin: var(--sp-5) 0 var(--sp-2);
}
.passage p { font-size: var(--step-1); line-height: 1.68; max-width: 62ch; }
.passage p:last-child { margin-bottom: var(--sp-3); }
.passage-note { font-size: var(--step--1); color: var(--text-muted); margin-bottom: var(--sp-6); }

.key-ideas { margin-bottom: var(--sp-6); }
.key-ideas h2 { font-size: var(--step-2); }
.key-ideas ul { margin: 0; padding-left: 0; list-style: none; }
.key-ideas li {
  padding: var(--sp-3) 0 var(--sp-3) var(--sp-5); border-top: 1px solid var(--line);
  position: relative; max-width: var(--measure);
}
.key-ideas li::before {
  content: ''; position: absolute; left: 0; top: calc(var(--sp-3) + 0.6em);
  width: 10px; height: 2px; background: var(--saffron);
}

/* --- the source: one line, everything behind it --- */
.source { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: var(--sp-6); }
.source summary {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); cursor: pointer; list-style: none;
  font-size: var(--step--1);
}
.source summary::-webkit-details-marker { display: none; }
.src-line { flex-grow: 1; min-width: 0; color: var(--text); font-weight: 600; }
.src-more { color: var(--teal-ink); font-weight: 600; white-space: nowrap; }
.source[open] .src-more::after { content: ' — hide'; }
.src-detail {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--sp-2) var(--sp-4);
  margin: 0; padding: var(--sp-4); border-top: 1px solid var(--line);
  font-size: var(--step--1);
}
.src-detail dt { color: var(--text-muted); }
.src-detail dd { margin: 0; }
.src-id { word-break: break-all; }

.check { border-top: 2px solid var(--ink); padding-top: var(--sp-5); margin-bottom: var(--sp-6); }
.check h2 { font-size: var(--step-2); }

.reader-finish { margin-bottom: var(--sp-6); }
.after-lesson {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-top: var(--sp-4); flex-wrap: wrap;
}

/* ==========================================================================
   QUIZ — one question at a time
   ========================================================================== */
.quiz-head { max-width: var(--shell-read); margin: 0 auto var(--sp-5); }
.quiz-stage { max-width: var(--shell-read); margin-inline: auto; }
.question { margin-bottom: var(--sp-6); }
.q-progress { margin-bottom: var(--sp-5); }
.q-timer { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); }
.q-timer .btn-quiet { margin-left: calc(var(--sp-3) * -1); }
.timer {
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--step--1);
  color: var(--text-muted);
}
.timer.is-low { color: var(--saffron-ink); }
.timer.is-out { color: var(--red-ink); }


.question-prompt {
  font-size: var(--step-3); line-height: 1.22; margin: 0 0 var(--sp-5);
}
.question-prompt:focus { outline: none; }

.options { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: grid; gap: var(--sp-3); }

/* One answer card. Every state keeps the same 2px border and radius, so a
   card never changes size or shifts when it is chosen or marked. */
.option {
  box-sizing: border-box; overflow: hidden;
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); min-height: 56px; cursor: pointer;
  font-size: var(--step-0); font-weight: 500; line-height: 1.45;
  background: var(--surface); border: 2px solid var(--line-strong);
  border-radius: var(--radius);
  transition: border-color var(--transition), background-color var(--transition);
}
.option > span:not(.opt-mark) { min-width: 0; overflow-wrap: anywhere; line-height: 1.45; }
.option:hover { border-color: var(--ink); background: var(--wash-navy); }

/* the radio: drawn, but still the native control underneath */
.option input {
  -webkit-appearance: none; appearance: none; margin: 0;
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  border: 2px solid var(--text-muted); background: var(--surface);
  display: grid; place-items: center; cursor: pointer;
}
.option input:checked { border-color: var(--ink); box-shadow: inset 0 0 0 4px var(--surface); background: var(--ink); }
.option input:focus-visible { outline: none; }
.option:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 3px; }

/* chosen, not yet checked */
.option:has(input:checked) { border-color: var(--ink); background: var(--wash-navy); }

/* after checking: green for the right answer, red for a wrong choice —
   and the words say it too, so colour is never the only signal */
.option.is-correct, .option.is-correct:hover, .option.is-correct:has(input:checked) {
  border-color: var(--green-ink); background: var(--wash-green);
}
.option.is-wrong, .option.is-wrong:hover, .option.is-wrong:has(input:checked) {
  border-color: var(--red-ink); background: var(--wash-red);
}
.option.is-correct input:checked { border-color: var(--green-ink); background: var(--green-ink); }
.option.is-wrong input:checked { border-color: var(--red-ink); background: var(--red-ink); }
.option.is-unanswered { opacity: 1; }
.option:has(input:disabled) { cursor: default; }

.opt-mark {
  display: inline-flex; align-items: center; gap: 6px; justify-self: end;
  font-size: var(--step--1); font-weight: 700; white-space: nowrap;
}
.opt-mark:empty { display: none; }
.option.is-correct .opt-mark { color: var(--green-ink); }
.option.is-wrong .opt-mark { color: var(--red-ink); }
.match-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-4); align-items: center;
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--line);
}
.match-row:last-child { border-bottom: 0; margin-bottom: var(--sp-5); }
.match-left { font-weight: 600; font-size: var(--step-0); }
.match-row select { min-height: 48px; }
.match-row select.is-correct { border-color: var(--green); background: var(--wash-green); }
.match-row select.is-wrong { border-color: var(--red); background: var(--wash-red); }

.order-list { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: grid; gap: var(--sp-2); }
.order-item {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); background: var(--surface);
  border: 2px solid var(--line-strong); border-radius: var(--radius);
}
.order-pos {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--text-on-ink); font-weight: 800; font-size: var(--step--1);
}
.order-label { font-weight: 600; }
.order-controls { display: flex; gap: 4px; }
.order-controls button {
  width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
.order-controls button:hover { border-color: var(--ink); }

.explanation {
  border-left: 3px solid var(--line-strong); padding: var(--sp-4) var(--sp-5);
  background: var(--surface); margin-bottom: var(--sp-5);
}
.explanation.is-correct { border-left-color: var(--green); }
.explanation.is-wrong { border-left-color: var(--red); }
.explanation p:last-child { margin-bottom: 0; }

.evidence {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  font-size: var(--step--1); color: var(--text-muted);
  border-top: 1px solid var(--line); padding-top: var(--sp-3); margin-top: var(--sp-3);
}
.evidence p { margin: 0; max-width: none; }
.e-label { font-weight: 700; color: var(--text); display: block; }

.quiz-action { margin-top: var(--sp-5); }
.next-step {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  border-top: 2px solid var(--ink); padding-top: var(--sp-5); margin-top: var(--sp-5);
}
.next-step p { margin: 0; }

.summary {
  background: var(--surface); border: 2px solid var(--ink);
  border-radius: var(--radius); padding: var(--sp-6); margin-bottom: var(--sp-5);
}
.summary-score { font-size: var(--step-5); font-weight: 800; line-height: 1; }

/* ==========================================================================
   TIMELINE CHALLENGE — an actual rail
   ========================================================================== */
.tl-intro { max-width: var(--measure); }
.tl-rail { position: relative; margin: var(--sp-5) 0 var(--sp-6); }
.tl-rail::before {
  content: 'earliest'; position: absolute; left: 0; top: -22px;
  font-size: var(--step--1); color: var(--text-muted);
}
.tl-rail::after {
  content: 'latest'; position: absolute; left: 0; bottom: -22px;
  font-size: var(--step--1); color: var(--text-muted);
}
.tl-cards {
  list-style: none; margin: 0; padding: 0 0 0 var(--sp-6);
  display: grid; gap: var(--sp-3); position: relative;
}
/* the rail the cards sit on */
.tl-cards::before {
  content: ''; position: absolute; left: 22px; top: 10px; bottom: 10px;
  width: 2px; background: var(--ink);
}
.tl-card {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: var(--sp-4); align-items: center;
  background: var(--surface); border: 2px solid var(--ink);
  border-radius: var(--radius); padding: var(--sp-3) var(--sp-4);
  position: relative;
  transition: transform var(--transition), border-color var(--transition);
}
.tl-card::before {
  content: ''; position: absolute; left: calc(var(--sp-6) * -1);
  top: 50%; width: var(--sp-6); height: 2px; background: var(--ink);
}
.tl-grip { color: var(--line-strong); cursor: grab; display: inline-flex; }
.tl-card.is-dragging { opacity: 0.5; }
.tl-card.is-moving { border-color: var(--saffron); box-shadow: 0 0 0 4px var(--wash-saffron); transform: translateX(6px); }
.tl-pos {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--text-on-ink); font-weight: 800; font-size: var(--step-1);
}
.tl-body { min-width: 0; }
.tl-label { font-weight: 600; display: block; }
.tl-cite { font-size: var(--step--1); color: var(--text-muted); }
.tl-year {
  font-weight: 800; font-variant-numeric: tabular-nums; font-size: var(--step-2);
  color: var(--teal-ink);
}
.tl-card.is-right { border-color: var(--green); }
.tl-card.is-wrong { border-color: var(--red); }

/* ==========================================================================
   DAILY STORY
   ========================================================================== */
.story-motif { margin: 0 0 var(--sp-6); }
.story-motif svg { width: 100%; height: 72px; display: block; }
.story p { font-size: var(--step-1); line-height: 1.68; }
.beat {
  font-size: var(--step-1); font-weight: 700; color: var(--saffron-ink);
  margin: var(--sp-6) 0 var(--sp-3); padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
}
.takeaway {
  background: var(--surface); border: 2px solid var(--ink);
  border-radius: var(--radius); padding: var(--sp-5); margin: var(--sp-6) 0;
}
.takeaway h2 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.takeaway p { margin: 0; }

/* ==========================================================================
   EVENT OF THE DAY
   ========================================================================== */
.event-card {
  display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--sp-5);
  align-items: start;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--sp-5); overflow: hidden;
}
.event-frame, .event-motif {
  border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-sunken);
  aspect-ratio: 4 / 3; display: grid; place-items: center; position: relative;
}
.event-frame img { width: 100%; height: 100%; object-fit: cover; }
.event-motif svg { width: 100%; height: 100%; display: block; }
.event-motif span {
  position: absolute; bottom: var(--sp-2); left: 0; right: 0; text-align: center;
  font-size: var(--step--2); color: var(--teal-ink);
}
.event-meta { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.event-year { font-weight: 800; font-size: var(--step-2); font-variant-numeric: tabular-nums; }
.event-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }

/* ==========================================================================
   COLLECTION
   ========================================================================== */
.goal {
  display: flex; align-items: center; gap: var(--sp-5);
  background: var(--surface); border: 2px solid var(--ink);
  border-radius: var(--radius); padding: var(--sp-6);
}
.goal-art { flex: none; color: var(--gold); }
.goal-body { min-width: 0; }
.goal-kicker { font-size: var(--step--1); font-weight: 700; color: var(--saffron-ink); }
.goal-body h2 { margin: var(--sp-1) 0 var(--sp-2); }
.goal-body p { margin-bottom: var(--sp-4); }

.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-4); }
.badge-tile, .artefact-tile {
  text-align: center; padding: var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.badge-tile.is-earned { border-color: var(--gold); }
.badge-tile.is-earned .badge-art { color: var(--gold); }
.badge-tile.is-locked { opacity: 0.72; }
.badge-tile.is-locked .badge-art { color: var(--line-strong); }
.badge-art, .artefact-art { margin: 0 auto var(--sp-2); }
.b-name, .a-name { font-weight: 700; }
.b-req, .a-note { font-size: var(--step--1); color: var(--text-muted); }
.b-state { font-size: var(--step--2); color: var(--text-muted); }
.artefact-tile { color: var(--teal); }

.locked-drawer summary {
  cursor: pointer; font-weight: 600; color: var(--teal-ink);
  padding: var(--sp-3) 0; border-top: 1px solid var(--line);
}
.locked-drawer .shelf { margin-top: var(--sp-4); }

/* ==========================================================================
   PROGRESS
   ========================================================================== */
.passport-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-5);
  align-items: end; margin-bottom: var(--sp-5);
}
.big-figure { font-size: var(--step-5); font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.figure-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.figure {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--sp-4);
}
.figure b { display: block; font-size: var(--step-3); font-weight: 800; line-height: 1.1; }
.figure span { font-size: var(--step--1); color: var(--text-muted); }
.figure.is-streak b { color: var(--saffron-ink); }
.figure.is-level b { color: var(--gold-ink); }
.figure.is-course b { color: var(--ink); }

.drawer { border-top: 1px solid var(--line); }
.drawer summary { cursor: pointer; font-weight: 600; padding: var(--sp-4) 0; color: var(--teal-ink); }
.drawer > div, .drawer > section { padding-bottom: var(--sp-5); }

.strip { display: flex; gap: 3px; }
.strip-cell { flex: 1; height: 26px; background: var(--surface-sunken); border: 1px solid var(--line); }
.strip-cell.badge-ok { background: var(--green); border-color: var(--green); }
.trend { display: flex; align-items: flex-end; gap: 6px; height: 132px; }
/* the column is the container; only the bar inside it is coloured, so the
   labels above and below stay on the page ground and keep their contrast */
.trend-col {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; gap: 4px; height: 100%; min-width: 0;
}
.trend-bar { width: 100%; background: var(--teal); border-radius: 1px 1px 0 0; min-height: 4px; }
.trend-bar.is-perfect { background: var(--green); }
.trend-bar.is-empty { background: var(--line-strong); }
.trend-label { font-size: var(--step--2); color: var(--text-muted); line-height: 1; }
.path-progress-row { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-3); }
.pp-head { min-width: 160px; font-weight: 600; }
.pp-track { flex-grow: 1; }

/* ==========================================================================
   Lists, tags, states — shared
   ========================================================================== */
.list { list-style: none; margin: 0; padding: 0; }
.list-item {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--line);
}
.li-main { flex-grow: 1; min-width: 0; }
.li-title { font-weight: 600; }
.li-meta { font-size: var(--step--1); color: var(--text-muted); }

.pill {
  display: inline-block; padding: 2px var(--sp-2); font-size: var(--step--2);
  border: 1px solid var(--line-strong); border-radius: var(--radius-xs); color: var(--text-muted);
}
.pill-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--step--2); font-weight: 700; padding: 2px var(--sp-2);
  border: 1px solid currentColor; border-radius: var(--radius-xs); color: var(--text-muted);
}
.tag-done { color: var(--green-ink); }
.tag-xp, .tag-gold { color: var(--gold-ink); }
.tag-beta, .tag-limited, .tag-soon { color: var(--saffron-ink); }

.notice {
  background: var(--surface); border-left: 3px solid var(--teal);
  padding: var(--sp-4); border-radius: 0 var(--radius) var(--radius) 0;
}
.notice p { margin: 0; }
.notice-done { border-left-color: var(--green); }

.state-box {
  background: var(--surface); border: 1px dashed var(--line-strong);
  border-radius: var(--radius); padding: var(--sp-5); color: var(--text-muted);
}
.state-box.is-error { border-color: var(--red); color: var(--red-ink); }

.empty-state {
  text-align: center; padding: var(--sp-7) var(--sp-5);
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
  background: var(--surface);
}
.empty-state h3 { margin-bottom: var(--sp-2); }
.empty-state p { margin-inline: auto; margin-bottom: var(--sp-4); }
.empty { color: var(--text-muted); }

.spinner {
  display: inline-block; width: 15px; height: 15px; vertical-align: -2px;
  border: 2px solid var(--line-strong); border-top-color: var(--teal);
  border-radius: 50%; animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.stack > * + * { margin-top: var(--sp-4); }
.push { margin-left: auto; }
.grid { display: grid; gap: var(--sp-4); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--sp-5);
}
.eyebrow { font-weight: 700; font-size: var(--step--1); color: var(--text-muted); }
.citation { font-size: var(--step--1); color: var(--text-muted); }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: flex; gap: var(--sp-4); padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }
.t-year { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 84px; color: var(--teal-ink); }

/* ==========================================================================
   WELCOME + ONBOARDING — short, and clear about what happens next
   ========================================================================== */
.welcome { min-height: 70vh; display: grid; place-items: center; text-align: center; padding-block: var(--sp-6); }
.welcome-inner { max-width: 520px; }
.welcome-logo { width: min(140px, 36vw); margin: 0 auto var(--sp-5); }
.welcome h1 { font-size: var(--step-5); letter-spacing: 0.1em; margin-bottom: var(--sp-2); }
.welcome .tagline { font-family: var(--font-title); font-size: var(--step-2); color: var(--saffron-ink); margin-bottom: var(--sp-4); }
.welcome .lede { margin-inline: auto; margin-bottom: var(--sp-6); }
.welcome .tricolour-rule { width: 140px; margin: 0 auto var(--sp-5); }
.welcome-actions { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
.welcome .hint { color: var(--text-muted); margin-top: var(--sp-4); }
.welcome-footer { display: none; }
.journey-threads { display: none; }

.onboarding { max-width: 720px; margin-inline: auto; }
.ob-head { margin-bottom: var(--sp-5); }
.ob-steps { margin: var(--sp-4) 0 var(--sp-5); max-width: 420px; }

/* a selection card: a real button, one border width in every state */
.ob-card {
  box-sizing: border-box; display: grid; gap: var(--sp-1); align-content: start; justify-items: start;
  width: 100%; min-height: 88px; padding: var(--sp-4); text-align: left; cursor: pointer;
  font: inherit; color: var(--text); background: var(--surface);
  border: 2px solid var(--line-strong); border-radius: var(--radius);
  transition: border-color var(--transition), background-color var(--transition);
}
.ob-card:hover { border-color: var(--ink); background: var(--wash-navy); }
.ob-card:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.ob-card.is-selected { border-color: var(--saffron); background: var(--wash-saffron); }
.ob-card.is-disabled { cursor: not-allowed; background: var(--surface-sunken); border-style: dashed; }
.ob-card-tick { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--sp-1); font-size: var(--step--1); font-weight: 700; color: var(--saffron-ink); }
.ob-cards { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.ob-cards-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ob-card-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--sp-2); }
.ob-card-title { font-weight: 700; font-size: var(--step-1); }
.ob-card-blurb, .ob-card-meta, .ob-card-why { font-size: var(--step--1); color: var(--text-muted); }
.ob-card-state { font-size: var(--step--2); color: var(--saffron-ink); font-weight: 700; }
.ob-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); flex-wrap: wrap; }
.ob-summary { background: var(--surface); border: 2px solid var(--ink); border-radius: var(--radius); padding: var(--sp-5); }
.ob-summary-list { list-style: none; padding: 0; margin: 0; }
.ob-summary-list li { display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }

/* one quiet line for classes that are not ready, instead of a wall of
   disabled cards */
.classes-later {
  font-size: var(--step--1); color: var(--text-muted);
  border-top: 1px solid var(--line); margin-top: var(--sp-4); padding-top: var(--sp-3);
}

/* ==========================================================================
   THE COMPANION — the one circle and the one shadow in the system
   ========================================================================== */
.companion-launcher {
  position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 45;
  width: 64px; height: 64px; padding: 0; cursor: pointer;
  border-radius: 50%; border: 3px solid var(--ink);
  background: var(--teal); overflow: visible;
  box-shadow: 0 6px 0 rgba(20, 42, 67, 0.22), 0 14px 30px rgba(20, 42, 67, 0.22);
}
.companion-launcher::after {
  content: ''; position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%);
  width: 44px; height: 9px; border-radius: 50%;
  background: rgba(20, 42, 67, 0.18); filter: blur(2px);
}
.companion-fish-wrap {
  display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  background: var(--gold);
}
.companion-fish { width: 100%; height: 100%; object-fit: cover; display: block; }
.companion-launcher:hover { border-color: var(--ink); }

/* idle: a breath, not a bounce */
@keyframes fish-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.companion:not(.is-open) .companion-launcher { animation: fish-float 4.5s ease-in-out infinite; }

/* a ripple on the water, now and then, as if the fish had just surfaced */
.companion-launcher::before {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid var(--teal); opacity: 0; pointer-events: none;
}
.companion:not(.is-open) .companion-launcher::before { animation: fish-ripple 7s ease-out 2s infinite; }
@keyframes fish-ripple {
  0%, 80% { opacity: 0; transform: scale(1); }
  82% { opacity: 0.7; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.45); }
}

/* the gold glint, once in a while */
.companion-sparkle, .companion-sparkle-2 {
  position: absolute; width: 7px; height: 7px; pointer-events: none;
  background: var(--gold); border-radius: 50%; opacity: 0;
}
.companion-sparkle { top: 9px; right: 11px; animation: glint 9s ease-in-out infinite; }
.companion-sparkle-2 { bottom: 13px; left: 10px; animation: glint 9s ease-in-out 4.5s infinite; }
@keyframes glint {
  0%, 88%, 100% { opacity: 0; transform: scale(0.4); }
  92% { opacity: 1; transform: scale(1); }
}

/* the leap: once, on hover, focus or first tap */
@keyframes fish-leap {
  0%   { transform: translateY(0) scaleY(0.9) scaleX(1.06) rotate(0deg); }
  28%  { transform: translateY(-26px) scaleY(1.08) scaleX(0.96) rotate(-13deg); }
  55%  { transform: translateY(-32px) scaleY(1.04) scaleX(0.98) rotate(9deg); }
  82%  { transform: translateY(0) scaleY(0.88) scaleX(1.1) rotate(0deg); }
  100% { transform: translateY(0) scale(1) rotate(0deg); }
}
.companion.is-leaping .companion-launcher { animation: fish-leap 640ms cubic-bezier(0.3, 0.8, 0.4, 1) both; }

.companion-splash {
  position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
  width: 60px; height: 18px; pointer-events: none; opacity: 0;
}
.companion.is-leaping .companion-splash { animation: splash 640ms ease-out both; }
@keyframes splash {
  0%, 60% { opacity: 0; transform: translateX(-50%) scale(0.4); }
  78% { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) scale(1.3); }
}

/* with reduced motion the leap becomes a glow and nothing moves */
@media (prefers-reduced-motion: reduce) {
  .companion:not(.is-open) .companion-launcher { animation: none; }
  .companion.is-leaping .companion-launcher { animation: none; }
  .companion-sparkle, .companion-sparkle-2 { animation: none; opacity: 0; }
  .companion:not(.is-open) .companion-launcher::before { animation: none; opacity: 0; }
}
.companion.is-glowing .companion-launcher { box-shadow: 0 0 0 6px var(--wash-gold), 0 6px 0 rgba(20, 42, 67, 0.22); }

.companion-tip {
  position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  background: var(--ink); color: var(--text-on-ink); padding: 4px var(--sp-3);
  border-radius: var(--radius-sm); font-size: var(--step--1); white-space: nowrap;
  pointer-events: none; opacity: 0; transition: opacity var(--transition);
}
.companion-launcher:hover .companion-tip,
.companion-launcher:focus-visible .companion-tip { opacity: 1; }

.companion-backdrop { position: fixed; inset: 0; background: rgba(20, 42, 67, 0.4); z-index: 50; }
.companion-panel {
  position: fixed; right: 0; top: 0; bottom: 0; width: min(420px, 92vw); z-index: 55;
  background: var(--surface); border-left: 2px solid var(--ink);
  display: flex; flex-direction: column; box-shadow: var(--shadow-lift);
}
.companion-head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5); border-bottom: 2px solid var(--ink);
}
.companion-head-fish { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: none; border: 2px solid var(--ink); background: var(--gold); }
.companion-head-fish img { width: 100%; height: 100%; object-fit: cover; }
.companion-title { font-weight: 800; font-size: var(--step-1); }
.companion-subtitle { font-size: var(--step--1); color: var(--text-muted); }
.companion-close { margin-left: auto; }
.companion-scope { padding: var(--sp-4) var(--sp-5) 0; }
.companion-suggestions { display: grid; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); }
.companion-suggestions button {
  text-align: left; background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); padding: var(--sp-3); cursor: pointer; min-height: 44px;
}
.companion-suggestions button:hover { border-color: var(--teal); color: var(--teal-ink); }
.companion-history { flex-grow: 1; overflow-y: auto; padding: 0 var(--sp-5); }
.companion-asked { font-weight: 700; margin-bottom: var(--sp-1); }
.companion-answer, .companion-reply { border-left: 3px solid var(--teal); padding-left: var(--sp-4); margin-bottom: var(--sp-4); }
.companion-refused { border-left-color: var(--saffron); }
.companion-form { display: flex; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--line); }
.companion-input { flex-grow: 1; }
.companion-note { padding: 0 var(--sp-5) var(--sp-4); font-size: var(--step--2); color: var(--text-muted); }

/* ==========================================================================
   The AI briefing fragments the companion still uses
   ========================================================================== */
.brief-label { font-size: var(--step--1); font-weight: 700; color: var(--teal-ink); }
.brief-greeting { font-size: var(--step-2); font-weight: 700; }
.brief-progress, .brief-mission, .brief-significance, .brief-reason { max-width: var(--measure); }
.brief-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--sp-3); }
.brief-stat { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-3); }
.brief-degraded { color: var(--text-muted); font-size: var(--step--1); }

/* ==========================================================================
   Corrections found while reviewing the built screens
   ========================================================================== */

/* a disabled primary is not the action any more, so it stops looking like it */
.btn-primary[disabled] {
  background: var(--surface-sunken); border-color: var(--line-strong);
  color: var(--text-muted); opacity: 1;
}

/* the class figure in the header is a link, but it should not look typed-over */
.hud-course { text-decoration: none; color: var(--text); }
.hud-course:hover b { color: var(--saffron-ink); }

/* the day's three stations read as a column, not a full-width table */
.traverse { max-width: 640px; }

/* the supplementary-books drawer, which shares the source drawer's manners */
.books-panel {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0; margin-bottom: var(--sp-6); background: var(--surface);
}
.books-summary {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4); cursor: pointer; list-style: none;
}
.books-summary::-webkit-details-marker { display: none; }
.books-summary > span { display: flex; flex-direction: column; }
.books-title { font-weight: 600; }
.books-body { padding: var(--sp-4); border-top: 1px solid var(--line); }
.books-attribution {
  font-size: var(--step--2); color: var(--text-muted);
  padding: 0 var(--sp-4) var(--sp-4); margin: 0; max-width: none;
}

/* a details element anywhere else in the app gets the same restrained head */
.reader details > summary, .story details > summary { outline-offset: 2px; }

/* book suggestion cards */
.book-card {
  display: flex; gap: var(--sp-3); padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
}
.book-card:last-child { border-bottom: 0; }
.bc-title { font-weight: 600; }
.bc-meta { font-size: var(--step--1); color: var(--text-muted); }


/* ==========================================================================
   The final pass: era markers, the API treatments and the area visuals
   ========================================================================== */

/* --- the expedition route behind Home's mission --- */
.mission { position: relative; overflow: hidden; }
.expedition-route {
  position: absolute; inset: auto 0 0 0; height: 46px;
  pointer-events: none; opacity: 0.55; z-index: 0;
}
.expedition-route svg { width: 100%; height: 100%; display: block; }
.mission > *:not(.expedition-route) { position: relative; z-index: 1; }

/* --- era markers. Small, semantic, never a background. --- */
.era-emblem { flex: none; }
.era-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--step--2); font-weight: 700; color: var(--text-muted);
  white-space: nowrap;
}
.era-chip::before {
  content: ''; width: 9px; height: 9px; border-radius: 2px;
  background: var(--era, var(--line-strong));
}

.lr-era { display: grid; place-items: center; }
.lr-done { color: var(--green); display: inline-grid; place-items: center; }
.block-emblem { display: inline-grid; place-items: center; flex: none; }
.book-block .section-head { display: flex; align-items: center; gap: var(--sp-3); }
.book-block .section-head .meta { margin-left: auto; }

.chapter-emblem {
  display: flex; align-items: center; gap: var(--sp-3);
  padding-bottom: var(--sp-3); margin-bottom: var(--sp-2);
}

/* --- Learn's lesson rows gain a clear hover and focus treatment --- */
.lesson-row { transition: background var(--transition); }
.lesson-row:hover { background: var(--surface); }
.lesson-row:focus-within { background: var(--surface); outline: 2px solid var(--saffron); outline-offset: -2px; }

/* --- the quiz's question medallion --- */
/* --- the timeline's chronological nodes --- */
.tl-card::after {
  content: ''; position: absolute; left: calc(var(--sp-6) * -1 - 5px);
  top: 50%; margin-top: -5px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--paper); border: 2px solid var(--ink);
}
.tl-card.is-right::after { background: var(--green); border-color: var(--green); }
.tl-card.is-wrong::after { background: var(--red); border-color: var(--red); }
.tl-era {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--step--1); color: var(--text-muted);
}
.tl-answer { list-style: none; margin: var(--sp-4) 0 0; padding: 0; }
.tl-answer li {
  display: flex; gap: var(--sp-4); padding: var(--sp-3) 0;
  border-top: 1px solid var(--line);
}
.tl-answer .t-event { font-weight: 600; display: block; }
.tl-answer .tl-cite { display: block; }

/* --- Progress: the milestone flag --- */
.passport-figure { min-width: 0; }
.milestone {
  display: flex; align-items: center; gap: var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4); background: var(--surface);
}
.milestone > div { min-width: 0; display: flex; flex-direction: column; }
.ms-kicker { font-size: var(--step--2); color: var(--text-muted); }
.milestone b { font-size: var(--step-1); }
.milestone-flag { flex: none; }

/* --- the API screens --- */
.api-note {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  background: var(--wash-teal); border-left: 3px solid var(--teal);
  padding: var(--sp-4); border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--teal-ink); max-width: none; margin-bottom: var(--sp-5);
}
.api-note svg { flex: none; margin-top: 2px; }

.api-down {
  border: 2px dashed var(--line-strong); border-radius: var(--radius);
  padding: var(--sp-6); text-align: center; background: var(--surface);
}
.api-down h2 { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--step-2); }
.api-down p { margin-inline: auto; margin-bottom: var(--sp-5); }
.api-down .btn { margin: 0 var(--sp-2) var(--sp-2); }

/* ==========================================================================
   Historical imagery
   --------------------------------------------------------------------------
   Every picture carries its source with it. A textbook image is labelled as
   verified and cites its book and page; an API image names its collection and
   links to the page it came from. The two never look alike.
   ========================================================================== */
.hi { margin: 0 0 var(--sp-5); }
.hi-frame {
  position: relative; overflow: hidden; background: var(--sky);
  border: 1px solid var(--line); border-radius: var(--radius);
  display: block;
}
.hi-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hi-motif { display: grid; place-items: center; }
.hi-motif svg { width: 100%; height: 100%; display: block; }

.hi-expand {
  position: absolute; right: var(--sp-2); bottom: var(--sp-2);
  width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
  background: var(--surface); border: 2px solid var(--ink); border-radius: var(--radius-sm);
  color: var(--text);
}
.hi-expand:hover { background: var(--wash-saffron); }

/* Caption hierarchy: a small badge, then the description as the strongest
   line, then the citation, quieter but still AA. */
.hi-cap { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); justify-items: start; }
.hi-badges { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; width: 100%; }
.hi-caption-text { display: block; font-size: var(--step-0); font-weight: 600; line-height: 1.4; max-width: 62ch; }
.hi-meta { display: flex; align-items: baseline; gap: var(--sp-1) var(--sp-3); flex-wrap: wrap; }
.hi-source {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--step--2); font-weight: 700; line-height: 1.3;
  border: 1px solid currentColor; border-radius: var(--radius-xs); padding: 2px var(--sp-2);
}
.hi-source.is-textbook { color: var(--green-ink); background: var(--wash-green); }
.hi-source.is-api { color: var(--teal-ink); background: var(--wash-teal); }
.hi-cite { font-size: var(--step--1); color: var(--text-muted); line-height: 1.45; overflow-wrap: anywhere; max-width: 72ch; }
a.hi-cite { color: var(--teal-ink); }

/* On a lesson, a story and the Home hero the caption is a solid navy band
   under the picture — never laid over it. Fixed colours, so it reads the same
   in both themes. */
.hi-lesson .hi-cap, .hi-story .hi-cap, .hi-hero .hi-cap {
  margin-top: 0; padding: var(--sp-4) var(--sp-5) var(--sp-5); gap: var(--sp-3);
  background: var(--caption-surface); color: var(--caption-text);
  border-radius: 0 0 var(--radius) var(--radius);
}
.hi-lesson .hi-frame, .hi-story .hi-frame { border-radius: var(--radius) var(--radius) 0 0; border-bottom: 0; }
.hi-lesson .hi-caption-text, .hi-story .hi-caption-text {
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); font-weight: 600; line-height: 1.35; color: var(--caption-text);
}
.hi-hero .hi-caption-text { font-size: var(--step-1); color: var(--caption-text); }
.hi-lesson .hi-cite, .hi-story .hi-cite, .hi-hero .hi-cite { color: var(--caption-muted); }
.hi-lesson a.hi-cite, .hi-story a.hi-cite, .hi-hero a.hi-cite { color: var(--caption-link); }
.hi-lesson .hi-source.is-textbook, .hi-story .hi-source.is-textbook, .hi-hero .hi-source.is-textbook {
  color: #0E6B3A; background: #E8F5ED; border-color: #E8F5ED;
}
.hi-lesson .hi-source.is-api, .hi-story .hi-source.is-api, .hi-hero .hi-source.is-api {
  color: #066873; background: #E4F2F3; border-color: #E4F2F3;
}
.hi-lesson .hi-save, .hi-story .hi-save, .hi-hero .hi-save { color: var(--caption-text); background: transparent; border-color: rgba(255, 248, 232, 0.55); }
.hi-lesson .hi-save.is-on, .hi-story .hi-save.is-on, .hi-hero .hi-save.is-on { color: #142A43; background: #F4C542; border-color: #F4C542; }

.hi-save {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-size: var(--step--2); font-weight: 700; color: var(--text);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-xs); padding: var(--sp-1) var(--sp-2); min-height: 44px;
}
.hi-save:hover { border-color: var(--ink); }
.hi-save.is-on { color: var(--gold-ink); border-color: var(--gold); background: var(--wash-gold); }

/* the big one under a lesson title fills the reading column; the expand
   button shows the whole uncropped picture */
.hi-lesson .hi-frame { width: 100%; aspect-ratio: 16 / 10 !important; }

/* a thumbnail on a timeline milestone or an archive tile */
.hi-thumb { margin: 0; }
.hi-thumb .hi-frame { border-radius: var(--radius-sm); }
.hi-thumb .hi-caption-text { font-size: var(--step--2); }

/* --- expanded view --- */
.hi-lb-backdrop {
  position: fixed; inset: 0; z-index: 90; background: rgba(20, 42, 67, 0.82);
  display: grid; place-items: center; padding: var(--sp-4);
}
.hi-lightbox {
  background: var(--surface); border: 2px solid var(--ink); border-radius: var(--radius);
  max-width: min(1000px, 94vw); max-height: 92vh; overflow: auto;
  display: flex; flex-direction: column;
}
.hi-lightbox img { width: 100%; height: auto; display: block; }
.hi-lb-foot { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; }
.hi-lb-foot p { margin: 0; }

/* ==========================================================================
   The Visual Archive
   ========================================================================== */
.archive-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-4);
}
.archive-tile {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); overflow: hidden;
  display: flex; flex-direction: column;
}
.archive-tile .at-frame { aspect-ratio: 4 / 3; background: var(--sky); overflow: hidden; }
.archive-tile .at-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.at-body { padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); flex-grow: 1; }
.at-cap { font-size: var(--step--1); line-height: 1.45; }
.at-foot { margin-top: auto; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }


/* the one row whose content is fetched live */
.api-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--step--2); font-weight: 800; letter-spacing: 0.02em;
  color: var(--teal-ink); background: var(--wash-teal);
  border: 1px solid var(--teal); border-radius: var(--radius-xs);
  padding: 1px var(--sp-2);
}

/* the current checkpoint's action: clearly the next thing, but not a second
   saffron button competing with the hero's */
.btn-next {
  background: var(--surface); border-color: var(--saffron); color: var(--saffron-ink);
}
.btn-next:hover { background: var(--wash-saffron); border-color: var(--saffron-ink); color: var(--saffron-ink); }

/* timeline milestones: a small textbook thumbnail beside the revealed event */
.tl-answer li.has-thumb { align-items: center; }
.tl-ans-body { flex-grow: 1; min-width: 0; }
.tl-thumb {
  flex: none; width: 96px; height: 72px; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--sky);
}

.archive-sub { font-size: var(--step-1); margin: var(--sp-6) 0 var(--sp-3); color: var(--text-muted); }
/* a kept image visibly travels into the archive, once */
@keyframes into-archive { to { transform: translateY(-14px) scale(0.92); opacity: 0; } }
.archive-tile.is-arriving, .archive-tile.is-leaving { animation: into-archive 240ms ease-in forwards; }

/* ==========================================================================
   Progress — the expedition route through the eras
   ========================================================================== */
.big-words { font-size: var(--step-3); margin: 0; line-height: 1.2; max-width: none; }
.big-words b { font-size: var(--step-5); font-weight: 800; letter-spacing: -0.02em; margin-right: 4px; }
.zero-note { margin: var(--sp-2) 0 0; }

.era-route {
  list-style: none; margin: var(--sp-5) 0 0; padding: var(--sp-5) var(--sp-4);
  display: flex; gap: 0; position: relative;
  background: var(--wash-sky); border-radius: var(--radius);
}
/* the route itself: a plain dashed line — the tricolour is kept for the brand band */
.era-route::before {
  content: ''; position: absolute; left: calc(50% / var(--n, 5)); right: calc(50% / var(--n, 5)); top: calc(var(--sp-5) + 22px);
  height: 3px;
  /* a plain route line: green is kept for what is finished, so the line itself claims nothing */
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 10px, transparent 10px 16px);
}
.er-stop {
  flex: 1; min-width: 0; position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
}
.er-mark {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 3px solid var(--line-strong);
}
.er-stop.is-done .er-mark { background: var(--green); border-color: var(--green); color: var(--text-on-green); }
.er-stop.is-here .er-mark { border-color: var(--saffron); box-shadow: 0 0 0 5px var(--wash-saffron); }
.er-name { font-weight: 700; font-size: var(--step--1); }
.er-count { font-size: var(--step--1); color: var(--text-muted); }
.er-state { font-size: var(--step--2); font-weight: 700; color: var(--text-muted); }
.er-stop.is-done .er-state { color: var(--green-ink); }
.er-stop.is-here .er-state { color: var(--saffron-ink); }

/* the companion's today block */
.companion-today {
  display: grid; gap: var(--sp-2); margin: 0 var(--sp-5); padding: var(--sp-3) var(--sp-4);
  background: var(--wash-sky); border-radius: var(--radius); font-size: var(--step--1);
}
.companion-today:empty { display: none; }
.ct-row { display: flex; align-items: flex-start; gap: var(--sp-2); }
.ct-row svg { flex: none; margin-top: 2px; color: var(--text-muted); }
.ct-row.is-api svg { color: var(--teal-ink); }
.exp-done { display: flex; align-items: center; gap: 6px; margin: var(--sp-3) 0 0; color: var(--green-ink); font-weight: 700; }

/* Wikimedia Commons pictures in a lesson: small, each with its own licence */
.commons-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-4); margin-top: var(--sp-3); align-items: start;
}
.commons-grid .hi { margin: 0; }
.commons-grid .hi-frame { aspect-ratio: 4 / 3 !important; }
.hi-licence { text-decoration: underline; }