/* Estruturas e os cortes de responsividade. Depende de tokens.css.
 * ---------------------------------------------------------------------------
 * DESKTOP PRIMEIRO. A regra sem consulta de mídia é a do desktop largo; as
 * consultas são todas `max-width`, reduzindo até o telefone. Quem escrever uma
 * tela nova começa pelo desktop e só depois corta.
 *
 *   base            ≥1200px   desktop largo
 *   max-width:1199  laptop    menos respiro, coluna mais estreita
 *   max-width: 899  empilha   uma coluna; a folha encosta na base
 *   max-width: 559  telefone  medianiz menor
 *
 * São estes três cortes e nenhum outro — e eles moram só neste arquivo. Tela
 * que peça um quarto é sinal de que a estrutura está errada, não a largura.
 * Entre os cortes tudo é fluido: porcentagem, `max-width` para conter,
 * `flex-wrap` para quebrar. A página nunca rola para o lado.
 */

/* Casca da página, ocupando a altura toda da janela. */
.tela {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* Medianiz e largura máxima do conteúdo. Toda tela usa esta classe; nenhuma
   inventa padding lateral próprio. */
.faixa {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--medianiz);
}

/* Conteúdo à esquerda, decisão à direita. Abaixo de 900 empilha, e a ordem do
   HTML vira a ordem na tela — por isso o conteúdo vem antes da decisão. */
.duas-colunas {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--respiro-colunas);
  padding: 48px var(--medianiz);
}

.duas-colunas > .coluna-conteudo {
  flex: 0 1 560px;
  max-width: 560px;
  padding: 0;
}

/* Folha de ações: no desktop é um cartão ao lado do conteúdo; no telefone
   encosta na base. Serve qualquer tela cuja decisão fique no rodapé. */
.folha {
  flex: 0 1 400px;
  max-width: 400px;
  background: var(--sf);
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra);
}

.folha__interno {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
}

/* ----------------------------------------------------------- corte 1199 --- */
@media (max-width: 1199px) {
  :root { --respiro-colunas: 56px }
  .duas-colunas > .coluna-conteudo { flex-basis: 520px; max-width: 520px }
}

/* ------------------------------------------------------------ corte 899 --- */
@media (max-width: 899px) {
  :root {
    --raio-cartao: 20px;
    --medianiz: 28px;
    --altura-botao: 54px;
  }

  .duas-colunas {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
  }

  .duas-colunas > .coluna-conteudo {
    flex: 1;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 0 var(--medianiz);
  }

  .faixa { max-width: 480px }

  .folha {
    flex: none;
    max-width: none;
    border-radius: 28px 28px 0 0;
    box-shadow: var(--sombra-folha);
  }

  .folha__interno {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 24px var(--medianiz) calc(28px + env(safe-area-inset-bottom, 0px));
  }
}

/* ------------------------------------------------------------ corte 559 --- */
@media (max-width: 559px) {
  :root { --medianiz: 24px }
}

/* ===========================================================================
 * Casca do app logado: trilho de navegação + área de conteúdo.
 * No desktop o trilho é uma coluna à esquerda; no telefone vira barra de abas
 * encostada na base. Serve todas as telas de B a E.
 * ======================================================================== */

.app { flex-direction: row; min-height: 100% }

/* Barra lateral do layout Web app v2.
 *
 * 260px, e dentro dela três coisas em ordem: a marca, o concurso ativo e a
 * navegação, com a conta no rodapé. O concurso mora aqui porque é contexto
 * global — vale para questões, feed, salas e parceiros ao mesmo tempo — e um
 * seletor repetido dentro de cada página faria parecer que são filtros
 * independentes. */
