/* Sade Sati Calculator — page-specific UI (phase timeline, progress, intensity, Dhaiya).
   Reuses dasha-landing.css for hero, sections, cards, CTAs, trust badges. Brand tokens:
   indigo #4F46E5 / gold #F59E0B, matching the rest of the calculator pages. */

:root {
  --ss-indigo: #4F46E5;
  --ss-indigo-soft: #EEF0FF;
  --ss-gold: #F59E0B;
  --ss-ink: #1e1b4b;
  --ss-muted: #6b7280;
  --ss-rising: #6366F1;
  --ss-peak: #F59E0B;
  --ss-setting: #10B981;
}

/* ---- Personalized result hero (State B) ---- */
.ss-result {
  max-width: 760px;
  margin: 0 auto 1.5rem;
  background: linear-gradient(180deg, var(--ss-indigo-soft), #fff);
  border: 1px solid #e0e3ff;
  border-radius: 16px;
  padding: 1.75rem 1.5rem;
  text-align: center;
}
.ss-result__signs {
  font-size: 0.95rem;
  color: var(--ss-muted);
  margin-bottom: 0.35rem;
}
.ss-result__status {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ss-ink);
  line-height: 1.25;
  margin: 0.25rem 0 0.5rem;
}
.ss-result__phase {
  display: inline-block;
  background: var(--ss-indigo);
  color: #fff;
  font-weight: 600;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  font-size: 0.95rem;
}
.ss-result__window { color: var(--ss-muted); margin-top: 0.6rem; font-size: 0.95rem; }

/* ---- Progress bar ---- */
.ss-progress {
  height: 12px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
  margin: 1rem auto 0.4rem;
  max-width: 520px;
}
.ss-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ss-rising), var(--ss-peak), var(--ss-setting));
  border-radius: 999px;
}
.ss-progress__label { font-size: 0.85rem; color: var(--ss-muted); }

/* ---- Three-phase timeline ---- */
.ss-phases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.25rem 0;
}
.ss-phase {
  border: 1px solid #e5e7eb;
  border-top: 4px solid var(--ss-muted);
  border-radius: 12px;
  padding: 1.1rem 1rem;
  background: #fff;
}
.ss-phase--rising { border-top-color: var(--ss-rising); }
.ss-phase--peak { border-top-color: var(--ss-peak); }
.ss-phase--setting { border-top-color: var(--ss-setting); }
.ss-phase.is-current {
  box-shadow: 0 0 0 2px var(--ss-indigo);
  background: var(--ss-indigo-soft);
}
.ss-phase__name { font-weight: 700; color: var(--ss-ink); margin: 0; font-size: 1.05rem; }
.ss-phase__sanskrit { font-size: 0.8rem; color: var(--ss-muted); font-style: italic; }
.ss-phase__dates { font-size: 0.9rem; color: var(--ss-indigo); font-weight: 600; margin: 0.4rem 0; }
.ss-phase__summary { font-size: 0.92rem; color: #374151; line-height: 1.5; margin: 0; }
.ss-phase__badge {
  display: inline-block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--ss-indigo); background: #fff; border: 1px solid var(--ss-indigo);
  padding: 0.1rem 0.5rem; border-radius: 999px; margin-bottom: 0.4rem;
}

/* ---- Intensity caveat (anti-fear-mongering) ---- */
.ss-intensity {
  max-width: 760px; margin: 0 auto 1.25rem; border-radius: 12px;
  padding: 0.9rem 1.1rem; font-size: 0.95rem; line-height: 1.5;
  border-left: 4px solid var(--ss-muted); background: #f9fafb;
}
.ss-intensity--mild { border-left-color: var(--ss-setting); background: #ecfdf5; }
.ss-intensity--moderate { border-left-color: var(--ss-gold); background: #fffbeb; }
.ss-intensity--challenging { border-left-color: var(--ss-indigo); background: var(--ss-indigo-soft); }
.ss-intensity strong { color: var(--ss-ink); text-transform: capitalize; }

/* ---- Shani Dhaiya callout ---- */
.ss-dhaiya {
  max-width: 760px; margin: 1.25rem auto; border: 1px dashed #c7cbff;
  border-radius: 12px; padding: 1rem 1.1rem; background: #fafaff;
}
.ss-dhaiya h3 { margin: 0 0 0.3rem; color: var(--ss-ink); font-size: 1.05rem; }
.ss-dhaiya p { margin: 0; color: #374151; font-size: 0.95rem; }

@media (max-width: 640px) {
  .ss-phases { grid-template-columns: 1fr; }
  .ss-result__status { font-size: 1.25rem; }
}