/* X Protocol W2 — nutrition summaries, feedback and responsive craft. */
/* Summary and shopping */
#screen-nutrition .pn3-summary,
#screen-nutrition .pn3-shop-card {
  margin-top: var(--w2-s4);
}

#screen-nutrition .pn3-summary {
  border-color: rgba(200, 241, 53, .2);
  background: linear-gradient(135deg, rgba(200, 241, 53, .035), transparent), var(--w2-surface);
}

#screen-nutrition .pn3-summary-head {
  margin-bottom: var(--w2-s3);
  padding-bottom: var(--w2-s3);
  border-bottom: 1px solid rgba(200, 241, 53, .16);
  color: var(--w2-lime);
}

#screen-nutrition .pn3-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--w2-s4);
  min-height: var(--w2-s8);
  padding: var(--w2-s2) 0;
}

#screen-nutrition .pn3-summary-row + .pn3-summary-row {
  border-top: 1px solid var(--w2-line);
}

#screen-nutrition :is(.pn3-summary-lbl, .pn3-summary-val) {
  color: var(--w2-text-muted);
  font: 500 12px/1.4 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
}

#screen-nutrition .pn3-summary-lbl {
  letter-spacing: .08em;
  text-transform: uppercase;
}

#screen-nutrition .pn3-summary-val b {
  margin-right: var(--w2-s1);
  color: var(--w2-text);
  font-weight: 800;
}

#screen-nutrition .pn3-shop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--w2-s4);
  cursor: pointer;
  user-select: none;
}

#screen-nutrition .pn3-shop-card.open .pn3-shop-head {
  margin-bottom: var(--w2-s3);
  padding-bottom: var(--w2-s3);
  border-bottom: 1px solid var(--w2-line);
}

#screen-nutrition .pn3-shop-actions {
  display: flex;
  align-items: center;
  gap: var(--w2-s2);
}

#screen-nutrition .pn3-shop-copy {
  display: inline-flex;
  align-items: center;
  gap: var(--w2-s2);
  padding: var(--w2-s2) var(--w2-s3);
  border: 1px solid var(--w2-line);
  border-radius: var(--w2-s2);
  color: var(--w2-text-muted);
  background: var(--w2-surface-raised);
  font: 700 12px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#screen-nutrition .pn3-shop-copy svg {
  width: var(--w2-s4);
  height: var(--w2-s4);
}

#screen-nutrition .pn3-shop-copy:hover {
  border-color: rgba(200, 241, 53, .28);
  color: var(--w2-lime);
  background: rgba(200, 241, 53, .05);
}

#screen-nutrition .pn3-shop-chev {
  width: var(--w2-s4);
  height: var(--w2-s4);
  flex: 0 0 var(--w2-s4);
  color: var(--w2-text-muted);
  transition-property: color, transform;
  transition-duration: 160ms;
}

#screen-nutrition .pn3-shop-card.open .pn3-shop-chev {
  color: var(--w2-lime);
  transform: rotate(180deg);
}

#screen-nutrition .pn3-shop-list {
  display: none;
}

#screen-nutrition .pn3-shop-card.open .pn3-shop-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--w2-s5);
}

#screen-nutrition .pn3-shop-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--w2-s3);
  min-height: var(--w2-s8);
  padding: var(--w2-s2) 0;
  border-bottom: 1px solid var(--w2-line);
  color: var(--w2-text-muted);
  font-size: 15px;
  line-height: 1.35;
}

#screen-nutrition .pn3-shop-cnt {
  color: var(--w2-lime);
  font: 700 12px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
}

/* Nutrition feedback modal */
#screen-nutrition .pn3-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--w2-s5);
  background: rgba(10, 11, 12, .74);
  backdrop-filter: blur(6px);
}

#screen-nutrition .pn3-modal-overlay.active {
  display: flex;
}

#screen-nutrition .pn3-modal {
  position: relative;
  width: min(100%, 480px);
  padding: var(--w2-s7) var(--w2-s6) var(--w2-s6);
  border: 1px solid var(--w2-line);
  border-radius: var(--w2-s5);
  background: var(--w2-surface);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .04);
  text-align: center;
}

#screen-nutrition .pn3-modal-close {
  position: absolute;
  top: var(--w2-s3);
  right: var(--w2-s3);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--w2-s8);
  height: var(--w2-s8);
  padding: 0;
  border: 1px solid var(--w2-line);
  border-radius: 50%;
  color: var(--w2-text-muted);
  background: var(--w2-surface-raised);
  cursor: pointer;
  transition-property: color, background-color, border-color, transform;
  transition-duration: 150ms;
}

#screen-nutrition .pn3-modal-close:hover {
  border-color: rgba(255, 255, 255, .16);
  color: var(--w2-text);
}

