/* Cadence, zwart met rood, leesbaar vanaf de fiets op 1,5 meter afstand.
 *
 * Eén accentkleur, en die is rood. Alles wat je kunt aanzetten, indrukken of
 * starten is rood; al het andere is grijs. Dat maakt op een scherm waar je
 * bezweet en buiten adem naar kijkt in één oogopslag duidelijk waar je moet
 * zijn. Groen komt alleen voor bij 'verbonden', want dat is de enige plek waar
 * het iets anders betekent dan rood. */

:root {
  --bg: #08080a;
  --panel: #121215;
  --panel-2: #1a1a1f;
  --paneel-op: #23232a;         /* hover op een paneelknop */
  --line: #2a2a32;
  --lijn-op: #3a3a45;
  --text: #f2f2f5;
  --dim: #8a8a96;
  --accent: #e0121f;
  --accent-op: #ff2b38;         /* hover */
  --accent-diep: #7d0a13;       /* randen en schaduw onder rood */
  --accent-2: #e0121f;
  --green: #35b26a;
  --red: #e0121f;
  --radius: 12px;
  --schaduw: 0 1px 2px rgba(0,0,0,.6), 0 8px 24px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }

/* Een klasse met display: flex of grid verslaat het hidden-attribuut, want
   dat is maar een attribuutselector. Eenmaal hier afdwingen is beter dan bij
   elk element onthouden dat je ook nog een klasse moet wegnemen. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: 24px; margin: 0 0 4px; letter-spacing: -.01em; font-weight: 650; }
h2 { font-size: 15px; margin: 0 0 14px; letter-spacing: .02em;
     display: flex; align-items: center; gap: 10px; }

/* Het nummer voor een stap. Rood, want het is het spoor dat je volgt. */
h2 .nr {
  flex: none; width: 22px; height: 22px; border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 22px; text-align: center;
  box-shadow: 0 1px 0 var(--accent-diep);
}

