/* Atlas als app (11-11): belletje + meldingenpaneel, de strook voor «nieuwe versie» en «installeer», de wek-kaart op de merkkit-pagina.
   Zelfde tokens als stroom.css/app.css (wit, inkt, grijs, lijn, vlak; vermiljoen niet als vlak). Alleen transform en opacity bewegen. */
:root { --pw-inkt: var(--inkt, #141414); --pw-grijs: var(--grijs, #6F6B66); --pw-lijn: var(--lijn, #E9E7E3); --pw-vlak: var(--vlak, #F5F4F2); --pw-uit: cubic-bezier(.23, 1, .32, 1); }

/* standalone: één scroller, geen terugvering van de hele app; veilige zones links/rechts (liggend met inkeping) */
@media (display-mode: standalone) {
  html, body { overscroll-behavior-y: none; }
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}

/* ── het belletje in de kop ── */
.bel-knop { position: relative; width: 44px; height: 44px !important; padding: 0 !important; justify-content: center; }
.bel-knop svg { width: 19px; height: 19px; }
.bel-knop .bel-teller { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--pw-inkt); color: #fff;
  font: 600 11px/18px var(--sans, system-ui); font-variant-numeric: tabular-nums; text-align: center; box-shadow: 0 0 0 2px var(--papier, #FBFAF7); }
.bel-knop[aria-expanded="true"] .bel-teller { background: #fff; color: var(--pw-inkt); box-shadow: none; }
.bel-knop.tik svg { animation: belTik .7s var(--pw-uit); transform-origin: 50% 15%; }
@keyframes belTik { 0% { transform: rotate(0); } 20% { transform: rotate(14deg); } 45% { transform: rotate(-10deg); } 70% { transform: rotate(5deg); } 100% { transform: rotate(0); } }

/* ── het paneel ── */
.bel-paneel { position: fixed; z-index: 70; top: calc(var(--kop-h, 64px) + 6px); right: var(--rand, 24px); width: min(400px, calc(100vw - 20px)); max-height: min(78vh, 720px);
  display: flex; flex-direction: column; background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-radius: 20px;
  box-shadow: 0 24px 60px -20px rgba(20, 20, 20, .35), 0 0 0 1px rgba(20, 20, 20, .06); color: var(--pw-inkt); font: 400 15px/1.45 var(--sans, system-ui);
  transform-origin: calc(100% - 20px) 0; animation: belIn .26s var(--pw-uit) both; }
.bel-paneel[hidden] { display: none; }
@keyframes belIn { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.bel-paneel-kop { display: flex; align-items: center; gap: 10px; padding: 16px 16px 8px 20px; }
.bel-paneel-kop h2 { margin: 0; font: 600 22px/1.1 var(--kop, system-ui); letter-spacing: -.04em; flex: 1; }
.bel-paneel-kop button, .bel-tekstknop { min-height: 44px; padding: 0 10px; border-radius: 99px; font-size: 14px; font-weight: 500; color: var(--pw-grijs); }
@media (hover: hover) { .bel-paneel-kop button:hover, .bel-tekstknop:hover { color: var(--pw-inkt); background: var(--pw-vlak); } }
.bel-sluit { width: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 !important; }
.bel-sluit svg { width: 20px; height: 20px; }
.bel-romp { overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 10px; }
.bel-lijst { list-style: none; margin: 0; padding: 0; }
.bel-item { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: start; padding: 12px; border-radius: 14px; text-decoration: none; color: inherit; min-height: 44px; }
.bel-item:hover { background: var(--pw-vlak); }
.bel-item .bel-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--pw-vlak); display: grid; place-items: center; }
.bel-item .bel-ico svg { width: 20px; height: 20px; }
.bel-item b { display: block; font-weight: 600; font-size: 15px; }
.bel-item span { display: block; color: var(--pw-grijs); font-size: 14px; }
.bel-item time { color: var(--pw-grijs); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: 2px; }
.bel-item.nieuw .bel-ico { background: var(--pw-inkt); color: #fff; }
.bel-item.nieuw b::after { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--pw-inkt); margin-left: 8px; vertical-align: 2px; }
.bel-leeg { padding: 8px 12px 14px; color: var(--pw-grijs); }
.bel-leeg b { display: block; color: var(--pw-inkt); font-weight: 600; margin-bottom: 2px; }
.bel-blok { margin: 6px 4px 0; padding: 14px 12px 4px; border-top: 1px solid var(--pw-lijn); }
.bel-blok h3 { margin: 0 0 4px; font: 600 15px/1.3 var(--sans, system-ui); }
.bel-blok p { margin: 0 0 10px; color: var(--pw-grijs); font-size: 14px; }
.bel-hoofd { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 99px; background: var(--pw-inkt); color: #fff; font-weight: 600; font-size: 14px; text-decoration: none; }
.bel-hoofd:hover { background: #000; }
.bel-hoofd:active, .bel-tweede:active { transform: scale(.97); }
.bel-tweede { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 99px; box-shadow: inset 0 0 0 1.5px var(--pw-lijn); font-weight: 500; font-size: 14px; }
.bel-tweede:hover { box-shadow: inset 0 0 0 1.5px var(--pw-inkt); }
.bel-rij { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.bel-schakel { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 0; cursor: pointer; }
.bel-schakel input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bel-schakel .baan { flex: none; width: 44px; height: 26px; border-radius: 99px; background: var(--pw-lijn); position: relative; transition: background .2s; }
.bel-schakel .baan::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .25s var(--pw-uit); }
.bel-schakel input:checked + .baan { background: var(--pw-inkt); }
.bel-schakel input:checked + .baan::after { transform: translateX(18px); }
.bel-schakel input:focus-visible + .baan { outline: 2px solid var(--accent, #D9481F); outline-offset: 3px; }
.bel-schakel .uitleg b { display: block; font-weight: 500; font-size: 14.5px; }
.bel-schakel .uitleg span { display: block; color: var(--pw-grijs); font-size: 13px; }
.bel-soorten { margin: 0 0 6px; }
.bel-soorten summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-weight: 500; font-size: 14.5px; list-style: none; }
.bel-soorten summary::-webkit-details-marker { display: none; }
.bel-soorten summary::after { content: ''; width: 8px; height: 8px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); margin: -4px 4px 0 auto; transition: transform .2s; }
.bel-soorten[open] summary::after { transform: rotate(225deg); margin-top: 4px; }
.bel-soorten summary span { color: var(--pw-grijs); font-weight: 400; font-size: 13.5px; }
.bel-stappen { margin: 0 0 12px; padding: 0; list-style: none; counter-reset: s; }
.bel-stappen li { counter-increment: s; display: flex; gap: 10px; align-items: center; padding: 6px 0; font-size: 14.5px; }
.bel-stappen li::before { content: counter(s); flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--pw-vlak); display: grid; place-items: center; font-size: 12.5px; font-weight: 600; }
.bel-stappen svg { width: 18px; height: 18px; vertical-align: -3px; }
.bel-status { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; margin-bottom: 8px; }
.bel-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--pw-grijs); }
.bel-status.aan i { background: #2F7D4F; }
.bel-fout { color: #A23A12; font-size: 14px; margin: 0 0 10px; }
@media (max-width: 760px) {
  .bel-paneel { top: auto; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); width: auto; max-height: calc(86dvh - env(safe-area-inset-top)); border-radius: 24px; transform-origin: 50% 100%; animation-name: belOp; }
  @keyframes belOp { from { opacity: 0; transform: translateY(24px); } }
  .bel-paneel-kop { padding-top: 14px; }
}
.bel-scherm { position: fixed; inset: 0; z-index: 69; background: rgba(20, 20, 20, .18); animation: belScherm .2s ease both; }
@keyframes belScherm { from { opacity: 0; } }
@media (min-width: 761px) { .bel-scherm { background: transparent; } }

/* ── strook onderaan: nieuwe versie, installeren ── */
.pwa-strook { position: fixed; z-index: 90; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 12px;
  max-width: calc(100vw - 20px); padding: 8px 8px 8px 18px; border-radius: 99px; background: var(--pw-inkt); color: #fff; font: 500 14px/1.35 var(--sans, system-ui);
  box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .5); animation: strookIn .32s var(--pw-uit) both; }
.pwa-strook button { min-height: 40px; padding: 0 14px; border-radius: 99px; background: rgba(255, 255, 255, .14); color: #fff; font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.pwa-strook button:hover { background: rgba(255, 255, 255, .24); }
.pwa-strook .sluit { width: 40px; padding: 0; background: none; display: inline-flex; align-items: center; justify-content: center; }
.pwa-strook .sluit svg { width: 18px; height: 18px; }
@keyframes strookIn { from { opacity: 0; transform: translate(-50%, 14px); } }
@media (max-width: 760px) { body:has(.onderbalk) .pwa-strook { bottom: calc(84px + env(safe-area-inset-bottom)); } .pwa-strook { width: calc(100% - 20px); border-radius: 22px; } .pwa-strook span { flex: 1; } }
@media (prefers-reduced-motion: reduce) { .bel-paneel, .pwa-strook, .bel-scherm { animation: none; } .bel-knop.tik svg { animation: none; } }

/* ── merkkit-pagina: «stuur me een seintje» ── */
.pwa-wek { margin: 22px 0 0; padding: 18px 20px; border-radius: 16px; background: var(--pw-vlak); display: grid; grid-template-columns: 44px 1fr; gap: 4px 14px; align-items: start; max-width: 560px; }
.pwa-wek:empty { display: none; }
.pwa-wek .wek-ico { grid-row: span 3; width: 44px; height: 44px; border-radius: 12px; background: #fff; display: grid; place-items: center; }
.pwa-wek .wek-ico svg { width: 22px; height: 22px; }
.pwa-wek b { font-weight: 600; font-size: 16px; }
.pwa-wek p { margin: 0; color: var(--pw-grijs); font-size: 14.5px; }
.pwa-wek .bel-rij { margin: 10px 0 0; }
.pwa-wek .bel-tekstknop { margin-left: -10px; text-decoration: underline; text-underline-offset: 4px; }