/* ===================================================================
   Jyotiṣa — Yuga
   Identity transcribed from the design folio:
   warm almanac paper · near-black ink · a single brick-red accent ·
   Cormorant (display) / EB Garamond (body) / JetBrains Mono (data).
   =================================================================== */
:root{
  --paper:#ece5d6;        /* almanac paper */
  --paper-2:#e6dece;      /* card / panel */
  --paper-3:#ddd3bf;      /* inset / chart cell */
  --ink:#1c1a16;          /* near-black ink */
  --ink-2:#3a352c;
  /* Muted captions. Chosen to clear WCAG AA (4.5:1) against all three paper
     tones, not just --paper: 5.62:1 on --paper, 5.27:1 on --paper-2,
     4.75:1 on --paper-3 (the folio tab strip). The previous #6f685a cleared
     none of them (4.4 / 4.13 / 3.72). */
  --ink-soft:#5f584a;
  --rule:#b8ab8f;         /* hairline rules */
  --rule-soft:#cabd9f;
  --red:#a8392b;          /* brick / vermillion accent */
  --red-deep:#8c2c20;
  /* Solid red FILL behind white text. Distinct from --red because in dark mode
     --red is lightened for text-on-dark (#cc5544), which only reaches 4.24:1
     against white — below AA. A fill needs to go the other way.
     --red-fill-hover is the paired hover state; it must also clear 4.5:1 on
     white, which rules out --red-deep in dark mode (that one is lightened too). */
  --red-fill:#a8392b;
  --red-fill-hover:#8c2c20;
  --benefic:#3f6b4a;
  --debil:#a8392b;
  --maxw:1180px;
  --disp:'Cormorant', Georgia, serif;
  --body:'EB Garamond', Georgia, 'Times New Roman', serif;
  --mono:'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* ---- Mono type scale ----------------------------------------------------
     The almanac identity leans on small, wide-tracked uppercase mono. That is
     a legitimate editorial device, but it had drifted down to 8.5px for text
     carrying real meaning (control labels, table headers, status chips).
     Four deliberate steps, so hierarchy survives while the floor rises:
       --fs-micro  purely decorative, never load-bearing (brand tag, ordinals)
       --fs-label  control labels, table headers, chips
       --fs-ui     anything interactive — buttons, selects, form labels
       --fs-data   tabular values the reader actually parses
     Anything a user must READ starts at --fs-label. Anything a user must
     CLICK starts at --fs-ui. */
  --fs-micro:10px;
  --fs-label:11px;
  --fs-ui:12px;
  --fs-data:13px;
}
html.dark{color-scheme:dark;--paper:#191919;--paper-2:#222;--paper-3:#2a2a2a;
  --ink:#e8e0d0;--ink-2:#c8c0b0;
  /* dark-mode muted: 6.12:1 on --paper, 5.00:1 on --paper-3 (was 4.09 on --paper-3) */
  --ink-soft:#a09883;
  --rule:#505050;--rule-soft:#606060;
  /* --red-deep must clear 4.5:1 on --paper-3 (#2a2a2a), the folio tab strip,
     where the roman numerals sit. #dd6655 gave only 4.17:1. */
  --red:#cc5544;--red-deep:#e87766;
  /* both darker than their light-mode counterparts, so white text clears AA
     (8.41:1 and 6.39:1). Hover goes lighter here, which is the conventional
     direction on a dark ground, and still passes. */
  --red-fill:#8c2c20;--red-fill-hover:#a8392b;
  --benefic:#66bb77;--debil:#cc5544}
html.dark #loadingOverlay{background:rgba(25,25,25,.92)}
html.dark .chart-modal{background:rgba(0,0,0,.92)}
html.dark input[type="date"],html.dark input[type="time"]{color-scheme:dark}
html.dark select.uline{color-scheme:dark;background-color:var(--paper);color:var(--ink)}
html.dark select.uline option{background-color:var(--paper);color:var(--ink)}
@media (prefers-reduced-motion:reduce){
  *,*::after,*::before{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
/* consistent keyboard-focus ring across every interactive control (buttons, tabs,
   segmented toggles, links, selects, and <details> summaries). Mouse clicks are
   unaffected — :focus-visible only fires for keyboard/AT focus. */
button:focus-visible,summary:focus-visible,select:focus-visible,
[role="tab"]:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--red);outline-offset:2px;border-radius:2px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px}
.mono{font-family:var(--mono)}
a{color:inherit}

/* ============ TOP BAND (date · logo · ayanamsa) ============ */
.topband{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:22px 0 16px;gap:20px}
.topband .side{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);line-height:1.7}
.topband .side.right{text-align:right}
.brandblock{display:flex;align-items:center;gap:12px;justify-content:center}
.seal{width:34px;height:34px;flex:none}
.brandwords{text-align:center;line-height:1}
.brandwords .name{font-family:var(--disp);font-size:30px;font-weight:600;letter-spacing:.01em}
.brandwords .name em{font-style:italic;font-weight:500;color:var(--red-deep)}
.brandwords .tag{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink-soft);margin-top:5px}

/* ============ NAV ============ */
nav.bar{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
  display:flex;align-items:center;gap:48px;padding:14px 0 13px;font-family:var(--mono);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;position:relative;z-index:10}
nav.bar a{text-decoration:none;color:var(--ink);padding-bottom:3px;white-space:nowrap}
nav.bar a.active{border-bottom:1.5px solid var(--ink)}
nav.bar a.nav-hidden{display:none}
nav.bar a:hover{color:var(--red-deep)}
nav.bar .nav-links{display:flex;align-items:center;gap:36px}
nav.bar .spacer{flex:1}
nav.bar a.begin{color:var(--red-deep)}
nav.bar .nsep{color:var(--rule)}
/* global preferences bar (chart-style + upagraha dongles) below the nav */
.prefbar{border-bottom:1px solid var(--rule);position:relative;z-index:9}
.prefbar-inner{display:flex;justify-content:flex-end;align-items:center;gap:22px;
  padding:9px 0 8px;flex-wrap:wrap}
.prefbar .pref{display:flex;align-items:center;gap:10px}
.prefbar .pref-lab{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft,#6f685a)}
.prefbar .seg.small button{padding:8px 14px;font-size:var(--fs-ui)}
.prefbar .folio-jump{font-family:var(--mono);font-size:var(--fs-ui);padding:6px 20px 6px 10px;background:var(--paper-2);border:1px solid var(--rule);color:var(--ink);border-radius:1px;cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='5'><path d='M0 0l4 5 4-5z' fill='%236f685a'/></svg>");
  background-repeat:no-repeat;background-position:right 6px center}
.prefbar .folio-jump option{background:var(--paper-2);color:var(--ink)}
.prefbar .pref.profiles{display:flex;gap:6px}
.prefbar .pref.profiles button{font-family:var(--mono);font-size:var(--fs-ui);letter-spacing:.1em;text-transform:uppercase;
  background:transparent;border:1px solid var(--rule);color:var(--ink);padding:6px 12px;cursor:pointer;border-radius:1px}
.prefbar .pref.profiles button:hover{background:var(--ink);color:var(--paper)}
@media (max-width:640px){
  .prefbar-inner{justify-content:center;gap:16px;padding:8px 0}
  .prefbar .pref-lab{font-size:9px}
}
.hamburger{display:none;background:none;border:none;cursor:pointer;
  color:var(--ink);padding:0 4px;line-height:1;font-family:var(--mono);
  transition:color .15s}
.hamburger:hover{color:var(--red-deep)}
.hamburger svg{width:24px;height:24px;display:block}
/* drawer-only chrome (close button, title, relocated prefs) — hidden on desktop */
.drawer-head,.drawer-prefs{display:none}
.nav-scrim{display:none}
@media (max-width:640px){
  .hamburger{display:flex;align-items:center;justify-content:center}
  nav.bar{gap:0}
  /* full-height off-canvas drawer sliding in from the left — generous room for nav + controls */
  .nav-links{position:fixed;top:0;left:0;bottom:0;z-index:60;width:82vw;max-width:330px;
    background:var(--paper);border-right:1px solid var(--ink);box-shadow:6px 0 30px -12px rgba(28,26,22,.5);
    flex-direction:column;align-items:stretch;gap:2px;padding:0 22px 28px;overflow-y:auto;-webkit-overflow-scrolling:touch;
    transform:translateX(-104%);transition:transform .26s cubic-bezier(.4,0,.2,1);visibility:hidden}
  .nav-links.open{transform:translateX(0);visibility:visible}
  .nav-links a{padding:15px 4px;border-bottom:1px solid var(--rule-soft);font-size:15px;letter-spacing:.04em;min-height:44px;display:flex;align-items:center}
  .nav-links a:last-of-type{border-bottom:none}
  /* current page is clearly marked in the drawer (red rail + accent) */
  nav.bar .nav-links a.active{color:var(--red-deep);border-bottom:1px solid var(--rule-soft);
    box-shadow:inset 3px 0 0 var(--red);background:var(--paper-2);padding-left:12px;font-weight:600}
  .nav-links a:focus-visible,.drawer-close:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
  /* drawer header with title + close */
  .drawer-head{display:flex;align-items:center;justify-content:space-between;
    position:sticky;top:0;background:var(--paper);padding:18px 0 12px;margin-bottom:6px;
    border-bottom:1px solid var(--ink);z-index:1}
  .drawer-title{font-family:var(--disp);font-size:22px;color:var(--ink)}
  .drawer-title em{color:var(--red-deep);font-style:italic}
  .drawer-close{background:none;border:none;font-size:22px;color:var(--ink-soft);cursor:pointer;
    min-width:44px;min-height:44px;line-height:1}
  .drawer-close:hover{color:var(--red-deep)}
  .nav-lang{margin-top:14px;display:flex;gap:8px}
  /* relocated preference controls live inside the drawer on mobile */
  .drawer-prefs{display:block;margin-top:18px;padding-top:16px;border-top:1px solid var(--rule)}
  .drawer-prefs .prefbar-inner{flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:18px;padding:0}
  .drawer-prefs .pref{flex-direction:row;justify-content:space-between;align-items:center;gap:10px}
  .drawer-prefs .pref.profiles{flex-wrap:wrap}
  /* scrim behind the open drawer */
  .nav-scrim{display:block;position:fixed;inset:0;z-index:55;background:rgba(20,18,14,.42);
    opacity:0;visibility:hidden;transition:opacity .26s ease,visibility .26s ease}
  .nav-scrim.open{opacity:1;visibility:visible}
  body.drawer-open{overflow:hidden}
  /* nav.bar has position:relative;z-index:10, which traps the drawer (z-60) inside its
     stacking context — below the body-level scrim (z-55). While the drawer is open, lift the
     whole nav.bar above the scrim so the drawer receives taps instead of the scrim swallowing
     them (this was why every drawer link did nothing on mobile). */
  body.drawer-open nav.bar{z-index:70}
}

/* ===================================================================
   PAGES · HOME · ARTICLES   (added for the five-page nav)
   =================================================================== */
.page{animation:fadein .25s ease}

/* anchor-styled buttons (the <button> rules are scoped to button.*) */
a.castbtn{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  background:var(--red-fill);color:#fff;border:none;padding:15px 26px;border-radius:1px;cursor:pointer;
  text-decoration:none;display:inline-block;transition:background .15s}
a.castbtn:hover{background:var(--red-fill-hover)}
a.cancelbtn{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  background:transparent;color:var(--ink);border:1px solid var(--ink);padding:15px 22px;
  border-radius:1px;cursor:pointer;text-decoration:none;display:inline-block}
a.cancelbtn:hover{background:var(--ink);color:var(--paper)}

/* ---- home hero ---- */
.home-hero{display:grid;grid-template-columns:1.12fr .88fr;gap:54px;align-items:center;padding:48px 0 16px}
.hh-text h1{font-family:var(--disp);font-weight:500;font-size:clamp(44px,6.4vw,82px);line-height:.95;
  margin:0;letter-spacing:-.01em}
.hh-text h1 em{font-style:italic;font-weight:500;color:var(--red-deep)}
.hh-text .lede{font-family:var(--body);font-style:italic;font-size:clamp(16px,1.7vw,19px);
  color:var(--ink-soft);max-width:50ch;margin-top:22px;line-height:1.55}
.hh-text .lede em{font-style:italic;color:var(--ink)}
.hh-cta{display:flex;gap:16px;margin-top:30px;flex-wrap:wrap}
.hh-foot{margin-top:26px;font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}

/* ---- vishnu emblem ---- */
.hh-art{margin:0;text-align:center}
.vishnu-frame{border:1px solid var(--ink);background:var(--paper-2);padding:22px;position:relative;
  box-shadow:0 24px 60px -38px rgba(28,26,22,.55)}
.vishnu-frame::after{content:"";position:absolute;inset:7px;border:1px solid var(--rule);pointer-events:none}
.vishnu-frame img{display:block;width:100%;max-width:340px;margin:0 auto;position:relative}
.emblem-toggle{display:inline-flex;margin-top:16px;border:1px solid var(--ink);border-radius:1px;overflow:hidden}
.emblem-toggle button{font-family:var(--mono);font-size:var(--fs-ui);letter-spacing:.12em;text-transform:uppercase;
  padding:7px 17px;background:transparent;border:none;border-right:1px solid var(--ink);cursor:pointer;color:var(--ink)}
.emblem-toggle button:last-child{border-right:none}
.emblem-toggle button.on{background:var(--ink);color:var(--paper)}
.hh-art figcaption{font-family:var(--body);font-style:italic;font-size:13.5px;color:var(--ink-soft);
  line-height:1.5;max-width:44ch;margin:16px auto 0}
.hh-art figcaption strong{color:var(--red-deep);font-style:normal;font-weight:600}
.hh-art figcaption em{font-style:italic}

/* ---- principles band (clean paper, below the image hero) ---- */
.vision{padding:46px 0 64px}
.vision-inner{max-width:var(--maxw);margin:0 auto}
.vision-head{margin-bottom:34px}
.vision-head .fn{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--red-deep)}
.vision-head h2{font-family:var(--disp);font-weight:600;font-size:clamp(28px,4vw,40px);margin:10px 0 0;
  letter-spacing:.01em;line-height:1.05;max-width:18ch}
.vis-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.vis-cell{padding-top:20px;border-top:2px solid var(--ink)}
.vis-cell .vk{display:block;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;
  color:var(--red-deep);margin-bottom:12px}
.vis-cell p{font-family:var(--body);font-size:16px;line-height:1.6;color:var(--ink-2);margin:0}
.vis-cell p em{font-style:italic;color:var(--ink)}
.vision-cta{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:42px;
  padding-top:30px;border-top:1px solid var(--rule)}
.vision-link{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--red-deep);text-decoration:none}
.vision-link:hover{color:var(--ink)}

/* ---- chart-details empty state ---- */
.details-empty{padding:60px 0 40px;max-width:60ch}
.details-empty h1{font-family:var(--disp);font-weight:500;font-size:clamp(40px,6vw,72px);line-height:.95;margin:14px 0 0}
.details-empty h1 em{font-style:italic;color:var(--red-deep)}
.details-empty .lede{font-family:var(--body);font-style:italic;font-size:18px;color:var(--ink-soft);margin-top:20px;line-height:1.55}
.details-empty .hh-cta{margin-top:26px}

