/* Jathaka.com — site theme. Loaded after /astro/ui/astro.css, which supplies
   the calculator component vocabulary (.panel, .field, .btn, .stats, table…).
   This file retunes those components to the Jathaka palette/type and adds the
   marketing chrome (header, hero, footer, tool cards, login gate) the astro
   tools don't need on their own. */

:root{
  --navy:#0F1E36;
  --cream:var(--navy-cream, #FBF7EF);
  --paper:#FFFCF6;
  --ink:#14213A;
  --inksoft:rgba(20,33,58,.62);
  --maroon:#6B1F2E;
  --maroon-ink:#FFF6E6;
  --gold:#C6A15B;
  --golddeep:#8A6A35;
  --amber:#E28B27;
  --line:rgba(15,30,54,.12);
  --good:#1f6b45;
  --warn:#8a5a12;
  --bad:#8c2f2f;
  --radius:14px;
}

body{ font-family:"Manrope","Hanken Grotesk",system-ui,sans-serif; background:var(--cream); }
h1.title, header .brand, .k-centre-big{ font-family:"Marcellus","Fraunces",Georgia,serif; }

a{ color:inherit; }

/* ---------- Site header ---------- */
.site-header{ position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:22px;
  padding:14px 28px; background:rgba(251,247,239,.94); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line); }
.site-header .brand{ font-family:"Marcellus",Georgia,serif; font-size:21px; color:var(--navy);
  text-decoration:none; letter-spacing:.01em; display:flex; align-items:baseline; gap:2px; }
.site-header .brand .dot{ color:var(--maroon); }
/* min-width:0 lets the row shrink honestly instead of overflowing its box:
   without it the links were clipped between 960 and 1090px wide. */
.site-nav{ display:flex; align-items:center; gap:18px; flex:1; min-width:0; }
.site-nav a{ font-size:14px; font-weight:600; color:var(--ink); text-decoration:none; }
.site-nav a:hover, .site-nav a.active{ color:var(--maroon); }
/* Four links promoted out of the "More" menu into the bar itself, since the
   row had 163px of unused space even at 1081px — the narrowest the inline bar
   ever renders, below which the whole nav becomes the drawer.

   Each appears only once there is room for it AND a comfortable gap before
   the Login / Create Jathakam block: the breakpoints are the measured label
   widths plus the 18px flex gap, accumulated. Its twin in the menu hides at
   the same width, so no link is ever offered in two places at once — and
   below 1081px the reverse holds, the bar copies stay hidden and the menu
   keeps every one of them. */
.site-nav .nav-extra{ display:none; }
@media (min-width:1081px){ .site-nav .nav-x1{ display:block; } .nav-more .nav-dup1{ display:none; } }
@media (min-width:1120px){ .site-nav .nav-x2{ display:block; } .nav-more .nav-dup2{ display:none; } }
@media (min-width:1210px){ .site-nav .nav-x3{ display:block; } .nav-more .nav-dup3{ display:none; } }
@media (min-width:1280px){ .site-nav .nav-x4{ display:block; } .nav-more .nav-dup4{ display:none; } }
.nav-more{ position:relative; }
.nav-more>button{ font:inherit; font-size:14px; font-weight:600; color:var(--ink); background:none;
  border:none; cursor:pointer; display:flex; align-items:center; gap:5px; padding:0; }
/* Three labelled columns rather than one column of a dozen links: a flat
   list put "Chandrashtama" and "My Readings" on the same footing and ran
   nearly 500px down the hero. */
.nav-more .menu{ position:absolute; top:calc(100% + 14px); left:0; background:var(--paper);
  border:1px solid var(--line); border-radius:12px; box-shadow:0 18px 40px -22px rgba(15,30,54,.35);
  padding:14px 16px 12px; display:none; grid-template-columns:repeat(3,minmax(118px,max-content));
  gap:2px 22px; max-width:min(460px,calc(100vw - 32px)); }
.nav-more .menu.open{ display:grid; }
.nav-more .menu-group{ display:flex; flex-direction:column; }
.nav-more .menu-label{ font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--inksoft); padding:4px 8px 6px; }
.nav-more .menu a{ padding:7px 8px; border-radius:8px; font-size:13.5px; font-weight:600; text-decoration:none;
  color:var(--ink); white-space:nowrap; }
.nav-more .menu a:hover{ background:rgba(15,30,54,.06); color:var(--maroon); }
.nav-more .menu-all{ grid-column:1 / -1; margin-top:10px; padding-top:11px !important;
  border-top:1px solid var(--line); border-radius:0 !important; color:var(--maroon) !important; }
.nav-more .menu-all:hover{ background:none !important; }
.header-actions{ display:flex; align-items:center; gap:14px; }
.icon-btn{ background:none; border:none; cursor:pointer; font-size:15px; color:var(--ink); }
.lang-pick{ font:inherit; font-size:13px; font-weight:600; color:var(--ink); background:none; border:1px solid var(--line);
  border-radius:999px; padding:6px 12px; cursor:pointer; }
.btn-text{ font:inherit; font-size:13.5px; font-weight:700; color:var(--ink); background:none; border:none; cursor:pointer; }
.btn-primary, .cta{ font:inherit; font-size:13px; font-weight:700; color:var(--maroon-ink); background:var(--maroon);
  border:none; border-radius:999px; padding:11px 20px; cursor:pointer; text-decoration:none; display:inline-flex;
  align-items:center; gap:8px; white-space:nowrap; }
