/* Round 16: whole-page refinement (owner rules 7y and 7ac: "smooth, coherent, aligned").
   Loaded last. Earlier rules stay in place; each block below says what it corrects. */

/* 1. Section openings. The five strongest connections now open like the Rose, the Mirror,
      the Crowd, Where you sit and Your mix: the same title size, the note on the right at the
      title's baseline, and no orphaned last word in any section note. */
.r14-strongest>.r14-head{display:flex;align-items:baseline;justify-content:space-between;gap:28px;padding:34px 0 26px}
.r14-strongest>.r14-head h2{font:500 clamp(42px,5vw,72px)/1.08 var(--display);letter-spacing:-.055em;max-width:none}
.r14-strongest>.r14-head p{max-width:38ch}
.result-visual>header p,.r14-head p,.r14-mix-note,.r14-where-read p{text-wrap:pretty}
.result-visual>header h2,.r14-head h2,.r14-strong-title{text-wrap:balance}
@media(max-width:700px){
 .r14-strongest>.r14-head{display:block;padding:26px 0 14px}
 .r14-strongest>.r14-head h2{font-size:clamp(34px,10vw,46px);line-height:1.15}
 .r14-strongest>.r14-head p{text-align:left;margin-top:8px}
}

/* 2. Strongest connections: the theme list keeps the sentence's reading width, so the eye
      does not travel across the whole page and back; "and 3 more" sits on the same indent. */
.r14-themes{max-width:62ch}
.r14-themes li.r14-theme-more{padding-left:14px}

/* 3. The Mirror: the theme name sits on the same centre line as its two bars (an empty note
      line under the name used to lift it about 8 px above the bars). */
.mirror-meter-name{position:relative}
.mirror-meter-name small:empty{display:none}
.mirror-meter-name small{position:absolute;left:0;right:0;top:100%;margin-top:1px}

/* 4. The meter list: a band word ("in the usual range") stays on one line beside its theme
      instead of breaking after "usual" in a narrow 12-character column. */
html:not([data-owner-check]) .gauge-value{max-width:none;white-space:nowrap}

/* 5. Your mix: every row stays on one line at every width. A row with more planets than its
      column can hold draws its squares a little smaller instead of dropping one onto a
      second line (the Together row did this at 390 px). */
.r14-pips{flex-wrap:nowrap;align-items:center}
.r14-pip{flex:0 1 auto;height:auto;aspect-ratio:1;min-width:3px}
@media(max-width:700px){
 .r14-mix-cell{padding-right:6px!important}
 .r14-mix-row.is-together .r14-pips{gap:1.5px}
 .r14-mix-row.is-together .r14-pip{width:5px}
}

/* 6. Tap a planet: "Read" is a row action beside the connection's name, not the last item of
      a wrapping line of themes. */
.r14-focus-list li{position:relative;padding-right:60px}
.r14-focus-themes .r14-link{position:absolute;right:0;top:4px;margin:0}

/* 7. Text buttons line up with the page's left edge (their inner padding used to push the
      first word 5 to 10 px in from every heading and paragraph above them). */
.rail-actions{margin-left:-5px}
.play-buttons{margin-left:-10px}
@media(max-width:700px){.play-buttons{margin-left:-5px}}
#estimate-controls input[type=checkbox]{margin-left:0}

/* 8. The large names: the right-hand name no longer overhangs the page edge (its tight
      letter spacing pushed the last letter about 10 px past the rule above it). */
.pair-title .person-b{padding-right:.07em}

/* 9. The skip link stays fully hidden until a keyboard reaches it (full-page captures could
      show it parked above the screen). It remains focusable. */
.skip-link:not(:focus){clip-path:inset(0 0 100% 0)}

/* 10. The entry form: the two preview wheels use the whole width, one above each person's
       form, instead of sitting in the left 60% beside an empty column kept for the result's
       reading panel. */
body:is([data-state=empty],[data-state=loading]) .geometry-view{grid-template-columns:minmax(0,1fr)}
body:is([data-state=empty],[data-state=loading]) .geometry-view>.stage{grid-column:1/-1}
body:is([data-state=empty],[data-state=loading]) #r14-planets{display:none}

/* 11. The full reading: conditions in a row share one dashed rule between them, instead of
       two rules with an empty band (each box drew its own top and bottom line). */
.condition+.condition{border-top:0;margin-top:-14px}

/* Round 19 (H2): the all-in-one number has its own named line under the three group totals. */
.totals{flex-wrap:wrap}.total-overall{flex:1 0 100%;margin:4px 0 0;padding-top:12px;border-top:1px solid var(--rule);font-size:14px;color:var(--ink)}.total-overall span{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:11px;margin-right:6px}.total-overall strong{font-weight:500;font-size:16px}.total-overall small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
/* Round 19 (improvement 1): folds. One control, the title and a short note; everything stays reachable. */
details.fold{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:18px 0}details.fold>summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;cursor:pointer;padding:14px 0;min-height:44px;list-style:none}details.fold>summary::-webkit-details-marker{display:none}details.fold>summary::before{content:'+';font:500 18px/1 var(--body);width:14px;color:var(--muted)}details.fold[open]>summary::before{content:'−'}.fold-title{font-weight:500}.fold-note{color:var(--muted);font-size:13px}details.fold>summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px}details.fold[open]{padding-bottom:12px}
.short-reading-pointer{margin:0 0 8px;font-size:14px}.short-reading-pointer a{color:var(--muted)}
/* Round 19 (improvement 1): every connection card stays open to read (the owner's copy check opens each
   one), so on a phone the cards are set tighter instead: smaller heading, the angle and its distance on
   one line, a lighter reading size. Nothing is hidden. */
@media(max-width:700px){.contact-card{padding:18px 0}.contact-heading h3{font-size:19px;line-height:1.2}.contact-pair{gap:8px}.body-label{gap:6px}.body-label svg{width:18px;height:18px}.body-label small{font-size:11px;margin-top:2px}.contact-heading .aspect-label{display:inline;margin:0;font-size:13px}.contact-heading .orb{display:inline;font-size:12px}.contact-heading .orb::before{content:' · '}.contact-heading .aspect-label+.orb{margin-left:0}.contact-heading h3+.aspect-label{display:inline-block;margin-top:8px}.contact-reading{margin-top:10px}.contact-reading>p{font-size:16px;line-height:1.55;margin-bottom:10px}.contact-reading .voice-emphasis{margin:8px 0;font-size:13px;line-height:1.5}.contact-card .condition,.contact-card .reading-condition{margin:6px 0;font-size:14px;line-height:1.5}.complete-contact>summary{min-height:44px;display:flex;align-items:center}}

/* Owner, 24 Sep: the map's corner names and "the usual range" sat under the crowd dots and were hard to read. They now sit on a small plate of the page colour, above the dots, in ink. */
.r14-corner,.r14-usual-label{z-index:1;background:color-mix(in srgb,var(--bg) 92%,transparent);color:var(--ink);padding:3px 7px;border-radius:3px;font-weight:500;box-shadow:0 0 0 1px color-mix(in srgb,var(--rule) 60%,transparent)}
.r14-corner.tl{left:8px;top:8px}.r14-corner.tr{right:8px;top:8px}.r14-corner.bl{left:8px;bottom:8px}.r14-corner.br{right:8px;bottom:8px}
.r14-usual-label{margin:6px 0 0 6px;padding:3px 7px}