/* Swimming Training Center — dark theme.
   Palet: bijna-zwart met een blauwe ondertoon (diep water), één ijsblauw accent.
   De zone-kleuren (groen/geel/oranje/rood) zijn semantisch en blijven staan. */
:root {
    --bg: #070C13;
    --bg-card: #0F1721;
    --bg-card-hover: #16202D;
    --border: #1E2A38;
    --text: #E9EFF6;
    --text-dim: #8496AC;
    --accent: #38BDF8;
    --accent-2: #22D3EE;
    --accent-soft: rgba(56, 189, 248, 0.14);
    --green: #6fcf3f;
    --yellow: #f2c94c;
    --orange: #f2994a;
    --red: #eb5757;
    --radius: 16px;
    --nav-height: 64px;
    --font: 'Archivo', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom));
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Cijfers die je afleest (tijden, TSS, meters) in mono: leest als meetinstrument */
.mono, .stat-value, .day-num { font-family: var(--font-mono); font-feature-settings: "tnum"; }

.app-main {
    max-width: 640px;
    margin: 0 auto;
    padding: 16px;
}
/* Brede pagina's (bijv. trainingen-editor): volle breedte op desktop */
.app-main.full { max-width: none; }

/* Landing page: full-bleed secties, eigen ritme (zie index.php) */
body.landing { padding-bottom: 0; }
body.landing .app-main { max-width: none; padding: 0; }

h1 { font-size: 1.6rem; margin: 8px 0 4px; font-weight: 800; letter-spacing: -0.5px; }
h2 { font-size: 1.15rem; margin: 20px 0 10px; font-weight: 700; letter-spacing: -0.3px; }
p { line-height: 1.55; }
a { color: var(--accent); }

.text-dim { color: var(--text-dim); }

/* ── Super admin bar ─────────────────────────────────────────────────────── */
.superadmin-bar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background: #10131a;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
    /* Op smalle schermen past deze balk niet; laat hem in zichzelf scrollen in
       plaats van het hele document breder te maken (dat gaf een ongebruikte
       strook rechts van alle andere content). */
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
}
.superadmin-bar::-webkit-scrollbar { display: none; }
.superadmin-bar > * { flex: 0 0 auto; }
.superadmin-label { color: var(--yellow); font-weight: 700; }
.superadmin-bar a { color: var(--text-dim); text-decoration: none; }
.btn-edit-toggle {
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px 12px;
    cursor: pointer;
    font-weight: 700;
}
.btn-edit-toggle.active { background: var(--yellow); color: #10131a; }

/* Bewerkbare teksten in edit-modus */
body.edit-mode .stc-edit {
    outline: 1px dashed var(--yellow);
    outline-offset: 2px;
    cursor: text;
    border-radius: 3px;
}
body.edit-mode .stc-edit:focus {
    outline: 2px solid var(--yellow);
    background: rgba(242, 201, 76, 0.08);
}
.stc-edit.saved { outline-color: var(--green) !important; }

/* ── Bottom nav ──────────────────────────────────────────────────────────── */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(var(--nav-height) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    display: flex;
    background: #10131a;
    border-top: 1px solid var(--border);
    z-index: 40;
}
.bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--text-dim);
    text-decoration: none;
    font-size: 0.72rem;
}
/* Actieve tab: accentkleur + een streepje bovenaan, zodat je in één oogopslag
   ziet op welke pagina je staat. */
.bottom-nav a { position: relative; }
.bottom-nav a.active { color: var(--accent); font-weight: 700; }
.bottom-nav a.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 22%;
    right: 22%;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--accent);
}
.bottom-nav .nav-icon { font-size: 1.25rem; }

/* ── Desktop-shell: zijbalk + breekpunt ──────────────────────────────────────
   Onder 900px verandert er niets (mobiel: bottom-nav, smalle kolom). Vanaf 900px
   verschijnt links een vaste zijbalk en verdwijnt de bottom-nav. */
