/* ════════════════════════════════════════════════════════════════════════
   App-layout — iPhone 16 eerst (393×852), schaalt mee naar PC.
   Onderste tabbalk op gsm, bovenbalk op PC. Niets overlapt.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Chroom ────────────────────────────────────────────────────────────── */

.topnav { flex-wrap: wrap; row-gap: 0; }
.topnav .nav-right {
  display: flex; align-items: center; gap: var(--space-3);
  margin-left: auto;
}
.brandlogo {
  width: 26px; height: 26px; flex-shrink: 0;
  background-size: contain; background-position: center; background-repeat: no-repeat;
}

.savedot {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--t-label); font-weight: 800; letter-spacing: var(--track-label);
  text-transform: uppercase; color: rgba(255,255,255,.65);
  white-space: nowrap;
}
/* De statusstip is de aftrapcirkel uit het woordmerk: een ring met een stip.
   Bewaard = ring dicht bij de stip; onderweg of fout = de stip kleurt mee. */
.savedot .dot {
  width: 11px; height: 11px; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.45);
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255,255,255,.45) 0 2px, transparent 2.1px);
}
.savedot .dot.on {
  border-color: var(--color-accent);
  background: radial-gradient(circle, var(--color-accent) 0 2px, transparent 2.1px);
}
.savedot .dot.off {
  border-color: #fff;
  background: radial-gradient(circle, #fff 0 2px, transparent 2.1px);
}

.navbtn {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 36px; padding: 6px 12px;
  border-radius: var(--r-sm);
  background: transparent; color: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.3);
  font-family: var(--font-kop); font-size: 12.5px; font-weight: 600;
  letter-spacing: -0.01em; cursor: pointer;
  transition: background .08s, color .08s, border-color .08s;
}
.navbtn:hover { background: #fff; color: var(--color-neutral-900); border-color: #fff; }
.navbtn[aria-current="page"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent, #fff); }

/* ── Pagina ────────────────────────────────────────────────────────────── */

.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-7) var(--space-6) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.pagehead {
  position: relative;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-5); flex-wrap: wrap;
  border-bottom: var(--rule-accent);
  padding-bottom: var(--space-4);
}
/* De handtekening van SPOTR: de accentlijn onder elke paginatitel is de
   middenlijn, met de aftrapstip erop — dezelfde cirkel als de O in het
   woordmerk. Cirkels mogen door de radius-reset heen: het veld is rond. */
.pagehead::after {
  content: ''; position: absolute; left: 50%; bottom: -8.5px;
  transform: translateX(-50%);
  width: 14px; height: 14px;
  border: 3px solid var(--color-accent);
  border-radius: 50% !important;
  background: radial-gradient(circle, var(--color-accent) 0 2.5px, var(--color-bg) 2.6px);
}
.pagehead .ph-tekst { min-width: 0; flex: 1; }
.pagehead .ph-kicker {
  display: flex; align-items: baseline; gap: 12px;
  font-size: var(--t-label); font-weight: 800; letter-spacing: var(--track-kicker);
  text-transform: uppercase; color: var(--color-accent);
  margin-bottom: 8px;
}
/* Het hoofdstuknummer als tegeltje: klein accent dat de kop draagt. */
.pagehead .ph-index {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 24px; padding: 0 7px;
  background: linear-gradient(180deg, var(--color-accent-100), var(--color-accent-200));
  color: var(--color-accent-800);
  border-radius: var(--r-sm); letter-spacing: .06em;
}
.pagehead h1 { margin: 0; }
.pagehead p { margin: 10px 0 0; color: var(--color-neutral-600); font-size: var(--t-meta); max-width: 62ch; }
.pagehead .ph-acties { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* Sectiekop tussen blokken door. */
.sectie {
  display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap;
  font-size: var(--t-label); font-weight: 800; letter-spacing: var(--track-kicker);
  text-transform: uppercase; color: var(--color-neutral-600);
  border-bottom: var(--hairline); padding-bottom: 8px;
  margin-top: var(--space-2);
}

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); }
.grid-tight { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); }
.row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.tablewrap { overflow-x: auto; max-height: 70vh; overflow-y: auto; }

/* Mini-meters in lijstrijen: de score als vlakje op de schaal 5–8,5, met het
   cijfer ernaast. Scannen in plaats van lezen. */
