/* =====================================================================
   Jyotish AI - shared design system
   Night-sky shell (navy/indigo), ivory reading surfaces, gold for actions.
   Signature motif: the North Indian chart (square, diagonals, diamond).
   Page-specific styles go in their own files (chat.css, kundali.css, ...).
   ===================================================================== */

:root {
    --night-950: #0B1026;
    --night-900: #121A3A;
    --indigo-800: #1E1B4B;
    --indigo-600: #3B3486;
    --gold-500: #C9A227;
    --gold-400: #E0BE4A;
    --gold-200: #F1DFA0;
    --ivory: #FAF8F2;
    --ivory-deep: #F1EDE1;
    --ink: #1B1F33;
    --ink-soft: #4A4F68;
    --line: #E3DDCB;
    --danger: #B42318;
    --danger-bg: #FDECEA;
    --success: #1F6F4A;
    --success-bg: #E7F4EC;

    --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --font-body: "Mukta", "Noto Sans Devanagari", "Segoe UI", system-ui, sans-serif;

    --radius-lg: 18px;
    --radius-md: 12px;
    --radius-sm: 8px;
    --shadow-panel: 0 1px 2px rgba(11, 16, 38, .06), 0 12px 32px rgba(11, 16, 38, .10);
    --focus: 0 0 0 3px rgba(224, 190, 74, .55);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ink);
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: .005em; }

a { color: var(--indigo-600); text-underline-offset: 3px; }
a:hover { color: var(--indigo-800); }

:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 4px; }

.skip-link {
    position: absolute; left: 1rem; top: -3rem; z-index: 1000;
    background: var(--gold-400); color: var(--night-950); padding: .5rem 1rem; border-radius: var(--radius-sm);
}
.skip-link:focus { top: 1rem; }

/* ---------- App shell (signed-in pages) ---------- */
.app-body {
    background-color: var(--night-950);
    background-image:
        radial-gradient(1200px 600px at 85% -10%, rgba(59, 52, 134, .55), transparent 60%),
        radial-gradient(900px 500px at -10% 30%, rgba(30, 27, 75, .7), transparent 60%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='%23F1DFA0'%3E%3Ccircle cx='18' cy='32' r='.8' opacity='.5'/%3E%3Ccircle cx='132' cy='14' r='.6' opacity='.35'/%3E%3Ccircle cx='200' cy='88' r='1' opacity='.45'/%3E%3Ccircle cx='64' cy='150' r='.7' opacity='.3'/%3E%3Ccircle cx='170' cy='196' r='.6' opacity='.4'/%3E%3Ccircle cx='96' cy='222' r='.9' opacity='.3'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
    min-height: 100vh;
}
.app-shell { display: flex; flex-direction: column; min-height: 100vh; }
.app-main { flex: 1; padding: 2rem 0 3.5rem; outline: none; }

.app-header { border-bottom: 1px solid rgba(241, 223, 160, .14); }
.app-header .navbar { padding-top: .85rem; padding-bottom: .85rem; }

.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; margin-right: 2rem; }
.brand-mark { width: 34px; height: 34px; }
.brand-mark rect, .brand-mark path { fill: none; stroke: var(--gold-400); stroke-width: 1.6; }
.brand-name { font-family: var(--font-display); font-size: 1.55rem; font-weight: 700; color: var(--ivory); }

.app-header .nav-link { color: rgba(250, 248, 242, .78); font-weight: 500; padding: .45rem .8rem !important; border-radius: var(--radius-sm); }
.app-header .nav-link:hover { color: var(--ivory); background: rgba(250, 248, 242, .06); }
.app-header .nav-link.active { color: var(--gold-400); }

.header-actions { display: flex; align-items: center; gap: .75rem; }
.icon-button {
    position: relative; width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid rgba(241, 223, 160, .25); background: transparent; display: grid; place-items: center;
}
.icon-button svg { width: 20px; height: 20px; fill: var(--ivory); }
.badge-dot { position: absolute; top: 7px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold-400); box-shadow: 0 0 0 2px var(--night-950); }

.user-chip {
    display: inline-flex; align-items: center; gap: .5rem; padding: .25rem .8rem .25rem .25rem;
    border-radius: 999px; border: 1px solid rgba(241, 223, 160, .25); background: transparent; color: var(--ivory);
}
.avatar {
    width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
    background: var(--gold-500); color: var(--night-950); font-weight: 700; font-size: .85rem;
}
.dropdown-menu { border-radius: var(--radius-md); border-color: var(--line); box-shadow: var(--shadow-panel); }
.dropdown-item { font-weight: 500; }
input.dropdown-item { text-align: left; }

