/* Gekopieerd uit NorthByte Lab: /home/user/nb-lab/lab/effecten/E370-wachttijdmeter/effect.css (04-10-2026), ongewijzigd. */
/* ==========================================================================
   E370 · Wachttijdmeter met wijzer
   Een halve klokmeter met drie zones (rustig, gemiddeld, druk) en een wijzer
   die met een kleine doorzwaai naar de actuele wachttijd draait. De stand komt
   uit één getal in de HTML, dat de eigenaar bijwerkt. De zone staat er ook in
   woorden bij, dus niet alleen in kleur. De wijzer draait met transform.
   Per meter: style="--e370-w: 2; --e370-max: 10" (waarde en maximum).
   Instellen op .e370 met CSS-variabelen:
     --e370-rustig, --e370-gemiddeld, --e370-druk   kleuren van de zones
     --e370-wijzer   kleur van de wijzer (standaard currentColor)
     --e370-baan     kleur achter de zones (standaard rgba(0,0,0,.08))
   ========================================================================== */

.e370 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: clamp(20px, 3vw, 32px); margin: 0; padding: 0; list-style: none; }
.e370-meter { text-align: center; }
.e370-meter svg { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; overflow: visible; }
.e370-zone { fill: none; stroke-width: 18; }
.e370-zone-1 { stroke: var(--e370-rustig, #2f9e55); }
.e370-zone-2 { stroke: var(--e370-gemiddeld, #e0a100); }
.e370-zone-3 { stroke: var(--e370-druk, #d9453b); }
.e370-streepjes { stroke: currentColor; stroke-width: 2; opacity: .35; }
.e370-schaal { font-size: 11px; fill: currentColor; opacity: .6; }
.e370-wijzer {
  transform-origin: 120px 120px;
  transform: rotate(calc(var(--e370-w, 0) / var(--e370-max, 10) * 180deg - 90deg));
}
.e370-wijzer path { fill: var(--e370-wijzer, currentColor); }
.e370-as { fill: var(--e370-wijzer, currentColor); stroke: var(--e370-ondergrond, #fff); stroke-width: 4; }
.e370-waarde { display: block; margin-top: 4px; font-size: clamp(30px, 4vw, 40px); font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.e370-label { display: block; margin-top: 2px; font-size: 15px; opacity: .78; }
.e370-status { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--e370-chip, rgba(0, 0, 0, .06)); }
.e370-status::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--e370-kleur, currentColor); }

@media (prefers-reduced-motion: no-preference) {
  /* Beginstand zonder transitie; het draaien hoort bij de eindstand (-aan) */
  html:not([data-rm]) .e370-klaar .e370-wijzer { transform: rotate(-90deg); }
  html:not([data-rm]) .e370-klaar .e370-status { opacity: 0; transform: translate3d(0, 6px, 0); }
  html:not([data-rm]) .e370-aan .e370-wijzer {
    transform: rotate(calc(var(--e370-w, 0) / var(--e370-max, 10) * 180deg - 90deg));
    transition: transform 1.4s cubic-bezier(.34, 1.45, .5, 1) calc(var(--e370-i, 0) * 200ms + 150ms);
  }
  html:not([data-rm]) .e370-aan .e370-status { opacity: 1; transform: none; transition: opacity .4s ease, transform .4s ease; transition-delay: calc(var(--e370-i, 0) * 200ms + 1.2s); }
}