/* Telas pequenas e toque. Carregado depois de main.css, research.css e zap.css;
   não altera o layout de desktop. */

.filters-toggle,.map-expand,.touch-hint{display:none}

@media(max-width:760px){
  /* Cabeçalho compacto: as abas e o conteúdo aparecem cedo na primeira tela. */
  .masthead{padding:10px 18px}
  .header-actions button,.header-actions a{min-height:40px}
  .intro{padding:12px 0 10px;gap:4px}
  .intro .eyebrow{display:none}
  .intro h1{font-size:42px}
  .scope-label{font-size:10px}

  /* Abas numa linha, com rolagem horizontal. main.js já traz a aba ativa para a
     área visível; zap.css quebrava a navegação em duas linhas. */
  .navigation{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;white-space:nowrap;gap:0 22px;margin-bottom:14px;scrollbar-width:none;overscroll-behavior-x:contain}
  .navigation::-webkit-scrollbar{display:none}
  .navigation a{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;padding:0}

  /* Textos que ficavam abaixo de 11px. */
  .eyebrow,.doc-copy .filename,.legend,.graph-caption,.zap-date-divider,#zap-coverage,.date-stamp span,.time-years small,.metadata dt{font-size:11px}
  .doc-topic-chip{font-size:11px;min-height:32px;line-height:24px}

  /* Mapa: filtros avançados atrás de "Filtros"; o grafo sobe para a primeira dobra. */
  .filters-toggle{display:inline-flex}
  #map-form:not(.filters-open) .filter-advanced{display:none}
  #map-form .filters-toggle{grid-column:1}
  #map-form>.primary{grid-column:2}
  #map-form #map-reset{grid-column:1/-1;justify-self:end;min-height:40px}
  #map-form:not(.filters-open) #map-reset{display:none}
  #map-form.filters-open .filters-toggle{border-color:var(--gold);color:var(--gold)}
  .layer-presets{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-bottom:12px}
  .layer-presets button{flex:0 0 auto;min-height:40px}
  .layer-behavior label{min-height:40px}
  .layer-chip{min-height:40px}
  .layer-panel input[type=checkbox]{width:20px;height:20px}
  .map-heading{padding:10px 0}
  #constellation{height:min(64dvh,540px)}
  .graph-controls{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;top:10px;left:10px;max-width:calc(100% - 20px)}
  .graph-controls::-webkit-scrollbar{display:none}
  .graph-controls button{flex:0 0 auto;min-height:40px;min-width:40px}
  #map-zoom-level{display:none}
  .map-expand{display:inline-flex}
  .inspector{scroll-margin-top:8px}

  /* Tela cheia do mapa: o grafo recebe todos os gestos. */
  .graph-shell.map-fullscreen{position:fixed;inset:0;z-index:40;border-radius:0}
  .graph-shell.map-fullscreen #constellation{height:100dvh}
  .graph-shell.map-fullscreen .graph-controls{top:max(12px,env(safe-area-inset-top));left:12px}
  .graph-shell.map-fullscreen .map-expand{border-color:var(--gold);color:var(--gold)}
  html.map-locked,html.map-locked body{overflow:hidden;overscroll-behavior:none}

  /* Documentos e leitor. */
  #reader-status,.provenance,.reader-head h2{overflow-wrap:anywhere}
  .reader-head>button,.reader-tools button{min-height:40px}

  /* Histórico: "Ordem" em largura total; filtros de período sem transbordar. */
  #time-form>label:has(#time-order){grid-column:1/-1}
  #time-form>label:has(#time-order) select{width:100%}
  .more-filters>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
  .more-filters>div>label{min-width:0}
  #time-form .more-filters>div>label:nth-child(n+3){grid-column:1/-1}
  .more-filters>div input,.more-filters>div select{width:100%;min-width:0;color-scheme:dark}

  /* Zap: a coluna ativa ocupa a altura da tela (zap.js alinha seu topo). */
  .zap-shell{height:calc(100dvh - 16px);min-height:420px}
  .zap-thread-header{padding:10px 12px;gap:10px}
  .zap-thread-header .zap-avatar{width:38px;height:38px;flex-basis:38px}
  .zap-thread-relations{margin-top:4px}
  .zap-back{min-width:40px;min-height:40px}
  .zap-search-form button{min-height:40px;padding:6px 14px}
}

@media(max-width:440px){
  .intro h1{font-size:40px}
  .doc-cover{height:150px}
}

@media(max-width:760px) and (pointer:coarse){
  /* Embutido na página, um dedo rola a página; dois dedos aproximam o mapa. */
  #constellation{touch-action:pan-y}
  .graph-shell.map-fullscreen #constellation{touch-action:none}
  .touch-hint{display:block;margin-top:4px}
}