@layer components {
  .signalCheck-card {
    grid-column: 1 / -1;
  }

  .signalCheck-muted {
    opacity: 0.75;
  }

  /* Questions */

  .signalCheck-progress__bar {
    appearance: none;
    display: block;
    width: 100%;
    height: 4px;
    border: 0;
    border-radius: var(--radius-full);
    overflow: hidden;
    background: color-mix(in srgb, var(--brand-raven) 10%, transparent);
    color: var(--brand-raven);
  }

  .signalCheck-progress__bar::-webkit-progress-bar {
    background: transparent;
  }

  .signalCheck-progress__bar::-webkit-progress-value {
    background: var(--brand-raven);
    -webkit-transition: inline-size 300ms;
    transition: inline-size 300ms;
  }

  .signalCheck-progress__bar::-moz-progress-bar {
    background: var(--brand-raven);
  }

  .signalCheck-options {
    gap: var(--spacing-fluid-s);
    min-inline-size: 0;
  }

  @media (min-width: 640px) {
    .signalCheck-options {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .signalCheck-option {
    color: var(--color);
    border: var(--border-width-m) solid color-mix(in srgb, var(--brand-raven) 15%, transparent);
    border-radius: var(--radius-m);
    text-align: start;
    transition:
      border-color 150ms,
      background-color 150ms,
      color 150ms;
  }

  .signalCheck-option > span {
    display: block;
  }

  .signalCheck-option:hover,
  .signalCheck-option[aria-pressed="true"] {
    border-color: var(--brand-raven);
  }

  /* Result */

  .signalCheck-grade,
  .signalCheck-stage__leak,
  .signalCheck-fix__tag {
    --surface-tag-color: var(--brand-raven);
  }

  .signalCheck-grade--weak {
    --surface-tag-background: var(--brand-coral);
  }

  .signalCheck-grade--fair {
    --surface-tag-background: var(--brand-mustard);
  }

  .signalCheck-grade--strong {
    --surface-tag-background: var(--brand-mint);
  }

  .signalCheck-highlight {
    padding-inline: 0.12em;
    border-radius: var(--radius-s);
    background: var(--brand-mint);
    color: var(--brand-raven);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  /* Journey: 100 sales or leads followed to the ad platforms */

  .signalCheck-journey {
    container-type: inline-size;
  }

  .signalCheck-journey,
  .signalCheck-fix {
    border-radius: var(--radius-m);
  }

  .signalCheck-journey__bar {
    justify-content: space-between;
  }

  .signalCheck-platforms {
    inline-size: auto;
  }

  .signalCheck-journey__body {
    display: grid;
    gap: var(--spacing-fluid-xl);
  }

  @container (min-width: 560px) {
    .signalCheck-journey__body {
      grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
      align-items: start;
    }
  }

  .signalCheck-dots {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 0.3rem;
    width: 100%;
    max-width: 15rem;
  }

  .signalCheck-dot,
  .signalCheck-legendMarker {
    display: block;
    aspect-ratio: 1;
    border: 2px solid transparent;
    border-radius: var(--radius-full);
    background: var(--brand-raven);
  }

  .signalCheck-dot {
    transition-property: background-color, border-color, border-radius, scale;
    transition-duration: 350ms;
    transition-delay: calc(var(--dot-column, 0) * 30ms);
  }

  .signalCheck-dot--estimated {
    border-color: var(--brand-raven);
    border-style: dashed;
    background: transparent;
  }

  .signalCheck-dot--own {
    border-radius: 25%;
    background: var(--brand-mint);
  }

  .signalCheck-dot--unlinked {
    background: color-mix(in srgb, var(--brand-raven) 25%, transparent);
  }

  .signalCheck-dot--lost {
    background: var(--brand-coral);
    scale: 0.55;
  }

  @media (prefers-reduced-motion: reduce) {
    .signalCheck-dot {
      transition: none;
    }
  }

  .signalCheck-stage {
    transition: opacity 250ms;
  }

  .signalCheck-stage + .signalCheck-stage {
    border-block-start: var(--border-width-s) solid
      color-mix(in srgb, var(--brand-raven) 12%, transparent);
  }

  .signalCheck-stage--todo {
    opacity: 0.621;
  }

  .signalCheck-stage__button {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--spacing-fluid-m);
    width: 100%;
    padding-block: var(--spacing-fluid-s);
    text-align: start;
  }

  .signalCheck-option:focus-visible,
  .signalCheck-stage__button:focus-visible {
    outline: 2px solid var(--brand-raven);
    outline-offset: 2px;
  }

  .signalCheck-stage__title,
  .signalCheck-dotLegend__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }

  .signalCheck-stage__title {
    gap: var(--spacing-fluid-s);

    /* Stepper marker: solid once a stage has played, mint while it plays */
  }

  .signalCheck-stage__title::before {
    content: "";
    width: 0.6em;
    height: 0.6em;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--brand-raven) 20%, transparent);
    transition: background-color 250ms;
  }

  .signalCheck-stage--done .signalCheck-stage__title::before {
    background: var(--brand-raven);
  }

  .signalCheck-stage--active .signalCheck-stage__title::before {
    background: var(--brand-mint);
    box-shadow: 0 0 0 2px var(--brand-raven);
  }

  .signalCheck-stage__leak {
    --surface-tag-background: var(--brand-mustard);
    margin-inline-start: var(--spacing-fluid-s);
  }

  .signalCheck-stage__count {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .signalCheck-stage__text {
    padding-block-end: var(--spacing-fluid-m);
    padding-inline-start: calc(0.6em + var(--spacing-fluid-s));
  }

  .signalCheck-legendMarker {
    inline-size: var(--spacing-fluid-m);
  }

  .signalCheck-dotLegend__item {
    min-inline-size: 0;
    gap: var(--spacing-fluid-xs);
  }

  .signalCheck-gate,
  .signalCheck-method {
    border-block-start: var(--border-width-s) solid
      color-mix(in srgb, var(--brand-raven) 15%, transparent);
  }

  .signalCheck-gate {
    padding-block-start: var(--spacing-fluid-2xl);
  }

  /* Fix plan */

  .signalCheck-fix {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--spacing-fluid-s) var(--spacing-fluid-l);
  }

  @media (min-width: 640px) {
    .signalCheck-fix {
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: start;
    }
  }

  .signalCheck-fix__rank {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
  }

  .signalCheck-fix__tag {
    --surface-tag-background: var(--brand-mint);
    margin-inline-start: var(--spacing-fluid-s);
    vertical-align: middle;
  }

  .signalCheck-fix__value {
    grid-column: 2;
  }

  @media (min-width: 640px) {
    .signalCheck-fix__value {
      grid-column: 3;
      text-align: end;
      white-space: nowrap;
    }
  }

  .signalCheck-method summary:hover {
    background: var(--brand-cloud);
  }
}