*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:      #070b0f;
    --bg2:     #0d1520;
    --bg3:     #131e2e;
    --border:  #1a2a3a;
    --text:    #dce8f0;
    --muted:   #4a6070;
    --accent:  #b8ff00;
    --accent2: rgba(184,255,0,0.12);
    --ring:    rgba(184,255,0,0.035);

    --z1: #38bdf8;
    --z2: #34d399;
    --z3: #fbbf24;
    --z4: #f87171;

    /* Coggan FTP zones Z1–Z7 */
    --fz1: #94a3b8;
    --fz2: #38bdf8;
    --fz3: #34d399;
    --fz4: #fbbf24;
    --fz5: #fb923c;
    --fz6: #f87171;
    --fz7: #e879f9;
}

:root.light {
    --bg:      #f4f6f0;
    --bg2:     #e8ece0;
    --bg3:     #dde3d2;
    --border:  #c8d0b8;
    --text:    #1a2010;
    --muted:   #7a8a6a;
    --accent:  #4a7c00;
    --accent2: rgba(74,124,0,0.10);
    --ring:    rgba(74,124,0,0.06);

    --z1: #0284c7;
    --z2: #059669;
    --z3: #d97706;
    --z4: #dc2626;

    --fz1: #64748b;
    --fz2: #0284c7;
    --fz3: #059669;
    --fz4: #d97706;
    --fz5: #ea580c;
    --fz6: #dc2626;
    --fz7: #a21caf;
}

html { scroll-behavior: smooth; }

body,
header, .vma-bar, .legend, .table-scroll, footer,
th, td, input {
    transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Barlow Condensed', sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ─── decorative track rings ─────────────────────────────── */
.track-ring {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    border: 1px solid var(--ring);
}
.ring-1 { width: 700px; height: 700px; top: -300px; right: -200px; }
.ring-2 { width: 520px; height: 520px; top: -220px; right: -110px; }
.ring-3 { width: 340px; height: 340px; top: -130px; right: -20px; }

/* ─── tab navigation ────────────────────────────────────── */
.tab-nav {
    display: flex;
    gap: 0;
    padding: 0 2.5rem;
    background: var(--bg2);
    border-bottom: 2px solid var(--border);
}

.tab-btn {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: 0.9rem 1.4rem;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.tab-btn:hover  { color: var(--text); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ─── panel visibility ───────────────────────────────────── */
.tab-panel.hidden { display: none; }

/* ─── ctrl-bar (FTP + Swim panels, mirrors .vma-bar) ─────── */
.ctrl-bar {
    display: flex;
    align-items: flex-start;
    gap: 3rem;
    flex-wrap: wrap;
    padding: 2rem 2.5rem;
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
}

/* ─── section header inside panels ──────────────────────── */
.section-header {
    padding: 1.25rem 2.5rem 0.75rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.3rem;
    letter-spacing: 0.08em;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
}

/* ─── FTP zone cards ─────────────────────────────────────── */
.ftp-zones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    padding: 1.5rem 2.5rem;
    border-bottom: 1px solid var(--border);
}

.ftp-zone-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-top: 3px solid var(--zone-color, var(--border));
    border-radius: 6px;
    padding: 1rem;
    transition: border-color 0.2s;
}

.ftp-zone-card .zone-id {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.85rem;
    color: var(--muted);
    letter-spacing: 0.1em;
}

.ftp-zone-card .zone-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--zone-color, var(--text));
    letter-spacing: 0.02em;
    margin-top: 0.1rem;
}

.ftp-zone-card .zone-range {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    color: var(--muted);
    margin-top: 0.4rem;
}

.ftp-zone-card .zone-watts {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.95rem;
    color: var(--zone-color, var(--text));
    margin-top: 0.2rem;
    font-weight: 600;
}

.ftp-zone-card .zone-tss {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
    color: var(--muted);
    margin-top: 0.15rem;
}

