/* Versão celular: aplicativo. Barra do app em cima, abas embaixo, uma tela por vez.
   Até 599 px uma coluna com borda de 16 px; de 600 a 1023 px conteúdo centralizado até 720 px e abas com rótulo ao lado. */

.celular {
  --alto-barra: calc(56px + env(safe-area-inset-top));
  --alto-busca: 64px;
  --borda: max(16px, env(safe-area-inset-left));
  min-height: 100dvh;
  padding-bottom: calc(68px + env(safe-area-inset-bottom));
}
.celular[data-baixo="barra"] { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }

/* barra do app */
.barra-app {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--alto-barra);
  padding: env(safe-area-inset-top) max(4px, env(safe-area-inset-right)) 0 max(4px, env(safe-area-inset-left));
  background: var(--vidro);
  -webkit-backdrop-filter: saturate(1.8) blur(18px);
  backdrop-filter: saturate(1.8) blur(18px);
  box-shadow: 0 1px 0 transparent;
  transition: box-shadow var(--mover);
  view-transition-name: barra-app;
}
.barra-app.rolada { box-shadow: 0 1px 0 var(--linha); }
.barra-esq { flex: 1 1 auto; display: flex; align-items: center; min-width: 0; max-width: 30%; }
.celular[data-tela="lista"] .barra-esq { max-width: none; }
.barra-dir { flex: none; display: flex; justify-content: flex-end; }
.barra-dir .botao-icone { color: var(--secundario); }
.marca {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  padding: 8px 12px;
  font: 700 19px/1.1 var(--titulo);
  letter-spacing: -.01em;
  color: var(--tinta); text-decoration: none;
  white-space: nowrap;
}
.marca span { overflow: hidden; text-overflow: ellipsis; }
.voltar {
  display: inline-flex; align-items: center; gap: 0;
  min-height: var(--toque); max-width: 100%;
  padding: 0 10px 0 2px;
  color: var(--acento-texto);
  font-size: 17px; font-weight: 500;
}
.voltar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-titulo {
  position: absolute; left: 50%; bottom: 0;
  display: flex; align-items: center; height: 56px;
  max-width: calc(100% - 2 * 112px);
  translate: -50% 0;
  font: 600 16px/1.2 var(--sans);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--mover), transform var(--mover);
}
.barra-app.com-titulo .barra-titulo { opacity: 1; transform: none; }

/* conteúdo */
.tela {
  max-width: 720px; margin: 0 auto;
  padding: 4px var(--borda) var(--e6);
}
.tela:focus-visible { outline: none; }
.titulo-grande { font-size: 30px; line-height: 1.12; }
.titulo-grande:focus-visible { outline: none; }

/* abas */
.abas {
  position: fixed; inset: auto 0 0 0; z-index: 30;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: var(--vidro);
  -webkit-backdrop-filter: saturate(1.8) blur(18px);
  backdrop-filter: saturate(1.8) blur(18px);
  box-shadow: 0 -1px 0 var(--linha);
  view-transition-name: abas;
}
/* quatro abas, só texto em fonte mono; a ativa em bloco escuro */
.aba {
  display: grid; place-items: center;
  min-height: 48px; padding: 0 2px;
  color: var(--secundario); text-decoration: none; text-align: center;
  font: 400 12.5px/1.1 var(--mono); text-transform: lowercase;
}
.aba[aria-current="page"] { background: var(--tinta); color: var(--fundo); font-weight: 600; }
.aba:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }

/* barra de baixo do detalhe: ações, ou o porquê de não haver */
.barra-baixo {
  position: fixed; inset: auto 0 0 0; z-index: 30;
  padding: 10px max(var(--borda), env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) var(--borda);
  background: var(--vidro);
  -webkit-backdrop-filter: saturate(1.8) blur(18px);
  backdrop-filter: saturate(1.8) blur(18px);
  box-shadow: 0 -1px 0 var(--linha);
  view-transition-name: barra-baixo;
}
.barra-baixo-dentro { max-width: 688px; margin: 0 auto; }
.barra-acoes .acao { min-height: 52px; }
.barra-larga { width: 100%; min-height: 52px; }
.barra-aviso {
  display: flex; align-items: center; gap: var(--e3);
  width: 100%; min-height: 52px; padding: 8px 14px;
  border-radius: var(--raio-p);
  background: var(--st-inv-bg); color: var(--tinta);
  font-size: var(--t-mini); font-weight: 500; line-height: 1.35; text-align: left;
}
.barra-aviso svg { color: var(--st-inv); }

