/* ToDo — Material 3 Expressive, groene seed. Layout: één kolom, groepjes met gesegmenteerde hoeken. */
:root {
  --primary:#2b6a46; --on-primary:#fff; --primary-container:#b0f1c4; --on-primary-container:#00210f;
  --secondary-container:#cfe9d7; --on-secondary-container:#0b1f14;
  --tertiary:#3a6472; --tertiary-container:#bee9fa; --on-tertiary-container:#001f28;
  --surface:#f6faf6; --sc-low:#eff5f0; --sc:#e8efe9; --sc-high:#e2e9e3; --sc-highest:#dbe3dd;
  --on-surface:#171d19; --on-surface-variant:#414942; --outline:#717972; --outline-variant:#c0c9c0;
  --inverse-surface:#2c322e; --inverse-on-surface:#edf2ed; --inverse-primary:#95d5a9; --error:#ba1a1a;
  --font-display:"Google Sans Flex","Roboto Flex",system-ui,sans-serif;
  --font-body:"Roboto Flex","Google Sans Flex",system-ui,sans-serif;
  --spring:cubic-bezier(.34,1.56,.64,1); --emph:cubic-bezier(.2,0,0,1);
  --r-xl:28px; --r-l:20px; --r-s:6px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --primary:#95d5a9; --on-primary:#00391f; --primary-container:#0f5131; --on-primary-container:#b0f1c4;
  --secondary-container:#344c3c; --on-secondary-container:#cfe9d7;
  --tertiary:#a2cddd; --tertiary-container:#214c5a; --on-tertiary-container:#bee9fa;
  --surface:#0f1512; --sc-low:#171d19; --sc:#1b211d; --sc-high:#252b27; --sc-highest:#303632;
  --on-surface:#dfe4df; --on-surface-variant:#c0c9c0; --outline:#8a938b; --outline-variant:#414942;
  --inverse-surface:#dfe4df; --inverse-on-surface:#2c322e; --inverse-primary:#2b6a46; --error:#ffb4ab;
  color-scheme:dark;
}}
:root[data-theme="dark"] {
  --primary:#95d5a9; --on-primary:#00391f; --primary-container:#0f5131; --on-primary-container:#b0f1c4;
  --secondary-container:#344c3c; --on-secondary-container:#cfe9d7;
  --tertiary:#a2cddd; --tertiary-container:#214c5a; --on-tertiary-container:#bee9fa;
  --surface:#0f1512; --sc-low:#171d19; --sc:#1b211d; --sc-high:#252b27; --sc-highest:#303632;
  --on-surface:#dfe4df; --on-surface-variant:#c0c9c0; --outline:#8a938b; --outline-variant:#414942;
  --inverse-surface:#dfe4df; --inverse-on-surface:#2c322e; --inverse-primary:#2b6a46; --error:#ffb4ab;
  color-scheme:dark;
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; background:var(--surface); color:var(--on-surface); }
body { font:400 16px/1.45 var(--font-body); min-height:100%; overscroll-behavior-y:contain; }
button { font:inherit; color:inherit; border:0; background:none; cursor:pointer; }
:focus-visible { outline:3px solid var(--primary); outline-offset:2px; }
[hidden] { display:none !important; }

.ms { font-family:"Material Symbols Rounded"; font-weight:normal; font-style:normal; font-size:24px; line-height:1;
  display:inline-block; width:1em; height:1em; overflow:hidden; letter-spacing:normal; text-transform:none; white-space:nowrap;
  font-feature-settings:"liga"; -webkit-font-smoothing:antialiased; font-variation-settings:"FILL" 0,"wght" 500,"opsz" 24; flex:none; }
.ms.filled { font-variation-settings:"FILL" 1,"wght" 500,"opsz" 24; }

.app { max-width:640px; margin:0 auto; padding-left:max(16px, env(safe-area-inset-left,0px));
  padding-right:max(16px, env(safe-area-inset-right,0px)); padding-bottom:calc(120px + env(safe-area-inset-bottom,0px)); }

