/* CAMADA MOBILE ANTIGA — restou UM consumidor: sistema/board/index.html.

   As cinco páginas de fluxo (/apresentacao, /hub, /sistema, /premiss, /brand) saíram daqui em
   2026-08-29 e passaram a ter versão de celular própria, em css/m/* e js/m/*. A abordagem
   deste arquivo era o desktop encolhido e corrigido por @media; ela ficou legível sem ficar
   boa, e foi substituída por spec próprio:
   docs/superpowers/specs/2026-08-28-mobile-v2-design.md.

   O arquivo NÃO é apagado porque o painel o carrega, e ele é a única coisa que torna o painel
   usável no celular. Podar daqui o que o painel não usa está fora de escopo por decisão do
   spec (seção 2.1): seria mexer na única camada mobile do painel em troca de nada visível, e o
   painel não tem linha de base congelada — tools/board_shots.js roda em desktop.

   Os três arquivos por página que acompanhavam este (brand, premiss, sistema) ficaram órfãos de
   verdade e foram apagados. Sobrou css/mobile/board.css, pelo mesmo motivo deste.

   REGRA DURA (ainda vale, para o painel): toda regra deste arquivo vive dentro de um @media, e
   nenhuma regra de desktop é editada em lugar nenhum do projeto. É assim que o desktop não pode
   regredir — por construção, não por cuidado.

   Duas bandas:
     ≤1100px  a tipografia deixa de sair de --u e passa a ter tamanho real; as medidas ganham
              piso. A estrutura de colunas permanece.
     ≤700px   a página reflui para coluna única e os alvos de toque crescem.

   Acima de 1100px este arquivo não produz uma única regra. O viewport de referência do projeto
   é 1224x701, então nenhuma captura de desktop entra nas bandas acima. */

