/* Huisstijl SV De Vrijheid — gedeeld door lijstcompetitie2, dienstrooster en ledenbeheer.
   Afgestemd op het WordPress-thema: bijna-zwart, oranje accent, witte kaart, vette schreefloze koppen,
   blauwe links. Ontwerpregels: /huisstijl/DESIGN.md. Dit is de énige stylesheet: ook wat maar op één plek voorkomt
   (rooster, ranglijst) staat hier, in een eigen sectie onderaan. Geen losse kleuren of maten: alleen tokens. */

:root {
  /* Kleur */
  --c-ink: #111318;            /* koppen, header WP */
  --c-text: #2b2f36;
  --c-muted: #5b6270;
  --c-line: #e5e7eb;
  --c-line-strong: #8a909a;   /* rand invoervelden: >= 3:1 */
  --c-surface: #ffffff;
  --c-surface-2: #f4f4f5;      /* tabelkop, segmenten */
  --c-surface-3: #ebebee;
  --c-accent: #f6a623;         /* "Inloggen"-knop WP */
  --c-accent-strong: #e08e00;
  --c-accent-soft: #fff4e0;
  --c-accent-ink: #1d1400;
  --c-link: #1a73d9;
  --c-up: #12703a;
  --c-up-soft: #e8f6ed;
  --c-down: #b42318;
  --c-down-soft: #fdecea;
  --c-goud: #e8b923;
  --c-zilver: #a8b0bb;
  --c-brons: #9c5b22;
  --c-focus: #1a73d9;
  --c-ink-tekst: #c9ccd3;       /* tekst op de donkere beheerbalk en donkere tegels */
  --c-op-donker: #ffffff;      /* tekst en randen op --c-ink */
  --c-op-donker-rand: rgb(255 255 255 / .45);
  --c-accent-tekst: #8a5300;   /* tekst op --c-accent-soft */
  --c-down-hover: #fdf0f0;     /* hover van een rode (stille) knop */
  --c-rij-hover: #fafafa;
  --c-doorhaal: rgb(91 98 112 / .5);
  --c-overlay: rgb(17 19 24 / .45);   /* achter een dialoog */
  --c-goud-ink: #3b2c00;
  --c-zilver-ink: #1f2937;
  --c-brons-ink: #ffffff;
  --c-code-opgelegd: #4b5563;
  /* Plankje: schilden (metaal licht/donker), stempelinkt en het houten bord */
  --c-goud-licht: #f8e08a;
  --c-goud-donker: #9a7410;
  --c-zilver-licht: #e3e7ec;
  --c-zilver-donker: #6b7480;
  --c-brons-licht: #e0a46a;
  --c-brons-donker: #6a3a12;
  --c-stempel: #2f3fa0;              /* blauwe inkt */
  --c-hout: #8b5a32;
  --c-hout-licht: #b07a4a;
  --c-hout-donker: #5a3519;
  --c-hout-tekst: #f6e7d2;           /* ingebrande tekst op het hout */
  --c-hout-nerf: rgb(60 30 10 / .16);
  --c-hout-glans: rgb(255 236 205 / .22);

  /* Typografie */
  --f-kop: "Montserrat", "Avenir Next", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --f-tekst: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-2xs: .6875rem;   /* 11px: stip, grafiekas, kleine onderschriften */
  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.625rem;
  --fs-2xl: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);

  /* Ruimte, vorm, diepte */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgb(17 19 24 / .06), 0 1px 1px rgb(17 19 24 / .04);
  --shadow-2: 0 8px 24px rgb(17 19 24 / .10);
  --t-snel: 120ms ease-out;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-surface);
  color: var(--c-text);
  font: 400 var(--fs-md)/1.5 var(--f-tekst);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--c-link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; border-radius: 4px; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.lc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lc-num { font-variant-numeric: tabular-nums; }

.lc { max-width: 1120px; margin: 0 auto; padding: var(--s-4) var(--s-4) var(--s-6); }

/* ---------- Kop + zoeken ---------- */
.lc-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-4); }
.lc-eyebrow { margin: 0 0 var(--s-1); font: 600 var(--fs-xs)/1 var(--f-kop); letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); }
.lc-h1 { margin: 0; font: 800 var(--fs-2xl)/1.1 var(--f-kop); color: var(--c-ink); letter-spacing: -.01em; }
.lc-h2 { margin: 0; font: 800 var(--fs-xl)/1.2 var(--f-kop); color: var(--c-ink); }
.lc-h3 { margin: 0; font: 700 var(--fs-lg)/1.25 var(--f-kop); color: var(--c-ink); }

.lc-zoek { position: relative; flex: 1 1 280px; max-width: 380px; }
.lc-zoek__icoon { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: var(--c-muted); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.lc-zoek__invoer {
  width: 100%; height: 44px; padding: 0 var(--s-4) 0 42px;
  border: 1.5px solid var(--c-line-strong); border-radius: var(--r-pill);
  background: var(--c-surface-2); font: inherit; color: var(--c-ink);
  transition: border-color var(--t-snel), background var(--t-snel);
}
.lc-zoek__invoer:hover { border-color: var(--c-ink); }
.lc-zoek__invoer:focus { outline: none; border-color: var(--c-ink); background: var(--c-surface); box-shadow: 0 0 0 4px var(--c-accent-soft); }
.lc-zoek__lijst {
  position: absolute; z-index: 10; left: 0; right: 0; top: calc(100% + 6px);
  margin: 0; padding: var(--s-1); list-style: none; background: var(--c-surface);
  border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: var(--shadow-2);
}
.lc-zoek__lijst a { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); color: var(--c-text); }
.lc-zoek__lijst a:hover, .lc-zoek__lijst a[aria-selected="true"] { background: var(--c-accent-soft); text-decoration: none; }
.lc-zoek__lijst small { margin-left: auto; color: var(--c-muted); }

/* ---------- Navigatie ---------- */
.lc-nav { display: flex; gap: var(--s-5); border-bottom: 1px solid var(--c-line); margin-bottom: var(--s-5); overflow-x: auto; scrollbar-width: none; }
.lc-nav__item {
  padding: var(--s-3) 0; margin-bottom: -1px; border-bottom: 3px solid transparent;
  font: 700 var(--fs-sm)/1 var(--f-kop); letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); white-space: nowrap;
}
.lc-nav__item:hover { color: var(--c-ink); text-decoration: none; }
.lc-nav__item[aria-current="page"] { color: var(--c-ink); border-bottom-color: var(--c-accent); }

/* Segmented control (jaar) */
.lc-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--c-surface-2); border-radius: var(--r-pill); }
.lc-seg__item { padding: 7px 14px; border-radius: var(--r-pill); font: 600 var(--fs-sm)/1 var(--f-tekst); color: var(--c-text); font-variant-numeric: tabular-nums; }
.lc-seg__item:hover { background: var(--c-surface-3); text-decoration: none; }
.lc-seg__item[aria-current="true"] { background: var(--c-ink); color: var(--c-op-donker); }

/* Chips (discipline/competitie) */
.lc-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.lc-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px;
  border: 1.5px solid var(--c-line); border-radius: var(--r-pill); background: var(--c-surface);
  font: 600 var(--fs-sm)/1 var(--f-tekst); color: var(--c-text); white-space: nowrap;
  transition: border-color var(--t-snel), background var(--t-snel);
}
.lc-chip:hover { border-color: var(--c-accent); text-decoration: none; }
.lc-chip[aria-current="true"] { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-accent-ink); }
.lc-chip small { font-weight: 500; opacity: .7; }
.lc-chips--klein .lc-chip { height: 30px; padding: 0 11px; font-size: var(--fs-xs); }

.lc-balk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.lc-balk--los { align-items: flex-end; margin-bottom: 0; }   /* binnen een kaart: geen ruimte eronder, knoppen op één lijn met velden */
.lc-stack > * + * { margin-top: var(--s-5); }

