/* THE PALE BLUE DOT — HUD styles.
   Dark, minimal, translucent panels; the simulation owns the screen. */

:root {
  --bg: #010205;
  --panel-bg: rgba(9, 13, 21, 0.62);
  --panel-bg-strong: rgba(9, 13, 21, 0.86);
  --panel-border: rgba(150, 185, 230, 0.12);
  --panel-radius: 10px;
  --text: #e4eaf3;
  --text-dim: #93a0b3;
  --text-faint: #7a8699; /* Task 12: ≥ 4.5:1 on the panels (was #5f6b7d, 3.8:1) */
  --accent: #8fc3ff;
  --accent-strong: #c2deff;
  --accent-soft: rgba(143, 195, 255, 0.14);
  --warn: #ffb874;
  --ok: #7fd9a4;
  --fail: #ff8a8a;
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
  --gutter: 20px;
  --blur: blur(10px) saturate(120%);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

.app {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.viewport {
  position: absolute;
  inset: 0;
}

.viewport-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
}

.viewport-canvas:active {
  cursor: grabbing;
}

.hud {
  position: absolute;
  z-index: 10;
}

.panel {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}

.panel__title {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ------------------------------------------------------------ brand */

.brand {
  top: 18px;
  left: 24px;
  pointer-events: none;
}

.brand__row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand__row--center {
  justify-content: center;
}

.brand__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9ccaff;
  box-shadow: 0 0 10px 2px rgba(140, 195, 255, 0.55);
}

.brand__title {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--text);
}

.brand__subtitle {
  margin: 5px 0 0 17px;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ------------------------------------------------------------ toolbar */

.toolbar {
  z-index: 15; /* above the side panels so the Layers dropdown overlays them */
  top: 16px;
  right: var(--gutter);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 340px);
}

.toolbar__caption {
  flex-basis: 100%;
  margin: 0;
  text-align: right;
  font-size: 11px;
  color: var(--text-faint);
  max-width: 460px;
  margin-left: auto;
  line-height: 1.4;
}

.segmented,
.toggle-group {
  display: flex;
  padding: 3px;
  gap: 2px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}

.segmented__option,
.toggle {
  border: 0;
  background: transparent;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: background 0.15s, color 0.15s;
}

.segmented__option:hover,
.toggle:hover {
  color: var(--text);
}

.segmented__option.is-active {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.toggle[aria-pressed="true"] {
  color: var(--accent-strong);
}

.toggle[aria-pressed="true"]::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 6px 1px 0;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
}

.toggle--icon {
  width: 28px;
  padding: 6px 0;
  text-align: center;
}

/* ------------------------------------------------------------ targets */

.targets {
  top: 92px;
  left: var(--gutter);
  width: 168px;
  max-height: calc(100% - 92px - 150px);
  overflow-y: auto;
  padding: 14px 10px 12px;
  scrollbar-width: thin;
}

.targets .panel__title {
  padding-left: 6px;
}

.target-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.target {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  text-align: left;
  color: var(--text-dim);
  transition: background 0.15s, color 0.15s;
}

.target:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}

.target.is-selected {
  background: var(--accent-soft);
  color: var(--text);
}

.target--moon {
  padding-left: 26px;
}

.target__swatch {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--swatch);
  opacity: 0.85;
}

.target--star .target__swatch {
  background: #ffd88a;
  box-shadow: 0 0 6px rgba(255, 210, 130, 0.7);
}

.target.is-tracked .target__name::after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
  box-shadow: 0 0 6px var(--accent);
}

.targets__actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  padding: 0 4px;
}

.chip {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}

.chip:hover {
  color: var(--text);
  border-color: rgba(150, 185, 230, 0.3);
}

.camera-status {
  margin: 10px 6px 0;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ------------------------------------------------------------ info panel */

.info {
  top: 92px;
  right: var(--gutter);
  width: 300px;
  max-height: calc(100% - 92px - 170px);
  overflow-y: auto;
  padding: 16px 18px;
  scrollbar-width: thin;
}

.info__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.info__class {
  margin: 0 0 3px;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.info__name {
  margin: 0;
  font-size: 22px;
  font-weight: 300;
  letter-spacing: 0.04em;
}

.info__grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px 14px;
  margin: 16px 0 0;
}

.info__grid dt {
  font-size: 11px;
  color: var(--text-faint);
}

.info__grid dd {
  margin: 0;
  font-size: 12px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.info__aside {
  display: block;
  margin-top: 1px;
  font-size: 10.5px;
  color: var(--text-faint);
}

.info__summary {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--panel-border);
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-dim);
}

.info.is-collapsed .info__body {
  display: none;
}

.info.is-collapsed .icon-button svg {
  transform: rotate(-90deg);
}

.icon-button {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--panel-border);
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1;
}

.icon-button:hover {
  color: var(--text);
}

.icon-button svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  transition: transform 0.2s;
}

/* ------------------------------------------------------------ time panel */

.time {
  left: 50%;
  bottom: var(--gutter);
  transform: translateX(-50%);
  width: min(780px, calc(100% - 2 * var(--gutter)));
  padding: 12px 16px 12px;
}

.time__readout {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}

.time__when {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.time__date {
  font-size: 22px;
  font-weight: 300;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

.time__clock {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.time__meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 11px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.time__multiplier {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent-strong);
}

.time.is-paused .time__multiplier {
  color: var(--warn);
  letter-spacing: 0.18em;
}

.time__jd {
  font-family: var(--font-mono);
}

.time__controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.time__speeds {
  display: flex;
  flex: 1;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  overflow-x: auto;
  scrollbar-width: none;
}

.speed-button {
  flex: 1;
  min-width: 46px;
  padding: 5px 6px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
}

.speed-button:hover {
  color: var(--text);
}

.speed-button.is-active {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.time-button {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--panel-border);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-dim);
}

.time-button svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

.time-button:hover {
  color: var(--text);
}

.time-button.is-active {
  color: var(--warn);
  border-color: rgba(255, 184, 116, 0.4);
}

.time-button--primary {
  width: 36px;
  height: 36px;
  color: var(--accent-strong);
  border-color: rgba(143, 195, 255, 0.35);
  background: var(--accent-soft);
}

.time-button--primary.is-paused {
  color: var(--warn);
  border-color: rgba(255, 184, 116, 0.45);
  background: rgba(255, 184, 116, 0.1);
}

.time__jumps {
  display: flex;
  gap: 4px;
}

.time-button--text {
  width: auto;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.time__warning {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--warn);
}

/* ------------------------------------------------------------ scale indicator */

.scale {
  left: calc(var(--gutter) + 4px);
  bottom: calc(var(--gutter) + 6px);
  pointer-events: none;
}

.scale__bar {
  height: 6px;
  border: 1px solid rgba(220, 230, 245, 0.75);
  border-top: 0;
  transition: width 0.2s ease-out;
}

.scale__label {
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text);
}

.scale__note {
  margin-top: 2px;
  font-size: 10px;
  color: var(--text-faint);
  max-width: 220px;
}

/* ------------------------------------------------------------ labels */

.label-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}

.body-label {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 18px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  pointer-events: auto;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label-color, #c9d3e2);
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.7);
  opacity: 0.82;
  white-space: nowrap;
  will-change: transform;
  transition: opacity 0.2s;
}

.body-label:hover {
  opacity: 1;
  color: #fff;
}

.body-label.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.body-label.is-selected {
  opacity: 1;
  color: var(--accent-strong);
}

/* Selected but not placeable (off screen, behind the camera): stays hidden. */
.body-label.is-selected.is-hidden {
  opacity: 0;
}

.body-label__dot {
  display: none;
}

.body-label--moon {
  font-size: 9.5px;
}

/* ------------------------------------------------------------ debug */

/* Bottom-left, under the target list and above the scale bar: the info panel owns the right side. */
.debug {
  left: var(--gutter);
  bottom: 76px;
  width: min(440px, calc(100% - 2 * var(--gutter)));
  max-height: max(160px, calc(100% - 76px - 470px));
  overflow: auto;
  padding: 12px 14px;
  background: var(--panel-bg-strong);
}

.debug__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.debug__header .chip {
  flex: none;
  color: var(--accent-strong);
}

.debug__text {
  margin: 8px 0 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.55;
  color: #b9c6d8;
  white-space: pre;
}

/* ------------------------------------------------------------ overlays */

.overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(1, 2, 6, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.loading {
  background: var(--bg);
  transition: opacity 0.7s ease;
}

.loading.is-done {
  opacity: 0;
  pointer-events: none;
}

.loading__content {
  width: min(360px, 80vw);
  text-align: center;
}

.loading__track {
  height: 1px;
  margin: 28px 0 12px;
  background: rgba(150, 185, 230, 0.15);
  overflow: hidden;
}

.loading__progress {
  height: 100%;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.25s ease-out;
}

.loading__status {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.dialog {
  width: min(560px, 100%);
  max-height: calc(100vh - 2 * var(--gutter));
  overflow-y: auto;
  padding: 22px 24px;
  background: var(--panel-bg-strong);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.dialog--wide {
  width: min(820px, 100%);
}

.dialog h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.dialog__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

.dialog__note {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-dim);
}

/* Creator notice: the last, quietest line of the Credits section. */
.credits__copyright {
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--panel-border);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

.help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.help-grid h3 {
  margin: 0 0 8px;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.help-grid dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  margin: 0;
}

.help-grid dt {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text);
}

.help-grid dd {
  margin: 0;
  font-size: 12px;
  color: var(--text-dim);
}

.validation-summary {
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ok);
}

.validation-summary.is-failing {
  color: var(--fail);
}

.validation-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.validation-item {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
}

.validation-item__badge {
  flex: none;
  align-self: flex-start;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
}

.validation-item.is-pass .validation-item__badge {
  color: var(--ok);
  background: rgba(127, 217, 164, 0.12);
}

.validation-item.is-fail .validation-item__badge {
  color: var(--fail);
  background: rgba(255, 138, 138, 0.12);
}

.validation-item.is-skip .validation-item__badge {
  color: var(--warn);
  background: rgba(255, 184, 116, 0.12);
}

.validation-item__name {
  margin: 0;
  font-size: 12px;
  color: var(--text);
}

.validation-item__detail {
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-dim);
}

.error .dialog p {
  margin: 12px 0 16px;
  line-height: 1.55;
  color: var(--text-dim);
}

.error .chip {
  flex: none;
}

/* ------------------------------------------------------------ Task 2: modes, layers, small bodies */

.segmented--mode .segmented__option.is-active {
  background: rgba(255, 200, 140, 0.14);
  color: #ffdcb0;
}

.toggle--menu::after {
  content: "";
  display: inline-block;
  margin-left: 6px;
  border: 3.5px solid transparent;
  border-top-color: currentColor;
  vertical-align: -1px;
}

.layers-menu {
  position: absolute;
  top: 44px;
  right: 52px;
  z-index: 20;
  min-width: 210px;
  padding: 10px 12px;
  background: var(--panel-bg-strong);
}

.layers-menu__title {
  margin: 6px 0 4px;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.layer-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
  font-size: 12px;
  color: var(--text-dim);
  cursor: pointer;
}

.layer-option:hover {
  color: var(--text);
}

.layer-option span {
  flex: 1;
}

.layer-option input,
.check input {
  accent-color: var(--accent);
}

kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 5px;
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  color: var(--text-faint);
}

.panel__title--sub {
  margin-top: 12px;
}

.target-list--small .target {
  padding: 4px 8px;
  font-size: 12px;
}

.target {
  padding: 5px 8px;
}

.target--dwarf .target__swatch,
.target--asteroid .target__swatch {
  width: 5px;
  height: 5px;
  margin: 0 1px;
}

.info.is-suppressed {
  display: none;
}

.body-label--dwarf,
.body-label--asteroid {
  font-size: 9.5px;
  opacity: 0.68;
}

