/* Discovery controls only: keep the atlas visual design in index.html. */
:root { --c-dinosaurs: #427859; }
.dinosaur-discovery { border-color: var(--rule); border-top: 3px solid var(--c-dinosaurs); }
.dinosaur-discovery button { border-color: var(--rule); }
.dinosaur-eras { display: flex; flex-wrap: wrap; gap: 6px; }
.dinosaur-eras button { flex: 1 1 90px; font-size: 12px; }
.dinosaur-eras small { display: block; font-size: 10px; }
.dinosaur-list { max-height: 250px; overflow-y: auto; overscroll-behavior: contain; margin-top: 10px; }
.deep-time-note { font-size: 10px; line-height: 1.5; max-width: 225px; margin: 8px 0 0; }
.deep-time-note[hidden] { display: none; }
.stage .readout .deep-time-year small { display: block; font-size: 14px; line-height: 1.3; margin: 6px 0 0; }
.stage .readout:has(.deep-time-year)::before { content: "Fossil age"; }
.dinosaur-detail a { font-size: 12px; }
.dinosaur-map-controls { margin-bottom: 10px; border-bottom: 1px solid var(--rule); padding-bottom: 8px; }
.dinosaur-toggle { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 4px 8px 4px 3px; border: 1px solid #c7d3c5; border-radius: 5px; background: #edf2e8; color: var(--ink); cursor: pointer; font: inherit; font-size: 12px; }
.dinosaur-toggle img { object-fit: contain; }
.dinosaur-toggle strong { font-size: 11px; margin-left: auto; }
.dinosaur-toggle i { width: 28px; height: 16px; background: #547255; border-radius: 12px; position: relative; }
.dinosaur-toggle i::after { content: ""; position: absolute; top: 3px; right: 3px; height: 10px; width: 10px; border-radius: 50%; background: white; }
.dinosaur-toggle[aria-pressed="false"] { background: var(--paper); border-color: var(--rule); }
.dinosaur-toggle[aria-pressed="false"] i { background: #8b8279; }
.dinosaur-toggle[aria-pressed="false"] i::after { right: auto; left: 3px; }
.dinosaur-toggle:focus-visible, .dinosaur-jump:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.dinosaur-jump { display: block; background: transparent; border: 0; color: #a3482d; padding: 6px 2px 0; font: inherit; font-size: 10px; cursor: pointer; }
#legend [data-k="dinosaurs"] { display: none; }
.dinosaur-discovery .dinosaur-list-card { display: grid; grid-template-columns: 56px minmax(0,1fr); gap: 9px; align-items: center; }
.dinosaur-list-card img { object-fit: contain; }
.dinosaur-portrait { margin: 12px 0; text-align: center; background: var(--paper-2); border-radius: 5px; padding: 12px; }
.dinosaur-portrait img { display: block; max-width: 100%; height: auto; margin: auto; object-fit: contain; }
.dinosaur-portrait figcaption, .dinosaur-art-note { font-size: 10px; line-height: 1.5; color: var(--muted); }
.discovery-tools {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px 22px;
  background: var(--paper);
  grid-column: 1/-1;
}
.discovery-tools button,
.discovery-panel button,
.discovery-action {
  font: inherit;
  font-size: 12px;
  padding: 8px;
  border: 1px solid var(--muted);
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  min-height: 36px;
}
.discovery-tools label {
  font-size: 12px;
}
.discovery-tools input {
  width: 105px;
  padding: 7px;
  font: inherit;
  font-size: 12px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--muted);
}
.discovery-tools form {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.discovery-tools [hidden],
.discovery-panel[hidden] {
  display: none;
}
.discovery-note {
  font-size: 11px;
  color: var(--muted);
  flex-basis: 100%;
}
.compare-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 36px;
  transform: translateX(-50%);
  z-index: 4;
  touch-action: none;
  cursor: ew-resize;
  background: transparent;
  border: 0;
  color: var(--ink);
  padding: 0;
}
.compare-divider:before {
  content: "";
  position: absolute;
  left: 17px;
  top: 0;
  bottom: 0;
  border-left: 2px solid var(--ink);
  pointer-events: none;
}
.compare-divider span {
  position: absolute;
  top: 48%;
  left: 0;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 20px;
  width: 36px;
  height: 40px;
  display: grid;
  place-items: center;
}
.compare-divider:focus-visible {
  outline: 3px solid var(--accent);
}
.compare-label {
  position: absolute;
  top: 8px;
  z-index: 3;
  background: var(--paper);
  color: var(--ink);
  padding: 5px;
  font-size: 12px;
  pointer-events: none;
  max-width: 44%;
}
.compare-label.left {
  left: 8px;
}
.compare-label.right {
  right: 8px;
}
.comparing .readout {
  display: none;
}
.discovery-panel {
  border: 1px solid var(--muted);
  padding: 12px;
  margin-bottom: 16px;
  color: var(--ink);
  background: var(--paper);
}
.discovery-panel h3 {
  margin: 8px 0;
}
.discovery-panel p {
  font-size: 12px;
  line-height: 1.5;
}
.place-entries {
  max-height: 380px;
  overflow: auto;
  overscroll-behavior: contain;
}
.place-entry,
.story-card {
  display: block;
  width: 100%;
  text-align: left;
  margin: 8px 0;
}
.place-entry small,
.story-card small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}
.discovery-action {
  margin-top: 12px;
}
.discovery-status {
  flex-basis: 100%;
  min-width: 0;
  background: var(--paper);
  color: var(--ink);
  font-size: 11px;
  padding: 6px 8px;
  border-left: 2px solid var(--accent);
  overflow-wrap: anywhere;
}
.story-trail {
  margin-bottom: 8px;
  font-size: 12px;
}
@media (max-width: 600px) {
  .discovery-tools {
    padding: 8px 14px;
  }
  .discovery-tools form {
    gap: 5px;
  }
  .discovery-tools input {
    width: 85px;
  }
  .place-entries {
    max-height: 300px;
  }
}

@media (min-width: 861px) {
  .app {
    grid-template-rows: 76px minmax(0, 1fr) auto;
  }
  /* The scrolling ledger must not determine the height of the map or timeline. */
  .app > .side { contain: size; }
}
.discovery-tools {
  padding: 0 0 8px;
  background: transparent;
}
.time {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "play tools" "population population" "ruler ruler" "status status";
  gap: 8px 16px;
  align-content: start;
}
.time .controls { grid-area: play; min-width: 0; margin-bottom: 0; }
.time .time-heading { flex-direction: column; gap: 0; }
.time .discovery-tools { grid-area: tools; padding: 0; justify-content: flex-end; }
.time .ruler { grid-area: ruler; }
.time .discovery-status { grid-area: status; }
.stage.comparing + .time {
  grid-template-areas: "tools tools" "play play" "population population" "ruler ruler" "status status";
}
.stage.comparing + .time .discovery-tools { justify-content: flex-start; }
@media (min-width: 861px) and (max-width: 1200px) {
  .time .time-heading { display: none; }
}
.discovery-tools input[type="checkbox"] {
  width: auto;
}
@media (max-width: 860px) {
  /* The population readout and controls must not cover the map's lower controls. */
  .time {
    position: static;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "tools" "play" "population" "ruler" "status";
  }
  .time .discovery-tools { justify-content: flex-start; }
  .stage.comparing + .time { grid-template-areas: "tools" "play" "population" "ruler" "status"; }
}
@media (min-width: 861px) {
  .comparing .borders-control {
    top: 52px;
  }
}

.comparison-stories {
  margin: 12px 0 18px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--paper);
}
.comparison-stories summary { cursor: pointer; font-size: 14px; font-weight: 650; }
.comparison-stories p, .meanwhile-slot p, .meanwhile-card span { font-size: 12px; line-height: 1.55; }
.comparison-stories h3 { font-size: 17px; margin: 15px 0 8px; }
.comparison-stories button, .meanwhile-slot button {
  font: inherit;
  text-align: left;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px;
  color: var(--ink);
  cursor: pointer;
  min-height: 40px;
}
.comparison-stories button:hover, .meanwhile-slot button:hover { border-color: var(--accent); }
.comparison-stories button:focus-visible, .meanwhile-slot button:focus-visible, .share-panel input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.meanwhile-card { margin: 12px 0; }
.meanwhile-card span { display: block; margin-top: 6px; }
.meanwhile-card a, .comparison-explanation a { font-size: 12px; }
.pinned-event { border-left: 3px solid var(--accent) !important; width: 100%; }
.share-panel { flex-basis: 100%; min-width: 0; padding: 10px 0; }
.share-panel label { display: block; }
.share-panel input { display: block; width: 100%; box-sizing: border-box; margin: 6px 0; }
.share-panel p { font-size: 12px; margin: 6px 0 0; }

.curated-discoveries { border-top: 3px solid var(--accent); }
.curated-cover b { display: block; font-family: var(--display); font-size: 19px; line-height: 1.3; }
.curated-cover > span { display: block; font-size: 12px; margin-top: 8px; line-height: 1.5; }
.curated-cover small { margin-top: 12px; }
.curated-reader h3 { line-height: 1.3; }
.curated-stops { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0; }
.curated-stops button { flex: 1 1 130px; font-size: 11px; padding: 8px; }
.curated-stops button[aria-current] { border-color: var(--accent); background: var(--paper-2); }
.curated-stops button span { color: var(--accent); font-weight: 700; }
.curated-stop { border-left: 2px solid var(--accent); padding-left: 12px; }
.curated-stop h4 { font-family: var(--display); font-size: 20px; line-height: 1.3; margin: 8px 0; }
.curated-sources a { font-size: 11px; overflow-wrap: anywhere; }
.curated-context-note, .curated-map-status { color: var(--muted); }
.curated-navigation { display: flex; gap: 8px; justify-content: space-between; margin: 12px 0; }
.curated-navigation button:disabled { opacity: .45; cursor: default; }
.curated-discoveries [hidden] { display: none; }

.contemporaries-card { border-top: 3px solid #577f9c; }
.contemporaries-card h3 { margin-top: 6px; }
.contemporary-person { margin-top: 14px; }
.contemporary-person button { width: 100%; }
.contemporary-person strong, .contemporary-person small, .contemporary-person button span { display: block; }
.contemporary-person strong { font-family: var(--display); font-size: 17px; }
.contemporary-person small, .contemporary-person button span { font-size: 11px; color: var(--muted); }
.contemporary-person a { font-size: 10px; }
.lifespan-track { position: relative; height: 7px; background: var(--paper-2); margin: 5px 0; overflow: hidden; }
.lifespan-track i, .lifespan-track b { position: absolute; top: 0; height: 100%; }
.lifespan-track i { background: #577f9c66; }
.lifespan-track b { background: var(--accent); }
.contemporary-overlap > span { color: var(--accent); }
.contemporary-examples { margin-top: 14px; }
.contemporary-examples summary { font-size: 12px; }
.border-confidence { font-size: 10px; max-width: 225px; line-height: 1.5; margin-top: 7px; color: var(--ink); }
.border-confidence summary { cursor: pointer; }
.border-confidence p { margin: 8px 0; }
.border-confidence a { color: inherit; }
.border-confidence[hidden] { display: none; }
.border-swatch { display: inline-block; width: 18px; border-top: 1px dashed currentColor; margin-right: 5px; vertical-align: middle; }
.stage { --lake: #b9d5e2; --lake-edge: #608b9d; --lake-ink: #26536a; }
.water-key { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--muted); margin: 6px 0 0; }
.water-key i { display: inline-block; width: 17px; height: 9px; border: 1px solid var(--lake-edge); background: var(--lake); border-radius: 2px; }
.water-key[hidden] { display: none; }
.water-context { margin: 0 0 14px; padding: 12px 14px; border-left: 3px solid #608b9d; background: #eaf3f7; color: #264f63; }
.water-context .kicker { color: #426c7f; }
.water-context h3, .water-context h4 { margin: 4px 0 6px; font-size: 19px; }
.water-context p { margin: 5px 0; font-size: 12px; line-height: 1.5; }
.water-context details { margin-top: 8px; font-size: 11px; }
.water-context summary { cursor: pointer; }
.water-context a { color: inherit; }
.contemporaries-card [hidden] { display: none; }
.curated-discoveries, .contemporaries-card,
.curated-discoveries button, .contemporaries-card button { border-color: var(--rule); }
.curated-discoveries { border-top-color: var(--accent); }
.contemporaries-card { border-top-color: #577f9c; }
.curated-discoveries a, .contemporaries-card a { color: #a3482d; }
.curated-discoveries > .kicker, .contemporaries-card > .kicker { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }

/* Search stays outside the map workspace, with one keyboard-accessible result list. */
.history-search-trigger {
  border: 1px solid var(--rule); border-radius: 3px; background: #fff;
  color: #2d2420; padding: 8px 11px; min-height: 36px;
  font: inherit; font-size: 12px; white-space: nowrap; cursor: pointer;
}
.history-search {
  width: min(640px, calc(100vw - 28px)); max-width: none;
  max-height: min(85dvh, 850px); box-sizing: border-box;
  padding: 22px; margin: 7dvh auto auto; border: 1px solid #d6cec4;
  border-radius: 8px; background: #f8f5f0; color: #2d2420;
  box-shadow: 0 20px 90px #201a1740; overflow-y: auto;
  font-family: var(--body); overscroll-behavior: contain;
}
.history-search::backdrop { background: #201a1770; }
.history-search-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.history-search h2 { font-family: var(--display); font-size: 24px; margin: 0 0 14px; }
.history-search button { font: inherit; color: inherit; cursor: pointer; }
.history-search-heading button {
  align-self: flex-start; min-width: 36px; min-height: 36px; font-size: 24px;
  border: 0; background: transparent; border-radius: 3px;
}
.history-search form { display: flex; flex-wrap: wrap; gap: 6px; }
.history-search form label { flex-basis: 100%; font-size: 12px; color: #756c65; }
.history-search input {
  flex: 1; width: 0; min-width: 0; padding: 12px; font: inherit; font-size: 16px;
  background: #fff; color: #2d2420; border: 1px solid #c9beb1; border-radius: 4px;
}
.search-submit { border: 0; border-radius: 4px; background: #e99a7d; padding: 10px 13px; font-size: 13px !important; }
.history-search-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 10px; }
.history-search-filters button, .search-examples button, [data-search-retry] {
  min-height: 36px; border: 1px solid #d6cec4; border-radius: 4px;
  padding: 6px 10px; background: transparent; font-size: 12px;
}
.history-search-filters button[aria-pressed="true"] { background: #2d2420; border-color: #2d2420; color: #fff; }
#historySearchStatus { color: #756c65; font-size: 12px; line-height: 1.5; margin: 10px 0; }
#historySearchResults { max-height: 44dvh; overflow-y: auto; overscroll-behavior: contain; }
.history-search-result {
  display: block; width: 100%; text-align: left; padding: 12px;
  border: 0; border-bottom: 1px solid #ddd5cb; border-radius: 3px; background: transparent;
}
.history-search-result:hover, .history-search-result:focus-visible { background: #fff; }
.history-search-result strong { display: block; font-size: 16px; line-height: 1.35; margin: 3px 0; font-weight: 500; }
.search-result-kind { text-transform: uppercase; letter-spacing: .1em; color: #9e5136; font-size: 9px; }
.search-result-date { display: block; font-size: 12px; color: #756c65; }
.history-search-result small { display: block; font-size: 12px; line-height: 1.5; margin-top: 4px; color: #756c65; }
.history-search button:focus-visible, .history-search input:focus-visible, .history-search-trigger:focus-visible {
  outline: 2px solid #b45a39; outline-offset: 2px;
}
.search-examples { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 0; font-size: 12px; }
#historySearchHelp { font-size: 12px; line-height: 1.55; margin: 15px 0 8px; color: #756c65; }
.history-search-credits { font-size: 10px; line-height: 1.5; margin: 0; color: #756c65; }
.history-search-credits a { color: #9e5136; }
@media (max-width: 560px) {
  .history-search { padding: 16px; margin-top: 3dvh; max-height: 92dvh; }
  .history-search h2 { font-size: 21px; }
  .head-tools .history-search-trigger { flex-shrink: 0; padding: 8px; }
  .head-tools .goto { width: auto; min-width: 0; flex: 1; }
  .head-tools .goto input { min-width: 0; }
  .head-tools .goto > div { min-width: 0; }
  .history-search-filters { gap: 5px; }
  .history-search-filters button { padding: 6px 8px; }
}

.daily-challenge-card {
  margin: 18px 0 0; padding: 16px; border: 1px solid #dfc0ae;
  border-radius: 5px; background: #f3e6da; color: #2d2420;
}
.daily-challenge-card .kicker { color: #975239; font-size: 9px; letter-spacing: .08em; }
.daily-challenge-card h3 { font-family: var(--display); font-size: 20px; line-height: 1.3; margin: 8px 0; font-weight: 500; }
.daily-challenge-card p { font-size: 12px; line-height: 1.5; margin: 6px 0 12px; }
.daily-card-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; }
.daily-card-bottom span { font-size: 11px; color: #756c65; }
.daily-challenge-card button, .daily-challenge-dialog button, .challenge-map-banner button {
  min-height: 40px; border: 1px solid #c9b8a7; border-radius: 4px; background: #fffaf5;
  color: #2d2420; padding: 8px 11px; cursor: pointer; font: inherit; font-size: 12px;
}
.daily-challenge-card button:focus-visible, .daily-challenge-dialog button:focus-visible, .challenge-map-banner button:focus-visible {
  outline: 2px solid #b45a39; outline-offset: 2px;
}
.daily-challenge-dialog { max-height: 90dvh; margin-top: 4dvh; }
.daily-date, .daily-storage-note { color: #756c65; font-size: 11px; line-height: 1.6; }
.daily-date { margin: 0 0 12px; }
.daily-steps { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.daily-steps [aria-current="step"] { color: #fff; background: #2d2420; border-color: #2d2420; }
.daily-question h3 { font-family: var(--display); margin: 10px 0; font-size: 24px; line-height: 1.3; }
.daily-question h4 { font-size: 17px; line-height: 1.5; margin: 12px 0; }
.daily-question p { font-size: 14px; line-height: 1.6; margin: 10px 0; }
.daily-question .daily-primary { background: #e99a7d; border-color: #e99a7d; min-height: 44px; }
.daily-question .daily-skip { background: transparent; border: 0; text-decoration: underline; color: #756c65; margin: 10px 0; }
.daily-order { list-style-position: inside; padding: 0; }
.daily-order li { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-bottom: 1px solid #dfd5cb; padding: 12px 0; counter-increment: daily-order; }
.daily-order { counter-reset: daily-order; }
.daily-order li::before { content: counter(daily-order) "."; font-size: 12px; color: #756c65; }
.daily-order li > span { flex: 1; font-size: 15px; line-height: 1.5; }
.daily-order li > div { display: flex; gap: 4px; flex-shrink: 0; }
.daily-order button { font-size: 18px; min-height: 44px; min-width: 40px; padding: 5px; }
.daily-order button:disabled { opacity: .3; cursor: default; }
.daily-challenge-dialog fieldset { width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; }
.daily-challenge-dialog legend { font-size: 12px; color: #756c65; margin-bottom: 6px; }
.daily-challenge-dialog .daily-pair { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid #dfd5cb; border-radius: 4px; margin: 8px 0; font-size: 15px; color: #2d2420; cursor: pointer; }
.daily-challenge-dialog .daily-pair input { width: 18px; height: 18px; padding: 0; min-width: 18px; flex: 0 0 auto; accent-color: #b45a39; }
.daily-coordinates { margin: 16px 0 6px; }
.daily-coordinates summary { cursor: pointer; font-size: 13px; padding: 8px 0; }
.daily-coordinates form { margin-top: 8px; }
.daily-coordinates label { display: block; }
.daily-coordinates input { display: block; box-sizing: border-box; width: 100%; margin: 5px 0 10px; }
.daily-feedback { border-left: 3px solid #b45a39; background: #f3e6da; padding: 12px; margin: 14px 0; font-size: 15px; line-height: 1.5; }
.daily-answer-order { padding-left: 22px; }
.daily-answer-order li, .daily-person-answer { padding: 12px 0; border-bottom: 1px solid #dfd5cb; }
.daily-question [data-daily-map] { display: block; margin: 8px 0; max-width: 100%; text-align: left; line-height: 1.5; }
.daily-question a { font-size: 12px; color: #9e5136; }
.daily-next { padding: 12px 0; margin-top: 12px; }
.daily-summary { padding: 18px 0; }
.daily-summary button { margin: 6px 6px 6px 0; }
.challenge-map-banner { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 6; max-width: 570px; padding: 12px; border: 1px solid #c9b8a7; border-radius: 4px; background: #f8f5f0f5; color: #2d2420; box-shadow: 0 3px 15px #201a1720; }
.challenge-map-banner strong, .challenge-map-banner span { display: block; font-size: 12px; line-height: 1.5; }
.challenge-map-banner span { color: #756c65; margin-top: 3px; }
.challenge-map-banner > div { display: flex; gap: 7px; margin-top: 8px; flex-wrap: wrap; }
.challenge-picking .readout, .challenge-picking .legend, .challenge-picking .stage-hint { visibility: hidden; }
.challenge-picking canvas { cursor: crosshair; }
@media (max-width: 560px) {
  .daily-challenge-dialog { padding: 14px; margin-top: 2dvh; max-height: 95dvh; }
  .daily-challenge-dialog h2 { font-size: 20px; }
  .daily-question h3 { font-size: 21px; }
  .daily-order li > span { font-size: 14px; }
  .daily-order button { min-width: 36px; }
  .challenge-map-banner { padding: 9px; }
}
.daily-challenge-dialog .history-search-heading button { font-size: 24px; background: transparent; border: 0; min-width: 40px; }

.population-strip { grid-area: population; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 0; padding: 7px 11px; border: 1px solid #ded4c8; border-radius: 4px; background: #f1ebe2; color: #2d2420; }
.population-heading { display: contents; }
.population-heading > b { font-size: 10px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; }
.population-heading details { order: 2; font-size: 11px; color: #756c65; }
.population-heading summary { cursor: pointer; }
.population-heading details[open] { flex-basis: 100%; }
.population-method { max-width: 740px; font-size: 12px; line-height: 1.6; }
.population-method p { margin: 8px 0; }
.population-method a { color: #9e5136; }
.population-values { order: 1; flex: 1; min-width: 0; display: flex; gap: 12px 25px; margin: 0; font-size: 12px; }
.population-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; flex: 1; min-width: 0; }
.population-value span, .population-value small { color: #756c65; font-size: 10px; line-height: 1.5; }
.population-value strong { font-family: var(--display); font-size: 18px; line-height: 1.3; font-weight: 500; font-variant-numeric: tabular-nums; }
.population-retry { margin-top: 8px; min-height: 36px; padding: 7px 10px; background: #fff; border: 1px solid #c9b8a7; border-radius: 3px; color: #2d2420; font: inherit; font-size: 12px; cursor: pointer; }
.population-strip summary:focus-visible, .population-retry:focus-visible { outline: 2px solid #b45a39; outline-offset: 2px; }
@media (max-width: 560px) {
  .population-strip { padding: 7px 9px; gap: 5px 12px; }
  .population-heading details { order: 1; margin-left: auto; }
  .population-values { order: 2; flex-basis: 100%; }
  .population-values { gap: 12px; }
}
/* Keep the fixed final year visible inside the ruler at every viewport width. */
.ticks .timeline-end { transform: translateX(-100%); color: #2d2420; font-weight: 600; }
.ticks .timeline-end::before { left: 100%; }

/* Header: one shared control baseline, with deliberate rows on smaller screens. */
.app { grid-template-rows: auto minmax(0, 1fr) auto; }
.app > header {
  min-height: 72px; padding-top: 8px; padding-bottom: 8px;
  flex-wrap: nowrap; justify-content: space-between; gap: 24px;
}
.app > header .brand { align-items: center; gap: 12px; flex-shrink: 0; }
.app > header .brand > svg { width: 32px; height: 32px; flex-shrink: 0; }
.app > header .brand-copy { min-width: 0; }
.app > header .brand-kicker { display: block; line-height: 1.3; margin-bottom: 4px; font-size: 8px; letter-spacing: .16em; }
.app > header .brand h1 { font-size: 23px; line-height: 1.15; white-space: nowrap; }
.app > header .brand > span { max-width: 165px; margin-left: 4px; font-size: 12px; line-height: 1.5; }
.app > header .head-tools { display: grid; grid-template-columns: auto auto auto; align-items: end; gap: 14px; flex-shrink: 0; }
.app > header .tool-label { display: block; margin: 0 0 5px; font-size: 8px; line-height: 1.2; letter-spacing: .12em; }
.app > header .history-search-trigger { height: 40px; padding: 8px 13px; font-size: 12px; border-color: #d8cfc5; }
.app > header .goto { align-items: flex-end; gap: 6px; margin: 0; }
.app > header .goto input { height: 40px; width: 140px; font-size: 13px; border-color: #d8cfc5; }
.app > header .goto .iconbtn { width: 40px !important; height: 40px !important; }
.app > header .view-tool .seg { height: 40px; padding: 3px; align-items: stretch; }
.app > header .view-tool .seg button { height: 32px; min-height: 0; padding: 3px 12px; font-family: var(--body); font-size: 12px; }
@media (max-width: 1400px) {
  .app > header .brand > span { display: none; }
}
@media (max-width: 860px) {
  .app > header { flex-wrap: wrap; gap: 15px; padding: 15px 20px; }
  .app > header .head-tools { width: 100%; margin-left: 0; grid-template-columns: minmax(100px, 1fr) minmax(190px, 1.5fr) auto; gap: 12px; }
  .app > header .history-search-trigger { width: 100%; }
  .app > header .goto { width: 100%; min-width: 0; }
  .app > header .goto > div { min-width: 0; flex: 1; }
  .app > header .goto input { width: 100%; min-width: 0; }
  .app > header .view-tool { display: block; }
}
@media (max-width: 560px) {
  .app > header { min-height: 0; padding: 13px 14px; gap: 13px; }
  .app > header .brand { width: auto; gap: 10px; }
  .app > header .brand > svg { width: 29px; height: 29px; }
  .app > header .brand h1 { font-size: 21px; }
  .app > header .brand-kicker { font-size: 7px; margin-bottom: 3px; }
  .app > header .head-tools { grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
  .app > header .history-search-trigger { padding: 8px 10px; }
  .app > header .view-tool { display: none; }
}



/* Credits sit below the timeline, outside the scrolling history ledger. */
.app {
  grid-template-areas: "head head" "stage side" "time side" "foot foot";
  grid-template-rows: auto max(420px, calc(100svh - 264px)) min-content auto;
  height: auto;
  min-height: 100svh;
}
.atlas-footer {
  grid-area: foot; padding: 14px 24px 12px; background: #f0ebe3;
  border-top: 1px solid #d9cfc3; color: #756c65; font-size: 11px;
}
.atlas-footer-main { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; }
.atlas-footer-identity { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.atlas-footer a { color: #66564b; text-underline-offset: 3px; }
.atlas-footer .atlas-footer-name { color: #2d2420; font-family: var(--display); font-size: 16px; line-height: 1.3; text-decoration: none; }
.atlas-footer-identity > span { font-size: 10px; }
.atlas-footer-note { margin: 0; font-size: 11px; }
.atlas-footer-support { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.atlas-footer-support > span { font-size: 10px; }
.atlas-footer-support .bmc-btn-container { margin: 0; line-height: 1; }
.atlas-footer-support .bmc-btn {
  min-width: 0 !important; min-height: 0 !important; height: 38px !important;
  padding: 0 13px !important; border-radius: 5px !important; font-size: 21px !important;
  line-height: 38px !important; box-shadow: none !important;
  display: inline-flex !important; align-items: center !important;
  gap: 6px !important; width: max-content !important; white-space: nowrap !important;
}
.atlas-footer-support .bmc-btn svg { height: 23px !important; width: 20px !important; margin-right: 6px !important; }
.atlas-footer-support .bmc-btn-text { font-size: 21px !important; line-height: 1 !important; width: auto !important; margin: 0 !important; flex: 0 0 auto !important; }
.atlas-footer-support .bmc-btn .bmc-btn-emoji { font-size: 21px !important; line-height: 1 !important; }
.atlas-footer-sources { margin-top: 9px; }
.atlas-footer-sources summary { width: fit-content; cursor: pointer; font-size: 10px; color: #756c65; padding: 2px 0; }
.atlas-footer-source-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 30px; padding-top: 10px; }
.atlas-footer-source-grid p { margin: 0; font-size: 11px; line-height: 1.65; }
.atlas-footer-source-grid strong { display: block; margin-bottom: 4px; font-size: 10px; font-weight: 600; color: #544840; }
.atlas-footer a:focus-visible, .atlas-footer summary:focus-visible { outline: 2px solid #b45a39; outline-offset: 3px; }
@media (max-width: 860px) {
  .app > .stage { height: 72svh; min-height: 350px; }
  .atlas-footer { order: 3; padding: 16px 20px; }
  .app > .side { order: 4; }
  .atlas-footer-main { flex-wrap: wrap; gap: 12px 20px; }
  .atlas-footer-note { display: none; }
  .atlas-footer-support { margin-left: auto; }
  .atlas-footer-support > span { display: none; }
  .atlas-footer-source-grid { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 560px) {
  .atlas-footer { padding: 14px; }
  .atlas-footer-main { gap: 12px; }
  .atlas-footer .atlas-footer-name { font-size: 14px; }
  .atlas-footer-support .bmc-btn { padding: 0 10px !important; font-size: 19px !important; }
  .atlas-footer-support .bmc-btn-text, .atlas-footer-support .bmc-btn .bmc-btn-emoji { font-size: 19px !important; }
}