@layer components {
    .question {
        display: grid;
        gap: var(--space-2);
        padding: var(--space-4);
        border: 1px solid var(--line);
        border-radius: var(--radius-m);
        background: var(--paper);
    }

    .question-body {
        font-weight: 600;
    }

    .question-meta {
        font-size: var(--size-small);
        color: var(--fog);
    }

    .question-answer {
        display: grid;
        gap: var(--space-1);
        padding: var(--space-3);
        border-inline-start: 3px solid var(--sky);
        background: var(--sky-tint);
        border-radius: var(--radius-s);
    }

    .question-answer-label {
        font-size: var(--size-small);
        font-weight: 600;
        color: var(--sky-deep);
    }

    .question-answer-form textarea {
        width: 100%;
    }

    .question-removal-form input {
        min-width: 0;
        flex: 1 1 240px;
    }
}