.body-label--region {
  font-size: 10px;
  letter-spacing: 0.32em;
  font-style: italic;
  color: rgba(200, 215, 235, 0.55);
  pointer-events: none;
}

.body-label--comet {
  color: #c9f1ff;
  opacity: 0.95;
}

/* Scale journey: bottom-right, beside the time panel. */
.journey {
  right: var(--gutter);
  bottom: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.journey__title {
  margin-bottom: 3px;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.journey__stop {
  padding: 3px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  font-size: 11px;
  color: var(--text-dim);
  text-align: right;
}

.journey__stop:hover {
  color: var(--text);
  border-color: var(--panel-border);
  background: var(--panel-bg);
}

/* ------------------------------------------------------------ Comet Sandbox panel */

.sandbox {
  top: 92px;
  right: var(--gutter);
  width: 312px;
  max-height: calc(100% - 92px - 170px);
  overflow-y: auto;
  padding: 16px 18px;
  scrollbar-width: thin;
}

.sandbox__form {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.field {
  display: grid;
  gap: 6px;
}

.field__label {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.field__hint {
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--text-faint);
  opacity: 0.8;
}

.field__value {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent-strong);
}

.field__select {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
}

.field__select option {
  background: #0b111c;
}

.sandbox input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.chip-row {
  display: flex;
  gap: 6px;
}

.chip--toggle.is-active {
  color: var(--accent-strong);
  border-color: rgba(143, 195, 255, 0.45);
  background: var(--accent-soft);
}

.chip__sub {
  display: block;
  margin-top: 1px;
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}

.check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-dim);
}

.launch-button {
  margin-top: 2px;
  padding: 11px 14px;
  border: 1px solid rgba(255, 196, 140, 0.55);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 176, 100, 0.22), rgba(255, 140, 70, 0.12));
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ffe2c2;
}

.launch-button:hover {
  background: linear-gradient(180deg, rgba(255, 176, 100, 0.32), rgba(255, 140, 70, 0.18));
}

.sandbox__error {
  margin: 0;
  font-size: 11.5px;
  color: var(--fail);
}

.sandbox__flight {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--panel-border);
}

.sandbox__camera {
  display: grid;
  gap: 6px;
}

.sandbox__telemetry {
  margin-top: 12px;
}

.sandbox__event {
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 150, 80, 0.4);
  border-radius: 10px;
  background: rgba(255, 120, 50, 0.08);
}

.sandbox__event.is-miss {
  border-color: rgba(143, 195, 255, 0.35);
  background: var(--accent-soft);
}

.sandbox__event-title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #ffc796;
}

.sandbox__event.is-miss .sandbox__event-title {
  color: var(--accent-strong);
}

.sandbox__event .info__grid {
  margin-top: 8px;
}

.chip-row--four .chip {
  padding: 6px 4px;
  letter-spacing: 0.08em;
}

.chip-row--wrap {
  flex-wrap: wrap;
}

.chip-row--wrap .chip {
  flex: 1 1 40%;
}

.sandbox__options {
  display: grid;
  gap: 6px;
}

.check input:disabled + span {
  opacity: 0.45;
}

.scenario-button {
  display: grid;
  gap: 2px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 150, 90, 0.32);
  border-radius: 10px;
  background: linear-gradient(120deg, rgba(255, 110, 50, 0.1), rgba(120, 60, 30, 0.06));
  text-align: left;
}

.scenario-button:hover {
  border-color: rgba(255, 170, 110, 0.6);
  background: linear-gradient(120deg, rgba(255, 110, 50, 0.18), rgba(120, 60, 30, 0.1));
}

.scenario-button__title {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #ffd2ad;
}

.scenario-button__sub {
  font-size: 11px;
  color: var(--text-dim);
}

.sandbox__history {
  display: grid;
  gap: 6px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--panel-border);
}

.history-list {
  display: grid;
  gap: 4px;
  max-height: 168px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  scrollbar-width: thin;
}

.history-item {
  display: grid;
  gap: 1px;
  width: 100%;
  padding: 6px 9px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  text-align: left;
}

.history-item:hover {
  border-color: rgba(150, 185, 230, 0.3);
}

.history-item__target {
  font-size: 11.5px;
  color: var(--text);
}

.history-item__meta {
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
}

.sandbox__resets {
  display: flex;
  gap: 6px;
  margin-top: 14px;
}

/* ------------------------------------------------------------ impact result card */

.impact-card {
  left: 50%;
  bottom: calc(var(--gutter) + 112px);
  transform: translateX(-50%);
  width: min(600px, calc(100% - 2 * 350px));
  min-width: 380px;
  max-height: calc(100% - 92px - 140px - var(--gutter));
  overflow-y: auto;
  padding: 14px 18px 14px;
  border-color: rgba(255, 160, 100, 0.22);
  background: var(--panel-bg-strong);
  scrollbar-width: thin;
}

.impact-card .info__class {
  color: #ffb27e;
}

.impact-card__grid {
  margin-top: 12px;
}

@media (min-width: 1180px) {
  .impact-card__grid {
    grid-template-columns: auto 1fr auto 1fr;
    column-gap: 16px;
  }
}

.impact-card__scenario {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--panel-border);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
}

.impact-card__scenario p {
  margin: 0 0 6px;
}

.impact__caveat {
  font-size: 11px;
  color: var(--text-faint);
}

.impact-card__details {
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-dim);
}

.impact-card__details summary {
  cursor: pointer;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 10px;
  color: var(--text-faint);
}

.impact-card__details .info__grid {
  margin-top: 8px;
}

.impact-card__details .info__grid dd {
  font-size: 11px;
}

.impact-card__actions {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}

/* ------------------------------------------------------------ cinematic banner */

.cinematic-banner {
  top: 92px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 14px;
  border: 1px solid rgba(255, 160, 100, 0.3);
  border-radius: 999px;
  background: rgba(9, 13, 21, 0.72);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cinematic-banner__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff8a4a;
  box-shadow: 0 0 10px #ff8a4a;
  animation: cinematic-pulse 1.6s ease-in-out infinite;
}

@keyframes cinematic-pulse {
  50% {
    opacity: 0.35;
  }
}

.cinematic-banner__label {
  color: var(--text-faint);
}

.cinematic-banner__phase {
  color: #ffd2ad;
}

.cinematic-banner__exit {
  flex: none;
  padding: 4px 12px;
}

/* ------------------------------------------------------------ comet origin (sandbox) */

.chip-row--origin {
  flex-wrap: wrap;
}

.chip-row--origin .chip {
  flex: 1 1 30%;
  padding: 6px 6px;
  letter-spacing: 0.08em;
  white-space: normal;
  line-height: 1.25;
}

.chip-row--origin .chip:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.origin-card {
  display: grid;
  gap: 6px;
  padding: 9px 11px;
  border: 1px solid var(--panel-border);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.025);
}

.origin-card__grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 0;
}

.origin-card__grid dt {
  font-size: 10.5px;
  color: var(--text-faint);
}

.origin-card__grid dd {
  margin: 0;
  font-size: 11.5px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.origin-card__grid dd small {
  display: block;
  font-size: 10px;
  color: var(--text-faint);
}

.origin-card__note {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-dim);
}

.origin-card__more summary {
  cursor: pointer;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.origin-card__text p {
  margin: 6px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-dim);
}

.sandbox.is-origin [data-custom-only] {
  display: none;
}

/* origin journey: banner + story caption */

.origin-banner {
  border-color: rgba(143, 195, 255, 0.35);
}

.origin-banner__dot {
  background: #8fc3ff;
  box-shadow: 0 0 10px #8fc3ff;
}

.origin-banner__phase {
  color: var(--accent-strong);
}

.origin-banner__steps {
  display: flex;
  gap: 4px;
}

.origin-banner__steps i {
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: rgba(143, 195, 255, 0.2);
}

.origin-banner__steps i.is-done {
  background: rgba(143, 195, 255, 0.55);
}

.origin-banner__steps i.is-current {
  background: var(--accent-strong);
}

.origin-caption {
  left: 50%;
  bottom: calc(var(--gutter) + 118px);
  transform: translateX(-50%);
  width: min(560px, calc(100% - 2 * 350px));
  min-width: 340px;
  padding: 14px 20px 15px;
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  background: rgba(6, 9, 15, 0.72);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  text-align: center;
  pointer-events: none;
  animation: caption-in 0.6s ease-out;
}

@keyframes caption-in {
  from {
    opacity: 0;
    transform: translate(-50%, 8px);
  }
}

.origin-caption__clock {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #ffd9a6;
}

.origin-caption__clock[hidden] {
  display: none;
}

.origin-caption__title {
  margin: 0;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 0.05em;
  color: var(--text);
}

.origin-caption__body {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-dim);
}

/* ------------------------------------------------------------ scene annotations */

.annotation-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
}

.annotation {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
  transition: opacity 0.3s;
}

.annotation.is-hidden {
  opacity: 0;
}

.annotation__ring {
  position: absolute;
  left: -22px;
  top: -22px;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--annotation-color, #8fc3ff);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--annotation-color, #8fc3ff);
  animation: annotation-pulse 2.2s ease-in-out infinite;
}

@keyframes annotation-pulse {
  0%, 100% {
    transform: scale(0.85);
    opacity: 0.95;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.45;
  }
}

