/* NavAstro stylesheet: plain CSS, no framework. Colours are tokens; three themes set them via
   <html data-theme="dark|light|bhakti"> (theme.js switches it and remembers it in a cookie).
   Breakpoints: 640px (sm), 768px (md), 1024px (lg). */

/* Dark (default) */
:root, [data-theme="dark"] {
  --night: #0f0b24; --deep: #0b0820; --panel: #181338; --line: #2a2450; --edge: #3a3270; --chip: #231c4d;
  --accent: #6d4aff; --accent-hi: #8b5cf6; --on-accent: #fff; --muted: #9a94c8; --soft: #b9a6ff; --faint: #6f6aa0; --list: #3b3380;
  --text: #f3f4f6; --text-2: #d1d5db; --strong: #fff; --link: #a78bfa; --link-2: #c4b5fd; --lead: #b8b2e0; --prose: #ddd9f5;
  --ok: #6ee7b7; --warn: #fcd34d; --err: #fca5a5;
  --ok-bg: rgba(16, 185, 129, .15); --warn-bg: rgba(245, 158, 11, .1); --err-bg: rgba(239, 68, 68, .15);
  --accent-a20: rgba(109, 74, 255, .2); --accent-a25: rgba(109, 74, 255, .25); --accent-a40: rgba(109, 74, 255, .4);
  --chip-a60: rgba(35, 28, 77, .6); --panel-a60: rgba(24, 19, 56, .6); --placeholder: rgba(154, 148, 200, .7);
  --overlay: rgba(0, 0, 0, .6); --tl-mark: #fff; --tl-mark-text: #0f0b24;
  --glow: radial-gradient(ellipse at top, #2a1d6e 0%, #0f0b24 60%);
  color-scheme: dark;
}

/* Light */
[data-theme="light"] {
  --night: #f7f6fb; --deep: #efecf9; --panel: #ffffff; --line: #e4e0f2; --edge: #cfc7ec; --chip: #eee9fd;
  --accent: #6d4aff; --accent-hi: #5a38ec; --on-accent: #fff; --muted: #6b6690; --soft: #5a38ec; --faint: #8a85ad; --list: #e2dafc;
  --text: #1f1b3a; --text-2: #3b3660; --strong: #110e26; --link: #6d4aff; --link-2: #5a38ec; --lead: #4b4675; --prose: #2f2a52;
  --ok: #047857; --warn: #b45309; --err: #b91c1c;
  --ok-bg: rgba(16, 185, 129, .12); --warn-bg: rgba(245, 158, 11, .14); --err-bg: rgba(239, 68, 68, .1);
  --accent-a20: rgba(109, 74, 255, .14); --accent-a25: rgba(109, 74, 255, .18); --accent-a40: rgba(109, 74, 255, .35);
  --chip-a60: rgba(238, 233, 253, .8); --panel-a60: rgba(255, 255, 255, .75); --placeholder: rgba(107, 102, 144, .7);
  --overlay: rgba(20, 16, 50, .35); --tl-mark: #1f1b3a; --tl-mark-text: #fff;
  --glow: radial-gradient(ellipse at top, #e6defe 0%, #f7f6fb 60%);
  color-scheme: light;
}

/* Bhakti: saffron, marigold, kumkum and maroon on sandalwood cream */
[data-theme="bhakti"] {
  --night: #fff7ea; --deep: #fdecd2; --panel: #fffdf7; --line: #f0d9b8; --edge: #e2bb8a; --chip: #fbe5c6;
  --accent: #d9530f; --accent-hi: #b9430a; --on-accent: #fff; --muted: #8a5a3c; --soft: #a3341a; --faint: #a57d5d; --list: #f7d6a8;
  --text: #3b1d10; --text-2: #5a3220; --strong: #2a1208; --link: #b3261e; --link-2: #a3341a; --lead: #6b3f26; --prose: #4a2616;
  --ok: #2f7d32; --warn: #b45309; --err: #b91c1c;
  --ok-bg: rgba(47, 125, 50, .12); --warn-bg: rgba(245, 179, 1, .18); --err-bg: rgba(185, 28, 28, .1);
  --accent-a20: rgba(217, 83, 15, .14); --accent-a25: rgba(217, 83, 15, .2); --accent-a40: rgba(217, 83, 15, .35);
  --chip-a60: rgba(251, 229, 198, .8); --panel-a60: rgba(255, 253, 247, .8); --placeholder: rgba(138, 90, 60, .65);
  --overlay: rgba(59, 29, 16, .35); --tl-mark: #6b1d0f; --tl-mark-text: #fff;
  --glow: radial-gradient(ellipse at top, #ffd9a1 0%, #fff7ea 62%);
  color-scheme: light;
}
/* Bhakti touches: a marigold garland strip along the top, a diya by the name, soft Om watermark on content pages */
[data-theme="bhakti"] .topnav, [data-theme="bhakti"] .chat-header {
  border-top: 4px solid transparent; border-image: linear-gradient(90deg, #f5b301, #e8711a, #b3261e, #e8711a, #f5b301) 1;
}
[data-theme="bhakti"] .brand::after, [data-theme="bhakti"] .chat-header h1::after { content: " 🪔"; }
[data-theme="bhakti"] .page { background-image: var(--glow), radial-gradient(circle at 50% 120%, rgba(245, 179, 1, .12), transparent 55%); }

/* Theme switch button */
.theme-btn { display: inline-flex; align-items: center; gap: .375rem; border: 1px solid var(--edge); border-radius: 999px; padding: .375rem .625rem; font-size: .8rem; color: var(--text); }
.theme-btn:hover { background: var(--chip); }
@media (max-width: 479px) { .theme-btn .theme-name { display: none; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--night); color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, dl, dd, ul, ol, figure, pre { margin: 0; }
ul, ol { padding: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: default; }
img, svg { display: block; max-width: 100%; }
table { border-collapse: collapse; }
summary { cursor: pointer; }
[hidden] { display: none !important; }
body.no-scroll { overflow: hidden; }

@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: var(--edge) transparent; } }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-button { display: none; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--edge); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); background-clip: padding-box; }

/* ---------- Small helpers ---------- */
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.ok { color: var(--ok); }
.warn { color: var(--warn); }
.error { color: var(--err); font-size: .875rem; }
.link { color: var(--link-2); }
.link:hover { text-decoration: underline; }
.text-xs { font-size: .75rem; line-height: 1rem; }
.text-sm { font-size: .875rem; line-height: 1.25rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.bold { font-weight: 600; }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grow { flex: 1; min-width: 0; }
.mt-1 { margin-top: .25rem; } .mt-2 { margin-top: .5rem; } .mt-3 { margin-top: .75rem; }
.mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; }
.mb-2 { margin-bottom: .5rem; } .mb-3 { margin-bottom: .75rem; } .mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; }
.icon { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }
.icon-sm { width: 1rem; height: 1rem; flex-shrink: 0; }
@media (max-width: 639px) { .hide-mobile { display: none !important; } }
@media (min-width: 640px) { .hide-desktop { display: none !important; } }
@media (min-width: 768px) { .md-hide { display: none !important; } }

/* ---------- Layout ---------- */
.page { min-height: 100vh; background: var(--glow); }
.page-flex { display: flex; flex-direction: column; }
.wrap { width: 100%; margin: 0 auto; padding: 0 1rem 4rem; }
@media (min-width: 640px) { .wrap { padding: 0 1.5rem 4rem; } }
.w-sm { max-width: 24rem; } .w-xl { max-width: 36rem; } .w-2xl { max-width: 42rem; } .w-3xl { max-width: 48rem; }
.w-5xl { max-width: 64rem; } .w-6xl { max-width: 72rem; }
.stack { display: flex; flex-direction: column; gap: .75rem; }
.row { display: flex; align-items: center; gap: .5rem; }
.row-wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }

