/* ============================================================================
   AstroVidya — Cinematic Vedic theme  (v2, "warm & trusted")
   ----------------------------------------------------------------------------
   v1 mistake (fixed here): pure-black + Cormorant-for-Hindi + sparse. Research
   on Tier-2/3 Hindi users showed that reads funereal, illegible in daylight,
   and "scammy". v2 keeps the gold-leaf craft + dated-prediction set-pieces but:
     - WARM deep-charcoal ground (not pure black) + a real LIGHT theme toggle
     - Devanagari-capable SANS for all headings/body (Cormorant ONLY for the
       English wordmark — it has zero Devanagari glyphs)
     - larger, higher-contrast type for budget LCDs in sunlight
     - targets the REAL component classes app.js emits (hooks, chat, kundli...)
     - trust + warmth foregrounded; spectacle gated for perf
   Loads AFTER styles.css; re-themes by overriding design tokens.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. THEME TOKENS — warm dark is default; [data-theme="light"] is the toggle.
   Only the BASE palette vars change per theme; the legacy tokens below
   reference them, so styles.css re-skins automatically in both themes.
   --------------------------------------------------------------------------- */
:root {
    /* Warm dark ground — espresso/charcoal, never blue-grey, never pure black */
    --ink-900: #15110B;
    --ink-800: #1E1810;
    --ink-700: #292016;
    --ink-650: #342A1E;
    --panel:   rgba(255, 246, 230, 0.045);
    --panel-2: rgba(255, 246, 230, 0.075);

    /* Gold leaf */
    --gold-deep: #8A5A1A;
    --gold:      #E6B84F;
    --gold-hi:   #F8E3A8;
    --saffron:   #EC9D1A;

    /* Charged warmth */
    --ran-red:   #C0392B;
    --copper:    #C2562F;
    --copper-hi: #D46B40;

    /* Text — manuscript ivory, higher contrast greys for legibility */
    --ivory:     #F8F2E6;
    --ink-grey:  #C2B7A4;
    --ink-muted: #92897A;
    --sumi:      rgba(248, 242, 230, 0.13);
    --sumi-soft: rgba(248, 242, 230, 0.07);

    --haze-amber: rgba(230, 184, 79, 0.12);
    --haze-warm:  rgba(40, 22, 12, 0.40);

    --leaf: linear-gradient(135deg, var(--gold-deep) 0%, var(--gold) 40%, var(--gold-hi) 58%, var(--gold) 76%, var(--gold-deep) 100%);
    --leaf-soft: linear-gradient(135deg, rgba(230,184,79,0.18), rgba(230,184,79,0.03));
    --leaf-edge: 1px solid rgba(230, 184, 79, 0.36);
    --card-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 24px 48px -28px rgba(0,0,0,0.85);

    /* Fonts — Devanagari-capable SANS for everything; serif ONLY for wordmark */
    --font-display: 'Mukta', 'Hind', 'Noto Sans Devanagari', system-ui, sans-serif;
    --font-accent:  'Cormorant Garamond', Georgia, serif;   /* English wordmark only */
    --font-body:    'Noto Sans Devanagari', 'Hind', system-ui, sans-serif;
    --font-bija:    'Tiro Devanagari Hindi', serif;
    --font-mono:    'JetBrains Mono', ui-monospace, monospace;

    /* ---- legacy token remap (whole app already uses these) ---- */
    --bg-page: var(--ink-900);
    --bg-card: var(--panel);
    --bg-warm: var(--ink-700);
    --bg-hero: radial-gradient(120% 90% at 16% -10%, rgba(230,184,79,0.14), transparent 60%), var(--ink-800);
    --bg-gradient: var(--ink-900);

    --text-primary:   var(--ivory);
    --text-secondary: var(--ink-grey);
    --text-muted:     var(--ink-muted);
    --text-warm:      var(--gold-hi);

    --accent:          var(--gold);
    --accent-light:    var(--gold-hi);
    --accent-gradient: var(--leaf);

    --border:          var(--sumi);
    --border-emphasis: rgba(230, 184, 79, 0.30);

    --success:      #46B86E;
    --success-light:#57C97E;
    --error:        var(--ran-red);
    --error-light:  var(--copper-hi);

    --indigo:      #241A10;
    --indigo-deep: #181109;
    --gold-glow:   rgba(230, 184, 79, 0.20);
    --surface-hover: var(--ink-650);

    /* Navagraha (chart-only) */
    --graha-surya: #EC9D1A; --graha-chandra: #F1ECE0; --graha-mangala: #D4543A;
    --graha-budha: #46B86E; --graha-brihaspati: #F0C04E; --graha-shukra: #E8A6C0;
    --graha-shani: #7E93C8; --graha-rahu: #9C8F86; --graha-ketu: #C2702F;
}