.annotation__dot {
  position: absolute;
  left: -3px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--annotation-color, #8fc3ff);
  box-shadow: 0 0 8px var(--annotation-color, #8fc3ff);
}

.annotation__text {
  position: absolute;
  left: 30px;
  top: -14px;
  display: grid;
  gap: 2px;
  padding-left: 9px;
  border-left: 1px solid var(--annotation-color, #8fc3ff);
  white-space: nowrap;
  /* A tight dark halo under the soft glow keeps notes legible over bright planet discs (Task 9). */
  text-shadow: 0 0 2px rgba(0, 0, 0, 1), 0 0 6px rgba(0, 0, 0, 0.95);
}

/* A long note on a narrow screen wraps into the free width beside its marker (Task 9). */
.annotation--wrap .annotation__text {
  width: var(--annotation-wrap);
  white-space: normal;
}

.annotation--tag .annotation__text {
  left: 10px;
  top: -8px;
  border-left: 0;
  padding-left: 0;
}

.annotation--left .annotation__text {
  left: auto;
  right: 30px;
  padding-left: 0;
  padding-right: 9px;
  border-left: 0;
  border-right: 1px solid var(--annotation-color, #8fc3ff);
  text-align: right;
}

.annotation--left.annotation--tag .annotation__text {
  right: 10px;
  border-right: 0;
  padding-right: 0;
}

.annotation__title {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--annotation-color, #8fc3ff);
}

.annotation__body {
  font-size: 11px;
  color: var(--text-dim);
}

.annotation--source {
  --annotation-color: #9fd0ff;
}

.annotation--sun {
  --annotation-color: #ffd58a;
}

.annotation--site {
  --annotation-color: #ffb27e;
}

/* The impact site already carries the impactor's label on its right: put the callout below. */
.annotation--site .annotation__text,
.annotation--site.annotation--left .annotation__text {
  top: 26px;
  left: -40px;
  right: auto;
  width: 80px;
  padding: 0;
  border: 0;
  text-align: center;
}

/* ------------------------------------------------------------ impact card: big stats */

.impact-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 12px;
}

.stat {
  display: grid;
  gap: 2px;
  padding: 8px 10px 9px;
  border: 1px solid var(--panel-border);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.025);
  min-width: 0;
}

.stat__label {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.stat__value {
  font-size: 19px;
  font-weight: 300;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  overflow-wrap: anywhere;
}

.stat__unit {
  margin-left: 3px;
  font-size: 11px;
  color: var(--text-dim);
}

.stat__sub {
  font-size: 10.5px;
  color: var(--text-faint);
}

.stat--hot .stat__value {
  color: #ffd2ad;
}

.impact-card__facts .info__grid {
  margin-top: 8px;
}

.impact-card__story {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.impact-card__story .chip {
  flex: none;
  padding: 7px 16px;
}

.chip--story {
  color: #ffe2c2;
  border-color: rgba(255, 196, 140, 0.5);
  background: linear-gradient(180deg, rgba(255, 176, 100, 0.18), rgba(255, 140, 70, 0.08));
}

.chip--story:hover {
  color: #fff1e0;
  border-color: rgba(255, 196, 140, 0.8);
}

.chip--story.is-suggested {
  animation: story-suggest 1.8s ease-in-out 3;
}

@keyframes story-suggest {
  50% {
    box-shadow: 0 0 14px rgba(255, 176, 100, 0.55);
  }
}

/* ------------------------------------------------------------ visual impact story */

.story {
  z-index: 12;
  top: 92px;
  left: var(--gutter);
  bottom: calc(var(--gutter) + 120px);
  width: min(520px, calc(100% - 312px - 3 * var(--gutter)));
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 170, 110, 0.22);
  border-radius: var(--panel-radius);
  background: rgba(7, 10, 17, 0.9);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: 0 14px 50px rgba(0, 0, 0, 0.5);
}

body.has-story .targets,
body.has-story .info,
body.has-story .impact-card,
body.has-story .debug {
  visibility: hidden;
}

.story__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px 10px;
}

.story__kicker {
  margin: 0 0 3px;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ffb27e;
}

.story__title {
  margin: 0;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0.04em;
}

.story__progress {
  display: flex;
  gap: 4px;
  padding: 0 16px;
}

.story__progress button {
  flex: 1;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.story__progress button.is-done {
  background: rgba(255, 190, 140, 0.5);
}

.story__progress button.is-current {
  background: linear-gradient(90deg, #ffb27e var(--progress, 0%), rgba(255, 255, 255, 0.12) var(--progress, 0%));
}

.story__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 16px 6px;
  scrollbar-width: thin;
}

.story__step-title {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.story__visual {
  position: relative;
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  background: radial-gradient(ellipse at 50% 35%, rgba(40, 60, 95, 0.35), rgba(4, 6, 11, 0.6) 70%);
  overflow: hidden;
  animation: story-fade 0.5s ease-out;
}

.story__visual svg {
  display: block;
  width: 100%;
  height: auto;
  /* See first, read second — but keep the caption on screen on short displays. */
  max-height: max(160px, calc(100vh - 500px));
}

@keyframes story-fade {
  from {
    opacity: 0;
  }
}

.story__caption {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  animation: story-fade 0.6s ease-out;
}

.story__values {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.value-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid var(--prov-color, var(--panel-border));
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 12px;
}

.value-chip__label {
  font-size: 10.5px;
  color: var(--text-faint);
}

.value-chip__value {
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.prov {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #050810;
  background: var(--prov-color);
}

.prov--simulated,
.value-chip--simulated {
  --prov-color: #8fc3ff;
}

.prov--scenario,
.value-chip--scenario {
  --prov-color: #ffc98a;
}

.prov--evidence,
.value-chip--evidence {
  --prov-color: #7fd9a4;
}

.prov--schematic,
.value-chip--schematic {
  --prov-color: #c7b5ff;
}

.story__more {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-dim);
}

.story__more summary {
  cursor: pointer;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.story__more p {
  margin: 6px 0 0;
  line-height: 1.5;
}

.story__more .info__grid {
  margin-top: 8px;
}

.story__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 10px 0 0;
  font-size: 10.5px;
  color: var(--text-faint);
}

.story__footer {
  display: grid;
  gap: 8px;
  padding: 10px 16px 12px;
  border-top: 1px solid var(--panel-border);
}

.story__controls {
  display: flex;
  gap: 6px;
}

.story__controls .chip {
  flex: 1;
}

.story__controls .chip--primary {
  color: var(--accent-strong);
  border-color: rgba(143, 195, 255, 0.45);
  background: var(--accent-soft);
}

.story__honesty {
  margin: 0;
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--text-faint);
}

/* diagram typography (SVG) */

.dg text {
  font-family: var(--font-sans);
  fill: var(--text-dim);
  font-size: 12px;
}

.dg .dg-strong {
  fill: var(--text);
  font-size: 13.5px;
}

.dg .dg-big {
  fill: var(--text);
  font-size: 19px;
  font-weight: 300;
}

.dg .dg-faint {
  fill: #8592a5;
  font-size: 11px;
}

.dg .dg-hot {
  fill: #ffd2ad;
}

.dg .dg-sim {
  fill: #8fc3ff;
}

.dg .dg-evi {
  fill: #7fd9a4;
}

.dg .dg-sce {
  fill: #ffc98a;
}

.dg .dg-sch {
  fill: #c7b5ff;
}

@media (prefers-reduced-motion: reduce) {
  .dg *,
  .annotation__ring,
  .origin-caption,
  .story__visual,
  .story__caption {
    animation: none !important;
  }
}

/* ------------------------------------------------------------ Voyager (Task 5) */

.target--spacecraft .target__swatch {
  width: 6px;
  height: 6px;
  border-radius: 1px;
  transform: rotate(45deg);
  box-shadow: 0 0 6px var(--swatch);
}

.pbd-button {
  width: 100%;
  margin-top: 10px;
  border-color: rgba(143, 195, 255, 0.32);
  background: linear-gradient(120deg, rgba(90, 150, 230, 0.12), rgba(20, 40, 80, 0.08));
}

.pbd-button:hover {
  border-color: rgba(170, 210, 255, 0.6);
  background: linear-gradient(120deg, rgba(90, 150, 230, 0.2), rgba(20, 40, 80, 0.12));
}

.pbd-button .scenario-button__title {
  color: var(--accent-strong);
}

.info__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.info__actions .chip {
  flex: 1 1 auto;
  /* a long action (e.g. an Alison challenge sentence) wraps inside a phone-width panel */
  max-width: 100%;
  white-space: normal;
}

.body-label--spacecraft {
  font-size: 10px;
  letter-spacing: 0.16em;
}

.time__historical {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 8px 0 0;
  padding: 5px 10px;
  border: 1px solid rgba(255, 201, 138, 0.3);
  border-radius: 8px;
  background: rgba(255, 170, 90, 0.07);
  font-size: 11px;
}

.time__historical[hidden] {
  display: none;
}

.time__historical-label {
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 10px;
  color: #ffc98a;
}

.time__historical-note {
  color: var(--text-dim);
}

body.is-historical .time__date {
  color: #ffd9a6;
}

.annotation--voyager-1 {
  --annotation-color: #ffd27a;
}

.annotation--voyager-2 {
  --annotation-color: #9fdcff;
}

.annotation--helio {
  --annotation-color: #c7b5ff;
}

.annotation--assist {
  --annotation-color: #e4eaf3;
}

.annotation--pbd-craft {
  --annotation-color: #ffd27a;
}

.annotation--pbd-craft .annotation__dot {
  display: none;
}

.annotation--pbd-craft .annotation__text,
.annotation--left.annotation--pbd-craft .annotation__text {
  top: -44px;
  left: 40px;
  right: auto;
  padding: 0 0 0 9px;
  border-left: 1px solid var(--annotation-color);
  border-right: 0;
  text-align: left;
}

.annotation--earthdot {
  --annotation-color: rgba(170, 205, 255, 0.85);
}

.annotation--earthdot .annotation__ring {
  left: -16px;
  top: -16px;
  width: 32px;
  height: 32px;
  border-width: 1px;
  box-shadow: none;
  animation: none;
  opacity: 0.75;
}

.annotation--earthdot .annotation__text {
  left: 24px;
  top: -10px;
  border-left: 0;
}

.annotation--left.annotation--earthdot .annotation__text {
  left: auto;
  right: 24px;
  border-right: 0;
}

.annotation--earthdot .annotation__title {
  font-size: 10px;
  letter-spacing: 0.22em;
}

.prov--historical,
.value-chip--historical {
  --prov-color: #f2c26b;
}

.prov--model,
.value-chip--model {
  --prov-color: #9fb4ff;
}

.prov--derived,
.value-chip--derived {
  --prov-color: #8fc3ff;
}

/* Mission stories: positions from a navigation solution, and events that are still plans. */
.prov--navigation,
.value-chip--navigation {
  --prov-color: #7fd3e8;
}

.prov--planned,
.value-chip--planned {
  --prov-color: #ffb874;
}

.dg .dg-v1 {
  fill: #ffd27a;
}

.dg .dg-v2 {
  fill: #9fdcff;
}

/* the stellar encounter (Task 6) */

.encounter-button {
  width: 100%;
  margin-top: 10px;
  border-color: rgba(255, 207, 143, 0.32);
  background: linear-gradient(120deg, rgba(255, 190, 110, 0.12), rgba(60, 40, 20, 0.08));
}

.encounter-button:hover {
  border-color: rgba(255, 217, 160, 0.6);
  background: linear-gradient(120deg, rgba(255, 190, 110, 0.2), rgba(60, 40, 20, 0.12));
}

.encounter-button .scenario-button__title {
  color: #ffd9a0;
}

.target--passing-star .target__swatch {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  box-shadow: 0 0 8px var(--swatch);
}

.annotation--encounter {
  --annotation-color: #ffcf8f;
}

.annotation--encounter-particle {
  --annotation-color: #ffd27a;
}

.body-label--oort-object {
  font-size: 10px;
}

.encounter-cine__dot {
  background: #ffcf8f;
  box-shadow: 0 0 10px #ffcf8f;
}

.encounter-cine__strip {
  margin-top: 8px;
}

.encounter-cine__strip .dg--strip {
  display: block;
  width: 100%;
  height: auto;
  max-height: 50px;
}

.pbd .encounter-cine__caption {
  width: min(720px, calc(100% - 2 * 200px));
  padding: 10px 18px 8px;
}

.encounter-cine__caption .origin-caption__title {
  font-size: 16px;
}

.encounter-cine .pbd__banner .chip[hidden] {
  display: none;
}

/* Task 10: past / future badge, time scrub, encounter selector, comparison diagram. */
.encounter-cine__direction {
  padding: 1px 7px;
  border: 1px solid rgba(255, 217, 160, 0.5);
  border-radius: 999px;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffd9a0;
}

.encounter-cine__direction[data-direction='past']::before {
  content: '◀ ';
}

.encounter-cine__direction[data-direction='future'] {
  border-color: rgba(168, 216, 255, 0.55);
  border-style: dashed;
  color: #a8d8ff;
}

.encounter-cine__direction[data-direction='future']::after {
  content: ' ▶';
}

.encounter-cine__scrub-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-dim);
}

.encounter-cine__scrub {
  flex: 1;
  min-width: 0;
  accent-color: #ffcf8f;
}

.encounter-select {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  margin: 4px 0 6px;
}

.encounter-select__option {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 7px;
  padding: 5px 9px;
  border: 1px solid rgba(255, 207, 143, 0.25);
  border-radius: 9px;
  background: rgba(40, 30, 20, 0.25);
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.encounter-select__option[data-direction='future'] {
  grid-template-columns: 1fr auto;
  border-style: dashed;
  border-color: rgba(168, 216, 255, 0.3);
}

.encounter-select__option .encounter-select__arrow {
  grid-row: span 2;
  font-size: 9px;
  opacity: 0.75;
}

.encounter-select__option[data-direction='future'] .encounter-select__arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: end;
}

.encounter-select__name {
  white-space: nowrap;
}

.encounter-select__name {
  font-size: 12px;
  font-weight: 600;
}

.encounter-select__when {
  font-size: 10.5px;
  color: var(--text-dim);
}