.notify-menu { width: 320px; padding: .5rem 0; }
.notify-heading { font-weight: 600; padding: .25rem 1rem .5rem; margin: 0; border-bottom: 1px solid var(--line); }
.notify-item { display: grid; gap: .1rem; padding: .65rem 1rem; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--ivory-deep); }
.notify-item:hover { background: var(--ivory); color: var(--ink); }
.notify-item.is-unread { box-shadow: inset 3px 0 0 var(--gold-500); }
.notify-title { font-weight: 600; }
.notify-body { font-size: .9rem; color: var(--ink-soft); }
.notify-time { font-size: .8rem; color: var(--ink-soft); }
.notify-empty { padding: 1rem; margin: 0; color: var(--ink-soft); }
.notify-clear { width: 100%; text-align: center; font-size: .9rem; }

.app-footer { padding: 1.75rem 0 2.25rem; color: rgba(250, 248, 242, .62); font-size: .9rem; border-top: 1px solid rgba(241, 223, 160, .1); }
.app-footer p { max-width: 72ch; margin-bottom: .35rem; }
.app-footer a { color: var(--gold-200); }

/* ---------- Page headings on the night background ---------- */
.page-head { margin-bottom: 1.75rem; max-width: 70ch; }
.page-title { color: var(--ivory); font-size: clamp(2rem, 3.2vw, 2.75rem); margin-bottom: .35rem; }
.page-lead { color: rgba(250, 248, 242, .78); margin: 0; }
.section-title { color: var(--ivory); font-size: 1.75rem; margin-bottom: 1rem; }

/* ---------- Panels (ivory reading surfaces) ---------- */
.panel {
    background: var(--ivory); border-radius: var(--radius-lg); padding: 1.75rem;
    box-shadow: var(--shadow-panel); border: 1px solid rgba(241, 223, 160, .35);
}
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.panel-title { font-size: 1.6rem; margin-bottom: 1rem; color: var(--indigo-800); }
.panel-head .panel-title { margin-bottom: 0; }
.panel-text { color: var(--ink-soft); }

/* ---------- Forms ---------- */
.field { margin-bottom: 1.1rem; }
.form-label { font-weight: 600; color: var(--ink); margin-bottom: .35rem; }
.form-control, .form-select {
    border-radius: var(--radius-sm); border-color: #CFC7B0; background-color: #fff; padding: .6rem .8rem; font-size: 1rem;
}
.form-control:focus, .form-select:focus { border-color: var(--gold-500); box-shadow: var(--focus); }
.form-control[readonly] { background-color: var(--ivory-deep); }
.field-hint { font-size: .9rem; color: var(--ink-soft); margin: .35rem 0 0; }
.field-error { display: block; font-size: .9rem; color: var(--danger); margin-top: .3rem; font-weight: 500; }
.form-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }
.small-link { font-size: .92rem; }

