/*
 * ============================================================
 *  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 TIMER
   A single dock fixed to the bottom of the viewport, plus the
   small trigger button that sits on every exercise card.
   The dock lives outside .workout-grid so it is never wiped
   out when renderWorkout() rebuilds the cards.
   ============================================================ */

/* ── Trigger button on each card ──────────────────────────── */

.timer-btn {
  width:           100%;
  margin-top:      0.65rem;
  padding:         0.5rem 0.75rem;
  background:      rgba(230, 51, 35, 0.06);
  border:          2px solid rgba(230, 51, 35, 0.35);
  color:           var(--red);
  font-family:     inherit;
  font-size:       0.7rem;
  font-weight:     600;
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  cursor:          pointer;
  border-radius:   4px;
  transition:      all 0.2s;
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             0.45rem;
}

.timer-btn:hover  { border-color: var(--red); background: rgba(230, 51, 35, 0.12); }
.timer-btn:active { transform: scale(0.985); }

.timer-btn-icon { font-size: 0.9rem; line-height: 1; }


/* ── The dock ─────────────────────────────────────────────── */

.timer-dock {
  position:     fixed;
  left:         0;
  right:        0;
  bottom:       0;
  /* Below the auth screens (500/600) and the stats modal (900)
     so it can never float on top of them */
  z-index:      400;
  background:   var(--surface);
  border-top:   2px solid var(--red);
  transform:    translateY(110%);
  transition:   transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  /* Clears the home indicator on iPhones */
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow:   0 -6px 24px rgba(0, 0, 0, 0.25);
}

.timer-dock.show { transform: translateY(0); }

/* Push the footer up so the dock never covers it */
body.timer-open { padding-bottom: 150px; }

/* Depleting progress track along the very top edge */
.timer-track {
  height:     3px;
  background: var(--border);
  overflow:   hidden;
}

.timer-track-fill {
  height:     100%;
  width:      100%;
  background: var(--red);
  transition: width 0.2s linear;
}

.timer-dock-inner {
  display:         flex;
  align-items:     center;
  gap:             1rem;
  max-width:       1100px;
  margin:          0 auto;
  padding:         0.85rem 1.5rem;
}

/* Left block: phase label above the exercise name */
.timer-meta {
  flex:     1;
  min-width: 0;   /* lets the name truncate instead of pushing */
}

.timer-phase {
  font-size:      0.6rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color:          var(--muted);
  margin-bottom:  0.15rem;
}

.timer-name {
  font-size:     0.85rem;
  font-weight:   600;
  color:         var(--text);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

/* The clock itself */
.timer-value {
  font-family:    var(--font-display);
  font-size:      2.6rem;
  line-height:    1;
  color:          var(--red);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  min-width:      3.2ch;
  text-align:     center;
}

/* ── Controls ─────────────────────────────────────────────── */

.timer-controls {
  display:     flex;
  align-items: center;
  gap:         0.4rem;
}

.timer-ctrl {
  background:      transparent;
  border:          2px solid var(--border);
  color:           var(--muted);
  font-family:     inherit;
  font-size:       0.68rem;
  font-weight:     500;
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  padding:         0.5rem 0.85rem;
  border-radius:   100px;
  cursor:          pointer;
  transition:      all 0.2s;
  white-space:     nowrap;
}

.timer-ctrl:hover  { border-color: var(--red); color: var(--red); }
.timer-ctrl:active { transform: scale(0.95); }

/* Primary start/pause button */
.timer-ctrl.timer-play {
  background:   var(--red);
  border-color: var(--red);
  color:        #fff;
  font-weight:  700;
  min-width:    5.5rem;
}

.timer-ctrl.timer-play:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }

.timer-ctrl.timer-close {
  font-size: 1rem;
  padding:   0.4rem 0.7rem;
  line-height: 1;
}

.timer-ctrl.timer-close:hover { border-color: var(--muted); color: var(--text); }

/* ── Hold / rest switcher (only shown when both exist) ────── */

