/* =====================================================================================
   Composição PAISAGEM do terminal Durin
   (docs/terminal-landscape-layout-implementation-prompt.md)

   Alvo prioritário: Mini PDV Elgin M10 Pro (10,1", 1280 x 800 físicos). O aparelho NÃO é
   detectado em lugar nenhum — nem por user agent, nem por resolução, nem por
   devicePixelRatio. A única condição de ativação é a PROPORÇÃO da viewport:

       @media (orientation: landscape)   ==   largura da viewport > altura

   Regras deste arquivo:

     1. NADA que altere composição pode ficar fora da media query de orientação. O único
        bloco base tolerado é o de neutralização (`display: contents`) dos invólucros
        estruturais criados para esta entrega — ver a seção "Invólucros neutros" abaixo.
        Um invólucro em `display: contents` não gera caixa: em retrato a árvore de layout
        é EXATAMENTE a de antes.
     2. `min-width` só escolhe uma VARIANTE dentro da paisagem (quantas colunas cada
        família ganha). Nunca decide se a paisagem existe.
     3. Sem JavaScript, sem classe de orientação, sem DOM duplicado: o mesmo markup e o
        mesmo botão respondem à rotação sem recarregar a página nem recriar estado Blazor.

   ORDEM DE CASCATA — por que este arquivo é carregado DEPOIS de Durin.styles.css
   (Components/App.razor): o shell (`.terminal-app`, `.terminal-app-content`,
   `.terminal-app-content-inner`, `.terminal-app-footer`) vive no CSS ISOLADO de
   TerminalAppLayout.razor.css, que o build reescreve para `.classe[b-xxxxxxxxxx]` —
   especificidade (0,2,0). Por isso as regras de shell aqui são escritas como
   `.terminal-app .terminal-app-content`, também (0,2,0): empatam na especificidade e
   vencem pela ORDEM, sem um único `!important`. As regras de página (terminal.css) são
   (0,1,0) e já perdem para qualquer seletor daqui.
   ===================================================================================== */

/* -------------------------------------------------------------------------------------
   Invólucros neutros (ÚNICO bloco fora da media query)

   `.terminal-landscape-split` e seus dois filhos existem apenas para dar ao modo paisagem
   duas colunas internas onde o markup só tinha uma pilha. Em retrato eles não geram caixa
   alguma: os netos continuam sendo filhos diretos do contêiner original, na mesma ordem,
   com as mesmas margens e o mesmo empilhamento. Provado por medição (hash de geometria
   idêntico em 320x568, 390x844, 430x932, 768x1024 e 800x1280).
   ------------------------------------------------------------------------------------- */
.terminal-landscape-split,
.terminal-landscape-split > .terminal-landscape-split-a,
.terminal-landscape-split > .terminal-landscape-split-b,
.terminal-result-state-body {
    display: contents;
}