.app-sidebar { display: none; }
.sidebar-brand {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none; color: var(--text);
    padding: 6px 10px 18px;
}
.sidebar-brand-mark {
    font-weight: 800; letter-spacing: 0.5px;
    background: var(--accent); color: #fff;
    border-radius: 8px; padding: 6px 9px; font-size: 0.9rem;
}
.sidebar-brand-text { font-size: 0.92rem; font-weight: 600; line-height: 1.2; }
.sidebar-nav { display: flex; flex-direction: column; gap: 3px; }
.sidebar-nav a {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 10px;
    color: var(--text-dim); text-decoration: none; font-size: 0.95rem;
    transition: background 0.12s, color 0.12s;
}
.sidebar-nav a:hover { background: var(--bg-card); color: var(--text); }
.sidebar-nav a.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.sidebar-nav .nav-icon { font-size: 1.15rem; width: 22px; text-align: center; }

@media (min-width: 900px) {
    body.has-sidebar { padding-bottom: 0; }
    body.has-sidebar .layout { margin-left: 232px; }
    body.has-sidebar .bottom-nav { display: none; }

    body.has-sidebar .app-sidebar {
        display: flex; flex-direction: column;
        position: fixed; top: 0; left: 0; bottom: 0;
        width: 232px;
        background: #10131a;
        border-right: 1px solid var(--border);
        padding: 16px 12px;
        overflow-y: auto;
        z-index: 60;
    }

    /* Meer ademruimte en breedte op desktop. Content blijft gecentreerd
       (margin:0 auto) zolang de pagina's nog niet breed gevuld zijn; volle
       pagina's vullen de hele contentbreedte. */
    .app-main { max-width: 1080px; padding: 28px 36px; }
    .app-main.full { max-width: none; }

    h1 { font-size: 1.9rem; }
    h2 { font-size: 1.3rem; }
}

/* ── Cards & knoppen ─────────────────────────────────────────────────────── */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 12px;
}
.card-tap { cursor: pointer; transition: background 0.15s; }
.card-tap:hover { background: var(--bg-card-hover); }

.btn {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 12px 20px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}
.btn:hover { filter: brightness(1.1); }
.btn-secondary { background: var(--bg-card); border: 1px solid var(--border); color: var(--text); }
.btn-danger { background: var(--red); }
.btn-block { display: block; width: 100%; }
.btn-sm { padding: 6px 12px; font-size: 0.85rem; border-radius: 8px; }

input, select, textarea {
    width: 100%;
    background: #10131a;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
    font-size: 1rem;
    margin-bottom: 12px;
}
label { display: block; margin-bottom: 6px; color: var(--text-dim); font-size: 0.88rem; }

input[type=range] {
    accent-color: var(--accent);
    background: transparent;
    border: none;
    height: 28px;
}

.error-msg { color: var(--red); margin: 8px 0; }

/* ── Front page ──────────────────────────────────────────────────────────── */
.hero {
    text-align: center;
    padding: 48px 16px 32px;
}
.hero h1 { font-size: 2.2rem; margin-bottom: 0; letter-spacing: -1px; }
.hero .hero-accent {
    background: linear-gradient(100deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero p { color: var(--text-dim); max-width: 460px; margin: 12px auto 24px; }
.hero-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
/* (De zes gekleurde USP-kaarten zijn vervangen door de rustige
   .lp-kenmerken-grid op de homepage — zie index.php.) */

/* (De oude .week-strip/.week-chip pillen van het jaarplan zijn vervangen door
   de gedeelde .strip verderop — dezelfde opmaak als de dagstrip op Vandaag.) */

/* Statistiekenrij. Vroeger een flex met space-around: op mobiel werden dat vijf
   piepkleine kolommen met afbrekende labels. Nu een raster dat vanzelf naar een
   tweede regel wikkelt en waarin elke cel even breed is. */
.week-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: 14px 6px;
    text-align: center;
}
.week-summary > div { min-width: 0; }
.week-summary .stat-value { font-size: 1.3rem; font-weight: 800; display: block; line-height: 1.2; }
.week-summary .stat-label {
    color: var(--text-dim);
    font-size: 0.72rem;
    display: block;
    margin-top: 2px;
    overflow-wrap: anywhere;
}

.day-card { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.day-card.today { border-color: var(--accent); }
.day-date { flex: 0 0 52px; text-align: center; }
.day-date .day-name { display: block; font-size: 0.72rem; color: var(--text-dim); text-transform: uppercase; }
.day-date .day-num { font-size: 1.25rem; font-weight: 800; }
.day-body { flex: 1; min-width: 0; }
.day-body .training-title { font-weight: 700; }
.day-body .training-meta { color: var(--text-dim); font-size: 0.82rem; }
.type-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.day-add {
    flex: 0 0 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
}
/* Mobiel: actieknoppen op een eigen regel onder de training (day-body krijgt zo de
   volle breedte). Vanaf 640px weer inline rechts naast de training. */
.day-actions { display: flex; gap: 6px; flex-basis: 100%; margin-left: 64px; }
@media (min-width: 640px) {
    .day-actions { flex-basis: auto; margin-left: auto; }
}

/* ── Modal ───────────────────────────────────────────────────────────────── */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 100;
    display: none;
}
/* Opent zo hoog mogelijk en neemt naar beneden alleen de ruimte die nodig is;
   past de inhoud niet, dan scrollt hij binnen zichzelf. */
.modal-backdrop.open {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 8px;
    overflow-y: auto;
    /* Aan het eind van de modal niet doorscrollen naar de pagina erachter */
    overscroll-behavior: contain;
}
/* Pagina vastzetten zolang er een modal open staat */
body.sheet-open { overflow: hidden; }
@media (min-width: 640px) { .modal-backdrop.open { padding: 20px; } }
.modal-sheet {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - 16px);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    z-index: 101;
    overflow: hidden;
}
@media (min-width: 640px) {
    .modal-sheet { border-radius: 20px; max-height: calc(100vh - 40px); }
}
.modal-body {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
}
.modal-body h3 { margin-top: 0; padding-right: 40px; } /* ruimte naast de sluitknop */
.modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-card-hover);
    color: var(--text);
    border: 1px solid var(--border);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    padding: 0;
}
.modal-close:hover { background: var(--border); }
/* (.training-option / .optgroup-label zijn vervallen: de picker werkt nu met
   .pick-stap en .pick-tile verderop — één lange lijst met alles erin was
   onleesbaar.) */

