/* JyotishApp web: mobile-first, Telugu-first (spec A8, E5 accessibility: 4.5:1 contrast, large-text mode). */

/*
 * Themes (owner request, 10 Oct 2026), chosen in Settings and set as html[data-theme]:
 *   night   (default) Sampathkaree brand: midnight and navy, gold as the accent, royal purple glow
 *   day     the same brand on ivory: navy text, royal purple accent, gold only for decoration
 *   classic the original warm parchment look (follows the device's dark mode)
 * Every colour below is a token; text tokens keep at least 4.5:1 contrast on their surfaces (spec E5).
 */
:root {
    --bg: #030712;
    --surface: #0a1a36;
    --surface-2: #10244a;
    --text: #f4f1ea;
    --muted: #a9b4c8;
    --heading: #e8c76a;
    --accent: #e8c76a;
    --accent-2: #d4a83f;
    --accent-ink: #1a1203;
    --border: #1f3157;
    --good: #7ad3a0;
    --mixed: #f5b971;
    --careful: #ff8f8f;
    --chip: #142a54;
    --glow: radial-gradient(1100px 520px at 85% -12%, rgb(75 42 120 / 0.38), transparent 70%),
            radial-gradient(800px 460px at -12% 4%, rgb(22 139 255 / 0.10), transparent 70%);
    --card-edge: inset 0 1px 0 rgb(232 199 106 / 0.14);
    --radius: 14px;
    --font: "Manrope", "Noto Sans Telugu", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-display: "Cinzel", "Mandali", "Noto Sans Telugu", Georgia, serif;
    --font-head: "Manrope", "Mandali", "Noto Sans Telugu", system-ui, sans-serif;
    --size: 16px;
    color-scheme: dark;
}

html[data-theme="day"] {
    --bg: #f8f7f3;
    --surface: #ffffff;
    --surface-2: #f1eee6;
    --text: #0b1630;
    --muted: #4a5570;
    --heading: #07152e;
    --accent: #4b2a78;
    --accent-2: #b8892a;
    --accent-ink: #ffffff;
    --border: #e2ddd0;
    --good: #1f6f3a;
    --mixed: #8a5a00;
    --careful: #a12a2a;
    --chip: #ede7f4;
    --glow: radial-gradient(1000px 420px at 85% -15%, rgb(212 168 63 / 0.16), transparent 70%);
    --card-edge: inset 0 2px 0 rgb(212 168 63 / 0.35);
    color-scheme: light;
}

html[data-theme="classic"] {
    --bg: #fbf7f0;
    --surface: #ffffff;
    --surface-2: #f4ece0;
    --text: #2a1a10;
    --muted: #6b5a4c;
    --heading: #7a2e0e;
    --accent: #7a2e0e;
    --accent-2: #b5651d;
    --accent-ink: #ffffff;
    --border: #e3d6c3;
    --good: #2e6b34;
    --mixed: #8a6a10;
    --careful: #a12a2a;
    --chip: #efe3d1;
    --glow: none;
    --card-edge: none;
    --radius: 12px;
    --font: "Noto Sans Telugu", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-display: "Mandali", "Noto Sans Telugu", system-ui, sans-serif;
    --font-head: var(--font-display);
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="classic"] {
        --bg: #17110c;
        --surface: #221a13;
        --surface-2: #2c2219;
        --text: #f2e8dc;
        --muted: #c2b2a1;
        --heading: #f0a868;
        --accent: #f0a868;
        --accent-2: #e08a3c;
        --accent-ink: #1a120c;
        --border: #3e3125;
        --good: #8fd19a;
        --mixed: #e6c56a;
        --careful: #ff9a8f;
        --chip: #34281d;
        color-scheme: dark;
    }
}

html { font-size: var(--size); }
html.large-text { --size: 19px; }
html[lang="te"] body { line-height: 1.7; }

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--glow), var(--bg);
    background-attachment: fixed;
    color: var(--text);
    font-family: var(--font);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-head); color: var(--heading); line-height: 1.25; margin: 0.6em 0 0.4em; font-weight: 700; }
