/* 2026-09-22. Local review of the 20 September transcript (Brian, Aasim, Jules).
   Loaded after assets/css/ux-d97.css. styles/demo.css and styles/folio.css stay byte-identical.
   Sizes and gaps come from the shared tokens only (--fs-*, --gap-*, and the --sp-* and --seam scale below). */

/* FACE LOADING: a face that is not ready yet is held hidden, its entrance paused, the scale waiting. */
#stage-rate.r0920-loading .lens .face-img-wrap img { opacity: 0; animation: none; }
#stage-rate.r0920-loading #scaleRow button { pointer-events: none; }
#stage-rate #scaleRow { transition: opacity 160ms ease 0s; }
#stage-rate.r0920-loading #scaleRow { opacity: .5; transition-delay: 150ms; }
.lens.r0920-waiting .lens-ring { animation: r0920Pulse 1.2s ease-in-out 250ms infinite; }
@keyframes r0920Pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.r0920-lens-note { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sp-1) var(--sp-2);
  margin: var(--sp-2) auto 0; font-size: var(--fs-label, 1rem); color: var(--fg2); text-align: center; }
.r0920-lens-note[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .lens.r0920-waiting .lens-ring { animation: none; opacity: .6; }
  #stage-rate #scaleRow { transition: none; }
}

/* LIGHT-THEME WELCOME ANIMATION. "The animation in the background does not exist on light mode ... it's just
   too bright." overhaul.js mountWarp() draws pale gold with additive "lighter" compositing, so on cream the
   strongest streak measured 1.53:1 against the page and the average 1.13:1. In the light theme only, the ink
   is taken to 60% brightness and multiplied into the cream: strongest streak 2.22:1, average 1.26:1, while
   the headline keeps 8.2:1 and the subtitle 4.2:1 over the darkest moving pixel (a darker ink, 45%, drops the
   subtitle to 3.3:1). The dark theme is untouched. */
:root[data-theme="light"] #heroCanvas,
:root[data-theme="light"] #entryCanvas { mix-blend-mode: multiply; filter: brightness(.6); }

/* CENTRING. "Everything is off-centre" / "this is not centred". Above 1050px ux-d97.css gives the four stages
   the 1200px site track (min(70vw, 1200px)) with margin-inline:auto, inside <main>, whose content box is capped
   at 1020px (demo.css: max-width 1100px less 40px padding a side). A block wider than its container drops auto
   margins and overflows to the right only, so the whole page sat 27.5 to 35px right of centre at 1536 and 90
   to 97.5px at 1920, and exactly centred at 1280, where the track is narrower than <main>. Equal margins of
   (100% - track) / 2 go equally negative when the track is wider, so each stage centres on the header's line. */
@media (min-width: 1051px) {
  .ux-reading-page main > #stage-hero, .ux-reading-page main > #stage-entry,
  .ux-reading-page main > #stage-rate, .ux-reading-page main > #stage-readout {
    margin-left: calc((100% - var(--page-track)) / 2); margin-right: calc((100% - var(--page-track)) / 2); }
}

/* SPACING, THE WHOLE RESULTS PAGE. "We need a standardisation when it comes to the spaces between one element
   and the other" / "it doesn't make sense that the show the detail is stuck next to the line separating one
   another" / "between one sub-block and the other ... there should be a standardised space".
   One scale, used everywhere on the readout: 8, 16, 24, 32, 48 and 64px. Measured before this block: inside
   cards 24px with 18px and 16px outliers; between cards 0px, the D96 hairline never painted (an !important
   border reset on every card beats it), so each "Show the detail" button sat flush on the next section; page
   level nine different gaps at 375px (3, 6, 16, 24, 28, 32, 34, 64, 65).
   - inside a card: one 24px gap between visible elements (flex gap skips hidden ones, so a hidden heading
     never leaves a double space);
   - card to card: the hairline restored, with the same step above and below it (32px phone, 48px desktop);
   - the page's own blocks: 8px title to subtitle, 24px to the faces, 48px between major blocks. */
:root { --sp-1: .5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem; --sp-6: 3rem; --sp-8: 4rem;
  --r-rule: color-mix(in srgb, var(--fg) 16%, transparent); }
#readoutBody .folio-ch:not(.folio-cover) .ro-card { display: flex; flex-direction: column; gap: var(--sp-3); }
#readoutBody .folio-ch:not(.folio-cover) .ro-card > * { margin-top: 0; margin-bottom: 0; }
#readoutBody .folio-ch:not(.folio-cover) .ro-card + .ro-card {
  margin-top: var(--ro-gap); padding-top: var(--ro-gap);
  border-top: 1px solid var(--r-rule) !important; }
#readoutBody .folio-ch:not(.folio-cover) .ro-card { margin-bottom: 0; }
/* Major seams: one value between every pair of major blocks (the faces, each chapter, each invitation, the
   keepsake, the story cards), 48px on phones and 64px from 900px, where --ro-gap also steps up. A chapter
   carries half the seam as its own padding and an invitation half as its margin, so every seam is equal. */
:root { --seam: var(--sp-6); }
@media (min-width: 900px) { :root { --seam: var(--sp-8); } }
#stage-readout > h2 { margin-bottom: 0; }
#stage-readout > #readoutSub { margin-top: var(--sp-1); margin-bottom: 0; }
#stage-readout > .eye-print-faces { margin-top: var(--sp-3); margin-bottom: 0; }
#stage-readout > #recoveryHolder { margin-top: var(--seam); margin-bottom: 0; }
#stage-readout > #readoutBody { margin-top: calc(var(--seam) / 2); }
#readoutBody > .folio-ch { margin-block: 0; padding-block: calc(var(--seam) / 2); }
#readoutBody > .ux-invitation { margin-block: calc(var(--seam) / 2); }
#readoutBody > .folio-ch + .folio-ch { margin-top: 0; }
#stage-readout > .readout-actions { margin-top: calc(var(--seam) / 2); }
#share-section { margin-top: var(--seam); }
#share-section > .kicker { margin-bottom: 0; }
#share-section > .ux-card-colour { margin-top: var(--sp-2); margin-bottom: 0; }
#share-section > #share-holder { margin-top: var(--sp-3); margin-bottom: 0; }
#share-section > .ux-keep-actions { margin-top: var(--sp-3); margin-bottom: 0; }
#share-section > .ux-stories { margin-top: var(--seam); padding-bottom: 0; }
#stage-readout > .ux-invitation { margin-block: var(--seam) 0; }
#stage-readout > .readout-disclaimer { margin-top: var(--sp-4); }
/* the cover's padding is forced by ux-d97.css (.folio-cover {padding:3rem 0 !important}); the story block's
   top rule sits in the middle of its seam, like every card rule */
#readoutBody > .folio-ch.folio-cover { padding-block: calc(var(--seam) / 2) !important; margin-top: 0; }
#share-section > .ux-stories { margin-top: calc(var(--seam) / 2); padding-top: calc(var(--seam) / 2); }
#stage-readout > .readout-actions { margin-bottom: 0; }
#share-section { padding-block: 0; margin-bottom: 0; }

/* BUTTONS: ONE FAMILY, EVERY PAGE. "The buttons are weird ... if you go into join our testing pool and look at
   the notify me button, it's a different type of button compared to the See Your Eye thing."
   The family is the Notify Me button as it is live on Join Our Testing Pool (harmoniaengine.com/p2p.html,
   measured 2026-09-22, p2p.html .btn-notify): a gold gradient at 135deg (#D4A853 to #E8C97A light, #F0C86E to
   #F5D98A dark), maroon-deep #5C1A1B text in both themes, DM Sans 16px at 600, normal case, no tracking, 4px
   corners, 48px high, no glow, the gradient turning round on hover. Its outlined partner is the same site's
   .btn-secondary (styles.css): ink in a 2px maroon outline on light, a faint gold tint in a 2px gold outline on
   dark, filling solid on hover. The marketing pages already use this family (.btn-primary, .btn-secondary,
   .btn-notify) and nothing here touches them. Brought into it: the See Your Eye and Terms buttons (demo.css .btn:
   flat gold, capitals tracked .12em, 3px, glow, shine sweep), the header pair, the Contact and Partnerships
   submit and enquiry links (D97's 8px maroon and outline), the 21 September feedback panels, and every control
   this layer adds. Toggles are outlined; the pressed one takes the gradient. */
:root { --btn-radius: 4px; --btn-h: 48px; --btn-h-compact: 40px; --btn-pad: .85rem 1.8rem; --btn-pad-compact: .5rem 1rem;
  --field-pad: .75rem 1rem; --r-card: 12px;
  --btn-fill: linear-gradient(135deg, #D4A853, #E8C97A); --btn-fill-hover: linear-gradient(135deg, #E8C97A, #D4A853);
  --btn-ink: #5C1A1B; --btn-line: #722F37; --btn2-ink: var(--navy, var(--fg, #120810)); --btn2-bg: transparent;
  --btn2-hover-bg: #722F37; --btn2-hover-ink: #FFFFFF; }
:root[data-theme="dark"] { --btn-fill: linear-gradient(135deg, #F0C86E, #F5D98A); --btn-fill-hover: linear-gradient(135deg, #F5D98A, #F0C86E);
  --btn-line: #F0C86E; --btn2-ink: #F0C86E; --btn2-bg: linear-gradient(135deg, rgba(240, 200, 110, .15), rgba(245, 217, 138, .1));
  --btn2-hover-bg: #F0C86E; --btn2-hover-ink: #12090A; }
/* shape and type, every member */
.btn:not(.btn-primary):not(.btn-secondary), .regal-form .submit-btn, .regal-form .btn-regal-submit,
[data-jev-participant] button, [data-feedback-slot] button, .epf-toggle, details.ro-dd > summary,
.folio-finer .finer-detail > summary, [data-jev-participant] > summary, [data-feedback-slot] > summary,
.ux-features button, .ux-contact-paths a, .folio-cover .ro-scroll-hint, .r0920-seg button, .r0920-vote button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1);
  min-height: var(--btn-h); padding: var(--btn-pad); border-radius: var(--btn-radius);
  font-family: 'DM Sans', system-ui, sans-serif; font-size: var(--fs-label, 1rem); font-weight: 600;
  line-height: 1.2; letter-spacing: normal; text-transform: none; text-align: center; text-decoration: none;
  text-shadow: none; box-shadow: none; cursor: pointer; }
.btn:not(.btn-primary):not(.btn-secondary)::before { display: none; }
/* filled: the Notify Me look (:root lifts the two form submits past ux-d97.css [data-theme="dark"] .regal-form
   .submit-btn {color:#12090a}). It carries a transparent 2px border, as the Home hero pair's primary does
   (styles.css .hero-ctas .btn-primary), so a filled and an outlined button in one row are the same height */
.btn:not(.btn-primary):not(.btn-secondary):not(.btn-ghost):not(.btn-danger):not(:disabled),
:root .regal-form .submit-btn, :root .regal-form .btn-regal-submit, [data-jev-participant] button, [data-feedback-slot] button {
  border: 2px solid transparent; background: var(--btn-fill) border-box; color: var(--btn-ink); }
/* outlined: the .btn-secondary look */
.btn-ghost, .epf-toggle, details.ro-dd > summary, .folio-finer .finer-detail > summary,
[data-jev-participant] > summary, [data-feedback-slot] > summary, .ux-features button, .ux-contact-paths a,
.folio-cover .ro-scroll-hint, .r0920-seg button, .r0920-vote button {
  border: 2px solid var(--btn-line); background: var(--btn2-bg); color: var(--btn2-ink); opacity: 1; }
.btn:not(.btn-primary):not(.btn-secondary):not(.btn-ghost):not(.btn-danger):not(:disabled):hover,
:root .regal-form .submit-btn:hover, :root .regal-form .btn-regal-submit:hover,
[data-jev-participant] button:hover, [data-feedback-slot] button:hover {
  background: var(--btn-fill-hover) border-box; color: var(--btn-ink); box-shadow: none; transform: none; }
.btn-ghost:not(:disabled):hover, .epf-toggle:not(:disabled):hover, details.ro-dd > summary:hover,
.folio-finer .finer-detail > summary:hover, [data-jev-participant] > summary:hover, [data-feedback-slot] > summary:hover,
.ux-features button:hover, .ux-contact-paths a:hover, .folio-cover .ro-scroll-hint:hover, .r0920-seg button:hover, .r0920-vote button:hover {
  background: var(--btn2-hover-bg); border-color: var(--btn2-hover-bg); color: var(--btn2-hover-ink); transform: none; }
.btn:not(.btn-primary):not(.btn-secondary):hover, .btn:not(.btn-primary):not(.btn-secondary):active,
.epf-toggle:hover, .epf-toggle:active { transform: none; }
/* a toggle group's pressed option takes the gradient; its 2px border stays, transparent, so nothing shifts */
/* (:root lifts the first past ux-d97.css's [data-theme="dark"] .ux-features button[aria-pressed="true"] {color:#12090a}) */
:root .ux-features button[aria-pressed="true"], .r0920-seg button[aria-pressed="true"], .r0920-vote button[aria-pressed="true"] {
  border-color: transparent; background: var(--btn-fill) border-box; color: var(--btn-ink); }
:root .ux-features button[aria-pressed="true"]:hover, .r0920-seg button[aria-pressed="true"]:hover, .r0920-vote button[aria-pressed="true"]:hover {
  border-color: transparent; background: var(--btn-fill-hover) border-box; color: var(--btn-ink); }
.epf-toggle::before { color: inherit; }
:where(.btn, .epf-toggle, .ux-features button, .ux-contact-paths a, .r0920-seg button, .r0920-vote button, summary, .regal-form button):focus-visible {
  outline: 2px solid var(--btn-line); outline-offset: 3px; }
/* text links: underlined, 600, normal case, in the outlined text colour. The hero's returning-visitor link
   (demo.css .recover-toggle) was in tracked capitals, the See Your Eye style this round leaves behind. */
.recover-toggle { letter-spacing: normal; text-transform: none; color: var(--btn2-ink); }
.recover-toggle:hover { color: var(--btn-line); }
/* disabled keeps the product's solid state (PART-D96: no opacity on text), in the family's shape */
.btn:not(.btn-primary):not(.btn-secondary):disabled { border: 2px solid var(--fg4); background: var(--surface2); color: var(--fg3); cursor: not-allowed; }
/* the header pair: the same two looks at the bar's compact height (HEADER JOURNEYS, below) */
nav.site-header .nav-action #nav-local-network, nav.site-header .nav-action #nav-p2p {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--btn-h-compact);
  padding: var(--btn-pad-compact); border-radius: var(--btn-radius); font-family: 'DM Sans', system-ui, sans-serif;
  font-size: var(--fs-label, 1rem); font-weight: 600; line-height: 1.2; letter-spacing: normal; text-transform: none;
  text-shadow: none; }

/* TITLES AND NAMES: THE TEAM PAGE'S FACE. "The font for the buttons are still the same and also the same for the
   other parts ... same for the welcome page" / "'Built by People Who Believe in Connection' in the team page, THIS IS
   THE FONT ... or look at the font for the names for the team" (Aasim, 22 September). Measured on harmoniaengine.com:
   the Team heading and the team names are Cormorant Garamond at 700 (42.8px and 32.1px, gold); the roles, the bios,
   the nav and every button on the site, Notify Me included, are DM Sans. See Your Eye set its titles in Cormorant at
   300 to 600 (the card titles at 400) and a dozen sub-titles in DM Sans, and its italics were slanted by the browser
   (the real italic is now loaded: assets/fonts/cormorant-italic.css). Every title and name here is Cormorant Garamond
   700; body text, form labels, buttons and the small capital eyebrows stay DM Sans, as on the Team page. The rating
   question (.scale-q) stays DM Sans: a prompt, not a title, and PART-D96 moved it there on purpose. */
#stage-hero > h1, #stage-entry .ln-cover-title, #stage-entry h2.ln-reveal, #stage-readout > h2,
#stage-readout #readoutBody .folio-real-title, #stage-readout #readoutBody .folio-eyebrow, #readoutBody .ro-head > h3, #stage-readout .hero-arch .kicker,
#share-section > .kicker, #ux-stories > h2 {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; }
/* the sub-titles that were DM Sans take the face at the lead size */
#stage-readout .epf-pole-label, #readoutBody h4.dd-h, #readoutBody .bg-group-heading > h4, #readoutBody .finer-axis-title,
#readoutBody .finer-group > h4, #readoutBody .consensus-question, #stage-entry .ln-card > summary {
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: var(--fs-lead, 1.5rem); font-weight: 700;
  line-height: 1.25; letter-spacing: normal; }

/* THE 21 SEPTEMBER FEEDBACK PANELS. js/output-feedback.js builds them from bare elements with inline styles,
   so they rendered in browser defaults (square grey buttons, a system textarea): "certain blocks don't fit".
   They take the readout's box, type and controls; the inline margins and padding need !important to yield. */
[data-jev-participant], [data-feedback-slot] {
  margin: var(--sp-3) 0 0 !important; padding: var(--sp-3) !important; text-align: left !important;
  border: 1px solid var(--r-rule); border-radius: var(--r-card); background: transparent;
  font-family: 'DM Sans', system-ui, sans-serif; font-size: var(--fs-body, 1.1875rem); color: var(--fg); }
[data-jev-participant] > summary, [data-feedback-slot] > summary { list-style: none; }
[data-jev-participant] > summary::-webkit-details-marker, [data-feedback-slot] > summary::-webkit-details-marker { display: none; }
[data-jev-participant][open] > summary, [data-feedback-slot][open] > summary { margin-bottom: var(--sp-3); }
[data-jev-participant] p, [data-feedback-slot] p { margin: 0 0 var(--sp-2); color: var(--fg2); font-size: var(--fs-label, 1rem); line-height: 1.5; }
[data-jev-participant] label, [data-feedback-slot] label { display: block; font-size: var(--fs-label, 1rem); font-weight: 600; color: var(--fg); }
[data-jev-participant] textarea, [data-feedback-slot] select {
  display: block; width: 100%; margin-top: var(--sp-1); padding: var(--field-pad); border: 1px solid var(--border2);
  border-radius: var(--btn-radius); background: var(--surface, transparent); color: var(--fg);
  font-family: inherit; font-size: var(--fs-body, 1.1875rem); line-height: 1.5; }
[data-jev-participant] button, [data-feedback-slot] button { margin-top: var(--sp-3); }
[data-jev-participant] [role="status"]:empty, [data-feedback-slot] [role="status"]:empty { display: none; }
details.ro-dd > summary, .folio-finer .finer-detail > summary,
[data-jev-participant] > summary, [data-feedback-slot] > summary { display: flex; width: fit-content; }
/* two earlier rules outrank the family by specificity: .folio-ch button {font-size:19px} (ux-d97.css) and
   #share-section .btn / .readout-actions .btn {min-height:46px} (demo.css) */
.folio-ch .epf-toggle, .folio-ch .ux-features button { font-size: var(--fs-label, 1rem); }
#stage-readout .btn, #stage-readout .btn-ghost { min-height: var(--btn-h); }
/* two tight rows keep their narrower padding: the code form's two buttons share 22rem, the resume note's two share 480px */
.rc-row .btn:not(.btn-primary) { padding-inline: var(--sp-2); }
.resume-note .btn:not(.btn-primary) { padding: var(--sp-1) var(--sp-3); }

/* MOBILE READING. "In the mobile version the sidebar disappeared" / "it's a lot of scrolling through a bunch of
   text, like reading an essay". Measured at 375px: the chapter rail is display:none (ux-d97.css, D98, because the
   vertical rail covered copy), so a phone has no way to see where it is or jump; and cards open with their method
   note before the chart. Evidence: chaptered navigation and a lead sentence beside its chart beat a long scroll
   (NN/g in-page navigation 2023; Zhi et al. 2019; Baymard highlights). Here, on phones only:
   - the same rail, restyled as a slim I to V bar under the header; it keeps its own jump and active-chapter
     logic, appears when scrolling up inside the chapters and hides when scrolling down (NN/g sticky headers);
   - the scale and radar cards show the chart straight after their lead sentence, the method note below it as a
     caption. The Backgrounds note stays above its chart because its words say "the markers below". */
@media (max-width: 700px) {
  #stage-readout #roRail.r0920-bar { display: flex !important; position: fixed; inset: var(--site-nav-h, 57px) 0 auto 0;
    width: auto; height: auto; z-index: 999; flex-direction: row; align-items: stretch; justify-content: space-between;
    gap: 0; padding: 0 var(--sp-2); margin: 0; transform: none; opacity: 1;
    background: color-mix(in srgb, var(--bg) 94%, transparent); border-bottom: 1px solid var(--r-rule);
    transition: transform .25s ease, opacity .25s ease; }
  #stage-readout #roRail.r0920-bar.r0920-away { transform: translateY(-120%); opacity: 0; pointer-events: none; }
  #stage-readout #roRail.r0920-bar .ro-rail-tick { flex: 1 1 0; min-height: 44px; display: flex; align-items: center;
    justify-content: center; padding: 0; margin: 0; background: none; border: 0; border-bottom: 2px solid transparent;
    border-radius: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: var(--fs-body, 1.1875rem);
    color: var(--fg2); cursor: pointer; }
  #stage-readout #roRail.r0920-bar .ro-rail-tick::before { content: attr(data-numeral); }
  #stage-readout #roRail.r0920-bar .ro-rail-dot, #stage-readout #roRail.r0920-bar .ro-rail-label { display: none !important; }
  #stage-readout #roRail.r0920-bar .ro-rail-tick.is-active { color: var(--fg); font-weight: 600; border-bottom-color: var(--btn-line); }
  #readoutBody .ro-scale-card > p.soft, #readoutBody .ro-card > p.soft.ro-radar-guide {
    order: 1; margin-top: calc(-1 * var(--sp-1)); font-size: var(--fs-label, 1rem); font-style: italic; color: var(--fg2); }
  #readoutBody .ro-scale-card > details.ro-dd, #readoutBody .ro-card:has(> p.ro-radar-guide) > details.ro-dd { order: 2; }
}
@media (max-width: 700px) and (prefers-reduced-motion: reduce) { #stage-readout #roRail.r0920-bar { transition: none; } }

/* 2026-09-23. The code value sits directly under HARMONIA; the copy control and explanation follow it. */
#stage-readout > #recoveryHolder.show {
  display: flex !important; flex-direction: column; align-items: center;
  width: 100%; max-width: none; margin: var(--sp-1) auto 0 !important;
  padding: 0 !important; border: 0; border-radius: 0; background: none; text-align: center; animation: none;
}
#stage-readout > #recoveryHolder.show > #recoveryCode {
  width: 100%; margin: 0; padding: 0; border: 0; background: none;
  line-height: 1.2; white-space: nowrap; word-break: normal;
}
#stage-readout > #recoveryHolder.show > #copyRecoveryBtn { display: block; max-width: var(--ro-measure); margin: var(--sp-3) auto 0; }
#stage-readout > #recoveryHolder + .r0920-code-note { max-width: 36rem; margin: var(--sp-2) auto 0;
  font-size: var(--fs-label, 1rem); line-height: 1.5; color: var(--fg2); text-align: center; }
#stage-readout > #recoveryHolder:not(.show) + .r0920-code-note { display: none; }
#stage-readout > [data-jev-participant] { max-width: var(--ro-measure); margin-inline: auto !important; }
#stage-readout > .r0920-ffb { max-width: var(--ro-measure); margin: var(--seam) auto 0; }
#stage-readout > [data-feedback-slot] { max-width: var(--ro-measure); margin: var(--sp-3) auto 0 !important; }
#stage-readout > .r0920-code-note + [data-feedback-slot],
#stage-readout > .r0920-ffb + [data-feedback-slot] { margin-top: var(--seam) !important; }
#stage-readout > [data-feedback-slot] > p + button { margin-top: var(--sp-1); }
#stage-readout:has(> .r0920-ffb:not([hidden])) > [data-feedback-slot] { display: none !important; }
@media (max-width: 700px) {
  #stage-readout > .r0920-ffb + #readoutSub,
  #stage-readout > [data-feedback-slot] + #readoutSub,
  #stage-readout > .r0920-code-note + #readoutSub { margin-top: var(--seam); }
  #stage-readout #recoveryCode { font-size: var(--fs-body); letter-spacing: 0; }
}

/* FOLIO I, ONE CONTROL. "In the first one I don't think we should have a show the detail, because the first one is
   kind of empty and we should continue like that ... if you want to put the full reading, it should be a bit more
   prominent. I don't think keep and share this eye is relevant here." The cover carried three: Show the detail
   (the same method note Folio II's consensus card carries), the Keep and share link (D101), and "The full reading"
   as a 16px hint that was not a control at all. The hint is now the cover's one button and takes you to Folio II. */
.folio-cover details.ro-dd, #ux-keep-link { display: none !important; }
/* its look is the outlined button (BUTTONS, above); here only its place */
.folio-cover .ro-scroll-hint { display: flex; flex-direction: row; width: fit-content; margin: var(--sp-3) auto 0; }
.folio-cover .ro-scroll-hint:focus-visible { outline: 2px solid var(--btn-line); outline-offset: 3px; }
.folio-cover .ro-scroll-hint .arr { display: inline; line-height: 1.2; }

/* FOLIO IV, BACKGROUNDS. "The white is not aligned with the other one because there is an additional line, how
   many faces you gave each score. Please delete this line" / "way too many buttons" / "sort your average should be
   put on the top of the list and not on the bottom". The label is emitted for every group and hidden for all but
   the first, so the first group's box sat a line lower than its neighbours; the bars already carry their counts for
   screen readers and the lead sentence explains them. The order toggle sat under the chart and named the option you
   are NOT on; it is now a two-option control above the chart, the current view pressed, the default listed first. */
#readoutBody .bg-distribution-label { display: none; }
#readoutBody .bg-sortbar > .bg-sort { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#readoutBody .r0920-order { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); margin: 0 0 var(--sp-3); }
#readoutBody .r0920-order > span { font-size: var(--fs-label, 1rem); font-weight: 600; color: var(--fg2); }
/* two outlined buttons of the family, the current view filled (BUTTONS, above), at the compact height */
#readoutBody .r0920-order .r0920-seg { display: inline-flex; flex-wrap: wrap; gap: var(--sp-1); }
#readoutBody .r0920-order .r0920-seg button { min-height: var(--btn-h-compact); padding: var(--btn-pad-compact); }
#readoutBody .bg-sortbar > .bg-sort { min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; height: 1px !important; }

/* YOU AGAINST THE CROWD ON PHONES (built in ux-r0920.js): labels as 16px text, bars full width */
.r0920-pb { display: none; }
@media (max-width: 700px) {
  #readoutBody figure svg.fig-pb { display: none; }
  .r0920-pb { display: flex; flex-direction: column; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
  .r0920-pb li { display: flex; flex-direction: column; gap: var(--sp-1); }
  .r0920-pb-lab { display: flex; justify-content: space-between; gap: var(--sp-2); margin: 0;
    font-size: var(--fs-label, 1rem); line-height: 1.3; color: var(--fg); }
  .r0920-pb-lab span:first-child { font-weight: 600; }
  .r0920-pb-lab span:last-child { color: var(--fg2); font-variant-numeric: tabular-nums; }
  .r0920-pb-bar { display: block; height: 10px; width: var(--w); min-width: 2px; border-radius: 999px; }
  .r0920-you { background: var(--c-you, #D4A853); }
  .r0920-crowd { background: var(--c-crowd, #9A3D48); }
}
/* row labels at the body size, the same as the Backgrounds group names, which was the comparison in the review */
@media (max-width: 700px) { .folio-ch .r0920-pb-lab { font-size: var(--fs-body, 1.1875rem); } }

/* CHAPTER ENDS. "Between one folio and the other ... a mini logo, exactly the one that you have here ... just to
   signify the change between one and the other. Something very minimal." Each chapter now closes on the Harmonia
   mark, 24px at 40% opacity, centred in the chapter seam (half the seam above, half below), the same knot the header
   uses, turned gold in the dark theme by the header's own filter. Decorative only: a pseudo-element with no text, so
   assistive technology skips it (WCAG 1.4.11 exempts pure decoration). Static: moving backgrounds were removed from
   the readout in D104 and this does not bring one back. */
#readoutBody > .folio-ch { padding-bottom: 0; }
#readoutBody > .folio-ch::after { content: ""; display: block; width: 24px; height: 24px;
  margin: calc(var(--seam) / 2) auto 0; background: url("../images/harmonia-logo.png") center / contain no-repeat;
  opacity: .4; pointer-events: none; }
:root[data-theme="dark"] #readoutBody > .folio-ch::after { filter: invert(1) hue-rotate(180deg) brightness(1.1) contrast(.95); opacity: .5; }
#readoutBody > .folio-ch.folio-cover { padding-bottom: 0 !important; }
#readoutBody > .folio-ch + [data-jev-participant] { margin-top: calc(var(--seam) / 2) !important; }

/* STORY CARDS ON PHONES. "The history card in the mobile version should be put in full size, one on top of the other
   and not two by line ... or presented as a slider" (Brian); "would it not be better off as a slide instead?" (Aasim).
   At 375px the four 9:16 cards sat two to a row, each about 163 by 291px. Below 700px they become one swipeable row:
   each card 84% wide so the next one peeks in (NN/g: a half-visible item is the strongest swipe cue), snapping one
   card at a time, with Previous, a live "n of 4" and Next beneath. The anti-carousel evidence is about auto-rotating
   promotional carousels; these are the reader's own cards and never move on their own. Desktop keeps two per row. */
.r0920-story-nav { display: none; }
@media (max-width: 700px) {
  #share-section .ux-story-grid { display: flex; grid-template-columns: none; gap: var(--sp-2); max-width: none;
    margin-inline: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scrollbar-width: none; padding-bottom: var(--sp-1); }
  #share-section .ux-story-grid::-webkit-scrollbar { display: none; }
  #share-section .ux-story-grid > figure { flex: 0 0 84%; scroll-snap-align: start; scroll-snap-stop: always; }
  #share-section .ux-story-grid > figure img { content-visibility: auto; }
  .r0920-story-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-2); }
  .r0920-story-nav .r0920-story-count { font-size: var(--fs-label, 1rem); color: var(--fg2); font-variant-numeric: tabular-nums; }
  #share-section .r0920-story-nav .btn { min-height: var(--btn-h-compact); padding: var(--btn-pad-compact); }
}
@media (max-width: 700px) and (prefers-reduced-motion: reduce) { #share-section .ux-story-grid { scroll-behavior: auto; } }

/* HEADER JOURNEYS. "I'm not feeling the two buttons at the very top ... it pops out to me too much" (Aasim); Brian
   agreed it needs fixing, while keeping the nudge towards See Your Eye that PART-D106 added because people joined
   the pool before seeing their eye. D106 made See Your Eye 19px, 600, capitals and tracked, beside a 16px outlined
   Join: size and case did the nudging. Here both are the Notify Me family at the bar's compact height (16px at
   600, normal case, 4px), and the fill alone carries the emphasis (Material: filled over outlined): See Your Eye is
   filled and Join Our Testing Pool outlined, for every visitor (Aasim, 22 September; an earlier draft swapped them
   once a reading existed). Needs Avery's and Brian's word before it ships: it reverses part of D106. */
nav.site-header .nav-action #nav-local-network { border: 2px solid transparent; background: var(--btn-fill) border-box; color: var(--btn-ink); }
nav.site-header .nav-action #nav-p2p { border: 2px solid var(--btn-line); background: var(--btn2-bg); color: var(--btn2-ink); }
nav.site-header .nav-action #nav-local-network:hover { background: var(--btn-fill-hover) border-box; color: var(--btn-ink); }
nav.site-header .nav-action #nav-p2p:hover { background: var(--btn2-hover-bg); border-color: var(--btn2-hover-bg); color: var(--btn2-hover-ink); }
/* 2026-10-04: open Pool navigation retains the normal outlined hover. */

/* FOUR INVITATIONS, FOUR JOBS (built in ux-r0920.js). The three that are not Join share the invitation's box but no
   filled button; the vote uses the rating scale's own shape (numbers with the end labels beneath). */
#readoutBody > .r0920-cta { margin-block: calc(var(--seam) / 2); padding: var(--sp-3); border: 1px solid var(--r-rule);
  border-radius: var(--r-card); background: transparent; }
#readoutBody > .r0920-cta[hidden] { display: none; }
.r0920-cta p { margin: 0; }
.r0920-cta .r0920-cta-head { display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-size: var(--fs-lead, 1.5rem);
  font-weight: 700; line-height: 1.25; color: var(--fg); }
.r0920-cta .r0920-cta-line { display: block; margin-top: var(--sp-1); font-size: var(--fs-label, 1rem); color: var(--fg2); }
.r0920-cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); }
.r0920-vote { display: grid; grid-template-columns: repeat(5, minmax(44px, 1fr)); gap: var(--sp-1); margin-top: var(--sp-2); max-width: 420px; }
/* the numbers are outlined buttons of the family, the chosen one filled (BUTTONS, above) */
.r0920-vote button { padding: 0; font-size: var(--fs-body, 1.1875rem); }
.r0920-vote-ends { display: flex; justify-content: space-between; max-width: 420px; margin-top: var(--sp-1);
  font-size: var(--fs-label, 1rem); color: var(--fg2); }
