/* Health Issue in Kundli — Vedic Roga
   Scoped to body.page-health-issue. Reuses the shared milan/kundli theme
   variables (--crimson, --gold, --cream-*, --ink, --muted). No italics. */

body.page-health-issue .hi-form-note,
body.page-health-issue .hi-form-card + .milan-submit-wrap + .hi-form-note {
  margin: 0.75rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
  text-align: center;
}

/* ---- Medical disclaimer (prominent, red-alert) ------------------------- */
body.page-health-issue .hi-disclaimer {
  border: 2px solid var(--crimson, #7a1834);
  background: #fbeaea;
  border-radius: 12px;
  padding: 0.85rem 1rem;
  margin: 0 0 1.15rem;
}

body.page-health-issue .hi-disclaimer__title {
  margin: 0 0 0.3rem;
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--crimson, #7a1834);
}

body.page-health-issue .hi-disclaimer p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #4a2020;
}

body.page-health-issue .hi-disclaimer + .kundli-note {
  margin-top: 0.75rem;
}

/* ---- Hero -------------------------------------------------------------- */
body.page-health-issue .hi-hero {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.15rem;
  margin: 0 0 1rem;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, #5a2233, #7a1834);
  box-shadow: 0 2px 10px rgba(74, 14, 31, 0.18);
}

