/* ── Main Workout (setup step 5, node 338:19922) ──────────────────────────────
   Total = Stretch(8) + Learn(10) + Run. Run isn't touched directly; it follows the
   Set-up value (Distance→time, or the Time wheel). The three bars are right-aligned
   and grow LEFTWARD on entry, their widths kept proportional to each other. */
.mw-body { padding: 0 12px; display: flex; flex-direction: column; gap: 32px; }
.mw-sec { display: flex; flex-direction: column; gap: 8px; }
.mw-label { margin: 0; padding: 0 12px; font-family: var(--font-supreme); font-size: 16px; line-height: 1.5; letter-spacing: -0.5px; color: var(--color-neutral-700); }

/* Total card ------------------------------------------------------------------ */
.mw-total { position: relative; height: 156px; box-sizing: border-box; background: #fff; border-radius: 20px; padding: 4px; }
.mw-graph { display: flex; flex-direction: column; gap: 2px; height: 100%; border-radius: 18px; }
.mw-row { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.mw-bar {
  min-height: 0; height: 100%; box-sizing: border-box; width: 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 14px; border-radius: 12px; color: #fff; white-space: nowrap; overflow: hidden;
  transition: width .6s cubic-bezier(.2,.8,.25,1);
}
.mw-bar .v { font-family: var(--font-supreme); font-size: 15px; letter-spacing: -0.5px; }
/* Each bar keeps only the time inside; its STRETCH/LEARN/RUN! label sits OUTSIDE to the
   left in Neutral/400 (node 338:20034/20038). */
.mw-out { flex: none; font-family: var(--font-supreme-bold); font-size: 13px; letter-spacing: -0.5px; color: #A3A3A3; opacity: 0; transition: opacity .3s ease; }
.mw-graph.run .mw-out { opacity: 1; }
/* Same gradient on every bar, anchored in px to the FAR (right) end so a short bar and a
   long bar read identically — red body with a fixed ~48px pastel fade at the tip. */
.mw-stretch, .mw-learn, .mw-run {
  background: linear-gradient(to right, #FA3030 0, #FA3030 calc(100% - 48px), #FE6E3C calc(100% - 24px), #FEC389 calc(100% - 6px), #D1FEFF 100%);
}
/* Default run: the gradient bar is sized to the 5km-suggested time and reads a white
   "You Can Choose" until the user adjusts distance/time (then it shows the minutes). */
.mw-graph.run .mw-row[data-k="run"].unset .mw-out { opacity: 0; }   /* no RUN! label until chosen */
/* Big OffBit total, overlaid on the left. */
.mw-num { position: absolute; left: 14px; top: 8px; z-index: 2; color: var(--color-black); display: flex; flex-direction: column; align-items: flex-start; }
.mw-num .n { font-family: var(--font-offbit); font-weight: 700; font-size: 60px; line-height: 0.95; }
.mw-num .u { font-family: var(--font-supreme-bold); font-size: 18px; opacity: .6; letter-spacing: -0.54px; }

/* Set up: Distance / Time tabs ------------------------------------------------ */
.mw-tabs { display: flex; gap: 4px; padding: 4px; background: #fff; border-radius: 20px; }
.mw-tab { flex: 1; border: none; cursor: pointer; background: transparent; border-radius: 16px; padding: 8px 16px; font-family: var(--font-supreme-medium); font-size: 14px; letter-spacing: -0.56px; color: var(--color-neutral-700); }
.mw-tab.sel { background: var(--color-neutral-100); }
.mw-panel { position: relative; background: #fff; border-radius: 20px; overflow: hidden; }
.mw-panel[hidden] { display: none; }

/* Distance ruler -------------------------------------------------------------- */
.mw-dist { padding: 12px 0 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mw-dist-val { display: flex; align-items: baseline; font-family: var(--font-supreme-bold); color: var(--color-black); }
.mw-dist-val .d { font-size: 40px; line-height: 1; letter-spacing: -1.6px; }
.mw-dist-val .k { font-size: 13px; letter-spacing: -0.5px; margin-left: 8px; }
/* 62, not 46: the recommended notch carries a "For you" line under its number, and a
   scroll container cannot let anything hang outside it — overflow-x: auto forces the other
   axis to clip too. The extra 16 is the label's room, kept whether or not it is showing so
   nothing reflows when it goes. */
.mw-ruler { position: relative; width: 100%; height: 62px; }
/* Fixed centre pointer the value is read against — swipe the ruler either side of it. */
.mw-ruler::after { content: ""; position: absolute; left: 50%; top: 0; width: 3px; height: 26px; margin-left: -1.5px; background: var(--color-red); border-radius: 99px; pointer-events: none; z-index: 2; }
/* Ticks fill the card width and fade toward both edges (node 338:19979). */
.mw-track { position: absolute; inset: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent); }
.mw-track::-webkit-scrollbar { display: none; }
.mw-ticks { display: flex; align-items: flex-start; width: max-content; }
.mw-ticks .sp { flex: none; }                         /* half-width spacers so ends can centre */
/* Each notch is a fixed cell holding its line and (for integers) a label below, so the
   number always stays directly under its line as the ruler scrolls. */
/* min-width: 0 is the whole point. A flex item's automatic minimum is its CONTENT, and an
   integer cell holds a label ("10.0") far wider than the 18px notch spacing — so those ten
   cells were quietly wider than the rest and the strip drifted, 36px of it by 4km. The
   label still overflows its cell, centred under its own line, which is what it is for. */
.mw-cell { flex: none; min-width: 0; display: flex; flex-direction: column; align-items: center; scroll-snap-align: center; }
/* 0.2km minor lines: short, Neutral/200. Integer lines: taller, Neutral/300.
   4.0 is the recommended distance, so its line + label are darker (Neutral/500). */
.mw-tick { width: 2px; height: 14px; border-radius: 99px; background: #E5E5E5; }
.mw-cell.maj .mw-tick { height: 24px; background: #C7C7C7; }
.mw-cell.rec .mw-tick { background: #757575; }
.mw-lbl { margin-top: 5px; font-family: var(--font-supreme-bold); font-size: 13px; letter-spacing: -0.5px; color: #C7C7C7; white-space: nowrap; }
.mw-cell.rec .mw-lbl { color: #757575; transition: color .5s ease; }
/* "For you", under 4.0 and centred on the same line as the number. It is a label about
   the notch, so it hangs off the cell rather than widening it — the cell is one notch
   wide and stays that way. */
.mw-rec {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 2px; white-space: nowrap;
  font-family: var(--font-supreme-bold); font-size: 11px; line-height: 1.2; letter-spacing: -0.4px;
  color: #757575;
  transition: opacity .45s ease, transform .5s cubic-bezier(.4,0,.2,1);
}
.mw-cell.rec { position: relative; }
/* Read, and gone: it slides down out of the ruler and 4.0 joins the other numbers. */
.mw-ticks.rec-done .mw-rec { opacity: 0; transform: translateX(-50%) translateY(10px); }
.mw-ticks.rec-done .mw-cell.rec .mw-lbl { color: #C7C7C7; }

/* Time wheels (iPhone-timer style) -------------------------------------------- */
.mw-time { position: relative; height: 132px; display: flex; align-items: stretch; justify-content: center; }
/* The selected row sits in a highlighted band across the centre. */
.mw-time::before { content: ""; position: absolute; left: 12px; right: 12px; top: 50%; height: 36px; margin-top: -18px; background: var(--color-neutral-100); border-radius: 12px; pointer-events: none; }
.mw-wheel { position: relative; width: 52px; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; text-align: center; }
.mw-wheel::-webkit-scrollbar { display: none; }
/* Numbers stay Medium (selected just darkens); h/m/s are Bold, both sized like the numbers. */
.mw-wheel .op { height: 36px; line-height: 36px; scroll-snap-align: center; font-family: var(--font-supreme-medium); font-size: 26px; letter-spacing: -0.5px; color: #C7C7C7; transition: color .15s ease; }
.mw-wheel .op.on { color: var(--color-black); }
.mw-wheel .pad { height: 48px; }                       /* centres first/last item in the band */
/* h / m / s unit, pinned in the centred selection band right after each column.
   position:relative lifts it above the band ::before (which would otherwise cover it). */
.mw-unit { position: relative; z-index: 1; align-self: center; font-family: var(--font-supreme-bold); font-size: 22px; color: var(--color-black); margin: 0 12px 0 2px; }