.explore { max-width: 86rem; margin: auto; padding: 1rem clamp(.8rem, 3vw, 2rem) 3rem; }
.tool-form, .tool-actions { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; }

.explore a { color: var(--accent-text); }
.explore .panel { padding: clamp(.85rem, 2vw, 1.6rem); margin: 1rem 0; }
.explore h1 { font-size: clamp(2rem, 5vw, 3.6rem); }
.explore h2 { margin-bottom: .75rem; }
.explore p { max-width: 75ch; }
.tool-form { align-items: end; }
.tool-form label, .sim-inputs label { display: grid; gap: .25rem; min-width: 0; }
.tool-form label input, .tool-form label select { width: 100%; }
.explore input[type=number], .explore input[type=date] { padding: .55rem; background: var(--field); border: 1px solid var(--border); border-radius: .4rem; color: var(--text); font: inherit; }
.explore button { cursor: pointer; }
.tool-grid { display: grid; grid-template-columns: minmax(15rem, 1fr) minmax(0, 2fr); gap: 1rem; align-items: start; }
.sim-inputs { display: grid; gap: .9rem; }
.sim-inputs output { font-variant-numeric: tabular-nums; }
.explore figure { margin: 0; }
.plot { display: block; width: 100%; background: var(--field); border-radius: var(--radius-sm); border: 1px solid var(--border); }
.plot text { fill: var(--text); font: 14px var(--font-body); }
.plot .axis { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 4 5; opacity: .65; }
.plot .coverage { fill: none; stroke: var(--accent); stroke-width: 1; opacity: .35; }
.plot .active { fill: none; stroke: var(--accent-hi); stroke-width: 3; }
.plot .orbit { fill: none; stroke: var(--text-muted); stroke-width: 1.6; }
.plot .sight { stroke: var(--accent); stroke-width: 2; }
.plot .reference { stroke: var(--text-muted); stroke-dasharray: 5 4; stroke-width: 1.5; }
.plot .model { fill: var(--accent-hi); }
.plot .sun { fill: var(--warn); }
.explore table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.explore td, .explore th { padding: .4rem .6rem; text-align: left; border-bottom: 1px solid var(--border); }
.explore .table-scroll { max-height: 24rem; }
.explore tr[aria-selected=true] { background: var(--raised); }
.explore figcaption { padding-top: .5rem; color: var(--text-muted); }
.tool-output { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; font-variant-numeric: tabular-nums; }
.tool-output dd { margin: 0; }
@media (max-width: 680px) {
  .tool-grid { grid-template-columns: minmax(0,1fr); }
  .tool-grid .panel { margin: .5rem 0; }
  .tool-output { grid-template-columns: 1fr; gap: .1rem; }
  .tool-output dd { margin-bottom: .5rem; }
}

/* Solar System Simulator: the controls read as a deliberate setup sequence,
   while the geometry and its derived values remain visible together. */
.simulator-page { max-width: 88rem; margin: 0 auto; }
.sim-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, .7fr); gap: 1rem 3rem; align-items: end; padding: clamp(1.3rem, 3vw, 3rem) 0 1.4rem; border-bottom: 1px solid var(--border); }
.sim-intro .atlas-kicker { grid-column: 1 / -1; margin: 0; }.sim-intro h1 { margin: 0; }.sim-intro > p:last-child { margin: 0 0 .35rem; color: var(--text-muted); font-size: 1.05rem; }
.simulator-layout { display: grid; grid-template-areas: "settings scene"; grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr); gap: clamp(1rem, 2.2vw, 2.5rem); align-items: start; padding-top: clamp(1rem, 2vw, 1.8rem); }
.simulator-layout .panel { margin: 0; }.sim-panel-heading { padding-bottom: 1rem; border-bottom: 1px solid var(--border); }.sim-panel-heading .atlas-kicker { margin: 0 0 .35rem; }.sim-panel-heading h2 { margin: 0; }.sim-panel-heading p:last-child { margin: .55rem 0 0; color: var(--text-muted); font-size: .88rem; }
.sim-controls { grid-area: settings; display: grid; gap: 1.1rem; position: sticky; top: 1rem; }.sim-controls fieldset { display: grid; gap: .85rem; min-width: 0; margin: 0; padding: 0; border: 0; }.sim-controls legend { margin-bottom: .8rem; color: var(--text-muted); font: 600 .87rem var(--font-body); }.sim-controls label { gap: .4rem; font-size: .9rem; }.field-unit { color: var(--text-muted); font-size: .76rem; font-weight: 400; }.sim-coordinate-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }.range-label { display: grid; grid-template-columns: 1fr auto; align-items: center; }.range-label input { grid-column: 1 / -1; width: 100%; }.range-label output { color: var(--accent-text); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }.sim-time { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 1rem 0; padding: .75rem 0; border: 0; border-block: 1px solid var(--border); }
.sim-time legend { padding: 0 .4rem 0 0; font-weight: 600; }
.sim-time .range-label { flex: 1 1 12rem; }
.sim-time .btn { min-width: 6rem; min-height: 40px; }.sim-camera { border-top: 1px solid var(--border); padding-top: .95rem; }.sim-camera summary { cursor: pointer; color: var(--text); font: 600 .9rem var(--font-body); }.sim-camera[open] { display: grid; gap: .85rem; }.sim-camera label:first-of-type { margin-top: .3rem; }
.sim-stage { grid-area: scene; min-width: 0; padding: clamp(1rem, 2.5vw, 2rem) !important; }.sim-stage figure { margin: 1.2rem 0 0; }.sim-stage .plot { aspect-ratio: 7 / 4; min-height: 16rem; background: var(--bg-2); border-radius: 0; }.sim-stage figcaption { display: flex; padding: .75rem 0 0; color: var(--text-muted); font-size: .84rem; }.sim-readouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 1.25rem 0; border: 1px solid var(--border); }.sim-readouts > div { min-width: 0; padding: .8rem 1rem; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }.sim-readouts > div:nth-child(2n) { border-right: 0; }.sim-readouts > div:nth-last-child(-n + 2) { border-bottom: 0; }.sim-readouts dt { color: var(--text-muted); font: 500 .83rem var(--font-body); }.sim-readouts dd { overflow-wrap: anywhere; margin: .35rem 0 0; color: var(--text); font-family: var(--font-mono); font-size: .86rem; font-variant-numeric: tabular-nums; }.sim-note { margin: 0; padding: .9rem 1rem; border-left: 3px solid var(--accent); background: var(--raised); color: var(--text-muted); font-size: .84rem; line-height: 1.55; }.sim-note strong { color: var(--text); }.sim-stage #status:not(:empty) { margin: 1rem 0 0; padding: .7rem .8rem; border: 1px solid var(--danger); color: var(--danger); }
@media (max-width: 860px) { .sim-intro { grid-template-columns: 1fr; gap: .55rem; }.simulator-layout { grid-template-columns: minmax(0,1fr); grid-template-areas: "scene" "settings"; }.sim-controls { position: static; }.sim-stage .plot { min-height: 16rem; } }
@media (max-width: 480px) { .sim-coordinate-pair, .sim-readouts { grid-template-columns: 1fr; }.sim-readouts > div { border-right: 0; }.sim-readouts > div:nth-last-child(2) { border-bottom: 1px solid var(--border); }.sim-stage .plot { min-height: 13rem; } }

