/*
 * Secret Santa - stijlblad van de app (ticket 009a).
 * Afgeleid van het goedgekeurde ontwerp (docs/design/007-schermontwerp/style.css):
 * dezelfde kleuren en bouwstenen, zonder het kader en de uitleg van de mockup.
 * Alles lokaal: systeemlettertypen, geen externe bestanden. Donkere modus en
 * verminderde beweging volgen alleen de instelling van het toestel.
 * Opbouw: 1 kleuren, 2 basis, 3 app-onderdelen, 4 pincode, 5 verlanglijst,
 *         6 cadeau-animatie, 7 beheer, 8 breedtes (media queries), 9 raamwerk.
 */

/* ============ 1. kleuren (licht) en donkere variant ============ */
:root {
  color-scheme: light;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bg: #fbf6ec;
  --surface: #ffffff;
  --surface-2: #f4ecdc;
  --ink: #27211c;
  --muted: #5a5148;
  --line: #dccfb6;
  --line-strong: #8f8470;
  --pine: #174c3f;
  --pine-dark: #0f3a30;
  --on-pine: #f8f2e4;
  --accent: #174c3f;
  --sel-bg: #e6f1ec;
  --red: #a6212a;
  --red-dark: #8a1a22;
  --on-red: #ffffff;
  --gold: #d9a93a;
  --gold-soft: #fbefc9;
  --gold-ink: #664600;
  --ok-text: #14573a;
  --ok-bg: #e0f1e5;
  --ok-solid: #1b6a42;
  --warn-text: #6b4100;
  --warn-bg: #fff0cc;
  --warn-solid: #b07a10;
  --err-text: #8a1820;
  --err-bg: #fde6e4;
  --err-solid: #9a1b23;
  --info-text: #174472;
  --info-bg: #e3edf8;
  --info-solid: #1b4b7a;
  --muted-solid: #6b6258;
  --focus: #0a58ca;
  --shadow: 0 8px 28px rgba(40, 25, 10, 0.18);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0e1b18;
    --surface: #162622;
    --surface-2: #1d322d;
    --ink: #f3ede0;
    --muted: #bfb8a8;
    --line: #33493f;
    --line-strong: #74908a;
    --pine: #0b3a30;
    --pine-dark: #07211b;
    --accent: #8fd3b9;
    --sel-bg: #173a33;
    --red: #c0323b;
    --red-dark: #a62830;
    --gold: #e2b650;
    --gold-soft: #3a3217;
    --gold-ink: #f1d98f;
    --ok-text: #8fe0b0;
    --ok-bg: #173a29;
    --ok-solid: #2c8a5a;
    --warn-text: #f6d28b;
    --warn-bg: #3b2e10;
    --warn-solid: #d9a93a;
    --err-text: #ffb0b4;
    --err-bg: #4a1a1e;
    --err-solid: #b3303a;
    --info-text: #a9d0f5;
    --info-bg: #172c44;
    --info-solid: #2d6aa6;
    --muted-solid: #7d766b;
    --focus: #7db4ff;
    --shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  }
}

/* ============ 2. basis ============ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--ink); line-height: 1.5; font-size: 100%; }
[hidden] { display: none !important; }
a { color: var(--accent); }
img, svg { max-width: 100%; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.app-head :focus-visible { outline-color: var(--on-pine); }
code { font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; font-size: 0.88em; background: var(--surface-2); padding: 0.05em 0.3em; border-radius: 5px; overflow-wrap: anywhere; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: 0.85em; }
.center { text-align: center; }
.nm { overflow-wrap: anywhere; word-break: break-word; }

/* Verminderde beweging: de instelling van het toestel. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Hoog contrast (forced-colors, bijvoorbeeld Windows): de kleuren van de app worden door het systeem vervangen.
   Wat alleen met een achtergrondkleur zichtbaar was, krijgt een rand in een systeemkleur, en de voortgangsbalken een vulling. */
@media (forced-colors: active) {
  .btn, .key, .tile, .chip, .avatar, .gift-stage .reveal-card { border: 2px solid ButtonText; }
  .btn[disabled], .btn.is-disabled, .btn[aria-disabled="true"] { border-color: GrayText; }
  .progress, .countbar { border: 2px solid CanvasText; }
  .progress > i, .countbar > i { background: Highlight; forced-color-adjust: none; }
  .pin-dots i { border: 2px solid CanvasText; }
  .pin-dots i.on { background: Highlight; forced-color-adjust: none; }
  .spinner { border-color: GrayText; border-top-color: Highlight; forced-color-adjust: none; }
  :focus-visible { outline: 3px solid Highlight; }
}

/* ============ 3. app-onderdelen ============ */
.screen { position: relative; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; background: var(--bg); color: var(--ink); font-size: 1.125rem; line-height: 1.45; }
.screen[data-app="admin"] { font-size: 1rem; }
.screen-body { flex: 1; min-width: 0; padding: 1.1em; display: flex; flex-direction: column; }
.screen h1 { margin: 0; font-size: 1.6em; line-height: 1.2; }
.screen h2 { margin: 0; font-size: 1.5em; line-height: 1.2; }
.screen h3 { margin: 0; font-size: 1.15em; line-height: 1.25; }
.screen p { margin: 0; }
.screen p + p { margin-top: 0.5em; }
.stack { display: grid; gap: 1em; align-content: start; width: 100%; }
.stack > * { min-width: 0; }
.stack.narrow { max-width: 560px; margin-inline: auto; }

