/*
 * 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 ---------- */
.site-header {
  background: var(--brand-dark);
  color: #fff;
  position: sticky; top: 0; z-index: 40;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}
.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-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; }
.nav-link {
  color: rgba(255, 255, 255, .84); text-decoration: none;
  padding: .45rem .7rem; 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; }
.nav-link-admin { color: var(--accent-soft); }
.nav-divider { width: 1px; height: 22px; background: rgba(255, 255, 255, .2); margin: 0 .5rem; }
.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; }

.nav-toggle, .nav-toggle-label { display: none; }

@media (max-width: 900px) {
  .nav-toggle-label {
    display: block; width: 44px; height: 38px; border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 8px; cursor: pointer; position: relative;
  }
  .nav-toggle-label span, .nav-toggle-label span::before, .nav-toggle-label span::after {
    content: ""; position: absolute; left: 10px; width: 22px; height: 2px; background: #fff;
  }
  .nav-toggle-label span { top: 18px; }
  .nav-toggle-label span::before { top: -7px; left: 0; }
  .nav-toggle-label span::after { top: 7px; left: 0; }
  .site-nav { display: none; width: 100%; flex-direction: column; align-items: stretch; padding-bottom: .6rem; }
  .nav-toggle:checked ~ .site-nav { display: flex; }
  .nav-link { padding: .6rem .5rem; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .nav-divider { display: none; }
  .nav-button { text-align: center; margin-top: .5rem; }
}

/* ---------- Hero and sections ---------- */
.hero {
  background:
    linear-gradient(180deg, rgba(16, 38, 29, .86), rgba(16, 38, 29, .92)),
    repeating-linear-gradient(135deg, #24503f 0 18px, #1d4433 18px 36px);
  color: #fff; padding: 5rem 0;
}
.hero h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); max-width: 18ch; }
.hero p { color: rgba(255, 255, 255, .85); font-size: 1.15rem; max-width: 55ch; }
.hero-actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.6rem; }

.section { padding: 2rem 0; }
.section-sand { background: var(--sand); }
.section-paper { background: var(--paper); }
.section-head { max-width: 62ch; margin-bottom: 1.2rem; }
.eyebrow {
  text-transform: uppercase; letter-spacing: .12em; font-size: .75rem;
  color: var(--accent); font-weight: 700; margin-bottom: .4rem;
}

.page-header { background: var(--brand); color: #fff; padding: 1.5rem 0; }
.page-header h1 { margin-bottom: .2rem; }
.page-header .lead { color: rgba(255, 255, 255, .85); }

.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; }
.card p:last-child { margin-bottom: 0; }
.card-accent { border-top: 4px solid var(--accent); }

.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; }

.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; }

/* ---------- Buttons and forms ---------- */
.btn {
  display: inline-block; border: 0; cursor: pointer; font-family: inherit; font-size: .95rem;
  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; }
.btn-outline { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.btn-outline:hover { background: var(--sand); color: var(--ink); }
.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; }

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="date"], 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);
}
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; }

.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); }

/* ---------- 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; }
table.data .rank { font-weight: 700; color: var(--brand); width: 2.2rem; }
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); }

/* 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; }
.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; }
@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); }
.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, .card-serial, input.serial-field, input.lookup-field {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums;
}
.card-serial { display: block; font-size: .78rem; font-weight: 400; color: var(--ink-soft); }
input.lookup-field { max-width: 20rem; font-size: 1.1rem; }
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; }
.turn-tab.is-hidden-turn { border-style: dashed; }

/* ---------- 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; }

.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; }

.login-wrap { max-width: 420px; margin: 3rem auto; }
.login-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow); }

/* ---------- Footer ---------- */
.site-footer { background: var(--brand-dark); color: rgba(255, 255, 255, .78); margin-top: 3rem; padding: 3rem 0 1.5rem; }
.site-footer h3 { color: #fff; font-size: .95rem; text-transform: uppercase; letter-spacing: .08em; }
.site-footer a { color: rgba(255, 255, 255, .85); }
.site-footer a:hover { color: var(--accent); }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .35rem; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 2rem; padding-top: 1.2rem; font-size: .82rem; }
.footer-bottom p { margin: 0; }

/* ---------- Admin shell ---------- */
.admin-bar { background: #10261d; color: #fff; padding: .5rem 0; font-size: .85rem; }
.admin-bar .container { display: flex; gap: .25rem; flex-wrap: wrap; align-items: center; }
.admin-bar strong { margin-right: .4rem; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; color: rgba(255,255,255,.65); }
.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); }
.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; }

.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; }

/* ---------- Members' bar ---------- */
.member-bar { background: var(--sand, #efe9dd); border-bottom: 1px solid var(--line); padding: .5rem 0; font-size: .85rem; }

/* De balk die zegt waar je bent blijft staan bij het scrollen; de koptekst
   erboven mag wel weg, die zegt niets meer zodra je aan het lezen bent. */
.member-bar, .admin-bar { position: sticky; top: 0; z-index: 30; }
.admin-bar .bar-back { margin-left: .4rem; border: 1px solid rgba(255, 255, 255, .35); }

.member-bar .container { display: flex; gap: .25rem; flex-wrap: wrap; align-items: center; }
.member-bar strong { margin-right: .4rem; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; color: var(--muted); }
.member-bar a { color: var(--ink); text-decoration: none; padding: .22rem .45rem; border-radius: 6px; white-space: nowrap; }
.member-bar a:hover, .member-bar a.is-active { background: rgba(0, 0, 0, .08); }

.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); }

/* ---------- 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 ---------- */
.hours-table { width: 100%; border-collapse: collapse; }
.hours-table th, .hours-table td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--line); }
.hours-table thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.hours-table tbody th { font-weight: 600; }

.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. */
@media (max-width: 640px) {
  .scorecard { padding: 1.2rem .8rem .8rem; }
  .scorecard-title { font-size: 1.25rem; }
  .scorecard-meta dl { grid-template-columns: 110px 1fr; }
  .scorecard-table { font-size: .8rem; }
  .scorecard-table th, .scorecard-table td { min-width: 0; padding: .15rem .1rem; }
  .scorecard-table thead th:first-child { min-width: 0; }
  .scorecard-footer { flex-wrap: wrap; }
}

@media print {
  .site-header, .site-footer, .admin-bar, .member-bar, .no-print, .flash, .skip-link { display: none !important; }
  body { background: #fff; }
  .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; }
}

/* 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; }
.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; }
.note-body { margin: .35rem 0 0; }
.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-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), zodat 25 schutters precies passen, op elk
   formaat. Een dia met minder schutters krijgt grotere regels. */
.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: min(5.8vh, calc((100vh - 27vh) / (var(--rows) + 1)));
}
.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 .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; }
}