.topnav {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .75rem 1rem; padding-top: max(.75rem, env(safe-area-inset-top));
}
@media (min-width: 640px) { .topnav { padding: 1rem 1.5rem; } }
.topnav .actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; }
@media (max-width: 479px) {  /* phones: compact buttons so a busy nav (badge + Admin + Sign out) still fits */
  .topnav { align-items: flex-start; }
  .topnav .btn, .topnav .btn-ghost { padding: .5rem .7rem; }
}
.brand { font-size: 1.125rem; font-weight: 700; white-space: nowrap; }
.logo { display: inline-block; width: 1.4em; height: 1.4em; margin-right: .4em; vertical-align: -.35em; }

.site-footer { margin-top: auto; padding: 1.5rem 1rem 2rem; text-align: center; font-size: .8rem; color: var(--faint); }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1rem; margin-bottom: .5rem; }
.site-footer nav a:hover { color: var(--link-2); }

/* ---------- Controls ---------- */
.btn, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
  border-radius: 12px; padding: .625rem 1rem; font-size: .875rem; line-height: 1.25rem; white-space: nowrap;
}
.btn { background: var(--accent); color: var(--on-accent); }
.btn:hover { background: var(--accent-hi); }
.btn-ghost { border: 1px solid var(--edge); color: var(--text); }
.btn-ghost:hover { background: var(--chip); }
.btn:disabled, .btn-ghost:disabled { opacity: .5; }
.btn-lg { padding: .875rem 1.75rem; font-size: 1rem; }
.btn-sm { padding: .375rem .75rem; }
.btn-block { width: 100%; }
.linkbtn { color: var(--link-2); font-size: .75rem; text-align: left; }
.linkbtn:hover { text-decoration: underline; }
.iconbtn { border-radius: 8px; padding: .5rem; }
.iconbtn:hover { background: var(--chip); }

.input, .select {
  width: 100%; border-radius: 12px; border: 1px solid var(--edge); background: var(--panel);
  padding: .625rem .875rem; color: var(--text); outline: none;
}
.input::placeholder { color: var(--placeholder); }
.input:focus, .select:focus { border-color: var(--accent); }
.select { width: auto; padding: .25rem .5rem; border-radius: 8px; font-size: .875rem; }
.field { display: flex; flex-direction: column; gap: .25rem; font-size: .75rem; color: var(--muted); }
.check { display: flex; align-items: center; gap: .5rem; margin-top: .25rem; font-size: .75rem; color: var(--muted); }
.check input { accent-color: var(--accent-hi); }

