/*
 * ============================================================
 *  GRAFT LEAGUE — WORKOUT PAGE STYLES
 *  workout.css
 *
 *  Page: morning-workout.html
 *  Depends on: style.css (must be loaded first)
 *
 *  This file contains only styles specific to the workout
 *  tracker page. Shared tokens, reset, buttons, footer,
 *  grain overlay and cursor all live in style.css.
 *
 *  Sections:
 *    1.  Overlay screens (nickname entry, PIN screen)
 *    2.  App header & stats bar
 *    3.  Day navigation tabs
 *    4.  Progress bar
 *    5.  Workout complete banner
 *    6.  Rest timer notice
 *    7.  Workout grid & exercise cards
 *    8.  Exercise card — how-to expandable panel
 *    9.  Leaderboard link button
 *    10. Mobile overrides
 * ============================================================
 */


/* ============================================================
   1. OVERLAY SCREENS
   Full-screen overlays that appear before the main app loads.
   Both use position:fixed so they sit above everything.
   ============================================================ */

/* --- Nickname entry screen --- */
#nickScreen {
  position:       fixed;
  inset:          0;
  background:     var(--bg);
  z-index:        500;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  padding:        2rem;
  text-align:     center;
  animation:      fade-in 0.4s ease;
}

/* Eyebrow label above heading on overlay screens */
#nickScreen .eyebrow {
  color: var(--red);
}

/* Large display heading on the nickname screen */
#nickScreen h2 {
  font-family:   var(--font-display);
  font-size:     clamp(3rem, 10vw, 5.5rem);
  line-height:   0.9;
  margin-bottom: 1.25rem;
  color:         var(--ink);
}

/* Accent word in the heading */
#nickScreen h2 span { color: var(--red); }

/* Instructional paragraph */
#nickScreen p {
  color:      var(--muted);
  font-size:  0.85rem;
  max-width:  300px;
  line-height: 1.6;
  margin-bottom: 2rem;
}

/* Nickname entry form — stacked column.
   overflow:hidden is the hard stop preventing any child escaping. */
.nick-form {
  display:        flex;
  flex-direction: column;
  gap:            0.65rem;
  width:          100%;
  max-width:      300px;
  box-sizing:     border-box;
  align-self:     center;
  overflow:       hidden;
}

/* Text input — box-sizing:border-box absorbs padding inward.
   min-width:0 prevents flex children from overflowing. */
.nick-input {
  background:    var(--surface);
  border:        2px solid var(--border);
  color:         var(--text);
  font-size:     1rem;
  padding:       0.85rem 1.1rem;
  border-radius: 4px;
  outline:       none;
  transition:    border-color 0.2s;
  text-align:    center;
  letter-spacing: 0.05em;
  width:         100%;
  max-width:     100%;
  box-sizing:    border-box;
  min-width:     0;
}

.nick-input:focus        { border-color: var(--red); }
.nick-input::placeholder { color: var(--muted); }

/* Submit button — same full-width constraints */
.nick-btn {
  background:    var(--red);
  color:         #fff;
  border:        none;
  font-family:   var(--font-display);
  font-size:     1.3rem;
  letter-spacing: 0.08em;
  padding:       0.85rem;
  border-radius: 4px;
  cursor:        pointer;
  transition:    background 0.2s, transform 0.1s;
  width:         100%;
  max-width:     100%;
  box-sizing:    border-box;
}

.nick-btn:hover  { background: var(--ink); }
.nick-btn:active { transform: scale(0.98); }

/* Returning user chip list */
.existing-users {
  margin-top: 2rem;
  width:      100%;
  max-width:  300px;
}

.existing-label {
  font-size:       0.65rem;
  color:           var(--muted);
  text-transform:  uppercase;
  letter-spacing:  0.2em;
  margin-bottom:   0.65rem;
}

.user-chips {
  display:         flex;
  flex-wrap:       wrap;
  gap:             0.4rem;
  justify-content: center;
}

/* Individual returning-user chip */
.user-chip {
  background:    var(--surface);
  border:        1px solid var(--border);
  color:         var(--text);
  font-size:     0.8rem;
  padding:       0.4rem 1rem;
  border-radius: 100px;
  cursor:        pointer;
  transition:    all 0.2s;
}

.user-chip:hover {
  border-color: var(--red);
  color:        var(--red);
}


/* --- PIN screen --- */
#pinScreen {
  position:        fixed;
  inset:           0;
  background:      var(--bg);
  z-index:         600;
  display:         none;
  flex-direction:  column;
  align-items:     stretch;   /* Same fix as authScreen — prevents Firefox overflow */
  justify-content: flex-start;
  padding:         3rem 1.5rem 2rem;
  text-align:      center;
  animation:       fade-in 0.3s ease;
  overflow-y:      auto;
  overflow-x:      hidden;
  width:           100%;
  max-width:       100vw;
  box-sizing:      border-box;
  min-height:      100svh;
  min-height:      -webkit-fill-available;
}

/* Centre all PIN screen children within the stretched column */
#pinScreen > * {
  margin-left:  auto;
  margin-right: auto;
  max-width:    300px;
  width:        100%;
  box-sizing:   border-box;
}

/* PIN pad is slightly wider than inputs — allow it */
#pinScreen .pin-pad {
  max-width: 240px;
}

#pinScreen.show { display: flex; }

#pinScreen h2 {
  font-family:   var(--font-display);
  font-size:     clamp(2rem, 8vw, 4rem);
  line-height:   0.9;
  margin-bottom: 0.5rem;
  color:         var(--ink);
}

#pinScreen h2 span { color: var(--red); }

/* Subtitle under PIN heading */
.pin-sub {
  color:         var(--muted);
  font-size:     0.82rem;
  margin-bottom: 1.75rem;
  max-width:     280px;
  line-height:   1.5;
}

/* Row of 4 PIN indicator dots */
.pin-dots {
  display:         flex;
  gap:             0.75rem;
  justify-content: center;
  margin-bottom:   1.5rem;
}

/* Individual dot — hollow until filled */
.pin-dot {
  width:         14px;
  height:        14px;
  border-radius: 50%;
  border:        2px solid var(--border);
  background:    transparent;
  transition:    all 0.15s;
}

