/* Telas pequenas e toque: a base comum do site.
   Plano: Spectrahsci_Cortex/08_Planos_Prompts/Plano_Responsivo_Multidispositivo.md
   Regras: skill spectrahsci-design, seção "Telas pequenas e toque".

   Carregada por toda página logo depois do theme.css/theme.js. Cores, fontes e
   medidas vêm do theme.css; este arquivo só arranja.

   Pontos de quebra (CSS não aceita variável dentro de @media, então ficam
   escritos; tests/test_responsive.py só aceita estes valores):
     celular  (max-width: 600px)   e o complemento (min-width: 601px)
     tablet   (max-width: 1024px)  e o complemento (min-width: 1025px)
     largo    (max-width: 1400px)  e o complemento (min-width: 1401px)
   Toque se pergunta por (pointer: coarse), nunca pela largura: tablet com
   teclado e mouse é ponteiro fino, notebook com tela de toque pode ser grosso. */

/* O celular não aumenta a letra sozinho ao girar a tela. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Imagem e vídeo nunca passam da caixa. As imagens do Leaflet têm regra
   própria (max-width: none !important no leaflet.css). */
:where(img, video) { max-width: 100%; }

/* Bloco de código longo rola dentro de si, nunca a página. */
:where(pre) { max-width: 100%; overflow-x: auto; }

/* Tabela larga: envolva num <div class="table-scroll">. Rola para o lado
   dentro da caixa, nunca a página. */
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Código em linha comprido (expressão regular, caminho, cabeçalho de .tsd)
   quebra onde precisar, em vez de alargar a página. */
:where(code) { overflow-wrap: anywhere; }

/* Fórmula do MathJax larga rola dentro de si. */
mjx-container[display="true"] { max-width: 100%; overflow-x: auto; overflow-y: hidden; }

/* Altura da tela: 100vh no celular passa por baixo da barra do navegador. */
.full-height { height: 100vh; height: 100dvh; }
.min-full-height { min-height: 100vh; min-height: 100dvh; }

/* Entalhe e barra de gestos do celular (pede viewport-fit=cover para valer). */
.safe-top { padding-top: env(safe-area-inset-top, 0); }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0); }