.encounter-select__option.is-active {
  border-color: rgba(255, 217, 160, 0.75);
  background: rgba(255, 190, 110, 0.14);
}

.encounter-select__option[data-direction='future'].is-active {
  border-color: rgba(168, 216, 255, 0.8);
  background: rgba(120, 180, 255, 0.12);
}

.encounter-compare {
  width: 100%;
  margin-top: 6px;
}

.annotation--galactic {
  --annotation-color: #a9c6ff;
}

.galactic-button {
  width: 100%;
  margin-top: 8px;
  border-color: rgba(169, 198, 255, 0.32);
  background: linear-gradient(120deg, rgba(120, 160, 255, 0.1), rgba(30, 40, 70, 0.08));
}

.galactic-button .scenario-button__title {
  color: #c4d6ff;
}

.info__diagram svg {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 760px) {
  /* Phones: the banner's controls wrap onto further rows. */
  .encounter-cine .pbd__banner {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 6px;
    border-radius: 16px;
  }
}
@media (max-width: 760px) {
  /* Phones: the end controls wrap onto a second row inside the banner. */
  .encounter-cine.is-end .pbd__banner {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 6px;
    border-radius: 16px;
    padding: 6px 8px;
  }

  .encounter-cine.is-end .pbd__phase,
  .encounter-cine.is-end .encounter-cine__dot {
    display: none;
  }
}
/* the Pale Blue Dot cinematic */

.pbd {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
}

.pbd[hidden] {
  display: none;
}

.pbd__fade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #010205;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.pbd__fade.is-on {
  opacity: 1;
}

.pbd .pbd__banner,
.pbd .pbd__caption,
.pbd .pbd__inset {
  z-index: 2;
}

.pbd__banner {
  pointer-events: auto;
  transition: opacity 0.6s;
}

.pbd__banner .chip[hidden] {
  display: none;
}

.pbd__caption {
  animation: none;
}

.pbd__caption.is-in {
  animation: caption-in 0.6s ease-out;
}

.pbd__scale-tag {
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid rgba(143, 195, 255, 0.35);
  border-radius: 999px;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

/* Optics bands: sunlight scattered inside the camera (an imaging effect, labelled as such). */
.pbd__rays {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.pbd__rays[hidden] {
  display: none;
}

.pbd__bands {
  position: absolute;
  left: 0;
  top: 0;
  width: 300vmax;
  height: 300vmax;
  margin: -150vmax 0 0 -150vmax;
  transform-origin: 50% 50%;
  opacity: 0;
  mix-blend-mode: screen;
  background: linear-gradient(to bottom,
    transparent 0%,
    transparent 39.6%,
    rgba(150, 120, 255, 0.07) 40.4%,
    rgba(150, 120, 255, 0.04) 41.6%,
    transparent 42.6%,
    transparent 44.8%,
    rgba(255, 186, 120, 0.06) 45.6%,
    transparent 46.8%,
    transparent 48.5%,
    rgba(255, 196, 140, 0.13) 49.3%,
    rgba(255, 214, 170, 0.17) 50%,
    rgba(255, 196, 140, 0.13) 50.7%,
    transparent 51.6%,
    transparent 53.4%,
    rgba(120, 190, 255, 0.07) 54.2%,
    rgba(120, 190, 255, 0.05) 55.6%,
    transparent 56.6%,
    transparent 59%,
    rgba(255, 170, 110, 0.05) 60.2%,
    transparent 61.8%,
    transparent 100%);
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.15) 30%, #000 62%);
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.15) 30%, #000 62%);
}

.pbd__rays-note {
  position: absolute;
  left: 50%;
  bottom: calc(var(--gutter) + 38px);
  transform: translateX(-50%);
  width: min(520px, calc(100% - 32px));
  margin: 0;
  font-size: 10.5px;
  line-height: 1.45;
  text-align: center;
  color: var(--text-faint);
}

.pbd__rays-note strong {
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffc98a;
}

.pbd__inset {
  top: 50%;
  right: calc(var(--gutter) + 8px);
  margin: 0;
  width: 210px;
  transform: translateY(-50%);
  animation: caption-in-plain 1.2s ease-out;
}

@keyframes caption-in-plain {
  from {
    opacity: 0;
  }
}

.pbd__inset[hidden] {
  display: none;
}

/* Opposite Earth's side of the screen, so the inset never covers the dot or its callout. */
.pbd__inset--left {
  right: auto;
  left: calc(var(--gutter) + 8px);
}

.pbd__inset-frame {
  width: 210px;
  height: 210px;
  border: 1px solid rgba(170, 205, 255, 0.45);
  border-radius: 4px;
  box-shadow: 0 0 0 4px rgba(6, 9, 15, 0.55);
}

.pbd__inset figcaption {
  display: grid;
  gap: 3px;
  margin-top: 8px;
  text-align: center;
}

.pbd__inset-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: #ffc98a;
}

.pbd__inset-note {
  font-size: 10.5px;
  color: var(--text-dim);
}

/* Reduce UI clutter while the cinematic runs; quiet the final look-back further. */
body.is-pbd .targets,
body.is-pbd .info,
body.is-pbd .sandbox,
body.is-pbd .impact-card,
body.is-pbd .journey,
body.is-pbd .time,
body.is-pbd .debug,
body.is-pbd .story,
body.is-encounter .targets,
body.is-encounter .info,
body.is-encounter .sandbox,
body.is-encounter .impact-card,
body.is-encounter .journey,
body.is-encounter .time,
body.is-encounter .debug,
body.is-encounter .story,
body.is-pbd-quiet .toolbar,
body.is-pbd-quiet .brand,
body.is-pbd-quiet .scale,
body.is-pbd-quiet .label-layer,
body.is-pbd-close .label-layer {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s, visibility 0s 0.6s;
}

body.is-pbd-quiet .pbd__banner {
  opacity: 0.6;
}

body.is-pbd-quiet .pbd__banner:hover,
body.is-pbd-quiet .pbd__banner:focus-within {
  opacity: 1;
}

.pbd.is-reveal .pbd__caption {
  bottom: calc(var(--gutter) + 78px);
  background: rgba(6, 9, 15, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  .pbd__fade,
  .pbd__inset,
  .pbd__caption.is-in {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 760px) {
  .pbd__inset {
    top: 172px;
    right: var(--gutter);
    width: 124px;
    transform: none;
  }

  .pbd__inset--left {
    right: auto;
    left: var(--gutter);
  }

  .pbd__inset-frame {
    width: 124px;
    height: 124px;
  }

  .pbd__inset-note {
    display: none;
  }

  /* Phones: banner on top, caption at the bottom (both edges pinned: the origin-journey
     caption / banner rules they share classes with anchor the opposite edges). */
  .pbd .pbd__caption {
    top: auto;
    left: var(--gutter);
    right: var(--gutter);
    bottom: calc(var(--gutter) + 20px);
    width: auto;
    min-width: 0;
    transform: none;
    padding: 10px 14px 11px;
  }

  .pbd.is-reveal .pbd__caption {
    bottom: calc(var(--gutter) + 58px);
  }
  .pbd .pbd__caption.is-in {
    animation-name: caption-in-plain;
  }

  .pbd .pbd__banner {
    top: 118px;
    bottom: auto;
    left: var(--gutter);
    right: var(--gutter);
    transform: none;
    justify-content: space-between;
    gap: 6px;
    padding-left: 10px;
  }

  body.is-pbd-quiet .pbd .pbd__banner {
    top: var(--gutter);
  }
  .pbd__banner .chip {
    padding: 4px 9px;
    letter-spacing: 0.08em;
  }

  .pbd.is-reveal .pbd__phase {
    display: none;
  }

  body.is-pbd-quiet .pbd .pbd__inset {
    top: 70px;
  }

  .pbd__banner .pbd__label,
  .pbd__banner .pbd__steps {
    display: none;
  }

  .pbd__rays-note {
    bottom: calc(var(--gutter) + 8px);
    font-size: 9.5px;
  }
}

/* ------------------------------------------------------------ smaller screens */

@media (max-width: 1100px) {
  .toolbar__caption {
    display: none;
  }

  .info {
    width: 270px;
  }
}

/* Where the centred time panel reaches the left column, lift the debug panel above it. */
@media (max-width: 1700px) {
  .debug {
    bottom: 150px;
    max-height: max(160px, calc(100% - 150px - 495px));
  }
}

@media (max-width: 760px) {
  :root {
    --gutter: 12px;
  }

  .brand {
    top: 12px;
    left: 16px;
  }

  .brand__title {
    font-size: 11px;
    letter-spacing: 0.3em;
  }

  .brand__subtitle {
    display: none;
  }

  .toolbar {
    top: 40px;
    left: var(--gutter);
    right: var(--gutter);
    max-width: none;
    justify-content: flex-start;
    gap: 6px;
  }

  .segmented__option,
  .toggle {
    padding: 5px 9px;
    font-size: 10px;
  }

  .targets {
    top: 118px;
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
    padding: 8px;
  }

  .targets .panel__title,
  .camera-status {
    display: none;
  }

  .target-list {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .target,
  .target--moon {
    padding: 5px 9px;
    white-space: nowrap;
  }

  .targets__actions {
    margin-top: 6px;
  }

  .info {
    top: auto;
    bottom: 176px;
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
    max-height: 32vh;
    padding: 12px 14px;
  }

  .info__name {
    font-size: 18px;
  }

  .time__date {
    font-size: 17px;
  }

  .time__jd,
  .time__rate {
    display: none;
  }

  .time__controls {
    flex-wrap: wrap;
  }

  .time__speeds {
    order: 3;
    flex-basis: 100%;
  }

  .scale,
  .journey {
    display: none;
  }

  .sandbox {
    top: auto;
    bottom: 176px;
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
    max-height: 40vh;
  }

  .layers-menu {
    right: 0;
  }

  .debug {
    bottom: auto;
    top: 200px;
    max-height: 40vh;
  }

  .impact-card {
    bottom: 176px;
    left: var(--gutter);
    right: var(--gutter);
    transform: none;
    width: auto;
    min-width: 0;
    max-height: 44vh;
    padding: 12px 14px;
  }

  /* One bottom sheet at a time: the result card temporarily replaces the sandbox form. */
  body.has-impact-card .sandbox {
    display: none;
  }

  .cinematic-banner {
    top: auto;
    bottom: 176px;
  }

  body.has-impact-card .cinematic-banner {
    display: none;
  }

  .impact-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stat__value {
    font-size: 16px;
  }

  /* The journey is a short directed sequence: on phones the target list steps aside for it. */
  body.is-origin-journey .targets {
    display: none;
  }

  .origin-caption {
    top: 118px;
    bottom: auto;
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
    min-width: 0;
    transform: none;
    padding: 10px 14px;
    animation: none;
  }

  .origin-caption__title {
    font-size: 15px;
  }

  .origin-caption__body {
    font-size: 11.5px;
  }

  .origin-banner {
    top: auto;
    bottom: 176px;
    left: var(--gutter);
    right: var(--gutter);
    transform: none;
    justify-content: space-between;
  }

  .origin-banner__steps,
  .origin-banner .cinematic-banner__label {
    display: none;
  }

  body.is-origin-journey .sandbox {
    display: none;
  }

  .story {
    top: 118px;
    bottom: 176px;
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
  }

  body.has-story .sandbox {
    display: none;
  }

  .story__title {
    font-size: 17px;
  }

  .story__caption {
    font-size: 13.5px;
  }
}

/* Mid-size screens: keep the caption clear of the side panels; while a story is open the
   sandbox form steps aside so the 3D view stays visible next to it. */
@media (min-width: 761px) and (max-width: 1100px) {
  .origin-caption {
    width: calc(100% - 2 * 330px);
    min-width: 300px;
  }

  body.has-story .sandbox {
    display: none;
  }

  .story {
    width: min(500px, calc(100% - 2 * var(--gutter) - 200px));
  }
}

/* Where the time panel spans the bottom edge, lift the scale bar above it. */
@media (min-width: 761px) and (max-width: 1060px) {
  .scale {
    bottom: calc(var(--gutter) + 122px);
  }
}

/* ============================================================ Task 7: presentation modes & languages */

/* Explanation level: data-level="science" shows only in Science; "classroom" in Science and
   Classroom (hidden in Alison); data-level-only="alison" shows only in Alison. */
body.edu-classroom [data-level="science"],
body.edu-alison [data-level="science"],
body.edu-alison [data-level="classroom"],
body:not(.edu-alison) [data-level-only="alison"] {
  display: none !important;
}

/* ------------------------------------------------------------ mode & language selector */

.presentation {
  z-index: 16;
  top: 56px;
  left: var(--gutter);
}

.presentation__toggle {
  display: none;
}

.presentation__menu {
  display: flex;
  align-items: center;
  gap: 6px;
}

.segmented--edu .segmented__option,
.segmented--lang .segmented__option {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
}

.segmented--lang .segmented__option {
  letter-spacing: 0.04em;
  text-transform: none;
}

.segmented--edu .segmented__option.is-active {
  background: rgba(150, 225, 190, 0.14);
  color: #c4f2da;
}

.segmented__option:focus-visible,
.toggle:focus-visible,
.chip:focus-visible,
.target:focus-visible,
.journey__stop:focus-visible,
.presentation__toggle:focus-visible,
.challenge-item:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}

.edu-icon {
  flex: none;
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linejoin: round;
}

/* ------------------------------------------------------------ Alison challenges */

.toggle--challenge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #ffe2a6;
}

.toggle--challenge .edu-icon {
  fill: rgba(255, 214, 120, 0.35);
}

.challenge-menu {
  position: absolute;
  top: 54px;
  right: 120px;
  z-index: 20;
  width: min(300px, calc(100vw - 2 * var(--gutter)));
  padding: 12px;
  background: var(--panel-bg-strong);
}

.challenge-menu__title {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.challenge-menu__hint {
  margin: 4px 0 10px;
  font-size: 12px;
  color: var(--text-dim);
}

.challenge-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.challenge-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 14px;
  text-align: left;
  color: var(--text);
}

.challenge-item:hover {
  border-color: rgba(255, 214, 120, 0.5);
}

.challenge-item__check {
  flex: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid rgba(255, 214, 120, 0.6);
  border-radius: 50%;
}

.challenge-item.is-done .challenge-item__check {
  background: rgba(127, 217, 164, 0.85);
  border-color: rgba(127, 217, 164, 0.9);
}

.challenge-item__title {
  flex: 1;
}

.challenge-item__done {
  font-size: 11px;
  color: var(--ok);
}

.challenge-card {
  z-index: 14;
  top: 66px;
  left: 50%;
  transform: translateX(-50%);
  width: min(460px, calc(100% - 2 * var(--gutter) - 380px));
  min-width: 280px;
  padding: 12px 16px;
  border-color: rgba(255, 214, 120, 0.35);
}

.challenge-card__row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.challenge-card__icon {
  flex: none;
  width: 28px;
  height: 28px;
  fill: rgba(255, 214, 120, 0.25);
  stroke: #ffd678;
  stroke-width: 1;
}

.challenge-card.is-complete .challenge-card__icon {
  fill: rgba(255, 214, 120, 0.9);
}

.challenge-card__kicker {
  margin: 0 0 2px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffd678;
}

.challenge-card__prompt {
  margin: 0;
  font-size: 17px;
  line-height: 1.35;
  color: var(--text);
}

.challenge-card__hint {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-dim);
}