/* ---- articles (Learn / About) ---- */
.article{max-width:760px;margin:0;padding:40px 0 10px}

/* ---- Learn · BPHS reader (sidebar sub-menu + chapter content) ---- */
.learn-wrap{padding:40px 0 16px}
.learn-tabs{display:flex;gap:2px;margin-bottom:10px;border-bottom:1px solid var(--rule);padding-bottom:4px}
.ltab{background:none;border:none;font-family:var(--mono);font-size:var(--fs-ui);letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-soft);cursor:pointer;padding:6px 14px;transition:color .15s}
.ltab:hover,.ltab.on{color:var(--red-deep)}
.ltab.on{border-bottom:2px solid var(--red-deep)}
.learn-head{margin-bottom:24px}
.learn-head h1{font-family:var(--disp);font-weight:500;font-size:clamp(40px,6vw,72px);line-height:.95;
  margin:14px 0 0;letter-spacing:-.01em}
.learn-head h1 em{font-style:italic;color:var(--red-deep)}
.learn-lede{font-family:var(--body);font-style:italic;font-size:clamp(16px,2vw,19px);color:var(--ink-soft);
  margin-top:18px;line-height:1.55;max-width:62ch}
.learn-layout{display:grid;grid-template-columns:248px 1fr;gap:50px;align-items:start;
  border-top:1px solid var(--ink);margin-top:26px;padding-top:28px}
.learn-side{position:sticky;top:18px;max-height:calc(100vh - 50px);overflow-y:auto;
  border-right:1px solid var(--rule);padding-right:20px;scrollbar-width:thin}
.learn-group{margin-bottom:20px}
.lg-title{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;
  color:var(--red-deep);margin-bottom:9px}
.learn-link{display:flex;gap:9px;align-items:baseline;width:100%;text-align:left;background:none;border:none;
  font-family:var(--body);font-size:14.5px;color:var(--ink-2);text-decoration:none;cursor:pointer;
  padding:5px 0;line-height:1.3}
.learn-link:hover{color:var(--red-deep)}
.learn-link.on{color:var(--red-deep);font-weight:600}
.learn-link .ln{font-family:var(--mono);font-size:var(--fs-label);color:var(--ink-soft);flex:none;width:18px}
.learn-link.on .ln{color:var(--red-deep)}
.learn-content{min-width:0;max-width:72ch}
.learn-content .ch-kicker{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;
  color:var(--red-deep);margin-bottom:10px}
.learn-content h2{font-family:var(--disp);font-weight:600;font-size:clamp(26px,3.6vw,38px);margin:0 0 6px;
  letter-spacing:.01em;line-height:1.04}
.learn-content .ch-sk{font-family:var(--body);font-style:italic;color:var(--ink-soft);font-size:15.5px;
  margin:0 0 20px;padding-bottom:16px;border-bottom:1px solid var(--rule-soft)}
.learn-content h3{font-family:var(--disp);font-weight:600;font-size:21px;margin:24px 0 8px}
.learn-content p{font-family:var(--body);font-size:16.5px;line-height:1.62;color:var(--ink-2);margin:0 0 13px}
.learn-content p:last-child{margin-bottom:0}
.learn-content em{font-style:italic}
.learn-content strong{font-weight:600;color:var(--red-deep)}
.learn-content a{color:var(--red-deep);text-decoration:none;border-bottom:1px solid var(--rule)}
.learn-content .ch-glossary{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--rule);margin:8px 0 14px}
.learn-content .ch-glossary .gl{padding:11px 15px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  font-family:var(--body);font-size:14px;color:var(--ink-2);line-height:1.4}
.learn-content .ch-glossary .gl:nth-child(2n){border-right:none}
.learn-content .ch-glossary .gn{display:block;font-family:var(--disp);font-size:16px;font-weight:600;color:var(--ink)}
.learn-mono{font-family:var(--mono);font-size:11px;color:var(--ink-soft);padding:12px 0}

/* ---- FAQ accordion (Learn › FAQ) --------------------------------------
   Native <details> so it is keyboard- and screen-reader-correct for free,
   and so browser find-in-page can still reach closed answers in Chromium.
   Marker styling follows the .sb-card idiom already used in Ṣaḍbala. */
.faq-sec{margin:0 0 34px}
.faq-sec>h3{font-family:var(--disp);font-size:26px;font-weight:600;margin:0 0 14px;
  padding-bottom:8px;border-bottom:1px solid var(--rule)}
.faq-q{border:1px solid var(--rule-soft);background:var(--paper-2);margin:0 0 8px;border-radius:1px}
.faq-q[open]{background:var(--paper);border-color:var(--rule)}
.faq-q>summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:12px;
  padding:14px 16px;min-height:44px;font-family:var(--body);font-size:17px;font-weight:600;
  color:var(--ink);transition:color .12s}
.faq-q>summary::-webkit-details-marker{display:none}
.faq-q>summary::after{content:'+';margin-left:auto;flex:none;font-family:var(--mono);
  font-size:16px;color:var(--red-deep);transition:transform .18s;line-height:1}
.faq-q[open]>summary::after{content:'−'}
.faq-q>summary:hover{color:var(--red-deep)}
.faq-q[open]>summary{color:var(--red-deep);border-bottom:1px solid var(--rule-soft)}
.faq-a{padding:4px 16px 16px}
.faq-a p{margin:12px 0 0;line-height:1.62}
.faq-a p:first-child{margin-top:12px}
.faq-a ul{margin:12px 0 0;padding-left:20px;line-height:1.62}
.faq-a li{margin-bottom:7px}
@media (max-width:640px){
  .faq-sec>h3{font-size:22px}
  .faq-q>summary{font-size:16px;padding:13px 14px}
  .faq-a{padding:4px 14px 14px}
}
.learn-foot{margin-top:24px;padding-top:16px;border-top:1px solid var(--rule-soft);
  font-family:var(--body);font-style:italic;font-size:13.5px;color:var(--ink-soft)}
.ref-table{width:100%;border-collapse:collapse;margin:14px 0 18px;font-family:var(--body);font-size:14px;line-height:1.5}
.ref-table th{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-soft);padding:6px 10px;text-align:left;border-bottom:1px solid var(--rule);font-weight:400}
.ref-table td{padding:7px 10px;border-bottom:1px solid var(--rule-soft);color:var(--ink-2)}
.ref-table tr:last-child td{border-bottom:none}
.ref-table .gl{font-size:20px;text-align:center;width:32px;color:var(--ink)}
.ref-table strong{color:var(--ink);font-weight:600}
.ref-table tr:hover td{background:var(--paper-3)}
@media (max-width:620px){
  .ref-table{font-size:12.5px}
  .ref-table td{padding:5px 6px}
}
@media (max-width:820px){
  .learn-layout{grid-template-columns:1fr;gap:0}
  .learn-side{position:static;max-height:none;overflow:visible;border-right:none;
    border-bottom:1px solid var(--rule);padding:0 0 18px;margin-bottom:22px}
  .learn-content{max-width:none}
  .learn-content .ch-glossary{grid-template-columns:1fr}
  .learn-content .ch-glossary .gl{border-right:none}
}
.art-head{margin-bottom:28px}
.art-head h1{font-family:var(--disp);font-weight:500;font-size:clamp(40px,6vw,72px);line-height:.95;
  margin:14px 0 0;letter-spacing:-.01em}
.art-head h1 em{font-style:italic;color:var(--red-deep)}
.art-lede{font-family:var(--body);font-style:italic;font-size:clamp(17px,2vw,20px);color:var(--ink-soft);
  margin-top:20px;line-height:1.55;max-width:58ch}
.home-below{padding-top:8px;border-top:1px solid var(--ink);margin-top:24px}

/* ---------- specimen reading ---------- */
.specimen{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start;padding:18px 0 6px}
.spec-right{display:flex;flex-direction:column;gap:8px}
.spec-lede{font-family:var(--body);font-style:italic;font-size:20px;color:var(--ink-soft);margin:0 0 20px;line-height:1.55}
.spec-list{margin:20px 0 0;padding:0;list-style:none;counter-reset:si}
.spec-list li{counter-increment:si;padding:10px 0 10px 38px;position:relative;font-family:var(--body);font-size:17px;line-height:1.65;color:var(--ink-2)}
.spec-list li::before{content:counter(si,lower-roman)".";position:absolute;left:0;top:10px;font-family:var(--mono);font-size:12px;color:var(--red-deep);letter-spacing:.05em}
.spec-list li strong{color:var(--ink);font-weight:600}
.spec-chart{display:flex;align-items:center;justify-content:center;min-height:380px;background:var(--paper-2);border:1px solid var(--rule-soft);border-radius:2px;padding:20px}
.spec-chart-label{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px;text-align:center}
.spec-chart-inner{width:100%;display:flex;align-items:center;justify-content:center}
.spec-chart-inner svg{width:100%;height:auto;max-width:420px;display:block}
.spec-actual{display:block;font-style:italic;color:var(--red-deep);font-size:14px;margin-top:2px}
@media (max-width:820px){
  .specimen{grid-template-columns:1fr;gap:30px}
  .spec-chart{order:-1}
}
.art-section{padding:26px 0;border-top:1px solid var(--rule-soft)}
.art-section h2{font-family:var(--disp);font-weight:600;font-size:28px;margin:0 0 12px;letter-spacing:.01em}
.art-section p{font-family:var(--body);font-size:16.5px;line-height:1.62;color:var(--ink-2);margin:0 0 12px}
.art-section p:last-child{margin-bottom:0}
.art-section em{font-style:italic}
.art-section strong{font-weight:600;color:var(--red-deep)}
.art-section a{color:var(--red-deep);text-decoration:none;border-bottom:1px solid var(--rule)}
.art-section a:hover{border-bottom-color:var(--red-deep)}
.glossary{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--rule);margin:10px 0 16px}
.glossary .gl{padding:12px 16px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  font-family:var(--body);font-size:14.5px;color:var(--ink-2);line-height:1.45}
.glossary .gl:nth-child(2n){border-right:none}
.glossary .gn{display:block;font-family:var(--disp);font-size:17px;font-weight:600;color:var(--ink);margin-bottom:2px}
.art-callout{border-left:3px solid var(--red);background:var(--paper-2);padding:20px 24px;margin-top:26px}
.art-callout .ac-k{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;
  color:var(--red-deep);margin-bottom:10px}
.art-callout p{font-family:var(--body);font-size:15.5px;line-height:1.6;color:var(--ink-2);margin:0;font-style:italic}
.art-colophon{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);text-align:center;margin-top:34px}

/* ---------- contact form ---------- */
.contact-form{max-width:560px;margin-top:32px}
.cf-row{display:flex;gap:18px;align-items:center}
.cf-row .cf-field{flex:1}
.cf-field{margin-bottom:18px}
.cf-field label{display:block;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:5px}
.cf-ta{width:100%;resize:vertical;font-family:var(--body);font-size:15px;padding:8px 0;background:transparent;
  border:none;border-bottom:1px solid var(--rule);outline:none;color:var(--ink);line-height:1.5}
.cf-ta:focus{border-bottom-color:var(--red-deep)}
.cf-hint{font-family:var(--body);font-style:italic;font-size:13px;color:var(--ink-soft)}

@media (max-width:980px){
  .home-hero{grid-template-columns:1fr;gap:34px}
  .vision{padding:48px 0 54px}
  .vis-grid{grid-template-columns:1fr;gap:0}
  .vis-cell{padding:20px 0 22px;border-top:1px solid var(--rule)}
  .vis-cell:first-child{border-top:2px solid var(--ink)}
}
@media (max-width:620px){
  .glossary{grid-template-columns:1fr}
  .glossary .gl{border-right:none}
}

/* ============ HERO ============ */
.hero{padding:46px 0 30px}
.folio{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--red-deep);margin-bottom:18px}
.hero h1{font-family:var(--disp);font-weight:500;font-size:clamp(52px,9vw,104px);
  line-height:.92;margin:0;letter-spacing:-.01em}
.hero h1 em{font-style:italic;font-weight:500}
.hero .lede{font-family:var(--body);font-style:italic;font-size:clamp(16px,2vw,19px);
  color:var(--ink-soft);max-width:46ch;margin-top:24px;line-height:1.5}
.hero-rule{border:none;border-top:2px solid var(--ink);margin:30px 0 0}

/* ============ FORM + PREVIEW SPLIT ============ */
.cast-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding:38px 0 10px;
  align-items:start}
.formcol .step{margin-bottom:30px}
.steplab{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.steplab .rn{color:var(--red-deep)}
.fld{margin-bottom:18px}
.fld>label{display:block;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:7px}
/* underlined inputs */
.uline{width:100%;border:none;border-bottom:1.5px solid var(--ink);background:transparent;
  font-family:var(--body);font-size:18px;color:var(--ink);padding:5px 2px 7px;border-radius:0}
.uline:focus{outline:none;border-bottom-color:var(--red);box-shadow:0 1px 0 0 var(--red)}
.uline::placeholder{color:var(--ink-soft);opacity:.6}
.two{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.three{display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:18px}
select.uline{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%236f685a'/></svg>");
  background-repeat:no-repeat;background-position:right 2px center;padding-right:18px}
.hintline{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.04em;color:var(--ink-soft);margin-top:8px}

/* segmented toggle */
.seg{display:inline-flex;border:1px solid var(--ink);border-radius:1px;overflow:hidden}
.seg.full{display:flex}
.seg button{flex:1;font-family:var(--mono);font-size:var(--fs-ui);letter-spacing:.12em;
  text-transform:uppercase;padding:12px 20px;background:transparent;color:var(--ink);
  border:none;border-right:1px solid var(--ink);cursor:pointer;white-space:nowrap}
.seg button:last-child{border-right:none}
.seg button.on{background:var(--ink);color:var(--paper)}
.seg.small button{padding:9px 15px;font-size:var(--fs-ui)}

/* place autocomplete */
.place-wrap{position:relative}
.place-wrap .arrow{position:absolute;right:2px;bottom:8px;font-family:var(--mono);
  color:var(--ink-soft);font-size:16px;pointer-events:none}
.suggest{position:absolute;top:calc(100% + 2px);left:0;right:0;z-index:30;
  background:var(--paper-2);border:1px solid var(--ink);max-height:240px;overflow-y:auto}
.suggest div{padding:9px 12px;cursor:pointer;font-family:var(--body);font-size:15px;
  border-bottom:1px solid var(--rule-soft)}
.suggest div:last-child{border-bottom:none}
.suggest div:hover,.suggest div.active{background:var(--ink);color:var(--paper)}
.suggest div small{font-family:var(--mono);font-size:var(--fs-label);color:var(--ink-soft);margin-left:8px}
.suggest div:hover small,.suggest div.active small{color:var(--rule-soft)}

/* accuracy slider */
.slider-wrap{margin-top:4px}
.accrange{width:100%;-webkit-appearance:none;appearance:none;height:2px;background:var(--ink);
  margin:18px 0 8px;cursor:pointer}
.accrange::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;
  background:var(--red);border:2px solid var(--paper);box-shadow:0 0 0 1px var(--red)}
.accrange::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--red);
  border:2px solid var(--paper);box-shadow:0 0 0 1px var(--red)}