/* ================================================================= banda intermediária */
@media (max-width: 1100px){
  :root{
    /* --u continua existindo porque o projeto inteiro mede em calc(N * var(--u)); ele só
       ganha piso para não colapsar. O painel já usava essa técnica (css/board/board.css:18). */
    --u: max(0.72px, calc(100vw / 1224));
    --vhu: var(--u);
    --gutter: clamp(20px, 4vw, 40px);

    /* escala tipográfica em unidade real, fluida: sem degrau entre o celular e o limite da
       banda, e sem depender de --u. */
    --t-corpo:   clamp(15px, 1.4vw + 10px, 17px);
    --t-corpo-p: clamp(13px, 1.0vw +  9px, 15px);
    --t-mono:    clamp(11px, 0.6vw +  9px, 12px);
    --t-h3:      clamp(20px, 2.0vw + 13px, 26px);
    --t-h2:      clamp(30px, 4.0vw + 14px, 46px);
    --t-h1:      clamp(38px, 6.0vw + 14px, 64px);
  }

  body{ font-size:var(--t-corpo); line-height:1.45; }
  /* Conferência com a seção 4 do spec, que fixa os alvos em px: a 390px de largura esta escala
     entrega 15,5 / 13 / 11,3 / 20,8 / 30 / 38px. Bate todos os mínimos, e a forma fluida evita
     o degrau que uma tabela de valores fixos criaria no limite da banda. */

  /* primitivos compartilhados por /apresentacao e /sistema (css/sistema/shell.css) */
  .sis-head__label{ font-size:var(--t-mono); }
  .sis-head__h2{ font-size:var(--t-h2); line-height:1.06; }
  .sis-head__lead{ font-size:var(--t-corpo); line-height:1.45; max-width:none; }
  .sis-p, .sis-remate{ font-size:var(--t-corpo); line-height:1.45; }
  .sis-note{ font-size:var(--t-corpo-p); }
  .sis-row__n{ font-size:var(--t-mono); }
  .sis-row__name{ font-size:var(--t-h3); line-height:1.15; }
  /* --t-corpo, não --t-corpo-p: a revisão final mostrou que `.sis-row__text` é PROSA (os
     dezesseis blocos da /apresentacao passam de 60 caracteres cada), e --t-corpo-p cai a 13px
     no celular — abaixo do piso de leitura. --t-corpo-p continua servindo `.sis-note`, que é
     nota curta e nunca foi o caso desta linha. A ferramenta só não reclamava porque media o
     `li.sis-row` em volta, não o `span` que carrega o texto. */
  .sis-row__text{ font-size:var(--t-corpo); line-height:1.45; width:auto; }

  .mono-label{ font-size:var(--t-mono); }

  /* ---------------------------------------------------------------- header legível
     A revisão final mediu o header inteiro ilegível nas SEIS páginas — é o mesmo componente
     em todas, e é o primeiro elemento de qualquer página: "MENU" a 4,16px, "FALAR COM O REGIS"
     a 4,16px, "ENERGIA" a 3,19px (390px de largura). A regra `.mono-label` acima, de
     especificidade (0,1,0), simplesmente PERDE para `.site-header .menu-btn` (0,2,0) em
     css/header.css:64, e o `.pill` de css/base.css:54 nunca foi tocado — a banda dava 44px de
     altura ao botão sem mexer no corpo da letra, um alvo de 44px com 4,2px de texto dentro.
     Nada de !important: os seletores abaixo sobem de especificidade dentro da banda, e
     css/mobile.css é a última folha de todas as páginas (conferido nos seis <head>). */
  .site-header .menu-btn{
    font-size:var(--t-mono);
    /* `left:calc(322 * var(--u))` (css/header.css:66) é uma coordenada da grade de 1224px:
       167px numa tela de 390px, com o rótulo agora em tamanho real, colidiria com a pílula à
       direita. Voltando ao fluxo, o `justify-content:space-between` que o próprio header já
       declara distribui logo · MENU · pílula sem coordenada mágica nenhuma. */
    position:static; transform:none;
  }
  /* os pontinhos do MENU medem 2,2u — 1,1px no celular, ao lado de um rótulo de 11px */
  .site-header .menu-dots{ gap:2px; }
  .site-header .menu-dots i{ width:3px; height:3px; }

  /* a pílula tinha largura E altura fixas em --u (112u × 32u = 58×17px): com o texto em
     tamanho real ela não comporta "FALAR COM O REGIS" e o corta. Largura pelo conteúdo. */
  .site-header .header-pill{
    width:auto; height:auto; min-height:44px;
    padding:0 clamp(10px, 1.6vw + 4px, 18px);
    font-size:var(--t-mono);
  }

  /* "ENERGIA" não tem font-size no CSS: js/header.js:66 faz o corpo da letra CRESCER até a
     largura casar com a do wordmark TBR ao lado (tracking fixo de .16em). Ou seja, o tamanho
     dele é consequência da largura de `.logo__word`, que é `calc(46 * var(--u))` — 23,9px no
     celular. Não há font-size a corrigir aqui: o que precisa de tamanho real é o LOGO.
     Proporção preservada (46 : 15,6 do desktop) via aspect-ratio, e o raio mantém a razão
     14/46 que css/header.css declara. */
  .site-header .logo__word{
    width:clamp(64px, 8vw + 33px, 88px); height:auto; aspect-ratio:46 / 15.6;
  }
  .site-header .logo__bolt{ width:clamp(20px, 2.4vw + 10px, 27px); }

  /* Alvo de toque, nas DUAS dimensões — o spec §7.2 pede "nenhum alvo de toque abaixo de 40px
     em altura ou largura", e a `min-width` faltava: a ferramenta também só media altura, então
     alvos altos e finos (o LinkedIn do rodapé a 16×40, os atalhos de card do /hub a 27px de
     largura) passavam nos dois lados. Corrigidos os dois juntos na onda final.
     (§3.4 do spec diz 44px e §7.2 diz 40px. A contradição fica resolvida em 40, que é o que a
     ferramenta mede e o que o README registra.)

     Link dentro de parágrafo/li/span fica de fora, porque esticá-lo para 40px quebraria a linha
     do texto.

     CORREÇÃO M1 (revisão final): o comentário anterior afirmava que este seletor usava
     "exatamente o mesmo critério que a ferramenta". Não usa, e a diferença importa: aqui a
     exclusão é por ANCESTRAL (`:where(p a, li a, span a)`), na ferramenta é pelo `display`
     COMPUTADO (`display === 'inline'`). Os dois concordam na prática porque um `a` dentro de
     p/li/span costuma computar `display:inline` — mas é coincidência do conteúdo deste site,
     não a mesma regra escrita duas vezes; e ela já falhou uma vez, quando `.ft__legal .links`
     era flex e "blockificava" um link que este `:where` isentava (ver a correção do .ft__legal
     mais abaixo). Onde divergirem, quem manda é a ferramenta: ela é que mede.

     Vive na banda de 1100 (não só na de 700) porque a estrutura de colunas do tablet permanece
     igual ao desktop, mas os controles herdados de --u encolhem do mesmo jeito — o alvo de
     toque não pode esperar a banda do celular para crescer. */
  a:not(:where(p a, li a, span a)), button{ min-height:40px; min-width:40px; }
  a.pill, .pill{ min-height:44px; display:inline-flex; align-items:center; }

  /* CORREÇÃO 1 (revisão): o ticker e o header cresceram de fonte/alvo com esta banda, mas a
     altura das duas barras continuava vindo só de --u (calc(29*u) e calc(40*u) em
     css/header.css) — texto e alvo maiores dentro da caixa antiga vazavam pra fora dela e
     caíam sob a barra fixa vizinha. Medido com Playwright nos dois dispositivos: o texto do
     ticker (agora --t-mono) e o header ficavam com bounding boxes sobrepostos em ~30px de
     altura, cobrindo toda a faixa onde o logo/pill do header vivem. Duas mudanças, medidas
     de novo depois de cada uma (ver task-2-report.md, correção 1):

     1) o ticker deixa de forçar 40px de alvo de toque em CADA link (min-height:40px) e em vez
        disso vira uma faixa de rolagem própria onde o link continua display:inline de verdade
        — a mesma isenção que já existe pra link de parágrafo (span a), só que pra valer:
        um link inline dentro de <span> só fica isento na prática se o pai não for flex, porque
        um item de flex é "blockificado" mesmo com display:inline especificado. Por isso o pai
        (.ticker__right) sai do flex aqui. Isso devolve o ticker à altura de UMA linha de
        texto, em vez da altura de um alvo de toque de bloco. */
  .ticker__right{ display:block; white-space:nowrap; }
  .ticker__right span{ margin:0 calc(4 * var(--u)); }
  /* o aviso à esquerda (js/apres/shell.js: $('.ticker__left').textContent = D.meta.ticker) é
     texto de verdade, sem nowrap — e a fonte maior desta banda, combinada com a coluna
     estreita que sobra depois que o link da direita reivindica a própria largura mínima, fazia
     esse texto quebrar em uma dúzia de linhas (medido: 164px de altura só do aviso, arrastando
     a barra inteira junto). nowrap tira a quebra; a rolagem própria do `.ticker` (abaixo) cobre
     o que não couber na largura. */
  .ticker__left{ white-space:nowrap; }
  /* O aviso da esquerda é uma FRASE inteira ("T.ZION PARA A TBR: CÂMERA, CRACHÁ E SENSOR…"),
     não uma etiqueta de categoria: passa dos 60 caracteres e por isso é prosa pela régua da
     ferramenta, que a media a 11,34px. 14px em vez de --t-corpo (15,5px) de propósito — é o
     piso exato de leitura, e mantém o aviso dentro do min-height:32px da barra (linha de 14px
     + 5u de padding = ~20px), sem mexer no `margin-top` do header, que foi calibrado contra
     essa altura. Medido nos dois dispositivos depois da mudança: a barra não cresceu. */
  .ticker .ticker__left{ font-size:14px; }
  .ticker{
    height:auto; min-height:32px; align-items:center;
    /* A rolagem horizontal própria (overflow-x:auto) foi tentada e descartada: o aviso ficava
       cortado no meio da palavra, sem nenhum sinal de que havia mais texto, e lia como defeito
       em vez de barra rolante. Ninguém adivinha um arraste que não se anuncia. Agora o corte é
       deliberado — o aviso encolhe com reticências (abaixo) e os atalhos da direita ficam
       inteiros e visíveis, que é o que importa numa barra de navegação. */
    overflow:hidden;
    /* space-between, com os dois lados maiores que a tela agora, empurra ticker__right para
       fora da largura visível (medido: seu x começava depois de 390px em viewport de 390px —
       só apareceria arrastando). flex-start com gap fixo mantém os dois visíveis. */
    justify-content:flex-start; gap:calc(16 * var(--u));
  }
  /* Os DOIS lados cedem, e o aviso cede primeiro. min-width:0 é o que permite um item de flex
     encolher abaixo do próprio conteúdo — sem ele o text-overflow nunca dispara.
     Os atalhos precisavam ceder também: o /hub tem cinco deles, e com `flex:0 0 auto` eles se
     recusavam a encolher, empurravam a barra para 402px numa tela de 390 e espremiam o aviso
     até largura zero (medido). Com os dois encolhendo, nada transborda e os dois aparecem. */
  .ticker .ticker__left{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }
  .ticker .ticker__right{ flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }
  /* 2) as duas barras ganham altura real (auto + piso), em vez da altura fixa em --u que não
     acompanhou o conteúdo maior. O piso cobre o alvo de 44px do .pill.

     O "top" do header no repouso (y perto de 0) é escrito por JS (js/header.js: off =
     29*innerWidth/1224 - y) — fórmula que lê innerWidth direto, não --u, e por isso não sabe
     que o piso desta banda deixou o ticker mais alto. Não dá pra vencer um top escrito por JS
     via CSS sem !important (proibido aqui), então a folga extra entra por margin-top: para um
     elemento position:fixed com "top" definido e "bottom" automático, o margin-top soma ao
     top informado em vez de competir com ele (CSS2.1 §10.6.4) — não é gambiarra, é a única
     propriedade que o JS não escreve. Valor medido abaixo. */
  .site-header{ height:auto; min-height:44px; margin-top:20px; }

  /* /hub, lista "ordem de leitura": o título de cada item já é display:block no desktop
     (css/hub.css), só falta o piso de altura. */
  .hub-ordem__list li .t{ min-height:40px; }

  /* Prosa própria de /apresentacao e /hub que não passa pelos primitivos sis-* acima: mesmo
     piso de leitura, --t-corpo em vez de --t-corpo-p porque esses blocos têm 60+ caracteres
     (o critério da ferramenta) e --t-corpo-p fica abaixo de 14px no celular — ele é para nota
     curta, não para prosa. */
  .ap-hero__para, .ap-quadros__remate,
  .ap-peca__resolve, .ap-frente .d, .ap-frentes li,
  .ap-quadro .d, .ap-quadro .gera,
  /* acrescentados na onda de correção final, quando a checagem de prosa passou a medir a folha
     que carrega o texto em vez do contêiner: os dois viviam num <span>/<div> filho com
     font-size próprio em --u e o `li`/`section` em volta media 15,5px e aprovava. */
  .ap-semana__list .p,                                    /* 04 uma semana — 5,98px medidos */
  .ap-pergunta__contato,                                  /* 09 a pergunta — 11,34px medidos */
  .hub-hero__lead, .hub-card__resolve, .hub-card__desc, .hub-ordem__list li .d,
  .hub-here .d{
    font-size:var(--t-corpo); line-height:1.45;
  }
  /* `.ap-semana__list .p` tem max-width:calc(576*var(--u)) (css/apres/secoes.css:17), largura de
     grade de 1224px que não sabe da coluna estreita daqui */
  .ap-semana__list .p{ max-width:none; }
  /* a largura fixa em --u (500u) força a lead a ficar mais estreita que a própria coluna no
     tablet/celular; solta a largura para o texto usar o espaço que tem. */
  .hub-hero__lead{ width:auto; max-width:none; }

  /* caminho de arquivo em mono ("sistema/board/index.html") não tem espaço pra quebrar
     sozinho e estoura a coluna estreita do card. */
  .hub-card__rota, .hub-here .t small{ overflow-wrap:anywhere; }

  /* ---------------------------------------------------------------- rodapé (#footer)
     Compartilhado por três páginas — sistema.html, premiss.html e brand.html carregam
     css/sections/footer.css — por isso mora aqui e não numa folha de página só (originado na
     Task 4, movido pra cá na revisão dela: /sistema achou o problema primeiro, mas a causa não
     é da /sistema). /apresentacao e /hub não carregam css/sections/footer.css, então estes
     seletores simplesmente não casam nelas — inofensivo, confirmado rodando as ferramentas das
     duas depois do movimento.

     O rodapé inteiro é filhos em position:absolute com left/top calculados pra 1224px de
     referência (css/sections/footer.css) — a mesma técnica da home, que o spec já declara fora
     de escopo por não refluir sem reconstrução (docs/superpowers/specs/2026-08-27-mobile-
     design.md, seção 6). A home não carrega esta folha; as três páginas acima carregam, e sob o
     piso de --u desta banda os blocos absolutos passam a colidir de verdade (medido em
     /sistema: .ft__company sobre .ft__toggle, .ft__marquee e dois .ft__block; .ft__legal sob o
     .ft__wordmark) — mesma causa-raiz da grade que não encolhe (.anx__remate, ver
     css/mobile/sistema.css): coordenadas fixas que não se conhecem sob um --u com piso. Sem
     tocar em css/sections/footer.css, o rodapé volta a fluxo normal aqui: cada bloco em coluna
     única, na ordem do DOM.

     Aplicado nas duas bandas (não só ≤700) porque a colisão já existe no tablet — a inflação de
     ~15% que o piso de --u introduz em 768px já é suficiente pra estourar os offsets apertados
     do rodapé; um layout de duas colunas só pra tablet duplicaria a manutenção pra um ganho que
     a ferramenta não pede. */
  .ft__paytext{ font-size:var(--t-corpo); line-height:1.45; }
  #footer{ height:auto; padding:calc(56 * var(--vhu)) var(--gutter) calc(72 * var(--vhu)); }
  #footer .abs{
    position:static; left:auto; right:auto; top:auto; bottom:auto; width:auto;
    margin:0 0 calc(32 * var(--vhu));
  }
  #footer .abs:last-child{ margin-bottom:0; }
  /* fios decorativos calculados pra grade de desktop (left/width em --u); sem função e sem
     posição válida no fluxo de coluna única */
  .ft__div{ display:none; }
  .ft__links{ grid-template-columns:1fr 1fr; }
  .ft__map{ width:calc(160 * var(--u)); height:auto; }
  .ft__tunnel{ width:calc(120 * var(--u)); height:auto; }

  /* .ft__legal: o mesmo bug do ticker (correção 1 acima) — os links vivem dentro de um <span>,
     que normalmente os isentaria do alvo de toque de 40px (a:not(...span a), regra de alvo de
     toque acima), mas o PAI (.links) é display:flex, e um item de flex é "blockificado" mesmo
     com display:inline no próprio elemento. Resultado medido: 16/17px de altura em vez de
     inline de verdade, e o texto inteiro em white-space:nowrap transbordando (+611/+836px). Tira
     o pai do flex — os links voltam a ser inline de verdade, e o texto pode quebrar. */
  .ft__legal{
    flex-direction:column; align-items:flex-start; white-space:normal;
    gap:calc(10 * var(--vhu));
  }
  .ft__legal .left{ width:auto; white-space:normal; }

  /* ---------------------------------------------------------------- a primeira tela

     No desktop, dois heróis ocupam a tela inteira (min-height:100vh) e apoiam o conteúdo nas
     bordas: a /apresentacao alinha ao rodapé, a /sistema distribui entre topo e base. É a
     abertura em tela cheia da réplica, e lá funciona porque o texto é largo e preenche.

     Numa tela estreita o texto é estreito e a altura continua a mesma, e o mesmo alinhamento
     vira vazio. Medido: a /apresentacao abria com 387px de preto antes da primeira palavra em
     390x844 (quase metade da tela) e 336px em 768; a /sistema deixava 285px entre o fim do
     parágrafo e a cadeia do rodapé.

     Nenhuma checagem de tools/mobile_shots.js pega isto: vazio não transborda, não corta, não
     colide e não tem tamanho de fonte. Foi preciso abrir no aparelho e olhar.

     A saída é o que os outros três heróis já faziam — a /hub, a /premiss e a /brand fluem, e
     eram as únicas que abriam bem. Sem altura mínima, conteúdo logo abaixo do cabeçalho.
     Vale na banda inteira, e não só no celular, porque a 768 o vazio era do mesmo tamanho. */
  #ap-hero, #sis-hero{ min-height:0; justify-content:flex-start; }
  #ap-hero{ padding-top:104px; }
  /* o herói da /brand tem a mesma altura de tela cheia, e ela passou despercebida no celular
     porque ali o conteúdo já era mais alto que a tela. No tablet aparece: 358px de sobra entre
     o fim do conteúdo e o pé da seção. É grade, não flex, então basta soltar a altura. */
  #br-hero{ min-height:0; }
  /* a cadeia CÂMERA-CRACHÁ-SENSOR-IA-RELATÓRIO era empurrada para o pé da tela pelo
     space-between; agora ela segue o parágrafo, com respiro próprio. */
  #sis-hero .sis-hero__chain{ margin-top:calc(44 * var(--vhu)); }
  .ft__legal .links{ display:inline; white-space:normal; }
  .ft__legal .links a{ display:inline; margin-right:calc(14 * var(--u)); }
  .ft__legal .right{ margin-left:0; display:block; }
}

