/* =============================================================================
   TRAINING PLAN APP — STYLES
   training/training.css

   App-specific styles for the triathlon training plan.
   Loaded after ../styles/main.css — all colour, spacing, typography, and
   component tokens come from there via CSS custom properties.

   DO NOT hardcode colour values here. Use the design tokens:
     var(--color-pink)        sport / race accent
     var(--color-lime)        active week / phase headers / water
     var(--color-gold)        intensity / hard sessions
     var(--color-coral)       outdoor / hard running
     var(--color-text)        primary text
     var(--color-text-muted)  secondary text
     var(--color-border)      card borders
     var(--color-bg-card)     card backgrounds
     var(--color-bg)          page background
   ============================================================================= */


/* =============================================================================
   1. ACCENT COLOUR OVERRIDES
   All elements that take this app's accent (pink) are listed here so that
   re-theming only requires editing this section.
   ============================================================================= */

.page-title .accent { color: var(--color-pink); }


/* =============================================================================
   2. PAGE LAYOUT
   Single-column scrollable — no bottom nav, so no page--tabbed needed.
   Capped at 620px to keep session descriptions readable on wider displays.
   ============================================================================= */

.page { max-width: 620px; }


/* =============================================================================
   3. INLINE SVG ICONS
   ============================================================================= */

.week-toggle .icon {
  width: 18px; height: 18px;
  transition: transform var(--transition);
}
.week-card--collapsed .week-toggle .icon { transform: rotate(-90deg); }

.info-btn .icon { width: 14px; height: 14px; }


/* =============================================================================
   4. HEADER — RACE COUNTDOWN
   Large pink number showing days until the next event.
   ============================================================================= */

.race-countdown { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.race-countdown__num   { font-family: var(--font-display); font-size: 38px; color: var(--color-pink); line-height: 1; }
.race-countdown__label { font-size: 14px; color: var(--color-text-muted); }

/* Discipline distances shown below the countdown */
.plan-meta { font-size: 12px; color: var(--color-text-muted); margin-bottom: 20px; }
.plan-meta .sep { margin: 0 4px; opacity: 0.4; }


/* =============================================================================
   5. TRAINING PLAN — PHASE HEADERS
   Lime uppercase labels that separate training phases.
   ============================================================================= */

.phase-header {
  font-size: 11px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-lime);
  margin: var(--space-lg) 0 10px; padding-left: 2px;
}
.phase-header:first-child { margin-top: var(--space-sm); }


/* =============================================================================
   6. WEEK CARDS
   Collapsible card per week. JS auto-collapses future and past weeks,
   expands the current week, and adds status badges to the header.
   Holiday weeks use --away modifier for a slightly dimmer background.
   ============================================================================= */

.week-card {
  background: var(--color-bg-card);
  border: 0.5px solid var(--color-border);
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
}
.week-card--current   { border-color: var(--color-lime); box-shadow: 0 0 0 1px rgba(var(--color-lime-rgb), 0.12); }
.week-card--completed { opacity: 0.6; }
.week-card--away      { background: var(--color-bg); }

.week-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; gap: var(--space-sm); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.week-header-left  { flex: 1; min-width: 0; }
.week-label  { font-family: var(--font-display); font-size: 15px; color: var(--color-text); display: block; margin-bottom: 2px; }
.week-dates  { font-size: 12px; color: var(--color-text-muted); }
.week-header-right { display: flex; align-items: center; gap: var(--space-sm); flex-shrink: 0; }

.week-status-badge          { display: inline-flex; align-items: center; padding: 2px var(--space-sm); border-radius: 10px; font-size: 11px; font-weight: 500; white-space: nowrap; }
.week-status-badge--current { background: rgba(var(--color-lime-rgb), 0.15); color: var(--color-lime); }
.week-status-badge--done    { background: rgba(var(--color-text-muted-rgb), 0.10); color: var(--color-text-muted); }

.week-toggle { background: none; border: none; color: var(--color-text-muted); cursor: pointer; padding: 4px; transition: color var(--transition); -webkit-tap-highlight-color: transparent; display: flex; align-items: center; }
.week-toggle:hover { color: var(--color-text); }

.week-body { overflow: hidden; }
.week-card--collapsed .week-body { display: none; }


/* =============================================================================
   7. SESSION TABLE
   Three columns: Day / Session / Priority. .table-scroll provides horizontal
   scroll on narrow screens without clipping session content.
   ============================================================================= */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 12px; border-radius: var(--radius-sm); }
.week-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 300px; }

.week-table th {
  font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em;
  color: rgba(var(--color-text-muted-rgb), 0.6);
  padding: 6px 14px; text-align: left;
  border-bottom: 0.5px solid var(--color-border); white-space: nowrap;
}
.week-table th:last-child { text-align: right; }