/* ---------- Kaarten & secties ---------- */
.lc-kaart { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); overflow: hidden; }
.lc-kaart__kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); padding: var(--s-4) var(--s-4) var(--s-3); }
.lc-kaart__kop p { margin: 0; color: var(--c-muted); font-size: var(--fs-sm); }
.lc-kaart__body { padding: 0 var(--s-4) var(--s-4); }
.lc-code { display: inline-block; margin-right: var(--s-2); padding: 3px 8px; border-radius: var(--r-sm); background: var(--c-ink); color: var(--c-op-donker); font: 700 var(--fs-xs)/1.2 var(--f-kop); letter-spacing: .04em; vertical-align: 3px; }

/* ---------- Tabel ---------- */
.lc-tabel-wrap { overflow-x: auto; }
.lc-tabel { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.lc-tabel th {
  padding: 10px var(--s-3); background: var(--c-surface-2); color: var(--c-muted);
  font: 700 var(--fs-xs)/1.2 var(--f-kop); letter-spacing: .06em; text-transform: uppercase; text-align: left; white-space: nowrap;
}
.lc-tabel td { padding: 10px var(--s-3); border-top: 1px solid var(--c-line); vertical-align: middle; }
.lc-tabel tbody tr { transition: background var(--t-snel); }
.lc-tabel tbody tr:hover { background: var(--c-rij-hover); }
.lc-tabel .r { text-align: right; }
.lc-tabel .c { text-align: center; }
.lc-hoofdgetal { font: 800 var(--fs-md)/1 var(--f-kop); color: var(--c-ink); font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .lc-tabel .m-verberg { display: none; }
  .lc-tabel th, .lc-tabel td { padding-left: var(--s-2); padding-right: var(--s-2); }
}

/* ---------- Labels & tegels ---------- */
.lc-label { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--r-pill); background: var(--c-surface-2); color: var(--c-text); font-size: var(--fs-xs); font-weight: 600; }
.lc-label--oranje { background: var(--c-accent-soft); color: var(--c-accent-tekst); }
.lc-label--op { background: var(--c-up-soft); color: var(--c-up); }
.lc-label--neer { background: var(--c-down-soft); color: var(--c-down); }

.lc-tegels { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
@media (min-width: 720px) { .lc-tegels { grid-template-columns: repeat(4, 1fr); } }
.lc-tegels.lc-tegels--twee { grid-template-columns: repeat(2, 1fr); margin: 0; }
.lc-tegel { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--c-surface-2); }
.lc-tegel dt { font-size: var(--fs-xs); color: var(--c-muted); font-weight: 600; letter-spacing: .02em; }
.lc-tegel dd { margin: 4px 0 0; font: 800 var(--fs-xl)/1.1 var(--f-kop); color: var(--c-ink); font-variant-numeric: tabular-nums; }
.lc-tegel dd small { font: 600 var(--fs-xs)/1 var(--f-tekst); color: var(--c-muted); }
.lc-tegel--accent { background: var(--c-ink); }
.lc-tegel--accent dt { color: var(--c-ink-tekst); }
.lc-tegel--accent dd { color: var(--c-accent); }

/* ---------- Uitklappen ---------- */
details.lc-uitklap > summary { cursor: pointer; margin-top: var(--s-4); list-style: none; }
details.lc-uitklap > summary::-webkit-details-marker { display: none; }
details.lc-uitklap > summary:not(.lc-knop) { font-weight: 600; font-size: var(--fs-sm); color: var(--c-ink); }
details.lc-uitklap > summary .lc-chevron, details.lc-uitklap > summary:not(.lc-knop)::before { transition: transform var(--t-snel); }
details.lc-uitklap > summary:not(.lc-knop)::before { content: ""; display: inline-block; width: .5em; height: .5em; margin: 0 .6em .1em .1em; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg); }
details.lc-uitklap[open] > summary:not(.lc-knop)::before { transform: rotate(45deg); }
details.lc-uitklap:not([open]) > summary .lc-chevron { transform: rotate(-90deg); }

/* Inklapbare kaartkop */
.lc-vouw { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); margin: -6px -10px; padding: 6px 10px; border: 0; border-radius: var(--r-sm); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.lc-vouw:hover { background: var(--c-surface-2); }
.lc-vouw .lc-code, .lc-vouw .lc-wapen { margin-right: 0; }
.lc-vouw .lc-chevron { color: var(--c-muted); transition: transform var(--t-snel); }
.lc-vouw[aria-expanded="false"] .lc-chevron { transform: rotate(-90deg); }
.lc-kaart__kop:has(.lc-vouw[aria-expanded="false"]) { padding-bottom: var(--s-4); }

/* ---------- Overig ---------- */
.lc-leeg { padding: var(--s-6) var(--s-4); text-align: center; color: var(--c-muted); background: var(--c-surface-2); border-radius: var(--r-lg); }
.lc-leeg p { margin: 0; }
.lc-terug { margin-bottom: var(--s-4); }
.lc-resultaten { margin: 0; padding: 0; list-style: none; }
.lc-resultaten li + li { border-top: 1px solid var(--c-line); }
.lc-resultaten a { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); color: var(--c-ink); }
.lc-resultaten a:hover { background: var(--c-rij-hover); text-decoration: none; }
.lc-resultaten .rechts { margin-left: auto; text-align: right; font-size: var(--fs-xs); color: var(--c-muted); }
.lc-voet { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--c-line); font-size: var(--fs-xs); color: var(--c-muted); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* =========================================================
   Beheer
   ========================================================= */
.lc-beheer { background: var(--c-surface-2); }
.lc-beheer .lc { max-width: 1240px; }
.lc-beheerkop { background: var(--c-ink); color: var(--c-op-donker); }
/* Eén regel: navigatie links, kleine knoppen rechts. Zonder navigatie (login) staat de naam er. */
.lc-beheerkop__binnen { display: flex; align-items: center; gap: var(--s-4); max-width: 1240px; min-height: 52px; margin: 0 auto; padding: 0 var(--s-4); }
.lc-beheerkop__merk { padding: var(--s-3) 0; color: var(--c-op-donker); font: 800 var(--fs-lg)/1.1 var(--f-kop); }
.lc-beheerkop__merk span { display: block; font: 600 var(--fs-xs)/1.4 var(--f-tekst); letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent); }
.lc-beheerkop__merk:hover { text-decoration: none; }
.lc-beheerkop__acties { display: flex; flex: none; align-items: center; gap: var(--s-2); margin-left: auto; }
.lc-beheerkop__acties form { margin: 0; }
.lc-beheerkop__acties .lc-knop { height: 30px; padding: 0 12px; font-size: var(--fs-xs); }
/* Navigatie: onderdelen als pillen; het open onderdeel (oranje pil) klapt horizontaal uit naar zijn tabbladen */
.lc-beheerkop__nav { display: flex; flex: 1 1 auto; align-items: center; min-width: 0; gap: var(--s-3); overflow-x: auto; scrollbar-width: none; }
.lc-navgroep { flex: none; padding: 7px 12px; border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); color: var(--c-ink-tekst); font: 700 var(--fs-xs)/1 var(--f-kop); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
a.lc-navgroep:hover { border-color: var(--c-op-donker); color: var(--c-op-donker); text-decoration: none; }
.lc-navgroep--open { border-color: var(--c-accent); background: var(--c-accent); color: var(--c-accent-ink); }
.lc-navtabs { display: flex; flex: none; align-items: center; gap: var(--s-4); }
.lc-navtabs > .lc-navgroep { margin-right: calc(var(--s-1) * -1); }
.lc-navtabs a { padding: 18px 0 15px; border-bottom: 3px solid transparent; color: var(--c-ink-tekst); font: 700 var(--fs-xs)/1 var(--f-kop); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.lc-navtabs a:hover { color: var(--c-op-donker); text-decoration: none; }
.lc-navtabs a[aria-current="page"] { color: var(--c-op-donker); border-bottom-color: var(--c-accent); }
/* Publieke pagina geopend vanuit het beheer: de balk boven de witte publieke pagina */
.lc-publiek-beheer .lc-beheerkop { margin-bottom: var(--s-4); }
@media (max-width: 980px) {
  .lc-beheerkop__binnen { flex-wrap: wrap; row-gap: 0; padding-top: var(--s-2); }
  .lc-beheerkop__nav { order: 2; flex-basis: 100%; }
}

.lc-beheer-grid { display: grid; gap: var(--s-5); align-items: start; }
@media (min-width: 960px) { .lc-beheer-grid { grid-template-columns: minmax(0, 1fr) 340px; } }

/* Knoppen */
.lc-knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 44px; padding: 0 22px; border: 0; border-radius: var(--r-pill);
  background: var(--c-accent); color: var(--c-accent-ink);
  font: 700 var(--fs-sm)/1 var(--f-kop); letter-spacing: .02em; cursor: pointer;
  transition: background var(--t-snel), transform var(--t-snel);
}
.lc-knop:hover { background: var(--c-accent-strong); text-decoration: none; }
.lc-knop:active { transform: translateY(1px); }
.lc-knop:disabled { opacity: .5; cursor: not-allowed; }
.lc-knop--stil { background: var(--c-surface); color: var(--c-ink); box-shadow: inset 0 0 0 1.5px var(--c-line-strong); }
.lc-knop--stil:hover { background: var(--c-surface-2); }
.lc-knop--klein { height: 34px; padding: 0 16px; }
.lc-knop--gevaar { color: var(--c-down); }
.lc-knop--gevaar:hover { background: var(--c-down-hover); }
/* Knop met alleen een icoon: vierkant, met direct een tooltip uit data-tip (en aria-label voor schermlezers). */
.lc-knop--icoon { position: relative; width: 34px; padding: 0; }
.lc-knop--icoon svg { width: 18px; height: 18px; }
.lc-knop--icoon[data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 5; padding: 4px 8px; border-radius: var(--r-sm); background: var(--c-ink); color: var(--c-op-donker); font: 600 var(--fs-xs)/1.2 var(--f-tekst); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--t-snel); }
.lc-knop--icoon[data-tip]:hover::after, .lc-knop--icoon[data-tip]:focus-visible::after { opacity: 1; }
.lc-hint--met-knop { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-top: var(--s-2); }
.lc-pijl { margin-left: var(--s-2); color: var(--c-muted); font-size: 1.25em; line-height: 1; }

