/* Controles de lista — o alternador de leitura e a busca. Não pertencem a uma
   tela só: o alternador serve a fila, as abas da Agenda e o seletor de tema do
   /styleguide; a busca serve a fila e os catálogos. */

/* Alternador — a mesma lista noutro corte, não navegação. A pista embutida
   agrupa o par: são duas faces de um interruptor, não dois botões soltos. */
.view-toggle {
  display: inline-flex; gap: 4px; margin-bottom: 22px;
  background: var(--surface-2); border-radius: var(--r); padding: 3px;
}

.vt-btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center;
  border: 0; cursor: pointer; border-radius: 3px; background: transparent;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 11px; color: var(--ink-muted);

  /* aria-pressed quando é botão, aria-current quando é link para o mesmo
     dado noutro corte — a pista visual é a mesma.

     A pastilha é um retângulo próprio atrás do rótulo, não o fundo do botão:
     o que desliza de uma aba para a outra é só cor, sem levar texto junto —
     é daí que vinha o rastro de dois rótulos sobrepostos. O isolate existe
     para o z-index negativo parar dentro do botão e não afundar atrás do
     fundo da barra. */
  &:is([aria-pressed="true"], [aria-current]) {
    color: var(--accent-ink);

    &::before {
      content: ""; position: absolute; inset: 0; z-index: -1;
      background: var(--accent); border-radius: 3px;
    }
  }
}

/* O nome só vale na troca de abas, e quem diz isso é o clique — ver
   application.js. Um view-transition-name RETIRA o elemento do retrato do
   ancestral e o promove a retrato irmão, pintado depois do root: na travessia
   a pastilha saía de dentro da folha e ficava boiando sobre a página que
   chegava, em vez de ir embora coberta por ela. E não dava para desfazer isso
   no CSS da página que chega: quando o `data-nav` é posto, em
   turbo:before-render, o retrato da página que sai já foi tirado — com nome.
   Por isso a decisão é tomada no clique, que acontece antes de tudo. */
:root[data-pill] .vt-btn:is([aria-pressed="true"], [aria-current])::before {
  view-transition-name: vt-pill;
}

/* A pastilha desliza de uma aba para a outra em vez de pular de lugar. Quem
   interpola é o navegador: a pastilha ativa tem nome de view transition, e o
   mesmo nome reaparece do outro lado na página seguinte. Nenhuma largura é
   medida e não há JavaScript nenhum nisto.

   A página não participa de nada: o retrato antigo sai de cena na hora, o
   novo entra pronto e a caixa do root não interpola. Sem as três coisas as
   linhas ficavam paradas até a pastilha chegar, e as duas abas, que têm
   alturas diferentes, ainda escorregavam uma para dentro da outra. */
::view-transition-group(root) { animation: none; }

::view-transition-old(root) { display: none; }

::view-transition-new(root) { animation: none; mix-blend-mode: normal; opacity: 1; }

/* O block-size é obrigatório. No padrão, o retrato entra com altura
   automática e guarda a proporção do tamanho antigo: como as duas abas têm
   larguras diferentes, ele cresceria em altura junto com a largura e vazaria
   da barra — era o retângulo azul gordo atravessando a tela. Preso em 100%
   com object-fit: fill, o retrato é exatamente a caixa que desliza. */
::view-transition-old(vt-pill), ::view-transition-new(vt-pill) {
  animation: none; block-size: 100%; object-fit: fill;
}

::view-transition-group(vt-pill) { animation-duration: .22s; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(vt-pill) { animation: none; }
}