body.page-health-issue .hi-hero--good { background: linear-gradient(135deg, #2f5a3a, #1f6b3a); }
body.page-health-issue .hi-hero--warn { background: linear-gradient(135deg, #7a1834, #9b2244); }

body.page-health-issue .hi-hero__signs {
  display: flex;
  gap: 0.75rem;
  flex: none;
}

body.page-health-issue .hi-sign {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.68rem;
  line-height: 1.15;
  text-align: center;
  color: #f3ebe0;
}

body.page-health-issue .hi-sign__cap { font-weight: 600; }

body.page-health-issue .hi-sign-icon,
body.page-health-issue .hi-area__planet-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: 50%;
  background: var(--crimson, #7a1834);
  border: 2px solid rgba(255, 255, 255, 0.55);
  overflow: hidden;
}

body.page-health-issue .hi-sign-icon img {
  width: 1.7rem;
  height: 1.7rem;
}

body.page-health-issue .hi-hero__body { min-width: 0; }

body.page-health-issue .hi-hero__label {
  margin: 0 0 0.15rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #e8d9a8;
}

body.page-health-issue .hi-hero__value {
  margin: 0 0 0.4rem;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.1;
}

body.page-health-issue .hi-hero__head {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #f7efe4;
}

body.page-health-issue .hi-person {
  margin: 0 0 0.1rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--crimson, #7a1834);
}

body.page-health-issue .hi-birth-line {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: var(--muted);
}

/* ---- Intro / note copy ------------------------------------------------- */
body.page-health-issue .hi-intro {
  margin: 0 0 0.9rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink);
}

body.page-health-issue .hi-note {
  margin: 0 0 0.9rem;
  padding: 0.7rem 0.85rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--cream-card, #f3ebe0);
  border: 1px solid var(--cream-border, #e0d4c4);
  border-radius: 10px;
}

/* ---- At-a-glance grid -------------------------------------------------- */
body.page-health-issue .hi-grid { margin-bottom: 1.2rem; }

/* ---- Areas to watch ---------------------------------------------------- */
body.page-health-issue .hi-areas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 0.75rem;
  margin: 0 0 1.2rem;
}

body.page-health-issue .hi-area {
  border: 1px solid var(--cream-border, #e0d4c4);
  border-left: 4px solid var(--crimson, #7a1834);
  border-radius: 12px;
  background: #fff;
  padding: 0.8rem 0.9rem;
}

body.page-health-issue .hi-area__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 0 0.35rem;
}

body.page-health-issue .hi-area__planet {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--crimson, #7a1834);
}

body.page-health-issue .hi-area__pts {
  flex: none;
  font-size: 0.7rem;
  font-weight: 700;
  color: #6b4a12;
  background: var(--gold-soft, #e8d9a8);
  border-radius: 999px;
  padding: 0.12rem 0.5rem;
}

body.page-health-issue .hi-area__system {
  margin: 0 0 0.3rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
}

body.page-health-issue .hi-area__risk,
body.page-health-issue .hi-area__sign {
  margin: 0 0 0.3rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink);
}

body.page-health-issue .hi-area__sign { color: var(--muted); }

/* ---- Driver lists (transparent "how" with points) --------------------- */
body.page-health-issue .hi-drivers {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
}

body.page-health-issue .hi-drivers li {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin: 0 0 0.3rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--ink);
}

body.page-health-issue .hi-driver__pts {
  flex: none;
  min-width: 2rem;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 6px;
  padding: 0.1rem 0.3rem;
  background: var(--cream-card, #f3ebe0);
  color: var(--muted);
}

body.page-health-issue .hi-driver__pts--plus {
  background: #f4dede;
  color: var(--crimson, #7a1834);
}

body.page-health-issue .hi-driver__pts--minus {
  background: #dcefe0;
  color: #1f6b3a;
}

/* ---- Houses of health -------------------------------------------------- */
body.page-health-issue .hi-house {
  border: 1px solid var(--cream-border, #e0d4c4);
  border-radius: 12px;
  background: #fff;
  padding: 0.8rem 0.9rem;
  margin: 0 0 0.7rem;
}

body.page-health-issue .hi-house__title {
  margin: 0 0 0.25rem;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--crimson, #7a1834);
}

body.page-health-issue .hi-house__meta {
  margin: 0 0 0.35rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--muted);
}

/* ---- Timing ------------------------------------------------------------ */
body.page-health-issue .hi-period {
  border-radius: 12px;
  padding: 0.8rem 0.9rem;
  margin: 0 0 1rem;
}

body.page-health-issue .hi-period--now {
  background: #fdecd8;
  border: 1px solid #e08a2e;
}

body.page-health-issue .hi-period--now .hi-period__when { color: #b5560c; }

/* Running-now callout takes an orange shade (vs crimson elsewhere). */
body.page-health-issue .hi-period--now .hi-phase__body {
  background: #c96a18;
}

body.page-health-issue .hi-period__when {
  margin: 0 0 0.25rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #6b4a12;
}

body.page-health-issue .hi-period__why {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink);
}

body.page-health-issue .hi-timing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 0 0 1.2rem;
}

body.page-health-issue .hi-timing__head {
  margin: 0 0 0.3rem;
  font-size: 0.98rem;
  color: var(--crimson-deep, #4a0e1f);
}

body.page-health-issue .hi-timing__sub {
  margin: 0 0 0.55rem;
  font-size: 0.82rem;
  color: var(--muted);
}

body.page-health-issue .hi-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.page-health-issue .hi-tl {
  border-left: 3px solid var(--gold, #c9a227);
  background: var(--cream-card, #f3ebe0);
  border-radius: 0 8px 8px 0;
  padding: 0.5rem 0.7rem;
  margin: 0 0 0.55rem;
}

body.page-health-issue .hi-tl--major { border-left-color: var(--crimson, #7a1834); }

/* Past (elapsed) phases read muted — grey card, greyish-crimson accents. */
body.page-health-issue .hi-tl--past {
  background: #ecebe9;
  border-left-color: #a99ea1;
}

body.page-health-issue .hi-tl--past.hi-tl--major { border-left-color: #8a6b73; }

body.page-health-issue .hi-tl--past .hi-tl__when { color: #6f5560; }

body.page-health-issue .hi-tl__when {
  display: block;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--crimson, #7a1834);
}

body.page-health-issue .hi-tl__why {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--ink);
}

/* Highlighted "Body areas …" callout inside each phase (past / now / upcoming). */
body.page-health-issue .hi-phase__body {
  display: block;
  margin: 0.4rem 0 0;
  padding: 0.5rem 0.7rem;
  background: var(--crimson, #7a1834);
  border-radius: 10px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #fff;
}

body.page-health-issue .hi-phase__body-label {
  font-weight: 700;
  color: #fff;
}

/* Past phases: greyish-crimson callout so elapsed windows read calmer. */
body.page-health-issue .hi-tl--past .hi-phase__body {
  background: #6f5560;
}

/* ---- Remedies ---------------------------------------------------------- */
body.page-health-issue .hi-remedies {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 0.75rem;
  margin: 0 0 1.2rem;
}

body.page-health-issue .hi-remedy {
  border: 1px solid var(--cream-border, #e0d4c4);
  border-top: 4px solid var(--gold, #c9a227);
  border-radius: 12px;
  background: #fff;
  padding: 0.8rem 0.9rem;
}

body.page-health-issue .hi-remedy__planet {
  margin: 0 0 0.2rem;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--crimson, #7a1834);
}

body.page-health-issue .hi-remedy__why {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--muted);
}

body.page-health-issue .hi-remedy__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.page-health-issue .hi-remedy__list li {
  margin: 0 0 0.4rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--ink);
}

body.page-health-issue .hi-remedy__k {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--crimson, #7a1834);
}

/* ---- How it was determined -------------------------------------------- */
body.page-health-issue .hi-steps {
  margin: 0 0 1.2rem;
}

body.page-health-issue .hi-step {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin: 0 0 0.65rem;
}

body.page-health-issue .hi-step__n {
  flex: none;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--crimson, #7a1834);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.page-health-issue .hi-step__t {
  margin: 0 0 0.1rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
}

body.page-health-issue .hi-step__d {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--muted);
}

@media (max-width: 560px) {
  body.page-health-issue .hi-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  body.page-health-issue .hi-timing {
    grid-template-columns: 1fr;
  }
}