/* Início */
.inicio { display: grid; gap: var(--e5); padding-top: var(--e4); padding-bottom: var(--e5); }
.inicio-cab { display: grid; gap: var(--e2); }
.inicio-pergunta { font-size: clamp(34px, 9.4vw, 44px); line-height: 1.04; letter-spacing: -.022em; font-weight: 680; }
.inicio-apoio { color: var(--secundario); font-size: var(--t-pequeno); line-height: 1.5; }
.busca-unica { margin-top: 4px; }
.campo-grande {
  align-items: flex-start;
  min-height: 60px;
  padding: 6px 6px 6px 14px;
  border-radius: var(--raio-p);
  box-shadow: inset 0 0 0 1px var(--linha-forte), 0 1px 2px rgba(20, 24, 29, .04), 0 6px 20px -12px rgba(20, 24, 29, .2);
}
.campo-grande:focus-within { box-shadow: inset 0 0 0 2px var(--acento), 0 6px 20px -12px rgba(20, 24, 29, .2); }
.campo-grande > svg { margin-top: 13px; }
.campo-grande textarea {
  flex: 1; min-width: 0;
  min-height: 48px; max-height: 168px;
  padding: 12px 4px 10px 6px;
  border: 0; background: none; outline: none; resize: none;
  color: var(--tinta);
  font-size: var(--t-corpo); line-height: 1.45;
}
.campo-grande textarea::placeholder { color: var(--secundario); opacity: 1; }
.campo-grande .botao-icone { margin-top: 2px; }
.exemplos {
  display: flex; flex-wrap: nowrap; column-gap: var(--e2);
  margin: -4px calc(-1 * var(--borda)) 0; padding: 0 var(--borda);
  overflow-x: auto; scrollbar-width: none;
}
.exemplos::-webkit-scrollbar { display: none; }
.exemplos .chip { color: var(--secundario); }
.exemplos-rotulo { flex: none; align-self: center; color: var(--secundario); font-size: var(--t-mini); }
/* Como funciona: três passos numerados, até o "Entendi" */
.como-funciona {
  display: grid; gap: var(--e2);
  padding: 12px 16px 14px;
  border-radius: var(--raio-p);
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--linha);
}
.como-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }
.como-entendi { min-height: 36px; margin-right: -8px; padding: 0 8px; border: 0; background: none; color: var(--acento-texto); font-size: var(--t-mini); font-weight: 600; }
.como-funciona ol { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: passo; }
.como-funciona li { display: flex; gap: 10px; counter-increment: passo; font-size: var(--t-pequeno); line-height: 1.4; }
.como-funciona li::before {
  content: counter(passo);
  display: grid; place-items: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--acento-suave); color: var(--acento-texto);
  font-size: 12px; font-weight: 700;
}
.atalhos { display: grid; margin-top: var(--e1); }
.resultados .atalhos { margin-top: calc(-1 * var(--e3)); }
.atalho {
  display: flex; align-items: center; gap: 14px;
  min-height: 68px; padding: 14px 0;
  border-top: 1px solid var(--linha);
  color: var(--tinta); text-decoration: none;
}
.atalho:last-child { border-bottom: 1px solid var(--linha); }
.atalho > svg { color: var(--secundario); }
.atalho-icone {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: var(--raio-p);
  background: var(--acento-suave); color: var(--acento-texto);
}
.atalho-texto { flex: 1; min-width: 0; display: grid; }
.atalho-titulo { font: 650 19px/1.25 var(--titulo); }
.atalho-desc { margin: 2px 0 4px; color: var(--secundario); font-size: var(--t-mini); line-height: 1.4; }
.atalho-numero { color: var(--acento-texto); font-size: var(--t-rotulo); font-weight: 600; font-variant-numeric: tabular-nums; }
/* Como a pesquisa foi feita: as premissas, sempre visíveis */
.inicio-rodape { display: grid; gap: var(--e2); margin-top: var(--e2); color: var(--secundario); font-size: var(--t-mini); line-height: 1.5; }
.resultados { display: grid; gap: var(--e5); }
.resultados:empty { display: none; }
.sem-resultado { padding: var(--e5) 0; color: var(--secundario); }
.ver-todos {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--toque); padding: 6px 0;
  font-size: var(--t-pequeno); font-weight: 600; text-decoration: none;
}