.challenge-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.challenge-card__actions .chip {
  flex: 0 1 auto;
  min-height: 40px;
  padding: 8px 14px;
  font-size: 12px;
}

.is-hinted {
  outline: 2px solid rgba(255, 214, 120, 0.9) !important;
  outline-offset: 2px;
  animation: hint-pulse 1.4s ease-in-out infinite;
}

@keyframes hint-pulse {
  50% {
    box-shadow: 0 0 16px rgba(255, 214, 120, 0.6);
  }
}

/* ------------------------------------------------------------ information panel blocks */

.info__grid dt.is-long,
.info__grid dd.is-long {
  grid-column: 1 / -1;
}

.info__grid dd.is-long {
  margin-top: -4px;
  text-align: left;
  line-height: 1.45;
  color: var(--text-dim);
}

.info__tag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  font-size: 9px;
  letter-spacing: 0.06em;
  vertical-align: 1px;
  color: var(--text-faint);
}

.info__tag--measured {
  border-color: rgba(127, 217, 164, 0.45);
  color: #a6e8c2;
}

.info__tag--literature {
  border-color: rgba(255, 196, 140, 0.45);
  color: #ffd2a6;
}

.info__tag--model {
  border-color: rgba(143, 195, 255, 0.45);
  color: var(--accent-strong);
}

.info__tag--illustrative {
  border-style: dashed;
}

.info__block {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--panel-border);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
}

.info__block-title {
  margin: 0 0 6px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.info__block-note {
  margin: 6px 0 0;
  font-size: 10.5px;
  color: var(--text-faint);
}

.info__level {
  margin: 0 0 6px;
}

.info__level-n {
  display: inline-block;
  min-width: 46px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.info__ideas {
  margin: 0;
  padding-left: 18px;
}

.info__ideas li {
  margin: 0 0 4px;
}

.info__analogy,
.info__mechanism {
  margin: 0 0 6px;
}

.info__analogy strong,
.info__mechanism strong {
  font-weight: 500;
  color: var(--text);
}

.info__analogy {
  padding: 6px 8px;
  border-left: 2px dashed rgba(255, 214, 120, 0.5);
}

.info__mechanism {
  padding: 6px 8px;
  border-left: 2px solid rgba(143, 195, 255, 0.6);
}

.info__prompt {
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 214, 120, 0.25);
  border-radius: 9px;
  background: rgba(255, 214, 120, 0.04);
}

.info__prompt-q {
  margin: 0 0 6px;
  color: var(--text);
}

.info__prompt-idea {
  margin: 6px 0 0;
}

.chip--small {
  flex: none;
  padding: 3px 9px;
  font-size: 9.5px;
}

.info__sentence {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text);
}

.info__block--sentences[data-block="keyFact"] .info__sentence {
  font-size: 13px;
}

.info__grid--block {
  margin-top: 4px;
}

/* ------------------------------------------------------------ story: classroom question */

.story__prompt {
  margin: 10px 0 0;
  padding: 9px 12px;
  border: 1px solid rgba(255, 214, 120, 0.28);
  border-radius: 10px;
  background: rgba(255, 214, 120, 0.05);
}

.story__prompt-title {
  margin: 0 0 3px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffd678;
}

.story__prompt-q {
  margin: 0 0 8px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text);
}

.story__prompt-idea {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-dim);
}

/* While a historical / deep-time badge is shown the time panel grows by a line or two (longer
   in Korean and with the "before closest approach" note): the story panel stays clear of it. */
body.is-historical .story {
  bottom: calc(var(--gutter) + 168px);
}

/* …and its diagram gives up the height it loses, so the caption stays in view. */
body.is-historical .story__visual svg {
  max-height: max(140px, calc(100vh - 560px));
}

/* ------------------------------------------------------------ Alison: larger, fewer controls */

body.edu-alison .toolbar .segmented__option,
body.edu-alison .toolbar .toggle {
  min-height: 36px;
  padding: 7px 13px;
  font-size: 12px;
}

body.edu-alison .targets {
  top: 104px;
  width: 196px;
}

body.edu-alison .target {
  min-height: 40px;
  padding: 9px 10px;
  font-size: 15px;
}

body.edu-alison .target-list--small .target {
  font-size: 14px;
}

body.edu-alison .targets .chip,
body.edu-alison .info__actions .chip,
body.edu-alison .time-button,
body.edu-alison .speed-button {
  min-height: 40px;
  font-size: 12px;
}

body.edu-alison .info {
  top: 104px;
}

/* Desktop: the information panel ends above the scale-journey list (seven stops, bottom right). */
@media (min-width: 1101px) {
  .info {
    max-height: calc(100% - 92px - 196px);
  }

  body.edu-alison .info {
    max-height: calc(100% - 104px - 196px);
  }
}

body.edu-alison .info__name {
  font-size: 26px;
}

body.edu-alison .info__class {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: none;
}

body.edu-alison .info__grid {
  grid-template-columns: 1fr;
  gap: 2px;
}

body.edu-alison .info__grid dt {
  margin-top: 8px;
  font-size: 12px;
}

body.edu-alison .info__grid dd {
  font-size: 15px;
  line-height: 1.4;
  text-align: left;
}

body.edu-alison .story__caption {
  font-size: 18px;
  line-height: 1.45;
}

/* Classroom: one idea per row — the label above, the answer below, read left to right. */
body.edu-classroom #info-grid {
  grid-template-columns: 1fr;
  gap: 1px;
}

body.edu-classroom #info-grid dt {
  margin-top: 7px;
}

body.edu-classroom #info-grid dd {
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
}

body.edu-classroom .story__caption {
  font-size: 15.5px;
}

/* ------------------------------------------------------------ Korean typography */

body.lang-ko {
  font-family: "Inter", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Segoe UI", system-ui, sans-serif;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* Hangul has no case: wide tracking that suits small Latin capitals only spaces it out. */
body.lang-ko *:not(.brand__title) {
  letter-spacing: 0.02em;
}

body.lang-ko .brand__title {
  letter-spacing: 0.2em;
}

/* Monospaced fonts have no Hangul: their fallback draws it spaced out. Readouts that carry
   words use the text face in Korean (digits keep tabular figures). */
body.lang-ko .time__multiplier,
body.lang-ko .scale__label,
body.lang-ko .help-grid dt,
body.lang-ko .field__value,
body.lang-ko .sandbox__event-title,
body.lang-ko .origin-caption__clock,
body.lang-ko .pbd__inset-tag {
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", var(--font-sans);
  font-variant-numeric: tabular-nums;
}

body.lang-ko .brand__subtitle,
body.lang-ko .panel__title,
body.lang-ko .info__class,
body.lang-ko .segmented__option,
body.lang-ko .toggle,
body.lang-ko .chip,
body.lang-ko .camera-status,
body.lang-ko .journey__title,
body.lang-ko .layers-menu__title,
body.lang-ko .cinematic-banner__label,
body.lang-ko .story__kicker,
body.lang-ko .info__block-title,
body.lang-ko .challenge-card__kicker,
body.lang-ko .story__prompt-title {
  letter-spacing: 0.04em;
}

body.lang-ko .chip {
  white-space: normal;
}

body.lang-ko .info__grid dt {
  word-break: keep-all;
}

/* Korean labels are long: they wrap within their column instead of squeezing the values. */
body.lang-ko.edu-science .info__grid {
  grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
}

/* ------------------------------------------------------------ reduced motion */

body.is-reduced-motion .is-hinted,
body.is-reduced-motion .chip--story.is-suggested,
body.is-reduced-motion .pbd__caption.is-in,
body.is-reduced-motion .story__caption,
body.is-reduced-motion .origin-caption {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .is-hinted {
    animation: none;
  }
}

/* ------------------------------------------------------------ tablets (portrait, landscape, near-square) */

@media (min-width: 761px) and (max-width: 1100px) {
  /* The level / language choice folds into one small menu under the title. */
  .presentation__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 5px 12px;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    background: var(--panel-bg-strong);
    font-size: 11px;
    color: var(--text);
  }

  .presentation__toggle::after {
    content: "";
    border: 3.5px solid transparent;
    border-top-color: currentColor;
    margin-top: 3px;
  }

  .presentation__menu {
    display: none;
    position: absolute;
    top: 38px;
    left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 300px;
    padding: 10px;
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    background: var(--panel-bg-strong);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  }

  .presentation.is-open .presentation__menu {
    display: flex;
  }

  .presentation__menu .segmented__option {
    flex: 1;
    justify-content: center;
    min-height: 38px;
    white-space: nowrap;
  }

  /* The toolbar wraps into two rows here: the side panels and the story start below it. */
  .targets,
  .info,
  body.edu-alison .targets,
  body.edu-alison .info,
  #story-overlay {
    top: 104px;
  }

  .targets,
  .info {
    max-height: calc(100% - 104px - 214px);
  }

  /* The scale journey becomes a strip above the time panel, right of the scale bar. */
  .journey {
    bottom: calc(var(--gutter) + 112px);
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 2px 4px;
    max-width: calc(100% - 2 * var(--gutter) - 200px);
  }

  .journey__title {
    margin: 0 4px 0 0;
  }

  body.is-historical .journey {
    bottom: calc(var(--gutter) + 168px);
  }

  body.is-historical .scale {
    bottom: calc(var(--gutter) + 176px);
  }

  /* A challenge card takes the information panel's place while it is active. */
  .challenge-card {
    top: 104px;
    left: auto;
    right: var(--gutter);
    transform: none;
    width: 300px;
    min-width: 0;
  }

  body.has-challenge .info {
    display: none;
  }

  .challenge-menu {
    top: 88px; /* below the two toolbar rows (the menu is positioned inside the toolbar) */
    right: 0;
  }

  /* The scale bar keeps a fixed column so the journey strip never runs into it. */
  .scale {
    max-width: 200px;
  }

  .journey {
    max-width: calc(100% - 2 * var(--gutter) - 230px);
  }

  /* A story fills the left column down to the time panel: the strip and the bar step aside. */
  body.has-story .journey,
  body.has-story .scale {
    display: none;
  }

  /* Cinematic banners start below the toolbar rows. */
  .pbd .pbd__banner {
    top: 104px;
  }

  /* Alison's larger toolbar buttons need a little more room above the panels. */
  body.edu-alison .targets,
  body.edu-alison .info,
  body.edu-alison .challenge-card,
  body.edu-alison #story-overlay,
  body.edu-alison .pbd .pbd__banner {
    top: 128px;
  }

  body.edu-alison .targets,
  body.edu-alison .info {
    max-height: calc(100% - 128px - 214px);
  }
}

