/* Nachtdienst: donker met een gloed in de ploegkleur. Licht (perkament uit het C-ploeg-logo) kies je in Meer → Weergave.
   De gloed per ploeg staat in --glow (zie [data-ploeg] hieronder). */
:root {
  --bg: #151413;
  --card: #1e1c1b;
  --card-2: #282523;
  --panel: var(--card-2);
  --text: #f4efeb;
  --muted: #bcb1a9;
  --line: #393431;
  --red: #ff946b;
  --red-soft: rgba(255, 148, 107, .14);
  --on-red: #1a0f0a;
  --gold: #efc277;
  --ok: #83cea2;
  --glow: rgba(224, 115, 28, .15);
  --header: rgba(21, 20, 19, .95);
  --shadow: 0 2px 8px rgba(0, 0, 0, .13);
  --radius: 14px;
  --display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  color-scheme: dark;
}
[data-ploeg="A"] { --glow: rgba(217, 67, 26, .17); }
[data-ploeg="B"] { --glow: rgba(111, 143, 176, .17); }
[data-ploeg="D"] { --glow: rgba(255, 106, 42, .16); }
[data-ploeg="M"] { --glow: rgba(194, 42, 42, .16); }
:root[data-theme="light"] {
  --bg: #f6f4f1; --card: #fffdfa; --card-2: #f0ece7; --text: #26211e; --muted: #6b6058; --line: #ded8d1;
  --red: #a43d22; --red-soft: #f9e8df; --on-red: #fff; --gold: #865700; --ok: #246645;
  --glow: rgba(224, 115, 28, .10); --header: rgba(246, 244, 241, .95); --shadow: 0 2px 8px rgba(64, 43, 28, .07);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    --bg: #fbf3e2; --card: #fffaf0; --card-2: #fff4e3; --text: #2b1a12; --muted: #7a6455; --line: #ecdcc0;
    --red: #a8321a; --red-soft: #fbe3cf; --on-red: #fff; --gold: #b86a06; --ok: #2f8a4a;
    --glow: rgba(224, 115, 28, .28); --header: rgba(251, 243, 226, .8); --shadow: 0 8px 24px rgba(110, 31, 13, .12);
    color-scheme: light;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.45 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--red); }
h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.2; }
h1, h2 { font-family: var(--display); font-weight: 600; letter-spacing: .01em; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1rem; }
p { margin: .4rem 0; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.center { text-align: center; }
.warn { color: var(--gold); }
.loading { padding: 2rem; text-align: center; color: var(--muted); }

input, select, textarea, button { font: inherit; color: inherit; }
input, select, textarea {
  width: 100%;
  padding: .6rem .7rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--red); outline-offset: 0; border-color: transparent; }
textarea { resize: vertical; }
label { display: block; margin: .5rem 0; font-size: .9rem; color: var(--muted); }
label input, label select { margin-top: .25rem; color: var(--text); }
button {
  border: 1px solid var(--line);
  background: var(--card-2);
  border-radius: 12px;
  padding: .5rem .8rem;
  cursor: pointer;
}
button:disabled { opacity: .5; }
button.primary, a.primary { background: var(--red); border-color: var(--red); color: var(--on-red); font-weight: 700; box-shadow: 0 4px 16px var(--red-soft); }
button.wide { width: 100%; margin: .5rem 0; padding: .7rem; }
button.icon { border: none; background: none; color: var(--muted); padding: .3rem .5rem; }
button.link { border: none; background: none; color: var(--red); padding: 0; font-size: .85rem; }
button.small-btn { font-size: .8rem; padding: .3rem .55rem; }
button.bad { color: var(--red); }

/* Layout */
#app { max-width: 720px; margin: 0 auto; min-height: 100vh; position: relative; }
/* De gloed bovenaan in de kleur van de ploeg */
.glow { position: fixed; inset: 0 0 auto; height: 460px; pointer-events: none; z-index: -1;
  background: radial-gradient(70% 70% at 50% 0%, var(--glow), transparent 75%); }
body { position: relative; z-index: 0; }
header.top {
  position: sticky; top: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: calc(.5rem + env(safe-area-inset-top)) 16px .5rem; background: var(--header); color: var(--text);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
header.top .muted { text-align: right; line-height: 1.25; }
.brand { display: flex; align-items: center; gap: .65rem; color: inherit; text-decoration: none; }
.brand img { height: 46px; width: auto; filter: drop-shadow(0 4px 12px var(--glow)); }
.brand b { font: 700 1.45rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.brand small { display: block; font-size: .68rem; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; margin-top: .15rem; }
main { padding: 12px 16px calc(96px + env(safe-area-inset-bottom)); }
nav.tabs {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 5;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--header); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  padding: .3rem 4px calc(.35rem + env(safe-area-inset-bottom));
}
nav.tabs a {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: .3rem 0; font-size: .68rem; font-weight: 500; color: var(--muted); text-decoration: none;
}
nav.tabs a span { font-size: 1.15rem; line-height: 1; width: 2.6rem; padding: .3rem 0; text-align: center; border-radius: 99px; filter: grayscale(.8) opacity(.75); transition: background .2s; }
nav.tabs a.on, nav.tabs a.via { color: var(--red); font-weight: 700; }
nav.tabs a.on span, nav.tabs a.via span { filter: none; background: var(--red-soft); box-shadow: 0 0 14px var(--red-soft); }
nav.tabs .extra { display: none; }
@media (min-width: 760px) and (max-width: 1023px) {
  nav.tabs { max-width: 720px; margin: 0 auto 10px; border-radius: 22px; border: 1px solid var(--line); }
}

/* Desktop: zijbalk links, brede inhoud; Vandaag in twee kolommen */
.gastbalk { margin: 10px 16px 0; padding: .55rem .8rem; border-radius: 14px; font-size: .88rem;
  background: color-mix(in srgb, var(--gold) 16%, var(--card)); border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
details.systeem { margin: .35rem 0 .2rem; }
details.systeem summary { cursor: pointer; }
details.systeem .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: .2rem 0 .5rem; }
.duo { display: flex; flex-direction: column; }
.duo > .kol { display: contents; }
.duo .o1 { order: 1; } .duo .o2 { order: 2; } .duo .o3 { order: 3; } .duo .o4 { order: 4; }
@media (min-width: 1024px) {
  #app { max-width: 1320px; display: grid; grid-template-columns: 248px minmax(0, 1fr); grid-template-rows: auto auto 1fr; }
  #app:has(> .login) { display: block; }
  header.top { grid-column: 1 / -1; padding-left: 24px; padding-right: 24px; }
  .gastbalk { grid-column: 1 / -1; grid-row: 2; margin: 12px 20px 0; }
  nav.tabs {
    position: sticky; top: 84px; grid-column: 1; grid-row: 3; align-self: start;
    display: flex; flex-direction: column; gap: 2px; margin: 20px 0 20px 20px; padding: 10px;
    border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
    background: color-mix(in srgb, var(--card) 88%, transparent);
  }
  nav.tabs a { flex-direction: row; gap: .75rem; padding: .6rem .75rem; font-size: .95rem; border-radius: 12px; transition: background .15s; }
  nav.tabs a span { width: auto; padding: 0; font-size: 1.2rem; background: none !important; box-shadow: none !important; }
  nav.tabs a:hover { background: color-mix(in srgb, var(--red-soft) 50%, transparent); color: var(--text); }
  nav.tabs a.on { background: var(--red-soft); color: var(--red); }
  nav.tabs a.via { color: var(--muted); font-weight: 500; }
  nav.tabs a.via span { filter: grayscale(.8) opacity(.75); }
  nav.tabs .extra { display: flex; }
  nav.tabs .kop.extra { display: block; margin: .9rem .75rem .35rem; }
  main { grid-column: 2; grid-row: 3; padding: 20px 28px 48px; }
  .duo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0 24px; align-items: start; }
  .duo > .kol { display: block; }
  .duo .kol:last-child > section:first-child > .kop:first-child { margin-top: .6rem; }
  .duo .voorjou { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); overflow: visible; margin: 0 0 4px; padding: 2px 0 10px; }
  /* Losse kaarten naast elkaar in plaats van één lange rij */
  #view[data-view="meer"], #view[data-view="trakteren"] { columns: 2; column-gap: 20px; }
  #view[data-view="meer"] > *, #view[data-view="trakteren"] > * { break-inside: avoid; }
  #view[data-view="meer"] .snel { display: none; }
  #view[data-view="rooster"] { max-width: 880px; }
}