.r0920-cta .r0920-cta-thanks { margin-top: var(--sp-2); font-size: var(--fs-label, 1rem); color: var(--fg); }
.r0920-cta .r0920-cta-thanks:empty { display: none; }
.r0920-cta [data-jev-participant] { margin-top: var(--sp-3) !important; }

/* SHARING (built in ux-r0920.js): one card at a time on phones, and a post link for X */
.r0920-share-card { margin-top: var(--sp-2); }
.r0920-share-card > .btn { width: 100%; }
.r0920-share-fallback { margin-top: var(--sp-2); font-size: var(--fs-label, 1rem); color: var(--fg2); text-align: left; }
.r0920-share-fallback[hidden] { display: none; }
.r0920-share-fallback p { margin: 0 0 var(--sp-2); }
.r0920-share-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ux-keep-actions .r0920-x { display: inline-flex; align-items: center; min-height: var(--btn-h); padding: 0 var(--sp-1);
  font-size: var(--fs-label, 1rem); font-weight: 600; color: var(--btn2-ink); text-decoration: underline; text-underline-offset: .2em; }
.ux-keep-actions .r0920-x:hover { color: var(--btn-line); }
.r0920-story-nav, .r0920-share-card { max-width: 100%; }
@media (min-width: 701px) { .r0920-share-card { display: none; } }
@media (max-width: 700px) { #share-section [data-inline-share] { display: none; } }

/* WHAT IT IS. "Maybe there is something that we should explain in the page here, See Your Eye" / early users "asked
   me what it even is". The hero read "What draws your eye?" and "Read my eye", naming neither the action nor the
   result (NN/g: a coined term needs familiar words beside it; unexplained purpose loses people within ten seconds).
   It now says what you do and what you get, with a three-step strip in place of "Rate faces -> meet your eye", and
   the button uses the product's own name. Returning visitors see "Welcome back." without the strip, like the line. */
#stage-hero .r0920-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2) var(--sp-3); max-width: 760px; margin: var(--sp-3) auto var(--sp-4); padding: 0; text-align: left; }
#stage-hero .r0920-steps li { display: flex; align-items: baseline; gap: var(--sp-1); margin: 0;
  font-size: var(--fs-label, 1rem); line-height: 1.45; color: var(--fg2); }
#stage-hero .r0920-steps li span { flex: 0 0 auto; font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--fs-lead, 1.5rem); line-height: 1; color: var(--gold-text, var(--gold2)); }
#stage-hero:has(#beginBtn[hidden]) .r0920-steps { display: none; }
@media (max-width: 700px) { #stage-hero .r0920-steps { grid-template-columns: 1fr; max-width: 22rem; } }
/* the phone menu sets its links in 1.6rem Cormorant; the two journeys are buttons, so they take the family's large
   size (19px, as the Home hero pair; 48px high), still outranking the serif links around them */
@media (max-width: 1024px) {
  nav.site-header .nav-links.mobile-open .nav-action #nav-local-network,
  nav.site-header .nav-links.mobile-open .nav-action #nav-p2p {
    font-family: 'DM Sans', system-ui, sans-serif; font-size: var(--fs-body, 1.1875rem); min-height: var(--btn-h); justify-content: center;
    text-transform: none; letter-spacing: normal; }   /* site-header.css sets capitals here at (1,3,1) */
}

/* FACE FEEDBACK, ONE STEP AT A TIME (built in ux-r0920.js over js/output-feedback.js): one box under the faces in
   place of the four stacked panels, which stay in the page, hidden, as the record. The numbers are the vote's. */
.eye-print-faces.r0920-ffb-on > [data-feedback-slot] { display: none !important; }
.r0920-ffb { margin: var(--sp-3) 0 0; padding: var(--sp-3); border: 1px solid var(--r-rule); border-radius: var(--r-card); text-align: left; }
.r0920-ffb[hidden] { display: none; }
.r0920-ffb > * { margin: 0; }
.r0920-ffb .r0920-ffb-sub { margin-top: var(--sp-1); font-size: var(--fs-label, 1rem); line-height: 1.5; color: var(--fg2); }
.r0920-ffb .r0920-ffb-face { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--r-rule); }
.r0920-ffb .r0920-ffb-q { margin-top: var(--sp-3); }
.r0920-ffb .r0920-ffb-q > p { margin: 0; font-size: var(--fs-body, 1.1875rem); line-height: 1.4; color: var(--fg); }
.r0920-ffb .r0920-vote { margin-top: var(--sp-2); }
.r0920-vote.is-7 { grid-template-columns: repeat(7, minmax(32px, 1fr)); max-width: 540px; }
@media (max-width: 400px) { .r0920-ffb .r0920-vote.is-7 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.r0920-vote-ends.is-7 { max-width: 540px; }
.r0920-ffb .r0920-ffb-skip { display: inline-flex; align-items: center; min-height: var(--btn-h-compact); margin-top: var(--sp-1); padding: 0;
  border: 0; background: none; font-family: 'DM Sans', system-ui, sans-serif; font-size: var(--fs-label, 1rem); font-weight: 600;
  color: var(--btn2-ink); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.r0920-ffb .r0920-ffb-skip:hover { color: var(--btn-line); }
.r0920-ffb .r0920-ffb-skip:focus-visible { outline: 2px solid var(--btn-line); outline-offset: 3px; }
.r0920-ffb .r0920-ffb-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--r-rule); }
.r0920-ffb .r0920-ffb-end > p { margin: 0; font-size: var(--fs-body, 1.1875rem); color: var(--fg); }
.r0920-ffb .r0920-ffb-status { margin-top: var(--sp-2); font-size: var(--fs-label, 1rem); color: var(--fg2); }
.r0920-ffb .r0920-ffb-status:empty { display: none; }
.r0920-cta .r0920-cta-faces { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--r-rule); }
.r0920-cta .r0920-cta-faces[hidden] { display: none; }
.r0920-cta .r0920-cta-faces .r0920-cta-line { margin: 0; flex: 1 1 18rem; }

/* the feedback box's title and face names: the title face (TITLES AND NAMES, above); names in the pole labels' gold italic */
.r0920-ffb .r0920-ffb-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: var(--fs-lead, 1.5rem); font-weight: 700; line-height: 1.25; color: var(--fg); }
.r0920-ffb .r0920-ffb-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: var(--fs-lead, 1.5rem); font-weight: 700; font-style: italic;
  line-height: 1.25; color: var(--gold-text, var(--fg)); }

/* NESTED SPACING, EVERY SEE YOUR EYE PAGE. "The spacing thing was not fully fixed, like specifically Folio II in this
   part: 'The top of the arc means no clear pattern' ... double check everything" (Aasim, 22 September). The first
   pass set the gaps between cards and inside each card's top level; the blocks nested inside a card kept their own
   margins, sized in ems (9.6, 12.8, 20.8, 27.2px) or at zero. Measured on the readout with every detail open: 43
   distinct off-scale gaps, among them Folio II's note touching the arc's labels (0px) and its question 72px under
   the card title. The same scale applies at every depth:
     8px   a title to its subtitle, a label to its control, rows of a list, lines of a legend;
     16px  paragraph to paragraph, and between the parts of one figure;
     24px  between a figure's groups, and a group heading after other content. */

/* the faces block: label, faces, the swap button, the note, the credit and its wordmark */
#stage-readout .epf-card > .epf-pole-label { margin: 0 0 var(--sp-2); }
/* 2026-09-22. Align the generated-faces progress with the shared spacing scale. */
#stage-readout .eye-print-faces > .epf-progress { margin-top: var(--sp-2); gap: var(--sp-1); }
#stage-readout .eye-print-faces > .epf-controls { margin-top: var(--sp-3); }
#stage-readout .eye-print-faces > .epf-note { margin: var(--sp-2) 0 0; }
#stage-readout .eye-print-faces > .epf-credit { margin: var(--sp-2) 0 0; }
#stage-readout .eye-print-faces > .epf-wordmark { margin-top: var(--sp-1); margin-bottom: 0; vertical-align: top; }   /* inline-flex: no descender space under it */

/* the code block */
#stage-readout #recoveryHolder { padding: var(--sp-3) !important; }
#stage-readout #recoveryHolder > #recoveryCode { margin: 0 0 var(--sp-2); }

/* Folio I, the cover's two lines */
#readoutBody .folio-cover-inner > .panel + .panel { margin-top: var(--sp-2); }

/* Folio II, the shared-consensus arc: the card's own 24px above the question, the labels hugging the arc's ends,
   then the note 16px under them */
#readoutBody .consensus-reading { padding: 0; }
#readoutBody .consensus-reading > .consensus-question { margin-top: 0; }
#readoutBody .consensus-reading > .consensus-value { margin: var(--sp-2) 0 0; }
#readoutBody .consensus-reading > .consensus-zero-note { margin: var(--sp-2) 0 0; }

/* "Show the detail": one step between everything, a heading's subtitle close under it, a new heading set apart */
#readoutBody details.ro-dd > :not(summary) { margin-top: 0; margin-bottom: 0; }
#readoutBody details.ro-dd > :not(summary) + :not(summary) { margin-top: var(--sp-2); }
#readoutBody details.ro-dd > :not(summary) + .dd-h { margin-top: var(--sp-3); }
#readoutBody details.ro-dd > .dd-h + .dd-sub { margin-top: var(--sp-1); }
#readoutBody details.ro-dd .dd-nums { row-gap: var(--sp-1); }

/* Folio III, your scale against the room: the numbers row to its rail */
#readoutBody .scale-comparison > .scale-native-rail { margin-top: var(--sp-3); }

/* Folio IV, backgrounds: heading, bars, the average lane, its legend */
#readoutBody section.bg-rail > .bg-counts { margin-top: var(--sp-1); }
#readoutBody section.bg-rail > .bg-average-lane { margin-top: var(--sp-2); }
#readoutBody section.bg-rail > .bg-average-lane + .bg-average-labels { margin-top: var(--sp-1); }
#readoutBody section.bg-rail > .bg-average-lane { margin-bottom: 0; }
#readoutBody .bg-average-labels { row-gap: var(--sp-1); }
#readoutBody .bg-confound > .bg-confound-eyebrow { margin: 0 0 var(--sp-1); }
#readoutBody .bg-confound > .bg-synth { margin: 0; }
#readoutBody .bg-confound > .bg-synth + .bg-confound-caveat { margin-top: var(--sp-2); }

/* Folio V, the little details: the chooser under its label, a feature's title, words, groups and replay */
#readoutBody .finer-control { row-gap: var(--sp-1); }
#readoutBody .finer-control > .ux-features { margin: 0 0 var(--sp-3); gap: var(--sp-1); }
#readoutBody .finer-result > .finer-support { margin-bottom: 0; }
#readoutBody .finer-result > .finer-support + .finer-reading-note { margin-top: var(--sp-1); }
#readoutBody .finer-figure > .finer-axis-title { margin: 0; }
#readoutBody .finer-figure > .finer-feature-description { margin: var(--sp-1) 0 0; }
#readoutBody .finer-figure > .finer-reading-guide { margin: var(--sp-2) 0 0; }
#readoutBody .finer-figure > .finer-groups { margin-top: var(--sp-3); padding-top: 0; padding-bottom: var(--sp-3); }
#readoutBody .finer-figure > .finer-illustration-note { margin: var(--sp-3) 0 0; }
#readoutBody .finer-figure > .finer-replay { margin-top: var(--sp-3); }
#readoutBody .finer-figure > .finer-illustration-note + .finer-replay { margin-top: var(--sp-1); }
#readoutBody .finer-group > .finer-illustration { margin: 0; }
#readoutBody .finer-group > h4 { margin: var(--sp-2) 0 0; }
#readoutBody .finer-group > h4 + .finer-group-value, #readoutBody .finer-group > h4 + .finer-group-count,
#readoutBody .finer-group > .finer-group-value + .finer-group-count { margin-top: var(--sp-1); }
#readoutBody .finer-group > .finer-group-value { margin-bottom: 0; }
#readoutBody details.finer-detail > p { margin: 0; }
#readoutBody details.finer-detail > p + p { margin-top: var(--sp-2); }
#readoutBody .finer-detail-table > caption { padding-bottom: var(--sp-1); margin-bottom: 0; }

/* the story cards: title, then its two lines */
#ux-stories > h2 + p { margin-top: var(--sp-1); }
#ux-stories > p + p { margin-top: var(--sp-1); }

/* the note-and-label pair inside the voice box (the .r0920-cta p reset above had zeroed it) */
.r0920-cta [data-jev-participant] p { margin: 0 0 var(--sp-2); }

/* THE OTHER SEE YOUR EYE PAGES on the same scale ("and also spacing? forgot that for all pages?"). Measured before:
   the welcome page 18px from title to subtitle, 38px to the eye, 26px under the button; the questions page 5 to 29px
   (13px title to subtitle, 12px between the cards, 9px list rows, 13px paragraphs, 22px between fields, 29px before
   the buttons, 5 to 6px from a label to its input and from an input to its hint, 0px under "First, the basics");
   the rating page 6px from the count to its bar, 26px from the face to the tally, 14px on to the scale, 22px from
   the question to the numbers. */

/* the welcome page */
#stage-hero > h1 { margin-bottom: 0; }
#stage-hero > .hero-sub { margin-top: var(--sp-1); }
#stage-hero > .hero-eye { margin-top: var(--sp-3); }
#stage-hero > .recover-entry { margin-top: var(--sp-3); }

/* the questions page: the cover's cards, then the form */
#stage-entry .ln-cover-title { margin-bottom: 0; }
#stage-entry .ln-cover-title + .ln-cover-sub { margin-top: var(--sp-1); }
#stage-entry .ln-cards > .ln-card { margin-top: 0; margin-bottom: 0; }
#stage-entry .ln-cards > .ln-card + .ln-card { margin-top: var(--sp-2); }
#stage-entry .ln-card > summary { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
#stage-entry .ln-card > .ln-card-body { padding-top: var(--sp-1); }
#stage-entry .ln-card-body > * { margin-top: 0; margin-bottom: 0; }
#stage-entry .ln-card-body > * + * { margin-top: var(--sp-2); }
#stage-entry .ln-card-body > .ln-card-neg-lead + .ln-card-neg { margin-top: var(--sp-1); }
#stage-entry .ln-card-body li { margin-top: 0; margin-bottom: 0; }
#stage-entry .ln-card-body li + li { margin-top: var(--sp-1); }
#stage-entry h2.ln-reveal ~ #entryForm { margin-top: var(--sp-3); }   /* ~ : a hidden .entry-sub can sit between them */
#stage-entry h2.ln-reveal + .entry-sub { margin-top: var(--sp-1); margin-bottom: 0; }
#stage-entry #entryForm > .field { margin-top: 0; margin-bottom: 0; }
#stage-entry #entryForm > .field + .field { margin-top: var(--sp-3); }
#stage-entry #entryForm > .entry-actions { margin-top: var(--sp-4); }
#stage-entry .field .hint { margin-top: var(--sp-1); }
#stage-entry .dob-part > label { margin-bottom: var(--sp-1); }
#stage-entry .entry-actions > .form-error { margin-top: var(--sp-2); }

/* the rating page */
#stage-rate .rate-progress > #progLabel { margin-bottom: var(--sp-1); }
#stage-rate #rateArea > #rateTally { margin-top: var(--sp-3); }
#stage-rate #rateArea > .scale-wrap { margin-top: var(--sp-2); }
#stage-rate .scale-wrap > .scale-q { margin-bottom: var(--sp-2); }
#stage-rate .scale-wrap > .scale-hintkeys { margin-top: var(--sp-2); }
/* the scale's three end labels: from 700px ux-d97.css lays them round the numbers in a grid ("Somewhere between"
   under them), below 700px demo.css sets them in one row under the scale, whose own 1.4rem top margin then
   collapses into the question's */
@media (min-width: 700px) { #stage-rate .scale-ends > :nth-child(2) { margin-top: var(--sp-1); } }
@media (max-width: 699.98px) {
  #stage-rate .scale-row-wrap > .scale { margin-top: 0; }
  #stage-rate .scale-wrap > .scale-ends { margin-top: var(--sp-1); }
}

/* RETURNING VISITORS AND BUTTONS SIDE BY SIDE. "You did not space out the buttons ... and even a CTA for previous users"
   (Aasim, 22 September). The spacing checks measured blocks stacked one above another and skipped rows, so a row of
   buttons was never measured. The "Welcome back." card (science.js #resumeNote, with ux-d97.js adding "Use another
   reading code" under its row) had its line 14px above the buttons, 11px between Continue and Start fresh, the third
   button touching the row (0px) and 14 by 19px of padding; the code form had 11px from the field to its button (an
   inline style) and the delete confirmation's two buttons 10px apart. Buttons side by side are 16px apart, across and
   down, as on the Home page's pair (styles.css .btn-group); a toggle group's options are 8px apart. */
#stage-hero > #resumeNote { margin-top: var(--sp-3); }
#stage-hero > #resumeNote[style*="block"] { display: flex !important; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: var(--sp-2); padding: var(--sp-3); }
#stage-hero #resumeNote > #resumeText { flex: 1 0 100%; margin: 0; text-align: center; }
#stage-hero #resumeNote > .row { display: contents; }
#stage-hero #resumeNote .btn { margin: 0; }
#stage-hero #recoverForm > .pool-label { display: block; margin: 0 0 var(--sp-1); }
#stage-hero #recoverForm > #recoverBtn { margin-top: var(--sp-2) !important; }
#stage-hero #recoverEntry > #recoverForm { margin-top: var(--sp-2); }
#stage-hero #recoverForm > .form-error { margin: 0; min-height: 0; }   /* an empty live region stays in place at no height */
#stage-hero #recoverForm > .form-error:not(:empty) { margin-top: var(--sp-1); }
#stage-hero #recoverForm > #recoverConfirm { margin-top: var(--sp-2); }
#stage-hero #recoverForm > #recoverDeleteBtn { margin-top: var(--sp-2); }
#stage-hero #recoverConfirm > .rc-warn { margin: 0; }
#stage-hero #recoverConfirm > .rc-row { margin-top: var(--sp-2); gap: var(--sp-2); }
#stage-hero #recoverForm > .recover-done:not(:empty) { margin-top: var(--sp-2); }
#readoutBody .finer-mode-control { gap: var(--sp-1); }

/* THE RETURNING VISITOR'S WAY IN, ON THE WELCOME PAGE (22 September: "a small CTA for previous users"). The hero's
   "Been here before? Use your code" was a plain underlined line under the main button; it is now a small outlined
   button of the family at the compact height, so a returning reader sees a second, quieter way in. */
#stage-hero .recover-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: var(--btn-h-compact);
  padding: var(--btn-pad-compact); border: 2px solid var(--btn-line); border-radius: var(--btn-radius); background: var(--btn2-bg);
  color: var(--btn2-ink); font-weight: 600; text-decoration: none; cursor: pointer; }
#stage-hero .recover-toggle:hover { background: var(--btn2-hover-bg); border-color: var(--btn2-hover-bg); color: var(--btn2-hover-ink); }

/* 2026-09-22. The flex-column card added above made the centred deck shrink to its
   min-content width. Give the face and caption their intended responsive measure. */
#readoutBody .folio-room .ro-card .dv-deck { width: min(100%, 410px); }
#readoutBody .folio-room .dv-controls { margin-top: var(--sp-4) !important; }
/* The source deck hid depths four to nine, but permits twelve faces. Keep the
   deeper cards out of the painted stack and clear of the controls below it. */
#readoutBody .dv-card[data-r0920-back="1"] { opacity: 0; visibility: hidden; }

/* 2026-09-24. One note field, with study questions revealed inside its existing card. */
#stage-readout > [data-jev-participant][hidden] { display: none; }
#readoutBody .r0920-cta [data-jev-participant][data-r0920-study="v2"] {
  margin-top: var(--sp-2) !important; padding: 0 !important; border: 0 !important; background: transparent; }
#readoutBody .r0920-clause-study { margin-top: var(--sp-1); text-align: left; }
#readoutBody .r0920-clause-study button { margin-top: 0; }
#readoutBody .r0920-clause-open { display: inline-flex; align-items: center; min-height: var(--btn-h);
  padding: 0; border: 0; background: transparent; color: var(--btn2-ink); cursor: pointer;
  font-family: 'DM Sans', system-ui, sans-serif; font-size: var(--fs-label, 1rem); font-weight: 600;
  text-decoration: underline; text-underline-offset: .2em; }
#readoutBody .r0920-clause-open:hover { color: var(--btn-line); }
#readoutBody .r0920-clause-open:focus-visible, #readoutBody .r0920-clause-select:focus-visible,
#readoutBody .r0920-clause-option:focus-within { outline: 2px solid var(--btn-line); outline-offset: 3px; }
#readoutBody .r0920-clause-open[hidden], #readoutBody [data-jev-submit][hidden],
#readoutBody .r0920-clause-form[hidden], #readoutBody .r0920-clause-row[hidden],
#readoutBody .r0920-clause-choices[hidden], #readoutBody .r0920-clause-other[hidden] { display: none; }
#readoutBody .r0920-clause-form { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-2); }
#readoutBody .r0920-clause-form p { margin: 0; }
#readoutBody .r0920-clause-question { font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--fs-lead, 1.5rem); font-weight: 700; line-height: 1.25; }
#readoutBody .r0920-clause-help, #readoutBody .r0920-clause-effect,
#readoutBody .r0920-clause-other, #readoutBody .r0920-clause-status { font-size: var(--fs-label, 1rem); line-height: 1.5; }
#readoutBody .r0920-clause-help { color: var(--fg2); }
#readoutBody .r0920-clause-effect { color: var(--fg2); }
#readoutBody .r0920-clause-label { display: block; padding: 0; font-family: 'DM Sans', system-ui, sans-serif;
  font-size: var(--fs-label, 1rem); font-weight: 600; line-height: 1.5; }
#readoutBody .r0920-clause-select { display: block; width: 100%; margin-top: var(--sp-1);
  padding: var(--field-pad); border: 1px solid var(--border2); border-radius: var(--btn-radius);
  background: var(--surface, transparent); color: var(--fg); font-family: 'DM Sans', system-ui, sans-serif;
  font-size: var(--fs-body, 1.1875rem); line-height: 1.5; }
#readoutBody .r0920-clause-row { display: flex; flex-direction: column; gap: var(--sp-2); }
#readoutBody .r0920-clause-choices { margin: 0; padding: 0; border: 0; min-width: 0; }
#readoutBody .r0920-clause-choices > legend { margin-bottom: var(--sp-1); }
#readoutBody .r0920-clause-options { display: grid; gap: var(--sp-1); }
#readoutBody .r0920-clause-option { display: flex; align-items: center; gap: var(--sp-2);
  min-height: var(--btn-h); padding: var(--sp-2); border: 1px solid var(--border2);
  border-radius: var(--btn-radius); background: var(--surface, transparent); color: var(--fg);
  font-family: 'DM Sans', system-ui, sans-serif; font-size: var(--fs-label, 1rem); line-height: 1.5; cursor: pointer; }
#readoutBody .r0920-clause-option input { flex: 0 0 auto; accent-color: var(--btn-line); }
#readoutBody .r0920-clause-option:has(input:checked) { border-color: var(--btn2-hover-bg);
  background: var(--btn2-hover-bg); color: var(--btn2-hover-ink); }
#readoutBody .r0920-clause-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
#readoutBody .r0920-clause-status:empty { display: none; }
@media (max-width: 700px) {
  #readoutBody .r0920-clause-actions { align-items: stretch; flex-direction: column; }
  #readoutBody .r0920-clause-submit { width: 100%; }
}

/* 2026-09-24. A three-step detail challenge within the existing Eye card. */
#readoutBody .r0920-cta [data-jev-participant][data-r0920-study="v3"] {
  margin-top: var(--sp-2) !important; padding: 0 !important; border: 0 !important; background: transparent; }
#readoutBody .r0920-cta [data-jev-participant][data-r0920-study="v3"] button { margin-top: 0; }
#readoutBody .r0920-clause-challenge { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); text-align: left; }
#readoutBody .r0920-clause-challenge[hidden], #readoutBody .r0920-clause-page[hidden],
#readoutBody .r0920-clause-step[hidden], #readoutBody .r0920-clause-text[hidden],
#readoutBody .r0920-clause-preview[hidden], #readoutBody .r0920-clause-page .btn[hidden] { display: none; }
#readoutBody .r0920-clause-page { display: flex; flex-direction: column; gap: var(--sp-3); }
#readoutBody .r0920-clause-page > * { margin: 0; }
#readoutBody .r0920-clause-step { margin: 0; color: var(--gold2); font-family: 'DM Sans', system-ui, sans-serif;
  font-size: var(--fs-label, 1rem); font-weight: 600; }
#readoutBody .r0920-clause-question { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--fs-lead, 1.5rem); font-weight: 700; line-height: 1.25; }
#readoutBody .r0920-clause-field { margin: 0; padding: 0; border: 0; min-width: 0; }
#readoutBody .r0920-clause-sr { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }
#readoutBody .r0920-clause-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-1); }
#readoutBody .r0920-clause-tile { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--btn-h);
  padding: var(--sp-2); border: 2px solid var(--btn-line); border-radius: var(--btn-radius);
  background: var(--btn2-bg); color: var(--btn2-ink); cursor: pointer; font-family: 'DM Sans', system-ui, sans-serif;
  font-size: var(--fs-label, 1rem); font-weight: 600; line-height: 1.5; }
#readoutBody .r0920-clause-tile input { flex: 0 0 auto; accent-color: var(--btn-line); }
#readoutBody .r0920-clause-tile:has(input:checked) { border-color: transparent; background: var(--btn-fill); color: var(--btn-ink); }
#readoutBody .r0920-clause-tile:has(input:disabled) { border-color: var(--fg4); background: var(--surface2); color: var(--fg3); cursor: not-allowed; }
#readoutBody .r0920-clause-tile:focus-within { outline: 2px solid var(--btn-line); outline-offset: 3px; }
#readoutBody .r0920-clause-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
#readoutBody .r0920-clause-page .r0920-clause-text,
#readoutBody .r0920-cta [data-jev-participant][data-r0920-study="v3"] button.r0920-clause-text {
  display: inline-flex; align-items: center; justify-content: flex-start; min-height: var(--btn-h); padding: 0;
  border: 0; background: transparent; color: var(--btn2-ink); box-shadow: none;
  font-family: 'DM Sans', system-ui, sans-serif; font-size: var(--fs-label, 1rem); font-weight: 600;
  text-align: left; text-decoration: underline; text-underline-offset: .2em; }