/* ------------------------------------------------------------ phones */

@media (max-width: 760px) {
  .presentation {
    top: 8px;
    right: var(--gutter);
    left: auto;
  }

  .presentation__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 5px 12px;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    background: var(--panel-bg-strong);
    font-size: 11px;
    color: var(--text);
  }

  .presentation__toggle::after {
    content: "";
    border: 3.5px solid transparent;
    border-top-color: currentColor;
    margin-top: 3px;
  }

  .presentation__menu {
    display: none;
    position: absolute;
    top: 38px;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    background: var(--panel-bg-strong);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  }

  .presentation.is-open .presentation__menu {
    display: flex;
  }

  .presentation__menu {
    width: min(300px, calc(100vw - 2 * var(--gutter)));
  }

  .presentation__menu .segmented {
    justify-content: space-between;
  }

  .presentation__menu .segmented__option {
    flex: 1;
    justify-content: center;
    min-height: 40px;
    white-space: nowrap;
  }

  .challenge-menu {
    top: 44px;
    right: 0;
  }

  .challenge-card {
    top: auto;
    bottom: 176px;
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
    min-width: 0;
    transform: none;
  }

  body.has-challenge .info {
    display: none;
  }

  /* A story owns the clock while it is open: on phones the speed row and the badge's long note
     fold away so the time panel stays short and the story keeps its room. */
  body.has-story .time__speeds,
  body.has-story .time__historical-note {
    display: none;
  }

  body.is-historical .story {
    bottom: 176px;
  }

  /* The target list always ends above the information sheet (bottom 176 px, at most 32vh). */
  .targets {
    max-height: calc(100vh - 118px - 176px - 32vh - 8px);
  }

  /* Alison: the larger presentation button sits above a taller toolbar. */
  body.edu-alison .toolbar {
    top: 58px;
  }

  body.edu-alison .targets {
    top: 176px;
    max-height: calc(100vh - 176px - 176px - 32vh - 8px);
  }

  body.edu-alison #story-overlay,
  body.edu-alison #origin-caption,
  body.edu-alison .pbd .pbd__banner {
    top: 176px;
  }

  body.edu-alison .pbd__inset {
    top: 230px;
  }

  body.edu-alison .target {
    min-height: 44px;
  }

  body.edu-alison .presentation__toggle,
  body.edu-alison .toolbar .toggle,
  body.edu-alison .toolbar .segmented__option {
    min-height: 44px;
  }

  body.edu-alison .info {
    top: auto;
  }
}

/* ============================================================ Task 8: Mission Explorer & Mission Replay */

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.toggle--missions.is-active,
.toggle--missions[aria-expanded="true"] {
  color: var(--accent-strong);
  background: var(--accent-soft);
}

/* ---------------- Mission Explorer (the info panel's slot) */

.mission-explorer {
  z-index: 13;
  top: 92px;
  right: var(--gutter);
  width: 360px;
  max-height: calc(100% - 92px - 190px);
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--panel-bg-strong);
}

body.has-mission-explorer .info {
  visibility: hidden;
}

.mission-explorer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--panel-border);
}

.mission-explorer__title {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text);
}

.mission-explorer__body {
  overflow-y: auto;
  padding: 12px 16px 16px;
  scrollbar-width: thin;
}

.mission-explorer__intro,
.mission-explorer__note,
.mission-detail__summary,
.mission-detail__alison,
.mission-detail__where {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-dim);
}

.mission-detail__alison {
  font-size: 15px;
  color: var(--text);
}

.mission-detail__where:empty {
  display: none;
}

.mission-feature {
  display: grid;
  gap: 2px;
  width: 100%;
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 210, 122, 0.35);
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(255, 210, 122, 0.12), rgba(159, 220, 255, 0.12));
  text-align: left;
  color: var(--text);
}

.mission-feature__title {
  font-size: 13px;
  font-weight: 600;
}

.mission-feature__sub {
  font-size: 11px;
  color: var(--text-dim);
}

.mission-group {
  margin-bottom: 14px;
}

.mission-group__title,
.mission-section__title {
  margin: 0 0 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.mission-cards {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mission-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1px 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px 8px 12px;
  border: 1px solid var(--panel-border);
  border-left: 3px solid var(--mission-color, var(--accent));
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  text-align: left;
  color: var(--text);
}

.mission-card:hover,
.mission-card:focus-visible {
  border-color: rgba(150, 185, 230, 0.35);
  background: rgba(255, 255, 255, 0.05);
}

.mission-card__name {
  font-size: 13px;
  font-weight: 600;
}

.mission-card__meta {
  grid-column: 2;
  grid-row: 1;
  font-size: 10px;
  color: var(--text-faint);
  white-space: nowrap;
}

.mission-card__dest {
  font-size: 11px;
  color: var(--text-dim);
}

.mission-card__status {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
}

.mission-status {
  display: inline-block;
  margin: 0;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  border: 1px solid rgba(150, 185, 230, 0.25);
  color: var(--text-dim);
}

.mission-status--active,
.mission-status--observatory {
  border-color: rgba(127, 217, 164, 0.5);
  color: var(--ok);
}

.mission-status--enRoute {
  border-color: rgba(143, 195, 255, 0.5);
  color: var(--accent-strong);
}

.mission-status--ended {
  color: var(--text-faint);
}

.mission-status--interstellar {
  border-color: rgba(255, 210, 122, 0.45);
  color: #ffd27a;
}

.mission-detail__back {
  margin-bottom: 10px;
}

.mission-detail__head {
  margin-bottom: 8px;
  padding-left: 10px;
  border-left: 3px solid var(--mission-color, var(--accent));
}

.mission-detail__kicker {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.mission-detail__name {
  margin: 2px 0 6px;
  font-size: 18px;
  font-weight: 500;
  color: var(--text);
}

.mission-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.mission-action {
  min-height: 34px;
}

.chip--primary {
  color: var(--accent-strong);
  border-color: rgba(143, 195, 255, 0.45);
  background: var(--accent-soft);
}

.mission-events,
.mission-sources,
.mission-links,
.mission-gateway {
  margin-top: 14px;
}

.mission-events__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
}

.mission-event {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: baseline;
  gap: 6px;
  font-size: 11.5px;
}

.mission-event::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text);
  transform: translateY(1px);
}

.mission-event--planned::before {
  background: transparent;
  border: 1.5px dashed var(--text-dim);
}

.mission-event--unconfirmed::before {
  background: transparent;
  border: 1.5px dashed var(--warn);
}

.mission-event__name {
  padding: 2px 0;
  border: 0;
  background: transparent;
  text-align: left;
  color: var(--text);
  font-size: 11.5px;
}

.mission-event__name:hover {
  color: var(--accent-strong);
  text-decoration: underline;
}

.mission-event__date {
  font-size: 10.5px;
  color: var(--text-dim);
  white-space: nowrap;
}

.mission-event__status {
  grid-column: 2 / 4;
  margin-top: -2px;
  font-size: 9.5px;
  color: var(--text-faint);
}

.mission-event--planned .mission-event__status,
.mission-event--unconfirmed .mission-event__status {
  color: var(--warn);
}

.mission-sources__grid {
  font-size: 11px;
}

.mission-links__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}

.mission-links__note {
  margin: 8px 0 0;
  font-size: 10.5px;
  color: var(--text-faint);
}

.ext-link {
  color: var(--accent-strong);
  font-size: 12px;
  text-decoration: none;
  border-bottom: 1px solid rgba(143, 195, 255, 0.3);
}

.ext-link:hover,
.ext-link:focus-visible {
  border-bottom-color: var(--accent-strong);
}

.ext-link__arrow {
  font-size: 0.9em;
}

.mission-gateway__links {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}

.ext-link--big {
  display: block;
  padding: 10px 12px;
  border: 1px solid rgba(255, 215, 110, 0.45);
  border-radius: 10px;
  background: rgba(255, 215, 110, 0.08);
  font-size: 13px;
  font-weight: 600;
  color: #ffd76e;
}

.featured-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.featured-card {
  display: grid;
  gap: 2px;
  height: 100%;
  padding: 8px 10px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}

.featured-card:hover,
.featured-card:focus-visible {
  border-color: rgba(255, 215, 110, 0.45);
}

.featured-card__caption {
  font-size: 10.5px;
  font-weight: 400;
  color: var(--text-dim);
}

.featured-card__credit {
  font-size: 9px;
  font-weight: 400;
  color: var(--text-faint);
}

.mission-prompt {
  margin-top: 6px;
}

/* ---------------- Replay HUD (the target list's slot) */

body.has-mission-replay .targets {
  display: none;
}

.mission-hud {
  z-index: 12;
  top: 92px;
  left: var(--gutter);
  width: 340px;
  max-height: calc(100% - 92px - 210px);
  overflow-y: auto;
  padding: 12px 14px;
  background: var(--panel-bg-strong);
  scrollbar-width: thin;
}

body.has-story.has-mission-replay .mission-hud {
  left: auto;
  right: var(--gutter);
  width: 300px;
}

body.has-story.has-mission-replay .info {
  visibility: hidden;
}

.mission-hud__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.mission-hud__kicker {
  margin: 0;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--warn);
}

.mission-hud__name {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
}

.mission-hud__now {
  margin: 6px 0 2px;
  font-size: 12px;
  color: var(--accent-strong);
}

.mission-hud__caption {
  margin: 4px 0 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
}