/* ── Profiel-hub: kop + menulijsten ──────────────────────────────────────────
   Het profiel is geen formulier maar een INHOUDSOPGAVE: korte rijen die naar
   een detailpagina gaan. Alles wat je kunt instellen hangt hieronder, zodat je
   nooit meer hoeft te zoeken waar de wedstrijdkalender ook alweer stond. */
.profile-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 2px 18px;
}
.profile-avatar {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    border-radius: 50%;
    background: var(--accent-soft);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--accent);
    overflow: hidden;
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-naam { font-size: 1.3rem; font-weight: 800; line-height: 1.2; }
.profile-sub { color: var(--text-dim); font-size: 0.85rem; margin-top: 3px; }

.menu-group-title {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--text-dim);
    margin: 22px 4px 8px;
}
.menu-list {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    background: none;
    width: 100%;
    text-align: left;
    font: inherit;
    cursor: pointer;
}
.menu-list .menu-item:last-child { border-bottom: none; }
.menu-item:hover { background: var(--bg-card-hover); }
.menu-item .mi-icon { font-size: 1.15rem; width: 24px; text-align: center; flex: 0 0 24px; }
.menu-item .mi-body { flex: 1; min-width: 0; }
/* display:block — anders plakken titel en uitleg als twee inline-spans aan elkaar */
.menu-item .mi-titel { display: block; font-weight: 600; }
.menu-item .mi-uitleg { display: block; color: var(--text-dim); font-size: 0.8rem; margin-top: 3px; line-height: 1.45; }
/* De chevron staat er standaard; een rij zonder vervolg (binnenkort) laat hem weg */
.menu-item .mi-chevron { color: var(--text-dim); font-size: 1.1rem; flex: 0 0 auto; }
.menu-item.is-uit { cursor: default; opacity: 0.55; }
.menu-item.is-uit:hover { background: none; }
.menu-item .mi-badge {
    background: var(--accent);
    color: #04121c;
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 0.72rem;
    font-weight: 800;
}
.menu-item .mi-tag {
    color: var(--text-dim);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.menu-item.is-rood .mi-titel { color: var(--red); }

/* ── Trainingsdagen: kaart per dag i.p.v. een brede tabel ────────────────────
   Een tabel met zes kolommen scrollt op een telefoon horizontaal weg; met een
   kaart per dag blijft alles zichtbaar. Vanaf 640px staan de velden naast
   elkaar, daaronder onder elkaar. */
.dagkaart { padding: 0; overflow: hidden; }
.dagkaart-kop {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bg-card-hover);
    border-bottom: 1px solid var(--border);
    font-weight: 700;
}
.dagkaart-kop input[type=checkbox] { width: auto; margin: 0; }
.dagkaart-kop label { display: flex; align-items: center; gap: 10px; margin: 0; cursor: pointer; }
.dagkaart-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    padding: 14px;
}
.dagkaart-body label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dim);
    margin: 0 0 4px;
}
.dagkaart-body input, .dagkaart-body select { margin: 0; }
.dagkaart-veld.breed { grid-column: 1 / -1; }
/* Uitgevinkte dag: velden blijven staan maar zijn duidelijk buiten werking */
.dagkaart.is-uit .dagkaart-body { opacity: 0.4; }
@media (min-width: 640px) {
    .dagkaart-body { grid-template-columns: repeat(5, 1fr); }
    .dagkaart-veld.breed { grid-column: auto; }
}

