/* ═══════════════════════════════════════════
   Nutrients, Diet, Avoid, Supplements Pages
   ═══════════════════════════════════════════ */

/* ─── Trimester Tabs ─── */
.trim-tabs {
  display: flex; gap: .4rem; background: white; border-radius: 100px;
  padding: .35rem; box-shadow: var(--shadow); width: fit-content; margin-bottom: 2rem;
}
.trim-tab {
  padding: .55rem 1.6rem; border-radius: 100px; border: none;
  background: transparent; font-size: .83rem; font-weight: 500;
  color: var(--mid); transition: all .25s; white-space: nowrap;
}
.trim-tab.at1 { background: var(--rose); color: white }
.trim-tab.at2 { background: var(--terra); color: white }
.trim-tab.at3 { background: var(--sage); color: white }

/* ─── Trimester Banner ─── */
.trim-banner {
  border-radius: 20px; padding: 2rem; margin-bottom: 2rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
}
.tb-t1 { background: linear-gradient(135deg, var(--rose-p), white) }
.tb-t2 { background: linear-gradient(135deg, var(--terra-p), white) }
.tb-t3 { background: linear-gradient(135deg, var(--sage-p), white) }
.tb-title { font-family: var(--serif); font-size: 1.8rem; font-weight: 400; margin-bottom: .25rem }
.tb-t1 .tb-title { color: var(--rose) }
.tb-t2 .tb-title { color: var(--terra) }
.tb-t3 .tb-title { color: var(--sage) }
.tb-weeks {
  font-size: .72rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--light); margin-bottom: .75rem;
}
.tb-desc { font-size: .88rem; color: var(--mid); line-height: 1.8 }
.tb-milestones { display: flex; flex-direction: column; gap: .4rem }
.tbm {
  display: flex; align-items: flex-start; gap: .6rem; font-size: .8rem;
  color: var(--mid); padding: .5rem .75rem; background: rgba(255, 255, 255, .65);
  border-radius: 8px; line-height: 1.4;
}
.tbm-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 4px }
.t1 .tbm-dot { background: var(--rose) }
.t2 .tbm-dot { background: var(--terra) }
.t3 .tbm-dot { background: var(--sage) }

/* ─── Nutrient Cards ─── */
.nutr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.2rem }
.nutr-card {
  background: white; border-radius: 18px; padding: 1.5rem; box-shadow: var(--shadow);
  position: relative; overflow: hidden; transition: transform .2s, box-shadow .2s;
}
.nutr-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg) }
.nutr-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px }
.nc-rose::after { background: linear-gradient(90deg, var(--rose), var(--rose-l)) }
.nc-sage::after { background: linear-gradient(90deg, var(--sage), var(--sage-l)) }
.nc-terra::after { background: linear-gradient(90deg, var(--terra), var(--terra-l)) }
.nc-indigo::after { background: linear-gradient(90deg, var(--indigo), var(--indigo-l)) }
.nc-gold::after { background: linear-gradient(90deg, var(--gold), #e8d08a) }
.nutr-icon { font-size: 1.8rem; margin-bottom: .6rem }
.nutr-name { font-family: var(--serif); font-size: 1.3rem; font-weight: 500; margin-bottom: .2rem }
.nutr-dose {
  display: inline-block; padding: .15rem .6rem; border-radius: 100px;
  font-size: .7rem; font-weight: 600; margin-bottom: .6rem;
}
.nc-rose .nutr-dose { background: var(--rose-p); color: var(--rose) }
.nc-sage .nutr-dose { background: var(--sage-p); color: var(--sage) }
.nc-terra .nutr-dose { background: var(--terra-p); color: var(--terra) }
.nc-indigo .nutr-dose { background: var(--indigo-p); color: var(--indigo) }
.nc-gold .nutr-dose { background: var(--gold-p); color: var(--gold) }
.nutr-why { font-size: .82rem; color: var(--mid); line-height: 1.7; margin-bottom: .75rem }
.sources-label {
  font-size: .68rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--light); margin-bottom: .35rem;
}

/* ─── Diet Page ─── */
.diet-tabs { display: flex; gap: .4rem; margin-bottom: 2rem; flex-wrap: wrap }
.diet-tab {
  padding: .5rem 1.4rem; border-radius: 100px; border: 1.5px solid var(--border);
  background: white; font-size: .82rem; font-weight: 500; color: var(--mid); transition: all .2s;
}
.diet-tab.active { background: var(--rose); color: white; border-color: var(--rose) }
.diet-layout { display: grid; grid-template-columns: 1fr 300px; gap: 1.5rem }

.meal-day-card { background: white; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); margin-bottom: 1.2rem }
.mdc-header {
  padding: .9rem 1.4rem; display: flex; align-items: center; gap: .75rem;
  border-bottom: 1px solid var(--border); background: var(--cream);
}
.mdc-icon { font-size: 1.2rem }
.mdc-name { font-family: var(--serif); font-size: 1.05rem; font-weight: 500 }
.mdc-kcal {
  margin-left: auto; font-size: .72rem; font-weight: 500; color: var(--light);
  background: white; padding: .18rem .65rem; border-radius: 100px; border: 1px solid var(--border);
}
.mdc-meals { padding: 1rem 1.4rem; display: flex; flex-direction: column; gap: .6rem }
.meal-row {
  display: grid; grid-template-columns: 80px 1fr auto; gap: .75rem; align-items: start;
  padding: .65rem .8rem; background: var(--cream); border-radius: 10px;
}
.mr-time { font-size: .68rem; font-weight: 600; color: var(--rose); letter-spacing: .05em; text-transform: uppercase; padding-top: 2px }
.mr-name { font-size: .87rem; font-weight: 500; margin-bottom: .15rem }
.mr-detail { font-size: .75rem; color: var(--light) }
.mr-tags { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem }
.mr-tag {
  font-size: .62rem; font-weight: 600; padding: .12rem .45rem; border-radius: 100px;
  text-transform: uppercase; letter-spacing: .04em;
}
.tag-p { background: var(--rose-p); color: var(--rose) }
.tag-i { background: var(--terra-p); color: var(--terra) }
.tag-f { background: var(--sage-p); color: var(--sage) }
.tag-c { background: var(--indigo-p); color: var(--indigo) }
.tag-o { background: var(--gold-p); color: var(--gold) }
.mr-kcal { font-size: .73rem; font-weight: 500; color: var(--light); white-space: nowrap; padding-top: 2px }