.mini-meter { display: flex; align-items: center; gap: 7px; }
.mini-meter .mm-label {
  width: 12px; font-size: 9.5px; font-weight: 800;
  color: var(--color-neutral-600); text-transform: uppercase;
}
.mini-meter .mm-baan {
  position: relative; width: 62px; height: 7px;
  background: var(--color-neutral-200); overflow: hidden; flex-shrink: 0;
}
.mini-meter .mm-vul { position: absolute; left: 0; top: 0; bottom: 0; background: var(--color-accent); }
.mini-meter .mm-vul.zacht { background: var(--color-neutral-500); }
.mini-meter .mm-cijfer {
  width: 26px; font-size: 12px; font-weight: 800;
  font-variant-numeric: tabular-nums; text-align: right;
}

/* De trend uit de evolutie: één teken naast de meters. */
.trend {
  min-width: 44px; text-align: right;
  font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.trend.op { color: var(--color-accent); }
.trend.neer, .trend.gelijk { color: var(--color-neutral-600); }

/* Filterblok: de knop en de rij velden eronder horen los van elkaar — de
   slagschaduw van de knop mag nooit op een label landen. */
.filterblok { display: flex; flex-direction: column; gap: var(--space-4); }

/* Statistiek: het cijfer draagt. */
.statcard { gap: var(--space-2); padding: var(--space-4) var(--space-5); border-top: 6px solid var(--color-accent); }
.statcard .statval {
  font-family: var(--font-kop); font-size: 42px; font-weight: 700; letter-spacing: -0.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ── Notitieblad ───────────────────────────────────────────────────────── */

.worksplit { display: flex; gap: var(--space-5); align-items: flex-start; flex-wrap: wrap; }
.sessioncol { display: flex; flex-direction: column; gap: var(--space-2); min-width: 156px; }
.workmain { flex: 1; min-width: 320px; display: flex; flex-direction: column; gap: var(--space-5); }

.sessionchip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 9px 11px; min-height: 46px; min-width: 66px; cursor: pointer;
  border: 2px solid transparent; font-family: inherit; text-align: left;
  transition: box-shadow .08s;
}
.sessionchip.active { border-color: var(--color-text); box-shadow: inset 0 0 0 2px var(--color-bg); }
.sessionchip .ini { font-weight: 800; font-size: var(--t-meta); }
.sessionchip .pos { font-size: 9.5px; font-weight: 800; letter-spacing: var(--track-label); text-transform: uppercase; opacity: .85; }

.catblock { border-top: var(--rule); padding-top: var(--space-4); }
.cattitle {
  display: flex; align-items: baseline; gap: 10px;
  font-size: var(--t-micro); font-weight: 800; color: var(--color-accent);
  text-transform: uppercase; letter-spacing: var(--track-kicker); margin-bottom: var(--space-3);
}

.scorebar {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  background: var(--color-bg); padding: var(--space-3) var(--space-4);
  border: var(--hairline); border-left: 6px solid var(--color-text);
}
.scorebar .scorelabel {
  flex: 1; min-width: 96px;
  font-size: var(--t-meta); font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
}

.itemrow {
  display: flex; align-items: center; gap: var(--space-4);
  padding: 7px 0; border-bottom: var(--hairline);
}
.itemrow:last-child { border-bottom: 0; }
.itemrow .itemlabel { flex: 1; min-width: 96px; font-size: var(--t-meta); font-weight: 600; }

.cat-head {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: 0; padding: var(--space-2) 0 var(--space-3);
  font-family: inherit;
}
.cat-head .cat-name { flex: 1; min-width: 90px; font-size: var(--t-micro); font-weight: 800; color: var(--color-accent); text-transform: uppercase; letter-spacing: var(--track-kicker); }
.cat-head .cat-count { font-size: var(--t-label); font-weight: 800; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--color-neutral-600); }
.cat-head .cat-caret { font-size: 10px; color: var(--color-neutral-600); }

.compactnote {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  width: 100%; text-align: left; cursor: pointer;
  background: var(--color-surface); color: var(--color-text);
  border: var(--rule); padding: var(--space-3) var(--space-4); min-height: 54px;
  font-family: inherit; transition: background .08s;
}
.compactnote:hover { background: var(--color-neutral-200); }

/* ── Veldmodus ─────────────────────────────────────────────────────────────
   Rechtop, één hand, blik op het veld. Alles wat je moet raken is groot, wat
   je niet meteen nodig hebt klapt weg, en de speler waar je mee bezig bent
   blijft bovenaan staan. */