.acclabels{display:flex;justify-content:space-between;font-family:var(--mono);font-size:var(--fs-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.accval{font-family:var(--mono);font-size:var(--fs-label);color:var(--red-deep);text-align:right;
  letter-spacing:.1em;text-transform:uppercase;margin-top:2px}

/* actions */
.castrow{display:flex;gap:16px;margin-top:34px;flex-wrap:wrap}
/* saved-chart quick switch: pick a chart and it loads + casts immediately */
.castrow.profilerow{gap:8px;align-items:center}
.profile-pick{font-family:var(--mono);font-size:var(--fs-ui);letter-spacing:.05em;padding:8px 10px;
  background:var(--paper-2);color:var(--ink);border:1px solid var(--rule);border-radius:1px;
  cursor:pointer;max-width:210px}
.profile-pick:hover{border-color:var(--red)}
.profile-pick option{background:var(--paper-2);color:var(--ink)}
button.castbtn{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  background:var(--red-fill);color:#fff;border:none;padding:15px 26px;border-radius:1px;cursor:pointer;
  transition:background .15s}
button.castbtn:hover{background:var(--red-fill-hover)}
button.cancelbtn{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  background:transparent;color:var(--ink);border:1px solid var(--ink);padding:15px 22px;
  border-radius:1px;cursor:pointer}
button.cancelbtn:hover{background:var(--ink);color:var(--paper)}
.privacy{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:22px;line-height:1.8}
.err{color:var(--red-deep);font-family:var(--mono);font-size:11px;letter-spacing:.04em;
  margin-top:14px;min-height:1px}

/* ============ LIVE PREVIEW ============ */
.previewcol{position:sticky;top:24px}
.preview-lab{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:14px}
.previewcard{border:1px solid var(--ink);background:var(--paper-2)}
.previewcard .phead{border-bottom:1px solid var(--rule);padding:14px 18px}
.previewcard .phead .pname{font-family:var(--body);font-weight:600;font-size:15px}
.previewcard .phead .pmeta{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.08em;
  color:var(--ink-soft);margin-top:4px}
.previewcard .pbody{padding:20px}
.previewcard .pfoot{border-top:1px solid var(--rule);display:grid;grid-template-columns:repeat(3,1fr)}
.previewcard .pfoot .pf{padding:13px 16px;border-right:1px solid var(--rule)}
.previewcard .pfoot .pf:last-child{border-right:none}
.previewcard .pfoot .pf .k{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:4px}
.previewcard .pfoot .pf .v{font-family:var(--body);font-style:italic;font-size:16px}
.previewcard .pfoot .pf .s{font-family:var(--mono);font-size:var(--fs-label);color:var(--ink-soft);margin-top:2px}
.preview-note{font-family:var(--body);font-style:italic;font-size:13.5px;color:var(--ink-soft);
  margin-top:14px;line-height:1.5}

/* south chart in preview */
.southmini{width:100%;max-width:330px;margin:0 auto;display:block}
.southmini text{font-family:var(--body)}

/* ============ FULL RESULTS ============ */
#results{display:none}
#results.show{display:block}

/* top-level panes: Birth Chart | Chart Details */
.maintabs{display:flex;gap:0;border-bottom:2px solid var(--ink);margin-top:8px}
.maintab{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:3px;
  font-family:var(--mono);background:transparent;border:none;padding:14px 30px;cursor:pointer;
  color:var(--ink-soft);transition:color .12s}
.maintab:hover{color:var(--ink)}
.maintab.on{color:var(--ink)}
.maintab.on{box-shadow:inset 0 -3px 0 var(--red)}
.mt-rn{font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--red-deep);opacity:.7}
.maintab.on .mt-rn{opacity:1}
.mt-name{font-family:var(--disp);font-size:18px;font-weight:600;letter-spacing:.01em}
.pane{animation:fadein .25s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.results-divider{border:none;border-top:2px solid var(--ink);margin:8px 0 0}

.sec{padding:44px 0 0}
.sechead{display:flex;align-items:baseline;gap:16px;border-bottom:1px solid var(--ink);
  padding-bottom:10px;margin-bottom:22px}
.sechead .fn{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--red-deep);
  text-transform:uppercase}
.sechead h2{font-family:var(--disp);font-weight:600;font-size:34px;margin:0;flex:1;letter-spacing:.01em}
.sechead .rt{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft)}
.sechead .rt button{font-family:var(--mono);font-size:var(--fs-ui);letter-spacing:.12em;text-transform:uppercase;
  background:transparent;border:1px solid var(--ink);color:var(--ink);padding:7px 14px;cursor:pointer;border-radius:1px}
.sechead .rt button:hover{background:var(--ink);color:var(--paper)}

/* identity ledger */
.ledger{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--rule)}
.ledger .lc{padding:15px 18px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.ledger .lc:nth-child(4n){border-right:none}
.ledger .lc:nth-last-child(-n+4){border-bottom:none}
.ledger .lc .k{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:6px}
.ledger .lc .v{font-family:var(--disp);font-size:22px;font-weight:500;line-height:1.1}
.ledger .lc .v small{font-family:var(--mono);font-size:11px;color:var(--ink-soft);font-weight:400}

/* janma nakshatra card */
.janma-box{border:1px solid var(--rule);background:var(--paper-2);padding:16px 20px;margin-bottom:8px}
.janma-box .k{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);display:block}
.janma-box .v{font-family:var(--disp);font-size:18px;font-weight:500}

/* graha table */
.graha-wrap{border:1px solid var(--rule);overflow-x:auto}
table.graha{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
table.graha th{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);text-align:left;padding:10px 12px;border-bottom:1px solid var(--rule);font-weight:500}
table.graha td{padding:9px 12px;border-bottom:1px solid var(--rule-soft);vertical-align:middle}
table.graha tr:last-child td{border-bottom:none}
table.graha tr:hover td{background:var(--paper-3)}
/* Keep the identifying first column pinned while a wide table scrolls horizontally,
   so you never lose which row you're reading. Harmless when the table fits (no scroll). */
.graha-wrap:not(.natal-table) table.graha th:first-child,
.graha-wrap:not(.natal-table) table.graha td:first-child{
  position:sticky;left:0;z-index:1;background:var(--paper-2);
  box-shadow:2px 0 0 -1px var(--rule-soft)}
.graha-wrap:not(.natal-table) table.graha thead th:first-child{z-index:2}
.graha-wrap:not(.natal-table) table.graha tr:hover td:first-child{background:var(--paper-3)}
.gname{display:flex;align-items:center;gap:10px;font-family:var(--body);font-weight:600;font-size:14px}
.gname .gl{font-family:var(--disp);font-size:16px;color:var(--red-deep);width:18px;text-align:center}
.deg{font-family:var(--mono);font-size:12.5px;color:var(--ink-soft)}
.chip{display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.04em;padding:2px 6px;
  border:1px solid;margin-right:4px;line-height:1.5;white-space:nowrap}
.chip.R{color:var(--red-deep);border-color:var(--red-deep)}
.chip.C{color:var(--ink-soft);border-color:var(--ink-soft)}
.chip.exalt{color:var(--benefic);border-color:var(--benefic)}
.chip.debil{color:var(--debil);border-color:var(--debil)}
.chip.own{color:var(--ink-2);border-color:var(--rule)}
.chip.vg{color:var(--red-deep);border-color:var(--red-deep);font-style:normal}

/* chart diagrams */
.diagrid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.varga-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.diabox{border:1px solid var(--rule);background:var(--paper-2);padding:20px}
.diabox h3{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red-deep);margin:0 0 4px;text-align:center}
.diabox .dsub{font-family:var(--body);font-style:italic;font-size:13px;color:var(--ink-soft);
  text-align:center;margin-bottom:16px}
.diabox .seg{margin:0 auto 18px;display:flex;width:fit-content}
.chartsvg{width:100%;max-width:460px;margin:0 auto;display:block}
.chartsvg text{font-family:var(--body)}

/* dasha */
.dashagrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:30px;align-items:start}
.nowcard{border:1px solid var(--ink);background:var(--ink);color:var(--paper);padding:24px}
.nowcard .nl{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rule-soft);margin-bottom:12px}
.nowcard .nbig{font-family:var(--disp);font-size:40px;font-weight:500;line-height:1}
.nowcard .nbig .sep{color:var(--red);font-style:italic;padding:0 4px}
.nowcard .nsub{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--rule-soft);
  margin-top:12px;line-height:1.7}
.nowcard .nbar{height:3px;background:#4a443a;margin-top:18px;overflow:hidden}
.nowcard .nbar i{display:block;height:100%;background:var(--red)}
.nowcard .npct{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--rule-soft);margin-top:8px}
.mdlist{border:1px solid var(--rule)}
.mdrow{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--rule-soft);
  cursor:pointer;font-size:15px}
.mdrow:last-child{border-bottom:none}
.mdrow:hover{background:var(--paper-3)}
.mdrow.active{background:rgba(168,57,43,.08)}
.mdrow .lord{font-family:var(--body);font-weight:600;width:88px;display:flex;align-items:center;gap:8px}
.mdrow .lord .gl{font-family:var(--disp);color:var(--red-deep);font-size:17px}
.mdrow .span{font-family:var(--mono);font-size:11px;color:var(--ink-soft);flex:1}
.mdrow .yr{font-family:var(--mono);font-size:11px;color:var(--ink-soft)}
.mdrow.past{opacity:.45}
.antar{border-top:1px solid var(--rule-soft);background:var(--paper-3)}
.antar .arow{display:flex;gap:12px;padding:7px 16px 7px 32px;font-size:14px}
.antar .arow.active{background:rgba(168,57,43,.12);font-weight:600}
.antar .arow .al{font-family:var(--body);width:78px}
.antar .arow .al .gl{font-family:var(--disp);color:var(--red-deep);margin-right:5px}
.antar .arow .as{font-family:var(--mono);font-size:10.5px;color:var(--ink-soft)}
/* antardaśā rows open into pratyantardaśās (third timing level) */
.antar .arow{cursor:pointer;align-items:baseline;transition:background .15s}
.antar .arow:hover{background:rgba(168,57,43,.07)}
.antar .arow .apd-caret{margin-left:auto;color:var(--ink-soft);font-size:15px;line-height:1;
  transition:transform .18s ease}
.antar .arow[aria-expanded="true"] .apd-caret{transform:rotate(90deg);color:var(--red-deep)}
.pratyantar{background:var(--paper-2);border-top:1px dotted var(--rule-soft)}
.pd-head{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);padding:8px 16px 4px 46px;font-weight:700}
.pdrow{display:flex;gap:12px;align-items:baseline;padding:5px 16px 5px 46px;font-size:13px}
.pdrow.active{background:rgba(168,57,43,.10);font-weight:600}
.pdrow .al{font-family:var(--body);width:78px}
.pdrow .al .gl{font-family:var(--disp);color:var(--red-deep);margin-right:5px}
.pdrow .as{font-family:var(--mono);font-size:10px;color:var(--ink-soft)}
.pd-now{font-family:var(--mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--red-fill);color:#fff;padding:1px 6px;border-radius:8px}

/* yogas + flags */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.ycard{border:1px solid var(--rule);border-top:3px solid var(--red);background:var(--paper-2);padding:18px 20px}
.ycard .str{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red-deep);margin-bottom:8px}
.ycard h4{font-family:var(--disp);font-size:23px;font-weight:600;margin:0 0 6px;letter-spacing:.01em}
.ycard p{margin:0;font-family:var(--body);font-size:15px;color:var(--ink-2);line-height:1.45}
.flagrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.flag{border:1px solid var(--rule);background:var(--paper-2);padding:18px 20px}
.flag .ft{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:9px}
.flag .fv{font-family:var(--disp);font-size:26px;font-weight:600;line-height:1}
.flag .fv.yes{color:var(--debil)}
.flag .fv.no{color:var(--benefic)}
.flag .fv.kara{color:var(--red-deep)}
.flag .fd{font-family:var(--body);font-size:13.5px;color:var(--ink-soft);margin-top:8px;line-height:1.45}

/* divisional */
.divscroll{border:1px solid var(--rule);overflow-x:auto}
table.divtab{border-collapse:collapse;width:100%;min-width:740px;font-size:13px}
table.divtab th,table.divtab td{padding:9px 11px;border-bottom:1px solid var(--rule-soft);text-align:center;white-space:nowrap}
table.divtab th{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);font-weight:500}
table.divtab td{font-family:var(--mono);font-size:11.5px;color:var(--ink-2)}
table.divtab th:first-child,table.divtab td:first-child{text-align:left;position:sticky;left:0;background:var(--paper-2)}
table.divtab td:first-child{font-family:var(--body);font-weight:600;font-size:14px}
table.divtab tr:hover td{background:var(--paper-3)}
table.divtab tr:hover td:first-child{background:var(--paper-3)}

.closing{font-family:var(--body);font-style:italic;font-size:15px;color:var(--ink-soft);
  line-height:1.6;border-top:1px solid var(--rule);padding-top:18px;margin-top:8px;max-width:70ch}

/* shodasvarga extras */
.varga-intro{font-family:var(--body);font-size:15px;color:var(--ink-2);line-height:1.55;
  max-width:74ch;margin:0 0 18px}
.varga-intro em{font-style:italic}.varga-intro strong{font-weight:600;color:var(--red-deep)}
.varga-reading-wrap{margin-top:14px}
.varga-reading{font-family:var(--body);font-size:14px;color:var(--ink-2);line-height:1.6}
.varga-reading p{margin:0 0 8px;padding:0}
.varga-reading p:last-child{margin-bottom:0}
.varga-reading strong{font-weight:600;color:var(--red-deep)}
table.divtab td.purpose{font-family:var(--body);font-size:12.5px;color:var(--ink-soft);text-align:left;
  font-style:italic;white-space:normal;min-width:130px}
table.divtab td.vg-cell{background:rgba(168,57,43,.12);color:var(--red-deep);font-weight:700}
table.divtab tr:hover td.vg-cell{background:rgba(168,57,43,.2)}

/* mobile true-reflow: row-oriented dense tables restack into one card per row under 560px.
   Opt-in via .tblcards, which JS adds after copying each column header into the cell's data-label
   (see stampCardLabels in ui.js). Covers .divtab (Ṣaḍbala / Bhāva-bala / Houses) AND .graha —
   the graha table carries min-width:640px and appears in 8+ panes, so it was the single largest
   source of horizontal scrolling on a phone. Matrix tables (sarvato / av-tab / shodāśa) are
   deliberately left on sticky-scroll: card-stacking a number grid reads worse than scrolling it. */
