/* Speed of Light lesson. All rules scoped under .sol-* */
.sol-note { font-size: 12px; color: var(--faint); text-align: center; }

/* Earth and Moon to scale */
.sol-space { position: relative; flex: 1; min-height: 0; width: 100%; background: radial-gradient(ellipse at 50% 100%, rgba(61,139,255,.10), transparent 60%); }
.sol-sky { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.sol-path { stroke: rgba(234,227,215,.12); stroke-width: .6; stroke-dasharray: 2 3; }
.sol-earth { fill: #3D8BFF; stroke: #9cc3ff; stroke-width: .8; filter: drop-shadow(0 0 3px rgba(61,139,255,.8)); }
.sol-moon { fill: #e6e1d6; filter: drop-shadow(0 0 2px rgba(255,255,255,.7)); }
/* The beam is a speck at this scale, so in flight it glows and leads with a white-hot head. */
.sol-pulse { stroke: #ff6b5f; stroke-width: 2.6; stroke-linecap: round; filter: drop-shadow(0 0 2px #ff3b30) drop-shadow(0 0 5px rgba(255,90,79,.8)); }
.sol-pulse.sol-gone { opacity: 0; transition: opacity .3s; }
.sol-head { fill: #fff; opacity: 0; filter: drop-shadow(0 0 3px #ff5a4f) drop-shadow(0 0 6px #ff5a4f); transition: opacity .3s; }
.sol-sky.sol-fly .sol-head { opacity: 1; }
.sol-sky:not(.sol-fly) .sol-pulse { opacity: 0; }
.sol-sky.sol-fly .sol-path { stroke: rgba(255,120,110,.3); }
.sol-sky.sol-hit .sol-moon { animation: solFlash .5s ease-out; }
@keyframes solFlash { 50% { fill: #fff; filter: drop-shadow(0 0 6px #ff8a80); } }
.sol-lbl { font: 700 12px var(--sans); fill: var(--dim); }
.sol-timer { position: absolute; right: calc(50% + 14px); top: 90%; transform: translateY(-50%); display: flex; flex-direction: column; padding: 8px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-strong); transition: opacity .4s; }
.sol-timer b { font: 800 26px var(--sans); color: var(--text); font-variant-numeric: tabular-nums; }
.sol-timer span { font: 600 12px var(--sans); color: var(--dim); }
.sol-timer.sol-back { border-color: var(--gold); }
.sol-timer.sol-back b { color: var(--gold); }
.sol-scale { position: absolute; left: 16px; top: 6px; font-size: 12px; color: var(--faint); transition: opacity .4s; }
.sol-space.sol-hide .sol-timer, .sol-space.sol-hide .sol-scale { opacity: 0; }

/* the mirror */
.sol-photo { margin: 0 auto; width: 100%; max-width: 360px; }
.sol-photo img { display: block; width: 100%; border-radius: 14px; }
.sol-photo figcaption { margin-top: 6px; font-size: 12.5px; color: var(--faint); text-align: center; }

/* the sky row */
.sol-skyw { width: 100%; max-width: 360px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sol-row { display: flex; gap: 8px; width: 100%; }
.sol-card { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px 10px; border-radius: 16px; background: var(--surface); border: 2px solid var(--line-strong); font-family: var(--sans); color: var(--text); cursor: pointer; transition: border-color .3s, background .3s; }
.sol-card:disabled { cursor: default; color: var(--text); opacity: 1; }
.sol-ic { width: 56px; height: 56px; }
.sol-ic-moon circle { fill: #e6e1d6; } .sol-ic-moon .sol-cr { fill: #bdb6a8; }
.sol-ic-sun circle { fill: var(--gold); filter: drop-shadow(0 0 6px rgba(252,192,80,.9)); }
.sol-ic-sirius path { fill: #dfe9ff; filter: drop-shadow(0 0 5px rgba(160,190,255,.95)); }
.sol-nm { font-size: 15px; font-weight: 800; }
.sol-far { font-size: 12px; color: var(--dim); text-align: center; }
.sol-age { margin-top: 4px; font-size: 17px; font-weight: 800; color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sol-card.sol-known .sol-age { color: var(--gold); }
.sol-card.sol-timing { border-color: var(--violet-bright); }
.sol-card.sol-timing .sol-age { color: var(--text); }
.sol-card.sol-yes { border-color: var(--mint); background: rgba(63,214,154,.10); }
.sol-card.sol-no { border-color: var(--red); background: rgba(216,85,85,.10); }

/* Rømer */
.sol-rw { width: 100%; max-width: 360px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sol-rbox { position: relative; width: 100%; touch-action: none; }
.sol-rom { display: block; width: 100%; height: auto; }
.sol-orbit { fill: none; stroke: rgba(234,227,215,.22); stroke-width: 1.5; stroke-dasharray: 4 4; }
.sol-ray { stroke: rgba(252,192,80,.55); stroke-width: 2; stroke-dasharray: 2 4; }
.sol-rsun { fill: var(--gold); filter: drop-shadow(0 0 8px rgba(252,192,80,.8)); }
.sol-jup { fill: #d9a066; }
.sol-shadow { fill: rgba(0,0,0,.45); }
.sol-io { fill: #f2e27a; }
.sol-rearth { fill: #3D8BFF; stroke: #fff; stroke-width: 2; }
.sol-rl { font: 700 13px var(--sans); fill: var(--dim); text-anchor: middle; }
.sol-ehandle { position: absolute; width: 52px; height: 52px; margin: -26px 0 0 -26px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: grab; touch-action: none; }
.sol-late { display: flex; flex-direction: column; align-items: center; padding: 6px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-strong); min-width: 190px; }
.sol-late span { font: 600 12.5px var(--sans); color: var(--dim); }
.sol-late b { font: 800 22px var(--sans); color: var(--text); font-variant-numeric: tabular-nums; }
.sol-late.sol-lt { border-color: var(--gold); }
.sol-late.sol-lt b { color: var(--gold); }
.sol-mini { display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* Hopper */
.sol-hop { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.sol-hop img { width: 150px; height: 150px; object-fit: cover; border-radius: 50%; border: 3px solid var(--line-strong); }
.sol-wire { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 40px; width: 100%; }
.sol-wire i { display: block; height: 6px; width: 0; border-radius: 3px; background: linear-gradient(90deg, #c98c1b, var(--gold), #c98c1b); transition: width .9s cubic-bezier(.3,.7,.2,1); }
.sol-hop.sol-cut .sol-wire i { width: 200px; }
.sol-wire b { font: 800 15px var(--sans); color: var(--gold); min-height: 20px; }

/* the Moon drifting */
.sol-dr { width: 100%; max-width: 340px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sol-drs { display: block; width: 100%; height: auto; }
.sol-drs .sol-earth { stroke-width: 2; }
.sol-drs .sol-path { stroke-width: 2; stroke-dasharray: 5 6; stroke: rgba(255,90,79,.45); }
.sol-dmoon { transition: transform 1s cubic-bezier(.3,.7,.2,1); }
.sol-dmoon.sol-away { transform: translateX(26px); }
.sol-lbl2 { font: 700 13px var(--sans); fill: var(--dim); text-anchor: middle; }

@media (max-height: 700px) {
  .sol-hop img { width: 110px; height: 110px; }
  .sol-ic { width: 44px; height: 44px; }
  .sol-card { padding: 8px 4px; }
  .sol-rw { max-width: 300px; }
  .sol-photo { max-width: 320px; }
}