.card { border-radius: 16px; border: 1px solid var(--line); background: var(--panel); }
.pad { padding: 1rem; } .pad-lg { padding: 1.5rem; }
.chip { display: inline-flex; align-items: center; gap: .25rem; border-radius: 999px; background: var(--chip); padding: .25rem .75rem; font-size: .875rem; }
a.chip:hover { background: var(--line); }
.chips { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: .75rem; }
.notice { border-radius: 12px; padding: .625rem 1rem; font-size: .875rem; }
.notice-ok { background: var(--ok-bg); color: var(--ok); }
.notice-warn { background: var(--warn-bg); color: var(--warn); }
.btn-google { background: #fff; color: #1f2937; font-weight: 500; gap: .75rem; border: 1px solid var(--edge); }
.btn-google:hover { background: #f3f4f6; }
.btn-google svg { width: 1.25rem; height: 1.25rem; }
.divider { display: flex; align-items: center; gap: .75rem; font-size: .75rem; color: var(--muted); }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Segmented switch (chart style) */
.seg { display: flex; align-items: center; gap: .375rem; font-size: .875rem; color: var(--muted); }
.seg a, .seg button { border: 1px solid var(--edge); border-radius: 8px; padding: .25rem .75rem; color: var(--muted); }
.seg a:hover, .seg button:hover { background: var(--chip); }
.seg .on { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.seg .on:hover { background: var(--accent); }

/* ---------- Tables ---------- */
.tbl-title { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 1.5rem 0 .5rem; font-size: 1rem; font-weight: 600; }
.tbl-title small { font-weight: 400; font-size: .8rem; color: var(--muted); }
.tscroll { overflow-x: auto; }
.ptable { width: 100%; font-size: .875rem; }
.ptable th { border-bottom: 1px solid var(--line); padding: .375rem .5rem; text-align: left; font-weight: 500; color: var(--muted); }
.ptable td { border-bottom: 1px solid var(--line); padding: .375rem .5rem; vertical-align: top; }
.ptable tr.clickable { cursor: pointer; }
.ptable tr.clickable:hover { background: var(--chip); }
.ptable tr.selected { background: var(--accent-a20); }
.tag { display: inline-block; border-radius: 4px; padding: .125rem .375rem; font-size: .75rem; background: var(--chip); margin-right: .25rem; }
.tag-ok { background: var(--ok-bg); color: var(--ok); }
.tag-err { background: var(--err-bg); color: var(--err); }
.tag-muted { color: var(--muted); }

/* ---------- Markdown (AI answers) ---------- */
.md h1, .md h2, .md h3, .md h4 { margin: .875rem 0 .375rem; font-size: 15px; font-weight: 600; color: var(--soft); }
.md > :first-child { margin-top: 0; }
.md p { margin: .375rem 0; }
.md ul, .md ol { margin: .375rem 0; padding-left: 1.25rem; }
.md ul { list-style: disc; } .md ol { list-style: decimal; }
.md li { margin: .125rem 0; }
.md strong { font-weight: 600; color: var(--strong); }
.md code { border-radius: 4px; background: var(--night); padding: 0 .25rem; }
.md table { display: block; max-width: 100%; overflow-x: auto; margin: .5rem 0; font-size: 13px; }
.md th { white-space: nowrap; border: 1px solid var(--edge); background: var(--panel); padding: .25rem .5rem; text-align: left; font-weight: 600; color: var(--soft); }
.md td { min-width: 6.5rem; border: 1px solid var(--edge); padding: .25rem .5rem; vertical-align: top; }
.md td:first-child { white-space: nowrap; }

/* ---------- Charts (North diamond SVG / South grid) ---------- */
.chart-card { border-radius: 16px; border: 1px solid var(--line); background: var(--panel); padding: .75rem; }
.chart-card h3 { margin-bottom: .5rem; font-size: .875rem; font-weight: 600; }
.chart-svg { width: 100%; }
.chart-svg polygon { fill: transparent; stroke: var(--edge); stroke-width: 2; }
.chart-svg polygon.asc { fill: var(--accent-a20); }
.chart-svg .house-no { fill: var(--muted); font-size: 13px; }
.chart-svg .planets { fill: var(--text); font-weight: 600; }
.chart.mini .chart-svg polygon { stroke-width: 3; }
.chart.mini .chart-svg .house-no { font-size: 18px; }
.south { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: 1px; aspect-ratio: 1; background: var(--line); font-size: .75rem; }
.south .cell { display: flex; flex-direction: column; padding: .25rem; background: var(--panel); }
.south .cell.asc { background: var(--accent-a25); }
.south .cell small { color: var(--muted); }
.south .cell b { font-weight: 600; }
.south .center { grid-row: 2 / 4; grid-column: 2 / 4; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: var(--panel); font-size: .875rem; }
.south .center small { color: var(--muted); }
.chart.mini .south { line-height: 1.25; }
.chart.mini .south .cell { padding: .125rem; }
.chart-note { margin-top: .5rem; font-size: .75rem; color: var(--muted); }

/* Phones: swipe between D1 / D9 / D10; wider screens: grid */
.charts { display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -1rem; padding: 0 1rem .5rem; scrollbar-width: none; }
.charts > * { flex: 0 0 86%; scroll-snap-align: center; }
@media (min-width: 640px) {
  .charts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; overflow: visible; margin: 0; padding: 0; }
  .charts > * { flex: none; }
}
@media (min-width: 1024px) { .charts { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Dasha tables (nested <details>, no JavaScript) ---------- */
.dasha { font-size: .875rem; }
.dasha-row { display: grid; grid-template-columns: 1fr 1fr 1.6fr; padding: .375rem .5rem; }
.dasha-head { border-bottom: 1px solid var(--line); color: var(--muted); }
.dasha > details { border-bottom: 1px solid var(--line); }
.dasha summary.dasha-row { list-style: none; }
.dasha summary.dasha-row::-webkit-details-marker { display: none; }
.dasha summary.dasha-row:hover { background: var(--chip); }
.dasha .lvl2 { padding-left: 1.5rem; }
.dasha .lvl3 { padding: .25rem .5rem .25rem 2.5rem; color: var(--muted); }
.dasha .now { background: var(--accent-a20); font-weight: 600; }
.fold { margin-top: 1.5rem; }
.fold > summary { font-size: 1rem; font-weight: 600; }
.fold-body { margin-top: .5rem; overflow-x: auto; }

/* ---------- Home ---------- */
.hero { max-width: 42rem; margin: 0 auto; padding: 5rem 1.25rem 3rem; text-align: center; }
.hero h1 { margin-bottom: .875rem; font-size: 2.25rem; line-height: 1.15; font-weight: 700; }
@media (min-width: 640px) { .hero h1 { font-size: 3.5rem; } }
.lead { margin-bottom: 1.75rem; font-size: 1.125rem; color: var(--lead); }
.hero-actions { display: flex; flex-direction: column; gap: .75rem; max-width: 20rem; margin: 0 auto; }
.features { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; max-width: 64rem; margin: 0 auto; padding: 1.25rem 1.5rem 4rem; }
.feature { flex: 1 1 250px; padding: 1.25rem; }
.feature .emoji { font-size: 1.875rem; }
.feature h3 { margin: .5rem 0; font-weight: 600; }
.feature p { color: var(--muted); line-height: 1.6; }

/* ---------- Auth ---------- */
.center-screen { display: flex; flex-direction: column; min-height: 100vh; align-items: center; padding: 1rem; }
.center-screen > .card { margin-block: auto; }  /* centred; the footer sits below it */
.auth-card { width: 100%; max-width: 24rem; padding: 1.75rem; }
.auth-card h1 { text-align: center; font-size: 1.25rem; font-weight: 700; }
.auth-card h2 { text-align: center; font-size: 1rem; font-weight: 400; color: var(--muted); }

/* Place of birth */
.place { position: relative; }
.place-list {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 10; margin-top: .25rem; max-height: 14rem; overflow-y: auto;
  list-style: none; border-radius: 12px; border: 1px solid var(--list); background: var(--chip); padding: .25rem;
}
.place-option { cursor: pointer; border-radius: 8px; padding: .5rem .625rem; font-size: .875rem; }
.place-option:hover { background: var(--list); }
.place-status { margin-top: .25rem; font-size: .75rem; color: var(--muted); }
.coords { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .5rem; }
.coords p { grid-column: 1 / -1; font-size: 11px; color: var(--muted); }

/* ---------- Dashboard ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.page-head h1 { font-size: 1.5rem; font-weight: 700; }
.welcome-birth { display: grid; grid-template-columns: minmax(0, 34rem) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.welcome-points { display: grid; gap: .75rem; padding-top: .5rem; }
.welcome-points li { display: grid; gap: .25rem; padding: 1rem 1.25rem; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.welcome-points span { color: var(--muted); font-size: .9rem; }
@media (max-width: 860px) { .welcome-birth { grid-template-columns: minmax(0, 1fr); } }
.head-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; width: 100%; }
@media (min-width: 640px) { .head-actions { display: flex; width: auto; } }

/* ---------- Birth details ---------- */
.fields-2 { display: flex; gap: .5rem; }
.fields-2 > * { flex: 1; min-width: 0; }
.fields-3 { display: flex; flex-wrap: wrap; gap: .5rem; }
.fields-3 > * { flex: 1 1 8rem; min-width: 0; }

/* ---------- Wallet ---------- */
.balance-big { margin: .25rem 0; font-size: 3rem; font-weight: 700; }
.packs { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 640px) { .packs { grid-template-columns: repeat(4, 1fr); } }
.pack { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: 1rem; }
.pack:hover { border-color: var(--accent); }
.pack:disabled { opacity: .5; }
.pack b { font-size: 1.5rem; }

/* ---------- Admin ---------- */
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-top: 1rem; }
@media (min-width: 640px) { .kpis { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .kpis { grid-template-columns: repeat(5, 1fr); } }
.kpi { display: flex; flex-direction: column; gap: .25rem; padding: .75rem; }
.kpi b { font-size: 1.25rem; }
.bars-grid { display: grid; gap: .75rem; margin-top: 1rem; }
@media (min-width: 640px) { .bars-grid { grid-template-columns: repeat(2, 1fr); } }
.bars { width: 100%; height: 6rem; }
.bars rect { fill: var(--accent); }
.log { display: flex; flex-direction: column; gap: .5rem; }
.log-msg { border-radius: 12px; padding: .75rem; font-size: .875rem; background: var(--chip); }
.log-msg.user { background: var(--accent-a25); }
.log-msg .body { margin-top: .25rem; white-space: pre-wrap; }
.json { margin-top: .5rem; max-height: 24rem; overflow: auto; border-radius: 12px; background: var(--deep); padding: .75rem; font-size: .75rem; }

/* ---------- Chat ---------- */
.chat-app { display: flex; height: 100vh; height: 100dvh; }
.overlay { position: fixed; inset: 0; z-index: 30; background: var(--overlay); }
.drawer {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; width: 18rem; max-width: 85vw;
  display: flex; flex-direction: column; gap: .625rem; transform: translateX(-100%); transition: transform .2s;
  border-right: 1px solid var(--line); background: var(--deep); padding: .75rem; padding-top: max(.75rem, env(safe-area-inset-top));
}
.drawer.open { transform: none; }
@media (min-width: 768px) {
  .drawer { position: static; width: 16rem; max-width: none; transform: none; transition: none; }
  .overlay { display: none !important; }
}
.drawer-nav { display: flex; flex-direction: column; font-size: .875rem; }
.drawer-nav a { display: flex; align-items: center; gap: .75rem; border-radius: 8px; padding: .5rem .625rem; color: var(--text-2); }
.drawer-nav a:hover { background: var(--chip); }
.drawer-nav .emoji { width: 1.25rem; text-align: center; }
.rule { height: 1px; background: var(--line); }
.threads { flex: 1; overflow-y: auto; display: flex; flex-direction: column; margin: 0 -.25rem; padding: 0 .25rem .5rem; }
.threads > * { flex-shrink: 0; }
.thread-group {
  position: sticky; top: 0; z-index: 1; background: var(--deep); padding: .75rem .625rem .25rem;
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
}
.thread-group:first-child { padding-top: 0; }
.thread { position: relative; display: flex; align-items: center; border-radius: 8px; font-size: .875rem; color: var(--text-2); }
.thread:hover { background: var(--chip-a60); color: var(--strong); }
.thread.active { background: var(--chip); color: var(--strong); }
.thread.active::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--accent); }
.thread a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: .625rem; }
.thread a::first-letter { text-transform: uppercase; }
.thread-del { display: none; margin-right: .25rem; border-radius: 6px; padding: .375rem; color: var(--muted); }
.thread-del:hover { background: var(--line); color: var(--strong); }
.thread.active .thread-del { display: block; }
@media (min-width: 768px) {
  .thread a { padding: .5rem .625rem; }
  .thread-del { display: block; visibility: hidden; }
  .thread:hover .thread-del, .thread.active .thread-del { visibility: visible; }
}
.account { display: flex; align-items: center; justify-content: space-between; gap: .5rem; border-top: 1px solid var(--line); padding-top: .625rem; padding-bottom: env(safe-area-inset-bottom); font-size: .875rem; }
.account button { border-radius: 8px; background: var(--line); padding: .375rem .625rem; }

.chat-main { display: flex; flex: 1; min-width: 0; flex-direction: column; }
.chat-header {
  display: flex; align-items: center; gap: .375rem; border-bottom: 1px solid var(--line);
  padding: .5rem; padding-top: max(.5rem, env(safe-area-inset-top));
}
.chat-header h1 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.125rem; font-weight: 700; }
@media (min-width: 768px) { .chat-header { gap: .5rem; padding: .75rem 1rem; } }
.messages { display: flex; flex: 1; flex-direction: column; gap: .75rem; overflow-y: auto; overscroll-behavior: contain; padding: .75rem; }
@media (min-width: 768px) { .messages { padding: 1rem; } }

