/* Today: one tinted stage with the owner's gate mascot beside a small example board. Choosing a
   time of day moves the plane along its path, logs the session's sets and fills the fuel bars.
   Every state is written here against data-time on the stage, so the board is right with scripts off.
   Icons are decorative, in brand blue and light blue only; the words beside them carry the meaning. */
.s-today {
  --stage-pad: var(--space-md);
  --stage-gap: var(--space-md);
  --stage-radius: 32px;
  --scene-size: 136px;
  --score-size: 48px;
  --figure-size: 40px;
  --tile-pad: var(--space-lg);
  --bar-height: 8px;
  --seg-height: 44px;
  --seg-inset: 4px;
  --rise: 14px;
  --ico: 22px;
  --badge-size: 40px;
  --plane-size: 28px;
  --stop-size: 8px;
  --pip-size: 8px;
  --example-height: 28px;
  --seg-track: color-mix(in srgb, var(--jet-ink) 7%, transparent);
  --ico-soft: #8fb0ff;
  padding-block: calc(var(--section-gap) / 2);
  /* Anchor jumps land the label just below the sticky header, as in every section. */
  scroll-margin-top: calc(var(--space-xxxl) * -1);
}

.s-today .section-head {
  display: grid;
  gap: var(--space-md);
}

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

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

html:not(.js) .s-today .days {
  display: none;
}

/* Icons: one size rule, one palette (brand blue with a light-blue or white detail) */
.s-today .ico {
  flex: none;
  display: inline-block;
  width: var(--ico);
  height: var(--ico);
  background: center / contain no-repeat;
}

.s-today .ico-mug { background-image: url("/assets/icons/icon-mug.svg"); }
.s-today .ico-moon { background-image: url("/assets/icons/icon-moon.svg"); }
.s-today .ico-sleep { background-image: url("/assets/icons/icon-sleep.svg"); }
.s-today .ico-dumbbell { background-image: url("/assets/icons/icon-dumbbell.svg"); }
.s-today .ico-carbs { background-image: url("/assets/icons/icon-carbs.svg"); }
.s-today .ico-plane { background-image: url("/assets/icons/icon-takeoff.svg"); }

.s-today .card {
  border-radius: var(--radius-card-large);
}

/* Stage: the tinted panel the mascot and the board stand on */
.s-today .stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--stage-gap);
  margin-top: var(--space-xxxl);
  margin-inline: calc(var(--space-sm) - var(--gutter));
  padding: var(--stage-pad);
  background: var(--jet-tint);
  border-radius: var(--stage-radius);
}

/* Example marker: tucked into the stage corner at every width */
.s-today .example {
  position: absolute;
  top: var(--stage-pad);
  right: var(--stage-pad);
  display: grid;
  place-items: center;
  height: var(--example-height);
  padding-inline: var(--space-md);
  font-size: 14px;
  font-weight: 600;
  color: var(--jet);
  background: var(--surface);
  border-radius: var(--radius-pill);
}

/* The owner's mascot, untouched, on the tint */
.s-today .scene {
  display: grid;
  justify-items: center;
}

.s-today .scene-mood {
  width: var(--scene-size);
}

/* Example-day picker: native radios dressed as a segmented control */
.s-today .days {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.s-today .days-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: var(--seg-inset);
  background: var(--seg-track);
  border-radius: var(--radius-pill);
}

.s-today .days-thumb {
  position: absolute;
  top: var(--seg-inset);
  bottom: var(--seg-inset);
  left: var(--seg-inset);
  width: calc((100% - 2 * var(--seg-inset)) / 3);
  background: var(--surface);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
  transition: transform var(--duration-snappy) var(--ease-snappy);
}

.s-today .days-track[data-index="1"] .days-thumb {
  transform: translateX(100%);
}

.s-today .days-track[data-index="2"] .days-thumb {
  transform: translateX(200%);
}

.s-today .day {
  position: relative;
  display: grid;
  min-height: var(--seg-height);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.s-today .day input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.s-today .day-face {
  --ico: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-inline: var(--space-sm);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-secondary);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: opacity var(--duration-rest) var(--ease-standard);
}