@media (orientation: landscape) {
    /* ---------------------------------------------------------------------------------
       Tokens locais da paisagem. NÃO é uma segunda paleta: são medidas de composição,
       cor nenhuma. Vivem no shell para que qualquer descendente as leia, e existem para
       que a caixa útil e o respiro sejam ajustáveis em um lugar só.

         --terminal-landscape-box
             Caixa útil central. 960px (retrato) -> 1160px: o meio do intervalo 1120-1180
             pedido pelo plano; em 1280 de viewport sobram 46px de margem de cada lado
             depois do respiro lateral.

         --terminal-landscape-pad
             Respiro da área central (12-16px pedidos pelo plano).
       --------------------------------------------------------------------------------- */
    .terminal-app,
    .terminal-bare {
        --terminal-landscape-box: 1160px;
        --terminal-landscape-pad: 14px;
    }

    /* ===== 1. Shell ================================================================= */

    /* Cabeçalho: só paddings e piso de altura encolhem. Marca, máquina, operador, selo de
       perfil e os dois botões (perfil e bloqueio) continuam todos no fluxo — a partir de
       760px o cabeçalho já é uma linha só (terminal.css), e toda paisagem nominal do M10
       Pro está acima disso. Medido em 1280x800: 72px -> 56px. */
    .terminal-app .terminal-header {
        padding: 8px 20px;
        padding-top: calc(8px + env(safe-area-inset-top));
        padding-left: calc(20px + env(safe-area-inset-left));
        padding-right: calc(20px + env(safe-area-inset-right));
        min-height: 56px;
    }

    /* Rodapé em UMA linha no conteúdo nominal: versão à esquerda, Wake Lock e conexão à
       direita. `flex-wrap` continua ligado — é ele que salva o estado excepcional (falha
       de Wake Lock com texto + botão), que pode ocupar duas linhas em vez de vazar. */
    .terminal-app .terminal-app-footer {
        padding: 5px 20px;
        padding-bottom: calc(5px + env(safe-area-inset-bottom));
        padding-left: calc(20px + env(safe-area-inset-left));
        padding-right: calc(20px + env(safe-area-inset-right));
        font-size: 0.7rem;
        gap: 4px 16px;
    }

    /* Área central: respiro menor e caixa útil maior. O topo e a base continuam a cargo
       do cabeçalho e do rodapé, que aplicam os próprios insets. */
    .terminal-app .terminal-app-content {
        padding: var(--terminal-landscape-pad);
        padding-left: calc(var(--terminal-landscape-pad) + env(safe-area-inset-left));
        padding-right: calc(var(--terminal-landscape-pad) + env(safe-area-inset-right));
    }

    .terminal-app .terminal-app-content-inner {
        max-width: var(--terminal-landscape-box);
    }

    /* O bloco de hidratação/carregamento do shell não precisa de 80px de respiro vertical
       quando a altura é o recurso escasso. */
    .terminal-app .terminal-app-loading {
        padding: 32px 0;
    }

    /* ===== 2. Ritmo vertical dos fluxos ============================================= */

    .terminal-flow {
        padding-bottom: 16px;
    }

    .terminal-flow-title,
    .terminal-flow-title-row {
        margin-bottom: 12px;
    }

    .terminal-flow-card {
        padding: 18px 20px;
        gap: 12px;
    }

    .terminal-empty-state {
        padding: 24px 16px;
    }

    .terminal-result-state {
        padding: 20px 16px;
    }

    .terminal-sku-highlight {
        padding: 20px 24px;
    }

    /* ===== 3. Barra de comandos ===================================================== */

    /* O bloco de comandos continua onde sempre esteve — no rodapé da área rolável, como no
       retrato. Houve uma versão em trilho lateral e ela foi descartada por medição: a coluna
       de 288px tirava 304px de largura do conteúdo, deslocava o centro óptico da página em
       157px (visível em qualquer estado curto) e esticava "Cancelar" para 254px, o triplo do
       rótulo. A barra devolve tudo isso e custa 70px de altura.

       A caixa mantém a altura natural para que as margens automáticas do shell centralizem
       conteúdo e comandos juntos, como no retrato. O `sticky` mantém a barra visível quando
       a lista cresce além da tela. */
    .terminal-app .terminal-app-content-inner {
        display: flex;
        flex-direction: column;
    }

    /* Um flex item de coluna encolhe por padrão. Sem isto, um conteúdo mais alto que a área
       seria espremido em vez de gerar rolagem. */
    .terminal-app .terminal-app-content-inner > * {
        flex-shrink: 0;
    }

    /* Uma linha só: [Cancelar fluxo] [Voltar · Etapa X de Y · Continuar].

       `row-reverse` é a única inversão visual da folha, e é deliberada. O invólucro entrega
       dois filhos — o cartão de etapa e a linha de cancelamento — nessa ordem, porque em
       retrato a destrutiva fica ABAIXO. Numa linha, mantê-la na ordem do DOM a colocaria
       encostada em "Confirmar", a 24px da ação que ela desfaz: num terminal de toque isso é
       um erro de operação esperando acontecer. Invertida, ela fica no extremo oposto — 761px
       de distância medidos em 1280x800.

       O que NÃO muda é a SEQUÊNCIA de foco: Voltar -> Continuar -> Cancelar, exatamente a
       mesma do retrato. Quem navega por teclado ou leitor de tela encontra os controles na
       ordem de sempre; o que a inversão muda é só onde a última parada fica na tela.

       `flex-wrap` é a rede de segurança: se rótulo longo + "Texto grande" estourarem a
       largura, a linha de cancelamento cai para baixo e a barra volta à forma do retrato,
       em vez de truncar rótulo. */
    .terminal-landscape-actions {
        flex-direction: row-reverse;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
        margin-top: 8px;
    }

    .terminal-landscape-actions > .terminal-step-footer {
        flex: 1 1 auto;
        padding: 10px 20px;
    }

    .terminal-landscape-actions > .terminal-cancel-row {
        flex: 0 0 auto;
    }

    /* Do tamanho do rótulo, como qualquer outro botão da barra — a tira de largura total só
       fazia sentido empilhada. */
    .terminal-landscape-actions .terminal-cancel-row-button {
        width: auto;
    }
}

