/* A real finding with its fix, as live HTML: criterion, before/after swatches and the code change.
   Unboxed: only report sheets are paper. */
@layer components {
  .fix {
    padding-top: var(--space-6);
    border-top: 2px solid var(--color-text);

    p {
      margin: 0;
    }

    .fix__criterion {
      font-size: var(--text-lg);
      font-weight: var(--font-bold);
    }

    .fix__summary {
      margin-top: var(--space-2);
      color: var(--color-text-muted);
    }

    .fix__swatches {
      display: grid;
      grid-template-columns: 1fr 1fr;
      margin-top: var(--space-6);
      border-top: 1px solid var(--color-border);
      border-bottom: 1px solid var(--color-border);
    }

    .fix__swatch {
      padding: var(--space-5) var(--space-5) var(--space-5) 0;

      & + .fix__swatch {
        padding-left: var(--space-6);
        border-left: 1px solid var(--color-border);
      }
    }

    .fix__sample {
      display: block;
      width: 8.5rem;
      height: auto;
    }

    .fix__label {
      margin-top: var(--space-4);
      font-size: var(--text-sm);
      color: var(--color-text-muted);
    }

    .fix__ratio {
      font-size: var(--text-xl);
      font-weight: var(--font-semibold);
    }

    .fix__ratio--fail {
      color: var(--color-error);
    }

    .fix__ratio--pass {
      color: var(--color-success);
    }

    .fix__code {
      margin: var(--space-6) 0 0;
      padding: var(--space-4) var(--space-5);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      background: var(--color-surface);
      color: var(--color-text);
      font-size: 0.875rem;
      line-height: 1.7;

      code {
        padding: 0;
        background: none;
        font-size: inherit;
      }
    }

    .fix__file,
    .fix__del,
    .fix__add {
      display: block;
    }

    .fix__file {
      color: var(--color-text-muted);
    }

    .fix__del {
      color: var(--color-error);
    }

    .fix__add {
      color: var(--color-success);
    }
  }

  @media (max-width: 640px) {
    .fix .fix__sample {
      width: 7.5rem;
    }
  }
}