/* ============================================================
   Hub Vagas — camada do app.

   A transcrição das 21 telas copia os estilos do design INLINE, literalmente,
   como estão em `docs/design/2026-08-03/*.dc.html`. Esta folha carrega só o
   que atributo `style` NÃO sabe expressar:

     (1) as regras de raiz do mock (o <div data-brand="ac"> que embrulha tudo);
     (2) os `style-hover=` e `style-focus=` da fonte — pseudo-classes não
         existem em atributo inline, então viram classe `.hv-*` / `.fc`;
     (3) a variação MOBILE, que no mock vem da largura do container (`frameMax`
         390px) e no app real só pode vir de `@media` — as mudanças são as que
         o próprio design descreve nas notas de comportamento.

   NADA aqui inventa valor: cada declaração é cópia de um atributo da fonte.
   Régua: `docs/design/CHECKLIST.md`. Ordem das folhas:
   `fontes.css` → `base.css` → `tokens.css` → `app.css`.
   ============================================================ */

/* ---------------------------------------------------------------- (1) raiz
   Do root do mock:
     <div data-brand="ac" style="min-height:100vh;background:var(--bg);
       color:var(--text);font-family:var(--font-body);font-size:0.9375rem;
       line-height:1.55;display:flex;flex-direction:column">
   `margin`, `font-weight:300` e `letter-spacing` vêm do `base.css` (DS). */
body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
}

/* O conteúdo empurra o rodapé para o fim da página. No mock o frame é um card
   dentro do visualizador e não precisa disso; no app real, sem esta regra, a
   faixa de --bg apareceria ABAIXO do rodapé nas telas curtas. */
body > main { flex: 1 0 auto; }

/* Num flex column, o item NÃO encolhe no eixo cruzado: sem esta trava ele
   cresce até a largura do conteúdo e é a PÁGINA que passa a rolar na
   horizontal — foi o que acontecia com o kanban da a4 (6 colunas de 262px) e
   com a navbar interna a 390px, cada um com o seu próprio `overflow:auto`
   que nunca chegava a valer. Nenhum valor do design muda: só se devolve ao
   `overflow-x` interno o trabalho que ele já deveria estar fazendo. */
body > * { min-width: 0; max-width: 100%; }

/* Mesma trava, um nível abaixo: `<input>`, `<select>` e `<textarea>` carregam
   uma largura INTRÍNSECA (o `size` default do HTML, ~20 caracteres). Como o
   design os declara com `width:100%` mas sem `min-width`, num flex item o
   `min-width:auto` valia essa largura intrínseca — e o card de "Dados da vaga"
   da a3 não conseguia encolher abaixo de 290px, fazendo a página rolar na
   horizontal em telas de 320px (o piso da WCAG 1.4.10). Nenhum valor do design
   muda: `min-width` não é declarado em lugar nenhum da fonte. */
input, select, textarea { min-width: 0; }

/* p6 e q3 são um "palco" de autenticação: um bloco --auth-bg que, no mock,
   ocupa o frame inteiro. Na janela real ele é mais baixo que a tela e sobraria
   uma faixa de --bg entre o palco e o rodapé. Nenhum valor do design muda —
   só o bloco passa a ocupar a altura livre, como no mock. */
main.palco-auth { display: flex; flex-direction: column; }
main.palco-auth > * { flex: 1; }

/* O design desenha modais e blocos alternáveis com `display:flex` INLINE. Como
   estilo inline vence a folha do navegador, o `hidden` do HTML não escondia
   nada — os modais nasciam abertos. Esta é a única regra da folha que precisa
   de `!important`, e ela não muda valor nenhum do design: só devolve ao
   `hidden` o poder de esconder. */
[hidden] { display: none !important; }

/* Utilitário de acessibilidade (rótulo só para leitor de tela). Não tem
   correspondente visual no design — nada dele é pintado. */
.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;
}

/* -------------------------------------------------------- (2) hover e foco
   Um seletor por declaração distinta encontrada na fonte. O comentário de
   cada bloco traz a contagem de ocorrências no design. */