.pin-dot.filled { background: var(--red);   border-color: var(--red); }
.pin-dot.error  { background: #cc3333; border-color: #cc3333; }

/* 3-column numpad grid */
.pin-pad {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   0.6rem;
  width:                 100%;
  max-width:             240px;
}

/* Individual numpad key */
.pin-key {
  background:    var(--surface);
  border:        1px solid var(--border);
  color:         var(--ink);
  font-family:   var(--font-display);
  font-size:     1.5rem;
  padding:       0.9rem;
  border-radius: 4px;
  cursor:        pointer;
  transition:    all 0.15s;
  letter-spacing: 0.05em;
}

.pin-key:hover  { background: var(--paper); border-color: var(--red); }
.pin-key:active { transform: scale(0.93); }

/* Delete key — smaller, muted */
.pin-key.del { font-size: 1rem; color: var(--muted); }
.pin-key.del:hover { color: #cc3333; }

/* Error message below the dots */
.pin-error {
  color:      #cc3333;
  font-size:  0.75rem;
  margin-top: 0.5rem;
  min-height: 1rem;
}

/* Back text link */
.pin-back {
  margin-top:     1.25rem;
  background:     transparent;
  border:         none;
  color:          var(--muted);
  font-size:      0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor:         pointer;
  text-decoration: underline;
  transition:     color 0.15s;
}

.pin-back:hover { color: var(--ink); }


/* ============================================================
   2. APP HEADER & STATS BAR
   Visible once a user is logged in. Contains the logo,
   user badge (avatar + name), and key stat numbers.
   ============================================================ */

header {
  padding:       2rem 2rem 1.5rem;
  border-bottom: 2px solid var(--ink);
  background:    var(--bg);
}

/* Two-column row: logo left, user badge right */
.header-top {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-start;
  flex-wrap:       wrap;
  gap:             1rem;
}

/* "Graft League Daily" eyebrow above main heading */
.tagline {
  font-size:       0.7rem;
  letter-spacing:  0.3em;
  color:           var(--red);
  text-transform:  uppercase;
  margin-bottom:   0.5rem;
}

/* Main page heading */
h1 {
  font-family: var(--font-display);
  font-size:   clamp(2.5rem, 6vw, 4.5rem);
  line-height: 0.9;
  color:       var(--ink);
}

/* Red accent on "LEAGUE" */
h1 span { color: var(--red); }

/* User avatar + name pill — tappable to switch user */
.user-badge {
  display:       flex;
  align-items:   center;
  gap:           0.55rem;
  background:    var(--surface);
  border:        2px solid var(--border);
  border-radius: 100px;
  padding:       0.45rem 0.9rem 0.45rem 0.6rem;
  cursor:        pointer;
  transition:    border-color 0.2s;
  font-size:     0.78rem;
  color:         var(--text);
  white-space:   nowrap;
  flex-shrink:   0;
}

.user-badge:hover { border-color: var(--red); }

/* Small circular avatar with user initials */
.user-avatar {
  width:            26px;
  height:           26px;
  border-radius:    50%;
  background:       var(--red);
  color:            #fff;
  font-weight:      700;
  font-size:        0.7rem;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  flex-shrink:      0;
}

/* Row of key stats below the heading */
.stats-bar {
  display:    flex;
  gap:        2rem;
  margin-top: 1.25rem;
  flex-wrap:  wrap;
}

/* Individual stat — big number + small label */
.stat-num {
  font-family: var(--font-display);
  font-size:   1.8rem;
  color:       var(--red);
  line-height: 1;
}

.stat-label {
  font-size:       0.62rem;
  color:           var(--muted);
  text-transform:  uppercase;
  letter-spacing:  0.12em;
}


/* ============================================================
   3. DAY NAVIGATION TABS
   Pill buttons to switch between Monday–Sunday.
   Active day is highlighted. Streak dot appears on days
   where the user has already logged a workout.
   ============================================================ */

.day-nav {
  display:         flex;
  justify-content: center;
  gap:             0.45rem;
  padding:         1.5rem 1rem 0.75rem;
  flex-wrap:       wrap;
}

/* Individual day pill */
.day-btn {
  background:    var(--surface);
  border:        2px solid var(--border);
  color:         var(--muted);
  font-size:     0.7rem;
  font-weight:   500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding:       0.5rem 0.9rem;
  cursor:        pointer;
  border-radius: 100px;
  transition:    all 0.2s;
  position:      relative;
}

.day-btn:hover { border-color: var(--red); color: var(--red); }

/* Active / today state */
.day-btn.active {
  background:  var(--red);
  border-color: var(--red);
  color:        #fff;
  font-weight:  700;
}

/* Small teal dot in corner — "you've grafted this day" */
.streak-dot {
  position:      absolute;
  top:           -3px;
  right:         -3px;
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    var(--yellow);
  border:        2px solid var(--bg);
}

/* Day focus label e.g. "Upper Body Push" */
.day-focus {
  text-align:    center;
  padding:       0.4rem 1rem 1.25rem;
  color:         var(--muted);
  font-size:     0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.day-focus strong { color: var(--red); }


/* ============================================================
   4. PROGRESS BAR
   Thin bar showing today's exercise completion.
   Fills left-to-right as exercises are ticked off.
   ============================================================ */

.progress-wrap {
  max-width: 1100px;
  margin:    0 auto;
  padding:   0 1.5rem 1.25rem;
}

/* Labels either side of the bar */
.progress-label {
  display:         flex;
  justify-content: space-between;
  font-size:       0.7rem;
  color:           var(--muted);
  text-transform:  uppercase;
  letter-spacing:  0.1em;
  margin-bottom:   0.5rem;
}

/* Grey track */
.progress-bar-bg {
  height:        4px;
  background:    var(--surface);
  border-radius: 2px;
  overflow:      hidden;
  border:        1px solid var(--border);
}

/* Red fill — width set by JS */
.progress-bar-fill {
  height:        100%;
  background:    var(--red);
  border-radius: 2px;
  transition:    width 0.4s ease;
}


/* ============================================================
   5. WORKOUT COMPLETE BANNER
   Hidden by default. Shown (via .show) when all exercises
   are ticked off for the day.
   ============================================================ */

.complete-banner {
  display:    none;
  text-align: center;
  padding:    1.4rem;
  margin:     0 1.5rem 1.4rem;
  border:     2px solid var(--red);
  border-radius: 4px;
  background: rgba(230, 51, 35, 0.05);
}

.complete-banner.show {
  display:   block;
  animation: fade-in 0.4s ease;
}

/* Heading inside the banner */
.cb-title {
  font-family:   var(--font-display);
  font-size:     2rem;
  color:         var(--red);
  letter-spacing: 0.05em;
}

.complete-banner p {
  font-size:  0.78rem;
  color:      var(--muted);
  margin-top: 0.35rem;
}


/* ============================================================
   6. REST TIMER NOTICE
   Static info strip between the progress bar and the grid.
   Reminds users to take rest between exercises.
   ============================================================ */

.rest-timer {
  text-align:     center;
  padding:        0.8rem;
  background:     var(--surface);
  border-top:     1px solid var(--border);
  border-bottom:  1px solid var(--border);
  margin-bottom:  1.25rem;
}

.rest-timer p {
  font-size:      0.62rem;
  color:          var(--muted);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom:  0.2rem;
}

/* The rest time value — e.g. "30–45 seconds" */
.rest-info {
  font-family:   var(--font-display);
  font-size:     0.95rem;
  color:         var(--red);
  letter-spacing: 0.1em;
}


/* ============================================================
   7. WORKOUT GRID & EXERCISE CARDS
   Responsive grid of cards, one per exercise.
   Cards go slightly muted + gain a red checkmark when done.
   ============================================================ */

/* Responsive grid — fills available width, min 285px columns */
.workout-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
  gap:                   1.1rem;
  padding:               0 1.5rem 2rem;
  max-width:             1100px;
  margin:                0 auto;
}

/* Individual exercise card */
.exercise-card {
  background:    var(--surface);
  border:        2px solid var(--border);
  border-radius: 4px;
  overflow:      hidden;
  transition:    border-color 0.2s, box-shadow 0.2s;
  position:      relative;
}

.exercise-card:hover {
  border-color: var(--red);
  box-shadow:   3px 3px 0 var(--red); /* Red shadow on dark looks great */
}

/* Completed state — slightly dimmed, red border */
.exercise-card.done {
  opacity:      0.65;
  border-color: var(--red);
}

/* Red checkmark badge in top-right corner when done */
.exercise-card.done::after {
  content:         '✓';
  position:        absolute;
  top:             10px;
  right:           10px;
  background:      var(--red);
  color:           #fff;
  font-weight:     700;
  font-size:       0.72rem;
  width:           23px;
  height:          23px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  z-index:         10;
}

/* ----------------------------------------------------------
   Exercise card header image (external URL)
   If no image is supplied the JS renders .card-header-block
   instead (see below).
   ---------------------------------------------------------- */
.card-image {
  width:          100%;
  height:         168px;
  object-fit:     cover;
  object-position: center;
  display:        block;
}

/* ----------------------------------------------------------
   Typographic header block — replaces SVG illustrations.
   Shows the exercise name large on a brand-coloured block.
   Replaces the previous stick-figure SVG placeholders.
   ---------------------------------------------------------- */
.card-header-block {
  width:            100%;
  height:           168px;
  background:       #1a1a1a; /* Slightly lifted from page bg so cards are visible */
  display:          flex;
  flex-direction:   column;
  align-items:      flex-start;
  justify-content:  flex-end;
  padding:          1rem 1.1rem 0.75rem;
  position:         relative;
  overflow:         hidden;
}

/* Large decorative number in the background */
.card-header-block .card-bg-num {
  position:    absolute;
  top:         -0.2rem;
  right:       0.5rem;
  font-family: var(--font-display);
  font-size:   7rem;
  line-height: 1;
  color:       rgba(255,255,255,0.07);
  pointer-events: none;
  user-select: none;
}

/* Muscle group label above the exercise name */
.card-header-block .card-muscle {
  font-size:       0.6rem;
  letter-spacing:  0.2em;
  text-transform:  uppercase;
  color:           var(--red);
  margin-bottom:   0.3rem;
  font-weight:     500;
}

/* Exercise name displayed large */
.card-header-block .card-header-name {
  font-family:   var(--font-display);
  font-size:     1.6rem;
  line-height:   0.95;
  color:         #ffffff; /* Always white on dark card header */
  letter-spacing: 0.02em;
}

/* Accent bar along the bottom of the header block */
.card-header-block::after {
  content:    '';
  position:   absolute;
  bottom:     0;
  left:       0;
  right:      0;
  height:     3px;
  background: var(--red);
}

/* Exercise emoji — large and positioned top-right of the header block */
.card-emoji {
  position:    absolute;
  top:         0.75rem;
  right:       0.85rem;
  font-size:   2.8rem;
  line-height: 1;
  opacity:     0.9;
  user-select: none;
  filter:      drop-shadow(0 2px 4px rgba(0,0,0,0.4));
  transition:  transform 0.2s, opacity 0.2s;
}

/* Slight pop on card hover */
.exercise-card:hover .card-emoji {
  transform: scale(1.12) rotate(-5deg);
  opacity:   1;
}


/* --- Card body (below the image/header) --- */
.card-body { padding: 1.05rem; }

/* "Exercise 1 of 5" style label */
.exercise-order {
  font-family:    var(--font-display);
  font-size:      0.75rem;
  color:          var(--muted);
  letter-spacing: 0.1em;
  margin-bottom:  0.2rem;
}

/* Exercise name in the card body */
.exercise-name {
  font-family:   var(--font-display);
  font-size:     1.45rem;
  line-height:   1;
  color:         var(--text);
  margin-bottom: 0.5rem;
}

/* Row of set/muscle/rest pills */
.exercise-sets {
  display:   flex;
  gap:       0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}


/* ============================================================
   8. HOW-TO EXPANDABLE PANEL
   Collapsible section below the exercise summary.
   Reveals step-by-step instructions, feel cues, avoid tip.
   ============================================================ */

/* Toggle button to show/hide the panel */
.how-to-toggle {
  width:          100%;
  margin-top:     0.65rem;
  padding:        0.5rem 0.75rem;
  background:     transparent;
  border:         2px solid var(--border);
  color:          var(--muted);
  font-size:      0.7rem;
  font-weight:    500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor:         pointer;
  border-radius:  4px;
  transition:     all 0.2s;
  display:        flex;
  align-items:    center;
  justify-content: space-between;
}

.how-to-toggle:hover {
  border-color: var(--red);
  color:        var(--red);
  background:   rgba(230, 51, 35, 0.04);
}

/* Arrow icon that rotates when panel opens */
.toggle-arrow {
  transition:  transform 0.25s;
  font-style:  normal;
  font-size:   0.8rem;
}

.toggle-arrow.open { transform: rotate(180deg); }

/* Sliding panel — max-height animated via JS class toggle */
.how-to-panel {
  max-height: 0;
  overflow:   hidden;
  transition: max-height 0.35s ease;
}

.how-to-panel.open { max-height: 600px; }

/* Inner padding inside the open panel */
.how-to-inner {
  border-top:  2px solid var(--border);
  margin-top:  0.65rem;
  padding-top: 0.75rem;
}

/* Section label: "How to do it" etc. */
.how-to-label {
  font-size:      0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--red);
  margin-bottom:  0.6rem;
  font-weight:    500;
}

/* Numbered steps list */
.steps-list {
  list-style:    none;
  margin-bottom: 0.85rem;
}

.steps-list li {
  display:       flex;
  gap:           0.65rem;
  padding:       0.45rem 0;
  border-bottom: 1px solid var(--border);
  font-size:     0.78rem;
  line-height:   1.5;
  color:         var(--text);
}

.steps-list li:last-child { border-bottom: none; }

/* Numbered badge on each step */
.step-num-badge {
  flex-shrink:     0;
  width:           20px;
  height:          20px;
  border-radius:   50%;
  background:      var(--red);
  color:           #fff;
  font-weight:     700;
  font-size:       0.62rem;
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin-top:      1px;
}

/* Sub-labels: "What you should feel", "Common mistake" */
.how-to-sub {
  font-size:      0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--muted);
  margin-bottom:  0.4rem;
  margin-top:     0.65rem;
  font-weight:    500;
}