.timer-phases {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             0.4rem;
  padding:         0 1.5rem 0.75rem;
  border-top:      1px solid var(--border);
  padding-top:     0.7rem;
}

.timer-phases-label {
  font-size:      0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--muted);
  margin-right:   0.2rem;
}

.timer-chip {
  background:     transparent;
  border:         1px solid var(--border);
  color:          var(--muted);
  font-family:    inherit;
  font-size:      0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding:        0.3rem 0.8rem;
  border-radius:  100px;
  cursor:         pointer;
  transition:     all 0.2s;
}

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

.timer-chip.active {
  background:   var(--red);
  border-color: var(--red);
  color:        #fff;
}

/* ── States ───────────────────────────────────────────────── */

/* Gentle breathing pulse on the clock whilst counting down */
.timer-dock.running .timer-value { animation: timerPulse 1s ease-in-out infinite; }

@keyframes timerPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.72; }
}

/* Time is up — flip to yellow and flash the dock */
.timer-dock.finished { border-top-color: var(--yellow); }
.timer-dock.finished .timer-value      { color: var(--yellow); animation: none; }
.timer-dock.finished .timer-track-fill { background: var(--yellow); }
.timer-dock.finished .timer-dock-inner { animation: timerFlash 0.5s ease-out 3; }

@keyframes timerFlash {
  0%, 100% { background: transparent; }
  50%      { background: rgba(245, 200, 0, 0.12); }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .timer-dock                            { transition: none; }
  .timer-dock.running .timer-value       { animation: none; }
  .timer-dock.finished .timer-dock-inner { animation: none; }
}

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

@media (max-width: 600px) {
  body.timer-open { padding-bottom: 170px; }

  .timer-dock-inner {
    flex-wrap: wrap;
    padding:   0.75rem 1rem;
    gap:       0.6rem 0.75rem;
  }

  /* Row one: name on the left, clock on the right */
  .timer-meta  { flex: 1 1 55%; }
  .timer-value { font-size: 2.2rem; flex: 0 0 auto; }

  /* Row two: controls span the full width */
  .timer-controls {
    flex:            1 1 100%;
    justify-content: space-between;
    gap:             0.35rem;
  }

  .timer-ctrl { flex: 1; padding: 0.55rem 0.4rem; text-align: center; }

  .timer-ctrl.timer-play { flex: 1.4; min-width: 0; }
  .timer-ctrl.timer-close { flex: 0 0 auto; padding: 0.5rem 0.7rem; }

  .timer-phases { padding-left: 1rem; padding-right: 1rem; }
}


/* ============================================================
   DIRECTION A — SINGLE ACCENT PASS
   ------------------------------------------------------------
   Appended deliberately as an override block. Nothing above
   this line was deleted, so removing this whole section
   reverts the page exactly to how it looked before.

   Three changes, in order of how much they matter:
     1. Red is the only accent on this page. The yellow muscle
        pill measured 11.5:1 against the card whilst red
        measured 4.3:1 — the secondary accent was literally
        shouting louder than the primary one.
     2. Metadata drops to plain grey text, so the exercise
        name is the brightest thing on the card.
     3. Borders go to hairlines and padding grows. Space does
        the separating that outlines were doing.
   ============================================================ */

/* ── 1. Metadata line (replaces the three-pill row) ───────── */

.exercise-meta {
  font-size:     0.72rem;
  color:         var(--muted);
  margin-bottom: 1rem;
  line-height:   1.5;
}

/* Thin separator dots — quieter than a bullet character */
.exercise-meta i {
  font-style: normal;
  /* Was var(--border) at 1.25:1 against the card — invisible.
     var(--muted) measures 5.16:1 and still reads as a separator
     rather than as content. */
  color:      var(--muted);
  padding:    0 0.45rem;
}

/* ── 2. Cards: hairlines and breathing room ───────────────── */

.exercise-card {
  border-width: 1px;
  border-radius: 6px;
}

/* The red shadow-on-hover was the loudest thing on the grid.
   A border shift is enough feedback. */
