/*
 * SV de Flint - handcrafted stylesheet.
 * Loaded through `stylesheet_link_tag :app`.
 */

:root {
  --ink: #16201c;
  --ink-soft: #4a5a53;
  --brand: #1f4c3b;
  --brand-dark: #16382b;
  --brand-light: #2f6b53;
  --accent: #c8772c;
  --accent-soft: #f3e2d1;
  --paper: #ffffff;
  --sand: #f5f4f0;
  --line: #e2e0d9;
  --ok: #2c7a4b;
  --warn: #9b2c2c;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(22, 32, 28, .06), 0 8px 24px rgba(22, 32, 28, .07);
  --font: "Helvetica Neue", Helvetica, Arial, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--sand);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 1.8rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
a { color: var(--brand); }
a:hover { color: var(--accent); }
img { max-width: 100%; }

.container { width: min(1140px, 100% - 2.5rem); margin-inline: auto; }
.lead { font-size: 1.1rem; color: var(--ink-soft); max-width: 60ch; }
.muted { color: var(--ink-soft); }
.small { font-size: .875rem; }
.center { text-align: center; }

.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--accent);
  color: #fff; padding: .6rem 1rem; z-index: 100;
}
.skip-link:focus { left: 0; }

/* ---------- Header / navigation ---------- */
/* Het hoofdmenu en de balk eronder (beheer of leden) blijven samen staan bij
   het scrollen. Een link naar een plek op de pagina komt eronder uit: de
   hoogte meet site_top_controller.js. */
.site-top { position: sticky; top: 0; z-index: 40; box-shadow: 0 2px 10px rgba(0, 0, 0, .15); }
html { scroll-padding-top: calc(var(--site-top-height, 7rem) + var(--filter-bar-height, 0px) + .75rem); }

/* Een filterbalk boven een lange lijst blijft onder het menu staan bij het
   scrollen (filter_bar_controller.js meet hoe hoog hij is). Knoppen die niet op
   één regel passen, schuif je opzij. */
