/* =========================================
   Nutrition UI — Design Tokens (Global)
   Mobile-first; Dark-mode aware; A11y-focused
   ========================================= */

/* Color, spacing, radii, elevation, typography */
:root {
  /* Surfaces & text */
  --color-bg:           #FFFFFF;
  --color-surface:      #F8FAFC;
  --color-surface-2:    #EEF2F7;
  --color-text:         #0F172A;  /* slate-900 */
  --color-muted:        #475569;  /* slate-600 */
  --color-border:       #E2E8F0;  /* slate-200 */

  /* Brand & statuses (nutrition-focused) */
  --color-primary:      #2E7D32;  /* basil */
  --color-primary-weak: #A5D6A7;
  --color-accent:       #A3D65F;  /* lime */
  --color-info:         #2B59C3;  /* blueberry */
  --color-warning:      #FFB703;  /* saffron */
  --color-error:        #D64545;  /* tomato */

  /* Focus ring / selection */
  --color-outline:      #2563EB;  /* accessible */
  --outline-width:      3px;

  /* Elevation */
  --elev-1: 0 1px 2px rgba(15, 23, 42, .06);
  --elev-2: 0 4px 12px rgba(15, 23, 42, .10);
  --elev-3: 0 12px 24px rgba(15, 23, 42, .18);

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 9999px;
  --rt-card-max-width: 560px;


  /* Component hooks */
  --chip-pad-y: 6px;
  --chip-pad-x: 12px;
  --chip-gap:   8px;

  --bar-height-sm: 8px;



  /* Premium focus gradient (fallback if not set elsewhere) */
  --focus-gradient: linear-gradient(90deg,
    #FFB056 0%,
    var(--primary-grad-from, #ff8a00) 28%,
    var(--landing-brand-border) 62%,
    var(--landing-brand-border) 100%
  );

}

/* Dark mode tokens */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:        #000000; /* pitch black */
    --color-surface:   #000000; /* pitch black */
    --color-surface-2: #000000; /* pitch black */
    --color-text:      #E5E7EB;
    --color-muted:     #94A3B8;
    --color-border:    #334155;

    /* Keep status colors vivid for clarity */
    --color-primary:   #7BD389;
    --color-primary-weak: #244B2B;
    --color-info:      #7EA3F2;
    --color-warning:   #F6C250;
    --color-error:     #F47B7B;

    --color-outline:   #93C5FD;

    --focus-gradient: linear-gradient(90deg,
      #CC7A2E 0%,
      #E36E00 30%,
      #D5462F 65%,
      var(--landing-brand-border) 100%
    );

  }
}

/* Reduced motion preference respected everywhere */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}


[data-role="fluids"] { --role-color: #0ea5a5; }
[data-role="caffeine"] { --role-color: #8b5cf6; } /* lavender */



/* ===== Macro tokens (light) ===== */
:root {
  /* Core hues */
  --macro-carb: #E9B949;   /* honey / golden */
  --macro-veg:     #2e7d32;   /* Neutral green (category, not a macro) */

  /* Surface & text helpers */
  --macro-surface-alpha: 0.14;    /* tint amount for soft backgrounds */
  --macro-border-alpha:  0.55;    /* border emphasis */
  --macro-on-dark:       #ffffff;
  --macro-on-light:      #111827; /* near-black for readability */
}



:root {
  --macro-protein: #E2254E;   /* Protein */
  --macro-protein-ink: #FFFFFF;

  --macro-fat:  #6D28D9;   /* deep violet */
  --macro-fat-ink: #FFFFFF;

  /* Optional soft backgrounds for “subtle” chips */
  --macro-protein-bg: color-mix(in hsl, var(--macro-protein) 12%, transparent);
  --macro-fat-bg: color-mix(in hsl, var(--macro-fat) 12%, transparent);
}

/* Solid chips */
.np-mini-chip[data-role="protein"],
.food-chip.protein {
  background: var(--macro-protein);
  color: var(--macro-protein-ink);
}

.np-mini-chip[data-role="fats"],
.food-chip.fats {
  background: var(--macro-fat);
  color: var(--macro-fat-ink);
}

/* Subtle variant (if you use outlined/quiet chips) */
.chip--subtle.protein { background: var(--macro-protein-bg); color: var(--macro-protein); }
.chip--subtle.fats    { background: var(--macro-fat-bg);     color: var(--macro-fat); }


/* ===== Macro tokens (dark mode) ===== */
@media (prefers-color-scheme: dark) {
  :root {
    /* Slightly brighter hues so tints are still visible on dark surfaces */
    --macro-carb:    #ffc24a;
    --macro-veg:     #6dd37a;
    --macro-on-light:#e5e7eb; /* near-white */
  }
}

/* Role resolver: set --role-color via semantic hooks */
[data-role="protein"], .is-protein { --role-color: var(--macro-protein); }
[data-role="carbs"],  .is-carbs   { --role-color: var(--macro-carb); }
[data-role="fats"], [data-role="fat"], .is-fat { --role-color: var(--macro-fat); }
[data-role="veg"],   .is-veg      { --role-color: var(--macro-veg); }

/* Generic soft chip/pill using --role-color (works for .food-chip, .np-mini-chip, legend items) */
.macro-soft {
  --bg: color-mix(in srgb, var(--role-color), transparent calc(100% - var(--macro-surface-alpha) * 100%));
  --bd: color-mix(in srgb, var(--role-color), transparent calc(100% - var(--macro-border-alpha) * 100%));
  background: var(--bg);
  border: 1px solid var(--bd);
  color: var(--macro-on-light);
}

/* If you ever need a solid variant (e.g., tiny dots/keys) */
.macro-solid {
  background: var(--role-color);
  color: var(--macro-on-dark);
}

/* Legend dot + label */
.legend-item {
  display: inline-flex; align-items: center; gap: 6px; margin-right: 12px;
  font-size: 12px; line-height: 1;
}
.legend-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--role-color);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--role-color) 65%, #0000);
}


/* Tiny macro dot for meal lines (reuses --role-color via [data-role]/.is-*) */
.macro-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--role-color);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--role-color) 65%, #0000);
  display: inline-block;
  transform: translateY(1px);
}

/* Inline cluster for "dot + text" */
.macro-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Keep meal text ink neutral (do NOT recolor like the top summary row) */
.meal-macros .macro-count { 
  color: inherit;
}



/* Group labels get a left border in the macro color (CARBS/PROTEIN/FATS headers) */
.chip-group-label {
  padding-left: 8px; margin-bottom: 4px; font-weight: 600;
  border-left: 4px solid color-mix(in srgb, var(--role-color) 80%, #0000);
}

/* Apply macro style to chips and mini-chips when role is set */
.food-chip[data-role], .np-mini-chip[data-role] { 
  border-radius: 999px; padding: 6px 10px;
}
.food-chip[data-role] { 
  /* soft variant */
  background: color-mix(in srgb, var(--role-color), transparent calc(100% - var(--macro-surface-alpha) * 100%));
  border: 1px solid color-mix(in srgb, var(--role-color), transparent calc(100% - var(--macro-border-alpha) * 100%));
  color: var(--macro-on-light);
}
.np-mini-chip[data-role] {
  background: color-mix(in srgb, var(--role-color), transparent 80%);
  border: 1px solid color-mix(in srgb, var(--role-color), transparent 60%);
  color: var(--macro-on-light);
}

/* Conflict/swapped states keep accessibility */
.food-chip.chip-conflict { opacity: 0.55; filter: grayscale(0.2); }
.food-chip.chip-swapped  { outline: 2px solid var(--role-color); outline-offset: 1px; }

/* Coach choice marker (✓) — visually subtle, still readable on all macro colors */
.food-chip[data-coach="1"] {
  position: relative;
  /* keep the existing left padding; only reserve room on the right for the badge */
  padding-right: calc(10px + clamp(18px, 3.2vw, 22px));
}

.food-chip[data-coach="1"]::after {
  content: "✓";
  position: absolute;
  top: 50%;
  right: clamp(6px, 1.6vw, 10px);
  transform: translateY(-50%);
  width: clamp(18px, 3.2vw, 20px);
  height: clamp(18px, 3.2vw, 20px);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(10px, 2.4vw, 12px);
  font-weight: 900;
  background: color-mix(in srgb, var(--role-color), transparent 72%);
  border: 1px solid color-mix(in srgb, var(--role-color), transparent 45%);
  color: var(--macro-on-light);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--role-color) 22%, transparent);
  pointer-events: none;
}

.food-chip.chip-conflict[data-coach="1"]::after {
  opacity: 0.9;
}

/* Macro counts (e.g., “25g P · 40g C · 10g F”) */
.macro-count { font-weight: 600; }
.macro-count.is-protein { color: var(--macro-protein); }
.macro-count.is-carbs   { color: var(--macro-carb); }
.macro-count.is-fat     { color: var(--macro-fat); }

/* Macro split line “% P · % C · % F” */
#np-macro-split .legend-item { opacity: 0.9; }

/* Optional: color the pre/post tiles by role too */
.np-chip-list .np-mini-chip[data-role="protein"] { box-shadow: 0 0 0 1px color-mix(in srgb, var(--macro-protein), transparent 60%); }
.np-chip-list .np-mini-chip[data-role="carbs"]   { box-shadow: 0 0 0 1px color-mix(in srgb, var(--macro-carb), transparent 60%); }
.np-chip-list .np-mini-chip[data-role="fats"]    { box-shadow: 0 0 0 1px color-mix(in srgb, var(--macro-fat), transparent 60%); }

/* Leave hydration neutral; it's not a macro */



/* =======================================================
   Nutrition UI — Kitchen Layer (Components & Layout)
   - Uses tokens from styles/tokens.css
   - Mobile-first; Breakpoints: ≤480, ≤600, ≤768, ≥769
   - No JS behavior changes; selectors preserved
   ======================================================= */

/* ---------------- Animations (lightweight) ---------------- */
@keyframes pop-in       { 0%{opacity:0; transform:translateY(6px) scale(.98)} 100%{opacity:1; transform:translateY(0) scale(1)} }
@keyframes fade-in      { from{opacity:0} to{opacity:1} }
@keyframes snackbar-in  { 0%{transform:translateY(8px); opacity:0} 100%{transform:translateY(0); opacity:1} }

