/* The Geometry lab. The page sets .a-geometry, so --accent is the geometry blue.
   Layout and the shared figure vocabulary follow astronomy.css; the conic classes come after. */

.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); } }
.geo-copy { overflow-wrap: anywhere; }
.geo-copy p { color: var(--ink-2); }
.geo-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; }
.geo-copy .try h3 { font: 650 .78rem/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 0 0 .5rem; }
.geo-copy .try ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .45rem; }
.geo-copy .caveat { font-size: .92rem; color: var(--ink-3); margin-top: 1rem; }
.geo-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: 460px; 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%; max-width: 100%; box-sizing: border-box; accent-color: var(--accent); }
.fig-presets { gap: .4rem; }
.fig-host .readouts { margin: .75rem 0 .25rem; }
.fig-host .readout dd { font-size: 1.05rem; }
.fig-key { margin: .5rem 0 0; }
@media (max-width: 400px) { .fig-host { padding: .75rem; } }

/* 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)); }

/* conic vocabulary */
.fig-svg .curve { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.fig-svg .curve.is-faint { stroke-width: 1.4; opacity: .62; }   /* .62: at least 3:1 on the surface in both themes */
.fig-svg .curve-hidden { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 4 3; opacity: .62; }
.fig-svg .axis-line { stroke: var(--ink-3); stroke-width: 1; }
.fig-svg .grid { stroke: var(--line); stroke-width: .8; }
.fig-svg .guide { fill: none; stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.fig-svg .seg { stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; }
.fig-svg .upright { stroke: var(--ember); stroke-width: 2.4; stroke-linecap: round; }
/* the two equal figures (square on the ordinate, applied rectangle) share one fill; the defect or excess is hatched */
.fig-svg .equal { fill: var(--accent); fill-opacity: .2; stroke: var(--accent); stroke-width: 1.4; }
.fig-svg .outline { fill: none; stroke: var(--ink-2); stroke-width: 1.2; stroke-dasharray: 5 3; }
.fig-svg .defect { stroke: var(--ember); stroke-width: 1.4; }
.fig-svg .hatch-line { stroke: var(--ember); stroke-width: 1.4; }
.fig-svg .point { fill: var(--ember); stroke: var(--surface); stroke-width: 2; }
.fig-svg .focus { fill: var(--gold); stroke: color-mix(in srgb, var(--gold) 55%, var(--ink)); stroke-width: 1.2; }
.fig-svg .tangent { stroke: var(--ink-2); stroke-width: 1.4; }
.fig-svg .focal { stroke: var(--ink); stroke-width: 1.4; }
.fig-svg .angle-arc { fill: none; stroke: var(--ember); stroke-width: 1.8; }
.fig-svg .directrix { stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 8 4; }
.fig-svg .asymptote { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 4; }
.fig-svg .plane { fill: var(--accent); fill-opacity: .13; stroke: var(--accent); stroke-width: 1; stroke-opacity: .6; }
.fig-svg .cone-line { stroke: var(--ink-3); stroke-width: .9; }
.fig-svg .cone-line.is-back { stroke-dasharray: 2 3; opacity: .6; }
.fig-svg .cone-edge { stroke: var(--ink-2); stroke-width: 1.5; fill: none; }
.fig-svg .ray { stroke: var(--gold); stroke-width: 1.3; opacity: .85; }
.fig-svg .ray.is-back { stroke-dasharray: 3 3; opacity: .6; }
.fig-svg .photon { fill: var(--gold); stroke: color-mix(in srgb, var(--gold) 55%, var(--ink)); stroke-width: .8; }
/* a draggable handle: a larger transparent hit area; only the handle blocks touch scrolling */
.fig-svg .handle { fill: transparent; stroke: none; cursor: grab; touch-action: none; }
.fig-svg .handle.is-dragging { cursor: grabbing; }
.fig-svg .handle:hover + .point, .fig-svg .handle.is-dragging + .point { stroke-width: 3; }
/* the visible point and the letters sit above the handle: presses fall through to it */
.fig-svg .handle + .point, .fig-svg text { pointer-events: none; }

@media (prefers-reduced-motion: reduce) { .fig-svg * { transition: none !important; } }

/* figure-specific rules are appended below, one block per figure */

/* ── family ── */
/* PF in ink, PD in ember: the two distances whose ratio is the eccentricity */
.fig-svg .fam-pf { stroke-width: 1.8; stroke-linecap: round; }
.fig-svg .fam-pd { stroke: var(--ember); stroke-width: 1.8; stroke-linecap: round; }
.fig-svg .fam-right { fill: none; stroke: var(--ink-2); stroke-width: 1; }
.fig-svg .fam-d { fill: var(--ink); stroke: var(--surface); stroke-width: 1.5; }
.fig-svg .fam-edge { fill: var(--ember); stroke: var(--surface); stroke-width: 1; }
.fig-svg .fam-len { font-family: var(--mono); font-weight: 600; fill: var(--ink); }
.fig-svg .fam-len.is-pd { fill: var(--ember); }

/* ── cone ── */
.fig-svg path.cone-line { fill: none; }
.fig-svg .cone-edge.is-back { stroke-dasharray: 3 3; stroke-width: 1.1; opacity: .6; }
.fig-svg .cone-side { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; }
.fig-svg .cone-side.is-back { stroke-dasharray: 3 3; stroke-width: 1.5; opacity: .75; }
.fig-svg .cone-frame { fill: none; stroke: var(--line); stroke-width: 1; }
.fig-svg .cone-turn.handle { cursor: ew-resize; }
.fig-svg.geo-cone { touch-action: pan-y pinch-zoom; }   /* sideways drags turn the view; vertical swipes still scroll (Chrome reads touch-action on the <svg> box, not on its shapes) */
.fig-svg .point.is-hidden { fill: var(--surface); stroke: var(--ember); stroke-width: 1.8; }   /* a point the cone hides: a ring */

/* ── apply ── */
/* figures II–IV: fixed points P, V, L, P′; the figure PP′ × PL as a faint panel; the defect's or excess's side in ember */
.fig-svg .ap-dot { fill: var(--ink); stroke: var(--surface); stroke-width: 1.5; }
.fig-svg .ap-figure { fill: var(--ink); fill-opacity: .045; stroke: var(--ink-3); stroke-width: 1; }
.fig-svg .fig-note.ap-defect { fill: var(--ember); font-weight: 650; }

/* ── foci ── */
/* three readouts in a row, the angles on a row of their own */
.fig-host .readouts.foci-readouts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.foci-readouts .readout { padding: .55rem .6rem; }
.foci-readouts .readout.is-span2 { grid-column: span 2; }
.foci-readouts .readout.is-wide { grid-column: 1 / -1; }
.fig-svg .foci-tick { stroke: var(--ink-3); stroke-width: 1; }
.fig-svg .foci-vertex { fill: var(--ink-2); }
.fig-svg .focal.is-back { stroke-dasharray: 4 3; }
.fig-svg .foci-string { fill: none; stroke: var(--teal); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.fig-svg .foci-pin { fill: var(--ink); }
/* the parabola's two equal lengths, PF and AN + ¼ latus rectum */
.fig-svg .foci-band { stroke: var(--ember); stroke-width: 5; opacity: .7; }   /* 3:1 on the surface; the ink PF line stays readable on it */
.fig-svg .foci-end { stroke: var(--ember); stroke-width: 1.6; }
/* the light: faint trails, dashed lines back to F₂, wavefronts, the moment of arrival */
.fig-svg .ray.foci-trail { fill: none; stroke-width: 1; opacity: .4; }
.fig-svg .ray.foci-back { fill: none; stroke-width: 1; opacity: .35; }
.fig-svg .foci-front { fill: none; stroke: var(--gold); stroke-width: 1.4; opacity: .65; }
.fig-svg .foci-flash { fill: none; stroke: var(--gold); stroke-width: 2; }
.geo-foci .seg.is-alt { stroke: var(--ink-3); }
/* the three curves as one row of buttons; Parabola wraps below 360 px */
.foci-modes { display: flex; flex-wrap: wrap; gap: .4rem; }
.foci-modes .btn { padding-inline: .6rem; }

/* ── apply (fixes) ── */
/* an area readout breaks as "18.00" over "sq units", never inside the unit */
.readout .ap-unit { white-space: nowrap; }