/* ============================================================
   Component · Progress (linear, circular, band dial)
   ============================================================ */

.progress {
  width: 100%;
  height: 8px;
  background: var(--gio-color-bg-subtle);
  border-radius: var(--gio-radius-pill);
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  background: var(--gio-color-action);
  border-radius: inherit;
  transition: width var(--gio-dur-slow) var(--gio-ease-out);
}
.progress--sm { height: 4px; }
.progress--lg { height: 12px; }
.progress--success .progress__bar { background: var(--gio-color-success); }
.progress--accent  .progress__bar { background: var(--gio-color-accent); }

.progress-circle {
  --_size: 56px;
  --_value: 0.5;
  --_track: var(--gio-color-bg-subtle);
  --_fill: var(--gio-color-action);
  width: var(--_size);
  height: var(--_size);
  border-radius: 50%;
  background:
    conic-gradient(var(--_fill) calc(var(--_value) * 360deg), var(--_track) 0);
  display: grid;
  place-items: center;
  position: relative;
}
.progress-circle::before {
  content: '';
  position: absolute;
  inset: 4px;
  background: var(--gio-color-surface);
  border-radius: inherit;
}
.progress-circle__label {
  position: relative;
  font-size: var(--gio-text-xs);
  font-weight: var(--gio-w-bold);
  color: var(--gio-color-text-strong);
}

/* Band dial — large overall band score on result page */
.band-dial {
  --_value: 7.5;
  --_max: 9;
  width: 160px; height: 160px;
  border-radius: 50%;
  background:
    conic-gradient(
      var(--gio-color-action) calc((var(--_value) / var(--_max)) * 360deg),
      var(--gio-color-bg-subtle) 0);
  display: grid;
  place-items: center;
  position: relative;
}
.band-dial::before {
  content: '';
  position: absolute; inset: 8px;
  background: var(--gio-color-surface);
  border-radius: inherit;
  box-shadow: var(--gio-shadow-sm);
}
.band-dial__inner {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 2px;
}
.band-dial__value {
  font-family: var(--gio-font-display);
  font-size: 44px; line-height: 1;
  font-weight: var(--gio-w-extrabold);
  color: var(--gio-color-text-strong);
  letter-spacing: -0.025em;
}
.band-dial__label {
  font-size: var(--gio-text-xs);
  font-weight: var(--gio-w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--gio-tracking-wide);
  color: var(--gio-color-text-muted);
}
.band-dial--sm { width: 88px; height: 88px; }
.band-dial--sm::before { inset: 6px; }
.band-dial--sm .band-dial__value { font-size: 24px; }
.band-dial--sm .band-dial__label { font-size: 10px; }