/* ---- LIGHT THEME — warm cream, auspicious, daylight-legible ---- */
[data-theme="light"] {
    --ink-900: #FBF4E6;   /* page */
    --ink-800: #FFFDF8;   /* cards */
    --ink-700: #F3EAD7;
    --ink-650: #ECE0C9;
    --panel:   #FFFDF8;
    --panel-2: #FBF3E2;

    --gold-deep: #7A4E10;
    --gold:      #A86A12;   /* darker so it reads on cream */
    --gold-hi:   #C68A1E;
    --saffron:   #C8841E;

    --ivory:     #2A2018;   /* primary TEXT on light */
    --ink-grey:  #6B5E4D;
    --ink-muted: #9A8B76;
    --sumi:      rgba(42, 32, 24, 0.13);
    --sumi-soft: rgba(42, 32, 24, 0.06);

    --haze-amber: rgba(200, 132, 30, 0.10);
    --haze-warm:  rgba(255, 244, 224, 0.5);

    --leaf: linear-gradient(135deg, #B5791A 0%, #D99B22 45%, #F0B840 60%, #C68A1E 100%);
    --leaf-soft: linear-gradient(135deg, rgba(200,132,30,0.14), rgba(200,132,30,0.03));
    --leaf-edge: 1px solid rgba(168, 106, 18, 0.40);
    --card-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 18px 40px -26px rgba(120, 80, 20, 0.30);

    --success: #1E8E4E; --error: #B7472A;
    --gold-glow: rgba(200, 132, 30, 0.18);
    --surface-hover: #F1E6CF;
}

/* ---------------------------------------------------------------------------
   2. BASE + ATMOSPHERE (atmosphere only in dark)
   --------------------------------------------------------------------------- */
html, body { background-color: var(--ink-900); }
body {
    font-family: var(--font-body);
    color: var(--ivory);
    font-size: 15.5px;
    line-height: 1.65;
}

/* warm off-centre key light + warm fog (dark only) */
body::before {
    content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none;
    background:
        radial-gradient(58% 42% at 20% 6%, var(--haze-amber) 0%, transparent 58%),
        radial-gradient(80% 60% at 90% 110%, var(--haze-warm) 0%, transparent 60%),
        radial-gradient(140% 120% at 50% 0%, #181009 0%, var(--ink-900) 48%, #100B06 100%);
}
body::after {
    content: ""; position: fixed; inset: -10%; z-index: -2; pointer-events: none;
    opacity: 0.5;
    background-image:
        radial-gradient(1.4px 1.4px at 16% 22%, rgba(248,227,168,0.9), transparent 60%),
        radial-gradient(1.1px 1.1px at 33% 12%, rgba(248,242,230,0.6), transparent 60%),
        radial-gradient(1.5px 1.5px at 26% 38%, rgba(230,184,79,0.8), transparent 60%),
        radial-gradient(1px 1px at 62% 18%, rgba(248,242,230,0.5), transparent 60%),
        radial-gradient(1.2px 1.2px at 78% 30%, rgba(248,227,168,0.6), transparent 60%),
        radial-gradient(1px 1px at 47% 64%, rgba(248,242,230,0.4), transparent 60%),
        radial-gradient(1.3px 1.3px at 88% 72%, rgba(230,184,79,0.5), transparent 60%),
        radial-gradient(1px 1px at 12% 82%, rgba(248,242,230,0.35), transparent 60%);
    animation: avTwinkle 9s ease-in-out infinite;
}
@keyframes avTwinkle { 0%,100%{opacity:.36} 50%{opacity:.62} }

/* light theme: warm cream wash, no starfield */
[data-theme="light"] body::before {
    background: radial-gradient(70% 45% at 50% -8%, rgba(200,132,30,0.10), transparent 60%), var(--ink-900);
}
[data-theme="light"] body::after { display: none; }

#app { background: transparent; }
@media (min-width: 600px) { #app { background: color-mix(in srgb, var(--ink-900) 78%, transparent); } }

#app::after {              /* film vignette (dark only) */
    content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none;
    box-shadow: inset 0 0 160px 36px rgba(0,0,0,0.5);
}
[data-theme="light"] #app::after { box-shadow: inset 0 0 120px 30px rgba(120,80,20,0.06); }

/* Desktop media-queries in styles.css re-apply navy gradients on body/header
   and force the nav sidebar visible even when .hidden — purge at all widths. */
body { background-image: none !important; }
header#header { background-image: none !important; }
#bottom-nav.hidden { display: none !important; }

/* ---------------------------------------------------------------------------
   3. PURGE LEGACY BLUE — old theme hard-codes indigo on body/views/story
   --------------------------------------------------------------------------- */
div[id^="view-"] { background-color: transparent !important; background-image: none !important; }
.onboarding-story {
    background:
        radial-gradient(120% 80% at 8% 0%, rgba(230,184,79,0.08), transparent 55%),
        var(--ink-800) !important;
    border: 1px solid var(--sumi) !important;
    box-shadow: var(--card-shadow) !important;
}
.onboarding-shell, .onboarding-panel-top, .home-container { background-color: transparent !important; }

/* ---------------------------------------------------------------------------
   4. TYPOGRAPHY — Devanagari sans headings (renders Hindi!), larger & bolder.
   Cormorant ONLY for the English wordmark/splash accent.
   --------------------------------------------------------------------------- */
h1, h2, h3, h4,
.onboarding-story-title, .wizard-question, .hooks-title-glow, .reading-title-glow,
.kundli-hero-name, .home-user-name, .chart-title, .life-area-title,
.match-score-label, .payment-plan-title, .home-section-label {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--ivory);
}
.onboarding-story-title, .hooks-title-glow, .reading-title-glow { font-weight: 700; line-height: 1.18; }

/* The wordmark is the one place the English serif is allowed to sing */
.logo-text, #view-splash h1 {
    font-family: var(--font-accent);
    font-weight: 600;
    letter-spacing: 0.02em;
    background: var(--leaf);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* instrument readout */
#timer-text, .mono, .panchang-cell-value, .panchang-value, .home-rashi-badge,
.payment-plan-rate, .hook-counter, #hook-progress-text,
.kundli-hero-rashi, .kundli-hero-dasha {
    font-family: var(--font-mono); letter-spacing: 0.02em;
}

/* overlines / section labels — saffron, spaced */
.home-section-label, .onboarding-story-badge, .onboarding-panel-badge {
    text-transform: uppercase; letter-spacing: 0.16em; font-size: 10.5px;
    font-weight: 700; color: var(--saffron); font-family: var(--font-body);
}
::selection { background: rgba(230,184,79,0.30); color: var(--ivory); }
[data-theme="light"] ::selection { background: rgba(200,132,30,0.25); color: #2A2018; }

/* ---------------------------------------------------------------------------
   5. BUTTONS — gold-leaf primary, copper CTA, ghost secondary
   --------------------------------------------------------------------------- */
.astro-primary-btn, #show-full-reading-btn, .ask-guru-btn, .home-chat-cta {
    position: relative; overflow: hidden; isolation: isolate;
    background: var(--leaf); color: #2A1B06;
    font-family: var(--font-body); font-weight: 700; border: none; border-radius: 16px;
    box-shadow: 0 1px 0 rgba(248,227,168,0.6) inset, 0 12px 30px -12px rgba(230,184,79,0.55), 0 0 0 1px rgba(138,90,26,0.4);
    transition: transform 120ms ease, filter 200ms ease;
}
.astro-primary-btn::after, .ask-guru-btn::after {
    content:""; position:absolute; inset:0; z-index:-1;
    background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,0.5) 48%, transparent 64%);
    transform: translateX(-120%); animation: avSheen 6s ease-in-out 1.4s infinite;
}
@keyframes avSheen { 0%,18%{transform:translateX(-120%)} 40%,100%{transform:translateX(120%)} }
.astro-primary-btn:active, .ask-guru-btn:active { transform: translateY(1px) scale(0.99); }

