@layer pages {
    .page__header {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 1.25rem;
    }

    .page__subtitle {
        margin: 0.25rem 0 0;
        color: var(--text-muted);
        font-size: 0.9rem;
    }

    .page__actions .input {
        width: 20rem;
        max-width: 100%;
    }

    .detail {
        display: grid;
        grid-template-columns: 7rem 1fr;
        gap: 0.35rem 1rem;
        margin: 0 0 1rem;
    }

    .detail dt {
        color: var(--text-muted);
        font-size: 0.85rem;
    }

    .detail dd {
        margin: 0;
    }

    .detail__title {
        margin: 0 0 0.75rem;
        font-size: 1.05rem;
    }

    .state {
        padding: 2.5rem 1rem;
        color: var(--text-muted);
        text-align: center;
    }

    .state--error {
        color: var(--danger);
    }
}