@media (max-width:560px){
  .divscroll:has(.divtab.tblcards),
  .graha-wrap:has(table.graha.tblcards){overflow:visible;border:none;background:none}
  table.divtab.tblcards,
  table.graha.tblcards,
  /* beats the later `.graha-wrap:not(.natal-table) table.graha{min-width:640px}` rule in the
     640px block, which otherwise re-asserts the scroll width and defeats the reflow */
  .graha-wrap:not(.natal-table) table.graha.tblcards{display:block;min-width:0;width:100%}
  table.divtab.tblcards thead,
  table.graha.tblcards thead{display:none}
  table.divtab.tblcards tbody,
  table.graha.tblcards tbody{display:block}
  table.divtab.tblcards tr,
  table.graha.tblcards tr{display:block;border:1px solid var(--rule);background:var(--paper-2);margin:0 0 8px;padding:4px 0}
  table.divtab.tblcards tr:hover td,
  table.graha.tblcards tr:hover td{background:none}
  table.divtab.tblcards td,
  table.graha.tblcards td{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
    text-align:right;border:none;border-bottom:1px solid var(--rule-soft);padding:7px 12px;
    white-space:normal;position:static;background:none;font-size:var(--fs-ui)}
  table.divtab.tblcards td:last-child,
  table.graha.tblcards td:last-child{border-bottom:none}
  table.divtab.tblcards td::before,
  table.graha.tblcards td::before{content:attr(data-label);font-family:var(--mono);font-size:var(--fs-label);
    letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);text-align:left;flex:0 0 auto;margin-right:10px}
  /* a cell whose header was blank (glyph columns) should not reserve label space */
  table.divtab.tblcards td[data-label=""]::before,
  table.graha.tblcards td[data-label=""]::before{display:none}
  /* the row's identity cell (first column) reads as the card's lead line */
  table.divtab.tblcards td:first-child,
  table.graha.tblcards td:first-child{background:var(--paper-3);font-weight:600}
}

/* panchanga strip */
.panch-strip{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--rule)}
.panch-strip .ps{padding:14px 15px;border-right:1px solid var(--rule)}
.panch-strip .ps:last-child{border-right:none}
.panch-strip .psk{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:6px}
.panch-strip .psv{font-family:var(--disp);font-size:19px;font-weight:600;line-height:1.05}
.panch-strip .pss{font-family:var(--mono);font-size:9.5px;color:var(--ink-soft);margin-top:4px}

/* muhurta */
.muh-controls{display:flex;align-items:center;gap:20px;margin-bottom:18px;flex-wrap:wrap}
.muh-controls label{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft)}
.muh-natal{font-family:var(--body);font-size:14px;color:var(--ink-soft);margin-left:auto}
.muh-natal strong{color:var(--red-deep);font-weight:600}
.muh-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:4px}
.muh-cell{border:1px solid var(--rule);padding:9px 4px;text-align:center;cursor:default;
  display:flex;flex-direction:column;gap:3px;min-height:50px;justify-content:center}
.muh-cell{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px}
.muh-cell .mh{font-family:var(--mono);font-size:11px;font-weight:500}
.muh-cell .mc{font-family:var(--body);font-size:10px;color:var(--ink-2);font-weight:500;letter-spacing:.02em}
.muh-cell .mn{font-family:var(--mono);font-size:8px;color:var(--ink-soft);letter-spacing:.02em}
.muh-cell .ms{font-family:var(--mono);font-size:10px;font-weight:700;color:var(--ink-2)}
.muh-cell .mhora{position:absolute;top:2px;right:3px;font-size:9px;opacity:.55}
.muh-cell .mb{position:absolute;bottom:2px;left:3px;font-family:var(--mono);font-size:7px;
  font-weight:700;color:var(--debil);opacity:.7}
.muh-cell.auspicious{background:rgba(63,107,74,.16);border-color:rgba(63,107,74,.4)}
.muh-cell.auspicious .mh{color:var(--benefic)}
.muh-cell.avoid{background:rgba(168,57,43,.14);border-color:rgba(168,57,43,.4)}
.muh-cell.avoid .mh{color:var(--debil)}
.muh-cell.neutral{background:var(--paper-2)}
.muh-cell.rh{background:repeating-linear-gradient(-45deg,rgba(168,57,43,.08),rgba(168,57,43,.08) 6px,rgba(168,57,43,.04) 6px,rgba(168,57,43,.04) 12px);border-color:rgba(168,57,43,.5)}
.muh-cell.ym{background:repeating-linear-gradient(45deg,rgba(180,140,60,.1),rgba(180,140,60,.1) 6px,rgba(180,140,60,.05) 6px,rgba(180,140,60,.05) 12px);border-color:rgba(180,140,60,.4)}
.muh-cell.gk{background:repeating-linear-gradient(0deg,rgba(100,100,120,.08),rgba(100,100,120,.08) 6px,rgba(100,100,120,.04) 6px,rgba(100,100,120,.04) 12px);border-color:rgba(100,100,120,.3)}
.muh-best{margin-top:12px;padding:10px 14px;border:1px solid var(--rule-soft);border-radius:4px;background:var(--paper-2)}
.muh-best-head{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.muh-best-row{display:flex;flex-wrap:wrap;gap:6px 10px;font-family:var(--body);font-size:14px;color:var(--ink-2);align-items:center}
.muh-best-row span{white-space:nowrap}
.muh-best-sep{color:var(--rule);font-size:16px}
.muh-legend{display:flex;gap:22px;margin-top:16px;font-family:var(--mono);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);flex-wrap:wrap}
.muh-legend span{display:flex;align-items:center;gap:7px}
.muh-legend .lg{width:12px;height:12px;border:1px solid}
.muh-legend .lg.good{background:rgba(63,107,74,.16);border-color:rgba(63,107,74,.4)}
.muh-legend .lg.neutral{background:var(--paper-2);border-color:var(--rule)}
.muh-legend .lg.avoid{background:rgba(168,57,43,.14);border-color:rgba(168,57,43,.4)}
.muh-legend .lg.rahu{background:repeating-linear-gradient(-45deg,rgba(168,57,43,.2),rgba(168,57,43,.2) 4px,rgba(168,57,43,.08) 4px,rgba(168,57,43,.08) 8px);border-color:rgba(168,57,43,.5)}
.muh-legend .lg.yama{background:repeating-linear-gradient(45deg,rgba(180,140,60,.2),rgba(180,140,60,.2) 4px,rgba(180,140,60,.08) 4px,rgba(180,140,60,.08) 8px);border-color:rgba(180,140,60,.4)}

/* ============ LOADING OVERLAY ============ */
#loadingOverlay{position:fixed;inset:0;z-index:100;background:rgba(236,229,214,.92);
  display:none;align-items:center;justify-content:center}
#loadingOverlay.show{display:flex}
.loading-box{text-align:center}
.loading-spinner{width:36px;height:36px;border:2px solid var(--rule);border-top-color:var(--red);
  border-radius:50%;animation:spin .6s linear infinite;margin:0 auto 16px}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}

/* ============ HORARY ============ */
.hr-controls{margin:20px 0}
.hr-row{margin-bottom:14px}
.hr-row label{display:block;font-family:var(--disp);font-weight:500;font-size:15px;margin-bottom:4px}
.hr-row label .rt{font-family:var(--mono);font-weight:400;font-size:11px;color:var(--ink-soft)}
.hr-row textarea{width:100%;max-width:100%;font-family:var(--mono);font-size:13px;padding:8px;background:transparent;border:0;border-bottom:1px solid var(--ink-soft);color:var(--ink);resize:vertical}
.hr-row textarea:focus{outline:0;border-color:var(--red)}
.hr-row .place-wrap{display:flex;gap:8px;align-items:center}
.hr-row .place-wrap input{flex:1;max-width:360px}
.hr-row .place-wrap .chip.geo{font-size:11px;padding:3px 10px;cursor:pointer;background:var(--ink-soft);color:var(--paper);border-radius:3px;white-space:nowrap}
.hr-row .place-wrap .chip.geo:active{opacity:.7}
.hr-coords{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.hr-coords input{max-width:100px}
.hr-coords select{max-width:240px}
.hr-chart-row{display:flex;gap:24px;flex-wrap:wrap}
.hr-chart-svg{flex:0 0 auto}
.hr-chart-table{flex:1;min-width:200px}
.hr-verdict .hrv-row{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0}
.hrv-item{background:var(--bg-offset);border:1px solid var(--rule);border-radius:4px;padding:8px 12px;min-width:130px}
.hrv-k{display:block;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);margin-bottom:2px}
.hrv-v{font-family:var(--disp);font-size:14px;font-weight:600}

/* ============ EXPORT BUTTON ============ */
.export-btn{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  background:transparent;border:1px solid var(--ink);color:var(--ink);padding:6px 12px;
  cursor:pointer;border-radius:1px;margin-top:12px;display:inline-block}
.export-btn:hover{background:var(--ink);color:var(--paper)}

/* ============ FOOTER ============ */
footer.foot{border-top:1px solid var(--ink);margin-top:64px;padding:36px 0 50px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.foot-grid.clean{grid-template-columns:2fr 1fr}
.foot-brand .fb{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.foot-brand .fb .name{font-family:var(--disp);font-size:22px;font-weight:600}
.foot-brand .fb .name em{font-style:italic;color:var(--red-deep)}
.foot-brand p{font-family:var(--body);font-style:italic;font-size:14px;color:var(--ink-soft);
  line-height:1.5;max-width:36ch}
.foot-brand .set{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:18px;line-height:1.8}
.foot-col h5{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);margin:0 0 14px;font-weight:500}
.foot-col a{display:block;font-family:var(--body);font-size:14.5px;color:var(--ink-2);
  text-decoration:none;padding:4px 0}
.foot-col a:hover{color:var(--red-deep)}
.foot-mark{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:22px}

@media (max-width:980px){
  .wrap{padding:0 24px}
  .cast-grid{grid-template-columns:1fr;gap:40px}
  .previewcol{position:static}
  .diagrid,.varga-grid,.dashagrid{grid-template-columns:1fr}
  .ledger{grid-template-columns:repeat(2,1fr)}
  .ledger .lc:nth-child(2n){border-right:none}
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px}
  .foot-grid.clean{grid-template-columns:1fr}
  .panch-strip{grid-template-columns:repeat(3,1fr)}
  .panch-strip .ps:nth-child(3n){border-right:none}
  .muh-grid{grid-template-columns:repeat(6,1fr)}
}
@media (max-width:640px){
  .muh-grid{grid-template-columns:repeat(4,1fr)}
  .three{grid-template-columns:1fr}
  .suggest {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 0;
    top: auto;
    max-height: 50vh;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,.15);
  }
}
@media (max-width:560px){
  .topband{grid-template-columns:1fr;text-align:center;gap:8px}
  .topband .side,.topband .side.right{text-align:center}
  .ledger{grid-template-columns:1fr}
  .ledger .lc{border-right:none}
  .two,.three{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
}

/* ===================================================================
   MOBILE TOUCH TARGET FIXES (≥44×44px)
   =================================================================== */
@media (max-width: 640px) {
  .seg button,
  .seg.small button {
    min-height: 44px;
    padding: 14px 24px;
  }
  .seg.small button {
    padding: 12px 18px;
  }
  .ltab {
    min-height: 44px;
    padding: 12px 16px;
  }
  .btab {
    min-height: 44px;
    padding: 14px 20px;
  }
  .bsubtab {
    min-height: 44px;
    padding: 12px 18px;
  }
  .sb-vmenu .sbv {
    min-height: 44px;
    padding: 11px 14px;
    justify-content: center;
  }
  .suggest div {
    min-height: 44px;
    padding: 14px 16px;
  }
  .accrange::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
  }
  .accrange::-moz-range-thumb {
    width: 24px;
    height: 24px;
  }
  .maintab {
    min-height: 44px;
    padding: 16px 32px;
  }
  nav.bar .nav-links a {
    min-height: 44px;
    padding: 14px 0;
  }
  .emblem-toggle button {
    min-height: 44px;
    padding: 12px 20px;
  }
  .export-btn {
    min-height: 44px;
    padding: 12px 16px;
  }
  .hamburger {
    min-height: 44px;
    min-width: 44px;
    padding: 8px 12px;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* smooth momentum scrolling for horizontally-scrollable regions on touch */
.graha-wrap,.divscroll,.book-tabs,.book-subtabs,.sb-vmenu,.sarvato-wrap{
  -webkit-overflow-scrolling:touch}

/* horizontal-scroll affordance: a soft shadow on the right edge of a scrollable
   table fades out only when scrolled to the end, so users know more columns exist.
   Pure CSS (background-attachment:local trick) — no JS, degrades cleanly. */
.divscroll,.sarvato-wrap,.graha-wrap:not(.natal-table){
  background:
    linear-gradient(to right, var(--paper-2) 30%, rgba(0,0,0,0)) 0 0,
    linear-gradient(to left,  var(--paper-2) 30%, rgba(0,0,0,0)) 100% 0,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.16), rgba(0,0,0,0)) 100% 0;
  background-repeat:no-repeat;
  background-size:24px 100%, 24px 100%, 12px 100%;
  background-attachment:local, local, scroll;
}

/* mobile legibility floor: keep table data type readable (≥12px body-adjacent),
   headers ≥10px. Tables scroll horizontally, so widening type is safe. */
@media (max-width:640px){
  table.graha th{font-size:10px}
  table.divtab th{font-size:10px}
  table.divtab td{font-size:12px}
  table.divtab td:first-child{font-size:14px}
  .sb-vmenu .sbv span{font-size:10px}
}

/* ---- mini density chart (compact) ---- */
.chartsvg.mini{max-width:240px}
.chartsvg.mini text{font-size:5px}
.chartsvg.mini .chart-label{font-size:2.5px}
.chartsvg.mini .chart-graha{font-size:3px}

/* ---- mobile graha card layout ---- */
@media (max-width:640px){
  /* the NATAL graha table swaps to a stacked card layout (cards are only generated for the natal section) */
  .natal-table.graha-wrap{overflow-x:visible!important;border:none}
  .natal-table table.graha{display:none}
  .graha-card-wrap{display:flex;flex-direction:column;gap:6px}
  .graha-card{border:1px solid var(--rule);background:var(--paper-2);padding:10px 14px;display:grid;
    grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;gap:4px 12px;align-items:center}
  .graha-card .gc-icon{grid-row:1/3;font-family:var(--disp);font-size:20px;color:var(--red-deep);text-align:center;width:22px}
  .graha-card .gc-name{font-family:var(--body);font-weight:600;font-size:14px}
  .graha-card .gc-meta{grid-row:2;font-family:var(--mono);font-size:11px;color:var(--ink-soft)}
  .graha-card .gc-aspects{grid-column:3;grid-row:1/3;text-align:right;display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
  .graha-card .gc-aspects .chip{font-size:8px;padding:1px 5px}
  /* every OTHER dense graha-style table (gochara, matching, KP, etc.) stays visible and scrolls
     horizontally with a frozen first column — previously these vanished on phones */
  .graha-wrap:not(.natal-table){overflow-x:auto;-webkit-overflow-scrolling:touch}
  .graha-wrap:not(.natal-table) table.graha{min-width:640px}
  .graha-wrap:not(.natal-table) table.graha th:first-child,
  .graha-wrap:not(.natal-table) table.graha td:first-child{position:sticky;left:0;background:var(--paper-2);z-index:1}
  /* divisional / ṣaḍbala / aṣṭakavarga tables already scroll; give them a clear edge fade affordance */
  .divscroll{position:relative}
}
.graha-card-wrap{display:none}

/* Chart fullscreen modal */
.chart-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(28,26,22,.95);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.chart-modal.open {
  display: flex;
}
.chart-modal svg {
  max-width: 95vw;
  max-height: 85vh;
  width: auto;
  height: auto;
}
.chart-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 48px;
  height: 48px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--paper-2);
  font-family: var(--disp);
  font-size: 28px;
  color: var(--ink);
  cursor: pointer;
}
.chart-modal-close:hover {
  background: var(--ink);
  color: var(--paper);
}
.chart-modal-caption {
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: 12px;
}

