/* The Astronomy lab. The page sets .a-astronomy, so --accent is the astronomy violet. */

.two-col { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: minmax(0, 1fr); } }
.astro-copy p { color: var(--ink-2); }
.astro-copy .try { margin: 1.25rem 0 0; padding: 1rem 1.1rem; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.astro-copy .try h3 { font: 650 .78rem/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 0 0 .5rem; }
.astro-copy .try ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .45rem; }
.astro-copy .caveat { font-size: .92rem; color: var(--ink-3); margin-top: 1rem; }
.astro-copy .src { font-size: .85rem; color: var(--ink-3); }

.fig-host { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1rem; min-height: 18rem; }
.fig-host .fig-svg { display: block; width: 100%; height: auto; max-height: 420px; margin-inline: auto; overflow: visible; }
.fig-controls { display: grid; gap: .75rem; margin-top: .75rem; }
.fig-controls .field-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem .75rem; align-items: baseline; }
.fig-controls .field label { font-weight: 600; font-size: .95rem; }
.fig-controls output { font-family: var(--mono); font-weight: 600; color: var(--accent); }
.fig-controls input[type=range] { width: 100%; accent-color: var(--accent); }
.fig-presets { gap: .4rem; }
.fig-host .readouts { margin: .75rem 0 .25rem; }
.fig-host .readout dd { font-size: 1.05rem; }
.predict { margin: .75rem 0; max-width: 22rem; }
.predict input { width: 9rem; }
.fig-host table.mini { width: 100%; border-collapse: collapse; font-size: .92rem; font-variant-numeric: tabular-nums; }
.fig-host table.mini caption { text-align: left; font-size: .85rem; color: var(--ink-3); margin-bottom: .3rem; }
.fig-host table.mini th, .fig-host table.mini td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--line); }
.fig-host table.mini input { accent-color: var(--accent); width: 1rem; height: 1rem; }

/* shared SVG vocabulary */
/* --fig-k (set by fig.js) enlarges SVG text on narrow screens so it never renders under 12px */
.fig-svg text { font-family: var(--sans); font-weight: 500; font-size: calc(11px * var(--fig-k, 1)); fill: var(--ink-2); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }   /* halo: readable on any fill */
.fig-svg .fig-label { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: calc(13px * var(--fig-k, 1)); fill: var(--ink); }
.fig-svg .fig-note.strong { font-weight: 700; fill: var(--accent); font-size: calc(12px * var(--fig-k, 1)); }
.fig-svg .ray { stroke: var(--gold); stroke-width: 1.4; stroke-dasharray: 5 4; opacity: .8; }
.fig-svg .sun { fill: var(--gold); stroke: color-mix(in srgb, var(--gold) 60%, var(--ink)); stroke-width: 1; }
.fig-svg .sun-ray { stroke: var(--gold); stroke-width: 2; }
.fig-svg .sun-ray.is-below { stroke-dasharray: 3 3; opacity: .5; }
/* day and night are physical, so they keep the same colours in both themes */
.fig-svg .earth-night { fill: #2b3a55; stroke: var(--ink-3); stroke-width: 1.2; }
.fig-svg .earth-day { fill: #e8eef7; stroke: var(--ink-3); stroke-width: 1.2; }
.fig-svg .earth-plain { fill: color-mix(in srgb, var(--lapis) 10%, var(--surface)); stroke: var(--ink-3); stroke-width: 1.2; }
/* lines on the globe: fixed colours with a light casing, readable on both hemispheres in both themes */
.fig-svg .casing { stroke: #f4f7fb; stroke-width: 4.2; stroke-linecap: round; }
.fig-svg .axis { stroke: #14171f; stroke-width: 1.6; }
.fig-svg .equator { stroke: #3d4658; stroke-width: 1.2; stroke-dasharray: 4 3; }
.fig-svg .parallel { stroke: #6a3fa0; stroke-width: 2; }
.fig-svg .observer { fill: var(--accent); stroke: var(--surface); stroke-width: 1.5; }
.fig-svg .horizon { stroke: var(--ink); stroke-width: 1.4; }
.fig-svg .alt-arc { fill: none; stroke: var(--accent); stroke-width: 1.8; }
.fig-svg .bar-night { fill: #2b3a55; }
.fig-svg .bar-day { fill: #e6bd60; }
.fig-svg .orbit, .fig-svg .sky-ring { fill: none; stroke: var(--ink-3); stroke-width: 1.2; }
.fig-svg .sky-ring { stroke-dasharray: 2 4; }
.fig-svg .moon-dark { fill: #4b4740; }
.fig-svg .moon-lit { fill: color-mix(in srgb, var(--gold) 35%, #fffdf5); }
.fig-svg .moon-disc { fill: #3a3631; stroke: var(--ink-3); stroke-width: 1.2; }
.fig-svg .sight { stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 4 3; }
.fig-svg .sight-star { stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 1 3; }
.fig-svg .gnomon-shadow { stroke: var(--ink-2); stroke-width: 4; stroke-linecap: round; opacity: .7; }
.fig-svg .well { fill: var(--ink); }
.fig-svg .radius { stroke: var(--ink-2); stroke-width: 1.2; }
.fig-svg .gnomon { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.fig-svg .p-earth { fill: var(--lapis); stroke: var(--surface); stroke-width: 1.5; }
.fig-svg .p-mars { fill: var(--ember); stroke: var(--surface); stroke-width: 1.5; }
.fig-svg .trail { fill: var(--ember); }
.fig-svg .loop-path { fill: none; stroke: var(--ember); stroke-width: 1.2; }
.fig-svg .retro-band { fill: var(--accent); opacity: .12; }
.fig-svg .retro-edge { stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 3 2; }
.fig-svg .axis-line, .fig-svg .grid { stroke: var(--line); stroke-width: 1; }
.fig-svg .lon-path { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.fig-svg .cursor { stroke: var(--accent); stroke-width: 2; }
.fig-svg .sector { stroke: var(--accent); stroke-width: 1.2; stroke-linejoin: round; }
.fig-svg .sector.even { fill: var(--accent); fill-opacity: .24; }
.fig-svg .sector.odd { fill: var(--accent); fill-opacity: .08; }
.fig-svg .fit { stroke: var(--accent); stroke-width: 2; }
.fig-svg .pt { fill: var(--ink); stroke: var(--surface); stroke-width: 1.5; }
.fig-svg .pt.is-off { fill: none; stroke: var(--ink-3); stroke-dasharray: 2 2; }
.fig-svg .pred { fill: none; stroke: var(--ember); stroke-width: 2.5; }

@media (prefers-reduced-motion: reduce) { .fig-svg * { transition: none !important; } }
.fig-key { margin: .5rem 0 0; }
.fig-host .table-wrap { overflow-x: auto; margin-top: .75rem; }
@media (max-width: 400px) { .fig-host { padding: .75rem; } .fig-host table.mini { font-size: .85rem; } .fig-host table.mini th, .fig-host table.mini td { padding: .3rem .25rem; } }
.astro-copy { overflow-wrap: anywhere; }
.fig-controls input[type=range] { max-width: 100%; box-sizing: border-box; }