#readoutBody .r0920-clause-page .r0920-clause-text:hover,
#readoutBody .r0920-cta [data-jev-participant][data-r0920-study="v3"] button.r0920-clause-text:hover {
  border: 0; background: transparent; color: var(--btn-line); box-shadow: none; }
#readoutBody .r0920-clause-page .r0920-clause-text:focus-visible { outline: 2px solid var(--btn-line); outline-offset: 3px; }
#readoutBody .r0920-cta [data-jev-participant][data-r0920-study="v3"] .btn-ghost {
  border: 2px solid var(--btn-line); background: var(--btn2-bg); color: var(--btn2-ink); }
#readoutBody .r0920-cta [data-jev-participant][data-r0920-study="v3"] .btn-ghost:hover {
  border-color: var(--btn2-hover-bg); background: var(--btn2-hover-bg); color: var(--btn2-hover-ink); }
#readoutBody .r0920-clause-help, #readoutBody .r0920-clause-effect,
#readoutBody .r0920-clause-status { font-size: var(--fs-label, 1rem); line-height: 1.5; }
#readoutBody .r0920-clause-help, #readoutBody .r0920-clause-effect { color: var(--fg2); }
#readoutBody .r0920-clause-status:empty { display: none; }
#readoutBody .r0920-clause-result { padding: var(--sp-3); border-left: 2px solid var(--gold2);
  background: var(--surface2); font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--fs-lead, 1.5rem); font-weight: 700; line-height: 1.25; }
#readoutBody .r0920-clause-page:last-child .r0920-clause-question::after { content: ''; display: block;
  width: var(--sp-6); height: 2px; margin-top: var(--sp-1); background: var(--gold2);
  transform-origin: left center; animation: r0920ClauseReveal 300ms ease-out both; }
@keyframes r0920ClauseReveal { from { transform: scaleX(.25); opacity: .3; } to { transform: scaleX(1); opacity: 1; } }
#readoutBody .r0920-clause-preview { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
#readoutBody .r0920-clause-preview > * { margin: 0; }
#readoutBody .r0920-clause-reveal { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--btn-h);
  font-family: 'DM Sans', system-ui, sans-serif; font-size: var(--fs-label, 1rem); font-weight: 600; }
#readoutBody .r0920-clause-reveal input { accent-color: var(--btn-line); }
#readoutBody .r0920-clause-card { width: min(100%, 300px); margin: 0; }
#readoutBody .r0920-clause-card[hidden] { display: none; }
#readoutBody .r0920-clause-card img { display: block; width: 100%; height: auto; border-radius: var(--r-card); }
.r0920-clause-dialog { width: min(90vw, 460px); max-height: 90vh; padding: var(--sp-3);
  border: 1px solid var(--border3); border-radius: var(--r-card); background: var(--bg); color: var(--fg); }
.r0920-clause-dialog::backdrop { background: rgb(0 0 0 / .75); }
.r0920-clause-dialog img { display: block; width: 100%; max-height: 70vh; object-fit: contain; }
.r0920-clause-dialog .r0920-clause-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
#share-section .ux-story-grid figcaption { margin: var(--sp-2) 0; }
@media (max-width: 700px) {
  #readoutBody .r0920-clause-tiles { grid-template-columns: minmax(0, 1fr); }
  #readoutBody .r0920-clause-page .r0920-clause-actions { align-items: stretch; flex-direction: column; }
  #readoutBody .r0920-clause-page .r0920-clause-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  #readoutBody .r0920-clause-page:last-child .r0920-clause-question::after { animation: none; }
}

/* 2026-09-25. Three optional Your Eye games. The ordinary generated cards are
   not painted or exposed while an assigned Switch answer is still blind. */
html.r0920-games-checking #stage-readout > .eye-print-faces,
html.r0920-games-pending #stage-readout > .eye-print-faces,
html.r0920-games-blind #stage-readout > .eye-print-faces { visibility: hidden !important; pointer-events: none !important; }
/* 2026-10-04: preview retains its deliberate face suppression. */
html.r0920-games-preview #stage-readout > .eye-print-faces { display: none !important; }
html.r0920-games-checking #stage-readout .r0920-ffb,
html.r0920-games-pending #stage-readout .r0920-ffb,
html.r0920-games-blind #stage-readout .r0920-ffb,
html.r0920-games-checking #ux-pool-early .r0920-cta-faces,
html.r0920-games-pending #ux-pool-early .r0920-cta-faces,
html.r0920-games-blind #ux-pool-early .r0920-cta-faces,
html.r0920-games-checking #epfReadyPopup,
html.r0920-games-pending #epfReadyPopup,
html.r0920-games-blind #epfReadyPopup { display: none !important; }
html.r0920-games-preview #stage-readout > .readout-actions,
html.r0920-games-preview #stage-readout > #recoveryHolder,
html.r0920-games-preview #stage-readout > #share-section,
html.r0920-games-preview #stage-readout > #signin-section,
html.r0920-games-preview #stage-readout > .ux-invitation,
html.r0920-games-preview #stage-readout > .readout-disclaimer { display: none !important; }

#stage-readout .r0920-game,
#readoutBody .r0920-preview-chapter { width: min(100%, var(--ro-measure, 860px)); margin-inline: auto; }
#stage-readout > .r0920-game { margin-top: var(--sp-3); margin-bottom: var(--seam); }
#readoutBody .r0920-game { margin-top: var(--sp-4); }
/* 2026-09-25. A game inserted between two reading cards keeps their hairline and
   the parked Folio reserves the closed invitation before it enters the viewport. */
/* 2026-09-26. A game card has its own border and fill, so a zero gap left it touching the
   reading above (its "Show the detail" button sat on the card's edge). It now takes the same
   card-to-card step as the space below it. */
#readoutBody .folio-ch .ro-card + .r0920-game { margin-top: var(--ro-gap); }
#readoutBody .folio-ch .r0920-game + .ro-card {
  border-top: 1px solid var(--border); padding-top: var(--ro-gap); margin-top: var(--ro-gap);
}
#readoutBody .folio-park:has(.r0920-game:not([hidden])) > .folio-park-inner {
  contain-intrinsic-size: auto calc(var(--parked-est, 480px) + var(--r0920-game-reserve, 280px));
}
#readoutBody .folio-park:has(.r0920-game[data-r0920-open="1"]) > .folio-park-inner {
  content-visibility: visible; contain-intrinsic-size: none;
}
#stage-readout .r0920-game {
  position: relative; padding: var(--sp-4); border: 1px solid var(--border3, var(--r-rule));
  border-radius: var(--r-card); background: var(--surface2, var(--bg)); color: var(--fg);
  overflow: hidden; text-align: left;
}
#stage-readout .r0920-game::before {
  content: ''; display: block; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--gold2); pointer-events: none;
}
#stage-readout .r0920-game[hidden], #stage-readout .r0920-game-invite[hidden],
#stage-readout .r0920-game-play[hidden], #stage-readout .r0920-game-field[hidden],
#stage-readout .r0920-game-actions [hidden],
#stage-readout .r0920-game-reason > .btn[hidden] { display: none !important; }
#stage-readout .r0920-game-mark, #stage-readout .r0920-game-progress,
#readoutBody .r0920-preview-folio {
  margin: 0; color: var(--gold2); font-family: 'DM Sans', system-ui, sans-serif;
  font-size: var(--fs-label); font-weight: 600; line-height: 1.5;
}
#stage-readout .r0920-game-synthetic {
  margin: var(--sp-2) 0 0; padding: var(--sp-2);
  border-left: 2px solid var(--gold2); background: var(--bg);
  color: var(--fg2); font-family: 'DM Sans', system-ui, sans-serif;
  font-size: var(--fs-label); line-height: 1.5;
}
#stage-readout .r0920-game-mark { margin-bottom: var(--sp-1); }
#stage-readout .r0920-game-title, #readoutBody .r0920-preview-title {
  margin: 0; color: var(--fg); font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--fs-lead); font-weight: 700; line-height: 1.15;
}
#readoutBody .r0920-preview-title { font-size: var(--fs-h2); }
#stage-readout .r0920-game-invite, #stage-readout .r0920-game-play {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3);
  margin-top: var(--sp-3);
}
#stage-readout .r0920-game-invite > *, #stage-readout .r0920-game-play > * { margin-block: 0; }
#stage-readout .r0920-game-intro, #stage-readout .r0920-game-reading-note,
#stage-readout .r0920-preview-note {
  margin: 0; color: var(--fg2); font-family: 'DM Sans', system-ui, sans-serif;
  font-size: var(--fs-body); line-height: 1.5;
}
#stage-readout .r0920-game-prompt, #stage-readout .r0920-game-result,
#stage-readout .r0920-game-share-title {
  margin: 0; color: var(--fg); font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--fs-lead); font-weight: 700; line-height: 1.25;
}
#stage-readout .r0920-game-result { max-width: 30ch; }
#stage-readout .r0920-game-result-mark {
  margin: 0; padding-left: var(--sp-2); border-left: 2px solid var(--gold2);
  color: var(--gold2); font-family: 'DM Sans', system-ui, sans-serif;
  font-size: var(--fs-label); font-weight: 600;
}
#stage-readout .r0920-game-wait, #stage-readout .r0920-game-status,
#stage-readout .r0920-game-role, #stage-readout .r0920-game-score {
  margin: 0; color: var(--fg2); font-family: 'DM Sans', system-ui, sans-serif;
  font-size: var(--fs-label); line-height: 1.5;
}
#stage-readout .r0920-game-score { color: var(--fg); font-weight: 600; }
#stage-readout .r0920-game-score-plate {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2);
  width: min(100%, 520px); padding: var(--sp-2); border: 2px solid var(--gold2);
  border-radius: var(--btn-radius); background: var(--bg);
}
#stage-readout .r0920-game-score-number {
  margin: 0; color: var(--fg); font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--fs-h2); font-weight: 700; line-height: 1;
}
#stage-readout .r0920-game-score-caption {
  margin: 0; color: var(--fg2); font-family: 'DM Sans', system-ui, sans-serif;
  font-size: var(--fs-label); font-weight: 600; line-height: 1.4;
}
#stage-readout .r0920-game-status:empty { display: none; }
#stage-readout .r0920-game-status:not(:empty) { margin-top: var(--sp-3); }
#stage-readout .r0920-game-actions, #stage-readout .r0920-game-choicebar,
#stage-readout .r0920-game-role-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  width: 100%;
}
#stage-readout .r0920-game-actions .btn, #stage-readout .r0920-game-choicebar .btn {
  margin: 0; min-height: var(--btn-h); border-radius: var(--btn-radius);
  font-family: 'DM Sans', system-ui, sans-serif; font-size: var(--fs-label);
  font-weight: 600; letter-spacing: normal; text-transform: none;
}
#stage-readout .r0920-game-choice[aria-pressed="true"],
#stage-readout .r0920-game-token[aria-pressed="true"] {
  border-color: transparent; background: var(--btn-fill); color: var(--btn-ink);
}
#stage-readout .r0920-game-facegrid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2); width: 100%;
}
#stage-readout .r0920-game-viewbar { display: none; }
#stage-readout .r0920-game-face {
  display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-1);
  width: 100%; min-width: 0; margin: 0; padding: var(--sp-2);
  border: 2px solid var(--r-rule); border-radius: var(--btn-radius);
  background: var(--bg); color: var(--fg); cursor: pointer; text-align: left;
}
#stage-readout .r0920-game-face:hover { border-color: var(--gold2); }
#stage-readout .r0920-game-face[aria-pressed="true"] {
  border-color: var(--gold2); box-shadow: inset 0 0 0 1px var(--gold2);
}
#stage-readout .r0920-game-face-tab {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--sp-4); height: var(--sp-4); border: 1px solid var(--gold2);
  border-radius: var(--btn-radius); color: var(--gold2);
  font-family: 'DM Sans', system-ui, sans-serif; font-size: var(--fs-label);
  font-weight: 600;
}
#stage-readout .r0920-game-face img {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--btn-radius); background: var(--surface2);
}
#stage-readout .r0920-game-result-faces {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2); width: min(100%, 520px);
}
#stage-readout .r0920-game-result-face {
  min-width: 0; padding: var(--sp-1); border: 2px solid var(--r-rule);
  border-radius: var(--btn-radius); background: var(--bg);
}
#stage-readout .r0920-game-result-face.is-bet { border-color: var(--btn-line); }
#stage-readout .r0920-game-result-face.is-chosen { border-color: var(--gold2); }
#stage-readout .r0920-game-result-face img {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--btn-radius); background: var(--surface2);
}
#stage-readout .r0920-game-result-face-label,
#stage-readout .r0920-game-result-face-role {
  margin: var(--sp-1) 0; color: var(--fg);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: var(--fs-label); font-weight: 600; line-height: 1.4;
}
#stage-readout .r0920-game-result-face-role { color: var(--fg2); font-weight: 400; }
/* 2026-09-26 build T: the Trial's one verdict, four pairs, each outcome in words. */
#stage-readout .r0920-game-trial-grid { display: grid; gap: var(--sp-3); width: 100%; }
#stage-readout .r0920-game-trial-row {
  display: grid; gap: var(--sp-1); padding-top: var(--sp-2); border-top: 1px solid var(--r-rule);
}
#stage-readout .r0920-game-trial-row > .r0920-game-progress { margin: 0; }
#stage-readout .r0920-game-trial-row > .r0920-game-result-faces { width: min(100%, 420px); }
#stage-readout .r0920-game-bet-plate {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); width: min(100%, 520px);
  padding: var(--sp-2); border: 1px solid var(--gold2);
  border-radius: var(--btn-radius); background: var(--bg);
}
#stage-readout .r0920-game-bet-plate p {
  margin: 0; color: var(--fg); font-family: 'DM Sans', system-ui, sans-serif;
  font-size: var(--fs-label); font-weight: 600; line-height: 1.5;
}
#stage-readout .r0920-game-receipt {
  width: 100%; padding: var(--sp-2); border: 2px solid var(--gold2);
  border-radius: var(--btn-radius); background: var(--bg);
}
#stage-readout .r0920-game-guess-result {
  max-width: 62ch; margin: 0; color: var(--fg);
  font-family: 'DM Sans', system-ui, sans-serif; font-size: var(--fs-body);
  font-weight: 600; line-height: 1.5;
}
#stage-readout .r0920-game-receipt-title,
#stage-readout .r0920-game-receipt-caption {
  margin: 0; color: var(--fg2); font-family: 'DM Sans', system-ui, sans-serif;
  font-size: var(--fs-label); line-height: 1.5;
}
#stage-readout .r0920-game-receipt-title { color: var(--gold2); font-weight: 600; }
#stage-readout .r0920-game-receipt-pair {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2); margin-top: var(--sp-2);
}
#stage-readout .r0920-game-receipt-cell { min-width: 0; }
#stage-readout .r0920-game-receipt-number {
  margin: 0; color: var(--fg); font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--fs-lead); font-weight: 700; line-height: 1.1;
}
#stage-readout .r0920-game-receipt-caption { margin-top: var(--sp-1); }
#stage-readout .r0920-game-field {
  width: 100%; min-width: 0; margin: 0; padding: 0; border: 0;
}
#stage-readout .r0920-game-field > legend { margin-bottom: var(--sp-2); }
#stage-readout .r0920-game-tokenbank {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2); width: 100%;
}
#stage-readout .r0920-game-tokenbank .btn {
  justify-content: flex-start; width: 100%; min-width: 0; text-align: left;
  white-space: normal; line-height: 1.4;
}
#stage-readout .r0920-game-sockets {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2); width: 100%;
}
#stage-readout .r0920-game-socket {
  display: flex; align-items: center; min-height: var(--btn-h);
  padding: var(--sp-2); border-bottom: 2px solid var(--gold2);
  color: var(--fg); font-family: 'DM Sans', system-ui, sans-serif;
  font-size: var(--fs-label); font-weight: 600; overflow-wrap: break-word;
}
#stage-readout .r0920-game-counts, #stage-readout .r0920-game-reason,
#stage-readout .r0920-game-share {
  width: 100%; margin: 0; padding: var(--sp-3); border: 1px solid var(--r-rule);
  border-radius: var(--btn-radius); background: var(--bg);
}
#stage-readout .r0920-game-counts > summary,
#stage-readout .r0920-game-reason > summary {
  min-height: var(--btn-h); color: var(--btn2-ink);
  font-family: 'DM Sans', system-ui, sans-serif; font-size: var(--fs-label);
  font-weight: 600; cursor: pointer;
}
#stage-readout .r0920-game-counts > p, #stage-readout .r0920-game-reason > p {
  margin: var(--sp-2) 0 0;
}
#stage-readout .r0920-game-label {
  display: flex; flex-direction: column; gap: var(--sp-1);
  margin-top: var(--sp-2); font-family: 'DM Sans', system-ui, sans-serif;
  font-size: var(--fs-label); font-weight: 600;
}
#stage-readout .r0920-game-note, #stage-readout .r0920-game-link {
  width: 100%; padding: var(--field-pad); border: 1px solid var(--border2);
  border-radius: var(--btn-radius); background: var(--surface2); color: var(--fg);
  font-family: 'DM Sans', system-ui, sans-serif; font-size: var(--fs-body);
}
#stage-readout .r0920-game-reason-options {
  display: grid; gap: var(--sp-1); width: 100%; margin-bottom: var(--sp-2);
}
#stage-readout .r0920-game-reason-option {
  display: flex; align-items: center; gap: var(--sp-1);
  min-height: var(--btn-h); padding: var(--sp-2); border: 1px solid var(--r-rule);
  border-radius: var(--btn-radius); font-family: 'DM Sans', system-ui, sans-serif;
  font-size: var(--fs-label); cursor: pointer;
}
#stage-readout .r0920-game-reason-option:has(input:checked) { border-color: var(--gold2); }
/* 2026-09-25. One clear guess, then the reader confirms or corrects it. */
#stage-readout .r0920-game-reason-response {
  display: flex; flex-direction: column; gap: var(--sp-2);
  width: 100%; margin-top: var(--sp-2);
}
#stage-readout .r0920-game-reason-response > p { margin: 0; }
#stage-readout .r0920-game-guess {
  display: flex; flex-direction: column; gap: var(--sp-1);
  width: 100%; padding: var(--sp-2); border-left: 2px solid var(--gold2);
  background: color-mix(in srgb, var(--gold2) 8%, var(--bg));
}
#stage-readout .r0920-game-guess > p { margin: 0; }
#stage-readout .r0920-game-guess-label {
  color: var(--gold2); font-family: 'DM Sans', system-ui, sans-serif;
  font-size: var(--fs-label); font-weight: 600;
}
#stage-readout .r0920-game-guess-value {
  color: var(--fg); font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--fs-lead); font-weight: 700; line-height: 1.15;
}
#stage-readout .r0920-game-guess-question {
  color: var(--fg2); font-family: 'DM Sans', system-ui, sans-serif;
  font-size: var(--fs-body); line-height: 1.5;
}
#stage-readout .r0920-game-guess-actions {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-1);
}
@media (max-width: 600px) {
  #stage-readout .r0920-game-guess-actions .btn { width: 100%; }
}
#stage-readout .r0920-game-share { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
#stage-readout .r0920-game-share > * { margin: 0; }
#stage-readout .r0920-game-link-action { display: inline-flex; align-items: center; min-height: var(--btn-h); }
#stage-readout .r0920-game button:focus-visible, #stage-readout .r0920-game input:focus-visible,
#stage-readout .r0920-game textarea:focus-visible, #stage-readout .r0920-game a:focus-visible,
#stage-readout .r0920-game summary:focus-visible {
  outline: 2px solid var(--gold2); outline-offset: 3px;
}
/* 2026-09-25. The friend link opens a standalone page with the same site materials. */
.r0920-friend-header a:focus-visible { outline: 2px solid var(--gold2); outline-offset: 3px; }
.r0920-games-friend #stage-readout { min-height: calc(100vh - 64px); }
.r0920-games-friend #stage-readout .r0920-game-friend { margin-top: var(--sp-4); }
.r0920-games-friend #stage-readout .r0920-game-friend .r0920-game-title { text-align: left; }
.r0920-games-friend #stage-readout .r0920-game-result-face {
	display: flex; flex-direction: column;
}
.r0920-games-friend #stage-readout .r0920-game-result-face img { order: 0; }
.r0920-games-friend #stage-readout .r0920-game-result-face-label { order: 1; }
.r0920-friend-header {
  width: 100%; padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border3, var(--r-rule)); background: var(--bg);
}
.r0920-friend-header a {
  display: inline-flex; gap: var(--sp-2); align-items: center; color: var(--fg);
  font-family: 'DM Sans', system-ui, sans-serif; font-size: var(--fs-label);
  font-weight: 700; letter-spacing: .07em; text-decoration: none;
}
.r0920-friend-header img { width: 36px; height: 36px; object-fit: contain; }
.r0920-friend-header span {
  color: var(--gold2); font-weight: 600;
}
.r0920-games-friend #stage-readout { padding-top: var(--sp-6); }
.r0920-games-friend #stage-readout > h1 {
  margin: 0; text-align: center; font-size: var(--fs-h2); line-height: 1.1;
}
.r0920-games-friend #stage-readout > h1 em { color: var(--gold2); }
.r0920-games-friend #stage-readout .readout-sub { max-width: 48ch; margin-inline: auto; }
#stage-readout .r0920-preview-banner {
  width: min(100%, var(--ro-measure, 860px)); margin: var(--sp-4) auto 0;
  padding: var(--sp-3) var(--sp-3) var(--sp-2); border-left: 2px solid var(--gold2);
  background: var(--surface2); text-align: left;
}
#stage-readout .r0920-preview-banner > * { margin: 0; }
#stage-readout .r0920-preview-banner > * + * { margin-top: var(--sp-1); }
#stage-readout .r0920-preview-chapter { padding-block: var(--sp-6); border-top: 1px solid var(--r-rule); }
#stage-readout .r0920-preview-chapter > h2 { margin-top: var(--sp-1); }
#stage-readout .r0920-preview-chapter .r0920-game { margin-top: var(--sp-3); }
@media (min-width: 760px) {
  #stage-readout .r0920-game-switch .r0920-game-play:has(> .r0920-game-result-faces) {
    display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-content: start; align-items: start; column-gap: var(--sp-4);
  }
  #stage-readout .r0920-game-switch .r0920-game-play > .r0920-game-result-mark {
    grid-column: 1 / -1;
  }
  #stage-readout .r0920-game-switch .r0920-game-play > .r0920-game-result-faces {
    grid-column: 1; grid-row: 2 / span 4;
  }
  #stage-readout .r0920-game-switch .r0920-game-play:has(> .r0920-game-result-faces) >
    :not(.r0920-game-result-mark):not(.r0920-game-result-faces) {
    grid-column: 2;
  }
}
@media (max-width: 700px) {
  #stage-readout .r0920-preview-banner { padding-bottom: var(--sp-1); }
  #readoutBody .folio-park:has(.r0920-game:not([hidden])) { --r0920-game-reserve: 380px; }
  #stage-readout .r0920-game { padding: var(--sp-3); }
  #stage-readout .r0920-game-facegrid { grid-template-columns: minmax(0, 1fr); }
  #stage-readout .r0920-game-viewbar {
    display: flex; gap: var(--sp-2); grid-column: 1 / -1;
  }
  #stage-readout .r0920-game-viewbar .btn { flex: 1 1 0; }
  #stage-readout .r0920-game-viewbar .btn[aria-pressed="true"] {
    border-color: transparent; background: var(--btn-fill); color: var(--btn-ink);
  }
  #stage-readout .r0920-game-facegrid[data-view="a"] > .r0920-game-face[data-choice="b"],
  #stage-readout .r0920-game-facegrid[data-view="b"] > .r0920-game-face[data-choice="a"] {
    display: none;
  }
  #stage-readout .r0920-game-tokenbank,
  #stage-readout .r0920-game-sockets { gap: var(--sp-1); }
  #stage-readout .r0920-game-actions { flex-direction: column; align-items: stretch; }
  #stage-readout .r0920-game-actions > .btn { width: 100%; }
  #stage-readout .r0920-game-choicebar .btn { flex: 1 1 auto; }
}
@media (max-width: 360px) {
  #stage-readout .r0920-game-tokenbank { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  #stage-readout .r0920-game *, #stage-readout .r0920-game *::before,
  #stage-readout .r0920-game *::after { animation: none !important; transition: none !important; }
}

