/* Archive interiors: the active era supplies optics, while each task controls density.
   Load after legacy archive, map, saved-demo and surface-boundary styles. */
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos {
  --ega-card-radius: max(18px, calc(var(--g-radius, 30px) - 6px));
  --ega-small-radius: max(14px, calc(var(--g-radius, 30px) - 12px));
  --ega-hairline: rgb(var(--g-light) / .14);
  --ega-wash: rgb(var(--g-light) / .045);
  --ega-card-shadow: var(--eg-inner, var(--g-inner)), 0 9px 24px rgb(0 0 0 / .13);
}

/* Nested cards retain the era's coating and thickness rather than becoming flat tints. */
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos :is(
  .lg-tracks article, .lg-glossary article, .lg-watch, .lg-evidence,
  .lg-era-background, .cu-map-themes button, .cu-map-gap,
  .cu-journey-list button, .cu-check-options button, .cu-check-feedback,
  .cu-deep, .cu-lesson, .cu-reading-context .cu-context-explain
) {
  background: var(--eg-light-surface, var(--g-sheen), rgb(var(--g-tint) / .46)) !important;
  border: var(--g-edge-width, 1px) solid var(--eg-border, rgb(var(--g-light) / .2)) !important;
  border-radius: var(--ega-card-radius);
  box-shadow: var(--ega-card-shadow);
  color: var(--eg-ink, var(--g-ink));
  -webkit-backdrop-filter: blur(calc(var(--g-blur) * .55)) saturate(var(--g-saturate));
  backdrop-filter: blur(calc(var(--g-blur) * .55)) saturate(var(--g-saturate));
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos :is(
  .lg-tracks article, .lg-glossary article, .cu-map-themes button, .cu-journey-list button
) {
  transition: border-color .2s, box-shadow .2s, background .2s;
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos :is(
  .lg-tracks article:hover, .cu-map-themes button:hover,
  .cu-journey-list button:hover, .cu-check-options button:hover:not(:disabled)
) {
  border-color: rgb(var(--g-light) / .4) !important;
  box-shadow: var(--eg-inner, var(--g-inner)), 0 15px 32px rgb(0 0 0 / .2), var(--g-glow);
}

/* Learning: a stable reading layer surrounded by softer lesson and concept cards. */
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos :is(.lg-content, .cu-map-content, .cu-chrono-content, .cu-journey-content) {
  min-width: 0;
  min-height: 0;
  overscroll-behavior: contain;
  scrollbar-color: rgb(var(--g-light) / .3) transparent;
  scroll-padding-block: 12px 24px;
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos :is(.lg-tabs, .cu-map-modes, .cu-chrono-views, .cu-hzoom) {
  gap: 5px;
  padding: 5px;
  border: var(--g-edge-width, 1px) solid var(--eg-border) !important;
  border-radius: 999px;
  background: var(--eg-control, var(--g-sheen), rgb(var(--g-tint) / .38)) !important;
  box-shadow: var(--eg-inner, var(--g-inner)), 0 5px 16px rgb(0 0 0 / .12);
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .lg-tabs {
  gap: 4px;
  margin-block: 8px 20px;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  flex-shrink: 0;
  scrollbar-width: none;
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos :is(.lg-tabs, .cu-map-modes, .cu-chrono-views, .cu-chrono-filters, .cu-hzoom) button {
  min-height: 40px;
  border: 1px solid transparent !important;
  border-radius: 999px;
  background: transparent !important;
  color: var(--eg-muted, var(--g-muted)) !important;
  -webkit-text-fill-color: currentColor !important;
  box-shadow: none;
  padding: 9px 15px !important;
  white-space: nowrap;
}
/* Learning controls retain a full touch target independently of the
   denser chronology and graph controls above. */
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .lg-tabs button,
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .lg-selector :is(button, select) {
  min-height: 44px;
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .lg-selector button {
  min-width: 44px;
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos :is(.lg-tabs, .cu-map-modes, .cu-chrono-views, .cu-chrono-filters, .cu-hzoom) button[aria-pressed="true"],
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos :is(.lg-theme-buttons, .cu-map-themes) button[aria-pressed="true"] {
  background: var(--eg-selected-surface) !important;
  color: var(--g-ink) !important;
  -webkit-text-fill-color: currentColor !important;
  border-color: rgb(var(--g-light) / .38) !important;
  box-shadow: var(--eg-inner, var(--g-inner)), 0 4px 14px rgb(0 0 0 / .12);
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos :is(.lg-how, .lg-section-heading, .lg-progress, .cu-map-selection, .cu-map-result-note) {
  border-color: var(--ega-hairline);
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos :is(.lg-tracks, .lg-glossary, .lg-read-list) {
  gap: 16px;
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos :is(.lg-tracks article, .lg-glossary article) {
  min-width: 0;
  padding: 22px;
  overflow-wrap: anywhere;
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos :is(.lg-watch, .lg-evidence, .lg-era-background) {
  padding: 18px 22px;
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos :is(.lg-evidence, .lg-watch, .lg-era-background, .lg-glossary article) p {
  color: var(--eg-muted, var(--g-muted));
  line-height: 1.95;
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos :is(.lg-kicker, .lg-how b, .lg-evidence > span, .lg-watch b, .lg-concept-reference a, .lg-tracks button) {
  color: var(--g-accent) !important;
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos :is(.lg-tracks h4, .lg-glossary h4, .lg-lead h3, .lg-read-list strong) {
  color: var(--eg-ink, var(--g-ink));
  font-weight: 500;
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos :is(.lg-concepts, .lg-theme-buttons, .cu-reading-concepts) button {
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid var(--eg-border) !important;
  border-radius: 999px;
  background: var(--eg-control) !important;
  box-shadow: var(--eg-inner, var(--g-inner));
  color: var(--eg-ink, var(--g-ink)) !important;
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .lg-progress {
  gap: 18px;
  flex-wrap: wrap;
  border: 0;
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .lg-progress > div {
  padding: 16px 22px;
  flex: 1 1 140px;
  border: 1px solid var(--eg-border);
  border-radius: var(--ega-card-radius);
  background: var(--eg-light-surface) !important;
  box-shadow: var(--ega-card-shadow);
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .lg-progress strong {
  color: var(--g-accent);
}

/* Quiet list leaves: enough separation to float, without creating a grid of heavy boxes. */
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos :is(.lg-read-list, .cu-map-entries, .cu-result-list, .hm-place-records) {
  gap: 10px;
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos :is(.lg-read-list, .cu-map-entries, .cu-result-list, .hm-place-records) > button {
  min-width: 0;
  min-height: 56px;
  padding: 15px 17px !important;
  border: 1px solid var(--ega-hairline) !important;
  border-radius: var(--ega-small-radius);
  background: var(--eg-control, var(--g-sheen), rgb(var(--g-tint) / .34)) !important;
  box-shadow: var(--eg-inner, var(--g-inner)), 0 5px 15px rgb(0 0 0 / .1);
  color: var(--eg-ink, var(--g-ink)) !important;
  -webkit-text-fill-color: currentColor;
  overflow-wrap: anywhere;
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos :is(.lg-read-list, .cu-map-entries, .cu-result-list, .hm-place-records) > button:hover {
  background: var(--g-sheen), rgb(var(--g-tint) / .68) !important;
  border-color: rgb(var(--g-light) / .36) !important;
  box-shadow: var(--eg-inner, var(--g-inner)), 0 10px 24px rgb(0 0 0 / .18), var(--g-glow);
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos :is(.lg-read-list, .cu-map-entries, .cu-result-list, .hm-place-records) :is(small, em, .cu-map-star) {
  color: var(--eg-muted, var(--g-muted)) !important;
  -webkit-text-fill-color: currentColor;
}

/* Cultural graph uses spacious theme facets and a bounded, scrollable evidence matrix. */
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-map-tools {
  gap: 16px;
  align-items: center;
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-map-themes {
  gap: 12px;
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-map-themes button {
  min-width: 0;
  padding: 16px 17px;
  min-height: 62px;
  text-align: left;
  border-radius: var(--ega-small-radius);
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-map-themes :is(i, b),
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-map-selection > div > span {
  color: var(--g-accent) !important;
  -webkit-text-fill-color: currentColor;
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-map-gap {
  padding: 28px;
  line-height: 1.95;
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-map-matrix {
  margin-top: 24px;
  border: 1px solid var(--ega-hairline);
  border-radius: var(--ega-card-radius);
  padding: 16px 18px;
  background: rgb(var(--g-tint) / .2) !important;
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-map-matrix > summary {
  min-height: 40px;
  color: var(--g-accent);
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-map-table-wrap {
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: 14px;
  scrollbar-color: rgb(var(--g-light) / .28) transparent;
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-map-table-wrap :is(th, td) {
  border-color: var(--ega-hairline);
  color: var(--eg-muted, var(--g-muted));
}

/* Chronology keeps its engineered event positions; only the optical surfaces change. */
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-chrono.cu-chrono {
  --tl-fg: var(--eg-ink, var(--g-ink));
  --tl-fg-2: var(--eg-ink, var(--g-ink));
  --tl-fg-3: var(--eg-muted, var(--g-muted));
  --tl-accent: var(--g-accent);
  --tl-on-accent: var(--g-primary-ink);
  --tl-rule: rgb(var(--g-light) / .17);
  --tl-band: rgb(var(--g-light) / .025);
  --tl-read: var(--g-selection);
  --tl-span: rgb(var(--g-tint) / .72);
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-chrono::before {
  background: none;
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-chrono-tools {
  border-bottom-color: var(--ega-hairline);
  gap: 12px;
  padding-bottom: 16px;
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-chrono-filters {
  gap: 6px;
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-chrono-filters button {
  border-color: var(--ega-hairline) !important;
  background: var(--eg-control) !important;
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-chrono .cu-hspan {
  border-radius: 999px;
  border: 1px solid rgb(var(--g-light) / .26);
  background: var(--eg-control) !important;
  box-shadow: var(--eg-inner, var(--g-inner)), 0 4px 12px rgb(0 0 0 / .16);
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-chrono .cu-htag span {
  border-radius: 8px;
  border-left-width: 2px;
  background: rgb(var(--g-tint) / .22) !important;
  padding-inline: 8px;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-chrono :is(.cu-scroll-tip, .cu-track-tip) {
  background: var(--eg-reading-surface, var(--g-reading)) !important;
  border: 1px solid var(--eg-border);
  border-radius: 15px;
  box-shadow: var(--eg-elevation, var(--g-shadow)), var(--eg-inner, var(--g-inner));
  color: var(--g-ink) !important;
  -webkit-text-fill-color: currentColor !important;
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-chrono .cu-hreadout {
  background: var(--eg-reading-surface, var(--g-reading)) !important;
  border: 1px solid var(--ega-hairline);
  border-radius: 999px;
  padding: 8px 17px;
  box-shadow: var(--eg-inner, var(--g-inner)), 0 5px 16px rgb(0 0 0 / .13);
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-chrono-era > header {
  background: var(--eg-reading-surface, var(--g-reading)) !important;
  border-radius: 15px;
  padding: 13px 15px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-chrono-era li > button {
  border-radius: 13px;
  min-height: 44px;
  color: var(--g-ink);
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-chrono-era li > button:hover {
  background: var(--eg-selected-surface) !important;
}

/* Journey cards float as complete leaves. Text is never clipped by the decorative orbit. */
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-journey-list {
  gap: 18px;
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-journey-list button {
  padding: 23px !important;
  overflow: hidden;
  min-width: 0;
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-journey-list button :is(h3, p) {
  position: relative;
  z-index: 1;
  overflow-wrap: anywhere;
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-journey-list button > span {
  color: var(--g-accent);
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-route-art {
  border-color: rgb(var(--g-light) / .22);
  opacity: .65;
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-route-art::before {
  border-color: rgb(var(--g-light) / .2);
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-route-art::after {
  color: var(--g-accent);
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-journey-dock {
  background: var(--eg-surface) !important;
  border: var(--g-edge-width, 1px) solid var(--eg-border);
  border-radius: var(--ega-card-radius);
  box-shadow: var(--eg-inner, var(--g-inner)), var(--eg-elevation, var(--g-shadow)), var(--g-glow);
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-saturate));
  backdrop-filter: blur(var(--g-blur)) saturate(var(--g-saturate));
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-journey-step button {
  border-radius: 50%;
  min-width: 40px;
  min-height: 40px;
  background: var(--eg-control) !important;
  border: 1px solid var(--ega-hairline);
}

/* The former one-off saved card now consumes exactly the active era's material. */
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-results[data-card-style="glass-demo"] {
  --saved-glass-text: var(--g-ink);
  --saved-glass-muted: var(--g-muted);
  border: var(--g-edge-width, 1px) solid var(--eg-border);
  border-radius: var(--eg-radius, var(--g-radius));
  background: var(--eg-surface) !important;
  box-shadow: var(--eg-inner, var(--g-inner)), var(--eg-elevation, var(--g-shadow)), var(--g-glow);
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-saturate));
  backdrop-filter: blur(var(--g-blur)) saturate(var(--g-saturate));
  scrollbar-color: rgb(var(--g-light) / .28) transparent;
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-results[data-card-style="glass-demo"] :is(.cu-saved-empty-symbol, .cu-result-close) {
  color: var(--g-ink) !important;
  border-color: var(--eg-border) !important;
  background: var(--eg-control) !important;
  box-shadow: var(--eg-inner, var(--g-inner)), 0 5px 18px rgb(0 0 0 / .13);
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-results[data-card-style="glass-demo"] .cu-result-list button {
  background: var(--eg-control) !important;
  border-color: var(--eg-border) !important;
  color: var(--g-ink) !important;
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-results[data-card-style="glass-demo"] .cu-result-list .cu-continue {
  background: var(--eg-selected-surface) !important;
  border-radius: 999px;
}

/* Geographic callouts and instruments share the sky's glass, leaving the map visible. */
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .hm-world :is(.hm-place-panel, .hm-mode, .hm-zoom) {
  background: var(--eg-surface) !important;
  color: var(--eg-ink, var(--g-ink));
  border: var(--g-edge-width, 1px) solid var(--eg-border);
  box-shadow: var(--eg-inner, var(--g-inner)), var(--eg-elevation, var(--g-shadow)), var(--g-glow);
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-saturate));
  backdrop-filter: blur(var(--g-blur)) saturate(var(--g-saturate));
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .hm-world .hm-place-panel {
  border-radius: var(--eg-radius, var(--g-radius));
  scroll-padding-block: 12px 24px;
  overscroll-behavior: contain;
  scrollbar-color: rgb(var(--g-light) / .3) transparent;
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .hm-place-panel :is(.hm-place-location, .hm-place-evidence, small) {
  color: var(--eg-muted, var(--g-muted));
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .hm-place-panel :is(.hm-place-title, strong) {
  color: var(--eg-ink, var(--g-ink));
  overflow-wrap: anywhere;
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .hm-world :is(.hm-mode, .hm-zoom) {
  border-radius: 999px;
  padding: 5px;
  gap: 4px;
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .hm-world :is(.hm-mode, .hm-zoom) button {
  min-width: 40px;
  min-height: 40px;
  border-radius: 999px;
  color: var(--eg-muted, var(--g-muted));
  border: 1px solid transparent;
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .hm-world .hm-mode button[aria-pressed="true"] {
  color: var(--g-ink);
  background: var(--eg-selected-surface) !important;
  border-color: rgb(var(--g-light) / .3);
  box-shadow: var(--eg-inner, var(--g-inner));
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .hm-marker {
  border-radius: 12px;
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .hm-marker:is(:hover, .is-active) {
  background: var(--eg-control) !important;
  color: var(--g-accent);
  box-shadow: var(--eg-inner, var(--g-inner));
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .hm-place-records button {
  padding-right: 29px !important;
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .hm-place-records i {
  right: 12px;
}

/* Preserve real correctness cues; material remains the era's, the inset mark carries meaning. */
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-check-options button.is-correct,
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-check-feedback.is-correct {
  border-color: color-mix(in srgb, var(--g-accent) 38%, #8bc8a5) !important;
  box-shadow: var(--eg-inner, var(--g-inner)), inset 3px 0 0 #8bc8a5;
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-check-options button.is-wrong,
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-check-feedback.is-wrong {
  border-color: color-mix(in srgb, var(--g-accent) 38%, #d89e8e) !important;
  box-shadow: var(--eg-inner, var(--g-inner)), inset 3px 0 0 #d89e8e;
}

@media (max-width: 800px) {
  html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos :is(.lg-tracks article, .lg-glossary article) { padding: 18px; }
  html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos :is(.lg-tracks, .lg-read-list, .lg-glossary) { grid-template-columns: minmax(0, 1fr); }
  html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos :is(.lg-tabs, .cu-map-modes) { border-radius: 24px; }
  html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .lg-selector label { min-width: 0; }
  html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .lg-selector select { max-width: 100%; }
  html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .lg-evidence { grid-template-columns: minmax(0, 1fr); }
  html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .lg-progress { gap: 10px; }
  html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .lg-progress > div { flex-basis: 75px; padding: 14px; }
  html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos :is(.cu-map-tools, .cu-map-result-note) { flex-wrap: wrap; }
  html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-map-themes { gap: 8px; }
  html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-map-themes button { min-height: 54px; padding: 12px; }
  html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-map-matrix { padding: 12px; }
  html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-journey-list button { padding: 20px !important; }
  html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-journey-dock { gap: 12px; }
  html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-journey-step { flex-shrink: 0; }
  html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-chrono .cu-hreadout { gap: 9px; padding: 7px 12px; max-width: calc(100% - 20px); }
  html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-chrono .cu-hreadout span { overflow: hidden; text-overflow: ellipsis; }
}

@media (max-width: 420px) {
  html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-map-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-chrono-views button { padding-inline: 11px !important; }
  html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-chrono-filters button { padding-inline: 10px !important; }
  html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .hm-place-panel { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos :is(.lg-tracks article, .lg-glossary article, .cu-map-themes button, .cu-journey-list button) { transition: none; }
}

/* A narrow learning panel shows all five modes, including the last one;
   a hidden horizontal rail must not turn a mode into a partial chip. */
@media (max-width: 700px) {
  html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .lg-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    max-width: 100%;
    overflow: visible;
  }
  html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .lg-tabs button {
    min-width: 0;
    min-height: 44px;
    padding: 10px 8px !important;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.5;
  }
  html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .lg-selector {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .lg-selector label {
    width: 100%;
    min-width: 0;
    align-items: stretch;
  }
  html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .lg-selector select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 44px;
  }
  html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .lg-selector > div {
    justify-self: end;
    align-self: auto;
    gap: 8px;
  }
}
@media (max-width: 420px) {
  html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .lg-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .lg-tabs > button:last-child {
    grid-column: 1 / -1;
  }
}

/* Keep archive reading steps touchable when the older short-window rules
   reduce their type size. Labels may grow; the reading body keeps scrolling. */
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-detail .cu-reading-tabs {
  flex: 0 0 auto;
  min-width: 0;
}
html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-detail .cu-reading-tabs button {
  min-width: 0;
  min-height: 44px;
  height: auto;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
}
@media (max-width: 800px), (max-height: 500px) {
  html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-detail .cu-reading-tabs {
    flex-wrap: wrap;
    gap: 6px;
  }
  html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-detail .cu-reading-tabs button {
    flex: 1 1 calc(50% - 3px);
  }
}

/* Reading owns the foreground on a small screen. Reclaim the space reserved
   for the background era rail, then scroll the panel if its controls grow. */
@media (max-width: 800px), (max-height: 500px) {
  html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-detail.cu-panel {
    bottom: 16px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: 12px;
  }
  html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-detail > * {
    flex-shrink: 0;
    min-width: 0;
  }
  html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-detail .cu-detail-scroll {
    flex: 1 0 160px;
    min-height: 160px;
    overflow-y: auto;
    overscroll-behavior-y: auto;
  }
  html[data-site-runtime="archive"] body #civilization-deep-cosmos#civilization-deep-cosmos .cu-detail .cu-detail-title {
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
  }
}