.exercise-card:hover {
  border-color: var(--muted);
  box-shadow:   none;
}

/* Completed cards recede rather than turning red. The corner
   tick is the only completion signal that needs colour. */
.exercise-card.done {
  opacity:      1;
  border-color: var(--border);
  background:   transparent;
}

.exercise-card.done .exercise-name,
.exercise-card.done .card-header-name { color: var(--muted); }

.exercise-card.done .exercise-meta { color: var(--border); }

.card-body { padding: 1.35rem 1.25rem 1.25rem; }

.workout-grid { gap: 1.35rem; }

/* ── 3. Buttons: one accent, one hierarchy ────────────────── */

/* Timer is now the only red thing on a card that isn't done */
.timer-btn {
  border-width: 1px;
  border-color: rgba(230, 51, 35, 0.45);
}

.how-to-toggle {
  border-width: 1px;
  margin-top:   0.55rem;
}

/* Secondary action — no border at all, just a quiet label */
.done-btn {
  border-width: 1px;
  margin-top:   0.55rem;
}

.exercise-card.done .done-btn {
  border-color: var(--border);
}

/* ── Header and navigation: same treatment ────────────────── */

.day-btn      { border-width: 1px; }
.user-badge   { border-width: 1px; }
.lb-btn       { border-width: 1px; }

/* The static "rest between exercises" strip is redundant now
   that every card carries a real timer. */
.rest-timer { display: none; }


/* ============================================================
   SQUAD LEAGUE OPT-IN
   Founder-only control inside the squad panel.
   ============================================================ */

/* Active state — the squad is in the league */
.squad-btn-secondary.squad-btn-on {
  border-color: var(--red);
  color:        var(--red);
  background:   rgba(230, 51, 35, 0.06);
}

/* Plain-language explanation of what the toggle actually does */
.squad-public-note {
  font-size:   0.68rem;
  color:       var(--muted);
  line-height: 1.55;
  margin-top:  0.7rem;
  max-width:   42ch;
}

.squad-owner-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.squad-owner-actions .squad-public-note { flex: 1 1 100%; margin-top: 0.3rem; }


/* ============================================================
   TRACK SELECTOR
   Calisthenics / HIIT. Sits above the day nav.
   Deliberately quieter than the day buttons — which plan you
   are on changes less often than which day you are on.
   ============================================================ */

.track-tabs {
  display:         flex;
  justify-content: center;
  gap:             0.4rem;
  padding:         1.25rem 1rem 0;
}

.track-tab {
  background:     transparent;
  border:         1px solid var(--border);
  color:          var(--muted);
  font-family:    inherit;
  font-size:      0.66rem;
  font-weight:    500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding:        0.45rem 1.1rem;
  border-radius:  100px;
  cursor:         pointer;
  transition:     all 0.2s;
}

.track-tab:hover { border-color: var(--muted); color: var(--text); }

.track-tab.active {
  border-color: var(--red);
  color:        var(--red);
  font-weight:  700;
}

@media (max-width: 600px) {
  .track-tabs { padding-top: 1rem; }
  .track-tab  { font-size: 0.62rem; padding: 0.4rem 0.9rem; }
}


/* ============================================================
   LEVEL SELECTOR
   Volume scaling only — same exercises at every level.
   Sits under the track tabs, quieter again: your level is
   something you set once and rarely change.
   ============================================================ */

.level-tabs {
  display:         flex;
  justify-content: center;
  align-items:     center;
  gap:             0.3rem;
  padding:         0.6rem 1rem 0;
}

.level-label {
  font-size:      0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--dim, var(--muted));
  margin-right:   0.35rem;
  opacity:        0.7;
}

.level-tab {
  background:     transparent;
  border:         none;
  color:          var(--muted);
  font-family:    inherit;
  font-size:      0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding:        0.3rem 0.6rem;
  border-radius:  100px;
  cursor:         pointer;
  transition:     all 0.2s;
}