.week-table td {
  padding: 7px 14px;
  border-bottom: 0.5px solid rgba(var(--color-border-rgb), 0.45);
  vertical-align: top; color: var(--color-text); line-height: 1.45;
}
.week-table tr:last-child td { border-bottom: none; }
.td-day  { color: var(--color-text-muted); font-size: 12px; white-space: nowrap; width: 36px; padding-right: 6px; }
.td-prio { white-space: nowrap; text-align: right; padding-left: 6px; width: 60px; }
.td-rest { color: var(--color-text-muted); }

/* Race day row */
.td-day--race  { color: var(--color-pink); font-weight: 600; }
.td-race-desc  { color: var(--color-pink); font-weight: 500; }
.td-race-detail { font-size: 12px; font-weight: 400; color: var(--color-text); }


/* =============================================================================
   8. PRIORITY PILLS
   Three levels: Keep (lime) / Flex (gold) / Drop (muted) / Done (lime).
   ============================================================================= */

.prio       { display: inline-block; font-size: 10px; font-weight: 500; padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
.prio--keep { background: rgba(var(--color-lime-rgb), 0.12); color: var(--color-lime); }
.prio--flex { background: rgba(var(--color-gold-rgb), 0.12); color: var(--color-gold); }
.prio--drop { background: rgba(var(--color-text-muted-rgb), 0.10); color: rgba(var(--color-text-muted-rgb), 0.6); }
.prio--done { background: rgba(var(--color-lime-rgb), 0.12); color: var(--color-lime); }
.prio--race { background: rgba(var(--color-pink-rgb), 0.12); color: var(--color-pink); }


/* =============================================================================
   9. SESSION TYPE BADGES
   Visual tags on each session row indicating the type of effort:

   Shared with Blenheim training plan:
     badge--key       pink    key/priority session
     badge--zone2     lime    aerobic easy running
     badge--hardBike  gold    Zwift structured cycling
     badge--outdoor   coral   outdoor road riding
     badge--fixed     muted   recurring fixed commitments (PT, circuits)

   Training-plan additions:
     badge--tempo     coral   tempo/threshold run
     badge--brick     gold    bike-to-run brick session
     badge--ow        lime    open water / SHAC swim
   ============================================================================= */

.badge          { display: inline-block; font-size: 10px; padding: 1px 5px; border-radius: 3px; font-weight: 500; margin-right: 2px; vertical-align: middle; }
.badge--zone2    { background: rgba(var(--color-lime-rgb),       0.12); color: var(--color-lime); }
.badge--hardBike { background: rgba(var(--color-gold-rgb),       0.12); color: var(--color-gold); }
.badge--outdoor  { background: rgba(var(--color-coral-rgb),      0.12); color: var(--color-coral); }
.badge--key      { background: rgba(var(--color-pink-rgb),       0.12); color: var(--color-pink); }
.badge--fixed    { background: rgba(var(--color-text-muted-rgb), 0.12); color: var(--color-text-muted); }
.badge--tempo    { background: rgba(var(--color-coral-rgb),      0.15); color: var(--color-coral); }
.badge--brick    { background: rgba(var(--color-gold-rgb),       0.15); color: var(--color-gold); }
.badge--ow       { background: rgba(var(--color-lime-rgb),       0.18); color: var(--color-lime); }
.badge--speed    { background: rgba(var(--color-coral-rgb),     0.22); color: var(--color-coral); }


/* =============================================================================
   10. SESSION PURPOSE REVEAL
   Tapping the ⓘ button on any session row reveals coaching notes hidden
   by default. JS toggles the [hidden] attribute and adds .active to the button.
   ============================================================================= */

.session-line { display: flex; align-items: flex-start; gap: 4px; }
.session-line > span:first-child { flex: 1; }

.info-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: rgba(var(--color-text-muted-rgb), 0.4);
  padding: 0 2px; flex-shrink: 0; margin-top: 1px;
  transition: color var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.info-btn:hover, .info-btn.active { color: var(--color-pink); }

.purpose-reveal {
  font-size: 11px; color: var(--color-text-muted); font-style: italic;
  padding: 4px 0 2px; line-height: 1.4;
}


/* =============================================================================
   11. WEEK FOCUS CALLOUT
   Gold star note at the bottom of each week body summarising priorities
   and what to drop if the week gets busy.
   ============================================================================= */

.unmissable {
  margin: 0; padding: 10px 14px;
  border-top: 0.5px solid var(--color-border);
  font-size: 12px; color: var(--color-text-muted);
  background: rgba(var(--color-gold-rgb), 0.04);
  line-height: 1.5;
}
.unmissable::before { content: '★ '; color: var(--color-gold); }