/* ════════════════════════════════════════════════════════════════════════
   Afwerkingslaag (1.1.33–1.1.34) — het app-ontwerp in de taal van de SPOTR-site.
   Ligt over styles.css en app.css heen; alle schermen en functies blijven
   hetzelfde, alleen het uiterlijk verandert. Naar 21st.dev: dashboard-sidebar
   (arunjdass) voor de zijbalk op laptop, tubelight-navbar (ayushmxxn) voor de
   glijdende markering, bottom-nav-bar (arunachalam) voor de zwevende tabbalk
   op de gsm, stats-card (kavikatiyar) voor de kerncijfers, en de glazen
   kaarten en pillen van de landingspagina.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  --r-sm: 11px; --r-md: 16px; --r-lg: 20px;
  --schaduw-1: 0 1px 2px rgba(6,24,15,.05), 0 10px 30px -22px rgba(6,24,15,.28);
  --schaduw-2: 0 2px 4px rgba(6,24,15,.06), 0 22px 44px -22px rgba(6,24,15,.35);
  --kalk: #D8F45A;
  --zij: 252px;
}

/* ── Grond en tekst ────────────────────────────────────────────────────── */
html, body { background: var(--color-bg); }
body:not(.donker) { background: radial-gradient(90% 40% at 50% 0%, rgba(27,169,76,.06), transparent 70%) fixed, var(--color-bg); }
img { filter: none; }

/* ── Bovenbalk (laptop tussen 721 en 1023 px, en de gsm) ───────────────── */
.nav { border-bottom: 1px solid rgba(255,255,255,.08); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset; }
.nav a[aria-current="page"]::after { height: 3px; border-radius: 3px 3px 0 0; background: var(--chroom-accent, var(--kalk)); }
.navbtn { border-radius: var(--r-vol); border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.04); }
.navbtn:hover { background: rgba(255,255,255,.12); color: inherit; border-color: rgba(255,255,255,.3); }
.navbtn[aria-current="page"] { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.2); color: inherit; }
.savedot { padding: 6px 10px; border-radius: var(--r-vol); background: rgba(255,255,255,.05); }
.nav-icoon { width: 18px; height: 18px; flex: none; opacity: .9; }
@media (min-width: 721px) and (max-width: 959px) {
  /* 1.1.92: past de rij tabs niet (Kalender kwam erbij; met Beheer en in het Frans al eerder), dan schuift ze binnen de
     balk onder de knoppen rechts door. Meldingen, Zoeken, Instellingen en Afmelden blijven in beeld en de pagina schuift
     niet zijwaarts. Past alles, dan verandert er niets. */
  .topnav { flex-wrap: nowrap; gap: 0 14px; padding-right: 14px; overflow-x: auto; scrollbar-width: none; }
  .topnav::-webkit-scrollbar { display: none; }
  .nav a { display: inline-flex; align-items: center; font-size: 13px; white-space: nowrap; padding: 18px 0; }
  .topnav .nav-right { gap: 6px; flex: none; position: sticky; right: 0; align-self: stretch; padding-left: 10px; background: var(--color-topbar, var(--color-neutral-900)); }
  .topnav .nav-brand { padding-right: 10px; margin-right: 0; }
  .nav a .nav-icoon { display: none; }
  .navbtn .lbl { display: none; }
  .navbtn { padding: 6px 10px; }
  .savedot span:not(.dot) { display: none; }
}
@media (min-width: 721px) and (max-width: 840px) {
  .topnav { gap: 0 9px; }
  .nav a { font-size: 12.5px; }
  .navbtn { min-height: 34px; padding: 5px 8px; }
  .topnav .savedot { display: none; }
  .topnav .nav-woordmerk { font-size: 18px; }
}

/* ── Zijbalk op een breed scherm (naar dashboard-sidebar) ──────────────── */
.zij-club { display: none; }
@media (min-width: 960px) {
  .zij-club { display: flex; align-items: center; gap: 10px; padding: 8px 10px 14px; margin-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.08); }
  .zij-club-logo, .zij-club-mono { width: 34px; height: 34px; flex: none; border-radius: 10px; background: #fff center/contain no-repeat; box-shadow: 0 0 0 3px rgba(255,255,255,.06); }
  .zij-club-mono { display: grid; place-items: center; background: var(--chroom-accent, var(--kalk)); color: #0B2C1E; font-family: var(--font-kop); font-weight: 700; font-size: 13px; letter-spacing: -.02em; }
  .zij-club-tekst { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
  .zij-club-tekst b { font-family: var(--font-kop); font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .zij-club-tekst i { font-style: normal; font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; opacity: .55; }
  body { padding-left: var(--zij); }
  .topnav {
    position: fixed; top: 0; left: 0; bottom: 0; width: var(--zij); z-index: 900;
    display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 3px;
    min-height: 0; padding: calc(18px + env(safe-area-inset-top, 0px)) 12px 16px;
    border-bottom: 0; border-right: 1px solid rgba(255,255,255,.08);
    overflow-y: auto; scrollbar-width: none;
  }
  .topnav::-webkit-scrollbar { display: none; }
  .topnav::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.6px); background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 90% 40% at 50% 0%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse 90% 40% at 50% 0%, #000 10%, transparent 70%); }
  .topnav > * { position: relative; z-index: 1; }
  .topnav .nav-brand { border-right: 0; padding: 4px 10px 14px; margin: 0; }
  .topnav .nav-woordmerk { font-size: 22px; }
  .topnav a {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 12px; border-radius: 12px; font-size: 14px; opacity: .74;
    transition: background .15s, opacity .15s, transform .15s;
  }
  .topnav a:hover { background: rgba(255,255,255,.07); opacity: 1; }
  .topnav a[aria-current="page"] { background: rgba(255,255,255,.1); opacity: 1; font-weight: 700; }
  /* de tubelight: een kalkstreep links met een zachte gloed */
  .topnav a[aria-current="page"]::after {
    left: -12px; right: auto; top: 9px; bottom: 9px; width: 3px; height: auto; border-radius: 0 3px 3px 0;
    box-shadow: 0 0 14px 2px rgba(216,244,90,.45);
  }
  .topnav .nav-right {
    margin: auto 0 0; flex-direction: column; align-items: stretch; gap: 6px;
    padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08);
  }
  .topnav .navbtn { justify-content: flex-start; min-height: 40px; padding: 8px 12px; border-radius: 12px; font-size: 13.5px; }
  .topnav .savedot { padding: 8px 12px 10px; background: transparent; }
  .page, .appvoet { max-width: 1160px; }
  .toast { left: calc(50% + var(--zij) / 2); }
  .ptr { left: calc(50% + var(--zij) / 2); }
}

/* ── Paginakop: pil-kicker, kleinere titel, dunne accentlijn met de aftrapstip ── */
.pagehead { border-bottom: 1px solid var(--color-neutral-300); padding-bottom: var(--space-4); }
.pagehead::after { bottom: -8px; width: 13px; height: 13px; border-width: 2.5px; background: radial-gradient(circle, var(--color-accent) 0 2.5px, var(--color-bg) 2.6px); }
.pagehead .ph-kicker {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 11px 4px 5px; margin-bottom: 12px;
  border-radius: var(--r-vol); border: 1px solid var(--color-neutral-300); background: var(--color-surface);
  font-size: 10px; letter-spacing: .14em;
}
.pagehead .ph-index { min-width: 24px; height: 20px; padding: 0 6px; border-radius: var(--r-vol); font-size: 10px; }
.pagehead h1 { font-size: 40px; letter-spacing: -0.035em; }
.pagehead p { margin-top: 8px; }
.sectie { border-bottom: 1px solid var(--color-neutral-300); }

/* ── Knoppen: ronder, met de glans van de site op de hoofdknop ─────────── */
.btn { border-radius: var(--r-sm); position: relative; overflow: hidden; }
.btn-primary::after {
  content: ''; position: absolute; top: -40%; bottom: -40%; left: -30%; width: 40%; pointer-events: none;
  transform: skewX(-20deg) translateX(-160%);
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.4), rgba(255,255,255,0));
}
.btn-primary:hover::after { animation: knop-glans .8s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes knop-glans { to { transform: skewX(-20deg) translateX(520%); } }
.btn-secondary { border-color: var(--color-neutral-300); }
.btn-secondary:hover { background: var(--color-neutral-100); border-color: var(--color-neutral-600); color: var(--color-text); }
.btn-ghost:hover { box-shadow: none; background: var(--color-neutral-200); border-radius: var(--r-sm); }
.btn-klein, .btn-sm { border-radius: var(--r-vol); }

/* ── Vlakken: kaarten met een fijne rand en zachte diepte ──────────────── */
.card { border-color: var(--color-neutral-200); border-radius: var(--r-lg); }
.card--lead { border-top: 1px solid var(--color-neutral-200); position: relative; }
.card--lead::before, .statcard::before {
  content: ''; position: absolute; left: 20px; top: -1px; width: 44px; height: 3px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--color-accent), var(--kalk));
}
.card--inset { border-radius: var(--r-md); border-color: var(--color-neutral-200); }
.card-kicker { font-size: 10px; }
.listrow { border-color: var(--color-neutral-200); border-radius: var(--r-md); }
.listrow:hover { border-color: var(--color-neutral-300); }
.leeg { border: 1px dashed var(--color-neutral-300); border-radius: var(--r-lg); background: var(--color-surface); }
.suggestbar, .dialog-warn { border-width: 1px; border-left-width: 4px; border-radius: var(--r-md); }
.veldhint { border-radius: var(--r-md); border: 1px solid var(--color-neutral-200); border-left-width: 4px; }

/* kerncijfers (naar stats-card): rustige kaart, groot cijfer, accentstreep bovenaan */
.statcard { position: relative; border-top: 1px solid var(--color-neutral-200); }
.statcard .statval { font-size: 38px; }
.statcard .card-kicker { color: var(--color-neutral-600); }

/* ── Tags en chips als pillen ──────────────────────────────────────────── */
.tag { border-radius: var(--r-vol); border-width: 1px; padding: 3px 10px; }
.tag:not(.tag-accent):not(.tag-neutral):not(.tag-outline) { border-color: var(--color-neutral-300); background: var(--color-surface); }
.chip { border-radius: var(--r-vol); border-width: 1.5px; border-color: var(--color-neutral-300); background: var(--color-surface); }
.chip.on { box-shadow: none; }
.st-linie { border-radius: var(--r-vol); }
.sessionchip { border-radius: var(--r-md); }
.sessionchip.active { box-shadow: 0 0 0 3px var(--color-accent-100); border-color: var(--color-accent); }

/* ── Formulieren ───────────────────────────────────────────────────────── */
.input { border-radius: var(--r-sm); background: var(--color-surface); border-color: var(--color-neutral-300); }
.input:hover { border-color: var(--color-neutral-400); }
.input:focus { box-shadow: 0 0 0 3px var(--color-accent-100); }
input.input:read-only, textarea.input:read-only { background: var(--color-neutral-100); }
.combo-row .input { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.combo-toggle { border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--color-neutral-100); color: var(--color-neutral-700); border: 1.5px solid var(--color-neutral-300); border-left: 0; }
.combo-toggle:hover { background: var(--color-neutral-200); color: var(--color-text); border-color: var(--color-neutral-300); }
.combo-row .input:focus + .combo-toggle, .combo-row:focus-within .combo-toggle { border-color: var(--color-accent); }
/* notitieblad: lichtere scheidingen tussen categorieën, rustiger scorebalk */
.catblock { border-top: 1px solid var(--color-neutral-300); }
.cat-head .cat-caret { color: var(--color-neutral-500); }
.scorebar { background: var(--color-neutral-100); border-color: var(--color-neutral-200); }
.itemrow { border-bottom-color: var(--color-neutral-200); }
.stepper-value { color: var(--color-text); }
.stepper-hint { font-size: 10px; }
.drop { border: 1px solid var(--color-neutral-300); border-radius: 0 0 var(--r-sm) var(--r-sm); box-shadow: var(--schaduw-2); background: var(--color-surface); }
.drop-item { border-bottom-color: var(--color-neutral-200); }
.drop-item:hover { background: var(--color-neutral-100); color: var(--color-text); }
.seg { border-radius: var(--r-vol); padding: 3px; background: var(--color-neutral-100); border-color: var(--color-neutral-300); gap: 2px; }
.seg-opt span { border-right: 0; border-radius: var(--r-vol); min-height: 36px; padding: 6px 14px; }
.seg-opt input:checked + span { background: var(--color-topbar, var(--color-text)); color: #F4F5F2; box-shadow: 0 4px 12px -8px rgba(0,0,0,.6); }
.radio .dot { border-radius: 50%; border-width: 1.5px; border-color: var(--color-neutral-400); }
.stepper { border-radius: var(--r-vol); }
.stepper-minus, .stepper-plus { border-color: transparent !important; }
.stepper-plus { border-radius: 0 var(--r-vol) var(--r-vol) 0; }
.stepper-minus { border-radius: var(--r-vol) 0 0 var(--r-vol); }
.scorebar { border-radius: var(--r-md); border-left-width: 4px; border-left-color: var(--color-accent); }
.veldswitch { border: 1px solid var(--color-neutral-300); border-radius: var(--r-vol); }
.veldswitch-spoor { border-radius: var(--r-vol); border: 0; background: var(--color-neutral-300); }
.veldswitch-knop { border-radius: 50%; top: 3px; left: 3px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.veldswitch.aan .veldswitch-knop { transform: translateX(24px); }
.colorpick { border-radius: var(--r-sm); border-color: var(--color-neutral-300); }

/* ── Tabellen ──────────────────────────────────────────────────────────── */
.table th { border-bottom: 1px solid var(--color-neutral-300); font-size: 10px; }
.table tbody tr:nth-child(even) td { background: transparent; }
.table tbody tr:hover { background: var(--color-neutral-100); }
.tablewrap { border: 1px solid var(--color-neutral-200); border-radius: var(--r-md); background: var(--color-surface); }
.tablewrap .table td:first-child, .tablewrap .table th:first-child { padding-left: 14px; }

/* ── Dialogen: glas erachter, dunne accentlijn erin ────────────────────── */
.dialog-backdrop { background: rgba(6,24,15,.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: backdrop-in .18s ease both; }
@keyframes backdrop-in { from { opacity: 0; } }
.dialog { border-top: 1px solid var(--color-neutral-200); border-radius: 22px; position: relative; animation: dialoog-in .24s cubic-bezier(.2,.7,.2,1) both; }
.dialog::before { content: ''; position: absolute; left: 24px; top: -1px; width: 44px; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--color-accent), var(--kalk)); }
@keyframes dialoog-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.dialog-actions { border-top-color: var(--color-neutral-200); }
.menu-item { border-radius: var(--r-md); border-left-width: 0; padding-left: 14px; }
.menu-item.active { background: var(--color-accent-100); }

/* ── De zoeker als opdrachtpalet (naar het zoekvenster van dashboard-sidebar) ── */
.dialog.zoeker { padding: 0; gap: 0; max-width: 620px; overflow: hidden; }
.dialog.zoeker::before { display: none; }
.zoek-veld { display: flex; align-items: center; gap: 12px; padding: 6px 16px 6px 18px; border-bottom: 1px solid var(--color-neutral-200); color: var(--color-neutral-600); }
.zoek-veld svg { flex: none; }
.zoek-veld .input { border: 0; background: transparent; box-shadow: none; padding: 14px 0; font-size: 17px; min-height: 54px; }
.zoek-veld .input:focus { box-shadow: none; background: transparent; }
.zoeker kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--color-neutral-300); background: var(--color-neutral-100); font-family: var(--font-mono); font-size: 10.5px; color: var(--color-neutral-600); }
.zoeker > div:nth-child(2) { padding: 10px 10px 8px; max-height: 52vh; overflow-y: auto; }
.zoeker .card-kicker { padding: 6px 8px 2px; }
.zoeker .menu-item { min-height: 50px; background: transparent; padding: 8px 12px; }
.zoeker .menu-item:hover, .zoeker .menu-item.aan { background: var(--color-neutral-100); box-shadow: inset 3px 0 0 var(--kalk); }
.zoek-voet { display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--color-neutral-200); background: var(--color-neutral-100); font-size: 12px; color: var(--color-neutral-600); }
.zoek-voet span { display: inline-flex; align-items: center; gap: 6px; }
.zoek-voet .zoek-sluit { margin-left: auto; }
@media (min-width: 721px) {
  .dialog-backdrop:has(.zoeker) { align-items: flex-start; padding-top: 12vh; }
  .topnav .navbtn-zoek::after { content: 'Ctrl K'; margin-left: auto; font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; padding: 2px 6px; border-radius: 6px; border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.5); }
  body.mac .topnav .navbtn-zoek::after { content: '⌘K'; }
}
@media (max-width: 720px) {
  .zoek-voet span { display: none; }
  .zoeker > div:nth-child(2) { max-height: 46svh; }
}

/* ── Knoppenrij in een kaart (wedstrijden, tornooien): compacte pillen, de hoofdknop blijft ── */
.card > .row > .btn:not(.btn-primary):not(.veldswitch) { min-height: 38px; padding: 7px 14px; border-radius: var(--r-vol); font-size: 12.5px; }
.card > .row > .btn-primary { border-radius: var(--r-vol); min-height: 40px; padding: 8px 18px; }

/* ── Meldingen ─────────────────────────────────────────────────────────── */
.toast { border-radius: var(--r-vol); border-left: 0; padding: 12px 18px 12px 14px; display: flex; align-items: center; gap: 10px; box-shadow: 0 16px 40px -14px rgba(0,0,0,.5); }
.toast::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--kalk); flex: none; }
.planbalk { border-bottom-width: 1px; }

/* ── Evolutielijn: vlak vult op na het tekenen; categoriebalken rond ────── */
.evo-vlak { transform-origin: bottom; }
@keyframes evo-vlak { from { opacity: 0; transform: scaleY(0); } }
/* Net als de lijn zelf (app.css): alleen bij een nieuw scherm, niet bij elke hertekening (1.1.77). */
@media (prefers-reduced-motion: no-preference) {
  .page-in .evo-vlak, .page-schuif-in .evo-vlak, .page-schuif-terug .evo-vlak, .evo-vers .evo-vlak { animation: evo-vlak 1s ease-out .6s both; }
}
.scale { border-radius: 5px; overflow: hidden; height: 9px; }

/* ── Shadow Teams ──────────────────────────────────────────────────────── */
.st-kaart { border-color: var(--color-neutral-200); }
.minipitch { border-radius: 8px; }
.st-veldwrap .veld { border-radius: var(--r-lg); box-shadow: 0 30px 60px -30px rgba(6,24,15,.5); }
/* veiligheidsnet: <body class="veld"> (veldmodus) is nooit een veldtekening */
body.veld { position: static; width: auto; max-width: none; aspect-ratio: auto; margin: 0; overflow: visible; border: 0; box-shadow: none; border-radius: 0; }
.bank-chip, .st-regel { border-radius: var(--r-sm); }

/* ── Merkregel ─────────────────────────────────────────────────────────── */
.appvoet { border-top-color: var(--color-neutral-200); }

