/* Kundli Pro — form, buttons, tabs, tables, cards, alerts. */

/* ---------- form ---------- */

.birth-form {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 16px;
  margin: 0;
  min-width: 0;
}
.birth-form legend {
  font: 600 1.1rem var(--font-display);
  color: var(--accent);
  padding: 0 6px;
}
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

.field { margin: 0 0 14px; min-width: 0; position: relative; }
.field label:not(.check) { display: block; font-weight: 600; margin-bottom: 4px; }
.field input:not([type="checkbox"]):not([type="radio"]), .field select {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 10px 12px;
  min-height: 44px;
}
.field input:disabled { opacity: 0.55; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--error); }
.hint { margin: 4px 0 0; font-size: 0.85rem; color: var(--text-soft); }
.field-error { margin: 4px 0 0; font-size: 0.9rem; color: var(--error); font-weight: 600; }
.check { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-weight: 400; cursor: pointer; min-height: 32px; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }
.place-info { margin: 6px 0 0; font-size: 0.9rem; color: var(--ok); min-height: 1.2em; }
.offset-line { margin: -4px 0 12px; font-size: 0.92rem; color: var(--text-soft); }
.offset-hint {
  background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: 8px;
  padding: 10px 12px; margin: 0 0 14px; font-size: 0.92rem;
}
.offset-hint p { margin: 0 0 8px; }

.advanced { margin-top: 4px; border-top: 1px dashed var(--line); padding-top: 10px; }
.advanced summary { cursor: pointer; color: var(--accent); font-weight: 600; padding: 6px 0; min-height: 32px; }
.advanced[open] summary { margin-bottom: 10px; }

.form-actions { margin-top: 16px; display: flex; gap: 12px; flex-wrap: wrap; }
.form-error { color: var(--error); font-weight: 600; margin: 12px 0 0; }

/* ---------- autocomplete ---------- */

.ac-list {
  position: absolute; z-index: 5; left: 0; right: 0; top: 100%;
  margin: -2px 0 0; padding: 4px 0; list-style: none;
  background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: 8px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 15%);
  max-height: 300px; overflow-y: auto;
}
.place-field .ac-list { top: 76px; }
.ac-list li { padding: 10px 12px; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; }
.ac-list li[aria-selected="true"], .ac-list li:hover { background: var(--saffron-soft); }
.ac-hi { color: var(--text-soft); white-space: nowrap; }

/* ---------- buttons ---------- */

.btn {
  font: 600 1rem var(--font-body);
  border-radius: 8px;
  padding: 10px 18px;
  min-height: 44px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
}
.btn:hover { background: var(--saffron-soft); }
.btn:disabled { opacity: 0.6; cursor: progress; }
.btn-primary { background: var(--maroon); border-color: var(--maroon); color: #fff; }
.btn-primary:hover { background: var(--maroon-strong); }
.btn-ghost { border-color: var(--line-strong); color: var(--text); }
.btn-small { padding: 6px 12px; min-height: 36px; font-size: 0.92rem; }

/* ---------- report ---------- */

.report-head h2 { margin-bottom: 4px; }
.report-head h2:focus { outline: none; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.share-status { font-size: 0.9rem; margin: 4px 0 0; word-break: break-all; }

.alert {
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin: 12px 0;
}
.alert ul { margin: 0; padding-left: 1.1em; }

.tabs {
  display: flex; gap: 2px; overflow-x: auto; overflow-y: hidden;
  border-bottom: 2px solid var(--line);
  margin: 16px 0 0;
  scrollbar-width: thin;
}
.tabs [role="tab"] {
  font: 600 0.98rem var(--font-body);
  background: none; border: 0; color: var(--text-soft);
  padding: 10px 14px; min-height: 44px; cursor: pointer;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.tabs [role="tab"][aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent-2); }
.tab-panel { padding: 16px 0; }
.tab-panel:focus-visible { outline-offset: 4px; }

.cards { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .cards { grid-template-columns: 1fr 1fr; } }
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  min-width: 0;
}

table { border-collapse: collapse; width: 100%; }
.kv th, .kv td { text-align: left; vertical-align: top; padding: 6px 0; border-bottom: 1px solid var(--line); }
.kv th { font-weight: 600; color: var(--text-soft); width: 46%; padding-right: 12px; }
.kv tr:last-child th, .kv tr:last-child td { border-bottom: 0; }

.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.data th, .data td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.data thead th { background: var(--saffron-soft); color: var(--text); font-size: 0.88rem; position: sticky; top: 0; }
.data tbody th { font-weight: 600; }
.data .num { text-align: right; font-variant-numeric: tabular-nums; }
.row-lagna { background: color-mix(in srgb, var(--saffron-soft) 50%, transparent); }
.row-running { background: color-mix(in srgb, var(--saffron-soft) 70%, transparent); }

.badge {
  display: inline-block; font: 600 0.75rem var(--font-body);
  background: var(--accent-2); color: #1a0f08;
  border-radius: 999px; padding: 1px 8px; margin-left: 6px; vertical-align: middle;
}

.dasha { border-top: 1px solid var(--line); }
.dasha summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  padding: 10px 4px; cursor: pointer; min-height: 44px;
}
.dasha-lord { font-weight: 700; min-width: 6em; }
.dasha-dates { color: var(--text-soft); font-variant-numeric: tabular-nums; }
.dasha table { margin: 0 0 12px; }
.dasha .data td, .dasha .data th { white-space: normal; }

