/* =============================================================================
   ThriveChamp - body.css
   Body card + Replace Meal modal + Snacks (visual only)
   ========================================================================== */

/* ===== Global tokens (meal UI + modal) ==================================== */
:root{
  /* Meal row / pills */
  --meal-swap-size:   22px;
  --meal-swap-gap:     8px;
  --meal-extend-right: 6px;
  --meal-dots-gap:   0.5px;

  /* Replace modal core tokens */
  --rep-modal-pad:     16px;
  --rep-modal-radius:  16px;
  --rep-mint-bg:       #f4fff7;
  --rep-border:        rgba(0,0,0,.08);
  --rep-tab-border:    rgba(0,0,0,.10);

  /* Inputs */
  --rep-input-height: 38px;
  --rep-input-radius: 8px;
  --rep-input-border: #94a3b8;

  /* Slider (macros) */
  --rep-range-h: 16px;            /* control cap height (number boxes) */
  --rep-thumb:   19px;
  --rep-track-bg:#e5e7eb;
  --rep-focus:   2px solid #98c9ff;
}

/* =============================================================================
   Lock Meal modal (match swap styling, tidy spacing)
   -------------------------------------------------------------------------- */
#lockMealModal.modal{
  background: var(--rep-mint-bg);
  padding: 8px;
  border: 1px solid var(--rep-border);
}
#lockMealModal .modal-hd,
#lockMealModal .modal-bd,
#lockMealModal .modal-ft{
  background: var(--rep-mint-bg);
  padding: 12px 16px;
  margin: 0;
}
#lockMealModal .modal-hd{
  border-bottom: 2px solid #0f6a2e; /* dark green underline */
  padding-bottom: 10px;
}
#lockMealModal .modal-hd .k{ margin:0; }
#lockMealModal .modal-bd p{ margin:0; }
#lockMealModal .modal-ft{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding-top:12px;
}

/* Lock Snack modal (light blue theme) */
#lockSnackModal.modal{
  background:#eafaff;
  padding:8px;
  border:1px solid rgb(118, 165, 177);
}
#lockSnackModal .modal-hd,
#lockSnackModal .modal-bd,
#lockSnackModal .modal-ft{
  background:#eafaff;
  padding:12px 16px;
  margin:0;
}
#lockSnackModal .modal-hd{
  border-bottom:2px solid #0b3041; /* dark blue underline */
  padding-bottom:10px;
}
#lockSnackModal .modal-hd .k{ margin:0; }
#lockSnackModal .modal-bd p{ margin:0; }
#lockSnackModal .modal-ft{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding-top:12px;
}
#lockWorkoutModal.modal{
  background: var(--rep-mint-bg);
  padding:8px;
  border:1px solid var(--rep-border);
}
#lockWorkoutModal .modal-hd,
#lockWorkoutModal .modal-bd,
#lockWorkoutModal .modal-ft{
  background: var(--rep-mint-bg);
  padding:12px 16px;
  margin:0;
}
#lockWorkoutModal .modal-hd{
  border-bottom:2px solid #0f6a2e; /* dark green underline */
  padding-bottom:10px;
}
#lockWorkoutModal .modal-hd .k{ margin:0; }
#lockWorkoutModal .modal-bd p{ margin:0; }
#lockWorkoutModal .modal-ft{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding-top:12px;
}

/* =============================================================================
   1) BODY CARD STRUCTURE
   -------------------------------------------------------------------------- */
#bodyCard .body-section + .body-section{
  border-top:1px solid rgba(6,105,42,.50);
  padding-top:18px;
  margin-top:18px;
}
.card.body .body-subhead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:2px 0 6px;
}
.card.body .body-subhead .muted{
  margin:0;
}
.card.body .body-share-btn{
  width:26px;
  height:26px;
  min-width:26px;
  min-height:26px;
  aspect-ratio:1 / 1;
  padding:0;
  border-radius:999px;
  box-sizing:border-box;
  appearance:none;
  -webkit-appearance:none;
  border:1px solid rgba(42, 127, 68, .34);
  background:linear-gradient(180deg, rgba(224, 251, 229, .9) 0%, rgba(158, 232, 178, .86) 100%);
  color:#1e7b3f;
  font-size:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 5px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.6);
  cursor:pointer;
  flex:0 0 auto;
  margin-right:3px;
}
.card.body .body-share-btn::before{
  content:"";
  display:block;
  width:14px;
  height:14px;
  transform:translateX(-1px);
  background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cline x1='8.2' y1='11.2' x2='15.8' y2='6.7' stroke='%231e7b3f' stroke-width='2.2' stroke-linecap='round'/%3E%3Cline x1='8.2' y1='12.8' x2='15.8' y2='17.3' stroke='%231e7b3f' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='6' cy='12' r='3.1' fill='%231e7b3f'/%3E%3Ccircle cx='18' cy='5' r='3.1' fill='%231e7b3f'/%3E%3Ccircle cx='18' cy='19' r='3.1' fill='%231e7b3f'/%3E%3C/svg%3E");
}
.card.body .body-share-btn:not([disabled]):hover{
  border-color:rgba(29, 117, 58, .42);
  background:linear-gradient(180deg, rgba(232, 252, 236, .98) 0%, rgba(171, 239, 188, .92) 100%);
}
.card.body .body-share-btn:focus-visible{
  outline:2px solid rgba(34, 197, 94, .45);
  outline-offset:2px;
}
.card.body .body-share-btn:active{
  transform:translateY(1px);
}
.card.body .body-share-btn[disabled]{
  opacity:.42;
  cursor:not-allowed;
  filter:saturate(.72);
  box-shadow:0 1px 3px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.45);
}
.subhead{ font-weight:800; font-size:16px; margin-bottom:6px; }
.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.section-head .subhead{ margin-bottom:0; }
.meals-head{
  margin-top:12px;
  margin-bottom:6px;
}
.meal-history-btn{
  position:relative;
  top:-3px;
  width:26px;
  height:26px;
  min-width:26px;
  min-height:26px;
  padding:0;
  border-radius:999px;
  appearance:none;
  -webkit-appearance:none;
  border:1px solid rgba(32, 58, 97, .26);
  background:linear-gradient(180deg, rgba(234, 250, 255, .95) 0%, rgba(184, 228, 255, .92) 100%);
  box-shadow:0 2px 5px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.6);
  cursor:pointer;
  flex:0 0 auto;
  margin-right:3px;
}
.meal-history-btn::before{
  content:"";
  display:block;
  width:14px;
  height:14px;
  margin:auto;
  background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='3,16 8,11 12,14 19,6 21,8' fill='none' stroke='%231e3b53' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='3' cy='16' r='1.6' fill='%231e3b53'/%3E%3Ccircle cx='8' cy='11' r='1.6' fill='%231e3b53'/%3E%3Ccircle cx='12' cy='14' r='1.6' fill='%231e3b53'/%3E%3Ccircle cx='19' cy='6' r='1.6' fill='%231e3b53'/%3E%3C/svg%3E");
}
.meal-history-btn:active{ transform:translateY(1px); }
.meal-history-btn:focus-visible{
  outline:2px solid #2fb4ff;
  outline-offset:2px;
}