/* Utility hooks (used by existing JS) */
.animate-pop      { animation: pop-in .14s ease-out both; }
.animate-fade     { animation: fade-in .14s ease-out both; }
.animate-slide-up { animation: pop-in .16s ease-out both; } /* unified motion */
.flash-outline    { box-shadow: 0 0 0 var(--outline-width) rgba(37,99,235,.30) inset; }


/* ---------------- Base / Card ---------------- */
.nutrition-card,
.nutrition-card.premium {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-1);
  padding: 10px 5px;
  margin: 10px 25px;
  width: 95%;
  max-width: 100%;
}


/* nutrition-card align */
@media (max-width: 600px) {
.nutrition-card,
.nutrition-card.premium    { 

  padding: 10px 7px;
  margin: 10px 12px;
  width: 95%;
  max-width: 100%;
  box-sizing: border-box; 
  }
 }


.meal-block {
  padding: 10px 5px;
  margin: 10px -12px;
  width: 100%;
  box-sizing: border-box;

  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  background: var(--card, #fff);
  display: grid;

  text-align: left;
}



/* meal block align */
@media (max-width: 600px) {
  .meal-block
             {   

 padding: 10px 17px;
  margin: 10px -18px;
  width: 100%;
  box-sizing: border-box; 
  }
 }



/* Macro row container: wraps each category (CARBS/PROTEIN/VEG/FATS) */
.macro-strip {
  width: 80%;
  max-width: 100%;

}




/* On very small screens, let it breathe full width */
@media (max-width: 600px) {
  .macro-strip { width: 80%; }
}


/* Macro metrics line container (plate % and split legend) */
.macro-line {
  width: 80%;
  max-width: 100%;

}

/* Tiny screens: let it use the full width */
@media (max-width: 600px) {
  .macro-line { width: 80%; }
}




/* ---------------- Kitchen loading skeleton ---------------- */
.kitchen-loading-skeleton {
  width: 80%;
  max-width: 100%;
  margin: var(--space-5) auto;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--elev-1);
  display: grid;
  gap: var(--space-3);
  box-sizing: border-box;
}


.kitchen-loading-skeleton[hidden] {
  display: none !important;
}

/* ---------------- Program gate / locked state ---------------- */
.kitchen-gate {
  width: 90%;
  max-width: 960px;
  margin: var(--space-5) auto;
  box-sizing: border-box;
}

.kitchen-gate[hidden] {
  display: none !important;
}

.kitchen-gate__shell {
  position: relative;
  overflow: hidden;
  padding: 32px 28px;
  border: 1px solid color-mix(in srgb, var(--color-border) 78%, transparent);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--color-accent) 20%, transparent) 0%, transparent 36%),
    linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 96%, transparent) 0%, color-mix(in srgb, var(--color-surface-2) 88%, transparent) 100%);
  box-shadow: var(--elev-2);
  text-align: center;
}

.kitchen-gate__shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 14%, transparent), transparent 42%, color-mix(in srgb, var(--color-primary) 12%, transparent));
  opacity: 0.8;
}

.kitchen-gate__eyebrow,
.kitchen-gate__icon,
.kitchen-gate__copy,
.kitchen-gate__highlights,
.kitchen-gate__actions {
  position: relative;
  z-index: 1;
}

.kitchen-gate__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--color-accent) 42%, transparent);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-text);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.kitchen-gate__icon {
  width: 84px;
  height: 84px;
  margin: 18px auto 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-bg) 92%, transparent), color-mix(in srgb, var(--color-surface-2) 92%, transparent));
  border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent);
  
}

.kitchen-gate__icon svg {
  width: 38px;
  height: 38px;
  stroke: color-mix(in srgb, var(--color-text) 86%, transparent);
  stroke-width: 1.75;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kitchen-gate__copy {
  margin-top: 18px;
}

.kitchen-gate__title {
  margin: 0;
  color: var(--color-text);
  font-size: 2rem;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.kitchen-gate__text {
  width: 100%;
  max-width: 680px;
  margin: 14px auto 0;
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1.65;
  box-sizing: border-box;
}

.kitchen-gate__highlights {
  width: 100%;
  max-width: 760px;
  margin: 20px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
}

.kitchen-gate__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--color-border) 84%, transparent);
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  color: var(--color-text);
  font-size: 0.95rem;
  font-weight: 700;
}

.kitchen-gate__actions {
  width: 100%;
  max-width: 760px;
  margin: 22px auto 0;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.kitchen-gate__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: 0.01em;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  box-sizing: border-box;
}

.kitchen-gate__btn:hover,
.kitchen-gate__btn:focus-visible {
  transform: translateY(-1px);
}

.kitchen-gate__btn:focus-visible {
  outline: var(--outline-width) solid var(--color-outline);
  outline-offset: 3px;
}

.kitchen-gate__btn--primary {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 92%, white 8%), color-mix(in srgb, var(--color-accent) 90%, transparent));
  color: #ffffff;
  border: 1px solid transparent;
  box-shadow: 0 12px 24px color-mix(in srgb, var(--color-primary) 26%, transparent);
}

.kitchen-gate__btn--secondary {
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  color: var(--color-text);
  border: 1px solid color-mix(in srgb, var(--color-border) 86%, transparent);
  box-shadow: var(--elev-1);
}

@media (prefers-color-scheme: dark) {
  .kitchen-gate__shell {
    border-color: color-mix(in srgb, var(--color-border) 72%, transparent);
    background:
      radial-gradient(circle at top right, color-mix(in srgb, var(--color-accent) 18%, transparent) 0%, transparent 38%),
      linear-gradient(180deg, color-mix(in srgb, #ffffff 5%, transparent) 0%, color-mix(in srgb, #ffffff 2%, transparent) 100%);
  }

  .kitchen-gate__icon {
    background: linear-gradient(180deg, color-mix(in srgb, #ffffff 7%, transparent), color-mix(in srgb, #ffffff 3%, transparent));
    border-color: color-mix(in srgb, #ffffff 10%, transparent);
    
  }

  .kitchen-gate__pill,
  .kitchen-gate__btn--secondary {
    background: color-mix(in srgb, #ffffff 4%, transparent);
    border-color: color-mix(in srgb, #ffffff 10%, transparent);
  }
}

@media (max-width: 768px) {
  .kitchen-gate,
  .kitchen-gate__shell,
  .kitchen-gate__text,
  .kitchen-gate__highlights,
  .kitchen-gate__actions,
  .kitchen-gate__btn {
    width: 98%;
    max-width: 98%;
    box-sizing: border-box;
  }

  .kitchen-gate {
    margin-left: auto;
    margin-right: auto;
  }

  .kitchen-gate__shell {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 600px) {
  .kitchen-gate__shell {
    padding: 22px 16px;
    border-radius: 20px;
  }

  .kitchen-gate__title {
    font-size: 1.45rem;
  }

  .kitchen-gate__text {
    font-size: 0.96rem;
    line-height: 1.55;
  }

  .kitchen-gate__actions {
    gap: 10px;
  }

  .kitchen-gate__btn {
    min-height: 48px;
  }
}

@media (max-width: 480px) {
  .kitchen-gate__icon {
    width: 72px;
    height: 72px;
  }

  .kitchen-gate__icon svg {
    width: 32px;
    height: 32px;
  }
}

.kls-header,
.kls-kcal,
.kls-macro-grid,
.kls-line,
.kls-meals,
.kls-meal-card,
.kls-macro {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-surface-2) 78%, transparent);
}

.kls-header,
.kls-meals {
  display: grid;
  gap: var(--space-2);
  background: transparent;
}

.kls-line { height: 14px; }
.kls-line-title { width: 220px; max-width: 100%; margin: 0 auto; }
.kls-line-date { width: 170px; max-width: 100%; margin: 0 auto; }
.kls-line-day { width: 240px; max-width: 100%; margin: 0 auto; }
.kls-kcal { height: 56px; width: 120px; margin: 4px auto; }
.kls-macro-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  background: transparent;
}
.kls-macro { height: 48px; }
.kls-line-plate { height: 14px; width: 280px; max-width: 100%; margin: 0 auto; }
.kls-line-meals-title { height: 16px; width: 140px; max-width: 100%; margin: 0 auto; }
.kls-meal-card { height: 84px; }

.kls-header::after,
.kls-kcal::after,
.kls-macro::after,
.kls-line::after,
.kls-meal-card::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(100deg,
    transparent 0%,
    color-mix(in srgb, var(--color-accent) 20%, transparent) 46%,
    color-mix(in srgb, #ffffff 40%, transparent) 50%,
    color-mix(in srgb, var(--color-accent) 20%, transparent) 54%,
    transparent 100%);
  animation: kls-shimmer 1.25s ease-in-out infinite;
}

@keyframes kls-shimmer {
  100% { transform: translateX(100%); }
}

@media (prefers-color-scheme: dark) {
  .kls-header,
  .kls-kcal,
  .kls-line,
  .kls-meal-card,
  .kls-macro {
    background: color-mix(in srgb, #ffffff 9%, transparent);
  }

  .kls-header::after,
  .kls-kcal::after,
  .kls-macro::after,
  .kls-line::after,
  .kls-meal-card::after {
    background: linear-gradient(100deg,
      transparent 0%,
      color-mix(in srgb, var(--color-accent) 26%, transparent) 44%,
      color-mix(in srgb, #ffffff 20%, transparent) 50%,
      color-mix(in srgb, var(--color-accent) 26%, transparent) 56%,
      transparent 100%);
  }
}

@media (max-width: 768px) {
  .kitchen-loading-skeleton,
  .kls-header,
  .kls-macro-grid,
  .kls-meals {
    width: 98%;
    max-width: 98%;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---------------- Header ---------------- */
.np-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.nutrition-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.nutrition-subtitle { margin: 2px 0 0; color: var(--color-muted); font-size: .95rem; }
.np-header .sep     { margin: 0 var(--space-2); color: var(--color-muted); }


.np-date-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 6px auto 0;
  padding: 4px 12px;
  border-radius: 9999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.25;
}

/* === Subtitle row: premium alignment & truncation ======================= */
.nutrition-subtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: nowrap;
  margin-top: 4px;
}

#np-train-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 60ch;
  padding: 6px 12px;
  border-radius: 9999px;
  border: 1px solid color-mix(in srgb, var(--color-border) 76%, var(--color-text) 24%);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-surface) 74%, #ffffff 26%) 0%,
    color-mix(in srgb, var(--color-surface-2) 90%, #ffffff 10%) 100%
  );
  color: var(--color-text);
  font-size: .92rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: .02em;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, .08),
    0 8px 20px rgba(15, 23, 42, .06),
    inset 0 1px 0 rgba(255, 255, 255, .55);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#np-train-title::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--focus-gradient);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-accent) 42%, transparent),
    0 0 12px color-mix(in srgb, var(--color-accent) 24%, transparent);
}

#np-train-title.is-high {
  border-color: color-mix(in srgb, #ef4444 34%, var(--color-border));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #ef4444 14%, #ffffff 86%) 0%,
    color-mix(in srgb, #ef4444 10%, var(--color-surface-2) 90%) 100%
  );
  color: #991b1b;
}

#np-train-title.is-medium {
  border-color: color-mix(in srgb, #f59e0b 36%, var(--color-border));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #f59e0b 16%, #ffffff 84%) 0%,
    color-mix(in srgb, #f59e0b 11%, var(--color-surface-2) 89%) 100%
  );
  color: #9a3412;
}

#np-train-title.is-low {
  border-color: color-mix(in srgb, #22c55e 34%, var(--color-border));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #22c55e 14%, #ffffff 86%) 0%,
    color-mix(in srgb, #22c55e 10%, var(--color-surface-2) 90%) 100%
  );
  color: #166534;
}

#np-train-title.is-high::before,
#np-train-title.is-medium::before,
#np-train-title.is-low::before {
  background: currentColor;
  box-shadow:
    0 0 0 1px color-mix(in srgb, currentColor 45%, transparent),
    0 0 10px color-mix(in srgb, currentColor 20%, transparent);
}

/* On narrower screens, allow a bit less width so the pill stays visible */
@media (max-width: 600px) {
  #np-train-title {
    max-width: 38ch;
    padding: 5px 10px;
    font-size: .88rem;
  }
}
@media (max-width: 480px) {
  #np-train-title {
    max-width: 28ch;
    padding: 5px 9px;
    font-size: .84rem;
  }
}

/* === DNT pill (H / M / L) ============================================== */
#np-dnt.dnt-pill {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 9999px;
  font: inherit;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text);
  transform: translateZ(0); /* crisp edges */
}