/* Feel cue — italic, muted */
.feel-text {
  font-size:   0.75rem;
  color:       var(--muted);
  line-height: 1.5;
  font-style:  italic;
}

/* Avoid tip — warm warning colour */
.avoid-text {
  font-size:   0.75rem;
  color:       #b83b2a;
  line-height: 1.5;
}

/* "Mark as done" button at the bottom of each card */
.done-btn {
  width:          100%;
  margin-top:     0.8rem;
  padding:        0.52rem;
  background:     transparent;
  border:         2px solid var(--border);
  color:          var(--muted);
  font-size:      0.7rem;
  font-weight:    500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor:         pointer;
  border-radius:  4px;
  transition:     all 0.2s;
}

.done-btn:hover { border-color: var(--red); color: var(--red); }

/* Done state — button turns red-tinted */
.exercise-card.done .done-btn {
  background:   rgba(230, 51, 35, 0.06);
  border-color: var(--red);
  color:        var(--red);
}


/* ============================================================
   9. LEADERBOARD LINK BUTTON
   Full-width centred link at the bottom of the page.
   ============================================================ */

.lb-link {
  text-align: center;
  padding:    0 1.5rem 2.5rem;
}

/* The link itself — pill outline style */
.lb-btn {
  display:        inline-block;
  background:     transparent;
  border:         2px solid var(--border);
  color:          var(--muted);
  font-size:      0.72rem;
  font-weight:    500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding:        0.65rem 1.5rem;
  border-radius:  100px;
  cursor:         pointer;
  text-decoration: none;
  transition:     all 0.2s;
}