.astro-secondary-btn, #skip-to-chat-btn, #btn-back-chat-2, #back-to-chat-from-reading, .btn-skip {
    background: color-mix(in srgb, var(--gold) 8%, transparent);
    border: var(--leaf-edge); color: var(--gold-hi);
    border-radius: 14px; font-family: var(--font-body); font-weight: 600;
}
[data-theme="light"] .astro-secondary-btn, [data-theme="light"] .btn-skip { color: var(--gold); }
.astro-send-btn { background: var(--leaf) !important; color: #2A1B06 !important; box-shadow: 0 6px 16px -8px rgba(230,184,79,0.6); }

/* ---------------------------------------------------------------------------
   6. CARDS — warm ink panels (dark) / clean cream cards (light)
   --------------------------------------------------------------------------- */
.onboarding-panel, .onboarding-service-card, .onboarding-proof-card,
.kundli-hero, .chart-compact, .kundli-chart-wrapper, .home-header-card,
.home-energy-section, .home-rashifal-card, .home-panchang-section, .home-tip-section,
.ap-form-shell, .panchang-grid, .panchang-times, .horoscope-tabs, #kundli-planets,
.life-area-card, .horoscope-card, .reading-category, .dasha-current-banner,
.dasha-timeline-item, .match-score-card, .payment-plan, .yoga-card {
    background: var(--panel) !important;
    border: 1px solid var(--sumi) !important;
    border-radius: 16px;
    box-shadow: var(--card-shadow);
}
.onboarding-proof-card, .payment-plan.popular {
    background: var(--leaf-soft), var(--ink-800) !important;
    border: var(--leaf-edge) !important;
}
.onboarding-trust-chip, .quick-chip, .service-pill, .horo-tab, .energy-pill, .yoga-card {
    background: var(--panel); border: 1px solid var(--sumi); color: var(--ivory);
    border-radius: 999px; transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.yoga-card { border-radius: 10px; color: var(--gold-hi); }
.quick-chip:hover, .service-pill:hover, .horo-tab:hover { background: color-mix(in srgb, var(--gold) 10%, transparent); border-color: var(--border-emphasis); color: var(--gold-hi); }
.horo-tab.active { background: var(--leaf); color: #2A1B06; border-color: transparent; font-weight: 700; }

/* ---------------------------------------------------------------------------
   7. INPUTS
   --------------------------------------------------------------------------- */
.astro-input-shell, .astro-chat-input-shell {
    background: var(--panel); border: 1px solid var(--sumi); border-radius: 14px;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}
.astro-input-shell:focus-within, .astro-chat-input-shell:focus-within {
    border-color: var(--border-emphasis);
    box-shadow: 0 0 0 3px var(--gold-glow), 0 0 22px -8px var(--gold);
}
.astro-input, .astro-chat-input { color: var(--ivory); font-family: var(--font-body); font-size: 16px; }
.astro-input::placeholder, .astro-chat-input::placeholder { color: var(--ink-muted); }
.astro-input-icon, .astro-chat-icon { color: var(--saffron); }

/* ---------------------------------------------------------------------------
   8. HEADER + theme/lang controls
   --------------------------------------------------------------------------- */
header#header {
    background: color-mix(in srgb, var(--ink-900) 84%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--sumi);
    box-shadow: 0 1px 0 rgba(230,184,79,0.10);
}
.logo-icon { color: var(--gold); filter: drop-shadow(0 0 8px rgba(230,184,79,0.45)); }
#lang-toggle, .theme-toggle {
    background: var(--panel); border: 1px solid var(--sumi); color: var(--ivory); border-radius: 999px;
}
.theme-toggle { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--saffron); }
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle .ti-moon { display: none; }
.theme-toggle .ti-sun  { display: block; }
[data-theme="light"] .theme-toggle .ti-sun  { display: none; }
[data-theme="light"] .theme-toggle .ti-moon { display: block; }

/* ---------------------------------------------------------------------------
   9. SPLASH + LOADING set-pieces
   --------------------------------------------------------------------------- */
.splash-icon { color: var(--gold); filter: drop-shadow(0 0 26px rgba(230,184,79,0.55)); animation: avLamp 4.5s ease-in-out infinite; }
@keyframes avLamp { 0%,100%{filter:drop-shadow(0 0 20px rgba(230,184,79,.45));transform:translateY(0) scale(1)} 50%{filter:drop-shadow(0 0 40px rgba(230,184,79,.7));transform:translateY(-4px) scale(1.03)} }
#view-splash p { color: var(--gold-hi) !important; font-family: var(--font-accent); font-style: italic; }

