/* Statuspagina, geschiedenis en meldingdetail: alleen wat hier hoort; nav, footer, kleuren en letters komen uit assets/css/site.css */
:root{--up:#3fcf6a;--deg:#f5a524;--part:#ff7a1a;--down:#ff3b46;--maint:#4c8dff;--none:#2b2b2b;--info:#8f8f8f}
.small{font-size:13px}
.bars:focus-visible,.gbtn:focus-visible,.histlink:focus-visible,.subopen:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:6px}

/* kop met abonneerknop */
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.subopen svg{width:16px;height:16px}
.back{display:inline-flex;gap:6px;color:var(--sec);text-decoration:none;font-size:14px;font-weight:600;margin-bottom:18px}
.back:hover{color:#fff}

/* totaalbeeld */
.banner{display:flex;align-items:center;gap:20px;padding:28px 30px;border-radius:16px;background:var(--s1);border:1px solid var(--line);position:relative;overflow:hidden}
.banner::before{content:"";position:absolute;inset:0 auto 0 0;width:6px;background:var(--c,#444)}
.banner::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 140% at 0% 50%,color-mix(in srgb,var(--c,#444) 14%,transparent),transparent 60%);pointer-events:none}
.banner>*{position:relative}
.banner h2{font-size:clamp(24px,3.4vw,34px);font-weight:800;letter-spacing:-.025em;line-height:1.15}
.banner p{margin-top:4px;font-size:15px}
.banner.up{--c:var(--up)}.banner.degraded{--c:var(--deg)}.banner.partial{--c:var(--part)}.banner.down{--c:var(--down)}.banner.maint{--c:var(--maint)}
.pulse{flex:none;width:18px;height:18px;border-radius:50%;background:var(--c,#555);box-shadow:0 0 0 0 var(--c,#555)}
.banner:not(.loading) .pulse{animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 60%,transparent)}70%{box-shadow:0 0 0 14px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.pulse{animation:none!important}}
.updated{font-size:13px;margin:12px 2px 0}

/* blokken */
.sblock{margin-top:46px}
.sh{font-size:22px;font-weight:800;letter-spacing:-.015em;margin-bottom:14px}
.shrow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.shrow .sh{margin-bottom:0}

/* kleur per toon (lopend, impact, onderhoud) */
.t-down{--t:var(--down)}.t-partial{--t:var(--part)}.t-degraded{--t:var(--deg)}.t-maint{--t:var(--maint)}.t-ok{--t:var(--up)}.t-info{--t:var(--info)}

/* meldingen (lopend en onderhoud) */
.ncards{display:grid;gap:14px}
.ncard{background:var(--s1);border:1px solid var(--line);border-left:4px solid var(--t,#555);border-radius:14px;padding:20px 24px}
.nhead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.nhead h3,.nhead h4{font-size:18px;font-weight:800;letter-spacing:-.01em;line-height:1.3}
.nhead h4{font-size:16px}
.nhead a{text-decoration:none}.nhead a:hover{text-decoration:underline}
.nwhen{margin-top:4px}
.nmore{display:inline-block;margin-top:6px;font-size:14px;font-weight:700;color:#fff;text-decoration:none}
.nmore:hover{text-decoration:underline}
.schip{flex:none;display:inline-block;font-size:12px;font-weight:700;letter-spacing:.02em;line-height:18px;padding:3px 10px;border-radius:999px;background:#ffffff1a;color:#fff;white-space:nowrap}
.schip.st-investigating{background:color-mix(in srgb,var(--down) 22%,transparent);color:#ffb3b8}
.schip.st-identified{background:color-mix(in srgb,var(--deg) 22%,transparent);color:#ffd68a}
.schip.st-monitoring,.schip.st-scheduled,.schip.st-in_progress{background:color-mix(in srgb,var(--maint) 24%,transparent);color:#b7d0ff}
.schip.st-resolved,.schip.st-completed{background:color-mix(in srgb,var(--up) 20%,transparent);color:#a7f0bb}
.schip.st-cancelled{color:var(--sec)}
.schip.imp-critical{background:color-mix(in srgb,var(--down) 22%,transparent);color:#ffb3b8}
.schip.imp-major{background:color-mix(in srgb,var(--part) 22%,transparent);color:#ffc49a}
.schip.imp-minor{background:color-mix(in srgb,var(--deg) 22%,transparent);color:#ffd68a}

/* tijdlijn */
.tl{list-style:none;margin:14px 0 0;padding:0;position:relative}
.tl li{position:relative;padding:0 0 16px 22px}
.tl li::before{content:"";position:absolute;left:4px;top:7px;width:9px;height:9px;border-radius:50%;background:var(--sec);box-shadow:0 0 0 3px var(--s1)}
.tl li::after{content:"";position:absolute;left:8px;top:18px;bottom:0;width:1px;background:var(--line)}
.tl li:last-child{padding-bottom:2px}.tl li:last-child::after{display:none}
.tl li.st-investigating::before{background:var(--down)}.tl li.st-identified::before{background:var(--deg)}
.tl li.st-monitoring::before,.tl li.st-scheduled::before,.tl li.st-in_progress::before{background:var(--maint)}
.tl li.st-resolved::before,.tl li.st-completed::before{background:var(--up)}
.tlh{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.tlh b{font-size:14px}
.tlh time{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.tl p{margin-top:2px;color:#e2e2e2;font-size:15px;line-height:1.5;overflow-wrap:anywhere}

/* getroffen onderdelen */
.cchips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px}
.cchips .small{margin-right:2px}
.cchip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--s2);border:1px solid var(--line)}
.cchip i{width:8px;height:8px;border-radius:50%;background:var(--sec)}
.cchip i.degraded{background:var(--deg)}.cchip i.partial{background:var(--part)}.cchip i.down{background:var(--down)}.cchip i.maint{background:var(--maint)}

/* groepen */
.group{background:var(--s1);border:1px solid var(--line);border-radius:16px;margin-top:14px;overflow:hidden}
.group:first-child{margin-top:0}
.ghead{margin:0}
.gbtn{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;padding:18px 24px 10px;cursor:pointer}
.gbtn:hover .gname{text-decoration:underline}
.chev{width:18px;height:18px;flex:none;color:var(--sec);transition:transform .18s}
.group.open .chev{transform:rotate(90deg)}
.gname{font-weight:800;font-size:17px}
.gcount{font-size:13px;flex:1;min-width:0}
.gsum{padding:0 24px 18px}
.group.open .gsum{display:none}
.group.open .gbtn{padding-bottom:16px;border-bottom:1px solid var(--line)}
.mons{padding:0}
.mon{padding:18px 24px 16px;border-top:1px solid var(--line)}
.mon:first-child{border-top:0}
.mhead{display:flex;align-items:center;gap:10px}
.dot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--none)}
.dot.up{background:var(--up)}.dot.degraded{background:var(--deg)}.dot.partial{background:var(--part)}.dot.down{background:var(--down)}.dot.maint{background:var(--maint)}
.mname{font-weight:700;font-size:16px;flex:1;min-width:0}
.mstate{font-size:13px;font-weight:600;white-space:nowrap}
.mstate.up{color:var(--up)}.mstate.degraded{color:var(--deg)}.mstate.partial{color:var(--part)}.mstate.down{color:var(--down)}.mstate.maint{color:var(--maint)}.mstate.none{color:var(--dim)}
.bars{display:flex;gap:2px;height:34px;margin-top:12px;align-items:stretch;touch-action:pan-y}
.bars i{flex:1;min-width:2px;border-radius:2px;background:var(--none);transition:transform .12s,opacity .12s}
.bars i.up{background:var(--up)}.bars i.degraded{background:var(--deg)}.bars i.partial{background:var(--part)}.bars i.down{background:var(--down)}.bars i.maint{background:var(--maint)}
.bars:hover i:not(.on){opacity:.75}
.bars i:hover,.bars i.on{transform:scaleY(1.18);opacity:1}
.gsum .bars{height:26px;margin-top:2px}
.mfoot{display:flex;justify-content:space-between;gap:12px;margin-top:8px;font-size:12px;color:var(--dim)}
.mfoot .mid{color:var(--sec);font-variant-numeric:tabular-nums}
.mfoot .mid b{color:#fff;font-weight:700}

.legend{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;margin:14px 2px 0;padding:0;font-size:12px;color:var(--sec)}
.legend li{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:2px;background:var(--none)}
.legend i.up{background:var(--up)}.legend i.degraded{background:var(--deg)}.legend i.partial{background:var(--part)}.legend i.down{background:var(--down)}.legend i.maint{background:var(--maint)}

/* afgelopen incidenten (per dag) */
.past{background:var(--s1);border:1px solid var(--line);border-radius:16px;padding:6px 24px}
.pday{padding:18px 0;border-top:1px solid var(--line)}
.pday:first-child{border-top:0}
.pday>h3{font-size:15px;font-weight:800;margin-bottom:8px}
.pnone{font-size:14px}
.pinc,.hitem{border-left:3px solid var(--t,#555);padding:4px 0 4px 14px;margin-top:10px}
.pinc:first-of-type{margin-top:0}
.plast{margin-top:4px;color:#d9d9d9;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.histlink{display:inline-flex;gap:6px;margin-top:16px;font-weight:700;color:#fff;text-decoration:none}
.histlink:hover{text-decoration:underline}

/* geschiedenis */
.lead2{margin:-14px 0 8px}
.hmonth{margin-top:34px}
.hlist{padding:6px 24px}
.hitem{margin:0;padding:16px 0 16px 14px;border-top:1px solid var(--line);border-left:0;position:relative}
.hitem::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:2px;background:var(--t,#555)}
.hitem:first-child{border-top:0}
.hitem .kind{white-space:nowrap}
.hitem .plast,.hitem p{margin-top:4px}
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px}
.pager .off{opacity:.35;pointer-events:none}

/* meldingdetail */
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--sec);margin-bottom:8px}
.inc-ttl{font-size:clamp(30px,4.4vw,46px)}
.incmeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:4px}
.incbody{border-left:4px solid var(--t,#555)}
.incbody .tl{margin-top:4px}
.incfoot{margin-top:6px}
.incsub{margin-top:18px}

.powered{display:flex;align-items:center;gap:8px;margin-top:56px;font-size:12px;color:var(--dim)}
.pmark{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 10px #e50914aa}

/* tooltip van de dagbalken */
.tip{position:fixed;z-index:60;background:#262626;border:1px solid #ffffff26;border-radius:10px;padding:9px 12px;font-size:12px;line-height:1.45;max-width:min(300px,calc(100vw - 24px));transform:translate(-50%,calc(-100% - 10px));box-shadow:0 8px 24px #000a}
.tip .td{display:block;color:var(--sec)}
.tip b{font-size:14px;display:block}
.tip .ts{display:inline-flex;align-items:center;gap:6px;margin-top:2px}
.tip .ts::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--up)}
.tip .ts.degraded::before{background:var(--deg)}.tip .ts.partial::before{background:var(--part)}.tip .ts.down::before{background:var(--down)}.tip .ts.maint::before{background:var(--maint)}.tip .ts.none::before{background:#555}
.tip ul{list-style:none;margin:6px 0 0;padding:6px 0 0;border-top:1px solid #ffffff1f}
.tip li+li{margin-top:3px}
.tip a{color:#fff;font-weight:600}

/* abonneren */
.smodal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:16px}
.smodal-bg{position:absolute;inset:0;background:#000b;backdrop-filter:blur(4px)}
.smodal-card{position:relative;width:min(460px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--s1);border:1px solid var(--line);border-top:4px solid var(--red);border-radius:16px;padding:30px 28px 24px;box-shadow:0 24px 60px #000c}
.smodal-card h2{font-size:24px;font-weight:900;letter-spacing:-.02em;padding-right:28px}
.smodal-card>p{margin-top:8px}
.smodal-x{position:absolute;top:12px;right:14px;width:34px;height:34px;border-radius:50%;border:0;background:#ffffff14;color:#fff;font-size:22px;line-height:1;cursor:pointer}
.smodal-x:hover{background:#ffffff26}
.slabel{display:block;font-size:14px;font-weight:600;margin:18px 0 8px}
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0}
.sfine{font-size:12px!important;margin-top:12px}
.sdone{text-align:center;padding:12px 0 4px}
.sdone .big{font-size:40px;line-height:1;color:var(--up);margin-bottom:8px}
.sdone h3{font-size:20px;font-weight:800}
.sdone p{margin-top:6px}
.sfeed{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--sec)}
.sfeed a{color:#fff;font-weight:700}
body.noscroll{overflow:hidden}
.stoast{position:fixed;left:50%;bottom:24px;z-index:90;transform:translate(-50%,24px);opacity:0;pointer-events:none;max-width:min(520px,calc(100vw - 32px));background:#1f3a27;border:1px solid #3fcf6a66;color:#fff;font-size:15px;line-height:1.45;border-radius:12px;padding:14px 18px;box-shadow:0 12px 40px #000c;transition:opacity .2s,transform .2s}
.stoast.bad{background:#3a1f22;border-color:#ff3b4666}
.stoast.show{opacity:1;transform:translate(-50%,0)}

.err{margin:24px 0;color:#ffb199}

@media (max-width:640px){
  .banner{padding:22px 20px;gap:16px}
  .gbtn{padding:16px 16px 8px}
  .gsum{padding:0 16px 14px}
  .group.open .gbtn{padding-bottom:14px}
  .mon{padding:16px 16px 14px}
  .ncard{padding:16px 16px}
  .past,.hlist{padding:4px 16px}
  .bars{height:30px;gap:3px}
  .gsum .bars{height:24px}
  .mfoot{flex-wrap:wrap;row-gap:4px}
  .mfoot .mid{order:3;flex-basis:100%}
  .gcount{display:none}
  .gname{flex:1}
  .nhead{flex-direction:column;gap:6px}
  .shead .subopen{width:100%}
  .smodal{align-items:flex-end;padding:0}
  .smodal-card{width:100%;border-radius:16px 16px 0 0;padding:26px 20px 22px;max-height:92vh}
}