/* Formulieren */
.lc-form { display: grid; gap: var(--s-4); }
.lc-form--inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); }
.lc-form__rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s-3); }
.lc-form__rij--smal { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.lc-form__acties { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s-3); }
.lc-veld { display: grid; gap: 6px; font-size: var(--fs-sm); }
.lc-veld > span { font-weight: 600; color: var(--c-ink); }
.lc-veld input, .lc-veld select, .lc-invoer input, .lc-invoer-cel {
  width: 100%; height: 42px; padding: 0 12px; border: 1.5px solid var(--c-line-strong); border-radius: var(--r-sm);
  background: var(--c-surface); font: inherit; color: var(--c-ink);
  transition: border-color var(--t-snel), box-shadow var(--t-snel);
}
.lc-veld input:focus, .lc-veld select:focus, .lc-invoer input:focus, .lc-invoer-cel:focus { outline: none; border-color: var(--c-ink); box-shadow: 0 0 0 4px var(--c-accent-soft); }
.lc-veld input:user-invalid, .lc-invoer input:user-invalid { border-color: var(--c-down); }
.lc-veld--smal { max-width: 110px; }
.lc-invoer-cel { height: 36px; }
.lc-invoer .lc-invoer-cel { height: 42px; padding: 0 8px; }
.lc-invoer-cel--smal { width: 72px; text-align: right; }
.lc-hint { margin: 0; color: var(--c-muted); font-size: var(--fs-sm); }
.lc-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); }
.lc-filters .lc-veld { min-width: 140px; }
.lc-filters__knoppen { display: flex; align-items: center; gap: var(--s-3); }

/* Invoertabel */
.lc-invoer { width: 100%; border-collapse: collapse; }
.lc-invoer th { padding: 0 0 6px; text-align: left; font: 700 var(--fs-xs)/1.2 var(--f-kop); letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); }
.lc-invoer td { padding: 3px 6px 3px 0; }
.lc-invoer td:first-child { width: 28px; color: var(--c-muted); font-size: var(--fs-sm); }
.lc-invoer td.lc-invoer__schakel { width: 1%; white-space: nowrap; }
.lc-invoer select:disabled { background: var(--c-surface-2); border-color: var(--c-line); color: var(--c-muted); cursor: not-allowed; }

/* Lijstjes & meldingen */
.lc-lijstje { margin: 0; padding: 0 var(--s-4) var(--s-3); list-style: none; font-size: var(--fs-sm); }
.lc-lijstje li { display: flex; justify-content: space-between; gap: var(--s-3); padding: 7px 0; border-top: 1px solid var(--c-line); }
.lc-melding { margin-bottom: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 600; }
.lc-melding--ok { background: var(--c-up-soft); color: var(--c-up); }
.lc-melding--fout { background: var(--c-down-soft); color: var(--c-down); }
.lc-rijacties { display: inline-flex; gap: var(--s-3); align-items: center; }
.lc-rijacties form { margin: 0; }
.lc-bewerkrij td { background: var(--c-accent-soft); }
.lc-paginering { display: flex; justify-content: center; align-items: center; gap: var(--s-4); padding: var(--s-4); font-size: var(--fs-sm); }
.lc-login { max-width: 400px; margin: var(--s-7) auto; padding: var(--s-6); background: var(--c-surface); border-radius: var(--r-lg); box-shadow: var(--shadow-2); }
.lc-login .lc-h2 { margin-bottom: var(--s-2); }
.lc-login .lc-hint { margin-bottom: var(--s-5); }