h1 { font-family: var(--font-display); font-size: 1.55rem; font-weight: 600; letter-spacing: 0.02em; }
html[lang="te"] h1 { font-family: var(--font-head); letter-spacing: 0; }
/* Blazor focuses the page heading after navigation (for screen readers); no visible box for that. */
h1:focus, h1:focus-visible { outline: none; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; }
a { color: var(--accent); }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }

.shell { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 10px 16px; background: color-mix(in srgb, var(--surface) 88%, transparent); border-bottom: 1px solid var(--border);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.brand { font-family: var(--font-display); font-size: 1.2rem; color: var(--heading); text-decoration: none; font-weight: 600; letter-spacing: 0.04em; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.profile-switch { max-width: 9rem; }
.icon-link { font-size: 1.3rem; text-decoration: none; padding: 4px 6px; }

.content { flex: 1; width: 100%; max-width: 960px; margin: 0 auto; padding: 12px 16px 96px; }

.bottomnav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    background: color-mix(in srgb, var(--surface) 92%, transparent); border-top: 1px solid var(--border);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    padding-bottom: env(safe-area-inset-bottom);
}
.bottomnav a {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 8px 2px; color: var(--muted); text-decoration: none; font-size: 0.72rem; text-align: center;
}
.bottomnav a.active { color: var(--accent); font-weight: 700; box-shadow: inset 0 2px 0 var(--accent-2); }
.nav-icon { font-size: 1.15rem; line-height: 1; }

@media (min-width: 900px) {
    .bottomnav { position: static; order: -1; grid-auto-columns: auto; justify-content: center; border-top: 0; border-bottom: 1px solid var(--border); }
    .bottomnav a { flex-direction: row; font-size: 0.95rem; padding: 10px 14px; }
    .content { padding-bottom: 24px; }
}

.card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 14px 16px; margin: 12px 0; box-shadow: var(--card-edge);
}
.card h2:first-child, .card h3:first-child { margin-top: 0; }

.grid { display: grid; gap: 12px; }
@media (min-width: 640px) { .grid.two { grid-template-columns: 1fr 1fr; } .grid.three { grid-template-columns: repeat(3, 1fr); } }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }

.banner { padding: 10px 14px; border-radius: var(--radius); background: var(--surface-2); border-left: 4px solid var(--accent-2); margin: 10px 0; }
.banner.warn { border-left-color: var(--careful); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; padding: 0; list-style: none; }
.chip { background: var(--chip); border-radius: 999px; padding: 3px 10px; font-size: 0.85rem; }

.verdict { display: inline-block; padding: 2px 10px; border-radius: 999px; font-weight: 600; font-size: 0.9rem; }
.verdict.Good { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); }
.verdict.Mixed { background: color-mix(in srgb, var(--mixed) 18%, transparent); color: var(--mixed); }
.verdict.Careful { background: color-mix(in srgb, var(--careful) 15%, transparent); color: var(--careful); }

.score { display: inline-block; min-width: 2.2em; text-align: center; border-radius: 6px; padding: 0 6px; font-weight: 700; }
.score.p2, .score.p1 { color: var(--good); }
.score.z { color: var(--muted); }
.score.m1, .score.m2 { color: var(--careful); }

.areas { list-style: none; padding: 0; margin: 8px 0; }
.areas li { padding: 6px 0; border-bottom: 1px dashed var(--border); }
.areas li:last-child { border-bottom: 0; }
details summary { cursor: pointer; color: var(--accent); font-size: 0.85rem; }

table.data { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
table.data th, table.data td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
table.data th { color: var(--muted); font-weight: 600; }
.table-wrap { overflow-x: auto; }

.tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--border); margin: 8px 0; }
.tabs button { background: none; border: 0; padding: 8px 12px; color: var(--muted); border-bottom: 3px solid transparent; font: inherit; cursor: pointer; white-space: nowrap; }
.tabs button.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