/* A travessia entre a fila e a Agenda. As duas telas são vizinhas num eixo
   horizontal, e trocar de tela é uma empurrar a outra para fora do quadro.

   Na VOLTA quem desliza é o root, e não a folha — é o empurrão que o app tem
   desde sempre, e está aqui embaixo. A IDA é outra coisa: ali quem viaja é o
   papel, e a razão de dar certo agora está no bloco da folha, mais adiante.

   Dar nome à folha parecia mais cirúrgico e estava errado por dois motivos, os
   dois visíveis a olho nu: as duas telas têm alturas muito diferentes — a
   Agenda é várias vezes mais alta que uma fila curta — e o navegador
   interpolava essa diferença, esparramando o retrato que saía pela tela
   inteira enquanto ele encolhia; e a pastilha, que tem nome próprio, escapava
   do retrato da folha e ficava parada no ar. O retrato do root tem o tamanho
   da viewport nos dois lados: não há o que interpolar, e nada escapa dele.

   `[data-nav]` é a marca posta por application.js, que compara a posição das
   duas telas no eixo. Sem ela valem as três regras acima e a página fica
   parada, que é o que a troca de abas dentro da Agenda deve fazer. Essa é a
   única coisa que o CSS não deduz sozinho: a travessia e a troca de abas
   CHEGAM NA MESMA PÁGINA, e uma view transition só enxerga a página que chega.

   A direção vem no valor da marca, e não de um :has() da calha da página que
   chega. Enquanto o eixo tinha duas telas o :has() bastava — a calha era
   única, e a ausência do outro lado dizia onde se estava. Com Pacientes o eixo
   ficou com três, a Agenda passou a ter as duas calhas e as duas regras
   casavam ao mesmo tempo: a direção virava a última declarada, não a da
   viagem.

   Os pseudo-elementos vêm COLADOS ao seletor da raiz. Com um espaço no meio a
   regra simplesmente não casa, e a transição cai no cross-fade padrão do
   navegador sem uma linha de erro no console. */
/* Só a volta. A ida não anima o root: lá quem viaja é a folha, e o resto da
   tela fica parado.

   A folha entra nesta conta junto com o root, e não por capricho de simetria:
   ela tem nome de view transition por causa da ida, e nome RETIRA o elemento
   do retrato do root nas DUAS direções. Sem a citar aqui, a volta empurraria o
   fundo e as calhas com o papel parado no meio.

   Quatro seletores escritos por extenso: `:is()` não aceita pseudo-elemento, e
   agrupá-los ali dentro derruba a regra inteira sem erro no console — o mesmo
   silêncio que o espaço antes do `::` provoca. */
:root[data-nav="esq"]::view-transition-old(root),
:root[data-nav="esq"]::view-transition-new(root),
:root[data-nav="esq"]::view-transition-old(folha),
:root[data-nav="esq"]::view-transition-new(folha) {
  display: block;
  animation-duration: .22s;
  animation-timing-function: cubic-bezier(.2, .7, .3, 1);
  animation-fill-mode: both;
  mix-blend-mode: normal;
}

:root[data-nav="esq"]::view-transition-old(root),
:root[data-nav="esq"]::view-transition-old(folha) { animation-name: pagina-sai-dir; }

:root[data-nav="esq"]::view-transition-new(root),
:root[data-nav="esq"]::view-transition-new(folha) { animation-name: pagina-entra-esq; }

/* O teto não viaja em direção nenhuma. A travessia é do TRABALHO, e a barra é
   a mesma peça nas duas telas: vê-la deslizar junto era a sala inteira se
   mexendo por uma troca de papel na mesa.

   Tirar a barra do movimento é dar nome a ela, pelo mesmo mecanismo que a
   pastilha usa lá em cima: um `view-transition-name` RETIRA o elemento do
   retrato do root e o promove a retrato irmão, pintado DEPOIS dele. Os dois
   efeitos servem — a barra sai do que desliza, e passa a cobrir o buraco que
   deixou no retrato, que é transparente. Ela é opaca (`--surface` em
   barra.css), então a folha entra por baixo dela, que é o que a régua embaixo
   da barra já promete.

   E `animation: none` no grupo: o nome sozinho ainda faria a barra fazer o
   cross-fade padrão entre os dois retratos dela. Como a barra das duas telas é
   idêntica, o que se veria é ela piscar enquanto tudo embaixo se move.

   Sem `[data-nav]`: o nome pode valer sempre. A troca de abas não anima o
   root, então a barra nomeada e parada não muda nada lá. */