/* ---------- Sorteren (huisstijl.js: table[data-sorteer]) ---------- */
.lc-sorteer { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.lc-sorteer::after { content: ""; width: .45em; height: .45em; margin-left: 2px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; opacity: .35; transform: rotate(45deg) translateY(-2px); }
th[aria-sort="ascending"] .lc-sorteer::after { opacity: 1; transform: rotate(-135deg) translateY(-1px); }
th[aria-sort="descending"] .lc-sorteer::after { opacity: 1; }
th[aria-sort] { color: var(--c-ink); }

/* ---------- Tabel: varianten ---------- */
/* Lange tabel met vaste kop, maar alleen buiten een iframe: in WordPress scrolt alleen de WordPress-pagina */
html:not(.hs-in-iframe) .lc-tabel-wrap--hoog { max-height: 75vh; overflow: auto; }
html.hs-in-iframe { overflow-y: hidden; }
.lc-tabel-wrap--hoog .lc-tabel th { position: sticky; top: 0; z-index: 2; }
.lc-tabel tr.is-let-op td { background: var(--c-accent-soft); }
.lc-tabel tr.is-fout td { background: var(--c-down-soft); }
.lc-tabel tr.lc-tabel__melding td { padding: 8px var(--s-3); border-top: 0; font-weight: 600; font-size: var(--fs-sm); }
.lc-tabel .is-leeg { color: var(--c-muted); font-style: italic; }
.lc-tabel .w-krap { width: 1%; white-space: nowrap; }
.lc-ikoon { display: block; width: 28px; height: 28px; margin-bottom: 4px; object-fit: contain; }

/* ---------- Meldingen: let op ---------- */
.lc-melding--let-op { background: var(--c-accent-soft); color: var(--c-accent-tekst); }
.lc-melding a { color: inherit; text-decoration: underline; }

/* ---------- Status-stip (bezet / onbezet) ---------- */
.lc-stip { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font: 700 var(--fs-2xs)/1 var(--f-kop); flex: none; vertical-align: middle; }
.lc-stip--ok { background: var(--c-up-soft); color: var(--c-up); }
.lc-stip--fout { background: var(--c-down-soft); color: var(--c-down); }

/* ---------- Keuzechips met vinkje: <label class="lc-chip"><input type="checkbox"> Tekst</label> ---------- */
.lc-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lc-chip:has(input) { cursor: pointer; }
.lc-chip:has(input:checked) { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-accent-ink); }
.lc-chip:has(input:focus-visible) { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.lc-chip:has(input:disabled) { cursor: default; opacity: .5; }

/* ---------- Formulier: extra velden ---------- */
.lc-veld textarea { width: 100%; min-height: 72px; padding: 10px 12px; border: 1.5px solid var(--c-line-strong); border-radius: var(--r-sm); background: var(--c-surface); font: inherit; color: var(--c-ink); resize: vertical; }
.lc-veld textarea:focus { outline: none; border-color: var(--c-ink); box-shadow: 0 0 0 4px var(--c-accent-soft); }
.lc-veld input[type="file"] { height: auto; padding: 6px; }
.lc-veld input[type="file"]::file-selector-button { height: 30px; margin-right: var(--s-3); padding: 0 14px; border: 0; border-radius: var(--r-pill); background: var(--c-surface-2); box-shadow: inset 0 0 0 1.5px var(--c-line-strong); font: 700 var(--fs-xs)/1 var(--f-kop); color: var(--c-ink); cursor: pointer; }
.lc-vink { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); cursor: pointer; }
.lc-vink input { width: 18px; height: 18px; accent-color: var(--c-accent-strong); }
/* Groep vinkjes onder elkaar: <fieldset class="lc-groep"><legend>Kop</legend><label class="lc-vink">…</label>…</fieldset> */
.lc-groep { display: grid; gap: var(--s-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.lc-groep > legend { padding: 0; margin-bottom: var(--s-2); font-family: var(--f-kop); font-weight: 700; color: var(--c-ink); }
.lc-vink:has(input:disabled) { cursor: default; opacity: .6; }

/* ---------- Wijzigingen: oud → nieuw ---------- */
.lc-wijziging { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr 2fr; gap: var(--s-2) var(--s-3); margin: 0; padding: var(--s-3) var(--s-4); font-size: var(--fs-sm); }
.lc-wijziging + .lc-wijziging { border-top: 1px solid var(--c-line); }
.lc-wijziging dt { font-weight: 600; color: var(--c-ink); }
.lc-wijziging dd { margin: 0; padding: 4px 8px; border-radius: var(--r-sm); word-break: break-word; white-space: pre-wrap; }
.lc-wijziging .oud { background: var(--c-surface-2); color: var(--c-muted); text-decoration: line-through; text-decoration-color: var(--c-doorhaal); }
.lc-wijziging .nieuw { background: var(--c-accent-soft); color: var(--c-ink); }
@media (max-width: 640px) { .lc-wijziging { grid-template-columns: 1fr; } }

/* ---------- Dialoog: kleine kaart boven de pagina (native <dialog>, showModal) ---------- */
.lc-dialoog { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); margin: 64px auto auto; padding: 0; border: 0; background: transparent; color: var(--c-text); overflow: visible; }
.lc-dialoog::backdrop { background: var(--c-overlay); }
.lc-dialoog > .lc-kaart { box-shadow: var(--shadow-2); max-height: calc(100vh - 96px); overflow: auto; }
.lc-dialoog__groep + .lc-dialoog__groep { margin-top: var(--s-4); }
.lc-dialoog__kop { margin: 0 0 var(--s-2); font: 700 var(--fs-xs)/1.2 var(--f-kop); letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); }
.lc-dialoog__keuzes { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.lc-dialoog__keuzes .lc-knop { gap: var(--s-2); }
.lc-dialoog__keuzes .lc-code { margin-right: 0; vertical-align: 0; }
.lc-dialoog .lc-form__acties { margin-top: var(--s-5); }
.lc-dialoog--smal { width: min(400px, calc(100vw - 32px)); }
.lc-dialoog--smal .lc-form__acties { margin-top: 0; }
/* Rechts in een kaartkop: toelichting plus een of meer kleine knoppen */
.lc-kop-acties { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.lc-kop-acties p { margin: 0; color: var(--c-muted); font-size: var(--fs-sm); }
/* Blokken naast elkaar die op smalle schermen onder elkaar vallen (bijv. rechten per onderdeel) */
.lc-raster { display: grid; gap: var(--s-4) var(--s-5); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ---------- Kleine hulpklassen (in plaats van style="…") ---------- */
.lc-mt-3 { margin-top: var(--s-3); }
.lc-mb-3 { margin-bottom: var(--s-3); }
.lc-mb-4 { margin-bottom: var(--s-4); }
.lc-mb-5 { margin-bottom: var(--s-5); }
.lc-rechts { margin-left: auto; }
.lc-gedempt { color: var(--c-muted); }

/* ---------- Kop van een publieke pagina: rechts zoeken plus knoppen ---------- */
.lc-top__acties { display: flex; flex: 1 1 420px; max-width: 560px; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-2); align-items: center; }
.lc-top__acties .lc-zoek { flex: 1 1 240px; }

/* ---------- Tabel op mobiel als kaarten: <section class="lc-kaart lc-alleen-breed"> + <div class="lc-kaarten"> ---------- */
.lc-kaarten { display: none; }
.lc-kaarten .lc-kaart + .lc-kaart { margin-top: var(--s-3); }
.lc-kaarten dl { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--s-3); margin: 0; padding: 0 var(--s-4) var(--s-4); font-size: var(--fs-sm); align-items: center; }
.lc-kaarten dt { display: flex; align-items: center; gap: var(--s-2); color: var(--c-muted); font-weight: 600; }
.lc-kaarten dt img { width: 22px; height: 22px; object-fit: contain; }
.lc-kaarten dd { margin: 0; font-weight: 600; color: var(--c-ink); }
.lc-kaarten .lc-kaart.is-let-op { border-color: var(--c-accent); }
.lc-kaarten .lc-melding { margin: 0 var(--s-4) var(--s-4); }
@media (max-width: 768px) {
  .lc-alleen-breed { display: none; }
  .lc-kaarten { display: block; }
}
.lc-dienstlijst .lc-onbezet { color: var(--c-muted); }

/* ---------- Filterknop (klikbaar aantal, bijv. in een kolomkop) en de filterstatus ernaast ---------- */
.lc-filterknop { padding: 2px 6px; border: 0; border-radius: var(--r-sm); background: none; color: var(--c-link); font: inherit; letter-spacing: 0; text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
.lc-filterknop:hover { background: var(--c-surface-3); }
.lc-filterknop[aria-pressed="true"] { background: var(--c-accent); color: var(--c-accent-ink); text-decoration: none; }
.lc-filterstatus { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }
.lc-filterstatus[hidden] { display: none; }

/* ---------- Opgeslagen-vinkje naast een direct opgeslagen veld (.is-zichtbaar, .is-fout) ---------- */
.lc-opgeslagen { display: inline-block; min-width: 20px; color: var(--c-up); font-weight: 700; opacity: 0; transition: opacity var(--t-snel); }
.lc-opgeslagen.is-zichtbaar { opacity: 1; }
.lc-opgeslagen.is-fout { opacity: 1; color: var(--c-down); font-size: var(--fs-xs); }

/* ---------- Tabel met vinkjes en een bulkbalk (bijv. Scores beheren) ----------
   Zonder selectie alleen een hint; met selectie een donkere balk die onderin zichtbaar blijft:
   aantal · actie · nieuwe waarde · Toepassen · Selectie wissen */
.lc-tabel .w-vink { width: 44px; }
.lc-tabel input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--c-accent-strong); cursor: pointer; }
.lc-tabel tr.is-gekozen td { background: var(--c-accent-soft); }
.lc-bulk {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3);
  margin: 0 var(--s-4) var(--s-3); padding: var(--s-2) var(--s-3);
  border: 1.5px dashed var(--c-line-strong); border-radius: var(--r-md); background: var(--c-surface-2);
  font-size: var(--fs-sm);
}
.lc-bulk:not(.is-actief) > :not(.lc-bulk__hint) { display: none; }
.lc-bulk.is-actief > .lc-bulk__hint { display: none; }
.lc-bulk__hint { color: var(--c-muted); }
.lc-bulk.is-actief {
  position: sticky; bottom: var(--s-3); z-index: 5;
  border: 0; background: var(--c-ink); color: var(--c-op-donker); box-shadow: var(--shadow-2);
}
.lc-bulk__telling { white-space: nowrap; margin-right: var(--s-2); }
.lc-bulk select, .lc-bulk input:not([type="hidden"]) {
  height: 34px; padding: 0 10px; border: 1.5px solid var(--c-line-strong); border-radius: var(--r-sm);
  background: var(--c-surface); color: var(--c-ink); font: inherit; min-width: 0;
}
.lc-bulk input[list] { width: 260px; max-width: 100%; }
.lc-bulk.is-actief .lc-knop--stil { background: transparent; color: var(--c-op-donker); border-color: var(--c-op-donker-rand); }
.lc-bulk__wis { margin-left: auto; }
.lc-bulk [hidden] { display: none !important; }