/* Accent dot inside the pill (added via ::before so text remains 'H/M/L') */
#np-dnt.dnt-pill::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: currentColor;
  box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 65%, transparent);
}

/* Semantic intensities — readable on both themes */
#np-dnt.dnt-pill.is-high   { background: color-mix(in srgb, #ef4444 14%, transparent); color: #b91c1c; /* red */ }
#np-dnt.dnt-pill.is-medium { background: color-mix(in srgb, #f59e0b 16%, transparent); color: #b45309; /* amber */ }
#np-dnt.dnt-pill.is-low    { background: color-mix(in srgb, #22c55e 14%, transparent); color: #166534; /* green */ }

/* Dark mode tweaks for ink contrast */
@media (prefers-color-scheme: dark) {
  #np-dnt.dnt-pill {
    border-color: color-mix(in srgb, var(--color-border), transparent 30%);
    background: rgba(255,255,255,.06);
    color: var(--color-text);
  }
  #np-dnt.dnt-pill.is-high   { background: color-mix(in srgb, #ef4444 24%, transparent); color: #ffb4b4; }
  #np-dnt.dnt-pill.is-medium { background: color-mix(in srgb, #f59e0b 26%, transparent); color: #ffd18a; }
  #np-dnt.dnt-pill.is-low    { background: color-mix(in srgb, #22c55e 24%, transparent); color: #a6f3bf; }

  #np-train-title {
    border-color: color-mix(in srgb, var(--color-border) 78%, #ffffff 22%);
    background: linear-gradient(
      180deg,
      color-mix(in srgb, #ffffff 10%, transparent) 0%,
      color-mix(in srgb, #ffffff 4%, transparent) 100%
    );
    box-shadow:
      0 1px 2px rgba(0, 0, 0, .32),
      0 10px 22px rgba(0, 0, 0, .24),
      inset 0 1px 0 rgba(255, 255, 255, .08);
  }

  #np-train-title.is-high {
    border-color: color-mix(in srgb, #ef4444 42%, rgba(255, 255, 255, .18));
    background: linear-gradient(
      180deg,
      color-mix(in srgb, #ef4444 22%, transparent) 0%,
      color-mix(in srgb, #ef4444 14%, rgba(255, 255, 255, .04)) 100%
    );
    color: #fecaca;
  }

  #np-train-title.is-medium {
    border-color: color-mix(in srgb, #f59e0b 42%, rgba(255, 255, 255, .18));
    background: linear-gradient(
      180deg,
      color-mix(in srgb, #f59e0b 24%, transparent) 0%,
      color-mix(in srgb, #f59e0b 15%, rgba(255, 255, 255, .04)) 100%
    );
    color: #fde68a;
  }

  #np-train-title.is-low {
    border-color: color-mix(in srgb, #22c55e 42%, rgba(255, 255, 255, .18));
    background: linear-gradient(
      180deg,
      color-mix(in srgb, #22c55e 22%, transparent) 0%,
      color-mix(in srgb, #22c55e 14%, rgba(255, 255, 255, .04)) 100%
    );
    color: #bbf7d0;
  }

  #np-train-title::before {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, .12),
      0 0 14px color-mix(in srgb, var(--color-accent) 28%, transparent);
  }

  #np-train-title.is-high::before,
  #np-train-title.is-medium::before,
  #np-train-title.is-low::before {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, .12),
      0 0 14px color-mix(in srgb, currentColor 24%, transparent);
  }
}



/* Center key Kitchen headers/date context across devices */
.np-header > div {
  text-align: center;
}

.nutrition-subtitle {
  width: 100%;
}

.popover-swaps-header {
  justify-content: flex-start;
}

.np-icon-action {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  border-radius: 0;
  box-shadow: none;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.np-icon-action:hover,
.np-icon-action:focus,
.np-icon-action:focus-visible {
  background: transparent;
  color: inherit;
  border-color: transparent;
  box-shadow: none;
  outline: none;
  text-decoration: none;
}

.np-icon-action__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.np-icon-action__icon svg {
  display: block;
  width: 24px;
  height: 24px;
}

.np-icon-action__label {
  display: block;
  font-size: 0.75rem;
  line-height: 1.1;
  font-weight: 600;
  text-align: center;
  text-transform: none;
}

.chip-popover-close {
  position: absolute;
  top: 12px;
  right: 12px;
  margin: 0;
  z-index: 1;
}

.chip-popover-close .np-icon-action__icon svg {
  width: 20px;
  height: 20px;
}

.chip-help-btn {
  color: var(--color-text);
  border-color: var(--color-border);
  background: var(--color-surface-2);
  font-weight: 800;
}

.chip-help-btn:hover,
.chip-help-btn:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.popover-footer {
  margin-top: var(--space-2);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.chip-reset-btn {
  margin: 0;
}

@media (max-width: 768px) {
  .np-header,
  .nutrition-subtitle,
  .np-meals-inline,
  .np-meals-inline .np-subheading,
  .np-meals-inline .np-date-pill {
    width: 98%;
    max-width: 98%;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Hide the middle dot if the row wraps (keeps things tidy) */
@media (max-width: 480px) {
  .nutrition-subtitle .sep { display: none; }
}


/* ---------------- Plate Meter (segmented bar) — Premium ---------------- */
.np-plate-meter {
  position: relative;                   /* enables overlay ticks */

  width: 100%;
  max-width: var(--rt-card-max-width, 520px); /* default cap: 520px */
  min-width: 0;

  display: flex;
  align-items: stretch;
  height: 16px;                         /* mobile-first: slightly taller for clarity */
  border-radius: var(--radius-pill, 999px);
  overflow: hidden;
  background: color-mix(in srgb, var(--color-border) 78%, transparent);
  margin-block: 8px 10px;               /* breathing room above/below */
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--color-border) 60%, transparent),
    0 0.5px 0.5px rgba(0,0,0,.04);      /* subtle lift without glare */
}

/* Subtle 25/50/75% guide ticks for quick proportion scanning (non-intrusive) */
.np-plate-meter::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;                           /* under segments/labels */
  pointer-events: none;
  background:
    linear-gradient(to right,
      transparent 0%,
      rgba(0,0,0,.06) 0%  /* 25% tick */
    ),
    linear-gradient(to right,
      transparent 0%,
      rgba(0,0,0,.06) 0%  /* 50% tick (overlaps via positioning) */
    ),
    linear-gradient(to right,
      transparent 0%,
      rgba(0,0,0,.06) 0%  /* 75% tick */
    );
  background-size:
    25% 100%,
    50% 100%,
    75% 100%;
  background-repeat: no-repeat;
  background-position:
    25% 0,
    50% 0,
    75% 0;
}

/* MOBILE WIDTH */
@media (max-width: 480px) { 
.np-plate-meter { height: 15px; 

  box-sizing: border-box;
  width: 85%;
  max-width: var(--rt-card-max-width, 520px); /* default cap: 520px */
  min-width: 0;

 } 
}


/* --- Ring mode (donut) for the plate meter -------------------------------- */
.np-plate-meter.is-ring {
  /* Size & shape */
  --plate-ring-size: 148px;            /* mobile-first */
  position: relative;
  display: block;                      /* override flex bar */
  width: var(--plate-ring-size);
  height: var(--plate-ring-size);
  border-radius: 50%;
  margin: 10px auto;                   /* center in the column */
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--color-border) 60%, transparent),
    0 0.5px 0.5px rgba(0,0,0,.04);

  /* Segments via conic-gradient fed by JS vars:
     --seg-1: end of Carbs, --seg-2: end of Protein, --seg-3: end of Veg,
     final Fat segment fills to 100% */
  background:
    conic-gradient(
      var(--macro-carb)    0            var(--seg-1, 0%),
      var(--macro-protein) var(--seg-1, 0%) var(--seg-2, 0%),
      var(--macro-veg)     var(--seg-2, 0%) var(--seg-3, 0%),
      var(--macro-fat)     var(--seg-3, 0%) 100%
    );
}

/* Donut hole (uses card surface so it blends with your theme) */
.np-plate-meter.is-ring::after {
  content: "";
  position: absolute;
  inset: 22%;                          /* ring thickness; tweak if desired */
  background: var(--color-surface);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-border), transparent 20%);
}

/* Disable linear-meter chrome in ring mode */
.np-plate-meter.is-ring::before { display: none; }
.np-plate-meter.is-ring .np-plate-seg,
.np-plate-meter.is-ring .seg-label { display: none !important; }

/* Ring sizing per breakpoint */
@media (min-width: 769px) {
  .np-plate-meter.is-ring { --plate-ring-size: 170px; }
}
@media (max-width: 480px) {
  .np-plate-meter.is-ring { --plate-ring-size: 140px; }
}

/* Dark-mode tweaks: keep center consistent with dark surface */
@media (prefers-color-scheme: dark) {
  .np-plate-meter.is-ring::after {
    background: var(--color-surface);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  }
}


/* DAY PLATE SPLIT SECTION */
@media (min-width: 769px) {
  .np-plate-meter { height: 16px; }
}

/* Each colored segment (width animated in JS) */
.np-plate-seg {
  position: relative;
  z-index: 1;                           /* above ::before ticks, below labels */
  width: 0%;                            /* JS animates to --w */
  transition: width 260ms cubic-bezier(.22,.61,.36,1);
  will-change: width;
  background: var(--role-color);
  box-shadow: inset 0 -0.5px 0 rgba(0,0,0,.06); /* subtle depth */
}


/* Crisp separators between segments (hairline, high-DPI safe) */
.np-plate-seg::after {
  content: "";
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 1px;
  transform: translateX(.5px);          /* avoids double-thick seam on some DPIs */
  background: color-mix(in srgb, #000 10%, transparent);
  opacity: .18;
}
.np-plate-seg:first-child::after { display: none; }


/* Inline labels (show only when wide; JS toggles .is-wide) */
.np-plate-seg .seg-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  color: var(--macro-on-dark, #0d0f14);
  letter-spacing: .2px;
  opacity: 0;
  pointer-events: none;
}

/* JS adds .is-wide when pct ≥ 14 (readable on small phones) */
.np-plate-seg.is-wide .seg-label { opacity: .96; }

/* Tweak label size slightly up on wider screens */
@media (min-width: 769px) {
  .np-plate-seg .seg-label { font-size: 12px; }
}


/* Color hooks reuse your semantic tokens */
.np-plate-seg[data-role="carbs"]   { --role-color: var(--macro-carb); }
.np-plate-seg[data-role="protein"] { --role-color: var(--macro-protein); }
.np-plate-seg[data-role="veg"]     { --role-color: var(--macro-veg); }
.np-plate-seg[data-role="fats"]    { --role-color: var(--macro-fat); }

/* Dark mode: tuned contrast and tick visibility */
@media (prefers-color-scheme: dark) {
  .np-plate-meter {
    background: color-mix(in srgb, #ffffff 10%, transparent);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.12),
      0 0.5px 0.5px rgba(0,0,0,.25);
  }
  .np-plate-meter::before {
    background:
      linear-gradient(to right, transparent 0%, rgba(255,255,255,.10) 0%),
      linear-gradient(to right, transparent 0%, rgba(255,255,255,.10) 0%),
      linear-gradient(to right, transparent 0%, rgba(255,255,255,.10) 0%);
    background-size: 25% 100%, 50% 100%, 75% 100%;
    background-repeat: no-repeat;
    background-position: 25% 0, 50% 0, 75% 0;
  }
  .np-plate-seg::after { background: rgba(255,255,255,.22); opacity: .22; }
  .np-plate-seg .seg-label { color: var(--macro-on-dark, #0d0f14); text-shadow: none; }
}

/* Entry animation for the container when it first mounts */
.np-plate-meter.animate-pop {
  animation: np-pop-in 220ms cubic-bezier(.2,.9,.3,1);
  transform-origin: center;
}
@keyframes np-pop-in {
  from { transform: translateZ(0) scale(.985); opacity: .0; }
  to   { transform: translateZ(0) scale(1);     opacity: 1;  }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .np-plate-meter.animate-pop { animation: none; }
  .np-plate-seg { transition: none; }
}

/* High contrast / forced colors: keep structure without over-styling */
@media (prefers-contrast: more) {
  .np-plate-meter { box-shadow: inset 0 0 0 1.25px currentColor; }
  .np-plate-seg::after { opacity: .35; }
}
@media (forced-colors: active) {
  .np-plate-meter { background: Canvas; box-shadow: inset 0 0 0 1px CanvasText; }
  .np-plate-seg { background: CanvasText; }
  .np-plate-seg .seg-label { color: Canvas; }
  .np-plate-meter::before { display: none; }  /* ticks off in forced-colors */
}


/* MOBILE FONT SIZE: make the plate line and split a touch larger/tighter */
@media (max-width: 600px) {
  #np-plate, .np-plate { 
    font-size: 1rem;       /* ~16px on most browsers */
  }
}


/* ---------------- Buttons ---------------- */
.np-actions { display: flex; gap: var(--space-2); align-items: center; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  background: var(--color-primary);
  color: #fff;
  border: 1px solid var(--color-primary);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 700;
  line-height: 1;
  min-height: 40px;
}

/* Quad Prep Fuelers controls row spacing */
#rt-load-ctr {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Ensure Expand All truly looks like a ghost button (no link visuals) */
#rt-load-ctr .rt-show-all.btn-ghost {
  /* inherits ghost colors/border; enforce compact size parity with .btn-sm */
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  background: transparent;
  border-radius: var(--radius-sm);
}

/* Keep focus ring parity with other buttons (uses your existing focus-visible rule) */


.btn-ghost {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.btn-sm {
  padding: 6px 10px;
  font-size: .9rem;
  min-height: 36px;
}

.link-btn {
  background: transparent;
  border: none;
  color: var(--color-info);
  font-weight: 700;
  cursor: pointer;
}


/* Ensure anchor elements styled as .btn don't render as underlined links */
.btn, .btn-ghost, .btn-sm { text-decoration: none; }

/* Small helper: tighten the RT adjust control so it visually matches other controls */
.rt-adjust { white-space: nowrap; }

/* If you prefer the Adjust button to be more subtle (ghost) on wide layouts)
   you can keep btn-ghost class (we use it in the HTML patch below). */


button:focus { outline: none; } /* avoid mouse focus noise */
:where(button, .btn, .link-btn):focus-visible {
  outline: var(--outline-width) solid var(--color-outline);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---------------- Layout ---------------- */
.np-body { display: flex; flex-direction: column; gap: var(--space-3); }
.np-left, .np-right { padding: 6px 0; }

/* ≥769 switches to 2 columns */
@media (min-width: 769px) {
  .np-body { flex-direction: row; gap: var(--space-5); align-items: flex-start; }
  .np-left  { flex: 1 1 420px; }
  .np-right { flex: 0 0 360px; border-left: 1px solid var(--color-border); padding-left: var(--space-5); }
  .np-right[hidden] { display: block; } /* preserve JS behavior */
}

/* === Right-side "rail" styling (desktop only) =========================== */
@media (min-width: 769px) {
  /* Neutralize any card-like chrome inside the rail */
  .np-right .rail-section {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0 0 var(--space-5);
    margin: 0 0 var(--space-5);
  }

  /* Subtle, intra-rail separation (not a full box) */
@media (min-width: 769px) {
  .np-right .rail-section + .rail-section {
    border-top: 0;                      /* removed separator */
    padding-top: var(--space-5);        /* keep spacing for visual rhythm */
  }
}

  /* Give right-rail headings a consistent rhythm (you already render them) */
  .np-right .np-mini-heading,
  .np-right .np-hyd-value,
  .np-right .np-explain-header {
    margin-bottom: var(--space-2);
  }

  /* Ensure chips & explain lists breathe but don't look boxed */
  .np-right .np-chip-list,
  .np-right #np-hydration-text,
  .np-right .np-explain-chip-list {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
  }
}

/* Mobile keeps the existing top separator; no extra chrome needed */
@media (max-width: 768px) {
  .np-right .rail-section { padding: 0 0 var(--space-4); margin: 0 0 var(--space-4); }
  .np-right .rail-section + .rail-section {
    border-top: 0;                      /* removed internal separators on mobile */
    padding-top: var(--space-4);
  }
}


/* ≤768 stacks right under left and forces visibility if [hidden] is present */
@media (max-width: 768px) {
  .np-body {
    flex-direction: column;
    gap: var(--space-4);
    align-items: stretch;
  }

  .np-left  {
    order: 1;
    flex: 1 1 auto;
    width: 100%;
  }

  .np-right {
    order: 2;
    flex: 1 1 auto;
    width: 100%;

    /* Swap desktop left-divider for a mobile top-divider */
    border-left: 0;
    padding-left: 0;

    border-top: 1px solid var(--color-border);
    padding-top: var(--space-5);
  }

  /* On mobile, render even if the element has [hidden] (to avoid disappearance) */
  .np-right[hidden] {
    display: block;
  }
}



/* ---------------- Top-line Stats ---------------- */
.np-stats { display: grid; gap: var(--space-3); }
.np-kcal-block { display: flex; align-items: baseline; gap: var(--space-2); }
.np-kcal-value { font-size: 2.05rem; font-weight: 800; }
.np-kcal-label { color: var(--color-muted); font-size: .95rem; }

/* Macros row */
.np-macros-grid { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.macro        { min-width: 88px; }
.macro-value  { font-weight: 800; font-size: 1rem; }
.macro-label  { font-size: .85rem; color: var(--color-muted); }

/* Macro split + plate note */
.np-split { color: var(--color-muted); font-size: .9rem; margin-top: 6px; }
.np-plate { color: var(--color-muted); font-size: .95rem; margin-top: 8px; }


/* FIX: keep each "<percent>% <label>" together */
#np-plate .macro-token {
  white-space: nowrap;
}

/* Optional: avoid odd hyphenation inside percent chunks */
#np-plate { word-break: keep-all; }


/* ===== Update Details CTA (np-update-cta) — Mobile-first, Dark-mode aware ===== */

/* CTA row */
.np-cta-row { 
display: flex; 
gap: 14px; 
margin-top: 8px; 
align-items: center; 

  box-sizing: border-box;
  width: 90%;
  max-width: var(--rt-card-max-width, 520px); /* default cap: 520px */
  min-width: 0;

}

#np-update-cta {
  display: block;
  margin-top: var(--space-4);
  padding: var(--space-4);

  box-sizing: border-box;
  width: 90%;
  max-width: var(--rt-card-max-width, 520px); /* default cap: 520px */
  min-width: 0;

}

.np-cta-empty {
  display: flex;
  margin-top: var(--space-4);
  padding: var(--space-4);
  box-sizing: border-box;
  width: 90%;
  max-width: var(--rt-card-max-width, 520px); /* default cap: 520px */
  min-width: 0;

}


#np-update-cta #np-update-cta-link.btn {

  box-sizing: border-box;
  width: 90%;
  max-width: var(--rt-card-max-width, 520px); /* default cap: 520px */
  min-width: 0;
  justify-content: center;
}

#np-update-cta .np-cta-msg {
  margin: 0 0 var(--space-3) 0;
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--color-text);
  word-break: break-word;

  box-sizing: border-box;
  width: 90%;
  max-width: var(--rt-card-max-width, 520px); /* default cap: 520px */
  min-width: 0;

}

#np-update-cta .np-cta-msg em {
  font-style: italic;
  color: var(--color-muted);

  box-sizing: border-box;
  width: 90%;
  max-width: var(--rt-card-max-width, 520px); /* default cap: 520px */
  min-width: 0;

}

#np-update-cta .np-cta-msg strong {
  font-weight: 800;
  color: var(--color-text);
}



