/* Round 27, Layout lane (owner rule 7ap; review FRESH_EYES_R2 improvements 1, 4, 5 and 7).
   Structure only: where things sit, what folds, what shows in which view. Type sizes and details
   belong to the Craft lane (r27-craft.css, linked after this file), so the sizes here are the
   nearest steps of its scale (12, 14, 16, 19, 24, 32, 48, 72). */

/* ---------------------------------------------------------------- 1. the answer, under the names */
.r27-answer{order:1;display:grid;grid-template-columns:minmax(0,1fr) 232px;grid-template-areas:"lead rose" "words rose" "save rose" "rest rest" "more more";column-gap:56px;align-items:start;margin:-6px 0 34px}
body[data-state=empty] #r27-answer,body[data-state=loading] #r27-answer{display:none}
body[data-r20-view="marks"] #r27-answer,body[data-r23-view="davison"] #r27-answer{display:none!important}
.r27-answer #short-reading{grid-area:lead;order:0;max-width:none;margin:0}
.r27-answer .r27-lead{font-family:var(--display);font-weight:400;font-size:32px;line-height:1.24;letter-spacing:-.012em;color:var(--ink);max-width:25em;text-wrap:pretty}
.r27-answer .r27-lead button{font:inherit;letter-spacing:inherit}
.r27-answer #picture-resolution{grid-area:words;order:0;margin:26px 0 0;padding:18px 0 0;border-top:1px solid var(--rule);border-bottom:0;display:block}
.r27-answer .totals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 32px;align-items:start}
.r27-answer .total{display:block;min-width:0}
.r27-answer .total>span{display:block;font-size:14px}
.r27-answer .total strong{display:block;font-size:24px;line-height:1.15;letter-spacing:-.02em;font-weight:500;margin-top:2px}
.r27-answer .total small{display:block;font-size:12px;line-height:1.45;padding:4px 0 0;color:var(--muted)}
.r27-answer .total-overall{grid-column:1/-1;margin:2px 0 0;padding-top:10px;font-size:14px}
.r27-answer #resolution-sentence{display:block;font-size:14px;line-height:1.5;color:var(--muted);max-width:65ch;margin-top:12px}
.r27-answer #r14-share-top{grid-area:save;order:0;margin:20px 0 0}
.r27-answer .r27-summary-rest{grid-area:rest;margin-top:30px;max-width:65ch}
.r27-answer .r27-summary-rest:empty{display:none}
.r27-answer .r27-rest-text p{font-size:19px;line-height:1.55}
.r27-answer #short-reading-more{grid-area:more;margin:14px 0 0;max-width:65ch}
.r27-answer-rose{grid-area:rose;display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:4px;color:var(--ink);text-decoration:none;border-radius:8px}
.r27-rose-mini{display:block;width:100%;height:auto;aspect-ratio:1}
.r27-rose-mini .rose-petal{cursor:inherit}
.r27-rose-mini .rose-ring{stroke-width:2}
.r27-answer-rose-link{font-size:14px;font-weight:500;border-bottom:1px solid var(--rule);padding-bottom:1px}
.r27-answer-rose:hover .r27-answer-rose-link{border-bottom-color:var(--ink)}
.r27-answer-rose:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
/* The quiet line above the names: one line, no second paragraph. */
body:not([data-state=empty]) .context{padding-top:18px}
/* "Like this:" no longer stands above the reading; its words open the first dotted word's tooltip. */
#r17-near-key{display:none!important}

/* ---------------------------------------------------------------- 2. what each tab is, folded */
.r22-tab-intro.r27-folded{margin:-22px auto 22px;text-align:center}
.r27-whats-this>summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;font-size:14px;font-weight:500;color:var(--muted);list-style:none}
.r27-whats-this>summary::-webkit-details-marker{display:none}
.r27-whats-this>summary::after{content:"+";font-size:16px;line-height:1;color:var(--ink)}
.r27-whats-this[open]>summary::after{content:"\2212"}
.r27-whats-this>summary:hover{color:var(--ink)}
.r27-whats-this[open]{text-align:left}
.r27-whats-this[open]>summary{margin-bottom:6px}

/* ---------------------------------------------------------------- 3. change what counts */
.r17-layers:has(.r27-counts){padding:6px 0;margin:0 0 34px}
.r27-counts>summary{display:flex;align-items:baseline;gap:12px;min-height:44px;padding:10px 0;cursor:pointer;list-style:none}
.r27-counts>summary::-webkit-details-marker{display:none}
.r27-counts>summary::after{content:"+";margin-left:auto;font-size:19px;line-height:1}
.r27-counts[open]>summary::after{content:"\2212"}
.r27-counts-title{font-size:16px;font-weight:600;color:var(--ink)}
.r27-counts-state{font-size:14px;color:var(--muted)}
.r27-counts-lede{font-size:14px;color:var(--muted);max-width:65ch;margin:0 0 12px}
.r27-counts .r17-switch-list{grid-template-columns:minmax(0,1fr);gap:6px;max-width:720px;padding-bottom:10px}
.r27-counts .r17-line{max-width:65ch}

