/* ==========================================================================
   AI Quality Assurance: page-specific demo components
   Builds on assets/css/product-demo.css. Everything here sits inside a demo
   window, so sizes are in em (the window's font size follows the panel).
   Timelines: assets/js/demos/ai-quality-assurance.js.
   ========================================================================== */

.td-window {
  --qa-amber: oklch(74% 0.15 62);
  --qa-amber-ink: oklch(48% 0.13 60);
  --qa-amber-soft: oklch(95% 0.05 75);
  --qa-red: oklch(58% 0.17 25);
  --qa-red-soft: oklch(95.5% 0.03 25);
  --qa-line: oklch(94% 0.006 262);
}

.qa-demo-icon--flag {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4M5 4h11l-2 4 2 4H5'/%3E%3C/svg%3E");
}

/* Shared "appears when its step is reached" motion for this page. */
.qa-demo-flag--new,
.qa-demo-gap {
  opacity: 0;
  transform: translateY(0.5em);
}

.qa-demo-flag--new.is-on,
.qa-demo-gap.is-on {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------ hero: coverage ---- */

.td-stats.qa-demo-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.qa-demo-calls,
.qa-demo-flags {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.qa-demo-call {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75em;
  padding: 0.62em 0.6em;
  border-bottom: 1px solid var(--qa-line);
  border-radius: 0.5em;
}

.qa-demo-call--flag {
  background: color-mix(in oklch, var(--qa-amber-soft) 0%, white);
  transition: background 400ms var(--ease-out-quart);
}

.qa-demo-call--flag:has(.td-swap__to.is-on) {
  background: color-mix(in oklch, var(--qa-amber-soft) 60%, white);
}

.qa-demo-call__text b {
  display: block;
  color: var(--color-ink-950);
  font-weight: 600;
}

.qa-demo-call__text small {
  display: block;
  overflow: hidden;
  color: var(--color-ink-500);
  font-size: 0.85em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qa-demo-call__score {
  justify-self: end;
  color: var(--color-ink-950);
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.qa-demo-call__score > * {
  justify-self: end;
}

/* The flagged call's score lands in amber, matching its row. */
.qa-demo-call--flag .qa-demo-call__score .td-swap__to {
  color: var(--qa-amber-ink);
}

.td-skills .qa-demo-skill--low b {
  color: var(--qa-amber-ink);
}

.td-skills .qa-demo-skill--low i::after {
  background: var(--qa-amber);
}

/* -------------------------------------------------------- hero: review ---- */

/* Counts up from zero to this call's score. */
.td-dial.qa-demo-dial {
  --td-score: 0;
}

.td-dial.qa-demo-dial.is-on {
  --td-score: 71;
}

/* A one-line read of the call beside its score, in once the score counts up. */
.qa-demo-summary {
  align-content: center;
  opacity: 0;
  transform: translateY(0.4em);
  transition:
    opacity 420ms var(--ease-out-quart) 300ms,
    transform 420ms var(--ease-out-quart) 300ms;
}

.qa-demo-summary.is-on {
  opacity: 1;
  transform: none;
}

.qa-demo-summary p {
  max-width: none;
  margin: 0;
  color: var(--color-ink-900);
  font-size: 0.95em;
  line-height: 1.45;
}

/* The one check that fails: amber with a "!" instead of a tick. */
.td-checks li.qa-demo-miss.is-on .td-check {
  border-color: var(--qa-amber);
  background: var(--qa-amber);
}

.td-checks li.qa-demo-miss .td-check::after {
  content: "!";
}

.qa-demo-send > * {
  justify-self: start;
  align-self: center;
}

/* --------------------------------------------------------- hero: flags ---- */

.qa-demo-flag {
  display: grid;
  grid-template-columns: 4.6em minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8em;
  padding: 0.5em 0.4em;
  border-bottom: 1px solid var(--qa-line);
  border-radius: 0.5em;
  transition:
    opacity 420ms var(--ease-out-quart),
    transform 420ms var(--ease-out-quart),
    background 400ms var(--ease-out-quart);
}

.qa-demo-flag--new {
  background: color-mix(in oklch, var(--color-accent-600) 6%, white);
}

.qa-demo-flag--resolves.is-on .qa-demo-call__text,
.qa-demo-flag--resolves.is-on .qa-demo-sev {
  opacity: 0.45;
}

.qa-demo-flag--resolves.is-on .qa-demo-call__text b {
  text-decoration: line-through;
  text-decoration-color: oklch(70% 0.01 262);
}

.qa-demo-sev {
  justify-self: start;
  padding: 0.2em 0.55em;
  border-radius: 0.4em;
  background: var(--qa-amber-soft);
  color: var(--qa-amber-ink);
  font-size: 0.8em;
  font-weight: 700;
  transition: opacity 400ms var(--ease-out-quart);
}

.qa-demo-sev--high {
  background: var(--qa-red-soft);
  color: var(--qa-red);
}

.qa-demo-sev--low {
  background: oklch(95% 0.006 262);
  color: var(--color-ink-500);
}

.qa-demo-flag__action {
  justify-self: end;
}

.qa-demo-flag__action > * {
  justify-self: end;
  align-self: center;
}

.qa-demo-owner {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  color: var(--color-ink-700);
  font-size: 0.88em;
  font-weight: 500;
  white-space: nowrap;
}

.qa-demo-flag--new .qa-demo-owner {
  color: var(--color-accent-700);
  font-weight: 600;
}

/* -------------------------------------------------------- hero: trends ---- */

.qa-demo-trends {
  display: grid;
  gap: 0.8em;
  margin-bottom: 1.1em;
}

.qa-demo-trends__side {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8em;
}

.qa-demo-trends__side .qa-stat__value {
  font-size: 1.45em;
}

.qa-demo-chart {
  gap: 0.8em;
}

.qa-demo-chart__bars {
  display: flex;
  align-items: flex-end;
  gap: 0.6em;
  height: 10em;
  padding-top: 1.3em;
}

.qa-demo-chart__bars i {
  position: relative;
  flex: 1;
  height: 12%;
  border-radius: 0.35em 0.35em 0.15em 0.15em;
  background: color-mix(in oklch, var(--color-accent-600) 30%, white);
  transition: height 900ms var(--ease-out-quart);
}

.qa-demo-chart__bars i:last-child {
  background: var(--color-accent-600);
}

.qa-demo-chart__bars.is-on i {
  height: var(--h);
}

.qa-demo-chart__bars i:nth-child(2) { transition-delay: 60ms; }
.qa-demo-chart__bars i:nth-child(3) { transition-delay: 120ms; }
.qa-demo-chart__bars i:nth-child(4) { transition-delay: 180ms; }
.qa-demo-chart__bars i:nth-child(5) { transition-delay: 240ms; }
.qa-demo-chart__bars i:nth-child(6) { transition-delay: 300ms; }
.qa-demo-chart__bars i:nth-child(7) { transition-delay: 360ms; }
.qa-demo-chart__bars i:nth-child(8) { transition-delay: 420ms; }

.qa-demo-chart__bars b {
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-bottom: 0.25em;
  color: var(--color-ink-500);
  font-size: 0.78em;
  font-style: normal;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 400ms var(--ease-out-quart) 700ms;
}

.qa-demo-chart__bars i:last-child b {
  color: var(--color-accent-700);
}

.qa-demo-chart__bars.is-on b {
  opacity: 1;
}

.qa-demo-gap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8em;
  padding: 0.8em 1em;
  border: 1px solid oklch(90% 0.06 75);
  border-radius: 0.9em;
  background: oklch(97.5% 0.025 80);
  transition:
    opacity 420ms var(--ease-out-quart),
    transform 420ms var(--ease-out-quart);
}

.qa-demo-gap .loop-habit__text small {
  font-size: 0.85em;
}

.qa-demo-gap__action > * {
  justify-self: end;
  align-self: center;
}

.qa-demo-raised {
  display: block;
  margin-top: 0.8em;
  opacity: 0;
  transition: opacity 420ms var(--ease-out-quart);
}

.qa-demo-raised.is-on {
  opacity: 1;
}

/* ------------------------------------------------- loop: grade + report --- */

.qa-demo-review .loop-call__head {
  width: 100%;
}

.qa-demo-callscore {
  margin-left: auto;
  color: var(--color-ink-950);
  font-family: var(--font-display);
  font-size: 1.5em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.qa-demo-callscore .td-swap__to {
  color: var(--qa-amber-ink);
}

/* The waveform sweeps once while the call is graded. */
[data-scene="grade"] .qa-demo-review .loop-wave__played {
  animation: loop-play 4.6s linear forwards;
}

[data-scene="grade"] .qa-demo-review .loop-wave::after {
  animation: loop-head 4.6s linear forwards;
}

[data-scene="check"] .qa-demo-review .loop-wave__played {
  clip-path: none;
}

.qa-demo-wavewrap {
  position: relative;
}

.qa-demo-marks {
  position: absolute;
  inset: -0.4em 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms var(--ease-out-quart);
}

.qa-demo-marks.is-current {
  opacity: 1;
}

.qa-demo-mark {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--x);
  width: 2px;
  border-radius: 1px;
  background: var(--color-success);
  transform: scaleY(0);
  transition: transform 380ms var(--ease-out-quart);
}

.qa-demo-mark::before {
  content: "";
  position: absolute;
  top: -0.3em;
  left: 50%;
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  background: inherit;
  transform: translateX(-50%);
}

.qa-demo-mark--flag {
  background: var(--qa-amber);
}

.qa-demo-mark.is-on {
  transform: none;
}

.qa-demo-criteria,
.qa-demo-lines {
  display: grid;
  align-content: start;
  gap: 0.5em;
  margin: 1em 0 0;
  padding: 0;
  list-style: none;
}

.qa-demo-criteria li {
  display: grid;
  grid-template-columns: 8.4em minmax(0, 1fr) 1.8em;
  align-items: center;
  gap: 0.8em;
  padding: 0.55em 0.8em;
  border: 1px solid oklch(93% 0.006 262);
  border-radius: 0.7em;
  background: white;
  color: var(--color-ink-700);
  font-size: 0.92em;
}

.qa-demo-criteria i {
  position: relative;
  height: 0.45em;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: oklch(94% 0.008 262);
}

.qa-demo-criteria i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: var(--color-accent-600);
  transition: width 900ms var(--ease-out-quart) 150ms;
}

.qa-demo-criteria li.is-on i::after {
  width: var(--w);
}

.qa-demo-criteria b {
  justify-self: end;
  color: var(--color-ink-950);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.qa-demo-criteria__low i::after {
  background: var(--qa-amber);
}

.qa-demo-criteria__low b {
  color: var(--qa-amber-ink);
}

.qa-demo-lines li {
  display: grid;
  grid-template-columns: 2.6em minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.7em;
  padding: 0.55em 0.8em;
  border: 1px solid oklch(93% 0.006 262);
  border-radius: 0.7em;
  background: white;
  font-size: 0.92em;
}

.qa-demo-lines time {
  padding-top: 0.1em;
  color: var(--color-ink-500);
  font-size: 0.9em;
  font-variant-numeric: tabular-nums;
}

.qa-demo-lines p {
  max-width: none;
  margin: 0;
  color: var(--color-ink-900);
  line-height: 1.4;
}

.qa-demo-lines small {
  display: block;
  margin-top: 0.2em;
  color: var(--qa-amber-ink);
  font-size: 0.88em;
  font-weight: 600;
}

.qa-demo-lines .td-check {
  border-color: var(--color-success);
  background: var(--color-success);
}

.qa-demo-lines .td-check::after {
  opacity: 1;
}

.qa-demo-lines li.qa-demo-lines__flag {
  border-color: oklch(90% 0.06 75);
  background: oklch(98.5% 0.015 80);
}

.qa-demo-lines__flag .td-check {
  border-color: var(--qa-amber);
  background: var(--qa-amber);
}

.qa-demo-lines__flag .td-check::after {
  content: "!";
}

/* ------------------------------------------------------- loop: route ---- */

.qa-demo-route {
  display: grid;
  gap: 0.7em;
}

.qa-demo-ticket {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.8em;
  padding: 0.9em 1em;
  border: 1px solid oklch(90% 0.06 75);
  border-radius: 0.9em;
  background: oklch(97.5% 0.025 80);
  transform: translateY(-0.8em) scale(0.98);
}

.qa-demo-handoff {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.3em 0.8em;
  padding: 0.9em 1em;
  border: 1px solid oklch(92% 0.008 262);
  border-radius: 0.9em;
  background: white;
  box-shadow: 0 0.6em 1.6em oklch(30% 0.03 262 / 0.06);
}

.qa-demo-handoff > .loop-done,
.qa-demo-handoff > .loop-ready {
  grid-column: 2;
}

.qa-demo-handoff--training > .td-icon {
  width: 2.3em;
  height: 2.3em;
  border-radius: 0.6em;
  background: color-mix(in oklch, var(--color-accent-600) 12%, white);
  color: var(--color-accent-700);
}

/* --------------------------------------------------------- breakpoints ---- */

@media (min-width: 48rem) {
  .qa-demo-trends {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  }

  .qa-demo-trends__side {
    grid-template-columns: minmax(0, 1fr);
  }

  .qa-demo-handoff {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .qa-demo-handoff > .loop-done {
    grid-column: auto;
  }
}

/* Phones: keep each scene to what fits in a tall, narrow panel. */
@media (max-width: 47.99rem) {
  .td-stats.qa-demo-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* The flags queue keeps its top four rows. */
  .qa-demo-flag:nth-child(5) {
    display: none;
  }

  .qa-demo-flag {
    grid-template-columns: 4.2em minmax(0, 1fr) auto;
    gap: 0.6em;
  }

  .qa-demo-gap {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .qa-demo-gap__action {
    grid-column: 2;
    justify-self: start;
  }

  .qa-demo-gap__action > * {
    justify-self: start;
  }

  .qa-demo-chart__bars {
    height: 7em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .qa-demo-flag,
  .qa-demo-gap,
  .qa-demo-criteria li,
  .qa-demo-criteria i::after,
  .qa-demo-lines li,
  .qa-demo-ticket,
  .qa-demo-handoff,
  .qa-demo-call--flag,
  .qa-demo-summary,
  .qa-demo-sev,
  .qa-demo-raised,
  .qa-demo-chart__bars i,
  .qa-demo-chart__bars b,
  .qa-demo-marks,
  .qa-demo-mark {
    transition: none;
  }

  [data-scene] .qa-demo-review .loop-wave__played {
    animation: none !important;
    clip-path: none;
  }
}

/* ==========================================================================
   "Every call, graded" rows: one vignette per row (timelines "qa-coverage",
   "qa-risk" and "qa-scale"). The rows themselves are laid out by the shared
   service-row styles in products.css.
   ========================================================================== */

/* Animated whole-number counts: --n-from to --n-to when the flag is reached. */
@property --qa-n {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

.qa-count {
  --qa-n: var(--n-from, 0);
  font-variant-numeric: tabular-nums;
  counter-reset: qa-n var(--qa-n);
  transition: --qa-n 2.2s var(--ease-out-quart);
}

.qa-count.is-on {
  --qa-n: var(--n-to, 0);
}

.qa-count::after {
  content: counter(qa-n);
}

/* Shared "appears when its step is reached" motion for the rows. */
.qa-cov__note,
.qa-risk__steps li,
.qa-risk__alert,
.qa-scale__note {
  opacity: 0;
  transform: translateY(0.5em);
  transition:
    opacity 420ms var(--ease-out-quart),
    transform 420ms var(--ease-out-quart);
}

.qa-cov__note.is-on,
.qa-risk__steps li.is-on,
.qa-risk__alert.is-on,
.qa-scale__note.is-on {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------ row: coverage ---- */

.qa-cov {
  display: grid;
  align-content: start;
  gap: 1.3em;
}

.qa-cov__compare {
  display: grid;
  gap: 0.7em;
}

.qa-cov__row {
  display: grid;
  grid-template-columns: 8em minmax(0, 1fr) 4.8em;
  align-items: center;
  gap: 0.8em;
  color: var(--color-ink-700);
  font-size: 0.92em;
  opacity: 0.45;
  transition: opacity 420ms var(--ease-out-quart);
}

.qa-cov__row.is-on {
  opacity: 1;
}

.qa-cov__row b {
  justify-self: end;
  color: var(--color-ink-700);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.qa-cov__row--ai .qa-cov__label,
.qa-cov__row--ai b {
  color: var(--color-ink-950);
  font-weight: 600;
}

.qa-cov__bar {
  height: 0.6em;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--qa-line);
}

.qa-cov__bar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: oklch(72% 0.02 262);
  transition: width 900ms var(--ease-out-quart);
}

.qa-cov__row--ai .qa-cov__bar i {
  background: linear-gradient(90deg, var(--color-accent-600), var(--color-success));
  transition-duration: 2.2s;
}

.qa-cov__row.is-on .qa-cov__bar i {
  width: var(--w);
}

/* One square per call. Grey is unheard, blue was sampled by hand, green was
   graded by AI, and amber needs a person. */
.qa-cov__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.4em;
}

.qa-cov__tile {
  aspect-ratio: 1;
  border-radius: 0.3em;
  background: var(--qa-line);
  transition:
    background 320ms var(--ease-out-quart),
    opacity 420ms var(--ease-out-quart),
    box-shadow 420ms var(--ease-out-quart);
}

.qa-cov__tile--sampled.is-on {
  background: var(--color-accent-600);
}

.qa-cov__grid.is-on .qa-cov__tile {
  background: color-mix(in oklch, var(--color-success) 55%, white);
  transition-delay: calc(var(--i) * 30ms);
}

.qa-cov:has(.qa-cov__note.is-on) .qa-cov__tile {
  opacity: 0.45;
  transition-delay: 0ms;
}

.qa-cov:has(.qa-cov__note.is-on) .qa-cov__tile--flag {
  background: var(--qa-amber);
  box-shadow: 0 0 0 0.2em var(--qa-amber-soft);
  opacity: 1;
}

.qa-cov__note {
  max-width: none;
  margin: 0;
  color: var(--color-ink-700);
  font-size: 0.95em;
}

.qa-cov__note b {
  color: var(--qa-amber-ink);
}

/* ---------------------------------------------------------- row: risk ---- */

.qa-risk {
  display: grid;
  align-content: start;
  gap: 1.1em;
}

.qa-risk__call .loop-call__head {
  margin-bottom: 0;
}

.qa-risk__score {
  margin-left: auto;
  color: var(--color-ink-500);
  font-family: var(--font-display);
  font-size: 1.5em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.qa-risk__score .td-swap__to {
  color: var(--qa-red);
}

.qa-risk__steps {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Time, then a dot on a line joining the steps, then the step itself. */
.qa-risk__steps li {
  position: relative;
  display: grid;
  grid-template-columns: 3.4em 1.4em minmax(0, 1fr);
  align-items: start;
  padding: 0.35em 0 0.55em;
}

.qa-risk__steps li::before {
  content: "";
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  width: 0.7em;
  height: 0.7em;
  margin-top: 0.3em;
  border-radius: 50%;
  background: var(--color-accent-600);
  box-shadow: 0 0 0 0.22em color-mix(in oklch, var(--color-accent-600) 16%, white);
}

.qa-risk__steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1.55em;
  bottom: -0.35em;
  left: 4.1em;
  width: 2px;
  background: var(--qa-line);
}

.qa-risk__steps time {
  grid-column: 1;
  grid-row: 1;
  padding-top: 0.1em;
  color: var(--color-ink-500);
  font-size: 0.88em;
  font-variant-numeric: tabular-nums;
}

.qa-risk__steps li > span {
  grid-column: 3;
  grid-row: 1;
  padding-left: 0.4em;
}

.qa-risk__steps b {
  display: block;
  color: var(--color-ink-950);
  font-weight: 600;
}

.qa-risk__steps small {
  display: block;
  color: var(--color-ink-500);
  font-size: 0.85em;
}

.qa-risk__step--flag::before {
  background: var(--qa-red);
  box-shadow: 0 0 0 0.22em var(--qa-red-soft);
}

.qa-risk__steps .qa-risk__step--flag b {
  color: var(--qa-red);
}

.qa-risk__alert {
  display: grid;
  gap: 0.3em;
  padding: 0.9em 1.1em;
  border: 1px solid color-mix(in oklch, var(--color-accent-600) 30%, white);
  border-radius: 0.9em;
  background: color-mix(in oklch, var(--color-accent-100) 55%, white);
}

.qa-risk__alert b {
  display: block;
  color: var(--color-ink-950);
  font-weight: 600;
}

.qa-risk__alert small {
  display: block;
  color: var(--color-ink-700);
  font-size: 0.95em;
}

/* --------------------------------------------------------- row: scale ---- */

.qa-scale {
  display: grid;
  align-content: start;
  gap: 1.2em;
}

.qa-scale__team {
  display: flex;
  align-items: center;
  gap: 0.8em;
}

.qa-scale__faces {
  display: flex;
  padding-left: 0.3em;
}

.qa-scale__faces .loop-avatar {
  margin-left: -0.3em;
  box-shadow: 0 0 0 0.18em white;
}

.qa-scale__faces .loop-avatar:nth-child(2) {
  background: linear-gradient(135deg, oklch(76% 0.08 200), oklch(55% 0.1 240));
}

.qa-scale__faces .loop-avatar:nth-child(3) {
  background: linear-gradient(135deg, oklch(78% 0.08 140), oklch(56% 0.1 160));
}

.td-stats.qa-scale__stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 0;
}

/* One dot per five reps. The first ten (lighter) are what sampling covers;
   the rest light up once AI grades every call. */
.qa-scale__reps {
  display: grid;
  grid-template-columns: repeat(20, 1.15em);
  justify-content: space-between;
  gap: 0.7em 0;
}

.qa-scale__rep {
  height: 1.15em;
  border-radius: 50%;
  background: var(--qa-line);
  transition: background 320ms var(--ease-out-quart);
}

.qa-scale__reps.is-on .qa-scale__rep {
  background: var(--color-accent-600);
}

.qa-scale__reps .qa-scale__rep.qa-scale__rep--base {
  background: color-mix(in oklch, var(--color-accent-600) 45%, white);
}

.qa-scale__reps.is-on .qa-scale__rep:not(.qa-scale__rep--base) {
  transition-delay: calc(var(--i) * 40ms);
  animation: qa-pop 360ms var(--ease-out-quart) calc(var(--i) * 40ms) both;
}

@keyframes qa-pop {
  50% { transform: scale(1.25); }
}

.qa-scale__key {
  max-width: none;
  margin: -0.6em 0 0;
  color: var(--color-ink-500);
  font-size: 0.8em;
}

.qa-scale__note {
  display: flex;
  align-items: center;
  gap: 0.6em;
  max-width: none;
  margin: 0;
  color: var(--color-ink-950);
  font-weight: 600;
}

.qa-scale__note .td-check {
  border-color: var(--color-success);
  background: var(--color-success);
}

.qa-scale__note .td-check::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .qa-count,
  .qa-cov__note,
  .qa-cov__row,
  .qa-cov__bar i,
  .qa-cov__tile,
  .qa-risk__steps li,
  .qa-risk__alert,
  .qa-scale__rep,
  .qa-scale__note {
    transition: none !important;
  }

  .qa-scale__reps.is-on .qa-scale__rep {
    animation: none !important;
  }
}

/* The coverage and scale vignettes are shorter than the others, so their
   windows are a little less tall than the shared panel. */
#coverage .showcase-panel.loop-panel,
#scale .showcase-panel.loop-panel {
  aspect-ratio: 1 / 1;
}

@media (min-width: 48rem) {
  #coverage .showcase-panel.loop-panel,
  #scale .showcase-panel.loop-panel {
    aspect-ratio: 6 / 5;
  }
}