/* ≤600: slightly larger copy to avoid zoom, preserve tap size */
@media (max-width: 600px) {

#np-update-cta { 

  box-sizing: border-box;
  width: 80%;
  max-width: var(--rt-card-max-width, 520px); /* default cap: 520px */
  min-width: 0;
}

  #np-update-cta .np-cta-msg { font-size: 18px; line-height: 1.4; 
  box-sizing: border-box;
  width: 80%;
  max-width: var(--rt-card-max-width, 520px); /* default cap: 520px */
  min-width: 0;
}

#np-update-cta .np-cta-msg em {
  box-sizing: border-box;
  width: 80%;
  max-width: var(--rt-card-max-width, 520px); /* default cap: 520px */
  min-width: 0;

 }


  #np-update-cta #np-update-cta-link.btn { min-height: 44px; 

  box-sizing: border-box;
  width: 80%;
  max-width: var(--rt-card-max-width, 520px); /* default cap: 520px */
  min-width: 0;

 }
}



/* 601–768: keep stacked, but tighten spacing slightly */
@media (min-width: 601px) and (max-width: 768px) {
  #np-update-cta { padding: var(--space-4); }
}

/* ≥769: place message & button side-by-side with sensible spacing */
@media (min-width: 769px) {
  #np-update-cta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }
  #np-update-cta .np-cta-msg {
    margin: 0;
    flex: 1 1 auto;
  }
  #np-update-cta #np-update-cta-link.btn {
    width: auto;           /* revert from full-width */
    flex: 0 0 auto;
  }
}