/* 2026-09-26 W2: reason chips and disabled Mix pairs use the existing button scale. */
#stage-readout .r0920-game-reasons {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2);
  width: 100%;
}
#stage-readout .r0920-game-reasons > * { margin: 0; }
#stage-readout .r0920-game-chips {
  display: flex; flex-wrap: wrap; gap: var(--sp-1); width: 100%;
}
#stage-readout .r0920-game-chip {
  min-height: var(--btn-h); font-family: 'DM Sans', system-ui, sans-serif;
  font-size: var(--fs-label); font-weight: 600;
}
#stage-readout .r0920-game-chip[aria-pressed="true"] {
  border-color: transparent; background: var(--btn-fill); color: var(--btn-ink);
}
#stage-readout .r0920-game-chips[hidden],
#stage-readout .r0920-game-reasons > .btn[hidden] { display: none !important; }
#stage-readout .r0920-game-token:disabled { cursor: not-allowed; }
/* 2026-09-26. Game objects and state-bound motion. */
#stage-readout .r0920-game {
  --game-knot: #f1e7d5;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px;
  column-gap: var(--sp-2);
  background: linear-gradient(140deg, var(--surface2, var(--bg)), var(--bg));
}
:root[data-theme="light"] #stage-readout .r0920-game { --game-knot: #722f37; }
#stage-readout .r0920-game > .r0920-game-mark { grid-column: 1; grid-row: 1; }
#stage-readout .r0920-game > .r0920-game-title { grid-column: 1; grid-row: 2; align-self: start; }
#stage-readout .r0920-game > .r0920-game-art { grid-column: 2; grid-row: 1 / 3; align-self: center; }
#stage-readout .r0920-game > .r0920-game-invite,
#stage-readout .r0920-game > .r0920-game-play,
#stage-readout .r0920-game > .r0920-game-status,
#stage-readout .r0920-game > .r0920-game-intro,
#stage-readout .r0920-game > .r0920-game-synthetic { grid-column: 1 / -1; }
#stage-readout .r0920-game-mode {
  grid-column: 1 / -1; margin: 0; color: var(--gold2);
  font-family: 'DM Sans', system-ui, sans-serif; font-size: var(--fs-label);
  font-weight: 600; line-height: 1.5;
}
/* 2026-09-26. Nested game transitions must not inherit a moving page entrance. */
#stage-readout:has(.r0920-game) { animation: none !important; }
#stage-readout .r0920-game-art {
  display: block; width: 128px; height: 96px; flex: 0 0 auto;
  color: var(--gold2); pointer-events: none;
}
#stage-readout .r0920-game-art-small { width: 32px; height: 32px; }
/* 2026-09-26. Fixed SVG viewport and pivots, never a moving logo or portrait. */
#stage-readout .r0920-trial-scales { color: var(--gold2); }
:root[data-theme="light"] #stage-readout .r0920-trial-scales { color: #722f37; }
#stage-readout .r0920-trial-beam,
#stage-readout .r0920-trial-pan-left,
#stage-readout .r0920-trial-pan-right { transform-box: view-box; }
#stage-readout .r0920-trial-beam { transform-origin: 80px 28px; }
#stage-readout .r0920-trial-pan-left { transform-origin: 48px 28px; }
#stage-readout .r0920-trial-pan-right { transform-origin: 112px 28px; }
#stage-readout .r0920-game-seal {
  display: flex; align-items: center; gap: var(--sp-2);
  color: var(--fg2); font-family: 'DM Sans', system-ui, sans-serif;
  font-size: var(--fs-label); line-height: 1.5;
}
#stage-readout .r0920-game-seal-object {
  position: relative; display: block; width: 64px; height: 64px;
  flex: 0 0 64px; padding: var(--sp-1);
}
#stage-readout .r0920-game-seal-object::before,
#stage-readout .r0920-game-seal-object::after {
  content: ''; position: absolute; inset: 0;
  border: 1px solid var(--gold2); border-radius: 50%; pointer-events: none;
}
#stage-readout .r0920-game-seal-object::after { opacity: 0; }
#stage-readout .r0920-game-seal-object > .r0920-game-art {
  width: 48px; height: 48px; padding: 0; color: var(--game-knot);
  transform: none; filter: none; animation: none;
}
#stage-readout .r0920-game-hud {
  width: 100%; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--sp-2);
  padding-bottom: var(--sp-2); border-bottom: 1px solid var(--r-rule);
}
#stage-readout .r0920-game-round {
  display: flex; flex-direction: column; gap: var(--sp-1);
}
#stage-readout .r0920-game-hud .r0920-game-result-mark { margin: 0; }
#stage-readout .r0920-game-play { gap: var(--sp-2); }
#stage-readout .r0920-game-play > .r0920-game-prompt { margin: 0; }
@media (min-width: 760px) {
  #stage-readout .r0920-game-switch .r0920-game-play:has(> .r0920-game-result-faces) > .r0920-game-hud {
    grid-column: 1 / -1; grid-row: 1;
  }
}
#stage-readout .r0920-game[data-r0920-open="1"] > .r0920-game-art {
  width: 64px; height: 56px; justify-self: end;
}
#stage-readout .r0920-game-steps {
  display: flex; gap: var(--sp-1); width: 100%; max-width: 192px;
}
#stage-readout .r0920-game-steps span {
  height: 4px; flex: 1; border-radius: 999px;
  background: var(--r-rule);
}
#stage-readout .r0920-game-steps .is-current { background: var(--gold2); }
#stage-readout .r0920-game-steps .is-done { background: var(--fg); }
#stage-readout .r0920-game-facegrid { max-width: 720px; align-self: center; }
#stage-readout .r0920-game-face {
  padding: var(--sp-1); border: 1px solid var(--r-rule); border-radius: var(--btn-radius);
  background: var(--bg); gap: var(--sp-1);
}
#stage-readout .r0920-game-face img { max-height: 240px; object-fit: contain; }
#stage-readout .r0920-game-result-faces { max-width: 600px; align-self: center; }
#stage-readout .r0920-game-tokenbank .btn {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
  min-height: 96px; padding: var(--sp-1);
}
#stage-readout .r0920-game-tokenbank .btn > span { min-width: 0; white-space: nowrap; }
#stage-readout .r0920-game-feedback { width: 100%; border-top: 1px solid var(--r-rule); }
#stage-readout .r0920-game-feedback > summary {
  display: list-item; min-height: var(--btn-h); padding-block: var(--sp-2);
  color: var(--fg2); font-family: 'DM Sans', system-ui, sans-serif;
  font-size: var(--fs-label); line-height: 1.5; cursor: pointer;
}
#stage-readout .r0920-game-feedback > .r0920-game-reasons { margin-top: var(--sp-2); }
#stage-readout .r0920-game-socket {
  flex-direction: column; justify-content: center; text-align: center;
  gap: var(--sp-1); min-height: 96px; border: 1px dashed var(--gold2);
  border-radius: var(--btn-radius);
}
#stage-readout .r0920-game-pair-note { margin: 0; font-size: var(--fs-label); }
#stage-readout .r0920-game-socket.is-filled {
  border: 1px solid var(--gold2); border-bottom-width: 2px;
  border-radius: var(--btn-radius); background: var(--surface2, var(--bg));
}
#stage-readout .r0920-game-receipt {
  border-style: solid; border-top-width: 4px;
  background: linear-gradient(160deg, var(--surface2, var(--bg)), var(--bg));
}
#stage-readout .r0920-game-own-lane {
  border-left: 2px solid var(--gold2); padding-left: var(--sp-2);
}
#stage-readout .r0920-game-own-note { margin: 0 0 var(--sp-2); }
#stage-readout .r0920-game-friend > .r0920-game-intro { font-size: var(--fs-label); }
#stage-readout .r0920-game-own-lane[hidden] { display: none !important; }
#stage-readout .r0920-game[data-game-state="complete"] > .r0920-game-art {
  width: 80px; height: 64px; justify-self: end;
}
#stage-readout .r0920-game-reveal .r0920-game-result-face-role {
  border-top: 1px solid var(--gold2); padding-top: var(--sp-1); color: var(--fg);
}
@media (max-width: 600px) {
  #stage-readout .r0920-game { padding: var(--sp-2); grid-template-columns: minmax(0, 1fr) 80px; }
  #stage-readout .r0920-game > .r0920-game-art { width: 80px; height: 72px; }
  #stage-readout .r0920-game-play { gap: var(--sp-2); margin-top: var(--sp-2); }
  #stage-readout .r0920-game-face img { max-height: 200px; }
  #stage-readout .r0920-game-seal-object { width: 56px; height: 56px; flex-basis: 56px; }
  #stage-readout .r0920-game-seal-object > .r0920-game-art { width: 40px; height: 40px; }
  #stage-readout .r0920-game-actions { gap: var(--sp-1); }
  #stage-readout .r0920-game-tokenbank .btn {
    flex-direction: column; gap: var(--sp-1); align-items: center; padding-inline: var(--sp-1);
  }
  #stage-readout .r0920-game-socket {
    flex-direction: column; justify-content: center; gap: var(--sp-1); text-align: center;
  }
}
@media (min-width: 375px) and (max-width: 700px) {
  #stage-readout .r0920-game-facegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #stage-readout .r0920-game-viewbar { display: none; }
  #stage-readout .r0920-game-facegrid[data-view="a"] > .r0920-game-face[data-choice="b"],
  #stage-readout .r0920-game-facegrid[data-view="b"] > .r0920-game-face[data-choice="a"] { display: flex; }
}
@media (max-width: 360px) {
  #stage-readout .r0920-game-tokenbank { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: no-preference) {
  #stage-readout .r0920-game button:active { transform: translateY(1px); }
  /* 2026-09-26. Only the surround moves. The knot and every ancestor stay still. */
  #stage-readout .r0920-game-reveal .r0920-game-seal-object::after {
    animation: game-ring-open 320ms ease-out both;
  }
  #stage-readout .r0920-game-socket.is-filled .r0920-game-art {
    animation: game-token-seat 220ms ease-out both;
  }
  #stage-readout .r0920-game-reveal .r0920-game-receipt,
  #stage-readout .r0920-game-reveal .r0920-game-score-plate,
  #stage-readout .r0920-game-reveal .r0920-game-result-face-role {
    animation: game-result-seat 220ms ease-out both;
  }
  #stage-readout .r0920-game:not(.r0920-game-trial)[data-game-state="invitation"]:focus-within > .r0920-game-art {
    animation: game-object-wake 240ms ease-out both;
  }
  /* Same finite motion after every accepted result, irrespective of its answer. */
  #stage-readout .r0920-game-trial[data-game-state="invitation"]:is(:hover, :focus-within) > .r0920-trial-scales,
  #stage-readout .r0920-game-trial:has(> .r0920-game-reveal) > .r0920-trial-scales,
  #stage-readout .r0920-game-trial[data-game-state="invitation"] > .r0920-trial-scales.r0920-trial-replay {
    --trial-beam: trial-beam-settle; --trial-left: trial-pan-left; --trial-right: trial-pan-right;
  }
  #stage-readout .r0920-trial-beam { animation: var(--trial-beam, none) 760ms ease-in-out; }
  #stage-readout .r0920-trial-pan-left { animation: var(--trial-left, none) 760ms ease-in-out; }
  #stage-readout .r0920-trial-pan-right { animation: var(--trial-right, none) 760ms ease-in-out; }
}
@keyframes trial-beam-settle {
  0%, 48%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-3deg); }
  74% { transform: rotate(2deg); }
}
@keyframes trial-pan-left {
  /* 2026-09-26. Contact tangled at phone size; keep the approved clear-gap fallback. */
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-4deg); }
  48% { transform: rotate(-8deg); }
  74% { transform: rotate(-2deg); }
}
@keyframes trial-pan-right {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(4deg); }
  48% { transform: rotate(8deg); }
  74% { transform: rotate(2deg); }
}
@keyframes game-ring-open {
  from { opacity: .7; transform: scale(1); }
  to { opacity: 0; transform: scale(1.24); }
}
@keyframes game-token-seat {
  from { opacity: .4; transform: translateY(-12px) scale(.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes game-result-seat {
  from { opacity: .6; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes game-object-wake {
  from { transform: translateY(0); }
  to { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  #stage-readout:has(.r0920-game) { animation: none !important; }
}
/* 2026-09-26. Restore Avery's rating shutter, pulse and refocus in the presentation
   layer. Calm defaults stay visible; only this adapter's current effect classes move. */
#stage-rate { animation: none !important; transform: none !important; }
#stage-rate .lens .face-img-wrap img {
  animation: none !important; transform: none;
  filter: none; clip-path: none !important;
}
#stage-rate:not(.r0920-loading) .lens .face-img-wrap img.r0920-refocus {
  animation: lensFocus 640ms var(--ease-heavy) !important;
}
#stage-rate .scale button.picked {
  outline: 2px solid var(--gold2); outline-offset: 3px;
}
#stage-rate .scale button { min-height: var(--btn-h); }
#stage-rate #batchPanel .batch-card {
  padding: var(--sp-3); border-radius: var(--btn-radius);
}
#stage-rate #batchPanel .row { gap: var(--sp-2); }
#stage-rate .lens, #stage-rate .lens.focus-lock {
  animation: none !important; transform: none; transition: none;
}
#stage-rate .lens.r0920-ack { animation: lensLock 500ms var(--ease-overshoot) !important; }
#stage-rate .lens.focus-lock:not(.r0920-ack) .lens-ring { animation: none; }
#stage-rate .lens.r0920-ack .lens-ring { animation: lensRingBurst 550ms var(--ease-luxury); }
#stage-rate .lens-shutter { display: block; animation: none; }
#stage-rate .lens.r0920-ack .lens-shutter { animation: shutterBlink 360ms var(--ease-heavy); }
#stage-rate .lens-reflection, #stage-rate .lens-vignette { display: block; }
#stage-rate .lens::before, #stage-rate .lens.spark::before {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  pointer-events: none; z-index: 7; background: none; border: 0;
  animation: none; box-shadow: none;
}
#stage-rate .lens.r0920-ack::before { animation: lensSpark 550ms var(--ease-luxury); }
@media (prefers-reduced-motion: reduce) {
  #stage-rate, #stage-rate *, #stage-rate *::before,
  #stage-rate *::after { animation: none !important; transition: none !important; }
  #stage-rate .lens::before { opacity: 0; }
  #stage-rate .lens .face-img-wrap img { transform: none; filter: none; }
}
/* 2026-09-26: Trial modes use the existing type, button and spacing contract. */
#stage-readout .r0920-roster-options { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3); }
#stage-readout .r0920-roster-option { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--btn-radius); min-width: 0; }
#stage-readout .r0920-roster-option > * { margin: 0; }
#stage-readout .r0920-roster-option > .btn { margin-top: auto; }
#stage-readout .r0920-roster-title { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: var(--fs-lead); line-height: 1.2; margin: 0; }
#stage-readout .r0920-roster-unavailable { font-family: 'DM Sans', sans-serif; font-size: var(--fs-label); line-height: 1.6; border-top: 1px solid var(--line); padding-top: var(--sp-2); }
#stage-readout .r0920-roster-receipt { display: grid; gap: var(--sp-2); padding-left: var(--sp-3); margin: 0; font-family: 'DM Sans', sans-serif; font-size: var(--fs-label); }
@media (max-width: 767px) {
  #stage-readout .r0920-roster-options { grid-template-columns: minmax(0, 1fr); }
  #stage-readout .r0920-roster-option { padding: var(--sp-2); }
  #stage-readout .r0920-roster-option > .btn { width: 100%; white-space: normal; }
}
/* 2026-09-30: Contact has no mobile tier tabs to replace its required selector. */
#page-contact .regal-form .interest-input-group { display: block; }

/* 2026-09-30: keep mobile hero captions inside their button boxes so the
   action rows can use the standard gap without overlapping a caption. */
@media (max-width: 768px) {
  .hero-ctas { gap: var(--sp-2); }
  .hero-ctas .btn { flex-direction: column; gap: var(--sp-1); }
  .hero-ctas .btn-sub {
    position: static;
    display: block;
    margin-top: 0;
    transform: none;
    color: inherit;
  }
}
/* The standalone challenge has a kicker outside the usual readout header. */
#stage-readout[aria-labelledby="friendTitle"] > .kicker { margin-bottom: var(--sp-1); }
#friendTitle { margin-top: 0; }

/* 2026-09-30: compact account profile step in the existing pool journey. */
.pool-profile-sheet { width: min(46rem, calc(100% - 32px)); margin: auto; }
.pool-profile-form { display: grid; gap: var(--sp-3); font-family: 'DM Sans', sans-serif; }
.pool-profile-form > * { margin: 0; }
.pool-profile-field { display: grid; gap: var(--sp-1); min-width: 0; }
.pool-profile-field input,.pool-profile-field select {
  box-sizing: border-box; width: 100%; min-height: 48px; padding: var(--sp-1);
  border: 1px solid var(--fg3); border-radius: var(--btn-radius);
  background: var(--bg); color: var(--fg); font: inherit; font-size: var(--fs-label);
}
.pool-profile-field legend { padding: 0; }
.pool-profile-ethnicity { border: 0; padding: 0; }
.pool-profile-check { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-label); }
.pool-profile-check input { flex: none; width: 20px; min-height: 20px; height: 20px; }
.pool-profile-note { font-size: var(--fs-label); line-height: 1.6; }
.pool-profile-london-details { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }
.pool-profile-london-details[hidden] { display: none; }
.pool-profile-form .pool-actions { margin: 0; }
@media (max-width: 600px) { .pool-profile-form .pool-actions { flex-direction: column; } }

/* 2026-10-01: profile titles and focus retain the house system. */
.pool-profile-form h3 { font-family: 'Cormorant Garamond', serif; font-size: var(--fs-lead); font-weight: 700; margin: 0; }
.pool-profile-form :focus-visible { outline: 2px solid var(--gold2); outline-offset: 4px; }
.pool-profile-field[hidden] { display: none; }

/* 2026-10-01: Testing Pool belongs to the page, rather than a stack of boxes. */
.pool-editorial {
  --fg: var(--navy, #1E293B); --fg2: var(--slate, #475569);
  --bg: var(--cream, #FAF6F1); --gold2: var(--gold, #D4A853);
  display: flex; flex-direction: column; gap: var(--sp-3); color: var(--fg);
  border: 0; border-top: 1px solid var(--gold2); border-radius: 0;
  padding: var(--sp-4) 0; margin-block: var(--seam); background: none; box-shadow: none;
  font-family: "DM Sans", sans-serif; text-align: left;
}
.pool-site-invitation { max-width: 68rem; margin-inline: auto; }
.pool-editorial h2 { font-family: "Cormorant Garamond", serif; font-weight: 700; font-size: var(--fs-h2); line-height: 1.1; margin: 0; max-width: 22ch; }
.pool-editorial p { font-size: var(--fs-body); line-height: 1.6; margin: 0; max-width: 62ch; }
.pool-editorial .pool-mark,.pool-editorial .pool-profile-note { font-size: var(--fs-label); }
.pool-editorial .pool-mark { color: var(--fg2); letter-spacing: .08em; }
.pool-editorial .pool-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: 0; align-items: center; }
.pool-text-action { appearance: none; background: none; border: 0; padding: 0; min-height: 48px; color: inherit; text-decoration: underline; text-underline-offset: .2em; font: 600 var(--fs-label)/1.5 "DM Sans", sans-serif; cursor: pointer; }
.pool-text-action:disabled { color: var(--fg2, var(--slate)); cursor: default; }
.pool-editorial :focus-visible,.pool-onboarding :focus-visible { outline: 2px solid var(--gold2); outline-offset: 4px; }
.pool-invitation.pool-editorial { max-width: 52rem; padding-inline: 0; border: 0; border-top: 1px solid var(--gold2); border-radius: 0; background: none; }
#stage-hero .pool-entry-invitation.pool-editorial { gap: var(--sp-2); margin-block: var(--sp-3); padding-block: var(--sp-3); }
#stage-hero .pool-entry-invitation h2 { font-size: var(--fs-lead); }
#stage-hero .pool-entry-invitation .pool-mark { display: none; }
.pool-editorial[hidden],.pool-onboarding [hidden] { display: none; }
.pool-editorial .pool-actions .pool-text-action { width: auto; }
body.ux-reading-page .pool-editorial { --fg: inherit; --fg2: inherit; --bg: inherit; --gold2: var(--gold); }
body.ux-reading-page .pool-editorial .pool-actions { flex-direction: row; }

/* 2026-10-01: a continuous page with one account-owned step at a time. */
#page-p2p { --fg: var(--navy); --fg2: var(--slate); --fg3: var(--maroon); --bg: var(--cream); --gold2: var(--gold); }
#page-p2p .p2p-inner { width: calc(100% - 2 * var(--sp-3)); max-width: 68rem; text-align: left; }
.pool-landing-head { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 48rem; }
#page-p2p .pool-landing-head .p2p-headline { margin: 0; font-size: var(--fs-h2); }
#page-p2p .pool-landing-head .p2p-context { margin: 0; max-width: 54ch; }
.pool-landing-head .pool-actions { margin: 0; align-items: center; }
.pool-landing-head p { margin: 0; }
.pool-onboarding { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(0, 2fr); gap: var(--sp-8); margin-block: var(--seam); padding-block: var(--sp-6); border-block: 1px solid var(--gold); text-align: left; }
.pool-onboarding h2 { font-family: "Cormorant Garamond", serif; font-size: var(--fs-h2); font-weight: 700; line-height: 1.1; margin: 0; }
.pool-onboarding h3 { font-family: "Cormorant Garamond", serif; font-size: var(--fs-lead); font-weight: 700; margin: 0; }
.pool-onboarding-track,.pool-onboarding-content,.pool-onboarding-content > form,.pool-onboarding-content #poolSignupBody { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.pool-onboarding p { margin: 0; font-size: var(--fs-body); line-height: 1.6; overflow-wrap: anywhere; }
.pool-onboarding .pool-profile-note,.pool-onboarding .pool-progress-state { font-size: var(--fs-label); }
.pool-onboarding .pool-progress { display: flex; flex-direction: column; gap: var(--sp-2); list-style: none; }
.pool-onboarding .pool-progress li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-1); border: 0; border-left: 2px solid var(--fg2); padding: var(--sp-1) var(--sp-2); }
.pool-onboarding .pool-progress li[data-step-state=current] { border-color: var(--gold2); background: var(--gold-light); }
.pool-onboarding .pool-progress li[data-step-state=complete] { border-color: var(--maroon); }
.pool-onboarding .pool-actions { margin: 0; align-items: center; }
.pool-onboarding .pool-inline-step.pool-sheet { position: static; width: 100%; max-width: none; max-height: none; overflow: visible; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.pool-inline-step .pool-photo-advice { border-top: 1px solid var(--gold2); }
.pool-inline-step #poolPhotoProgress { display: none; }
.pool-inline-step .pool-status:empty,.pool-onboarding #poolSignupBody:empty,.pool-onboarding #poolSignupControls:empty { display: none; }
.pool-profile-group { display: grid; gap: var(--sp-3); min-width: 0; }
.pool-onboarding input,.pool-onboarding select { font: inherit; font-size: var(--fs-label); }
.pool-onboarding input[type=email],.pool-onboarding input[type=text] { width: 100%; box-sizing: border-box; min-height: 48px; padding: var(--sp-2); border: 1px solid var(--fg3); border-radius: var(--btn-radius); color: var(--fg); background: var(--bg); }
.pool-onboarding .pool-profile-check { align-items: flex-start; line-height: 1.6; }
.pool-onboarding .pool-profile-check input { margin: var(--sp-1) 0 0; }
.pool-notify,.pool-future { margin-block: var(--sp-6); padding-block: var(--sp-3); border-bottom: 1px solid var(--gold); }
.pool-notify summary,.pool-future > summary { font: 600 var(--fs-label)/1.6 "DM Sans", sans-serif; min-height: 48px; cursor: pointer; color: var(--navy); }
.pool-notify .ux-interest { margin-block: var(--sp-3); padding: 0; border: 0; background: none; box-shadow: none; }
.pool-notify .hero-capture { margin-inline: 0; max-width: 32rem; }
.pool-future .pool-profile-note { margin-block: var(--sp-3); }
.pool-future .phase-tabs-wrapper { margin-top: var(--sp-3); }
.pool-site-invitation { width: calc(100% - 2 * var(--sp-4)); }
#page-home .pool-site-invitation { width: 100%; }
.pool-landing-head .pool-mark { color: var(--slate); }
@media(max-width: 899px) {
  .pool-onboarding { grid-template-columns: 1fr; gap: var(--sp-4); padding-block: var(--sp-4); }
  .pool-onboarding-track { gap: var(--sp-2); }
  .pool-onboarding-track h2 { font-size: var(--fs-lead); }
  .pool-onboarding .pool-progress { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pool-onboarding .pool-progress li { flex-direction: column; }
  .pool-onboarding-track > .pool-profile-note:last-of-type { display: none; }
}
@media(max-width: 600px) {
  .pool-onboarding .pool-actions { align-items: stretch; }
  .pool-onboarding .pool-actions > .btn { width: 100%; }
  .pool-editorial .pool-actions { gap: var(--sp-1); }
  .pool-editorial .pool-actions > .btn { width: auto; }
  .pool-site-invitation { width: calc(100% - 2 * var(--sp-3)); }
}

/* 2026-10-01: one invitation inside the dismissible waiting sheet. */
.pool-sheet .pool-journey { border: 0; background: transparent; padding: 0; box-shadow: none; }
.pool-sheet .pool-editorial { margin: 0; padding: var(--sp-3) 0 0; }

.pool-inline-step { scroll-margin-top: calc(var(--sp-8) + var(--sp-3)); }

#stage-hero .pool-entry-invitation.pool-editorial { gap: var(--sp-1); padding-block: var(--sp-2); }
#stage-hero .pool-entry-invitation p { font-size: var(--fs-label); }
#stage-hero .pool-entry-invitation .pool-actions { flex-direction: row; gap: var(--sp-3); }

.pool-invitation.pool-editorial h2,.pool-invitation.pool-editorial > p { margin: 0; }

/* 2026-10-02: file-free story previews retain the existing card dimensions. */
.ux-story-preview canvas, .r0920-clause-card canvas, .r0920-clause-story canvas { display: block; width: 100%; height: auto; border-radius: var(--r-card); }
.story-view [data-story-image] canvas { display: block; width: 100%; max-width: 440px; height: auto; margin: var(--sp-4) auto; }
.r0920-clause-dialog canvas { display: block; width: 100%; max-width: 440px; height: auto; }

/* 2026-10-03: Taste Test portraits share the reading palette and keep equal
   physical A/B presentation. Only one portrait is painted at phone widths. */
#stage-readout .r0920-game-taste { --taste-rule: var(--gold2); }
#stage-readout .r0920-game-taste .r0920-game-play { width: 100%; }
#stage-readout .r0920-taste-portraits {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3); width: 100%; align-items: start;
}
#stage-readout .r0920-taste-portrait {
  min-width: 0; padding: var(--sp-2); border: 1px solid var(--border3, var(--r-rule));
  border-radius: var(--btn-radius); background: var(--bg);
}
#stage-readout .r0920-taste-portrait[hidden] { display: none !important; }
#stage-readout .r0920-taste-portrait h5 {
  margin: 0 0 var(--sp-2); font: 700 var(--fs-lead)/1.4 'Cormorant Garamond', Georgia, serif;
  color: var(--fg);
}
#stage-readout .r0920-taste-portrait img {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--btn-radius); background: var(--surface2);
}
#stage-readout .r0920-taste-view-state {
  margin: var(--sp-2) 0 0; color: var(--fg2);
  font: 600 var(--fs-label)/1.5 'DM Sans', system-ui, sans-serif;
}
#stage-readout .r0920-taste-switch { display: none; }
#stage-readout .r0920-taste-choices {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); width: 100%;
}
#stage-readout .r0920-taste-choices .btn, #stage-readout .r0920-taste-save,
#stage-readout .r0920-taste-switch-option { min-height: var(--btn-h); }
#stage-readout .r0920-taste-choice[aria-pressed="true"],
#stage-readout .r0920-taste-switch-option[aria-pressed="true"] {
  border-color: var(--taste-rule); background: var(--btn-fill); color: var(--btn-ink);
}
#stage-readout .r0920-taste-choice:disabled { cursor: default; }
#stage-readout .r0920-taste-reveal-list {
  display: grid; gap: var(--sp-2); width: 100%; margin: 0; padding-left: var(--sp-4);
  color: var(--fg); font: 500 var(--fs-body)/1.5 'DM Sans', system-ui, sans-serif;
}
.r0920-taste-help {
  width: min(90vw, 30rem); max-height: 80vh; padding: var(--sp-4);
  border: 1px solid var(--gold2); border-radius: var(--btn-radius);
  background: var(--bg); color: var(--fg); font-family: 'DM Sans', system-ui, sans-serif;
}
.r0920-taste-help::backdrop { background: rgb(15 23 42 / .7); }
.r0920-taste-help h4 { margin: 0 0 var(--sp-2); font: 700 var(--fs-lead)/1.2 'Cormorant Garamond', Georgia, serif; }
.r0920-taste-help p { line-height: 1.5; }
.r0920-taste-help button { min-height: var(--btn-h); }
@media (max-width: 600px) {
  #stage-readout .r0920-taste-switch { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-1); width: 100%; }
  #stage-readout .r0920-taste-switch-option {
    border: 1px solid var(--border3, var(--r-rule)); border-radius: var(--btn-radius);
    background: var(--surface2); color: var(--fg); font: 600 var(--fs-label)/1.5 'DM Sans', system-ui, sans-serif;
  }
  #stage-readout .r0920-taste-portraits { grid-template-columns: minmax(0, 1fr); }
  #stage-readout .r0920-taste-portrait { width: 100%; }
  #stage-readout .r0920-taste-choices .btn { flex: 1 1 calc(50% - var(--sp-2)); }
  #stage-readout .r0920-taste-save { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  #stage-readout .r0920-game-taste *, #stage-readout .r0920-game-taste *::before,
  #stage-readout .r0920-game-taste *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* 2026-10-04: one chapter, compact rows and preserved play surfaces. */
#stage-readout .r0920-play-shelf {
  width: 100%; max-width: 960px; margin: var(--sp-4) auto; padding: var(--sp-3);
  border: 1px solid var(--r-rule); border-radius: var(--btn-radius); background: var(--bg); color: var(--fg);
}
#stage-readout .r0920-play-shelf > h2 { margin: 0; font: 700 var(--ux-title)/1.2 'Cormorant Garamond', Georgia, serif; }
#stage-readout .r0920-shelf-intro { margin: var(--sp-1) 0 var(--sp-3); font: 400 var(--fs-body)/1.5 'DM Sans', sans-serif; color: var(--fg2); }
#stage-readout .r0920-shelf-slot[hidden], #stage-readout .r0920-game [hidden],
#stage-readout .r0920-shelf-pool[hidden] { display: none !important; }
#stage-readout .r0920-game[data-shelf-mounted] {
  overflow: visible;
  display: block; width: 100%; max-width: none; margin: 0; padding: var(--sp-2) 0;
  border: 0; border-top: 1px solid var(--r-rule); border-radius: 0; background: transparent;
}
#stage-readout .r0920-game[data-shelf-mounted] > :is(.r0920-game-mark,.r0920-game-title,.r0920-game-art,.r0920-game-mode) { display: none; }
#stage-readout .r0920-game[data-shelf-mounted]:not([data-r0920-open="1"]) > .r0920-game-status { display: none; }
#stage-readout .r0920-shelf-row { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; gap: var(--sp-2); align-items: center; }
#stage-readout .r0920-shelf-motif { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-1); color: var(--gold2); font: 600 var(--fs-label)/1.5 'DM Sans', sans-serif; }
#stage-readout .r0920-shelf-motif .r0920-game-art { width: 48px; height: 48px; animation: none; }
#stage-readout .r0920-game-taste .r0920-shelf-motif { flex-wrap: nowrap; gap: calc(var(--sp-1) / 4); }
#stage-readout .r0920-game-taste .r0920-shelf-motif span { width: 4px; height: 4px; border-radius: 50%; background: var(--gold2); font-size: 0; flex: 0 0 auto; }
#stage-readout .r0920-shelf-title { margin: 0; text-align: left; font: 700 var(--fs-lead)/1.2 'Cormorant Garamond', Georgia, serif; color: var(--fg); }
#stage-readout .r0920-shelf-proposition { margin: var(--sp-1) 0; text-align: left; font: 400 var(--fs-body)/1.5 'DM Sans', sans-serif; color: var(--fg2); overflow-wrap: anywhere; }
#stage-readout .r0920-shelf-meta, #stage-readout .r0920-shelf-chip { margin: 0; font: 500 var(--fs-label)/1.5 'DM Sans', sans-serif; color: var(--fg2); }
#stage-readout .r0920-shelf-chip { display: inline-block; margin-top: var(--sp-1); padding: 0 var(--sp-1); border: 1px solid var(--r-rule); border-radius: var(--btn-radius); }
#stage-readout .r0920-shelf-action { min-width: 144px; max-width: 100%; white-space: normal; min-height: var(--btn-h); }
#stage-readout .r0920-shelf-back { position: sticky; top: var(--r0920-shelf-top, var(--sp-8)); z-index: 3; margin: var(--sp-3) 0 var(--sp-2); min-height: var(--btn-h); background: var(--bg); }
#stage-readout .r0920-game[data-shelf-mounted] > .r0920-game-play { margin-top: var(--sp-2); width: 100%; }
#stage-readout .r0920-shelf-detail { width: 100%; }
#stage-readout .r0920-shelf-detail > summary { min-height: var(--btn-h); cursor: pointer; font: 600 var(--fs-label)/1.5 'DM Sans', sans-serif; color: var(--fg); padding-block: var(--sp-2); }
#stage-readout .r0920-shelf-pool { margin: var(--sp-3) 0 0; padding: var(--sp-3) 0 0; border: 0; border-top: 1px solid var(--r-rule); background: transparent; }
#stage-readout .r0920-play-shelf[data-shelf-playing="1"] .r0920-shelf-pool { display: none !important; }
#stage-readout .r0920-shelf-pool p { margin: 0 0 var(--sp-2); font: 400 var(--fs-body)/1.5 'DM Sans', sans-serif; color: var(--fg2); }
@media (max-width: 600px) {
  #stage-readout .r0920-play-shelf { padding: var(--sp-2); }
  #stage-readout .r0920-shelf-row { grid-template-columns: 32px minmax(0,1fr); gap: var(--sp-1); }
  #stage-readout .r0920-shelf-motif .r0920-game-art { width: 32px; height: 32px; }
  #stage-readout .r0920-shelf-action { grid-column: 2; justify-self: start; min-width: 0; }
  #stage-readout .r0920-taste-switch { position: sticky; top: calc(var(--r0920-shelf-top, var(--sp-8)) + var(--btn-h) + var(--sp-1)); z-index: 2; padding-block: var(--sp-1); background: var(--bg); }
}
@media (prefers-reduced-motion: reduce) {
  #stage-readout .r0920-play-shelf *, #stage-readout .r0920-play-shelf *::before,
  #stage-readout .r0920-play-shelf *::after { animation: none !important; transition: none !important; }
}