#view-loading { position: relative; overflow: hidden; }
.loading-spinner { position: relative; color: var(--gold); filter: drop-shadow(0 0 28px rgba(230,184,79,0.55)); }
.loading-spinner::before { content:""; position:absolute; inset:-22px; border-radius:50%; border:1px solid transparent; border-top-color: rgba(230,184,79,0.8); border-right-color: rgba(236,157,26,0.3); animation: avOrbit 2.6s linear infinite; }
.loading-spinner::after { content:""; position:absolute; inset:-38px; border-radius:50%; border:1px dashed rgba(230,184,79,0.18); animation: avOrbit 7s linear infinite reverse; }
@keyframes avOrbit { to { transform: rotate(360deg); } }
.loading-star-svg { animation: avLamp 3s ease-in-out infinite; }
#view-loading > div > p:first-of-type { font-family: var(--font-display) !important; font-weight: 700; color: var(--gold-hi) !important; }
.loading-step-row { border: 1px solid var(--sumi); border-radius: 12px; padding: 10px 14px; background: var(--panel); color: var(--ink-grey); transition: all 400ms ease; }
.loading-step-row .loading-step-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-muted); transition: all 400ms ease; }
.loading-step-row.step-active, .loading-step-row.active { color: var(--ivory); border-color: var(--border-emphasis); background: var(--leaf-soft); transform: translateX(2px); }
.loading-step-row.step-active .loading-step-dot, .loading-step-row.active .loading-step-dot { background: var(--gold); box-shadow: 0 0 12px 2px rgba(230,184,79,0.6); animation: avPulse 1.2s ease-in-out infinite; }
.loading-step-row.step-done .loading-step-dot, .loading-step-row.done .loading-step-dot { background: var(--success); }
@keyframes avPulse { 0%,100%{box-shadow:0 0 10px 1px rgba(230,184,79,.5)} 50%{box-shadow:0 0 18px 4px rgba(230,184,79,.85)} }
.loading-dot { background: var(--gold) !important; }

/* ---------------------------------------------------------------------------
   10. HOOKS — the 5 dramatic dated predictions (REAL classes)
   --------------------------------------------------------------------------- */
.hooks-title-glow { color: var(--gold-hi); text-shadow: 0 0 24px rgba(230,184,79,0.4); font-size: 1.55rem; }
#hook-progress-text { color: var(--saffron) !important; letter-spacing: 0.12em; }
.hook-counter { color: var(--saffron); }

.hook-card-single, .hook-card {
    background: radial-gradient(120% 80% at 12% 0%, rgba(230,184,79,0.10), transparent 55%), var(--ink-800) !important;
    border: 1px solid var(--sumi) !important;
    border-left: 3px solid var(--gold) !important;
    border-radius: 18px;
    box-shadow: 0 30px 60px -34px rgba(0,0,0,0.9);
    padding: 24px 20px;
}
.animate-hook-enter { animation: avFog 700ms cubic-bezier(0.22,1,0.36,1) both; }
@keyframes avFog { from{opacity:0;transform:translateY(16px) scale(.985);filter:blur(5px)} to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)} }
.hook-icon-circle {
    width: 64px; height: 64px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; margin: 0 auto;
    color: var(--gold); background: var(--leaf-soft); border: var(--leaf-edge);
    box-shadow: 0 0 24px -6px rgba(230,184,79,0.5);
}
/* the statement carries the month-year + question; make it the focal point */
.hook-statement {
    font-family: var(--font-display); font-weight: 700;
    font-size: 1.32rem; line-height: 1.4; text-align: center;
    color: var(--ivory); margin-top: 16px;
}
.hook-hint { color: var(--ink-muted); font-size: 12px; }

.hook-buttons { display: flex; gap: 10px; }
.btn-verify, .btn-verify-large { background: var(--leaf); color: #23180a; border: none; border-radius: 12px; font-weight: 700; box-shadow: 0 8px 20px -10px rgba(230,184,79,0.6); }
.btn-deny, .btn-deny-large { background: color-mix(in srgb, var(--ran-red) 16%, transparent); color: var(--copper-hi); border: 1px solid color-mix(in srgb, var(--ran-red) 45%, transparent); border-radius: 12px; font-weight: 700; }
[data-theme="light"] .btn-deny { color: var(--ran-red); }
.hook-card.hook-verified, .hook-card-single.hook-verified { border-left-color: var(--gold) !important; animation: avBloom 700ms ease both; }
.hook-card.hook-denied, .hook-card-single.hook-denied { border-left-color: var(--ran-red) !important; }
@keyframes avBloom { 0%{box-shadow:0 0 0 0 rgba(230,184,79,0)} 40%{box-shadow:0 0 40px 6px rgba(230,184,79,.45)} 100%{box-shadow:0 30px 60px -34px rgba(0,0,0,.9)} }
.hook-score-dots .dot, .hook-score-dots span { background: var(--ink-muted); }
.hook-score-dots .dot-active { background: var(--gold); box-shadow: 0 0 10px 1px rgba(230,184,79,0.6); }

/* score verdict ring */
.score-circle { filter: drop-shadow(0 0 22px rgba(230,184,79,0.5)); }
.score-circle circle { transition: stroke-dashoffset 1500ms cubic-bezier(0.22,1,0.36,1); }
.score-number { font-family: var(--font-display) !important; font-weight: 700; color: var(--gold-hi) !important; text-shadow: 0 0 24px rgba(230,184,79,0.5); }
.score-label { color: var(--ink-grey); }

/* ---------------------------------------------------------------------------
   11. KUNDLI — luminous yantra + life-area cards + planet table
   --------------------------------------------------------------------------- */
.kundli-hero { background: radial-gradient(90% 120% at 0% 0%, rgba(230,184,79,0.12), transparent 55%), var(--ink-800) !important; border: var(--leaf-edge) !important; }
.kundli-hero-name { color: var(--gold-hi); }
.kundli-grid {
    background: radial-gradient(70% 70% at 50% 50%, rgba(230,184,79,0.07), transparent 70%), var(--ink-900);
    border: var(--leaf-edge); border-radius: 8px;
    box-shadow: 0 0 0 1px rgba(230,184,79,0.12), 0 0 60px -10px rgba(230,184,79,0.28) inset, 0 30px 60px -30px rgba(0,0,0,0.9);
}
.kundli-cell { border-color: rgba(230,184,79,0.16) !important; }
.kundli-center-label { color: var(--gold-hi) !important; font-family: var(--font-display); font-weight: 700; }
.planet-pill, .planet-badge { background: color-mix(in srgb, var(--gold) 10%, transparent); border-radius: 6px; font-weight: 700; }
/* Navagraha layer-1 bija syllables + Devanagari rashi short forms (iconography
   spec): the ONLY graha/rashi "icon" the product renders — Western planetary and
   zodiac glyphs are banned everywhere. */
.bija { font-family: var(--font-bija); color: var(--gold-hi); font-weight: 400; line-height: 1; }
.planet-icon.bija { display: inline-block; min-width: 1.4em; text-align: center; }
#horoscope-sign-icon.bija { font-size: 1.75rem; }
.chart-expand-toggle { background: color-mix(in srgb, var(--gold) 6%, transparent); border: 1px solid var(--border-emphasis); color: var(--gold-hi); border-radius: 999px; }
#kundli-planets table thead tr { color: var(--saffron) !important; border-color: var(--sumi) !important; }
#planets-tbody tr { border-color: var(--sumi-soft) !important; }

/* WhatsApp share button under the Ask-Guru CTA (kundli view) — inherits the
   gold-leaf ghost styling from .astro-secondary-btn; layout only here. */
#btn-share-kundli {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; margin-top: 10px; padding: 12px 16px; font-size: 14px;
}