#screen-nutrition .pn3-modal-close:active {
  transform: scale(.96);
}

#screen-nutrition .pn3-modal-close svg {
  width: var(--w2-s4);
  height: var(--w2-s4);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

#screen-nutrition .pn3-modal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--w2-s9);
  height: var(--w2-s9);
  margin-bottom: var(--w2-s4);
  border: 1px solid rgba(200, 241, 53, .3);
  border-radius: 50%;
  color: var(--w2-lime);
  background: rgba(200, 241, 53, .06);
  box-shadow: 0 0 20px rgba(200, 241, 53, .14);
}

#screen-nutrition .pn3-modal-icon.warn {
  border-color: rgba(241, 70, 44, .34);
  color: var(--w2-fire);
  background: rgba(241, 70, 44, .06);
  box-shadow: 0 0 20px rgba(241, 70, 44, .14);
}

#screen-nutrition .pn3-modal-icon svg {
  width: var(--w2-s6);
  height: var(--w2-s6);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#screen-nutrition .pn3-modal-title {
  margin-bottom: var(--w2-s2);
  color: var(--w2-text);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}

#screen-nutrition .pn3-modal-body {
  margin-bottom: var(--w2-s5);
  color: var(--w2-text-muted);
  font-size: 15px;
  line-height: 1.45;
}

#screen-nutrition .pn3-modal-body strong {
  color: var(--w2-text);
  font-weight: 700;
}

#screen-nutrition :is(.pn3-modal-ok, .pn3-modal-revert) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--w2-s3) var(--w2-s5);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
}

#screen-nutrition .pn3-modal-ok {
  border: 0;
  color: #101204;
  background: var(--w2-lime);
}

#screen-nutrition .pn3-modal-ok:hover {
  box-shadow: 0 0 16px rgba(200, 241, 53, .24);
}

#screen-nutrition .pn3-modal-revert {
  margin-right: var(--w2-s2);
  border: 1px solid var(--w2-line);
  color: var(--w2-text-muted);
  background: var(--w2-surface-raised);
}

#screen-nutrition .pn3-modal-revert:hover {
  border-color: rgba(241, 70, 44, .3);
  color: var(--w2-fire);
  background: rgba(241, 70, 44, .05);
}

#screen-nutrition .pn3-modal-trans {
  margin-top: var(--w2-s3);
}

#screen-nutrition .pn3-modal-trans-row {
  display: inline-flex;
  align-items: center;
  gap: var(--w2-s2);
}

#screen-nutrition .pn3-modal-trans-arrow {
  width: var(--w2-s5);
  height: var(--w2-s5);
  fill: none;
  stroke: var(--w2-text-muted);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Toasts */
#screen-nutrition .pn3-toast {
  position: fixed;
  bottom: var(--w2-s5);
  left: 50%;
  z-index: 1210;
  padding: var(--w2-s3) var(--w2-s5);
  border: 1px solid rgba(200, 241, 53, .26);
  border-radius: 999px;
  color: var(--w2-text);
  background: rgba(30, 32, 35, .96);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35), 0 0 14px rgba(200, 241, 53, .1);
  font: 700 12px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, var(--w2-s2));
  transition-property: opacity, transform;
  transition-duration: 200ms;
}

#screen-nutrition .pn3-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

#screen-nutrition .pn3-toast.err {
  top: var(--w2-s5);
  bottom: auto;
  border-color: rgba(241, 70, 44, .36);
  color: var(--w2-fire);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35), 0 0 14px rgba(241, 70, 44, .12);
  transform: translate(-50%, calc(var(--w2-s2) * -1));
}

/* One-shot entrance. The screen controller adds w2-no-enter after first visit. */
@keyframes w2NutritionEnter {
  0% {
    opacity: 0;
    transform: translateY(var(--w2-s3)) scale(.98);
  }
  72% {
    opacity: 1;
    transform: translateY(-1px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes w2NutritionActionIn {
  0% {
    transform: scale(.98);
    box-shadow: 0 0 0 rgba(200, 241, 53, 0);
  }
  72% {
    transform: scale(1.02);
    box-shadow: 0 0 22px rgba(200, 241, 53, .24);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 18px rgba(200, 241, 53, .16);
  }
}

@keyframes w2NutritionHeroFlash {
  50% {
    filter: brightness(1.25);
    text-shadow: 0 0 24px rgba(200, 241, 53, .36);
  }
}

@keyframes w2NutritionSpin {
  to {
    transform: rotate(360deg);
  }
}

#screen-nutrition.active:not(.w2-no-enter) .pn3-card:nth-child(1) {
  animation: w2NutritionEnter 300ms cubic-bezier(.2, .9, .2, 1) backwards;
}

#screen-nutrition.active:not(.w2-no-enter) .pn3-card:nth-child(2) {
  animation: w2NutritionEnter 300ms cubic-bezier(.2, .9, .2, 1) 80ms backwards;
}

#screen-nutrition.active:not(.w2-no-enter) .pn3-card:nth-child(3) {
  animation: w2NutritionEnter 300ms cubic-bezier(.2, .9, .2, 1) 160ms backwards;
}

