/* ============================================================
   Training Hub — locked design system v2 (light, emerald accent)
   ------------------------------------------------------------
   One source of truth. PTs can white-label by overriding ONLY:
     --accent          (their brand colour)
     --accent-hover
     --accent-soft
     --accent-soft-text
   Everything else is locked: layout, typography, spacing,
   radii, shadows, component shapes.

   Scale-of-greys palette inspired by Yazio + JTF Walk:
   - Warm-neutral page bg, pure-white cards
   - One accent (emerald default) used sparingly
   - Black handles primary CTAs (max contrast)
   - Status colours (warn/danger) used semantically only
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  /* ---------- Surfaces ---------- */
  --bg:               #F4F5F7;   /* page background — warm neutral */
  --bg-alt:           #FFFFFF;
  --surface:          #FFFFFF;   /* cards, sheets */
  --surface-2:        #FAFAFA;   /* hovered/elevated cards */
  --surface-sunken:   #ECEEF1;   /* inputs, inactive tabs */
  --surface-dark:     #0A0A0A;   /* primary CTAs, footer */

  /* ---------- Type ---------- */
  --text:             #0A0A0A;   /* near-black, headings + body */
  --text-secondary:   #424242;
  --text-dim:         #757575;
  --text-faint:       #A0A0A0;
  --text-on-dark:     #FFFFFF;
  --text-on-accent:   #FFFFFF;

  /* ---------- Accent (PT white-label override target) ---------- */
  --accent:           #10B981;   /* emerald 500 */
  --accent-hover:     #0EA371;
  --accent-soft:      #D1FAE5;   /* tinted bg for chips/highlights */
  --accent-soft-text: #047857;   /* readable text on accent-soft */
  --accent-glow:      rgba(16, 185, 129, 0.18);

  /* ---------- AI surface tokens (purple→pink, NOT white-labelled) ---------- */
  /* The AI feature surface (badges, gradients, ✨ accents) keeps its own
     identity across all PT brands so the AI differentiator is recognisable
     regardless of the active accent. PTs cannot override these. */
  --ai-accent:        #A855F7;   /* purple 500 */
  --ai-accent-2:      #EC4899;   /* pink 500 */
  --ai-accent-soft:   #C084FC;   /* purple 400 — softened text/highlights */
  /* RGB triplets for use inside rgba(...) at varying alpha — paired with
     the hex above. Lets `rgba(var(--ai-accent-rgb), .3)` work without
     hardcoding the numbers throughout markup. */
  --ai-accent-rgb:    168, 85, 247;
  --ai-accent-2-rgb:  236, 72, 153;
  --ai-gradient:      linear-gradient(135deg, var(--ai-accent), var(--ai-accent-2));
  --ai-gradient-soft: linear-gradient(135deg, rgba(var(--ai-accent-rgb), 0.15), rgba(var(--ai-accent-2-rgb), 0.10));

  /* ---------- Status (semantic, not branded) ---------- */
  --success:          #10B981;
  --success-soft:     #D1FAE5;
  --success-text:     #047857;
  --warning:          #F59E0B;
  --warning-soft:     #FEF3C7;
  --warning-text:     #B45309;
  --danger:           #EF4444;
  --danger-soft:      #FEE2E2;
  --danger-text:      #B91C1C;
  --info:             #3B82F6;
  --info-soft:        #DBEAFE;
  --info-text:        #1D4ED8;

  /* ---------- Borders ---------- */
  --border:           rgba(15, 23, 42, 0.08);
  --border-strong:    rgba(15, 23, 42, 0.14);
  --border-input:     rgba(15, 23, 42, 0.18);
  --border-focus:     var(--accent);

  /* ---------- Radius ---------- */
  --radius-xs:        6px;
  --radius-sm:        8px;
  --radius:           12px;       /* default cards, buttons */
  --radius-lg:        16px;
  --radius-xl:        20px;
  --radius-pill:      999px;

  /* ---------- Shadow (near-flat) ---------- */
  --shadow-xs:        0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm:        0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow:           0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-lg:        0 10px 30px rgba(15, 23, 42, 0.08);

  /* ---------- Spacing scale (4-pt baseline) ---------- */
  --space-1:          4px;
  --space-2:          8px;
  --space-3:          12px;
  --space-4:          16px;
  --space-5:          20px;
  --space-6:          24px;
  --space-7:          28px;
  --space-8:          32px;
  --space-10:         40px;
  --space-12:         48px;
  --space-16:         64px;

  /* ---------- Type scale ---------- */
  --text-xs:          11px;
  --text-sm:          13px;
  --text-base:        15px;
  --text-md:          17px;
  --text-lg:          20px;
  --text-xl:          24px;
  --text-2xl:         30px;
  --text-3xl:         36px;
  --text-display:     44px;

  /* ---------- Weights ---------- */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-black:     900;

  /* ---------- Fonts ---------- */
  --font-sans:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ---------- Transition ---------- */
  --t-fast:           120ms ease;
  --t:                180ms ease;

  /* ---------- Misc ---------- */
  --safe-top:         env(safe-area-inset-top);
  --safe-bottom:      env(safe-area-inset-bottom);
  --max-content:      720px;     /* mobile-first reading width */
  --max-portal:       1280px;    /* desktop PT portal width */
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.55;
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  min-height: 100vh;
  min-height: 100dvh;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
