/* Brainstorms Zorg en Wonen · aanvullingen op de evaluatie-huisstijl (styles.css). */
[hidden]{display:none!important}
.bs-small{font-size:13px}
.bs-start{margin-top:0;align-items:start;grid-template-columns:1.5fr 1fr}
@media (max-width:860px){.bs-start{grid-template-columns:1fr}}
.bs-form{gap:0}
.bs-form h1{font-size:clamp(26px,3.6vw,36px);margin:6px 0 10px}
#form-wrap > p{max-width:62ch;margin-bottom:22px}
#bs-form{display:flex;flex-direction:column;gap:18px}
.bs-fs{border:0;padding:0;margin:0;min-width:0}
.bs-fs legend{font-size:14px;font-weight:500;padding:0;margin-bottom:8px}

/* brainstormkeuze: kaartjes met datum, steunkleur per doelgroep */
.bs-sessions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:640px){.bs-sessions{grid-template-columns:1fr}}
.bs-sess{position:relative;display:flex;flex-direction:column;gap:6px;border:2px solid var(--line);border-radius:6px;background:var(--surface);padding:12px 14px 14px;cursor:pointer;overflow:hidden;transition:border-color .12s,background .12s}
.bs-sess::after{content:"";position:absolute;right:0;bottom:0;width:22px;height:100%;background:var(--acc);clip-path:polygon(78% 0,100% 0,100% 100%,0 100%,0 94%,74% 90%)}
.bs-sess > *{padding-right:18px}
.bs-sess input{position:absolute;opacity:0;pointer-events:none}
.bs-sess:hover{border-color:var(--acc-sel,var(--acc))}
.bs-sess:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.bs-sess:has(input:checked){border-color:var(--acc-sel,var(--acc));background:color-mix(in srgb,var(--acc) 10%,var(--surface))}
.bs-sess.closed{opacity:.55;cursor:not-allowed}
.bs-date{display:flex;align-items:baseline;gap:8px}
.bs-date b{font-family:var(--slab);font-size:30px;font-weight:700;line-height:1;color:var(--acc-sel,var(--acc-ink));font-variant-numeric:tabular-nums}
.bs-date span{font-size:12.5px;color:var(--muted);line-height:1.25}
.bs-sess h3{font-size:18px;color:var(--paars-ink)}
.bs-sub{font-size:12.5px;color:var(--muted);line-height:1.35}
.bs-seats{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:3px;font-size:12.5px}
.bs-seats li{display:flex;justify-content:space-between;gap:6px;white-space:nowrap}
.bs-seats .full{color:var(--oranje-ink);font-weight:500}
.bs-check{position:absolute;top:12px;right:30px;width:20px;height:20px;padding:0!important;border-radius:50%;border:2px solid var(--line);background:var(--surface)}
.bs-sess:has(input:checked) .bs-check{border-color:var(--acc-sel,var(--acc));background:radial-gradient(var(--acc-sel,var(--acc)) 45%,var(--surface) 50%)}

/* functiekeuze: zelfde knoppen als het startscherm van de evaluatie */
.bs-pick{display:flex;gap:8px;flex-wrap:wrap}
.bs-tile{flex:1;min-width:120px;position:relative;cursor:pointer}
.bs-tile input{position:absolute;opacity:0;pointer-events:none}
.bs-tile span{display:block;text-align:center;border:2px solid var(--line);background:var(--surface);border-radius:8px;padding:10px 12px;font-weight:500;color:var(--ink);transition:border-color .12s,background .12s}
.bs-tile:hover span{border-color:var(--paars)}
.bs-tile small{display:block;font-size:12px;font-weight:400;color:var(--muted);margin-top:2px}
.bs-tile input:checked + span small{color:rgba(255,255,255,.85)}
.bs-tile input:checked + span{border-color:var(--paars);background:var(--paars);color:#fff}
.bs-tile input:focus-visible + span{outline:3px solid var(--focus);outline-offset:2px}
.bs-hint{font-size:13.5px;margin-top:8px}

.bs-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:560px){.bs-two{grid-template-columns:1fr}}
.bs-submit{margin-top:0}
.bs-done{display:flex;flex-direction:column;align-items:flex-start;gap:12px;outline:none}
.bs-done h2{color:var(--paars-ink)}
.bs-done .lead{color:var(--ink);font-weight:500}

/* zijkolom */
.bs-side{position:sticky;top:calc(env(safe-area-inset-top,0px) + 84px)}
@media (max-width:860px){.bs-side{position:static}}
.bs-side h3{margin-top:6px}
.bs-day{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.bs-day li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;font-size:14px}
.bs-day time{font-family:var(--slab);font-weight:700;color:var(--oranje-ink);font-variant-numeric:tabular-nums}
.bs-day b{display:block;font-family:var(--slab);color:var(--paars-ink)}
.bs-day span{color:var(--muted)}

/* waarom + wie */
.bs-why{margin-top:28px}
.bs-why > *{max-width:58ch}
.bs-why h2{margin:6px 0 4px}
.bs-why p{margin-top:10px}
@media (max-width:640px){.bs-why::after{width:30%;height:24%}}

/* beheeroverzicht */
.linkbtn{background:none;border:0;padding:4px 2px;color:var(--paars-ink);text-decoration:underline;cursor:pointer;font-size:14px}
.btn.danger{background:var(--bad);color:#fff}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.break{word-break:break-all}