/* ============================================================
   COMPONENT · GAUGE
   Horizontal bar gauge. The arc gauge is decorative-only; this
   bar version is what data should actually use.
   Set --gauge-value 0..1 on the element to drive the fill.
   ============================================================ */

.c-gauge {
  --gauge-value: 0.5;
  --gauge-color: var(--color-accent);

  display: block;
  width: 100%;
  height: 0.75rem;
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-bezel-dark);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-inset-deep);
  position: relative;
  overflow: hidden;
}

.c-gauge__fill {
  display: block;
  height: 100%;
  width: calc(var(--gauge-value) * 100%);
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--gauge-color) 60%, black) 0%,
      var(--gauge-color) 100%);
  box-shadow: 0 0 8px var(--gauge-color);
  transition: width var(--dur-medium) var(--ease-settle);
}

.c-gauge--segmented .c-gauge__fill {
  background-image:
    linear-gradient(90deg,
      var(--gauge-color) 0%,
      var(--gauge-color) calc(100% - 2px),
      var(--color-surface-sunken) calc(100% - 2px),
      var(--color-surface-sunken) 100%);
  background-size: 14px 100%;
  background-repeat: repeat;
}

.c-gauge--ok      { --gauge-color: var(--color-ok); }
.c-gauge--caution { --gauge-color: var(--color-caution); }
.c-gauge--danger  { --gauge-color: var(--color-danger); }
.c-gauge--primary { --gauge-color: var(--color-primary); }

.c-gauge--lg { height: 1.5rem; }
.c-gauge--sm { height: 0.4rem; }

/* VU-style with tick marks */
.c-gauge--vu {
  background-image:
    repeating-linear-gradient(90deg,
      transparent 0,
      transparent calc(10% - 1px),
      var(--color-bezel-dark) calc(10% - 1px),
      var(--color-bezel-dark) 10%);
  background-color: var(--color-surface-sunken);
}