.chart-strip {
  display: flex; flex-direction: column; align-items: center; gap: .75rem; width: 100%; max-width: 48rem; margin: 0 auto;
  border-radius: 16px; border: 1px solid var(--line); background: var(--panel-a60); padding: .75rem;
}
.chart-strip:hover { border-color: var(--edge); }
.chart-strip .strip-chart { width: 100%; max-width: 340px; flex-shrink: 0; }
.chart-strip .strip-info { width: 100%; min-width: 0; }
.strip-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.strip-info dl { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: .25rem .5rem; margin-top: .5rem; font-size: .875rem; }
.strip-info dt { color: var(--muted); }
.strip-info dd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
@media (min-width: 640px) {
  .chart-strip { flex-direction: row; gap: 1.5rem; padding: 1rem; }
  .chart-strip .strip-chart { width: 18rem; }
  .chart-strip .strip-info { flex: 1; }
  .strip-head { display: block; }
  .strip-head .bold { font-size: 1.125rem; }
  .strip-info dl { grid-template-columns: auto 1fr; gap: .25rem 1rem; margin-top: 0; }
}

.hint { display: flex; flex-direction: column; align-items: center; gap: .75rem; width: 100%; max-width: 28rem; margin: 1.5rem auto 0; text-align: center; }
@media (min-width: 768px) { .hint { margin-top: 2.5rem; } }
.suggests { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.suggest { border-radius: 999px; border: 1px solid var(--edge); padding: .375rem .75rem; font-size: .875rem; }
.suggest:hover { background: var(--chip); }

.bubble { overflow-wrap: anywhere; border-radius: 16px; padding: .625rem .875rem; line-height: 1.625; }
.bubble.user { max-width: 85%; align-self: flex-end; white-space: pre-wrap; border-bottom-right-radius: 6px; background: var(--accent); }
.bubble.ai { max-width: 92%; align-self: flex-start; border-bottom-left-radius: 6px; background: var(--chip); }
@media (min-width: 768px) { .bubble.ai { max-width: 85%; } }

.thinking {
  display: flex; align-items: center; gap: .75rem; max-width: 92%; align-self: flex-start;
  border-radius: 16px; border: 1px solid var(--line); background: var(--panel); padding: .75rem 1rem;
}
.spinner { width: 2.25rem; height: 2.25rem; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--accent); border-top-color: transparent; animation: spin 2.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.thinking .eyebrow { font-size: 10px; letter-spacing: .1em; color: var(--muted); }

.followups { display: flex; flex-direction: column; align-items: flex-start; gap: .375rem; max-width: 92%; align-self: flex-start; }
.followups .eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.followup { border-radius: 16px; border: 1px solid var(--edge); padding: .375rem .75rem; text-align: left; font-size: .875rem; color: var(--text-2); }
.followup:hover { border-color: var(--accent); background: var(--chip); }

.composer { border-top: 1px solid var(--line); padding: .625rem .75rem; padding-bottom: max(.75rem, env(safe-area-inset-bottom)); }
@media (min-width: 768px) { .composer { padding-left: 1rem; padding-right: 1rem; } }
.recharge-box { display: flex; align-items: center; justify-content: space-between; gap: .75rem; border-radius: 12px; background: var(--chip); padding: .625rem .75rem; font-size: .875rem; }
.composer form { display: flex; gap: .5rem; }
.composer .input { flex: 1; min-width: 0; }
.input-note { margin-top: .375rem; text-align: center; font-size: 11px; color: var(--muted); }
.mode-switch { display: flex; gap: .25rem; margin-bottom: .5rem; }
.mode-switch button { padding: .25rem .75rem; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; color: var(--muted); }
.mode-switch button[aria-checked="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ---------- Free kundli ---------- */
.kundli-intro { max-width: 36rem; margin: 0 auto 1.5rem; padding-top: 1rem; text-align: center; }
.kundli-intro h1 { font-size: 1.875rem; font-weight: 700; }
@media (min-width: 640px) { .kundli-intro { padding-top: 2rem; } .kundli-intro h1 { font-size: 2.25rem; } }
.kform { display: grid; gap: .75rem; max-width: 48rem; margin: 0 auto; padding: 1rem; }
@media (min-width: 640px) { .kform { grid-template-columns: 1fr 1fr; padding: 1.25rem; } .kform .span-2 { grid-column: 1 / -1; } }
.kform-fold { max-width: 48rem; margin: 0 auto 1.5rem; }
.kform-fold > summary { display: flex; align-items: center; justify-content: space-between; gap: .5rem; list-style: none; padding: .75rem 1rem; font-size: .875rem; }
.kform-fold > summary::-webkit-details-marker { display: none; }
.kform-fold .kform { border-top: 1px solid var(--line); }
/* Recent people under the Name field (calc.js; saved in this browser only) */
.people-field { position: relative; }
.people-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; margin-top: .25rem; max-height: 22rem; overflow-y: auto;
               padding: .375rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
               box-shadow: 0 12px 32px rgba(0, 0, 0, .18); color: var(--text); font-size: .875rem; }
.people-head { padding: .25rem .5rem .375rem; font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.person { display: flex; align-items: center; gap: .75rem; padding: .5rem; border-radius: 10px; cursor: pointer; }
.person.active, .person:hover { background: var(--chip); }
.person-icon { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; flex-shrink: 0; border-radius: 50%;
               background: var(--accent-a20); color: var(--link-2); font-weight: 700; }
.person-text { flex: 1; min-width: 0; }
.person-text b { display: block; font-weight: 600; }
.person-text small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; color: var(--muted); }
.person-del { flex-shrink: 0; padding: .375rem .5rem; border-radius: 8px; opacity: .55; }
.person-del:hover { opacity: 1; background: var(--err-bg); }
.people-clear { display: block; margin: .25rem .5rem .125rem auto; font-size: .75rem; color: var(--muted); }
.people-clear:hover { color: var(--err); text-decoration: underline; }

/* "Continue with <name>": the details from another calculator in this tab (calc.js) */
.calc-quick { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; max-width: 48rem; margin: 0 auto 1rem;
              padding: 1rem 1.25rem; border-left: 4px solid var(--accent); }
.calc-quick .grow { flex: 1 1 14rem; }
.result-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .5rem; margin-bottom: 1rem; }
.result-head h1 { font-size: 1.5rem; font-weight: 700; }