/* 2026-10-04: operable hidden rail, truthful hover and full Mix labels. */
@media (max-width: 700px) {
  #roRail.r0920-away { visibility: hidden !important; }
  #stage-readout #roRail.r0920-bar.r0920-away:focus-within { visibility: visible !important; opacity: 1; transform: none; pointer-events: auto; }
}
#stage-readout .r0920-shelf-back:hover { background: var(--btn2-hover-bg); color: var(--btn2-hover-ink); }
#stage-readout .r0920-game-tokenbank .btn > span { white-space: normal; overflow-wrap: break-word; text-wrap: balance; }
.r0920-export-requirement { font-family: 'DM Sans', sans-serif; font-size: var(--fs-label); margin-block: var(--sp-2); }


/* 2026-10-04: measured contrast, focus, targets and native dialog geometry. */
#stage-readout > #readoutSub { margin-inline: auto; }
#stage-readout > h2 em, #stage-readout .r0920-game-progress, #stage-readout .r0920-game-result-mark,
#stage-pool-lock .pool-mark { color: var(--btn-line); }
:is(.btn-ghost,.scale-back,.finer-toolbar button,.ri-copy,.verify-resend,.recover-toggle,
.r0920-shelf-action,.r0920-shelf-back,.ro-rail-tick,.r0920-story-nav button,
.pool-text-action,.pool-invitation button,.pool-profile-sheet input,.pool-profile-sheet select,
.pool-sheet button,.pool-sheet input,.pool-sheet select,.pool-journey button,.pool-journey input,
.r0920-game button,.r0920-game input,.r0920-game a,.r0920-friend-sheet button):focus-visible,
#poolEmail:focus-visible,#recoverInput:focus-visible,#verifyCode:focus-visible,
.ln-consent input:focus-visible,.pool-editorial :focus-visible,.pool-onboarding :focus-visible {
 outline: 2px solid var(--btn-line); outline-offset: 4px;
}
#dobDay,#dobMonth,#dobYear,#locInput,#poolEmail,#recoverInput,#verifyCode,
#notifyName,#notifyEmail,.pool-sheet input:not([type=checkbox]),.pool-sheet select,
.pool-onboarding input:not([type=checkbox]),.pool-onboarding select { border-color: var(--fg3); }
[data-theme="dark"] #page-p2p { --fg3: var(--slate); }
.fc-notice a,.ln-consent a,.pool-consent a,.pool-onboarding label a { color:var(--btn-line); text-decoration:underline; text-underline-offset:.2em; }
dialog.pool-sheet,dialog.r0920-taste-help,dialog.r0920-clause-dialog { margin:auto; }
#readoutBody .r0920-order .r0920-seg button,.scale-back,.finer-replay { min-height:48px; }
.scale-back { min-width:48px; }
#stage-readout .r0920-game-actions,#stage-readout .r0920-game-choicebar,#stage-readout .r0920-game-tokenbank,#readoutBody .r0920-order .r0920-seg { gap:var(--sp-2); }
.ro-rail-tick { min-width:24px; min-height:24px; }
#batchPanel h2,#batchPanel h3 { font-weight:700; }
@media(prefers-reduced-motion:reduce) {
 #stage-hero *,#stage-hero *::before,#stage-hero *::after { animation:none !important; transition:none !important; }
}



/* 2026-10-04: retain layout while keeping the protected visibility arithmetic false. */
html.r0920-games-checking #stage-readout > .eye-print-faces .epf-pair,
html.r0920-games-pending #stage-readout > .eye-print-faces .epf-pair,
html.r0920-games-blind #stage-readout > .eye-print-faces .epf-pair { transform:translateY(-100000px) !important; }
#stage-entry #entryForm :focus-visible,#stage-readout #readoutBody :focus-visible,
#stage-readout #share-section :focus-visible,#stage-readout .eye-print-faces :focus-visible,
#stage-readout .r0920-game :focus-visible,.r0920-friend-header a:focus-visible,
.ro-rail-tick:focus-visible,.story-dialog button:focus-visible,.bg-fig:focus-visible,
.ln-card > summary:focus-visible,.pool-check input:focus-visible,
#dobDay:focus-visible,#dobMonth:focus-visible,#dobYear:focus-visible,#locInput:focus-visible {
 outline:2px solid var(--btn-line); outline-offset:4px;
}
#stage-readout > h2 em { color:var(--btn-line) !important; }
#stage-readout .r0920-game-mark,#stage-readout .r0920-game-result-mark,
#stage-readout .r0920-game-progress,#stage-readout .r0920-game-receipt-title,
#stage-readout .r0920-game-guess-label { color:var(--btn-line); }
.hero-capture #notifyName,[data-theme="dark"] .hero-capture #notifyName { border-color:var(--fg3,var(--slate)); }
#stage-entry .choice { min-height:48px; }
#roRail .ro-rail-tick { min-height:44px; }
#batchPanel .batch-title,#stage-hero h1,#stage-hero .hero-step .n { font-weight:700; }


/* 2026-10-04: the ambient halo stays viewport-sized across stage entrance. */
#stage-hero.active { animation:none; }
#stage-hero .hero-halo { position:fixed; inset:0; width:100%; height:100dvh; }
html.r0920-games-checking #stage-readout > .eye-print-faces .epf-pair,
html.r0920-games-pending #stage-readout > .eye-print-faces .epf-pair,
html.r0920-games-blind #stage-readout > .eye-print-faces .epf-pair { transition:none !important; }
/* 2026-10-04: settled consent-link focus and focused field boundaries. */
.fc-scrim a:focus-visible { outline:2px solid var(--btn-line); outline-offset:4px; }
#dobDay:focus,#dobMonth:focus,#dobYear:focus,#locInput:focus { border-color:var(--fg3); }
#batchTitle { font-weight:700; }

/* 2026-10-04: full chapter target, with the existing small dot art. */
#roRail .ro-rail-tick { min-width:44px; }

/* 2026-10-04: keep the footer below the viewport during an automatic stage rebuild. */
.ux-reading-page main { min-height:100vh; min-height:100svh; }

/* 2026-10-04: reserve the pending chapter without interactive game offers. */
#stage-readout .r0920-play-shelf[data-shelf-pending="1"] { min-height:calc(var(--sp-8) * 3); }

/* 2026-10-04: legal section titles follow the documented title weight. */
.legal h2 { font-weight:700; }

/* 2026-10-04: show the existing carousel focus ring without a colour fade. */
#why-harmonia .pagination-dot:focus-visible { outline:3px solid var(--ux-accent); outline-offset:8px; transition:none; }

/* 2026-10-04: access and Pool steps use the existing type and spacing scale. */
body #stage-pool-lock { padding-top:var(--sp-3); min-height:0; }
body #stage-pool-lock h1 { margin-block:var(--sp-2); font-size:var(--fs-h2); }
body #stage-pool-lock h1:focus { outline:none; }
body #stage-pool-lock .pool-lock-lead,body #stage-pool-lock .pool-lock-kept { font-size:var(--fs-label); line-height:1.5; margin-block:var(--sp-2); }
body #stage-pool-lock > .pool-text-action { display:inline-flex; align-items:center; margin-top:var(--sp-2); }
body #stage-pool-lock .pool-actions { margin-top:var(--sp-2); gap:var(--sp-1); }
#pool-first-access-note { max-width:64ch; margin:var(--sp-3) auto; font-size:var(--fs-label); line-height:1.5; }
#pool-access-warning { margin-block:var(--sp-3); }
#pool-readout-invitation,#pool-face-invitation,#pool-enrolment-status { margin-block:var(--seam); padding-block:var(--sp-3); }
#ux-pool-share { display:none !important; }
dialog.pool-wait-sheet { max-width:32rem; padding:var(--sp-3); }
dialog.pool-wait-sheet h2 { font-size:var(--fs-lead); }
dialog.pool-wait-sheet .pool-journey { margin-top:var(--sp-2); }
dialog.pool-wait-sheet p { font-size:var(--fs-label); line-height:1.5; margin:0; }
dialog.pool-wait-sheet .pool-actions { gap:var(--sp-1); margin-top:var(--sp-2); }
.pool-onboarding h2,.pool-inline-step h2 { scroll-margin-top:calc(var(--site-nav-h,64px) + var(--sp-3)); }
#poolPhotoChosen { width:100%; max-height:calc(100dvh / 3); object-fit:contain; }
#poolPhotoSend { scroll-margin-block:var(--sp-3); }
.pool-error-summary { border-left:2px solid var(--btn-line); padding:var(--sp-2); display:grid; gap:var(--sp-2); }
.pool-error-summary ul { margin:0; padding-left:var(--sp-3); }
.pool-field-error { color:var(--btn-line); font-size:var(--fs-label) !important; margin-top:var(--sp-1) !important; }
.pool-profile-form [aria-invalid=true] { border-color:var(--btn-line); }
.pool-landing-head p,.pool-site-invitation p { max-width:52ch; }
.pool-signed-in .pool-landing-head { display:none; }

/* 2026-10-04: fewer open-game controls, full portraits, explicit card selection. */
body:has(.r0920-play-shelf[data-shelf-playing="1"]) #epfReadyPopup { visibility: hidden !important; }
#stage-readout .r0920-game[data-r0920-open="1"] .r0920-shelf-proposition,
#stage-readout .r0920-game[data-r0920-open="1"] .r0920-shelf-meta,
#stage-readout .r0920-game[data-r0920-open="1"] .r0920-shelf-chip { display: none; }
#stage-readout .r0920-taste-portrait img { object-fit: scale-down; }
.story-dialog .story-actions { display: flex; }
.story-dialog .story-explanation { display: block; }
.story-selection { margin: var(--sp-2) 0; padding: var(--sp-1); border: 1px solid var(--border3); }
.story-selection label { display: flex; align-items: center; gap: var(--sp-1); min-height: 44px; font-size: var(--fs-label); line-height: 1.4; }
.story-selection input { width: 22px; height: 22px; flex-shrink: 0; }
.story-selection input:focus-visible { outline: 2px solid var(--gold2); outline-offset: 4px; }
.r0920-trial-secondary summary { min-height: 44px; padding: var(--sp-3) 0; cursor: pointer; }
.r0920-ready-notice { max-width: min(480px, calc(100vw - 32px)); max-height: 90dvh; overflow: auto; padding: var(--sp-3); color: var(--fg); background: var(--bg); border: 1px solid var(--border3); }
.r0920-ready-notice .btn { margin: var(--sp-1) var(--sp-1) 0 0; }
.r0920-games-friend #stage-readout { padding-top: var(--sp-2); }
.r0920-games-friend #stage-readout > h2,
.r0920-games-friend #readoutSub,
.r0920-games-friend .r0920-game-friend > .r0920-game-mark { display: none; }
.r0920-games-friend #stage-readout .r0920-game-friend { margin-top: 0; }
.r0920-friend-disclosure { font-size: var(--fs-label); line-height: 1.4; margin-block: var(--sp-1); }
.r0920-friend-terms { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 600px) {
  #stage-readout .r0920-shelf-back, #stage-readout .r0920-taste-switch { position: static; }
  #stage-readout .r0920-game-taste .r0920-game-hud,
  #stage-readout .r0920-game-taste .r0920-game-play > .r0920-game-reading-note,
  #stage-readout .r0920-taste-portrait h5 { display: none; }
  #stage-readout .r0920-game-taste .r0920-taste-help-button { min-height: 44px; margin: 0; padding-block: var(--sp-1); }
  #stage-readout .r0920-taste-portrait img { height: min(30dvh, 224px); aspect-ratio: auto; }
  #stage-readout .r0920-game-taste .r0920-game-title { margin-block: var(--sp-1); }
  #stage-readout .r0920-taste-switch { margin-block: var(--sp-1); }
  #stage-readout .r0920-taste-choices { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sp-1); }
  #stage-readout .r0920-taste-choices .btn { min-width: 0; min-height: 44px; padding: var(--sp-1); font-size: var(--fs-label); }
  #stage-readout .r0920-game-friend .r0920-game-portraits img { max-height: 220px; object-fit: scale-down; }
}

/* 2026-10-04: preserve every source edge in completed game portraits too. */
#stage-readout .r0920-game-result-face img { object-fit: scale-down; }

/* 2026-10-04: the friend shell uses its actual h1 and one ordered content column. */
.r0920-games-friend #friendTitle { display: none; }
.r0920-games-friend #stage-readout .r0920-game-friend { display: block; }
.r0920-games-friend .r0920-game-friend > .r0920-game-intro { display: none; }
#share-section [data-inline-share] { display: inline-flex; }
/* 2026-10-04: isolated recovery has one fixed header and a scrollable reading context. */
.session-navigation-stage { max-width: 52rem; margin-inline: auto; text-align: center; }
.session-navigation-stage > p { max-width: 64ch; margin: var(--sp-2) auto; }
.session-navigation-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-3); }
dialog.session-preview-dialog { width: min(64rem, calc(100vw - 32px)); height: 90dvh; max-height: 90dvh; max-width: none;
  padding: var(--sp-3); margin: auto; border: 1px solid var(--border3); border-radius: var(--btn-radius); background: var(--bg); color: var(--fg); }
dialog.session-preview-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--sp-2); }
.session-preview-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-1) var(--sp-2); align-items: center; }
.session-preview-heading h2 { margin: 0; text-align: left; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; font-size: var(--fs-lead); }
.session-preview-heading p { grid-column: 1; margin: 0; max-width: 64ch; font-size: var(--fs-label); line-height: 1.5; }
.session-preview-heading button { grid-column: 2; grid-row: 1 / 3; }
.session-preview-frame { display: block; width: 100%; height: 100%; min-height: 0; border: 0; }
html.recovery-preview-context #siteHeader,html.recovery-preview-context #siteFooter { display: none !important; }
html.recovery-preview-context body { padding-top: 0 !important; }
html.recovery-preview-context .eye-print-faces,html.recovery-preview-context .r0920-play-shelf,
html.recovery-preview-context #recoveryHolder,html.recovery-preview-context #rateMoreBtn { display: none !important; }
html.recovery-preview-context #stage-pool-lock .pool-actions,
html.recovery-preview-context #stage-pool-lock > .pool-text-action { display: none !important; }
@media (max-width: 600px) {
  dialog.session-preview-dialog { padding: var(--sp-2); }
  .session-preview-heading { grid-template-columns: minmax(0, 1fr); }
  .session-preview-heading button { grid-column: 1; grid-row: auto; justify-self: start; }
}

/* 2026-10-04: progress first, shared invitation alignment and short-screen controls. */
#stage-hero:has(#beginBtn[hidden]) { padding-top: var(--sp-3); }
#stage-hero:has(#beginBtn[hidden]) > .hero-eye { display: none; }
#stage-hero > #resumeNote[style*="block"] { display: grid !important; grid-template-columns: 1fr;
  width: 100%; max-width: 30rem; margin-inline: auto; gap: var(--sp-2); }
#stage-hero #resumeNote > .row { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); margin-top: 0; }
#stage-hero #resumeNote > #resumeText { line-height: 1.5; }
#stage-hero #resumeNote .btn { min-height: 48px; width: 100%; }
#stage-hero #resumeNote #freshBtn,#stage-hero #resumeNote #otherCode { justify-self: center; width: auto; }
.pool-invitation.pool-editorial { width: 100%; margin-inline: auto; gap: var(--sp-2); }
#stage-hero .pool-entry-invitation.pool-editorial { margin-top: var(--sp-4); padding-block: var(--sp-3); }
.pool-editorial .pool-actions,#stage-hero .pool-entry-invitation .pool-actions,
dialog.pool-wait-sheet .pool-actions { gap: var(--sp-2); }
.pool-invitation p,.session-navigation-stage p { max-width: 52ch; }
.r0920-shelf-slots { display: grid; gap: var(--sp-2); }
.r0920-shelf-slot[hidden] { display: none !important; }
.story-selection { display: grid; gap: var(--sp-2); }
.story-selection label { min-height: 48px; }
.fc-scrim { padding: var(--sp-2) !important; }
.fc-scrim > .batch-card { max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); }
.fc-scrim > .batch-card > * { margin: 0 !important; }
.fc-scrim > .batch-card[data-r0920-consent-fit] { overflow: hidden; }
.r0920-consent-copy { display: flex; flex-direction: column; gap: var(--sp-2); min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.r0920-consent-copy > * { margin: 0 !important; flex-shrink: 0; }
.fc-scrim > .batch-card > .row { flex-shrink: 0;
  padding-block: var(--sp-2); background: var(--bg); gap: var(--sp-2) !important; }
.fc-scrim .row .btn { min-height: 48px; }
.dv-controls button,.finer-toolbar button,.ux-features button,.bg-fig,.ro-rail-tick,.ep-sw { min-height: 48px; }
#stage-readout #roRail .ro-rail-tick,#stage-readout #roRail.r0920-bar .ro-rail-tick,
.ep-glyph-swatches .ep-sw { min-height: 48px; }
html.recovery-preview-context footer,html.recovery-preview-context #backTop { display: none !important; }

@media(max-width: 699.98px) {
  #stage-rate .scale-row-wrap { display: flex; flex-direction: column; gap: var(--sp-1); }
  #stage-rate .scale-row-wrap.has-back { padding-top: 0; }
  #stage-rate .scale-back { position: static; transform: none; align-self: flex-start; }
  #stage-rate #scaleRow { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: var(--sp-1); width: 100%; }
  #stage-rate #scaleRow button { width: 100%; min-width: 0; height: 48px; }
}
@media(max-width: 699.98px) and (max-height: 750px) {
  #stage-rate .lens { width: min(68vw,calc(100dvh - 384px),256px); margin-top: var(--sp-2); }
  #stage-rate #rateTally { display: none; }
  #stage-rate .scale-q { font-size: var(--fs-body); line-height: 1.4; }
  #stage-rate .scale-hintkeys { display: none; }
  #stage-rate:has(#scaleBack:not([style*="none"])) .lens { width: min(68vw,calc(100dvh - 416px),224px); }
}
@media(max-height: 500px) and (min-width: 600px) {
  #stage-rate #rateArea { display: grid !important; grid-template-columns: minmax(128px,192px) minmax(0,1fr); gap: var(--sp-3); align-items: center; }
  #stage-rate .lens,#stage-rate:has(#scaleBack:not([style*="none"])) .lens { width: min(42dvh,192px); margin: 0 auto; }
  #stage-rate #rateTally,#stage-rate .scale-hintkeys { display: none; }
  #stage-rate #rateArea > .scale-wrap { margin: 0; width: 100%; }
  #stage-rate .scale-q { font-size: var(--fs-body); line-height: 1.4; }
  #stage-rate .scale { margin-top: 0; }
  #stage-rate .scale-row-wrap { padding-top: 0; }
  #stage-rate .scale-wrap { display: block; }
  #stage-rate .scale-ends { display: flex; justify-content: space-between; gap: var(--sp-1); margin-top: var(--sp-1); }
  #stage-rate .scale-ends > :nth-child(2) { margin-top: 0; }
  #stage-rate .scale-back { position: static; transform: none; }
  #stage-rate .scale-row-wrap { display: flex; flex-direction: column; gap: var(--sp-1); }
  #stage-rate #scaleRow { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: var(--sp-1); width: 100%; }
  #stage-rate #scaleRow button { width: 100%; min-width: 0; }
}
/* 2026-10-04: the friend route has its own normal-flow header. */
@media(max-width: 600px) {
  html.r0920-games-friend body { padding-top: 0; }
  html.r0920-games-friend #stage-readout > #readoutBody { margin-top: 0; }
  html.r0920-games-friend #stage-readout .r0920-game-friend { padding: var(--sp-1); }
  html.r0920-games-friend #stage-readout .r0920-game-play { margin-top: var(--sp-1); }
  html.r0920-games-friend #stage-readout .r0920-game-hud { padding-bottom: 0; }
  #stage-readout .r0920-game[data-shelf-mounted][data-r0920-open="1"] { display: grid;
    grid-template-columns: minmax(0,1fr) auto; column-gap: var(--sp-1); row-gap: var(--sp-1); padding-block: var(--sp-1); }
  #stage-readout .r0920-game[data-shelf-mounted][data-r0920-open="1"] > * { grid-column: 1 / -1; }
  #stage-readout .r0920-game[data-shelf-mounted][data-r0920-open="1"] > .r0920-shelf-row {
    grid-column: 1; grid-row: 1; display: flex; flex-wrap: wrap; gap: var(--sp-1); }
  #stage-readout .r0920-game[data-shelf-mounted][data-r0920-open="1"] .r0920-shelf-motif { display: none; }
  #stage-readout .r0920-game[data-shelf-mounted][data-r0920-open="1"] .r0920-shelf-title { font-size: var(--fs-lead); line-height: 1.2; }
  #stage-readout .r0920-game[data-shelf-mounted][data-r0920-open="1"] > .r0920-shelf-back {
    grid-column: 2; grid-row: 1; position: static; margin: 0; min-height: 48px; padding: var(--sp-1) var(--sp-2); }
  #stage-readout .r0920-game[data-shelf-mounted][data-r0920-open="1"] > .r0920-shelf-modes {
    grid-column: 1 / -1; grid-row: 2; margin: 0; justify-self: start; min-height: 48px; padding: var(--sp-1) var(--sp-2); }
  #stage-readout .r0920-game[data-shelf-mounted][data-r0920-open="1"] > .r0920-game-play { margin-top: 0; gap: var(--sp-1); }
}
/* 2026-10-04: the mounted shelf supplies the sole reading exit in every game state. */
#stage-readout .r0920-game[data-shelf-mounted] .r0920-game-play .r0920-game-footer-back { display: none; }
#stage-readout .r0920-game-taste .r0920-taste-help-button { min-height: 48px; }
/* 2026-10-04: keep friend disclosure and first portrait in one compact column. */
html.r0920-games-friend body > .r0920-friend-header { padding: var(--sp-1) var(--sp-2); margin: 0; min-height: 56px; }
html.r0920-games-friend #stage-readout { padding-block: var(--sp-1); }
html.r0920-games-friend #stage-readout::before { display: none; }
html.r0920-games-friend #stage-readout .r0920-game-friend { padding: var(--sp-2); }
html.r0920-games-friend #stage-readout .r0920-game-play { gap: var(--sp-1); }
@media (max-width: 600px) {
  html.r0920-games-friend #stage-readout .r0920-game-friend { padding: var(--sp-1); }
  .r0920-games-friend #stage-readout .r0920-game-face img { height: min(28dvh, 200px); aspect-ratio: auto; object-fit: scale-down; }
.r0920-games-friend #stage-readout .r0920-game-face { aspect-ratio: auto; }
}
/* 2026-10-04: the narrow radar keeps its labels above the rendered type floor. */
@media(max-width: 360px) { #readoutBody svg.ro-radar text { font-size: var(--fs-body); } }
@media(max-width: 360px) { #readoutBody .ro-radar-wrap { padding-inline: var(--sp-2); } }
.r0920-consent-copy:focus-visible { outline: 2px solid var(--btn-line); outline-offset: 4px; }
/* 2026-10-05 DESIGN PASS, PART 1: ONE PAGE EDGE AND ONE AXIS PER BLOCK.
   Avery, 5 October: "the padding, the centering, and the positioning on the website still looks quite bad on
   certain sections". Measured before this block (synthetic states, API stubbed): at 1280px the header logo sat at
   192px, the Testing Pool page at 91px, the readout invitations at 224px and the footer at 51px; at 1024px the
   reading started at 60px and 80px under a logo at 24px; at 390px three readout blocks sat 16px inside the rest.
   Causes: the footer's own 1400px box and clamp padding, the Pool surfaces' 68rem and 52rem boxes, and a relative
   track (100% less a gutter) reused at nested depths, so each level indented again.
   The rule now: one track, defined once (--page-track). The header, every page section, the readout, every Pool
   surface and the footer start on its left edge at every width. Narrow reading measures belong to text (ch caps
   on paragraphs and titles), never to a box that would move a left edge.
   Gutters: 16px to 480px and 24px to 1050px, which are the header's own paddings at those widths. */
@media (max-width: 1050px) { :root { --page-track: calc(100% - 2 * var(--sp-3)); } }
@media (max-width: 480px) { :root { --page-track: calc(100% - 2 * var(--sp-2)); } }
@media (min-width: 1051px) { :root nav.site-header { padding-inline: calc((100% - var(--page-track)) / 2); } }
:root .site-footer { padding-inline: calc((100% - var(--page-track)) / 2); }
:root .site-footer-inner { max-width: 1200px; }
.pool-site-invitation.pool-feature,#page-p2p .p2p-inner { width: var(--page-track); max-width: 1200px; margin-inline: auto; }
#page-home .container > .pool-site-invitation.pool-feature { width: 100%; }
/* the reading page: <main>'s own gutter is the track below 1051px, so the readout fills it rather than shrinking again */
#stage-readout,#readoutBody.folio-body { --ro-measure: 100%; }
@media (max-width: 1050px) {
  .ux-reading-page main { padding-inline: var(--sp-3); }
  .ux-reading-page main > #stage-readout { width: 100%; max-width: none; margin-inline: 0; }
}
@media (max-width: 480px) { .ux-reading-page main { padding-inline: var(--sp-2); } }
/* one axis per block: demo.css centres every #stage-readout h2 with an id selector, which turned each left-aligned
   invitation and the Play Shelf into a centred title over left-aligned text */
#stage-readout .pool-editorial h2,#stage-readout .r0920-play-shelf > h2 { text-align: left; }
#stage-readout .pool-invitation.pool-editorial { max-width: none; }
/* balanced titles never leave one word on a line; paragraphs avoid a lone last word */
h1,h2,h3,.pool-editorial h2,.p2p-headline { text-wrap: balance; }
p,li { text-wrap: pretty; }
/* 2026-10-05 DESIGN PASS, PART 2: THE TESTING POOL INVITATION READS AS AN INVITATION.
   Avery, 5 October: the Join the Testing Pool sections should "be better made visually ... to better grab the
   users attention". Before: an eyebrow, a centred title in a 22ch box, a paragraph and a button on bare page, under
   one hairline, so each invitation read as more body text. Now one card, used once per chapter as the owner's rule
   allows: a warm gold-washed surface with the keepsake card's corner marks, a pill eyebrow, a left-aligned title,
   the three steps a visitor takes (the Pool page's own labels; the first keeps the Eye), a larger filled action with
   a forward arrow, and an emblem: the house knot, or on the face reveal the visitor's own desire portrait, already
   on screen above, sealed with the knot. Honest by construction: no counts, no timers, no scarcity.
   Motion is one gentle settle of the emblem when the card first enters view; reduced motion keeps it still. */
.pool-invitation.pool-feature {
  --pf-gold: #B8893A; --pf-gold-soft: rgba(212, 168, 83, .18); --pf-line: rgba(184, 137, 58, .45);
  --pf-surface: #FBF5EA; --pf-ink: var(--fg, #1E293B); --pf-ink2: var(--fg2, #475569); --pf-step: #722F37;
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: var(--sp-6); padding: var(--sp-6); margin-block: var(--seam);
  border: 1px solid var(--pf-line); border-radius: var(--r-card); color: var(--pf-ink);
  background: radial-gradient(120% 140% at 100% 0%, rgba(232, 201, 122, .32), transparent 58%),
    linear-gradient(160deg, rgba(212, 168, 83, .12), transparent 62%), var(--pf-surface);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 24px 48px -36px rgba(92, 26, 27, .5);
}
:root[data-theme="dark"] .pool-invitation.pool-feature {
  --pf-gold: #F0C86E; --pf-gold-soft: rgba(240, 200, 110, .16); --pf-line: rgba(240, 200, 110, .38);
  --pf-surface: #1C1311; --pf-step: #F5D98A;
  background: radial-gradient(120% 140% at 100% 0%, rgba(240, 200, 110, .16), transparent 58%),
    linear-gradient(160deg, rgba(240, 200, 110, .07), transparent 62%), var(--pf-surface);
  box-shadow: 0 24px 48px -36px rgba(0, 0, 0, .9);
}
.pool-invitation.pool-feature::before {
  content: ""; position: absolute; inset: var(--sp-1); z-index: -1; pointer-events: none; --c: var(--pf-line);
  background: linear-gradient(var(--c), var(--c)) top left / 24px 1px no-repeat, linear-gradient(var(--c), var(--c)) top left / 1px 24px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 24px 1px no-repeat, linear-gradient(var(--c), var(--c)) top right / 1px 24px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 24px 1px no-repeat, linear-gradient(var(--c), var(--c)) bottom left / 1px 24px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 24px 1px no-repeat, linear-gradient(var(--c), var(--c)) bottom right / 1px 24px no-repeat;
}
.pool-feature > :not(.pool-feature-body):not(.pool-feature-art) { grid-column: 1 / -1; }
.pool-feature-body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); min-width: 0; }
.pool-feature-body > * { margin: 0; }
.pool-invitation.pool-feature .pool-mark {
  display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-2);
  border-radius: 999px; background: var(--pf-gold-soft); color: var(--pf-step);
  font: 700 var(--fs-label)/1.2 "DM Sans", sans-serif; letter-spacing: .04em; }