/* Top app bar (large, inklappend) */
.topbar { position:sticky; top:0; z-index:5; background:var(--surface); margin:0 calc(-1 * max(16px, env(safe-area-inset-left,0px)));
  padding:calc(8px + env(safe-area-inset-top,0px)) max(16px, env(safe-area-inset-right,0px)) 8px max(16px, env(safe-area-inset-left,0px));
  transition:background .3s var(--emph); }
.topbar.scrolled { background:var(--sc); }
.topbar-row { display:flex; align-items:center; justify-content:space-between; height:48px; }
.topbar-small { font:600 20px/1 var(--font-display); opacity:0; transform:translateY(6px); transition:.25s var(--emph); }
.topbar.scrolled .topbar-small { opacity:1; transform:none; }
.icon-btn { width:48px; height:48px; border-radius:50%; display:grid; place-items:center; color:var(--on-surface-variant);
  transition:background .2s, border-radius .35s var(--spring); }
.icon-btn:hover { background:color-mix(in srgb, var(--on-surface) 8%, transparent); }
.icon-btn:active { border-radius:14px; }
.icon-btn.on { background:var(--primary-container); color:var(--on-primary-container); }
.display { font:700 clamp(44px, 13vw, 64px)/1 var(--font-display); font-variation-settings:"opsz" 144; letter-spacing:-.02em;
  margin:8px 4px 4px; text-wrap:balance; }
.subtitle { margin:0 4px 8px; color:var(--on-surface-variant); font-size:15px; font-variant-numeric:tabular-nums; }

/* Locatie-banner */
.loc-banner { display:flex; gap:12px; align-items:center; padding:14px 18px; margin:8px 0 4px; border-radius:var(--r-xl);
  background:var(--tertiary-container); color:var(--on-tertiary-container); animation:pop .5s var(--spring); }
.loc-banner .ms { font-size:28px; }
.loc-text { display:flex; flex-direction:column; min-width:0; }
.loc-text b { font:600 16px/1.2 var(--font-display); }
.loc-text span { font-size:13px; opacity:.85; }

/* Filter chips */
.chips { display:flex; gap:8px; overflow-x:auto; padding:12px 0; scrollbar-width:none; margin:0 -4px; padding-inline:4px; }
.chips::-webkit-scrollbar { display:none; }
.chip { display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 16px 0 10px; border-radius:12px; white-space:nowrap;
  border:1px solid var(--outline-variant); color:var(--on-surface-variant); font-weight:500; font-size:14px;
  transition:background .2s, border-radius .4s var(--spring), color .2s; }
.chip .ms { font-size:18px; }
.chip[aria-pressed="true"] { background:var(--secondary-container); color:var(--on-secondary-container); border-color:transparent; border-radius:18px; }
.chip .count { font-variant-numeric:tabular-nums; opacity:.7; margin-left:2px; }

/* Lijst: gesegmenteerde groep */
.section-label { font:600 14px/1 var(--font-display); letter-spacing:.04em; color:var(--primary); margin:18px 8px 10px;
  display:flex; align-items:center; gap:6px; }
.section-label .ms { font-size:18px; }
.group { display:flex; flex-direction:column; gap:3px; }
.item { position:relative; touch-action:pan-y; border-radius:var(--r-s); overflow:hidden; }
.group .item:first-child { border-top-left-radius:var(--r-l); border-top-right-radius:var(--r-l); }
.group .item:last-child { border-bottom-left-radius:var(--r-l); border-bottom-right-radius:var(--r-l); }
.item-bg { position:absolute; inset:0; background:var(--primary); color:var(--on-primary); display:flex; align-items:center; padding-left:22px; }
.item-fg { position:relative; display:flex; gap:14px; align-items:center; padding:14px 14px 14px 12px; background:var(--sc-low);
  transition:transform .35s var(--spring), background .2s; min-height:72px; }
.near .item-fg { background:color-mix(in srgb, var(--tertiary-container) 55%, var(--sc-low)); }
.item-fg:active { background:var(--sc); }
.item.swiping .item-fg { transition:none; }
.check { width:40px; height:40px; flex:none; display:grid; place-items:center; border-radius:50%; position:relative; }
.check i { width:24px; height:24px; border-radius:50%; border:2px solid var(--outline); display:grid; place-items:center;
  transition:border-radius .45s var(--spring), background .2s, border-color .2s, transform .45s var(--spring); }
