/* The Explorer (explorer.html, viewer/planets.js): the HUD, credits, labels, landings and the Sun's channels.
   The page layout and the fact sheet are assets.css's, shared with the spacecraft gallery. */
#when, #date { background-color: rgba(21, 23, 26, 0.85); color: var(--text); border: 1px solid var(--line); font: inherit;
  padding: 3px 6px; max-width: 320px; color-scheme: dark; }
#date:disabled, #pnow:disabled { opacity: 0.4; }
#credit .gap { color: var(--text); }
#phud { position: absolute; left: 10px; top: 30px; color: var(--text); pointer-events: none; white-space: pre;
  text-shadow: 0 0 4px #000, 0 0 2px #000; }
#credit { position: absolute; right: 10px; bottom: 8px; max-width: 60%; text-align: right; color: var(--dim);
  font-size: 11px; letter-spacing: 0.03em; pointer-events: none; text-shadow: 0 0 4px #000; }
html[data-lay=tab] #credit, html[data-lay=phone] #credit { font-size: 10px; line-height: 1.35; padding: 2px 6px;
  background: rgba(11, 12, 14, 0.7); }                 /* over the globe on a small view: readable, and it reads as a caption */
/* Ground-sky limits stay readable above the measured path controls. */
#credit:has(.ground-sky-credit) { bottom: var(--pbar, 8px); }
#credit .ground-sky-credit a { color: var(--accent); pointer-events: auto; }
html[data-lay=tab] #phud, html[data-lay=phone] #phud, html[data-lay=tab] .ss-hud, html[data-lay=phone] .ss-hud {
  padding: 2px 6px; margin-left: -6px; line-height: 1.35; background: rgba(11, 12, 14, 0.7); }   /* the HUD the same, where it runs over the globe */