.pool-invitation.pool-feature .pool-mark::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pf-gold); }
.pool-invitation.pool-feature h2 { max-width: 20ch; text-align: left; color: var(--pf-ink); font-size: var(--fs-h2); line-height: 1.08; }
.pool-invitation.pool-feature .pool-feature-body > p:not(.pool-mark) { max-width: 54ch; color: var(--pf-ink2); }
.pool-steps { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); align-items: start; gap: var(--sp-2) var(--sp-4); padding: 0; list-style: none; }
.pool-steps li { display: grid; grid-template-columns: auto auto; align-items: center; gap: var(--sp-1); font: 600 var(--fs-label)/1.3 "DM Sans", sans-serif; color: var(--pf-ink); }
.pool-steps li:has(.pool-step-note) .pool-step-n { grid-row: 1 / span 2; }
.pool-steps li:has(.pool-step-note) .pool-step-label { align-self: end; }
.pool-steps li:has(.pool-step-note) .pool-step-note { align-self: start; }
.pool-step-n { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--pf-line); color: var(--pf-step); font-weight: 700; }
.pool-steps li:first-child .pool-step-n { border-color: transparent; background: var(--btn-fill); color: var(--btn-ink); }
.pool-step-note { grid-column: 2; font-weight: 400; color: var(--pf-ink2); }
.pool-invitation.pool-feature .pool-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin: 0; }
.pool-invitation.pool-feature .pool-actions .btn:not(.btn-ghost) { min-height: 56px; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-body); }
.pool-invitation.pool-feature .pool-actions .btn:not(.btn-ghost)::after { content: "\2192"; transition: transform .2s ease; }
.pool-invitation.pool-feature .pool-actions .btn:not(.btn-ghost):hover::after { transform: translateX(3px); }
.pool-feature-art { position: relative; display: grid; place-items: center; width: 176px; aspect-ratio: 1; }
.pool-feature-art::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 201, 122, .55), rgba(232, 201, 122, 0) 68%); }
:root[data-theme="dark"] .pool-feature-art::before { background: radial-gradient(circle, rgba(240, 200, 110, .28), rgba(240, 200, 110, 0) 68%); }
.pool-feature-knot { position: relative; width: 112px; height: 112px; color: var(--pf-gold); }
.pool-feature-art.has-portrait { width: 176px; aspect-ratio: 4 / 5; }
.pool-feature-portrait { position: relative; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-card);
  border: 4px solid var(--pf-surface); box-shadow: 0 16px 32px -18px rgba(92, 26, 27, .6); transform: rotate(-3deg); }
.pool-feature-art.has-portrait .pool-feature-knot { position: absolute; right: -16px; bottom: -16px; width: 64px; height: 64px;
  padding: var(--sp-1); border-radius: 50%; background: var(--pf-surface); border: 1px solid var(--pf-line); }
@media (prefers-reduced-motion: no-preference) {
  .pool-feature .pool-feature-art { transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .7s ease; }
  .pool-feature[data-motion="armed"]:not(.is-inview) .pool-feature-art { transform: scale(.92) rotate(-4deg); opacity: .6; }
}
/* the readout's chapter rhythm: the seam is the card's margin, as it was the editorial block's */
#readoutBody > #pool-readout-invitation.pool-feature,#stage-readout > #pool-face-invitation.pool-feature { margin-block: calc(var(--seam) / 2); }
#signin-section > .pool-invitation.pool-feature { margin-block: 0; }
@media (max-width: 720px) {
  .pool-invitation.pool-feature { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-4) var(--sp-3); }
  .pool-feature-art { grid-row: 1; justify-self: start; width: 96px; }
  .pool-feature-knot { width: 64px; height: 64px; }
  .pool-feature-art.has-portrait { width: 112px; }
  .pool-feature-art.has-portrait .pool-feature-knot { width: 48px; height: 48px; right: -12px; bottom: -12px; }
  .pool-invitation.pool-feature .pool-actions { flex-direction: column; align-items: stretch; width: 100%; gap: var(--sp-1); }
  .pool-invitation.pool-feature .pool-actions .btn:not(.btn-ghost) { width: 100%; }
  .pool-steps { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
}
/* 2026-10-05 DESIGN PASS, PART 3: THE PLAY SHELF AS FOUR DISTINCT GAMES.
   Avery, 5 October: the games should be "more distinct and more engaging". Before: one bordered box of four
   identical rows (small line motif, text, a button of a different width each), a centred title over a left-aligned
   line, so the shelf read as a settings list. Now each game is its own card with its own accent (Taste Test gold,
   Switch wine, Eye on Trial ink blue, Mix terracotta), its own verb (Predict, Reveal, Challenge, Combine) and its
   motif in an accent medallion; two cards a row from 721px, one on phones and whenever a game is open. A quiet tally
   ("1 of 4 played", one pip per game) fills as games finish; the first unplayed game is marked "Start here".
   Accent colours carry decoration; text uses the darker --g-ink of each accent (4.5:1 or better on the page). */
#stage-readout .r0920-game-taste { --g-accent: #C9973F; --g-ink: #7A5718; --g-wash: rgba(212, 168, 83, .16); }
#stage-readout .r0920-game-switch { --g-accent: #8C3A44; --g-ink: #722F37; --g-wash: rgba(140, 58, 68, .09); }
#stage-readout .r0920-game-trial { --g-accent: #3D5F87; --g-ink: #2E4A6B; --g-wash: rgba(61, 95, 135, .09); }
#stage-readout .r0920-game-mix { --g-accent: #B5653A; --g-ink: #8B4513; --g-wash: rgba(181, 101, 58, .10); }
:root[data-theme="dark"] #stage-readout .r0920-game-taste { --g-accent: #F0C86E; --g-ink: #F5D98A; --g-wash: rgba(240, 200, 110, .10); }
:root[data-theme="dark"] #stage-readout .r0920-game-switch { --g-accent: #E39AA4; --g-ink: #F2BCC3; --g-wash: rgba(227, 154, 164, .09); }
:root[data-theme="dark"] #stage-readout .r0920-game-trial { --g-accent: #8FB0DA; --g-ink: #B8CDEA; --g-wash: rgba(143, 176, 218, .09); }
:root[data-theme="dark"] #stage-readout .r0920-game-mix { --g-accent: #E59A6F; --g-ink: #F2BC9C; --g-wash: rgba(229, 154, 111, .09); }
#stage-readout .r0920-play-shelf { max-width: none; margin: calc(var(--seam) / 2) 0; padding: 0; border: 0; background: none; }
#stage-readout .r0920-shelf-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-2) var(--sp-4); margin: 0 0 var(--sp-3); }
#stage-readout .r0920-shelf-heading { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
#stage-readout .r0920-shelf-heading > h2 { margin: 0; text-align: left; font: 700 var(--ux-title)/1.1 'Cormorant Garamond', Georgia, serif; }
#stage-readout .r0920-shelf-heading > .r0920-shelf-intro { margin: 0; max-width: 52ch; }
#stage-readout .r0920-shelf-tally { display: flex; align-items: center; gap: var(--sp-2); }
#stage-readout .r0920-shelf-tally-text { margin: 0; font: 600 var(--fs-label)/1.2 'DM Sans', sans-serif; color: var(--fg2); }
#stage-readout .r0920-shelf-pips { display: flex; gap: var(--sp-1); }
#stage-readout .r0920-shelf-pip { width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--r-rule); }
#stage-readout .r0920-shelf-pip[data-done="1"] { border-color: transparent; background: var(--pip, #C9973F); }
#stage-readout .r0920-shelf-pip[data-kind="taste"] { --pip: #C9973F; }
#stage-readout .r0920-shelf-pip[data-kind="switch"] { --pip: #8C3A44; }
#stage-readout .r0920-shelf-pip[data-kind="trial"] { --pip: #3D5F87; }
#stage-readout .r0920-shelf-pip[data-kind="mix"] { --pip: #B5653A; }
:root[data-theme="dark"] #stage-readout .r0920-shelf-pip[data-kind="taste"] { --pip: #F0C86E; }
:root[data-theme="dark"] #stage-readout .r0920-shelf-pip[data-kind="switch"] { --pip: #E39AA4; }
:root[data-theme="dark"] #stage-readout .r0920-shelf-pip[data-kind="trial"] { --pip: #8FB0DA; }
:root[data-theme="dark"] #stage-readout .r0920-shelf-pip[data-kind="mix"] { --pip: #E59A6F; }
#stage-readout .r0920-shelf-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
#stage-readout .r0920-play-shelf:has(.r0920-game[data-r0920-open="1"]) .r0920-shelf-slots { grid-template-columns: minmax(0, 1fr); }
#stage-readout .r0920-shelf-slot { display: flex; min-width: 0; }
#stage-readout .r0920-game[data-shelf-mounted] {
  position: relative; flex: 1 1 auto; min-width: 0; padding: var(--sp-3); border: 1px solid var(--r-rule); border-radius: var(--r-card);
  background: linear-gradient(180deg, var(--g-wash, transparent), transparent 72%), var(--bg);
  box-shadow: inset 0 4px 0 var(--g-accent, var(--gold2)); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #stage-readout .r0920-game[data-shelf-mounted] { transition: transform .2s ease, box-shadow .2s ease; }
  #stage-readout .r0920-game[data-shelf-mounted]:not([data-r0920-open="1"]):hover { transform: translateY(-2px);
    box-shadow: inset 0 4px 0 var(--g-accent, var(--gold2)), 0 18px 36px -28px rgba(30, 41, 59, .6); }
}
#stage-readout .r0920-game[data-shelf-mounted]:not([data-r0920-open="1"]) > .r0920-shelf-row {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: var(--sp-2); row-gap: var(--sp-3);
  align-items: start; height: 100%; }
#stage-readout .r0920-game[data-shelf-mounted]:not([data-r0920-open="1"]) .r0920-shelf-action { grid-column: 1 / -1; justify-self: start; align-self: end; min-width: 0; }
#stage-readout .r0920-game[data-shelf-mounted] .r0920-shelf-motif { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--g-wash, transparent); color: var(--g-accent, var(--gold2)); }
#stage-readout .r0920-game-taste[data-shelf-mounted] .r0920-shelf-motif { display: flex; justify-content: center; align-items: center; gap: calc(var(--sp-1) / 2); }
#stage-readout .r0920-game-taste[data-shelf-mounted] .r0920-shelf-motif span { width: 6px; height: 6px; background: var(--g-accent); }
#stage-readout .r0920-game-switch[data-shelf-mounted] .r0920-shelf-motif { display: flex; justify-content: center; align-items: center; gap: calc(var(--sp-1) / 2); font: 700 var(--fs-label)/1 'DM Sans', sans-serif; }
#stage-readout .r0920-game[data-shelf-mounted] .r0920-shelf-motif .r0920-game-art { width: 36px; height: 36px; }
#stage-readout .r0920-shelf-words { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
#stage-readout .r0920-shelf-words > * { margin: 0; }
#stage-readout .r0920-shelf-verb { font: 700 var(--fs-label)/1.2 'DM Sans', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--g-ink, var(--fg2)); }
#stage-readout .r0920-shelf-chip { align-self: flex-start; border-color: var(--g-accent, var(--r-rule)); border-radius: 999px; padding: 0 var(--sp-1); color: var(--g-ink, var(--fg2)); }
#stage-readout .r0920-game[data-shelf-mounted]::before { content: none; }
#stage-readout .r0920-game[data-shelf-next="1"]:not([data-r0920-open="1"])::before {
  content: "Start here"; display: block; position: absolute; inset: auto; top: -14px; left: var(--sp-3); width: auto; height: auto; padding: 0 var(--sp-1); border-radius: 999px;
  background: var(--g-accent, var(--gold2)); color: #FFFFFF; font: 700 var(--fs-label)/28px 'DM Sans', sans-serif; }
:root[data-theme="dark"] #stage-readout .r0920-game[data-shelf-next="1"]:not([data-r0920-open="1"])::before { color: #12090A; }
#stage-readout .r0920-game[data-shelf-mounted][data-game-state="complete"]:not([data-r0920-open="1"])::after {
  content: "\2713"; position: absolute; top: var(--sp-3); right: var(--sp-3); display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; background: var(--g-accent, var(--gold2)); color: #FFFFFF; font: 700 var(--fs-label)/1 'DM Sans', sans-serif; }
:root[data-theme="dark"] #stage-readout .r0920-game[data-shelf-mounted][data-game-state="complete"]:not([data-r0920-open="1"])::after { color: #12090A; }
/* the completed-games handoff: one slim gold bar under the cards, not another page block */
#stage-readout .r0920-shelf-pool:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3);
  margin: var(--sp-3) 0 0; padding: var(--sp-3); border: 1px solid rgba(184, 137, 58, .45); border-radius: var(--r-card);
  background: linear-gradient(135deg, rgba(212, 168, 83, .16), transparent 70%); }
#stage-readout .r0920-shelf-pool p { flex: 1 1 24ch; margin: 0; }
@media (max-width: 720px) {
  #stage-readout .r0920-shelf-slots { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  #stage-readout .r0920-shelf-head { align-items: flex-start; }
}
@media (max-width: 600px) {
  #stage-readout .r0920-play-shelf { padding: 0; }
  #stage-readout .r0920-game[data-shelf-mounted] { padding: var(--sp-2); }
  #stage-readout .r0920-game[data-shelf-mounted]:not([data-r0920-open="1"]) > .r0920-shelf-row { grid-template-columns: 48px minmax(0, 1fr); }
  #stage-readout .r0920-game[data-shelf-mounted] .r0920-shelf-motif { width: 48px; height: 48px; }
}
/* the cover's "Continue your Eye" cue: folio.css centred it with translateX(-50%) while it was absolutely placed;
   ux-d97.css made it a normal flow block and kept the shift, so it sat half its own width left of centre
   (flush on the phone's edge) */
#readoutBody .folio-cover .ro-scroll-hint { transform: none; }
/* 2026-10-05 DESIGN PASS, PART 4: ONE INVERSE INVITATION PER PAGE.
   Measured case (WCAG formula, research lane 3): the gold button's edge is 2.05:1 on cream but 4.37:1 on the house
   wine, and cream text on wine is 8.95:1, so the strongest honest isolation is a wine panel, the keepsake card's own
   palette. It is used once per page: the face reveal (the peak, anchored on the visitor's own desire portrait), or,
   when no face has landed, the invitation after the Play Shelf; on Home, its single invitation. Every other
   invitation keeps the light gold card. In the readout the first step, the Eye just built, is shown done. */
:is(#pool-face-invitation, .pool-site-invitation, #stage-readout:not(:has(> #pool-face-invitation:not([hidden]))) #pool-readout-invitation).pool-invitation.pool-feature {
  --pf-gold: #F0C86E; --pf-gold-soft: rgba(240, 200, 110, .16); --pf-line: rgba(240, 200, 110, .45);
  --pf-surface: #5A1A21; --pf-ink: #FAF6F1; --pf-ink2: rgba(250, 246, 241, .86); --pf-step: #F5D98A;
  color: var(--pf-ink); border-color: var(--pf-line);
  background: radial-gradient(110% 130% at 100% 0%, rgba(240, 200, 110, .22), transparent 56%),
    linear-gradient(160deg, #6E2530, #46131A 72%);
  box-shadow: 0 28px 56px -36px rgba(70, 19, 26, .85);
}
:root[data-theme="dark"] :is(#pool-face-invitation, .pool-site-invitation, #stage-readout:not(:has(> #pool-face-invitation:not([hidden]))) #pool-readout-invitation).pool-invitation.pool-feature {
  --pf-surface: #3A1117; --pf-line: rgba(240, 200, 110, .4);
  background: radial-gradient(110% 130% at 100% 0%, rgba(240, 200, 110, .16), transparent 56%),
    linear-gradient(160deg, #4E1820, #2C0D12 72%);
  box-shadow: 0 28px 56px -36px rgba(0, 0, 0, .9);
}
:is(#pool-face-invitation, .pool-site-invitation, #stage-readout:not(:has(> #pool-face-invitation:not([hidden]))) #pool-readout-invitation).pool-feature .pool-text-action { color: var(--pf-ink); }
:is(#pool-face-invitation, .pool-site-invitation, #stage-readout:not(:has(> #pool-face-invitation:not([hidden]))) #pool-readout-invitation).pool-feature .pool-profile-note { color: var(--pf-ink2); }
:is(#pool-face-invitation, .pool-site-invitation, #stage-readout:not(:has(> #pool-face-invitation:not([hidden]))) #pool-readout-invitation).pool-feature .pool-feature-art::before {
  background: radial-gradient(circle, rgba(240, 200, 110, .3), rgba(240, 200, 110, 0) 68%); }
:is(#pool-face-invitation, .pool-site-invitation, #stage-readout:not(:has(> #pool-face-invitation:not([hidden]))) #pool-readout-invitation).pool-feature :focus-visible { outline-color: #F0C86E; }
/* the done step: a filled tick in the panel's gold, the next step outlined */
.pool-steps li[data-step-state="done"] .pool-step-n { border-color: transparent; background: var(--pf-gold); color: #46131A; }
.pool-steps li[data-step-state="done"] + li .pool-step-n { border-color: var(--pf-gold); background: transparent; color: var(--pf-step); }
.pool-steps li:first-child:not([data-step-state="done"]) .pool-step-n { border-color: transparent; background: var(--btn-fill); color: var(--btn-ink); }
/* 2026-10-05 DESIGN PASS, PART 5: EACH GAME KEEPS ITS OWN IDENTITY WHILE IT IS PLAYED.
   Presentation only. Nothing here changes a round, an option, its order, a label before the reveal, a timing or a
   request: the accent colours below apply identically to both portraits and to every option, so no choice is
   favoured, and every new mark is drawn after the server has returned the result. Results become readable at a
   glance: one seal per round for the Taste Test and Eye on Trial (tick matched, cross missed, a dot for the rounds
   that do not count), two bars on the Mix receipt, and on the Switch reveal each portrait's role as a ribbon in the
   readout's own Desire gold and Disdain wine. Reduced motion keeps every mark still. */
#stage-readout .r0920-game[data-shelf-mounted][data-r0920-open="1"] { background: linear-gradient(180deg, var(--g-wash, transparent), transparent 32%), var(--bg); }
#stage-readout .r0920-game[data-shelf-mounted] .r0920-game-steps span.is-done,
#stage-readout .r0920-game[data-shelf-mounted] .r0920-game-steps span.is-current { background: var(--g-accent, var(--gold2)); }
#stage-readout .r0920-game[data-shelf-mounted] .r0920-game-steps span.is-current { opacity: .55; }
#stage-readout .r0920-game[data-shelf-mounted] .r0920-game-progress,
#stage-readout .r0920-game[data-shelf-mounted] .r0920-game-result-mark { color: var(--g-ink, var(--gold2)); }
#stage-readout .r0920-game[data-shelf-mounted] .r0920-game-face:hover { border-color: var(--g-accent, var(--gold2)); }
#stage-readout .r0920-game[data-shelf-mounted] .r0920-game-face[aria-pressed="true"] {
  border-color: var(--g-accent, var(--gold2)); box-shadow: 0 0 0 3px var(--g-wash, transparent), inset 0 0 0 1px var(--g-accent, var(--gold2)); }
#stage-readout .r0920-game[data-shelf-mounted] .r0920-game-face-tab { border-color: var(--g-accent, var(--gold2)); color: var(--g-ink, var(--gold2)); }
#stage-readout .r0920-game[data-shelf-mounted] .r0920-game-score-plate,
#stage-readout .r0920-game[data-shelf-mounted] .r0920-game-receipt {
  border-color: var(--g-accent, var(--gold2)); border-radius: var(--r-card);
  background: linear-gradient(160deg, var(--g-wash, transparent), transparent 70%), var(--bg); }
#stage-readout .r0920-game[data-shelf-mounted] .r0920-game-score-plate { padding: var(--sp-3); }
#stage-readout .r0920-game[data-shelf-mounted] .r0920-game-receipt-title { color: var(--g-ink, var(--gold2)); }
/* seals: one per round */
#stage-readout .r0920-seal-row { display: flex; flex-wrap: wrap; gap: var(--sp-1); flex-basis: 100%; }
#stage-readout .r0920-seal { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--r-rule); color: var(--fg2); font: 700 var(--fs-body)/1 'DM Sans', sans-serif; }
#stage-readout .r0920-seal[data-outcome="match"] { border-color: transparent; background: var(--g-accent, var(--gold2)); color: #FFFFFF; }
:root[data-theme="dark"] #stage-readout .r0920-seal[data-outcome="match"] { color: #12090A; }
#stage-readout .r0920-seal[data-outcome="miss"] { border-color: var(--g-accent, var(--gold2)); color: var(--g-ink, var(--fg)); }
#stage-readout .r0920-seal[data-outcome="even"] { border-style: dashed; border-color: var(--g-accent, var(--gold2)); color: var(--g-ink, var(--fg)); }
/* Mix receipt bars */
#stage-readout .r0920-receipt-bar { display: block; position: relative; height: 8px; margin-top: var(--sp-1); border-radius: 999px;
  background: var(--r-rule); overflow: hidden; }
#stage-readout .r0920-receipt-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--share, 0) * 100%);
  border-radius: 999px; background: var(--g-accent, var(--gold2)); }
#stage-readout .r0920-game-receipt-cell + .r0920-game-receipt-cell .r0920-receipt-bar::after { opacity: .5; }
/* Switch roles as ribbons */
#stage-readout .r0920-game-result-face[data-role] { position: relative; }
#stage-readout .r0920-game-reveal .r0920-game-result-face[data-role] .r0920-game-result-face-role {
  margin: var(--sp-1) 0 0; padding: var(--sp-1) var(--sp-2); border: 0; border-radius: var(--btn-radius);
  font: 700 var(--fs-label)/1.3 'DM Sans', sans-serif; text-align: center; }
#stage-readout .r0920-game-result-face[data-role="desire"] .r0920-game-result-face-role { background: linear-gradient(135deg, #D4A853, #E8C97A); color: #5C1A1B; }
#stage-readout .r0920-game-result-face[data-role="disdain"] .r0920-game-result-face-role { background: #722F37; color: #FAF6F1; }
:root[data-theme="dark"] #stage-readout .r0920-game-result-face[data-role="disdain"] .r0920-game-result-face-role { background: #8C3A44; }
@media (prefers-reduced-motion: no-preference) {
  #stage-readout .r0920-seal { animation: r0920-seal-in 360ms cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--seal-i, 0) * 90ms + 160ms); }
  #stage-readout .r0920-receipt-bar::after { animation: r0920-bar-grow 640ms cubic-bezier(.2, .8, .2, 1) both 200ms; transform-origin: left center; }
  #stage-readout .r0920-game-reveal .r0920-game-result-face[data-role] .r0920-game-result-face-role { animation: r0920-ribbon-up 320ms ease-out both; }
  #stage-readout .r0920-game-reveal .r0920-game-result-face[data-role]:nth-child(2) .r0920-game-result-face-role { animation-delay: 80ms; }
  #stage-readout .r0920-game[data-shelf-mounted] .r0920-game-face { transition: border-color .15s ease, box-shadow .15s ease; }
}
@keyframes r0920-seal-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes r0920-bar-grow { from { transform: scaleX(0); } to { transform: none; } }
@keyframes r0920-ribbon-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* The generated cards are withheld while an assigned Switch answer is still blind (and while that is being
   checked, pending, or in preview). The face-reveal invitation speaks about those faces and carries the desire
   portrait, so it is withheld in exactly the same states; no state can show a portrait the faces block hides. */
html.r0920-games-checking #pool-face-invitation,html.r0920-games-pending #pool-face-invitation,
html.r0920-games-blind #pool-face-invitation,html.r0920-games-preview #pool-face-invitation { display: none !important; }
html:is(.r0920-games-checking, .r0920-games-pending, .r0920-games-blind, .r0920-games-preview) .pool-feature-portrait { display: none !important; }
/* 2026-10-05 DESIGN PASS, PART 6: NATIVE CONTROLS IN THE HOUSE COLOURS.
   Every native checkbox and radio (story cards, Pool consent, preferences) took the browser's own blue; accent-color
   brings them into the palette (wine on light, gold on dark) without changing their size, focus or behaviour.
   The story-card choice becomes a centred panel of tiles inside the centred keepsake section, the chosen tiles
   marked by the same gold wash as the game cards, rather than a bare form box under centred text. */
:root { accent-color: #722F37; }
:root[data-theme="dark"] { accent-color: #F0C86E; }
#share-section .story-selection { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2);
  width: min(100%, 40rem); margin: var(--sp-3) auto; padding: var(--sp-3); border: 1px solid var(--r-rule); border-radius: var(--r-card); text-align: left; }
#share-section .story-selection legend { padding: 0 var(--sp-1); font: 600 var(--fs-label)/1.4 'DM Sans', sans-serif; color: var(--fg); }
#share-section .story-selection label { padding: var(--sp-1) var(--sp-2); border: 1px solid var(--r-rule); border-radius: var(--btn-radius); cursor: pointer; }
#share-section .story-selection label:has(input:checked) { border-color: var(--gold2); background: rgba(212, 168, 83, .12); }
#share-section .story-selection label:has(input:focus-visible) { outline: 2px solid var(--gold2); outline-offset: 2px; }
@media (max-width: 600px) { #share-section .story-selection { grid-template-columns: minmax(0, 1fr); padding: var(--sp-2); } }
/* 2026-10-05 DESIGN PASS, PART 7: THE CONTACT PAGE AT TABLET AND PHONE WIDTHS.
   styles.css turned the three contact cards into a centred horizontal scroller at 1024px and below; a centred,
   overflowing flex row spills past both edges and its start cannot be scrolled to, so at 1024px only a sliver of the
   middle card showed, and at 768px the cards sat in a 164px column 55px inside the page edge beside a 600px-capped
   form. Below 1051px the cards now form one grid on the page track (three across, one across from 720px down) with
   the form full width beneath them. */
@media (max-width: 1050px) {
  .contact-section .contact-layout { grid-template-columns: minmax(0, 1fr); max-width: none; width: 100%; gap: var(--sp-4); margin: 0; }
  .contact-section .contact-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); overflow: visible; justify-content: stretch; }
  .contact-section .contact-card { min-width: 0; }
  /* a Partnerships tablet rule (styles.css) places every .regal-form-container in column 2, which forced a second column here */
  .contact-section .regal-form-container { grid-column: auto; }
}
@media (max-width: 720px) { .contact-section .contact-options { grid-template-columns: minmax(0, 1fr); } }
/* 2026-10-05 DESIGN PASS, PART 8: THE TESTING POOL PAGE OPENS ON THE SAME INVITATION CARD.
   The page's own pitch was the Pool block Avery pointed at most directly: an eyebrow, a two-line title and two
   paragraphs on bare page, with the right half of the track empty. It now takes the wine inverse card and the knot,
   matching every other Join the Testing Pool surface; it carries no step list because the five-step tracker sits
   directly beneath it. The page has no other inverse panel. */
#page-p2p .pool-landing-head.pool-feature {
  --pf-gold: #F0C86E; --pf-gold-soft: rgba(240, 200, 110, .16); --pf-line: rgba(240, 200, 110, .45);
  --pf-surface: #5A1A21; --pf-ink: #FAF6F1; --pf-ink2: rgba(250, 246, 241, .86); --pf-step: #F5D98A;
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: var(--sp-6); max-width: none; padding: var(--sp-6); border: 1px solid var(--pf-line); border-radius: var(--r-card); color: var(--pf-ink);
  background: radial-gradient(110% 130% at 100% 0%, rgba(240, 200, 110, .22), transparent 56%), linear-gradient(160deg, #6E2530, #46131A 72%);
  box-shadow: 0 28px 56px -36px rgba(70, 19, 26, .85); }
:root[data-theme="dark"] #page-p2p .pool-landing-head.pool-feature {
  background: radial-gradient(110% 130% at 100% 0%, rgba(240, 200, 110, .16), transparent 56%), linear-gradient(160deg, #4E1820, #2C0D12 72%);
  box-shadow: 0 28px 56px -36px rgba(0, 0, 0, .9); }
#page-p2p .pool-landing-head.pool-feature::before {
  content: ""; position: absolute; inset: var(--sp-1); z-index: -1; pointer-events: none; --c: var(--pf-line);
  background: linear-gradient(var(--c), var(--c)) top left / 24px 1px no-repeat, linear-gradient(var(--c), var(--c)) top left / 1px 24px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 24px 1px no-repeat, linear-gradient(var(--c), var(--c)) top right / 1px 24px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 24px 1px no-repeat, linear-gradient(var(--c), var(--c)) bottom left / 1px 24px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 24px 1px no-repeat, linear-gradient(var(--c), var(--c)) bottom right / 1px 24px no-repeat; }
#page-p2p .pool-landing-head.pool-feature .pool-mark { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-2);
  border-radius: 999px; background: var(--pf-gold-soft); color: var(--pf-step); font: 700 var(--fs-label)/1.2 "DM Sans", sans-serif; letter-spacing: .04em; }
#page-p2p .pool-landing-head.pool-feature .pool-mark::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pf-gold); }
#page-p2p .pool-landing-head.pool-feature .p2p-headline { color: var(--pf-ink); }
#page-p2p .pool-landing-head.pool-feature .p2p-context { color: var(--pf-ink); max-width: 52ch; }
#page-p2p .pool-landing-head.pool-feature .pool-profile-note { color: var(--pf-ink2); max-width: 60ch; }
#page-p2p .pool-landing-head.pool-feature .pool-text-action { color: var(--pf-ink); }
#page-p2p .pool-landing-head.pool-feature :focus-visible { outline-color: #F0C86E; }
#page-p2p .pool-landing-head.pool-feature .pool-actions { gap: var(--sp-3); }
#page-p2p .pool-landing-head.pool-feature .pool-actions .btn { min-height: 56px; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-body); }
#page-p2p .pool-landing-head.pool-feature .pool-actions .btn::after { content: "\2193"; }
#page-p2p .pool-landing-head.pool-feature .pool-feature-art::before { background: radial-gradient(circle, rgba(240, 200, 110, .3), rgba(240, 200, 110, 0) 68%); }
@media (max-width: 720px) {
  #page-p2p .pool-landing-head.pool-feature { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-4) var(--sp-3); }
  #page-p2p .pool-landing-head.pool-feature .pool-actions { flex-direction: column; align-items: stretch; width: 100%; gap: var(--sp-1); }
}
/* the two sentences of the Pool page title each balance on their own line (Chrome does not balance across a <br>) */
#page-p2p .p2p-headline > span { display: block; text-wrap: balance; }
/* 2026-10-05: the See Your Eye welcome is one centred composition (title, emblem, steps, Start, code); its short
   Pool invitation sat left-aligned between centred blocks. It now follows the same centred axis, and stays quiet,
   with text links, so it never competes with See your eye. */