/* ---------------------------------------------------------------- 4. one themes block, four views */
.r27-themes{display:block}
.r27-themes-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px 40px;padding:0 0 22px;border-bottom:1px solid var(--rule);margin-bottom:28px}
.r27-themes-head h2{font-family:var(--display);font-size:48px;line-height:1.05;letter-spacing:-.03em;font-weight:500}
.r27-see-as{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.r27-see-label{font-size:14px;color:var(--muted)}
.r27-see-tabs{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border:1px solid var(--rule);border-radius:999px}
.r27-see-tabs button{min-height:44px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:var(--ink);font:500 14px/1.2 var(--body);cursor:pointer}
.r27-see-tabs button[aria-selected="true"]{background:var(--ink);color:var(--bg)}
.r27-see-tabs button:not([aria-selected="true"]):hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}
.r27-see-tabs button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.r27-see-tabs button[hidden]{display:none}
.r27-themes>[role=tabpanel]{display:none}
.r27-themes[data-see=rose]>#rose-panel,.r27-themes[data-see=mirror]>#mirror-panel,.r27-themes[data-see=crowd]>#crowd-panel,.r27-themes[data-see=list]>#r27-list-panel,.r27-themes[data-see=all]>[role=tabpanel]{display:block}
.r27-themes>#mirror-panel[hidden]{display:none!important}
.r27-themes>[role=tabpanel]{border-top:0;padding-top:0}
.r27-list-panel #meter-register{display:block;margin:0}
.r27-list-panel #meters,.r27-themes #personal{margin:18px 0 0;padding:0;border:0}
.r27-fold-lede{max-width:65ch;margin:12px 0 16px}

/* ---------------------------------------------------------------- 5. stage instructions only with the stage */
body[data-geometry="false"] #reading-panel:not(.active),body[data-geometry="false"] #playback,body[data-geometry="false"] #estimate-controls{display:none!important}

/* ---------------------------------------------------------------- the one link back to the answer */
.r27-back{margin:0 0 36px}

@media(max-width:700px){
 .r27-answer{grid-template-columns:minmax(0,1fr) 108px;grid-template-areas:"lead lead" "words rose" "save save" "rest rest" "more more";column-gap:16px;margin:-4px 0 26px}
 .r27-answer .r27-lead{font-size:24px;line-height:1.28}
 .r27-answer #picture-resolution{margin-top:18px;padding-top:14px}
 .r27-answer .totals{grid-template-columns:minmax(0,1fr);gap:12px}
 .r27-answer .total strong{font-size:19px}
 .r27-answer .total small{font-size:12px}
 .r27-answer #resolution-sentence{display:none}
 .r27-answer-rose{margin-top:18px;gap:6px}
 .r27-answer-rose-link{font-size:12px;text-align:center}
 .r27-answer .r27-rest-text p{font-size:16px}
 .r22-tab-intro.r27-folded{margin:-10px auto 16px}
 .r27-themes-head h2{font-size:32px}
 .r27-see-as{width:100%}
 .r27-see-tabs{width:100%;display:grid;grid-template-columns:1fr 1fr;border-radius:18px}
 .r27-see-tabs button{padding:0 10px}
}
@media print{.r27-answer-rose,.r27-see-as,.r27-back{display:none!important}}
/* Inside the block, each view's own title sits one step below the block's title. */
.r27-themes>[role=tabpanel]>header h2{font-size:32px;letter-spacing:-.02em}
.r17-layers:has(.r27-counts){border-bottom:0}