html[data-lay=tab] #phud:empty, html[data-lay=phone] #phud:empty, html[data-lay=tab] .ss-hud:empty, html[data-lay=phone] .ss-hud:empty { display: none; }
#info ul { list-style: none; margin: 0; padding: 0; font-size: 12px; letter-spacing: 0.01em; }
#info li { padding: 2px 0; line-height: 1.3; }
#info li a { color: var(--accent); text-decoration: none; }
#pmaps .role { display: block; color: var(--dim); text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; }
#pmaps .lic { color: var(--dim); }
#psites li { cursor: pointer; color: var(--dim); }
#psites li:hover { color: var(--accent); }
#info .none { color: var(--dim); }
.marker { position: absolute; left: 0; top: 0; pointer-events: none; font-size: 11px; color: var(--accent);
  white-space: nowrap; text-shadow: 0 0 3px #000, 0 0 2px #000; padding-left: 9px; margin-top: -7px; }
.marker::before { content: ''; position: absolute; left: -3px; top: 5px; width: 6px; height: 6px; border: 1px solid currentColor; border-radius: 50%; }
.marker.sub { color: #9cc4ff; }
/* Planned. (2026-10-22): an agency's planned site (goto.css --plan), its dashed ring; a region's traced outline */
.marker.plan { color: var(--plan, #8fd3c6); font-size: 10px; }
.marker.plan::before { border-style: dashed; }
.site-ol { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.site-ol polygon.plan { fill: rgba(143, 211, 198, 0.07); stroke: var(--plan, #8fd3c6); stroke-width: 1.2; stroke-dasharray: 4 3; }

/* Landings (67P): path time marks, the craft, image pins, the timeline and the image panel */
.marker.tick { color: var(--orbit); font-size: 10px; opacity: 0.85; }
.marker.tick::before { display: none; }
.marker.probe { color: var(--text); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; margin-top: -22px; }
.marker.probe::before { display: none; }
.marker.pin { cursor: pointer; color: var(--text); padding-left: 14px; }
.marker.pin::before { left: -6px; top: 3px; width: 11px; height: 8px; border-radius: 2px; background: rgba(21, 23, 26, 0.85);
  border-color: var(--accent); }
.marker.pin:hover { color: var(--accent); }
#psites .desc { display: block; color: var(--dim); font-size: 11px; opacity: 0.8; }
#pimages li { cursor: pointer; color: var(--dim); }
#pimages li:hover { color: var(--accent); }
.timeline { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); width: min(900px, 94%);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px 10px; background: rgba(21, 23, 26, 0.88);
  border: 1px solid var(--line); border-left: 2px solid var(--accent); z-index: 3; }
.timeline select, .timeline button { background-color: var(--panel); color: var(--text); border: 1px solid var(--line); font: inherit;
  padding: 3px 7px; color-scheme: dark; }
.timeline button { cursor: pointer; text-transform: uppercase; letter-spacing: 0.08em; min-width: 62px; }
.timeline button.on { border-color: var(--accent); color: var(--accent); }
.timeline .track { position: relative; flex: 1 1 160px; min-width: 160px; }
.timeline .track input { width: 100%; }
.timeline .marks { position: absolute; left: 4px; right: 4px; top: 14px; height: 8px; }
.timeline .marks i { position: absolute; width: 2px; height: 8px; margin-left: -1px; background: var(--accent); cursor: pointer; }
.timeline .marks i.off { background: var(--dim); }
/* mission audio on the track (planets.js syncAudio): a band where a recording plays at 1x */
.timeline .marks i.aud { height: 4px; top: 2px; margin-left: 0; width: auto; background: rgba(230, 179, 90, 0.35); border-radius: 2px; }
.timeline .marks i.aud:hover { background: rgba(230, 179, 90, 0.7); }
.timeline .adj { color: var(--dim); font-size: 11px; text-decoration: underline dotted; cursor: help; white-space: nowrap; }
.timeline .clock { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; flex: 0 1 300px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.timeline .turn { color: var(--dim); white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.timeline[hidden], .timeline .turn[hidden], .timeline .adj[hidden] { display: none; }
.timeline .turn input { accent-color: var(--accent); }
.imgpanel { position: absolute; top: 38px; left: 10px; width: min(420px, 46%); max-height: calc(100% - 110px); overflow-y: auto;
  padding: 10px 12px; background: rgba(21, 23, 26, 0.95); border: 1px solid var(--line); border-left: 2px solid var(--accent);
  z-index: 4; font-size: 12px; letter-spacing: 0.01em; }
.imgpanel .imgx { position: sticky; top: 0; float: right; z-index: 2; margin: 0 0 -34px; width: 30px; height: 30px; padding: 0;
  font: inherit; font-size: 20px; line-height: 28px; color: var(--text); background: rgba(11, 12, 14, 0.85); border: 1px solid var(--line); cursor: pointer; }
.imgpanel .imgx:hover { color: var(--accent); border-color: var(--accent); }
.imgpanel img { display: block; width: 100%; height: auto; background: #000; }
.imgpanel h3 { margin: 8px 0 2px; font-weight: normal; color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; font-size: 13px; }
.imgpanel .when { color: var(--text); }
.imgpanel p { margin: 6px 0; color: var(--text); line-height: 1.35; }
.imgpanel .credit { color: var(--dim); font-size: 11px; margin-top: 2px; }
.imgpanel .row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.imgpanel .row button { background: var(--panel); color: var(--text); border: 1px solid var(--line); font: inherit; padding: 3px 8px;
  cursor: pointer; text-transform: uppercase; letter-spacing: 0.06em; }
.imgpanel .row button:hover { color: var(--accent); border-color: var(--accent); }
.imgpanel .row a { color: var(--accent); text-decoration: none; }
.marker.pin { font-size: 0; padding: 3px; margin: -12px 0 0 -12px; background: rgba(21, 23, 26, 0.85); border: 1px solid var(--accent);
  border-radius: 4px; color: var(--accent); display: inline-flex; align-items: center; gap: 4px; }   /* a camera; its name on hover */
.marker.pin::before { display: none; }
.marker.pin .ic { width: 16px; height: 16px; margin: 0; stroke-width: 2; }
.marker.pin:hover { font-size: 11px; z-index: 3; color: var(--text); }

/* The body list: groups (tools/bodies.py GROUPS), rows with thumbnails, moons indented */
#planetlist .pfilter { width: 100%; box-sizing: border-box; margin: 2px 0 8px; padding: 5px 8px; background: var(--bg); color: var(--text);
  border: 1px solid var(--line); font: inherit; color-scheme: dark; }
#planetlist .grp { margin-bottom: 4px; }
#list #planetlist .ghead { display: block; width: 100%; text-align: left; border: none; border-bottom: 1px solid var(--line); padding: 8px 2px 5px;
  color: var(--dim); text-transform: uppercase; letter-spacing: 0.15em; font-size: 12px; cursor: pointer; }
#list #planetlist .ghead::before { content: '▾'; display: inline-block; width: 14px; color: var(--accent); }
#list #planetlist .ghead.closed::before { content: '▸'; }
#list #planetlist .ghead small { display: block; text-transform: none; letter-spacing: 0.01em; font-size: 11px; color: var(--dim); opacity: 0.75;
  padding-left: 14px; margin-top: 2px; }
#list #planetlist button.body { display: flex; align-items: center; gap: 10px; padding: 4px 6px; margin: 2px 0; }
#list #planetlist button.body[hidden] { display: none; }
#list #planetlist button.body.moon { padding-left: 22px; }
#list #planetlist button.body.moon .thumb { width: 36px; height: 36px; }
#planetlist .thumb { flex: none; width: 48px; height: 48px; border-radius: 50%; background: #000; object-fit: cover; }
#planetlist span.thumb { background: radial-gradient(circle at 35% 35%, #555, #111 70%); }
#planetlist .nm { flex: 1; min-width: 0; line-height: 1.2; }
#planetlist .nm small { display: block; color: var(--dim); font-size: 11px; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#planetlist .kids { flex: none; font-size: 10px; color: var(--dim); border: 1px solid var(--line); padding: 1px 5px; letter-spacing: 0.04em; }
#planetlist .kids:hover { color: var(--accent); border-color: var(--accent); }
#planetlist .kids.closed { color: var(--accent); }
/* A narrow list (the badges and the moons chip ran over the names, "Uranus", "Ear"): the name keeps the first
   line, its badges and the moons chip move under it, beside the thumbnail; a name too long for the line ends in "..."
   (the catalogue's small moons, one icon each, stay on one line) */
#planetlist { container-type: inline-size; }
@container (max-width: 330px) {
  #list #planetlist button.body:not(.cat) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "t n k" "t b b";
    column-gap: 10px; row-gap: 2px; align-items: center; }
  #planetlist button.body:not(.cat) > .thumb { grid-area: t; }
  #planetlist button.body:not(.cat) > .nm { grid-area: n; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #planetlist button.body:not(.cat) > .badges { grid-area: b; justify-self: start; flex-wrap: wrap; }
  #planetlist button.body:not(.cat) > .badges:empty { display: none; }
  #planetlist button.body:not(.cat) > .kids { grid-area: k; align-self: start; }
}
/* A planet's moons by group (tools/bodies.py MOON_FAMILIES): a heading with its count, closed unless it
   holds a moon with a globe; moons with no globe get a small generic disc (no thumbnails for hundreds) */
#list #planetlist button.fhead { display: flex; align-items: baseline; gap: 6px; width: 100%; text-align: left; border: none;
  padding: 3px 6px 3px 22px; margin: 1px 0; color: var(--dim); font-size: 11px; letter-spacing: 0.04em; cursor: pointer; background: none; }
#list #planetlist button.fhead::before { content: '▾'; width: 10px; color: var(--accent); }
#list #planetlist button.fhead.closed::before { content: '▸'; }
#list #planetlist button.fhead span { flex: 1; }
#list #planetlist button.fhead small { font-size: 10px; border: 1px solid var(--line); padding: 0 5px; }
#list #planetlist button.fhead:hover { color: var(--text); }
#list #planetlist button.body.moon.cat { padding: 1px 6px 1px 36px; margin: 0; gap: 8px; }
#list #planetlist button.body.moon span.thumb.gen { width: 14px; height: 14px; background: radial-gradient(circle at 35% 35%, #9aa3ad, #2a2f35 72%); }
#list #planetlist button.body.moon span.thumb.gen.irr { width: 10px; height: 10px; margin: 0 2px; background: radial-gradient(circle at 35% 35%, #7f90a6, #22282f 72%); }
#planetlist .fload { padding: 2px 6px 2px 40px; font-size: 11px; color: var(--dim); }
/* the small moons' labels in a system view */
.marker.moon.small { pointer-events: auto; cursor: pointer; font-size: 10px; opacity: 0.85; }
.marker.moon.small.irr { color: #9fb2c8; }
.marker.moon.small::before { display: none; }
.marker.moon.small:hover { opacity: 1; color: var(--accent); }

/* The Sun's channels (viewer/sun.js) */
#channels { position: absolute; right: 10px; top: 112px; width: min(290px, 36%); max-height: calc(100% - 120px); overflow-y: auto;
  padding: 8px 10px; background: rgba(21, 23, 26, 0.88); border: 1px solid var(--line); border-left: 2px solid var(--accent);
  z-index: 3; font-size: 12px; letter-spacing: 0.01em; }
#channels .chlist { display: flex; flex-wrap: wrap; gap: 4px; }
#channels button { background: var(--panel); color: var(--text); border: 1px solid var(--line); font: inherit; font-size: 11px; padding: 3px 6px;
  cursor: pointer; }
#channels button.on { color: var(--bg); background: var(--accent); border-color: var(--accent); }
#channels button.eclipse { margin-left: auto; }
#channels .temp { display: flex; align-items: center; gap: 6px; margin: 8px 0 4px; color: var(--dim); }
#channels .temp input { flex: 1; accent-color: var(--accent); }
#channels .temp .tval { color: var(--text); min-width: 90px; text-align: right; font-size: 11px; }
#channels .chcaption b { display: block; color: var(--accent); font-weight: normal; text-transform: uppercase; letter-spacing: 0.08em; margin: 6px 0 2px; }
#channels .chcaption p { margin: 4px 0; line-height: 1.35; color: var(--text); }
#channels .chcaption .meta { color: var(--text); opacity: 0.85; }
#channels .chcaption .note { color: var(--dim); font-size: 11px; border-left: 2px solid var(--accent); padding-left: 6px; }
#channels .chcaption .credit { color: var(--dim); font-size: 11px; margin-top: 2px; }
#channels details { margin-top: 4px; }
#channels summary { cursor: pointer; color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
#channels details a { color: var(--accent); font-size: 11px; text-decoration: none; }
#credit .chcredit { color: var(--text); }

/* The lighting control (planets.js lightControl): Real light, Full light, Map; Earth's city lights */
.camerabar .lightseg button.on { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.camerabar .lightseg #l-night[hidden] { display: none; }
#lightnote { position: absolute; left: 50%; bottom: 62px; transform: translateX(-50%); padding: 3px 10px; z-index: 3;
  background: rgba(21, 23, 26, 0.88); border: 1px solid var(--line); border-left: 2px solid var(--accent);
  color: var(--text); font-size: 12px; letter-spacing: 0.04em; pointer-events: none; white-space: nowrap; }
#lightnote[hidden], #mapnote[hidden] { display: none; }
#mapnote { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); max-width: 420px; padding: 10px 14px;
  background: rgba(21, 23, 26, 0.92); border: 1px solid var(--line); border-left: 2px solid var(--accent); color: var(--text);
  font-size: 13px; line-height: 1.4; z-index: 3; pointer-events: none; }
#mapcursor { position: absolute; left: 10px; bottom: 44px; color: var(--text); font-size: 12px; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 4px #000; pointer-events: none; }
.mapmode .timeline, .mapmode .marker.tick, .mapmode .marker.probe, .mapmode .marker.pin { display: none !important; }
.mapmode #globe { cursor: grab; }
.mapmode #globe:active { cursor: grabbing; }
.marker.sunpt { color: #ffd27a; }

/* The Sun's coverage (viewer/sun.js): one moment, all-round, rotation map; the all-round inset */
#channels .covrow { display: flex; gap: 4px; margin-bottom: 6px; }
#channels .covrow select { flex: 1; min-width: 0; background-color: var(--panel); color: var(--text); border: 1px solid var(--line); font: inherit;
  font-size: 11px; padding: 3px 4px; color-scheme: dark; }
#channels .covrow select.cov { flex: 1.1; }
#channels .sinset { display: block; width: 170px; height: 170px; margin: 6px auto 2px; border: 1px solid var(--line); }
#channels .sinset[hidden] { display: none; }

/* The list's filters and the data badges (what we hold for each body: map, shape, relief, imaged, never) */
#planetlist .fbar { display: flex; gap: 6px; align-items: stretch; }
#planetlist .fbar .pfilter { flex: 1 1 auto; min-width: 0; width: auto; margin-bottom: 6px; }
#list #planetlist button.ftog { flex: none; width: auto; font-size: 11px; padding: 0 8px; margin-bottom: 6px; border: 1px solid var(--line); }
#list #planetlist button.ftog.on { color: var(--accent); border-color: var(--accent); }
#planetlist .fpanel { border: 1px solid var(--line); padding: 6px; margin-bottom: 6px; font-size: 11px; }
#planetlist .frow { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 5px; }
#planetlist .frow .fl { width: 100%; color: var(--dim); letter-spacing: 0.08em; text-transform: uppercase; font-size: 10px; }
#list #planetlist button.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; font-size: 11px; border: 1px solid var(--line);
  border-radius: 10px; margin: 0; width: auto; }
#list #planetlist button.chip.on { color: var(--bg); background: var(--accent); border-color: var(--accent); }
#planetlist .fmission { font: inherit; font-size: 11px; padding: 2px 4px; background-color: var(--bg); color: var(--text); border: 1px solid var(--line); color-scheme: dark; }
#planetlist .legend { display: grid; grid-template-columns: 16px 1fr; gap: 3px 6px; align-items: center; color: var(--dim); padding-top: 4px;
  border-top: 1px solid var(--line); }
