:root{ /* the footer trademark and copyright marks: the logo’s own ink on a light ground, the brand crimson on a dark one */ --mark:#230a4d; /* A flat, temperature-free ground. The old #eef1f8 was a cool pale blue chosen to sit under the daylight gradient that has now gone. Neutral rather than warm on purpose: the panels are already cream, and a warm ground under warm panels leaves nothing to tell them apart except the border. With the ground taking no side, the panels carry all the warmth on the page and read as lit, which is the job the gradient used to do badly. */ --bg:#f2f2f0; --surface:#fffdf9; --surface-2:#faf6ee; --surface-3:#f3ecdd; --ink:#230a4d; --ink-body:#3a3157; --muted:#6f6789; --brand:#d72e47; --brand-deep:#b0203a; --gold:#b4832a; --learn-ink:#96702a; --learn-line:rgba(180,131,42,.38); --brand-soft:rgba(215,46,71,.10);--sel:#2e1063;--sel-deep:#230a4d;--on-sel:#fff;--sel-soft:rgba(35,10,77,.10); --gold-soft:rgba(180,131,42,.14); --ok:#1f8a5b; /* Mixed from the ground above, not from the old blue — a translucent bar tinted a colour the page no longer contains reads as a smear. */ --bg-glass:rgba(242,242,240,.72); --fill-strong:#230a4d; --on-strong:#fff; --line:rgba(35,10,77,.12); --line-strong:rgba(35,10,77,.22); --void:#a49fb5; --sh-1:0 1px 2px rgba(35,10,77,.05); --sh-2:0 3px 10px rgba(35,10,77,.05),0 14px 34px rgba(35,10,77,.06); --sh-3:0 10px 34px rgba(35,10,77,.10),0 24px 60px rgba(35,10,77,.08); --r-sm:9px; --r:14px; --r-lg:20px; --font-display:'Poppins','Tiro Devanagari Hindi',sans-serif; --font-body:'Inter','Tiro Devanagari Hindi',system-ui,sans-serif; --font-mono:'JetBrains Mono','Tiro Devanagari Hindi',ui-monospace,monospace; } html[data-theme="dark"]{ --mark:#f0546c; --sel:#d13048;--sel-deep:#a11529;--on-sel:#fff;--sel-soft:rgba(240,84,108,.16); /* Navy. The previous ground was #1b1633 — an indigo that leaned purple and fought the crimson brand rather than sitting under it. This is blue-led: every surface steps up in lightness on the same hue, which is what makes elevation legible, and the crimson and gold read cleanly against it. Contrast measured on all pairs: the tightest is muted text on the deepest surface at 4.85:1, still clear of the 4.5 body text asks. */ --bg:#0c1626; --surface:#132139; --surface-2:#1a2b47; --surface-3:#223458; --ink:#eef3fb; --ink-body:#c6d2e6; --muted:#94a3be; --brand:#f0546c; --brand-deep:#e8455f; --gold:#e0ad4e; --learn-ink:#e6b862; --learn-line:rgba(224,173,78,.34); --brand-soft:rgba(240,84,108,.15); --gold-soft:rgba(224,173,78,.14); --ok:#3fb984; --bg-glass:rgba(12,22,38,.72); --fill-strong:#eef3fb; --on-strong:#0c1626; --line:rgba(198,210,230,.13); --line-strong:rgba(198,210,230,.24); --void:#6c7c99; --sh-1:0 1px 2px rgba(0,0,0,.42); --sh-2:0 3px 10px rgba(0,0,0,.34),0 14px 34px rgba(0,0,0,.40); --sh-3:0 10px 34px rgba(0,0,0,.48),0 24px 60px rgba(0,0,0,.48); } /* The dark override that used to sit here is gone: body now takes var(--bg) flat in both themes, so restating it for dark said nothing. */ *{box-sizing:border-box} /* The same guard as on body. Body's overflow only reaches the viewport by propagation, and only while html's own overflow is visible — stating it here does not depend on that rule holding. `clip` rather than `hidden` because hidden would make this a scroll container and break the sticky mode tabs. */ html{-webkit-text-size-adjust:100%;overflow-x:clip} body{ margin:0; /* One element wider than the phone dragged the WHOLE document sideways — appbar, tabs and every panel shifted with it, so the layout looked broken far away from whatever was actually too wide. `clip` stops that without creating a scroll container, which matters here: `hidden` would make body a scroll container and break the sticky mode tabs. Browsers without `clip` simply keep today's behaviour rather than losing the tabs. This is a backstop, not a licence — anything genuinely too wide is still fixed at source, because clipped content is unreachable content. */ overflow-x:clip; /* One flat colour, both themes. Light mode used to carry a three-layer sky — a warm sun top-right, cool air top-left, over a vertical fade. It was pretty on an empty page and a problem on a full one: this app is mostly panels, and a ground that changes hue underneath them meant the same cream card read warm at the top of the screen and cool at the bottom, with the panel edges appearing to shift colour as you scrolled. Dark mode had already been flattened for the same reason; this brings light into line rather than leaving the two themes on different principles. */ background:var(--bg); color:var(--ink-body); font-family:var(--font-body); line-height:1.55; min-height:100vh; font-size:15.5px; -webkit-font-smoothing:antialiased; overflow-anchor:none; } .wrap{max-width:1240px;margin:0 auto;padding:28px 28px 80px} .topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px} /* ============================================================================ SECTION SWITCHER — "calibration scale" Rationale: nine bordered boxes in a row always reads as generic, and boxes force equal widths, which is what makes "KP" look empty beside "Bhrigu Nandi Nadi". So: no boxes. Labels sit on a shared hairline baseline and size to their own content. The active section is marked by a single 2px brand rule sitting ON that baseline — one precise mark, not a fill. ========================================================================= */ .modes{ display:flex; flex-wrap:nowrap; justify-content:flex-start; align-items:stretch; gap:0; margin:18px calc(-1 * clamp(10px,1.35vw,22px)) 0; padding:0; /* it rides with the sticky app-bar, so it must never introduce its own scroll frame vertically — only sideways */ overflow-y:hidden; overscroll-behavior-x:contain; flex-shrink:0; width:calc(100% + 2 * clamp(10px,1.35vw,22px)); background:transparent; border:0; border-radius:0; box-shadow:none; /* the shared baseline every label sits on */ border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; scroll-snap-type:x proximity; } .modes::-webkit-scrollbar{display:none} .mode-btn{ appearance:none; cursor:pointer; position:relative; flex:1 1 auto; /* share the row; min-width keeps labels intact */ min-width:max-content; scroll-snap-align:start; display:inline-flex; align-items:center; gap:7px; padding:0 clamp(10px,1.35vw,22px); height:42px; margin:0; background:transparent; border:0; border-radius:0; color:var(--muted); font-family:var(--font-body); font-size:12.5px; font-weight:600; letter-spacing:.005em; line-height:1; white-space:nowrap; transition:color .18s ease, background .18s ease; } /* the indicator: a rule that grows from the centre, sitting on the baseline */ .mode-btn::after{ content:""; position:absolute; left:50%; right:50%; bottom:-1px; height:3px; z-index:1; background:var(--brand); border-radius:2px 2px 0 0; transition:left .22s cubic-bezier(.32,.72,.3,1), right .22s cubic-bezier(.32,.72,.3,1), background .18s ease; } .mode-ico{ display:flex; align-items:center; justify-content:center; width:15px; height:15px; flex:0 0 auto; opacity:.55; transition:opacity .18s ease, color .18s ease; } .mode-ico svg{width:100%; height:100%; display:block} .mode-lbl{display:inline-block; line-height:1; white-space:nowrap} /* ---- states ---------------------------------------------------------- */ .mode-btn:hover{color:var(--ink-body)} .mode-btn:hover .mode-ico{opacity:.85} .mode-btn:hover::after{left:38%; right:38%; background:var(--line-strong)} .mode-btn[aria-selected="true"]{ /* Same reasoning as the subtabs: a heavier weight makes the label wider, so selecting a mode nudged every mode after it along. The underline, the wash and the colour carry the emphasis without touching metrics. */ color:var(--ink); background:linear-gradient(180deg,transparent 0%,var(--sel-soft) 100%); } .mode-btn[aria-selected="true"] .mode-ico{opacity:1; color:var(--sel)} .mode-btn[aria-selected="true"]::after{ left:0; right:0; height:3px; background:var(--sel); box-shadow:0 -1px 10px -1px var(--sel); } .mode-btn:focus-visible{outline:none; color:var(--ink)} .mode-btn:focus-visible::after{left:12%; right:12%; background:var(--gold)} /* dark theme: the indicator carries more weight against a dark ground */ html[data-theme="dark"] .mode-btn[aria-selected="true"]::after{ box-shadow:0 -1px 14px 0 rgba(240,84,108,.55); } html[data-theme="dark"] .mode-ico{opacity:.5} html[data-theme="dark"] .mode-btn[aria-selected="true"] .mode-ico{opacity:1} /* Devanagari sets smaller at the same px and needs looser tracking */ html[lang="hi"] .mode-btn{font-size:13.5px; letter-spacing:0} @media(prefers-reduced-motion:reduce){ .mode-btn,.mode-btn::after,.mode-ico{transition:none} } /* ---- ≤600px ---------------------------------------------------------- */ @media(max-width:600px){ .modes{ margin:12px -13px 0; padding:0 13px; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%); } .mode-btn{flex:0 0 auto; min-width:0; height:42px; padding:0 13px; font-size:12.5px} .mode-ico{width:16px; height:16px} } /* ---- ≤380px: labels only; the icons stop earning their space ---------- */ @media(max-width:380px){ /* Under 380px there is not enough room for a label and its value on one line; stacking beats compressing both until neither reads. */ .gc-row{flex-direction:column;align-items:flex-start;gap:1px} .gc-v{text-align:left} .gc-name{font-size:15.5px} .dsys button{font-size:11px;padding:0 10px} .mode-btn{height:40px; padding:0 11px; font-size:12px; gap:0} .mode-ico{display:none} } .appbar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap; margin:-26px -22px 22px;padding:14px 22px 12px;border-bottom:1px solid transparent; transition:background .22s ease,box-shadow .22s ease,border-color .22s ease; /* Held on its own compositor layer. Without this the backdrop-filter added by .stuck is re-sampled every frame and the bar visibly shudders as the page moves under it. */ will-change:transform;transform:translateZ(0);backface-visibility:hidden} .appbar .modes{flex:1 1 100%;order:3} .appbar .brand{flex:0 1 auto;order:1;min-width:0} .appbar .tb-right{flex:0 0 auto;order:2;margin-left:auto;display:flex;align-items:center;gap:12px;flex-wrap:nowrap} .appbar.stuck{background:var(--bg-glass);-webkit-backdrop-filter:saturate(1.5) blur(13px);backdrop-filter:saturate(1.5) blur(13px);box-shadow:0 6px 22px rgba(35,10,77,.12);border-bottom-color:var(--line)} .brand{display:flex;align-items:center;gap:14px} .brand a{display:flex;align-items:center;line-height:0;min-width:0} .brand-logo{height:auto;width:auto;max-height:34px;max-width:100%;display:block} /* A stray selector sat between these with no declaration block, so the rule below it parsed as "html[data-theme=dark] html[data-theme=dark] .brand-logo.drk" — an inside an , which can never match. The dark logo was therefore never shown; only the light one being hidden made it look as though the swap worked. */ html[data-theme="dark"] .brand-logo.lite{display:none} html[data-theme="dark"] .brand-logo.drk{display:block} html:not([data-theme="dark"]) .brand-logo.drk{display:none} /* Learn and the language toggle sit side by side in the toolbar and are the same kind of thing — a pill you press. They were drawn to different heights (40 vs content-sized ~34), which read as a misalignment. Both now take one number, so a change to either cannot desynchronise them. */ .lang{display:flex;flex:0 0 auto;height:var(--ctl-h,34px);border:1px solid var(--line-strong);border-radius:999px;overflow:hidden;background:var(--surface);box-shadow:var(--sh-1)} .lang button{appearance:none;border:0;background:transparent;color:var(--muted);font-family:var(--font-body);font-weight:600;font-size:13px;padding:0 16px;height:100%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s} .lang button[aria-pressed="true"]{background:var(--sel);color:var(--on-sel)} .tb-right{display:flex;align-items:center;gap:12px} /* ---- the toolbar, and what happens to it on a phone ------------------ Seven controls used to sit in this row and the responsive rules dealt with it by shrinking: labels dropped at 760px, icons hidden, buttons squeezed to 30px squares by 345px. Seven 30px targets in a row is not a toolbar anyone can hit. Now only the two things people reach for constantly stay out — the language pill and the light/dark switch — and the rest fold into a menu. .tb-more is display:contents above the breakpoint, so on a laptop the controls are laid out by .tb-right exactly as before and every existing `.tb-right .learn-btn` rule still matches. Nothing was cloned into a second copy, so the ids and their handlers are untouched. */ .tb-more{display:contents} .tb-burger{display:none} /* DOM order changed when the wrapper went in, so the row order is now stated rather than inherited from the source. */ .tb-right .learn-btn{order:1} .tb-right .consult-btn{order:2} .tb-right .community-btn{order:3} .tb-right .lang{order:3} .tb-right #ioBtn{order:4} .tb-right #themeBtn{order:5} .tb-right #acctBtn{order:6} .tb-right #logoutBtn{order:7} .tb-right .tb-burger{order:8} .tb-right .acct-mob{display:none} @media(max-width:700px){ .appbar .tb-right{position:relative} /* My account, in the bar, just before the language switch. */ .tb-right .acct-mob{display:grid;place-items:center;order:2} .tb-more #acctBtn{display:none !important} /* Matches the pill shape and shadow of the controls beside it rather than inventing a squared-off button of its own. */ .tb-burger{ display:grid;place-items:center;flex:0 0 auto; width:var(--ctl-h,34px);height:var(--ctl-h,34px); border:1px solid var(--line-strong);border-radius:999px; background:var(--surface);color:var(--ink-body);cursor:pointer; box-shadow:var(--sh-1);transition:.15s; } .tb-burger svg{width:17px;height:17px} .tb-burger:hover{border-color:var(--brand);color:var(--brand)} .tb-burger:active{transform:scale(.94)} .tb-burger[aria-expanded="true"]{ border-color:var(--brand);color:var(--brand);background:var(--brand-soft); } /* The panel. Positioned off .tb-right, which is why that gets relative. Surface, hairline and shadow all come from the same tokens the cards in the engine use, so it reads as part of the product rather than as an operating-system menu that happens to be on top of it. */ .tb-more{ display:block;position:absolute;top:calc(100% + 10px);right:0; min-width:236px;padding:7px;border-radius:var(--r); background:var(--surface);border:1px solid var(--line); box-shadow:var(--sh-3); z-index:80;opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98); transform-origin:top right; transition:opacity .18s ease,transform .18s cubic-bezier(.2,.8,.3,1),visibility .18s; } .tb-more.open{opacity:1;visibility:visible;transform:none} /* ---- destinations ---- Learn and Consult keep their gold and crimson in here. They were being flattened to plain grey text rows, which is what made the menu look like a browser context menu rather than part of the engine: the two things in it worth pressing were the two that had been stripped of every mark of being worth pressing. They are the same pills as on a wide toolbar, laid out full width. */ .tb-more .learn-btn{ display:flex !important;align-items:center;justify-content:flex-start !important; width:100% !important;min-width:0 !important;max-width:none !important; height:44px !important;min-height:44px !important; padding:0 14px !important;gap:11px !important; border:1px solid var(--gold) !important;border-radius:11px !important; background:var(--gold-soft) !important;color:var(--gold) !important; font-size:13.5px !important;font-weight:600;text-align:left; box-shadow:none;transition:.16s; } .tb-more .learn-btn+.learn-btn{margin-top:6px} .tb-more .learn-btn:hover{background:var(--gold) !important;color:var(--on-strong) !important} .tb-more .consult-btn{ border-color:var(--brand) !important; background:var(--brand-soft) !important;color:var(--brand) !important; } .tb-more .consult-btn:hover{background:var(--brand) !important;color:#fff !important} .tb-more .community-btn{ border-color:transparent !important; background:var(--brand) !important;color:#fff !important; } .tb-more .community-btn:hover{background:var(--brand-deep) !important;color:#fff !important} .tb-more .learn-btn .ic{display:block !important;width:18px !important;height:18px !important;flex:0 0 auto} .tb-more .learn-btn span{display:inline !important;font-size:13.5px !important} /* ---- utilities ---- Quiet by comparison, and on purpose: hide inputs, light/dark, account and log out are switches, not places to go. A hairline separates the two kinds so the eye does not read six equal options. */ .tb-more .theme-toggle{ display:flex !important;align-items:center;justify-content:flex-start !important; width:100% !important;min-width:0 !important;max-width:none !important; height:42px !important;min-height:42px !important; padding:0 14px !important;gap:11px !important; border:0 !important;border-radius:10px;background:none !important; box-shadow:none !important; color:var(--ink-body);font-size:13.5px;font-weight:500;text-align:left; transition:background .14s,color .14s; } .tb-more .theme-toggle:hover{background:var(--surface-2) !important;color:var(--ink) !important} .tb-more .theme-toggle:active{transform:none} .tb-more .theme-toggle .ic{display:block !important;width:18px !important;height:18px !important;flex:0 0 auto;opacity:.8} .tb-more .theme-toggle::after{content:attr(title);white-space:nowrap} .tb-more #logoutBtn{color:var(--brand)} .tb-more #logoutBtn:hover{background:var(--brand-soft) !important;color:var(--brand) !important} .tb-more #ioBtn{position:relative;margin-top:11px} .tb-more #ioBtn::before{ content:"";position:absolute;left:8px;right:8px;top:-6px; height:1px;background:var(--line); } /* #ioBtn keeps two icons and swaps them by state; only ever show one. */ .tb-more #ioBtn .ic-expand{display:none !important} .tb-more #ioBtn[aria-pressed="true"] .ic-expand{display:block !important} .tb-more #ioBtn[aria-pressed="true"] .ic-collapse{display:none !important} } .theme-toggle{appearance:none;width:40px;height:40px;flex:0 0 auto;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);color:var(--ink-body);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-1);transition:.15s} .theme-toggle:hover{border-color:var(--brand);color:var(--brand)} .theme-toggle:active{transform:scale(.94)} .theme-toggle .ic{width:19px;height:19px} .theme-toggle .ic-sun{display:none} html[data-theme="dark"] .theme-toggle .ic-moon{display:none} html[data-theme="dark"] .theme-toggle .ic-sun{display:block} /* Learn — the notes live outside the engine, so this is a link and not a mode. Gold rather than the crimson accent, and the only labelled control in the right-hand cluster: it should read as an invitation sitting beside the utilities, not as another switch among them. */ .learn-btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:0 0 auto; height:var(--ctl-h,34px);padding:0 16px; border:1px solid var(--gold);border-radius:999px; background:var(--gold-soft);color:var(--gold); font-family:var(--font-body);font-size:13px;font-weight:600; text-decoration:none;white-space:nowrap; box-shadow:var(--sh-1);transition:.15s; } .learn-btn .ic{width:18px;height:18px;flex:0 0 auto} .learn-btn .lb-star{opacity:.75;transition:opacity .2s,transform .3s;transform-origin:12px 4.7px} .learn-btn:hover{background:var(--gold);color:var(--on-strong);border-color:var(--gold); transform:translateY(-1px);box-shadow:0 4px 14px -4px var(--gold)} .learn-btn:hover .lb-star{opacity:1;transform:rotate(90deg)} .learn-btn:active{transform:translateY(0) scale(.97)} .learn-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px} /* ---- Community, told apart from Learn ---- These two sat side by side as identical gold outlines, which made the pair read as one control printed twice: same shape, same weight, same colour, and only the word distinguishing them. They are not the same kind of thing. Learn is a library that does not change. Community is people talking, right now. So Community takes the brand colour and a filled treatment, because a place where something is happening should look live, and Learn keeps the quieter outline. That also matches the rest of the app, where crimson is what you press and gold is what you read. */ .community-btn{ border-color:transparent; background:linear-gradient(135deg,var(--brand),var(--brand-deep)); color:#fff; box-shadow:0 2px 10px -3px var(--brand); } .community-btn:hover{ background:linear-gradient(135deg,var(--brand-deep),var(--brand)); color:#fff;border-color:transparent; transform:translateY(-1px);box-shadow:0 6px 18px -5px var(--brand); } .community-btn:active{transform:translateY(0) scale(.97)} .community-btn:focus-visible{outline:2px solid var(--brand);outline-offset:3px} /* The speech bubble leans in on hover, the way a head turns toward a conversation. Small enough to be felt rather than watched. */ .community-btn .ic{transition:transform .25s cubic-bezier(.34,1.56,.64,1)} .community-btn:hover .ic{transform:translateX(-1px) rotate(-8deg)} /* A live board earns a dot. Shown only when the community has something waiting, so it means something when it is there. */ .community-btn .cb-live{ width:6px;height:6px;border-radius:50%;background:#fff;flex:0 0 auto; box-shadow:0 0 0 0 rgba(255,255,255,.6);animation:cbPulse 2.4s ease-out infinite} @keyframes cbPulse{ 0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)} 70%{box-shadow:0 0 0 6px rgba(255,255,255,0)} 100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}} @media(prefers-reduced-motion:reduce){ .learn-btn:hover,.community-btn:hover{transform:none} .community-btn:hover .ic{transform:none} .community-btn .cb-live{animation:none} } html[lang="hi"] .learn-btn{font-size:14px} /* Consult — the same shape as Learn because they are the same kind of thing: a way out of the engine into something the engine cannot do by itself. Crimson rather than gold, so the pair read as two destinations and not as one control with a duplicate. */ .consult-btn{ border-color:var(--brand,#e04a63); background:var(--brand-soft,rgba(224,74,99,.10)); color:var(--brand,#e04a63); } .consult-btn:hover{ background:var(--brand,#e04a63);color:#fff;border-color:var(--brand,#e04a63); } /* A third colour, for the same reason Consult is not gold: three controls in one colour read as one control repeated. */ .community-btn{ border-color:var(--sel,#2e1063); background:var(--sel-soft,rgba(35,10,77,.10)); color:var(--sel,#2e1063); } .community-btn:hover{ background:var(--sel,#2e1063);color:var(--on-sel,#fff);border-color:var(--sel,#2e1063); } .community-btn:focus-visible{outline:2px solid var(--sel,#2e1063);outline-offset:3px} /* No dark-theme repaint. It used to turn gold here, which is exactly what made the two buttons indistinguishable on the dark app. */ .consult-btn .cb-dot{transition:transform .25s} .consult-btn:hover .cb-dot{transform:scale(1.22);transform-origin:12px 15px} .consult-btn:focus-visible{outline:2px solid var(--brand,#e04a63);outline-offset:3px} .grid.io-hidden{grid-template-columns:minmax(0,1fr)} .grid.io-hidden #input-col{display:none} #ioBtn .ic-expand{display:none} #ioBtn.on .ic-collapse{display:none} #ioBtn.on .ic-expand{display:block} header{position:relative;border:0;padding:6px 0 26px;margin-bottom:26px} header::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;border-radius:3px; background:linear-gradient(90deg,var(--brand) 0,var(--brand) 20%,var(--gold) 20%,var(--gold) 30%,var(--line) 30%,var(--line) 100%)} .eyebrow{font-family:var(--font-mono);font-size:12.7px;letter-spacing:.3em;text-transform:uppercase;color:var(--brand);margin:0 0 10px;font-weight:700} .eyebrow:empty{display:none} .wordmark{font-family:var(--font-display);font-weight:700;font-size:clamp(30px,6vw,54px);line-height:.96;margin:0;letter-spacing:-.015em;color:var(--ink)} .wordmark .dot{color:var(--brand)} .sub{color:var(--ink-body);margin:14px 0 0;max-width:62ch;font-size:15px;line-height:1.6} /* ===== Section nav: always-visible card grid, no hidden/scrolled-off items ===== */ @media(min-width:601px) and (max-width:900px){ } .grid{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:38px;align-items:stretch;margin-top:22px} #input-col{align-self:start} #input-col,#input-col>.panel,.output-wrapper{min-width:0} @media(max-width:860px){.grid{grid-template-columns:minmax(0,1fr)}} .panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;box-shadow:var(--sh-2);transition:box-shadow .18s ease,border-color .18s ease} .panel:hover{box-shadow:var(--sh-3);border-color:var(--line-strong)} .panel h2{font-family:var(--font-display);font-size:16px;letter-spacing:-.005em;text-transform:none;color:var(--ink);margin:0 0 22px;font-weight:600;padding-left:0;position:relative} .panel h2::before{content:none} .panel:not(.hidden) + .panel:not(.hidden){margin-top:28px} /* ===== sub-navigation: clear segmented control instead of a cramped text row ===== */ .subtabs{ /* 12px padding either side plus an 8px gap gives the same 32px between one label and the next as the old 14+4+14 did — but the selected pill now has 8px of clear air around it instead of 4, so it stops crowding the labels beside it. Only the pill has a visible edge, so that gap is the one the eye actually measures. */ display:flex; gap:8px; flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x proximity; margin:0 0 18px; justify-content:flex-start; /* A pill inside a pill needs the ends kept clear. The container is 42px tall, so its corner radius is 21; the buttons are 32px, radius 16. At the button's top edge the container's inner edge has already curved in to about 7.4px, so 8px of padding left under a pixel of clearance and the first tab bled through the corner. 14px puts it comfortably on the straight part of the edge. */ padding:5px 13px; border:1px solid var(--line); border-radius:999px; background:var(--surface-3,var(--surface-2)); box-shadow:inset 0 1px 2px rgba(35,10,77,.06); position:sticky; top:var(--appbar-h,64px); z-index:45; /* sticky needs a non-clipping ancestor chain */ isolation:isolate; scrollbar-width:none; -ms-overflow-style:none; transition:box-shadow .2s ease, background .2s ease; } .subtabs::-webkit-scrollbar{display:none} /* ===== horizontal tab bars on a laptop ===== These bars scroll, but every one of them hid its scrollbar, which is the right call on a phone — you swipe, and a bar permanently showing a scrollbar looks broken. On a desktop it leaves nothing at all: no scrollbar, no arrows, and a tab sliced in half at the right edge that looks like a rendering fault rather than an invitation to scroll. There is no swipe to discover, and shift+wheel is not something most people know. So on pointer devices only, the bars get a real scrollbar, a fade at whichever end has more content behind it, and buttons to step along. Touch is left exactly as it was. */ @media (hover:hover) and (pointer:fine){ .subtabs, .nu-tabs, .modes, .acct-tabs{ scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; -ms-overflow-style:auto; } .subtabs::-webkit-scrollbar, .nu-tabs::-webkit-scrollbar, .modes::-webkit-scrollbar, .acct-tabs::-webkit-scrollbar{display:block;height:7px} .subtabs::-webkit-scrollbar-track, .nu-tabs::-webkit-scrollbar-track, .modes::-webkit-scrollbar-track, .acct-tabs::-webkit-scrollbar-track{background:transparent} .subtabs::-webkit-scrollbar-thumb, .nu-tabs::-webkit-scrollbar-thumb, .modes::-webkit-scrollbar-thumb, .acct-tabs::-webkit-scrollbar-thumb{ background:var(--line-strong);border-radius:99px; border:2px solid transparent;background-clip:content-box; } .subtabs:hover::-webkit-scrollbar-thumb, .nu-tabs:hover::-webkit-scrollbar-thumb, .modes:hover::-webkit-scrollbar-thumb, .acct-tabs:hover::-webkit-scrollbar-thumb{background:var(--muted);background-clip:content-box} /* Room for the scrollbar inside the pill, so it does not sit on top of the tabs or crowd the rounded ends. */ .subtabs{padding-bottom:10px} .nu-tabs{padding-bottom:14px} /* The fade says "there is more this way". Applied to the scroller's own box, and only on the side that actually has content off-screen — a permanent fade on both ends would dim the first and last tab even when the whole bar fits. */ .tabscroll-more-right{ -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent 100%); mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent 100%); } .tabscroll-more-left{ -webkit-mask-image:linear-gradient(to left,#000 calc(100% - 34px),transparent 100%); mask-image:linear-gradient(to left,#000 calc(100% - 34px),transparent 100%); } .tabscroll-more-both{ -webkit-mask-image:linear-gradient(to right,transparent 0,#000 34px,#000 calc(100% - 34px),transparent 100%); mask-image:linear-gradient(to right,transparent 0,#000 34px,#000 calc(100% - 34px),transparent 100%); } /* Step buttons, sitting just outside the bar's ends. Hidden unless there is somewhere to go in that direction. */ /* Fixed, not absolute. These bars are position:sticky, and a sticky element only sticks while its containing block is on screen — so wrapping one in a short relative div to hang buttons off would stop it sticking at all. Positioning against the viewport instead leaves the bars untouched. */ .tabscroll-btn{ position:fixed;z-index:46; width:28px;height:28px;border-radius:50%;cursor:pointer; display:flex;align-items:center;justify-content:center; border:1px solid var(--line-strong);background:var(--surface); color:var(--ink);font:600 14px/1 var(--font-body); box-shadow:0 2px 8px -2px rgba(20,10,40,.45); opacity:0;pointer-events:none;transition:opacity .15s ease,background .15s ease; } .tabscroll-btn.on{opacity:1;pointer-events:auto} .tabscroll-btn:hover{background:var(--surface-3)} .tabscroll-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px} .tabscroll-wrap{position:relative} } /* The container is a full pill, so its corner curves inward and anything sitting in that curve is clipped by it. Rather than tune the padding to the millimetre, the end tabs are given their own margin and the scroll snapping is told to honour it — so the first tab cannot be brought under the corner by any width, zoom level or scroll position. */ .subtabs{scroll-padding-inline:13px} .subtabs button:first-child{margin-left:2px} .subtabs button:last-child{margin-right:2px} .nu-tabs.stuck{box-shadow:0 8px 20px -12px rgba(20,10,40,.45)} .subtabs.stuck{background:var(--bg-glass,var(--surface-2));-webkit-backdrop-filter:saturate(1.5) blur(12px);backdrop-filter:saturate(1.5) blur(12px);box-shadow:0 8px 20px -12px rgba(20,10,40,.45)} .subtabs button{ appearance:none; border:0; background:transparent; color:var(--muted); font-family:var(--font-body); font-size:12.5px; font-weight:600; letter-spacing:.005em; text-transform:none; display:inline-flex; align-items:center; justify-content:center; height:32px; padding:0 12px; cursor:pointer; border-radius:999px; white-space:nowrap; flex:0 0 auto; scroll-snap-align:start; transition:color .15s ease, background .15s ease, box-shadow .15s ease; } .subtabs button:hover{color:var(--ink)} .subtabs button:hover:not([aria-selected="true"]){color:var(--ink);background:var(--surface);box-shadow:var(--sh-1)} .subtabs button[aria-selected="true"]{ /* Weight and tracking deliberately unchanged from the unselected state. This used to jump to 700 and .01em on selection, which makes the label physically wider — so choosing a tab widened its button and pushed every tab to its right along. The gaps looked unequal because they were, and they moved every time you clicked. The pill and the colour carry the emphasis; the text metrics stay put. */ color:var(--on-sel); background:linear-gradient(180deg,var(--sel) 0%,var(--sel-deep) 100%); box-shadow: 0 1px 2px color-mix(in srgb,var(--sel-deep) 55%,transparent), 0 4px 12px -2px color-mix(in srgb,var(--sel) 45%,transparent), inset 0 1px 0 rgba(255,255,255,.24); } .subtabs button[aria-selected="true"]:hover{ background:linear-gradient(180deg,var(--sel) 0%,var(--sel-deep) 100%); } label{display:block;font-size:11px;letter-spacing:.07em;color:var(--muted);margin:0 0 6px;text-transform:uppercase;font-weight:600} .field{margin-bottom:16px;position:relative} input,select{width:100%;min-width:0;background:var(--surface);border:1px solid var(--line-strong);color:var(--ink);font-family:var(--font-body);font-size:14.5px;padding:11px 13px;border-radius:var(--r-sm);font-weight:500;transition:border-color .15s,box-shadow .15s,background .15s} /* Chrome reserves room for spin buttons inside a number field, and that is what was cutting the last digit off latitude and longitude — 14px of the box gone to arrows nobody uses at a step of 0.0001. */ input[type=number]{-moz-appearance:textfield;appearance:textfield} input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} input:hover,select:hover{border-color:var(--void)} input:focus,select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)} input:focus,select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);background:var(--surface)} input[type="number"]{font-family:var(--font-mono)} input[type="date"],input[type="time"]{cursor:pointer} input[type="date"]::-webkit-calendar-picker-indicator,input[type="time"]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.75;padding:2px} input[type="date"]:hover::-webkit-calendar-picker-indicator,input[type="time"]:hover::-webkit-calendar-picker-indicator{opacity:1} html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,html[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator{filter:invert(1) brightness(1.4)} /* custom time picker */ .tp-wrap{position:relative} .tp-input{cursor:pointer;font-family:var(--font-mono);letter-spacing:.04em} .tp-ic{position:absolute;right:11px;top:50%;transform:translateY(-50%);width:19px;height:19px;color:var(--brand);pointer-events:auto;cursor:pointer;opacity:.85} .tp-ic svg{width:100%;height:100%;display:block} .tp-pop{position:absolute;z-index:70;top:calc(100% + 6px);left:0;width:100%;min-width:220px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:12px;animation:tpIn .13s ease} @keyframes tpIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} .tp-head{text-align:center;margin-bottom:10px} .tp-disp{font-family:var(--font-display);font-size:26px;font-weight:800;color:var(--ink);letter-spacing:.02em} .tp-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px} .tp-col-lbl{font-family:var(--font-mono);font-size:10.3px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);font-weight:700;text-align:center;margin-bottom:6px} .tp-scroll{height:150px;overflow-y:auto;display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:2px;scrollbar-width:thin;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2)} .tp-cell{appearance:none;border:none;background:transparent;font-family:var(--font-mono);font-size:16.1px;font-weight:600;color:var(--ink-body);padding:8px 0;border-radius:var(--r-sm);cursor:pointer;transition:.1s} .tp-cell:hover{background:var(--brand-soft);color:var(--brand-deep)} .tp-mer{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px} .tp-mer button{appearance:none;border:1px solid var(--line);background:transparent;font-family:var(--font-mono);font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--ink-body);padding:9px 0;border-radius:var(--r-sm);cursor:pointer;transition:.15s} .tp-mer button:hover{background:var(--brand-soft);color:var(--brand-deep);border-color:var(--brand)} .tp-mer button.sel{background:var(--fill-strong);color:var(--on-strong);border-color:transparent} .tp-cell.sel{background:var(--fill-strong);color:var(--on-strong)} .tp-done{margin-top:10px;width:100%;appearance:none;border:none;background:var(--brand);color:#fff;font-family:var(--font-body);font-size:13px;font-weight:700;padding:10px;border-radius:var(--r);cursor:pointer} .tp-done:hover{background:var(--brand-deep)} /* custom date picker */ .dp-wrap{position:relative} /* "1976-02-28" in mono needs 91px; the box gave it 87. The .03em tracking cost about 4px across ten characters — precisely the shortfall — and the 38px reserved for the calendar icon was more than the icon uses. Both trimmed, so the last digit is no longer clipped. */ .dp-input{cursor:pointer;font-family:var(--font-mono);letter-spacing:0;padding-right:32px} .dp-ic{position:absolute;right:11px;top:50%;transform:translateY(-50%);width:19px;height:19px;color:var(--brand);cursor:pointer;opacity:.85} .dp-ic svg{width:100%;height:100%;display:block} .dp-pop{position:absolute;z-index:70;top:calc(100% + 6px);left:0;min-width:260px;max-width:300px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:12px;animation:tpIn .13s ease} .dp-head{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:10px} .dp-head2{font-family:var(--font-mono);font-size:13.8px;font-weight:700;color:var(--brand);text-align:center;margin-bottom:10px;letter-spacing:.06em} .dp-nav{appearance:none;border:1px solid var(--line-strong);background:var(--surface-2);color:var(--brand);font-size:16px;line-height:1;width:30px;height:30px;border-radius:8px;cursor:pointer;flex:0 0 auto} .dp-nav:hover{background:var(--brand);color:#fff;border-color:var(--brand)} .dp-title{display:flex;gap:4px} .dp-mbtn,.dp-ybtn{appearance:none;border:none;background:transparent;font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--ink);cursor:pointer;padding:6px 8px;border-radius:8px;transition:.1s} .dp-mbtn:hover,.dp-ybtn:hover{background:var(--brand-soft);color:var(--brand-deep)} .dp-wd{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px} .dp-wd span{text-align:center;font-family:var(--font-mono);font-size:10.9px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em} .dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px} .dp-cell{appearance:none;border:none;background:transparent;font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--ink-body);aspect-ratio:1/1;border-radius:8px;cursor:pointer;transition:.1s;display:flex;align-items:center;justify-content:center} .dp-cell.empty{pointer-events:none} .dp-cell:hover{background:var(--brand-soft);color:var(--brand-deep)} .dp-cell.today{box-shadow:inset 0 0 0 1.5px var(--brand-soft)} .dp-cell.sel{background:var(--fill-strong);color:var(--on-strong)} .dp-mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px} .dp-mcell{appearance:none;border:1px solid var(--line);background:var(--surface-2);font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--ink-body);padding:12px 0;border-radius:8px;cursor:pointer;transition:.1s} .dp-mcell:hover{border-color:var(--brand);color:var(--brand)} .dp-mcell.sel{background:var(--fill-strong);color:var(--on-strong);border-color:var(--fill-strong)} .dp-yscroll{height:200px;overflow-y:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;scrollbar-width:thin} .dp-ycell{appearance:none;border:1px solid var(--line);background:var(--surface-2);font-family:var(--font-mono);font-size:14.9px;font-weight:600;color:var(--ink-body);padding:9px 0;border-radius:8px;cursor:pointer;transition:.1s} .dp-ycell:hover{border-color:var(--brand);color:var(--brand)} .dp-ycell.sel{background:var(--fill-strong);color:var(--on-strong);border-color:var(--fill-strong)} input:hover,select:hover{border-color:var(--void)} input:focus,select:focus{outline:none;border-color:var(--brand);background:var(--surface);box-shadow:0 0 0 3px var(--brand-soft)} .row-2{display:grid;grid-template-columns:1fr 1fr;gap:10px} .row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px} .check{display:flex;align-items:center;gap:9px;margin-top:4px} .check input{width:auto} .check label{margin:0;text-transform:none;font-size:12.5px;color:var(--ink-body);font-weight:500} /* city search dropdown */ .place-wrap{position:relative} .place-wrap>input{padding-right:40px} .place-clear{position:absolute;top:50%;right:8px;transform:translateY(-50%);width:25px;height:25px;padding:0;border:1px solid var(--line-strong);border-radius:50%;background:var(--surface);color:var(--muted);font-size:16px;line-height:1;display:none;align-items:center;justify-content:center;cursor:pointer;z-index:5} .place-clear:hover{background:var(--brand);border-color:var(--brand);color:#fff} .place-clear:active{transform:translateY(-50%) scale(.9)} .cresults{position:absolute;left:0;right:0;top:100%;z-index:50;background:var(--surface);border:1px solid var(--line-strong);border-top:0;border-radius:0 0 6px 6px;max-height:230px;overflow-y:auto;box-shadow:0 12px 26px rgba(35,10,77,.14)} .cresult{padding:10px 12px;cursor:pointer;font-size:14px;border-bottom:1px solid var(--line)} .cresult:last-child{border-bottom:0} .cresult:hover,.cresult.active{background:var(--surface-2)} .cresult small{color:var(--muted);font-size:12px} .hint{font-size:11.5px;color:var(--muted);margin-top:5px} /* summary chips */ .chips{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:8px} @media(max-width:460px){.chips{grid-template-columns:1fr}} .chip{background:linear-gradient(180deg,var(--surface),var(--surface-2));border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;position:relative;overflow:hidden} .chip::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold);opacity:.55} .chip .k{font-family:var(--font-body);font-size:11.5px;letter-spacing:.02em;text-transform:none;color:var(--muted);font-weight:600} .chip .v{font-family:var(--font-display);font-size:18px;color:var(--ink);margin-top:4px;font-weight:600;line-height:1.2} .chip .v small{font-family:var(--font-body);font-size:12px;color:var(--brand);font-weight:600} .wholine{font-family:var(--font-display);font-size:20px;color:var(--ink);margin:0 0 4px;font-weight:600} .whometa{font-size:12.5px;color:var(--muted);margin:0 0 16px} /* chart */ .stage{display:block;text-align:center;padding:16px;background:radial-gradient(circle at 50% 38%,var(--surface-2),var(--surface));border:1px solid var(--line);border-radius:var(--r);margin:4px 0 8px} /* Scrollbars inside panels: slim, themed, and only visible when the pointer is near. The browser default is a heavy grey bar that fights the cream surfaces. */ .scroll, .cresults, .kp-tw, .chat-log, #cwPickerList, #acctChartList, .acct-modal, .acct-card, .pw-modal, .ga-overlay, #ga-content{ scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; } .scroll::-webkit-scrollbar, .cresults::-webkit-scrollbar, .kp-tw::-webkit-scrollbar, .chat-log::-webkit-scrollbar, #cwPickerList::-webkit-scrollbar, #acctChartList::-webkit-scrollbar, .acct-modal::-webkit-scrollbar, .acct-card::-webkit-scrollbar, .pw-modal::-webkit-scrollbar, .ga-overlay::-webkit-scrollbar, #ga-content::-webkit-scrollbar{ width:9px; height:9px; } .scroll::-webkit-scrollbar-track, .cresults::-webkit-scrollbar-track, .kp-tw::-webkit-scrollbar-track, .chat-log::-webkit-scrollbar-track, #cwPickerList::-webkit-scrollbar-track, #acctChartList::-webkit-scrollbar-track, .acct-modal::-webkit-scrollbar-track, .acct-card::-webkit-scrollbar-track, .pw-modal::-webkit-scrollbar-track, .ga-overlay::-webkit-scrollbar-track, #ga-content::-webkit-scrollbar-track{ background:transparent; } .scroll::-webkit-scrollbar-thumb, .cresults::-webkit-scrollbar-thumb, .kp-tw::-webkit-scrollbar-thumb, .chat-log::-webkit-scrollbar-thumb, #cwPickerList::-webkit-scrollbar-thumb, #acctChartList::-webkit-scrollbar-thumb, .acct-modal::-webkit-scrollbar-thumb, .acct-card::-webkit-scrollbar-thumb, .pw-modal::-webkit-scrollbar-thumb, .ga-overlay::-webkit-scrollbar-thumb, #ga-content::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:99px; border:2.5px solid transparent; background-clip:content-box; } .scroll:hover::-webkit-scrollbar-thumb, .cresults:hover::-webkit-scrollbar-thumb, .kp-tw:hover::-webkit-scrollbar-thumb, .chat-log:hover::-webkit-scrollbar-thumb{ background:var(--void); background-clip:content-box; } .scroll::-webkit-scrollbar-corner, .cresults::-webkit-scrollbar-corner, .kp-tw::-webkit-scrollbar-corner{ background:transparent; } .bnn-r{display:inline-block;font-size:9.5px;font-weight:700;color:var(--brand); border:1px solid var(--brand);border-radius:4px;padding:0 3px;vertical-align:1px;margin-left:3px} .bnn-hit td{background:var(--brand-soft)} .chart-box{position:relative;width:100%;max-width:400px;aspect-ratio:1/1;margin:0 auto;contain:layout paint} .chart-box>svg{position:absolute;inset:0;width:100%;height:100%;display:block} svg{max-width:100%;height:auto} .chart-frame{fill:var(--surface);stroke:var(--ink);stroke-width:2.4;stroke-linejoin:round;pointer-events:none;filter:drop-shadow(0 2px 6px rgba(35,10,77,.10))} .chart-line{stroke:var(--ink);stroke-width:1.15;fill:none;opacity:.42;stroke-linecap:round;pointer-events:none} /* The ascendant mark on the fixed-sign charts. Brand colour so it reads as a statement about the chart rather than another grid line. */ .lagna-tick{font-family:var(--font-mono);font-size:10px;font-weight:700; fill:var(--brand);letter-spacing:.02em} .house-num{fill:var(--muted);font-family:var(--font-mono);font-size:13px;dominant-baseline:middle;text-anchor:middle;font-weight:700;pointer-events:none} /* cusp numbers — only drawn for charts whose houses are cuspal (KP/Placidus), where the house cannot be counted off the lagna */ .cusp-num{fill:var(--brand);font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;dominant-baseline:middle;font-weight:700;opacity:.85;pointer-events:none} .pl-row{font-family:var(--font-mono);font-size:17px;font-weight:700;dominant-baseline:middle;pointer-events:none} .house-region{fill:transparent;stroke:transparent;cursor:pointer;pointer-events:all;transition:fill .12s} .house-region:hover{fill:var(--brand-soft)} .pl-chip{pointer-events:all;cursor:pointer} .pl-row-deg{font-size:15.5px} .pl{fill:var(--ink)} .pl-sun{fill:var(--gold)} .pl-lagna{fill:var(--brand)} .pl-up{fill:#2f9e8f} .pl-kara{fill:#7a3ea6} .pl-deg{fill:var(--muted);font-size:11px;font-weight:700} .pl-retro{fill:var(--brand);font-size:10px;font-weight:700} .pl-comb{fill:#c98a1e;font-size:10px;font-weight:700} .chart-opts{display:flex;gap:18px;flex-wrap:wrap;margin:2px 0 10px;justify-content:center} .opt{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-body);cursor:pointer;font-weight:500} input[type=checkbox]{appearance:none;-webkit-appearance:none;margin:0;padding:0;flex:0 0 auto;width:18px;height:18px;min-width:18px;border:1.5px solid var(--line-strong);border-radius:5px;background:var(--surface-2);cursor:pointer;position:relative;vertical-align:middle;transition:background .12s,border-color .12s} input[type=checkbox]:hover{border-color:var(--brand)} input[type=checkbox]:checked{background:var(--brand);border-color:var(--brand)} input[type=checkbox]:checked::after{content:"";position:absolute;left:5px;top:1px;width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)} input[type=checkbox]:focus-visible{outline:2px solid var(--brand);outline-offset:2px} .mk-note{font-size:12px;color:var(--muted);margin:10px 0 0;text-align:center} .mk-note b{color:var(--brand)} .mk-note i{color:#c98a1e;font-style:normal} .mk-note u{color:#2f9e8f;text-decoration:none} .mk-note s{color:#1f8a5b;text-decoration:none} .varga-pick{text-align:center;margin:2px 0 16px} .varga-hint{font-family:var(--font-body);font-size:12.5px;letter-spacing:.01em;text-transform:none;color:var(--muted);font-weight:600;margin:0 0 10px} .varga-select{display:inline-block;position:relative;max-width:340px;width:100%} .varga-select::after{content:"▾";position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--brand);font-size:13px;pointer-events:none} .varga-select select{-webkit-appearance:none;appearance:none;width:100%;text-align:center;text-align-last:center;font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--ink);background:linear-gradient(180deg,var(--surface),var(--surface-2));border:1px solid var(--line);border-radius:999px;padding:12px 34px;box-shadow:none;cursor:pointer;transition:border-color .15s,box-shadow .15s} .varga-select select:hover{border-color:var(--brand)} .varga-select select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)} .varga-info-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin-top:12px;padding:0;border:1px solid var(--line);background:var(--surface);color:var(--brand);border-radius:50%;cursor:pointer;box-shadow:none;transition:.15s;vertical-align:middle} .varga-info-btn svg{width:17px;height:17px} .varga-info-btn:hover{background:var(--brand);color:#fff;border-color:var(--brand)} .varga-info-btn:active{transform:scale(.94)} .cstyle-toggle{display:flex;justify-content:center;gap:4px;margin:2px 0 10px;background:var(--surface-2);border-radius:999px;padding:4px;border:1px solid var(--line)} .cstyle-toggle button{appearance:none;border:0;background:transparent;color:var(--muted);font-family:var(--font-body);font-size:12.5px;font-weight:600;letter-spacing:.01em;text-transform:none;padding:7px 16px;border-radius:999px;cursor:pointer;transition:.15s;box-shadow:none;flex:1} .cstyle-toggle button:hover{color:var(--ink)} .cstyle-toggle button[aria-selected="true"]{background:var(--sel);color:var(--on-sel);border-color:var(--sel);box-shadow:var(--sh-1)} .upa-legend{color:var(--ink-body)} .upa-legend b{color:#2f9e8f} /* panchang / chogadiya / hora */ .psubh{font-family:var(--font-display);font-size:13.5px;letter-spacing:0;text-transform:none;color:var(--ink);margin:24px 0 12px;font-weight:600;padding-left:12px;position:relative} .psubh::before{content:"";position:absolute;left:0;top:1px;bottom:1px;width:3px;border-radius:2px;background:var(--brand)} .psubh-good{color:var(--ok)} .psubh-good::before{background:var(--ok)} .psubh-bad{color:var(--brand)} .psubh-bad::before{background:var(--brand)} .pdet{margin-top:16px;border-top:1px solid var(--line)} .pdet>summary{cursor:pointer;font-family:var(--font-mono);font-size:12.7px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);font-weight:700;padding:10px 0;list-style:none} .pdet>summary::-webkit-details-marker{display:none} .pdet>summary::before{content:"▸ ";color:var(--muted)} .pdet[open]>summary::before{content:"▾ "} .pdim{color:var(--muted)} .pgrid,.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px} @media(max-width:560px){.pgrid,.cgrid{grid-template-columns:1fr}} /* flex-wrap so a long value drops to its own line instead of being pushed out of the row: a flex item defaults to min-width:auto, so the date could neither shrink nor wrap and simply ran past the edge of the panel. */ .prow{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;align-items:baseline;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 14px;transition:border-color .14s,box-shadow .14s} .prow:hover{border-color:var(--line-strong);box-shadow:var(--sh-1)} .prow .pk{font-family:var(--font-mono);font-size:12.1px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:700;white-space:nowrap} .prow .pv{font-family:var(--font-display);font-size:15px;color:var(--ink);font-weight:600;text-align:right;line-height:1.35; /* min-width:0 is what actually lets it shrink; the rest lets a long date break rather than overflow. */ min-width:0;flex:1 1 auto;overflow-wrap:anywhere} .prow .pv .pend{font-family:var(--font-mono);font-size:11.5px;color:var(--brand);font-weight:700;white-space:nowrap;margin-left:7px;letter-spacing:.02em} .prow .pv .pseq{opacity:.72;font-size:.94em} .prow .pv .pday{opacity:.7;font-family:var(--font-mono);font-size:10.5px} .prow .pv .psub{color:var(--muted);font-weight:500} .pnum{display:inline-block;min-width:18px;font-family:var(--font-mono);font-size:12.7px;color:var(--brand);font-weight:700;margin-right:6px;text-align:right} .pv.nat-good{color:#1f8a5b} .pv.nat-bad{color:var(--brand-deep)} .crow,.hrow{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--line);border-left-width:4px;border-radius:var(--r-sm);padding:11px 13px;background:var(--surface-2);transition:box-shadow .14s,transform .1s} .crow:hover,.hrow:hover{box-shadow:var(--sh-1)} .crow .cn,.hrow .hn{font-family:var(--font-display);font-size:15px;color:var(--ink);font-weight:600} .crow .ct,.hrow .ht{font-family:var(--font-mono);font-size:13.8px;color:var(--ink-body);font-weight:700} .nat2-0{border-left-color:#1f8a5b} .nat2-1{border-left-color:var(--muted)} .nat2-2{border-left-color:var(--brand)} .legend{display:flex;flex-wrap:wrap;gap:5px 14px;margin:14px 2px 2px;font-family:var(--font-mono);font-size:12.7px;color:var(--muted);font-weight:700} .legend b{color:var(--ink)} .legend .lg-sun b{color:var(--gold)} .legend .lg-la b{color:var(--brand)} .scroll{overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:2px;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent 100%);mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent 100%)} .scroll:hover,.scroll:focus-within{-webkit-mask-image:none;mask-image:none} table{width:100%;border-collapse:collapse;margin-top:8px;min-width:520px} th,td{text-align:left;padding:11px 9px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:middle} th{font-family:var(--font-mono);font-size:12.1px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700;border-bottom:1.5px solid var(--line-strong)} tbody tr{transition:background .12s} tbody tr:hover{background:var(--surface-2)} td.name{font-family:var(--font-display);font-size:16px;color:var(--ink);font-weight:600} td.deg{font-family:var(--font-mono);color:var(--brand-deep);white-space:nowrap;font-weight:700} td.dim{color:var(--ink-body);font-size:12.5px} td.house{font-family:var(--font-mono);color:var(--brand);text-align:center;font-weight:700;font-size:17.2px} td.retro{font-family:var(--font-mono);text-align:center;color:var(--brand);font-weight:700} .gg-pos{white-space:nowrap} .ps-sign{color:var(--ink);font-weight:600} .ps-deg{font-family:var(--font-mono);color:var(--brand-deep);font-weight:700;font-size:14.4px;margin-left:3px} .nl{color:var(--gold);font-weight:700} /* planets view toggle */ .gv-toggle{display:inline-flex;border:1px solid var(--line-strong);border-radius:999px;overflow:hidden;margin:0 0 14px;box-shadow:var(--sh-1)} .gv-toggle button{appearance:none;border:none;background:var(--surface);color:var(--muted);font-family:var(--font-mono);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:8px 18px;cursor:pointer;transition:.12s;display:flex;align-items:center;gap:6px} .gv-toggle button svg{width:15px;height:15px} .gv-toggle button+button{border-left:1px solid var(--line-strong)} .gv-toggle button:hover{color:var(--brand)} .gv-toggle button.on{background:var(--sel);color:var(--on-sel)} /* planets — card grid */ .gcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:12px} .gcard{border:1px solid var(--line);border-radius:14px;background:var(--surface-2);padding:15px 17px;box-shadow:var(--sh-1);transition:border-color .12s,box-shadow .12s} .gcard:hover{border-color:var(--brand);box-shadow:var(--sh-2)} .gc-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px} .gc-head{display:flex;align-items:center;justify-content:space-between;gap:10px} .gc-lead{display:flex;align-items:center;gap:11px;min-width:0} .gc-glyph{width:36px;height:36px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:20px;line-height:1;background:var(--surface);border:1.5px solid var(--gcol,var(--line-strong));color:var(--gcol,var(--ink));box-shadow:var(--sh-1)} .gc-name{font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--brand-deep);cursor:pointer;display:inline-flex;align-items:center;gap:6px;border-bottom:1.5px dotted var(--brand);transition:color .12s} .gc-name::after{content:"›";font-family:var(--font-body);font-size:17px;color:var(--brand);opacity:.7;transition:transform .12s} .gc-name:hover{color:var(--brand)} .gc-name:hover::after{transform:translateX(2px)} .gc-state{font-family:var(--font-mono);font-size:10.5px;font-weight:700;color:var(--brand);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap} .gc-pos{margin:5px 0 11px;padding-bottom:11px;border-bottom:1px solid var(--line)} .gc-rows{display:flex;flex-direction:column;gap:9px} .gc-row{display:flex;align-items:center;justify-content:space-between;gap:12px} .gc-k{font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);flex:0 0 auto} .gc-v{text-align:right;font-size:14.5px;color:var(--ink-body);font-weight:600;min-width:0} .gc-v .nak-tap{font-size:14.5px} .gc-v.gc-lord{color:var(--gold-deep,#b8860b);font-weight:700} /* planets — table */ .gtbl{width:100%;border-collapse:collapse;min-width:580px;margin-top:6px} .gtbl th{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;text-align:left;padding:10px 9px;border-bottom:1.5px solid var(--line-strong);white-space:nowrap} .gtbl td{padding:11px 9px;border-bottom:1px solid var(--line);font-size:13.6px;vertical-align:middle;white-space:nowrap} .gtbl tbody tr:last-child td{border-bottom:none} .gtbl tbody tr:hover{background:var(--surface-2)} .gtbl .ps-sign{font-weight:600} .gt-name{font-family:var(--font-display);font-size:16px;color:var(--brand-deep);font-weight:700;cursor:pointer;white-space:nowrap;border-bottom:1.5px dotted var(--brand);display:inline-block} .gt-name:hover{color:var(--brand)} .gtbl .nak-tap{white-space:nowrap} .gtbl .nl{color:var(--gold-deep,#b8860b);font-weight:700} .gtbl .retro{font-family:var(--font-mono);color:var(--brand);font-weight:700;font-size:11.5px} .gtbl td.gt-pada{text-align:center} .kara{font-family:var(--font-mono);font-weight:700;color:var(--ink);letter-spacing:.02em} .dasha-now{background:rgba(215,46,71,.08)} .dasha-now td:first-child{position:relative} .dasha-now td:first-child::before{content:"▸";color:var(--brand);position:absolute;left:-2px} /* dasha drill-down explorer */ .dsub{margin:-6px 0 14px;padding:11px 13px;background:var(--surface-2); border:1px solid var(--line);border-radius:var(--r-sm)} .dsub-row{display:flex;align-items:center;gap:11px;flex-wrap:wrap} .dsub-row+.dsub-row{margin-top:9px;padding-top:9px;border-top:1px solid var(--line)} .dsub-lbl{font-size:12px;color:var(--muted);font-weight:600;min-width:62px} .dvar{display:inline-flex;gap:3px;padding:3px;background:var(--surface); border:1px solid var(--line);border-radius:99px} .dvar button{appearance:none;border:0;background:transparent;color:var(--muted); font-family:var(--font-body);font-size:12.5px;font-weight:600;padding:6px 14px; border-radius:99px;cursor:pointer;transition:.15s} .dvar button:hover:not([aria-pressed="true"]){color:var(--ink)} .dvar button[aria-pressed="true"]{background:var(--sel);color:var(--on-sel)} .dsys{display:inline-flex;gap:3px;margin:0 0 16px;padding:4px; border:1px solid var(--line);border-radius:999px;background:var(--surface-2)} .dsys button{appearance:none;border:0;background:transparent;color:var(--muted); font-family:var(--font-body);font-size:12px;font-weight:600;letter-spacing:.005em; height:30px;padding:0 15px;border-radius:999px;cursor:pointer;white-space:nowrap; transition:color .15s ease,background .15s ease} .dsys button:hover:not([aria-pressed="true"]){color:var(--ink)} .dsys button[aria-pressed="true"]{background:var(--sel);color:var(--on-sel)} .rect-ev{margin:16px 0;padding:14px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r)} .rect-ev-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px; font-size:12.5px;font-weight:600;color:var(--ink)} .rect-ev-row{display:flex;gap:8px;align-items:center;margin-bottom:7px} .rect-ev-row select{flex:1 1 auto;min-width:0} .rect-ev-row input{flex:0 0 150px} .rect-ev-del{flex:0 0 auto;appearance:none;border:0;background:var(--brand-soft);color:var(--brand-deep); font-size:12px;font-weight:700;padding:7px 10px;border-radius:8px;cursor:pointer} table.rect td.sc{font-family:var(--font-mono);font-weight:700;text-align:right} table.rect tr.best{background:var(--sel-soft)} table.rect tr.best td:first-child{box-shadow:inset 3px 0 0 var(--sel)} .rect-warn{background:var(--gold-soft)!important;border-left-color:var(--gold)!important;line-height:1.6} .rect-conf{margin:0 0 12px;padding:11px 14px;border-radius:var(--r); background:var(--sel-soft);border-left:3px solid var(--sel);font-size:13px;color:var(--ink)} .rect-badge{display:inline-block;padding:3px 11px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap} .rect-badge.v-strong{background:rgba(31,138,91,.16);color:#17805a} .rect-badge.v-fair{background:var(--gold-soft);color:var(--gold)} .rect-badge.v-weak{background:var(--surface-3);color:var(--muted)} .rect-why{font-size:11px;color:var(--muted);font-family:var(--font-mono)} .pb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin-top:4px} .pb-card{border:1px solid var(--line);border-left-width:3px;border-radius:var(--r); padding:13px 15px;background:var(--surface-2)} .pb-card.good{border-left-color:var(--ok)} .pb-card.bad{border-left-color:var(--brand)} .pb-card.neu{border-left-color:var(--muted)} .pb-k{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase; color:var(--muted);font-weight:700} .pb-v{font-family:var(--font-display);font-size:17px;font-weight:600;color:var(--ink);margin:4px 0 2px} .pb-d{font-size:12.5px;color:var(--muted);line-height:1.5} .pb-tag{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:999px;margin-top:7px} .pb-tag.good{background:rgba(31,138,91,.15);color:var(--ok)} .pb-tag.bad{background:var(--brand-soft);color:var(--brand-deep)} .pb-tag.neu{background:var(--surface-3);color:var(--muted)} .pb-rashi{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px} .pb-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line); border-radius:999px;padding:5px 11px;font-size:12px;background:var(--surface)} .pb-chip b{font-weight:600;color:var(--ink)} .pb-chip.good{border-color:rgba(31,138,91,.4)} .pb-chip.bad{border-color:rgba(215,46,71,.35)} .kp-win{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)} .kp-winrow{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;padding:5px 0; border-bottom:1px solid var(--line-2)} .kp-winrow:last-child{border-bottom:0} .kp-wd{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--ink);min-width:172px} .kp-wl{font-size:12px;color:var(--muted)} /* Saved kundlis are reachable from every mode, not just the details panel, so this sits in the toolbar rather than inside the workspace bar. It keeps its label where there is room and collapses to the icon when there is not — the title attribute carries the meaning either way. */ /* Lives under the birth details rather than the toolbar: opening saved charts belongs next to the form you would load them into, not beside the theme switch. Full width here, so it reads as a panel action. */ .tb-kundli{display:flex;align-items:center;justify-content:center;gap:8px;width:100%; margin-top:10px;appearance:none;cursor:pointer;font-family:var(--font-body); font-size:12.5px;font-weight:700;letter-spacing:.01em; padding:11px 16px;border-radius:999px; border:1px solid var(--line-strong);background:var(--surface);color:var(--ink); transition:border-color .15s,background .15s,transform .15s} .tb-kundli .ic{width:15px;height:15px;flex:0 0 auto} .tb-kundli:hover{border-color:var(--brand);background:var(--surface-2);transform:translateY(-1px)} .tb-kundli:focus-visible{outline:2px solid var(--sel);outline-offset:2px} .tb-kundli.hidden{display:none} /* data-busy swaps the label for the orrery; without a min-width the button collapses to the spinner's own size and the toolbar jumps. The global busy rule hides labels with text-indent, which does nothing to an SVG — so both children are hidden explicitly, leaving only the pseudo-element rings (which visibility on siblings cannot touch). */ .tb-kundli[data-busy="1"]{min-height:41px} .tb-kundli[data-busy="1"] .ic, .tb-kundli[data-busy="1"] span{visibility:hidden} @media(prefers-reduced-motion:reduce){ .tb-kundli:hover{transform:none} } .rp-secs{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;margin-bottom:14px} .rp-secs label{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink);cursor:pointer} .rp-secs input{accent-color:var(--brand)} .rp-depth{display:flex;align-items:center;gap:10px;margin-bottom:8px} .rp-depth label{font-family:var(--font-mono);font-size:10px;letter-spacing:.11em; text-transform:uppercase;color:var(--muted);flex:0 0 auto} .rp-depth select{flex:1;padding:9px 11px;border:1px solid var(--line-strong);border-radius:10px; background:var(--surface-2);color:var(--ink);font:inherit;font-size:13px} /* while working, the options are replaced rather than merely disabled — a greyed-out form still invites clicking */ .rp-busy{display:none;text-align:center;padding:26px 4px 8px} .rp-card-working .rp-secs, .rp-card-working .rp-depth, .rp-card-working .rp-est, .rp-card-working .vc-acts, .rp-card-working .vc-hint, .rp-card-working .vc-x{display:none} .rp-card-working .rp-busy{display:block} .rp-busy .orb.lg{width:54px;height:54px;--orb:54px;margin:0 auto 18px} .rp-busy-h{font-family:var(--font-display);font-size:17px;font-weight:700; color:var(--ink);margin-bottom:6px;letter-spacing:-.01em} .rp-busy-s{font-size:12.5px;color:var(--muted);line-height:1.55; max-width:300px;margin:0 auto 16px} .rp-busy-stage{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em; text-transform:uppercase;color:var(--brand-deep);min-height:14px} .rp-log{list-style:none;margin:14px auto 0;padding:0;max-width:290px;text-align:left} .rp-log li{display:flex;justify-content:space-between;gap:10px; font-family:var(--font-mono);font-size:10.5px;color:var(--muted); padding:3px 0;border-bottom:1px solid var(--line-2)} .rp-log li b{color:var(--ink);font-weight:600} .rp-log li.slow b{color:var(--brand-deep)} .rp-busy-warn{margin-top:16px;padding-top:12px;border-top:1px solid var(--line); font-size:11.5px;color:var(--brand-deep);font-weight:600} .rp-est{font-family:var(--font-mono);font-size:11px;color:var(--muted);margin:0 0 4px} .rp-est.warn{color:var(--brand-deep)} @media(max-width:460px){ .rp-secs{grid-template-columns:1fr} } /* ===== VOICE INPUT ====================================================== The button is hidden by default and only revealed once the browser is confirmed to support SpeechRecognition — Firefox has no implementation, and a mic button that does nothing is worse than none. */ .vc-open{display:inline-flex;align-items:center;gap:8px;width:100%;justify-content:center; margin-bottom:14px;appearance:none;cursor:pointer;font-family:var(--font-body); font-size:12.5px;font-weight:700;padding:10px 16px;border-radius:999px; border:1px dashed var(--line-strong);background:transparent;color:var(--ink); transition:border-color .15s,background .15s} .vc-open svg{width:16px;height:16px} .vc-open:hover{border-style:solid;border-color:var(--brand);background:var(--surface-2)} .vc-open.hidden{display:none} .vc-modal{position:fixed;inset:0;z-index:390;background:rgba(20,10,40,.5); backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px); display:flex;align-items:center;justify-content:center;padding:18px} .vc-modal.hidden{display:none} .vc-card{position:relative;background:var(--surface);border:1px solid var(--line); border-radius:var(--r-lg);max-width:430px;width:100%;padding:24px;box-shadow:var(--sh-3)} .vc-card h3{font-family:var(--font-display);font-size:16px;color:var(--ink); margin:0 0 6px;padding-right:30px} .vc-hint{font-size:12px;color:var(--muted);line-height:1.55;margin:0 0 16px} .vc-x{position:absolute;top:13px;right:13px;appearance:none;border:0;background:var(--surface-2); width:28px;height:28px;border-radius:50%;font-size:17px;line-height:1;color:var(--muted);cursor:pointer} /* listening state — reuses the shared orrery so every wait in the app matches */ /* speaking-language chips — the UI may be in English while the user speaks Hindi, and picking the wrong recogniser locale is a common reason nothing is transcribed at all */ .vc-langs{display:flex;align-items:center;gap:6px;margin:0 0 12px;font-size:11.5px;color:var(--muted)} .vc-langs span{margin-right:2px} .vc-langs button{appearance:none;border:1px solid var(--line-strong);background:transparent; color:var(--muted);font-family:inherit;font-size:11.5px;font-weight:700; padding:4px 11px;border-radius:999px;cursor:pointer} .vc-langs button.on{background:var(--sel);color:var(--on-sel);border-color:transparent} /* step rail — three dots and a counter, so the flow never feels open-ended */ .vc-steps{display:flex;align-items:center;gap:6px;margin:0 0 12px} .vc-steps i{width:22px;height:3px;border-radius:2px;background:var(--line-strong);display:block} .vc-steps i.on{background:var(--sel)} .vc-steps i.done{background:var(--ok)} .vc-steps em{margin-left:6px;font-family:var(--font-mono);font-size:10px;font-style:normal; letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .vc-ask{font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--ink);margin:0 0 4px} .vc-eg{font-size:11.5px;color:var(--muted);line-height:1.5;margin:0 0 12px} .vc-warn{font-size:12px;color:var(--brand-deep);background:var(--brand-soft); border-radius:var(--r-sm);padding:8px 11px;margin:0 0 12px;line-height:1.45} .vc-listen{display:flex;flex-direction:column;align-items:center;gap:14px;padding:18px 0 6px;text-align:center} .vc-listen .ld-lbl{font-size:13px;color:var(--muted)} .vc-live{min-height:40px;max-height:120px;overflow-y:auto;font-size:14px;line-height:1.5; color:var(--ink);max-width:330px;font-style:italic} .vc-live:empty::after{content:"\2026";color:var(--muted)} /* review — nothing is applied until the user confirms, because a misheard minute silently produces a chart for the wrong lagna */ .vc-heard{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm); padding:10px 12px;margin-bottom:14px;font-size:12.5px;line-height:1.5;color:var(--body);font-style:italic} .vc-heard b{display:block;font-style:normal;font-family:var(--font-mono);font-size:10px; letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:4px} .vc-rev{font-size:11.5px;font-weight:700;color:var(--ink);margin:0 0 9px} .vc-row{display:flex;align-items:center;gap:9px;margin-bottom:8px} .vc-row label{flex:0 0 96px;font-size:11.5px;color:var(--muted)} .vc-row input{flex:1;min-width:0;border:1px solid var(--line-strong);border-radius:var(--r-sm); background:var(--surface-2);color:var(--ink);font-family:inherit;font-size:13px;padding:8px 10px} .vc-row input:focus{outline:none;border-color:var(--brand);background:var(--surface)} .vc-row.miss input{border-color:var(--brand);border-style:dashed} .vc-row.miss input::placeholder{color:var(--brand-deep);opacity:.75} .vc-geo{font-family:var(--font-mono);font-size:10.5px;color:var(--muted); margin:-3px 0 10px 105px;min-height:14px} .vc-geo.err{color:var(--brand-deep)} .vc-picks{display:flex;flex-direction:column;gap:5px;margin:0 0 12px 105px} .vc-pick{appearance:none;text-align:left;border:1px solid var(--line);background:var(--surface); border-radius:6px;padding:6px 9px;font-family:inherit;font-size:12px;color:var(--ink);cursor:pointer} .vc-pick:hover,.vc-pick.on{border-color:var(--brand);background:var(--surface-2)} .vc-altbox{margin:0 0 4px 105px;display:flex;flex-wrap:wrap;gap:5px} .vc-altbox:empty{display:none} .vc-altlbl{flex:0 0 100%;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em; text-transform:uppercase;color:var(--muted);margin-bottom:2px} .vc-acts{display:flex;gap:8px;margin-top:16px} .vc-acts button{flex:1;appearance:none;border:1px solid var(--line-strong);background:var(--surface); color:var(--ink);font-family:inherit;font-size:12.5px;font-weight:700;padding:10px;border-radius:999px;cursor:pointer} .vc-acts .vc-go{background:var(--fill-strong);color:var(--on-strong);border-color:transparent} .vc-acts button:disabled{opacity:.45;cursor:default} .vc-diag{margin:6px 0 0;font-family:var(--font-mono);font-size:10.5px;line-height:1.5; color:var(--muted);opacity:.75;text-align:center;word-break:break-word} .vc-ghost{background:transparent} .vc-msg{font-size:12.5px;line-height:1.55;color:var(--brand-deep);text-align:center;padding:14px 0} @media(max-width:460px){ .vc-row{flex-wrap:wrap} .vc-row label{flex:0 0 100%} .vc-geo,.vc-picks,.vc-altbox{margin-left:0} } /* Transits fetch two charts in sequence — the natal one and the transit one. Until both land the panel below still shows the PREVIOUS date's positions, which is worse than showing nothing: it looks like an answer. Cover it. */ #gochar-out{position:relative} /* Overlaid rather than inserted, so showing it does not reflow the panel and then reflow it back when the answer arrives. */ .gochar-busy{display:none;position:absolute;left:0;right:0;top:0;z-index:5;padding:10px} #gochar-out.busy .gochar-busy{display:block} #gochar-out.busy > .panel{opacity:.3;pointer-events:none;filter:saturate(.55)} .gochar-busy .ldbox{max-width:340px;margin:0 auto; box-shadow:var(--sh-3);background:var(--surface)} @media(prefers-reduced-motion:reduce){ #gochar-out.busy > .panel{filter:none} } /* ===== SHARED LOADING LANGUAGE ========================================== One vocabulary everywhere: an orrery for spinners, skeleton rows for lists, a hairline bar for page-level work. Every animation is transform-only and promoted with will-change, so the compositor keeps them moving while the main thread is blocked by ephemeris maths or a slow list fetch. Anything animating width/background-position would freeze exactly when it matters. */ @keyframes orb-rot{to{transform:rotate(360deg)}} @keyframes orb-sheen{to{transform:translateX(100%)}} /* The orrery. --orb sets the diameter; the graha hides below 30px where it would only read as a smudge. */ .orb{position:relative;display:block;flex:0 0 auto; width:var(--orb,46px);height:var(--orb,46px)} .orb::before{content:"";position:absolute;inset:0;border-radius:50%; border:1px solid var(--line)} .orb::after{content:"";position:absolute;inset:0;border-radius:50%; border:1.5px solid transparent;border-top-color:var(--sel); animation:orb-rot 1.15s cubic-bezier(.5,.1,.5,.9) infinite;will-change:transform} .orb i{position:absolute;inset:0;display:block; animation:orb-rot 2.6s linear infinite;will-change:transform} .orb i::after{content:"";position:absolute;top:-3.5px;left:50%; width:7px;height:7px;margin-left:-3.5px;border-radius:50%; background:var(--gold);box-shadow:0 0 0 3px var(--gold-soft),0 0 10px var(--gold)} .orb.sm{--orb:22px} .orb.sm::after{border-width:1.5px} .orb.sm i{display:none} /* Skeleton rows. Sized like the content that replaces them so the panel height does not jump on arrival. */ .skl{display:flex;flex-direction:column;gap:9px;width:100%} .skl span{position:relative;overflow:hidden;display:block;height:9px; border-radius:99px;background:var(--surface-3)} .skl span::after{content:"";position:absolute;inset:0;transform:translateX(-100%); background:linear-gradient(90deg,transparent,var(--line-strong),transparent); animation:orb-sheen 1.5s ease-in-out infinite;will-change:transform} .skl span:nth-child(2)::after{animation-delay:.14s} .skl span:nth-child(3)::after{animation-delay:.28s} .skl span:nth-child(4)::after{animation-delay:.42s} /* Row-shaped skeleton for list panels: a tall block per pending record. */ .skl.rows span{height:46px;border-radius:var(--r-sm)} /* Centred block loader — spinner over a label over skeleton rows. */ .ldbox{display:flex;flex-direction:column;align-items:center;justify-content:center; gap:17px;padding:38px 20px 32px;min-height:170px;text-align:center; border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2)} .ldbox .ld-lbl{font-family:var(--font-body);font-size:13px; color:var(--muted);max-width:300px;line-height:1.55} .ldbox .skl{max-width:330px} .ldbox .skl span:nth-child(2){width:84%} .ldbox .skl span:nth-child(3){width:62%} /* slim indeterminate bar; sits just under the app bar */ .loadbar{position:fixed;left:0;right:0;top:0;height:2px;z-index:500; pointer-events:none;opacity:0;transition:opacity .18s ease} .loadbar.on{opacity:1} .loadbar.done{opacity:0} .loadbar i{display:block;height:100%;width:38%;border-radius:0 2px 2px 0; background:linear-gradient(90deg,transparent,var(--sel),var(--gold),transparent); animation:loadslide 1.05s cubic-bezier(.5,.05,.5,.95) infinite;will-change:transform} @keyframes loadslide{0%{transform:translateX(-100%)}100%{transform:translateX(365%)}} /* Any button that fired a request shows the orrery in place of its label. The label is hidden with text-indent/overflow rather than transparent text, because the rings use currentColor and would vanish along with it. At 17px a travelling graha is illegible, so the button keeps only the two rings. */ button[data-busy="1"]{position:relative;pointer-events:none; text-indent:-9999px;overflow:hidden;white-space:nowrap} button[data-busy="1"]::before, button[data-busy="1"]::after{content:"";position:absolute;left:50%;top:50%; width:17px;height:17px;margin:-8.5px 0 0 -8.5px;border-radius:50%; text-indent:0;box-sizing:border-box} button[data-busy="1"]::before{border:2px solid currentColor;opacity:.2} button[data-busy="1"]::after{border:2px solid transparent; border-top-color:currentColor;opacity:.95; animation:orb-rot 1.15s cubic-bezier(.5,.1,.5,.9) infinite;will-change:transform} @media(prefers-reduced-motion:reduce){ .loadbar i{animation:none;width:100%} .orb::after{animation-duration:3.2s;animation-timing-function:linear} .orb i{animation-duration:6s} .skl span::after{animation:none} button[data-busy="1"]::after{animation:none} } /* Neutral convergence label replacing the old score pill. Deliberately not colour-graded: a green/amber/red scale reads as a confidence rating, and we have no evidence to support one. */ .ev-conv{font-family:var(--font-mono);font-size:11.5px;color:var(--muted); background:var(--surface-3);padding:3px 10px;border-radius:999px} .rect-form{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end;margin-bottom:16px; padding:14px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r)} .rect-f{display:flex;flex-direction:column;min-width:130px} .rect-f label{margin-bottom:6px} table.rect{width:100%;border-collapse:collapse;min-width:560px;font-variant-numeric:tabular-nums} table.rect th{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase; color:var(--muted);font-weight:700;text-align:left;padding:9px 10px;border-bottom:1.5px solid var(--line-strong);white-space:nowrap} table.rect td{padding:8px 10px;border-bottom:1px solid var(--line);font-size:13px; white-space:nowrap;vertical-align:top} table.rect td.rect-why{white-space:normal;word-break:break-word;min-width:180px} table.rect tbody tr:hover{background:var(--surface-2);cursor:pointer} table.rect tr.rect-now{background:var(--sel-soft)} table.rect tr.rect-now td:first-child{box-shadow:inset 3px 0 0 var(--sel)} table.rect td.rect-t{font-family:var(--font-mono);font-weight:700;color:var(--ink)} table.rect td.rect-deg{font-family:var(--font-mono);font-size:12px;color:var(--brand-deep)} table.rect td.chg{font-weight:700;color:var(--sel)} table.rect td.chg::before{content:"\u25B8 ";opacity:.7} .rect-legend{font-size:12px;color:var(--muted);margin-top:12px;line-height:1.6} .d-now{background:linear-gradient(180deg,rgba(215,46,71,.10),rgba(215,46,71,.05));border:1px solid rgba(215,46,71,.28);border-radius:var(--r-lg);padding:14px 16px;margin:8px 0 14px;box-shadow:var(--sh-1)} .dn-lbl{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-deep);font-weight:700;margin-bottom:9px} .dn-chain{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin-bottom:8px} .dn-node{display:inline-flex;flex-direction:column;line-height:1.15} .dn-nm{font-family:var(--font-mono);font-size:9.8px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700} .dn-lord{font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--ink)} .dn-arr{color:var(--brand);font-size:15px;align-self:flex-end;margin-bottom:1px;opacity:.6} .dn-dates{font-family:var(--font-mono);font-size:13.8px;color:var(--muted)} .d-nav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 10px;flex-wrap:wrap} .d-navlbl{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700} .nowbtn{appearance:none;border:1px solid var(--brand);background:var(--surface);color:var(--brand);font-family:var(--font-mono);font-size:12.7px;font-weight:700;letter-spacing:.06em;padding:8px 13px;border-radius:999px;cursor:pointer;white-space:nowrap;box-shadow:var(--sh-1)} .nowbtn:hover{background:var(--brand);color:#fff} .d-list{display:flex;flex-direction:column;gap:4px} .drow{display:grid;grid-template-columns:20px 1fr auto auto;align-items:center;gap:6px 12px;width:100%; text-align:left;appearance:none;border:1px solid var(--line);background:var(--surface); border-radius:var(--r);padding:11px 14px;cursor:pointer; padding-left:calc(14px + var(--d-depth,0) * 16px); transition:background .12s,border-color .12s} .drow:hover{border-color:var(--brand)} /* The lord name was set at four different sizes down the tree, which is what actually changed the row heights. One size throughout; the levels are told apart by fill, indent and the tag colour instead. */ .drow .drow-l{font-size:14.5px;font-weight:600} .drow.lvl1{background:var(--surface-2)} .drow.lvl2{background:var(--surface-2)} /* Sukshma was the last level and was styled as a dead leaf. It opens into Prana now, so it keeps the pointer; only Deha is a leaf. */ /* Levels differ by fill and indent only. They used to differ by padding, font size and border as well — Sukshma had no border at all, from when it was a leaf row, so it lost both the resting outline and the current-period marker that every other level shows. */ .drow.lvl3{background:transparent} .drow.lvl4 .drow-tag,.drow.lvl5 .drow-tag{opacity:.72} .drow.open{border-color:var(--brand);background:var(--brand-soft)} .drow.cur{box-shadow:inset 3px 0 0 var(--brand)} /* Levels 3 to 5 each grew their own border exceptions while Sukshma was the leaf. One rule for all six now: same resting outline, same hover, same current-period border. */ .drow.lvl0.cur,.drow.lvl1.cur,.drow.lvl2.cur, .drow.lvl3.cur,.drow.lvl4.cur,.drow.lvl5.cur{border-color:var(--brand)} .drow.lvl4:hover,.drow.lvl5:hover{border-color:var(--brand)} .drow-tw{font-size:11px;color:var(--brand);font-weight:700;text-align:center} .drow.lvl3 .drow-tw{color:var(--line-strong)} .drow-main{display:flex;flex-direction:column;gap:1px;min-width:0} .drow-tag{font-family:var(--font-mono);font-size:9.8px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;line-height:1;color:var(--muted)} .drow.lvl0 .drow-tag{color:var(--brand-deep)} .drow.lvl1 .drow-tag{color:var(--gold-deep,#b8860b)} .drow.lvl2 .drow-tag{color:var(--brand)} .drow-l{font-family:var(--font-display);font-weight:700;color:var(--ink);display:flex; align-items:center;gap:8px;min-width:0;flex-wrap:wrap;overflow-wrap:anywhere} .drow-badge{font-family:var(--font-mono);font-size:9.8px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:#fff;background:var(--brand);padding:2px 6px;border-radius:999px} .drow-r{font-family:var(--font-mono);font-size:13.2px;color:var(--muted);white-space:nowrap} /* ===== Sade Sati ===== */ .ss-banner-sub{font-family:var(--font-body);font-size:13px;color:var(--ink-body);font-weight:500} .ss-list{display:flex;flex-direction:column;gap:12px;margin-top:4px} .ss-window{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;background:var(--surface)} .ss-window-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} .ss-window-title{font-family:var(--font-display);font-size:15px;font-weight:600;color:var(--ink)} .ss-status{font-family:var(--font-body);font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap} .ss-status-ongoing{background:var(--brand-soft);color:var(--brand-deep)} .ss-status-upcoming{background:var(--gold-soft);color:var(--gold)} .ss-status-past{background:var(--surface-2);color:var(--muted)} .ss-window-range{font-family:var(--font-mono);font-size:12.8px;color:var(--muted);margin-top:4px} .ss-window-age{color:var(--void)} .ss-segs{display:flex;flex-direction:column;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)} .ss-seg{display:flex;align-items:center;gap:9px;font-size:13px} .ss-seg-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto} .ss-dot-rising{background:var(--gold)} .ss-dot-peak{background:var(--brand)} .ss-dot-setting{background:#2f9e8f} .ss-seg-name{font-weight:600;color:var(--ink-body);min-width:64px} .ss-seg-range{font-family:var(--font-mono);color:var(--muted);font-size:12.3px;margin-left:auto} /* ===== Yogas & Doshas ===== */ .yd-section{margin-top:4px} .yd-section+.yd-section{margin-top:22px} .yd-section-title{font-family:var(--font-display);font-size:14.5px;font-weight:600;color:var(--ink);margin:0 0 12px;display:flex;align-items:center;gap:8px} .yd-count{font-family:var(--font-body);font-size:11.5px;font-weight:700;color:var(--muted);background:var(--surface-2);border-radius:999px;padding:2px 9px} .yd-list{display:flex;flex-direction:column;gap:10px} .yd-card{border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;background:var(--surface)} .yd-card.yd-good{border-left:3px solid var(--ok)} .yd-card.yd-warn{border-left:3px solid var(--brand)} .yd-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} .yd-card-title{font-family:var(--font-display);font-size:14.5px;font-weight:600;color:var(--ink)} .yd-cat-badge{font-size:11px;font-weight:700;color:var(--muted);background:var(--surface-2);border-radius:999px;padding:2px 9px;white-space:nowrap} .yd-card-desc{font-size:13.3px;color:var(--ink-body);margin:6px 0 0;line-height:1.55} .yd-card-bhang{font-size:12.3px;color:var(--gold);margin:8px 0 0;padding-top:8px;border-top:1px dashed var(--line);line-height:1.5} .yd-none-good{color:var(--ok)} /* ===== Varshphal ===== */ .vp-yearpick{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-bottom:18px} .vp-yearpick label{margin-bottom:7px} .vp-yearpick input{width:110px} .vp-chapters-title{font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--ink);margin:26px 0 4px} .vp-chapters{display:flex;flex-direction:column;gap:10px;margin-top:10px} .vp-chapter{border:1px solid var(--line);border-radius:var(--r);padding:13px 16px;background:var(--surface)} .vp-chapter-hi{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand-soft)} .vp-chapter-head{display:flex;align-items:center;gap:10px;margin-bottom:6px} .vp-chapter-num{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--fill-strong);color:var(--on-strong);font-family:var(--font-mono);font-size:12px;font-weight:700;flex:0 0 auto} .vp-chapter-title{font-family:var(--font-display);font-size:14.5px;font-weight:600;color:var(--ink)} .vp-chapter-text{font-size:13.3px;color:var(--ink-body);line-height:1.6;margin:0} /* ===== Muhurta ===== */ .mh-form{display:flex;flex-wrap:wrap;gap:14px 16px;align-items:flex-end;margin-bottom:20px;padding:16px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r)} .mh-f{display:flex;flex-direction:column;min-width:140px} .mh-f label{margin-bottom:6px} .mh-results{display:flex;flex-direction:column;gap:8px} .mh-day{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 13px;flex-wrap:wrap} .mh-day-date{font-family:var(--font-display);font-weight:700;color:var(--ink);min-width:150px} .mh-day-tags{display:flex;gap:6px;flex-wrap:wrap;font-size:11.5px;color:var(--muted)} .mh-tag{background:var(--surface-2);border-radius:999px;padding:2px 9px} .mh-tag-good{background:var(--brand-soft);color:var(--brand-deep)} .mh-empty{color:var(--muted);font-style:italic} /* ===== Client workspace bar (inside Birth Details) ===== */ /* ---- record card ----------------------------------------------------- This used to be a hairline rule with the name, a status line and three identical buttons stacked under the form — it read as a footer rather than as the thing that represents a saved chart. It is a card now, with one obvious primary action and a status that can be read at a glance. */ .cw{ margin-top:18px;padding:15px 16px 14px; border:1px solid var(--line);border-radius:var(--r-lg); background:linear-gradient(180deg,var(--surface-2),var(--surface)); box-shadow:var(--sh-1,0 1px 2px rgba(35,10,77,.05)); position:relative;overflow:hidden; } /* a hairline of brand colour along the top edge, lit only when there is something unsaved — the card tells you its own state before you read it */ .cw::before{content:"";position:absolute;inset:0 0 auto 0;height:2px; background:var(--line);transition:background .2s ease} .cw.is-dirty::before{background:linear-gradient(90deg,var(--brand),var(--gold,#b4832a))} .cw.hidden{display:none} .cw-head{display:flex;align-items:flex-start;gap:11px} /* the initial stands in for a portrait: it gives the card an anchor and makes one saved chart distinguishable from the next at a glance */ .cw-avatar{ flex:0 0 auto;width:38px;height:38px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-family:var(--font-display);font-weight:700;font-size:16px;line-height:1; color:var(--brand-deep);background:var(--brand-soft); border:1px solid var(--line);letter-spacing:.01em;user-select:none} .cw-id{flex:1;min-width:0;padding-top:1px} .cw-name{font-family:var(--font-display);font-weight:700;font-size:15.5px; line-height:1.25;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* status reads as a pill with a dot, not a line of grey text */ .cw-state{display:inline-flex;align-items:center;gap:5px;margin-top:4px; font-family:var(--font-mono);font-size:10px;letter-spacing:.06em; text-transform:uppercase;font-weight:700;color:var(--muted); background:var(--surface-3,var(--surface-2));border:1px solid var(--line); padding:3px 8px 3px 6px;border-radius:999px;max-width:100%} .cw-state::before{content:"";width:6px;height:6px;border-radius:50%; background:currentColor;flex:0 0 auto;opacity:.85} .cw-state.unsaved{color:var(--brand-deep);background:var(--brand-soft); border-color:color-mix(in srgb,var(--brand) 26%,transparent)} .cw-state.saved{color:#1f7a55;background:color-mix(in srgb,#1f7a55 9%,transparent); border-color:color-mix(in srgb,#1f7a55 24%,transparent)} .cw-star{flex:0 0 auto;appearance:none;border:1px solid transparent;background:none; padding:5px;margin:-3px -4px 0 0;border-radius:9px;cursor:pointer;color:var(--faint,var(--muted)); line-height:0;transition:color .15s,background .15s,transform .15s} .cw-star svg{width:18px;height:18px} .cw-star:hover{color:#e0ad4e;background:var(--surface-2);transform:scale(1.06)} .cw-star.on{color:#e0ad4e} .cw-star.on svg{fill:#e0ad4e} /* Actions. Two mistakes to avoid here, both of which I made: - overflow:hidden + text-overflow on a flex container does not ellipsis, it simply cuts the label off; - grid-auto-columns:1fr forces every column to the same width whether or not the text fits, so the longest label loses its tail. Flex with `flex:1 1 auto` is what is wanted: the buttons share the spare room evenly but a button can never be squeezed narrower than its own text, because a flex item's default min-width is its content. */ .cw-acts{display:flex;flex-direction:column;gap:8px;margin-top:14px} .cw-acts-row{display:flex;gap:8px;flex-wrap:wrap} .cw-acts-row .cw-btn{flex:1 1 auto} .cw-btn{ display:inline-flex;align-items:center;justify-content:center;gap:6px; height:38px;padding:0 14px; appearance:none;border:1px solid var(--line-strong);background:var(--surface); color:var(--ink);font-family:var(--font-body);font-size:12px;font-weight:700; line-height:1;letter-spacing:.01em;border-radius:10px;cursor:pointer; white-space:nowrap; transition:border-color .14s,background .14s,color .14s,transform .1s} .cw-btn:hover{border-color:var(--brand);color:var(--brand-deep);background:var(--surface-2)} .cw-btn:active{transform:translateY(1px)} .cw-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px} .cw-btn-main{width:100%;height:42px;font-size:13px;background:var(--fill-strong); color:var(--on-strong);border-color:transparent;box-shadow:0 1px 2px rgba(35,10,77,.14)} .cw-btn-main:hover{background:var(--fill-strong);color:var(--on-strong); border-color:transparent;filter:brightness(1.06)} .cw-btn:disabled{opacity:.45;cursor:default;transform:none} .cw-note-toggle{position:relative} .cw-note-toggle svg{width:15px;height:15px;flex:0 0 auto} .cw-note-toggle.on{border-color:var(--brand);color:var(--brand-deep);background:var(--brand-soft)} .cw-avatar-empty{color:var(--faint,var(--muted));background:var(--surface-2)} .cw-second{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:11px} .cw-tags{display:flex;gap:5px;flex-wrap:wrap} .cw-tag{display:inline-flex;align-items:center;gap:5px;background:var(--brand-soft);color:var(--brand-deep);font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:999px} .cw-tag button{appearance:none;border:0;background:none;color:inherit;cursor:pointer;font-size:12px;line-height:1;padding:0;opacity:.65} .cw-tag button:hover{opacity:1} .cw-tagin{flex:1;min-width:88px;border:1px dashed var(--line-strong);background:transparent;border-radius:999px;padding:5px 10px;font-size:11px;font-family:inherit;color:var(--ink)} .cw-tagin:focus{outline:none;border-color:var(--brand);border-style:solid} .cw-note-toggle{width:100%;margin-top:9px;appearance:none;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font-family:var(--font-body);font-size:11.5px;font-weight:700;padding:8px 12px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px} .cw-note-toggle svg{width:14px;height:14px} .cw-note-toggle:hover{border-color:var(--brand)} .cw-note-dot{width:6px;height:6px;border-radius:50%;background:var(--brand)} .cw-note-dot.hidden{display:none} .cw-note{margin-top:9px} .cw-note.hidden{display:none} .cw-note textarea{width:100%;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink);font-family:var(--font-body);font-size:13px;line-height:1.6;padding:11px 12px;resize:vertical;min-height:130px} .cw-note textarea:focus{outline:none;border-color:var(--brand);background:var(--surface)} .cw-note-foot{display:flex;justify-content:space-between;align-items:center;margin-top:5px;font-size:10.5px;color:var(--muted)} .cw-note-status.saving{color:var(--muted)} .cw-note-status.saved{color:var(--ok)} .cw-note-status.err{color:var(--brand-deep)} /* saved-kundli picker (inside Birth Details) */ .cw-picker{border-top:1px solid var(--line);margin-top:14px;padding-top:13px} .cw-picker.hidden{display:none} .cw-picker-head{display:flex;gap:7px;align-items:center;margin-bottom:9px} .cw-search{flex:1;min-width:0;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface-2);padding:8px 13px;font-size:12.5px;font-family:inherit;color:var(--ink)} .cw-search:focus{outline:none;border-color:var(--brand);background:var(--surface)} .cw-picker-close{appearance:none;border:0;background:var(--surface-2);width:27px;height:27px;border-radius:50%;font-size:16px;line-height:1;color:var(--muted);cursor:pointer;flex:0 0 auto} .cw-picker-filters{display:flex;gap:5px;margin-bottom:9px;flex-wrap:wrap} .cw-chip{appearance:none;border:1px solid var(--line-strong);background:transparent;color:var(--muted);font-family:var(--font-body);font-size:11px;font-weight:700;padding:5px 10px;border-radius:999px;cursor:pointer} .cw-chip.on{background:var(--sel);color:var(--on-sel);border-color:transparent} /* The rows lift by 1px on hover. With no padding the first row's top border moves to y = -1 inside an overflow:auto box and is clipped away, so the top edge simply vanished under the pointer. Two pixels of room on each side leaves the lift somewhere to go; the negative margin keeps the list sitting exactly where it did before. */ #cwPickerList{max-height:320px;overflow-y:auto;padding:2px 2px 2px;margin:-2px -2px 0} .cw-empty{color:var(--muted);font-size:12.5px;text-align:center;padding:16px 8px;line-height:1.55} /* ---- saved-kundli rows ------------------------------------------------- Rows are the whole product surface for someone with 80 charts saved, so they get real hierarchy: name, then birth line, then tags. Destructive and edit actions stay hidden until hover or keyboard focus — visible on touch, where there is no hover to reveal them. */ /* the picker wears the same register as the account list — see the note on .acct-item above. It keeps its own star button, which was already a real control rather than a character in the name. */ .cw-row{ position:relative;display:flex;align-items:flex-start;gap:11px; padding:11px 12px 11px 18px;margin-bottom:2px;cursor:pointer; background:transparent;border:0;border-radius:var(--r-sm); transition:background .16s ease} .cw-row::before{ content:"";position:absolute;left:6px;top:11px;bottom:11px;width:2px;border-radius:2px; background:var(--line-strong);transition:background .16s ease,top .16s ease,bottom .16s ease} .cw-row + .cw-row{box-shadow:inset 0 1px 0 var(--line)} .cw-row:hover{background:var(--surface-2)} .cw-row:hover::before{background:var(--brand);top:7px;bottom:7px} .cw-row:focus-visible{outline:2px solid var(--sel);outline-offset:-2px;border-radius:var(--r-sm)} .cw-row.is-open::before{background:var(--sel);top:5px;bottom:5px} .cw-row.is-open{background:var(--surface-2)} .cw-row-star{flex:0 0 auto;appearance:none;border:0;background:none;padding:2px; margin-top:1px;cursor:pointer;color:var(--line-strong);line-height:0;transition:.15s} .cw-row-star svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8} .cw-row-star:hover{transform:scale(1.15);color:var(--gold)} .cw-row-star.on{color:var(--gold)} .cw-row:has(.cw-row-star.on)::before{background:var(--gold)} .cw-row-star.on svg{fill:currentColor} .cw-row-info{flex:1;min-width:0} .cw-row-name{font-family:var(--font-display);font-weight:600;font-size:14px; letter-spacing:-.012em;line-height:1.25;color:var(--ink); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cw-row-meta{font-family:var(--font-mono);font-size:10.5px;color:var(--muted); letter-spacing:.045em;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cw-row-tags{display:flex;gap:5px;flex-wrap:nowrap;overflow:hidden;margin-top:7px} .cw-row-acts{flex:0 0 auto;display:flex;gap:2px;opacity:0;transition:opacity .16s;padding-top:1px} .cw-row:hover .cw-row-acts, .cw-row:focus-within .cw-row-acts{opacity:1} @media(hover:none){ .cw-row-acts{opacity:1} } .cw-row-act{appearance:none;border:0;background:none;color:var(--muted); width:28px;height:28px;border-radius:7px;cursor:pointer;display:grid;place-items:center; transition:.13s} .cw-row-act svg{width:15px;height:15px} .cw-row-act:hover{background:var(--surface-3);color:var(--ink)} .cw-row-act.del:hover{background:var(--brand-soft);color:var(--brand-deep)} /* inline rename, so a typo does not require reopening the whole chart */ .cw-rename{width:100%;border:1px solid var(--brand);border-radius:6px; background:var(--surface);color:var(--ink);font-family:var(--font-display);font-weight:600; font-size:14px;letter-spacing:-.012em;padding:3px 7px} .cw-rename:focus{outline:none} .cw-rename:disabled{opacity:.6} /* ---- toast with an action ---------------------------------------------- epToast is pointer-events:none and text-only, so it cannot host an Undo button. This is its interactive sibling. The hairline drains to show how long the undo window has left — transform-only, so it survives a busy main thread and never disagrees with the timer that actually fires. */ .kt{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:400; max-width:min(460px,calc(100vw - 32px));display:flex;align-items:center;gap:12px; overflow:hidden;font-family:var(--font-body);font-weight:500; padding:12px 12px 12px 18px;border-radius:12px; background:color-mix(in srgb,var(--ink) 90%,transparent);color:var(--surface); font-size:13px;line-height:1.45;box-shadow:var(--sh-3); backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px); opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease} .kt.show{opacity:1;transform:translate(-50%,0);pointer-events:auto} .kt-msg{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .kt-act{appearance:none;border:0;background:none;color:var(--gold); font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.06em; text-transform:uppercase;cursor:pointer;padding:5px 8px;border-radius:7px;flex:0 0 auto} .kt-act:hover{background:rgba(255,255,255,.12)} .kt-bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--gold); opacity:.55;transform-origin:left center;animation:kt-drain linear forwards} @keyframes kt-drain{to{transform:scaleX(0)}} @media(prefers-reduced-motion:reduce){ .kt{transition-duration:.01ms} .cw-row:hover{transform:none} .kt-bar{animation:none} } /* ===== ACCOUNT ========================================================== Restyled to read as a settings surface rather than a dialog: a quiet identity band, one tab rail, and cards with real hierarchy. Every element id is unchanged, so acLoadSub and acRenderCharts keep working untouched. */ .acct-modal{position:fixed;inset:0;z-index:380;background:rgba(20,10,40,.55); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto} .acct-modal.hidden{display:none} .acct-card{position:relative;background:var(--surface);border:1px solid var(--line); border-radius:var(--r-lg);max-width:460px;width:100%;padding:0 24px 24px; box-shadow:var(--sh-3);animation:pwIn .3s cubic-bezier(.34,1.4,.64,1); max-height:88vh;overflow-y:auto;overflow-x:hidden} .acct-close{position:absolute;top:14px;right:14px;z-index:2;appearance:none;border:0; background:var(--surface);width:30px;height:30px;border-radius:50%;font-size:17px; line-height:1;color:var(--muted);cursor:pointer;transition:.15s; box-shadow:0 1px 4px rgba(35,10,77,.14)} .acct-close:hover{color:var(--ink);transform:rotate(90deg)} /* ---- identity band ---- */ .acct-hero{position:relative;display:flex;align-items:center;gap:14px; margin:0 -24px 20px;padding:26px 24px 20px; background: radial-gradient(420px 150px at 12% -30%, var(--gold-soft), transparent 70%), radial-gradient(360px 140px at 88% -10%, var(--brand-soft), transparent 70%), var(--surface-2); border-bottom:1px solid var(--line);flex-wrap:wrap} .acct-hero::after{content:"";position:absolute;left:24px;right:24px;bottom:-1px;height:2px; border-radius:2px;background:linear-gradient(90deg,var(--brand),var(--gold),transparent)} .acct-avatar{flex:0 0 auto;width:54px;height:54px;border-radius:50%; background:var(--fill-strong);color:var(--on-strong);display:grid;place-items:center; font-family:var(--font-display);font-weight:700;font-size:21px;text-transform:uppercase; box-shadow:0 0 0 3px var(--surface),0 0 0 4px var(--gold),0 8px 20px -8px rgba(35,10,77,.5)} .acct-who{min-width:0;flex:1;flex:1 1 auto} .acct-name{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--ink); letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .acct-email{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);margin-top:2px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .acct-plan{/* It used to be flex:0 0 auto, which never shrinks — so a long plan name such as "Personal Mentorship Program — instalment" took the whole row and crushed the person's own name to a single letter. The name matters more than the label, so the label yields first and truncates. */ flex:0 1 auto;min-width:0;max-width:46%; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-mono);font-size:9.5px;font-weight:700; text-transform:uppercase;letter-spacing:.12em;color:var(--gold); background:var(--gold-soft);border:1px solid rgba(180,131,42,.28); padding:4px 10px;border-radius:99px;white-space:nowrap} .acct-plan:empty{display:none} /* ---- tab rail ---- */ .acct-tabs{display:flex;gap:4px;background:var(--surface-2);padding:4px; border:1px solid var(--line);border-radius:999px;margin-bottom:18px} .acct-tab{flex:1;appearance:none;border:0;background:none;font-family:var(--font-body); font-size:12.5px;font-weight:700;color:var(--muted);padding:9px 6px;border-radius:999px; cursor:pointer;transition:.18s;white-space:nowrap} .acct-tab:hover{color:var(--ink)} .acct-tab.on{background:var(--fill-strong);color:var(--on-strong); box-shadow:0 2px 8px -2px rgba(35,10,77,.45)} .acct-tab.hidden{display:none} .acct-panel.hidden{display:none} /* ---- subscription card ---- */ .acct-status{position:relative;overflow:hidden;background:var(--surface-2); border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-bottom:14px} /* The status card fetches /api/status before it can say anything true. Until it answers, show the shape of the answer rather than stale or blank values. */ .acct-skel{display:none;flex-direction:column;gap:12px} .acct-status.loading .acct-skel{display:flex} .acct-status.loading .acct-status-top, .acct-status.loading .acct-until, .acct-status.loading .acct-bar, .acct-status.loading .acct-left{display:none} .acct-skel span{position:relative;overflow:hidden;display:block;background:var(--surface-3);border-radius:99px} .acct-skel .skl-pill{width:82px;height:22px} .acct-skel .skl-line{height:14px;border-radius:6px} .acct-skel .skl-line.lg{width:72%} .acct-skel .skl-line.sm{width:44%;height:11px} .acct-skel .skl-bar{height:8px} .acct-skel span::after{content:"";position:absolute;inset:0;transform:translateX(-100%); background:linear-gradient(90deg,transparent,var(--line-strong),transparent); animation:orb-sheen 1.5s ease-in-out infinite;will-change:transform} .acct-skel span:nth-child(2)::after{animation-delay:.12s} .acct-skel span:nth-child(3)::after{animation-delay:.24s} .acct-skel span:nth-child(4)::after{animation-delay:.36s} @media(prefers-reduced-motion:reduce){ .acct-skel span::after{animation:none} } .acct-status-top{display:flex;align-items:center;justify-content:space-between; gap:10px;margin-bottom:12px} .acct-pill{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700; letter-spacing:.09em;text-transform:uppercase;font-family:var(--font-mono); padding:5px 12px;border-radius:999px} .acct-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor} .acct-pill.on{background:rgba(31,138,91,.14);color:var(--ok)} .acct-pill.off{background:var(--brand-soft);color:var(--brand-deep)} /* The date was the headline and the days left a mono footnote, which is backwards: nobody memorises 18 Jan 2027, they want to know how long they have. The number now leads at display size with its unit beside it, the date reads as the caption underneath, and the bar is a quiet 4px rule at the foot rather than a wide green slab through the middle. */ .acct-left{font-family:var(--font-display);font-size:30px;font-weight:700; letter-spacing:-.02em;color:var(--ink);line-height:1;margin:14px 0 5px} .acct-left .acct-left-u{font-size:14px;font-weight:600;color:var(--muted); letter-spacing:0;margin-left:7px} .acct-until{font-family:var(--font-body);font-size:12.5px;font-weight:500; letter-spacing:0;color:var(--muted);line-height:1.4;margin-bottom:14px} .acct-bar{height:4px;border-radius:99px;background:var(--line); overflow:hidden;margin-bottom:0;box-shadow:none} .acct-bar-fill{height:100%;border-radius:99px;transition:width .6s cubic-bezier(.3,.8,.4,1); background:var(--ok)} .acct-bar-fill.low{background:var(--brand)} /* ---- controls ---- */ .acct-btn{width:100%;appearance:none;border:0;background:var(--fill-strong); color:var(--on-strong);font-family:var(--font-body);font-weight:700;font-size:13.5px; padding:13px;border-radius:999px;cursor:pointer;transition:.16s; box-shadow:0 4px 14px -6px rgba(35,10,77,.6)} .acct-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(35,10,77,.7)} .acct-btn:active{transform:none} .acct-btn:disabled{opacity:.45;cursor:default;transform:none;box-shadow:none} .acct-btn-sm{width:auto;padding:9px 16px;font-size:12.5px} .acct-msg{font-size:12.5px;line-height:1.5;margin:12px 0 0;min-height:1em;color:var(--muted)} .acct-msg:empty{margin:0;min-height:0} /* A state, not a sentence adrift: quiet surface, a mark to read at a glance, and the same radius as everything else on the panel. */ .acct-msg.ok,.acct-msg.warn,.acct-msg.err{ display:flex;align-items:flex-start;gap:8px; padding:10px 13px;border-radius:10px;font-weight:500; border:1px solid transparent; } .acct-msg.ok::before,.acct-msg.warn::before,.acct-msg.err::before{ flex:0 0 auto;font-size:12px;line-height:1.35; } .acct-msg.ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 9%,transparent); border-color:color-mix(in srgb,var(--ok) 22%,transparent)} .acct-msg.ok::before{content:"\2713"} .acct-msg.warn{color:var(--brand-deep);background:var(--brand-soft); border-color:color-mix(in srgb,var(--brand) 26%,transparent)} .acct-msg.warn::before{content:"\21BB"} .acct-msg.err{color:var(--brand-deep);background:var(--brand-soft); border-color:color-mix(in srgb,var(--brand) 26%,transparent)} .acct-msg.err::before{content:"\21BB"} .acct-lbl{display:block;font-family:var(--font-mono);font-size:10px;font-weight:500; letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 6px} .acct-in{width:100%;padding:11px 13px;border:1px solid var(--line-strong);border-radius:10px; background:var(--surface-2);color:var(--ink);font-size:14px;font-family:inherit; margin-bottom:15px;transition:.15s} .acct-in:focus{outline:none;border-color:var(--brand);background:var(--surface); box-shadow:0 0 0 3px var(--brand-soft)} /* ---- saved charts ---- */ .acct-searchwrap{position:relative;margin-bottom:10px} .acct-searchwrap svg{position:absolute;left:14px;top:50%;transform:translateY(-50%); width:15px;height:15px;color:var(--muted);pointer-events:none} .acct-search{width:100%;border:1px solid var(--line-strong);border-radius:999px; background:var(--surface-2);padding:10px 15px 10px 37px;font-size:13px; font-family:inherit;color:var(--ink);transition:.15s} .acct-search:focus{outline:none;border-color:var(--brand);background:var(--surface); box-shadow:0 0 0 3px var(--brand-soft)} .acct-filters{display:flex;gap:5px;margin-bottom:12px;flex-wrap:wrap} .acct-chip{appearance:none;border:1px solid var(--line-strong);background:transparent; color:var(--muted);font-family:var(--font-body);font-size:11px;font-weight:700; padding:6px 12px;border-radius:999px;cursor:pointer;transition:.15s} .acct-chip:hover{border-color:var(--brand);color:var(--ink)} .acct-chip.on{background:var(--sel);color:var(--on-sel);border-color:transparent} .acct-save-row{display:flex;align-items:center;justify-content:space-between; gap:10px;margin-bottom:10px} /* This is how much of a paid allowance has been used. As 10.5px uppercase mono it read as a debug label; the figure is worth seeing, and the bar answers "how much room is left" without anybody doing the division. */ .acct-change{display:flex;align-items:center;justify-content:center;gap:8px; width:100%;margin:14px 0 0;padding:12px 16px;cursor:pointer; border-radius:11px;border:1px solid var(--line-strong);background:var(--surface); font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink); transition:border-color .18s ease,background .18s ease,transform .18s ease} .acct-change:hover{border-color:var(--brand);background:var(--brand-soft);transform:translateY(-1px)} .acct-change:active{transform:translateY(0)} /* The chevron turns to point down once the plans are open, so the button shows its own state rather than relying on the label alone. */ .acct-change::after{content:"";width:7px;height:7px;flex:0 0 auto; border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:rotate(-45deg) translate(-1px,-1px); transition:transform .2s ease} .acct-change.open::after{transform:rotate(45deg) translate(-2px,-2px)} @media(prefers-reduced-motion:reduce){ .acct-change,.acct-change::after{transition:none} .acct-change:hover{transform:none} } .acct-plans{margin:12px 0 0} .acct-plans-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:8px} /* width:100% is load-bearing. These tiles are