/* ---------- Filterbalk boven een lijst: zoekveld (hs_zoekveld) plus segmenten (huisstijl.js: data-filter-*) ---------- */
.lc-filterbalk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding: 0 var(--s-4) var(--s-3); }
.lc-filterbalk .lc-zoek { flex: 1 1 260px; max-width: 420px; }
.lc-filterbalk .lc-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
button.lc-seg__item { border: 0; background: none; white-space: nowrap; cursor: pointer; }
.lc-seg__item[aria-pressed="true"] { background: var(--c-ink); color: var(--c-op-donker); }
.lc-seg__item small { font-weight: 500; opacity: .65; }
.lc-leeg--in-kaart { margin: 0 var(--s-4) var(--s-4); }

/* ---------- Tabelregel met uitklapper (huisstijl.js: tr[data-details]) en detailkaartjes ----------
   Open regel: lichte achtergrond en een oranje streep links, die doorloopt langs de kaartjes eronder. */
.lc-tabel tr[data-details] { cursor: pointer; }
.lc-tabel tr[data-details] td { padding-top: 8px; padding-bottom: 8px; }
.lc-uitklapknop {
  display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--c-muted); cursor: pointer; transition: background var(--t-snel), color var(--t-snel);
}
.lc-uitklapknop:hover { background: var(--c-surface-3); color: var(--c-ink); }
.lc-uitklapknop .lc-chevron { transform: rotate(-90deg); transition: transform var(--t-snel); }
.lc-uitklapknop[aria-expanded="true"] .lc-chevron { transform: none; }
.lc-tabel tr.is-open td { background: var(--c-surface-2); }
.lc-tabel tr.is-open td:first-child, .lc-uitklaprij > td { box-shadow: inset 3px 0 0 var(--c-accent); }
.lc-tabel tr.is-open .lc-uitklapknop { color: var(--c-ink); }
.lc-tabel tbody tr.lc-uitklaprij, .lc-tabel tbody tr.lc-uitklaprij:hover { background: var(--c-surface-2); cursor: auto; }
.lc-uitklaprij > td { padding: 2px var(--s-4) var(--s-4) 48px; border-top: 0; }
.lc-detailkaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s-3); }
.lc-detailkaart { padding: var(--s-3) var(--s-4); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: var(--shadow-1); min-width: 0; }
.lc-detailkaart__kop {
  display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-2); padding-bottom: var(--s-2); border-bottom: 1px solid var(--c-line);
  font: 700 var(--fs-xs)/1 var(--f-kop); letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted);
}
.lc-detailkaart__icoon { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c-accent-soft); color: var(--c-accent-tekst); font-size: 15px; }
.lc-gegevens { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 5px var(--s-3); margin: 0; font-size: var(--fs-sm); line-height: 1.4; }
.lc-gegevens dt { color: var(--c-muted); }
.lc-gegevens dd { margin: 0; color: var(--c-ink); overflow-wrap: anywhere; }
.lc-gegevens .lc-label { height: 22px; }
.lc-icoon { flex: none; vertical-align: -.125em; }
.lc-detailvoet { display: flex; align-items: center; gap: 6px; margin: var(--s-2) 0 0; color: var(--c-muted); font-size: var(--fs-xs); }
@media (max-width: 640px) {
  .lc-uitklaprij > td { padding-left: var(--s-3); padding-right: var(--s-2); }
  .lc-gegevens { grid-template-columns: minmax(90px, max-content) minmax(0, 1fr); }
}

/* ---------- Persoon: avatar (foto of initialen) en naam met onderschrift ---------- */
.lc-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; background: var(--c-surface-2); }
.lc-avatar--leeg { display: inline-grid; place-items: center; font: 700 var(--fs-xs)/1 var(--f-kop); color: var(--c-muted); }
.lc-avatar--groot { width: 88px; height: 88px; font-size: var(--fs-lg); box-shadow: 0 0 0 4px var(--c-surface), 0 0 0 5px var(--c-line); }
.lc-avatar--podium { width: 64px; height: 64px; font-size: var(--fs-md); }
.lc-schutter { display: flex; align-items: center; gap: var(--s-3); min-width: 180px; color: var(--c-ink); font-weight: 600; }
.lc-schutter:hover { text-decoration: none; }
.lc-schutter:hover span.naam { text-decoration: underline; }
.lc-schutter small { display: block; font-weight: 400; color: var(--c-muted); font-size: var(--fs-xs); }
.lc-veld--schutter { min-width: 260px; }
@media (max-width: 640px) {
  .lc-schutter { min-width: 0; }
  .lc-avatar { width: 32px; height: 32px; }
}

/* ---------- Rang (medaille) en voortgangsbalk ---------- */
.lc-rang { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font: 700 var(--fs-sm)/1 var(--f-kop); color: var(--c-muted); font-variant-numeric: tabular-nums; }
.lc-rang--goud { background: var(--c-goud); color: var(--c-goud-ink); }
.lc-rang--zilver { background: var(--c-zilver); color: var(--c-zilver-ink); }
.lc-rang--brons { background: var(--c-brons); color: var(--c-brons-ink); }
.lc-voortgang { display: flex; align-items: center; gap: var(--s-2); justify-content: flex-end; }
.lc-voortgang__balk { width: 48px; height: 6px; border-radius: 3px; background: var(--c-surface-3); overflow: hidden; }
.lc-voortgang__balk i { display: block; height: 100%; background: var(--c-accent); border-radius: 3px; }
.lc-voortgang--vol .lc-voortgang__balk i { background: var(--c-up); }

