/* Gekopieerd uit NorthByte Lab: /home/user/nb-lab/lab/effecten/E361-drukte-per-uur/effect.css (03-10-2026), ongewijzigd. */
/* ==========================================================================
   E361 · Drukte per uur
   Zoals de populaire tijden bij Google: een staafje per uur, een tab per dag.
   Wissel van dag en de staafjes groeien of krimpen naar de nieuwe stand. Is
   het vandaag en ben je open, dan licht het huidige uur op met "Nu". Een zin
   eronder vat de dag samen. Staafjes bewegen alleen met transform: scaleY.
   Per staaf: style="--e361-h: 45" (0 tot 100). Per dag: een knop met
   data-e361-uren="10,20,30" (vanaf het openingsuur) of data-e361-dicht.
   Instellen op .e361 met CSS-variabelen:
     --e361-staaf    kleur van de staafjes (standaard currentColor)
     --e361-nu       kleur van het huidige uur (standaard #c2412d)
     --e361-hoogte   hoogte van de grafiek (standaard 160px)
   ========================================================================== */

.e361 { position: relative; }
.e361-dagen { display: none; gap: 4px; margin: 0 0 18px; padding: 0; overflow-x: auto; }
.js .e361-dagen { display: flex; }
.e361-dag {
  flex: 1 0 auto; min-width: 44px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 10px;
  background: transparent; color: inherit; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; opacity: .6;
}
.e361-dag[aria-selected="true"] { opacity: 1; background: var(--e361-tab, rgba(0, 0, 0, .07)); }
.e361-dag:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.e361-vlak { position: relative; padding-top: 26px; }
.e361-grafiek {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; align-items: end;
  height: var(--e361-hoogte, 160px); border-bottom: 1px solid currentColor;
}
.e361-staaf { position: relative; height: 100%; }
.e361-staaf::before {
  content: ""; position: absolute; inset: 0; border-radius: 4px 4px 0 0; background: var(--e361-staaf, currentColor);
  transform-origin: 50% 100%; transform: scaleY(calc(var(--e361-h, 0) / 100));
}
.e361-nu::before { background: var(--e361-nu, #c2412d); }
.e361-nulabel {
  position: absolute; left: 50%; bottom: calc(var(--e361-h, 0) * 1% + 6px); translate: -50% 0;
  padding: 2px 7px; border-radius: 999px; background: var(--e361-nu, #c2412d); color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap;
}
.e361-as { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin-top: 6px; font-size: 12px; opacity: .7; font-variant-numeric: tabular-nums; }
.e361-as span { text-align: left; white-space: nowrap; }
.e361-zin { margin-top: 16px; font-size: 15px; line-height: 1.5; }
.e361-zin strong { font-weight: 600; }
.e361-dicht { position: absolute; inset: 26px 0 1px; display: flex; align-items: center; justify-content: center; font-weight: 600; opacity: 0; visibility: hidden; }
.e361-is-dicht .e361-dicht { opacity: 1; visibility: visible; }

.e361-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html:not([data-rm]) .e361-staaf::before { transition: transform .5s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--e361-i, 0) * 25ms); }
  html:not([data-rm]) .e361-nulabel { animation: e361-nu .4s ease both .3s; }
}
@keyframes e361-nu { from { opacity: 0; transform: translate3d(0, 6px, 0); } }