/* React SetLogger overrides for @ncdai/react-wheel-picker */

/* The library renders a centered "highlight" overlay list above the ring.
   In our layout this appears as a second, larger column on the right.
   Hide the overlay so only the scrolling ring is visible. */
[data-rwp-highlight-wrapper]{
  display: none !important;
}

/* Optional: ensure the picker column centers nicely within our grid cell */
[data-rwp]{
  text-align: center;
}
/* Typography for wheel options (requested) */
[data-rwp-option]{
  /* Cap font so each item leaves at least 5px vertical gap inside its 42px slot */
  font-size: clamp(18px, 10vw, calc(var(--sl-item-h, 46px) - 3px));
  /* Force the text line box to be smaller than the option item’s height (overrides inline line-height) */
  line-height: calc(var(--sl-item-h, 42px) - 3px) !important;
  font-family: "transducer", sans-serif;
  font-weight: 500;
  font-style: normal;
}

/* Note: vertical spacing between rows is controlled by the component’s optionItemHeight prop.
   To increase spacing, bump the itemHeight value passed into WheelPicker (we forward it).
   See SetLogger.tsx for the optionItemHeight prop on both pickers. */

/* Override inline styles without !important by supplying CSS variables the inline uses as fallbacks */

/* Root grid container */
.sl-root{
  /* Layout tokens used by inline style var(...) fallbacks */
  --sl-grid: auto 1fr 2fr auto;
  --sl-gap: 3vw;
  --sl-padding: 12px;
  --sl-border: 1px solid #224237;
  --sl-radius: 8px;
  --sl-bg: radial-gradient(circle at top right, #1c1c1c 0%, rgba(28,28,28,0) 100%),
           radial-gradient(ellipse farthest-corner at 50% 100%, #001f12 0%, #000000 100%);
  /* Wheel item height token (kept in sync with React optionItemHeight=42) */
  --sl-item-h: 45px;

  /* Also provide base layout so we’re not dependent on inline for structure */
  display: grid;
  align-items: center;
  width: 100%;
  gap: var(--sl-gap);
  padding: var(--sl-padding);
  border: var(--sl-border);
  border-radius: var(--sl-radius);
  background: var(--sl-bg);
}

/* Legend row */
.sl-legend{
  --sl-legend-grid: auto 1fr 1fr;
  --sl-legend-gap: 3vw;
  --sl-legend-font: "transducer", sans-serif;
  --sl-legend-color: #2c916f;
  --sl-legend-size: clamp(10px, 3.5vw, 14px);
  --sl-legend-mb: 4px;

  display: grid;
  grid-template-columns: var(--sl-legend-grid);
  column-gap: var(--sl-legend-gap);
  text-transform: uppercase;
  font-family: var(--sl-legend-font);
  font-weight: 500;
  color: var(--sl-legend-color);
  font-size: var(--sl-legend-size);
  margin-bottom: var(--sl-legend-mb);
  width: 100%;
}
.sl-legend-left{ text-align: left; }
.sl-legend-center{ text-align: center; }

/* Set column */
.sl-set-col{
  --sl-set-font: "transducer", sans-serif;
  --sl-set-color: #48e69f;
  --sl-set-size: clamp(18px, 8vw, 46px);
  --sl-set-line: 1;
  --sl-set-pl: 4px;

  font-family: var(--sl-set-font);
  font-weight: 600;
  color: var(--sl-set-color);
  font-size: var(--sl-set-size);
  line-height: var(--sl-set-line);
  white-space: nowrap;
  padding-left: var(--sl-set-pl);
}

.sl-set-col--warmup{
  display: flex;
  align-items: center;
}

.sl-set-col-warmup-mark{
  display: block;
  width: auto;
  height: 32px;
  margin-top: 4px;
  margin-right: -6px;
}

/* Wheel wrappers */
.sl-wheel{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: visible;
}

.sl-wheel--disabled{
  pointer-events: none;
}

.sl-timer-shell{
  --sl-timer-center-offset: clamp(26px, 14vw, 81.5px);
  position: relative;
  display: grid;
  place-items: center;
}

.sl-timer-sound-control{
  appearance: none;
  position: absolute;
  top: -36px;
  right: 0;
  z-index: 3;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  background-image: url(/images/icon-sound-off.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14.5px;
  cursor: pointer;
}

.sl-timer-sound-control[data-sound-state="on"]{
  background-image: url(/images/icon-sound-on.svg);
  background-size: 24px;
}

.sl-timer-sound-control[data-sound-state="unavailable"]{
  background-image: url(/images/icon-sound-disabled.svg);
  background-size: 24px;
  cursor: not-allowed;
}

.sl-timer-sound-control[data-sound-state="enabling"]{
  animation: sl-timer-sound-enabling 700ms ease-in-out infinite;
}

.sl-timer-sound-control:not(:disabled):hover{
  filter: brightness(1.2);
}

.sl-timer-sound-control:focus-visible{
  outline: 1px solid #2effaa;
  outline-offset: 2px;
}

@keyframes sl-timer-sound-enabling{
  0%,
  100%{
    opacity: .5;
  }
  50%{
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce){
  .sl-timer-sound-control[data-sound-state="enabling"]{
    animation: none;
    opacity: 1;
  }
}

.sl-wheel--bodyweight{
  display: grid;
}

.sl-bodyweight-load{
  display: grid;
  width: 100%;
  place-items: center;
  font-size: 15px;
  line-height: 1;
  border: 1px solid rgb(255 176 0 / 83%);
  padding: 5px 6px;
  color: rgb(255 176 0 / 94%);
  font-family: "transducer", sans-serif;
  border-radius: 4px;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
}

.sl-bodyweight-load span{
  display: block;
}
/* Ensure minimum vertical gap: line-height 5px less than item height.
   Uses !important to override library inline line-height style. */
.sl-option-item{
  height: var(--sl-item-h, 44px) !important;
  line-height: calc(var(--sl-item-h, 44px) - 3px) !important;
}

/* Timer button */
.sl-timer{
  --sl-timer-font-family: "transducer-extended", sans-serif;

  /* Text + fill */
  --sl-timer-fg: #fff;
  --sl-timer-fg-done: #fff;
  --sl-timer-bg: #000;
  --sl-timer-bg-done: #000;

  /* Circular ring tokens */
  --sl-ring-base-w: 3px;            /* base stroke thickness */
  --sl-ring-cover-w: 3.2px;         /* cover stroke thickness (slightly larger) */
  --sl-ring-base: #45ffaa;          /* light green base ring */
  --sl-ring-cover: #093520;         /* dark green countdown cover */
  --sl-cover-deg: 0deg;             /* updated from React as time elapses */

  --sl-timer-d: 28vw;
  --sl-timer-max: 163px;
  --sl-timer-min: 52px;
  --sl-timer-radius: 999px;
  --sl-timer-size: clamp(12px, 9vw, 50px);

  font-family: var(--sl-timer-font-family);
  font-weight: 600;
  color: var(--sl-timer-fg);
  background: var(--sl-timer-bg);
  width: var(--sl-timer-d);
  height: var(--sl-timer-d);
  max-width: var(--sl-timer-max);
  max-height: var(--sl-timer-max);
  min-width: var(--sl-timer-min);
  min-height: var(--sl-timer-min);
  border-radius: var(--sl-timer-radius);
  display: grid;
  place-items: center;
  font-size: var(--sl-timer-size);
  user-select: none;
  position: relative;
  z-index: 0;
  overflow: hidden;
}

/* PR active state: force green circle, hide ring decorations.
   Pre-set every value that data-done and data-logging rules would normally
   change, so those attribute flips cause zero computed-style delta — which
   prevents the browser from restarting child CSS animations. */
.sl-timer[data-pr="true"]{
  background: #45ffaa !important;
  color: #000 !important;       /* matches data-done; prevents color repaint */
  cursor: pointer;               /* matches data-done; prevents cursor change */
  animation: sl-pr-bubble-exit 2s forwards !important;
  transform-origin: center;
  will-change: transform;       /* suppresses sl-logging-pulse replacement while
                                   keeping the shrink on its own layer */
}
.sl-timer[data-pr="true"][data-pr-reduced-motion="true"]{
  animation: none !important;
  transform: none !important;
  will-change: auto;
}
.sl-timer[data-pr="true"]::before,
.sl-timer[data-pr="true"]::after{
  opacity: 0 !important;
}
/* Hide log-progress ring so it doesn't overlap the animation */
.sl-timer[data-pr="true"] .sl-log-progress-ring{
  display: none;
}

/* PR animation container — fills the button, clips to the circle via parent overflow:hidden */
.sl-pr-anim{
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Wrapper that slides — flex-centered so the star image sits in the middle.
   will-change promotes to its own compositing layer, isolating the animation
   from any parent repaint/recompose that might otherwise reset it. */
.sl-pr-star-wrapper{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: sl-pr-star-rise 1.63s linear forwards;
  will-change: transform;
  z-index: 1;
}

/* Star image: ~74% of circle diameter, per design guide proportions */
.sl-pr-star-img{
  width: 76%;
  height: auto;
  display: block;
}

/* PR text: green (#45ffaa) — same as button bg, invisible on green, revealed by black star */
.sl-pr-text-img{
  position: absolute;
  width: 18%;
  height: auto;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 2;
}

/* Reduced motion: show star and PR text statically at rest position */
.sl-pr-anim.is-reduced-motion .sl-pr-star-wrapper{
  animation: none;
  transform: none;
}

@keyframes sl-pr-bubble-exit{
  0%{
    transform: scale(1);
  }
  84%{
    transform: scale(1);
    animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
  }
  100%{
    transform: scale(0.01);
  }
}

@keyframes sl-pr-star-rise{
  /* Phase 1: enter from below (ease-out — decelerates into position, ~0.5s) */
  0%{
    transform: translateY(calc(100% - 5px));
    animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
  }
  /* 31% of 1.63s ≈ 0.51s — star arrives 5px above flex-center */
  31%{
    transform: translateY(-5px);
  }
  /* Phase 2: linger (31%–77% ≈ 0.75s, no movement) */
  77%{
    transform: translateY(-5px);
    animation-timing-function: cubic-bezier(0.4, 0.0, 1, 1);
  }
  /* Phase 3: take off upward (ease-in — accelerates away, ~0.37s ≈ 25% faster) */
  100%{
    transform: translateY(-120%);
  }
}

/* Base light-green ring (full circumference) */
.sl-timer::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background: conic-gradient(from -90deg, var(--sl-ring-base) 0 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--sl-ring-base-w)), #000 0);
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--sl-ring-base-w)), #000 0);
  transform: rotate(90deg); /* rotate ring 90deg clockwise */
  z-index: 0;
}

/* Dark-green arc that covers the base ring as time counts down */
.sl-timer::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background: conic-gradient(from -90deg, var(--sl-ring-cover) 0 var(--sl-cover-deg), transparent var(--sl-cover-deg) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--sl-ring-cover-w)), #000 0);
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--sl-ring-cover-w)), #000 0);
  transform: rotate(90deg); /* rotate ring 90deg clockwise */
  z-index: 1;
}
.sl-timer[data-done="true"]{
  /* When ready to log: mint fill with black text */
  color: #000 !important;
  background: #45ffaa !important;
  cursor: pointer;
}

