/* COMPRESSOR DE ALTURA — ÚLTIMO da cascata, de propósito.

   Este é o único bloco deliberadamente transversal do projeto: toca .app,
   home, formulário, PIN gate e painel ao mesmo tempo. No CSS de arquivo
   único ele era o ÚLTIMO bloco da folha, e era daí que vinha o seu poder —
   ganhava todo empate de especificidade contra a regra-base de cada
   seletor.

   Ele viveu por engano em css/02-base.css, o link nº 3 de 15. Resultado
   medido: 23 das suas 29 regras perdiam para a regra-base declarada depois,
   em views/form.css, components/input.css, components/modal.css,
   views/home.css e views/panel.css. Em 1440x879 — um MacBook 1440x900 com a
   barra do navegador — .back-link ia de 14px para 28px de margin-bottom e o
   formulário voltava a estourar verticalmente, exatamente o que o
   compressor existe para evitar.

   "Transversal" em cascata significa ÚLTIMO, não "base". Por isso este
   arquivo é o 15º e é o último <link> de index.html.

   Travado por tests/css-split.test.js ("nenhuma regra de @media é anulada
   por uma regra-base posterior").
   ========================================================================= */
/* =========================================================================
   COMPRESSOR DE ALTURA — telas baixas (laptops padrão: 1366×768, 1440×900,
   1280×800, 1512×900...). Ativa só em desktop COM pouca altura; NÃO ativa em
   1920×1080+ (onde já cabe com folga). Garante que home e formulário caibam
   sem scroll vertical desnecessário. Resultado/cinema já cabem sozinhos.
   ========================================================================= */
@media (min-width: 768px) and (max-height: 880px) {
  .app { padding-top: 1.25rem; padding-bottom: 1.5rem; }

  /* Marca: no laptop baixo ela é assinatura, não cabeçalho */
  .brand-bar { padding-bottom: 0.75rem; }

  /* HOME */
  .hero { padding-top: 0.5rem; padding-bottom: 0.75rem; }
  .hero h1 { font-size: clamp(2rem, 2.6vw, 2.6rem); margin-bottom: 0.75rem; }
  .hero p { font-size: 1rem; }
  /* o desvio é o que mais come altura: encolhe o svg antes de encolher texto */
  .desvio { margin-top: 1rem; }
  .desvio .desvio-svg { max-width: 460px; }
  .start { margin-top: 1.25rem; }

  /* FORMULÁRIO */
  .form-wrap { padding-top: 0; }
  .back-link { margin-bottom: 0.875rem; }
  .progress-track { margin-bottom: 0.875rem; }
  .step-meta { margin-bottom: 0.5rem; }
  .question-title { font-size: clamp(1.5rem, 2vw, 1.85rem); line-height: 1.15; margin-bottom: 0.5rem; }
  .question-hint { margin-bottom: 0.875rem; }
  .input-wrapper { padding: 0 14px; }
  .form-input { font-size: 15px; padding: 8px 0; }
  .field .form-input { min-height: 34px; }
  .actions { padding-top: 0.875rem; }
  /* A pilha de identificação são quatro campos numa tela só: o que em uma
     tela de campo único é respiro, aqui multiplica por quatro e estoura a
     altura do laptop. */
  .field-grid.stacked .field { margin-bottom: 0.75rem; }
  .field-grid.stacked .field-label { margin-bottom: 0; }
  .field-grid.stacked .field-hint { margin-bottom: 0.25rem; }
  /* Quatro slots de erro vazios custam ~72px — é a diferença entre a tela
     caber e não caber no laptop. O motivo de reservar a altura (não empurrar
     o Continuar para debaixo do dedo) é de toque; aqui é mouse e teclado. */
  .field-grid.stacked .field-error { min-height: 0; margin-bottom: 0; }
  .field-grid.stacked .field-error[hidden] { display: none; }

  /* A tela de CUSTOS é a mais alta do funil: 7 campos. Em 3 colunas
     (≥1100px, ver form.css) são 3 linhas, e cada linha aqui paga o mesmo
     imposto vertical da pilha de identificação — mesma cura, pelo mesmo
     motivo: sem isso ela é a única tela do funil que rola no laptop. */
  .field-grid.grouped .field { margin-bottom: 0.5rem; }
  .field-grid.grouped .field-label { margin-bottom: 0; font-size: 0.9375rem; }
  .field-grid.grouped .field-hint { margin-bottom: 0.25rem; }
  .field-grid.grouped .field-error { min-height: 0; margin-bottom: 0; }
  .field-grid.grouped .field-error[hidden] { display: none; }
  .field-subtotal { padding: 0.5rem 0.875rem; margin-bottom: 0.625rem; }
  .field-subtotal .val { font-size: 1.125rem; }

  /* PIN gate */
  .pin-lock { width: 56px; height: 56px; font-size: 26px; margin-bottom: 1rem; }
  .pin-subtitle { margin-bottom: 1.25rem; }
  .pin-input { font-size: 2rem; padding: 14px; }
  .pin-actions { margin-top: 1.1rem; }

  /* PAINEL — dashboard ainda pode rolar, mas reduz o exagero vertical */
  .panel-header { margin-bottom: 1rem; }
  .master-control { padding: 0.875rem 1rem; margin-bottom: 1rem; }
  .section-title { margin-top: 1rem; margin-bottom: 0.625rem; }
  .hero-stat { padding: 1rem 1.25rem; }
  .hero-stat .value { font-size: clamp(1.75rem, 3vw, 2.5rem); }
  .panel-stats { margin-bottom: 0.5rem; }
  .panel-actions { margin-top: 1.25rem; }
}