/* The map owns the available space; explanations open on demand. */
.shell {max-width:1600px;padding:calc(env(safe-area-inset-top) + 4px) 6px calc(env(safe-area-inset-bottom) + 6px);}
.topbar {height:44px;padding:0 2px 0 6px;gap:8px;}
.color-cluster {flex:0 0 auto;display:block;min-height:22px;overflow:hidden;}
.legend, .legend.show {display:flex;flex-wrap:nowrap;gap:10px;margin:0;padding:4px 6px 2px;overflow-x:auto;scrollbar-width:none;white-space:nowrap;}
.legend:not(.show) {visibility:hidden;}
.legend .key {flex-shrink:0;font-size:10px;}
.explore-tools {flex-shrink:0;flex-wrap:nowrap;gap:5px;padding:3px 2px 6px;justify-content:flex-end;}
.explore-tools select {flex:0 1 86px;min-width:62px;height:40px;padding:4px;}
.explore-tools .btn,.explore-tools .btn.toggle {font-size:11px;height:40px;min-height:40px;padding:0 8px;}
.explore-tools .view-switch {margin-right:auto;}
.stage {min-height:150px;border-radius:14px;background:#091521;}
.map-view {background:#091521;}
.map-canvas {margin:auto;}
.map-view.has-flat {overflow:hidden;}
.flat-view {position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at 40% 35%,#162a3d,#050b13 78%);}
#flatCanvas {display:block;width:100%;height:100%;touch-action:none;cursor:grab;outline-offset:-4px;}
#flatCanvas:active {cursor:grabbing;}
.map-age,body[data-mode="life"] .map-age {position:absolute;top:10px;left:10px;z-index:4;max-width:calc(100% - 62px);margin:0;border-radius:8px;padding:7px 9px;background:#06111ec9;color:#f3f0df;font-family:var(--font-ui);font-size:clamp(14px,3.7vw,20px);font-weight:650;line-height:1.4;pointer-events:none;white-space:normal;}
.map-context-pins {position:absolute;bottom:14px;left:12px;z-index:4;display:flex;flex-direction:column;align-items:flex-start;gap:6px;max-width:calc(100% - 70px);pointer-events:none;}
.context-pin {position:relative;pointer-events:auto;max-width:100%;min-height:40px;border:1px solid #708699;border-radius:10px;background:#112131e8;color:#f6edce;padding:7px 10px 7px 26px;font:600 11px/1.45 var(--font-ui);text-align:left;}
.context-pin::before {content:'';position:absolute;left:10px;top:calc(50% - 3px);width:6px;height:6px;transform:rotate(45deg);background:#edc78b;}
.context-pin:focus-visible,.collection-item:focus-visible,.globe-pin:focus-visible {outline:2px solid #e0bf7a;outline-offset:2px;}
.collection-item {display:block;width:100%;min-height:44px;margin:5px 0;border:1px solid var(--line);border-radius:9px;text-align:left;padding:9px 12px;background:var(--paper);color:var(--ink);font:600 13px/1.45 var(--font-ui);}
.globe-pin.pole-pin {color:#dceeff;font-size:11px;}
.globe-pin.pole-pin::after {background:#cbe3ef;border-color:#f4fbff;width:7px;height:7px;}
.globe-pin.edge-top {transform:translate(-50%,0);padding:18px 6px 10px;}
.globe-pin.edge-top::after {top:4px;bottom:auto;}
.nav-cluster {right:10px;bottom:12px;}
.nav-cluster button {width:40px;height:40px;}
.earth-view {padding:0;justify-content:center;gap:0;}
.space {width:100%;height:100%;display:grid;place-items:center;}
.atmosphere,.atmosphere[data-visual] {width:min(88cqw,88cqh);height:min(88cqw,88cqh);}
.earth-view {container-type:size;}
.dock {margin-top:5px;padding:3px 10px 6px;border-radius:14px;}
.tl-row {display:block;}
.tl-wrap {padding:6px 0 15px;}
.controls {grid-template-columns:1fr 44px 1fr;gap:8px;}
.controls .btn {height:38px;}
.play {width:44px;height:44px;box-shadow:none;}
.ticks {top:34px;}
.era-divider {top:7px;}
.about {max-height:85dvh;overflow:auto;}
.about h3 {font-size:14px;margin:18px 0 6px;}
.about a {color:var(--accent);}
.about summary {font-size:13px;cursor:pointer;min-height:32px;}
@media(min-width:760px){.shell {padding:8px 12px;} .explore-tools {justify-content:center;} .explore-tools .view-switch {margin-right:0;} .legend {justify-content:center;} .color-cluster {min-height:24px;} .dock {max-width:960px;align-self:center;}}
@media(max-width:355px){.explore-tools{gap:3px;}.explore-tools .btn,.explore-tools .btn.toggle{padding:0 5px;font-size:10px;}.brand h1{font-size:18px;}}
@supports not (width:1cqw){.atmosphere,.atmosphere[data-visual]{width:min(86vw,60dvh);height:min(86vw,60dvh);}}

.globe-pin.pole-pin::after {left:calc(50% - 4px + var(--pin-offset,0px));}
.event-milestones {margin:0 12px;}
.snapshot-mark {position:absolute;top:-2px;transform:translateX(-50%);width:14px;height:13px;padding:0;border:0;border-radius:3px;background:transparent;pointer-events:auto;cursor:pointer;}
.snapshot-mark::after {content:'';position:absolute;inset:3px 4px;background:#806337;transform:rotate(45deg);border:1px solid #f6efd9;}
.snapshot-mark:focus-visible {outline:2px solid var(--accent);outline-offset:1px;}

.globe-pin.pole-pin::after {bottom:-4px;}
.globe-pin.pole-pin.edge-top::after {top:-4px;bottom:auto;}

/* 2026-09-08: horizontal exploration and quiz selection. */
.map-heading {position:absolute;z-index:4;left:10px;top:10px;max-width:calc(100% - 64px);pointer-events:none;}
.map-heading .map-age,body[data-mode="life"] .map-heading .map-age {position:static;display:table;max-width:100%;}
.global-highlights {display:flex;align-items:flex-start;flex-direction:column;gap:3px;margin-top:7px;padding:9px 11px;border-radius:10px;background:#091625df;pointer-events:auto;max-width:100%;}
.global-label {font-size:10px;color:#c9d5dd;letter-spacing:.07em;}
.global-highlight {background:none;border:0;color:#fff0c4;font:650 clamp(16px,4.4vw,22px)/1.45 var(--font-ui);text-align:left;padding:4px 0;min-height:40px;cursor:pointer;}
.global-highlight:focus-visible {outline:2px solid #e4c38b;outline-offset:2px;}
.color-cluster {min-height:0;}
.legend:not(.show) {display:none;}
#earthSpinCanvas {display:block;width:100%;height:100%;touch-action:none;cursor:grab;outline-offset:-4px;}
#earthSpinCanvas:active {cursor:grabbing;}
.quiz-menu {width:min(470px,calc(100vw - 28px));max-height:88dvh;overflow:auto;padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--paper);color:var(--ink);}
.quiz-menu::backdrop {background:#07131dad;}
.quiz-menu-top {display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.quiz-menu h2 {font-size:21px;margin:0;}
.quiz-kind {display:flex;flex-direction:column;gap:7px;width:100%;text-align:left;padding:18px 15px;margin:10px 0;border:1px solid var(--line);border-radius:12px;background:var(--paper-2);color:var(--ink);cursor:pointer;}
.quiz-kind strong {font-size:18px;}
.quiz-kind span {font-size:12px;line-height:1.5;color:var(--ink-soft);}
#questionPrompt {font-size:19px;line-height:1.65;margin:8px 0 20px;}
.question-progress {font-size:12px;color:var(--muted);}
.quiz-choice {width:100%;padding:13px 14px;text-align:left;border:1px solid var(--line);border-radius:10px;background:var(--paper-2);color:var(--ink);margin:5px 0;font:600 15px/1.5 var(--font-ui);cursor:pointer;}
.quiz-choice.correct {border:2px solid #598f61;background:#e0efd8;color:#254c30;}
.quiz-choice.incorrect {border:2px solid #b4796b;}
#questionFeedback {font-size:14px;line-height:1.7;}
#questionSource a {font-size:11px;color:var(--ink-soft);}
.quiz-kind:focus-visible,.quiz-choice:focus-visible {outline:2px solid var(--accent);outline-offset:2px;}