.btn-primary:hover, .cta:hover{ background:#591827; }
.user-chip{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; color:var(--ink); }
.user-chip button{ font:inherit; font-size:12.5px; font-weight:700; color:var(--inksoft); background:none; border:none; cursor:pointer; text-decoration:underline; }
.mobile-toggle{ display:none; background:none; border:none; font-size:20px; cursor:pointer; color:var(--navy); }

/* The row needs about 1090px to lay out six items beside the brand and the
   call to action, so the hamburger takes over below that rather than at 960. */
@media (max-width:1080px){
  /* The header carries a backdrop-filter, which makes it the containing block
     for its fixed children. A panel anchored to the viewport therefore collapsed
     to a 40px sliver with the whole menu scrolling inside it. Anchoring it to the
     header instead — directly below it, filling what is left of the screen — is
     what the viewport inset was reaching for. */
  .site-nav{ position:fixed; top:100%; left:0; right:0; height:calc(100vh - 100%); height:calc(100dvh - 100%);
    background:var(--paper); flex-direction:column; align-items:flex-start;
    padding:20px 24px; gap:16px; overflow-y:auto; display:none; }
  .site-nav.open{ display:flex; }
  .nav-more .menu{ position:static; box-shadow:none; border:none; padding:0 0 0 10px; display:none;
    grid-template-columns:1fr; max-width:none; gap:2px; }
  .nav-more .menu.open{ display:grid; }
  .nav-more .menu-group{ padding-bottom:6px; }
  .nav-more .menu-all{ margin-top:4px; }
  .mobile-toggle{ display:block; }
  .header-actions .lang-pick, .header-actions .icon-btn{ display:none; }
}

/* ---------- Breadcrumb ---------- */
.crumb{ max-width:1180px; margin:0 auto; padding:16px 28px 0; font-size:13px; color:var(--inksoft); }
.crumb a{ color:var(--inksoft); text-decoration:none; }
.crumb a:hover{ color:var(--maroon); }
.crumb .sep{ margin:0 6px; }
.crumb .current{ color:var(--maroon); font-weight:700; }

/* ---------- Hero (navy band) ---------- */
.hero{ background:var(--navy); color:var(--paper); padding:56px 28px 64px; }
.hero-inner{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
.eyebrow{ font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
.hero h1{ font-family:"Marcellus",Georgia,serif; font-weight:400; font-size:44px; line-height:1.15; margin-bottom:16px; }
.hero p.lead{ font-size:16px; line-height:1.6; color:rgba(255,252,246,.78); max-width:520px; margin-bottom:26px; }
.hero .actions{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:26px; }
.btn-ghost{ font:inherit; font-size:13px; font-weight:700; color:var(--paper); background:transparent;
  border:1.5px solid rgba(255,252,246,.4); border-radius:999px; padding:11px 20px; cursor:pointer; text-decoration:none; }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); }
.trust-list{ display:flex; flex-direction:column; gap:8px; }
.trust-list span{ font-size:13.5px; color:rgba(255,252,246,.75); }
.trust-list b{ color:var(--gold); margin-right:6px; }
.hero-art{ display:flex; align-items:center; justify-content:center; }

/* ---------- Section shell ---------- */
.section{ max-width:1180px; margin:0 auto; padding:52px 28px; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:26px; flex-wrap:wrap; }
.section-head h2{ font-family:"Marcellus",Georgia,serif; font-weight:400; font-size:30px; color:var(--navy); }
.section-head p{ color:var(--inksoft); font-size:14.5px; max-width:560px; margin-top:6px; }
.section-head .more-link{ font-size:13.5px; font-weight:700; color:var(--maroon); text-decoration:none; white-space:nowrap; }

/* ---------- Today's Panchangam widget ---------- */
.panch-widget{ background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:22px; box-shadow:0 20px 50px -30px rgba(15,30,54,.4); }
.panch-widget .loc{ font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--golddeep); margin-bottom:4px; }
.panch-widget h3{ font-family:"Marcellus",Georgia,serif; font-weight:400; font-size:20px; color:var(--navy); margin-bottom:14px; }
.panch-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
.panch-cell{ border:1px solid var(--line); border-radius:11px; padding:10px 12px; background:#fff; }
.panch-cell .k{ font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--inksoft); }
.panch-cell .v{ font-size:14.5px; font-weight:700; color:var(--ink); margin-top:2px; }
.panch-cell .sub{ font-size:11.5px; color:var(--inksoft); margin-top:1px; }
.panch-widget .view-full{ font-size:13px; font-weight:700; color:var(--maroon); text-decoration:none; }

/* ---------- Service / tool card grids ---------- */
.card-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; }
.card-grid.services{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.svc-card{ background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:20px; text-decoration:none;
  color:var(--ink); display:flex; flex-direction:column; gap:10px; transition:transform .15s ease, box-shadow .15s ease; }
.svc-card:hover{ transform:translateY(-2px); box-shadow:0 16px 32px -22px rgba(15,30,54,.4); border-color:rgba(15,30,54,.22); }
.svc-card .icon{ font-size:22px; color:var(--maroon); }
.svc-card .name{ font-weight:700; font-size:15.5px; }
.svc-card .desc{ font-size:13px; color:var(--inksoft); line-height:1.4; }

.tools-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; }
.tool-card{ background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:20px; text-decoration:none; color:var(--ink); display:block; }
.tool-card .cat{ font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--golddeep); margin-bottom:8px; }
.tool-card .name{ font-family:"Manrope",sans-serif; font-weight:700; font-size:16px; margin:0 0 6px; }
.tool-card .desc{ font-size:13.5px; color:var(--inksoft); line-height:1.4; margin-bottom:14px; }
.tool-card .open{ font-size:12px; font-weight:700; color:var(--maroon); }
.tool-card:hover{ border-color:rgba(107,31,46,.35); box-shadow:0 16px 32px -22px rgba(15,30,54,.35); }

/* ---------- Rashi / Nakshatra directories ---------- */
.chip-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; }
.chip{ background:var(--paper); border:1px solid var(--line); border-radius:11px; padding:12px; text-align:center; text-decoration:none; color:var(--ink); }
.chip .sym{ font-size:18px; color:var(--maroon); display:block; margin-bottom:4px; }
.chip .lbl{ font-size:12.5px; font-weight:700; }
.chip .sub{ font-size:10.5px; color:var(--inksoft); margin-top:2px; }

/* ---------- Feature (Jathakam sample) split ---------- */
.feature{ background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:36px; display:grid;
  grid-template-columns:1fr 1fr; gap:36px; align-items:center; }
.feature .eyebrow{ color:var(--golddeep); }
.feature h2{ font-family:"Marcellus",Georgia,serif; font-weight:400; font-size:27px; color:var(--navy); margin-bottom:12px; }
.feature p{ color:var(--inksoft); font-size:14.5px; line-height:1.6; margin-bottom:20px; }
.stat-row{ display:flex; gap:20px; margin-bottom:22px; flex-wrap:wrap; }
.stat-row .n{ font-family:"Marcellus",Georgia,serif; font-size:22px; color:var(--maroon); }
.stat-row .lbl{ font-size:11.5px; color:var(--inksoft); }
.feature .actions{ display:flex; gap:12px; flex-wrap:wrap; }
.btn-outline{ font:inherit; font-size:13px; font-weight:700; color:var(--maroon); background:transparent;
  border:1.5px solid var(--maroon); border-radius:999px; padding:10px 18px; text-decoration:none; }
.sample-badge{ display:inline-block; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--golddeep); background:rgba(198,161,91,.14); border-radius:999px; padding:4px 10px; margin-bottom:10px; }

