/* Collision lab. All rules are under .lab. Tokens, scales and radii from DESIGN.md (one accent: affected
   satellites and our own number are --accent; everything else is text or text-3). No glow, no pills. */
.lab { color: var(--text-2); font-family: var(--font-sans); font-size: 16px; line-height: 1.55; }
.lab *, .lab *::before, .lab *::after { box-sizing: border-box; }
.lab-mounted { margin-top: 32px; }
.lab-grid > * { min-width: 0; }
.lab-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.9fr); gap: 32px; align-items: start; }

/* Stage */
.lab-stage { position: relative; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); overflow: hidden; }
.lab-canvas-wrap { position: relative; aspect-ratio: 1 / 1; width: 100%; }
.lab-canvas-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.lab-stage-note { position: absolute; left: 16px; right: 16px; top: 12px; max-width: 52ch; font-size: 13px; line-height: 1.4; color: var(--text-3); pointer-events: none; }
.lab-legend { position: absolute; left: 16px; bottom: 12px; display: flex; gap: 16px; font-size: 12px; line-height: 1.4; color: var(--text-3); pointer-events: none; }
.lab-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
.lab-legend .k-aff i { background: var(--accent); }
.lab-legend .k-oth i { background: var(--text-3); }
.lab-legend .k-frag i { background: var(--text); }
.lab-nogl { display: none; padding: 48px 24px; text-align: center; color: var(--text-3); font-size: 15px; }
.lab.no-webgl .lab-nogl { display: block; }
.lab.no-webgl .lab-canvas-wrap { display: none; }

.lab-scrub { padding: 12px 16px 16px; border-top: 1px solid var(--line); }
.lab-scrub-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; line-height: 1.4; color: var(--text-3); margin-bottom: 4px; }
.lab-scrub-top strong { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.lab-stops { display: flex; justify-content: space-between; font-size: 12px; line-height: 1.4; color: var(--text-3); margin-top: 4px; }
.lab-stops button { background: none; border: 0; color: inherit; font-family: var(--font-sans); font-size: 12px; cursor: pointer; padding: 4px 0; }
.lab-stops button:hover { color: var(--text); }

/* Sliders: a 1px line and a small round thumb */
.lab input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: transparent; margin: 0; cursor: pointer; }
.lab input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: var(--line-2); }
.lab input[type="range"]::-moz-range-track { height: 1px; background: var(--line-2); }
.lab input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--text); border: 0; margin-top: -4px; }
.lab input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--text); border: 0; }

/* Panel */
.lab-panel { display: flex; flex-direction: column; gap: 24px; }
.lab-label { font-size: 12px; font-weight: 600; line-height: 1; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); margin: 0 0 8px; }
.lab-label span { text-transform: none; letter-spacing: 0; font-weight: 400; }

.lab-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lab-preset { text-align: left; background: transparent; border: 1px solid var(--line); border-radius: 8px; color: var(--text); font-family: var(--font-sans); padding: 12px; cursor: pointer; transition: border-color 0.25s, background-color 0.25s; }
.lab-preset:hover { border-color: var(--line-2); }
.lab-preset[aria-pressed="true"] { border-color: var(--accent); background: rgba(140, 200, 255, 0.07); }
.lab-preset b { display: block; font-weight: 500; font-size: 14px; line-height: 1.3; }
.lab-preset span { display: block; font-size: 13px; line-height: 1.4; color: var(--text-3); margin-top: 4px; }

.lab-alt-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.lab-alt-row .lab-label { margin: 0; }
.lab-alt-val { font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 500; color: var(--text); }
.lab-alt-val small { color: var(--text-3); font-size: 13px; font-weight: 400; margin-left: 4px; }
.lab-ticks { position: relative; height: 32px; margin: 0 4px; }
.lab-tick { position: absolute; top: 0; transform: translateX(-50%); text-align: center; font-size: 12px; color: var(--text-3); line-height: 1.4; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lab-tick.is-ref { color: var(--text); }
.lab-tick::before { content: ""; display: block; width: 1px; height: 8px; background: var(--line-2); margin: 0 auto 4px; }
.lab-hint { font-size: 14px; line-height: 1.4; color: var(--text-3); margin: 4px 0 0; min-height: 1.4em; }

.lab-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 4px; padding: 4px; gap: 4px; }
.lab-switch button { background: none; border: 0; color: var(--text-3); font-family: var(--font-sans); font-size: 14px; padding: 8px 12px; border-radius: 4px; cursor: pointer; transition: background-color 0.25s, color 0.25s; }
.lab-switch button[aria-pressed="true"] { background: rgba(140, 200, 255, 0.12); color: var(--text); }
.lab-sky-note { font-size: 13px; line-height: 1.4; color: var(--text-3); margin: 8px 0 0; min-height: 1.4em; }

/* Counters */
.lab-counters { border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); }
.lab-head-count { padding: 16px; border-bottom: 1px solid var(--line); }
.lab-head-count .lab-label { margin-bottom: 8px; }
.lab-big { font-size: clamp(34px, 4.2vw, 54px); line-height: 1; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--accent); }
.lab-big small { font-size: 14px; font-weight: 400; color: var(--text-3); letter-spacing: 0; margin-left: 8px; }
.lab-sub { font-size: 14px; line-height: 1.4; color: var(--text-3); margin-top: 8px; }
.lab-rows { margin: 0; padding: 4px 16px; }
.lab-row { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); }
.lab-row:last-child { border-bottom: 0; }
.lab-row dt { font-size: 14px; color: var(--text-3); line-height: 1.4; display: flex; align-items: baseline; gap: 8px; }
.lab-row dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-size: 16px; color: var(--text); white-space: nowrap; }
.lab-row dd small { color: var(--text-3); font-size: 13px; margin-left: 4px; }
.lab-row dd.na { color: var(--text-3); font-size: 13px; white-space: normal; }

/* Source on hover or focus */
.lab-tip { position: relative; flex: none; width: 16px; height: 16px; padding: 0; border-radius: 50%; border: 1px solid var(--line-2); background: none; color: var(--text-3); font: 600 12px/14px var(--font-sans); text-align: center; cursor: help; }
.lab-tip:hover, .lab-tip:focus-visible { color: var(--text); border-color: var(--accent); }
.lab-tip-body { display: none; position: absolute; z-index: 5; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: min(300px, 70vw); padding: 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-2); color: var(--text-2); font: 400 13px/1.5 var(--font-sans); text-align: left; letter-spacing: 0; text-transform: none; pointer-events: none; }
.lab-tip:hover .lab-tip-body, .lab-tip:focus-visible .lab-tip-body { display: block; }

.lab-honesty { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.5; color: var(--text-3); max-width: 90ch; text-wrap: pretty; }

@media (max-width: 860px) {
  .lab-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .lab-row { flex-wrap: wrap; }
  .lab-row dd { white-space: normal; }
  .lab-tip-body { left: 0; transform: none; }
  .lab-legend { display: none; }
}
/* Touch: every control has a 44 px hit area; the look is unchanged (the tip keeps its 16 px circle) */
@media (max-width: 860px), (pointer: coarse) {
  .lab-tip::after { content: ""; position: absolute; inset: -14px; }
  .lab-stops button { min-height: 44px; min-width: 44px; padding: 0 4px; }
  .lab input[type="range"] { height: 44px; }
  .lab-switch button { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .lab * { transition: none !important; }
}