/* Print rules live in css/print.css (linked with media="print"). */
/* city-search no-match row */
.suggest .nohit{font-family:var(--body);font-style:italic;font-size:14px;color:var(--ink-soft);
  cursor:default;padding:11px 12px}
.suggest .nohit:hover{background:transparent;color:var(--ink-soft)}

/* ===================================================================
   BOOK / TABBED READER
   =================================================================== */
.book{border:1px solid var(--ink);background:var(--paper-2);margin-top:8px;
  box-shadow:0 24px 60px -34px rgba(28,26,22,.55);position:relative}
.book::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:linear-gradient(90deg,var(--red-deep),var(--red) 60%,transparent);opacity:.85}
.book-spine{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  padding:24px 30px 20px;border-bottom:1px solid var(--ink);background:var(--paper)}
.bs-kicker{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red-deep);margin-bottom:8px}
.bs-title{font-family:var(--disp);font-weight:600;font-size:38px;line-height:.95;margin:0;letter-spacing:.01em}
.bs-sub{font-family:var(--body);font-style:italic;font-size:15px;color:var(--ink-soft);margin-top:7px}
.bs-btn{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  background:transparent;border:1px solid var(--ink);color:var(--ink);padding:9px 15px;cursor:pointer;
  border-radius:1px;white-space:nowrap}
.bs-btn:hover{background:var(--ink);color:var(--paper)}

/* tabs */
.book-tabs{display:flex;gap:0;overflow-x:auto;border-bottom:1px solid var(--ink);
  background:var(--paper-3);scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.book-tabs::-webkit-scrollbar{height:4px}
.book-tabs::-webkit-scrollbar-thumb{background:var(--rule)}
.btab{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;
  font-family:var(--mono);background:transparent;border:none;border-right:1px solid var(--rule-soft);
  padding:11px 18px;cursor:pointer;color:var(--ink-soft);min-width:84px;transition:background .12s,color .12s}
.btab:hover{background:var(--paper-2);color:var(--ink)}
.btab.on{background:var(--paper-2);color:var(--ink);box-shadow:inset 0 -3px 0 var(--red)}
/* No opacity dimming here: it cost ~1 full contrast point on an already-small
   9px numeral. The active tab is distinguished by background + the red underline
   (see .btab.on), so state never depends on text lightness alone. */
.btab-rn{font-size:9px;letter-spacing:.14em;color:var(--red-deep)}
.btab-name{font-size:12px;letter-spacing:.06em}

/* Scroll shadow indicator for horizontal scroll containers */
.book-tabs::after,
.book-subtabs::after,
.learn-tabs::after,
.sb-vmenu::after {
  content: '';
  position: sticky;
  right: 0;
  top: 0;
  bottom: 0;
  width: 40px;
  background: linear-gradient(90deg, transparent, var(--paper-3));
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
}
.book-tabs.scrolling::after,
.book-subtabs.scrolling::after,
.learn-tabs.scrolling::after,
.sb-vmenu.scrolling::after {
  opacity: 1;
}

/* sub-tabs (revealed under Chart Details) */
.book-subtabs{display:flex;gap:0;overflow-x:auto;border-bottom:1px solid var(--rule);
  background:var(--paper-2);scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.book-subtabs::-webkit-scrollbar{height:3px}
.book-subtabs::-webkit-scrollbar-thumb{background:var(--rule-soft)}
.bsubtab{flex:0 0 auto;display:flex;align-items:baseline;gap:6px;font-family:var(--mono);
  background:transparent;border:none;padding:9px 16px;cursor:pointer;color:var(--ink-soft);
  border-right:1px solid var(--rule-soft);transition:background .12s,color .12s;white-space:nowrap}
.bsubtab:hover{background:var(--paper-3);color:var(--ink)}
.bsubtab.on{color:var(--red-deep);background:var(--paper-3);box-shadow:inset 0 -2px 0 var(--red)}
.bst-rn{font-size:8px;letter-spacing:.08em;color:var(--rule);font-style:italic}
.bsubtab.on .bst-rn{color:var(--red)}
.bst-name{font-size:10.5px;letter-spacing:.05em}

/* page area */
.book-page-wrap{position:relative;display:flex;align-items:stretch}
.book-page{flex:1;padding:32px 36px;min-height:420px;overflow:hidden}
.page-nav{flex:0 0 auto;width:44px;border:none;background:transparent;cursor:pointer;
  font-family:var(--disp);font-size:30px;color:var(--ink-soft);transition:background .12s,color .12s}
.page-nav:hover{background:var(--paper-3);color:var(--red-deep)}
.page-nav.prev{border-right:1px solid var(--rule-soft)}
.page-nav.next{border-left:1px solid var(--rule-soft)}

/* page-turn animation */
@keyframes turnL{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes turnR{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
.book-page.turn-l{animation:turnL .32s ease}
.book-page.turn-r{animation:turnR .32s ease}

/* ---- Ṣaḍbala vertical sub-menu + panes ---- */
.sb-tabwrap{display:flex;gap:20px;align-items:flex-start;margin-top:16px}
.sb-vmenu{flex:0 0 154px;display:flex;flex-direction:column;gap:5px;position:sticky;top:12px}
.sb-vmenu .sbv{text-align:left;border:1px solid var(--rule-soft);background:var(--paper-2);
  padding:9px 12px;cursor:pointer;border-radius:4px;display:flex;flex-direction:column;gap:1px;
  transition:background .12s,box-shadow .12s}
.sb-vmenu .sbv b{font-family:var(--body);font-size:13.5px;color:var(--ink);font-weight:600}
.sb-vmenu .sbv span{font-family:var(--mono);font-size:9.5px;letter-spacing:.03em;color:var(--ink-soft)}
.sb-vmenu .sbv:hover{background:var(--paper-3)}
.sb-vmenu .sbv.on{background:var(--paper-3);box-shadow:inset 3px 0 0 var(--red)}
.sb-vmenu .sbv.on b{color:var(--red-deep)}
.sb-panebox{flex:1;min-width:0}
.sb-pane{display:none}
.sb-pane.on{display:block;animation:turnL .24s ease}
/* Matching pane (book-style horizontal tabs) */
.match-pane{display:none;padding:32px 36px;min-height:360px;min-width:0}
.match-pane.on{display:block;animation:turnL .24s ease}
/* let wide tables inside a tab's vertical sub-menu scroll instead of overflowing the page */
.match-pane .sb-tabwrap{min-width:0}
.match-pane .sb-panebox{min-width:0;max-width:100%}
.match-pane .sb-panebox .graha-wrap,
.match-pane .sb-panebox .poruttam-table,
.match-pane .sb-panebox .match-kuta-table{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
/* synastry house overlay (Charts → House Overlay sub-pane) */
.ovl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.ovl-col{min-width:0}
.ovl-col h5{font-family:var(--body);font-weight:600;font-size:14px;margin:0 0 4px}
.ovl-col .graha-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ovl-col table.graha{width:100%;min-width:0}
.ovl-col table.graha td,.ovl-col table.graha th{white-space:nowrap}
.ovl-tag{font-family:var(--mono);font-size:8px;letter-spacing:.08em;color:var(--ink-soft);text-transform:uppercase}
tr.ovl-good td{background:rgba(60,120,70,.12)}
tr.ovl-warn td{background:rgba(168,57,43,.10)}
@media(max-width:760px){.ovl-grid{grid-template-columns:1fr}}
/* Guṇa Milān — "by dimension" grouped subtotals */
.gd-grp{margin:0 0 14px}
.gd-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--rule-soft);padding-bottom:4px;margin-bottom:4px}
.gd-head b{font-family:var(--body);font-weight:600;font-size:14px}
.gd-head span{font-family:var(--mono);font-size:11px;color:var(--red-deep)}
/* advanced matching verdict */
.sc-conf{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--ink-soft);margin-top:8px}
.synth-verdict{margin-top:18px}
.synth-verdict h5{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--red-deep);margin:16px 0 4px}
.synth-verdict h5:first-child{margin-top:0}
.synth-verdict p{margin:0 0 8px;line-height:1.55}
@media(max-width:640px){
  .sb-tabwrap{flex-direction:column;gap:12px}
  .sb-vmenu{flex-direction:row;flex-wrap:wrap;position:static;width:100%}
  .sb-vmenu .sbv{flex:1 1 40%}
}

/* ---- yoga category headings + caution cards ---- */
.ycat-h{font-family:var(--disp);font-size:19px;color:var(--ink);margin:18px 0 8px;
  padding-bottom:3px;border-bottom:1px solid var(--rule-soft)}
.ycat-h .rt{font-family:var(--body);font-size:12px;font-style:italic;color:var(--ink-soft);margin-left:6px}
.ycard.ycaution{background:rgba(170,50,40,.05);border-color:rgba(170,50,40,.25)}
.ycard.ycaution .str{color:var(--red-deep)}

/* ---- BPHS strength ranking + Ṣaḍbala / Bhāva Bala detail cards ---- */
.sb-rank{margin:18px 0 8px}
.sb-cards{margin-top:22px;display:flex;flex-direction:column;gap:8px}
.sb-cards-h{font-family:var(--disp);font-size:18px;color:var(--ink);margin:6px 0 2px}
.sb-card{border:1px solid var(--rule-soft);background:var(--paper-2);border-radius:4px;overflow:hidden}
.sb-card[open]{box-shadow:0 1px 6px rgba(0,0,0,.06)}
.sb-card>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  padding:10px 14px;user-select:none;transition:background .12s}
.sb-card>summary::-webkit-details-marker{display:none}
.sb-card>summary:hover{background:var(--paper-3)}
.sb-card>summary::after{content:'▸';margin-left:auto;color:var(--ink-soft);font-size:12px;transition:transform .15s}
.sb-card[open]>summary::after{transform:rotate(90deg)}
.sb-glyph{font-size:18px;width:22px;text-align:center;color:var(--red-deep)}
.sb-name{font-family:var(--body);font-size:15px;font-weight:600;color:var(--ink);min-width:74px}
.sb-chip{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 7px;border-radius:10px}
.sb-chip.ok{background:rgba(60,130,80,.14);color:#2f6b41}
.sb-chip.bad{background:rgba(170,50,40,.12);color:var(--red-deep)}
.sb-rupa{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft)}
.sb-meter{flex:0 0 110px;height:7px;background:var(--paper-3);border:1px solid var(--rule-soft);
  border-radius:4px;overflow:hidden;position:relative}
.sb-meter>i{position:absolute;left:0;top:0;bottom:0;display:block}
.sb-meter>i.ok{background:var(--benefic)}
.sb-meter>i.bad{background:var(--red)}
.sb-meter>u{position:absolute;top:-2px;bottom:-2px;width:1.5px;background:var(--ink)}
.sb-body{padding:4px 16px 16px;border-top:1px solid var(--rule-soft)}
.sb-headline{font-family:var(--body);font-size:14px;line-height:1.55;color:var(--ink);margin:12px 0 14px}
.sb-grp{border-top:1px dashed var(--rule-soft);padding:11px 0}
.sb-grp:first-child{border-top:none}
.sb-grp-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.sb-grp-h b{font-family:var(--body);font-size:13.5px;color:var(--ink)}
.sb-grp-h .rt{font-size:10.5px;color:var(--ink-soft);font-style:italic}
.sb-grp-tot{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--red-deep)}
.sb-grp-grade{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;color:var(--ink-soft);text-transform:uppercase}
.sb-grp-plain{font-family:var(--body);font-size:12.5px;line-height:1.5;color:var(--ink-2);margin:5px 0 7px}
.sb-items{width:100%;border-collapse:collapse}
.sb-items td{padding:3px 6px;font-size:12px;vertical-align:top;border-top:1px solid var(--rule-soft)}
.sb-items td.lbl{font-family:var(--body);color:var(--ink);white-space:nowrap;width:1%}
.sb-items td.val{font-family:var(--mono);color:var(--red-deep);text-align:right;width:1%;white-space:nowrap}
.sb-items td.note{font-family:var(--body);color:var(--ink-2);line-height:1.4}

/* folio head inside a page */
.folio-head{margin-bottom:18px}
.folio-no{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--red-deep)}
/* inside the book, section wrappers shouldn't add their own top padding/headers chrome */
.book-page .sec{padding:0}
.book-page .sechead{border-bottom:1px solid var(--rule);margin-bottom:20px}
.book-page .sechead .fn{display:none}  /* folio number already shown above */

.book-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;
  border-top:1px solid var(--ink);padding:14px 30px;background:var(--paper)}
.bf-page{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--red-deep)}
.bf-note{font-family:var(--body);font-style:italic;font-size:12.5px;color:var(--ink-soft);text-align:right}

/* mobile */
@media (max-width:720px){
  .book-spine{flex-direction:column;align-items:flex-start;gap:14px;padding:20px 20px 16px}
  .bs-title{font-size:30px}
  .book-page{padding:22px 18px;min-height:360px}
  .page-nav{width:34px;font-size:24px}
  .btab{min-width:74px;padding:10px 14px}
  .bsubtab{padding:8px 12px}
  .bf-note{display:none}
}
/* Mobile: make the prev/next page arrows clearly visible and tappable (filled bars, white arrow) */
@media (max-width:640px){
  .page-nav{width:40px;min-width:40px;font-size:26px;color:var(--paper);
    background:var(--red-deep);border:none;opacity:.92;
    display:flex;align-items:center;justify-content:center;position:sticky;top:0}
  .page-nav.prev,.page-nav.next{border:none}
  .page-nav:hover,.page-nav:active{background:var(--red);color:var(--paper)}
  .page-nav[disabled],.page-nav:disabled{opacity:.28}
}

/* Print layout (body.printing / body.printing-match) lives in css/print.css. */

/* ===================================================================
   READING · ṢAḌBALA · GOCHARA
   =================================================================== */
/* Parashari reading */
.reading{max-width:74ch}
.rd-block{margin-bottom:26px}
.rd-h{font-family:var(--disp);font-size:24px;font-weight:600;color:var(--ink);margin:0 0 10px;
  padding-bottom:6px;border-bottom:1px solid var(--rule-soft)}
.rd-body{font-family:var(--body);font-size:16px;line-height:1.6;color:var(--ink-2);margin:0}
.rd-body strong{color:var(--red-deep);font-weight:600}
.rd-list{list-style:none;padding:0;margin:0}
.rd-list li{font-family:var(--body);font-size:15.5px;line-height:1.55;color:var(--ink-2);
  padding:9px 0 9px 18px;border-bottom:1px solid var(--rule-soft);position:relative}
.rd-list li:last-child{border-bottom:none}
.rd-list li::before{content:"❧";position:absolute;left:0;color:var(--red);font-size:13px}
.rd-list li strong{color:var(--red-deep)}