.sl-timer[data-logging="true"]{
  font-size: clamp(12px, 4.1vw, 25px);
  cursor: wait;
  animation: sl-logging-pulse 1.12s infinite;
}

@keyframes sl-logging-pulse{
  0%{
    opacity: 1;
    animation-timing-function: ease-in;
  }
  82%{
    opacity: 0.5;
  }
  100%{
    opacity: 1;
  }
}
/* Hide stroke overlays when done so the circle is solid mint */
.sl-timer[data-done="true"]::before,
.sl-timer[data-done="true"]::after{
  opacity: 0 !important;
}

/* Optional: center selection line without duplicate overlay text */
.sl-highlight-wrapper[data-rwp-highlight-wrapper]{ display:block; pointer-events:none; position:relative; }
.sl-highlight-wrapper[data-rwp-highlight-wrapper]::before{
  content:"";
  position:absolute;
  left:0; right:0; top:50%;
  transform: translateY(-50%);
  height:1px;
  background: linear-gradient(to right, transparent, #2d8c6b, transparent);
}
.sl-highlight-item,[data-rwp-highlight-item]{ display:none; }

/* Typography for wheel options (keep your chosen size) */
[data-rwp-option]{
  /* Keep responsive scaling but enforce a hard cap tied to item height minus 5px */
  font-size: clamp(18px, 10vw, calc(var(--sl-item-h, 46px) - 5px));
  /* Ensure at least 5px of vertical slack within each item’s fixed 42px slot */
  line-height: calc(var(--sl-item-h, 42px) - 5px) !important;
  font-family: "transducer", sans-serif;
  font-weight: 500;
  font-style: normal;
}

/* Ensure picker column centers nicely */
[data-rwp]{ text-align: center; }

/* Project-specific tweaks you already added */



/* Wheel-specific justification without touching your existing rules */
#sl-wheel-reps [data-rwp-option],
#sl-wheel-reps [data-rwp-highlight-item],
.sl-wheel--reps [data-rwp-option],
.sl-wheel--reps [data-rwp-highlight-item]{
  justify-content: flex-end;
}

#sl-wheel-load [data-rwp-option],
#sl-wheel-load [data-rwp-highlight-item],
.sl-wheel--load [data-rwp-option],
.sl-wheel--load [data-rwp-highlight-item]{
  justify-content: flex-start;
}

.sl-root {padding: 0px; border: none; grid-template-columns: auto 1fr 2fr auto;
    padding: 0;
    gap: 3.33%;
    border-width: 1px;
    border-left-style: none;
    border-right-style: none;
    border-image: linear-gradient(to right, black, #224237, black) 1;
    background: none;}
#sl-set {color: #2effaa;font-size: 9.7vw;
    font-family: transducer, sans-serif;
    font-weight: 600;}
 .card.logger {padding: 32px 17px 0px 29px;}
/* Active/idle colors driven by .is-near, which is applied at the snap threshold */
.sl-wheel [data-rwp-option]{
  color: #003821;                /* idle (not snapping to center) */
  transition: color .18s ease;
}
.sl-wheel [data-rwp-option].is-near{
  color: #ffffff;                /* at/near snap-to-center threshold */
}

@keyframes sl-load-attention-flash{
  0%{
    opacity: 1;
  }
  90%{
    opacity: .25;
  }
  100%{
    opacity: 1;
  }
}

.sl-wheel--load-attention [data-rwp-option].is-near{
  animation: sl-load-attention-flash 1000ms linear infinite;
}

@keyframes sl-rep-target-pending-flash{
  0%,
  100%{
    opacity: 1;
  }
  50%{
    opacity: .25;
  }
}

.sl-wheel--rep-target-pending [data-rwp-option].is-near{
  animation: sl-rep-target-pending-flash 700ms ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce){
  .sl-wheel--rep-target-pending [data-rwp-option].is-near{
    animation: none;
    color: #2effaa;
  }
}

.sl-wheel [data-rwp-option] {
    color: #0a6842;}
/* Cap Set, Reps, Load number sizes at 50px without overwriting prior rules */
/* Set number (left column) uses a CSS variable in SetLogger; override the max here */
.sl-set-col{
  --sl-set-size: clamp(18px, 10.1vw, 45px);
}

/* Wheel options: scale with vw but cap to ensure at least 5px vertical gap within 42px slot */
.sl-wheel [data-rwp-option]{
  font-size: clamp(18px, 10vw, calc(var(--sl-item-h, 48px) - 5px));
  /* Force a smaller line box than the item height so rows never touch */
  line-height: calc(var(--sl-item-h, 42px) - 5px) !important;
}
/* Cap #sl-set explicitly at 50px without touching your existing color rule */
#sl-set{
    font-size: clamp(18px, 10w, 46px);
}
/* Hard clamp for the Set number: force font-size to never exceed 50px.
   Use higher specificity than .sl-set-col and avoid !important. */
#sl-set{
    font-size: clamp(18px, 10vw, 46px);
}
/* Match interior-UI-v4 proportions: keep runner set-logger content phone-sized. */
.cardcontent.logger {
  position: relative;
  width: 100%;
  max-width: 457px;
  margin: 0 auto;
}