/* =======================================================================================
   PAISAGEM LARGA (>= 900px de largura CSS): composição por família

   O bloco de comandos NÃO vive aqui: ele é o mesmo em toda a paisagem (ver a seção 3 do
   bloco anterior). O que muda a partir de 900px é só quanta coluna cada família ganha.
   ======================================================================================= */
@media (orientation: landscape) and (min-width: 900px) {
    /* ===== 3. Famílias de tela ===================================================== */

    /* ----- 6.3 Início e menus de opções ---------------------------------------------
       Quatro colunas na largura do M10 Pro. O cartão destacado mantém o span 2 que já tem
       em retrato, então a hierarquia não muda: ele continua sendo o dobro dos outros. */
    .terminal-home-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .terminal-home-secondary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Cartão mais baixo, sem cortar descrição nem selo: o conteúdo continua no fluxo
       (os selos nunca voltaram a ser absolutos) e o cartão cresce se precisar. */
    .terminal-action-card {
        min-height: 104px;
        padding: 14px 16px;
        gap: 4px;
    }

    .terminal-home-subtitle {
        margin-bottom: 14px;
    }

    /* O divisor entre a grade operacional e a secundária custava 48px de altura. */
    .terminal-home .mud-divider {
        margin-top: 16px;
        margin-bottom: 16px;
    }

    /* ----- 6.4 Catálogos, filtros e listas de seleção -------------------------------
       Filtros viram faixa horizontal: busca, filtros rápidos e "Limpar filtros" na mesma
       linha. "Mais filtros" continua sendo um painel que ocupa a linha inteira quando
       aberto — o conteúdo avançado não cabe na faixa sem espremer campo. */
    .terminal-filter-panel {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 12px;
        row-gap: 6px;
        padding: 8px 12px;
        margin-bottom: 12px;
    }

    .terminal-filter-panel > .terminal-filter-panel-search {
        flex: 1 1 240px;
        min-width: 200px;
    }

    .terminal-filter-panel-quick {
        flex: 2 1 320px;
        min-width: 240px;
    }

    .terminal-filter-panel-footer {
        flex: 0 0 auto;
    }

    .terminal-filter-panel-expansion {
        flex: 1 1 100%;
    }

    /* Mais colunas de catálogo. `auto-fill` (e não `auto-fit`) para que uma busca com um
       resultado só não estique um card para a largura inteira da coluna. */
    .terminal-sku-grid,
    .terminal-kit-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    /* Listas de cartões em duas colunas: cada item continua com a foto, o texto e o alvo
       tátil inteiros. Ficam de fora, de propósito, as listas SEQUENCIAIS (checklist de
       kit), onde a ordem é a informação e duas colunas atrapalhariam a leitura. */
    .terminal-withdrawal-list,
    .terminal-inventory-session-list,
    .terminal-reversal-operator-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        align-items: start;
    }

    /* ----- 6.5 Quantidade, posição, formulários e revisão ---------------------------
       O destaque do item deixa de ser um pôster vertical (foto de 120px + texto centrado,
       ~300px de altura) e vira um cabeçalho horizontal: foto à esquerda, identificação à
       direita, e o controle que confirma os valores logo abaixo, na largura inteira.

       `grid-row: 1 / span 4` na foto cobre as quatro linhas de identificação possíveis
       (nome, código, meta, saldo). Quando o estado tem menos, as linhas que sobram ficam
       com altura zero — o `row-gap` é 2px, então não há vão visível. */
    .terminal-sku-highlight {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 20px;
        row-gap: 2px;
        align-items: center;
        justify-items: start;
        text-align: left;
    }

    .terminal-sku-highlight > * {
        grid-column: 2;
    }

    .terminal-sku-highlight-photo {
        grid-column: 1;
        grid-row: 1 / span 4;
        align-self: center;
        width: 96px;
        height: 96px;
        margin-bottom: 0;
    }

    .terminal-sku-highlight-divider {
        grid-column: 1 / -1;
        margin: 14px 0;
    }

    /* Tudo o que é CONTROLE dentro do destaque ocupa a largura inteira do cartão, abaixo
       do divisor: seletor de quantidade, campos de aferição e o resumo da revisão. */
    .terminal-sku-highlight > .terminal-quantity-selector,
    .terminal-sku-highlight > .terminal-calibration-fields,
    .terminal-sku-highlight > .terminal-summary,
    .terminal-sku-highlight > .terminal-position-choice {
        grid-column: 1 / -1;
        justify-self: stretch;
        width: 100%;
        max-width: none;
    }

    /* Revisão: rótulo e valor lado a lado em duas colunas de pares, quando há espaço. */
    .terminal-summary {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 24px;
        row-gap: 0;
    }

    /* EXCEÇÃO — o resumo do cartão de configurações continua empilhado em paisagem.

       Ali os valores não são frases curtas: um deles é o número de série, 32 caracteres
       contínuos sem ponto de quebra natural. Em dois pares, cada detalhe recebe metade da
       largura do cartão, e a partir de ~900px de viewport o serial já não cabe ao lado do
       próprio rótulo — ele transbordava a célula e passava por cima do campo vizinho.

       Uma coluna só devolve ao serial a largura inteira do cartão. O preço é altura, e
       altura esta tela tem: são seis linhas. */
    .terminal-settings-card .terminal-summary {
        display: flex;
        flex-direction: column;
        column-gap: 0;
        row-gap: 4px;
    }

    /* ----- 6.7 Execução, loading, erro e resultado ----------------------------------
       Ícone e mensagem à esquerda, ações à direita. O invólucro `.terminal-result-state-body`
       é `display: contents` em retrato, então esta é a única orientação em que ele existe
       como caixa. Nenhum botão muda de tamanho entre sucesso e recusa: a mesma geometria
       vale para os dois. */
    /* O modificador existe porque `.terminal-result-state` também é usado SOLTO em algumas
       páginas (perfil, kits, reposição, retirada, estorno), sem o invólucro do corpo. Sem
       ele, virar `row` picotaria ícone, título e mensagem em três colunas nessas telas.
       Quem tem o modificador é o componente compartilhado TerminalResultState. */
    .terminal-result-state-split {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        text-align: left;
        gap: 32px;
    }

    .terminal-result-state-split > .terminal-result-state-body {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        min-width: 0;
        flex: 0 1 520px;
    }

    .terminal-result-state-split > .terminal-result-state-actions {
        margin-top: 0;
        flex: 0 0 auto;
        width: 240px;
    }

    /* ----- 6.8 Perfil e configurações -----------------------------------------------
       Duas colunas internas pelo contrato `.terminal-landscape-split`. */
    .terminal-landscape-split {
        display: grid;
        /* Metades iguais é o padrão: as duas colunas costumam ser dois blocos de informação
           de peso equivalente (status x detalhes técnicos, por exemplo). */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 24px;
        align-items: start;
        /* O invólucro pode nascer dentro de um cartão que é `flex column` com
           `align-items: center` (é o caso do cartão de identificação): sem a largura
           explícita ele encolheria até o conteúdo e as duas colunas sumiriam. */
        width: 100%;
    }

    /* Modificador: a segunda coluna é um APOIO de largura fixa, não uma metade. Usado no
       perfil, onde a coluna direita carrega o teclado de PIN — cuja largura útil é o que
       mantém as três colunas de teclas bem acima do piso tátil — e a esquerda carrega
       identidade e permissões, que se beneficiam da largura que sobrar. */
    .terminal-landscape-split-aside {
        grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
        /* As duas colunas terminam na MESMA linha. Sem isto cada uma tinha a própria altura e
           o cartão de PIN parava 50px abaixo do último chip de permissão da coluna ao lado
           (medido em 1884x800 com as oito permissões de um administrador). */
        align-items: stretch;
    }

    .terminal-landscape-split > .terminal-landscape-split-a,
    .terminal-landscape-split > .terminal-landscape-split-b {
        display: block;
        min-width: 0;
    }

    /* O primeiro título de seção da coluna direita não pode nascer com a margem superior
       que ele tinha quando vinha DEPOIS de um cartão empilhado. */
    .terminal-landscape-split > .terminal-landscape-split-b > :first-child {
        margin-top: 0;
    }

    /* ----- 6.8 Perfil: o cartão de PIN termina onde a coluna ao lado termina ----------

       A cadeia tem quatro elos: a grade estica as duas colunas (`align-items: stretch` acima),
       a coluna direita vira uma pilha flex, o cartão cresce até a base dela e, DENTRO do
       cartão, quem absorve a folga é o TECLADO.

       Absorver no teclado — e não em margens — é o que faz a correção se ajustar sozinha a 6,
       8 ou 10 permissões: quem define a altura é sempre a coluna esquerda, e o cartão preenche
       o que sobrar. O piso tátil vive no `minmax(48px, 1fr)`: a tecla cresce com a folga e
       nunca desce abaixo de 48px.

       Este bloco vem DEPOIS do `display: block` genérico de propósito: as duas regras têm a
       mesma especificidade (0,2,0), então quem decide é a ordem. Invertido, a coluna continuava
       em bloco e a cadeia inteira não saía do lugar — foi exatamente o que a primeira medição
       acusou. */
    .terminal-landscape-split-aside > .terminal-landscape-split-b {
        display: flex;
        flex-direction: column;
    }

    .terminal-profile-pin-card {
        flex: 1 1 auto;
        min-height: 0;
        /* `.panel-card` traz 24px de margem inferior, pensada para cartões EMPILHADOS. Aqui o
           cartão é o último item da coluna, e a margem o deixava 24px acima da base mesmo
           depois de esticar. */
        margin-bottom: 0;
    }

    /* A página real embrulha o conteúdo num <form> (o POST da troca de PIN); o laboratório não
       tem formulário nenhum. Onde o form existe, ele precisa REPASSAR a altura adiante em vez
       de interrompê-la. */
    .terminal-profile-pin-card > .terminal-profile-pin-form {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        gap: 12px;
    }

    .terminal-profile-pin-card .terminal-keypad {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        /* O respiro agora é o `gap` do cartão; a margem própria do teclado viraria espaço
           duplicado e roubaria altura de quem precisa dela. */
        margin-top: 0;
    }

    .terminal-profile-pin-card .terminal-keypad-display {
        margin-bottom: 8px;
    }

    /* O piso do canal vive nos DOIS lugares, e nos dois na mesma forma: `max(48px, 3rem)` é
       48px no tamanho padrão e 54px com a preferência "Texto grande" ligada — como em todo o
       resto do teclado. `1fr` é o teto: a linha cresce com a folga da coluna. */
    .terminal-profile-pin-card .terminal-keypad-grid {
        flex: 1 1 auto;
        grid-auto-rows: minmax(max(48px, 3rem), 1fr);
    }

    /* A tecla sai dos 56px FIXOS para poder esticar junto com a linha da grade. O que ela não
       pode, em hipótese nenhuma, é ficar menor que o alvo tátil. */
    .terminal-profile-pin-card .terminal-keypad-key {
        min-height: max(48px, 3rem);
    }

    .terminal-permission-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    /* ----- 6.1 Ativação e conexão indisponível ---------------------------------------
       Marca e suporte à esquerda, cartão de formulário/estado à direita. As três caixas
       da tela são fixas e conhecidas (marca, cartão, link de suporte), então a divisão é
       feita por posicionamento explícito na grade — sem invólucro novo e sem duplicar
       nada. A ordem do DOM continua marca -> cartão -> suporte. */
    .terminal-activation {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
        column-gap: 48px;
        row-gap: 12px;
        align-items: center;
        justify-items: start;
        max-width: 900px;
    }

    .terminal-activation-brand {
        grid-column: 1;
        grid-row: 1;
        align-self: end;
        margin-bottom: 0;
    }

    .terminal-activation-support {
        grid-column: 1;
        grid-row: 2;
        align-self: start;
        margin-top: 0;
    }

    .terminal-activation-card {
        grid-column: 2;
        grid-row: 1 / span 2;
        padding: 24px;
    }

    /* ----- 6.2 Identificação do operador e alteração de PIN --------------------------
       Introdução/identidade à esquerda, campo ou teclado à direita. Display, erro e
       Entrar/Confirmar formam um bloco único na mesma coluna — o teclado nunca fica
       separado do botão que envia o que foi digitado. */
    /* ----- 6.6 Inventário ------------------------------------------------------------
       O estado de contagem já tinha uma composição medida para 1280x800 (a regra
       `@media (max-height: 900px) and (min-width: 1000px)` de terminal.css, que põe o
       bloco operacional e a grade funcional lado a lado). Ela NÃO é refeita aqui: as
       telas de inventário não declaram trilho, então a coluna de comandos resolve para
       zero e a composição existente recebe a caixa útil inteira (1160px em vez de 960px)
       — mais folga para os mesmos alvos, nunca menos.

       O que entra aqui é só o que a regra antiga não cobre: a faixa larga entre 900 e
       999px, onde ela não vale e a coluna única volta a somar mais que a altura útil. */
    .terminal-inventory-counting {
        display: flex;
        align-items: flex-start;
        gap: 16px;
    }

    .terminal-inventory-counting-main {
        flex: 1.2 1 0;
    }

    .terminal-inventory-counting .terminal-inventory-function-grid {
        flex: 1 1 0;
        margin-top: 0;
    }

    .terminal-inventory-page-header {
        margin-bottom: 10px;
    }

    .terminal-inventory-result-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