/* ================================================================= celular */
@media (max-width: 700px){
  :root{
    --u: max(0.52px, calc(100vw / 1224));
    --gutter: 20px;
  }

  /* coluna única: a grade de quatro colunas de 280u não comporta conteúdo abaixo de 700px */
  .sis-sec{ padding-left:var(--gutter); padding-right:var(--gutter); }
  .sis-row{
    grid-template-columns:1fr;
    row-gap:calc(8px);
    padding-top:22px; padding-bottom:24px;
  }
  .sis-row__n, .sis-row__name, .sis-row__text{ grid-column:1; }

  /* o alvo de toque (a:not(...), button, .pill) e o piso de leitura já vivem na banda de
     1100 acima — valem aqui também, porque ≤700px está contido em ≤1100px e a cascata não
     precisa repetir a regra. */

  /* o ticker (rolagem própria, altura real) já vive inteiro na banda de 1100 acima — vale
     aqui também pelo mesmo motivo do alvo de toque: ≤700px está contido em ≤1100px. */

  /* o off-set que js/header.js escreve no repouso (29*innerWidth/1224) encolhe com a largura
     real da tela — a 390px de largura ele sobra bem menos folga que a 768px. Os 20px de
     margin-top da banda de 1100 bastam no tablet (768: off 18px + 20 = 38px, contra o ticker
     de 32px) mas não no celular (390: off 9px + 20 = 29px, ainda 3px dentro do ticker) —
     medido nos dois, essa banda pisa mais fundo. */
  .site-header{ margin-top:29px; }

  /* o menu overlay é de duas colunas no desktop */
  .menu__grid{ grid-template-columns:1fr; row-gap:24px; }
  .menu__pages li a, .menu__here li a{ min-height:44px; display:flex; align-items:center; }

  /* /hub: a grade de dois cards não cabe em coluna única abaixo de 700px */
  .hub-grid{ grid-template-columns:1fr; }

  /* /hub: a abertura tem quatro colunas (texto ocupando três + o raio na quarta); reflui para
     uma coluna só, com o raio abaixo do texto — ele já encolhe sozinho via --u, só precisa
     parar de disputar coluna com o texto. O padding-top (calc(140*vhu) no desktop) também
     precisa de ajuste aqui: com o piso de --u desta banda ele já fica em 72,8px a 390px de
     largura — o suficiente para o header ANTIGO (fundo em y=30px), mas não para o header mais
     alto desta correção (fundo em ~82px); sem ajuste, o rótulo "O PROJETO" do herói nascia por
     baixo do header e cruzava o logo (medido e visto no recorte do topo). */
  #hub-hero{ grid-template-columns:1fr; row-gap:24px; padding-top:96px; }
  .hub-hero__copy{ grid-column:1; }
  .hub-hero__bolt{ grid-column:1; justify-self:center; margin-top:0; }

}