/* ============ Blackleaf design tokens ============
   Palette follows a leaf's own life cycle:
   chlorophyll green (structure/protein), sun-gold (energy/carbs),
   wine-red (richness/fat), near-black veins (structure/ink). */
:root{
  --ink:#14170f;
  --paper:#f3f6ec;
  --card:#fffefa;
  --forest:#26361f;
  --forest2:#324a29;
  --moss:#5c7a3d;
  --moss-d:#4a6431;
  --lime:#a9c93f;
  --lime-d:#8fae2f;
  --gold:#c3922f;
  --gold-d:#a97c22;
  --sky:#4fa3d1;
  --sky-d:#3a86b3;
  --wine:#8a4a52;
  --line:#e1ded0;
  --line-strong:#cfcab7;
  --muted:#6f7561;
  --danger:#a83c3c;

  /* macro chart palette — kept distinct from the brand vein palette per feedback */
  --macro-protein:#6fa15c;
  --macro-carbs:#5b9bd5;
  --macro-fat:#e0726a;
  --macro-fiber:#e8b84b;

  --serif:'Frank Ruhl Libre',Georgia,'Times New Roman',serif;
  --sans:'Heebo','Segoe UI',Arial,sans-serif;
  --mono:'Rubik','Heebo','Segoe UI',Arial,sans-serif;

  --radius:16px;
  --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(20,23,15,.06),0 1px 1px rgba(20,23,15,.04);
  --shadow-md:0 8px 24px -8px rgba(20,23,15,.18),0 2px 6px rgba(20,23,15,.06);
  --shadow-lg:0 20px 50px -20px rgba(20,23,15,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.5;-webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin:0 auto;padding:22px 22px 60px}

::selection{background:var(--lime);color:var(--ink)}
:focus-visible{outline:2px solid var(--lime-d);outline-offset:2px;border-radius:6px}

h1,h2,h3,h4{font-family:var(--serif);color:var(--forest);margin:0 0 4px;font-weight:600}
p{margin:0}
b,strong{font-weight:700}

/* ============ Hero ============ */
.hero{position:relative;background:#0a0f07;border-radius:28px;padding:13px;margin-bottom:26px;box-shadow:var(--shadow-lg);border:1px solid rgba(212,168,88,.55)}
.heroFrame{position:relative;border-radius:20px;border:1px solid rgba(212,168,88,.35);padding:36px 34px 38px;overflow:hidden;
  background:
    radial-gradient(38% 55% at 12% 8%,rgba(169,201,63,.32) 0%,rgba(169,201,63,0) 70%),
    radial-gradient(45% 60% at 88% 4%,rgba(169,201,63,.24) 0%,rgba(169,201,63,0) 70%),
    radial-gradient(50% 65% at 82% 92%,rgba(92,122,61,.35) 0%,rgba(92,122,61,0) 70%),
    radial-gradient(45% 55% at 10% 95%,rgba(74,100,49,.3) 0%,rgba(74,100,49,0) 70%),
    linear-gradient(160deg,#131d0d 0%,#0d1409 55%,#080b06 100%);
}
/* Grid, not flex+space-between: a 3-item flex row only centers the middle
   child when the two side children happen to be equal width, which
   PRECISION NUTRITION vs. the short BETA pill never are — the toggle sat
   visibly off-center toward the pill. The fixed 1fr/auto/1fr split forces
   the middle column to sit at true center regardless of the side labels'
   width, while still reserving real column width for the eyebrow (so it
   still wraps to two lines rather than overlapping the toggle, same
   safety the old comment described) instead of floating it via absolute
   positioning, which would have no reserved space at all. */
.heroTopRow{direction:ltr;position:relative;display:grid;grid-template-columns:1fr auto 1fr;column-gap:10px;align-items:center;margin-bottom:22px}
.heroEyebrow{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--gold);text-transform:uppercase;justify-self:start}
.heroBetaPill{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;color:#2a1f0c;background:linear-gradient(180deg,#e9c877,var(--gold-d));padding:5px 14px;border-radius:999px;text-transform:uppercase;box-shadow:0 2px 8px -2px rgba(169,124,34,.6);justify-self:end}
/* Sits in heroTopRow's middle grid column — directly above .heroIconTile
   below it (also horizontally centered, via margin:0 auto), and on the
   same line/height as the eyebrow and BETA pill either side of it
   (align-items:center on the row). Shrunk further at phone widths
   (responsive.css) so it still fits alongside both labels on one line. */
.heroLangToggle{display:flex;align-items:center;gap:8px;flex-shrink:0;justify-self:center}
.langBtn{display:flex;align-items:center;justify-content:center;padding:7px 10px;border-radius:10px;border:1px solid rgba(212,168,88,.3);background:rgba(255,255,255,.04);cursor:pointer;opacity:.5;filter:grayscale(.6);transition:opacity .15s,filter .15s,border-color .15s}
.langBtn svg{display:block;border-radius:2px;width:22px;height:16px}
.langBtn:hover{opacity:.8;filter:grayscale(.2)}
.langBtn.active{opacity:1;filter:none;border-color:var(--gold);box-shadow:0 0 0 1px rgba(212,168,88,.35)}
.heroIconTile{position:relative;width:76px;height:76px;margin:0 auto 26px;border-radius:18px;background:linear-gradient(160deg,#1c2716,#0d1409);border:1px solid rgba(212,168,88,.4);display:flex;align-items:center;justify-content:center;box-shadow:0 0 34px 6px rgba(169,201,63,.4),inset 0 0 0 1px rgba(255,255,255,.03)}
.heroLeafIcon{width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(169,201,63,.5))}
.heroInner{position:relative;max-width:600px;margin:0 auto;text-align:center}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--lime);text-transform:uppercase;display:flex;align-items:center;gap:8px;margin-bottom:10px}
.eyebrow::before{content:'';width:7px;height:7px;background:var(--lime);border-radius:2px;transform:rotate(45deg);flex:0 0 auto}
.eyebrow.small{color:var(--moss);margin-bottom:8px;font-size:13px;font-weight:700;letter-spacing:.09em}
.eyebrow.small::before{background:var(--moss)}
.wordmark{margin-bottom:14px}
.wordmarkGold{display:block;font-family:var(--serif);font-size:32px;font-weight:700;letter-spacing:.02em;line-height:1.2;margin-bottom:16px;background:linear-gradient(180deg,#f3d998 0%,var(--gold) 55%,var(--gold-d) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.wordmarkSub{display:block;font-family:var(--sans);font-size:29px;font-weight:800;color:#fbfaf3;line-height:1.35}
.heroSub{color:#d8c48c;font-size:15px;max-width:480px;margin:16px auto 0}

/* ============ Layout ============ */
/* Always a single stacked column — settings full-width on top, the
   generated plan full-width below. A side-by-side 340px settings column
   read as cramped once embedded at typical iframe widths (see the layout
   change this replaced), and there's no width where a fixed narrow
   settings rail is actually preferable to using the full available width. */
/* minmax(0,1fr), not bare 1fr: a bare <flex> track is minmax(auto,1fr),
 * where auto floors the track at its widest child's own min-content width
 * -- .planCard's day-button row (.week) alone was enough to force this
 * single track (and therefore the whole .grid, and the whole page) to
 * ~437px on a 375px-wide phone, well past the viewport, even though every
 * child inside it (.week included) is otherwise perfectly capable of
 * wrapping/shrinking on its own. minmax(0,...) removes that content-based
 * floor so the track actually respects the container's real width. */
.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
.sidebarCol{display:flex;flex-direction:column;gap:20px;min-width:0}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.sidebar{padding:26px 24px 24px}
.planCard{padding:22px 22px 30px;min-height:320px}
.sideSection{margin-bottom:4px}

/* Goal card is tool 1 — same thin-frame treatment as .foodLogEntryCard
   (tool 2) rather than the old thick one-sided accent bar, for the same
   "slick" look on both entry-point cards. --lime, not --lime-d: brighter
   and less olive than the darker shade the border used before (the badge
   below keeps --lime-d, the same lighter-border/darker-badge pairing
   .foodLogEntryCard already uses with --sky/--sky-d). position:relative
   so its .toolStepBadge can anchor to its own top-left corner. */
.goalCard{position:relative;padding:26px 24px 22px;border:1.5px solid var(--lime);background:linear-gradient(165deg,#fff 0%,#f6f9ea 65%,#f1f6e2 100%);box-shadow:var(--shadow-sm)}
.goalStepActions{margin-top:16px;display:flex;flex-direction:column;gap:2px}
/* Top-level chooser text introducing the two independent entry points
   below it (build-a-menu vs. log-what-I-ate) — sits above .grid, at the
   same max-width/centering as .wrap's own content, so it reads as a
   page-level question rather than belonging to either card. Bold/black/
   smaller per explicit follow-up request — no longer sized to stand in
   for the <h2> heading it originally replaced. */
.chooserHead{max-width:1180px;margin:22px auto;padding:0 22px;text-align:center}
.chooserSubtitle{font-size:20px;font-weight:700;color:var(--ink);margin:0}
/* Physical top-left corner badge (left, not inset-inline-start -- this is
   deliberately the same visual corner in both RTL and LTR, per an
   explicit "upper left" request) marking each entry-point card's step
   number. Card-specific background color set just below, so it reads as
   part of that card's own accent rather than a generic gray chip. */
.toolStepBadge{position:absolute;top:-12px;left:-12px;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:14px;font-weight:800;color:#fff;box-shadow:var(--shadow-sm);z-index:1}
.goalCard .toolStepBadge{background:var(--lime-d)}
/* The food-log entry point's own card, styled in the same sky-blue this
   feature already uses everywhere else (the button inside food-log mode,
   the meal-type/diet chips' active state) so it visually reads as "the
   other tool" rather than a variant of the goalCard just above it.
   position:relative for the same corner-badge anchoring as .goalCard. */
/* margin-top pulls this in closer to .goalCard than .sidebarCol's own
   gap:20px alone would, now that the divider between them (which used to
   occupy part of that space) is gone -- scoped to just this one gap, not
   .sidebarCol's gap itself, so the space before #menuSettings (further
   down the same column) is untouched. */
.foodLogEntryCard{position:relative;margin-top:-6px;padding:22px 24px;border:1.5px solid var(--sky);background:linear-gradient(165deg,#fff 0%,#eaf5fb 70%,#e0f0f9 100%);box-shadow:var(--shadow-sm)}
.foodLogEntryCard .toolStepBadge{background:var(--sky-d)}
.foodLogEntryCard h3{font-family:var(--serif);font-size:19px;font-weight:700;color:var(--ink);margin:8px 0 6px}
.foodLogEntryDesc{font-size:13px;color:var(--forest2);line-height:1.55;margin:0 0 16px}
.linkBtn{width:100%;background:transparent;border:none;color:var(--muted);font-size:12px;text-decoration:underline;padding:8px 4px;text-align:center}
.linkBtn:hover{color:var(--forest2)}
/* The two "back" links (back to tool choice, back to regular planning): larger and black */
#backToToolsBtn,#goalBackToToolsBtn,[data-exit-food-log]{font-size:14px;color:var(--ink)}
#backToToolsBtn:hover,#goalBackToToolsBtn:hover,[data-exit-food-log]:hover{color:var(--ink)}
/* Breathing room above the revealed calorie/protein fields — without it
   they sit flush against personalizeBtn/skipTargetsBtn, especially on the
   "לא מעוניין" path where personalFields never opens to add its own gap. */
#targetFields{margin-top:16px}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--line-strong) 12%,var(--line-strong) 88%,transparent);margin:22px 0;position:relative}
.divider::after{content:'';position:absolute;top:50%;left:50%;width:6px;height:6px;background:var(--lime-d);transform:translate(-50%,-50%) rotate(45deg);border-radius:1px}
.sectionTitle{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--muted);margin:16px 0 8px;text-transform:uppercase}

/* ============ Forms ============ */
label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--muted);margin:14px 0 6px}
label:first-child{margin-top:0}
.goalFieldLabel{font-size:13px;font-weight:700;color:var(--forest2)}
input,select{width:100%;padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:#fff;color:var(--ink);font-family:var(--mono);font-size:13.5px;transition:border-color .15s,box-shadow .15s}
select{font-family:var(--sans);font-size:13.5px;cursor:pointer}
input:hover,select:hover{border-color:#b9c19e}
input:focus,select:focus{border-color:var(--moss);box-shadow:0 0 0 3px rgba(92,122,61,.15);outline:none}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

button{font-family:var(--sans);cursor:pointer;border:none}
.primary{width:100%;margin-top:16px;padding:13px 16px;background:linear-gradient(180deg,var(--sky),var(--sky-d));color:var(--ink);font-weight:700;font-size:14.5px;border-radius:12px;box-shadow:0 4px 14px -4px rgba(58,134,179,.55);transition:transform .12s,box-shadow .12s,filter .12s}
.primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px -6px rgba(58,134,179,.6)}
.primary:active{transform:translateY(0);filter:brightness(.96)}
.primary.continueBtn{background:linear-gradient(180deg,var(--gold),var(--gold-d));box-shadow:0 4px 14px -4px rgba(169,124,34,.55)}
.primary.continueBtn:hover{box-shadow:0 8px 20px -6px rgba(169,124,34,.6)}
.secondary{padding:10px 14px;background:#fff;color:var(--forest2);border:1px solid var(--line-strong);border-radius:11px;font-weight:600;font-size:13px;transition:background .12s,border-color .12s}
.secondary:hover{background:var(--paper);border-color:var(--moss)}
/* Same sky-blue used for the meal-type/diet chips' active state (see
   [data-meal-type].active below) — reused here so the food-log entry
   point reads as its own distinct path, not just another .secondary
   button, without introducing a new color. */
.foodLogBtn{background:var(--sky);border-color:var(--sky-d);color:var(--ink);width:100%}
.foodLogBtn:hover{background:var(--sky-d);border-color:var(--sky-d)}
/* Lighter tint of the continue button's gold — same family, softer weight
   since this is the optional/secondary path through the goal card. */
#personalizeBtn{background:#f7e9c4;border-color:#e2c78a;color:var(--forest2)}
#personalizeBtn:hover{background:#f2ddaa;border-color:var(--gold)}
.mini{width:26px;height:26px;border-radius:8px;background:#fff;border:1px solid var(--line-strong);color:var(--danger);font-size:15px;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:background .12s,border-color .12s}
.mini:hover{background:#fbecec;border-color:var(--danger)}
.iconBtn{width:30px;height:30px;border-radius:9px;background:transparent;color:var(--muted);font-size:18px;display:inline-flex;align-items:center;justify-content:center;transition:background .12s}
.iconBtn:hover{background:var(--paper);color:var(--ink)}

.checks{display:flex;flex-wrap:wrap;gap:7px}
.chip{padding:8px 13px;border-radius:999px;border:1px solid var(--line-strong);background:#fff;color:var(--forest2);font-size:12.5px;font-weight:600;transition:background .12s,border-color .12s,color .12s,transform .12s}
.chip:hover{border-color:var(--moss);transform:translateY(-1px)}
.chip.active{background:var(--moss);border-color:var(--moss-d);color:#fbfaf3;box-shadow:0 2px 8px -2px rgba(74,100,49,.5)}
/* Meal-type (בוקר/צהריים/ערב/נשנוש) and diet-style chips get the sky-blue
   accent instead of the default green when selected — recipe-source chips
   (מתכונים/הרכבה/משולב) and the category-scope button keep their own colors. */
[data-meal-type].active,[data-diet].active{background:var(--sky);border-color:var(--sky-d);color:var(--ink);box-shadow:0 2px 8px -2px rgba(58,134,179,.5)}
[data-meal-type].active:hover,[data-diet].active:hover{border-color:var(--sky-d)}
/* Each weight-goal chip gets its own accent, still drawn from the existing
   palette: moss for the neutral "stay the same" default, sky for "lose"
   (the same cool blue already used for primary actions), gold for "gain"
   (the brand's energy/building color, already used on the continue button). */
/* A couple of shades brighter than --moss/--moss-d specifically for this
   chip's active state (2026-10-02, explicit request) -- scoped to this
   one selector rather than the shared --moss variable, which also drives
   the lunch meal-card accent, focus rings, and every other .chip.active
   elsewhere in the app; none of those were meant to change. */
[data-goal="maintain"].active{background:#748e5a;border-color:#657b50;color:#fbfaf3;box-shadow:0 2px 8px -2px rgba(101,123,80,.5)}
[data-goal="lose"].active{background:var(--sky);border-color:var(--sky-d);color:var(--ink);box-shadow:0 2px 8px -2px rgba(58,134,179,.5)}
[data-goal="gain"].active{background:var(--gold);border-color:var(--gold-d);color:var(--ink);box-shadow:0 2px 8px -2px rgba(169,124,34,.5)}
/* One shade brighter than the gain chip's --gold/--gold-d above (explicit
   request, 2026-10-02) -- previously just fell through to the generic
   .chip.active moss green, which read as an unrelated color next to the
   goal-card's own gold accent it sits directly beside. */
[data-muscle-goal="build"].active{background:#c89b40;border-color:#b08634;color:var(--ink);box-shadow:0 2px 8px -2px rgba(176,134,52,.5)}
.categoryScopeBtn{border-style:dashed;background:#eaf5fb;border-color:#a9d4e8;color:var(--forest2)}
.categoryScopeBtn:hover{border-color:var(--sky)}
.categoryScopeBtn.active{background:#d8ecf6;border-style:solid;border-color:var(--sky);color:var(--sky-d);font-weight:800}

.notice{margin-top:14px;padding:11px 13px;background:var(--paper);border:1px solid var(--line);border-radius:11px;font-size:11.5px;color:var(--muted);line-height:1.55}

/* ============ Disclaimer / consent system ============
   Three layers (see domain/disclaimer.js): a permanent compact card
   (calm, neutral — same visual weight as .notice), a context-sensitive
   warning shown only when a medical condition is selected, and an
   acknowledgment card that gates the Generate button. All three are
   deliberately soft/neutral rather than red-alert styling per the
   "premium, not scary" brief — a small icon and clear type hierarchy do
   the work instead of aggressive color. Later explicitly revised: the
   compact disclaimer text itself is now red, bold and larger than body
   text, per an explicit request to make it more visible rather than
   blend in as calm supporting copy. */
.disclaimerCard{margin-top:16px;padding:13px 15px;background:var(--paper);border:1px solid var(--line);border-radius:13px}
.disclaimerCardHead{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--forest2);text-transform:uppercase}
.disclaimerCardText{margin:6px 0 8px;font-size:14px;font-weight:700;color:var(--danger);line-height:1.6}
.disclaimerLink{width:auto;padding:2px 4px;font-size:12px;color:var(--ink)}
.ackCard{margin-top:16px;padding:16px 17px;background:linear-gradient(165deg,#fff 0%,#fbf3de 70%,#f7ecd0 100%);border:1px solid #e2c78a;border-radius:14px;box-shadow:var(--shadow-sm)}
.ackCardHead{display:flex;align-items:center;gap:7px;font-family:var(--serif);font-size:15px;font-weight:600;color:var(--forest2)}
.ackCardText{margin:8px 0 10px;font-size:12.5px;color:var(--forest2);line-height:1.65}
.conditionWarnings:empty{display:none}
.conditionWarningText{display:flex;align-items:flex-start;gap:6px;margin:0 0 8px;padding:9px 11px;background:rgba(255,255,255,.6);border-radius:10px;font-size:12px;color:var(--forest2);line-height:1.55}
.ackCheckboxRow{display:flex;align-items:flex-start;gap:9px;margin:12px 0 6px;font-size:12.5px;color:var(--ink);line-height:1.55;cursor:pointer}
.ackCheckboxRow input[type=checkbox]{width:18px;height:18px;flex:0 0 auto;margin-top:1px;accent-color:var(--gold-d);cursor:pointer}
.primary:disabled,.primary[aria-disabled=true]{background:var(--line);color:var(--muted);box-shadow:none;cursor:not-allowed;transform:none}
.primary:disabled:hover,.primary[aria-disabled=true]:hover{transform:none;box-shadow:none}
/* Wider than .modal's default 520px — the full disclaimer is a genuine
   legal document, not a short picker, and needs a comfortable reading
   column (spec: ~700-850px on desktop). */
.disclaimerModal{max-width:820px}
.disclaimerModalSubtitle{font-family:var(--mono);font-size:11px;color:var(--muted);margin-bottom:14px;letter-spacing:.02em}
.disclaimerModalBody{max-height:60vh;max-height:60dvh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-inline-end:6px;font-size:13.5px;line-height:1.75;color:var(--ink)}
.disclaimerModalBody .disclaimerIntro{color:var(--forest2);font-weight:600;margin-bottom:18px}
.disclaimerModalBody h4{font-family:var(--serif);font-size:15px;font-weight:600;color:var(--forest);text-transform:none;letter-spacing:0;margin:20px 0 8px}
.disclaimerModalBody h4:first-of-type{margin-top:0}
.disclaimerModalBody p{margin:0 0 10px}
.disclaimerModalBody ul,.disclaimerModalBody ol{margin:0 0 12px;padding-inline-start:22px}
.disclaimerModalBody li{margin-bottom:5px}
.modalFootActions{display:flex;justify-content:flex-end;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.modalFootActions .secondary{width:auto;padding:9px 22px}
.recipeInfoModal{max-width:680px}
.recipeInfoModalBody{max-height:60vh;max-height:60dvh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-inline-end:6px;font-size:13.5px;line-height:1.7;color:var(--ink)}
.recipeInfoModalBody ol{margin:0 0 12px;padding-inline-start:22px}
.recipeInfoModalBody li{margin-bottom:7px}
.recipeInfoMetaRow{display:flex;gap:8px;margin-bottom:14px}
.recipeInfoMetaBadge{font-family:var(--mono);font-size:13px;font-weight:700;border-radius:9px;padding:2px 9px;white-space:nowrap;color:var(--forest2);background:color-mix(in srgb,var(--forest2) 14%,transparent);border:1.5px solid color-mix(in srgb,var(--forest2) 35%,transparent)}
.recipeInfoNote{font-size:12.5px;color:var(--muted);background:var(--paper);border-radius:8px;padding:8px 10px;margin:0 0 12px}
.recipeInfoSource{font-size:12px;color:var(--muted)}
.recipeInfoSource a{color:var(--forest2)}
.recipeInfoBtn{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px;border-radius:14px;background:transparent;border:1.5px solid color-mix(in srgb,var(--muted) 35%,transparent);color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;flex:0 0 auto;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.recipeInfoBtn:hover{background:var(--paper);color:var(--forest2);border-color:var(--forest2)}
.panIcon{flex:0 0 auto}
/* Pan starts empty (outline only); the "food" group fades in on hover so
   the icon visually goes from an empty pan to a pan with food, mirroring
   the rotate-on-hover flourish on .shuffleBtn's icon just above. */
.panFood{opacity:0;transition:opacity .25s}
.recipeInfoBtn:hover .panFood{opacity:1}
.goalPreviewBox{margin-top:2px}
.goalHint{margin:10px 0 0;font-size:12px;color:var(--forest2);line-height:1.55}
.goalHint b{font-family:var(--mono);color:var(--forest)}
.goalNote{margin:5px 0 0;font-size:10.5px;color:var(--muted);line-height:1.5}
.goalWarn{margin:8px 0 0;padding:9px 11px;background:#f8ecec;border:1px solid #e3bcbc;border-radius:9px;color:var(--danger);font-size:11.5px;line-height:1.5}
#bodyRecompNote,#gainBuildNote{margin-top:18px}
#targetWeightField{margin-top:18px}

/* ============ Week tabs + summary ============ */
.week{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.daybtn{padding:8px 12px;border-radius:11px;border:1px solid var(--line-strong);background:#fff;color:var(--forest2);font-family:var(--mono);font-size:12px;font-weight:600;white-space:nowrap;transition:all .12s}
.daybtn:hover{border-color:var(--moss)}
.daybtn.active{background:var(--forest);border-color:var(--forest);color:#fbfaf3}

.summary{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:22px}
.targetStat{background:var(--paper);border:1px solid var(--line);border-radius:13px;padding:14px 16px}
.targetStatHead{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:9px}
.targetStatHead .eyebrow{margin:0;color:var(--moss-d)}
.targetStatNums{font-family:var(--mono);font-size:15px;color:var(--ink)}
.targetStatNums i{font-style:normal;color:var(--muted);font-size:12px}
.progressTrack{height:7px;border-radius:99px;background:#e5e2d3;overflow:hidden}
.progressFill{height:100%;background:linear-gradient(90deg,var(--moss),var(--lime-d));border-radius:99px;transition:width .4s ease}
.progressFill.over{background:linear-gradient(90deg,var(--gold),var(--wine))}
.summaryMeta{grid-column:1/-1;font-family:var(--mono);font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.02em}
/* Heads-up, not a warning — reuses the ackCard's gold/amber palette
   (informational) rather than goalWarn's red (cautionary), since this
   just reflects a shuffle/replace/quantity edit pushing the day away
   from target, not something wrong with the plan. Shown only when the
   deviation is large enough to matter (see render()'s calSignificant/
   proSignificant), so it doesn't fire on routine small adjustments. */
.deviationAlert{grid-column:1/-1;margin:24px 0 22px;padding:9px 11px;background:linear-gradient(165deg,#fff 0%,#fbf3de 70%,#f7ecd0 100%);border:1px solid #e2c78a;border-radius:9px;color:var(--forest2);font-size:12.5px;font-weight:600;line-height:1.5}

.stat{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.stat small{display:block;font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-bottom:4px}
.stat b{font-family:var(--mono);font-size:17px;color:var(--ink)}

/* ============ Meal cards ============ */
.meal{border:1px solid var(--line);border-radius:15px;padding:18px 20px;margin-bottom:16px;background:#fff;border-inline-start:4px solid var(--moss);transition:box-shadow .15s;animation:mealIn .32s ease-out both}
.meal:hover{box-shadow:var(--shadow-sm)}
.meal[data-meal-type="breakfast"]{border-inline-start-color:var(--gold)}
.meal[data-meal-type="lunch"]{border-inline-start-color:var(--moss)}
.meal[data-meal-type="dinner"]{border-inline-start-color:var(--forest)}
.meal[data-meal-type="snack"]{border-inline-start-color:var(--wine)}
@media(prefers-reduced-motion:no-preference){@keyframes mealIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes mealSlide{from{opacity:0;transform:translateX(var(--slide-from,0))}to{opacity:1;transform:translateX(0)}}.meal.slideIn{animation:mealSlide .26s ease-out both}}
@media(prefers-reduced-motion:reduce){.meal{animation:none}}
/* One meal at a time: chip row above it (same look as the day chips) and a
   horizontal-swipe gesture on #plan. pan-y keeps normal vertical scrolling
   native; the swipe itself is handled in ui/renderer.js's bind(). */
#plan{touch-action:pan-y pinch-zoom}
.mealTabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.mealTab{font-family:inherit;font-size:13px;display:inline-flex;align-items:center;gap:5px}

.mealhead{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:12px}
.mealTitleBlock{flex:1}
.mealname{font-family:var(--serif);font-size:18px;font-weight:600;color:var(--forest);margin-bottom:6px}
.mealStats{display:flex;gap:16px}
.mealStat{display:flex;flex-direction:column}
.mealStat b{font-family:var(--mono);font-size:15px;color:var(--ink)}
.mealStat small{font-family:var(--mono);font-size:10px;color:var(--muted)}
/** This card's own palette -- deliberately separate --plate-* tokens, not
 * the shared --macro-* ones (those are also reused for the GI/GL badges'
 * low/medium/high coloring; repointing them here would have silently
 * recolored those too). Chosen to match an explicit reference screenshot
 * (teal/olive/orange on a dark card) rather than this app's brand vein
 * palette, same "macro chart gets its own palette for readability"
 * precedent as --macro-* itself already established. */
:root{
  --plate-protein:#0057b8;
  --plate-carbs:#25d366;
  --plate-fat:#f40009;
  --plate-fiber:#f0ce3a;
}
.mealVisual{margin:6px 0 14px}
/** Same dark near-black-green surface the hero header already uses (see
 * .hero) -- reused rather than inventing a second dark treatment. */
.mealMacroCard{background:var(--ink);border-radius:16px;padding:16px 18px;color:#fbfaf3}
.mealMacroHead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.mealMacroActions{display:flex;gap:6px;flex-wrap:wrap}
.pillAction{padding:7px 12px;border-radius:999px;background:#fbfaf3;border:1px solid rgba(251,250,243,.18);color:var(--ink);font-size:11px;font-weight:600;transition:background .12s}
.pillAction:hover{background:#e4e0d1}
/* Food-log mode's only pill (no refresh/replace next to it — see
   macroPlate()'s opts.logMode branch) — the translucent-white default
   above was designed to sit quietly alongside two other pills on the
   dark card and reads as blended-into-the-background when it's the only
   one there. Same sky-blue as the food-log entry button/chips
   ([data-meal-type].active), scoped to this one class so the normal
   generator flow's pills (still 2-3 per card) are untouched. */
.pillActionSky{background:var(--sky);border-color:var(--sky-d);color:#fff}
.pillActionSky:hover{background:var(--sky-d)}
.mealMacroTitleBlock{text-align:start}
.mealMacroTitle{font-family:var(--serif);font-size:17px;font-weight:700;color:#fbfaf3}
.mealMacroSubtitle{font-size:11px;color:#d8c48c;margin-top:3px;max-width:220px}
.mealMacroBody{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.mealMacroLegend{display:flex;flex-direction:column;gap:10px;flex:0 1 auto;min-width:150px}
.mealMacroLegendRow{display:flex;align-items:center;gap:8px;font-size:12.5px}
.mealMacroLegendRow b{font-weight:400;color:#d8c48c;order:2}
.mealMacroLegendRow span{font-family:var(--mono);font-weight:700;color:#fbfaf3;font-size:13.5px;order:3}
.mealMacroLegendRow .dot{order:1}
.plate{position:relative;flex:0 0 auto}
.plate svg{width:120px;height:120px;display:block}
.plateTrack{stroke:rgba(251,250,243,.12)}
.plateArc{stroke-linecap:butt;transition:stroke-dasharray .3s}
.plateArc.protein{stroke:var(--plate-protein)}
.plateArc.carbs{stroke:var(--plate-carbs)}
.plateArc.fat{stroke:var(--plate-fat)}
.plateArc.fiber{stroke:var(--plate-fiber)}
.plateCenter{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.plateCenter b{font-family:var(--mono);font-size:22px;font-weight:800;color:#fbfaf3;line-height:1.1}
.plateCenter span{font-size:10px;color:#d8c48c;margin-top:2px}
.dot{width:9px;height:9px;border-radius:3px;display:inline-block;flex:0 0 auto}
.dot.protein{background:var(--plate-protein)}
.dot.carbs{background:var(--plate-carbs)}
.dot.fat{background:var(--plate-fat)}
.dot.fiber{background:var(--plate-fiber)}

.foods{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.food{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 4px;border-top:1px solid var(--line)}
.foods li.food:first-child{border-top:none}
.foodInfo{flex:1;min-width:0}
.foodInfo>b{font-size:13.5px;color:var(--ink);font-weight:700}
.foodNameRow{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
/* Pushes the stepper/remove controls to the far end of the name row, on the
   same line as the dish name and its GI/GL badges -- previously .itemBtns
   sat as a sibling of the whole .foodInfo block, so align-items:center on
   .food vertically centered it against the FULL height of a recipe's
   ingredient breakdown, landing it beside the middle of that box instead of
   beside the name it actually belongs to. */
.foodNameRow .itemBtns{margin-inline-start:auto}
/* 50% larger than this badge's original 10px/1px 6px, per an explicit
   request to make both GI and GL easier to read at a glance.
   Shapes swapped 2026-09-29 per explicit request: GI is now the circle,
   GL the rectangle (was the other way around) -- same two-shapes-for-
   two-metrics rationale as before, just flipped which metric gets which
   shape. A fixed-diameter circle can't hold "GI 100" on one line at a
   readable size, so the label and value stack on two lines instead
   (.giBadgeLabel/.giBadgeValue). Sized to comfortably fit this app's
   realistic GI range (0-100) without the circle needing to grow. */
.giBadge{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:44px;height:44px;box-sizing:border-box;border-radius:50%;background:color-mix(in srgb,var(--gi-color) 14%,transparent);border:1.5px dashed color-mix(in srgb,var(--gi-color) 50%,transparent);flex:0 0 auto;line-height:1.15;padding:0}
.giBadgeLabel{font-family:var(--mono);font-size:9px;font-weight:700;color:var(--gi-color);opacity:.75;letter-spacing:.03em}
.giBadgeValue{font-family:var(--mono);font-size:14px;font-weight:800;color:var(--gi-color)}
/* Glycemic load — now the rectangle shape (see ui/renderer.js's
   glReadout), single line since "GL 14.9" fits comfortably at this
   font size without needing to stack. */
.glBadge{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--gl-color);background:color-mix(in srgb,var(--gl-color) 14%,transparent);border:1.5px solid color-mix(in srgb,var(--gl-color) 35%,transparent);border-radius:9px;padding:2px 9px;flex:0 0 auto;white-space:nowrap}
.veganBadge{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:color-mix(in srgb,var(--moss) 18%,transparent);border:1.5px solid color-mix(in srgb,var(--moss) 45%,transparent);font-size:13px;line-height:1;flex:0 0 auto}
.removedNote{font-weight:400;font-size:12px;color:var(--muted)}
.shuffleBtn{height:28px;padding:0 10px;border-radius:14px;background:transparent;border:1.5px solid color-mix(in srgb,var(--muted) 35%,transparent);color:var(--muted);font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:4px;cursor:pointer;flex:0 0 auto;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.shuffleBtn span[aria-hidden]{font-size:14px;line-height:1;transition:transform .3s}
.shuffleBtn:hover{background:var(--paper);color:var(--moss-d);border-color:var(--moss-d)}
.shuffleBtn:hover span[aria-hidden]{transform:rotate(80deg)}
.foodMacroSummary{margin-top:3px}
.foodMacroPrimary{font-family:var(--mono);font-size:12px;color:var(--forest2);display:flex;gap:6px;flex-wrap:wrap}
.gramHint{color:var(--muted)}
.foodMacroSecondary{font-family:var(--mono);font-size:11px;color:var(--muted);display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.recipeBreakdown{margin-top:8px;padding:9px 11px;background:var(--paper);border-radius:9px}
.recipeBreakdownTitle{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:.04em}
/* Grid, not flex-column-of-flex-rows: each ingredient row used to be its
 * own independent flex container, so justify-content:space-between placed
 * the middle stepper at a different x-position per row depending on that
 * row's own name/total text width -- visually misaligned steppers down the
 * list. A shared grid on the parent gives every row the same column
 * widths; .recipeIngredient becomes display:contents so its children
 * (name/stepper/total/remove) drop directly into that shared grid as one
 * "row" without an extra wrapping box -- inherited properties (color,
 * font-size, font-weight) still reach them normally, since display:contents
 * removes only the box, not the DOM node itself. The 4th column is only
 * ever present or absent for a whole row at once (removeIngredient refuses
 * to drop a recipe to zero ingredients, so the "no remove button" case only
 * happens when exactly one row is being rendered at all -- nothing else in
 * that grid to misalign against). */
.recipeIngredients{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;column-gap:8px;row-gap:6px}
.recipeIngredient{display:contents;font-size:11.5px;color:var(--forest2)}
/* Lets the name and its GI badge share this minmax(0,1fr) cell without
 * overflowing it: the badge itself is white-space:nowrap (never wraps
 * mid-word) and the name text wraps normally, so when they don't both fit
 * on one line the badge drops to its own line instead of spilling past
 * the cell into the stepper column next to it (the overlap this fixed,
 * surfaced by narrowing this same column to stop the whole page from
 * overflowing on mobile -- see .recipeIngredients' own minmax(0,1fr)). */
.recipeIngredientName{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px;min-width:0}
.recipeIngredient b{font-family:var(--mono);font-weight:600;white-space:nowrap}
.recipeIngredient.overridden{color:var(--forest);font-weight:700}
.recipeIngredient .mini{width:20px;height:20px;font-size:12px}
/* Non-editable breakdown (composite foods.js/recipes.js items with an
 * ingredients array but no isRecipe:true -- see recipeBreakdown()'s
 * comment in ui/renderer.js): each row is only 2 children (name, total),
 * not 3, so it keeps its own independent flex row instead of joining the
 * 3-column stepper grid above -- with exactly 2 children, space-between
 * always pins one to each end regardless of text width, so this never had
 * the misalignment problem the 3-column stepper rows did. */
.recipeIngredients.readOnly{display:flex;flex-direction:column;gap:3px}
.recipeIngredients.readOnly .recipeIngredient{display:flex;justify-content:space-between}
.resetOverride{width:auto;padding:0 8px;border-radius:8px;font-size:11px;margin-top:4px}
.computedTotal{font-family:var(--mono);font-size:13px;font-weight:600}

.itemBtns{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.qtyStepper{display:flex;align-items:center;border:1px solid var(--line-strong);border-radius:9px;overflow:hidden;background:#fff}
.qtyStep{width:24px;height:30px;background:var(--paper);color:var(--forest2);font-family:var(--mono);font-size:14px;display:flex;align-items:center;justify-content:center;transition:background .12s}
.qtyStep:hover{background:#e8e5d4}
.qty{width:56px!important;border:none!important;border-radius:0!important;text-align:center;padding:6px 2px!important;box-shadow:none!important;-moz-appearance:textfield}
.qty::-webkit-outer-spin-button,.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qtyUnit{font-family:var(--mono);font-size:10.5px;color:var(--muted);min-width:16px}

.empty{padding:40px 20px;text-align:center;color:var(--muted);font-size:13.5px;background:var(--paper);border-radius:12px;border:1px dashed var(--line-strong)}

/* ============ Trial-workout WhatsApp CTA ============
   Shown at the bottom of the plan, only once a plan actually exists (see
   renderWhatsappCta in ui/renderer.js) — deliberately not styled like the
   rest of the brand-palette cards; WhatsApp's own green is instantly
   recognizable as "this opens a chat," which matters more here than
   strict palette consistency for a single, deliberately-standout CTA. */
.whatsappCta{margin-top:22px;padding:26px 24px;border-radius:16px;text-align:center;background:linear-gradient(165deg,var(--forest) 0%,#1c2716 100%);box-shadow:var(--shadow-md)}
.whatsappCtaTitle{font-family:var(--serif);font-size:17px;font-weight:600;color:#fbfaf3;margin:0 0 6px}
.whatsappCtaText{font-size:13.5px;color:#d9dfca;max-width:480px;margin:0 auto 18px;line-height:1.6}
.whatsappCtaBtn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:999px;background:#25d366;color:#0b1a10;font-weight:700;font-size:14.5px;text-decoration:none;box-shadow:0 4px 14px -4px rgba(37,211,102,.55);transition:transform .12s,box-shadow .12s}
.whatsappCtaBtn:hover{transform:translateY(-1px);box-shadow:0 8px 20px -6px rgba(37,211,102,.6)}

/* ============ Modals ============ */
/* On mobile, a touch-scroll that starts on the fixed .overlay (or that
   chains past a nested scroll container's own boundary) would otherwise
   scroll the page underneath the modal — the page has no idea a modal is
   covering it, since .overlay is just a fixed-position layer on top, not
   an actual scroll trap. body.modalOpen (toggled in ui/renderer.js's
   render(), based on whether #modalRoot actually has content) is the
   single source of truth for "is any modal open", so this stays correct
   for every modal (add-item/replace/category-scope/food-preference/
   disclaimer) without each one needing its own open/close scroll-lock
   code. overscroll-behavior:contain on the overlay and every nested
   scrollable region below stops scroll *chaining* at each boundary too —
   without it, scrolling a nested list (e.g. .results) to its end bleeds
   into the container above it, which reads as "the whole dialog jumped"
   on a touchscreen (much less noticeable with a mouse wheel on desktop,
   which is why this only surfaced as a mobile complaint). */
body.modalOpen{overflow:hidden}
.overlay{position:fixed;inset:0;background:rgba(20,23,15,.5);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:20px;z-index:1000;overscroll-behavior:contain}
.modal{background:var(--card);border-radius:18px;padding:22px 24px;max-width:520px;width:100%;max-height:86vh;max-height:86dvh;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;box-shadow:var(--shadow-lg)}
.modalHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.modalHead h3{font-size:18px}
.hint{color:var(--muted);font-size:12.5px;margin:6px 0 14px;line-height:1.5}
#modalSearch{margin-bottom:10px}
.results{display:flex;flex-direction:column;gap:7px;max-height:340px;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.result{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 13px;background:#fff;border:1px solid var(--line);border-radius:11px;text-align:start;transition:border-color .12s,background .12s}
.result:hover{border-color:var(--moss);background:var(--paper)}
.result b{font-size:13px;color:var(--ink)}
.result small{display:block;font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:2px}
.resultNutrition{display:block;font-family:var(--mono);font-size:10.5px;color:var(--moss-d);margin-top:2px;text-align:right}
.result strong{font-family:var(--mono);font-size:12.5px;color:var(--forest2);white-space:nowrap}
.result strong small{color:var(--muted)}
.selectItems{display:flex;flex-direction:column;gap:6px;margin:10px 0 4px}
.selectItem{display:flex;justify-content:space-between;padding:10px 13px;border-radius:10px;border:1px solid var(--line);background:#fff;font-size:12.5px;color:var(--ink)}
.selectItem span{font-family:var(--mono);color:var(--muted)}
.selectItem.selected{border-color:var(--moss);background:#eef2e5;font-weight:700}
.modal h4{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:16px 0 8px;font-weight:600}

.categoryScopeBtn.active{background:#d8ecf6;border-color:var(--sky);color:var(--sky-d);font-weight:800}
.categoryModal{width:min(680px,100%)}
.categoryGroupTitle{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:600;color:var(--muted);margin:14px 0 8px}
.categoryGroupTitle:first-of-type{margin-top:10px}
.categoryGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 4px}
.categoryOption{display:flex;align-items:center;gap:9px;margin:0;padding:11px 12px;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--ink);font-size:12.5px;cursor:pointer;transition:border-color .12s,background .12s}
.categoryOption:hover{border-color:var(--moss)}
.categoryOption:has(input:checked){background:#eef4de;border-color:var(--lime-d)}
.categoryOption input{width:17px;height:17px;accent-color:var(--moss);flex:0 0 auto}
.catDot{width:8px;height:8px;border-radius:2px;flex:0 0 auto;transform:rotate(45deg)}
.categoryOption[data-cat="protein"] .catDot,.categoryOption[data-cat="legume"] .catDot,.categoryOption[data-cat="plant_protein"] .catDot{background:var(--moss)}
.categoryOption[data-cat="carb"] .catDot,.categoryOption[data-cat="fruit"] .catDot,.categoryOption[data-cat="beef"] .catDot{background:var(--gold)}
.categoryOption[data-cat="fat"] .catDot,.categoryOption[data-cat="dairy"] .catDot,.categoryOption[data-cat="protein_enriched"] .catDot,.categoryOption[data-cat="wine"] .catDot,.categoryOption[data-cat="nuts"] .catDot,.categoryOption[data-cat="cheese"] .catDot{background:var(--wine)}
.categoryOption[data-cat="vegetable"] .catDot,.categoryOption[data-cat="poultry"] .catDot,.categoryOption[data-cat="fish"] .catDot{background:var(--forest)}
.categoryOption[data-cat="salad"] .catDot,.categoryOption[data-cat="eggs"] .catDot,.categoryOption[data-cat="sandwich"] .catDot{background:var(--lime-d)}
.categoryOption[data-cat="spread"] .catDot,.categoryOption[data-cat="meal"] .catDot,.categoryOption[data-cat="snack"] .catDot{background:var(--muted)}
.categoryActions{display:flex;gap:8px;margin-top:12px}
.categoryActions .primary{margin-top:0;flex:1}
.categoryActions .secondary{flex:0 0 auto}
.categoryDisable{width:100%;margin-top:8px}
#foodPrefSearch{margin-bottom:10px}
.prefSelectAll{width:100%;justify-content:flex-start;font-weight:700;background:#eef4de;border-color:var(--lime-d);margin-bottom:8px}
.prefSelectAllOn{background:#f7e8e6;border-color:var(--wine)}
.prefChips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 4px}
.prefChip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#eef4de;border:1px solid var(--lime-d);color:var(--forest2);font-size:12px;font-weight:600}
.prefChipRemove{background:none;border:none;color:var(--forest2);font-size:14px;line-height:1;cursor:pointer;padding:0}

@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
/* Active meal tab uses the same sky blue as the other meal-type/diet chips
   (see [data-meal-type].active above), unlike the 1-7 day chips it otherwise
   shares a style with, which stay dark green. */
.mealTab.active{background:var(--sky);border-color:var(--sky-d);color:var(--ink);box-shadow:0 2px 8px -2px rgba(58,134,179,.5)}
.chip:disabled{opacity:.38;cursor:not-allowed}

/* Daily vitamins & minerals card (sits between .deviationAlert and .whatsappCta) */
.microCard{grid-column:1/-1;border:1px solid var(--line);border-radius:15px;padding:18px 20px;margin:0 0 22px;background:#fff;border-inline-start:4px solid var(--moss)}
.microTitle{font-family:'Frank Ruhl Libre',serif;font-size:19px;margin:0 0 2px;color:var(--ink)}
.microSub{font-size:12.5px;color:var(--muted);margin:0 0 12px}
.microGroup{margin:0 0 8px}
.microGroupTitle{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--forest2);margin:14px 0 6px;padding-top:10px;border-top:1px dashed var(--line)}
.microRow{display:grid;grid-template-columns:1fr auto 56px;column-gap:10px;align-items:baseline;padding:6px 0}
.microName{font-size:13.5px;font-weight:600;color:var(--ink)}
.microAmt{font-family:var(--mono);font-size:12.5px;color:var(--muted);direction:ltr;unicode-bidi:isolate}
.microPct{font-family:var(--mono);font-size:13px;font-weight:700;text-align:end;direction:ltr;unicode-bidi:isolate}
.microBar{grid-column:1/-1;height:6px;border-radius:4px;background:color-mix(in srgb,var(--ink) 8%,transparent);margin-top:4px;overflow:hidden}
.microBar i{display:block;height:100%;border-radius:4px;background:#b5b9b0}
.microRow.low .microPct{color:var(--muted)}
.microRow.good .microPct{color:var(--forest2)}
.microRow.good .microBar i{background:#4f8a3a}
.microRow.over .microPct,.microRow.over .microName{color:#b4531c}
.microRow.over .microBar i{background:#d9822b}
.microFlag{font-style:normal;font-size:11.5px;font-weight:700;color:#b4531c}
.microToggle{margin-top:6px;background:none;border:1.5px solid var(--line);border-radius:9px;padding:7px 14px;font:600 13px Heebo,sans-serif;color:var(--forest2);cursor:pointer}
.microToggle:hover{background:var(--paper)}
.microNote{font-size:11.5px;color:var(--muted);margin:12px 0 0;line-height:1.5}

/* Shown by application/api.js when the rate limit (HTTP 429) blocks a request */
.rateLimitToast{position:fixed;inset-inline:16px;bottom:20px;margin-inline:auto;max-width:460px;z-index:1100;padding:12px 16px;border-radius:12px;background:var(--ink);color:#fff;font-size:14px;font-weight:600;line-height:1.5;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.25)}

/* Tip above the meal-structure step: nudges users to set food/cuisine preferences */
.menuPrefsTip{margin:0 0 16px;padding:10px 12px;background:linear-gradient(165deg,#fff 0%,#fbf3de 70%,#f7ecd0 100%);border:1px solid #e2c78a;border-radius:9px;color:var(--forest2);font-size:13px;font-weight:500;line-height:1.55}
.menuPrefsTip b{font-weight:800;color:var(--ink)}

/* "Foods I want to see more of" / "Foods I don't want" labels: bigger, bold, black, with a green + / red x badge */
label[data-i18n="preferLabel"],label[data-i18n="excludeLabel"]{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--ink)}
label[data-i18n="preferLabel"]::before,label[data-i18n="excludeLabel"]::before{flex:none;display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;color:#fff;font-size:13px;font-weight:800;line-height:1}
label[data-i18n="preferLabel"]::before{content:"+";background:#2f9e44}
label[data-i18n="excludeLabel"]::before{content:"\2715";background:#d63030;font-size:10px}

/* Category chips inside the exclude/prefer modal */
.prefCats{margin:8px 0 10px;padding:8px 10px;border:1px solid var(--line);border-radius:11px;background:var(--paper)}
.prefCatsScroll{max-height:150px;overflow-y:auto;padding-inline-end:2px}
.prefCatsFooter{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.prefCatsCount{font-size:12px;font-weight:700;color:var(--ink)}
.prefApplyBtn{padding:8px 24px;border:0;border-radius:10px;background:linear-gradient(180deg,var(--sky),var(--sky-d));color:#fff;font:700 14px Heebo,sans-serif;cursor:pointer}
.prefCatsTitle{font-size:11.5px;color:var(--muted);margin-bottom:6px}
.prefCatGroup{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:0 0 6px}
.prefCatGroupTitle{font-size:11px;font-weight:700;color:var(--forest2);margin-inline-end:4px}
.prefCatChip{font:600 12px Heebo,sans-serif;padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);cursor:pointer}
.prefCatChip:hover{border-color:var(--moss)}
.prefCatChip.active{background:var(--moss);border-color:var(--moss);color:#fff}