/* ============================================================
   VO2 Max Calculator — vo2max.css
   Load /css/style.css FIRST, then this file
   ============================================================ */

/* ── Method Tabs ─────────────────────────────────────────── */
.method-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:20px; }
.method-tab {
  padding:8px 14px; border-radius:10px; border:1.5px solid #e2e8f0;
  background:#f8fafc; font-family:'Lexend',sans-serif; font-size:12px;
  font-weight:600; cursor:pointer; transition:all 0.2s; color:#64748b;
}
.method-tab.active { background:#1D3557; border-color:#1D3557; color:#fff; }
.method-tab:hover:not(.active) { border-color:#1D3557; color:#1D3557; }
.method-tab span { font-size:14px; margin-right:4px; }

/* ── Method Panel ────────────────────────────────────────── */
.method-panel { display:none; }
.method-panel.active { display:block; animation:fadeInUp 0.35s ease; }

/* ── VO2 Gauge ───────────────────────────────────────────── */
.vo2-gauge-wrap { display:flex; justify-content:center; margin-bottom:16px; }
#vo2-gauge-needle { transform-origin:150px 130px; transition:transform 1.2s cubic-bezier(0.34,1.56,0.64,1); }

/* ── VO2 Scale Bar ───────────────────────────────────────── */
.vo2-scale-bar { display:flex; border-radius:8px; overflow:hidden; height:10px; margin-bottom:5px; }
.vo2-seg-vp  { flex:1; background:#ef4444; }
.vo2-seg-p   { flex:1; background:#fb923c; }
.vo2-seg-avg { flex:1; background:#facc15; }
.vo2-seg-g   { flex:1; background:#86efac; }
.vo2-seg-ex  { flex:1; background:#22c55e; }
.vo2-seg-sup { flex:1; background:#15803d; }
.vo2-scale-labels { display:flex; justify-content:space-between; font-family:'Inter',sans-serif; font-size:10px; color:#94a3b8; margin-bottom:20px; }

/* ── Result Cards ────────────────────────────────────────── */
.vo2-result-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
.vo2-result-card { background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; padding:12px; text-align:center; }
.vo2-result-val { font-family:'Lexend',sans-serif; font-weight:800; font-size:22px; color:#1D3557; line-height:1; margin-bottom:3px; }
.vo2-result-label { font-family:'Inter',sans-serif; font-size:10px; color:#94a3b8; text-transform:uppercase; letter-spacing:0.05em; }

/* ── Category Badge ──────────────────────────────────────── */
.vo2-category-badge { display:inline-flex; align-items:center; gap:6px; padding:6px 16px; border-radius:999px; font-family:'Lexend',sans-serif; font-weight:700; font-size:13px; border:1.5px solid; margin-bottom:12px; }
.vo2-cat-vp  { color:#991b1b; background:#fee2e2; border-color:#fca5a5; }
.vo2-cat-p   { color:#9a3412; background:#ffedd5; border-color:#fdba74; }
.vo2-cat-avg { color:#854d0e; background:#fef9c3; border-color:#fde047; }
.vo2-cat-g   { color:#166534; background:#dcfce7; border-color:#86efac; }
.vo2-cat-ex  { color:#14532d; background:#d1fae5; border-color:#6ee7b7; }
.vo2-cat-sup { color:#1e3a5f; background:#dbeafe; border-color:#93c5fd; }

/* ── Training Zone Cards ─────────────────────────────────── */
.zone-cards { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-bottom:16px; }
.zone-card { border-radius:10px; padding:10px 6px; text-align:center; border:1px solid; }
.zone-card-num { font-family:'Lexend',sans-serif; font-weight:700; font-size:11px; margin-bottom:2px; }
.zone-card-name { font-family:'Inter',sans-serif; font-size:9px; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:4px; }
.zone-card-val { font-family:'Lexend',sans-serif; font-weight:800; font-size:13px; }
.zone-card-pct { font-family:'Inter',sans-serif; font-size:9px; opacity:0.7; }
.z1 { background:#dbeafe; border-color:#93c5fd; color:#1e40af; }
.z2 { background:#d1fae5; border-color:#6ee7b7; color:#065f46; }
.z3 { background:#fef9c3; border-color:#fde047; color:#854d0e; }
.z4 { background:#ffedd5; border-color:#fdba74; color:#9a3412; }
.z5 { background:#fee2e2; border-color:#fca5a5; color:#991b1b; }

/* ── Race Pace Panel ─────────────────────────────────────── */
.race-pace-panel { background:#f0f9ff; border:1px solid #bae6fd; border-radius:12px; padding:14px 16px; margin-bottom:12px; display:none; }
.race-pace-panel.show { display:block; }
.race-pace-title { font-family:'Lexend',sans-serif; font-weight:700; color:#0c4a6e; font-size:13px; margin-bottom:10px; display:flex; align-items:center; gap:6px; }
.pace-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.pace-item { background:#fff; border:1px solid #bae6fd; border-radius:8px; padding:10px; }
.pace-race { font-family:'Lexend',sans-serif; font-weight:600; color:#0369a1; font-size:12px; margin-bottom:2px; }
.pace-val  { font-family:'Lexend',sans-serif; font-weight:800; color:#1D3557; font-size:16px; }
.pace-sub  { font-family:'Inter',sans-serif; font-size:10px; color:#94a3b8; }

/* ── Improvement Tips Panel ──────────────────────────────── */
.improvement-panel { background:#f0fdf4; border:1px solid #bbf7d0; border-radius:12px; padding:14px 16px; margin-bottom:12px; display:none; }
.improvement-panel.show { display:block; }
.improvement-title { font-family:'Lexend',sans-serif; font-weight:700; color:#14532d; font-size:13px; margin-bottom:8px; }
.improvement-item { display:flex; align-items:flex-start; gap:8px; font-family:'Inter',sans-serif; font-size:12px; color:#166534; margin-bottom:6px; line-height:1.5; }
.improvement-item::before { content:'✓'; font-weight:700; flex-shrink:0; }

/* ── Reference Table (VO2 Max by age/sex) ────────────────── */
.vo2-ref-table { width:100%; border-collapse:collapse; border-radius:12px; overflow:hidden; border:1px solid #e2e8f0; margin-bottom:24px; }
.vo2-ref-table thead tr { background:#1D3557; }
.vo2-ref-table th { text-align:left; padding:10px 12px; font-family:'Lexend',sans-serif; font-weight:600; font-size:11px; color:#fff; }
.vo2-ref-table td { padding:9px 12px; font-family:'Inter',sans-serif; font-size:12px; color:#475569; border-bottom:1px solid #f1f5f9; }
.vo2-ref-table tbody tr:nth-child(even) { background:#f8fafc; }
.vo2-ref-table tbody tr:last-child td { border-bottom:none; }
.td-vp  { color:#dc2626; font-weight:600; }
.td-p   { color:#ea580c; font-weight:600; }
.td-avg { color:#ca8a04; font-weight:600; }
.td-g   { color:#16a34a; font-weight:600; }
.td-ex  { color:#15803d; font-weight:600; }
.td-sup { color:#1d4ed8; font-weight:600; }

/* ── Formula Box ─────────────────────────────────────────── */
.formula-box { background:#1e293b; border-radius:12px; padding:18px 20px; margin-bottom:20px; }
.formula-label { color:#94a3b8; font-size:11px; font-family:'Inter',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:8px; }
.formula-eq { font-family:'Courier New',monospace; font-size:13px; line-height:1.9; }
.f-green  { color:#4ade80; }
.f-white  { color:#e2e8f0; }
.f-yellow { color:#facc15; }
.f-blue   { color:#93c5fd; }
.f-gray   { color:#64748b; }

/* ── Device Comparison Table ─────────────────────────────── */
.device-table { width:100%; border-collapse:collapse; border-radius:12px; overflow:hidden; border:1px solid #e2e8f0; margin-bottom:24px; }
.device-table th { background:#1D3557; color:#fff; padding:10px 14px; font-family:'Lexend',sans-serif; font-size:12px; font-weight:600; text-align:left; }
.device-table td { padding:10px 14px; font-family:'Inter',sans-serif; font-size:12px; color:#475569; border-bottom:1px solid #f1f5f9; }
.device-table tbody tr:nth-child(even) { background:#f8fafc; }

/* ── Stat Strip ──────────────────────────────────────────── */
.stat-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:24px; }
.stat-strip-box { background:#fff; border:1px solid #e2e8f0; border-radius:10px; padding:12px; text-align:center; }
.stat-strip-num { font-family:'Lexend',sans-serif; font-weight:800; font-size:20px; color:#1D3557; }
.stat-strip-num.red { color:#E63946; }
.stat-strip-label { font-family:'Inter',sans-serif; font-size:10px; color:#94a3b8; text-transform:uppercase; letter-spacing:0.05em; margin-top:2px; }

/* ── Hero Badge ──────────────────────────────────────────── */
.vo2-hero-badge { display:inline-flex; align-items:center; gap:6px; background:linear-gradient(135deg,#1D3557 0%,#2d4f7f 100%); color:#fff; border-radius:20px; padding:5px 14px; font-size:12px; font-weight:600; font-family:'Lexend',sans-serif; letter-spacing:0.3px; margin-bottom:16px; }

/* ── Result Area ─────────────────────────────────────────── */
#vo2-result-area { display:none; margin-top:24px; }
#vo2-result-area.show { display:block; animation:fadeInUp 0.5s ease forwards; }
#vo2-interpretation { background:#f8fafc; border-radius:12px; padding:14px 16px; font-family:'Inter',sans-serif; font-size:13px; color:#334155; line-height:1.7; margin-bottom:12px; }

/* ── Tips Grid ───────────────────────────────────────────── */
.tips-grid-vo2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:24px; }
.tip-card { background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:16px; }
.tip-icon { font-size:22px; margin-bottom:8px; }
.tip-title { font-family:'Lexend',sans-serif; font-weight:600; color:#1D3557; font-size:14px; margin-bottom:6px; }
.tip-body { font-family:'Inter',sans-serif; font-size:12px; color:#64748b; line-height:1.6; }

/* ── Highlight Box ───────────────────────────────────────── */
.highlight-box { background:linear-gradient(135deg,#fff5f5 0%,#fef2f2 100%); border-left:4px solid #E63946; border-radius:0 12px 12px 0; padding:16px 18px; margin-bottom:24px; }
.highlight-box p { font-size:13px; margin-bottom:0; }

/* ── Save & Compare ──────────────────────────────────────── */
#vo2-save-compare { display:none; margin-bottom:12px; }
#vo2-save-compare.show { display:block; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:768px) {
  .method-tabs { gap:4px; }
  .method-tab { font-size:11px; padding:7px 10px; }
  .zone-cards { grid-template-columns:repeat(3,1fr); }
  .pace-grid { grid-template-columns:1fr 1fr; }
  .tips-grid-vo2 { grid-template-columns:1fr; }
  .stat-strip { grid-template-columns:repeat(2,1fr); }
  .vo2-result-cards { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:480px) {
  .zone-cards { grid-template-columns:1fr 1fr; }
  .vo2-result-cards { grid-template-columns:1fr 1fr; }
  .vo2-result-cards .vo2-result-card:last-child { grid-column:1/-1; }
}
@media print {
  .method-tabs,.share-row,.sidebar-card,.calc-btn { display:none !important; }
}