/* Layout: iOS-style grouped lists. Phone = large title + bottom tab bar; laptop = sidebar tabs + two-column home. */
:root{
  --bg:#F2F2F7; --card:#FFFFFF; --ink:#000000; --ink2:rgba(60,60,67,.62); --ink3:rgba(60,60,67,.32);
  --sep:rgba(60,60,67,.14); --fill:rgba(120,120,128,.12); --bar:rgba(249,249,249,.86);
  --blue:#007AFF; --green:#34C759; --orange:#FF9500; --red:#FF3B30; --purple:#AF52DE; --teal:#30B0C7; --indigo:#5856D6; --pink:#FF2D55; --grey:#8E8E93; --brown:#A2845E;
  --c-gezin:var(--purple); --c-school:var(--orange); --c-kliko:var(--green); --c-werk:var(--blue); --c-klassenapp:var(--teal); --c-todo:var(--red);
  --roes:#FF6B3D; --mae:#E0457B; --bodhi:#2F9BD6; --les:#8E6CEF; --peet:#3D8D5A;
  --font:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --fontd:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;
  --r:14px;
}
@media (prefers-color-scheme: dark){:root[data-look="auto"]:not([data-theme="light"]){
  --bg:#000000; --card:#1C1C1E; --ink:#FFFFFF; --ink2:rgba(235,235,245,.6); --ink3:rgba(235,235,245,.3);
  --sep:rgba(84,84,88,.6); --fill:rgba(118,118,128,.24); --bar:rgba(22,22,24,.86);
  --blue:#0A84FF; --green:#30D158; --orange:#FF9F0A; --red:#FF453A; --purple:#BF5AF2; --teal:#40C8E0; --indigo:#5E5CE6; --pink:#FF375F; --grey:#98989D;
  --roes:#FF8A5C; --mae:#FF6B9A; --bodhi:#5AB8F0; --les:#A78BFA; --peet:#5FB37C; color-scheme:dark}}
:root[data-look="dark"],:root[data-look="auto"][data-theme="dark"]{
  --bg:#000000; --card:#1C1C1E; --ink:#FFFFFF; --ink2:rgba(235,235,245,.6); --ink3:rgba(235,235,245,.3);
  --sep:rgba(84,84,88,.6); --fill:rgba(118,118,128,.24); --bar:rgba(22,22,24,.86);
  --blue:#0A84FF; --green:#30D158; --orange:#FF9F0A; --red:#FF453A; --purple:#BF5AF2; --teal:#40C8E0; --indigo:#5E5CE6; --pink:#FF375F; --grey:#98989D;
  --roes:#FF8A5C; --mae:#FF6B9A; --bodhi:#5AB8F0; --les:#A78BFA; --peet:#5FB37C; color-scheme:dark}
*{box-sizing:border-box}
html,body{background:var(--bg)}
body{color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.35;-webkit-font-smoothing:antialiased;letter-spacing:-.01em}
button{font:inherit;color:inherit}

.app{display:flex;min-height:100%}
.side{display:none}
main{flex:1;min-width:0;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:8px calc(96px + env(safe-area-inset-bottom,0px))}
.inner{max-width:980px;margin:0 auto;display:flex;flex-direction:column;gap:22px}

/* Large title */
.top{display:flex;flex-direction:column;gap:2px;padding-top:12px}
.eyebrow{font-size:13px;font-weight:600;color:var(--ink2);text-transform:uppercase;letter-spacing:.04em}
h1{font-family:var(--fontd);font-weight:700;font-size:34px;line-height:1.12;margin:0;letter-spacing:.005em;text-wrap:balance}
.stamp{font-size:15px;color:var(--ink2);font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.live{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block}
.live.old{background:var(--orange)}
.headline{font-size:17px;margin:4px 0 0;max-width:62ch;color:var(--ink)}

/* Groups */
.group{display:flex;flex-direction:column;gap:7px;min-width:0}
.ghead{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:0 4px}
.ghead h2{font-family:var(--fontd);font-size:22px;font-weight:700;margin:0;letter-spacing:.005em}
.ghead .sub{font-size:15px;color:var(--ink2)}
.list{background:var(--card);border-radius:var(--r);overflow:hidden}
.row{display:flex;gap:12px;align-items:center;padding:11px 16px;position:relative;min-height:48px}
.row+.row::before{content:"";position:absolute;top:0;right:0;left:60px;border-top:.5px solid var(--sep)}
.list.plain .row+.row::before{left:16px}
.ico{flex:none;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:#fff}
.ico svg{width:18px;height:18px}
.body{flex:1;min-width:0}
.title{font-size:17px;overflow-wrap:anywhere}
.meta{font-size:14px;color:var(--ink2);margin-top:1px;overflow-wrap:anywhere}
.time{flex:none;text-align:right;font-size:15px;color:var(--ink2);font-variant-numeric:tabular-nums;white-space:nowrap}
.time b{display:block;color:var(--ink);font-weight:600;font-size:16px}
.pill{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:10px;font-size:12px;font-weight:600;color:#fff;margin-right:6px;vertical-align:2px;letter-spacing:0}
.empty{padding:14px 16px;color:var(--ink2);font-size:15px}

/* Alerts */
.alerts{display:flex;flex-direction:column;gap:10px}
.alert{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:var(--r);background:var(--card)}
.alert .ico{width:36px;height:36px;border-radius:10px}
.alert .k{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.alert .t{font-size:17px;font-weight:600}

/* Home grid */
.grid{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:900px){.grid{grid-template-columns:1fr 1fr;align-items:start}}

/* Segmented control */
.seg{display:flex;background:var(--fill);border-radius:9px;padding:2px;gap:2px;overflow-x:auto;scrollbar-width:none}
.seg button{flex:1;min-width:64px;border:0;background:transparent;border-radius:7px;padding:6px 10px;font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04);font-weight:600}
.seg button:focus-visible,.tab:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* Kliko tiles */
.bins{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px}
.bin{background:var(--card);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:10px}
.bin .lid{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff}
.bin .lid svg{width:24px;height:24px}
.bin h3{margin:0;font-size:17px;font-weight:600}
.bin .when{font-family:var(--fontd);font-size:28px;font-weight:700;letter-spacing:.005em;line-height:1.1;font-variant-numeric:tabular-nums}
.bin .out{font-size:15px;color:var(--ink2)}
.bin.next{box-shadow:inset 0 0 0 2px var(--green)}

/* Child avatars */
.av{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:14px}

/* Weather + voice */
.hero{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:10px}
.wx{display:inline-flex;align-items:center;gap:8px;background:var(--card);border-radius:999px;padding:7px 14px 7px 10px;font-size:15px}
.wx .deg{font-weight:700;font-variant-numeric:tabular-nums}
.wx svg{width:20px;height:20px;color:var(--orange)}
.speak{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:8px 16px 8px 12px;background:var(--blue);color:#fff;font-size:15px;font-weight:600;cursor:pointer}
.speak svg{width:18px;height:18px}
.speak[aria-pressed="true"]{background:var(--ink);color:var(--card)}
.voicesel{appearance:none;-webkit-appearance:none;border:0;border-radius:999px;background:var(--fill);color:var(--ink);font:inherit;font-size:14px;padding:8px 14px;max-width:100%;cursor:pointer}
.voicesel:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.speak:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* Appearance */
.look{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:0 4px}
.look span{font-size:15px;color:var(--ink2)}
.look .seg{min-width:220px}

/* Footer */
.foot{display:flex;flex-wrap:wrap;gap:6px;padding:0 4px}
.chip{font-size:13px;color:var(--ink2);background:var(--fill);border-radius:999px;padding:4px 10px;display:inline-flex;gap:6px;align-items:center}
.chip i{width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block}
.chip.off i{background:var(--orange)}

/* Tab bar (phone) */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--bar);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-top:.5px solid var(--sep);display:flex;justify-content:space-around;padding:6px max(8px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))}
.tab{flex:1;max-width:110px;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;font-weight:500;color:var(--grey);cursor:pointer;padding:2px 0;border-radius:8px}
.tab svg{width:26px;height:26px}
.tab[aria-current="page"]{color:var(--blue)}

/* Laptop: sidebar */
@media(min-width:900px){
  .tabbar{display:none}
  main{padding-block:16px 48px}
  .side{display:flex;flex-direction:column;gap:4px;width:232px;flex:none;padding:28px 12px 28px max(16px,env(safe-area-inset-left,0px));position:sticky;top:0;align-self:flex-start;height:100vh}
  .side .brand{font-family:var(--fontd);font-weight:700;font-size:20px;padding:0 10px 14px}
  .side .tab{flex:none;flex-direction:row;max-width:none;gap:10px;font-size:15px;color:var(--ink);padding:8px 10px;justify-content:flex-start}
  .side .tab svg{width:20px;height:20px;color:var(--blue)}
  .side .tab[aria-current="page"]{background:var(--fill);font-weight:600}
}
@media (prefers-reduced-motion:no-preference){.view{animation:fade .22s ease-out}}
@keyframes fade{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---- Toevoegingen webapp ---- */
html,body{margin:0;min-height:100%}
body{overscroll-behavior-y:none}
.top-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.iconbtn{flex:none;border:0;background:var(--fill);color:var(--blue);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;cursor:pointer;margin-top:2px}
.iconbtn svg{width:19px;height:19px}
.iconbtn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.iconbtn.busy svg{animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.speak[disabled]{opacity:.5;cursor:default}
.speak .lbl{min-width:4.5em;text-align:left}
.notice{font-size:14px;color:var(--ink2);background:var(--fill);border-radius:10px;padding:8px 12px}
.ico,.av,.pill,.lid{background:var(--c,var(--grey))}
.alert .k{color:var(--c,var(--blue))}

/* Compacte navigatiebalk (telefoon) die verschijnt als de grote titel wegscrollt */
.navbar{position:fixed;top:0;left:0;right:0;z-index:21;height:calc(44px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:17px;background:var(--bar);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:.5px solid var(--sep);opacity:0;pointer-events:none;transition:opacity .18s ease}
.navbar.show{opacity:1}
main{padding-top:calc(8px + env(safe-area-inset-top,0px))}
@media(min-width:900px){.navbar{display:none}}
.group.stack{gap:22px}
@media(max-width:599px){
  .bins{grid-template-columns:1fr;gap:0;background:var(--card);border-radius:var(--r);overflow:hidden}
  .bin{display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:12px;row-gap:0;padding:12px 16px;border-radius:0;position:relative}
  .bin+.bin::before{content:"";position:absolute;top:0;right:0;left:72px;border-top:.5px solid var(--sep)}
  .bin .lid{grid-row:1/3;width:44px;height:44px}
  .bin h3{grid-column:2}
  .bin .out{grid-column:2;font-size:14px}
  .bin .when{grid-column:3;grid-row:1/3;font-size:20px;text-align:right}
  .bin.next{box-shadow:none}
  .bin.next .when{color:var(--green)}
}
.wx{border-radius:18px}