/* 24× — botões e links de contorno */
.hv-contorno:hover { border-color: var(--accent-line); color: var(--accent-text); }
/* 1× — idem, quando o elemento é <a> (o design zera o sublinhado de link) */
.hv-contorno-link:hover {
  border-color: var(--accent-line); color: var(--accent-text); text-decoration: none;
}
/* 16× — botão primário */
.hv-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
/* 3× — botão de destaque (ouro) */
.hv-accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
/* 1× — destaque só com fundo (o banner de vaga encerrada) */
.hv-accent-bg:hover { background: var(--accent-hover); }
/* 1× — champanhe fixo da faixa "Não achou a vaga certa?" (sobre --ink) */
.hv-champanhe:hover { background: #d6c2a4; border-color: #d6c2a4; }
/* 2× — botão destrutivo */
.hv-danger:hover { background: var(--danger-fg); border-color: var(--danger-fg); }
/* 2× — item de menu destrutivo */
.hv-danger-bg:hover { background: var(--danger-bg); }
/* 9× — item de menu / linha clicável */
.hv-superficie-3:hover { background: var(--surface-3); }
/* 1× — idem, quando o elemento é <a> */
.hv-superficie-3-link:hover { background: var(--surface-3); text-decoration: none; }
/* 3× — realce suave */
.hv-superficie-2:hover { background: var(--surface-2); }
/* 1× — botão "Remover" dentro da caixa de currículo anexado */
.hv-ok-suave:hover { background: color-mix(in srgb, var(--ok-line) 16%, transparent); }
/* 7× — campo de arraste e opções de resposta */
.hv-borda:hover { border-color: var(--accent-line); }
/* 3× — card que sobe a sombra */
.hv-sombra-sm:hover { box-shadow: var(--shadow-sm); }
/* 1× — card da lista de vagas */
.hv-card:hover {
  box-shadow: var(--shadow-md); border-color: var(--border-strong); text-decoration: none;
}
/* 1× — o título ganha o sublinhado ouro quando o CARD é apontado (nota do
   design: "Hover no card: sombra sobe … e o título ganha sublinhado ouro") */
.hv-card:hover .hv-sublinha { border-bottom-color: var(--accent-line); }
/* 9× — link da navbar interna */
.hv-navlink:hover { color: var(--navbar-fg); text-decoration: none; }
/* 3× — idem, com a cor literal do design */
.hv-navfg:hover { color: #eceaf2; text-decoration: none; }

/* 32× — anel de foco dos campos (inputs, selects e textareas do design) */
.fc:focus {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-line) 22%, transparent);
  outline: none;
}

/* ------------------------------------------------------------- (3) mobile
   O design não usa `@media` — a variação vem da largura do container do mock
   (`frameMax: st.view === "mobile" ? "390px" : "100%"`). No app a largura é a
   da janela, então as mesmas mudanças precisam de um ponto de corte. Ele fica
   em 640px: acima disso os `flex-wrap`/`flex-basis` do próprio design já
   empilham sozinhos; abaixo ficam as mudanças que as notas de comportamento
   descrevem explicitamente para o mobile. */
/* blocos que o design desenha só numa das larguras (`isDesktop`/`isMobile`) */
.so-mobile { display: none; }

@media (max-width: 640px) {
  /* p1 · a topbar colapsa o rótulo em botão compacto com ícone.
     `!important` porque o que se esconde às vezes carrega um `display` INLINE
     do design (o bloco da marca é `display:flex`), e inline vence classe. */
  .m-esconde { display: none !important; }
  .so-mobile { display: block; }
  /* a2 · "+ Nova vaga" sai do cabeçalho e vira botão fixo no rodapé */
  .m-rodape-fixo {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--border);
  }
  .m-rodape-fixo > * { width: 100%; }
  /* espaço para o botão fixo não cobrir o fim da lista */
  .m-rodape-folga { padding-bottom: 84px; }
  /* a4 · o kanban vira accordion agrupado por etapa */
  .m-empilha { display: block !important; }
  .m-empilha > * + * { margin-top: 12px; }
  /* a5/a8 · a coluna direita desce; a6/a7 · a tabela rola na horizontal */
  /* `align-items:flex-start` e `flex-wrap:wrap` são do design e fazem sentido
     em `row` (alinhar as colunas pelo topo, quebrar quando não cabem). Viradas
     para `column`, as duas mudam de significado no eixo cruzado: `flex-start`
     passa a valer "largura do conteúdo" (max-content) e o `wrap` permite abrir
     uma segunda COLUNA. Era o que fazia a a3 medir 366px num viewport de 320 —
     a única das 19 telas que não refluía no piso da WCAG 1.4.10. Empilhado não
     há topo a alinhar nem para onde quebrar. */
  .m-coluna-unica {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
  }
  /* Virando a direção do flex, o `flex-basis` das colunas (420px na p2, 460px
     na a3, …) passa a valer como ALTURA — o card da descrição ficava com 420px
     de caixa para 82px de texto, 338px de vazio no celular. As colunas voltam a
     ter a altura do próprio conteúdo. */
  .m-coluna-unica > * { flex-basis: auto !important; }
  .m-nao-sticky { position: static !important; top: auto !important; }
  .m-rola-x { overflow-x: auto; }
}