@layer components {
  .choice {
    position: relative;
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--duration-fast) var(--ease-standard),
                background-color var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard),
                translate var(--duration-fast) var(--ease-standard);

    .letter {
      flex: none;
      inline-size: 1.75rem;
      block-size: 1.75rem;
      border: 1px solid var(--color-border-strong);
      border-radius: var(--radius-full);
      text-align: center;
      line-height: 1.65rem;
      font-weight: 600;
      font-size: var(--text-sm);
      color: var(--color-text-muted);
      transition: border-color var(--duration-fast) var(--ease-standard),
                  background-color var(--duration-fast) var(--ease-standard),
                  color var(--duration-fast) var(--ease-standard);
    }
  }

  .question {
    .stem {
      padding: 0;
      margin-block-end: var(--space-4);
      font-size: var(--text-lg);
      font-weight: 600;
      line-height: var(--line-height-tight);
    }

    fieldset {
      display: grid;
      gap: var(--space-2);
      padding: 0;
      border: 0;
    }

    .choice {
      cursor: pointer;

      input[type="radio"] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
      }

      &:hover {
        border-color: var(--color-border-strong);
        background: var(--color-hover-wash);
        translate: 0 -1px;
        box-shadow: 0 2px 6px oklch(0% 0 0 / 0.06);
      }

      &:has(input[type="radio"]:focus-visible) {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
      }

      &:has(input[type="radio"]:checked) {
        border-color: var(--color-accent);
        background: color-mix(in oklab, var(--color-accent) 7%, transparent);

        .letter {
          border-color: var(--color-accent);
          background: var(--color-accent);
          color: var(--color-fill-contrast);
        }
      }
    }

    input[type="submit"] { margin-block-start: var(--space-5); }
  }

  .statements {
    ol {
      display: grid;
      gap: var(--space-3);
      padding: 0;
    }

    li {
      display: grid;
      grid-template-columns: 1.75rem minmax(0, 1fr);
      column-gap: var(--space-2);
    }

    .statement-n {
      padding-block-start: 0.2em;
      font-family: var(--font-mono);
      font-size: var(--text-sm);
      color: var(--color-text-muted);
    }

    > .stem { margin-block-start: var(--space-1); }
  }

  .choices > .statements { margin-block-end: var(--space-2); }
}