/* ingedeeld — clubstijl componenten.
   Eén stylesheet voor alle schermen (ouder + portaal). Alles klasse-driven:
   geen inline styles nodig, zodat tests/test-no-inline-styles.php blijft slagen.
   Alle richtingsafhankelijke eigenschappen zijn logisch (inline-start/end),
   dus NL/EN/AR werken zonder losse RTL-stylesheet. */

*,
*::before,
*::after { box-sizing: border-box; }

html,
body { margin: 0; padding: 0; }

body {
  font-family: var(--ing-font);
  font-size: var(--ing-text-base);
  line-height: var(--ing-leading);
  color: var(--ing-ink);
  background: var(--ing-bg);
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; cursor: pointer; background: none; border: 0; padding: 0; color: inherit; text-align: start; }
input, select, textarea { font: inherit; color: inherit; }
a { color: var(--ing-red); text-underline-offset: 3px; }
a:hover { color: var(--ing-ink); }

/* ─── Topbar en navigatie ─────────────────────────────────────── */

.ing-topbar {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  background: var(--ing-ink);
  color: #fff;
}

.ing-brand {
  display: flex;
  align-items: center;
  padding: 12px var(--ing-space-4);
  background: var(--ing-red);
  font-family: var(--ing-font-display);
  font-weight: 700;
  font-size: 25px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
}

.ing-nav {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--ing-space-1);
  flex-wrap: wrap;
  padding: var(--ing-space-2) var(--ing-space-3);
}

