/* Round 31 (Astra review of 26 Sep 2026, lead rulings in
   reports/coszion/2026-09-26_two-charts-astra-review/RULINGS.md). Page-only styles, loaded last. */

/* P12: the birth-time reason is a whole sentence now, so it reads as a small note, not a bracket. */
.r27-could{font-size:13px;line-height:1.4;max-width:52ch}

/* P14: a strongest connection leads with what that one link adds; the whole theme's word shows once,
   under the link that is the main reason for it, and says it is the whole theme across both charts. */
.r31-adds-head{margin:18px 0 0;font-size:12px;letter-spacing:.02em;color:var(--muted)}
.r14-themes.r31-adds{margin-top:6px}
.r31-whole{margin:12px 0 0;padding:2px 0 2px 14px;border-left:2px solid var(--rule);max-width:62ch}
.r31-whole-why{font-size:12px;line-height:1.4;color:var(--muted)}
.r31-whole-say{font-size:14px;line-height:1.45;margin-top:6px;color:var(--ink)}
.r31-whole-name{font-weight:600;margin-right:4px}
.r31-whole-say.warm .r31-whole-name{color:var(--warm)}
.r31-whole-say.demand .r31-whole-name{color:var(--demand)}
.r31-whole-say.neutral .r31-whole-name{color:var(--neutral)}
.r31-whole-say strong{font-weight:600}
.r31-whole .r27-could{margin-top:1px}
@media(max-width:700px){.r31-whole{padding-left:12px}}

/* P18: Davison at desktop width. The wheel and the short reading sit side by side (.r23-plate-grid); the sky
   on a date and where everything sits run the full width below them. The sky's controls share one row and
   its list takes two columns, so the lower page reads across instead of down a narrow column. */
#r23-davison .r31-dav-below{display:grid;gap:36px;margin-top:44px;min-width:0}
@media(min-width:901px){
 #r23-davison .r31-dav-below .r23-sky-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px;align-items:end}
 #r23-davison .r31-dav-below .r23-sky-body>*{grid-column:1/-1}
 #r23-davison .r31-dav-below .r23-sky-body>.r23-when{grid-column:1}
 #r23-davison .r31-dav-below .r23-sky-body>.r23-steps{grid-column:2;grid-template-columns:repeat(4,minmax(0,1fr))}
 #r23-davison .r31-dav-below .r23-sky-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px;align-items:start}
 #r23-davison .r31-dav-below .r23-sky-list li{border-top:1px solid var(--rule)}
 #r23-davison .r31-dav-below .r23-register table{max-width:860px}
}
@media(max-width:700px){#r23-davison .r31-dav-below{margin-top:28px;gap:28px}}

/* P11: what Intensity means, one short line beside the group. */
.r31-means{margin:8px 0 0;font-size:13px;line-height:1.4;color:var(--muted);max-width:40ch}
.print-group small.r31-means{display:block}

/* P17: phones, the settled answer. All three groups (Warmth, Friction, Intensity) reach the first screen at
   390 and 320 wide: the names sit on one line, the gaps close up, the small Rose moves beside the sentence so
   the three groups get the full width, and each group's name and word share a row. The four tabs and their
   descriptions stay where they were, only tighter. Wider screens are untouched. */
@media(max-width:700px){
 body[data-state=settled] .context{padding-top:8px;line-height:1.45}
 body[data-state=settled] .pair-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .22em;font-size:44px;margin:10px 0 12px;line-height:1.1}
 body[data-state=settled] .pair-title .person-b{text-align:left;font-size:1em}
 body[data-state=settled] .pair-title .join{font-size:.55em}
 body[data-state=settled] .pair-title .long-name,body[data-state=settled] .pair-title .person-b.long-name{font-size:.8em}
 /* The fitted size (app.js fitPairNames) can still hold the bigger form's size when the reading settles, because the
    heading's width does not change; capping it here keeps the names still while the moment plays. */
 body[data-state=settled] #pair-title[data-fit] .person-a,body[data-state=settled] #pair-title[data-fit] .person-b{font-size:min(var(--pair-name),44px)}
 body[data-state=settled] #pair-title[data-fit] .join{font-size:min(var(--pair-join),19px)}
 body[data-state=settled] .result-tabs{margin:0 auto 14px}
 body[data-state=settled] .result-tabs button{padding-block:4px 3px;line-height:1.25}
 body[data-state=settled] .r27-answer{grid-template-columns:minmax(0,1fr) 100px;grid-template-areas:"lead rose" "words words" "save save" "rest rest" "more more";column-gap:14px;margin:0 0 26px}
 body[data-state=settled] .r27-answer .r27-lead{font-size:21px;line-height:1.26}
 body[data-state=settled] .r27-answer-rose{margin-top:0;gap:4px;align-self:start}
 body[data-state=settled] .r27-answer-rose-link{font-size:12px;line-height:1.3}
 body[data-state=settled] .r27-answer #picture-resolution{margin-top:12px;padding-top:10px}
 body[data-state=settled] .r27-answer .totals{gap:12px}
 body[data-state=settled] .r27-answer .total{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:baseline}
 body[data-state=settled] .r27-answer .total>*{grid-column:1/-1}
 body[data-state=settled] .r27-answer .total>.register-tag{grid-column:1}
 body[data-state=settled] .r27-answer .total>strong{grid-column:2}
 body[data-state=settled] .r27-answer .total>strong:not([data-near-line]){margin-top:0}
 body[data-state=settled] .r27-answer .total .r30-sit{margin-top:4px}
 body[data-state=settled] .r27-answer .total small{padding-top:0}
 body[data-state=settled] .r27-answer .r31-means{margin-top:2px;font-size:12px}
}
@media(max-width:360px){
 body[data-state=settled] .context{padding-top:6px}
 body[data-state=settled] .pair-title{font-size:38px;margin:6px 0 8px}
 body[data-state=settled] #pair-title[data-fit] .person-a,body[data-state=settled] #pair-title[data-fit] .person-b{font-size:min(var(--pair-name),38px)}
 body[data-state=settled] .result-tabs{margin-bottom:10px}
 body[data-state=settled] .result-tabs button{padding-block:3px 2px}
 body[data-state=settled] .r27-answer{grid-template-columns:minmax(0,1fr) 78px;column-gap:12px}
 body[data-state=settled] .r27-answer .r27-lead{font-size:18px;line-height:1.25}
 body[data-state=settled] .r27-answer .totals{gap:8px}
 body[data-state=settled] .r27-answer .total .r30-say{font-size:14px}
 body[data-state=settled] .r27-answer .total .r30-sit{margin-top:2px}
}

/* P9: the Mirror's words are whole sentences now; between phone and wide desktop they wrap, the comparison on
   its own line under the word (as on a phone), so nothing runs off the side. */
@media(min-width:701px) and (max-width:1250px){
 .mirror-value{white-space:normal;min-width:0}
 .mirror-value .r22-sep{display:none}
 .mirror-value .r22-bs{display:block}
}

/* P9: the Crowd's words are whole sentences now. Wide screens give them a wider column; on a phone they sit
   under the strip at full width instead of in a 112px column. */
@media(min-width:701px){.crowd-row{grid-template-columns:170px minmax(0,1fr) 250px}}
@media(max-width:700px){.crowd-row{grid-template-columns:minmax(0,1fr)}.crowd-percentile{grid-column:1}}
/* P14 on a phone: the names of what a link adds wrap along a line instead of one per row. */
@media(max-width:700px){.r14-themes.r31-adds{display:flex;flex-wrap:wrap;gap:6px 16px}.r14-themes.r31-adds li{display:flex;margin-top:0}}