/* Camada mobile isolada (docs/PRD.md §19, "responsividade mobile real").
   Carregada SÓ por <link media="(max-width:720px)"> em base.html: o navegador
   nunca aplica estas regras no desktop. Não editar regras de desktop para o
   celular; acrescentar aqui. Desenhado a partir de 360px.
   Onda 1: telas de entrada (.auth-page) e privacidade (.privacy-page). */

/* Coluna única que não cresce além da tela (1fr crescia até 432px num iPhone de 375). */
.auth-page{grid-template-columns:minmax(0,1fr);min-height:calc(100dvh - 64px)}

/* -4px em 42px colava as palavras ("Aprendaavoar"). */
.auth-copy h1{letter-spacing:-1px}

/* 01/02/03 dividem a largura em vez de rolar para o lado (o 03 sumia). */
.flight-path{overflow-x:visible}
.flight-path>div{flex:1 1 0;min-width:0;padding:12px 10px}
.flight-path>i{flex:0 0 10px;width:10px}
.flight-path>div b{overflow-wrap:anywhere}

/* Cartão: o boarding pass encosta nas bordas pelo mesmo valor do padding. */
.auth-card{--card-pad:22px;padding:var(--card-pad)}
.auth-card>.boarding-pass{margin:calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 24px}

/* Alvos de toque ≥ 44px (min-height não vale para link inline). */
.auth-card a.forgot-password,.auth-card a.text-link{display:inline-flex;align-items:center;min-height:44px}
/* Botão secundário logo após o formulário: espaço para não tocar no errado. */
.auth-card form+a.secondary{margin-top:12px}
/* Select nativo do Safari ignora altura/padding: desenha a caixa igual aos inputs. */
.auth-card select{-webkit-appearance:none;appearance:none;min-height:44px;padding-right:36px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2317231f' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center/12px 8px}
body:has(.auth-page,.privacy-page) .gfs-legal a{display:inline-flex;align-items:center;min-height:44px}
body:has(.auth-page) .topbar .link-button{min-width:44px}

/* ── Onda 2: topo compartilhado (todas as telas logadas), Atlas e briefing ── */

/* Topo: logo numa linha só; Sair com alvo de toque ≥ 44px em qualquer tela. */
.topbar .brand{white-space:nowrap;font-size:16px;flex:0 0 auto}
.topbar nav{gap:8px;font-size:12px}
.topbar .link-button{min-width:44px}
body:has(.game-atlas) .gfs-legal a{display:inline-flex;align-items:center;min-height:44px}

/* Briefing: mapa mais alto para a etiqueta HEAD não cair sobre a legenda. */
.preflight-map{min-height:430px}

/* Atlas: rótulos que no mapa estreito saíam pela borda (medido nas 40 rotas;
   só estas 2 cortavam). GIG vai para cima do ponto; SYD para a esquerda. */
.geo-atlas--narrow[aria-label*="GRU → GIG"] .geo-node.available>text{text-anchor:middle;transform:translate(-26px,-36px)}
.geo-atlas--narrow[aria-label*="SYD → DXB"] .geo-node.current>text:last-of-type{text-anchor:end;transform:translate(-60px,0)}

/* ── Onda 3: missão em abas (Briefing · Git Status · Editor · Histórico · Terminal) ── */

/* Simulador (trilha, tour, abas, painel) antes do briefing: as abas ficam no alto. */
.flight-workspace{display:flex;flex-direction:column}
.flight-workspace>.lab{order:-1;height:auto;overflow:visible}

/* Painel ativo com altura útil; sem painel ativo (aba Briefing), a área vazia some. */
.flight-workspace .panels{height:auto}
.flight-workspace .panels>section.mobile-active{height:68dvh;min-height:360px}
.flight-workspace .panels:not(:has(>section.mobile-active)){display:none}

/* As 5 abas cabem na largura (quebram em 2 linhas se o idioma pedir). */
.flight-workspace .mobile-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(62px,1fr));height:auto;overflow:visible}
.flight-workspace .mobile-tabs button{min-width:0;padding:6px 4px;white-space:normal}