.view-kop { margin: 4px 0 18px; }
.view-kop p { margin: 0; color: var(--dim); font-size: 13px; }
h3 { font-size: 13px; margin: 0; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
code { background: var(--panel-2); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.small { font-size: 12px; }
.hidden { display: none !important; }

/* ---------- topbar ---------- */
.topbar {
  display: flex; align-items: center; gap: 20px;
  padding: 10px 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
/* Het lettertype van het woordmerk staat erbij in plaats van dat het bij
   Google vandaan komt: de app hoort zonder internet te werken. */
@font-face {
  font-family: 'Anton';
  src: url('merk/anton-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Het merk: een wiel waarvan de opening de C vormt, met de naam ernaast.
   Het geheel helt zeven graden voorover, niet meer, want dan wordt het een
   sportmerk uit 1998. */
.brand {
  display: flex; align-items: center; gap: 8px;
  white-space: nowrap;
  text-decoration: none; color: var(--text);
}
.brand .merk { width: 23px; height: 23px; color: var(--accent); flex: none; }
/* Alleen het woord scheef: het merk helt nu zelf al over. Stond de schuinte
   op .brand, dan kreeg het merk hem twee keer. */
.brand span {
  font-family: Anton, 'Arial Narrow', sans-serif;
  font-size: 21px; line-height: 1; letter-spacing: .035em;
  text-transform: uppercase; transform: skewX(-7deg);
}
.tabs { display: flex; gap: 4px; flex: 1; }
.tabs button {
  background: none; border: none; color: var(--dim);
  padding: 7px 14px; border-radius: 8px; cursor: pointer; font-size: 13px;
}
.tabs button:hover { background: var(--panel-2); color: var(--text); }
.tabs button.active {
  background: var(--panel-2); color: var(--text); font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--accent);
}

.chips { display: flex; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel-2); white-space: nowrap;
}
/* Het stipje vervangt het icoontje dat hier stond: het zegt hetzelfde
   (verbonden of niet) zonder een emoji in de kopbalk te zetten. */
.chip::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none; opacity: .55;
}
.chip.on { border-color: var(--green); color: #7fdca4; }
.chip.on::before { opacity: 1; box-shadow: 0 0 0 3px rgba(53, 178, 106, .18); }
.chip.off { color: var(--dim); opacity: .65; }

/* De taalkeuze. Ziet eruit als de statuslampjes ernaast, want hij hoort bij
   dezelfde rij en niet bij de formulieren verderop in de pagina. */
.taalkeuze {
  font-size: 11px; padding: 4px 8px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--dim);
  cursor: pointer;
}
.taalkeuze:hover { color: var(--text); }
.taalkeuze:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Tot de woordenlijst erop staat blijft de pagina leeg. Alleen als het geen
   Nederlands wordt -- taal-vroeg.js zet de klasse, taal.js haalt hem weg.
   Zonder dit leest een Engelse bezoeker eerst een tel Nederlands. */
.taal-bezig body { visibility: hidden; }

/* ---------- layout ---------- */
main { padding: 18px; max-width: 1180px; margin: 0 auto; }
.view { display: none; }
.view.active { display: block; }

/* Twee kolommen die zichzelf vullen.
 *
 * Met een raster rekt elke kaart mee met de langste van zijn rij, en dan staat
 * er een halve kolom leeg onder de korte kaart. Een kolomindeling laat de
 * kaarten gewoon doorlopen en vult het gat. break-inside houdt een kaart
 * heel; zonder dat wordt hij over twee kolommen gehakt. */
.grid-2 { columns: 2; column-gap: 14px; }
.grid-2 > .card { break-inside: avoid; margin-bottom: 14px; }
.span-2 { column-span: all; }
@media (max-width: 820px) { .grid-2 { columns: 1; } }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 14px;
  box-shadow: var(--schaduw);
}
.card:focus-within { border-color: var(--lijn-op); }
.grid-2 .card { margin-bottom: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 10px; }
.card-head .right { color: var(--dim); }

/* ---------- knoppen ---------- */
button, .btn {
  font: inherit; font-size: 13px;
  padding: 8px 14px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  transition: background .12s, border-color .12s;
}
button:hover:not(:disabled), .btn:hover { background: var(--paneel-op); border-color: var(--lijn-op); }
button:disabled { opacity: .4; cursor: not-allowed; }
button.primary {
  background: var(--accent); color: #fff; border-color: var(--accent);
  font-weight: 600; box-shadow: 0 1px 0 var(--accent-diep);
}
button.primary:hover:not(:disabled) { background: var(--accent-op); border-color: var(--accent-op); }
button.ghost { background: transparent; }
button.danger { color: #ff6b74; border-color: #4a1f24; }
button.danger:hover { background: #2c1418; border-color: #6b2a31; }
button.big { padding: 14px 32px; font-size: 16px; }
button.small { padding: 4px 10px; font-size: 12px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; align-items: center; }
.btn-row.tight { margin: 0; }
.btn.file { display: inline-block; }
.spacer { flex: 1; }

.segmented { display: flex; gap: 0; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.segmented button { border: none; border-radius: 0; flex: 1; background: transparent; padding: 10px 12px; }
.segmented button.active { background: var(--accent); color: #fff; font-weight: 600; }

/* ---------- formulieren ---------- */
.field { display: block; margin-bottom: 12px; color: var(--dim); font-size: 12px; }
.field input, .field select {
  display: block; width: 100%; margin-top: 5px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px;
  font: inherit;
}
.field input:focus, .field select:focus, .listbox:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(224, 18, 31, .18);
}
.check input[type=checkbox] { accent-color: var(--accent); width: 15px; height: 15px; }
.field-row { margin-top: 14px; }
.field-row label { display: flex; justify-content: space-between; color: var(--dim); font-size: 12px; }
.field-row .value { color: var(--text); font-family: ui-monospace, monospace; }
input[type=range] { width: 100%; accent-color: var(--accent); margin: 6px 0 2px; }
.check { display: flex; align-items: center; gap: 8px; color: var(--dim); font-size: 12px; margin-top: 8px; }
.listbox {
  width: 100%; background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: 4px; font: inherit;
}
.listbox option { padding: 7px 9px; border-radius: 6px; }
.listbox option:checked { background: var(--accent); color: #fff; }
textarea {
  width: 100%; background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: 10px;
  font-family: ui-monospace, monospace; font-size: 13px; resize: vertical;
}
select.mini { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; font-size: 12px; }
.mini-field { display: flex; align-items: center; gap: 8px; color: var(--dim); font-size: 12px; }
.mini-field input[type=range] { width: 130px; margin: 0; }

.hint { color: var(--dim); font-size: 12px; margin: 6px 0; }
.status { font-size: 12px; color: var(--dim); min-height: 18px; margin-top: 6px; }
.status.ok { color: #7fdca4; }
.status.err { color: var(--red); }
details summary { cursor: pointer; color: var(--dim); font-size: 12px; margin-top: 10px; }
pre { overflow-x: auto; background: var(--bg); padding: 8px; border-radius: 6px; margin: 8px 0 0; }

/* De kleurkiezers voor het tenue. Een rij vierkantjes met een naam eronder:
 * je kiest hier een kleur, geen getal, dus het veld hoort eruit te zien als
 * de kleur zelf. */
.kleurrij { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0 14px; }
.kleurrij label {
  display: flex; flex-direction: column-reverse; align-items: center; gap: 6px;
  color: var(--dim); font-size: 12px;
}
.kleurrij input[type=color] {
  width: 48px; height: 40px; padding: 0; cursor: pointer;
  background: none; border: 1px solid var(--line); border-radius: 9px;
}
.kleurrij input[type=color]::-webkit-color-swatch-wrapper { padding: 3px; }
.kleurrij input[type=color]::-webkit-color-swatch { border: none; border-radius: 6px; }
.kleurrij input[type=color]:hover { border-color: var(--lijn-op); }

/* ---------- canvas ---------- */
canvas.profile { width: 100%; height: 130px; display: block; margin: 12px 0 8px; background: var(--bg); border-radius: 8px; }
canvas.profile.tall { height: 190px; }
canvas.chart { width: 100%; height: 170px; display: block; background: var(--bg); border-radius: 8px; }
canvas.workoutbar { width: 100%; height: 90px; display: block; background: var(--bg); border-radius: 8px; margin-top: 10px; }

.stat-line { display: flex; flex-wrap: wrap; gap: 6px 20px; color: var(--dim); font-size: 12px; margin-top: 8px; }
.stat-line b { color: var(--text); font-weight: 600; font-family: ui-monospace, monospace; }
.big-stats { font-size: 14px; gap: 10px 32px; }

/* ---------- ritweergave ---------- */
.metrics {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px;
}
@media (max-width: 820px) { .metrics { grid-template-columns: repeat(2, 1fr); } }
.metric {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; display: flex; flex-direction: column; min-width: 0;
}
.metric .label { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .07em; }
.metric .val { font-size: 38px; line-height: 1.05; font-weight: 600; font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.metric .unit { font-size: 11px; color: var(--dim); }
.metric .sub { font-size: 11px; color: var(--dim); margin-top: 2px; font-family: ui-monospace, monospace; }
.big-metric {
  grid-column: span 2; grid-row: span 2;
  background: linear-gradient(135deg, #1e1015, #121215);
  justify-content: center;
}
.big-metric .val { font-size: 92px; color: var(--accent); }
@media (max-width: 820px) {
  .big-metric { grid-column: span 2; grid-row: span 1; }
  .big-metric .val { font-size: 52px; }
}

.erg-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.erg-head .label { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .07em; display: block; }
.erg-watts { font-size: 30px; font-weight: 600; font-family: ui-monospace, monospace; color: var(--accent-2); }
.erg-remaining { font-size: 15px; color: var(--dim); font-family: ui-monospace, monospace; margin-left: 10px; }
.bias { color: var(--dim); font-size: 12px; }

.controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.empty { text-align: center; padding: 60px 20px; color: var(--dim); }
.empty button { margin-top: 12px; }

/* De startbalk blijft onderin het scherm staan. Je zet een rit op door van
 * boven naar beneden te werken, en dan wil je niet terug hoeven scrollen om
 * hem te beginnen. */
.startbalk {
  position: sticky; bottom: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  margin: 16px -18px -18px;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
  background: rgba(12, 12, 15, .88);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
.start-summary { color: var(--dim); font-size: 13px; }
.start-summary b { color: var(--text); }

/* ---------- tabellen ---------- */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; color: var(--dim); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; padding: 6px 8px; border-bottom: 1px solid var(--line); }
td { padding: 7px 8px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--panel-2); }
td.num, th.num { text-align: right; font-family: ui-monospace, monospace; }

/* ---------- dialogen ---------- */
dialog {
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; max-width: 620px; width: calc(100% - 40px);
}
dialog::backdrop { background: rgba(0, 0, 0, .65); }

.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--panel-2); border: 1px solid var(--line);
  padding: 10px 18px; border-radius: 999px; z-index: 50; font-size: 13px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.toast.err { border-color: var(--red); color: #ffb6bb; }


/* ---------- wereldweergave ---------- */
.world-card { padding: 0; overflow: hidden; position: relative; background: #070709; }
canvas.world { width: 100%; height: 390px; display: block; }
/* De stapeling van het WebGL-doek en het 2D-doek staat in world.js, niet hier.
   Eén plek die dat regelt: anders kan een oude stylesheet uit de cache het
   WebGL-doek in de tekststroom zetten en het beeld naar beneden duwen. */

.world-card:fullscreen { border-radius: 0; border: none; }
.world-card:fullscreen canvas.world { height: 100vh; }
.check.tight { margin-top: 0; white-space: nowrap; }

.listbox optgroup { color: var(--dim); font-size: 11px; font-style: normal; padding-top: 4px; }
.listbox optgroup option { color: var(--text); font-size: 13px; }
.stat-line .muted { color: var(--dim); font-weight: 400; font-family: inherit; }

.mini-field select.mini, .mini-field input.mini { margin: 0; }
.mini-field input[type=number].mini { width: 62px; padding: 3px 6px; background: var(--bg);
  color: var(--text); border: 1px solid var(--line); border-radius: 6px; font-size: 12px; }

/* ---------- tegenstander ---------- */
.opponent-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.opp-gap { font-size: 34px; font-weight: 600; font-family: ui-monospace, monospace; display: block; }
.opp-gap.ahead { color: var(--green); }
.opp-gap.behind { color: var(--red); }
.opp-sub { font-size: 12px; color: var(--dim); font-family: ui-monospace, monospace; }
.opp-right { text-align: right; }
.opp-finish { font-size: 22px; font-weight: 600; font-family: ui-monospace, monospace; display: block; }
.opp-bar { position: relative; height: 6px; background: var(--panel-2); border-radius: 3px; margin-top: 12px; }
.opp-bar::before { content: ''; position: absolute; left: 50%; top: -3px; width: 2px; height: 12px;
  background: rgba(255,255,255,0.35); }
.opp-marker { position: absolute; top: -3px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); transform: translateX(-50%); transition: left .25s linear; left: 50%; }

/* ---------- analyse achteraf ---------- */
.curve { display: flex; flex-direction: column; gap: 4px; }
.curve-row { display: grid; grid-template-columns: 52px 1fr 60px 62px; align-items: center; gap: 8px;
  font-size: 12px; font-family: ui-monospace, monospace; }
.curve-label { color: var(--dim); }
.curve-bar { background: var(--panel-2); height: 14px; border-radius: 3px; overflow: hidden; }
.curve-bar i { display: block; height: 100%; background: linear-gradient(90deg,var(--accent-diep),var(--accent-op)); }
.curve-val { text-align: right; font-weight: 600; }
.curve-wkg { text-align: right; color: var(--dim); }
.zone-bar { display: flex; height: 16px; border-radius: 4px; overflow: hidden; margin-top: 6px; }
.zone-bar i { display: block; height: 100%; }
.zone-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px;
  font-size: 11px; color: var(--dim); font-family: ui-monospace, monospace; }
.zone-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; }
.ftp-voorstel { margin-top: 16px; padding: 12px 14px; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.ftp-voorstel button { margin-left: 10px; }

.world-buttons { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; }
.world-buttons button { background: rgba(0, 0, 0, .45); border-color: rgba(255, 255, 255, .18);
  color: #fff; font-size: 12px; padding: 5px 10px; backdrop-filter: blur(3px); }

/* ---------- trainingsbouwer ---------- */
dialog.wide { max-width: 860px; }
dialog.wide h2 { margin-bottom: 14px; }

.wb-head { display: grid; grid-template-columns: 1fr 1.6fr; gap: 12px; }
.wb-head .field { margin-bottom: 8px; }
.wb-toolbar { margin-bottom: 10px; }
.mini-seg { border-radius: 6px; }
.mini-seg button { padding: 3px 10px; font-size: 12px; }

/* Zes kolommen die in élke rij hetzelfde liggen, zodat de lijst leest als een
   tabel. De laatste kolom is de knoppenrij en krijgt daarom een vaste breedte. */
.wb-legend, .wb-row {
  display: grid;
  grid-template-columns: 108px 78px minmax(150px, 1fr) 70px minmax(90px, 1.2fr) 112px;
  gap: 6px;
  align-items: center;
}
.wb-legend {
  color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  padding: 0 4px 4px; margin-top: 14px;
}
.wb-steps { max-height: 320px; overflow-y: auto; padding: 2px 4px; }
.wb-row {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 5px 6px; margin-bottom: 5px;
  /* De linkerrand krijgt inline de zonekleur van de stap, zo zie je de opbouw
     van de training al in de lijst, zonder een extra kolom. */
  border-left-width: 4px;
}
.wb-row > * { min-width: 0; }
.wb-row input, .wb-row select {
  width: 100%; background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; padding: 5px 7px;
  font: inherit; font-size: 12px;
}
.wb-row input[type=number], .wb-row input.t { font-family: ui-monospace, monospace; }
.wb-power { display: flex; align-items: center; gap: 4px; }
.wb-power .arrow { color: var(--dim); font-size: 12px; }
.wb-power .watts { color: var(--dim); font-size: 11px; font-family: ui-monospace, monospace; white-space: nowrap; }
.wb-acts { display: flex; gap: 2px; justify-content: flex-end; }
.wb-acts button {
  padding: 3px 6px; font-size: 12px; background: transparent; border-color: transparent;
  color: var(--dim); line-height: 1;
}
.wb-acts button:hover:not(:disabled) { background: var(--paneel-op); color: var(--text); }
.wb-empty { color: var(--dim); font-size: 12px; padding: 14px 4px; }

.wb-set { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
.wb-set-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.wb-set-grid .field { margin-bottom: 0; }

@media (max-width: 720px) {
  .wb-head, .wb-set-grid { grid-template-columns: 1fr; }
  .wb-legend { display: none; }
  .wb-row { grid-template-columns: 1fr 1fr; }
  .wb-acts { grid-column: 1 / -1; justify-content: flex-start; }
}
.wb-u { font-family: ui-monospace, monospace; opacity: .7; }

/* ---------- wat de trainer kan ---------- */
/* De mogelijkheden van de trainer stonden alleen als kommalijst in de
   technische details. Dat is precies de informatie waar het om gaat, dat
   Cadence de weerstand stuurt en niet alleen uitleest, dus staat die nu
   open en in het Nederlands in beeld. */
.caps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.caps .cap-head, .caps .cap-note {
  flex-basis: 100%; color: var(--dim); font-size: 12px; margin: 0;
}
.caps .cap-note { margin-top: 4px; }
.caps .cap-note.err { color: #ffb0b0; }
.caps .cap {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--dim);
  white-space: nowrap;
}
.caps .cap .mark { font-family: ui-monospace, monospace; }
.caps .cap.yes { color: #8fe0ac; border-color: #2d4a38; background: #16251c; }
.caps .cap.no { opacity: .5; }

.demo-row { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.demo-row .hint { margin-top: 6px; max-width: 46em; }

/* ---------- account en sociaal ---------- */

button.chip { font: inherit; cursor: pointer; }

.subtabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
.subtabs.tight { margin-bottom: 16px; }
.subtabs button {
  background: transparent; border: 1px solid transparent; color: var(--dim);
  padding: 6px 14px; border-radius: 999px;
}
.subtabs button:hover:not(.active) { background: var(--panel-2); color: var(--text); }
.subtabs button.active { background: var(--panel-2); border-color: var(--line); color: var(--text); font-weight: 600; }
.badge {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px;
  background: var(--accent); color: #fff; border-radius: 999px;
  font-size: 11px; font-weight: 700; text-align: center;
}

.sociaal-deel { display: none; }
.sociaal-deel.active { display: block; }

/* wie rijdt nu */
.nu-rijdt { display: flex; flex-wrap: wrap; gap: 10px; }
.rijder {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 14px 8px 10px;
}
.rijder .stip {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 3px rgba(76, 175, 114, .18);
  animation: klop 2s ease-in-out infinite;
}
.rijder .stip.pauze { background: var(--dim); animation: none; box-shadow: none; }
@keyframes klop { 50% { opacity: .35; } }
.rijder b { font-weight: 600; }
.rijder .rijder-sub { display: block; color: var(--dim); font-size: 12px; font-family: ui-monospace, monospace; }

/* de feed */
.feed { display: flex; flex-direction: column; gap: 12px; }
.feed-rit {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px;
}
.feed-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.feed-wie { font-weight: 600; }
.feed-wanneer { color: var(--dim); font-size: 12px; white-space: nowrap; }
.feed-titel { margin: 4px 0 10px; font-size: 15px; }
.feed-titel .prive { color: var(--dim); font-size: 11px; border: 1px solid var(--line);
  padding: 1px 6px; border-radius: 999px; margin-left: 6px; vertical-align: 1px; }
.feed-cijfers { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 12px; color: var(--dim); }
.feed-cijfers b { display: block; color: var(--text); font-size: 15px; font-weight: 600;
  font-family: ui-monospace, monospace; }
.feed-voet { display: flex; align-items: center; gap: 10px; margin-top: 12px;
  padding-top: 10px; border-top: 1px solid var(--line); }
.hart { display: inline-flex; align-items: center; gap: 6px; background: transparent;
  border-color: transparent; color: var(--dim); padding: 4px 8px; }
.hart:hover:not(:disabled) { background: var(--panel-2); color: var(--text); }
.hart.aan { color: var(--accent-op); }
.hart-tel { cursor: pointer; color: var(--dim); font-size: 12px; background: none;
  border: none; padding: 4px; text-decoration: underline dotted; }

/* vrienden */
.zoekrij { display: flex; gap: 8px; }
.zoekrij input { flex: 1; background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px; font: inherit; }
.zoek-uitslag:not(:empty) { margin-top: 10px; }
.persoon {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 9px; margin-bottom: 6px;
}
.persoon .naam { font-weight: 600; }
.persoon .sub { display: block; color: var(--dim); font-size: 12px; }
.persoon .acties { display: flex; gap: 6px; flex-shrink: 0; }

/* ranglijst */
.ranglijst { width: 100%; border-collapse: collapse; font-size: 13px; }
.ranglijst th { text-align: left; color: var(--dim); font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em; padding: 6px 8px; border-bottom: 1px solid var(--line); font-weight: 500; }
.ranglijst td { padding: 8px; border-bottom: 1px solid var(--line); }
.ranglijst tr.ik { background: rgba(224, 18, 31, .10); }
.ranglijst tr.ik td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.ranglijst .plek { font-family: ui-monospace, monospace; color: var(--dim); width: 34px; }
.ranglijst .num { text-align: right; font-family: ui-monospace, monospace; }

/* gedeelde trainingen */
.gedeeld {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 13px; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 9px; margin-bottom: 7px;
}
.gedeeld .sub { display: block; color: var(--dim); font-size: 12px;
  font-family: ui-monospace, monospace; }

/* accountkaart */
.account-kop { display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap; }
.account-naam { font-size: 16px; font-weight: 600; }
.account-mail { display: block; color: var(--dim); }
.account-vakken { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.account-vak h3 { margin-bottom: 8px; }
.account-vak .field { margin-bottom: 8px; }
@media (max-width: 820px) { .account-vakken { grid-template-columns: 1fr; } }

/* inlogdialoog */
.auth-vorm .field:last-of-type { margin-bottom: 8px; }
.auth-fout { color: #ff9aa2; font-size: 13px; margin: 8px 0 0;
  background: rgba(224, 18, 31, .10); border: 1px solid var(--accent-diep);
  border-radius: 7px; padding: 8px 11px; }

/* de wolkregel in de ritsamenvatting */
.sum-cloud { background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px; margin: 14px 0; }
.sum-cloud-rij { display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.sum-sync { display: block; font-size: 13px; }
.sum-sync.ok { color: var(--green); }
.sum-sync.err { color: var(--red); }

.leeg-tekst { color: var(--dim); font-size: 13px; padding: 12px 2px; }

/* ---------- racevoorspelling en pacing ---------- */
.voorspel-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; }
@media (max-width: 720px) { .voorspel-grid { grid-template-columns: 1fr; } }
.doeltijd h3 { margin-bottom: 8px; }
.doeltijd .field { margin-bottom: 6px; max-width: 160px; }

table.voorspel { width: 100%; border-collapse: collapse; font-size: 13px; }
table.voorspel th {
  text-align: right; color: var(--dim); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .05em;
  padding: 6px 8px; border-bottom: 1px solid var(--line);
}
table.voorspel td { padding: 7px 8px; border-bottom: 1px solid var(--line); }
table.voorspel td.num, table.voorspel th.num { text-align: right; font-family: ui-monospace, monospace; }
table.voorspel td.sterk { color: var(--text); font-weight: 600; font-size: 14px; }
table.voorspel td.zacht { color: var(--dim); }
table.voorspel tr.voorstel { background: rgba(224, 18, 31, .10); }
table.voorspel tr.voorstel td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
table.voorspel td.verlies { color: var(--red); }
table.voorspel td.winst { color: var(--green); }
table.voorspel.splits { margin-top: 14px; }

.pacing { background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 14px 16px; margin: 14px 0; }
.pacing h3 { margin-bottom: 12px; }
.pacing-cijfers { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.pacing-cijfers > span { display: block; }
.pacing-cijfers .pk { display: block; color: var(--dim); font-size: 11px;
  text-transform: uppercase; letter-spacing: .05em; }
.pacing-cijfers b { font-size: 19px; font-weight: 600; font-family: ui-monospace, monospace; }
.pacing-cijfers .pu { display: block; color: var(--dim); font-size: 11px; }
.pacing-advies { margin: 14px 0 0; padding-left: 18px; color: var(--text); font-size: 13px; }
.pacing-advies li { margin-bottom: 7px; }

/* ---------- het merk ---------- */
/* De naam in het zware schuine letterbeeld van het logo. Arial Black is op
   Mac en Windows aanwezig en komt er het dichtst bij; de schuinte doen we
   zelf, want een echte cursief van dit gewicht zit niet in de systeemfonts.
   Heb je het originele lettertype als bestand, zet het dan in public/fonts/,
   voeg hier een @font-face toe en haal de transform weg. */
/* Het woordmerk op de landings- en Over-pagina: zelfde letter als in de
   kopbalk, alleen groter. */
.merk-woord {
  font-family: Anton, 'Arial Narrow', sans-serif;
  letter-spacing: .035em;
  text-transform: uppercase;
  transform: skewX(-7deg);
  display: inline-block;
}
.merk-woord.groot { font-size: 46px; line-height: 1; }
.landing-merk img { display: block; }
/* Het merk helt zelf al; hier alleen het woord. */

/* ---------- landingspagina ---------- */
.view.landing { max-width: 1060px; margin: 0 auto; }
.landing-hero {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  gap: 40px; align-items: start; padding: 26px 0 44px;
}
@media (max-width: 900px) { .landing-hero { grid-template-columns: 1fr; gap: 28px; } }

.landing-merk { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.landing-intro h1 {
  font-size: 34px; line-height: 1.16; margin: 0 0 14px; letter-spacing: -.02em;
  max-width: 22ch;
}
.landing-lead { color: var(--dim); font-size: 15px; line-height: 1.65; margin: 0 0 22px; max-width: 54ch; }

.landing-punten { list-style: none; margin: 0 0 22px; padding: 0; }
.landing-punten li {
  position: relative; padding-left: 26px; margin-bottom: 13px;
  color: var(--dim); font-size: 14px; line-height: 1.6; max-width: 56ch;
}
.landing-punten li::before {
  content: ''; position: absolute; left: 4px; top: .55em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
}
.landing-punten b { color: var(--text); font-weight: 600; }
.landing-prijs { color: var(--dim); font-size: 14px; margin: 0; }
.landing-prijs b { color: var(--text); }

.landing-auth {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px 22px; box-shadow: var(--schaduw);
}
button.vol { width: 100%; margin-top: 4px; }
button.tekstlink {
  display: block; width: 100%; margin-top: 10px;
  background: none; border: none; padding: 4px;
  color: var(--dim); font-size: 13px; text-decoration: underline;
  text-decoration-color: var(--line); text-underline-offset: 3px;
}
button.tekstlink:hover { background: none; color: var(--text); text-decoration-color: currentColor; }
button.tekstlink.inline {
  display: inline; width: auto; margin: 0; padding: 0;
  font-size: inherit; color: var(--text);
  text-decoration-color: var(--accent); text-underline-offset: 2px;
}
.welkom-zonder { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); text-align: center; }
.welkom-zonder .hint { margin-top: 8px; }

.landing-blok { padding: 34px 0; border-top: 1px solid var(--line); }
.landing-blok h2 { font-size: 21px; margin-bottom: 6px; letter-spacing: -.01em; }
.landing-blok > .hint { margin-bottom: 18px; }

.parcours-rooster {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 10px;
}
.parcours {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px;
}
.parcours b { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.parcours span { color: var(--dim); font-size: 12px; font-family: ui-monospace, monospace; }

.landing-drie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 820px) { .landing-drie { grid-template-columns: 1fr; } }
.landing-drie h3 { color: var(--accent); margin-bottom: 8px; }
.landing-drie p { color: var(--dim); font-size: 14px; line-height: 1.65; margin: 0; }

.landing-voet {
  padding: 26px 0 50px; border-top: 1px solid var(--line);
  color: var(--dim); font-size: 13px; display: flex; gap: 10px; flex-wrap: wrap;
}

/* ---------- over ---------- */
.over { max-width: 680px; margin: 0 auto; padding: 10px 0 60px; }
.over h1 { font-size: 30px; line-height: 1.2; margin: 0 0 16px; letter-spacing: -.02em; }
.over h2 { font-size: 19px; margin: 34px 0 12px; letter-spacing: -.01em; }
.over p { font-size: 15px; line-height: 1.75; color: var(--dim); margin: 0 0 16px; }
.over-lead { font-size: 18px !important; color: var(--text) !important; line-height: 1.6 !important; }
.over-lijst { margin: 0 0 16px; padding-left: 22px; }
.over-lijst li { font-size: 15px; line-height: 1.7; color: var(--dim); margin-bottom: 12px; }
.over-lijst b { color: var(--text); font-weight: 600; }
.over-slot {
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 8px; padding: 14px 16px; margin-top: 26px !important;
}

/* ---------- thuis ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center;
  background: radial-gradient(120% 140% at 88% 12%, rgba(224, 18, 31, .22) 0%, rgba(224, 18, 31, .05) 42%, transparent 70%), var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 32px; margin-bottom: 16px;
}
@media (max-width: 760px) { .hero { grid-template-columns: 1fr; } }
.hero-hallo { color: var(--accent); font-size: 13px; font-weight: 600; margin: 0 0 4px;
  text-transform: uppercase; letter-spacing: .08em; }
.hero-titel { font-size: 30px; line-height: 1.15; margin: 0 0 8px; letter-spacing: -.02em; }
.hero-onder { color: var(--dim); font-size: 14px; margin: 0 0 20px; max-width: 46ch; }
.hero .primary.big { padding: 15px 34px; font-size: 16px; }

.hero-week { display: flex; gap: 24px; flex-wrap: wrap; }
.hero-week .wk { text-align: right; min-width: 74px; }
.hero-week .wk b { display: block; font-size: 26px; font-weight: 600;
  font-family: ui-monospace, monospace; line-height: 1.1; }
.hero-week .wk span { color: var(--dim); font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em; }
@media (max-width: 760px) { .hero-week .wk { text-align: left; } }

/* Twee echte kolommen naast elkaar. Met opzet niet .grid-2: dat is
   CSS-kolommen (voor de kaarten op het opzetscherm) en dan vloeit de inhoud
   als tekst van de ene kolom naar de andere. */
.thuis-grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 22px; align-items: start;
}
@media (max-width: 860px) { .thuis-grid { grid-template-columns: 1fr; } }
.thuis-kop { margin-bottom: 12px; }
.thuis-grid .feed-rit { padding: 12px 14px; }

.nieuws-item {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 10px;
}
.nieuws-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.nieuws-item h3 { color: var(--text); text-transform: none; letter-spacing: 0;
  font-size: 14px; font-weight: 600; }
.nieuws-datum { color: var(--dim); font-size: 12px; white-space: nowrap; }
.nieuws-item p { margin: 6px 0 0; color: var(--dim); font-size: 13px; line-height: 1.6; }
.nieuws-merk {
  display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 7px; border-radius: 999px; margin-bottom: 6px;
  background: rgba(224, 18, 31, .16); color: #ff6b74;
}

/* Een gast ziet alleen het merk: geen tabs naar een app waar hij nog niet
   in mag, en geen chips voor een trainer die hij nog niet verbonden heeft.

   De taalkeuze blijft wél staan, en dat is juist hier het belangrijkst: wie
   op de landingspagina in de verkeerde taal binnenkomt moet daar kunnen
   omschakelen, niet pas nadat hij een account heeft gemaakt. */
body.gast .tabs { display: none; }
body.gast .chips > :not(.taalkeuze) { display: none; }
body.gast .chips { margin-left: auto; }
body.gast .brand { margin-left: auto; }
body.gast main { padding-top: 24px; }

/* Zonder server valt het inlogvak weg; de knop eronder blijft. */
.landing-auth.zonder-server #welkom-tabs,
.landing-auth.zonder-server .auth-vorm { display: none; }
.landing-auth.zonder-server .welkom-zonder {
  margin-top: 0; padding-top: 0; border-top: none;
}
.landing-auth.zonder-server .welkom-zonder button {
  background: var(--accent); color: #fff; border-color: var(--accent);
  font-weight: 600; padding: 14px 30px; font-size: 15px;
  box-shadow: 0 1px 0 var(--accent-diep);
}

/* ---------- uitklapbaar kopje ---------- */
/* Uitleg die je een keer leest hoeft niet elke keer in beeld te staan. */
.uitklap { margin-top: 12px; }
.uitklap > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px;
  color: var(--dim); font-size: 12px; padding: 3px 0;
}
.uitklap > summary::-webkit-details-marker { display: none; }
.uitklap > summary::before {
  content: ''; width: 0; height: 0; flex: none;
  border-left: 5px solid currentColor; border-top: 4px solid transparent;
  border-bottom: 4px solid transparent; transition: transform .15s;
}
.uitklap[open] > summary::before { transform: rotate(90deg) translateX(1px); }
.uitklap > summary:hover { color: var(--text); }
.uitklap[open] > summary { margin-bottom: 4px; }

/* ---------- profiel en vorm ---------- */
.vorm-kern { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px; margin: 4px 0 14px; }
@media (max-width: 760px) { .vorm-kern { grid-template-columns: 1fr; } }
.vorm-kern .vk { border-left: 3px solid var(--accent); padding-left: 13px; }
.vorm-kern .vk-naam { display: block; color: var(--dim); font-size: 11px;
  text-transform: uppercase; letter-spacing: .06em; }
.vorm-kern .vk-waarde { display: block; font-size: 27px; font-weight: 600;
  font-family: ui-monospace, monospace; line-height: 1.15; }
.vorm-kern .vk-waarde small { font-size: 14px; color: var(--dim); font-weight: 400; }
.vorm-kern .vk-uitleg { display: block; color: var(--dim); font-size: 12px;
  line-height: 1.5; margin-top: 4px; }
.vorm-kern .vk.leeg { border-left-color: var(--line); }
.vorm-kern .vk.leeg .vk-waarde { color: var(--dim); }

table.pieken { width: 100%; border-collapse: collapse; font-size: 13px; }
table.pieken th { text-align: right; color: var(--dim); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .05em; padding: 6px 8px;
  border-bottom: 1px solid var(--line); }
table.pieken th:last-child, table.pieken td:last-child { text-align: left; }
table.pieken td { padding: 8px; border-bottom: 1px solid var(--line);
  text-align: right; font-family: ui-monospace, monospace; }
table.pieken td.duur { color: var(--dim); }
table.pieken td.watt { color: var(--text); font-weight: 600; font-size: 14px; }
table.pieken td.waar { color: var(--dim); font-family: inherit; }

/* ---------- wat je gereden hebt ---------- */
.loopbaan-groot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px; margin-bottom: 4px; }
@media (max-width: 720px) { .loopbaan-groot { grid-template-columns: repeat(2, 1fr); } }
.loopbaan-groot .lg b {
  display: block; font-size: 32px; line-height: 1.1; font-weight: 600;
  font-family: ui-monospace, monospace; letter-spacing: -.02em;
}
.loopbaan-groot .lg b small { font-size: 15px; color: var(--dim); font-weight: 400;
  letter-spacing: 0; }
.loopbaan-groot .lg span { color: var(--dim); font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; }

.loopbaan-rijen { margin-top: 18px; border-top: 1px solid var(--line); }
.loopbaan-rij {
  display: grid; grid-template-columns: minmax(84px, 1fr) repeat(4, minmax(0, 1fr));
  gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: baseline;
}
.loopbaan-rij .lr-naam { color: var(--dim); font-size: 12px; text-transform: uppercase;
  letter-spacing: .05em; }
.loopbaan-rij span { font-family: ui-monospace, monospace; font-size: 13px; text-align: right; }
.loopbaan-rij span em { color: var(--dim); font-style: normal; font-size: 11px; }
.loopbaan-langste { padding: 12px 0 0; color: var(--dim); font-size: 13px; }
.loopbaan-langste b { color: var(--text); font-family: ui-monospace, monospace; }

/* ---------- agenda ---------- */
.agenda-balk {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.agenda-balk h2 { font-size: 19px; margin: 0; min-width: 190px; }
.agenda { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }

/* Zeven dagen plus een kolom met het weektotaal. */
.ag-kop, .ag-rij { display: grid; grid-template-columns: repeat(7, 1fr) 92px; }
.ag-kop {
  background: var(--panel-2); border-bottom: 1px solid var(--line);
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--dim);
}
.ag-kop span { padding: 7px 10px; }
.ag-week-kop { text-align: right; }
.ag-rij { border-bottom: 1px solid var(--line); }
.ag-rij:last-child { border-bottom: 0; }

.ag-dag {
  min-height: 104px; padding: 6px; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px; cursor: pointer;
  background: var(--panel);
}
.ag-dag:hover { background: var(--panel-2); }
.ag-dag.buiten { background: #0c0c0f; }
.ag-dag.buiten .ag-nr { opacity: .35; }
.ag-dag.voorbij .ag-nr { color: var(--dim); }
.ag-dag.vandaag { box-shadow: inset 0 0 0 2px var(--accent); }
.ag-dag.erop { background: var(--paneel-op); box-shadow: inset 0 0 0 2px var(--lijn-op); }
.ag-nr { font-size: 12px; color: var(--text); font-variant-numeric: tabular-nums; }

.ag-item {
  display: block; width: 100%; text-align: left; cursor: grab;
  background: var(--panel-2); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 6px;
  padding: 4px 6px; color: var(--text); font: inherit; font-size: 12px;
}
.ag-item:hover { border-color: var(--lijn-op); background: var(--paneel-op); }
.ag-item.sleept { opacity: .4; }
.ag-item.gedaan { border-left-color: var(--green); }
.ag-item.gedaan .ag-naam { text-decoration: line-through; opacity: .75; }
.ag-naam { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-duur { display: block; color: var(--dim); font-size: 11px; }

.ag-week {
  padding: 8px 10px; text-align: right; background: var(--panel-2);
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
}
.ag-week b { font-size: 16px; }
.ag-week span { color: var(--dim); font-size: 11px; }
.ag-week .ag-af { color: var(--green); }

@media (max-width: 760px) {
  .ag-kop, .ag-rij { grid-template-columns: repeat(7, 1fr); }
  .ag-week { display: none; }
  .ag-week-kop { display: none; }
  .ag-dag { min-height: 76px; }
  .ag-duur { display: none; }
}

/* ---------- privacyverklaring ---------- */
.privacy-tabel { width: 100%; border-collapse: collapse; margin: 0 0 22px; }
.privacy-tabel th, .privacy-tabel td {
  text-align: left; vertical-align: top; padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.7;
}
.privacy-tabel th { width: 34%; color: var(--text); font-weight: 600; padding-right: 20px; }
.privacy-tabel td { color: var(--dim); }
@media (max-width: 560px) {
  .privacy-tabel th, .privacy-tabel td { display: block; width: auto; border-bottom: 0; }
  .privacy-tabel th { padding-bottom: 2px; }
  .privacy-tabel td { padding-top: 0; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
}

/* Het vinkje bij registreren. Groter aanraakvlak dan een gewone regel tekst,
   want dit is het enige dat je echt bewust moet aanzetten. */
.toestemming {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13px; line-height: 1.55; color: var(--dim);
  margin: 4px 0 14px;
}
.toestemming input { margin-top: 2px; flex: none; }

/* ---------- statistieken per periode ---------- */
.stat-nu {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px; margin: 14px 0 18px;
}
.stat-nu div { background: var(--panel-2); border-radius: 10px; padding: 12px 14px; }
.stat-nu b { display: block; font-size: 24px; font-weight: 600; line-height: 1.15; }
.stat-nu b small { font-size: 13px; color: var(--dim); font-weight: 400; }
.stat-nu span { display: block; color: var(--dim); font-size: 12px; margin-top: 3px; }
/* Het verschil met de vorige periode. Groen omhoog, grijs omlaag: minder
   rijden is geen fout, dus dat hoeft niet rood. */
.stat-nu em {
  display: block; font-style: normal; font-size: 11px; margin-top: 2px; color: var(--dim);
}
.stat-nu em.meer { color: var(--green); }

/* ---------- doelen ---------- */
.doel-lijst { display: flex; flex-direction: column; gap: 10px; }
.doel {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; cursor: pointer; text-align: left; width: 100%;
  color: var(--text); font: inherit;
}
.doel:hover { border-color: var(--lijn-op); }
.doel-kop { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.doel-kop b { font-size: 15px; }
.doel-kop span { color: var(--dim); font-size: 12px; }
.doel-kop .rek { flex: 1; }
.doel-getal { font-variant-numeric: tabular-nums; }

/* De balk. De streep laat zien waar je zou staan als je het gelijkmatig zou
   verdelen; zonder die streep zegt een percentage niets. */
.doel-balk {
  position: relative; height: 8px; background: var(--bg);
  border-radius: 4px; overflow: hidden;
}
.doel-vol { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); }
.doel-af .doel-vol { background: var(--green); }
.doel-streep {
  position: absolute; top: -2px; bottom: -2px; width: 2px;
  background: var(--text); opacity: .55;
}
.doel-onder {
  display: flex; gap: 10px; margin-top: 6px; font-size: 12px; color: var(--dim);
}
.doel-onder .voor { color: var(--green); }
.doel-leeg { color: var(--dim); font-size: 14px; padding: 6px 0; }

/* Nieuwsbrief: één regel met een veld en een knop, en op een telefoon eronder. */
.verborgen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.nieuwsbrief { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 8px; }
.nieuwsbrief input {
  flex: 1 1 220px; min-width: 0; background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; font: inherit;
}
.nieuwsbrief input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(224, 18, 31, .18);
}
.nieuwsbrief button { flex: 0 0 auto; }

/* Fietsgroepen. Een groepsrij en een ledenrij zijn allebei .persoon, dus hier
   staat alleen wat daar niet in past. */
.klein-kop {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--dim); margin: 18px 0 8px; font-weight: 600;
}
.groep-rij { cursor: pointer; }
.groep-rij:hover { border-color: var(--accent); }
.groep-rij .rol {
  font-size: 11px; color: var(--dim); border: 1px solid var(--line);
  border-radius: 5px; padding: 1px 6px;
}
#groep-link { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

/* Door wiens ritten je kijkt: iedereen, of één groep. Boven de tabs, want hij
   geldt voor de ritten, de ranglijsten en wie er nu rijdt tegelijk. */
.kring-kiezer { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.kring-kiezer label { color: var(--dim); font-size: 12px; }
.kring-kiezer select {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 7px; padding: 5px 8px; font: inherit; font-size: 13px;
}

/* Feedback. De soortknoppen zijn een keuze uit drie, dus radioknoppen in
   knopvorm: één staat er aan, en dat zie je. */
.veld-rij { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.veld-rij button.aan { border-color: var(--accent); color: var(--text); }
#view-feedback textarea { min-height: 150px; }