/* ---------- Lijngrafiek met legenda (svg: .as, .as-tekst, .lijn, .gem, .punt, .punt--top) ---------- */
.lc-grafiek { margin-top: var(--s-4); }
.lc-grafiek svg { display: block; width: 100%; height: auto; overflow: visible; }
.lc-grafiek .as { stroke: var(--c-line); stroke-width: 1; }
.lc-grafiek .as-tekst { fill: var(--c-muted); font: 500 var(--fs-2xs) var(--f-tekst); }
.lc-grafiek .lijn { fill: none; stroke: var(--c-ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.lc-grafiek .gem { fill: none; stroke: var(--c-accent); stroke-width: 2.5; stroke-dasharray: 5 4; }
.lc-grafiek .punt { fill: var(--c-surface); stroke: var(--c-ink); stroke-width: 1.75; }
.lc-grafiek .punt--top { fill: var(--c-accent); stroke: var(--c-accent-strong); }
.lc-legenda { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-2); font-size: var(--fs-xs); color: var(--c-muted); }
.lc-legenda i { display: inline-block; width: 18px; height: 0; margin-right: 6px; vertical-align: middle; border-top: 2px solid var(--c-ink); }
.lc-legenda i.gem { border-top: 2.5px dashed var(--c-accent); }
.lc-legenda i.top { width: 9px; height: 9px; border: 1.75px solid var(--c-accent-strong); border-radius: 50%; background: var(--c-accent); }

/* =========================================================
   Onderdelen: opmaak die maar op één plek voorkomt (wel hier, zodat tokens en wijzigingen overal gelden)
   ========================================================= */

/* ---------- Dienstrooster: bewerkraster (/diensten/admin/) ---------- */
.lc-rooster th { vertical-align: bottom; }
.lc-rooster td { vertical-align: top; }
.lc-rooster .lc-rooster__datum { white-space: nowrap; }
.lc-rooster .lc-rooster__datum strong { display: block; font: 700 var(--fs-sm)/1.2 var(--f-kop); color: var(--c-ink); }
.lc-rooster .lc-rooster__datum small { color: var(--c-muted); font-size: var(--fs-xs); }
.lc-rooster .lc-rooster__cel { min-width: 150px; }
.lc-rooster .lc-rooster__cel.is-onbezet { background: var(--c-down-soft); }
.lc-rooster .lc-rooster__huidig { margin-bottom: 4px; font-weight: 600; color: var(--c-ink); font-size: var(--fs-sm); }
.lc-rooster .lc-rooster__keuze { height: 34px; font-size: var(--fs-sm); }
.lc-rooster tr.lc-rooster__details td { background: var(--c-surface-2); }
.lc-rooster__kolomkop { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.lc-rooster__bijzonder { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: var(--s-3); align-items: center; }
@media (max-width: 720px) { .lc-rooster__bijzonder { grid-template-columns: 1fr; } }

/* ---------- Dienstrooster: publieke lijst (/diensten/) ---------- */
.lc-dienstlijst td.lc-num { white-space: nowrap; }
.lc-dienstlijst th:nth-child(n+3) { width: calc(84% / 5); }
.lc-dienstlijst .lc-dienstlijst__dag { width: 56px; }

/* ---------- Lijstcompetitie: codes, wapen, ranglijst, podium, profiel, scores ---------- */
.lc-wapen { font-size: 1.15em; fill: currentColor; flex: none; }
.lc-h3 .lc-wapen { margin-right: var(--s-2); color: var(--c-muted); vertical-align: -.12em; }
.lc-code--opgelegd { background: var(--c-code-opgelegd); }
.lc-code--meesterkaart { background: var(--c-accent); color: var(--c-accent-ink); }
.lc-tabel .w-rang { width: 56px; }
.lc-tabel tr.is-onvolledig td { color: var(--c-muted); }
.lc-tabel tr.lc-scheiding td { padding: 6px var(--s-3); background: var(--c-surface-2); color: var(--c-muted); font-size: var(--fs-xs); border-top: 1px solid var(--c-line); }
.lc-invoer__comp { width: 140px; }

.lc-podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); align-items: end; padding: var(--s-2) var(--s-4) var(--s-5); }
.lc-podium__plek { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-2); color: var(--c-ink); }
.lc-podium__plek:hover { text-decoration: none; }
.lc-podium__naam { font-weight: 600; font-size: var(--fs-sm); line-height: 1.25; }
.lc-podium__blok { width: 100%; border-radius: var(--r-md) var(--r-md) 0 0; display: grid; place-items: center; font: 800 var(--fs-lg)/1 var(--f-kop); font-variant-numeric: tabular-nums; }
.lc-podium__plek--1 { order: 2; } .lc-podium__plek--1 .lc-podium__blok { height: 84px; background: var(--c-goud); color: var(--c-goud-ink); }
.lc-podium__plek--2 { order: 1; } .lc-podium__plek--2 .lc-podium__blok { height: 64px; background: var(--c-zilver); color: var(--c-zilver-ink); }
.lc-podium__plek--3 { order: 3; } .lc-podium__plek--3 .lc-podium__blok { height: 48px; background: var(--c-brons); color: var(--c-brons-ink); }

.lc-profiel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); margin-bottom: var(--s-5); }
.lc-profiel__meta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.lc-scores { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: var(--s-2); margin: var(--s-4) 0 0; padding: 0; list-style: none; }
.lc-scores li { padding: 6px 8px; border-radius: var(--r-sm); background: var(--c-surface-2); text-align: center; line-height: 1.2; }
.lc-scores b { display: block; font: 800 var(--fs-md)/1.2 var(--f-kop); color: var(--c-ink); font-variant-numeric: tabular-nums; }
.lc-scores small { color: var(--c-muted); font-size: var(--fs-2xs); }
.lc-scores li.is-top { background: var(--c-accent-soft); box-shadow: inset 0 0 0 1.5px var(--c-accent); }

/* ---------- Lijstcompetitie: invoer en beheer van competities en plankje-eisen ---------- */
/* Plankje bij de score-invoer: per regel een <tbody class="lc-invoer__regel"> met de regel en een uitklapregel.
   De knop Plankje (lc-pk-knop) zet het uitklapdeel (lc-pk) aan; daarin sets of losse kaarten en de voorspelling. */
.lc-pk-knop {
  display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 12px 0 8px; border: 1.5px solid var(--c-line-strong);
  border-radius: var(--r-pill); background: var(--c-surface); color: var(--c-muted); font: 700 var(--fs-xs)/1 var(--f-kop); cursor: pointer;
  transition: background var(--t-snel), border-color var(--t-snel), color var(--t-snel);
}
.lc-pk-knop:hover { border-color: var(--c-stempel); color: var(--c-ink); }
.lc-pk-knop[aria-pressed="true"] { border-color: var(--c-stempel); background: var(--c-surface-2); color: var(--c-stempel); }
.lc-pk-knop .lc-stempel, .lc-pk-resultaat__teken .lc-stempel { position: relative; inset: auto; display: inline-block; width: 24px; height: 24px; color: var(--c-line-strong); mix-blend-mode: normal; }
.lc-pk-knop[aria-pressed="true"] .lc-stempel, .lc-pk-resultaat__teken .lc-stempel { color: var(--c-stempel); }
.lc-pk-knop .lc-stempel__vink { opacity: 0; transition: opacity var(--t-snel); }
.lc-pk-knop[aria-pressed="true"] .lc-stempel__vink { opacity: 1; }
.lc-invoer__regel.is-plankje > tr:first-child td { background: var(--c-surface-2); }
.lc-invoer__regel.is-plankje > tr:first-child td:nth-child(2) { box-shadow: inset 3px 0 0 var(--c-stempel); }
.lc-invoer tr.lc-invoer__plankje td { padding-top: 0; padding-bottom: var(--s-3); background: var(--c-surface-2); }
.lc-pk { display: grid; gap: var(--s-3); padding: var(--s-3); border: 1.5px dashed var(--c-stempel); border-radius: var(--r-md); background: var(--c-surface); }
.lc-pk__kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); }
.lc-pk__keuze { width: auto; min-width: 220px; max-width: 100%; }
.lc-pk__sets { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.lc-pk__set { display: flex; align-items: center; gap: 6px; }
.lc-pk__set input { width: 72px; text-align: right; }
.lc-pk__kaart { min-width: 64px; font: 700 var(--fs-sm)/1 var(--f-kop); color: var(--c-ink); }
.lc-pk__som { min-width: 70px; font-size: var(--fs-xs); font-weight: 600; }
.lc-pk__som.is-ok { color: var(--c-up); }
.lc-pk__som.is-fout { color: var(--c-down); }
.lc-pk__kaarten { max-width: 320px; }
.lc-pk__voorspelling { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none; font-size: var(--fs-xs); }
.lc-pk__voorspelling li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--c-surface-2); color: var(--c-text); font-variant-numeric: tabular-nums; }
.lc-pk__voorspelling li.lc-pk__op { padding-left: 0; background: none; font-weight: 700; color: var(--c-ink); }
.lc-pk__voorspelling li.is-ok { background: var(--c-surface-2); box-shadow: inset 0 0 0 1.5px var(--c-stempel); color: var(--c-stempel); font-weight: 600; }
.lc-pk__voorspelling li.is-niet { background: var(--c-down-soft); color: var(--c-down); }
.lc-pk__voorspelling .lc-label { height: 20px; }
/* Label bij een score met plankje-stempels (Scores beheren) */
.lc-label--stempel { gap: 4px; margin-left: 4px; background: var(--c-surface-2); color: var(--c-stempel); box-shadow: inset 0 0 0 1px var(--c-stempel); }
.lc-label--stempel .lc-stempel { position: relative; inset: auto; display: inline-block; width: 16px; height: 16px; mix-blend-mode: normal; }
/* Na het opslaan: per plankje-score wat er is afgestempeld */
.lc-pk-resultaat { margin: 0; padding: 0; list-style: none; }
.lc-pk-resultaat li { display: grid; grid-template-columns: 32px minmax(160px, 1fr) 90px minmax(0, 2fr); align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-4); border-top: 1px solid var(--c-line); font-size: var(--fs-sm); }
.lc-pk-resultaat li.is-vol { background: var(--c-accent-soft); }
.lc-pk-resultaat li.is-niet { color: var(--c-down); }
.lc-pk-resultaat__teken { display: grid; place-items: center; }
.lc-pk-resultaat__wie small, .lc-pk-resultaat__score small { display: block; color: var(--c-muted); font-size: var(--fs-xs); }
.lc-pk-resultaat__score b { font: 800 var(--fs-md)/1 var(--f-kop); color: var(--c-ink); }
@media (max-width: 640px) { .lc-pk-resultaat li { grid-template-columns: 32px 1fr 70px; } .lc-pk-resultaat__uitkomst { grid-column: 2 / -1; } }
.lc-invoer-cel--code { width: 84px; text-transform: uppercase; }
.lc-invoer-cel--eisen { min-width: 420px; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.lc-rangtabel__rang { white-space: nowrap; font: 700 var(--fs-sm)/1 var(--f-kop); color: var(--c-muted); }
.lc-rangtabel__rang .lc-schild { font-size: 1.4em; vertical-align: middle; margin-right: 4px; }
.lc-rangtabel .lc-scheiding td { font: 700 var(--fs-xs)/1.2 var(--f-kop); letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink); }
.lc-rangtabel .lc-scheiding .lc-wapen { margin-right: 6px; vertical-align: -.15em; color: var(--c-muted); }