/* Dark mode: inherits tokens; no extra overrides required */



/* Meals list */
.meals-list { margin-top: 6px; }
.meals-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.meals-list li {
  display: flex; align-items: center; gap: 10px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px;
}

/* Responsive typographic tweaks */
@media (max-width: 768px) {
  .np-kcal-value { font-size: 1.6rem; }
  .macro         { min-width: 72px; }
}
@media (max-width: 600px) {
  .nutrition-card { padding: var(--space-4); }
  .np-actions { gap: 6px; }
}
@media (max-width: 480px) {
  .np-kcal-value  { font-size: 1.35rem; }
  .np-macros-grid { gap: 6px; }
}

/* ---------------- Plate Chips & Popover ---------------- */
.np-plate-chips { display: flex; flex-wrap: wrap; gap: var(--chip-gap); margin-top: var(--space-3); align-items: flex-start; }
.chip-group      { display: flex; gap: var(--space-2); align-items: center; margin-right: var(--space-2); }

/* Force one macro section per row (stacked layout) */
.np-plate-chips { align-items: stretch; }

.np-plate-chips > .chip-group {
  flex: 1 1 100%;
  width: 100%;
}


.chip-group-label {
  font-size: .75rem; color: var(--color-muted); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}
.chip-list { display: flex; flex-wrap: wrap; gap: var(--chip-gap); }

/* Horizontal scroller wrapper for macro chip rows (exactly 3 visible, rest scroll) */
.chip-scroller {
  overflow-x: auto;
  overflow-y: visible;               /* allow hover raise to escape without clipping */
  padding-block: 3px;                /* tiny slack for translateY(-2px) on hover */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;

  /* Dynamic fade edges; JS toggles classes to remove left/right fade at bounds */
  --fade-l: 12px;                    /* left fade width */
  --fade-r: 24px;                    /* right fade width */

  -webkit-mask-image: linear-gradient(to right,
    transparent 0,
    black var(--fade-l),
    black calc(100% - var(--fade-r)),
    transparent 100%);
          mask-image: linear-gradient(to right,
    transparent 0,
    black var(--fade-l),
    black calc(100% - var(--fade-r)),
    transparent 100%);
}

/* Remove left or right fade when at edges so first/last chip is fully readable */
.chip-scroller.is-at-start { --fade-l: 0px; }
.chip-scroller.is-at-end   { --fade-r: 0px; }
.chip-scroller.is-at-start.is-at-end { --fade-l: 0px; --fade-r: 0px; } /* no overflow => no fades */

/* When scrolled, keep a single row */
.chip-scroller .chip-list {
  flex-wrap: nowrap;
}

/* Snap & invis scrollbar (as set previously) */
.chip-scroller .chip-list { scroll-snap-type: x proximity; }
.chip-scroller .chip-list > .food-chip { scroll-snap-align: start; flex: 0 0 auto; }


/* Hide horizontal scrollbar but keep scrolling */
.chip-scroller { scrollbar-width: none; -ms-overflow-style: none; }
.chip-scroller::-webkit-scrollbar { width: 0; height: 0; }
.chip-scroller::-webkit-scrollbar-thumb { background: transparent; }


/* When scrolled, we keep one row and prevent wrapping */
.chip-scroller .chip-list {
  flex-wrap: nowrap;
}

/* Smooth snap between chips while swiping/scrolling */
.chip-scroller .chip-list { scroll-snap-type: x proximity; }
.chip-scroller .chip-list > .food-chip { scroll-snap-align: start; flex: 0 0 auto; }

/* Hide horizontal scrollbar but keep scrolling (cross-browser) */
.chip-scroller {
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE/old Edge */
}
.chip-scroller::-webkit-scrollbar {
  width: 0;                     /* Chrome/Safari/Edge */
  height: 0;                    /* horizontal track height */
}
.chip-scroller::-webkit-scrollbar-thumb {
  background: transparent;      /* extra safety */
}


.food-chip {
  appearance: none;
  border: 1px solid var(--color-primary);
  background: transparent;
  color: var(--color-primary);
  padding: var(--chip-pad-y) var(--chip-pad-x);
  border-radius: var(--radius-pill);
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease, background-color .08s ease, border-color .08s ease;
}
.food-chip:hover { transform: translateY(-0.7px); box-shadow: var(--elev-2); }
.food-chip.chip-swapped { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.food-chip.chip-conflict {
  border-color: var(--color-error);
  color: var(--color-error);
  position: relative;
  cursor: not-allowed;
}
.food-chip.chip-conflict::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: repeating-linear-gradient(135deg, rgba(214,69,69,.10) 0 6px, transparent 6px 12px);
}
.food-chip:focus-visible {
  outline: var(--outline-width) solid var(--color-outline);
  outline-offset: 2px;
}