.lb-btn:hover { border-color: var(--red); color: var(--red); }


/* ============================================================
   10. MOBILE OVERRIDES (workout page)
   ============================================================ */

@media (max-width: 600px) {
  /* Single-column grid on small screens */
  .workout-grid { grid-template-columns: 1fr; padding: 0 1rem 2rem; }
  header        { padding: 1.5rem 1rem 1.25rem; }
  .progress-wrap { padding: 0 1rem 1.25rem; }
  .complete-banner { margin: 0 1rem 1.25rem; }
  .lb-link      { padding: 0 1rem 2rem; }

  /* Hard stop on horizontal overflow — applies to auth + pin screens */
  #authScreen,
  #pinScreen {
    padding-left:  1.25rem;
    padding-right: 1.25rem;
  }

  /* Constrain all form elements inside auth screen on small screens */
  #authScreen .nick-form,
  #authScreen .auth-tabs,
  #authScreen h2 {
    max-width: 100%;
    width:     100%;
  }
}


/* ============================================================
   AUTH SCREEN ADDITIONS
   New styles for the register/login tab UI.
   The base overlay styles (#nickScreen → now #authScreen)
   are already defined above — these add the tab switcher,
   error messages, and small print text.
   ============================================================ */

/* Auth screen — full viewport overlay.
   Key mobile rules:
   - width/max-width lock it to the viewport
   - overflow-x:hidden hard-stops any bleed
   - align-items:stretch forces children to fill the column
     width rather than sizing to their own content, which
     was causing the rightward overflow in Firefox mobile.
   - All children then centre themselves via text-align + margin:auto */
#authScreen {
  position:        fixed;
  inset:           0;
  background:      var(--bg);
  z-index:         500;
  display:         none;
  flex-direction:  column;
  align-items:     stretch;   /* Children fill column width — no overflow */
  justify-content: flex-start;
  padding:         3rem 1.5rem 2rem;
  text-align:      center;
  animation:       fade-in 0.4s ease;
  overflow-y:      auto;
  overflow-x:      hidden;
  width:           100%;
  max-width:       100vw;     /* Hard cap at viewport width */
  box-sizing:      border-box;
  min-height:      100svh;
  min-height:      -webkit-fill-available;
}

/* All direct children of auth screen: centre themselves within
   the stretched column using margin:auto */
#authScreen > *,
#authScreen .nick-form,
#authScreen .auth-tabs,
#authScreen .existing-users {
  width:      100%;
  max-width:  300px;
  margin-left:  auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Heading is wider than 300px — let it breathe but still cap it */
#authScreen h2 {
  max-width:  100%;
  margin-left:  auto;
  margin-right: auto;
}

#authScreen .eyebrow { color: var(--red); }

#authScreen h2 {
  font-family:   var(--font-display);
  /* Smaller clamp so it never overflows on narrow screens */
  font-size:     clamp(2.5rem, 8vw, 5rem);
  line-height:   0.9;
  margin-bottom: 1.25rem;
  color:         var(--ink);
  width:         100%;
  max-width:     300px;
}

#authScreen h2 span { color: var(--red); }

/* Tab switcher row: "New here" / "Log in"
   box-sizing + max-width:100% prevents bleed on narrow screens. */
.auth-tabs {
  display:       flex;
  gap:           0;
  margin-bottom: 1.5rem;
  border:        2px solid var(--border);
  border-radius: 4px;
  overflow:      hidden;
  width:         100%;
  max-width:     300px;
  box-sizing:    border-box;
}

/* Individual tab button */
.auth-tab {
  flex:           1;
  background:     var(--surface);
  border:         none;
  color:          var(--muted);
  font-size:      0.72rem;
  font-weight:    500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding:        0.65rem;
  cursor:         pointer;
  transition:     all 0.15s;
}