/* shadbala */
.shad-graph{border:1px solid var(--rule);background:var(--paper-2);padding:20px 24px}
table.shad-tab td.num{font-family:var(--mono);text-align:center;font-size:12.5px}
table.shad-tab th{text-align:center}
table.shad-tab th:first-child,table.shad-tab td:first-child{text-align:left}



.gh-retro{font-size:9px;color:var(--ink-soft);vertical-align:super}
.hsub-pane{display:none}
.hsub-pane.on{display:block;animation:turnL .24s ease}
/* Sudarshana Chakra — canvas + controls + tooltip */
.sc-shell{width:100%;max-width:660px;margin:16px auto 0 auto}
.sc-shell canvas{width:100%;height:auto;display:block;border-radius:50%;cursor:crosshair;box-shadow:0 18px 50px rgba(150,110,60,.26)}
.sc-cap{text-align:center;color:var(--ink-soft);font-size:13px;margin-top:6px;min-height:20px}
.sc-controls{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-bottom:12px}
.sc-ctl-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-soft)}
.sc-ctl-row label{font-weight:600;white-space:nowrap;font-size:11px;margin:0}
.sc-ctl-row input[type=range]{accent-color:var(--terra,#bb5d3b);padding:0;height:5px;width:80px}
.sc-ctl-row select{padding:4px 6px;border-radius:6px;border:1px solid var(--rule);background:var(--paper);color:var(--ink);font-size:11px;font-family:var(--body)}
.sc-btn{cursor:pointer;border:none;border-radius:8px;padding:8px 12px;font-size:12px;font-weight:700;min-height:34px;background:var(--paper-2);color:var(--ink);border:1px solid var(--rule-soft);transition:background .15s}
.sc-btn:hover{background:var(--paper)}
.sc-btn.active{background:var(--terra,#bb5d3b);color:#fff;border-color:var(--terra,#bb5d3b)}
.sc-tip{position:fixed;z-index:60;pointer-events:none;background:#2c241c;color:#f4ecdc;border:1px solid #6f5b43;border-radius:10px;padding:9px 12px;font-size:12.5px;line-height:1.5;box-shadow:0 10px 28px rgba(0,0,0,.34);max-width:250px}
.sc-tip[hidden]{display:none}

/* folio blurb under the folio title */
.folio-blurb{font-family:var(--body);font-style:italic;font-size:14.5px;line-height:1.5;
  color:var(--ink-soft);margin-top:7px;max-width:70ch}
.folio-head{margin-bottom:20px}
/* natal chart folio */
.natal-chart{max-width:460px;margin:0 auto}
.natal-chart svg{width:100%}
.transit-chart{margin:0 auto}
.transit-chart svg{width:100%;max-width:480px;display:block;margin:0 auto}
.gochara-table table.graha{min-width:auto}
.natal-export{text-align:center;margin-top:12px}
.natal-table{margin-top:22px}
.sechead.sub{margin-top:8px;border-top:1px solid var(--rule);padding-top:20px}

/* ===================================================================
   INSIGHTS · NAKṢATRA · AṢṬAKAVARGA
   =================================================================== */
/* per-folio insight at the bottom */
.folio-insight{margin-top:26px;padding:14px 18px;border-left:3px solid var(--red);
  background:var(--paper-3);font-family:var(--body);font-size:15px;line-height:1.5;color:var(--ink-2)}
.fi-label{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--red-deep);margin-right:8px}
.folio-insight strong{color:var(--red-deep)}

/* per-pane inline insight (inside a vertical-menu pane) */
.pane-insight{margin-top:20px;padding:11px 15px;border-left:3px solid var(--red);
  background:var(--paper-3);font-family:var(--body);font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.pane-insight strong{color:var(--red-deep)}

/* Synthesis pane — the panes of a folio drawn together */
.synth-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.synth-list li{padding:11px 14px;border:1px solid var(--rule-soft);border-radius:4px;
  background:var(--paper-2);font-family:var(--body);font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.synth-list li b{font-family:var(--body);color:var(--ink);font-weight:600}
/* "reading in English" badge shown only when the UI language is non-English */
.en-note{display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--gold-soft);border-radius:3px;padding:2px 8px;margin-bottom:10px}
/* cross-link from a folio synthesis to the consolidated Reading synthesis */
.synth-xlink{color:var(--red-deep);font-weight:600;text-decoration:none;border-bottom:1px dotted var(--red-deep);white-space:nowrap}
.synth-xlink:hover{border-bottom-style:solid}
/* inline glossary terms — hover/tap the native title for a definition */
/* Glossed term. Now a <button> so it is reachable by tap and by keyboard — the old
   <abbr title> tooltip fired on hover only, making the glossary dead on every phone.
   Styled to sit invisibly inside running prose: inherits font, colour and size. */
button.gloss{font:inherit;color:inherit;background:none;border:none;padding:0;margin:0;
  text-decoration:none;border-bottom:1px dotted var(--gold-soft);cursor:help;
  line-height:inherit;letter-spacing:inherit;vertical-align:baseline}
button.gloss:hover{border-bottom-color:var(--gold);color:var(--red-deep)}
button.gloss[aria-expanded="true"]{border-bottom-color:var(--red);color:var(--red-deep)}
abbr.gloss{text-decoration:none;border-bottom:1px dotted var(--gold-soft);cursor:help}
abbr.gloss:hover{border-bottom-color:var(--gold)}
.gloss-pop{position:absolute;z-index:200;max-width:min(300px,calc(100vw - 24px));
  background:var(--paper-2);color:var(--ink);border:1px solid var(--ink);
  box-shadow:0 6px 22px -8px rgba(28,26,22,.5);padding:11px 13px;border-radius:2px;
  font-family:var(--body);font-size:14px;line-height:1.5;font-style:normal;
  font-weight:400;letter-spacing:0;text-transform:none;text-align:left;display:block}
.gloss-pop b{display:block;font-family:var(--mono);font-size:var(--fs-label);
  letter-spacing:.12em;text-transform:uppercase;color:var(--red-deep);margin-bottom:5px}

/* Screen-reader-only, still focusable. Used by the live region and the skip link. */
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:300;background:var(--red-fill);color:#fff;
  font-family:var(--mono);font-size:var(--fs-ui);letter-spacing:.1em;text-transform:uppercase;
  padding:12px 18px;text-decoration:none;border-radius:0 0 2px 0}
.skip-link:focus{left:0}
/* Sāḍe Sātī cycle timeline */
.ss-cycle{border:1px solid var(--rule-soft);border-left:3px solid var(--rule);background:var(--paper-2);
  padding:12px 15px;margin:10px 0;border-radius:3px}
.ss-cycle.current{border-left-color:var(--red);background:#f4ecd8}
html.dark .ss-cycle.current{background:rgba(168,57,43,.10)}
.ss-cyc-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;
  font-family:var(--body);font-size:14.5px;color:var(--ink)}
.ss-cyc-meta{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.ss-ph-list{list-style:none;margin:9px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.ss-ph-list li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-size:13.5px;color:var(--ink-2);padding:5px 8px;border-radius:3px}
.ss-ph-list li.ss-ph-active{background:rgba(168,57,43,.10);color:var(--ink)}
.ss-ph-dates{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft)}
.ss-ph-now{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--red-fill);color:#fff;padding:1px 6px;border-radius:8px;margin-left:6px}
/* birth-time uncertainty caution shown above the folio tabs */
.time-caution{margin:0 0 4px;padding:11px 15px;border:1px solid var(--gold-soft);border-left:3px solid var(--gold);
  background:#f4ecd8;font-family:var(--body);font-size:13.5px;line-height:1.5;color:var(--ink-2);border-radius:3px}
.time-caution strong{color:var(--red-deep)}
html.dark .time-caution{background:rgba(163,120,47,.12)}
.synth-sum{margin-top:18px;padding:14px 18px;border-left:3px solid var(--red);
  background:var(--paper-3);font-family:var(--body);font-size:15px;line-height:1.55;color:var(--ink-2)}
.synth-sum strong{color:var(--red-deep)}

/* ---- Vimśottarī daśā match ---- */
.dm-match{margin-top:20px;border-top:1px solid var(--rule);padding-top:16px}
.dm-match h4{font-family:var(--disp);font-size:19px;margin:0 0 12px;color:var(--ink)}
.dm-states{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.dm-states{grid-template-columns:1fr}}
.dm-state{border:1px solid var(--rule-soft);border-radius:6px;padding:12px 14px;background:var(--paper-2)}
.dm-state.good{box-shadow:inset 3px 0 0 var(--benefic)}
.dm-state.warn{box-shadow:inset 3px 0 0 var(--debil)}
.dm-who{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.dm-now{font-family:var(--disp);font-size:21px;color:var(--ink);margin:3px 0 8px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.dm-now .sep{color:var(--rule);margin:0 2px}
.dm-now .gl{font-size:17px;color:var(--red-deep)}
.dm-roles{display:flex;flex-wrap:wrap;gap:5px}
.dm-role{font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;background:var(--paper-3);
  border:1px solid var(--rule-soft);border-radius:3px;padding:3px 7px;color:var(--ink-2)}
.dm-role.neutral{color:var(--ink-soft);font-style:italic}
.dm-flags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.dm-flag{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 7px;border-radius:3px;background:var(--paper-3);color:var(--ink-soft)}
.dm-flag.ok{background:rgba(63,107,74,.16);color:var(--benefic)}
.dm-flag.bad{background:rgba(168,57,43,.14);color:var(--red-deep)}
.dm-sync{margin:16px 0 6px}
.dm-sync-head{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.dm-sync-head strong{font-size:11px;color:var(--ink)}
.dm-notes{margin:12px 0 0;padding-left:18px;font-family:var(--body);font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.dm-notes li{margin-bottom:5px}

/* ---- relationship & doṣa remedies ---- */
.rel-rem h4{font-family:var(--disp);font-size:19px;margin:0 0 10px;color:var(--ink)}
.rel-rem-card{border:1px solid var(--rule-soft);border-left-width:3px;border-radius:5px;
  padding:11px 14px;margin-bottom:10px;background:var(--paper-2)}
.rel-rem-card.ok{border-left-color:var(--benefic)}
.rel-rem-card.warn{border-left-color:#c79a3c}
.rel-rem-card.bad{border-left-color:var(--debil)}
.rrc-title{font-family:var(--body);font-weight:600;font-size:14.5px;color:var(--ink);margin-bottom:4px}
.rrc-body{font-family:var(--body);font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.rrc-body code{font-family:var(--mono);font-size:12px;background:var(--paper-3);padding:1px 5px;border-radius:2px}

/* ---- synthesis composite scorecard ---- */
.synth-composite{margin-top:6px}
.sc-score{text-align:center;margin-bottom:18px}
.sc-num{font-family:var(--disp);font-size:46px;font-weight:600;color:var(--ink);line-height:1}
.sc-den{font-size:20px;color:var(--ink-soft)}
.sc-tier{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--red-deep);margin:4px 0 10px}
.synth-factors{width:100%;border-collapse:collapse;margin:8px 0}
.synth-factors td{padding:7px 8px;border-bottom:1px solid var(--rule-soft);vertical-align:middle}
.sf-label{font-family:var(--body);font-size:13.5px;color:var(--ink);width:34%}
.sf-bar{width:30%}
.sf-bar .mk-bar-inner{width:100%}
.sf-note{font-family:var(--mono);font-size:10.5px;color:var(--ink-soft);text-align:right}
.synth-dc{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0}
@media(max-width:600px){.synth-dc{grid-template-columns:1fr}}
.synth-drivers,.synth-cautions{border:1px solid var(--rule-soft);border-radius:5px;padding:10px 14px;background:var(--paper-2)}
.synth-drivers h5,.synth-cautions h5{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;margin:0 0 6px}
.synth-drivers h5{color:var(--benefic)}
.synth-cautions h5{color:var(--red-deep)}
.synth-drivers ul,.synth-cautions ul{margin:0;padding-left:16px;font-family:var(--body);font-size:13px;line-height:1.5;color:var(--ink-2)}

/* insight box (shadbala, ashtakavarga) */
.insight-box{margin-top:22px;border:1px solid var(--rule);background:var(--paper-2);padding:16px 20px}
.insight-box h4{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--red-deep);margin:0 0 10px}
.insight-box ul{list-style:none;padding:0;margin:0}
.insight-box li{font-family:var(--body);font-size:15px;line-height:1.5;color:var(--ink-2);
  padding:7px 0 7px 16px;position:relative;border-bottom:1px solid var(--rule-soft)}
.insight-box li:last-child{border-bottom:none}
.insight-box li::before{content:"·";position:absolute;left:2px;color:var(--red);font-weight:700}
.insight-box li strong{color:var(--red-deep)}

/* synthesis */
.synthesis-body p{font-family:var(--body);font-size:15px;line-height:1.65;margin:0 0 12px}
.synthesis-body h4{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  margin:20px 0 8px;color:var(--ink-soft)}
.synthesis-body .synth-emph{border-left:3px solid var(--red);padding:10px 14px;background:var(--paper-2);
  font-size:14px;line-height:1.5;margin:14px 0}
.synth-card{border:1px solid var(--rule-soft);border-radius:4px;padding:12px 14px;margin-bottom:10px}
.synth-card h4{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 6px}
.synth-card p{font-family:var(--body);font-size:14px;line-height:1.55;margin:4px 0;color:var(--ink-2)}
.synth-card p strong{color:var(--ink)}

/* scored life-areas (unified prediction model) */
/* One shared grid for ALL rows — each .la-row used to be its own grid, so every row
   sized its label/score columns to its own text and the bars started at different x.
   display:contents lets the three spans of each row join the parent's tracks, so the
   label column is as wide as the longest theme and every bar aligns. */
.life-areas{display:grid;grid-template-columns:minmax(140px,max-content) minmax(90px,1fr) max-content;
  align-items:center;gap:7px 14px;margin:10px 0 14px}
.la-row{display:contents}
.la-theme{font-family:var(--body);font-size:13.5px;color:var(--ink-2)}
.la-bar{height:8px;background:var(--paper-3);border-radius:4px;overflow:hidden}
.la-bar i{display:block;height:100%;border-radius:4px;transition:width .4s ease}
.la-bar i.good{background:var(--benefic)}
.la-bar i.mid{background:#c79a3c}
.la-bar i.low{background:var(--debil)}
.la-score{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--ink);
  text-align:right;white-space:nowrap}
.la-score small{display:block;font-weight:400;font-size:8.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft)}
@media (max-width:560px){
  /* phones stack: theme + score on one line, the bar beneath — so each row goes back
     to being its own grid (the shared-track alignment only matters on wide screens) */
  .life-areas{display:flex;flex-direction:column;gap:8px}
  .la-row{display:grid;grid-template-columns:1fr auto;grid-template-areas:"theme score" "bar bar";gap:4px 10px}
  .la-theme{grid-area:theme}.la-score{grid-area:score}.la-bar{grid-area:bar;height:7px}
}

/* nakshatra grid */
.nak-block .nak-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule-soft);
  border:1px solid var(--rule-soft);margin-top:6px}
.nak-fact{background:var(--paper-2);padding:10px 12px;display:flex;flex-direction:column;gap:3px}
.nak-fact .k{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.nak-fact .v{font-family:var(--body);font-size:15px;color:var(--ink)}
@media (max-width:680px){.nak-block .nak-grid{grid-template-columns:repeat(2,1fr)}}

/* ashtakavarga table */
table.av-tab td.num,table.av-tab th{text-align:center;font-family:var(--mono);font-size:12px;padding:6px 7px}
table.av-tab td:first-child,table.av-tab th:first-child{text-align:left}
table.av-tab td.av-hi{background:rgba(76,109,74,.16);color:var(--benefic);font-weight:600}
table.av-tab td.av-lo{background:rgba(168,57,43,.12);color:var(--red-deep)}
table.av-tab tr.av-savrow td{border-top:2px solid var(--ink);background:var(--paper-3)}

/* ===================================================================
   HOME · full-bleed Viṣṇu backdrop (painting as background)
   =================================================================== */
#homeBg{position:fixed;inset:0;z-index:0;display:none;
  background:#e9e1cf url("../img/Lord%20Vishnu.jpeg") center top / cover no-repeat}
#homeBg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg, rgba(236,229,214,.94) 0%, rgba(236,229,214,.78) 28%,
    rgba(236,229,214,.40) 50%, rgba(236,229,214,.08) 72%, rgba(236,229,214,0) 100%),
  linear-gradient(180deg, rgba(236,229,214,.20) 0%, rgba(236,229,214,0) 12%,
    rgba(236,229,214,0) 74%, rgba(236,229,214,.97) 100%)}
body.home #homeBg{display:none}   /* image now lives in the hero, side-by-side with the text */
body.home .wrap{position:relative;z-index:1}
/* below-hero content is FULL-BLEED paper (box-shadow fills the side gutters),
   so it reads as a clean section, not a floating panel over the image */
body.home .vision,
body.home footer.foot{position:relative;z-index:1;background:var(--paper);
  box-shadow:-50vw 0 0 var(--paper), 50vw 0 0 var(--paper)}

/* SPLIT HERO · full painting in one column, readable text in the other */
.home-hero.split{display:grid;grid-template-columns:1.04fr .96fr;gap:54px;align-items:center;
  padding:24px 0 46px}
.hh-figure{margin:0}
.hh-figure img{display:block;width:100%;height:auto;border:1px solid var(--ink);
  box-shadow:0 30px 70px -42px rgba(28,26,22,.6)}
.hh-figure figcaption{font-family:var(--body);font-style:italic;font-size:12.5px;color:var(--ink-soft);
  line-height:1.5;margin-top:13px;max-width:52ch}
.hh-figure figcaption strong{color:var(--red-deep);font-style:normal;font-weight:600}
.home-hero.split .hh-text{max-width:none}
.home-hero.split .hh-text h1{font-size:clamp(38px,4.6vw,62px)}

@media (max-width:860px){
  .home-hero.split{grid-template-columns:1fr;gap:26px;min-height:0;padding:24px 0 38px}
  .hh-figure img{max-width:540px;margin:0 auto}
  .hh-figure figcaption{max-width:none;text-align:center}
}

/* ===================================================================
   SARVATOBHADRA CHAKRA
   =================================================================== */
.sarvato-wrap{overflow-x:auto;margin:16px 0}
.sarvato-grid{font-family:var(--mono);font-size:10px;border-collapse:collapse;min-width:1200px}
.sarvato-grid th,.sarvato-grid td{width:40px;height:40px;text-align:center;border:1px solid var(--rule-soft)}
.sarvato-grid th{background:var(--paper-2);font-weight:500;color:var(--ink-soft);position:sticky}
.sarvato-grid th:first-child{left:0;z-index:2}
.sarvato-grid th:nth-child(n+2){top:0;z-index:1}
.sarvato-grid td{background:var(--paper);transition:background .15s}
.sarvato-grid td.vedha{background:rgba(168,57,43,.18);color:var(--red-deep)}
.sarvato-grid td.birth{background:var(--ink);color:var(--paper);font-weight:600}
.sarvato-grid td.planet{font-size:14px;background:rgba(63,107,74,.18)}
.sarvato-grid td:hover{background:var(--paper-3)}
.sarvato-legend{display:flex;gap:20px;margin-top:10px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);flex-wrap:wrap}
.sarvato-legend span{display:flex;align-items:center;gap:6px}
.sarvato-legend i{width:14px;height:14px;border:1px solid}
.sarvato-legend .leg.birth{background:var(--ink);border-color:var(--ink)}
.sarvato-legend .leg.vedha{background:rgba(168,57,43,.18);border-color:rgba(168,57,43,.4)}
.sarvato-legend .leg.planet{background:rgba(63,107,74,.18);border-color:rgba(63,107,74,.4)}
@media (max-width:640px){
  .sarvato-grid{font-size:8px}
  .sarvato-grid th,.sarvato-grid td{width:32px;height:32px}
}

/* ===================================================================
   MATCHING — Guṇa Milan / Aṣṭakūṭa
   =================================================================== */
.match-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-bottom:24px}
@media (max-width:720px){.match-grid{grid-template-columns:1fr;gap:24px}}
.match-col .steplab{margin-bottom:14px}
.match-actions{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-top:8px}


/* Results */
#matchResults{margin-top:6px}
.match-sechead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  border-bottom:1px solid var(--rule);padding-bottom:12px;margin-bottom:20px;flex-wrap:wrap}
.match-sechead .fn{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--red-deep)}
.match-sechead h2{font-family:var(--disp);font-size:26px;font-weight:600;margin:0;flex:1}
.match-sechead .rt{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft)}

