:root { --navy: #0b1530; --paper: #f4e9d2; --ink: #d9deea; --muted: #8e98b3; }
* { box-sizing: border-box; }
body { margin: 0; padding: 24px 16px; background: var(--navy); color: var(--ink);
       font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
header, main { max-width: 960px; margin: 0 auto; }
h1 { margin: 0; color: var(--paper); font-size: 2.25rem; letter-spacing: 0.02em; }
.tagline { margin: 4px 0 24px; color: var(--muted); }
.section-nav { max-width: 960px; margin: -16px auto 24px; }
.section-nav ul { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0; padding: 0; list-style: none; }
.section-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--paper); }
.empty { padding: 32px 16px; border: 1px dashed var(--muted); border-radius: 12px; text-align: center; color: var(--muted); }
.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 16px; }
.planet-card { position: relative; padding: 16px; border: 1px solid #24345e; border-radius: 12px; background: #13204a; min-width: 0; }
.planet-card h2 { margin: 0 0 2px; color: var(--paper); font-size: 1.35rem; }
.planet-card .order { margin: 0 0 8px; color: var(--muted); font-size: 0.85rem; }
.planet-card .label { margin: 0; color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
.planet-card .diameter { margin: 0; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.planet-card .earths { margin: 4px 0 0; color: var(--muted); font-size: 0.9rem; }
.source { max-width: 960px; margin: 24px auto 0; color: var(--muted); font-size: 0.9rem; overflow-wrap: anywhere; }
.source a { color: var(--paper); }
.shelf-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 16px; }
.shelf-sort label { font-weight: 600; }
.shelf-sort select, .shelf-sort button { max-width: 100%; padding: 10px 12px; border: 1px solid var(--muted);
                                      border-radius: 6px; font: inherit; }
.shelf-sort select { background: var(--navy); color: var(--paper); }
.shelf-sort button { background: var(--paper); color: var(--navy); cursor: pointer; }
.shelf-sort :focus-visible { outline: 3px solid #b3ceff; outline-offset: 3px; }

.birthday-booth { margin-bottom: 24px; padding: 20px; border: 1px solid #536694; border-radius: 12px; background: #13204a; }
.birthday-booth h2 { margin: 0; color: var(--paper); }
.birthday-booth p { margin: 8px 0 16px; }
.birthday-booth label { display: block; margin-bottom: 6px; font-weight: 600; }
.birthday-controls { display: flex; flex-wrap: wrap; gap: 12px; }
.birthday-controls input, .birthday-controls button { padding: 10px 12px; border: 1px solid #8e98b3; border-radius: 6px; font: inherit; }
.birthday-controls input { width: 10rem; max-width: 100%; background: var(--navy); color: var(--paper); }
.birthday-controls button { background: var(--paper); color: var(--navy); cursor: pointer; }
.birthday-controls :focus-visible { outline: 3px solid #b3ceff; outline-offset: 3px; }
/* One-tap example under the button: reuses the GET path with age=10. */
.birthday-try { display: inline-block; margin-top: 10px; padding: 4px 0; color: var(--paper); overflow-wrap: anywhere; }
.birthday-try:focus-visible { outline: 3px solid #b3ceff; outline-offset: 3px; border-radius: 2px; }
.birthday-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 12px; padding: 0; margin: 20px 0 0; list-style: none; }
.birthday-result { padding: 12px; background: var(--navy); border-radius: 8px; }
.birthday-result > span:first-child { display: block; color: var(--paper); }
.birthday-result strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
#age-error { color: #ffd3c6; }

/* Shelf title sits above the grid, so it never takes a card cell; > keeps it off the card h2s. */
.planet-shelf > h2 { margin: 0 0 4px; color: var(--paper); font-size: 1.35rem; }
.shelf-note { margin: 0 0 16px; color: var(--muted); font-size: 0.9rem; }
/* Cards keep a readable width on large screens. */
.shelf { max-width: 960px; }
/* Phones: two cards per row from ~376px up (390px gives 173px columns); 320px stays one column so text never wraps. */
@media (max-width: 420px) {
  .shelf { grid-template-columns: repeat(auto-fill, minmax(min(100%, 165px), 1fr)); gap: 12px; }
  .planet-card { padding: 12px; }
  .planet-card h2 { font-size: 1.2rem; }
  .planet-card .diameter { font-size: 1.05rem; }
  .planet-card .earths { font-size: 0.8rem; }
}

/* Diameter scale: one linear axis, circle diameter = diameter / largest diameter of a shared square track. */
.diameter-scale { margin: 0 0 32px; padding: 16px; border: 1px solid #24345e; border-radius: 12px; background: #101b40; }
.diameter-scale h2 { margin: 0 0 4px; color: var(--paper); font-size: 1.35rem; }
.scale-note { margin: 0 0 16px; color: var(--muted); font-size: 0.9rem; }
/* One note per view, switched by the same :has() as the chart; display: none keeps the other out of screen readers. */
.scale-note[data-view="bars"] { display: none; }
.diameter-scale:has(#scale-view-bars:checked) .scale-note[data-view="circles"] { display: none; }
.diameter-scale:has(#scale-view-bars:checked) .scale-note[data-view="bars"] { display: block; }
/* View toggle: a borderless fieldset groups the visually hidden radios; the floated legend becomes a flex item
   before the pills, and the row wraps between whole pills (never inside one) when 390px is too narrow.
   Each radio is pinned over its own pill, so focusing it on a tap never scrolls the page somewhere else. */
.scale-views { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
               margin: 0 0 16px; padding: 0; border: 0; min-inline-size: 0; white-space: nowrap; }
.scale-views legend { float: left; margin: 0; padding: 0; color: var(--ink); font-size: 1rem; line-height: 1.5; }
.scale-view-pill { position: relative; display: inline-flex; }
.scale-view { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.scale-view-label { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px;
                    border: 1px solid var(--muted); border-radius: 999px; background: rgb(244 233 210 / 0.06);
                    color: var(--ink); font-size: 1rem; cursor: pointer; }
.scale-view:checked + .scale-view-label { border-color: var(--paper); background: #2c4482; font-weight: 600; }
.scale-view:checked + .scale-view-label::before { content: "\2713"; color: var(--paper); }
.scale-view:focus-visible + .scale-view-label { outline: 2px solid var(--paper); outline-offset: 2px; }

/* Overlapping circles: one square frame, every circle centred on the same bottom baseline, largest behind. */
.scale-rows { position: relative; display: block; aspect-ratio: 1; width: min(100%, 440px); margin: 0 auto;
              padding: 0; list-style: none; container-type: inline-size; }
.scale-track { position: absolute; inset: 0; z-index: var(--z); display: flex; align-items: flex-end;
               justify-content: center; aspect-ratio: 1; pointer-events: none; }
/* Opaque fill in the planet's own colour; the navy rim keeps overlapping circles apart. */
.scale-bar { display: block; aspect-ratio: 1; border: 1.5px solid var(--navy); border-radius: 50%;
             background: var(--planet-surface); }
.scale-leader { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 20; overflow: visible; stroke: var(--muted); stroke-width: 1; }
.scale-label { position: absolute; z-index: 30; display: flex; flex-direction: column; line-height: 1.2;
               font-size: 0.8rem; text-shadow: 0 0 3px var(--navy), 0 0 3px var(--navy); white-space: nowrap;
               padding: 0 4px; border-radius: 4px; background: var(--navy); }
.scale-label--inside { left: 50%; top: calc(100% - var(--y) + 4%); transform: translateX(-50%); align-items: center; }
.scale-label--above { left: 50%; bottom: calc(var(--y) + 1%); transform: translateX(-50%); align-items: center; }
/* Leader labels sit LEADER_STEP (13%) of the frame apart; capping the font at 5cqi keeps two lines (2.4em) under that gap. */
.scale-label--leader { left: 72%; bottom: var(--y); transform: translateY(50%); font-size: min(0.8rem, 5cqi); }
.scale-name { color: var(--paper); font-weight: 600; }
.scale-value { font-variant-numeric: tabular-nums; }

/* Bar graph view: the same rows laid out as horizontal bars on one linear axis.
   The label is placed in the first (9rem) column, right-aligned against its bar, and wraps the km under the name if needed.
   The radios now live inside the fieldset, so :has() on the section does the switching; the trailing
   sibling selectors no longer match and are kept only because tests/regressions/test_overlap_scale.py pins them. */
.diameter-scale:has(#scale-view-bars:checked) .scale-rows,
#scale-view-bars:checked ~ .scale-rows { display: grid; gap: 8px; aspect-ratio: auto; width: auto; }
.diameter-scale:has(#scale-view-bars:checked) .scale-rows .scale-row,
#scale-view-bars:checked ~ .scale-rows .scale-row { display: grid; grid-template-columns: 9rem minmax(0, 1fr);
                                                     align-items: center; gap: 12px; }
.diameter-scale:has(#scale-view-bars:checked) .scale-rows .scale-track,
#scale-view-bars:checked ~ .scale-rows .scale-track { position: static; display: block; aspect-ratio: auto;
                                                      grid-column: 2; grid-row: 1; }
.diameter-scale:has(#scale-view-bars:checked) .scale-rows .scale-bar,
#scale-view-bars:checked ~ .scale-rows .scale-bar { aspect-ratio: auto; block-size: 14px; border-radius: 4px;
                                                    background: var(--planet); }
.diameter-scale:has(#scale-view-bars:checked) .scale-rows .scale-leader,
#scale-view-bars:checked ~ .scale-rows .scale-leader { display: none; }
.diameter-scale:has(#scale-view-bars:checked) .scale-rows .scale-label,
#scale-view-bars:checked ~ .scale-rows .scale-label { position: static; flex-direction: row; gap: 0 8px;
                                                      transform: none; font-size: 0.9rem; grid-column: 1; grid-row: 1;
                                                      flex-wrap: wrap; justify-content: flex-end; min-width: 0;
                                                      padding: 0; background: none; }

/* Rocky planet inset: the same shared-baseline circles, scaled to Earth so the small planets compare.
   Earth's label sits above its rim, so the frame leaves room for two label lines above it. */
.rocky-inset { margin: -16px 0 32px; padding: 16px; border: 1px solid #24345e; border-radius: 12px; background: #101b40; }
main:has(#scale-view-bars:checked) .rocky-inset { display: none; }
.rocky-inset h3 { margin: 0 0 4px; color: var(--paper); font-size: 1.1rem; }
.inset-note { margin: 0; color: var(--muted); font-size: 0.9rem; }
.inset-rows { position: relative; display: block; aspect-ratio: 1; width: min(100%, 320px); margin: 2.5rem auto 0;
              padding: 0; list-style: none; }
.inset-track { position: absolute; inset: 0; z-index: var(--z); display: flex; align-items: flex-end;
               justify-content: center; pointer-events: none; }
.inset-circle { display: block; aspect-ratio: 1; border: 1.5px solid var(--navy); border-radius: 50%;
                background: var(--planet-surface); }
.inset-label { position: absolute; z-index: 30; left: 50%; transform: translateX(-50%); display: flex;
               flex-direction: column; align-items: center; line-height: 1.2; font-size: 0.8rem;
               text-shadow: 0 0 3px var(--navy), 0 0 3px var(--navy); white-space: nowrap;
               padding: 0 4px; border-radius: 4px; background: var(--navy); }
.inset-label--inside { top: calc(100% - var(--y) + 4%); }
.inset-label--above { bottom: calc(var(--y) + 1%); }
.inset-name { color: var(--paper); font-weight: 600; }
.inset-value { font-variant-numeric: tabular-nums; }

.planet-duel { margin-bottom: 24px; padding: 20px; border: 1px solid #536694; border-radius: 12px; background: #13204a; }
.planet-duel h2 { margin: 0 0 12px; color: var(--paper); }
.duel-form { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.duel-field { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; margin: 0; padding: 8px 12px 12px;
              border: 1px solid #536694; border-radius: 8px; }
.duel-field legend { padding: 0 4px; font-weight: 600; }
/* One outlined pill per radio and name, so the pair reads (and wraps) as a single button. */
.duel-radio-pair { display: inline-flex; align-items: center; white-space: nowrap; padding-left: 8px;
                   border: 1px solid var(--muted); border-radius: 999px; background: rgb(244 233 210 / 0.08); }
.duel-radio-pair:has(input:checked) { border-color: var(--paper); }
.duel-field label { padding: 4px 10px 4px 2px; }
.duel-field input:checked + label { color: var(--paper); font-weight: 600; }
.duel-form button { max-width: 100%; padding: 10px 12px; border: 1px solid var(--muted); border-radius: 6px; font: inherit;
                    background: var(--paper); color: var(--navy); cursor: pointer; }
.duel-form :focus-visible { outline: 3px solid #b3ceff; outline-offset: 3px; }
/* Duel drawing: equal columns share one bottom baseline; portrait width = diameter / larger diameter, no floor. */
.duel-portraits { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 520px; margin: 20px auto 0; }
.duel-side { display: flex; flex-direction: column; min-inline-size: 0; margin: 0; text-align: center; }
.duel-frame { display: flex; flex: 1; align-items: flex-end; justify-content: center; }
.duel-portrait { display: block; flex: none; aspect-ratio: 1; border-radius: 50%;
                 background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / 0.5), transparent 55%), var(--planet-surface); }
.duel-side figcaption { margin-top: 8px; }
.duel-side strong { display: block; color: var(--paper); font-size: 1.25rem; }
.duel-ratio { margin: 16px 0 0; color: var(--paper); font-size: 1.5rem; text-align: center; }
.duel-ratio strong { font-size: 2.25rem; font-variant-numeric: tabular-nums; }
#duel-error { color: #ffd3c6; }

.planet-quiz { margin-bottom: 24px; padding: 20px; border: 1px solid #536694; border-radius: 12px; background: #13204a; }
.planet-quiz h2 { margin: 0; color: var(--paper); }
.quiz-round { margin: 8px 0; color: var(--muted); }
.planet-quiz fieldset { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.planet-quiz legend { padding: 0; margin-bottom: 12px; font-weight: 600; }
.planet-quiz button, .quiz-next { display: inline-block; max-width: 100%; margin: 0 8px 8px 0; padding: 10px 16px;
                               border: 1px solid var(--muted); border-radius: 6px; background: var(--paper);
                               color: var(--navy); font: inherit; cursor: pointer; }
.planet-quiz button:disabled { background: #8a96b8; border-color: #8a96b8; cursor: default; }
.planet-quiz button[aria-pressed="true"] { background: var(--paper); border: 3px solid #b3ceff; font-weight: 700; }
.quiz-pick { margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: var(--navy); color: var(--paper);
             font-size: 0.8rem; font-weight: 600; }
.planet-quiz :focus-visible { outline: 3px solid #b3ceff; outline-offset: 3px; }
.quiz-answer { margin: 12px 0; padding: 12px 16px; background: var(--navy); border-radius: 8px; }
.quiz-answer p { margin: 4px 0; }
.quiz-answer ul { padding-left: 20px; font-variant-numeric: tabular-nums; }
.planet-quiz [role="alert"] { color: #ffd3c6; }
/* Quiz drawing: equal columns share one bottom baseline; circle width = diameter / larger diameter, no floor. */
.quiz-scale { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 480px; margin: 4px 0 8px; }
.quiz-side { display: flex; flex-direction: column; min-inline-size: 0; text-align: center; }
.quiz-frame { display: flex; flex: 1; align-items: flex-end; justify-content: center; }
.quiz-planet { display: block; flex: none; aspect-ratio: 1; border-radius: 50%;
               background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / 0.5), transparent 55%), var(--planet-surface); }
/* Before a guess both circles are the same neutral size and colour, so they don't give the answer away. */
.quiz-scale[data-scale="neutral"] .quiz-planet { background: radial-gradient(circle at 35% 30%, #8a96b8, #4a5679 70%); }
.quiz-name { margin-top: 8px; color: var(--paper); font-weight: 600; }
.quiz-scale-note { margin: 0 0 12px; color: var(--muted); font-size: 0.9rem; }

/* Planet colours for every circle (and bar): each one at least 3:1 against the navy panels.
   --planet is the base colour; --planet-surface is the fill, banded for the gas giants. */
[data-planet] { --planet-surface: var(--planet); }
[data-planet="mercury"] { --planet: #a8a29a; }
[data-planet="venus"] { --planet: #e0b96a; }
[data-planet="earth"] { --planet: #4f8fe0; }
[data-planet="mars"] { --planet: #c8553a; }
[data-planet="jupiter"] { --planet: #c9a57a;
                          --planet-surface: repeating-linear-gradient(180deg, #e8d2aa 0 12%, #a8754a 12% 18%, #d9b88a 18% 30%); }
[data-planet="saturn"] { --planet: #d9bf7f;
                         --planet-surface: repeating-linear-gradient(180deg, #e9d6a2 0 20%, #c9aa68 20% 26%, #dcc386 26% 40%); }
[data-planet="uranus"] { --planet: #7fd3dc; }
[data-planet="neptune"] { --planet: #4a6fe3; }