/* ==========================================================================
   Lootje & Lijstje – design system
   Mobiel eerst. Kleuren als tokens; elk thema (gelegenheid) wisselt alleen
   de accentkleuren. Dark mode via prefers-color-scheme.
   ========================================================================== */

:root {
  --bg: #faf6f0;
  --bg-2: #f3ebe0;
  --surface: #ffffff;
  --ink: #2a211c;
  --ink-2: #4a3f38;
  --muted: #74665c;
  --line: #e9dfd2;
  --focus: #1d5fd1;

  --accent: #c2462f;          /* hoofdkleur (feest / standaard) */
  --accent-ink: #ffffff;
  --accent-soft: #fbe6df;
  --accent-2: #e2a73b;         /* tweede accent: goud */

  --ok: #1f7a4d;   --ok-soft: #e1f3e8;
  --bad: #b3261e;  --bad-soft: #fde4e1;
  --info-soft: #e8eefb;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(42,33,28,.06), 0 8px 24px -12px rgba(42,33,28,.18);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --wrap: 1080px;
}

/* Thema's per gelegenheid */
[data-theme-occasion="sint"]     { --accent: #b3261e; --accent-soft: #fbe3e0; --accent-2: #d6a032; }
[data-theme-occasion="kerst"]    { --accent: #1e6b47; --accent-soft: #e0f0e7; --accent-2: #c2462f; }
[data-theme-occasion="bruiloft"] { --accent: #6d7a52; --accent-soft: #eef0e6; --accent-2: #b8954a; }
[data-theme-occasion="geboorte"] { --accent: #2f7f86; --accent-soft: #dff1f2; --accent-2: #e59aa4; }
[data-theme-occasion="feest"]    { --accent: #c2462f; --accent-soft: #fbe6df; --accent-2: #e2a73b; }

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171310; --bg-2: #1f1a16; --surface: #241e1a; --ink: #f4ede5; --ink-2: #ddd2c7;
    --muted: #b0a297; --line: #3a312a; --focus: #8fb3ff;
    --accent: #ec7458; --accent-ink: #1a0f0b; --accent-soft: #3a221b;
    --ok: #6fd39c; --ok-soft: #173325; --bad: #ff8a80; --bad-soft: #3d1d1a; --info-soft: #1d2638;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  }
  [data-theme-occasion="sint"]     { --accent: #f07a6e; --accent-soft: #3d1f1c; }
  [data-theme-occasion="kerst"]    { --accent: #5cc58f; --accent-soft: #15301f; }
  [data-theme-occasion="bruiloft"] { --accent: #b9c78f; --accent-soft: #2a2e1e; }
  [data-theme-occasion="geboorte"] { --accent: #6cc5cc; --accent-soft: #15292b; }
  [data-theme-occasion="feest"]    { --accent: #ec7458; --accent-soft: #3a221b; }
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.55 var(--font); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  -webkit-tap-highlight-color: transparent;
}
main { flex: 1; width: 100%; }
img { max-width: 100%; display: block; }
a { color: var(--accent); text-underline-offset: 2px; }
h1, h2, h3 { line-height: 1.2; margin: 0; color: var(--ink); }
h1 { font-family: var(--font-display); font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 600; letter-spacing: -.01em; }
h1 em { font-style: italic; color: var(--accent); }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p { margin: 0; }
ul, ol { margin: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.25rem 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.hidden, [hidden] { display: none !important; }

.wrap {
  max-width: var(--wrap); margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.narrow { max-width: 620px; margin-left: auto; margin-right: auto; }
.center { text-align: center; }
.left { text-align: left; }
.page-pad { padding: 28px 0 56px; }
.stack > * + * { margin-top: .75rem; }
.stack-sm > * + * { margin-top: .5rem; }
.stack-lg > * + * { margin-top: 1.5rem; }
.narrow + form.narrow { margin-top: 1.5rem; }
.row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.row-between { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.inline { display: inline; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.lead { font-size: 1.1rem; color: var(--ink-2); }
.eyebrow { font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.big-emoji { font-size: 3rem; line-height: 1; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }

/* ---------- Header / footer ---------- */
.site-header { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); text-decoration: none; font-size: 1.05rem; white-space: nowrap; }
.brand-mark { display: block; width: 40px; height: 40px; flex: none; }
.wordmark { font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; color: #14254B; }
.wordmark-text span { color: #C8314A; }
.wordmark { display: inline-flex; } .wordmark-img { display: block; height: 28px; width: auto; }
.wordmark-text { display: none; }
/* Ondertitel onder het woordmerk: het merk is Trekjelot, de ondertitel zegt wat je er doet. */
.brand-text { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; line-height: 1; }
.brand-tagline { font-size: .72rem; font-weight: 600; letter-spacing: .04em; color: var(--muted); padding-left: 2px; }
/* Donker: het woordmerk-plaatje is donkerblauw, dan de tekstversie in lichte kleuren. */
@media (prefers-color-scheme: dark) { .wordmark-img { display: none; } .wordmark-text { display: inline; color: #f4ede5; } .wordmark-text span { color: #f07a8a; } }
.nav { display: flex; align-items: center; gap: 2px; font-size: .95rem; }
.nav a, .nav .linklike { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); text-decoration: none; padding: 0 12px; border-radius: 999px; }
.nav-account { padding: 0 4px !important; }
/* Uitklapmenu */
.nav-group { position: relative; }
.nav-trigger { list-style: none; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px; border-radius: 999px; color: var(--ink-2); cursor: pointer; user-select: none; }
.nav-trigger::-webkit-details-marker { display: none; }
.nav-trigger:hover, .nav-group[open] > .nav-trigger { background: var(--bg-2); }
.nav-trigger.active { color: var(--accent); font-weight: 600; }
.nav-chevron { transition: transform .15s ease; opacity: .7; }
.nav-group[open] .nav-chevron { transform: rotate(180deg); }
.nav-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: 320px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow), 0 20px 40px -20px rgba(0,0,0,.25);
  padding: 8px; display: flex; flex-direction: column; gap: 2px;
}
.nav-panel-title { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 8px 12px 4px; }
.nav-email { text-transform: none; letter-spacing: 0; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav .nav-item { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px; border-radius: 12px; color: var(--ink); text-decoration: none; text-align: left; }
.nav .nav-item:hover { background: var(--bg-2); }
.nav-item > span:last-child { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.nav-item strong { font-weight: 600; }
.nav-item small { color: var(--muted); font-size: .82rem; }
.nav-item-icon { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--accent-soft); font-size: 1.05rem; }
.nav-item-button { width: 100%; border: 0; background: none; font: inherit; cursor: pointer; }
.nav-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 8px 8px; }
.nav .nav-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 12px; border-radius: 999px; background: var(--bg-2); color: var(--ink); text-decoration: none; font-size: .88rem; }
.nav .nav-chip:hover { background: var(--accent-soft); }
@media (max-width: 640px) {
  /* Paneel hangt onder de hele menubalk, over de volle breedte */
  .nav-group { position: static; }
  .nav-panel { position: absolute; left: max(8px, env(safe-area-inset-left, 0px)); right: max(8px, env(safe-area-inset-right, 0px)); top: calc(100% + 6px); width: auto; max-height: calc(100dvh - 90px); overflow-y: auto; }
}
.nav-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.nav-account.active .nav-avatar, .nav-account:hover .nav-avatar { box-shadow: 0 0 0 3px var(--accent-soft); }
@media (max-width: 380px) { .nav-login, .nav-trigger { padding: 0 8px !important; } .nav { font-size: .92rem; } }
.nav a:hover, .nav .linklike:hover { background: var(--bg-2); }
.nav a.active { color: var(--accent); font-weight: 600; }
.nav .nav-login { border: 1px solid var(--line); }
@media (max-width: 480px) { .brand > span:last-child { display: none; } }

.site-footer { border-top: 1px solid var(--line); background: var(--bg-2); margin-top: 24px; }
.footer-inner { padding-block: 24px max(24px, env(safe-area-inset-bottom, 0px)); color: var(--muted); font-size: .9rem; }
.footer-inner > * + * { margin-top: .4rem; }
.footer-inner a { color: inherit; }

/* ---------- Knoppen ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; line-height: 1.2;
  transition: transform .06s ease, background-color .15s ease, border-color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.06); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--muted); }
.btn-danger { background: var(--bad); color: #fff; }
.btn-danger-ghost { background: transparent; color: var(--bad); border-color: transparent; padding-left: 8px; padding-right: 8px; }
.btn-danger-ghost:hover { background: var(--bad-soft); }
.btn-whatsapp { background: #1fa855; color: #fff; }
.btn-large { min-height: 52px; padding: 14px 26px; font-size: 1.05rem; }
.btn-small { min-height: 36px; padding: 6px 12px; font-size: .875rem; }
.btn-block { width: 100%; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.icon-btn {
  display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; font: inherit;
}
.icon-btn:hover:not(:disabled) { color: var(--ink); border-color: var(--muted); }
.icon-btn:disabled { opacity: .35; cursor: default; }

/* ---------- Formulieren ---------- */
fieldset { border: 0; margin: 0; min-width: 0; }
legend { padding: 0; }
/* Kaart-fieldset: de legend als titel binnen de kaart i.p.v. op de rand. */
fieldset.card > legend { float: left; width: 100%; margin: 0 0 .75rem; }
fieldset.card > legend + * { clear: both; margin-top: 0; }
.label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: -.35rem; }
.input {
  width: 100%; min-height: 46px; padding: 10px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit;
}
.input::placeholder { color: var(--muted); opacity: .8; }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea.input { min-height: 0; resize: vertical; }
select.input { appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
input.input[type="date"], input.input[type="time"] { height: 46px; line-height: normal; } /* Safari/Chrome: datumveld even hoog als de keuzelijst */
.input-small { min-height: 40px; padding: 6px 10px; font-size: 1rem; width: auto; flex: 1; min-width: 0; }
.input-prefix { position: relative; }
.input-prefix > span { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.input-prefix > .input { padding-left: 28px; }
.check { display: flex; gap: .6rem; align-items: center; min-height: 44px; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 0; accent-color: var(--accent); flex: none; }
.grid-2, .grid-3 { display: grid; gap: .75rem; }
.grid-2 > div > .label, .grid-3 > div > .label { margin-bottom: .4rem; }
@media (min-width: 560px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: 1.2fr .8fr 1.2fr; } }

/* ---------- Kaarten & meldingen ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.card-title { font-size: 1.1rem; font-weight: 700; }
details.card > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin: -6px 0; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::after { content: '＋'; color: var(--muted); }
details.card[open] > summary { margin-bottom: .75rem; }
details.card[open] > summary::after { content: '－'; }
.alert { border-radius: var(--radius-sm); padding: 12px 16px; }
.alert ul { padding-left: 1.2rem; margin-top: .3rem; }
.alert-error { background: var(--bad-soft); color: var(--ink); border-left: 4px solid var(--bad); }
.alert-info { background: var(--info-soft); }
.toast {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 20;
  width: min(92vw, 480px); background: var(--ink); color: var(--bg); padding: 12px 18px;
  border-radius: 14px; box-shadow: var(--shadow); animation: toast-in .25s ease-out; font-weight: 500;
  margin-bottom: env(safe-area-inset-bottom, 0px);
}
.toast.is-hiding { opacity: 0; transition: opacity .4s; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } }
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--bg-2); color: var(--ink-2); white-space: nowrap; }
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-bad { background: var(--bad-soft); color: var(--bad); }
.badge-hot { background: var(--accent-soft); color: var(--accent); }
.badge-new { background: var(--info-soft); color: var(--ink); }
.badge-gift { background: var(--accent-soft); color: var(--ink); }
.badge-soft { background: var(--accent-soft); color: var(--ink-2); }
.empty { text-align: center; padding: 28px 16px; border: 2px dashed var(--line); border-radius: var(--radius); color: var(--ink-2); }
.empty > * + * { margin-top: .4rem; }
.note { margin-left: 0; margin-right: 0; margin-bottom: 0; padding: 14px 18px; background: var(--accent-soft); border-radius: var(--radius-sm); font-style: italic; }
.hint { color: var(--ink-2); font-size: .95rem; }

/* ---------- Home: zie het blok "Homepage" onderaan ---------- */
.section-title { font-family: var(--font-display); font-size: clamp(1.4rem, 4vw, 1.8rem); text-align: center; font-weight: 600; }
.section-title.left { text-align: left; }

/* ---------- Groep aanmaken / beheren ---------- */
.participant-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding-bottom: 12px; border-bottom: 1px dashed var(--line); }
.participant-row + .participant-row { margin-top: 12px; }
.participant-row input[name=pname] { grid-column: 1; }
.participant-row input[name=pemail] { grid-column: 1; }
.participant-row .icon-btn { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
@media (min-width: 560px) {
  .participant-row { grid-template-columns: 1fr 1.4fr auto; border-bottom: 0; padding-bottom: 0; }
  .participant-row + .participant-row { margin-top: 8px; }
  .participant-row input[name=pemail] { grid-column: 2; grid-row: 1; }
  .participant-row .icon-btn { grid-column: 3; grid-row: 1; }
}
.page-head > * + * { margin-top: .4rem; }
.status-card.status-draft { border: 2px solid var(--accent); }
.status-card.status-drawn { background: var(--ok-soft); border-color: transparent; }
.progress { width: 100%; height: 12px; border-radius: 999px; overflow: hidden; appearance: none; border: 0; background: var(--surface); }
.progress::-webkit-progress-bar { background: var(--surface); border-radius: 999px; }
.progress::-webkit-progress-value { background: var(--ok); border-radius: 999px; }
.progress::-moz-progress-bar { background: var(--ok); border-radius: 999px; }
.danger-zone summary { cursor: pointer; color: var(--muted); font-size: .9rem; min-height: 44px; display: flex; align-items: center; }
.danger-zone[open] > * + * { margin-top: .6rem; }
.people { list-style: none; padding: 0; }
.person { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.person:last-child { border-bottom: 0; }
.person-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.person-main > div { min-width: 0; }
.person-main .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-status { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.person-more { grid-column: 1 / -1; }
.person-more > summary { list-style: none; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; color: var(--muted); font-size: .85rem; text-decoration: none; min-height: 44px; padding-right: 12px; }
.person-more > summary::-webkit-details-marker { display: none; }
.person-more > summary::after { content: '▾'; font-size: .75rem; }
.person-more[open] > summary::after { content: '▴'; }
.person-more > summary:hover { color: var(--ink); }
.person { grid-template-columns: 1fr auto; }
.person-more[open] > div { margin-top: .6rem; padding: 12px; background: var(--bg); border-radius: var(--radius-sm); }
.avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; flex: none; }
.add-person { display: grid; gap: 8px; padding-top: 4px; }
@media (min-width: 560px) { .add-person { grid-template-columns: 1fr 1.4fr auto; } }
.exclusions { list-style: none; padding: 0; }
.exclusions li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg); border-radius: var(--radius-sm); }
.exclusions li + li { margin-top: 6px; }
.exclusion-form { display: grid; gap: 8px; align-items: center; }
@media (min-width: 720px) { .exclusion-form { grid-template-columns: 1fr auto 1fr auto auto; } }

/* ---------- Lootje onthullen ---------- */
.reveal-card {
  position: relative; max-width: 420px; margin: 0 auto; padding: 36px 24px; text-align: center;
  border-radius: 22px; background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow); overflow: hidden;
}
.reveal-card::before, .reveal-card::after { content: ''; position: absolute; top: 50%; width: 28px; height: 28px; border-radius: 50%; background: var(--bg); transform: translateY(-50%); }
.reveal-card::before { left: -14px; } .reveal-card::after { right: -14px; }
.reveal-label { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 700; opacity: .85; }
.reveal-name { font-family: var(--font-display); font-size: clamp(2.2rem, 10vw, 3.2rem); font-weight: 600; margin: .3rem 0; transition: filter .5s ease; overflow-wrap: anywhere; }
.reveal > summary { list-style: none; cursor: pointer; border-radius: 22px; }
.reveal > summary::-webkit-details-marker { display: none; }
.reveal > summary > * + * { margin-top: .6rem; }
.reveal-btn { background: var(--accent-ink); color: var(--accent); margin-top: 1rem; pointer-events: none; }
.reveal > summary:hover .reveal-btn { filter: brightness(.96); }
.reveal[open] > summary { display: none; }
.reveal[open] .reveal-name { animation: pop .5s ease-out; }
@keyframes pop { 0% { transform: scale(.85); opacity: 0; } 60% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .reveal[open] .reveal-name { animation: none; } }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.fact { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; display: flex; flex-direction: column; }
.fact-k { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.fact-v { font-weight: 600; }
.cta-card { background: var(--accent-soft); border-color: transparent; }

/* ---------- Verlanglijstjes ---------- */
.two-col { display: grid; gap: 24px; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 340px; align-items: start; } .two-col > aside { position: sticky; top: 80px; } .two-col.even { grid-template-columns: 1fr 1fr; } }
.items { display: grid; gap: 12px; }
.item { display: grid; grid-template-columns: 84px 1fr; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
@media (min-width: 560px) { .item { grid-template-columns: 112px 1fr; } }
.item-media { aspect-ratio: 1; border-radius: var(--radius-sm); background: #fff; overflow: hidden; display: grid; place-items: center; border: 1px solid var(--line); }
.item-media img { width: 100%; height: 100%; object-fit: contain; }
.item-placeholder { font-size: 2rem; }
.item-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.item-title { font-size: 1.02rem; overflow-wrap: anywhere; }
.item-meta { display: flex; gap: 6px 10px; flex-wrap: wrap; align-items: center; font-size: .9rem; }
.price { font-weight: 700; }
.item-note { font-size: .92rem; color: var(--ink-2); }
/* Groepscadeau (#15): voortgang op het lijstje en de inleggers op /r/… */
.gift-status { display: grid; gap: 4px; margin-top: 6px; color: var(--ink-2); }
.gift-status .progress, .gift-card .progress { background: var(--bg-2); }
.gift-status .progress::-webkit-progress-bar, .gift-card .progress::-webkit-progress-bar { background: var(--bg-2); }
.gift-givers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gift-givers li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.gift-giver-name { font-weight: 600; }
.gift-giver-amount { margin-left: auto; font-variant-numeric: tabular-nums; }
.gift-giver-note { flex-basis: 100%; color: var(--ink-2); }
.item-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.item-disclosure { margin-top: 2px; }
.item-done { opacity: .62; }
.item-done .item-title { text-decoration: line-through; text-decoration-color: var(--muted); }
details.reserve, details.edit-item { width: 100%; }
details.reserve > summary, details.edit-item > summary { list-style: none; display: inline-flex; }
details.reserve > summary::-webkit-details-marker, details.edit-item > summary::-webkit-details-marker { display: none; }
details.reserve[open] > summary, details.edit-item[open] > summary { display: none; }
.reserve-form, .edit-item > form { margin-top: 6px; padding: 14px; background: var(--bg); border-radius: var(--radius-sm); }
.reserve-form > * + * { margin-top: .6rem; }
.reserve-form .label { margin-bottom: -.3rem; }
@media (min-width: 560px) { details.reserve, details.edit-item { width: auto; } details.reserve[open], details.edit-item[open] { width: 100%; } }
.preview { display: flex; gap: 12px; align-items: center; padding: 10px; background: var(--bg); border-radius: var(--radius-sm); }
.preview img { width: 56px; height: 56px; object-fit: contain; background: #fff; border-radius: 8px; }
.preview img:not([src]), .preview img[src=""] { display: none; }
.search-form { display: flex; gap: 8px; }
.search-form .input { flex: 1; }
.search-form .search-store { flex: 0 0 auto; width: auto; min-width: 0; }
.search-results { display: grid; gap: 8px; max-height: min(720px, 75vh); overflow: auto; }
.search-result { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.search-result img { width: 48px; height: 48px; object-fit: contain; background: #fff; border-radius: 6px; }
.divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .85rem; }
.divider::before, .divider::after { content: ''; flex: 1; border-top: 1px solid var(--line); }
.share > * + * { margin-top: .5rem; }
.share .label { margin-bottom: 0; }
.share-row { display: flex; gap: 8px; flex-wrap: wrap; }
.share-row .input { flex: 1 1 180px; font-size: 1rem; min-width: 0; }
.share-row .btn { flex: 1 1 auto; }
.list-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.list-card { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); border-top: 5px solid var(--accent); color: var(--ink); text-decoration: none; box-shadow: var(--shadow); transition: transform .12s ease; }
.list-card:hover { transform: translateY(-2px); }
.list-card.is-archived { opacity: .6; }
.list-card-emoji { font-size: 1.6rem; }
.list-card-title { font-weight: 700; font-size: 1.05rem; }
.simple-list { list-style: none; padding: 0; }
.simple-list li { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.list-hero { text-align: center; padding: 28px 16px; border-radius: 22px; background: var(--accent-soft); }
.list-hero > * + * { margin-top: .4rem; }
.list-hero-emoji { font-size: 2.6rem; display: block; }
.list-desc { max-width: 560px; margin-left: auto; margin-right: auto; white-space: pre-line; }
[data-theme-occasion="bruiloft"] .list-hero { background: linear-gradient(180deg, var(--accent-soft), transparent); border: 1px solid var(--line); }
[data-theme-occasion="bruiloft"] .list-hero h1 { font-style: italic; }

.account-actions { margin-top: .75rem; }

/* Twee kolommen wensen vanaf tabletbreedte (gastweergave en lootjespagina) */
@media (min-width: 720px) { .items-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Zweven-effecten alleen op apparaten met een muis (anders blijven ze 'hangen' na tikken) */
@media (hover: none) {
  .list-card:hover { transform: none; }
}

/* Surface Duo / vouwtelefoons over twee schermen: kolommen op de scharnier laten breken */
@media (horizontal-viewport-segments: 2) {
  .wrap { max-width: none; }
  .two-col {
    grid-template-columns: env(viewport-segment-width 0 0, 1fr) env(viewport-segment-width 1 0, 1fr);
    column-gap: calc(env(viewport-segment-left 1 0, 0px) - env(viewport-segment-right 0 0, 0px) + 32px);
  }
  .two-col > aside { position: static; }
}

/* Telefoon liggend: minder verticale ruimte, dus hero compacter */
@media (max-height: 500px) and (orientation: landscape) {
  .site-header { position: relative; }
  .page-pad { padding-top: 16px; }
}

/* ---------- Mijn overzicht ---------- */
.section-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.section-chips a { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: .92rem; font-weight: 500; }
.section-chips a:hover { border-color: var(--accent); }
.section-chips span { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); display: inline-grid; place-items: center; font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
#binnenkort, #lootjes, #lijstjes, #gedeeld, #groepen { scroll-margin-top: 80px; }
.upcoming { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.upcoming li { min-width: 0; }
.upcoming a { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; min-height: 56px; }
.upcoming a:hover { border-color: var(--accent); }
.date-badge { width: 48px; flex: none; display: flex; flex-direction: column; align-items: center; line-height: 1.05; padding: 6px 0; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-size: .75rem; font-weight: 600; text-transform: uppercase; }
.date-badge strong { font-size: 1.25rem; }
.upcoming-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.upcoming-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upcoming-text small { color: var(--muted); }
.upcoming-arrow { font-size: 1.5rem; color: var(--muted); }
.list-card-shared { gap: 4px; }
.list-card { min-width: 0; }
.list-card .badge { white-space: normal; align-self: flex-start; }
.list-card-link { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; }
.list-card-shared form { align-self: flex-start; }
.list-card-shared .linklike { min-height: 36px; color: var(--muted); }
.nav-item-soon { opacity: .6; cursor: default; }
.nav-new > span:first-child { font-weight: 700; }

/* ---------- Beheer ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; display: flex; flex-direction: column; }
.stat-v { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-k { font-size: .82rem; color: var(--muted); }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th, .table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Dashboard: grafiekkleuren (gevalideerd op kleurenblindheid en contrast, licht én donker).
   Bewust los van het gelegenheidsthema zodat series altijd dezelfde kleur houden. */
:root { --chart-1: #c2462f; --chart-2: #2f6f9f; --chart-3: #b07d12; --chart-grid: var(--line); }
@media (prefers-color-scheme: dark) { :root { --chart-1: #e2694e; --chart-2: #4f97dc; --chart-3: #b8862a; } }
.admin-head { display: flex; gap: 1rem; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.admin-head .search-form { flex: 1 1 280px; max-width: 420px; }
.admin-head .search-form .input { min-width: 0; }
.seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; background: var(--bg-2); border-radius: 999px; max-width: 520px; }
.seg a { display: grid; place-items: center; min-height: 40px; padding: 0 6px; border-radius: 999px; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .9rem; white-space: nowrap; }
.seg a:hover { background: var(--surface); }
.seg a[aria-current="page"] { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); }
.admin .period-note { margin-top: .5rem; }
.jump { display: flex; flex-wrap: wrap; gap: 6px; }
.jump a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); text-decoration: none; font-size: .88rem; }
.jump a:hover { border-color: var(--muted); color: var(--ink); }
.dash-section { scroll-margin-top: 76px; }
.admin h3 { font-size: .95rem; }
.break { overflow-wrap: anywhere; }

.kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 14px 14px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.kpi-warn { border-color: var(--bad); background: var(--bad-soft); }
.kpi-k { font-size: .8rem; color: var(--muted); font-weight: 600; }
.kpi-v { font-size: clamp(1.45rem, 5.5vw, 1.9rem); font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kpi-sub { font-size: .8rem; display: flex; gap: 4px 6px; flex-wrap: wrap; align-items: baseline; position: relative; z-index: 1; }
.kpi .spark { display: block; width: 100%; height: 28px; margin-top: auto; padding-top: 6px; }
.delta { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .8rem; }
.delta-good { color: var(--ok); }
.delta-bad { color: var(--bad); }
.delta-neutral, .delta-none { color: var(--muted); }
.fact-v .delta { margin-left: 4px; }

.dash-grid { display: grid; gap: 20px; }
@media (min-width: 900px) { .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dash-grid > * { min-width: 0; }

/* Grafieken: plot schaalt mee, teksten staan in HTML */
.chart { margin: 0; padding-top: .6rem; }
.admin .table { font-size: .88rem; }
.admin .table th, .admin .table td { padding: 8px 4px; }
.admin .table th { font-size: .72rem; letter-spacing: .02em; white-space: nowrap; }
.admin .table td:first-child { padding-left: 0; }
.chart-plot { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; }
.chart-y { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; line-height: 1; margin: -.36em 0; min-width: 2ch; }
.chart-svg { width: 100%; height: 150px; display: block; overflow: hidden; }
@media (min-width: 900px) { .chart-svg { height: 180px; } }
.chart-x { display: flex; justify-content: space-between; padding-top: 6px; font-size: .72rem; color: var(--muted); white-space: nowrap; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; padding-top: 8px; font-size: .82rem; color: var(--ink-2); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--chart-1); }
.key.s2 { background: var(--chart-2); } .key.s3 { background: var(--chart-3); }
.chart .grid { stroke: var(--chart-grid); stroke-width: 1; }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .area { stroke: none; opacity: .12; }
.chart .line.s1, .spark.s1 .spark-line { stroke: var(--chart-1); }
.chart .line.s2, .spark.s2 .spark-line { stroke: var(--chart-2); }
.chart .area.s1, .spark.s1 .spark-area { fill: var(--chart-1); }
.chart .area.s2, .spark.s2 .spark-area { fill: var(--chart-2); }
.chart .bars.s1 { fill: var(--chart-1); } .chart .bars.s2 { fill: var(--chart-2); } .chart .bars.sbad { fill: var(--bad); }
.chart .hit { fill: transparent; }
.chart .hit:hover { fill: var(--ink); opacity: .06; }
.spark-line { fill: none; stroke-width: 1.5; }
.spark-area { opacity: .1; stroke: none; }

.barlist { list-style: none; padding: 0; display: grid; gap: 8px; }
.barlist-row { display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; }
.barlist-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barlist-value { flex: none; font-variant-numeric: tabular-nums; font-weight: 600; }
.barlist-value small { font-weight: 400; color: var(--muted); }
.barlist-bar { display: block; width: 100%; height: 6px; margin-top: 3px; border-radius: 3px; overflow: hidden; }
.barlist-bar .track { fill: var(--bg-2); }
.barlist-bar.s1 .fill { fill: var(--chart-1); } .barlist-bar.s2 .fill { fill: var(--chart-2); }
.stackfig { margin: 0; }
.stack-bar { display: block; width: 100%; height: 14px; border-radius: 4px; overflow: hidden; }
.stack-bar .s1 { fill: var(--chart-1); } .stack-bar .s2 { fill: var(--chart-2); } .stack-bar .s3 { fill: var(--chart-3); }
.toplist { padding-left: 1.4rem; display: grid; gap: 6px; font-size: .9rem; }
.toplist li { padding-left: 2px; }
.toplist li > span:first-child { overflow-wrap: anywhere; }
.toplist li .num { float: right; font-weight: 600; font-variant-numeric: tabular-nums; margin-left: 8px; }
.failed > summary { list-style: none; cursor: pointer; display: flex; align-items: center; min-height: 44px; }
.failed > summary::-webkit-details-marker { display: none; }
.failed > summary h3 { display: inline-flex; align-items: center; gap: 8px; }
.failed > summary::after { content: '＋'; color: var(--muted); margin-left: auto; }
.failed[open] > summary::after { content: '－'; }
.failed-list { list-style: none; padding: 0; }
.failed-list li { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); }
.failed-list li > div { min-width: 0; }

.instances { display: grid; gap: 12px; }
@media (min-width: 900px) { .instances { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); } }
.instance { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; background: var(--bg); min-width: 0; }
.instance.is-offline { opacity: .7; }
.instance > * + * { margin-top: .6rem; }
.kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin-bottom: 0; }
.kv > div { min-width: 0; }
.kv dt { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.kv dd { margin: 0; font-variant-numeric: tabular-nums; font-size: .92rem; overflow-wrap: anywhere; }
.kv dd.warn { color: var(--bad); font-weight: 700; }
.instance-error { color: var(--ink-2); }
.export-chips { padding: 0; }
.export-chips .nav-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px; background: var(--bg-2); color: var(--ink); text-decoration: none; font-size: .88rem; }
.export-chips .nav-chip:hover { background: var(--accent-soft); }

/* ---------- Gokkast (lootje onthullen) ---------- */
.slot { --slot-h: 64px; display: flex; align-items: center; gap: 10px; max-width: 320px; margin: 14px auto 0; }
.slot-window {
  position: relative; flex: 1; min-width: 0; height: var(--slot-h); overflow: hidden; border-radius: 14px;
  background: var(--surface); color: var(--ink); border: 3px solid var(--accent-2);
}
/* Bol glas: tekst vervaagt naar boven en onder, de rand blijft scherp. */
.slot-window::before, .slot-window::after { content: ''; position: absolute; left: 0; right: 0; height: 30%; z-index: 1; pointer-events: none; }
.slot-window::before { top: 0; background: linear-gradient(var(--surface), transparent); }
.slot-window::after { bottom: 0; background: linear-gradient(transparent, var(--surface)); }
.slot-reel { display: flex; flex-direction: column; will-change: transform; }
.slot-item {
  height: var(--slot-h); flex: none; display: grid; place-items: center; padding: 0 12px;
  font-family: var(--font-display); font-size: 1.7rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.slot-lever { position: relative; width: 16px; height: 64px; flex: none; }
.slot-lever::before { content: ''; position: absolute; left: 6px; top: 8px; bottom: 0; width: 4px; border-radius: 4px; background: var(--accent-ink); opacity: .75; }
.slot-knob { position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--accent-2); box-shadow: inset -2px -3px 0 rgba(0,0,0,.2); }
.slot.is-spinning .slot-knob { animation: lever-pull .7s ease-in-out; }
.slot.is-landed .slot-window { animation: slot-win .45s ease-in-out 3; }
@keyframes lever-pull { 45% { top: 46px; } 100% { top: 0; } }
@keyframes slot-win { 50% { box-shadow: 0 0 0 4px var(--accent-2), 0 0 24px var(--accent-2); } }
.reveal-btn[aria-disabled="true"] { opacity: .7; }

/* Bot-controle (ALTCHA, #50) */
altcha-widget { display: block; min-height: 50px; --altcha-max-width: 100%; --altcha-border-radius: var(--radius-sm); --altcha-border-color: var(--line);
  --altcha-color-base: var(--surface); --altcha-color-base-content: var(--ink); --altcha-color-primary: var(--accent); }

/* Prose (privacy) */
.prose > * + * { margin-top: 1rem; }
.prose h2 { margin-top: 1.8rem; }

/* ==========================================================================
   PWA & app-schil – installeer-hint, /delen, offline-pagina (zie docs/APP.md)
   ========================================================================== */
.install-hint {
  position: fixed; z-index: 40; left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  max-width: 520px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 8px 12px 12px; border-radius: var(--radius);
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.install-hint-icon img { display: block; width: 40px; height: 40px; border-radius: 10px; }
.install-hint-text { flex: 1; min-width: 0; margin: 0; font-size: .9rem; line-height: 1.35; }
.install-hint-text > strong { display: block; }
.install-hint-text > span:not([hidden]) { display: block; color: var(--ink-2); }
.install-hint-share { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; white-space: nowrap; }
.install-hint-close {
  flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted); font-size: 1rem; cursor: pointer;
}
.install-hint-close:hover, .install-hint-close:focus-visible { background: var(--bg-2); color: var(--ink); }
body.has-install-hint { padding-bottom: 96px; }
.is-native-app .install-hint { display: none !important; }

.share-target-link { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--accent-soft); overflow-wrap: anywhere; }
.share-target-lists { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.share-target-lists .list-card { min-height: 64px; }

.offline-icon { font-size: 3rem; margin: 0; }

/* ==========================================================================
   Groepspagina (deelnemer /d/:token) en omslagfoto in de beheerpagina
   — eigen blok, toegevoegd met de groepspagina
   ========================================================================== */
.hub > * + * { margin-top: 1.25rem; }
.hub-hero { border-radius: 22px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.hub-cover { width: 100%; aspect-ratio: 16 / 9; max-height: 380px; object-fit: cover; background: var(--bg-2); }
.hub-hero-text { padding: 16px 18px 20px; }
.hub-hero-text > * + * { margin-top: .35rem; }
.hub-hero.no-cover { background: var(--accent-soft); border-color: transparent; text-align: center; padding-top: 22px; }
.hub-hero.no-cover .hub-when { justify-content: center; }
.hub-hero-emoji { display: block; font-size: 2.6rem; line-height: 1; }
.hub-hero h1 { overflow-wrap: anywhere; }
.hub-when { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--ink-2); font-weight: 600; padding-top: .2rem; }
.hub-when > span { min-width: 0; overflow-wrap: anywhere; }
.hub-hello { color: var(--ink-2); }

/* Snelmenu: op telefoon één regel die horizontaal schuift */
.hub-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 2px 16px; -webkit-overflow-scrolling: touch; }
.hub-chips::-webkit-scrollbar { display: none; }
@media (min-width: 700px) { .hub-chips { flex-wrap: wrap; overflow: visible; margin-left: 0; margin-right: 0; padding: 0; } }
#lootje, #berichten, #info, #mijn-lijstje, #deelnemers, #gesprek-gever, #gesprek-lootje, #groepspagina { scroll-margin-top: 84px; }

.hub-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 1.75rem; }
.hub-main, .hub-side { min-width: 0; }
.hub-main > * + * { margin-top: 2.25rem; }
.hub-side > * + * { margin-top: 16px; }
@media (min-width: 900px) {
  .hub-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
}
.hub-title { font-family: var(--font-display); font-size: clamp(1.35rem, 4vw, 1.65rem); font-weight: 600; }
.hub-subtitle { font-size: 1.05rem; font-weight: 700; }
.hub .reveal-card::before, .hub .reveal-card::after { background: var(--bg); }

/* Waar & wanneer */
.hub-facts { display: grid; gap: 12px; margin-bottom: 0; }
.hub-facts > div { display: grid; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--line); min-width: 0; }
.hub-facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
.hub-facts dt { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.hub-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.hub-address, .hub-address-note { display: block; }
.hub-address-note { font-weight: 400; margin-top: 2px; }
.hub-route { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 8px; font-weight: 400; }
.hub-route .small { display: inline-flex; align-items: center; min-height: 36px; }
.hub-extra { border-top: 1px solid var(--line); padding-top: 12px; }
.hub-extra > * + * { margin-top: .35rem; }
.hub-extra-text { white-space: pre-line; color: var(--ink-2); overflow-wrap: anywhere; }

/* Deelnemers (alleen namen) */
.hub-people { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hub-people li { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 3px 12px 3px 3px; border-radius: 999px; background: var(--bg-2); font-size: .92rem; max-width: 100%; }
.hub-people li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.hub-people .avatar { width: 30px; height: 30px; font-size: .85rem; }

/* Berichten */
.hub-chat-head { display: flex; gap: 12px; align-items: flex-start; }
.hub-chat-head > div > * + * { margin-top: .25rem; }
.hub-mask { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft); font-size: 1.4rem; }
.hub-chat-gever { border-top: 4px solid var(--accent); }
.chat > * + * { margin-top: 12px; }
/* Vaste maximale hoogte: berichten scrollen binnen het venster, het invoerveld blijft eronder zichtbaar (#164).
   Werkt zonder JS; app.js scrolt alleen naar het nieuwste bericht. */
.chat-log { list-style: none; padding: 4px 6px 4px 2px; margin: 0; display: flex; flex-direction: column; gap: 10px;
  max-height: min(60vh, 460px); min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable;
  border-bottom: 1px solid var(--line); }
.chat-msg { max-width: min(85%, 520px); align-self: flex-start; padding: 8px 14px 6px; border-radius: 18px 18px 18px 6px; background: var(--bg-2); color: var(--ink); }
.chat-msg.is-mine { align-self: flex-end; border-radius: 18px 18px 6px 18px; background: var(--accent); color: var(--accent-ink); }
.chat-who { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .02em; opacity: .85; }
.chat-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-time { display: block; text-align: right; font-size: .72rem; opacity: .8; margin-top: 2px; }
.chat-empty { padding: 14px 16px; border: 2px dashed var(--line); border-radius: var(--radius-sm); color: var(--ink-2); font-size: .95rem; }
.chat-form { display: grid; gap: 8px; }
.chat-form .label { margin-bottom: 0; }
.chat-input { min-height: 76px; resize: vertical; }
.chat-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chat-form-foot .is-near { color: var(--bad); font-weight: 600; }
.chat-error { color: var(--bad); font-weight: 600; font-size: .92rem; }

/* Beheer: omslagfoto */
.cover-edit { display: grid; gap: 16px; }
@media (min-width: 640px) { .cover-edit { grid-template-columns: 260px minmax(0, 1fr); align-items: start; } }
.cover-preview { aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-2); border: 1px solid var(--line); }
.cover-preview img { width: 100%; height: 100%; object-fit: cover; }
.cover-preview.is-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 2rem; }
.cover-preview.is-empty .small { font-size: .85rem; }
.cover-actions .label { margin-bottom: 0; }
.input-file { padding: 9px 10px; font-size: 1rem; }
.input-file::file-selector-button { font: inherit; font-weight: 600; margin-right: 10px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); cursor: pointer; }
/* ---------- einde groepspagina ---------- */

/* ==========================================================================
   Aankomend (/aankomend) – tijdlijn met filters Ik beheer / Uitgenodigd
   — eigen blok, toegevoegd met issue #32
   ========================================================================== */
.tl-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Filters: rol als segmenten, soort als chips (zonder JS: gewone links) */
.tl-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); max-width: 480px; }
.tl-tabs a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 8px; border-radius: 999px; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .92rem; white-space: nowrap; min-width: 0; }
.tl-tabs a:hover { color: var(--ink); }
.tl-tabs a[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.tl-tabs span, .tl-count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); display: inline-grid; place-items: center; font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tl-kinds a[aria-current="page"] { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.tl-kinds .tl-kind-emoji { background: none; min-width: 0; padding: 0; }

/* Tijdlijn */
.tl-month-title { font-size: .85rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-family: var(--font); }
.tl-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.tl-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: start; padding: 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--accent); box-shadow: var(--shadow); color: var(--ink); min-width: 0; }
.tl-card:hover { border-color: var(--accent); }
.tl-card:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.tl-card.is-past { opacity: .75; box-shadow: none; }
.tl-card .date-badge { grid-row: span 2; }
.date-badge-none strong { font-size: 1.4rem; line-height: 1.3; }
.tl-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tl-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .8rem; color: var(--muted); margin: 0; }
.tl-role-beheer { background: var(--accent); color: var(--accent-ink); }
.tl-role-uitgenodigd { background: var(--info-soft); color: var(--ink-2); }
.tl-when { font-weight: 600; color: var(--accent); }
.tl-title { margin: 0; font-size: 1.08rem; line-height: 1.3; font-family: var(--font); overflow-wrap: anywhere; }
.tl-link { color: inherit; text-decoration: none; }
.tl-link:focus { outline: none; }
/* Hele kaart klikbaar; knoppen liggen erboven. */
.tl-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tl-meta { margin: 0; font-size: .88rem; color: var(--muted); overflow-wrap: anywhere; }
.tl-status { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; }
.tl-status .badge { white-space: normal; }
.tl-actions { position: relative; z-index: 1; grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.tl-actions form { margin: 0; }
.tl-actions .linklike { min-height: 36px; color: var(--muted); }

/* Geweest: ingeklapt */
.tl-past > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-weight: 700; color: var(--ink-2); list-style: none; }
.tl-past > summary::-webkit-details-marker { display: none; }
.tl-past > summary::before { content: "▸"; color: var(--muted); transition: transform .15s ease; }
.tl-past[open] > summary::before { transform: rotate(90deg); }
.tl-past > .tl-list { margin-top: 8px; }
.empty .row { justify-content: center; }

@media (min-width: 760px) {
  .tl-card { grid-template-columns: auto minmax(0, 1fr) auto; padding: 16px 18px; }
  .tl-card .date-badge { grid-row: auto; }
  .tl-actions { grid-column: 3; margin-top: 0; align-self: center; justify-content: flex-end; max-width: 300px; }
}
@media (prefers-reduced-motion: reduce) { .tl-past > summary::before { transition: none; } }
/* ---------- einde Aankomend ---------- */

/* ==========================================================================
   Uitnodigingen (#34) – "Doe je mee?" (/d/:token vóór het trekken) en de
   stand + trekmodus in de beheerpagina — eigen blok
   ========================================================================== */
.rsvp-tally { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rsvp-tally li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg-2); font-size: .85rem; color: var(--ink-2); line-height: 1.25; min-width: 0; }
.rsvp-tally strong { font-size: 1.4rem; line-height: 1.1; color: var(--ink); }
.rsvp-tally .is-yes { background: var(--ok-soft); }
.rsvp-tally .is-yes strong { color: var(--ok); }
.rsvp-tally .is-no strong { color: var(--muted); }
.draw-mode { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--bg); }
.draw-mode fieldset, .card fieldset fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.draw-mode .check, fieldset fieldset .check { align-items: flex-start; padding: 10px 0; }
.draw-mode .check input, fieldset fieldset .check input { margin-top: 1px; }
.badge-muted { background: transparent; border: 1px dashed var(--line); color: var(--muted); }
.rsvp-set { gap: 6px; }
.check input[type=radio] { font-size: 16px; } /* geen iOS-zoom-melding in de audit */

.invite-head { text-align: center; }
.invite-head > * + * { margin-top: .35rem; }
.invite-head h1 { overflow-wrap: anywhere; }
.invite-emoji { display: block; font-size: 2.6rem; line-height: 1; }
.invite-card { border-top: 4px solid var(--accent); }
.invite-facts { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--bg); }
.invite-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.invite-actions .btn-large { flex: 1 1 220px; }
#meedoen, #profiel { scroll-margin-top: 84px; }
/* ---------- einde uitnodigingen ---------- */

/* ==========================================================================
   Profiel (/profiel), profielfoto's en cadeauvoorkeuren
   — eigen blok, toegevoegd met het profiel (issue #31)
   ========================================================================== */
/* Foto in plaats van de initiaal: zelfde maat en vorm als .avatar / .nav-avatar */
.avatar-photo { object-fit: cover; padding: 0; background: var(--bg-2); }
.nav-avatar.avatar-photo { box-shadow: 0 0 0 2px var(--accent); }

.back-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: none; }
.back-link:hover { text-decoration: underline; }

.profile-head { display: flex; align-items: center; gap: 16px; min-width: 0; }
.profile-head > div { min-width: 0; }
.profile-head > div > * + * { margin-top: .2rem; }
.profile-head h1 { overflow-wrap: anywhere; }
.profile-avatar { width: 72px; height: 72px; font-size: 1.8rem; }
.profile-email, .profile-static { overflow-wrap: anywhere; }
.profile-static { font-weight: 600; margin-top: .5rem; }
.profile-photo { display: grid; gap: 16px; align-items: start; }
@media (min-width: 560px) { .profile-photo { grid-template-columns: 128px minmax(0, 1fr); } }
.profile-photo-preview { width: 128px; height: 128px; font-size: 3rem; }
.profile-photo-actions .label { margin-bottom: 0; }
.profile-actions { flex-wrap: wrap; }

/* Overzicht: begroeting met foto */
.dash-hello { display: flex; align-items: center; gap: 14px; min-width: 0; }
.dash-hello > div { min-width: 0; }
.dash-hello > div > * + * { margin-top: .2rem; }
.dash-avatar { flex: none; border-radius: 50%; }
.dash-avatar .avatar { width: 56px; height: 56px; font-size: 1.4rem; }
.dash-avatar:hover .avatar { box-shadow: 0 0 0 3px var(--accent-soft); }

/* Lijstje (gast): eigenaar met foto */
.list-owner { display: flex; align-items: center; justify-content: center; gap: 8px; }
.list-owner .avatar { width: 32px; height: 32px; font-size: .9rem; }

/* Lootje onthuld: foto van je lootje boven de naam */
.reveal-avatar { width: 84px; height: 84px; margin: .6rem auto 0; border: 3px solid var(--surface); box-shadow: var(--shadow); }

/* Voorkeuren (partial preferences.ejs) */
.prefs { border-top: 4px solid var(--accent-2); }
.prefs-title { font-size: 1.05rem; font-weight: 700; }
.prefs-list { display: grid; gap: 10px 16px; margin: 0; }
@media (min-width: 560px) { .prefs-list { grid-template-columns: 1fr 1fr; } .prefs-list .prefs-wide { grid-column: 1 / -1; } }
.prefs-list > div { min-width: 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg-2); }
.prefs-list dt { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.prefs-list dd { margin: 2px 0 0; font-weight: 600; white-space: pre-line; overflow-wrap: anywhere; }
/* ---------- einde profiel ---------- */

/* ==========================================================================
   Eventpagina: voorbeeld voor de organisator (/g/:admin/voorbeeld) en
   de knop Instellingen — eigen blok, toegevoegd met #33
   ========================================================================== */
.manage-bar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px;
  padding: 10px 12px 10px 16px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); box-shadow: var(--shadow);
}
.manage-bar.is-preview { background: var(--info-soft); border-color: transparent; border-left-color: var(--focus); }
.manage-bar-text { flex: 1 1 200px; min-width: 0; line-height: 1.35; }
.manage-bar-text > strong { display: block; }
.manage-bar-sub { display: block; font-size: .85rem; color: var(--ink-2); }
.manage-bar-btn { flex: none; gap: 6px; }
@media (max-width: 420px) { .manage-bar-btn { flex: 1 1 100%; } }

