/* Nutrition: one headline, then a tinted stage with the owner's bag-drop scene and one live card.
   The example weight is the only control; four icon tiles show the targets it sets. */
.s-nutrition {
  --nu-step-size: 44px;
  --nu-thumb-size: 32px;
  --nu-track-height: 8px;
  --nu-bar-height: 6px;
  --nu-icon-size: 32px;
  --nu-card-pad: var(--space-xl);
  --nu-panel-pad: 14px;
  --nu-gap: var(--space-lg);
  --nu-stage-pad: var(--space-xxl);
  --nu-scene-size: 168px;
  --nu-track-tint: rgba(11, 27, 58, 0.12);
  --nu-step-rest: rgba(255, 255, 255, 0.55);
  --nu-thumb-shadow: 0 2px 6px rgba(31, 77, 255, 0.35);
  padding-block: calc(var(--section-gap) / 2);
  scroll-margin-top: calc(var(--space-xxxl) * -1);
}

/* Heading */
.s-nutrition .nu-head {
  display: grid;
  gap: var(--space-md);
}

.s-nutrition .nu-head .label {
  color: var(--jet);
  font-weight: 700;
}

.s-nutrition .nu-head .title {
  font-size: clamp(32px, 4.6vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--jet-ink);
  text-wrap: balance;
}

/* Stage: the tinted panel every feature section stands on. */
.s-nutrition .nu-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: var(--space-md);
  margin-top: var(--space-xxxl);
  margin-inline: calc(var(--space-sm) - var(--gutter));
  padding: var(--space-lg) calc(var(--gutter) - var(--space-sm)) var(--nu-stage-pad);
  border-radius: 32px;
  background: var(--jet-tint);
}

/* The owner's scene, shown as drawn, on the tint. */
.s-nutrition .nu-scene {
  display: block;
  width: var(--nu-scene-size);
  height: auto;
}

/* Controls that only work with scripting are removed, not shown dead, when it is off. */
html:not(.js) .s-nutrition .nu-needs-js {
  display: none;
}

/* Demo card */
.s-nutrition .nu-demo {
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--nu-gap);
  width: 100%;
  min-width: 0;
  padding: var(--nu-card-pad);
  border-radius: var(--radius-card-large);
  box-shadow: var(--shadow-sheet);
}

/* The one "Example" marker: a tag clipped to the card's top edge. */
.s-nutrition .nu-example {
  position: absolute;
  top: -11px;
  right: var(--nu-card-pad);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--jet-ink);
  color: var(--surface);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Icons: the shared set, drawn as decoration. */
.s-nutrition .nu-icon {
  display: block;
  flex: none;
  width: var(--nu-icon-size);
  height: var(--nu-icon-size);
  background: center / contain no-repeat;
}

.s-nutrition .nu-icon--energy {
  background-image: url("/assets/icons/icon-energy.svg");
}

.s-nutrition .nu-icon--protein {
  background-image: url("/assets/icons/icon-protein.svg");
}

.s-nutrition .nu-icon--carbs {
  background-image: url("/assets/icons/icon-carbs.svg");
}

.s-nutrition .nu-icon--fat {
  background-image: url("/assets/icons/icon-fat.svg");
}

/* Weigh in: the control the heading is about. Name and stepper on one row, the slider under them. */
.s-nutrition .nu-weight {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
}

.s-nutrition .nu-row-title {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--jet-ink);
  white-space: nowrap;
}

.s-nutrition .nu-weight-control {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs);
  border-radius: var(--radius-pill);
  background: var(--jet-tint);
}

html:not(.js) .s-nutrition .nu-weight-control {
  padding-inline: var(--space-lg);
}

.s-nutrition .nu-weight-readout {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  min-width: 84px;
  min-height: var(--nu-step-size);
  line-height: var(--nu-step-size);
  white-space: nowrap;
}

.s-nutrition .nu-weight-value {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--jet-ink);
}

.s-nutrition .nu-weight-unit {
  font-family: var(--font-rounded);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-secondary);
}

/* Round stepper button either side of the weight. */
.s-nutrition .nu-step {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--nu-step-size);
  height: var(--nu-step-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  color: var(--jet-ink);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform var(--duration-rest) var(--ease-snappy);
}

.s-nutrition .nu-step::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--jet);
  opacity: 0;
  transition: opacity var(--duration-rest) var(--ease-snappy);
}

