/* Help Center progress tracker — styled with furo theme variables so it
 * follows light/dark automatically. */

/* Accessible fallback green (used only when furo's --color-brand-primary is
 * undefined, e.g. non-furo builds). The old fallback #2a7 (#22aa77) was
 * marginal-to-failing: ~2.97:1 as text on white (needs 4.5:1) and ~2.2:1 as a
 * graphic fill against the #e0e0e0 track (needs 3:1). These shades meet WCAG AA
 * for their use:
 *   Light  #1a7f4e : 5.0:1 text on white; 3.8:1 fill vs the light track.
 *   Dark   #35c88a : 8.8:1 text on the furo dark bg; >3:1 fill vs the dark track.
 * When furo defines --color-brand-primary, furo's own theme-aware value wins. */
:root {
  --cv-progress-green: #1a7f4e;
}
@media (prefers-color-scheme: dark) {
  :root {
    --cv-progress-green: #35c88a;
  }
}

.cv-progress-toggle {
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin: 0.5em 0 1.25em;
}

.cv-progress-toggle button {
  font: inherit;
  font-size: 0.85em;
  padding: 0.35em 0.9em;
  border-radius: 999px;
  border: 1px solid var(--color-background-border, #ccc);
  background: var(--color-background-secondary, #f8f8f8);
  color: var(--color-foreground-primary, #333);
  cursor: pointer;
}

.cv-progress-toggle button.cv-progress-done {
  border-color: var(--color-brand-primary, var(--cv-progress-green));
  color: var(--color-brand-primary, var(--cv-progress-green));
  font-weight: 600;
}

.cv-progress-hint {
  font-size: 0.75em;
  color: var(--color-foreground-muted, #888);
}

.cv-progress-tick {
  color: var(--color-brand-primary, var(--cv-progress-green));
  font-weight: 700;
}

.cv-progress-bar {
  margin: 0.5em 0 1.5em;
  max-width: 28em;
}

.cv-progress-bar-label {
  font-size: 0.85em;
  color: var(--color-foreground-muted, #666);
  margin-bottom: 0.3em;
}

.cv-progress-bar-track {
  height: 0.5em;
  border-radius: 999px;
  background: var(--color-background-border, #e0e0e0);
  overflow: hidden;
}

.cv-progress-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--color-brand-primary, var(--cv-progress-green));
  transition: width 0.3s ease;
}

/* "Sync to your account" link (CV-1646 import bridge). Rendered directly under
 * the progress bar; the bar's bottom margin provides the gap below, so pull the
 * link up toward its bar with a negative top margin. */
.cv-progress-sync {
  display: inline-block;
  margin: -1em 0 1.5em;
  font-size: 0.85em;
  color: var(--color-brand-primary, var(--cv-progress-green));
  text-decoration: none;
}

.cv-progress-sync:hover,
.cv-progress-sync:focus {
  text-decoration: underline;
}