/* v87.2 – pass cards refresh
   Goal: make the active pass information cards feel like the new dashboard,
   with clearer hierarchy, softer glass panels, and more consistent NEXT Athlete OS styling. */

:root{
  --pass-panel-bg:linear-gradient(180deg, rgba(10,18,31,.96), rgba(6,11,21,.98));
  --pass-inner-glow:linear-gradient(135deg, rgba(34,230,255,.10), rgba(11,132,255,.04) 38%, rgba(0,0,0,0) 72%);
  --pass-line:rgba(123,180,255,.14);
}

/* Only affect the workout experience */
body.exercise-active .video-card,
body.exercise-active .info-card,
body.exercise-active .playlist-card,
body.exercise-active .timer-card,
body.exercise-active .coach-cues,
body.exercise-active .set-note,
body.exercise-active .next-preview,
body.exercise-active .exercise-reps,
body.exercise-active .superset-status{
  box-shadow:0 16px 42px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

body.exercise-active .video-card,
body.exercise-active .info-card,
body.exercise-active .playlist-card{
  border-color:var(--pass-line) !important;
  background:var(--pass-panel-bg) !important;
}

body.exercise-active .info-card{
  position:relative;
  overflow:hidden;
  border-radius:28px !important;
  gap:12px !important;
}
body.exercise-active .info-card::before{
  display:block !important;
  content:'';
  position:absolute; inset:0;
  background:var(--pass-inner-glow);
  pointer-events:none;
}
body.exercise-active .info-card > *{position:relative; z-index:1;}

/* top chips */
body.exercise-active .exercise-kicker{
  justify-content:flex-start !important;
  gap:8px !important;
}
body.exercise-active .exercise-kicker .tag{
  min-height:34px;
  padding:8px 12px !important;
  border-radius:999px !important;
  background:rgba(11,132,255,.11) !important;
  border:1px solid rgba(34,230,255,.22) !important;
  color:#dff8ff !important;
  box-shadow:none !important;
  font-size:12px !important;
  font-weight:900 !important;
  letter-spacing:.01em !important;
}
body.exercise-active .exercise-kicker .tag.orange{
  background:rgba(34,230,255,.14) !important;
  border-color:rgba(34,230,255,.32) !important;
  color:#f2fdff !important;
}

/* title */
body.exercise-active .exercise-name{
  text-align:left !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:unset !important;
  letter-spacing:-.06em !important;
  line-height:.96 !important;
  margin-top:2px !important;
  margin-bottom:2px !important;
  color:#ffffff !important;
  text-shadow:0 6px 24px rgba(0,0,0,.12);
}

/* reps/value card */
body.exercise-active .exercise-reps{
  min-height:84px !important;
  padding:16px 18px !important;
  border-radius:24px !important;
  border:1px solid rgba(170,205,255,.14) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03)),
    radial-gradient(circle at 75% 10%, rgba(34,230,255,.10), transparent 28%) !important;
}
body.exercise-active .rx-line{
  letter-spacing:-.055em !important;
  color:#ffffff !important;
  text-shadow:0 0 28px rgba(34,230,255,.07);
}

/* helper text card */
body.exercise-active .set-note{
  border-radius:22px !important;
  border:1px solid rgba(170,205,255,.12) !important;
  background:rgba(255,255,255,.04) !important;
  color:#d8e4ee !important;
  line-height:1.38 !important;
}

/* coach cues */
body.exercise-active .coach-cues{
  border-radius:24px !important;
  border:1px solid rgba(170,205,255,.12) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.03)),
    radial-gradient(circle at 15% 15%, rgba(34,230,255,.06), transparent 30%) !important;
  padding:16px 18px !important;
}
body.exercise-active .coach-cues small{
  color:#82e0ff !important;
  font-size:12px !important;
  letter-spacing:.16em !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
}
body.exercise-active .coach-cues ul{
  margin:8px 0 0 0 !important;
  padding-left:24px !important;
  color:#e7eef5 !important;
  line-height:1.34 !important;
}
body.exercise-active .coach-cues li::marker{color:#a4efff;}

/* next card */
body.exercise-active .next-preview{
  border-radius:24px !important;
  border:1px solid rgba(34,230,255,.18) !important;
  background:
    linear-gradient(180deg, rgba(34,230,255,.06), rgba(11,132,255,.06)),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)) !important;
  padding:16px 18px !important;
}
body.exercise-active .next-preview small{
  color:#9ff1ff !important;
  font-size:11px !important;
  letter-spacing:.16em !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
}
body.exercise-active .next-preview b,
body.exercise-active .next-preview .big,
body.exercise-active .next-preview{
  color:#f4fbff !important;
  font-weight:900 !important;
}

/* timer card should also feel on-brand */
body.exercise-active .timer-card{
  border-color:rgba(34,230,255,.18) !important;
  background:
    linear-gradient(180deg, rgba(34,230,255,.08), rgba(11,132,255,.06)),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)) !important;
  border-radius:24px !important;
}
body.exercise-active .timer-status{color:#a4efff !important;}

/* bottom controls: align them with rest of system */
body.exercise-active .pass-bottom-controls .ghost-btn,
body.exercise-active .pass-bottom-controls .main-btn{
  border-radius:22px !important;
  min-height:58px !important;
  font-weight:900 !important;
  box-shadow:0 14px 32px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
body.exercise-active .pass-bottom-controls .ghost-btn{
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.03)) !important;
  border:1px solid rgba(170,205,255,.14) !important;
  color:#d8e6f2 !important;
}
body.exercise-active .pass-bottom-controls .main-btn{
  background:linear-gradient(180deg,#4ea0ff,#287eff) !important;
  border:1px solid rgba(255,255,255,.12) !important;
}

/* compact mobile tuning */
@media (max-width: 900px){
  body.exercise-active .info-card{
    border-radius:24px !important;
    gap:10px !important;
  }
  body.exercise-active .exercise-kicker{
    gap:6px !important;
  }
  body.exercise-active .exercise-kicker .tag{
    min-height:30px !important;
    padding:6px 10px !important;
    font-size:11px !important;
  }
  body.exercise-active .exercise-name{
    font-size:clamp(28px,8.5vw,44px) !important;
  }
  body.exercise-active .exercise-reps{
    min-height:76px !important;
    padding:14px 14px !important;
    border-radius:20px !important;
  }
  body.exercise-active .rx-line{
    font-size:clamp(30px,10vw,58px) !important;
  }
  body.exercise-active .set-note,
  body.exercise-active .coach-cues,
  body.exercise-active .next-preview{
    border-radius:20px !important;
    padding:14px 14px !important;
  }
  body.exercise-active .coach-cues ul{
    font-size:14px !important;
    line-height:1.3 !important;
  }
}

/* very small screens */
@media (max-width: 430px){
  body.exercise-active .exercise-name{
    font-size:clamp(26px,8.1vw,36px) !important;
  }
  body.exercise-active .pass-bottom-controls .ghost-btn,
  body.exercise-active .pass-bottom-controls .main-btn{
    min-height:52px !important;
    border-radius:18px !important;
  }
}