.filter-bar {
  position: sticky; top: var(--site-top-height, 7rem); z-index: 30;
  background: var(--sand); margin: -.4rem 0 1.2rem; padding: .55rem 0;
  border-bottom: 1px solid var(--line);
}
.filter-bar form, .filter-row { display: flex; flex-wrap: wrap; gap: .4rem .5rem; align-items: center; margin: 0; }
.filter-bar form + .filter-row, .filter-row + .filter-row, .filter-row + form { margin-top: .45rem; }
.filter-bar select { width: auto; max-width: 100%; padding: .35rem .5rem; font-size: .9rem; }
.filter-bar input[type="search"] { width: auto; flex: 1 1 12rem; min-width: 9rem; padding: .35rem .6rem; font-size: .9rem; }
/* Een keuzelijst met een klein label ervoor: Jaar [2026], Competitie [Alle]. */
.filter-field { display: flex; align-items: center; gap: .4rem; margin: 0; }
.filter-bar label.filter-label { display: inline; margin: 0; font-size: .8rem; color: var(--ink-soft); }
/* De gekozen competitie uit "Overige" ziet eruit als een gekozen knop. */
.filter-bar select.is-chosen { border-color: var(--accent); background-color: var(--accent-soft); font-weight: 600; }
.filter-count { margin-left: auto; white-space: nowrap; }
/* Over de hele breedte, direct onder de titel van een pagina met meer secties. */
.filter-bar-full { margin: 0; }
.filter-search { flex: 1 1 12rem; }
/* Een formulier in een rij met nog een knop ernaast (Afdrukken): het formulier groeit mee. */
.filter-row > form.filter-row { flex: 1 1 auto; }
.filter-search input[type="search"] { width: 100%; }
/* Op een telefoon delen de keuzelijsten de breedte, twee op een regel. */
@media (max-width: 640px) {
  .filter-field { flex: 1 1 10rem; min-width: 0; }
  .filter-field select { flex: 1 1 auto; min-width: 0; }
  .filter-field-narrow { flex: 0 0 auto; }
}
.site-header {
  background: var(--brand-dark);
  color: #fff;
}
.header-inner { display: flex; align-items: center; gap: 1rem; padding: .7rem 0; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: .7rem; color: #fff; text-decoration: none; margin-right: auto; }
.logo:hover { color: #fff; }
.logo-mark { width: 2.2rem; height: 2.2rem; flex: none; color: var(--accent); }
.logo-text strong { display: block; font-size: 1.05rem; }
.logo-text small { display: block; font-size: .72rem; opacity: .75; text-transform: uppercase; letter-spacing: .09em; }

.site-nav { display: flex; align-items: center; gap: .15rem; flex-wrap: wrap; }
/* Smal genoeg dat het menu op een laptop naast het logo past: één balk in
   plaats van twee. */
.nav-link {
  color: rgba(255, 255, 255, .84); text-decoration: none;
  padding: .45rem .55rem; border-radius: 6px; font-size: .93rem;
}
.nav-link:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.nav-link.is-active { background: rgba(255, 255, 255, .14); color: #fff; }
/* Een teller naast een menu-item of tabblad: wijzigingsverzoeken die openstaan voor het secretariaat, een
   uitkomst die het lid nog niet zag (ChangeRequestsHelper#nav_count). */
.nav-count {
  display: inline-block; min-width: 1.3rem; margin-left: .35rem; padding: .05rem .35rem; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: .72rem; font-weight: 700; line-height: 1.35; text-align: center;
  vertical-align: 1px;
}
.nav-divider { width: 1px; height: 22px; background: rgba(255, 255, 255, .2); margin: 0 .4rem; }
.nav-button, .site-nav form input[type="submit"] {
  background: var(--accent); color: #fff; border: 0; cursor: pointer;
  padding: .5rem .95rem; border-radius: 999px; font-size: .9rem; text-decoration: none;
  font-family: inherit;
}
.nav-button:hover, .site-nav form input[type="submit"]:hover { background: #b0641f; color: #fff; }
.site-nav form { margin: 0; }

/* ☰: een knop die het menu opent (main_menu_controller.js); open is aria-expanded="true". */
.nav-toggle { display: none; }

@media (max-width: 900px) {
  .nav-toggle {
    display: block; width: 44px; height: 38px; padding: 0; border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 8px; background: none; cursor: pointer; position: relative;
  }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
    content: ""; position: absolute; left: 10px; width: 22px; height: 2px; background: #fff;
  }
  .nav-toggle span { top: 18px; }
  .nav-toggle span::before { top: -7px; left: 0; }
  .nav-toggle span::after { top: 7px; left: 0; }
  .site-nav { display: none; width: 100%; flex-direction: column; align-items: stretch; padding-bottom: .6rem; }
  .nav-toggle[aria-expanded="true"] ~ .site-nav { display: flex; }
  .nav-link { padding: .6rem .5rem; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .nav-divider { display: none; }
  /* Uitloggen is een knop in een formulier: even breed als Inloggen, niet een los rondje links. */
  .nav-button { text-align: center; margin-top: .5rem; }
  .site-nav form, .site-nav form .nav-button { width: 100%; }
}
/* Op een telefoon een lage balk: het logo met de naam, zonder de regel eronder,
   want die balk blijft bij het scrollen in beeld. */
@media (max-width: 640px) {
  .header-inner { padding: .45rem 0; gap: .6rem; }
  .logo { gap: .55rem; }
  .logo-mark { width: 1.8rem; height: 1.8rem; }
  .logo-text strong { font-size: 1rem; }
  .logo-text small { display: none; }
  .nav-toggle { width: 40px; height: 34px; }
  .nav-toggle span { top: 16px; left: 9px; }
  .nav-link { padding: .5rem .5rem; }
}

/* ---------- Sections ---------- */
.section { padding: 2rem 0; }
.eyebrow {
  text-transform: uppercase; letter-spacing: .12em; font-size: .75rem;
  color: var(--accent); font-weight: 700; margin-bottom: .4rem;
}
/* Op een telefoon minder ruimte tussen de blokken, iets dichtere regels en kleinere koppen. */
@media (max-width: 640px) {
  body { line-height: 1.5; }
  .section { padding: 1.25rem 0; }
  h1 { font-size: 1.4rem; }
  h2 { font-size: 1.15rem; }
  .eyebrow { letter-spacing: .06em; }
}

.page-header { background: var(--brand); color: #fff; padding: 1.5rem 0; --scroll-fade: var(--brand); --scroll-chip: #fff; --scroll-chip-ink: var(--brand); }
.page-header h1 { margin-bottom: .2rem; }
.page-header .lead { color: rgba(255, 255, 255, .85); }
.page-header .lead:last-child { margin-bottom: 0; }
/* Tabbladen onderaan de kop: de pagina's die bij elkaar horen, zoals die van de
   clubcompetitie. Het tabblad van de pagina waar je bent, loopt door in de
   pagina eronder. Past de rij niet op een telefoon, dan schuift hij opzij. */
.page-header.has-tabs { padding-bottom: 0; }
.section-tabs { display: flex; gap: .25rem; margin-top: .9rem; overflow-x: auto; }
.section-tabs a { padding: .5rem .9rem; border-radius: 8px 8px 0 0; color: rgba(255, 255, 255, .85); text-decoration: none; white-space: nowrap; font-size: .9rem; }
.section-tabs a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.section-tabs a[aria-current="page"] { background: var(--sand); color: var(--ink); font-weight: 600; }
@media (max-width: 640px) {
  .section-tabs a { padding: .45rem .5rem; font-size: .85rem; }
}
/* De homepage houdt de gestreepte achtergrond van de grote kop van vroeger,
   maar is net zo laag als de kop van de andere pagina's. Op een desktop een
   grotere titel en de tekst over de breedte: twee regels in plaats van drie
   smalle met een lege helft ernaast. */
.page-header-home {
  background:
    linear-gradient(180deg, rgba(16, 38, 29, .86), rgba(16, 38, 29, .92)),
    repeating-linear-gradient(135deg, #24503f 0 18px, #1d4433 18px 36px);
}
@media (min-width: 900px) {
  .page-header-home { padding: 1.9rem 0 2rem; }
  .page-header-home h1 { font-size: 2.3rem; letter-spacing: -.02em; margin-bottom: .45rem; }
  .page-header-home .lead { font-size: 1.15rem; line-height: 1.55; max-width: 52rem; }
}
/* Op een telefoon een kleinere titel en uitleg: anders vult de kop het halve
   scherm voordat de pagina begint. */
@media (max-width: 640px) {
  .page-header { padding: .8rem 0 .9rem; }
  .page-header h1 { font-size: 1.3rem; margin-bottom: .15rem; }
  .page-header .lead { font-size: .9rem; line-height: 1.45; }
  .section-tabs { margin-top: .65rem; }
}

/* ---------- Homepage ---------- */
/* De agenda en de openingstijden naast elkaar, meteen onder de kop; op een
   smal scherm onder elkaar, de agenda eerst. */
.home-grid { display: grid; gap: 1.5rem 2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
@media (max-width: 800px) { .home-grid { grid-template-columns: minmax(0, 1fr); } }
/* Even hoog met en zonder knop ernaast, zodat de kaarten gelijk beginnen. */
.home-heading {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  min-height: 2.2rem; margin-bottom: .6rem;
}
.home-heading h2 { margin: 0; }
.card > .agenda-item:first-child, .panel > .agenda-item:first-child { padding-top: 0; }
.card > .agenda-item:last-child, .panel > .agenda-item:last-child { padding-bottom: 0; }
/* Onder de agenda, voor wie niet is ingelogd: een lid ziet meer. */
.agenda-login-hint { margin: .9rem 0 0; font-size: .875rem; color: var(--ink-soft); }

.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem; box-shadow: var(--shadow);
}
.card h3 { margin-bottom: .4rem; }
/* De drie blokken bovenaan de pagina Vereniging: een kop van de pagina, dus
   h2, maar zo groot als de titel van een kaart. */
.club-highlights { margin-bottom: 2.5rem; }
.club-highlights h2 { font-size: 1.05rem; margin-bottom: .4rem; }
.card p:last-child { margin-bottom: 0; }
.card-accent { border-top: 4px solid var(--accent); }
/* Commissies: elke kaart zo hoog als wat erin staat. Alleen een paar taken tonen wie erin zit
   (Group#members_listed), en dan rekte een hele rij mee met het bestuur. Een woord dat niet past,
   zoals verenigingsveiligheidsfunctionarissen, breekt af in plaats van buiten de kaart te lopen;
   afbreken met streepjes deed dat ook bij gewone woorden (ca-mera-toezicht). */
.commissies-grid { align-items: start; }
.commissies-grid .card { overflow-wrap: break-word; }
/* Kaarten onder elkaar naast een formulier, zoals bij een lid in het beheer. */
.card-stack { display: grid; gap: 1.5rem; align-content: start; }
.card-stack > .last-change { margin: 0; }
/* Een deel van een formulier in een eigen blok, met de kop zoals die van de kaarten ernaast. */
.form-card h3 { margin-bottom: .8rem; }
.form-card > :last-child, .form-card > .field:last-child { margin-bottom: 0; }
@media (max-width: 640px) { .card { padding: .9rem; } }

/* De route. De kaarten komen uit script/route_kaart.py: alleen vormen en
   namen, de kleuren staan hier. */
.route-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.5rem; align-items: start; margin-bottom: 2.5rem; }
.route-detail { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem; align-items: start; }
@media (max-width: 860px) { .route-top, .route-detail { grid-template-columns: minmax(0, 1fr); } }
.route-go h2 { margin-top: 0; }
.route-address { font-size: 1.25rem; font-weight: 700; color: var(--brand); line-height: 1.35; }
.route-apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .5rem; margin: 1rem 0 .6rem; }
.route-app { justify-content: center; text-align: center; }
.route-share { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .8rem 0; }
.route-other a { white-space: nowrap; }
.route-figure { margin: 0; }
.route-figure figcaption { margin-top: .5rem; }
.route-map { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); }
.route-steps { list-style: none; padding: 0; margin: 0 0 1.2rem; counter-reset: none; }
.route-steps li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .8rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.route-steps li:last-child { border-bottom: 0; }
.route-steps p { margin: .15rem 0 0; }
.route-step-number {
  display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--accent); color: #fff; font-weight: 800; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--accent);
}
.route-attention { border-left: 4px solid var(--accent); background: var(--accent-soft); border-radius: 0 var(--radius) var(--radius) 0; padding: .8rem 1rem; margin-bottom: 1rem; }
.route-attention p { margin: .2rem 0 0; }

.route-map text { font-family: inherit; }
.rk-bg { fill: #eceee6; }
.rk-living, .rk-town { fill: #e4e0d7; }
.rk-farm { fill: #ebe3d2; }
.rk-grass { fill: #d8e7cb; }
.rk-wood { fill: #c3dab3; }
.rk-pitch { fill: #bcd9a5; stroke: #fff; stroke-width: 2; }
.rk-parking { fill: #e0dfda; stroke: #c6c4bd; stroke-width: 1.5; }
.rk-site { fill: rgba(200, 119, 44, .13); stroke: var(--accent); stroke-width: 3; stroke-dasharray: 10 7; }
.rk-building { fill: #d3cec3; stroke: #b9b2a5; stroke-width: 1; }
.rk-ours { fill: var(--accent); stroke: #8f5219; stroke-width: 2; }
.rk-footway { fill: none; stroke: #b3a48d; stroke-width: 2.5; stroke-dasharray: 6 5; }
.rk-casing { fill: none; stroke: #c2beb3; stroke-linecap: round; stroke-linejoin: round; }
.rk-road, .rk-ov-road { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; }
.rk-private { stroke: #f4eee3; }
.rk-oneway { fill: #5f6d66; }
.rk-route { fill: none; stroke: var(--brand); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.route-map-overview .rk-route { stroke-width: 7; }
.rk-route-walk { fill: none; stroke: var(--brand); stroke-width: 7; stroke-linecap: round; stroke-dasharray: .1 15; }
.rk-street { font-size: 21px; font-weight: 600; fill: #4f5d56; letter-spacing: .03em; paint-order: stroke; stroke: #fff; stroke-width: 5px; stroke-linejoin: round; }
.rk-area-name { font-size: 22px; font-weight: 700; fill: #3d6a37; paint-order: stroke; stroke: #eaf2e2; stroke-width: 4px; }
.rk-neighbour { font-size: 21px; font-weight: 700; fill: #5c5447; paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.rk-neighbour-number { font-size: 19px; fill: #6f675a; paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.rk-p rect { fill: #2f62a3; }
.rk-p text { fill: #fff; font-weight: 800; font-size: 24px; }
.rk-club-label rect { fill: var(--brand); }
.rk-club-name { fill: #fff; font-weight: 800; font-size: 26px; }
.rk-club-number { fill: var(--accent-soft); font-size: 18px; }
.rk-step circle { fill: var(--accent); stroke: #fff; stroke-width: 4; }
.rk-step text { fill: #fff; font-weight: 800; font-size: 22px; }
.rk-pin path { fill: var(--accent); stroke: #fff; stroke-width: 3; }
.rk-pin-dot { fill: #fff; }
.rk-pulse { fill: var(--accent); transform-box: fill-box; transform-origin: center; animation: rk-pulse 2.4s ease-out infinite; }
@keyframes rk-pulse { from { transform: scale(.5); opacity: .55; } to { transform: scale(2.6); opacity: 0; } }
.rk-compass path { fill: var(--ink); }
.rk-compass text, .rk-scale text { font-size: 18px; font-weight: 700; fill: var(--ink); }
.rk-scale path { stroke: var(--ink); stroke-width: 3; fill: none; }
.rk-credit { font-size: 15px; fill: #6b665c; paint-order: stroke; stroke: #eceee6; stroke-width: 4px; }
.rk-water-area { fill: #b7d5e8; }
.rk-river { fill: none; stroke: #a3cbe3; stroke-width: 18; stroke-linecap: round; stroke-linejoin: round; }
.rk-river-name { font-size: 22px; font-style: italic; fill: #3f739a; }
.rk-border { fill: none; stroke: #9b89b6; stroke-width: 3; stroke-dasharray: 14 6 3 6; }
.rk-rail { fill: none; stroke: #8d8d8d; stroke-width: 2.5; stroke-dasharray: 9 6; }
.rk-ov-road.rk-motorway { stroke: #e79d55; }
.rk-ov-road.rk-trunk { stroke: #efbf74; }
.rk-ov-road.rk-primary { stroke: #f3d08a; }
.rk-casing.rk-motorway { stroke: #b8722f; }
.rk-town-name { font-size: 22px; font-weight: 600; fill: #57544c; paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.rk-home { font-size: 30px; font-weight: 800; fill: var(--ink); }
.rk-direction text { font-size: 21px; font-weight: 800; fill: #8a4f18; paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.rk-shield rect { fill: #c0392b; stroke: #fff; stroke-width: 2; }
.rk-shield text { fill: #fff; font-weight: 800; font-size: 18px; }
.rk-exit rect { fill: #1f5fa8; stroke: #fff; stroke-width: 2; }
.rk-exit text { fill: #fff; font-weight: 700; font-size: 17px; }
.rk-country { font-size: 22px; letter-spacing: .25em; font-weight: 700; fill: #8a79a5; }
.rk-frame { fill: none; stroke: var(--accent); stroke-width: 3; stroke-dasharray: 8 6; }
/* Op een telefoon is de kaart smal: dan grotere namen. */
@media (max-width: 640px) {
  .rk-street, .rk-area-name, .rk-neighbour, .rk-town-name { font-size: 30px; }
  .rk-neighbour-number { font-size: 26px; }
  .rk-home { font-size: 38px; }
}
/* De route tekent zich als de kaart in beeld komt (route_map_controller.js). */
.is-armed .rk-route { stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-armed.is-drawn .rk-route { stroke-dashoffset: 0; transition: stroke-dashoffset 2.6s ease-in-out; }
.is-armed .rk-route-walk, .is-armed .rk-step { opacity: 0; }
.is-armed.is-drawn .rk-route-walk, .is-armed.is-drawn .rk-step { opacity: 1; transition: opacity .6s ease 2.2s; }
@media (prefers-reduced-motion: reduce) { .rk-pulse { animation: none; opacity: 0; } }

/* De handleiding: per rol een deel, met bovenaan de delen die voor jou gelden. */
.manual { max-width: 60rem; }
.manual-toc { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; margin-bottom: 2rem; }
.manual-chip {
  padding: .3rem .75rem; border-radius: 999px; background: var(--paper); border: 1px solid var(--line);
  color: var(--brand); font-weight: 600; font-size: .9rem; text-decoration: none;
}
.manual-chip:hover { border-color: var(--accent); color: var(--accent); }
.manual-section {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.3rem 1.4rem; margin-bottom: 1.5rem; scroll-margin-top: calc(var(--site-top-height, 7rem) + 1rem);
}
.manual-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem 1rem;
  border-bottom: 1px solid var(--line); padding-bottom: .6rem; margin-bottom: .4rem; }
.manual-head h2 { margin: 0; }
.manual-head p { margin: 0; }
.manual-items { margin: 0 0 1rem; }
.manual-item { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: .2rem 1.2rem; padding: .65rem 0; border-bottom: 1px solid var(--line); }
.manual-item:last-child { border-bottom: 0; }
.manual-item dt { font-weight: 700; color: var(--brand); }
.manual-item dd { margin: 0; }
.manual-item dt a { color: inherit; }
.manual-more { white-space: nowrap; font-weight: 600; }
/* Een onderwerp stap voor stap, met per stap een schermafdruk. */
.manual-steps { list-style: none; padding: 0; margin: 1rem 0 1.5rem; }
.manual-step { padding: 1.2rem 0 1.6rem; border-bottom: 1px solid var(--line); }
.manual-step:last-child { border-bottom: 0; }
.manual-step-text { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .8rem; }
.manual-step-text h2 { font-size: 1.1rem; margin: .25rem 0 .3rem; }
.manual-step-text p { margin: 0; max-width: 62ch; }
.manual-shot {
  display: block; max-width: 100%; height: auto; margin: 1rem 0 0 3.2rem;
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); background: var(--paper);
}
@media (max-width: 640px) {
  .manual-item { grid-template-columns: minmax(0, 1fr); }
  .manual-section { padding: 1rem; }
  .manual-shot { margin-left: 0; }
}

.stat { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; }
.stat .value { font-size: 2rem; font-weight: 700; color: var(--brand); line-height: 1.1; }
.stat .label { font-size: .85rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; }
/* Op een telefoon twee tellers naast elkaar, in plaats van vier onder elkaar (oktober 2026). */
@media (max-width: 640px) {
  .grid-4:has(> .stat) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .stat { padding: .75rem .85rem; }
  .stat .value { font-size: 1.5rem; }
  .stat .label { font-size: .72rem; letter-spacing: .04em; }
}

.badge {
  display: inline-block; padding: .2rem .6rem; border-radius: 999px;
  font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: var(--accent-soft); color: #8a4d13;
}
.badge-green { background: #dcefe3; color: #1f5c3b; }
.badge-grey { background: #e7e7e3; color: #5c5c55; }
.badge-red { background: #fbe3e1; color: var(--warn); }
/* De ledenlijst: wie uitgeschreven is (niet actief), valt op met een rode streep ervoor en grijze tekst. */
tr.row-inactive td, tr.row-inactive td a { color: var(--ink-soft); }
tr.row-inactive td:first-child { box-shadow: inset 3px 0 0 var(--warn); }

/* ---------- Buttons and forms ---------- */
/* Een link en een knop even hoog: een knop erft de regelhoogte niet, en een
   knop met een rand werd hoger dan een zonder. */
.btn {
  display: inline-block; border: 1px solid transparent; cursor: pointer; font-family: inherit; font-size: .95rem;
  line-height: 1.25; padding: .7rem 1.3rem; border-radius: 8px; text-decoration: none; font-weight: 600;
  background: var(--accent); color: #fff;
}
.btn:hover { background: #b0641f; color: #fff; }
.btn-secondary { background: var(--brand); }
.btn-secondary:hover { background: var(--brand-light); }
.btn-ghost { background: transparent; border: 1px solid rgba(255, 255, 255, .5); color: #fff; }
.btn-ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }
/* Wit, niet doorzichtig: op het zand van de pagina viel een doorzichtige knop
   weg tegen de achtergrond, en zijn hover-kleur was precies dat zand. */
.btn-outline { background: var(--paper); border: 1px solid #d3d0c6; color: var(--ink); }
.btn-outline:hover { background: var(--paper); border-color: var(--brand-light); color: var(--brand); }
/* Een rij keuzeknoppen boven een lijst (welk jaar, welke discipline): iets
   meer reliëf, zodat ze als knoppen lezen en niet als labels. */
.picker .btn-outline { box-shadow: 0 1px 2px rgba(22, 32, 28, .08); }
.btn-danger { background: transparent; color: var(--warn); border: 1px solid #e7cccc; }
.btn-danger:hover { background: #fdf0f0; color: var(--warn); }
.btn-small { padding: .35rem .7rem; font-size: .82rem; }
.btn-row { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
/* Op een telefoon passen twee knoppen vaak net niet naast elkaar. Dan vult elke
   knop de regel, in plaats van een rafelige rand van verschillende breedtes; een
   rij keuzes (picker) en de knoppen in een tabel blijven zoals ze zijn. */
@media (max-width: 640px) {
  .btn { padding: .6rem 1rem; }
  .btn-small { padding: .35rem .7rem; }
  .btn-row:not(.picker) > .btn, .btn-row:not(.picker) > form { flex: 1 1 auto; text-align: center; }
  .btn-row:not(.picker) > form > .btn { width: 100%; }
  /* Knoppen naast een titel komen eronder, over de hele breedte. */
  .toolbar > .btn-row { flex: 1 1 100%; }
  table.data .btn-row > .btn, table.data .btn-row > form { flex: none; }
  table.data .btn-row > form > .btn { width: auto; }
}

/* De vensters bij wijzigingen die nog niet zijn opgeslagen (unsaved_changes_controller.js) en
   bij een knop die vraagt of je het zeker weet (confirm_dialog_controller.js). */
.confirm-dialog {
  border: 0; border-radius: var(--radius); padding: 1.4rem 1.5rem 1.2rem; width: min(28rem, calc(100% - 2rem));
  color: var(--ink); background: var(--paper); box-shadow: 0 20px 60px rgba(22, 32, 28, .35);
}
.confirm-dialog::backdrop { background: rgba(22, 32, 28, .5); }
.confirm-dialog h2 { margin: 0 0 .5rem; font-size: 1.15rem; }
.confirm-dialog p { margin: 0 0 1.2rem; color: var(--ink-soft); white-space: pre-line; }
.confirm-dialog .btn-row { justify-content: flex-end; }
/* Bij een vraag met een keuze staat er een knop per keuze, en is de gewone knop weg. */
.confirm-dialog .btn[hidden] { display: none; }
/* Een vraag zonder toelichting: de ruimte die de toelichting anders gaf. */
.confirm-dialog h2 + p[hidden] + .confirm-overview[hidden] + .btn-row { margin-top: 1.2rem; }
/* Een overzicht onder de toelichting, zoals welke scorekaarten met welke score de deur uitgaan
   (data-turbo-confirm-overview, MailConfirmationsHelper). Een lange lijst scrollt binnen het venster. */
.confirm-dialog:has(.confirm-overview:not([hidden])) { width: min(36rem, calc(100% - 2rem)); }
.confirm-overview { max-height: 45vh; overflow: auto; margin: 0 0 1.2rem; border: 1px solid var(--line); border-radius: 8px; }
.confirm-overview table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.confirm-overview th, .confirm-overview td { padding: .4rem .6rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.confirm-overview th { position: sticky; top: 0; background: var(--sand); font-size: .8rem; }
.confirm-overview tr:last-child td { border-bottom: 0; }
.confirm-overview .num { text-align: right; white-space: nowrap; }
.confirm-overview .select { width: 2rem; padding-right: 0; }
.confirm-overview .select input { margin: .15rem 0 0; width: 1.05rem; height: 1.05rem; }
.confirm-overview small { display: block; overflow-wrap: anywhere; }
.confirm-overview .confirm-overview-note { margin: 0; padding: .6rem; font-size: .85rem; white-space: normal; border-top: 1px solid var(--line); }

form .field { margin-bottom: 1rem; }
form label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"],
input[type="date"], input[type="tel"], select, textarea {
  width: 100%; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 8px;
  font-family: inherit; font-size: 1rem; background: #fff; color: var(--ink);
}
/* Safari tekent een zoekveld anders; zo ziet het eruit als elk ander veld. */
input[type="search"] { -webkit-appearance: none; appearance: none; }
/* Een keuzelijst net zo hoog als een veld, met een eigen pijltje: Safari tekende hem dunner dan de rest. */
select:not([multiple]) {
  -webkit-appearance: none; appearance: none; padding-right: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%234a5a53' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .75rem center; background-size: 12px 8px;
}
.filter-bar select:not([multiple]) { padding-right: 1.9rem; background-position: right .6rem center; }
/* Het zoekveld voor een lange keuzelijst met namen (select_filter_controller.js). */
input.select-filter { width: 11rem; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand-light); outline-offset: 1px; }
.field-inline { display: flex; align-items: center; gap: .5rem; }
.field-inline label { margin: 0; font-weight: 500; }
.field-hint { font-size: .82rem; color: var(--ink-soft); margin-top: .25rem; }
.form-narrow { max-width: 520px; }
/* Een pagina met tekst: breed genoeg om te lezen, links onder de kop (Regels, oktober 2026). */
.text-page { max-width: 48rem; }
/* Twee korte velden naast elkaar, zoals postcode en woonplaats; op een telefoon onder elkaar. */
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 480px) { .field-pair { grid-template-columns: 1fr; } }
/* Drie velden naast elkaar: roepnaam, tussenvoegsel en achternaam; op een telefoon onder elkaar. */
.field-trio { display: grid; grid-template-columns: 2fr 1fr 2fr; gap: 0 1rem; }
.field-trio .field { margin-bottom: .4rem; }
@media (max-width: 480px) { .field-trio { grid-template-columns: 1fr; } }
/* Wijziging doorgeven: een veld dat anders is dan wat er nu staat (changed_fields_controller.js). */
.field.is-changed > input { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.field.is-changed > label::after {
  content: "gewijzigd"; margin-left: .45rem; padding: .05rem .45rem; border-radius: 999px; vertical-align: 1px;
  background: var(--accent-soft); color: #8a4d13; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}

.form-errors {
  background: #fdf0f0; border: 1px solid #e7cccc; color: var(--warn);
  padding: .9rem 1.1rem; border-radius: 8px; margin-bottom: 1.2rem;
}
.form-errors ul { margin: .3rem 0 0; padding-left: 1.2rem; }

.flash { padding: .85rem 1.1rem; border-radius: 8px; margin: 1.2rem 0 0; font-weight: 500; }
.flash-notice { background: #e4f1e9; border: 1px solid #bfdcca; color: #1f5c3b; }
.flash-alert { background: #fdf0f0; border: 1px solid #e7cccc; color: var(--warn); }
/* Na het invoeren van een serie: of het lid de kaart per mail wil, met de knop om te mailen. */
.flash-offer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem;
  background: var(--paper); border: 1px solid var(--line); color: var(--ink);
}
.flash-offer p { margin: 0; }

/* Onder Mijn account: de wijziging die bij het secretariaat ligt, of de uitkomst (profiles/_change_request). */
.request-status { margin: 1rem 0; padding: .8rem 1rem; border-radius: 8px; background: var(--sand); border-left: 4px solid var(--accent); }
.request-status p { margin: 0 0 .5rem; }
.request-status p:last-child, .request-reason p:last-child { margin-bottom: 0; }
.request-status .info-list { margin-bottom: .8rem; }
.request-status .info-list li { padding: .35rem 0; }
.request-status form { margin: 0; }
.request-approved { background: #e4f1e9; border-left-color: #2f7a4f; }
.request-rejected { background: #fdf0f0; border-left-color: var(--warn); }
.request-reason { padding-left: .8rem; border-left: 2px solid rgba(0, 0, 0, .12); font-style: italic; }
.request-steps { padding-left: 1.2rem; margin: 0 0 1rem; }
.request-steps li { margin-bottom: .4rem; }

/* Wijzigingsverzoeken in het beheer: per verzoek wat er staat en wat het lid vraagt (admin/change_requests). */
.change-request-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem 1rem; margin-bottom: .8rem; }
.change-request-head h3 { margin: 0; }
.change-table th[scope="row"] { font-weight: 600; white-space: nowrap; }
.change-table td.change-new { font-weight: 600; color: var(--brand); }
.change-table .change-then { display: block; }
.change-table .change-derived th, .change-table .change-derived td { color: var(--ink-soft); font-weight: 400; }
.change-note { margin: .8rem 0 0; padding: .6rem .9rem; background: var(--sand); border-left: 3px solid var(--line); border-radius: 0 8px 8px 0; }
.change-note p { margin: 0 0 .4rem; }
.change-note p:last-child { margin-bottom: 0; }
.change-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem; margin-top: 1rem; }
.change-actions form { margin: 0; }
/* Afwijzen… klapt open tot een vlak over de hele breedte, met de reden voor het lid en Afwijzen of Annuleren;
   de knop Afwijzen… is dan weg (disclosure_controller.js). */
.change-reject[open] { flex-basis: 100%; padding: .8rem 1rem; background: #fdf7f6; border: 1px solid #f0d9d6; border-radius: 8px; }
.change-reject summary { list-style: none; display: inline-block; line-height: normal; }
.change-reject[open] > summary { display: none; }
.change-reject summary::-webkit-details-marker { display: none; }
.change-reject form { max-width: 34rem; }
.change-register { list-style: none; padding: 0; margin: 0 0 .6rem; }
.change-register li { display: flex; flex-wrap: wrap; gap: .2rem .8rem; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.change-register li:last-child { border-bottom: 0; }
.change-earlier { margin-top: 2rem; }
.change-earlier .table-wrap { margin-top: .8rem; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
table.data { width: 100%; border-collapse: collapse; font-size: .875rem; }
table.data th, table.data td { padding: .3rem .5rem; text-align: left; border-bottom: 1px solid var(--line); }
/* Tekst loopt terug, zodat een tabel op het scherm past in plaats van opzij
   te schuiven; getallen, data, labels en knoppen blijven op één regel. */
table.data td.num, table.data th.num, table.data td.center, table.data th.center, table.data .rank,
table.data .badge, table.data .btn, table.data .check, table.data .nowrap { white-space: nowrap; }
/* Een kop mag wel over twee regels, ook boven een kolom getallen. */
table.data thead th, table.data thead th.num, table.data thead th.center { white-space: normal; }
table.data .cell-name { min-width: 10rem; }
/* Tien per regel en op vaste breedte: kaart 7 staat in elke beurt op dezelfde plek. */
.card-strip { display: grid; grid-template-columns: repeat(10, 3ch); gap: .1rem .45rem; justify-items: end; font-variant-numeric: tabular-nums; }
table.data thead th {
  background: var(--brand); color: #fff; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .06em; position: sticky; top: 0;
}
table.data tbody tr { background: var(--paper); }
table.data tbody tr:nth-child(even) { background: #fafaf8; }
table.data .btn { padding: .15rem .5rem; font-size: .78rem; border-radius: 6px; }
table.data .btn-row { gap: .25rem; }

/* Past een tabel niet op het scherm, dan schuift de naamkolom niet mee weg:
   anders weet je bij het scrollen niet meer naar wiens rij je kijkt. */
table.data tbody th[scope="row"] { position: sticky; left: 0; background: inherit; z-index: 1; }
table.data thead th:first-child { left: 0; z-index: 3; }
table.data tbody tr:hover { background: #f2f6f3; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data td.center, table.data th.center { text-align: center; }
table.data tfoot td { font-weight: 700; background: #f3f3ef; }
/* De plek in een lijst met een eigen volgorde (Positioned, sortable_controller.js): het greepje om
   met de muis te slepen, het nummer en de pijltjes. Zonder muis zijn er alleen de pijltjes. */
table.data .order-cell { width: 1%; white-space: nowrap; }
table.data .order-form { display: inline; }
.drag-handle { cursor: grab; color: var(--ink-soft); font-size: 1.15rem; line-height: 1; padding: 0 .3rem 0 .1rem; user-select: none; }
.order-number { display: inline-block; min-width: 1.5em; margin-right: .3rem; font-variant-numeric: tabular-nums; }
table.data tr.is-dragging { opacity: .45; }
@media (hover: none) { .drag-handle { display: none; } }
/* De kop boven een groep rijen, zoals een dag in Verzonden mail. */
table.data tr.row-group th { background: var(--sand); color: var(--brand); font-size: .8rem; font-weight: 700; letter-spacing: .04em; }
table.data .rank { font-weight: 700; color: var(--brand); width: 2.2rem; }
/* De serie onder een score in het beheer (45D): welke serie die beurt was. */
table.data .turn-series { display: block; font-size: .7rem; font-weight: 400; color: var(--ink-soft); line-height: 1.2; }
table.data .total { font-weight: 700; }
table.data .hidden-col { background: repeating-linear-gradient(45deg, #fbfaf6 0 6px, #f4f2ea 6px 12px); }
table.data thead th.hidden-col { background: var(--brand-light); }

/* Mijn resultaten: één rij per competitie, per jaar bij elkaar. Ruimer dan de
   beheertabellen, want hier lees je je eigen seizoenen terug, niet een lijst
   om in te werken. */
table.data.results-list { font-size: .95rem; }
table.data.results-list th, table.data.results-list td { padding: .75rem .9rem; vertical-align: middle; }
table.data.results-list tbody tr:nth-child(even) { background: var(--paper); }
table.data.results-list tbody th[scope="row"] { font-weight: 400; }
table.data.results-list .results-year th {
  background: var(--sand); color: var(--brand); font-size: .8rem; font-weight: 700;
  letter-spacing: .08em; padding: .45rem .9rem;
}
/* De naam is de weg naar je kaarten, dus ziet hij eruit als een link. */
table.data.results-list .results-name { display: block; font-weight: 600; color: var(--brand); text-decoration: underline; text-underline-offset: .15em; }
table.data.results-list .results-name:hover { color: var(--ink); }
table.data.results-list .results-meta { font-size: .8rem; color: var(--ink-soft); }
@media (max-width: 640px) {
  table.data.results-list { font-size: .85rem; }
  table.data.results-list th, table.data.results-list td { padding: .55rem .45rem; }
}

/* Op een telefoon passen acht beurten naast elkaar niet. Dan toont de stand
   plek, naam, beurten, totaal en gemiddelde; de scores per beurt staan erbij
   zodra het scherm breder is, of als je de telefoon kantelt. Zo wijken op een
   smal scherm ook de bijzaken in de beheertabellen: de naam linkt door naar
   de rest. */
.phone-only { display: none; }
@media (max-width: 900px) {
  table.data .hide-tablet { display: none; }
  table.data .cell-name { min-width: 8rem; }
}
@media (max-width: 640px) {
  /* Op een telefoon telt elke pixel: smallere randen om de pagina en de panelen. */
  .container { width: calc(100% - 1.5rem); }
  .panel { padding: .75rem; }
  table.data .turn-col, table.data .hide-phone { display: none; }
  table.data th, table.data td { padding: .3rem .3rem; }
  table.data thead th { letter-spacing: 0; font-size: .66rem; }
  table.data .rank { width: 1.4rem; }
  table.data .cell-name { min-width: 7rem; }
  .phone-only { display: block; }
}

.score { font-variant-numeric: tabular-nums; }
.score-empty::after { content: "–"; color: #c3c3bc; }
.check { color: var(--ok); font-weight: 700; }
/* Te laat ingeleverd, zoals de wedstrijdleiding het bij het invoeren aanvinkte. */
.score.is-late, .check.is-late { color: var(--warn); font-weight: 700; }
.badge-late { background: #fbe3e1; color: var(--warn); }
.row-me { background: #fff8ec !important; box-shadow: inset 3px 0 0 var(--accent); }

.legend { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: .85rem; color: var(--ink-soft); margin-top: .8rem; }
.legend span { display: inline-flex; align-items: center; gap: .35rem; }

/* score entry grid */
table.entry input.shot-field { width: 3.2rem; padding: .35rem .3rem; text-align: center; font-variant-numeric: tabular-nums; }
table.data td.wrap { white-space: normal; }
/* Een toelichting onder de naam in een tabel (zoals "Telt niet mee" in de stand op een telefoon). */
table.data .cell-note { font-weight: 400; font-size: .8rem; color: var(--ink-soft); line-height: 1.35; }
@media (max-width: 640px) {
  table.data.entry th, table.data.entry td { padding: .25rem .15rem; }
  table.entry input.shot-field { width: 2.1rem; padding: .35rem 0; }
}
table.entry input[type="date"] { width: 9.5rem; padding: .35rem .4rem; }
table.entry td, table.entry th { white-space: nowrap; }
.sticky-name { position: sticky; left: 0; background: inherit; }
table.entry tbody tr { background: var(--paper); }
table.entry tbody tr:nth-child(even) { background: #fafaf8; }
input.shot-field.is-invalid, input.serial-field.is-invalid { background: #fdf0f0; border-color: var(--warn); }

/* De serie die wordt ingevoerd, met de kaartnummers om tegen de kaarten te houden. */
.series-banner {
  display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline;
  background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--brand);
  border-radius: var(--radius); padding: .7rem 1rem; margin-bottom: 1rem;
}
.series-banner strong { font-size: 1.15rem; color: var(--brand); }
/* Elk bereik van kaartnummers een eigen blokje: bij een nieuw pak halverwege
   staan er twee naast elkaar, niet één bereik dat er niet is. */
.card-range {
  display: inline-flex; gap: .45rem; align-items: baseline; padding: .15rem .6rem;
  background: var(--sand); border: 1px solid var(--line); border-radius: 6px;
}
.card-range .serial { font-weight: 700; }
/* Een ingevoerde serie of een afgesloten competitie staat vast: wijzigen kan pas
   na een bewuste klik, met een waarschuwing. */
.lock-banner {
  display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center;
  background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--ink-soft);
  border-radius: var(--radius); padding: .7rem 1rem; margin-bottom: 1rem;
}
.lock-banner.is-changing { border-left-color: var(--accent); background: var(--accent-soft); }
.lock-banner form { margin: 0; }
/* De correcties van een meegegeven competitie-serie: wat er stond doorgestreept, wat het werd erachter. */
.correction-list { list-style: none; padding: 0; margin: 0; }
.correction-list > li { border-top: 1px solid var(--line); padding: .7rem 0; }
.correction-list > li:first-child { border-top: 0; padding-top: 0; }
table.data.correction-table { width: auto; max-width: 100%; }
table.data.correction-table tbody tr, table.data.correction-table tbody tr:hover { background: none; }
table.data.correction-table th, table.data.correction-table td { padding: .25rem 1rem .25rem 0; }
table.data.correction-table tr:last-child > * { border-bottom: 0; }
table.data.correction-table del { color: var(--ink-soft); }
/* Een bereik breekt niet; op een smal scherm komt het nieuwe onder het oude. */
table.data.correction-table th, table.data.correction-table td > * { white-space: nowrap; }
table.data.correction-table td > * { display: inline-block; margin-right: .5rem; }
input:disabled, select:disabled, textarea:disabled { background-color: var(--sand); color: var(--ink-soft); cursor: not-allowed; }
.series-picker {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center;
  background: var(--paper); border: 1px dashed var(--brand-light); border-radius: var(--radius);
  padding: .7rem 1rem; margin-bottom: 1rem;
}
.btn.is-disabled { opacity: .45; cursor: not-allowed; }
.entry-help { display: flex; gap: .6rem 1.2rem; align-items: center; flex-wrap: wrap; margin-bottom: .8rem; }
.entry-help label { margin: 0 0 .2rem; }
.entry-help input.ten-key { width: 3.2rem; text-align: center; font-weight: 700; font-size: 1.1rem; }

/* Kaartnummers: vaste breedte per cijfer, zodat ze onder elkaar te vergelijken zijn. */
.serial, input.serial-field, input.lookup-field {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums;
}
input.lookup-field { max-width: 20rem; font-size: 1.1rem; }
/* Serie invoeren: eerst de discipline, dan het nummer. Naast elkaar waar het
   past, onder elkaar op een telefoon. */
.lookup-form { display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; align-items: flex-end; margin: 0; }
.lookup-step select { width: auto; min-width: 14rem; max-width: 100%; font-size: 1.05rem; }
.lookup-step:last-child { flex: 1 1 22rem; }
.lookup-step .btn-row { flex-wrap: nowrap; }
.lookup-step input.lookup-field { flex: 0 1 20rem; min-width: 0; }
@media (max-width: 640px) {
  .lookup-step { flex: 1 1 100%; }
  .lookup-step select { width: 100%; }
}
table.number-grid td { padding: .2rem .25rem; }
table.number-grid input.serial-field { width: 7.6rem; padding: .3rem .4rem; font-size: .9rem; text-align: center; }
table.number-grid input.serial-field::placeholder { color: var(--ink-soft); opacity: .8; }
table.number-grid input.serial-field.is-break { background: var(--accent-soft); border-color: #e3b98f; font-weight: 700; }
.swatch {
  display: inline-block; width: 1rem; height: 1rem; vertical-align: middle;
  border: 1px solid var(--line); border-radius: 3px; background: #fff;
}
.swatch-break { background: var(--accent-soft); border-color: #e3b98f; }
fieldset.field { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
fieldset.field legend { font-weight: 600; font-size: .9rem; margin-bottom: .4rem; padding: 0; }

.turn-tabs { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .8rem; }
.turn-tab {
  display: inline-block; padding: .45rem .85rem; border-radius: 8px; text-decoration: none;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: .9rem;
}
.turn-tab:hover { border-color: var(--brand); color: var(--brand); }
.turn-tab.is-current { background: var(--brand); border-color: var(--brand); color: #fff; }
/* Op de scorekaart: Serie 1 met de serie met een letter eronder (78F). */
.turn-tab-card { text-align: center; line-height: 1.2; }
.turn-tab-card small { display: block; font-size: .72rem; opacity: .75; }
.turn-tab.is-hidden-turn { border-style: dashed; }
/* Op een telefoon vullen de tabbladen de regel, in plaats van een rij die halverwege ophoudt; de series
   van een scorekaart in vier even brede kolommen. */
@media (max-width: 640px) {
  .turn-tabs > .turn-tab { flex: 1 1 auto; text-align: center; }
  .turn-tabs:has(> .turn-tab-card) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .turn-tab-card { padding: .4rem .3rem; }
}

/* ---------- Agenda ---------- */
.agenda-item { display: flex; gap: 1.1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.agenda-item:last-child { border-bottom: 0; }
.agenda-date {
  flex: 0 0 62px; text-align: center; background: var(--brand); color: #fff;
  border-radius: 8px; padding: .5rem 0; height: fit-content;
}
.agenda-date .day { display: block; font-size: 1.4rem; font-weight: 700; line-height: 1; }
.agenda-date .month { display: block; font-size: .72rem; letter-spacing: .08em; }
.agenda-item h3 { margin-bottom: .15rem; }
@media (max-width: 640px) {
  .agenda-item { gap: .8rem; padding: .85rem 0; }
  .agenda-date { flex-basis: 52px; padding: .4rem 0; }
  .agenda-date .day { font-size: 1.2rem; }
}

.info-list { list-style: none; padding: 0; margin: 0; }
.info-list li { padding: .55rem 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 1rem; }
.info-list li:last-child { border-bottom: 0; }
.info-list .label { color: var(--ink-soft); }

.checklist { list-style: none; padding: 0; margin: 0 0 1em; }
.checklist li { padding-left: 1.7rem; position: relative; margin-bottom: .5rem; }
.checklist li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }

.cta {
  background: var(--brand); color: #fff; border-radius: var(--radius);
  padding: 2.2rem; display: flex; gap: 1.5rem; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.cta h2 { margin: 0; }
.cta p { color: rgba(255, 255, 255, .85); margin: .3rem 0 0; }
@media (max-width: 640px) { .cta { padding: 1.2rem; } }

.login-wrap { max-width: 420px; margin: 3rem auto; }
@media (max-width: 640px) { .login-wrap { margin: 1rem auto; } }
.login-trust-hint { margin: -.6rem 0 1rem; }
.login-or { display: flex; align-items: center; gap: .8rem; margin: 1.2rem 0; color: var(--ink-soft); font-size: .85rem; }
.login-or::before, .login-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.passkey-error { margin: .8rem 0 0; }
[aria-busy="true"] [data-action^="passkey#"] { opacity: .6; pointer-events: none; }

/* Passkeys en vertrouwde apparaten op Mijn account. */
.device-list { list-style: none; margin: .8rem 0 1rem; padding: 0; }
/* Hoort bij geen formulier (zie profiles/_passkeys), dus de stijl van form label hier apart. */
.passkey-field { margin-bottom: 1rem; }
.passkey-field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.device-list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-top: 1px solid var(--line); }
.device-list li > div { display: grid; gap: .15rem; }
.device-list .badge { margin-left: .5rem; vertical-align: .1em; }
.login-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow); }
@media (max-width: 640px) { .login-card { padding: 1.25rem; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--brand-dark); color: rgba(255, 255, 255, .78); margin-top: 3rem; padding: 2rem 0 1.2rem; }
.site-footer h3 { color: #fff; font-size: .95rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .4rem; }
/* Een rustige onderstreping: de links zijn er wel, maar de voet is geen rij strepen. Het menu
   onderaan is herkenbaar als menu, dus zonder streep tot je erop staat. */
.site-footer a { color: rgba(255, 255, 255, .85); text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: .18em; }
.site-footer a:hover { color: var(--accent); text-decoration-color: currentColor; }
.footer-main { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: flex-end; }
.footer-main p { margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 1.4rem; padding-top: 1rem; font-size: .82rem; }
.footer-bottom p { margin: 0; }
/* Op een telefoon een kleine voet: kleinere letters, minder ruimte, en de
   copyright op één regel. */
@media (max-width: 640px) {
  .site-footer { margin-top: 2rem; padding: 1.3rem 0 1rem; font-size: .875rem; line-height: 1.5; }
  .site-footer h3 { font-size: .8rem; margin-bottom: .3rem; }
  .footer-main { gap: .8rem; }
  .footer-links { gap: .35rem 1.1rem; }
  .footer-bottom { margin-top: 1rem; padding-top: .8rem; font-size: .75rem; }
  .footer-rights { display: none; }
}

/* ---------- Admin shell ---------- */
/* De beheerbalk: de rij van Beheer in de balk onder de kop (shared/_admin_bar). */
.admin-bar a { color: rgba(255, 255, 255, .8); text-decoration: none; padding: .22rem .45rem; border-radius: 6px; white-space: nowrap; }
.admin-bar a:hover, .admin-bar a.is-active { background: rgba(255, 255, 255, .12); color: #fff; }
.admin-bar .spacer { margin-left: auto; }

.panel-attention { border-left: 4px solid var(--accent); }

/* De intake van een nieuw lid: de verklaringen op het formulier, en wat er nog ontbreekt. */
.intake-declarations { margin: 0 0 1rem; padding-left: 1.2rem; }
.intake-declarations li { margin: .35rem 0; }
.intake-missing { margin: 0 0 .5rem; padding-left: 1.2rem; }
.card-warning { border-top: 3px solid var(--warn); }
tr.row-behind td:first-child { box-shadow: inset 3px 0 0 var(--warn); font-weight: 600; }

/* De wedstrijdregistratie: dezelfde kleuren als de lijst van de wedstrijdleiding. */
.print-only { display: none; }
.registration-table td { vertical-align: middle; }
.registration-name { white-space: nowrap; }
.registration-name.is-complete { background: #dcefe3; color: #1f5c3b; font-weight: 600; }
.registration-name.is-unregistered { background: #fff3b0; }
.registration-status { text-align: center; font-weight: 600; }
.registration-status.is-behind { background: #c62828; color: #fff; }
.registration-entries { display: flex; flex-wrap: wrap; gap: .3rem; }
.registration-entry {
  display: inline-block; padding: .12rem .5rem; border-radius: 6px; font-size: .85rem; white-space: nowrap;
  background: #fde2e1; color: var(--ink); text-decoration: none;
}
.registration-entry.is-complete { background: #1f5c3b; color: #fff; }
.registration-entry .badge { font-size: .7rem; margin-left: .2rem; }
.registration-totals { display: grid; gap: .2rem; margin: 1.5rem 0 1rem; font-weight: 600; }
.registration-totals div { display: flex; gap: .5rem; }
.registration-totals dd { margin: 0; }
.registration-legend span { padding: 0 .3rem; border-radius: 4px; }
.registration-print-title { font-size: 1.3rem; margin: 0 0 .8rem; }
.registration-print-title small { font-weight: 400; color: var(--ink-soft); }

.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); margin-bottom: 1rem; }
.panel h2 { font-size: 1.15rem; }

.shot-details summary { cursor: pointer; font-size: 1rem; }
.shot-details summary::marker { color: var(--accent); }
.shot-details[open] summary { margin-bottom: .3rem; }

/* Beheer → Competities: per seizoen, een afgesloten seizoen dichtgeklapt. */
.season-group { border-top: 1px solid var(--line); padding: .8rem 0; }
.season-group:last-child { border-bottom: 1px solid var(--line); }
.season-group > summary { cursor: pointer; }
.season-group > summary::marker { color: var(--accent); }
.season-group > summary h3 { display: inline; margin: 0 .4rem 0 .2rem; font-size: 1.15rem; }
.season-group > summary .badge { margin-right: .3rem; vertical-align: .1em; }
.season-group[open] > summary { margin-bottom: .8rem; }
.season-actions { margin-bottom: .8rem; }

/* Beheer → Disciplines: de aantallen onder elkaar, met wat er niet goed is erachter
   (op een telefoon eronder). */
.entries-count { display: inline-block; min-width: 2.2ch; text-align: right; font-variant-numeric: tabular-nums; margin-right: .3rem; }

/* ---------- The bar under the header ---------- */
/* De balk onder de kop (shared/_site_bar): licht met de rij van de leden, donker met die van het
   beheer. Voor wie in het beheer mag, staan vooraan de tabbladen Leden en Beheer, en is het deel dat
   openstaat oranje. Op een telefoon staan ze op een eigen regel, en schuift de rij eronder opzij. */
.site-bar { background: var(--sand, #efe9dd); border-bottom: 1px solid var(--line); padding: .5rem 0; font-size: .85rem; --scroll-fade: var(--sand, #efe9dd); }
.site-bar.is-beheer {
  background: #10261d; color: #fff; border-bottom-color: #10261d;
  --scroll-fade: #10261d; --scroll-chip: #fff; --scroll-chip-ink: #10261d;
}
.bar-switch { display: flex; flex: none; gap: 2px; padding: 2px; margin-right: .4rem; border-radius: 8px; background: rgba(0, 0, 0, .07); }
.bar-switch a {
  padding: .3rem .6rem; border-radius: 6px; color: var(--ink-soft); text-decoration: none; white-space: nowrap;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
}
.bar-switch a:not([aria-selected="true"]):hover { background: rgba(0, 0, 0, .06); color: var(--ink); }
.site-bar.is-beheer .bar-switch { background: rgba(255, 255, 255, .12); }
.site-bar.is-beheer .bar-switch a:not([aria-selected="true"]) { color: rgba(255, 255, 255, .75); }
.site-bar.is-beheer .bar-switch a:not([aria-selected="true"]):hover { background: rgba(255, 255, 255, .1); color: #fff; }
.bar-switch a[aria-selected="true"] { background: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
/* De teller bij Beheer: wit op het oranje tabblad, anders oranje op oranje. */
.bar-switch a[aria-selected="true"] .nav-count { background: #fff; color: var(--accent); }

/* De rijen: de items staan in een spoor (.bar-track); Deze pagina wijzigen staat erna. */
.site-bar > .container, .member-bar, .admin-bar { display: flex; gap: .25rem; align-items: center; }
.member-bar, .admin-bar { flex: 1; min-width: 0; }
.member-bar[hidden], .admin-bar[hidden] { display: none; }
.member-bar .scroll-frame, .admin-bar .scroll-frame { flex: 1; }
.bar-track { display: flex; gap: .25rem; flex-wrap: wrap; align-items: center; }
.member-bar a { color: var(--ink); text-decoration: none; padding: .22rem .45rem; border-radius: 6px; white-space: nowrap; }
/* De links hier zijn ook .nav-link, en die maakt tekst wit voor de donkere
   kopbalk. Op deze lichte balk werd het actieve item daardoor wit op grijs. */
.member-bar a.nav-link:hover { background: rgba(0, 0, 0, .06); color: var(--ink); }
.member-bar a.nav-link.is-active { background: var(--brand); color: #fff; }
/* Op een telefoon is de rij één regel die je opzij schuift: de balk blijft staan
   bij het scrollen, en drie regels zouden een groot deel van het scherm zijn.
   De tabbladen en Wijzigen staan op een regel erboven, zodat de rij de hele
   breedte heeft (oktober 2026): ernaast zag je van het menu maar één item. */
@media (max-width: 640px) {
  .site-bar { padding: .3rem 0; }
  .site-bar > .container { flex-wrap: wrap; row-gap: .3rem; }
  .member-bar, .admin-bar { order: 2; flex-basis: 100%; }
  .bar-track { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; }
  /* Niets in het spoor krimpt: anders breekt een item met spaties over meer regels. */
  .bar-track > * { flex: none; }
}

/* Een rij die opzij schuift (de balken en de tabbladen): een rondje met een pijl
   aan de kant waar nog meer staat, over een rand die naar de achtergrond
   vervaagt (scroll_arrows_controller.js). Past alles, dan zijn er geen pijltjes.
   De kleuren per balk: --scroll-fade de achtergrond, --scroll-chip het rondje. */
.scroll-frame { position: relative; min-width: 0; }
.scroll-arrow {
  position: absolute; top: 0; bottom: 0; z-index: 1; width: 3rem; padding: 0; border: 0;
  display: flex; align-items: center; cursor: pointer;
}
.scroll-arrow[hidden] { display: none; }
.scroll-arrow-previous { left: 0; justify-content: flex-start; background: linear-gradient(to right, var(--scroll-fade) 50%, transparent); }
.scroll-arrow-next { right: 0; justify-content: flex-end; background: linear-gradient(to left, var(--scroll-fade) 50%, transparent); }
.scroll-arrow-icon {
  display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--scroll-chip, var(--brand)); color: var(--scroll-chip-ink, #fff); box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
/* Bekijken als (RoleSimulation): zolang een beheerder een andere rol nabootst,
   een opvallende balk bovenaan elke pagina, met de knop om te stoppen. */
.simulation-bar { background: var(--warn); color: #fff; padding: .45rem 0; font-size: .9rem; }
.simulation-bar .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; }
.simulation-bar form { margin: 0; }
.simulation-bar .btn { background: #fff; color: var(--warn); border-color: #fff; }

/* Rollen en rechten: wie wat mag, per onderdeel en per rol. */
.access-matrix th[scope="row"] { font-weight: 500; }
.access-matrix .matrix-yes { color: var(--brand); font-weight: 700; }
.access-matrix .matrix-count { color: var(--muted); font-weight: 400; }
.access-matrix td:last-child { min-width: 9rem; }
.role-card h3 { font-size: .95rem; margin: 1rem 0 .3rem; }
.role-card ul { margin: 0; padding-left: 1.1rem; }
.people-list .badge { margin-left: .3rem; }

/* Deze pagina wijzigen, voor beheerders: rechts in de balk, na de rij. Hij hoort bij de pagina en
   niet bij een rij, en blijft dus staan als je Beheer kiest; op de donkere balk wit. Op een telefoon
   staat hij rechts naast de tabbladen, en heet hij kort. */
.site-bar a.page-edit {
  flex: none; margin-left: auto; padding: .22rem .45rem; border: 1px solid var(--line); border-radius: 6px;
  background: var(--paper); color: var(--ink); text-decoration: none; white-space: nowrap;
}
.site-bar a.page-edit:hover { border-color: var(--ink-soft); }
.site-bar.is-beheer a.page-edit { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.site-bar.is-beheer a.page-edit:hover { border-color: #fff; }
.page-edit-short { display: none; }
@media (max-width: 640px) {
  .site-bar a.page-edit { order: 1; }
  .page-edit-long { display: none; }
  .page-edit-short { display: inline; }
}

.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .3rem .9rem; margin-bottom: .5rem; }
.checkbox-grid label { margin: 0; }

.agenda-item.is-closed .agenda-date { background: var(--warn); color: #fff; }
.agenda-item.is-closed h3 { color: var(--warn); }
/* Boven de agenda, voor wie niet is ingelogd: de tekst met de knop ernaast, op een telefoon eronder. */
.login-hint { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; }
.login-hint p { margin: 0; }

/* De agenda als maand, week of dag (AgendaCalendar). Op een telefoon of smalle
   tablet is een maand niet te lezen: daar is er geen keuze en staat dezelfde
   periode als lijst. */
.agenda-views { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 1rem; background: var(--paper); }
/* Bij een lid is elke keuze een knop in een eigen formulier (button_to). */
.agenda-views form { display: flex; margin: 0; }
.agenda-views > * + * { border-left: 1px solid var(--line); }
.agenda-view { display: block; padding: .45rem .95rem; border: 0; background: none; font: inherit; font-weight: 600; font-size: .9rem;
  color: var(--ink); text-decoration: none; cursor: pointer; }
.agenda-view:hover { background: var(--sand); }
.agenda-view.is-current { background: var(--brand); color: #fff; }
.agenda-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.agenda-nav .btn { min-width: 2.4rem; font-size: 1rem; }
.agenda-nav h2 { margin: 0 0 0 .5rem; }
table.agenda-month { width: 100%; table-layout: fixed; border-collapse: collapse; background: var(--paper); }
table.agenda-month th { padding: .45rem .5rem; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; text-align: left;
  color: var(--ink-soft); border: 1px solid var(--line); }
table.agenda-month td { height: 7.5rem; padding: .35rem; vertical-align: top; border: 1px solid var(--line); overflow: hidden; }
table.agenda-month td.is-other-month { background: #f7f7f4; }
table.agenda-month td.is-other-month .agenda-day-number { color: var(--ink-soft); font-weight: 400; }
.agenda-day-number { display: inline-block; min-width: 1.7rem; padding: .05rem .3rem; border-radius: 999px; text-align: center;
  font-weight: 700; color: var(--ink); text-decoration: none; }
.agenda-day-number:hover { background: var(--sand); }
td.is-today .agenda-day-number { background: var(--brand); color: #fff; }
.agenda-chip { display: block; margin-top: .25rem; padding: .15rem .4rem; border-radius: 5px; background: var(--sand); color: var(--ink);
  font-size: .8rem; line-height: 1.3; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.agenda-chip:hover { background: #e9e5da; }
.agenda-chip.is-closed { background: #fbe3e1; color: var(--warn); }
.agenda-chip-time { font-weight: 700; margin-right: .3rem; font-variant-numeric: tabular-nums; }
.agenda-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; }
.agenda-week-day { min-height: 12rem; padding: .6rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.agenda-week-day.is-today { border-color: var(--brand); box-shadow: inset 0 3px 0 var(--brand); }
.agenda-week-day h3 { margin: 0 0 .4rem; font-size: .95rem; }
.agenda-week-day h3 a { color: inherit; text-decoration: none; }
.agenda-week .agenda-chip { white-space: normal; padding: .35rem .45rem; }
.agenda-week .agenda-chip > * { display: block; }
.agenda-period-list, .agenda-phone-list { display: none; }
@media (max-width: 900px) {
  .agenda-views, .agenda-calendar, .is-wide-only { display: none; }
  .agenda-period-list, .agenda-phone-list { display: block; }
}

/* ---------- Documents ---------- */
.doc-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.doc-item { display: flex; align-items: center; gap: .8rem; }
.doc-link {
  display: flex; align-items: center; gap: .9rem; flex: 1; min-width: 0;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .8rem 1rem; text-decoration: none; color: inherit;
}
.doc-link:hover { border-color: var(--accent); }
.doc-type {
  flex: none; min-width: 3.4rem; text-align: center; font-size: .7rem; font-weight: 700;
  letter-spacing: .06em; padding: .3rem .4rem; border-radius: 5px;
  background: var(--accent); color: #fff;
}
.doc-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.doc-body strong { overflow-wrap: anywhere; }

/* ---------- Opening hours and link lists ---------- */
/* De openingstijden op de homepage: de dag, en rechts de tijd met daaronder
   tot wanneer de schietbaan open is. Twee kolommen passen ook op een telefoon. */
.hours-table { width: 100%; border-collapse: collapse; }
.hours-table th, .hours-table td { text-align: left; vertical-align: top; padding: .4rem 0; border-bottom: 1px solid var(--line); line-height: 1.45; }
.hours-table th { font-weight: 600; padding-right: 1rem; }
.hours-table td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hours-table tr:first-child > * { padding-top: 0; }
.hours-range { display: block; font-size: .8rem; color: var(--ink-soft); }
/* Een regel zonder tijd is een opmerking over de hele breedte, in gewone
   letter; opmerkingen na elkaar zonder lijn ertussen. */
.hours-table .hours-note td { text-align: left; white-space: normal; font-size: .9rem; color: var(--ink-soft); }
.hours-table .hours-note:has(+ .hours-note) td { border-bottom: 0; padding-bottom: 0; }
.hours-notes { margin: .9rem 0 0; padding-left: 1.1rem; font-size: .85rem; color: var(--ink-soft); }
.hours-notes li + li { margin-top: .3rem; }

/* De werkbalk boven een tekst in het beheer (text_format_controller.js). */
.format-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: .1rem 0 .35rem; }
.format-button { min-width: 2.1rem; height: 2.1rem; padding: 0 .55rem; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); font: inherit; font-size: .85rem; line-height: 1; cursor: pointer; }
.format-button:hover { border-color: var(--ink-soft); }
.format-button.format-color { font-weight: 700; font-size: 1rem; }
.format-divider { width: 1px; height: 1.4rem; background: var(--line); margin: 0 .15rem; }

/* De vaste kleuren voor tekst uit het beheer (SiteFormatting): donker genoeg om
   op de lichte achtergrond te lezen. Op een donkere achtergrond, zoals de kop van
   een pagina, een lichtere tint; anders valt groen op groen weg. */
.kleur-oranje { color: #a85b17; }
.kleur-groen { color: var(--brand); }
.kleur-rood { color: var(--warn); }
.kleur-grijs { color: var(--ink-soft); }
:is(.site-header, .page-header, .cta, .site-footer) .kleur-oranje { color: #f4b67e; }
:is(.site-header, .page-header, .cta, .site-footer) .kleur-groen { color: #a8dcc2; }
:is(.site-header, .page-header, .cta, .site-footer) .kleur-rood { color: #ffb3ab; }
:is(.site-header, .page-header, .cta, .site-footer) .kleur-grijs { color: rgba(255, 255, 255, .7); }

.link-list { list-style: none; padding: 0; margin: 0 0 1.6rem; display: grid; gap: .4rem; }
.link-list li { padding-left: 1rem; position: relative; }
.link-list li::before { content: "\2192"; position: absolute; left: 0; color: var(--accent); }

/* ---------- Printable score card ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.scorecard {
  position: relative;
  background: #fff;
  color: #000;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  max-width: 900px;
  margin: 0 auto 2rem;
  padding: 2rem 2.2rem 1.2rem;
  font-family: Arial, Helvetica, sans-serif;
  overflow: hidden;
}

/* Faint club monogram behind the sheet, like the watermark on the paper card. */
.scorecard::before {
  content: "SV DE FLINT";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: clamp(2.5rem, 9vw, 6rem); font-weight: 700; letter-spacing: .2em;
  color: rgba(22, 32, 28, .045);
  transform: rotate(-12deg);
  pointer-events: none;
}

.scorecard > * { position: relative; }

.scorecard-title {
  text-align: center; font-style: italic; font-size: 1.6rem; margin: 0 0 .7rem;
}

.scorecard-band {
  background: #808080; color: #fff; font-weight: 700; font-size: 1.05rem;
  padding: .35rem .8rem; margin: 0 0 1.4rem;
}

.scorecard-meta { font-size: .9rem; }
.scorecard-meta dl {
  display: grid; grid-template-columns: 150px 1fr; gap: 0;
  margin: 0 0 1.1rem;
}
.scorecard-meta dt, .scorecard-meta dd { font-weight: 700; margin: 0; padding: .05rem 0; }

.scorecard-table {
  border-collapse: collapse; margin: .5rem auto 1.6rem; font-size: .92rem;
  border: 2px solid #000;
}
.scorecard-table th, .scorecard-table td {
  border: 1px solid #000; text-align: center; padding: .18rem .1rem; min-width: 52px; height: 1.5rem;
}
.scorecard-table thead th { font-weight: 700; }
.scorecard-table thead th:first-child { min-width: 200px; text-align: center; }
.scorecard-table tbody th { font-weight: 700; }
.scorecard-table .card-total { background: #d9d9d9; color: #555; font-weight: 700; }
.scorecard-table td.is-max { background: #f6cfcf; font-weight: 700; }

.scorecard-footer {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.2rem;
  border: 1px solid #000; padding: .25rem .5rem; font-size: .72rem; margin: 0;
}
.scorecard-footer span:last-child { white-space: nowrap; }

/* Een telefoon is smaller dan de papieren kaart. De kaart knipt af wat niet
   past (voor het watermerk), dus hier moet de tabel echt passen. Hij is zo
   breed als de kaart, met vaste kolommen: anders werd een kolom met alleen
   enen een streepje naast een kolom met tienen (oktober 2026). Met tien
   schoten per kaart past dat ook op een smalle telefoon. */
@media (max-width: 640px) {
  .scorecard { padding: 1.2rem .8rem .8rem; }
  .scorecard-title { font-size: 1.25rem; }
  .scorecard-meta dl { grid-template-columns: 8.6rem 1fr; }
  .scorecard-table { font-size: .85rem; width: 100%; table-layout: fixed; }
  .scorecard-table th, .scorecard-table td { min-width: 0; padding: .3rem .1rem; }
  .scorecard-table thead th:first-child { min-width: 0; width: 18%; }
  .scorecard-table thead th.card-total { width: 16%; }
  .scorecard-footer { flex-wrap: wrap; }
}

@media print {
  .site-header, .site-footer, .site-bar, .no-print, .flash, .skip-link, .scroll-arrow { display: none !important; }
  body { background: #fff; }
  /* Zonder achtergrond (die drukt de browser niet af) is witte tekst onzichtbaar. */
  .page-header { background: none; color: var(--ink); padding: 0 0 .6rem; }
  .page-header .lead { color: var(--ink-soft); }
  .section, .print-page { padding: 0; }
  .container { width: 100%; }
  .scorecard {
    border: 0; box-shadow: none; max-width: none; margin: 0; padding: 0 0 1rem;
    break-after: page; page-break-after: always;
  }
  .scorecard:last-child { break-after: auto; page-break-after: auto; }
  @page { size: A4 portrait; margin: 14mm; }
  .print-only { display: block; }
  /* De kleuren zijn hier informatie, dus ze moeten mee op papier. */
  .registration { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .registration-table { font-size: 9pt; }
  .registration-table td, .registration-table th { padding: .15rem .3rem; }
}

/* Wedstrijdreglement op de site zelf, in plaats van als PDF-bestand. */
.reglement h3 { margin: 1.1rem 0 .3rem; font-size: 1rem; color: var(--brand); }
.reglement h3:first-child { margin-top: 0; }
.reglement p { margin: 0 0 .6rem; }
.reglement-list { margin: 0 0 .6rem; padding-left: 1.1rem; }
.reglement-list li { margin-bottom: .25rem; }

/* Een uitleg die verschijnt als je met de muis op iets staat of erop tikt,
   zoals de reden bij BM. Verborgen zoals .visually-hidden, zodat een
   schermlezer hem wel voorleest en hij in een smalle tabel geen scrolbalk
   veroorzaakt. Rechts ernaast, zodat hij in een tabel met eigen scrolbalk niet
   tegen de bovenrand wordt afgeknipt. */
.tip { position: relative; display: inline-block; cursor: help; border-radius: 6px; }
.tip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.tip-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tip:hover .tip-text, .tip:focus .tip-text {
  left: calc(100% + .5rem); top: 50%; transform: translateY(-50%); z-index: 20;
  width: max-content; max-width: 18rem; height: auto; overflow: visible; clip-path: none;
  padding: .4rem .6rem; border-radius: 6px; background: var(--ink); color: #fff;
  font-size: .8rem; font-weight: 400; line-height: 1.35; white-space: normal; text-align: left;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18); animation: tip-in .15s ease-out;
}
.tip:hover .tip-text::before, .tip:focus .tip-text::before {
  content: ""; position: absolute; right: 100%; top: 50%; transform: translateY(-50%);
  border: 5px solid transparent; border-right-color: var(--ink);
}
@keyframes tip-in { from { opacity: 0; transform: translate(-.3rem, -50%); } }

/* Opmerkingen bij een kaart: een rood vlaggetje met het aantal, en een plusje
   om er een te schrijven. */
.note-flag { display: inline-flex; align-items: center; gap: .15rem; padding: .05rem .35rem; border-radius: 99px;
  background: #fdecea; color: var(--warn); font-size: .72rem; font-weight: 700; line-height: 1.4; white-space: nowrap; vertical-align: .08em; }
.note-flag svg { flex: none; }
/* Een bericht voor de schutter: geen alarm maar iets om te lezen, dus groen. */
.note-flag-shooter { background: #dcefe3; color: var(--brand); }
.note-flag-link { text-decoration: none; }
.note-add { margin-left: .2rem; width: 1.35rem; height: 1.35rem; padding: 0; border: 1px solid var(--line); border-radius: 50%;
  background: var(--paper); color: var(--ink-soft); font-size: .85rem; line-height: 1; cursor: pointer; vertical-align: .05em; }
.note-add:hover, .note-add:focus-visible { border-color: var(--warn); color: var(--warn); }
.card-notes { margin-top: 1.5rem; }
.note-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.note { border-top: 1px solid var(--line); padding: .7rem 0; }
.note-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.note-head .note-delete { margin-left: auto; }
/* Een bestandsnaam van een telefoonfoto heeft geen spaties; zonder afbreken rekt hij de pagina op. */
.note-body { margin: .35rem 0 0; overflow-wrap: anywhere; }
.note-photos { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.note-photo img { display: block; height: 7.5rem; width: auto; max-width: 100%; border-radius: 6px; border: 1px solid var(--line); object-fit: cover; }
.note-form-row { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.note-form-row .field:first-child select { width: auto; }
.note-form-body { flex: 1 1 18rem; }

/* Tweestapsverificatie: de QR-code, de sleutel en het veld voor de code. */
.otp-steps { padding-left: 1.2rem; margin: 1rem 0; }
.otp-steps li { margin-bottom: .8rem; }
.otp-qr { width: 12rem; margin: .6rem 0; padding: .5rem; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.otp-qr svg { display: block; width: 100%; height: auto; }
.otp-secret { display: block; margin: .4rem 0; font-size: 1rem; letter-spacing: .06em; word-spacing: .3em; overflow-wrap: anywhere; }
input.otp-field { font-size: 1.4rem; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }

/* Het wijzigingenlog: wie wat wanneer aanpaste. */
.audit-filter select { width: auto; max-width: 100%; }
.audit-filter .notes-search { width: auto; flex: 1 1 12rem; min-width: 10rem; }
.note-legend { margin: .6rem 0 0; }
.audit-log td { vertical-align: top; }
.nowrap { white-space: nowrap; }
.last-change { margin: 1.2rem 0 0; }

/* ---------- Scorebord: het scherm in de kantine ----------
   Gemaakt voor een tv op een paar meter afstand. Alle maten hangen aan de
   hoogte van het scherm (vh), dus op elk formaat staat er hetzelfde. Elke
   dia heeft dezelfde regelhoogte en letters, ook met maar een paar schutters:
   dan blijft de rest van het scherm leeg. Bij deze --row passen er 13
   (Scoreboard::PER_SLIDE); wie --row verandert, past dat getal aan. */
.board-body { margin: 0; background: #0b2019; overflow: hidden; }
.board {
  --board-accent: #e0a458;
  --board-text: #f4f1e8;
  --board-muted: rgba(244, 241, 232, .6);
  --board-line: rgba(255, 255, 255, .07);
  position: fixed; inset: 0; display: grid; grid-template-rows: auto 1fr auto;
  background: radial-gradient(120% 90% at 12% 0%, #1f4b39 0%, #123226 50%, #0b2019 100%);
  color: var(--board-text); cursor: none; user-select: none;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.board [hidden] { display: none !important; }

.board-bar { display: flex; align-items: center; justify-content: space-between; gap: 2vw; padding: 2.4vh 3vw 1vh; }
.board-brand { display: flex; align-items: center; gap: 1.1vw; }
.board-logo { width: 6vh; height: 6vh; color: #e9e2cf; flex: none; }
.board-brand strong { display: block; font-size: 3.2vh; letter-spacing: .01em; }
.board-brand span { display: block; font-size: 1.7vh; color: var(--board-muted); text-transform: uppercase; letter-spacing: .14em; }
.board-status { display: flex; align-items: center; gap: 1.6vw; }
.board-clock { text-align: right; }
.board-clock time { display: block; font-size: 4vh; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.board-clock small { display: block; font-size: 1.7vh; color: var(--board-muted); margin-top: .4vh; }
.board-offline {
  font-size: 1.6vh; padding: .5vh 1vw; border-radius: 99px;
  background: rgba(224, 164, 88, .16); color: var(--board-accent); animation: board-pulse 2s ease-in-out infinite;
}

.board-stage { position: relative; overflow: hidden; margin: 0 3vw; }
.board-slide {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  --row: 5.2vh;
}
.board-slide-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 2vw;
  padding: .6vh 0 1.4vh; margin-bottom: .6vh; border-bottom: .3vh solid var(--board-accent);
}
.board-slide-head h1 { margin: 0; font-size: 4.6vh; font-weight: 800; letter-spacing: -.01em; color: #fff; line-height: 1.1; }
.board-slide-head p { margin: 0; font-size: 2vh; color: var(--board-muted); white-space: nowrap; }

.board-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: calc(var(--row) * .5); }
.board-table th {
  font-size: max(1.3vh, calc(var(--row) * .3)); font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--board-muted); text-align: right; padding: .4vh .7vw .7vh; white-space: nowrap;
}
.board-table td {
  height: var(--row); padding: 0 .7vw; text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--board-line);
}
.board-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .025); }
.board-table .board-rank { width: 4.5vw; text-align: center; font-weight: 700; color: var(--board-accent); }
.board-table .board-name { text-align: left; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.board-table .board-num { width: 6.4vw; }
.board-table .board-turn { width: 5.2vw; color: rgba(244, 241, 232, .85); }
.board-table .board-total { font-weight: 800; color: #fff; }
.board-table .is-hidden { background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .035) 0 .5vh, transparent .5vh 1vh); }
.board-table tr.is-outside td { opacity: .62; }
.board .check { color: #8fd1a8; }
.board .is-late { color: #ff9d92; }
.board-badge-late { background: rgba(255, 120, 105, .2); color: #ff9d92; }
.board .score-empty::after { color: rgba(255, 255, 255, .22); }

.medal {
  display: inline-grid; place-items: center; width: calc(var(--row) * .82); height: calc(var(--row) * .82);
  border-radius: 50%; color: #1c1406; font-weight: 800; box-shadow: 0 .3vh .8vh rgba(0, 0, 0, .35);
}
.medal-1 { background: linear-gradient(135deg, #fbe38f, #d5a21c); }
.medal-2 { background: linear-gradient(135deg, #f3f5f7, #a9b3bd); }
.medal-3 { background: linear-gradient(135deg, #f3c29a, #b46f3a); }
.board-badge {
  display: inline-block; margin-left: .7vw; padding: .08em .45em; border-radius: .35em; vertical-align: .12em;
  font-size: .62em; font-weight: 700; letter-spacing: .06em; background: rgba(224, 164, 88, .18); color: var(--board-accent);
}

.board-foot { display: flex; align-items: center; gap: 1.4vw; padding: 1.4vh 3vw 2.2vh; }
.board-progress { flex: 1; height: .5vh; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.board-progress span {
  display: block; height: 100%; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--board-accent), #f6d29e);
}
.board-counter { min-width: 5em; text-align: right; font-size: 1.8vh; color: var(--board-muted); font-variant-numeric: tabular-nums; }

.board-empty { margin: auto; text-align: center; font-size: 2.4vh; color: var(--board-muted); }
.board-empty-title { font-size: 5vh; font-weight: 800; color: #fff; margin: 0 0 1vh; }
.board-noscript { position: fixed; inset: auto 0 45vh; text-align: center; font-size: 3vh; }

/* Een nieuwe dia: de titel schuift binnen, de regels volgen één voor één.
   De vorige vervaagt ondertussen naar achteren. */
.board-slide.is-current .board-slide-head h1 { animation: board-in-right .8s cubic-bezier(.16, 1, .3, 1) both; }
.board-slide.is-current .board-slide-head p { animation: board-in-right .8s .08s cubic-bezier(.16, 1, .3, 1) both; }
.board-slide.is-current .board-table thead { animation: board-fade .6s .15s both; }
.board-slide.is-current .board-table tbody tr {
  animation: board-row-in .65s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(.22s + var(--i) * 38ms);
}
.board-slide.is-current .medal { animation: board-pop .5s calc(.4s + var(--i, 0) * 38ms) cubic-bezier(.34, 1.56, .64, 1) both; }
.board-slide.is-current.board-slide-empty .board-empty { animation: board-fade 1s both; }
.board-slide.is-leaving { animation: board-out .55s cubic-bezier(.7, 0, .84, 0) both; }

@keyframes board-in-right { from { opacity: 0; transform: translateX(3vw); } }
@keyframes board-row-in { from { opacity: 0; transform: translateX(-1.6vw); } }
@keyframes board-fade { from { opacity: 0; } }
@keyframes board-pop { from { opacity: 0; transform: scale(.4); } }
@keyframes board-out { to { opacity: 0; transform: translateY(-1.2vh) scale(.985); filter: blur(3px); } }
@keyframes board-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes board-pulse { 50% { opacity: .55; } }

/* Wie het scorebord op een telefoon opent: plek, naam, beurten, totaal en
   gemiddelde, net als de stand op de site. */
@media (max-width: 700px) {
  .board-table .board-turn { display: none; }
  .board-table .board-num { width: 16vw; }
  .board-table .board-rank { width: 10vw; }
  .board-slide-head { flex-direction: column; gap: .4vh; }
  .board-slide-head p { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .board-slide.is-current .board-slide-head h1, .board-slide.is-current .board-slide-head p,
  .board-slide.is-current .board-table thead, .board-slide.is-current .board-table tbody tr,
  .board-slide.is-current .medal { animation: board-fade .4s both; }
  .board-slide.is-leaving { animation: board-fade .4s reverse both; }
}