.trilho {
  width: 260px;
  flex-shrink: 0;
  box-sizing: border-box;
  background: var(--sf);
  border-right: 1px solid var(--ln);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;

  /* Fica parada enquanto a página rola. `sticky` e não `fixed`: a lateral
     continua ocupando a sua coluna no fluxo, então o conteúdo não precisa de
     uma margem esquerda inventada para não passar por baixo dela — e essa
     margem é justamente o que desalinha quando a largura muda.

     `align-self` é necessário: num flex row o item estica até a altura da
     linha, e um item da altura do pai não tem para onde deslizar, o que faz
     `sticky` não ter efeito nenhum. */
  align-self: flex-start;
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow-y: auto;
}

.trilho__marca {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tx);
  text-decoration: none;
}

.trilho__logo {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--pr);
  color: var(--on);
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.trilho__concurso {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--ln);
  background: var(--bg);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--tx);
  text-align: left;
  cursor: pointer;
}

.trilho__concurso:hover { border-color: var(--pr) }

.trilho__concurso-texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.trilho__concurso-rotulo { font-size: 11px; font-weight: 700; color: var(--t2) }

.trilho__concurso-nome {
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trilho__concurso-sub { font-size: 12px; color: var(--t2) }

.trilho__nav { display: flex; flex-direction: column; gap: 2px }

/* O submenu da seção em que você está. Mostrar os filhos de todas as seções ao
   mesmo tempo transformaria a lateral numa lista de dezoito links. */
.nav-sub {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 8px 19px;
  padding-left: 12px;
  border-left: 1px solid var(--ln);
}

.nav-sub__item {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--t2);
  text-decoration: none;
}

.nav-sub__item:hover { background: var(--bg); color: var(--tx) }

.nav-sub__item--atual {
  background: var(--soft);
  color: var(--pr);
  font-weight: 700;
}

.nav-item--secao { color: var(--pr); font-weight: 700 }

