/*
 * ZEUS Studio — base (Fase 3): reset, foco, teclado, reduced-motion e os
 * quatro padrões de estado que o plano pede em toda tela (vazio, erro,
 * carregando, sem permissão). Carregado depois de tokens.css.
 */

*, *::before, *::after {
    box-sizing: border-box;
}

/*
 * `[hidden]` reforçado (Fase 5, achado ao vivo — não introduzido por esta
 * fase, mas descoberto aqui). Qualquer elemento com uma classe que declara
 * `display:` (`.z-error`, `.z-alert`, `.z-card`…) neutraliza o `[hidden]`
 * nativo: a folha de estilo do USER AGENT perde para QUALQUER regra de
 * autor no mesmo elemento, mesmo com especificidade igual — a origem da
 * regra pesa antes da especificidade no cascade. Resultado prático: um
 * `<p class="z-error" hidden>` (o padrão usado desde `entrar.php`, Fase 3)
 * fica com `display: flex` computado — visível como uma caixa vazia o
 * tempo todo, nunca escondido. Confirmado ao vivo nesta fase testando
 * `_entrevista.php` num navegador de verdade (`computed display: flex`
 * com o atributo `hidden` presente). Um `!important` aqui é o único jeito
 * de reforçar a prioridade de origem sem remover `display:` de cada
 * componente individualmente.
 */
[hidden] {
    display: none !important;
}

html {
    color-scheme: dark;
}

body {
    margin: 0;
    background: var(--z-bg);
    color: var(--z-text);
    font-family: var(--z-font-sans);
    font-size: var(--z-text-base);
    font-weight: 400;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p {
    margin: 0;
}

button, input, select, textarea {
    font-family: inherit;
    color: inherit;
}

a {
    color: var(--z-orange);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

code, pre, .z-mono {
    font-family: var(--z-font-mono);
}

::selection {
    background: var(--z-orange-a35);
    color: var(--z-text);
}

/* Scrollbar quente, nunca o azul padrão do sistema. */
* {
    scrollbar-color: var(--z-border-strong) var(--z-bg);
    scrollbar-width: thin;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--z-bg); }
*::-webkit-scrollbar-thumb {
    background: var(--z-border-strong);
    border-radius: var(--z-radius-full);
}

/* ---- Foco visível — teclado completo alcança tudo ----
 * :focus-visible (não :focus) para não acender o glow em clique de mouse,
 * só em navegação por teclado — é o que o padrão pede e o que os testes
 * de "foco visível" desta fase verificam existir em cada componente. */
:focus {
    outline: none;
}
:focus-visible {
    outline: 2px solid var(--z-orange);
    outline-offset: 2px;
    border-radius: var(--z-radius-sm);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.z-skip-link {
    position: absolute;
    left: -9999px;
    top: var(--z-space-2);
    z-index: var(--z-index-toast);
    background: var(--z-orange);
    color: var(--z-text-on-orange);
    padding: var(--z-space-2) var(--z-space-4);
    border-radius: var(--z-radius-sm);
    font-weight: 600;
}
.z-skip-link:focus-visible {
    left: var(--z-space-2);
}

/* ==========================================================================
   Reduced motion — desliga o movimento inteiro do site sem apagar
   informação nenhuma: o padrão universal (duração ~0, 1 iteração) garante
   que todo elemento chega direto ao estado final, só sem a transição.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    :root {
        --z-motion-scale: 0;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   Estado: vazio — nunca em branco. Uma frase do que fazer e um botão que
   faz. Usado dentro de listas, painéis e áreas de conteúdo.
   ========================================================================== */
.z-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--z-space-3);
    padding: var(--z-space-8) var(--z-space-4);
    color: var(--z-text-secondary);
}
.z-empty-state__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    border-radius: var(--z-radius-full);
    background: var(--z-bg-elevated-2);
    color: var(--z-orange);
}
.z-empty-state__message {
    font-size: var(--z-text-base);
    max-width: 28rem;
}

/* ==========================================================================
   Estado: erro — em pt-BR, específico, com o próximo passo. Nunca
   "algo deu errado" sozinho.
   ========================================================================== */
.z-error {
    display: flex;
    align-items: flex-start;
    gap: var(--z-space-2);
    padding: var(--z-space-3) var(--z-space-4);
    background: var(--z-danger-bg);
    border: 1px solid color-mix(in srgb, var(--z-danger) 35%, transparent);
    border-radius: var(--z-radius);
    color: var(--z-text);
}
.z-error__icon {
    color: var(--z-danger);
    flex-shrink: 0;
}
.z-error__message {
    font-weight: 600;
}
.z-error__next-step {
    display: block;
    margin-top: var(--z-space-1);
    font-weight: 400;
    color: var(--z-text-secondary);
}

/* ==========================================================================
   Estado: sem permissão — explica o que falta e a quem pedir, nunca só
   "acesso negado".
   ========================================================================== */
.z-no-access {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--z-space-2);
    padding: var(--z-space-8) var(--z-space-4);
    color: var(--z-text-secondary);
}
.z-no-access__title {
    color: var(--z-text);
    font-weight: 600;
}

/* Utilitário de "narração/animação em primeiro plano" — só um elemento por
 * vez recebe .z-is-active-motion; o resto fica quieto (ver vocabulário de
 * animação no plano). Componentes leem esta classe em vez de animar sempre. */
.z-motion-quiet * {
    animation-play-state: paused;
}
.z-motion-quiet .z-is-active-motion,
.z-motion-quiet .z-is-active-motion * {
    animation-play-state: running;
}