/* Alvos de toque ≥ 44px. */
.flight-brief a.back,.flight-brief summary{display:flex;align-items:center;min-height:44px}
body:has(.flight-workspace) .gfs-legal a{display:inline-flex;align-items:center;min-height:44px}
/* Campo do terminal: ≥16px (senão o iPhone dá zoom ao tocar) e altura para o botão de 44px. */
#commandForm{height:auto;min-height:52px}
#commandForm input{font-size:16px}
/* Durante o tour do cockpit: painel mais baixo para o cartão do tour e o instrumento caberem juntos na tela. */
.flight-workspace .lab:has(.cockpit-lesson:not([hidden])) .panels>section.mobile-active{height:38dvh;min-height:200px}
/* Aba ativa com destaque próprio (antes só a moldura do painel indicava qual estava aberta). */
.flight-workspace .mobile-tabs button[aria-selected="true"]{background:#0d4852;border-color:#0d4852;color:#fff}
/* Botão "Executar comando" numa linha só (quebrava em 2 e passava da borda do painel). */
#commandForm input{min-width:0}
#commandForm button{flex:0 0 auto;white-space:nowrap;font-size:12px}
/* Terminal em coluna: o histórico ocupa o que sobra e o campo de comando cabe sempre no painel. */
.flight-workspace .panels>section.terminal-panel.mobile-active{display:flex;flex-direction:column}
.flight-workspace .terminal-panel #terminal{flex:1 1 auto;min-height:0;height:auto}
.flight-workspace .terminal-panel #commandForm{flex:0 0 auto}

/* Topo no celular: com o botão "Seja Premium" saem a etiqueta GRÁTIS (quem vê o botão é do plano grátis) e o
   "Fale conosco" (continua no rodapé de toda página); sem isso o "Sair" é cortado em 360/375px. 44px de toque. */
body:has(.topbar .premium-cta) .topbar .plan-tag.free,body:has(.topbar .premium-cta) .topbar .contact-link{display:none}
.topbar .premium-cta{min-height:44px;padding:0 10px;font-size:11px}
.terminal-panel .terminal-readonly button{min-height:44px}
/* R-T2 (parecer especialista-responsividade, 2026-10-07): com o tour aberto o painel ativo cai para 38dvh;
   o Git Status (319px) era cortado por overflow:hidden (app.css). Rola em vez de cortar. */
.flight-workspace .lab:has(.cockpit-lesson:not([hidden])) .panels > section.mobile-active{overflow-y:auto}
/* Achado ao medir o R-T1 (2026-10-07), anterior à v30: no celular o cartão do tour tinha max-height:220px com rolagem
   interna (flight-system.css) e o botão "Entendi, próximo" ficava abaixo da borda (critério 9). O cartão cresce. */
.flight-workspace .cockpit-lesson{max-height:none;overflow:visible}

/* Seletor de idioma na barra do topo (2026-10-07). No celular não cabe tudo
   numa linha (medido a 360px: marca 142 + plano + "Fale conosco" 95 + três
   chips 136 + "Sair" 40), e deixar o flex quebrar sozinho espalhava os itens
   -- foi o que o usuário viu no iPhone. Decisão dele (2026-10-07): o selo
   PREMIUM CONTINUA no topo; o "Fale conosco" sai do topo só no celular,
   porque o rodapé legal já o traz em todas as páginas. A quebra é explícita
   (`.nav-break`, item de 100% de largura e altura 0) e cada linha tem papel:
     linha 1 -> marca + quem você é (nome, PREMIUM ou "Seja Premium")
     linha 2 -> idioma + Sair
   A barra cresce só no celular; no desktop o `.nav-break` não existe. */
.topbar .contact-link{display:none}
.topbar{height:auto;min-height:72px;padding-top:10px;padding-bottom:10px}
.topbar nav{flex-wrap:wrap;justify-content:flex-end;align-items:center;row-gap:10px}
/* `display:block` é obrigatório aqui: a folha do desktop esconde este
   elemento (`display:none`), e sem devolvê-lo a quebra não acontece. */
.topbar .nav-break{display:block;flex:0 0 100%;height:0;margin:0}
.topbar .lang-picker{padding:2px;gap:0}
/* 44x44 é o alvo de toque (critério 9 do agente de responsividade); o
   min-width existe porque sem ele o chip ficava com 43px de largura. */
.topbar .lang-picker button{min-height:44px;min-width:44px;padding:0 10px;gap:0;justify-content:center}
/* Só a bandeira no celular: cada 22px conta nesta linha. O `title` do botão
   segue com o nome do idioma por extenso. */
.topbar .lang-picker button{font-size:0}
.topbar .lang-picker button span{font-size:17px}
/* Login e cadastro enxutos (2026-10-14): no celular o cartão vem primeiro; da coluna esquerda só a trilha
   01/02/03, abaixo do formulário. Links do cartão com alvo de 44 px. */
.flight-login.auth-slim{display:flex;flex-direction:column;align-items:stretch;gap:18px;padding:16px 16px 28px}
.flight-login.auth-slim .auth-card{order:1;--card-pad:20px;padding:24px 20px;margin-bottom:0}
.flight-login.auth-slim .auth-copy{order:2;padding-top:0}
.auth-slim .auth-copy .eyebrow,.auth-slim .auth-copy h1,.auth-slim .auth-copy>p{display:none}
.auth-slim .auth-card h2{font-size:25px}
.auth-slim .auth-card .forgot-password,.auth-slim .auth-switch a{display:inline-flex;align-items:center;min-height:44px}
.auth-slim .auth-switch{margin-top:10px}