/* Janan illustrated semantic icon system — generated atlas, native controls preserved. */
:root {
  --janan-icon-atlas: url("/images/icons/janan-icon-atlas-v1.jpg");
}

:where(
  .janan-core-icon[data-icon-name="home"],
  .janan-core-icon[data-icon-name="mother-care"],
  .janan-core-icon[data-icon-name="user-panel"],
  .janan-core-icon[data-icon-name="baby"],
  .janan-core-icon[data-icon-name="record"],
  .janan-core-icon[data-icon-name="symptoms"],
  .janan-core-icon[data-icon-name="calendar"],
  .janan-core-icon[data-icon-name="education"],
  .janan-core-icon[data-icon-name="info-calm"],
  .janan-core-icon[data-icon-name="heart"],
  .janan-core-icon[data-icon-name="vaccine"],
  .janan-core-icon[data-icon-name="nutrition"],
  .janan-core-icon[data-icon-name="message"],
  .janan-core-icon[data-icon-name="contact"],
  .janan-core-icon[data-icon-name="support"],
  .janan-core-icon[data-icon-name="shield"],
  .janan-core-icon[data-icon-name="privacy"],
  .janan-core-icon[data-icon-name="today"],
  .janan-core-icon[data-icon-name="spark"],
  .janan-core-icon[data-icon-name="stages"],
  .janan-core-icon[data-icon-name="progress"],
  .janan-core-icon[data-icon-name="vitals"],
  .janan-core-icon[data-icon-name="alert"],
  .janan-core-icon[data-icon-name="emergency"]
) {
  background-image: var(--janan-icon-atlas);
  background-repeat: no-repeat;
  background-size: 400% 400%;
  border-radius: 30%;
  color: transparent !important;
  filter: drop-shadow(0 2px 4px rgba(83, 55, 74, .12));
}

:where(
  .janan-core-icon[data-icon-name="home"],
  .janan-core-icon[data-icon-name="mother-care"],
  .janan-core-icon[data-icon-name="user-panel"],
  .janan-core-icon[data-icon-name="baby"],
  .janan-core-icon[data-icon-name="record"],
  .janan-core-icon[data-icon-name="symptoms"],
  .janan-core-icon[data-icon-name="calendar"],
  .janan-core-icon[data-icon-name="education"],
  .janan-core-icon[data-icon-name="info-calm"],
  .janan-core-icon[data-icon-name="heart"],
  .janan-core-icon[data-icon-name="vaccine"],
  .janan-core-icon[data-icon-name="nutrition"],
  .janan-core-icon[data-icon-name="message"],
  .janan-core-icon[data-icon-name="contact"],
  .janan-core-icon[data-icon-name="support"],
  .janan-core-icon[data-icon-name="shield"],
  .janan-core-icon[data-icon-name="privacy"],
  .janan-core-icon[data-icon-name="today"],
  .janan-core-icon[data-icon-name="spark"],
  .janan-core-icon[data-icon-name="stages"],
  .janan-core-icon[data-icon-name="progress"],
  .janan-core-icon[data-icon-name="vitals"],
  .janan-core-icon[data-icon-name="alert"],
  .janan-core-icon[data-icon-name="emergency"]
) > * {
  opacity: 0 !important;
}

.janan-core-icon[data-icon-name="home"] { background-position: 0% 0%; }
.janan-core-icon[data-icon-name="mother-care"],
.janan-core-icon[data-icon-name="user-panel"] { background-position: 33.333% 0%; }
.janan-core-icon[data-icon-name="baby"] { background-position: 66.667% 0%; }
.janan-core-icon[data-icon-name="record"] { background-position: 100% 0%; }
.janan-core-icon[data-icon-name="symptoms"] { background-position: 0% 33.333%; }
.janan-core-icon[data-icon-name="calendar"] { background-position: 33.333% 33.333%; }
.janan-core-icon[data-icon-name="education"],
.janan-core-icon[data-icon-name="info-calm"] { background-position: 66.667% 33.333%; }
.janan-core-icon[data-icon-name="heart"] { background-position: 100% 33.333%; }
.janan-core-icon[data-icon-name="vaccine"] { background-position: 0% 66.667%; }
.janan-core-icon[data-icon-name="nutrition"] { background-position: 33.333% 66.667%; }
.janan-core-icon[data-icon-name="message"],
.janan-core-icon[data-icon-name="contact"],
.janan-core-icon[data-icon-name="support"] { background-position: 66.667% 66.667%; }
.janan-core-icon[data-icon-name="shield"],
.janan-core-icon[data-icon-name="privacy"] { background-position: 100% 66.667%; }
.janan-core-icon[data-icon-name="today"],
.janan-core-icon[data-icon-name="spark"] { background-position: 0% 100%; }
.janan-core-icon[data-icon-name="stages"] { background-position: 33.333% 100%; }
.janan-core-icon[data-icon-name="progress"],
.janan-core-icon[data-icon-name="vitals"] { background-position: 66.667% 100%; }
.janan-core-icon[data-icon-name="alert"],
.janan-core-icon[data-icon-name="emergency"] { background-position: 100% 100%; }

