/* Texts take the header tokens (--et-header-text on --et-header-bg, >= 4.5:1 on any header colour); the plug tile is the solid LED colour.
   Header, any variant: the build meter (header.meter, R50; blocks/header/_meter.twig, js/elbuz_meter.js). A chip in the actions with the
   build sum, and a light strip under the header (catbar, utility) — a warm LED line (--et-led, default amber) that fills from the left by
   the load --et-load (0…1) and casts a soft glow on the page below. Over the limit (html[data-et-meter="bad"]) the strip and the chip turn
   --et-led-bad and the strip flickers; reduced motion — no flicker. Motion: transform and opacity only. */
.et-header { --et-led: #ffcf7a; --et-led-bad: #e5482b; }
.et-header__meter { flex: none; width: auto; margin-inline-end: 0.5rem; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 0.5rem; border-radius: var(--et-radius-sm, 8px); color: var(--et-header-text, inherit); text-decoration: none; }
.et-header__meter > i { display: grid; place-items: center; width: 1.875rem; height: 1.875rem; border-radius: 0.5rem;
  background: var(--et-led); color: #2a1a02; font-size: 0.9375rem; }
html[data-et-meter="bad"] .et-header__meter > i { background: var(--et-led-bad); color: #fff; }
.et-header__meter-text { display: grid; line-height: 1.1; text-align: start; }
.et-header__meter-text small { font-size: var(--et-text-xs); color: color-mix(in oklab, var(--et-header-text, var(--et-text)) 85%, var(--et-header-bg, var(--et-bg))); font-weight: 600; white-space: nowrap; }
.et-header__meter-text b { font: 900 0.9375rem/1.1 var(--et-font-price, var(--et-font)); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--et-header-text, inherit); }
@media (max-width: 767.98px) { .et-header__meter-text small { display: none; } }
@media (max-width: 420px) { .et-header__meter { display: none; } }

.et-header__led { position: absolute; left: 0; right: 0; top: 100%; z-index: 1; height: 3px; pointer-events: none;
  background: color-mix(in srgb, var(--et-led) 38%, transparent); }
.et-header__led i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--et-load, 0)); transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  background: linear-gradient(90deg, color-mix(in srgb, var(--et-led) 60%, #fff), var(--et-led)); box-shadow: 0 0 12px 1px color-mix(in srgb, var(--et-led) 70%, transparent); }
.et-header__led::after { content: ""; position: absolute; left: 6%; right: 6%; top: 3px; height: 46px; opacity: 0.55;
  background: radial-gradient(60% 100% at 50% 0%, color-mix(in srgb, var(--et-led) 38%, transparent), transparent 75%); }
html.dark-theme .et-header__led::after { opacity: 0.9; height: 70px; }
html[data-et-meter="bad"] .et-header__led i { background: linear-gradient(90deg, #ff9b6b, var(--et-led-bad)); box-shadow: 0 0 12px 1px color-mix(in srgb, var(--et-led-bad) 70%, transparent);
  animation: et-led-flicker 2.4s steps(1) infinite; }
@keyframes et-led-flicker { 0%, 100% { opacity: 1; } 8% { opacity: 0.55; } 10% { opacity: 1; } 54% { opacity: 0.7; } 56% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .et-header__led i { transition: none; } html[data-et-meter="bad"] .et-header__led i { animation: none; } }
.et-header:not(.et-header--sticky):has(> .et-header__led) { position: relative; }