/* Load.Live 1.7.0-s05 — wijzigingsmotor: banner op Vandaag (M09), paneel Wijzigingen in het project (M08), instellingen (M10),
 * en de pagina achter de link voor wie geen login heeft (/w/<token>). Kleuren uit ll.css: --tally = signaal (rood), --ok = gezien. */

/* ---------- banner (M09) ---------- */
.wz-signaals { display: grid; gap: 12px; margin: 0 0 18px; }
.wz-signaal { border: 2px solid var(--tally); border-radius: var(--r-kaart, 16px); background: var(--tally-zacht); padding: 14px 16px; display: grid; gap: 4px; }
.wz-signaal .wz-label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--tally-tekst, var(--tally)); margin: 0; }
.wz-signaal h2 { margin: 0; font-size: 18px; }
.wz-signaal .wz-groot { font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; margin: 2px 0; }
.wz-signaal .wz-regels { margin: 0; padding: 0; list-style: none; color: var(--zacht); }
.wz-signaal .wz-acties { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.wz-signaal.gezien { border-color: var(--lijn-sterk); background: transparent; opacity: .8; }

/* ---------- paneel (M08) ---------- */
.wz-paneel { display: grid; gap: 16px; }
.wz-kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.wz-teller { border-radius: var(--r-pil, 999px); padding: 2px 10px; font-size: 13px; border: 1px solid var(--lijn-sterk); }
.wz-teller.rood { border-color: var(--tally); color: var(--tally-tekst, var(--tally)); }
.wz-kaart { border: 1px solid var(--lijn); border-radius: var(--r-kaart, 16px); padding: 14px 16px; background: var(--rack); }
.wz-kaart.rood { border-color: var(--tally); }
.wz-kaart h3 { margin: 0 0 4px; font-size: 16px; }
.wz-mensen { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 12px; }
.wz-persoon { display: grid; grid-template-columns: 34px 1fr; gap: 2px 10px; align-items: center; border: 1px solid var(--lijn); border-radius: var(--r, 12px); padding: 8px 10px; }
.wz-persoon .wz-ini { grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; background: var(--rack-2); }
.wz-persoon.gezien .wz-ini { background: var(--ok-zacht); color: var(--ok); }
.wz-persoon.mis .wz-ini { background: var(--tally-zacht); color: var(--tally-tekst, var(--tally)); }
.wz-persoon.rood { outline: 1.5px solid var(--tally); outline-offset: -1.5px; }
.wz-persoon .wz-st { font-size: 13px; color: var(--zacht); }
.wz-persoon.mis .wz-st { color: var(--tally-tekst, var(--tally)); }
.wz-persoon .wz-knoppen { grid-column: 2; display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.wz-persoon select { font: inherit; font-size: 13px; }
.wz-eerder summary { cursor: pointer; }

/* ---------- instellingen (M10) ---------- */
.wz-inst { display: grid; gap: 0; }
.wz-inst .wz-rij { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--lijn); }
.wz-inst .wz-rij:last-child { border-bottom: 0; }
.wz-inst .wz-rij p { margin: 2px 0 0; color: var(--zacht); font-size: 14px; }
.wz-inst .wz-invoer { display: flex; gap: 6px; align-items: center; }
.wz-inst input[type="number"] { width: 5.5em; }
.wz-inst input[type="time"] { width: 7em; }

/* ---------- pagina achter de link (zonder login) ---------- */
.wz-pagina { max-width: 520px; margin: 0 auto; padding: 24px 16px; }
.wz-pagina .wz-signaal { margin: 16px 0; }
.wz-pagina .wz-ok { color: var(--ok); font-weight: 600; }
.wz-pagina .sub { color: var(--zacht); }
@media (max-width: 560px) { .wz-inst .wz-rij { grid-template-columns: 1fr; } }