/* ---------- Plankje: schild per rang (plankje_schild) ----------
   Brons = Schutter 1e klasse, zilver = Scherpschutter, goud = Meesterschutter, goud met kroon = Koningsschutter;
   een ster voor "1e klasse". --open: nog niet behaald (grijs), --leeg: nog geen rang. */
.lc-schild { flex: none; overflow: visible; --schild-vlak: var(--c-surface-3); --schild-rand: var(--c-line-strong); --schild-licht: var(--c-surface); --schild-ink: var(--c-muted); }
.lc-schild__vlak { fill: var(--schild-vlak); stroke: var(--schild-rand); stroke-width: 1.5; stroke-linejoin: round; }
.lc-schild__rand { fill: none; stroke: var(--schild-licht); stroke-width: 1.2; opacity: .7; }
.lc-schild__teken { fill: none; stroke: var(--schild-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lc-schild__ster, .lc-schild__kroon { fill: var(--schild-ink); }
.lc-schild--brons { --schild-vlak: var(--c-brons); --schild-rand: var(--c-brons-donker); --schild-licht: var(--c-brons-licht); --schild-ink: var(--c-brons-ink); }
.lc-schild--zilver { --schild-vlak: var(--c-zilver); --schild-rand: var(--c-zilver-donker); --schild-licht: var(--c-zilver-licht); --schild-ink: var(--c-zilver-ink); }
.lc-schild--goud, .lc-schild--koning { --schild-vlak: var(--c-goud); --schild-rand: var(--c-goud-donker); --schild-licht: var(--c-goud-licht); --schild-ink: var(--c-goud-ink); }
.lc-schild--koning .lc-schild__vlak { stroke: var(--c-accent-strong); stroke-width: 2; }
.lc-schild--leeg .lc-schild__vlak { fill: none; stroke-dasharray: 3 2; }
.lc-schild--open { --schild-vlak: var(--c-surface-2); --schild-rand: var(--c-line-strong); --schild-licht: var(--c-surface); --schild-ink: var(--c-line-strong); }
.lc-schild--groot { width: 36px; height: 40px; }
.lc-chip .lc-schild { font-size: 1.15em; }

/* Deelnemerslijst: per plankje wapen, discipline, schild van de hoogste rang en de stand in het huidige blok */
.lc-plankje-badges { display: flex; flex: 1 1 220px; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.lc-plankje-badge { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border: 1px solid var(--c-line); border-radius: var(--r-pill); background: var(--c-surface); color: var(--c-text); font-size: var(--fs-xs); white-space: nowrap; }
.lc-plankje-badge b { font: 700 var(--fs-xs)/1 var(--f-kop); letter-spacing: .03em; color: var(--c-ink); }
.lc-plankje-badge .lc-wapen { color: var(--c-muted); }
.lc-plankje-badge .lc-schild { font-size: 1.35em; }
.lc-plankje-badge small { color: var(--c-muted); }
#plankje-lijst a { flex-wrap: wrap; }

/* Rangen als ladder (uitleg) en als lijst (behaald / nog te gaan) */
.lc-rangladder { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3) var(--s-2); margin: var(--s-4) 0; padding: 0; list-style: none; }
.lc-rangladder li { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font: 600 var(--fs-2xs)/1.25 var(--f-tekst); color: var(--c-text); }
.lc-blokkop { display: flex; align-items: center; gap: var(--s-3); }
.lc-blokkop small { display: block; margin-bottom: 2px; font: 700 var(--fs-2xs)/1 var(--f-kop); letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.lc-kaart--feest { background: var(--c-accent-soft); }
.lc-kaart--feest .lc-kaart__body { padding: var(--s-4); font: 800 var(--fs-lg)/1.2 var(--f-kop); color: var(--c-ink); }
.lc-rangen { margin: 0; padding: 0; list-style: none; }
.lc-rangen > li { border-top: 1px solid var(--c-line); }
.lc-rangen > li.lc-rangen__open, .lc-rangen summary { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); }
.lc-rangen strong { display: block; font: 700 var(--fs-sm)/1.25 var(--f-kop); color: var(--c-ink); }
.lc-rangen small { color: var(--c-muted); font-size: var(--fs-xs); }
.lc-rangen__open strong { color: var(--c-muted); }
.lc-rangen summary { cursor: pointer; list-style: none; }
.lc-rangen summary::-webkit-details-marker { display: none; }
.lc-rangen summary:hover { background: var(--c-rij-hover); }
.lc-rangen summary .lc-chevron { margin-left: auto; color: var(--c-muted); transform: rotate(-90deg); transition: transform var(--t-snel); }
.lc-rangen details[open] summary .lc-chevron { transform: none; }
.lc-rangen details > .lc-blok { padding: 0 var(--s-4) var(--s-4); }

/* ---------- Plankje: blok van 24 eisen (2 regels van 12) met stempels ---------- */
.lc-blok { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.lc-blok--extra { grid-template-columns: repeat(12, minmax(0, 1fr)) minmax(0, 1.15fr); }
.lc-blok--extra li:nth-child(-n + 12) { grid-row: 1; }
.lc-blok--extra li:nth-child(n + 13):nth-child(-n + 24) { grid-row: 2; }
.lc-blok--extra li:nth-child(25) { grid-row: 1 / span 2; grid-column: 13; display: grid; }
.lc-blok--extra li:nth-child(25) .lc-eis { aspect-ratio: auto; height: 100%; border-color: var(--c-accent-strong); }
.lc-eis__extra { position: absolute; top: 4px; left: 0; right: 0; font: 700 var(--fs-2xs)/1 var(--f-kop); letter-spacing: .06em; text-transform: uppercase; color: var(--c-accent-tekst); }
@media (max-width: 640px) {
  .lc-blok, .lc-blok--extra { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lc-blok--extra li:nth-child(n) { grid-row: auto; grid-column: auto; }
  .lc-blok--extra li:nth-child(25) { grid-column: 1 / -1; }
  .lc-blok--extra li:nth-child(25) .lc-eis { min-height: 44px; }
}
.lc-eis {
  position: relative; display: grid; place-items: center; width: 100%; min-height: 44px; aspect-ratio: 1; padding: 0;
  border: 1.5px dashed var(--c-line-strong); border-radius: var(--r-sm); background: var(--c-surface); color: var(--c-ink);
  font: 800 var(--fs-md)/1 var(--f-kop); transition: background var(--t-snel), border-color var(--t-snel), opacity var(--t-snel);
}
button.lc-eis { cursor: pointer; }
button.lc-eis:hover { border-color: var(--c-accent); background: var(--c-accent-soft); }
.lc-eis.is-gestempeld { border-style: solid; border-color: var(--c-line); background: var(--c-surface-2); }
.lc-eis.is-gestempeld .lc-eis__score { color: var(--c-muted); }
button.lc-eis.is-gestempeld:hover { border-color: var(--c-down); background: var(--c-down-hover); }
.lc-eis.is-bezig { opacity: .55; cursor: progress; }
/* Inktstempel: dubbele ring met vinkje, telkens iets anders gedraaid; een hogere score dan de eis staat er klein bij */
.lc-stempel { position: absolute; inset: 7%; color: var(--c-stempel); pointer-events: none; mix-blend-mode: multiply; rotate: -12deg; opacity: .88; }
.lc-blok li:nth-child(3n + 2) .lc-stempel { rotate: 9deg; }
.lc-blok li:nth-child(4n + 3) .lc-stempel { rotate: -4deg; }
.lc-blok li:nth-child(5n) .lc-stempel { rotate: 16deg; }
.lc-stempel svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; }
.lc-stempel__ring { stroke-width: 2.6; }
.lc-stempel__ring--binnen { stroke-width: 1; stroke-dasharray: 2.2 1.4; }
.lc-stempel__vink { stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; }
.lc-stempel__score { position: absolute; right: -6px; bottom: -4px; min-width: 20px; padding: 2px 4px; border-radius: var(--r-pill); background: var(--c-stempel); color: var(--c-op-donker); font: 700 var(--fs-2xs)/1 var(--f-kop); text-align: center; rotate: 12deg; }
.lc-stempel__score:empty { display: none; }
.lc-stempel.is-nieuw { animation: lc-stempel-zet 420ms cubic-bezier(.2, .9, .3, 1.25) both; }
@keyframes lc-stempel-zet {
  0% { opacity: 0; scale: 1.9; }
  55% { opacity: .95; scale: .9; }
  100% { opacity: .88; scale: 1; }
}

/* ---------- Plankje: het virtuele houten plankje (zijkolom) ----------
   Hout met nerf en gefreesde rand, een ophangoog, een gouden naamplaat en per behaald blok een gouden plaatje.
   Het bord groeit mee met het aantal plaatjes; --leeg: nog geen eerste blok behaald. */
.lc-plank-zij { min-width: 0; }
@media (min-width: 960px) { html:not(.hs-in-iframe) .lc-plank-zij { position: sticky; top: var(--s-4); } }
.lc-plank { margin: 0; }
.lc-plank__bord {
  position: relative; padding: var(--s-6) var(--s-5) var(--s-5); border-radius: 22px; color: var(--c-hout-tekst);
  background:
    repeating-linear-gradient(94deg, transparent 0 7px, var(--c-hout-nerf) 7px 8px, transparent 8px 19px, var(--c-hout-nerf) 19px 21px, transparent 21px 31px),
    radial-gradient(ellipse 60% 18% at 30% 38%, var(--c-hout-glans), transparent 70%),
    radial-gradient(ellipse 50% 14% at 72% 74%, var(--c-hout-nerf), transparent 70%),
    linear-gradient(170deg, var(--c-hout-licht) 0%, var(--c-hout) 45%, var(--c-hout-donker) 100%);
  box-shadow:
    inset 0 0 0 2px var(--c-hout-donker), inset 0 0 0 4px var(--c-hout-glans),
    inset 0 0 0 10px var(--c-hout-nerf), inset 0 0 0 11px var(--c-hout-glans), inset 0 -6px 14px var(--c-hout-nerf),
    var(--shadow-2);
}
.lc-plank__bord::before {   /* ophangoog */
  content: ""; position: absolute; top: 12px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: var(--c-hout-donker); box-shadow: inset 0 2px 3px var(--c-ink), 0 1px 0 var(--c-hout-glans);
}
.lc-plank__kop { display: flex; align-items: center; justify-content: center; gap: var(--s-2); margin: var(--s-2) 0 var(--s-3); font: 700 var(--fs-2xs)/1.2 var(--f-kop); letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 1px 0 var(--c-hout-donker); }
.lc-plank__kop .lc-wapen { font-size: 1.6em; opacity: .9; }
.lc-plank__naam, .lc-plank__tag:not(.lc-plank__tag--volgend) {
  position: relative; background: linear-gradient(180deg, var(--c-goud-licht) 0%, var(--c-goud) 45%, var(--c-goud-donker) 100%);
  color: var(--c-goud-ink); border-radius: 3px; text-shadow: 0 1px 0 var(--c-goud-licht);
  box-shadow: 0 2px 3px var(--c-hout-nerf), 0 1px 0 var(--c-hout-donker), inset 0 1px 0 var(--c-goud-licht), inset 0 -1px 0 var(--c-goud-donker);
}
.lc-plank__naam::before, .lc-plank__naam::after, .lc-plank__tag:not(.lc-plank__tag--volgend)::before {   /* schroefjes */
  content: ""; position: absolute; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--c-zilver-licht), var(--c-zilver-donker)); left: 6px;
}
.lc-plank__naam::after { left: auto; right: 6px; }
.lc-plank__naam { margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-5); font: 800 var(--fs-md)/1.2 var(--f-kop); letter-spacing: .06em; text-align: center; text-transform: uppercase; overflow-wrap: anywhere; }
.lc-plank__tags { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.lc-plank__tag { display: flex; align-items: center; gap: var(--s-2); min-height: 36px; padding: 6px var(--s-3) 6px 18px; overflow: hidden; font: 700 var(--fs-xs)/1.2 var(--f-kop); letter-spacing: .04em; text-transform: uppercase; }
.lc-plank__tag .lc-schild { font-size: 1.5em; }
.lc-plank__tag small { margin-left: auto; font: 700 var(--fs-2xs)/1 var(--f-kop); opacity: .8; }
.lc-plank__tag--volgend { border: 1.5px dashed var(--c-hout-tekst); border-radius: 3px; color: var(--c-hout-tekst); opacity: .75; padding-left: var(--s-3); }
.lc-plank__tag.is-nieuw::after {   /* glans over een net behaald plaatje */
  content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, var(--c-goud-licht) 50%, transparent 70%);
  translate: -100% 0; animation: lc-glans 2.4s ease-in-out 600ms 2;
}
@keyframes lc-glans { to { translate: 100% 0; } }
.lc-plank--leeg .lc-plank__bord { filter: saturate(.45); opacity: .6; }
.lc-plank figcaption { margin-top: var(--s-3); text-align: center; font-size: var(--fs-xs); }
@media (prefers-reduced-motion: reduce) { .lc-stempel.is-nieuw, .lc-plank__tag.is-nieuw::after { animation: none; } }