/* HetWerkt.net — of het werkt: de statuspagina. Amber is de enige statuskleur. */

.st-link{color:var(--lila);text-decoration:underline;text-decoration-color:rgba(205,191,255,.35);text-underline-offset:3px;transition:color .3s}
.st-link:hover{color:var(--tekst)}

.pkop-acties{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}

/* ───────── De grote melding ───────── */
.stbanner{display:flex;align-items:center;gap:clamp(16px,2.6vw,28px);padding:clamp(22px,3.2vw,38px) clamp(20px,3.4vw,42px);
  border-color:rgba(255,122,26,.4);
  background:linear-gradient(100deg,rgba(255,122,26,.15),rgba(255,122,26,.04) 52%,transparent 80%),var(--glas);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 30px 90px -40px rgba(255,122,26,.5);
  transition:border-color .5s,box-shadow .5s}
.stbanner-lamp{position:relative;flex:none;width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#ffd2a6,var(--oranje) 58%);
  box-shadow:0 0 26px 2px var(--oranje-gloed);transition:opacity .05s,box-shadow .05s}
.stbanner-lamp::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 var(--oranje-gloed);animation:stAdem 2.6s ease-out infinite}
@keyframes stAdem{0%{box-shadow:0 0 0 0 var(--oranje-gloed)}100%{box-shadow:0 0 0 18px rgba(255,122,26,0)}}
.stbanner-lamp.is-uit{opacity:.16;box-shadow:none}
.stbanner h2{font-size:clamp(1.35rem,3.5vw,2.4rem);font-weight:800;letter-spacing:-.045em;line-height:1.1;min-width:0;transition:opacity .25s,filter .25s}
.stbanner h2.is-wissel{opacity:0;filter:blur(6px)}
.stbanner-tijd{margin-left:auto;flex:none;font:500 .7rem var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--tekst-dof);
  text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.stbanner.is-storing{border-color:rgba(255,122,26,.75);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 30px 110px -30px rgba(255,122,26,.75)}
.stbanner.is-storing .stbanner-lamp{animation:stKnipper .5s steps(1) infinite}
@keyframes stKnipper{50%{opacity:.2}}
@media (max-width:640px){
  .stbanner{flex-wrap:wrap;row-gap:8px}
  .stbanner h2{flex:1 1 0}
  .stbanner-tijd{flex-basis:100%;margin-left:0;padding-left:calc(22px + clamp(16px,2.6vw,28px));text-align:left}
}