.ftp-zone-card .zone-desc {
    font-size: 0.72rem;
    font-weight: 300;
    color: var(--muted);
    margin-top: 0.5rem;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

/* ─── FTP race table specific ────────────────────────────── */
.col-center {
    text-align: center;
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid rgba(26,42,58,0.6);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
}

.race-note {
    font-size: 0.62rem;
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
    margin-top: 0.2rem;
}

/* ─── CSS swim calculator ────────────────────────────────── */
.css-calc {
    margin-top: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    min-width: 280px;
}

.css-calc summary {
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    font-size: 0.68rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--bg3);
    list-style: none;
    user-select: none;
    transition: color 0.15s;
}

.css-calc summary:hover { color: var(--text); }
.css-calc summary::marker { display: none; }
.css-calc summary::-webkit-details-marker { display: none; }

.css-calc[open] summary { border-bottom: 1px solid var(--border); }

.css-calc-body {
    padding: 0.75rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    background: var(--bg3);
}

.css-calc-body .input-label { min-width: unset; }

.btn-primary {
    background: var(--accent);
    border: none;
    color: var(--bg);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.4rem 0.9rem;
    border-radius: 5px;
    cursor: pointer;
    transition: opacity 0.15s;
}

.btn-primary:hover { opacity: 0.85; }

.css-calc-error {
    font-size: 0.7rem;
    color: var(--z4);
    letter-spacing: 0.05em;
    flex-basis: 100%;
}

/* ─── readout sub-line (W/kg, css raw) ───────────────────── */
.readout-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: var(--muted);
    letter-spacing: 0.05em;
}

/* ─── column alignment override for FTP race table ──────── */
thead th.col-header-center {
    text-align: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.05em;
    font-weight: 400;
    padding: 0.65rem 0.9rem;
    background: var(--bg2);
    border-bottom: 2px solid var(--border);
    color: var(--muted);
}

/* ─── theme toggle ───────────────────────────────────────── */
.theme-toggle {
    position: absolute;
    top: 2rem;
    right: 2.5rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 99px;
    padding: 0.35rem 0.75rem 0.35rem 0.5rem;
    transition: background 0.2s, border-color 0.2s;
}

.theme-toggle:hover {
    border-color: var(--accent);
}

.theme-toggle .toggle-track {
    width: 32px;
    height: 18px;
    border-radius: 99px;
    background: var(--border);
    position: relative;
    transition: background 0.2s;
    flex-shrink: 0;
}

.theme-toggle .toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--muted);
    transition: transform 0.2s, background 0.2s;
}

:root.light .theme-toggle .toggle-track { background: var(--accent); }
:root.light .theme-toggle .toggle-thumb {
    transform: translateX(14px);
    background: #fff;
}

.theme-toggle .toggle-label {
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}

/* ─── header ─────────────────────────────────────────────── */
header {
    padding: 2.5rem 2.5rem 2rem;
    border-bottom: 1px solid var(--border);
    position: relative;
}

.eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.6rem;
}

h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3.2rem, 7vw, 5.5rem);
    line-height: 0.88;
    letter-spacing: 0.01em;
}

h1 em {
    color: var(--accent);
    font-style: normal;
}

.tagline {
    margin-top: 0.8rem;
    font-size: 0.9rem;
    font-weight: 300;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ─── VMA picker ─────────────────────────────────────────── */
.vma-bar {
    display: flex;
    align-items: center;
    gap: 3rem;
    flex-wrap: wrap;
    padding: 2rem 2.5rem;
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
}

.vma-readout {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 140px;
}

.readout-label {
    font-size: 0.65rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--muted);
}

.readout-big {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 4.5rem;
    line-height: 1;
    color: var(--accent);
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}

.readout-unit {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.2rem;
    font-weight: 300;
    color: var(--muted);
}

.readout-pace {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: var(--muted);
    letter-spacing: 0.05em;
}

