@font-face{font-family:"Atkinson Hyperlegible";src:url(fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage-grotesque-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage-grotesque-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
/* Kleuren afgeleid van de huisstijl van de Posten (oranje-rood verloop, warm lichte achtergrond). Layout: één kolom-app; kop met inlogstatus, tabbladen per rol, dagplanning als twee fietsbanen (9–17 u). */
:root{
  --bg:#F8F2EE; --surface:#FFFFFF; --sunk:#F3EAE5; --ink:#1F1F1F; --muted:#665A53; --line:#E5D6CD;
  --accent:#C25200; --accent-ink:#FFFFFF; --accent-soft:#FDEADB;
  --brand-1:#F28800; --brand-2:#EE6A06; --brand-3:#E62E12;
  --duo:#2C68A8; --duo-soft:#DCE8F5; --rol:#27805A; --rol-soft:#D9EFE4;
  --warn:#8A5A00; --warn-soft:#FBEBC8; --mail:#FFFCFA; --on-bike:#FFFFFF;
  --display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body:"Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --r:10px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#1A1513; --surface:#241D1A; --sunk:#2E2522; --ink:#F2ECE8; --muted:#B3A59D; --line:#3C312C;
  --accent:#FF8A33; --accent-ink:#1F1206; --accent-soft:#3D2716;
  --brand-1:#F28800; --brand-2:#EE6A06; --brand-3:#E62E12;
  --duo:#79AEE6; --duo-soft:#1D2D40; --rol:#6CC79A; --rol-soft:#1A3328;
  --warn:#F0B84A; --warn-soft:#3A2E14; --mail:#211B18; --on-bike:#0E1714; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#1A1513; --surface:#241D1A; --sunk:#2E2522; --ink:#F2ECE8; --muted:#B3A59D; --line:#3C312C;
  --accent:#FF8A33; --accent-ink:#1F1206; --accent-soft:#3D2716;
  --brand-1:#F28800; --brand-2:#EE6A06; --brand-3:#E62E12;
  --duo:#79AEE6; --duo-soft:#1D2D40; --rol:#6CC79A; --rol-soft:#1A3328;
  --warn:#F0B84A; --warn-soft:#3A2E14; --mail:#211B18; --on-bike:#0E1714; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.5}
.wrap{max-width:1040px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 48px}
h1,h2,h3{font-family:var(--display);line-height:1.15;text-wrap:balance;margin:0}
h1{font-size:1.5rem}h2{font-size:1.25rem}h3{font-size:1.05rem}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.band{height:6px;background:linear-gradient(90deg,var(--brand-1),var(--brand-2) 55%,var(--brand-3))}
.org{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--accent)}
.linkbtn{background:none;border:0;padding:0;text-decoration:underline;cursor:pointer;color:inherit;font-size:inherit}
header.top{padding-block:20px 12px;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:flex-end;justify-content:space-between}
.brand small{display:block;color:var(--muted);font-size:.9rem}
.who{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:.95rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.rolsel{min-height:36px;padding:2px 8px;border:1.5px solid var(--line);border-radius:999px;background:var(--sunk);font-weight:700;font-size:.85rem}
.role{display:inline-block;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--sunk);color:var(--muted)}
nav.tabs{display:flex;gap:4px;border-bottom:2px solid var(--line);margin-bottom:20px;overflow-x:auto}
nav.tabs button{background:none;border:0;padding:10px 14px;min-height:44px;cursor:pointer;color:var(--muted);font-weight:700;border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap}
nav.tabs button[aria-current="page"]{color:var(--ink);border-color:var(--accent)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:8px 18px;border-radius:var(--r);border:1.5px solid var(--line);background:var(--surface);cursor:pointer;font-weight:700}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.danger{color:var(--accent);border-color:var(--accent)}
.btn.small{min-height:36px;padding:4px 12px;font-size:.9rem}
.grid2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;align-items:start}
.grid2.eq{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:820px){.grid2,.grid2.eq{grid-template-columns:minmax(0,1fr)}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:14px;min-width:0}
.muted{color:var(--muted)}
.small{font-size:.88rem}
label{font-weight:700;font-size:.95rem}
.field{display:flex;flex-direction:column;gap:4px}
input[type=email],input[type=text],input[type=tel],input[type=date],select,textarea{min-height:44px;padding:8px 12px;border:1.5px solid var(--line);border-radius:8px;background:var(--surface);width:100%}
textarea{min-height:90px;resize:vertical}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row>.field{flex:1 1 160px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px dashed var(--line);background:none;border-radius:999px;padding:4px 12px;min-height:36px;cursor:pointer;font-size:.88rem}
.chip:hover{border-color:var(--accent)}
.chip.pick{border-style:solid;font-size:.95rem;min-height:44px;padding:6px 14px;font-weight:700}
input:disabled{background:var(--sunk);color:var(--muted);cursor:not-allowed}
.note{background:var(--sunk);border-radius:8px;padding:10px 12px;font-size:.9rem}
.codeveld{font-size:1.6rem;letter-spacing:.3em;font-variant-numeric:tabular-nums;max-width:11em;text-align:center}
.note.warn{background:var(--warn-soft);color:var(--warn)}

/* dagkiezer */
.days{display:flex;gap:6px;align-items:stretch;margin-bottom:14px}
.days .scroll{display:flex;gap:6px;overflow-x:auto;flex:1;min-width:0}
.day{flex:1 0 64px;border:1.5px solid var(--line);background:var(--surface);border-radius:8px;padding:6px 4px;cursor:pointer;text-align:center;line-height:1.2;min-height:56px}
.day b{display:block;font-size:1.15rem;font-variant-numeric:tabular-nums}
.day span{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.day[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.day.today span{color:var(--accent);font-weight:700}
.day i{display:block;height:6px;margin-top:4px;font-style:normal;font-size:.7rem;color:var(--muted)}
.arrow{min-width:44px;border:1.5px solid var(--line);background:var(--surface);border-radius:8px;cursor:pointer;font-size:1.2rem}

/* banen */
.board{display:flex;flex-direction:column;gap:10px}
.hours,.lane{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;align-items:center}
@media (max-width:520px){.hours,.lane{grid-template-columns:minmax(0,1fr)}.hours .sp{display:none}.lane-name{font-size:.9rem}}
.hours .ticks{position:relative;height:18px;font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}
.hours .ticks>span{position:absolute;transform:translateX(-50%)}
.hours .ticks>span:first-child{transform:none}.hours .ticks>span:last-child{transform:translateX(-100%)}
.lane-name{font-weight:700;display:flex;align-items:center;gap:8px}
.dot{width:12px;height:12px;border-radius:3px;flex:none}
.track{position:relative;height:76px;border-radius:8px;background:var(--sunk);cursor:pointer;overflow:hidden;
  background-image:repeating-linear-gradient(to right,transparent 0,transparent calc(100%/8 - 1px),var(--line) calc(100%/8 - 1px),var(--line) calc(100%/8))}
.track.past{cursor:default;opacity:.75}
.track.ro{cursor:default}
.blk{position:absolute;top:6px;bottom:6px;border-radius:6px;padding:4px 8px;font-size:.8rem;line-height:1.25;overflow:hidden;cursor:pointer;border:0;text-align:left;border-left:4px solid}
.blk.duo{background:var(--duo-soft);border-color:var(--duo)}
.blk.rol{background:var(--rol-soft);border-color:var(--rol)}
.blk.mine{color:var(--on-bike);box-shadow:0 2px 6px rgb(0 0 0 / .25);z-index:1}
.blk.mine.duo{background:var(--duo)}.blk.mine.rol{background:var(--rol)}
.blk.mine{border-left-color:var(--ink)}
.blk .me{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--on-bike);color:var(--ink);border-radius:4px;padding:0 5px;margin-bottom:2px}
.blk.mine.duo .me{color:var(--duo)}.blk.mine.rol .me{color:var(--rol)}
.item.mine{border:2px solid var(--accent)}
.blk b{display:block;font-variant-numeric:tabular-nums}
.buf{position:absolute;top:6px;bottom:6px;border-radius:0 6px 6px 0;background:repeating-linear-gradient(45deg,var(--line) 0 3px,transparent 3px 7px);pointer-events:none}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.85rem;color:var(--muted);margin-top:6px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.sw{width:22px;height:12px;border-radius:3px;display:inline-block}

/* tabellen en lijsten */
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.93rem}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.tag{display:inline-block;padding:1px 8px;border-radius:999px;font-size:.78rem;font-weight:700}
.tag.duo{background:var(--duo-soft);color:var(--duo)}.tag.rol{background:var(--rol-soft);color:var(--rol)}
.tag.ok{background:var(--rol-soft);color:var(--rol)}.tag.off{background:var(--sunk);color:var(--muted)}.tag.wait{background:var(--warn-soft);color:var(--warn)}
.tag.now{background:var(--accent);color:var(--accent-ink)}
.list{display:flex;flex-direction:column;gap:10px}
.item{display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:4px 14px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
@media (max-width:520px){.item{grid-template-columns:minmax(0,1fr)}}
.item .t{font-variant-numeric:tabular-nums;font-weight:700}
.item .t small{display:block;font-weight:400;color:var(--muted);font-size:.8rem}
.bwset{border:0;padding:0;margin:0}
.bwset legend{font-weight:700;font-size:.95rem;margin-bottom:4px}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.chk{display:flex;align-items:center;gap:8px;min-height:40px;padding:4px 10px;border:1.5px solid var(--line);border-radius:8px;font-weight:400;cursor:pointer;background:var(--surface)}
.chk input{width:18px;height:18px;accent-color:var(--accent)}
.chk:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.grp{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-top:6px}
.checks.vast .chk{border-style:solid;border-color:var(--duo)}
.askp{border:2px solid var(--warn);background:var(--warn-soft);margin-bottom:20px}
.askp h2{color:var(--ink)}
.ask{background:var(--surface);border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.ask .t{font-weight:700;font-variant-numeric:tabular-nums}
.empty{padding:18px;border:1.5px dashed var(--line);border-radius:var(--r);color:var(--muted);text-align:center}

/* modal + toast */
.overlay{position:fixed;inset:0;background:rgb(0 0 0 / .45);display:flex;align-items:flex-end;justify-content:center;z-index:20;padding:16px;padding-bottom:max(16px,env(safe-area-inset-bottom,0px))}
@media (min-width:600px){.overlay{align-items:center}}
.modal{background:var(--surface);border-radius:14px;max-width:520px;width:100%;max-height:90vh;overflow:auto;padding:22px;display:flex;flex-direction:column;gap:14px}
.modal .acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.err{color:var(--accent);font-weight:700;font-size:.92rem}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:999px;font-weight:700;z-index:30;max-width:calc(100% - 32px)}
dl.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;margin:0}
dl.kv dt{color:var(--muted)}dl.kv dd{margin:0;font-weight:700}
@media (max-width:520px){
  .hours .mm{display:none}
  .panel{padding:14px}
  nav.tabs button{padding:10px 10px;font-size:.95rem}
  .blk{padding:3px 5px;font-size:.74rem}
  .day{flex-basis:56px}
  table{font-size:.84rem}
  th,td{padding:8px 5px}
  th{font-size:.66rem;letter-spacing:.03em}
}
td.num,td.nw{white-space:nowrap}
@media (max-width:640px){
  table.cards thead{display:none}
  table.cards,table.cards tbody{display:block}
  table.cards tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:12px 0;border-bottom:1px solid var(--line)}
  table.cards td{border:0;padding:0}
  table.cards td:nth-child(2){grid-column:1}
  table.cards td:nth-child(3){grid-column:1;color:var(--muted);font-size:.85rem}
  table.cards td:nth-child(3)::before{content:"Instructie: "}
  table.cards td:nth-child(4){grid-column:2;grid-row:1}
  table.cards td:nth-child(5){grid-column:1 / -1}
}
@media (prefers-reduced-motion:no-preference){.modal{animation:up .18s ease-out}@keyframes up{from{transform:translateY(12px);opacity:.6}}}