.life-area-card { border-left: 3px solid var(--gold) !important; }
.life-area-title { color: var(--ivory); }
.life-area-title-en { color: var(--ink-muted); font-family: var(--font-body); }
.life-area-icon { color: var(--saffron); }

/* ---------------------------------------------------------------------------
   12. CHAT — distinct guru/user bubbles (REAL classes)
   --------------------------------------------------------------------------- */
.chat-input-bar { background: linear-gradient(180deg, transparent, var(--ink-900) 30%); border-top: 1px solid var(--sumi); }
.chat-overlay-header { background: color-mix(in srgb, var(--ink-900) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--sumi); }
.chat-overlay-title { color: var(--gold-hi); font-family: var(--font-display); font-weight: 700; }
.msg-bubble { font-size: 15px; line-height: 1.6; }
.msg-assistant {
    background: var(--ink-700) !important; border: 1px solid var(--sumi) !important;
    color: var(--ivory) !important; border-radius: 16px 16px 16px 5px;
    box-shadow: 0 8px 20px -16px rgba(0,0,0,0.8);
}
.msg-user {
    background: var(--leaf-soft) !important; border: 1px solid var(--border-emphasis) !important;
    color: var(--ivory) !important; border-radius: 16px 16px 5px 16px;
}
.msg-system { background: var(--panel) !important; border: 1px solid var(--sumi) !important; color: var(--ink-grey) !important; border-radius: 999px; }
.msg-assistant strong { color: var(--gold-hi); }
/* chat markdown helpers (app.js renderFormattedContent additions) */
.md-h { display:block; font-family: var(--font-display); font-weight:700; color: var(--gold-hi); margin: 10px 0 4px; font-size: 1.02em; }
.md-li { display:block; padding-left: 14px; position: relative; }
.md-li::before { content:"•"; color: var(--saffron); position:absolute; left:0; }
.typing-indicator .dot { background: var(--gold) !important; }

/* ---------------------------------------------------------------------------
   13. HOROSCOPE / READING / DASHA / MATCH
   --------------------------------------------------------------------------- */
.horoscope-card { border-left: 3px solid var(--gold) !important; }
.reading-category-header { color: var(--gold-hi); font-family: var(--font-display); font-weight: 700; }
.reading-chevron { color: var(--saffron); }
.reading-label { color: var(--ink-grey); }

/* "Ask remedy" chip — one per reading category; opens chat prefilled */
.remedy-chip {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 10px 0 4px; padding: 6px 14px;
    font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
    color: var(--gold-hi);
    background: color-mix(in srgb, var(--gold) 8%, transparent);
    border: 1px solid var(--border-emphasis); border-radius: 999px;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease;
}
.remedy-chip:hover { background: color-mix(in srgb, var(--gold) 14%, transparent); }
.remedy-chip:active { transform: translateY(1px); }
[data-theme="light"] .remedy-chip { color: var(--gold); }
.dasha-tl-dot { background: var(--gold) !important; box-shadow: 0 0 10px 1px rgba(230,184,79,0.5); }
.dasha-tl-planet, .dasha-planet { color: var(--gold-hi); font-weight: 700; }
.dasha-tl-dates, .dasha-dates { color: var(--ink-muted); font-family: var(--font-mono); font-size: 11px; }
.dasha-badge { background: var(--leaf-soft); color: var(--gold-hi); border: var(--leaf-edge); border-radius: 999px; }
.match-score-number { font-family: var(--font-display) !important; font-weight: 700; color: var(--gold-hi) !important; }
.match-score-label, .match-recommendation { color: var(--ink-grey); }

/* ---------------------------------------------------------------------------
   13b. LIFE TIMELINE — the 50-100 dated events (Full Reading view)
   --------------------------------------------------------------------------- */
#life-timeline { margin-top: 28px; }
.life-timeline-title { font-family: var(--font-display); font-weight: 700; color: var(--gold-hi); font-size: 1.2rem; margin: 0 0 2px; }
.life-timeline-sub { color: var(--ink-muted); font-size: 12px; margin: 0 0 14px; }
#life-timeline-list { position: relative; padding-left: 14px; }
#life-timeline-list::before { content: ""; position: absolute; left: 3px; top: 6px; bottom: 6px; width: 1px; background: linear-gradient(180deg, var(--gold), var(--sumi)); opacity: 0.5; }
.lt-row { display: flex; gap: 12px; padding: 10px 12px; margin-bottom: 8px; border-radius: 12px; background: var(--panel); border: 1px solid var(--sumi); position: relative; }
.lt-row::before { content: ""; position: absolute; left: -14.5px; top: 18px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px 1px rgba(230,184,79,0.5); }
.lt-row.lt-past { opacity: 0.72; }
.lt-row.lt-past::before { background: var(--ink-muted); box-shadow: none; }
.lt-date { flex: 0 0 74px; font-family: var(--font-mono); font-size: 11.5px; color: var(--saffron); padding-top: 2px; }
.lt-main { flex: 1; min-width: 0; }
.lt-top { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.lt-area { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold-hi); font-weight: 700; }
.lt-prob { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-muted); }
.lt-desc { font-size: 13.5px; color: var(--ivory); line-height: 1.5; font-weight: 600; }
.lt-reason { font-size: 11.5px; color: var(--ink-muted); line-height: 1.4; margin-top: 1px; }
.lt-today {
    text-align: center; margin: 14px 0; font-family: var(--font-mono);
    font-size: 11px; letter-spacing: 0.2em; color: var(--saffron);
    text-shadow: 0 0 12px rgba(230,184,79,0.4);
}