label { display: block; font-weight: 600; margin: 12px 0 4px; }
input, select, textarea, button { font: inherit; }
input[type=text], input[type=number], input[type=date], input[type=time], input[type=email], input[type=password], input[type=tel], input[type=search], select, textarea {
    width: 100%; padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text);
}
.inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.inline > * { flex: 1 1 140px; }
.radio-row { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.radio-row label { font-weight: 400; display: inline-flex; align-items: center; gap: 6px; margin: 4px 0; }
.check { font-weight: 400; display: flex; gap: 8px; align-items: flex-start; }

.btn { display: inline-block; border: 0; border-radius: 10px; padding: 10px 18px; background: var(--accent); color: var(--accent-ink); cursor: pointer; text-decoration: none; font-weight: 700; }
.btn.secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.btn.danger { background: var(--careful); color: var(--accent-ink); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.link-button { background: none; border: 0; color: var(--accent); cursor: pointer; padding: 4px 6px; font-weight: 600; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0; }

.suggestions { list-style: none; margin: 4px 0 0; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.suggestions li button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 8px 10px; cursor: pointer; color: var(--text); }
.suggestions li + li { border-top: 1px solid var(--border); }
.suggestions li button:hover, .suggestions li button:focus { background: var(--surface-2); }

/* South Indian chart (spec A1: fixed signs, Meena top-left, clockwise) */
.chart { width: 100%; max-width: 360px; aspect-ratio: 1; }
.chart rect.cell { fill: var(--surface); stroke: var(--border); }
.chart rect.lagna { fill: var(--surface-2); }
.chart text { fill: var(--text); font-family: var(--font); }
.chart text.sign { fill: var(--muted); font-size: 7px; }
.chart text.graha { font-size: 9.5px; font-weight: 600; }
.chart rect.lagna { stroke: var(--accent-2); }
.chart text.title { fill: var(--heading); font-size: 11px; font-weight: 700; }
.charts { display: grid; gap: 12px; }
@media (min-width: 720px) { .charts { grid-template-columns: 1fr 1fr; } }

.rasi-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 85%); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.rasi-strip > .card { scroll-snap-align: start; margin: 0; }
@media (min-width: 900px) { .rasi-strip { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; } }

.month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.month .dow { text-align: center; font-size: 0.75rem; color: var(--muted); }
.month button.day { min-height: 64px; text-align: left; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); padding: 4px; cursor: pointer; font-size: 0.7rem; line-height: 1.25; }
.month button.day.today { border-color: var(--accent); border-width: 2px; }
.month button.day.sel { background: var(--surface-2); }
.month button.day .d { font-size: 0.95rem; font-weight: 700; }
.month button.day .fest { color: var(--accent); }

/* Blazor boot and error UI */
.boot { display: grid; place-items: center; min-height: 80vh; }
.loading-progress { position: relative; display: block; width: 8rem; height: 8rem; margin: 20vh auto 1rem auto; }
.loading-progress circle { fill: none; stroke: var(--border); stroke-width: 0.6rem; transform-origin: 50% 50%; transform: rotate(-90deg); }
.loading-progress circle:last-child { stroke: var(--accent); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition: stroke-dasharray 0.05s ease-in-out; }
.loading-progress-text { position: absolute; text-align: center; font-weight: bold; inset: calc(20vh + 3.25rem) 0 auto 0.2rem; }
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); }
#blazor-error-ui { background: #fff4d6; color: #0b1630; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