input, textarea, select { font: inherit; }
a { color: var(--accent-soft-text); text-decoration: none; font-weight: var(--weight-semibold); }
a:hover { text-decoration: underline; }

/* ============================================================
   Typography utilities
   ============================================================ */
.h-display { font-size: var(--text-display); font-weight: var(--weight-black); letter-spacing: -0.03em; line-height: 1.05; }
.h-1       { font-size: var(--text-3xl);     font-weight: var(--weight-extrabold); letter-spacing: -0.025em; line-height: 1.1; }
.h-2       { font-size: var(--text-2xl);     font-weight: var(--weight-extrabold); letter-spacing: -0.02em; line-height: 1.15; }
.h-3       { font-size: var(--text-xl);      font-weight: var(--weight-extrabold); letter-spacing: -0.015em; line-height: 1.2; }
.h-4       { font-size: var(--text-lg);      font-weight: var(--weight-bold);      letter-spacing: -0.01em; line-height: 1.3; }
.h-5       { font-size: var(--text-md);      font-weight: var(--weight-bold);      line-height: 1.35; }
.eyebrow   { font-size: var(--text-xs); font-weight: var(--weight-extrabold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }

.text-dim       { color: var(--text-dim); }
.text-secondary { color: var(--text-secondary); }
.text-faint     { color: var(--text-faint); }
.text-accent    { color: var(--accent-soft-text); }
.text-danger    { color: var(--danger-text); }
.text-warning   { color: var(--warning-text); }
.text-success   { color: var(--success-text); }
.tabular        { font-variant-numeric: tabular-nums; }

/* ============================================================
   Layout helpers
   ============================================================ */
.app-shell {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: calc(var(--space-5) + var(--safe-top)) var(--space-5) calc(var(--space-12) + var(--safe-bottom));
}
.portal-shell {
  max-width: var(--max-portal);
  margin: 0 auto;
  padding: var(--space-6) var(--space-6) var(--space-12);
}
.stack-2 > * + * { margin-top: var(--space-2); }
.stack-3 > * + * { margin-top: var(--space-3); }
.stack-4 > * + * { margin-top: var(--space-4); }
.stack-5 > * + * { margin-top: var(--space-5); }
.stack-6 > * + * { margin-top: var(--space-6); }
.stack-8 > * + * { margin-top: var(--space-8); }
.row { display: flex; align-items: center; gap: var(--space-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.row-tight { display: flex; align-items: center; gap: var(--space-2); }
.spacer { flex: 1; }

/* ============================================================
   Section header — bold black title + optional accent action link
   ============================================================ */
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: var(--space-8) 0 var(--space-4);
}
.section-header:first-child { margin-top: 0; }
.section-header h2 {
  font-size: var(--text-xl);
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.02em;
  color: var(--text);
}
.section-header .action {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--accent-soft-text);
}
.section-header .action:hover { text-decoration: underline; }

/* ============================================================
   Card — the universal container
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
  transition: border-color var(--t), box-shadow var(--t);
}
.card.tight { padding: var(--space-4); }
.card.airy { padding: var(--space-6); }
.card.elevated { box-shadow: var(--shadow-sm); }
.card.dark {
  background: var(--surface-dark);
  color: var(--text-on-dark);
  border-color: transparent;
}
.card.accent-soft {
  background: var(--accent-soft);
  border-color: transparent;
}

/* ============================================================
   Buttons
   --------
   Primary  = black bg, white text  (the main CTA on a screen)
   Accent   = emerald bg, white     (success/save actions)
   Secondary= white bg, dark border (alternate / cancel)
   Ghost    = transparent, gray hover
   Danger   = red text, red soft bg on hover
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 11px 18px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  -webkit-tap-highlight-color: transparent;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.full { width: 100%; }
.btn.lg { padding: 14px 22px; font-size: var(--text-base); }
.btn.sm { padding: 7px 12px; font-size: var(--text-xs); border-radius: var(--radius-sm); }
.btn.pill { border-radius: var(--radius-pill); }

.btn-primary {
  background: var(--surface-dark);
  color: var(--text-on-dark);
}
.btn-primary:hover { background: #1F1F1F; }

.btn-accent {
  background: var(--accent);
  color: var(--text-on-accent);
}
.btn-accent:hover { background: var(--accent-hover); }

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-secondary:hover { background: var(--surface-2); border-color: var(--text); }

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}
.btn-ghost:hover { background: var(--surface-sunken); color: var(--text); }

.btn-danger {
  background: var(--danger-soft);
  color: var(--danger-text);
}
.btn-danger:hover { background: #FECACA; }

.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--text);
}
.btn-icon:hover { background: #DEE0E4; }

/* ============================================================
   Inputs
   ============================================================ */
.field { margin-bottom: var(--space-4); }
.field label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.input, input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], input[type="search"],
input[type="date"], input[type="time"], input[type="url"],
input:not([type]), select, textarea {
  width: 100%;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-input);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: var(--text-base);   /* 15px ≥ 16px-ish, prevents iOS zoom when scaled */
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
textarea { resize: vertical; min-height: 100px; }