/* =======================================================================================
   6.2 IDENTIFICAÇÃO DO OPERADOR — SEM composição própria, de propósito

   A tela de matrícula e a de PIN (/terminal/app) NÃO recebem tratamento de paisagem. Houve
   uma versão com duas colunas — identidade à esquerda, campo ou teclado à direita — e ela
   foi REVERTIDA a pedido: o cartão volta a ser a mesma pilha centralizada de 420px em
   qualquer orientação, com a marca no topo, o título, o campo/teclado e o botão de envio
   embaixo.

   O que ainda alcança estas duas telas é só o que vale para o canal inteiro: os paddings
   compactos do shell e, abaixo de 700px de altura, o respiro menor do teclado numérico —
   que continua com as 12 teclas acima do piso tátil de 48px. Nenhuma regra desta folha
   cita `.terminal-login-*`, e é assim que deve continuar.
   ======================================================================================= */

/* =======================================================================================
   PAISAGEM LARGA INTERMEDIÁRIA (900–1099px)

   Entre 900 e 1099px três colunas leem melhor do que
   quatro colunas espremidas — medido em 1024x768 e 1024x600.
   ======================================================================================= */
@media (orientation: landscape) and (min-width: 900px) and (max-width: 1099px) {
    .terminal-home-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* =======================================================================================
   PAISAGEM COMPACTA (< 900px de largura CSS)

   O modo paisagem continua ATIVO: o que muda é que o bloco de comandos permanece na faixa
   horizontal grudenta acima do rodapé global — exatamente o `position: sticky; bottom: 0`
   que `.terminal-step-footer-wrapper` já tem. Nada é duplicado nem escondido; é a mesma
   caixa, na outra posição.

   Os botões continuam em UMA linha (Voltar | Etapa | Continuar), sem empilhar: nesta
   faixa a altura é o recurso escasso e o bloco de 600px de terminal.css, que empilha,
   não alcança estas larguras.
   ======================================================================================= */
@media (orientation: landscape) and (max-width: 899px) {
    .terminal-landscape-actions {
        gap: 8px;
        margin-top: 4px;
    }

    .terminal-landscape-actions > .terminal-step-footer {
        padding: 8px 12px;
        gap: 12px;
    }

    .terminal-home-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .terminal-home-secondary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .terminal-action-card {
        min-height: 96px;
        padding: 12px 14px;
    }
}

/* =======================================================================================
   PAISAGEM BAIXA (altura <= 700px CSS: 1024x600 e o teclado virtual aberto em qualquer
   formato)

   Só respiro vertical encolhe. Nenhum alvo de toque, nenhuma fonte e nenhuma foto são
   reduzidos abaixo do piso — a saída para conteúdo que não cabe é a rolagem controlada do
   `<main>`, nunca `overflow: hidden`, `transform: scale()` ou fonte menor.

   700 e não 600: é o mesmo limiar que terminal.css já usa para compactar o inventário, e
   repetir o número evita duas fronteiras diferentes brigando na mesma tela.
   ======================================================================================= */
@media (orientation: landscape) and (max-height: 700px) {
    .terminal-app,
    .terminal-bare {
        --terminal-landscape-pad: 10px;
    }

    .terminal-app .terminal-header {
        padding-top: calc(6px + env(safe-area-inset-top));
        padding-bottom: 6px;
        min-height: 48px;
    }

    .terminal-app .terminal-app-footer {
        padding-top: 3px;
        padding-bottom: calc(3px + env(safe-area-inset-bottom));
    }

    .terminal-flow-title,
    .terminal-flow-title-row {
        margin-bottom: 8px;
    }

    .terminal-flow-card {
        padding: 14px 16px;
        gap: 10px;
    }

    .terminal-activation-card {
        padding: 16px 20px;
    }

    /* Teclado numérico: menos respiro, MESMO piso tátil. `max(48px, 3rem)` mantém o piso do
       canal e continua crescendo com a preferência "Texto grande" — 3rem = 48px no tamanho
       padrão e 54px com o texto grande ligado. Nunca abaixo de 48. */
    .terminal-keypad {
        margin-top: 12px;
    }

    .terminal-keypad-display {
        margin-bottom: 10px;
    }

    .terminal-keypad-key {
        min-height: max(48px, 3rem);
    }

    .terminal-action-card {
        min-height: 92px;
        padding: 12px 14px;
    }

    .terminal-permission-chip {
        padding: 8px 12px;
    }

    .terminal-profile-pin-actions {
        margin-top: 8px;
    }

    /* Títulos de seção de uma coluna do split não precisam da margem que separava blocos
       EMPILHADOS: em duas colunas eles já estão separados horizontalmente. */
    .terminal-landscape-split > * > .mud-typography-subtitle2 {
        margin-top: 8px;
        margin-bottom: 4px;
    }

    .terminal-sku-highlight {
        padding: 14px 18px;
    }
}

/* =======================================================================================
   PAISAGEM MUITO BAIXA (altura <= 480px CSS: 844x390, 667x375)

   O último degrau. Mesmo aqui nada de tátil encolhe; o que sai é margem.
   ======================================================================================= */
@media (orientation: landscape) and (max-height: 480px) {
    .terminal-app,
    .terminal-bare {
        --terminal-landscape-pad: 8px;
    }

    .terminal-app .terminal-header {
        padding-top: calc(4px + env(safe-area-inset-top));
        padding-bottom: 4px;
    }

    .terminal-flow {
        padding-bottom: 8px;
    }

    .terminal-flow-title,
    .terminal-flow-title-row {
        margin-bottom: 6px;
    }

    .terminal-activation-card {
        padding: 12px 16px;
    }
}