/* ── Tokens ──────────────────────────────────────────────── */ :root { /* Page aliases only — all base tokens (--bg, --surface, --gold, suits, radii, shadows, fonts…) inherit canonically from css/site.css. These three are this page's local names for global values. */ --text-primary: var(--text); --text-secondary: var(--secondary); --border-strong: var(--rule-strong); } /* ── Reset ───────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 64px; } /* overflow-x:hidden stays on only — putting it on makes html the scroll container and breaks the sticky .site-header (other pages keep it on body, where the header stays pinned). */ body { font-family: var(--sans); background: var(--bg); color: var(--text-primary); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; text-decoration: none; } button { cursor: pointer; border: none; background: none; font: inherit; } input, select { font: inherit; } /* Visible keyboard focus across the page (a11y 2.4.7) */ :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; } /* Finder label sits on a light band — darker gold for AA contrast. The Quadrations / Your Cards / Tools labels stay bright gold on navy. */ .finder .section-label { color: var(--gold-ink); } /* a11y: gold used as reading text on light → darker gold for AA (the relationship note in the light popups). */ .rel-note { color: var(--gold-ink); } /* ── Layout ──────────────────────────────────────────────── */ .container { max-width: var(--max-w); margin: 0 auto; padding: 0 2rem; } .section { padding: 5rem 0; } .section-label { display: block; text-align: center; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--gold); margin-bottom: 0; } /* In flex containers margins don't collapse — zero out the label margin so the gap/margin-bottom on the parent sets the spacing uniformly */ .finder-inner > .section-label { margin-bottom: 0; } .divider { width: 40px; height: 1px; background: var(--gold); margin: 1.25rem 0; } /* ── Birth Card Finder ───────────────────────────────────── */ .finder { background: transparent; padding: 0; } /* first section since the Card Elements row moved to the page foot (2026-07-06); top gap from main > h1 + .page-section */ .finder-top { max-width: 575px; margin: 0 auto; padding: 0 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; position: relative; } .finder-inner { max-width: 575px; margin: 0 auto; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; /* width:100% (+ min-width:0) makes this a DEFINITE width — its old shrink-to-fit width (margin:0 auto suppresses flex-item stretch) was sized by the fixed-width finder-form's min-content, so in duo mode on narrow phones the box's max-width:100% resolved against an already- overflowing 424px parent and never clamped. Definite width → the form clamps to the phone width and the wheels compress instead. */ width: 100%; min-width: 0; } /* Single-birthday result card — sized to match the relationship triptych's centre card so swapping between solo and relationship readings keeps the focal card at one consistent size. */ .result-pip-card { width: 78px; height: 108px; flex-shrink: 0; } .rel-result-pip { border-color: var(--gold) !important; background: var(--card-paper) !important; } .finder-form { /* STANDARDISED widths (2026-07-06; replaced fit-content, whose width drifted with content at every breakpoint): one fixed target per mode, the same at every screen size, clamped only by max-width:100% on narrow phones. Solo → duo animates the box width itself, in step with the partner slot's own .4s slide (same duration + easing), so the two reveals share one motion. Numbers: solo fits two tab columns at their minimum (~108px each) + padding; duo adds room for the second person slot; the wheels are flex and absorb the slack. */ --fw-solo: 272px; --fw-duo: 424px; width: var(--fw-solo); max-width: 100%; transition: width .4s cubic-bezier(.4, 0, .2, 1); align-self: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.25rem 1.5rem; box-shadow: var(--sh-sm); } .finder-form:has(.person-partner:not(.is-ghost)) { width: var(--fw-duo); } @media (prefers-reduced-motion: reduce) { .finder-form { transition: none; } } /* With the form width fixed per mode, the person slots flex to fill it — person 1 relaxes a little in solo and both people share evenly in duo. */ .person-slot { flex: 1; } .finder-inputs { display: flex; align-items: center; gap: .6rem; } /* Source-of-truth selects — the wheel widgets write to them and fire change events; the rest of the page (maybeFindUnified, share link, populateDays, etc.) keeps reading from these. They live in a sibling .finder-dd-row beneath the wheels; that row is hidden by default and shown when the user enables dropdown mode via the chevron toggle in the .person-divider column. */ /* Rank/suit card picker — the chevron reveals these two dropdowns in place of the (retired) DD/MM selects, styled identically to .finder-dd-row. Selecting a rank AND a suit loads that card's reading. */ .finder-cardpick-row { display: none; } .finder-form.cp-on .finder-cardpick-row { display: flex; flex-direction: column; align-items: stretch; gap: .4rem; margin-top: .55rem; padding-top: .55rem; border-top: 1px dashed rgba(199,154,84,.18); /* width:0 + min-width:100% keeps this row from driving the fit-content form's width (the "♦ Diamonds" selects are wider than the wheels, so without this the box stretches every time the picker opens). It contributes 0 to the intrinsic pass, then fills the wheel-defined slot width in layout. Stacking the two selects vertically then gives EACH the full wheel width, so "Queen" / "♦ Diamonds" sit tidily inside the box instead of being squeezed into half-width side-by-side selects. */ width: 0; min-width: 100%; } .finder-cardpick-row select { display: block; width: 100%; flex: none; height: 32px; padding: 0 .5rem; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--gold-ink); font-family: var(--sans); font-size: .8rem; cursor: pointer; appearance: auto; } /* Inset focus ring (offset INWARD): the selects are full-slot-width, and the partner slot clips overflow for its slide-in — an outward outline would be cut off on the left/right there. Inset draws the ring just inside each select, fully visible and identical for BOTH people. */ .finder-cardpick-row select:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; } .finder-dd-row { display: none; } .finder-form.dd-on .finder-dd-row { display: flex; align-items: center; gap: .6rem; margin-top: .55rem; /* Hairline rule above to signal "shortcut / alternate" rather than a second primary control. */ padding-top: .55rem; border-top: 1px dashed rgba(199,154,84,.18); } /* Native selects styled to sit QUIETER than the wheels — wheels stay the headline, dropdowns are the express lane. */ .finder-dd-row select.fw-bound { display: block; flex: 1; min-width: 0; height: 32px; padding: 0 .5rem; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--gold-ink); font-family: var(--sans); font-size: .8rem; cursor: pointer; appearance: auto; } .finder-dd-row select.fw-bound:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .finder-dd-row select.fw-bound:hover { border-color: rgba(199,154,84,.55); } /* ── Scroll-wheel picker ───────────────────────────────────── iOS / Co-Star style. Each frame is a fixed-height column that scroll-snaps its items into the centre cell (the gold-edged horizontal band). The currently-snapped item gets .is-current (gold ink + slight scale). The wheel writes the picked value to its hidden