.ing-nav-link {
  min-height: 36px;
  padding: 8px 16px;
  transform: skewX(var(--ing-skew));
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--ing-font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.ing-nav-link > span { display: block; transform: skewX(var(--ing-unskew)); }
.ing-nav-link:hover { color: #fff; }
.ing-nav-link.is-active { background: #fff; color: var(--ing-ink); }

/* Regel 6, hard afgedwongen: de pagina schuift nooit horizontaal.
   'clip' laat position: sticky intact; 'hidden' is de fallback voor
   oudere Safari. De kaartcarrousel scrollt in zijn eigen gebied. */
html, body {
  overflow-x: hidden;
  overflow-x: clip;
}

/* ─── Titelband: zwart, full width, rode schuine flank ────────── */

.ing-band {
  position: relative;
  overflow: hidden;
  background: var(--ing-ink);
  color: #fff;
  padding: var(--ing-space-5) var(--ing-pad);
}
.ing-band::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: -12%;
  width: 30%;
  background: var(--ing-red);
  transform: skewX(var(--ing-skew));
}
.ing-band > * { position: relative; z-index: 1; }

.ing-band-eyebrow {
  margin: 0 0 var(--ing-space-2);
  font-family: var(--ing-font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.ing-band-title {
  margin: 0;
  font-family: var(--ing-font-display);
  font-weight: 700;
  font-size: var(--ing-text-band);
  line-height: 0.88;
  text-transform: uppercase;
  max-width: 24ch;
}

/* ─── Schuine tag: het enige vormmotief ───────────────────────── */

.ing-tag {
  display: inline-block;
  transform: skewX(var(--ing-skew));
  padding: 5px 14px;
  background: var(--ing-ink);
  color: #fff;
  font-family: var(--ing-font-display);
  font-weight: 600;
  font-size: var(--ing-text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ing-tag > span { display: block; transform: skewX(var(--ing-unskew)); }
.ing-tag--red { background: var(--ing-red); }
.ing-tag--outline { background: transparent; color: var(--ing-ink); border: 2px solid var(--ing-ink); }
.ing-tag--quiet { background: transparent; color: var(--ing-ink-3); border: 2px solid var(--ing-line); }
.ing-tag--muted { background: var(--ing-wash); color: var(--ing-ink-3); }
.ing-tag--section { margin-block-end: var(--ing-space-3); font-size: 13px; letter-spacing: var(--ing-track); }

/* Statuspills (intakestatus uit de plugin) */
.ing-status--done { background: transparent; color: var(--ing-ink); border: 2px solid var(--ing-ink); }
.ing-status--invited { background: var(--ing-red); color: #fff; }
.ing-status--none { background: transparent; color: var(--ing-ink-3); border: 2px solid var(--ing-line); }
.ing-status--removal { background: var(--ing-ink); color: #fff; }
.ing-status--anonymized { background: var(--ing-wash); color: var(--ing-ink-3); }

/* ─── Pagina-indeling: full width, geen max-width op de body ──── */

.ing-page { padding: var(--ing-space-5) var(--ing-pad) var(--ing-space-6); }
.ing-page--tight { padding-block-start: var(--ing-space-4); }
.ing-stack { display: flex; flex-direction: column; gap: var(--ing-space-4); }

.ing-sheet { background: var(--ing-surface); box-shadow: var(--ing-shadow); }
.ing-sheet--flush { margin-inline: 0; }

/* Twee kolommen op desktop, gestapeld op mobiel — zonder media query */
.ing-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.ing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--ing-space-3); align-items: start; }
.ing-grid--wide { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--ing-space-4); }

.ing-block { padding: var(--ing-space-4); border-block-end: 2px solid var(--ing-ink); }
.ing-block--plain { border-block-end: 0; }
.ing-block--rule { border-inline-start: 1px solid var(--ing-line); }
.ing-block--ink { background: var(--ing-ink); color: #fff; border-block-end: 0; }

.ing-h2 {
  margin: 0 0 var(--ing-space-3);
  font-family: var(--ing-font-display);
  font-weight: 700;
  font-size: var(--ing-text-3xl);
  line-height: 0.98;
  text-transform: uppercase;
}
.ing-h3 {
  margin: 0 0 var(--ing-space-2);
  font-family: var(--ing-font-display);
  font-weight: 700;
  font-size: var(--ing-text-2xl);
  line-height: 1;
  text-transform: uppercase;
}
.ing-lede { margin: 0 0 var(--ing-space-4); max-width: 56ch; color: var(--ing-ink-2); }
.ing-meta {
  font-family: var(--ing-font-display);
  font-weight: 600;
  font-size: var(--ing-text-xs);
  letter-spacing: var(--ing-track);
  text-transform: uppercase;
  color: var(--ing-ink-3);
}

/* ─── Keuzekaart (beschikbaarheid, auto) ──────────────────────── */

.ing-choices { display: flex; flex-direction: column; gap: 2px; }

.ing-choice {
  display: flex;
  align-items: flex-start;
  gap: var(--ing-space-3);
  width: 100%;
  min-height: var(--ing-tap);
  padding: var(--ing-space-3);
  background: var(--ing-wash);
  color: var(--ing-ink);
  transition: background var(--ing-transition), color var(--ing-transition);
}
.ing-choice:hover { background: var(--ing-line); }
.ing-choice.is-active { background: var(--ing-ink); color: #fff; }

.ing-choice__num {
  min-width: 34px;
  font-family: var(--ing-font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  color: var(--ing-ink-3);
  font-variant-numeric: tabular-nums;
}
.ing-choice.is-active .ing-choice__num { color: var(--ing-red); }

.ing-choice__body { flex: 1; min-width: 0; }
.ing-choice__title {
  display: block;
  margin-block-end: 3px;
  font-family: var(--ing-font-display);
  font-weight: 700;
  font-size: var(--ing-text-xl);
  line-height: 1;
  text-transform: uppercase;
}
.ing-choice__sub { display: block; font-size: 15px; line-height: 1.4; color: var(--ing-ink-2); }
.ing-choice.is-active .ing-choice__sub { color: rgba(255, 255, 255, 0.72); }

/* ─── Aanmoedigingskader ──────────────────────────────────────── */

.ing-cheer {
  margin: var(--ing-space-3) 0 0;
  padding: var(--ing-space-3);
  background: var(--ing-wash);
  border-inline-start: 4px solid var(--ing-red);
  font-size: var(--ing-text-base);
  line-height: 1.45;
  font-weight: 500;
  max-width: 70ch;
}
.ing-cheer.is-cheering { animation: ing-rise 250ms ease both; }

@keyframes ing-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ─── Driestandsschakelaar (taakvoorkeur) ─────────────────────── */

.ing-pref-row { display: block; }
.ing-pref-head { display: flex; align-items: baseline; gap: var(--ing-space-2); margin-block-end: var(--ing-space-2); }
.ing-pref-name { font-family: var(--ing-font-display); font-weight: 700; font-size: 23px; text-transform: uppercase; }
.ing-pref-rule { flex: 1; height: 2px; background: var(--ing-line); }
.ing-pref-points { font-family: var(--ing-font-display); font-weight: 600; font-size: 15px; letter-spacing: 0.1em; color: var(--ing-ink-3); }

.ing-tri { display: flex; gap: 2px; }
.ing-tri-btn {
  flex: 1;
  min-height: var(--ing-tap);
  padding: 12px 6px;
  text-align: center;
  background: var(--ing-wash);
  color: var(--ing-ink);
  font-family: var(--ing-font-display);
  font-weight: 600;
  font-size: var(--ing-text-lg);
  text-transform: uppercase;
  transition: background var(--ing-transition), color var(--ing-transition);
}
.ing-tri-btn:hover { background: var(--ing-line); }
.ing-tri-btn.is-active { background: var(--ing-red); color: #fff; }

/* ─── Stepper (autoplekken) ───────────────────────────────────── */

.ing-panel { margin-block-start: var(--ing-space-3); padding: var(--ing-space-3); background: var(--ing-wash); }
.ing-stepper { display: flex; align-items: center; gap: var(--ing-space-3); flex-wrap: wrap; }
.ing-stepper-btn {
  width: var(--ing-tap);
  height: var(--ing-tap);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ing-ink);
  color: #fff;
  font-size: 22px;
}
.ing-stepper-btn:hover { background: var(--ing-red); }
.ing-stepper-value {
  min-width: 56px;
  text-align: center;
  font-family: var(--ing-font-display);
  font-weight: 700;
  font-size: 52px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ─── Formuliervelden ─────────────────────────────────────────── */

.ing-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--ing-space-3); }
.ing-field { display: flex; flex-direction: column; gap: 5px; }
.ing-label {
  font-family: var(--ing-font-display);
  font-weight: 600;
  font-size: var(--ing-text-xs);
  letter-spacing: var(--ing-track);
  text-transform: uppercase;
  color: var(--ing-ink-3);
}
.ing-input {
  min-height: var(--ing-tap);
  padding: 12px var(--ing-space-3);
  background: var(--ing-wash);
  border: 1px solid var(--ing-line);
  font-size: var(--ing-text-base);
}
.ing-input:focus { outline: 3px solid var(--ing-red); outline-offset: 0; }
.ing-input--locked { background: transparent; border-style: dashed; color: var(--ing-ink-3); }
.ing-hint { font-size: var(--ing-text-xs); color: var(--ing-ink-3); }
.ing-error { margin: var(--ing-space-2) 0 0; font-size: 15px; color: #ff9c9c; }

/* Consent en checkboxrijen. De oude 26px-blokstijl op .ing-check
   kneep elk checkboxlabel tot een kolom van een woord breed; de rij
   met vinkje links en tekst rechts is nu de enige vorm. */
.ing-consent { min-height: var(--ing-tap); padding-block: var(--ing-space-2); }
.ing-consent .ing-check span { font-size: 15px; line-height: 1.45; }
.ing-check {
  display: flex;
  align-items: flex-start;
  gap: var(--ing-space-2);
  cursor: pointer;
}
.ing-check input {
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  flex-shrink: 0;
  accent-color: var(--ing-red);
}
.ing-consent__text a { color: inherit; }

/* Toggle-rij: checkbox met vet label en helptekst in een vaste rij. */
.ing-toggle {
  display: flex;
  align-items: flex-start;
  gap: var(--ing-space-2);
  padding: var(--ing-space-2) 0 var(--ing-space-4);
  cursor: pointer;
}
.ing-toggle input {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--ing-red);
}
.ing-toggle__text { display: flex; flex-direction: column; gap: 3px; }
.ing-toggle__label { font-weight: 600; }
.ing-toggle__hint { font-size: var(--ing-text-xs); color: var(--ing-ink-3); }

/* Adreskiezer (PDOK): zoekveld met suggestielijst, gekozen adres als
   vaste regel met wijzigknop. */
.ing-adres [hidden] { display: none !important; }
.ing-adres__box { position: relative; }
.ing-adres__search { width: 100%; }
.ing-adres__change { flex-shrink: 0; }
.ing-adres__list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  position: absolute;
  inset-inline: 0;
  top: 100%;
  z-index: 30;
  background: var(--ing-surface);
  border: 1px solid var(--ing-line);
  box-shadow: var(--ing-shadow);
  max-height: 260px;
  overflow-y: auto;
}
.ing-adres__list li { margin: 0; }
.ing-adres__option {
  display: block;
  width: 100%;
  text-align: start;
  padding: 10px 12px;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.ing-adres__option:hover,
.ing-adres__option:focus-visible { background: var(--ing-wash); }
.ing-adres__picked {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ing-space-2);
  min-height: var(--ing-tap);
  padding: 8px 8px 8px 12px;
  border: 1px solid var(--ing-line);
  background: var(--ing-wash);
}
.ing-adres__display { font-weight: 600; overflow-wrap: anywhere; }
.ing-adres__note.is-error { color: var(--ing-red); }

/* ─── Knoppen ─────────────────────────────────────────────────── */

.ing-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ing-tap);
  padding: 13px var(--ing-space-4);
  font-family: var(--ing-font-display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--ing-ink);
  color: #fff;
  transition: background var(--ing-transition), color var(--ing-transition);
}
.ing-btn:hover { background: var(--ing-red); color: #fff; }
.ing-btn--primary { background: var(--ing-red); }
.ing-btn--primary:hover { background: var(--ing-ink); }
.ing-btn--outline { background: transparent; color: var(--ing-ink); border: 2px solid var(--ing-ink); }
.ing-btn--outline:hover { background: var(--ing-ink); color: #fff; }
.ing-btn--onink { background: transparent; color: #fff; border: 2px solid #fff; }
.ing-btn--onink:hover { background: #fff; color: var(--ing-ink); }
.ing-btn--quiet { background: transparent; color: var(--ing-ink-3); border: 2px solid var(--ing-line); }
.ing-btn--block { width: 100%; margin-block-start: var(--ing-space-3); }
.ing-btn[disabled] { opacity: 0.45; cursor: default; }
.ing-btn-row { display: flex; gap: 2px; flex-wrap: wrap; }
.ing-btn-row--spaced { gap: var(--ing-space-2); }

/* ─── Cijferblokken (dashboard) ───────────────────────────────── */

.ing-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 2px; background: var(--ing-line); }
.ing-stat { background: var(--ing-surface); padding: var(--ing-space-4); }
.ing-stat--ink { background: var(--ing-ink); color: #fff; }
.ing-stat--red { background: var(--ing-red); color: #fff; }
.ing-stat__value {
  margin: 0;
  font-family: var(--ing-font-display);
  font-weight: 700;
  font-size: var(--ing-text-stat);
  line-height: 0.85;
  font-variant-numeric: tabular-nums;
}
.ing-stat__label {
  margin: var(--ing-space-2) 0 0;
  font-family: var(--ing-font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: var(--ing-track);
  text-transform: uppercase;
  color: var(--ing-ink-3);
}
.ing-stat--ink .ing-stat__label,
.ing-stat--red .ing-stat__label { color: rgba(255, 255, 255, 0.7); }

.ing-card { background: var(--ing-surface); padding: var(--ing-space-4); box-shadow: var(--ing-shadow); }
.ing-card--ink { background: var(--ing-ink); color: #fff; box-shadow: none; }
.ing-card--ink .ing-lede { color: rgba(255, 255, 255, 0.75); }
.ing-card__head { padding: var(--ing-space-3) var(--ing-space-4); background: var(--ing-ink); color: #fff; }
.ing-card__head-title { font-family: var(--ing-font-display); font-weight: 600; font-size: 15px; letter-spacing: var(--ing-track); text-transform: uppercase; }
.ing-card__body { padding: var(--ing-space-2) var(--ing-space-4) var(--ing-space-3); }

.ing-notice {
  display: flex;
  align-items: center;
  gap: var(--ing-space-3);
  flex-wrap: wrap;
  padding: var(--ing-space-3) var(--ing-space-4);
  background: var(--ing-surface);
  border-inline-start: 5px solid var(--ing-red);
}
.ing-notice p { margin: 0; flex: 1 1 300px; font-weight: 500; }

/* ─── Lijst: spelers en ouders ────────────────────────────────── */

.ing-list { background: var(--ing-surface); box-shadow: var(--ing-shadow); }
.ing-row {
  display: flex;
  align-items: center;
  gap: var(--ing-space-3);
  flex-wrap: wrap;
  width: 100%;
  min-height: var(--ing-tap);
  padding: var(--ing-space-3) var(--ing-space-4);
  border-block-start: 1px solid var(--ing-line);
  text-align: start;
  transition: background var(--ing-transition);
}
.ing-row:first-child { border-block-start: 0; }
.ing-row:hover { background: var(--ing-wash); }
.ing-row__num {
  min-width: 44px;
  font-family: var(--ing-font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  color: var(--ing-ink-3);
  font-variant-numeric: tabular-nums;
}
.ing-row__body { flex: 1 1 220px; min-width: 0; }
.ing-row__name {
  display: block;
  font-family: var(--ing-font-display);
  font-weight: 700;
  font-size: var(--ing-text-xl);
  line-height: 1.05;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ing-row__kids { display: block; font-size: 15px; color: var(--ing-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ing-row__meta { flex: 0 1 240px; min-width: 0; font-size: var(--ing-text-sm); color: var(--ing-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ing-row__pts { min-width: 46px; text-align: end; font-family: var(--ing-font-display); font-weight: 700; font-size: 26px; font-variant-numeric: tabular-nums; }

.ing-filters { display: flex; gap: 2px; flex-wrap: wrap; margin-block-end: var(--ing-space-3); }
.ing-filter {
  min-height: var(--ing-tap);
  padding: 11px 18px;
  background: var(--ing-surface);
  color: var(--ing-ink);
  font-family: var(--ing-font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ing-filter.is-active { background: var(--ing-ink); color: #fff; }

/* Sleutel/waarde en historie */
.ing-kv { display: flex; align-items: baseline; gap: var(--ing-space-2); padding: 10px 0; border-block-end: 1px solid var(--ing-line); }
.ing-kv__k { font-size: 15px; color: var(--ing-ink-3); }
.ing-kv__fill { flex: 1; }
.ing-kv__v { font-weight: 500; text-align: end; }

.ing-hist { display: flex; gap: var(--ing-space-3); padding: var(--ing-space-2) 0; }
.ing-hist__when { min-width: 104px; font-family: var(--ing-font-display); font-size: 15px; letter-spacing: 0.06em; color: var(--ing-ink-3); }
.ing-hist__what { display: block; line-height: 1.4; font-weight: 500; }
.ing-hist__who { display: block; font-size: var(--ing-text-xs); color: var(--ing-ink-3); }

/* ─── Fly-in (geen modals) ────────────────────────────────────── */

.ing-sheet-veil { position: fixed; inset: 0; z-index: 60; background: rgba(16, 16, 19, 0.5); animation: ing-veil 200ms ease both; }
@keyframes ing-veil { from { opacity: 0; } to { opacity: 1; } }

.ing-flyin {
  position: fixed;
  z-index: 61;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(520px, 94vw);
  background: var(--ing-surface);
  box-shadow: var(--ing-shadow-fly);
  display: flex;
  flex-direction: column;
  animation: ing-fly 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes ing-fly {
  from { transform: translateX(26px); opacity: 0.4; }
  to { transform: none; opacity: 1; }
}
[dir="rtl"] .ing-flyin { animation-name: ing-fly-rtl; }
@keyframes ing-fly-rtl {
  from { transform: translateX(-26px); opacity: 0.4; }
  to { transform: none; opacity: 1; }
}

.ing-flyin__head { display: flex; align-items: flex-start; gap: var(--ing-space-3); padding: var(--ing-space-4); background: var(--ing-ink); color: #fff; }
.ing-flyin__title { margin: 0; font-family: var(--ing-font-display); font-weight: 700; font-size: 34px; line-height: 0.95; text-transform: uppercase; }
.ing-flyin__eyebrow { margin: 0 0 var(--ing-space-1); font-family: var(--ing-font-display); font-weight: 600; font-size: var(--ing-text-xs); letter-spacing: var(--ing-track); text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.ing-flyin__close { width: var(--ing-tap); height: var(--ing-tap); flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--ing-red); color: #fff; }
.ing-flyin__close:hover { background: #fff; color: var(--ing-ink); }
.ing-flyin__body { flex: 1; overflow-y: auto; padding: var(--ing-space-4); }
.ing-flyin__foot { display: flex; gap: 2px; flex-wrap: wrap; padding: var(--ing-space-3); border-block-start: 2px solid var(--ing-ink); }
.ing-flyin[hidden], .ing-sheet-veil[hidden] { display: none; }

/* ─── Import ──────────────────────────────────────────────────── */

.ing-drop { border: 2px dashed var(--ing-line); padding: var(--ing-space-4); text-align: center; }
.ing-drop__name { margin: 0 0 var(--ing-space-1); font-family: var(--ing-font-display); font-weight: 700; font-size: var(--ing-text-xl); text-transform: uppercase; }
.ing-drop__meta { margin: 0 0 var(--ing-space-3); font-family: var(--ing-font-display); font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ing-ink-3); }
.ing-counts { display: flex; gap: var(--ing-space-5); flex-wrap: wrap; margin-block-end: var(--ing-space-3); }
.ing-count__value { margin: 0; font-family: var(--ing-font-display); font-weight: 700; font-size: 58px; line-height: 0.85; font-variant-numeric: tabular-nums; }
.ing-count__value--alert { color: var(--ing-red); }
.ing-count__label { margin: 2px 0 0; font-family: var(--ing-font-display); font-weight: 600; font-size: var(--ing-text-xs); letter-spacing: var(--ing-track); text-transform: uppercase; color: var(--ing-ink-3); }
.ing-rowerror { padding: 10px var(--ing-space-3); background: var(--ing-wash); border-inline-start: 4px solid var(--ing-red); margin-block-end: 2px; }
.ing-rowerror__line { font-family: var(--ing-font-display); font-weight: 600; font-size: var(--ing-text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ing-red); }
.ing-rowerror__msg { display: block; font-size: var(--ing-text-sm); }

/* ─── Instellingen: taaktypes ─────────────────────────────────── */

.ing-task {
  display: flex;
  align-items: center;
  gap: var(--ing-space-3);
  flex-wrap: wrap;
  padding: var(--ing-space-3) var(--ing-space-4);
  border-block-start: 1px solid var(--ing-line);
}
.ing-task:first-child { border-block-start: 0; }
.ing-task.is-off { opacity: 0.5; }
.ing-task__body { flex: 1; min-width: 0; }
.ing-task__name { margin: 0; font-family: var(--ing-font-display); font-weight: 700; font-size: var(--ing-text-xl); line-height: 1; text-transform: uppercase; }
.ing-task__state { margin: 3px 0 0; font-family: var(--ing-font-display); font-size: var(--ing-text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ing-ink-3); }
.ing-task__points { display: flex; align-items: center; gap: 2px; }
.ing-points-btn { width: var(--ing-tap); height: var(--ing-tap); display: flex; align-items: center; justify-content: center; background: var(--ing-wash); font-size: 20px; }
.ing-points-btn:hover { background: var(--ing-ink); color: #fff; }
.ing-points-value { min-width: 48px; text-align: center; font-family: var(--ing-font-display); font-weight: 700; font-size: 34px; font-variant-numeric: tabular-nums; }

.ing-switch { flex-shrink: 0; width: 56px; height: 30px; display: flex; align-items: center; justify-content: flex-start; padding: 3px; background: var(--ing-line); }
.ing-switch.is-on { background: var(--ing-red); justify-content: flex-end; }
.ing-switch__knob { width: 24px; height: 24px; background: #fff; display: block; }

/* ─── Toegankelijkheid en beweging ────────────────────────────── */

:where(a, button, input, select, textarea):focus-visible { outline: 3px solid var(--ing-red); outline-offset: 2px; }

.ing-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ─── Homepagina: hero met schuine flank over een foto ────────── */

.ing-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(380px, 46vw, 580px);
  background: var(--ing-ink);
}

/* De foto begint pas naast de zwarte flank, zodat niets erachter verdwijnt. */
.ing-hero__media {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inset-inline-start: 42%;
}
.ing-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ing-hero__flank {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: min(58%, 760px);
  background: var(--ing-ink);
  clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
  pointer-events: none;
}
[dir="rtl"] .ing-hero__flank { clip-path: polygon(0 0, 100% 0, 100% 100%, 18% 100%); }

.ing-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--ing-space-4);
  min-height: clamp(380px, 46vw, 580px);
  padding: var(--ing-space-5) var(--ing-pad);
  pointer-events: none;
}
.ing-hero__inner > * { max-width: min(60%, 720px); }

.ing-hero__title {
  margin: 0 0 var(--ing-space-4);
  max-width: 14ch; /* let op: op de kop zelf, anders rekent ch in het bodyfont */
  font-family: var(--ing-font-display);
  font-weight: 700;
  font-size: clamp(2.75rem, 7vw, 6rem);
  line-height: 0.86;
  text-transform: uppercase;
  color: #fff;
}

.ing-hero__plate {
  display: inline-block;
  margin: 0;
  padding: 8px 16px;
  background: var(--ing-ink);
  color: #fff;
  font-family: var(--ing-font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 1.875rem);
  line-height: 1.1;
  text-transform: uppercase;
}

/* Schuine call to action, alleen op de homepagina */
.ing-cta-row { display: flex; gap: 2px; flex-wrap: wrap; pointer-events: auto; }
.ing-cta {
  min-height: var(--ing-tap);
  padding: 14px 26px;
  transform: skewX(var(--ing-skew));
  background: var(--ing-red);
  color: #fff;
  font-family: var(--ing-font-display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.ing-cta > span { display: block; transform: skewX(var(--ing-unskew)); }
.ing-cta:hover { background: #fff; color: var(--ing-ink); }
.ing-cta--white { background: #fff; color: var(--ing-ink); }
.ing-cta--white:hover { background: var(--ing-red); color: #fff; }

/* Stappen 01–03 */
.ing-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2px; background: var(--ing-line); }
.ing-step { background: var(--ing-surface); padding: var(--ing-space-4); }
.ing-step__num { margin: 0; font-family: var(--ing-font-display); font-weight: 700; font-size: clamp(2.875rem, 5vw, 4.375rem); line-height: 0.85; color: var(--ing-red); font-variant-numeric: tabular-nums; }
.ing-step__title { margin: var(--ing-space-2) 0; font-family: var(--ing-font-display); font-weight: 700; font-size: 26px; line-height: 1; text-transform: uppercase; }
.ing-step p { margin: 0; color: var(--ing-ink-2); }

/* Kaart met foto */
.ing-mediacard { background: var(--ing-surface); box-shadow: var(--ing-shadow); }
.ing-mediacard__media { position: relative; height: 190px; background: var(--ing-wash); }
.ing-mediacard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ing-mediacard__body { padding: var(--ing-space-3) var(--ing-space-4) var(--ing-space-4); }
.ing-mediacard__title { margin: 0 0 var(--ing-space-2); font-family: var(--ing-font-display); font-weight: 700; font-size: 25px; line-height: 1.02; text-transform: uppercase; }
.ing-mediacard__body p { margin: 0; color: var(--ing-ink-2); font-size: var(--ing-text-sm); }

/* Afsluitende band met twee acties */
.ing-ctaband {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: var(--ing-space-4);
  flex-wrap: wrap;
  padding: var(--ing-space-5) var(--ing-space-4);
  background: var(--ing-ink);
  color: #fff;
}
.ing-ctaband::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: -12%;
  width: 28%;
  background: var(--ing-red);
  transform: skewX(var(--ing-skew));
}
.ing-ctaband > * { position: relative; z-index: 1; }
.ing-ctaband__title { margin: 0 0 var(--ing-space-2); font-family: var(--ing-font-display); font-weight: 700; font-size: clamp(1.75rem, 3.4vw, 2.75rem); line-height: 0.95; text-transform: uppercase; }
.ing-ctaband p { margin: 0; max-width: 56ch; color: rgba(255, 255, 255, 0.75); }

/* ─── Login, aanmelden, wachtwoord vergeten ───────────────────── */

.ing-auth { background: var(--ing-surface); box-shadow: var(--ing-shadow); display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.ing-auth__form { padding: var(--ing-space-4); }
.ing-auth__aside { padding: var(--ing-space-4); background: var(--ing-ink); color: #fff; }
.ing-auth__aside .ing-lede { color: rgba(255, 255, 255, 0.82); }
.ing-auth__title { margin: 0 0 var(--ing-space-3); font-family: var(--ing-font-display); font-weight: 700; font-size: clamp(1.625rem, 2.8vw, 2.25rem); line-height: 1; text-transform: uppercase; }
.ing-auth-item { display: flex; gap: var(--ing-space-3); padding: 11px 0; border-block-end: 1px solid rgba(255, 255, 255, 0.16); }
.ing-auth-item__num { min-width: 26px; font-family: var(--ing-font-display); font-weight: 700; font-size: 19px; color: var(--ing-red); font-variant-numeric: tabular-nums; }
.ing-auth-item p { margin: 0; font-size: var(--ing-text-base); line-height: 1.45; color: rgba(255, 255, 255, 0.82); }
.ing-auth__links { display: flex; gap: var(--ing-space-3); flex-wrap: wrap; margin-block-start: var(--ing-space-3); }
.ing-auth__link { font-family: var(--ing-font-display); font-weight: 600; font-size: 17px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ing-red); text-decoration: none; }
.ing-auth__link:hover { color: var(--ing-ink); text-decoration: underline; }
.ing-field--full { grid-column: 1 / -1; }

/* Honeypot uit 0.1.5: onzichtbaar voor mensen, aanwezig voor bots. */
.ing-honeypot { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .ing-cheer.is-cheering,
  .ing-flyin,
  .ing-sheet-veil { animation: none; }
}

/* Compat: de oude fly-in gebruikt .ing-sheet als overlaycontainer
   (ing-base.css); de clubstijl-oppervlakteklasse mag die niet
   overschilderen. Alleen echte overlays matchen op het data-attribuut. */
.ing-sheet[data-ing-sheet] {
  background: transparent;
  box-shadow: none;
}

/* Photo placeholder until real club photos are chosen in wp-admin. */
.ing-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 220px;
  background:
    repeating-linear-gradient(-12deg, var(--ing-wash) 0 26px, var(--ing-bg) 26px 52px);
}

.ing-hero__media img,
.ing-mediacard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Sprint 5 components, same visual language ---------- */

.ing-nextmatch__title {
  font-family: var(--ing-font-display);
  font-weight: 700;
  font-size: var(--ing-text-3xl);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: var(--ing-space-2) 0;
}

/* The six-card carousel: the only allowed horizontal scroll area. */
.ing-carousel {
  display: flex;
  gap: var(--ing-space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block: var(--ing-space-3);
  -webkit-overflow-scrolling: touch;
}

.ing-matchcard {
  flex: 0 0 220px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--ing-space-2);
  padding: var(--ing-space-3) var(--ing-space-4);
  background: var(--ing-surface);
  box-shadow: var(--ing-shadow);
  text-decoration: none;
  color: var(--ing-ink);
  min-height: var(--ing-tap);
  transition: transform var(--ing-transition), box-shadow var(--ing-transition);
}

.ing-matchcard:hover,
.ing-matchcard:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--ing-shadow-lg);
}

.ing-matchcard__date {
  font-family: var(--ing-font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: var(--ing-track);
  text-transform: uppercase;
  color: var(--ing-ink-3);
}

.ing-allclear__line {
  font-family: var(--ing-font-display);
  font-weight: 700;
  font-size: var(--ing-text-2xl);
  text-transform: uppercase;
  margin: var(--ing-space-2) 0 0;
}

/* Heroes of the month: first name, badge icon, what they did. */
.ing-hero-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ing-space-3);
  margin-block-start: var(--ing-space-3);
}

.ing-hero-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ing-space-1);
  padding: var(--ing-space-3) var(--ing-space-4);
  background: var(--ing-wash);
  min-width: 140px;
}

.ing-hero-card strong {
  font-family: var(--ing-font-display);
  font-weight: 700;
  font-size: var(--ing-text-xl);
  text-transform: uppercase;
}

.ing-hero-card span {
  color: var(--ing-ink-3);
  font-size: var(--ing-text-sm);
}

.ing-badge-icon {
  width: 20px;
  height: 20px;
  color: var(--ing-red);
  vertical-align: text-bottom;
}

.ing-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ing-space-2);
  margin-block-start: var(--ing-space-2);
}

.ing-badge > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Banner slot: clearly marked, never in the way. */
.ing-banner {
  margin-block-start: var(--ing-space-5);
}

.ing-banner-note {
  display: block;
  font-size: var(--ing-text-xs);
  letter-spacing: var(--ing-track);
  text-transform: uppercase;
  color: var(--ing-ink-3);
  margin-block-end: var(--ing-space-1);
}

.ing-banner img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Season progress in the team bar. */
.ing-teambar-progress {
  display: block;
  height: 6px;
  background: var(--ing-line);
  margin-block: var(--ing-space-2);
  overflow: hidden;
}

.ing-teambar-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--ing-red);
  transition: width 200ms ease;
}

.ing-teambar-meta {
  display: block;
  font-size: var(--ing-text-sm);
  color: var(--ing-ink-3);
}

.ing-inline-form {
  display: inline;
}

.ing-heroes {
  overflow: hidden;
}

.ing-nextmatch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ing-space-2);
}

.ing-allclear {
  border-inline-start: 4px solid var(--ing-red);
}

.ing-task-name {
  font-family: var(--ing-font-display);
  font-weight: 600;
  font-size: var(--ing-text-lg);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Language switch in the public topbar: always visible, small caps. */
.ing-lang-switch {
  display: flex;
  gap: 2px;
  margin-inline-start: auto;
}

.ing-topbar .ing-nav {
  margin-inline-start: 0;
}

.ing-lang-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ing-tap);
  min-height: var(--ing-tap);
  padding: 0 6px;
  font-family: var(--ing-font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: var(--ing-track);
  color: var(--ing-ink-3);
  text-decoration: none;
}

.ing-lang-link.is-active {
  color: #fff;
  background: var(--ing-red);
}

.ing-lang-link:hover,
.ing-lang-link:focus-visible {
  color: var(--ing-ink);
}

.ing-lang-link.is-active:hover,
.ing-lang-link.is-active:focus-visible {
  color: #fff;
}

/* ---------- Mobile menu: hamburger plus fold-out panel ---------- */

.ing-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-width: var(--ing-tap);
  min-height: var(--ing-tap);
  margin-inline-start: auto;
  padding: 0 var(--ing-space-3);
  background: none;
  border: 0;
  cursor: pointer;
}

.ing-menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  transition: transform var(--ing-transition), opacity var(--ing-transition);
}

.ing-menu-toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.ing-menu-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.ing-menu-toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 760px) {
  .ing-menu-toggle {
    display: flex;
  }

  .ing-topbar .ing-nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--ing-space-2) 0 var(--ing-space-3);
    background: var(--ing-ink);
  }

  .ing-topbar .ing-nav.is-open {
    display: flex;
  }

  .ing-topbar .ing-nav-link {
    transform: none;
    min-height: var(--ing-tap);
    display: flex;
    align-items: center;
    padding-inline: var(--ing-space-4);
    font-size: 21px;
    border-block-start: 1px solid rgba(255, 255, 255, 0.08);
  }

  .ing-topbar .ing-nav-link > span {
    transform: none;
  }

  .ing-topbar .ing-nav-link.is-active {
    background: var(--ing-red);
    color: #fff;
  }

  .ing-brand {
    flex: 1;
  }

  .ing-lang-switch {
    margin-inline-start: 0;
    order: 1;
  }

  .ing-menu-toggle {
    order: 2;
  }

  .ing-topbar .ing-nav {
    order: 3;
  }
}

/* ---------- Homepage live photo editing (site admin only) ---------- */

.ing-image-slot {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.ing-image-slot img,
.ing-image-slot .ing-photo-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ing-image-edit {
  position: absolute;
  inset-block-end: var(--ing-space-2);
  inset-inline-end: var(--ing-space-2);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  min-height: var(--ing-tap);
  padding: 0 var(--ing-space-3);
  background: var(--ing-ink);
  color: #fff;
  font-family: var(--ing-font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: var(--ing-track);
  text-transform: uppercase;
  cursor: pointer;
  pointer-events: auto;
  transition: background var(--ing-transition);
}

.ing-image-edit:hover,
.ing-image-edit:focus-within {
  background: var(--ing-red);
}

.ing-image-slot.is-uploading .ing-image-edit {
  background: var(--ing-red);
}

.ing-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Ongeldige link / 404 (handoff-404) ---------- */
.ing-band__split { display: flex; align-items: flex-start; gap: var(--ing-space-4); flex-wrap: wrap; }
.ing-band__split > *:first-child { flex: 1 1 320px; }
.ing-band-title--tight { max-width: 16ch; }
.ing-band-lead { margin: var(--ing-space-3) 0 0; max-width: 52ch; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, 0.8); }
.ing-meta--spaced { display: block; margin-block-start: var(--ing-space-4); margin-block-end: var(--ing-space-2); color: rgba(255, 255, 255, 0.5); }
.ing-auth__help { margin: 0 0 var(--ing-space-3); font-size: var(--ing-text-base); line-height: 1.5; color: rgba(255, 255, 255, 0.82); }