/**
 * ADAA Scanner — Score Gauge Component Styles
 *
 * SVG ring gauge with animated draw, color transitions, and trend indicator.
 * Used in Dashboard, Scan Results, and State of the Web pages.
 */

/* Gauge container */
.score-gauge-container {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* SVG gauge */
.gauge-svg {
  display: block;
  width: 96px;
  height: 96px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  transition: filter var(--transition-normal) var(--ease-in-out);
}

/* Gauge ring animation */
.gauge-ring {
  transition: stroke-dashoffset 1.2s cubic-bezier(0, 0, 0.2, 1);
  transform-origin: center;
}

/* Gauge label container */
.gauge-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem; /* --spacing-xs */
}

/* Gauge score text */
.gauge-score {
  font-size: 2.25rem; /* --font-size-3xl */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
}

/* Gauge max score */
.gauge-max {
  font-size: 0.875rem; /* --font-size-sm */
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  vertical-align: top;
  margin-left: 0.125rem; /* --spacing-xs */
}

/* Gauge rating label */
.gauge-rating {
  font-size: 0.75rem; /* --font-size-xs */
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.025em; /* --letter-spacing-wide */
  color: var(--color-text-muted);
}

/* Trend indicator */
.gauge-trend {
  position: absolute;
  bottom: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.25rem; /* --spacing-xs */
  font-size: 0.75rem; /* --font-size-xs */
  font-weight: var(--font-weight-semibold);
  padding: 0.25rem 0.5rem; /* --spacing-xs --spacing-sm */
  background-color: var(--color-bg-tertiary);
  border-radius: var(--radius-full);
  white-space: nowrap;
  transition: all var(--transition-normal) var(--ease-in-out);
}

.gauge-trend-arrow {
  font-size: 0.875rem; /* --font-size-sm */
  line-height: 1;
}

.gauge-trend-value {
  font-size: 0.75rem; /* --font-size-xs */
  line-height: 1;
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  .gauge-svg {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  }

  .gauge-trend {
    background-color: var(--color-neutral-800);
  }
}

/* Larger size variant */
.score-gauge-container[data-size="large"] .gauge-svg {
  width: 128px;
  height: 128px;
}

.score-gauge-container[data-size="large"] .gauge-score {
  font-size: 3rem; /* --font-size-5xl */
}

.score-gauge-container[data-size="large"] .gauge-max {
  font-size: 1rem; /* --font-size-base */
}

.score-gauge-container[data-size="large"] .gauge-rating {
  font-size: 0.875rem; /* --font-size-sm */
}

/* Smaller size variant */
.score-gauge-container[data-size="small"] .gauge-svg {
  width: 64px;
  height: 64px;
}

.score-gauge-container[data-size="small"] .gauge-score {
  font-size: 1.5rem; /* --font-size-2xl */
}

.score-gauge-container[data-size="small"] .gauge-max {
  font-size: 0.75rem; /* --font-size-xs */
}

.score-gauge-container[data-size="small"] .gauge-rating {
  display: none; /* Hide rating on small gauges */
}

/* Accessibility: Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .gauge-ring {
    transition: none;
  }

  .gauge-trend {
    transition: none;
  }
}

/* Accessibility: High contrast mode */
@media (prefers-contrast: high) {
  .gauge-svg {
    stroke-width: 12px;
  }
}