/* Revisor de Livros no celular (telas de até 820px), no mesmo jeito da versão para celular do editor:
   o índice e as pessoas viram gavetas que deslizam dos lados, a barra de baixo fica ao alcance do polegar,
   a busca vira um ícone que abre o campo, e os botões do topo vão para o menu ⋯. */
#mobNav,#mobScrim,#mobBusca{display:none}
@media (max-width:820px),(hover:none){
  .livro .livAcoes{opacity:1;transform:none;pointer-events:auto}
  button,a,.tab,label{touch-action:manipulation}
}
@media (max-width:820px){
  html,body{-webkit-text-size-adjust:100%;overscroll-behavior:none}
  :root{--top-h:calc(54px + env(safe-area-inset-top,0px) * .6)}

  /* ---- topo ---- */
  header#top{gap:6px;padding:calc(env(safe-area-inset-top,0px) * .6) max(8px,env(safe-area-inset-right,0px)) 0 max(8px,env(safe-area-inset-left,0px))}
  .appSel{padding:4px 4px 4px 2px;gap:4px}
  .appNome,header#top>.divv{display:none}
  #bookTitle{flex:1;max-width:none;font-size:15px}
  .topoNome{flex:1}
  .searchWrap{display:none}
  #mobBusca{display:flex}
  body.m-busca .appSel,body.m-busca .brand,body.m-busca #bookTitle,body.m-busca #mobBusca,body.m-busca #mobMais,body.m-busca [data-top="biblioteca"]{display:none}
  body.m-busca .searchWrap{display:block;flex:1;max-width:none;margin:0}
  #search{font-size:16px;padding:10px 10px 10px 32px}
  #searchResults{position:fixed;left:8px;right:8px;top:calc(var(--top-h) + 4px);max-height:calc(100dvh - 150px)}
  .mobBtn{width:40px;height:40px;align-items:center;justify-content:center;padding:0;flex:none}
  .mobBtn svg{width:20px;height:20px}
  #mobMais{display:flex}
  /* os botões do topo viram o menu ⋯ (o topo sobe acima do fundo escurecido enquanto o menu está aberto) */
  body.m-menu header#top{z-index:98}
  .topbtns{display:none}
  body.m-menu .topbtns{display:flex;flex-direction:column;align-items:stretch;gap:2px;position:fixed;top:calc(var(--top-h) + 4px);right:8px;z-index:97;min-width:240px;padding:6px;background:var(--card);border:1px solid var(--line2);border-radius:12px;box-shadow:var(--shadow)}
  body.m-menu .topbtns .tbtn{width:100%;justify-content:flex-start;padding:12px;font-size:15px;gap:12px}
  body.m-menu .topbtns .tbtn.conta{border-radius:8px}
  body.m-menu .topbtns .tbtn .lbl{display:inline}
  body.m-menu .topbtns .tbtn svg{width:19px;height:19px}
  body.m-menu .topbtns .tbtn .badge{position:static;margin-left:auto}
  body.m-menu .topbtns .divv{width:auto;height:1px;margin:4px 6px}
  .topbtns [data-top="indice"],.topbtns [data-top="pessoas"]{display:none}

  /* ---- uma coluna só: as gavetas e a barra de baixo ---- */
  aside.lado{position:fixed;top:var(--top-h);bottom:calc(58px + env(safe-area-inset-bottom));z-index:60;width:min(88vw,360px);box-shadow:var(--shadow);transition:transform .32s cubic-bezier(.22,1,.36,1);margin:0!important}
  #left{left:0;transform:translateX(-104%)}
  #right{right:0;transform:translateX(104%)}
  body.m-left #left,body.m-right #right{transform:none}
  #mobScrim{position:fixed;inset:0;z-index:55;background:rgba(20,16,10,.45);opacity:0;pointer-events:none;transition:opacity .25s;display:block}
  body.m-left #mobScrim,body.m-right #mobScrim,body.m-menu #mobScrim{opacity:1;pointer-events:auto}
  body.m-menu #mobScrim{background:rgba(20,16,10,.2);z-index:96}
  #mobNav{display:flex;flex:none;background:var(--paper);border-top:1px solid var(--line2);padding:0 4px env(safe-area-inset-bottom);height:calc(58px + env(safe-area-inset-bottom));z-index:70;position:relative}
  #mobNav.hidden{display:none}
  #mobNav button{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:none;background:none;color:var(--muted);font-size:10.5px;padding:6px 2px;border-radius:10px;position:relative}
  #mobNav button svg{width:21px;height:21px}
  #mobNav button.on{color:var(--accent-ink);font-weight:600}
  #mobNav button.on::before{content:"";position:absolute;top:0;left:28%;right:28%;height:3px;border-radius:0 0 3px 3px;background:var(--accent)}

  /* ---- leitura ---- */
  .leitura{padding:24px 18px 40px}
  .ptext{font-size:max(16px,calc(17.5px*var(--ed-esc)))}
  .capTit{font-size:calc(27px*var(--ed-esc))}
  .topTit{font-size:calc(19px*var(--ed-esc))}
  .pgCapa{grid-template-columns:1fr;gap:22px;justify-items:center;text-align:center}
  .capaGrande{width:min(62vw,230px)}
  .pgCapa h1{font-size:calc(27px*var(--ed-esc))}
  .capaVoce{margin-left:auto;margin-right:auto;text-align:left}
  .capaAcoes{justify-content:center}
  .orient{padding:22px 16px 26px;border-radius:14px}
  .orient h1{font-size:22px}
  .orGrade{grid-template-columns:1fr}
  .orGestos{grid-template-columns:1fr 1fr}
  .capFim{margin-top:44px}
  .estCampo:has([data-est="larg"]){display:none}

  /* ---- janelas ---- */
  .dlgOv{padding:0;align-items:flex-end}
  .dlg,.dlg.largo{width:100vw;max-height:94dvh;border-radius:16px 16px 0 0;padding:20px 16px calc(18px + env(safe-area-inset-bottom))}
  .ent,select,textarea.ent{font-size:16px}
  .convTopo{grid-template-columns:1fr;justify-items:center}
  .convCampos{width:100%}
  .fotoBtns{flex-direction:row}
  .convLinha,.opcoes{grid-template-columns:1fr}
  .avGrade{grid-template-columns:repeat(5,minmax(0,1fr))}
  .infoWrap{padding:20px 16px 90px}
  .infoLinha{grid-template-columns:1fr;gap:2px}
  .estPainel{left:8px;right:8px;width:auto;top:calc(var(--top-h) + 4px)}
  .toast{bottom:calc(72px + env(safe-area-inset-bottom))}
  .avisoProg{bottom:calc(70px + env(safe-area-inset-bottom))}
  body.semNav .toast{bottom:18px}

  /* ---- biblioteca ---- */
  .bibWrap{padding:22px 16px 100px}
  .bibCab{margin-bottom:26px}
  .bibCab h1{font-size:24px}
  .estante{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));column-gap:24px;row-gap:48px}
  .capaWrap::after{left:-12px;right:-12px}
}