.s-today .day input:checked + .day-face {
  color: var(--ink);
}

.s-today .day:hover input:not(:checked) + .day-face {
  opacity: 0.7;
}

.s-today .day input:focus-visible + .day-face {
  outline: 2px solid var(--jet);
  outline-offset: 2px;
}

/* Status: a dot and a sentence-case word */
.s-today .status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-secondary);
  white-space: nowrap;
}

.s-today .status-dot {
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--ink-quaternary);
  border-radius: 50%;
}

.s-today .stage[data-time="midday"] .status .status-dot {
  background: var(--jet);
}

.s-today .ready .status-dot,
.s-today .stage[data-time="evening"] .status .status-dot {
  background: var(--recovery);
}

/* Readiness strip: one compact card. The score is fixed; the plane shows where the day is. */
.s-today .strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "score ready"
    "answers answers"
    "flight flight";
  align-items: center;
  gap: var(--space-md) var(--space-md);
  min-width: 0;
  padding: var(--tile-pad);
}

.s-today .score {
  grid-area: score;
  display: grid;
  place-items: center;
  width: var(--score-size);
  height: var(--score-size);
  color: var(--surface);
  background: var(--jet);
  border-radius: 50%;
}

.s-today .score-number {
  font-size: calc(var(--score-size) * 0.44);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.s-today .ready {
  grid-area: ready;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--recovery-text);
}

/* Check-in answers: an icon, its name and a three-step level. Plain, so nothing looks tappable. */
.s-today .answers {
  grid-area: answers;
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: space-between;
  gap: var(--space-sm);
}

.s-today .answer {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    "ico name"
    "ico pips";
  align-items: center;
  justify-content: start;
  column-gap: 6px;
  row-gap: 3px;
  min-width: 0;
}

.s-today .answer .ico {
  grid-area: ico;
}

.s-today .answer-name {
  grid-area: name;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--jet-ink);
}

.s-today .pips {
  grid-area: pips;
  display: flex;
  gap: 3px;
}

.s-today .pip {
  width: var(--pip-size);
  height: var(--pip-size);
  background: var(--ink-quaternary);
  border-radius: 50%;
}

.s-today .pip.is-on {
  background: var(--jet);
}

/* Flight path: three stops for the three times of day, and a plane that taxis between them */
.s-today .flight {
  grid-area: flight;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-md);
}

.s-today .path {
  --go: 0.5;
  position: relative;
  height: var(--plane-size);
  /* The runner's box slides past the end of the path; only the plane inside it should show. */
  overflow: hidden;
}

.s-today .stage[data-time="morning"] .path {
  --go: 0;
}

.s-today .stage[data-time="evening"] .path {
  --go: 1;
}

.s-today .path-line {
  position: absolute;
  top: calc(50% - 2px);
  left: calc(var(--plane-size) / 2);
  right: calc(var(--plane-size) / 2);
  height: 4px;
  background: var(--surface-sunken);
  border-radius: var(--radius-pill);
}

.s-today .path-done {
  background: var(--ico-soft);
  transform: scaleX(var(--go));
  transform-origin: left center;
  transition: transform var(--duration-gentle) var(--ease-standard);
}

.s-today .stop {
  position: absolute;
  top: calc(50% - var(--stop-size) / 2);
  width: var(--stop-size);
  height: var(--stop-size);
  background: var(--ico-soft);
  border-radius: 50%;
}

.s-today .stop-1 {
  left: calc(var(--plane-size) / 2 - var(--stop-size) / 2);
}

.s-today .stop-2 {
  left: calc(50% - var(--stop-size) / 2);
}

.s-today .stop-3 {
  right: calc(var(--plane-size) / 2 - var(--stop-size) / 2);
}

/* The runner is the path minus one plane wide, so 100% of it is the whole trip. */
.s-today .path-run {
  position: absolute;
  top: 0;
  left: 0;
  right: var(--plane-size);
  height: var(--plane-size);
  transform: translateX(calc(var(--go) * 100%));
  transition: transform var(--duration-gentle) var(--ease-standard);
}

