{{-- 
    @intent Envelope semântico para o conteúdo principal da página.
    @description Garante a estrutura acessível (main) e o ID necessário para o motor de impressão (APE).
--}}
<main id="{{ $id ?? 'main-content' }}" class="w-100 focus-none {{ $class ?? '' }}" tabindex="-1" role="main">
    <article class="prose max-w-none">
        {{ $slot }}
    </article>
</main>

<style>
    .focus-none:focus { outline: none; }
    /* Estilização básica para simular o .prose da inspiração no BS4 */
    .prose { color: var(--color-text-main); line-height: 1.6; }
    .prose h1, .prose h2, .prose h3 { margin-top: 1.5rem; margin-bottom: 1rem; color: var(--color-text-main); }
    .prose p { margin-bottom: 1.25rem; }
</style>