.level-tab:hover { color: var(--text); }

.level-tab.active {
  color:        var(--text);
  background:   rgba(255, 255, 255, 0.06);
  font-weight:  600;
}

@media (max-width: 600px) {
  .level-tabs { padding-top: 0.5rem; }
  .level-tab  { font-size: 0.6rem; padding: 0.28rem 0.5rem; }
}


/* ============================================================
   SIGNUP PLAN CHOICE
   Two cards on the register form. Sets the starting track only —
   it is switchable afterwards, and the note says so, because a
   choice that looks permanent makes people hesitate.
   ============================================================ */

.reg-plan { margin: 0.5rem 0 0.25rem; }

.reg-plan-label {
  font-size:      0.68rem;
  color:          var(--muted);
  letter-spacing: 0.06em;
  margin-bottom:  0.6rem;
  text-align:     center;
}

.reg-plan-opts {
  display: flex;
  gap:     0.5rem;
}

.reg-plan-opt {
  flex:            1;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             0.2rem;
  background:      transparent;
  border:          1px solid var(--border);
  border-radius:   6px;
  padding:         0.75rem 0.5rem;
  cursor:          pointer;
  transition:      all 0.2s;
  font-family:     inherit;
  text-align:      center;
}

.reg-plan-opt:hover { border-color: var(--muted); }

.reg-plan-opt.active {
  border-color: var(--red);
  background:   rgba(230, 51, 35, 0.06);
}

.reg-plan-name {
  font-family:    var(--font-display);
  font-size:      1rem;
  letter-spacing: 0.04em;
  color:          var(--text);
}

.reg-plan-opt.active .reg-plan-name { color: var(--red); }

.reg-plan-desc {
  font-size:   0.6rem;
  color:       var(--muted);
  line-height: 1.35;
}

.reg-plan-note {
  font-size:  0.62rem;
  color:      var(--muted);
  text-align: center;
  margin-top: 0.5rem;
  opacity:    0.8;
}


/* ============================================================
   DAY NAV POSITION FIX
   style.css styles the bare `nav` element for the homepage's
   fixed top bar. The day switcher is also a <nav>, so it was
   inheriting position:fixed and floating over the logo — the
   logo was clipped on desktop and invisible on mobile.
   The class beats the element selector on everything else, so
   only these properties needed resetting.
   ============================================================ */

.day-nav {
  position:      static;
  z-index:       auto;
  background:    transparent;
  border-bottom: none;
}


/* ============================================================
   LOG OUT
   switchUser() already clears the token and returns to the auth
   screen — this just gives it an honest label. The user badge
   does the same thing for anyone who finds it first.
   ============================================================ */

.footer-actions {
  margin-top: 1.25rem;
  text-align: center;
}

.logout-btn {
  background:     transparent;
  border:         1px solid var(--border);
  color:          var(--muted);
  font-family:    inherit;
  font-size:      0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding:        0.45rem 1.1rem;
  border-radius:  100px;
  cursor:         pointer;
  transition:     all 0.2s;
}

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


/* ============================================================
   NICKNAME SUGGESTIONS
   Shown under the register field when a name is already taken.
   Nicknames must be unique because the workouts table keys on
   the nickname rather than a user id.
   ============================================================ */

.nick-suggest {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         0.4rem;
  margin:      0.5rem 0 0.25rem;
  justify-content: center;
}

.nick-suggest:empty { margin: 0; }

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

.nick-suggest-chip {
  background:    rgba(230, 51, 35, 0.06);
  border:        1px solid rgba(230, 51, 35, 0.35);
  color:         var(--red);
  font-family:   inherit;
  font-size:     0.72rem;
  font-weight:   500;
  padding:       0.32rem 0.75rem;
  border-radius: 100px;
  cursor:        pointer;
  transition:    all 0.2s;
}

.nick-suggest-chip:hover {
  background:   var(--red);
  border-color: var(--red);
  color:        #fff;
}