.choice-row { border: 0; padding: 0; margin: 0; }
.choice-row legend { font-size: 1rem; float: none; }
.choice-group { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.choice-group input[type=radio] { accent-color: var(--indigo-600); margin-right: .4rem; }
.choice-group label { cursor: pointer; }
.agree input[type=checkbox], .form-check input[type=checkbox] { accent-color: var(--indigo-600); width: 1.1rem; height: 1.1rem; margin-right: .5rem; vertical-align: -2px; }

/* ---------- Buttons ---------- */
.btn { border-radius: 999px; font-weight: 600; padding: .6rem 1.4rem; }
.btn-lg { padding: .8rem 1.8rem; font-size: 1.05rem; }
.btn-sm { padding: .3rem .9rem; font-size: .9rem; }
.btn-gold { background: var(--gold-500); color: var(--night-950); border: 1px solid var(--gold-500); }
.btn-gold:hover, .btn-gold:focus { background: var(--gold-400); border-color: var(--gold-400); color: var(--night-950); }
.btn-outline-gold { border: 1px solid var(--gold-400); color: var(--gold-400); background: transparent; }
.btn-outline-gold:hover { background: rgba(224, 190, 74, .12); color: var(--gold-200); }
.btn-outline-ink { border: 1px solid #BDB4A0; color: var(--ink); background: #fff; }
.btn-outline-ink:hover { border-color: var(--indigo-600); color: var(--indigo-800); background: #fff; }
.btn.is-busy { opacity: .7; pointer-events: none; }

/* ---------- Alerts ---------- */
.app-alert { border-radius: var(--radius-md); padding: .85rem 1.1rem; margin-bottom: 1.25rem; font-weight: 500; border: 1px solid transparent; }
.app-alert-success { background: var(--success-bg); color: var(--success); border-color: #BFE2CD; }
.app-alert-error { background: var(--danger-bg); color: var(--danger); border-color: #F5C2BD; }

/* ---------- Empty states ---------- */
.empty-state { background: rgba(250, 248, 242, .06); border: 1px dashed rgba(241, 223, 160, .35); border-radius: var(--radius-lg); padding: 2.5rem 2rem; color: rgba(250, 248, 242, .82); text-align: center; }
.empty-chart { width: 96px; height: 96px; margin-bottom: 1rem; }
.empty-chart rect, .empty-chart path { fill: none; stroke: var(--gold-400); stroke-width: 1.4; }
.empty-title { color: var(--ivory); font-size: 1.6rem; }
.empty-state p { max-width: 46ch; margin: .5rem auto 0; }

/* ---------- Auth layout ---------- */
.auth-body { background: var(--ivory); min-height: 100vh; }
.auth-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: 100vh; }
.auth-sky {
    background-color: var(--night-950);
    background-image: radial-gradient(700px 500px at 30% 20%, rgba(59, 52, 134, .6), transparent 65%);
    color: var(--ivory); display: flex; align-items: center; justify-content: center; padding: 3rem;
}
.auth-sky-inner { max-width: 400px; }
.auth-brand { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; color: var(--gold-200); margin-bottom: 2rem; }
.sky-chart { width: 100%; max-width: 340px; display: block; }
.sky-chart rect, .sky-chart path { fill: none; stroke: var(--gold-400); stroke-width: 1.2; }
.sky-houses text { fill: rgba(241, 223, 160, .55); font-family: var(--font-display); font-size: 15px; text-anchor: middle; }
.auth-quote { margin-top: 2rem; font-family: var(--font-display); font-size: 1.45rem; line-height: 1.35; color: rgba(250, 248, 242, .88); }

.auth-main { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 3rem 1.5rem; }
.auth-card { width: 100%; max-width: 440px; }
.auth-title { font-size: 2.4rem; color: var(--indigo-800); margin-bottom: .5rem; }
.auth-lead { color: var(--ink-soft); margin-bottom: 1.75rem; }
.auth-switch { margin-top: 1.5rem; text-align: center; color: var(--ink-soft); }
.auth-footnote { margin-top: 2.5rem; font-size: .85rem; color: var(--ink-soft); text-align: center; }

@media (max-width: 991.98px) {
    .auth-layout { grid-template-columns: 1fr; }
    .auth-sky { padding: 1.5rem; justify-content: flex-start; }
    .auth-sky-inner { display: flex; align-items: center; gap: 1rem; max-width: none; }
    .auth-brand { margin: 0; font-size: 1.5rem; }
    .sky-chart, .auth-quote { display: none; }
}

/* ---------- Dashboard ---------- */
.hero {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.5rem; align-items: center;
    padding: 1.5rem 0 3rem;
}
.hero-title { color: var(--ivory); font-size: clamp(2.6rem, 5vw, 4rem); line-height: 1.05; margin-bottom: 1rem; }
.hero-lead { color: rgba(250, 248, 242, .82); font-size: 1.15rem; max-width: 56ch; }
.hero-select { max-width: 420px; margin-top: 1.5rem; }
.hero-select .form-label { color: var(--gold-200); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: .5rem; }
.hero-note { color: var(--gold-200); margin-top: 1rem; }

.hero-chart { position: relative; justify-self: end; width: 100%; max-width: 380px; }
.hero-chart-svg { width: 100%; display: block; }
.hero-chart-svg rect, .hero-chart-svg path { fill: rgba(250, 248, 242, .03); stroke: var(--gold-400); stroke-width: 1.2; }
.lagna-mark { fill: var(--gold-200); font-family: var(--font-display); font-size: 15px; text-anchor: middle; font-style: italic; }
.hero-chart-caption { margin-top: 1rem; border-left: 2px solid var(--gold-500); padding-left: 1rem; }
.caption-name { font-family: var(--font-display); font-size: 1.5rem; color: var(--ivory); margin: 0; }
.caption-line { color: rgba(250, 248, 242, .75); margin: 0; }
.caption-warn { color: var(--gold-200); font-size: .92rem; margin: .5rem 0 0; }

.services { margin-bottom: 2.5rem; }
.service-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 1rem; }
.service {
    display: flex; flex-direction: column; gap: .35rem; padding: 1.4rem; border-radius: var(--radius-md);
    text-decoration: none; color: rgba(250, 248, 242, .78); border: 1px solid rgba(241, 223, 160, .18);
    background: rgba(250, 248, 242, .03);
}
.service:hover { border-color: rgba(241, 223, 160, .5); color: rgba(250, 248, 242, .9); }
.service-primary { background: var(--ivory); color: var(--ink-soft); border-color: transparent; }
.service-primary:hover { color: var(--ink); }
.service-glyph { font-size: 1.6rem; color: var(--gold-400); line-height: 1; }
.service-primary .service-glyph { color: var(--gold-500); }
.service-name { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; color: var(--ivory); }
.service-primary .service-name { color: var(--indigo-800); }
.service-text { font-size: .95rem; }

@media (max-width: 991.98px) {
    .hero { grid-template-columns: 1fr; }
    .hero-chart { justify-self: start; max-width: 300px; }
    .service-grid { grid-template-columns: 1fr 1fr; }
    .service-primary { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
    .service-grid { grid-template-columns: 1fr; }
    .panel { padding: 1.25rem; }
    .hero-actions .btn { width: 100%; }
}

/* ---------- Birthplace search ---------- */
.place-search { position: relative; }
.place-suggestions {
    position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% - .9rem);
    list-style: none; margin: 0; padding: .35rem 0; background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius-sm); box-shadow: var(--shadow-panel); max-height: 300px; overflow-y: auto;
}
.place-suggestions li { padding: .55rem .9rem; cursor: pointer; }
.place-suggestions li[aria-selected=true], .place-suggestions li:hover { background: var(--ivory-deep); }
.place-suggestions .sugg-name { font-weight: 600; }
.place-suggestions .sugg-meta { font-size: .88rem; color: var(--ink-soft); }
.place-details { border: 1px solid var(--line); border-radius: var(--radius-md); padding: .75rem 1rem; background: #fff; }
.place-details summary { cursor: pointer; font-weight: 600; }

/* ---------- Birth profile list ---------- */
.profile-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.profile-row {
    display: flex; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap;
    background: var(--ivory); border-radius: var(--radius-md); padding: 1.25rem 1.4rem; border: 1px solid var(--line);
}
.profile-row.is-active { border-color: var(--gold-500); box-shadow: inset 4px 0 0 var(--gold-500); }
.profile-name { font-size: 1.45rem; margin: 0; color: var(--indigo-800); display: flex; align-items: center; gap: .6rem; }
.active-tag { font-family: var(--font-body); font-size: .78rem; font-weight: 600; color: var(--night-950); background: var(--gold-200); padding: .1rem .55rem; border-radius: 999px; }
.profile-person { margin: 0 0 .5rem; color: var(--ink-soft); }
.profile-facts { margin: 0; display: grid; gap: .15rem; font-size: .95rem; }
.profile-facts div { display: grid; grid-template-columns: 7.5rem 1fr; gap: .5rem; }
.profile-facts dt { font-weight: 500; color: var(--ink-soft); }
.profile-facts dd { margin: 0; }
.profile-actions { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; }

@media (max-width: 575.98px) {
    .profile-facts div { grid-template-columns: 1fr; gap: 0; }
    .profile-actions { flex-direction: row; align-items: center; }
}

@media (max-width: 575.98px) {
    .hero-chart { max-width: 240px; }
}

/* ---------- Email code sign-in ---------- */
.otp-input { font-size: 1.6rem; letter-spacing: .5em; text-align: center; font-variant-numeric: tabular-nums; padding: .55rem .5rem .55rem 1rem; }
.otp-actions { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.otp-actions .btn-link { padding-left: 0; padding-right: 0; color: var(--indigo-600); }
.otp-actions .btn-link:disabled { color: var(--ink-soft); opacity: 1; text-decoration: none; }
.dev-code { background: #FFF7DD; border: 1px dashed var(--gold-500); border-radius: var(--radius-sm); padding: .6rem .9rem; font-size: .92rem; }


/* ---------- Shared list pages (conversation history, saved Kundalis) ---------- */
.page-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; max-width: none; }
.history-search { display: flex; gap: .6rem; max-width: 560px; margin-bottom: 1.5rem; }
.history-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.history-row {
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    background: var(--ivory); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1rem 1.25rem;
}
.history-main { flex: 1; min-width: 0; }
.history-title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--indigo-800); text-decoration: none; }
.history-title:hover { text-decoration: underline; }
.history-meta { margin: .15rem 0 .35rem; font-size: .9rem; color: var(--ink-soft); }
.history-rename summary { font-size: .9rem; color: var(--indigo-600); cursor: pointer; width: fit-content; }
.rename-row { display: flex; gap: .5rem; margin-top: .5rem; max-width: 460px; }
.history-actions { display: flex; align-items: flex-start; gap: .4rem; }