/* iOS focus-zoom mitigation: bump to 16px on small viewports */
@media (max-width: 640px) {
  .input, input, select, textarea { font-size: 16px; }
}

/* ============================================================
   Tabs — uniform pills (no per-tab colour)
   ============================================================ */
.tab-bar {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: var(--space-1);
}
.tab-bar::-webkit-scrollbar { display: none; }

.tab {
  flex: 0 0 auto;
  padding: 9px 16px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-dim);
  background: var(--surface-sunken);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  transition: background var(--t-fast), color var(--t-fast);
}
.tab:hover { background: #DEE0E4; color: var(--text); }
.tab.active {
  background: var(--surface-dark);
  color: var(--text-on-dark);
}

/* Underlined tabs variant (Yazio-style "DISCOVER / MY FAVORITES") */
.tab-bar-underline {
  display: flex;
  gap: var(--space-6);
  border-bottom: 1px solid var(--border);
}
.tab-underline {
  padding: var(--space-3) 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab-underline.active {
  color: var(--accent-soft-text);
  border-bottom-color: var(--accent);
}

/* ============================================================
   Badges — uniform shape, semantic colour
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px 9px;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  white-space: nowrap;
}
.badge.success { background: var(--success-soft); color: var(--success-text); }
.badge.warning { background: var(--warning-soft); color: var(--warning-text); }
.badge.danger  { background: var(--danger-soft); color: var(--danger-text); }
.badge.info    { background: var(--info-soft); color: var(--info-text); }
.badge.dark    { background: var(--surface-dark); color: var(--text-on-dark); }
.badge.accent  { background: var(--accent-soft); color: var(--accent-soft-text); }

/* ============================================================
   Stat card — big number, small label (Yazio's "3,956 / Cal left")
   ============================================================ */
.stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stat .num {
  font-size: var(--text-2xl);
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.stat .label {
  font-size: var(--text-sm);
  color: var(--text-dim);
  font-weight: var(--weight-medium);
}
.stat-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr 1fr;
}
.stat-grid.three { grid-template-columns: repeat(3, 1fr); }

/* ============================================================
   Progress bar
   ============================================================ */
.progress {
  width: 100%;
  height: 8px;
  background: var(--surface-sunken);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.progress > .fill {
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-pill);
  transition: width var(--t);
}
.progress.thin { height: 4px; }

/* ============================================================
   Expandable row — progressive disclosure
   Default state shows essentials only; .open reveals detail.
   ============================================================ */
.expand-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--t);
}
.expand-row + .expand-row { margin-top: var(--space-2); }
.expand-row.open { border-color: var(--border-strong); }

.expand-row .head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  cursor: pointer;
  user-select: none;
}
.expand-row .head .title {
  flex: 1;
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--text);
  letter-spacing: -0.01em;
}
.expand-row .head .meta {
  font-size: var(--text-sm);
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.expand-row .chev {
  width: 20px;
  height: 20px;
  color: var(--text-faint);
  transition: transform var(--t);
}
.expand-row.open .chev { transform: rotate(180deg); }

.expand-row .body {
  display: none;
  padding: 0 var(--space-4) var(--space-4);
  border-top: 1px solid var(--border);
  padding-top: var(--space-4);
}
.expand-row.open .body { display: block; }

/* ============================================================
   Top bar — minimal: brand + user menu
   ============================================================ */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) 0;
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
}
.topbar .brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-md);
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.02em;
  color: var(--text);
}
.topbar .brand .mark {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  background: var(--surface-dark);
  color: var(--text-on-dark);
  display: grid;
  place-items: center;
  font-weight: var(--weight-black);
  font-size: var(--text-base);
}

/* ============================================================
   Bottom nav — fixed, 3–5 items, icon + label
   ============================================================ */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: var(--space-2) var(--space-2) calc(var(--space-2) + var(--safe-bottom));
  display: flex;
  z-index: 50;
}
.bottom-nav .nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--space-2);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: var(--text-dim);
  border-radius: var(--radius-sm);
  background: none;
  transition: color var(--t-fast), background var(--t-fast);
}
.bottom-nav .nav-item .icon {
  width: 24px; height: 24px;
  display: grid; place-items: center;
}
.bottom-nav .nav-item.active {
  color: var(--accent-soft-text);
}
.bottom-nav .nav-item.active .icon { color: var(--accent); }

/* ============================================================
   Empty state
   ============================================================ */
.empty {
  text-align: center;
  padding: var(--space-12) var(--space-5);
  color: var(--text-dim);
}
.empty .glyph {
  font-size: 48px;
  margin-bottom: var(--space-4);
  opacity: 0.6;
}
.empty .title {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--text);
  margin-bottom: var(--space-2);
}

/* ============================================================
   Divider
   ============================================================ */
.divider {
  height: 1px;
  background: var(--border);
  margin: var(--space-5) 0;
}

/* ============================================================
   Utility
   ============================================================ */
.hide { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;
}