/* Phase 2 screens: 360°, timeline, remedies, KP, reports */
.wheel { width: 100%; max-width: 320px; display: block; margin: 0 auto; }
.wheel .ring { fill: none; stroke: var(--border); stroke-dasharray: 3 3; }
.wheel .ring.outer { stroke-dasharray: none; }
.wheel .area { fill: color-mix(in srgb, var(--accent) 18%, transparent); stroke: var(--accent); stroke-width: 1.5; }
.wheel .spoke { cursor: pointer; }
.wheel .spoke line { stroke: var(--border); }
.wheel .spoke text { font-size: 11px; fill: var(--muted); }
.wheel .spoke.on text { fill: var(--accent); font-weight: 700; }
.wheel .dot { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
.wheel .dot.Strong { fill: var(--good); }
.wheel .dot.Weak { fill: var(--careful); }
.why summary { cursor: pointer; color: var(--muted); font-size: 0.85rem; }
table.matrix td, table.matrix th { text-align: center; white-space: nowrap; }
table.matrix td:first-child, table.matrix th:first-child { text-align: left; }
table.matrix button.cell { background: none; border: 0; font: inherit; cursor: pointer; padding: 2px 4px; }
table.matrix .dots { color: var(--muted); font-size: 0.7rem; letter-spacing: -1px; }
.windows li { margin: 6px 0; }
.confirm { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.confirm button { font-size: 0.85rem; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; }
.confirm button { color: var(--text); }
.confirm button.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.caution.HighCare { border-left: 4px solid var(--careful); }
.caution.Care { border-left: 4px solid color-mix(in srgb, var(--careful) 60%, var(--mixed)); }
.caution.Watch { border-left: 4px solid var(--mixed); }
.verse .script { font-size: 1.05rem; }
.verse .iast { font-style: italic; color: var(--muted); }
.report-frame { width: 100%; height: 70vh; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.menu { list-style: none; padding: 0; }
.menu li a { display: block; padding: 12px 4px; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; }
.menu li a small { display: block; color: var(--muted); }

/* Muhurtham finder */
ul.windows .dots { color: var(--accent-2); margin-left: 0.4rem; letter-spacing: 1px; }

/* Prashna and consultation (spec 12.9) */
button.chip { border: 1px solid transparent; cursor: pointer; color: inherit; }
button.chip.hinted { border-color: var(--accent-2); }
button.chip.on, .chip.on { background: var(--accent); color: var(--accent-ink); }
.concern + .concern { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 8px; }
.verdict { font-size: 0.9rem; padding: 2px 8px; border-radius: 999px; background: var(--chip); white-space: nowrap; }
.verdict.v-Favourable { color: var(--good); }
.verdict.v-Mixed { color: var(--mixed); }
.verdict.v-Delayed, .verdict.v-Unfavourable { color: var(--careful); }
textarea { width: 100%; box-sizing: border-box; font: inherit; }

/* Weekly predictions */
ul.days { list-style: none; padding: 0; margin: 0; }
ul.days li { padding: 8px 0; border-bottom: 1px solid var(--border); }
ul.days li:last-child { border-bottom: 0; }
ul.days li.best strong { color: var(--good); }
ul.days li.avoid strong { color: var(--careful); }
ul.days .chip { margin-left: 6px; font-size: 0.75rem; }
.weeknav .inline { flex-wrap: wrap; gap: 6px; }

/* Ashtakavarga table */
table.av td, table.av th { text-align: center; padding: 3px 4px; font-size: 0.8rem; }
table.av tr.sav td.hi { background: color-mix(in srgb, var(--good) 20%, transparent); font-weight: 600; }
table.av tr.sav td.lo { background: color-mix(in srgb, var(--careful) 18%, transparent); }

/* Lo Shu grid on the calculators page */
.loshu { display: grid; grid-template-columns: repeat(3, 56px); gap: 4px; margin: 8px 0; }
.loshu div { border: 1px solid var(--border); border-radius: 6px; height: 48px; display: flex; align-items: center; justify-content: center; font-weight: 600; letter-spacing: 1px; }
.loshu div.missing { color: var(--muted); font-weight: 400; }

/* Choghadiya and hora lists in the panchangam card */
.chog h4 { margin: 10px 0 4px; font-size: 0.9rem; }
.chog-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 2px 12px; font-size: 0.85rem; }
.chog-list li span { color: var(--muted); margin-right: 6px; }
.chog-list li.good strong { color: var(--good); }
.chog-list li.bad strong { color: var(--careful); }

/* Ask an astrologer */
.q-text { white-space: pre-wrap; }
.chip.warn { border-color: var(--careful); color: var(--careful); }

/* Public home: today for each rasi */
.rasi-today { list-style: none; padding: 0; margin: 0; }
.rasi-today li { display: grid; grid-template-columns: 6.5rem auto 1fr; gap: 4px 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--border); }
.rasi-today li:last-child { border-bottom: 0; }
.rasi-today li.own .rasi-name { color: var(--accent); }
.rasi-today .rasi-name { font-weight: 700; }
@media (max-width: 480px) { .rasi-today li { grid-template-columns: 1fr auto; } .rasi-today li .small { grid-column: 1 / -1; } }
.welcome .actions { margin: 10px 0 0; }