* { 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; } /* ── the header's two menus (language, account) ─────── */ .c-dd { position:relative; } .c-dd > summary { list-style:none; } .c-dd > summary::-webkit-details-marker { display:none; } /* The theme toggle's size and shape (ui .c-th-t), so the three read as one set: 34px under a mouse, 44px under a finger. */ .c-dd-b { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); cursor:pointer; } @media (pointer:coarse) { .c-dd-b { width:44px; height:44px; border-radius:12px; } } .c-dd-b:hover, .c-dd[open] > .c-dd-b { border-color:var(--gold); color:var(--gold-dk); } .c-dd-aa { font-size:13px; font-weight:700; letter-spacing:-.02em; } .c-dd-m { position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%); z-index:60; min-width:170px; padding:6px; border-radius:12px; border:1px solid var(--line); background:var(--surface); box-shadow:0 10px 30px rgba(0,0,0,.14); display:flex; flex-direction:column; gap:2px; } .c-dd-r { left:auto; right:0; transform:none; } .c-dd-i { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; min-height:44px; box-sizing:border-box; font-size:14.5px; color:var(--ink); text-decoration:none; white-space:nowrap; } .c-dd-i i { font-style:normal; width:18px; text-align:center; color:var(--ink-3); } .c-dd-i:hover { background:var(--gold-bg); } .c-dd-i.c-on { color:var(--gold-dk); font-weight:650; } .c-dd-i.c-on i { color:var(--gold-dk); } .l-act-u { display:flex; align-items:center; gap:8px; } /* Theme, language, account and the menu at 320px ran the menu button to the screen's edge, into the 16px gutter every page keeps. */ @media (max-width:359px) { .l-act-u { gap:2px; } } /* The account in the drawer, only where it left the header. */ .c-drawer-acct { display:none; } @media (max-width:359px) { .c-top-r:has(.l-lang) .l-acct { display:none; } .c-drawer-acct { display:grid; gap:4px; padding:2px 0 12px; margin-bottom:8px; border-bottom:1px solid var(--line-soft); } } /* 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); } } /* 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; } /* A price the API could not give takes its chip, and the dot after it, away. */ .s-meta > span:has(> .c-px-gone) { display:none; } .s-meta > span:has(> .c-px-gone) + span::before { display:none; } /* ── 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); } /* The banner: the page's line, then the astrologers and the reports. */ .s-cta.s-pro { display:block; position:relative; overflow:hidden; padding:36px 20px 26px; background:radial-gradient(120% 80% at 50% 0%, var(--gold-bg) 0%, transparent 70%), var(--cream); } @media (min-width:760px) { .s-cta.s-pro { padding:44px 40px 36px; } } /* The line art: faint, behind everything, never in the way. */ .s-pro-deco { position:absolute; top:0; pointer-events:none; display:block; background:var(--gold); opacity:.8; -webkit-mask:var(--m) no-repeat top / contain; mask:var(--m) no-repeat top / contain; } .s-pro-sun { left:0; width:340px; aspect-ratio:340 / 250; -webkit-mask-position:left top; mask-position:left top; } .s-pro-moon { right:0; width:404px; aspect-ratio:404 / 250; -webkit-mask-position:right top; mask-position:right top; } /* Smaller and fainter behind a narrower headline; on a phone, a corner of each, inside the edge. */ @media (max-width:1099px) { .s-pro-sun { width:250px; } .s-pro-moon { width:290px; } } @media (max-width:759px) { .s-pro-deco { opacity:.75; } .s-pro-sun { width:44%; left:-5%; } .s-pro-moon { width:48%; right:-4%; } /* The faces show at the edges, as in the mobile mock: the headline keeps to the middle. */ .s-cta.s-pro .s-pro-h h2 { max-width:78%; margin-inline:auto; } } .s-pro-h { position:relative; text-align:center; max-width:780px; margin:0 auto 28px; } .s-cta.s-pro .s-pro-h h2 { font-size:clamp(28px,4.6vw,46px); line-height:1.08; margin:0; } .s-cta.s-pro .s-pro-h p { margin:12px auto 0; max-width:60ch; font-size:17px; color:var(--ink-2); } .s-pro-go1 { margin-top:20px; display:inline-flex; gap:10px; align-items:center; padding:0 26px; min-height:52px; font-size:16px; box-shadow:0 8px 22px -12px rgba(90,55,10,.55); } .s-pro-g { position:relative; display:grid; gap:18px; grid-template-columns:minmax(0,1fr); } /* Side by side from 1000px: narrower, the covers shrink under the chat card and no amount of tightening makes the two end together. */ @media (min-width:1000px) { .s-pro-g { grid-template-columns:repeat(2,minmax(0,1fr)); } } .s-pro-c { display:flex; flex-direction:column; align-items:flex-start; gap:10px; min-width:0; padding:22px 20px; border:1px solid var(--line); border-radius:20px; background:var(--surface); color:inherit; text-decoration:none; transition:border-color .15s; } @media (min-width:760px) { .s-pro-c { padding:26px 28px; } } .s-pro-c:hover { border-color:var(--gold-lt); } .s-pro-c h3 { font-family:var(--font-serif); font-size:clamp(24px,2.6vw,32px); font-weight:600; line-height:1.15; margin:6px 0 0; color:var(--ink); } .s-pro-t { font-size:15px; line-height:1.55; color:var(--ink-2); } .s-pro-p { font-size:15px; font-weight:600; color:var(--gold-dk); } .s-pro-fs { display:flex; text-decoration:none; } .s-pro-f { width:68px; height:68px; border-radius:50%; overflow:hidden; border:3px solid var(--surface); margin-left:-10px; background:var(--surface-2); box-shadow:0 0 0 1px var(--gold-lt); } .s-pro-f:first-child { margin-left:0; } /* Six across a phone's card: 44px at 320, 54 from 380. */ @media (max-width:759px) { .s-pro-f { width:44px; height:44px; margin-left:-10px; border-width:2px; } } @media (min-width:380px) and (max-width:759px) { .s-pro-f { width:54px; height:54px; margin-left:-8px; } } @media (min-width:760px) { .s-pro-f { width:76px; height:76px; margin-left:-12px; } } .s-pro-f img { width:100%; height:100%; object-fit:cover; display:block; } /* The four, as tiles with their subject's icon. */ .s-pro-rs { display:grid; gap:8px; grid-template-columns:repeat(2,minmax(0,1fr)); align-self:stretch; margin-top:4px; } @media (min-width:480px) { .s-pro-rs { gap:10px; } } .s-pro-r { display:flex; align-items:center; gap:10px; min-width:0; padding:11px 12px; border-radius:12px; background:var(--gold-bg); } .s-pro-r svg { flex:none; color:var(--gold-dk); } .s-pro-r > span { display:flex; flex-direction:column; min-width:0; } .s-pro-r b { font-size:15px; font-weight:650; color:var(--ink); } .s-pro-r i { font-style:normal; font-size:13.5px; color:var(--ink-2); } .s-pro-qs { display:flex; flex-direction:column; gap:8px; align-self:stretch; margin-top:4px; } .s-pro-qs > i { font-style:normal; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); } .s-pro-q { display:flex; align-items:center; min-height:44px; padding:10px 14px; border-radius:12px; background:var(--gold-bg); color:var(--ink); font-size:14.5px; line-height:1.4; text-decoration:none; } .s-pro-q:hover { background:var(--gold-lt); } .s-pro-bs { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; align-self:stretch; margin-top:6px; } /* A price abroad is longer than ₹5 ("Chat from $0.10/min"), and at 320 the nowrap button ran past the screen. Wrap there instead. */ @media (max-width:374px) { .s-pro-bs .c-btn { white-space:normal; flex-wrap:wrap; text-align:center; } } @media (min-width:1000px) { .s-pro-bs { grid-template-columns:repeat(2,minmax(0,1fr)); } } /* The rate sits beside its label, one line. */ .s-pro-bs .c-btn { display:flex; justify-content:center; align-items:center; gap:8px; white-space:nowrap; min-height:52px; font-size:16px; } .s-pro-bs .c-as-rate { font-weight:650; } .s-pro-fine { font-size:13px; color:var(--ink-3); } /* ── THE PHONE (Rohit's mobile mock, 28 Sep 2026) ── The chat card centred — faces, heading, the line under it — with the four as one-row tiles, icon beside the name; Chat and Call full width, one over the other. The reports card leads with its heading, then the covers, the words, and Explore full width. Everything a little closer. */ @media (max-width:759px) { .s-cta.s-pro { padding:24px 12px 14px; } .s-pro-h { margin-bottom:18px; } .s-cta.s-pro .s-pro-h p { margin-top:8px; font-size:16px; } .s-pro-go1 { margin-top:14px; width:100%; max-width:360px; justify-content:center; } .s-pro-g { gap:14px; } .s-pro-c { padding:18px 12px; gap:10px; border-radius:18px; } .s-pro-g > .s-pro-c:first-child { align-items:center; text-align:center; } .s-pro-g > .s-pro-c:first-child .s-pro-fs { justify-content:center; } .s-pro-c h3 { margin-top:2px; font-size:26px; } .s-pro-rs { gap:8px; } .s-pro-r { flex-direction:row; align-items:center; gap:7px; padding:9px 8px; text-align:left; } .s-pro-r svg { width:20px; height:20px; } .s-pro-r b { font-size:14px; white-space:nowrap; } .s-pro-r i { font-size:12.5px; line-height:1.3; } .s-pro-rs { gap:6px; } .s-pro-bs { gap:8px; margin-top:2px; } .s-pro-bs .c-btn { min-height:50px; } .s-pro-fine { text-align:center; } .s-pro-rep h3 { order:-1; margin:0; text-align:center; align-self:stretch; } .s-pro-rep .s-pro-cvs { gap:10px; } .s-pro-go { align-self:stretch; justify-content:center; margin-top:4px; } } /* The smallest phones: a 66px name column cannot hold "Astro Vaidya" beside an icon, so the icon goes above it there. */ @media (max-width:359px) { .s-pro-r { flex-direction:column; align-items:flex-start; gap:5px; } .s-pro-r b { white-space:normal; } } /* THE TWO CARDS END TOGETHER (Rohit, 28 Sep 2026: "the right card has empty space, shrink the left to match"). Side by side the covers set the height, and they shrink with the card: from 1280px the two already match to a few pixels; between 1000 and 1279 the chat card is tightened — smaller faces, slimmer tiles, closer rows — to fit under the covers. Both cards' buttons sit on the bottom edge, so what little is left over falls above them and the two rows of buttons line up. */ .s-pro-g > .s-pro-c:first-child .s-pro-bs { margin-top:auto; } @media (min-width:1000px) and (max-width:1279px) { .s-pro-g > .s-pro-c:first-child { gap:8px; } .s-pro-g > .s-pro-c:first-child .s-pro-f { width:58px; height:58px; margin-left:-10px; } .s-pro-g > .s-pro-c:first-child .s-pro-f:first-child { margin-left:0; } .s-pro-g > .s-pro-c:first-child h3 { margin-top:2px; font-size:clamp(22px,2.2vw,28px); } .s-pro-g > .s-pro-c:first-child .s-pro-t { font-size:14px; } .s-pro-rs { gap:8px; margin-top:2px; } .s-pro-r { padding:8px 12px; gap:10px; } .s-pro-r svg { width:22px; height:22px; } .s-pro-r b { font-size:14.5px; } .s-pro-r i { font-size:13px; } .s-pro-bs .c-btn { min-height:48px; } } /* The reports: the covers big, then the words, then the button. */ .s-pro-cvs { display:flex; gap:14px; align-items:flex-start; align-self:stretch; } .s-pro-cv { flex:1 1 0; max-width:190px; border-radius:6px; overflow:hidden; box-shadow:0 10px 24px -14px rgba(60,30,5,.6); } .s-pro-cv img { width:100%; height:auto; display:block; } .s-pro-rep h3 { margin-top:10px; } .s-pro-go { margin-top:auto; display:inline-flex; align-items:center; gap:8px; min-height:52px; padding:0 24px; font-size:16px; } .s-pro-c .s-pro-p + .s-pro-go { margin-top:12px; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } #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"; opacity:1; } /* 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; } /* 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) { /* ALL FOUR ACROSS on a phone, sharing the width: as a scrolling row of pills, "Dasha" sat off the right edge and nobody knew it was there. A long name takes two lines; the sub-label is a nicety and goes. */ .j-tn { gap:6px; overflow:visible; } .j-tn a > i { display:none; } .j-tn a { flex:1 1 0; min-width:0; padding:6px 6px; align-items:center; text-align:center; border-radius:12px; } .j-tn a > b { white-space:normal; font-size:13px; line-height:1.2; } } /* 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-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. */ /* Full width, as the tables under them are (Rohit, 28 Sep 2026: "make it use full width"); at 62ch a note stopped halfway across. */ .j-note { 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; } } /* ── 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; } .j-st-bad { border-color:transparent; background:var(--bad-bg); color:var(--bad); } /* ── 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 picker's chips (chart_card) ──────────────────────────────────────── */ .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); } /* The note is the table's last line, inside its box, so it stays under the table whatever sits beside it. */ .j-cp-t > .j-cp-n { margin:0; padding:10px 14px; border-top:1px solid var(--line-soft); } .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); } /* A difficult yoga that forms: the one red spine on the page. */ .j-y-bad { border-left-color:var(--bad); } .j-ygw[hidden] { display:none; } .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 .j-fold-more > 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 counts, as one sentence: of 47 checked, this many of each kind. Two boxes both ending "of 23 tested" read as the same number twice. */ .j-yc { max-width:70ch; margin:0 0 12px; font-size:15px; line-height:1.6; color:var(--ink-2); } .j-yc b { color:var(--gold-dk); font-weight:700; } /* No difficult yoga: said, and what was checked, folded. */ .j-ychk { margin-bottom:8px; } .j-ychk-h { margin:0 0 8px; font-size:14px; color:var(--good); font-weight:600; } .j-ychk details { max-width:80ch; font-size:13px; color:var(--ink-2); } .j-ychk summary { cursor:pointer; color:var(--gold-dk); font-weight:600; } .j-ychk ul { margin:10px 0 0; padding-left:18px; } .j-ychk li { margin-bottom:8px; line-height:1.65; } .j-ychk li b { color:var(--ink); } .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-why { margin:8px 0 0; font-size:12.5px; line-height:1.6; color:var(--ink-3); } .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); overflow:hidden; } .j-rb-s:last-child { border-right:0; } /* A name that does not fit its period is hidden whole by the script (fitRibbon), never clipped to "Manga" or run into the next one — the title and the table below still name it. */ .j-rb-s > b { font-family:var(--font-sans); font-size:12px; white-space:nowrap; font-weight:600; color:var(--ink-3); padding:0 3px; } .j-rb-s > b.j-rb-x { visibility:hidden; } /* 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; } /* Two by two: auto-fit gave three across and left the fourth, "At work", alone on a row. An odd one out spans the row. */ @media (min-width:760px) { .j-ds-g { grid-template-columns:repeat(2,1fr); } .j-ds-g > .j-ds:last-child:nth-child(odd) { grid-column:1 / -1; } } .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 CHART ON A PHONE. It is drawn in a 340-unit box and shown at ~270px on a 320 screen, so the rashi numbers came out at 7.6px and the grahas under 9 (review, 28 Sep 2026) — the one thing the page is for, too small for the parents it is often read to. The signed-in shell's faces (appshell, .d-main), a size up: sans, which is narrower than the mono, so the side-by-side names keep their 22-unit gap. */ @media (max-width:520px) { .j-cc .c-nc-p { font-family:var(--font-sans); font-size:12px; } .j-cc .c-nc-s { font-size:11px; font-weight:600; } .j-cc .c-nc-rx { font-size:9px; } } /* ── MOVED FROM pages/kundli_app.py (28 Sep 2026), for both pages: the glance row, go deeper, and the chart card. Last in the sheet so the card's rules beat the panel rules they refine at equal weight. ── */ /* ── at a glance: the four answers a family asks first ── */ .k-gls { display:grid; gap:10px; grid-template-columns:repeat(2,minmax(0,1fr)); margin:16px 0 4px; } @media (min-width:900px) { .k-gls { grid-template-columns:repeat(4,minmax(0,1fr)); } } .k-gl { display:flex; flex-direction:column; gap:4px; min-width:0; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); color:inherit; text-decoration:none; } .k-gl:hover { border-color:var(--gold-lt); } .k-gl:focus-visible { outline:2px solid var(--gold); outline-offset:2px; } .k-gl b { font-family:var(--font-serif); font-size:19px; font-weight:600; color:var(--ink); line-height:1.2; } .k-gl i { font-style:normal; font-size:12.5px; line-height:1.45; color:var(--ink-2); } /* Present — the one a family will ask about — is lit, not alarmed. */ .k-gl-on { border-color:var(--gold-lt); background:var(--gold-bg); } .k-gl-on b { color:var(--gold-dk); } /* ── go deeper: the report that reads this tab ── */ .k-next { margin-top:34px; padding-top:22px; border-top:1px solid var(--line); } .k-next-h { margin:0 0 12px; font-family:var(--font-sans); font-size:14px; font-weight:600; color:var(--ink-2); } :is(:root[data-lang="hi"], :root[lang^="hi"]) .k-next-h { font-family:inherit; font-size:15px; } .k-nxs { display:grid; gap:14px; grid-template-columns:1fr; } @media (min-width:900px) { .k-nxs { grid-template-columns:repeat(2,minmax(0,1fr)); } } .k-nx[hidden] { display:none; } .k-nx { display:flex; flex-direction:column; gap:6px; min-width:0; } .k-nx-why { margin:0; padding:8px 12px; border-radius:10px; background:var(--gold-bg); font-size:13px; line-height:1.55; color:var(--ink-2); } .k-nx-why:empty { display:none; } .k-nx .rv-c { flex:1; } .k-next .c-askb { margin-top:26px; } /* ── the chart card: one chart and its table, from all twenty-three ── */ .j-cc { padding:20px 22px 22px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); } .j-cc-top { margin-bottom:16px; } .j-cc .c-pf { display:inline-block; margin:0; min-width:min(320px, 100%); } .j-cc .c-pf-l { font-family:var(--font-sans); font-size:12.5px; letter-spacing:0; text-transform:none; font-weight:600; } .j-cc .c-pf-t { border-radius:999px; border-color:var(--gold-lt); padding:0 16px; min-height:46px; } .j-cc .c-pf-t b { font-size:15.5px; } .j-cc .c-pf-t svg { color:var(--gold-dk); } @media (min-width:640px) { .j-cc .c-pf-c { width:min(640px, calc(100vw - 320px)); max-width:none; padding:16px 18px; } } /* The panels sit in the card: no second border inside the first. */ .j-cc .j-cp-in { padding:0; border:0; background:none; gap:22px 32px; } @media (min-width:900px) { .j-cc .j-cp-in { grid-template-columns:minmax(0,400px) minmax(0,1fr); } } .j-cc .j-cp-d .c-nc { max-width:400px; } .j-cc .j-cp-i > b { font-size:21px; margin:3px 0 4px; } .j-cc .j-cp-i > p { font-size:13.5px; line-height:1.6; } .j-cc .j-cp-t { margin-top:14px; } /* THE SELECTOR AND THE TABLE ON ONE TOP LINE, THE CHART'S NAME UNDER THE DRAWING (Rohit, 28 Sep 2026: "align kundli top line with the right table top line", "selector on left", "show [D1, Rashi Chart (Lagna), what it is read for] below the chart"). On a wide screen the left column is the selector (shared by the 23 panes, so placed at the card's top left rather than moved into each), the drawing, and the chart's name and line; the right is the table and its note, from the top. The right column opens up (display:contents) so its parts can take those places; the left's last row takes any spare height. Phones stay stacked. */ @media (min-width:900px) { .j-cc { position:relative; } .j-cc-top { position:absolute; top:20px; left:22px; width:min(400px, calc(40% - 22px)); margin:0; z-index:3; } .j-cc .c-pf { display:block; min-width:0; } .j-cc .j-cp-in { grid-template-rows:auto auto auto 1fr; row-gap:0; align-items:start; } .j-cc .j-cp-i { display:contents; } .j-cc .j-cp-d { grid-column:1; grid-row:1; margin-top:var(--j-pick, 92px); } /* Under the drawing, centred like its Lagna line, as one caption: "D1 · Rashi Chart (Lagna)", then what it is read for. */ .j-cc .j-cp-i > .h-f-l { display:none; } .j-cc .j-cp-i > b { grid-column:1; grid-row:3; margin-top:16px; text-align:center; } .j-cc .j-cp-i > b[data-code]::before { content:attr(data-code) " · "; } .j-cc .j-cp-i > p:not(.j-cp-n) { grid-column:1; grid-row:4; max-width:none; text-align:center; } .j-cc .j-cp-t { grid-column:2; grid-row:1 / span 4; margin-top:0; } } .j-cc .j-cp-t table { font-size:14px; } .j-cc .j-cp-t tbody th, .j-cc .j-cp-t td { padding:9px 12px; vertical-align:middle; } .j-cc .j-cp-t tbody tr:nth-child(even) > * { background:none; } .j-cc .j-cp-t tbody tr + tr > * { border-top:1px solid var(--line-soft); } .j-cc-d1 .j-pl-i { display:inline-grid; vertical-align:-3px; margin-right:8px; color:var(--gold-dk); } .j-cc-d1 td[data-cc="sign"] b { font-weight:600; color:var(--ink); } .j-cc-d1 .j-sub { display:block; font-style:normal; font-size:12.5px; color:var(--ink-3); margin-top:1px; } .j-cc-r { font-size:11.5px; font-weight:700; color:var(--bad); } .j-cp-w { white-space:nowrap; font-size:12px; font-weight:700; color:var(--good); } .j-cp-mv .j-cp-x { padding-right:12px; } /* A PHONE: the chart full width, the table under it, the degree left out (the rashi, its nakshatra and the bhava are what a reader looks for). */ @media (max-width:640px) { .j-cc { padding:16px 14px 18px; } .j-cc .c-pf { display:block; min-width:0; } .j-cc-deg { display:none; } .j-cc .j-cp-t tbody th, .j-cc .j-cp-t td { padding:9px 8px; } } :is(:root[data-lang="hi"], :root[lang^="hi"]) .j-cc-d1 .j-sub, :is(:root[data-lang="hi"], :root[lang^="hi"]) .j-cp-w { font-size:14px; } /* ON A PHONE THE REPORTS ARE A ROW YOU SWIPE, like the astrologers under them (lib/askers): one whole card and the edge of the next, instead of two tall cards stacked under every tab. */ @media (max-width:640px) { .k-nxs { display:grid; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:86%; gap:12px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding:0 16px; margin:0 -16px; padding:0 16px 8px; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image:linear-gradient(90deg, #000 calc(100% - 28px), transparent); } .k-nxs::-webkit-scrollbar { display:none; } .k-nx { scroll-snap-align:start; } } /* HINDI, FOR WHAT THE SCRIPT WRITES: under 15px goes up by 2, never past 15 (CLAUDE.md 15). Signed in switches with data-lang; the public /hi/ pages are lang="hi" from the start. */ :is(:root[data-lang="hi"], :root[lang^="hi"]) .k-gl i { font-size:14.5px; } :is(:root[data-lang="hi"], :root[lang^="hi"]) .k-nx-why { font-size:15px; } :is(:root[data-lang="hi"], :root[lang^="hi"]) .j-cc-r { font-size:13.5px; } /* ── THE PHONE (28 Sep 2026: "have you checked mobile?") ────────────── The chart tab was 4,800px on a 390 screen and yogas 7,550: every yoga card open, twelve bhava cards one per row, the panchang and avakhada at full length, and a five-column mahadasha table cut off at the edge. Folds (fold_btn) shut a yoga to its name and grahas and the day you were born to one row; the bhavas go two across; the dasha table keeps three columns and carries what each period is read for under its graha. Above 640px nothing here applies. */ .j-fold, .j-tbl .j-md-m { display:none; } @media (max-width:640px) { [data-fold] { position:relative; } .j-fold { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0; margin-top:2px; border:0; background:none; cursor:pointer; font:600 14px/1.2 var(--font-sans); color:var(--gold-dk); } /* Shut, the whole card is the target; open, only the button, so the text can be read and selected without closing it. */ [data-fold]:not(.j-fold-on) .j-fold::after { content:''; position:absolute; inset:0; border-radius:var(--r-card); } .j-fold:focus-visible { outline:2px solid var(--gold); outline-offset:2px; } .j-fold-c, .j-fold-on .j-fold-o { display:none; } .j-fold-on .j-fold-c { display:inline; } .j-fold-x { width:7px; height:7px; margin-top:-3px; flex:none; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); } .j-fold-on .j-fold-x { margin-top:3px; transform:rotate(-135deg); } [data-fold]:not(.j-fold-on) .j-fold-more { display:none; } .j-y:not(.j-fold-on) { padding-bottom:6px; } /* The day you were born: a row of its own, the two cards under it. */ .j-fold-row { display:flex; width:100%; justify-content:space-between; min-height:50px; margin:0; padding:0 16px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); } .j-dayw.j-fold-on .j-fold-row { margin-bottom:14px; } /* The bhavas, two across. */ .j-bh-g12 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .j-bh { padding:12px 12px 11px; } .j-bh-n { font-size:38px; right:8px; } .j-bh > b { font-size:16px; line-height:1.25; } .j-bh-g { margin-top:9px; } /* The mahadashas in three columns: Length and Read for go, and what each is read for sits under its graha. */ .j-tbl-md :is(th, td):nth-child(4), .j-tbl-md :is(th, td):nth-child(5) { display:none; } .j-tbl-md table { min-width:0; width:100%; } .j-tbl-md .j-md-m { display:block; } /* The graha cell wraps (the table's own th is nowrap) and gives the two dates the room they need. */ .j-tbl-md tbody th { white-space:normal; width:40%; } .j-tbl-md :is(th, td) { padding-left:10px; padding-right:10px; } } @media (max-width:360px) { .j-tbl-md .j-num { font-size:12px; } .j-tbl-md :is(th, td) { padding-left:7px; padding-right:7px; } .j-tbl-md tbody th { width:auto; } } :is(:root[data-lang="hi"], :root[lang^="hi"]) .j-fold { font-size:15px; } /* The signed-in kundli draws the plain diamond: lib/appshell's .c-nc-plain, on the figure below. */ /* ── THE ROSTER CARDS IN A ROW (was the dashboard's own) ── */ .d-ags { display:grid; gap:15px; align-items:start; } .d-cell { display:flex; } .d-cell > * { flex:1; } /* SYMMETRIC CARDS. Side by side, every card is the same four rows of the grid they sit in (subgrid, twice: the cell, then the card): name, practice, rating and languages, buttons. A name that wraps makes that row taller in all three, so the lines and both price buttons line up across the row and the cards end at one height. The card's own head wrappers step aside (display:contents) so their parts sit on those rows. */ @media (min-width:900px) { .d-ags { grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:0; align-items:stretch; } .d-ags > .d-cell { display:grid; grid-row:span 4; grid-template-rows:subgrid; row-gap:0; margin-bottom:15px; } .d-ags .c-as { grid-row:span 4; display:grid; grid-template-rows:subgrid; row-gap:0; grid-template-columns:64px minmax(0,1fr); column-gap:13px; } .d-ags .c-as-h, .d-ags .c-as-id { display:contents; } .d-ags .c-as-h > :first-child { grid-column:1; grid-row:1 / span 3; align-self:start; } .d-ags .c-as-id > b { grid-column:2; grid-row:1; align-self:end; } .d-ags .c-as-sp { grid-column:2; grid-row:2; align-self:start; } .d-ags .c-as-r { grid-column:2; grid-row:3; align-self:start; } .d-ags .c-as-buy { grid-column:1 / -1; grid-row:4; align-self:end; } /* THE CARD CANNOT BE A CONTAINER HERE. ui.py makes .c-as a size container (container "as", for its button rules), and a container has layout containment, which turns subgrid into none: the card then sized its own rows, the practice line collapsed to its overflow minimum and the rating line sat on top of it (Rohit, 20 Oct 2026, /home/matching/). The buttons are what those rules change, so their row is the container instead. */ .d-ags .c-as { container-type:normal; } .d-ags .c-as-buy { container-type:inline-size; container-name:as; } } /* The name on one line (the corner tag sits above it instead of taking the end of it) and each button on one line: on a narrow card the struck price goes, the card's "50% OFF" still says it. */ .d-ags .c-as:has(.c-as-off:not(:empty)) { padding-top:30px; } .d-ags .c-as:has(.c-as-off:not(:empty)) .c-as-id > b { padding-right:0; } @container as (max-width:300px) { .d-ags .c-as-rate[data-was]:not(:empty)::before { content:none; } } /* ── ASK AN ASTROLOGER, under a page's reading ── */ .c-askb { margin-top:22px; } .c-askb-h { margin:0 0 4px; font-family:var(--font-sans); font-size:16px; font-weight:700; color:var(--ink); } .c-askb-why { margin:0 0 12px; padding:8px 12px; border-radius:10px; background:var(--gold-bg); font-size:13.5px; line-height:1.55; color:var(--ink-2); max-width:760px; } .c-askb-why:empty { display:none; } .c-askb-all { display:inline-flex; align-items:center; min-height:44px; font-size:14px; font-weight:600; color:var(--gold-dk); } :root[data-lang="hi"] .c-askb-why { font-size:15px; } /* ON A PHONE, A ROW YOU SWIPE (Rohit, 27 Sep 2026: "optimize for phone"). Three roster cards stacked were ~1,300px under every page that offers them. One whole card and the edge of the next says there are more; the row bleeds to the screen edge (.d-main's 16px), snaps card by card, and fades at its right edge — the report banner's way of saying it goes on. */ @media (max-width:640px) { .c-askb .d-ags { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:86%; gap:12px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding:0 16px; margin:0 -16px; padding:0 16px 8px; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image:linear-gradient(90deg, #000 calc(100% - 28px), transparent); } .c-askb .d-ags::-webkit-scrollbar { display:none; } .c-askb .d-ags > .d-cell { scroll-snap-align:start; margin:0; } } .rp-pub .d-main { margin-inline:auto; } /* ── the redesigned report pages, prefix rv- ─────────────────────── */ .rv { --rv-hi: 'Kohinoor Devanagari','Noto Serif Devanagari','Noto Sans Devanagari', 'Mangal','Nirmala UI',var(--font-serif); } .rv [lang="hi"] { font-family:var(--rv-hi); } /* THE SITE'S WIDTH, not a narrower one of its own (Rohit, 28 Sep 2026: "its content width is lower compared to other pages, the content seems centered"). It was 1120px against every other public page's --wrap (1360px, lib/common .l-wrap), so at 1440 the shelf sat 240px narrower, floating in the middle. */ .rv-wrap { max-width:var(--wrap); margin-inline:auto; padding-inline:16px; } .rv-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 18px; border-radius:10px; font-weight:650; font-size:14.5px; text-decoration:none; background:var(--gold-solid); color:var(--gold-solid-text); border:1px solid var(--gold-solid); } .rv-btn:hover { filter:brightness(1.06); } .rv-btn:focus-visible, .rv a:focus-visible { outline:2px solid var(--gold); outline-offset:2px; } .rv-btn-ghost { background:transparent; color:var(--ink); border-color:var(--line); } /* ── the offer banner ── ITS OWN PALETTE, ONE PER THEME. It was one look in both, the deep brown of the report covers, and on the cream light page that was a near-black slab from another app. Light is now the warm saffron-cream of a sweet-shop offer board, with the dark covers standing out on it; dark keeps the brown, with a gold edge so it does not melt into the page. The tokens are the banner's own (--bn-*) because the discount seal and the covers need the same warmth in both. */ .rv-ban { --bn-bg:linear-gradient(115deg, #FFF4DE 0%, #FDE6B8 55%, #F8D08A 100%); --bn-line:rgba(138,90,11,.07); --bn-ink:#2B170A; --bn-accent:#7A4E08; --bn-mute:#6E5638; --bn-btn:#5A3313; --bn-btn-ink:#FFF3DF; --bn-btn-hi:#6E4119; --bn-dot:rgba(90,51,19,.28); --bn-arrow:rgba(255,255,255,.55); --bn-edge:rgba(138,90,11,.22); --bn-shadow:0 10px 28px rgba(138,90,11,.16); --bn-fade:#FBDCA0; } :root[data-theme="dark"] .rv-ban { --bn-bg:radial-gradient(120% 140% at 85% 20%, #5A3313 0%, #2B170A 55%, #1B0F07 100%); --bn-line:rgba(232,201,138,.05); --bn-ink:#FFF3DF; --bn-accent:#E8C98A; --bn-mute:#CDB693; --bn-btn:#E8C98A; --bn-btn-ink:#2B170A; --bn-btn-hi:#F1D9A6; --bn-dot:rgba(255,243,223,.35); --bn-arrow:rgba(0,0,0,.2); --bn-edge:rgba(232,201,138,.3); --bn-shadow:0 0 0 1px rgba(232,201,138,.08), 0 14px 34px rgba(0,0,0,.45); --bn-fade:#3A200C; } .rv-ban-w { background:var(--surface-2); padding:14px 0 0; } .rv-ban { position:relative; border-radius:16px; overflow:hidden; background:var(--bn-bg); color:var(--bn-ink); border:1px solid var(--bn-edge); box-shadow:var(--bn-shadow); } .rv-ban::before { content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(45deg, var(--bn-line) 0 1px, transparent 1px 22px), repeating-linear-gradient(-45deg, var(--bn-line) 0 1px, transparent 1px 22px); } /* The kundli line drawing gave way to each slide's photo. */ .rv-ban-mark { display:none; } .rv-ban-track { position:relative; z-index:1; display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; } .rv-ban-track::-webkit-scrollbar { display:none; } .rv-ban-track:focus-visible { outline:2px solid var(--bn-accent); outline-offset:-4px; } /* min-width:0 and border-box: with the photo's side padding a slide's min-content ran wider than the track, every slide after the first started early, and the last one's photo showed down its left edge. */ .rv-ban-s { position:relative; flex:0 0 100%; min-width:0; max-width:100%; box-sizing:border-box; overflow:hidden; scroll-snap-align:start; display:grid; grid-template-columns:96px 1fr; gap:16px; align-items:center; padding:128px 18px 46px; } @media (min-width:760px) { .rv-ban-s { grid-template-columns:150px minmax(0,1fr); gap:30px; padding:26px 42% 50px 40px; } } .rv-ban-s > :not(.rv-ban-ph) { position:relative; z-index:1; } /* THE PHOTO. On a phone a band across the top that fades down into the banner; wider, the right side of the slide, fading left into it. The text column stops where the photo starts (padding-right above), so no word is ever set on a picture. --bn-fade is the banner's colour at that edge, per theme. */ .rv-ban-ph { position:absolute; left:0; right:0; top:0; height:150px; z-index:0; pointer-events:none; } .rv-ban-ph img { display:block; width:100%; height:100%; object-fit:cover; object-position:var(--pos, 50% 50%); } .rv-ban-ph::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 35%, var(--bn-fade) 100%); } @media (min-width:760px) { .rv-ban-ph { left:auto; top:0; bottom:0; height:auto; width:46%; } .rv-ban-ph::after { background:linear-gradient(90deg, var(--bn-fade) 0%, transparent 38%); } } .rv-ban-art { position:relative; } .rv-ban-art img { display:block; width:100%; height:auto; border-radius:8px; transform:rotate(-3deg); box-shadow:0 12px 26px rgba(0,0,0,.45); border:1px solid rgba(232,201,138,.35); } /* THE SEAL — the discount as a stamped roundel, the shape a sale sticker takes on any Indian shop shelf. Empty (and so hidden) until the catalogue confirms an offer for this report. */ /* Bottom corner of the cover, clear of the book's own title and of the headline beside it. */ .rv-ban-seal { position:absolute; left:-10px; bottom:-10px; } @media (min-width:760px) { .rv-ban-seal { left:auto; right:-18px; bottom:-8px; } } .rv-ban-seal .c-rp-off { display:grid; place-items:center; width:54px; height:54px; margin:0; border-radius:50%; background:#C0392B; color:#FFF3DF; border:2px dashed rgba(255,243,223,.7); box-shadow:0 0 0 3px #C0392B; font-family:var(--font-sans); font-style:normal; font-size:11.5px; font-weight:800; line-height:1.05; text-align:center; letter-spacing:0; text-transform:uppercase; padding:4px; transform:rotate(8deg); flex-basis:auto; } .rv-ban-seal .c-rp-off[hidden] { display:none; } @media (min-width:760px) { .rv-ban-seal .c-rp-off { width:78px; height:78px; font-size:16px; } } .rv-ban-k { margin:0; font-size:12.5px; letter-spacing:.02em; color:var(--bn-accent); } .rv-ban-k > span:first-of-type:not(.rv-ban-tag) { text-transform:uppercase; letter-spacing:.08em; font-family:var(--font-mono); font-size:11px; } .rv-ban-tag:not([hidden]) { display:inline-block; margin-right:8px; padding:2px 8px; border-radius:99px; background:var(--bn-btn); color:var(--bn-btn-ink); font-weight:700; font-size:11px; } .rv-ban-tag i { font-style:normal; } .rv-ban-t { margin:6px 0 0; font-family:var(--font-serif); font-size:clamp(19px,3.4vw,30px); line-height:1.22; color:var(--bn-ink); text-wrap:balance; max-width:26ch; } .rv-ban-t[lang="hi"] { font-family:var(--rv-hi); font-weight:600; line-height:1.4; } .rv-ban-pay { margin-top:12px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; } .rv .rv-ban-pr { display:flex; align-items:baseline; gap:8px; width:auto; margin:0; justify-content:flex-start; font-family:var(--font-sans); } .rv .rv-ban-pr b { flex-basis:auto; font-size:26px; font-weight:800; color:var(--bn-ink); font-variant-numeric:tabular-nums; } .rv .rv-ban-pr s { font-size:14px; color:var(--bn-mute); } .rv-ban-buy { display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:10px; background:var(--bn-btn); color:var(--bn-btn-ink); font-weight:750; font-size:14.5px; text-decoration:none; border:0; } .rv-ban-buy:hover { background:var(--bn-btn-hi); } .rv-ban-more { display:inline-flex; align-items:center; min-height:44px; color:var(--bn-accent); font-size:13.5px; font-weight:600; text-decoration:underline; text-underline-offset:3px; } .rv-ban a:focus-visible, .rv-ban button:focus-visible { outline:2px solid var(--bn-ink); outline-offset:2px; } /* z-index:2, above the track's 1: the track covers the whole banner, so without it every arrow and dot click landed on a slide instead. */ .rv-ban-nav { position:absolute; left:0; right:0; bottom:10px; z-index:2; display:flex; align-items:center; justify-content:center; gap:12px; pointer-events:none; } .rv-ban-nav > * { pointer-events:auto; } .rv-ban-dots { display:flex; gap:4px; } .rv-ban-dot { width:24px; height:24px; border:0; background:none; padding:0; cursor:pointer; display:grid; place-items:center; } .rv-ban-dot::before { content:""; width:8px; height:8px; border-radius:99px; background:var(--bn-dot); transition:width .25s; } .rv-ban-dot[aria-current="true"]::before { width:22px; background:var(--bn-accent); } .rv-ban-arrow { width:32px; height:32px; border-radius:50%; border:1px solid var(--bn-edge); background:var(--bn-arrow); color:var(--bn-ink); font-size:20px; line-height:1; cursor:pointer; display:grid; place-items:center; } @media (prefers-reduced-motion:reduce) { .rv-ban-dot::before { transition:none; } } @media (pointer:coarse) { .rv-ban-arrow { width:44px; height:44px; } .rv-ban-dot { width:44px; height:44px; } .rv-ban-dots { gap:0; } } .rv-ban-w + .rv-head { padding-top:22px; } /* head */ .rv-head { position:relative; overflow:hidden; background:var(--surface-2); border-bottom:1px solid var(--line); padding:34px 0 26px; } .rv-head .rv-wrap { position:relative; } .rv-mark { fill:none; stroke:var(--gold); stroke-width:1.2; vector-effect:non-scaling-stroke; } /* The header's kundli: a real chart, not an outline (_head_chart), in the signed-in pages' dress — gold frame and lines, the lagna's box shaded, the grahas in the page's face, big enough to read. Its own column beside the heading, the lede and the four facts (it sat on top of the fourth), and not at all on a phone. */ @media (min-width:760px) { .rv-head .rv-wrap:has(> .rv-hchart) { display:grid; grid-template-columns:minmax(0,1fr) 240px; column-gap:36px; align-items:center; } .rv-head .rv-wrap:has(> .rv-hchart) > :not(.rv-hchart) { grid-column:1; } .rv-hchart { grid-column:2; grid-row:1 / span 4; } } .rv-hchart .c-nc { max-width:none; border-radius:12px; overflow:hidden; box-shadow:0 0 0 1.5px var(--gold); background:var(--surface); } .rv-hchart .c-nc-bg { fill:var(--gold-lt); } .rv-hchart .c-nc-h1 { fill:var(--gold-bg); } .rv-hchart .c-nc-p { font-family:var(--font-sans); font-size:18px; font-weight:700; } .rv-hchart .c-nc-s { font-size:13.5px; font-weight:600; } .rv-hchart .c-nc-rx { font-size:10px; } @media (max-width:759px) { .rv-hchart { display:none; } } /* ONE LINE, NOT TWO: the page's 20ch cap broke "Reports read from your kundli" after "read". */ .rv[lang] .rv-head .rv-h1 { max-width:none; } .rv-sec-h b[lang="en"], .rv-shelf-h h2 b[lang="en"] { font-family:var(--font-serif); font-weight:600; } .rv-pick-a > b[lang="en"] { font-family:var(--font-serif); font-size:16px; } .rv-facts b[lang="en"] { font-family:var(--font-sans); font-size:14px; } .rv-moment span[lang="en"] { color:var(--gold-dk); } /* The Hindi page: the Hindi name is the title, the English one under it. */ .rv[lang="hi"] .rv-btn { font-family:var(--rv-hi); font-weight:600; } .rv-t-hi { font-family:var(--rv-hi); font-weight:600; font-size:19px; color:var(--ink); } .rv-c-en { font-size:12.5px; color:var(--ink-3); margin-top:1px; } .rv-c-en:empty, .rv-dh1 span:empty { display:none; } .rp-pv-gap { display:none; } .rv[lang="hi"] .rv-h1 { font-family:var(--rv-hi); font-weight:600; line-height:1.3; max-width:22ch; } .rv[lang="hi"] .rv-c-d, .rv[lang="hi"] .rv-lede, .rv[lang="hi"] .rv-tell li, .rv[lang="hi"] .rv-steps span, .rv[lang="hi"] .rv-pandit p, .rv[lang="hi"] .rv-who p { line-height:1.7; } .rv[lang="hi"] .rv-steps b, .rv[lang="hi"] .rv-pandit b, .rv[lang="hi"] .rv-who b { font-family:var(--rv-hi); font-weight:600; } .rv[lang="hi"] .rv-eyebrow { font-size:16px; } .rv[lang="hi"] .rv-ask { font-family:var(--rv-hi); font-size:14px; letter-spacing:0; text-transform:none; color:var(--ink-2); } .rv-eyebrow { margin:0 0 4px; font-size:17px; color:var(--gold-dk); font-weight:600; } .rv-h1 { margin:0; font-family:var(--font-serif); font-size:clamp(27px,5vw,40px); line-height:1.12; color:var(--ink); text-wrap:balance; max-width:20ch; } .rv-lede { margin:10px 0 0; max-width:60ch; font-size:15.5px; line-height:1.6; color:var(--ink-2); } .rv-facts { list-style:none; margin:20px 0 0; padding:0; display:grid; gap:10px; grid-template-columns:repeat(2,minmax(0,1fr)); } .rv-facts li { display:flex; flex-direction:column; gap:2px; padding:10px 12px; background:var(--surface); border:1px solid var(--line); border-radius:10px; } .rv-facts b[lang="hi"] { font-size:14.5px; color:var(--ink); font-weight:600; } .rv-facts span { font-size:12.5px; line-height:1.4; color:var(--ink-3); } .rv-facts span b { color:var(--ink-2); font-weight:650; } @media (min-width:760px) { .rv-facts { grid-template-columns:repeat(4,minmax(0,1fr)); } } /* moment picker */ .rv-ask { margin:26px 0 10px; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); } .rv-pick { display:grid; gap:10px; grid-template-columns:1fr; } @media (min-width:640px) { .rv-pick { grid-template-columns:repeat(3,minmax(0,1fr)); } } .rv-pick-a { display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:auto auto; column-gap:12px; align-items:center; padding:12px 14px; border-radius:12px; background:var(--surface); border:1px solid var(--line); text-decoration:none; color:var(--ink); } .rv-pick-a:hover { border-color:var(--gold); } .rv-pick-a > .rv-pick-i { grid-row:1/3; grid-column:1; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--gold-bg); color:var(--gold-dk); } .rv-pick-a > b { grid-row:1; grid-column:2; font-size:16.5px; font-weight:600; line-height:1.3; } .rv-pick-a > span:not(.rv-pick-i) { grid-row:2; grid-column:2; font-size:12.5px; color:var(--ink-3); } .rv-pick-a > i { grid-row:1/3; grid-column:3; font-style:normal; font-family:var(--font-mono); font-size:11px; color:var(--ink-3); } /* shelves */ .rv-shelf { margin-top:38px; scroll-margin-top:84px; } .rv-shelf-h { display:grid; grid-template-columns:auto 1fr; column-gap:12px; align-items:center; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--line); } .rv-shelf-i { grid-row:1/3; display:grid; place-items:center; width:42px; height:42px; border-radius:50%; border:1px solid var(--gold-lt); color:var(--gold-dk); } .rv-shelf-h h2 { margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; } .rv-shelf-h h2 b { font-size:clamp(21px,3.4vw,26px); font-weight:600; color:var(--ink); } .rv-shelf-h h2 span { font-family:var(--font-serif); font-size:16px; color:var(--ink-2); } .rv-shelf-h p { grid-column:2; margin:3px 0 0; font-size:13.5px; line-height:1.5; color:var(--ink-3); max-width:70ch; } .rv-grid { display:grid; gap:12px; grid-template-columns:1fr; } @media (min-width:900px) { .rv-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } /* the card */ .rv-c { position:relative; display:grid; grid-template-columns:78px 1fr; gap:14px; padding:14px; border-radius:14px; background:var(--surface); border:1px solid var(--line); } .rv-c:hover { border-color:var(--gold-lt); } @media (min-width:520px) { .rv-c { grid-template-columns:96px 1fr; } } /* THE NARROWEST PHONES: a smaller cover and a three-line description, so a card stays under a third of a 320px phone's screen. */ @media (max-width:360px) { .rv-c { grid-template-columns:62px 1fr; gap:11px; padding:12px; } .rv-c-d { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .rv-c-pay { padding-top:10px; gap:8px; } .rv .rv-pr b { font-size:19px; } } .rv-c-cov img, .rv-c-img { display:block; width:100%; height:auto; border-radius:6px; box-shadow:0 2px 8px rgba(23,18,12,.18); } .rv-c-b { min-width:0; display:flex; flex-direction:column; } .rv-c-t { margin:0; font-family:var(--font-serif); font-size:18px; line-height:1.25; } .rv-c-a { color:var(--ink); text-decoration:none; } .rv-c-a::after { content:""; position:absolute; inset:0; border-radius:14px; } .rv-c-d { margin:6px 0 0; font-size:13.5px; line-height:1.5; color:var(--ink-2); } .rv-c-m { margin:6px 0 0; display:flex; flex-wrap:wrap; gap:4px 12px; font-size:12px; color:var(--ink-3); } .rv-c-m span { white-space:nowrap; } .rv-c-pay { margin-top:auto; padding-top:12px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; } .rv-c-btn { position:relative; z-index:1; min-height:44px; font-size:14px; } /* THE SHARED PRICE HOOKS, laid out for this card. .c-rp-pr and its children carry global rules for the old portrait card (figure on its own line, badge full width, mono); scoped here to one row. */ .rv .rv-pr { display:flex; flex-wrap:nowrap; align-items:baseline; justify-content:flex-start; gap:8px; width:auto; margin:0; font-family:var(--font-sans); } .rv .rv-pr b { flex-basis:auto; font-size:21px; font-weight:700; color:var(--ink); letter-spacing:-.01em; font-variant-numeric:tabular-nums; min-width:3.2ch; } .rv .rv-pr s { font-size:13px; color:var(--ink-3); } /* Placed on the row; drawn as every offer badge is (ui's .c-rp-off). */ .rv .rv-pr .c-rp-off { flex-basis:auto; margin:0; width:auto; } .rv .rv-pr .c-rp-off[hidden] { display:none; } .rv-tag:not([hidden]) { position:absolute; top:-9px; right:14px; z-index:1; font-size:11px; font-weight:650; padding:2px 9px; border-radius:99px; background:var(--gold-solid); color:var(--gold-solid-text); } .rv-tag i { font-style:normal; } /* the package */ .rv-bundle { grid-template-columns:1fr; background:var(--gold-bg); border-color:var(--gold-lt); } @media (min-width:900px) { .rv-bundle { grid-column:1/-1; grid-template-columns:auto 1fr; align-items:center; } } .rv-b-fan { display:flex; padding-left:14px; } .rv-b-cov { width:52px; margin-left:-14px; } .rv-b-cov img { display:block; width:100%; height:auto; border-radius:5px; box-shadow:0 2px 6px rgba(23,18,12,.25); border:2px solid var(--surface); } /* how it works, and the pandit */ .rv-how { margin:48px 0 40px; } .rv-sec-h { margin:0 0 14px; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; } .rv-sec-h b { font-size:clamp(20px,3vw,24px); font-weight:600; color:var(--ink); } .rv-sec-h span { font-family:var(--font-serif); font-size:16px; color:var(--ink-2); } .rv-steps { list-style:none; counter-reset:rv; margin:0; padding:0; display:grid; gap:10px; } @media (min-width:760px) { .rv-steps { grid-template-columns:repeat(3,minmax(0,1fr)); } } .rv-steps li { counter-increment:rv; position:relative; padding:14px 14px 14px 52px; border-radius:12px; background:var(--surface); border:1px solid var(--line); } .rv-steps li::before { content:counter(rv); position:absolute; left:14px; top:14px; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:700; background:var(--gold-bg); color:var(--gold-dk); border:1px solid var(--gold-lt); } .rv-steps b { display:block; font-size:15px; color:var(--ink); } .rv-steps span { display:block; margin-top:3px; font-size:13px; line-height:1.5; color:var(--ink-2); } .rv-pandit { margin-top:12px; display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; padding:16px; border-radius:12px; border:1px dashed var(--gold-lt); background:var(--surface-2); } .rv-pandit-m .rv-mark { width:52px; height:52px; display:block; opacity:.9; } .rv-pandit b { font-size:15.5px; color:var(--ink); } .rv-pandit p { margin:4px 0 0; font-size:13.5px; line-height:1.55; color:var(--ink-2); max-width:78ch; } /* ── the small offer (strip) ───────────────────────────── */ /* Its own section adds no padding: between two padded sections it stacked to 88px above and 106 below (Rohit, 27 Sep 2026: "too much space"). */ section.l-sec.of-strip-sec { padding-top:0; padding-bottom:0; } /* ...except above a tinted band, which would start flush under the strip. */ section.l-sec.of-strip-sec:has(+ .l-alt) { padding-bottom:38px; } .of-strip { display:grid; grid-template-columns:auto 1fr; gap:12px 14px; align-items:center; padding:14px 16px; border-radius:var(--r-card); border:1px solid var(--gold-lt); background:var(--surface); } @media (min-width:760px) { .of-strip { grid-template-columns:auto 1fr auto; } } .of-strip-who { display:block; line-height:0; } .of-strip .of-ph { width:48px; height:48px; border-radius:50%; object-fit:cover; border:2px solid var(--gold-lt); } .of-strip-t { display:flex; flex-direction:column; gap:2px; min-width:0; } .of-strip-t b { font-size:16px; color:var(--ink); } .of-strip-t span { font-size:14.5px; line-height:1.5; color:var(--ink-2); } .of-strip-b { display:flex; gap:8px; flex-wrap:wrap; grid-column:1 / -1; } @media (min-width:760px) { .of-strip-b { grid-column:auto; } } .of-strip-b .c-btn { gap:7px; flex:1 1 150px; justify-content:center; white-space:nowrap; } @media (min-width:760px) { .of-strip-b .c-btn { flex:0 0 auto; } } .of-strip-b .c-as-rate { font-weight:600; opacity:.85; } /* The WhatsApp Channel's strip: its own mark on WhatsApp's green, where the astrologer's face sits on the offer strip. */ .of-wa { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:#1f8a4c; color:#fff; } .of-wa .c-bnd { fill:currentColor; } .of-follow .c-btn .c-bnd { width:16px; height:16px; fill:currentColor; } /* ── the ask panel ─────────────────────────────────────── */ .of-ask { display:grid; gap:18px; padding:22px; border-radius:var(--r-card); border:1px solid var(--gold-lt); background:radial-gradient(120% 140% at 100% 0%, var(--gold-bg) 0%, transparent 62%), var(--surface); } @media (min-width:860px) { .of-ask { grid-template-columns:230px minmax(0,1fr); gap:30px; padding:28px 32px; } } .of-ask > * { min-width:0; } .of-who { display:flex; gap:13px; align-items:center; text-decoration:none; color:var(--ink); align-self:start; } @media (min-width:860px) { .of-who { flex-direction:column; align-items:flex-start; } } .of-who .of-ph { width:64px; height:64px; border-radius:50%; object-fit:cover; flex:none; border:2px solid var(--gold-lt); } .of-who-t { display:flex; flex-direction:column; gap:2px; min-width:0; } .of-who-t b { font-size:16px; } .of-who-t i { font-style:normal; font-size:13px; color:var(--ink-2); } .of-who-t em { font-style:normal; font-size:12.5px; color:var(--ink-3); display:flex; align-items:center; gap:5px; flex-wrap:wrap; } .of-t { font-family:var(--font-serif); font-size:clamp(20px,3.2vw,25px); line-height:1.2; letter-spacing:-.015em; font-weight:600; margin:0 0 8px; text-wrap:balance; } .of-d { margin:0 0 16px; color:var(--ink-2); font-size:var(--text-md); line-height:1.6; max-width:62ch; } .of-lbl { margin:0 0 9px; font-size:12.5px; font-weight:650; color:var(--ink-3); } .of-qs { display:flex; flex-direction:column; gap:8px; margin-bottom:18px; } .of-q { display:flex; align-items:flex-start; gap:10px; padding:11px 14px; min-height:44px; border-radius:12px; border:1px solid var(--line); background:var(--surface); color:var(--ink); text-decoration:none; font-size:14.5px; line-height:1.45; } .of-q svg { flex:none; margin-top:2px; color:var(--gold-dk); } .of-q:hover { border-color:var(--gold); background:var(--gold-bg); } .of-buy { display:flex; flex-wrap:wrap; gap:10px; } .of-buy .c-btn { flex:1 1 170px; justify-content:center; gap:8px; } .of-buy .c-as-rate { font-weight:700; } .of-buy .c-as-rate::before { content:'\00b7'; margin-right:7px; opacity:.6; } .of-gift { display:flex; gap:8px; align-items:flex-start; margin:14px 0 0; font-size:13.5px; color:var(--ink-2); line-height:1.5; text-wrap:balance; } .of-gift[hidden] { display:none; } .of-gift svg { flex:none; margin-top:2px; color:var(--gold-dk); } /* ── reports ───────────────────────────────────────────── */ .of-rp { display:grid; gap:12px; } @media (min-width:900px) { .of-rp { grid-template-columns:repeat(2,minmax(0,1fr)); } } /* ── the phone bar ─────────────────────────────────────── */ .of-stk, .of-stk-sp { display:none; } @media (max-width:819px) { .of-stk { display:block; position:fixed; left:0; right:0; bottom:0; z-index:40; padding:9px 12px calc(9px + env(safe-area-inset-bottom)); background:var(--surface); border-top:1px solid var(--line); box-shadow:0 -8px 24px rgba(0,0,0,.08); transform:translateY(110%); transition:transform .25s ease; } .of-stk.on { transform:none; } .of-stk-sp { display:block; height:76px; } } @media (prefers-reduced-motion:reduce) { .of-stk { transition:none; } } .of-stk-a { display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); } .of-stk-a .of-ph { width:38px; height:38px; border-radius:50%; object-fit:cover; flex:none; } .of-stk-t { display:flex; flex-direction:column; min-width:0; flex:1; line-height:1.3; } .of-stk-t b { font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .of-stk-t i { font-style:normal; font-size:12.5px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .of-stk-a .c-btn { flex:none; } /* ── the form: date, time, place, name ── */ .kd-f { display:grid; gap:0 14px; grid-template-columns:1fr; } @media (min-width:520px) { .kd-f { grid-template-columns:1fr 1fr; } } @media (min-width:1000px) { .kd-f { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr); } } .kd-f > * { min-width:0; } /* 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); } /* Own prefix kd-. The kundli itself is j- (pages/kundliview.py). */ /* The example line heads the kundli it names. */ /* WHOSE KUNDLI, ABOVE SECTION 01 AND IN BOLD (Rohit, 28 Sep 2026): the details are the answer to "is this mine?", not a 10px mono footnote. */ #j-out .c-eg-line { justify-content:center; text-align:center; gap:4px 10px; margin:0 0 14px; font-family:var(--font-sans); font-size:14px; letter-spacing:0; text-transform:none; color:var(--ink-2); } #j-out .c-eg-line b { font-size:18px; font-weight:700; color:var(--ink); } #j-out .c-eg-line i { flex-basis:100%; text-align:center; letter-spacing:0; font-size:13px; } #j-out .c-eg { font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; } #j-out .c-eg-off { font-family:var(--font-sans); font-size:14px; letter-spacing:0; text-transform:none; } /* ── why two sites disagree: four cards ── */ .kd-why { display:grid; gap:12px; grid-template-columns:1fr; } @media (min-width:720px) { .kd-why { grid-template-columns:repeat(2,minmax(0,1fr)); } } .kd-why-c { min-width:0; padding:16px 18px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); } .kd-why-c > b { display:block; margin:5px 0 6px; font-size:15.5px; font-weight:700; color:var(--gold-dk); } .kd-why-c > p { margin:0; font-size:14px; line-height:1.6; color:var(--ink-2); } /* ── what else is free: the icon beside the question ── */ .kd-tl-h { display:flex; align-items:center; gap:12px; } .kd-tl-h .c-h3, .kd-tl-h h3 { margin:0; } .kd-tools .l-sub { margin-top:10px; } /* A PHONE READS THE QUESTION AND THE LINKS. Four cards with a paragraph each were 1,474px; the question says what the links are for. */ @media (max-width:640px) { .kd-tools .l-sub { display:none; } .kd-tools .c-card { padding:16px; } .kd-tools .l-tl { margin-top:10px; } } /* The astrologers' six languages wrap rather than end in "Hind…" (the roster card's row is 250px on a 320 screen). */ /* ── Hindi, for what t() does not wrap ── */ :root[lang^="hi"] .kd-why-c > p { font-size:15px; } #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-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-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-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-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-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-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-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); } /* The wrapper t() puts round each Hindi string: no box, the parent's type. */ :root .l-hi { display:contents; font:inherit; color:inherit; } /* The same Hindi rules as the signed-in pages (CSS above): matras need the taller line; under 15px goes up by 2, never past 15; no tracking, caps or slant, which pull a conjunct apart. */ :root[lang^="hi"] body { line-height:1.6; } /* HEADINGS TOO. The display headings are set at ~1.1 for Latin, and in Devanagari that let one line's lower matra meet the next line's upper one: the ू of लो शू ग्रिड ran into the ी of "आपकी जन्म तिथि से". */ :root[lang^="hi"] :is(h1, h2, h3) { line-height:1.32; } /* NO TRACKING ANYWHERE ON A HINDI PAGE. Eyebrows, field labels, the "example" tag and section heads are letter-spaced for Latin capitals; in Devanagari the spacing splits a word at its conjuncts ("मु फ़्त"). One rule, and it wins, rather than a list that misses the next label. */ :root[lang^="hi"] body * { letter-spacing:0 !important; } :root[lang^="hi"] .l-hi { font-size:max(1em, min(calc(1em + 2px), 15px)); letter-spacing:0; text-transform:none; font-style:normal; } :root[lang^="hi"] .l-hi .l-hi { font-size:1em; } /* AND NOT MONO. The small labels are set in the mono face for English; Devanagari in it reads as a typewriter. On a Hindi page the mono face is the sans. */ :root[lang^="hi"] { --font-mono:var(--font-sans); } /* AND A DEVANAGARI FACE IN THE SERIF. The serif stack names Latin faces only, so a Hindi heading fell through to whatever the system had: on a Mac that is Devanagari MT, which sets पें apart from the next letter ("पें टाकल्स", /hi/tarot/ card names). The Latin in a heading keeps the serif; the Devanagari gets the face the body text already uses. */ :root[lang^="hi"] { --font-serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia, "Kohinoor Devanagari","Nirmala UI","Noto Serif Devanagari","Noto Sans Devanagari",serif; } /* THE SHARED PARTS THAT CARRY HINDI WITHOUT t(): the header and drawer (common.chrome writes them in Hindi), the pickers, the report cards, the astrologer rate, the notes and the footer. The .l-hi rule above never reached them, so a /hi/ page had 9.5-13.5px Devanagari and tracked capitals in its menu (review, 28 Sep 2026: measured against the English twin, class by class). Each is its English size +2, never past 15. */ :root[lang^="hi"] .c-nav-i, :root[lang^="hi"] .c-nav-px b, :root[lang^="hi"] .c-dd-i, :root[lang^="hi"] .c-pf-done, :root[lang^="hi"] .c-unknown, :root[lang^="hi"] .c-btn .c-as-rate, :root[lang^="hi"] .rv-btn, :root[lang^="hi"] .c-nav-mi, :root[lang^="hi"] .c-nav-mm, :root[lang^="hi"] .rv-c-d { font-size:15px; } :root[lang^="hi"] .c-nav-px i, :root[lang^="hi"] .c-note, :root[lang^="hi"] .c-as-rate { font-size:14.5px; } :root[lang^="hi"] .rv-c-m, :root[lang^="hi"] .p-hb-k, :root[lang^="hi"] .p-hb-k > * { font-size:14px; } :root[lang^="hi"] .c-drawer-h > *, :root[lang^="hi"] .c-drawer-h, :root[lang^="hi"] .c-dp-wd, :root[lang^="hi"] .c-nav-mh, :root[lang^="hi"] .c-field label { letter-spacing:0; text-transform:none; font-family:var(--font-sans); } :root[lang^="hi"] .c-drawer-h, :root[lang^="hi"] .c-drawer-h > * { font-size:13px; } :root[lang^="hi"] .c-dp-wd { font-size:11px; } :root[lang^="hi"] .c-nav-mh { font-size:11.5px; }