.card {
  background: color-mix(in srgb, var(--card) 88%, transparent); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; margin: 0 0 12px; box-shadow: var(--shadow);
}
.card.err, .warnbox { border-color: var(--gold); }
details > summary { cursor: pointer; }
.date { font: 600 .8rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: .6rem 0 .2rem; text-align: center; }
.badge, .pill {
  display: inline-block; font-size: .72rem; padding: .05rem .45rem; border-radius: 99px;
  background: var(--red-soft); color: var(--red); font-weight: 600; vertical-align: middle;
}
.badge { background: var(--red); color: var(--on-red); }
.pill.warn { color: var(--gold); }
.row { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin-top: .4rem; }
.row input { flex: 1; min-width: 8em; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li { padding: .3rem 0; }

/* Sluitingstijd */
/* Sluitingstijd als grote klok bovenaan Vandaag */
.sluit { background: none; border: none; box-shadow: none; text-align: center; padding: 6px 4px 10px; }
.sluit h2 { font: 600 .78rem/1 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin: .2rem 0 0; }
.sluit .big { font: 600 5.6rem/.95 var(--display); letter-spacing: -.01em; margin: .25rem 0 .1rem;
  background: linear-gradient(180deg, var(--text) 35%, var(--red)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.countdown { font-weight: 500; color: var(--muted); margin: 0 0 .5rem; }
.sluit > p:not(.countdown), .sluit details { text-align: left; }
.sluit details { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: .55rem .8rem; margin: .5rem 0; }

/* Agenda */
.ev { display: flex; gap: .5rem; align-items: baseline; border-bottom: 1px dashed var(--line); }
.ev:last-child { border-bottom: none; }
.ev-time { font-variant-numeric: tabular-nums; color: var(--muted); min-width: 3em; }
.ev-body { flex: 1; }
.day h3 { text-transform: capitalize; }
.day.today { border-color: var(--red); }

/* Menu */
.choices { display: grid; gap: .5rem; }
.choices button {
  display: grid; grid-template-columns: 1fr auto; text-align: left; width: 100%;
  padding: .6rem .8rem; gap: 0 .5rem;
}
.choices button span { grid-column: 1; font-size: .88rem; color: var(--muted); }
.choices button em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-weight: 700; }
.choices button.chosen { border: 2px solid var(--red); background: var(--red-soft); }
.choice-wrap .muted { padding: .15rem .3rem 0; }
.order { margin-top: .8rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.datenav { display: flex; justify-content: space-between; align-items: center; margin-bottom: .8rem; text-transform: capitalize; }
.datenav button { font-size: 1.3rem; padding: .2rem .9rem; }

/* Films */
.seg { display: flex; background: var(--line); border-radius: 12px; padding: 3px; margin-bottom: 12px; gap: 3px; }
.seg button { flex: 1; border: none; background: none; border-radius: 9px; padding: .45rem .3rem; font-size: .9rem; }
.seg button.on { background: var(--card); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0 .8rem; }
.chip { border-radius: 99px; padding: .3rem .75rem; font-size: .88rem; }
.chip.on { background: var(--red); border-color: var(--red); color: var(--on-red); font-weight: 600; }
.movie {
  display: flex; gap: .8rem; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 10px; margin-bottom: 10px;
}
.poster { width: 72px; height: 108px; object-fit: cover; border-radius: 8px; flex: none; background: var(--line); }
.poster.ph { display: grid; place-items: center; font-size: 2rem; font-weight: 800; color: var(--muted); }
.small-movie .poster { width: 48px; height: 72px; }
.movie-body { flex: 1; min-width: 0; }
.reason { color: var(--ok); }
.chips.diensten .chip { display: inline-flex; align-items: center; gap: .35rem; }
.chips.diensten .chip img { width: 20px; height: 20px; border-radius: 5px; }
.aanbod { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: .25rem 0; }
.dienst { display: inline-flex; align-items: center; border-radius: 7px; font-size: .8rem; }
.dienst:not(:has(img)) { border: 1px solid var(--line); padding: 0 .4rem; }
.dienst img { width: 28px; height: 28px; border-radius: 7px; display: block; }
.dienst.jullie { outline: 2px solid var(--ok); outline-offset: 1px; }
.filminfo { margin-top: .4rem; }
.trailer { position: relative; aspect-ratio: 16 / 9; max-width: 560px; border-radius: 10px; overflow: hidden; background: #000; margin: .3rem 0; }
.trailer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.reason::before { content: "→ "; }
.votes { display: flex; gap: .4rem; margin: .35rem 0 .2rem; }
.votes button.on { background: var(--ok); border-color: var(--ok); color: var(--on-red); }
.votes button.on.bad { background: var(--red); border-color: var(--red); }
#search-results { margin-top: .6rem; }

/* Trakteren */
.treat { display: flex; justify-content: space-between; gap: .6rem; align-items: center; padding: .55rem 0; border-bottom: 1px dashed var(--line); flex-wrap: wrap; }
.treat:last-child { border-bottom: none; }
.treat.done { opacity: .75; }
.rank { margin: 0; padding-left: 1.4rem; }
.rank li { padding: .15rem 0; }
.meter { height: 10px; background: var(--line); border-radius: 99px; overflow: hidden; }
.meter div { height: 100%; background: linear-gradient(90deg, var(--red), var(--gold)); }

/* Beheer */
.user { padding: .5rem 0; border-bottom: 1px dashed var(--line); }
.user:last-child { border-bottom: none; }
.card form + form { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--line); }

/* Login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-card { width: 100%; max-width: 380px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 24px; text-align: center; }
.login-card form { text-align: left; margin-top: .5rem; }
.logo { width: 170px; height: auto; margin: -4px auto 6px; display: block; filter: drop-shadow(0 4px 10px rgba(0,0,0,.25)); }
body:has(.login) { background: radial-gradient(circle at 50% 0%, var(--red-soft), var(--bg) 60%) fixed var(--bg); }
.login-card { box-shadow: var(--shadow); }
.colofon { text-align: center; margin: 1.2rem 0 .5rem; }
.colofon img { width: 110px; height: auto; opacity: .95; }
.hint { font-size: .85rem; color: var(--muted); margin-top: 1rem; }

dialog { border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: var(--text); width: min(92vw, 380px); }
dialog::backdrop { background: rgba(0,0,0,.45); }

.toast {
  position: fixed; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: var(--text); color: var(--bg); padding: .6rem 1rem; border-radius: 10px; z-index: 20;
  max-width: 90vw; box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.toast.err { background: var(--red); color: #fff; }
.notice { display: block; border-color: color-mix(in srgb, var(--red) 55%, var(--line)); background: linear-gradient(135deg, var(--red-soft), transparent); text-decoration: none; color: var(--text); font-weight: 600; }

/* Vrijschrijven */
.entrants { list-style: none; margin: .4rem 0; padding: 0; }
.entrants li { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; border-bottom: 1px dashed var(--line); flex-wrap: wrap; }
.entrants li:last-child { border-bottom: none; }
.entrants li b { flex: 1; }
label.check { display: flex; align-items: center; gap: .5rem; color: var(--text); }
label.check input { width: auto; margin: 0; }
.titles { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: .5rem; margin-bottom: .8rem; }
.title-tile { background: var(--red-soft); border-radius: 12px; padding: .5rem; text-align: center; display: flex; flex-direction: column; font-size: .85rem; }
.title-tile span { font-size: 1.6rem; }
.title-tile b { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--red); }
.title-tile small { color: var(--muted); }
table.score { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.score th, table.score td { padding: .35rem .3rem; border-bottom: 1px solid var(--line); text-align: center; }
table.score th:first-child, table.score td:first-child { text-align: left; }
table.score tr.me td { font-weight: 700; background: var(--red-soft); }

.draw-overlay { position: fixed; inset: 0; z-index: 30; background: rgba(20,10,5,.7); display: grid; place-items: center; padding: 16px; }
.draw-card { background: var(--card); border-radius: 18px; padding: 18px; width: min(100%, 420px); max-height: 92vh; overflow: auto; text-align: center; }
.wheel-wrap { position: relative; width: min(78vw, 300px); margin: .6rem auto; }
.wheel { width: 100%; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 6px 20px rgba(0,0,0,.35); will-change: transform; }
.wheel svg { display: block; width: 100%; height: 100%; }
.pointer { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); z-index: 2; font-size: 1.8rem; color: var(--red); text-shadow: 0 2px 3px rgba(0,0,0,.4); line-height: 1; }
.draw-status { font-size: 1.15rem; font-weight: 700; min-height: 1.6em; }
.draw-results { list-style: none; padding: 0; margin: .4rem 0 .8rem; text-align: left; }
.draw-results li { padding: .3rem .5rem; border-radius: 8px; margin-bottom: .25rem; }
.draw-results li.win { background: var(--red-soft); font-weight: 600; }
.draw-results li.lose { color: var(--muted); }
.center-row { justify-content: center; }

/* Filmstemming en scores */
.crit:empty { display: none; }
.pill.fresh { color: var(--red); }
.pill.rotten { color: var(--ok); }
.poll-opts { display: grid; gap: .5rem; margin: .4rem 0 .6rem; }
.poll-opt {
  display: flex; gap: .7rem; align-items: flex-start; text-align: left; width: 100%; padding: .55rem;
}
.poll-opt .poster { width: 48px; height: 72px; }
.poll-opt.chosen { border: 2px solid var(--red); background: var(--red-soft); }
.poll-body { display: grid; gap: .2rem; flex: 1; min-width: 0; }
.bar { display: block; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--red); transition: width .4s; }
.draft { display: grid; gap: .4rem; margin: .5rem 0 .7rem; }
.draft-slot {
  display: flex; gap: .6rem; align-items: center; padding: .4rem; border: 1px solid var(--line); border-radius: 10px;
}
.draft-slot > span { flex: 1; min-width: 0; }
.draft-slot .poster { width: 36px; height: 54px; font-size: 1.1rem; }
.draft-slot.empty { justify-content: center; min-height: 54px; border-style: dashed; color: var(--muted); }
.results li { margin-bottom: .45rem; }

/* Sfeerstemming */
.sfeer-vote { margin: .7rem 0 .4rem; padding-top: .6rem; border-top: 1px solid var(--line); display: grid; gap: .4rem; }
.sfeer-vote output { font-weight: 700; margin-left: .3rem; }
.sfeer-vote input[type=range] { width: 100%; accent-color: var(--red); margin: 0; }
.range-ends { display: flex; justify-content: space-between; margin-top: -.2rem; }
.sfeer-vote textarea { width: 100%; font: inherit; resize: vertical; }
.sfeer-vote .small-btn { justify-self: start; }
.tips li { margin: .3rem 0; }
.choice-static {
  display: grid; grid-template-columns: 1fr auto; gap: 0 .5rem; padding: .5rem .8rem;
  border: 1px solid var(--line); border-radius: 10px;
}
.choice-static span { font-size: .88rem; color: var(--muted); }
.choice-static em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-weight: 700; }
.choice-static.chosen { border: 2px solid var(--red); background: var(--red-soft); }
.choices button:disabled { opacity: .75; cursor: default; }
.whoami { color: inherit; text-decoration: none; font-weight: 600; font-size: .9rem; white-space: nowrap; }
.who { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.omgeving { background: var(--red-soft); color: var(--text); border-color: var(--line); white-space: nowrap; }
.datenav .small { text-transform: none; font-weight: 400; }

/* Tv-locatie en dagstaat (in aanbouw) */
.tvpill { font-size: .72rem; padding: .05rem .4rem; }
.card.soon { border-style: dashed; }
.todo li { margin: .2rem 0; }
.todo label { display: flex; gap: .5rem; align-items: center; }
.todo label input { width: auto; margin: 0; flex: none; }

/* Ploegen */
.crests { display: flex; justify-content: center; gap: .5rem; margin-bottom: .4rem; }
.crests img { height: 40px; width: auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.shared { display: flex; align-items: center; gap: .6rem; margin: .1rem 0 .7rem; }
.shared img { height: 44px; width: auto; }
.shared span { display: block; }
label.inline { display: inline-block; margin: .2rem 0; }
label.inline select { width: auto; margin: 0 0 0 .3rem; padding: .15rem .4rem; }
pre.report { white-space: pre-wrap; font-size: .8rem; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: .6rem; }

/* Rooster */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal .wd { text-align: center; font-size: .72rem; color: var(--muted); }
.day {
  position: relative; aspect-ratio: 1 / 1; padding: 2px; border-radius: 9px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1;
}
.day b { font-size: .95rem; }
.day small { font-size: .58rem; color: var(--muted); letter-spacing: .02em; min-height: .7rem; }
.day i { position: absolute; top: 1px; right: 3px; font-style: normal; font-size: .55rem; }
.day u { position: absolute; top: 1px; left: 2px; text-decoration: none; font-size: .64rem; line-height: 1; }
.day.past { opacity: .55; }
.prog h3 { margin: .7rem 0 .2rem; font-size: .92rem; }
.prog:first-of-type h3 { margin-top: .2rem; }
.prog li { display: flex; gap: .4rem; align-items: baseline; }
.duty-nav { justify-content: space-between; align-items: center; margin: -.2rem 0 .6rem; }
.chip-wrap { display: inline-flex; align-items: center; }
.chip.own { border-style: dashed; }
.chip-x { border: none; background: none; padding: 0 .2rem; font-size: .75rem; color: var(--muted); }
.chip.add { color: var(--muted); }
.day.today { outline: 2px solid var(--gold); outline-offset: -2px; }
.day.mine { background: var(--red); border-color: var(--red); color: var(--on-red); box-shadow: 0 0 12px var(--red-soft); }
.day.mine small { color: inherit; opacity: .8; }
/* Dagdienst: zelfde kleur als een dienst, maar licht, zodat je 24 uur en overdag in één oogopslag uit elkaar houdt */
.day.mine.dag { background: var(--red-soft); color: var(--text); box-shadow: none; }
.day em.pl { position: absolute; bottom: 1px; right: 4px; font-style: normal; font-size: .58rem; font-weight: 700; color: var(--muted); }
.day.mine em.pl { color: inherit; opacity: .75; }
.day.mine.dag small { color: var(--red); opacity: 1; font-weight: 600; }
.day small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.day.part { background: var(--gold); border-color: var(--gold); }
.day.off { background: var(--line); }
.day.req { box-shadow: inset 0 0 0 2px var(--gold); }
.day.give { box-shadow: 0 0 0 3px var(--text); }
.day.want { box-shadow: 0 0 0 3px var(--ok); background: color-mix(in srgb, var(--ok) 25%, var(--card)); }
.legend { margin: .6rem 0 .2rem; line-height: 1.8; }
.key { display: inline-block; width: .9em; height: .9em; border-radius: 3px; vertical-align: -.1em; margin: 0 .25em 0 .5em; border: 1px solid var(--line); }
.key.mine { background: var(--red); } .key.part { background: var(--gold); } .key.off { background: var(--line); }
.shiftlist li { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .2rem 0; }
.shiftlist select { width: auto; }
.steps { padding-left: 1.2rem; }
.steps li.now { font-weight: 600; }
.steps li.done { color: var(--muted); }
.swap { padding: .55rem 0; border-bottom: 1px dashed var(--line); }
.swap:last-child { border-bottom: none; }
.swap.dim { opacity: .6; }
.imp { border-top: 1px solid var(--line); margin-top: .6rem; padding-top: .4rem; }
.imp h3 { margin: .7rem 0 .2rem; }
.imp code { font-size: .8rem; padding: 0 .3rem; border-radius: 4px; background: rgba(127, 127, 127, .18); }
.cat-nu { display: flex; align-items: center; gap: .8rem; }
.cat-nu > div { flex: 1; }
.cat-nu .cat-getal { font: 700 2.5rem/1 var(--display); width: 58px; height: 58px; flex: none; display: grid; place-items: center;
  border-radius: 16px; background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.cat-nu.zwaar { border: 1px solid color-mix(in srgb, var(--red) 60%, transparent); background: linear-gradient(135deg, var(--red-soft), transparent);
  border-radius: 16px; padding: .6rem .7rem; }
.cat-nu.zwaar .cat-getal { background: var(--red); color: var(--on-red); box-shadow: 0 0 24px var(--red-soft), 0 0 12px var(--red); }
#luchtmacht details[data-lm] { margin-top: .6rem; }
.indeling { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; margin: .5rem 0; }
.ind-voertuig { border: 1px solid var(--line, #0002); border-radius: 10px; padding: .4rem .55rem; font-size: .88rem; }
.ind-plek { display: flex; gap: .4rem; }
.ind-plek .muted { min-width: 3.2em; }
.ind-plek.mij, .ind-mij { font-weight: 700; color: var(--red); }
.ind-plek.tekort { color: var(--gold); }
.ind-ik { font-size: 1.05rem; }
.ind-opties li { margin: .25rem 0; }
.ind-nee { color: var(--muted); }
.lm-nacht { margin-top: .6rem; padding: .4rem .6rem; border-left: 3px solid var(--gold); }

/* McFlurry-smaken en Bakkerij Bekkers bij Trakteren */
.treat .mcf { flex-basis: 100%; margin-top: .3rem; }
.treat .mcf .chips { margin: .4rem 0 .3rem; }
.bekkers { list-style: none; padding: 0; margin: .3rem 0; }
.bekkers li { padding: .35rem 0; border-top: 1px solid var(--line); }
.bekkers li:first-child { border-top: none; }
.bekkers a[href^="tel:"] { margin-left: .4rem; white-space: nowrap; }

/* Roosterwijziging: blijft over de app liggen tot "Gezien en akkoord" */
.melding-overlay { position: fixed; inset: 0; z-index: 40; background: rgba(10,6,4,.78); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 16px; }
.melding-overlay .card { width: min(100%, 440px); max-height: 85vh; overflow: auto; margin: 0; }
.melding-dagen { padding-left: 1.1rem; margin: .5rem 0 1rem; }
.melding-dagen li { margin: .25rem 0; }

/* ---------- Nachtdienst: Vandaag ---------- */
.kop { font: 600 .8rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 1.1rem 2px .55rem; }
/* "Voor jou": wat je moet doen, als kaartjes om opzij te vegen */
.voorjou { display: flex; gap: 10px; overflow-x: auto; margin: 0 -16px 4px; padding: 2px 16px 10px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.voorjou::-webkit-scrollbar { display: none; }
.voorjou a { flex: 0 0 152px; scroll-snap-align: start; position: relative; text-decoration: none; color: var(--text);
  background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 12px; box-shadow: var(--shadow); }
.voorjou a.warm { border-color: color-mix(in srgb, var(--red) 55%, var(--line)); background: linear-gradient(150deg, var(--red-soft), var(--card) 70%); }
.voorjou .e { font-size: 1.35rem; display: block; }
.voorjou b { display: block; font-size: .9rem; margin-top: .35rem; line-height: 1.25; }
.voorjou span:not(.e):not(.n) { display: block; font-size: .76rem; color: var(--muted); margin-top: .15rem; }
.voorjou .n { position: absolute; top: 10px; right: 10px; background: var(--red); color: var(--on-red); font-weight: 700; font-size: .72rem; border-radius: 99px; padding: .05rem .45rem; }
/* Tijdlijn van de dag */
.tl { list-style: none; margin: 0; padding: 2px 0; }
.tl > li { display: grid; grid-template-columns: 3.1rem 14px 1fr auto; gap: 10px; align-items: start; padding: 7px 0; }
.tl time { font: 600 1.05rem/1.25 var(--display); color: var(--gold); text-align: right; font-variant-numeric: tabular-nums; }
.tl .dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--red); margin-top: .35rem; position: relative; }
.tl > li:not(:last-child) .dot::after { content: ""; position: absolute; left: 2px; top: 10px; width: 2px; height: calc(100% + 2.4rem); background: color-mix(in srgb, var(--red) 30%, transparent); }
.tl .tl-body b { display: block; font-size: .95rem; }
.tl .tl-body span { font-size: .8rem; color: var(--muted); }
.tl > li.past { opacity: .55; }
.tl > li.past .dot { background: color-mix(in srgb, var(--red) 40%, transparent); border-color: transparent; }
.tl > li.next .dot { background: var(--red); box-shadow: 0 0 10px var(--red); }
.tl > li.next time { color: var(--red); }
.tl .tl > li { padding: 0; }
.tl-card { padding: 10px 14px; }
/* Snelkoppelingen op Meer */
.snel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.snel a { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 14px 8px; text-align: center; text-decoration: none; color: var(--text); font-weight: 600; font-size: .85rem; box-shadow: var(--shadow); }
.snel a span { display: block; font-size: 1.6rem; margin-bottom: .25rem; }
.seg-thema { display: flex; gap: .4rem; }
.seg-thema button { flex: 1; }
.seg-thema button.on { background: var(--red); border-color: var(--red); color: var(--on-red); font-weight: 700; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 700; font-size: .9rem; text-decoration: none;
  background: var(--red); color: var(--on-red); box-shadow: 0 0 14px var(--red-soft); overflow: hidden; flex: none; vertical-align: middle; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.groot { width: 64px; height: 64px; font-size: 1.5rem; }
.avatar.klein { width: 28px; height: 28px; font-size: .8rem; box-shadow: none; }
.avatar.mini { width: 20px; height: 20px; font-size: .65rem; box-shadow: none; }
.chip.met-foto { display: inline-flex; align-items: center; gap: .35rem; padding-left: .3rem; }
.mijnfoto { display: flex; gap: .9rem; align-items: center; margin-bottom: .6rem; }
.mijnfoto .knop { display: inline-block; cursor: pointer; border: 1px solid var(--line); border-radius: 10px; padding: .35rem .7rem; font-size: .9rem; margin: 0 .3rem .3rem 0; }
.mijnfoto p { margin: .2rem 0 0; }
.smoelen { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .8rem .5rem; }
.smoelen > div { display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; }
.smoelen span { line-height: 1.2; overflow-wrap: anywhere; }

/* Tweestapsverificatie */
.mfa-qr { display: block; width: 180px; height: 180px; margin: .6rem 0; padding: 8px; background: #fff; border-radius: 12px; }
a.gastbalk { display: block; color: inherit; text-decoration: none; }

/* Collega's per ploeg (hoofdbeheerder) */
.user[hidden] { display: none; }
.ploegkeuze { flex-wrap: wrap; margin-bottom: .4rem; }
.ploegkeuze button { flex: 1 0 3rem; }

/* Vandaag: aftellen tot je volgende dienst */
.card.aftellen { display: flex; align-items: center; gap: 1rem; color: inherit; text-decoration: none; }
.aftellen .getal { font-size: 3.6rem; font-weight: 800; line-height: 1; color: var(--red); min-width: 2ch; text-align: center; }
.aftellen b { display: block; font-size: 1.15rem; }
.aftellen .muted { display: block; margin-top: .2rem; }

/* Profiel: statusregels (Big 5) */
.statuslijst li { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px dashed var(--line); }
.statuslijst li:last-child { border-bottom: none; }
.statuslijst li > span:last-child { white-space: nowrap; }

/* Zonder foto het ploeglogo als avatar */
.avatar img.ploeglogo { object-fit: contain; padding: 3px; }
/* Zeven tabs onderin: op een smalle telefoon kleiner */
@media (max-width: 430px) {
  nav.tabs { padding-left: 2px; padding-right: 2px; }
  nav.tabs a { font-size: .58rem; letter-spacing: -.01em; }
  nav.tabs a span { width: 2.2rem; }
}
/* Dienstdag: aantallen bij de snelkoppelingen */
.snel a em.n { font-style: normal; display: inline-block; min-width: 1.3em; padding: 0 .3em; margin-left: .2em; border-radius: 99px;
  background: var(--red); color: #fff; font-size: .72rem; line-height: 1.3em; }
/* Agenda: één dag met vorige/volgende */
.agenda-dag { display: flex; align-items: center; justify-content: space-between; gap: .6rem; text-align: center; }
.agenda-dag h2 { margin: 0; }
/* Neventaken */
.taken { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.taak { border: 1px solid var(--line); border-radius: 12px; padding: .5rem .6rem; display: flex; flex-direction: column; gap: .15rem; }
details.lot-fix { flex-basis: 100%; }

/* Sluiting en categorie bij elkaar, met twee afzonderlijke verkeerslijsten. */
.vliegveld { overflow: hidden; }
.vliegveld-kop { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 1rem; }
.vliegveld-kop h2 { margin: 0; font-size: 1rem; }
.vliegveld-top { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 1rem; }
.vliegveld .sluit { padding: 0; margin: 0; text-align: left; }
.vliegveld .sluit h3 { font: 600 .8rem/1.4 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.vliegveld .sluit h3 span { color: var(--muted); font-size: .7rem; letter-spacing: .04em; }
.vliegveld .sluit .big { font-size: clamp(3.3rem, 9vw, 5rem); }
.vliegveld .countdown { font-size: .85rem; margin: .4rem 0 0; color: var(--muted); }
.vliegveld-cat { padding-left: 1rem; border-left: 1px solid var(--line); }
.vliegveld .cat-nu { gap: .55rem; align-items: center; }
.vliegveld .cat-nu b { font-size: .95rem; }
.vliegveld .cat-getal { width: 48px; height: 56px; border-radius: 13px; }
.vliegveld .cat-nu.zwaar { border: none; background: none; padding: 0; }
.vliegveld .cat-nu.zwaar .cat-getal { box-shadow: none; background: var(--red-soft); color: var(--red); }
.vliegveld .cat-getal.onbekend { background: var(--card-2); color: var(--muted); }
.vliegveld .cat-label { margin: .5rem 0 0; font-size: .7rem; }
.vliegveld-uitleg { margin: 1rem 0; font-size: .75rem; }
.verkeer { border-top: 1px solid var(--line); padding: .85rem 0; }
.verkeer:last-child { padding-bottom: 0; }
.verkeer > summary { display: flex; align-items: center; gap: .55rem; font-size: .88rem; font-weight: 600; list-style: none; }
.verkeer > summary::-webkit-details-marker { display: none; }
.verkeer > summary::before { content: '›'; display: inline-block; color: var(--muted); font-size: 1.4rem; line-height: 1; transition: transform .15s; }
.verkeer[open] > summary::before { transform: rotate(90deg); }
.verkeer-aantal { margin-left: auto; background: var(--card-2); border-radius: 99px; padding: .05rem .5rem; color: var(--muted); font-size: .75rem; }
.verkeer details { margin-top: .7rem; }
.verkeer .plain li { padding: .35rem 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.verkeer .plain li:last-child { border: none; }
.wekker-dialog { background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; width: min(440px, calc(100% - 32px)); }
.wekker-dialog::backdrop { background: #000b; backdrop-filter: blur(4px); }
.wekker-dialog .row { flex-wrap: wrap; }
#roosterwekker .row { flex-wrap: wrap; }
#roosterwekker input[type=number] { max-width: 9rem; }
@media(max-width: 390px) {
  .vliegveld-top { gap: .6rem; }
  .vliegveld-cat { padding-left: .6rem; }
  .vliegveld .cat-nu { flex-wrap: wrap; gap: .4rem; }
  .vliegveld .cat-nu > div { flex-basis: 100%; }
  .vliegveld .cat-getal { width: 42px; height: 44px; font-size: 2rem; }
}

/* Wifi blijft binnen de ingelogde omgeving; geen opslag in de service-worker-cache. */
#wifi-kaart .row { flex-wrap: wrap; }
.wifi-wachtwoord { width: 100%; font-family: ui-monospace, monospace; letter-spacing: .04em; font-size: 1.15rem; font-weight: 600; }
#wifi-kaart details { margin-top: .6rem; }

.lot-beheer { margin: .75rem 0 .3rem; flex-basis:100%; }
.lot-beheer form { margin-top:.75rem; }
.lot-beheer fieldset { border:1px solid var(--line);border-radius:12px;padding:.7rem;margin:.6rem 0;min-width:0; }
.lot-beheer .row {flex-wrap:wrap;}
.lot-deelnemers li {display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;padding:.4rem 0;}
.lot-deelnemers label {margin:0;}
.lot-verleden {flex-wrap:wrap;}
/* Openbare startpagina: Paraat-huisstijl zonder personeelsnavigatie. */
#app:has(.homepage) { display: block; max-width: 1120px; padding-left: 0; }
.homepage { min-height: 100vh; }
.home-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:24px 28px; }
.home-header button { flex-shrink:0; }
.home-main { padding:20px 28px 32px; }
.home-intro { padding:20px 0 30px; }
.home-intro h1 { font-size:clamp(2.4rem, 6vw, 4rem); margin:.35rem 0 .7rem; }
.home-eyebrow { font-size:.73rem; font-weight:700; letter-spacing:.13em; color:var(--muted); }
.home-status { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.home-statuskaart { padding:26px; margin:0; min-height:190px; }
.home-getal { font:700 clamp(2.7rem, 6vw, 4.8rem)/1.2 var(--display); margin:.65rem 0; color:var(--text); }
.home-cat-hoog { color:var(--gold); }
.home-bron { display:flex; align-items:center; gap:20px; margin:16px 0 28px; }
.home-bron p { flex:1; }
.home-bron button { flex-shrink:0; }
.home-mededelingen { padding:26px; }
.home-mededelingen h2 { font-size:1.5rem; margin-bottom:20px; }
.home-bericht { padding:18px 0; border-top:1px solid var(--line); overflow-wrap:anywhere; }
.home-bericht h3 { font-size:1.05rem; }
.home-bericht p { white-space:normal; margin:.6rem 0; }
.home-bericht time { display:block; margin-top:.75rem; }
.home-footer { padding:16px 0; text-align:center; }
@media(max-width:600px) {
  .home-header { padding:18px 16px; gap:12px; flex-wrap:wrap; }
  .home-header button { font-size:.8rem; }
  .home-main { padding:8px 16px 20px; }
  .home-intro { padding:18px 0 24px; }
  .home-status { grid-template-columns:1fr; gap:12px; }
  .home-statuskaart { min-height:0; padding:20px; }
  .home-getal { font-size:3.5rem; }
  .home-bron { align-items:flex-start; gap:10px; }
  .home-bron button { font-size:.75rem; }
  .home-mededelingen { padding:20px; }
}
/* Dagtaken en privé-suggestielogboek. */
.taakgroep{margin-top:20px}.taakgroep h3{font-size:15px;margin-bottom:8px}.dagtaak{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}.dagtaak input{width:20px;height:20px;flex-shrink:0;margin-top:2px}.dagtaak span{line-height:1.5}.dagtaak small{display:block;font-size:12px}.dagtaak.klaar>span{opacity:.6;text-decoration:line-through}.taakdagen{display:flex;flex-wrap:wrap;gap:12px}.taakdagen label{display:flex;align-items:center;gap:5px}.taakdagen input{width:auto}.log-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}.log-tekst{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6}.log-mail{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}.log-mail button{max-width:100%;white-space:normal;overflow-wrap:anywhere}.log-voorstellen>article{margin-bottom:18px}.home-taken{margin-top:22px}.home-taak{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}.home-taak small{display:block;font-size:12px;margin-top:5px}.home-taak>span{color:var(--red)}.home-taak.klaar{opacity:.6}
@media(max-width:1023px){nav.tabs{overflow-x:auto;grid-auto-columns:minmax(46px,1fr);overscroll-behavior-x:contain}nav.tabs a{min-width:0}nav.tabs a span{width:2.2rem}}
.home-taak>label{display:flex;align-items:flex-start;gap:12px;width:100%;margin:0;cursor:pointer}.home-taak input{width:20px;height:20px;flex-shrink:0;margin:2px 0 0}.home-taak label>span{line-height:1.5;overflow-wrap:anywhere}.home-taak:has(input:disabled)>label{cursor:wait}

/* BMI: echte gebouwdata wordt uitsluitend na de bestaande MFA-login opgehaald. */
.bmi-tellers{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}.bmi-tellers>span{padding:8px 10px;background:var(--panel);border:1px solid var(--line);border-radius:10px;font-size:13px}.bmi-tellers b{display:block;font-size:18px}.bmi-gebouw{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding:14px 0}.bmi-gebouw>div{min-width:0;overflow-wrap:anywhere}.bmi-gebouw p{margin:6px 0}.bmi-gebouw button{flex-shrink:0}.bmi-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}.bmi-actie{border:1px solid var(--line);border-left:3px solid var(--gold);padding:12px;border-radius:10px;margin:12px 0}.bmi-historie{margin-top:20px}.bmi-hist-item{border-top:1px solid var(--line);padding:12px 0}.bmi-hist-item.vervallen{opacity:.65}.bmi-invoer h3{overflow-wrap:anywhere}.bmi-hist-item p,.bmi-actie p{white-space:pre-wrap;overflow-wrap:anywhere}#bmi-overzicht .bmi-historie textarea{min-height:80px}@media(max-width:400px){.bmi-gebouw{align-items:flex-start;flex-direction:column}.bmi-invoer>.row{align-items:flex-start;flex-direction:column}}

.dagkeuze-navigatie{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}.dagkeuze-navigatie a{padding:10px 14px;border:1px solid var(--line);border-radius:12px;color:var(--muted);text-decoration:none}.dagkeuze-navigatie a.on{background:var(--red);color:var(--bg)}.omgeving-keuze{margin:0;max-width:210px}.omgeving-keuze select{font-size:13px;padding:8px;max-width:100%}.beheer-schakelaar{white-space:nowrap}.who{flex-wrap:wrap}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.aanvragen-balk{display:block;padding:15px 20px;border:1px solid var(--red);border-radius:12px;background:var(--panel);margin:12px 20px;color:var(--text)}.film-keuzes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px}.film-keuze{display:flex;align-items:center;gap:12px;text-align:left;width:100%;padding:14px}.film-keuze img{width:54px;border-radius:7px}.film-keuze span{min-width:0;overflow-wrap:anywhere}.film-keuze small{display:block;color:var(--muted);margin-top:6px}.film-keuze.chosen{border-color:var(--red);background:var(--red-soft)}#mcflurry-voorkeur details{margin-top:14px}@media(max-width:600px){.top .who{gap:6px;max-width:62%;justify-content:flex-end}.omgeving-keuze{max-width:170px}.beheer-schakelaar{font-size:11px;padding:6px}.top .brand small{font-size:9px}}
.dagtaken-uitklap > summary { cursor: pointer; font: 700 1.2rem var(--display); color: var(--text); }
.dagtaken-uitklap > summary .pill { margin-left: 8px; vertical-align: middle; font-family: system-ui, sans-serif; }
.dagtaken-inhoud { margin-top: 14px; }

/* Paraat als rustige werkruimte. Lijniconen en oppervlaktes delen dezelfde kleurrollen. */
.ui-icon { width: 1.2em; height: 1.2em; flex: none; vertical-align: middle; }
.icoontitel { display: inline-flex; align-items: center; gap: .55em; }
.icoontitel > .ui-icon { color: var(--muted); }
.glow { height: 320px; }
h1, h2 { font-family: Inter, system-ui, sans-serif; letter-spacing: -.025em; font-weight: 700; }
h2 { font-size: 1.05rem; line-height: 1.3; }
.card { background: var(--card); padding: 17px; margin-bottom: 14px; }
.card > h2 { margin-bottom: .55rem; }
input, select, textarea, button { border-radius: 9px; }
button:not(:disabled):hover { border-color: color-mix(in srgb, var(--muted) 60%, var(--line)); }
button.primary, a.primary { box-shadow: none; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}
input[type="checkbox"], input[type="radio"] {
  width: 1rem;
  height: 1rem;
  padding: 0;
  accent-color: var(--red);
}
.home-taak input, .dagtaak input { width: 20px; height: 20px; }
header.top { gap: .75rem; border-bottom-color: var(--line); }
.brand img { height: 40px; filter: none; }
.brand b { font-size: 1.4rem; }
.brand small { letter-spacing: .07em; }
.who .avatar { flex: none; }
.omgeving-keuze select { background-color: var(--card); }
nav.tabs a { position: relative; gap: .24rem; }
nav.tabs a > span { display: grid; place-items: center; padding: .24rem .35rem; border-radius: 8px; filter: none; }
nav.tabs a.on > span, nav.tabs a.via > span { box-shadow: none; }
nav.tabs a > span .ui-icon { width: 20px; height: 20px; }
.pagina-kop {
  display: flex;
  justify-content: space-between;
  align-items: end;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 20px;
}
.pagina-kop h1 { font-size: clamp(1.7rem, 3vw, 2.25rem); line-height: 1.1; margin: 0; }
.pagina-kop p { color: var(--muted); font-size: .85rem; margin: .45rem 0 0; }
.pagina-kop p::first-letter { text-transform: uppercase; }
.dagkeuze-navigatie {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
  margin: 0;
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.dagkeuze-navigatie a { padding: .52rem .65rem; border: 1px solid transparent; border-radius: 7px; text-align: center; font-size: .82rem; white-space: nowrap; }
.dagkeuze-navigatie a.on { color: var(--text); background: var(--card); border-color: var(--line); font-weight: 700; }
.duo .o4 { order: 3; }
.duo .o3 { order: 4; }
.duo .o5 { order: 5; }
.duo .voorjou { display: block; overflow: visible; padding: 0; margin: 0; }
.voorjou a, .voorjou a.warm {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-height: 54px;
  padding: 10px 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.voorjou a + a { border-top: 1px solid var(--line); }
.voorjou a:last-child { padding-bottom: 0; }
.voorjou .e { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 8px; color: var(--muted); background: var(--card-2); font-size: .9rem; }
.voorjou .warm .e { color: var(--red); background: var(--red-soft); }
.voorjou .actie-tekst { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.voorjou .actie-tekst b { margin: 0; }
.voorjou .actie-tekst small { color: var(--muted); display: block; margin-top: .18rem; }
.voorjou .n { position: static; margin-left: auto; color: var(--red); background: var(--red-soft); }
.snel { gap: 7px; margin-bottom: 14px; }
.snel a { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .34rem; padding: .65rem .3rem; border-radius: 10px; font-size: .8rem; box-shadow: none; }
.snel a > span { display: inline-flex; align-items: center; font-size: .98rem; color: var(--muted); margin: 0; }
.snel a em.n { margin: 0; background: var(--card-2); color: var(--muted); }
.vliegveld-kop { margin-bottom: .7rem; }
.vliegveld-kop h2 { font-size: 1rem; }
.vliegveld-kop button.icon { display: grid; place-items: center; min-width: 34px; min-height: 34px; border: 1px solid var(--line); }
.vliegveld-top { align-items: start; padding: 12px 0; border-block: 1px solid var(--line); }
.vliegveld .sluit h3 { color: var(--muted); font: 600 .76rem/1.4 Inter, system-ui, sans-serif; letter-spacing: .03em; }
.vliegveld .sluit h3 span { display: block; margin-top: .1rem; }
.vliegveld .sluit .big { color: var(--text); background: none; font-variant-numeric: tabular-nums; font-size: clamp(3.1rem, 11vw, 4.6rem); }
.vliegveld .cat-getal { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--card)); }
.vliegveld .cat-nu.zwaar .cat-getal { color: var(--gold); background: color-mix(in srgb, var(--gold) 13%, var(--card)); }
.vliegveld .cat-getal.onbekend { color: var(--muted); background: var(--card-2); }
.vliegveld .verkeer summary { min-height: 39px; }
.vliegveld .verkeer { padding: .32rem 0; }
.vliegveld .verkeer:last-child { padding-bottom: 0; }
.vliegveld-uitleg { margin: .7rem 0; }
.cal { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal .day { aspect-ratio: auto; min-width: 0; min-height: 62px; }
.cal .day.mine { box-shadow: none; }
.dagtaken-uitklap > summary { font: 700 1.03rem/1.35 Inter, system-ui, sans-serif; padding: .25rem 0; }
.dagtaken-uitklap > summary .pill { background: var(--card-2); color: var(--text); }
#mcflurry-voorkeur label.inline { display: flex; gap: .55rem; align-items: center; margin: .85rem 0; }
#mcflurry-voorkeur label.inline input { margin: 0; flex: none; }
#aanvragen-melding { grid-column: 1 / -1; }

/* Openbaar overzicht voor telefoon, desktop en tv. */
.home-header { padding-top: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.home-intro { padding: 12px 0 24px; }
.home-intro h1 { font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -.055em; margin: .25rem 0 .5rem; }
.home-intro { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.home-ploeg { display:flex; flex-wrap:wrap; align-items:center; gap:.7rem 1rem; max-width:100%; padding:.55rem 1rem; border:1px solid var(--line); border-radius:10px; }
.home-ploeg > div, .medewerker-dienst > div { display:grid; gap:.2rem; }
.home-ploeg b { font: 700 clamp(1.5rem, 4vw, 2.6rem)/1 var(--display); color: var(--red); }
.home-osc strong { font:700 clamp(1rem,2vw,1.45rem)/1.12 var(--display); max-width:24ch; overflow-wrap:anywhere; }
.medewerker-dienst { flex-wrap:wrap; gap:.7rem 1.5rem; }
.home-header-acties, .home-radio { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.home-weer-waarden { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; }
.home-weer-waarden strong { color:var(--red); font:700 clamp(2.1rem, 5.5vw, 3.75rem)/1 var(--display); }
.home-weer-details p, .home-weer [data-tv-meting] { margin:.22em 0; }
.home-ticker {
  text-align:left; min-width:0; padding:9px 12px;
  border:1px solid var(--line); border-radius:9px; background:var(--card); overflow:hidden;
}
.home-ticker-regel { display:flex; align-items:center; gap:.75rem; }
.home-ticker b { flex-shrink:0; color:var(--red); }
.home-ticker-regel span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.home-ticker-venster { display:none; }
.home-voetnoot { margin:7px 0 0; }
.home-eyebrow { text-transform: uppercase; font-size: .72rem; letter-spacing: .08em; }
.home-vliegveld { padding: 0; overflow: hidden; }
.home-vliegveld-kop { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; padding: 15px 20px; border-bottom: 1px solid var(--line); }
.home-vliegveld-kop h2 { margin: 0; }
.home-status { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.home-statuskaart { min-height: 0; padding: 20px; }
.home-statuskaart + .home-statuskaart { border-left: 1px solid var(--line); }
.home-getal { font-size: clamp(2.1rem, 8.5vw, 4.35rem); font-variant-numeric: tabular-nums; line-height: 1; margin: .5rem 0; }
.home-cat-basis { color: var(--ok); }
.home-cat-hoog { color: var(--gold); }
.home-onbekend { font-size: clamp(1.45rem, 5.4vw, 2.2rem); color: var(--muted); overflow-wrap: anywhere; }
.home-bron { display: block; border-top: 1px solid var(--line); padding: 13px 20px; margin: 0; }
.home-secties { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 14px; align-items: start; }
.home-secties .card { margin: 0; padding: 18px; }
.home-secties h2 { font-size: 1.05rem; margin-bottom: .7rem; }
.home-bericht { padding: 12px 0; }
.home-bericht:last-child { padding-bottom: 0; }
.home-crewshop { display:none; }

/* Tv-overzicht met wisselende nadruk. Inloggen blijft bereikbaar. */
.home-tv-auto, .home-tv-kop, .homepage:not(.home-tv) .home-tv-extra { display: none; }
@media (max-width:799px) { .home-tv-link { display:none; } }
#app.home-tv-actief { display:block; width:100%; max-width:none; padding-left:0; }
.homepage.home-tv {
  --bg:#111214;
  --card:#1a1b1e;
  --card-2:#232428;
  --text:#f5f2ed;
  --muted:#c1bcb7;
  --line:#37383e;
  --red:#ffa17a;
  --red-soft:#ffa17a25;
  --on-red:#21130d;
  --gold:#f0c785;
  --ok:#8fcea7;
  --tv-accent:#ffa17a;
  --tv-gloed:#a4532524;
  --tv-gloed-x:13%;
  --tv-gloed-y:18%;
  --tv-rand:clamp(19px,2.4vw,44px);
  --tv-verschuif:0px;
  --tv-boven:0px;
  --tv-grid:"intro intro intro" "vlucht meteo informatie" "vlucht taken informatie" "nieuws nieuws nieuws";
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  color:var(--text);
  color-scheme:dark;
  background:radial-gradient(ellipse at var(--tv-gloed-x) var(--tv-gloed-y),var(--tv-gloed),transparent 57%),var(--bg);
}
.home-tv[data-tv-indeling="meteo"] {
  --tv-grid:"intro intro intro" "meteo informatie vlucht" "taken informatie vlucht" "nieuws nieuws nieuws";
  --tv-accent:#95c6f5;
  --tv-gloed:#3976a82d;
  --tv-gloed-x:22%;
  --tv-gloed-y:44%;
  --tv-verschuif:6px;
  --tv-boven:4px;
}
.home-tv[data-tv-indeling="kazerne"] {
  --tv-grid:"intro intro intro" "informatie vlucht meteo" "informatie vlucht taken" "nieuws nieuws nieuws";
  --tv-accent:#e9c58a;
  --tv-gloed:#9775372b;
  --tv-gloed-x:16%;
  --tv-gloed-y:72%;
  --tv-verschuif:-6px;
  --tv-boven:-4px;
}
.home-tv .home-header, .home-tv .home-main {
  padding-inline-start:calc(var(--tv-rand) + var(--tv-verschuif));
  padding-inline-end:calc(var(--tv-rand) - var(--tv-verschuif));
  transition:filter 1.2s ease;
}
.home-tv[data-tv-gedimd] .home-header, .home-tv[data-tv-gedimd] .home-main {
  filter:brightness(.62);
}
@media (prefers-reduced-motion:reduce) {
  .home-tv .home-header, .home-tv .home-main { transition:none; }
}
.home-tv .home-header {
  --tv-header-pad:clamp(8px,1.25vh,15px);
  padding-block-start:calc(var(--tv-header-pad) + var(--tv-boven));
  padding-block-end:var(--tv-header-pad);
  border-bottom-color:transparent;
}
.home-tv[data-tv-indeling="meteo"] .home-header .brand { order:1; }
.home-tv [data-home-login] {
  background:var(--card-2);
  color:var(--text);
  border-color:var(--line);
  box-shadow:none;
}
.home-tv .home-header .brand { pointer-events: none; }
.home-tv .home-main {
  display: grid;
  grid-column: 1;
  grid-row: 2;
  grid-template-rows:auto minmax(112px,.45fr) minmax(0,1fr) auto;
  grid-template-columns:minmax(0,1.18fr) minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:var(--tv-grid);
  min-height: 0;
  gap: clamp(10px, 1.6vh, 20px);
  padding-block:0;
}
.home-tv .home-intro { grid-area:intro; padding:0; flex-wrap:nowrap; }
.home-tv .home-intro-kop, .home-tv .home-tv-link { display:none; }
.home-tv .home-tv-kop { display:flex; align-items:center; gap:clamp(16px,3vw,52px); min-width:0; }
.home-tv-klok, .home-tv-focus { display:grid; gap:.16rem; }
.home-tv-klok time {
  font:700 clamp(2rem,7.4vh,5.2rem)/.86 var(--display);
  font-variant-numeric:tabular-nums;
}
.home-tv-klok span { color:var(--muted); font-size:clamp(.75rem,1.65vh,1.1rem); white-space:nowrap; }
.home-tv-focus .home-eyebrow { color:var(--muted); }
.home-tv-focus strong { color:var(--tv-accent); font:700 clamp(1.25rem,3.3vh,2.2rem)/1 var(--display); white-space:nowrap; }
.home-tv-indicator { display:flex; gap:4px; margin-top:.24rem; }
.home-tv-indicator i { width:clamp(10px,1.5vw,24px); height:3px; border-radius:2px; background:var(--line); }
.home-tv[data-tv-indeling="vliegveld"] .home-tv-indicator i:nth-child(1),
.home-tv[data-tv-indeling="meteo"] .home-tv-indicator i:nth-child(2),
.home-tv[data-tv-indeling="kazerne"] .home-tv-indicator i:nth-child(3) { background:var(--tv-accent); }
.home-tv[data-tv-indeling="kazerne"] .home-ploeg { order:-1; }
.home-tv .home-ploeg { padding:.35rem clamp(.65rem,1.15vw,1rem); background:var(--card); }
.home-tv .home-ploeg b { font-size: clamp(2rem, 6.7vh, 4.7rem); }
.home-tv .home-osc strong { font-size:clamp(1.12rem,3.4vh,2.1rem); max-width:min(23ch,26vw); }
.home-tv .home-secties { display: contents; }
.home-tv .home-vliegveld { grid-area:vlucht; display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
.home-tv .home-weer { grid-area:meteo; padding:clamp(9px, 1.55vh, 18px); }
.home-tv .home-taken { grid-area:taken; }
.home-tv .home-rechts {
  grid-area:informatie;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  min-height:0;
  gap:clamp(10px, 1.6vh, 20px);
}
.home-tv[data-tv-indeling="vliegveld"] .home-vliegveld,
.home-tv[data-tv-indeling="meteo"] .home-weer,
.home-tv[data-tv-indeling="kazerne"] .home-mededelingen {
  box-shadow:inset 0 2px var(--tv-accent);
  border-color:color-mix(in srgb,var(--tv-accent) 36%,var(--line));
}
.home-tv .home-crewshop {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(8px, 1vw, 20px);
}
.home-crewshop-merk { display:flex; align-items:center; gap:clamp(6px, .9vw, 16px); }
.home-crewshop-merk img { width:clamp(36px,6vw,104px); height:auto; flex-shrink:0; }
.home-crewshop-merk p { margin:0; font-size:clamp(.8rem,1.8vh,1.2rem); color:var(--muted); }
.home-crewshop-aanwijzing svg { width:1.8em; height:1.8em; vertical-align:middle; color:var(--text); }
.home-crewshop-merk .home-crewshop-code { margin-top:.25em; }
.home-crewshop-code strong { color:var(--text); font:700 1.4em ui-monospace,monospace; }
.home-crewshop [data-tv-crewshop-qr] { width:clamp(78px,min(12vw,16vh),180px); }
.home-crewshop [data-tv-crewshop-qr] svg { display:block; width:100%; height:auto; background:#fff; border-radius:4px; }
.home-tv .home-weer h2 { margin:0 0 .35em; font-size:clamp(1rem, 2.4vh, 1.55rem); }
.home-tv .home-weer-waarden { display:grid; grid-template-columns:auto minmax(0,1fr); }
.home-tv .home-weer-waarden strong { font-size:clamp(2rem,8.5vh,6rem); }
.home-tv .home-weer-details { font-size:clamp(.86rem,2.65vh,1.7rem); line-height:1.2; }
.home-tv .home-radio { display:none; }
.home-tv .home-ticker { padding-block:6px; }
@media (prefers-reduced-motion:no-preference) {
  .home-tv .home-ticker-met-nieuws .home-ticker-regel {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip-path:inset(50%);
  }
  .home-tv .home-ticker-met-nieuws .home-ticker-venster {
    display:block;
    overflow:hidden;
    mask-image:linear-gradient(to right,transparent,#000 12px,#000 calc(100% - 12px),transparent);
  }
  .home-tv .home-ticker-spoor {
    display:flex;
    width:max-content;
    animation:home-nieuws-loop var(--nieuws-duur,30s) linear infinite;
  }
  .home-ticker-ronde, .home-ticker-item { display:flex; align-items:center; flex:none; }
  .home-ticker-item { gap:.7rem; padding-inline-end:clamp(2rem,4vw,5rem); white-space:nowrap; }
  .home-ticker-item::before {
    content:"";
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--tv-accent);
  }
}
@keyframes home-nieuws-loop {
  to { transform:translateX(-50%); }
}
.home-tv .home-voetnoot { display:none; }
.home-tv .home-main .card { min-width: 0; margin: 0; overflow: clip; }
.home-tv .home-secties .card { padding: clamp(10px, 1.7vh, 22px); }
.home-tv .home-vliegveld-kop { padding: clamp(8px, 1.45vh, 18px); }
.home-tv .home-vliegveld-kop h2 { font-size: clamp(1rem, 2.4vh, 1.55rem); }
.home-tv .home-status { grid-template-columns:1fr; grid-template-rows:repeat(2,minmax(0,1fr)); }
.home-tv .home-statuskaart { display:grid; align-content:center; padding:clamp(6px,1.55vh,23px) clamp(10px,1.5vw,27px); }
.home-tv .home-statuskaart p { margin-block:.22em; }
.home-tv .home-statuskaart + .home-statuskaart { border-left: 0; border-top: 1px solid var(--line); }
.home-tv .home-getal { font-size: clamp(2.4rem, 8.5vh, 6rem); }
.home-tv .home-onbekend { font-size: clamp(1.55rem, 4vh, 3.1rem); }
.home-tv .home-bron { padding:clamp(7px,1.15vh,15px); line-height:1.32; font-size:clamp(.64rem,1.45vh,.95rem); }
.home-tv .home-secties h2 { margin: 0 0 .45em; font-size: clamp(1rem, 2.3vh, 1.45rem); }
.home-tv #home-taken > p:first-child { margin: .3rem 0 .4rem; }
.home-tv .home-taak { padding-block: clamp(3px, .6vh, 10px); }
.home-tv .home-taak > div { overflow-wrap: anywhere; }
.home-tv .home-taak small { display:inline; margin:0 0 0 .4rem; }
.home-tv .home-taak[hidden], .home-tv .home-bericht[hidden] { display:none; }
.home-tv .home-bericht { padding: clamp(5px, 1.1vh, 15px) 0; }
.home-tv .home-bericht p { margin: .35em 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
.home-tv .home-bericht time { margin: .35em 0 0; }
.home-tv .home-footer { grid-area:nieuws; padding:0 0 clamp(8px,1.25vh,16px); }
.home-tv [data-home-refresh], .home-tv #home-taken-hulp, .home-tv #home-taken-fout { display: none; }
.home-tv .home-tv-auto { display: inline; }
.home-tv .home-tv-extra { margin: .2em 0 0; }
@media (max-height: 560px) {
  .home-tv .home-getal { font-size:clamp(1.7rem,6.5vh,3rem); margin-block:.12em; }
  .home-tv .home-statuskaart { padding-block:3px; }
  .home-tv .home-statuskaart .small { font-size:.72rem; line-height:1.18; }
  .home-tv .home-vliegveld-kop { padding-block: 7px; }
  .home-tv .home-tv-auto { display:none; }
  .home-tv .home-bron { padding:.35rem .55rem; font-size:.61rem; line-height:1.2; }
}

.werkplek-links, .taak-acties { flex-wrap: wrap; }
.agenda-indeling-plekken { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,210px),1fr)); gap: 6px 12px; }
.dagkeuze-navigatie { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media(max-width: 800px) { .dagkeuze-navigatie { grid-template-columns: repeat(3,minmax(0,1fr)); } }
.wekker-kop { justify-content: space-between; flex-wrap: wrap; gap: .4rem .8rem; }
.wekker-kop h2 { margin: 0; }
.wekker-volgende { display: grid; gap: 2px; padding: 10px 12px; margin: .75rem 0; background: var(--panel); border-radius: 9px; }
.wekker-onderdeel { border-top: 1px solid var(--line); padding: .7rem 0; }
.wekker-onderdeel summary { cursor: pointer; font-weight: 600; }
.wekker-onderdeel[open] > summary { margin-bottom: .5rem; }
.werkplek-links { margin-block: .6rem 1rem; }
.dienstploeg { border-color: var(--gold); }
.werkplektaken { margin-top: 1rem; }
.taak-toelichting { white-space: pre-wrap; overflow-wrap: anywhere; }
.bmi-getest { justify-content: flex-start; gap: 8px; margin-block: 4px; white-space: nowrap; }
.bmi-getest input { flex: 0 0 18px; width: 18px; height: 18px; margin: 0; }
[data-bmi-uitkomst] { border: 1px solid var(--line); border-radius: 10px; margin-block: 10px; }
.bmi-bezoek-pagina { padding: clamp(12px, 3vw, 32px); }
#bmi-bezoek { max-width: 520px; margin: 0 auto; }
#bmi-bezoek h1 { font-size: clamp(1.5rem, 6vw, 2rem); }
.bmi-bezoek-plek { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin: 16px 0; }
.bmi-bezoek-plek p { margin: 0; }
.bmi-sticker-print {
  max-width: min(440px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
}
.bmi-sticker-print::backdrop { background: #000a; }
.bmi-sticker-label {
  display: grid;
  justify-items: center;
  gap: 4px;
  background: #fff;
  color: #000;
  text-align: center;
  border: 1px solid #000;
  padding: 12px;
  border-radius: 4px;
  overflow-wrap: anywhere;
}
.bmi-sticker-label svg { width: min(100%, 200px); height: auto; }
.bmi-sticker-label p { margin: 0; }
@media print {
  body:has(.bmi-sticker-print[open]) > :not(.bmi-sticker-print) { display: none !important; }
  .bmi-sticker-print[open] {
    position: static;
    margin: 5mm;
    width: 72mm;
    max-height: none;
    padding: 0;
    border: 0;
    overflow: visible;
  }
  .bmi-sticker-print > :not(.bmi-sticker-label), .bmi-sticker-print::backdrop { display: none; }
  .bmi-sticker-label svg { width: 42mm; }
}

@media (min-width: 1024px) {
  #app { grid-template-columns: 222px minmax(0, 1fr); max-width: 1360px; }
  #app:has(> .homepage):not(.home-tv-actief) { max-width: 1120px; }
  #view { padding-top: 24px; }
  #view[data-view="rooster"] { max-width: 1010px; }
  nav.tabs { gap: 3px; padding: 8px; box-shadow: none; border-radius: 12px; background: var(--card); }
  nav.tabs a { padding: .62rem .7rem; gap: .7rem; border-radius: 8px; font-size: .88rem; }
  nav.tabs a.on, nav.tabs a.via { color: var(--red); background: var(--red-soft); font-weight: 700; }
  nav.tabs a.on::before, nav.tabs a.via::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px; border-radius: 3px; background: currentColor; }
  .duo { gap: 0 18px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}
@media (max-width: 1023px) {
  nav.tabs { grid-auto-columns: minmax(0, 1fr); }
  nav.tabs a { font-size: clamp(.59rem, 2.6vw, .72rem); }
}
@media (max-width: 600px) {
  header.top { padding-inline: 12px; gap: 6px; }
  .brand { gap: .4rem; min-width: 0; }
  .brand img { height: 33px; }
  .brand b { font-size: 1.25rem; }
  header.top .brand small { font-size: .58rem; }
  .top .who { gap: 5px; max-width: 60%; }
  .top .brand-organisatie { display: none; }
  .omgeving-keuze { max-width: min(35vw, 145px); }
  .omgeving-keuze select { padding: 6px; font-size: .72rem; }
  .who .avatar { width: 31px; height: 31px; }
  .pagina-kop { display: grid; justify-content: stretch; gap: 12px; margin-bottom: 14px; }
  .dagkeuze-navigatie a { font-size: .76rem; padding-inline: .3rem; }
  main { padding-inline: 13px; }
  .card { padding: 14px; margin-bottom: 12px; }
  .vliegveld-top { gap: .7rem; }
  .vliegveld .cat-nu { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: start; gap: .42rem; }
  .vliegveld .cat-getal { width: 34px; height: 36px; font-size: 1.8rem; }
  .vliegveld-cat { padding-left: .65rem; }
  .vliegveld .cat-nu b { font-size: .86rem; }
  .vliegveld .cat-nu > div { overflow-wrap: anywhere; font-size: .78rem; line-height: 1.45; }
  .vliegveld .cat-label { font-size: .68rem; }
  .snel a { display: grid; grid-template-columns: auto auto; align-content: center; row-gap: .2rem; }
  .snel a > b { grid-row: 2; grid-column: 1 / -1; }
  .snel a > span { grid-row: 1; grid-column: 1; justify-content: center; }
  .snel a > em.n { grid-row: 1; grid-column: 2; }
  .cal { gap: 3px; }
  .cal .day { min-height: 46px; }
  .cal .day small { white-space: normal; overflow-wrap: anywhere; font-size: .56rem; letter-spacing: 0; }
  .home-header { padding: 14px 16px; }
  .home-intro { padding: 12px 0 18px; }
  .home-vliegveld { padding: 0; }
  .home-vliegveld-kop, .home-bron { padding: 12px; }
  .home-vliegveld-kop h2 { font-size: .93rem; }
  .home-vliegveld-kop button { font-size: .72rem; }
  .home-statuskaart { padding: 12px; }
  .home-statuskaart .home-eyebrow { font-size: .65rem; }
  .home-statuskaart .small, .home-bron { font-size: .74rem; }
  .home-secties { grid-template-columns: 1fr; }
  .home-secties .card { padding: 14px; }
}
/* Oefenregistratie en verlof gebruiken dezelfde compacte kaarten als Dienstdag. */
.currency-filters { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0; }
.currency-filters label { flex: 1 1 160px; min-width: 0; }
.currency-persoon { border-top: 1px solid var(--border, #403831); padding: 12px 0; }
.currency-persoon > summary { cursor: pointer; line-height: 1.6; }
.currency-kaart, .verlof-aanvraag { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 14px 0; border-top: 1px solid var(--border, #403831); }
.currency-kaart > div:first-child, .verlof-aanvraag > div { min-width: 0; overflow-wrap: anywhere; }
.currency-kaart p, .verlof-aanvraag p { margin: 4px 0; }
.currency-status { display: grid; justify-items: end; gap: 8px; flex-shrink: 0; }
.currency-registreer { margin-top: 8px; }
.verlof-dagen { margin: 14px 0; }
@media (max-width: 480px) {
  .currency-kaart { flex-direction: column; gap: 8px; }
  .currency-status { display: flex; flex-wrap: wrap; justify-items: start; }
  .verlof-aanvraag { flex-direction: column; }
}