/* ─── slider controls ────────────────────────────────────── */
.slider-wrap {
    flex: 1;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.slider-track-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.slider-lim {
    font-size: 0.7rem;
    color: var(--muted);
    letter-spacing: 0.08em;
    white-space: nowrap;
}

input[type="range"] {
    -webkit-appearance: none;
    flex: 1;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    margin-top: -9px;
    transition: box-shadow 0.15s, transform 0.15s;
    box-shadow: 0 0 0 0 rgba(184,255,0,0);
}

input[type="range"]:hover::-webkit-slider-thumb,
input[type="range"]:active::-webkit-slider-thumb {
    box-shadow: 0 0 16px rgba(184,255,0,0.5);
    transform: scale(1.15);
}

.direct-input-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

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

input[type="number"] {
    width: 72px;
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: 'JetBrains Mono', monospace;
    font-size: 1rem;
    padding: 0.4rem 0.5rem;
    border-radius: 5px;
    text-align: center;
    outline: none;
    transition: border-color 0.15s;
}

input[type="number"]:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(184,255,0,0.1);
}

/* ─── zone legend ────────────────────────────────────────── */
.legend {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    padding: 1rem 2.5rem;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ─── table ──────────────────────────────────────────────── */
.table-scroll {
    overflow-x: auto;
    padding: 2rem 2.5rem 3rem;
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 980px;
}

thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 0.65rem 0.9rem;
    text-align: center;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    letter-spacing: 0.04em;
}

th.col-dist {
    text-align: left;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--bg);
    min-width: 90px;
}

th.col-pct {
    background: var(--bg2);
    font-size: 1.05rem;
    border-bottom: 2px solid var(--border);
}

th.col-pct .th-pct  { display: block; }

th.col-pct .th-speed {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem;
    font-weight: 300;
    color: var(--muted);
    display: block;
    margin-top: 0.1rem;
}

th.col-pct .th-pace {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.58rem;
    font-weight: 300;
    color: var(--muted);
    opacity: 0.75;
    display: block;
}

th.col-ref {
    background: var(--accent2) !important;
    border-left: 1px solid rgba(184,255,0,0.25);
    border-right: 1px solid rgba(184,255,0,0.25);
}

tbody tr { transition: background 0.08s; }

tbody tr:hover td { background: rgba(13,21,32,0.8); }

tbody td {
    padding: 0.55rem 0.9rem;
    text-align: center;
    border-bottom: 1px solid rgba(26,42,58,0.6);
    transition: background 0.08s;
}

td.col-dist {
    text-align: left;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
    letter-spacing: 0.04em;
    color: var(--muted);
}

td.col-time {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
}

td.col-ref {
    background: var(--accent2);
    border-left: 1px solid rgba(184,255,0,0.12);
    border-right: 1px solid rgba(184,255,0,0.12);
}

/* ─── zone text colors ───────────────────────────────────── */
.z1 { color: var(--z1); }
.z2 { color: var(--z2); }
.z3 { color: var(--z3); }
.z4 { color: var(--z4); }

/* ─── footer ─────────────────────────────────────────────── */
footer {
    padding: 1.5rem 2.5rem;
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted);
    border-top: 1px solid var(--border);
    text-align: center;
}

/* ─── entrance animations ────────────────────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

header       { animation: fadeUp 0.4s ease both; }
.vma-bar     { animation: fadeUp 0.4s 0.10s ease both; }
.legend      { animation: fadeUp 0.4s 0.15s ease both; }
.table-scroll { animation: fadeUp 0.4s 0.20s ease both; }

/* ─── responsive ─────────────────────────────────────────── */
@media (max-width: 640px) {
    header, .vma-bar, .ctrl-bar, .legend, .table-scroll,
    .ftp-zones, .section-header { padding-left: 1.2rem; padding-right: 1.2rem; }
    .vma-bar, .ctrl-bar { gap: 1.5rem; }
    .tab-nav { padding: 0 1.2rem; }
    .tab-btn { padding: 0.75rem 0.8rem; font-size: 0.7rem; }
    .ftp-zones { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}