/* Step Out & Play: landing */
.sop { display: flex; flex-direction: column; gap: var(--space-16); padding-bottom: var(--space-16); }
.sop-hero { display: grid; gap: var(--space-8); align-items: center; padding-top: var(--space-8); }
.sop-kicker { font-family: var(--font-heading); font-weight: 800; font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-link); margin: 0 0 var(--space-3); }
.sop-titel { font-family: var(--font-heading); font-weight: 900; font-size: clamp(2.75rem, 11vw, 5rem); line-height: .95; letter-spacing: var(--tracking-tight); text-transform: uppercase; color: var(--color-text-heading); margin: 0; }
.sop-amp { color: var(--color-primary); }
.sop-lead { font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--color-text-secondary); margin: var(--space-5) 0 0; max-width: 34ch; }
.sop-acties { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-8); }
.sop-cta { min-height: var(--tap-target); padding-inline: var(--space-8); font-size: var(--text-base); }
.sop-noot { font-size: var(--text-sm); color: var(--color-text-muted); }
.sop-veld { position: relative; aspect-ratio: 4 / 3.4; border-radius: var(--radius-2xl); background: var(--asfalt); overflow: hidden; box-shadow: var(--shadow-lg); }
.sop-straat { position: absolute; background: rgba(255,255,255,.07); }
.sop-s1 { left: 0; right: 0; top: 38%; height: 3px; transform: rotate(-8deg); }
.sop-s2 { top: 0; bottom: 0; left: 58%; width: 3px; transform: rotate(12deg); }
.sop-s3 { left: 0; right: 0; top: 74%; height: 2px; transform: rotate(4deg); }
.sop-park { position: absolute; width: 46%; height: 34%; left: 34%; top: 48%; border-radius: 40% 60% 55% 45%; background: var(--park-groen); opacity: .35; }
.sop-strand { position: absolute; width: 22%; left: -4%; top: -10%; bottom: -10%; background: var(--zomer-geel); opacity: .16; transform: rotate(14deg); }
.sop-cirkel { position: absolute; width: 38%; aspect-ratio: 1; left: 31%; top: 31%; border: 2px solid rgba(255,255,255,.14); border-radius: 50%; }
.sop-cirkel::before { content: ""; position: absolute; top: -40%; bottom: -40%; left: 50%; width: 2px; background: rgba(255,255,255,.1); }
.sop-pin { position: absolute; display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-4); border-radius: var(--radius-lg); background: var(--asfalt-800, #2a2a2a); border: 2px solid var(--sport, var(--color-primary)); color: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.35); animation: sop-zweef 3.2s ease-in-out infinite; }
.sop-pin::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--sport, var(--color-primary)); box-shadow: 0 0 0 4px rgba(255,255,255,.08); }
.sop-pin-sport { font-family: var(--font-heading); font-weight: 800; font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--sport, var(--color-primary)); }
.sop-pin-naam { font-weight: 600; font-size: var(--text-sm); white-space: nowrap; }
.sop-pin-voetbal { --sport: var(--sport-voetbal); left: 8%; top: 12%; }
.sop-pin-basketbal { --sport: var(--sport-basketbal); right: 7%; top: 44%; animation-delay: -1.1s; }
.sop-pin-beach { --sport: var(--sport-beachvolleybal); left: 14%; bottom: 10%; animation-delay: -2.2s; }
@keyframes sop-zweef { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .sop-pin { animation: none; } }
.sop-h2 { font-family: var(--font-heading); font-weight: 900; font-size: var(--text-3xl); text-transform: uppercase; letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-6); color: var(--color-text-heading); }
.sop-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.sop-stap { position: relative; padding: var(--space-6); padding-left: calc(var(--space-6) + 3rem); background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); }
.sop-stap p { margin: var(--space-1) 0 0; color: var(--color-text-secondary); line-height: var(--leading-normal); }
.sop-h3 { font-family: var(--font-heading); font-weight: 800; font-size: var(--text-lg); margin: 0; }
.sop-nr { position: absolute; left: var(--space-5); top: var(--space-6); display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--color-primary); color: var(--color-text-on-primary); font-family: var(--font-heading); font-weight: 900; }
.sop-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.sop-chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-target); padding: 0 var(--space-5); border-radius: var(--radius-pill); background: var(--color-bg-surface); border: 2px solid var(--sport); font-weight: 600; }
.sop-chip::before { content: ""; width: .625rem; height: .625rem; border-radius: 50%; background: var(--sport); }
.sop-c-voetbal { --sport: var(--sport-voetbal); } .sop-c-basketbal { --sport: var(--sport-basketbal); }
.sop-c-tafeltennis { --sport: var(--sport-tafeltennis); } .sop-c-tennis { --sport: var(--sport-tennis); }
.sop-c-beachvolleybal { --sport: var(--sport-beachvolleybal); } .sop-c-skaten { --sport: var(--sport-skaten); }
.sop-c-buitenfitness { --sport: var(--sport-buitenfitness); } .sop-c-jeu { --sport: var(--sport-jeu-de-boules); }
.sop-slot { padding: var(--space-10) var(--space-6); border-radius: var(--radius-2xl); background: var(--asfalt); color: #fff; text-align: center; }
.sop-h2-licht { color: #fff; }
.sop-slot-tekst { color: var(--asfalt-200, #c2bab1); max-width: 38ch; margin: 0 auto var(--space-8); line-height: var(--leading-relaxed); }
@media (min-width: 60rem) {
.sop-hero { grid-template-columns: 1.05fr 1fr; gap: var(--space-12); padding-top: var(--space-16); }
.sop-lijst { grid-template-columns: repeat(3, 1fr); }
}
.spk { display: flex; flex-direction: column; gap: var(--space-6); padding-block: var(--space-6) var(--space-12); }
.spk-lijn { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--space-1); height: var(--space-1); border-radius: var(--radius-pill); overflow: hidden; }
.spk-lijn span { display: block; }
.spk-voetbal { background: var(--sport-voetbal); }
.spk-basketbal { background: var(--sport-basketbal); }
.spk-tafeltennis { background: var(--sport-tafeltennis); }
.spk-tennis { background: var(--sport-tennis); }
.spk-beach { background: var(--sport-beachvolleybal); }
.spk-skaten { background: var(--sport-skaten); }
.spk-fitness { background: var(--sport-buitenfitness); }
.spk-boules { background: var(--sport-jeu-de-boules); }
.spk-kaart { width: 100%; min-width: 0; }
.spk-kaart .view-head { margin-top: 0; }
.spk-onder:empty { display: none; }
@media (max-width: 640px) {
.spk { gap: var(--space-4); padding-block: var(--space-4) var(--space-8); }
}
/* kit: standaard-opmaak van de registratie-kit */
/* Eén vormtaal voor de meegeleverde pagina's (beheer, mijn gegevens, wachtwoord, activeren):
alleen design-systeem-tokens, dus elk project krijgt 'm in z'n eigen look. */
.kit-pagina { display: flex; flex-direction: column; gap: var(--space-8); padding-top: var(--space-2); }
.kit-pagina .kit-kop { max-width: 46rem; }
.kit-pagina .kit-eyebrow { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-primary-dim); }
.kit-pagina .kit-titel { margin: 0 0 var(--space-3); font-family: var(--font-heading); font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--color-text-heading); }
.kit-pagina .kit-lead { margin: 0; max-width: 40rem; font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--color-text-secondary); }
.kit-pagina .kit-paneel { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); min-width: 0; }
.kit-pagina .kit-paneel-primair { border-top: 3px solid var(--color-primary); }
.kit-pagina .kit-voet { margin: 0; font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--color-text-muted); }
.kit-pagina .kit-vrij { margin: 0; }
/* Een formulier of lijst ín een paneel is geen tweede kaart. */
.kit-pagina .kit-paneel .inline-form { margin: 0; max-width: none; padding: 0; background: none; border: 0; box-shadow: none; }
.kit-pagina .inline-form-title { font-size: var(--text-lg); margin-bottom: var(--space-4); }
.kit-pagina .view { gap: var(--space-4); }
.kit-pagina .vh-title h1 { font-size: var(--text-xl); }
/* Beheer: de gebruikers zijn het werk (breed), registreren en de rollen staan ernaast. */
.kit-beheer .kit-raster { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr); align-items: start; }
.kit-beheer .kit-zij { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.kit-beheer .kit-hoofd .table-wrap { box-shadow: var(--shadow-md); }
/* Mijn gegevens en wachtwoord: op de as van de app, één rustig paneel met uitleg ernaast. */
.kit-account .kit-raster { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 36rem) minmax(14rem, 18rem); align-items: start; }
.kit-account .kit-uitleg { margin: 0; padding-top: var(--space-2); font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--color-text-secondary); }
/* Activeren: je komt uit een mail en hebt één taak — een gerichte kolom, kop en formulier op één as. */
.kit-activeren { max-width: 34rem; margin-inline: auto; text-align: left; }
.kit-activeren .kit-kop { max-width: none; }
/* Eén formulier op z'n eigen pagina: de paginakop zegt al wat het is — geen tweede titel erboven. */
.kit-account .inline-form-title, .kit-activeren .inline-form-title { display: none; }
@media (max-width: 900px) {
.kit-pagina { gap: var(--space-6); }
.kit-beheer .kit-raster, .kit-account .kit-raster { grid-template-columns: 1fr; }
}
/* Activiteiten als potjes: een kaart per activiteit, de kop in de sportkleur (08-10) */
.potjes { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); }
.potje { --icoon: none; display: flex; flex-direction: column; background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; }
.potje:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.potje-kop { position: relative; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); background: var(--cat, var(--color-primary)); color: var(--asfalt-900); overflow: hidden; isolation: isolate; }
.potje-kop::before { content: ""; position: absolute; z-index: -1; right: -2.6rem; top: 50%; width: 7.5rem; height: 7.5rem; transform: translateY(-50%); border: 2px solid rgba(30, 30, 30, .16); border-radius: 50%; }
.potje-kop::after { content: ""; position: absolute; z-index: -1; right: 1.15rem; top: 0; bottom: 0; width: 2px; background: rgba(30, 30, 30, .16); }
.potje-icoon { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--asfalt-900); box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); }
.potje-icoon::before { content: ""; width: 1.55rem; height: 1.55rem; background: var(--cat, #fff); -webkit-mask: var(--icoon) center / contain no-repeat; mask: var(--icoon) center / contain no-repeat; }
.potje-sport { font-family: var(--font-heading); font-weight: 900; font-size: var(--text-lg); letter-spacing: .06em; text-transform: uppercase; line-height: 1.1; }
.potje-vrij { margin-left: auto; padding: .3rem .75rem; border-radius: var(--radius-pill); background: var(--asfalt-900); color: #fff; font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
.potje-vrij .mono { font-family: var(--font-mono); font-size: var(--text-sm); }
.potje-body { flex: 1; display: grid; align-content: start; gap: var(--space-3); padding: var(--space-5); }
.potje-plek { margin: 0; font-family: var(--font-heading); font-weight: 800; font-size: var(--text-lg); line-height: 1.2; color: var(--color-text-heading); }
.potje-locatie { display: none; }
.potje-tijd { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: 0; }
.potje-tijd dt { font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }
.potje-tijd dd { margin: .15rem 0 0; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-text-heading); }
.potje-spelers { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
.potje-spelers .mono { font-family: inherit; font-weight: 700; color: var(--color-text-heading); }
.potje-acties { display: flex; gap: var(--space-3); padding: 0 var(--space-5) var(--space-5); }
.potje-acties .btn { flex: 1; justify-content: center; min-height: var(--tap-target, 48px); }
.potje-doe-mee { font-weight: 800; letter-spacing: .02em; }
.potje-doe-mee::after { content: "\2192"; margin-left: .45em; transition: transform .18s ease; }
.potje-doe-mee:hover::after { transform: translateX(3px); }
[data-sport="voetbal"] { --icoon: url("data:image/svg+xml,"); }
[data-sport="basketbal"] { --icoon: url("data:image/svg+xml,"); }
[data-sport="tafeltennis"] { --icoon: url("data:image/svg+xml,"); }
[data-sport="tennis"] { --icoon: url("data:image/svg+xml,"); }
[data-sport="beachvolleybal"] { --icoon: url("data:image/svg+xml,"); }
[data-sport="skaten"] { --icoon: url("data:image/svg+xml,"); }
[data-sport="buitenfitness"] { --icoon: url("data:image/svg+xml,"); }
[data-sport="jeu-de-boules"] { --icoon: url("data:image/svg+xml,"); }
/* Pagina Activiteit: wedstrijdkaart + medesporters + berichten (08-10). Alleen vorm; alle velden blijven gebonden. */
.act { display: grid; gap: var(--space-6); padding-bottom: var(--space-12); }
.act-terug { display: inline-flex; align-items: center; gap: .5em; justify-self: start; margin-top: var(--space-2); padding: .45rem .9rem .45rem .7rem; border-radius: var(--radius-pill); background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); color: var(--color-text-heading); font-weight: 700; font-size: var(--text-sm); text-decoration: none; box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease; }
.act-terug::before { content: "\2190"; font-size: 1.1em; transition: transform .15s ease; }
.act-terug:hover { box-shadow: var(--shadow-md); }
.act-terug:hover::before { transform: translateX(-3px); }
.act-grid { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 900px) { .act-grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); } .act-zij { position: sticky; top: var(--space-6); } }
/* De wedstrijdkaart */
.act .detail-view { --icoon: none; margin: 0; background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); overflow: hidden; }
.act .detail-view .view-head { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: var(--space-3); margin: 0; padding: var(--space-5) var(--space-6); background: var(--cat, var(--color-primary)); color: var(--asfalt-900); }
.act .detail-view .view-head::before { content: ""; flex: none; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--asfalt-900) var(--icoon-fill, none); box-shadow: 0 0 0 3px rgba(255,255,255,.35); }
.act .detail-view .view-head::after { content: ""; position: absolute; z-index: -1; right: -3rem; top: 50%; width: 10rem; height: 10rem; transform: translateY(-50%); border: 2px solid rgba(30,30,30,.16); border-radius: 50%; box-shadow: -5rem 0 0 -4.9rem rgba(30,30,30,.16); }
.act .detail-view .vh-title h1 { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--asfalt-900); opacity: .75; }
.act .detail-view .detail-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-6); margin: 0; padding: var(--space-6); }
.act .detail-view .detail-row { display: grid; gap: .2rem; margin: 0; padding: 0; border: 0; }
.act .detail-view .detail-row dt { font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }
.act .detail-view .detail-row dd { margin: 0; font-size: var(--text-base); color: var(--color-text-heading); font-weight: 600; }
.act .detail-view .detail-row dd.mono { font-family: var(--font-mono); }
/* Sport en sportplek zijn de kop van de kaart */
.act .detail-view .detail-row:nth-child(1), .act .detail-view .detail-row:nth-child(2) { grid-column: 1 / -1; }
.act .detail-view .detail-row:nth-child(1) dt, .act .detail-view .detail-row:nth-child(2) dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.act .detail-view .detail-row:nth-child(1) dd { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 900; letter-spacing: .02em; text-transform: uppercase; line-height: 1; }
.act .detail-view .detail-row:nth-child(2) { margin-top: calc(-1 * var(--space-4)); padding-bottom: var(--space-4); border-bottom: 2px solid var(--color-border-subtle); }
.act .detail-view .detail-row:nth-child(2) dd { font-size: var(--text-lg); color: var(--color-text-secondary); }
.act .detail-view .detail-row:nth-child(3) { display: none; }
.act .detail-view .detail-row:has(> dd:empty) { display: none; }
/* Medesporters: mensen, geen tabel */
.act-zij .view { margin: 0; padding: var(--space-5); background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); }
.act-zij .vh-title h1 { font-size: var(--text-xl); }
.act-zij .table-wrap { border: 0; box-shadow: none; background: none; margin: var(--space-3) 0 0; overflow: visible; }
.act-zij .data-table, .act-zij .data-table tbody { display: block; width: 100%; }
.act-zij .data-table thead { display: none; }
.act-zij .data-table tr { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border-subtle); background: none; }
.act-zij .data-table tr:last-child { border-bottom: 0; }
.act-zij .data-table td { display: block; padding: 0; border: 0; background: none; }
.act-zij .data-table td::before { display: none; content: none; }
.act-zij .data-table td.cell-primary { flex: 1; display: flex; align-items: center; gap: var(--space-3); font-weight: 700; color: var(--color-text-heading); }
.act-zij .data-table td.cell-primary::before { display: block; content: ""; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--geel-300) url("data:image/svg+xml,") center / 60% no-repeat; }
.act-zij .row-actions .btn-row { border-radius: var(--radius-pill); padding: .4rem .85rem; font-weight: 700; background: var(--oranje-50); border-color: var(--oranje-200); color: var(--oranje-800); }
.act-zij .row-actions .btn-row:hover { background: var(--oranje-100); }
/* Berichten + plaatsen: een gesprek */
.act-praat { display: grid; gap: 0; background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); overflow: hidden; }
.act-praat > * { margin: 0; }
.act-praat .view { padding: var(--space-6) var(--space-6) var(--space-2); margin: 0; }
.act-praat .vh-title h1 { font-size: var(--text-xl); }
.act-praat .q-balk { display: none; }
.act-praat .empty-state { border: 0; background: var(--asfalt-50); border-radius: var(--radius-lg); padding: var(--space-6); color: var(--color-text-muted); }
.act-praat .data-table thead { display: none; }
.act-praat .inline-form { max-width: none; margin: 0; border: 0; border-top: 1px solid var(--color-border-subtle); border-radius: 0; box-shadow: none; padding: var(--space-5) var(--space-6) var(--space-6); background: var(--asfalt-50); }
.act-praat .inline-form-title { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted); }
.act-praat .inline-form-foot { justify-content: flex-end; }
.act-praat .inline-form-foot .btn { width: auto; padding-inline: var(--space-8); }
.act .detail-view:has([data-v="voetbal"]) { --cat: var(--cat-voetbal); --icoon-fill: url("data:image/svg+xml,") center / 58% no-repeat; }
.act .detail-view:has([data-v="basketbal"]) { --cat: var(--cat-basketbal); --icoon-fill: url("data:image/svg+xml,") center / 58% no-repeat; }
.act .detail-view:has([data-v="tafeltennis"]) { --cat: var(--cat-tafeltennis); --icoon-fill: url("data:image/svg+xml,") center / 58% no-repeat; }
.act .detail-view:has([data-v="tennis"]) { --cat: var(--cat-tennis); --icoon-fill: url("data:image/svg+xml,") center / 58% no-repeat; }
.act .detail-view:has([data-v="beachvolleybal"]) { --cat: var(--cat-beachvolleybal); --icoon-fill: url("data:image/svg+xml,") center / 58% no-repeat; }
.act .detail-view:has([data-v="skaten"]) { --cat: var(--cat-skaten); --icoon-fill: url("data:image/svg+xml,") center / 58% no-repeat; }
.act .detail-view:has([data-v="buitenfitness"]) { --cat: var(--cat-buitenfitness); --icoon-fill: url("data:image/svg+xml,") center / 58% no-repeat; }
.act .detail-view:has([data-v="jeu-de-boules"]) { --cat: var(--cat-jeu-de-boules); --icoon-fill: url("data:image/svg+xml,") center / 58% no-repeat; }
.act .detail-view .view-head { justify-content: flex-start; }
.act .detail-view .detail-row { grid-template-columns: 1fr; align-items: start; }
.act-praat .toolbar { display: none; }
.act-praat .empty-state { margin-top: var(--space-3); text-align: left; }
.act-praat .form-wrapper, .act-praat .form-group, .act-praat .form-control { max-width: none; width: 100%; }
.act-praat .inline-form-foot .btn { width: auto; }
/* Smal: twee kolommen houden, en een medesporter blijft één regel */
@media (max-width: 520px) { .act .detail-view .detail-list { grid-template-columns: 1fr 1fr; gap: var(--space-4); padding: var(--space-5); } }
.act-zij .data-table tr { flex-wrap: nowrap; }
.act-zij .data-table td.cell-actions { flex: none; width: auto; }
.act-zij .row-actions { flex-direction: row; align-items: center; gap: var(--space-1); width: auto; }
.act-zij .row-actions .btn-ghost[data-open] { font-size: 0; gap: 0; padding: .35rem; min-height: 0; }
.act-zij .row-actions .btn-ghost[data-open]::after { content: none; }
.act-zij .row-actions .btn-ghost[data-open] svg { width: 1.1rem; height: 1.1rem; }
.act-zij .row-actions .btn { flex: none; }
.act-zij .data-table td.cell-actions { padding: 0; }
.act-zij .data-table td.cell-primary { padding: 0; justify-content: flex-start; text-align: left; font-size: var(--text-base); }
.act-zij .data-table td.cell-primary::before { margin: 0; }
/* Profiel: een kaart over jou, geen labellijst (08-10). Alle velden blijven gebonden. */
.profiel.inline-form { position: relative; max-width: 40rem; padding: 0; overflow: hidden; border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }
.profiel .form-wrapper { display: block; padding: 0; margin: 0; max-width: none; }
.profiel-band { height: 7.5rem; background: var(--asfalt-900); background-image: radial-gradient(circle at 78% 50%, transparent 3.2rem, rgba(255,255,255,.14) 3.2rem, rgba(255,255,255,.14) calc(3.2rem + 2px), transparent calc(3.2rem + 2px)), linear-gradient(90deg, transparent calc(78% - 1px), rgba(255,255,255,.14) calc(78% - 1px), rgba(255,255,255,.14) calc(78% + 1px), transparent calc(78% + 1px)), linear-gradient(120deg, var(--oranje-500), var(--geel-400)); background-blend-mode: normal, normal, normal; }
.profiel-kop { display: flex; align-items: flex-end; gap: var(--space-5); padding: 0 var(--space-6); margin-top: -3.5rem; }
.profiel-foto { flex: none; }
.profiel-foto .cel-thumb { display: block; width: 7.5rem; height: 7.5rem; border-radius: 50%; object-fit: cover; border: 4px solid var(--color-bg-surface); box-shadow: var(--shadow-md); background: var(--asfalt-100); }
.profiel-foto .beeld-leeg { display: grid; place-items: center; }
.profiel-wie { min-width: 0; padding-bottom: var(--space-1); }
.profiel .profiel-kicker { margin: 0; font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-muted); }
.profiel-naam { margin: .1rem 0 0; font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 900; line-height: 1.05; color: var(--color-text-heading); }
.profiel-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); margin: var(--space-2) 0 0; }
.profiel-meta div { display: flex; gap: .4em; align-items: baseline; }
.profiel-meta dt { font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }
.profiel-meta dd { margin: 0; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-text-heading); }
.profiel-sporten { margin: var(--space-6) var(--space-6) 0; padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--oranje-50); border: 1px solid var(--oranje-100); }
.profiel-label { margin: 0; font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--oranje-800); }
.profiel-sportlijst { margin: .25rem 0 0; font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-heading); }
.profiel .profiel-acties { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; padding: var(--space-5) var(--space-6) var(--space-6); border: 0; background: none; }
.profiel .profiel-acties .btn { flex: 1 1 10rem; width: auto; justify-content: center; }
.profiel .profiel-acties .btn-primary { flex-basis: 100%; }
@media (min-width: 560px) { .profiel .profiel-acties .btn-primary { flex-basis: 10rem; } }
@media (max-width: 480px) { .profiel-kop { flex-direction: column; align-items: flex-start; gap: var(--space-3); } .profiel-naam { font-size: var(--text-2xl); } }
.profiel .profiel-kop { margin-top: 0; align-items: flex-start; }
.profiel .profiel-foto { margin-top: -3.75rem; }
.profiel .profiel-foto .cel-thumb, .profiel .profiel-foto img.cel-thumb { width: 7.5rem; height: 7.5rem; max-width: none; max-height: none; border-radius: 50%; object-fit: cover; }
.profiel .profiel-wie { padding-top: var(--space-4); }
.profiel .profiel-acties .btn, .profiel .profiel-acties .btn-primary { flex: 1 1 9rem; }
@media (max-width: 480px) { .profiel .profiel-wie { padding-top: 0; } .profiel .profiel-acties .btn-primary { flex-basis: 100%; } }
.profiel .profiel-foto .detail-fotos { display: block; }
.profiel .profiel-foto img.detail-foto { display: block; width: 7.5rem; height: 7.5rem; max-width: none; border-radius: 50%; object-fit: cover; border: 4px solid var(--color-bg-surface); box-shadow: var(--shadow-md); background: var(--asfalt-100); }
/* Berichten als inbox (08-10): wie, wat, waarover; ongelezen springt eruit. Alle velden gebonden. */
.inbox { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-3); max-width: 48rem; }
.bericht { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: box-shadow .15s ease, transform .15s ease; }
.bericht:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.bericht-icoon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--asfalt-900); }
.bericht-icoon::before { content: ""; width: 1.5rem; height: 1.5rem; background: var(--cat, #fff); -webkit-mask: var(--icoon) center / contain no-repeat; mask: var(--icoon) center / contain no-repeat; }
.bericht-hoofd { min-width: 0; display: grid; gap: .3rem; }
.bericht-kop { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
.bericht-van { font-weight: 800; color: var(--color-text-heading); }
.bericht-soort .status-tag { font-size: var(--text-xs); }
.bericht-tijd { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }
.bericht-tekst { margin: 0; font-size: var(--text-base); line-height: 1.5; color: var(--color-text-heading); }
.bericht-over { display: flex; flex-wrap: wrap; gap: .4em; margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
.bericht-over .enum-waarde { font-weight: 700; color: var(--color-text-heading); }
.bericht-punt { color: var(--color-text-muted); }
.bericht-gelezen { display: none; }
.bericht-acties { align-self: center; }
.bericht-acties .btn-row { border-radius: var(--radius-pill); padding: .4rem .9rem; font-weight: 700; background: var(--color-bg-surface); }
/* Ongelezen: streep in de merkkleur, stip, en de tekst iets steviger */
.bericht:has(.bericht-gelezen .pill-off) { border-color: var(--oranje-200); background: linear-gradient(90deg, var(--oranje-50), var(--color-bg-surface) 40%); }
.bericht:has(.bericht-gelezen .pill-off)::before { content: ""; position: absolute; left: -1px; top: var(--space-3); bottom: var(--space-3); width: 4px; border-radius: 0 4px 4px 0; background: var(--color-primary); }
.bericht:has(.bericht-gelezen .pill-off) .bericht-van::after { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-left: .45rem; border-radius: 50%; background: var(--color-primary); vertical-align: middle; }
.bericht:has(.bericht-gelezen .pill-on) .bericht-tekst { color: var(--color-text-secondary); }
@media (max-width: 560px) {
.bericht { grid-template-columns: auto minmax(0, 1fr); padding: var(--space-4); }
.bericht-acties { grid-column: 2; justify-self: start; }
.bericht-tijd { margin-left: 0; width: 100%; }
}
.bericht:has(.bericht-gelezen .pill-on) .bericht-acties { display: none; }
.bericht-acties.row-actions { width: auto; }
.bericht-acties .btn { flex: none; }
/* Mijn activiteiten: dezelfde potjes als Activiteiten (08-10) */
.potje-ikdoemee { background: var(--color-bg-surface); color: var(--asfalt-900); }
.potje-status { margin-left: auto; }
.potje-status .status-tag { background: var(--color-bg-surface); color: var(--asfalt-900); font-weight: 700; }
.potje-sinds { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.potje-acties .potje-uit { color: var(--color-text-secondary); border-color: var(--color-border-subtle); background: none; }
.potje-acties .potje-uit:hover { color: var(--color-danger, #B42318); border-color: currentColor; }
.potje:has(.status-tag[data-v="geannuleerd"]) { opacity: .7; }
.potje:has(.status-tag[data-v="geannuleerd"]) .potje-kop { background: var(--asfalt-200); }
.potjes-leeg.empty-state, .potjes-leeg { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); max-width: none; margin: var(--space-4) 0 0; padding: var(--space-5) var(--space-6); border: 2px dashed var(--color-border-subtle); border-radius: var(--radius-xl); background: var(--color-bg-surface); color: var(--color-text-secondary); font-size: var(--text-base); }
.potjes-leeg a { display: inline-flex; align-items: center; gap: .4em; padding: .6rem 1.1rem; border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-text-on-primary, var(--asfalt-900)); font-weight: 800; text-decoration: none; }
.potjes-leeg a::after { content: "\2192"; }
[data-pagina="page-mijn-activiteiten"] .mock-component + .mock-component { margin-top: var(--space-10); }
/* Medesporters: vast raster per rij, de knop staat altijd rechts; geen tweede rand binnen de kaart */
.act-zij .table-wrap, .act-zij .data-table { border: 0; border-radius: 0; box-shadow: none; background: none; overflow: visible; }
.act-zij .data-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; }
.act-zij .data-table td.cell-primary { min-width: 0; overflow-wrap: anywhere; line-height: 1.25; }
.act-zij .data-table td.cell-primary::before { width: 2.25rem; height: 2.25rem; }
.act-zij .row-actions .btn-row { padding: .35rem .75rem; font-size: var(--text-xs); }
/* Leeftijd: een lege grens is geen 0. Beide leeg = een regel "Alle leeftijden" (08-10) */
.act .detail-row[data-veld="leeftijdvanaf"] dd[data-leeg], .act .detail-row[data-veld="leeftijdtot"] dd[data-leeg] { font-size: 0; }
.act .detail-row[data-veld="leeftijdvanaf"] dd[data-leeg]::after { content: "Geen ondergrens"; font-size: var(--text-base); font-family: var(--font-body); }
.act .detail-row[data-veld="leeftijdtot"] dd[data-leeg]::after { content: "Geen bovengrens"; font-size: var(--text-base); font-family: var(--font-body); }
.act .detail-list:has([data-veld="leeftijdvanaf"] dd[data-leeg]):has([data-veld="leeftijdtot"] dd[data-leeg]) [data-veld="leeftijdtot"] { display: none; }
.act .detail-list:has([data-veld="leeftijdvanaf"] dd[data-leeg]):has([data-veld="leeftijdtot"] dd[data-leeg]) [data-veld="leeftijdvanaf"] dt { font-size: 0; }
.act .detail-list:has([data-veld="leeftijdvanaf"] dd[data-leeg]):has([data-veld="leeftijdtot"] dd[data-leeg]) [data-veld="leeftijdvanaf"] dt::after { content: "Leeftijd"; font-size: var(--text-xs); }
.act .detail-list:has([data-veld="leeftijdvanaf"] dd[data-leeg]):has([data-veld="leeftijdtot"] dd[data-leeg]) [data-veld="leeftijdvanaf"] dd::after { content: "Alle leeftijden"; }
/* Jouw activiteit (organisator): dezelfde wedstrijdkaart; annuleren is rustig en staat onderaan (08-10) */
.act .detail-view .vh-title h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.act .detail-view .detail-row[data-veld="sport"], .act .detail-view .detail-row[data-veld="sportplek"] { grid-column: 1 / -1; }
.act .detail-view .detail-row[data-veld="locatie"] { display: none; }
.act-org .detail-view .inline-form-foot { display: flex; justify-content: flex-end; margin: 0; padding: 0 var(--space-6) var(--space-6); border: 0; background: none; }
.act-org .detail-view .inline-form-foot .btn { width: auto; flex: none; background: none; color: var(--color-danger, #B42318); border: 1px solid currentColor; box-shadow: none; }
.act-org .detail-view .inline-form-foot .btn:hover { background: color-mix(in srgb, var(--color-danger, #B42318) 8%, transparent); }
.act-deelnemers .data-table tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "naam leeftijd" "mail leeftijd"; row-gap: 0; }
.act-deelnemers .data-table td.cell-primary { grid-area: naam; }
.act-deelnemers .data-table td[data-label="Email"], .act-deelnemers .data-table td:nth-child(2) { grid-area: mail; padding-left: calc(2.25rem + var(--space-3)); font-size: var(--text-xs); color: var(--color-text-muted); overflow-wrap: anywhere; }
.act-deelnemers .data-table td:nth-child(3) { grid-area: leeftijd; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-text-secondary); }
.act-deelnemers .data-table td:nth-child(3)::after { content: " jaar"; font-family: var(--font-body); }
.act-deelnemers .data-table td.cell-primary::before { grid-row: span 2; }
/* Smal: de mobiele tabel-als-kaart-regels zetten anders weer een rand om elke rij */
@media (max-width: 720px) {
.act-zij .data-table tbody tr { border: 0; border-bottom: 1px solid var(--color-border-subtle); border-radius: 0; box-shadow: none; background: none; margin: 0; padding: var(--space-3) 0; }
.act-zij .data-table tbody tr:last-child { border-bottom: 0; }
.act-zij .data-table td { border: 0; padding: 0; }
}
.act-deelnemers .data-table tr { grid-template-columns: 2.25rem minmax(0, 1fr) auto auto; grid-template-areas: "foto naam leeftijd pijl" "foto mail leeftijd pijl"; column-gap: var(--space-3); }
.act-deelnemers .data-table td.cell-primary { display: block; grid-area: naam; min-width: 0; overflow-wrap: anywhere; position: static; }
.act-deelnemers .data-table tr { position: relative; }
.act-deelnemers .data-table td.cell-primary::before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); margin: 0; }
.act-deelnemers .data-table td:nth-child(2) { padding-left: 0; }
.act-deelnemers .data-table td.cell-actions { grid-area: pijl; }
.act-deelnemers .data-table td.cell-actions .row-actions { width: auto; }
.act-zij .data-table td, .act-zij .data-table td.cell-primary { white-space: normal; max-width: none; text-overflow: clip; overflow: visible; }
/* Waarom er geen "Doe mee" staat, in woorden (P2, 08-10): de renderer zet data-inschrijven-niet */
.potje[data-inschrijven-niet~="vrijeplekken"] .potje-vrij { font-size: 0; padding: .3rem .75rem; }
.potje[data-inschrijven-niet~="vrijeplekken"] .potje-vrij::after { content: "Vol"; font-size: var(--text-xs); }
.potje[data-inschrijven-niet] .potje-acties::before { flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap-target, 48px); padding: 0 var(--space-4); border-radius: var(--radius-pill); font-weight: 800; font-size: var(--text-sm); }
.potje[data-inschrijven-niet~="vrijeplekken"] .potje-acties::before { content: "Vol"; background: var(--asfalt-100); color: var(--color-text-secondary); }
.potje[data-inschrijven-niet~="organisatorid"] .potje-acties::before { content: "Jij organiseert"; background: var(--geel-100); color: var(--asfalt-900); }
.potje[data-inschrijven-niet~="deelnemers"] .potje-acties::before { content: "\2713 Je doet mee"; background: color-mix(in srgb, var(--cat, var(--color-primary)) 22%, var(--color-bg-surface)); color: var(--asfalt-900); }
.potje[data-inschrijven-niet] .potje-acties { flex-direction: row-reverse; }
.potje[data-inschrijven-niet~="organisatorid"] .potje-acties::before { content: "Jij organiseert"; background: var(--geel-100); color: var(--asfalt-900); }
.potje[data-inschrijven-niet~="vrijeplekken"] .potje-vrij > * { display: none; }
/* Detailpagina: meedoen of uitschrijven op de kaart zelf; berichten alleen voor wie meedoet (P3, 08-10) */
.act .detail-view .inline-form-foot { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: flex-start; margin: 0; padding: 0 var(--space-6) var(--space-6); border: 0; background: none; }
.act .detail-view .inline-form-foot .btn[data-actie="doe-mee"] { flex: 1 1 12rem; min-height: var(--tap-target, 48px); font-weight: 800; }
.act .detail-view .inline-form-foot .btn[data-actie="doe-mee"]::after { content: "\2192"; margin-left: .45em; }
.act .detail-view .inline-form-foot .btn[data-actie="uitschrijven"] { background: none; color: var(--color-text-secondary); border: 1px solid var(--color-border-subtle); box-shadow: none; }
.act .detail-view[data-doe-mee-niet~="deelnemers"] .inline-form-foot::before { content: "\2713 Je doet mee"; flex: 1 1 12rem; display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap-target, 48px); border-radius: var(--radius-pill); font-weight: 800; background: color-mix(in srgb, var(--cat, var(--color-primary)) 22%, var(--color-bg-surface)); color: var(--asfalt-900); }
.act .detail-view[data-doe-mee-niet~="organisatorid"] .view-head::after { content: "Jij organiseert"; position: static; transform: none; width: auto; height: auto; border: 0; box-shadow: none; z-index: 0; margin-left: auto; padding: .3rem .8rem; border-radius: var(--radius-pill); background: var(--geel-100); color: var(--asfalt-900); font-size: var(--text-xs); font-weight: 800; }
.act .detail-view[data-doe-mee-niet~="vrijeplekken"]:not([data-doe-mee-niet~="deelnemers"]):not([data-doe-mee-niet~="organisatorid"]) .view-head::after { content: "Vol"; position: static; transform: none; width: auto; height: auto; border: 0; box-shadow: none; z-index: 0; margin-left: auto; padding: .3rem .8rem; border-radius: var(--radius-pill); background: var(--asfalt-900); color: #fff; font-size: var(--text-xs); font-weight: 800; }
/* Wie niet meedoet en niet organiseert: geen berichtknoppen die toch geweigerd worden */
.act:not(.act-org):has(.detail-view:not([data-doe-mee-niet~="deelnemers"]):not([data-doe-mee-niet~="organisatorid"])) .act-zij .row-actions .btn-row { display: none; }
.act:not(.act-org):has(.detail-view:not([data-doe-mee-niet~="deelnemers"]):not([data-doe-mee-niet~="organisatorid"])) .act-praat .inline-form { display: none; }
.act:not(.act-org):has(.detail-view:not([data-doe-mee-niet~="deelnemers"]):not([data-doe-mee-niet~="organisatorid"])) .act-praat::after { content: "Doe mee om met de groep te praten."; display: block; padding: var(--space-5) var(--space-6) var(--space-6); background: var(--asfalt-50); border-top: 1px solid var(--color-border-subtle); color: var(--color-text-secondary); font-weight: 600; }
/* Donkere modus: de zachte vlakken van het maatwerk op thema-tokens (P11, 08-10) */
:root[data-theme="dark"] .profiel-sporten { background: color-mix(in srgb, var(--oranje-500) 16%, var(--color-bg-surface)); border-color: color-mix(in srgb, var(--oranje-500) 30%, var(--color-bg-surface)); }
:root[data-theme="dark"] .profiel-label { color: var(--oranje-300); }
:root[data-theme="dark"] .profiel-sportlijst, :root[data-theme="dark"] .profiel-naam { color: var(--color-text-heading); }
:root[data-theme="dark"] .bericht:has(.bericht-gelezen .pill-off) { background: linear-gradient(90deg, color-mix(in srgb, var(--oranje-500) 14%, var(--color-bg-surface)), var(--color-bg-surface) 60%); border-color: color-mix(in srgb, var(--oranje-500) 35%, var(--color-bg-surface)); }
:root[data-theme="dark"] .potje-ikdoemee, :root[data-theme="dark"] .potje-status .status-tag { background: var(--color-bg-surface); color: var(--color-text-heading); }
:root[data-theme="dark"] .potje[data-inschrijven-niet~="deelnemers"] .potje-acties::before, :root[data-theme="dark"] .act .detail-view[data-doe-mee-niet~="deelnemers"] .inline-form-foot::before { background: color-mix(in srgb, var(--cat, var(--color-primary)) 28%, var(--color-bg-surface)); color: var(--color-text-heading); }
:root[data-theme="dark"] .potje[data-inschrijven-niet~="organisatorid"] .potje-acties::before, :root[data-theme="dark"] .act .detail-view[data-doe-mee-niet~="organisatorid"] .view-head::after { background: color-mix(in srgb, var(--geel-400) 26%, var(--color-bg-surface)); color: var(--color-text-heading); }
:root[data-theme="dark"] .potje[data-inschrijven-niet~="vrijeplekken"] .potje-acties::before { background: var(--color-bg-muted); color: var(--color-text-secondary); }
:root[data-theme="dark"] .act-praat .inline-form, :root[data-theme="dark"] .act-praat .empty-state, :root[data-theme="dark"] .act:not(.act-org):has(.detail-view:not([data-doe-mee-niet~="deelnemers"]):not([data-doe-mee-niet~="organisatorid"])) .act-praat::after { background: var(--color-bg-subtle); }
:root[data-theme="dark"] .act-zij .row-actions .btn-row { background: color-mix(in srgb, var(--oranje-500) 16%, var(--color-bg-surface)); border-color: color-mix(in srgb, var(--oranje-500) 35%, var(--color-bg-surface)); color: var(--oranje-300); }
:root[data-theme="dark"] .potje-acties .potje-uit, :root[data-theme="dark"] .act .detail-view .inline-form-foot .btn[data-actie="uitschrijven"] { color: var(--color-text-secondary); border-color: var(--color-border); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .profiel-sporten { background: color-mix(in srgb, var(--oranje-500) 16%, var(--color-bg-surface)); border-color: color-mix(in srgb, var(--oranje-500) 30%, var(--color-bg-surface)); }
:root:not([data-theme="light"]) .profiel-label { color: var(--oranje-300); }
:root:not([data-theme="light"]) .profiel-sportlijst, :root:not([data-theme="light"]) .profiel-naam { color: var(--color-text-heading); }
:root:not([data-theme="light"]) .bericht:has(.bericht-gelezen .pill-off) { background: linear-gradient(90deg, color-mix(in srgb, var(--oranje-500) 14%, var(--color-bg-surface)), var(--color-bg-surface) 60%); border-color: color-mix(in srgb, var(--oranje-500) 35%, var(--color-bg-surface)); }
:root:not([data-theme="light"]) .potje-ikdoemee, :root:not([data-theme="light"]) .potje-status .status-tag { background: var(--color-bg-surface); color: var(--color-text-heading); }
:root:not([data-theme="light"]) .potje[data-inschrijven-niet~="deelnemers"] .potje-acties::before, :root:not([data-theme="light"]) .act .detail-view[data-doe-mee-niet~="deelnemers"] .inline-form-foot::before { background: color-mix(in srgb, var(--cat, var(--color-primary)) 28%, var(--color-bg-surface)); color: var(--color-text-heading); }
:root:not([data-theme="light"]) .potje[data-inschrijven-niet~="organisatorid"] .potje-acties::before, :root:not([data-theme="light"]) .act .detail-view[data-doe-mee-niet~="organisatorid"] .view-head::after { background: color-mix(in srgb, var(--geel-400) 26%, var(--color-bg-surface)); color: var(--color-text-heading); }
:root:not([data-theme="light"]) .potje[data-inschrijven-niet~="vrijeplekken"] .potje-acties::before { background: var(--color-bg-muted); color: var(--color-text-secondary); }
:root:not([data-theme="light"]) .act-praat .inline-form, :root:not([data-theme="light"]) .act-praat .empty-state, :root:not([data-theme="light"]) .act:not(.act-org):has(.detail-view:not([data-doe-mee-niet~="deelnemers"]):not([data-doe-mee-niet~="organisatorid"])) .act-praat::after { background: var(--color-bg-subtle); }
:root:not([data-theme="light"]) .act-zij .row-actions .btn-row { background: color-mix(in srgb, var(--oranje-500) 16%, var(--color-bg-surface)); border-color: color-mix(in srgb, var(--oranje-500) 35%, var(--color-bg-surface)); color: var(--oranje-300); }
:root:not([data-theme="light"]) .potje-acties .potje-uit, :root:not([data-theme="light"]) .act .detail-view .inline-form-foot .btn[data-actie="uitschrijven"] { color: var(--color-text-secondary); border-color: var(--color-border); }
}
/* De bovenregel in oranje-als-tekst (oranje-700, 5:1 op de achtergrond); oranje-500 haalde AA niet. */
/* Activeren: de code komt uit de link en blijft gebonden, maar is geen invulveld. Alleen bij een fout zichtbaar. */
/* Mijn gegevens: geen interne lid-code, en geen lege regels (rollen, naam) */
/* Stopzetten staat los onderaan: hetzelfde scherm, alleen de knop. Boven alleen de gegevens en Wachtwoord wijzigen. */
/* Lege staten met een volgende stap (P20, 08-10) */
.profiel-foto[data-leeg] { font-size: 0; width: 7.5rem; height: 7.5rem; border-radius: 50%; border: 4px solid var(--color-bg-surface); box-shadow: var(--shadow-md); background: var(--geel-300) url("data:image/svg+xml,") center / 55% no-repeat; }
.profiel-sportlijst[data-leeg] { font-size: 0; }
.profiel-sportlijst[data-leeg]::after { content: "Nog geen sporten gekozen. Kies ze hieronder, dan zie je eerder potjes die bij je passen."; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--color-text-secondary); }
/* Registreren op de landing: een eigen plek met een uitnodiging, niet los onderaan (P6, 08-10) */
.sop-meedoen { display: grid; gap: var(--space-6); align-items: start; padding: var(--space-8); border-radius: var(--radius-2xl); background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); box-shadow: var(--shadow-md); scroll-margin-top: 6rem; }
@media (min-width: 900px) { .sop-meedoen { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } }
.sop-meedoen-tekst p { margin: var(--space-3) 0 0; color: var(--color-text-secondary); line-height: 1.6; max-width: 38ch; }
.sop-meedoen-form .inline-form { margin: 0; max-width: none; box-shadow: none; border: 0; padding: 0; background: none; }
.sop-meedoen-form .inline-form-title { display: none; }
#registreren { scroll-margin-top: 6rem; }
/* Groepsgesprek: oud naar nieuw, als tekstballonnen; het invoerveld staat eronder (P19, 08-10) */
.gesprek { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.ballon { justify-self: start; max-width: min(36rem, 92%); padding: var(--space-3) var(--space-4); border-radius: 4px var(--radius-lg) var(--radius-lg) var(--radius-lg); background: var(--color-bg-subtle); border: 1px solid var(--color-border-subtle); }
.ballon-van { margin: 0; font-size: var(--text-xs); font-weight: 800; color: var(--color-text-heading); }
.ballon-tekst { margin: .2rem 0 0; line-height: 1.5; color: var(--color-text-heading); overflow-wrap: anywhere; }
.ballon-tijd { margin: .3rem 0 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.gesprek-leeg.empty-state, .gesprek-leeg { margin: var(--space-4) 0 0; padding: var(--space-5); border: 0; border-radius: var(--radius-lg); background: var(--color-bg-subtle); color: var(--color-text-secondary); text-align: left; }
/* Inbox: een gelezen bericht verliest alleen "Markeer gelezen", niet de weg naar het potje */
.bericht:has(.bericht-gelezen .pill-on) .bericht-acties { display: flex; }
.bericht:has(.bericht-gelezen .pill-on) .bericht-acties [data-bind-action="Gelezen"] { display: none; }
.bericht-acties { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }
.bericht-acties .bericht-potje { background: none; border-color: transparent; color: var(--color-link, var(--oranje-700)); text-decoration: underline; text-underline-offset: 3px; }
/* Datums lezen als taal, niet als code: geen monospace meer ("morgen · 19:00", P14, 08-10) */
.potje-tijd dd, .bericht-tijd, .profiel-meta dd, .ballon-tijd, .act .detail-view .detail-row dd.mono, .act .detail-view .detail-row dd { font-family: var(--font-body); }
.potje-tijd dd { font-weight: 600; }
.profiel-sportlijst[data-leeg] { display: block; }
.profiel-sportlijst[data-leeg]::after { display: block; }
.bericht-acties .bericht-antwoord { font-weight: 800; }