/* listas */
.lista-cab { display: grid; gap: 10px; padding-top: var(--e3); }
.numero-chave { color: var(--secundario); font-size: var(--t-pequeno); line-height: 1.4; margin-top: -4px; }
.segmentado-propostas { margin-bottom: var(--e2); }
.barra-situacao { display: flex; gap: 3px; height: 34px; margin-top: -2px; }
.barra-situacao button { position: relative; min-width: 14px; flex-basis: 0; }
.barra-situacao button i {
  position: absolute; inset: 11px 0;
  border-radius: var(--raio-p);
  transition: opacity var(--mover), inset var(--mover);
}
.barra-situacao button:first-child i { border-radius: var(--raio-p); }
.barra-situacao button:last-child i { border-radius: var(--raio-p); }
.barra-situacao:has([aria-pressed="true"]) button[aria-pressed="false"] i { opacity: .25; }
.barra-situacao button[aria-pressed="true"] i { inset: 7px 0; }
.lista-busca {
  position: sticky; top: var(--alto-barra); z-index: 20;
  margin: var(--e2) calc(-1 * var(--borda)) 0; padding: 8px var(--borda);
  background: var(--fundo);
}
.barra-app.rolada:has(+ .tela .lista-busca) { box-shadow: none; }
.lista-chips {
  display: flex; flex-wrap: nowrap; align-items: center;
  margin: -4px calc(-1 * var(--borda)) 0; padding: 0 var(--borda);
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
}
.lista-chips::-webkit-scrollbar { display: none; }
.lista-chips .chips { flex-wrap: nowrap; }
.chips-sep { flex: none; width: 1px; height: 22px; margin: 0 var(--e2); background: var(--linha-forte); }
.lista-estado {
  display: flex; align-items: center; gap: var(--e2);
  min-height: 52px;
  border-bottom: 1px solid var(--linha);
}
.lista-total { flex: 1; color: var(--secundario); font-size: var(--t-mini); }
.lista-total .numero { color: var(--tinta); font-weight: 600; }
.lista-estado .botao.texto { min-height: 40px; font-size: var(--t-mini); }
.botao-filtros { position: relative; min-height: 40px; padding: 0 12px; border-radius: var(--raio-p); font-size: var(--t-mini); background: var(--preenchido); }
.botao-filtros .contador {
  display: grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--raio-p);
  background: var(--acento); color: var(--sobre-acento);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.grupo-cab {
  position: sticky; top: calc(var(--alto-barra) + var(--alto-busca)); z-index: 10;
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3);
  margin: 0 calc(-1 * var(--borda)); padding: 18px var(--borda) 8px;
  background: var(--fundo);
  font: 600 var(--t-rotulo)/1.35 var(--sans);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--secundario);
  box-shadow: 0 1px 0 var(--linha);
}
.resultados .grupo-cab { position: static; margin: 0; padding: 0 0 8px; }
.grupo-cab .n { font-variant-numeric: tabular-nums; letter-spacing: 0; }
.linhas { list-style: none; }
.linha { content-visibility: auto; contain-intrinsic-size: auto 112px; }
.linha a {
  display: grid; gap: 4px;
  margin: 0 calc(-1 * var(--borda)); padding: 14px var(--borda) 15px;
  border-bottom: 1px solid var(--linha);
  color: var(--tinta); text-decoration: none;
  transition: background-color 120ms;
}
.linha a:active { background: var(--preenchido); }
@media (hover: hover) { .linha a:hover { background: var(--preenchido); } }
.linha a:focus-visible { outline-offset: -2px; border-radius: 0; }
.linha-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
  min-height: 20px;
  color: var(--secundario); font-size: var(--t-mini); line-height: 1.3;
}
.linha-meta .selo { padding: 1px 7px; font-size: 12px; }
.linha-titulo { font: 650 18px/1.28 var(--titulo); letter-spacing: -.005em; }
.linha-sub {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden;
  color: var(--secundario); font-size: var(--t-pequeno); line-height: 1.45;
}
.linha.esmaecida a { opacity: .62; }
.vazio, .nao-encontrado {
  display: grid; justify-items: center; gap: var(--e4);
  padding: var(--e7) var(--e4);
  text-align: center; color: var(--secundario);
}
.nao-encontrado { padding-top: 12vh; }
.nao-encontrado > svg { color: var(--linha-forte); }
.nao-encontrado h1 { color: var(--tinta); }
.nao-encontrado p { max-width: 34ch; }
.lista-comparar .interruptor { padding: 2px 0; }
.botao-versao { justify-content: flex-start; text-align: left; min-height: 52px; line-height: 1.3; }
.grupo-filtro { display: grid; gap: 4px; }
.grupo-filtro .rotulo { margin-bottom: 2px; }
.grupo-filtro .chips .chip { white-space: normal; text-align: left; padding-block: 10px; }