.diet-tip { border-radius: 14px; padding: 1rem 1.25rem; margin-top: .75rem; font-size: .83rem; line-height: 1.6 }
.tip-t1 { background: var(--rose-p); color: var(--rose) }
.tip-t2 { background: var(--terra-p); color: var(--terra) }
.tip-t3 { background: var(--sage-p); color: var(--sage) }
.diet-sidebar-card { background: white; border-radius: 18px; padding: 1.4rem; box-shadow: var(--shadow); margin-bottom: 1.2rem }

/* ─── Avoid Page ─── */
.avoid-legend { display: flex; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap }
.avoid-leg-item { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--mid) }
.leg-dot { width: 12px; height: 12px; border-radius: 3px }
.lg-danger { background: #e05555 }
.lg-caution { background: var(--terra) }
.lg-limit { background: var(--gold) }
.avoid-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem }
.avoid-card {
  background: white; border-radius: 16px; padding: 1.25rem;
  border-left: 3px solid; box-shadow: var(--shadow); display: flex; gap: .75rem;
}
.avoid-card.danger { border-color: #e05555 }
.avoid-card.caution { border-color: var(--terra) }
.avoid-card.limit { border-color: var(--gold) }
.av-emoji { font-size: 1.4rem; flex-shrink: 0 }
.av-name { font-weight: 600; font-size: .88rem; margin-bottom: .2rem }
.avoid-card.danger .av-name { color: #e05555 }
.avoid-card.caution .av-name { color: var(--terra) }
.avoid-card.limit .av-name { color: var(--gold) }
.av-reason { font-size: .78rem; color: var(--light); line-height: 1.5 }

/* ─── Supplements ─── */
.suppl-table {
  width: 100%; border-collapse: collapse; background: white;
  border-radius: 20px; overflow: hidden; box-shadow: var(--shadow);
}
.suppl-table th {
  background: var(--dark); color: white; text-align: left;
  padding: .9rem 1.1rem; font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}
.suppl-table td {
  padding: .9rem 1.1rem; font-size: .83rem; color: var(--mid);
  border-bottom: 1px solid var(--border); vertical-align: top; line-height: 1.6;
}
.suppl-table tr:last-child td { border: none }
.suppl-table tr:hover td { background: var(--cream) }
.sn { font-weight: 700; color: var(--dark) }
.pbadge {
  display: inline-block; padding: .12rem .55rem; border-radius: 100px;
  font-size: .68rem; font-weight: 600; margin: .1rem;
}
.p-all { background: var(--rose-p); color: var(--rose) }
.p-t1 { background: var(--rose-p); color: var(--rose) }
.p-t2 { background: var(--terra-p); color: var(--terra) }
.p-t3 { background: var(--sage-p); color: var(--sage) }