.app-head { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3em 0.6em; min-height: 64px; padding: 0.5em 0.9em; color: var(--on-pine); background-color: var(--pine);
  background-image: radial-gradient(circle at 12% 30%, rgba(255,255,255,.16) 0 2px, transparent 3px), radial-gradient(circle at 46% 70%, rgba(255,255,255,.12) 0 2px, transparent 3px), radial-gradient(circle at 82% 25%, rgba(255,255,255,.14) 0 1.5px, transparent 2.5px);
  background-size: 140px 64px;
  border-bottom: 4px solid; border-image: repeating-linear-gradient(90deg, var(--red) 0 22px, var(--gold) 22px 44px, #2a7a5f 44px 66px) 1; }
.brand { display: inline-flex; align-items: center; gap: 0.45em; font-weight: 800; font-size: 1.05em; white-space: nowrap; }
.brand .ic { color: var(--gold); }
.brand .tag { margin-left: 0.2em; padding: 0.05em 0.6em; border-radius: 99px; background: rgba(255,255,255,0.18); font-size: 0.8em; font-weight: 700; }
.grow { flex: 1; }
.who { display: flex; align-items: center; gap: 0.5em; min-width: 0; max-width: 46%; }
.who .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.langsw { display: inline-flex; border: 2px solid var(--on-pine); border-radius: 12px; overflow: hidden; }
.langsw button { min-width: 48px; min-height: 48px; font: inherit; font-weight: 700; color: var(--on-pine); background: transparent; border: 0; cursor: pointer; }
.langsw button[aria-pressed="true"] { background: var(--on-pine); color: var(--pine-dark); }

i.ic { display: inline-flex; width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.2em; }
i.ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
i.ic.fill svg { fill: currentColor; stroke: none; }
i.ic.big { width: 64px; height: 64px; color: var(--accent); }
i.ic.big.warn { color: var(--warn-text); }
i.ic.big.ok { color: var(--ok-text); }

.avatar { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font-weight: 800; color: #fff; flex: none; background: var(--pine); }
.avatar.sm { width: 32px; height: 32px; font-size: 0.9em; background: var(--gold); color: #2b1d00; }
.avatar.xl { width: 84px; height: 84px; font-size: 2.2em; }
.avatar .ic { color: #fff; }
.avatar.c1 { background: #a6212a; } .avatar.c2 { background: #2a7a5f; } .avatar.c3 { background: #8a5a12; } .avatar.c4 { background: #355c8c; } .avatar.c5 { background: #6b3f7a; }

/* knoppen: minstens 48 px, hoofdknoppen 56 px */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 56px; padding: 0.55em 1.3em; border: 2px solid transparent; border-radius: 14px; font: inherit; font-weight: 700; font-size: 1.02em; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; background: var(--surface-2); color: var(--ink); }
.btn:hover { filter: brightness(0.96); }
.btn.primary { background: var(--red); color: var(--on-red); }
.btn.primary:hover { background: var(--red-dark); filter: none; }
.btn.secondary { background: transparent; border-color: var(--accent); color: var(--accent); }
.btn.danger { background: transparent; border-color: var(--err-solid); color: var(--err-text); }
.btn.danger-solid { background: var(--err-solid); color: #fff; }
.btn.ghost { background: transparent; color: var(--accent); text-decoration: underline; }
.btn.google { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn.onpine { background: transparent; border-color: var(--on-pine); color: var(--on-pine); }
.btn.small { min-height: 48px; padding: 0.3em 1em; font-size: 0.95em; }
.btn.block { display: flex; width: 100%; }
.btn.big { min-height: 64px; font-size: 1.15em; }
.btn[disabled], .btn.is-disabled { opacity: 0.55; cursor: not-allowed; filter: none; }
summary.btn { list-style: none; }
summary.btn::-webkit-details-marker { display: none; }
.hero .btn.primary { background: var(--gold); color: #2b1d00; }
.hero .btn.primary:hover { background: #e8bb52; }
.backlink, .linkbtn { display: inline-flex; align-items: center; gap: 0.3em; min-height: 48px; padding: 0; font: inherit; font-weight: 700; color: var(--accent); background: none; border: 0; cursor: pointer; text-decoration: none; justify-self: start; }
.gift-stage > .backlink { justify-self: center; }
.linkbtn { text-decoration: underline; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.6em; align-items: center; }

/* chips, meldingen, kaarten */
.chip { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.2em 0.75em; border-radius: 99px; font-size: 0.85em; font-weight: 700; line-height: 1.3; background: var(--surface-2); color: var(--ink); border: 1.5px solid var(--line-strong); }
.chip.ok { background: var(--ok-bg); color: var(--ok-text); border-color: var(--ok-solid); }
.chip.warn { background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-solid); }
.chip.err { background: var(--err-bg); color: var(--err-text); border-color: var(--err-solid); }
.chip.gold { background: var(--gold-soft); color: var(--gold-ink); border-color: var(--gold); }
.chips { display: flex; flex-wrap: wrap; gap: 0.5em; }
.alert { display: flex; align-items: flex-start; gap: 0.7em; padding: 0.85em 1em; border: 2px solid; border-radius: 14px; line-height: 1.4; color: var(--ink); }
.alert > div { display: grid; gap: 0.4em; min-width: 0; }
.alert p + p { margin-top: 0.4em; }
.alert .ic { margin-top: 0.12em; }
.alert.info { background: var(--info-bg); border-color: var(--info-solid); } .alert.info .ic { color: var(--info-text); }
.alert.ok { background: var(--ok-bg); border-color: var(--ok-solid); } .alert.ok .ic { color: var(--ok-text); }
.alert.warn { background: var(--warn-bg); border-color: var(--warn-solid); } .alert.warn .ic { color: var(--warn-text); }
.alert.err { background: var(--err-bg); border-color: var(--err-solid); } .alert.err .ic { color: var(--err-text); }
.card { display: grid; gap: 0.8em; align-content: start; padding: 1.1em 1.2em; background: var(--surface); border: 1.5px solid var(--line); border-radius: 18px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; }
.row-between.wrap { flex-wrap: wrap; }
.row-between > * { min-width: 0; }
.eyebrow { margin: 0; font-size: 0.78em; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.hero { display: grid; gap: 0.5em; padding: 1.2em 1.3em; color: var(--on-pine); border-radius: 20px; background-color: var(--pine);
  background-image: radial-gradient(circle at 15% 25%, rgba(255,255,255,.14) 0 2px, transparent 3px), radial-gradient(circle at 75% 70%, rgba(255,255,255,.12) 0 2px, transparent 3px), radial-gradient(circle at 92% 18%, rgba(255,255,255,.12) 0 1.5px, transparent 2.5px);
  background-size: 160px 100px; }
/* Feestelijke kaart: één zacht verloop over de hele kaart, nooit herhalend.
   (Eerder erfde deze kaart background-size 160x100 van .hero, waardoor het verloop als banen herhaalde.) */
.hero.festive { background-color: #3a1a22; background-repeat: no-repeat; background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-image:
    radial-gradient(circle at 88% 22%, rgba(255,255,255,.22) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 74% 64%, rgba(255,255,255,.14) 0 1px, transparent 2px),
    radial-gradient(circle at 93% 80%, rgba(255,255,255,.16) 0 1.5px, transparent 2.5px),
    linear-gradient(150deg, var(--pine) 0%, #4b1a24 100%); }
.hero .eyebrow { color: var(--gold); }
.hero .facts, .hero a { color: var(--on-pine); }
.hero .btn.primary { color: #2b1d00; }
.facts { display: flex; flex-wrap: wrap; gap: 0.4em 1.2em; margin: 0; padding: 0; list-style: none; }
.facts li { display: flex; align-items: center; gap: 0.4em; }
.facts.col { flex-direction: column; align-items: flex-start; gap: 0.4em; }
.progress { height: 14px; border-radius: 99px; background: var(--surface-2); border: 1.5px solid var(--line-strong); overflow: hidden; }
.progress > i { display: block; width: var(--w, 0%); height: 100%; background: var(--warn-solid); }
.progress.ok > i { background: var(--ok-solid); }
.privacy-line { display: flex; align-items: flex-start; gap: 0.6em; margin: 0; color: var(--muted); font-size: 0.9em; }
.privacy-line .ic { margin-top: 0.1em; }
.foot-links { margin-top: 0.5em; }
.hint { color: var(--muted); font-size: 0.9em; }
.empty { display: grid; justify-items: center; align-content: center; gap: 0.8em; padding: 1.5em 0.5em; text-align: center; }
.empty > * { max-width: 34em; }
.small-empty { padding: 0.8em 0; }
.crumb { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6em; }
.quote { padding: 0.5em 0.8em; border-left: 4px solid var(--gold); background: var(--surface-2); border-radius: 8px; font-weight: 700; overflow-wrap: anywhere; }
.plain-list { margin: 0; padding-left: 1.2em; display: grid; gap: 0.5em; }
.reqid { margin: 0; padding: 0.4em 0.7em; border-radius: 8px; background: var(--surface-2); font-family: ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }

/* tegels (groepen, bevestigingstegel met voornaam en initiaal) */
.tiles { display: grid; grid-template-columns: 1fr; gap: 0.75em; }
.tile { display: flex; align-items: center; gap: 0.9em; width: 100%; min-height: 68px; padding: 0.6em 1em; text-align: left; font: inherit; color: var(--ink); text-decoration: none; background: var(--surface); border: 2px solid var(--line); border-radius: 16px; cursor: pointer; }
.tile:hover { border-color: var(--accent); }
.tile .tx { display: grid; min-width: 0; }
.tile .name { font-weight: 700; overflow-wrap: anywhere; word-break: break-word; }
.tile .sub { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3em; font-size: 0.85em; color: var(--muted); }
.tile.locked { border-style: dashed; }
/* bevestigingstegel na het e-mailadres: één tegel, alleen voornaam en initiaal */
.tile.confirm { min-height: 88px; border-color: var(--accent); border-width: 3px; font-size: 1.15em; }
.tile.confirm .avatar { width: 56px; height: 56px; font-size: 1.3em; }
.tile.confirm .sub { font-size: 0.8em; }
.tile.confirm .go { margin-left: auto; color: var(--accent); }

/* formulieren */
.field { display: grid; gap: 0.35em; }
.field > label, .field > .lbl, .lbl { font-weight: 700; }
.req { color: var(--err-text); }
.opt { font-weight: 400; color: var(--muted); font-size: 0.9em; }
.input { width: 100%; min-height: 56px; padding: 0.6em 0.9em; font: inherit; color: var(--ink); background: var(--surface); border: 2px solid var(--line-strong); border-radius: 12px; }
.textarea { min-height: 96px; resize: vertical; white-space: pre-wrap; }
.input.short { max-width: 9em; }
.input.pin-input { max-width: 9em; letter-spacing: 0.4em; font-size: 1.3em; text-align: center; }
.field.has-error .input { border-color: var(--err-solid); background: var(--err-bg); }
.field .err { display: flex; align-items: flex-start; gap: 0.4em; color: var(--err-text); font-weight: 600; }
.field .err .ic { margin-top: 0.12em; }
.counter { float: right; }
.counter.over { color: var(--err-text); font-weight: 700; }
.input.email { font-size: 1.1em; min-height: 64px; }
.key-notice { border-width: 3px; }
.key-notice strong.t { display: block; font-size: 1.05em; }
.preview { padding: 0.5em 0.8em; background: var(--surface-2); border-radius: 10px; }
.radios { display: flex; flex-wrap: wrap; gap: 0.6em; }
.radio { flex: 1; min-width: min(8em, 100%); min-height: 56px; padding: 0.4em 1em; font: inherit; font-weight: 700; color: var(--ink); background: var(--surface); border: 2px solid var(--line-strong); border-radius: 12px; cursor: pointer; }
.radio[aria-checked="true"], .rcard[aria-checked="true"] { border-color: var(--accent); background: var(--sel-bg); box-shadow: inset 0 0 0 1px var(--accent); }
.radiocards { display: grid; gap: 0.6em; }
.rcard { display: grid; gap: 0.3em; min-height: 64px; padding: 0.9em 1em; text-align: left; font: inherit; color: var(--ink); background: var(--surface); border: 2px solid var(--line-strong); border-radius: 14px; cursor: pointer; }
.rcard span { color: var(--muted); font-size: 0.92em; }
.radiocards.locked .rcard { opacity: 0.7; cursor: not-allowed; }
.switchrow { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 0.4em 0; }
.switchrow span { display: grid; gap: 0.1em; min-width: 0; }
.switchrow small { color: var(--muted); font-size: 0.88em; }
.sw { position: relative; flex: none; width: 64px; min-height: 48px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.sw::before { content: ""; position: absolute; left: 0; top: 50%; width: 64px; height: 34px; transform: translateY(-50%); border-radius: 99px; background: var(--line-strong); transition: background 0.2s; }
.sw i { position: absolute; top: 50%; left: 4px; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4); transition: transform 0.2s; }
.sw[aria-checked="true"]::before { background: var(--ok-solid); }
.sw[aria-checked="true"] i { transform: translateX(30px); }
.sw:disabled { opacity: 0.5; cursor: not-allowed; }
details.more > summary { display: flex; align-items: center; min-height: 48px; font-weight: 700; color: var(--accent); cursor: pointer; }
details.more > *:not(summary) { margin-top: 1em; }
details.more { padding: 0.2em 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* laden */
.spinner { display: inline-block; width: 1em; height: 1em; border: 3px solid var(--line-strong); border-top-color: var(--red); border-radius: 50%; vertical-align: -0.15em; animation: spin 0.9s linear infinite; }
.spinner.big { width: 56px; height: 56px; border-width: 6px; }
.skel { border-radius: 14px; background: linear-gradient(90deg, var(--surface-2), var(--line), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.tile-skel { height: 68px; } .hero-skel { height: 160px; } .card-skel { height: 130px; } .wish-skel { height: 110px; } .row-skel { height: 72px; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* overlay (dialoog / onderblad) en melding */
.overlay { position: fixed; inset: 0; z-index: 50; display: grid; padding: 12px; overflow: auto; background: rgba(10, 20, 17, 0.6); }
.sheet { width: min(480px, 100%); margin: auto; padding: 1.2em; display: grid; gap: 0.8em; justify-items: stretch; background: var(--surface); color: var(--ink); border-radius: 20px; box-shadow: var(--shadow); font-size: 1.125rem; line-height: 1.45; }
.sheet h3 { margin: 0; font-size: 1.15em; line-height: 1.25; text-align: center; }
.sheet p { margin: 0; }
.sheet.center { text-align: center; }
.sheet > i.ic.big { justify-self: center; }
.dlg-body { display: grid; gap: 0.8em; }
.dlg-body .err { color: var(--err-text); font-weight: 600; }
.modal-open { overflow: hidden; }
.countbar { height: 10px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.countbar > i { display: block; width: var(--w, 100%); height: 100%; background: var(--red); transition: width 1s linear; }
@media (prefers-reduced-motion: reduce) { .countbar { display: none; } }
.toasts { position: fixed; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + 72px); z-index: 60; display: grid; gap: 8px; justify-items: center; padding: 0 12px; pointer-events: none; }
.toasts:empty { padding: 0; }
.toast { display: flex; align-items: center; gap: 0.4em; max-width: 480px; padding: 0.6em 1em; background: #0f3a30; color: #fff; border-radius: 14px; box-shadow: var(--shadow); pointer-events: none; }
/* A message at the top never catches a tap (it used to sit at the bottom and covered the button "Opslaan" of the next form).
   Its close button is only for the keyboard and the screen reader: it shows when it has the focus. The message goes by itself. */
.toast-close { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); padding: 0; border: 0; pointer-events: none; }
.toast-close:focus-visible { position: static; width: 48px; height: 48px; clip: auto; display: grid; place-items: center; margin: -0.4em -0.6em -0.4em 0; color: #fff; background: none; border-radius: 12px; pointer-events: auto; outline-color: #fff; }
.end-banner { padding: 0.5em 1em; text-align: center; font-weight: 700; background: var(--warn-bg); color: var(--warn-text); border-bottom: 2px solid var(--warn-solid); }
.skip { position: absolute; left: 8px; top: -100px; z-index: 100; display: inline-flex; align-items: center; min-height: 48px; padding: 0 1em; font-weight: 700; color: var(--on-pine); background: var(--pine-dark); border-radius: 10px; }
.skip:focus { top: 8px; }
.legacy { padding: 1em; text-align: center; font-family: var(--font); }
.btn.is-busy { cursor: progress; }
.busy-mark { display: inline-flex; }
.head-extra, .head-end { display: flex; align-items: center; gap: 0.5em; }
main:focus, h1:focus, h2:focus { outline: none; }

/* ============ 4. pincode ============ */
.pin-layout { display: grid; gap: 1.2em; justify-items: center; align-content: start; width: 100%; max-width: 560px; margin: 0 auto; }
.pin-intro { display: grid; justify-items: center; gap: 0.6em; width: 100%; text-align: center; }
.pin-intro .field { width: 100%; text-align: left; }
.steps-dots { display: flex; gap: 0.5em; }
.steps-dots i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--accent); }
.steps-dots i.on { background: var(--accent); }
.pinpad { display: grid; justify-items: center; gap: 0.9em; width: 100%; }
.pin-dots { display: flex; gap: 1em; margin: 0.3em 0; }
.pin-dots i { display: block; width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--accent); }
.pin-dots i.on { background: var(--accent); }
.pin-dots.ok i { background: var(--ok-solid); border-color: var(--ok-solid); }
.pin-dots.shake { animation: shake 0.4s; }
.pin-dots.busy i { animation: pulse 0.8s ease-in-out infinite alternate; }
.pin-dots.busy i:nth-child(2) { animation-delay: 0.1s; } .pin-dots.busy i:nth-child(3) { animation-delay: 0.2s; } .pin-dots.busy i:nth-child(4) { animation-delay: 0.3s; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-10px); } 40% { transform: translateX(10px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(6px); } }
@keyframes pulse { from { opacity: 1; transform: scale(1); } to { opacity: 0.45; transform: scale(0.8); } }
.keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7em; width: min(100%, 320px); }
.key { min-height: 68px; font: inherit; font-size: 1.7em; font-weight: 700; color: var(--ink); background: var(--surface); border: 2px solid var(--line-strong); border-radius: 18px; cursor: pointer; }
.key:active { background: var(--gold-soft); }
.key.fn { font-size: 1em; color: var(--accent); background: transparent; border-color: transparent; }
.pinpad[aria-disabled="true"] .keys { opacity: 0.45; pointer-events: none; }
.pinpad.compact .keys { width: min(100%, 280px); gap: 0.5em; }
.pinpad.compact .key { min-height: 68px; font-size: 1.4em; border-radius: 14px; }
.pin-error { width: min(100%, 360px); }
/* A message above the pad (wrong PIN, the hint): the pad is not pushed below the fold of a phone (375 x 812). The line that
   explains the pad and the big avatar make room; the message stays a full alert with its icon, and the keys keep 68 px. */
.pin-layout.has-msg { gap: 0.6em; }
.pin-layout.has-msg .pin-intro { gap: 0.3em; }
.pin-layout.has-msg .pin-intro .avatar { display: none; }
.pin-layout.has-msg .pin-intro #pin-lead { display: none; }
.pin-layout.has-msg .pinpad { gap: 0.5em; }
.pin-layout.has-msg .pin-messages { display: grid; gap: 0.3em; justify-items: center; width: 100%; }
.pin-layout.has-msg .pin-error { padding: 0.5em 0.8em; }

/* ============ 5. verlanglijst ============ */
.wishes { display: grid; gap: 0.8em; }
.wish { display: grid; gap: 0.45em; padding: 1em 1.1em; background: var(--surface); border: 1.5px solid var(--line); border-radius: 16px; }
.wish .desc { font-size: 1.05em; font-weight: 700; overflow-wrap: anywhere; word-break: break-word; }
.wish .meta { display: flex; flex-wrap: wrap; gap: 0.2em 1em; color: var(--muted); }
.wish .meta > span { min-width: 0; overflow-wrap: anywhere; }
.wish .price { font-weight: 700; color: var(--ink); }
.wish .k { font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.04em; margin-right: 0.3em; }
.wish .note { padding-left: 0.7em; border-left: 3px solid var(--gold); white-space: pre-line; overflow-wrap: anywhere; }
.wish .actions { display: flex; flex-wrap: wrap; gap: 0.5em; margin-top: 0.2em; }
.wish.locked { background: var(--surface-2); }
.wish .chip { justify-self: start; }
.ext { color: var(--accent); text-decoration: underline; overflow-wrap: anywhere; word-break: break-all; }

/* ============ 6. cadeau-animatie ============ */
.gift-stage { display: grid; justify-items: center; align-content: start; gap: 0.8em; width: 100%; max-width: 520px; margin: 0 auto; padding: 0.8em 1.1em; text-align: center; }
.gift-stage.compact { padding-top: 1.5em; }
.gift-wrap { position: relative; width: min(240px, 68%); }
.gift-btn { display: block; width: 100%; padding: 0; background: none; border: 0; border-radius: 20px; cursor: pointer; }
.gift-btn.static { cursor: default; }
.gift { display: block; width: 100%; height: auto; overflow: visible; transform-origin: 50% 90%; }
.gift .lid { transform-box: fill-box; transform-origin: 0% 100%; } /* the hinge: the bottom left corner of the lid */
.gift .glow { transform-box: fill-box; transform-origin: 50% 100%; }
.gift .inside { opacity: 0; }
.gift .glow { opacity: 0; transform-origin: 50% 50%; }
.confetti { position: absolute; left: 50%; top: 42%; width: 0; height: 0; pointer-events: none; }
.confetti i { position: absolute; display: block; border-radius: 2px; background: var(--c, #d9a93a); opacity: 0; }
.below { display: grid; justify-items: center; width: 100%; }
.below > * { grid-area: 1 / 1; }
.reveal-card { display: grid; justify-items: center; gap: 0.3em; width: min(100%, 420px); padding: 1em 1.3em; background: var(--surface); border: 2px solid var(--gold); border-radius: 20px; box-shadow: var(--shadow); opacity: 0; transform: translateY(24px) scale(0.92); pointer-events: none; }
.who-big { margin: 0; font-size: 1.7em; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; word-break: break-word; }
.reveal-cta { display: grid; gap: 0.6em; width: min(100%, 420px); opacity: 0; visibility: hidden; }

.gift-stage.is-playing .gift { animation: wiggle 0.9s ease-in-out both; }
.gift-stage.is-playing .lid { animation: lidopen 0.8s 1.1s cubic-bezier(.3, 0, .6, 1) both; }
.gift-stage.is-playing .inside { animation: insidein 0.4s 1.3s ease-out both; }
.gift-stage.is-playing .glow { animation: glowburst 1.1s 1.5s ease-out both; }
.gift-stage.is-playing .confetti i { animation: confettifall 2.2s var(--delay, 1.5s) cubic-bezier(.2, .6, .4, 1) both; }
.gift-stage.is-playing .play-btn { visibility: hidden; }
.gift-stage.is-playing .reveal-card { animation: rise 0.8s 2.1s cubic-bezier(.2, .8, .3, 1) both; }
.gift-stage.is-playing .reveal-cta { animation: appear 0.5s 3.1s ease-out both; pointer-events: none; }
.gift-stage.is-done .play-btn { display: none; }
/* The end state is the last picture of the animation, and it stays: the lid rests open on its hinge (with the bow on it), the dark inside shows. */
.gift-stage.is-done .lid { transform: rotate(-24deg); }
.gift-stage.is-done .inside { opacity: 1; }
.gift-stage.is-done .reveal-card { opacity: 1; transform: none; pointer-events: auto; }
.gift-stage.is-done .reveal-cta { opacity: 1; visibility: visible; }
.gift-stage.is-done .no-reveal-note { display: none; }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-5deg); } 30% { transform: rotate(5deg); } 45% { transform: rotate(-4deg); } 60% { transform: rotate(4deg); } 75% { transform: rotate(-2deg); } 90% { transform: rotate(1deg); } }
@keyframes lidopen { 0% { transform: rotate(0); } 100% { transform: rotate(-24deg); } }
@keyframes insidein { from { opacity: 0; } to { opacity: 1; } }
@keyframes glowburst { 0% { opacity: 0; transform: scale(0.3); } 30% { opacity: 0.95; } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes confettifall { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 10% { opacity: 1; } 40% { opacity: 1; transform: translate(calc(var(--x) * 0.6), calc(var(--up) * -1)) rotate(calc(var(--r) * 0.5)); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)); } }
@keyframes rise { from { opacity: 0; transform: translateY(24px) scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes appear { from { opacity: 0; visibility: visible; } to { opacity: 1; visibility: visible; } }

/* ============ 7. beheer ============ */
.adm-wrap { display: flex; flex: 1; min-height: 0; }
.adm-wrap > .screen-body { flex: 1; min-width: 0; }
.adm-side { display: none; flex-direction: column; gap: 0.3em; width: 220px; flex: none; padding: 1em 0.7em; background: var(--surface-2); border-right: 1.5px solid var(--line); }
.adm-side a, .adm-menu-panel a { display: flex; align-items: center; gap: 0.7em; min-height: 52px; padding: 0.4em 0.9em; border-radius: 12px; font-weight: 600; text-decoration: none; }
.adm-side a { color: var(--ink); }
.adm-side a[aria-current="page"] { background: var(--pine); color: var(--on-pine); }
.adm-menu-panel a { color: var(--on-pine); min-height: 56px; }
.adm-menu-panel a[aria-current="page"] { background: rgba(255, 255, 255, 0.16); }
.adm-menu-panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 8; display: grid; gap: 0.2em; padding: 0.5em; background: var(--pine-dark); box-shadow: var(--shadow); }
.adm-menu summary { cursor: pointer; }

.cards { display: grid; gap: 1em; }
.cards .card h3 { overflow-wrap: anywhere; }
.steps { display: grid; gap: 0.7em; margin: 0; padding: 0; list-style: none; }
.step { display: flex; align-items: center; gap: 0.9em; min-height: 72px; padding: 0.8em 1em; color: var(--ink); text-decoration: none; background: var(--surface); border: 2px solid var(--line); border-radius: 16px; }
.step:hover { border-color: var(--accent); }
.step .n { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--pine); color: var(--on-pine); font-weight: 800; }
.step .tx { display: grid; flex: 1; min-width: 0; }
.step .tx span { color: var(--muted); font-size: 0.92em; }
.mini-steps { margin: 0; padding-left: 1.4em; text-align: left; }
.cols { display: grid; gap: 1em; }

.rtable { width: 100%; border-collapse: collapse; }
.rtable th { padding: 0.6em 0.8em; text-align: left; font-size: 0.85em; color: var(--muted); border-bottom: 2px solid var(--line); }
.rtable td { padding: 0.7em 0.8em; vertical-align: middle; border-bottom: 1px solid var(--line); }
.rtable td.name { font-weight: 700; overflow-wrap: anywhere; }
.rtable td.mail { overflow-wrap: anywhere; word-break: break-all; min-width: 9em; color: var(--muted); }
.act-wide { display: none; }
.act-narrow { display: inline-flex; }
.summary { margin: 0; }

.mxroot { display: grid; gap: 1.2em; }
.mx-matrix { display: none; }
.mx-scroll { overflow-x: auto; padding-bottom: 0.4em; }
.matrix { border-collapse: separate; border-spacing: 4px; }
.matrix th { padding: 0 0.3em; font-size: 0.85em; font-weight: 700; color: var(--ink); }
.matrix th.col { height: 7.5em; vertical-align: bottom; white-space: nowrap; }
.matrix th.col span { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); }
.matrix th.row { padding-right: 0.5em; text-align: right; white-space: nowrap; }
.matrix th.hl { color: var(--err-text); background: var(--warn-bg); border-radius: 8px; }
button.mx { width: 48px; height: 48px; font: inherit; font-weight: 800; color: var(--err-text); background: var(--surface); border: 2px solid var(--line-strong); border-radius: 10px; cursor: pointer; }
button.mx.on { background: var(--err-bg); border-color: var(--err-solid); }
button.mx:disabled { cursor: not-allowed; opacity: 0.75; }
.chips.pick { gap: 0.4em; }
.chipbtn { max-width: 100%; min-height: 48px; padding: 0.3em 0.9em; overflow: hidden; font: inherit; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; background: var(--surface); border: 2px solid var(--line-strong); border-radius: 99px; cursor: pointer; }
.chipbtn[aria-pressed="true"] { background: var(--pine); border-color: var(--pine); color: var(--on-pine); }
.mx-q { margin-top: 0.8em; }
.mx-q .nm { color: var(--accent); }
.prows { display: grid; }
.prow { display: flex; align-items: center; justify-content: space-between; gap: 1em; min-height: 64px; padding: 0.3em 0.2em; border-bottom: 1px solid var(--line); }
.prow .nm { flex: 1; min-width: 0; }
.mx-sum { padding-top: 0.8em; border-top: 2px solid var(--line); }
.pairlist { display: grid; gap: 0.5em; margin: 0.6em 0 0; padding: 0; list-style: none; }
.pairlist li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5em; padding: 0.4em 0.8em; background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px; }
button.mx.self { background: var(--surface-2); border-style: dashed; color: var(--muted); cursor: not-allowed; opacity: 0.8; }
.mx-add { display: grid; gap: 0.8em; padding: 1em 1.1em; background: var(--surface); border: 2px solid var(--line); border-radius: 16px; }
.mx-add h2 { margin: 0; }
.mx-add-fields { display: grid; gap: 0.8em; }
.chk { display: flex; align-items: flex-start; gap: 0.7em; min-height: 48px; padding: 0.4em 0; cursor: pointer; font-weight: 700; }
.chk input { flex: none; width: 28px; height: 28px; margin: 0.1em 0 0; accent-color: var(--pine); cursor: pointer; }
.chk input:disabled { cursor: not-allowed; }
.chk .sub { display: block; font-weight: 400; color: var(--muted); font-size: 0.92em; }
.mx-example { margin: 0; padding: 0.6em 0.8em; background: var(--info-bg); border-left: 4px solid var(--info-solid); border-radius: 8px; overflow-wrap: anywhere; }
.mx-read { margin: 0; min-height: 2.8em; padding: 0.5em 0.8em; background: var(--surface-2); border-radius: 10px; overflow-wrap: anywhere; }
.prow { flex-wrap: wrap; }
.prow .chk { flex-basis: 100%; min-height: 48px; padding: 0.2em 0 0.4em 0.4em; font-weight: 600; font-size: 0.95em; }
.prow .pr-backrow { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4em 0.8em; }
.prow .pr-main { display: grid; gap: 0.15em; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.prow .pr-sentence { font-size: 0.92em; color: var(--muted); }
.prow .pr-back { font-size: 0.85em; color: var(--warn-text); }
.pairlist .pl-main { display: grid; gap: 0.1em; flex: 1; min-width: 12em; overflow-wrap: anywhere; }
.pairlist .pl-sub { font-size: 0.9em; color: var(--muted); }
.pairlist .pl-arrow { color: var(--accent); font-weight: 800; padding: 0 0.2em; }
.pairlist .pl-acts { display: flex; flex-wrap: wrap; gap: 0.4em; }
.pairlist .pl-choice { flex-basis: 100%; display: grid; gap: 0.4em; padding: 0.6em 0.8em; background: var(--surface-2); border-radius: 10px; }
.wide-only { display: none; }
.screen[data-mx="person"] .mx-matrix { display: none; }
.screen[data-mx="person"] .mx-person { display: block; }

.linkbox { display: grid; gap: 0.3em; padding: 0.9em; background: var(--surface); border: 2px dashed var(--line-strong); border-radius: 14px; }
.linkcode { display: block; font-size: 0.95em; overflow-wrap: anywhere; word-break: break-all; }
.waitlist { display: grid; gap: 0.2em; margin: 0; padding: 0; list-style: none; }
.waitlist li { display: grid; gap: 0.5em; padding: 0.8em 0; border-bottom: 1px solid var(--line); }
.waitlist .who { display: grid; max-width: none; }

.check { margin: 0; padding: 0; list-style: none; }
.check li { display: flex; align-items: flex-start; gap: 0.8em; padding: 0.8em 0; border-bottom: 1px solid var(--line); }
.check li > div { display: grid; justify-items: start; gap: 0.3em; min-width: 0; }
.mark { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; color: #fff; }
.mark.ok { background: var(--ok-solid); } .mark.bad { background: var(--err-solid); } .mark.todo { background: var(--muted-solid); } .mark.info { background: var(--info-solid); }
.rounds { margin: 0; padding: 0; list-style: none; }
.rounds li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5em; padding: 0.5em 0; }
.statuslist, .pairs { display: grid; gap: 0.5em; margin: 0; padding: 0; list-style: none; }
.statuslist li, .pairs li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4em 0.8em; padding: 0.6em 0.9em; background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px; }
.statuslist .nm { flex: 1; min-width: 10em; font-weight: 600; }
.pairs li { display: grid; grid-template-columns: 1fr auto 1fr; }
.pairs .arrow { color: var(--accent); }
.defs { display: grid; gap: 0.8em; margin: 0; }
.defs dt { font-size: 0.85em; font-weight: 700; color: var(--muted); }
.defs dd { margin: 0; }
.plain { width: 100%; border-collapse: collapse; }
.plain th, .plain td { padding: 0.5em 0.6em; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }

/* ============ 8. breedtes: gsm (standaard), tablet en laptop (media queries; grens 720 px) ============ */
@media (min-width: 720px) {
  .screen-body { padding: 1.4em 2em; }
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .wishes { grid-template-columns: 1fr 1fr; align-items: start; }
  .pin-layout:not(.single) { grid-template-columns: 1fr 1fr; align-items: center; max-width: none; gap: 2em; }
  .pin-layout:not(.single) .pin-intro { align-content: center; }
  .cards { grid-template-columns: 1fr 1fr; align-items: start; }
  .gift-stage { max-width: 640px; }
}
@media (min-width: 720px) {
  .adm-side { display: flex; }
  .adm-menu { display: none; }
  .cols { grid-template-columns: 1fr 1fr; align-items: start; }
  .mx-matrix { display: block; }
  .mx-person { display: none; }
  .wide-only { display: inline-flex; }
  .statuslist { grid-template-columns: 1fr 1fr; }
  .waitlist li { grid-template-columns: 1fr auto; align-items: center; }
  .btn-row.stack-wide { flex-direction: row; }
}
@media (max-width: 480px) {
  /* Smalle kop op een gsm: alleen de ster als merk, zodat naam en Uitloggen altijd passen. */
  .screen[data-app="user"] .app-head .brand > span,
  .screen[data-app="admin"] .app-head .brand > span { display: none; }
  .screen[data-app="admin"] .app-head .logout span { display: none; }
  .screen[data-app="admin"] .app-head .logout { min-width: 48px; padding-inline: 0.6em; }
  .who { max-width: none; flex: 1; }
}
/* The tables of the administrator (people, users) are cards up to 1179 px: from 720 px the menu sits left of the
   page and takes 252 px, and a table with its buttons does not fit in what is left (it scrolled the page sideways at 960 px). */
@media (min-width: 1180px) {
  .act-wide { display: flex; flex-wrap: wrap; gap: 0.4em; }
  .act-narrow { display: none; }
}
@media (max-width: 1179px) {
  .rtable, .rtable tbody, .rtable tr, .rtable td { display: block; }
  .rtable thead { display: none; }
  .rtable tr { margin-bottom: 0.8em; padding: 0.8em 1em; background: var(--surface); border: 1.5px solid var(--line); border-radius: 16px; }
  .rtable td { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em; padding: 0.25em 0; border: 0; }
  .rtable td[data-label]::before { content: attr(data-label); min-width: 6em; font-size: 0.85em; color: var(--muted); }
  .rtable td.name { padding-bottom: 0.4em; font-size: 1.1em; }
  .rtable td.acts { padding-top: 0.5em; }
  .rtable td.acts .act-narrow { width: 100%; }
}

/* The login screens (ticket 009b) */
.alert h1 { font-size: 1.1em; line-height: 1.3; }
.screen h2.h3 { font-size: 1.15em; line-height: 1.25; }
.alert .btn { justify-self: start; }
.pin-messages { display: grid; justify-items: center; gap: 0.6em; width: 100%; }
.pin-messages:empty { display: none; }
.pin-messages .alert { width: min(100%, 360px); }
.pin-intro .alert { text-align: left; }
.pin-intro .linkbtn { justify-self: center; }

/* The administrator screens, part 1 (ticket 009d1) */
.adm-side-inner { display: grid; align-content: start; gap: 0.3em; width: 100%; }
.adm-group { display: grid; gap: 0.2em; padding: 0.3em 0.9em 0.8em; margin-bottom: 0.4em; border-bottom: 1.5px solid var(--line); }
.adm-group-title { font-weight: 800; }
.adm-group .backlink { font-size: 0.92em; }
.adm-off { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2em 0.7em; min-height: 52px; padding: 0.4em 0.9em; border-radius: 12px; font-weight: 600; color: var(--muted); cursor: not-allowed; }
.adm-hint { flex-basis: 100%; padding-left: 2em; font-weight: 400; font-size: 0.82em; }
.adm-menu-btn { gap: 0.4em; }
.adm-menu-panel .adm-group { color: var(--on-pine); border-bottom-color: rgba(255, 255, 255, 0.25); }
.adm-menu-panel .adm-group .eyebrow { color: var(--gold); }
.adm-menu-panel .adm-group .muted { color: var(--on-pine); }
.adm-menu-panel .backlink { color: var(--on-pine); }
.adm-menu-panel .adm-off { color: var(--on-pine); font-weight: 400; }
.adm-menu-panel .adm-as { display: flex; align-items: center; gap: 0.5em; margin: 0; padding: 0.6em 0.9em; color: var(--on-pine); font-size: 0.9em; }
.adm-menu-panel a:focus-visible, .adm-menu-panel .adm-off:focus-visible, .adm-menu-panel .backlink:focus-visible { outline-color: var(--on-pine); }

.seg { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; }
.seg button { font: inherit; font-size: 0.95rem; min-height: 48px; padding: 0.35rem 0.9rem; border-radius: 12px; border: 2px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--pine); border-color: var(--pine); color: var(--on-pine); }

.more-toggle { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; width: 100%; min-height: 48px; padding: 0; font: inherit; font-weight: 700; color: var(--accent); text-align: left; background: none; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: pointer; }
.more-toggle .ic { transition: transform 0.2s; }
.more-toggle[aria-expanded="true"] .ic { transform: rotate(90deg); }
.more-box { padding-top: 0.2em; }
.form-top { display: grid; gap: 0.6em; }
.form-top:empty { display: none; }
p.err:not(.alert) { display: flex; align-items: flex-start; gap: 0.4em; color: var(--err-text); font-weight: 600; }
.field p.err { margin-top: 0.2em; }
.radiocards .rcard strong { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em; }
.rcard[disabled] { cursor: not-allowed; }
.input.select { appearance: auto; }
textarea.linkcode { min-height: 5.5em; resize: none; font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; line-height: 1.4; }
.dlg-messages { display: grid; gap: 0.6em; text-align: left; }
.dlg-messages:empty { display: none; }
.dlg-pad { display: grid; justify-items: center; }
.dlg-body .alert { text-align: left; }
.card.group h2 { overflow-wrap: anywhere; }
.rtable .chip { max-width: 100%; }
.waitlist .alert { margin: 0; }
@media (min-width: 1180px) {
  .rtable td.acts { min-width: 14em; }
  .rtable .act-wide .btn { white-space: nowrap; }
  .rtable td .chip { white-space: nowrap; }
  .rtable td.name { min-width: 8em; }
}
.waitlist .who .nm { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.waitlist .who strong.nm { font-weight: 700; }
.wait-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; }

/* Names, addresses and titles of people may mix writing directions: each one is its own island (ticket 009d1) */
.nm, .mail, .rtable td.name, .tile .name, .card h2, .card h3, .quote, .who strong { unicode-bidi: isolate; }

/* Exclusions, the draw, progress and the backup status (ticket 009d2) */
.mx-addwrap { display: none; }
.mxroot[data-mx="person"] .mx-matrix { display: none; }
.mxroot[data-mx="person"] .mx-person { display: block; }
@media (min-width: 720px) {
  .mx-addwrap { display: block; }
}
/* A wide matrix scrolls inside its own region; without min-width 0 the grid would widen the whole page (30 members: 1700 px). */
.mxroot, .mxroot > *, .mx-matrix, .mx-person { min-width: 0; }
.mx-scroll { min-width: 0; max-width: 100%; }
.mx-scroll:focus-visible { outline-offset: -3px; }
button.mx[aria-disabled="true"], .sw[aria-disabled="true"], .prow .chk input[aria-disabled="true"] { opacity: 0.6; cursor: progress; }
.matrix th.col span { max-height: 7em; overflow: hidden; text-overflow: ellipsis; }
.matrix th.row { max-width: 10em; overflow: hidden; text-overflow: ellipsis; }
/* The name of the row stays in view while a wide matrix scrolls sideways. */
.matrix th.row { position: sticky; left: 0; z-index: 1; background: var(--bg); }
.matrix th.row.hl { background: var(--warn-bg); }
.chk input { width: 48px; height: 48px; }
@media (min-width: 720px) {
  .mx-add-fields { grid-template-columns: 1fr 1fr; align-items: start; }
  .mx-add > .btn { justify-self: start; min-width: 14em; }
}
.matrix th .ic { width: 1em; height: 1em; vertical-align: -0.15em; }
.chipbtn small { font-size: 0.8em; font-weight: 700; color: var(--warn-text); }
.chipbtn[aria-pressed="true"] small { color: var(--on-pine); }
.pairlist .pl-main .nm { overflow-wrap: anywhere; }
.pairs .nm { overflow-wrap: anywhere; min-width: 0; }
.pairs .ic { justify-self: center; }
.check li .btn { justify-self: start; }
.check .nm { overflow-wrap: anywhere; }
.rounds .chip { flex: none; }
.empty > .alert { text-align: left; }
.empty .alert.ok p { margin: 0; }
.defs dd { overflow-wrap: anywhere; }

/* Afwerking (ticket 009e AC15): op 320 px en met de tekstgrootte van de browser op 200 % past alles zonder zijwaarts
   scrollen. Rasterkinderen en flex-kinderen mogen smaller worden dan hun inhoud, lange woorden (namen, adressen) breken,
   en minimumbreedtes in em worden begrensd door de breedte die er is. */
.stack > *, .cards > *, .card, .cols > *, .screen-body > *, .adm-wrap > * { min-width: 0; }
/* Text of people and long addresses break anywhere, and so does the text in cards, buttons and messages when a word does not fit;
   a heading breaks a word only when the word does not fit on the screen at all (320 px with the text size at 200 %). Found in the
   browser pass of ticket 009e. `anywhere` changes the minimum width only, so a heading next to a button still wraps the row first. */
.nm, .mail, .name, .desc, .note, .quote, .reqid, .ext, .who strong, .card h2, .card h3, .tile .sub, .statuslist li, .pairs li, .pairlist li, .facts li, .defs dd, .wish .meta, .alert p, .chip, .rtable td, .step .tx > *, .stack > p,
.btn, .row-between > *, .card p, .card li, .alert, .alert strong, .empty p, h2.h3, .stack > h2, .stack > div > p, .stack strong, .tx strong, .tx span, .facts, .mx-example, .mx-read { overflow-wrap: anywhere; }
.screen-body h1 { overflow-wrap: anywhere; }
.chip { white-space: normal; max-width: 100%; }
.pairlist .pl-main { min-width: min(12em, 100%); }
.statuslist .nm { min-width: min(10em, 100%); }
@media (max-width: 1179px) {
  .rtable td.mail { min-width: 0; }
}
.app-head .logout { max-width: 100%; padding-inline: 0.7em; }
.head-end, .head-extra { max-width: 100%; min-width: 0; }

/* ============ 10. uitleg voor deelnemers (ticket 010, ontwerp 010-uitleg) ============
   De pagina /uitleg: zes stappen met een afbeelding per stap, op de gsm te lezen en, afgedrukt (A4), een handleiding op
   papier. Alles staat onder .help, zodat niets van de andere schermen verandert. Groottes in rem/em/pt, nooit in pixels. */
.help { width: 100%; max-width: 46rem; margin-inline: auto; padding-bottom: 2rem; }
@media (min-width: 62rem) { .help { max-width: 64rem; } }
.help-top { margin-bottom: 0.4rem; }
.help-bottom { margin-top: 2rem; }
.screen .help h1 { margin: 1rem 0 0.6rem; font-size: clamp(1.75rem, 5vw, 2.5rem); line-height: 1.15; }
.help .lead { margin: 0 0 0.8rem; font-size: 1.2rem; max-width: 40rem; }
.help .addr { margin: 1rem 0 0; padding: 0.8rem 1rem; border: 2px dashed var(--line-strong); border-radius: 14px; background: var(--surface); }
.help .addr .hlbl { display: block; font-size: 0.95rem; font-weight: 700; color: var(--muted); }
.help .addr .url { display: block; font-size: 1.2rem; font-weight: 800; overflow-wrap: anywhere; }
.help .print-only { display: none; }
.help .hk { font-weight: 800; }

.help .toc { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.help .toc a { display: flex; align-items: center; gap: 0.7rem; min-height: 56px; padding: 0.4rem 0.9rem; background: var(--surface); border: 2px solid var(--line); border-radius: 14px; color: var(--ink); font-weight: 700; text-decoration: none; }
.help .toc a:hover { border-color: var(--accent); }
.help .toc li, .help .htodo > li, .help .fields > div { min-width: 0; }
/* Zoom to 200 % on a phone: long words break rather than push the page sideways (the same rule as the other screens). */
.help .toc a, .help .hstep h2, .help .hsub h3, .help .platform h3, .help .hstep p, .help .htodo li, .help .fields dt, .help .fields dd, .help .shot figcaption, .help .tip p, .help .lead { overflow-wrap: anywhere; }
.help .toc .hn { display: grid; place-items: center; flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--red); color: var(--on-red); }
@media (min-width: 46rem) { .help .toc { grid-template-columns: repeat(3, 1fr); } }

.help .hstep { margin-top: 1.5rem; padding: 1.1rem 1.1rem 1.4rem; background: var(--surface); border: 2px solid var(--line); border-radius: 20px; scroll-margin-top: 1rem; }
.help .hstep > h2, .help .platform > h3 { display: flex; align-items: center; gap: 0.7rem; margin: 0 0 0.7rem; font-size: 1.5rem; line-height: 1.2; }
.help .num { display: inline-grid; place-items: center; flex: none; width: 2.7rem; height: 2.7rem; border-radius: 50%; background: var(--red); color: var(--on-red); font-size: 1.3rem; font-weight: 800; }
.help .hstep p { margin: 0.5rem 0; }
.help .step-body { display: grid; gap: 1rem; }
.help .step-body > * { min-width: 0; }
.help .figs { display: grid; gap: 1.2rem; align-content: start; }
@media (min-width: 46rem) {
  .help .hstep { padding: 1.4rem 1.6rem 1.7rem; }
  .help .step-body.has-figs { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: 1.8rem; align-items: start; }
}
.help .hsub { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 2px solid var(--line); scroll-margin-top: 1rem; }
.help .hsub > h3 { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.5rem; font-size: 1.3rem; line-height: 1.25; }
.help .subnum { display: inline-grid; place-items: center; flex: none; min-width: 2.6rem; height: 2.2rem; padding: 0 0.5rem; border-radius: 99px; background: var(--pine); color: var(--on-pine); font-size: 1.05rem; font-weight: 800; }

.help .htodo { list-style: none; counter-reset: t; margin: 0.8rem 0; padding: 0; display: grid; gap: 0.8rem; }
.help .htodo > li { counter-increment: t; position: relative; min-height: 2.2rem; padding-left: 3rem; }
.help .htodo > li::before { content: counter(t); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--pine); color: var(--on-pine); font-size: 1.05rem; font-weight: 800; }
.help .fields { margin: 0.6rem 0; display: grid; gap: 0.6rem; }
.help .fields > div { padding: 0.6rem 0.9rem; background: var(--surface-2); border-radius: 12px; }
.help .fields dt { font-weight: 800; }
.help .fields dd { margin: 0; }
.help .tip { display: flex; align-items: flex-start; gap: 0.7rem; margin: 0.8rem 0; padding: 0.8rem 1rem; border: 2px solid var(--info-solid); border-radius: 14px; background: var(--info-bg); color: var(--ink); }
.help .tip .ic { margin-top: 0.2em; color: var(--info-text); }
.help .tip p { margin: 0; }

/* De afbeeldingen: echte schermopnamen (WebP) en de getekende stappen voor het startscherm (SVG). Geen tabstop, niet aantikbaar. */
.help .shot { margin: 0; max-width: 24rem; }
.help .shot figcaption { margin-top: 0.45rem; font-size: 1rem; color: var(--muted); }
.help .shot img, .help img.dr { display: block; max-width: 100%; height: auto; border: 2px solid var(--line-strong); border-radius: 1.1rem; background: var(--surface-2); pointer-events: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
/* Een afbeelding die nog laadt: een rustig lichtverloop; het stopt zodra de afbeelding geladen is (klasse loaded) en staat stil bij verminderde beweging. */
.help .shot img:not(.loaded) { background: linear-gradient(90deg, var(--surface-2), var(--line), var(--surface-2)) 0 0 / 200% 100%; animation: help-shimmer 1.4s linear infinite; }
@keyframes help-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.help img.dr { width: 100%; background: #fff; border-radius: 14px; }

.help .platforms { display: grid; gap: 1.5rem; margin-top: 1.2rem; }
@media (min-width: 62rem) { .help .platforms { grid-template-columns: 1fr 1fr; align-items: start; } }
.help .platform { padding: 1rem 1rem 1.2rem; background: var(--bg); border: 2px solid var(--line); border-radius: 16px; }
.help .platform > h3 { font-size: 1.35rem; }
.help .dsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; }
.help .dtext { display: flex; align-items: flex-start; gap: 0.7rem; margin: 0 0 0.5rem; }
.help .dn { display: grid; place-items: center; flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--pine); color: var(--on-pine); font-size: 1.05rem; font-weight: 800; }
.help .p-sheet { display: contents; }

/* Afdrukversie (A4): voorkant stap 1 tot en met 5, achterkant stap 6. Minstens 13 pt, zwart op wit, geen menu en knoppen,
   geen afgebroken stappen. Op papier staan drie hoofdafbeeldingen (1a, 3a-2 en 5b); de andere hebben de klasse extra.
   Hier staat NIET een regel voor de pincode, met opzet. De regels voor `.help` hangen niet van `:has()` af (een browser
   die dat niet kent slaat dan alleen de regels over die het nodig hebben: de kop van de app en de lettergrootte van het blad). */
@page { size: A4; margin: 12mm; }
@media print {
  /* Paper is always the light variant, whatever the device was set to, and backgrounds are not relied on (the browser
     leaves them out unless the person asks for background graphics): numbers and notes get a line instead of a fill. */
  :root { color-scheme: light; --bg: #ffffff; --surface: #ffffff; --surface-2: #ffffff; --ink: #000000; --muted: #000000; --line: #000000; --line-strong: #000000; --accent: #000000; --info-bg: #ffffff; --info-solid: #000000; --info-text: #000000; }
  html, body { background: #fff; color: #000; }
  .screen:has(.help) { background: #fff; color: #000; min-height: 0; font-size: 13pt; line-height: 1.25; }
  body:has(.help) .skip, body:has(.help) #banner, body:has(.help) #toasts, body:has(.help) #overlays { display: none; }
  .screen:has(.help) .app-head { display: none; }
  .screen:has(.help) .screen-body { padding: 0; }
  .help { max-width: none; padding: 0; font-size: 13pt; line-height: 1.25; color: #000; }
  .help .help-top, .help .help-bottom, .help .toc, .help .shot.extra, .help .dutch-only { display: none; }
  .help .print-only { display: block; }
  .help .p-sheet { display: block; break-after: page; }
  .help .p-sheet.last { break-after: auto; }
  .screen .help h1 { margin: 0 0 2mm; font-size: 20pt; }
  .help .lead { font-size: 13pt; margin: 0 0 1mm; max-width: none; }
  .help .addr { border: 1pt solid #000; background: none; margin: 1.5mm 0; padding: 1.5mm 3mm; }
  .help .addr .hlbl { font-size: 13pt; color: #000; }
  .help .addr .url { font-size: 14pt; color: #000; }
  .help .hfill { margin: 2mm 0 0; font-weight: 700; }
  .help .hfill .line { display: inline-block; min-width: 100mm; border-bottom: 1.5pt solid #000; }
  .help .hstep { margin: 0 0 3mm; padding: 0; border: 0; border-radius: 0; background: none; }
  .help .hstep:not(#stap-3) { break-inside: avoid; }
  .help h2, .help h3 { break-after: avoid; }
  .help .hstep > h2, .help .platform > h3 { margin: 0 0 1.5mm; font-size: 16pt; }
  .help .num { width: 9mm; height: 9mm; font-size: 13pt; }
  .help .num, .help .subnum, .help .htodo > li::before, .help .dn { background: none; color: #000; border: 1.5pt solid #000; }
  .help .hsub { margin-top: 2mm; padding-top: 1.5mm; break-inside: avoid; }
  .help .hsub > h3 { margin: 0 0 1mm; font-size: 14pt; }
  .help .subnum { height: 7mm; font-size: 13pt; }
  .help .hstep p { margin: 1mm 0; }
  .help .htodo { gap: 1mm; margin: 1mm 0; }
  .help .htodo > li { min-height: 0; padding-left: 9mm; }
  .help .htodo > li::before { width: 6.5mm; height: 6.5mm; font-size: 13pt; }
  .help .step-body { display: block; }
  .help .step-body.has-paper { display: grid; grid-template-columns: minmax(0, 1fr) 40mm; gap: 5mm; }
  .help .shot { max-width: 40mm; break-inside: avoid; }
  .help .shot img { width: auto; max-width: 100%; max-height: 66mm; border-width: 1pt; }
  .help .shot figcaption { font-size: 13pt; margin-top: 1mm; color: #000; }
  .help .figs { gap: 3mm; }
  .help .tip { margin: 1mm 0; padding: 1mm 2.5mm; border-width: 1pt; border-color: #000; background: none; break-inside: avoid; }
  .help .fields { gap: 1mm; margin: 1mm 0; }
  .help .fields > div { padding: 1mm 2.5mm; }
  .help .platforms { grid-template-columns: 1fr 1fr; gap: 5mm; margin-top: 2mm; }
  .help .platform { padding: 0; border: 0; background: none; }
  .help .dsteps { gap: 2mm; }
  .help .dtext { margin-bottom: 1mm; }
  .help .dn { width: 8mm; height: 8mm; font-size: 13pt; }
  .help .dstep { break-inside: avoid; }
  .help img.dr { width: 62%; }
  .help a { color: #000; text-decoration: none; }
}