/*
 * Progress — Figma 17:360 "Widget / Progress Indicator" (preview 17:163, bar card 17:164). Values are token defaults.
 * Inline: root = preview canvas (#f6f8fc, 18px padding, 14px radius); the bar card is white (16px padding, 8px gap,
 * 12px radius, no border). Title comes from the Title setting (no CSS-injected copy). Fixed: bare track, no canvas.
 */
.rwa-progress {
  --rwa-progress-font: var(--rwa-font-sans, "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);
  --rwa-progress-canvas: #f6f8fc;
  --rwa-progress-pad: 18px;
  --rwa-progress-radius: 14px;
  --rwa-progress-card-bg: #fff;
  --rwa-progress-card-pad: 16px;
  --rwa-progress-card-gap: 8px;
  --rwa-progress-card-radius: 12px;
  --rwa-progress-track: #dee3ed;
  --rwa-progress-track-radius: 6px;
  --rwa-progress-value: 0;
  --rwa-progress-thickness: 12px;
  --rwa-progress-offset: 0px;
  --rwa-progress-brand: #6740ff;
  --rwa-progress-ink: #111522;
  --rwa-progress-muted: #6b7591;
  --rwa-progress-title-size: 13px;
  --rwa-progress-label-size: 11px;
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: var(--rwa-progress-pad);
  border: 0;
  border-radius: var(--rwa-progress-radius);
  background: var(--rwa-progress-canvas);
  color: var(--rwa-progress-brand);
  font-family: var(--rwa-progress-font);
}

.rwa-progress__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--rwa-progress-card-gap);
  box-sizing: border-box;
  width: 100%;
  padding: var(--rwa-progress-card-pad);
  border-radius: var(--rwa-progress-card-radius);
  background: var(--rwa-progress-card-bg);
}

.rwa-progress--ring .rwa-progress__card {
  flex-direction: row;
  align-items: center;
  width: auto;
}

.rwa-progress__title {
  display: block;
  margin: 0;
  color: var(--rwa-progress-ink);
  font-family: var(--rwa-progress-font);
  font-size: var(--rwa-progress-title-size);
  font-weight: 600;
  line-height: normal;
}

.rwa-progress--pos-fixed {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.rwa-progress--pos-fixed .rwa-progress__card {
  display: block;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.rwa-progress--pos-fixed .rwa-progress__title,
.rwa-progress--pos-fixed .rwa-progress__label {
  display: none;
}

.rwa-progress--pos-fixed {
  position: fixed;
  z-index: 9999;
  margin: 0;
}

.rwa-progress--pos-fixed[data-edge="top"] {
  top: var(--rwa-progress-offset, 0px);
  left: 0;
  right: 0;
}

.rwa-progress--pos-fixed[data-edge="bottom"] {
  bottom: var(--rwa-progress-offset, 0px);
  left: 0;
  right: 0;
}

.rwa-progress--pos-fixed[data-edge="left"] {
  left: var(--rwa-progress-offset, 0px);
  top: 0;
  bottom: 0;
  width: auto;
}

.rwa-progress--pos-fixed[data-edge="right"] {
  right: var(--rwa-progress-offset, 0px);
  top: 0;
  bottom: 0;
  width: auto;
}

.rwa-progress__track {
  position: relative;
  width: 100%;
  height: var(--rwa-progress-thickness, 12px);
  border-radius: var(--rwa-progress-track-radius);
  background: var(--rwa-progress-track);
  overflow: hidden;
}

.rwa-progress__fill {
  width: calc(var(--rwa-progress-value) * 1%);
  height: 100%;
  border-radius: inherit;
  background: currentColor;
  transition: width 120ms linear;
}

.rwa-progress--ring {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  width: auto;
}

.rwa-progress__ring {
  width: 4.5rem;
  height: 4.5rem;
  transform: rotate(-90deg);
}

.rwa-progress__ring-track,
.rwa-progress__ring-fill {
  fill: none;
  stroke-width: var(--rwa-progress-thickness, 10);
}

.rwa-progress__ring-track {
  stroke: var(--rwa-progress-track);
}

.rwa-progress__ring-fill {
  stroke: currentColor;
  stroke-linecap: round;
  stroke-dasharray: 326.73;
  stroke-dashoffset: calc(326.73 - (326.73 * var(--rwa-progress-value) / 100));
  transition: stroke-dashoffset 120ms linear;
}

.rwa-progress--section .rwa-progress__sections {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.35rem;
  align-items: center;
}

.rwa-progress__section-marker {
  display: block;
  height: var(--rwa-progress-thickness, 4px);
  border-radius: 999px;
  background: var(--rwa-progress-track);
}

.rwa-progress__section-marker.is-complete {
  background: currentColor;
}

.rwa-progress__section-fill {
  position: absolute;
  left: 0;
  top: 50%;
  height: var(--rwa-progress-thickness, 4px);
  width: calc(var(--rwa-progress-value) * 1%);
  border-radius: 999px;
  background: currentColor;
  opacity: 0.35;
  transform: translateY(-50%);
  pointer-events: none;
}

.rwa-progress__label {
  display: inline-block;
  margin: 0;
  color: var(--rwa-progress-muted);
  font-family: var(--rwa-progress-font);
  font-size: var(--rwa-progress-label-size);
  font-weight: 500;
  line-height: normal;
  font-variant-numeric: tabular-nums;
}

.rwa-progress--ring .rwa-progress__label {
  margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .rwa-progress__fill,
  .rwa-progress__ring-fill {
    transition: none;
  }
}