/* ==========================================================================
   AstroDev — Chart Wheel & Kundli Styles
   North Indian, South Indian, and East Indian chart rendering.
   Color scheme: saffron/maroon/cream matching Parashara's Light aesthetic.
   ========================================================================== */

/* ---- Container & sizing ---- */
.chart-wheel-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.chart-wheel {
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1;
  background: #fff;
  border: 1px solid var(--border, #EDD8C0);
  border-radius: var(--radius, 6px);
}

/* ---- Circular wheel (D1 default) ---- */
.chart-wheel circle.wheel-ring {
  fill: none;
  stroke: var(--border, #EDD8C0);
  stroke-width: 0.6;
}

.chart-wheel line.wheel-spoke {
  stroke: var(--border, #EDD8C0);
  stroke-width: 0.5;
}

.chart-wheel text.wheel-sign-label {
  font-family: var(--font-body, 'Poppins', sans-serif);
  font-size: 4.5px;
  letter-spacing: 0.03em;
  fill: var(--text-lt, #9C7A5A);
}

.chart-wheel .wheel-planet-glyph {
  font-family: var(--font-body, 'Poppins', sans-serif);
  font-size: 5px;
  font-weight: 600;
  fill: var(--maroon, #8B1A1A);
  text-anchor: middle;
  dominant-baseline: middle;
}

.chart-wheel .wheel-asc-marker {
  stroke: var(--saffron, #F36B21);
  stroke-width: 1.5;
}

/* ---- North / East Indian square chart grid ---- */
.chart-wheel line.kundli-grid {
  stroke: var(--maroon, #8B1A1A);
  stroke-width: 0.8;
}

/* Sign (rashi) number in corner — small, maroon */
.chart-wheel text.kundli-sign-num {
  font-family: var(--font-body, 'Poppins', sans-serif);
  font-size: 7px;
  font-weight: 700;
  fill: var(--saffron, #F36B21);
  text-anchor: middle;
  dominant-baseline: middle;
}

/* Planet abbreviation — prominent, maroon */
.chart-wheel text.kundli-planet {
  font-family: var(--font-body, 'Poppins', sans-serif);
  font-size: 8.5px;
  font-weight: 600;
  fill: var(--maroon, #8B1A1A);
  text-anchor: middle;
  dominant-baseline: middle;
}

/* Planet degree — small, muted */
.chart-wheel text.kundli-degree {
  font-family: var(--font-body, 'Poppins', sans-serif);
  font-size: 6.5px;
  fill: var(--text-mid, #5C3A1E);
  text-anchor: middle;
  dominant-baseline: middle;
}

/* Retrograde label */
.chart-wheel text.kundli-retro {
  font-family: var(--font-body, 'Poppins', sans-serif);
  font-size: 6px;
  font-weight: 700;
  fill: var(--saffron, #F36B21);
  text-anchor: middle;
  dominant-baseline: middle;
}

/* Lagna marker lines */
.chart-wheel line.kundli-lagna {
  stroke: var(--saffron, #F36B21);
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* South Indian rect cell */
.chart-wheel rect.kundli-cell {
  fill: #fff;
  stroke: var(--maroon, #8B1A1A);
  stroke-width: 0.7;
}

.chart-wheel rect.kundli-lagna-cell {
  fill: rgba(243, 107, 33, 0.06);
  stroke: var(--saffron, #F36B21);
  stroke-width: 1.4;
}

/* Caption under chart */
.chart-wheel-caption {
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-lt, #9C7A5A);
  text-align: center;
}

/* ---- Style toggle pills ---- */
.chart-style-row {
  display: flex;
  align-items: center;
  gap: var(--space-4, 1rem);
  margin-bottom: var(--space-6, 1.5rem);
  flex-wrap: wrap;
}

.chart-style-toggle {
  display: flex;
  gap: 3px;
  border: 1.5px solid var(--border, #EDD8C0);
  border-radius: 999px;
  padding: 3px;
  background: #fff;
}

.style-btn {
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--text-mid, #5C3A1E);
  font-family: var(--font-body, 'Poppins', sans-serif);
  transition: background 0.2s, color 0.2s;
  cursor: pointer;
}

.style-btn.is-active {
  background: var(--saffron, #F36B21);
  color: #fff;
  font-weight: 600;
}

/* ---- Planet data table below chart ---- */
.chart-summary-grid { margin-top: var(--space-8, 2rem); }

.chart-planet-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-3, 0.75rem) 0;
  border-bottom: 1px solid var(--border, #EDD8C0);
  font-size: var(--text-sm, 0.875rem);
  align-items: center;
}

.chart-planet-row:first-child {
  color: var(--text-lt, #9C7A5A);
  font-size: var(--text-xs, 0.75rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.chart-planet-row .planet-name {
  color: var(--maroon, #8B1A1A);
  font-family: var(--font-display, 'Cormorant SC', serif);
  font-size: var(--text-base, 1rem);
}

.chart-planet-row .planet-sign { color: var(--saffron, #F36B21); font-weight: 600; }

.retro-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--saffron, #F36B21);
  letter-spacing: 0.03em;
}

@media (max-width: 600px) {
  .chart-planet-row {
    grid-template-columns: 1fr 1fr;
    row-gap: var(--space-1, 0.25rem);
  }
}

/* ── Planet colour variants (matching reference app) ── */
.chart-wheel text.kundli-planet--moon {
  fill: #16a34a;          /* Moon always green */
  font-weight: 600;
}
.chart-wheel text.kundli-planet--lagna {
  fill: var(--saffron, #F36B21);   /* Lagna (As) in saffron */
  font-weight: 700;
}

/* ── Chart sub-tabs (Rashi | Navamsa | Bhava | Others) ── */
.chart-view-tabs-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
  margin-bottom: var(--space-4, 1rem);
}

.chart-view-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--line, #EDD8C0);
  flex-wrap: wrap;
}

.cvtab-btn {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted, #5C3A1E);
  cursor: pointer;
  font-family: var(--font-body, 'Poppins', sans-serif);
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.cvtab-btn:hover { color: var(--saffron, #F36B21); }
.cvtab-btn.is-active {
  color: var(--saffron, #F36B21);
  border-bottom-color: var(--saffron, #F36B21);
  font-weight: 700;
}

/* Others dropdown wrapper */
.cvtab-others-wrap {
  position: relative;
}
.cv-others-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 200;
  background: #fff;
  border: 1px solid var(--border, #EDD8C0);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  min-width: 220px;
  max-height: 340px;
  overflow-y: auto;
  padding: 4px 0;
}
.cv-others-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 8px 16px;
  font-size: 13px;
  font-family: var(--font-body, 'Poppins', sans-serif);
  color: var(--text-dk, #1A0A00);
  cursor: pointer;
  transition: background 0.1s;
}
.cv-others-dropdown button:hover {
  background: var(--saffron-lt, #FFF0E6);
  color: var(--saffron, #F36B21);
}
.cv-others-dropdown button.is-selected {
  font-weight: 700;
  color: var(--saffron, #F36B21);
}

/* Bhava sub-options */
.bhava-subs {
  display: flex;
  gap: var(--space-2, 0.5rem);
  padding: 4px 0;
}
.bhava-sub-btn {
  background: transparent;
  border: 1.5px solid var(--border, #EDD8C0);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted, #5C3A1E);
  cursor: pointer;
  font-family: var(--font-body, 'Poppins', sans-serif);
  transition: background 0.15s, border-color 0.15s;
}
.bhava-sub-btn:hover { border-color: var(--saffron, #F36B21); color: var(--saffron, #F36B21); }
.bhava-sub-btn.is-active {
  background: var(--saffron, #F36B21);
  border-color: var(--saffron, #F36B21);
  color: #fff;
}

/* Chart type label */
.chart-type-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-soft, #9C7A5A);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-3, 0.75rem);
}

/* ================================================================
   Ashtakavarga Styles
   ================================================================ */

/* Sarvashtakavarga / BAV score table */
.av-score-table {
  width: 100%;
  overflow-x: auto;
}

.av-table-grid {
  display: grid;
  grid-template-columns: 100px repeat(12, 1fr) 60px;
  gap: 2px;
  min-width: 700px;
}

.av-cell {
  padding: 5px 2px;
  text-align: center;
  font-size: 12px;
  font-family: var(--font-body, 'Poppins', sans-serif);
  border-radius: 3px;
  font-weight: 600;
  line-height: 1.4;
}

.av-cell.is-header {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted-soft, #9C7A5A);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: transparent;
  padding: 4px 2px;
}

.av-cell.is-planet {
  text-align: left;
  font-size: 12px;
  color: var(--maroon, #8B1A1A);
  font-weight: 700;
  padding-left: 4px;
  background: transparent;
}

.av-cell.is-total {
  font-size: 11px;
  color: var(--maroon, #8B1A1A);
  font-weight: 800;
  background: var(--saffron-lt, #FFF0E6);
}

.av-cell.is-sarva { font-weight: 800; }

/* Score colour variants */
.av-score-red    { color: #dc2626; background: rgba(220,38,38,0.08); }
.av-score-orange { color: #ea580c; background: rgba(234,88,12,0.08); }
.av-score-amber  { color: #ca8a04; background: rgba(202,138,4,0.08); }
.av-score-green  { color: #16a34a; background: rgba(22,163,74,0.08); }
.av-score-dkgreen{ color: #166534; background: rgba(22,101,52,0.10); }

/* Bhinnashtakavarga planet selector tabs */
.av-bav-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: var(--space-3, 0.75rem);
}

.av-planet-tab {
  background: transparent;
  border: 1.5px solid var(--border, #EDD8C0);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body, 'Poppins', sans-serif);
  color: var(--text-mid, #5C3A1E);
  transition: background 0.15s, border-color 0.15s;
}
.av-planet-tab:hover,
.av-planet-tab.is-active {
  background: var(--saffron, #F36B21);
  border-color: var(--saffron, #F36B21);
  color: #fff;
}

/* Legend */
.av-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--text-mid, #5C3A1E);
}

.av-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.av-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* ================================================================
   Sade Sati Banner
   ================================================================ */

.sade-sati-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-4, 1rem) var(--space-6, 1.5rem);
  border-radius: var(--radius-lg, 10px);
  margin-bottom: var(--space-6, 1.5rem);
  background: rgba(220, 38, 38, 0.06);
  border: 1.5px solid rgba(220, 38, 38, 0.25);
  position: relative;
}

.sade-sati-banner.phase-rising  { background: rgba(202,138,4,0.08); border-color: #ca8a04; }
.sade-sati-banner.phase-peak    { background: rgba(220,38,38,0.08); border-color: #dc2626; }
.sade-sati-banner.phase-setting { background: rgba(234,88,12,0.06); border-color: #ea580c; }

.ss-icon {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}

.ss-body { flex: 1; }

.ss-label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--maroon, #8B1A1A);
  margin-bottom: 4px;
}

.ss-desc {
  font-size: 13px;
  color: var(--muted, #5C3A1E);
  line-height: 1.5;
  margin: 0;
}

.ss-close {
  background: transparent;
  border: none;
  font-size: 18px;
  color: var(--muted-soft, #9C7A5A);
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
  padding: 0 4px;
}
.ss-close:hover { color: var(--maroon, #8B1A1A); }

/* ── AV toggle between chart and table ── */
#av-content { display: none; }
#av-content.is-visible { display: block; }

/* ================================================================
   Transit / Gochar View Styles
   ================================================================ */

/* ── Header bar ── */
.transits-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--saffron, #F36B21);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.transits-native-name {
  font-family: var(--font-display, 'Cormorant SC', serif);
  font-size: var(--text-xl, 1.75rem);
  color: var(--maroon, #8B1A1A);
  margin-bottom: var(--space-1);
}
.transits-as-of {
  font-size: var(--text-sm, 0.875rem);
  color: var(--muted-soft, #9C7A5A);
  margin: 0;
}

/* ── Alert Cards ── */
.transits-alerts-card { background: var(--cream, #FFFAF5); }
.transit-alert-item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line, #EDD8C0);
}
.transit-alert-item:last-child { border-bottom: none; }
.ta-emoji { font-size: 18px; flex-shrink: 0; line-height: 1.5; }
.ta-body h4 { font-size: 13px; font-weight: 700; color: var(--maroon, #8B1A1A); margin: 0 0 3px; }
.ta-body p  { font-size: 12px; color: var(--muted, #5C3A1E); margin: 0; line-height: 1.5; }
.ta-severity-high     { border-left: 3px solid #dc2626; padding-left: var(--space-3); }
.ta-severity-medium   { border-left: 3px solid #ea580c; padding-left: var(--space-3); }
.ta-severity-positive { border-left: 3px solid #16a34a; padding-left: var(--space-3); }

/* ── Sade Sati Card ── */
.transits-ss-card { position: relative; }
.ss-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
  gap: var(--space-3);
}
.ss-status-badge {
  padding: 4px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ss-status-badge.badge-active-rising  { background: #fef3c7; color: #b45309; border: 1.5px solid #b45309; }
.ss-status-badge.badge-active-peak    { background: #fee2e2; color: #dc2626; border: 1.5px solid #dc2626; }
.ss-status-badge.badge-active-setting { background: #ffedd5; color: #ea580c; border: 1.5px solid #ea580c; }
.ss-status-badge.badge-inactive       { background: #dcfce7; color: #16a34a; border: 1.5px solid #16a34a; }

/* ── Phase indicator dots ── */
.ss-phases-row {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.ss-phase-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--border, #EDD8C0);
  font-size: 12px;
  flex-direction: column;
  text-align: center;
  min-width: 140px;
}
.ss-phase-item.is-current { border-color: var(--saffron, #F36B21); background: var(--saffron-lt, #FFF0E6); }
.ss-phase-item.past       { opacity: 0.5; }
.ss-phase-label { font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--maroon, #8B1A1A); }
.ss-phase-dates { font-size: 11px; color: var(--muted-soft, #9C7A5A); }
.ss-phase-sign  { font-size: 11px; color: var(--saffron, #F36B21); font-weight: 600; }

/* ── Timeline bar ── */
.ss-timeline-wrap { margin: var(--space-4) 0; }
.ss-timeline {
  height: 24px;
  border-radius: 4px;
  background: var(--line, #EDD8C0);
  position: relative;
  overflow: visible;
  margin-bottom: var(--space-2);
}
.ss-tl-segment {
  position: absolute;
  height: 100%;
  border-radius: 3px;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
}
.ss-tl-rising  { background: #b45309; }
.ss-tl-peak    { background: #dc2626; }
.ss-tl-setting { background: #ea580c; }
.ss-tl-now {
  position: absolute;
  width: 2px;
  height: 120%;
  top: -10%;
  background: var(--maroon, #8B1A1A);
  border-radius: 2px;
}
.ss-tl-now::after {
  content: 'Now';
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  font-weight: 700;
  color: var(--maroon, #8B1A1A);
  white-space: nowrap;
}
.ss-timeline-legend {
  display: flex;
  gap: var(--space-4);
  font-size: 11px;
}
.ss-tl-item::before { content: '■ '; }
.ss-tl-item.ss-tl-rising  { color: #b45309; }
.ss-tl-item.ss-tl-peak    { color: #dc2626; }
.ss-tl-item.ss-tl-setting { color: #ea580c; }

.ss-desc-block {
  font-size: 13px;
  color: var(--muted, #5C3A1E);
  line-height: 1.6;
  padding: var(--space-3) var(--space-4);
  background: var(--saffron-lt, #FFF0E6);
  border-radius: var(--radius, 6px);
  margin: var(--space-4) 0;
}

/* ── Remedies ── */
.ss-remedies { margin-top: var(--space-4); }
.ss-remedies-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--maroon, #8B1A1A);
  margin-bottom: var(--space-2);
  font-family: var(--font-body, 'Poppins', sans-serif);
}
.ss-remedies-list {
  padding-left: var(--space-4);
  font-size: 12px;
  color: var(--muted, #5C3A1E);
  line-height: 1.8;
  margin: 0;
}

/* ── Planet transit table ── */
.transits-planet-table { overflow-x: auto; }
.tp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 0.7fr 0.8fr 0.8fr 0.8fr;
  gap: 2px;
  min-width: 560px;
}
.tp-cell {
  padding: 6px 8px;
  font-size: 12px;
  font-family: var(--font-body, 'Poppins', sans-serif);
  border-bottom: 1px solid var(--line, #EDD8C0);
  display: flex;
  align-items: center;
  gap: 4px;
}
.tp-cell.is-header {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-soft, #9C7A5A);
  border-bottom: 2px solid var(--maroon, #8B1A1A);
  background: var(--saffron-lt, #FFF0E6);
  padding-top: 8px;
}
.tp-planet-name { font-weight: 700; color: var(--maroon, #8B1A1A); }
.tp-sign       { color: var(--saffron, #F36B21); font-weight: 600; }
.tp-retro      { font-size: 10px; color: #ea580c; font-weight: 700; }
.tp-house      { color: var(--text-mid, #5C3A1E); font-weight: 600; }
.tp-quality-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.tp-quality-excellent, .tp-quality-good     { background: #16a34a; }
.tp-quality-mixed                            { background: #ca8a04; }
.tp-quality-challenging, .tp-quality-very_challenging { background: #dc2626; }

/* ── Transit detail tabs ── */
.transit-planet-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.tp-tab-btn {
  background: transparent;
  border: 1.5px solid var(--border, #EDD8C0);
  border-radius: 999px;
  padding: 5px 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body, 'Poppins', sans-serif);
  color: var(--text-mid, #5C3A1E);
  transition: background 0.15s, border-color 0.15s;
}
.tp-tab-btn:hover, .tp-tab-btn.is-active {
  background: var(--saffron, #F36B21);
  border-color: var(--saffron, #F36B21);
  color: #fff;
}

/* ── Transit detail card ── */
.transit-detail-card {
  border: 1px solid var(--border, #EDD8C0);
  border-radius: var(--radius, 6px);
  overflow: hidden;
}
.tdc-header {
  background: var(--maroon, #8B1A1A);
  color: #fff;
  padding: var(--space-4) var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.tdc-planet { font-family: var(--font-display, 'Cormorant SC', serif); font-size: var(--text-lg, 1.25rem); }
.tdc-position { font-size: 13px; opacity: 0.8; }
.tdc-body { padding: var(--space-4) var(--space-6); }
.tdc-section { margin-bottom: var(--space-4); }
.tdc-section-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-soft, #9C7A5A);
  font-weight: 700;
  margin-bottom: var(--space-2);
}
.tdc-effect {
  font-size: 13px;
  color: var(--text-mid, #5C3A1E);
  line-height: 1.6;
  padding: var(--space-3);
  background: var(--cream, #FFFAF5);
  border-radius: var(--radius, 6px);
  border-left: 3px solid var(--saffron, #F36B21);
}
.tdc-conjunction-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(243,107,33,0.12);
  color: var(--saffron-dk, #C84E0D);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
}

/* ── Profile picker in transit view ── */
.tp-profile-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1.5px solid var(--border, #EDD8C0);
  border-radius: var(--radius, 6px);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  font-family: var(--font-body, 'Poppins', sans-serif);
}
.tp-profile-btn:hover { border-color: var(--saffron, #F36B21); background: var(--saffron-lt, #FFF0E6); }
.tp-profile-name { font-weight: 700; color: var(--maroon, #8B1A1A); font-size: 14px; }
.tp-profile-meta { font-size: 12px; color: var(--muted-soft, #9C7A5A); margin-top: 2px; }

/* ================================================================
   Yoga Engine Styles — Cycle 3
   ================================================================ */

/* ── Summary bar ── */
.yoga-summary-bar { }
.yoga-summary-inner {
  display: flex;
  gap: var(--space-6);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.yoga-stat { text-align: center; }
.yoga-stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--maroon);
  line-height: 1;
}
.yoga-stat-num--strong { color: #16a34a; }
.yoga-stat-num--muted  { color: var(--muted-soft); }
.yoga-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-soft);
  font-weight: 600;
}

/* ── Highlight pills ── */
.yoga-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.yoga-highlight-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: var(--saffron-lt);
  color: var(--maroon);
  border: 1.5px solid var(--saffron);
}
.yoga-highlight-pill .pill-strength {
  font-size: 10px;
  opacity: 0.7;
  font-weight: 600;
}

/* ── Filter row ── */
.yoga-filter-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.yoga-filter-btn {
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 5px 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  color: var(--text-mid);
  transition: background 0.15s, border-color 0.15s;
}
.yoga-filter-btn:hover,
.yoga-filter-btn.is-active {
  background: var(--maroon);
  border-color: var(--maroon);
  color: #fff;
}

/* ── Yoga cards grid ── */
.yoga-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}

/* ── Individual yoga card ── */
.yoga-card {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg, 10px);
  padding: var(--space-4);
  transition: box-shadow 0.2s;
  position: relative;
}
.yoga-card--present {
  border-color: var(--saffron);
  background: linear-gradient(135deg, #fffdf8 0%, #fff8f0 100%);
}
.yoga-card--present:hover { box-shadow: 0 4px 16px rgba(243,107,33,0.15); }
.yoga-card--absent {
  opacity: 0.45;
  background: var(--cream, #FFFAF5);
}
.yoga-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}
.yoga-category-badge {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--saffron);
  background: var(--saffron-lt);
  padding: 2px 8px;
  border-radius: 999px;
}
.yoga-strength-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.yoga-strength--strong   { background: #dcfce7; color: #166534; }
.yoga-strength--moderate { background: #fef3c7; color: #b45309; }
.yoga-strength--absent   { background: var(--line); color: var(--muted-soft); }
.yoga-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--maroon);
  margin: 0 0 var(--space-2);
  font-weight: 700;
}
.yoga-card--absent .yoga-name { color: var(--muted-soft); }
.yoga-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 var(--space-3);
}
.yoga-planets-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 11px;
  color: var(--muted-soft);
  font-weight: 600;
}
.yoga-planet-chip {
  background: var(--saffron-lt);
  color: var(--maroon);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.yoga-present-icon {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  font-size: 18px;
}

/* ================================================================
   Mangal Dosha / Kundli Matching Dosha Styles — Cycle 4
   ================================================================ */

.mangal-dosha-card {
  border: 2px solid var(--border);
  border-radius: var(--radius-lg, 10px);
  padding: var(--space-4);
}
.mangal-dosha-card.has-dosha   { border-color: #dc2626; background: rgba(220,38,38,0.04); }
.mangal-dosha-card.no-dosha    { border-color: #16a34a; background: rgba(22,163,74,0.04); }
.mangal-dosha-card.cancelled   { border-color: #ca8a04; background: rgba(202,138,4,0.04); }

.md-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
  gap: var(--space-2);
}
.md-person-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--maroon);
  font-weight: 700;
}
.md-status-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.md-status-badge.active    { background: #fee2e2; color: #dc2626; }
.md-status-badge.cancelled { background: #fef3c7; color: #b45309; }
.md-status-badge.none      { background: #dcfce7; color: #16a34a; }

.md-detail-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 4px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.md-detail-row:last-child { border-bottom: none; }
.md-detail-val { font-weight: 600; color: var(--maroon); }

.md-cancellations {
  margin-top: var(--space-3);
  font-size: 11px;
}
.md-cancel-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 4px;
  color: #b45309;
}
.md-cancel-item::before { content: '✓'; font-weight: 700; color: #16a34a; }

/* ── Other doshas table ── */
.doshas-table {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2px;
  margin-bottom: var(--space-4);
}
.dosh-cell {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.dosh-cell.is-header {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-soft);
  font-weight: 700;
  background: var(--saffron-lt);
}
.dosh-present { color: #dc2626; font-weight: 700; }
.dosh-absent  { color: #16a34a; font-weight: 700; }
.dosh-cancel  { color: #b45309; font-weight: 700; }

/* ── Final verdict card ── */
.matching-verdict-card {
  border-radius: var(--radius-lg, 10px);
  overflow: hidden;
  margin-top: var(--space-4);
}
.mvc-header {
  background: var(--maroon);
  color: #fff;
  padding: var(--space-4) var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.mvc-verdict { font-family: var(--font-display); font-size: var(--text-xl); }
.mvc-score   { font-size: 1.8rem; font-weight: 700; }
.mvc-score-max { font-size: 1rem; opacity: 0.7; }
.mvc-body {
  padding: var(--space-4) var(--space-6);
  background: var(--cream);
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}
.mvc-deductions {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: rgba(220,38,38,0.06);
  border-radius: var(--radius);
  border-left: 3px solid #dc2626;
}
.mvc-deduction-item { font-size: 12px; color: #dc2626; margin-bottom: 3px; }

/* ── Chart-page Ayanamsa quick-select bar ── */
.chart-ayan-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: linear-gradient(90deg, var(--saffron-lt, #fff8f0) 0%, transparent 100%);
  border-bottom: 1px solid var(--saffron);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}
.chart-ayan-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--maroon);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.chart-ayan-select {
  font-size: 13px;
  font-weight: 600;
  color: var(--maroon);
  border: 1.5px solid var(--saffron);
  border-radius: var(--radius);
  padding: 4px 10px;
  background: #fff;
  cursor: pointer;
  min-width: 220px;
}
.chart-ayan-select:focus { outline: 2px solid var(--saffron); }
.chart-ayan-hint {
  font-size: 11px;
  color: var(--muted-soft);
  font-style: italic;
  flex: 1;
}