.preview-name { color: var(--muted); font-weight: 600; }
.preview-placeholder {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 18px; border: 2px dashed var(--line); border-radius: var(--radius); color: var(--ink-2);
}
.preview-placeholder > div { min-width: 0; }
.preview-placeholder > div > * + * { margin-top: .4rem; }
.preview-placeholder-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft); font-size: 1.35rem; }
/* ---------- einde eventvoorbeeld ---------- */

/* ==========================================================================
   Boodschappenlijstjes (issue #39): "Wat moet ik nog kopen?", "Wie neemt wat mee?"
   en de ideeënpagina. Rustige tekstregels, geen banners of productcarrousels.
   ========================================================================== */
#boodschappen, #meenemen, .shop-row { scroll-margin-top: 84px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.shop-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.shop-list { list-style: none; padding: 0; margin: 0; }
.shop-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.shop-row:first-child { padding-top: 2px; }
.shop-row:last-child { border-bottom: 0; padding-bottom: 2px; }
.shop-main { flex: 1 1 180px; min-width: 0; }
.shop-title { display: block; font-weight: 600; overflow-wrap: anywhere; }
.shop-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 2px; font-size: .85rem; }
.shop-meta:empty { display: none; }
.shop-tag { color: var(--accent); font-weight: 600; }
.shop-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; margin-left: auto; }
.shop-check-form { flex: none; }
.shop-check {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 10px;
  border: 2px solid var(--line); background: var(--surface); color: var(--bg); font: inherit; font-weight: 800; cursor: pointer;
}
.shop-check:hover { border-color: var(--ok); }
.shop-check[aria-pressed="true"] { background: var(--ok); border-color: var(--ok); }
.shop-row.is-done .shop-title { text-decoration: line-through; text-decoration-color: var(--muted); color: var(--muted); font-weight: 500; }
.shop-thumb { flex: none; width: 44px; height: 44px; object-fit: contain; background: #fff; border-radius: 8px; border: 1px solid var(--line); }
.shop-empty { padding: 14px 16px; border: 2px dashed var(--line); border-radius: var(--radius-sm); color: var(--ink-2); font-size: .95rem; }
.shop-add .label { margin-bottom: .4rem; }
.shop-add-row { display: flex; gap: 8px; }
.shop-add-row .input { flex: 1; min-width: 0; }
.shop-add-row .btn { flex: none; }
.shop-link > summary, .shop-more > summary { list-style: none; display: inline-flex; align-items: center; min-height: 36px; cursor: pointer; color: var(--accent); }
.shop-link > summary::-webkit-details-marker, .shop-more > summary::-webkit-details-marker { display: none; }
.shop-link > summary { margin-top: 2px; }
.shop-link[open] > summary { display: none; }
.shop-more > summary { min-height: 44px; font-weight: 600; }
.shop-wishes { margin-top: 6px; padding: 12px 14px; background: var(--bg); border-radius: var(--radius-sm); }
.shop-wishes .check { min-height: 40px; align-items: flex-start; padding-top: 8px; }
.shop-wishes .check input { margin-top: 1px; }
.shop-wishes .check span { overflow-wrap: anywhere; }
.shop-ideas, .shop-toggle { border-top: 1px solid var(--line); padding-top: 12px; }
.shop-ideas > * + * { margin-top: .5rem; }
.shop-toggle { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.section-chips a[aria-current="page"] { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.ideas-page .page-head a { font-weight: 600; }
.section-chips .chip-emoji { min-width: 0; height: auto; padding: 0; background: none; color: inherit; font-size: 1rem; }
.shop-search { display: inline-flex; align-items: center; min-height: 32px; color: var(--ink-2); text-underline-offset: 2px; }
/* ---------- einde boodschappenlijstjes ---------- */

/* ==========================================================================
   Homepage (issue #40) — seizoen voorop, voorbeeldkaartjes, animaties
   — eigen blok. Alleen bestaande tokens, zodat een stijlrichting (#8) er
   later overheen kan. Animaties: alleen transform/opacity (compositor),
   pas actief als app.js .is-ready zet; zonder JS of met "minder beweging"
   staat alles stil in de eindtoestand. Vaste maten → geen layoutsprongen.
   ========================================================================== */
.home { --reel-h: 1.75rem; }
.home .ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }
.home-h2 { font-family: var(--font-display); font-size: clamp(1.45rem, 4vw, 1.9rem); font-weight: 600; letter-spacing: -.01em; }

/* Hero */
.home-hero { display: grid; gap: 28px; padding: 32px 0 32px; align-items: center; }
.home-hero-text > * + * { margin-top: 1rem; }
.home-hero h1 { font-size: clamp(2rem, 7vw, 3.3rem); }
.home-cta { display: flex; gap: .75rem; flex-wrap: wrap; padding-top: .5rem; }
.home-cta .btn { flex: 1 1 200px; }
@media (min-width: 860px) {
  .home-hero { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 48px; padding: 64px 0 56px; }
}
/* Mobiel: de animatie direct onder de knoppen, het inlogformulier eronder (anders speelt hij buiten beeld).
   De tekstkolom wordt daarvoor "doorzichtig" (display: contents), zodat de figuur ertussen kan. */
@media (max-width: 859px) {
  .home-hero { row-gap: 1rem; }
  .home-hero-text { display: contents; }
  .home-hero-text > * + * { margin-top: 0; }
  .home-hero > .home-draw { order: 1; margin: .5rem 0; }
  .home-hero-text > .home-login, .home-hero-text > .home-welcome { order: 2; }
}

/* Lootjes-kaart */
.home-draw, .home-mocks { margin: 0; }
.home-fig-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 36px; margin-top: 10px; padding: 0 4px; color: var(--muted); font-size: .85rem; }
.home-replay {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font: inherit; font-size: .85rem; cursor: pointer;
}
.home-replay:hover { border-color: var(--muted); color: var(--ink); }
.home-replay .ico { width: 16px; height: 16px; }

/* Seizoenskaart */
.home-season { display: grid; gap: 24px; padding: 24px 20px; border-radius: 22px; background: var(--accent-soft); }
.home-season-main > * + * { margin-top: .6rem; }
.home-season-main .btn { margin-top: 1.1rem; }
.home-season-main .btn .ico { width: 18px; height: 18px; }
.home-season-text { color: var(--ink-2); max-width: 54ch; }
.home-count { display: flex; align-items: flex-end; gap: 12px; margin-bottom: .9rem; }
.home-count-n { font-family: var(--font-display); font-size: clamp(4rem, 15vw, 6.5rem); line-height: .82; font-weight: 600; color: var(--accent); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.03em; }
.home-count-unit { font-weight: 600; line-height: 1.25; color: var(--ink-2); padding-bottom: 4px; }
.home-count-text { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--accent); margin-bottom: .4rem; }
/* Illustratie per seizoen (public/img/seizoen/*.svg) boven het voorbeeldkaartje. */
.home-season-side { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.home-season-art { display: block; width: min(100%, 320px); height: auto; margin-bottom: -14px; position: relative; z-index: 0; pointer-events: none; }
.home-season-art { background: radial-gradient(ellipse 46% 42% at 50% 58%, rgb(255 255 255 / .55) 0 96%, transparent 100%); }
.home-season-side .home-example { position: relative; z-index: 1; align-self: stretch; }
@media (prefers-color-scheme: dark) { .home-season-art { background: radial-gradient(ellipse 46% 42% at 50% 58%, rgb(255 255 255 / .07) 0 96%, transparent 100%); } }
.home-example {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink); text-decoration: none;
  transition: border-color .15s ease;
}
.home-example:hover { border-color: var(--accent); }
.home-example-tag { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; }
.home-example-title { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.2; }
.home-example-meta { color: var(--muted); font-size: .9rem; }
.home-example-done { font-size: .88rem; font-weight: 600; color: var(--ink-2); }
.home-bar { display: block; align-self: stretch; height: 8px; margin-top: 6px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.home-bar-fill { display: block; height: 100%; background: var(--accent); transform-origin: left center; transform: scaleX(.5); }
.home-bar-fill[data-frac="1"] { transform: scaleX(.1); } .home-bar-fill[data-frac="2"] { transform: scaleX(.2); }
.home-bar-fill[data-frac="3"] { transform: scaleX(.3); } .home-bar-fill[data-frac="4"] { transform: scaleX(.4); }
.home-bar-fill[data-frac="6"] { transform: scaleX(.6); } .home-bar-fill[data-frac="7"] { transform: scaleX(.7); }
.home-bar-fill[data-frac="8"] { transform: scaleX(.8); } .home-bar-fill[data-frac="9"] { transform: scaleX(.9); }
.home-bar-fill[data-frac="10"] { transform: none; }
@media (min-width: 760px) {
  .home-season { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; gap: 40px; padding: 36px 40px; }
  .home-example { transform: rotate(1.4deg); }
}

/* Lijstjes */
.home-lists { display: grid; gap: 28px; padding: 56px 0 24px; align-items: center; }
.home-lists-text > * + * { margin-top: .9rem; }
.home-lists-text > p { color: var(--ink-2); max-width: 52ch; }
.home-points { list-style: none; padding: 0; display: grid; gap: 8px; }
.home-points li { display: flex; align-items: center; gap: 10px; }
.home-points .ico { color: var(--accent); }
.home-mocks { display: grid; gap: 12px; max-width: 480px; width: 100%; }
@media (min-width: 860px) {
  .home-lists { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 56px; }
  .home-mocks { justify-self: end; }
}
.home-mock { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 14px 16px; }
.home-mock-head { display: flex; flex-direction: column; line-height: 1.3; padding-bottom: 8px; }
.home-mock-sub { color: var(--muted); font-size: .82rem; }
.home-wish-items, .home-event-items { list-style: none; padding: 0; margin: 0; }
.home-wish-items li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.home-thumb { width: 36px; height: 36px; border-radius: 8px; background: var(--bg-2); position: relative; overflow: hidden; }
.home-thumb::after { content: ''; position: absolute; left: 9px; right: 9px; bottom: 7px; height: 14px; border-radius: 4px 4px 2px 2px; border: 2px solid currentColor; opacity: .35; }
.home-thumb-a { background: var(--accent-soft); color: var(--accent); }
.home-thumb-b { background: var(--info-soft); color: var(--focus); }
.home-thumb-c { background: var(--ok-soft); color: var(--ok); }
.home-thumb-d { background: var(--bg-2); color: var(--muted); }
.home-wish-txt { min-width: 0; line-height: 1.3; }
.home-wish-txt b { display: block; font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-wish-txt small { display: block; font-size: .78rem; color: var(--muted); }
.home-state, .home-who { display: grid; justify-items: end; }
.home-state > *, .home-who > * { grid-area: 1 / 1; }
.home-state-open, .home-state-done, .home-who-open, .home-who-done {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; border: 1px solid transparent;
}
.home-state-open { border-color: var(--line); color: var(--ink-2); }
.home-state-done { background: var(--ok-soft); color: var(--ok); }
.home-state-done .ico { width: 14px; height: 14px; }
.home-wish-items li:first-child .home-state-open { opacity: 0; }
.home-event { justify-self: end; width: min(100%, 340px); }
.home-event-items li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); font-size: .9rem; }
.home-who-open { border: 1px dashed var(--muted); color: var(--muted); }
.home-who-done { background: var(--accent-soft); color: var(--ink); }
.home-event-items li:first-child .home-who-open { opacity: 0; }
.home-event-note { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: .85rem; font-weight: 600; color: var(--ok); }

