/* ===================================================================
   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;
  --ink-soft:#6f685a;     /* muted captions */
  --rule:#b8ab8f;         /* hairline rules */
  --rule-soft:#cabd9f;
  --red:#a8392b;          /* brick / vermillion accent */
  --red-deep:#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;
}
html.dark{color-scheme:dark;--paper:#191919;--paper-2:#222;--paper-3:#2a2a2a;
  --ink:#e8e0d0;--ink-2:#c8c0b0;--ink-soft:#908878;
  --rule:#505050;--rule-soft:#606060;
  --red:#cc5544;--red-deep:#dd6655;
  --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}
}
*{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:10.5px;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:8.5px;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:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft,#6f685a)}
.prefbar .seg.small button{padding:6px 13px;font-size:9.5px}
.prefbar .folio-jump{font-family:var(--mono);font-size:9.5px;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:9px;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);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-deep)}
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:9.5px;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:10px;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:10px;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:10px;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:9px;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:10px;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:10px;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}
.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:9px;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:10px;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:10px;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:9.5px;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:9.5px;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:9.5px;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:10px;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:10.5px;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:10px}

/* 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:10px;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:9px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.accval{font-family:var(--mono);font-size:10px;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}
button.castbtn{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  background:var(--red);color:#fff;border:none;padding:15px 26px;border-radius:1px;cursor:pointer;
  transition:background .15s}
button.castbtn:hover{background:var(--red-deep)}
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:9.5px;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:10px;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:8.5px;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:9.5px;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:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft)}
.sechead .rt button{font-family:var(--mono);font-size:10px;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:9px;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:9px;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:8.5px;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)}
.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)}

/* 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 (Ṣaḍbala / Bhāva-bala / Houses) 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. Matrix tables (sarvato / av-tab / shodāśa) keep sticky-scroll. */
@media (max-width:560px){
  .divscroll:has(.divtab.tblcards){overflow:visible;border:none;background:none}
  table.divtab.tblcards{display:block;min-width:0;width:100%}
  table.divtab.tblcards thead{display:none}
  table.divtab.tblcards tbody{display:block}
  table.divtab.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{background:none}
  table.divtab.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:5px 12px;
    white-space:normal;position:static;background:none;font-size:12px}
  table.divtab.tblcards td:last-child{border-bottom:none}
  table.divtab.tblcards td::before{content:attr(data-label);font-family:var(--mono);font-size:9.5px;
    letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);text-align:left;flex:0 0 auto;margin-right:10px}
  /* the row's identity cell (first column) reads as the card's lead line */
  table.divtab.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)}
.btab-rn{font-size:8.5px;letter-spacing:.14em;color:var(--red-deep);opacity:.8}
.btab.on .btab-rn{opacity:1}
.btab-name{font-size:11px;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}
.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) */
.life-areas{display:flex;flex-direction:column;gap:6px;margin:10px 0 14px}
.la-row{display:grid;grid-template-columns:minmax(120px,1.3fr) minmax(80px,2fr) auto;
  align-items:center;gap:12px}
.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){
  .la-row{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}

/* 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}

/* 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}
.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-deep);color:#fff}
.rem-prio-badge.high{background:#c79a3c;color:#fff}
.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)}