#screen-nutrition.active:not(.w2-no-enter) #pn3-meals {
  animation: w2NutritionEnter 300ms cubic-bezier(.2, .9, .2, 1) 240ms backwards;
}

@media (hover: none) {
  #screen-nutrition .pn3-dish-swap {
    opacity: .65;
  }
}

@media (max-width: 900px) {
  #screen-nutrition {
    padding: var(--w2-s6) var(--w2-s5) var(--w2-s8);
  }

  #screen-nutrition .pn3-day-head-row {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--w2-s2);
  }

  #screen-nutrition .pn3-day-head-right {
    width: 100%;
    text-align: left;
  }

  #screen-nutrition .pn3-dish {
    grid-template-columns: var(--w2-s8) minmax(0, 1fr) var(--w2-s8);
  }

  #screen-nutrition .pn3-dish-macros {
    grid-column: 2 / 3;
    flex-wrap: wrap;
  }

  #screen-nutrition .pn3-dish-swap {
    grid-column: 3;
    grid-row: 1 / 3;
  }
}

@media (max-width: 500px) {
  #screen-nutrition {
    padding: var(--w2-s4);
  }

  #screen-nutrition .pn3-col {
    gap: var(--w2-s3);
  }

  #screen-nutrition :is(.pn3-card, .pn3-day, .pn3-summary, .pn3-shop-card) {
    padding: var(--w2-s4);
    border-radius: var(--w2-s4);
  }

  #screen-nutrition .pn3-form-grid {
    grid-template-columns: 1fr;
    gap: var(--w2-s3);
  }

  #screen-nutrition .pn3-hero-val {
    font-size: 40px;
  }

  #screen-nutrition .pn3-target-summary .pn3-target-main .pn3-hero-val-wrap {
    padding-inline: var(--w2-s1);
  }

  #screen-nutrition .pn3-macro-grid {
    gap: var(--w2-s2);
  }

  #screen-nutrition .pn3-macro {
    padding: var(--w2-s3) var(--w2-s2);
  }

  #screen-nutrition .pn3-macro-v {
    font-size: 20px;
  }

  #screen-nutrition .pn3-gen-row {
    gap: var(--w2-s1);
  }

  #screen-nutrition .pn3-btn-gen {
    padding-inline: var(--w2-s2);
  }

  #screen-nutrition .pn3-day-actions {
    margin-left: 0;
  }

  #screen-nutrition .pn3-dish {
    gap: var(--w2-s2);
    padding-left: 0;
  }

  #screen-nutrition .pn3-dish-macros {
    font-size: 11px;
  }

  #screen-nutrition .pn3-shop-head {
    align-items: flex-start;
    flex-direction: column;
  }

  #screen-nutrition .pn3-shop-actions {
    width: 100%;
    justify-content: space-between;
  }

  #screen-nutrition .pn3-shop-card.open .pn3-shop-list {
    grid-template-columns: 1fr;
  }

  #screen-nutrition .pn3-summary-row {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--w2-s1);
  }

  #screen-nutrition .pn3-modal {
    padding: var(--w2-s7) var(--w2-s4) var(--w2-s4);
    border-radius: var(--w2-s4);
  }

  #screen-nutrition .pn3-toast {
    right: var(--w2-s4);
    left: var(--w2-s4);
    width: auto;
    text-align: center;
    transform: translateY(var(--w2-s2));
  }

  #screen-nutrition .pn3-toast.show {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #screen-nutrition.active:not(.w2-no-enter) :is(.pn3-card, #pn3-meals),
  #screen-nutrition :is(.pn3-btn-save.dirty, .pn3-hero-val.pn3-flash, .pn3-spinner, .pn3-meal-regen.loading svg) {
    animation: none;
  }

  #screen-nutrition :is(.pn3-input, .pn3-btn-save, .pn3-btn-gen, .pn3-hero-pill, .pn3-modal-ok, .pn3-modal-revert, .pn3-shop-copy, .pn3-day-act, .pn3-meal-regen, .pn3-dish-swap, .pn3-dish, .pn3-dish-name, .pn3-shop-chev, .pn3-toast, .pn3-modal-close) {
    transition-duration: .01ms;
  }
}