/* =============================================================================
   2) DAILY NUTRITION BARS
   -------------------------------------------------------------------------- */
.nutri-bars{ display:flex; flex-direction:column; gap:6px; margin:6px 0 10px; }
.nbar{ position:relative; height:20px; border-radius:999px; overflow:hidden; border:1px solid #cbd5e1; background:#fff; }
.nbar .f{ position:absolute; inset:0; transform-origin:left center; transform:scaleX(var(--pct,0)); transition:transform .25s ease; opacity:.92; }
.nbar .txt{ position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; padding:0 10px; font-weight:400; font-size:12px; color:#0f172a; letter-spacing:.2px; }
.nbar.cal .f{ background:#34d17b; } .nbar.pro .f{ background:#f59e0b; } .nbar.fat .f{ background:#2fb4ff; } .nbar.car .f{ background:#a78bfa; }
.nbar.cal{ background:#eaf9f0; border-color:#bfeacc; } .nbar.pro{ background:#fff3d6; border-color:#f7d793; } .nbar.fat{ background:#e6f4ff; border-color:#c9e6ff; } .nbar.car{ background:#efe8ff; border-color:#d9ccff; }

/* =============================================================================
   3) MEALS LIST (Today)
   -------------------------------------------------------------------------- */
#mealProgram{ margin-top:6px; font-size:14px; font-weight:600; color:var(--text); margin-bottom:10px; padding-left:1px; }
#mealList{ margin:8px 0 0; padding-left:0; }
#mealList .meal-row .program{ font-weight:600; font-size:14px; color:var(--muted); margin-top:6px; line-height:1.2; }

.meal{
  list-style:none;
  margin:0 0 calc(8px + var(--meal-dots-gap)) 0;
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:start;
  gap:8px;
  position:relative;
}
/* faint 9-dot separator BETWEEN meals */
#mealList .meal::after{
  content:"• • • • • • • • •";
  display:block; text-align:center;
  color: rgb(168, 224, 179);
  font-weight:700; letter-spacing:.18em;
  margin-top: var(--meal-dots-gap);
  pointer-events:none;
}

#mealList .meal:last-child::after{ content:none; }

.meal-row{ grid-column: 1 / -1; display:flex; align-items:flex-start; gap:8px; }
.meal .top{ font-weight:600; display:flex; align-items:center; gap:var(--meal-swap-gap); }
.meal .top .k{ flex:1 1 auto; min-width:0; }
.meal .sub{ color:var(--muted); font-size:13px; }
.meal .top .swap-btn{ margin-left:auto; }
.meal-text{ flex:1; min-width:0; }

/* =============================================================================
   4) CIRCULAR ✓ TOGGLES (Meals / Workout / Soul)
   -------------------------------------------------------------------------- */
.meal-toggle, .wkt-toggle, .soul-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:999px; cursor:pointer; line-height:1; font-weight:900;
  border:1px solid #94a3b8; background:#fff; margin-left:-4px;
  position:relative; transform:translateY(var(--ctrl-lift)); box-shadow:var(--ctrl-shadow);
  transition: box-shadow .18s ease, transform .12s ease, background .15s ease, border-color .15s ease;
}
.meal-toggle:active, .wkt-toggle:active, .soul-toggle:active{ transform:translateY(calc(var(--ctrl-lift) + 0.5px)); }
.meal-toggle.done, .wkt-toggle.done, .soul-toggle.done{ background:#16a34a; color:#fff; border-color:#16a34a; box-shadow:var(--ctrl-shadow-strong); }
.meal-toggle::before, .wkt-toggle::before, .soul-toggle::before{
  content:"• • • • • • • • •"; position:absolute; left:5px; right:5px; bottom:-7px; height:12px; pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.18), rgba(0,0,0,0) 70%); filter:blur(5px);
  opacity:var(--ctrl-oval-opacity); z-index:0;
}
.meal-toggle > *, .wkt-toggle  > *, .soul-toggle > *{ position:relative; z-index:1; }
.meal-toggle:focus-visible, .wkt-toggle:focus-visible, .soul-toggle:focus-visible{ outline:2px solid var(--pill-focus-ring); outline-offset:3px; border-radius:999px; }
.wkt-toggle:disabled,
.soul-toggle:disabled{
  opacity: 1 !important;
  cursor: default !important;
  filter: none !important;
}

/* =============================================================================
   5) "RECIPE DIRECTIONS" PILL
   -------------------------------------------------------------------------- */
.meal .directions{
  grid-column: 1 / -1;
  margin-right: calc(-1 * (var(--meal-swap-size) + var(--meal-swap-gap) + var(--meal-extend-right)));
  margin-top:6px; margin-bottom:0;
  border:1px solid var(--recipe-pill-border);
  border-radius:10px; background:var(--recipe-pill-bg);
  position:relative; transform:translateY(var(--pill-lift)); box-shadow:var(--pill-shadow-const);
  overflow:visible;
}
.meal .directions::before{
  content:"• • • • • • • • •";
  position:absolute; left:var(--pill-oval-inset); right:var(--pill-oval-inset);
  bottom:-10px; height:var(--pill-oval-height); pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.18), rgba(0,0,0,0) 70%);
  filter:blur(6px); opacity:var(--pill-oval-opacity); z-index:0;
}
.meal .directions > *{ position:relative; z-index:1; }
.meal .directions > summary{
  list-style:none; cursor:pointer; user-select:none; padding:8px 26px 8px 10px;
  font-family:var(--recipe-pill-font); font-size:var(--recipe-pill-size); font-weight:var(--recipe-pill-weight);
  color:var(--recipe-pill-text); line-height:1.2; scroll-margin-top:var(--sticky-offset);
  -webkit-tap-highlight-color:transparent; border-radius:10px; background:var(--recipe-pill-bg);
  transition:background-color .15s ease, color .15s ease;
}
@media (hover:hover) and (pointer:fine){ .meal .directions > summary:hover{ background:var(--recipe-pill-hover); } }
@media (hover:none), (pointer:coarse){
  .meal .directions > summary:hover,
  .meal .directions > summary:active{ background:var(--recipe-pill-bg) !important; }
}
.meal .directions > summary::after{
  content:var(--recipe-pill-caret);
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  font-size:var(--recipe-pill-caret-size); color:var(--recipe-pill-caret-ink); opacity:.9;
}
.meal .directions[open] > summary{ background:var(--recipe-pill-open); border-bottom:1px solid var(--recipe-pill-border); border-radius:10px 10px 0 0; }
.meal .directions[open] > summary::after{ content:var(--recipe-pill-caret-open); }
.meal .directions > summary:focus-visible{ outline:2px solid var(--pill-focus-ring); outline-offset:3px; border-radius:10px; }
.meal .dir-body{ padding:8px 10px; color:var(--muted); font-size:13px; background:#fff; border-radius:0 0 10px 10px; }
.meal .dir-body .recipe-ad-slot,
.snack-dir .snack-dir-body .recipe-ad-slot{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 96px; /* close to 320x100 mobile banner profile */
  max-width: 100%;
  padding: 8px 10px;
  margin: 10px 0 6px;
  border: 1px dashed #b8c5d5;
  border-radius: 8px;
  background: linear-gradient(180deg, #f8fbff 0%, #f1f6fc 100%);
}
.meal .dir-body .recipe-ad-tag,
.snack-dir .snack-dir-body .recipe-ad-tag{
  display: inline-block;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid #c7d4e4;
  background: #eef4fb;
  color: #55657a;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.meal .dir-body .recipe-ad-copy,
.snack-dir .snack-dir-body .recipe-ad-copy{
  color: #1f3042;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}
.meal .dir-body .recipe-ad-cta,
.snack-dir .snack-dir-body .recipe-ad-cta{
  border: 1px solid #9db3cc;
  background: #ffffff;
  color: #1f3a5a;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: default;
}

.meal .dir-body .recipe-ad-slot ins.adsbygoogle,
.snack-dir .snack-dir-body .recipe-ad-slot ins.adsbygoogle,
.meal .dir-body .recipe-ad-slot .tc-ad-placeholder,
.snack-dir .snack-dir-body .recipe-ad-slot .tc-ad-placeholder{
  grid-column:1 / -1;
  justify-self:center;
}

/* Make Ingredients (ul) and Steps (ol) share identical left start */
.meal .dir-body ul,
.meal .dir-body ol{
  margin: 6px 0 0 18px;           /* same left offset for both */
  padding-left: 0;                /* avoid double-indenting on some browsers */
  list-style-position: outside;   /* keep markers outside for clean align */
}

/* List item spacing */
.meal .dir-body li{ margin: 4px 0; }

.meal .dir-body .ing-head, .meal .dir-body .step-head{ font-weight:700; color:#0f172a; margin:6px 0 4px 0; }

/* =============================================================================
   6) WORKOUT SECTION
   -------------------------------------------------------------------------- */
#wktRow{ display:flex; align-items:flex-start; gap:8px; margin-top:6px; }
#wktProgram{ margin-top:6px; font-size:14px; font-weight:600; color:var(--text); padding-left:1px; margin-bottom:0; }
.wkt-title-row{ display:flex; align-items:flex-start; gap:8px; width:100%; }
.wkt-title-row #wktTitle{ flex:1 1 auto; min-width:0; }
.wkt-swap-btn{
  margin-left:auto;
  flex:0 0 auto;
  width:22px;
  height:22px;
  min-width:22px;
  min-height:22px;
  border-radius:999px;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  line-height:0;
  appearance:none;
  -webkit-appearance:none;
  border:1px solid #2778bd;
  background:#2f80d1;
  color:#fff;
  transform:translateY(var(--ctrl-lift));
  box-shadow:var(--ctrl-shadow);
  transition:box-shadow .18s ease, transform .12s ease, background .15s ease, border-color .15s ease;
}
.wkt-swap-btn:active{ transform:translateY(calc(var(--ctrl-lift) + 0.5px)); }
.wkt-swap-btn:focus-visible{ outline:2px solid rgba(47,128,209,.42); outline-offset:3px; border-radius:999px; }
@media (hover:hover){ .wkt-swap-btn:hover{ background:#256fb9; border-color:#256fb9; box-shadow:var(--ctrl-shadow-strong); } }
.wkt-swap-btn[disabled]{
  cursor:not-allowed;
  opacity:.95;
  pointer-events:none;
  filter:grayscale(100%);
  box-shadow:0 1px 3px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.45);
}
.wkt-swap-btn[disabled]:active{ transform:translateY(var(--ctrl-lift)); }
.wkt-swap-btn::before{
  content:"";
  position:absolute;
  left:5px;
  right:5px;
  bottom:-7px;
  height:12px;
  pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgba(24,90,157,.24), rgba(24,90,157,0) 70%);
  filter:blur(5px);
  opacity:var(--ctrl-oval-opacity);
  z-index:0;
}
.wkt-swap-btn > *{ position:relative; z-index:1; }
.wkt-swap-btn svg{ width:14px; height:14px; display:block; overflow:visible; vector-effect:non-scaling-stroke; fill:none; }
.wkt-swap-btn svg path{ stroke:#fff !important; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; fill:none; }
.wkt-meta{ margin:2px 0 4px; color:var(--muted); font-size:12px; font-weight:600; }
#workoutSwapModal.modal{
  background:#eef8ff;
  padding:8px;
  border:1px solid rgba(43,120,189,.22);
}
#workoutSwapModal .modal-bd{
  background:#eef8ff;
  padding:12px 16px;
  margin:0;
}
#workoutSwapModal .modal-hd{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  border-bottom:2px solid #2778bd;
  padding-bottom:10px;
  margin-bottom:10px;
}
#workoutSwapModal .modal-hd h3{ margin:0; font-size:18px; line-height:1.15; }
#workoutSwapModal .modal-hd .muted{ margin:3px 0 0; font-size:12px; line-height:1.3; }
#workoutSwapModal .wkt-swap-options{ margin-top:4px; }
.wkt-swap-options{ display:grid; gap:7px; }
.wkt-swap-option{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; min-height:38px; padding:8px 10px;
  border:1px solid rgba(47, 128, 209, .26);
  border-radius:9px;
  background:#ffffff;
  color:#132238;
  font:inherit;
  font-size:13px;
  font-weight:700;
  text-align:left;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(15, 23, 42, .05);
}
.wkt-swap-option small{ color:var(--muted); font-size:11px; font-weight:700; text-transform:uppercase; }
@media (hover:hover){ .wkt-swap-option:hover{ border-color:#2778bd; background:#f7fbff; } }
#wktList{ margin:8px 0 0; padding-left:0; list-style:none; }

/* Workout accordions */
#wktList .wkt-item{ margin:8px 0; }
#wktList .wkt-acc{
  border:1px solid rgba(0,0,0,.08);
  border-radius:10px;
  background:#c6e0cb; /* grey-green */
  box-shadow: var(--pill-shadow);
  overflow:hidden;
  width:calc(100% + 30px);
  margin-left:-30px;
}
#wktList .wkt-acc > summary{
  list-style:none;
  cursor:pointer;
  padding:8px 10px;
  font-weight:600;
  font-size:13px;
  line-height:1.3;
  color:#0f172a;
  position:relative;
  background:#bae0e9; /* match closed state */
}
#wktList .wkt-acc > summary::-webkit-details-marker{ display:none; }
#wktList .wkt-acc > summary::after{
  content:"▾";
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  color:rgba(15,23,42,.6);
}
#wktList .wkt-acc[open] > summary::after{ content:"▴"; }
#wktList .wkt-acc-body{
  padding:8px 10px;
  border-top:1px solid rgba(0,0,0,.06);
  font-size:13px;
  color:var(--muted);
  background:#fbfffc;
}
#wktList .exercise-media,
#customWorkoutResults .exercise-media{
  margin:0 0 10px;
}
#wktList .exercise-media-asset,
#customWorkoutResults .exercise-media-asset{
  display:block;
  width:100%;
  max-width:420px;
  border-radius:12px;
  background:#000;
  box-shadow:0 8px 20px rgba(15, 23, 42, .12);
}
#customWorkoutResults .exercise-media-compact .exercise-media-asset{
  max-width:340px;
}
#wktList .exercise-media-video,
#customWorkoutResults .exercise-media-video{
  aspect-ratio:16 / 9;
}
#wktList .exercise-media-image,
#customWorkoutResults .exercise-media-image{
  object-fit:cover;
  cursor:zoom-in;
}
#wktList .exercise-media-image:focus-visible,
#customWorkoutResults .exercise-media-image:focus-visible{
  outline:3px solid rgba(14, 165, 233, .82);
  outline-offset:3px;
}
body.exercise-media-lightbox-open{
  overflow:hidden;
}
.exercise-media-lightbox{
  position:fixed;
  inset:0;
  z-index:3000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(15, 23, 42, .86);
}
.exercise-media-lightbox.is-open{
  display:flex;
}
.exercise-media-lightbox-frame{
  position:relative;
  width:min(96vw, 1120px);
  height:min(92dvh, 820px);
  display:flex;
  align-items:center;
  justify-content:center;
}
.exercise-media-lightbox-image{
  display:block;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:12px;
  background:#0f172a;
  box-shadow:0 24px 70px rgba(0,0,0,.42);
}
.exercise-media-lightbox-close{
  position:absolute;
  top:10px;
  right:10px;
  z-index:1;
  min-height:36px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:999px;
  background:rgba(15, 23, 42, .78);
  color:#fff;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.22);
}
.exercise-media-lightbox-close:focus-visible{
  outline:2px solid rgba(125, 211, 252, .95);
  outline-offset:2px;
}
@media (max-width:640px){
  .exercise-media-lightbox{
    padding:10px;
  }
  .exercise-media-lightbox-frame{
    width:100vw;
    height:92dvh;
  }
  .exercise-media-lightbox-image{
    border-radius:8px;
  }
}
#wktList .wkt-acc-body ul{
  margin:6px 0 0 18px;
  padding-left:0;
}
#wktList .wkt-acc-body li{ margin:4px 0; }
#wktList .wkt-sec-title{
  font-weight:700;
  color:#0f172a;
  margin:6px 0 2px;
}
#wktList .wkt-sec-text{ margin:0; }