/* detalhe */
.detalhe { display: grid; gap: 28px; padding-top: var(--e3); }
.detalhe-cab { display: grid; gap: var(--e3); }
.detalhe-cab .titulo-grande { font-size: var(--t-h1); }
.detalhe-meta { margin-top: -4px; color: var(--secundario); font-size: var(--t-pequeno); }
.detalhe .bloco > .rotulo { margin-bottom: -2px; }
.bloco-fontes .fontes { margin-top: -4px; }
.lista-links { list-style: none; display: grid; }
.lista-links a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  min-height: 52px; padding: 10px 0;
  border-bottom: 1px solid var(--linha);
  color: var(--tinta); font-weight: 500; text-decoration: none;
}
.lista-links li:first-child a { border-top: 1px solid var(--linha); }
.lista-links a svg { color: var(--secundario); }
.bloco .lista-links { margin-top: 4px; }
.proximo {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--e3);
  margin-top: var(--e2); padding: 16px 18px;
  border-radius: var(--raio-p);
  background: var(--superficie);
  box-shadow: 0 0 0 1px var(--linha);
  color: var(--tinta); text-decoration: none;
}
.proximo .rotulo { grid-column: 1; }
.proximo-titulo { grid-column: 1; font: 650 18px/1.3 var(--titulo); }
.proximo svg { grid-column: 2; grid-row: 1 / span 2; color: var(--acento-texto); }

/* assunto: os dois lados empilhados, nome fixo no topo de cada um */
.lado { display: grid; gap: var(--e4); }
.lado-cab {
  position: sticky; top: var(--alto-barra); z-index: 10;
  margin: 0 calc(-1 * var(--borda)); padding: 12px var(--borda) 10px;
  background: var(--fundo);
  font-size: var(--t-h2);
  box-shadow: 0 2px 0 var(--tinta);
}
.parte { display: grid; gap: 2px; }
.parte .linha a { padding-block: 12px 13px; }
.parte .linha-titulo { font-size: 17px; }
.parte-vazia { color: var(--secundario); font-size: var(--t-pequeno); font-style: italic; padding: 6px 0 4px; }

/* Sobre */
.sobre-bloco { display: grid; gap: var(--e3); }
.sobre-texto p { font-size: var(--t-pequeno); line-height: 1.6; }
.sobre-instalar { justify-self: start; }
.sobre-fontes summary {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 52px;
  border-block: 1px solid var(--linha);
  font-weight: 600; cursor: pointer; list-style: none;
}
.sobre-fontes summary::-webkit-details-marker { display: none; }
.sobre-fontes summary svg { transition: transform var(--mover); color: var(--secundario); }
.sobre-fontes[open] summary svg { transform: rotate(180deg); }
.sobre-rodape { display: grid; gap: var(--e2); color: var(--secundario); font-size: var(--t-mini); }

.espera { padding-top: var(--e6); }
.falha { display: grid; gap: var(--e4); justify-items: start; padding: var(--e7) var(--e4); }

/* 600 a 1023 px: coluna centralizada, abas com rótulo ao lado do ícone */
@media (min-width: 600px) {
  .celular { --borda: 24px; }
  .barra-app { padding-inline: max(4px, calc((100% - 720px) / 2 + 12px)); }
  .abas { grid-template-columns: repeat(4, minmax(0, 168px)); justify-content: center; gap: 0; }
  .linha a, .grupo-cab, .lado-cab { margin-inline: 0; padding-inline: 0; }
  .lista-busca { margin-inline: -12px; padding-inline: 12px; }
  .lista-busca { padding-block: 8px; }
  .lista-chips, .exemplos { margin-inline: 0; padding-inline: 0; }
  .titulo-grande { font-size: 34px; }
  .detalhe-cab .titulo-grande { font-size: 32px; }
}

/* transições entre telas: abrir entra da direita, voltar sai para a direita, trocar de aba só funde */
::view-transition-group(root) { animation-duration: 260ms; }
html[data-transicao="frente"]::view-transition-old(root) { animation: 260ms cubic-bezier(.2, .8, .2, 1) both tela-sai-esquerda; }
html[data-transicao="frente"]::view-transition-new(root) { animation: 260ms cubic-bezier(.2, .8, .2, 1) both tela-entra-direita; }
html[data-transicao="tras"]::view-transition-old(root) { animation: 240ms cubic-bezier(.2, .8, .2, 1) both tela-sai-direita; z-index: 1; }
html[data-transicao="tras"]::view-transition-new(root) { animation: 240ms cubic-bezier(.2, .8, .2, 1) both tela-entra-esquerda; }
html[data-transicao="aba"]::view-transition-old(root), html[data-transicao="aba"]::view-transition-new(root) { animation-duration: 140ms; }
@keyframes tela-entra-direita { from { transform: translateX(100%); } }
@keyframes tela-sai-esquerda { to { transform: translateX(-28%); opacity: .5; } }
@keyframes tela-sai-direita { to { transform: translateX(100%); } }
@keyframes tela-entra-esquerda { from { transform: translateX(-28%); opacity: .5; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Compartilhar vira só o ícone na barra: três rótulos não cabem em 360 px */
.barra-acoes .acao[data-acao="compartilhar"] { flex: 0 0 56px; padding: 0; }
.barra-acoes .acao[data-acao="compartilhar"] span {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.linha-meta:empty { display: none; }

/* Como denunciar, aba própria */
.denunciar { display: grid; gap: 28px; padding-top: var(--e3); }