#planetlist .fsum { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--dim); margin: 0 2px 6px; }
#list #planetlist button.fclear { width: auto; font-size: 10px; padding: 1px 6px; border: 1px solid var(--line); margin: 0; }
#list #planetlist button.body.ctx { opacity: 0.55; }
.badges { flex: none; display: inline-flex; gap: 2px; align-items: center; }
.badge { display: inline-flex; align-items: center; gap: 1px; color: var(--dim); }
.badge .ic { width: 13px; height: 13px; margin: 0; vertical-align: middle; stroke-width: 2.3; }   /* viewer/icons.svg */
#list #planetlist button.chip .badge .ic { width: 12px; height: 12px; }
.badge small { font-size: 9px; letter-spacing: 0; }
.badge.map, .badge.shape, .badge.relief { color: var(--accent); }
.badge.seen { color: #9cc4ff; }
.badge.never { color: #7d8590; }
#info .datahead { list-style: none; margin: 0 0 10px; padding: 0 0 8px; border-bottom: 1px solid var(--line); font-size: 11px; color: var(--dim); }
#info .datahead li { display: flex; gap: 6px; align-items: flex-start; margin: 3px 0; line-height: 1.35; }
#info .datahead li .badge { margin-top: 1px; }
#info .datahead li.ms { padding-left: 19px; }

/* The view's toolbar (viewer/viewbar.js) shows what applies to the view: a moon system's Orbits and
   Moons ×20 only with System on; no Spin or system in the map view. planets.js marks the view's kind
   (#stage[data-kind] globe, shape or sun) and hides Sites where a body has none; the overview's own
   controls carry .ss and the globe's .pg (solar_system.css). */
#viewbar:not(:has(#p-system.on)) :is(#p-orbits, #p-big, #p-irr) { display: none; }
#stage.mapmode #viewbar :is(#p-spin, #p-system, #p-orbits, #p-big, #p-irr) { display: none; }

/* Landings in the fact sheet (planets.js makeLanding): each path, ▶ to play it */
#plandings li.landing { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
#plandings li.landing:hover .lname { color: var(--accent); }
#plandings .lgo { background: none; border: 1px solid var(--line); color: var(--accent); font: inherit; font-size: 10px; padding: 0 5px; cursor: pointer; }
#plandings .laud { display: inline-flex; align-self: center; color: var(--accent); }   /* mission audio */
#plandings .laud .ic { width: 12px; height: 12px; }
#plandings .desc { flex-basis: 100%; display: block; color: var(--dim); font-size: 11px; opacity: 0.8; }
.badge.landing { color: var(--accent); }

/* Pictures: the fact sheet's list with thumbnails, the timeline's camera marks, the body list's badge */
#pimages li.pic { cursor: pointer; display: grid; grid-template-columns: 64px 1fr; gap: 2px 8px; align-items: center; margin: 4px 0; }
#pimages li.pic img { grid-row: span 2; width: 64px; height: 48px; object-fit: cover; border: 1px solid var(--line); }
#pimages li.pic:hover img { border-color: var(--accent); }
#pimages li.pic .ptitle { color: var(--text); }
#pimages li.pic .desc { color: var(--dim); font-size: 11px; }
.timeline .marks i.pic { width: 14px; height: 14px; margin-left: -7px; top: -2px; background: none; color: #9ad0ff; display: flex; }
.timeline .marks i.pic .ic { width: 14px; height: 14px; margin: 0; }
.badge.pics { color: #9ad0ff; }

/* a trip's legs on the timeline (Apollo 11) */
.timeline .legs { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; color: var(--dim); font-size: 11px; }
.timeline .legs[hidden] { display: none; }
.timeline .legs .leg { min-width: 0; padding: 1px 6px; }

/* the left panel's tabs (planets.js listTabs): Bodies, Paths, Shots, kept at the top as the list scrolls */
#list .ltabs { position: sticky; top: 0; z-index: 3; display: flex; margin: -2px 0 8px; background: var(--panel); border-bottom: 1px solid var(--line); }
#list .ltab { flex: 1; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--dim); font: inherit; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 8px 0 6px; cursor: pointer; }
#list .ltab small { display: inline; margin-left: 5px; font-size: 10px; letter-spacing: 0; color: var(--dim); opacity: 0.8; }
#list .ltab:hover { color: var(--text); }
#list .ltab.on { color: var(--accent); border-bottom-color: var(--accent); }
#list .ltab-pane[hidden], #list #planetlist[hidden] { display: none; }
#list .ltab-pane .tl-q { position: static; }
/* (the panel's own "#list button" is a block: the lists' rows keep their grid) */
#list .ltab-pane .tl-list button { display: grid; width: 100%; }
#list .ltab-pane .tl-chips button { display: inline-block; width: auto; }
#list .ltab-pane button small, #list .ltab-pane .tl-pnm small { display: block; }
#list .ltab-pane .tl-li-row { display: flex; gap: 4px; } #list .ltab-pane .tl-li-row > button:first-child { flex: 1; }
#list .ltab-pane .tl-li-row .tl-go { width: auto; display: inline-block; }
#list .ltab-pane .tl-li-t { white-space: normal; }
.timeline .marks i[hidden] { display: none; }

/* what is said with a path's mission audio (planets.js syncWords): the caption over the path bar, the Transcript panel */
.pcap { position: absolute; left: 50%; bottom: var(--pbar, 112px); transform: translateX(-50%); width: min(760px, 86%); z-index: 3;
  padding: 6px 30px 7px 12px; background: rgba(10, 11, 13, 0.78); border-left: 2px solid var(--accent);
  color: #f2efe8; font-size: 15px; line-height: 1.35; text-align: left; pointer-events: auto; }
.pcap[hidden] { display: none; }
.pcap b { color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; margin-right: 8px; }
.pcap.heard { border-left-color: var(--dim); }
.pcap.beside { left: 10px; transform: none; width: calc(100% - min(400px, 42%) - 40px); }   /* (the Transcript panel open on the right) */
.pcap.heard b { color: var(--dim); }
.pcap .pcapx { position: absolute; right: 4px; top: 4px; background: none; border: 0; color: var(--dim); cursor: pointer; font-size: 15px; }
.tpanel { position: absolute; right: 10px; bottom: var(--pbar, 110px); width: min(400px, 42%); max-height: min(44vh, 420px); z-index: 3;
  display: flex; flex-direction: column; background: rgba(21, 23, 26, 0.92); border: 1px solid var(--line); border-left: 2px solid var(--accent); }
.tpanel[hidden] { display: none; }
.tpanel .tp-head { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-bottom: 1px solid var(--line);
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; }
.tpanel .tp-head b { color: var(--accent); flex: 1; }
.tpanel .tp-cap { color: var(--dim); display: flex; align-items: center; gap: 4px; cursor: pointer; }
.tpanel .tp-cap input { accent-color: var(--accent); }
.tpanel .tp-x { background: none; border: 0; color: var(--dim); cursor: pointer; font-size: 15px; }
.tpanel .tp-list { list-style: none; margin: 0; padding: 4px 0; overflow-y: auto; flex: 1; min-height: 0; }
.tpanel .tp-list li { padding: 0; cursor: pointer; font-size: 12.5px; line-height: 1.4; border-left: 2px solid transparent; }
.tpanel .tp-list .tp-jump { display: block; width: 100%; padding: 4px 10px; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; line-height: inherit; text-align: left; text-transform: none; letter-spacing: normal; }
.tpanel .tp-list .tp-jump:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tpanel .tp-list li:hover { background: rgba(255, 255, 255, 0.04); }
.tpanel .tp-list li.now { border-left-color: var(--accent); background: rgba(230, 179, 90, 0.08); }
.tpanel .tp-list li.heard { color: var(--dim); }
.tpanel .tp-t { display: block; color: var(--dim); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.tpanel .tp-list b { color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; font-size: 10.5px; margin-right: 6px; }
.tpanel .tp-list li.heard b { color: var(--dim); }
.tpanel .tp-src, .tpanel .tp-wait { margin: 0; padding: 5px 10px 7px; color: var(--dim); font-size: 10.5px; border-top: 1px solid var(--line); }


/* the Director's titles (viewer/chapter.js): a caption in the lower third as it cuts to a named moment, and a trip's
   chapter card between legs, over black */
.chap-cap { position: absolute; left: 6%; bottom: calc(var(--pbar, 112px) + 52px); z-index: 6; pointer-events: none; display: flex; flex-direction: column; gap: 2px;
  padding: 6px 12px 7px 10px; border-left: 2px solid var(--accent); background: rgba(8, 10, 14, 0.55); opacity: 0; transform: translateY(6px);
  transition: opacity 0.6s, transform 0.6s; max-width: min(520px, 80%); }
.chap-cap.on { opacity: 1; transform: none; }
.chap-cap b { font-weight: 600; letter-spacing: 0.02em; }
.chap-cap span { color: var(--dim); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.chap-card { position: absolute; inset: 0; z-index: 7; background: #000; opacity: 0; transition: opacity 0.45s ease;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; pointer-events: none; text-align: center; }
.chap-card[hidden] { display: none; }
.chap-card.on { opacity: 1; }
.chap-card small { color: var(--accent); letter-spacing: 0.2em; text-transform: uppercase; font-size: 11px; }
.chap-card b { font-size: clamp(18px, 3vw, 30px); font-weight: 500; max-width: 80%; }
.chap-card span { color: var(--dim); font-variant-numeric: tabular-nums; }
.timeline button.dir { min-width: 0; }
.timeline select.cam.directed { border-color: var(--accent); color: var(--accent); }
.timeline .legs select.leglab { max-width: 150px; padding: 1px 4px; font-size: 11px; }

#stage[data-hardware-flight=true] #channels,
#stage[data-hardware-flight=true] #phud { display: none; }
/* Solar tours put their Go-to card in the surface controls' corner. Keep the
   controls available on the ordinary Sun view, which also has a path timeline. */
#stage:has(.timeline:not([hidden])):has(.site-card[data-site^="goto:"]) #channels { display: none; }

/* The cabin walls obscure outside labels; restore them on leaving the interior. */
#stage[data-cabin-view="true"] .ss-label, #stage[data-cabin-view="true"] .marker { display: none !important; }

/* Sourced rover story, opened explicitly from the path controls. */
.timeline .science-info, .timeline .pointing-info { flex-basis: 100%; max-width: 58rem; padding-top: .4rem; border-top: 1px solid var(--line); line-height: 1.45; }
.timeline .science-info a, .timeline .pointing-info a { color: var(--accent); text-decoration: underline; margin-right: .6em; }
.timeline .science-pick { max-width: min(24rem, 90vw); }

.timeline .audio-state, .timeline .director-pace { color: var(--dim); font-size: .85em; }

.timeline .attitude-window { display: block; color: var(--dim); margin: .2em 0; }

/* A reversible phone presentation choice; timing and camera controls stay visible. */
.timeline .scene-room-toggle { display: none; }
@media (max-width: 600px) {
  .timeline .scene-room-toggle { display: inline-block; }
  .timeline > select[data-role=pick] { min-width: 0; width: 0; flex: 1 1 180px; }
  .timeline.scene-room > .scene-secondary { display: none !important; }
  #stage:has(.timeline.scene-room:not([hidden])) #phud { display: none; }
  #stage:has(.timeline.scene-room:not([hidden])) .site-card > :not(.sc-title):not(.sc-x) { display: none; }
}