* { box-sizing:border-box; } body { margin:0; background:var(--cream); color:var(--ink); font-family:var(--font-sans); font-size:15px; line-height:1.6; } /* Grid and flex children default to min-width:auto, which lets a wide table push the whole page sideways. This is the rule the signed-in mockup was missing on all seventeen routes. */ .l-wrap > *, .l-sec > * { min-width:0; } .l-wrap { max-width:var(--wrap); margin:0 auto; padding:0 16px; } .l-sec { padding:38px 0; } .l-alt { background:var(--surface-2); border-block:1px solid var(--line-soft); } .l-sub { font-size:var(--text-base); line-height:1.62; color:var(--ink-2); margin:0; max-width:66ch; } /* A link in a lede had no colour and came out in the browser's own -webkit-link — rgb(158,158,255) in dark, #0000EE in light. .l-sub is on every page, so this was one page today and any page that adds a link to a lede tomorrow. Set here rather than on the page that happened to have one. */ .l-sub a { color:var(--gold-dk); text-underline-offset:2px; } /* A CENTRED SECTION, for pages whose head is centred too. Lives here rather than in a page's stylesheet because two clusters use it now — it was .ai-c in ai_astrologer.py, and pages/dasha.py picked up the class without the rule, so its ledes rendered left under centred heads and looked like an oversight. margin-inline is not optional: .l-sub caps at 66ch, so centring the text without centring the box leaves a centred column sitting on the left of the wrap. Only the lede. Lists, tables and cards inside a .l-ctr stay left — centred body copy is ragged on both edges and a centred bulleted list stops forming a column to scan. */ .l-ctr .l-sub { text-align:center; margin-inline:auto; } /* TWO LEDES GO SIDE BY SIDE. One is fine stacked: 66ch keeps a line readable and the grid or panel under it carries the width. Two of them stacked is not — they fill the left half of the band, the right half is empty, and under a full-width heading with a full-width panel below it the pair reads as a column that has been cut off rather than as air. Measured at 1280: 582px of a 1180px section, 49% of it, twice over. A track each, so both keep the SAME measure they had — this is a layout fix, not a wider line. Stretching one paragraph across 1180px would give 150 characters to a line that is already at 74. auto-fit rather than two fixed columns, because the home page has a pair inside a half-width column; there they stack again rather than becoming two forty-character ribbons. .l-sub KEEPS ITS 66ch. Each track comes out at 552px against a 582px cap, so the track is what governs in two columns and the cap is what governs when it falls back to one — which is the width it has today. Overriding the cap to none looked tidier and gave a 736px tablet a 93-character line, which is the fault this rule exists to avoid. min(400px, 100%), NOT 400px. A minimum track wider than the container does not shrink — it overflows it, and at 320px the whole page scrolled sideways by 26px. min() caps the floor at whatever room there is. */ .l-lede { display:grid; gap:10px 44px; margin-bottom:20px; grid-template-columns:repeat(auto-fit, minmax(min(400px, 100%), 1fr)); } .l-mb { margin-bottom:20px; } .l-mt { margin-top:22px; } .l-signin, .l-signup { text-decoration:none; white-space:nowrap; } .l-act-u, .l-act-a { display:flex; align-items:center; gap:8px; } /* The drawer carries Sign in and Sign up and nothing else now — the theme toggle moved to top_nav's `bar`, which is the header at every width. Its own display and gap belong to the component, in ui.py, so the breakpoint that hides it there is not overruled from here. */ .c-drawer-a .l-signin, .c-drawer-a .l-signup { flex:1; min-height:44px; padding:0 15px; justify-content:center; } /* Date and time are one question, asked once. Both values are short enough to sit side by side even at 360px, and pairing them stops the form reading as five separate chores. */ /* Date and time side by side, and STACKED on the narrowest phones. The two were always a 1fr 1fr grid; what changed is that the time trigger now reads 09:15 PM as four flex spans rather than one string, so its min-content is wider than half of a 288px card and the card grew to 311 — 7px of sideways scroll on the page the whole site links to. minmax(0,1fr) alone would have kept the row and clipped the readout instead. */ .l-dt { display:grid; grid-template-columns:1fr; gap:10px; } @media (min-width:360px) { .l-dt { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } } /* Part of the hero's left column, not a band of its own. It anchors the bottom of that column so it finishes level with the form card. */ /* Inside the form card the list sits under the button, separated by a rule rather than by more whitespace — it is what pressing the button gets you, so it should read as part of the button's promise. */ .l-cardsub { margin:2px 0 14px; } .l-cardinc { margin-top:14px; padding-top:14px; border-top:1px solid var(--line-soft); } .l-inc { list-style:none; margin:0; padding:0; display:grid; gap:9px; } .l-inc li { display:flex; align-items:flex-start; gap:9px; } .l-inc svg { flex:none; margin-top:2px; color:var(--gold-dk); } .l-inc span { font-size:14px; line-height:1.45; color:var(--ink-2); } .l-samp { display:flex; align-items:center; gap:13px; padding:14px 16px; text-decoration:none; color:var(--ink); border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); } .l-samp:hover { border-color:var(--gold); background:var(--gold-bg); } /* Between the two-column breakpoint and 1024 the left column runs 9px past the card, because the headline takes an extra line before the columns are wide enough. Four pixels off the padding and four off the stack gap close it without anyone being able to tell the difference. */ .l-samp > svg:first-child { flex:none; color:var(--gold-dk); } .l-samp > svg:last-child { flex:none; color:var(--ink-3); margin-left:auto; } .l-samp span { min-width:0; } .l-samp b { display:block; font-size:14.5px; font-weight:700; } .l-samp i { display:block; font-style:normal; font-size:12.5px; color:var(--ink-3); margin-top:2px; line-height:1.45; } .l-dt .c-pf { margin-bottom:0; } .l-dth { margin:6px 0 var(--space-3); } .l-mb2 { margin-bottom:16px; } .l-mark { display:block; width:34px; height:34px; flex:none; } .l-mark img { display:block; width:100%; height:100%; border-radius:19%; } /* proof row */ .l-proof { background:var(--gold-bg); border-block:1px solid var(--line); } .l-pfr { display:grid; grid-template-columns:repeat(2,1fr); gap:0; padding:4px 0; } .l-pf { padding:18px 4px 18px 18px; } /* Hairlines, not a colour change, do the separating — and only between cells that are actually side by side, which changes at each breakpoint. */ .l-pf:nth-child(2n) { border-left:1px solid var(--line); } .l-pf:nth-child(n+3) { border-top:1px solid var(--line); } .l-pf:first-child { padding-left:0; } .l-pf b { display:block; font-family:var(--font-serif); font-size:29px; line-height:1.05; font-weight:600; color:var(--gold-dk); letter-spacing:-.015em; } .l-pf span { display:block; font-size:13.5px; font-weight:650; margin-top:5px; color:var(--ink); } .l-pf i { display:block; font-style:normal; font-size:12.5px; color:var(--ink-3); margin-top:2px; } @media (min-width:760px) { .l-pfr { grid-template-columns:repeat(4,1fr); } .l-pf:nth-child(n+3) { border-top:0; } .l-pf:nth-child(n+2) { border-left:1px solid var(--line); } } /* panchang */ .l-panch { display:grid; gap:8px; grid-template-columns:repeat(2,1fr); } .l-pc { padding:13px 14px; border:1px solid var(--line); border-radius:var(--r-in); background:var(--surface); } .l-pc span { display:block; font-family:var(--font-mono); font-size:9px; letter-spacing:.13em; color:var(--ink-3); } .l-pc b { display:block; font-size:15px; margin-top:5px; } .l-pc i { display:block; font-style:normal; font-size:12px; color:var(--ink-3); } .l-pc.c-t-good b { color:var(--good); } .l-pc.c-t-bad b { color:var(--bad); } @media (min-width:700px) { .l-panch { grid-template-columns:repeat(3,1fr); } } @media (min-width:1000px) { .l-panch { grid-template-columns:repeat(6,1fr); } } /* rashifal */ .l-rsg { display:grid; gap:7px; grid-template-columns:repeat(3,1fr); } .l-rs { display:flex; flex-direction:column; align-items:center; gap:1px; min-height:98px; justify-content:center; padding:12px 5px; border:1px solid var(--line); border-radius:var(--r-in); background:var(--surface); text-decoration:none; color:var(--ink); text-align:center; } .l-rs:hover { border-color:var(--gold); background:var(--gold-bg); } .l-rs .c-sym { color:var(--gold-dk); margin-bottom:4px; } .l-rs b { font-size:12.5px; font-weight:650; } .l-rs i { font-style:normal; font-size:10.5px; color:var(--ink-3); } .l-rs u { text-decoration:none; font-size:12px; color:var(--gold-dk); } @media (min-width:560px) { .l-rsg { grid-template-columns:repeat(4,1fr); } } @media (min-width:900px) { .l-rsg { grid-template-columns:repeat(6,1fr); } } /* tools */ .l-tools { display:grid; gap:12px; } .l-ti { display:grid; place-items:center; width:40px; height:40px; border-radius:11px; color:var(--gold-dk); background:var(--gold-bg); margin-bottom:11px; } .l-tl { display:flex; flex-wrap:wrap; gap:6px; margin-top:13px; } .l-tl a { display:inline-flex; align-items:center; min-height:44px; font-size:12.5px; font-weight:600; padding:0 14px; border-radius:var(--r-pill); color:var(--ink-2); border:1px solid var(--line); background:var(--surface); text-decoration:none; } .l-tl a:hover { color:var(--gold-dk); border-color:var(--gold); background:var(--gold-bg); } @media (min-width:720px) { .l-tools { grid-template-columns:repeat(2,1fr); } } /* astrologers */ /* .h-astro in home.py sets display on top of this and is the only caller, so anything layout-ish added here is dead. The phone rail lives there. */ .l-astro { display:grid; gap:11px; grid-template-columns:repeat(1,1fr); } .l-ah { display:flex; align-items:center; gap:11px; } .l-an { display:block; font-size:15px; font-weight:700; } .l-as { display:block; font-size:12.5px; color:var(--ink-3); } .l-am { display:flex; gap:5px; margin-top:12px; } @media (min-width:600px) { .l-astro { grid-template-columns:repeat(2,1fr); } } @media (min-width:1000px) { .l-astro { grid-template-columns:repeat(4,1fr); } } /* The unknown-birth-time escape hatch belongs inside the time picker, where someone reaches it at the exact moment they realise they cannot answer. */ .l-unk { margin-top:14px; padding-top:12px; border-top:1px solid var(--line-soft); } .l-faq { margin-top:16px; } /* ── page head ────────────────────────────────────────── */ .s-crumb { padding-top:16px; } .s-top { padding:22px 0 6px; } .s-head { max-width:64ch; } /* With a form beside it the header is the full width and the two columns share it, so the reading underneath is not squeezed into a rail. */ .s-head-2 { max-width:none; display:grid; gap:26px; grid-template-columns:minmax(0,1fr); align-items:start; } .s-head-2 > * { min-width:0; } @media (min-width:960px) { .s-head-2 { grid-template-columns:minmax(0,1fr) minmax(0,380px); } } .s-head-t { max-width:64ch; } .s-eyebrow { display:inline-block; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-dk); padding:5px 10px; border-radius:var(--r-pill); background:var(--gold-bg); margin-bottom:14px; } .s-h1 { font-family:var(--font-serif); font-size:clamp(27px,5.2vw,42px); line-height:1.08; letter-spacing:-.021em; font-weight:600; margin:0 0 13px; text-wrap:balance; } .s-h1 em { font-style:normal; color:var(--gold-dk); } .s-dek { font-size:var(--text-md); line-height:1.62; color:var(--ink-2); margin:0; max-width:58ch; } /* What the page gives back, named. See page_head() for why it is only on the fourteen with a full birth-details form. */ .s-ret { margin-top:18px; max-width:58ch; } .s-ret ul { margin:8px 0 0; padding:0; list-style:none; display:grid; gap:5px; } .s-ret li { position:relative; padding-left:18px; font-size:14px; line-height:1.55; color:var(--ink-2); } .s-ret li::before { content:''; position:absolute; left:2px; top:9px; width:5px; height:5px; border-radius:50%; background:var(--gold-solid); } @media (min-width:960px) { .s-head-fill { align-items:stretch; } .s-head-fill > .s-head-t { display:flex; flex-direction:column; } .s-head-fill .s-meta { margin-top:auto; padding-top:16px; } } /* The facts a dek would otherwise carry as adjectives. Mono, so they read as data rather than as more sentence. */ /* THE CENTRED HEAD, for pages that are not asking for a birth time. The default sits beside a form card and runs to 64ch down the left; a page whose top is a choice rather than a form leaves that whole right-hand column empty, and the text reads as the caption of something that failed to load. Two pages want this — the tarot hub, whose top half is six readings, and the astrologer pages, whose top half is a roster — so it lives here rather than being written twice. */ .s-head-c { max-width:700px; margin-inline:auto; text-align:center; } .s-head-c .s-eyebrow { font-size:11.5px; letter-spacing:.09em; font-weight:700; border:1px solid var(--gold-lt); padding:5px 13px; margin-bottom:16px; } .s-head-c .s-h1 { font-size:clamp(30px,5.6vw,46px); } .s-head-c .s-dek { margin-inline:auto; max-width:62ch; } .s-head-c .s-meta { justify-content:center; } .s-meta { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:16px; font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--ink-3); } .s-meta span { display:flex; align-items:center; gap:7px; } .s-meta span + span::before { content:''; width:3px; height:3px; flex:none; border-radius:50%; background:var(--line); margin-left:-11px; } /* ── related ──────────────────────────────────────────── */ .s-rel { display:grid; gap:10px; grid-template-columns:1fr; } @media (min-width:620px) { .s-rel { grid-template-columns:repeat(2,1fr); } } @media (min-width:960px) { .s-rel { grid-template-columns:repeat(3,1fr); } } .s-rel > * { min-width:0; } .s-rel-i { display:flex; align-items:flex-start; gap:12px; padding:14px 16px; min-height:44px; text-decoration:none; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); } .s-rel-i:hover { border-color:var(--gold); background:var(--gold-bg); } .s-rel-k { flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:9px; background:var(--gold-bg); color:var(--gold-dk); } .s-rel-x { min-width:0; display:flex; flex-direction:column; line-height:1.4; } .s-rel-x b { font-size:14px; font-weight:650; } .s-rel-x i { font-style:normal; font-size:12.5px; color:var(--ink-3); margin-top:2px; } /* ── closing CTA ──────────────────────────────────────── */ .s-cta { display:grid; gap:20px; align-items:center; padding:28px; border-radius:var(--r-card); border:1px solid var(--gold-lt); background: radial-gradient(120% 140% at 88% 0%, var(--gold-bg) 0%, transparent 64%), var(--surface); } @media (min-width:820px) { .s-cta { grid-template-columns:1fr auto; gap:34px; padding:32px 36px; } } .s-cta > * { min-width:0; } .s-cta h2 { font-family:var(--font-serif); font-size:clamp(21px,3.4vw,28px); line-height:1.16; letter-spacing:-.018em; font-weight:600; margin:0 0 9px; text-wrap:balance; } .s-cta p { font-size:var(--text-base); line-height:1.6; color:var(--ink-2); margin:0; max-width:52ch; } .s-cta-b { display:flex; flex-wrap:wrap; gap:10px; } .s-cta-b > * { flex:1 1 auto; } .s-cta-alt { display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; white-space:nowrap; } .s-cta-alt svg { color:var(--gold-dk); } /* Everything here is namespaced m-. The shell owns c-, h-, l-, s- and sg-; restyling a bare class one of those owns is what checks/clash.py is for. */ /* Under the drawing it describes, inside the same card. As a sibling of the card it was 524px of ragged text under an 1180px box — a caption orphaned from the thing it captions. */ .m-note { max-width:44ch; margin:4px auto 0; text-align:center; font-size:12.5px; line-height:1.65; color:var(--ink-3); } .m-note b { color:var(--ink-2); font-weight:650; } /* ── what the 36 is made of, in the hero ────────────────────── */ /* ONE COLUMN, not two. Two put eight kootas in four cramped rows and left the left column 179px short of the form card beside it; eight full-width rows are both taller and easier to read, which is the rare case where the fix for a hole is also the better layout. */ /* --hkd is the dot, --hkg the space between two. The run is sized off both so eight dots and seven gaps is exactly the reserved width and the stair is drawn to the same origin on every row. */ .m-hk { --hkd:12px; --hkg:6px; } .m-hk ul { list-style:none; margin:12px 0 0; padding:0; display:grid; gap:0; grid-template-columns:1fr; } .m-hk li { display:flex; align-items:center; gap:14px; padding:8px 0; border-bottom:1px solid var(--line-soft); } /* A rule under the last row is a line under nothing. Eight hairlines is already the noisiest thing in the column. */ .m-hk li:last-child { border-bottom:0; } /* ONE LINE, not two. Stacking the gloss under the name made every row 48px and the block 509px — 163px longer than the form card beside it, which is the same hole as before with the columns swapped. The gloss is pushed right so its edge meets the stair's origin and the three columns read. */ .m-hk-n { display:flex; align-items:baseline; gap:12px; flex:1 1 auto; min-width:0; font-size:14px; font-weight:600; color:var(--ink); } .m-hk-n i { margin-left:auto; text-align:right; font-style:normal; font-size:12.5px; font-weight:500; line-height:1.3; color:var(--ink-3); } .m-hk-d { flex:none; display:flex; gap:var(--hkg); width:calc(8 * var(--hkd) + 7 * var(--hkg)); } /* --gold measures 2.6:1 on the hero cream and a filled circle is a graphical object, which WCAG asks 3:1 of. --gold-dk is 5.2:1 light and 11.8:1 dark — the same token the numeral used before it became dots. */ .m-hk-d i { flex:none; width:var(--hkd); height:var(--hkd); border-radius:50%; background:var(--gold-dk); } .m-hk-c { margin:12px 0 0; font-size:12.5px; line-height:1.55; color:var(--ink-3); } /* Below 420px the run has to give width back to the names; 9px dots keep eight of them inside 111px. Nothing here is a tap target. */ @media (max-width:420px) { .m-hk { --hkd:9px; --hkg:5px; } .m-hk li { gap:10px; } } /* ── the two forms ──────────────────────────────────────────── */ .m-pf-2 { display:grid; gap:18px; grid-template-columns:1fr; } @media (min-width:900px) { .m-pf-2 { grid-template-columns:1fr 1fr; } } .m-pf { min-width:0; } .m-pf-h { padding-bottom:9px; margin-bottom:12px; border-bottom:1px solid var(--line-soft); } /* ── the score ──────────────────────────────────────────────── */ .m-head { display:grid; gap:26px; grid-template-columns:1fr; align-items:center; padding:26px; border:1px solid var(--gold-lt); border-radius:var(--r-card); background:var(--gold-bg); } @media (min-width:900px) { .m-head { grid-template-columns:minmax(0,500px) minmax(0,1fr); } } .m-head-r { min-width:0; } .m-head-x { min-width:0; } .m-rg { width:100%; max-width:520px; height:auto; display:block; } /* The track is the koota's full worth; the fill is what it earned. Butt caps, not round — a round cap on a one-point arc adds a stroke-width of length to something two degrees wide and it stops being proportional. */ .m-rg-t { fill:none; stroke:var(--line); stroke-width:22; } .m-rg-f { fill:none; stroke-width:22; } .m-rg-good { stroke:var(--good); } .m-rg-mid { stroke:var(--mid); } .m-rg-bad { stroke:var(--bad); } .m-rg-l { font-family:var(--font-mono); font-size:11px; fill:var(--ink-2); } .m-rg-n { font-size:11px; fill:var(--ink-3); font-weight:700; } .m-rg-v { font-family:var(--font-serif); font-size:64px; font-weight:600; fill:var(--gold-dk); } .m-rg-s { font-family:var(--font-mono); font-size:13px; fill:var(--ink-2); } .m-lvl { margin-top:16px; padding-top:15px; border-top:1px solid var(--gold-lt); } .m-lvl > b { display:block; font-family:var(--font-serif); font-size:26px; font-weight:600; color:var(--gold-dk); margin:4px 0 3px; } .m-lvl > i { display:block; font-style:normal; font-size:13.5px; line-height:1.6; color:var(--ink-2); } .m-who { display:grid; gap:12px; grid-template-columns:1fr 1fr; min-width:0; } .m-who-c { min-width:0; padding:13px 15px; border-radius:var(--r-in); background:var(--surface); } .m-who-c > b { display:block; font-family:var(--font-serif); font-size:20px; font-weight:600; color:var(--ink); margin:4px 0 2px; } .m-who-c > i { display:block; font-style:normal; font-size:11.5px; line-height:1.45; color:var(--ink-3); } .m-verdict { margin:14px 0 0; padding:12px 14px; border-radius:var(--r-in); background:var(--surface); font-size:13.5px; line-height:1.7; color:var(--ink-2); } .m-verdict b { color:var(--ink); font-weight:700; } /* ── the eight koota cards ──────────────────────────────────── */ /* TWO ACROSS, NOT FOUR. At four the card was 270px holding an eyebrow, a headline, a number, a bar, two labelled values and a paragraph — six stacked things in a box too narrow for any of them, and the groom/bride pair wrapped to one per line. Two across is 570px: the pair sits side by side and the description gets a real measure. */ .m-k-g12 { display:grid; gap:14px; grid-template-columns:1fr; } @media (min-width:900px) { .m-k-g12 { grid-template-columns:repeat(2,minmax(0,1fr)); } } /* NO SPINE. The card carried a coloured left border and the ring inside it carried the same colour — one value said twice, and the border was the louder of the two on a card whose point is the ring. The ring keeps it. */ .m-k { min-width:0; display:grid; gap:18px; grid-template-columns:74px minmax(0,1fr); align-items:start; padding:18px 20px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); } .m-k-l { text-align:center; min-width:0; } .m-k-nm { display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-2); margin-top:7px; line-height:1.3; } .m-k-of { display:block; font-size:10.5px; color:var(--ink-3); margin-top:2px; } .m-mr { width:62px; height:62px; display:block; margin:0 auto; } .m-mr-t { fill:none; stroke:var(--line); stroke-width:6; } .m-mr-f { fill:none; stroke-width:6; } .m-mr-good { stroke:var(--good); } .m-mr-mid { stroke:var(--mid); } .m-mr-bad { stroke:var(--bad); } .m-mr-v { font-family:var(--font-serif); font-size:23px; font-weight:600; fill:var(--ink); } .m-k-b { min-width:0; } .m-k-w { display:block; font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.4; margin-bottom:12px; } .m-k-g { display:grid; gap:9px 14px; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); } .m-kv { min-width:0; } .m-kv > b { display:block; font-size:13px; font-weight:600; color:var(--ink); margin-top:2px; } .m-kv > i { display:block; font-style:normal; font-size:11px; line-height:1.45; color:var(--ink-3); margin-top:2px; } .m-k-d { margin:12px 0 0; padding-top:11px; border-top:1px solid var(--line-soft); font-size:12.5px; line-height:1.6; color:var(--ink-2); } .m-k-lost { margin:10px 0 0; font-size:12px; line-height:1.6; color:var(--ink-3); } /* The caption is a block. Inline, it ran straight into its own sentence — "…WOULD HAVE COVEREDPhysical incompatibility". */ .m-k-lost > .h-f-l { display:block; margin-bottom:3px; } /* ── the three doshas ───────────────────────────────────────── */ .m-d-g { display:grid; gap:16px; grid-template-columns:1fr; align-items:stretch; } @media (min-width:900px) { .m-d-g { grid-template-columns:repeat(3,minmax(0,1fr)); } } .m-d { min-width:0; display:flex; flex-direction:column; padding:20px 22px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); } .m-d-mid { border-color:var(--gold-lt); background:var(--gold-bg); } .m-d-h > b { display:block; font-family:var(--font-serif); font-size:30px; font-weight:600; line-height:1.1; margin:5px 0 4px; color:var(--ink); } .m-d-mid .m-d-h > b { color:var(--gold-dk); } .m-d-good .m-d-h > b { color:var(--good); } .m-d-h > i { display:block; font-style:normal; font-size:12.5px; line-height:1.6; color:var(--ink-2); margin-bottom:14px; } .m-d > p { margin:14px 0 0; padding-top:14px; border-top:1px solid var(--line-soft); font-size:13px; line-height:1.7; color:var(--ink-2); } /* ── the verdict lists ──────────────────────────────────────── */ .m-rl-g { display:grid; gap:14px; grid-template-columns:1fr; margin-bottom:22px; } @media (min-width:760px) { .m-rl-g { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); } } .m-rl { min-width:0; padding:16px 18px; border:1px solid var(--line); border-left:3px solid var(--line); border-radius:var(--r-card); background:var(--surface); } .m-rl-good { border-left-color:var(--good); } .m-rl-mid { border-left-color:var(--mid); } .m-rl ul { margin:9px 0 0; padding-left:17px; } .m-rl li { font-size:12.5px; line-height:1.7; color:var(--ink-2); } #m-msg:empty { display:none; } #m-msg { margin-top:10px; } .m-busy { color:var(--gold-dk); font-weight:600; } .m-err { color:var(--bad); } /* ── THE PHONE, AND THE ONE THING SVG TEXT DOES THAT CSS TEXT DOES NOT ── Last in the file on purpose: a media query adds no specificity, so a block written above the rules it overrides loses at equal weight. THE RING'S TEXT IS NOT THE SIZE IT SAYS IT IS. It is drawn in a 520-unit box and rendered into whatever column it gets, so every number here is multiplied on the way to the glass — about 0.58 at a 390 screen and 0.45 at 320. The eight arc labels are specified at 11px and arrive at 6.4 and 5.0. Reading getComputedStyle().fontSize on them reports 11 and calls it clean, which is exactly how they went unnoticed: the page passed a type floor while its headline component was setting its own labels at half of it. Same trap as the kundli diagram, same fix in the checks — scale by the viewBox before comparing. THE LABELS GO, RATHER THAN GROW. To reach 11px rendered they would need to be specified at 24 units, and "Graha Maitri" at 24 units starts at x=434 of 520 and runs off the box — there is no size at which eight of them fit round a ring 240px across. Every fact they carry is repeated directly below at a legible size: the koota card has the same name, the same points out of the same maximum, and the same good/mid/bad colour on its own small ring, and the cards run in the arcs' order, which the note under the ring now says. So the phone keeps the picture the ring is for — how much of the thirty-six is lit — and reads the parts off the cards. Squaring the box off crops the 45 units of margin at each side that the labels used to occupy; see preserveAspectRatio in score_ring(). */ @media (max-width:640px) { .m-rg { aspect-ratio:1; height:auto; } .m-rg-l, .m-rg-n { display:none; } /* 21 units, not 13: the worst case is a 320 screen, where the box is squared to about 236px and everything inside is multiplied by 0.55. That puts this at 11.5px there and 14.7 on a 390, under a total that is 47px on the same screen. */ .m-rg-s { font-size:21px; } /* The koota card's own two labels, which are CSS text and were simply small: 10 and 10.5. The 74px column holds "BHAKOOT" at 11. */ .m-k-nm { font-size:11px; } .m-k-of { font-size:11px; } } /* ── A RASHI IS ONE WORD AND CANNOT BE WRAPPED OUT OF TROUBLE ── The two moon signs sit in a 1fr 1fr pair, which at 360px leaves each of them 101px of content, and "Sagittarius" at 20px serif is 103. It does not wrap — there is nowhere to break it — so it ran out over the card's own edge. The usual overflow test cannot see this: the box does not clip, it spills, and scrollWidth > clientWidth on an overflow:visible block normally just means text that will wrap. Only an unbreakable word does this, and a rashi is always one. They stack instead of shrinking. The pair is drawn at one size on purpose — a match with one person larger than the other is saying something the chart is not — and stacking keeps that; a font size small enough for Sagittarius at 320 would not. 400, because 390 is the last width where the longest sign still fits beside another one. */ @media (max-width:400px) { .m-who { grid-template-columns:1fr; } } /* ── 10 FAQ ──────────────────────────────────────────── */ .h-fq-b { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; } /* ── ON A PHONE THE TABS ARE A RAIL ── Eight category tabs at 44px each, wrapping: 200px of tab strip before a reader reaches a single question, which is a quarter of the screen spent on navigation for a section that is mostly answers. In a row it is 44px and the swipe is the same gesture the four rails above it use. Written AFTER the base rule and scoped .h-fq .h-fq-b, because a media query adds no specificity and this file has lost that fight before. */ @media (max-width:640px) { .h-fq .h-fq-b { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-inline:-16px; padding-inline:16px; scroll-padding-inline:16px; scroll-snap-type:x proximity; margin-bottom:14px; } .h-fq .h-fq-b::-webkit-scrollbar { display:none; } .h-fq .h-fq-t { flex:0 0 auto; scroll-snap-align:start; } } .h-fq-t { display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:0 16px; cursor:pointer; font-size:14px; font-weight:650; color:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-pill); background:var(--surface); } .h-fq-t:hover { border-color:var(--gold-lt); color:var(--gold-dk); } /* The count is part of the label, not decoration: it is how you know Getting started has five and Your kundli has five before you open either. */ .h-fq-t i { font-style:normal; font-family:var(--font-mono); font-size:11px; min-width:19px; height:19px; display:grid; place-items:center; border-radius:var(--r-pill); background:var(--rail); color:var(--ink-3); } .h-fq-p { display:none; } .h-fq-p .c-acc:last-child { margin-bottom:0; }#mfaq-start:checked ~ * .h-fq-p-start { display:block; } #mfaq-start:focus-visible ~ * label[for="mfaq-start"] { outline:2px solid var(--gold); outline-offset:2px; } #mfaq-start:checked ~ * label[for="mfaq-start"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #mfaq-start:checked ~ * label[for="mfaq-start"] i { background:var(--gold-solid-text); color:var(--gold-solid); } #mfaq-kundli:checked ~ * .h-fq-p-kundli { display:block; } #mfaq-kundli:focus-visible ~ * label[for="mfaq-kundli"] { outline:2px solid var(--gold); outline-offset:2px; } #mfaq-kundli:checked ~ * label[for="mfaq-kundli"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #mfaq-kundli:checked ~ * label[for="mfaq-kundli"] i { background:var(--gold-solid-text); color:var(--gold-solid); }#groom-dob-1990-07-01:checked ~ * label[for="groom-dob-1990-07-01"], #groom-dob-1990-07-01:checked ~ .c-dp label[for="groom-dob-1990-07-01"] { background:var(--gold-solid); } #groom-dob-1990-07-01:checked ~ * label[for="groom-dob-1990-07-01"] b, #groom-dob-1990-07-01:checked ~ * label[for="groom-dob-1990-07-01"] em, #groom-dob-1990-07-01:checked ~ .c-dp label[for="groom-dob-1990-07-01"] b, #groom-dob-1990-07-01:checked ~ .c-dp label[for="groom-dob-1990-07-01"] em { color:var(--gold-solid-text); } #groom-dob-1990-07-02:checked ~ * label[for="groom-dob-1990-07-02"], #groom-dob-1990-07-02:checked ~ .c-dp label[for="groom-dob-1990-07-02"] { background:var(--gold-solid); } #groom-dob-1990-07-02:checked ~ * label[for="groom-dob-1990-07-02"] b, #groom-dob-1990-07-02:checked ~ * label[for="groom-dob-1990-07-02"] em, #groom-dob-1990-07-02:checked ~ .c-dp label[for="groom-dob-1990-07-02"] b, #groom-dob-1990-07-02:checked ~ .c-dp label[for="groom-dob-1990-07-02"] em { color:var(--gold-solid-text); } #groom-dob-1990-07-03:checked ~ * label[for="groom-dob-1990-07-03"], #groom-dob-1990-07-03:checked ~ .c-dp label[for="groom-dob-1990-07-03"] { background:var(--gold-solid); } #groom-dob-1990-07-03:checked ~ * label[for="groom-dob-1990-07-03"] b, #groom-dob-1990-07-03:checked ~ * label[for="groom-dob-1990-07-03"] em, #groom-dob-1990-07-03:checked ~ .c-dp label[for="groom-dob-1990-07-03"] b, #groom-dob-1990-07-03:checked ~ .c-dp label[for="groom-dob-1990-07-03"] em { color:var(--gold-solid-text); } #groom-dob-1990-07-04:checked ~ * label[for="groom-dob-1990-07-04"], #groom-dob-1990-07-04:checked ~ .c-dp label[for="groom-dob-1990-07-04"] { background:var(--gold-solid); } #groom-dob-1990-07-04:checked ~ * label[for="groom-dob-1990-07-04"] b, #groom-dob-1990-07-04:checked ~ * label[for="groom-dob-1990-07-04"] em, #groom-dob-1990-07-04:checked ~ .c-dp label[for="groom-dob-1990-07-04"] b, #groom-dob-1990-07-04:checked ~ .c-dp label[for="groom-dob-1990-07-04"] em { color:var(--gold-solid-text); } #groom-dob-1990-07-05:checked ~ * label[for="groom-dob-1990-07-05"], #groom-dob-1990-07-05:checked ~ .c-dp label[for="groom-dob-1990-07-05"] { background:var(--gold-solid); } #groom-dob-1990-07-05:checked ~ * label[for="groom-dob-1990-07-05"] b, #groom-dob-1990-07-05:checked ~ * label[for="groom-dob-1990-07-05"] em, #groom-dob-1990-07-05:checked ~ .c-dp label[for="groom-dob-1990-07-05"] b, #groom-dob-1990-07-05:checked ~ .c-dp label[for="groom-dob-1990-07-05"] em { color:var(--gold-solid-text); } #groom-dob-1990-07-06:checked ~ * label[for="groom-dob-1990-07-06"], #groom-dob-1990-07-06:checked ~ .c-dp label[for="groom-dob-1990-07-06"] { background:var(--gold-solid); } #groom-dob-1990-07-06:checked ~ * label[for="groom-dob-1990-07-06"] b, #groom-dob-1990-07-06:checked ~ * label[for="groom-dob-1990-07-06"] em, #groom-dob-1990-07-06:checked ~ .c-dp label[for="groom-dob-1990-07-06"] b, #groom-dob-1990-07-06:checked ~ .c-dp label[for="groom-dob-1990-07-06"] em { color:var(--gold-solid-text); } #groom-dob-1990-07-07:checked ~ * label[for="groom-dob-1990-07-07"], #groom-dob-1990-07-07:checked ~ .c-dp label[for="groom-dob-1990-07-07"] { background:var(--gold-solid); } #groom-dob-1990-07-07:checked ~ * label[for="groom-dob-1990-07-07"] b, #groom-dob-1990-07-07:checked ~ * label[for="groom-dob-1990-07-07"] em, #groom-dob-1990-07-07:checked ~ .c-dp label[for="groom-dob-1990-07-07"] b, #groom-dob-1990-07-07:checked ~ .c-dp label[for="groom-dob-1990-07-07"] em { color:var(--gold-solid-text); } #groom-dob-1990-07-08:checked ~ * label[for="groom-dob-1990-07-08"], #groom-dob-1990-07-08:checked ~ .c-dp label[for="groom-dob-1990-07-08"] { background:var(--gold-solid); } #groom-dob-1990-07-08:checked ~ * label[for="groom-dob-1990-07-08"] b, #groom-dob-1990-07-08:checked ~ * label[for="groom-dob-1990-07-08"] em, #groom-dob-1990-07-08:checked ~ .c-dp label[for="groom-dob-1990-07-08"] b, #groom-dob-1990-07-08:checked ~ .c-dp label[for="groom-dob-1990-07-08"] em { color:var(--gold-solid-text); } #groom-dob-1990-07-09:checked ~ * label[for="groom-dob-1990-07-09"], #groom-dob-1990-07-09:checked ~ .c-dp label[for="groom-dob-1990-07-09"] { background:var(--gold-solid); } #groom-dob-1990-07-09:checked ~ * label[for="groom-dob-1990-07-09"] b, #groom-dob-1990-07-09:checked ~ * label[for="groom-dob-1990-07-09"] em, #groom-dob-1990-07-09:checked ~ .c-dp label[for="groom-dob-1990-07-09"] b, #groom-dob-1990-07-09:checked ~ .c-dp label[for="groom-dob-1990-07-09"] em { color:var(--gold-solid-text); } #groom-dob-1990-07-10:checked ~ * label[for="groom-dob-1990-07-10"], #groom-dob-1990-07-10:checked ~ .c-dp label[for="groom-dob-1990-07-10"] { background:var(--gold-solid); } #groom-dob-1990-07-10:checked ~ * label[for="groom-dob-1990-07-10"] b, #groom-dob-1990-07-10:checked ~ * label[for="groom-dob-1990-07-10"] em, #groom-dob-1990-07-10:checked ~ .c-dp label[for="groom-dob-1990-07-10"] b, #groom-dob-1990-07-10:checked ~ .c-dp label[for="groom-dob-1990-07-10"] em { color:var(--gold-solid-text); } #groom-dob-1990-07-11:checked ~ * label[for="groom-dob-1990-07-11"], #groom-dob-1990-07-11:checked ~ .c-dp label[for="groom-dob-1990-07-11"] { background:var(--gold-solid); } #groom-dob-1990-07-11:checked ~ * label[for="groom-dob-1990-07-11"] b, #groom-dob-1990-07-11:checked ~ * label[for="groom-dob-1990-07-11"] em, #groom-dob-1990-07-11:checked ~ .c-dp label[for="groom-dob-1990-07-11"] b, #groom-dob-1990-07-11:checked ~ .c-dp label[for="groom-dob-1990-07-11"] em { color:var(--gold-solid-text); } #groom-dob-1990-07-12:checked ~ * label[for="groom-dob-1990-07-12"], #groom-dob-1990-07-12:checked ~ .c-dp label[for="groom-dob-1990-07-12"] { background:var(--gold-solid); } #groom-dob-1990-07-12:checked ~ * label[for="groom-dob-1990-07-12"] b, #groom-dob-1990-07-12:checked ~ * label[for="groom-dob-1990-07-12"] em, #groom-dob-1990-07-12:checked ~ .c-dp label[for="groom-dob-1990-07-12"] b, #groom-dob-1990-07-12:checked ~ .c-dp label[for="groom-dob-1990-07-12"] em { color:var(--gold-solid-text); } #groom-dob-1990-07-13:checked ~ * label[for="groom-dob-1990-07-13"], #groom-dob-1990-07-13:checked ~ .c-dp label[for="groom-dob-1990-07-13"] { background:var(--gold-solid); } #groom-dob-1990-07-13:checked ~ * label[for="groom-dob-1990-07-13"] b, #groom-dob-1990-07-13:checked ~ * label[for="groom-dob-1990-07-13"] em, #groom-dob-1990-07-13:checked ~ .c-dp label[for="groom-dob-1990-07-13"] b, #groom-dob-1990-07-13:checked ~ .c-dp label[for="groom-dob-1990-07-13"] em { color:var(--gold-solid-text); } #groom-dob-1990-07-14:checked ~ * label[for="groom-dob-1990-07-14"], #groom-dob-1990-07-14:checked ~ .c-dp label[for="groom-dob-1990-07-14"] { background:var(--gold-solid); } #groom-dob-1990-07-14:checked ~ * label[for="groom-dob-1990-07-14"] b, #groom-dob-1990-07-14:checked ~ * label[for="groom-dob-1990-07-14"] em, #groom-dob-1990-07-14:checked ~ .c-dp label[for="groom-dob-1990-07-14"] b, #groom-dob-1990-07-14:checked ~ .c-dp label[for="groom-dob-1990-07-14"] em { color:var(--gold-solid-text); } #groom-dob-1990-07-15:checked ~ * label[for="groom-dob-1990-07-15"], #groom-dob-1990-07-15:checked ~ .c-dp label[for="groom-dob-1990-07-15"] { background:var(--gold-solid); } #groom-dob-1990-07-15:checked ~ * label[for="groom-dob-1990-07-15"] b, #groom-dob-1990-07-15:checked ~ * label[for="groom-dob-1990-07-15"] em, #groom-dob-1990-07-15:checked ~ .c-dp label[for="groom-dob-1990-07-15"] b, #groom-dob-1990-07-15:checked ~ .c-dp label[for="groom-dob-1990-07-15"] em { color:var(--gold-solid-text); } #groom-dob-1990-07-16:checked ~ * label[for="groom-dob-1990-07-16"], #groom-dob-1990-07-16:checked ~ .c-dp label[for="groom-dob-1990-07-16"] { background:var(--gold-solid); } #groom-dob-1990-07-16:checked ~ * label[for="groom-dob-1990-07-16"] b, #groom-dob-1990-07-16:checked ~ * label[for="groom-dob-1990-07-16"] em, #groom-dob-1990-07-16:checked ~ .c-dp label[for="groom-dob-1990-07-16"] b, #groom-dob-1990-07-16:checked ~ .c-dp label[for="groom-dob-1990-07-16"] em { color:var(--gold-solid-text); } #groom-dob-1990-07-17:checked ~ * label[for="groom-dob-1990-07-17"], #groom-dob-1990-07-17:checked ~ .c-dp label[for="groom-dob-1990-07-17"] { background:var(--gold-solid); } #groom-dob-1990-07-17:checked ~ * label[for="groom-dob-1990-07-17"] b, #groom-dob-1990-07-17:checked ~ * label[for="groom-dob-1990-07-17"] em, #groom-dob-1990-07-17:checked ~ .c-dp label[for="groom-dob-1990-07-17"] b, #groom-dob-1990-07-17:checked ~ .c-dp label[for="groom-dob-1990-07-17"] em { color:var(--gold-solid-text); } #groom-dob-1990-07-18:checked ~ * label[for="groom-dob-1990-07-18"], #groom-dob-1990-07-18:checked ~ .c-dp label[for="groom-dob-1990-07-18"] { background:var(--gold-solid); } #groom-dob-1990-07-18:checked ~ * label[for="groom-dob-1990-07-18"] b, #groom-dob-1990-07-18:checked ~ * label[for="groom-dob-1990-07-18"] em, #groom-dob-1990-07-18:checked ~ .c-dp label[for="groom-dob-1990-07-18"] b, #groom-dob-1990-07-18:checked ~ .c-dp label[for="groom-dob-1990-07-18"] em { color:var(--gold-solid-text); } #groom-dob-1990-07-19:checked ~ * label[for="groom-dob-1990-07-19"], #groom-dob-1990-07-19:checked ~ .c-dp label[for="groom-dob-1990-07-19"] { background:var(--gold-solid); } #groom-dob-1990-07-19:checked ~ * label[for="groom-dob-1990-07-19"] b, #groom-dob-1990-07-19:checked ~ * label[for="groom-dob-1990-07-19"] em, #groom-dob-1990-07-19:checked ~ .c-dp label[for="groom-dob-1990-07-19"] b, #groom-dob-1990-07-19:checked ~ .c-dp label[for="groom-dob-1990-07-19"] em { color:var(--gold-solid-text); } #groom-dob-1990-07-20:checked ~ * label[for="groom-dob-1990-07-20"], #groom-dob-1990-07-20:checked ~ .c-dp label[for="groom-dob-1990-07-20"] { background:var(--gold-solid); } #groom-dob-1990-07-20:checked ~ * label[for="groom-dob-1990-07-20"] b, #groom-dob-1990-07-20:checked ~ * label[for="groom-dob-1990-07-20"] em, #groom-dob-1990-07-20:checked ~ .c-dp label[for="groom-dob-1990-07-20"] b, #groom-dob-1990-07-20:checked ~ .c-dp label[for="groom-dob-1990-07-20"] em { color:var(--gold-solid-text); } #groom-dob-1990-07-21:checked ~ * label[for="groom-dob-1990-07-21"], #groom-dob-1990-07-21:checked ~ .c-dp label[for="groom-dob-1990-07-21"] { background:var(--gold-solid); } #groom-dob-1990-07-21:checked ~ * label[for="groom-dob-1990-07-21"] b, #groom-dob-1990-07-21:checked ~ * label[for="groom-dob-1990-07-21"] em, #groom-dob-1990-07-21:checked ~ .c-dp label[for="groom-dob-1990-07-21"] b, #groom-dob-1990-07-21:checked ~ .c-dp label[for="groom-dob-1990-07-21"] em { color:var(--gold-solid-text); } #groom-dob-1990-07-22:checked ~ * label[for="groom-dob-1990-07-22"], #groom-dob-1990-07-22:checked ~ .c-dp label[for="groom-dob-1990-07-22"] { background:var(--gold-solid); } #groom-dob-1990-07-22:checked ~ * label[for="groom-dob-1990-07-22"] b, #groom-dob-1990-07-22:checked ~ * label[for="groom-dob-1990-07-22"] em, #groom-dob-1990-07-22:checked ~ .c-dp label[for="groom-dob-1990-07-22"] b, #groom-dob-1990-07-22:checked ~ .c-dp label[for="groom-dob-1990-07-22"] em { color:var(--gold-solid-text); } #groom-dob-1990-07-23:checked ~ * label[for="groom-dob-1990-07-23"], #groom-dob-1990-07-23:checked ~ .c-dp label[for="groom-dob-1990-07-23"] { background:var(--gold-solid); } #groom-dob-1990-07-23:checked ~ * label[for="groom-dob-1990-07-23"] b, #groom-dob-1990-07-23:checked ~ * label[for="groom-dob-1990-07-23"] em, #groom-dob-1990-07-23:checked ~ .c-dp label[for="groom-dob-1990-07-23"] b, #groom-dob-1990-07-23:checked ~ .c-dp label[for="groom-dob-1990-07-23"] em { color:var(--gold-solid-text); } #groom-dob-1990-07-24:checked ~ * label[for="groom-dob-1990-07-24"], #groom-dob-1990-07-24:checked ~ .c-dp label[for="groom-dob-1990-07-24"] { background:var(--gold-solid); } #groom-dob-1990-07-24:checked ~ * label[for="groom-dob-1990-07-24"] b, #groom-dob-1990-07-24:checked ~ * label[for="groom-dob-1990-07-24"] em, #groom-dob-1990-07-24:checked ~ .c-dp label[for="groom-dob-1990-07-24"] b, #groom-dob-1990-07-24:checked ~ .c-dp label[for="groom-dob-1990-07-24"] em { color:var(--gold-solid-text); } #groom-dob-1990-07-25:checked ~ * label[for="groom-dob-1990-07-25"], #groom-dob-1990-07-25:checked ~ .c-dp label[for="groom-dob-1990-07-25"] { background:var(--gold-solid); } #groom-dob-1990-07-25:checked ~ * label[for="groom-dob-1990-07-25"] b, #groom-dob-1990-07-25:checked ~ * label[for="groom-dob-1990-07-25"] em, #groom-dob-1990-07-25:checked ~ .c-dp label[for="groom-dob-1990-07-25"] b, #groom-dob-1990-07-25:checked ~ .c-dp label[for="groom-dob-1990-07-25"] em { color:var(--gold-solid-text); } #groom-dob-1990-07-26:checked ~ * label[for="groom-dob-1990-07-26"], #groom-dob-1990-07-26:checked ~ .c-dp label[for="groom-dob-1990-07-26"] { background:var(--gold-solid); } #groom-dob-1990-07-26:checked ~ * label[for="groom-dob-1990-07-26"] b, #groom-dob-1990-07-26:checked ~ * label[for="groom-dob-1990-07-26"] em, #groom-dob-1990-07-26:checked ~ .c-dp label[for="groom-dob-1990-07-26"] b, #groom-dob-1990-07-26:checked ~ .c-dp label[for="groom-dob-1990-07-26"] em { color:var(--gold-solid-text); } #groom-dob-1990-07-27:checked ~ * label[for="groom-dob-1990-07-27"], #groom-dob-1990-07-27:checked ~ .c-dp label[for="groom-dob-1990-07-27"] { background:var(--gold-solid); } #groom-dob-1990-07-27:checked ~ * label[for="groom-dob-1990-07-27"] b, #groom-dob-1990-07-27:checked ~ * label[for="groom-dob-1990-07-27"] em, #groom-dob-1990-07-27:checked ~ .c-dp label[for="groom-dob-1990-07-27"] b, #groom-dob-1990-07-27:checked ~ .c-dp label[for="groom-dob-1990-07-27"] em { color:var(--gold-solid-text); } #groom-dob-1990-07-28:checked ~ * label[for="groom-dob-1990-07-28"], #groom-dob-1990-07-28:checked ~ .c-dp label[for="groom-dob-1990-07-28"] { background:var(--gold-solid); } #groom-dob-1990-07-28:checked ~ * label[for="groom-dob-1990-07-28"] b, #groom-dob-1990-07-28:checked ~ * label[for="groom-dob-1990-07-28"] em, #groom-dob-1990-07-28:checked ~ .c-dp label[for="groom-dob-1990-07-28"] b, #groom-dob-1990-07-28:checked ~ .c-dp label[for="groom-dob-1990-07-28"] em { color:var(--gold-solid-text); } #groom-dob-1990-07-29:checked ~ * label[for="groom-dob-1990-07-29"], #groom-dob-1990-07-29:checked ~ .c-dp label[for="groom-dob-1990-07-29"] { background:var(--gold-solid); } #groom-dob-1990-07-29:checked ~ * label[for="groom-dob-1990-07-29"] b, #groom-dob-1990-07-29:checked ~ * label[for="groom-dob-1990-07-29"] em, #groom-dob-1990-07-29:checked ~ .c-dp label[for="groom-dob-1990-07-29"] b, #groom-dob-1990-07-29:checked ~ .c-dp label[for="groom-dob-1990-07-29"] em { color:var(--gold-solid-text); } #groom-dob-1990-07-30:checked ~ * label[for="groom-dob-1990-07-30"], #groom-dob-1990-07-30:checked ~ .c-dp label[for="groom-dob-1990-07-30"] { background:var(--gold-solid); } #groom-dob-1990-07-30:checked ~ * label[for="groom-dob-1990-07-30"] b, #groom-dob-1990-07-30:checked ~ * label[for="groom-dob-1990-07-30"] em, #groom-dob-1990-07-30:checked ~ .c-dp label[for="groom-dob-1990-07-30"] b, #groom-dob-1990-07-30:checked ~ .c-dp label[for="groom-dob-1990-07-30"] em { color:var(--gold-solid-text); } #groom-dob-1990-07-31:checked ~ * label[for="groom-dob-1990-07-31"], #groom-dob-1990-07-31:checked ~ .c-dp label[for="groom-dob-1990-07-31"] { background:var(--gold-solid); } #groom-dob-1990-07-31:checked ~ * label[for="groom-dob-1990-07-31"] b, #groom-dob-1990-07-31:checked ~ * label[for="groom-dob-1990-07-31"] em, #groom-dob-1990-07-31:checked ~ .c-dp label[for="groom-dob-1990-07-31"] b, #groom-dob-1990-07-31:checked ~ .c-dp label[for="groom-dob-1990-07-31"] em { color:var(--gold-solid-text); }#bride-dob-1990-07-01:checked ~ * label[for="bride-dob-1990-07-01"], #bride-dob-1990-07-01:checked ~ .c-dp label[for="bride-dob-1990-07-01"] { background:var(--gold-solid); } #bride-dob-1990-07-01:checked ~ * label[for="bride-dob-1990-07-01"] b, #bride-dob-1990-07-01:checked ~ * label[for="bride-dob-1990-07-01"] em, #bride-dob-1990-07-01:checked ~ .c-dp label[for="bride-dob-1990-07-01"] b, #bride-dob-1990-07-01:checked ~ .c-dp label[for="bride-dob-1990-07-01"] em { color:var(--gold-solid-text); } #bride-dob-1990-07-02:checked ~ * label[for="bride-dob-1990-07-02"], #bride-dob-1990-07-02:checked ~ .c-dp label[for="bride-dob-1990-07-02"] { background:var(--gold-solid); } #bride-dob-1990-07-02:checked ~ * label[for="bride-dob-1990-07-02"] b, #bride-dob-1990-07-02:checked ~ * label[for="bride-dob-1990-07-02"] em, #bride-dob-1990-07-02:checked ~ .c-dp label[for="bride-dob-1990-07-02"] b, #bride-dob-1990-07-02:checked ~ .c-dp label[for="bride-dob-1990-07-02"] em { color:var(--gold-solid-text); } #bride-dob-1990-07-03:checked ~ * label[for="bride-dob-1990-07-03"], #bride-dob-1990-07-03:checked ~ .c-dp label[for="bride-dob-1990-07-03"] { background:var(--gold-solid); } #bride-dob-1990-07-03:checked ~ * label[for="bride-dob-1990-07-03"] b, #bride-dob-1990-07-03:checked ~ * label[for="bride-dob-1990-07-03"] em, #bride-dob-1990-07-03:checked ~ .c-dp label[for="bride-dob-1990-07-03"] b, #bride-dob-1990-07-03:checked ~ .c-dp label[for="bride-dob-1990-07-03"] em { color:var(--gold-solid-text); } #bride-dob-1990-07-04:checked ~ * label[for="bride-dob-1990-07-04"], #bride-dob-1990-07-04:checked ~ .c-dp label[for="bride-dob-1990-07-04"] { background:var(--gold-solid); } #bride-dob-1990-07-04:checked ~ * label[for="bride-dob-1990-07-04"] b, #bride-dob-1990-07-04:checked ~ * label[for="bride-dob-1990-07-04"] em, #bride-dob-1990-07-04:checked ~ .c-dp label[for="bride-dob-1990-07-04"] b, #bride-dob-1990-07-04:checked ~ .c-dp label[for="bride-dob-1990-07-04"] em { color:var(--gold-solid-text); } #bride-dob-1990-07-05:checked ~ * label[for="bride-dob-1990-07-05"], #bride-dob-1990-07-05:checked ~ .c-dp label[for="bride-dob-1990-07-05"] { background:var(--gold-solid); } #bride-dob-1990-07-05:checked ~ * label[for="bride-dob-1990-07-05"] b, #bride-dob-1990-07-05:checked ~ * label[for="bride-dob-1990-07-05"] em, #bride-dob-1990-07-05:checked ~ .c-dp label[for="bride-dob-1990-07-05"] b, #bride-dob-1990-07-05:checked ~ .c-dp label[for="bride-dob-1990-07-05"] em { color:var(--gold-solid-text); } #bride-dob-1990-07-06:checked ~ * label[for="bride-dob-1990-07-06"], #bride-dob-1990-07-06:checked ~ .c-dp label[for="bride-dob-1990-07-06"] { background:var(--gold-solid); } #bride-dob-1990-07-06:checked ~ * label[for="bride-dob-1990-07-06"] b, #bride-dob-1990-07-06:checked ~ * label[for="bride-dob-1990-07-06"] em, #bride-dob-1990-07-06:checked ~ .c-dp label[for="bride-dob-1990-07-06"] b, #bride-dob-1990-07-06:checked ~ .c-dp label[for="bride-dob-1990-07-06"] em { color:var(--gold-solid-text); } #bride-dob-1990-07-07:checked ~ * label[for="bride-dob-1990-07-07"], #bride-dob-1990-07-07:checked ~ .c-dp label[for="bride-dob-1990-07-07"] { background:var(--gold-solid); } #bride-dob-1990-07-07:checked ~ * label[for="bride-dob-1990-07-07"] b, #bride-dob-1990-07-07:checked ~ * label[for="bride-dob-1990-07-07"] em, #bride-dob-1990-07-07:checked ~ .c-dp label[for="bride-dob-1990-07-07"] b, #bride-dob-1990-07-07:checked ~ .c-dp label[for="bride-dob-1990-07-07"] em { color:var(--gold-solid-text); } #bride-dob-1990-07-08:checked ~ * label[for="bride-dob-1990-07-08"], #bride-dob-1990-07-08:checked ~ .c-dp label[for="bride-dob-1990-07-08"] { background:var(--gold-solid); } #bride-dob-1990-07-08:checked ~ * label[for="bride-dob-1990-07-08"] b, #bride-dob-1990-07-08:checked ~ * label[for="bride-dob-1990-07-08"] em, #bride-dob-1990-07-08:checked ~ .c-dp label[for="bride-dob-1990-07-08"] b, #bride-dob-1990-07-08:checked ~ .c-dp label[for="bride-dob-1990-07-08"] em { color:var(--gold-solid-text); } #bride-dob-1990-07-09:checked ~ * label[for="bride-dob-1990-07-09"], #bride-dob-1990-07-09:checked ~ .c-dp label[for="bride-dob-1990-07-09"] { background:var(--gold-solid); } #bride-dob-1990-07-09:checked ~ * label[for="bride-dob-1990-07-09"] b, #bride-dob-1990-07-09:checked ~ * label[for="bride-dob-1990-07-09"] em, #bride-dob-1990-07-09:checked ~ .c-dp label[for="bride-dob-1990-07-09"] b, #bride-dob-1990-07-09:checked ~ .c-dp label[for="bride-dob-1990-07-09"] em { color:var(--gold-solid-text); } #bride-dob-1990-07-10:checked ~ * label[for="bride-dob-1990-07-10"], #bride-dob-1990-07-10:checked ~ .c-dp label[for="bride-dob-1990-07-10"] { background:var(--gold-solid); } #bride-dob-1990-07-10:checked ~ * label[for="bride-dob-1990-07-10"] b, #bride-dob-1990-07-10:checked ~ * label[for="bride-dob-1990-07-10"] em, #bride-dob-1990-07-10:checked ~ .c-dp label[for="bride-dob-1990-07-10"] b, #bride-dob-1990-07-10:checked ~ .c-dp label[for="bride-dob-1990-07-10"] em { color:var(--gold-solid-text); } #bride-dob-1990-07-11:checked ~ * label[for="bride-dob-1990-07-11"], #bride-dob-1990-07-11:checked ~ .c-dp label[for="bride-dob-1990-07-11"] { background:var(--gold-solid); } #bride-dob-1990-07-11:checked ~ * label[for="bride-dob-1990-07-11"] b, #bride-dob-1990-07-11:checked ~ * label[for="bride-dob-1990-07-11"] em, #bride-dob-1990-07-11:checked ~ .c-dp label[for="bride-dob-1990-07-11"] b, #bride-dob-1990-07-11:checked ~ .c-dp label[for="bride-dob-1990-07-11"] em { color:var(--gold-solid-text); } #bride-dob-1990-07-12:checked ~ * label[for="bride-dob-1990-07-12"], #bride-dob-1990-07-12:checked ~ .c-dp label[for="bride-dob-1990-07-12"] { background:var(--gold-solid); } #bride-dob-1990-07-12:checked ~ * label[for="bride-dob-1990-07-12"] b, #bride-dob-1990-07-12:checked ~ * label[for="bride-dob-1990-07-12"] em, #bride-dob-1990-07-12:checked ~ .c-dp label[for="bride-dob-1990-07-12"] b, #bride-dob-1990-07-12:checked ~ .c-dp label[for="bride-dob-1990-07-12"] em { color:var(--gold-solid-text); } #bride-dob-1990-07-13:checked ~ * label[for="bride-dob-1990-07-13"], #bride-dob-1990-07-13:checked ~ .c-dp label[for="bride-dob-1990-07-13"] { background:var(--gold-solid); } #bride-dob-1990-07-13:checked ~ * label[for="bride-dob-1990-07-13"] b, #bride-dob-1990-07-13:checked ~ * label[for="bride-dob-1990-07-13"] em, #bride-dob-1990-07-13:checked ~ .c-dp label[for="bride-dob-1990-07-13"] b, #bride-dob-1990-07-13:checked ~ .c-dp label[for="bride-dob-1990-07-13"] em { color:var(--gold-solid-text); } #bride-dob-1990-07-14:checked ~ * label[for="bride-dob-1990-07-14"], #bride-dob-1990-07-14:checked ~ .c-dp label[for="bride-dob-1990-07-14"] { background:var(--gold-solid); } #bride-dob-1990-07-14:checked ~ * label[for="bride-dob-1990-07-14"] b, #bride-dob-1990-07-14:checked ~ * label[for="bride-dob-1990-07-14"] em, #bride-dob-1990-07-14:checked ~ .c-dp label[for="bride-dob-1990-07-14"] b, #bride-dob-1990-07-14:checked ~ .c-dp label[for="bride-dob-1990-07-14"] em { color:var(--gold-solid-text); } #bride-dob-1990-07-15:checked ~ * label[for="bride-dob-1990-07-15"], #bride-dob-1990-07-15:checked ~ .c-dp label[for="bride-dob-1990-07-15"] { background:var(--gold-solid); } #bride-dob-1990-07-15:checked ~ * label[for="bride-dob-1990-07-15"] b, #bride-dob-1990-07-15:checked ~ * label[for="bride-dob-1990-07-15"] em, #bride-dob-1990-07-15:checked ~ .c-dp label[for="bride-dob-1990-07-15"] b, #bride-dob-1990-07-15:checked ~ .c-dp label[for="bride-dob-1990-07-15"] em { color:var(--gold-solid-text); } #bride-dob-1990-07-16:checked ~ * label[for="bride-dob-1990-07-16"], #bride-dob-1990-07-16:checked ~ .c-dp label[for="bride-dob-1990-07-16"] { background:var(--gold-solid); } #bride-dob-1990-07-16:checked ~ * label[for="bride-dob-1990-07-16"] b, #bride-dob-1990-07-16:checked ~ * label[for="bride-dob-1990-07-16"] em, #bride-dob-1990-07-16:checked ~ .c-dp label[for="bride-dob-1990-07-16"] b, #bride-dob-1990-07-16:checked ~ .c-dp label[for="bride-dob-1990-07-16"] em { color:var(--gold-solid-text); } #bride-dob-1990-07-17:checked ~ * label[for="bride-dob-1990-07-17"], #bride-dob-1990-07-17:checked ~ .c-dp label[for="bride-dob-1990-07-17"] { background:var(--gold-solid); } #bride-dob-1990-07-17:checked ~ * label[for="bride-dob-1990-07-17"] b, #bride-dob-1990-07-17:checked ~ * label[for="bride-dob-1990-07-17"] em, #bride-dob-1990-07-17:checked ~ .c-dp label[for="bride-dob-1990-07-17"] b, #bride-dob-1990-07-17:checked ~ .c-dp label[for="bride-dob-1990-07-17"] em { color:var(--gold-solid-text); } #bride-dob-1990-07-18:checked ~ * label[for="bride-dob-1990-07-18"], #bride-dob-1990-07-18:checked ~ .c-dp label[for="bride-dob-1990-07-18"] { background:var(--gold-solid); } #bride-dob-1990-07-18:checked ~ * label[for="bride-dob-1990-07-18"] b, #bride-dob-1990-07-18:checked ~ * label[for="bride-dob-1990-07-18"] em, #bride-dob-1990-07-18:checked ~ .c-dp label[for="bride-dob-1990-07-18"] b, #bride-dob-1990-07-18:checked ~ .c-dp label[for="bride-dob-1990-07-18"] em { color:var(--gold-solid-text); } #bride-dob-1990-07-19:checked ~ * label[for="bride-dob-1990-07-19"], #bride-dob-1990-07-19:checked ~ .c-dp label[for="bride-dob-1990-07-19"] { background:var(--gold-solid); } #bride-dob-1990-07-19:checked ~ * label[for="bride-dob-1990-07-19"] b, #bride-dob-1990-07-19:checked ~ * label[for="bride-dob-1990-07-19"] em, #bride-dob-1990-07-19:checked ~ .c-dp label[for="bride-dob-1990-07-19"] b, #bride-dob-1990-07-19:checked ~ .c-dp label[for="bride-dob-1990-07-19"] em { color:var(--gold-solid-text); } #bride-dob-1990-07-20:checked ~ * label[for="bride-dob-1990-07-20"], #bride-dob-1990-07-20:checked ~ .c-dp label[for="bride-dob-1990-07-20"] { background:var(--gold-solid); } #bride-dob-1990-07-20:checked ~ * label[for="bride-dob-1990-07-20"] b, #bride-dob-1990-07-20:checked ~ * label[for="bride-dob-1990-07-20"] em, #bride-dob-1990-07-20:checked ~ .c-dp label[for="bride-dob-1990-07-20"] b, #bride-dob-1990-07-20:checked ~ .c-dp label[for="bride-dob-1990-07-20"] em { color:var(--gold-solid-text); } #bride-dob-1990-07-21:checked ~ * label[for="bride-dob-1990-07-21"], #bride-dob-1990-07-21:checked ~ .c-dp label[for="bride-dob-1990-07-21"] { background:var(--gold-solid); } #bride-dob-1990-07-21:checked ~ * label[for="bride-dob-1990-07-21"] b, #bride-dob-1990-07-21:checked ~ * label[for="bride-dob-1990-07-21"] em, #bride-dob-1990-07-21:checked ~ .c-dp label[for="bride-dob-1990-07-21"] b, #bride-dob-1990-07-21:checked ~ .c-dp label[for="bride-dob-1990-07-21"] em { color:var(--gold-solid-text); } #bride-dob-1990-07-22:checked ~ * label[for="bride-dob-1990-07-22"], #bride-dob-1990-07-22:checked ~ .c-dp label[for="bride-dob-1990-07-22"] { background:var(--gold-solid); } #bride-dob-1990-07-22:checked ~ * label[for="bride-dob-1990-07-22"] b, #bride-dob-1990-07-22:checked ~ * label[for="bride-dob-1990-07-22"] em, #bride-dob-1990-07-22:checked ~ .c-dp label[for="bride-dob-1990-07-22"] b, #bride-dob-1990-07-22:checked ~ .c-dp label[for="bride-dob-1990-07-22"] em { color:var(--gold-solid-text); } #bride-dob-1990-07-23:checked ~ * label[for="bride-dob-1990-07-23"], #bride-dob-1990-07-23:checked ~ .c-dp label[for="bride-dob-1990-07-23"] { background:var(--gold-solid); } #bride-dob-1990-07-23:checked ~ * label[for="bride-dob-1990-07-23"] b, #bride-dob-1990-07-23:checked ~ * label[for="bride-dob-1990-07-23"] em, #bride-dob-1990-07-23:checked ~ .c-dp label[for="bride-dob-1990-07-23"] b, #bride-dob-1990-07-23:checked ~ .c-dp label[for="bride-dob-1990-07-23"] em { color:var(--gold-solid-text); } #bride-dob-1990-07-24:checked ~ * label[for="bride-dob-1990-07-24"], #bride-dob-1990-07-24:checked ~ .c-dp label[for="bride-dob-1990-07-24"] { background:var(--gold-solid); } #bride-dob-1990-07-24:checked ~ * label[for="bride-dob-1990-07-24"] b, #bride-dob-1990-07-24:checked ~ * label[for="bride-dob-1990-07-24"] em, #bride-dob-1990-07-24:checked ~ .c-dp label[for="bride-dob-1990-07-24"] b, #bride-dob-1990-07-24:checked ~ .c-dp label[for="bride-dob-1990-07-24"] em { color:var(--gold-solid-text); } #bride-dob-1990-07-25:checked ~ * label[for="bride-dob-1990-07-25"], #bride-dob-1990-07-25:checked ~ .c-dp label[for="bride-dob-1990-07-25"] { background:var(--gold-solid); } #bride-dob-1990-07-25:checked ~ * label[for="bride-dob-1990-07-25"] b, #bride-dob-1990-07-25:checked ~ * label[for="bride-dob-1990-07-25"] em, #bride-dob-1990-07-25:checked ~ .c-dp label[for="bride-dob-1990-07-25"] b, #bride-dob-1990-07-25:checked ~ .c-dp label[for="bride-dob-1990-07-25"] em { color:var(--gold-solid-text); } #bride-dob-1990-07-26:checked ~ * label[for="bride-dob-1990-07-26"], #bride-dob-1990-07-26:checked ~ .c-dp label[for="bride-dob-1990-07-26"] { background:var(--gold-solid); } #bride-dob-1990-07-26:checked ~ * label[for="bride-dob-1990-07-26"] b, #bride-dob-1990-07-26:checked ~ * label[for="bride-dob-1990-07-26"] em, #bride-dob-1990-07-26:checked ~ .c-dp label[for="bride-dob-1990-07-26"] b, #bride-dob-1990-07-26:checked ~ .c-dp label[for="bride-dob-1990-07-26"] em { color:var(--gold-solid-text); } #bride-dob-1990-07-27:checked ~ * label[for="bride-dob-1990-07-27"], #bride-dob-1990-07-27:checked ~ .c-dp label[for="bride-dob-1990-07-27"] { background:var(--gold-solid); } #bride-dob-1990-07-27:checked ~ * label[for="bride-dob-1990-07-27"] b, #bride-dob-1990-07-27:checked ~ * label[for="bride-dob-1990-07-27"] em, #bride-dob-1990-07-27:checked ~ .c-dp label[for="bride-dob-1990-07-27"] b, #bride-dob-1990-07-27:checked ~ .c-dp label[for="bride-dob-1990-07-27"] em { color:var(--gold-solid-text); } #bride-dob-1990-07-28:checked ~ * label[for="bride-dob-1990-07-28"], #bride-dob-1990-07-28:checked ~ .c-dp label[for="bride-dob-1990-07-28"] { background:var(--gold-solid); } #bride-dob-1990-07-28:checked ~ * label[for="bride-dob-1990-07-28"] b, #bride-dob-1990-07-28:checked ~ * label[for="bride-dob-1990-07-28"] em, #bride-dob-1990-07-28:checked ~ .c-dp label[for="bride-dob-1990-07-28"] b, #bride-dob-1990-07-28:checked ~ .c-dp label[for="bride-dob-1990-07-28"] em { color:var(--gold-solid-text); } #bride-dob-1990-07-29:checked ~ * label[for="bride-dob-1990-07-29"], #bride-dob-1990-07-29:checked ~ .c-dp label[for="bride-dob-1990-07-29"] { background:var(--gold-solid); } #bride-dob-1990-07-29:checked ~ * label[for="bride-dob-1990-07-29"] b, #bride-dob-1990-07-29:checked ~ * label[for="bride-dob-1990-07-29"] em, #bride-dob-1990-07-29:checked ~ .c-dp label[for="bride-dob-1990-07-29"] b, #bride-dob-1990-07-29:checked ~ .c-dp label[for="bride-dob-1990-07-29"] em { color:var(--gold-solid-text); } #bride-dob-1990-07-30:checked ~ * label[for="bride-dob-1990-07-30"], #bride-dob-1990-07-30:checked ~ .c-dp label[for="bride-dob-1990-07-30"] { background:var(--gold-solid); } #bride-dob-1990-07-30:checked ~ * label[for="bride-dob-1990-07-30"] b, #bride-dob-1990-07-30:checked ~ * label[for="bride-dob-1990-07-30"] em, #bride-dob-1990-07-30:checked ~ .c-dp label[for="bride-dob-1990-07-30"] b, #bride-dob-1990-07-30:checked ~ .c-dp label[for="bride-dob-1990-07-30"] em { color:var(--gold-solid-text); } #bride-dob-1990-07-31:checked ~ * label[for="bride-dob-1990-07-31"], #bride-dob-1990-07-31:checked ~ .c-dp label[for="bride-dob-1990-07-31"] { background:var(--gold-solid); } #bride-dob-1990-07-31:checked ~ * label[for="bride-dob-1990-07-31"] b, #bride-dob-1990-07-31:checked ~ * label[for="bride-dob-1990-07-31"] em, #bride-dob-1990-07-31:checked ~ .c-dp label[for="bride-dob-1990-07-31"] b, #bride-dob-1990-07-31:checked ~ .c-dp label[for="bride-dob-1990-07-31"] em { color:var(--gold-solid-text); }#groom-tob-h-1:checked ~ * label[for="groom-tob-h-1"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-h-1:focus-visible ~ * label[for="groom-tob-h-1"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-h-1:checked ~ * .c-tp-oh::after { content:"01"; } #groom-tob-h-2:checked ~ * label[for="groom-tob-h-2"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-h-2:focus-visible ~ * label[for="groom-tob-h-2"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-h-2:checked ~ * .c-tp-oh::after { content:"02"; } #groom-tob-h-3:checked ~ * label[for="groom-tob-h-3"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-h-3:focus-visible ~ * label[for="groom-tob-h-3"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-h-3:checked ~ * .c-tp-oh::after { content:"03"; } #groom-tob-h-4:checked ~ * label[for="groom-tob-h-4"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-h-4:focus-visible ~ * label[for="groom-tob-h-4"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-h-4:checked ~ * .c-tp-oh::after { content:"04"; } #groom-tob-h-5:checked ~ * label[for="groom-tob-h-5"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-h-5:focus-visible ~ * label[for="groom-tob-h-5"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-h-5:checked ~ * .c-tp-oh::after { content:"05"; } #groom-tob-h-6:checked ~ * label[for="groom-tob-h-6"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-h-6:focus-visible ~ * label[for="groom-tob-h-6"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-h-6:checked ~ * .c-tp-oh::after { content:"06"; } #groom-tob-h-7:checked ~ * label[for="groom-tob-h-7"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-h-7:focus-visible ~ * label[for="groom-tob-h-7"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-h-7:checked ~ * .c-tp-oh::after { content:"07"; } #groom-tob-h-8:checked ~ * label[for="groom-tob-h-8"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-h-8:focus-visible ~ * label[for="groom-tob-h-8"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-h-8:checked ~ * .c-tp-oh::after { content:"08"; } #groom-tob-h-9:checked ~ * label[for="groom-tob-h-9"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-h-9:focus-visible ~ * label[for="groom-tob-h-9"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-h-9:checked ~ * .c-tp-oh::after { content:"09"; } #groom-tob-h-10:checked ~ * label[for="groom-tob-h-10"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-h-10:focus-visible ~ * label[for="groom-tob-h-10"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-h-10:checked ~ * .c-tp-oh::after { content:"10"; } #groom-tob-h-11:checked ~ * label[for="groom-tob-h-11"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-h-11:focus-visible ~ * label[for="groom-tob-h-11"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-h-11:checked ~ * .c-tp-oh::after { content:"11"; } #groom-tob-h-12:checked ~ * label[for="groom-tob-h-12"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-h-12:focus-visible ~ * label[for="groom-tob-h-12"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-h-12:checked ~ * .c-tp-oh::after { content:"12"; } #groom-tob-t-0:checked ~ * label[for="groom-tob-t-0"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-0:focus-visible ~ * label[for="groom-tob-t-0"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-0:checked ~ * .c-tp-ot::after { content:"00"; } #groom-tob-t-1:checked ~ * label[for="groom-tob-t-1"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-1:focus-visible ~ * label[for="groom-tob-t-1"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-1:checked ~ * .c-tp-ot::after { content:"01"; } #groom-tob-t-2:checked ~ * label[for="groom-tob-t-2"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-2:focus-visible ~ * label[for="groom-tob-t-2"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-2:checked ~ * .c-tp-ot::after { content:"02"; } #groom-tob-t-3:checked ~ * label[for="groom-tob-t-3"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-3:focus-visible ~ * label[for="groom-tob-t-3"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-3:checked ~ * .c-tp-ot::after { content:"03"; } #groom-tob-t-4:checked ~ * label[for="groom-tob-t-4"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-4:focus-visible ~ * label[for="groom-tob-t-4"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-4:checked ~ * .c-tp-ot::after { content:"04"; } #groom-tob-t-5:checked ~ * label[for="groom-tob-t-5"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-5:focus-visible ~ * label[for="groom-tob-t-5"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-5:checked ~ * .c-tp-ot::after { content:"05"; } #groom-tob-t-6:checked ~ * label[for="groom-tob-t-6"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-6:focus-visible ~ * label[for="groom-tob-t-6"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-6:checked ~ * .c-tp-ot::after { content:"06"; } #groom-tob-t-7:checked ~ * label[for="groom-tob-t-7"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-7:focus-visible ~ * label[for="groom-tob-t-7"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-7:checked ~ * .c-tp-ot::after { content:"07"; } #groom-tob-t-8:checked ~ * label[for="groom-tob-t-8"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-8:focus-visible ~ * label[for="groom-tob-t-8"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-8:checked ~ * .c-tp-ot::after { content:"08"; } #groom-tob-t-9:checked ~ * label[for="groom-tob-t-9"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-9:focus-visible ~ * label[for="groom-tob-t-9"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-9:checked ~ * .c-tp-ot::after { content:"09"; } #groom-tob-t-10:checked ~ * label[for="groom-tob-t-10"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-10:focus-visible ~ * label[for="groom-tob-t-10"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-10:checked ~ * .c-tp-ot::after { content:"10"; } #groom-tob-t-11:checked ~ * label[for="groom-tob-t-11"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-11:focus-visible ~ * label[for="groom-tob-t-11"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-11:checked ~ * .c-tp-ot::after { content:"11"; } #groom-tob-t-12:checked ~ * label[for="groom-tob-t-12"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-12:focus-visible ~ * label[for="groom-tob-t-12"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-12:checked ~ * .c-tp-ot::after { content:"12"; } #groom-tob-t-13:checked ~ * label[for="groom-tob-t-13"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-13:focus-visible ~ * label[for="groom-tob-t-13"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-13:checked ~ * .c-tp-ot::after { content:"13"; } #groom-tob-t-14:checked ~ * label[for="groom-tob-t-14"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-14:focus-visible ~ * label[for="groom-tob-t-14"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-14:checked ~ * .c-tp-ot::after { content:"14"; } #groom-tob-t-15:checked ~ * label[for="groom-tob-t-15"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-15:focus-visible ~ * label[for="groom-tob-t-15"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-15:checked ~ * .c-tp-ot::after { content:"15"; } #groom-tob-t-16:checked ~ * label[for="groom-tob-t-16"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-16:focus-visible ~ * label[for="groom-tob-t-16"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-16:checked ~ * .c-tp-ot::after { content:"16"; } #groom-tob-t-17:checked ~ * label[for="groom-tob-t-17"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-17:focus-visible ~ * label[for="groom-tob-t-17"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-17:checked ~ * .c-tp-ot::after { content:"17"; } #groom-tob-t-18:checked ~ * label[for="groom-tob-t-18"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-18:focus-visible ~ * label[for="groom-tob-t-18"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-18:checked ~ * .c-tp-ot::after { content:"18"; } #groom-tob-t-19:checked ~ * label[for="groom-tob-t-19"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-19:focus-visible ~ * label[for="groom-tob-t-19"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-19:checked ~ * .c-tp-ot::after { content:"19"; } #groom-tob-t-20:checked ~ * label[for="groom-tob-t-20"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-20:focus-visible ~ * label[for="groom-tob-t-20"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-20:checked ~ * .c-tp-ot::after { content:"20"; } #groom-tob-t-21:checked ~ * label[for="groom-tob-t-21"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-21:focus-visible ~ * label[for="groom-tob-t-21"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-21:checked ~ * .c-tp-ot::after { content:"21"; } #groom-tob-t-22:checked ~ * label[for="groom-tob-t-22"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-22:focus-visible ~ * label[for="groom-tob-t-22"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-22:checked ~ * .c-tp-ot::after { content:"22"; } #groom-tob-t-23:checked ~ * label[for="groom-tob-t-23"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-23:focus-visible ~ * label[for="groom-tob-t-23"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-23:checked ~ * .c-tp-ot::after { content:"23"; } #groom-tob-t-24:checked ~ * label[for="groom-tob-t-24"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-24:focus-visible ~ * label[for="groom-tob-t-24"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-24:checked ~ * .c-tp-ot::after { content:"24"; } #groom-tob-t-25:checked ~ * label[for="groom-tob-t-25"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-25:focus-visible ~ * label[for="groom-tob-t-25"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-25:checked ~ * .c-tp-ot::after { content:"25"; } #groom-tob-t-26:checked ~ * label[for="groom-tob-t-26"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-26:focus-visible ~ * label[for="groom-tob-t-26"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-26:checked ~ * .c-tp-ot::after { content:"26"; } #groom-tob-t-27:checked ~ * label[for="groom-tob-t-27"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-27:focus-visible ~ * label[for="groom-tob-t-27"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-27:checked ~ * .c-tp-ot::after { content:"27"; } #groom-tob-t-28:checked ~ * label[for="groom-tob-t-28"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-28:focus-visible ~ * label[for="groom-tob-t-28"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-28:checked ~ * .c-tp-ot::after { content:"28"; } #groom-tob-t-29:checked ~ * label[for="groom-tob-t-29"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-29:focus-visible ~ * label[for="groom-tob-t-29"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-29:checked ~ * .c-tp-ot::after { content:"29"; } #groom-tob-t-30:checked ~ * label[for="groom-tob-t-30"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-30:focus-visible ~ * label[for="groom-tob-t-30"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-30:checked ~ * .c-tp-ot::after { content:"30"; } #groom-tob-t-31:checked ~ * label[for="groom-tob-t-31"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-31:focus-visible ~ * label[for="groom-tob-t-31"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-31:checked ~ * .c-tp-ot::after { content:"31"; } #groom-tob-t-32:checked ~ * label[for="groom-tob-t-32"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-32:focus-visible ~ * label[for="groom-tob-t-32"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-32:checked ~ * .c-tp-ot::after { content:"32"; } #groom-tob-t-33:checked ~ * label[for="groom-tob-t-33"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-33:focus-visible ~ * label[for="groom-tob-t-33"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-33:checked ~ * .c-tp-ot::after { content:"33"; } #groom-tob-t-34:checked ~ * label[for="groom-tob-t-34"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-34:focus-visible ~ * label[for="groom-tob-t-34"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-34:checked ~ * .c-tp-ot::after { content:"34"; } #groom-tob-t-35:checked ~ * label[for="groom-tob-t-35"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-35:focus-visible ~ * label[for="groom-tob-t-35"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-35:checked ~ * .c-tp-ot::after { content:"35"; } #groom-tob-t-36:checked ~ * label[for="groom-tob-t-36"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-36:focus-visible ~ * label[for="groom-tob-t-36"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-36:checked ~ * .c-tp-ot::after { content:"36"; } #groom-tob-t-37:checked ~ * label[for="groom-tob-t-37"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-37:focus-visible ~ * label[for="groom-tob-t-37"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-37:checked ~ * .c-tp-ot::after { content:"37"; } #groom-tob-t-38:checked ~ * label[for="groom-tob-t-38"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-38:focus-visible ~ * label[for="groom-tob-t-38"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-38:checked ~ * .c-tp-ot::after { content:"38"; } #groom-tob-t-39:checked ~ * label[for="groom-tob-t-39"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-39:focus-visible ~ * label[for="groom-tob-t-39"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-39:checked ~ * .c-tp-ot::after { content:"39"; } #groom-tob-t-40:checked ~ * label[for="groom-tob-t-40"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-40:focus-visible ~ * label[for="groom-tob-t-40"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-40:checked ~ * .c-tp-ot::after { content:"40"; } #groom-tob-t-41:checked ~ * label[for="groom-tob-t-41"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-41:focus-visible ~ * label[for="groom-tob-t-41"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-41:checked ~ * .c-tp-ot::after { content:"41"; } #groom-tob-t-42:checked ~ * label[for="groom-tob-t-42"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-42:focus-visible ~ * label[for="groom-tob-t-42"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-42:checked ~ * .c-tp-ot::after { content:"42"; } #groom-tob-t-43:checked ~ * label[for="groom-tob-t-43"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-43:focus-visible ~ * label[for="groom-tob-t-43"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-43:checked ~ * .c-tp-ot::after { content:"43"; } #groom-tob-t-44:checked ~ * label[for="groom-tob-t-44"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-44:focus-visible ~ * label[for="groom-tob-t-44"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-44:checked ~ * .c-tp-ot::after { content:"44"; } #groom-tob-t-45:checked ~ * label[for="groom-tob-t-45"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-45:focus-visible ~ * label[for="groom-tob-t-45"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-45:checked ~ * .c-tp-ot::after { content:"45"; } #groom-tob-t-46:checked ~ * label[for="groom-tob-t-46"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-46:focus-visible ~ * label[for="groom-tob-t-46"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-46:checked ~ * .c-tp-ot::after { content:"46"; } #groom-tob-t-47:checked ~ * label[for="groom-tob-t-47"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-47:focus-visible ~ * label[for="groom-tob-t-47"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-47:checked ~ * .c-tp-ot::after { content:"47"; } #groom-tob-t-48:checked ~ * label[for="groom-tob-t-48"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-48:focus-visible ~ * label[for="groom-tob-t-48"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-48:checked ~ * .c-tp-ot::after { content:"48"; } #groom-tob-t-49:checked ~ * label[for="groom-tob-t-49"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-49:focus-visible ~ * label[for="groom-tob-t-49"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-49:checked ~ * .c-tp-ot::after { content:"49"; } #groom-tob-t-50:checked ~ * label[for="groom-tob-t-50"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-50:focus-visible ~ * label[for="groom-tob-t-50"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-50:checked ~ * .c-tp-ot::after { content:"50"; } #groom-tob-t-51:checked ~ * label[for="groom-tob-t-51"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-51:focus-visible ~ * label[for="groom-tob-t-51"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-51:checked ~ * .c-tp-ot::after { content:"51"; } #groom-tob-t-52:checked ~ * label[for="groom-tob-t-52"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-52:focus-visible ~ * label[for="groom-tob-t-52"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-52:checked ~ * .c-tp-ot::after { content:"52"; } #groom-tob-t-53:checked ~ * label[for="groom-tob-t-53"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-53:focus-visible ~ * label[for="groom-tob-t-53"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-53:checked ~ * .c-tp-ot::after { content:"53"; } #groom-tob-t-54:checked ~ * label[for="groom-tob-t-54"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-54:focus-visible ~ * label[for="groom-tob-t-54"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-54:checked ~ * .c-tp-ot::after { content:"54"; } #groom-tob-t-55:checked ~ * label[for="groom-tob-t-55"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-55:focus-visible ~ * label[for="groom-tob-t-55"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-55:checked ~ * .c-tp-ot::after { content:"55"; } #groom-tob-t-56:checked ~ * label[for="groom-tob-t-56"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-56:focus-visible ~ * label[for="groom-tob-t-56"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-56:checked ~ * .c-tp-ot::after { content:"56"; } #groom-tob-t-57:checked ~ * label[for="groom-tob-t-57"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-57:focus-visible ~ * label[for="groom-tob-t-57"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-57:checked ~ * .c-tp-ot::after { content:"57"; } #groom-tob-t-58:checked ~ * label[for="groom-tob-t-58"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-58:focus-visible ~ * label[for="groom-tob-t-58"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-58:checked ~ * .c-tp-ot::after { content:"58"; } #groom-tob-t-59:checked ~ * label[for="groom-tob-t-59"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-t-59:focus-visible ~ * label[for="groom-tob-t-59"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-t-59:checked ~ * .c-tp-ot::after { content:"59"; } #groom-tob-t-0:checked ~ * .c-ck-fr[data-blk="0"] { display:grid; } #groom-tob-t-1:checked ~ * .c-ck-fr[data-blk="0"] { display:grid; } #groom-tob-t-2:checked ~ * .c-ck-fr[data-blk="0"] { display:grid; } #groom-tob-t-3:checked ~ * .c-ck-fr[data-blk="0"] { display:grid; } #groom-tob-t-4:checked ~ * .c-ck-fr[data-blk="0"] { display:grid; } #groom-tob-t-5:checked ~ * .c-ck-fr[data-blk="1"] { display:grid; } #groom-tob-t-6:checked ~ * .c-ck-fr[data-blk="1"] { display:grid; } #groom-tob-t-7:checked ~ * .c-ck-fr[data-blk="1"] { display:grid; } #groom-tob-t-8:checked ~ * .c-ck-fr[data-blk="1"] { display:grid; } #groom-tob-t-9:checked ~ * .c-ck-fr[data-blk="1"] { display:grid; } #groom-tob-t-10:checked ~ * .c-ck-fr[data-blk="2"] { display:grid; } #groom-tob-t-11:checked ~ * .c-ck-fr[data-blk="2"] { display:grid; } #groom-tob-t-12:checked ~ * .c-ck-fr[data-blk="2"] { display:grid; } #groom-tob-t-13:checked ~ * .c-ck-fr[data-blk="2"] { display:grid; } #groom-tob-t-14:checked ~ * .c-ck-fr[data-blk="2"] { display:grid; } #groom-tob-t-15:checked ~ * .c-ck-fr[data-blk="3"] { display:grid; } #groom-tob-t-16:checked ~ * .c-ck-fr[data-blk="3"] { display:grid; } #groom-tob-t-17:checked ~ * .c-ck-fr[data-blk="3"] { display:grid; } #groom-tob-t-18:checked ~ * .c-ck-fr[data-blk="3"] { display:grid; } #groom-tob-t-19:checked ~ * .c-ck-fr[data-blk="3"] { display:grid; } #groom-tob-t-20:checked ~ * .c-ck-fr[data-blk="4"] { display:grid; } #groom-tob-t-21:checked ~ * .c-ck-fr[data-blk="4"] { display:grid; } #groom-tob-t-22:checked ~ * .c-ck-fr[data-blk="4"] { display:grid; } #groom-tob-t-23:checked ~ * .c-ck-fr[data-blk="4"] { display:grid; } #groom-tob-t-24:checked ~ * .c-ck-fr[data-blk="4"] { display:grid; } #groom-tob-t-25:checked ~ * .c-ck-fr[data-blk="5"] { display:grid; } #groom-tob-t-26:checked ~ * .c-ck-fr[data-blk="5"] { display:grid; } #groom-tob-t-27:checked ~ * .c-ck-fr[data-blk="5"] { display:grid; } #groom-tob-t-28:checked ~ * .c-ck-fr[data-blk="5"] { display:grid; } #groom-tob-t-29:checked ~ * .c-ck-fr[data-blk="5"] { display:grid; } #groom-tob-t-30:checked ~ * .c-ck-fr[data-blk="6"] { display:grid; } #groom-tob-t-31:checked ~ * .c-ck-fr[data-blk="6"] { display:grid; } #groom-tob-t-32:checked ~ * .c-ck-fr[data-blk="6"] { display:grid; } #groom-tob-t-33:checked ~ * .c-ck-fr[data-blk="6"] { display:grid; } #groom-tob-t-34:checked ~ * .c-ck-fr[data-blk="6"] { display:grid; } #groom-tob-t-35:checked ~ * .c-ck-fr[data-blk="7"] { display:grid; } #groom-tob-t-36:checked ~ * .c-ck-fr[data-blk="7"] { display:grid; } #groom-tob-t-37:checked ~ * .c-ck-fr[data-blk="7"] { display:grid; } #groom-tob-t-38:checked ~ * .c-ck-fr[data-blk="7"] { display:grid; } #groom-tob-t-39:checked ~ * .c-ck-fr[data-blk="7"] { display:grid; } #groom-tob-t-40:checked ~ * .c-ck-fr[data-blk="8"] { display:grid; } #groom-tob-t-41:checked ~ * .c-ck-fr[data-blk="8"] { display:grid; } #groom-tob-t-42:checked ~ * .c-ck-fr[data-blk="8"] { display:grid; } #groom-tob-t-43:checked ~ * .c-ck-fr[data-blk="8"] { display:grid; } #groom-tob-t-44:checked ~ * .c-ck-fr[data-blk="8"] { display:grid; } #groom-tob-t-45:checked ~ * .c-ck-fr[data-blk="9"] { display:grid; } #groom-tob-t-46:checked ~ * .c-ck-fr[data-blk="9"] { display:grid; } #groom-tob-t-47:checked ~ * .c-ck-fr[data-blk="9"] { display:grid; } #groom-tob-t-48:checked ~ * .c-ck-fr[data-blk="9"] { display:grid; } #groom-tob-t-49:checked ~ * .c-ck-fr[data-blk="9"] { display:grid; } #groom-tob-t-50:checked ~ * .c-ck-fr[data-blk="10"] { display:grid; } #groom-tob-t-51:checked ~ * .c-ck-fr[data-blk="10"] { display:grid; } #groom-tob-t-52:checked ~ * .c-ck-fr[data-blk="10"] { display:grid; } #groom-tob-t-53:checked ~ * .c-ck-fr[data-blk="10"] { display:grid; } #groom-tob-t-54:checked ~ * .c-ck-fr[data-blk="10"] { display:grid; } #groom-tob-t-55:checked ~ * .c-ck-fr[data-blk="11"] { display:grid; } #groom-tob-t-56:checked ~ * .c-ck-fr[data-blk="11"] { display:grid; } #groom-tob-t-57:checked ~ * .c-ck-fr[data-blk="11"] { display:grid; } #groom-tob-t-58:checked ~ * .c-ck-fr[data-blk="11"] { display:grid; } #groom-tob-t-59:checked ~ * .c-ck-fr[data-blk="11"] { display:grid; } #groom-tob-t-1:checked ~ * .c-ck-m[for="groom-tob-t-0"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-2:checked ~ * .c-ck-m[for="groom-tob-t-0"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-3:checked ~ * .c-ck-m[for="groom-tob-t-0"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-4:checked ~ * .c-ck-m[for="groom-tob-t-0"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-6:checked ~ * .c-ck-m[for="groom-tob-t-5"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-7:checked ~ * .c-ck-m[for="groom-tob-t-5"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-8:checked ~ * .c-ck-m[for="groom-tob-t-5"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-9:checked ~ * .c-ck-m[for="groom-tob-t-5"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-11:checked ~ * .c-ck-m[for="groom-tob-t-10"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-12:checked ~ * .c-ck-m[for="groom-tob-t-10"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-13:checked ~ * .c-ck-m[for="groom-tob-t-10"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-14:checked ~ * .c-ck-m[for="groom-tob-t-10"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-16:checked ~ * .c-ck-m[for="groom-tob-t-15"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-17:checked ~ * .c-ck-m[for="groom-tob-t-15"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-18:checked ~ * .c-ck-m[for="groom-tob-t-15"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-19:checked ~ * .c-ck-m[for="groom-tob-t-15"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-21:checked ~ * .c-ck-m[for="groom-tob-t-20"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-22:checked ~ * .c-ck-m[for="groom-tob-t-20"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-23:checked ~ * .c-ck-m[for="groom-tob-t-20"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-24:checked ~ * .c-ck-m[for="groom-tob-t-20"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-26:checked ~ * .c-ck-m[for="groom-tob-t-25"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-27:checked ~ * .c-ck-m[for="groom-tob-t-25"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-28:checked ~ * .c-ck-m[for="groom-tob-t-25"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-29:checked ~ * .c-ck-m[for="groom-tob-t-25"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-31:checked ~ * .c-ck-m[for="groom-tob-t-30"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-32:checked ~ * .c-ck-m[for="groom-tob-t-30"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-33:checked ~ * .c-ck-m[for="groom-tob-t-30"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-34:checked ~ * .c-ck-m[for="groom-tob-t-30"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-36:checked ~ * .c-ck-m[for="groom-tob-t-35"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-37:checked ~ * .c-ck-m[for="groom-tob-t-35"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-38:checked ~ * .c-ck-m[for="groom-tob-t-35"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-39:checked ~ * .c-ck-m[for="groom-tob-t-35"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-41:checked ~ * .c-ck-m[for="groom-tob-t-40"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-42:checked ~ * .c-ck-m[for="groom-tob-t-40"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-43:checked ~ * .c-ck-m[for="groom-tob-t-40"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-44:checked ~ * .c-ck-m[for="groom-tob-t-40"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-46:checked ~ * .c-ck-m[for="groom-tob-t-45"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-47:checked ~ * .c-ck-m[for="groom-tob-t-45"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-48:checked ~ * .c-ck-m[for="groom-tob-t-45"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-49:checked ~ * .c-ck-m[for="groom-tob-t-45"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-51:checked ~ * .c-ck-m[for="groom-tob-t-50"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-52:checked ~ * .c-ck-m[for="groom-tob-t-50"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-53:checked ~ * .c-ck-m[for="groom-tob-t-50"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-54:checked ~ * .c-ck-m[for="groom-tob-t-50"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-56:checked ~ * .c-ck-m[for="groom-tob-t-55"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-57:checked ~ * .c-ck-m[for="groom-tob-t-55"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-58:checked ~ * .c-ck-m[for="groom-tob-t-55"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-t-59:checked ~ * .c-ck-m[for="groom-tob-t-55"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #groom-tob-m-am:checked ~ * label[for="groom-tob-m-am"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-m-am:focus-visible ~ * label[for="groom-tob-m-am"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-m-am:checked ~ * .c-tp-om::after { content:"AM"; } #groom-tob-m-pm:checked ~ * label[for="groom-tob-m-pm"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #groom-tob-m-pm:focus-visible ~ * label[for="groom-tob-m-pm"] { outline:2px solid var(--gold); outline-offset:2px; } #groom-tob-m-pm:checked ~ * .c-tp-om::after { content:"PM"; }#bride-tob-h-1:checked ~ * label[for="bride-tob-h-1"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-h-1:focus-visible ~ * label[for="bride-tob-h-1"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-h-1:checked ~ * .c-tp-oh::after { content:"01"; } #bride-tob-h-2:checked ~ * label[for="bride-tob-h-2"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-h-2:focus-visible ~ * label[for="bride-tob-h-2"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-h-2:checked ~ * .c-tp-oh::after { content:"02"; } #bride-tob-h-3:checked ~ * label[for="bride-tob-h-3"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-h-3:focus-visible ~ * label[for="bride-tob-h-3"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-h-3:checked ~ * .c-tp-oh::after { content:"03"; } #bride-tob-h-4:checked ~ * label[for="bride-tob-h-4"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-h-4:focus-visible ~ * label[for="bride-tob-h-4"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-h-4:checked ~ * .c-tp-oh::after { content:"04"; } #bride-tob-h-5:checked ~ * label[for="bride-tob-h-5"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-h-5:focus-visible ~ * label[for="bride-tob-h-5"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-h-5:checked ~ * .c-tp-oh::after { content:"05"; } #bride-tob-h-6:checked ~ * label[for="bride-tob-h-6"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-h-6:focus-visible ~ * label[for="bride-tob-h-6"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-h-6:checked ~ * .c-tp-oh::after { content:"06"; } #bride-tob-h-7:checked ~ * label[for="bride-tob-h-7"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-h-7:focus-visible ~ * label[for="bride-tob-h-7"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-h-7:checked ~ * .c-tp-oh::after { content:"07"; } #bride-tob-h-8:checked ~ * label[for="bride-tob-h-8"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-h-8:focus-visible ~ * label[for="bride-tob-h-8"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-h-8:checked ~ * .c-tp-oh::after { content:"08"; } #bride-tob-h-9:checked ~ * label[for="bride-tob-h-9"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-h-9:focus-visible ~ * label[for="bride-tob-h-9"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-h-9:checked ~ * .c-tp-oh::after { content:"09"; } #bride-tob-h-10:checked ~ * label[for="bride-tob-h-10"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-h-10:focus-visible ~ * label[for="bride-tob-h-10"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-h-10:checked ~ * .c-tp-oh::after { content:"10"; } #bride-tob-h-11:checked ~ * label[for="bride-tob-h-11"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-h-11:focus-visible ~ * label[for="bride-tob-h-11"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-h-11:checked ~ * .c-tp-oh::after { content:"11"; } #bride-tob-h-12:checked ~ * label[for="bride-tob-h-12"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-h-12:focus-visible ~ * label[for="bride-tob-h-12"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-h-12:checked ~ * .c-tp-oh::after { content:"12"; } #bride-tob-t-0:checked ~ * label[for="bride-tob-t-0"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-0:focus-visible ~ * label[for="bride-tob-t-0"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-0:checked ~ * .c-tp-ot::after { content:"00"; } #bride-tob-t-1:checked ~ * label[for="bride-tob-t-1"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-1:focus-visible ~ * label[for="bride-tob-t-1"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-1:checked ~ * .c-tp-ot::after { content:"01"; } #bride-tob-t-2:checked ~ * label[for="bride-tob-t-2"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-2:focus-visible ~ * label[for="bride-tob-t-2"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-2:checked ~ * .c-tp-ot::after { content:"02"; } #bride-tob-t-3:checked ~ * label[for="bride-tob-t-3"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-3:focus-visible ~ * label[for="bride-tob-t-3"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-3:checked ~ * .c-tp-ot::after { content:"03"; } #bride-tob-t-4:checked ~ * label[for="bride-tob-t-4"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-4:focus-visible ~ * label[for="bride-tob-t-4"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-4:checked ~ * .c-tp-ot::after { content:"04"; } #bride-tob-t-5:checked ~ * label[for="bride-tob-t-5"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-5:focus-visible ~ * label[for="bride-tob-t-5"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-5:checked ~ * .c-tp-ot::after { content:"05"; } #bride-tob-t-6:checked ~ * label[for="bride-tob-t-6"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-6:focus-visible ~ * label[for="bride-tob-t-6"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-6:checked ~ * .c-tp-ot::after { content:"06"; } #bride-tob-t-7:checked ~ * label[for="bride-tob-t-7"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-7:focus-visible ~ * label[for="bride-tob-t-7"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-7:checked ~ * .c-tp-ot::after { content:"07"; } #bride-tob-t-8:checked ~ * label[for="bride-tob-t-8"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-8:focus-visible ~ * label[for="bride-tob-t-8"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-8:checked ~ * .c-tp-ot::after { content:"08"; } #bride-tob-t-9:checked ~ * label[for="bride-tob-t-9"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-9:focus-visible ~ * label[for="bride-tob-t-9"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-9:checked ~ * .c-tp-ot::after { content:"09"; } #bride-tob-t-10:checked ~ * label[for="bride-tob-t-10"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-10:focus-visible ~ * label[for="bride-tob-t-10"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-10:checked ~ * .c-tp-ot::after { content:"10"; } #bride-tob-t-11:checked ~ * label[for="bride-tob-t-11"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-11:focus-visible ~ * label[for="bride-tob-t-11"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-11:checked ~ * .c-tp-ot::after { content:"11"; } #bride-tob-t-12:checked ~ * label[for="bride-tob-t-12"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-12:focus-visible ~ * label[for="bride-tob-t-12"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-12:checked ~ * .c-tp-ot::after { content:"12"; } #bride-tob-t-13:checked ~ * label[for="bride-tob-t-13"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-13:focus-visible ~ * label[for="bride-tob-t-13"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-13:checked ~ * .c-tp-ot::after { content:"13"; } #bride-tob-t-14:checked ~ * label[for="bride-tob-t-14"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-14:focus-visible ~ * label[for="bride-tob-t-14"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-14:checked ~ * .c-tp-ot::after { content:"14"; } #bride-tob-t-15:checked ~ * label[for="bride-tob-t-15"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-15:focus-visible ~ * label[for="bride-tob-t-15"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-15:checked ~ * .c-tp-ot::after { content:"15"; } #bride-tob-t-16:checked ~ * label[for="bride-tob-t-16"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-16:focus-visible ~ * label[for="bride-tob-t-16"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-16:checked ~ * .c-tp-ot::after { content:"16"; } #bride-tob-t-17:checked ~ * label[for="bride-tob-t-17"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-17:focus-visible ~ * label[for="bride-tob-t-17"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-17:checked ~ * .c-tp-ot::after { content:"17"; } #bride-tob-t-18:checked ~ * label[for="bride-tob-t-18"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-18:focus-visible ~ * label[for="bride-tob-t-18"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-18:checked ~ * .c-tp-ot::after { content:"18"; } #bride-tob-t-19:checked ~ * label[for="bride-tob-t-19"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-19:focus-visible ~ * label[for="bride-tob-t-19"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-19:checked ~ * .c-tp-ot::after { content:"19"; } #bride-tob-t-20:checked ~ * label[for="bride-tob-t-20"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-20:focus-visible ~ * label[for="bride-tob-t-20"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-20:checked ~ * .c-tp-ot::after { content:"20"; } #bride-tob-t-21:checked ~ * label[for="bride-tob-t-21"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-21:focus-visible ~ * label[for="bride-tob-t-21"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-21:checked ~ * .c-tp-ot::after { content:"21"; } #bride-tob-t-22:checked ~ * label[for="bride-tob-t-22"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-22:focus-visible ~ * label[for="bride-tob-t-22"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-22:checked ~ * .c-tp-ot::after { content:"22"; } #bride-tob-t-23:checked ~ * label[for="bride-tob-t-23"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-23:focus-visible ~ * label[for="bride-tob-t-23"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-23:checked ~ * .c-tp-ot::after { content:"23"; } #bride-tob-t-24:checked ~ * label[for="bride-tob-t-24"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-24:focus-visible ~ * label[for="bride-tob-t-24"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-24:checked ~ * .c-tp-ot::after { content:"24"; } #bride-tob-t-25:checked ~ * label[for="bride-tob-t-25"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-25:focus-visible ~ * label[for="bride-tob-t-25"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-25:checked ~ * .c-tp-ot::after { content:"25"; } #bride-tob-t-26:checked ~ * label[for="bride-tob-t-26"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-26:focus-visible ~ * label[for="bride-tob-t-26"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-26:checked ~ * .c-tp-ot::after { content:"26"; } #bride-tob-t-27:checked ~ * label[for="bride-tob-t-27"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-27:focus-visible ~ * label[for="bride-tob-t-27"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-27:checked ~ * .c-tp-ot::after { content:"27"; } #bride-tob-t-28:checked ~ * label[for="bride-tob-t-28"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-28:focus-visible ~ * label[for="bride-tob-t-28"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-28:checked ~ * .c-tp-ot::after { content:"28"; } #bride-tob-t-29:checked ~ * label[for="bride-tob-t-29"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-29:focus-visible ~ * label[for="bride-tob-t-29"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-29:checked ~ * .c-tp-ot::after { content:"29"; } #bride-tob-t-30:checked ~ * label[for="bride-tob-t-30"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-30:focus-visible ~ * label[for="bride-tob-t-30"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-30:checked ~ * .c-tp-ot::after { content:"30"; } #bride-tob-t-31:checked ~ * label[for="bride-tob-t-31"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-31:focus-visible ~ * label[for="bride-tob-t-31"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-31:checked ~ * .c-tp-ot::after { content:"31"; } #bride-tob-t-32:checked ~ * label[for="bride-tob-t-32"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-32:focus-visible ~ * label[for="bride-tob-t-32"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-32:checked ~ * .c-tp-ot::after { content:"32"; } #bride-tob-t-33:checked ~ * label[for="bride-tob-t-33"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-33:focus-visible ~ * label[for="bride-tob-t-33"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-33:checked ~ * .c-tp-ot::after { content:"33"; } #bride-tob-t-34:checked ~ * label[for="bride-tob-t-34"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-34:focus-visible ~ * label[for="bride-tob-t-34"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-34:checked ~ * .c-tp-ot::after { content:"34"; } #bride-tob-t-35:checked ~ * label[for="bride-tob-t-35"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-35:focus-visible ~ * label[for="bride-tob-t-35"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-35:checked ~ * .c-tp-ot::after { content:"35"; } #bride-tob-t-36:checked ~ * label[for="bride-tob-t-36"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-36:focus-visible ~ * label[for="bride-tob-t-36"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-36:checked ~ * .c-tp-ot::after { content:"36"; } #bride-tob-t-37:checked ~ * label[for="bride-tob-t-37"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-37:focus-visible ~ * label[for="bride-tob-t-37"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-37:checked ~ * .c-tp-ot::after { content:"37"; } #bride-tob-t-38:checked ~ * label[for="bride-tob-t-38"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-38:focus-visible ~ * label[for="bride-tob-t-38"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-38:checked ~ * .c-tp-ot::after { content:"38"; } #bride-tob-t-39:checked ~ * label[for="bride-tob-t-39"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-39:focus-visible ~ * label[for="bride-tob-t-39"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-39:checked ~ * .c-tp-ot::after { content:"39"; } #bride-tob-t-40:checked ~ * label[for="bride-tob-t-40"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-40:focus-visible ~ * label[for="bride-tob-t-40"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-40:checked ~ * .c-tp-ot::after { content:"40"; } #bride-tob-t-41:checked ~ * label[for="bride-tob-t-41"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-41:focus-visible ~ * label[for="bride-tob-t-41"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-41:checked ~ * .c-tp-ot::after { content:"41"; } #bride-tob-t-42:checked ~ * label[for="bride-tob-t-42"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-42:focus-visible ~ * label[for="bride-tob-t-42"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-42:checked ~ * .c-tp-ot::after { content:"42"; } #bride-tob-t-43:checked ~ * label[for="bride-tob-t-43"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-43:focus-visible ~ * label[for="bride-tob-t-43"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-43:checked ~ * .c-tp-ot::after { content:"43"; } #bride-tob-t-44:checked ~ * label[for="bride-tob-t-44"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-44:focus-visible ~ * label[for="bride-tob-t-44"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-44:checked ~ * .c-tp-ot::after { content:"44"; } #bride-tob-t-45:checked ~ * label[for="bride-tob-t-45"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-45:focus-visible ~ * label[for="bride-tob-t-45"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-45:checked ~ * .c-tp-ot::after { content:"45"; } #bride-tob-t-46:checked ~ * label[for="bride-tob-t-46"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-46:focus-visible ~ * label[for="bride-tob-t-46"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-46:checked ~ * .c-tp-ot::after { content:"46"; } #bride-tob-t-47:checked ~ * label[for="bride-tob-t-47"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-47:focus-visible ~ * label[for="bride-tob-t-47"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-47:checked ~ * .c-tp-ot::after { content:"47"; } #bride-tob-t-48:checked ~ * label[for="bride-tob-t-48"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-48:focus-visible ~ * label[for="bride-tob-t-48"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-48:checked ~ * .c-tp-ot::after { content:"48"; } #bride-tob-t-49:checked ~ * label[for="bride-tob-t-49"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-49:focus-visible ~ * label[for="bride-tob-t-49"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-49:checked ~ * .c-tp-ot::after { content:"49"; } #bride-tob-t-50:checked ~ * label[for="bride-tob-t-50"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-50:focus-visible ~ * label[for="bride-tob-t-50"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-50:checked ~ * .c-tp-ot::after { content:"50"; } #bride-tob-t-51:checked ~ * label[for="bride-tob-t-51"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-51:focus-visible ~ * label[for="bride-tob-t-51"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-51:checked ~ * .c-tp-ot::after { content:"51"; } #bride-tob-t-52:checked ~ * label[for="bride-tob-t-52"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-52:focus-visible ~ * label[for="bride-tob-t-52"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-52:checked ~ * .c-tp-ot::after { content:"52"; } #bride-tob-t-53:checked ~ * label[for="bride-tob-t-53"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-53:focus-visible ~ * label[for="bride-tob-t-53"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-53:checked ~ * .c-tp-ot::after { content:"53"; } #bride-tob-t-54:checked ~ * label[for="bride-tob-t-54"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-54:focus-visible ~ * label[for="bride-tob-t-54"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-54:checked ~ * .c-tp-ot::after { content:"54"; } #bride-tob-t-55:checked ~ * label[for="bride-tob-t-55"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-55:focus-visible ~ * label[for="bride-tob-t-55"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-55:checked ~ * .c-tp-ot::after { content:"55"; } #bride-tob-t-56:checked ~ * label[for="bride-tob-t-56"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-56:focus-visible ~ * label[for="bride-tob-t-56"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-56:checked ~ * .c-tp-ot::after { content:"56"; } #bride-tob-t-57:checked ~ * label[for="bride-tob-t-57"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-57:focus-visible ~ * label[for="bride-tob-t-57"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-57:checked ~ * .c-tp-ot::after { content:"57"; } #bride-tob-t-58:checked ~ * label[for="bride-tob-t-58"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-58:focus-visible ~ * label[for="bride-tob-t-58"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-58:checked ~ * .c-tp-ot::after { content:"58"; } #bride-tob-t-59:checked ~ * label[for="bride-tob-t-59"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-t-59:focus-visible ~ * label[for="bride-tob-t-59"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-t-59:checked ~ * .c-tp-ot::after { content:"59"; } #bride-tob-t-0:checked ~ * .c-ck-fr[data-blk="0"] { display:grid; } #bride-tob-t-1:checked ~ * .c-ck-fr[data-blk="0"] { display:grid; } #bride-tob-t-2:checked ~ * .c-ck-fr[data-blk="0"] { display:grid; } #bride-tob-t-3:checked ~ * .c-ck-fr[data-blk="0"] { display:grid; } #bride-tob-t-4:checked ~ * .c-ck-fr[data-blk="0"] { display:grid; } #bride-tob-t-5:checked ~ * .c-ck-fr[data-blk="1"] { display:grid; } #bride-tob-t-6:checked ~ * .c-ck-fr[data-blk="1"] { display:grid; } #bride-tob-t-7:checked ~ * .c-ck-fr[data-blk="1"] { display:grid; } #bride-tob-t-8:checked ~ * .c-ck-fr[data-blk="1"] { display:grid; } #bride-tob-t-9:checked ~ * .c-ck-fr[data-blk="1"] { display:grid; } #bride-tob-t-10:checked ~ * .c-ck-fr[data-blk="2"] { display:grid; } #bride-tob-t-11:checked ~ * .c-ck-fr[data-blk="2"] { display:grid; } #bride-tob-t-12:checked ~ * .c-ck-fr[data-blk="2"] { display:grid; } #bride-tob-t-13:checked ~ * .c-ck-fr[data-blk="2"] { display:grid; } #bride-tob-t-14:checked ~ * .c-ck-fr[data-blk="2"] { display:grid; } #bride-tob-t-15:checked ~ * .c-ck-fr[data-blk="3"] { display:grid; } #bride-tob-t-16:checked ~ * .c-ck-fr[data-blk="3"] { display:grid; } #bride-tob-t-17:checked ~ * .c-ck-fr[data-blk="3"] { display:grid; } #bride-tob-t-18:checked ~ * .c-ck-fr[data-blk="3"] { display:grid; } #bride-tob-t-19:checked ~ * .c-ck-fr[data-blk="3"] { display:grid; } #bride-tob-t-20:checked ~ * .c-ck-fr[data-blk="4"] { display:grid; } #bride-tob-t-21:checked ~ * .c-ck-fr[data-blk="4"] { display:grid; } #bride-tob-t-22:checked ~ * .c-ck-fr[data-blk="4"] { display:grid; } #bride-tob-t-23:checked ~ * .c-ck-fr[data-blk="4"] { display:grid; } #bride-tob-t-24:checked ~ * .c-ck-fr[data-blk="4"] { display:grid; } #bride-tob-t-25:checked ~ * .c-ck-fr[data-blk="5"] { display:grid; } #bride-tob-t-26:checked ~ * .c-ck-fr[data-blk="5"] { display:grid; } #bride-tob-t-27:checked ~ * .c-ck-fr[data-blk="5"] { display:grid; } #bride-tob-t-28:checked ~ * .c-ck-fr[data-blk="5"] { display:grid; } #bride-tob-t-29:checked ~ * .c-ck-fr[data-blk="5"] { display:grid; } #bride-tob-t-30:checked ~ * .c-ck-fr[data-blk="6"] { display:grid; } #bride-tob-t-31:checked ~ * .c-ck-fr[data-blk="6"] { display:grid; } #bride-tob-t-32:checked ~ * .c-ck-fr[data-blk="6"] { display:grid; } #bride-tob-t-33:checked ~ * .c-ck-fr[data-blk="6"] { display:grid; } #bride-tob-t-34:checked ~ * .c-ck-fr[data-blk="6"] { display:grid; } #bride-tob-t-35:checked ~ * .c-ck-fr[data-blk="7"] { display:grid; } #bride-tob-t-36:checked ~ * .c-ck-fr[data-blk="7"] { display:grid; } #bride-tob-t-37:checked ~ * .c-ck-fr[data-blk="7"] { display:grid; } #bride-tob-t-38:checked ~ * .c-ck-fr[data-blk="7"] { display:grid; } #bride-tob-t-39:checked ~ * .c-ck-fr[data-blk="7"] { display:grid; } #bride-tob-t-40:checked ~ * .c-ck-fr[data-blk="8"] { display:grid; } #bride-tob-t-41:checked ~ * .c-ck-fr[data-blk="8"] { display:grid; } #bride-tob-t-42:checked ~ * .c-ck-fr[data-blk="8"] { display:grid; } #bride-tob-t-43:checked ~ * .c-ck-fr[data-blk="8"] { display:grid; } #bride-tob-t-44:checked ~ * .c-ck-fr[data-blk="8"] { display:grid; } #bride-tob-t-45:checked ~ * .c-ck-fr[data-blk="9"] { display:grid; } #bride-tob-t-46:checked ~ * .c-ck-fr[data-blk="9"] { display:grid; } #bride-tob-t-47:checked ~ * .c-ck-fr[data-blk="9"] { display:grid; } #bride-tob-t-48:checked ~ * .c-ck-fr[data-blk="9"] { display:grid; } #bride-tob-t-49:checked ~ * .c-ck-fr[data-blk="9"] { display:grid; } #bride-tob-t-50:checked ~ * .c-ck-fr[data-blk="10"] { display:grid; } #bride-tob-t-51:checked ~ * .c-ck-fr[data-blk="10"] { display:grid; } #bride-tob-t-52:checked ~ * .c-ck-fr[data-blk="10"] { display:grid; } #bride-tob-t-53:checked ~ * .c-ck-fr[data-blk="10"] { display:grid; } #bride-tob-t-54:checked ~ * .c-ck-fr[data-blk="10"] { display:grid; } #bride-tob-t-55:checked ~ * .c-ck-fr[data-blk="11"] { display:grid; } #bride-tob-t-56:checked ~ * .c-ck-fr[data-blk="11"] { display:grid; } #bride-tob-t-57:checked ~ * .c-ck-fr[data-blk="11"] { display:grid; } #bride-tob-t-58:checked ~ * .c-ck-fr[data-blk="11"] { display:grid; } #bride-tob-t-59:checked ~ * .c-ck-fr[data-blk="11"] { display:grid; } #bride-tob-t-1:checked ~ * .c-ck-m[for="bride-tob-t-0"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-2:checked ~ * .c-ck-m[for="bride-tob-t-0"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-3:checked ~ * .c-ck-m[for="bride-tob-t-0"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-4:checked ~ * .c-ck-m[for="bride-tob-t-0"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-6:checked ~ * .c-ck-m[for="bride-tob-t-5"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-7:checked ~ * .c-ck-m[for="bride-tob-t-5"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-8:checked ~ * .c-ck-m[for="bride-tob-t-5"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-9:checked ~ * .c-ck-m[for="bride-tob-t-5"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-11:checked ~ * .c-ck-m[for="bride-tob-t-10"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-12:checked ~ * .c-ck-m[for="bride-tob-t-10"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-13:checked ~ * .c-ck-m[for="bride-tob-t-10"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-14:checked ~ * .c-ck-m[for="bride-tob-t-10"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-16:checked ~ * .c-ck-m[for="bride-tob-t-15"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-17:checked ~ * .c-ck-m[for="bride-tob-t-15"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-18:checked ~ * .c-ck-m[for="bride-tob-t-15"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-19:checked ~ * .c-ck-m[for="bride-tob-t-15"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-21:checked ~ * .c-ck-m[for="bride-tob-t-20"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-22:checked ~ * .c-ck-m[for="bride-tob-t-20"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-23:checked ~ * .c-ck-m[for="bride-tob-t-20"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-24:checked ~ * .c-ck-m[for="bride-tob-t-20"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-26:checked ~ * .c-ck-m[for="bride-tob-t-25"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-27:checked ~ * .c-ck-m[for="bride-tob-t-25"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-28:checked ~ * .c-ck-m[for="bride-tob-t-25"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-29:checked ~ * .c-ck-m[for="bride-tob-t-25"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-31:checked ~ * .c-ck-m[for="bride-tob-t-30"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-32:checked ~ * .c-ck-m[for="bride-tob-t-30"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-33:checked ~ * .c-ck-m[for="bride-tob-t-30"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-34:checked ~ * .c-ck-m[for="bride-tob-t-30"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-36:checked ~ * .c-ck-m[for="bride-tob-t-35"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-37:checked ~ * .c-ck-m[for="bride-tob-t-35"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-38:checked ~ * .c-ck-m[for="bride-tob-t-35"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-39:checked ~ * .c-ck-m[for="bride-tob-t-35"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-41:checked ~ * .c-ck-m[for="bride-tob-t-40"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-42:checked ~ * .c-ck-m[for="bride-tob-t-40"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-43:checked ~ * .c-ck-m[for="bride-tob-t-40"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-44:checked ~ * .c-ck-m[for="bride-tob-t-40"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-46:checked ~ * .c-ck-m[for="bride-tob-t-45"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-47:checked ~ * .c-ck-m[for="bride-tob-t-45"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-48:checked ~ * .c-ck-m[for="bride-tob-t-45"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-49:checked ~ * .c-ck-m[for="bride-tob-t-45"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-51:checked ~ * .c-ck-m[for="bride-tob-t-50"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-52:checked ~ * .c-ck-m[for="bride-tob-t-50"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-53:checked ~ * .c-ck-m[for="bride-tob-t-50"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-54:checked ~ * .c-ck-m[for="bride-tob-t-50"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-56:checked ~ * .c-ck-m[for="bride-tob-t-55"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-57:checked ~ * .c-ck-m[for="bride-tob-t-55"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-58:checked ~ * .c-ck-m[for="bride-tob-t-55"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-t-59:checked ~ * .c-ck-m[for="bride-tob-t-55"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #bride-tob-m-am:checked ~ * label[for="bride-tob-m-am"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-m-am:focus-visible ~ * label[for="bride-tob-m-am"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-m-am:checked ~ * .c-tp-om::after { content:"AM"; } #bride-tob-m-pm:checked ~ * label[for="bride-tob-m-pm"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #bride-tob-m-pm:focus-visible ~ * label[for="bride-tob-m-pm"] { outline:2px solid var(--gold); outline-offset:2px; } #bride-tob-m-pm:checked ~ * .c-tp-om::after { content:"PM"; } /* The clock's face is spans the component's :checked rules write into, so it cannot simply be replaced with a word — it is covered instead, and the hint drawn in its place. */ .b-clock .c-pf-t[data-empty] .c-pf-face { display:none; } .b-clock .c-pf-t[data-empty]::before { content:'Choose a time'; flex:1; min-width:0; font-size:var(--text-md); color:var(--ph); } /* ── the clock in two turns ── One dial carrying twelve hours on the outside and twelve five-minute marks inside it is two questions asked at once, and the inner ring is the smaller target of the two. So it asks one at a time: hours, and the moment one is chosen the same dial turns over to minutes. The readout above is the way back — tap the hour to change the hour, the minutes to return to them, which is the pattern every phone clock uses. Nothing is removed, only hidden: all sixty minute radios and all twelve hour radios are still in the group, so a keyboard arrows through the whole range whichever face is showing. */ .b-clock[data-step="hour"] .c-ck-m, .b-clock[data-step="hour"] .c-ck-fr { display:none; } .b-clock[data-step="min"] .c-ck-h { display:none; } /* THE MINUTES MOVE OUT TO THE RING THE HOURS LEFT. They are drawn at radius 88 because they used to share the face with the hours at 134 — one face at a time, that leaves the numbers huddled in the middle of a 320px circle with a wide dead band round them. `--r` is set inline per label, so this has to shout; the component's own responsive rules override it the same way. */ /* A SMALLER FACE. 320px was sized for two rings — hours outside, minutes inside. Showing one at a time leaves a lot of circle around a dozen numbers, so the whole dial comes in: the ring keeps the same margin from the edge it always had (chip half-width plus four), and the marks stay 55px apart, which is well clear of a fingertip. `--r` is inline per label and the component's own small-screen rules shout, so these do too. */ .b-clock .c-ck-face { width:264px; height:264px; } .b-clock .c-ck-h { --r:106px !important; } .b-clock[data-step="min"] .c-ck-m { --r:106px !important; } .b-clock .c-ck-face { --hand-r:106px; } /* A HAND, because the marks are every fifth minute and the answer is any of sixty. Pick 13 and the nearest label lights up — 10 — which says the wrong number unless something points at where 13 actually is. */ .b-clock .c-ck-face::before { content:''; position:absolute; left:50%; top:50%; width:2px; margin-left:-1px; background:var(--gold-solid); border-radius:2px; opacity:.85; transform-origin:50% 0; transform:rotate(calc(var(--hand,0deg) + 180deg)); height:var(--hand-r,106px); pointer-events:none; } .b-clock:not([data-hand]) .c-ck-face::before { display:none; } .b-clock .c-ck-face { transition:transform .2s ease, opacity .2s ease; } .b-clock[data-turn] .c-ck-face { transform:translateX(-18px); opacity:0; } @media (prefers-reduced-motion:reduce) { .b-clock .c-ck-face { transition:none; } .b-clock[data-turn] .c-ck-face { transform:none; opacity:1; } } /* The readout is the tab bar, so it has to look like one. */ .b-clock .c-tp-out .c-tp-oh, .b-clock .c-tp-out .c-tp-ot { cursor:pointer; border-radius:8px; padding:0 4px; } .b-clock .c-tp-out .c-tp-oh:focus-visible, .b-clock .c-tp-out .c-tp-ot:focus-visible { outline:2px solid var(--gold); outline-offset:2px; } .b-clock[data-step="hour"] .c-tp-out .c-tp-ot, .b-clock[data-step="min"] .c-tp-out .c-tp-oh { opacity:.45; }