/* =============================================================================
   7) REPLACE MEAL MODAL — BASE LAYOUT
   -------------------------------------------------------------------------- */
:is(#replaceModal,#snackReplaceModal).modal{
  padding:0;
  border:1px solid var(--rep-border);
  border-radius:var(--rep-modal-radius);
  background:var(--rep-mint-bg);
  box-shadow:0 10px 24px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.08);
}

/* Header */
:is(#replaceModal,#snackReplaceModal) .modal-hd{
  display:flex; align-items:center; justify-content:space-between;
  padding: var(--rep-modal-pad) var(--rep-modal-pad) 10px;
  background:transparent; border-bottom:0;
}
:is(#replaceModal,#snackReplaceModal) .modal-hd h3{ margin:0; font-size:1.22rem; font-weight:800; line-height:1.2; letter-spacing:.2px; }
:is(#replaceModal,#snackReplaceModal) .modal-hd .icon-btn{ margin:0; padding:.25rem .4rem; line-height:1; border:0; background:transparent; }

/* Body wrapper */
:is(#replaceModal,#snackReplaceModal) .modal-bd{ padding:0; background:transparent; }

/* Tabs with inset pinstripe */
:is(#replaceModal,#snackReplaceModal) .tabs{
  position:relative; display:flex; gap:6px;
  padding: 6px var(--rep-modal-pad) 0; border-bottom:0;
}
:is(#replaceModal,#snackReplaceModal) .tabs::after{
  content:""; position:absolute; left:var(--rep-modal-pad); right:var(--rep-modal-pad);
  bottom:-1px; height:1px; background: var(--rep-tab-border); border-radius:1px;
}
:is(#snackReplaceModal) .tabs::after{
  background:#0b3041; /* snack modal underline (dark blue) */
}
:is(#replaceModal,#snackReplaceModal) .tab{
  appearance:none; border:1px solid var(--rep-tab-border);
  background:#cff3d9; padding:.40rem .65rem; border-radius:10px 10px 0 0;
  font-weight:700; cursor:pointer; transform:translateY(1px);
}
:is(#replaceModal,#snackReplaceModal) .tab:hover{ background:#78be8c; }
:is(#replaceModal,#snackReplaceModal) .tab.is-active{
  background:#78be8c;
  border-color: var(--rep-tab-border);
  border-bottom-color: var(--rep-mint-bg);
}
:is(#replaceModal,#snackReplaceModal) .tab-panels{ padding:12px var(--rep-modal-pad) var(--rep-modal-pad); }

/* Green rules (top / mid / bottom) */
.rep-rule-top,.rep-rule-mid,.rep-rule-bottom{
  display:block; height:3px; background:#06692a; border-radius:2px; width:100% !important; margin:12px 0;
}
:is(#replaceModal,#snackReplaceModal) .rep-rule-top{
  width: calc(100% - (var(--rep-modal-pad) * 2)) !important;
  margin: 8px var(--rep-modal-pad) !important;
}
:is(#replaceModal,#snackReplaceModal) .rep-rule-mid,:is(#replaceModal,#snackReplaceModal) .rep-rule-bottom{ margin:10px 0 !important; }
:is(#replaceModal,#snackReplaceModal) .form-stack .rep-rule-mid{ grid-column:1 / -1; }

/* Prevent decorative rules from blocking slider drags */
:is(#replaceModal,#snackReplaceModal) .rep-rule-top,
:is(#replaceModal,#snackReplaceModal) .rep-rule-mid,
:is(#replaceModal,#snackReplaceModal) .rep-rule-bottom { pointer-events: none; }

#snackReplaceModal .rep-rule-top,
#snackReplaceModal .rep-rule-mid,
#snackReplaceModal .rep-rule-bottom{
  background:#0b3041; /* snack modal rule color (dark blue) */
}

/* Form grid */
:is(#replaceModal,#snackReplaceModal) .form-stack{
  display:grid; grid-template-columns: 1fr 8ch;
  column-gap:10px; row-gap:1px; align-items:center; margin:0;
}
:is(#replaceModal,#snackReplaceModal) label[for="repName"]{ font-weight:700; }
:is(#replaceModal,#snackReplaceModal) #repName{
  grid-column:1 / -1; height:var(--rep-input-height); padding:0 8px;
  border:1px solid var(--rep-input-border); border-radius:var(--rep-input-radius); box-sizing:border-box;
}
:is(#replaceModal,#snackReplaceModal) label[for="snackRepName"]{ font-weight:700; }
:is(#replaceModal,#snackReplaceModal) #snackRepName{
  grid-column:1 / -1; height:var(--rep-input-height); padding:0 8px;
  border:1px solid var(--rep-input-border); border-radius:var(--rep-input-radius); box-sizing:border-box;
}

/* Action row */
:is(#replaceModal,#snackReplaceModal) .btn-row{ border-top:0; margin-top:10px; padding-top:10px; }
:is(#replaceModal,#snackReplaceModal) .btn{ padding:.45rem .7rem; font-size:.95rem; }
:is(#replaceModal,#snackReplaceModal) #repTip{ margin-top:6px; }
:is(#replaceModal,#snackReplaceModal) .modal-ft{ display:none !important; }

/* =============================================================================
   8) SWAP PILL (⇄)
   -------------------------------------------------------------------------- */
.swap-btn{
  width:22px; height:22px; min-width:22px; min-height:22px; border-radius:999px;
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; line-height:0; font-weight:900;
  border:1px solid #e4951f; background:#e4951f;
  transform:translateY(var(--ctrl-lift)); box-shadow:var(--ctrl-shadow);
  transition: box-shadow .18s ease, transform .12s ease, background .15s ease, border-color .15s ease;
}
.swap-btn:active{ transform:translateY(calc(var(--ctrl-lift) + 0.5px)); }
.swap-btn:focus-visible{ outline:2px solid rgb(236,159,59); outline-offset:3px; border-radius:999px; }
@media (hover:hover){ .swap-btn:hover{ background:#eba844; box-shadow:var(--ctrl-shadow-strong); } }
.swap-btn::before{
  content:"• • • • • • • • •"; position:absolute; left:5px; right:5px; bottom:-7px; height:12px; pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.18), rgba(0,0,0,0) 70%); filter:blur(5px);
  opacity:var(--ctrl-oval-opacity); z-index:0;
}
.swap-btn > *{ position:relative; z-index:1; }
.swap-btn svg{ width:14px; height:14px; display:block; overflow:visible; vector-effect:non-scaling-stroke; fill:none; }
.swap-btn svg path{ stroke:#fff !important; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; fill:none; }

/* =============================================================================
   9) REPLACE MEAL MODAL — ONE SLIDER PER MACRO (classic look)
   -------------------------------------------------------------------------- */

/* Comfortable row */
:is(#replaceModal,#snackReplaceModal) .macro-row{
  grid-column: 1 / -1;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 67px;   /* CHANGED: number box 82px → 67px */
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  min-height: 48px;
}
#snackReplaceModal .macro-range-wrap{ grid-column:1; order:1; }
#snackReplaceModal .macro-num{ grid-column:2; order:2; }

/* Right-side number box (narrower) */
:is(#replaceModal,#snackReplaceModal) .macro-num{
  width: 55px !important;            /* CHANGED */
  justify-self: end; /* keep the right edge fixed */
  height: calc(var(--rep-range-h) + 1px) !important;
  padding: 0 8px !important;
  text-align: right;
  border: 1px solid var(--rep-input-border);
  border-radius: var(--rep-input-radius);
  box-sizing: border-box;
  background: #fff;
}

/* Slider track — thicker */
:is(#replaceModal,#snackReplaceModal) .macro-range-wrap{ margin: 0 -5px 0 0; }
:is(#replaceModal,#snackReplaceModal) .macro-range{
  -webkit-appearance:none; appearance:none;
  position: relative; z-index: 2;
  width: calc(100% + 5px); height: 16px;         /* CHANGED: 12px → 16px */
  margin: 0 -5px 0 0;
  border-radius: 999px;
  outline: none;
  border: 1px solid var(--bar-stroke, var(--bar-color));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
  background:
    linear-gradient(
      to right,
      var(--bar-color) 0%,
      var(--bar-color) calc(var(--pct,0) * 100%),
      var(--track-lite, var(--rep-track-bg)) calc(var(--pct,0) * 100%),
      var(--track-lite, var(--rep-track-bg)) 100%
    );
}

/* Thumb (centered on 16px track) */
:is(#replaceModal,#snackReplaceModal) .macro-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:19px; height:19px;           /* CHANGED: a touch larger for the thicker track */
  border-radius:50%; border:2px solid #fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
  background:var(--bar-color); cursor:pointer;
  margin-top:-1px;                    /* centers visually on 16px track */
}
:is(#replaceModal,#snackReplaceModal) .macro-range::-moz-range-thumb{
  width:19px; height:19px;           /* CHANGED */
  border-radius:50%; border:2px solid #fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
  background:var(--bar-color); cursor:pointer;
}

/* ---- Modal-specific tweaks to keep meal vs snack layouts distinct ---- */
#replaceModal .macro-range{ width:100%; margin:0; height:22px !important; }
#replaceModal .macro-range::-webkit-slider-thumb{ width:20px; height:20px; margin-top:1px; }
#replaceModal .macro-range::-moz-range-thumb{ width:20px; height:20px; }

/* Final snack modal alignment: match input height and center thumb */
#snackReplaceModal .macro-range{
  width: calc(100% + 6px) !important;
  margin: 0 -6px 0 0 !important;
  height: 22px !important;
}
#snackReplaceModal .macro-range::-webkit-slider-runnable-track{ height:22px !important; }
#snackReplaceModal .macro-range::-moz-range-track{ height:22px !important; }
#snackReplaceModal .macro-range::-webkit-slider-thumb{
  width: 18px !important;
  height: 18px !important;
  margin-top: -3px !important; /* align with meal modal */
}
#snackReplaceModal .macro-range::-moz-range-thumb{
  width: 18px !important;
  height: 18px !important;
}

#replaceModal .macro-num,
#snackReplaceModal .macro-num{
  height:22px !important;
  line-height:22px !important;
}
:is(#replaceModal,#snackReplaceModal) .macro-range::-moz-range-track{ height:16px; border-radius:999px; background:transparent; }

/* Snack modal theming (match light-blue snacks block) */
#snackReplaceModal.modal{
  background:#eafaff;
  border-color: rgb(118, 165, 177);
}
#snackReplaceModal .modal-hd,
#snackReplaceModal .modal-bd,
#snackReplaceModal .modal-ft{
  background:#eafaff;
}
#snackReplaceModal .tabs::after{
  background: rgb(118, 165, 177);
}
#snackReplaceModal .tab{
  background:#b4d7ec;
  border-color: rgb(118, 165, 177);
  color:#0b3041;
}
#snackReplaceModal .tab:hover{
  background:#82b7d7;
}
#snackReplaceModal .tab.is-active{
  background:#6ea3c0;
  border-color: rgb(118, 165, 177);
  border-bottom-color:#eafaff;
  color:#062535;
}
#snackReplaceModal .snack-refresh-btn{
  width:30px;
  height:30px;
  min-width:30px;
  margin-left:auto;
  margin-right:5px;
  position:relative;
  top:-4px;
  border:1px solid rgba(11, 74, 102, .34);
  border-radius:999px;
  background:linear-gradient(135deg, #eaffff 0%, #9fe6f0 52%, #69d69d 100%);
  color:#0b4a66;
  font-size:17px;
  font-weight:900;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(11, 74, 102, .18), 0 0 0 3px rgba(105, 214, 157, .18);
  transition:background .16s ease, box-shadow .16s ease, transform .16s ease;
  animation:snack-refresh-pulse 2.4s ease-in-out infinite;
}
#snackReplaceModal .snack-refresh-btn:hover,
#snackReplaceModal .snack-refresh-btn:focus-visible{
  background:linear-gradient(135deg, #ffffff 0%, #8ee9f6 45%, #49c983 100%);
  box-shadow:0 4px 12px rgba(11, 74, 102, .24), 0 0 0 4px rgba(105, 214, 157, .28);
  transform:translateY(-1px);
}
#snackReplaceModal .snack-refresh-btn:disabled{
  opacity:.58;
  cursor:default;
  animation:none;
}
#snackReplaceModal .snack-refresh-btn.is-loading{
  animation: snack-refresh-spin .8s linear infinite;
}
@keyframes snack-refresh-pulse{
  0%,100%{ box-shadow:0 2px 8px rgba(11, 74, 102, .18), 0 0 0 3px rgba(105, 214, 157, .18); }
  50%{ box-shadow:0 3px 10px rgba(11, 74, 102, .22), 0 0 0 5px rgba(105, 214, 157, .30); }
}
@keyframes snack-refresh-spin{
  to{ transform:rotate(360deg); }
}
:is(#replaceModal,#snackReplaceModal) .macro-range::-moz-range-track{ height:16px; border-radius:999px; background:transparent; }
:is(#replaceModal,#snackReplaceModal) .macro-range:focus-visible{ outline:var(--rep-focus); border-radius:14px; }

/* Macro label “pill” positioned inside the row before the number */
:is(#replaceModal,#snackReplaceModal) .macro-chip{
  position: absolute;
  right: calc(67px + 12px);          /* CHANGED: sync with new 67px number + 12px gap */
  top: 50%;
  transform: translateY(-50%);
  padding: 2px 10px;
  font-size: 12px;
  line-height: 1.2;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  color: #5b6b66;
  white-space: nowrap;
  pointer-events: none;               /* never blocks drags */
  z-index: 3;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

/* Colors per macro (track fill + thumb) */
:is(#replaceModal,#snackReplaceModal) .macro-row[data-kind="cal"]{ --bar-color:#34d17b; --track-lite:#eaf9f0; --bar-stroke:#1fa85f; }
:is(#replaceModal,#snackReplaceModal) .macro-row[data-kind="pro"]{ --bar-color:#f59e0b; --track-lite:#fff3d6; --bar-stroke:#d98200; }
:is(#replaceModal,#snackReplaceModal) .macro-row[data-kind="car"]{ --bar-color:#a78bfa; --track-lite:#efe8ff; --bar-stroke:#8d6af0; }
:is(#replaceModal,#snackReplaceModal) .macro-row[data-kind="fat"]{ --bar-color:#2fb4ff; --track-lite:#e6f4ff; --bar-stroke:#1ea6ff; }

/* =============================================================================
   10) LOCK STATES
   -------------------------------------------------------------------------- */
.meal-row.is-locked .js-meal-title,
.meal-row.is-locked .js-meal-macros { opacity: .9; }

.btn.subtle.is-disabled,
.meal-row.is-locked .btn.subtle {
  opacity: .45; pointer-events: none; filter: grayscale(100%);
}
.swap-btn.is-disabled,
.meal-row.is-locked .swap-btn {
  opacity: .95; pointer-events: none; filter: grayscale(100%);
}
.meal-row.is-locked .meal-toggle { pointer-events: none; }

.meal-row.is-saving,
.snack-row.is-saving,
#wktRow.is-saving{
  opacity: .82;
}
.meal-toggle.is-saving,
.snack-toggle.is-saving,
.wkt-toggle.is-saving{
  filter: grayscale(100%);
  cursor: wait;
}
.meal-row.is-saving .swap-btn,
.snack-row.is-saving .snack-replace,
#wktRow.is-saving .wkt-swap-btn{
  pointer-events: none;
  filter: grayscale(100%);
  opacity: .65;
}
/* =============================================================================
   11) SNACKS (visual + alignment only; points = 0)
   -------------------------------------------------------------------------- */

/* Divider line above Snacks — same feel as the Workout divider */
.snacks-block{
  border-top:1px solid rgba(6,105,42,.50);
  padding-top:16px;
  margin-top:16px;
}

/* Subhead matches other sections; emoji handled in HTML */
.snacks-block .subhead{ color:#0f172a; }

/* Ensure Workout section keeps the same divider spacing as Snacks */
#sectionWorkout{
  border-top:1px solid rgba(6,105,42,.50);
  padding-top:18px;
  margin-top:18px;
}

/* Rounded light-blue background behind the two snack rows */
.snacks-box{
  margin-top: 8px;
  background: #eafaff;
  border: 1px solid rgb(118, 165, 177);
  border-radius: 14px;
  padding: 10px 12px 12px;
  box-shadow:
    0 10px 22px rgba(0,0,0,.08),
    0 2px 6px  rgba(0,0,0,.06);
}

/* Slight hover lift (keeps it subtle) */
.snacks-box:hover{
  box-shadow:
    0 12px 26px rgba(0,0,0,.10),
    0 3px 8px  rgba(0,0,0,.07);
}

/* Row layout: pill | text | Replace (aligned like meals) */
.snack-row{
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  column-gap: 10px;
  padding: 6px 4px;
}

/* Keep pill identical to meals — only size differs */
.snack-toggle.meal-toggle{
  width: 30px; height: 30px; min-width: 30px; min-height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
}

/* Title + macros slightly smaller than meals */
.snack-text .top.k{ font-size: .98rem; font-weight:700; line-height:1.2; }
.snack-macros{ font-size:.9rem; margin-top:2px; }

/* --- Snacks “Choose” button — FLOAT like the check pills --- */
.snack-actions .snack-replace{
  /* compact pill */
  padding: 4px 10px;
  font-size: 0.75rem;
  line-height: 1;
  border-radius: 10px;
  margin-left: 6px;

  /* your current theme colors */
  background: #e4951f;
  border: 1px solid rgba(0,0,0,.12);
  color: #ffffff;
  font-weight: 400;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;

  /* alignment + FLOATING effect (matches ✓ pills) */
  align-self: start;               /* top-align with the title */
  position: relative;
  transform: translate(4px, -2px) translateY(var(--ctrl-lift));
  box-shadow: var(--ctrl-shadow);
  transition: box-shadow .18s ease, transform .12s ease, background .15s ease, border-color .15s ease;
}
.snack-actions .snack-replace.is-disabled,
.snack-row.is-locked .snack-replace,
.snack-actions .snack-replace:disabled{
  background: #d1d5db;
  border-color: #cbd5e1;
  color: #4b5563;
  pointer-events: none;
  filter: none;
  transform: translate(4px, -2px);
  box-shadow: none;
}

/* the soft oval shadow under the button (same pattern as pills) */
.snack-actions .snack-replace::before{
  content:"• • • • • • • • •";
  position:absolute;
  left: 6px;
  right: 6px;
  bottom: -8px;
  height: 12px;
  pointer-events:none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.18), rgba(0,0,0,0) 70%);
  filter: blur(5px);
  opacity: var(--ctrl-oval-opacity, .35);
  z-index: 0;
}

/* keep content above the pseudo shadow */
.snack-actions .snack-replace > *{ position: relative; z-index: 1; }

/* hover/press/focus like the ✓ pills */
.snack-actions .snack-replace:hover{
  box-shadow: var(--ctrl-shadow-strong),
              0 0 0 1px rgba(255,255,255,.7) inset;
  filter: brightness(1.02);
}
.snack-actions .snack-replace:active{
  transform: translate(4px, -2px) translateY(calc(var(--ctrl-lift) + 0.5px));
  box-shadow: var(--ctrl-shadow);
}
.snack-actions .snack-replace:focus-visible{
  outline: 2px solid var(--pill-focus-ring);
  outline-offset: 3px;
  border-radius: 999px;
}

/* Tiny screens keep proportions */
@media (max-width: 370px){
  .snack-row{ grid-template-columns: 28px 1fr auto; }
  .snack-toggle.meal-toggle{ width:28px; height:28px; min-width:28px; min-height:28px; }
  .snack-actions .snack-replace{ padding:5px 9px; font-size:.82rem; }
}

/* Snacks — make pill identical to Meals and align baseline */
.snacks-box .snack-row{
  grid-template-columns: 26px 1fr auto;
  align-items: start;              /* top-align like Meals */
  column-gap: 10px;
  padding: 6px 4px;
}

/* keep the same size; add top alignment */
.snack-toggle.meal-toggle{
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  margin-left: -4px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: start;               /* top with title */
  margin-top: 0;
}

/* let the first line define the baseline */
.snack-text .top.k{
  display: block;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.2;
  margin-top: 0;
  color: #000;
}

.snack-text .top.k .muted{
  color: #000;
}

.snack-text .snack-macros{
  font-size: .82rem;
}

.snack-dir{
  margin-top: 6px;
  border: 1px solid #4aaada;
  border-radius: 10px;
  background: #b5f0ff;      /* match Choose button */
  padding: 0;
  width: 100%;
  display:block;
  overflow: hidden;          /* keep inner backgrounds clipped to the radius */
}
.snack-row .snack-dir{
  grid-column: 2 / -1;  /* start at text column (Snack X:) and span through Choose */
  align-self: stretch;
  width: calc(100% + 4px);  /* absorb most of the grid gap so the right edge aligns with Choose */
  margin-right: -4px;
}
.snack-dir summary{
  list-style: none;
  cursor: pointer;
  padding: 4px 10px;              /* shorter height */
  font-weight: 600;
  font-size: 0.82rem;             /* a bit smaller title */
  color: #0f172a;
  display:flex;
  align-items:center;
  justify-content: space-between;
  width:100%;
}
.snack-dir summary::after{
  content: "\25BE";  /* meal-style caret */
  font-weight: 700;
  color: #0f172a;
  font-size: 0.9rem;
  display: inline-block;
}
.snack-dir[open] summary::after{
  content: "\25B4";
  transform: none;
}
.snack-dir .snack-dir-body{
  padding: 6px 10px 8px;
  color: #0f172a;
  font-size: 0.8rem;               /* smaller body text */
  background: #f6fbff;
}
.snack-dir .ing-head, .snack-dir .step-head{
  font-weight:700; margin:6px 0 4px 0; color:#0f172a;
}
.snack-dir .ing-list{ margin:4px 0 6px 16px; padding-left:0; }
.snack-dir .step-list{ margin:4px 0 6px 18px; padding-left:0; }


/* === Replace Modal: make ONLY the slider track taller (not the number box) === */
:is(#replaceModal,#snackReplaceModal) .macro-range{
  height: 16px !important;                    /* track height */
}

:is(#replaceModal,#snackReplaceModal) .macro-range::-webkit-slider-thumb{
  /* center the thumb on the thicker track */
  margin-top: -1px !important;
}
:is(#replaceModal,#snackReplaceModal) .macro-range::-moz-range-thumb{
  /* Firefox centers by default, so usually no tweak needed */
}

/* === Replace Modal: right-aligned inline labels over the track (no pill) === */
:is(#replaceModal,#snackReplaceModal) .macro-range-wrap{
  position: relative;                 /* anchor for absolute label */
}

:is(#replaceModal,#snackReplaceModal) .macro-row .macro-chip{
  position: absolute;
  right: 8px;                         /* hug the right edge of the track */
  top: 50%;
  transform: translateY(-50%);        /* vertically center on track */
  padding: 0;                         /* remove pill padding */
  background: transparent !important; /* kill white pill */
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none;               /* don’t block slider drags */
  color: rgba(0,0,0,.62);
  font-size: .78rem;                  /* same size you had */
  font-weight: 500;
  line-height: 1;
  z-index: 3;                         /* above the gradient track */
  text-shadow: 0 1px 0 rgba(255,255,255,.45); /* legibility on color */
}

/* Macro labels: sit inside the track, shifted ~15px from the right edge */
:is(#replaceModal,#snackReplaceModal) .macro-row .macro-chip{
  right: 23px; /* was 8px → 8 + 15 = 23px */
}

/* ── Replace Modal: align macro labels to the same right edge ───────────── */
:is(#replaceModal,#snackReplaceModal){
  /* keep these in one place so it stays aligned if you tweak widths later */
  --macro-num-w: 57px;   /* ← match your .macro-num width */
  --macro-gap:   10px;   /* ← gap between track and number box in the grid */
  --macro-pad:    8px;   /* ← small breathing room inside the track end */
}

:is(#replaceModal,#snackReplaceModal) .macro-row{ position: relative; }                   /* anchor */
:is(#replaceModal,#snackReplaceModal) .macro-row .macro-chip{
  position: absolute;
  right: calc(var(--macro-num-w) + var(--macro-gap) + var(--macro-pad));
  top: 50%;
  transform: translateY(-50%);
  text-align: right;
  background: transparent !important;  /* no white pill */
  pointer-events: none;
}

:is(#replaceModal,#snackReplaceModal) .macro-row{
  margin: 0 0 4px 0 !important;  /* was ~8px total; now ~half */
}

:is(#replaceModal,#snackReplaceModal) .macro-row{
  margin: 0 !important;         /* remove any per-row margin */
  padding: 2px 0 !important;    /* tiny breathing room (was larger) */
}

:is(#replaceModal,#snackReplaceModal) .macro-range-wrap{
  padding: 0 !important;        /* ensure no extra vertical padding */
}

/* if the number inputs add extra height via line-height, normalize */
:is(#replaceModal,#snackReplaceModal) .macro-num{
  line-height: 1 !important;
}

:is(#replaceModal,#snackReplaceModal) .macro-row{
  margin:0 !important;
  padding:0 !important;           /* no vertical padding per row */
}

/* Pull successive rows closer together (safe overlap) */
:is(#replaceModal,#snackReplaceModal) .macro-row + .macro-row{
  margin-top:-6px !important;     /* tighten further; tweak -4…-8px to taste */
}

/* Keep the slider’s hit-area; no extra vertical padding in the range wrap */
:is(#replaceModal,#snackReplaceModal) .macro-range-wrap{ padding:0 !important; }

/* Prevent number input from adding extra height */
:is(#replaceModal,#snackReplaceModal) .macro-num{ line-height:1 !important; }

/* ── Replace Modal: thumb size + perfect vertical centering ───────────── */
:is(#replaceModal,#snackReplaceModal) { 
  --rep-thumb:   19px; /* was 20px → +1px */
}

/* Center the WebKit thumb (Chrome/Edge/Safari) on the track height */
:is(#replaceModal,#snackReplaceModal) .macro-range::-webkit-slider-thumb{
  margin-top: -1px;
}

/* Firefox centers automatically; just inherit the new size */
:is(#replaceModal,#snackReplaceModal) .macro-range::-moz-range-thumb{
  width: var(--rep-thumb);
  height: var(--rep-thumb);
}

/* Final snack-only override: match input height and center thumb */
#snackReplaceModal .macro-range{ width: calc(100% + 12px) !important; margin: 0 -12px 0 0 !important; height: 22px !important; }
#snackReplaceModal .macro-range::-webkit-slider-runnable-track,
#snackReplaceModal .macro-range::-moz-range-track{
  height: 22px !important;
}
#snackReplaceModal .macro-range::-webkit-slider-thumb{
  width: 18px !important;
  height: 18px !important;
  margin-top: 2px !important; /* revert thumb offset */
}
#snackReplaceModal .macro-range::-moz-range-thumb{
  width: 18px !important;
  height: 18px !important;
}
#snackReplaceModal .macro-num{
  height: 22px !important;
  line-height: 22px !important;
  padding: 0 8px !important;
  margin-left: 2px; /* nudge label/input closer to the slider */
}

/* Final overrides: keep meal modal sliders the same height as the number boxes */
#replaceModal .macro-range{
  width: 100% !important;
  margin: 0 !important;
  height: 22px !important;
}
#replaceModal .macro-range::-webkit-slider-thumb{
  width: 18px !important;
  height: 18px !important;
  margin-top: -3px !important;
}
#replaceModal .macro-range::-moz-range-thumb{
  width: 18px !important;
  height: 18px !important;
}
#replaceModal .macro-num{
  height: 22px !important;
  line-height: 22px !important;
}

#mealHistoryModal{
  width:min(94vw, 760px);
}
#mealHistoryModal .modal-hd{
  padding:12px 14px 10px;
  border-bottom:1px solid rgba(15,23,42,.10);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
#mealHistoryTitle{
  font-size:24px;
  line-height:1.05;
}
#mealHistoryModal .modal-hd .icon-btn{
  margin-left:auto;
  flex:0 0 auto;
}
#mealHistoryModal .modal-bd{
  padding:12px 14px;
}
#mealHistoryModal .modal-ft{
  padding:0 14px 12px;
}
.meal-history-tabs{
  display:flex;
  gap:8px;
  margin-bottom:8px;
}
.meal-history-averages{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
  margin-bottom:10px;
}
.meal-history-avg{
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
}
.meal-history-avg-label{
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#64748b;
}
.meal-history-avg-value{
  margin-top:3px;
  font-size:18px;
  line-height:1.1;
  font-weight:800;
  color:var(--macro-color, #0f172a);
}
.meal-history-tab{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid #d9e7f2;
  background:#f7fbff;
  color:#1e3b53;
  font-weight:700;
  cursor:pointer;
}
.meal-history-tab.is-active{
  background:#dff2ff;
  border-color:#8ebee5;
}
.meal-history-note{
  font-size:12px;
  margin-bottom:10px;
}
.meal-history-legend{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
}
.meal-history-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  background:#f8fafc;
  border:1px solid rgba(15,23,42,.08);
  font-size:12px;
}
.meal-history-pill::before{
  content:"";
  width:9px;
  height:9px;
  border-radius:999px;
  background:var(--macro-color, #94a3b8);
  box-shadow:0 0 0 2px rgba(255,255,255,.9);
}
.meal-history-chart-wrap{
  border:1px solid rgba(15,23,42,.08);
  border-radius:14px;
  background:linear-gradient(180deg, #ffffff 0%, #f9fcff 100%);
  padding:8px;
}
.meal-history-chart{
  width:100%;
  height:auto;
  display:block;
}
.meal-history-empty{
  padding:18px 12px;
  text-align:center;
}
.meal-history-grid{
  stroke:rgba(148, 163, 184, .35);
  stroke-width:1;
}
.meal-history-axis-label{
  fill:#64748b;
  font-size:11px;
}
.meal-history-point{
  stroke:#fff;
  stroke-width:1.5;
}
#mealHistoryStatus{
  min-height:20px;
  margin-top:8px;
}
.meal-history-rows{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:10px;
  max-height:260px;
  overflow:auto;
}
.meal-history-row{
  display:grid;
  grid-template-columns:84px 1fr;
  gap:10px;
  align-items:start;
  padding:8px 10px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:12px;
  background:#fff;
}
.meal-history-date{
  font-weight:700;
  color:#1e3b53;
}
.meal-history-values{
  display:flex;
  flex-wrap:wrap;
  gap:8px 12px;
  font-size:13px;
}
.meal-history-value{
  font-weight:700;
  color:var(--macro-color, #334155);
}
@media (min-width: 620px){
  .meal-history-averages{
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }
}