/* ---------------------------------------------------------------------------
   14. BOTTOM NAV + FAB + HOME + PAYWALL + ONBOARDING trust
   --------------------------------------------------------------------------- */
.bottom-nav {
    background: color-mix(in srgb, var(--ink-900) 88%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
    border-top: 1px solid var(--sumi); box-shadow: 0 -1px 0 rgba(230,184,79,0.12);
}
.nav-item { color: var(--ink-grey); transition: color 160ms ease, transform 160ms ease; }
.nav-item.active { color: var(--gold-hi); }
.nav-item.active svg { filter: drop-shadow(0 0 8px rgba(230,184,79,0.55)); }
.nav-item:active { transform: translateY(1px); }
.chat-fab { background: var(--leaf) !important; box-shadow: 0 12px 28px -10px rgba(230,184,79,0.6), 0 0 0 1px rgba(138,90,26,0.4); }

.home-greeting-text { color: var(--ink-grey); }
.home-user-name { color: var(--gold-hi); }
.home-rashi-badge { color: var(--saffron); }
.home-chat-cta { color: #2A1B06; }
.home-chat-cta strong, .home-chat-cta span { color: #2A1B06; }
.home-chat-cta-icon { color: #2A1B06; }
.energy-dot { box-shadow: 0 0 8px 1px currentColor; }
.energy-good { color: var(--success); } .energy-ok { color: var(--saffron); } .energy-caution { color: var(--copper-hi); }
.energy-pill .energy-area { color: var(--ivory); }
.home-tip { font-family: var(--font-display); font-weight: 600; color: var(--gold-hi); }
.home-tip-source { color: var(--ink-muted); }

.payment-plan-title { color: var(--ivory); }
.payment-plan-price { color: var(--gold-hi); font-weight: 700; }
.payment-plan-rate { color: var(--ink-grey); }
.payment-plan-badge { background: var(--leaf); color: #2A1B06; font-weight: 700; }
.sku-card { border-color: var(--border-emphasis) !important; background: color-mix(in srgb, var(--gold) 5%, var(--bg-card)); }
.sku-card--wanted { border-color: var(--gold) !important; box-shadow: 0 0 0 3px var(--gold-glow); }
.sku-card-title, .sku-cta-title { color: var(--gold-hi); font-family: var(--font-display); font-weight: 700; }
.sku-card-price, .sku-cta-price { color: var(--gold-hi); font-weight: 700; }
.sku-card-desc, .payment-group-label, .payment-policy { color: var(--ink-grey); }
.sku-cta { border: var(--leaf-edge); background: var(--leaf-soft); }
.artifact-section { background: var(--bg-card); border: 1px solid var(--sumi); }
.payment-plan:active { transform: scale(0.99); }

.onboarding-story-kicker { color: var(--saffron) !important; font-family: var(--font-accent); font-style: italic; }
.onboarding-hero-icon { color: var(--gold); filter: drop-shadow(0 0 22px rgba(230,184,79,0.5)); }
.onboarding-service-icon { color: var(--saffron); }
.onboarding-proof-icon { color: var(--gold-hi); }
.onboarding-story-badge { background: color-mix(in srgb, var(--gold) 9%, transparent) !important; border: 1px solid var(--border-emphasis) !important; color: var(--saffron) !important; }
.wizard-dot { background: var(--ink-muted); transition: all 250ms ease; }
.wizard-dot.active, .wizard-dot.is-active, .wizard-dot.current { background: var(--gold); box-shadow: 0 0 12px 2px rgba(230,184,79,0.6); transform: scale(1.25); }
.wizard-count { color: var(--ink-grey); }
.onboard-gender-pill { background: var(--panel); border: 1px solid var(--sumi); color: var(--ivory); border-radius: 14px; }
.onboard-gender-option input:checked + .onboard-gender-pill { background: var(--leaf-soft); border-color: var(--border-emphasis); color: var(--gold-hi); }
.onboard-precision-label { color: var(--gold-hi); font-family: var(--font-display); }
.onboard-precision-pill { background: var(--panel); border: 1px solid var(--sumi); color: var(--ink-grey); border-radius: 14px; }
.onboard-precision-option input:checked + .onboard-precision-pill { background: var(--leaf-soft); border-color: var(--border-emphasis); color: var(--gold-hi); }
.onboard-precision-note { color: var(--ink-muted); }

/* AstroVidya trust band (added in index.html) */
.av-trust-band { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 16px; border-radius:16px; background: var(--leaf-soft), var(--ink-800); border: var(--leaf-edge); box-shadow: var(--card-shadow); }
.av-guru-avatar { width:44px; height:44px; border-radius:50%; flex:0 0 auto; color: var(--gold); background: radial-gradient(circle at 50% 35%, rgba(230,184,79,0.25), transparent 70%), var(--ink-700); border: var(--leaf-edge); display:flex; align-items:center; justify-content:center; box-shadow: 0 0 18px -6px rgba(230,184,79,0.6); }
.av-guru-name { font-family: var(--font-display); font-weight:700; color: var(--ivory); line-height:1.2; }
.av-guru-sub { font-size:11.5px; color: var(--ink-muted); }
.av-trust-metrics { display:flex; gap:14px; width:100%; margin-top:4px; padding-top:10px; border-top:1px solid var(--sumi); }
.av-trust-metric { flex:1; text-align:center; }
.av-trust-metric b { display:block; font-family: var(--font-display); font-weight:700; color: var(--gold-hi); font-size:15px; }
.av-trust-metric span { font-size:10px; color: var(--ink-muted); letter-spacing:0.02em; }

/* ---------------------------------------------------------------------------
   15. MISC + PERF/ACCESSIBILITY
   --------------------------------------------------------------------------- */
#toast { background: var(--ink-700) !important; border: var(--leaf-edge) !important; color: var(--ivory) !important; }
hr { border-color: var(--sumi) !important; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: rgba(230,184,79,0.22); border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }

div[id^="view-"]:not(.hidden) { animation: avViewIn 380ms cubic-bezier(0.22,1,0.36,1) both; }
@keyframes avViewIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
    body::after { animation: none; opacity:.5; }
}
/* budget tier (app.js sets <html class="perf-lite"> on low deviceMemory / slow net) */
.perf-lite body::after, .perf-lite #app::after,
.perf-lite .astro-primary-btn::after, .perf-lite .ask-guru-btn::after,
.perf-lite .loading-spinner::after { display: none !important; }
.perf-lite *, .perf-lite *::before { animation: none !important; }
/* FUNCTIONAL feedback must survive the budget tier — a frozen spinner or
   frozen typing dots reads as "app hung" on exactly these devices. */
.perf-lite .loading-star-svg,
.perf-lite .loading-spinner svg { animation: spin-slow 2.5s linear infinite !important; }
.perf-lite .typing-indicator .dot,
.perf-lite .loading-dot { animation: pulse-dot 1.4s ease-in-out infinite !important; }
.perf-lite .loading-step-row.step-active .loading-step-dot { animation: avPulse 1.2s ease-in-out infinite !important; }

@media (min-width: 768px) {
    #app { background: color-mix(in srgb, var(--ink-900) 82%, transparent); }
    header#header { background: color-mix(in srgb, var(--ink-900) 90%, transparent); }
}

/* ---------------------------------------------------------------------------
   Place autocomplete (.av-suggest) — dropdown under #input-pob / #match-pob.
   Solid ground: --panel is translucent in dark theme, so layer it over the
   page ground to avoid text bleeding through from behind the dropdown.
   --------------------------------------------------------------------------- */
.av-suggest-anchor { position: relative; }
.av-suggest {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 60;
    background-color: var(--bg-page);
    background-image: linear-gradient(var(--panel), var(--panel));
    border: 1px solid var(--sumi);
    border-radius: 10px;
    box-shadow: var(--card-shadow);
    max-height: 264px;
    overflow-y: auto;
}
.av-suggest.hidden { display: none; }
.av-suggest-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    color: var(--ivory);
    border-bottom: 1px solid var(--sumi-soft);
}
.av-suggest-item:last-child { border-bottom: none; }
.av-suggest-item:hover,
.av-suggest-item.av-suggest-active {
    background: var(--panel-2);
    color: var(--gold-hi);
}
.av-suggest-state {
    color: var(--ink-muted);
    font-size: 0.85em;
    white-space: nowrap;
}
.av-suggest-item:hover .av-suggest-state,
.av-suggest-item.av-suggest-active .av-suggest-state { color: var(--gold-hi); }

/* ---------------------------------------------------------------------------
   Fixed-header clearance (bug: content slid under the header)
   The header is min-height 66px (~67px with border), but the `pt-16` utility
   resolves to 60px at this root font-size — and on the kundli/horoscope/
   matchmaking/panchang/dasha views a co-located `p-4` was overriding the top
   padding down to 16px entirely, hiding the user's name + rashi behind the bar.
   Pin an explicit clearance here (cinematic.css loads last, so it wins).
--------------------------------------------------------------------------- */
#view-kundli,
#view-horoscope,
#view-home,
#view-matchmaking,
#view-panchang,
#view-dasha,
#view-reading,
#view-artifact {
    padding-top: 78px;
}

/* ===========================================================================
   HOME — "panchang page" redesign
   Problem it fixes: seven equal-weight cards, four identical gold ALL-CAPS
   eyebrows, four pills that all read "अच्छा", a monospace 2x2 debug grid and a
   shouting gold slab. Nothing said where to look.
   Direction: read like the Kalnirnay panchang page that hangs in an Indian
   home — one large verdict for the day marked with a gold rubric hairline, a
   dense single almanac line, then silence. Gold is spent ONCE.
   =========================================================================== */

.home-container {
    max-width: 34rem;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- ZONE 1: the spotlight. The only large type on the screen. ----------- */
.av-today {
    position: relative;
    padding: 30px 0 26px 20px;
    cursor: pointer;
}
/* the rubric: a single gold hairline, brightest at the top, fading down */
.av-today::before {
    content: '';
    position: absolute;
    left: 0; top: 32px; bottom: 30px;
    width: 2px;
    background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 22%, transparent 100%);
    border-radius: 2px;
}
.av-today__eyebrow {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    color: var(--ink-muted, rgba(248, 242, 230, 0.5));
    margin: 0 0 10px;
}
.av-today__eyebrow span:last-child { color: var(--ivory); font-weight: 600; }

.av-today__verdict {
    font-family: var(--font-display);
    /* the one dramatic move on the page */
    font-size: clamp(1.5rem, 6.2vw, 2rem);
    font-weight: 500;
    line-height: 1.34;
    letter-spacing: -0.005em;
    color: var(--ivory);
    margin: 0;
    text-wrap: pretty;
}
.av-today__verdict::first-line { color: var(--gold-hi); }

.av-today__meta {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin: 16px 0 0;
}
[data-theme="dark"] .av-today__meta,
:root:not([data-theme="light"]) .av-today__meta { color: rgba(230, 184, 79, 0.62); }

/* --- ZONE 2: almanac strip. Hairlines, not boxes. ------------------------ */
.av-almanac {
    border-top: 1px solid var(--sumi);
    border-bottom: 1px solid var(--sumi);
    padding: 14px 0;
    cursor: pointer;
}
.av-almanac__row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin: 0;
}
.av-almanac__row > div {
    padding: 0 10px;
    min-width: 0;
    border-left: 1px solid var(--sumi);
}
.av-almanac__row > div:first-child { border-left: 0; padding-left: 0; }
.av-almanac dt {
    font-family: var(--font-body);
    font-size: 0.5625rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: rgba(248, 242, 230, 0.42);
    margin-bottom: 4px;
    white-space: nowrap;
}
.av-almanac dd {
    margin: 0;
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ivory);
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.av-almanac dd.av-num {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: -0.02em;
}

/* --- ZONE 3: one action. Gold spent only on the arrow. ------------------- */
.av-ask {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 22px 0 0;
    padding: 16px 18px;
    text-align: left;
    background: linear-gradient(135deg, rgba(230, 184, 79, 0.07), rgba(230, 184, 79, 0.02));
    border: 1px solid rgba(230, 184, 79, 0.22);
    border-radius: 14px;
    color: inherit;
    cursor: pointer;
    transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}
.av-ask:hover  { border-color: rgba(230, 184, 79, 0.45); background: rgba(230, 184, 79, 0.09); }
.av-ask:active { transform: scale(0.988); }
.av-ask:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.av-ask__body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.av-ask__body strong {
    font-family: var(--font-display);
    font-size: 1rem; font-weight: 600; color: var(--ivory);
}
.av-ask__body em {
    font-style: normal;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: rgba(248, 242, 230, 0.52);
}
.av-ask__arrow { flex: none; color: var(--gold); }

/* --- ZONE 4: quiet text row. No rings, no circles. ---------------------- */
.av-more {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 26px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--sumi);
}
.av-more button {
    background: none; border: 0; padding: 4px 0;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: rgba(248, 242, 230, 0.62);
    cursor: pointer;
    border-bottom: 1px solid transparent;
    transition: color 160ms ease, border-color 160ms ease;
}
.av-more button:hover { color: var(--gold-hi); border-bottom-color: var(--gold-deep); }
.av-more button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* light theme: keep the same restraint, warmer ink */
[data-theme="light"] .av-today__eyebrow { color: rgba(42, 32, 24, 0.55); }
[data-theme="light"] .av-today__verdict { color: #2A2018; }
[data-theme="light"] .av-today__verdict::first-line { color: #6B4A12; }
[data-theme="light"] .av-almanac dt { color: rgba(42, 32, 24, 0.5); }
[data-theme="light"] .av-almanac dd { color: #2A2018; }
[data-theme="light"] .av-ask__body strong { color: #2A2018; }
[data-theme="light"] .av-ask__body em { color: rgba(42, 32, 24, 0.6); }
[data-theme="light"] .av-more button { color: rgba(42, 32, 24, 0.7); }

@media (min-width: 640px) {
    .av-today { padding: 40px 0 32px 24px; }
    .home-container { padding: 0 28px; }
}

/* verdict fallback: a label, not a prediction — so it must not shout */
.av-today__verdict--muted {
    font-size: 1.0625rem !important;
    font-weight: 400;
    color: rgba(248, 242, 230, 0.55);
}
.av-today__verdict--muted::first-line { color: inherit; }
[data-theme="light"] .av-today__verdict--muted { color: rgba(42, 32, 24, 0.6); }

/* day strength — the engine's own star_rating, 1..5. Replaces four fake pills. */
.av-today__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
}
.av-today__footer .av-today__meta { margin: 0; }
.av-strength { display: inline-flex; gap: 5px; flex: none; }
.av-strength__dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: rgba(248, 242, 230, 0.16);
}
.av-strength__dot.is-on { background: var(--gold); }
[data-theme="light"] .av-strength__dot { background: rgba(42, 32, 24, 0.16); }
[data-theme="light"] .av-strength__dot.is-on { background: #B8860B; }

/* --- ZONE 3: the timing spine. Ledger rows, not cards. ------------------- */
.av-dasha {
    margin: 22px 0 0;
    padding: 0 0 18px;
    border-bottom: 1px solid var(--sumi);
    cursor: pointer;
}
.av-dasha__label {
    font-family: var(--font-body);
    font-size: 0.5625rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: rgba(248, 242, 230, 0.42);
    margin: 0 0 10px;
}
.av-dasha__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
}
.av-dasha__name {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ivory);
}
.av-dasha__span {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: -0.01em;
    color: rgba(248, 242, 230, 0.45);
    white-space: nowrap;
}
/* the antardasha is inside the mahadasha — indent says so */
.av-dasha__row.is-sub { padding-left: 14px; position: relative; }
.av-dasha__row.is-sub::before {
    content: '';
    position: absolute;
    left: 2px; top: 0.7em;
    width: 6px; height: 1px;
    background: var(--gold-deep);
}
.av-dasha__row.is-sub .av-dasha__name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(248, 242, 230, 0.72);
}
[data-theme="light"] .av-dasha__label { color: rgba(42, 32, 24, 0.5); }
[data-theme="light"] .av-dasha__name { color: #2A2018; }
[data-theme="light"] .av-dasha__span { color: rgba(42, 32, 24, 0.5); }
[data-theme="light"] .av-dasha__row.is-sub .av-dasha__name { color: rgba(42, 32, 24, 0.75); }

/* ---------------------------------------------------------------------------
   `.hidden` must actually hide.
   tailwind.css declares `.hidden{display:none}` FIRST, so any later
   equal-specificity component rule carrying a display won the cascade — e.g.
   `.chat-fab{display:flex}` in styles.css. Result: the chat FAB ignored every
   classList.add('hidden') in the app and floated over the splash, onboarding,
   loading, hooks and paywall views. Found by measuring computed style, not by
   reading the code: the element's class list said "hidden" the whole time.
   Higher-specificity force-show rules (#view-chat on desktop,
   body.chat-overlay-open …) still win, which is what we want.
   --------------------------------------------------------------------------- */
.hidden { display: none !important; }

/* Desktop: the same clearance, but it has to shout louder.
   styles.css's desktop grid declares `[id^="view-"] { padding-top: 16px
   !important }` on the assumption that the header is in flow (it sets
   `position: sticky` there). A later equal-specificity `header#header` rule
   outside any media query wins the cascade and keeps the header `fixed`, so
   grid row 1 collapses and EVERY view starts ~6px from the top — the user's
   greeting sat behind the header bar at >=768px. Measured, not assumed:
   header bottom 67px vs eyebrow top 62px. */
@media (min-width: 768px) {
    #view-kundli,
    #view-horoscope,
    #view-home,
    #view-matchmaking,
    #view-panchang,
    #view-dasha,
    #view-reading,
    #view-artifact {
        padding-top: 78px !important;
    }
}