/* Stappen: genummerde tijdlijn, geen tegels */
.home-steps { padding: 48px 0 16px; }
.home-step-list { list-style: none; padding: 0; margin-top: 1.25rem; display: grid; }
.home-step-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); }
.home-step-list h3 { font-size: 1.05rem; }
.home-step-list p { color: var(--ink-2); font-size: .95rem; margin-top: .25rem; }
.home-step-n { font-family: var(--font-display); font-size: 2rem; line-height: 1; color: var(--accent); font-weight: 600; }
@media (min-width: 860px) {
  .home-step-list { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; }
  .home-step-list li { grid-template-columns: 1fr; align-content: start; gap: 10px; border-top-width: 2px; border-top-color: var(--ink); padding-top: 14px; }
}

/* Overige gelegenheden: tekstlinks met een voorbeeld */
.home-others { padding: 40px 0 32px; }
.home-other-list { list-style: none; padding: 0; margin-top: 1rem; display: grid; border-top: 1px solid var(--line); }
@media (min-width: 760px) { .home-other-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; border-top: 0; } .home-other-list li:nth-child(-n+2) { border-top: 1px solid var(--line); } }
.home-other-list a { display: grid; grid-template-columns: minmax(0, 1fr) 20px; column-gap: 12px; align-items: center; min-height: 64px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.home-other-label { font-weight: 600; }
.home-other-ex { grid-column: 1; color: var(--muted); font-size: .9rem; }
.home-other-arrow { grid-column: 2; grid-row: 1 / span 2; color: var(--muted); transition: transform .15s ease, color .15s ease; }
.home-other-list a:hover .home-other-label { color: var(--accent); }
@media (hover: hover) { .home-other-list a:hover .home-other-arrow { transform: translateX(3px); color: var(--accent); } }

/* --- Animaties (alleen met JS; .is-ready = klaarzetten, .is-play = afspelen) --- */
.home-wish-items li:nth-child(1) { --d: .1s; } .home-wish-items li:nth-child(2) { --d: .45s; }
.home-wish-items li:nth-child(3) { --d: .8s; } .home-wish-items li:nth-child(4) { --d: 1.15s; }
@keyframes home-pop { from { opacity: 0; transform: scale(.4); } }
@keyframes home-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes home-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes home-grow { from { transform: scaleX(0); } }
.is-ready .home-wish-items li { animation: home-in .45s ease-out var(--d) both paused; }
.is-ready .home-wish-items li:first-child .home-state-open { animation: home-out .25s ease-in 2.1s both paused; }
.is-ready .home-wish-items li:first-child .home-state-done { animation: home-pop .35s cubic-bezier(.3,1.6,.6,1) 2.2s both paused; }
.is-ready .home-event-items li:first-child .home-who-open { animation: home-out .25s ease-in 3s both paused; }
.is-ready .home-event-items li:first-child .home-who-done { animation: home-pop .35s cubic-bezier(.3,1.6,.6,1) 3.1s both paused; }
.is-ready .home-event-note { animation: home-in .4s ease-out 3.35s both paused; }
.is-ready .home-replay { animation: home-in .3s ease-out 3.6s both paused; }
.is-play *, .is-play::after, .is-play *::after { animation-play-state: running !important; }
/* ---------- Hero-animatie "Van lootje naar cadeau" (homepage, figure.hx.hb) ----------
   De markup staat in de EINDSTAND: zonder JS of bij "minder beweging" zie je die.
   .is-ready zet alles klaar (gepauzeerd, beginstand via fill-mode both); .is-play laat het lopen.
   Alles in cqw (1cqw = 1% van de breedte van het podium), dus het schaalt als één plaatje mee;
   vaste verhouding = geen verspringen. Ontwerp: docs/schets-landing.html. */
/* ---------- Gedeeld (≈3,5 kB, waarvan confetti ≈2 kB) ---------- */
.hx { margin: 0; width: 100%; max-width: 460px; justify-self: center; }
.hx-stage { position: relative; aspect-ratio: 100 / 82; container-type: inline-size; color: var(--ink); }
.hx-stage * { box-sizing: border-box; }
.hx-stage svg { display: block; overflow: visible; }
.hx-defs { position: absolute; width: 0; height: 0; }
.hx .home-fig-foot { margin-top: 4px; }
.hx-avbg { fill: var(--avbg, #f3ebe0); } .hx-skin { fill: var(--skin, #f2c7a5); } .hx-hair { fill: var(--hair, #6b3f22); } .hx-shirt { fill: var(--shirt, #c2462f); }
.hx-sanne { --avbg: #fbe3e0; --skin: #e0a882; --hair: #3b2417; --shirt: #3a8fd8; }
.is-play *::before { animation-play-state: running !important; }
@keyframes hx-pop { 0% { opacity: 0; transform: scale(.3); } 60% { opacity: 1; transform: scale(1.12); } }
@keyframes hx-in { from { opacity: 0; transform: translateY(3cqw); } }
@keyframes hx-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes hx-hop { 40% { transform: translateY(-2.4cqw); } 70% { transform: translateY(.4cqw); } }
/* Confetti: natuurlijke stand = weg (opacity 0), dus zonder JS ligt er niets. */
.hx-conf { position: absolute; inset: 0; pointer-events: none; }
.hx-conf i { position: absolute; left: var(--ox); top: var(--oy); width: 1.6cqw; height: 2.6cqw; border-radius: 1px; background: var(--c); opacity: 0; }
@keyframes hx-conf {
  0% { opacity: 0; transform: translate(0, 0) rotate(0) scale(.4); }
  8% { opacity: 1; }
  35% { opacity: 1; transform: translate(var(--x), var(--y)) rotate(calc(var(--r) * .5)) scale(1); }
  100% { opacity: 0; transform: translate(calc(var(--x) * 1.2), calc(var(--y) + 22cqw)) rotate(var(--r)) scale(1); }
}
.hx-conf i:nth-child(1) { --x: -22cqw; --y: -16cqw; --r: 260deg; --c: #c2462f; }
.hx-conf i:nth-child(2) { --x: -14cqw; --y: -24cqw; --r: -220deg; --c: #e2b04a; }
.hx-conf i:nth-child(3) { --x: -4cqw; --y: -28cqw; --r: 300deg; --c: #1e6b47; border-radius: 50%; height: 1.6cqw; }
.hx-conf i:nth-child(4) { --x: 6cqw; --y: -26cqw; --r: -280deg; --c: #3a8fd8; }
.hx-conf i:nth-child(5) { --x: 15cqw; --y: -22cqw; --r: 240deg; --c: #c2462f; border-radius: 50%; height: 1.6cqw; }
.hx-conf i:nth-child(6) { --x: 23cqw; --y: -14cqw; --r: -200deg; --c: #e2b04a; }
.hx-conf i:nth-child(7) { --x: -26cqw; --y: -4cqw; --r: 180deg; --c: #f6b7cb; }
.hx-conf i:nth-child(8) { --x: 27cqw; --y: -5cqw; --r: -160deg; --c: #1e6b47; }
.is-ready .hx-conf i { animation: hx-conf 1.5s cubic-bezier(.2,.7,.3,1) var(--cd) both paused; }
.is-ready .hx-conf i:nth-child(even) { animation-duration: 1.8s; }
@media (prefers-reduced-motion: reduce) { .hx *, .hx *::before, .hx *::after { animation: none !important; } }
.hb-lot {
  position: absolute; z-index: 2; left: 3cqw; top: 3cqw; width: 40cqw; height: 16cqw; padding: 2cqw 2.6cqw; border-radius: 2.4cqw;
  display: grid; grid-template-columns: 10cqw minmax(0, 1fr); align-items: center; gap: 2.4cqw;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1cqw 4cqw -1.5cqw rgba(42,33,28,.35);
  transform: rotate(-4deg); perspective: 120cqw;
}
.hb-lot svg { width: 10cqw; height: 10cqw; }
.hb-lot small { display: block; font-size: max(9px, 2.4cqw); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); line-height: 1.2; }
.hb-lot strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 7cqw; line-height: 1.05; }
.hb-cover {
  position: absolute; inset: -1px; border-radius: 2.4cqw; border: 1.5px solid #2a211c; transform-origin: 50% 0; opacity: 0;
  background: linear-gradient(170deg, transparent 49%, rgba(42,33,28,.22) 49.5% 50.5%, transparent 51%), #fbf3e4;
}
.hb-cover::after { content: ''; position: absolute; left: 50%; top: 50%; width: 5cqw; height: 5cqw; margin: -2.5cqw; border-radius: 50%; background: #c2462f; box-shadow: inset 0 0 0 .5cqw #d4513a; }
.hb-arrow { position: absolute; left: 45cqw; top: 6cqw; width: 22cqw; color: var(--muted); }
.hb-arrow span { position: absolute; left: 17cqw; top: 5.5cqw; font-family: var(--font-display); font-style: italic; font-size: max(11px, 3.2cqw); white-space: nowrap; }
.hb-list {
  position: absolute; left: 6cqw; right: 2cqw; top: 22cqw; bottom: 0; padding: 3cqw 3.4cqw; border-radius: 3cqw;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1cqw 5cqw -2cqw rgba(42,33,28,.3);
}
.hb-rows { list-style: none; margin: 0; padding: 0; }
.hb-head { display: flex; align-items: center; gap: 2cqw; padding-bottom: 2cqw; }
.hb-head svg { width: 7cqw; height: 7cqw; flex: none; }
.hb-head b { display: block; font-family: var(--font-display); font-weight: 600; font-size: max(13px, 4.2cqw); line-height: 1.15; }
.hb-head small { display: block; font-size: max(10px, 2.7cqw); color: var(--muted); }
.hb-row { display: grid; grid-template-columns: 9cqw minmax(0, 1fr) auto; align-items: center; gap: 2.4cqw; padding: 1.8cqw 1.4cqw; margin: 0 -1.4cqw; border-top: 1px solid var(--line); border-radius: 1.6cqw; }
.hb-row > svg { width: 9cqw; height: 9cqw; }
.hb-row b { display: block; font-size: max(11px, 3.2cqw); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.hb-row small { display: block; font-size: max(10px, 2.7cqw); color: var(--muted); }
.hb-me { background: var(--ok-soft); border-top-color: transparent; }
.hb-btn { position: relative; display: grid; justify-items: end; }
.hb-btn > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: .8cqw; padding: .9cqw 2.2cqw; border-radius: 99px; font-size: max(10px, 2.7cqw); font-weight: 600; white-space: nowrap; }
.hb-open { border: 1px solid var(--line); color: var(--ink-2); background: var(--surface); }
.hb-me .hb-open { opacity: 0; }
.hb-done { background: var(--ok); color: var(--bg); }
.hb-done svg { width: 2.8cqw; height: 2.8cqw; }
.hb-tap { position: absolute; right: 5cqw; top: 50%; margin-top: -3cqw; width: 6cqw; height: 6cqw; border-radius: 50%; background: rgba(42,33,28,.28); border: 2px solid #fff; box-shadow: 0 .6cqw 2cqw rgba(42,33,28,.3); opacity: 0; pointer-events: none; }
.hb-ring { position: absolute; right: 3cqw; top: 50%; width: 10cqw; height: 10cqw; margin-top: -5cqw; border-radius: 50%; border: 2px solid var(--ok); opacity: 0; }
.hb-note { position: absolute; left: 3.4cqw; bottom: 2.2cqw; font-size: max(10px, 2.7cqw); color: var(--muted); }
.hb .hx-conf { --ox: 50cqw; --oy: 34cqw; --cd: 1.4s; }


@keyframes hb-lot {
  0% { opacity: 0; transform: translate(27cqw, 34cqw) scale(.7) rotate(4deg); }
  8% { opacity: 1; }
  24% { transform: translate(27cqw, 25cqw) scale(1.55) rotate(-1deg); }
  74% { transform: translate(27cqw, 25cqw) scale(1.55) rotate(-1deg); }
}
@keyframes hb-flip {
  0% { opacity: 1; transform: rotateX(0); }
  25% { opacity: 1; transform: rotateX(-14deg); }
  70% { opacity: 1; transform: rotateX(-88deg); }
  71%, 100% { opacity: 0; transform: rotateX(-90deg); }
}
@keyframes hb-list { from { opacity: 0; transform: translateY(60cqw) rotate(5deg); } 70% { opacity: 1; transform: translateY(-1cqw) rotate(-.5deg); } }
@keyframes hb-tap {
  0% { opacity: 0; transform: translate(14cqw, 22cqw); }
  12% { opacity: 1; }
  48% { transform: translate(0, 0); }
  58% { transform: translate(0, 0) scale(.75); }
  70% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(3cqw, 6cqw); }
}
@keyframes hb-ring { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes hb-row { from { background-color: var(--surface); } }
.is-ready .hb-lot { animation: hb-lot 3.1s cubic-bezier(.35,.1,.25,1) both paused; }
.is-ready .hb-cover { animation: hb-flip .8s cubic-bezier(.5,0,.3,1) .95s both paused; }
.is-ready .hb-lot strong { animation: hx-pop .5s cubic-bezier(.3,1.5,.6,1) 1.35s both paused; }
.is-ready .hb-list { animation: hb-list .75s cubic-bezier(.25,.8,.3,1) 2.45s both paused; }
.is-ready .hb-arrow { animation: hx-in .4s ease-out 3.3s both paused; }
.is-ready .hb-row { animation: hx-in .35s ease-out 2.85s both paused; }
.is-ready .hb-row:nth-of-type(2) { animation: hx-in .35s ease-out 2.95s both paused, hb-row .3s ease-out 4.6s both paused; }
.is-ready .hb-row:nth-of-type(3) { animation-delay: 3.05s; }
.is-ready .hb-tap { animation: hb-tap 1.5s cubic-bezier(.4,0,.2,1) 3.75s both paused; }
.is-ready .hb-ring { animation: hb-ring .6s ease-out 4.55s both paused; }
.is-ready .hb-me .hb-open { animation: hx-out .15s linear 4.55s both paused; }
.is-ready .hb-done { animation: hx-pop .45s cubic-bezier(.3,1.6,.6,1) 4.6s both paused; }
.is-ready .hb-note { animation: hx-in .4s ease-out 5.1s both paused; }
.is-ready.hb .home-replay { animation: home-in .3s ease-out 5.4s both paused; }
.home-bar-fill { animation: home-grow .9s cubic-bezier(.2,.7,.2,1) .3s both; }
@media (prefers-reduced-motion: reduce) {
  .home *, .home *::after { animation: none !important; transition: none !important; }
}
/* ---------- einde homepage ---------- */

/* ---------- Overzicht: "+ Nieuw"-menu, "Hier ben je mee bezig", meer-opties per kaart ---------- */
.plus-menu { position: relative; }
.plus-menu > summary { list-style: none; cursor: pointer; }
.plus-menu > summary::-webkit-details-marker { display: none; }
.plus-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: min(340px, calc(100vw - 32px)); padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
@media (max-width: 640px) {
  /* Op de telefoon: vaste ronde plusknop rechtsonder, menu klapt naar boven open. */
  .plus-menu { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40; }
  .plus-btn { min-height: 56px; padding: 0 20px; border-radius: 999px; box-shadow: 0 6px 18px rgba(0,0,0,.18); font-size: 1.05rem; }
  .plus-panel { top: auto; bottom: calc(100% + 10px); }
}
.focus-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.focus-list a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px 14px; min-height: 56px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--accent); color: var(--ink); text-decoration: none; box-shadow: var(--shadow); }
.focus-list a:hover { border-color: var(--accent); }
.focus-emoji { font-size: 1.4rem; }
.focus-text { display: grid; min-width: 0; }
.focus-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.focus-text small { color: var(--muted); }
.focus-go { font-size: 1.4rem; color: var(--muted); }
@media (max-width: 420px) { .focus-list a { grid-template-columns: auto minmax(0, 1fr) auto; } .focus-list .badge { grid-column: 2; grid-row: 2; justify-self: start; } .focus-go { grid-column: 3; grid-row: 1 / span 2; } }
.tl-more { position: relative; }
.tl-more > summary { list-style: none; cursor: pointer; min-width: 36px; min-height: 36px; display: inline-grid; place-items: center; border-radius: 999px; font-size: 1.2rem; color: var(--muted); }
.tl-more > summary::-webkit-details-marker { display: none; }
.tl-more > summary:hover { background: var(--bg-2); }
.tl-more-panel { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 220px; padding: 6px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.tl-more-panel .linklike { min-height: 40px; width: 100%; text-align: left; }
.tl-more-panel .danger { color: #b3261e; }
/* ---------- Inloggen met code ---------- */
.input-code { font-size: 1.6rem; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }
.home-login { margin-top: 1.5rem; max-width: 460px; display: grid; gap: 6px; }
.home-login-row { display: flex; gap: 8px; }
.home-login-row .input { flex: 1; min-width: 0; }
.home-login .label { font-weight: 600; }
.home-welcome { margin-top: 1rem; font-weight: 600; }

/* ---------- Landingspagina's (#73) ---------- */
.landing h2 { font-size: 1.35rem; }
.landing-steps { list-style: none; counter-reset: stap; margin: 0; padding: 0; display: grid; gap: 12px; }
.landing-steps li { counter-increment: stap; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 2px 12px; }
.landing-steps li::before { content: counter(stap); grid-row: span 2; width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.landing-steps span, .landing-features span { color: var(--ink-2); }
.landing-features { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.landing-features li { display: grid; gap: 4px; }
.landing-faq { display: grid; gap: 8px; }
.landing-faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 16px; }
.landing-faq summary { cursor: pointer; font-weight: 600; min-height: 48px; display: flex; align-items: center; }
.landing-faq details p { margin: 0 0 14px; color: var(--ink-2); }
.landing-cta { text-align: center; align-items: center; }
.footer-links a { color: inherit; }
.home-more { margin-top: 1rem; color: var(--ink-2); }
/* ---------- Menu ingelogd: Overzicht · Nieuw · Hulp · account ---------- */
.nav-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 999px; color: var(--ink-2); text-decoration: none; }
.nav-link:hover { background: var(--bg-2); }
.nav-link.active { color: var(--accent); font-weight: 600; }
.nav-link-icon { flex: none; }
@media (max-width: 560px) {
  .nav-help span, .nav-new-label { display: none; }
  .nav-help { padding: 0 10px; }
  .nav-link, .nav-trigger { padding: 0 8px; }
}
/* ---------- Hulppagina (#91) ---------- */
.help-toc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: .5rem; }
.help-toc a { padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); text-decoration: none; font-size: .92rem; }
.help-toc a:hover { border-color: var(--accent); color: var(--accent); }
.help .prose h2 { scroll-margin-top: 80px; }
/* ---------- Overzicht (#84) ---------- */
.overview .ov-tabs { margin-top: .25rem; }
.overview > section > h2.tl-month-title, .overview #geweest summary span:first-child { font-size: 1.05rem; text-transform: none; letter-spacing: 0; color: var(--ink); }
.tl-more > summary { text-decoration: none; }
/* Desktop: "+ Nieuw" staat al in het menu; de knop op de pagina alleen op de telefoon (vaste plusknop). */
@media (min-width: 641px) { .overview .plus-menu { display: none; } }
.ov-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -.25rem; }
.ov-kinds a { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .88rem; }
.ov-kinds a:hover { color: var(--ink); }
.ov-kinds a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.ov-kind-count { font-variant-numeric: tabular-nums; opacity: .7; font-weight: 700; }
/* ---------- Eventpagina: lijstje (#87/#88) en vast sectiemenu (#89) ---------- */
.event-list-more summary { cursor: pointer; color: var(--muted); }
.event-list-more form { margin-top: .75rem; }
.hub-chips { position: sticky; top: var(--header-h, 61px); z-index: 4; background: var(--bg); padding-top: 8px; padding-bottom: 8px; box-shadow: 0 6px 8px -8px rgba(0,0,0,.25); }
@media (min-width: 700px) { .hub-chips { padding-top: 8px; padding-bottom: 8px; } }
.hub-grid section[id], .hub-main > section[id], #mijn-lijstje, #deelnemers, #info, #berichten, #lootje { scroll-margin-top: calc(var(--header-h, 61px) + 64px); }
/* ==========================================================================
   Foto kiezen en bijsnijden (profielfoto, omslagfoto) – zie public/js/app.js
   ========================================================================== */
.crop-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px; border: 2px dashed var(--line); border-radius: var(--radius-sm); }
.crop-pick[hidden], .crop[hidden] { display: none; }
.crop-drop-hint { display: none; }
@media (hover: hover) and (pointer: fine) { .crop-drop-hint { display: inline; } }
[data-crop-form].is-dragover .crop-pick,
[data-crop-form].is-dragover .crop-frame { border-color: var(--accent); background: var(--accent-soft); }
.crop { display: grid; gap: 10px; }
.crop-frame { position: relative; overflow: hidden; width: 100%; max-width: 560px; aspect-ratio: 16 / 9; background: var(--bg-2); border: 2px solid var(--line); border-radius: var(--radius-sm); touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.crop-frame.is-square { aspect-ratio: 1; max-width: 280px; }
.crop-frame.is-dragging { cursor: grabbing; }
.crop-frame:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.crop-img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; user-select: none; -webkit-user-drag: none; will-change: transform; }
@media (prefers-reduced-motion: no-preference) { .crop-img.is-smooth { transition: transform .15s ease-out; } }
.crop-mask { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }
/* Rond kader: alles buiten de cirkel donker (opgeslagen wordt het vierkant eromheen). */
.crop-frame.is-round .crop-mask { border-radius: 50%; box-shadow: 0 0 0 999px rgba(0, 0, 0, .5), inset 0 0 0 2px rgba(255, 255, 255, .85); }
.crop-zoom { display: flex; align-items: center; gap: 8px; max-width: 420px; }
.crop-range { flex: 1; min-width: 0; min-height: 40px; accent-color: var(--accent); }
.crop-zoom-btn { min-width: 40px; min-height: 40px; padding: 0; font-size: 1.2rem; line-height: 1; }
.crop-actions .btn { min-height: 40px; }
/* ---------- einde foto kiezen en bijsnijden ---------- */

/* ---------- Eventpagina: waar & wanneer onder de kop, eigen wensen zichtbaar ---------- */
.hub-hero + .hub-info { margin-top: 12px; margin-bottom: 8px; }
.event-list-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.event-list-items li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; background: var(--surface); border-radius: var(--radius-sm); border: 1px solid var(--line); min-width: 0; }
.event-list-items li span:first-child { min-width: 0; overflow-wrap: anywhere; }


/* ---------- Eventpagina: tabbladen ---------- */
.hub-panel { margin-top: 1.5rem; max-width: 760px; margin-left: auto; margin-right: auto; scroll-margin-top: calc(var(--header-h, 61px) + 70px); }
.hub-panel [id] { scroll-margin-top: calc(var(--header-h, 61px) + 70px); }
html:not(.has-tabs) .hub-panel + .hub-panel { border-top: 1px solid var(--line); padding-top: 1.5rem; }
/* ---------- Waar & wanneer: compact onder de kop ---------- */
.hub-info { margin-top: 10px; display: grid; gap: 6px; }
.hub-facts-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.hub-facts-row li { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: .92rem; font-weight: 500; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.hub-facts-row .hub-route { font-weight: 600; font-size: .88rem; }
.hub-more summary { cursor: pointer; color: var(--ink-2); font-size: .92rem; padding: 4px 2px; min-height: 36px; display: flex; align-items: center; }
.hub-more[open] { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 14px 12px; }
.hub-more .note { margin: 6px 0; }
.hub-more .hub-extra-text { margin: 6px 0 0; white-space: pre-line; }
.hub-more summary::before { content: "💬"; margin-right: 6px; }
.hub-more summary::after { content: "▾"; margin-left: 6px; color: var(--muted); }
.hub-more[open] summary::after { content: "▴"; }

/* ---------- Regel "Jouw lootje" onder de kop (na onthullen) ---------- */
.hub-lootje-btn { min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.hub-lootje-btn:focus-visible, .hub-lootje-stat:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hub-lootje-stat { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 600; font-size: .9rem; }
.hub-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); display: inline-grid; place-items: center; font-size: .75rem; }
/* Na onthullen staat de naam in de regel: het grote lootje-kaartje mag weg. */
.lootje-in-regel .reveal[open] > .stack-lg > .reveal-card { display: none; }
.reveal-line { display: none; margin: 0; font-size: 1.15rem; }
.lootje-in-regel .reveal[open] .reveal-line { display: block; }
.lootje-in-regel #tab-lootje .alert-info { display: none; }
/* Waar & wanneer binnen de kop (bij de titel) */
.hub-hero-text .hub-info { margin-top: 12px; }
.hub-hero-text .hub-facts-row li { background: var(--bg); }
.hub-hero.no-cover .hub-hero-text .hub-facts-row { justify-content: center; }
.hub-hero.no-cover .hub-hero-text .hub-more summary { justify-content: center; }
.hub-hero-text .hub-more { text-align: left; }
.hub-facts-row li { display: inline-block; line-height: 1.45; }
.hub-facts-row li > * { margin-right: 2px; }
.hub-facts-row .hub-route { margin-left: 6px; white-space: nowrap; }
.hub-facts-row .hub-address { display: inline; }
.hub-facts-row li { border-radius: 14px; }

.hub-cover { height: auto; display: block; } /* breedte/hoogte-attributen mogen de 16:9 niet overschrijven */

/* ---------- Kop: foto boven, daaronder titel met datum, adres en bedrag als gewone tekst ---------- */
.hub-hero { background: var(--surface); }
.hub-hero.no-cover { background: var(--surface); border: 1px solid var(--line); }
.hub-hero-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 22px; text-align: left; }
.hub-hero-text > * + * { margin-top: 0; }
.hub-hero-text .eyebrow { flex-basis: 100%; }
.hub-hero-text .hub-info { margin: 0; flex: 1 1 320px; min-width: 0; }
.hub-hero-text .hub-facts-row { display: flex; flex-wrap: wrap; gap: 2px 0; color: var(--ink-2); font-size: 1rem; }
.hub-hero-text .hub-facts-row li { display: inline; padding: 0; border: 0; border-radius: 0; background: none; font-weight: 500; line-height: 1.5; }
.hub-hero-text .hub-facts-row li + li::before { content: "·"; margin: 0 10px; color: var(--muted); }
.hub-hero-text .hub-facts-row .hub-route { margin-left: 6px; font-size: .92rem; }
.hub-hero-text .hub-more { flex-basis: 100%; }
.hub-hero.no-cover { text-align: left; padding: 0; }
.hub-hero.no-cover .hub-hero-emoji { display: none; }
.hub-hero.no-cover .hub-hero-text .hub-facts-row, .hub-hero.no-cover .hub-hero-text .hub-more summary { justify-content: flex-start; }
@media (max-width: 640px) { .hub-hero-text { display: block; } .hub-hero-text .hub-info { margin-top: 4px; } }
.hub-hero-text .hub-facts-row .hub-route { display: inline; margin: 0 0 0 6px; }
@media (max-width: 640px) {
  .hub-hero-text .hub-facts-row { display: block; }
  .hub-hero-text .hub-facts-row li { display: block; }
  .hub-hero-text .hub-facts-row li + li::before { content: none; }
}

/* ---------- Twee vakken onder de kop: Mijn lootje en Voor mij (+ Groep), tegelijk de tabbladen (participant.ejs) ----------
   Het hele vak is klikbaar (de link is uitgerekt over het vak); knoppen en aantallen liggen erboven. */
.hub-vakken { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.hub-vak { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding: 12px 14px; border-radius: 16px; border: 2px solid transparent; }
.hub-vak-lootje { background: var(--accent-soft); }
.hub-vak-ik { background: #ece8f7; }
.hub-vak-groep { background: var(--bg-2); border-color: var(--line); }
.hub-vak-link { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); text-decoration: none; font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.hub-vak-link::after { content: ''; position: absolute; inset: 0; border-radius: 14px; }
.hub-vak-link:focus-visible { outline: none; }
.hub-vak:has(> .hub-vak-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.hub-vak:has(> .hub-vak-link[aria-selected="true"]) { border-color: var(--ink); box-shadow: var(--shadow); }
.hub-vak:has(> .hub-vak-link[aria-selected="true"])::after { content: ''; position: absolute; left: 50%; bottom: -9px; width: 14px; height: 14px; background: inherit; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateX(-50%) rotate(45deg); }
.hub-vak-name { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 1.15rem; font-weight: 800; color: var(--ink); min-width: 0; }
.hub-vak-name[hidden] { display: none; }
.hub-vak-name strong { letter-spacing: .02em; }
.hub-vak-name[data-lootje-placeholder] { font-size: .95rem; font-weight: 600; color: var(--ink-2); }
.hub-vak-sub { font-size: .88rem; font-weight: 600; color: var(--ink-2); }
.hub-vak-wait { font-weight: 700; color: var(--ink-2); }
.hub-vak-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.hub-vak .hub-lootje-btn, .hub-vak .hub-lootje-stat { position: relative; z-index: 1; }
.hub-vak-ik .hub-badge { background: #6b5bb5; color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hub-vak-ik { background: #2a2540; } }
:root[data-theme="dark"] .hub-vak-ik { background: #2a2540; }
@media (max-width: 640px) {
  .hub-vakken { gap: 6px; }
  .hub-vak { padding: 10px 8px; }
  .hub-vak-link { font-size: .72rem; letter-spacing: .03em; flex-wrap: wrap; }
  .hub-vak-name { font-size: 1.02rem; }
  .hub-vak-sub { display: none; }
}
@media (max-width: 480px) { .hub-stat-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .hub-lootje-stat { padding: 0 10px; } }

/* Vóór de trekking: de gokkast in rust in Mijn lootje. */
.reveal-wait { text-align: center; }
.slot-rust { opacity: .6; filter: grayscale(.5); }
.slot-rust .slot-item { color: var(--muted); }
.reveal-wait-title { margin-top: 12px; }
.reveal-wait a { color: inherit; font-weight: 700; text-decoration: underline; }

/* Kop: links het budget (groot, met titel), rechts datum en tijd met daaronder het adres. */
.hub-hero-text { align-items: center; }
.hub-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.hub-budget { margin: 0; display: grid; justify-items: start; padding: 6px 14px; border-radius: 14px; background: var(--accent-soft); line-height: 1.15; }
.hub-budget-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); }
.hub-budget-amount { font-size: 1.45rem; font-weight: 800; color: var(--ink); }
.hub-hero-text .hub-facts-row { display: grid; gap: 2px; }
.hub-hero-text .hub-facts-row li { display: block; }
.hub-hero-text .hub-facts-row li + li::before { content: none; }
.hub-hero-text .hub-when { font-weight: 600; color: var(--ink); }


/* Thema-versiering (data-decor): zie public/css/decor.css, alleen geladen op pagina's met versiering. */
.hub-hero, .list-hero { position: relative; }
/* Beheerpagina compact: minder witruimte, inklapbare blokken met een samenvatting. */
.ga-page.stack > * + * { margin-top: 1rem; }
.ga-head h1 { margin-bottom: .2rem; }
.ga-head p { margin: .2rem 0; }
.ga-page .card { padding: 16px; }
.ga-page .card.stack > * + * { margin-top: .75rem; }
.fold > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-height: 44px; padding-right: 28px; position: relative; align-content: center; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: '＋'; color: var(--muted); position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.fold[open] > summary::after { content: '－'; }
.fold > summary .card-title { margin: 0; }
.fold-sum { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.fold-body { margin-top: .75rem; }
.draw-mode-set { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.draw-mode-set legend { width: 100%; margin-bottom: 4px; }
.draw-mode-set .check { margin: 0; }
.ga-page .rsvp-tally li { padding: 6px 10px; flex-direction: row; align-items: baseline; gap: 6px; }
.ga-page .rsvp-tally strong { font-size: 1.1rem; }
.nudge-all { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 8px 12px; background: var(--bg-2); border-radius: var(--radius-sm); }
.people-compact .person { padding: 8px 0; gap: 4px 12px; }
.people-compact .avatar { width: 32px; height: 32px; font-size: .9rem; }
.people-compact .person-status { align-items: center; }
.people-compact .person-more > summary { min-height: 32px; }
.nudge-btn { white-space: nowrap; }
@media (max-width: 560px) {
  .people-compact .person { grid-template-columns: 1fr; }
  .people-compact .person-status { justify-content: flex-start; padding-left: 44px; }
  .people-compact .person-more { padding-left: 44px; }
  .ga-page .rsvp-tally li { flex-direction: column; gap: 0; }
}

/* Voor mij: lijstje en berichten naast elkaar op brede schermen */
.ik-duo { display: grid; gap: 24px; align-items: stretch; }
/* Even hoge blokken naast elkaar: de kaart vult de kolom, het berichtformulier staat onderaan. */
.ik-duo > .hub-section { display: flex; flex-direction: column; }
.ik-duo > .hub-section > .card:last-child { flex: 1; }
.ik-duo .hub-chat { display: flex; flex-direction: column; }
.ik-duo .hub-chat > .chat { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.ik-duo .hub-chat .chat-log { flex: 0 1 auto; }
.ik-duo .hub-chat .chat-form { margin-top: auto; }
.ik-duo > * { min-width: 0; }
@media (min-width: 900px) {
  .hub-panel:has(> .ik-duo), .hub-panel:has(.reveal[open] .ik-duo) { max-width: 1100px; }
  .ik-duo { grid-template-columns: 1fr 1fr; }
  /* De berichtenkaart heeft zelf al een kop; zo beginnen beide kaarten op dezelfde hoogte. */
  .ik-duo #berichten-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ik-duo #berichten-title + .card { margin-top: 0; }
}
/* Lootje: wensen en berichten als twee even hoge kaarten naast elkaar. */
.ik-duo > .lootje-wensen { display: flex; flex-direction: column; }
/* Wensenlijstjes naast de berichten: zelfde maximale hoogte, scrollen binnen de kaart (#164). */
.lootje-wensen .items-compact, .event-list-items { max-height: min(60vh, 460px); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding-right: 4px; }

/* ==========================================================================
   Beheerpagina (groep): Groep (inklapbaar), Deelnemers met uitsluitingen en trekken,
   één Opslaan-knop onderaan. Velden staan naast elkaar in een raster.
   ========================================================================== */
.ga-page { padding-bottom: 0; }
.ga-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 1rem; }
.ga-head .btn { white-space: nowrap; }
.ga-page .ga-card { padding: 0; margin: 0 0 16px; }
.ga-card > summary, .ga-card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 14px 16px; min-height: 52px; }
.ga-card > summary { cursor: pointer; list-style: none; position: relative; padding-right: 40px; }
.ga-card > summary::-webkit-details-marker { display: none; }
.ga-card > summary::after { content: '▾'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); transition: transform .15s; }
.ga-card:not([open]) > summary::after { transform: translateY(-50%) rotate(-90deg); }
.ga-card .card-title { margin: 0; }
.ga-sum { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 200px; }
.ga-card[open] > summary .ga-sum { display: none; }
.ga-body { border-top: 1px solid var(--line); padding: 16px; display: grid; gap: 14px; }
.ga-body > * { margin: 0; }

.ga-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px 12px; }
.ga-f { grid-column: span 12; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ga-f > label, .ga-label { font-size: .8rem; font-weight: 600; color: var(--ink-2); }
.ga-f .muted { font-weight: 400; }
.ga-f .input { min-height: 40px; padding: 7px 10px; font-size: 1rem; }
.ga-f textarea.input { min-height: 64px; }
.ga-f > .small { margin: 2px 0 0; }
@media (min-width: 720px) {
  .ga-c2 { grid-column: span 2; } .ga-c4 { grid-column: span 4; } .ga-c6 { grid-column: span 6; }
}
.ga-pair { display: flex; gap: 6px; min-width: 0; }
.ga-pair .input { min-width: 0; }
.ga-date { flex: 3; } .ga-time { flex: 2; }
.ga-cover { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.ga-thumb { width: 112px; aspect-ratio: 16 / 9; height: auto; min-height: 0; flex: none; border-radius: 8px; padding: 0; font-size: 1.4rem; }
.ga-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ga-cover-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; flex: 1 1 260px; }
.ga-cover-form .input-file { flex: 1 1 180px; min-width: 0; min-height: 36px; padding: 4px 6px; font-size: .85rem; }
.ga-cover-form .chat-error { flex-basis: 100%; margin: 0; }
.ga-toggles { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: .92rem; }
.ga-toggles .check { min-height: 32px; }
.ga-decor-style, .decor-pick-style { display: inline-flex; align-items: center; gap: 8px; }
.decor-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; }
.decor-pick-style .input { width: auto; min-height: 40px; }
.owner-bar { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--bg-2); font-size: .92rem; text-align: center; }
.owner-bar a { font-weight: 600; }
.ga-decor-style .input { min-height: 36px; padding-top: 4px; padding-bottom: 4px; width: auto; }

.ga-tally { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.ga-nudge { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.ga-people { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.ga-person { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto 36px; gap: 4px 10px; align-items: center; padding: 6px 8px 6px 10px; border-top: 1px solid var(--line); }
.ga-person:first-child { border-top: 0; }
.ga-person .avatar { width: 32px; height: 32px; font-size: .85rem; }
.ga-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0; }
.ga-who strong { white-space: nowrap; }
.ga-mail { color: var(--muted); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 100%; }
.ga-meta { color: var(--muted); font-size: .8rem; flex-basis: 100%; }
.ga-tags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.ga-acts { display: flex; }
.ga-icon-btn { min-width: 36px; padding: 4px 8px; }
.ga-more { display: contents; }
.ga-more > summary { grid-column: 5; grid-row: 1; list-style: none; cursor: pointer; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; color: var(--muted); font-size: 1.1rem; }
.ga-more > summary::-webkit-details-marker { display: none; }
/* Nieuwere browsers zetten de inhoud van <details> in een eigen blok (::details-content). Met display: contents
   op .ga-more kwam dat blok in de smalle avatarkolom (32px): het menu over de hele breedte laten lopen. */
.ga-more::details-content { grid-column: 1 / -1; }
.ga-more > summary:hover, .ga-more[open] > summary { background: var(--bg-2); color: var(--ink); }
.ga-more-body { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px; margin: 4px 0 2px; background: var(--bg); border-radius: var(--radius-sm); }
.ga-more-body .row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ga-add { background: var(--bg); display: block; }
.ga-add-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; }
.ga-add-form .input { min-height: 36px; padding: 6px 10px; }
@media (max-width: 600px) {
  .ga-person { grid-template-columns: 32px minmax(0, 1fr) auto 36px; }
  .ga-tags { grid-column: 2 / 4; grid-row: 2; justify-content: flex-start; }
  .ga-acts { grid-column: 3; grid-row: 1; }
  .ga-more > summary { grid-column: 4; }
  .ga-add-form { grid-template-columns: 1fr; }
}

.ga-sub-title { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0; font-family: var(--font); }
.ga-sub { display: grid; gap: 8px; }
.ga-sub .small { margin: 0; }
.ga-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ga-chip { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 999px; padding: 2px 2px 2px 12px; font-size: .9rem; background: var(--surface); }
.ga-chip button { border: 0; background: none; color: var(--muted); cursor: pointer; width: 28px; height: 28px; border-radius: 999px; }
.ga-chip button:hover { background: var(--bg-2); color: var(--ink); }
.ga-excl-add { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .9rem; }
.ga-excl-add .input { width: auto; min-height: 34px; padding: 4px 30px 4px 8px; font-size: .9rem; }
.ga-excl-add .check { min-height: 34px; }

.ga-draw { display: grid; gap: 8px; padding: 10px 12px; background: var(--bg); border-radius: var(--radius-sm); }
.ga-draw > * { margin: 0; }
.ga-draw-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ga-draw-row .progress { flex: 1 1 120px; max-width: 240px; }
.ga-seg { border: 0; margin: 0; padding: 3px; display: inline-flex; flex-wrap: wrap; gap: 2px; background: var(--bg-2); border-radius: 999px; }
.ga-seg label { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; font-size: .88rem; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.ga-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ga-seg label:has(input:checked) { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); }
.ga-seg label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }

.ga-bar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 8px -16px 0; padding: 10px 16px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px); border-top: 1px solid var(--line); }
.ga-bar #ga-save { margin-left: auto; }
.ga-bar #ga-save .btn { padding-inline: 24px; }
@media (max-width: 520px) { .ga-bar-note { display: none; } }

/* Omslagfoto bovenaan een openbaar verlanglijstje (lists.cover_key): foto boven, tekst eronder. */
.list-hero.has-cover { padding-top: 0; overflow: hidden; }
.list-cover { display: block; width: calc(100% + 32px); margin: 0 -16px 14px; height: auto; aspect-ratio: 16 / 9; max-height: 380px; object-fit: cover; background: var(--bg-2); }

/* Beheerpagina: "Volgend jaar weer?" na een jaarlijks lootjesfeest (jaarherinnering). */
.ga-next-year { border-color: var(--accent); background: var(--accent-soft); margin-bottom: 14px; }

/* Groepschat in het tabblad Groep */
.hub-chat-groep { border-top: 4px solid var(--line); }

/* Productzoeker: filters voor de webshops (categorie, voor wie, prijs, winkel, sortering) */
.search-form:has(.search-filters) { flex-wrap: wrap; }
.search-filters { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.search-filters[hidden] { display: none; }
.search-form .search-filters .input { flex: 1 1 140px; width: auto; min-width: 0; min-height: 38px; padding: 6px 10px; font-size: .88rem; }

/* Eigen lijstje op de groepspagina: per wens foto, titel, prijs en een knop naar de winkel */
.event-list-items li { align-items: center; padding: 8px; }
.event-list-img { flex: none; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; background: var(--bg-2); display: grid; place-items: center; font-size: 1.4rem; }
.event-list-img img { width: 100%; height: 100%; object-fit: cover; }
.event-list-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.event-list-name { overflow-wrap: anywhere; font-weight: 600; }
.event-list-items .btn { flex: none; }

/* Compacte wensen (lijstje van je lootje op de groepspagina): één rij per wens, knoppen rechts */
.items-compact { gap: 6px; }
.items-compact .item { grid-template-columns: 52px 1fr; gap: 10px; padding: 8px 10px; align-items: center; border-radius: var(--radius-sm); }
.items-compact .item-placeholder { font-size: 1.3rem; }
.items-compact .item-body { display: grid; grid-template-columns: minmax(9rem, 1fr) auto; column-gap: 10px; row-gap: 2px; align-items: center; }
.items-compact .item-title { font-size: .95rem; grid-column: 1; }
.items-compact .item-meta { grid-column: 1; font-size: .82rem; gap: 4px 8px; }
.items-compact .item-meta .badge { font-size: .72rem; }
.items-compact .item-note { grid-column: 1; font-size: .82rem; margin: 0; }
.items-compact .item-actions { grid-column: 2; grid-row: 1 / span 3; margin: 0; flex-wrap: wrap; justify-content: flex-end; max-width: 280px; }
.items-compact .item-actions .btn, .items-compact .item-actions .badge { white-space: nowrap; }
/* Gereserveerd (Jij geeft dit, Gekocht, Annuleren): te veel voor naast de titel, dus een eigen regel eronder. */
.items-compact .item-actions:has(.badge-ok) { grid-column: 1 / -1; grid-row: auto; max-width: none; justify-content: flex-start; }
.items-compact .item-disclosure { grid-column: 1 / -1; margin: 0; }
@media (max-width: 560px) {
  .items-compact .item-body { grid-template-columns: minmax(0, 1fr); }
  .items-compact .item-actions { grid-column: 1; grid-row: auto; flex-wrap: wrap; max-width: none; justify-content: flex-start; }
}

/* Productzoeker: uitklapbare resultaten met meer info, direct toevoegen (meerdere achter elkaar) */
.search-result { display: block; padding: 0; }
.search-result-head { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px; cursor: pointer; list-style: none; }
.search-result-head::-webkit-details-marker { display: none; }
.search-result-text strong { display: block; overflow-wrap: anywhere; }
.search-result-meta { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 2px; }
.search-result-price { font-weight: 700; }
.search-result-more { padding: 0 10px 10px 66px; display: grid; gap: 6px; }
.search-result-more p { margin: 0; }
.search-result.is-added { border-color: var(--accent); background: var(--accent-soft); }
.search-added { margin: 0; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--accent-soft); font-weight: 600; font-size: .9rem; }
@media (max-width: 480px) { .search-result-more { padding-left: 10px; } }

/* Wens: uitklapbare details voor bezoekers, en "Gekocht" afvinken */
.item-details summary { cursor: pointer; color: var(--muted); width: fit-content; }
.item-details[open] summary { margin-bottom: 6px; }
.item-details-body { display: grid; grid-template-columns: minmax(0, 110px) 1fr; gap: 12px; align-items: start; }
.item-details-body:not(:has(img)) { grid-template-columns: 1fr; }
.item-details-img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.item-facts { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; }
.item-facts dt { color: var(--muted); }
.item-facts dd { margin: 0; overflow-wrap: anywhere; }
.item-facts .item-facts-wide { grid-column: 1 / -1; }
.item-facts dt.item-facts-wide { margin-top: 6px; }
.item-product-info { line-height: 1.5; }
.btn.is-bought { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.items-compact .item-details { grid-column: 1 / -1; }
@media (max-width: 480px) { .item-details-body { grid-template-columns: 1fr; } .item-details-img { max-width: 220px; } }
.event-list-actions { display: flex; align-items: center; gap: 4px; flex: none; }
.search-result-head .search-undo { grid-column: 3; justify-self: end; }

/* Grotere foto bij "meer info" (zoekresultaat) en bij Details van een wens */
.search-result .search-result-big { width: 100%; height: auto; max-width: 320px; aspect-ratio: 1; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.item-details-body { grid-template-columns: minmax(0, 220px) 1fr; }
.items-compact .item-details-body { grid-template-columns: minmax(0, 200px) 1fr; }
@media (max-width: 560px) { .item-details-body, .items-compact .item-details-body { grid-template-columns: 1fr; } .item-details-img { max-width: 320px; } }

/* Beta-balk (LAUNCH_MODE=beta): bezoekers kunnen kijken, aanmaken kan nog niet. */
.beta-bar { margin: 0; padding: .5rem 1rem; text-align: center; font-size: .9rem; background: var(--accent-soft); color: var(--ink); border-bottom: 1px solid var(--line); }
.beta-bar a { color: inherit; font-weight: 600; }
.beta-bar-tester { background: var(--info-soft, var(--accent-soft)); }

/* Cadeau-ideeën (src/views/partials/gift_ideas.ejs): compacte rijen met foto, naam, prijs en knop. */
.gift-ideas { padding: 12px; background: var(--bg-2); border-radius: var(--radius-sm); }
.gift-ideas-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: min(560px, 60vh); overflow-y: auto; }
.gift-idea { display: flex; align-items: center; gap: 10px; padding: 6px 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); min-width: 0; }
.gift-idea-img { flex: none; width: 48px; height: 48px; border-radius: 8px; overflow: hidden; background: var(--bg-2); display: grid; place-items: center; }
.gift-idea-img img { width: 100%; height: 100%; object-fit: cover; }
.gift-idea-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gift-idea-title { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gift-idea .btn { flex: none; white-space: nowrap; }

/* Paginering onder de zoekresultaten. */
.search-pager { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 6px 0 2px; }
/* "Zelf een wens toevoegen": knop met popup (HTML-popover). */
.add-own { margin: 4px 0 0; }
.popup { position: fixed; inset: 0; margin: auto; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.popup::backdrop { background: rgba(20, 16, 12, .45); }
.popup-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }