* { 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); } #b-dob-1990-07-01:checked ~ * label[for="b-dob-1990-07-01"], #b-dob-1990-07-01:checked ~ .c-dp label[for="b-dob-1990-07-01"] { background:var(--gold-solid); } #b-dob-1990-07-01:checked ~ * label[for="b-dob-1990-07-01"] b, #b-dob-1990-07-01:checked ~ * label[for="b-dob-1990-07-01"] em, #b-dob-1990-07-01:checked ~ .c-dp label[for="b-dob-1990-07-01"] b, #b-dob-1990-07-01:checked ~ .c-dp label[for="b-dob-1990-07-01"] em { color:var(--gold-solid-text); } #b-dob-1990-07-02:checked ~ * label[for="b-dob-1990-07-02"], #b-dob-1990-07-02:checked ~ .c-dp label[for="b-dob-1990-07-02"] { background:var(--gold-solid); } #b-dob-1990-07-02:checked ~ * label[for="b-dob-1990-07-02"] b, #b-dob-1990-07-02:checked ~ * label[for="b-dob-1990-07-02"] em, #b-dob-1990-07-02:checked ~ .c-dp label[for="b-dob-1990-07-02"] b, #b-dob-1990-07-02:checked ~ .c-dp label[for="b-dob-1990-07-02"] em { color:var(--gold-solid-text); } #b-dob-1990-07-03:checked ~ * label[for="b-dob-1990-07-03"], #b-dob-1990-07-03:checked ~ .c-dp label[for="b-dob-1990-07-03"] { background:var(--gold-solid); } #b-dob-1990-07-03:checked ~ * label[for="b-dob-1990-07-03"] b, #b-dob-1990-07-03:checked ~ * label[for="b-dob-1990-07-03"] em, #b-dob-1990-07-03:checked ~ .c-dp label[for="b-dob-1990-07-03"] b, #b-dob-1990-07-03:checked ~ .c-dp label[for="b-dob-1990-07-03"] em { color:var(--gold-solid-text); } #b-dob-1990-07-04:checked ~ * label[for="b-dob-1990-07-04"], #b-dob-1990-07-04:checked ~ .c-dp label[for="b-dob-1990-07-04"] { background:var(--gold-solid); } #b-dob-1990-07-04:checked ~ * label[for="b-dob-1990-07-04"] b, #b-dob-1990-07-04:checked ~ * label[for="b-dob-1990-07-04"] em, #b-dob-1990-07-04:checked ~ .c-dp label[for="b-dob-1990-07-04"] b, #b-dob-1990-07-04:checked ~ .c-dp label[for="b-dob-1990-07-04"] em { color:var(--gold-solid-text); } #b-dob-1990-07-05:checked ~ * label[for="b-dob-1990-07-05"], #b-dob-1990-07-05:checked ~ .c-dp label[for="b-dob-1990-07-05"] { background:var(--gold-solid); } #b-dob-1990-07-05:checked ~ * label[for="b-dob-1990-07-05"] b, #b-dob-1990-07-05:checked ~ * label[for="b-dob-1990-07-05"] em, #b-dob-1990-07-05:checked ~ .c-dp label[for="b-dob-1990-07-05"] b, #b-dob-1990-07-05:checked ~ .c-dp label[for="b-dob-1990-07-05"] em { color:var(--gold-solid-text); } #b-dob-1990-07-06:checked ~ * label[for="b-dob-1990-07-06"], #b-dob-1990-07-06:checked ~ .c-dp label[for="b-dob-1990-07-06"] { background:var(--gold-solid); } #b-dob-1990-07-06:checked ~ * label[for="b-dob-1990-07-06"] b, #b-dob-1990-07-06:checked ~ * label[for="b-dob-1990-07-06"] em, #b-dob-1990-07-06:checked ~ .c-dp label[for="b-dob-1990-07-06"] b, #b-dob-1990-07-06:checked ~ .c-dp label[for="b-dob-1990-07-06"] em { color:var(--gold-solid-text); } #b-dob-1990-07-07:checked ~ * label[for="b-dob-1990-07-07"], #b-dob-1990-07-07:checked ~ .c-dp label[for="b-dob-1990-07-07"] { background:var(--gold-solid); } #b-dob-1990-07-07:checked ~ * label[for="b-dob-1990-07-07"] b, #b-dob-1990-07-07:checked ~ * label[for="b-dob-1990-07-07"] em, #b-dob-1990-07-07:checked ~ .c-dp label[for="b-dob-1990-07-07"] b, #b-dob-1990-07-07:checked ~ .c-dp label[for="b-dob-1990-07-07"] em { color:var(--gold-solid-text); } #b-dob-1990-07-08:checked ~ * label[for="b-dob-1990-07-08"], #b-dob-1990-07-08:checked ~ .c-dp label[for="b-dob-1990-07-08"] { background:var(--gold-solid); } #b-dob-1990-07-08:checked ~ * label[for="b-dob-1990-07-08"] b, #b-dob-1990-07-08:checked ~ * label[for="b-dob-1990-07-08"] em, #b-dob-1990-07-08:checked ~ .c-dp label[for="b-dob-1990-07-08"] b, #b-dob-1990-07-08:checked ~ .c-dp label[for="b-dob-1990-07-08"] em { color:var(--gold-solid-text); } #b-dob-1990-07-09:checked ~ * label[for="b-dob-1990-07-09"], #b-dob-1990-07-09:checked ~ .c-dp label[for="b-dob-1990-07-09"] { background:var(--gold-solid); } #b-dob-1990-07-09:checked ~ * label[for="b-dob-1990-07-09"] b, #b-dob-1990-07-09:checked ~ * label[for="b-dob-1990-07-09"] em, #b-dob-1990-07-09:checked ~ .c-dp label[for="b-dob-1990-07-09"] b, #b-dob-1990-07-09:checked ~ .c-dp label[for="b-dob-1990-07-09"] em { color:var(--gold-solid-text); } #b-dob-1990-07-10:checked ~ * label[for="b-dob-1990-07-10"], #b-dob-1990-07-10:checked ~ .c-dp label[for="b-dob-1990-07-10"] { background:var(--gold-solid); } #b-dob-1990-07-10:checked ~ * label[for="b-dob-1990-07-10"] b, #b-dob-1990-07-10:checked ~ * label[for="b-dob-1990-07-10"] em, #b-dob-1990-07-10:checked ~ .c-dp label[for="b-dob-1990-07-10"] b, #b-dob-1990-07-10:checked ~ .c-dp label[for="b-dob-1990-07-10"] em { color:var(--gold-solid-text); } #b-dob-1990-07-11:checked ~ * label[for="b-dob-1990-07-11"], #b-dob-1990-07-11:checked ~ .c-dp label[for="b-dob-1990-07-11"] { background:var(--gold-solid); } #b-dob-1990-07-11:checked ~ * label[for="b-dob-1990-07-11"] b, #b-dob-1990-07-11:checked ~ * label[for="b-dob-1990-07-11"] em, #b-dob-1990-07-11:checked ~ .c-dp label[for="b-dob-1990-07-11"] b, #b-dob-1990-07-11:checked ~ .c-dp label[for="b-dob-1990-07-11"] em { color:var(--gold-solid-text); } #b-dob-1990-07-12:checked ~ * label[for="b-dob-1990-07-12"], #b-dob-1990-07-12:checked ~ .c-dp label[for="b-dob-1990-07-12"] { background:var(--gold-solid); } #b-dob-1990-07-12:checked ~ * label[for="b-dob-1990-07-12"] b, #b-dob-1990-07-12:checked ~ * label[for="b-dob-1990-07-12"] em, #b-dob-1990-07-12:checked ~ .c-dp label[for="b-dob-1990-07-12"] b, #b-dob-1990-07-12:checked ~ .c-dp label[for="b-dob-1990-07-12"] em { color:var(--gold-solid-text); } #b-dob-1990-07-13:checked ~ * label[for="b-dob-1990-07-13"], #b-dob-1990-07-13:checked ~ .c-dp label[for="b-dob-1990-07-13"] { background:var(--gold-solid); } #b-dob-1990-07-13:checked ~ * label[for="b-dob-1990-07-13"] b, #b-dob-1990-07-13:checked ~ * label[for="b-dob-1990-07-13"] em, #b-dob-1990-07-13:checked ~ .c-dp label[for="b-dob-1990-07-13"] b, #b-dob-1990-07-13:checked ~ .c-dp label[for="b-dob-1990-07-13"] em { color:var(--gold-solid-text); } #b-dob-1990-07-14:checked ~ * label[for="b-dob-1990-07-14"], #b-dob-1990-07-14:checked ~ .c-dp label[for="b-dob-1990-07-14"] { background:var(--gold-solid); } #b-dob-1990-07-14:checked ~ * label[for="b-dob-1990-07-14"] b, #b-dob-1990-07-14:checked ~ * label[for="b-dob-1990-07-14"] em, #b-dob-1990-07-14:checked ~ .c-dp label[for="b-dob-1990-07-14"] b, #b-dob-1990-07-14:checked ~ .c-dp label[for="b-dob-1990-07-14"] em { color:var(--gold-solid-text); } #b-dob-1990-07-15:checked ~ * label[for="b-dob-1990-07-15"], #b-dob-1990-07-15:checked ~ .c-dp label[for="b-dob-1990-07-15"] { background:var(--gold-solid); } #b-dob-1990-07-15:checked ~ * label[for="b-dob-1990-07-15"] b, #b-dob-1990-07-15:checked ~ * label[for="b-dob-1990-07-15"] em, #b-dob-1990-07-15:checked ~ .c-dp label[for="b-dob-1990-07-15"] b, #b-dob-1990-07-15:checked ~ .c-dp label[for="b-dob-1990-07-15"] em { color:var(--gold-solid-text); } #b-dob-1990-07-16:checked ~ * label[for="b-dob-1990-07-16"], #b-dob-1990-07-16:checked ~ .c-dp label[for="b-dob-1990-07-16"] { background:var(--gold-solid); } #b-dob-1990-07-16:checked ~ * label[for="b-dob-1990-07-16"] b, #b-dob-1990-07-16:checked ~ * label[for="b-dob-1990-07-16"] em, #b-dob-1990-07-16:checked ~ .c-dp label[for="b-dob-1990-07-16"] b, #b-dob-1990-07-16:checked ~ .c-dp label[for="b-dob-1990-07-16"] em { color:var(--gold-solid-text); } #b-dob-1990-07-17:checked ~ * label[for="b-dob-1990-07-17"], #b-dob-1990-07-17:checked ~ .c-dp label[for="b-dob-1990-07-17"] { background:var(--gold-solid); } #b-dob-1990-07-17:checked ~ * label[for="b-dob-1990-07-17"] b, #b-dob-1990-07-17:checked ~ * label[for="b-dob-1990-07-17"] em, #b-dob-1990-07-17:checked ~ .c-dp label[for="b-dob-1990-07-17"] b, #b-dob-1990-07-17:checked ~ .c-dp label[for="b-dob-1990-07-17"] em { color:var(--gold-solid-text); } #b-dob-1990-07-18:checked ~ * label[for="b-dob-1990-07-18"], #b-dob-1990-07-18:checked ~ .c-dp label[for="b-dob-1990-07-18"] { background:var(--gold-solid); } #b-dob-1990-07-18:checked ~ * label[for="b-dob-1990-07-18"] b, #b-dob-1990-07-18:checked ~ * label[for="b-dob-1990-07-18"] em, #b-dob-1990-07-18:checked ~ .c-dp label[for="b-dob-1990-07-18"] b, #b-dob-1990-07-18:checked ~ .c-dp label[for="b-dob-1990-07-18"] em { color:var(--gold-solid-text); } #b-dob-1990-07-19:checked ~ * label[for="b-dob-1990-07-19"], #b-dob-1990-07-19:checked ~ .c-dp label[for="b-dob-1990-07-19"] { background:var(--gold-solid); } #b-dob-1990-07-19:checked ~ * label[for="b-dob-1990-07-19"] b, #b-dob-1990-07-19:checked ~ * label[for="b-dob-1990-07-19"] em, #b-dob-1990-07-19:checked ~ .c-dp label[for="b-dob-1990-07-19"] b, #b-dob-1990-07-19:checked ~ .c-dp label[for="b-dob-1990-07-19"] em { color:var(--gold-solid-text); } #b-dob-1990-07-20:checked ~ * label[for="b-dob-1990-07-20"], #b-dob-1990-07-20:checked ~ .c-dp label[for="b-dob-1990-07-20"] { background:var(--gold-solid); } #b-dob-1990-07-20:checked ~ * label[for="b-dob-1990-07-20"] b, #b-dob-1990-07-20:checked ~ * label[for="b-dob-1990-07-20"] em, #b-dob-1990-07-20:checked ~ .c-dp label[for="b-dob-1990-07-20"] b, #b-dob-1990-07-20:checked ~ .c-dp label[for="b-dob-1990-07-20"] em { color:var(--gold-solid-text); } #b-dob-1990-07-21:checked ~ * label[for="b-dob-1990-07-21"], #b-dob-1990-07-21:checked ~ .c-dp label[for="b-dob-1990-07-21"] { background:var(--gold-solid); } #b-dob-1990-07-21:checked ~ * label[for="b-dob-1990-07-21"] b, #b-dob-1990-07-21:checked ~ * label[for="b-dob-1990-07-21"] em, #b-dob-1990-07-21:checked ~ .c-dp label[for="b-dob-1990-07-21"] b, #b-dob-1990-07-21:checked ~ .c-dp label[for="b-dob-1990-07-21"] em { color:var(--gold-solid-text); } #b-dob-1990-07-22:checked ~ * label[for="b-dob-1990-07-22"], #b-dob-1990-07-22:checked ~ .c-dp label[for="b-dob-1990-07-22"] { background:var(--gold-solid); } #b-dob-1990-07-22:checked ~ * label[for="b-dob-1990-07-22"] b, #b-dob-1990-07-22:checked ~ * label[for="b-dob-1990-07-22"] em, #b-dob-1990-07-22:checked ~ .c-dp label[for="b-dob-1990-07-22"] b, #b-dob-1990-07-22:checked ~ .c-dp label[for="b-dob-1990-07-22"] em { color:var(--gold-solid-text); } #b-dob-1990-07-23:checked ~ * label[for="b-dob-1990-07-23"], #b-dob-1990-07-23:checked ~ .c-dp label[for="b-dob-1990-07-23"] { background:var(--gold-solid); } #b-dob-1990-07-23:checked ~ * label[for="b-dob-1990-07-23"] b, #b-dob-1990-07-23:checked ~ * label[for="b-dob-1990-07-23"] em, #b-dob-1990-07-23:checked ~ .c-dp label[for="b-dob-1990-07-23"] b, #b-dob-1990-07-23:checked ~ .c-dp label[for="b-dob-1990-07-23"] em { color:var(--gold-solid-text); } #b-dob-1990-07-24:checked ~ * label[for="b-dob-1990-07-24"], #b-dob-1990-07-24:checked ~ .c-dp label[for="b-dob-1990-07-24"] { background:var(--gold-solid); } #b-dob-1990-07-24:checked ~ * label[for="b-dob-1990-07-24"] b, #b-dob-1990-07-24:checked ~ * label[for="b-dob-1990-07-24"] em, #b-dob-1990-07-24:checked ~ .c-dp label[for="b-dob-1990-07-24"] b, #b-dob-1990-07-24:checked ~ .c-dp label[for="b-dob-1990-07-24"] em { color:var(--gold-solid-text); } #b-dob-1990-07-25:checked ~ * label[for="b-dob-1990-07-25"], #b-dob-1990-07-25:checked ~ .c-dp label[for="b-dob-1990-07-25"] { background:var(--gold-solid); } #b-dob-1990-07-25:checked ~ * label[for="b-dob-1990-07-25"] b, #b-dob-1990-07-25:checked ~ * label[for="b-dob-1990-07-25"] em, #b-dob-1990-07-25:checked ~ .c-dp label[for="b-dob-1990-07-25"] b, #b-dob-1990-07-25:checked ~ .c-dp label[for="b-dob-1990-07-25"] em { color:var(--gold-solid-text); } #b-dob-1990-07-26:checked ~ * label[for="b-dob-1990-07-26"], #b-dob-1990-07-26:checked ~ .c-dp label[for="b-dob-1990-07-26"] { background:var(--gold-solid); } #b-dob-1990-07-26:checked ~ * label[for="b-dob-1990-07-26"] b, #b-dob-1990-07-26:checked ~ * label[for="b-dob-1990-07-26"] em, #b-dob-1990-07-26:checked ~ .c-dp label[for="b-dob-1990-07-26"] b, #b-dob-1990-07-26:checked ~ .c-dp label[for="b-dob-1990-07-26"] em { color:var(--gold-solid-text); } #b-dob-1990-07-27:checked ~ * label[for="b-dob-1990-07-27"], #b-dob-1990-07-27:checked ~ .c-dp label[for="b-dob-1990-07-27"] { background:var(--gold-solid); } #b-dob-1990-07-27:checked ~ * label[for="b-dob-1990-07-27"] b, #b-dob-1990-07-27:checked ~ * label[for="b-dob-1990-07-27"] em, #b-dob-1990-07-27:checked ~ .c-dp label[for="b-dob-1990-07-27"] b, #b-dob-1990-07-27:checked ~ .c-dp label[for="b-dob-1990-07-27"] em { color:var(--gold-solid-text); } #b-dob-1990-07-28:checked ~ * label[for="b-dob-1990-07-28"], #b-dob-1990-07-28:checked ~ .c-dp label[for="b-dob-1990-07-28"] { background:var(--gold-solid); } #b-dob-1990-07-28:checked ~ * label[for="b-dob-1990-07-28"] b, #b-dob-1990-07-28:checked ~ * label[for="b-dob-1990-07-28"] em, #b-dob-1990-07-28:checked ~ .c-dp label[for="b-dob-1990-07-28"] b, #b-dob-1990-07-28:checked ~ .c-dp label[for="b-dob-1990-07-28"] em { color:var(--gold-solid-text); } #b-dob-1990-07-29:checked ~ * label[for="b-dob-1990-07-29"], #b-dob-1990-07-29:checked ~ .c-dp label[for="b-dob-1990-07-29"] { background:var(--gold-solid); } #b-dob-1990-07-29:checked ~ * label[for="b-dob-1990-07-29"] b, #b-dob-1990-07-29:checked ~ * label[for="b-dob-1990-07-29"] em, #b-dob-1990-07-29:checked ~ .c-dp label[for="b-dob-1990-07-29"] b, #b-dob-1990-07-29:checked ~ .c-dp label[for="b-dob-1990-07-29"] em { color:var(--gold-solid-text); } #b-dob-1990-07-30:checked ~ * label[for="b-dob-1990-07-30"], #b-dob-1990-07-30:checked ~ .c-dp label[for="b-dob-1990-07-30"] { background:var(--gold-solid); } #b-dob-1990-07-30:checked ~ * label[for="b-dob-1990-07-30"] b, #b-dob-1990-07-30:checked ~ * label[for="b-dob-1990-07-30"] em, #b-dob-1990-07-30:checked ~ .c-dp label[for="b-dob-1990-07-30"] b, #b-dob-1990-07-30:checked ~ .c-dp label[for="b-dob-1990-07-30"] em { color:var(--gold-solid-text); } #b-dob-1990-07-31:checked ~ * label[for="b-dob-1990-07-31"], #b-dob-1990-07-31:checked ~ .c-dp label[for="b-dob-1990-07-31"] { background:var(--gold-solid); } #b-dob-1990-07-31:checked ~ * label[for="b-dob-1990-07-31"] b, #b-dob-1990-07-31:checked ~ * label[for="b-dob-1990-07-31"] em, #b-dob-1990-07-31:checked ~ .c-dp label[for="b-dob-1990-07-31"] b, #b-dob-1990-07-31:checked ~ .c-dp label[for="b-dob-1990-07-31"] em { color:var(--gold-solid-text); }#b-tob-h-1:checked ~ * label[for="b-tob-h-1"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-h-1:focus-visible ~ * label[for="b-tob-h-1"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-h-1:checked ~ * .c-tp-oh::after { content:"01"; } #b-tob-h-2:checked ~ * label[for="b-tob-h-2"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-h-2:focus-visible ~ * label[for="b-tob-h-2"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-h-2:checked ~ * .c-tp-oh::after { content:"02"; } #b-tob-h-3:checked ~ * label[for="b-tob-h-3"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-h-3:focus-visible ~ * label[for="b-tob-h-3"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-h-3:checked ~ * .c-tp-oh::after { content:"03"; } #b-tob-h-4:checked ~ * label[for="b-tob-h-4"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-h-4:focus-visible ~ * label[for="b-tob-h-4"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-h-4:checked ~ * .c-tp-oh::after { content:"04"; } #b-tob-h-5:checked ~ * label[for="b-tob-h-5"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-h-5:focus-visible ~ * label[for="b-tob-h-5"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-h-5:checked ~ * .c-tp-oh::after { content:"05"; } #b-tob-h-6:checked ~ * label[for="b-tob-h-6"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-h-6:focus-visible ~ * label[for="b-tob-h-6"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-h-6:checked ~ * .c-tp-oh::after { content:"06"; } #b-tob-h-7:checked ~ * label[for="b-tob-h-7"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-h-7:focus-visible ~ * label[for="b-tob-h-7"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-h-7:checked ~ * .c-tp-oh::after { content:"07"; } #b-tob-h-8:checked ~ * label[for="b-tob-h-8"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-h-8:focus-visible ~ * label[for="b-tob-h-8"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-h-8:checked ~ * .c-tp-oh::after { content:"08"; } #b-tob-h-9:checked ~ * label[for="b-tob-h-9"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-h-9:focus-visible ~ * label[for="b-tob-h-9"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-h-9:checked ~ * .c-tp-oh::after { content:"09"; } #b-tob-h-10:checked ~ * label[for="b-tob-h-10"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-h-10:focus-visible ~ * label[for="b-tob-h-10"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-h-10:checked ~ * .c-tp-oh::after { content:"10"; } #b-tob-h-11:checked ~ * label[for="b-tob-h-11"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-h-11:focus-visible ~ * label[for="b-tob-h-11"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-h-11:checked ~ * .c-tp-oh::after { content:"11"; } #b-tob-h-12:checked ~ * label[for="b-tob-h-12"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-h-12:focus-visible ~ * label[for="b-tob-h-12"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-h-12:checked ~ * .c-tp-oh::after { content:"12"; } #b-tob-t-0:checked ~ * label[for="b-tob-t-0"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-0:focus-visible ~ * label[for="b-tob-t-0"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-0:checked ~ * .c-tp-ot::after { content:"00"; } #b-tob-t-1:checked ~ * label[for="b-tob-t-1"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-1:focus-visible ~ * label[for="b-tob-t-1"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-1:checked ~ * .c-tp-ot::after { content:"01"; } #b-tob-t-2:checked ~ * label[for="b-tob-t-2"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-2:focus-visible ~ * label[for="b-tob-t-2"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-2:checked ~ * .c-tp-ot::after { content:"02"; } #b-tob-t-3:checked ~ * label[for="b-tob-t-3"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-3:focus-visible ~ * label[for="b-tob-t-3"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-3:checked ~ * .c-tp-ot::after { content:"03"; } #b-tob-t-4:checked ~ * label[for="b-tob-t-4"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-4:focus-visible ~ * label[for="b-tob-t-4"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-4:checked ~ * .c-tp-ot::after { content:"04"; } #b-tob-t-5:checked ~ * label[for="b-tob-t-5"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-5:focus-visible ~ * label[for="b-tob-t-5"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-5:checked ~ * .c-tp-ot::after { content:"05"; } #b-tob-t-6:checked ~ * label[for="b-tob-t-6"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-6:focus-visible ~ * label[for="b-tob-t-6"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-6:checked ~ * .c-tp-ot::after { content:"06"; } #b-tob-t-7:checked ~ * label[for="b-tob-t-7"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-7:focus-visible ~ * label[for="b-tob-t-7"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-7:checked ~ * .c-tp-ot::after { content:"07"; } #b-tob-t-8:checked ~ * label[for="b-tob-t-8"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-8:focus-visible ~ * label[for="b-tob-t-8"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-8:checked ~ * .c-tp-ot::after { content:"08"; } #b-tob-t-9:checked ~ * label[for="b-tob-t-9"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-9:focus-visible ~ * label[for="b-tob-t-9"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-9:checked ~ * .c-tp-ot::after { content:"09"; } #b-tob-t-10:checked ~ * label[for="b-tob-t-10"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-10:focus-visible ~ * label[for="b-tob-t-10"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-10:checked ~ * .c-tp-ot::after { content:"10"; } #b-tob-t-11:checked ~ * label[for="b-tob-t-11"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-11:focus-visible ~ * label[for="b-tob-t-11"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-11:checked ~ * .c-tp-ot::after { content:"11"; } #b-tob-t-12:checked ~ * label[for="b-tob-t-12"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-12:focus-visible ~ * label[for="b-tob-t-12"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-12:checked ~ * .c-tp-ot::after { content:"12"; } #b-tob-t-13:checked ~ * label[for="b-tob-t-13"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-13:focus-visible ~ * label[for="b-tob-t-13"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-13:checked ~ * .c-tp-ot::after { content:"13"; } #b-tob-t-14:checked ~ * label[for="b-tob-t-14"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-14:focus-visible ~ * label[for="b-tob-t-14"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-14:checked ~ * .c-tp-ot::after { content:"14"; } #b-tob-t-15:checked ~ * label[for="b-tob-t-15"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-15:focus-visible ~ * label[for="b-tob-t-15"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-15:checked ~ * .c-tp-ot::after { content:"15"; } #b-tob-t-16:checked ~ * label[for="b-tob-t-16"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-16:focus-visible ~ * label[for="b-tob-t-16"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-16:checked ~ * .c-tp-ot::after { content:"16"; } #b-tob-t-17:checked ~ * label[for="b-tob-t-17"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-17:focus-visible ~ * label[for="b-tob-t-17"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-17:checked ~ * .c-tp-ot::after { content:"17"; } #b-tob-t-18:checked ~ * label[for="b-tob-t-18"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-18:focus-visible ~ * label[for="b-tob-t-18"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-18:checked ~ * .c-tp-ot::after { content:"18"; } #b-tob-t-19:checked ~ * label[for="b-tob-t-19"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-19:focus-visible ~ * label[for="b-tob-t-19"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-19:checked ~ * .c-tp-ot::after { content:"19"; } #b-tob-t-20:checked ~ * label[for="b-tob-t-20"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-20:focus-visible ~ * label[for="b-tob-t-20"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-20:checked ~ * .c-tp-ot::after { content:"20"; } #b-tob-t-21:checked ~ * label[for="b-tob-t-21"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-21:focus-visible ~ * label[for="b-tob-t-21"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-21:checked ~ * .c-tp-ot::after { content:"21"; } #b-tob-t-22:checked ~ * label[for="b-tob-t-22"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-22:focus-visible ~ * label[for="b-tob-t-22"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-22:checked ~ * .c-tp-ot::after { content:"22"; } #b-tob-t-23:checked ~ * label[for="b-tob-t-23"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-23:focus-visible ~ * label[for="b-tob-t-23"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-23:checked ~ * .c-tp-ot::after { content:"23"; } #b-tob-t-24:checked ~ * label[for="b-tob-t-24"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-24:focus-visible ~ * label[for="b-tob-t-24"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-24:checked ~ * .c-tp-ot::after { content:"24"; } #b-tob-t-25:checked ~ * label[for="b-tob-t-25"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-25:focus-visible ~ * label[for="b-tob-t-25"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-25:checked ~ * .c-tp-ot::after { content:"25"; } #b-tob-t-26:checked ~ * label[for="b-tob-t-26"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-26:focus-visible ~ * label[for="b-tob-t-26"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-26:checked ~ * .c-tp-ot::after { content:"26"; } #b-tob-t-27:checked ~ * label[for="b-tob-t-27"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-27:focus-visible ~ * label[for="b-tob-t-27"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-27:checked ~ * .c-tp-ot::after { content:"27"; } #b-tob-t-28:checked ~ * label[for="b-tob-t-28"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-28:focus-visible ~ * label[for="b-tob-t-28"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-28:checked ~ * .c-tp-ot::after { content:"28"; } #b-tob-t-29:checked ~ * label[for="b-tob-t-29"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-29:focus-visible ~ * label[for="b-tob-t-29"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-29:checked ~ * .c-tp-ot::after { content:"29"; } #b-tob-t-30:checked ~ * label[for="b-tob-t-30"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-30:focus-visible ~ * label[for="b-tob-t-30"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-30:checked ~ * .c-tp-ot::after { content:"30"; } #b-tob-t-31:checked ~ * label[for="b-tob-t-31"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-31:focus-visible ~ * label[for="b-tob-t-31"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-31:checked ~ * .c-tp-ot::after { content:"31"; } #b-tob-t-32:checked ~ * label[for="b-tob-t-32"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-32:focus-visible ~ * label[for="b-tob-t-32"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-32:checked ~ * .c-tp-ot::after { content:"32"; } #b-tob-t-33:checked ~ * label[for="b-tob-t-33"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-33:focus-visible ~ * label[for="b-tob-t-33"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-33:checked ~ * .c-tp-ot::after { content:"33"; } #b-tob-t-34:checked ~ * label[for="b-tob-t-34"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-34:focus-visible ~ * label[for="b-tob-t-34"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-34:checked ~ * .c-tp-ot::after { content:"34"; } #b-tob-t-35:checked ~ * label[for="b-tob-t-35"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-35:focus-visible ~ * label[for="b-tob-t-35"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-35:checked ~ * .c-tp-ot::after { content:"35"; } #b-tob-t-36:checked ~ * label[for="b-tob-t-36"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-36:focus-visible ~ * label[for="b-tob-t-36"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-36:checked ~ * .c-tp-ot::after { content:"36"; } #b-tob-t-37:checked ~ * label[for="b-tob-t-37"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-37:focus-visible ~ * label[for="b-tob-t-37"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-37:checked ~ * .c-tp-ot::after { content:"37"; } #b-tob-t-38:checked ~ * label[for="b-tob-t-38"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-38:focus-visible ~ * label[for="b-tob-t-38"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-38:checked ~ * .c-tp-ot::after { content:"38"; } #b-tob-t-39:checked ~ * label[for="b-tob-t-39"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-39:focus-visible ~ * label[for="b-tob-t-39"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-39:checked ~ * .c-tp-ot::after { content:"39"; } #b-tob-t-40:checked ~ * label[for="b-tob-t-40"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-40:focus-visible ~ * label[for="b-tob-t-40"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-40:checked ~ * .c-tp-ot::after { content:"40"; } #b-tob-t-41:checked ~ * label[for="b-tob-t-41"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-41:focus-visible ~ * label[for="b-tob-t-41"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-41:checked ~ * .c-tp-ot::after { content:"41"; } #b-tob-t-42:checked ~ * label[for="b-tob-t-42"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-42:focus-visible ~ * label[for="b-tob-t-42"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-42:checked ~ * .c-tp-ot::after { content:"42"; } #b-tob-t-43:checked ~ * label[for="b-tob-t-43"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-43:focus-visible ~ * label[for="b-tob-t-43"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-43:checked ~ * .c-tp-ot::after { content:"43"; } #b-tob-t-44:checked ~ * label[for="b-tob-t-44"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-44:focus-visible ~ * label[for="b-tob-t-44"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-44:checked ~ * .c-tp-ot::after { content:"44"; } #b-tob-t-45:checked ~ * label[for="b-tob-t-45"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-45:focus-visible ~ * label[for="b-tob-t-45"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-45:checked ~ * .c-tp-ot::after { content:"45"; } #b-tob-t-46:checked ~ * label[for="b-tob-t-46"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-46:focus-visible ~ * label[for="b-tob-t-46"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-46:checked ~ * .c-tp-ot::after { content:"46"; } #b-tob-t-47:checked ~ * label[for="b-tob-t-47"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-47:focus-visible ~ * label[for="b-tob-t-47"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-47:checked ~ * .c-tp-ot::after { content:"47"; } #b-tob-t-48:checked ~ * label[for="b-tob-t-48"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-48:focus-visible ~ * label[for="b-tob-t-48"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-48:checked ~ * .c-tp-ot::after { content:"48"; } #b-tob-t-49:checked ~ * label[for="b-tob-t-49"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-49:focus-visible ~ * label[for="b-tob-t-49"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-49:checked ~ * .c-tp-ot::after { content:"49"; } #b-tob-t-50:checked ~ * label[for="b-tob-t-50"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-50:focus-visible ~ * label[for="b-tob-t-50"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-50:checked ~ * .c-tp-ot::after { content:"50"; } #b-tob-t-51:checked ~ * label[for="b-tob-t-51"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-51:focus-visible ~ * label[for="b-tob-t-51"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-51:checked ~ * .c-tp-ot::after { content:"51"; } #b-tob-t-52:checked ~ * label[for="b-tob-t-52"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-52:focus-visible ~ * label[for="b-tob-t-52"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-52:checked ~ * .c-tp-ot::after { content:"52"; } #b-tob-t-53:checked ~ * label[for="b-tob-t-53"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-53:focus-visible ~ * label[for="b-tob-t-53"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-53:checked ~ * .c-tp-ot::after { content:"53"; } #b-tob-t-54:checked ~ * label[for="b-tob-t-54"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-54:focus-visible ~ * label[for="b-tob-t-54"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-54:checked ~ * .c-tp-ot::after { content:"54"; } #b-tob-t-55:checked ~ * label[for="b-tob-t-55"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-55:focus-visible ~ * label[for="b-tob-t-55"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-55:checked ~ * .c-tp-ot::after { content:"55"; } #b-tob-t-56:checked ~ * label[for="b-tob-t-56"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-56:focus-visible ~ * label[for="b-tob-t-56"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-56:checked ~ * .c-tp-ot::after { content:"56"; } #b-tob-t-57:checked ~ * label[for="b-tob-t-57"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-57:focus-visible ~ * label[for="b-tob-t-57"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-57:checked ~ * .c-tp-ot::after { content:"57"; } #b-tob-t-58:checked ~ * label[for="b-tob-t-58"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-58:focus-visible ~ * label[for="b-tob-t-58"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-58:checked ~ * .c-tp-ot::after { content:"58"; } #b-tob-t-59:checked ~ * label[for="b-tob-t-59"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-t-59:focus-visible ~ * label[for="b-tob-t-59"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-t-59:checked ~ * .c-tp-ot::after { content:"59"; } #b-tob-t-0:checked ~ * .c-ck-fr[data-blk="0"] { display:grid; } #b-tob-t-1:checked ~ * .c-ck-fr[data-blk="0"] { display:grid; } #b-tob-t-2:checked ~ * .c-ck-fr[data-blk="0"] { display:grid; } #b-tob-t-3:checked ~ * .c-ck-fr[data-blk="0"] { display:grid; } #b-tob-t-4:checked ~ * .c-ck-fr[data-blk="0"] { display:grid; } #b-tob-t-5:checked ~ * .c-ck-fr[data-blk="1"] { display:grid; } #b-tob-t-6:checked ~ * .c-ck-fr[data-blk="1"] { display:grid; } #b-tob-t-7:checked ~ * .c-ck-fr[data-blk="1"] { display:grid; } #b-tob-t-8:checked ~ * .c-ck-fr[data-blk="1"] { display:grid; } #b-tob-t-9:checked ~ * .c-ck-fr[data-blk="1"] { display:grid; } #b-tob-t-10:checked ~ * .c-ck-fr[data-blk="2"] { display:grid; } #b-tob-t-11:checked ~ * .c-ck-fr[data-blk="2"] { display:grid; } #b-tob-t-12:checked ~ * .c-ck-fr[data-blk="2"] { display:grid; } #b-tob-t-13:checked ~ * .c-ck-fr[data-blk="2"] { display:grid; } #b-tob-t-14:checked ~ * .c-ck-fr[data-blk="2"] { display:grid; } #b-tob-t-15:checked ~ * .c-ck-fr[data-blk="3"] { display:grid; } #b-tob-t-16:checked ~ * .c-ck-fr[data-blk="3"] { display:grid; } #b-tob-t-17:checked ~ * .c-ck-fr[data-blk="3"] { display:grid; } #b-tob-t-18:checked ~ * .c-ck-fr[data-blk="3"] { display:grid; } #b-tob-t-19:checked ~ * .c-ck-fr[data-blk="3"] { display:grid; } #b-tob-t-20:checked ~ * .c-ck-fr[data-blk="4"] { display:grid; } #b-tob-t-21:checked ~ * .c-ck-fr[data-blk="4"] { display:grid; } #b-tob-t-22:checked ~ * .c-ck-fr[data-blk="4"] { display:grid; } #b-tob-t-23:checked ~ * .c-ck-fr[data-blk="4"] { display:grid; } #b-tob-t-24:checked ~ * .c-ck-fr[data-blk="4"] { display:grid; } #b-tob-t-25:checked ~ * .c-ck-fr[data-blk="5"] { display:grid; } #b-tob-t-26:checked ~ * .c-ck-fr[data-blk="5"] { display:grid; } #b-tob-t-27:checked ~ * .c-ck-fr[data-blk="5"] { display:grid; } #b-tob-t-28:checked ~ * .c-ck-fr[data-blk="5"] { display:grid; } #b-tob-t-29:checked ~ * .c-ck-fr[data-blk="5"] { display:grid; } #b-tob-t-30:checked ~ * .c-ck-fr[data-blk="6"] { display:grid; } #b-tob-t-31:checked ~ * .c-ck-fr[data-blk="6"] { display:grid; } #b-tob-t-32:checked ~ * .c-ck-fr[data-blk="6"] { display:grid; } #b-tob-t-33:checked ~ * .c-ck-fr[data-blk="6"] { display:grid; } #b-tob-t-34:checked ~ * .c-ck-fr[data-blk="6"] { display:grid; } #b-tob-t-35:checked ~ * .c-ck-fr[data-blk="7"] { display:grid; } #b-tob-t-36:checked ~ * .c-ck-fr[data-blk="7"] { display:grid; } #b-tob-t-37:checked ~ * .c-ck-fr[data-blk="7"] { display:grid; } #b-tob-t-38:checked ~ * .c-ck-fr[data-blk="7"] { display:grid; } #b-tob-t-39:checked ~ * .c-ck-fr[data-blk="7"] { display:grid; } #b-tob-t-40:checked ~ * .c-ck-fr[data-blk="8"] { display:grid; } #b-tob-t-41:checked ~ * .c-ck-fr[data-blk="8"] { display:grid; } #b-tob-t-42:checked ~ * .c-ck-fr[data-blk="8"] { display:grid; } #b-tob-t-43:checked ~ * .c-ck-fr[data-blk="8"] { display:grid; } #b-tob-t-44:checked ~ * .c-ck-fr[data-blk="8"] { display:grid; } #b-tob-t-45:checked ~ * .c-ck-fr[data-blk="9"] { display:grid; } #b-tob-t-46:checked ~ * .c-ck-fr[data-blk="9"] { display:grid; } #b-tob-t-47:checked ~ * .c-ck-fr[data-blk="9"] { display:grid; } #b-tob-t-48:checked ~ * .c-ck-fr[data-blk="9"] { display:grid; } #b-tob-t-49:checked ~ * .c-ck-fr[data-blk="9"] { display:grid; } #b-tob-t-50:checked ~ * .c-ck-fr[data-blk="10"] { display:grid; } #b-tob-t-51:checked ~ * .c-ck-fr[data-blk="10"] { display:grid; } #b-tob-t-52:checked ~ * .c-ck-fr[data-blk="10"] { display:grid; } #b-tob-t-53:checked ~ * .c-ck-fr[data-blk="10"] { display:grid; } #b-tob-t-54:checked ~ * .c-ck-fr[data-blk="10"] { display:grid; } #b-tob-t-55:checked ~ * .c-ck-fr[data-blk="11"] { display:grid; } #b-tob-t-56:checked ~ * .c-ck-fr[data-blk="11"] { display:grid; } #b-tob-t-57:checked ~ * .c-ck-fr[data-blk="11"] { display:grid; } #b-tob-t-58:checked ~ * .c-ck-fr[data-blk="11"] { display:grid; } #b-tob-t-59:checked ~ * .c-ck-fr[data-blk="11"] { display:grid; } #b-tob-t-1:checked ~ * .c-ck-m[for="b-tob-t-0"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-2:checked ~ * .c-ck-m[for="b-tob-t-0"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-3:checked ~ * .c-ck-m[for="b-tob-t-0"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-4:checked ~ * .c-ck-m[for="b-tob-t-0"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-6:checked ~ * .c-ck-m[for="b-tob-t-5"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-7:checked ~ * .c-ck-m[for="b-tob-t-5"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-8:checked ~ * .c-ck-m[for="b-tob-t-5"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-9:checked ~ * .c-ck-m[for="b-tob-t-5"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-11:checked ~ * .c-ck-m[for="b-tob-t-10"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-12:checked ~ * .c-ck-m[for="b-tob-t-10"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-13:checked ~ * .c-ck-m[for="b-tob-t-10"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-14:checked ~ * .c-ck-m[for="b-tob-t-10"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-16:checked ~ * .c-ck-m[for="b-tob-t-15"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-17:checked ~ * .c-ck-m[for="b-tob-t-15"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-18:checked ~ * .c-ck-m[for="b-tob-t-15"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-19:checked ~ * .c-ck-m[for="b-tob-t-15"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-21:checked ~ * .c-ck-m[for="b-tob-t-20"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-22:checked ~ * .c-ck-m[for="b-tob-t-20"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-23:checked ~ * .c-ck-m[for="b-tob-t-20"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-24:checked ~ * .c-ck-m[for="b-tob-t-20"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-26:checked ~ * .c-ck-m[for="b-tob-t-25"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-27:checked ~ * .c-ck-m[for="b-tob-t-25"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-28:checked ~ * .c-ck-m[for="b-tob-t-25"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-29:checked ~ * .c-ck-m[for="b-tob-t-25"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-31:checked ~ * .c-ck-m[for="b-tob-t-30"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-32:checked ~ * .c-ck-m[for="b-tob-t-30"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-33:checked ~ * .c-ck-m[for="b-tob-t-30"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-34:checked ~ * .c-ck-m[for="b-tob-t-30"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-36:checked ~ * .c-ck-m[for="b-tob-t-35"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-37:checked ~ * .c-ck-m[for="b-tob-t-35"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-38:checked ~ * .c-ck-m[for="b-tob-t-35"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-39:checked ~ * .c-ck-m[for="b-tob-t-35"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-41:checked ~ * .c-ck-m[for="b-tob-t-40"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-42:checked ~ * .c-ck-m[for="b-tob-t-40"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-43:checked ~ * .c-ck-m[for="b-tob-t-40"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-44:checked ~ * .c-ck-m[for="b-tob-t-40"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-46:checked ~ * .c-ck-m[for="b-tob-t-45"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-47:checked ~ * .c-ck-m[for="b-tob-t-45"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-48:checked ~ * .c-ck-m[for="b-tob-t-45"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-49:checked ~ * .c-ck-m[for="b-tob-t-45"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-51:checked ~ * .c-ck-m[for="b-tob-t-50"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-52:checked ~ * .c-ck-m[for="b-tob-t-50"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-53:checked ~ * .c-ck-m[for="b-tob-t-50"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-54:checked ~ * .c-ck-m[for="b-tob-t-50"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-56:checked ~ * .c-ck-m[for="b-tob-t-55"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-57:checked ~ * .c-ck-m[for="b-tob-t-55"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-58:checked ~ * .c-ck-m[for="b-tob-t-55"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-t-59:checked ~ * .c-ck-m[for="b-tob-t-55"] { background:var(--gold-bg); border-color:var(--gold-lt); color:var(--gold-dk); } #b-tob-m-am:checked ~ * label[for="b-tob-m-am"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-m-am:focus-visible ~ * label[for="b-tob-m-am"] { outline:2px solid var(--gold); outline-offset:2px; } #b-tob-m-am:checked ~ * .c-tp-om::after { content:"AM"; } #b-tob-m-pm:checked ~ * label[for="b-tob-m-pm"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #b-tob-m-pm:focus-visible ~ * label[for="b-tob-m-pm"] { outline:2px solid var(--gold); outline-offset:2px; } #b-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; } /* ── 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; }#kfaq-start:checked ~ * .h-fq-p-start { display:block; } #kfaq-start:focus-visible ~ * label[for="kfaq-start"] { outline:2px solid var(--gold); outline-offset:2px; } #kfaq-start:checked ~ * label[for="kfaq-start"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #kfaq-start:checked ~ * label[for="kfaq-start"] i { background:var(--gold-solid-text); color:var(--gold-solid); } #kfaq-kundli:checked ~ * .h-fq-p-kundli { display:block; } #kfaq-kundli:focus-visible ~ * label[for="kfaq-kundli"] { outline:2px solid var(--gold); outline-offset:2px; } #kfaq-kundli:checked ~ * label[for="kfaq-kundli"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #kfaq-kundli:checked ~ * label[for="kfaq-kundli"] i { background:var(--gold-solid-text); color:var(--gold-solid); } /* Everything on the kundli is namespaced j-. The shell owns c-, h-, l-, s- and sg-; restyling a bare class one of those owns is what checks/clash.py exists to catch, and it has caught it twice. */ /* The example caption lives under the form in the hero — see the aside in pages/kundli.py. Nothing here styles it. */ /* ── the tabs ───────────────────────────────────────────────── */ .j-tabs { margin-top:24px; } /* Zero-height scroll anchors, one per tab, sitting immediately above the strip. :target lands HERE rather than on a panel — target a panel and the browser scrolls that panel's top edge to the top of the viewport, which throws the strip you just clicked off the screen every single time. The margin is the sticky site header plus a little air. */ .j-tt { display:block; height:0; scroll-margin-top:82px; } /* ── z-index 4, AND THE 40 IT WAS IS WHY THE DRAWER LOST ── .d-rail is the phone drawer at z-index:40 and its scrim is 30. This strip was 40 as well, and equal z-index is settled by DOM order — the rail is written before the column that holds this — so the tabs painted straight over an open drawer. 4, not 40: the only thing this has to sit above is the page scrolling under it, and it has to sit UNDER .d-top (5), which it tucks beneath at top:60px. Above 5 it would cover the site header on the way past. */ .j-tn { position:sticky; top:60px; z-index:4; display:flex; gap:8px; margin:0 0 8px; padding:10px 0; overflow-x:auto; overflow-y:hidden; background:var(--cream); border-bottom:1px solid var(--line); scrollbar-width:none; } .j-tn::-webkit-scrollbar { display:none; } .j-tn a { flex:none; display:flex; flex-direction:column; justify-content:center; gap:1px; min-height:44px; padding:6px 15px; text-decoration:none; border:1px solid var(--line); border-radius:var(--r-pill); background:var(--surface); } .j-tn a > b { font-size:13.5px; font-weight:650; color:var(--ink-2); white-space:nowrap; } .j-tn a > i { font-style:normal; font-size:11px; color:var(--ink-3); white-space:nowrap; } .j-tn a:hover { border-color:var(--gold-lt); } /* Which tab is open by default, and which link is lit for it, are generated from DEFAULT_TAB — see tab_css(). Nothing here names a tab. */ .j-tp { display:none; } /* The panel's own h2. The tab link above already names it and the panel opens with a visible section head of its own, so a third printing of the same words would be noise — but the heading has to EXIST for the document outline and for aria-labelledby to point at something. */ .j-tp-h { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } .j-gap { height:8px; } @media (max-width:559px) { /* One line on a phone. The sub-label is a nicety and the strip has to stay under 44px of a 640px screen. */ .j-tn a > i { display:none; } .j-tn a { padding:9px 14px; } } /* PRINTING. Five tabs would otherwise print as one, and a kundli somebody prints for their pandit ji with four fifths missing is worse than no print stylesheet at all. Every panel, and every one of the twenty-three vargas, because a printed janam kundli traditionally carries them. */ @media print { .j-tn { display:none; } .j-tt { display:none; } .j-tp { display:block !important; } .j-cp { display:block !important; break-inside:avoid; } .j-ctabs { display:none; } .j-tabs { margin-top:0; } } /* An explainer, not body copy. At 14px/1.75 in --ink-2 over 68ch these read as the point of the section; they are the caption under the point, and the thing they caption is the table or the drawing below them. */ .j-note { max-width:62ch; margin:-8px 0 18px; font-size:13px; line-height:1.7; color:var(--ink-3); } .j-note b { color:var(--ink-2); font-weight:650; } .j-sub { display:block; font-style:normal; font-size:11.5px; color:var(--ink-3); margin-top:2px; } /* ── the lagna band ─────────────────────────────────────────── */ .j-lb { padding:22px 24px 18px; border:1px solid var(--gold-lt); border-radius:var(--r-card); background:var(--gold-bg); margin-bottom:20px; } .j-lb-top { display:grid; gap:20px 28px; grid-template-columns:1fr; } @media (min-width:880px) { /* The two that lead take more room than the two that follow. */ /* start, not center. Centred, the shorter pair floats against the taller one and the four eyebrow labels sit on two different lines 7px apart — close enough to read as a mistake rather than as a decision. */ .j-lb-top { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:start; } } .j-lb-lead, .j-lb-rest { display:grid; gap:18px 22px; grid-template-columns:repeat(2,minmax(0,1fr)); min-width:0; } .j-lb-l, .j-lb-s { min-width:0; } .j-lb-l > b { display:block; font-family:var(--font-serif); font-size:30px; font-weight:600; line-height:1.12; color:var(--gold-dk); margin:5px 0 3px; } /* Half the size and in the ink ramp, not in gold. Four values in 26px gold was four things shouting at the same volume. */ .j-lb-s > b { display:block; font-family:var(--font-serif); font-size:19px; font-weight:600; line-height:1.2; color:var(--ink); margin:4px 0 2px; } .j-lb-l > i, .j-lb-s > i { display:block; font-style:normal; font-size:12.5px; color:var(--ink-2); } /* The settings, as four facts rather than one mono sentence. Not hidden: the section under this page argues that two sites disagree because they pick different ones. */ .j-lb-f { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; padding-top:16px; border-top:1px solid var(--gold-lt); } .j-lb-f > span { display:flex; align-items:baseline; gap:6px; padding:5px 11px; border-radius:var(--r-pill); border:1px solid var(--gold-lt); background:var(--surface); font-size:12px; color:var(--ink); } .j-lb-f i { font-style:normal; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); } @media (max-width:520px) { /* TWO ACROSS, NOT ONE. This flattened both pairs to a single column, so the four facts a kundli opens with — lagna, rashi, nakshatra, surya — were four full-width rows and the section was a column of headings before the chart itself. They stay in their pairs: the two that lead above the two that follow, two on each line. The lead type comes down again to fit a half-width column, and the sub lines wrap rather than clip, since a nakshatra plus its pada and lord is longer than a sign name. */ .j-lb-lead, .j-lb-rest { gap:14px 16px; } .j-lb-l > b { font-size:21px; } .j-lb-s > b { font-size:16px; } .j-lb-l > i, .j-lb-s > i { overflow-wrap:break-word; } } /* Below 360 there is not room for two 26-character sub lines side by side, and the pair goes back to one column — the same floor the report shelf uses, and for the same reason. */ @media (max-width:359px) { .j-lb-lead, .j-lb-rest { grid-template-columns:1fr; } } /* ── the two main charts ────────────────────────────────────── */ .j-ch-two { display:grid; gap:18px; grid-template-columns:1fr; align-items:stretch; } @media (min-width:820px) { .j-ch-two { grid-template-columns:1fr 1fr; } } .j-ch { min-width:0; margin:0; display:flex; flex-direction:column; gap:14px; padding:20px 22px 22px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); } .j-ch figcaption > b { display:block; font-family:var(--font-serif); font-size:21px; font-weight:600; color:var(--ink); margin:5px 0 2px; } .j-ch figcaption > i { display:block; font-style:normal; font-size:13px; color:var(--gold-dk); font-weight:600; } .j-ch .c-nc { max-width:none; align-self:center; } .j-ch > p { margin:auto 0 0; font-size:13px; line-height:1.65; color:var(--ink-2); } /* ── legend ─────────────────────────────────────────────────── */ .j-leg { display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; margin-top:18px; padding:14px 16px; border:1px solid var(--line-soft); border-radius:var(--r-in); background:var(--surface-2); } .j-leg > span { display:flex; align-items:baseline; gap:6px; font-size:12.5px; color:var(--ink-2); } .j-leg > span > b { font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--ink); } .j-leg-n { flex-basis:100%; display:block; font-size:12.5px; line-height:1.7; color:var(--ink-3); } /* ── tables ─────────────────────────────────────────────────── */ .j-tbl { border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); overflow:auto; } .j-tbl table { width:100%; border-collapse:collapse; font-size:13px; min-width:640px; } /* Eight columns carrying eleven fields need the room; below this the wrapper scrolls sideways, which is what it is for. */ .j-tbl-pl table { min-width:900px; } /* The header row is NOT sticky, and the rule that claimed it was is gone. .j-tbl is overflow:auto for the sideways scroll a nine-column table needs on a phone, and an ancestor with overflow resolves sticky against ITSELF rather than the viewport — so `top:0` pinned the row to the top of a box that never scrolls vertically, which is to say it did nothing at all. It measured 406px above the fold. .q-tbl on the calculators gets away with the same rule because it also caps max-height, so its box really is a scrollport; these tables are nine and twelve rows and do not want to be a scrollbox inside a page. */ .j-tbl thead th { background:var(--surface); text-align:left; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); font-weight:400; padding:12px 14px; border-bottom:1px solid var(--line); white-space:nowrap; } .j-tbl tbody th { text-align:left; font-weight:600; color:var(--ink); padding:11px 14px; border-bottom:1px solid var(--line-soft); white-space:nowrap; } .j-tbl tbody th > b { display:block; font-weight:650; } .j-tbl tbody th > i { display:block; font-style:normal; font-size:11.5px; font-weight:400; color:var(--ink-3); margin-top:1px; } .j-tbl td { padding:11px 14px; border-bottom:1px solid var(--line-soft); color:var(--ink-2); vertical-align:top; } .j-tbl tbody tr:last-child > * { border-bottom:0; } .j-num { font-family:var(--font-mono); font-variant-numeric:tabular-nums; white-space:nowrap; } .j-mean { color:var(--ink-3); font-size:12.5px; line-height:1.55; min-width:190px; } .j-tbl-sm table { min-width:260px; } /* The row that is yours — the first bhava, the running mahadasha. Gold ground, and the left rule so it survives a horizontal scroll that puts the tinted cells off-screen. */ .j-mine > * { background:var(--gold-bg); } .j-mine > :first-child { box-shadow:inset 3px 0 0 var(--gold); } .j-g { display:inline-block; padding:2px 7px; margin:0 4px 4px 0; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--surface-2); font-family:var(--font-mono); font-size:11px; color:var(--ink); } /* Dignity. The one place colour carries meaning on this page, and it is the product's own three semantic tokens rather than a fourth palette. Each pairs its own -bg, which is what makes them clear 4.5:1 in both themes. */ .j-dig { display:inline-block; padding:2px 9px; border-radius:var(--r-pill); font-size:11.5px; font-weight:600; white-space:nowrap; background:var(--surface-2); color:var(--ink-2); } .j-dig-good { background:var(--good-bg); color:var(--good); } .j-dig-mid { background:var(--mid-bg); color:var(--mid); } .j-dig-bad { background:var(--bad-bg); color:var(--bad); } .j-st { display:inline-block; padding:2px 8px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--surface-2); font-size:11px; font-style:normal; color:var(--ink-2); white-space:nowrap; } .j-st-w { border-color:transparent; background:var(--mid-bg); color:var(--mid); } .j-st-good { border-color:transparent; background:var(--good-bg); color:var(--good); } .j-st-mid { border-color:transparent; background:var(--mid-bg); color:var(--mid); } .j-st-r { border-color:var(--gold); background:var(--gold-bg); color:var(--gold-dk); font-weight:600; } /* ── the graha table ────────────────────────────────────────── */ /* The dignity spine. Six columns of flat text told you Venus was Moolatrikona and Jupiter was in an enemy rashi in the same weight as everything else; a 3px rule down the left of the row says it before you have read a word, and the chip in the last column says which. This is the only colour in the table and it is the product's own three semantic tokens, not a fourth palette. */ Each tone rule is written at .j-tbl-pl depth on purpose: `.j-pl-good > th` alone is (0,1,1) against the base's (0,2,2), so the base won and all nine spines painted --line. The spine was invisible in the first build. */ .j-tbl-pl tbody th { box-shadow:inset 3px 0 0 var(--line); } .j-tbl-pl .j-pl-good > th { box-shadow:inset 3px 0 0 var(--good); } .j-tbl-pl .j-pl-mid > th { box-shadow:inset 3px 0 0 var(--mid); } .j-tbl-pl .j-pl-bad > th { box-shadow:inset 3px 0 0 var(--bad); } .j-tbl-pl tbody tr:nth-child(even) > * { background:var(--surface-2); } .j-tbl-pl td > b { display:block; font-weight:600; color:var(--ink); } .j-tbl-pl td > b em { font-style:normal; font-weight:400; color:var(--ink-3); } /* The drawing and the name, side by side. iconset draws the nine rather than setting them in a font — see the note above GLYPH in lib/iconset.py for why the Unicode graha block is not trustworthy on Android. */ .j-tbl-pl tbody th { display:flex; align-items:center; gap:9px; } .j-pl-i { display:grid; place-items:center; width:26px; height:26px; flex:none; border-radius:50%; border:1px solid var(--line); background:var(--surface-2); color:var(--ink-2); } /* The name and its Sanskrit, stacked. .j-tbl tbody th > b sets display:block but these are grandchildren of the th now that the drawing shares the cell, so the child combinator stopped matching and the two ran together as "SunSurya". */ .j-pl-n { min-width:0; } .j-pl-n > b { display:block; font-weight:650; color:var(--ink); } .j-pl-n > i { display:block; font-style:normal; font-size:11.5px; font-weight:400; color:var(--ink-3); margin-top:1px; } /* The bhava is the answer to "where is my Saturn", so it is a disc rather than a digit in a column of digits. */ .j-hn { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; border:1px solid var(--gold-lt); background:var(--gold-bg); font-family:var(--font-mono); font-size:13px; font-weight:700; color:var(--gold-dk); } .j-key { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:12px; } .j-key > span { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-3); } .j-key i { width:14px; height:3px; border-radius:2px; flex:none; } .j-key-good { background:var(--good); } .j-key-mid { background:var(--mid); } .j-key-bad { background:var(--bad); } .j-key-na { background:var(--line); } /* ── the twelve bhavas ──────────────────────────────────────── */ .j-bh-g12 { display:grid; gap:12px; grid-template-columns:1fr; } @media (min-width:560px) { .j-bh-g12 { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (min-width:900px) { .j-bh-g12 { grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (min-width:1120px) { .j-bh-g12 { grid-template-columns:repeat(4,minmax(0,1fr)); } } .j-bh { position:relative; overflow:hidden; min-width:0; padding:16px 18px 15px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); } /* The bhava number, large and set back. It is the thing the eye lands on and it is also the one value on the card that never needs reading twice. */ .j-bh-n { position:absolute; top:2px; right:12px; font-family:var(--font-serif); font-size:56px; font-weight:600; line-height:1; color:var(--line); pointer-events:none; } .j-bh > b { position:relative; display:block; font-family:var(--font-serif); font-size:20px; font-weight:600; color:var(--ink); margin:5px 0 1px; } .j-bh > i { position:relative; display:block; font-style:normal; font-size:12px; color:var(--ink-3); } .j-bh-g { position:relative; display:flex; flex-wrap:wrap; gap:5px; margin:12px 0 0; min-height:24px; } .j-bh-g em { font-style:normal; font-size:12px; color:var(--ink-3); } .j-bh > p { position:relative; margin:11px 0 0; padding-top:10px; border-top:1px solid var(--line-soft); font-size:12.5px; line-height:1.55; color:var(--ink-2); } /* The lagna. Everything is counted from it, so it is the one card that is not on --surface. */ .j-bh-on { border-color:var(--gold-lt); background:var(--gold-bg); } .j-bh-on .j-bh-n { color:var(--gold-lt); } .j-bh-on > b { color:var(--gold-dk); } /* A bhava with nothing in it is not a defect, and it should not read as a card that failed to load — it recedes rather than showing an em dash. */ .j-bh-mt { background:var(--surface-2); } /* ── the day you were born ──────────────────────────────────── */ .j-dy { margin:0 0 20px; } .j-dy-b0 { position:relative; height:40px; border-radius:var(--r-sm); background:var(--surface-2); border:1px solid var(--line); overflow:visible; } /* --gold-lt, not --gold-bg. The first version drew daylight in --gold-bg on a --surface-2 track, which measures 1.02:1 against it — the band was geometrically correct and completely invisible, and all a reader could see were the two hairline borders. A band nobody can see is not a band. */ .j-dy-day { position:absolute; top:0; bottom:0; background:var(--gold-lt); } /* Rahu kaal is hatched rather than filled: it is a window to avoid, not a value, and a solid band the same weight as daylight would read as another phase of the day. */ .j-dy-rk { position:absolute; top:0; bottom:0; background:repeating-linear-gradient(135deg, var(--mid) 0 3px, transparent 3px 7px); border-left:1px solid var(--mid); border-right:1px solid var(--mid); } .j-dy-b { position:absolute; top:-5px; bottom:-5px; width:0; } .j-dy-b > b { position:absolute; top:0; bottom:0; left:-1px; width:2px; background:var(--ink); } .j-dy-b i { position:absolute; left:50%; top:100%; transform:translateX(-50%); margin-top:5px; white-space:nowrap; font-style:normal; font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--ink); } .j-dy-t { position:relative; height:16px; margin-top:22px; } .j-dy-t > span { position:absolute; transform:translateX(-50%); font-size:11px; color:var(--ink-3); white-space:nowrap; } .j-dy-k { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:10px; } .j-dy-k > span { display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-3); } .j-dy-k i { width:14px; height:10px; border-radius:2px; flex:none; border:1px solid var(--line); } .j-dy-kd { background:var(--gold-lt); border-color:var(--gold-lt); } .j-dy-kr { border-color:var(--mid); background:repeating-linear-gradient( 135deg, var(--mid) 0 3px, transparent 3px 7px); } .j-dy-kn { background:var(--surface-2); } /* ── panchang / avakhada ────────────────────────────────────── */ .j-two { display:grid; gap:18px; grid-template-columns:1fr; align-items:stretch; } @media (min-width:880px) { .j-two { grid-template-columns:1fr 1fr; } } .j-card { min-width:0; padding:20px 22px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); } .j-card-h { margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--line-soft); } .j-card-h > b { display:block; font-family:var(--font-serif); font-size:19px; font-weight:600; color:var(--ink); } .j-card-h > i { display:block; font-style:normal; font-size:13px; line-height:1.6; color:var(--ink-3); margin-top:4px; } .j-kvs { display:grid; gap:14px 18px; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); } .j-kv { min-width:0; } .j-kv > b { display:block; font-size:14.5px; font-weight:600; color:var(--ink); margin-top:3px; } /* ── the chart gallery ──────────────────────────────────────── */ .j-gal { display:grid; gap:20px; } .j-ctg + .j-ctg { margin-top:14px; } .j-cts { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; } .j-ct { display:flex; flex-direction:column; gap:1px; min-width:62px; padding:8px 11px; border:1px solid var(--line); border-radius:var(--r-in); background:var(--surface); cursor:pointer; } .j-ct > b { font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--ink); } .j-ct > i { font-style:normal; font-size:10.5px; color:var(--ink-3); } .j-ct:hover { border-color:var(--gold-lt); } /* The checked state is generated by ui.selectable_css — it sets the gold border and ground on label[for=...] for all twenty-three at once. */ /* All twenty-three stacked in one grid cell, only the checked one shown — so the section's height does not jump as you page through them. */ .j-cpanels { display:grid; } .j-cp { display:none; grid-area:1/1; } .j-cp-in { display:grid; gap:24px; align-items:center; grid-template-columns:1fr; padding:22px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); } @media (min-width:820px) { /* Chart first and fixed; the reading takes whatever is left. */ .j-cp-in { grid-template-columns:minmax(0,360px) minmax(0,1fr); align-items:start; } } .j-cp-i > b { display:block; font-family:var(--font-serif); font-size:23px; font-weight:600; color:var(--ink); margin:5px 0 8px; } .j-cp-i > p { margin:0; font-size:14px; line-height:1.7; color:var(--ink-2); max-width:52ch; } .j-cp-d { margin:0; display:flex; flex-direction:column; gap:12px; align-items:center; } .j-cp-d .c-nc { max-width:360px; } .j-cp-d figcaption { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px; font-size:12.5px; color:var(--ink-3); } .j-cp-d figcaption b { color:var(--gold-dk); font-weight:650; } /* Where the grahas landed in the chart on the right. Reading a varga off a diamond means counting bhavas round from the top, which is the work this saves — and on the D60 it is the only way the panel is usable. */ /* No cap. It was 430px inside a 750px column, which put 320px of nothing between the table and the drawing — the cap was fixing sparseness caused by the column being too wide, and the column is the right width now. */ .j-cp-t { margin-top:18px; border:1px solid var(--line-soft); border-radius:var(--r-in); overflow:auto; } .j-cp-t tbody tr:nth-child(even) > * { background:var(--surface-2); } .j-cp-t table { width:100%; border-collapse:collapse; font-size:12.5px; min-width:220px; } .j-cp-t thead th { text-align:left; font-family:var(--font-mono); font-size:9px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); font-weight:400; padding:8px 12px; border-bottom:1px solid var(--line-soft); } .j-cp-t tbody th { text-align:left; font-weight:600; color:var(--ink); padding:6px 12px; white-space:nowrap; } .j-cp-t td { padding:6px 12px; color:var(--ink-2); } /* A graha that moved. The arrow column is 1ch wide and does the work; the ink on the row does the rest, so the nine can be scanned rather than compared name by name. */ .j-cp-x { width:1px; padding-left:0; color:var(--gold-dk); font-size:13px; } .j-cp-mv > th, .j-cp-mv > td { color:var(--ink); font-weight:600; } .j-cp-n { margin:10px 0 0; font-size:12px; color:var(--ink-3); } .j-cp-n b { color:var(--ink-2); font-weight:650; } /* ── doshas ─────────────────────────────────────────────────── */ .j-v-g { display:grid; gap:16px; grid-template-columns:1fr; align-items:stretch; margin-bottom:26px; } @media (min-width:840px) { .j-v-g { grid-template-columns:repeat(3,1fr); } } .j-v { min-width:0; display:flex; flex-direction:column; padding:20px 22px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); } .j-v-h > b { display:block; font-family:var(--font-serif); font-size:30px; font-weight:600; line-height:1.1; color:var(--ink); margin:5px 0 4px; } .j-v-h > i { display:block; font-style:normal; font-size:12.5px; line-height:1.6; color:var(--ink-2); } /* ── the dosha instruments ────────────────────────────────── Each dosha is a rule about a countable thing and each rule draws differently: mangal is three reference points, kaal sarp is seven grahas inside an arc or not, sade sati is three phases of two and a half years. A shared label/value grid described all three and showed none of them. */ .j-vz { margin-top:16px; padding-top:15px; border-top:1px solid var(--line-soft); } .j-vz-t { margin:0 0 12px; font-size:12.5px; line-height:1.5; color:var(--ink-3); } .j-vz-t b { color:var(--ink); font-weight:650; } .j-vz-n { margin:11px 0 0; font-size:12.5px; line-height:1.55; color:var(--ink-3); } .j-vz-n b { color:var(--ink); font-weight:700; } /* mangal — the three places Mars is counted from */ .j-vz-g { display:grid; gap:7px; } .j-vz-r { display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; padding:8px 11px; border-radius:var(--r-in); border:1px solid var(--line); background:var(--surface); } .j-vz-r > .h-f-l { flex:1; min-width:90px; } .j-vz-r > b { font-size:13px; font-weight:650; color:var(--ink); } .j-vz-r > i { font-style:normal; font-size:11px; color:var(--ink-3); } .j-vz-on { border-color:var(--mid); background:var(--mid-bg); } .j-vz-on > b, .j-vz-on > i { color:var(--mid); } .j-vz-sc { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px; } .j-vz-sc > div { display:flex; gap:4px; } .j-vz-s { padding:3px 10px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--surface); font-size:11px; color:var(--ink-3); } .j-vz-s-on { border-color:var(--mid); background:var(--mid); color:var(--pill-text); font-weight:650; } /* kaal sarp — seven pips, filled where the graha is inside the arc */ .j-vz-ps { display:flex; flex-wrap:wrap; gap:6px; } .j-vz-p { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; border:1px dashed var(--line); background:var(--surface); font-family:var(--font-mono); font-size:11px; color:var(--ink-3); } .j-vz-p-on { border-style:solid; border-color:var(--gold); background:var(--gold-solid); color:var(--gold-solid-text); font-weight:700; } /* sade sati — the three phases, the running one lit */ .j-vz-phs { display:grid; gap:6px; grid-template-columns:repeat(3,1fr); } .j-vz-ph { min-width:0; padding:9px 9px 10px; border-radius:var(--r-in); border:1px solid var(--line); background:var(--surface); } .j-vz-ph > b { display:block; font-size:12.5px; font-weight:650; color:var(--ink); margin:3px 0 2px; } .j-vz-ph > i { display:block; font-style:normal; font-family:var(--font-mono); font-size:10px; line-height:1.4; color:var(--ink-3); } .j-vz-ph-on { border-color:var(--gold); background:var(--gold-solid); } .j-vz-ph-on > b, .j-vz-ph-on > i, .j-vz-ph-on > .h-f-l { color:var(--gold-solid-text); } .j-v > 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); } /* Present, and absent. Not red and green: a dosha is a condition with remedies, not an error, and the site's --bad is reserved for things that have actually gone wrong. */ .j-v-mid { border-color:var(--gold-lt); background:var(--gold-bg); } .j-v-mid .j-v-h > b { color:var(--gold-dk); } .j-v-good .j-v-h > b { color:var(--good); } /* ── yogas ──────────────────────────────────────────────────── */ /* Columns, not a grid. Ten yogas in a three-track grid is 3+3+3+1, and the last row was one card beside two thirds of nothing; the cards are also all different lengths, so a grid row is as tall as its longest card and the other two carry the slack. Multi-column packs them and balances the heights. The reading order becomes column-wise, which is the right trade for an unordered set. */ .j-y-g { columns:3 300px; column-gap:14px; } .j-y { break-inside:avoid; margin-bottom:14px; padding:16px 18px 18px; border:1px solid var(--line); border-left:3px solid var(--line); border-radius:var(--r-card); background:var(--surface); } /* Strength as a spine, the same encoding the graha table uses for dignity. Ten cards that differ only in a word are ten cards nobody ranks. */ .j-y-good { border-left-color:var(--good); } .j-y-mid { border-left-color:var(--mid); } .j-y-raja { border-color:var(--gold-lt); background:var(--gold-bg); } .j-y-raja.j-y-good { border-left-color:var(--good); } .j-y-raja.j-y-mid { border-left-color:var(--mid); } .j-y-h { display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; } .j-y-h > b { font-family:var(--font-serif); font-size:18px; font-weight:600; color:var(--ink); } .j-y-hi { font-size:13px; color:var(--ink-3); } .j-y-m { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin:10px 0 0; } .j-y-f { display:block; font-style:normal; font-family:var(--font-mono); font-size:11.5px; line-height:1.6; color:var(--ink-3); margin-top:10px; } .j-y > p { margin:11px 0 0; padding-top:11px; border-top:1px solid var(--line-soft); font-size:13px; line-height:1.7; color:var(--ink-2); } /* The two counts, as the headline they are rather than a clause. */ .j-yc { display:grid; gap:12px; grid-template-columns:1fr; margin-bottom:16px; } @media (min-width:560px) { .j-yc { grid-template-columns:repeat(2,minmax(0,1fr)); } } .j-yc > div { display:flex; align-items:baseline; gap:10px; min-width:0; padding:14px 18px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); } .j-yc > div > b { font-family:var(--font-serif); font-size:32px; font-weight:600; line-height:1; color:var(--gold-dk); } .j-yc > div > span { font-size:13px; line-height:1.45; color:var(--ink-2); } .j-yc > div > span b { color:var(--ink); font-weight:650; } .j-rem-g { display:grid; gap:14px; grid-template-columns:1fr; margin-top:22px; } @media (min-width:720px) { .j-rem-g { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); } } .j-rem { min-width:0; padding:16px 18px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); } .j-rem ul { margin:8px 0 0; padding-left:17px; } .j-rem li { font-size:12.5px; line-height:1.75; color:var(--ink-2); } /* ── dasha ──────────────────────────────────────────────────── */ .j-rb { margin-bottom:22px; } .j-rb-b { display:flex; height:46px; border:1px solid var(--line); border-radius:var(--r-in); overflow:hidden; background:var(--surface); } .j-rb-s { position:relative; display:flex; align-items:center; justify-content:center; min-width:0; background:var(--surface-2); border-right:1px solid var(--line); } .j-rb-s:last-child { border-right:0; } .j-rb-s > b { font-family:var(--font-mono); font-size:10.5px; font-weight:600; color:var(--ink-3); letter-spacing:.02em; } /* Alternating grounds so eighteen periods read as eighteen rather than as one bar with tick marks. Even ones sit a shade back. */ .j-rb-s:nth-child(even) { background:var(--surface); } /* .j-rb-s.j-rb-on, NOT .j-rb-on. A bare class is one specificity point and :nth-child(even) above is two, so on every chart whose running mahadasha happened to land on an even segment the stripe won and the lit cell kept the unlit ground — while `> b` below, having nothing to compete with, still repainted the label to the ON colour. Dark text on the dark ground: the one period the reader is actually in was the only one they could not read. Odd-numbered charts looked perfect, which is why this survived the example. */ .j-rb-s.j-rb-on { background:var(--gold-solid); border-right-color:var(--gold-solid); } .j-rb-s.j-rb-on > b { color:var(--gold-solid-text); font-weight:700; } .j-rb-t { display:flex; justify-content:space-between; margin-top:6px; font-family:var(--font-mono); font-size:11px; color:var(--ink-3); } .j-now { padding:22px 24px; border:1px solid var(--gold-lt); border-radius:var(--r-card); background:var(--gold-bg); margin-bottom:20px; } .j-dls { display:grid; gap:16px; grid-template-columns:1fr; } @media (min-width:660px) { .j-dls { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); } } .j-dl { min-width:0; } .j-dl > b { display:block; font-family:var(--font-serif); font-size:25px; font-weight:600; line-height:1.15; color:var(--gold-dk); margin:4px 0 3px; } .j-dl > i { display:block; font-style:normal; font-family:var(--font-mono); font-size:11.5px; color:var(--ink-2); } .j-now-b { margin:18px 0 0; padding-top:16px; border-top:1px solid var(--gold-lt); font-size:13.5px; line-height:1.75; color:var(--ink-2); } .j-now-b b { color:var(--ink); font-weight:650; } .j-ds-g { display:grid; gap:14px; grid-template-columns:1fr; margin-top:18px; } @media (min-width:760px) { .j-ds-g { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); } } .j-ds { min-width:0; padding:14px 16px; border-radius:var(--r-in); background:var(--surface); } .j-ds > p { margin:6px 0 0; font-size:12.5px; line-height:1.7; color:var(--ink-2); } /* The three sub-levels, side by side. Nine rows and four columns each, so they line up and the drill from years to months to weeks reads across rather than down. */ .j-d-three { display:grid; gap:16px; grid-template-columns:1fr; align-items:start; margin-top:4px; } @media (min-width:700px) { .j-d-three { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (min-width:1060px) { .j-d-three { grid-template-columns:repeat(3,minmax(0,1fr)); } } .j-d-three > * { min-width:0; } .j-tbl-sm table { table-layout:auto; } .j-tbl-sm thead th { padding:10px 11px; vertical-align:bottom; } .j-tbl-sm thead th i { display:block; font-style:normal; margin-top:2px; } .j-tbl-sm thead th b { font-weight:700; color:var(--gold-dk); } .j-tbl-sm td, .j-tbl-sm tbody th { padding:9px 11px; } .j-note-t { margin-top:18px; } /* The mahadasha and antardasha lords read together — same planet, friend, enemy — which the API works out and nothing printed. */ .j-now-p { margin:16px 0 0; padding:12px 14px; border-radius:var(--r-in); background:var(--surface); font-size:13px; line-height:1.65; color:var(--ink-2); } .j-now-p b { color:var(--gold-dk); font-weight:650; } /* The form's status line. By id for the box, by j- class for the two states — .c-help is the shell's and restyling it from a page is what checks/clash.py exists to catch. */ #j-msg { margin-top:10px; } #j-msg:empty { display:none; } .j-busy { color:var(--gold-dk); font-weight:600; } .j-err { color:var(--bad); } #jc-D1:checked ~ .j-cp-D1, #jc-D1:checked ~ * .j-cp-D1 { display:block; } #jc-D1:checked ~ label[for="jc-D1"], #jc-D1:checked ~ * label[for="jc-D1"] { border-color:var(--gold); background:var(--gold-bg); } #jc-D1:focus-visible ~ label[for="jc-D1"], #jc-D1:focus-visible ~ * label[for="jc-D1"] { outline:2px solid var(--gold); outline-offset:2px; } #jc-D9:checked ~ .j-cp-D9, #jc-D9:checked ~ * .j-cp-D9 { display:block; } #jc-D9:checked ~ label[for="jc-D9"], #jc-D9:checked ~ * label[for="jc-D9"] { border-color:var(--gold); background:var(--gold-bg); } #jc-D9:focus-visible ~ label[for="jc-D9"], #jc-D9:focus-visible ~ * label[for="jc-D9"] { outline:2px solid var(--gold); outline-offset:2px; } #jc-chalit:checked ~ .j-cp-chalit, #jc-chalit:checked ~ * .j-cp-chalit { display:block; } #jc-chalit:checked ~ label[for="jc-chalit"], #jc-chalit:checked ~ * label[for="jc-chalit"] { border-color:var(--gold); background:var(--gold-bg); } #jc-chalit:focus-visible ~ label[for="jc-chalit"], #jc-chalit:focus-visible ~ * label[for="jc-chalit"] { outline:2px solid var(--gold); outline-offset:2px; } #jc-sun_chart:checked ~ .j-cp-sun_chart, #jc-sun_chart:checked ~ * .j-cp-sun_chart { display:block; } #jc-sun_chart:checked ~ label[for="jc-sun_chart"], #jc-sun_chart:checked ~ * label[for="jc-sun_chart"] { border-color:var(--gold); background:var(--gold-bg); } #jc-sun_chart:focus-visible ~ label[for="jc-sun_chart"], #jc-sun_chart:focus-visible ~ * label[for="jc-sun_chart"] { outline:2px solid var(--gold); outline-offset:2px; } #jc-moon_chart:checked ~ .j-cp-moon_chart, #jc-moon_chart:checked ~ * .j-cp-moon_chart { display:block; } #jc-moon_chart:checked ~ label[for="jc-moon_chart"], #jc-moon_chart:checked ~ * label[for="jc-moon_chart"] { border-color:var(--gold); background:var(--gold-bg); } #jc-moon_chart:focus-visible ~ label[for="jc-moon_chart"], #jc-moon_chart:focus-visible ~ * label[for="jc-moon_chart"] { outline:2px solid var(--gold); outline-offset:2px; } #jc-D2:checked ~ .j-cp-D2, #jc-D2:checked ~ * .j-cp-D2 { display:block; } #jc-D2:checked ~ label[for="jc-D2"], #jc-D2:checked ~ * label[for="jc-D2"] { border-color:var(--gold); background:var(--gold-bg); } #jc-D2:focus-visible ~ label[for="jc-D2"], #jc-D2:focus-visible ~ * label[for="jc-D2"] { outline:2px solid var(--gold); outline-offset:2px; } #jc-D3:checked ~ .j-cp-D3, #jc-D3:checked ~ * .j-cp-D3 { display:block; } #jc-D3:checked ~ label[for="jc-D3"], #jc-D3:checked ~ * label[for="jc-D3"] { border-color:var(--gold); background:var(--gold-bg); } #jc-D3:focus-visible ~ label[for="jc-D3"], #jc-D3:focus-visible ~ * label[for="jc-D3"] { outline:2px solid var(--gold); outline-offset:2px; } #jc-D4:checked ~ .j-cp-D4, #jc-D4:checked ~ * .j-cp-D4 { display:block; } #jc-D4:checked ~ label[for="jc-D4"], #jc-D4:checked ~ * label[for="jc-D4"] { border-color:var(--gold); background:var(--gold-bg); } #jc-D4:focus-visible ~ label[for="jc-D4"], #jc-D4:focus-visible ~ * label[for="jc-D4"] { outline:2px solid var(--gold); outline-offset:2px; } #jc-D5:checked ~ .j-cp-D5, #jc-D5:checked ~ * .j-cp-D5 { display:block; } #jc-D5:checked ~ label[for="jc-D5"], #jc-D5:checked ~ * label[for="jc-D5"] { border-color:var(--gold); background:var(--gold-bg); } #jc-D5:focus-visible ~ label[for="jc-D5"], #jc-D5:focus-visible ~ * label[for="jc-D5"] { outline:2px solid var(--gold); outline-offset:2px; } #jc-D6:checked ~ .j-cp-D6, #jc-D6:checked ~ * .j-cp-D6 { display:block; } #jc-D6:checked ~ label[for="jc-D6"], #jc-D6:checked ~ * label[for="jc-D6"] { border-color:var(--gold); background:var(--gold-bg); } #jc-D6:focus-visible ~ label[for="jc-D6"], #jc-D6:focus-visible ~ * label[for="jc-D6"] { outline:2px solid var(--gold); outline-offset:2px; } #jc-D7:checked ~ .j-cp-D7, #jc-D7:checked ~ * .j-cp-D7 { display:block; } #jc-D7:checked ~ label[for="jc-D7"], #jc-D7:checked ~ * label[for="jc-D7"] { border-color:var(--gold); background:var(--gold-bg); } #jc-D7:focus-visible ~ label[for="jc-D7"], #jc-D7:focus-visible ~ * label[for="jc-D7"] { outline:2px solid var(--gold); outline-offset:2px; } #jc-D8:checked ~ .j-cp-D8, #jc-D8:checked ~ * .j-cp-D8 { display:block; } #jc-D8:checked ~ label[for="jc-D8"], #jc-D8:checked ~ * label[for="jc-D8"] { border-color:var(--gold); background:var(--gold-bg); } #jc-D8:focus-visible ~ label[for="jc-D8"], #jc-D8:focus-visible ~ * label[for="jc-D8"] { outline:2px solid var(--gold); outline-offset:2px; } #jc-D10:checked ~ .j-cp-D10, #jc-D10:checked ~ * .j-cp-D10 { display:block; } #jc-D10:checked ~ label[for="jc-D10"], #jc-D10:checked ~ * label[for="jc-D10"] { border-color:var(--gold); background:var(--gold-bg); } #jc-D10:focus-visible ~ label[for="jc-D10"], #jc-D10:focus-visible ~ * label[for="jc-D10"] { outline:2px solid var(--gold); outline-offset:2px; } #jc-D11:checked ~ .j-cp-D11, #jc-D11:checked ~ * .j-cp-D11 { display:block; } #jc-D11:checked ~ label[for="jc-D11"], #jc-D11:checked ~ * label[for="jc-D11"] { border-color:var(--gold); background:var(--gold-bg); } #jc-D11:focus-visible ~ label[for="jc-D11"], #jc-D11:focus-visible ~ * label[for="jc-D11"] { outline:2px solid var(--gold); outline-offset:2px; } #jc-D12:checked ~ .j-cp-D12, #jc-D12:checked ~ * .j-cp-D12 { display:block; } #jc-D12:checked ~ label[for="jc-D12"], #jc-D12:checked ~ * label[for="jc-D12"] { border-color:var(--gold); background:var(--gold-bg); } #jc-D12:focus-visible ~ label[for="jc-D12"], #jc-D12:focus-visible ~ * label[for="jc-D12"] { outline:2px solid var(--gold); outline-offset:2px; } #jc-D16:checked ~ .j-cp-D16, #jc-D16:checked ~ * .j-cp-D16 { display:block; } #jc-D16:checked ~ label[for="jc-D16"], #jc-D16:checked ~ * label[for="jc-D16"] { border-color:var(--gold); background:var(--gold-bg); } #jc-D16:focus-visible ~ label[for="jc-D16"], #jc-D16:focus-visible ~ * label[for="jc-D16"] { outline:2px solid var(--gold); outline-offset:2px; } #jc-D20:checked ~ .j-cp-D20, #jc-D20:checked ~ * .j-cp-D20 { display:block; } #jc-D20:checked ~ label[for="jc-D20"], #jc-D20:checked ~ * label[for="jc-D20"] { border-color:var(--gold); background:var(--gold-bg); } #jc-D20:focus-visible ~ label[for="jc-D20"], #jc-D20:focus-visible ~ * label[for="jc-D20"] { outline:2px solid var(--gold); outline-offset:2px; } #jc-D24:checked ~ .j-cp-D24, #jc-D24:checked ~ * .j-cp-D24 { display:block; } #jc-D24:checked ~ label[for="jc-D24"], #jc-D24:checked ~ * label[for="jc-D24"] { border-color:var(--gold); background:var(--gold-bg); } #jc-D24:focus-visible ~ label[for="jc-D24"], #jc-D24:focus-visible ~ * label[for="jc-D24"] { outline:2px solid var(--gold); outline-offset:2px; } #jc-D27:checked ~ .j-cp-D27, #jc-D27:checked ~ * .j-cp-D27 { display:block; } #jc-D27:checked ~ label[for="jc-D27"], #jc-D27:checked ~ * label[for="jc-D27"] { border-color:var(--gold); background:var(--gold-bg); } #jc-D27:focus-visible ~ label[for="jc-D27"], #jc-D27:focus-visible ~ * label[for="jc-D27"] { outline:2px solid var(--gold); outline-offset:2px; } #jc-D30:checked ~ .j-cp-D30, #jc-D30:checked ~ * .j-cp-D30 { display:block; } #jc-D30:checked ~ label[for="jc-D30"], #jc-D30:checked ~ * label[for="jc-D30"] { border-color:var(--gold); background:var(--gold-bg); } #jc-D30:focus-visible ~ label[for="jc-D30"], #jc-D30:focus-visible ~ * label[for="jc-D30"] { outline:2px solid var(--gold); outline-offset:2px; } #jc-D40:checked ~ .j-cp-D40, #jc-D40:checked ~ * .j-cp-D40 { display:block; } #jc-D40:checked ~ label[for="jc-D40"], #jc-D40:checked ~ * label[for="jc-D40"] { border-color:var(--gold); background:var(--gold-bg); } #jc-D40:focus-visible ~ label[for="jc-D40"], #jc-D40:focus-visible ~ * label[for="jc-D40"] { outline:2px solid var(--gold); outline-offset:2px; } #jc-D45:checked ~ .j-cp-D45, #jc-D45:checked ~ * .j-cp-D45 { display:block; } #jc-D45:checked ~ label[for="jc-D45"], #jc-D45:checked ~ * label[for="jc-D45"] { border-color:var(--gold); background:var(--gold-bg); } #jc-D45:focus-visible ~ label[for="jc-D45"], #jc-D45:focus-visible ~ * label[for="jc-D45"] { outline:2px solid var(--gold); outline-offset:2px; } #jc-D60:checked ~ .j-cp-D60, #jc-D60:checked ~ * .j-cp-D60 { display:block; } #jc-D60:checked ~ label[for="jc-D60"], #jc-D60:checked ~ * label[for="jc-D60"] { border-color:var(--gold); background:var(--gold-bg); } #jc-D60:focus-visible ~ label[for="jc-D60"], #jc-D60:focus-visible ~ * label[for="jc-D60"] { outline:2px solid var(--gold); outline-offset:2px; }.j-tp-chart { display:block; } .j-tn a[href="#j-t-chart"] { border-color:var(--gold); background:var(--gold-solid); } .j-tn a[href="#j-t-chart"] > b, .j-tn a[href="#j-t-chart"] > i { color:var(--gold-solid-text); } #j-t-chart:target ~ .j-tps > .j-tp-chart, #j-t-grahas:target ~ .j-tps > .j-tp-grahas, #j-t-vargas:target ~ .j-tps > .j-tp-vargas, #j-t-yogas:target ~ .j-tps > .j-tp-yogas, #j-t-dasha:target ~ .j-tps > .j-tp-dasha { display:block; } #j-t-grahas:target ~ .j-tps > .j-tp-chart, #j-t-vargas:target ~ .j-tps > .j-tp-chart, #j-t-yogas:target ~ .j-tps > .j-tp-chart, #j-t-dasha:target ~ .j-tps > .j-tp-chart { display:none; } #j-t-chart:target ~ .j-tn a[href="#j-t-chart"], #j-t-grahas:target ~ .j-tn a[href="#j-t-grahas"], #j-t-vargas:target ~ .j-tn a[href="#j-t-vargas"], #j-t-yogas:target ~ .j-tn a[href="#j-t-yogas"], #j-t-dasha:target ~ .j-tn a[href="#j-t-dasha"] { border-color:var(--gold); background:var(--gold-solid); } #j-t-chart:target ~ .j-tn a[href="#j-t-chart"] b, #j-t-chart:target ~ .j-tn a[href="#j-t-chart"] i, #j-t-grahas:target ~ .j-tn a[href="#j-t-grahas"] b, #j-t-grahas:target ~ .j-tn a[href="#j-t-grahas"] i, #j-t-vargas:target ~ .j-tn a[href="#j-t-vargas"] b, #j-t-vargas:target ~ .j-tn a[href="#j-t-vargas"] i, #j-t-yogas:target ~ .j-tn a[href="#j-t-yogas"] b, #j-t-yogas:target ~ .j-tn a[href="#j-t-yogas"] i, #j-t-dasha:target ~ .j-tn a[href="#j-t-dasha"] b, #j-t-dasha:target ~ .j-tn a[href="#j-t-dasha"] i { color:var(--gold-solid-text); } #j-t-grahas:target ~ .j-tn a[href="#j-t-chart"], #j-t-vargas:target ~ .j-tn a[href="#j-t-chart"], #j-t-yogas:target ~ .j-tn a[href="#j-t-chart"], #j-t-dasha:target ~ .j-tn a[href="#j-t-chart"] { border-color:var(--line); background:var(--surface); } #j-t-grahas:target ~ .j-tn a[href="#j-t-chart"] b, #j-t-vargas:target ~ .j-tn a[href="#j-t-chart"] b, #j-t-yogas:target ~ .j-tn a[href="#j-t-chart"] b, #j-t-dasha:target ~ .j-tn a[href="#j-t-chart"] b { color:var(--ink-2); } #j-t-grahas:target ~ .j-tn a[href="#j-t-chart"] i, #j-t-vargas:target ~ .j-tn a[href="#j-t-chart"] i, #j-t-yogas:target ~ .j-tn a[href="#j-t-chart"] i, #j-t-dasha:target ~ .j-tn a[href="#j-t-chart"] i { color:var(--ink-3); }