/* Active tab */
.auth-tab.active {
  background: var(--red);
  color:      #fff;
  font-weight: 700;
}

/* Inline error message below each input */
.auth-error {
  font-size:   0.72rem;
  color:       #b83b2a;
  min-height:  1rem;
  margin-top:  -0.3rem;
  margin-bottom: 0.2rem;
  text-align:  left;
  width:       100%;
  max-width:   300px;
}

/* Small print below the register form */
.auth-small {
  font-size:   0.65rem;
  color:       var(--muted);
  max-width:   260px;
  line-height: 1.5;
  margin-top:  0.5rem;
}


/* ============================================================
   SQUAD PANEL
   Sits below the leaderboard link, above the footer.
   Contains three sub-views managed by JS:
     squadNone   — no squad, create/join options
     squadCreate — name input + validation
     squadJoin   — invite code input
     squadActive — member leaderboard + invite code display
   ============================================================ */

.squad-panel {
  max-width:  680px;
  margin:     0 auto;
  padding:    0 1.5rem 2rem;
}

/* Section divider line above the panel */
.squad-panel::before {
  content:      '';
  display:      block;
  height:       2px;
  background:   var(--border);
  margin-bottom: 1.5rem;
}

/* ── No-squad state ─────────────────────────────────────────── */

.squad-none {
  text-align: center;
  padding:    1.5rem 0;
}

.squad-none-title {
  font-family:   var(--font-display);
  font-size:     1.4rem;
  color:         var(--ink);
  margin-bottom: 0.4rem;
}

.squad-none-desc {
  font-size:     0.82rem;
  color:         var(--muted);
  margin-bottom: 1.25rem;
}