/* Terug-link boven een detailpagina die onder het profiel hangt */
/* Werkt zowel op een <a> als op een <button> (terug binnen dezelfde pagina) */
.terug-link {
    display: inline-block;
    color: var(--text-dim);
    text-decoration: none;
    font-size: 0.88rem;
    margin-bottom: 6px;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}
.terug-link:hover { color: var(--accent); }

/* ── App-balk (Vandaag, Plan, Stats, Profiel) ────────────────────────────────
   Mobiel staat het merk in het midden met links de profielknop en het belletje,
   rechts de kalender. Op desktop dekt de zijbalk merk én profiel al af, dus daar
   blijven alleen de begroeting (links) en de twee acties (rechts) over. */
.app-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0 12px;
}
.tb-actie {
    position: relative;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
    font-size: 1.1rem;
}
.tb-actie:hover { border-color: var(--accent); color: var(--accent); }
/* Lijn-iconen (stroke) i.p.v. emoji — die kleuren per platform anders en
   ogen speels; deze volgen gewoon de tekstkleur. */
.tb-actie svg { width: 19px; height: 19px; display: block; }
.tb-avatar {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 50%;
    background: var(--accent-soft);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--accent);
    text-decoration: none;
}
/* Rood bolletje: er is iets ongelezen (antwoord of site-update) */
.tb-dot {
    position: absolute;
    top: 5px;
    right: 6px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--red);
    border: 2px solid var(--bg);
}
.tb-brand {
    flex: 1;
    text-align: center;
    font-weight: 800;
    letter-spacing: 1.5px;
    font-size: 1.05rem;
    color: var(--text);
    text-decoration: none;
}
.tb-groet { flex: 1; font-weight: 700; font-size: 1.05rem; display: none; }

/* Strip onder de app-balk: dagen op Vandaag, weeknummers op Plan. Eén opmaak
   voor allebei — de gekozen eenheid krijgt een gevulde cirkel, een eenheid met
   iets gepland een groen blokje eronder.
   LET OP: dit is NIET .week-strip — die naam is al van de oude week-chips. */
.strip {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 6px 8px;
    margin-bottom: 16px;
}
.strip::-webkit-scrollbar { display: none; }
.strip-item {
    flex: 1 0 auto;
    min-width: 46px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 2px 2px;
    text-decoration: none;
    color: var(--text-dim);
}
.strip-naam { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; }
.strip-num {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: var(--font-mono);
    font-size: 0.95rem;
    color: var(--text);
}
.strip-item.is-gekozen .strip-num { background: var(--accent); color: #04121c; font-weight: 700; }
.strip-item.is-nu:not(.is-gekozen) .strip-num { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); }
.strip-stip { width: 7px; height: 7px; border-radius: 2px; background: transparent; }
.strip-item.heeft-training .strip-stip { background: var(--green); }

@media (min-width: 900px) {
    body.has-sidebar .tb-avatar,
    body.has-sidebar .tb-brand { display: none; }
    body.has-sidebar .tb-groet { display: block; }
}

/* Rij met acties onder een pagina: op mobiel onder elkaar en vol breed (drie
   knoppen naast elkaar wordt daar een rommeltje), vanaf 640px op één regel. */