#stage-hero .pool-entry-invitation.pool-editorial { align-items: center; text-align: center; }
#stage-hero .pool-entry-invitation.pool-editorial > p { margin-inline: auto; }
#stage-hero .pool-entry-invitation .pool-actions { justify-content: center; }
/* 2026-10-05: the little details figures. demo.css centres each 236px illustration with auto margins; a later
   spacing rule (margin: 0) removed them, so every drawing sat at the left of its column under centred labels and
   numbers (eye spacing, pores, lines, hair). The vertical spacing stays as that rule set it. */
#readoutBody .finer-group > .finer-illustration { margin-inline: auto; }
/* 2026-10-05 DESIGN PASS, PART 12: A PORTRAIT LOOKS LIKE THE CHOICE IT IS.
   Avery, playing Eye on Trial: "it doesn't give me the option to select anything other than about equal". Each
   portrait card is the A or B button (named "Choose portrait A" for assistive technology) but showed only a small
   letter tab, so the visible choices looked like About equal and the filled action alone. Every portrait card now
   carries the same visible action bar under its image, "Choose this face", which reads "Chosen" once pressed. Both
   cards always take identical treatment, so no option is favoured; nothing about the options or their order
   changes (Switch, Eye on Trial and the friend's page share this card). */
#stage-readout .r0920-game-face { cursor: pointer; }
#stage-readout .r0920-game-face::after {
  content: "Choose this face"; display: flex; align-items: center; justify-content: center; min-height: 44px;
  border: 2px solid var(--g-accent, var(--btn-line)); border-radius: var(--btn-radius); background: transparent;
  color: var(--g-ink, var(--btn2-ink)); font: 600 var(--fs-label)/1.2 'DM Sans', sans-serif; }
#stage-readout .r0920-game-face:hover::after { background: var(--g-wash, rgba(212, 168, 83, .14)); }
#stage-readout .r0920-game-face[aria-pressed="true"]::after { content: "\2713  Chosen"; border-color: transparent;
  background: var(--g-accent, var(--btn-line)); color: #FFFFFF; }
:root[data-theme="dark"] #stage-readout .r0920-game-face[aria-pressed="true"]::after { color: #12090A; }
#stage-readout .r0920-game-face:disabled::after { opacity: .6; }
/* the open game's two header actions no longer touch */
@media (min-width: 601px) { #stage-readout .r0920-game[data-shelf-mounted] > .r0920-shelf-modes { margin-right: var(--sp-2); } }
/* 2026-10-05 DESIGN PASS, PART 13: FIXES FROM THE RENDERED SWEEP OF THE LIVE BUILD (lane 2).
   - Reduced motion hid the keepsake card: folio.css sets every animation-timeline to none under reduced motion,
     which froze #share-holder's entrance on its first keyframe (opacity 0) and left a 718px hole.
   - The sticky "Back to reading" covered game prompts and controls from 768px up; it stays sticky on phones,
     where the game is taller than the screen, and sits in the flow above it elsewhere.
   - The friend page's "Terms and privacy" link kept the browser's blue (about 2.1:1 on dark).
   - The enrolment note's action stretched across the block (832px) unlike every other invitation action.
   - From 1024px down the header's Testing Pool link had no surface beside the theme switch; it is now a compact
     outlined control in the header's own colour.
   - Mix's two chosen detail tiles took the gold fill of the primary action, so three gold buttons competed.
   - The Pool page's five steps became two columns on phones with "Signup complete" alone on its row.
   - The readout title sat 16px under the header. */
@media (prefers-reduced-motion: reduce) { #share-holder svg { animation: none !important; opacity: 1; transform: none; } }
@media (min-width: 768px) { #stage-readout .r0920-game[data-shelf-mounted] > .r0920-shelf-back { position: static; } }
.r0920-friend-terms,.r0920-games-friend .r0920-friend-disclosure a { color: var(--gold2, #D4A853); text-decoration: underline; text-underline-offset: .2em; }
:root[data-theme="light"] .r0920-friend-terms,:root[data-theme="light"] .r0920-games-friend .r0920-friend-disclosure a { color: #722F37; }
#pool-enrolment-status > .btn,#pool-enrolment-status > .pool-text-action { align-self: flex-start; }
nav.site-header .site-pool-mobile { border: 1px solid currentColor; border-radius: var(--btn-radius); padding: 0 var(--sp-2); text-decoration: none; }
#stage-readout .r0920-game-mix .r0920-game-token[aria-pressed="true"] { background: var(--g-wash, rgba(212, 168, 83, .14));
  border-color: var(--g-accent, var(--gold2)); color: var(--g-ink, var(--fg)); box-shadow: inset 0 0 0 1px var(--g-accent, var(--gold2)); }
@media (max-width: 899px) { .pool-onboarding .pool-progress li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
#stage-readout > h2 { margin-top: var(--sp-3); }
/* 2026-10-05 DESIGN PASS, PART 14: FOUR EMBLEMS THAT READ APART (lane 7).
   Avery: "for the logos for the games they dont appear distinct enough". The shared 56px tinted circle hid every shape
   difference, so hue was the only cue. Each game now shows a solid silhouette of its own in its accent, with a
   knock-out glyph: a wax seal with an eye (Taste Test, a call sealed before you choose), two portrait cards (Switch),
   two speech bubbles with a question and a tick (the friend challenge) and two discs with their overlap knocked out
   (Mix). 72px from 721px, 64px to 720px, 48px on phones; decoration only (the title names the game). */
#stage-readout .r0920-game { --emb-knock: #FFFFFF; }
#stage-readout .r0920-game-taste { --emb-knock: #2E2008; }
:root[data-theme="dark"] #stage-readout .r0920-game { --emb-knock: #12090A; }
#stage-readout .r0920-game[data-shelf-mounted] .r0920-shelf-motif { width: 72px; height: 72px; border-radius: 0; background: none;
  color: var(--g-accent, var(--gold2)); }
#stage-readout .r0920-shelf-emblem { display: block; width: 100%; height: 100%; overflow: visible; }
#stage-readout .r0920-game[data-shelf-mounted]:not([data-r0920-open="1"]) > .r0920-shelf-row { grid-template-columns: 72px minmax(0, 1fr); }
@media (max-width: 720px) {
  #stage-readout .r0920-game[data-shelf-mounted] .r0920-shelf-motif { width: 64px; height: 64px; }
  #stage-readout .r0920-game[data-shelf-mounted]:not([data-r0920-open="1"]) > .r0920-shelf-row { grid-template-columns: 64px minmax(0, 1fr); }
}
@media (max-width: 600px) {
  #stage-readout .r0920-game[data-shelf-mounted] .r0920-shelf-motif { width: 48px; height: 48px; }
  #stage-readout .r0920-game[data-shelf-mounted]:not([data-r0920-open="1"]) > .r0920-shelf-row { grid-template-columns: 48px minmax(0, 1fr); }
}
/* the open game keeps a small emblem beside its verb */
#stage-readout .r0920-game[data-shelf-mounted][data-r0920-open="1"] .r0920-shelf-motif { width: 40px; height: 40px; }
/* 2026-10-05 DESIGN PASS, PART 15: THE TESTING POOL PAGE GIVES THE REASONS, AND HOME TELLS THE JOURNEY.
   Avery: the Pool page should "really give the perks of joining" and "a much better display of what the testing pool is
   and what it does, as well as making it easy for people to sign in"; Home should give the perks and the purpose. Built
   from the lane 6 design (the email field now opens within the first screen at 1280px) with lane 5 copy that states only
   what is true today: three benefits from email verification, research consideration after full signup, and the three
   research phases beside the existing caveat (first marked planned; later the same day, at Avery's word, they say what the
   Testing Pool does). No counts, no urgency, no promises of matches, payment or
   DNA tests. Sections meant for newcomers step aside once a visitor has verified their email. */
/* ---------- shared tokens for every new block (same names as the 2026-10-05 invitation card) ---------- */
:is(#page-p2p, .pool-home, .home-journey) {
  --pf-gold: #B8893A; --pf-gold-soft: rgba(212, 168, 83, .18); --pf-line: rgba(184, 137, 58, .45);
  --pf-surface: #FBF5EA; --pf-ink: var(--navy, #1E293B); --pf-ink2: var(--slate, #475569); --pf-step: #722F37;
  --pf-gold-ink: #7A5718; --pf-rule: color-mix(in srgb, var(--pf-ink) 16%, transparent);
}
:root[data-theme="dark"] :is(#page-p2p, .pool-home, .home-journey) {
  --pf-gold: #F0C86E; --pf-gold-soft: rgba(240, 200, 110, .16); --pf-line: rgba(240, 200, 110, .38);
  --pf-surface: #1C1311; --pf-step: #F5D98A; --pf-gold-ink: #F5D98A;
}

/* ---------- page frame: the card opens nearer the header, the form stays in the first view ---------- */
#page-p2p #s-hero { margin-top: calc(var(--sp-8) + var(--sp-2)); min-height: 0; padding-block: var(--sp-2) var(--seam); }
@media (max-width: 1024px) { #page-p2p #s-hero { margin-top: var(--sp-8); padding-block: var(--sp-1) var(--seam); } }

/* ---------- section scaffolding ---------- */
.pool-section { margin-block: var(--seam); }
.pool-section-head { display: flex; flex-direction: column; gap: var(--sp-1); max-width: 60ch; min-width: 0; }
.pool-section-head > * { margin: 0; }
.pool-eyebrow { font: 700 var(--fs-label)/1.2 "DM Sans", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--pf-gold-ink); }
.pool-section-title { font: 700 var(--ux-title)/1.1 "Cormorant Garamond", Georgia, serif; text-align: left; color: var(--pf-ink); }
.pool-lede { font: 400 var(--fs-body)/1.6 "DM Sans", sans-serif; color: var(--pf-ink2); max-width: 54ch; }
.pool-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
@media (min-width: 900px) { .pool-split { grid-template-columns: minmax(12rem, 1fr) minmax(0, 2fr); gap: var(--sp-8); } }
.pool-split > .pool-section-head { gap: var(--sp-2); }
.pool-split .pool-section-head .pool-section-title { margin-bottom: var(--sp-1); }

/* ---------- hero card: compact, perks as chips, no long note ---------- */
#page-p2p .pool-landing-head.pool-feature { padding: var(--sp-4) var(--sp-6); gap: var(--sp-4); }
#page-p2p .pool-landing-head.pool-feature .pool-feature-body { gap: var(--sp-2); }
#page-p2p .pool-landing-head.pool-feature .pool-feature-art { width: 136px; }
#page-p2p .pool-landing-head.pool-feature .pool-feature-knot { width: 96px; height: 96px; }
.pool-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }
.pool-chip { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-2); border: 1px solid var(--pf-line);
  border-radius: 999px; background: var(--pf-gold-soft); color: var(--pf-ink); font: 600 var(--fs-label)/1.3 "DM Sans", sans-serif; }
.pool-chip::before { content: ""; flex: none; width: 5px; height: 10px; border: solid var(--pf-gold); border-width: 0 2px 2px 0; transform: rotate(40deg) translate(-1px, -2px); }
@media (max-width: 720px) {
  #page-p2p .pool-landing-head.pool-feature { padding: var(--sp-3); gap: var(--sp-2); }
  #page-p2p .pool-landing-head.pool-feature .pool-feature-art { position: absolute; top: var(--sp-3); right: var(--sp-3); width: 56px; }
  #page-p2p .pool-landing-head.pool-feature .pool-feature-art::before { display: none; }
  #page-p2p .pool-landing-head.pool-feature .pool-feature-knot { width: 48px; height: 48px; }
}

/* ---------- the form block: shorter on a phone, one line of "what you need" ---------- */
.pool-needs { margin: 0; font: 400 var(--fs-label)/1.6 "DM Sans", sans-serif; color: var(--pf-ink2); }
.pool-needs strong { color: var(--pf-ink); font-weight: 600; }
#page-p2p .pool-onboarding { margin-block: var(--sp-6) var(--seam); padding-block: var(--sp-4); }
@media (max-width: 899px) { #page-p2p .pool-onboarding { gap: var(--sp-3); padding-block: var(--sp-3); } }

/* ---------- perks ---------- */
.pool-perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.pool-perks:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .pool-perks:has(> li:nth-child(4):last-child) { grid-template-columns: minmax(0, 1fr); } }
.pool-perk { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); min-width: 0; padding: var(--sp-3);
  border: 1px solid var(--pf-rule); border-radius: var(--r-card);
  background: linear-gradient(180deg, var(--pf-gold-soft), transparent 72%), var(--pf-surface); box-shadow: inset 0 3px 0 var(--pf-gold); }
.pool-perk > * { margin: 0; }
.pool-perk-glyph { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--sp-1); border-radius: 50%;
  background: var(--pf-gold-soft); color: var(--pf-gold-ink); font: 700 var(--fs-body)/1 "DM Sans", sans-serif; }
.pool-perk-verb { font: 700 var(--fs-label)/1.2 "DM Sans", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--pf-gold-ink); }
.pool-perk-title { font: 700 var(--fs-lead)/1.15 "Cormorant Garamond", Georgia, serif; color: var(--pf-ink); }
.pool-perk-body { font: 400 var(--fs-label)/1.6 "DM Sans", sans-serif; color: var(--pf-ink2); }
.pool-perk-status { margin-top: auto !important; padding: 0 var(--sp-1); border: 1px solid var(--pf-line); border-radius: 999px;
  font: 600 var(--fs-label)/1.75 "DM Sans", sans-serif; color: var(--pf-gold-ink); }
.pool-perk-body + .pool-perk-status { margin-top: var(--sp-1) !important; }
@media (max-width: 720px) {
  .pool-perks--list { gap: 0; border-top: 1px solid var(--pf-rule); }
  .pool-perks--list .pool-perk { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--sp-2); row-gap: 0; padding: var(--sp-2) 0;
    border: 0; border-bottom: 1px solid var(--pf-rule); border-radius: 0; background: none; box-shadow: none; }
  .pool-perks--list .pool-perk-glyph { grid-row: 1 / span 4; margin: 0; }
  .pool-perks--list .pool-perk-status { grid-column: 2; justify-self: start; }
}
.pool-perks--compact .pool-perk-status { display: none; }

/* ---------- what it is: purpose, the caveat in plain sight, three planned phases ---------- */
.pool-note { margin: 0; padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--pf-gold); border-radius: 0 var(--btn-radius) var(--btn-radius) 0;
  background: var(--pf-gold-soft); font: 400 var(--fs-label)/1.6 "DM Sans", sans-serif; color: var(--pf-ink); max-width: 54ch; }
.pool-phases-col { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.pool-phases { display: flex; flex-direction: column; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.pool-phase { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--sp-2); row-gap: var(--sp-1); }
.pool-phase:not(:last-child)::after { content: ""; position: absolute; left: 23px; top: 52px; bottom: calc(-1 * var(--sp-3) + 4px); width: 1px; background: var(--pf-line); }
.pool-phase-n { grid-row: 1 / span 3; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--pf-line); border-radius: 50%;
  color: var(--pf-step); font: 700 var(--fs-body)/1 "DM Sans", sans-serif; }
.pool-phase > :not(.pool-phase-n) { margin: 0; }
.pool-phase-name { font: 700 var(--fs-lead)/1.15 "Cormorant Garamond", Georgia, serif; color: var(--pf-ink); align-self: center; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); }
.pool-badge { padding: 0 var(--sp-1); border: 1px solid var(--pf-line); border-radius: 999px; font: 600 var(--fs-label)/1.75 "DM Sans", sans-serif; color: var(--pf-gold-ink); }
.pool-phase-line { font: 400 var(--fs-label)/1.6 "DM Sans", sans-serif; color: var(--pf-ink2); }

/* ---------- how it works: one rail, "you" and "we" steps, honest start ---------- */
.pool-rail { display: flex; flex-direction: column; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.pool-rail-step { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: var(--sp-2); row-gap: 0; }
.pool-rail-step:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 36px; bottom: calc(-1 * var(--sp-3) + 4px); width: 1px; background: var(--pf-line); }
.pool-rail-n { grid-row: 1 / span 3; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--pf-line); border-radius: 50%;
  color: var(--pf-step); font: 700 var(--fs-label)/1 "DM Sans", sans-serif; }
.pool-rail-step[data-state="done"] .pool-rail-n { border-color: transparent; background: var(--pf-gold); color: #46131A; }
.pool-rail-step[data-who="we"] .pool-rail-n { border-style: dashed; }
.pool-rail-step > :not(.pool-rail-n) { margin: 0; }
.pool-rail-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); font: 600 var(--fs-body)/1.3 "DM Sans", sans-serif; color: var(--pf-ink); }
.pool-rail-line { font: 400 var(--fs-label)/1.6 "DM Sans", sans-serif; color: var(--pf-ink2); }
.pool-rail-line a { color: var(--pf-ink); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.pool-rail-unlock { font: 600 var(--fs-label)/1.6 "DM Sans", sans-serif; color: var(--pf-gold-ink); }

.pool-needs-list { display: flex; flex-direction: column; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; font: 400 var(--fs-label)/1.6 "DM Sans", sans-serif; color: var(--pf-ink); }
.pool-needs-list li { display: flex; align-items: center; gap: var(--sp-1); }
.pool-needs-list li::before { content: ""; flex: none; width: 5px; height: 10px; border: solid var(--pf-gold); border-width: 0 2px 2px 0; transform: rotate(40deg) translate(-1px, -2px); }

/* ---------- trust ---------- */
.pool-trust-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--sp-4) var(--sp-3); margin: 0; padding: 0; list-style: none; }
.pool-trust-list:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .pool-trust-list:has(> li:nth-child(4):last-child) { grid-template-columns: minmax(0, 1fr); } }
.pool-trust-item { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; padding-top: var(--sp-2); border-top: 2px solid var(--pf-gold); }
.pool-trust-item > * { margin: 0; }
.pool-trust-item strong { font: 600 var(--fs-body)/1.3 "DM Sans", sans-serif; color: var(--pf-ink); }
.pool-trust-item span { font: 400 var(--fs-label)/1.6 "DM Sans", sans-serif; color: var(--pf-ink2); }
.pool-trust-links { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin: var(--sp-3) 0 0; padding: 0; list-style: none; }
.pool-trust-links a { display: inline-flex; align-items: center; min-height: 48px; color: var(--pf-ink); font: 600 var(--fs-label)/1.5 "DM Sans", sans-serif; text-decoration: underline; text-underline-offset: .2em; }

/* ---------- FAQ: native details, many short independent answers ---------- */
.pool-faq-tools { display: flex; justify-content: flex-end; margin-bottom: var(--sp-1); }
.pool-faq-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--pf-rule); }
.pool-faq-list > li { border-bottom: 1px solid var(--pf-rule); }
.pool-faq-item > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 48px; padding-block: var(--sp-2); cursor: pointer; list-style: none;
  font: 600 var(--fs-body)/1.4 "DM Sans", sans-serif; color: var(--pf-ink); }
.pool-faq-item > summary::-webkit-details-marker { display: none; }
.pool-faq-item > summary::after { content: ""; flex: none; width: 10px; height: 10px; margin-inline: var(--sp-1); border: solid var(--pf-gold-ink); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-2px, -2px); }
.pool-faq-item[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.pool-faq-answer { max-width: 62ch; padding-bottom: var(--sp-3); }
.pool-faq-answer > * { margin: 0; font: 400 var(--fs-body)/1.6 "DM Sans", sans-serif; color: var(--pf-ink2); }
.pool-faq-item > summary:focus-visible, .pool-trust-links a:focus-visible, .pool-faq-tools .pool-text-action:focus-visible { outline: 2px solid var(--gold2, var(--gold)); outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) { .pool-faq-item > summary::after { transition: transform .2s ease; } }

/* ---------- closing card (the light gold invitation, one filled action) ---------- */
.pool-close.pool-invitation.pool-feature { max-width: none; margin-block: var(--seam); margin-inline: 0; }
.pool-share { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-1) var(--sp-3);
  padding-top: var(--sp-3); border-top: 1px solid var(--pf-line); }
.pool-share p { margin: 0; font: 400 var(--fs-label)/1.6 "DM Sans", sans-serif; color: var(--pf-ink2); max-width: 44ch; }

.pool-close .pool-feature-art { width: 136px; }
.pool-close .pool-feature-knot { width: 96px; height: 96px; }
@media (max-width: 720px) { .pool-close .pool-feature-art { width: 56px; } .pool-close .pool-feature-knot { width: 48px; height: 48px; } }

/* ---------- Home: the journey strip, the perks and purpose band ---------- */
.home-journey { width: var(--page-track); max-width: 1200px; margin-block: var(--seam); margin-inline: auto; }
.home-journey-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.home-journey-step { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: var(--sp-2); row-gap: var(--sp-1); align-items: start; }
.home-journey-step > :not(.home-journey-n) { margin: 0; }
.home-journey-n { grid-row: 1 / span 2; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--pf-line); border-radius: 50%;
  color: var(--pf-step); font: 700 var(--fs-label)/1 "DM Sans", sans-serif; }
.home-journey-step:first-child .home-journey-n { border-color: transparent; background: var(--btn-fill); color: var(--btn-ink); }
.home-journey-title { font: 700 var(--fs-lead)/1.15 "Cormorant Garamond", Georgia, serif; color: var(--pf-ink); }
.home-journey-line { font: 400 var(--fs-label)/1.6 "DM Sans", sans-serif; color: var(--pf-ink2); }
@media (max-width: 720px) { .home-journey-list { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); } }
.pool-home { margin-block: var(--seam); display: flex; flex-direction: column; gap: var(--sp-4); }
.pool-home > .pool-more { margin: 0; }
.pool-more .pool-text-action { display: inline-flex; align-items: center; }
.pool-home > .pool-site-invitation.pool-feature { margin-block: 0; }
.pool-site-invitation .pool-steps:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, max-content)); }
@media (max-width: 720px) { .pool-site-invitation .pool-steps:has(> li:nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr); } }
.hero-b2b { margin: var(--sp-1) 0 0; font: 400 var(--fs-label)/1.6 "DM Sans", sans-serif; color: var(--pf-ink2, var(--slate)); }
.hero-b2b a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }


.pool-perks-section .pool-perks,.pool-trust .pool-trust-list { margin-top: var(--sp-4); }
.pool-faq .pool-faq-tools { margin-top: var(--sp-3); }
.pool-how .pool-section-head .pool-eyebrow + .pool-needs-list { margin-top: var(--sp-1); }
.pool-how .pool-needs-head { margin-top: var(--sp-2); }
.home-journey .pool-section-head { margin-bottom: var(--sp-3); }
body.pool-signed-in :is(.pool-perks-section, .pool-what, .pool-how, .pool-close) { display: none; }
.pool-rail-step:not([data-state="done"]) .pool-badge-done { display: none; }
/* the purpose paragraph is the longest text on the page; it takes an even share of the row beside the three phases */
@media (min-width: 900px) { .pool-what .pool-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--sp-6); } }
/* the shelf card keeps the contract spacing: its action sits one 24px step under the words, and any spare height in a
   row of two cards falls below the action rather than as an off-scale gap above it */
#stage-readout .r0920-game[data-shelf-mounted]:not([data-r0920-open="1"]) > .r0920-shelf-row { grid-template-rows: auto auto; align-content: start; height: auto; }
#stage-readout .r0920-game[data-shelf-mounted]:not([data-r0920-open="1"]) .r0920-shelf-action { align-self: start; }
/* 2026-10-05 DESIGN PASS, PART 19: SPOT THE ODD LINE.
   Avery, 5 October: the Switch is not much of a game, and something completely new may replace it, with lines about
   backgrounds and youthfulness allowed. Spot the Odd Line takes its place on the real-readout shelf in its own accent
   (deep green) with its own emblem (a magnifier over three lines, the middle one broken). The three lines are full
   width choice tiles, numbered, with the same pressed state as Mix's chosen details. The reveal marks each line True
   or False by design, strikes the false one through, prints its correction and shows the count behind every line. */
#stage-readout .r0920-game-spot { --g-accent: #3F7A5A; --g-ink: #2C5A41; --g-wash: rgba(63, 122, 90, .09); }
:root[data-theme="dark"] #stage-readout .r0920-game-spot { --g-accent: #8CCBA6; --g-ink: #B7E2C8; --g-wash: rgba(140, 203, 166, .10); }
#stage-readout .r0920-shelf-pip[data-kind="spot"] { --pip: #3F7A5A; }
:root[data-theme="dark"] #stage-readout .r0920-shelf-pip[data-kind="spot"] { --pip: #8CCBA6; }
#stage-readout .r0920-spot-lines { display: grid; gap: var(--sp-2); width: 100%; margin: 0; }
#stage-readout .r0920-spot-line {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--sp-2);
  width: 100%; min-height: var(--btn-h); margin: 0; padding: var(--sp-2);
  border: 1px solid var(--r-rule); border-radius: var(--btn-radius); background: var(--bg); color: var(--fg);
  font: 500 var(--fs-body)/1.45 'DM Sans', system-ui, sans-serif; text-align: left; cursor: pointer; }
#stage-readout .r0920-spot-line:hover { border-color: var(--g-accent, var(--gold2)); }
#stage-readout .r0920-spot-line:focus-visible { outline: 2px solid var(--g-accent, var(--gold2)); outline-offset: 2px; }
#stage-readout .r0920-spot-line[aria-pressed="true"] { border-color: var(--g-accent, var(--gold2)); background: var(--g-wash, transparent);
  box-shadow: inset 0 0 0 1px var(--g-accent, var(--gold2)); }
#stage-readout .r0920-spot-n { display: grid; place-items: center; width: 32px; height: 32px; box-sizing: border-box; border-radius: 50%;
  border: 2px solid var(--g-accent, var(--gold2)); color: var(--g-ink, var(--fg)); font: 700 var(--fs-label)/1 'DM Sans', system-ui, sans-serif; }
#stage-readout .r0920-spot-line[aria-pressed="true"] .r0920-spot-n { border-color: transparent; background: var(--g-accent, var(--gold2));
  color: var(--emb-knock, #FFFFFF); }
#stage-readout .r0920-spot-reveal { display: grid; gap: var(--sp-2); width: 100%; margin: 0; padding: 0; list-style: none; }
#stage-readout .r0920-spot-item { display: flex; flex-direction: column; gap: var(--sp-1); margin: 0; padding: var(--sp-2);
  border: 1px solid var(--r-rule); border-left: 4px solid var(--g-accent, var(--gold2)); border-radius: var(--btn-radius); background: var(--bg); }
#stage-readout .r0920-spot-item[data-picked="1"] { box-shadow: inset 0 0 0 1px var(--g-accent, var(--gold2)); }
#stage-readout .r0920-spot-item[data-verdict="false"] { border-left-color: #8C3A44; background: rgba(140, 58, 68, .05); }
#stage-readout .r0920-spot-item[data-verdict="false"][data-picked="1"] { box-shadow: inset 0 0 0 1px #8C3A44; }
#stage-readout .r0920-spot-item > p { margin: 0; }
#stage-readout .r0920-spot-verdict { font: 700 var(--fs-label)/1.2 'DM Sans', system-ui, sans-serif; letter-spacing: .06em;
  text-transform: uppercase; color: var(--g-ink, var(--fg2)); }
#stage-readout .r0920-spot-item[data-verdict="false"] .r0920-spot-verdict { color: #722F37; }
#stage-readout .r0920-spot-item .r0920-spot-text { color: var(--fg); }
#stage-readout .r0920-spot-item s { color: var(--fg2); text-decoration-thickness: 2px; }
#stage-readout .r0920-spot-fix { color: var(--fg); font-weight: 600; }
#stage-readout .r0920-spot-proof,#stage-readout .r0920-spot-note { color: var(--fg2); font-size: var(--fs-label); }
#stage-readout .r0920-spot-note { margin: 0; }
:root[data-theme="dark"] #stage-readout .r0920-spot-item[data-verdict="false"] { border-left-color: #E39AA4; background: rgba(227, 154, 164, .07); }
:root[data-theme="dark"] #stage-readout .r0920-spot-item[data-verdict="false"][data-picked="1"] { box-shadow: inset 0 0 0 1px #E39AA4; }
:root[data-theme="dark"] #stage-readout .r0920-spot-item[data-verdict="false"] .r0920-spot-verdict { color: #F2BCC3; }
@media (prefers-reduced-motion: no-preference) {
  #stage-readout .r0920-spot-item { animation: r0920-spot-open 280ms ease-out both; }
  #stage-readout .r0920-spot-item:nth-child(2) { animation-delay: 90ms; }
  #stage-readout .r0920-spot-item:nth-child(3) { animation-delay: 180ms; }
}
@keyframes r0920-spot-open { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* 2026-10-05 DESIGN PASS, PART 20: WHAT HAS BEEN BUILT.
   Avery: make the perks better and show "what has been built based on the routing system", how well it did in
   prototype, "how it beats others, how it differs to others" and the personality system. From the lane 8 evidence, a
   section after the phases: four design cards in wine (the perks stay gold), three prototype results as figures, three
   alternatives it was tested against, and a note that every result is from public datasets or simulation, never from
   Testing Pool members. Each phase gains one line of what happens in it. Verified members see their status instead. */
.pool-system { --sys: #722F37; --sys-wash: rgba(114, 47, 55, .08); }
:root[data-theme="dark"] .pool-system { --sys: #F2BCC3; --sys-wash: rgba(242, 188, 195, .09); }
.pool-system .pool-perks { margin-top: var(--sp-4); }
.pool-system .pool-perk { background: linear-gradient(180deg, var(--sys-wash), transparent 72%), var(--pf-surface); box-shadow: inset 0 3px 0 var(--sys); }
.pool-system .pool-perk-glyph { background: var(--sys-wash); color: var(--sys); }
.pool-system .pool-perk-glyph svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pool-system .pool-perk-verb { color: var(--sys); }
.pool-proof,.pool-versus { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-6); }
.pool-proof-head { margin: 0; }
.pool-proof-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }
.pool-proof-item { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; padding-top: var(--sp-2); border-top: 3px solid var(--pf-gold); }
.pool-proof-item > p { margin: 0; }
.pool-proof-figure { font: 700 var(--fs-title)/1.1 "Cormorant Garamond", Georgia, serif; color: var(--pf-ink); text-wrap: balance; }
.pool-proof-line { font: 400 var(--fs-label)/1.6 "DM Sans", sans-serif; color: var(--pf-ink2); }
.pool-versus-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }
.pool-versus-list li { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; padding-top: var(--sp-2); border-top: 1px solid var(--pf-rule); }
.pool-versus-list strong { font: 600 var(--fs-body)/1.35 "DM Sans", sans-serif; color: var(--pf-ink); }
.pool-versus-list span { font: 400 var(--fs-label)/1.6 "DM Sans", sans-serif; color: var(--pf-ink2); }
.pool-system > .pool-note { margin-top: var(--sp-6); }
@media (max-width: 899px) { .pool-proof-list,.pool-versus-list { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); } }
.pool-phase-detail { font: 400 var(--fs-label)/1.6 "DM Sans", sans-serif; color: var(--pf-ink2); }
.pool-phase-line { font-weight: 600; color: var(--pf-ink); }
body.pool-signed-in .pool-system { display: none; }
/* 2026-10-05 DESIGN PASS, PART 21: THE MINIMAL TESTING POOL PAGE.
   Avery, after PR 119: the redone page was "way too lengthy and cluttered"; he asked for a minimalist page with the
   original phase animations back, what each phase gives, a more interactive proof section and the easiest sign-in. Built
   from lane B's prototype (the explorer with the original living icons, a proof strip whose figures are the tabs, an end
   bar and a first screen with the form in reach) and lane A's sign-in findings. Twelve sections become seven.
   Offsets are transform-only, armed by script and only under prefers-reduced-motion: no-preference; without script every
   panel is visible and stacked. Tokens only. */