/* Two-button row */
.squad-actions {
  display:   flex;
  gap:       0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Shared form wrapper ────────────────────────────────────── */

.squad-form-wrap {
  max-width:  320px;
  margin:     0 auto;
  text-align: center;
  padding:    1rem 0;
}

.squad-form-title {
  font-family:   var(--font-display);
  font-size:     1.3rem;
  color:         var(--ink);
  margin-bottom: 1rem;
}

/* Squad name / invite code input */
.squad-input {
  width:          100%;
  background:     var(--surface);
  border:         2px solid var(--border);
  color:          var(--text);
  font-size:      1rem;
  padding:        0.85rem 1.1rem;
  border-radius:  4px;
  outline:        none;
  transition:     border-color 0.2s;
  text-align:     center;
  letter-spacing: 0.05em;
  box-sizing:     border-box;
  margin-bottom:  0.5rem;
}

.squad-input:focus { border-color: var(--red); }

/* Invite code input — larger tracking for readability */
.squad-code-input {
  font-family:    var(--font-display);
  font-size:      1.8rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

/* Live feedback under name input */
.squad-name-feedback {
  font-size:     0.72rem;
  min-height:    1rem;
  margin-bottom: 0.5rem;
  text-align:    left;
}

.squad-name-feedback.ok  { color: var(--green); }
.squad-name-feedback.err { color: #b83b2a; }

/* Join feedback */
.squad-join-feedback {
  font-size:     0.72rem;
  color:         #b83b2a;
  min-height:    1rem;
  margin-bottom: 0.5rem;
}

/* ── Buttons ────────────────────────────────────────────────── */

/* Primary squad action button — solid red */
.squad-btn-primary {
  width:          100%;
  background:     var(--red);
  color:          #fff;
  border:         none;
  font-family:    var(--font-display);
  font-size:      1.15rem;
  letter-spacing: 0.08em;
  padding:        0.8rem;
  border-radius:  4px;
  cursor:         pointer;
  transition:     background 0.15s, transform 0.1s;
  margin-bottom:  0.5rem;
}

.squad-btn-primary:hover    { background: var(--ink); }
.squad-btn-primary:disabled { background: var(--border); cursor: not-allowed; }

/* Secondary outline button */
.squad-btn-secondary {
  background:     transparent;
  color:          var(--muted);
  border:         2px solid var(--border);
  font-size:      0.75rem;
  font-weight:    500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding:        0.65rem 1.25rem;
  border-radius:  4px;
  cursor:         pointer;
  transition:     all 0.15s;
}

.squad-btn-secondary:hover { border-color: var(--red); color: var(--red); }

/* Text-only cancel/back link */
.squad-btn-link {
  background:     transparent;
  border:         none;
  color:          var(--muted);
  font-size:      0.72rem;
  text-decoration: underline;
  cursor:         pointer;
  padding:        0.5rem;
  transition:     color 0.15s;
}

.squad-btn-link:hover { color: var(--ink); }

/* Leave squad — small destructive link at the bottom */
.squad-btn-leave {
  display:        block;
  width:          100%;
  background:     transparent;
  border:         1px solid var(--border);
  color:          var(--muted);
  font-size:      0.7rem;
  font-weight:    500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding:        0.55rem;
  border-radius:  4px;
  cursor:         pointer;
  margin-top:     1rem;
  transition:     all 0.15s;
}

.squad-btn-leave:hover { border-color: #b83b2a; color: #b83b2a; }

/* ── Active squad header ────────────────────────────────────── */

.squad-header {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-start;
  margin-bottom:   1.25rem;
  gap:             1rem;
  flex-wrap:       wrap;
}

.squad-eyebrow {
  font-size:       0.65rem;
  letter-spacing:  0.2em;
  text-transform:  uppercase;
  color:           var(--red);
  margin-bottom:   0.25rem;
}

.squad-name {
  font-family:  var(--font-display);
  font-size:    1.6rem;
  line-height:  1;
  color:        var(--ink);
}

/* Invite code display — tappable to copy */
.squad-invite-wrap { text-align: right; }

.squad-invite-label {
  font-size:      0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--muted);
  margin-bottom:  0.25rem;
}

.squad-invite-code {
  font-family:    var(--font-display);
  font-size:      1.6rem;
  letter-spacing: 0.2em;
  color:          var(--red);
  cursor:         pointer;
  transition:     opacity 0.15s;
}

.squad-invite-code:hover { opacity: 0.7; }

.squad-invite-hint {
  font-size:  0.62rem;
  color:      var(--muted);
  margin-top: 0.15rem;
}

/* ── Squad member leaderboard ──────────────────────────────── */

.squad-lb {
  border:        2px solid var(--border);
  border-radius: 4px;
  overflow:      hidden;
}

.squad-loading {
  text-align:  center;
  padding:     2rem;
  font-size:   0.82rem;
  color:       var(--muted);
}

/* Individual member row */
.squad-lb-row {
  display:       flex;
  align-items:   center;
  gap:           0.65rem;
  padding:       0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  transition:    background 0.15s;
}

.squad-lb-row:last-child { border-bottom: none; }

/* Highlight the current user's row */
.squad-lb-row.you {
  background:    rgba(230, 51, 35, 0.04);
  border-left:   3px solid var(--red);
}

.squad-lb-rank {
  font-family: var(--font-display);
  font-size:   1.1rem;
  color:       var(--muted);
  width:       28px;
  text-align:  center;
  flex-shrink: 0;
}

/* Small circular avatar */
.squad-lb-avatar {
  width:           30px;
  height:          30px;
  border-radius:   50%;
  background:      var(--red);
  color:           #fff;
  font-family:     var(--font-display);
  font-size:       0.75rem;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

.squad-lb-name {
  flex:        1;
  font-size:   0.88rem;
  font-weight: 500;
  color:       var(--ink);
}

/* "you" badge */
.you-tag {
  font-size:     0.6rem;
  color:         var(--red);
  background:    rgba(230, 51, 35, 0.08);
  border:        1px solid rgba(230, 51, 35, 0.2);
  border-radius: 100px;
  padding:       0.1rem 0.45rem;
  margin-left:   0.35rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.squad-lb-stats {
  text-align: right;
}

.squad-lb-score {
  font-family: var(--font-display);
  font-size:   1.3rem;
  color:       var(--red);
  line-height: 1;
  display:     block;
}

.squad-lb-stat-label {
  font-size:   0.6rem;
  color:       var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.squad-lb-streak {
  font-size:   0.85rem;
  color:       var(--muted);
  min-width:   36px;
  text-align:  right;
  flex-shrink: 0;
}

/* ── Mobile ────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .squad-panel    { padding: 0 1rem 2rem; }
  .squad-actions  { flex-direction: column; align-items: center; }
  .squad-btn-secondary { width: 100%; text-align: center; }
}


/* ── Squad rename ───────────────────────────────────────────── */

/* Rename form — slides in below the member leaderboard */
.squad-rename-wrap {
  margin-top:  1rem;
  padding-top: 1rem;
  border-top:  1px solid var(--border);
}

/* Smaller input than the create form — inline feel */
.squad-rename-input {
  font-size: 0.95rem;
  padding:   0.7rem 1rem;
}

/* Row of save + cancel */
.squad-rename-actions {
  display:     flex;
  gap:         0.75rem;
  align-items: center;
  margin-top:  0.25rem;
}

.squad-rename-actions .squad-btn-primary {
  flex:          1;
  font-size:     0.95rem;
  padding:       0.65rem;
  margin-bottom: 0;
}

/* Owner actions area — sits between lb and leave button */
.squad-owner-actions {
  margin-top: 0.75rem;
  text-align: center;
}

/* Owner badge on member row — subtle, doesn't compete with you-tag */
.owner-tag {
  font-size:      0.6rem;
  color:          var(--muted);
  background:     var(--surface);
  border:         1px solid var(--border);
  border-radius:  100px;
  padding:        0.1rem 0.45rem;
  margin-left:    0.35rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* ── Known device quick login ───────────────────────────────── */

/* "Welcome back" label above the nickname */
.known-greeting {
  font-size:      0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--red);
  margin-bottom:  0.4rem;
}

/* Large nickname display */
.known-name {
  font-family:   var(--font-display);
  font-size:     2.5rem;
  line-height:   1;
  color:         var(--ink);
  margin-bottom: 1.25rem;
}

/* "Not you?" / "New here?" text link below the button */
.auth-tab-switch {
  background:      transparent;
  border:          none;
  color:           var(--muted);
  font-size:       0.72rem;
  text-decoration: underline;
  cursor:          pointer;
  padding:         0.5rem;
  margin-top:      0.25rem;
  transition:      color 0.15s;
}

.auth-tab-switch:hover { color: var(--ink); }


/* ============================================================
   STATS CARD SYSTEM
   Modal overlay containing both free and pro card previews.
   Pro card uses bold brand colours; free card is deliberately
   muted and incomplete to drive upgrade.
   ============================================================ */

/* ── Modal overlay ──────────────────────────────────────────── */

.stats-modal {
  position:        fixed;
  inset:           0;
  z-index:         900;
  /* display controlled entirely by JS — no display:none here */
  align-items:     center;
  justify-content: center;
  padding:         1rem;
}

/* Semi-transparent backdrop */
.stats-modal-bg {
  position:   absolute;
  inset:      0;
  background: rgba(17, 17, 17, 0.85);
  cursor:     pointer;
}

/* Modal content — sits above backdrop */
.stats-modal-inner {
  position:        relative;
  z-index:         1;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             1.25rem;
  width:           100%;
  max-width:       360px;
}

/* ── Shared card base ───────────────────────────────────────── */

.stats-card {
  width:         100%;
  border-radius: 12px;
  overflow:      hidden;
  font-family:   var(--font-body);
}

/* ── FREE CARD ──────────────────────────────────────────────── */
/* The rank is the hero — big, proud, shareable.
   Everything else is locked but looks intentional, not broken.
   Cream/ink palette mirrors the homepage brand. */

.stats-card-free {
  background: var(--cream);
  border:     2px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
}

/* Header: ink background, name + rank prominent */
.sc-header-free {
  background:      var(--ink);
  padding:         1.25rem 1.25rem 1.1rem;
  display:         flex;
  justify-content: space-between;
  align-items:     flex-end;
  position:        relative;
  overflow:        hidden;
}

/* Large decorative background rank number */
.sc-header-free::before {
  content:     attr(data-rank);
  position:    absolute;
  right:       -0.5rem;
  bottom:      -1rem;
  font-family: var(--font-display);
  font-size:   8rem;
  line-height: 1;
  color:       rgba(255,255,255,0.04);
  pointer-events: none;
}

.sc-wordmark {
  font-size:      0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          rgba(255,255,255,0.4);
  margin-bottom:  0.35rem;
  font-family:    var(--font-body);
}

.sc-name {
  font-family: var(--font-display);
  font-size:   2rem;
  color:       #fff;
  line-height: 0.95;
  letter-spacing: 0.02em;
}

.sc-rank-wrap { text-align: right; }

/* Rank is the star — massive, red */
.sc-rank {
  font-family:  var(--font-display);
  font-size:    3.5rem;
  color:        var(--red);
  line-height:  1;
  letter-spacing: -0.02em;
}

.sc-rank-label {
  font-size:      0.6rem;
  color:          rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-family:    var(--font-body);
}

/* Free card body — cream background */
.sc-body { padding: 1rem 1.25rem 1.1rem; }

/* Locked stats row — three blurred columns */
.sc-locked-row {
  display:       grid;
  grid-template-columns: 1fr 1fr 1fr;
  border:        2px solid var(--border);
  border-radius: 4px;
  overflow:      hidden;
  margin-bottom: 0.85rem;
}

.sc-locked-col {
  padding:      0.75rem 0.5rem;
  border-right: 1px solid var(--border);
  text-align:   center;
  position:     relative;
}

.sc-locked-col:last-child { border-right: none; }

/* Blurred fake number behind a lock icon */
.sc-locked-val {
  font-family: var(--font-display);
  font-size:   1.6rem;
  color:       var(--border);
  line-height: 1;
  filter:      blur(4px);
  user-select: none;
}

.sc-locked-label {
  font-size:      0.58rem;
  color:          var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top:     0.25rem;
}

/* Lock icon over each stat */
.sc-lock-icon {
  position:   absolute;
  top:        50%;
  left:       50%;
  transform:  translate(-50%, -60%);
  font-size:  0.9rem;
  opacity:    0.4;
}

/* Locked heatmap — shows a faint pattern */
.sc-locked-heat {
  height:        28px;
  background:    repeating-linear-gradient(
    90deg,
    var(--border) 0, var(--border) 6px,
    transparent 6px, transparent 9px
  );
  border-radius: 3px;
  opacity:       0.4;
  margin-bottom: 0.85rem;
}

.sc-locked-heat-text { display: none; }

/* Upgrade strip — red accent, hard to miss */
.sc-upgrade {
  background:    var(--red);
  border-radius: 4px;
  padding:       0.65rem 0.85rem;
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.sc-upgrade-text {
  font-size:   0.72rem;
  color:       rgba(255,255,255,0.85);
  font-weight: 500;
}

.sc-upgrade-cta {
  font-size:      0.72rem;
  color:          var(--yellow);
  font-weight:    700;
  letter-spacing: 0.05em;
  cursor:         pointer;
}

.sc-url {
  font-size:      0.6rem;
  color:          var(--border);
  text-align:     right;
  letter-spacing: 0.08em;
  font-family:    var(--font-body);
}


/* ── PRO CARD ───────────────────────────────────────────────── */
/* Bold, full colour, every stat visible — makes free look sad  */

.stats-card-pro {
  background: #111;
  border:     1px solid #222;
  box-shadow: 6px 6px 0 var(--ink);
}

/* Yellow header — the most visually distinct element */
.sc-header-pro {
  background:      var(--yellow);
  padding:         1.1rem 1.25rem 1rem;
  display:         flex;
  justify-content: space-between;
  align-items:     flex-end;
}

.sc-wordmark-pro {
  font-size:      0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          rgba(17,17,17,0.6);
  margin-bottom:  0.3rem;
}

.sc-name-pro {
  font-family: var(--font-display);
  font-size:   1.8rem;
  color:       var(--ink);
  line-height: 0.95;
}

.sc-rank-wrap-pro { text-align: right; }

.sc-rank-pro {
  font-family: var(--font-display);
  font-size:   2.8rem;
  color:       var(--ink);
  line-height: 1;
}

.sc-rank-label-pro {
  font-size:      0.6rem;
  color:          rgba(17,17,17,0.55);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Pro body */
.sc-body-pro { padding: 1rem 1.25rem; }

/* Squad badge row */
.sc-squad-row {
  display:       flex;
  align-items:   center;
  gap:           0.5rem;
  background:    rgba(230,51,35,0.08);
  border:        1px solid rgba(230,51,35,0.2);
  border-radius: 6px;
  padding:       0.5rem 0.75rem;
  margin-bottom: 0.85rem;
}

.sc-squad-dot {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    var(--red);
  flex-shrink:   0;
}

.sc-squad-name {
  font-size:   0.78rem;
  color:       var(--red);
  font-weight: 500;
  flex:        1;
}

.sc-squad-pos {
  font-size:  0.72rem;
  color:      var(--red);
  font-weight: 600;
}

/* Stats row — three columns */
.sc-stats-row {
  display:       grid;
  grid-template-columns: 1fr 1fr 1fr;
  border:        1px solid #222;
  border-radius: 6px;
  overflow:      hidden;
  margin-bottom: 0.6rem;
}

.sc-stat {
  padding:      0.75rem 0.5rem;
  border-right: 1px solid #222;
  text-align:   center;
}

.sc-stat:last-child { border-right: none; }

.sc-stat-val {
  font-family: var(--font-display);
  font-size:   1.6rem;
  color:       var(--yellow);
  line-height: 1;
}

.sc-stat-lbl {
  font-size:      0.58rem;
  color:          #555;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top:     0.2rem;
}

/* Gap to #1 — provocative line */
.sc-gap {
  font-size:     0.72rem;
  color:         #e8a83b;
  text-align:    center;
  padding:       0.4rem 0 0.6rem;
  letter-spacing: 0.05em;
}

/* Heatmap */
.sc-heat-label {
  font-size:      0.58rem;
  color:          #444;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom:  0.4rem;
}

.sc-heat-grid {
  display:               grid;
  grid-template-columns: repeat(35, 1fr);
  gap:                   2px;
  margin-bottom:         0.85rem;
}

.sc-heat-cell {
  aspect-ratio:  1;
  border-radius: 1px;
}

.sc-heat-done  { background: var(--red); }
.sc-heat-empty { background: #1e1e1e; border: 1px solid #2a2a2a; }

/* Footer row */
.sc-footer-pro {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding-top:     0.65rem;
  border-top:      1px solid #1e1e1e;
}

.sc-streak-indicator {
  font-size:  0.7rem;
  color:      var(--red);
  font-weight: 500;
}

.sc-url-pro {
  font-size:      0.6rem;
  color:          #333;
  letter-spacing: 0.08em;
}


/* ── Controls below the card ────────────────────────────────── */

.stats-controls {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             0.65rem;
  width:           100%;
  max-width:       320px;
}

/* Free / Pro toggle */
.stats-toggle {
  display:       flex;
  background:    #1e1e1e;
  border:        1px solid #333;
  border-radius: 6px;
  overflow:      hidden;
  width:         100%;
}

.stats-toggle-btn {
  flex:           1;
  background:     transparent;
  border:         none;
  color:          #555;
  font-size:      0.78rem;
  font-weight:    500;
  letter-spacing: 0.08em;
  padding:        0.6rem;
  cursor:         pointer;
  transition:     all 0.15s;
}

.stats-toggle-btn.active {
  background: var(--yellow);
  color:      var(--ink);
  font-weight: 700;
}

/* Download button */
.stats-download-btn {
  width:          100%;
  background:     var(--red);
  color:          #fff;
  border:         none;
  font-family:    var(--font-display);
  font-size:      1.15rem;
  letter-spacing: 0.1em;
  padding:        0.85rem;
  border-radius:  6px;
  cursor:         pointer;
  transition:     background 0.15s;
}

.stats-download-btn:hover { background: var(--ink); }

/* Close text link */
.stats-close-btn {
  background:      transparent;
  border:          none;
  color:           #555;
  font-size:       0.72rem;
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  cursor:          pointer;
  text-decoration: underline;
  transition:      color 0.15s;
}

.stats-close-btn:hover { color: #fff; }

/* My Stats button — sits alongside the leaderboard button */
.stats-btn {
  background:  var(--red) !important;
  color:       #fff !important;
  border-color: var(--red) !important;
  font-weight: 600;
}

.stats-btn:hover {
  background:  var(--ink) !important;
  border-color: var(--ink) !important;
}

/* lb-link row — flex to hold both buttons */
.lb-link {
  display:         flex;
  gap:             0.75rem;
  justify-content: center;
  flex-wrap:       wrap;
}

/* Mobile */
@media (max-width: 600px) {
  .stats-modal-inner { padding: 0 0.5rem; }
  .sc-rank-pro        { font-size: 2.2rem; }
  .sc-name-pro        { font-size: 1.5rem; }
}

/* ── Dark mode exercise card overrides ─────────────────────
   On dark theme, give cards more visible borders and a
   slightly lifted surface so they don't dissolve into the bg */
[data-theme="dark"] .exercise-card {
  background: #1a1a1a;
  border-color: #2e2e2e;
}

[data-theme="dark"] .exercise-card:hover {
  border-color: var(--red);
  background:   #202020;
}

[data-theme="dark"] .exercise-card.done {
  opacity: 0.55;
}

[data-theme="dark"] .card-body {
  background: #1a1a1a;
}

[data-theme="dark"] .how-to-inner {
  border-top-color: #2e2e2e;
}

[data-theme="dark"] .steps-list li {
  border-bottom-color: #2a2a2a;
}

[data-theme="dark"] .how-to-toggle {
  border-color: #2e2e2e;
  color:        #777;
}

[data-theme="dark"] .how-to-toggle:hover {
  border-color: var(--red);
  color:        var(--red);
  background:   rgba(230,51,35,0.06);
}

[data-theme="dark"] .done-btn {
  border-color: #2e2e2e;
  color:        #666;
}

[data-theme="dark"] .done-btn:hover {
  border-color: var(--red);
  color:        var(--red);
}

[data-theme="dark"] header {
  border-bottom-color: #2a2a2a;
}

[data-theme="dark"] .day-btn {
  background:   #1a1a1a;
  border-color: #2a2a2a;
  color:        #666;
}

[data-theme="dark"] .day-btn:hover {
  border-color: var(--red);
  color:        var(--red);
}

[data-theme="dark"] .day-btn.active {
  background:   var(--red);
  border-color: var(--red);
  color:        #fff;
}

[data-theme="dark"] .progress-bar-bg {
  background:   #1a1a1a;
  border-color: #2a2a2a;
}

[data-theme="dark"] .rest-timer {
  background:   #141414;
  border-top-color:    #2a2a2a;
  border-bottom-color: #2a2a2a;
}

[data-theme="dark"] .complete-banner {
  background: rgba(230,51,35,0.08);
}

[data-theme="dark"] .user-badge {
  background:   #1a1a1a;
  border-color: #2a2a2a;
}


/* ============================================================
   PRO UPGRADE STRIP & BANNER
   ============================================================ */

/* Go Pro strip — shown to free users below the action buttons */
.go-pro-strip {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             1rem;
  padding:         1rem 1.5rem;
  margin:          0 0 1rem;
  background:      #1a1a1a;
  border-top:      2px solid var(--red);
  border-bottom:   2px solid var(--red);
  flex-wrap:       wrap;
}

.go-pro-text {
  font-size:   0.82rem;
  color:       #888;
  line-height: 1.5;
  flex:        1;
}

.go-pro-text strong {
  color:       var(--yellow);
  font-weight: 700;
}

.go-pro-btn {
  background:     var(--red);
  color:          #fff;
  border:         none;
  font-family:    var(--font-display);
  font-size:      1rem;
  letter-spacing: 0.1em;
  padding:        0.7rem 1.5rem;
  border-radius:  4px;
  cursor:         pointer;
  white-space:    nowrap;
  transition:     background 0.15s, transform 0.1s;
  flex-shrink:    0;
}

.go-pro-btn:hover    { background: #ff4433; transform: translateY(-1px); }
.go-pro-btn:disabled { background: #444; cursor: not-allowed; transform: none; }

/* Upgrade success banner */
.upgrade-banner {
  background:    var(--yellow);
  color:         var(--ink);
  text-align:    center;
  padding:       0.85rem 1.5rem;
  font-size:     0.85rem;
  font-weight:   600;
  letter-spacing: 0.05em;
  animation:     fade-in 0.4s ease;
}

/* Mobile */
@media (max-width: 600px) {
  .go-pro-strip   { flex-direction: column; text-align: center; }
  .go-pro-btn     { width: 100%; }
}
.go-pro-strip {
  max-width:    720px;
  margin:       0 auto 1rem;
  border-left:  none;
  border-right: none;
  border-radius: 0;
}

.go-pro-text {
  font-size: 0.78rem;
}

/* ============================================================
   EXERCISE TARGET LINE
   Prominent sets/reps statement on its own line above the
   muscle/rest pills. Replaces the cramped pill so the
   "2 sets · 10 each side (20 total)" reads clearly.
   ============================================================ */

.exercise-target {
  font-family:    var(--font-body);
  font-size:      0.92rem;
  font-weight:    600;
  color:          var(--red);
  margin-bottom:  0.6rem;
  line-height:    1.35;
  letter-spacing: 0.01em;
}

/* On dark theme the red stays vivid and readable */
[data-theme="dark"] .exercise-target {
  color: #ff6655;
}