/* ============================================================
   SHARE CARD BUTTON
   Only shown where the browser can share files — essentially
   phones. Desktop keeps the download button on its own.
   ============================================================ */

.stats-share-btn {
  background:     var(--red);
  border:         2px solid var(--red);
  color:          #fff;
  font-family:    inherit;
  font-size:      0.72rem;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding:        0.6rem 1.4rem;
  border-radius:  100px;
  cursor:         pointer;
  transition:     all 0.2s;
}

.stats-share-btn:hover  { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.stats-share-btn:active { transform: scale(0.97); }
.stats-share-btn:disabled { opacity: 0.6; cursor: default; }


/* ============================================================
   EVERYONE-LEADERBOARD OPT-OUT
   Sits beside Log out. Quiet by design — it is a setting, not
   an action, and most people will never touch it.
   ============================================================ */

.footer-actions {
  display:         flex;
  flex-wrap:       wrap;
  gap:             0.5rem;
  justify-content: center;
  align-items:     center;
}

.listed-btn {
  background:     transparent;
  border:         1px solid var(--border);
  color:          var(--muted);
  font-family:    inherit;
  font-size:      0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding:        0.45rem 1.1rem;
  border-radius:  100px;
  cursor:         pointer;
  transition:     all 0.2s;
}

.listed-btn:hover    { border-color: var(--muted); color: var(--text); }
.listed-btn:disabled { opacity: 0.6; cursor: default; }

/* Listed is the default, so it gets the accent — hidden is the
   quieter state rather than an error state. */
.listed-btn.listed-on {
  border-color: rgba(230, 51, 35, 0.4);
  color:        var(--red);
}

.listed-note {
  flex:        1 1 100%;
  font-size:   0.65rem;
  color:       var(--muted);
  line-height: 1.5;
  margin-top:  0.5rem;
  max-width:   40ch;
  margin-left: auto;
  margin-right:auto;
}


/* ============================================================
   FUTURE DAYS
   Days later this week haven't happened, so they can be read
   but not logged. Faded rather than hidden — seeing what's
   coming is useful.
   ============================================================ */

.exercise-card.future { opacity: 0.55; }

.done-btn-future {
  cursor:  default;
  opacity: 0.5;
}

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


/* ============================================================
   SQUAD JOINED BANNER
   Confirms an automatic join from an invite link. Without it
   the join happens invisibly and nobody knows it worked.
   ============================================================ */

.squad-joined-banner {
  max-width:      52rem;
  margin:         0 auto 1.25rem;
  padding:        0.75rem 1.1rem;
  background:     rgba(230, 51, 35, 0.08);
  border:         1px solid rgba(230, 51, 35, 0.35);
  border-radius:  6px;
  color:          var(--red);
  font-size:      0.78rem;
  font-weight:    600;
  letter-spacing: 0.04em;
  text-align:     center;
  animation:      fade-in 0.35s ease;
}


/* ============================================================
   BOTTOM NAV + TAB VIEWS
   Today / League / Squad / You. The squad panel used to be
   buried below five exercise cards — this makes it one tap.
   ============================================================ */

.tabbar {
  position:      fixed;
  left: 0; right: 0; bottom: 0;
  z-index:       450;              /* above content, below the timer dock */
  display:       flex;
  background:    var(--surface);
  border-top:    1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.tabbar-btn {
  flex:            1;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             0.2rem;
  padding:         0.6rem 0.25rem 0.55rem;
  background:      transparent;
  border:          none;
  color:           var(--muted);
  font-family:     inherit;
  text-decoration: none;
  cursor:          pointer;
  transition:      color 0.2s;
}

.tabbar-btn:hover  { color: var(--text); }
.tabbar-btn.active { color: var(--red); }

.tabbar-icon  { font-size: 1rem; line-height: 1; }
.tabbar-label {
  font-size:      0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight:    600;
}

/* Clear the bar so nothing hides behind it */
#mainApp { padding-bottom: 5rem; }
body.timer-open  { padding-bottom: 200px; }

.tab-view { animation: fade-in 0.25s ease; }


/* ============================================================
   YOU TAB
   ============================================================ */

.you-head    { padding: 2rem 1.25rem 0.5rem; text-align: center; }

.you-eyebrow {
  font-size:      0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color:          var(--red);
  margin-bottom:  0.4rem;
}

.you-title {
  font-family: var(--font-display);
  font-size:   2.4rem;
  line-height: 1;
  color:       var(--text);
}

.you-stats {
  display:     flex;
  gap:         0.6rem;
  padding:     1.5rem 1.25rem 0;
  max-width:   34rem;
  margin:      0 auto;
}

.you-stat {
  flex:          1;
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: 8px;
  padding:       1.1rem 0.5rem;
  text-align:    center;
}

.you-stat-num {
  font-family: var(--font-display);
  font-size:   2rem;
  line-height: 1;
  color:       var(--text);
}

.you-stat-label {
  font-size:      0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          var(--muted);
  margin-top:     0.35rem;
}

.you-actions {
  display:         flex;
  flex-wrap:       wrap;
  gap:             0.5rem;
  justify-content: center;
  padding:         1.5rem 1.25rem 0;
}


/* ============================================================
   CARD LAYOUT — paired actions
   Timer secondary, Mark done primary. Previously three
   full-width buttons stacked, all reading as equally important.
   ============================================================ */

.card-actions {
  display:     flex;
  gap:         0.5rem;
  margin-top:  0.75rem;
}

.card-actions .timer-btn,
.card-actions .done-btn {
  margin-top: 0;
  flex:       1;
}

/* Timer takes less room — it's the optional one */
.card-actions .timer-btn { flex: 0.85; }

/* Mark done becomes solid: the action the card exists for */
.card-actions .done-btn {
  background:   var(--red);
  border-color: var(--red);
  color:        #fff;
  font-weight:  700;
}

.card-actions .done-btn:hover {
  background:   var(--ink);
  border-color: var(--ink);
  color:        var(--bg);
}

/* Completed cards drop back to an outline — nothing left to do */
.exercise-card.done .card-actions .done-btn {
  background:   transparent;
  border-color: var(--border);
  color:        var(--muted);
  font-weight:  500;
}

.card-actions .done-btn-future {
  background:   transparent;
  border-color: var(--border);
  color:        var(--muted);
  font-weight:  500;
}

/* Index and muscle group share one label line */
.exercise-order {
  font-size:      0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          var(--red);
  margin-bottom:  0.3rem;
}

.exercise-name { margin-bottom: 0.35rem; }

@media (max-width: 600px) {
  .you-title  { font-size: 2rem; }
  .you-stats  { padding-left: 1rem; padding-right: 1rem; }
  .card-actions { gap: 0.4rem; }
}

/* style.css styles the bare `nav` element for the homepage's fixed
   TOP bar, including top:0 and padding. This is also a <nav>, so it
   inherited top:0 alongside our bottom:0 — an element pinned to both
   stretches to fill the viewport, covering the page. Same leak that
   put the day nav over the logo. Reset everything it brings. */
.tabbar {
  top:           auto !important;
  padding-top:   0;
  padding-left:  0;
  padding-right: 0;
  border-bottom: none;
  justify-content: stretch;
  align-items:   stretch;
  height:        auto;
}


/* ============================================================
   STATS CARD — WEEK STRIP AND TAGS
   The strip is the shareable bit: a pattern that reads at
   thumbnail size, the way a Wordle grid does. Numbers need
   reading; a row of blocks doesn't.
   ============================================================ */

.sc-week-strip {
  display:       flex;
  gap:           4px;
  margin-bottom: 1rem;
}

.sc-wk-cell {
  flex:            1;
  aspect-ratio:    1 / 1;
  border-radius:   4px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       0.55rem;
  font-weight:     700;
  letter-spacing:  0.02em;
}

/* Completed — solid brand red */
.sc-wk-cell.done   { background: var(--red); color: #fff; }

/* Past and missed — visible but empty, so the gaps show */
.sc-wk-cell.missed { background: rgba(255,255,255,0.06); color: var(--muted); border: 1px solid var(--border); }

/* Still to come this week — quieter again, not a failure */
.sc-wk-cell.todo   { background: transparent; color: var(--border); border: 1px dashed var(--border); }

.sc-tags {
  display:       flex;
  flex-wrap:     wrap;
  gap:           0.35rem;
  margin-bottom: 1rem;
}

.sc-tag {
  font-size:      0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight:    600;
  color:          var(--muted);
  background:     rgba(255,255,255,0.05);
  border:         1px solid var(--border);
  border-radius:  100px;
  padding:        0.25rem 0.6rem;
}

/* Movement is the one that earns a colour — it's the story */
.sc-tag-move { color: var(--red); border-color: rgba(230,51,35,0.35); }

/* Four stats now rather than three */
.sc-stats-row .sc-stat { min-width: 0; }
.sc-stats-row .sc-stat-val { font-size: 1.7rem; }
.sc-stats-row .sc-stat-lbl { font-size: 0.52rem; }


/* ============================================================
   PRO CARD PREVIEW LOCK
   Free users can see the Pro card — looking at it is what sells
   it — but it's watermarked and the share/save buttons go away.
   ============================================================ */

.stats-card.card-locked {
  position: relative;
  overflow: hidden;
}

/* Diagonal PREVIEW watermark, so a screenshot isn't a free card */
.stats-card.card-locked::after {
  content:        'PREVIEW';
  position:       absolute;
  top: 50%; left: 50%;
  transform:      translate(-50%, -50%) rotate(-24deg);
  font-family:    var(--font-display);
  font-size:      3.4rem;
  letter-spacing: 0.2em;
  color:          rgba(255, 255, 255, 0.13);
  pointer-events: none;
  white-space:    nowrap;
}

.card-lock-bar {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     center;
  justify-content: center;
  gap:             0.6rem;
  margin:          0.9rem 0 0.25rem;
  padding:         0.75rem 1rem;
  background:      rgba(230, 51, 35, 0.07);
  border:          1px solid rgba(230, 51, 35, 0.3);
  border-radius:   8px;
}

.card-lock-text {
  font-size:   0.72rem;
  color:       var(--muted);
  line-height: 1.45;
  text-align:  center;
}

.card-lock-btn {
  background:     var(--red);
  border:         none;
  color:          #fff;
  font-family:    inherit;
  font-size:      0.68rem;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding:        0.5rem 1.2rem;
  border-radius:  100px;
  cursor:         pointer;
  transition:     all 0.2s;
}

.card-lock-btn:hover { background: var(--ink); color: var(--bg); }


/* ============================================================
   SCREENSHOT-ROUND FIXES
   ------------------------------------------------------------
   Four things spotted on a real phone rather than a desktop
   browser window.
   ============================================================ */

/* ── 1. Header block is now the number + emoji only ────────── */
/* The name and muscle moved out, so it needs far less height. */

.card-header-block {
  min-height: 92px;
  height:     92px;
}

.card-emoji  { font-size: 2.4rem; }
.card-bg-num { font-size: 4.5rem; }


/* ── 2. Get the workout above the fold ─────────────────────── */
/* On a 6" phone the first screen was all chrome and no
   exercises. Tightening the header stack claws back ~180px. */

header { padding: 1.1rem 1.25rem 0.9rem; }

.tagline { font-size: 0.55rem; margin-bottom: 0.15rem; }

header h1 { font-size: clamp(1.9rem, 8vw, 3rem); line-height: 0.95; }

.stats-bar { margin-top: 0.75rem; gap: 1.5rem; }
.stat-num  { font-size: 1.5rem; }
.stat-label{ font-size: 0.55rem; }

.track-tabs { padding-top: 0.8rem; }
.level-tabs { padding-top: 0.4rem; }

/* Day pills on one row — two rows cost a lot of vertical space */
.day-nav {
  padding:    0.9rem 0.75rem 0.6rem;
  gap:        0.3rem;
  flex-wrap:  nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.day-nav::-webkit-scrollbar { display: none; }

.day-btn {
  padding:     0.45rem 0.7rem;
  font-size:   0.65rem;
  flex:        0 0 auto;
  white-space: nowrap;
}

.day-focus     { padding: 0.5rem 1rem 0.25rem; font-size: 0.72rem; }
.progress-wrap { padding-top: 0.75rem; }


/* ── 3. Squashed podium blocks ─────────────────────────────── */
/* Faded to near-nothing in the single-accent pass, they read as
   broken images. Give them enough presence to be podium steps. */

.podium-slot.p1 .podium-block,
.podium-slot.p2 .podium-block,
.podium-slot.p3 .podium-block {
  background: rgba(255, 255, 255, 0.07);
  border:     none;
  border-top: 2px solid var(--border);
}

.podium-slot.p1 .podium-block { background: rgba(230, 51, 35, 0.14); border-top-color: var(--red); }


/* ============================================================
   TAB BAR COMPOSITING
   The bar is correctly 54px and anchored to the bottom, but on
   Chrome for Android it was smearing copies of itself down the
   page while scrolling — the browser not repainting the region
   it moved out of. Promoting it to its own layer fixes that.
   ============================================================ */

.tabbar {
  transform:      translateZ(0);
  will-change:    transform;
  backface-visibility: hidden;
  contain:        paint;
}

/* The animation on tab views was the likely trigger: an animating
   ancestor forces the browser to re-composite everything under it
   on every frame. It costs nothing to drop. */
.tab-view { animation: none; }


/* ============================================================
   CARD HEADER — NAME ABOVE THE LINE
   The block holds the number, emoji, muscle group and name.
   Sized to its content rather than left as an empty rectangle,
   and the body below is two lines shorter as a result.
   ============================================================ */

.card-header-block {
  height:          auto;
  min-height:      0;
  padding:         1.1rem 1.15rem 0.9rem;
  justify-content: flex-end;
}

.card-header-block .card-muscle {
  font-size:      0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          var(--red);
  margin-bottom:  0.25rem;
  font-weight:    600;
  position:       relative;   /* above the big faded number */
  z-index:        1;
}

.card-header-block .card-header-name {
  font-family:    var(--font-display);
  font-size:      1.7rem;
  line-height:    0.95;
  color:          #fff;
  letter-spacing: 0.01em;
  position:       relative;
  z-index:        1;
  max-width:      78%;        /* clear of the emoji */
}

/* Emoji and number sit top-right, behind the text */
.card-header-block .card-emoji  { font-size: 2rem; top: 0.7rem; right: 0.9rem; }
.card-header-block .card-bg-num { font-size: 4rem; top: 0.1rem; right: 0.7rem; }

/* Completed cards: grey the name, keep the tick as the signal */
.exercise-card.done .card-header-block .card-header-name { color: var(--muted); }
.exercise-card.done .card-header-block .card-muscle      { opacity: 0.6; }

/* The body starts with the sets line now */
.card-body .exercise-meta { margin-top: 0; }


/* ============================================================
   HEADER TIDY-UP
   ------------------------------------------------------------
   1. The big faded number sat behind the emoji, so the two
      overlapped into a grey slab. The "01 ·" prefix on the
      muscle label already numbers the exercise, so the
      watermark has nothing left to say.
   2. A faint trace of the tab bar was still showing through
      the header. isolation:isolate gives the card its own
      stacking context so nothing composites into it.
   ============================================================ */

.card-header-block .card-bg-num { display: none; }

.exercise-card {
  isolation: isolate;
  position:  relative;
  z-index:   0;
}

.card-header-block {
  isolation:  isolate;
  background: #1a1a1a;
}

/* Emoji now has the corner to itself */
.card-header-block .card-emoji {
  font-size: 2.1rem;
  top:       0.85rem;
  right:     1rem;
  opacity:   0.95;
}