.s-today .ico-plane {
  --ico: var(--plane-size);
  display: block;
  background-color: var(--surface);
  border-radius: 50%;
}

.s-today .day-tag {
  min-width: 84px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  text-align: right;
  color: var(--jet);
  white-space: nowrap;
}

/* Session and fuel cards: the same internals at every width */
.s-today .tiles {
  display: grid;
  gap: var(--stage-gap);
  min-width: 0;
}

.s-today .tile {
  display: grid;
  align-content: space-between;
  gap: var(--space-lg);
  min-width: 0;
  padding: var(--tile-pad);
}

.s-today .tile-head {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-width: 0;
}

.s-today .badge {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--badge-size);
  height: var(--badge-size);
  background: var(--jet-tint);
  border-radius: var(--radius-control);
}

.s-today .tile-name {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--jet-ink);
}

.s-today .figure {
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

.s-today .figure-number {
  font-size: var(--figure-size);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.s-today .figure-unit {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-tertiary);
}

/* Sets: twenty dots, lit as the session is logged. Empty dots still read as a plan. */
.s-today .dots {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 6px;
  max-width: 300px;
}

.s-today .dot {
  position: relative;
  aspect-ratio: 1;
  background: var(--jet-tint);
  border-radius: 50%;
}

.s-today .dot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--jet);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.4);
}

.s-today .stage[data-time="midday"] .dot:nth-child(-n + 10)::after,
.s-today .stage[data-time="evening"] .dot::after {
  opacity: 1;
  transform: none;
}

.s-today .length {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-secondary);
}

.s-today .length-number {
  font-weight: 700;
  color: var(--ink);
}

/* Macros: one row each, so the icon, the name and the bar all have room */
.s-today .macros {
  display: grid;
  gap: var(--space-md);
}

.s-today .macro {
  display: grid;
  grid-template-columns: auto 56px minmax(0, 1fr) 46px;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}

.s-today .macro-name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--jet-ink);
}

.s-today .macro-amount {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  text-align: right;
  color: var(--ink-tertiary);
  white-space: nowrap;
}

.s-today .macro-logged {
  font-weight: 700;
  color: var(--macro-text);
}

/* How full each bar is at each time: logged grams over the day's target. */
.s-today .macro-protein {
  --macro: var(--protein);
  --macro-text: var(--protein-text);
  --fill: 0.392;
}

.s-today .macro-carbs {
  --macro: var(--carbs);
  --macro-text: var(--carbs-text);
  --fill: 0.371;
}

.s-today .macro-fat {
  --macro: var(--fat);
  --macro-text: var(--fat-text);
  --fill: 0.388;
}

.s-today .stage[data-time="morning"] .macro-protein { --fill: 0.23; }
.s-today .stage[data-time="morning"] .macro-carbs { --fill: 0.329; }
.s-today .stage[data-time="morning"] .macro-fat { --fill: 0.224; }
.s-today .stage[data-time="evening"] .macro-protein { --fill: 0.966; }
.s-today .stage[data-time="evening"] .macro-carbs { --fill: 0.95; }
.s-today .stage[data-time="evening"] .macro-fat { --fill: 0.98; }

.s-today .bar {
  display: block;
  height: var(--bar-height);
  overflow: hidden;
  background: var(--surface-sunken);
  border-radius: var(--radius-pill);
}

.s-today .bar-fill {
  display: block;
  height: 100%;
  background: var(--macro);
  border-radius: var(--radius-pill);
  transform: translateX(calc((var(--fill, 0) - 1) * 100%));
  transition: transform var(--duration-gentle) var(--ease-standard);
}

/* Empty state, before the stage is seen. */
.s-today .stage.is-waiting .bar-fill {
  transform: translateX(-100%);
  transition: none;
}

.s-today .stage.is-waiting .dots .dot:nth-child(n)::after {
  opacity: 0;
  transform: scale(0.4);
}