.barra { view-transition-name: barra; }

::view-transition-group(barra) { animation: none; }

/* Na IDA, quem viaja é a FOLHA — o papel —, e não a tela. A mesa fica parada:
   fundo, calhas e barra no lugar, e só o documento entra deslizando por cima
   do que estava aberto. Varrer a janela inteira a cada clique era o que
   cansava; dentro da mancha da folha o mesmo gesto custa 1040px, e o olho não
   persegue nada até a beira da tela.

   É a rota que o comentário do topo dá como errada, e ela funciona agora
   porque o que travava não era o nome — era o GRUPO. Ele interpola posição e
   tamanho entre os dois retratos, e era essa interpolação que esticava a folha
   que saía quando as alturas eram diferentes. `animation: none` no grupo tira
   isso, e a diferença de altura deixa de existir como problema: a largura das
   duas folhas é a MESMA (1040px de teto em folha.css), e com `inline-size:
   100%` e altura automática cada retrato fica na proporção dele. A pastilha
   também não escapa: ela só ganha nome na troca de abas, nunca na travessia.

   A viagem é `100%` do próprio retrato, que é a largura da folha: a que chega
   nasce encostada na borda direita da folha aberta — que é onde a vizinha está
   estacionada na calha — e caminha até o lugar. É a página da porta entrando
   pela porta.

   `mix-blend-mode: normal` e `opacity: 1` não são enfeite: o padrão de um par
   nomeado é cross-fade em `plus-lighter`, e sem desligar os dois a folha que
   chega atravessaria a que fica em vez de cobri-la. A desaceleração forte é o
   que tira o arrasto — quase todo o caminho acontece no primeiro terço do
   tempo, então a folha chega antes de a gente terminar de persegui-la e o
   resto é assentamento. */
.folha { view-transition-name: folha; }

::view-transition-group(folha) {
  overflow: hidden;
  animation-duration: .26s;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
}

:root[data-nav="dir"]::view-transition-old(folha),
:root[data-nav="dir"]::view-transition-new(folha) {
  animation-duration: .26s;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
  animation-fill-mode: both;
  mix-blend-mode: normal;
  opacity: 1;
}

/* A que fica não anda nada, mas precisa de animação COM NOME: sem uma, o
   retrato antigo não tem o que o segure pelos .26s e o navegador o descarta
   antes de a folha de cima chegar. */
:root[data-nav="dir"]::view-transition-old(folha) { animation-name: folha-fica; }
:root[data-nav="dir"]::view-transition-new(folha) { animation-name: folha-entra-dir; }

/* 64px, e não a largura da tela: em 220ms uma travessia inteira vira borrão, e
   alongar a duração atrasa o conteúdo — dentro de uma visita o Turbo só troca
   o conteúdo fresco depois que a animação termina. O empurrão curto diz
   "vizinhas" sem cobrar latência. */
@keyframes pagina-sai-dir   { to   { translate:  64px 0; opacity: 0; } }
@keyframes pagina-entra-esq { from { translate: -64px 0; opacity: 0; } }

/* a ida: a folha que chega atravessa a própria largura, a que fica não sai do
   lugar e é coberta */
@keyframes folha-fica       { to   { translate: 0; } }
@keyframes folha-entra-dir  { from { translate: 100% 0; } }

/* contagem que acompanha o rótulo da aba */
.vt-n { font-family: var(--mono); font-size: 10px; opacity: .75; margin-left: 6px; }

/* Busca — um campo só, largura inteira, sem rótulo: o placeholder diz tudo. */
.search-field {
  margin-bottom: 18px;

  & input {
    width: 100%;
    font-family: var(--sans); font-size: 14.5px; color: var(--ink);
    background: var(--surface-2); border: 1px solid transparent;
    border-radius: var(--r); padding: 10px 14px;

    &::placeholder { color: var(--ink-faint); }

    &:focus { outline: none; background: var(--surface); border-color: var(--accent); }
  }
}