.trilho__conta {
  margin-top: auto;
  border-top: 1px solid var(--ln);
  padding: 14px 4px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.trilho__avatar {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background: var(--pr);
  color: var(--on);
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.trilho__quem { flex: 1; min-width: 0; display: flex; flex-direction: column }
.trilho__quem-nome {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trilho__quem-plano { font-size: 12px; color: var(--t2) }

.trilho__mais {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--t2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.trilho__mais:hover { background: var(--bg); color: var(--tx) }

/* Barra superior: onde você está. O título da página fica no corpo; aqui fica
   só o caminho, para quem chegou por link saber onde caiu. */
.topo {
  height: 64px;
  box-sizing: border-box;
  margin: -32px -40px 24px;
  background: var(--sf);
  border-bottom: 1px solid var(--ln);
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 16px;

  /* Com a lateral parada, um topo que some ao rolar deixa a casca pela
     metade: a busca e os avisos sairiam de alcance no meio de uma lista
     longa, que é exatamente quando se precisa deles. */
  position: sticky;
  top: 0;
  z-index: 5;
}

.topo__onde {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--t2);
}

.topo__sep { color: var(--t3) }
.topo__atual { color: var(--tx); font-weight: 700 }

.conteudo {
  flex: 1;
  min-width: 0;
  padding: 32px 40px 40px;
}

/* 1120px é a medida do layout Web app v2, e vale para todas as telas. Antes
   eram 1000, e cada tela que precisava de mais inventava a sua: o resultado
   era a mesma página com margens diferentes conforme o caminho que levou até
   ela. Texto corrido continua tendo a sua largura, em `--leitura`. */
.conteudo__interno {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ------------------------------------------------------------ corte 899 --- */
@media (max-width: 899px) {
  .app { flex-direction: column }

  .trilho {
    width: auto;
    order: 2;
    align-self: auto;
    height: auto;
    overflow: visible;
    position: fixed;
    /* `top: auto` NÃO é decoração: a regra de cima fixa a lateral no topo, e
       um elemento fixo com `top: 0` E `bottom: 0` estica pela janela inteira.
       Foi assim que a barra de abas virou uma coluna cobrindo o telefone. */
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    flex-direction: row;
    border-right: 0;
    border-top: 1px solid var(--ln);
    padding: 6px 0 calc(10px + env(safe-area-inset-bottom, 0px));
    gap: 0;
  }

  /* Na barra de abas cabem as seções e nada mais. `.trilho__rodape` nunca
     existiu — a classe é `.trilho__conta`, então o bloco da conta vinha junto
     esse tempo todo, e o seletor errado não acusava nada porque seletor que
     não casa com ninguém falha em silêncio. */
  .trilho__marca,
  .trilho__concurso,
  .trilho__conta { display: none }

  /* Os itens não são filhos diretos do trilho: moram em `.trilho__nav`, que é
     uma coluna. Virar o trilho para linha não virava os itens — eles ficavam
     empilhados dentro de uma barra alta, como uma lateral deitada no rodapé. */
  .trilho__nav {
    flex: 1;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
  }

  /* O submenu é da lateral, não da barra de abas: o W17 põe os filhos de uma
     seção só onde há espaço para dezoito linhas. Aqui a seção leva direto à
     primeira tela dela. */
  .nav-sub { display: none }

  .conteudo {
    order: 1;
    padding: 0 var(--medianiz) 0;
    /* espaço para a barra de abas não cobrir o fim da página */
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }

  .conteudo__interno { max-width: 560px; gap: 12px }
}

/* Telas de leitura: feed, conversas, listas de gente.
 *
 * Mil pixels servem a painel, não a texto. Numa lista de publicações o cartão
 * esticado deixa três linhas de texto nadando em branco, que foi o que a tela
 * do Feed mostrou. Aqui a coluna encolhe para largura de leitura e o cartão
 * volta a ter densidade. */
.conteudo__interno--leitura { max-width: 760px }

@media (max-width: 899px) {
  .conteudo__interno--leitura { max-width: 560px }
}

/* Busca e avisos na barra superior, como no W8. */
.topo__busca {
  width: 300px;
  max-width: 40%;
  height: 40px;
  box-sizing: border-box;
  border-radius: 20px;
  background: var(--bg);
  border: 1px solid var(--ln);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  color: var(--t2);
}

.topo__busca input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: var(--tx);
  outline: none;
}

.topo__sino {
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  border: 1px solid var(--ln);
  background: var(--sf);
  color: var(--tx);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.topo__sino:hover { background: var(--bg) }

/* Gêmeos do concurso e da conta, para o telefone.

   Acima de 899px a lateral já tem os dois, e repetir no topo seria dizer duas
   vezes a mesma coisa na mesma tela. Abaixo, a lateral virou barra de abas e
   não há onde pôr nada além das seções — então aparecem aqui. São gatilhos
   dos MESMOS menus; não há lógica duplicada, só um segundo botão. */
.topo__concurso,
.topo__conta { display: none }

@media (max-width: 899px) {
  .topo__concurso {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 1 auto;
    min-width: 0;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--ln);
    border-radius: 18px;
    background: var(--sf);
    color: var(--tx);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
  }

  .topo__concurso-nome {
    max-width: 14ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topo__conta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 18px;
    background: var(--pr);
    color: var(--on);
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
  }

  /* Com quatro coisas na barra, o caminho ("Comunidade › Feed") é o primeiro a
     sair: o título da página, logo abaixo, diz a mesma coisa. */
  .topo__onde { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
  .topo { gap: 8px }
}

.topo__ponto {
  position: absolute;
  top: 8px;
  right: 9px;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: var(--ac);
}

/* Rótulo que só o leitor de tela lê. */
.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 899px) {
  /* A barra de cima sangra para fora da medianiz do conteúdo, como a barra de
     abas faz embaixo. Sem a margem negativa ela ficava 24px encolhida de cada
     lado — uma faixa branca com borda flutuando no meio da página, enquanto a
     barra de baixo ia de ponta a ponta. Cabeçalho e rodapé têm de ter a mesma
     largura: a da janela. */
  .topo {
    margin: 0 calc(-1 * var(--medianiz)) 16px;
    padding: 0 var(--medianiz);
  }

  .topo__busca { display: none }
}