/* Person banner */
.match-banner{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;
  margin-bottom:22px;background:var(--paper-2);border:1px solid var(--rule-soft);padding:18px 24px}
.match-person{text-align:center}
.mp-name{font-family:var(--disp);font-size:22px;font-weight:600;color:var(--ink)}
.mp-data{font-family:var(--body);font-size:14px;color:var(--ink-2);margin-top:4px}
.mp-meta{font-family:var(--mono);font-size:9.5px;color:var(--ink-soft);margin-top:6px}
.mp-cross{font-size:28px;color:var(--red-deep);opacity:.5}

/* Score block */
.match-score-block{text-align:center;padding:24px 20px;margin-bottom:22px;
  border:1px solid var(--rule);background:var(--paper-2)}
.match-total{font-family:var(--disp);margin-bottom:4px}
.mt-num{font-size:60px;font-weight:700;color:var(--red-deep);line-height:1}
.mt-max{font-size:28px;color:var(--ink-soft);font-weight:400}
.match-pct{font-family:var(--mono);font-size:16px;color:var(--ink-soft);margin-bottom:8px}
.match-verdict{font-family:var(--body);font-size:20px;font-weight:600;color:var(--ink);margin-bottom:16px}
.match-sub{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--ink-soft);margin-top:12px}
.match-sub .ms-tab{color:var(--red-deep);opacity:.8}

/* Score meter */
.match-meter{max-width:400px;margin:0 auto;height:8px;background:var(--rule-soft);
  border-radius:4px;overflow:hidden}
.match-meter i{display:block;height:100%;border-radius:4px;transition:width .6s ease}
.match-meter i.excellent{background:var(--benefic)}
.match-meter i.good{background:#8aaa5a}
.match-meter i.average{background:#d4a84b}
.match-meter i.poor{background:var(--debil)}

/* Kuta table */
.match-kuta-table{margin:16px 0}
.match-kuta-table table{width:100%;border-collapse:collapse;font-family:var(--body);font-size:14px}
.match-kuta-table th{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);padding:8px 10px;border-bottom:2px solid var(--rule);text-align:left}
.match-kuta-table td{padding:10px 10px;border-bottom:1px solid var(--rule-soft);vertical-align:middle}
.match-kuta-table tr:last-child td{border-bottom:none}
.mk-icon{font-size:18px;text-align:center;width:28px}
.mk-name{font-weight:600;white-space:nowrap;width:1%}
.mk-desc{font-weight:400;font-size:11px;color:var(--ink-soft);font-style:italic;display:block;white-space:nowrap}
.mk-score{font-family:var(--mono);font-size:16px;font-weight:600;color:var(--red-deep);text-align:center;width:1%;white-space:nowrap}
.mk-bar{width:120px}
.mk-bar-inner{display:block;height:6px;background:var(--rule-soft);border-radius:3px;overflow:hidden}
.mk-bar-inner i{display:block;height:100%;border-radius:3px;transition:width .4s ease}
.mk-bar-inner i.full{background:var(--benefic)}
.mk-bar-inner i.part{background:#d4a84b}
.mk-bar-inner i.none{background:var(--debil);opacity:.4}
.mk-note{font-size:12.5px;color:var(--ink-2);line-height:1.4}

/* Doshas */
.match-doshas{margin:16px 0;padding:16px 20px;border:1px solid var(--debil);background:rgba(168,57,43,.06)}
.match-doshas h4{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--red-deep);margin:0 0 10px}
.match-doshas ul{list-style:none;padding:0;margin:0}
.match-doshas li{padding:6px 0 6px 16px;position:relative;font-size:14px;color:var(--ink-2)}
.match-doshas li::before{content:"⚠";position:absolute;left:0;color:var(--debil)}
.match-doshas li strong{color:var(--red-deep)}
.match-clean{border-color:var(--benefic);background:rgba(63,107,74,.06)}
.match-clean h4{color:var(--benefic)}
.match-clean p{font-size:14px;color:var(--ink-2);margin:0}

/* Nadi and Bhakoota detail */
.match-nadi-detail,.match-bhakoota-detail{margin-top:16px;padding:14px 18px;border-left:3px solid var(--rule-soft);
  background:var(--paper-3)}
.match-nadi-detail h4,.match-bhakoota-detail h4{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 8px}
.match-nadi-detail p,.match-bhakoota-detail p{font-size:14px;color:var(--ink-2);margin:4px 0}

/* Mangala dosha cards */
.match-mg-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}
@media (max-width:600px){.match-mg-grid{grid-template-columns:1fr}}
.mg-card{border:1px solid var(--rule-soft);padding:16px 18px;background:var(--paper-2);text-align:center}
.mg-card.dosha{border-color:var(--debil);background:rgba(168,57,43,.06)}
.mg-card.clean{border-color:var(--benefic);background:rgba(63,107,74,.06)}
.mg-label{font-family:var(--body);font-size:13px;color:var(--ink-soft);margin-bottom:4px}
.mg-status{font-family:var(--body);font-size:16px;font-weight:600}
.mg-card.dosha .mg-status{color:var(--red-deep)}
.mg-card.clean .mg-status{color:var(--benefic)}
.mg-detail{font-size:12px;color:var(--ink-2);margin-top:6px}
.mg-recon{margin:14px 0;padding:12px 16px;font-size:14px;line-height:1.5}
.mg-recon.clean{border-left:3px solid var(--benefic);background:rgba(63,107,74,.06)}
.mg-recon.dosha{border-left:3px solid var(--debil);background:rgba(168,57,43,.06)}
.mg-recon strong{color:var(--red-deep)}
.match-mg-detail{margin-top:16px;padding:14px 18px;border-left:3px solid var(--rule-soft);
  background:var(--paper-3)}
.match-mg-detail h4{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 8px}
.match-mg-detail p{font-size:14px;color:var(--ink-2);margin:4px 0}

/* Kuta detail expandable cards */
.match-kuta-detail{margin:6px 0;border:1px solid var(--rule-soft);background:var(--paper-2)}
.match-kuta-detail.dosha{border-color:rgba(168,57,43,.3);background:rgba(168,57,43,.04)}
.match-kuta-detail summary{display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer;font-size:14px}
.match-kuta-detail summary::-webkit-details-marker{color:var(--ink-soft)}
.match-kuta-detail[open] summary{border-bottom:1px solid var(--rule-soft)}
.kd-icon{font-size:16px;width:24px;text-align:center}
.kd-name{font-weight:600;color:var(--ink);min-width:100px}
.kd-score{font-family:var(--mono);font-size:14px;color:var(--red-deep);font-weight:600;min-width:50px}
.kd-desc{font-size:11.5px;color:var(--ink-soft);font-style:italic;flex:1}
.match-kuta-detail > p{padding:12px 16px 14px;margin:0;font-size:14px;color:var(--ink-2);line-height:1.5}
.match-kuta-detail > p.kd-mean{padding-bottom:6px;color:var(--ink)}
.match-kuta-detail > p.kd-result{padding-top:6px;border-top:1px dotted var(--rule-soft)}
.kd-mean-lab{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);font-weight:700;margin-right:6px;vertical-align:1px}

/* Side-by-side charts */
.match-charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:16px 0}
@media (max-width:780px){.match-charts-grid{grid-template-columns:1fr}}
.match-chart-box{text-align:center}
.match-chart-box h3{font-family:var(--disp);font-size:20px;font-weight:600;margin:0 0 8px}
.match-chart-box h5{font-family:var(--disp);font-size:16px;font-weight:500;margin:0 0 6px;color:var(--ink-soft)}
.match-chart-svg svg{width:100%;max-width:340px;height:auto}
.match-chart-ledger{font-family:var(--mono);font-size:9.5px;color:var(--ink-soft);margin-top:8px}
.match-chart-d9{margin-top:22px;padding-top:18px;border-top:1px solid var(--rule)}
.match-chart-d9 h4{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red-deep);margin:0 0 10px;text-align:center}
.match-planet-table{overflow-x:auto;margin:12px 0}
.match-planet-table table{font-size:11px;min-width:800px}
.match-planet-table th,.match-planet-table td{padding:5px 6px;white-space:nowrap;text-align:left}
/* pin the Body column so the planet stays visible across both partners' 12 columns */
.match-planet-table table th:first-child,
.match-planet-table table td:first-child{
  position:sticky;left:0;z-index:1;background:var(--paper-2);box-shadow:2px 0 0 -1px var(--rule-soft)}
.match-planet-table table thead th:first-child{z-index:2}
.match-planet-table td.deg{font-family:var(--mono);font-size:10px;color:var(--ink-soft)}
.match-planet-table .gl{font-family:var(--disp);font-size:18px;color:var(--red-deep);vertical-align:middle}

/* Daśā Poruttam table */
.poruttam-table{overflow-x:auto;margin:12px 0}
.poruttam-table table{font-size:11px;min-width:600px;border-collapse:collapse}
.poruttam-table th{background:var(--paper-2);padding:6px 8px;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);border-bottom:1px solid var(--rule)}
.poruttam-table td{padding:6px 8px;border-bottom:1px solid var(--rule-soft)}
.poruttam-table tr.pass td{color:var(--ink)}
.poruttam-table tr.fail td{color:var(--ink-soft)}
.poruttam-table .pp-icon{font-size:16px;width:24px;text-align:center}
.poruttam-table .pp-name{font-weight:600;white-space:nowrap}
.poruttam-table .pp-score{font-family:var(--mono);font-size:10px;white-space:nowrap;text-align:center}
.poruttam-table .pp-bar{width:80px}
.poruttam-table .pp-bar-inner{display:inline-block;width:100%;height:6px;background:var(--rule-soft);border-radius:3px;vertical-align:middle}
.poruttam-table .pp-bar-inner i{display:block;height:100%;border-radius:3px;transition:width .5s ease}
.poruttam-table .pp-bar-inner i.full{background:var(--benefic)}
.poruttam-table .pp-bar-inner i.none{background:var(--debil)}
.poruttam-table .pp-detail{font-size:10px;color:var(--ink-soft)}