@keyframes s-today-swap {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .s-today .is-swapped {
    animation: s-today-swap var(--duration-standard) var(--ease-standard);
  }

  .s-today .strip,
  .s-today .tile {
    transition:
      opacity var(--duration-gentle) var(--ease-standard),
      transform var(--duration-gentle) var(--ease-standard);
  }

  .s-today .tile-session {
    transition-delay: 0.08s;
  }

  .s-today .tile-fuel {
    transition-delay: 0.16s;
  }

  .s-today .stage.is-waiting .strip,
  .s-today .stage.is-waiting .tile {
    opacity: 0;
    transform: translateY(var(--rise));
    transition: none;
  }

  /* The dots light in a sweep, column by column. */
  .s-today .dot::after {
    transition:
      opacity var(--duration-rest) var(--ease-standard),
      transform var(--duration-rest) var(--ease-standard);
  }

  .s-today .dot:nth-child(10n + 2)::after { transition-delay: 0.03s; }
  .s-today .dot:nth-child(10n + 3)::after { transition-delay: 0.06s; }
  .s-today .dot:nth-child(10n + 4)::after { transition-delay: 0.09s; }
  .s-today .dot:nth-child(10n + 5)::after { transition-delay: 0.12s; }
  .s-today .dot:nth-child(10n + 6)::after { transition-delay: 0.15s; }
  .s-today .dot:nth-child(10n + 7)::after { transition-delay: 0.18s; }
  .s-today .dot:nth-child(10n + 8)::after { transition-delay: 0.21s; }
  .s-today .dot:nth-child(10n + 9)::after { transition-delay: 0.24s; }
  .s-today .dot:nth-child(10n + 10)::after { transition-delay: 0.27s; }
}

@media (max-width: 359px) {
  .s-today {
    --figure-size: 34px;
    --tile-pad: var(--space-md);
    --scene-size: 124px;
    --ico: 20px;
  }

  .s-today .day-face {
    --ico: 16px;
    gap: var(--space-xs);
    padding-inline: var(--space-xs);
    font-size: 14px;
  }

  .s-today .answer {
    column-gap: var(--space-xs);
  }
}

@media (min-width: 640px) {
  .s-today {
    --stage-pad: var(--space-xxl);
    --stage-gap: var(--space-lg);
    --stage-radius: 40px;
    --scene-size: 176px;
    --score-size: 56px;
    --figure-size: 46px;
    --tile-pad: var(--space-xl);
    --ico: 24px;
  }

  .s-today .stage {
    margin-inline: 0;
    margin-top: var(--space-section);
  }

  .s-today .days {
    justify-self: center;
    width: min(100%, 372px);
  }

  .s-today .strip {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "score ready answers"
      "flight flight flight";
    row-gap: var(--space-lg);
  }

  .s-today .ready {
    font-size: 22px;
  }

  .s-today .answers {
    gap: var(--space-xl);
  }

  .s-today .answer-name {
    font-size: 15px;
  }

  .s-today .tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .s-today .macro {
    grid-template-columns: auto 60px minmax(0, 1fr) 50px;
  }
}

/* Wide: the board on the left, the mascot standing beside it on the right. */
@media (min-width: 1024px) {
  .s-today {
    --stage-pad: var(--space-section);
    --stage-gap: var(--space-xl);
    --scene-size: 280px;
  }

  .s-today .stage {
    grid-template-columns: minmax(0, 1fr) var(--scene-size);
    grid-template-areas:
      "days scene"
      "strip scene"
      "tiles scene";
    column-gap: var(--space-section);
  }

  .s-today .days {
    grid-area: days;
    justify-self: start;
  }

  .s-today .strip {
    grid-area: strip;
  }

  .s-today .tiles {
    grid-area: tiles;
  }

  .s-today .scene {
    grid-area: scene;
    align-self: center;
  }
}

/* The mascot is sleepy in the morning, focused at midday and happy in the evening. */
.s-today .stage[data-time="morning"] .mood-tired,
.s-today .stage[data-time="midday"] .mood-ok {
  opacity: 1;
}

.s-today .stage[data-time="morning"] .mood {
  transform: var(--mood-droop);
}