.snap-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .625rem; }
@media (min-width: 640px) { .snap-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .snap-grid { grid-template-columns: repeat(7, 1fr); } }
.snap { padding: .75rem; }
.snap .emoji { font-size: 1.125rem; }
.snap .label { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.snap .value { font-weight: 600; }

.run-grid { display: grid; gap: .625rem; }
@media (min-width: 640px) { .run-grid { grid-template-columns: repeat(3, 1fr); } }
.run { padding: .875rem; }
.run .label { margin-bottom: .25rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.run .lord { font-size: .875rem; }
.run .lord.main { font-size: 1.125rem; font-weight: 600; }
.run .lord small { color: var(--muted); font-weight: 400; font-size: .75rem; }
.run .until { margin-bottom: .25rem; font-size: .75rem; color: var(--muted); }

.timeline { padding: 1rem; }
.tl { position: relative; }
.tl-bar { display: flex; height: 2.25rem; overflow: hidden; border-radius: 8px; }
.tl-seg { display: flex; align-items: center; justify-content: center; border-right: 1px solid rgba(0, 0, 0, .2); font-size: 11px; font-weight: 600; color: #1a1530; }
.tl-seg.now { box-shadow: inset 0 0 0 2px var(--tl-mark); }
.tl-line { position: absolute; top: -.25rem; bottom: 0; width: 2px; background: var(--tl-mark); }
.tl-label { position: absolute; top: -1.5rem; transform: translateX(-50%); white-space: nowrap; border-radius: 4px; background: var(--tl-mark); padding: 0 .375rem; font-size: 10px; font-weight: 600; color: var(--tl-mark-text); }
.tl-years { display: flex; justify-content: space-between; margin-top: .25rem; font-size: 11px; color: var(--muted); }
.tl-legend { display: flex; flex-wrap: wrap; gap: .25rem .75rem; margin-top: .75rem; font-size: .75rem; color: var(--muted); }
.tl-legend span { display: flex; align-items: center; gap: .375rem; }
.tl-legend .now { font-weight: 600; color: var(--strong); }
.tl-legend i { width: .625rem; height: .625rem; border-radius: 2px; }
/* Planet colours (timeline, legend, print) */
/* Life timeline (kundli result): "now" panel + proportional Mahadasha lane. Reuses .ss-now / .ss-axis. */
.life { margin: .5rem 0 0; padding: 1.25rem 1.5rem 1.25rem; }
.life-now { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; padding-bottom: 1.25rem; margin-bottom: 2.25rem;
            border-bottom: 1px solid var(--line); }
.life-dot { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; flex-shrink: 0; border-radius: 50%;
            color: #1a1530; font-weight: 800; font-size: 1.05rem; box-shadow: 0 0 0 4px var(--panel), 0 0 0 6px var(--edge); }
.life-now > .grow { flex: 1 1 14rem; }
.life-eyebrow { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.life-title { font-size: 1.25rem; font-weight: 700; line-height: 1.25; }
.life-title span { font-size: .85rem; font-weight: 400; color: var(--muted); }
.life-progress { flex: 1 1 15rem; max-width: 22rem; font-size: .875rem; }
.life-bar { height: .6rem; margin-bottom: .375rem; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, transparent); overflow: hidden; }
.life-bar i { display: block; height: 100%; border-radius: 999px; }
.life-area { position: relative; padding-bottom: 2.4rem; }
.life-grid { position: absolute; top: 3.95rem; height: .35rem; border-left: 1px solid var(--edge); }  /* decade tick under the bar */
.life-seg .ab { display: none; }
.life-lane { position: relative; height: 3.75rem; border-radius: 12px; }
.life-seg { position: absolute; top: 0; bottom: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
            gap: .05rem; overflow: visible; border-radius: 8px; box-shadow: 0 0 0 1.5px var(--panel); color: #1a1530; outline: none;
            transition: filter .15s; }
.life-seg b { font-size: .9rem; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.life-seg small { font-size: .7rem; opacity: .75; white-space: nowrap; }
.life-seg.past { opacity: .55; }
.life-seg.now { z-index: 2; box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--text); }
.life-seg:hover, .life-seg:focus { z-index: 3; opacity: 1; filter: brightness(1.05) saturate(1.1); }
.life-seg::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 10px); left: 50%; width: max-content; max-width: 16rem;
                   padding: .4rem .6rem; border-radius: 8px; background: var(--text); color: var(--panel); font-size: .75rem; line-height: 1.35;
                   white-space: normal; pointer-events: none; opacity: 0; transform: translate(-50%, 4px); transition: opacity .12s, transform .12s; }
.life-seg.edge-l::after { left: 0; transform: translate(0, 4px); }
.life-seg.edge-r::after { left: auto; right: 0; transform: translate(0, 4px); }
.life-seg:hover::after, .life-seg:focus::after { opacity: 1; transform: translate(-50%, 0); }
.life-seg.edge-l:hover::after, .life-seg.edge-l:focus::after, .life-seg.edge-r:hover::after, .life-seg.edge-r:focus::after { transform: translate(0, 0); }
.life-today { top: -1.9rem; bottom: 2.4rem; }
.life-area .ss-axis .life-start { transform: none; text-align: left; }
.life-legend { display: flex; flex-wrap: wrap; gap: .375rem .5rem; margin-top: 1rem; }
.life-legend span { display: inline-flex; align-items: center; gap: .375rem; padding: .2rem .6rem .2rem .45rem; border-radius: 999px;
                    background: color-mix(in srgb, var(--text) 5%, transparent); font-size: .8rem; }
.life-legend small { color: var(--muted); }
.life-legend span.past { opacity: .65; }
.life-legend span.now { background: var(--text); color: var(--panel); font-weight: 600; }
.life-legend span.now small { color: inherit; opacity: .8; }
.life-legend i { width: .7rem; height: .7rem; border-radius: 50%; }
@media (max-width: 479px) {
  .life { padding: 1rem; }
  .life-seg small, .life-seg .full { display: none; }
  .life-seg .ab { display: block; }
  .life-seg b { font-size: .75rem; }
  .life-area .ss-axis small { display: none; }
  .life-area .ss-axis span:nth-child(even) { display: none; }  /* every other decade on phones */
}

.pc-sun { background: #fbbf24; } .pc-moon { background: #e2e8f0; } .pc-mars { background: #f87171; }
.pc-mercury { background: #34d399; } .pc-jupiter { background: #fde047; } .pc-venus { background: #f9a8d4; }
.pc-saturn { background: #818cf8; } .pc-rahu { background: #a1a1aa; } .pc-ketu { background: #fb923c; } .pc-other { background: var(--accent); }

.cta { display: flex; flex-direction: column; align-items: center; gap: .75rem; margin-top: 2.5rem; padding: 1.5rem; text-align: center;
       border-color: var(--accent-a40); background: linear-gradient(135deg, var(--accent-a20), var(--panel)); }
.cta h2 { font-size: 1.25rem; font-weight: 700; }
.cta p { max-width: 36rem; font-size: .875rem; color: var(--muted); }

/* Explainer / FAQ / legal pages */
.prose { max-width: 48rem; margin: 0 auto; line-height: 1.7; }
.prose h1 { margin: 1rem 0 .75rem; font-size: 1.875rem; line-height: 1.2; font-weight: 700; }
.prose h2 { margin: 2rem 0 .5rem; font-size: 1.25rem; font-weight: 700; }
.prose h3 { margin: 1.25rem 0 .375rem; font-size: 1.05rem; font-weight: 600; }
.prose p, .prose ul, .prose ol { margin: .625rem 0; color: var(--prose); }
.prose ul { list-style: disc; padding-left: 1.25rem; } .prose ol { list-style: decimal; padding-left: 1.25rem; }
.prose li { margin: .25rem 0; }
.prose a { color: var(--link-2); text-decoration: underline; }
.prose .updated { font-size: .8rem; color: var(--muted); }

/* Section bar (macro subnav): sticky underline tabs that scroll sideways */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.subnav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; margin: 0 -1rem 1.25rem; padding: 0 1rem;
          background: color-mix(in srgb, var(--night) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
          border-bottom: 1px solid var(--line); }
.subnav-track { display: flex; gap: 1.375rem; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.subnav-track::-webkit-scrollbar { display: none; }
.subnav-track a { position: relative; display: inline-flex; align-items: center; gap: .375rem; flex-shrink: 0; padding: .8rem 0 .7rem;
                  font-size: .875rem; color: var(--muted); white-space: nowrap; scroll-snap-align: start; transition: color .15s; }
.subnav-track a span { font-size: .95em; filter: grayscale(.6); opacity: .8; transition: filter .15s, opacity .15s; }
.subnav-track a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0;
                         background: var(--accent); transform: scaleX(0); transition: transform .2s; }
.subnav-track a:hover { color: var(--text); }
.subnav-track a.on { color: var(--text); font-weight: 600; }
.subnav-track a.on span, .subnav-track a:hover span { filter: none; opacity: 1; }
.subnav-track a.on::after { transform: scaleX(1); }
.subnav-track a.subnav-cta { margin-left: auto; align-self: center; padding: .3rem .8rem; border-radius: 999px; background: var(--accent-a20);
                             color: var(--link-2); font-weight: 600; }
.subnav-track a.subnav-cta::after { display: none; }
.subnav-track a.subnav-cta.on { background: var(--accent); color: var(--on-accent); }
.subnav-arrow { position: absolute; top: 0; bottom: 0; z-index: 1; width: 2.25rem; font-size: 1.25rem; line-height: 1; color: var(--text); }
.subnav-arrow.prev { left: 0; padding-right: .5rem; background: linear-gradient(90deg, var(--night) 55%, transparent); }
.subnav-arrow.next { right: 0; padding-left: .5rem; background: linear-gradient(270deg, var(--night) 55%, transparent); }
/* Ashtakavarga (macro ashtakavarga) */
.av-top { display: grid; gap: 1rem; margin-top: .75rem; }
@media (min-width: 768px) { .av-top { grid-template-columns: minmax(0, 22rem) 1fr; align-items: start; } }
.av-chart .planets { font-weight: 700; }
.av-read { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem; }
.av-read .label { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.av-total { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.av-total small { font-size: .8rem; font-weight: 400; color: var(--muted); }
.av-h { font-size: .875rem; font-weight: 600; margin-bottom: .375rem; }
.av-h small { font-weight: 400; color: var(--muted); }
.av-read ul { display: flex; flex-direction: column; gap: .375rem; font-size: .875rem; }
.av-read li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .375rem; }
.av-pill { display: inline-block; min-width: 2rem; border-radius: 999px; padding: .05rem .5rem; text-align: center; font-weight: 700;
           font-size: .8rem; background: var(--chip); }
.av-pill.hi { background: var(--ok-bg); color: var(--ok); }
.av-pill.lo { background: var(--err-bg); color: var(--err); }
.av-sub { margin: 1.5rem 0 .5rem; font-size: .875rem; font-weight: 600; }
.av-table { font-variant-numeric: tabular-nums; }
.av-table th.c small { display: block; font-size: .65rem; font-weight: 400; }
.av-table .c { text-align: center; padding-left: .25rem; padding-right: .25rem; min-width: 2.1rem; }
.av-table td.b0 { color: var(--muted); }
.av-table td.b3 { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.av-table td.b4 { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.av-table td.b5 { background: color-mix(in srgb, var(--accent) 26%, transparent); font-weight: 600; }
.av-table td.b6 { background: color-mix(in srgb, var(--accent) 36%, transparent); font-weight: 600; }
.av-table td.b7, .av-table td.b8 { background: color-mix(in srgb, var(--accent) 48%, transparent); font-weight: 700; }
.av-table td.here { box-shadow: inset 0 0 0 2px var(--accent); border-radius: 6px; }
.av-table tr.sav td { border-top: 2px solid var(--edge); font-weight: 700; }
.av-table tr.sav td.hi { color: var(--ok); }
.av-table tr.sav td.lo { color: var(--err); }

/* Transit (Gochar) section on the kundli result */
.transit { display: grid; gap: 1rem; margin-top: .75rem; }
@media (min-width: 768px) { .transit { grid-template-columns: minmax(0, 22rem) 1fr; align-items: start; } }
.transit .ptable .c { text-align: center; }
.transit .ptable td, .transit .ptable th { white-space: nowrap; }

/* Links from the kundli result to the other calculators */
.more-calcs { display: grid; gap: .75rem; margin-top: .5rem; }
@media (min-width: 640px) { .more-calcs { grid-template-columns: 1fr 1fr; } }
.more-calc { display: flex; align-items: center; gap: .875rem; padding: .875rem 1rem; }

/* Calculators dropdown (macro calc_menu) */
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; gap: .375rem; }
.menu > summary::-webkit-details-marker { display: none; }
.menu .caret { font-size: .7em; opacity: .7; transition: transform .15s; }
.menu[open] .caret { transform: rotate(180deg); }
.menu[open] > summary { background: var(--chip); }
.menu-list { position: absolute; right: 0; top: calc(100% + .5rem); z-index: 40; width: 17rem; max-width: calc(100vw - 2rem);
             padding: .375rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel);
             box-shadow: 0 12px 32px rgba(0, 0, 0, .18); }
.menu-title { padding: .375rem .625rem .25rem; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.menu-list a { display: flex; align-items: center; gap: .75rem; padding: .55rem .625rem; border-radius: 10px; }
.menu-list a:hover, .menu-list a:focus-visible { background: var(--chip); }
.menu-list b { display: block; font-size: .9rem; font-weight: 600; }
.menu-list small { display: block; font-size: .75rem; color: var(--muted); }
.menu-icon { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; flex-shrink: 0; border-radius: 10px;
             background: var(--accent-a20); font-size: 1.05rem; }
@media (max-width: 479px) { .menu-label { display: none; } }

/* Sade Sati (macro sadesati) */
.rashi-pick { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; margin-top: 1rem; padding: 1rem 1.25rem; }
.ss-status { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem; padding: 1.25rem; border-left: 4px solid var(--muted); }
.ss-status.ss-on { border-left-color: var(--accent); }
.ss-status.ss-dhaiya { border-left-color: var(--warn); }
.ss-status.ss-off { border-left-color: var(--ok); }
.ss-icon { font-size: 2rem; line-height: 1; }
.ss-status > .grow { flex: 1 1 15rem; }
.ss-head { font-size: 1.125rem; margin-bottom: .25rem; }
.ss-moon { display: flex; flex-direction: column; gap: .125rem; max-width: 14rem; padding: .625rem .875rem; border-radius: 12px; background: var(--chip); }
.ss-moon .label { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ss-moon b { font-size: 1.125rem; }
/* Saturn graph: two-lane Gantt. Phase colours validated (light + dark, all pairs, CVD) as one categorical set. */
.ss-graph { --ss-rising: #C98210; --ss-peak: #D1495B; --ss-setting: #7B5CC4; --ss-dhaiya: #0A9396;
            margin: 1rem 0 0; padding: 1.25rem 1.5rem 1.5rem; }
.ss-graph-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .5rem 1rem; }
.ss-title { display: block; font-size: 1.125rem; font-weight: 700; }
.ss-sub { display: block; font-size: .8rem; color: var(--muted); }
.ss-legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .8rem; color: var(--muted); }
.ss-key { display: inline-block; width: .8rem; height: .8rem; margin-right: .35rem; border-radius: 3px; vertical-align: -1px; }
.ss-key.rising { background: var(--ss-rising); } .ss-key.peak { background: var(--ss-peak); }
.ss-key.setting { background: var(--ss-setting); } .ss-key.dhaiya { background: var(--ss-dhaiya); }
.ss-plot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; margin-top: 2.25rem; }
.ss-lanes { display: grid; grid-template-rows: 3.25rem 2.25rem; row-gap: .75rem; font-size: .85rem; font-weight: 500; color: var(--muted); }
.ss-lanes span { display: flex; align-items: center; justify-content: flex-end; white-space: nowrap; }
.ss-area { position: relative; padding-bottom: 2.4rem; }
.ss-lane { position: relative; height: 3.25rem; border-radius: 10px; background: color-mix(in srgb, var(--text) 5%, transparent); }
.ss-lane + .ss-lane { height: 2.25rem; margin-top: .75rem; }
.ss-grid { position: absolute; top: 0; bottom: 2.4rem; border-left: 1px dashed var(--line); }
.ss-seg { position: absolute; top: 0; bottom: 0; z-index: 1; border-radius: 4px; box-shadow: 0 0 0 1px var(--panel);
          cursor: default; outline: none; transition: filter .15s; }
.ss-seg.rising { background: var(--ss-rising); } .ss-seg.peak { background: var(--ss-peak); }
.ss-seg.setting { background: var(--ss-setting); } .ss-seg.dhaiya { background: var(--ss-dhaiya); }
.ss-seg.past { opacity: .5; }
.ss-seg b { display: block; overflow: hidden; color: #fff; font-size: .75rem; font-weight: 700; line-height: 2.25rem; text-align: center; }
.ss-seg:hover, .ss-seg:focus { z-index: 3; opacity: 1; filter: brightness(1.08); box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--text); }
/* Tooltip: dark ink chip above the bar; pinned to the edge near the ends so it never leaves the card */
.ss-seg::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 10px); left: 50%; width: max-content; max-width: 15rem;
                 padding: .4rem .6rem; border-radius: 8px; background: var(--text); color: var(--panel); font-size: .75rem;
                 line-height: 1.35; white-space: normal; pointer-events: none; opacity: 0; transform: translate(-50%, 4px);
                 transition: opacity .12s, transform .12s; }
.ss-seg.edge-l::after { left: 0; transform: translate(0, 4px); }
.ss-seg.edge-r::after { left: auto; right: 0; transform: translate(0, 4px); }
.ss-seg:hover::after, .ss-seg:focus::after { opacity: 1; transform: translate(-50%, 0); }
.ss-seg.edge-l:hover::after, .ss-seg.edge-l:focus::after,
.ss-seg.edge-r:hover::after, .ss-seg.edge-r:focus::after { transform: translate(0, 0); }
/* Cycle label: a small dark pill over the bars, above the Today line so it stays readable */
.ss-cyc { position: absolute; top: 50%; z-index: 5; transform: translate(-50%, -50%); pointer-events: none; white-space: nowrap;
          padding: .1rem .5rem; border-radius: 999px; background: rgba(20, 14, 40, .55); color: #fff;
          font-size: .8rem; font-weight: 700; letter-spacing: .02em; }
.ss-now { position: absolute; top: -1.9rem; bottom: 2.4rem; z-index: 4; width: 0; border-left: 2px solid var(--text); pointer-events: none; }
.ss-now span { position: absolute; top: 0; left: 0; transform: translateX(-50%); padding: .15rem .55rem; border-radius: 999px;
               background: var(--text); color: var(--panel); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.ss-axis { position: absolute; left: 0; right: 0; bottom: 0; height: 2.1rem; }
.ss-axis span { position: absolute; transform: translateX(-50%); font-size: .8rem; color: var(--muted); text-align: center; line-height: 1.2;
                white-space: nowrap; }
.ss-farea .ss-axis span:last-child { transform: translateX(-100%); text-align: right; }  /* the close-up's end tick sits at 100% */
.ss-axis small { display: block; font-size: .68rem; opacity: .8; }

/* Close-up of the running / next Sade Sati */
.ss-progress { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: 1rem; font-size: .9rem; }
.ss-progress-bar { flex: 1 1 12rem; max-width: 22rem; height: .55rem; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, transparent); overflow: hidden; }
.ss-progress-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--ss-rising), var(--ss-peak), var(--ss-setting)); }
.ss-farea { position: relative; margin-top: 2.75rem; padding-bottom: 2.4rem; }
.ss-farea .ss-grid { top: 3.4rem; }
.ss-brackets { position: relative; height: 3rem; margin-bottom: .4rem; }
.ss-bracket { position: absolute; height: 1.5rem; border: 3px solid; border-bottom: 0; border-radius: 6px 6px 0 0; }
.ss-bracket.row0 { top: 0; } .ss-bracket.row1 { top: 1.5rem; }
.ss-bracket.rising { border-color: var(--ss-rising); } .ss-bracket.peak { border-color: var(--ss-peak); }
.ss-bracket.setting { border-color: var(--ss-setting); }
.ss-bracket span { position: absolute; top: -.7rem; left: .5rem; padding: 0 .375rem; background: var(--panel); border-radius: 4px;
                   font-size: .8rem; font-weight: 600; white-space: nowrap; }
