/* ===== FTF LED indicator system v2 (reusable, state-based) =====
   Per LED set TWO things: a COLOR and a STATE.
     <span class='ftf-led ftf-led--amber ftf-led--blink-slow'></span>
   COLORS: ftf-led--green --red --amber --blue --cyan --gray  (or inline --led-color)
   STATES: ftf-led--on-full  --on-dim  --blink-fast  --blink-slow  --pulse
   Each STATE bundles these knobs (retune a state in one place):
     --led-bright  peak brightness (opacity 0..1)
     --led-cycle   fade_time (full blink/pulse cycle)
     --led-glow    outside glow distance (px)
     --led-size    diameter (px)
   Color is independent of state. The off-gap (time fully dark between blinks)
   lives in each blink state's keyframe rhythm. Per-LED inline overrides win,
   e.g. style="--led-size:8px; --led-cycle:3s". */
.ftf-led {
  --led-color: #3cffb0;
  --led-bright: 1;
  --led-cycle: 1.6s;
  --led-glow: 5px;
  --led-size: 3px;
  display: inline-block;
  width: var(--led-size);
  height: var(--led-size);
  border-radius: 50%;
  background: var(--led-color);
  vertical-align: middle;
  opacity: var(--led-bright);
}
.ftf-led--green { --led-color: #3cffb0; }
.ftf-led--red   { --led-color: #ff5d6c; }
.ftf-led--amber { --led-color: #ffb020; }
.ftf-led--blue  { --led-color: #5db4ff; }
.ftf-led--cyan  { --led-color: #5de4ff; }
.ftf-led--gray  { --led-color: #8a8a8a; }
.ftf-led--on-full,
.ftf-led--blink-fast,
.ftf-led--blink-slow,
.ftf-led--pulse {
  background: color-mix(in srgb, var(--led-color) 78%, var(--absolute-white));
  box-shadow: 0 0 var(--led-glow) color-mix(in srgb, var(--led-color) 60%, transparent),
              0 0 calc(var(--led-glow) * 0.45) var(--led-color);
}
.ftf-led--on-full { --led-bright: 1; --led-glow: 6px;  opacity: 1; }
.ftf-led--on-dim {
  --led-bright: 0.42; --led-glow: 0px;
  background: var(--led-color); box-shadow: none;
  filter: saturate(0.85) brightness(0.8); opacity: var(--led-bright);
}
.ftf-led--blink-fast { --led-bright: 1; --led-cycle: 0.9s; --led-glow: 5px; animation: ftf-led-blink var(--led-cycle) ease-in-out infinite; }
.ftf-led--blink-slow { --led-bright: 1; --led-cycle: 2.4s; --led-glow: 5px; animation: ftf-led-blink var(--led-cycle) ease-in-out infinite; }
.ftf-led--pulse      { --led-bright: 1; --led-cycle: 2s;  --led-glow: 5px; animation: ftf-led-pulse var(--led-cycle) ease-in-out infinite; }
@keyframes ftf-led-blink { 0% { opacity: 0; } 18% { opacity: var(--led-bright); } 42% { opacity: var(--led-bright); } 60% { opacity: 0; } 100% { opacity: 0; } }
@keyframes ftf-led-pulse { 0%, 100% { opacity: var(--led-bright); } 50% { opacity: calc(var(--led-bright) * 0.3); } }