.check i .ms { font-size:18px; color:var(--on-primary); transform:scale(0); transition:transform .4s var(--spring); }
.done .check i { border-radius:8px; background:var(--primary); border-color:var(--primary); transform:rotate(-8deg); }
.done .check i .ms { transform:scale(1) rotate(8deg); }
.body { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; cursor:pointer; }
.title { font:500 17px/1.3 var(--font-body); overflow-wrap:anywhere; transition:color .2s; }
.done .title { color:var(--on-surface-variant); text-decoration:line-through; text-decoration-color:var(--outline); }
.notes { font-size:14px; color:var(--on-surface-variant); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.meta { display:flex; flex-wrap:wrap; gap:6px; }
.tag { display:inline-flex; align-items:center; gap:4px; height:26px; padding:0 10px 0 6px; border-radius:8px; font-size:13px; font-weight:500;
  background:var(--sc-highest); color:var(--on-surface-variant); font-variant-numeric:tabular-nums; }
.tag .ms { font-size:16px; }
.tag.place { background:var(--secondary-container); color:var(--on-secondary-container); }
.tag.here { background:var(--tertiary); color:var(--surface); }
.tag.late { color:var(--error); }

/* Lege staat */
.empty { text-align:center; padding:56px 24px; color:var(--on-surface-variant); }
.empty .blob { width:120px; height:120px; margin:0 auto 18px; background:var(--primary-container); color:var(--on-primary-container);
  display:grid; place-items:center; border-radius:42% 58% 63% 37% / 41% 44% 56% 59%; animation:morph 9s ease-in-out infinite; }
.empty .blob .ms { font-size:52px; }
.empty b { display:block; font:600 22px/1.2 var(--font-display); color:var(--on-surface); margin-bottom:6px; }

/* FAB (extended, krimpt bij scrollen) */
.fab { position:fixed; z-index:6; right:max(16px, env(safe-area-inset-right,0px)); bottom:calc(20px + env(safe-area-inset-bottom,0px));
  height:80px; min-width:80px; padding:0 28px 0 24px; border-radius:24px; display:flex; align-items:center; gap:12px;
  background:var(--primary-container); color:var(--on-primary-container); font:600 18px/1 var(--font-display);
  box-shadow:0 4px 10px rgba(0,0,0,.14), 0 1px 3px rgba(0,0,0,.12); transition:padding .35s var(--spring), border-radius .35s var(--spring), transform .2s; }
.fab .ms { font-size:32px; }
.fab:active { transform:scale(.95); border-radius:32px; }
.fab.small { padding:0 24px; }
.fab.small .fab-label { display:none; }

/* Sheets */
.scrim { position:fixed; inset:0; z-index:9; background:rgba(0,0,0,.36); animation:fade .25s; }
.sheet { position:fixed; z-index:10; left:0; right:0; bottom:0; max-width:640px; margin:0 auto; max-height:92vh; overflow-y:auto;
  background:var(--sc-low); border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:8px max(20px, env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(20px, env(safe-area-inset-left,0px));
  animation:up .45s var(--spring); }
.handle { width:32px; height:4px; border-radius:2px; background:var(--outline); opacity:.5; margin:8px auto 14px; }
.sheet h2 { font:600 26px/1.15 var(--font-display); margin:0 0 18px; }
form { display:flex; flex-direction:column; gap:14px; }
.field { position:relative; display:block; }
.field input, .field textarea { width:100%; font:inherit; color:var(--on-surface); background:var(--sc-highest); border:0;
  border-bottom:2px solid var(--outline); border-radius:12px 12px 4px 4px; padding:24px 16px 8px; resize:none; outline:none;
  transition:border-color .2s; }
.field input[type=date] { min-height:58px; }
.field input:focus, .field textarea:focus { border-color:var(--primary); }
.field span { position:absolute; left:16px; top:17px; color:var(--on-surface-variant); pointer-events:none; transition:.2s var(--emph); }
.field input:focus + span, .field input:not(:placeholder-shown) + span, .field textarea:focus + span,
.field textarea:not(:placeholder-shown) + span, .field input[type=date] + span { top:6px; font-size:12px; color:var(--primary); }
.group-label { display:flex; align-items:center; gap:6px; font-weight:600; font-size:14px; color:var(--on-surface-variant); margin-top:6px; }
.group-label .ms { font-size:20px; }
.place-chips { display:flex; flex-wrap:wrap; gap:8px; }
.results { display:flex; flex-direction:column; gap:2px; margin-top:6px; }
.results button { text-align:left; padding:12px 14px; border-radius:12px; background:var(--sc); font-size:14px; }
.results button small { display:block; color:var(--on-surface-variant); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.radius { display:flex; align-items:center; gap:12px; color:var(--on-surface-variant); }
.radius input { flex:1; accent-color:var(--primary); height:32px; }
.radius output { min-width:64px; text-align:right; font-variant-numeric:tabular-nums; font-weight:600; color:var(--on-surface); }
.sheet-actions { display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap; }
.spacer { flex:1; }
.btn { height:48px; padding:0 22px; border-radius:24px; font-weight:600; font-size:15px; transition:border-radius .35s var(--spring), background .2s; }
.btn:active { border-radius:12px; }
.btn.filled { background:var(--primary); color:var(--on-primary); }
.btn.tonal { background:var(--secondary-container); color:var(--on-secondary-container); }
.btn.text { color:var(--primary); padding:0 14px; }
#btn-delete { color:var(--error); }

.setting { display:flex; gap:14px; align-items:center; padding:14px 4px; border-bottom:1px solid var(--outline-variant); }
.setting > .ms { color:var(--on-surface-variant); }
.setting > div { flex:1; min-width:0; display:flex; flex-direction:column; }
.setting small { color:var(--on-surface-variant); font-size:13px; }
.setting.info small { line-height:1.5; }
.setting code { font-size:12px; background:var(--sc-highest); padding:1px 5px; border-radius:4px; overflow-wrap:anywhere; }
.switch { width:52px; height:32px; border-radius:16px; flex:none; position:relative; background:var(--sc-highest);
  border:2px solid var(--outline); transition:.25s; }
.switch::after { content:""; position:absolute; left:6px; top:6px; width:16px; height:16px; border-radius:50%; background:var(--outline);
  transition:all .35s var(--spring); }
.switch[aria-checked="true"] { background:var(--primary); border-color:var(--primary); }
.switch[aria-checked="true"]::after { left:22px; top:2px; width:24px; height:24px; background:var(--on-primary); }
#demo-places { padding:12px 0 4px; }

/* Snackbar + gesimuleerde melding */
.snackbar { position:fixed; z-index:11; left:max(16px, env(safe-area-inset-left,0px)); right:calc(112px + env(safe-area-inset-right,0px));
  bottom:calc(28px + env(safe-area-inset-bottom,0px)); max-width:420px; min-height:48px; display:flex; align-items:center; gap:8px;
  padding:4px 4px 4px 16px; border-radius:12px; background:var(--inverse-surface); color:var(--inverse-on-surface); font-size:14px;
  animation:up .35s var(--spring); }
.snackbar span { flex:1; }
.snackbar button { color:var(--inverse-primary); font-weight:600; padding:10px 12px; border-radius:10px; }
.toast-notif { position:fixed; z-index:12; top:calc(10px + env(safe-area-inset-top,0px)); left:max(12px, env(safe-area-inset-left,0px));
  right:max(12px, env(safe-area-inset-right,0px)); max-width:520px; margin:0 auto; display:flex; gap:12px; align-items:flex-start;
  padding:14px 16px; border-radius:24px; background:var(--sc-highest); box-shadow:0 8px 24px rgba(0,0,0,.2); animation:drop .5s var(--spring); }
.toast-notif .ms { color:var(--primary); }
.toast-notif div { display:flex; flex-direction:column; white-space:pre-line; font-size:14px; }

@keyframes up { from { transform:translateY(40px); opacity:0 } }
@keyframes drop { from { transform:translateY(-40px); opacity:0 } }
@keyframes fade { from { opacity:0 } }
@keyframes pop { from { transform:scale(.9); opacity:0 } }
@keyframes morph { 50% { border-radius:58% 42% 37% 63% / 59% 56% 44% 41%; transform:rotate(12deg) } }
.item.leaving { animation:leave .35s var(--emph) forwards; }
@keyframes leave { to { opacity:0; transform:translateX(30px) } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } }
/* Iconen pas tonen als het lettertype er is (anders zie je de ligatuurtekst) */
html:not(.icons) .ms { visibility:hidden; }

/* ---- lijsten ---- */
.c-green { --lc:#2e7d4f } .c-teal { --lc:#00796b } .c-blue { --lc:#3b6fd8 } .c-purple { --lc:#7e57c2 }
.c-pink { --lc:#c2477d } .c-orange { --lc:#e0701b } .c-yellow { --lc:#b58b00 } .c-brown { --lc:#8d6e63 }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .c-green { --lc:#7fd6a0 } :root:not([data-theme="light"]) .c-teal { --lc:#5fd3c4 }
  :root:not([data-theme="light"]) .c-blue { --lc:#9dbbff } :root:not([data-theme="light"]) .c-purple { --lc:#c9b2ff } :root:not([data-theme="light"]) .c-pink { --lc:#ffa8c8 }
  :root:not([data-theme="light"]) .c-orange { --lc:#ffb68a } :root:not([data-theme="light"]) .c-yellow { --lc:#e8c75a } :root:not([data-theme="light"]) .c-brown { --lc:#d2b6a9 } }
.chips.lists { padding-bottom:0; }
.lchip .ms { color:var(--lc, inherit); font-variation-settings:"FILL" 1,"wght" 500,"opsz" 24; }
.lchip[aria-pressed="true"] { background:color-mix(in srgb, var(--lc, var(--primary)) 22%, var(--surface)); color:var(--on-surface); }
.tag.list .ms { color:var(--lc); }
.color-row { display:flex; gap:10px; flex-wrap:wrap; }
.swatch { width:36px; height:36px; border-radius:50%; background:var(--lc); transition:border-radius .35s var(--spring), transform .2s; }
.swatch[aria-pressed="true"] { border-radius:12px; outline:3px solid var(--on-surface); outline-offset:2px; }
.new-list { margin-bottom:18px; }
.lists-manage { display:flex; flex-direction:column; gap:3px; }
.lcard { background:var(--sc); padding:16px; border-radius:6px; display:flex; flex-direction:column; gap:10px; }
.lcard:first-child { border-top-left-radius:24px; border-top-right-radius:24px; }
.lcard:last-child { border-bottom-left-radius:24px; border-bottom-right-radius:24px; }
.lhead { display:flex; align-items:center; gap:10px; }
.lhead .dot { width:14px; height:14px; border-radius:5px; background:var(--lc); }
.lhead small { color:var(--on-surface-variant); }
.members { display:flex; flex-wrap:wrap; gap:6px; }
.member { display:inline-flex; align-items:center; gap:2px; height:30px; padding:0 4px 0 12px; border-radius:15px; background:var(--sc-highest); font-size:13px; }
.member:not(:has(button)) { padding-right:12px; }
.member button { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; }
.member .ms { font-size:16px; }
.share { display:flex; flex-direction:row; gap:8px; }
.share input { flex:1; min-width:0; font:inherit; color:var(--on-surface); background:var(--sc-highest); border:0; border-bottom:2px solid var(--outline); border-radius:12px 12px 4px 4px; padding:10px 14px; outline:none; }
.share input:focus { border-color:var(--primary); }
.lactions:empty { display:none; }
.btn.danger { color:var(--error); padding:0 4px; }

/* ---- inloggen ---- */
.login { min-height:100vh; display:grid; place-items:center; padding:24px max(16px, env(safe-area-inset-right,0px)) 24px max(16px, env(safe-area-inset-left,0px)); }
.login-card { width:100%; max-width:400px; display:flex; flex-direction:column; gap:12px; }
.login-logo { width:88px; height:88px; display:grid; place-items:center; background:var(--primary-container); color:var(--on-primary-container);
  border-radius:42% 58% 63% 37% / 41% 44% 56% 59%; animation:morph 9s ease-in-out infinite; }
.login-logo .ms { font-size:44px; }
.login h1 { font:700 40px/1.05 var(--font-display); margin:12px 0 8px; letter-spacing:-.02em; }
.lg-error { color:var(--error); min-height:1.2em; margin:0; font-size:14px; }
.btn.big { height:56px; font-size:17px; }