.actie-rij { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.actie-rij .btn { display: block; width: 100%; text-align: center; }
@media (min-width: 640px) {
    .actie-rij { flex-direction: row; justify-content: center; flex-wrap: wrap; }
    .actie-rij .btn { width: auto; }
}

/* ── Jaarplan-wizard: stap voor stap ─────────────────────────────────────────
   Eén stap tegelijk in beeld, met een voortgangsbalk erboven. De stap die
   binnenkomt schuift zachtjes omhoog — genoeg beweging om te merken dat je
   verder bent, niet zoveel dat het vertraagt. */
.wiz-voortgang {
    height: 4px;
    border-radius: 4px;
    background: var(--bg-card);
    overflow: hidden;
    margin: 4px 0 22px;
}
.wiz-voortgang span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.wiz-stap { display: none; }
.wiz-stap.actief { display: block; animation: wizIn 0.42s cubic-bezier(0.2, 0.7, 0.3, 1); }
@keyframes wizIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
.wiz-kop { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.4px; margin: 0 0 6px; }
.wiz-sub { color: var(--text-dim); margin: 0 0 20px; line-height: 1.55; }
.wiz-nav { display: flex; gap: 10px; margin-top: 22px; }
.wiz-nav .btn { flex: 1; text-align: center; }

/* Grote aanklikbare keuzes i.p.v. een dropdown — op een telefoon veel prettiger
   en het maakt de keuze visueel. */
.keuze-rij { display: grid; gap: 10px; }
/* Tegels naast elkaar zodra er ruimte is (bijv. de vier keuzes op Plan bijsturen) */
@media (min-width: 640px) { .keuze-rij.twee-koloms { grid-template-columns: 1fr 1fr; } }
.keuze {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px;
    border-radius: var(--radius);
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    text-align: left;
    font: inherit;
    cursor: pointer;
}
.keuze:hover { border-color: var(--accent); }
.keuze.gekozen { border-color: var(--accent); background: var(--accent-soft); }
.keuze-icoon { font-size: 1.5rem; width: 34px; text-align: center; flex: 0 0 34px; }
.keuze-titel { font-weight: 700; display: block; }
.keuze-uitleg { color: var(--text-dim); font-size: 0.82rem; display: block; margin-top: 2px; line-height: 1.45; }

/* Segmented control (A / B / C). Een <select> met lange opties klapt op een
   telefoon buiten het scherm open — en de opklaprichting is niet te sturen met
   CSS. Drie knoppen naast elkaar met de uitleg eronder lost dat helemaal op. */
.segment { display: flex; gap: 6px; }
.segment button {
    flex: 1;
    padding: 11px 6px;
    border-radius: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}
.segment button:hover { border-color: var(--accent); }
.segment button.gekozen { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.segment-uitleg { color: var(--text-dim); font-size: 0.85rem; margin: 8px 0 0; line-height: 1.45; }

/* Een net toegevoegde regel licht kort op, zodat je ziet dat hij erbij is
   gekomen zonder dat de pagina herlaadt. */
@keyframes rijIn {
    from { opacity: 0; transform: translateY(-6px); background: var(--accent-soft); }
    to   { opacity: 1; transform: none; background: transparent; }
}
.rij-nieuw { animation: rijIn 0.5s cubic-bezier(0.2, 0.7, 0.3, 1); }
/* En verdwijnt met een korte krimp bij verwijderen */
.rij-weg {
    opacity: 0;
    transform: translateX(-12px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* ── Training-picker: stap voor stap kiezen ──────────────────────────────────
   De oude picker was één lange lijst met alles erin (omschrijving, dichtheid,
   schaalbaarheid, laatst gebruikt) — onleesbaar. Nu: bad -> wat voor inspanning
   -> drie voorstellen. */
.pick-stap { display: none; }
.pick-stap.actief { display: block; animation: wizIn 0.32s cubic-bezier(0.2, 0.7, 0.3, 1); }
.pick-kop { font-size: 1.05rem; font-weight: 800; margin: 0 0 4px; }
.pick-sub { color: var(--text-dim); font-size: 0.85rem; margin: 0 0 16px; line-height: 1.45; }

/* Voorstel-tegel: alleen wat je nodig hebt om te kiezen */
.pick-tile {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    color: var(--text);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    margin-bottom: 10px;
    cursor: pointer;
}
.pick-tile:hover { border-color: var(--accent); }
.pick-tile .pt-kop { display: flex; align-items: baseline; gap: 8px; }
.pick-tile .pt-naam { font-weight: 700; font-size: 1.02rem; }
.pick-tile .pt-type { color: var(--text-dim); font-size: 0.78rem; white-space: nowrap; }
.pick-tile .pt-cijfers {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 8px;
    font-family: var(--font-mono);
    font-size: 0.82rem;
}
.pick-tile .pt-cijfers span { color: var(--text-dim); }
.pick-tile .pt-cijfers b { color: var(--text); font-weight: 600; }
/* Grafiekje van de set. Vaste hoogte, zodat de tegels niet verspringen terwijl
   de svg's nog worden opgehaald. */
.pick-tile .pt-chart {
    display: block;
    margin-top: 10px;
    height: 46px;
    line-height: 0;
}
.pick-tile .pt-chart svg { width: 100%; height: 46px; display: block; }
.pick-tile .pt-voet { margin-top: 7px; font-size: 0.78rem; color: var(--text-dim); }
/* Moet flink geschaald worden: zichtbaar minder aantrekkelijk */
.pick-tile.pt-rek { border-style: dashed; }
.pick-tile.pt-rek .pt-naam { color: var(--text-dim); }

.pick-refresh {
    display: block;
    width: 100%;
    text-align: center;
    font: inherit;
    font-weight: 700;
    color: var(--accent);
    background: none;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    padding: 13px;
    cursor: pointer;
}
.pick-refresh:hover { border-color: var(--accent); background: var(--accent-soft); }

/* ── Sterren (1-5) voor de trainingsfeedback ─────────────────────────────────
   Knoppen i.p.v. radio's: groot genoeg om op een telefoon te raken, en de
   gekozen waarde vult alle sterren tot en met die stand. */
.sterren { display: flex; gap: 6px; margin: 4px 0 2px; }
.sterren button {
    background: none;
    border: none;
    padding: 2px;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    color: var(--border);
}
.sterren button.aan { color: var(--yellow); }
.sterren button:hover { color: var(--yellow); }
.sterren-label { color: var(--text-dim); font-size: 0.8rem; min-height: 1.2em; }

/* Genereer-scherm: pulserende ring met rollende statusteksten */
.wiz-genereer { text-align: center; padding: 30px 10px; }
.wiz-ring {
    width: 84px;
    height: 84px;
    margin: 0 auto 22px;
    border-radius: 50%;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    animation: wizDraai 0.9s linear infinite;
}
@keyframes wizDraai { to { transform: rotate(360deg); } }
.wiz-status { font-weight: 600; min-height: 1.5em; }
.wiz-status-sub { color: var(--text-dim); font-size: 0.85rem; margin-top: 6px; min-height: 1.3em; }

/* Herbereken-overlay: na een bijzonderheid of een nieuwe wedstrijd worden de
   betrokken weken opnieuw ingevuld. Dat is bijna instant, maar zonder feedback
   lijkt het alsof er niets gebeurt. */
.herbereken {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(7, 12, 19, 0.92);
    backdrop-filter: blur(3px);
    padding: 20px;
}
.herbereken-box { text-align: center; max-width: 320px; width: 100%; }

/* Sociale rij onderaan het profiel */
.social-rij { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 4px; }
.social-rij a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-dim);
    text-decoration: none;
    font-size: 1.1rem;
}
.social-rij a:hover { color: var(--accent); border-color: var(--accent); }

/* ── Techniekvideo met meelopende aanwijzingen ────────────────────────────────
   Video links, cues rechts; onder 760px onder elkaar. De cue die bij de huidige
   seconde hoort licht op — de rest blijft leesbaar, zodat je de hele reeks ziet
   (en de pagina bruikbaar blijft als de JS niet draait). */
.tv {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 18px 0;
}
@media (min-width: 760px) {
    .tv { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
    /* Gespiegeld: video rechts, tekst links. Twee blokken onder elkaar in
       dezelfde richting leest als een lijst; om en om leest als een pagina.
       De kolombreedtes draaien mee, anders komt de video in de smalle kolom. */
    .tv-spiegel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
    .tv-spiegel .tv-video { order: 2; }
    .tv-spiegel .tv-cues { order: 1; }
}
.tv-video {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: #05080d;
    border: 1px solid var(--border);
}
/* Alleen het beeld: de afspeelknop hangt hierover, dus die blijft gecentreerd
   op de video ook als het label er op mobiel bovenuit gaat staan. */
.tv-frame { position: relative; display: block; }
.tv-video video { display: block; width: 100%; height: auto; }
.tv-leeg {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    aspect-ratio: 16 / 9;
    border: 1px dashed var(--border);
    color: var(--text-dim);
    font-size: 0.85rem;
    text-align: center;
    padding: 12px;
}
.tv-leeg code { font-size: 0.78rem; opacity: 0.75; }
/* Titelblok linksonder op de video, met een verloop eronder zodat het leesbaar
   blijft op licht water */
/* Twee losse blokjes linksonder in plaats van tekst op een verloop: op licht
   water of een lichte badmuts verdween de tekst anders in het beeld. */
.tv-label {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    pointer-events: none;
}
.tv-label-kop {
    background: var(--accent);
    color: #05080d;
    padding: 3px 9px;
    border-radius: 5px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    animation: tvIn 0.5s ease both;
}
.tv-label-sub {
    background: rgba(3, 6, 11, 0.88);
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.2;
    animation: tvIn 0.5s ease 0.09s both;
}
/* Op een telefoon is het beeld te klein om er tekst overheen te leggen: dan
   staat de zwemmer achter het label. Daar zet hij zichzelf BOVEN de video, in
   dezelfde kaart. Het donkere blokje mag dan weg — de kaart is al donker. */
@media (max-width: 759px) {
    .tv-video { display: flex; flex-direction: column; }
    .tv-label {
        position: static;
        order: -1;
        /* gecentreerd: buiten het beeld is er geen linkerrand meer om tegenaan
           te lijnen, en dan oogt links uitgelijnd los van de video eronder */
        align-items: center;
        text-align: center;
        padding: 12px 14px 10px;
    }
    .tv-label-sub {
        background: none;
        padding: 0;
        font-size: 1.1rem;
    }
}
.tv-knop {
    position: absolute;
    inset: 0;
    width: 100%;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
}
/* Wit afgerond vlak met een donkere driehoek: leesbaar op elk onderwaterbeeld,
   waar een losse witte driehoek in schuim of zonlicht verdwijnt. Speelt hij,
   dan verdwijnt de knop — anders staat er permanent een icoon over de video. */
.tv-knop::before,
.tv-knop::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.tv-knop::before {
    transform: translate(-50%, -50%);
    width: 74px;
    height: 52px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.tv-knop::after {
    /* iets naar rechts: een driehoek exact op het midden oogt links */
    transform: translate(-42%, -50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 11px 0 11px 18px;
    border-color: transparent transparent transparent #0b1220;
}
.tv-knop:hover::before { transform: translate(-50%, -50%) scale(1.06); }
.tv.speelt .tv-knop::before,
.tv.speelt .tv-knop::after { opacity: 0; }
.tv.speelt .tv-knop:hover::before,
.tv.speelt .tv-knop:hover::after { opacity: 0.25; }

/* ÉÉN paneel dat van inhoud wisselt, geen lijst. Alle cues liggen in dezelfde
   grid-cel, dus de hoogte volgt de langste tekst en het paneel springt niet als
   de volgende aanwijzing korter is. */
.tv-cues { display: grid; }
.tv-cue {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 12px;
    background: var(--bg-card);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    /* visibility MET vertraging, anders klapt de oude tekst meteen weg en fade
       je alleen de nieuwe in — dit maakt er een echte crossfade van. */
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
}
.tv-cue.is-actief {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s;
}
/* De regels binnenin komen net iets na het paneel op gang, zodat het als één
   beweging leest in plaats van een blok dat aan/uit knippert. */
.tv-cue.is-actief .tv-cue-kop,
.tv-cue.is-actief .tv-cue-tekst { animation: tvIn 0.45s ease both; }
.tv-cue.is-actief .tv-cue-tekst { animation-delay: 0.06s; }
@keyframes tvIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .tv-cue { transition: opacity 0.15s linear, visibility 0s linear 0.15s; transform: none; }
    .tv-cue.is-actief { transition: opacity 0.15s linear, visibility 0s; }
    .tv-cue.is-actief .tv-cue-kop,
    .tv-cue.is-actief .tv-cue-tekst,
    .tv-label-kop,
    .tv-label-sub { animation: none; }
}
.tv-cue-tijd { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; color: var(--text-dim); }
.tv-cue-kop { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.tv-cue-tekst { font-size: 0.92rem; line-height: 1.5; }