/* Chip popover */
.chip-popover {
  position: absolute;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-2);
  padding: calc(var(--space-4) + 16px) var(--space-4) var(--space-4);
  min-width: 220px; max-width: 360px; max-height: 70vh; overflow: auto;
  z-index: 12010;
  font-size: .95rem;
  animation: pop-in .14s ease-out both;
}
.chip-popover::before {
  content: ""; position: absolute; top: -8px; left: 18px; width: 0; height: 0;
  border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid var(--color-bg);
  pointer-events: none;
}
.popover-title {
  font-weight: 800;
  margin-bottom: var(--space-2);
  padding-right: 36px;
}
.popover-info  { color: var(--color-muted); margin-bottom: var(--space-3); }
.popover-swaps { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip-swap-btn {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  cursor: pointer;
}
.chip-swap-btn:hover, .chip-swap-btn:focus-visible {
  background: var(--color-primary-weak);
  color: #0A1A0B;
  outline: none;
}

.np-swap-snackbar__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.np-swap-snackbar__status {
  font-weight: 700;
}

.np-swap-snackbar__swap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.np-swap-snackbar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.np-swap-snackbar__icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

.popover-ai {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.popover-ai-header {
  font-weight: 600;
}
.popover-ai-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.popover-ai-intent {
  width: min(100%, clamp(8rem, 30vw, 11rem));
}
.popover-ai-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.popover-ai-row {
  display: grid;
  gap: var(--space-2);
  align-items: start;
}
.ai-swap-btn {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.ai-feedback-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.ai-dislike-btn,
.ai-like-btn {
  border: 0;
  background: transparent;
  color: var(--color-muted);
  border-radius: 0;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
  box-sizing: border-box;
}
.ai-dislike-btn:hover,
.ai-dislike-btn:focus-visible,
.ai-like-btn:hover,
.ai-like-btn:focus-visible {
  color: var(--color-text);
  border-color: transparent;
  background: transparent;
  outline: none;
}
.ai-like-btn.is-active {
  color: var(--color-primary);
  border-color: transparent;
}
.ai-dislike-btn svg,
.ai-like-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Mobile: keep the tap target generous without reintroducing circular chrome. */
@media (max-width: 768px) {
  .ai-dislike-btn,
  .ai-like-btn {
    padding: 6px;
  }

  .ai-dislike-btn svg,
  .ai-like-btn svg {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 480px) {
  .ai-dislike-btn,
  .ai-like-btn {
    padding: 8px;
  }
}
.ai-like-badge {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  background: var(--color-surface);
}
.popover-ai-more {
  align-self: flex-start;
}

/* Help icon & tooltip */
.popover-swaps-header { display: flex; align-items: center; gap: 6px; position: relative; }
.chip-help-btn {
  width: 22px; height: 22px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-border); background: var(--color-surface);
  font-size: 12px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.chip-help-tooltip {
  position: absolute; top: 24px; left: 0; z-index: 12011;
  background: rgba(43,89,195,.08);
  color: var(--color-info);
  border: 1px solid var(--color-info);
  border-radius: var(--radius-sm);
  padding: 6px 8px; font-size: 12px; line-height: 1.3; max-width: 240px;
}


/* FIX — paste this after the existing .chip-help-tooltip block */
.chip-help-tooltip {
  background: var(--color-bg);   /* solid background so text behind doesn't show through */
  box-shadow: var(--elev-2);     /* slight lift */
  z-index: 12020;                /* optional: keep clearly above siblings */
}



/* Mobile popover safety */
@media (max-width: 600px) {
  .chip-popover {
    position: fixed !important; left: 6px !important; right: 6px !important;
    bottom: 8px !important; top: auto !important; transform: none !important;
    max-width: none; max-height: 60vh; border-radius: var(--radius-lg);
  }
  .chip-popover::before { display: none; }
}
@media (max-width: 480px) {
  .chip-popover { left: 4px !important; right: 4px !important; bottom: 6px !important; max-height: 70vh; }
}



/* === Explain Popover (Why This Split) =================================== */
.np-explain-popover {
  position: absolute;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-2);
  padding: var(--space-4) var(--space-5) var(--space-4) var(--space-4); /* extra right pad for the ✕ */
  max-width: 360px;
  z-index: 10000;
}

.np-explain-popover .pop-title {
  font-weight: 800;
  margin-bottom: 6px;
}

.np-explain-popover .pop-detail {
  font-size: 0.95rem;
  line-height: 1.35;
}

.np-explain-popover .pop-evidence {
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--color-muted);
}

/* Close "✕" button (top-right) */
.np-explain-popover .pop-close {
  position: absolute;
  top: 6px;
  right: 6px;
  background: transparent;
  border: none;
  padding: 4px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: var(--color-muted);
}

.np-explain-popover .pop-close:hover {
  filter: brightness(0.9);
}

.np-explain-popover .pop-close:focus-visible {
  outline: var(--outline-width) solid var(--color-outline);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Dark mode: no special overrides needed; inherits tokens */
@media (prefers-color-scheme: dark) {
  .np-explain-popover .pop-close { color: var(--color-muted); }
}



/* ---------------- Explain block ---------------- */
.np-explain-header {
  font-weight: 800;
  margin-bottom: var(--space-2);
  text-align: center;        /* NEW: center the header only */
}

.np-explain-chip-list { display: flex; flex-wrap: wrap; gap: var(--chip-gap); }
.np-explain-chip {
  appearance: none;
  padding: var(--chip-pad-y) var(--chip-pad-x);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 700;
  cursor: pointer;
}
.np-explain-chip.np-important { background: rgba(255,183,3,.12); border-color: var(--color-warning); color: #7A5600; }
.np-explain-chip.np-action    { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

.np-explain-popover {
  position: absolute; z-index: 12012;
  min-width: 260px; max-width: 520px;
  background: var(--color-bg); color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-2);
  padding: var(--space-4);
  font-size: 14px;
  animation: pop-in .14s ease-out both;
}
.np-explain-popover .pop-title   { font-weight: 800; margin-bottom: var(--space-2); }
.np-explain-popover .pop-detail  { color: var(--color-text); margin-bottom: var(--space-2); }
.np-explain-popover .pop-evidence{ color: var(--color-muted); font-size: 12px; margin-top: var(--space-2); }
.pop-action {
  display: inline-block;
  margin-top: var(--space-2);
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}

/* ---------------- Hydration ---------------- */
#np-hydration { margin-top: var(--space-4); }
.np-hyd-top   { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-2); }

/* Center only the Hydration section header/title; keep body rows left/justified */
#np-hydration .np-mini-heading {
  text-align: center;
}

.np-hyd-value { font-weight: 800; font-size: 1rem; }
.np-hyd-meta  { font-size: .9rem; color: var(--color-muted); }

.np-hyd-bar-wrap {
  background: var(--color-border);
  border-radius: var(--radius-sm);
  height: var(--bar-height-sm);
  overflow: hidden;
  margin: var(--space-2) 0;
}
.np-hyd-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transition: width 300ms ease;
}
.np-hyd-breakdown { margin-bottom: var(--space-2); color: var(--color-muted); font-size: .85rem; }
.np-hyd-actions   { display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-2); }
.np-hyd-adjust    { cursor: pointer; background: none; border: 0; color: var(--color-info); padding: 4px; }
.np-hyd-save.btn  { padding: 6px 10px; font-size: .9rem; }

/* ---------------- Controls & Details ---------------- */
#np-more-details-toggle,
#np-add-weight,
#np-save-btn,
#np-export-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; font-size: .9rem; line-height: 1;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  box-shadow: var(--elev-1);
}
#np-save-btn {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
#np-more-details-toggle[disabled],
#np-add-weight[disabled],
#np-save-btn[disabled],
#np-export-btn[disabled] { opacity: .6; cursor: not-allowed; box-shadow: none; }

/* Disabled: add line-through for clearer “not selectable” affordance */
:where(
  button,
  .btn,
  .btn-ghost,
  .btn-sm,
  .link-btn,
  .food-chip,
  .np-mini-chip,
  .np-explain-chip,
  .chip-swap-btn
)[disabled],
:where(input, select, option, textarea)[disabled],
:where([aria-disabled="true"]),
/* Chips marked as conflict are effectively disabled choices */
.food-chip.chip-conflict {
  text-decoration-line: line-through;
  text-decoration-thickness: .08em;
  text-decoration-color: #fff;
  text-decoration-skip-ink: auto;
}

/* Right-rail host: render as a neutral container (no box) */
#np-details {
  margin-top: var(--space-3);
  padding: 0;                 /* no internal card padding */
  border: 0;                  /* remove the rectangle */
  border-radius: 0;           /* no rounded box corners */
  background: transparent;    /* no backdrop */
  color: var(--color-text);   /* keep ink consistent */
}

/* (Optional safety) If any downstream style reintroduces a border on the rail, kill it. */
aside.np-right#np-details {
  border: 0 !important;
  background: transparent !important;
}


#np-more-details-toggle[aria-expanded="false"]::after { content:" ▾"; opacity:.7; font-size:.85em; margin-left:6px; }
#np-more-details-toggle[aria-expanded="true"]::after  { content:" ▴"; opacity:.7; font-size:.85em; margin-left:6px; }

/* ---------------- Modal ---------------- */
.np-modal {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  z-index: 12000; max-width: none; max-height: none;
  pointer-events: none; /* container only */
}
.np-modal-backdrop {
  position: fixed; inset: 0; background: rgba(2,6,23,.35);
  z-index: 11990; animation: fade-in .12s ease-out both;
}
.np-modal > .np-modal-header,
.np-modal > .np-modal-body {
  pointer-events: auto; /* content clickable */
  background: var(--color-bg); color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-3);
  width: min(92vw, 720px);
}
.np-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-3); padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.np-modal-title { font-weight: 800; }
.np-modal-close { background: transparent; border: none; font-size: 18px; cursor: pointer; color: inherit; }
.np-modal-body  { padding: var(--space-4); }

/* ---------------- Snackbar ---------------- */
.np-snackbar-host {
  position: fixed; left: 12px; right: 12px; bottom: 12px;
  z-index: 16000;
  display: flex; flex-direction: column; gap: var(--space-2);
  pointer-events: none;
}
@media (min-width: 769px) {
  .np-snackbar-host { left: auto; right: 24px; width: 360px; }
}
.np-swap-snackbar {
  background: var(--color-surface);
  color: var(--color-text);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  box-shadow: var(--elev-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  pointer-events: auto;
  font-size: 13px;
  animation: snackbar-in .16s ease-out both;
}

.np-swap-snackbar__undo {
  flex: 0 0 auto;
}

/* ---------------- Pre/Post mini chips ---------------- */
.np-mini-heading { font-weight: 800; margin: 0 0 var(--space-2) 0; font-size: .95rem; }
.np-chip-list    { display: flex; flex-wrap: wrap; gap: 6px; }
.np-mini-chip {
  appearance: none;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: .9rem;
  cursor: pointer;
}
.np-mini-chip:focus-visible { outline: var(--outline-width) solid var(--color-outline); outline-offset: 2px; }
.np-mini-chip-wrap { display: flex; flex-direction: column; gap: 4px; }
.np-mini-chip-sub  { font-size: .85rem; color: var(--color-muted); }

/* Fine divider for right-column sections (reuses theme tokens).
   Apply to the element that should have a top border (the *following* section). */
.section-sep {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
  margin-top: var(--space-4);
}

/* Keep the same feel on very small screens (no extra selectors needed).
   Dark mode inherits --color-border, so contrast remains consistent. */


/* ---------------- Recipe Templates (rt-*) ---------------- */
.rt-wrap   { margin-top: var(--space-5); }
.rt-header {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2);
  margin-bottom: var(--space-3); flex-wrap: wrap;
}
.rt-grid  { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 481px) and (max-width: 600px) { .rt-grid { grid-template-columns: repeat(1, 1fr); } }
@media (min-width: 601px) and (max-width: 768px) { .rt-grid { grid-template-columns: repeat(1, 1fr); } }
@media (min-width: 769px)                          { .rt-grid { grid-template-columns: repeat(2, 1fr); } }

.rt-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-1);
  padding: var(--space-4);
  animation: fade-in .14s ease-out both;

  /* Per-template sizing (strict cap) ------------------------------------
     - width: 100% lets the card fill its grid/flex cell *but*
     - max-width prevents it from ever growing beyond the cap.
     - margin: 0 auto centers it in the grid column.
     - min-width: 0 avoids overflow issues inside flex/grid cells.
     - box-sizing: border-box ensures padding/border are included in totals.
     - Use --rt-card-max-width to change cap globally (see README below). 
     - MAX WIDTH UNDER ALL CIRCUMSTANCES ACROSS DEVICES
     --------------------------------------------------------------------- */
  box-sizing: border-box;
  width: 97%;
  max-width: var(--rt-card-max-width, 520px); /* default cap: 520px */
  min-width: 0;
  margin: 0 auto;
}


.rt-head  { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.rt-name  { font-weight: 800; letter-spacing: -0.01em; }
.rt-tags  { margin-top: 4px; color: var(--color-muted); }
.rt-macros{ display: flex; gap: var(--space-4); align-items: center; margin-top: var(--space-2); }
.rt-macro { display: flex; gap: 6px; align-items: baseline; }
.rt-steps   { margin-top: 6px; }

/* Templates controls */
#rt-controls { margin: 8px 0 var(--space-4); }
#rt-controls .rt-controls__row { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }

.rt-search {
  flex: 1 1 220px;
  min-width: 160px;

  /* sizing */
  padding: 8px 10px;
  min-height: 40px;              /* holds height steady when font-size changes */

  /* visual */
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: inherit;

  /* baseline text metrics (desktop/tablet) */
  font-size: 0.95rem;            /* ≈15.2px on a 16px root; overridden on mobile */
  line-height: 1.2;
}

/* iOS Safari prevents focus-zoom when inputs are >= 16px */
@media (max-width: 600px) {
  .rt-search {
    font-size: 16px;            /* key: stop iOS zoom */
    line-height: 1.25;          /* keeps text vertically centered */
    min-height: 42px;           /* ensure hit target remains ≥ 40px */
  }
}

/* Extra safety for iOS detection (does nothing on other engines) */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 600px) {
    .rt-search { font-size: 16px; }
  }
}