.s-nutrition .nu-step svg {
  position: relative;
  transition: opacity var(--duration-rest) var(--ease-snappy);
}

.s-nutrition .nu-step:active {
  transform: scale(0.92);
}

.s-nutrition .nu-step:active::before {
  opacity: 0.16;
}

.s-nutrition .nu-step:focus-visible {
  border-radius: 50%;
}

/* At a limit the circle and its icon both step back; the focus ring keeps its full strength. */
.s-nutrition .nu-step[aria-disabled="true"] {
  background: var(--nu-step-rest);
  cursor: default;
}

.s-nutrition .nu-step[aria-disabled="true"] svg {
  opacity: 0.3;
}

.s-nutrition .nu-step[aria-disabled="true"]:active {
  transform: none;
}

.s-nutrition .nu-step[aria-disabled="true"]::before,
.s-nutrition .nu-step[aria-disabled="true"]:active::before {
  opacity: 0;
}

/* Slider: a native range input over a drawn track. */
.s-nutrition .nu-slider {
  position: relative;
  grid-column: 1 / -1;
  min-width: 0;
  height: var(--tap-min);
  /* 167 lb on the 120 to 220 lb scale, until the script takes over. */
  --p: 0.47;
}

.s-nutrition .nu-slider-track {
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: var(--nu-track-height);
  margin-top: calc(var(--nu-track-height) / -2);
  border-radius: var(--radius-pill);
  background: var(--nu-track-tint);
  overflow: hidden;
}

.s-nutrition .nu-slider-fill {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--jet);
  /* Right edge follows the centre of the thumb, which travels inset by half its size. */
  transform: translateX(calc((var(--p) - 1) * (100% - var(--nu-thumb-size)) - var(--nu-thumb-size) / 2));
}

/* A soft pulse under the thumb that says "drag me". It plays three times, then rests. */
.s-nutrition .nu-slider-ping {
  position: absolute;
  top: 50%;
  left: calc(var(--p) * (100% - var(--nu-thumb-size)));
  width: var(--nu-thumb-size);
  height: var(--nu-thumb-size);
  margin-top: calc(var(--nu-thumb-size) / -2);
  border-radius: 50%;
  background: var(--jet);
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .s-nutrition .nu-slider.is-hinting .nu-slider-ping {
    animation: nu-ping 1.4s var(--ease-standard) 0.5s 3;
  }
}

@keyframes nu-ping {
  from {
    opacity: 0.45;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(2.4);
  }
}

.s-nutrition .nu-slider-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
}

.s-nutrition .nu-slider-input:focus-visible {
  outline: none;
}

.s-nutrition .nu-slider-input::-webkit-slider-runnable-track {
  height: var(--tap-min);
  background: transparent;
}

.s-nutrition .nu-slider-input::-moz-range-track {
  height: var(--tap-min);
  background: transparent;
}

.s-nutrition .nu-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--nu-thumb-size);
  height: var(--nu-thumb-size);
  margin-top: calc((var(--tap-min) - var(--nu-thumb-size)) / 2);
  border: 4px solid var(--surface);
  border-radius: 50%;
  background: var(--jet);
  box-shadow: var(--nu-thumb-shadow);
  transition: transform var(--duration-rest) var(--ease-snappy);
}

.s-nutrition .nu-slider-input::-moz-range-thumb {
  width: var(--nu-thumb-size);
  height: var(--nu-thumb-size);
  border: 4px solid var(--surface);
  border-radius: 50%;
  background: var(--jet);
  box-shadow: var(--nu-thumb-shadow);
  transition: transform var(--duration-rest) var(--ease-snappy);
}

.s-nutrition .nu-slider-input:active::-webkit-slider-thumb {
  transform: scale(1.12);
}

.s-nutrition .nu-slider-input:active::-moz-range-thumb {
  transform: scale(1.12);
}

.s-nutrition .nu-slider-input:focus-visible::-webkit-slider-thumb {
  box-shadow: var(--nu-thumb-shadow), 0 0 0 3px var(--jet-ink);
}

.s-nutrition .nu-slider-input:focus-visible::-moz-range-thumb {
  box-shadow: var(--nu-thumb-shadow), 0 0 0 3px var(--jet-ink);
}

/* Target tiles: icon, name, the day's target, then a gauge that rises and falls with the weight. */
.s-nutrition .nu-macros {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}

.s-nutrition .nu-macro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  min-width: 0;
  padding: var(--space-md) var(--nu-panel-pad) var(--nu-panel-pad);
  border-radius: var(--radius-card);
  background: var(--jet-tint);
}

