/* /sistema/board — ajuste fino do mobile. O painel já empilha as grades e já tem --u com piso
   e teto próprios: aqui é tipografia, alvo de toque, o trilho e os canvas.
   Sem promessa de paridade com o desktop: é tela de monitor, e no celular o objetivo é ser
   navegável e legível.
   REGRA DURA: toda regra aqui dentro de @media; nenhuma regra de desktop editada. */

@media (max-width: 1100px){

  /* ---------------------------------------------------------------- conflito de --u
     css/board/board.css:18 já redefine --u com piso e teto próprios (clamp(0.82px, 100vw/1512,
     1.18px)), pensado pra tela de monitor: TUDO no painel — ícone, padding, chip, raio de borda,
     rótulo mono, altura de canvas, largura do trilho — mede em calc(N * var(--u)), não só prosa.
     css/mobile.css (carregada depois) redefine --u de novo nesta banda (max(0.72px, 100vw/1224))
     e, sem esta regra, ganharia por ordem de arquivo — ela vale para as OUTRAS cinco páginas
     porque nelas --u só desenha decoração; a leitura de verdade passa pelos tokens --t-* (fluid,
     em px reais), que --u não toca.

     O painel não tem esse desvio: não existe --t-corpo aqui, um rótulo mono como
     `.bd-kpi__label` (calc(7 * var(--u))) é 100% --u, do início ao fim. Medido nos dois valores
     candidatos, a 390px de largura:
       --u da folha compartilhada (0.52 no piso da banda celular): rótulo mono cai a 3,6px —
       ilegível de verdade, não só apertado.
       --u do próprio painel (0.82, piso já calibrado pelo autor original): o MESMO rótulo sobe
       a 5,7px — ainda pequeno pra prosa (por isso os blocos de prosa de verdade abaixo ganham
       font-size explícito, não dependem de --u), mas dentro do que se espera de um rótulo curto
       em caixa alta com letter-spacing, num painel de aplicação.
     Decisão: o valor do painel prevalece. Redeclarado aqui, que carrega por último — ganha por
     ordem de arquivo, não por !important. */
  :root{ --u: clamp(0.82px, calc(100vw / 1512), 1.18px); }

  /* ---------------------------------------------------------------- prosa
     Cinco blocos de texto de verdade (60+ caracteres) que dependiam de --u puro caíam abaixo de
     14px nas duas bandas (medido: 7,7 a 9,7px). --t-corpo já existe na camada compartilhada
     (css/mobile.css, mesma banda) com piso de 15px — reaproveitado em vez de inventar um
     tamanho novo. --t-corpo-p NÃO serve aqui: seu próprio piso (13px) já fica abaixo do mínimo
     que a ferramenta cobra pra bloco de 60+ caracteres. */
  .cf-aviso, .bd-alerta__x, .bd-ia__a p, .bd-ia__aviso, .bd-rel__meta p{
    font-size:var(--t-corpo); line-height:1.45;
  }

  /* ---------------------------------------------------------------- barra do topo
     O alvo de toque de 40px da camada compartilhada (a:not(...), button — css/mobile.css) já
     cobre todo <button> do painel, incluindo os dois botões do seletor de tema. O problema é que
     eles moram dentro de `.bd-theme`/`.bd-slot`, com altura TRAVADA em calc(26 * var(--u)) e
     calc(58 * var(--u) - notch) — caixas pensadas pro botão de ~21px do desktop. Um botão de
     40px dentro de uma caixa de 14px não encolhe: ele vaza por baixo, sobre os indicadores
     (medido a olho: a etiqueta "Claro/Escuro" desaparecia, só a pílula de fundo aparecia no
     lugar certo). A barra ganha altura livre com piso; quem tinha altura travada acompanha. */
  .bd-top{ height:auto; min-height:64px; flex-wrap:wrap; row-gap:8px; padding-top:8px; padding-bottom:8px; }
  .bd-slot{ height:auto; align-self:center; padding:0; }
  /* a fenda (o entalhe côncavo nas pontas) é desenhada pra uma altura fixa — sem ela vira uma
     sangria que a ferramenta mede como conteúdo cortado (scrollWidth): +9 a +13px medidos nas
     duas bandas, o --notch (17u) escapando pela direita do .bd-slot. Decorativa, sem texto,
     sem função — desliga em vez de refazer a matemática pra uma altura que já é outra aqui. */
  .bd-slot__notch{ display:none; }
  .bd-theme{ height:auto; }
  .bd-theme button{ height:auto; padding-top:calc(4 * var(--u)); padding-bottom:calc(4 * var(--u)); }

  /* a barra de busca é decorativa (nenhum listener no JS) e sua largura fixa (300u) não cabe ao
     lado do nome da unidade e do bloco da direita — medido: texto do placeholder quebrando em
     três linhas e vazando sobre os vizinhos. O essencial (unidade, turno, tema, ao vivo,
     relógio) continua sem ela. */
  .bd-search{ display:none; }

  /* ---------------------------------------------------------------- trilho recolhido
     Etiqueta de hover (":root[data-rail='min'] .bd-nav button::after", css/board/board.css)
     existe pra mouse: no celular o trilho já começa recolhido por padrão (js/board/board.js), e
     hover não existe em toque — a etiqueta só ficava de pé no layout sem nunca aparecer,
     medida pela ferramenta como conteúdo cortado (+45px de sangria horizontal em
     `.bd-nav__items`, o `left:calc(100% + 14u)` do rótulo mais comprido saindo da coluna de
     64u). Sem função nesta banda: desliga. */
  :root[data-rail="min"] .bd-nav button::after{ display:none; }

  /* o botão redondo de recolher/expandir ganha min-height:40px da regra compartilhada, mas não
     largura (a regra só trava altura) — sem ajuste ele virava uma pílula ovalada de 20×40px em
     vez de círculo (border-radius:50% de uma caixa não-quadrada), e a metade clicável de
     verdade ficava mais estreita que o alvo de toque. Redondo de novo, do tamanho do alvo. */
  .bd-rail__toggle{ width:40px; height:40px; right:-20px; }

  /* ---------------------------------------------------------------- largura do trilho recolhido
     Consequência medida da `min-width:40px` que a camada compartilhada passou a aplicar ao alvo
     de toque (o spec §7.2 sempre pediu as duas dimensões; só a altura estava implementada, e a
     ferramenta só media a altura). O trilho recolhido tem `--rail-min: calc(64 * var(--u))`
     (css/board/board.css:786) = 52,5px com o --u do painel; descontados os 8u de recuo de cada
     lado e o fio da borda, sobram 38px para o botão. Com o alvo em 40px, os sete botões da
     navegação passaram a estourar a coluna — medido: +2px em `.bd-nav__items`, exatamente a
     diferença. 56px devolve os 40px ao botão com folga de 1px, e como a área principal se
     posiciona por `left:var(--rail)` (css/board/board.css:221), ela acompanha sozinha. */
  :root{ --rail-min: 56px; }

  /* mapa de zonas: a caixa é calc(346 * var(--u)) de altura fixa, dimensionada pro desktop
     largo — nela, `drawMapa` (js/board/board.js) preserva a proporção da planta
     (`PL.malha`, 100×48) e centraliza, então uma coluna estreita sobra MUITO alto/baixo em
     branco (medido: caixa de 277×284px, planta desenhada em só ~277×133px dentro dela — mais
     de 150px de vazio). Altura pela proporção da própria planta em vez do multiplicador do
     desktop: sem sobra, sem tocar em `drawMapa`. */
  .bd-mapa{ height:auto; aspect-ratio:100 / 48; }
}