/* ---------------------------------------------------------------- 6. the spine (Imp-5, P1-7) */
.r27-spine{position:fixed;z-index:60;left:0;right:0;top:0;display:flex;align-items:center;gap:24px;min-height:52px;padding:4px 44px;background:var(--bg);border-bottom:1px solid var(--rule)}
.r27-spine[hidden]{display:none}
.r27-spine-names{margin:0;font-family:var(--display);font-size:16px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:24ch;color:var(--ink)}
.r27-spine-tabs{display:flex;gap:2px}
.r27-spine-tabs button{min-height:44px;padding:0 12px;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;color:var(--muted);font:500 14px/1 var(--body);cursor:pointer}
.r27-spine-tabs button:hover{color:var(--ink)}
.r27-spine-tabs button[aria-current]{color:var(--ink);border-bottom-color:var(--ink)}
.r27-spine-tabs button[hidden]{display:none}
.r27-spine-tabs button:disabled{opacity:.45;cursor:default}
.r27-spine-view{display:none}
.r27-spine-jump{margin-left:auto}
.r27-spine select{min-height:44px;max-width:100%;padding:0 30px 0 12px;border:1px solid var(--rule);border-radius:999px;background:var(--bg);color:var(--ink);font:500 14px/1 var(--body);cursor:pointer}
.r27-spine select:focus-visible,.r27-spine button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
body.r27-spine-on :is(main h2,#r27-answer,#r27-themes){scroll-margin-top:72px}
@media(max-width:700px){
 .r27-spine{top:auto;bottom:0;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--rule);border-bottom:0;box-shadow:0 -10px 30px #0000001a}
 .r27-spine-names,.r27-spine-tabs{display:none}
 .r27-spine-view,.r27-spine-jump{display:block;flex:1 1 0;min-width:0;margin:0}
 .r27-spine select{width:100%}
 body.r27-spine-on{padding-bottom:72px}
 body.r27-spine-on :is(main h2,#r27-answer,#r27-themes){scroll-margin-top:16px}
 body:has(#reading-panel.active) .r27-spine,body:has(.result-toolbar.open) .r27-spine{display:none}
}
@media print{.r27-spine{display:none!important}}

/* ---------------------------------------------------------------- 7. Davison and the sky: the wheel stays in view (P2-13) */
@media(min-width:901px){.r23-plate-grid>:first-child{position:sticky;top:64px}}

/* ---------------------------------------------------------------- 8. Composite cards, folded like Synastry's (P1-6, Check-L1) */
.r27-card-time{font-size:14px;color:var(--muted);margin:6px 0 0}
.r27-composite-full .effect-line{border-top:0;padding:10px 0}
.r27-composite-full .effect-line+.effect-line{border-top:1px solid var(--rule)}
.complete-contact>.voice-emphasis{font-size:14px;color:var(--muted);margin:10px 0 0}


/* Round 27 (P1-13, verify): the words a birth-time range could read sit right under the word they belong to
   (Mirror rows, Crowd rows, the phone list under the Rose, the wheel's two highlights, Where you sit, the Mirror table). */
.r27-could{display:block;margin-top:2px;font-size:12px;line-height:1.3;font-weight:400;color:var(--muted);white-space:normal;letter-spacing:0;text-transform:none}
.mirror-side.a .mirror-value .r27-could{text-align:right}
@media(max-width:700px){.mirror-side.a .mirror-value .r27-could{text-align:left}}
/* The Crowd: the range as a short bar behind the bold dot. */
.crowd-pair-range{stroke:currentColor;stroke-opacity:.4;stroke-width:8px;stroke-linecap:round;fill:none}
/* Mirror: beside the word on wide screens; on phones under the whole person row, where there is room. */
.mirror-side>.r27-could-phone{display:none}
@media(max-width:700px){.mirror-value .r27-could-wide{display:none}.mirror-side>.r27-could-phone{display:block;grid-column:2/-1;order:4;margin-top:0}}
/* The pair's dot is drawn as a round cap so it stays round when the strip stretches; a thin halo in the page colour. */
.crowd-pair-dot{fill:none;stroke:currentColor;stroke-width:11px;stroke-linecap:round}
.crowd-pair-halo{fill:none;stroke:var(--bg);stroke-width:15px;stroke-linecap:round}
.r14-where-bands .r27-could,#highlights .r27-could{font-family:var(--body);font-size:14px;font-weight:400;line-height:1.35}
/* Verify r27 (P2-14 follow-up): the tabs now say which is open with aria-selected, so the open tab keeps its look. */
.result-tabs button[aria-selected="true"]{background:transparent;color:var(--ink);border-bottom-color:var(--ink)}
.result-tabs button[aria-selected="true"] .r22-tab-line{color:var(--ink)}

/* ---------------------------------------------------------------- Polish r27 (item 3): the four tabs on the first screen */
/* The tab row sits right under the names on every tab (it already did on Marks and Davison), so the first screen
   says which view is open and that there are four; the answer follows it. The slim bar still takes over on scroll. */
.result-tabs{order:1;margin:-8px auto 42px}
@media(max-width:700px){
 .result-tabs{margin:-6px auto 28px}
 .result-tabs button{min-height:44px;padding-block:6px 5px;gap:2px}
}

/* ---------------------------------------------------------------- Polish r27 (item 4): this pair first on a phone */
/* Davison: "What shapes it most" comes before the wheel; Marks: "What it's like for ..." comes before each wheel.
   Nothing moves on wider screens, where they already sit beside or near the top. */
@media(max-width:700px){
 #r23-davison .r23-plate-grid>.r23-side{display:contents}
 #r23-davison .r23-plate-grid .r27-davison-reading{order:-1;margin-bottom:0}
 .r20-marks-person{display:flex;flex-direction:column}
 .r20-marks-person>.r20-marks-sub{order:1;margin-top:10px}
 .r20-marks-person>.r20-marks-list{order:2}
 .r20-marks-person>.r20-marks-wheel-box{order:3}
 .r20-marks-person>.r20-marks-note{order:4}
}