/*
 * Eat, the meal page (and the food page, which shares its cards). Loads after she.css and she-plans.css (the approved Eat sheets, read-only)
 * and only adds what the meal page needs. Every selector starts with .shh.shj.she.she--meal or body.sh-eat-lp.
 */

/* the plate card's rows: a food name that opens its Quick View, with its portion above it */
.shh.shj.she.she--meal .she-mp-plate .she-menu-t b { text-transform: none; letter-spacing: 0; font: 650 12.5px/1.2 var(--shh-text); color: var(--she-muted); }
.shh.shj.she.she--meal .she-mp-plate .she-menu-t a, .shh.shj.she.she--meal .she-mp-food { color: var(--she-ink); text-decoration: underline; text-decoration-color: #b9dcae; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.shh.shj.she.she--meal .she-mp-plate .she-menu-t a { font: 650 15.5px/1.35 var(--shh-text); }
.shh.shj.she.she--meal .she-mp-food:hover, .shh.shj.she.she--meal .she-mp-food:focus-visible { color: var(--she-green); text-decoration-color: currentColor; }
@media (min-width: 640px) { .shh.shj.she.she--meal .she-pl-figs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* what goes in: a row per food with its share of the meal's energy */
.shh.shj.she.she--meal .she-mp-list { display: grid; gap: 4px; margin: 14px 0 0; padding: 0; list-style: none; }
.shh.shj.she.she--meal .she-mp-item { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "tok t kcal" "tok bar bar"; align-items: center; gap: 4px 12px; padding: 12px 8px; border-bottom: 1px solid #edf3ea; border-radius: 12px; }
.shh.shj.she.she--meal .she-mp-item:last-child { border-bottom: 0; }
.shh.shj.she.she--meal .she-mp-item .she-pl-tok { grid-area: tok; }
.shh.shj.she.she--meal .she-mp-item-t { grid-area: t; display: grid; gap: 2px; min-width: 0; }
.shh.shj.she.she--meal .she-mp-item-t b { font: 650 16px/1.3 var(--shh-text); color: var(--she-ink); }
.shh.shj.she.she--meal .she-mp-item-t small { font-size: 13.5px; color: var(--she-muted); font-variant-numeric: tabular-nums; }
.shh.shj.she.she--meal .she-mp-item em { grid-area: kcal; font-style: normal; font: 700 15px/1 var(--shh-text); color: var(--she-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.shh.shj.she.she--meal .she-mp-share { grid-area: bar; display: block; height: 5px; border-radius: 5px; background: #edf3ea; overflow: hidden; }
.shh.shj.she.she--meal .she-mp-share i { display: block; height: 100%; background: var(--she-role); border-radius: 5px; }

/* the days that use it */
.shh.shj.she.she--meal .she-mp-days { display: grid; gap: 20px; margin-top: 28px; }
.shh.shj.she.she--meal .she-mp-day { max-width: 560px; margin-inline: auto; width: 100%; }
.shh.shj.she.she--meal .she-mp-day .she-pl-grid { grid-template-columns: minmax(0, 1fr); margin-top: 12px; }
.shh.shj.she.she--meal .she-mp-day-note { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 16px; background: #fdf8ee; border: 1px solid #f1e0b8; font-size: 14.5px; line-height: 1.45; color: var(--she-ink); }

/* more ideas (each opens its Quick View) */
.shh.shj.she.she--meal .she-mp-idea { position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 20px; border-radius: 24px; background: #fff; border: 1px solid var(--she-line); box-shadow: 0 30px 56px -46px rgba(29, 74, 33, .5); color: var(--she-ink); text-decoration: none; }
.shh.shj.she.she--meal .she-mp-idea strong { font: 750 17px/1.25 var(--shh-display); color: var(--she-ink); padding-right: 30px; }
.shh.shj.she.she--meal .she-mp-idea-foods { font-size: 14px; line-height: 1.45; color: var(--she-copy); }
.shh.shj.she.she--meal .she-mp-idea-kcal { font-size: 13.5px; color: var(--she-muted); font-variant-numeric: tabular-nums; }
.shh.shj.she.she--meal .she-mp-idea:hover, .shh.shj.she.she--meal .she-mp-idea:focus-visible { border-color: #7dbd62; color: var(--she-ink); background: #fff; }
@media (min-width: 1180px) { .shh.shj.she.she--meal .she-mp-ideas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 700px) and (max-width: 1179.98px) { .shh.shj.she.she--meal .she-mp-ideas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.shh.shj.she.she--meal .she-sec--ideas { background: linear-gradient(180deg, #fbfdf5 0%, #ffffff 100%); border-top: 1px solid var(--shh-line-soft); }

@media (prefers-reduced-motion: no-preference) {
	.shh.shj.she.she--meal .she-mp-idea { transition: transform .25s var(--shh-spring), border-color .2s ease, box-shadow .25s ease; }
	.shh.shj.she.she--meal .she-mp-idea:hover, .shh.shj.she.she--meal .she-mp-idea:focus-visible { transform: translateY(-3px); box-shadow: 0 34px 60px -40px rgba(29, 74, 33, .6); }
	.shh.shj.she.she--meal .she-mp-share i { transition: width .6s var(--shh-ease); }
}