html{-webkit-text-size-adjust:100%}
body{margin:0;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
[hidden]{display:none!important}
.loading{padding:40px 0;text-align:center;color:var(--muted)}
.foot{margin-top:28px;font-size:.82rem;color:var(--muted);text-align:center}
.nowrap{white-space:nowrap}
input[type=checkbox]{accent-color:var(--accent)}
.rolechecks{display:flex;flex-wrap:wrap;gap:6px}
/* Testversie */
.testbalk{background:var(--warn-soft);color:var(--warn);border:1.5px dashed var(--warn);border-radius:8px;padding:8px 12px;margin-top:12px;font-size:.92rem}
.testacc{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:6px;align-items:start}
.testkol{display:flex;flex-direction:column;gap:6px}
.testacc .btn{text-align:left}
.codetoon{font-size:1.3rem;letter-spacing:.15em;white-space:nowrap}
.testbeheer{border:1.5px dashed var(--warn)}
.lbl{font-weight:700}
.linkbtn{background:none;border:0;padding:0;color:inherit;text-decoration:underline;cursor:pointer;font:inherit;min-height:24px}
.modal.privacy h3{font-size:1rem;margin:14px 0 4px}
.modal.privacy ul{margin:0;padding-left:20px}
.modal.privacy p{margin:0}
/* Vaste dagdelen */
.tag.vast{background:var(--sunk);color:var(--ink);border:1px solid var(--line)}
.item.dd{grid-template-columns:minmax(0,1fr) auto}
@media (max-width:520px){.item.dd{grid-template-columns:minmax(0,1fr)}}
.warnt{color:var(--warn)}
/* Tijdelijk afgemelde bewoners */
.chk.afw input:disabled + *{opacity:.6}
.chk:has(input:disabled){opacity:.55}
/* Ritten als regels: één regel per rit, de hele regel tikbaar */
.btn.groot{min-height:52px;padding:10px 22px;font-size:1.05rem}
.rijen{gap:8px}
.rij{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 12px;align-items:center;width:100%;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:inherit;font:inherit;cursor:pointer;min-height:52px}
.rij:hover{border-color:var(--muted)}
.rij.mine{border:2px solid var(--accent)}
.rij .t{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.rij .t small{display:block;font-weight:400;color:var(--muted);font-size:.82rem}
.rij .w{display:flex;flex-direction:column;gap:2px;min-width:0}
.rij .tags{display:flex;gap:4px;flex-wrap:wrap}
.rij .pijl{font-size:1.4rem;color:var(--muted)}
.tag.jouw{background:var(--accent);color:var(--accent-ink)}
details.gereden summary,details.ddnieuw summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}
/* Compacte kop op de telefoon */
@media (max-width:600px){
  header.top{padding-block:10px 6px;align-items:center;flex-wrap:nowrap;gap:8px}
  .brand .org,.brand small{display:none}
  .brand h1{font-size:1.25rem}
  .who{gap:6px;font-size:.85rem;justify-content:flex-end;flex-wrap:wrap;text-align:right}
  .who .btn{min-height:36px;padding:4px 10px;font-size:.85rem}
  .who .role{display:none}
  .testbalk{padding:4px 10px;font-size:.8rem;margin-top:8px}
  nav.tabs{margin-bottom:12px}
}
/* Uitklapbare delen in formulieren; knoppen onderaan een venster altijd zichtbaar */
details.uitklap summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center;color:var(--ink)}
details.uitklap summary::marker{color:var(--muted)}
.modal .acts{position:sticky;bottom:-22px;background:var(--surface);padding:12px 0 22px;margin-bottom:-22px;border-top:1px solid var(--line)}
/* Eén kolom, niet te breed op de laptop */
.smal{max-width:720px}
@media (max-width:420px){nav.tabs{gap:0}nav.tabs button{padding:10px 7px;font-size:.92rem}}
@media (max-width:375px){nav.tabs button{padding:10px 5px;font-size:.86rem;letter-spacing:-.01em}}
/* Uitklapbare delen herkenbaar maken met een pijltje (display:flex verbergt het standaardpijltje) */
details.gereden>summary,details.ddnieuw>summary,details.uitklap>summary{list-style:none;gap:8px}
details.gereden>summary::-webkit-details-marker,details.ddnieuw>summary::-webkit-details-marker,details.uitklap>summary::-webkit-details-marker{display:none}
details.gereden>summary::before,details.ddnieuw>summary::before,details.uitklap>summary::before{content:'';width:0;height:0;border-left:7px solid var(--muted);border-top:5px solid transparent;border-bottom:5px solid transparent;transition:transform .15s}
details[open].gereden>summary::before,details[open].ddnieuw>summary::before,details[open].uitklap>summary::before{transform:rotate(90deg)}
/* Hulp onderweg */
.hulp{border-left:4px solid var(--accent)}
.hulpknoppen{display:flex;flex-wrap:wrap;gap:10px}
.hulpknoppen .btn{text-decoration:none;color:var(--ink);min-height:48px}
.btn.nood{background:#B3261E;border-color:#B3261E;color:#fff}