.segmented { border: 0; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.segmented legend { float: left; font-weight: 600; margin-right: 8px; padding: 0; }
.seg {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 6px 14px; cursor: pointer; min-height: 40px;
}
.seg:has(input:checked) { background: var(--saffron-soft); border-color: var(--accent-2); }
.seg input { accent-color: var(--accent); }

/* ---------- Kundli Milan ---------- */

.page-intro-wide { max-width: 1080px; }
.pair-forms { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .pair-forms { grid-template-columns: 1fr 1fr; } }
.settings-row { margin-top: 16px; }

.section-h { margin-top: 24px; }
.report > * + * { margin-top: 16px; }
.report > .section-h { margin-top: 28px; }
.cards > .card { margin: 0; }

.score-card { display: grid; gap: 8px 24px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 640px) { .score-card { grid-template-columns: minmax(200px, 280px) 1fr; } }
.score-gauge { max-width: 280px; margin: 0 auto; width: 100%; }
.gauge { width: 100%; height: auto; display: block; }
.gauge-track { stroke: var(--line); stroke-width: 16; stroke-linecap: round; }
.gauge-value { stroke: var(--accent-2); stroke-width: 16; stroke-linecap: round; }
.band-low .gauge-value { stroke: var(--error); }
.band-mid .gauge-value { stroke: var(--accent-2); }
.band-good .gauge-value, .band-top .gauge-value { stroke: var(--ok); }
.gauge-num { fill: var(--text); font: 700 40px var(--font-display); }
.gauge-of { fill: var(--text-soft); font-size: 12px; }
.band { font: 700 1.6rem var(--font-display); margin: 0 0 4px; }
.band.band-low { color: var(--error); }
.band.band-good, .band.band-top { color: var(--ok); }
.score-text h4 { margin-top: 12px; }
.concerns { list-style: none; padding: 0; margin: 0; }
.concerns li { padding: 6px 10px; border-radius: 8px; margin: 4px 0; }
.concerns li.bad { background: color-mix(in srgb, var(--error) 14%, transparent); }
.concerns li.ok { background: color-mix(in srgb, var(--ok) 12%, transparent); }
.ok-text { color: var(--ok); }
.bad-text { color: var(--error); }
.badge-ok { background: var(--ok); color: #fff; }
.badge-warn { background: var(--error); color: #fff; }

.koota-table td.meaning { white-space: normal; min-width: 12em; color: var(--text-soft); }
.koota-table tfoot th, .koota-table tfoot td { border-top: 2px solid var(--line-strong); border-bottom: 0; }

.two-col { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .two-col { grid-template-columns: 1fr 1fr; } }
.manglik-person h5 { margin: 8px 0 4px; font-size: 0.98rem; }
.manglik-person ul, .card ul { margin: 4px 0; padding-left: 1.2em; }

.chart-grid-4 { grid-template-columns: 1fr; }
@media (min-width: 600px) { .chart-grid-4 { grid-template-columns: 1fr 1fr; } }

/* ---------- Home ---------- */

.hero { text-align: center; max-width: 880px; margin: 8px auto 28px; }
.hero .lede { max-width: 640px; margin: 0 auto 20px; }
.hero-cards { display: grid; gap: 16px; grid-template-columns: 1fr; text-align: left; }
@media (min-width: 640px) { .hero-cards { grid-template-columns: 1fr 1fr; } }
.hero-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
  color: var(--text); text-decoration: none;
  border-top: 4px solid var(--accent-2);
}
.hero-card:hover { border-color: var(--accent-2); color: var(--text); }
.hero-card-title { font: 700 1.35rem var(--font-display); color: var(--accent); }
.hero-card-hi { color: var(--text-soft); }
.hero-card-cta { margin-top: auto; padding-top: 8px; font-weight: 600; color: var(--accent); }
.explainer { max-width: 880px; margin: 0 auto 28px; }
.faq { max-width: 880px; margin: 0 auto; }
.faq details { border-top: 1px solid var(--line); padding: 4px 0; }
.faq summary { cursor: pointer; font-weight: 600; padding: 10px 0; min-height: 44px; }
.faq details p { margin: 0 0 12px; color: var(--text-soft); }

/* ---------- Advanced Kundli tabs ---------- */

.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 20px; margin-bottom: 12px; }
.inline-field { margin: 0; min-width: 220px; }
.chart-grid-single { grid-template-columns: 1fr !important; }
.varga-table td, .varga-table th { text-align: center; padding: 6px 8px; }
.varga-table tbody th { text-align: left; }
.col-on { background: color-mix(in srgb, var(--saffron-soft) 70%, transparent); }
.av-table td, .av-table th { text-align: center; padding: 6px 8px; }
.av-table tbody th { text-align: left; }
.sav-row th, .sav-row td { border-top: 2px solid var(--line-strong); }
.sav-strong { color: var(--ok); }
.sav-weak { color: var(--error); }
.sav-chart { width: 100%; max-width: 560px; height: auto; display: block; margin: 0 auto; }
.bar-strong { fill: var(--ok); }
.bar-mid { fill: var(--accent-2); }
.bar-weak { fill: var(--error); }
.bar-val { fill: var(--text); font-size: 11px; }
.bar-lab { fill: var(--text-soft); font-size: 11px; }
.sav-line { stroke: var(--text-soft); stroke-dasharray: 4 4; }

.dasha-tree .dasha-children { margin-left: 14px; border-left: 2px solid var(--line); padding-left: 10px; }
.dasha-leaf { padding: 6px 4px; display: flex; flex-wrap: wrap; gap: 4px 12px; border-top: 1px solid var(--line); }
.level-name { margin: 6px 0 2px; }
.dasha-l1 summary, .dasha-l2 summary, .dasha-l3 summary { min-height: 36px; padding: 6px 4px; font-size: 0.95rem; }

.yogas { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .yogas { grid-template-columns: 1fr 1fr; } }
.yoga { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.yoga h4 { margin-bottom: 4px; }
.yoga p { margin: 0 0 6px; }
.yoga-adverse { border-color: color-mix(in srgb, var(--error) 50%, var(--line)); }
.badge-strong { background: var(--ok); color: #fff; }
.badge-moderate { background: var(--accent-2); color: #1a0f08; }
.badge-weak { background: var(--line-strong); color: var(--text); }
ul.plain { list-style: none; padding: 0; }
ul.plain li { margin-bottom: 10px; }
td.indent { padding-left: 28px; }
.predictions h4 { margin-top: 16px; }
.tag { font-size: 0.75rem; border: 1px solid var(--line-strong); border-radius: 4px; padding: 0 5px; color: var(--text-soft); }

/* ---------- header tools, profiles ---------- */

.site-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.site-header nav + .site-tools { margin-left: 0; }
.lang-switch { display: inline-flex; border: 1px solid rgb(255 255 255 / 45%); border-radius: 999px; overflow: hidden; }
.lang-switch button, .theme-toggle {
  font: 600 0.88rem var(--font-body); color: #f8e7d4; background: transparent; border: 0;
  padding: 6px 12px; min-height: 36px; cursor: pointer;
}
.lang-switch button[aria-pressed="true"] { background: #f8e7d4; color: var(--maroon); }
.theme-toggle { border: 1px solid rgb(255 255 255 / 45%); border-radius: 999px; min-width: 40px; font-size: 1.05rem; }
.site-header :focus-visible { outline-color: #fff; }

.profiles { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px dashed var(--line); }
.profile-pick { flex: 1 1 220px; }
.profile-status { flex-basis: 100%; margin: 0; min-height: 1.2em; }

/* ---------- Panchang, Learn, About ---------- */

.print-only { display: none; }
main.narrow { max-width: 820px; }
.prose { margin-top: 16px; line-height: 1.65; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: 6px; }
.panchang-form { margin: 8px 0 0; }
.panchang-form .grow { flex: 1 1 260px; }
.panchang-form .field-error { flex-basis: 100%; margin: 0; }
#panchang-out h2 { margin-top: 20px; }
.hero-cards { grid-template-columns: 1fr; }
@media (min-width: 640px) { .hero-cards { grid-template-columns: repeat(3, 1fr); } }
:root[lang="hi"] .hero-card-hi { display: none; }

/* Reserve the space of the script-built forms and results so the page does
   not jump when they appear (Lighthouse CLS). Measured form heights. */
#person, #groom, #bride { min-height: 856px; }
#panchang-out:empty { min-height: 900px; }
@media (min-width: 640px) {
  #person, #groom, #bride { min-height: 609px; }
  #panchang-out:empty { min-height: 560px; }
}

/* Phone header: brand and tools on one row, the nav on the next. */
@media (max-width: 899px) {
  .site-header .brand { order: 1; }
  .site-tools { order: 2; margin-left: auto; }
  .site-header nav { order: 3; flex-basis: 100%; }
}