.match-charts-intro{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.seg.mini{display:inline-flex;gap:0;vertical-align:middle}
.seg.mini button{font-family:var(--mono);font-size:12px;letter-spacing:.06em;padding:4px 12px;border:1px solid var(--rule);background:transparent;color:var(--ink-soft);cursor:pointer}
.seg.mini button:first-child{border-radius:3px 0 0 3px}
.seg.mini button:last-child{border-radius:0 3px 3px 0}
.seg.mini button:not(:last-child){border-right:none}
.seg.mini button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}

@media (max-width:640px){.match-pane{padding:20px 14px;min-height:300px}}
.match-dasa-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:12px 0}
@media (max-width:640px){.match-dasa-grid{grid-template-columns:1fr}}
.mc-card{background:var(--paper-2);border:1px solid var(--rule-soft);padding:18px 20px}
.mc-card h3{font-family:var(--disp);font-size:20px;font-weight:600;margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--rule)}
.mc-lab{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:4px}
.mc-big{font-family:var(--disp);font-size:22px;font-weight:600;color:var(--ink);margin-bottom:6px}
.mc-big .sep{margin:0 8px;color:var(--ink-soft);font-weight:400}
.mc-bar{height:5px;background:var(--paper-3);border-radius:3px;margin:6px 0 4px;overflow:hidden}
.mc-bar i{display:block;height:100%;background:var(--red);border-radius:3px;transition:width .3s}
.mc-sub{font-family:var(--mono);font-size:9.5px;color:var(--ink-soft)}
.mc-next{font-family:var(--body);font-size:13px;color:var(--ink-2);margin-top:3px;padding-left:4px}
.mc-next .gl{font-size:14px;margin-right:2px}
.match-dasa-compare{margin-top:18px;padding:16px 20px;background:var(--paper-2);border:1px solid var(--rule-soft)}
.match-dasa-compare h4{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--red-deep);margin:0 0 8px}
.match-dasa-compare p{font-family:var(--body);font-size:15px;color:var(--ink-2);line-height:1.6;margin:0}

/* ---------- Remedies (chart details + matching) ---------- */
.rem-block{margin:18px 0}
.rem-block h4{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--red-deep);margin:0 0 8px}
.rem-block h5{font-family:var(--disp);font-size:16px;font-weight:600;margin:14px 0 8px;color:var(--ink)}
.rem-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.rem-card{background:var(--paper-2);border:1px solid var(--rule-soft);padding:14px 16px}
.rem-planet{font-size:15px;color:var(--ink);margin-bottom:6px}
.rem-planet .gl{font-family:var(--disp);font-size:20px;color:var(--red-deep);margin-right:4px}
.rem-item{font-family:var(--body);font-size:14px;color:var(--ink-2);margin-bottom:4px}
.rem-meta{font-family:var(--mono);font-size:9.5px;color:var(--ink-soft);letter-spacing:.04em}
.rem-reason{font-family:var(--body);font-size:11px;color:var(--ink-soft);font-style:italic;margin-top:6px;line-height:1.4}
.rem-mantra{background:var(--paper-2);border:1px solid var(--rule-soft);padding:12px 16px;margin:8px 0}
.rem-mantra .rem-planet{margin-bottom:8px}
.rem-bija code{display:block;font-family:var(--mono);font-size:13px;color:var(--ink);line-height:1.5;margin-bottom:4px}
.rem-vedic em{font-family:var(--body);font-size:13px;color:var(--ink-soft);font-style:italic}
.rem-count{font-family:var(--mono);font-size:9.5px;color:var(--ink-soft);margin-top:4px}
.rem-prio{display:flex;flex-direction:column;gap:6px}
.rem-prio-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:4px;border:1px solid var(--rule-soft);flex-wrap:wrap}
.rem-prio-row.critical{background:rgba(190,50,50,.06);border-left:3px solid var(--red-deep)}
.rem-prio-row.high{background:rgba(199,154,60,.06);border-left:3px solid #c79a3c}
.rem-prio-row.medium{background:transparent}
.rem-prio-planet{font-family:var(--disp);font-size:15px;font-weight:600;color:var(--ink);min-width:80px}
.rem-prio-planet .gl{font-size:20px;color:var(--red-deep);margin-right:3px}
.rem-prio-reason{font-size:12px;color:var(--ink-soft);flex:1}
.rem-prio-chips .chip{font-size:9px;margin:0 2px}
.rem-prio-badge{font-family:var(--mono);font-size:9px;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:3px}
.rem-prio-badge.critical{background:var(--red-fill);color:#fff}
.rem-prio-badge.high{background:#c79a3c;color:#231d0e}
.rem-prio-badge.medium{background:var(--paper-3);color:var(--ink-soft)}
.rem-context{font-family:var(--body);font-size:10.5px;color:var(--ink-soft);font-style:italic;margin-bottom:2px}
.rem-type{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:2px}
.rem-stotra{font-family:var(--body);font-size:11px;color:var(--ink-2);margin-top:4px;padding-top:4px;border-top:1px solid var(--rule-soft)}
.rem-dosha-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-top:10px}
.dosha-card .rem-planet{font-size:16px;font-weight:600}
.dosha-card .rem-meta{font-size:10px;margin-bottom:8px}
.dosha-card .rem-reason{font-style:normal;font-size:11.5px}

/* ---------- Language switcher (nav) ---------- */
.nav-lang{display:inline-flex;gap:0;margin-left:auto;align-items:center}
.nav-lang button{font-family:var(--mono);font-size:10px;letter-spacing:.06em;padding:3px 8px;
  border:1px solid var(--rule);background:transparent;color:var(--ink-soft);cursor:pointer}
.nav-lang button:first-child{border-radius:3px 0 0 3px}
.nav-lang button:last-child{border-radius:0 3px 3px 0}
.nav-lang button:not(:last-child){border-right:none}
.nav-lang button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ===================================================================
   TOUCH-TARGET FLOOR
   Pointer-coarse and narrow viewports get a 44px minimum on every
   control, per WCAG 2.5.5 / platform HIG. Desktop pointer sizing is
   deliberately left alone — the almanac's compact controls are part of
   its density, and a mouse does not need the same slop as a thumb.
   Scoped by (pointer:coarse) OR max-width so it also covers a narrow
   desktop window, where the same controls get cramped.
   =================================================================== */
@media (max-width:640px), (pointer:coarse){
  .seg button,
  .nav-lang button,
  .prefbar .seg.small button,
  .prefbar .pref.profiles button,
  .prefbar .folio-jump,
  .profile-pick,
  .ltab,
  .export-btn,
  .bs-btn,
  .emblem-toggle button,
  .sechead .rt button,
  button.castbtn, button.cancelbtn,
  a.castbtn, a.cancelbtn{min-height:44px}

  /* flex/grid children need the padding too, or min-height just adds dead space */
  .seg button,
  .prefbar .seg.small button,
  .nav-lang button{display:inline-flex;align-items:center;justify-content:center;padding-block:0}

  /* folio tabs and the vertical pane menu are the two primary navigations */
  .btab{min-height:52px;min-width:88px}
  .sb-vmenu .sbv{min-height:48px}

  /* page-turn arrows: full-height columns, but the hit area was only 44px wide
     and visually ambiguous — give them a real, labelled target */
  .page-nav{min-width:44px}

  /* checkbox rows in the upagraha picker were 8.5px labels with a ~13px box */
  #upaSelect label{min-height:44px;font-size:var(--fs-label)}
  #upaSelect input[type=checkbox]{width:20px;height:20px}

  /* footer navigation — full-width links that were only 30px tall */
  .foot-col a{min-height:44px;display:flex;align-items:center}

  .skip-link{min-height:44px;display:inline-flex;align-items:center}

  /* Inline glossed terms are deliberately NOT enlarged: WCAG 2.5.5 exempts targets
     that sit inline within a sentence, and padding them out would wreck the leading
     of the prose they live in. */
}

/* ===================================================================
   CASE STUDIES (Learn › Case Studies)
   Documented lives read against their own charts. The source-grade
   badge and the caution block are load-bearing, not decoration — the
   whole section's honesty rests on the birth-data quality being
   impossible to miss.
   =================================================================== */
.cs-source{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--rule);
  background:var(--paper-2);padding:13px 15px;margin:16px 0}
.cs-source p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-2)}
.cs-rodden{flex:none;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.1em;
  text-transform:uppercase;padding:5px 9px;border:1px solid var(--ink);white-space:nowrap;
  align-self:flex-start}
/* strong grades read as settled, weak grades as a warning */
.cs-r-AA,.cs-r-A{background:var(--ink);color:var(--paper)}
.cs-r-B{background:transparent;color:var(--ink)}
.cs-r-C,.cs-r-DD,.cs-r-X{background:var(--red-fill);color:#fff;border-color:var(--red-fill)}

.cs-caution{border-left:3px solid var(--red);background:var(--paper-2);padding:12px 15px;
  margin:14px 0;font-size:14px;line-height:1.6;color:var(--ink-2)}
.cs-caution.ok{border-left-color:var(--benefic)}
.cs-caution b{display:block;font-family:var(--body);font-weight:600;color:var(--ink);margin-bottom:4px}

.cs-chartrow{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:26px;
  align-items:start;margin:20px 0 6px}
.cs-chart svg{width:100%;height:auto;display:block}
.cs-facts{display:flex;flex-direction:column;gap:0;border:1px solid var(--rule)}
.cs-fact{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:10px 14px;border-bottom:1px solid var(--rule-soft)}
.cs-fact:last-child{border-bottom:none}
.cs-fact .k{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft)}
.cs-fact .v{font-family:var(--disp);font-size:19px;font-weight:600;text-align:right}
.cs-fact .v em{font-family:var(--body);font-size:14px;font-weight:400;font-style:italic;color:var(--ink-soft)}

table.cs-table td .cs-ev-note{display:block;font-family:var(--body);font-size:13px;
  font-style:italic;color:var(--ink-soft);line-height:1.45;margin-top:3px;white-space:normal}
table.cs-table td:nth-child(3){min-width:240px;text-align:left;white-space:normal}

.cs-bias{margin-top:22px}

@media (max-width:820px){
  .cs-chartrow{grid-template-columns:1fr;gap:18px}
}
@media (max-width:640px){
  .cs-source{flex-direction:column;gap:10px}
  .cs-fact .v{font-size:17px}
}
.cs-caution.warn{border-left-color:var(--gold,#b3852a)}

/* Case-study cards: the event cell carries a title plus a note, so it needs the full
   card width rather than the label/value split the other rows use. */
@media (max-width:560px){
  table.cs-table.tblcards td:nth-child(3){flex-direction:column;align-items:flex-start;
    text-align:left;gap:2px}
  table.cs-table.tblcards td:nth-child(3)::before{margin-bottom:2px}
  table.cs-table.tblcards td:nth-child(3) b{font-family:var(--body);font-size:15px}
  table.cs-table.tblcards td .cs-ev-note{margin-top:2px}
}

/* ---- Case-study daśā ledger -------------------------------------------
   Mahādaśās as an accordion; those carrying a documented event open by
   default so the sequence and the biography line up without hunting. */
.cs-dasha{margin:14px 0 6px}
.cs-md{border:1px solid var(--rule-soft);background:var(--paper-2);margin:0 0 6px}
.cs-md.has-ev{border-color:var(--rule);box-shadow:inset 3px 0 0 var(--red)}
.cs-md[open]{background:var(--paper)}
.cs-md>summary{list-style:none;cursor:pointer;display:grid;
  grid-template-columns:minmax(84px,auto) minmax(150px,1fr) auto auto;
  gap:6px 16px;align-items:baseline;padding:12px 15px;min-height:44px}
.cs-md>summary::-webkit-details-marker{display:none}
.cs-md>summary:hover{background:var(--paper-3)}
.cs-md-lord{font-family:var(--disp);font-size:19px;font-weight:600;color:var(--ink)}
.cs-md.has-ev .cs-md-lord{color:var(--red-deep)}
.cs-md-span{font-family:var(--mono);font-size:var(--fs-ui);color:var(--ink-2);letter-spacing:.04em}
.cs-md-age{font-family:var(--mono);font-size:var(--fs-label);color:var(--ink-soft);
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.cs-md-ev{font-family:var(--mono);font-size:var(--fs-label);color:var(--red-deep);
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;text-align:right}
.cs-md>.divscroll{border-top:1px solid var(--rule-soft)}
table.cs-ad-table td{font-size:var(--fs-ui)}
table.cs-ad-table tr.cs-ad-hit td{background:var(--paper-3)}
.cs-ad-ev{display:block;font-family:var(--body);font-size:13px;font-style:italic;
  color:var(--red-deep);line-height:1.4;white-space:normal}
.cs-ad-none{color:var(--ink-soft)}

@media (max-width:640px){
  .cs-md>summary{grid-template-columns:1fr auto;gap:4px 12px;padding:12px 13px}
  .cs-md-lord{font-size:17px}
  .cs-md-span{grid-column:1/-1}
  .cs-md-ev{text-align:left}
}
@media (max-width:560px){
  /* the antardaśā cards already carry data-labels; keep the event cell full-width */
  table.cs-ad-table.tblcards td:nth-child(5){flex-direction:column;align-items:flex-start;
    text-align:left;gap:2px}
  table.cs-ad-table.tblcards tr.cs-ad-hit{border-color:var(--red)}
}

/* The antardaśā table inherits .divtab's 740px min-width, which pushed the Event
   column — the whole point of the table — off the right edge. This one is only
   five short columns, so let it fit and give the remaining width to the event. */
table.cs-ad-table{min-width:0;width:100%;table-layout:fixed}
table.cs-ad-table th,table.cs-ad-table td{white-space:nowrap}
table.cs-ad-table th:first-child,table.cs-ad-table td:first-child{width:22%}
table.cs-ad-table th:nth-child(2),table.cs-ad-table td:nth-child(2),
table.cs-ad-table th:nth-child(3),table.cs-ad-table td:nth-child(3){width:15%}
table.cs-ad-table th:nth-child(4),table.cs-ad-table td:nth-child(4){width:8%;text-align:right}
table.cs-ad-table th:last-child,table.cs-ad-table td:last-child{width:40%;
  text-align:left;white-space:normal}
.cs-md>.divscroll{overflow-x:visible}

/* In card mode the desktop percentage widths above squeeze each value into a
   narrow right-hand column; release them so the label/value pair uses the row. */
@media (max-width:560px){
  table.cs-ad-table.tblcards{table-layout:auto}
  table.cs-ad-table.tblcards td,
  table.cs-ad-table.tblcards td:first-child,
  table.cs-ad-table.tblcards td:nth-child(2),
  table.cs-ad-table.tblcards td:nth-child(3),
  table.cs-ad-table.tblcards td:nth-child(4),
  table.cs-ad-table.tblcards td:last-child{width:auto;text-align:right;white-space:normal}
  table.cs-ad-table.tblcards td:last-child{text-align:left}
}