/* ---------- Knowledge cards ---------- */
.kb-card{ background:var(--paper); border:1px solid var(--line); border-radius:14px; overflow:hidden; text-decoration:none; color:var(--ink); }
.kb-card .thumb{ height:130px; background:linear-gradient(135deg,var(--navy),#1c3357); display:flex; align-items:center; justify-content:center; color:rgba(255,252,246,.4); font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.kb-card .body{ padding:16px; }
.kb-card .cat{ font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--golddeep); margin-bottom:6px; }
.kb-card .title{ font-weight:700; font-size:15px; line-height:1.35; margin-bottom:8px; }
.kb-card .meta{ font-size:12px; color:var(--inksoft); }
.kb-card .blurb{ margin:0 0 10px; font-size:13px; line-height:1.55; color:var(--inkmid); }
.kb-card{ display:block; transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.kb-card:hover{ transform:translateY(-2px); box-shadow:0 16px 32px -22px rgba(15,30,54,.4);
  border-color:rgba(15,30,54,.22); }
/* A single glyph rather than the word "Illustration": the cards carried a
   placeholder long after the section went live. */
.kb-card .thumb{ font-family:"Marcellus",Georgia,serif; font-size:44px; letter-spacing:0;
  text-transform:none; color:rgba(198,161,91,.6); }

/* ---------- Horoscope: the twelve signs at a glance ---------- */
#all-signs{ display:grid; gap:6px; }
.sign-row{ display:grid; grid-template-columns:minmax(92px,auto) 1fr minmax(96px,auto); gap:14px; align-items:center;
  width:100%; text-align:left; font:inherit; background:none; border:1px solid transparent; border-radius:10px;
  padding:9px 11px; cursor:pointer; color:var(--inkmid); }
.sign-row:hover{ background:rgba(15,30,54,.04); }
.sign-row.on{ background:var(--warn-bg); border-color:rgba(198,161,91,.4); }
.sign-row .name{ font-weight:700; font-size:14px; color:var(--ink); }
.sign-row .say{ font-size:13px; line-height:1.5; }
.sign-row .score{ font-size:12px; font-weight:700; text-align:right; color:var(--inksoft); }
@media (max-width:600px){
  .sign-row{ grid-template-columns:1fr auto; }
  .sign-row .say{ grid-column:1 / -1; }
}

/* ---------- Articles ---------- */
.article-head{ margin:0 0 6px; display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--golddeep); }
.article-head .dot{ color:var(--line); }
.article-head .when{ color:var(--inksoft); font-weight:600; letter-spacing:.06em; }
.article-lead{ font-size:16px; line-height:1.7; color:var(--inkmid); margin:0 0 4px; }
.article{ font-size:15px; line-height:1.78; color:var(--inkmid); }
.article h2{ font-family:"Marcellus",Georgia,serif; font-weight:400; font-size:23px; line-height:1.3;
  color:var(--ink); margin:36px 0 12px; }
.article h3{ font-size:15.5px; font-weight:800; color:var(--ink); margin:26px 0 8px; }
.article p{ margin:0 0 15px; }
.article ul, .article ol{ margin:0 0 16px; padding-left:20px; }
.article li{ margin-bottom:8px; }
.article strong{ color:var(--ink); font-weight:700; }
.article a{ color:var(--maroon); font-weight:600; text-decoration:none; border-bottom:1px solid rgba(122,30,48,.25); }
.article a:hover{ border-bottom-color:var(--maroon); }
.article .callout{ background:var(--warn-bg); border-left:3px solid var(--gold); border-radius:0 10px 10px 0;
  padding:14px 16px; margin:20px 0; font-size:14.5px; line-height:1.7; color:var(--warn-ink); }
.article .callout strong{ color:var(--warn-ink); }
.article table{ width:100%; border-collapse:collapse; margin:20px 0; font-size:14px; }
.article th, .article td{ text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
.article th{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--inksoft); }
.article td:first-child{ color:var(--ink); font-weight:600; white-space:nowrap; }
.article .try{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; justify-content:space-between;
  background:var(--navy); color:var(--paper); border-radius:14px; padding:18px 20px; margin:26px 0; }
.article .try .what{ font-size:14.5px; line-height:1.6; max-width:520px; }
.article .try .what b{ color:var(--gold-soft); }
.article .try .btn-primary{ white-space:nowrap; }
.article-foot{ margin-top:30px; padding-top:18px; border-top:1px solid var(--line);
  font-size:13.5px; color:var(--inksoft); }
.article-foot a{ color:var(--maroon); font-weight:600; text-decoration:none; }
@media (max-width:600px){
  .article h2{ font-size:20px; }
  .article .try{ flex-direction:column; align-items:flex-start; }
}

/* ---------- Site footer ---------- */
.site-footer{ background:var(--navy); color:rgba(255,252,246,.72); padding:48px 28px 24px; margin-top:0; text-align:left; }
.footer-inner{ max-width:1180px; margin:0 auto; }
.footer-top{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:32px; padding-bottom:32px; border-bottom:1px solid rgba(255,252,246,.12); }
.footer-brand .brand{ font-family:"Marcellus",Georgia,serif; font-size:19px; color:var(--paper); text-decoration:none; }
.footer-brand p{ font-size:13px; margin-top:10px; line-height:1.6; max-width:280px; }
.footer-col h4{ font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:12px; }
.footer-col a{ display:block; font-size:13.5px; color:rgba(255,252,246,.72); text-decoration:none; margin-bottom:9px; }
.footer-col a:hover{ color:var(--gold); }
.footer-bottom{ padding-top:20px; font-size:12px; color:rgba(255,252,246,.5); }
.footer-bottom p{ margin-bottom:6px; line-height:1.6; }
.footer-bottom .legal{ display:flex; gap:16px; margin-top:10px; flex-wrap:wrap; }
.footer-bottom .legal a{ color:rgba(255,252,246,.6); text-decoration:none; font-size:12px; }

@media (max-width:900px){
  .hero-inner, .feature{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .footer-top{ grid-template-columns:1fr; }
  .hero h1{ font-size:32px; }
}

/* ---------- Login gate (used on every calculator page) ---------- */
.gate{ position:relative; }
.gate-lock{ display:none; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  background:rgba(198,161,91,.12); border:1.5px solid rgba(198,161,91,.4); border-radius:12px; padding:14px 16px; margin-bottom:16px; }
.gate-lock.on{ display:flex; }
.gate-lock .msg{ font-size:13.5px; color:var(--ink); }
.gate-lock .msg b{ color:var(--maroon); }
/* Dim the form, and only the form. Listing .field and .btn as well did two
   quiet kinds of damage: opacity nests, so fields rendered at 0.55 x 0.55 =
   0.30 — far fainter than intended — and any opacity below 1 creates a
   stacking context, which trapped the place-autocomplete dropdown inside its
   own .field so the fields below it painted straight over the suggestions.
   pointer-events on the form already covers every child. */
.gate.locked form{ opacity:.55; pointer-events:none; }
.sample-tag{ display:none; align-items:center; gap:6px; font-size:11px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--golddeep); background:rgba(198,161,91,.14); border-radius:999px; padding:5px 11px; margin-bottom:10px; }
.sample-tag.on{ display:inline-flex; }

/* ---------- Login modal ---------- */
.modal-backdrop{ position:fixed; inset:0; background:rgba(15,30,54,.55); display:none; align-items:center; justify-content:center; z-index:100; padding:20px; }
.modal-backdrop.open{ display:flex; }
.modal{ background:var(--paper); border-radius:18px; padding:30px; width:100%; max-width:380px; box-shadow:0 30px 60px -20px rgba(15,30,54,.5); position:relative; }
.modal h3{ font-family:"Marcellus",Georgia,serif; font-weight:400; font-size:22px; color:var(--navy); margin-bottom:6px; }
.modal p.sub{ font-size:13.5px; color:var(--inksoft); margin-bottom:20px; text-align:left; }
.modal .close{ position:absolute; top:16px; right:18px; background:none; border:none; font-size:18px; cursor:pointer; color:var(--inksoft); }
.modal .field{ margin-bottom:14px; text-align:left; }
.modal .field label{ display:block; font-size:12.5px; font-weight:700; margin-bottom:5px; }
.modal .field input{ width:100%; font:inherit; font-size:14.5px; border:1.5px solid var(--line); border-radius:10px; padding:10px 12px; }
.modal .btn-primary{ width:100%; justify-content:center; margin-top:6px; }
.modal .note{ font-size:11.5px; color:var(--inksoft); margin-top:14px; text-align:center; }

main.page{ max-width:880px; }

/* ==================================================================
   TOOL PAGE TEMPLATE — from the Claude Design mockup
   (Jathaka.com - UI mockups (2).html, screens isJathakam through isTools).

   /astro/ui/astro.css is ported ManyHand code and is treated as
   read-only, so every rule below re-tunes its component vocabulary
   from here. site.css loads after it, so same-specificity selectors
   win on source order — nothing in astro/ needs to change.

   Applies only under main.tool-page; content pages (main.page) and
   the home page keep their current shells.
   ================================================================== */

:root{
  --gold-label:#B08A3E;
  --inkmid:#4A5468;
  --muted:#8A8271;
  --tint:#FDFAF3;
  --gold-soft:#E8CE9A;
  --amber-hi:#F09B36;
  --amber-ink:#231206;
  --warn-bg:#FBEEDC;
  --warn-ink:#8A5A18;
  --retro:#B2452F;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --shell:1360px;
}

/* ---------- Shell: undo astro.css's 760px single column ---------- */
main.tool-page{ max-width:none; width:100%; margin:0; padding:0; }

/* ---------- Navy hero band ---------- */
.page-hero{ background:var(--navy);
  background-image:radial-gradient(circle at 88% 20%,rgba(226,139,39,.14),transparent 55%); }
.page-hero-inner{ max-width:var(--shell); margin:0 auto; padding:40px 28px 42px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:28px; flex-wrap:wrap; }
.page-hero .crumb{ max-width:none; margin:0; padding:0;
  font-size:11.5px; font-weight:500; color:rgba(255,252,246,.5); }
.page-hero .crumb a{ color:rgba(255,252,246,.5); text-decoration:none; }
.page-hero .crumb a:hover{ color:var(--gold-soft); }
.page-hero .crumb .current{ color:var(--gold-soft); font-weight:500; }
.page-hero h1{ margin:16px 0 0; font-family:"Marcellus",Georgia,serif; font-weight:400;
  font-size:clamp(30px,3.4vw,44px); line-height:1.1; color:var(--paper); text-align:left; }
.page-hero .lead{ margin:12px 0 0; max-width:640px; font-size:14.5px; line-height:1.65;
  color:rgba(255,252,246,.68); text-align:left; }

/* ---------- Two-column tool layout ---------- */
.tool-layout{ max-width:var(--shell); margin:0 auto; padding:26px 28px 60px;
  display:grid; grid-template-columns:minmax(280px,340px) minmax(320px,1fr);
  gap:20px; align-items:start; }
.tool-side{ position:sticky; top:76px; }
.tool-main{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.tool-page .section{ max-width:var(--shell); }

/* Single-column tools (no form sidebar) still get the shell + card rhythm. */
.tool-single{ max-width:var(--shell); margin:0 auto; padding:26px 28px 60px;
  display:flex; flex-direction:column; gap:16px; }

/* ---------- Cards: retune astro.css .panel ---------- */
.tool-page .panel{ background:var(--paper); border:1px solid rgba(15,30,54,.10);
  border-radius:16px; padding:22px 24px; margin-bottom:0; box-shadow:none; }
.tool-side .panel{ padding:22px; }
.tool-page .panel h3{ margin:0 0 14px; font-family:"Marcellus",Georgia,serif;
  font-weight:400; font-size:17px; line-height:1.2; color:var(--navy); }

/* Card title — astro.css uses .step-label for this slot. */
.tool-page .step-label{ font-family:"Marcellus",Georgia,serif; font-weight:400;
  font-size:19px; line-height:1.2; letter-spacing:0; text-transform:none;
  color:var(--navy); margin:0 0 16px; }

/* ---------- Title/sub move into the hero ---------- */
.tool-page h1.title, .tool-page > .sub, .tool-page > .crumb{ display:none; }

/* ---------- Fields ---------- */
.tool-page .field{ margin-bottom:0; }
.tool-side .field + .field, .tool-side .row2 + .field,
.tool-side .field + .row2, .tool-side .row2 + .row2{ margin-top:13px; }
.tool-page .field label{ display:block; font-size:10.5px; font-weight:600; line-height:1;
  letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.tool-page .field input, .tool-page .field select{ width:100%; font-family:inherit;
  font-size:13.5px; font-weight:500; color:var(--ink); background:#fff;
  border:1px solid rgba(15,30,54,.16); border-radius:8px; padding:11px 12px; }
.tool-page .field input[type=date], .tool-page .field input[type=time],
.tool-page .field input[type=number]{ font-family:var(--mono); }
.tool-page .field input:focus, .tool-page .field select:focus{ outline:none; border-color:var(--gold); }
.tool-page .field .hint, .tool-page .hint{ font-family:var(--mono); font-size:11px;
  line-height:1.4; color:var(--muted); margin-top:5px; }
.tool-page .row2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* ---------- Buttons ---------- */
.tool-page .btn{ width:100%; border:0; border-radius:9px; background:var(--amber);
  color:var(--amber-ink); font-family:inherit; font-weight:800; font-size:13.5px; line-height:1;
  padding:14px; cursor:pointer; margin-top:16px;
  box-shadow:0 10px 24px -14px rgba(226,139,39,.9); }
.tool-page .btn:hover{ background:var(--amber-hi); }
.tool-page .btn.secondary{ background:transparent; color:var(--maroon);
  border:1px solid rgba(15,30,54,.16); box-shadow:none; }
.tool-page .btn.secondary:hover{ background:transparent; border-color:var(--gold); }

/* ---------- Language segmented control (mockup toggle styling) ---------- */
.page-hero .langbar{ margin:0; justify-content:flex-end; }
.page-hero .langbar .seg{ background:rgba(255,252,246,.08); border:0; border-radius:8px; padding:3px; gap:4px;
  flex-wrap:wrap; justify-content:flex-end; }
.page-hero .langbar button{ border-radius:6px; padding:7px 11px; font-size:11.5px; font-weight:600;
  color:rgba(255,252,246,.7); background:transparent; }
.page-hero .langbar button:hover{ color:var(--paper); }
.page-hero .langbar button.on{ background:var(--gold-soft); color:var(--amber-ink); font-weight:700; }

/* ---------- Key placements (astro.css .headline/.pill) ---------- */
.tool-page .headline{ display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
  gap:16px 12px; justify-content:stretch; margin-bottom:0; }
.tool-page .pill{ background:none; border:0; border-radius:0; padding:0;
  display:block; font-size:10.5px; font-weight:600; line-height:1.5;
  letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.tool-page .pill b{ display:block; margin-top:7px; font-family:"Marcellus",Georgia,serif;
  font-weight:400; font-size:20px; line-height:1.15; letter-spacing:0;
  text-transform:none; color:var(--navy); }

/* ---------- Plain-words writeup ---------- */
.tool-page .writeup{ background:var(--tint); border:1px solid rgba(15,30,54,.09);
  border-radius:11px; padding:14px 16px; margin-top:18px; }
.tool-page .writeup .step-label{ font-family:"Manrope",sans-serif; font-size:10.5px; font-weight:600;
  line-height:1; letter-spacing:.09em; text-transform:uppercase; color:var(--gold-label); margin-bottom:8px; }
.tool-page .writeup p{ font-size:12.5px; line-height:1.6; color:var(--inkmid); }

/* ---------- Charts on the navy panel ---------- */
.tool-page .chart-panel{ background:var(--navy); border:0; border-radius:16px; padding:20px 22px 24px;
  background-image:repeating-linear-gradient(45deg,rgba(198,161,91,.08) 0 1px,transparent 1px 20px); }
.chart-panel .step-label{ color:var(--paper); font-size:16px; }
.tool-page .charts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.chart-panel .chartbox h3{ margin-bottom:8px; font-family:"Manrope",sans-serif; font-size:11px;
  font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:#8FA0BC; text-align:center; }
.chart-panel .kundli .k-cell{ fill:rgba(255,252,246,.03); }
.chart-panel .kundli .k-line{ stroke:rgba(198,161,91,.45); stroke-width:1; }
.chart-panel .kundli .k-centre{ fill:rgba(226,139,39,.06); }
.chart-panel .kundli .k-centre-big{ fill:var(--gold-soft); }
.chart-panel .kundli .k-centre-sub{ fill:#8FA0BC; font-weight:500; }
.chart-panel .kundli .k-sign{ fill:#8FA0BC; }
.chart-panel .kundli .k-planet{ fill:#FFFCF6; }
.chart-panel .kundli .k-retro{ fill:#F0A08C; }
.chart-panel .kundli .k-lagna{ fill:rgba(226,139,39,.10); stroke:var(--gold); }
.chart-panel .kundli .k-lagna-tag{ fill:var(--gold-soft); }

/* ---------- Tables ---------- */
.tool-page table{ font-size:12.5px; }
.tool-page th{ padding:0 10px 9px; font-family:"Manrope",sans-serif; font-size:10px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
  border-bottom:1px solid rgba(15,30,54,.14); }
.tool-page td{ padding:11px 10px; border-bottom:1px solid rgba(15,30,54,.06);
  font-weight:500; color:var(--inkmid); vertical-align:baseline; }
.tool-page td:first-child{ font-weight:600; color:var(--navy); }
.tool-page td:not(:first-child){ font-family:var(--mono); }
.tool-page .k-retro, .tool-page td .retro{ color:var(--retro); }

/* ---------- Stats (panchangam tiles) ---------- */
.tool-page .stats{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.tool-page .stat{ background:var(--tint); border:1px solid rgba(15,30,54,.09); border-radius:11px; padding:13px 14px; }
.tool-page .stat .k{ font-size:10.5px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); }
.tool-page .stat .v{ margin-top:7px; font-family:"Marcellus",Georgia,serif; font-weight:400;
  font-size:20px; line-height:1.15; color:var(--navy); }

/* ---------- Notices ---------- */
.tool-page .note{ background:var(--warn-bg); border:1px solid rgba(226,139,39,.4);
  border-radius:9px; padding:10px 12px; font-size:12.5px; font-weight:600; color:var(--warn-ink); }
.tool-page .err{ border-radius:11px; border:1px solid rgba(140,47,47,.35); font-size:13px; }
.tool-page .gate-lock{ border-radius:11px; margin-bottom:16px; }
.tool-page .sample-tag{ margin-bottom:12px; }

/* ---------- About / related footer block ---------- */
.tool-page .related{ font-size:12.5px; line-height:1.8; color:var(--inkmid); margin-top:14px; }
.tool-page .related a{ color:var(--maroon); font-weight:700; text-decoration:none; }
.tool-page .related a:hover{ text-decoration:underline; }
.tool-page details.faq{ border-top:1px solid rgba(15,30,54,.09); padding:12px 0; }
.tool-page details.faq summary{ font-size:13.5px; font-weight:600; color:var(--navy); }
.tool-page details.faq p{ font-size:12.5px; line-height:1.6; color:var(--inkmid); margin-top:7px; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .tool-layout{ grid-template-columns:1fr; }
  .tool-side{ position:static; }
}
@media (max-width:600px){
  .page-hero-inner{ padding:28px 18px 30px; }
  .tool-layout, .tool-single{ padding:18px 18px 44px; }
  .tool-page .panel{ padding:18px; }
  .tool-page .charts{ grid-template-columns:1fr; }
}

/* Results stack — the [hidden] guard must beat the class display. */
.tool-page [hidden]{ display:none !important; }
.results-stack{ display:flex; flex-direction:column; gap:16px; }

/* ---------- Per-table column tuning (mono only where it is a number) ---------- */
#planets td:nth-child(2), #planets td:nth-child(5){ font-family:"Manrope",sans-serif; }
.tool-page .s-avoid, .tool-page .s-caution{ color:var(--retro); }
#dasha tr:has(.s-good) td{ background:var(--warn-bg); color:var(--warn-ink); }
#dasha tr:has(.s-good) td:first-child{ color:var(--warn-ink); }
.tool-page .s-good{ color:var(--warn-ink); font-weight:700; }

/* ---------- Sade Sati: the mode switch, and the period running now ---------- */
.tool-page .mode-seg{ display:flex; gap:3px; margin-bottom:12px; background:rgba(34,26,18,.05);
  border:1.5px solid var(--line); border-radius:10px; padding:3px; }
.tool-page .mode-seg button{ flex:1; font:inherit; font-size:12.5px; font-weight:700; color:var(--inkmid);
  background:none; border:0; border-radius:8px; padding:8px 6px; cursor:pointer; }
.tool-page .mode-seg button.on{ background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(15,30,54,.12); }
#phases tr.is-now td, #periods tr.is-now td, #dhaiyyas tr.is-now td{ background:var(--warn-bg); color:var(--warn-ink); font-weight:700; }
#status-note p{ font-size:12.5px; line-height:1.65; color:var(--inkmid); }
#status-note p + p{ margin-top:8px; }

/* ---------- Name suggestions: one chip per name ---------- */
.name-group + .name-group{ margin-top:16px; }
.name-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:8px; }
.name-chip{ font-size:13px; font-weight:600; color:var(--ink); background:var(--warn-bg);
  border:1px solid var(--line); border-radius:999px; padding:5px 11px; }

/* Prose inside a tool card (the About block and similar). */
.tool-page .panel > p:not(.related):not(.hint){ font-size:12.5px; line-height:1.65; color:var(--inkmid); }
.tool-page .panel > p + p{ margin-top:9px; }

/* ---------- Header fits 320px+ (the CTA used to push 22px off-screen) ---------- */
@media (max-width:600px){
  .site-header{ gap:12px; padding:12px 16px; }
  .site-header .brand{ font-size:18px; }
  .header-actions{ gap:10px; min-width:0; }
  .header-actions .cta{ padding:9px 12px; font-size:12px; white-space:nowrap; }
}
@media (max-width:420px){
  .header-actions .cta{ display:none; }
}

/* Link inside the hero lead. */
.page-hero .lead a{ color:var(--gold-soft); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.page-hero .lead a:hover{ color:var(--paper); }

/* Sidebar form: it owns the spacing between its groups (and, on Porutham,
   between the panels it wraps), since .panel margins are zeroed above. */
.tool-side form{ display:flex; flex-direction:column; gap:16px; }
.tool-side form > div:empty{ display:none; }
.tool-side form .btn{ margin-top:0; }

/* ---------- Auth modal (Google + email/password) ---------- */
.auth-modal{ max-width:400px; }
.auth-modal .close:disabled{ opacity:.4; }
.auth-modal.busy{ cursor:progress; }
.auth-demo{ background:var(--warn-bg); border:1px solid rgba(226,139,39,.4); border-radius:9px;
  padding:9px 11px; margin-bottom:16px; font-size:11.5px; line-height:1.5; color:var(--warn-ink); }
.auth-google{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  font:inherit; font-size:13.5px; font-weight:700; color:var(--ink); background:#fff;
  border:1px solid rgba(15,30,54,.18); border-radius:9px; padding:11px 14px; cursor:pointer; }
.auth-google:hover:not(:disabled){ border-color:var(--gold); background:var(--tint); }
.auth-google:disabled{ opacity:.55; cursor:default; }
.auth-google svg{ width:17px; height:17px; flex:none; }
.auth-divider{ display:flex; align-items:center; gap:12px; margin:16px 0 14px;
  font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.auth-divider::before, .auth-divider::after{ content:""; flex:1; height:1px; background:var(--line); }
.auth-msg{ display:none; font-size:12px; line-height:1.5; margin:2px 0 10px; }
.auth-msg.on{ display:block; }
.auth-msg[data-error]{ color:var(--bad); }
.auth-msg.notice{ color:var(--good); }
.auth-switch{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; margin-top:16px; }
.auth-switch button{ font:inherit; font-size:12px; font-weight:700; color:var(--maroon);
  background:none; border:none; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.auth-switch button:hover{ color:var(--navy); }
.auth-modal .field[hidden]{ display:none; }
.auth-modal input:disabled{ background:rgba(15,30,54,.04); }

/* ---------- Descriptive reading (Jathakam) ---------- */
.reading{ display:flex; flex-direction:column; gap:26px; }
.reading-section h3{ margin:0 0 10px; font-family:"Marcellus",Georgia,serif; font-weight:400;
  font-size:17px; line-height:1.2; color:var(--navy); }
.reading-section > p{ font-size:13px; line-height:1.7; color:var(--inkmid); margin-bottom:9px; }
.reading-section > p:last-of-type{ margin-bottom:0; }
.reading-section + .reading-section{ border-top:1px solid rgba(15,30,54,.08); padding-top:24px; }

.reading-items{ display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:11px; margin-top:13px; }
.reading-item{ background:var(--tint); border:1px solid rgba(15,30,54,.09); border-radius:11px; padding:13px 15px; }
.reading-item-head{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.reading-label{ font-size:12.5px; font-weight:700; color:var(--navy); }
.reading-karaka{ margin-top:3px; font-size:10.5px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--gold-label); }
.reading-item p{ margin-top:8px; font-size:12px; line-height:1.6; color:var(--inkmid); }

.reading-badge{ flex:none; font-family:"Manrope",sans-serif; font-size:9.5px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; border-radius:5px; padding:4px 6px; white-space:nowrap; }
.reading-badge.is-exalted{ background:#E7F0E5; color:#3D6B45; }
.reading-badge.is-own{ background:rgba(198,161,91,.18); color:var(--golddeep); }
.reading-badge.is-debilitated{ background:#F7E7E4; color:var(--retro); }

.reading-item.is-yoga{ background:#F2F7F1; border-color:rgba(61,107,69,.22); }
.reading-item.is-yoga .reading-label{ color:#3D6B45; }
.reading-item.is-dosha{ background:var(--warn-bg); border-color:rgba(226,139,39,.35); }
.reading-item.is-dosha .reading-label{ color:var(--warn-ink); }

@media (max-width:600px){
  .reading-items{ grid-template-columns:1fr; }
}

/* Grid and flex items default to min-width:auto, so a wide child (a pair of
   date inputs, a results table) can force the track wider than the viewport.
   Muhurtham overflowed 2px at 375px this way. Letting the items shrink puts
   the scrolling back where it belongs — inside .scroll. */
.tool-layout > *, .tool-single > *, .tool-side, .tool-main{ min-width:0; }
.tool-page .panel, .tool-page .row2, .tool-page .stats{ min-width:0; }
.tool-page .field input, .tool-page .field select{ min-width:0; }

/* astro.css collapses .row2 to one column under 600px; the .tool-page rule
   above outranks it, which left two date inputs side by side on small phones
   (each has a ~153px native floor, so 320-360px viewports overflowed).
   Collapse them again where they cannot fit. */
@media (max-width:400px){
  .tool-page .row2{ grid-template-columns:1fr; }
}

/* ---------- Calculating (results now come from the server) ----------
   Before phase 2 a result appeared in the same frame as the click. It now
   costs a round trip, so the panel has to say so — otherwise a slow network
   reads as a dead button. The old result stays visible underneath rather than
   being cleared, so the page never flashes empty. */
.results-stack.is-busy,
#results.is-busy{ position:relative; }
.results-stack.is-busy::after,
#results.is-busy::after{
  content:""; position:absolute; inset:0; border-radius:16px;
  background:color-mix(in srgb, var(--cream) 62%, transparent);
  backdrop-filter:saturate(.85);
  pointer-events:none; z-index:3;
}
.results-stack.is-busy::before,
#results.is-busy::before{
  content:attr(data-busy-label); position:absolute; z-index:4;
  top:22px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:9px;
  background:var(--navy); color:var(--paper);
  font-size:12px; font-weight:600; letter-spacing:.02em;
  padding:9px 16px; border-radius:100px;
  box-shadow:0 14px 30px -18px rgba(15,30,54,.8);
}
.tool-side.is-busy .btn,
.gate.is-busy .btn{ opacity:.6; pointer-events:none; }

/* The submit button reports the same state for people who never scroll down. */
form[aria-busy="true"] .btn{ opacity:.65; pointer-events:none; }

@media (prefers-reduced-motion:no-preference){
  .results-stack.is-busy::before,
  #results.is-busy::before{ animation:jk-pulse 1.4s ease-in-out infinite; }
  @keyframes jk-pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.72 } }
}

/* ---------- Sticky sidebar that is taller than the screen ----------
   position:sticky pins the sidebar at `top`, so any part of it below the
   fold stays below the fold for as long as it is stuck — and with a results
   column thousands of pixels tall, that is effectively forever. Measured:
   Vasthu lost 702px of its form (including the Calculate button), Porutham
   550px, Muhurtham 214px, Jathakam 91px.

   Capping the height to the viewport and letting the sidebar scroll itself
   fixes every case, and costs nothing when the form already fits — the inner
   scrollbar only appears when it is actually needed. overscroll-behavior
   keeps a scroll that started in the sidebar from running away with the page
   once it reaches its own end. */
@media (min-width:901px){
  .tool-side{
    /* 76px sticky offset + 24px breathing room at the bottom */
    max-height:calc(100vh - 100px);
    max-height:calc(100dvh - 100px);
    overflow-y:auto;
    overscroll-behavior:contain;
    /* Give the scrollbar its own gutter so it never sits on the card border,
       and pull the box back so the column still lines up with the grid. */
    padding-right:6px;
    margin-right:-6px;
    scrollbar-width:thin;
    scrollbar-color:var(--line) transparent;
  }
  .tool-side::-webkit-scrollbar{ width:8px; }
  .tool-side::-webkit-scrollbar-track{ background:transparent; }
  .tool-side::-webkit-scrollbar-thumb{
    background:rgba(15,30,54,.18); border-radius:100px;
    border:2px solid transparent; background-clip:content-box;
  }
  .tool-side:hover::-webkit-scrollbar-thumb{ background:rgba(15,30,54,.30); background-clip:content-box; }
}

/* ---------- Full-width bands inside a flex <body> ----------
   astro.css sets `body { display:flex; flex-direction:column }`. An `auto`
   inline margin on a flex item shrink-wraps it to its content instead of
   stretching it, so every band that centres itself with `margin:0 auto`
   collapsed: the home page rendered its sections 381px wide inside a 1436px
   window, which is why the Rashi and Nakshatra grids fell to one column.

   Tool pages were unaffected because their sections sit inside <main>, which
   astro.css already gives width:100%. */
body > .section,
body > .hero,
body > .crumb,
body > main{ width:100%; }

/* ---------- Rashi and Nakshatra directories ----------
   auto-fill picks whatever fits, which left 12 rashis as 8 + 4 and 27
   nakshatras as 8 + 8 + 8 + 3 — a full row followed by a conspicuous gap.
   Both counts have clean divisors, so the column count is set explicitly and
   chosen to divide evenly where it can: 12 = 6x2 / 4x3 / 3x4 / 2x6, and
   27 = 9x3 / 3x9, with 5 and 7 as the least-ragged fallbacks in between. */
#rashi-grid{ grid-template-columns:repeat(6,minmax(0,1fr)); }
#nakshatra-grid{ grid-template-columns:repeat(9,minmax(0,1fr)); }

@media (max-width:1180px){
  #nakshatra-grid{ grid-template-columns:repeat(7,minmax(0,1fr)); }
}
@media (max-width:980px){
  #rashi-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  #nakshatra-grid{ grid-template-columns:repeat(5,minmax(0,1fr)); }
}
@media (max-width:720px){
  #rashi-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  #nakshatra-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:470px){
  #rashi-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  #nakshatra-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* Long names like Purva Bhadrapada have to survive a narrow column. */
.chip .lbl{ overflow-wrap:anywhere; hyphens:auto; }
.chip .sub{ overflow-wrap:anywhere; }

/* ---------- Birth-place autocomplete ----------
   Our own dropdown rather than Google's element, so it inherits the site's
   type and palette instead of looking like a widget dropped into the card. */
.place-picker{ position:relative; }
.place-list{
  position:absolute; z-index:30; top:calc(100% + 4px); left:0; right:0;
  margin:0; padding:5px; list-style:none;
  background:var(--paper); border:1px solid var(--line); border-radius:11px;
  box-shadow:0 18px 38px -22px rgba(15,30,54,.55);
  max-height:264px; overflow-y:auto; overscroll-behavior:contain;
}
.place-item{
  display:flex; flex-direction:column; gap:2px;
  padding:9px 11px; border-radius:8px; cursor:pointer;
}
.place-item:hover, .place-item.is-active{ background:rgba(198,161,91,.16); }
.place-name{ font-size:13px; font-weight:600; color:var(--navy); }
.place-where{ font-size:11.5px; color:var(--muted); }
.place-msg{
  padding:10px 11px; font-size:12px; line-height:1.5; color:var(--muted);
}
.place-credit{
  padding:7px 11px 4px; margin-top:3px; border-top:1px solid var(--line-soft);
  font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}

/* The timezone could not be derived from the chosen place, so the visitor has
   to check it. Amber rather than red: nothing is wrong yet, but a wrong zone
   shifts every position in the chart, so it needs to be noticed. */
.place-tz-note{
  margin-top:6px; padding:7px 9px; border-radius:7px;
  border-left:2px solid var(--amber, #E28B27);
  background:rgba(226,139,39,.09);
  font-size:11.5px; line-height:1.5; color:var(--ink);
}

/* The sidebar scrolls (max-height + overflow-y at >=901px), and an absolutely
   positioned dropdown is clipped by any scrolling ancestor. Letting the list
   run to its natural height inside that scroller keeps every suggestion
   reachable — the alternative is a popup cut off two rows in. */
@media (min-width:901px){
  .tool-side .place-list{ max-height:220px; }
}

/* ---------- Privacy policy ----------
   A page of prose in a shell built for cards and tables, so the readable
   measure and the heading rhythm have to be set here. */
.privacy-body{ max-width:none; }
.privacy-body > *{ max-width:62ch; }
.privacy-body .lede{
  font-size:16px; line-height:1.65; color:var(--ink);
  padding-bottom:18px; margin-bottom:6px; border-bottom:1px solid var(--line-soft);
}
.privacy-body h2{
  font-family:'Marcellus',Georgia,serif; font-weight:400;
  font-size:19px; letter-spacing:.01em; color:var(--navy);
  margin:26px 0 8px;
}
.privacy-body p{ font-size:14.5px; line-height:1.72; color:var(--inksoft); margin:0 0 11px; }
.privacy-body strong{ color:var(--navy); font-weight:600; }
.privacy-body a{ color:var(--maroon); text-decoration:underline; text-underline-offset:2px; }
.privacy-body code{
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:12.5px;
  padding:1px 5px; border-radius:4px; background:rgba(15,30,54,.06);
}
.privacy-body .updated{
  margin-top:24px; padding-top:14px; border-top:1px solid var(--line-soft);
  font-size:12px; color:var(--muted);
}

/* ---------- The Save / Print strip above a result ---------- */
.reading-actions{
  display:flex; flex-wrap:wrap; align-items:center; gap:9px;
  padding:11px 14px; margin-bottom:14px;
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
}
.btn-ghost{
  font:inherit; font-size:12.5px; font-weight:600; line-height:1;
  padding:9px 13px; border-radius:8px; cursor:pointer;
  border:1px solid var(--line); background:transparent; color:var(--navy);
  text-decoration:none; display:inline-flex; align-items:center;
}
.btn-ghost:hover{ background:rgba(198,161,91,.14); border-color:var(--gold); }
.btn-ghost:disabled{ opacity:.5; cursor:default; }
.btn-ghost.is-danger{ color:var(--maroon); }
.btn-ghost.is-danger:hover{ background:rgba(107,31,46,.08); border-color:var(--maroon); }
.btn-link{
  font-size:12.5px; font-weight:600; color:var(--maroon);
  text-decoration:underline; text-underline-offset:2px;
}
.full-dasha{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; color:var(--inksoft); cursor:pointer;
}
.action-note{ font-size:12px; color:var(--muted); }
.action-note.is-good{ color:#1f7a4d; font-weight:600; }
.action-note.is-warn{ color:var(--maroon); font-weight:600; }

/* ---------- /saved/ ---------- */
.saved-page .lede{
  font-size:15px; line-height:1.6; color:var(--inksoft);
  padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--line-soft);
}
.saved-list{ display:flex; flex-direction:column; gap:10px; }
.saved-row{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
  padding:13px 15px; border:1px solid var(--line); border-radius:11px;
  background:var(--paper);
}
.saved-row h3{
  font-family:'Marcellus',Georgia,serif; font-weight:400; font-size:17px;
  color:var(--navy); margin:0 0 3px;
}
.saved-sub{ margin:0; font-size:12px; color:var(--muted); }
.saved-sub .sep{ margin:0 6px; opacity:.55; }
.saved-tool{ color:var(--maroon); font-weight:600; }
.saved-actions{ display:flex; gap:7px; flex-wrap:wrap; }
.saved-empty{ text-align:center; padding:34px 16px; }
.saved-empty p{ color:var(--inksoft); font-size:14.5px; margin:0 0 16px; }
.saved-loading{ color:var(--muted); font-size:13px; padding:20px 0; }

/* The masthead exists only on paper — see @media print below. */
.print-head{ display:none; }

/* ============================================================
   PRINT — this is also how a PDF is produced.
   The browser's own print engine is used rather than a PDF
   library because it is the only thing on the page that shapes
   Malayalam correctly; see assets/js/print.js for the full why.
   ============================================================ */
@media print{
  @page{ size:A4; margin:15mm 14mm; }

  html, body{
    background:#fff !important; color:#111 !important;
    font-size:10.5pt; -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  body{ display:block !important; }

  /* Everything that is chrome, navigation or input. A printed chart should
     carry no menus, no form, and no buttons that cannot be pressed. */
  .site-header, .site-footer, .tool-side, .crumb, .page-hero,
  .reading-actions, .err, .lang-toggle, .auth-modal, .gate, .sample-tag,
  .related, .mobile-toggle, .nav-more, .place-list, .place-tz-note{
    display:none !important;
  }

  /* The trailing "About this tool" panel is marketing copy, not a result. */
  .tool-main > section.panel{ display:none !important; }

  .tool-page, .tool-layout, .tool-main, main.page{
    display:block !important; width:auto !important; max-width:none !important;
    margin:0 !important; padding:0 !important;
  }

  #results{ display:block !important; }
  #results[hidden]{ display:none !important; }

  .print-head{
    display:block; margin:0 0 14px; padding-bottom:9px;
    border-bottom:1.5pt solid #6B1F2E;
  }
  .print-brand{
    font-size:8pt; letter-spacing:.18em; text-transform:uppercase; color:#6B1F2E;
  }
  .print-title{
    font-family:'Marcellus',Georgia,serif; font-size:19pt; color:#0F1E36; margin-top:3px;
  }
  .print-sub{ font-size:9.5pt; color:#444; margin-top:2px; }
  .print-meta{ font-size:8pt; color:#777; margin-top:5px; }

  /* A chart, a table or a stat block split across a page break is unreadable,
     and the kundli grids are the whole point of the document. */
  .panel{
    break-inside:avoid; page-break-inside:avoid;
    border:1px solid #d8d2c6 !important; background:#fff !important;
    box-shadow:none !important; border-radius:6px;
    padding:11px 13px !important; margin:0 0 11px !important;
  }
  .chartbox, .kundli, .stat, .stats, table thead{ break-inside:avoid; page-break-inside:avoid; }
  .charts{ display:grid !important; grid-template-columns:1fr 1fr; gap:11px; }
  .kundli{ width:100% !important; height:auto !important; max-width:82mm; }

  /* The scroll containers exist for narrow screens; on paper they would clip. */
  .scroll{ overflow:visible !important; max-height:none !important; }
  table{ width:100%; border-collapse:collapse; font-size:9pt; }
  th, td{ padding:3.5pt 5pt !important; border-bottom:.5pt solid #e2ddd2 !important; }
  thead th{ background:#f4f0e8 !important; color:#0F1E36 !important; }
  thead{ display:table-header-group; }   /* repeat headers on every page */

  .step-label{ font-size:8pt; letter-spacing:.14em; color:#6B1F2E !important; }
  .headline .pill{
    border:.5pt solid #d8d2c6 !important; background:#fbf8f2 !important; color:#111 !important;
  }
  .reading h3{ break-after:avoid; page-break-after:avoid; }
  .reading p{ orphans:3; widows:3; }
  a{ color:#111 !important; text-decoration:none !important; }

  /* A full chart is 87 daśā rows — several pages of dates nobody asked for.
     Only the running mahādaśā keeps its antardaśās unless the visitor ticked
     "include the full daśā table", which adds .print-full-dasha to <body>. */
  #dasha tr.antar{ display:none; }
  #dasha tr.antar.in-run{ display:table-row; }
  body.print-full-dasha #dasha tr.antar{ display:table-row; }
  #dasha tr.maha.in-run td{ background:#f7f2e6 !important; }
}

/* ---------------------------------------------------------------------------
   FAQ block (generated by scripts/seo.mjs)

   Static, crawlable answers. AI crawlers run no JavaScript, so everything the
   calculators compute at runtime is invisible to them — this prose is what
   they can actually read and cite. <details> keeps it compact for humans while
   leaving the answer text in the DOM for machines.
--------------------------------------------------------------------------- */
.faq-section{ background:var(--tint); border-top:1px solid rgba(15,30,54,.09); }
.faq-inner{ max-width:1180px; margin:0 auto; padding:44px 28px; }
.faq-inner > h2{ font-family:"Marcellus",Georgia,serif; font-weight:400; font-size:24px;
  color:var(--navy); margin-bottom:14px; }
.faq-section details.faq{ border-top:1px solid rgba(15,30,54,.09); padding:13px 0; }
.faq-section details.faq:last-child{ border-bottom:1px solid rgba(15,30,54,.09); }
.faq-section details.faq summary{ font-size:14px; font-weight:600; color:var(--navy);
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px; }
.faq-section details.faq summary::-webkit-details-marker{ display:none; }
.faq-section details.faq summary::after{ content:"+"; color:var(--gold-label); font-weight:700; }
.faq-section details.faq[open] summary::after{ content:"\2212"; }
.faq-section details.faq p{ font-size:13.5px; line-height:1.65; color:var(--inkmid);
  margin-top:9px; max-width:760px; }

@media (max-width:640px){
  .faq-inner{ padding:32px 20px; }
  .faq-inner > h2{ font-size:20px; }
}

/* Boilerplate has no place on a printed chart. */
@media print{ .faq-section{ display:none !important; } }