/* ---------- shared stage ---------- */
.pool-explorer, .pool-proof2 { display: grid; gap: var(--sp-4); }
.pool-explorer > *, .pool-proof2 > * { min-width: 0; }
.pe-tabs, .pp-tabs { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0; padding: 0; border-bottom: 1px solid var(--pf-rule); }
.pe-tabs[hidden], .pp-tabs[hidden] { display: none; }
.pe-tab-ink { position: absolute; left: 0; bottom: -1px; width: calc(100% / var(--pe-count, 3)); height: 3px; background: var(--pf-gold); pointer-events: none;
  transform: translateX(calc(var(--pe-index, 0) * 100%)); transition: transform .35s cubic-bezier(.19, 1, .22, 1); }
.pe-panels { display: grid; gap: var(--sp-6); min-width: 0; }
.pe-panel { display: grid; gap: var(--sp-3); align-content: start; min-width: 0; padding-top: var(--sp-3); }
@media (min-width: 900px) { .pool-explorer .pe-panel { border-top: 2px solid var(--pf-gold); } }
[data-pe="on"] > .pe-panels { gap: 0; }
[data-pe="on"] .pe-panel { grid-area: 1 / 1; visibility: hidden; }          /* panels share one cell, so the stage never jumps */
[data-pe="on"] .pe-panel[data-active="true"] { visibility: visible; }
.pe-tab:focus-visible, .pp-tab:focus-visible, .pe-more:focus-visible, .pe-panel:focus-visible, .pp-seg button:focus-visible { outline: 2px solid var(--gold2, var(--gold)); outline-offset: 4px; }

/* ---------- explorer: tabs (a row on a phone, the three-phase ladder from 900 px) ---------- */
.pe-tab { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); min-height: 48px; margin: 0; padding: var(--sp-1); background: none; border: 0; color: var(--pf-ink); text-align: center; font: inherit; cursor: pointer; }
.pe-tab-n { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--pf-line); color: var(--pf-step);
  font: 700 var(--fs-label)/1 "DM Sans", sans-serif; transition: background-color .3s ease, color .3s ease, border-color .3s ease; }
.pe-tab[aria-selected="true"] .pe-tab-n { background: var(--pf-gold); border-color: transparent; color: #46131A; }
.pe-tab:hover .pe-tab-n { border-color: var(--pf-gold); }
.pe-tab-label { display: grid; justify-items: center; }
.pe-tab-name { font: 700 var(--fs-body)/1.15 "Cormorant Garamond", Georgia, serif; color: var(--pf-ink); }
.pe-tab-sub { display: none; }
@media (min-width: 900px) {
  .pool-explorer { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--sp-8); align-items: start; }
  .pool-explorer > .pool-section-head { grid-column: 1; grid-row: 1; }
  .pool-explorer > .pe-tabs { grid-column: 1; grid-row: 2; grid-auto-flow: row; grid-auto-columns: auto; grid-auto-rows: 1fr; border-bottom: 0; }
  .pool-explorer > .pe-panels { grid-column: 2; grid-row: 1 / span 2; }
  .pool-explorer > .pool-note { grid-column: 1 / -1; }
  .pool-explorer .pe-tabs::before { content: ""; position: absolute; left: 23px; top: calc(100% / 6); bottom: calc(100% / 6); width: 1px; background: var(--pf-line); }
  .pool-explorer .pe-tab { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--sp-2); align-items: center; justify-items: start; padding: var(--sp-2) 0; text-align: left; }
  .pool-explorer .pe-tab-n { width: 48px; height: 48px; font-size: var(--fs-body); position: relative; }
  .pool-explorer .pe-tab-label { justify-items: start; }
  .pool-explorer .pe-tab-name { font-size: var(--fs-lead); }
  .pool-explorer .pe-tab-sub { display: block; font: 400 var(--fs-label)/1.5 "DM Sans", sans-serif; color: var(--pf-ink2); }
  .pool-explorer .pe-tab-ink { left: 0; top: 0; bottom: auto; width: 48px; height: calc(100% / 3); display: grid; place-items: center; background: none; transform: translateY(calc(var(--pe-index, 0) * 100%)); }
  .pool-explorer .pe-tab-ink::after { content: ""; width: 48px; height: 48px; box-sizing: border-box; border: 2px solid var(--pf-gold); border-radius: 50%; transform: scale(1.22); }
}

/* ---------- explorer: the panel ---------- */
.pe-head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-3); align-items: center; }
.pe-icon-wrap { width: 72px; height: 72px; }
@media (min-width: 900px) { .pe-icon-wrap { width: 128px; height: 128px; } }
.pe-icon-wrap svg { display: block; width: 100%; height: 100%; overflow: visible;
  filter: drop-shadow(0 0 3px rgba(212, 168, 83, .25)) drop-shadow(0 0 8px rgba(212, 168, 83, .12)); }
.pe-icon-wrap svg [fill="var(--maroon)"] { fill: var(--pf-step); }          /* the dots read in both themes */
.pe-title { display: grid; gap: var(--sp-1); min-width: 0; }
.pe-name { margin: 0; font: 700 var(--ux-section)/1.1 "Cormorant Garamond", Georgia, serif; color: var(--pf-ink); text-align: left; }
@media (min-width: 900px) { .pe-purpose { display: none; } }
.pe-purpose { margin: 0; font: 400 var(--fs-label)/1.5 "DM Sans", sans-serif; color: var(--pf-ink2); }
.pe-row { display: grid; gap: var(--sp-1); }
.pe-row > p { margin: 0; }
.pe-label { font: 700 var(--fs-label)/1.2 "DM Sans", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--pf-gold-ink); }
.pe-row > p, .pe-get li, .pe-more-body p { font: 400 var(--fs-body)/1.6 "DM Sans", sans-serif; color: var(--pf-ink); }
.pe-get { display: grid; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }
.pe-get li { position: relative; padding-left: var(--sp-3); }
.pe-get li::before { content: ""; position: absolute; left: var(--sp-1); top: .55em; width: 5px; height: 10px; border: solid var(--pf-gold); border-width: 0 2px 2px 0; transform: rotate(40deg); }

/* More information: a text action; the height opens with the grid-row transition, so reflow never leaves a stale pixel height */
.pe-more { justify-self: start; display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 48px; margin: 0; padding: 0; background: none; border: 0; color: var(--pf-ink);
  font: 600 var(--fs-label)/1.5 "DM Sans", sans-serif; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.pe-more::after { content: ""; width: 8px; height: 8px; border: solid var(--pf-gold-ink); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-2px, -2px); transition: transform .3s ease; }
.pe-more[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-2px, -2px); }
.pe-more-wrap { display: grid; grid-template-rows: 1fr; }
[data-pe="on"] .pe-more-wrap { grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.19, 1, .22, 1); }
[data-pe="on"] .pe-more-wrap[data-open="true"] { grid-template-rows: 1fr; }
.pe-more-inner { min-height: 0; overflow: hidden; }
[data-pe="on"] .pe-more-inner { visibility: hidden; transition: visibility 0s linear .5s; }
[data-pe="on"] .pe-more-wrap[data-open="true"] .pe-more-inner { visibility: visible; transition-delay: 0s; }
.pe-more-body { display: grid; gap: var(--sp-1); margin: 0; padding: var(--sp-1) 0 var(--sp-1) var(--sp-2); border-left: 2px solid var(--pf-gold); }
.pe-more-body p { margin: 0; }

/* ---------- proof strip: the figures are the tabs ---------- */
.pp-tabs { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-1); border-bottom: 0; }
.pp-tabs .pe-tab-ink { display: none; }
.pp-tab { display: grid; align-content: center; justify-items: center; gap: var(--sp-1); min-height: 48px; margin: 0; padding: var(--sp-1); background: transparent; border: 2px solid var(--pf-step); border-radius: var(--btn-radius); color: var(--pf-ink); text-align: center; font: inherit; cursor: pointer; }
.pp-tab[aria-selected="true"] { background: var(--btn-fill, var(--pf-gold)); border-color: transparent; color: var(--btn-ink, #5C1A1B); }
.pp-figure { font: 600 var(--fs-label)/1.2 "DM Sans", sans-serif; color: inherit; }
.pp-tag { display: none; font: 600 var(--fs-label)/1.4 "DM Sans", sans-serif; color: var(--pf-gold-ink); }
@media (min-width: 900px) {
  .pp-tabs { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(0, 1fr); gap: 0; border-bottom: 1px solid var(--pf-rule); }
  .pp-tabs .pe-tab-ink { display: block; }
  .pp-tab { justify-items: start; align-content: start; gap: var(--sp-1); padding: var(--sp-2) var(--sp-2) var(--sp-2) 0; background: none; border: 0; border-radius: 0; color: var(--pf-ink); text-align: left; }
  .pp-tab[aria-selected="true"] { background: none; color: var(--pf-ink); }
  .pp-tab[aria-selected="false"] .pp-figure { color: var(--pf-ink2); }
  .pp-figure { font: 700 var(--ux-section)/1.1 "Cormorant Garamond", Georgia, serif; }
  .pp-tag { display: block; }
}
.pp-panel { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .pp-panel { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--sp-6); } }
.pp-text { display: grid; gap: var(--sp-2); align-content: start; }
.pp-line { margin: 0; font: 600 var(--fs-body)/1.5 "DM Sans", sans-serif; color: var(--pf-ink); }
.pp-chart { display: grid; gap: var(--sp-2); align-content: center; min-width: 0; }
.pp-seg { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.pp-seg button { min-height: 48px; margin: 0; padding: 0 var(--sp-2); border: 2px solid var(--pf-step); border-radius: var(--btn-radius); background: transparent; color: var(--pf-ink);
  font: 600 var(--fs-label)/1 "DM Sans", sans-serif; cursor: pointer; }
.pp-seg button[aria-pressed="true"] { background: var(--btn-fill, var(--pf-gold)); border-color: transparent; color: var(--btn-ink, #5C1A1B); }
.pp-track { height: var(--sp-2); border-radius: 999px; background: var(--pf-gold-soft); overflow: hidden; }
.pp-fill { display: block; width: 100%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--pf-gold), var(--pf-step));
  transform-origin: left center; transform: scaleX(var(--v, 1)); transition: transform .6s cubic-bezier(.19, 1, .22, 1); }
.pp-axis { margin: 0; font: 600 var(--fs-label)/1.4 "DM Sans", sans-serif; color: var(--pf-ink2); }
.pp-track-2 { position: relative; }
.pp-track-2 .pp-fill { position: absolute; inset: 0; }
.pp-fill-soft { background: color-mix(in srgb, var(--pf-gold) 45%, transparent); opacity: 1; }   /* the lesser bar, told apart in both themes */
.pp-readout { margin: 0; font: 400 var(--fs-body)/1.5 "DM Sans", sans-serif; color: var(--pf-ink); }
.pp-readout strong { font: 700 var(--fs-lead)/1 "Cormorant Garamond", Georgia, serif; }
.pp-gauge { display: block; width: 100%; max-width: 330px; height: auto; overflow: visible; }
.pp-gauge-track { fill: none; stroke: var(--pf-gold-soft); stroke-width: 12; stroke-linecap: round; }
.pp-gauge-fill { fill: none; stroke: var(--pf-step); stroke-width: 12; stroke-linecap: round; }
.pp-legend { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); margin: 0; padding: 0; list-style: none; font: 400 var(--fs-label)/1.5 "DM Sans", sans-serif; color: var(--pf-ink2); }
.pp-legend li { display: inline-flex; align-items: center; gap: var(--sp-1); }
.pp-legend strong { color: var(--pf-ink); }
.pool-proof2 > .pool-note, .pool-explorer > .pool-note { max-width: 62ch; }

/* without script nothing is hidden and the two script-only controls are not offered */
.pool-explorer:not([data-pe="on"]) .pe-more, .pool-proof2:not([data-pe="on"]) .pe-more, .pool-proof2:not([data-pe="on"]) .pp-seg { display: none; }

/* ---------- end bar (replaces the closing card; the wine card above stays the one inverse card) ---------- */
.pool-end { display: grid; gap: var(--sp-3); margin-block: var(--seam); padding-top: var(--sp-4); border-top: 1px solid var(--pf-gold); }
.pool-end-title { margin: 0; max-width: 28ch; font: 700 var(--ux-section)/1.1 "Cormorant Garamond", Georgia, serif; color: var(--pf-ink); text-align: left; }
.pool-end .pool-actions { margin: 0; align-items: center; }
.pool-end .pool-share { border-top: 0; padding-top: 0; }

/* ---------- tracker captions: the old How it works and Your choices, said once where they apply ---------- */
.pool-progress-note { flex-basis: 100%; font: 400 var(--fs-label)/1.5 "DM Sans", sans-serif; color: var(--pf-ink2); }
/* only the step the person is on explains itself; the later steps are answered in the questions below */
.pool-progress li:not([data-step-state="current"]) .pool-progress-note { display: none; }
@media (max-width: 899px) { .pool-progress-note { display: none; } }

/* only the icon on screen lives; the two hidden icons keep their pose, so the page runs 7 loops, not 22 */
[data-pe="on"] .pe-panel[data-active="false"] .pe-icon-wrap * { animation-play-state: paused; }

/* ---------- motion: transform-only offsets, armed by script, no-preference only ---------- */
@media (prefers-reduced-motion: no-preference) {
  .pe-panel[data-active="true"] .pe-icon-wrap { animation: peIconIn .6s cubic-bezier(.34, 1.56, .64, 1) both; }
  .pe-tab[aria-selected="true"] .pe-tab-n { transition-delay: .05s; }
  .pp-vs-our strong { transform-origin: left center; animation: peDotPop .5s cubic-bezier(.34, 1.56, .64, 1) .35s both; }
  .pe-panel[data-active="false"] .pp-vs-our strong { animation: none; }
}
@media (prefers-reduced-motion: no-preference) { .pool-faq-item[open] .pool-faq-answer { animation: peRise .28s ease-out both; } }
@keyframes peRise { from { transform: translateY(var(--sp-1)); } to { transform: none; } }
@keyframes peIconIn { from { transform: scale(.9) rotate(-6deg); } to { transform: none; } }
@keyframes peDotPop { from { transform: scale(.4); } to { transform: scale(1); } }   /* never 0: a stalled frame still shows the number */


/* ---- hero card ---- */
#page-p2p .pool-landing-head.pool-feature .pool-actions { display: none; }
#page-p2p .pool-landing-head.pool-feature { padding: var(--sp-3) var(--sp-4); gap: var(--sp-3); }
#page-p2p .pool-landing-head.pool-feature .pool-feature-body { gap: var(--sp-1); }
#page-p2p .pool-landing-head.pool-feature .pool-feature-art { width: 96px; }
#page-p2p .pool-landing-head.pool-feature .pool-feature-knot { width: 72px; height: 72px; }
@media (max-width: 720px) {
  #page-p2p .pool-landing-head.pool-feature { padding: var(--sp-2) var(--sp-3); gap: var(--sp-1); }
  #page-p2p .pool-landing-head.pool-feature .pool-feature-art,
  #page-p2p .pool-landing-head.pool-feature .pool-mark,
  #page-p2p .pool-landing-head.pool-feature .pool-chips { display: none; }
  /* ux-d97.css:140 sets .p2p-headline's size with !important (--ux-title), so this override needs it too */
  #page-p2p .pool-landing-head .p2p-headline { font-size: var(--fs-lead) !important; }
  #page-p2p .pool-landing-head .p2p-context { font-size: var(--fs-label); }
}

/* ---- the form block sits directly under the card ---- */
#page-p2p .pool-onboarding { margin-block: var(--sp-2) var(--seam); padding-block: var(--sp-2); gap: var(--sp-6); }
#page-p2p .pool-onboarding h2 { font-size: var(--fs-lead); }
@media (max-width: 899px) {
  #page-p2p .pool-onboarding { gap: var(--sp-2); border-block-start: 0; }
  #page-p2p .pool-onboarding-track > h2,
  #page-p2p .pool-onboarding-track > .pool-profile-note:not(#poolSignupStep),
  #page-p2p .pool-onboarding-track > .pool-text-action { display: none; }
  /* a signed-in member keeps the way back to their Eye on a phone */
  body.pool-signed-in #page-p2p .pool-onboarding-track > .pool-text-action { display: inline-flex; }
  #page-p2p .pool-onboarding .pool-progress { display: flex; flex-direction: row; gap: var(--sp-1); }
  #page-p2p .pool-onboarding .pool-progress li { flex: 1; min-width: 0; height: var(--sp-1); padding: 0; border: 0; border-radius: 999px;
    background: var(--pf-rule); line-height: 0; color: transparent; overflow: hidden; }
  #page-p2p .pool-onboarding .pool-progress li > * { display: none; }
  #page-p2p .pool-onboarding .pool-progress li[data-step-state=complete] { background: var(--pf-gold); }
  #page-p2p .pool-onboarding .pool-progress li[data-step-state=current] { background: var(--pf-step); }
  #page-p2p .pool-onboarding-content > form,
  #page-p2p .pool-onboarding-content .pool-profile-group { gap: var(--sp-2); }
}

/* ---- desktop rail: state words for later steps are for assistive technology only; the highlight shows the state ---- */
@media (min-width: 900px) {
  #page-p2p .pool-onboarding .pool-progress li { gap: 0; padding: var(--sp-1) var(--sp-2); }
  #page-p2p .pool-onboarding .pool-progress li[data-step-state=pending] .pool-progress-state { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #page-p2p .pool-onboarding .pool-progress { gap: var(--sp-1); }
}

/* ---------- additions by the build seat (2026-10-05) ---------- */
/* how it works: four drawn line icons above the proof tabs, the personality point kept under "Built and tested" (Avery) */
.pp-design { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .pp-design { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pp-design-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--sp-2); row-gap: var(--sp-1); align-content: start; min-width: 0;
  padding-top: var(--sp-2); border-top: 1px solid var(--pf-rule); }
.pp-design-icon { grid-row: 1 / span 2; width: 40px; height: 40px; fill: none; stroke: var(--pf-step); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.pp-design-title { margin: 0; font: 700 var(--fs-body)/1.25 "Cormorant Garamond", Georgia, serif; color: var(--pf-ink); text-align: left; }
.pp-design-line { margin: 0; font: 400 var(--fs-label)/1.55 "DM Sans", sans-serif; color: var(--pf-ink2); }
/* the two-sided ranking chart: one labelled bar per way of ranking */
.pp-bar-row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 3rem; align-items: center; gap: var(--sp-2); }
.pp-bar-label { font: 600 var(--fs-label)/1.3 "DM Sans", sans-serif; color: var(--pf-ink2); }
.pp-bar-value { font: 700 var(--fs-lead)/1 "Cormorant Garamond", Georgia, serif; color: var(--pf-ink); }
/* the reproduction chart (2026-10-05): the paper's reported correlation beside our run of its own code, then the error bars */
.pp-vs-row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--sp-2); padding-bottom: var(--sp-1); border-bottom: 1px solid var(--pf-rule); }
.pp-vs-cell { font: 400 var(--fs-label)/1.4 "DM Sans", sans-serif; color: var(--pf-ink2); }
.pp-vs-cell strong { display: block; font: 700 var(--fs-lead)/1.1 "Cormorant Garamond", Georgia, serif; color: var(--pf-ink); }
.pp-vs-our, .pp-vs-our strong { color: var(--pf-step); }
.pp-vs-row + .pp-axis { margin-top: var(--sp-2); }
.pp-readout strong { white-space: nowrap; }
/* the code step says where the code went and what to expect */
.pool-code-sent { margin: 0; font: 400 var(--fs-body)/1.5 "DM Sans", sans-serif; color: var(--pf-ink); overflow-wrap: anywhere; }
.pool-code-sent .pool-text-action { margin-left: var(--sp-1); }
.pool-code-hint { margin: var(--sp-1) 0 0; font: 400 var(--fs-label)/1.5 "DM Sans", sans-serif; color: var(--pf-ink2); }
#poolSignupResend[disabled] { opacity: .6; cursor: default; text-decoration: none; }
/* after verifying, the Eye is kept: said once, above the next step */
.pool-eye-kept { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); margin: 0 0 var(--sp-3); padding: var(--sp-2) var(--sp-3);
  border-left: 3px solid var(--pf-gold); border-radius: 0 var(--btn-radius) var(--btn-radius) 0; background: var(--pf-gold-soft);
  font: 600 var(--fs-body)/1.45 "DM Sans", sans-serif; color: var(--pf-ink); }
/* who is signed in on this device, with a way out */
.pool-signed-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); margin: var(--sp-2) 0 0; font: 400 var(--fs-label)/1.5 "DM Sans", sans-serif; color: var(--pf-ink2); }
/* a person without an Eye on this device: one clear route */
.pool-start-eye { display: grid; gap: var(--sp-2); }
.pool-start-eye > * { margin: 0; }
/* an empty status line takes no room (it stays in the page so later messages are still announced) */
#poolSignupStatus:empty { margin: 0; padding: 0; }
/* verified members see their status, the questions and Notify Me; the newcomer sections step aside */
body.pool-signed-in :is(.pool-explorer, .pool-proof2, .pool-end) { display: none; }

/* 6 October 2026. Testing Pool P1-P8 only, from plan.pdf.
   Load after ux-r0920.css. Existing fonts, tokens, copy, forms and artwork stay in place. */

/* P1 and P4: inactive panels do not paint or determine the active panel's height. */
#page-p2p [data-pe="on"] .pe-panel[data-active="false"] { display:none; }
#page-p2p [data-pe="on"] > .pe-panels { align-self:start; }

/* A closed disclosure has no trailing grid gap. Open disclosures retain the existing spacing scale. */
#page-p2p [data-pe="on"] .pe-panel,
#page-p2p [data-pe="on"] .pp-text { row-gap:0; }
#page-p2p [data-pe="on"] .pe-panel > * + * { margin-top:var(--sp-3,24px); }
#page-p2p [data-pe="on"] .pp-text > * + * { margin-top:var(--sp-2,16px); }
#page-p2p [data-pe="on"] .pe-more-wrap:not([data-open="true"]) { margin-top:0; }
#page-p2p [data-pe="on"] .pe-more-wrap:not([data-open="true"]) .pe-more-body { visibility:hidden; }
#page-p2p [data-pe="on"] .pp-panel > .pp-chart { margin-top:0; }
@media(max-width:899.98px) {
  #page-p2p [data-pe="on"] .pp-panel > .pp-chart { margin-top:var(--sp-3,24px); }
}

/* P2: reserve the selected ring's full box rather than scaling it beyond a clipping edge. */
@media(min-width:900px) {
  #page-p2p .pool-explorer .pe-tab { grid-template-columns:64px minmax(0,1fr); }
  #page-p2p .pool-explorer .pe-tab-n { width:48px; height:48px; justify-self:center; }
  #page-p2p .pool-explorer .pe-tabs::before { left:31.5px; }
  #page-p2p .pool-explorer .pe-tab-ink { width:64px; }
  #page-p2p .pool-explorer .pe-tab-ink::after {
    width:60px; height:60px; box-sizing:border-box; transform:none;
  }
}

/* P3: disable automatic word splitting on this page only. */
#page-p2p, #page-p2p * { -webkit-hyphens:manual; hyphens:manual; }

/* P5: use the FAQ's existing chevron, retaining native details/summary behaviour. */
#page-p2p details.pool-notify > summary {
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2,16px);
  min-height:48px; list-style:none; cursor:pointer;
  color:var(--pf-ink); font:600 var(--fs-label,16px)/1.5 "DM Sans",sans-serif;
}
#page-p2p details.pool-notify > summary::-webkit-details-marker { display:none; }
#page-p2p details.pool-notify > summary::after {
  content:""; flex:none; width:10px; height:10px; margin-inline:var(--sp-1,8px);
  border:solid var(--pf-gold-ink); border-width:0 2px 2px 0;
  transform:rotate(45deg) translate(-2px,-2px);
}
#page-p2p details.pool-notify[open] > summary::after { transform:rotate(-135deg) translate(-2px,-2px); }
#page-p2p details.pool-notify > summary:focus-visible { outline:2px solid var(--btn-line); outline-offset:4px; }

/* P6: five even full-width result rows on phones/tablets, instead of a ragged 3+2 grid. */
@media(max-width:899.98px) {
  #page-p2p .pp-tabs {
    grid-auto-flow:row; grid-template-columns:minmax(0,1fr); gap:0;
    border-top:1px solid var(--pf-rule);
  }
  #page-p2p .pp-tab {
    justify-items:start; align-content:center; gap:var(--sp-1,8px); min-height:64px;
    padding:var(--sp-1,8px) var(--sp-2,16px); text-align:left; border:0; border-bottom:1px solid var(--pf-rule);
    border-radius:0; background:none; color:var(--pf-ink);
  }
  #page-p2p .pp-tab[aria-selected="true"] {
    background:var(--pf-gold-soft); color:var(--pf-ink); box-shadow:inset 3px 0 0 var(--pf-gold);
  }
  #page-p2p .pp-figure { font:700 var(--fs-lead,24px)/1.15 "Cormorant Garamond",serif; }
  #page-p2p .pp-tag { display:block; color:var(--pf-ink2); }
}

/* P7: the existing four perks form two rows of two, without an orphan chip. */
@media(min-width:721px) {
  #page-p2p .pool-landing-head .pool-chips {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-1,8px);
  }
  #page-p2p .pool-landing-head .pool-chip { white-space:normal; }
}

/* P8: disclosure text is readable immediately, including when frames are delayed. */
#page-p2p [data-pe="on"] .pe-more-wrap[data-open="true"] .pe-more-body > p {
  opacity:1!important; clip-path:none!important; transform:none!important;
}
@media(prefers-reduced-motion:reduce) {
  #page-p2p [data-pe="on"] .pe-more-wrap { transition:none; }
}

/* 11 October 2026: appearance response states use the existing Testing Pool type and spacing system. */
#pool-appearance[hidden] { display:none; }
#pool-appearance .pool-appearance-status,
#pool-appearance .pool-appearance-card,
#pool-appearance .pool-appearance-predicate {
  display:flex; flex-direction:column; gap:var(--sp-2); margin-top:var(--sp-3); padding:var(--sp-3);
  border:1px solid var(--pf-rule); border-radius:var(--r-card); background:var(--pf-card,transparent);
}
#pool-appearance .pool-appearance-status > *,
#pool-appearance .pool-appearance-card > *,
#pool-appearance .pool-appearance-predicate > * { margin:0; }
#pool-appearance .pool-appearance-card h3,
#pool-appearance .pool-appearance-predicate h3 {
  color:var(--pf-ink); font:700 var(--fs-lead,24px)/1.25 "Cormorant Garamond",Georgia,serif;
}
#pool-appearance .pool-appearance-copy,
#pool-appearance .pool-appearance-list,
#pool-appearance .pool-appearance-label {
  color:var(--pf-ink); font:400 var(--fs-label,16px)/1.5 "DM Sans",sans-serif;
}
#pool-appearance .pool-appearance-list { display:grid; gap:var(--sp-1); padding-left:var(--sp-4); }
#pool-appearance .pool-appearance-photo-select { display:grid; gap:var(--sp-1); margin-top:var(--sp-3); }
#pool-appearance .pool-appearance-photo-select select { max-width:100%; padding:var(--sp-2); border:1px solid var(--pf-rule); border-radius:var(--r-card); background:var(--pf-card,transparent); color:var(--pf-ink); }
#pool-appearance .pool-appearance-muted { color:var(--pf-ink2); }
#pool-appearance .pool-appearance-gates {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr)); gap:var(--sp-2);
}
#pool-appearance .pool-appearance-effect { padding-top:var(--sp-2); border-top:1px solid var(--pf-rule); }
#pool-appearance .pool-appearance-effects { display:grid; gap:var(--sp-2); }
#pool-appearance .pool-appearance-label { font-weight:600; }
#pool-appearance #poolAppearanceStatus:empty { margin:0; padding:0; }
@media(max-width:600px) {
  #pool-appearance .pool-appearance-status,
  #pool-appearance .pool-appearance-card,
  #pool-appearance .pool-appearance-predicate { padding:var(--sp-2); }
}