.mission-hud__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.mission-hud__camera {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.mission-hud__select {
  flex: 1;
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: rgba(9, 13, 21, 0.9);
  color: var(--text);
  font-size: 12px;
}

.mission-hud__select.is-user {
  border-style: dashed;
}

.mission-hud__toggle[aria-pressed="true"] {
  color: var(--accent-strong);
  border-color: rgba(143, 195, 255, 0.45);
  background: var(--accent-soft);
}

.mission-hud__focus {
  margin-top: 8px;
}

.mission-race {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  margin: 8px 0 0;
  font-size: 11.5px;
}

.mission-race dt {
  color: var(--text-dim);
}

.mission-race dd {
  margin: 0;
  color: var(--text);
}

.mission-race__verdict {
  grid-column: 1 / -1;
  margin-top: 4px !important;
  color: #ffd27a !important;
}

.mission-assist {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--panel-border);
}

.mission-assist__title {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: #7fe3d0;
}

.mission-assist__text,
.mission-assist__note {
  margin: 0 0 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
}

.mission-assist__note {
  font-size: 10.5px;
  color: var(--text-dim);
}

.mission-assist__grid {
  font-size: 11px;
}

/* ---------------- Mission track (inside the time panel) */

.mission-track {
  margin: -2px 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--panel-border);
}

.mission-track__bar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mission-track__rail {
  position: relative;
  flex: 1;
  height: 28px;
  min-width: 120px;
}

.mission-track__rail::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 13px;
  height: 2px;
  border-radius: 2px;
  background: rgba(150, 185, 230, 0.2);
}

.mission-track__flown {
  position: absolute;
  left: 0;
  top: 13px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  pointer-events: none;
}

