@layer components {
  .proposal {
    display: grid;
    gap: 0.75rem;
    padding: 0.875rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    color: var(--card-foreground);

    &[aria-busy="true"] {
      opacity: 0.75;
    }

    h3, h4, p {
      margin: 0;
    }

    h3 {
      font-size: var(--text-base);
      font-weight: var(--font-weight-semibold);
    }

    h4 {
      font-size: var(--text-sm);
      font-weight: var(--font-weight-medium);
    }
  }

  .proposal__header {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .proposal__eyebrow, .proposal__status, .proposal__requirements, .proposal__note {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
  }

  .proposal__description, .proposal__instructions, .proposal__error {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    white-space: pre-wrap;
  }

  .proposal__error {
    color: var(--destructive);
  }

  .proposal__stages {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding-inline-start: 1.5rem;

    li {
      padding-inline-start: 0.25rem;
    }

    .proposal__requirements {
      margin-block-start: 0.25rem;
    }
  }

  .proposal__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: 0.5rem;

    &[hidden] {
      display: none;
    }

    form {
      margin: 0;
    }
  }

  .proposal__id {
    color: var(--muted-foreground);
    white-space: nowrap;
  }

  .proposal__body summary {
    inline-size: fit-content;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    cursor: pointer;
  }

  .proposal__diff {
    display: grid;
    max-block-size: 24rem;
    margin: 0.5rem 0 0;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--muted);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .proposal__line {
    min-block-size: 1lh;
    padding-inline: 0.5rem;

    &::before {
      display: inline-block;
      inline-size: 1.25ch;
      color: var(--muted-foreground);
      content: " ";
    }
  }

  .proposal__line--same {
    color: var(--muted-foreground);
  }

  .proposal__line--gap {
    padding-block: 0.125rem;
    background: var(--background);
    color: var(--muted-foreground);
    font-family: var(--font-sans);
    font-style: italic;

    &::before { content: none; }
  }

  .proposal__line--added {
    background: color-mix(in oklch, var(--chart-2) 18%, transparent);

    &::before { content: "+"; }
  }

  .proposal__line--removed {
    background: color-mix(in oklch, var(--destructive) 14%, transparent);

    &::before { content: "−"; }
  }

  .proposal__edit {
    flex-basis: 100%;

    summary {
      inline-size: fit-content;
      padding-block: 0.5rem;
      color: var(--muted-foreground);
      font-size: var(--text-sm);
      cursor: pointer;

      &:focus-visible {
        outline: 2px solid var(--ring);
        outline-offset: 2px;
      }
    }

    form {
      display: grid;
      gap: 0.75rem;
      margin-block-start: 0.5rem;
    }
  }
}