.ss-flane { position: relative; height: 4.5rem; border-radius: 12px; background: color-mix(in srgb, var(--text) 5%, transparent); }
.ss-flane .ss-seg { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .1rem; border-radius: 6px; }
.ss-flane .ss-seg b { line-height: 1.2; font-size: .95rem; }
.ss-flane .ss-seg b, .ss-flane .ss-seg small { text-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.ss-flane .ss-seg small { color: #fff; font-size: .72rem; opacity: .92; white-space: nowrap; overflow: hidden; max-width: 100%; padding: 0 .25rem; }
.ss-flane .ss-seg.live { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--text); }
.ss-farea .ss-now { top: -1.9rem; }

@media (max-width: 479px) {
  .ss-graph { padding: 1rem; }
  .ss-lanes { display: none; }
  .ss-plot { grid-template-columns: minmax(0, 1fr); }
  .ss-axis small { display: none; }
  .ss-axis span { font-size: .68rem; }
  .ss-farea .ss-axis span:nth-child(even) { display: none; }  /* every other year on phones */
  .ss-flane .ss-seg small { display: none; }
  .ss-bracket span { font-size: .7rem; }
}
.ss-cycles { display: grid; gap: .75rem; margin-top: 1rem; }
.ss-cycle { padding: 1rem 1.25rem; }
.ss-cycle.past { opacity: .75; }
.ss-cycle.now { border-color: var(--accent); }
.ss-phases { display: grid; gap: .625rem; margin-top: .75rem; }
@media (min-width: 640px) { .ss-phases { grid-template-columns: repeat(3, 1fr); } }

/* Mobile numerology (numerology.html): mobile score, digit pairs, suggestions */
.nm-pair.benefic span { background: #2F7D32; }
.nm-pair.neutral span { background: #8A6D1F; }
.nm-pair.malefic span, .nm-pair.repeated span { background: #B3261E; }
.nm-pair.unknown span { background: var(--muted); }
.nm-card { margin: 0 0 1rem; padding: 1.25rem 1.5rem; }
#result, #suggest { scroll-margin-top: 1rem; }  /* the forms post to /numerology#result and #suggest */
.nm-score-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; }
.nm-score { display: grid; place-items: center; width: 6rem; height: 6rem; border-radius: 50%; border: 6px solid var(--muted); flex: none; }
.nm-score b { font-size: 2rem; line-height: 1; color: var(--strong); }
.nm-score small { margin-top: -.75rem; font-size: .75rem; color: var(--muted); }
.nm-score.good { border-color: #2F7D32; } .nm-score.mid { border-color: #C98210; } .nm-score.low { border-color: #B3261E; }
.nm-h { font-size: 1.125rem; font-weight: 700; margin-bottom: .25rem; }
.nm-h3 { font-size: .95rem; font-weight: 700; margin: 1.25rem 0 .5rem; }
.nm-points { display: grid; gap: .25rem; margin: 1rem 0 0; list-style: none; font-size: .85rem; }
.nm-points .plus::before { content: "＋ "; color: #2F7D32; font-weight: 700; }
.nm-points .minus::before { content: "− "; color: #B3261E; font-weight: 700; }
.nm-pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .5rem; }
.nm-pair { display: flex; align-items: center; gap: .625rem; border: 1px solid var(--line); border-radius: 10px; padding: .5rem .75rem; }
.nm-pair b { font-size: 1.05rem; color: var(--strong); letter-spacing: .05em; }
.nm-pair span { border-radius: 999px; padding: .05rem .5rem; font-size: .72rem; font-weight: 600; color: #fff; }
.nm-suggest { align-items: flex-end; gap: .75rem; }
.nm-list { display: grid; gap: .375rem; margin: .75rem 0 0; padding-left: 1.5rem; }
.nm-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; }
.nm-num { font-size: 1.15rem; letter-spacing: .06em; color: var(--strong); font-variant-numeric: tabular-nums; }
.nm-score-chip { border-radius: 999px; padding: .05rem .55rem; background: var(--chip); font-size: .78rem; font-weight: 600; }

/* Marriage timing (marriage.html, marriage.js): headline tiles and the density graph */
.mt-tiles { display: grid; gap: .75rem; margin-bottom: 1rem; }
@media (min-width: 640px) { .mt-tiles { grid-template-columns: 1fr 1fr; } }
.mt-tile { display: flex; flex-direction: column; gap: .125rem; padding: 1rem 1.25rem; border-left: 4px solid var(--mt-pin); }
.mt-tile:first-child { border-left-color: var(--accent); }
.mt-tile .label { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mt-tile b { font-size: 1.125rem; color: var(--strong); }
.mt-graph, .mt-tile { --mt-pin: #0A9396; }
.mt-graph { margin: 0; padding: 1.25rem 1.5rem 1.25rem; }
.mt-plot { position: relative; margin-top: 1.25rem; }
.mt-svg { width: 100%; height: auto; overflow: visible; font-family: inherit; }
.mt-key-area { background: var(--accent); }
.mt-key-pin { background: var(--mt-pin); border-radius: 50%; }
.mt-grid { stroke: var(--line); stroke-width: 1; }
.mt-axis { stroke: var(--edge); stroke-width: 1; }
.mt-tick { fill: var(--muted); font-size: 11px; }
.mt-year { fill: var(--text-2); font-size: 11px; }
.mt-stop-top { stop-color: var(--accent); stop-opacity: .32; }
.mt-stop-bottom { stop-color: var(--accent); stop-opacity: .02; }
.mt-area { fill: url(#mt-fill); }
.mt-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.mt-today { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 4; }
.mt-stem { stroke: var(--mt-pin); stroke-width: 1; opacity: .45; }
.mt-pin { fill: var(--mt-pin); stroke: var(--panel); stroke-width: 2; }
.mt-pin-label { fill: var(--strong); font-size: 11.5px; font-weight: 700; paint-order: stroke; stroke: var(--panel); stroke-width: 4px; }
.mt-hover { stroke: var(--muted); stroke-width: 1; pointer-events: none; }
.mt-hover-dot { fill: var(--accent); stroke: var(--panel); stroke-width: 2; pointer-events: none; }
.mt-hover-dot.on-pin { fill: var(--mt-pin); }
.mt-tip { position: absolute; z-index: 5; width: max-content; max-width: 18rem; pointer-events: none; padding: .5rem .75rem;
          border: 1px solid var(--edge); border-radius: 10px; background: var(--panel); color: var(--text);
          font-size: .78rem; line-height: 1.5; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); }
@media (max-width: 479px) { .mt-graph { padding: 1rem; } }
.ss-phase { padding: .625rem .75rem; border-radius: 10px; background: var(--chip); border-top: 3px solid transparent; }
.ss-phase.rising { border-top-color: #C98210; } .ss-phase.peak { border-top-color: #D1495B; } .ss-phase.setting { border-top-color: #7B5CC4; }
.ss-phase.now { box-shadow: inset 0 0 0 2px var(--accent); }
.ss-phase p { margin: .125rem 0; }

/* Blog */
.blog-head { margin: 1.5rem 0 1rem; }
.blog-head h1 { font-size: 1.875rem; font-weight: 700; }
.post-card { display: block; padding: 1.25rem 1.5rem; margin-bottom: 1rem; }
.post-card h2 { margin: .25rem 0 .375rem; font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
.post-card h2 a:hover { color: var(--link-2); }
.post-card p { margin-bottom: .5rem; }
.post-meta { font-size: .8rem; color: var(--muted); }
.post-body { margin-top: 1.25rem; }
.post-body h2 { margin-top: 2rem; }
.post-body blockquote { margin: 1rem 0; border-left: 3px solid var(--accent); padding: .25rem 1rem; color: var(--muted); }
.post-body img { max-width: 100%; height: auto; border-radius: 12px; margin: 1rem 0; }
.post-body code { border-radius: 4px; background: var(--chip); padding: 0 .25rem; font-size: .9em; }
.post-body pre { overflow-x: auto; border-radius: 8px; background: var(--chip); padding: .75rem 1rem; }
.post-body pre code { background: none; padding: 0; }
.post-body table { display: block; max-width: 100%; overflow-x: auto; margin: 1rem 0; font-size: .9rem; }
.post-body th, .post-body td { border: 1px solid var(--edge); padding: .375rem .625rem; text-align: left; vertical-align: top; }
.post-body th { background: var(--panel); font-weight: 600; }
.post-body hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
.post-body strong { font-weight: 600; color: var(--strong); }
.post-body em { font-style: italic; }
.post-cta { margin: 2.5rem 0 1rem; padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; }
.post-cta p { margin: 0; }
.editor textarea { resize: vertical; line-height: 1.5; }
.editor textarea.body { min-height: 24rem; font-family: ui-monospace, Consolas, monospace; font-size: .875rem; }
.editor code { border-radius: 4px; background: var(--chip); padding: 0 .25rem; }
.slug { display: flex; align-items: center; gap: .375rem; font-size: .875rem; }
.slug .input { flex: 1; }
form.inline { display: inline; }
.danger { color: var(--err); }
.faq details { border-bottom: 1px solid var(--line); padding: .75rem 0; }
.faq summary { font-weight: 600; }
.faq details p { margin: .5rem 0 0; color: var(--prose); }

/* ---------- One-page print sheet (kundli) ---------- */
/* Laid out off-screen so its height can be measured; shown only when printing (A4, 10 mm margins). */
#print-sheet { position: absolute; left: -10000px; top: 0; width: 190mm; background: #fff; color: #111; font-size: 10px; line-height: 1.375; }
#print-sheet * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
#print-sheet .ps-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: .5rem; border-bottom: 2px solid #000; padding-bottom: .25rem; }
#print-sheet .ps-title { font-size: 16px; font-weight: 700; }
#print-sheet .ps-sub { font-size: 9px; }
#print-sheet .ps-details { display: grid; grid-template-columns: repeat(4, 1fr); gap: .125rem .75rem; border: 1px solid #9ca3af; border-radius: 4px; padding: .375rem .5rem; }
#print-sheet .ps-details .k { color: #4b5563; }
#print-sheet .ps-details .wide { grid-column: span 2; }
#print-sheet .ps-tl-head { display: flex; justify-content: space-between; margin: .5rem 0 .125rem; font-size: 9px; }
#print-sheet .ps-tl { position: relative; display: flex; height: 1rem; overflow: hidden; border: 1px solid #6b7280; border-radius: 4px; }
#print-sheet .ps-tl .seg { display: flex; align-items: center; justify-content: center; border-right: 1px solid #fff; font-size: 8px; font-weight: 600; color: #111; }
#print-sheet .ps-tl .seg.now { outline: 2px solid #000; outline-offset: -2px; }
#print-sheet .ps-tl .line { position: absolute; top: 0; bottom: 0; width: 2px; background: #000; }
#print-sheet .ps-tl-years { display: flex; font-size: 8px; }
#print-sheet .ps-tl-years span { overflow: hidden; text-align: center; white-space: nowrap; }
#print-sheet .ps-charts { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-top: .5rem; }
#print-sheet .ps-chart { border: 1px solid #9ca3af; border-radius: 4px; padding: .25rem; }
#print-sheet .ps-chart-title { margin-bottom: .125rem; text-align: center; font-size: 10px; font-weight: 700; }
#print-sheet .chart-svg text { fill: #111; }
#print-sheet .chart-svg polygon { stroke: #666; }
#print-sheet .south { background: #999; }
#print-sheet .south .cell, #print-sheet .south .center { background: #fff; }
#print-sheet .south .cell small, #print-sheet .south .center small { color: #4b5563; }
#print-sheet .ps-bottom { display: grid; grid-template-columns: 34% 1fr; gap: .5rem; margin-top: .5rem; }
#print-sheet .ps-h { margin-bottom: .125rem; font-weight: 700; }
#print-sheet .ps-h.ps-gap { margin-top: .5rem; }
#print-sheet table { width: 100%; font-size: 9px; }
#print-sheet th, #print-sheet td { border: 1px solid #9ca3af; padding: 0 .25rem; text-align: left; }
#print-sheet th { background: #e5e7eb; }
#print-sheet .ps-note { margin-top: .25rem; font-size: 8px; color: #4b5563; }
#print-sheet .ps-dashas { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem; }
#print-sheet .ps-md { border: 1px solid #9ca3af; border-radius: 4px; }
#print-sheet .ps-md.now { border: 2px solid #000; }
#print-sheet .ps-md-head { background: #e5e7eb; padding: 0 .25rem; font-size: 9px; font-weight: 700; }
#print-sheet .ps-ad { display: flex; justify-content: space-between; padding: 0 .25rem; font-size: 8.5px; }
#print-sheet .ps-ad.now { background: #fef9c3; font-weight: 700; }
#print-sheet .ps-foot { margin-top: .375rem; border-top: 1px solid #9ca3af; padding-top: .125rem; text-align: center; font-size: 8px; color: #4b5563; }

@media print {
  @page { size: A4; margin: 10mm; }
  /* the site's color-scheme: dark would paint the page margins dark grey */
  html, body, .page { background: #fff !important; min-height: 0 !important; color-scheme: light !important; }
  .no-print { display: none !important; }
  #print-sheet { position: static; width: 100%; }
}