.veldswitch {
  display: inline-flex; align-items: center; gap: var(--space-3);
  min-height: 48px; padding: 6px 14px 6px 8px;
  background: var(--color-surface); color: var(--color-text);
  border: var(--rule); cursor: pointer; font-family: inherit;
}
.veldswitch:hover { background: var(--color-neutral-200); }
.veldswitch-spoor {
  position: relative; flex-shrink: 0;
  width: 52px; height: 28px;
  background: var(--color-neutral-400); border: 2px solid var(--color-text);
  transition: background .12s;
}
.veldswitch-knop {
  position: absolute; top: 1px; left: 1px;
  width: 22px; height: 22px; background: var(--color-topbar, var(--color-text));
  transition: transform .12s;
}
.veldswitch.aan .veldswitch-spoor { background: var(--color-accent); }
.veldswitch.aan .veldswitch-knop { transform: translateX(24px); background: #fff; }
.veldswitch-tekst { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.veldswitch-titel {
  font-size: var(--t-label); font-weight: 800;
  letter-spacing: var(--track-label); text-transform: uppercase;
}
.veldswitch-uitleg { font-size: 11px; color: var(--color-neutral-600); }
.veldswitch.aan .veldswitch-uitleg { color: var(--color-accent); font-weight: 700; }

.hint-scherm { display: none; }
body.scherm-aan .hint-scherm { display: inline; }

.veldhint {
  border-left: 6px solid var(--color-accent);
  background: var(--color-bg); padding: var(--space-3) var(--space-4);
  font-size: 13px; color: var(--color-neutral-700);
  margin-bottom: var(--space-4);
}

/* De speler blijft in beeld, hoe ver je ook scrolt. */
.veldbalk {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--color-topbar, var(--color-neutral-900)); color: #F4F5F2;
  border-bottom: 3px solid var(--color-accent);
  padding: var(--space-3) var(--space-3);
  margin-bottom: var(--space-4);
}
.veldbalk .vb-ini {
  flex-shrink: 0; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-accent); color: #fff;
  font-size: 14px; font-weight: 800;
}
.veldbalk .vb-naam { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.veldbalk .vb-naam-tekst { font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.veldbalk .vb-pos { font-size: 11px; color: rgba(255,255,255,.6); }
.veldbalk .vb-scores { display: flex; gap: var(--space-3); flex-shrink: 0; }
.veldbalk .vb-score { font-size: 11px; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .06em; }
.veldbalk .vb-score b { display: block; font-size: 17px; color: #fff; font-variant-numeric: tabular-nums; }
.veldbalk .vb-klaar { flex-shrink: 0; min-height: 44px; padding: 0 var(--space-4); }

body.veld .stepper button { width: 60px !important; height: 60px !important; font-size: 28px; }
body.veld .stepper-value { min-width: 80px !important; height: 60px !important; font-size: 24px; }
body.veld .btn { min-height: 54px; font-size: 15px; }
body.veld .veldbalk .vb-klaar { min-height: 44px; }
body.veld .itemrow { padding: 10px 0; }
body.veld .itemrow .itemlabel { font-size: 15px; font-weight: 700; }
body.veld .scorebar { padding: var(--space-4); border-left-width: 8px; }
body.veld .scorebar .scorelabel { font-size: 14px; }
body.veld .cat-head { min-height: 56px; padding: var(--space-3) 0; }
.veldcat-kop {
  display: flex; align-items: baseline; gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.veldcat-naam {
  flex: 1; font-family: var(--font-kop); font-size: 17px; font-weight: 700;
  letter-spacing: -0.01em;
}
.veldcat-teller {
  font-size: 12px; font-weight: 800; color: var(--color-neutral-600);
  font-variant-numeric: tabular-nums;
}
body.veld .catblock + .catblock { margin-top: var(--space-5); padding-top: var(--space-5); border-top: var(--rule); }
body.veld .cat-head .cat-name { font-size: 14px; }
body.veld .input { min-height: 54px; font-size: 17px; }
body.veld .card-kicker { font-size: 12px; }
/* Positie, aanbeveling en kleurcode: knoppen die je met een duim raakt.
   Alleen die rijen — een gewone knoppenrij mag niet uitgerekt worden. */
body.veld .chiprow .btn { flex: 1 1 88px; }

/* ── Bediening ─────────────────────────────────────────────────────────── */

.combo { position: relative; min-width: 0; }
.combo-row { display: flex; }
.combo-row .input { flex: 1; min-width: 0; border-right-width: 0; }
.combo-toggle {
  width: 46px; flex-shrink: 0; min-height: 46px;
  background: var(--color-topbar, var(--color-text)); color: #F4F5F2;
  border: 1.5px solid var(--color-topbar, var(--color-text)); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-family: inherit; font-size: 10px; cursor: pointer;
  transition: background .08s;
}
.combo-toggle:hover { background: var(--color-accent); border-color: var(--color-accent); }
.drop {
  position: absolute; z-index: 60; left: 0; right: 0; top: 100%;
  max-height: 260px; overflow-y: auto;
  background: var(--color-neutral-100); border: var(--rule); border-top: 0;
}
.drop-item {
  display: block; width: 100%; min-height: 44px; text-align: left;
  padding: 11px 12px; background: transparent; color: var(--color-text);
  border: 0; border-bottom: var(--hairline);
  font-family: inherit; font-size: var(--t-body); cursor: pointer;
}
.drop-item:hover { background: var(--color-topbar, var(--color-text)); color: #F4F5F2; }

/* De stepper is één afgerond blok; de helft die je indrukt toont dat met zijn
   eigen vlakkleur. */
.stepper {
  display: flex; align-items: stretch; border: 1.5px solid var(--color-neutral-300);
  border-radius: var(--r-sm); overflow: hidden; width: fit-content;
  background: var(--color-neutral-100);
  box-shadow: var(--schaduw-1);
}
.stepper button { font-size: 22px; font-weight: 800; line-height: 1; border: 0; cursor: pointer; font-family: inherit; flex-shrink: 0; transition: background .08s; }
.stepper-minus { background: transparent; color: var(--color-text); border-right: 2px solid var(--color-text) !important; }
.stepper-minus:hover { background: var(--color-neutral-200); }
.stepper-minus:active { background: var(--color-neutral-300); }
.stepper-plus { background: var(--color-accent); color: #fff; border-left: 2px solid var(--color-text) !important; }
.stepper-plus:hover { background: var(--color-accent-600); }
.stepper-plus:active { background: var(--color-accent-700); }
.stepper-value {
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: var(--color-accent);
}
.stepper-hint {
  font-size: var(--t-label); font-weight: 800; letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--color-neutral-600); min-width: 104px;
}

.chipset { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  border-radius: var(--r-sm);
  padding: 8px 14px; min-height: 40px;
  background: var(--color-neutral-100); color: var(--color-text);
  border: 2px solid var(--color-neutral-400);
  font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  transition: background .08s, border-color .08s, color .08s;
}
.chip:hover { border-color: var(--color-text); }
.chip.on {
  background: var(--color-accent); border-color: var(--color-accent); color: #fff;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.25);
}

.colorpick { width: 52px; height: 46px; padding: 2px; border: 2px solid var(--color-text); background: var(--color-neutral-100); cursor: pointer; }

/* ── Lijsten en meldingen ──────────────────────────────────────────────── */

.listrow {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--r-md);
  box-shadow: var(--schaduw-1);
  margin-bottom: 8px;
  cursor: pointer; text-align: left;
  transition: transform .16s var(--veer), box-shadow .16s ease-out, border-color .1s;
}
.listrow:hover { box-shadow: var(--schaduw-2); transform: translateY(-1px); }
.listrow:active { transform: scale(.985); }
@media (prefers-reduced-motion: reduce) {
  .listrow:hover, .listrow:active { transform: none; }
}

.suggestbar {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  background: var(--color-accent-100); border: 2px solid var(--color-accent);
  border-left-width: 6px; font-size: var(--t-meta);
}
.suggestbar .msg { flex: 1; min-width: 200px; }

.dialog-warn {
  border: 2px solid var(--color-accent); border-left-width: 6px;
  background: var(--color-accent-100); padding: var(--space-3) var(--space-4);
  font-size: var(--t-meta);
}

.leeg {
  border: var(--hairline); background: var(--color-bg);
  padding: var(--space-7) var(--space-5);
  color: var(--color-neutral-600); font-size: var(--t-meta);
}

.toast {
  position: fixed; bottom: var(--space-6); left: 50%; transform: translate(-50%, 10px);
  background: var(--color-topbar, var(--color-neutral-900)); color: #F4F5F2;
  border-left: 6px solid var(--color-accent);
  border-radius: var(--r-md);
  padding: 13px 20px; font-size: var(--t-micro); font-weight: 800;
  letter-spacing: var(--track-label); text-transform: uppercase;
  z-index: 2000; max-width: calc(100vw - 32px);
  opacity: 0; pointer-events: none; transition: opacity .16s, transform .16s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.offlinebar {
  padding: 9px var(--space-6); font-size: var(--t-meta); font-weight: 600; font-family: var(--font-kop);
  background: var(--color-topbar, var(--color-neutral-800)); color: #F4F5F2;
  border-bottom: 3px solid var(--color-accent);
}

/* Plan van de club: rustig als het nog ver weg is, nadrukkelijk in respijt en alleen-lezen. */
.planbalk {
  display: flex; align-items: center; gap: 12px; padding: 9px var(--space-6); font-size: var(--t-meta); font-weight: 600; font-family: var(--font-kop);
  background: var(--color-surface); color: var(--color-text); border-bottom: 3px solid var(--color-accent);
}
.planbalk.respijt { background: #FFF4D6; color: #5E4300; border-bottom-color: #D99A1E; }
.planbalk.alleen-lezen { background: var(--color-topbar, var(--color-neutral-800)); color: #F4F5F2; border-bottom-color: #D23B3B; }
.planbalk span { flex: 1; }
.planbalk-weg { background: none; border: 0; color: inherit; font: inherit; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; opacity: .7; }
.planbalk-weg:hover { opacity: 1; }
.abo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px 16px; }
.abo-k { font-family: var(--font-mono); font-weight: 500; font-size: var(--t-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--color-neutral-600); }
.abo-w { font-weight: 600; font-size: var(--t-body); margin-top: 2px; }
.abo-w .tag { white-space: normal; line-height: 1.3; }
.doclijst { display: flex; flex-direction: column; }
.docrij { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: var(--hairline); color: inherit; text-decoration: none; }
.docrij:last-child { border-bottom: 0; }
.docrij > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.docrij b { font-size: var(--t-body); }
.docrij:hover b { text-decoration: underline; }
.abo-facturen { display: flex; flex-direction: column; }
.abo-factuur { display: grid; grid-template-columns: auto 1fr auto auto; white-space: nowrap; gap: 12px; align-items: center; padding: 8px 0; border-bottom: var(--hairline); color: inherit; text-decoration: none; font-size: var(--t-meta); font-variant-numeric: tabular-nums; }
.abo-factuur:last-child { border-bottom: 0; }
.abo-factuur:hover span:first-child { text-decoration: underline; }

/* ── Tabbalk (gsm) ─────────────────────────────────────────────────────── */

.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 900;
  display: none;
  background: var(--color-topbar, var(--color-neutral-900)); color: #F4F5F2;
  border-top: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
.tabbar button {
  min-height: 62px; padding: 8px 2px 7px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: transparent; color: inherit;
  border: 0;
  font-family: inherit; font-size: 9.5px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
  opacity: .6; transition: opacity .12s;
}
.tabbar button .tab-lbl { line-height: 1; }
.tabbar button svg { transition: transform .18s var(--veer); }
.tabbar button.active { opacity: 1; color: var(--color-accent-300); }
.tabbar button.active svg { transform: translateY(-1px) scale(1.08); }

/* ── Tactisch bord ─────────────────────────────────────────────────────── */

/* Het bord is een echt veld: gras met maailijnen — dezelfde taal als het
   portaal — met de volledige belijning: buitenlijnen, middenlijn, cirkel en
   beide strafschopgebieden. */
.pitch {
  --chalk: rgba(255,255,255,.5);
  position: relative;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.045) 0 44px, transparent 44px 88px),
    #12683a;
  border: 1px solid rgba(0,0,0,.25);
  border-radius: var(--r-lg);
  box-shadow: var(--schaduw-2);
  padding: 40px var(--space-4) 44px;
  display: flex; flex-direction: column; gap: var(--space-5);
  min-height: 460px; justify-content: space-between;
  overflow: hidden;
}
.pitch::before { content: ''; position: absolute; inset: 12px; border: 2px solid var(--chalk); pointer-events: none; }
.pitch::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 118px; height: 118px;
  transform: translate(-50%, -50%); border: 2px solid var(--chalk);
  border-radius: 50% !important; pointer-events: none;
}
/* middenlijn en de twee strafschopgebieden */
.pitchlijnen { position: absolute; inset: 12px; pointer-events: none; }
.pitchlijnen::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  border-top: 2px solid var(--chalk);
}
.pitchlijnen::after {
  content: '';
  position: absolute; left: 50%; transform: translateX(-50%);
  top: -2px; bottom: -2px; width: min(46%, 240px);
  border: 2px solid var(--chalk);
  border-image: none;
  clip-path: polygon(0 0, 100% 0, 100% 13%, 0 13%, 0 87%, 100% 87%, 100% 100%, 0 100%);
}
.pitchrow { position: relative; z-index: 1; display: flex; justify-content: center; gap: var(--space-3); flex-wrap: wrap; align-items: flex-start; }
.pitchslot { min-width: 92px; max-width: 128px; text-align: center; }
.pitchslot .slotlabel {
  font-size: 9px; font-weight: 800; color: rgba(255,255,255,.7);
  text-transform: uppercase; letter-spacing: var(--track-kicker); margin-bottom: 5px; text-align: left;
}
/* Spelers op het bord als opstellingskaartjes: wit vlak, inkttekst, de
   clubkleur als band links en het rugnummer als groot cijfer. */
.pitchchip {
  display: flex; align-items: center; gap: 7px;
  background: #fff; color: #14181f;
  padding: 6px 9px 6px 8px; margin-bottom: 4px;
  border-radius: var(--r-sm);
  cursor: pointer; font-size: var(--t-micro); font-weight: 800; line-height: 1.2;
  text-align: left; border-left: 4px solid var(--color-accent);
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  transition: transform .16s var(--veer), box-shadow .16s;
}
.pitchchip:hover { transform: translateY(-2px); box-shadow: 0 5px 12px rgba(0,0,0,.35); }
.pitchchip .chip-nr {
  flex-shrink: 0; min-width: 20px; text-align: center;
  font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--color-neutral-600);
}
.pitchadd {
  width: 100%; background: rgba(255,255,255,.08);
  border: 1px dashed rgba(255,255,255,.42); color: rgba(255,255,255,.85);
  padding: 7px 6px; min-height: 34px; font-size: 10.5px; font-weight: 600;
  cursor: pointer; font-family: var(--font-kop); text-align: left; transition: background .08s;
}
.pitchadd:hover { background: rgba(255,255,255,.2); }

/* ── Spelers ───────────────────────────────────────────────────────────── */

/* Monogrammen en avatars: rond, met een zacht verloop over de vlakkleur —
   het verschil tussen een blokje en een gezicht. */
.crest {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-weight: 800; letter-spacing: .02em;
  border-radius: var(--r-sm);
  background-image: linear-gradient(160deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 55%, rgba(0,0,0,.12) 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
/* Een echt clublogo krijgt geen verloop over zich heen. */
.crest[style*="background-image"] {
  background-size: contain; background-position: center; background-repeat: no-repeat;
  box-shadow: none;
}
.avatar {
  display: block; flex-shrink: 0;
  border-radius: var(--r-sm);
  background-color: var(--color-neutral-300);
  background-size: cover; background-position: center top; background-repeat: no-repeat;
  filter: grayscale(1) contrast(1.05);
  border: 2px solid var(--color-neutral-400);
  box-shadow: var(--schaduw-1);
}

.scorebig { text-align: left; border-left: 3px solid var(--color-accent); padding-left: 12px; }
.scorebig .val { font-family: var(--font-kop); font-size: 32px; font-weight: 700; line-height: 1; color: var(--color-accent); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.scorebig .lbl { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: var(--track-kicker); color: var(--color-neutral-600); margin-top: 5px; }

.scale { height: 10px; background: var(--color-neutral-200); position: relative; }
.scale-fill { height: 100%; background: var(--color-accent); }
.scale-ticks {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / 7 - 1px), var(--color-bg) calc(100% / 7 - 1px), var(--color-bg) calc(100% / 7));
}

/* ── Smal scherm (iPhone) ──────────────────────────────────────────────── */

@media (max-width: 720px) {
  :root { --t-display: 30px; --space-7: 20px; }
  .page {
    padding: var(--space-5) calc(var(--space-4) + env(safe-area-inset-right, 0px))
             var(--space-5) calc(var(--space-4) + env(safe-area-inset-left, 0px));
    gap: var(--space-4);
  }
  /* Ook hier de klok en het eilandje vrijhouden: deze regel overschreef anders
     de veilige zone uit styles.css. */
  .topnav {
    padding: calc(10px + env(safe-area-inset-top, 0px))
             calc(var(--space-4) + env(safe-area-inset-right, 0px))
             10px
             calc(var(--space-4) + env(safe-area-inset-left, 0px));
    min-height: 0; gap: var(--space-2);
  }
  .topnav a { display: none; }
  /* Eén rij: merk links, status als stip, instellingen als icoon. */
  .topnav .nav-brand { border-right: 0; padding-right: 0; font-size: 12px; }
  .topnav .nav-right { gap: var(--space-3); }
  .savedot span:not(.dot) { display: none; }
  .savedot .dot { width: 9px; height: 9px; }
  .navbtn .lbl { display: none; }
  .navbtn { padding: 6px 10px; font-size: 14px; line-height: 1; }
  .tabbar { display: grid; }
  /* ── Op de gsm telt elke pixel hoogte ──────────────────────────────────
     De kop nam 120 tot 190 px in beslag vóór je aan de inhoud kwam. Het
     hoofdstuknummer en de titel blijven; de uitleg eronder verdwijnt, want
     die lees je één keer en daarna staat ze in de weg. */
  .pagehead { align-items: flex-start; padding-bottom: var(--space-3); gap: var(--space-3); }
  .pagehead h1 { font-size: 30px; letter-spacing: -0.02em; }
  .pagehead p { display: none; }
  .pagehead .ph-kicker { margin-bottom: 4px; }

  /* Vier cijfers naast elkaar in plaats van vier rijen onder elkaar. Enkel
     voor de cijferkaarten: een formulier blijft één kolom, anders wordt elk
     veld te smal om in te tikken. */
  .statgrid { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .statcard { padding: var(--space-3) var(--space-4); }
  .statcard .statval { font-size: 30px; }
  .statcard .card-kicker { font-size: 9.5px; }

  /* Een venster komt van onderaan omhoog en plakt aan de onderrand: zo staan
     de knoppen binnen duimbereik in plaats van halverwege het scherm. */
  .dialog-backdrop { align-items: flex-end; padding: 0; }
  .dialog {
    max-width: none; max-height: 90svh;
    border-left: 0; border-right: 0; border-bottom: 0;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding: 22px var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    animation: blad-omhoog .26s var(--veer);
  }
  /* De handgreep: het teken dat dit blad van onderaf komt en weg kan. */
  .dialog::before {
    content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 4px; border-radius: var(--r-vol);
    background: var(--color-neutral-300);
  }
  .dialog { position: relative; }
  @keyframes blad-omhoog { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .dialog { animation: none; } }
  /* De knoppen blijven onderaan het blad staan, ook als de inhoud scrolt. */
  .dialog-actions {
    position: sticky; bottom: 0;
    background: var(--color-bg);
    margin: 0 calc(-1 * var(--space-4)) calc(-1 * var(--space-4));
    padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  }
  .dialog-actions .btn { flex: 1 1 44%; justify-content: center; }

  /* De naam wint van de meters: op een smal scherm worden de banen korter en
     de trend compacter, zodat "Ibe Claes" nooit "Ibe …" wordt. */
  .mini-meter .mm-baan { width: 42px; }
  .mini-meter .mm-cijfer { width: 24px; font-size: 11.5px; }
  .trend { min-width: 34px; font-size: 10px; }

  /* Een tabel in een eigen scrollvak binnen een scrollende pagina is op een
     gsm lastig: je duim raakt het verkeerde vlak. Alleen zijwaarts scrollen
     blijft, de hoogte volgt gewoon de pagina. */
  .tablewrap { max-height: none; overflow-y: visible; }

  /* Lange lijsten: de browser slaat het tekenwerk over van rijen die buiten
     beeld vallen. De opgegeven hoogte is die van een rij, zodat de schuifbalk
     niet springt terwijl je scrolt. */
  .listrow { content-visibility: auto; contain-intrinsic-size: auto 74px; }

  /* Raakvlakken van minstens 44 px: dat is de maat van een vingertop. */
  .btn { min-height: 44px; }
  .seg-opt { min-height: 44px; }

  /* De schakelaar krijgt een eigen regel; de tekst ernaast werd anders een
     smalle kolom van vier woorden breed. */
  .pagehead .ph-acties { width: 100%; }
  .pagehead .ph-acties .veldswitch { width: 100%; }
  .worksplit { flex-direction: column; }
  .sessioncol { flex-direction: row; flex-wrap: wrap; width: 100%; min-width: 0; }
  .workmain { min-width: 0; width: 100%; }
  .grid, .grid-tight { grid-template-columns: 1fr; }
  .statgrid { grid-template-columns: 1fr 1fr; }
  .card { padding: var(--space-4); }
  .statcard .statval { font-size: 34px; }
  .toast { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
  .seg { flex-wrap: wrap; }
  .dialog { max-height: 88vh; padding: var(--space-5); }
  .tablewrap { max-height: none; }
  /* Zoeklijst schuift mee in de pagina in plaats van erover. */
  .drop { position: static; max-height: 220px; margin-top: 6px; border-top: 2px solid var(--color-text); }
}

/* ── Print ─────────────────────────────────────────────────────────────── */

#print-area { display: none; }
@media print {
  .topnav, .tabbar, .offlinebar, .planbalk, .toast, .no-print { display: none !important; }
  body { background: #fff; }
  body.printing #app, body.printing .dialog-backdrop { display: none !important; }
  body.printing #print-area { display: block; }
}

/* ── Menu achter "Meer" ─────────────────────────────────────────────────── */
/* Voluit geschreven, met één regel uitleg: je moet niet raden wat er achter
   een woord zit. */

.menulijst { display: flex; flex-direction: column; gap: 2px; margin: var(--space-3) 0; }
.menu-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-height: 56px; padding: var(--space-3);
  border-radius: var(--r-md);
  background: var(--color-bg); border: 0; border-left: 4px solid transparent;
  font-family: inherit; text-align: left; cursor: pointer; color: var(--color-text);
}
.menu-item:hover { background: var(--color-neutral-200); }
.menu-item.active { border-left-color: var(--color-accent); background: var(--color-neutral-200); }
.menu-kop { display: inline-flex; align-items: center; gap: 9px; color: var(--color-text); }
.menu-titel { font-size: 15px; font-weight: 800; }
.menu-uitleg { font-size: 12px; color: var(--color-neutral-600); }

.leeg-actie { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }

/* ── Merkregel onderaan ────────────────────────────────────────────────────
   De club bezit het dossier; SPOTR levert het platform. Die tweede naam staat
   er rustig onder, in dezelfde taal als de rest van het raster. */

.appvoet {
  max-width: 1200px; margin: 0 auto;
  width: 100%; box-sizing: border-box;
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-4) var(--space-6) var(--space-6);
  border-top: var(--hairline);
  font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-neutral-600);
}
.appvoet-merk { display: inline-flex; align-items: center; gap: 8px; }
.appvoet-woord { color: var(--color-text); font-size: 14px; }
.over-woordmerk { font-size: 26px; }
.appvoet-rechts { margin-left: auto; }

@media (max-width: 720px) {
  .appvoet {
    padding: var(--space-4) var(--space-4) calc(96px + env(safe-area-inset-bottom, 0px));
    font-size: 9.5px; gap: var(--space-2);
  }
  .appvoet-rechts { margin-left: 0; }
}

/* ── Beweging ──────────────────────────────────────────────────────────────
   Levendig, nooit traag: een korte intro bij een schermwissel, meters die
   vollopen, de evolutielijn die zich tekent. Wie beweging uitzet, ziet alles
   meteen stilstaan. */

.page-in > * { animation: blok-in .32s var(--veer) both; }
.page-in > *:nth-child(2) { animation-delay: .04s; }
.page-in > *:nth-child(3) { animation-delay: .08s; }
.page-in > *:nth-child(4) { animation-delay: .12s; }
.page-in > *:nth-child(5) { animation-delay: .16s; }
.page-in > *:nth-child(n+6) { animation-delay: .2s; }
@keyframes blok-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.mini-meter .mm-vul { transform-origin: left; animation: mm-vul .55s ease-out both; }
@keyframes mm-vul { from { transform: scaleX(0); } }

.evo-lijn { stroke-dasharray: 1; stroke-dashoffset: 1; animation: evo-teken 1s ease-out .15s both; }
@keyframes evo-teken { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .page-in > *, .mini-meter .mm-vul, .evo-lijn { animation: none; }
  .evo-lijn { stroke-dasharray: none; }
}

/* ── merk: kleine opschriften in mono, zoals op de landingspagina ─────── */
.pagehead .ph-kicker, .sectie, .cattitle, .cat-head .cat-name, .cat-head .cat-count,
.pitchslot .slotlabel, .scorebig .lbl, h6 {
  font-family: var(--font-mono); font-weight: 500; letter-spacing: .14em;
}

/* ── afwerking: cijfers lijnen uit, opschriften in mono, veldmodus-titel rustig ── */
.mini-meter .mm-cijfer, .listrow .score, .tel { font-variant-numeric: tabular-nums; }
.veldswitch-titel { text-transform: none; font-family: var(--font-kop); font-weight: 700; letter-spacing: -0.01em; font-size: 14px; }
.scorebar .scorelabel, .savedot, .stepper-hint, .sessionchip .pos { font-family: var(--font-mono); font-weight: 500; letter-spacing: .1em; }

/* ── clubkleur: labels en cijfers in de leesbare accenttrap (lichte accenten
   zoals geel worden als tekst een stap donkerder) ── */
.pagehead .ph-kicker, .card-kicker, .sectie, .cattitle, .cat-head .cat-name { color: var(--color-accent-tekst, var(--color-accent)); }
/* cijfers blijven altijd inkt: bij elke clubkleur even duidelijk */
.scorebig .val, .statcard .statval, .mini-meter .mm-cijfer, .m-cijfer b, .listrow .score { color: var(--color-text); }
.trend.op { color: var(--color-accent-tekst, var(--color-accent)); }

/* ── clubembleem (schild in clubkleuren) en het eigen clublogo in de kicker ── */
.crest-embleem { background: none !important; box-shadow: none; padding: 0; }
.crest-embleem svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 1px 1px rgba(0,0,0,.18)); }
.pagehead .ph-clublogo { display: inline-block; width: 18px; height: 18px; background: center/contain no-repeat; vertical-align: middle; }