/* ───────── Drie cijfers ───────── */
.stcijfers{margin-top:14px}
.stcijfer{gap:6px;padding:22px 26px}
.stcijfer b{font-size:clamp(1.6rem,3vw,2.5rem);font-weight:800;letter-spacing:-.045em;line-height:1.05;font-variant-numeric:tabular-nums;white-space:nowrap;
  background:linear-gradient(180deg,#fff,var(--lila));-webkit-background-clip:text;background-clip:text;color:transparent}
.stcijfer span{color:var(--tekst-zacht);font-size:.9rem}
@media (max-width:980px){.stcijfers{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.stcijfers{grid-template-columns:1fr}.stcijfer{flex-direction:row;align-items:baseline;justify-content:space-between;gap:16px;padding:16px 20px}
  .stcijfer b{font-size:1.5rem;order:2}.stcijfer span{font-size:.86rem}}

/* ───────── De hartslag ───────── */
.hart{margin-top:14px;overflow:hidden;isolation:isolate;
  background:radial-gradient(ellipse 70% 120% at 100% 50%,rgba(74,31,184,.28),transparent 70%),var(--glas)}
.hart-kop{display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap;padding:16px 22px 0;
  font:500 .7rem var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--tekst-dof);font-variant-numeric:tabular-nums}
.hart-live{display:inline-flex;align-items:center;gap:9px;color:var(--tekst-zacht);min-width:9.5em}
.hart-live span{transition:color .3s}
.hart-live.is-haper span{color:var(--oranje)}
.hart-live.is-haper .statuslamp{animation:none;opacity:.25}
.hart-slag{margin-left:auto;white-space:nowrap}
.hart-slag b{color:var(--tekst);font-weight:500;margin-left:.6em}
.hart canvas{display:block;width:100%;height:clamp(150px,21vw,230px)}
@media (max-width:520px){.hart-kop{padding:14px 16px 0;font-size:.62rem}.hart-naam{display:none}}

/* ───────── Onderdelen en hun negentig dagen ───────── */
.onderdelen{margin-top:56px;padding:clamp(4px,1vw,10px) clamp(16px,3vw,36px)}
.onderdeel{padding:24px 0 20px;border-bottom:1px solid var(--glas-rand)}
.onderdeel:last-child{border-bottom:0}
.onderdeel-kop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.onderdeel h3{font-size:1.06rem;font-weight:700;letter-spacing:-.02em;line-height:1.2;min-width:0}
.onderdeel-status{display:inline-flex;align-items:center;gap:8px;flex:none;font:500 .66rem var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--tekst-zacht);white-space:nowrap;transition:color .3s}
.onderdeel-status .statuslamp{width:6px;height:6px}
.onderdeel.is-storing .onderdeel-status{color:var(--oranje)}

.balken{display:flex;align-items:stretch;gap:2px;height:38px;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.balk{flex:1 1 0;min-width:0;border-radius:2px;background:rgba(255,122,26,var(--a,.5));transform-origin:50% 100%;cursor:pointer;
  transition:transform .3s var(--zacht),filter .3s,background .6s,box-shadow .6s}
.balk.k1{background:#ffb866;box-shadow:0 0 10px rgba(255,160,70,.8)}
.balk.k2{background:#4d2307;box-shadow:inset 0 0 0 1px rgba(255,122,26,.28)}
.balk:hover,.balk.is-actief{transform:scaleY(1.2);filter:brightness(1.4)}
.balk.k2:hover,.balk.k2.is-actief{filter:brightness(1.9)}
.balk.is-flits{filter:brightness(.3);transition-duration:.05s}
.onderdeel:not(.is-zichtbaar) .balk{opacity:0}
.onderdeel.is-zichtbaar .balk{animation:balkIn .7s var(--zacht) backwards;animation-delay:calc(var(--i,0)*7ms + .12s)}
.onderdeel.is-zichtbaar .balk[data-d="0"]{animation:balkIn .7s var(--zacht) backwards,balkNu 2.4s ease-in-out 1.2s infinite;animation-delay:calc(var(--i,0)*7ms + .12s),1.2s}
.onderdeel.is-zichtbaar .balk.is-nieuw[data-d]{animation:balkPop 1.1s var(--zacht),balkNu 2.4s ease-in-out 1.2s infinite;animation-delay:0s,1.2s}
@keyframes balkIn{from{opacity:0;transform:scaleY(.1)}}
@keyframes balkNu{50%{filter:brightness(1.7)}}
@keyframes balkPop{0%{transform:scaleY(.2);filter:brightness(.3)}45%{transform:scaleY(1.5);filter:brightness(1.8)}100%{transform:none}}

.onderdeel-schaal{display:flex;align-items:center;gap:12px;margin-top:11px;font:500 .66rem var(--mono);letter-spacing:.04em;color:var(--tekst-dof);white-space:nowrap;font-variant-numeric:tabular-nums}
.onderdeel-schaal i{flex:1;min-width:0;height:1px;background:var(--glas-rand)}
.onderdeel-schaal b{font-weight:500;color:var(--tekst-zacht)}
.onderdeel-schaal .s60,.onderdeel-schaal .s45{display:none}
@media (max-width:900px){
  .balk:nth-child(-n+30){display:none}
  .onderdeel-schaal .s90{display:none}.onderdeel-schaal .s60{display:inline}
}
@media (max-width:560px){
  .balk:nth-child(-n+45){display:none}
  .balken{height:34px}
  .onderdeel-schaal{gap:8px;font-size:.6rem;letter-spacing:0}
  .onderdeel-schaal .s60{display:none}.onderdeel-schaal .s45{display:inline}
  .onderdeel-status{font-size:.6rem}
}

/* het kaartje bij een dag */
.balkkaart{position:absolute;left:0;top:0;z-index:5;width:236px;padding:13px 15px 14px;border-radius:13px;pointer-events:none;
  background:rgba(10,5,22,.97);border:1px solid rgba(255,122,26,.36);
  box-shadow:0 22px 60px -14px rgba(0,0,0,.95),0 0 44px -18px var(--oranje-gloed);
  display:flex;flex-direction:column;gap:5px;animation:bkIn .25s var(--zacht)}
.balkkaart[hidden]{display:none}
@keyframes bkIn{from{opacity:0}}
.balkkaart::after{content:"";position:absolute;left:var(--px,50%);bottom:-6px;width:10px;height:10px;margin-left:-5px;transform:rotate(45deg);
  background:rgba(10,5,22,.97);border-right:1px solid rgba(255,122,26,.36);border-bottom:1px solid rgba(255,122,26,.36)}
.balkkaart-datum{font:500 .68rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--tekst-dof)}
.balkkaart-staat{display:flex;align-items:center;gap:9px;font-weight:700;font-size:.95rem;letter-spacing:-.01em}
.balkkaart-staat i{flex:none;width:9px;height:9px;border-radius:2px;background:rgba(255,122,26,.55)}
.balkkaart-staat i.k1{background:#ffb866;box-shadow:0 0 8px rgba(255,160,70,.8)}
.balkkaart-staat i.k2{background:#4d2307;box-shadow:inset 0 0 0 1px rgba(255,122,26,.5)}
.balkkaart-tekst{font-size:.85rem;line-height:1.45;color:var(--tekst-zacht);font-variant-numeric:tabular-nums}

.legenda{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:18px;font-size:.8rem;color:var(--tekst-dof)}
.legenda li{display:inline-flex;align-items:center;gap:9px}
.legenda i{width:10px;height:14px;border-radius:2px;background:rgba(255,122,26,.5)}
.legenda i.k1{background:#ffb866;box-shadow:0 0 8px rgba(255,160,70,.8)}
.legenda i.k2{background:#4d2307;box-shadow:inset 0 0 0 1px rgba(255,122,26,.4)}

/* ───────── Het logboek ───────── */
.storingen{margin-top:56px;display:grid;gap:12px}
.storing{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:8px 40px;padding:26px 30px 12px;
  background:var(--glas);border:1px solid var(--glas-rand);border-radius:var(--radius)}
.storing.is-vers{border-color:rgba(255,122,26,.5);animation:versIn .9s var(--zacht)}
@keyframes versIn{from{opacity:0;transform:translateY(-14px);filter:blur(6px)}}
.storing-datum{font:500 .7rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--tekst-dof);padding-top:.35em}
.storing-datum b{display:block;margin-top:8px;font-weight:500;color:var(--oranje)}
.storing h3{font-size:clamp(1.1rem,1.8vw,1.3rem);font-weight:700;letter-spacing:-.025em;line-height:1.2}
.storing-meta{margin-top:6px;font-size:.86rem;color:var(--tekst-dof);font-variant-numeric:tabular-nums}
.tijdlijn{margin-top:20px}
.tijdlijn li{position:relative;padding:0 0 18px 28px}
.tijdlijn li::before{content:"";position:absolute;left:0;top:.42em;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--paars-licht);background:#0b0616}
.tijdlijn li::after{content:"";position:absolute;left:4px;top:1.35em;bottom:-.2em;width:1px;background:linear-gradient(rgba(143,107,255,.45),rgba(143,107,255,.12))}
.tijdlijn li:last-child::after{display:none}
.tijdlijn li.is-opgelost::before{border-color:var(--oranje);background:var(--oranje);box-shadow:0 0 12px var(--oranje-gloed)}
.tijdlijn b{color:var(--tekst);font-weight:700;font-size:.95rem}
.tijdlijn time{margin-left:10px;font:500 .7rem var(--mono);color:var(--tekst-dof);font-variant-numeric:tabular-nums}
.tijdlijn p{margin-top:2px;color:var(--tekst-zacht);font-size:.95rem;max-width:58ch}
.storingen-meer{margin-top:22px;display:flex;justify-content:center}
.storingen-meer .knop[disabled]{opacity:.45;pointer-events:none;white-space:normal;text-align:center}
@media (max-width:760px){
  .storing{grid-template-columns:1fr;padding:20px 20px 6px}
  .storing-datum b{display:inline;margin:0 0 0 10px}
}

/* ───────── Aanmelden ───────── */
.aanmeld{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:clamp(30px,6vw,90px);align-items:start}
.aanmeld-paneel{padding:26px}
.aanmeld-paneel form{display:grid;gap:14px}
.aanmeld-paneel .knop[disabled]{opacity:.45;pointer-events:none}
.aanmeld-noot{margin-top:14px;font-size:.82rem;color:var(--tekst-dof);line-height:1.5}
.inmeld:empty{display:none}
.inmeld{margin-top:18px;padding-top:18px;border-top:1px solid var(--glas-rand);display:grid;gap:10px}
.inmeld-kop{font:500 .68rem var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--tekst-dof)}
.meldkaart{padding:16px 18px 4px;border-radius:14px;background:rgba(10,5,22,.85);border:1px solid rgba(255,122,26,.4);
  box-shadow:0 20px 50px -24px var(--oranje-gloed);animation:meldIn .6s var(--zacht)}
@keyframes meldIn{from{opacity:0;transform:translateY(12px) scale(.98);filter:blur(5px)}}
.meldkaart-kop{display:flex;align-items:center;justify-content:space-between;gap:10px;font:500 .66rem var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--tekst-dof)}
.meldkaart-kop span:first-child{display:inline-flex;align-items:center;gap:8px;color:var(--tekst-zacht)}
.meldkaart-kop .statuslamp{width:6px;height:6px}
.meldkaart h3{margin-top:10px;font-size:1.08rem;font-weight:700;letter-spacing:-.025em;line-height:1.25}
.meldkaart .tijdlijn{margin-top:14px}
.meldkaart .tijdlijn li{animation:meldIn .5s var(--zacht);padding-bottom:14px}
.meldkaart .tijdlijn p{font-size:.9rem}
@media (max-width:980px){.aanmeld{grid-template-columns:1fr}.aanmeld-paneel{max-width:520px}}
@media (max-width:420px){.aanmeld-paneel{padding:18px}}

.st-verder{margin-top:54px}