.mission-track__scrub {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.mission-track__scrub:focus-visible {
  opacity: 0.35;
}

.mission-track__markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mission-marker {
  position: absolute;
  top: 8px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  padding: 0;
  border: 2px solid var(--mission-color, var(--text));
  border-radius: 50%;
  background: rgba(9, 13, 21, 0.95);
  pointer-events: auto;
}

.mission-marker.is-passed {
  background: var(--mission-color, var(--text));
}

.mission-marker--planned,
.mission-marker--unconfirmed {
  border-style: dashed;
  background: transparent !important;
}

.mission-marker--unconfirmed {
  border-color: var(--warn);
}

.mission-marker--launch {
  border-radius: 2px;
}

.mission-marker:hover,
.mission-marker:focus-visible {
  transform: scale(1.35);
}

.mission-track__readout {
  margin: 4px 0 0;
  font-size: 10.5px;
  color: var(--text-dim);
  text-align: right;
}

body.has-mission-replay .journey {
  display: none;
}

@media (max-width: 1100px) {
  .mission-explorer {
    width: 330px;
  }

  .mission-hud {
    width: 300px;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .mission-explorer,
  .mission-hud {
    top: 104px;
    max-height: calc(100% - 104px - 200px);
  }

  body.edu-alison .mission-explorer,
  body.edu-alison .mission-hud {
    top: 128px;
    max-height: calc(100% - 128px - 200px);
  }
}

@media (max-width: 760px) {
  .mission-explorer {
    top: 118px;
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
    max-height: calc(100% - 118px - 186px);
  }

  body.has-mission-explorer .targets,
  body.has-mission-explorer .info,
  body.has-mission-replay .info {
    display: none;
  }

  .mission-hud,
  body.has-story.has-mission-replay .mission-hud {
    top: 118px;
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
    max-height: calc(100% - 118px - 236px);
  }

  body.has-story.has-mission-replay .mission-hud {
    display: none;
  }

  body.edu-alison .mission-explorer,
  body.edu-alison .mission-hud {
    top: 176px;
    max-height: calc(100% - 176px - 236px);
  }

  .featured-cards {
    grid-template-columns: 1fr;
  }

  /* The replay owns the speed: the speed row folds away; the mission track stays. */
  body.has-mission-replay .time__speeds,
  body.has-mission-replay .time__historical-note {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mission-marker:hover,
  .mission-marker:focus-visible {
    transform: none;
  }
}

body.lang-ko .mission-track__readout,
body.lang-ko .mission-event__date {
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", var(--font-sans);
}

/* The mission track makes the time panel taller (228 px from the bottom edge, 242 px with Alison's
   larger controls): on desktops the side panels end above it instead of under its corners. */
@media (min-width: 1101px) {
  .mission-hud,
  body.has-mission-replay .info {
    max-height: calc(100% - 92px - 236px);
  }

  body.edu-alison .mission-hud {
    max-height: calc(100% - 92px - 250px);
  }

  body.edu-alison.has-mission-replay .info {
    max-height: calc(100% - 104px - 250px);
  }
}

/* …and on tablets, below the toolbar's real bottom edge. */
@media (min-width: 761px) and (max-width: 1100px) {
  body.has-mission-replay .info,
  body.has-mission-replay .mission-hud {
    max-height: calc(100% - max(104px, var(--toolbar-bottom, 104px)) - 236px);
  }

  body.edu-alison.has-mission-replay .info,
  body.edu-alison.has-mission-replay .mission-hud {
    max-height: calc(100% - max(128px, var(--toolbar-bottom, 128px)) - 250px);
  }
}

/* The mission track makes the time panel taller: the scale bar moves up with it on tablets. */
@media (min-width: 761px) and (max-width: 1060px) {
  body.has-mission-replay .scale {
    bottom: calc(var(--gutter) + 216px);
  }

  body.edu-alison.has-mission-replay .scale {
    bottom: calc(var(--gutter) + 230px);
  }
}

@media (max-width: 760px) {
  body.has-mission-replay .scale {
    display: none;
  }
}

/* Assist card: values never wrap; long labels do. */
.mission-assist__grid {
  grid-template-columns: minmax(0, 1fr) max-content;
  column-gap: 10px;
}

.mission-assist__grid dd {
  white-space: nowrap;
  text-align: right;
}

/* Tablets: panels start below the toolbar's real bottom edge (it may wrap to three rows). */
@media (min-width: 761px) and (max-width: 1100px) {
  .targets,
  .info,
  .mission-explorer,
  .mission-hud {
    top: max(104px, var(--toolbar-bottom, 104px));
    max-height: calc(100% - max(104px, var(--toolbar-bottom, 104px)) - 200px);
  }

  body.edu-alison .targets,
  body.edu-alison .info,
  body.edu-alison .mission-explorer,
  body.edu-alison .mission-hud {
    top: max(128px, var(--toolbar-bottom, 128px));
    max-height: calc(100% - max(128px, var(--toolbar-bottom, 128px)) - 200px);
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  #story-overlay,
  .challenge-card,
  .pbd .pbd__banner {
    top: max(104px, var(--toolbar-bottom, 104px));
  }

  body.edu-alison .challenge-card,
  body.edu-alison #story-overlay,
  body.edu-alison .pbd .pbd__banner {
    top: max(128px, var(--toolbar-bottom, 128px));
  }
}

/* Phones: the toolbar can wrap to a third row too (the Missions button with English labels), so the
   panels hanging below it start at its real bottom edge; and during a replay the mission track makes
   the time panel taller (up to 219 px from the bottom edge), so the sheets above it end higher. */
@media (max-width: 760px) {
  .targets,
  #story-overlay,
  #origin-caption,
  .pbd .pbd__banner,
  .mission-explorer,
  .mission-hud,
  body.has-story.has-mission-replay .mission-hud {
    top: max(118px, var(--toolbar-bottom, 118px));
  }

  .targets {
    max-height: calc(100vh - max(118px, var(--toolbar-bottom, 118px)) - 176px - 32vh - 8px);
  }

  .mission-explorer {
    max-height: calc(100% - max(118px, var(--toolbar-bottom, 118px)) - 186px);
  }

  .mission-hud {
    max-height: calc(100% - max(118px, var(--toolbar-bottom, 118px)) - 236px);
  }

  body.edu-alison .targets,
  body.edu-alison #story-overlay,
  body.edu-alison #origin-caption,
  body.edu-alison .pbd .pbd__banner,
  body.edu-alison .mission-explorer,
  body.edu-alison .mission-hud {
    top: max(176px, var(--toolbar-bottom, 176px));
  }

  body.edu-alison .targets {
    max-height: calc(100vh - max(176px, var(--toolbar-bottom, 176px)) - 176px - 32vh - 8px);
  }

  body.edu-alison .mission-explorer,
  body.edu-alison .mission-hud {
    max-height: calc(100% - max(176px, var(--toolbar-bottom, 176px)) - 236px);
  }

  body.has-mission-replay .story,
  body.has-mission-replay .challenge-card {
    bottom: 228px;
  }
}

/* A story told over a mission replay ends above the replay's taller time panel too; on narrow tablets
   it also leaves room for the replay HUD beside it. */
@media (min-width: 761px) {
  body.has-mission-replay .story {
    bottom: calc(var(--gutter) + 216px);
  }

  body.edu-alison.has-mission-replay .story {
    bottom: calc(var(--gutter) + 230px);
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  body.has-mission-replay .story {
    width: min(500px, calc(100% - 300px - 3 * var(--gutter)));
  }
}

/* …and its diagram gives up the extra height, so the caption stays in view on short displays. */
body.has-mission-replay .story__visual svg {
  max-height: max(120px, calc(100vh - 608px));
}

/* Short phones: a challenge card above the replay's time panel leaves the replay HUD only the space
   above the card; the HUD scrolls there (its Exit button stays in view). */
@media (max-width: 760px) and (max-height: 760px) {
  body.has-challenge.has-mission-replay .mission-hud {
    max-height: calc(100% - max(118px, var(--toolbar-bottom, 118px)) - 228px - 170px);
  }

  body.edu-alison.has-challenge.has-mission-replay .mission-hud {
    max-height: calc(100% - max(176px, var(--toolbar-bottom, 176px)) - 228px - 170px);
  }
}


/* ======================================================================
   Task 12 — v1.0 hardening: touch targets, focus visibility, landscape phones
   ====================================================================== */

/* Every focusable control shows a visible focus ring for keyboard users (the specific rings above
   keep their colours; this covers the controls that had only the browser default). */
.time-button:focus-visible,
.icon-button:focus-visible,
.scenario-button:focus-visible,
.encounter-select__option:focus-visible,
.launch-button:focus-visible,
.field__select:focus-visible,
.layer-option input:focus-visible,
.check input:focus-visible,
input[type='range']:focus-visible,
.welcome__choice:focus-visible,
.welcome button:focus-visible,
details > summary:focus-visible,
.body-label:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}

/* Touch screens: comfortable targets (about 44 CSS px). Only the hit height grows; colours,
   type and spacing stay as designed, so the observatory look is unchanged. */
@media (pointer: coarse) {
  .segmented__option,
  .toggle,
  .chip,
  .time-button,
  .speed-button,
  .icon-button,
  .target,
  .journey__stop,
  .encounter-select__option,
  .presentation__toggle,
  .challenge-item,
  .mission-card,
  .layer-option {
    min-height: 44px;
  }

  .toggle--icon,
  .icon-button {
    min-width: 44px;
  }

  .layer-option input,
  .check input {
    width: 22px;
    height: 22px;
  }
}

/* Landscape phones (short and wide): the desktop layout would cover the scene, so panels get a
   height budget and scroll inside themselves; nothing is placed off screen. */
@media (min-width: 561px) and (max-height: 500px) {
  .brand__subtitle,
  .journey,
  .toolbar__caption,
  .scale {
    display: none;
  }

  /* Side panels end above the time panel (≈ 110 px with its gap). */
  .hud.panel.targets,
  .hud.panel.info,
  .hud.panel.sandbox,
  .mission-explorer,
  .mission-hud {
    max-height: calc(100dvh - var(--toolbar-bottom, 104px) - 118px);
    overflow-y: auto;
  }

  .time {
    padding-block: 6px;
  }
}


/* Short portrait phones (e.g. 320 × 568): the target row is always reachable (one scrollable row)
   and the information panel takes the space that is left, scrolling inside itself. */
@media (max-width: 760px) and (max-height: 700px) {
  .brand__subtitle {
    display: none;
  }

  .targets,
  body.edu-alison .targets {
    max-height: 64px;
  }

  .info,
  body.edu-alison .info {
    max-height: max(64px, calc(100vh - var(--toolbar-bottom, 118px) - 72px - 176px));
  }
}

/* First-run welcome (Task 12) */
.welcome {
  max-width: 560px;
}

.welcome__lead {
  margin: 4px 0 6px;
  color: var(--text);
  line-height: 1.5;
}

.welcome__question {
  margin: 10px 0 8px;
  color: var(--text-dim);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.welcome__choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.welcome__choice {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 72px;
  padding: 12px 14px;
  border: 1px solid rgba(156, 201, 255, 0.28);
  border-radius: 12px;
  background: rgba(120, 160, 255, 0.07);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.welcome__choice:hover {
  border-color: rgba(156, 201, 255, 0.6);
  background: rgba(120, 160, 255, 0.13);
}

.welcome__choice-title {
  font-size: 15px;
  font-weight: 600;
  color: #e8eefc;
}

.welcome__choice-sub {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.4;
}

.welcome__footer .chip {
  flex: 0 0 auto;
  min-width: 96px;
}

.welcome__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-top: 14px;
}

.presentation__motion {
  margin-top: 8px;
  font-size: 12.5px;
}

#welcome-reopen {
  margin-top: 10px;
}

@media (max-width: 520px) {
  .welcome__choices {
    grid-template-columns: 1fr;
  }

  .welcome__choice {
    min-height: 56px;
  }
}

/* Contrast (Task 12): secondary hints keep their tone but reach 4.5:1. */
.field__hint {
  opacity: 1;
}

.chip__sub {
  color: var(--text-dim);
}

/* Reduced motion chosen in the app (Task 12) does everything the device setting does. */
body.is-reduced-motion .dg *,
body.is-reduced-motion .annotation__ring,
body.is-reduced-motion .story__visual,
body.is-reduced-motion .pbd__fade,
body.is-reduced-motion .pbd__inset {
  animation: none !important;
}

body.is-reduced-motion .pbd__fade,
body.is-reduced-motion .pbd__inset,
body.is-reduced-motion .pbd__caption.is-in {
  transition: none !important;
}

body.is-reduced-motion .mission-marker:hover,
body.is-reduced-motion .mission-marker:focus-visible {
  transform: none;
}

/* WCAG 2.2 target size (AA): every control is at least 24 × 24 px on any pointer. */
.segmented__option,
.journey__stop,
.speed-button,
.toggle,
.chip,
.target {
  min-height: 24px;
}

.speed-button:focus-visible,
.mission-feature:focus-visible,
.mission-hud button:focus-visible,
.story button:focus-visible,
.info__actions button:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}

.check,
.layer-option {
  min-height: 24px;
}

.presentation__motion {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Short screens: the welcome fits without scrolling (the four doors keep their titles). */
@media (max-height: 640px) {
  .welcome__choice-sub {
    display: none;
  }

  .welcome__choice {
    min-height: 48px;
    justify-content: center;
  }

  .welcome__lead {
    font-size: 13px;
  }
}

/* Menus never run off a short screen: they scroll inside themselves (Task 12). */
.challenge-menu,
.layers-menu {
  max-height: min(70vh, calc(100dvh - 120px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

input[type='checkbox'] {
  accent-color: #8fb4e6;
}

/* Cinematic banners never extend past the screen: they wrap, so Exit / Skip stay reachable. */
.cinematic-banner {
  max-width: calc(100vw - 24px);
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 6px;
}

@media (max-width: 1100px) {
  .cinematic-banner {
    border-radius: 16px;
  }
}

/* ======================================================================
   Task 13B — layout by available space (T13-UX-001, T13-UX-002)
   ====================================================================== */

/* Short screens — landscape phones, and desktop windows at 200 % zoom (1280 × 720 becomes 640 × 360
   CSS px). Priorities: the toolbar row(s) on top, the time bar at the bottom, and between them the
   target list as a left column and the information panel as a right column, each scrolling inside
   itself. Edges come from the measured toolbar bottom (--toolbar-bottom) and time-bar top
   (--time-space, published by UIController); nothing is placed by device name. */
@media (max-height: 500px) {
  :root {
    --gutter: 10px;
  }

  .brand {
    top: 6px;
    left: var(--gutter);
  }

  .brand__title {
    font-size: 10px;
    letter-spacing: 0.28em;
  }

  .brand__subtitle,
  .journey,
  .toolbar__caption,
  .scale,
  .targets .panel__title,
  .camera-status {
    display: none;
  }

  /* The toolbar leaves the top-right corner to the level / language menu. */
  .toolbar {
    top: 24px;
    left: var(--gutter);
    right: calc(var(--gutter) + 124px);
    max-width: none;
    justify-content: flex-start;
    gap: 4px 6px;
  }

  /* Alison's larger level button needs a little more of the corner (the toolbar stays on top). */
  body.edu-alison .toolbar {
    top: 24px;
    right: calc(var(--gutter) + 150px);
  }

  /* Level / language: one small menu in the top-right corner at every width. */
  .presentation {
    top: 4px;
    right: var(--gutter);
    left: auto;
  }

  .presentation__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 5px 12px;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    background: var(--panel-bg-strong);
    font-size: 11px;
    color: var(--text);
  }

  .presentation__toggle::after {
    content: "";
    border: 3.5px solid transparent;
    border-top-color: currentColor;
    margin-top: 3px;
  }

  .presentation__menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: min(300px, calc(100vw - 2 * var(--gutter)));
    max-height: calc(100dvh - 70px);
    overflow-y: auto;
    padding: 10px;
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    background: var(--panel-bg-strong);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  }

  .presentation.is-open .presentation__menu {
    display: flex;
  }

  body .hud.panel.targets,
  body.edu-alison .hud.panel.targets {
    top: var(--toolbar-bottom, 104px);
    bottom: var(--time-space, 92px);
    left: var(--gutter);
    right: auto;
    width: clamp(132px, 24vw, 196px);
    max-height: none;
    overflow-y: auto;
    padding: 6px;
  }

  body .targets .target-list {
    display: block;
    overflow-x: visible;
  }

  body .targets .target {
    width: 100%;
    white-space: nowrap;
  }

  body .hud.panel.info,
  body.edu-alison .hud.panel.info {
    top: var(--toolbar-bottom, 104px);
    bottom: auto;
    left: auto;
    right: var(--gutter);
    width: clamp(220px, 42vw, 340px);
    max-height: calc(100dvh - var(--toolbar-bottom, 104px) - var(--time-space, 92px));
    overflow-y: auto;
    padding: 10px 12px;
  }

  /* The header (name + collapse control) never scrolls out of its own panel. */
  .info__header {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: -10px -12px 0;
    padding: 10px 12px 6px;
    background: var(--panel-bg-strong);
    border-radius: var(--panel-radius) var(--panel-radius) 0 0;
  }

  .info__name {
    font-size: 16px;
  }

  /* The time bar: one compact block; the speed choices scroll sideways inside it. */
  body .hud.panel.time {
    left: var(--gutter);
    right: var(--gutter);
    bottom: 6px;
    width: auto;
    transform: none;
    padding: 5px 10px 6px;
  }

  .time__date {
    font-size: 15px;
  }

  .time__clock {
    font-size: 12px;
  }

  .time__jd,
  .time__rate {
    display: none;
  }

  .time__controls {
    flex-wrap: nowrap;
    gap: 6px;
    margin-top: 4px;
  }

  .time__speeds {
    order: 0;
    flex: 1 1 0;
    min-width: 0;
  }

  .time__jumps {
    flex: none;
  }

  /* Sheets that would sit on the time bar use the same measured edge. */
  body .sandbox,
  body .impact-card {
    bottom: var(--time-space, 92px);
    max-height: calc(100dvh - var(--toolbar-bottom, 104px) - var(--time-space, 92px));
  }
}

/* Narrow (portrait) phones: the information panel sits above the measured time bar, and the
   default view keeps it collapsed (InfoPanel) so the 3D scene stays visible. */
@media (max-width: 760px) and (min-height: 501px) {
  body .hud.panel.info,
  body.edu-alison .hud.panel.info {
    bottom: var(--time-space, 176px);
    max-height: min(32vh, calc(100dvh - var(--toolbar-bottom, 118px) - 72px - var(--time-space, 176px)));
  }

  /* The target list ends above the highest reach of that sheet (32vh above the measured time bar). */
  body .hud.panel.targets,
  body.edu-alison .hud.panel.targets {
    max-height: calc(100dvh - var(--toolbar-bottom, 118px) - var(--time-space, 176px) - 32vh - 8px);
  }

  .info__header {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: -12px -14px 0;
    padding: 12px 14px 6px;
    background: var(--panel-bg-strong);
    border-radius: var(--panel-radius) var(--panel-radius) 0 0;
  }

  /* A button group wider than the screen (Alison's larger buttons at 320 px) wraps instead of
     pushing its last button off screen. */
  .toolbar .toggle-group {
    flex-wrap: wrap;
    max-width: 100%;
    border-radius: 18px;
  }

  body .sandbox,
  body .impact-card,
  body .cinematic-banner,
  body .origin-banner {
    bottom: var(--time-space, 176px);
  }
}

/* Short portrait phones (e.g. 320 × 568): the time bar keeps one row of controls (the speed choices
   scroll sideways inside it) and the panel title is smaller, so an opened information sheet still
   has room for its text and buttons. */
@media (max-width: 760px) and (min-height: 501px) and (max-height: 700px) {
  /* One scrollable target row; the opened sheet takes all the height between it and the time bar. */
  body .hud.panel.targets,
  body.edu-alison .hud.panel.targets {
    max-height: 64px;
  }

  body .hud.panel.info,
  body.edu-alison .hud.panel.info {
    max-height: max(64px, calc(100dvh - var(--toolbar-bottom, 118px) - 72px - var(--time-space, 176px)));
  }

  body .time__controls {
    flex-wrap: nowrap;
  }

  body .time__speeds {
    order: 0;
    flex: 1 1 0;
    min-width: 0;
  }

  body .time__jumps {
    flex: none;
  }

  body.edu-alison .info__name {
    font-size: 18px;
  }
}

/* Task 14 (iPhone Safari): the eight time-speed buttons (min-width 46 px) overflowed the strip on
   phones and fell back to a sideways scroll iOS does not show; on short portrait viewports — most
   iPhones in Safari once the toolbars are subtracted — they were squeezed into the controls row.
   On portrait phones 360–760 px wide the speeds get their own row of 40 px touch targets:
   a 4 × 2 grid of separate buttons when the viewport is at least 620 px tall, and one compact row
   of eight below that, where a second row would leave less than 25 % of the 3D scene visible
   (T13B-38 / UX-002). Not affected: desktop and tablet (> 760 px), landscape phones (≤ 500 px tall,
   where the speeds already fit) and 320 px phones, which keep the v1.0 one-row bar. */
@media (min-width: 360px) and (max-width: 760px) and (min-height: 501px) {
  body .time__controls {
    flex-wrap: wrap;
  }

  body .time__speeds {
    order: 3;
    flex: 1 1 100%;
    min-width: 0;
    gap: 4px;
    padding: 3px;
  }

  body .time__speeds .speed-button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 40px;
    padding-inline: 2px;
    white-space: nowrap;
  }
}

@media (min-width: 360px) and (max-width: 760px) and (min-height: 620px) {
  body .time__speeds {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 0;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }

  body .time__speeds .speed-button {
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    font-size: 12px;
  }
}