.sl-legend {    gap: 3.33%;
    grid-template-columns: 29px 49px auto;
    color: #8c8c8cc7;
    margin: 3px 0 0;
    border-width: 1px;
    border-bottom-style: solid;
    border-image: linear-gradient(to right, black, #224237, black) 1;
    padding-bottom: 6px;}
.sl-legend-left {text-align: left;}
.sl-legend-center {text-align: right;}
.sl-legend-right {text-align: left; white-space: nowrap;}
.sl-load-delta-cycle{
    display: inline-grid;
    align-items: center;
    min-height: 1em;
}
.sl-load-delta-phase{
    grid-area: 1 / 1;
    transition: opacity 1000ms ease;
    white-space: nowrap;
}
.sl-load-delta-phase:first-child{
    transition-delay: 500ms;
}
.sl-load-delta-phase--breakdown{
    opacity: 0;
    font-size: 0.94em;
    text-transform: none;
    transition-delay: 0ms;
}
.sl-load-delta-breakdown-entry{
    display: inline-flex;
    align-items: baseline;
    text-transform: none;
}
.sl-load-delta-breakdown-weight{
    text-transform: none;
}
.sl-load-delta-breakdown-count{
    color: #a1a1a1;
    text-transform: none;
}
.sl-load-delta-cycle.is-breakdown .sl-load-delta-phase:first-child{
    opacity: 0;
    transition-delay: 0ms;
}
.sl-load-delta-cycle.is-breakdown .sl-load-delta-phase--breakdown{
    opacity: 1;
    transition-delay: 500ms;
}
/* Progress ring drawn during set logging (SCHAT2-32) */
.sl-log-progress-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.sl-load_increase {color: #45ffaa; padding-left: 5px;}
.sl-load_decrease {color: #ff2b2b; padding-left: 5px;}

.card.logger {    border-width: 0;
    border-top-style: solid;
    border-image: linear-gradient(to right, black, #224237, black) 1; padding: 17px 17px 2px 29px; }
    
.sl-timer {background: #000 !important;     --sl-timer-d: 28vw;
    --sl-timer-max: 163px;}

      .sl-legend {color: #147647; font-weight: 600; margin: -1px 0 -6px;     font-size: 12.5px;
}
  .card.logger {padding: 17px 17px 0px 29px;}

  .sl-timer {font-family: transducer; letter-spacing: 0px;}
  .sl-root {    margin: -6px 0 -4px;}

/* Guard against legacy v3 `.card { max-width: 390px; }` leaking in on first route paint.
   Keep logger card full-width regardless of stylesheet arrival order. */
.train-session-page .card.logger {
  max-width: none;
  width: 100%;
  margin: -1px 0 0;
}

.train-session-page .cardcontent.logger {
  max-width: 457px;
  margin: 0 auto;
}

/* Deterministic runtime guard:
   route transitions can reorder generic `.card*` rules across style chunks.
   These selectors intentionally out-rank base styles so logger gutters/padding
   stay stable on first paint after auth->train navigation. */
.runner-panel .runner-rest-feed-pane-view,
.runner-panel .runner-chat-pane {
  min-height: calc(
    100dvh
    - var(--train-session-set-logger-height, 0px)
    - var(--tab-h, 50px)
    - env(safe-area-inset-bottom)
    - var(--pwa-bottom-nav-clearance, 0px)
    - var(--program-visual-viewport-bottom-offset, 0px)
  );
}

.card.logger.train-logger-card {
  position: sticky !important;
  top: var(--train-session-sticky-runner-top, 0) !important;
  z-index: 50 !important;
  max-width: none !important;
  width: 100% !important;
  margin: -1px 0 0 !important;
  padding: 17px 20px 0 20px !important;
  isolation: isolate;
}

.card.logger.train-logger-card.train-logger-card--native-sticky {
  position: sticky !important;
  top: 0 !important;
  padding: calc(17px + var(--train-session-sticky-runner-top, 0px)) 20px 0 20px !important;
}

.train-logger-card--native-sticky > .train-session-progress-meter {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
}

.cardcontent.logger.train-logger-cardcontent {
  position: relative !important;
  width: 100% !important;
  max-width: 457px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.compound-set-logger__stack {
  display: grid;
  gap: 0;
}

.compound-set-logger__phase {
  position: relative;
}

.compound-set-logger__phase:first-child {
  z-index: 1;
}

.compound-set-logger__phase--continuation {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-18px);
  transition:
    grid-template-rows 460ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 460ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 460ms cubic-bezier(0.16, 1, 0.3, 1);
}

.compound-set-logger__stack--revealed .compound-set-logger__phase--continuation {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
}

.compound-set-logger__stack--revealed
  .compound-set-logger__phase--continuation
  + .compound-set-logger__phase--continuation {
  transition-delay: 70ms;
}

.compound-set-logger__phase-viewport {
  min-height: 0;
  overflow: hidden;
}

.compound-set-logger__stack--collapsing .compound-set-logger__phase--continuation {
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
  transition-delay: 0ms;
}

.compound-set-logger__phase:not(:last-child) .sl-root {
  border-width: 1px;
  border-bottom-style: solid;
  border-image: linear-gradient(to right, #000, #224237, #000) 1;
}

.compound-set-logger__phase--continuation .sl-legend {
  display: none;
}

.compound-set-logger__phase--continuation .sl-timer-shell {
  visibility: hidden;
  pointer-events: none;
}

.compound-set-logger__phase--continuation .sl-timer-sound-control {
  display: none;
}

.compound-set-logger__phase--continuation .sl-root {
  border-top-color: transparent;
}

.compound-set-logger__phase--continuation .sl-set-col {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 0;
}

.compound-set-logger__technique-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  transform: translateX(3px);
}

.compound-set-logger__technique-marker .preview-technique-icon {
  display: block;
  width: 29px;
  height: 29px;
}

@media (prefers-reduced-motion: reduce) {
  .compound-set-logger__phase--continuation {
    grid-template-rows: 1fr;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .compound-set-logger__stack--collapsing .compound-set-logger__phase--continuation {
    grid-template-rows: 0fr;
    opacity: 0;
  }
}

/* Runner utilities: single menu trigger for the AppHeader session overlay. */
.setlogger-session-utilities{
  display: flex;
  align-items: center;
  position: absolute;
  right: 0;
  top: -8px;
  z-index: 2;
  overflow: visible;
}

.setlogger-session-utilities.has-menu{
  flex-direction: column;
  align-items: flex-end;
}

.setlogger-session-utilities-primary{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.setlogger-session-utilities-menu-anchor{
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 32px;
}

.setlogger-session-technique-label{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  max-width: min(190px, 48vw);
  height: 28px;
  padding: 0 10px;
  overflow: hidden;
  border-radius: 2px;
  background: #45ffaa;
  color: #00150d;
  font-family: "transducer", sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.setlogger-session-utilities-button{
  appearance: none;
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  width: 25px;
  height: 20px;
  margin-left: 8px;
  padding: 0;
  cursor: pointer;
  color: transparent;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}

.setlogger-session-utilities-button:first-child{
  margin-left: 0;
}

.setlogger-session-utilities-rir{
  align-self: center;
  color: #9ea7a3;
  font-family: "transducer", sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  margin-right: 7px;
  white-space: nowrap;
}

.setlogger-session-utilities.has-menu .setlogger-session-utilities-rir{
  align-self: center;
  position: static;
  margin: 0;
  font-size: 14px;
  color: #4ed196;
}

.setlogger-session-utilities-menu{
  /* Dedicated button asset + fixed px geometry so commentary icon tweaks cannot affect menu CTA hitbox. */
  background-image: url(/images/three-dot-menu-button.svg);
  background-size: 42px;
  overflow: visible;
  position: relative;
  width: 42px;
  height: 32px;
  margin: -4px 0 -3px;
  margin-left: 0;
}

.setlogger-session-utilities-menu-badge{
  position: absolute;
  right: -4px;
  top: -4px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  box-sizing: border-box;
  padding: 0 4px;
  border: 1px solid #ffffff;
  border-radius: 50%;
  background: #d92d20;
  color: #ffffff;
  font-family: "transducer", sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.setlogger-session-utilities-menu-badge--capped{
  min-width: 28px;
  border-radius: 9px;
}

.setlogger-session-utilities-swap{
  background-image: url(/images/button-setlogger-swap.svg);
  background-size: 22px;
}

.setlogger-session-utilities-reorder{
  background-image: url(/images/button-setlogger-reorder.svg);
  background-size: 22px;
}

.setlogger-session-utilities-skip{
  background-image: url(/images/button-setlogger-skip.svg);
  background-size: 20px;
}

.setlogger-session-utilities-preview{
  background-image: url(/images/button-setlogger-preview.svg);
  background-size: 17px;
}

.setlogger-session-utilities-button:hover{
  filter: brightness(1.2);
}

.setlogger-session-utilities-menu:hover{
  background-image: url(/images/three-dot-menu-button-hover.svg);
}

.setlogger-session-utilities-swap:hover{
  background-image: url(/images/button-setlogger-swap-hover.svg);
}

.setlogger-session-utilities-reorder:hover{
  background-image: url(/images/button-setlogger-reorder-hover.svg);
}

.setlogger-session-utilities-skip:hover{
  background-image: url(/images/button-setlogger-skip-hover.svg);
}

.setlogger-session-utilities-preview:hover{
  background-image: url(/images/button-setlogger-preview-hover.svg);
}

.setlogger-session-utilities-button:focus-visible{
  outline: 1px solid #2effaa;
  outline-offset: 3px;
  border-radius: 2px;
}

.setlogger-session-utilities-button:disabled{
  opacity: 0.36;
  filter: saturate(0.8);
  cursor: not-allowed;
  pointer-events: none;
}

.setlogger-session-utilities-button:disabled:hover{
  filter: saturate(0.8);
}

.train-set-help{
  --train-set-help-translate-x: 0px;
  --train-set-help-translate-y: 0px;
  --train-set-help-origin-x: 50%;
  --train-set-help-origin-y: -8px;
  position: absolute;
  z-index: 12;
  width: min(243px, calc(100vw - 44px));
  box-sizing: border-box;
  padding: 20px 16px 20px;
  border: none;
  border-radius: 25px;
  background-image: radial-gradient(circle at 0 0, #e3e3e3 0%, #b8b8b8 100%);
  box-shadow: 0 5px 15px #0000007d;
  color: #000;
  text-align: center;
  transform: translate3d(
      var(--train-set-help-translate-x),
      var(--train-set-help-translate-y),
      0
    )
    scale(1);
  transform-origin: var(--train-set-help-origin-x) var(--train-set-help-origin-y);
  animation: trainSetHelpPopIn 150ms ease-in both;
  pointer-events: auto;
  will-change: opacity, transform;
}

.train-set-help.is-exiting{
  animation: trainSetHelpPopOut 150ms ease-in both;
  pointer-events: none;
}

.train-set-help__pointer{
  position: absolute;
  top: -8px;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #dbdbdb;
}

.train-set-help .train-set-help__title{
  display: none;
  margin: 0 0 5px;
  color: #000;
  font-family: "transducer", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.1;
  text-transform: uppercase;
}

.train-set-help .train-set-help__body{
  margin: 0 0 6px;
  color: #000;
  font-family: neue-haas-unica, sans-serif;
  font-size: 0.925rem;
  font-weight: 600;
  line-height: 1.2;
}

.train-set-help__button{
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  margin-top: 12px;
  padding: 8px 14px;
  color: #01ff97;
  background: #000;
  border: none;
  border-radius: 4px;
  font-family: "transducer", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
}

.train-set-help__button:focus-visible{
  outline: 1px solid rgb(8 36 20 / 38%);
  outline-offset: 2px;
  border-radius: 2px;
}

.train-set-help--reps{
  --train-set-help-translate-x: -50%;
  --train-set-help-origin-x: 30%;
  top: calc(100% + -26px);
  left: 129%;
}

.train-set-help--load{
  --train-set-help-translate-x: -50%;
  --train-set-help-origin-x: 50%;
  top: calc(100% + -26px);
  left: 26%;
}

.train-set-help--reps .train-set-help__pointer{
  left: 30%;
}

.train-set-help--load .train-set-help__pointer{
  left: 50%;
}

.train-set-help--log{
  --train-set-help-origin-x: calc(100% - var(--sl-timer-center-offset));
  top: calc(100% + 12px);
  right: 0px;
  left: auto;
}

.train-set-help--log .train-set-help__pointer{
  left: auto;
  right: var(--sl-timer-center-offset);
  transform: none;
}

.train-set-help--menu{
  --train-set-help-origin-x: calc(100% + 8px);
  --train-set-help-origin-y: 22%;
  top: -13px;
  right: calc(100% + 12px);
  left: auto;
}

.train-set-help--menu .train-set-help__pointer{
  top: 22%;
  left: auto;
  right: -8px;
  transform: translateY(-50%);
  border-top: 8px solid transparent;
  border-right: 0;
  border-bottom: 8px solid transparent;
  border-left: 8px solid #bcbcbc;
}

.train-set-help--back-to-feed{
  --train-set-help-origin-x: var(--runner-back-to-feed-help-pointer-left);
  --train-set-help-origin-y: calc(100% + 8px);
  position: fixed;
  top: auto;
  right: auto;
  bottom: calc(
    var(--tab-h, 50px) +
    env(safe-area-inset-bottom) +
    var(--pwa-bottom-nav-clearance, 0px) +
    var(--program-visual-viewport-bottom-offset, 0px) +
    14px
  );
  z-index: 31;
}

.train-set-help--back-to-feed .train-set-help__pointer{
  top: auto;
  right: auto;
  bottom: -8px;
  left: var(--runner-back-to-feed-help-pointer-left);
  transform: translateX(-50%);
  border-top: 8px solid #b8b8b8;
  border-right: 8px solid transparent;
  border-bottom: 0;
  border-left: 8px solid transparent;
}

.train-set-help--session-two-nav{
  --train-set-help-origin-x: var(--session-two-nav-help-pointer-left);
  --train-set-help-origin-y: calc(100% + 8px);
  position: fixed;
  top: auto;
  right: auto;
  bottom: calc(
    var(--tab-h, 50px) +
    env(safe-area-inset-bottom) +
    var(--pwa-bottom-nav-clearance, 0px) +
    var(--program-visual-viewport-bottom-offset, 0px) +
    14px
  );
  left: var(--session-two-nav-help-left);
  z-index: 31;
}

:root.program-active-workout-return-visible .train-set-help--session-two-nav{
  bottom: calc(
    var(--tab-h, 50px) +
    env(safe-area-inset-bottom) +
    var(--pwa-bottom-nav-clearance, 0px) +
    var(--program-visual-viewport-bottom-offset, 0px) +
    2px
  );
}

.train-set-help--session-two-nav .train-set-help__pointer{
  top: auto;
  right: auto;
  bottom: -8px;
  left: var(--session-two-nav-help-pointer-left);
  transform: translateX(-50%);
  border-top: 8px solid #b8b8b8;
  border-right: 8px solid transparent;
  border-bottom: 0;
  border-left: 8px solid transparent;
}

@keyframes trainSetHelpPopIn{
  0%{
    opacity: 0;
    transform: translate3d(
        var(--train-set-help-translate-x),
        var(--train-set-help-translate-y),
        0
      )
      scale(0.1);
  }
  100%{
    opacity: 1;
    transform: translate3d(
        var(--train-set-help-translate-x),
        var(--train-set-help-translate-y),
        0
      )
      scale(1);
  }
}

@keyframes trainSetHelpPopOut{
  0%{
    opacity: 1;
    transform: translate3d(
        var(--train-set-help-translate-x),
        var(--train-set-help-translate-y),
        0
      )
      scale(1);
  }
  100%{
    opacity: 0;
    transform: translate3d(
        var(--train-set-help-translate-x),
        var(--train-set-help-translate-y),
        0
      )
      scale(0.1);
  }
}

.train-session-page .utility-session-card{
  min-height: 0;
}

#utility-overlay-session .card.utility-session-card {padding: 55px 24px 20px;}

#utility-overlay-session .cardcontent.utility-session-cardcontent {padding: 0px;}

.train-session-page .utility-session-cardcontent{
  height: 100%;
  gap: 20px;
  padding: 22px 16px 18px;
}

.train-session-page .utility-session-grid{
  width: min(100%, 383px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  justify-items: center;
  max-width: 383px;
  margin: 0 auto;
}

.train-session-page .utility-session-action{
  background: radial-gradient(circle at 83% 8%, #4c4c4c73 0%, #0000 45%), linear-gradient(#000000d1 0%, #053d2ef0 100%);
  color: #3fe1b0;
  border: none;
    border-radius: 12px;
    min-height: 0px;
    gap: 0px;
    padding: 17px 6px 13px;
    max-width: 116px;
}

.train-session-page .utility-session-action-icon{
  width: 44px;
  height: 44px;
  background-image: var(--utility-session-icon);
}

.train-session-page .utility-session-action-icon--edit{
  --utility-session-icon: url(/images/button-edit-exercise.svg);
  --utility-session-icon-active: url(/images/button-edit-exercise-black.svg);
}

.train-session-page .utility-session-action-icon--swap{
  --utility-session-icon: url(/images/button-setlogger-swap-new.svg);
  --utility-session-icon-active: url(/images/button-setlogger-swap-new-black.svg);
}

.train-session-page .utility-session-action-icon--skip{
  --utility-session-icon: url(/images/button-setlogger-skip-new.svg);
  --utility-session-icon-active: url(/images/button-setlogger-skip-new-black.svg);
}

.train-session-page .utility-session-action-icon--view{
  --utility-session-icon: url(/images/button-setlogger-edit-workout-new.svg);
  --utility-session-icon-active: url(/images/button-setlogger-edit-workout-new-black.svg);
}

.train-session-page .utility-session-action-icon--reorder{
  --utility-session-icon: url(/images/button-setlogger-reorder-new.svg);
  --utility-session-icon-active: url(/images/button-setlogger-reorder-new-black.svg);
}

.train-session-page .utility-session-action-icon--quit{
  --utility-session-icon: url(/images/button-setlogger-quit-new.svg);
  --utility-session-icon-active: url(/images/button-setlogger-quit-new-black.svg);
}

.train-session-page .utility-session-action:not(:disabled):is(:active, :focus-visible){
  border-color: #3ec286;
  background: #3ec286;
  color: #000;
}

.train-session-page .utility-session-action:not(:disabled):is(:active, :focus-visible) .utility-session-action-icon{
  background-image: var(--utility-session-icon-active);
}

@media (hover: hover) and (pointer: fine){
  .train-session-page .utility-session-action:not(:disabled):hover{
    border-color: #3ec286;
    background: #3ec286;
    color: #000;
  }

  .train-session-page .utility-session-action:not(:disabled):hover .utility-session-action-icon{
    background-image: var(--utility-session-icon-active);
  }
}

.train-session-page .utility-session-action-label{
  color: inherit;
}

.train-session-page .utility-session-snapshot{
  margin-top: auto;
  border-width: 1px;
    border-bottom-style: solid;
    border-image: linear-gradient(to right, #000, #224237, #000) 1;
  padding-top: 14px;
  padding-right: 16px;
}

.train-session-page .utility-session-snapshot-header{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  color: #a7a7a7;
}

.train-session-page .utility-session-snapshot-day{
  font-family: "transducer-extended", sans-serif;
  font-size: 16px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding-left: 16px;
}

.train-session-page .utility-session-snapshot-timer{
  font-family: "transducer", sans-serif;
  font-size: 39px;
  line-height: 0.92;
  letter-spacing: 0.5px;
}

.train-session-page .utility-session-snapshot-list{
  margin-top: 12px;
}

.train-session-page .utility-session-snapshot-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  color: #56e9b2;
  border-width: 1px;
  border-top-style: solid;
  border-image: linear-gradient(to right, #000, #224237, #000) 1;
}

.train-session-page .utility-session-snapshot-row.is-complete{
  opacity: 0.5;
}

.train-session-page .utility-session-snapshot-name-shell{
  display: inline-flex;
  align-items: center;
  gap: 0px;
  min-width: 0;
  flex: 1 1 auto;
}

.train-session-page .utility-session-snapshot-check{
  display: inline-block;
  width: 16px;
  color: #4cebb6;
  font-family: "transducer", sans-serif;
  font-size: 16px;
  line-height: 1;
}

.train-session-page .utility-session-snapshot-check--placeholder{
  visibility: hidden;
}

.train-session-page .utility-session-snapshot-name{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: transducer, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.1;
  text-transform: uppercase;
  
}

.train-session-page .utility-session-snapshot-targets{
  flex: 0 0 auto;
  display: inline-flex;
  font-family: "transducer", sans-serif;
  line-height: 1;
  color: #34ffc5;
  font-family: transducer, sans-serif;
  font-size: 14px;
}

.train-session-page .utility-session-snapshot-target{
  transition: opacity 160ms ease;
}

.train-session-page .utility-session-snapshot-row:not(.is-complete)
  .utility-session-snapshot-target.is-complete{
  opacity: 0.5;
}

.train-session-page .utility-session-snapshot-status{
  margin: 12px 0 0;
  color: #9ac8ba;
  font-family: "neue-haas-unica", sans-serif;
  font-size: 14px;
}

.session-outline-overlay{
  position: fixed;
  inset: 0;
  z-index: 2300;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.session-reorder-overlay{
  position: fixed;
  inset: 0;
  z-index: 2300;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.session-reorder-backdrop{
  position: absolute;
  inset: 0;
  background: #000000d6;
}

.session-reorder-panel{
  --session-reorder-actions-h: 0px;
  --session-reorder-actions-gap: 16px;
  position: relative;
  width: 100%;
  max-height: 100svh;
  overflow: auto;
  display: block;
  background-image: radial-gradient(circle at top right, #1c1c1c 0%, #1c1c1c00 100%), radial-gradient(ellipse farthest-corner at 50% 100%, #001f12 0%, #000000 100%);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, 100% 100%;
  border-width: 1px;
  border-top-style: solid;
  border-bottom-style: solid;
  border-image: linear-gradient(to right, black, #224237, black) 1;
  padding: 0 0 calc(var(--session-reorder-actions-h) + var(--session-reorder-actions-gap));
  z-index: 1;
}

.session-reorder-panel .card.noback.sessionheader{
  max-width: 452px;
  margin: 0 auto;
  border-top: none;
  padding: 43px 25px 0;
}

.session-reorder-panel .session-preview-list{
  position: relative;
}

.session-reorder-panel .session-preview-list .card.exercisedescriptor{
  width: 100%;
  margin: 0;
  border-radius: 0;
}

.session-reorder-panel .session-preview-list .card.exercisedescriptor .cardcontent{
  width: 100%;
  max-width: 452px;
  margin: 0 auto;
  box-sizing: border-box;
}

.session-reorder-close{
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
}

.session-reorder-actions{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: none;
  padding: 9px;
  padding-bottom: calc(9px + env(safe-area-inset-bottom));
  border: 1px solid rgba(68, 189, 145, 0.2);
  background:
    linear-gradient(180deg, rgba(6, 24, 17, 0.94) 0%, rgba(0, 0, 0, 0.96) 100%);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.44);
  backdrop-filter: blur(18px);
  box-sizing: border-box;
}

.session-reorder-actions-shell{
  width: 100%;
  max-width: 452px;
  margin: 0 auto;
  display: grid;
  gap: 8px;
}

.session-reorder-actions .biggreen.interstitial,
.session-reorder-actions .bigalt.interstitial{
  width: 100%;
  margin: 0;
}

.session-reorder-panel .card.exercisedescriptor.is-locked .dragger{
  background: none !important;
}

.session-reorder-panel .card.exercisedescriptor .cardcontent.is-locked{
  opacity: 0.5;
}

.session-reorder-panel .card.exercisedescriptor.is-locked{
  cursor: default;
}

.session-reorder-panel .card.exercisedescriptor .dragger{
  touch-action: none;
}

.session-reorder-panel .session-preview-list .card.exercisedescriptor.draggable,
.session-reorder-panel .session-preview-list .card.exercisedescriptor.draggable *{
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  user-select: none;
}

.session-reorder-panel .session-preview-list .card.exercisedescriptor.is-dragging-source{
  opacity: 0.98;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.48);
  pointer-events: none;
  animation: none;
  transition: transform 200ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.session-reorder-panel .session-preview-list .card.exercisedescriptor.is-dragging-source .cardcontent{
  opacity: 1;
}

.session-outline-backdrop{
  position: absolute;
  inset: 0;
  background: #000000d6;
}

.session-outline-panel{
  position: relative;
  width: 100%;
  max-height: 100svh;
  overflow: auto;
  display: flex;
  justify-content: center;
  background-image: radial-gradient(circle at top right, #1c1c1c 0%, #1c1c1c00 100%), radial-gradient(ellipse farthest-corner at 50% 100%, #001f12 0%, #000000 100%);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, 100% 100%;
  border-width: 1px;
  border-top-style: solid;
  border-bottom-style: solid;
  border-image: linear-gradient(to right, black, #224237, black) 1;
  padding: 53px 0 calc(32px + env(safe-area-inset-bottom));
  z-index: 1;
}

.session-outline-content{
  width: 100%;
  max-width: none;
  padding: 0;
  box-sizing: border-box;
}

.session-outline-header-card{
  width: 100%;
  max-width: 452px;
  margin: 0 auto -18px;
  border: none;
  background-image: none;
}

.session-outline-header-card .cardcontent{
  padding: 0;
}

.card.noback.session-outline-header-card{
  border-top: none;
  padding: 15px 25px 0;
}

.session-outline-eyebrow{
  margin: 0 0 11px;
  font-family: "transducer-extended", sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  color: #3de8a9;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.session-outline-title{
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.02;
  color: #ffffff;
  text-transform: none;
  margin: 0;
}

.session-outline-title-row{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 11px 0 12px;
}

.session-outline-countdown{
  margin: 0;
  font-family: "transducer", sans-serif;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1;
  color: #ffffffde;
  letter-spacing: 0.4px;
  text-align: right;
  white-space: nowrap;
}

.session-outline-content .card.exercisedisplay{
  max-width: 452px;
  background-image: none;
  margin: auto;
}

.session-outline-close{
  appearance: none;
  border: 0;
  background: transparent;
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
}

/* Overlay adds a correction action column. */
.setreploadgrid.session-outline-grid{
  grid-template-columns: 1fr auto auto auto;
}

/* Wrap-up adds a correction action column to the standard 4-col grid. */
.setreploadgrid.wrapup-editable-grid{
  grid-template-columns: 1fr auto auto auto auto;
}

.wrap-up-page .setreploadgrid.wrapup-editable-grid{
  grid-template-columns: auto minmax(74px, 1fr) auto auto auto auto;
}

.wrap-up-page .gridlabel.pr-marker,
.wrap-up-page .setrepload.pr-marker{
  min-width: 0;
  text-align: left;
  padding-left: 3px;
  padding-right: 8px;
}

.wrapup-set-pr-marker{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #ffb200;
  font-family: "transducer", sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.wrapup-set-pr-star{
  display: inline-block;
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  background: #ffb200;
  -webkit-mask: url("/images/pr-star.svg") center / contain no-repeat;
  mask: url("/images/pr-star.svg") center / contain no-repeat;
}

.gridlabel.action,
.setrepload.action{
  text-align: right;
  padding-right: 0;
  padding-left: 13px;
}

.set-correction-toggle{
  appearance: none;
  border: 1px solid #2effaa66;
  color: #00ff97;
  background: #00170e;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "transducer", sans-serif;
  font-size: 15px;
  width: 28px;
  height: 24px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

.set-correction-toggle-icon{
  display: block;
  width: 16px;
  height: 16px;
}

.set-correction-toggle:disabled{
  opacity: 0.6;
  cursor: wait;
}

.set-correction-input{
  width: 56px;
  border: 1px solid #2effaa66;
  border-radius: 2px;
  background: #00170e;
  color: #b8ffe4;
  font-family: "transducer", sans-serif;
  font-size: 14px;
  text-align: right;
  padding: 2px 5px;
}

.set-corrected-mark{
  color: #3dff8a;
  font-weight: 700;
}

.session-correction-toast{
  margin-top: 8px;
  color: #7affc8;
  font-family: "neue-haas-unica", sans-serif;
  font-size: 13px;
  letter-spacing: 0.01em;
}

.session-outline-save-actions{
  position: sticky;
  bottom: 0;
  z-index: 2;
  width: 100%;
  max-width: none;
  margin: 16px auto 0;
  padding: 9px 9px calc(9px + env(safe-area-inset-bottom));
  border: 1px solid rgba(68, 189, 145, 0.2);
  background:
    linear-gradient(180deg, rgba(6, 24, 17, 0.94) 0%, rgba(0, 0, 0, 0.96) 100%);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.44);
  backdrop-filter: blur(18px);
  box-sizing: border-box;
}

.session-outline-save-actions .cardcontent{
  max-width: 452px;
  margin: 0 auto;
  padding: 0;
}

.session-outline-save-actions .biggreen{
  width: 100%;
  margin-top: 0;
}

.exercise-skip-confirm-overlay{
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.exercise-skip-confirm-backdrop{
  position: absolute;
  inset: 0;
  background: #000000d6;
}

.exercise-skip-confirm-close{
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
}

.exercise-skip-confirm-panel{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 452px;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.exercise-skip-confirm-copy{
  font-family: neue-haas-grotesk-display;
  font-size: 1.2rem;
  font-weight: 500;
  color: #ffffffdb;
  line-height: 1.2;
  text-align: center;
  margin-top: 5px;
  margin-bottom: 20px;
  padding: 0 25px;
}

.exercise-skip-confirm-exercise-name{
  font-weight: 600;
}

.exercise-skip-confirm-actions{
  margin-top: 4px;
  display: grid;
  gap: 0;
  padding: 0 25px;
}

.card.logger .exercisecontainer{
  cursor: pointer;
}

.exercisecontainer.exercisecontainer--disclosure{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.exercisecontainer.exercisecontainer--disclosure .exercisecontaineractions{
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.exercisecontainer.exercisecontainer--disclosure .exercisedisclosure{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  background: none !important;
  background-image: none !important;
}

.exercisecontainer.exercisecontainer--disclosure .exerciseediticon{
  display: block;
  width: 16px;
  height: 16px;
  opacity: .8;
  transition: opacity 160ms ease;
}

.exercisecontainer.exercisecontainer--disclosure:hover .exerciseediticon,
.exercisecontainer.exercisecontainer--disclosure:focus-visible .exerciseediticon{
  opacity: 1;
}

.exercisecontainer.exercisecontainer--disclosure .exercisecontainer-swapbutton{
  margin-left: 0;
  flex: 0 0 auto;
}

.exercisecontainer.exercisecontainer--disclosure .exercisecontainer-swapbutton:disabled:hover{
  background-image: url(/images/button-setlogger-swap.svg);
}

.exercisecontainer.exercisecontainer--history{
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.card.logger .exercisecontainer[role="button"]{
  display: inline-flex;
  width: auto;
  max-width: 100%;
  align-items: center;
  min-width: 0;
}

.card.logger .exercisecontainer[role="button"] .exercisename{
  flex: 0 1 auto;
  min-width: 0;
  max-width: calc(100% - 30px);
}

.setlogger-exercise-name{
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  white-space: nowrap;
}

.setlogger-exercise-name__text{
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: clip;
}

.setlogger-exercise-name__token-shell{
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.setlogger-exercise-name__token{
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
  margin: 0;
  font: inherit;
  line-height: 1;
  text-transform: none;
}

.setlogger-exercise-name__token:focus-visible{
  outline: 1px solid rgba(46, 255, 170, 0.66);
  outline-offset: 2px;
  border-radius: 2px;
}

.setlogger-exercise-name__tooltip{
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(4px);
  min-width: 160px;
  max-width: min(280px, 72vw);
  padding: 8px 10px;
  border: 1px solid rgba(68, 189, 145, 0.3);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.94);
  color: #ffffff;
  font-family: "neue-haas-unica", sans-serif;
  font-size: 12px;
  line-height: 1.4;
  text-transform: none;
  white-space: normal;
  text-align: left;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.42);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 120ms ease,
    transform 120ms ease;
  z-index: 4;
}

.setlogger-exercise-name__tooltip.is-visible{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.card.logger .exercisecontainer:focus-visible{
  outline: 1px solid #2effaa;
  outline-offset: 3px;
}

.exercisecontainer.exerciseswapper{
  cursor: pointer;
}

.card.exerciseswapper.is-swapping{
  background: #7fffcb !important;
  background-image: none !important;
  opacity: 1;
  animation: swap-card-pulse-opacity 900ms ease-in-out infinite;
}

.card.exerciseswapper.is-swapping .exercisename{
  color: #000;
  font-weight: 500;
}

.card.exerciseswapper.is-swapping .exercisedisclosure{
  background: none !important;
  background-image: none !important;
}

@keyframes swap-card-pulse-opacity{
  0%,
  100%{
    opacity: 0.56;
  }
  50%{
    opacity: 1;
  }
}

.swap-pending-label{
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}

.swap-pending-dots{
  display: inline-flex;
  min-width: 20px;
}

.swapexercise-section{
  display: grid;
  gap: 0;
  margin-top: 10px;
}

.swapexercise-section-header{
  width: 100%;
  max-width: 430px;
  margin: 0 auto 2px;
  padding: 0 20px 0 40px;
  box-sizing: content-box;
}

.swapexercise-section-title{
  margin: 16px 0 1px;
  color: #47b58a;
  font-family: transducer, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
  text-align: center;
}

.swapexercise-section-copy{
  margin: 0 0 10px;
  color: #8c8c8c;
  font-size: 0.8125rem;
  line-height: 1.35;
  text-align: left;
}

.swapexercise-filter-row{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
}

.swapexercise-filter-pill{
  appearance: none;
  border: none;
  background: #16392d;
  color: #ffffff94;
  border-radius: 999px;
  padding: 8px 11px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: neue-haas-unica, sans-serif;
  font-size: 13px;
  letter-spacing: 0;
  cursor: pointer;
}

.swapexercise-filter-pill.is-disabled{
  color: #ffffff66;
  background: #272e2b;
}

.swapexercise-filter-pill-glyph{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  font-size: 11px;
  line-height: 1;
}

.swapexercise-filter-pill:focus-visible{
  outline: 1px solid rgba(46, 255, 170, 0.65);
  outline-offset: 2px;
}

.swap-option-copy{
  display: inline;
  max-width: 100%;
}

.swap-option-title{
  color: inherit;
  min-width: 0;
}

.swap-option-meta{
  color: #24dd90;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  margin-left: 10px;
  font-size: 11px;
  font-weight: 500;
}

.swap-pending-dots .dot{
  opacity: 0;
  animation: swap-pending-dot 1s steps(1, end) infinite;
}

.swap-pending-dots .dot:nth-child(2){
  animation-delay: 0.2s;
}

.swap-pending-dots .dot:nth-child(3){
  animation-delay: 0.4s;
}

@keyframes swap-pending-dot{
  0%,
  20%{
    opacity: 0;
  }
  40%,
  80%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}

.train-transition-overlay{
  position: fixed;
  inset: 0;
  z-index: 2600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: #000;
}

.disclosuremenu{
  margin-top: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

button.disclosureback{
  appearance: none;
  border: 0;
  background-color: transparent;
  background-image: url(/images/disclosure-back.svg);
  background-size: 11px;
  background-repeat: no-repeat;
  background-position: center;
  width: 20px;
  height: 40px;
  margin: 0 20px 0 20px;
  padding: 0;
  cursor: pointer;
}

button.disclosureback:focus-visible{
  outline: 1px solid #2effaa;
  outline-offset: 3px;
}

.runner-swap-overlay-surface{
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.runner-swap-overlay-frame{
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.runner-swap-overlay-content{
  width: 100%;
  margin: 0;
  padding: 53px 0 calc(var(--tab-h, 72px) + env(safe-area-inset-bottom) + 194px);
  box-sizing: border-box;
}

.runner-swap-overlay-header{
  margin: 0 auto;
  max-width: 452px;
  padding: 53px 25px 7px;
  box-sizing: border-box;
  width: 100%;
}

.swapexercise-eyebrow{
  margin: 0 0 11px;
  font-family: "transducer-extended", sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  color: #3de8a9;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

h2.swapexercise{
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.02;
  color: #ffffff;
  text-transform: none;
  margin: 11px 0 12px;
}

.preview-swap-overlay.runner-swap-overlay .swapexercise-section{
  margin-top: 10px;
}

.preview-swap-overlay.runner-swap-overlay .swapexercise-section-header{
  width: 100%;
  max-width: 452px;
  margin: 0 auto 2px;
  padding: 0 25px;
  box-sizing: border-box;
}

.preview-swap-overlay.runner-swap-overlay .card.exerciseswapper{
  width: 100%;
}

.preview-swap-overlay.runner-swap-overlay .card.exerciseswapper .cardcontent{
  width: 100%;
  max-width: 452px;
  margin: 0 auto;
  padding-left: 25px;
  padding-right: 25px;
  box-sizing: border-box;
}

.runner-swap-overlay .preview-swap-overlay-footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
}

.runner-swap-overlay .preview-swap-overlay-footer-shell{
  display: block;
  padding: 9px;
  padding-bottom: calc(9px + env(safe-area-inset-bottom));
}

.runner-swap-overlay .preview-swap-overlay-cta{
  max-width: 452px;
}

.disclosureforward{
  width: 20px;
  height: 40px;
  display: none;
}

.exercise-details-overlay{
  position: fixed;
  inset: 0;
  z-index: 2600;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.exercise-details-backdrop{
  position: absolute;
  inset: 0;
  background: #000000d6;
}

.exercise-details-panel{
  --exercise-details-actions-h: 0px;
  --exercise-details-actions-gap: 16px;
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100svh;
  overflow: visible;
  display: flex;
  justify-content: center;
  background-image: radial-gradient(circle at top right, #1c1c1c 0%, #1c1c1c00 100%), radial-gradient(ellipse farthest-corner at 50% 100%, #001f12 0%, #000000 100%);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, 100% 100%;
  border-width: 1px;
  border-top-style: solid;
  border-bottom-style: solid;
  border-image: linear-gradient(to right, black, #224237, black) 1;
  padding: 53px 0 calc(var(--exercise-details-actions-h) + var(--exercise-details-actions-gap));
  margin: 0;
}

.exercise-details-content{
  width: 100%;
  max-width: 452px;
  padding: 0 25px;
  box-sizing: border-box;
}

.exercise-details-close{
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
}

.exercise-details-title{
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.02;
  color: #ffffff;
  text-transform: none;
  margin: 11px 0 28px;
}

.exercise-details-image-shell{
  margin: 0 -25px 24px;
  border: none;
  background:
    radial-gradient(circle at top left, rgba(61, 232, 169, 0.16), transparent 42%),
    linear-gradient(180deg, #0e1613 0%, #09100d 100%);
  overflow: hidden;
  box-shadow: none;
}

.exercise-details-image{
  display: block;
  width: 100%;
  height: auto;
}

.exercise-details-eyebrow{
  margin: 0 0 11px;
  font-family: "transducer-extended", sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  color: #3de8a9;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.exercise-details-description{
  margin: 0;
  font-family: neue-haas-unica, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.45;
  color: #ffffffc9;
  white-space: pre-line;
}

.exercise-details-description--reserved{
  height: 10.15rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  scrollbar-width: thin;
}

.exercise-details-description--loading{
  color: #ffffff8f;
}

.exercise-details-range-card{
  margin-top: 32px;
  border-width: 1px;
  border-top-style: solid;
  border-image: linear-gradient(to right, black, #224237, black) 1;
  padding-top: 23px;
}

.exercise-details-range-card h4.interstitial{
  margin-bottom: 0;
}

.exercise-details-rest-card{
  border-width: 1px;
  border-top-style: solid;
  border-image: linear-gradient(to right, black, #224237, black) 1;
    margin-top: 10px;
    padding-top: 19px;
}

.exercise-details-rest-card h4.interstitial{
  margin-bottom: 0;
}

.exercise-details-card-header{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.exercise-details-default{
  margin: 0;
  color: #93ddc0;
  font-family: "transducer", sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  white-space: nowrap;
}

.exercise-details-unavailable-card{
  margin-top: 30px;
  border-width: 1px;
  border-top-style: solid;
  border-image: linear-gradient(to right, black, #224237, black) 1;
  padding-top: 24px;
}

.exercise-details-unavailable-copy{
  margin: 6px 0 0;
  color: #ffffffbf;
  font-family: "neue-haas-unica", sans-serif;
  font-size: 0.875rem;
  line-height: 1.4;
}

.exercise-details-unavailable-grid{
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.exercise-details-unavailable-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid #1f5d4a;
  background: linear-gradient(180deg, #0d1713 0%, #08100d 100%);
}

.exercise-details-unavailable-load{
  color: #9cffe0;
  font-family: "transducer", sans-serif;
  font-size: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.exercise-details-unavailable-remove{
  appearance: none;
  border: 0;
  background: none;
  color: #74ffd1;
  cursor: pointer;
  font-family: "transducer-extended", sans-serif;
  font-size: 18px;
  line-height: 1;
  padding: 8px 2px;
}

.exercise-details-unavailable-remove:disabled{
  cursor: default;
  opacity: 0.55;
}

.exercise-details-unavailable-empty{
  margin: 14px 0 0;
  color: #93ddc0;
  font-family: "neue-haas-unica", sans-serif;
  font-size: 14px;
  line-height: 1.4;
}

.exercise-details-error{
  margin: 10px 0 0;
  color: #ff8080;
  font-family: "neue-haas-unica", sans-serif;
  font-size: 14px;
}

.exercise-details-actions{
  width: 100%;
  margin: 0;
  display: flex;
  position: fixed;
  flex-direction: column;
  gap: 8px;
  bottom: 0;
  left: 0;
  z-index: 10;
  padding: 9px 9px calc(9px + env(safe-area-inset-bottom));
  border: 1px solid rgba(68, 189, 145, 0.2);
  background:
    linear-gradient(180deg, rgba(6, 24, 17, 0.94) 0%, rgba(0, 0, 0, 0.96) 100%);
  box-shadow: none;
  backdrop-filter: blur(18px);
  box-sizing: border-box;
}

.exercise-details-actions .biggreen.interstitial,
.exercise-details-actions .bigalt.interstitial{
  width: 100%;
  margin-top: 0;
      max-width: 452px;
    align-self: center;
}

.exercise-details-share-button{
  width: 100%;
  max-width: 452px;
  align-self: center;
  min-height: 46px;
  border: 1px solid rgba(68, 189, 145, 0.34);
  border-radius: 4px;
  background: rgba(90, 255, 176, 0.12);
  color: #5affb0;
  cursor: pointer;
  font-family: "neue-haas-unica", sans-serif;
  font-size: 16px;
  font-weight: 700;
}

.exercise-details-share-button:is(:hover, :focus-visible){
  background: rgba(90, 255, 176, 0.2);
}

.exercise-details-share-button:disabled{
  cursor: default;
  opacity: 0.55;
}

/* SetLogger header marker states (runner + onboarding):
   completed markers stay faded, upcoming markers stay bright,
   and the active W/working-set number blinks. */
.setlogger-header .setlogger-header-set-marker.is-active{
  animation: sl-set-marker-blink 1s ease-in infinite;
}

@keyframes sl-set-marker-blink{
  from { opacity: 1; }
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  .setlogger-header .setlogger-header-set-marker.is-active{
    animation: none;
    opacity: 1;
  }
}