/* The selected home quick records get the largest, richest treatment. */
.mobile-care-dashboard--calm-home .mcd-quick-records__grid button {
  min-height: 92px;
  border-color: rgba(var(--lilac-rgb), .14);
  background: linear-gradient(155deg, rgba(255,255,255,.98), rgba(var(--lilac-rgb),.055));
  box-shadow: 0 10px 24px rgba(83, 55, 74, .075);
}

.mobile-care-dashboard--calm-home .mcd-quick-records__grid button > span {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
}

.mobile-care-dashboard--calm-home .mcd-quick-records__grid button > span > .janan-core-icon {
  width: 44px !important;
  height: 44px !important;
}

.mobile-care-dashboard--calm-home .mcd-quick-records__grid strong {
  margin-top: 3px;
  font-size: 10.5px;
}

.mcd-module-card__icon,
.mcd-task__icon,
.mcd-card-head__icon,
.child-care-quick__grid button > span,
.education-followup-card__icon {
  overflow: visible;
  background: transparent !important;
}

.mcd-module-card__icon > .janan-core-icon,
.child-care-quick__grid button > span > .janan-core-icon,
.education-followup-card__icon > .janan-core-icon {
  width: 32px !important;
  height: 32px !important;
}

/* Generated-entry paths reuse the same life-stage art instead of text glyphs. */
.janan-path-icon {
  background-image: var(--janan-icon-atlas) !important;
  background-repeat: no-repeat !important;
  background-size: 400% 400% !important;
  color: transparent !important;
  font-size: 0 !important;
  filter: drop-shadow(0 4px 7px rgba(83, 55, 74, .12));
}

.janan-path-icon--rose,
.janan-path-icon--clay { background-position: 33.333% 0% !important; }
.janan-path-icon--plum { background-position: 33.333% 33.333% !important; }
.janan-path-icon--sage { background-position: 33.333% 100% !important; }
.janan-path-icon--gold { background-position: 100% 33.333% !important; }
.janan-path-icon--lavender { background-position: 66.667% 0% !important; }

/* Standalone cycle experience. */
.quick-actions button > span,
.cycle-illustrated-icon,
.menopause-illustrated-icon,
.menopause-symptom-icon {
  background-image: var(--janan-icon-atlas);
  background-repeat: no-repeat;
  background-size: 400% 400%;
  color: transparent !important;
  font-size: 0 !important;
  filter: drop-shadow(0 3px 6px rgba(83, 55, 74, .12));
}

.quick-actions button:nth-child(1) > span { background-position: 0% 33.333%; }
.quick-actions button:nth-child(2) > span { background-position: 100% 0%; }
.quick-actions button:nth-child(3) > span { background-position: 0% 100%; }

.cycle-illustrated-icon--calendar { background-position: 33.333% 33.333%; }
.cycle-illustrated-icon--record { background-position: 100% 0%; }
.cycle-illustrated-icon--focus { background-position: 0% 100%; }
.menopause-illustrated-icon { background-position: 33.333% 100%; }

.menopause-illustrated-icon {
  display: block;
  width: 72px;
  height: 72px;
  margin-bottom: 14px;
  border-radius: 24px;
}

.symptom:has(.menopause-symptom-icon) {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding-inline: 10px 14px;
  text-align: right;
}

.menopause-symptom-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 12px;
}

.menopause-symptom-icon { background-position: 0% 33.333%; }
.symptom:nth-child(2) .menopause-symptom-icon { background-position: 0% 100%; }
.symptom:nth-child(3) .menopause-symptom-icon { background-position: 66.667% 66.667%; }
.symptom:nth-child(4) .menopause-symptom-icon { background-position: 100% 66.667%; }
.symptom:nth-child(5) .menopause-symptom-icon { background-position: 66.667% 100%; }
.symptom:nth-child(6) .menopause-symptom-icon { background-position: 33.333% 33.333%; }

[data-theme="night"] .janan-core-icon,
[data-theme="night"] .janan-path-icon {
  filter: brightness(.82) saturate(.9) drop-shadow(0 2px 5px rgba(0,0,0,.28));
}

@media (max-width: 360px) {
  .mobile-care-dashboard--calm-home .mcd-quick-records__grid button {
    min-height: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .janan-core-icon,
  .janan-path-icon { transition: none !important; }
}