/* Starting gauges: the 167 lb targets against the largest the example reaches, until the script takes over. */
.s-nutrition .nu-macro--kcal {
  --share: 0.7504;
}

.s-nutrition .nu-macro--protein {
  --share: 0.759;
}

.s-nutrition .nu-macro--carbs {
  --share: 0.7292;
}

.s-nutrition .nu-macro--fat {
  --share: 0.7656;
}

.s-nutrition .nu-macro-name {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--jet-ink);
}

.s-nutrition .nu-macro-target {
  margin-top: var(--space-sm);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--jet-ink);
  white-space: nowrap;
}

.s-nutrition .nu-unit {
  font-family: var(--font-rounded);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-secondary);
}

.s-nutrition .nu-bar {
  height: var(--nu-bar-height);
  margin-top: var(--space-md);
  border-radius: var(--radius-pill);
  background: var(--nu-track-tint);
  overflow: hidden;
}

.s-nutrition .nu-bar-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--jet);
  transform: translateX(calc((var(--share) - 1) * 100%));
  transition: transform var(--duration-standard) var(--ease-standard);
}

/* Pointer devices: quiet hover feedback, transform and opacity only. */
@media (hover: hover) {
  .s-nutrition .nu-step:hover::before {
    opacity: 0.1;
  }

  .s-nutrition .nu-step[aria-disabled="true"]:hover::before {
    opacity: 0;
  }

  .s-nutrition .nu-slider-input:hover::-webkit-slider-thumb {
    transform: scale(1.06);
  }

  .s-nutrition .nu-slider-input:hover::-moz-range-thumb {
    transform: scale(1.06);
  }

  .s-nutrition .nu-slider-input:active::-webkit-slider-thumb {
    transform: scale(1.12);
  }

  .s-nutrition .nu-slider-input:active::-moz-range-thumb {
    transform: scale(1.12);
  }
}

/* Very narrow card: tighter tiles and a smaller readout so nothing touches. */
@container (max-width: 300px) {
  .s-nutrition .nu-macro {
    padding-inline: 10px;
  }

  .s-nutrition .nu-macro-target {
    font-size: 23px;
  }

  .s-nutrition .nu-macro-name .nu-icon {
    --nu-icon-size: 26px;
  }

  .s-nutrition .nu-weight {
    column-gap: var(--space-sm);
  }

  .s-nutrition .nu-row-title {
    font-size: 16px;
  }

  .s-nutrition .nu-weight-readout {
    min-width: 60px;
  }

  .s-nutrition .nu-weight-value {
    font-size: 24px;
  }

  .s-nutrition .nu-weight-unit {
    font-size: 15px;
  }
}

/* Wide card: the four targets in one row. */
@container (min-width: 500px) {
  .s-nutrition .nu-macros {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-md);
  }

  .s-nutrition .nu-macro {
    padding-inline: var(--space-md);
  }

  .s-nutrition .nu-macro-name {
    flex-direction: column;
    align-items: flex-start;
  }

  .s-nutrition .nu-macro-target {
    font-size: 25px;
  }

  .s-nutrition .nu-unit {
    font-size: 13px;
  }

  .s-nutrition .nu-macro-name .nu-icon {
    --nu-icon-size: 40px;
  }

  .s-nutrition .nu-row-title {
    font-size: 22px;
  }

  .s-nutrition .nu-weight-value {
    font-size: 36px;
  }
}

@media (min-width: 640px) {
  .s-nutrition {
    --nu-card-pad: var(--space-xxxl);
    --nu-panel-pad: var(--space-lg);
    --nu-gap: var(--space-xl);
    --nu-stage-pad: var(--space-section);
    --nu-scene-size: 208px;
  }

  .s-nutrition .nu-stage {
    margin-inline: 0;
    padding: var(--space-xxl) var(--gutter) var(--nu-stage-pad);
    border-radius: 40px;
  }

  .s-nutrition .nu-demo {
    max-width: 640px;
  }
}

/* Side by side: the scene stands beside the card. */
@media (min-width: 960px) {
  .s-nutrition {
    --nu-scene-size: 280px;
  }

  .s-nutrition .nu-stage {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-section);
    margin-top: var(--space-section);
    padding: var(--nu-stage-pad);
  }

  .s-nutrition .nu-demo {
    justify-self: stretch;
    max-width: none;
  }
}