/* Replace default blue focus ring with premium animated gradient */
.rt-search:focus,
.rt-search:focus-visible {
  outline: none;                         /* kill native blue */
  border-color: transparent;             /* we’ll draw our own border */
  background:
    linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
    var(--focus-gradient) border-box;    /* animated gradient border */
  border: 2px solid transparent;         /* thickness of the ring */
  border-radius: var(--radius-sm);
  /* soft glow keyed to brand primary; never relies on unknown vars */
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-surface) 100%, transparent), /* crisp seam */
    0 6px 20px color-mix(in srgb, var(--color-primary, #2E7D32) 22%, transparent);
  background-size: 100% 100%, 200% 100%; /* enable motion on the gradient layer */
  background-position: 0 0, 0% 50%;
  transition: box-shadow .20s ease, background-position .20s linear, border-color .20s ease;
  animation: np-focus-sheen 2.2s linear infinite;
}

/* Hover should hint, but stay subtle */
.rt-search:hover {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-surface) 100%, transparent),
    0 3px 12px color-mix(in srgb, var(--color-primary, #2E7D32) 14%, transparent);
}

/* Reduced-motion users: keep the premium border, stop animation */
@media (prefers-reduced-motion: reduce) {
  .rt-search:focus,
  .rt-search:focus-visible {
    animation: none;
    background-position: 0 0, 0 50%;
  }
}

/* Dark mode: tighten glow for low-luma surfaces */
@media (prefers-color-scheme: dark) {
  .rt-search:focus,
  .rt-search:focus-visible {
    box-shadow:
      0 0 0 1px rgba(255,255,255,.10),
      0 10px 28px color-mix(in srgb, var(--color-primary, #7BD389) 24%, transparent);
  }
}

/* High-contrast / forced-colors: revert to a solid accessible outline */
@media (forced-colors: active) {
  .rt-search:focus,
  .rt-search:focus-visible {
    outline: 2px solid CanvasText !important;
    outline-offset: 2px;
    background: var(--color-surface) !important;
    border: 1px solid CanvasText !important;
    box-shadow: none !important;
  }
}

/* Gentle background motion for the gradient ring */
@keyframes np-focus-sheen {
  0%   { background-position: 0 0,   0% 50%; }
  100% { background-position: 0 0, 200% 50%; }
}



.rt-sort   { flex: 0 0 180px; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: inherit; }
.rt-adjust { flex: 0 0 auto; }

/* Load controls */
#rt-load-ctr { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: var(--space-4); flex-wrap: wrap; }
#rt-load-more.btn { padding: 10px 16px; }
#rt-load-less.btn {
  background: transparent; color: var(--color-text);
  border: 1px solid var(--color-border);
}
#rt-collapse.link-btn { font-weight: 700; }

/* Small contextual tag under H3 */
.rt-subtag { flex-basis: 100%; order: 1; margin-top: 2px; color: var(--color-muted); font-size: .85rem; }
#rt-sub    { order: 2; margin-left: auto; }



/* QUANTITY for RECIPES: just for nicer layout */
.rt-ings .rt-ing { display:flex; align-items:center; gap:8px; }
.rt-ings .ing-name { flex:1 1 auto; }
.rt-ings .ing-qty { flex:0 0 auto; font-weight:700; padding:2px 8px; border:1px solid var(--color-border); border-radius:999px; }
.rt-ings .ing-opt { margin-left:8px; }


/* NEW SECTION FOR NEWLY ADDED SERVING QUANTITY: Inline on larger widths: subtle, non-interfering with the quantity pill */
.rt-ings .ing-qty-label {
  flex: 0 1 auto;
  max-width: 46%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 4px;
  line-height: 1.1;
  color: var(--color-muted);
  font-size: .85rem; /* matches .muted-small scale */
}


/* ---------------------------------------------------------------------
   Force left-alignment for Ingredients block & rows (override inherited centering)
   - Very specific selectors so this doesn't affect unrelated components.
   - Keeps flex layout intact, only enforces left-justification.
   --------------------------------------------------------------------- */

.rt-card .rt-ings,
.rt-card .rt-ings .rt-ing,
.rt-card .rt-ings .ing-name,
.rt-card .rt-ings .ing-qty,
.rt-card .rt-ings .ing-opt,
.rt-details > .rt-details__content .rt-ings {
  /* layout */
  text-align: left;               /* prevent inherited centering for inline content */
  justify-content: flex-start;    /* ensure flex rows align left */
  align-items: flex-start;        /* align multi-line / multi-node rows on the left */
}

/* explicit per-row safety: rt-ing is flex already (keeps the pill right); force left-justification */
.rt-card .rt-ings .rt-ing {
  display: flex;                  /* defensive: preserve row flex layout */
  gap: 8px;
  justify-content: flex-start;
}

/* ensure lists or paragraph children inside rt-ings are left-aligned too */
.rt-card .rt-ings p,
.rt-card .rt-ings ul,
.rt-card .rt-ings ol,
.rt-card .rt-ings li,
.rt-card .rt-ings div {
  text-align: left;
}

/* Responsive check: nothing special needed, but keep specificity at all sizes */
@media (max-width: 480px) {
  .rt-card .rt-ings,
  .rt-card .rt-ings .rt-ing { text-align: left; justify-content: flex-start; }
}


/* ---------------- Dark-mode enhancements (prefers-color-scheme) ---------------- */
@media (prefers-color-scheme: dark) {
  .nutrition-card,
  .np-right { border-color: var(--color-border); }

  .food-chip:hover { box-shadow: var(--hover-shadow); }

  .rt-search, .rt-sort {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.18);
  }
}

/* ---------------- Utilities ---------------- */
.muted-small { color: var(--color-muted); font-size: .9rem; }



/* WAAPI Details, helper container (height is animated inline) */
.rt-details__content {
  overflow: hidden; /* guarded by JS, kept here as a safety net */
}

/* Optional: tighten summary hit area consistency across platforms */
.rt-details > summary {
  cursor: pointer;
}

/* Respect accessibility settings */
@media (prefers-reduced-motion: reduce) {
  .rt-details__content { transition: none !important; }
}


/* MY MEALS — premium + athletic */
.np-meals-inline {
  margin-top: 16px;
  padding-top: 8px;
  border-top: 1px solid var(--border, #e5e7eb);
  --border: var(--color-border);
  --card: var(--color-surface-2);
  color: var(--color-text);
  text-align: center;
}

.np-meals-inline .np-subheading {
  text-align: center;
}

.np-meals-inline .np-date-pill {
  margin: 6px auto 10px;
}

.np-meals-inline .meals-list {
  display: grid;
  gap: 10px;
  align-content: start;
  text-align: left;
}



.meal-title {
  margin-bottom: 2px;
}

.meal-macros {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.meal-guidance {
  margin-top: 0;
  display: grid;
  gap: 10px;
  text-align: left;
}

.meal-macro-section {
  padding-top: 8px;
  border-top: 1px dashed var(--border, #e5e7eb);
  display: grid;
  gap: 6px;
}

.meal-macro-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.meal-macro-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

.meal-macro-label .macro-dot {
  flex: 0 0 auto;
}

.meal-macro-label-text {
  line-height: 1.1;
}

.meal-macro-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.meal-macro-target {
  font-size: 0.85rem;
  color: var(--color-muted);
}

.meal-food-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.meal-food-item {
  padding: 8px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  background: var(--color-surface, #fff);
  display: grid;
  gap: 8px;
}

.meal-food-item-primary {
  box-shadow: var(--elev-1);
}

.meal-food-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.meal-primary-chip {
  font-weight: 700;
}

.meal-food-portion {
  font-size: 0.82rem;
  color: var(--color-muted);
}

.meal-swap-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.meal-swap-trigger {
  font-weight: 600;
}

.chip-swap-btn[data-role],
.meal-swap-chip[data-role],
.meal-ai-btn[data-role] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-color: color-mix(in srgb, var(--role-color) 45%, var(--border, #e5e7eb));
  background: color-mix(in srgb, var(--role-color), transparent 92%);
}

.chip-swap-btn[data-role]::before,
.meal-swap-chip[data-role]::before,
.meal-ai-btn[data-role]::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--role-color);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--role-color) 65%, #0000);
  flex: 0 0 auto;
}

.meal-alt-note {
  font-size: 0.8rem;
  color: var(--color-muted);
}

.meal-swaps-label {
  font-weight: 600;
  color: inherit;
}

.meal-swap-chip {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--color-surface-2, #f8fafc);
  color: inherit;
}

.meal-ai {
  display: grid;
  gap: 6px;
  margin-top: 2px;
  color: var(--color-muted);
}

.meal-ai-btn {
  width: 98%;
  max-width: 98%;
  min-width: 0;
  box-sizing: border-box;
}

.meal-ai-btn:disabled,
.meal-ai-btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
}

.meal-ai-results {
  display: grid;
  gap: 6px;
}

.meal-ai-row {
  display: grid;
  gap: 6px;
  align-items: start;
}

.meal-ai-cta {
  color: var(--color-muted);
}

.meal-swaps-empty,
.meal-empty {
  font-size: 0.85rem;
  color: var(--color-muted);
}

/* ≤480 */
@media (max-width: 480px) {
  .np-meals-inline {
    margin-top: 14px;
    padding-top: 8px;
    width: 98%;
    max-width: 98%;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
  }

  .np-meals-inline .meals-list,
  .meal-block,
  .meal-food-item,
  .meal-swap-trigger,
  .meal-ai-btn {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .meal-food-top {
    align-items: flex-start;
  }

  .meal-food-portion {
    width: 100%;
  }
}

/* ≤600 */
@media (max-width: 600px) {
  .np-meals-inline {
    width: 98%;
    max-width: 98%;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
  }

  .np-meals-inline .meals-list {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .meal-macro-meta {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ≤768 */
@media (max-width: 768px) {
  .meal-macro-meta {
    width: 100%;
    justify-content: flex-start;
  }

  .meal-swap-trigger,
  .meal-ai-btn {
    min-height: 44px;
  }
}

/* ≥769 */
@media (min-width: 769px) {
  .np-meals-inline .meals-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }




  .meal-macro-meta {
    justify-content: flex-end;
  }

  .meal-swap-trigger,
  .meal-ai-btn {
    width: auto;
    max-width: 100%;
    min-width: 0;
  }
}

@media (prefers-color-scheme: dark) {
  .meal-macro-section {
    border-top-color: color-mix(in srgb, var(--border) 75%, transparent);
  }

  .meal-block,
  .meal-food-item,
  .meal-swap-chip,
  .meal-swap-trigger {
    border-color: var(--border);
  }
}

/* Animated container for overflow chips */
.chip-overflow {
  overflow: hidden; /* defensive; JS toggles height */
}


/* ----- Replace chevron with square-plus icon (Ingredients & Instructions) ----- */
/* Hide the native disclosure marker */
.rt-details > summary {
  list-style: none;
  position: relative;
  padding-left: 28px; /* room for the icon on the left */
  color: var(--color-text); /* inherits light/dark tokens */
}
.rt-details > summary::-webkit-details-marker { display: none; }

/* Define icons (mask images) once, using your provided SVG */
:root {
  --rt-icon-plus: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" \
stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">\
<rect width="18" height="18" x="3" y="3" rx="2"/>\
<path d="M8 12h8"/>\
<path d="M12 8v8"/>\
</svg>');
  --rt-icon-minus: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" \
stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">\
<rect width="18" height="18" x="3" y="3" rx="2"/>\
<path d="M8 12h8"/>\
</svg>');
}

/* Icon before the summary label */
.rt-details > summary::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 20px; /* tweak as needed */
  background-color: currentColor;      /* picks up light/dark text color */
  -webkit-mask: var(--rt-icon-plus) no-repeat center / contain;
          mask: var(--rt-icon-plus) no-repeat center / contain;
  opacity: .95;
}

/* When expanded, switch to the minus version */
.rt-details[open] > summary::before {
  -webkit-mask: var(--rt-icon-minus) no-repeat center / contain;
          mask: var(--rt-icon-minus) no-repeat center / contain;
}



/* --- Micro-interactions for the square-plus expanders --- */
@keyframes rt-icon-pop {
  0%   { transform: translateY(-50%) scale(.85); }
  60%  { transform: translateY(-50%) scale(1.10); }
  100% { transform: translateY(-50%) scale(1); }
}
@keyframes rt-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Smooth ink + icon motion */
.rt-details > summary {
  transition: color .14s ease;
}
.rt-details > summary:hover {
  /* gentle color nudge that respects your tokens */
  color: color-mix(in srgb, var(--color-text), var(--color-primary) 18%);
}

/* Icon feedback on hover/press */
.rt-details > summary::before {
  transition: transform .14s ease, opacity .14s ease, filter .14s ease;
}
.rt-details > summary:hover::before {
  transform: translateY(-50%) scale(1.05);
  filter: drop-shadow(0 1px .5px rgba(0,0,0,.08));
}
.rt-details > summary:active::before {
  transform: translateY(-50%) scale(.96);
}

/* Pop the icon when opening */
.rt-details[open] > summary::before {
  animation: rt-icon-pop .16s ease-out;
}

/* Fade/slide the revealed body (works alongside your height anim) */
.rt-details[open] .rt-details__content {
  animation: rt-reveal .18s ease-out both;
}

/* Respect reduced-motion (your global guard already helps; this is extra-safe) */
@media (prefers-reduced-motion: reduce) {
  .rt-details > summary,
  .rt-details > summary::before,
  .rt-details[open] .rt-details__content {
    animation: none !important;
    transition: none !important;
  }
}


/* CALCULATION MODE SECTION */
/* Host button */
  .np-calc-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: 0;
    padding: 6px 0;
    cursor: pointer;
    font: inherit;
  }

.np-calc-visual {
  display: flex;
  align-items: center;
  gap: 10px;        /* NEW: small space between switch and the mode tag */
    border-radius: var(--h);
}

  /* iOS switch: track + thumb */
  .np-ios-switch {
    --w: 46px;          /* mobile-first */
    --h: 28px;
    --p: 2px;
    position: relative;
    width: var(--w);
    height: var(--h);
    border-radius: var(--h);
    background: #e9e9ea;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
    transition: background .2s ease, box-shadow .2s ease;
    flex: 0 0 auto;
  }
  .np-ios-switch__thumb {
    position: absolute;
    top: var(--p);
    left: var(--p);
    width: calc(var(--h) - var(--p)*2);
    height: calc(var(--h) - var(--p)*2);
    border-radius: 50%;
    background: #ffffff;
    
    transform: translateX(0);
    transition: transform .25s cubic-bezier(.22,.61,.36,1), width .18s ease;
  }


/* ON (Dynamic): aria-checked="true" OR fallback when NOT .is-static */
.np-calc-toggle[aria-checked="true"] .np-ios-switch,
.np-calc-toggle:not(.is-static) .np-ios-switch {
  background: #34c759;                 /* iOS green */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
.np-calc-toggle[aria-checked="true"] .np-ios-switch__thumb,
.np-calc-toggle:not(.is-static) .np-ios-switch__thumb {
  transform: translateX(calc(var(--w) - var(--h)));
}


  /* Press “squish” effect */
  .np-calc-toggle:active .np-ios-switch__thumb {
    width: calc(var(--h) - var(--p)*2 + 4px);
  }

.np-calc-toggle[aria-checked="true"]:active .np-ios-switch__thumb,
.np-calc-toggle:not(.is-static):active .np-ios-switch__thumb {
  transform: translateX(calc(var(--w) - var(--h) - 4px));
}

  }

  /* Focus-visible ring on track */
  .np-calc-toggle:focus-visible .np-ios-switch {
    outline: 2px solid rgba(0,122,255,.65);
    outline-offset: 2px;
  }

  /* Label next to switch (you already update its text in JS) */
  .np-calc-toggle-label {
    font-size: 0.9rem;
    display: inline-block;              /* so width can be reserved */
    min-width: var(--label-min-w, 72px);/* fallback so the tag won't jump */
    white-space: nowrap;                /* avoid wrap jitter */
  }

  /* Allow setting a precise width via JS */
  .np-calc-toggle { --label-min-w: 72px; }


  /* Small "mode" tag placed to the right of the switch */
  /* Dynamic (ON) = greenish; Static (OFF) = gray */
.np-calc-mode-tag {
  background: #eaf9ee;        /* ON (dynamic) */
  color: #222;
  border: 2px solid rgba(0,0,0,.06);

  /* NEW — pill treatment */
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 9999px;
  font: inherit;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;               /* prevent wrap */
}

.np-calc-mode-tag.is-static {
  background: #f1f1f3;        /* OFF (static) */
  border-color: rgba(0,0,0,.06);
}

@media (prefers-color-scheme: dark) {
  .np-calc-mode-tag {
    background: #1f3a26;      /* ON (dynamic) tint */
    color: #e8e8ea;
    border-color: rgba(255,255,255,.08);
  }
  .np-calc-mode-tag.is-static {
    background: #2a2a2b;      /* OFF (static) gray */
    border-color: rgba(255,255,255,.08);
  }
}


  /* Breakpoints (mobile-first) — no changes needed, pill is small */
  @media (max-width: 480px) { /* ≤480 */ }
  @media (max-width: 600px) { /* ≤600 */ }
  @media (max-width: 768px) { /* ≤768 */ }
  @media (min-width: 769px)  { /* ≥769 */ }


  /* Dark mode */
  @media (prefers-color-scheme: dark) {
    .np-ios-switch { background: #3a3a3c; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }

.np-calc-toggle[aria-checked="true"] .np-ios-switch,
.np-calc-toggle:not(.is-static) .np-ios-switch { background: #30d158; }

    .np-ios-switch__thumb { background: #0b0b0b;  }
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .np-ios-switch,
    .np-ios-switch__thumb { transition: none !important; }
  }

  /* Breakpoints (mobile-first → desktop upsize only) */
  @media (min-width: 769px) {  /* ≥769 */
    .np-ios-switch { --w: 52px; --h: 32px; }
  }



/* ---------------- RT Sort control cosmetics + micro-animation ---------------- */
/* Keep native select, but make it visually cleaner and give a subtle change feedback. */

.rt-sort {
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(180deg, var(--color-surface) 0%, color-mix(in srgb, var(--color-surface), transparent 30%) 100%);
  border: 1px solid var(--color-border);
  padding: 8px 34px 8px 12px; /* room for caret on the right */
  border-radius: 10px;
  font-weight: 700;
  min-height: 40px;
  cursor: pointer;
  transition: box-shadow .18s cubic-bezier(.2,.9,.3,1), transform .12s cubic-bezier(.2,.9,.3,1);
  background-image: linear-gradient(45deg, transparent 50%, transparent 50%),
                    linear-gradient(135deg, transparent 50%, transparent 50%),
                    linear-gradient(to right, var(--color-border), var(--color-border));
  background-position: calc(100% - 18px) calc(50% - 6px), calc(100% - 12px) calc(50% - 6px), 100% 50%;
  background-size: 6px 6px, 6px 6px, 1px 24px;
  background-repeat: no-repeat;
}

/* Focus state - accessible */
.rt-sort:focus-visible {
  outline: none;
  
  transform: translateY(-1px);
}

/* Small temporary 'pulse' when a change occurs — toggled via [data-just-changed] */
.rt-sort[data-just-changed] {
  
  transform: translateY(-2px);
}

/* Make the select label bold and readable on small screens */
@media (max-width: 600px) {
  .rt-controls__row { gap: 8px; }
  .rt-sort { padding-left: 10px; padding-right: 36px; font-size: .95rem; min-height: 44px; }
}

/* Subtle hover affordance */
.rt-sort:hover { box-shadow: var(--hover-shadow); }

/* Ensure the meal option check mark (text-based) reads well on dark/light backgrounds */
#rt-controls option[value^="meal:"] {
  font-weight: 800;
}


/* kitchen.css */
/* Meal pills */
.rt-meal-pills { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.rt-pill.is-active { outline: 2px solid currentColor; }
@media (prefers-color-scheme: dark) {
  .rt-pill.is-active { outline-color:#fff; }
}
/* Mobile stacks nicely already due to flex-wrap */