/* Round 20: what leads each theme, planet condition, classical notes, the finer points and
   "Each of you in it". Loaded last; reads the Paper and Carbon tokens only. */

/* ---------------------------------------------------------------- what leads a theme */
.r20-led{margin:6px 0 10px;font-size:14px;line-height:1.45;color:var(--muted);max-width:62ch;text-wrap:pretty}
.r20-led a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule);text-decoration-thickness:1px;text-underline-offset:4px;cursor:pointer}
.r20-led a:hover{text-decoration-color:currentColor}
.r20-led a:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
.r20-led-total{display:block;margin-top:4px;color:var(--muted)}
.r14-themes .r20-leads{color:var(--muted);font-size:12px;font-style:italic;white-space:nowrap}
.r14-themes .r20-leads::before{content:" · ";font-style:normal}

/* ---------------------------------------------------------------- notes in a connection card */
.r20-notes{list-style:none;margin:12px 0 0;padding:0;max-width:62ch}
.r20-note{position:relative;padding-left:18px;margin-top:6px;font-size:13.5px;line-height:1.5;color:var(--muted);text-wrap:pretty}
.r20-note::before{content:"";position:absolute;left:1px;top:.5em;width:7px;height:7px;border:1.3px solid currentColor;border-radius:50%;opacity:.8}
.r20-note[data-kind="runs_both_ways"]::before{border-radius:0;width:9px;height:0;border-width:1.3px 0 0;top:.75em;left:0}
.r14-strong .r20-notes{margin-top:10px}

/* ---------------------------------------------------------------- planet condition */
.r20-condition{margin:6px 0 14px;font-size:14px;line-height:1.45;color:var(--muted);max-width:52ch}

/* ---------------------------------------------------------------- also worth noting */
.r20-also{order:2;padding:6px 0 34px}
.r20-also[hidden]{display:none}
.r20-also-head{display:flex;align-items:baseline;justify-content:space-between;gap:28px;padding:22px 0 14px;border-top:1px solid var(--rule)}
.r20-also-head h2{font:500 clamp(24px,2.2vw,32px)/1.12 var(--display);letter-spacing:-.04em}
.r20-also-head p{max-width:44ch;color:var(--muted);font-size:14px;text-align:right;text-wrap:pretty}
.r20-also-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px 34px}
.r20-also-item{padding-top:12px;border-top:1px solid var(--rule)}
.r20-also-name{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.r20-also-name span{letter-spacing:.02em;text-transform:none;font-weight:500}
.r20-also-words{margin-top:6px;font-size:15px;line-height:1.5;max-width:52ch;text-wrap:pretty}
@media(max-width:700px){.r20-also-head{display:block;padding:20px 0 12px}.r20-also-head p{text-align:left;margin-top:6px}.r20-also-list{grid-template-columns:1fr;gap:14px}}

/* ---------------------------------------------------------------- each of you in it */
.r20-marks{order:2;padding:0 0 48px}
.r20-marks[hidden]{display:none}
.r20-marks-head{display:flex;align-items:baseline;justify-content:space-between;gap:28px;padding:4px 0 26px;border-bottom:1px solid var(--rule)}
.r20-marks-head h2{font:500 clamp(40px,5vw,68px)/1.06 var(--display);letter-spacing:-.055em}
.r20-marks-head p{max-width:40ch;color:var(--muted);font-size:15px;line-height:1.5;text-align:right;text-wrap:pretty}
.r20-marks-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px}
.r20-marks-person{padding-top:30px;min-width:0}
.r20-marks-person+.r20-marks-person{border-left:1px solid var(--rule);padding-left:56px;margin-left:-56px}
.r20-marks-name{font:500 clamp(34px,3.4vw,50px)/1.05 var(--display);letter-spacing:-.05em}
.r20-marks-person.side-a .r20-marks-name{color:var(--pa)}
.r20-marks-person.side-b .r20-marks-name{color:var(--pb)}
.r20-marks-wheel-box{max-width:470px;margin:18px auto 8px}
.r20-marks-wheel{display:block;width:100%;height:auto;overflow:visible}
.r20-marks-wheel.side-a{color:var(--pa)}
.r20-marks-wheel.side-b{color:var(--pb)}

.r20-marks-wheel .is-emphasis .planet{fill:currentColor}
.r20-marks-wheel .is-emphasis .composite-body-label{font-weight:600}
.r20-marks-sub{margin-top:18px;font:600 11px/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.r20-marks-list{list-style:none;margin:10px 0 0;padding:0;counter-reset:mark}
.r20-marks-list li{counter-increment:mark;position:relative;padding:14px 0 14px 34px;border-top:1px solid var(--rule)}
.r20-marks-list li::before{content:counter(mark,decimal-leading-zero);position:absolute;left:0;top:15px;font:500 12px/1 var(--body);color:var(--muted);font-variant-numeric:tabular-nums}
.r20-marks-tag{font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--muted)}
.r20-marks-words{margin-top:4px;font-size:16px;line-height:1.5;max-width:48ch;text-wrap:pretty}
.r20-marks-note{margin-top:14px;font-size:14px;line-height:1.5;color:var(--muted);max-width:52ch}
@media(max-width:900px){.r20-marks-grid{grid-template-columns:1fr}.r20-marks-person+.r20-marks-person{border-left:0;border-top:1px solid var(--rule);padding-left:0;margin-left:0;margin-top:30px}}
@media(max-width:700px){
 .r20-marks-head{display:block;padding:0 0 18px}.r20-marks-head p{text-align:left;margin-top:8px}
 .r20-marks-person{padding-top:24px}.r20-marks-wheel-box{margin:12px auto 4px}
 .r20-marks-list li{padding-left:28px}
 /* three tabs on a phone: tighter spacing so all three fit on one line */
 .result-tabs{gap:10px}.result-tabs button{padding-inline:6px;font-size:12.5px}
}

/* In "Each of you in it" the scored sections step aside; nothing is removed. */
body[data-r20-view="marks"] :is(#r17-layers,#short-reading,#short-reading-more,#r17-near-key,#r14-share-top,#r14-strongest,#r20-also,#r17-seeks,#picture,#picture-resolution,#estimate-controls,#r14-share-end,#playback,#result-toolbar,#long-reading){display:none!important}

@media(max-width:360px){.result-tabs{gap:4px}.result-tabs button{padding-inline:4px;font-size:12px}}

@media print{body[data-r20-view="marks"] .r20-marks{display:block}.r20-also{break-inside:avoid}}