.sim-coordinate-pair input { min-width: 0; width: 100%; }
.explore #lab, .explore #explorer { padding-top: 1rem; }
.explore #lab .panel > label { display: inline-grid; gap: .35rem; margin: .4rem 1rem .5rem 0; }
.explore #lab table { font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .explore #lab .panel > label { width: 100%; margin-inline: 0; } }

/* Sky Explorer's orientation map is a navigator, not an observation or coverage claim. */
.sky-atlas { padding: clamp(1rem, 2.5vw, 1.6rem); }
.sky-atlas-heading { display: flex; justify-content: space-between; align-items: end; gap: 1rem 2rem; margin-bottom: 1rem; }
.sky-atlas-heading p { max-width: 40ch; margin: 0; color: var(--text-muted); }
.atlas-kicker { margin: 0 0 .35rem; }
.sky-atlas-grid { display: grid; grid-template-columns: minmax(0, 2.5fr) minmax(13rem, .8fr); gap: 1rem; align-items: stretch; }
#sky-atlas-map { display: block; width: 100%; aspect-ratio: 900 / 480; border: 1px solid var(--border); background: var(--bg-2); }
.atlas-ground { fill: var(--raised); stroke: var(--border); stroke-width: 1.2; }
.atlas-grid path { fill: none; stroke: var(--border); stroke-width: 1; opacity: .85; }
.atlas-grid .atlas-ecliptic { stroke: var(--accent); stroke-width: 1.7; }
.atlas-grid .atlas-galactic { stroke: var(--text-muted); stroke-width: 1.7; stroke-dasharray: 5 6; }
.atlas-label { fill: var(--text-faint); font: 12px var(--font-mono); }
.atlas-marker { cursor: pointer; outline: none; }.atlas-marker circle { fill: var(--accent); stroke: var(--surface); stroke-width: 2.5; transition: r .15s ease; }.atlas-marker text { fill: var(--text); font: 12px var(--font-mono); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }.atlas-marker:hover circle, .atlas-marker.is-selected circle { r: 10; fill: var(--accent-hi); }.atlas-marker:focus-visible circle { stroke: var(--text); stroke-width: 4px; }
.sky-atlas figcaption { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .55rem; color: var(--text-muted); font: .83rem var(--font-body); }
.atlas-key::before { content: ""; display: inline-block; width: 1.7rem; margin-right: .4rem; border-top: 2px solid var(--accent); vertical-align: middle; }.atlas-key-galactic::before { border-color: var(--text-muted); border-top-style: dashed; }.atlas-key-target::before { width: .65rem; height: .65rem; border: 0; border-radius: 50%; background: var(--accent); }
.atlas-note { display: flex; flex-direction: column; align-items: flex-start; padding: 1rem; border: 1px solid var(--border); background: var(--surface); }.atlas-note h3 { margin: .2rem 0 .7rem; }.atlas-note p:not(.atlas-kicker) { margin: 0; color: var(--text-muted); }.atlas-note .btn { margin-top: auto; }.atlas-target-list { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0; }.atlas-target-list .btn { min-height: 2.5rem; font-size: .66rem; }.atlas-target-list .btn[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
@media (max-width: 700px) { .sky-atlas-heading, .sky-atlas-grid { grid-template-columns: 1fr; display: grid; }.sky-atlas-heading { align-items: start; }.atlas-note .btn { margin-top: 1rem; } }

.explore table caption { text-align: left; color: var(--text-muted); padding: .4rem .6rem; }