/* Alvo de toque: no dedo, área mínima de --tap-min; no mouse, nada muda. */
@media (pointer: coarse) {
  .tap-target {
    min-width: var(--tap-min);
    min-height: var(--tap-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Campo de digitar no celular: abaixo de 16 px o Safari do iPhone aumenta a
   página inteira ao tocar no campo. Por isso nenhuma página precisa (nem
   deve) travar o zoom com maximum-scale. */
@media (max-width: 600px) and (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  select,
  textarea {
    font-size: var(--fs-12);
    /* letra maior alarga o campo; numa linha flexível ele precisa poder
       encolher, senão empurra a página para o lado */
    min-width: 0;
  }
}

/* Mostrar e esconder por tamanho de tela. */
@media (max-width: 600px) {
  .hide-on-phone { display: none !important; }
  .stack-on-phone { display: flex !important; flex-direction: column; align-items: stretch; }
  .stack-on-phone > * { width: auto; max-width: 100%; }
}
@media (min-width: 601px) {
  .only-on-phone { display: none !important; }
}

/* Página confortável ao toque (nível A do plano): <body class="touch-friendly">.
   Em tela de toque, todo controle ganha a altura mínima de dedo e o texto
   miúdo da escala (--fs-1 a --fs-3, abaixo de 12 px) sobe para --fs-4.
   No mouse nada muda. */
@media (pointer: coarse) {
  .touch-friendly {
    --fs-1: var(--fs-4);
    --fs-2: var(--fs-4);
    --fs-3: var(--fs-4);
  }
  .touch-friendly :is(button, select, summary, [role="button"],
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"])):not(.toggle) {
    min-height: var(--tap-min);
  }
  .touch-friendly :is(button, [role="button"]):not(.toggle) { min-width: var(--tap-min); }
  .touch-friendly :is(input[type="checkbox"], input[type="radio"]) { width: 22px; height: 22px; }
  /* Escolher arquivo: o botão do navegador na altura do dedo. */
  .touch-friendly input[type="file"] { min-height: var(--tap-min); }
  .touch-friendly input[type="file"]::file-selector-button { min-height: var(--tap-min); }
  /* O interruptor (.toggle) fica do tamanho do desenho; a área de toque
     cresce por fora dele. */
  /* Janela de aceite dos Termos (auth_gate.js), em toda página logada. */
  #terms-accept-root button { min-height: var(--tap-min); }
  /* Logotipo do cabeçalho comum: é o caminho de volta para o início. */
  .nav-logo { min-height: var(--tap-min); min-width: var(--tap-min); display: inline-flex; align-items: center; justify-content: center; }
  /* Links com cara de botão: a área de toque cresce, o texto fica no meio. */
  .touch-friendly :is(.plan-btn, .header-btn, .signup-signin) {
    min-height: var(--tap-min); display: flex; align-items: center; justify-content: center;
  }
  .touch-friendly :is(.dl-btn, .settings-link) { min-height: var(--tap-min); align-items: center; }
  .touch-friendly .contact-value { min-height: var(--tap-min); display: flex; align-items: center; }
  .touch-friendly :is(.back-link, .back-to-top) { min-height: var(--tap-min); display: inline-flex; align-items: center; }
  /* Índices dos manuais: cada item da lista ganha altura para o dedo.
     Link no meio de um parágrafo fica como está (texto corrido). */
  .touch-friendly li > a:first-child { display: inline-block; padding-block: 10px; }
  .touch-friendly .toggle { position: relative; }
  .touch-friendly .toggle::before { content: ""; position: absolute; inset: -10px -4px; }
  /* Barra do Plotly (Zoom, Pan, "Scroll the page"): fica na tela no toque
     (static/js/plotly_touch.js) e cada botão ganha tamanho de dedo. */
  /* body na frente: o Plotly põe o estilo dele depois, com o mesmo peso. */
  body .js-plotly-plot .plotly .modebar-btn { padding: 11px; display: inline-block; height: var(--tap-min); box-sizing: border-box; }
  body .js-plotly-plot .plotly .modebar-btn svg { width: 22px; height: 22px; }
}

/* Janela de módulo ou de configuração (ASTRA, ARCA, RTO, TSMATH, as janelas
   do TSVIEW, CRS Selector, Panel do Bathos, Draw order): class="module-sheet"
   na caixa da janela e "module-sheet-x" no X. No celular ela ocupa a tela
   inteira, sem cantos (ou sobe do pé da tela, com module-sheet-bottom), e
   não se arrasta (quem arrasta confere
   matchMedia('(max-width: 600px)') e não começa). No tablet e no computador,
   como antes. O !important vence o estilo da própria janela, que vem depois
   desta folha (injetado pelo JS ou no <style> da página), e a posição que o
   arrastar deixou no style="" da caixa. */
@media (max-width: 600px) {
  .module-sheet {
    position: fixed !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    border-width: 0 !important;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 3000;
  }
  .module-sheet [class$="-head"], .module-sheet [class$="-header"] { cursor: default; }
  /* Janela curta (Draw order, RTO): folha que sobe do pé da tela, com a
     página visível em cima. Mesma classe module-sheet mais esta. */
  .module-sheet.module-sheet-bottom {
    top: auto !important;
    max-height: 85dvh !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    border-top-width: 1px !important;
  }
}
@media (pointer: coarse) {
  .module-sheet-x {
    min-width: var(--tap-min);
    min-height: var(--tap-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
  }
}

/* Diálogo pequeno de confirmação (.gp-modal do GeoPack, TSVIEW e RTO)
   continua cartão no meio da tela, mas nunca mais largo que ela. */
@media (max-width: 600px) {
  .gp-modal { max-width: calc(100vw - 24px) !important; box-sizing: border-box; }
}