/* ── Tabbalk op de gsm: een zwevende pil (naar bottom-nav-bar) ─────────── */
@media (max-width: 720px) {
  .tabbar {
    left: 10px; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    padding: 6px; border-radius: 24px; border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 14px 34px -12px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.08);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    background: color-mix(in srgb, var(--color-topbar, #0B2C1E) 88%, transparent);
  }
  /* 1.1.104: uitklappende tab. Alleen de actieve knop klapt open tot een pil in de accentkleur met icoon én naam; de
     andere tonen enkel hun icoon. De pil schuift mee met een zachte overgang (flex), het label verschijnt erin. */
  .tabbar { display: flex; gap: 4px; }
  .tabbar button { flex: 1 1 0; min-width: 0; min-height: 50px; padding: 6px 4px; border-radius: 19px; opacity: .72;
    flex-direction: row; gap: 7px; transition: flex .28s var(--veer), opacity .15s, background .2s, color .2s; }
  .tabbar button::before { display: none; }
  .tabbar button .tab-lbl { display: none; font-size: 12.5px; font-weight: 700; letter-spacing: .01em; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tabbar button.active { flex: 2.4 1 0; background: var(--chroom-accent, #D8F45A); color: var(--chroom-accent-tekst, #141A1A); opacity: 1; }
  .tabbar button.active .tab-lbl { display: inline; animation: tab-lbl-in .22s var(--veer) both; }
  .tabbar button.active svg { transform: none; }
  .tabbar .tab-tel { top: 2px; left: calc(50% + 6px); }
  @keyframes tab-lbl-in { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .tabbar button { transition: none; } .tabbar button.active .tab-lbl { animation: none; } }
  .toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .appvoet { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
  .topnav { border-bottom: 1px solid rgba(255,255,255,.08); }
  .pagehead h1 { font-size: 30px; }
  .pagehead .ph-kicker { margin-bottom: 8px; }
  .dialog { border-radius: 22px 22px 0 0; }
  .dialog::before { display: none; }
  .navbtn { border-radius: 12px; }
  /* de naam wint van de meters: liever twee regels dan drie puntjes */
  .listrow span[style*="nowrap"] { white-space: normal !important; overflow-wrap: anywhere; }
}

/* ── Donker thema: dezelfde vormen, geen lichte randen ─────────────────── */
body.donker { background: var(--color-bg); }
body.donker .pagehead .ph-kicker { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
body.donker .card, body.donker .listrow, body.donker .tablewrap { border-color: rgba(255,255,255,.1); }
body.donker .dialog-backdrop { background: rgba(0,0,0,.6); }

@media (prefers-reduced-motion: reduce) {
  .btn-primary:hover::after { animation: none; }
  .dialog, .dialog-backdrop { animation: none; }
}

/* ── 1.1.38: scores als tikbalk, spelerskiezer als blad ────────────────── */
.scoreseg { display: flex; gap: 3px; padding: 3px; border-radius: 14px; background: var(--color-neutral-100); border: 1px solid var(--color-neutral-200); touch-action: none; user-select: none; -webkit-user-select: none; flex: 1; min-width: 0; }
.scoreseg-vak { flex: 1; min-width: 0; min-height: 40px; border: 0; border-radius: 10px; background: transparent; font-family: var(--font-mono); font-weight: 600; font-size: 13px; color: var(--color-neutral-600); cursor: pointer; padding: 0; transition: background .12s, color .12s, transform .12s; }
.scoreseg-vak.onder { background: var(--color-accent-100); color: var(--color-accent-800, #0F7A38); }
.scoreseg-vak.aan { background: var(--color-topbar, #0B2C1E); color: #D8F45A; transform: scale(1.06); box-shadow: 0 6px 14px -8px rgba(0,0,0,.6); }
.scoreseg.groot .scoreseg-vak { min-height: 54px; font-size: 16px; }
.scorebar .scoreseg { margin-top: 6px; }
.itemrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.itemrow .itemlabel { flex: 1 1 140px; }
.itemrow .scoreseg { flex: 1 1 100%; }
@media (min-width: 721px) { .itemrow .scoreseg { flex: 1 1 320px; } }
body.donker .scoreseg { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }
body.donker .scoreseg-vak.onder { background: rgba(27,169,76,.22); color: #5FD487; }

.dialog.kiezer { display: flex; flex-direction: column; gap: 14px; }
.kz-groep { display: flex; flex-direction: column; gap: 8px; }
.kz-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kz-chip { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; border: 1px solid var(--color-neutral-200); background: var(--color-surface, #fff); font: inherit; cursor: pointer; text-align: left; max-width: 100%; transition: transform .12s, box-shadow .12s, border-color .12s; }
.kz-chip:hover, .kz-chip:focus-visible { border-color: var(--color-accent); box-shadow: 0 8px 20px -14px rgba(0,0,0,.5); transform: translateY(-1px); }
.kz-ini { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 12px; flex: none; }
.kz-tekst { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.kz-tekst b { font-size: 14px; color: var(--color-text); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kz-tekst small { font-size: 11.5px; color: var(--color-neutral-600); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kz-rij { display: flex; gap: 8px; align-items: center; }
.kz-nieuw { padding-top: 12px; border-top: 1px solid var(--color-neutral-200); }
@media (max-width: 720px) { .dialog.sheet { max-height: 92svh; overflow-y: auto; } .kz-chip { flex: 1 1 calc(50% - 4px); } }
/* de categoriescore: label en hint links, de tikbalk krijgt de rest van de rij (op de gsm een eigen rij) */
.scorebar { flex-wrap: wrap; }
.scorebar .scoreseg { flex: 1 1 320px; margin-top: 0; }
@media (max-width: 720px) { .scorebar .scoreseg { flex-basis: 100%; margin-top: 8px; } }
/* ── 1.1.39: datatabellen, profiel met tabbladen, vergelijkscherm ───────── */
.dt { display: flex; flex-direction: column; gap: 8px; }
.dt-balk { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-neutral-600); }
.dt-ruimte { flex: 1; }
.datatabel { max-height: 72vh; }
.datatabel .table thead th { position: sticky; top: 0; z-index: 2; background: var(--color-surface, #fff); }
.datatabel .table th.sorteerbaar { cursor: pointer; user-select: none; white-space: nowrap; }
.datatabel .table th.sorteerbaar:hover { color: var(--color-text); }
.datatabel .table th.gesorteerd { color: var(--color-accent-800, var(--color-accent)); }
.datatabel .dt-pijl { font-style: normal; margin-left: 4px; }
.datatabel .table th.num, .datatabel .table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.datatabel .table tr.klik { cursor: pointer; }
.datatabel .dt-naam { display: inline-flex; align-items: center; gap: 6px; }
.datatabel .dt-ster { color: var(--color-accent); }
.dt-kolommen { position: relative; }
.dt-kolommen summary { list-style: none; display: inline-flex; }
.dt-kolommen summary::-webkit-details-marker { display: none; }
.dt-kolommen-lijst { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 190px; padding: 10px 12px; border-radius: 12px; background: var(--color-surface, #fff); border: 1px solid var(--color-neutral-200); box-shadow: 0 16px 34px -18px rgba(0,0,0,.4); display: flex; flex-direction: column; gap: 6px; }
.dt-kolommen-lijst label { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.dt-kolommen-lijst input { accent-color: var(--color-accent); }
body.donker .datatabel .table thead th, body.donker .dt-kolommen-lijst { background: var(--color-surface); }
.seg-klein .seg-opt span { min-height: 30px; padding: 4px 12px; font-size: 12.5px; }

.proftabs { margin: 4px 0 8px; }
.proftabs .seg { width: 100%; max-width: 560px; }
.proftabs .seg-opt { flex: 1; } .proftabs .seg-opt span { width: 100%; justify-content: center; }
.kenmerken-net { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 18px; }

.vg-koppen { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
.vg-kop { gap: var(--space-3); }
.vg-cijfers { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.vg-cijfers .scorebig.top .val { color: var(--color-accent-800, #0F7A38); }
.vg-cijfers .scorebig.top { border-left-color: var(--color-accent-800, #0F7A38); }
.vg-balken { gap: 10px; }
.vg-rij { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: start; padding: 8px 0; border-top: 1px solid var(--color-neutral-200); }
.vg-cat { font-weight: 700; font-size: 13.5px; padding-top: 4px; }
.vg-lijnen { display: flex; flex-direction: column; gap: 5px; }
.vg-lijn { display: grid; grid-template-columns: 34px 1fr 40px; gap: 8px; align-items: center; }
.vg-wie { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; color: var(--color-neutral-600); }
.vg-balk { height: 9px; border-radius: 999px; background: var(--color-neutral-100); overflow: hidden; }
.vg-balk i { display: block; height: 100%; border-radius: 999px; background: var(--color-neutral-400); transition: width .4s; }
.vg-lijn.top .vg-balk i { background: linear-gradient(90deg, var(--color-accent), #D8F45A); }
.vg-lijn b { font-variant-numeric: tabular-nums; text-align: right; font-size: 13px; }
.vg-lijn.top b { color: var(--color-accent-800, #0F7A38); }
@media (max-width: 720px) { .vg-koppen { grid-template-columns: 1fr !important; } .vg-rij { grid-template-columns: 1fr; gap: 6px; } }
.proftabs .seg-opt span { white-space: nowrap; }

/* ── 1.1.40: toetsenblok in veldmodus, offline-pil, slepen op het shadow-veld ── */
.kz-nr-groot { font-family: var(--font-kop); font-size: 28px; font-weight: 700; text-align: center; letter-spacing: .04em; min-height: 56px; }
.kz-toetsen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kz-toets { min-height: 56px; border-radius: 14px; border: 1px solid var(--color-neutral-200); background: var(--color-surface, #fff); font-family: var(--font-kop); font-size: 22px; font-weight: 700; cursor: pointer; transition: transform .08s, background .12s; }
.kz-toets:active { transform: scale(.96); background: var(--color-neutral-100); }
.kz-wis { font-size: 20px; color: var(--color-neutral-600); }
.kz-toetsen .btn-primary { grid-column: 3 / 4; grid-row: 4 / 5; min-height: 56px; }
.kz-nr-hint:empty { display: none; }
.kz-nr-hint { color: var(--color-accent-800, #0F7A38); font-weight: 600; }

.offline-vak { position: sticky; top: 8px; z-index: 40; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 12px; }
.offline-pil { position: sticky; top: 8px; z-index: 40; align-self: center; margin: 8px auto 0; display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 10px; border-radius: 999px; border: 1px solid rgba(232,184,74,.5); background: color-mix(in srgb, #F5D98A 22%, var(--color-surface, #fff)); color: var(--color-text); font: inherit; font-size: 13px; cursor: pointer; box-shadow: 0 12px 28px -16px rgba(0,0,0,.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.offline-pil i { width: 9px; height: 9px; border-radius: 50%; background: #E8B84A; box-shadow: 0 0 0 0 rgba(232,184,74,.5); animation: offline-puls 2s ease-out infinite; }
@keyframes offline-puls { 70% { box-shadow: 0 0 0 8px rgba(232,184,74,0); } 100% { box-shadow: 0 0 0 0 rgba(232,184,74,0); } }
.offline-pil b { font-weight: 700; }
.offline-pil span { color: var(--color-neutral-600); }
.offline-pil.open { border-radius: 16px 16px 0 0; }
.offline-vak .offline-pil { position: static; margin: 8px 0 0; }
.offline-paneel { width: min(100%, 520px); padding: 14px 16px; border-radius: 16px; border: 1px solid var(--color-neutral-200); background: var(--color-surface, #fff); box-shadow: 0 18px 40px -20px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.offline-paneel p { margin: 0; }
@media (prefers-reduced-motion: reduce) { .offline-pil i { animation: none; } }

.plek, .bank-chip { touch-action: none; }
.st-spook { position: fixed; z-index: 80; pointer-events: none; transform: translate(-50%, -50%) scale(1.1); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; box-shadow: 0 16px 30px -10px rgba(0,0,0,.6); border: 2px solid #fff; }
.plek.st-doel .plek-kaart, .plek.st-doel .plek-stip { box-shadow: 0 0 0 4px rgba(216,244,90,.9); }
.plek.st-doel { z-index: 3; }
.st-bankkaart.st-doel { box-shadow: 0 0 0 3px var(--color-accent); }
.st-sleept { opacity: .45; }
/* 1.1.46: ook de alternatieven tonen club en potentieel, zoals op een opstellingsblad */
.plek-rij:not(:first-child) .plek-naam { opacity: .85; }

/* ── 1.1.41: opdrachtenbord, kerncijfers, meldingen ─────────────────────── */
.ob-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ob-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--color-neutral-200); background: var(--color-surface, #fff); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.ob-chip.aan { background: var(--color-topbar, #0B2C1E); color: #fff; border-color: transparent; }
.ob-chip i { font-style: normal; font-family: var(--font-mono); font-size: 10.5px; padding: 1px 7px; border-radius: 999px; background: rgba(0,0,0,.08); }
.ob-chip.aan i { background: #D8F45A; color: #062015; }
.ob-bord { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ob-kolom { border-radius: 14px; background: var(--color-neutral-100); padding: 10px; min-height: 120px; }
.ob-kop { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-neutral-600); padding: 2px 4px 8px; }
.ob-kop i { font-style: normal; font-weight: 600; }
.ob-kolom.laat .ob-kop { color: var(--rood); }
.ob-kolom.klaar .ob-kop { color: var(--color-accent-800, #0F7A38); }
.ob-lijst { display: flex; flex-direction: column; gap: 8px; }
.ob-kaart { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--color-neutral-200); background: var(--color-surface, #fff); font: inherit; text-align: left; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.ob-kaart:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -16px rgba(0,0,0,.5); }
.ob-kaart b { font-size: 14px; }
.ob-kaart.laat { border-left: 4px solid var(--rood); }
.ob-kaart.klaar { border-left: 4px solid var(--color-accent); opacity: .85; }
.ob-scout { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-neutral-600); }
.ob-scout i { width: 22px; height: 22px; border-radius: 50%; background: var(--color-topbar, #0B2C1E); color: #D8F45A; font-style: normal; font-size: 9.5px; font-weight: 800; display: grid; place-items: center; }
.ob-meta { font-size: 12px; color: var(--color-neutral-600); }
.ob-aandacht { font-size: 12.5px; color: var(--color-text); opacity: .85; }
.ob-leeg { font-size: 12.5px; color: var(--color-neutral-600); padding: 8px 4px; }
/* 1.1.82: '+ n meer' is een knop die de kolom uitklapt. */
button.ob-meer { background: none; border: 0; font-family: inherit; text-align: left; cursor: pointer; width: 100%; border-radius: var(--radius-md); font-weight: 600; color: var(--color-neutral-800); }
button.ob-meer:hover { background: var(--color-neutral-100); }
button.ob-meer:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.ob-lees { align-self: flex-start; }
.ob-afgezegd summary { cursor: pointer; font-size: 12.5px; color: var(--color-neutral-600); }
@media (max-width: 720px) { .ob-bord { grid-template-columns: 1fr; } }
body.donker .ob-kolom { background: rgba(255,255,255,.05); }

.kerncijfers { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.kerntegel { gap: 6px; }
.kt-boven { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kt-delta { font-family: var(--font-mono); font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--color-neutral-100); color: var(--color-neutral-600); }
.kt-delta.op { background: var(--color-accent-100); color: var(--color-accent-800, #0F7A38); }
.kt-delta.neer { background: #FBE4E1; color: #B3261E; }
.kt-rij { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.kt-spark { width: 120px; height: 34px; flex: none; overflow: visible; }
.kt-spark .kt-lijn { fill: none; stroke: var(--color-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kt-spark .kt-vlak { fill: var(--color-accent); opacity: .12; }
.kt-spark .kt-punt { fill: var(--color-accent); }
.kt-sub { font-size: 12px; color: var(--color-neutral-600); }

.navbtn-bel { position: relative; }
.navbtn-bel .bel-tel { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #D8F45A; color: #062015; font-style: normal; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--color-topbar, #0B2C1E); }
.dialog.meldingen { display: flex; flex-direction: column; gap: 12px; }
.md-lijst { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; }
.md-rij { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--color-neutral-200); background: var(--color-surface, #fff); font: inherit; text-align: left; cursor: pointer; }
.md-rij.nieuw { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 6%, var(--color-surface, #fff)); }
.md-icoon { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 14px; }
.md-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.md-tekst b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-tekst small { font-size: 12px; color: var(--color-neutral-600); }
.md-tijd { font-family: var(--font-mono); font-size: 11px; color: var(--color-neutral-600); white-space: nowrap; }

/* knoppen zonder .btn erven de tekstkleur niet vanzelf: hier wél */
.ob-chip, .ob-kaart, .ob-kaart b, .md-rij, .md-tekst b, .kz-chip, .kz-toets { color: var(--color-text); }
.ob-chip.aan { color: #fff; }
.navbtn-bel .bel-tel { top: 6px; right: 10px; }
@media (max-width: 720px) { .navbtn-bel .bel-tel { top: -4px; right: -4px; } }
.kerntegel .statval { font-family: var(--font-kop); font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }

/* ── 1.1.42 · lege staten met een eerste stap ───────────────────────────── */
.leeg-actie.leeg-rijk { align-items: flex-start; padding: var(--space-6) var(--space-5); gap: var(--space-2); }
.leeg-icoon { width: 48px; height: 48px; border-radius: var(--r-vol); display: inline-flex; align-items: center; justify-content: center; background: var(--color-accent-100); color: var(--color-accent-700); margin-bottom: var(--space-2); }
.leeg-titel { font-family: var(--font-kop); font-size: var(--t-title); font-weight: 700; color: var(--color-text); letter-spacing: -.01em; }
.leeg-tekst { max-width: 52ch; }
.leeg-stappen { margin: var(--space-1) 0 0; padding: 0 0 0 20px; display: grid; gap: 4px; font-size: var(--t-meta); color: var(--color-neutral-700); max-width: 52ch; }
.leeg-stappen li::marker { color: var(--color-accent); font-weight: 800; }
.leeg-knoppen { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }

/* ── 1.1.42 · skeletten ──────────────────────────────────────────────────── */
.skelet { display: block; border-radius: 6px; background: var(--color-neutral-200); position: relative; overflow: hidden; }
.skelet::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: skelet-glans 1.4s ease-in-out infinite; }
.skelet-kaart { gap: var(--space-3); }
.skelet-lijst { display: flex; flex-direction: column; gap: var(--space-3); }
.skelet-rij { display: flex; align-items: center; gap: var(--space-3); }
.skelet-rond { width: 36px; height: 36px; border-radius: var(--r-vol); flex: none; }
.skelet-regels { flex: 1; display: grid; gap: 6px; }
@keyframes skelet-glans { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skelet::after { animation: none; } }
body.donker .skelet::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); }

/* ── 1.1.42 · je club klaarzetten ─────────────────────────────────────────── */
.start-kaart { gap: var(--space-4); border-left: 6px solid var(--color-accent); }
.start-kop { display: flex; align-items: center; gap: var(--space-4); }
.start-tekst { flex: 1; min-width: 0; display: grid; gap: 2px; }
.start-titel { font-family: var(--font-kop); font-size: var(--t-title); font-weight: 700; letter-spacing: -.01em; }
.start-ring { position: relative; width: 64px; height: 64px; flex: none; }
.start-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.start-ring circle { fill: none; stroke-width: 6; }
.start-ring .ring-spoor { stroke: var(--color-neutral-200); }
.start-ring .ring-vol { stroke: var(--color-accent); stroke-linecap: round; transition: stroke-dashoffset .6s var(--veer, ease); }
.start-ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.start-lijst { display: flex; flex-direction: column; border-top: var(--hairline); }
.start-rij { display: flex; align-items: center; gap: var(--space-3); width: 100%; text-align: left; padding: 10px 4px; border: 0; border-bottom: var(--hairline); background: transparent; color: var(--color-text); cursor: pointer; font: inherit; border-radius: 0; }
.start-rij:hover { background: var(--color-neutral-100); }
.start-rij:last-child { border-bottom: 0; }
.start-vink { width: 26px; height: 26px; border-radius: var(--r-vol); flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; border: 2px solid var(--color-neutral-300); color: var(--color-neutral-600); }
.start-rij.nu .start-vink { border-color: var(--color-accent); color: var(--color-accent-700); }
.start-rij.klaar .start-vink { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.start-rijtekst { flex: 1; min-width: 0; display: grid; }
.start-rijtekst b { font-weight: 700; }
.start-rijtekst span { font-size: var(--t-meta); color: var(--color-neutral-600); }
.start-rij.klaar .start-rijtekst b { color: var(--color-neutral-600); text-decoration: line-through; text-decoration-color: var(--color-neutral-400); }
.start-pijl { font-size: var(--t-micro); font-weight: 800; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--color-accent-700); }
.start-rij.klaar .start-pijl { color: var(--color-neutral-500); }
@media (max-width: 560px) { .start-kop { flex-wrap: wrap; } .start-kop .btn { margin-left: auto; } }

/* ── 1.1.42 · instellingen als één scherm ────────────────────────────────── */
.inst-profiel { flex-direction: row; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.inst-avatar { width: 52px; height: 52px; border-radius: var(--r-vol); flex: none; }
.inst-letters { display: inline-flex; align-items: center; justify-content: center; background: var(--color-accent); color: #fff; font-family: var(--font-kop); font-weight: 700; font-size: 18px; letter-spacing: .02em; }
.inst-profiel-tekst { flex: 1; min-width: 200px; display: grid; gap: 2px; }
.inst-naam { font-family: var(--font-kop); font-size: var(--t-title); font-weight: 700; letter-spacing: -.01em; }
.inst-profiel-knoppen { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.inst-rail { position: sticky; top: 8px; z-index: 5; display: flex; gap: 6px; padding: 6px; margin: 0 -2px; overflow-x: auto; scrollbar-width: none; background: color-mix(in srgb, var(--color-bg) 82%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: var(--r-vol); }
.inst-rail::-webkit-scrollbar { display: none; }
.inst-tab { flex: none; padding: 8px 14px; border-radius: var(--r-vol); font-size: var(--t-label); font-weight: 700; letter-spacing: .02em; color: var(--color-neutral-700); text-decoration: none; border: 1px solid transparent; transition: background .15s, color .15s; }
.inst-tab:hover { background: var(--color-neutral-100); }
.inst-tab.aan { background: var(--color-text); color: var(--color-bg); }
.inst-secties { display: flex; flex-direction: column; gap: var(--space-7); }
.inst-sectie { scroll-margin-top: 72px; display: grid; gap: var(--space-4); }
.inst-kop { display: grid; gap: 2px; padding-bottom: var(--space-2); border-bottom: var(--rule); }
.inst-kop h2 { margin: 0; font-family: var(--font-kop); font-size: var(--t-title); font-weight: 700; letter-spacing: -.01em; }
.inst-kop p { margin: 0; font-size: var(--t-meta); color: var(--color-neutral-600); }
.inst-kaarten { display: grid; gap: var(--space-4); }
@media (min-width: 980px) {
  .inst-kaarten { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); align-items: start; }
  .inst-kaarten > .card { min-width: 0; }
  .inst-rail { top: 12px; }
}

/* ── 1.1.43 · profieltabs scrollen op de gsm in plaats van af te breken ── */
@media (max-width: 720px) {
  .proftabs { margin-inline: calc(-1 * var(--space-4, 16px)); padding-inline: var(--space-4, 16px); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .proftabs::-webkit-scrollbar { display: none; }
  .proftabs .seg { display: inline-flex; flex-wrap: nowrap; width: max-content; max-width: none; }
  .proftabs .seg-opt { flex: 0 0 auto; }
  .proftabs .seg-opt span { width: auto; padding-inline: 16px; }
}
/* na te kijken: op de gsm de naam op de volle breedte, de knoppen op een eigen regel */
@media (max-width: 720px) {
  .nk-rij { display: flex; flex-wrap: wrap; gap: 8px 10px; }
  .nk-rij > div:first-child { flex-basis: 100% !important; }
  .nk-rij .btn-primary { margin-left: auto; }
}

/* ── 1.1.44 · bulkacties in de tabel, kiesmodus op de gsm ──────────────── */
.dt-vink { width: 34px; padding-right: 0 !important; }
.dt-vink input { width: 17px; height: 17px; accent-color: var(--color-accent); cursor: pointer; margin: 0; vertical-align: middle; }
.datatabel .table tr.gekozen td { background: var(--color-accent-100, #EAF7EE); }
.dt-selectie { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border-radius: var(--r-lg); background: var(--color-topbar, var(--color-text)); color: #F4F5F2; box-shadow: 0 18px 40px -18px rgba(0,0,0,.6); }
.dt-selectie b { font-size: 13px; }
.dt-selectie .btn-secondary { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #fff; }
.dt-selectie .btn-ghost { color: rgba(255,255,255,.75); }
.dt-selectie .btn[disabled] { opacity: .4; }
@media (max-width: 720px) { .dt-selectie { bottom: 96px; } }
@media (max-width: 480px) {
  /* bij het kiezen om te vergelijken telt de naam, niet de meters */
  .vg-kiezen .listrow > div:last-child, .vg-kiezen .listrow .trend-chip { display: none !important; }
}

/* ── 1.1.45 · contrast: groen op wit op minstens 4,5:1 ─────────────────── */
.tag-outline { color: var(--color-accent-800); border-color: var(--color-accent-700); }
.chip.on { background: var(--color-accent-700); border-color: var(--color-accent-700); color: #fff; }
.ob-scout { color: var(--color-neutral-700); }
.inst-letters { background: var(--color-accent-700); }
.st-vol, .trend.op { color: var(--color-accent-800); }
.ob-meta { color: var(--color-neutral-700); }
.tag-accent { background: var(--color-accent-800); border-color: var(--color-accent-800); color: #fff; }
/* 1.1.79 — In het donkere thema zijn de trappen 700 en 800 juist LICHT (store.js mengt het accent daar met wit): wit
   erop haalde 1,6:1. Daar staat de tekst in het diepste donker van het thema. Geldt voor elk label, de actieve
   filterknop en de letters van je account. */
body.donker .tag-accent, body.donker .chip.on, body.donker .inst-letters { color: var(--color-neutral-900); }

/* ── 1.1.49 · clubprofiel ───────────────────────────────────────────────── */
.cb-kop { flex-direction: row; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.cb-kop-tekst { flex: 1; min-width: 200px; display: grid; gap: 8px; }
.cb-naam { margin: 0; font-size: clamp(26px, 4vw, 34px); letter-spacing: -.02em; }
.cb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cb-twee { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-4); align-items: start; }
.cb-balken { display: flex; flex-direction: column; gap: 6px; }
.cb-balk { display: grid; grid-template-columns: minmax(90px, 32%) 1fr auto; align-items: center; gap: 10px; padding: 4px 0; border: 0; background: transparent; font: inherit; color: var(--color-text); text-align: left; border-radius: 8px; cursor: pointer; }
.cb-balk[disabled] { cursor: default; }
.cb-balk:not([disabled]):hover { background: var(--color-neutral-100); }
.cb-balk-label { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-balk-spoor { height: 10px; border-radius: 999px; background: var(--color-neutral-200); overflow: hidden; }
.cb-balk-spoor i { display: block; height: 100%; border-radius: 999px; min-width: 4px; transition: width .5s var(--veer, ease); }
.cb-balk-n { font-variant-numeric: tabular-nums; font-size: 13px; min-width: 2ch; text-align: right; }
.cb-regel { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--color-neutral-200); font-size: 14px; }
.cb-regel:last-of-type { border-bottom: 0; }
.cb-regel span { color: var(--color-neutral-700); }
.proftabs-breed .seg { max-width: none; width: fit-content; }
.proftabs-breed .seg-opt { flex: 0 0 auto; }
@media (max-width: 720px) { .proftabs-breed .seg { width: max-content; } }

/* ── 1.1.50 · scorekiezer: groot cijfer met stappen (keuze C) ──────────── */
.stapper { display: grid; gap: 8px; flex: 1 1 100%; min-width: 0; }
.stp-rij { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; gap: 8px; align-items: center; }
.stp-knop { height: 52px; border-radius: 14px; border: 1.5px solid var(--color-neutral-300); background: var(--color-surface); color: var(--color-text); font-family: var(--font-kop); font-weight: 700; font-size: 26px; line-height: 1; cursor: pointer; transition: transform .08s, background .12s; }
.stp-knop:active { transform: scale(.95); background: var(--color-neutral-100); }
.stp-knop[disabled] { opacity: .35; cursor: default; }
.stp-cijfer { height: 52px; border-radius: 14px; background: var(--color-topbar, #0B2C1E); color: #D8F45A; display: flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-kop); font-weight: 700; font-size: 28px; letter-spacing: -.02em; position: relative; overflow: hidden; outline-offset: 3px; }
.stp-cijfer.stp-leeg { background: var(--color-neutral-100); color: var(--color-neutral-600); border: 1.5px dashed var(--color-neutral-300); font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.stp-woord { font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(216,244,90,.75); }
.stp-maat { display: flex; gap: 3px; }
.stp-maat i { flex: 1; height: 6px; border-radius: 999px; background: var(--color-neutral-200); cursor: pointer; transition: background .15s; }
.stp-maat i.vol { background: var(--color-accent); }
.stp-maat i.hier { background: var(--color-topbar, #0B2C1E); }
.stp-snel { display: flex; gap: 6px; flex-wrap: wrap; min-height: 0; }
.stp-snel:empty { display: none; }
.stp-chip { border: 1px solid var(--color-neutral-300); background: var(--color-surface); color: var(--color-text); border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 12.5px; cursor: pointer; }
.stp-chip b { font-family: var(--font-kop); }
.stp-chip.stil { color: var(--color-neutral-600); }
.stp-chip[hidden] { display: none; }
/* per criterium compacter: lagere knoppen, geen woord, streepjes dunner */
.stapper.klein .stp-rij { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 6px; }
.stapper.klein .stp-knop, .stapper.klein .stp-cijfer { height: 42px; font-size: 21px; border-radius: 12px; }
.stapper.klein .stp-cijfer.stp-leeg { font-size: 11px; }
.stapper.klein .stp-maat i { height: 4px; }
.stapper.klein .stp-chip { padding: 3px 9px; font-size: 12px; }
/* veldmodus: alles een maat groter voor de duim */
.stapper.groot:not(.klein) .stp-rij { grid-template-columns: 64px minmax(0, 1fr) 64px; }
.stapper.groot:not(.klein) .stp-knop, .stapper.groot:not(.klein) .stp-cijfer { height: 64px; font-size: 34px; }
.stapper.groot.klein .stp-knop, .stapper.groot.klein .stp-cijfer { height: 50px; font-size: 24px; }
.itemrow { flex-wrap: wrap; }
.itemrow .stapper { flex: 1 1 100%; }
@media (min-width: 721px) { .itemrow .stapper { flex: 1 1 360px; max-width: 460px; } }
.scorebar .stapper { margin-top: 6px; max-width: 520px; }

/* ── 1.1.51 · spelersoverzicht ───────────────────────────────────────────── */
.ov-twee { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.ov-kop { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-600); margin-bottom: 6px; }
.cb-balk.op .cb-balk-n { color: var(--color-accent-800); }
.cb-balk.neer .cb-balk-n { color: var(--color-neutral-600); }
/* zes kerncijfers op één rij op de laptop, drie per rij op de gsm */
.ov-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
@media (max-width: 720px) {
  .ov-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .ov-stats .statcard { padding: 12px 10px; }
  .ov-stats .statcard .card-kicker { font-size: 9.5px; }
  .ov-stats .statcard .statval { font-size: 24px; }
}
/* in de twee kolommen van sterk/werkpunten krijgt het label de ruimte, de staaf een vaste maat */
.ov-twee .cb-balk { grid-template-columns: minmax(0, 1fr) 64px auto; }
.ov-twee .cb-balk-label { font-size: 13px; }

/* ── 1.1.53 · clubs-overzicht: nog niet gezien ───────────────────────────── */
.nz-blok { display: grid; gap: 6px; }
.nz-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nz-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 7px; border-radius: 999px; border: 1px solid var(--color-neutral-300); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.nz-chip:hover { border-color: var(--color-accent); }
.dt-naam { display: inline-flex; align-items: center; gap: 8px; }

/* ── 1.1.54 · scorekiezer compacter, toelichting ruimer ──────────────────── */
.stapper { gap: 6px; flex: 0 1 auto; }
.stp-rij { grid-template-columns: 44px 104px 44px; gap: 6px; width: fit-content; }
.stp-knop { height: 44px; font-size: 22px; border-radius: 12px; }
.stp-cijfer { height: 44px; font-size: 22px; border-radius: 12px; background: var(--color-neutral-100); color: var(--color-text); border: 1.5px solid var(--color-neutral-300); font-variant-numeric: tabular-nums; }
.stp-cijfer.stp-leeg { font-size: 10.5px; }
.stp-maat { width: 204px; max-width: 100%; gap: 3px; }
.stp-maat i { height: 4px; }
.stp-maat i.hier { background: var(--color-accent-800); }
.stp-chip { padding: 3px 9px; font-size: 12px; }
.stapper.klein .stp-rij { grid-template-columns: 38px 84px 38px; gap: 5px; }
.stapper.klein .stp-knop, .stapper.klein .stp-cijfer { height: 38px; font-size: 18px; border-radius: 10px; }
.stapper.klein .stp-maat { width: 170px; }
.stapper.groot:not(.klein) .stp-rij { grid-template-columns: 50px 112px 50px; }
.stapper.groot:not(.klein) .stp-knop, .stapper.groot:not(.klein) .stp-cijfer { height: 50px; font-size: 24px; }
.stapper.groot.klein .stp-knop, .stapper.groot.klein .stp-cijfer { height: 42px; font-size: 19px; }
.scorebar .stapper { margin-top: 4px; max-width: none; }
.itemrow .stapper { flex: 0 1 auto; max-width: none; }
@media (min-width: 721px) { .itemrow .stapper { flex: 0 1 auto; } }
.toelichting-vak { min-height: 96px; resize: vertical; line-height: 1.5; font-size: 15px; }

/* ── 1.1.55 · leeg scorevak zonder wikkelende tekst, lucht boven de toelichting ── */
.stp-cijfer.stp-leeg { font-family: var(--font-kop); font-weight: 700; font-size: 20px; letter-spacing: 0; text-transform: none; color: var(--color-neutral-500); white-space: nowrap; position: relative; }
.stp-cijfer.stp-leeg.voorstel { color: var(--color-neutral-600); }
.stp-vorige { position: absolute; top: 3px; right: 7px; font-family: var(--font-mono); font-weight: 500; font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-500); }
.stapper.klein .stp-cijfer.stp-leeg { font-size: 17px; }
.toelichting { margin-top: var(--space-4) !important; }
.catblock .scorebar { margin-bottom: 0; }

/* ── 1.1.56 · inspreken, voorbereiding, dekking, compacte score-rij ──────── */
.label-mic { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.label-mic label { margin: 0; }
.dicteer { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--color-neutral-300); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.dicteer.aan { background: #B3261E; border-color: #B3261E; color: #fff; animation: dicteer-puls 1.2s ease-in-out infinite; }
@keyframes dicteer-puls { 50% { box-shadow: 0 0 0 6px rgba(179,38,30,.18); } }
@media (prefers-reduced-motion: reduce) { .dicteer.aan { animation: none; } }
.vb-kaart summary { cursor: pointer; list-style: none; }
.vb-kaart summary::-webkit-details-marker { display: none; }
.vb-kaart summary::after { content: '▼'; float: right; font-size: 10px; color: var(--color-neutral-600); }
.vb-kaart[open] summary::after { content: '▲'; }
.vb-inhoud { display: grid; gap: var(--space-3); margin-top: var(--space-2); }
.vb-opdracht { padding: 8px 12px; border-left: 3px solid var(--color-accent); background: var(--color-accent-100, #EAF7EE); border-radius: 0 10px 10px 0; font-size: 14px; }
.vb-ploegen { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); }
.vb-ploeg { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vb-kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-bottom: 4px; border-bottom: 1px solid var(--color-neutral-200); }
.vb-rij { padding: 8px 10px; }
.nz-paar { display: inline-flex; align-items: stretch; }
.nz-paar .nz-chip { border-radius: 999px 0 0 999px; }
.nz-paar .nz-chip:only-child { border-radius: 999px; }
.nz-opdracht { border: 1px solid var(--color-neutral-300); border-left: 0; border-radius: 0 999px 999px 0; background: var(--color-surface); color: var(--color-accent-800); font-family: var(--font-kop); font-weight: 700; font-size: 16px; padding: 0 11px 0 8px; cursor: pointer; }
.nz-opdracht:hover { background: var(--color-accent-100, #EAF7EE); border-color: var(--color-accent); }
.nz-chip.stil { color: var(--color-neutral-600); font-weight: 500; }
/* 1.1.82: nog niet gezien, maar er staat al een wedstrijd gepland. */
.nz-chip.gepland i { font-style: normal; font-weight: 500; font-size: 12px; color: var(--color-neutral-600); }
.dekking { gap: var(--space-3); border-left: 6px solid var(--color-accent); }
@media (min-width: 721px) {
  .catblock .scorebar { align-items: center; padding-top: 10px; padding-bottom: 10px; }
  .catblock .scorebar .scorelabel { flex: 0 0 auto; min-width: 0; }
  .catblock .scorebar .stapper { order: 2; margin-top: 0; }
  .catblock .scorebar .stepper-hint { order: 3; margin-left: auto; min-width: 0; text-align: right; }
}

/* ── 1.1.58 · kiezers op één lijn: vaste rasterhoogte, kruisje in de rij ─── */
.stapper { gap: 5px; width: fit-content; }
.stp-rij { grid-template-columns: 44px 104px 44px 28px; grid-auto-rows: 44px; align-items: stretch; gap: 6px; }
.stp-rij > * { height: auto; min-height: 0; box-sizing: border-box; }
.stp-cijfer, .stp-cijfer.stp-leeg { height: auto; }
.stp-wis { border: 0; background: transparent; color: var(--color-neutral-500); font-family: var(--font-kop); font-weight: 700; font-size: 20px; line-height: 1; border-radius: 10px; cursor: pointer; padding: 0; }
.stp-wis:not([disabled]):hover { background: var(--color-neutral-100); color: var(--color-text); }
.stp-wis[disabled] { opacity: .22; cursor: default; }
.stp-snel, .stp-chip { display: none; }
.stp-maat { width: 204px; }
.stapper.klein .stp-rij { grid-template-columns: 38px 84px 38px 24px; grid-auto-rows: 38px; gap: 5px; }
.stapper.klein .stp-maat { width: 170px; }
.stapper.klein .stp-wis { font-size: 17px; }
.stapper.groot:not(.klein) .stp-rij { grid-template-columns: 50px 112px 50px 30px; grid-auto-rows: 50px; }
.stapper.groot:not(.klein) .stp-maat { width: 224px; }
.stapper.groot.klein .stp-rij { grid-template-columns: 42px 92px 42px 26px; grid-auto-rows: 42px; }
.stapper.groot.klein .stp-maat { width: 186px; }
.itemrow { align-items: center; }
.itemrow .stapper { margin-left: auto; }
.scorebar .stapper { margin-top: 0; }

/* ── 1.1.59 · radar op het spelersoverzicht ──────────────────────────────── */
.radar-legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--color-neutral-700); }
.radar-legenda span { display: inline-flex; align-items: center; gap: 7px; }
.radar-lijn { width: 18px; height: 0; border-top: 3px solid var(--color-accent); }
.radar-lijn.gem { border-top: 2px dashed var(--color-neutral-500); }
.radar-tabel { display: grid; gap: 2px; }
.radar-rij { display: grid; grid-template-columns: minmax(0, 1fr) 44px 56px 56px; gap: 8px; align-items: baseline; font-size: 13.5px; padding: 5px 0; border-bottom: 1px solid var(--color-neutral-200); }
.radar-rij:last-child { border-bottom: 0; }
.radar-rij b, .radar-rij .radar-gem, .radar-rij .radar-delta { text-align: right; font-variant-numeric: tabular-nums; }
.radar-rij .radar-gem { color: var(--color-neutral-600); }
.radar-rij .radar-delta { font-weight: 700; color: var(--color-neutral-500); }
.radar-rij .radar-delta.op { color: var(--color-accent-800); }
.radar-rij .radar-delta.neer { color: var(--rood); }
.radar-kop { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-600); }
.radar-kop b { color: var(--color-neutral-600); }
/* 1.1.104: de radar, groter en met de cijfers op de assen */
.radar-svg { width: 100%; max-width: 460px; height: auto; display: block; margin: 0 auto; }
.radar-ringtal { font-size: 9.5px; font-weight: 700; fill: var(--color-neutral-500); font-family: var(--font-mono); paint-order: stroke; stroke: var(--color-surface, #fff); stroke-width: 3px; stroke-linejoin: round; }
.radar-as { font-size: 12.5px; fill: var(--color-text); paint-order: stroke; stroke: var(--color-surface, #fff); stroke-width: 4px; stroke-linejoin: round; }
.radar-as-naam { font-weight: 800; }
.radar-as-mijn { font-weight: 800; fill: var(--color-accent-800, var(--color-accent)); font-variant-numeric: tabular-nums; }
.radar-as-gem { font-weight: 600; fill: var(--color-neutral-500); font-variant-numeric: tabular-nums; }

/* ── 1.1.62 · opstellingsblad, activiteitskalender ───────────────────────── */
.blad-knop { display: inline-flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; border-radius: 12px; border: 1px solid var(--color-neutral-300); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.blad-knop img { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; display: block; }
.blad-groot { width: 100%; height: auto; flex: 0 1 auto; min-height: 0; max-height: 66vh; object-fit: contain; border-radius: 12px; background: var(--color-neutral-100); }
/* Native vinkjes, datumvelden en schuifbalken volgen het thema van de app,
   niet de stand van het toestel: de app is licht tenzij de scout donker kiest. */
:root, body { color-scheme: light; }
:root:has(body.donker), body.donker { color-scheme: dark; }
.vinkje { appearance: auto; -webkit-appearance: checkbox; width: 17px; height: 17px; margin: 0; accent-color: var(--color-accent); cursor: pointer; flex: none; }
.akal { display: grid; gap: 8px; }
.akal-scroll { overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
.akal-rij { display: grid; grid-template-columns: 120px repeat(53, 12px) 36px; gap: 3px; align-items: center; }
.akal-kop { margin-bottom: 2px; }
.akal-maand { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-neutral-600); white-space: nowrap; overflow: visible; font-style: normal; }
.akal-label { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 8px; }
.akal-cel { display: block; width: 12px; height: 12px; border-radius: 3px; background: var(--color-neutral-200); }
.akal-cel.n1 { background: var(--color-accent-200, #BFE8CC); }
.akal-cel.n2 { background: var(--color-accent-400, #5FC985); }
.akal-cel.n3 { background: var(--color-accent); }
.akal-cel.n4 { background: var(--color-accent-800); }
.akal-tot { font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; color: var(--color-neutral-700); }
.akal-legenda { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--color-neutral-600); justify-content: flex-end; }
.akal-legenda span { margin: 0 4px; }
@media (max-width: 720px) { .akal-rij { grid-template-columns: 84px repeat(53, 11px) 30px; } .akal-cel { width: 11px; height: 11px; } .akal-label { font-size: 12px; } }

/* ── 1.1.64 · beheer-scherm (wacht op jou, scoutstabel, scoutpaneel) ── */
/* Tellers in de tabs, in de stijl van de chips op het opdrachtenbord. */
.bh-werk .seg-opt i, .bh-scouts .seg-opt i { font-style: normal; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; padding: 1px 7px; margin-left: 6px; border-radius: 999px; background: rgba(0,0,0,.08); }
.bh-werk .seg-opt input:checked + span i, .bh-scouts .seg-opt input:checked + span i { background: var(--kalk, #D8F45A); color: #062015; }
body.donker .bh-werk .seg-opt i, body.donker .bh-scouts .seg-opt i { background: rgba(255,255,255,.12); }
.bh-werk-inhoud { display: flex; flex-direction: column; gap: 8px; }
.bh-werk-inhoud .listrow { margin-bottom: 0; }
.bh-werk-inhoud .card-body { font-size: 13.5px; color: var(--color-neutral-700); }
/* Het rondje met initialen: donkergroen met kalk, zoals op het bord. */
.bh-rond { width: 32px; height: 32px; border-radius: 50%; background: var(--color-topbar, #0B2C1E); color: var(--kalk, #D8F45A); font-family: var(--font-kop); font-weight: 700; font-size: 11.5px; letter-spacing: .02em; display: inline-grid; place-items: center; flex: none; }
.bh-rond.groot { width: 40px; height: 40px; font-size: 14px; }
/* Rijen in 'Wacht op jou': knoppen op een eigen regel als het niet past. */
.bh-rij { flex-wrap: wrap; }
.bh-rij-knoppen { flex-wrap: nowrap; }
@media (max-width: 720px) { .bh-rij-knoppen { width: 100%; justify-content: flex-end; } }
/* De scoutskaart: kop met teller en knop, filtertabs, tabel (laptop) of lijst (gsm). */
.bh-kop { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.bh-kop .card-kicker { margin-bottom: 2px; }
.bh-scout { display: inline-flex; align-items: center; gap: 10px; }
.bh-scout b { display: block; font-size: 14px; line-height: 1.2; white-space: nowrap; }
.bh-scout small { display: block; font-size: 12px; color: var(--color-neutral-600); }
.bh-tags { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.bh-lijst { display: none; }
.bh-lijstrij { align-items: center; }
.bh-lijstnaam { display: flex; align-items: center; gap: 6px; min-width: 0; }
.bh-lijstnaam > span:first-child { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-chevron { color: var(--color-neutral-500); display: inline-flex; transform: rotate(180deg); flex: none; }
@media (max-width: 720px) {
  .bh-laptop { display: none; }
  .bh-lijst { display: block; }
  .bh-lijst .listrow { margin-bottom: 8px; padding: 10px 12px; }
}
.btn-gevaar, .btn-gevaar:hover { color: var(--rood); }
.btn-gevaar:hover { box-shadow: inset 0 -2px 0 var(--rood); }
/* Het paneel van één scout: op de laptop schuift het van rechts in, op de gsm
   is het het gewone blad van onderaf. */
.bh-paneel-kop { display: flex; align-items: flex-start; gap: 12px; }
.bh-paneel-titel { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.bh-paneel-titel .dialog-title { overflow-wrap: anywhere; }
.bh-sluit { flex: none; }
.bh-paneel-inhoud { display: flex; flex-direction: column; gap: var(--space-4); }
.bh-paneel-inhoud .listrow { margin-bottom: 0; }
.dialog-paneel .proftabs { margin: 0; }
.dialog-paneel .statgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dialog-paneel .statcard { padding: 12px 14px; }
.dialog-paneel .statcard .statval { font-size: 28px; }
.dialog-paneel .grid-tight { gap: 12px 16px; }
.bh-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; opacity: .55; }
.bh-regel { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--color-neutral-200); border-bottom: 1px solid var(--color-neutral-200); }
.bh-vink { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.bh-vink .vinkje { margin-top: 3px; }
.bh-vink b { display: block; font-size: 14px; }
.bh-vink small { display: block; font-size: 12px; color: var(--color-neutral-600); line-height: 1.4; }
.bh-scheiding { border-top: 1px solid var(--color-neutral-200); padding-top: 12px; margin-top: 4px; }
@media (min-width: 721px) {
  .dialog-backdrop:has(.dialog-paneel) { justify-content: flex-end; align-items: stretch; padding: 0; }
  .dialog-paneel { position: fixed; top: 0; right: 0; height: 100dvh; max-height: none; width: min(520px, 100%); max-width: none; margin: 0; border-radius: 16px 0 0 16px; border-top: 0; border-right: 0; border-bottom: 0; overflow-y: auto; animation: bh-paneel-in .24s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes bh-paneel-in { from { transform: translateX(48px); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) { .dialog-paneel { animation: none; } }
/* einde beheer-scherm */

/* ── 1.1.64 · opdrachten (bord op de gsm, weekrooster, verslagtermijn) ── */
/* Bord: een lege kolom rekt niet mee met een volle; de kop leest als tekst
   en de teller is een tag. Rood is het rood van .ob-kolom.laat. */
.ob-bord { align-items: start; }
.ob-kop { font-size: 12px; font-weight: 600; letter-spacing: .08em; gap: 8px; }
.ob-kop > span:first-child { flex: 1; min-width: 0; }
.ob-kop .tag-neutral { font-size: 10px; padding: 1px 8px; border-color: currentColor; color: inherit; letter-spacing: .04em; }
.tag.ob-tag-laat { color: var(--rood); border-color: var(--rood); }
.ob-meta-laat { color: var(--rood); }
.ob-bij { font-size: 12.5px; font-weight: 600; color: var(--color-accent-800, #0F7A38); }
.ob-chips { position: relative; }
.ob-titel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ob-titel .tag { font-size: 10px; }
@media (max-width: 720px) {
  /* Chips in één rij die opzij schuift, zoals de knoppen boven een lijst. */
  .ob-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--space-4)); padding: 0 var(--space-4) 2px; }
  .ob-chips::-webkit-scrollbar { display: none; }
  .ob-chip { flex: none; white-space: nowrap; }
  /* Kolommen als uitklapbare blokken onder elkaar; de kop is de knop. */
  .ob-bord { gap: 8px; }
  details.ob-kolom { min-height: 0; padding: 0; }
  details.ob-kolom > summary { list-style: none; cursor: pointer; user-select: none; padding: 12px 14px; }
  details.ob-kolom > summary::-webkit-details-marker { display: none; }
  details.ob-kolom > summary::after { content: ''; flex: none; width: 7px; height: 7px; margin: -4px 4px 0 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: .7; transition: transform .15s; }
  details.ob-kolom[open] > summary::after { transform: rotate(225deg); margin-top: 3px; }
  details.ob-kolom > .ob-lijst { padding: 0 10px 10px; }
}

/* Weekrooster: één rij per wedstrijd, één kolom per scout, een '+' in elk gat. */
.wr-tabel { width: 100%; border-collapse: collapse; font-size: 13px; }
.wr-tabel th, .wr-tabel td { padding: 8px; border-bottom: 1px solid var(--color-neutral-200); text-align: center; vertical-align: middle; white-space: nowrap; }
.wr-tabel tbody tr:last-child td { border-bottom: 0; }
.wr-tabel th { font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--color-neutral-600); }
.wr-tabel th:first-child, .wr-tabel td:first-child { text-align: left; padding-left: 14px; }
.wr-tabel td:first-child { white-space: normal; min-width: 200px; }
.wr-datum { font-family: var(--font-mono); font-size: 11.5px; color: var(--color-neutral-600); }
.wr-tel { font-style: normal; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--color-neutral-200); color: var(--color-text); }
.wr-tabel th.druk .wr-tel { background: var(--color-accent); color: var(--color-on-accent, #fff); }
.wr-init { display: none; }
/* Met veel scouts (meer dan zeven kolommen) de initialen in de kop, zoals vroeger op de gsm. */
.wr-veel .wr-voornaam { display: none; }
.wr-veel .wr-init { display: inline; }
.wr-plus { width: 44px; height: 44px; border-radius: 12px; border: 1.5px dashed var(--color-neutral-300); background: transparent; color: var(--color-neutral-600); font: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
.wr-plus:hover, .wr-plus.open { border-color: var(--color-accent); color: var(--color-accent-800, var(--color-accent)); }
.wr-plus.open { border-style: solid; }
/* 1.1.78: met een muis toont de '+' zich pas in de rij waar je bent, en voluit onder de muis of met Tab. Twaalf
   plussen voor drie opdrachten maakten van het rooster een behang. Op een aanraakscherm zonder muis blijven ze staan. */
@media (hover: hover) and (pointer: fine) {
  .wr-plus { opacity: 0; transition: opacity .12s ease; }
  .wr-tabel tbody tr:hover .wr-plus { opacity: .5; }
  .wr-tabel tbody tr .wr-plus:hover, .wr-tabel tbody tr .wr-plus:focus-visible, .wr-tabel tbody tr .wr-plus.open { opacity: 1; }
}
.wr-op { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 6px; border-radius: 999px; border: 1px solid var(--color-neutral-200); background: var(--color-surface, #fff); font: inherit; cursor: pointer; }
.wr-op .ob-scout i { width: 30px; height: 30px; font-size: 11px; }
.wr-op.laat { border-color: var(--rood); }
.wr-op.klaar { border-color: var(--color-accent); padding-right: 8px; }
.wr-op .tag { font-size: 9px; padding: 1px 6px; }
.wr-vrij, .wr-leeg { font-size: 12.5px; color: var(--color-neutral-600); margin: 0; }
/* De wedstrijd blijft staan terwijl je opzij schuift over de scouts (een club met veel scouts, een smal venster). Op
   de gsm staat er sinds 1.1.78 geen raster meer, maar een kaart per wedstrijd. */
.wr-tablewrap .wr-tabel th:first-child, .wr-tablewrap .wr-tabel td:first-child { position: sticky; left: 0; z-index: 1; background: var(--color-surface, #fff); }
/* einde opdrachten */

/* ── 1.1.65 · beheer (rolkeuze met uitleg, goedkeuren met rol, uitnodigen als blad, wachtwoord) ── */
/* Een laag bovenop een open venster: de matrix en een korte bevestiging
   sluiten het formulier eronder niet. */
.bh-bovenop { z-index: 1001; }
/* Rolkeuze: de select met de knop naar de matrix ernaast, de uitleg eronder. */
.bh-rolveld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bh-rolrij { display: flex; align-items: center; gap: 8px; }
.bh-rolrij .input { flex: 1 1 auto; min-width: 0; }
.bh-rolrij .btn { flex: none; white-space: nowrap; }
.bh-roluitleg { font-size: 12.5px; line-height: 1.4; max-width: 44ch; }
.bh-roluitleg:empty { display: none; }
select.input.bh-rol-klein { width: auto; min-width: 150px; min-height: 38px; padding: 6px 30px 6px 12px; font-size: 14px; }
/* De rechtenmatrix: de eerste kolom blijft staan bij het schuiven, de
   gekozen rol licht op. */
.bh-matrix { gap: var(--space-3); }
.bh-matrix-wrap { max-height: 60vh; }
.bh-matrix-tabel th:first-child, .bh-matrix-tabel td:first-child { position: sticky; left: 0; z-index: 2; background: var(--color-surface); min-width: 200px; max-width: 320px; white-space: normal; }
.bh-matrix-tabel th:first-child { z-index: 3; }
.bh-matrix-tabel td { line-height: 1.35; }
.bh-matrix-cel { text-align: center; width: 96px; }
.bh-matrix-tabel th.bh-matrix-cel { vertical-align: bottom; }
.bh-matrix-cel.focus, .bh-matrix-tabel tbody tr:hover td.bh-matrix-cel.focus { background: var(--color-accent-100); }
.bh-matrix-kop { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.bh-matrix-kop .tag { font-size: 9px; padding: 1px 7px; letter-spacing: .06em; }
.bh-vinkje { display: inline-flex; color: var(--color-accent); }
.bh-vinkje svg { stroke-width: 3; }
/* Tabkop van 'Wacht op jou' met rechts een knop voor de getoonde tab. */
.bh-werk-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.bh-werk-kop .proftabs { flex: 1 1 auto; min-width: 0; margin-bottom: 4px; }
.bh-werk-rechts { flex: none; margin-left: auto; }
.bh-werk-rechts:empty { display: none; }
@media (max-width: 720px) { .bh-werk-kop .proftabs { flex-basis: 100%; } }
/* Aanvraag: naam, rolkeuze met uitleg, knoppen. Op de gsm de naam op de
   eigen regel en de rest eronder. */
.bh-aanvraag { align-items: flex-start; }
.bh-aanvraag .bh-rond { margin-top: 3px; }
.bh-aanvraag-naam { flex: 1 1 160px; min-width: 0; }
.bh-aanvraag .bh-rolveld { flex: 0 1 auto; }
@media (max-width: 720px) {
  .bh-aanvraag .bh-rolveld { flex: 1 1 200px; }
  .bh-aanvraag .bh-rij-knoppen { width: auto; margin-left: auto; }
}
/* Uitnodigingen: dezelfde rij in de tab en in het blad; verlopen rijen
   gedempt, een nieuwe rij licht even op. */
.bh-uitn-naam { flex: 1 1 160px; min-width: 0; }
.bh-uitn.verlopen { opacity: .6; }
.bh-uitn.nieuw { animation: bh-nieuw 1.2s ease-out both; }
@keyframes bh-nieuw { from { background: var(--color-accent-100); border-color: var(--color-accent); } to { background: var(--color-surface); border-color: var(--color-neutral-200); } }
@media (prefers-reduced-motion: reduce) { .bh-uitn.nieuw { animation: none; } }
.bh-kop-knoppen { flex: none; }
.bh-uitn-open { display: flex; flex-direction: column; gap: 10px; }
.bh-uitn-lijst { display: flex; flex-direction: column; gap: 8px; }
.bh-uitn-lijst .listrow { margin-bottom: 0; }
.bh-linkvak:empty { display: none; }
.bh-linkblok { display: grid; gap: 8px; border-radius: var(--r-md); }
.bh-linkblok b { font-size: 14px; }
.bh-linkblok .input { flex: 1 1 200px; min-width: 0; min-height: 40px; font-size: 13px; padding: 8px 12px; }
.bh-gesch summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--color-neutral-700); }
.bh-gesch-lijst { display: grid; gap: 0; margin-top: 8px; }
.bh-gesch-rij { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; padding: 8px 0; border-top: 1px solid var(--color-neutral-200); }
.bh-gesch-naam { font-weight: 600; }
/* Wachtwoord: veld met 'Genereer' ernaast en een meter met vier segmenten. */
.bh-ww { display: flex; flex-direction: column; gap: 8px; }
.veld-met-knop { display: flex; align-items: center; gap: 8px; }
.veld-met-knop .input { flex: 1 1 auto; min-width: 0; }
.veld-met-knop .btn { flex: none; }
.ww-meter { display: flex; align-items: center; gap: 4px; }
.ww-seg { flex: 1 1 0; height: 5px; border-radius: 3px; background: var(--color-neutral-200); transition: background .15s; }
.ww-seg.aan.kort { background: #B3261E; }
.ww-seg.aan.goed { background: var(--color-accent); }
.ww-seg.aan.sterk { background: var(--color-accent-800, var(--color-accent)); }
.ww-label { flex: none; min-width: 44px; margin-left: 6px; text-align: right; font-size: 11.5px; font-weight: 600; color: var(--color-neutral-600); }
.ww-label:empty { display: none; }
.ww-label.kort { color: var(--rood); }
.ww-label.sterk { color: var(--color-accent-800, var(--color-accent)); }
textarea.input.bh-gegevens { font-family: var(--font-mono); font-size: 13px; line-height: 1.6; white-space: pre; overflow-x: auto; }
/* einde 1.1.65 beheer */

/* ── 1.1.65 · lezen (leeslijst, nakijkblad, vegen) ── */
/* de leeslijst: per scout een kopregel, daaronder de verslagen */
.ll-kop { justify-content: space-between; align-items: flex-start; }
.ll-inhoud { display: flex; flex-direction: column; }
.ll-scout { display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; font-size: 13.5px; }
.ll-scout:first-child { margin-top: 2px; }
.ll-scout .bh-rond { width: 26px; height: 26px; font-size: 10px; }
.ll-rij { align-items: center; gap: 8px 10px; margin-bottom: 6px; padding: 10px 14px; }
.ll-rij .ll-tekst { flex: 1; min-width: 0; cursor: pointer; }
.ll-rij .ll-tekst > div:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll-meer { align-self: flex-start; margin-top: 4px; }
@media (max-width: 720px) {
  .ll-kop { flex-direction: column; }
  .ll-rij { flex-wrap: wrap; }
  .ll-rij .ll-tekst { flex-basis: 100%; }
  .ll-rij .btn { margin-left: auto; }
  .ll-rij .btn + .btn { margin-left: 0; }
}
/* het nakijkblad: kop met teller, het verslag in leesvorm, de knoppen onderaan */
.nk-lees { flex: none; }
.nk-blad-kop { display: flex; align-items: flex-start; gap: 12px; }
.nk-blad-kop .dialog-title { margin-top: 2px; }
.nk-inhoud { font-size: 13px; display: flex; flex-direction: column; gap: var(--space-3); }
.nk-inhoud .nk-feiten { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px 16px; padding: 10px 0; border-top: 1px solid var(--color-neutral-200); border-bottom: 1px solid var(--color-neutral-200); }
.nk-inhoud .nk-alinea { margin: 0; line-height: 1.5; }
.nk-inhoud .nk-cats > div:last-child { margin-bottom: 0 !important; }
.nk-blad-acties { justify-content: flex-end; }
.nk-blad-acties .btn-primary { order: 3; }
.nk-blad-acties .btn-secondary { order: 2; }
.nk-blad-acties .btn-ghost { order: 1; margin-right: auto; }
.nk-veeghint { padding: 2px 0 6px; }
@media (min-width: 721px) {
  /* op de laptop blijven de knoppen zichtbaar onder een lang verslag */
  .dialog.nk-blad { max-height: 88vh; }
  .dialog.nk-blad .dialog-actions { position: sticky; bottom: calc(-1 * var(--space-6)); background: var(--color-surface); margin: 0 calc(-1 * var(--space-6)) calc(-1 * var(--space-6)); padding: var(--space-3) var(--space-6) var(--space-4); }
}
@media (max-width: 720px) {
  .nk-rij .nk-lees { display: none; } /* de naam opent het blad; vegen doet de rest */
  .nk-blad-acties .btn-ghost { margin-right: 0; }
}
/* vegen: de rij schuift over een gekleurde laag met het label van de actie */
.veeg { position: relative; overflow: hidden; border-radius: var(--r-md); margin-bottom: 8px; }
.veeg > .veeg-rij { position: relative; margin-bottom: 0; touch-action: pan-y; will-change: transform; background: var(--color-surface); }
.veeg > .veeg-rij:active { transform: none; }
.veeg-onder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-start; padding: 0 18px; border-radius: var(--r-md); color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .02em; opacity: 0; transition: opacity .12s; }
.veeg-onder.veeg-links { justify-content: flex-end; }
.veeg.veeg-bezig .veeg-onder { opacity: .75; }
.veeg.veeg-klaar .veeg-onder { opacity: 1; }
.rw-lijst { margin-top: 8px; }
.rw-lijst ul { margin: 4px 0 0; padding-left: 18px; }
.rw-lijst li { margin: 2px 0; }
/* einde 1.1.65 lezen */

/* ── 1.1.65 · opdrachten (herinnering, te-doen-teller) ── */
/* Herinnering: onderaan een te-late kaart staat wanneer er laatst herinnerd
   is, met rechts de knop. De kaart is een div met de rol van een knop; de
   focusring hoort erbij zoals bij elke knop. */
.ob-onder { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin-top: 2px; }
.ob-onder .ob-meta { flex: 1; min-width: 0; }
.ob-herinner { flex: none; }
.btn-sm.ob-herinner { min-height: 28px; padding: 3px 10px; font-size: 11px; color: var(--rood); }
.ob-herinner:disabled { opacity: .45; cursor: default; box-shadow: none; background: transparent; }
.ob-kaart[role="button"]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* In het weekrooster staat de knop onder de rode pil, niet erin. */
.wr-cel .btn-sm.ob-herinner { display: block; margin: 4px auto 0; min-height: 24px; padding: 2px 8px; font-size: 10.5px; }
/* In een rij (tab 'Te laat' in Beheer) staat dezelfde regel onder de tekst. */
.listrow .ob-onder { margin-top: 6px; }
/* Te-doen-teller op 'Meer' in de tabbalk: hetzelfde cijfer als de bel in de
   balk. Het getal komt uit data-tel, zodat de knoptekst 'Meer' blijft. */
.tabbar button { position: relative; }
.tabbar .tab-tel { position: absolute; top: 3px; left: calc(50% + 5px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #D8F45A; color: #062015; font-style: normal; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--color-topbar, #0B2C1E); pointer-events: none; }
.tabbar .tab-tel::after { content: attr(data-tel); }
/* Kop van het bord op de gsm: 'Opdracht geven' op een eigen regel, volle
   breedte, onder de kicker en de termijnknop. */
@media (max-width: 720px) {
  .ob > .row:first-child { row-gap: var(--space-2); }
  .ob > .row:first-child > .btn-primary { flex: 1 0 100%; }
}
/* einde 1.1.65 opdrachten */

/* ── 1.1.67 · opslag en offline (A) ── */
/* De pil staat in een eigen vak dat app.js apart bijwerkt; het vak zelf telt
   niet mee in de opmaak, zodat de pil blijft plakken zoals voorheen. */
.opslag-slot { display: contents; }
/* Niet aangenomen of te groot: de app probeert het niet vanzelf opnieuw, dus
   een rode stip die stilstaat in plaats van een gele die klopt. */
.offline-pil.vast { border-color: rgba(210,59,59,.4); background: color-mix(in srgb, #F2B8B5 20%, var(--color-surface, #fff)); }
.offline-pil.vast i { background: #D23B3B; animation: none; }
.offline-pil span { overflow-wrap: anywhere; }
.offline-pil { text-align: left; }
/* Een langere melding ('staat veilig op dit toestel …') mag de breedte van
   het scherm gebruiken; zonder dit krimpt de toast tot de helft (left: 50%). */
.toast { width: max-content; }
@media (max-width: 480px) {
  .offline-pil { max-width: calc(100vw - 24px); flex-wrap: wrap; row-gap: 2px; padding-right: 14px; border-radius: 18px; }
  .offline-pil.open { border-radius: 18px 18px 0 0; }
}
/* einde 1.1.67 · opslag en offline (A) */

/* ── 1.1.67 · noteren (C) ── */
/* Spelerskiezer: eerst de ploeg. Twee knoppen in de kleur van de ploeg; de
   gekozen ploeg is gevuld, de andere draagt haar kleur als streep links. */
.kz-kop { display: flex; flex-direction: column; gap: 12px; position: relative; padding-top: 24px; background: var(--color-surface, #fff); }
.kz-ploegen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kz-ploeg { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 48px; padding: 6px 12px 6px 10px; border-radius: 14px; border: 1px solid var(--color-neutral-200); box-shadow: inset 4px 0 0 var(--pk-bg); background: var(--color-surface, #fff); color: var(--color-text); font: inherit; text-align: left; cursor: pointer; transition: background .12s, color .12s, border-color .12s, box-shadow .12s; }
.kz-ploeg:hover { border-color: var(--pk-bg); }
.kz-ploeg:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.kz-ploeg.on { background: var(--pk-bg); color: var(--pk-fg); border-color: var(--pk-bg); box-shadow: 0 8px 18px -12px rgba(0,0,0,.55); }
.kz-ploeg > .crest, .kz-ploeg > svg { flex: none; }
.kz-ploeg-tekst { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.kz-ploeg-tekst small { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .78; }
.kz-ploeg-tekst b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.veld .kz-ploeg { min-height: 56px; }
body.veld .kz-ploeg-tekst b { font-size: 15px; }
/* 'Nieuwe speler' blijft onderaan het blad staan (in veldmodus met het
   toetsenblok); alleen de groepen erboven scrollen. Op een hoog scherm
   blijft ook de ploegkeuze bovenaan staan. Een plakkend blok houdt de
   binnenmarge van het blad vrij, dus die marge nemen kop en voet zelf over:
   anders schuiven de chips erboven en eronder zichtbaar door. */
.dialog.kiezer { padding-top: 0; padding-bottom: 0; }
.dialog.kiezer::before { z-index: 3; }
.dialog.kiezer .kz-nieuw { position: sticky; bottom: 0; z-index: 2; background: var(--color-surface, #fff); padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -14px 14px -14px rgba(0,0,0,.3); }
@media (max-width: 720px) {
  .kz-kop { padding-top: 22px; }
  .dialog.kiezer .kz-nieuw { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-height: 700px) {
  .dialog.kiezer .kz-kop { position: sticky; top: 0; z-index: 2; padding-bottom: 10px; }
}
.kz-nieuw-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.kz-voor { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; font-weight: 700; color: var(--color-neutral-700); }
.kz-voor i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.kz-voor span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Zelfde nummer bij de andere ploeg: ter info, niet in het groen van 'verder'. */
.kz-nr-hint.kz-nr-ander { color: var(--color-neutral-700); font-weight: 500; }
/* einde 1.1.67 · noteren (C) */

/* ── 1.1.67 · stand per speler (D) ── */
/* Dossierkop: de trend naast H en P (kleiner cijfer, zelfde regel), en één
   regel met laatst gezien, keren gezien en scouts. */
.scorebig.sb-trend .val { font-size: 22px; line-height: 32px; }
.dk-stand { margin-top: 2px; font-size: 12px; }
/* Overzicht: de volle datum (11/09/2026) past niet in het grote cijfer. */
.ov-stats .ov-datum .statval { font-size: 22px; white-space: nowrap; letter-spacing: -.01em; }
@media (max-width: 720px) { .ov-stats .ov-datum .statval { font-size: 15px; } }
/* Vergelijken: elke speler zijn eigen kleur (--vg-kleur op kop, legende en
   balk). De hoogste van een rij krijgt de volle kleur en een vet cijfer, de
   anderen een zachtere balk. */
.vg-stip { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--vg-kleur, var(--color-accent)); margin-right: 7px; vertical-align: 1px; flex: none; }
.vg-kop { border-top: 3px solid var(--vg-kleur, transparent); }
.vg-balken-kop { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.vg-basis.input { width: auto; min-height: 0; padding: 6px 32px 6px 10px; font-size: 13px; }
.vg-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; font-weight: 600; color: var(--color-neutral-700); }
.vg-balken .vg-lijn { grid-template-columns: 34px 1fr 40px 46px; }
.vg-balken .vg-wie { color: var(--vg-kleur, var(--color-neutral-600)); font-weight: 700; }
.vg-balken .vg-balk i, .vg-balken .vg-lijn.top .vg-balk i { background: var(--vg-kleur, var(--color-neutral-400)); opacity: .45; }
.vg-balken .vg-lijn.top .vg-balk i { opacity: 1; }
.vg-balken .vg-lijn b { font-weight: 600; color: var(--color-neutral-700); }
.vg-balken .vg-lijn.top b { font-weight: 800; color: var(--color-text); }
.vg-lbl { font-family: var(--font-mono); font-size: 10.5px; color: var(--color-neutral-600); white-space: nowrap; }
/* einde 1.1.67 · stand per speler (D) */

/* ── 1.1.67 · herstellingen na de review ── */
/* De pil staat midden boven de inhoud, ook gesloten: een blok met eigen
   breedte laat zich centreren, een inline-flex in #app niet. */
.offline-pil { display: flex; width: max-content; max-width: calc(100% - 24px); }
.offline-vak { z-index: 70; }
/* Op de gsm plakt de bovenbalk. De pil en de veldbalk plakken er net onder
   in plaats van erachter te verdwijnen, en de veldbalk nog een pil lager als
   die er is. app.js meet beide (--nav-h, --pil-h). */
@media (max-width: 720px) {
  .offline-pil, .offline-vak { top: calc(var(--nav-h, 57px) + 8px); }
  .veldbalk { top: calc(var(--nav-h, 57px) + var(--pil-h, 0px)); }
}
/* Gekozen ploeg: een ring in de accentkleur en een vinkje, los van de
   ploegkleur. Een zwarte ploeg in het donkere thema viel anders weg. */
.kz-ploeg.on { box-shadow: 0 0 0 2px var(--color-surface, #fff), 0 0 0 4px var(--color-accent), 0 8px 18px -12px rgba(0,0,0,.55); }
.kz-ploeg.on::after { content: '✓'; margin-left: auto; padding-left: 6px; font-weight: 800; font-size: 16px; line-height: 1; }
/* Bijna zwart in donker, bijna wit in licht: streep, rand en stip in een
   tint van dezelfde kleur die wel zichtbaar is. */
body.donker .kz-ploeg.pk-donker:not(.on) { box-shadow: inset 4px 0 0 color-mix(in srgb, var(--pk-bg) 45%, #fff); }
body.donker .kz-ploeg.pk-donker.on { border-color: rgba(255,255,255,.4); }
body:not(.donker) .kz-ploeg.pk-licht:not(.on) { box-shadow: inset 4px 0 0 color-mix(in srgb, var(--pk-bg) 55%, #000); }
body:not(.donker) .kz-ploeg.pk-licht.on { border-color: rgba(0,0,0,.3); }
body.donker .kz-voor i.pk-donker { box-shadow: 0 0 0 1.5px rgba(255,255,255,.55); }
body:not(.donker) .kz-voor i.pk-licht { box-shadow: 0 0 0 1.5px rgba(0,0,0,.35); }
/* Een hele zin als melding in gewone letters (ui.js zet .lang). */
.toast.lang { text-transform: none; letter-spacing: normal; font-weight: 600; font-size: 13px; line-height: 1.35; }
/* Het kruisje op de watchlist: een vinger groot. */
.wl-weg { min-width: 44px; min-height: 44px; }
/* Een shadow team dat je alleen mag bekijken. */
.st-vast .plek, .st-vast .bank-chip { cursor: default; }
.st-alleen-lezen { flex-basis: 100%; }
/* einde 1.1.67 · herstellingen na de review */

/* ---- 1.1.68 · beheer-tabs ---- */
/* De hoofdtabs van Beheer: gewone grootte, met wat lucht eronder. De subtabs
   in de kaarten (seg-klein) blijven kleiner en dus ondergeschikt. */
/* Alleen de ondermarge: op de gsm houdt .proftabs zijn negatieve zijmarge en
   loopt de balk tot de schermrand, zoals bij Clubs. */
.bh-tabs { margin-bottom: var(--space-3, 12px); }
.bh-tabinhoud { display: flex; flex-direction: column; gap: 16px; }
/* Tellers in de hoofdtabs, zoals in 'Wacht op jou' en de filterchips. */
.bh-tabs .seg-opt i { font-style: normal; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; padding: 1px 7px; margin-left: 6px; border-radius: 999px; background: rgba(0,0,0,.08); }
.bh-tabs .seg-opt input:checked + span i { background: var(--kalk, #D8F45A); color: #062015; }
body.donker .bh-tabs .seg-opt i { background: rgba(255,255,255,.12); }
/* Donker: de gekozen hoofdtab in kalk. De gewone donkere pil viel weg tegen
   de donkere balk (1,1:1); zo zie je ook zonder teller welke tab openstaat. */
body.donker .bh-tabs .seg-opt input:checked + span { background: var(--kalk, #D8F45A); color: #062015; box-shadow: none; }
body.donker .bh-tabs .seg-opt input:checked + span i { background: #062015; color: var(--kalk, #D8F45A); }
/* Rollen en rechten: één tegel per rol met het aantal accounts. */
.bh-rollen-rij { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.bh-rol { display: grid; gap: 2px; justify-items: start; padding: 10px 12px; border: 1px solid var(--color-neutral-200); border-radius: var(--r-md); background: var(--color-neutral-100); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .15s; }
.bh-rol:hover { border-color: var(--color-neutral-400); }
.bh-rol:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.bh-rol b { font-family: var(--font-kop); font-size: 22px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.bh-rol span { font-size: var(--t-meta, 12.5px); color: var(--color-neutral-700); }
@media (max-width: 720px) { .bh-rollen-rij { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bh-rol { position: relative; }
.bh-rol .bh-rol-pijl { position: absolute; top: 10px; right: 10px; display: inline-flex; transform: rotate(180deg); color: var(--color-neutral-500); }
/* De subtabs in de kaarten (Wacht op jou, Te lezen/Je feedback, de filters
   van Scouts, het weekrooster): omlijnd in plaats van gevuld. Gevuld is
   altijd een hoofdtab. */
.bh-tabinhoud .seg-klein .seg-opt input:checked + span { background: var(--color-surface, #fff); color: var(--color-text); box-shadow: inset 0 0 0 1.5px var(--color-neutral-700); }
body.donker .bh-tabinhoud .seg-klein .seg-opt input:checked + span { background: rgba(255,255,255,.08); color: #F4F5F2; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); }
@media (max-width: 720px) {
  /* De knoppen op Club een vinger groot (de compacte pillen van .card > .row zijn 38 px). */
  .card > .row.bh-rij-groot > .btn:not(.btn-primary):not(.veldswitch) { min-height: 44px; }
  /* De balk loopt verder: een vervaging aan die kant (klassen uit view-beheer.js). */
  .bh-tabs { scroll-padding-inline: 40px; }
  .bh-tabs.bh-meer-rechts { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
  .bh-tabs.bh-meer-links { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px); mask-image: linear-gradient(90deg, transparent, #000 36px); }
  .bh-tabs.bh-meer-links.bh-meer-rechts { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
}
/* einde 1.1.68 · beheer-tabs */

/* ---- 1.1.70 · huisschaal en afwerking (keten H) ---- */
/* De huisschaal (rondleiding, 'Wat betekent een 7?' op het nakijkblad en in
   Te lezen): per cijfer een label in de kleur van de H- en P-labels, met de
   betekenis ernaast. Tekst uit constants.js (SCHAAL). */
.hs-blok { display: flex; flex-direction: column; gap: 10px; }
.hs-intro, .hs-ijkpunt { margin: 0; line-height: 1.5; }
.hs-intro { font-size: 14px; }
.hs-ijkpunt { font-size: var(--t-meta, 12.5px); color: var(--color-neutral-700); }
.hs-schaal { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.hs-rij { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 12px; padding: 7px 0; border-top: 1px solid var(--color-neutral-200); }
.hs-rij:first-child { border-top: 0; }
.hs-cijfer { justify-self: start; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hs-betekenis { font-weight: 600; font-size: 14px; line-height: 1.35; }
.hs-betekenis::first-letter { text-transform: uppercase; }
.rl-schaal { margin-top: var(--space-2, 8px); }
.dialog.hs-venster { max-width: 520px; display: flex; flex-direction: column; gap: 12px; }
/* De kleine link 'Wat betekent een 7?': tekst, geen knop. Op de gsm is het
   raakvlak een vinger hoog zonder dat de regel hoger wordt. */
.hs-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 0; border: 0; background: none; color: var(--color-accent-tekst, var(--color-accent)); font: inherit; font-size: var(--t-meta, 12.5px); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; }
.hs-link:hover { text-decoration-thickness: 2px; }
.hs-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 4px; }
/* Een pijltje in lijnen (geen teken uit het lettertype): wijst omlaag als de
   schaal dicht is, omhoog als ze openstaat. */
.hs-link[aria-expanded]::after { content: ''; width: 6px; height: 6px; margin: 0 2px 3px 4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
.hs-link[aria-expanded="true"]::after { margin-bottom: -2px; transform: rotate(-135deg); }
body.donker .hs-link { color: var(--kalk, #D8F45A); }
@media (max-width: 720px) { .hs-link { min-height: 44px; margin-block: -10px; } }
/* Op het nakijkblad klapt de schaal open onder de kop (een tweede venster
   zou het blad sluiten). */
.hs-paneel { padding: 12px 14px; border: 1px solid var(--color-neutral-200); border-radius: var(--r-md, 12px); background: var(--color-neutral-100); }
body.donker .hs-paneel { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
/* einde 1.1.70 · huisschaal en afwerking */

/* ---- 1.1.70 · noteren ---- */
/* Veldmodus: de wedstrijd als één regel bovenaan (renderVeldKop). De knoppen
   houden een tikdoel van 44 px, maar niet de 54 px van de rest van veldmodus. */
/* Eigen stapellaag: het ⋯-menu valt over de chips eronder, niet erachter. */
.nv-wkop { position: relative; z-index: 30; padding: 8px 8px 8px 12px; gap: 6px; }
.nv-wkop-rij { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nv-wkop-wapens { display: inline-flex; gap: 2px; flex: none; }
/* Beide ploegen blijven leesbaar: een lange naam loopt door op een tweede
   regel binnen dezelfde rij (nooit '…' waar de uitploeg wegvalt). */
.nv-wkop-tekst { flex: 1; min-width: 0; font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.nv-wkop-tekst b { font-weight: 800; }
.nv-wkop-tekst span { margin-left: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--color-neutral-700); white-space: nowrap; }
body.veld .nv-wkop .btn { min-height: 44px; padding: 0 14px; font-size: 14px; }
body.veld .nv-wkop .nv-meer { min-width: 44px; padding: 0; font-size: 22px; line-height: 1; }
.nv-meer-wrap { position: relative; flex: none; }
.nv-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 80; min-width: 240px; display: flex; flex-direction: column; gap: 2px; padding: 6px; background: var(--color-surface, #fff); border: 1px solid var(--color-neutral-200); border-radius: var(--r-md); box-shadow: 0 18px 40px -18px rgba(0,0,0,.45); }
.nv-menu-item { min-height: 44px; display: flex; align-items: center; padding: 0 12px; border: 0; border-radius: calc(var(--r-md) - 2px); background: transparent; color: var(--color-text); font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; }
.nv-menu-item:hover, .nv-menu-item:focus-visible { outline: none; background: var(--color-neutral-100); box-shadow: inset 3px 0 0 var(--color-accent); }
.nv-wkop-opdracht { font-size: 13px; padding-left: 10px; border-left: 3px solid var(--color-accent); }
/* Eén grote '+ Speler' onder de chips. */
body.veld .nv-plus-speler { flex-basis: 100%; min-height: 60px; font-size: 18px; font-weight: 800; }
/* De chip: een stipje tot het verslag bij de club staat, en de initialen van
   de collega die het schreef (dat verslag opent alleen-lezen). */
.sessionchip { position: relative; }
.sessionchip .nv-stip { position: absolute; top: 5px; right: 5px; width: 9px; height: 9px; border-radius: 50%; background: #E8B84A; box-shadow: 0 0 0 2px var(--color-surface, #fff); }
.sessionchip.nv-van-collega { border-style: dashed; border-color: var(--color-neutral-500); }
.sessionchip.nv-van-collega.active { border-style: solid; }
.sessionchip .nv-auteur { position: absolute; right: -7px; bottom: -7px; min-width: 24px; height: 22px; padding: 0 5px; display: flex; align-items: center; justify-content: center; border-radius: 999px; border: 1.5px solid var(--color-neutral-500); background: var(--color-surface, #fff); color: var(--color-text); font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .04em; }
/* Het verslag van een collega: alleen lezen. */
.nv-collega { border-left: 4px solid var(--color-neutral-400); }
.nv-collega-kop { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.nv-auteur-groot { flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1.5px solid var(--color-neutral-500); background: var(--color-neutral-100); color: var(--color-text); font-size: 13px; font-weight: 800; }
/* H en P: de betekenis van het cijfer naast het label, zoals bij de categorieën. */
.nv-hp-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.nv-hp-kop label { margin-bottom: 0; }
.nv-hp-kop .stepper-hint { text-align: right; }
/* einde 1.1.70 · noteren */

/* ---- 1.1.70 · S ---- */
/* Geen stil verlies: de pil 'Keuze nodig' en het keuzevenster (conflict.js). */
.offline-pil.keuze { border-color: color-mix(in srgb, var(--color-accent) 55%, transparent); background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface, #fff)); }
.offline-pil.keuze i { background: var(--color-accent); animation: none; }
.conflict-venster .dialog-body { display: grid; gap: 2px; margin-top: 0; }
.conflict-naam { font-family: var(--font-kop); font-size: 16px; font-weight: 600; color: var(--color-text); }
.conflict-bron { font-size: var(--t-meta, 12.5px); color: var(--color-neutral-600); }
.conflict-kop, .conflict-regel { display: grid; grid-template-columns: minmax(84px, 1fr) minmax(0, 1.3fr) minmax(0, 1.3fr); gap: 10px; }
.conflict-kop { margin-top: 14px; padding: 0 12px 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--color-neutral-600); }
.conflict-lijst { list-style: none; margin: 0; padding: 0; border: 1px solid var(--color-neutral-200); border-radius: var(--r-md); overflow: hidden; }
.conflict-regel { padding: 10px 12px; border-top: 1px solid var(--color-neutral-200); font-size: 14px; line-height: 1.4; align-items: baseline; overflow-wrap: anywhere; }
.conflict-regel:first-child { border-top: 0; }
.conflict-regel b { font-weight: 600; }
.conflict-regel i { display: none; font-style: normal; }
.conflict-mijn { color: var(--color-text); font-weight: 600; }
.conflict-hun { color: var(--color-neutral-700); }
.conflict-gewijzigd { grid-column: 2 / -1; color: var(--color-neutral-600); }
.conflict-uitleg { margin-top: 12px; }
@media (max-width: 520px) {
  .conflict-kop { display: none; }
  .conflict-regel { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .conflict-mijn, .conflict-hun { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; align-items: baseline; }
  .conflict-regel i { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--color-neutral-600); }
  .conflict-gewijzigd { grid-column: auto; }
}
body.donker .conflict-lijst, body.donker .conflict-regel { border-color: rgba(255,255,255,.12); }
/* einde 1.1.70 · S */

/* ---- 1.1.70 · hersteller ---- */
/* De melding na Klaar valt op de gsm niet over het toetsenblok van de
   spelerskiezer: zolang de kiezer open is, staat ze bovenaan. */
@media (max-width: 720px) {
  body:has(.dialog.kiezer) .toast { bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 12px); }
}
/* Veldmodus op een tablet of laptop: de chips staan daar in een smalle
   kolom, dus '+ Speler' staat bovenaan die kolom en niet onder de vouw. */
@media (min-width: 721px) {
  body.veld .sessioncol .nv-plus-speler { order: -1; }
}
/* Tikdoelen van minstens 44 px in veldmodus: de kop die Voorbereiding
   openklapt, '★ Klaarzetten' en de knop bij het verslag van een collega. */
body.veld details.vb-kaart > summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
body.veld .nv-collega .btn, body.veld .card > .row > .btn.btn-sm { min-height: 44px; }
/* 'Keuze nodig' is de enige weg naar het keuzevenster. */
.offline-pil.keuze { min-height: 44px; }
/* Het stipje 'nog niet bij je club' iets groter, met een rand. */
.sessionchip .nv-stip { top: 4px; right: 4px; width: 12px; height: 12px; }
/* einde 1.1.70 · hersteller */

/* ---- 1.1.71 · N ---- */
/* H, P en observaties vanuit de veldbalk. H en P zijn knoppen van minstens
   50 px: een tik opent het blad met dezelfde scorekiezers. De balk is donker
   in beide thema's, de knoppen dus ook. */
.veldbalk .vb-scores { gap: 6px; }
/* De knoppen zijn breder dan de cijfers van vroeger: de ruimte voor de naam
   komt uit de tussenruimte, niet uit de knoppen. De positie blijft één regel. */
body.veld .veldbalk { gap: 8px; padding-inline: 10px; }
body.veld .veldbalk .vb-ini { width: 36px; height: 36px; font-size: 13px; }
.veldbalk .vb-pos { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.veldbalk .vb-score-knop { min-width: 50px; min-height: 50px; padding: 4px 8px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 1px solid rgba(255,255,255,.24); border-radius: 12px; background: rgba(255,255,255,.07); color: rgba(255,255,255,.62); font: inherit; font-size: 11px; font-weight: 600; line-height: 1; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .12s, border-color .12s, transform .08s; }
.veldbalk .vb-score-knop b { font-size: 18px; line-height: 1; }
.veldbalk .vb-score-knop:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.42); }
.veldbalk .vb-score-knop:active { transform: scale(.95); }
.veldbalk .vb-score-knop:focus-visible { outline: 2px solid var(--kalk, #D8F45A); outline-offset: 2px; }
/* De afrondknop even hoog als H en P: de balk blijft één rustige lijn. */
body.veld .veldbalk .vb-klaar { min-height: 50px; padding: 0 12px; }
/* Het blad: naam bovenaan, twee grote kiezers, observaties, Klaar. Past op
   een gsm van 390 × 844 zonder scrollen. */
.dialog.hp-blad { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 721px) { .dialog.hp-blad { max-width: 440px; } }
.hp-kop { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hp-ini { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--color-accent); color: #fff; font-size: 14px; font-weight: 800; }
.hp-naam { flex: 1; min-width: 0; }
.hp-naam .dialog-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-pos { font-size: 12.5px; color: var(--color-neutral-700); }
.hp-veld { gap: 6px; }
/* Dezelfde kiezer over de volle breedte van het blad: min, cijfer, plus en
   het kruisje elk minstens 50 px breed. */
.hp-blad .stapper, .hp-blad .stp-rij { width: 100%; }
.hp-blad .stapper.groot:not(.klein) .stp-rij { grid-template-columns: 58px minmax(0, 1fr) 58px 50px; grid-auto-rows: 56px; }
.hp-blad .stapper.groot:not(.klein) .stp-knop, .hp-blad .stapper.groot:not(.klein) .stp-cijfer { height: 56px; }
.hp-blad .stapper.groot:not(.klein) .stp-maat { width: 100%; }
.hp-blad .dicteer { min-height: 44px; padding: 0 14px; font-size: 14px; }
body.veld .hp-blad .dicteer { min-height: 50px; }
.hp-blad .dialog-actions .btn { flex: 1 1 100%; justify-content: center; }
/* einde 1.1.71 · N */

/* ---- 1.1.71 · H ---- */
/* Vandaag, voor wie alles ziet: één rij met wat in Beheer wacht. Elk deel is
   een knop van 44 px hoog; op de gsm lopen de delen door op een volgende
   regel. Alles bij: één stille regel zonder kader. */
.vd-wacht { display: flex; align-items: center; flex-wrap: wrap; gap: 0 12px; padding: 4px 8px 4px 16px; background: var(--color-surface); border: 1px solid var(--color-neutral-300); border-left: 6px solid var(--color-accent); border-radius: var(--r-md); box-shadow: var(--schaduw-1); }
.vd-wacht-kop { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--color-neutral-600); }
.vd-wacht-delen { display: flex; align-items: center; flex-wrap: wrap; gap: 0 2px; }
.vd-wacht-deel { min-height: 44px; padding: 0 10px; border: 0; border-radius: var(--r-sm); background: none; color: var(--color-text); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.vd-wacht-deel:hover { background: var(--color-neutral-200); }
.vd-wacht-deel:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.vd-wacht-punt { color: var(--color-neutral-500); }
.vd-wacht.rustig { padding: 0 2px; gap: 8px; min-height: 24px; background: none; border: 0; box-shadow: none; font-size: 13px; color: var(--color-neutral-600); }
.vd-wacht-vink { display: inline-flex; color: var(--color-accent-700); }
body.donker .vd-wacht:not(.rustig) { border-color: rgba(255,255,255,.1); border-left-color: var(--color-accent); }
body.donker .vd-wacht-deel:hover { background: rgba(255,255,255,.08); }
body.donker .vd-wacht.rustig { color: rgba(255,255,255,.64); }
body.donker .vd-wacht-vink { color: #5FD487; }

/* Gelezen-teken en 'Sterk' bij je eigen verslag: klein, zonder knop. */
.gl-tekens { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 11.5px; font-weight: 600; color: var(--color-neutral-700); }
.gl-teken { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.gl-teken > span[aria-hidden] { color: var(--color-accent-700); font-weight: 800; }
.gl-teken.sterk { padding: 2px 8px; border-radius: var(--r-vol); background: var(--color-accent-100); color: var(--color-accent-800); font-weight: 800; }
.gl-teken.sterk > span[aria-hidden] { color: inherit; }
body.donker .gl-tekens { color: rgba(255,255,255,.72); }
body.donker .gl-teken > span[aria-hidden] { color: #5FD487; }
body.donker .gl-teken.sterk { background: rgba(27,169,76,.22); color: #5FD487; }
[data-verslag] .gl-tekens, .listrow .gl-tekens { margin-top: 5px; }

/* Volledigheid per verslag: wat er is (✓), en wat ontbreekt als chip. */
.vl-regel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--color-neutral-700); }
.vl-deel { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.vl-deel.ok > span[aria-hidden] { color: var(--color-accent-700); font-weight: 800; }
.vl-label { color: var(--color-neutral-600); font-weight: 500; }
.vl-chip { display: inline-flex; align-items: center; min-height: 30px; padding: 2px 11px; border: 1.5px dashed var(--color-accent-700); border-radius: var(--r-vol); background: var(--color-surface); color: var(--color-accent-800); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.vl-chip:hover { background: var(--color-accent-100); border-style: solid; }
.vl-chip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.vl-chip.on { background: var(--color-accent-800); border: 1.5px solid var(--color-accent-800); color: #fff; }
.vl-in-venster { margin: 0 0 var(--space-3); gap: 8px; }
.nk-blad-kop .vl-regel { margin-bottom: 2px; }
body.donker .vl-regel { color: rgba(255,255,255,.72); }
body.donker .vl-deel.ok > span[aria-hidden] { color: #5FD487; }
body.donker .vl-chip { background: transparent; border-color: #5FD487; color: #5FD487; }
body.donker .vl-chip:hover { background: rgba(27,169,76,.18); }
body.donker .vl-chip.on { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

/* 'Sterk verslag': één tik, ster leeg of vol. */
.sterk-knop { display: inline-flex; align-items: center; gap: 5px; }
.sterk-knop .sterk-ster { font-size: 16px; line-height: 1; }
.sterk-knop.aan { color: var(--color-accent-800); background: var(--color-accent-100); border-radius: var(--r-sm); }
body.donker .sterk-knop.aan { color: #5FD487; background: rgba(27,169,76,.2); }
@media (min-width: 721px) {
  /* Feedback en Sterk links samen, Volgende en Vrijgeven rechts. */
  .nk-blad-acties:has(.sterk-knop) .btn-ghost:not(.sterk-knop) { margin-right: 0; }
  .nk-blad-acties .sterk-knop { order: 1; margin-right: auto; }
}
/* Tikdoelen op een aanraakscherm: 44 px. De chip oogt 32 px hoog (de regel
   blijft kort), maar tikt op 44 px: het vlak eromheen hoort bij de knop, en
   de regels staan 12 px uit elkaar zodat die vlakken elkaar niet raken. */
@media (pointer: coarse) {
  .vl-chip { position: relative; min-height: 32px; padding: 2px 12px; }
  .vl-chip::before { content: ''; position: absolute; inset: -6px -4px; }
  .vl-regel { gap: 12px 8px; }
  .sterk-knop { min-height: 44px; min-width: 44px; }
}
/* Op de gsm staat in de leeslijst ster én woord (hersteller 1.1.71): een ster
   alleen leest als 'speler bewaren' (Favorieten, Watchlist). */
@media (max-width: 720px) {
  .ll-rij { column-gap: 6px; }
  .ll-rij .sterk-knop { justify-content: center; padding: 0 10px; }
}
/* einde 1.1.71 · H */

/* ---- 1.1.71 · hersteller ---- */
/* Punt 5: het H/P-blad veegt weg vanaf de kop (de browser neemt de beweging
   daar niet over als scroll), en op de gsm is de greep te zien. */
.dialog.hp-blad .hp-kop { touch-action: none; }
.hp-blad .hp-obs { margin-bottom: 4px; }
@media (max-width: 720px) {
  .dialog.hp-blad::before { display: block; content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 40px; height: 4px; border-radius: var(--r-vol); background: var(--color-neutral-300); }
  body.donker .dialog.hp-blad::before { background: rgba(255,255,255,.28); }
  /* De naam in de veldbalk mag twee regels lopen; de positie is een code. */
  .veldbalk .vb-naam-tekst { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; font-size: 14px; line-height: 1.15; }
}
/* Punt 12: de teller in een chip ('toelichting 1/4', 'Vraag aanvulling 3 ›'). */
.vl-teller { display: inline-grid; place-items: center; min-width: 20px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: var(--r-vol); background: var(--color-accent-100); color: var(--color-accent-800); font-size: 11px; font-weight: 800; }
.vl-chip.on .vl-teller { background: rgba(255,255,255,.2); color: #fff; }
.vl-kort .vl-chip > span[aria-hidden] { margin-left: 6px; font-size: 14px; line-height: 1; }
.vl-bezig { font-style: italic; }
body.donker .vl-teller { background: rgba(27,169,76,.22); color: #5FD487; }
/* In de leeslijst op de gsm één compacte chip; de volle regel staat in het
   feedbackvenster, op het nakijkblad en vanaf 721 px. */
.vl-kort { display: none; }
@media (max-width: 720px) {
  .ll-rij .vl-breed { display: none; }
  .ll-rij .vl-kort { display: flex; }
  /* Punt 11: 'Sterk' krijgt een rand: een actie over het verslag. Onder de
     tekst twee rustige regels: H, P en Sterk; daaronder Lees en Feedback, rechts. */
  .ll-rij .sterk-knop { border: 1px solid var(--color-neutral-300); }
  .ll-rij::after { content: ''; flex-basis: 100%; height: 0; order: 2; }
  .ll-rij .sterk-knop ~ .btn { order: 3; }
  .ll-rij .sterk-knop + .btn { margin-left: auto; }
  body.donker .ll-rij .sterk-knop { border-color: rgba(255,255,255,.2); }
}
/* einde 1.1.71 · hersteller */

/* ---- 1.1.72 · U2 ---- */
/* Vandaag: Noteren, Voorbereiden en Route naast elkaar; op de gsm een eigen
   regel onder de tekst, de knoppen even breed. Tikdoel 44 px. */
.vd-knoppen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex-shrink: 0; }
.vd-knoppen .btn { min-height: 44px; }
.vd-komend { flex-wrap: wrap; }
.vd-komend-tekst { flex: 1; min-width: min(100%, 200px); }
@media (max-width: 720px) {
  .vd-komend .vd-knoppen, .vd-opdracht .vd-knoppen { flex-basis: 100%; }
  .vd-komend .vd-knoppen .btn, .vd-opdracht .vd-knoppen .btn { flex: 1 1 auto; justify-content: center; padding-left: 10px; padding-right: 10px; }
}
/* Dekking voor wie alles ziet: één regel die openklapt. */
.dekking-klap:not(.open) { gap: 0; }
.dekking-kop { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin: -6px 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.dekking-kop:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: var(--r-sm); }
.dekking-regel { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.dekking-punt { color: var(--color-neutral-500, var(--color-neutral-600)); }
.dekking-tel { font-size: 14px; font-weight: 600; }
.dekking-pijl { flex-shrink: 0; font-size: 22px; line-height: 1; color: var(--color-neutral-600); transition: transform .16s ease; }
.dekking-klap.open .dekking-pijl { transform: rotate(90deg); }
.dekking-inhoud { display: flex; flex-direction: column; gap: var(--space-3); }
.dekking-inhoud[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .dekking-pijl { transition: none; } }

/* Spelers zonder verslag: grijs vlak, 'nog niet gezien', geen meters. */
.sp-zonder { border-left: 10px solid var(--color-neutral-300); }
.sp-zonder .sp-zonder-crest { background: var(--color-neutral-200); color: var(--color-neutral-700); border: 1px dashed var(--color-neutral-400, var(--color-neutral-300)); }
.sp-zonder-meta { font-size: 12px; opacity: .6; }
.sp-nog-niet { flex-shrink: 0; white-space: nowrap; }
.dt-naam .sp-nog-niet { margin-left: 8px; }
.sp-zonder-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--color-accent-800, var(--color-accent)); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
body.donker .sp-zonder-link { color: #5FD487; }
body.donker .sp-zonder .sp-zonder-crest { background: rgba(255,255,255,.08); color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.25); }
.sp-waar-lijst { display: flex; flex-direction: column; gap: 6px; margin: 0 0 var(--space-3); }
.sp-waar { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 6px 6px 12px; border: 1px solid var(--color-neutral-300); border-radius: var(--r-md); }
.sp-waar-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sp-waar-tekst span { font-size: 12px; color: var(--color-neutral-700); }
.sp-waar .btn, .sp-scout-rij .btn { min-height: 44px; }
.sp-scout-rij { display: flex; gap: 8px; flex-wrap: wrap; }
.sp-scout-rij .input { flex: 1 1 200px; min-width: 0; }
body.donker .sp-waar { border-color: rgba(255,255,255,.14); }
body.donker .sp-waar-tekst span { color: rgba(255,255,255,.65); }

/* Kies een wedstrijd voor een opdracht zonder wedstrijd. */
.kw-kop { margin-top: var(--space-2); }
.kw-lijst { display: flex; flex-direction: column; gap: 6px; }
.kw-rij { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 10px 14px; border: 1px solid var(--color-neutral-300); border-radius: var(--r-md); background: var(--color-surface); color: var(--color-text); font: inherit; text-align: left; cursor: pointer; }
.kw-rij:hover { border-color: var(--color-accent); }
.kw-rij:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.kw-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kw-tekst span { font-size: 12px; color: var(--color-neutral-700); }
.kw-pijl { flex-shrink: 0; font-size: 20px; color: var(--color-neutral-600); }
.kw-leeg { font-size: 13px; color: var(--color-neutral-700); padding: 4px 0; }
.kw-nieuw { margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--color-neutral-300); }
.kw-nieuw-kop { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; cursor: pointer; list-style: none; }
.kw-nieuw-kop::-webkit-details-marker { display: none; }
.kw-nieuw-kop::after { content: "›"; margin-left: auto; font-size: 20px; font-weight: 400; color: var(--color-neutral-600); transition: transform .16s ease; }
.kw-nieuw[open] > .kw-nieuw-kop::after { transform: rotate(90deg); }
.kw-velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin: var(--space-2) 0; }
.kw-wissel { grid-column: 1 / -1; justify-self: start; min-height: 44px; margin: -4px 0 8px; }
@media (max-width: 420px) { .kw-velden { grid-template-columns: minmax(0, 1fr); } }
body.donker .kw-rij { border-color: rgba(255,255,255,.14); }
body.donker .kw-tekst span, body.donker .kw-leeg { color: rgba(255,255,255,.65); }

/* Beheer › Planning: of de scout de opdracht per mail kreeg (punt 17). Een
   rustige regel, ook als het niet lukte: opnieuw sturen is 'Herinner'. */
.ob-mail { font-size: 12px; color: var(--color-neutral-600); }
.ob-mail.fout { font-style: italic; }
.ob-mailblok { display: flex; flex-direction: column; gap: 2px; margin-top: -6px; }
.ob-kies-rij { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ob-kies-rij .btn { min-height: 44px; }
body.donker .ob-mail { color: rgba(255,255,255,.6); }
@media (max-width: 720px) { .sp-zonder .sp-nog-niet { font-size: 9.5px; padding: 3px 7px; letter-spacing: .06em; } }
/* einde 1.1.72 · U2 */

/* ---- 1.1.72 · U1 ---- */
/* Route: een echte link die eruitziet als knop, met een pijl naar buiten. */
.route-knop { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; text-decoration: none; white-space: nowrap; }
.route-knop::after { content: '\2197'; font-size: .95em; line-height: 1; }
/* De uitslag bij de wedstrijd: cijfers in de monoletter. */
.u1-uitslag { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
/* Clubs › Info: het adres met Bewaren en Route op één rij. */
.cb-adres { margin-top: var(--space-2); }
.cb-adres-rij { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cb-adres-rij .input { flex: 1 1 220px; min-width: 0; }
.cb-adres-rij .btn { flex: none; min-height: 44px; }
/* Blad 'Voorbereiding' (Wedstrijden › Voorbereiden, Vandaag). */
.vb-blad-kop { display: flex; gap: 12px; align-items: flex-start; margin-bottom: var(--space-3); }
.vb-blad-tekst { flex: 1; min-width: 0; }
.vb-blad-tekst .dialog-title { margin-bottom: 2px; }
.vb-blad-match { font-weight: 800; font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
.vb-blad-kop .route-knop { flex: none; align-self: center; }
.vb-wl { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: var(--r-md); background: var(--color-accent-100); margin-bottom: var(--space-3); }
.vb-wl-rij { display: flex; flex-wrap: wrap; column-gap: 10px; row-gap: 2px; align-items: baseline; }
.vb-wl-notitie { font-style: italic; }
.vb-leeg { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) 0; }
.vb-blad .vb-rij { min-height: 44px; }
.vb-blad-acties { flex-wrap: wrap; }
body.donker .vb-wl { background: rgba(27,169,76,.14); }
/* Blad 'Wedstrijd afronden': wat nog open staat, elke regel één tik. */
.af-match { margin: -4px 0 var(--space-3); }
.af-mist { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); }
.af-samen { font-weight: 800; font-size: 15px; }
.af-groep { display: flex; flex-direction: column; gap: 6px; }
.af-regel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 52px; width: 100%; padding: 8px 12px; border: 1px solid var(--color-neutral-200); border-radius: var(--r-md); background: var(--color-surface, #fff); color: var(--color-text); font: inherit; text-align: left; cursor: pointer; }
.af-regel:hover { border-color: var(--color-neutral-400); }
.af-regel:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.af-regel-tekst { flex: 1 1 60%; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.af-regel-tekst b { font-weight: 700; overflow-wrap: anywhere; }
.af-regel-tekst small { font-size: 12px; color: var(--color-neutral-700); overflow-wrap: anywhere; }
.af-regel .tag { flex: none; white-space: nowrap; }
.af-pijl { flex: none; font-size: 20px; line-height: 1; color: var(--color-neutral-500); }
.af-klaar { margin-top: var(--space-3); padding: 12px 14px; border-radius: var(--r-md); background: var(--color-accent-100); color: var(--color-accent-800); font-weight: 700; }
body.donker .af-regel { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); }
body.donker .af-regel-tekst small { color: rgba(255,255,255,.7); }
body.donker .af-klaar { background: rgba(27,169,76,.18); color: #5FD487; }
/* In een kaartrij maakt afwerking.css knoppen 38 à 40 px hoog; Route en
   Voorbereiden blijven 44 px, ook op de gsm. */
.card > .row > a.btn.btn-secondary.route-knop, .card > .row > .btn.btn-primary.u1-voorbereiden { min-height: 44px; }
.af-rechts { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
/* einde 1.1.72 · U1 */

/* ---- 1.1.72 · S ---- */
/* Instellingen › Jij: de agenda-link (één keer getoond, met kopiëren en de
   uitleg voor iPhone en Android) en de schakelaar voor mail over opdrachten.
   Elk tikdoel minstens 44 px. */
.agenda-knoppen { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.agenda-knoppen .btn, .agenda-venster .btn { min-height: 44px; }
.agenda-link { display: flex; gap: var(--space-2); align-items: stretch; margin-top: var(--space-2); }
.agenda-link .agenda-url { flex: 1; min-width: 0; min-height: 44px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.agenda-uitleg { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-3); }
.agenda-stap { display: flex; flex-direction: column; gap: 6px; padding: var(--space-3); border: 1px solid var(--color-neutral-200); border-radius: var(--r-sm); }
.agenda-stap p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--color-neutral-700); }
.agenda-stap .btn { align-self: flex-start; margin-top: auto; }
.agenda-venster a.btn { text-decoration: none; }
.mail-schakel { min-height: 44px; align-items: center; }
body.donker .agenda-stap { border-color: rgba(255,255,255,.14); }
body.donker .agenda-stap p { color: rgba(255,255,255,.72); }
@media (max-width: 720px) {
  .agenda-uitleg { grid-template-columns: 1fr; }
  .agenda-knoppen .btn { flex: 1 1 auto; }
  .agenda-stap .btn { align-self: stretch; }
}
/* einde 1.1.72 · S */

/* ---- 1.1.72 · hersteller ---- */
/* Spelers zonder verslag: de link in de tekstkleur, vet en onderlijnd. Groen
   haalde geen 4,5:1: een club met eigen kleuren herberekent de groene ladder. */
.sp-zonder-link, body.donker .sp-zonder-link { color: var(--color-text); text-decoration-thickness: 2px; }
.sp-telregel { font-size: 12px; color: var(--color-neutral-700); }
body.donker .sp-telregel { color: rgba(255,255,255,.68); }
/* Wijzigen in Wedstrijden: 44 px, zoals Voorbereiden en Route ernaast. */
.card > .row > .btn.btn-secondary.u1-wijzigen:not(.btn-primary) { min-height: 44px; }
/* Dekking op Vandaag: de clubchips en het '+' als tikdoel van 44 px. */
.dekking-inhoud .nz-chip, .dekking-inhoud .nz-opdracht { min-height: 44px; }
.dekking-inhoud .nz-opdracht { min-width: 44px; padding: 0 12px; }
/* De lopende wedstrijd in Noteren: bijwerken rustig op één rij, daaronder
   'Wedstrijd afronden' als hoofdknop met Route even breed ernaast. */
.am-bij, .am-slot { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.am-bij .btn { min-height: 44px; }
.am-slot { align-items: stretch; }
.am-slot > .btn { flex: 1 1 0; min-height: 44px; justify-content: center; text-align: center; }
/* Clubkop: het adres van het jeugdcomplex, met één tik naar Info. */
.cb-adres-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.cb-adres-kop .card-meta { overflow-wrap: anywhere; }
.cb-adres-kop .btn { min-height: 44px; }
/* Instellingen › Jij: mail over opdrachten als echte aan/uit-schakelaar. */
.veldswitch.mail-schakel { align-self: flex-start; max-width: 100%; text-align: left; }
.mail-schakel .veldswitch-titel { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 700; }
.veldswitch.mail-schakel:disabled { opacity: .6; cursor: default; }
/* einde 1.1.72 · hersteller */

/* ---- 1.1.73 · D ---- */
/* Eén datumbron: het kalenderblaadje (Tornooien, en klein op Vandaag), de
   maandkoppen van Tornooien en de dagkoppen van het weekrooster. Naar 21st.dev:
   'plakkende dagkoppen' (een lijst per dag met rustige koppen) en de
   kalenderkaart met gekleurde pillen, in de SPOTR-taal: donkergroen, kalk,
   pillen, mono voor maand en datum. */

/* Het blaadje: maand in mono, de dag groot, de weekdag eronder. */
.dt-tegel {
  position: relative; flex: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 58px; min-height: 66px; padding: 8px 4px 7px; border-radius: 14px; overflow: hidden;
  background: var(--color-surface, #fff); border: 1px solid var(--color-neutral-200);
  box-shadow: var(--schaduw-1); line-height: 1; text-align: center;
}
.dt-tegel::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--color-accent); }
.dt-maand { font-family: var(--font-mono); font-weight: 500; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent-800, #0E5B29); white-space: nowrap; }
.dt-dag { font-family: var(--font-kop); font-weight: 700; font-size: 26px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin: 5px 0 4px; color: var(--color-text); white-space: nowrap; }
.dt-wd { font-size: 11px; font-weight: 600; color: var(--color-neutral-600); white-space: nowrap; }
.dt-meer { width: 76px; }
.dt-meer .dt-dag { font-size: 20px; margin: 7px 0 5px; }
/* Vandaag of bezig: donkergroen met kalk, zoals de bovenbalk. */
.dt-bezig { background: var(--color-topbar, #0B2C1E); border-color: transparent; box-shadow: 0 12px 24px -14px rgba(6,24,15,.75); }
.dt-bezig::before { background: var(--chroom-accent, var(--kalk)); }
.dt-bezig .dt-maand, .dt-bezig .dt-dag { color: var(--chroom-accent, var(--kalk)); }
.dt-bezig .dt-wd { color: rgba(255,255,255,.8); }
/* Voorbij: rustig grijs, zonder schaduw. */
.dt-gespeeld { background: var(--color-neutral-100); box-shadow: none; }
.dt-gespeeld::before { background: var(--color-neutral-300); }
.dt-gespeeld .dt-maand, .dt-gespeeld .dt-wd { color: var(--color-neutral-600); }
.dt-gespeeld .dt-dag { color: var(--color-neutral-700); }
.dt-zonder { background: transparent; border-style: dashed; box-shadow: none; }
.dt-zonder::before { display: none; }
.dt-zonder .dt-dag { color: var(--color-neutral-500); }
/* Klein, in een lijstregel (Komende wedstrijden op Vandaag). */
.dt-klein { width: 48px; min-height: 54px; padding: 7px 3px 6px; border-radius: 12px; }
.dt-klein .dt-maand { font-size: 8.5px; }
.dt-klein .dt-dag { font-size: 20px; margin: 4px 0 3px; }
.dt-klein .dt-wd { font-size: 10px; }
.vd-komend { gap: 12px; }
body.donker .dt-tegel { border-color: rgba(255,255,255,.12); }
body.donker .dt-bezig { border-color: color-mix(in srgb, var(--chroom-accent, var(--kalk)) 40%, transparent); }
body.donker .dt-gespeeld { background: rgba(255,255,255,.04); }
body.donker .dt-gespeeld .dt-dag { color: rgba(255,255,255,.7); }

/* Tornooien: twee blokken, per maand een pil als kop. */
.tk-sectie { display: flex; flex-direction: column; gap: var(--space-3); }
.tk-sectie + .tk-sectie { margin-top: var(--space-5); }
.tk-sectiekop { display: flex; align-items: center; gap: 10px; }
.tk-sectietitel { margin: 0; font-family: var(--font-kop); font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.tk-tel { font-family: var(--font-mono); font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--color-neutral-200); color: var(--color-text); }
.tk-maand {
  position: sticky; top: 8px; z-index: 3; align-self: flex-start; margin: 2px 0 -2px; padding: 6px 12px;
  border-radius: 999px; border: 1px solid var(--color-neutral-300);
  background: color-mix(in srgb, var(--color-surface, #fff) 78%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--color-neutral-700); line-height: 1.2;
}
.tk-kop { display: flex; align-items: flex-start; gap: 14px; }
.tk-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tk-titelrij { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.tk-tekst .card-meta { overflow-wrap: anywhere; }
.tk-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
/* De pil: 'over 5 dagen', 'Morgen', of donkergroen met een kloppende stip als het bezig is. */
.tk-pil { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.4; white-space: nowrap; background: var(--color-accent-100); color: var(--color-accent-800, #0E5B29); }
.tk-pil-bezig { background: var(--color-topbar, #0B2C1E); color: var(--chroom-accent, var(--kalk)); }
.tk-pil-bezig i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: tk-puls 1.8s ease-out infinite; }
@keyframes tk-puls { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); } 100% { box-shadow: 0 0 0 7px transparent; } }
.tk-bezig { border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-neutral-200)); }
.tk-gespeeld .card-title { color: var(--color-neutral-800); }
.tk-knoppen .btn { min-height: 44px; }
body.donker .tk-maand { border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.78); }
body.donker .tk-tel { background: rgba(255,255,255,.1); }
body.donker .tk-pil:not(.tk-pil-bezig) { background: rgba(27,169,76,.2); color: var(--color-accent-800); }
body.donker .tk-gespeeld .card-title { color: rgba(255,255,255,.86); }
@media (max-width: 720px) {
  .tk-kop { gap: 12px; }
  .tk-knoppen .btn { flex: 1 1 auto; justify-content: center; }
}

/* Weekrooster: per dag een kop, de periode op een eigen regel onder de titel. */
.wr-periode { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .02em; color: var(--color-neutral-600); }
.wr-tabel tr.wr-dagkop th { text-align: left; padding: 16px 8px 8px 14px; background: transparent; border-bottom: 1px solid var(--color-neutral-200); font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--color-text); }
.wr-tabel tbody tr.wr-dagkop:first-child th { padding-top: 6px; }
.wr-dagkop-in { position: sticky; left: 14px; display: inline-flex; align-items: center; gap: 10px; }
.wr-dagnr { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--color-neutral-100); border: 1px solid var(--color-neutral-200); font-family: var(--font-kop); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.wr-dagwoord { display: inline-block; font-family: var(--font-kop); font-weight: 700; font-size: 14px; }
.wr-dagwoord::first-letter { text-transform: uppercase; }
.wr-dagdatum { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--color-neutral-600); }
.wr-dagkop.vandaag .wr-dagnr { background: var(--color-topbar, #0B2C1E); color: var(--chroom-accent, var(--kalk)); border-color: transparent; }
.wr-uur { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; color: var(--color-neutral-700); margin-right: 8px; font-variant-numeric: tabular-nums; }
.wr-soort, .wr-lt { font-size: 11px; color: var(--color-neutral-600); margin-left: 8px; white-space: nowrap; }
.wr-soort { padding: 1px 7px; border-radius: 999px; border: 1px solid var(--color-neutral-300); }
.wr-tablewrap .wr-tabel tr.wr-dagkop th { position: static; }
body.donker .wr-dagnr { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }

@media (prefers-reduced-motion: reduce) {
  .tk-pil-bezig i { animation: none; }
}
/* einde 1.1.73 · D */

/* ---- 1.1.73 · K ---- */
/* Wedstrijden als kalender (kalender.js en view-wedstrijden.js), naar 21st.dev:
   weekstrook, maand met stippen, kalender met lijst, plakkende dagkoppen.
   Drie soorten met elk een eigen kleur, in licht en donker minstens 3:1 als
   stip of balk en 4,5:1 als tekst: wedstrijd in het SPOTR-accent, tornooi
   oranje, een opdracht voor jou rustig indigo. Tikdoelen minstens 44 px. */
:root {
  /* Een trap dieper dan het accent: de balk op een zacht gekleurde rij haalt zo 3:1. */
  --soort-wedstrijd: var(--color-accent-600, #189543);
  --soort-wedstrijd-tekst: var(--color-accent-700, #137A37);
  --soort-tornooi: #C26A05;
  --soort-tornooi-tekst: #9A4A06;
  --soort-opdracht: #5566C8;
  --soort-opdracht-tekst: #3A47A8;
}
body.donker {
  --soort-wedstrijd: var(--color-accent);
  --soort-wedstrijd-tekst: var(--color-accent);
  --soort-tornooi: #F29A3F;
  --soort-tornooi-tekst: #F6B46E;
  --soort-opdracht: #97A4F0;
  --soort-opdracht-tekst: #B5BFF6;
}

/* De kop van beide kalenders: maand en jaar, 'Vandaag', ‹ › */
.kal { display: flex; flex-direction: column; gap: 6px; }
.kal-kop { display: flex; align-items: center; gap: 2px; min-height: 44px; }
.kal-titel { flex: 1; min-width: 0; padding-left: 6px; font-family: var(--font-kop); font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kal-titel::first-letter { text-transform: uppercase; }
/* 'Vandaag' oogt als een pil van 34 px; de knop zelf is 44 px hoog. */
.kal-vandaag { position: relative; z-index: 0; height: 44px; margin-right: 6px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--color-text); font: 600 13px var(--font-kop); cursor: pointer; }
.kal-vandaag::before { content: ''; position: absolute; inset: 5px 0; z-index: -1; border: 1.5px solid var(--color-neutral-300); border-radius: 999px; background: var(--color-surface); transition: border-color .12s; }
.kal-vandaag:hover::before { border-color: var(--color-text); }
.kal-pijl { width: 44px; height: 44px; flex: none; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--color-text); cursor: pointer; transition: background .12s; }
.kal-pijl:hover { background: var(--color-neutral-100); }
.kal-pijl-volgende svg { transform: rotate(180deg); }
.kal-pijl:focus-visible, .kal-vandaag:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Stippen per soort onder een dag, en de legende. */
.kal-stippen { display: flex; justify-content: center; gap: 3px; height: 6px; }
.kal-stip { display: block; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--soort-wedstrijd); }
.kal-stip[data-soort="tornooi"] { background: var(--soort-tornooi); }
.kal-stip[data-soort="opdracht"] { background: var(--soort-opdracht); }
.kal-legende { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--color-neutral-200); font-size: 12.5px; color: var(--color-neutral-700); }
.kal-legende-item { display: inline-flex; align-items: center; gap: 7px; }
.kal-legende .kal-stip { width: 8px; height: 8px; }

/* De weekstrook: letter en dagnummer in een pil, stippen eronder. Vandaag
   een ring, de gekozen dag gevuld (donkergroen met kalk). */
.wk-dagen { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; touch-action: pan-y; }
.wk-dag { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; min-height: 44px; padding: 2px 0 4px; border: 0; background: transparent; color: var(--color-text); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wk-pil { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 100%; max-width: 44px; height: 58px; border-radius: 999px; transition: background .16s, color .16s, box-shadow .16s; }
.wk-letter { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .06em; color: var(--color-neutral-600); }
.wk-num { font-family: var(--font-kop); font-size: 17px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
@media (hover: hover) { .wk-dag:hover .wk-pil { background: var(--color-neutral-100); } }
.wk-dag.vandaag .wk-pil { box-shadow: inset 0 0 0 2px var(--color-accent); }
.wk-dag.vandaag .wk-num { color: var(--soort-wedstrijd-tekst); }
.wk-dag[aria-pressed="true"] .wk-pil { background: var(--color-topbar, #0B2C1E); color: var(--chroom-accent, var(--kalk)); box-shadow: 0 10px 18px -12px rgba(6,24,15,.8); }
.wk-dag[aria-pressed="true"] .wk-letter, .wk-dag[aria-pressed="true"] .wk-num { color: inherit; }
.wk-dag[aria-pressed="true"] .wk-letter { opacity: .8; }
.wk-dag[aria-pressed="true"].vandaag .wk-pil { box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-accent); }
.wk-dag:focus-visible { outline: none; }
.wk-dag:focus-visible .wk-pil { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* De maandkalender: zes weken, een raster met pijltjestoetsen. */
.kal-raster { display: flex; flex-direction: column; gap: 2px; touch-action: pan-y; }
.kal-rij { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.kal-weekdag { padding: 2px 0 6px; text-align: center; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .06em; color: var(--color-neutral-600); }
.kal-cel { display: flex; justify-content: center; }
.kal-dag { width: 100%; max-width: 48px; min-height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--color-text); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.kal-num { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 999px; font-family: var(--font-kop); font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; transition: background .14s, color .14s, box-shadow .14s; }
.kal-dag.buiten { color: var(--color-neutral-600); }
.kal-dag.buiten .kal-num { font-weight: 500; }
@media (hover: hover) { .kal-dag:hover .kal-num { background: var(--color-neutral-100); } }
.kal-dag.vandaag .kal-num { box-shadow: inset 0 0 0 2px var(--color-accent); color: var(--soort-wedstrijd-tekst); font-weight: 700; }
.kal-dag.gekozen .kal-num { background: var(--color-topbar, #0B2C1E); color: var(--chroom-accent, var(--kalk)); font-weight: 700; }
.kal-dag.gekozen.vandaag .kal-num { box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-accent); }
.kal-dag:focus-visible { outline: none; }
.kal-dag:focus-visible .kal-num { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Een nieuwe week of maand schuift binnen vanaf de kant waar je heen ging. */
@keyframes kal-in-vooruit { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes kal-in-terug { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
.kal .schuif-vooruit { animation: kal-in-vooruit .22s cubic-bezier(.2, .7, .2, 1); }
.kal .schuif-terug { animation: kal-in-terug .22s cubic-bezier(.2, .7, .2, 1); }

/* Werkbalk: Agenda | Tabel, en compacte filters als pillen. */
.wk-balk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.wk-balk .seg-opt span { min-height: 44px; }
.wk-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.wk-filter { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding-left: 14px; border: 1.5px solid var(--color-neutral-300); border-radius: 999px; background: var(--color-surface); cursor: pointer; }
.wk-filter.aan { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.wk-filter:focus-within { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.wk-filter-label { font-size: 12px; color: var(--color-neutral-700); white-space: nowrap; }
.wk-filter select { appearance: none; -webkit-appearance: none; min-height: 44px; padding: 0 34px 0 6px; border: 0; background: transparent; color: var(--color-text); font: 600 13.5px var(--font-kop); cursor: pointer; outline: none; }
.wk-filter::after { content: ''; position: absolute; right: 15px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-right: 2px solid var(--color-neutral-600); border-bottom: 2px solid var(--color-neutral-600); transform: rotate(45deg); pointer-events: none; }
.wk-archief { min-height: 44px; margin: 0; padding: 0 6px; }
.wk-filterknop { display: none; }
.wk-filtertel { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--color-topbar, #0B2C1E); color: var(--chroom-accent, var(--kalk)); font: 600 11px var(--font-mono); }
@media (max-width: 899px) {
  .wk-filterknop { display: inline-flex; margin-left: auto; }
  .wk-balk:not(.filters-open) .wk-filters { display: none; }
  .wk-filters { flex-basis: 100%; margin-left: 0; }
}

/* Indeling: op de gsm plakt de strook onder de bovenbalk (in een band in de
   kleur van de pagina, zodat de lijst er netjes onder verdwijnt); vanaf
   900 px de maandkalender links in een plakkende kaart, de agenda rechts. */
.wk-agenda { display: flex; flex-direction: column; gap: var(--space-3); }
.wk-lijst { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.wk-strookvak { position: sticky; top: calc(var(--nav-h, 0px) + var(--pil-h, 0px)); z-index: 30; margin-top: -8px; padding: 8px 0 22px; background: var(--color-bg); }
/* In het lichte thema dezelfde grond als de pagina (de zachte gloed bovenaan),
   zodat de band en de plakkende dagkoppen niet als strook opvallen. */
body:not(.donker) .wk-strookvak, body:not(.donker) .ag-kop { background: radial-gradient(90% 40% at 50% 0%, rgba(27,169,76,.06), transparent 70%) fixed, var(--color-bg); }
.wk-strook.card { position: relative; gap: 2px; padding: 4px 6px 14px; border-color: var(--color-neutral-200); border-radius: var(--r-lg); box-shadow: var(--schaduw-2); }
.wk-strook .kal-titel { font-size: 16px; }
.wk-strook.open .kal-legende { margin-bottom: 4px; }
/* 'Maand' hangt als een lipje onder de strook; het tikdoel is 44 px hoog. */
.wk-tab { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); z-index: 1; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--color-text); font: 600 12.5px var(--font-kop); cursor: pointer; }
.wk-tab::before { content: ''; position: absolute; inset: 7px 0; z-index: -1; border: 1px solid var(--color-neutral-200); border-radius: 999px; background: var(--color-surface); box-shadow: 0 6px 14px -10px rgba(6,24,15,.5); }
.wk-tab svg { transform: rotate(-90deg); transition: transform .2s; }
.wk-strook.open .wk-tab svg { transform: rotate(90deg); }
.wk-tab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.wk-kalkaart.card { gap: 0; padding: 10px 12px 16px; }
.wk-cijfers.card { flex-direction: row; justify-content: space-between; gap: 8px; padding: 14px 18px; }
.wk-cijfer { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wk-cijfer b { font-family: var(--font-kop); font-size: 22px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.wk-cijfer span { font-size: 11.5px; line-height: 1.3; color: var(--color-neutral-700); }
@media (min-width: 900px) {
  .wk-strookvak { display: none; }
  .wk-agenda { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
  /* 1.1.92: Wedstrijden zonder kalender (die staat in de tab Kalender): de lijst over de volle breedte. */
  .wk-agenda.wk-zonder-kal { grid-template-columns: minmax(0, 1fr); }
  /* 'Septembre 2026' naast 'Aujourd’hui' past zo ook. */
  .wk-kalkaart .kal-titel { font-size: 16px; padding-left: 4px; }
  .wk-kalkaart .kal-vandaag { padding: 0 12px; }
  .wk-kalvak { position: sticky; top: calc(var(--nav-h, 0px) + var(--space-4)); display: flex; flex-direction: column; gap: var(--space-3); }
}
@media (max-width: 899px) { .wk-kalvak { display: none; } }

/* De agenda: per dag een rustige kop die blijft plakken, dan de items. */
.ag-dag { display: flex; flex-direction: column; gap: 8px; scroll-margin-top: calc(var(--nav-h, 0px) + var(--pil-h, 0px) + var(--wk-strook-h, 0px) + 4px); }
.ag-kop { position: sticky; top: calc(var(--nav-h, 0px) + var(--pil-h, 0px) + var(--wk-strook-h, 0px)); z-index: 5; display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; margin: 0; padding: 8px 2px 6px; background: var(--color-bg); font-family: var(--font-body); font-size: 13.5px; font-weight: 500; line-height: 1.35; letter-spacing: 0; text-transform: none; color: var(--color-neutral-700); }
.ag-kop b { font-family: var(--font-kop); font-weight: 700; color: var(--color-text); }
.ag-kop-sep { color: var(--color-neutral-500); }
.ag-dag.is-vandaag .ag-kop b { color: var(--soort-wedstrijd-tekst); }
/* De dag die je koos (niet vandaag): een rustig streepje voor de kop. */
.ag-dag.gekozen .ag-kop::before { content: ''; flex: none; width: 4px; height: 16px; margin-right: 2px; border-radius: 2px; background: var(--color-topbar, #0B2C1E); }
.ag-items { display: flex; flex-direction: column; gap: 8px; }
.ag-scheiding { display: flex; align-items: center; gap: 12px; margin: var(--space-3) 0 calc(var(--space-2) * -1); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--color-neutral-700); }
.ag-scheiding::before, .ag-scheiding::after { content: ''; flex: 1; height: 1px; background: var(--color-neutral-300); }
.ag-rust { margin: 0; font-size: 13.5px; color: var(--color-neutral-700); }
.ag-ouder.btn { align-self: center; min-height: 44px; }

/* Een item: het uur met een smalle kleurbalk, de wapens en de ploegen, de
   meta eronder; rechts de uitslag, de verslagen en de opdrachtchip. Wat nog
   komt kleurt zacht in zijn soort; wat gespeeld is, staat op wit. */
.ag-item { --k: var(--soort-wedstrijd); --k-tekst: var(--soort-wedstrijd-tekst); position: relative; display: flex; flex-direction: column; gap: 12px; padding: 12px 14px 12px 12px; border: 1px solid color-mix(in srgb, var(--k) 22%, var(--color-neutral-200)); border-radius: var(--r-md); background: color-mix(in srgb, var(--k) 7%, var(--color-surface)); box-shadow: var(--schaduw-1); }
.ag-item[data-soort="tornooi"] { --k: var(--soort-tornooi); --k-tekst: var(--soort-tornooi-tekst); }
.ag-item[data-soort="opdracht"] { --k: var(--soort-opdracht); --k-tekst: var(--soort-opdracht-tekst); }
.ag-item[data-toestand="gespeeld"] { background: var(--color-surface); border-color: var(--color-neutral-200); }
.ag-rij { position: relative; display: grid; grid-template-columns: 50px 3px minmax(0, 1fr) auto auto; grid-template-areas: "tijd balk inhoud rechts hoek"; column-gap: 12px; align-items: start; }
/* Een rij zonder eigen knoppen is in haar geheel een tikdoel: een knop over
   de hele kaart (tot aan de rand), ⋯ ligt erboven. */
.ag-doel { position: absolute; inset: -12px -14px -12px -12px; z-index: 0; padding: 0; border: 0; border-radius: var(--r-md); background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ag-doel:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.ag-tijd { grid-area: tijd; padding-top: 1px; font-family: var(--font-mono); font-size: 14px; font-weight: 600; line-height: 1.4; font-variant-numeric: tabular-nums; color: var(--k-tekst); }
/* Zonder uur: een rustig streepje, in elke taal even breed. */
.ag-tijd.geenuur { font-weight: 500; color: var(--color-neutral-600); }
.ag-balk { grid-area: balk; align-self: stretch; min-height: 36px; border-radius: 3px; background: var(--k); }
.ag-inhoud { grid-area: inhoud; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ag-titel { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ag-wapens { display: inline-flex; flex: none; }
.ag-wapens > * + * { margin-left: -7px; }
.ag-trofee { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; background: color-mix(in srgb, var(--k) 16%, var(--color-surface)); color: var(--k-tekst); }
.ag-naam { min-width: 0; font-family: var(--font-kop); font-size: 15.5px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: var(--color-text); overflow-wrap: anywhere; }
.ag-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; font-size: 12.5px; color: var(--color-neutral-700); }
.ag-sep { color: var(--color-neutral-500); }
.ag-deel { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }
.ag-status { font-size: 12.5px; font-style: italic; color: var(--color-neutral-700); }
/* Waar je op moet letten: een zacht vlak in de kleur van de opdracht, met de
   stip van de chip. Geen tweede streep naast de kleurbalk. Ook op Vandaag. */
.ag-aandacht { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; padding: 8px 11px 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--soort-opdracht) 10%, var(--color-surface)); font-size: 13px; line-height: 1.45; color: var(--color-text); }
.ag-aandacht::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: 7px; border-radius: 50%; background: var(--soort-opdracht); }
.ag-item[data-soort="opdracht"] .ag-aandacht { background: color-mix(in srgb, var(--color-surface) 78%, transparent); }
.ag-rechts { grid-area: rechts; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ag-uitslag { padding: 2px 10px; border: 1px solid var(--color-neutral-300); border-radius: 999px; background: var(--color-neutral-100); font-family: var(--font-mono); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--color-text); }
.ag-tel { font-size: 12px; white-space: nowrap; color: var(--color-neutral-700); }
.ag-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border: 1px solid color-mix(in srgb, var(--soort-opdracht) 35%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--soort-opdracht) 12%, var(--color-surface)); color: var(--soort-opdracht-tekst); font-size: 12px; font-weight: 600; white-space: nowrap; }
.ag-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--soort-opdracht); }
.ag-chip.klaar { background: transparent; border-color: color-mix(in srgb, var(--color-accent) 40%, transparent); color: var(--color-accent-tekst, var(--color-accent)); padding-left: 7px; }
.ag-chip.klaar::before { content: none; }
.ag-chip.grijs { border-color: var(--color-neutral-300); background: transparent; color: var(--color-neutral-700); }
.ag-chip.grijs::before { background: var(--color-neutral-500); }
/* Het pijltje van een tornooirij: op elke breedte, en donker genoeg (3:1). */
.ag-pijl { display: inline-grid; place-items: center; width: 34px; height: 44px; color: var(--color-neutral-600); }
.ag-pijl svg { transform: rotate(180deg); }
.ag-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-left: 77px; }
.ag-acties .btn { min-height: 44px; padding: 0 16px; }
.ag-acties .ag-meer { margin-left: auto; }
.ag-shortlist { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--color-neutral-200); }
.ag-shortlist-leeg { font-size: 13px; color: var(--color-neutral-700); }

/* Een lege gekozen dag: gestippeld, met 'Nieuwe wedstrijd op deze dag'. */
.ag-leeg { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 14px 14px 16px; border: 1.5px dashed var(--color-neutral-300); border-radius: var(--r-md); background: color-mix(in srgb, var(--color-surface) 70%, transparent); }
.ag-leeg-tekst { font-size: 14px; color: var(--color-neutral-700); }
.ag-leeg-knop.btn { min-height: 44px; gap: 8px; }
.ag-plus { font-size: 18px; font-weight: 500; line-height: 1; }

/* Het ⋯-menu: 44 px per keuze, Verwijderen apart en in rood. */
.ag-meer { position: relative; flex: none; }
.ag-meer-knop.btn { width: 44px; min-width: 44px; padding: 0; font-size: 20px; line-height: 1; letter-spacing: 0; }
.ag-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 70; min-width: 236px; display: flex; flex-direction: column; gap: 2px; padding: 6px; border: 1px solid var(--color-neutral-200); border-radius: var(--r-md); background: var(--color-surface); box-shadow: 0 22px 44px -20px rgba(6,24,15,.5), 0 2px 6px rgba(6,24,15,.06); transform-origin: top right; animation: ag-menu-in .14s ease-out; }
.ag-menu[hidden] { display: none; }
.ag-menu.omhoog { top: auto; bottom: calc(100% + 6px); transform-origin: bottom right; }
.ag-menu-item { min-height: 44px; display: flex; align-items: center; padding: 0 12px; border: 0; border-radius: calc(var(--r-md) - 4px); background: transparent; color: var(--color-text); font: inherit; font-size: 14.5px; font-weight: 600; text-align: left; cursor: pointer; }
.ag-menu-item:hover, .ag-menu-item:focus-visible { outline: none; background: var(--color-neutral-100); box-shadow: inset 3px 0 0 var(--color-accent); }
.ag-menu-item.gevaar { color: #B42318; }
.ag-menu-item.gevaar:hover, .ag-menu-item.gevaar:focus-visible { background: #FEF0EE; box-shadow: inset 3px 0 0 #D92D20; }
.ag-menu-scheiding { height: 1px; margin: 4px 8px; background: var(--color-neutral-200); }
@keyframes ag-menu-in { from { opacity: 0; transform: translateY(-4px) scale(.97); } to { opacity: 1; transform: none; } }

@media (max-width: 720px) {
  .ag-item { gap: 12px; padding: 12px; }
  .ag-rij { grid-template-columns: 44px 3px minmax(0, 1fr) auto; grid-template-areas: "tijd balk inhoud hoek" "tijd balk rechts rechts"; column-gap: 10px; }
  .ag-doel { inset: -12px; }
  .ag-tijd { font-size: 13px; }
  .ag-rechts { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; margin-top: 8px; }
  .ag-rechts:empty { display: none; }
  .ag-acties { padding-left: 0; gap: 8px; }
  .ag-acties .btn { padding: 0 14px; }
  .ag-acties .btn-primary { flex: 1 1 auto; justify-content: center; }
}

/* Donker */
body.donker .wk-strook.card, body.donker .wk-tab::before, body.donker .wk-filter, body.donker .kal-vandaag::before { border-color: rgba(255,255,255,.14); }
body.donker .kal-vandaag::before { background: transparent; }
body.donker .kal-pijl:hover { background: rgba(255,255,255,.07); }
body.donker .wk-dag[aria-pressed="true"] .wk-pil, body.donker .kal-dag.gekozen .kal-num { background: var(--chroom-accent, var(--kalk)); color: var(--color-topbar, #062015); }
body.donker .ag-dag.gekozen .ag-kop::before { background: var(--kalk); box-shadow: none; }
body.donker .kal-legende, body.donker .ag-shortlist { border-color: rgba(255,255,255,.1); }
body.donker .ag-scheiding::before, body.donker .ag-scheiding::after { background: rgba(255,255,255,.16); }
body.donker .ag-item { border-color: color-mix(in srgb, var(--k) 30%, rgba(255,255,255,.08)); background: color-mix(in srgb, var(--k) 9%, var(--color-surface)); }
body.donker .ag-item[data-toestand="gespeeld"] { border-color: rgba(255,255,255,.1); background: var(--color-surface); }
body.donker .ag-uitslag { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.06); }
body.donker .ag-leeg { border-color: rgba(255,255,255,.2); }
body.donker .ag-menu { border-color: rgba(255,255,255,.12); box-shadow: 0 22px 44px -18px rgba(0,0,0,.8); }
body.donker .ag-menu-item:hover, body.donker .ag-menu-item:focus-visible { background: rgba(255,255,255,.07); }
body.donker .ag-menu-item.gevaar { color: #FF9C8F; }
body.donker .ag-menu-item.gevaar:hover, body.donker .ag-menu-item.gevaar:focus-visible { background: rgba(255,120,100,.12); }

@media (prefers-reduced-motion: reduce) {
  .kal .schuif-vooruit, .kal .schuif-terug, .ag-menu { animation: none; }
  .wk-pil, .kal-num, .wk-tab svg, .kal-vandaag, .kal-pijl { transition: none; }
}
/* einde 1.1.73 · K */

/* ---- 1.1.73 · hersteller ---- */
/* Rustige rijen in de agenda: alleen vandaag en de eerstvolgende wedstrijd
   hebben een hoofdknop, een andere rij tik je in haar geheel aan, ⋯ staat
   rechtsboven in de rij. De strook op de gsm wordt compact zodra ze plakt
   (.vast). De shortlist is een lijst in plaats van een brede tabel.
   Tornooien sluit aan: tornooikleur op het blaadje, één hoofdknop en ⋯. */

/* Voor de schermlezer, niet voor het oog. */
.ag-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* De hoek rechtsboven: ⋯ als rustige ronde knop (44 px), of het pijltje. */
.ag-hoek { grid-area: hoek; position: relative; display: flex; align-items: flex-start; margin: -10px -8px -10px 0; }
.ag-hoek .ag-meer-knop.btn { width: 44px; height: 44px; min-height: 44px; border: 0; border-radius: 999px; background: transparent; box-shadow: none; color: var(--color-neutral-700); }
@media (hover: hover) { .ag-hoek .ag-meer-knop.btn:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); } }
.ag-hoek .ag-meer.open .ag-meer-knop.btn { background: color-mix(in srgb, var(--color-text) 9%, transparent); color: var(--color-text); }
.ag-hoek .ag-meer-knop.btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* De rij als één tikdoel: een zachte rand bij hover, even indrukken bij een tik. */
.ag-item.tikbaar { transition: border-color .14s, box-shadow .14s, transform .12s; }
@media (hover: hover) { .ag-item.tikbaar:hover { border-color: color-mix(in srgb, var(--k) 45%, var(--color-neutral-200)); box-shadow: var(--schaduw-2); } }
.ag-item.tikbaar:has(> .ag-rij > .ag-doel:active) { transform: scale(.992); }
/* '2 verslagen ⌄' bij een gespeelde wedstrijd: de rij klapt de shortlist open. */
.ag-tel { display: inline-flex; align-items: center; gap: 4px; }
.ag-open { display: inline-grid; place-items: center; color: var(--color-neutral-700); transform: rotate(-90deg); transition: transform .16s; }
.ag-item.open .ag-open { transform: rotate(90deg); }

/* De strook plakt: de kop (maand, Vandaag, pijlen) valt weg, de dagen worden
   lager en de maand staat in het lipje. Vegen en PageUp/PageDown wisselen
   nog steeds van week; het lipje opent de maand. */
.kal-vandaag.rust { visibility: hidden; }
.wk-tab-maand { display: none; }
.wk-tab-maand::first-letter { text-transform: uppercase; }
.wk-strookvak.vast { padding-top: 6px; }
.wk-strookvak.vast .wk-strook.card { padding-top: 8px; }
.wk-strookvak.vast .kal-kop { display: none; }
.wk-strookvak.vast .wk-dag { gap: 4px; padding: 0 0 2px; }
.wk-strookvak.vast .wk-pil { height: 46px; gap: 3px; }
.wk-strookvak.vast .wk-tab-woord { display: none; }
.wk-strookvak.vast .wk-tab-maand { display: inline-block; }

/* De shortlist als gerangschikte lijst: elke rij opent het profiel. */
/* De kop: de titel links, de kolomkoppen één keer rechts, boven de cijfers. */
.sl-kop { display: grid; grid-template-columns: minmax(0, 1fr) 76px 76px; align-items: end; gap: 12px; padding: 0 8px 2px 0; }
.sl-kop .card-kicker { margin: 0; }
.sl-kolom { text-align: right; font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-700); white-space: nowrap; }
.sl-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sl-lijst li + li { border-top: 1px solid var(--color-neutral-200); }
.sl-rij { position: relative; width: 100%; min-height: 52px; display: grid; grid-template-columns: 30px minmax(0, 1fr) 76px 76px; align-items: center; gap: 12px; padding: 6px 8px 6px 16px; border: 0; border-radius: 10px; background: transparent; color: var(--color-text); font: inherit; text-align: left; cursor: pointer; }
.sl-rij::before { content: ''; position: absolute; left: 4px; top: 12px; bottom: 12px; width: 4px; border-radius: 2px; background: var(--sl-kleur, var(--color-neutral-300)); }
@media (hover: hover) { .sl-rij:hover { background: var(--color-neutral-100); } }
.sl-rij:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.sl-nr { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-neutral-700); }
.sl-tekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sl-tekst b { font-family: var(--font-kop); font-size: 14.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-tekst span { font-size: 12.5px; color: var(--color-neutral-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-cijfer { display: flex; justify-content: flex-end; align-items: center; min-width: 0; }
.sl-cijfer b { font-family: var(--font-mono); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sl-p b { padding: 1px 9px; border-radius: 999px; background: var(--color-topbar, #0B2C1E); color: var(--chroom-accent, var(--kalk)); }
/* Op de gsm alleen het potentieel (de titel zegt 'op potentieel'). */
@media (max-width: 720px) {
  .sl-rij { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; }
  .sl-kop { grid-template-columns: minmax(0, 1fr); }
  .sl-h, .sl-kolom { display: none; }
}

/* Tornooien sluit aan bij de agenda: een komend tornooi in de tornooikleur,
   één hoofdknop en ⋯ rechts. Bezig blijft donkergroen met kalk (zoals vandaag). */
.tk-kaart .dt-komend::before { background: var(--soort-tornooi); }
.tk-kaart .dt-komend .dt-maand { color: var(--soort-tornooi-tekst); }
.tk-pil:not(.tk-pil-bezig) { background: color-mix(in srgb, var(--soort-tornooi) 13%, var(--color-surface)); color: var(--soort-tornooi-tekst); }
.tk-knoppen .ag-meer { margin-left: auto; }
.tk-knoppen .ag-meer-knop.btn { min-height: 44px; }
/* 1.1.91: de ⋯ in het spelersdossier staat rechts op de knoppenregel, ook als die op de gsm over meer regels loopt:
   het menu hangt rechts vast en valt anders links buiten het scherm (zoals .tk-knoppen). */
.dk-acties .ag-meer { margin-left: auto; }
.dk-acties .ag-meer-knop.btn { min-height: 44px; }
.sv-venster p { margin: 0 0 var(--space-2); }
.sv-venster ul { margin: 0 0 var(--space-2); padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }

/* Donker */
body.donker .ag-dag.gekozen .ag-kop::before { background: var(--kalk); }
body.donker .ag-hoek .ag-meer-knop.btn { color: rgba(255,255,255,.78); }
body.donker .ag-open { color: rgba(255,255,255,.72); }
body.donker .ag-pijl { color: rgba(255,255,255,.62); }
body.donker .ag-tijd.geenuur { color: rgba(255,255,255,.6); }
body.donker .ag-aandacht { background: color-mix(in srgb, var(--soort-opdracht) 16%, var(--color-surface)); }
body.donker .ag-item[data-soort="opdracht"] .ag-aandacht { background: rgba(255,255,255,.05); }
body.donker .sl-lijst li + li { border-color: rgba(255,255,255,.08); }
@media (hover: hover) { body.donker .sl-rij:hover { background: rgba(255,255,255,.06); } }
body.donker .sl-p b { background: var(--chroom-accent, var(--kalk)); color: var(--color-topbar, #062015); }
body.donker .sl-kolom { color: rgba(255,255,255,.7); }
body.donker .tk-pil:not(.tk-pil-bezig) { background: color-mix(in srgb, var(--soort-tornooi) 18%, transparent); color: var(--soort-tornooi-tekst); }

@media (prefers-reduced-motion: reduce) {
  .ag-item.tikbaar, .ag-open { transition: none; }
  .ag-item.tikbaar:has(> .ag-rij > .ag-doel:active) { transform: none; }
}
/* einde 1.1.73 · hersteller */

/* ---- 1.1.74 ---- */
/* Noteren: 'Wissel van wedstrijd' staat bij de naam van de wedstrijd — rechts
   in de kop op de laptop, rechts naast het aantal spelers op de gsm. Eronder een
   rustige rij randknoppen (op de gsm twee per rij, het opstellingsblad over
   de volle breedte), onderaan 'Wedstrijd afronden' als hoofdknop. */
.am-kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.am-ander { min-height: 44px; gap: 8px; white-space: nowrap; }
.am-bij .blad-knop { min-height: 44px; }
/* 1.1.76 — de wisselknop is gevuld, de labels ernaast niet.
   In 1.1.74 kreeg deze knop een rand en bleef hij onzichtbaar: .btn heeft een
   rand van --color-neutral-300 (#C9CFC3) en .btn-secondary een vlak van
   --color-surface (#ffffff), op een .card die óók wit is. Dat is 1,59:1, waar
   3:1 de ondergrens is voor de omtrek van een bedienknop, en --schaduw-1 staat
   op none — er was dus letterlijk geen knopvorm, alleen tekst. Tegelijk kreeg
   het label ernaast wél een vulling: het niet-aanklikbare 'x spelers' woog
   zwaarder dan de enige knop in de rij.
   Nu andersom. In het licht is de vulling dezelfde als die van de gekozen kant
   van een keuzeschakelaar (.seg-opt input:checked + span): de donkere clubkleur
   van de bovenbalk, met #F4F5F2 erop. Die schakelaar staat op ditzelfde scherm
   vlak boven de kaart, dus de twee donkere vlakken horen dezelfde kleur te
   hebben — een zwarte knop naast een donkergroene schakelaar leest als een
   vreemd element.
   In het donker kan dat niet: daar is --color-topbar juist de donkerste tint
   en zou een donkere vulling exact dezelfde fout maken als de rand van 1.1.74.
   Daar draait hij dus om, naar --color-text (licht) op --color-surface (donker).
   Beide kanten blijven ruim boven 12:1.
   Hover en actief houden dezelfde vulling: .btn-secondary zou er anders zijn
   eigen donkere hover overheen zetten, wat in het donker onleesbaar wordt. De
   lichte sprong van .btn-secondary:hover blijft wel staan als teken van leven.
   De tekst is --chroom-tekst en niet een vaste lichte kleur: store.js kiest die
   per club, wit of inkt, getoetst op 4,5:1 tegen de balkkleur (chroomTokens).
   Een club met een lichte balk krijgt daar donkere tekst; een vaste #F4F5F2
   zou dan wit op licht zijn. De bovenbalk zelf werkt op dezelfde manier.
   De rand is --color-text en niet de balkkleur zelf: bij een lichte clubbalk
   (getest met #F2E14A) leest de tekst dan wel, maar haalt het vlak nog maar
   1,34:1 tegen de witte kaart en verdwijnt de vórm van de knop. Een rand in de
   inktkleur houdt de omtrek zichtbaar bij élke clubkleur; bij de donkere
   standaardbalk valt ze gewoon samen met de vulling. */
.am-ander,
.am-ander:hover,
.am-ander:active {
  background: var(--color-topbar, var(--color-text));
  border-color: var(--color-text);
  color: var(--chroom-tekst, #F4F5F2);
}
body.donker .am-ander,
body.donker .am-ander:hover,
body.donker .am-ander:active {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-surface);
}
.am-kop .tag { border-color: var(--color-neutral-400); background: transparent; color: var(--color-neutral-700); }
/* Op de gsm stonden hier vier knoppen die op elkaar leken: de ploeglijst en
   het opstellingsblad staan daar samen achter 'Opstelling ⋯', op de laptop
   blijven het gewone knoppen (hersteller 1.1.74). */
.am-meer { display: none; }
@media (max-width: 720px) {
  .am-kop { flex-basis: 100%; margin-left: 0; }
  .am-kop .am-ander { margin-left: auto; }
  .am-bij { display: flex; }
  .am-bij > .btn, .am-bij > .am-meer { flex: 1 1 0; min-width: 0; }
  .am-bij > .btn { justify-content: center; text-align: center; white-space: normal; }
  .am-bij .am-meer-knop { width: 100%; justify-content: center; }
  .am-breed { display: none; }
  .am-meer { display: block; }
}

/* Beheer: wat een hoofdscout niet mag, staat op slot — met de reden erbij —
   in plaats van een knop die de server daarna weigert. */
/* Het slotje is een knop, geen plaatje: zo staat het in de tab-volgorde en
   geven Enter en spatie dezelfde melding als een tik. 44 px als tikdoel, en
   donkerder dan --color-neutral-500 (dat haalde in het licht maar 2,4:1) —
   hersteller 1.1.74. */
.dt-vink.dt-slot { cursor: help; width: 44px; padding: 0 !important; }
.dt-slot-icoon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--color-neutral-600); cursor: help; vertical-align: middle; }
.dt-slot-icoon:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.dt-selectie .dt-nietmee { font-size: 12.5px; color: rgba(255,255,255,.8); }
/* Een uitgeschakelde knop op .4 leest als kapot; .55 in de kleuren van de balk
   zelf, en de knop zegt in haar title waarom ze uit staat (hersteller 1.1.74). */
.dt-selectie .btn[disabled] { opacity: .55; }
.dt-selectie .btn-primary[disabled] { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.24); color: #F4F5F2; }
/* Op de gsm bestaat geen tooltip: het slotje in de lijst draagt het woord
   'Op slot' en vertelt bij een tik de hele reden (hersteller 1.1.74). */
.bh-slot { display: inline-flex; align-items: center; gap: 4px; flex: none; min-height: 44px; margin: -10px 0; padding: 0 2px; border: 0; background: transparent; color: var(--color-neutral-600); font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; cursor: pointer; }
.bh-slot:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--r-sm); }
.bh-lijstmeta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.bh-slotregel { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: var(--r-md); background: var(--color-neutral-100); border: 1px solid var(--color-neutral-200); color: var(--color-neutral-700); font-size: 13px; line-height: 1.45; }
.bh-slotregel svg { flex: none; margin-top: 1px; }
.bh-lees { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bh-leeswaarde { font-weight: 600; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.bh-leesnoot { font-size: 12px; color: var(--color-neutral-600); }
.bh-uitn-slot, .bh-rij-slot { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 12.5px; color: var(--color-neutral-600); }

body.donker .bh-slotregel { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); color: rgba(255,255,255,.8); }
body.donker .dt-slot-icoon, body.donker .bh-slot { color: rgba(255,255,255,.55); }
body.donker .bh-leesnoot, body.donker .bh-uitn-slot, body.donker .bh-rij-slot { color: rgba(255,255,255,.65); }
/* Ook in het donker blijven de labels leeg en is de knop het enige gevulde
   ding in de rij (1.1.76); daar is de vulling van de knop juist de lichte. */
body.donker .am-kop .tag { background: transparent; border-color: var(--color-neutral-400); color: var(--color-text); }
/* einde 1.1.74 */

/* ---- 1.1.75 · kolommen ---- */
/* Kaarten van ongelijke hoogte naast elkaar zonder gaten (ui.js kolommen()).
   De houder is een raster van gelijke kolommen; het aantal zet de bouwsteen
   in data-kolommen, en de kaarten zelf verdeelt ze over .kol-kolom's op hun
   gemeten hoogte. Zo heeft een korte kaart geen gat onder zich en springt de
   derde kaart niet naar een nieuwe rij. Dezelfde tussenruimte als de rasters
   van vroeger (--space-4); de kaarten worden niet uitgerekt (align start).
   Er beweegt niets (geen overgang), dus ook niets voor prefers-reduced-motion. */
.kolommen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.kolommen[data-kolommen="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kolommen[data-kolommen="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kolommen[data-kolommen="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kol-kolom { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.kolommen > .card, .kol-kolom > .card { min-width: 0; }
/* Instellingen: het oude raster met minmax(380px) op 980 px en breder wordt
   door de bouwsteen vervangen (min 330 zodat er naast de zijbalk twee kolommen
   passen); tot de eerste verdeling staan de kaarten gewoon onder elkaar. */
.inst-kaarten.kolommen { grid-template-columns: minmax(0, 1fr); }
.inst-kaarten.kolommen[data-kolommen="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Het spelersoverzicht, het clubprofiel (Overzicht en Stats) en Beheer › Club
   gebruiken dezelfde houder. Voor wie zonder JavaScript kijkt (afdruk) blijft
   het één kolom. */
@media print { .kolommen, .kolommen[data-kolommen] { grid-template-columns: minmax(0, 1fr); } .kol-kolom { display: contents; } }
/* einde 1.1.75 · kolommen */

/* ---- 1.1.77 · de spelerslijst in stappen ---- */
/* De eerste zestig rijen staan er meteen; deze knop haalt de volgende zestig op
   en doet dat ook vanzelf zodra je hem nadert (view-spelers.js stapsgewijs()).
   Over de volle breedte, rustig: het is geen actie maar het einde van wat al
   getekend is. Geen anker voor de browser (overflow-anchor): anders houdt die bij
   het bijladen de knop in beeld in plaats van de rij die je las, en sla je
   ongemerkt zestig spelers over. */
.lijst-meer { display: flex; width: 100%; justify-content: center; margin-top: var(--space-2); color: var(--color-neutral-700); overflow-anchor: none; }
.lijst-meer-tel { font-variant-numeric: tabular-nums; opacity: .7; }
/* einde 1.1.77 · de spelerslijst in stappen */

/* ---- 1.1.78 · weekrooster: rustiger raster, kaarten op de gsm, toewijzen zonder wachten ---- */
/* De kop: wat je ziet ('Komende 7 dagen' en de periode) links, bladeren rechts. */
.wr-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.wr-kop-links { display: grid; gap: 4px; min-width: 0; }
.wr-titel { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.wr-titel b { font-family: var(--font-kop); font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.wr-blader { display: flex; align-items: center; gap: 6px; }
.wr-pijl { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--color-neutral-300); background: var(--color-surface, #fff); color: var(--color-text); font: inherit; font-size: 19px; line-height: 1; padding: 0 0 2px; cursor: pointer; }
.wr-pijl:hover:not(:disabled) { border-color: var(--color-neutral-500); }
.wr-pijl:disabled { opacity: .35; cursor: default; }

/* Vaste kolommen: de wedstrijd krijgt een derde, de scouts delen de rest gelijk. Zo verspringt er niets wanneer er een
   pil of een statusregel bijkomt. Met veel scouts wordt de tabel breder dan het vak (min-width uit view-opdrachten.js)
   en schuif je opzij; de wedstrijd blijft dan staan. */
.wr-tabel { table-layout: fixed; }
.wr-tabel th:first-child { width: 34%; }
.wr-tabel td.wr-cel { white-space: normal; }

/* Een wedstrijd zonder scout: 'niemand' staat vooraan, niet achteraan de rij. */
.wr-niemand { margin-right: 8px; font-size: 10px; padding: 1px 8px; vertical-align: 1px; }

/* Een dag zonder wedstrijd: één dunne regel, met de knop om er een te plannen. */
.wr-tabel tr.wr-dagkop.wr-geen th { padding-top: 7px; padding-bottom: 7px; }
.wr-tabel tbody tr.wr-dagkop.wr-geen:first-child th { padding-top: 4px; }
.wr-dagkop.wr-geen .wr-dagnr { width: 24px; height: 24px; font-size: 11.5px; margin: 0 3px; color: var(--color-neutral-600); }
.wr-dagkop.wr-geen .wr-dagwoord { font-size: 13px; font-weight: 600; color: var(--color-neutral-600); }
.wr-dagkop.wr-geen.vandaag .wr-dagnr { color: var(--chroom-accent, var(--kalk)); }
.wr-dagkop.wr-geen.vandaag .wr-dagwoord { color: var(--color-text); }
.wr-dagleeg { font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--color-neutral-600); }
.wr-dagplus { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 2px 11px; border-radius: 999px; border: 1px dashed var(--color-neutral-400); background: transparent; color: var(--color-neutral-700); font: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0; cursor: pointer; }
.wr-dagplus:hover { border-color: var(--color-accent); border-style: solid; color: var(--color-text); }

/* Net gegeven: de pil staat er al, de mail is nog onderweg. Daarna wat de server ervan zegt; die regel dooft vanzelf. */
.wr-op.bezig, .wr-chip.bezig { border-style: dashed; cursor: default; }
.wr-op:disabled, .wr-chip:disabled { opacity: 1; }
.wr-mail { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; line-height: 1.2; color: var(--color-neutral-600); white-space: nowrap; }
.wr-cel .wr-mail { display: flex; justify-content: center; margin-top: 4px; }
.wr-mail.bezig i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: tk-puls 1.8s ease-out infinite; }
.wr-mail.ok { color: var(--color-accent-800, var(--color-accent)); animation: wr-mail-weg .6s ease 9s forwards; }
.wr-mail.ok::before { content: '✓'; font-weight: 700; }
.wr-mail.fout { color: var(--rood); white-space: normal; max-width: 150px; }
.wr-mail.fout::before { content: '!'; font-weight: 800; }
.wr-veel .wr-mail-tekst { display: none; }
@keyframes wr-mail-weg { to { opacity: 0; visibility: hidden; } }
body.donker .wr-mail.ok { color: var(--color-accent); }

/* De gsm: geen raster maar een kaart per wedstrijd, met wie er gaat. */
.wr-kaarten { display: grid; gap: var(--space-2); }
.wr-kaart { display: grid; gap: 5px; padding: 12px 14px; border: 1px solid var(--color-neutral-200); border-radius: var(--r-md); background: var(--color-surface, #fff); }
.wr-kaart-wanneer { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .02em; color: var(--color-neutral-600); }
.wr-kaart-wanneer::first-letter { text-transform: uppercase; }
.wr-kaart-titel { font-size: 15px; line-height: 1.3; }
.wr-kaart-titel b { font-family: var(--font-kop); font-weight: 700; }
.wr-kaart-wie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 5px; }
.wr-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 14px 4px 6px; border-radius: 999px; border: 1px solid var(--color-neutral-200); background: var(--color-surface, #fff); color: var(--color-text); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.wr-chip .ob-scout i { width: 30px; height: 30px; font-size: 11px; }
.wr-chip.laat { border-color: var(--rood); }
.wr-chip.klaar { border-color: var(--color-accent); }
.wr-chip .tag { font-size: 9px; padding: 1px 6px; }
.wr-plus-scout { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px dashed var(--color-neutral-400); background: transparent; color: var(--color-neutral-700); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.wr-plus-scout > span { font-size: 17px; line-height: 1; }
.wr-kaart-wie .btn-sm.ob-herinner { min-height: 36px; }
@media (max-width: 720px) {
  /* De pijlen rechts naast de titel, niet op een eigen regel eronder: de periode mag dan wel afbreken. */
  .wr-kop { flex-wrap: nowrap; align-items: flex-start; }
  .wr-kop-links { flex: 1; }
  .wr-blader { flex: none; }
  .wr-pijl { width: 44px; height: 44px; }
  .wr-titel b { font-size: 16px; }
}

/* Het zweefvak (ui.js): een klein venster dat aan een knop hangt. Boven de balk, onder een echt venster. */
.zweefvak { position: absolute; z-index: 950; width: min(340px, calc(100vw - 24px)); display: grid; gap: 10px; padding: 14px; border: 1px solid var(--color-neutral-200); border-radius: var(--r-md); background: var(--color-surface, #fff); color: var(--color-text); box-shadow: 0 22px 44px -20px rgba(6,24,15,.5), 0 2px 6px rgba(6,24,15,.06); transform-origin: top center; animation: ag-menu-in .14s ease-out; }
.zweefvak.boven { transform-origin: bottom center; }
.zweefvak:focus { outline: none; }
body.donker .zweefvak { border-color: rgba(255,255,255,.14); box-shadow: 0 22px 44px -18px rgba(0,0,0,.8); }
@media (prefers-reduced-motion: reduce) { .zweefvak { animation: none; } .wr-mail.ok { animation-duration: .01s; } }

/* 'Opdracht geven' in het klein: wie, welke wedstrijd, en wat er nog bij mag. Dezelfde opmaak in het blad op de gsm. */
.wr-snel-kop { display: grid; gap: 2px; }
.wr-snel-kop b { font-family: var(--font-kop); font-weight: 700; font-size: 16px; }
.wr-snel-kop span { font-size: 12.5px; color: var(--color-neutral-600); }
.wr-snel .field { margin: 0; }
.wr-snel-aandacht { min-height: 0; resize: vertical; }
@media (min-width: 721px) { .wr-snel-aandacht { font-size: 15px; } }
.wr-snel-acties { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dialog.wr-snel { display: grid; gap: 14px; }
.wr-kies { display: grid; gap: 6px; max-height: 42vh; overflow-y: auto; }
.wr-kies-rij { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 12px 6px 8px; border-radius: var(--r-md); border: 1px solid var(--color-neutral-200); background: var(--color-surface, #fff); color: var(--color-text); font: inherit; font-size: 14.5px; text-align: left; cursor: pointer; }
.wr-kies-rij .ob-scout i { width: 30px; height: 30px; font-size: 11px; }
.wr-kies-naam { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-kies-druk { font-size: 12px; color: var(--color-neutral-600); white-space: nowrap; }
.wr-kies-druk.druk { color: var(--color-text); font-weight: 600; }
.wr-kies-rij[aria-checked="true"] { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.wr-kies-rij:disabled { opacity: .5; cursor: default; }
/* einde 1.1.78 · weekrooster */

/* ---- 1.1.79 · rood dat ook in het donker leest ---- */
/* Rood als TEKST of RAND ('te laat', 'niemand', een dalend cijfer, Verwijderen) komt uit één token: #B3261E op licht,
   en het lichtere rood van het agendamenu op donker, waar #B3261E maar 2,6:1 haalde. Rode VLAKKEN met witte tekst
   (dicteren, de wachtwoordmeter) houden hun vaste rood. */
:root { --rood: #B3261E; }
body.donker { --rood: #FF9C8F; }
/* Twee randgevallen op 4,3:1: de kolomkop van het opdrachtenbord en het dagnummer van een lege dag in het rooster. */
.ob-kop { color: var(--color-neutral-700); }
.wr-dagkop.wr-geen .wr-dagnr, .wr-dagkop.wr-geen .wr-dagwoord { color: var(--color-neutral-700); }
/* einde 1.1.79 · rood */

/* ---- 1.1.80 · de app kan niet starten: geen antwoord en geen kopie op dit toestel ---- */
.startfout { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 32px 28px; text-align: center; background: #0B2C1E; color: #F4F5F2; }
.startfout-merk { font-size: 30px; margin-bottom: 10px; --lok-accent: #D8F45A; }
.startfout h1 { margin: 0; font-family: var(--font-kop); font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: #F4F5F2; }
.startfout p { margin: 0; max-width: 340px; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.78); }
.startfout .startfout-veilig { color: #D8F45A; }
.startfout .btn { margin-top: 10px; min-height: 48px; padding: 0 26px; }
/* einde 1.1.80 · startfout */

/* ---- 1.1.81 · Beheer: de club heeft nog geen beheerder ---- */
.bh-geenbeheerder { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--color-accent); background: var(--color-accent-100); }
.bh-geenbeheerder-tekst { flex: 1; min-width: 220px; display: grid; gap: 3px; font-size: 13.5px; line-height: 1.45; color: var(--color-text); }
.bh-geenbeheerder-tekst b { font-family: var(--font-kop); font-size: 15px; }
/* einde 1.1.81 · geen beheerder */

/* ---- 1.1.81 · dossier: waar hangt hij al aan; zoeker: 'nog n andere' ---- */
.dk-hangt { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dk-hangt .tag { font-size: 10.5px; }
.dk-hangt-team { cursor: pointer; font: inherit; font-size: 10.5px; background: transparent; }
.dk-hangt-team:hover { border-color: var(--color-accent); color: var(--color-text); }
.zoek-meer .menu-titel { color: var(--color-neutral-700); font-weight: 600; }
/* einde 1.1.81 · dossier en zoeker */

/* 1.1.82: 'Je tekst is nog niet verstuurd' — de vraag onderaan een venster met getypte tekst. */
.dialog-weg { position: sticky; bottom: 0; margin-top: var(--space-3); padding: var(--space-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); background: var(--color-neutral-100); border: 1px solid var(--color-neutral-300); border-radius: 14px; z-index: 3; box-shadow: 0 -6px 18px rgba(0,0,0,.08); }
.dialog-weg span { flex: 1 1 180px; font-size: 13.5px; font-weight: 600; }

/* 1.1.82: de tabel tekent honderd rijen en laadt de rest bij. */
.datatabel .table tr.dt-bijladen td { text-align: center; padding: 10px; overflow-anchor: none; }

/* 1.1.83: Klaarstaande wedstrijden — ingeklapte blokken 'Andere wedstrijden van de club' en 'Eerder'. */
.nv-klap { margin-bottom: var(--space-2); }
.nv-klap > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; padding: 10px 4px; font-size: 13.5px; font-weight: 600; color: var(--color-neutral-800); border-radius: var(--radius-md); }
.nv-klap > summary::-webkit-details-marker { display: none; }
.nv-klap > summary::before { content: '›'; display: inline-block; width: 12px; transition: transform .15s ease; color: var(--color-neutral-600); }
.nv-klap[open] > summary::before { transform: rotate(90deg); }
.nv-klap > summary:hover { background: var(--color-neutral-100); }
.nv-klap > summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.nv-klap-inhoud { padding-top: var(--space-2); }

/* 1.1.83: de balk 'Gekoppeld aan …' waarschuwt als de kaart bij een andere club speelt. */
.suggestbar.let-op { border-color: var(--rood); }
.suggestbar .sb-let-op { color: var(--rood); font-weight: 700; }

/* 1.1.83: spelers van de geplakte ploeglijst — lichte chips, nog zonder verslag. De ploegkleur staat als streep onderaan. */
.nv-lijst-kop { flex-basis: 100%; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--color-neutral-600); margin-top: var(--space-2); display: flex; align-items: center; gap: 6px; }
.sessionchip.nv-lijstchip { background: var(--color-surface); color: var(--color-text); border: 1px dashed var(--color-neutral-400); box-shadow: inset 0 -4px 0 var(--lc-bg, var(--color-neutral-300)); }
.sessionchip.nv-lijstchip:hover, .sessionchip.nv-lijstchip:focus-visible { border-style: solid; border-color: var(--color-accent); }
.sessionchip.nv-lijstchip .ini { font-weight: 700; }

/* 1.1.84: de balk van een aflopende proef — een uitnodiging met één knop. */
.planbalk.proef { background: var(--color-accent-100); color: var(--color-text); border-bottom-color: var(--color-accent); }
.planbalk .planbalk-knop { flex: 0 0 auto; font: inherit; font-weight: 700; font-size: 13px; padding: 7px 14px; border-radius: 999px; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; }
.planbalk .planbalk-knop:hover { background: rgba(0,0,0,.06); }
.planbalk .planbalk-knop:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.planbalk span.planbalk-ok { flex: 0 1 auto; font-weight: 600; }
@media (max-width: 720px) { .planbalk.proef, .planbalk.respijt { flex-wrap: wrap; } .planbalk.proef > span:first-child { flex-basis: 100%; } }

/* 1.1.84: 'Zet SPOTR op je startscherm' — één wegklikbare regel op Vandaag, alleen op een gsm in de browser. */
.install-regel { display: flex; align-items: stretch; gap: 4px; border: 1px solid var(--color-neutral-300); border-radius: var(--r-md); background: var(--color-surface); margin-bottom: var(--space-3); }
.install-tekst { flex: 1; min-width: 0; text-align: left; font: inherit; background: none; border: 0; padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; color: var(--color-text); }
.install-tekst b { font-size: 14px; }
.install-tekst span { font-size: 12.5px; color: var(--color-neutral-600); }
.install-weg { font: inherit; font-size: 20px; line-height: 1; background: none; border: 0; padding: 0 14px; cursor: pointer; color: var(--color-neutral-600); min-width: 44px; }
.install-tekst:focus-visible, .install-weg:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; border-radius: var(--r-md); }

/* 1.1.85: het logboek in Beheer › Club. */
.lb-lijst { display: flex; flex-direction: column; }
.lb-rij { display: grid; grid-template-columns: 132px 1fr auto; gap: 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--color-neutral-200); font-size: 13px; }
.lb-rij:first-child { border-top: 0; }
.lb-tijd { font-family: var(--font-mono); font-size: 11.5px; color: var(--color-neutral-600); white-space: nowrap; }
.lb-wat { min-width: 0; overflow-wrap: anywhere; }
.lb-detail { color: var(--color-neutral-600); }
.lb-wie { color: var(--color-neutral-700); font-size: 12px; text-align: right; }
@media (max-width: 720px) { .lb-rij { grid-template-columns: 1fr; gap: 2px; } .lb-wie { text-align: left; } }

/* ── 1.1.90 · geen werk kwijt, de juiste weg op de wedstrijddag ── */
/* C121: afgemeld terwijl er werk openstaat. De vaste band in de pil draagt een lange zin: op 390 px loopt die door op
   een tweede regel, uitgelijnd met de titel na het bolletje (9 px + 10 px tussenruimte). De hele band is een tikvlak
   van minstens 44 px. De kleuren blijven die van de gewone gele pil. */
.offline-pil.afgemeld { min-height: 44px; max-width: min(520px, calc(100% - 24px)); flex-wrap: wrap; row-gap: 2px; border-radius: 18px; }
.offline-pil.afgemeld span { flex: 1 1 100%; padding-left: 19px; }
/* C26: wat er wacht, met naam (hoogstens vier regels), in het paneel onder de pil. Gewone bolletjes; de
   tussenruimte per regel in plaats van flex, zodat de bolletjes in elke browser blijven staan. */
.offline-lijst { margin: 0; padding-left: 18px; }
.offline-lijst li { overflow-wrap: anywhere; }
.offline-lijst li + li { margin-top: 4px; }
/* C93: 'Hele tekst lezen' in het keuzevenster. Het blok neemt de volle breedte van de regel (li.conflict-regel is op
   een breed scherm een raster van drie kolommen). De link oogt als .hs-link en is 44 px hoog; het vak met beide
   volledige teksten scrolt zelf, zodat de knoppen in beeld blijven. Regelafbrekingen van de scout blijven staan. */
.conflict-heel { grid-column: 1 / -1; }
.conflict-heel > summary { display: inline-flex; align-items: center; min-height: 44px; list-style: none; cursor: pointer; color: var(--color-accent-tekst, var(--color-accent)); font-size: var(--t-meta, 12.5px); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.conflict-heel > summary::-webkit-details-marker { display: none; }
.conflict-heel > summary:hover { text-decoration-thickness: 2px; }
.conflict-heel > summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 4px; }
body.donker .conflict-heel > summary { color: var(--kalk, #D8F45A); }
.conflict-heel-vak { display: grid; gap: 2px; max-height: 40vh; overflow-y: auto; overscroll-behavior: contain; padding: 10px 12px; border: 1px solid var(--color-neutral-200); border-radius: var(--r-md); font-weight: 400; }
body.donker .conflict-heel-vak { border-color: rgba(255,255,255,.12); }
.conflict-heel-wie { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--color-neutral-600); }
.conflict-heel-tekst + .conflict-heel-wie { margin-top: 10px; }
.conflict-heel-tekst { white-space: pre-wrap; color: var(--color-text); }
/* C63/C94: de labels per regel ('Op je andere toestel', 'De versie van je club') passen niet in de kolom van 72 px
   (1.1.70). Op de gsm staat het label nu boven de waarde. */
@media (max-width: 520px) {
  .conflict-mijn, .conflict-hun { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
/* C10: 'Wie viel je op?' en Sluiten op één rij, Sluiten rechts. De knop krimpt niet en blijft minstens 44 x 44 px. */
.kz-titelrij { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.kz-titelrij .dialog-title { min-width: 0; }
.kz-sluit { flex: none; min-width: 44px; min-height: 44px; }
/* C10: 'Nog niemand — terug naar het veld' onder het toetsenblok (veldmodus) is even hoog als de toetsen (56 px). */
.kz-terug { min-height: 56px; }
/* einde 1.1.90 */

/* ── 1.1.100 · het programma van een tornooi (view-programma.js) ─────────────────────────────────────────────────
   Een lijst per aftrapuur, met de ploeg en de scout als filters. Gekozen scout: zijn wedstrijden licht groen met een
   vinkje, de rest valt terug. Botsing (twee wedstrijden van één scout op hetzelfde uur): rood, bij het uur en rond de
   initialen. 'Jouw wedstrijden' bij Noteren › Tornooi: de wedstrijd die nu bezig is, omlijnd. */
.tp-terug { align-self: flex-start; border: 0; background: none; padding: 4px 0; margin: 0 0 4px; font: inherit; font-size: 14px; font-weight: 600; color: var(--color-accent-700, #0B5A2A); cursor: pointer; min-height: 32px; }
.tp-terug:hover { text-decoration: underline; }
.tp-kaart { display: grid; gap: 14px; }
.tp-kaartkop { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.tp-kaartkop-links { display: grid; gap: 8px; }
.tp-knoppen { display: flex; gap: 8px; flex-wrap: wrap; }
.tp-dagen { margin: 0; }
.tp-dagen .seg-opt i, .tp-tabs .seg-opt i { font-style: normal; font-family: var(--font-mono); font-size: 10.5px; margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: rgba(0,0,0,.07); }
.tp-dagtitel { font-family: var(--font-kop); font-weight: 600; font-size: 15px; }
.tp-filter { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 10px; align-items: start; }
.tp-flabel { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-neutral-600); padding-top: 10px; }
.tp-chips .ob-chip { min-height: 36px; cursor: pointer; }
.tp-ploegchip .crest { flex: none; }
.tp-niemand { border-style: dashed; }
.tp-banier { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 12px; background: rgba(216,244,90,.18); border: 1px solid rgba(160,200,60,.45); font-size: 13.5px; }
.tp-banier > span { display: inline-flex; align-items: center; gap: 8px; }
.tp-banier .btn { flex: none; }
.tp-samen { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: rgba(0,0,0,.04); font-size: 13.5px; }
.tp-hele { margin: 0; font-size: 13px; color: var(--color-neutral-600); }
.tp-leeg { display: grid; gap: 6px; text-align: left; }
.tp-lijst { display: grid; gap: 4px; }
.tp-uurblok { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--color-neutral-200); }
.tp-uurblok:first-child { border-top: 0; }
.tp-uur { font-family: var(--font-mono); font-size: 13px; font-weight: 600; padding-top: 12px; display: grid; gap: 6px; align-content: start; }
.tp-rijen { display: grid; gap: 6px; }
.tp-rij { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; min-height: 48px; border-radius: 12px; border: 1px solid transparent; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.tp-rij:hover { background: rgba(0,0,0,.035); }
.tp-rij:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.tp-rij.tp-mijn { border-color: rgba(120,190,40,.55); background: rgba(216,244,90,.14); }
.tp-rij.tp-ander { opacity: .55; }
.tp-veld { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--color-neutral-600); white-space: nowrap; }
.tp-poule { font-size: 11.5px; color: var(--color-neutral-600); white-space: nowrap; }
.tp-duel { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; font-size: 14.5px; min-width: 0; }
.tp-ploeg { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.tp-ploeg .crest { flex: none; }
.tp-tegen { color: var(--color-neutral-500); font-weight: 400; }
.tp-wie { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; min-width: 64px; }
.tp-wie .ob-scout i { width: 28px; height: 28px; font-size: 10.5px; }
.ob-scout.tp-botst i { box-shadow: 0 0 0 2px var(--color-surface, #fff), 0 0 0 4px #C8402B; }
.tp-niemandtag { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #B0331F; border: 1px solid rgba(200,64,43,.45); border-radius: 999px; padding: 3px 8px; }
.tp-jij { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; background: var(--color-topbar, #0B2C1E); color: #D8F45A; border-radius: 999px; padding: 3px 9px; }
.tp-vink { width: 26px; height: 26px; border-radius: 8px; border: 1.5px solid var(--color-neutral-300); display: inline-grid; place-items: center; font-weight: 800; font-size: 13px; margin-left: 6px; }
.tp-vink.aan { background: var(--color-topbar, #0B2C1E); border-color: transparent; color: #D8F45A; }
.tp-botsing { margin: 0; font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: #B0331F; background: rgba(200,64,43,.08); border: 1px solid rgba(200,64,43,.35); border-radius: 10px; padding: 6px 10px; }
/* het venster: een wedstrijd toevoegen of aanpassen */
.tp-dialoograster { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.tp-ploegvakken { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: end; }
.tp-tegen.groot { padding-bottom: 12px; font-size: 18px; }
.tp-dialoogmelding:empty { display: none; }
.tp-weg { margin-right: auto; color: #B0331F; }
/* Noteren › Tornooi: jouw wedstrijden */
.tp-jouw { gap: 10px; }
.tp-mijnrij { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; min-height: 52px; border-radius: 14px; border: 1px solid var(--color-neutral-200); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.tp-mijnrij.nu { border: 2px solid var(--color-accent); background: rgba(216,244,90,.14); }
.tp-mijnrij.voorbij { opacity: .6; }
.tp-mijntijd { display: grid; }
.tp-mijntijd b { font-family: var(--font-mono); font-size: 14px; }
.tp-mijntijd span { font-family: var(--font-mono); font-size: 10.5px; color: var(--color-neutral-600); }
.tp-mijnrij .tp-duel { font-size: 13.5px; flex-direction: column; align-items: flex-start; gap: 4px; }
.tp-mijnrij .tp-tegen { display: none; }
.tp-nutag { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; background: var(--color-topbar, #0B2C1E); color: #D8F45A; border-radius: 999px; padding: 3px 8px; }
.tp-straks { font-size: 11.5px; color: var(--color-neutral-600); white-space: nowrap; }
.tp-breed { width: 100%; justify-content: center; }
body.donker .tp-rij:hover, body.donker .tp-samen { background: rgba(255,255,255,.05); }
body.donker .tp-terug { color: #8FE0A8; }
@media (max-width: 700px) {
  .tp-knoppen { width: 100%; }
  .tp-knoppen .btn { flex: 1; justify-content: center; }
  .tp-filter { grid-template-columns: 1fr; gap: 6px; }
  .tp-flabel { padding-top: 0; }
  .tp-chips { flex-wrap: nowrap; overflow-x: auto; margin-right: calc(-1 * var(--space-4, 16px)); padding-right: var(--space-4, 16px); scrollbar-width: none; }
  .tp-chips::-webkit-scrollbar { display: none; }
  .tp-chips .ob-chip { flex: none; }
  .tp-uurblok { grid-template-columns: 1fr; gap: 6px; }
  .tp-uur { padding-top: 4px; grid-auto-flow: column; justify-content: start; align-items: center; }
  .tp-rij { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; padding: 10px; border-color: var(--color-neutral-200); }
  .tp-rij .tp-veld { grid-column: 1; grid-row: 1; }
  .tp-rij .tp-poule { grid-column: 2; grid-row: 1; text-align: right; }
  .tp-rij .tp-duel { grid-column: 1; grid-row: 2; font-size: 14px; }
  .tp-rij .tp-wie { grid-column: 2; grid-row: 2; min-width: 0; }
  .tp-ploegvakken { grid-template-columns: 1fr; }
  .tp-ploegvakken .tp-tegen { display: none; }
}
/* einde 1.1.100 */
/* 1.1.100: in het weekrooster een link naar het programma van een tornooi */
.wr-programma { border: 0; background: none; padding: 0 4px; margin-left: 2px; font: inherit; font-size: 12px; font-weight: 600; color: var(--color-accent-700, #0B5A2A); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
body.donker .wr-programma { color: #8FE0A8; }
/* ── 1.1.101 · planner, zelf plannen, wie kijkt per wedstrijd, pdf ─────────────────────────────────────────────── */
.tp-planner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.tp-planner .tp-flabel { padding-top: 0; }
.tp-plannerkeuze { width: auto; min-width: 180px; min-height: 40px; padding: 6px 12px; }
.tp-plannerhint { flex-basis: 100%; font-size: 12.5px; color: var(--color-neutral-600); }
.tp-planner-jij { padding: 10px 14px; border-radius: 12px; background: rgba(216,244,90,.18); border: 1px solid rgba(160,200,60,.45); }
.tp-midden { display: grid; gap: 3px; min-width: 0; }
.tp-let { font-size: 12.5px; color: var(--color-neutral-700); font-weight: 400; line-height: 1.35; }
.tp-letblok { display: grid; gap: 2px; font-size: 13.5px; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.04); }
.tp-letblok b { font-size: 12px; }
.ob-scout.tp-zelfpil i { box-shadow: inset 0 0 0 2px #D8F45A; }
.tp-wk-chips .ob-chip { min-height: 40px; padding-left: 6px; }
.tp-wk-chips .ob-scout i { width: 24px; height: 24px; }
.tp-pdfkeuze { display: grid; gap: 8px; }
.ob-zelf { margin-left: 6px; font-size: 9.5px; }
@media (max-width: 700px) { .tp-plannerkeuze { width: 100%; } }
/* einde 1.1.101 */
/* 1.1.102: ploegen zonder verslagen opruimen (Noteren › Tornooi › Team) */
.tp-opruim { margin-top: var(--space-2); }
.tp-opruim summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--color-neutral-700); }
.tp-opruimlijst { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.tp-opruimknop { gap: 6px; border: 1px solid var(--color-neutral-200); border-radius: 999px; }
.tp-kruis { font-weight: 700; color: #B0331F; margin-left: 2px; }
/* 1.1.103: meerdere ploegen tegelijk kiezen */
.tp-opruimknop .tp-vink { display: inline-flex; width: 16px; height: 16px; border: 2px solid var(--color-neutral-400); border-radius: 4px; font-size: 11px; font-weight: 800; line-height: 1; align-items: center; justify-content: center; color: var(--color-bg); flex-shrink: 0; }
.tp-opruimknop.aan { border-color: var(--color-text); background: var(--color-neutral-100); }
.tp-opruimknop.aan .tp-vink { background: var(--color-text); border-color: var(--color-text); }
.tp-opruimacties { gap: 8px; margin: 4px 0 6px; }
.tp-opruimweg:not([disabled]) { border-color: #B0331F; color: #B0331F; }
/* 1.1.103: loopbaan en transfers in het spelerdossier */
.dk-clubs { display: flex; flex-direction: column; }
.dk-clubrij { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--color-neutral-200); }
.dk-clubrij:first-child { border-top: 0; padding-top: 0; }
.dk-clubrij.nu { font-weight: 600; }
.dk-clubseizoen { font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--color-neutral-700); width: 58px; flex-shrink: 0; }
.dk-gezienbij { white-space: nowrap; }
/* 1.1.104: nationaliteit in Profiel bewerken */
.land-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.land-chips:empty { display: none; }
.land-chip { display: inline-flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; font-size: 13px; }
.land-weg { border: 0; background: transparent; font: inherit; font-weight: 800; color: #B0331F; cursor: pointer; padding: 0 2px; line-height: 1; }