/* Os TAMANHOS e PESOS saem de styles/tokens.css.

   Antes cada regra cravava o seu: calc(11.5px * var(--fs)), 12.5, 13.5, 14.5,
   15.5... doze tamanhos distintos e font-weight 700, 800 e 900 espalhados. O
   efeito e que nada se destacava, porque tudo se destacava, e mudar a escala
   exigia caçar valor por valor. Agora a escala e uma so, compartilhada com as
   telas de conta. */
/* Estilo do app GPlaybacks.
 *
 * Estava dentro de um <style> no index.html. Saiu porque a CSP do worker manda
 * style-src-elem 'self': bloco inline nao executa, e a pagina chegava sem
 * estilo nenhum. Ver gplay/main.py e CLAUDE.md secao 7.
 *
 * Nao reintroduza <style> no HTML: o teste test_higiene.py falha de proposito.
 */
/* A paleta mora em styles/tokens.css, carregado ANTES desta folha pelo
   index.html. Aqui ficam apenas os APELIDOS que o codigo desta pagina ja usa,
   apontando para os tokens compartilhados.

   Antes este bloco repetia os mesmos hex do auth.css. Duas copias divergem, e
   divergiram: as telas de conta ganharam acento chapado e escala de raio
   enquanto o app seguiu com gradiente em tudo. */
:root{
  --card2:var(--input);
  --line:var(--border); --line2:var(--border-strong);
  --text:var(--foreground); --muted:var(--muted-foreground); --muted2:var(--subtle-foreground);
  --g1:var(--brand-1); --g2:var(--brand-2); --g3:var(--brand-3);
  --g4:var(--brand-4); --g5:var(--brand-5);
  --grad:var(--gradient);
  --danger:var(--destructive);
  --r:var(--radius-xl);
}

/* ============ AS CORES PROPRIAS DO APP, NOS DOIS TEMAS ============

   Toda cor desta folha sai daqui ou de styles/tokens.css. Nenhuma regra abaixo
   escreve hex ou rgba(): o teste test_tema.py reprova. Era o que impedia um
   tema claro - havia 170 cores escritas a mao, quase todas pensadas para fundo
   preto, e cada uma teria que ser achada de novo.

   Os nomes dizem o PAPEL, e nao a cor: --noite e "a superficie do que toca",
   o preto palco erguido no escuro e o creme claro no claro. Os vidros sao canais RGB soltos,
   usados como rgb(var(--vidro) / var(--vidro-alfa, .94)), porque cada peca escolhe a propria
   transparencia.

   O ESCURO E O PADRAO e e identico ao visual de antes do tema claro. O claro so
   vale fora do palco (ver a secao 1b de tokens.css). */
:root{
  /* O fundo da tela e o preto palco da marca, e o de fora um degrau abaixo.
     Cartao mais escuro so parece mais escuro se o que esta atras dele descer
     tambem. */
  --bg:#07060B;
  --bg2:#050408;
  --fundo-rgb:7 6 11;                 /* o mesmo --bg, para o veu do fim da lista */

  /* A superficie do que toca (barra do player, quadro das listas) e, um degrau
     abaixo, a de leitura (cartoes de musica, painel de letra). O mesmo preto
     com um fio de violeta, erguido. */
  --noite:linear-gradient(180deg, #15131B 0%, #0E0D13 100%);
  --noite-funda:linear-gradient(180deg, #0F0E14 0%, #08070C 100%);
  --noite-borda:#25232C;
  --item-hover:linear-gradient(180deg, #16141C 0%, #0E0D14 100%);
  --lista-solta:linear-gradient(180deg, #0C0B11 0%, #07060B 100%);
  --atual-fundo:linear-gradient(#1A1720, #121017);
  --atual-fundo-hover:linear-gradient(#1F1C26, #16141C);
  --atual-hover:#1A1720;

  /* Vidros: o player e o menu flutuantes, a barra de abas, os botoes do palco. */
  --vidro:19 17 25;
  --vidro-fundo:14 13 19;
  --vidro-escuro:11 10 15;
  --vidro-claro:22 20 28;
  --vidro-nav:11 10 15;
  --vidro-palco:8 7 12;

  /* A linha que esta sendo cantada e o trecho que ja tocou: o coral da marca,
     a mesma regra da onda do logo. O alto da onda que atravessa a linha e o
     mesmo coral com mais luz, e nao branco. */
  --cantando:#FF6B5B;
  --cantando-onda:#FFC2B9;
  --cantando-meio:#FF9488;
  --cantando-halo:rgba(255,107,91,.34);

  /* Video e miniatura: fundo de cinema nos dois temas. */
  --video:#000;

  /* Pecas que so existem no palco, que e sempre escuro. */
  --palco-preto:0 0 0;
  --palco-play:rgba(244,241,234,.94);
  --palco-pastilha-texto:#07060B;
}
:root[data-tema="claro"]:not([data-palco]){
  --bg:var(--surface);
  --bg2:var(--background);
  --fundo-rgb:244 241 234;

  --noite:linear-gradient(180deg, #FFFDF9 0%, #FAF8F3 100%);
  --noite-funda:#FFFDF9;
  --noite-borda:#E3DED4;
  --item-hover:#F8F5EF;
  --lista-solta:#FFFDF9;
  --atual-fundo:linear-gradient(#FFFDF9, #FBF4F0);
  --atual-fundo-hover:linear-gradient(#FDF8F4, #F7EEE9);
  --atual-hover:#F7EEE9;

  --vidro:255 253 249;
  --vidro-fundo:255 253 249;
  --vidro-escuro:255 253 249;
  --vidro-claro:255 253 249;
  --vidro-nav:255 253 249;
  /* Vidro claro sobre o veu escuro de uma folha vira cinza sujo: no claro todos
     os vidros ficam quase opacos. No escuro --vidro-alfa nao existe e cada peca
     usa a transparencia que sempre teve (o segundo valor do var()). */
  --vidro-alfa:.92;

  /* Sobre creme o coral puro nao le como letra: a linha cantada desce para o
     coral escuro (o --accent-text), e o alto da onda volta ao coral. */
  --cantando:#A8321F;
  --cantando-onda:#FF6B5B;
  --cantando-meio:#D24A36;
  --cantando-halo:rgba(255,107,91,.16);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%; overscroll-behavior:none}
body{
  position:fixed; inset:0;     /* trava o body: iOS nao arrasta a pagina inteira, so rola o .screen */
  background:var(--bg2); color:var(--text);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  overflow:hidden;
}
/* Luz ambiente quase imperceptivel, e chapada.
   Eram dois circulos de 420px com filter:blur(120px), fixos. Em superficie
   neutra aquilo lia como mancha colorida, e o blur e uma camada de composicao
   permanente que o celular paga em toda rolagem, num app que roda no palco com
   audio decodificando junto. */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(80% 50% at 20% -10%, rgb(var(--luz) / .028), transparent 70%),
    radial-gradient(70% 45% at 95% 105%, rgb(var(--luz) / .020), transparent 70%);
}

#app{
  position:relative; width:100%; max-width:434px;
  /* A ALTURA VEM DO CORPO, E NAO DE `dvh`.
     O `body` e `position:fixed; inset:0`: ele JA e exatamente a area visivel,
     seja ela qual for - com barra de endereco, sem ela, com barra do sistema por
     baixo. `100dvh` e uma segunda medida da mesma coisa, feita por outro caminho,
     e quando as duas discordam sobra uma tira preta no pe: o app acaba antes do
     corpo. `100%` de um pai de altura definida nao tem como discordar dele. */
  height:100%;
  margin:0 auto; background:var(--bg); overflow:hidden;
}
/* Telas medias COM MOUSE: moldura centralizada, ainda em coluna unica.
   Faixa estreita de proposito, entre 520 e 1023: e a janela lado a lado, onde
   uma barra lateral fixa roubaria a largura que o conteudo precisa. */
@media (min-width:520px) and (max-width:1023.98px) and (hover:hover) and (pointer:fine){
  #app{height:min(880px,94dvh); margin-top:max(12px,calc((100dvh - min(880px,94dvh))/2));
    border-radius:var(--radius-3xl); border:1px solid var(--line2);
    box-shadow:var(--shadow-lg)}
}

/* A barra lateral nao existe no celular. Esta regra fica ANTES da media
   query de proposito: as duas tem a mesma especificidade (0,1,0), entao quem
   vence e a ultima declarada. Colocada depois, ela desligava a barra tambem no
   desktop. Este arquivo nao usa @layer, entao a ordem E a regra. */
.app-nav{display:none}


/* aparelho de TOQUE (celular, tablet, notebook com tela sensivel): ocupa a tela inteira.
   Sem isso o iPad mostrava o app numa coluna estreita no meio da tela. */
@media (pointer:coarse){
  /* AQUI ERA A TIRA PRETA, e nao la em cima.
     A regra base do `#app` ja media pelo corpo; ESTA, que e a que vale no
     celular, continuou medindo por `100dvh` - e como a ultima declarada, era ela
     quem mandava no aparelho. Por isso a tela "encheu" no computador e nao mudou
     nada no telefone: eram duas regras, e so uma foi corrigida.
     `100dvh` e a janela contada pelo navegador; o `body` e `position:fixed;
     inset:0`, contado pelo bloco que segura o que e fixo. As duas quase sempre
     dizem o mesmo numero, e quando discordam - barra de endereco recolhendo,
     barra do sistema por baixo - sobra exatamente aquela faixa morta no pe, com
     a tab, o player e a nevoa parados na borda da medida errada.
     Uma medida so, e nao ha o que discordar. */
  #app{max-width:none; width:100%; height:100%; margin:0;
       border:0; border-radius:0; box-shadow:none}
}

/* ---------------- telas ---------------- */
.screen{
  position:absolute; inset:0; overflow:hidden;   /* inativa nao rola: 1 scroller vivo por vez */
  /* respeita a area segura: nada encosta no notch em cima nem na barra de gestos embaixo */
  padding:calc(20px + var(--sat)) calc(20px + var(--sar)) calc(44px + var(--sab)) calc(20px + var(--sal));
  scrollbar-width:none;
  opacity:0; transform:translateX(26px); pointer-events:none;
  visibility:hidden;   /* tira a tela inativa do hit-test do iOS (opacity:0 NAO tira; travava o scroll sobre os cards) */
  transition:opacity .26s ease, transform .26s ease, visibility 0s linear .26s;
}
.screen::-webkit-scrollbar{display:none}
.screen.active{
  opacity:1; transform:none; pointer-events:auto; visibility:visible;
  transition:opacity .26s ease, transform .26s ease;
  overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y;
  /* SEM -webkit-overflow-scrolling:touch: no iOS moderno o momentum ja e nativo,
     e o modo legado trava a rolagem ao tocar em elementos compostos */
}

/* ---------------- tipografia / util ---------------- */
/* Wordmark em TEXTO, nao em gradiente animado.
   O simbolo (o PNG) guarda a cor da marca; repetir as cinco cores na palavra,
   em toda tela, com animacao infinita, era o gesto que mais fazia a interface
   parecer template. E custava uma animacao permanente de background-position
   num app que roda com audio decodificando. */
.gtext{ color: var(--foreground); }
/* O @keyframes gtextflow e a media query que o desligava sairam junto com a
   animacao: keyframe sem quem o use e peso morto que o proximo leitor tenta
   entender. */
.h-title{
  font-size:var(--text-2xl); font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-brand); line-height:var(--leading-tight);
}
/* Titulo de tela e o degrau mais alto de uma tela de ferramenta, e antes ele
   vinha em --text-xl com o mesmo peso do titulo de cartao: dois niveis de
   hierarquia empatados. O contraste de escala e o que organiza a leitura. */
.sub{color:var(--muted); font-size:var(--text-sm); line-height:var(--leading-normal)}
.center{text-align:center}
.txt-warn{color:var(--warning); font-weight:var(--weight-semibold)}

/* Servidor sem fonte da nuvem: some a busca e a playlist, e o importar arquivo
   passa a ser o caminho unico. Esconder no CSS, e nao remover do HTML, e o que
   permite religar mudando uma variavel de ambiente, sem tocar em codigo. */
body.sem-nuvem #cardYT,
/* O que so existe com a nuvem ligada (busca, playlist) e o que so existe sem
   ela (arquivo como caminho principal). */
body.sem-nuvem .so-nuvem{display:none !important}
body:not(.sem-nuvem) .so-arquivo{display:none !important}
/* ---------------- bloco de erro ----------------
   O toast some em 3 s e serve para confirmacao ("salvo", "copiado"). Falha de
   processamento nao cabe ali: a pessoa esperou minutos olhando uma barra, e se
   a resposta desaparece ela nao sabe se deu errado, se ainda roda, ou se
   perdeu o aviso. Este bloco fica ate ser fechado, tem a cor de recusa e
   carrega o codigo e a hora do erro, que e o par que encontra a linha no log
   do servidor. */
.erro-bloco{
  margin-bottom:var(--space-5); padding:var(--space-4);
  background:var(--destructive-bg);
  border:1px solid var(--destructive-border); border-radius:var(--radius-lg);
}
.erro-topo{display:flex; align-items:flex-start; gap:var(--space-3)}
.erro-ic{
  flex-shrink:0; width:34px; height:34px; border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  background:var(--destructive-bg); border:1px solid var(--destructive-border);
  color:var(--destructive);
}
.erro-ic svg{width:19px; height:19px}
.erro-corpo{flex:1; min-width:0}
.erro-titulo{
  display:block; color:var(--foreground);
  font-size:var(--text-md); font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-tight);
}
.erro-msg{
  margin-top:var(--space-1); color:var(--muted);
  font-size:var(--text-sm); line-height:var(--leading-normal);
}
/* Codigo e horario em fonte tabular: e o que se compara com o log, e leitura
   de identificador precisa de largura fixa. */
.erro-tec{
  margin-top:var(--space-2);
  font-family:var(--font-mono); font-size:var(--text-xs);
  color:var(--subtle-foreground); word-break:break-all;
}
.erro-acoes{
  display:flex; gap:var(--space-2); margin-top:var(--space-4);
  padding-left:calc(34px + var(--space-3));
}
@media (max-width:520px){ .erro-acoes{padding-left:0} }

/* Abertura de uma tela interna: titulo mais legenda, no mesmo bloco.
   Mesmo padrao da tela de entrar, que e o que faz a pagina comecar em algum
   lugar em vez de emendar direto no primeiro cartao. */
.tela-hero{margin-bottom:var(--space-6)}
.tela-sub{
  margin-top:var(--space-2); max-width:60ch;
  color:var(--muted); font-size:var(--text-md); line-height:var(--leading-normal);
  text-wrap:pretty;
}

/* Onde comeca e acaba a coluna do app dentro da janela.
   `position:fixed` mede da JANELA, e a janela nem sempre e o app: numa tela de
   mesa estreita ele e uma coluna de 434px no meio. Isto da a quem usa `fixed` a
   mesma borda que o resto do app tem. Em aparelho de toque e em tela larga o app
   ocupa tudo, e ai a borda e zero. */
:root{--app-borda:max(0px, calc((100vw - 434px) / 2))}
@media (pointer:coarse){ :root{--app-borda:0px} }
@media (min-width:1024px){ :root{--app-borda:0px} }

/* ============ `hidden` MANDA, SEMPRE ============

   O atributo `hidden` do HTML e so um `display:none` de folha de estilo do
   navegador - QUALQUER `display` escrito aqui vence ele, sem aviso. Tres pecas
   deste app cairam nisso: a folha do repertorio no palco (`display:flex` para
   empilhar cabecalho e lista) ficava sempre aberta, cobrindo a metade de baixo
   da tela e o proprio botao que a abre; e os dois reguladores de rolagem
   (`.rp-rolagem`, `.stage-rolagem`) apareciam em musica que nao precisa deles.

   Em todos os casos o JS mexe em `.hidden`, o teste confere `.hidden`, e a tela
   mostrava outra coisa - o tipo de defeito que ninguem acha lendo o codigo,
   porque o codigo esta certo.

   `!important` aqui e o uso legitimo dele: esta linha nao e uma opiniao de
   estilo, e a semantica do atributo. */
[hidden]{display:none !important}

/* Foco visivel, um so desenho para o app inteiro.
   :focus-visible, e nao :focus: o anel aparece para quem navega por teclado e
   nao pisca a cada toque no celular. Sem isto, o unico retorno de foco eram as
   bordas roxas soltas que sobraram do tema antigo em alguns campos. */
:where(button, a, input, select, textarea, [tabindex]):focus-visible{
  outline:2px solid var(--ring);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}

/* ---------------- header ---------------- */
.header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:var(--space-6); min-height:40px;
}
.brand{display:flex; align-items:center; gap:var(--space-2)}
/* O LOGO INTEIRO, a 28px de altura: da 120px de largura, que e o minimo da
   marca para o logo completo (abaixo disso, so o simbolo). Altura fixa e
   largura automatica, para nunca esticar o desenho. */
.marca-logo{height:28px; width:auto; flex-shrink:0; display:block}
.brand span{
  font-weight:var(--weight-semibold); font-size:var(--text-lg);
  letter-spacing:var(--tracking-tight);
}
/* O atalho de conta e AFORDANCIA, nao destaque: cinza que acende no toque.
   Estava em azul da marca, e um icone colorido no canto superior competia com
   o botao de acao principal logo abaixo, que e o unico lugar da tela que
   deveria puxar o olho. */
.avatar{
  width:36px; height:36px; border-radius:var(--radius-md); background:transparent;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; border:none; padding:0; color:var(--muted);
  transition:background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.avatar svg{ width:20px; height:20px; }
.avatar:hover{ background:var(--card); color:var(--text) }
.avatar:active{ transform:scale(.92) }
.back{
  display:flex; align-items:center; gap:4px; background:none; border:none; color:var(--muted);
  font-family:inherit; font-size:var(--text-base); font-weight:var(--weight-medium); cursor:pointer; padding:8px 10px 8px 0;
}
.back svg{width:20px;height:20px}
.back:active{opacity:.6}

/* ---------------- cards ---------------- */
/* Raio do token, nao 22px cravado. Um cartao de 22px ao lado de um campo de
   14px e de um botao de 8px sao tres linguagens de forma na mesma tela, e e
   isso que faz uma interface parecer montada por partes. */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-xl);
  padding:var(--space-5); margin-bottom:var(--space-4);
}
.card-title{
  display:flex; align-items:center; gap:var(--space-3);
  font-size:var(--text-md); font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-tight); margin-bottom:var(--space-4);
}
/* Caixa neutra com traco em currentColor. Era um quadrado com gradiente e o
   SVG pintado por url(#gstroke): duas fontes de cor num icone de 16px, que a
   essa altura era so ruido colorido em cima de superficie neutra. */
.card-title .ic{
  width:32px; height:32px; border-radius:var(--radius-md);
  background:var(--card-elevated); border:1px solid var(--border);
  color:var(--muted); display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.card-title .ic svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2}

/* ---------------- inputs ---------------- */
.field{
  width:100%; background:var(--input); border:1px solid var(--border); border-radius:var(--radius-lg);
  color:var(--text); font-family:inherit; font-size:var(--text-base); padding:12px var(--space-4);
  outline:none;
  transition:border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.field::placeholder{color:var(--muted2)}
.field:hover{border-color:var(--border-hover)}
/* Foco por ANEL, do token, nao por borda roxa.
   Era `border-color:var(--g3)`: uma cor de marca que nao existe mais em lugar
   nenhum da interface aparecia so aqui, e so no campo focado. Anel neutro
   sobre borda mais clara diz a mesma coisa com o vocabulario do resto. */
.field:focus{
  border-color:var(--ring);
  box-shadow:0 0 0 3px var(--ring-halo);
}
.field:focus-visible{outline:none}
select.field{appearance:none}
.row{display:flex; gap:10px}
.row>*{flex:1}

/* ---------------- botoes ---------------- */
/* Mesmo contrato de botao das telas de conta (web/styles/auth.css).
   Raio do token, nao pilula: pilula de 999px ao lado de cartao de 18px sao
   duas linguagens de forma na mesma tela. E sem halo colorido: o brilho de
   20px competia com o proprio rotulo e era a assinatura mais reconhecivel de
   tema pronto. Fica o fio de luz na quina, que le como material. */
.btn{
  display:flex; align-items:center; justify-content:center; gap:var(--space-2);
  min-height:48px; border-radius:var(--radius-lg); cursor:pointer; font-family:inherit;
  font-size:var(--text-base); font-weight:var(--weight-medium); padding:13px var(--space-5); color:var(--text);
  background:var(--card-elevated); border:1px solid var(--line2);
  transition:transform var(--duration-fast) var(--ease), background var(--duration) var(--ease),
             border-color var(--duration) var(--ease), opacity var(--duration) var(--ease);
  white-space:nowrap;
}
.btn svg{width:17px;height:17px;flex-shrink:0}
.btn:hover{border-color:var(--border-hover)}
.btn:active{transform:scale(.97)}
.btn.primary{
  background:var(--accent); border-color:transparent; color:var(--accent-foreground);
  box-shadow:var(--highlight-strong), var(--shadow-sm);
}
.btn.primary:hover{background:var(--accent-hover)}
.btn.primary:active{background:var(--accent-active)}
.btn.ghost{background:transparent}
.btn.danger{color:var(--danger); border-color:var(--destructive-border); background:transparent}
.btn.danger:hover{background:var(--destructive-bg)}
/* Desabilitado sem pointer-events:none, que tira o cursor de recusa e prende o
   teclado num alvo que nao responde. :disabled ja bloqueia o clique sozinho. */
.btn:disabled{opacity:.45; cursor:not-allowed; box-shadow:none; transform:none}
/* Salvar e uma acao primaria como qualquer outra, e usa o botao primario.
   Era um gradiente verde com halo verde: a unica peca da interface com cor
   propria, sem que "salvar" seja mais perigoso nem mais importante que
   "buscar" ou "entrar". Verde aqui nao informava nada, so chamava atencao. */
.btn.b-save{
  background:var(--accent); border-color:transparent; color:var(--accent-foreground);
  box-shadow:var(--highlight-strong), var(--shadow-sm);
}
.btn.b-save:hover{background:var(--accent-hover)}
.btn.b-save:active{background:var(--accent-active)}
.btn.small{padding:9px var(--space-3); min-height:36px; font-size:var(--text-sm)}
/* ---------------- abertura da home ---------------- */
/* Duas linhas: quem e voce, e o que se faz aqui. E o unico lugar do app com
   tipo em escala de display, e e de proposito: uma tela precisa de um ponto
   de entrada para o olho, senao ela comeca em qualquer lugar. */
.hero{margin-bottom:var(--space-6)}
.hero-ola{
  font-size:var(--text-3xl); font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-brand); line-height:var(--leading-tight);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.hero-sub{
  margin-top:var(--space-2); color:var(--muted);
  font-size:var(--text-md); line-height:var(--leading-normal);
}

.home-cta-row{margin-bottom:var(--space-5); position:relative}
/* mini-barra de progresso (só ao criar) - fica na folga, sob o botao Criar.
   Era `calc(50% - 5px)` porque "Todas as musicas" dividia a linha com ele; com a
   linha inteira do Criar, meia largura viraria uma barra pela metade. */
.mini-bar{position:absolute; left:0; bottom:-10px; width:100%; height:5px;
  border-radius:var(--radius-full); background:var(--line2); overflow:hidden; display:none}
.mini-bar.on{display:block}
/* Progresso na cor do acento, igual a barra grande. Era laranja da marca:
   duas cores diferentes para a mesma informacao em duas telas. */
.mini-fill{height:100%; width:0%; background:var(--accent); border-radius:var(--radius-full); transition:width .35s ease}
/* ABAS da home: "Todas as musicas" e "Meus repertorios".
   Sao a mesma pergunta - onde procurar a musica - entao tem o mesmo peso visual.
   A escolhida se marca por COR E LINHA embaixo, e nao por uma caixa preenchida:
   caixa cheia parece botao a ser apertado, e aba escolhida nao e uma acao
   pendente, e o estado em que a tela esta. */
.abas{
  display:flex; gap:var(--space-1); margin-bottom:var(--space-4);
  border-bottom:1px solid var(--line2);
}
.aba{
  display:flex; align-items:center; gap:7px;
  padding:9px 12px; margin-bottom:-1px;
  background:none; border:0; border-bottom:2px solid transparent;
  color:var(--muted); cursor:pointer;
  font-size:var(--text-md); font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-tight);
  white-space:nowrap;
}
.aba svg{width:17px; height:17px; flex:0 0 auto}
.aba:hover{color:var(--text)}
.aba.on{color:var(--text); font-weight:var(--weight-semibold); border-bottom-color:var(--accent)}
/* Quantos itens tem cada lado. Responde "vale a pena olhar la?" sem trocar de
   aba, que era o unico jeito de descobrir. */
.aba-n{
  font-size:var(--text-xs); font-weight:var(--weight-medium);
  color:var(--muted); background:var(--line2);
  padding:1px 7px; border-radius:var(--radius-full); min-width:20px; text-align:center;
}
.aba.on .aba-n{background:var(--accent); color:var(--accent-foreground)}
/* Em tela estreita o rotulo sai e ficam icone e numero: duas abas de nome longo
   nao cabem lado a lado num celular sem quebrar a linha. */
/* A regra que escondia o texto das abas abaixo de 380px saiu com o rotulo
   curto: "Todas as musicas" e "Meus repertorios" nao cabiam lado a lado numa
   tela pequena, e a saida tinha sido deixar so os icones - dois desenhos sem
   legenda, que e a hora em que a pessoa precisa adivinhar. "Musicas" e
   "Repertorios" cabem, e legenda cabendo e sempre melhor que icone sozinho. */

.create-cta{
  flex:1 1 0; min-width:0; padding:13px var(--space-3);
  font-size:var(--text-sm); font-weight:var(--weight-medium);
  border-radius:var(--radius-lg); gap:var(--space-2);
}
.create-cta svg{width:18px; height:18px}
.btn.icon-only{flex:0 0 auto; width:48px; padding:0}

/* ---------------- listas ---------------- */
.list-item{
  display:flex; align-items:center; gap:var(--space-3); width:100%;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:var(--space-3); margin-bottom:var(--space-2); cursor:pointer; color:var(--text);
  font-family:inherit; text-align:left;
  transition:transform var(--duration-fast) var(--ease),
             border-color var(--duration) var(--ease), background var(--duration) var(--ease);
}
.list-item:hover{background:var(--card-elevated); border-color:var(--border-hover)}
.list-item:active{transform:scale(.99)}
/* O item que esta tocando: borda clara mais faixa de acento na esquerda.
   Era uma borda pintada com o gradiente de cinco cores, feita com dois
   backgrounds e mascara de padding-box. Alem de gritar, ela impedia hover e
   :active de mudarem o fundo, porque o fundo era o proprio truque da borda. */
.list-item.current{
  background:var(--card-elevated);
  box-shadow:inset 3px 0 0 var(--accent);
}
.list-item.current{border-color:transparent}
.list-item.current:hover{border-color:transparent}
.li-eq{gap:2.5px}
.li-eq i{width:3.5px}
/* Caixa neutra, traco em currentColor. Mesmo desenho do icone de cartao: o
   app tem UM jeito de mostrar icone em caixa, nao tres. */
.li-ic{
  width:38px; height:38px; border-radius:var(--radius-md); flex-shrink:0;
  background:var(--card-elevated); border:1px solid var(--border); color:var(--muted);
  display:flex; align-items:center; justify-content:center;
}
.li-ic svg{width:18px; height:18px; stroke:currentColor; fill:none}
.li-body{flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; overflow:hidden}
.li-title{display:block; width:100%; font-size:0; line-height:0;
  white-space:nowrap; overflow:hidden}          /* parede invisivel + sem folga da base */
.li-title-txt{display:inline-block; font-size:var(--text-md); font-weight:var(--weight-medium); line-height:1.25;
  white-space:nowrap; pointer-events:none}   /* toque atravessa pro card (nao trava scroll no iOS) */
.li-title-txt.marquee{animation: mq 5s linear infinite}   /* sem will-change: evita camada composta que trava scroll no iOS */
@keyframes mq{
  0%, 14%{transform:translateX(0)}                             /* pausa no inicio */
  86%, 100%{transform:translateX(calc(-1 * var(--mq)))}        /* desliza ate o fim e pausa; ao repetir, salta pro inicio */
}
.li-sub{font-size:var(--text-xs); color:var(--muted2); margin-top:2px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.li-sub:empty{display:none}
/* O ESTADO DA LETRA. Discreto de proposito: e informacao de apoio na linha de
   baixo, e nao pode competir com o nome da musica, que e o que se procura.
   So "letra automatica" ganha cor - e a unica das tres que muda o que acontece
   no palco, e por isso a unica que vale um olhar. */
.selo-letra{
  font-weight:var(--weight-semibold); letter-spacing:.02em;
}
.selo-letra.auto{color:var(--ok)}
.selo-letra.nada{opacity:.65}
/* Ponto separando o selo da nota, so quando as duas existem. */
.selo-letra + .m-nota:not(:empty)::before{content:" · "; opacity:.5}
.li-meta{
  font-size:var(--text-xs); color:var(--muted); flex-shrink:0; margin-left:10px; text-align:right;
  max-width:38%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.li-meta:empty{display:none}
.select-like{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  cursor:pointer; text-align:left; width:100%;
}
.select-like svg{width:17px; height:17px; color:var(--muted); flex-shrink:0}
.li-chev{color:var(--muted2); flex-shrink:0}
.li-chev svg{width:18px;height:18px}
/* Estado vazio com FORMA, nao uma frase cinza no meio do nada.
   Este e o primeiro contato de quem acabou de assinar: enquanto ele foi uma
   linha de texto solta dentro de um cartao grande, a home de um usuario novo
   era literalmente uma caixa vazia com uma legenda. A borda tracejada diz
   "aqui vai entrar coisa", que e a unica informacao que falta ali. */
.empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--space-2);
  min-height:132px;
  padding:var(--space-8) var(--space-5);
  border:1px dashed var(--border-strong); border-radius:var(--radius-lg);
  background:var(--surface);
  text-align:center;
  color:var(--muted); font-size:var(--text-sm); line-height:var(--leading-normal);
  text-wrap:balance;
}
/* O desenho e a onda da marca, sem coral nenhum: nada tocou ainda. */
.empty::before{
  content:''; width:44px; height:11px; margin-bottom:var(--space-2);
  background:currentColor; opacity:.5;
  -webkit-mask:var(--icon-onda) center / 44px 11px no-repeat;
  mask:var(--icon-onda) center / 44px 11px no-repeat;
}
.empty b{color:var(--text); font-weight:var(--weight-medium)}

/* ---------------- musica (repertorio) ---------------- */
.song{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  margin-bottom:var(--space-2); overflow:hidden;
  transition:box-shadow .25s, filter .25s, opacity .25s, border-color var(--duration) var(--ease)}
.song:hover{border-color:var(--border-hover)}
#songList.editing .song:not(.expanded),
#allList.editing .song:not(.expanded){filter:blur(3px); opacity:.35; pointer-events:none}
/* sem position/z-index aqui: senao o card prende o modal abaixo do fundo escurecido */
.song-main{display:flex; align-items:center; gap:10px; padding:11px 12px; cursor:pointer}
.drag-handle{display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:22px; color:var(--muted2); cursor:grab; touch-action:none; margin:-6px -2px -6px -6px; padding:6px 2px}
.drag-handle:active{cursor:grabbing}
.drag-handle svg{width:18px; height:18px}
.song.dragging{opacity:.92; box-shadow:var(--shadow-lg);
  border-color:var(--border-hover) !important; position:relative; z-index:5}
/* O acento e QUASE BRANCO, entao o icone em cima dele e escuro.
   Estava `fill:#fff` sobre `background:var(--accent)`: branco no branco. O
   simbolo de tocar existia e nao aparecia, e ninguem ve isso lendo o CSS de um
   lado so. Vale para todo botao de acento deste arquivo. */
/* O `.song-play` de 40px que morava aqui nao tinha dono: nenhum elemento usava
   a classe, e quando o botao da lista nasceu com esse nome ele herdou a sombra e
   o circulo de acento de um botao que ninguem via havia tempo. O desenho de
   verdade esta no fim desta folha. */
.song-play svg{width:15px; height:15px; fill:currentColor; margin-left:2px}
/* ---------------- repertorio em blocos ----------------
   A juncao ocupa o espaco ENTRE dois cartoes (fica dentro do cartao de cima,
   posicionada no vao, para andar junto quando o cartao e arrastado).
   Emenda: vao curto, cartoes quase encostados, linha continua ligando os dois.
   Pausa: vao largo, linha tracejada atravessando, respiro de fim de bloco.
   O vao inteiro e o botao: no escuro do palco, ninguem acerta uma pilula de
   20 px. */
#songList .song{position:relative; margin-bottom:0}
#songList .song.emenda{margin-bottom:26px}
#songList .song.pausa{margin-bottom:50px}
.junta{
  position:absolute; left:0; right:0; top:100%;
  display:flex; align-items:center; justify-content:center;
  background:none; border:0; padding:0; cursor:pointer; font:inherit;
  -webkit-tap-highlight-color:transparent; z-index:2;
}
.song.emenda .junta{height:26px}
.song.pausa .junta{height:50px}
.junta-linha{position:absolute; pointer-events:none}
.song.emenda .junta-linha{left:50%; top:0; bottom:0; width:2px; margin-left:-1px;
  background:var(--border-hover)}
.song.pausa .junta-linha{left:14px; right:14px; top:50%; height:0;
  border-top:1px dashed var(--border-strong)}
.junta-pilula{
  position:relative; display:inline-flex; align-items:center; gap:6px;
  height:24px; padding:0 11px 0 9px; border-radius:var(--radius-full);
  font-size:var(--text-label); font-weight:var(--weight-semibold); letter-spacing:.2px;
  border:1px solid var(--border-strong); background:var(--bg2); color:var(--muted);
  transition:transform .15s ease, color .15s ease, border-color .15s ease;
}
.junta-ic{display:inline-flex}
.junta-ic svg{width:12px; height:12px}
.song.emenda .junta-pilula{height:20px; font-size:11px; color:var(--muted2); border-color:var(--border)}
.song.pausa .junta-pilula{color:var(--text); border-color:var(--border-hover); background:var(--card)}
.junta:hover .junta-pilula{border-color:var(--border-hover); color:var(--text)}
.junta:active .junta-pilula{transform:scale(.94)}
/* cartoes emendados perdem o arredondado do lado colado: leem como um bloco */
#songList .song.emenda{border-bottom-left-radius:var(--radius-md); border-bottom-right-radius:var(--radius-md)}
#songList .song.emenda + .song{border-top-left-radius:var(--radius-md); border-top-right-radius:var(--radius-md)}
/* arrastando: as juncoes somem ate a lista ser redesenhada na ordem nova */
#songList:has(.song.dragging) .junta{visibility:hidden}
.rep-resumo{margin:-4px 0 16px; font-size:var(--text-sm); color:var(--muted2)}
.rep-resumo:empty{display:none}
/* palco: o que vem depois diz se emenda ou se para antes */
.song-edit{
  background:none; border:none; color:var(--muted); cursor:pointer; padding:9px; flex-shrink:0; border-radius:var(--radius-lg);
}
.song-edit svg{width:17px;height:17px}
.song-edit:active{opacity:.6}
.song-form{display:none}
/* editar musica = modal centralizado na tela (nao mais colado no card) */
.song.expanded .song-form{
  display:block; position:fixed; left:50%; top:50%; z-index:76;
  width:min(342px, 88vw); max-height:82vh; overflow-y:auto;
  background:var(--card); border:1px solid var(--line2); border-radius:var(--radius-3xl);
  box-shadow:0 24px 60px rgb(var(--sombra) / .7);
  animation: songModalIn .22s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes songModalIn{
  from{ transform:translate(-50%,-50%) scale(.94); opacity:0 }
  to{ transform:translate(-50%,-50%) scale(1); opacity:1 }
}
/* carregando (ex: ao abrir o editor de tom) */
#loadOv{position:absolute; inset:0; z-index:90; display:none;
  align-items:center; justify-content:center; flex-direction:column; gap:14px;
  background:rgb(var(--veu) / .55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px)}
#loadOv.on{display:flex}
#loadOv .onda{--onda-w:64px; --onda-h:16px; --onda-vao:3px}

/* ---- A ONDA DA MARCA ----
   As oito barras do simbolo, nas proporcoes dele (alturas 42, 83, 100, 58, 75,
   100, 50 e 33%). Na marca a onda e a musica tocando: o trecho em coral e o
   que ja saiu do play, sempre a partir do comeco. Esta peca usa isso onde ha
   algo andando: a partida do app e o carregando.

   .onda-viva enche de coral a partir da primeira barra, ate a ultima, e
   recomeca. O quanto encheu e um numero so (--onda-p, de 0 a 8), registrado
   com @property para poder ser animado; cada barra le esse numero e pinta a
   propria fracao. Navegador sem @property pula de vazio a cheio no meio do
   ciclo, que continua lendo como "carregando". As barras tambem respiram,
   uma depois da outra.

   Menos movimento: a onda fica parada como no logo, as duas primeiras barras
   em coral. */
@property --onda-p{syntax:'<number>'; inherits:true; initial-value:2}
.onda{
  display:flex; align-items:center; gap:var(--onda-vao, 3px);
  width:var(--onda-w, 64px); height:var(--onda-h, 16px);
}
.onda i{
  flex:1 1 0; min-width:0; border-radius:2px;
  background:linear-gradient(90deg,
    var(--coral) calc(clamp(0, var(--onda-p) - var(--k, 0), 1) * 100%),
    rgb(var(--tinta) / .28) 0);
}
.onda i:nth-child(1){height:42%; --k:0}
.onda i:nth-child(2){height:83%; --k:1}
.onda i:nth-child(3){height:100%; --k:2}
.onda i:nth-child(4){height:58%; --k:3}
.onda i:nth-child(5){height:75%; --k:4}
.onda i:nth-child(6){height:100%; --k:5}
.onda i:nth-child(7){height:50%; --k:6}
.onda i:nth-child(8){height:33%; --k:7}
.onda-viva{animation:onda-enche 2.4s cubic-bezier(.45,0,.55,1) infinite}
.onda-viva i{animation:onda-respira 1.2s ease-in-out infinite; animation-delay:calc(var(--k) * 90ms)}
@keyframes onda-enche{
  0%   {--onda-p:0}
  78%  {--onda-p:8}
  100% {--onda-p:8}
}
@keyframes onda-respira{
  0%, 100% {transform:scaleY(.72)}
  50%      {transform:scaleY(1)}
}
@media (prefers-reduced-motion:reduce){
  .onda-viva, .onda-viva i{animation:none}
}

/* O LOGO TEM DUAS VERSOES, e o tema escolhe: o claro (letras creme) vai no
   fundo escuro, o escuro (letras preto palco) no fundo claro. As duas imagens
   estao no HTML e uma fica escondida. O palco e sempre escuro, entao la vale o
   claro em qualquer tema. */
:root .marca-no-claro{display:none}
:root[data-tema="claro"]:not([data-palco]) .marca-no-escuro{display:none}
:root[data-tema="claro"]:not([data-palco]) .marca-no-claro{display:block}
/* O carregando e a onda da marca (.onda-viva, logo abaixo), o mesmo desenho
   da partida do app. */
@keyframes spin{to{transform:rotate(360deg)}}
.load-txt{font-size:var(--text-sm); color:var(--muted); font-weight:var(--weight-medium)}
#songBack{position:absolute; inset:0; z-index:75; display:none;
  background:rgb(var(--veu) / .55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px)}
#songBack.on{display:block}
.song-form-inner{opacity:0; transition:opacity .22s ease; position:relative;
  padding:16px 16px 18px}
.song-x{top:8px; right:8px}
.song-form-inner label:first-of-type{padding-right:36px}
/* "Liberar para ajudar" ganha a linha inteira, abaixo de Letra, Copiar e Excluir. */
.song-form .row{flex-wrap:wrap}
.song-form .b-ajudar{order:9; flex-basis:100%}
.song.expanded .song-form-inner{opacity:1}
.song-edit .ic-close{display:none}
.song.expanded .ic-edit{display:none}
/* Fechar nao e destrutivo: o X sai do vermelho e para de pulsar. O @keyframes
   xpulse foi junto, porque era usado so por esses tres botoes de fechar. */
.song.expanded .ic-close{display:inline; stroke:currentColor}
.song.expanded .song-edit{color:var(--text)}
.song-form label{display:block; font-size:var(--text-label); font-weight:var(--weight-medium); color:var(--muted); margin:11px 0 5px; text-transform:uppercase; letter-spacing:.4px}

/* ---------------- barra de progresso ---------------- */
.bar{margin-top:14px; display:none}
.bar.on{display:block}
.bar-track{height:26px; border-radius:var(--radius-full); background:var(--card2); border:1px solid var(--line); overflow:hidden}
.bar-fill{
  height:100%; border-radius:var(--radius-full); background:var(--accent); min-width:48px;
  display:flex; align-items:center; justify-content:flex-end; padding-right:10px;
  transition:width .35s ease; position:relative; overflow:hidden;
}
/* O brilho que atravessa a barra e ESCURO, porque a barra e clara. Era um
   gradiente branco sobre acento branco: invisivel, e uma animacao infinita
   rodando para nada num app que decodifica audio ao mesmo tempo. */
.bar-fill::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgb(var(--papel) / .14),transparent);
  animation:shine 1.4s infinite;
}
@keyframes shine{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@media (prefers-reduced-motion: reduce){ .bar-fill::before{animation:none; opacity:0} }
.bar-pct{
  font-size:var(--text-label); font-weight:var(--weight-semibold);
  color:var(--accent-foreground); position:relative; z-index:1;
  font-variant-numeric:tabular-nums;
}
.bar-label{text-align:center; font-size:var(--text-xs); color:var(--muted); margin-top:8px}

/* O bloco de login saiu inteiro: #scr-login, .pwd-wrap, .pwd-eye e .eye-*.
   A tela era o formulario do prototipo, que nao autenticava nada, e foi
   removida do index.html junto com os seus handlers. Quem autentica e
   web/entrar.html, contra o Supabase. CSS de tela que nao existe nao aparece
   em teste nenhum e vira arqueologia para o proximo leitor. */
.cloud_file-wrap{position:relative}
.cloud_file-wrap .field{padding-right:44px}
.cloud_file-clear{position:absolute; right:6px; top:0; bottom:0; width:40px; padding:0;
  background:none; border:none; cursor:pointer; color:var(--muted); display:none; align-items:center; justify-content:center}
.cloud_file-clear.on{display:flex}
.cloud_file-clear:active{opacity:.6}
.cloud_file-clear:hover{color:var(--text)}
.cloud_file-clear svg{width:18px; height:18px}
/* ---------------- idioma / bandeiras ---------------- */
.lang-opt{display:flex; align-items:center; gap:var(--space-3); width:100%; text-align:left;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:var(--space-3); margin-bottom:var(--space-2); cursor:pointer; color:var(--text);
  font-family:inherit; font-size:var(--text-base); font-weight:var(--weight-medium);
  transition:border-color var(--duration) var(--ease), background var(--duration) var(--ease)}
.lang-opt:hover{background:var(--card-elevated); border-color:var(--border-hover)}
.lang-opt .flag-sm{width:30px; height:21px; border-radius:var(--radius-xs); overflow:hidden; flex-shrink:0; border:1px solid var(--border-strong)}
.lang-opt .flag-sm svg{width:100%; height:100%; display:block}
/* Selecionado se marca com o proprio texto e a borda clara, nao com azul.
   Item de lista escolhido nao precisa de cor: precisa de contraste. */
.lang-opt.on{border-color:var(--border-hover); background:var(--card-elevated)}
.lang-opt .ck{margin-left:auto; color:var(--foreground); font-weight:var(--weight-bold); display:none}
.lang-opt.on .ck{display:block}

/* #scr-trial saiu: a tela de "teste encerrado" do prototipo nao existe mais no
   HTML. Quem nao tem entitlement vai para planos.html. */

/* Caixa de marcar. O traco do visto herda currentColor, entao ele fica escuro
   sobre o acento claro em vez de branco sobre branco. */
.rem-box{width:20px; height:20px; border-radius:var(--radius-xs); border:1.5px solid var(--border-strong);
  background:var(--input); color:var(--accent-foreground);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:background var(--duration) var(--ease), border-color var(--duration) var(--ease)}
.rem-box svg{width:13px; height:13px; opacity:0; transform:scale(.5); transition:.15s; stroke:currentColor}
/* Link de texto: sublinhado discreto, cor do corpo. Era azul da marca, a
   unica coisa azul de toda a tela. */
.link-btn{
  background:none; border:none; color:var(--foreground); font-family:inherit;
  font-size:var(--text-sm); font-weight:var(--weight-medium);
  cursor:pointer; padding:var(--space-1) 0;
  text-decoration:underline; text-decoration-color:var(--border-hover); text-underline-offset:3px;
  transition:text-decoration-color var(--duration) var(--ease);
}
.link-btn:hover{text-decoration-color:var(--foreground)}
.link-btn:active{opacity:.6}
/* ---- playlist ---- */
/* Aviso usa o token de aviso, com fundo e borda do mesmo par. Eram tres rgba
   laranja escritas a mao, uma para o texto, uma para o fundo e uma para a
   borda, e nenhuma delas existia em outro lugar do sistema. */
.pl-warn{margin-top:var(--space-3); font-size:var(--text-xs); color:var(--warning); line-height:var(--leading-snug);
  background:var(--warning-bg); border:1px solid var(--warning-border);
  border-radius:var(--radius-md); padding:var(--space-3)}
/* configuracoes: cartao ancorado no ALTO (nao e gaveta de baixo) */
.cfg-card{margin:calc(52px + var(--sat)) 14px 0; border-radius:var(--radius-3xl);
  padding:20px 18px calc(20px); align-self:flex-start;
  transform:translateY(-10px) scale(.97); transition:transform .22s cubic-bezier(.2,.8,.2,1)}
#configSheet{align-items:flex-start}
#configSheet.on .cfg-card{transform:none}

/* barra de progresso da musica, colada em cima da bandeja do player */
.rp-seek{position:absolute; z-index:39; display:none;
  left:calc(12px + var(--sal)); right:calc(12px + var(--sar));
  bottom:calc(var(--rp-h, 74px) + 12px + var(--sab));
  height:26px; align-items:center; cursor:pointer; touch-action:none}
.rp-seek.on{display:flex}
.rp-seek-track{position:relative; width:100%; height:6px; border-radius:var(--radius-full);
  background:var(--border-strong); overflow:hidden}
.rp-seek-fill{height:100%; width:0%; border-radius:var(--radius-full); background:var(--accent)}
.rp-seek-knob{position:absolute; top:50%; width:14px; height:14px; border-radius:50%;
  background:var(--accent); box-shadow:var(--shadow-sm); transform:translate(-50%,-50%); left:0;
  pointer-events:none}

/* Tempo da faixa no cabecalho. Numero e DADO, entao vem em fonte tabular e na
   cor do corpo: era azul da marca, e um relogio colorido no topo puxava o olho
   para a informacao menos importante da tela. */
.hd-time{font-size:var(--text-sm); font-weight:var(--weight-medium); font-variant-numeric:tabular-nums;
  letter-spacing:var(--tracking-normal); display:none;
  color:var(--muted)}
.hd-time.on{display:block}

/* controle de tamanho do texto */
.fs-ctl{flex:none; display:flex; align-items:center; gap:8px}
.fs-btn{width:34px; height:34px; border-radius:50%; border:1px solid var(--line2);
  background:var(--card); color:var(--text); cursor:pointer; font-family:inherit;
  font-size:var(--text-sm); font-weight:var(--weight-semibold); display:flex; align-items:center; justify-content:center}
.fs-btn:active{transform:scale(.9)}
.fs-btn:disabled{opacity:.35}
.fs-val{min-width:44px; text-align:center; font-size:var(--text-xs);
  font-weight:var(--weight-medium); color:var(--muted); font-variant-numeric:tabular-nums}

/* linha de configuracao com chave liga/desliga */
.cfg-row{display:flex; align-items:center; gap:14px; margin-top:16px;
  background:var(--card2); border:1px solid var(--line2); border-radius:var(--radius-xl); padding:14px}
.cfg-txt{flex:1; min-width:0}
.cfg-txt b{display:block; font-size:var(--text-base); font-weight:var(--weight-medium); line-height:1.3}
.cfg-txt i{display:block; font-style:normal; font-size:var(--text-xs); color:var(--muted); margin-top:4px; line-height:1.35}
.cfg-aviso{color:var(--warning) !important}
.cfg-row.off .cfg-txt b, .cfg-row.off .cfg-txt i:not(.cfg-aviso){opacity:.5}
/* Aparencia: tres opcoes lado a lado, embaixo do texto. A opcao marcada usa o
   acento, como a chave ligada logo abaixo - e a mesma resposta visual para "esta
   escolhido", e duas linguagens no mesmo cartao fariam duvidar. */
.cfg-row.cfg-tema{flex-wrap:wrap}
.tema-opcoes{display:flex; width:100%; gap:2px; padding:3px;
  background:var(--background); border:1px solid var(--line2); border-radius:var(--radius-lg)}
.tema-opcoes button{flex:1 1 0; min-width:0; min-height:36px; padding:0 var(--space-2);
  border:0; border-radius:var(--radius-md); background:none; cursor:pointer;
  color:var(--muted); font-family:inherit; font-size:var(--text-sm); font-weight:var(--weight-medium);
  transition:background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease)}
.tema-opcoes button:hover{color:var(--text)}
.tema-opcoes button[aria-checked="true"]{background:var(--accent); color:var(--accent-foreground)}
.sw:disabled{opacity:.35; cursor:not-allowed}
.sw{flex:none; width:44px; height:26px; border-radius:var(--radius-full); border:1px solid var(--border-strong);
  cursor:pointer; padding:2px;
  background:var(--input); transition:background var(--duration) var(--ease), border-color var(--duration) var(--ease);
  display:flex; align-items:center}
.sw i{width:20px; height:20px; border-radius:50%; background:var(--muted); display:block;
  transition:transform var(--duration) var(--ease), background var(--duration) var(--ease);
  box-shadow:var(--shadow-sm)}
/* Ligado e o acento chapado. Era um gradiente roxo-rosa, e uma chave de
   liga-desliga com duas cores dentro e o tipo de detalhe que parece tema e nao
   produto. O botao desligado tambem passa a dizer isso pelo circulo cinza, e
   nao so pelo trilho. */
.sw.on{background:var(--accent); border-color:transparent}
.sw.on i{transform:translateX(18px); background:var(--accent-foreground)}
.sw:active{transform:scale(.96)}
.bk-box{margin-top:14px; background:var(--card2); border:1px solid var(--line2);
  border-radius:var(--radius-xl); padding:12px 14px}
.bk-row{display:flex; align-items:center; justify-content:space-between; padding:5px 0; font-size:var(--text-sm)}
.bk-row b{color:var(--text); font-weight:var(--weight-medium)}
.bk-row span{color:var(--muted)}
/* ---------------- player ---------------- */
/* Superficie neutra com o simbolo no meio. Eram dois radial-gradient azul e
   rosa a 35% e 28% de opacidade: a maior mancha de cor do app inteiro, no topo
   da tela em que o usuario mais passa tempo, e sem informar nada. O simbolo ja
   carrega a marca; o fundo so precisa dar lugar a ele. */
.artwork{
  position:relative; width:100%; height:112px; border-radius:var(--radius-xl); overflow:hidden;
  background:var(--card);
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; margin-bottom:var(--space-4);
}
.artwork img{height:72%; width:auto; object-fit:contain}
.pl-title{font-size:var(--text-lg); font-weight:var(--weight-semibold); text-align:center; letter-spacing:-.3px;
  margin-bottom:16px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; padding:0 6px}
.pl-title-wrap{position:relative; margin-bottom:16px}
.pl-title-input{
  width:100%; background:transparent; border:none; border-bottom:1px dashed var(--line2);
  color:var(--text); font-family:inherit; font-size:var(--text-lg); font-weight:var(--weight-semibold); text-align:center;
  letter-spacing:-.3px; padding:8px 30px; outline:none; transition:border-color .2s;
}
.pl-title-input:focus{border-bottom-color:var(--ring); border-bottom-style:solid}
.pl-title-pencil{position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; stroke:var(--muted2); pointer-events:none}
.pl-edit-hint{text-align:center; font-size:var(--text-label); color:var(--muted2); margin-top:-12px; margin-bottom:14px}
textarea.field{resize:vertical; min-height:180px; line-height:1.5; font-size:var(--text-base)}
.lyr-actions{display:flex; gap:10px; margin-bottom:12px}
.lyr-actions>*{flex:1}

/* ---------------- modo palco (letra grande enquanto toca) ---------------- */
#scr-stage{display:flex; flex-direction:column; overflow:hidden;
  padding:calc(12px + var(--sat)) calc(16px + var(--sar)) 0 calc(16px + var(--sal))}
.stage-top{display:flex; align-items:center; position:relative; margin-bottom:3px; min-height:34px}
.stage-tools{display:flex; gap:7px}   /* fica na esquerda */
/* tempo no centro exato do topo, sem ser empurrado pelos botoes dos lados */
/* NOME DA MUSICA E RELOGIO, no centro do topo, um sobre o outro.
   O nome vivia abaixo da barra, em cinza, e se perdia: num palco a pergunta
   "que musica e esta?" tem que ser respondida onde o olho ja vai - e o olho vai
   no relogio. Os dois juntos ocupam a mesma faixa que o relogio sozinho ocupava. */
.stage-centro{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:0; max-width:52%}
.stage-centro .stage-title{margin:0; font-size:var(--text-sm); color:var(--text);
  max-width:100%}
.stage-time{font-family:inherit; font-size:var(--text-xs); font-weight:var(--weight-medium);
  font-variant-numeric:tabular-nums; letter-spacing:var(--tracking-normal);
  color:var(--muted); white-space:nowrap}
.stage-close{position:absolute; right:0; top:50%; transform:translateY(-50%);
  background:var(--card); border:1px solid var(--border-strong); color:var(--text); cursor:pointer;
  width:38px; height:38px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center}
.stage-close svg{width:18px; height:18px}
.stage-close:active{opacity:.6}
.b-letra.has-letra::after{content:'✓'; color:var(--success); font-weight:var(--weight-bold); margin-left:6px}
/* Selo "NOVA": contorno, nao bloco verde chapado. Um retangulo de cor cheia ao
   lado do nome do repertorio pesa mais que o proprio nome, e verde-limao com
   texto verde-escuro era o unico par de cores desse tipo no app. */
.new-badge{
  background:var(--success-bg); color:var(--success); border:1px solid var(--success-border);
  font-size:var(--text-label); font-weight:var(--weight-semibold); letter-spacing:var(--tracking-label);
  padding:2px 6px; border-radius:var(--radius-xs); flex-shrink:0; margin-left:6px;
  align-self:center; line-height:1.4;
}
/* Selo e contador na MESMA linha, o selo primeiro. Ele ficava posicionado
   absoluto acima do contador, entao subia por cima do card e encostava no
   nome do repertorio: o unico elemento da tela fora do fluxo, e justamente o
   que precisa ser lido junto com o resto da linha. */
.li-metacol{display:flex; align-items:center; gap:var(--space-2); flex-shrink:0; margin-left:var(--space-2)}
.li-metacol .li-meta{margin-left:0; max-width:none; overflow:visible}
.li-metacol .new-badge{order:-1; margin-left:0}
/* modal centralizado (notificacao de conclusao) */
.cmodal{position:absolute; inset:0; background:rgb(var(--veu) / .62); z-index:80;   /* acima do guia */
  display:flex; align-items:center; justify-content:center; padding:26px;
  opacity:0; pointer-events:none; visibility:hidden; transition:opacity .2s, visibility 0s linear .2s}
.cmodal.on{opacity:1; pointer-events:auto; visibility:visible; transition:opacity .2s}
.cmodal-card{width:100%; max-width:330px; background:var(--card); border:1px solid var(--line2);
  border-radius:var(--radius-3xl); padding:26px 22px; text-align:center; transform:scale(.9); transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.cmodal.on .cmodal-card{transform:scale(1)}
/* Confirmacao de sucesso: verde do sistema, em contorno. Era um quadrado com
   gradiente de tres cores da marca e halo roxo, do tamanho de metade do
   modal. O que o usuario precisa ler ali e o texto, nao o icone. */
.notif-ic{width:52px; height:52px; margin:0 auto var(--space-4); border-radius:var(--radius-xl);
  background:var(--success-bg); border:1px solid var(--success-border); color:var(--success);
  display:flex; align-items:center; justify-content:center}
.notif-ic svg{width:26px; height:26px; stroke:currentColor}
.notif-title{font-size:var(--text-lg); font-weight:var(--weight-semibold); letter-spacing:var(--tracking-brand)}
.notif-body{font-size:var(--text-sm); color:var(--muted); margin-top:7px; line-height:1.45}
.stage-tools button{background:var(--card); border:1px solid var(--border-strong); color:var(--text);
  border-radius:var(--radius-md); padding:6px var(--space-3); font-family:inherit;
  font-size:var(--text-sm); cursor:pointer; font-weight:var(--weight-medium)}
/* Ligado: acento com texto escuro. Estava `color:#fff` sobre o acento quase
   branco, entao o rotulo sumia justamente no estado ativo. */
.stage-tools button.on{background:var(--accent); border-color:transparent; color:var(--accent-foreground)}
/* A FAIXA DO PALCO: de que repertorio e, a esquerda, e o que vem depois, a
   direita. Presa ao topo, que nao rola: a letra cresce e empurra o rodape para
   fora da tela num monitor, e era la que a proxima musica morava.
   Apagada de proposito - ela e consulta de canto de olho, nao leitura. */
/* A FAIXA E RASA DE PROPOSITO. Cada pixel dela sai da letra, que e o que se le
   de longe. Com as duas proximas empilhadas ela ganharia altura por duas linhas,
   entao o texto e a entrelinha encolhem para caber no mesmo espaco de antes. */
.stage-barra{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  font-size:11px; color:var(--muted2);
  padding-bottom:1px; margin-bottom:1px; border-bottom:1px solid var(--line);
}
.stage-rep{letter-spacing:.04em; text-transform:uppercase; flex:0 1 auto;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
/* UMA EMBAIXO DA OUTRA. Lado a lado, os dois nomes dividiam a mesma largura e
   saiam os dois cortados por reticencias - e titulo pela metade nao diz qual
   musica e. A linha de baixo e mais apagada: ela e a de depois. */
.stage-a-seguir{flex:1 1 0; min-width:0; display:flex; flex-direction:column;
  align-items:flex-end; gap:0; color:var(--muted); line-height:1.2}
.stage-a-seguir .vem{max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.stage-a-seguir .vem + .vem{color:var(--muted2)}
/* As duas pontas da faixa tem a MESMA largura, para os controles ficarem no
   centro da tela e nao serem empurrados pelo texto mais longo dos dois. */
.stage-rep{flex:1 1 0}

/* CONTROLES NA FAIXA: os mesmos botoes, no tamanho de barra.
   No rodape eles sao alvos de dedo (56px); aqui sao de mouse e dividem uma
   linha com dois textos, entao encolhem. Menos que isto deixaria de ser
   clicavel com o polegar num celular. */
.stage-ctrl.mini{flex:0 0 auto; gap:5px}
.stage-ctrl.mini button{width:26px; height:26px; box-shadow:none}
.stage-ctrl.mini button.sec{width:24px; height:24px}
.stage-ctrl.mini button svg{width:13px; height:13px}
.stage-ctrl.mini button.sec svg{width:12px; height:12px}
/* Em tela estreita o repertorio cede o lugar: os botoes e o que vem a seguir
   valem mais que o nome da fila, que a pessoa acabou de escolher. */
@media (max-width:520px){
  .stage-rep{display:none}
}
.stage-barra:empty, .stage-barra[hidden]{display:none}
@media (min-width:1024px){ .stage-barra{font-size:12px} }
.stage-title{font-size:var(--text-base); font-weight:var(--weight-semibold); text-align:center; margin-bottom:6px; color:var(--muted);
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
/* MARCADA: quem rola e a musica, e nao a mao. Um toque sem querer tirava a letra
   do lugar no meio do verso. `overflow:hidden` nao impede o `scrollTo` do
   relogio - so o gesto. Sem marcacao continua rolando: la nao ha relogio, e
   prender deixaria o texto preso na primeira tela. */
/* A LETRA MARCADA ROLA NA MAO, COMO A OUTRA.
   Esta linha dizia o contrario com todas as letras: `overflow:hidden` tirava a
   barra de rolagem e `touch-action:none` tirava o gesto - nao havia o que o JS
   pudesse fazer, e eu tinha "consertado" so a metade em JS enquanto o CSS
   continuava proibindo. Quem leva a letra continua sendo a musica; o dedo apenas
   tem prioridade sobre ela por doze segundos (ver TREGUA_DA_MAO). */
.stage-lyrics.sinc{overflow-y:auto; touch-action:pan-y; overscroll-behavior:contain}
.stage-lyrics{flex:1; overflow-y:auto; scrollbar-width:none; text-align:center; white-space:pre-wrap;
  font-size:var(--text-xl); line-height:1.75; font-weight:var(--weight-medium);
  padding:6px 6px 40px;}
/* SEM `-webkit-overflow-scrolling:touch` AQUI TAMBEM. Ele saiu de `.screen` por
   este mesmo motivo e ficou para tras na letra do palco: o modo legado do iOS
   TRAVA a rolagem quando o dedo encosta num elemento composto - e cada linha da
   letra e um, por causa do brilho que corre por ela (`background-clip:text` com
   gradiente animado). O momentum ja e nativo no iOS moderno; o que este valor
   fazia aqui era desligar justamente a rolagem que ele deveria melhorar. */
.stage-lyrics::-webkit-scrollbar{display:none}
.stage-lyrics.empty{display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--muted2); font-size:var(--text-md); font-weight:500; line-height:1.6}
.stage-ctrl{display:flex; align-items:center; justify-content:center; gap:var(--space-4)}
.stage-ctrl button{width:56px; height:56px; border-radius:var(--radius-full); border:none; cursor:pointer;
  background:var(--accent); color:var(--accent-foreground);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--highlight-strong), var(--shadow-md);
  transition:transform var(--duration-fast) var(--ease), background var(--duration) var(--ease)}
.stage-ctrl button:hover{background:var(--accent-hover)}
.stage-ctrl button:active{transform:scale(.93)}
.stage-ctrl button.sec{width:48px; height:48px; background:var(--card); color:var(--text);
  border:1px solid var(--border-strong); box-shadow:none}
.stage-ctrl button.sec:hover{background:var(--card-elevated); border-color:var(--border-hover)}
.stage-ctrl button svg{width:24px; height:24px; fill:currentColor}
.stage-ctrl button.sec svg{width:20px; height:20px}

.seek-wrap{padding:0 2px}
/* O preenchimento e escrito pelo JS na propria propriedade `background`
   (a posicao do gradiente e o progresso), entao as tres paradas continuam.
   O que muda e a cor: acento e trilho, no lugar de roxo e rosa. */
input[type=range].seek{
  -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:var(--radius-full);
  background:linear-gradient(90deg,var(--accent) 0%, var(--accent) 0%, var(--border-strong) 0%);
  outline:none; cursor:pointer;
}
input[type=range].seek::-webkit-slider-thumb{
  -webkit-appearance:none; width:14px; height:14px; border-radius:50%;
  background:var(--accent); box-shadow:var(--shadow-sm); border:none;
}
input[type=range].seek::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%; background:var(--accent); border:none;
  box-shadow:var(--shadow-sm);
}
.times{display:flex; justify-content:space-between; color:var(--muted); font-size:var(--text-label);
  font-variant-numeric:tabular-nums; margin-top:7px}

.controls{display:flex; align-items:center; justify-content:center; margin:10px 0 4px}
/* O botao mais importante do app. Acento chapado, simbolo escuro, sombra
   neutra. Tinha `fill:#fff` sobre o acento quase branco, com um halo roxo de
   30px por baixo: o halo era a unica coisa visivel, e o triangulo de tocar
   simplesmente nao aparecia. */
.play-big{
  width:68px; height:68px; border-radius:var(--radius-full); border:none; cursor:pointer;
  background:var(--accent); color:var(--accent-foreground);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--highlight-strong), var(--shadow-md);
  transition:transform var(--duration-fast) var(--ease), background var(--duration) var(--ease);
}
.play-big:hover{background:var(--accent-hover)}
.play-big:active{transform:scale(.94)}
.play-big svg{width:26px; height:26px; fill:currentColor}
.pl-status{text-align:center; color:var(--muted); font-size:var(--text-xs); min-height:18px; margin-top:6px}

.tom-row{display:flex; align-items:center; justify-content:space-between; gap:14px}
.tom-info{flex:1}
.tom-label{font-size:var(--text-base); font-weight:var(--weight-semibold)}
.tom-sub{font-size:var(--text-xs); color:var(--muted); margin-top:3px}
.tom-ctrl{display:flex; align-items:center; gap:14px}
.tom-btn{
  width:44px; height:44px; border-radius:var(--radius-full); border:1px solid var(--border-strong);
  background:var(--card-elevated); color:var(--text); font-size:var(--text-xl);
  font-weight:var(--weight-medium); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-family:inherit;
  transition:transform var(--duration-fast) var(--ease), background var(--duration) var(--ease),
             border-color var(--duration) var(--ease);
}
.tom-btn:hover{background:var(--surface); border-color:var(--border-hover)}
.tom-btn:active{transform:scale(.92)}
/* O valor do tom e o dado que a pessoa esta ajustando: e o degrau mais alto
   deste cartao, em tabular para nao dancar entre -6 e 0. */
.tom-val{font-size:var(--text-2xl); font-weight:var(--weight-semibold); min-width:48px;
  text-align:center; font-variant-numeric:tabular-nums; letter-spacing:var(--tracking-brand)}

#downloadReady{display:none; margin-top:12px}
#downloadReady.on{display:flex}

/* ---------------- mini-player global (continua tocando entre telas) ---------------- */
/* Bandeja do player. Superficie elevada e opaca: o gradiente de tres cores da
   marca por cima de um blur de 14px era, ao mesmo tempo, a peca mais colorida
   da tela e a mais cara de compor, e ela fica FIXA na frente de tudo enquanto
   o audio toca. Opaca tambem resolve a legibilidade do titulo por cima de
   qualquer conteudo que passe embaixo. */
.rep-player{
  display:none; align-items:center; gap:var(--space-2);
  position:absolute; z-index:40;
  left:calc(12px + var(--sal)); right:calc(12px + var(--sar)); bottom:calc(14px + var(--sab));
  background:var(--card-elevated);
  border:1px solid var(--border-strong); border-radius:var(--radius-xl); padding:var(--space-3);
  box-shadow:var(--shadow-lg);
}
.rep-player.on{display:flex}
#app.has-bar .screen{padding-bottom:calc(116px + var(--sab))}
#app.has-bar.has-seek .screen{padding-bottom:calc(146px + var(--sab))}
.rp-body{flex:1; min-width:0}
/* letreiro: o titulo desliza quando nao cabe (mesma animacao da lista) */
.rp-title{display:block; width:100%; font-size:0; line-height:0; white-space:nowrap; overflow:hidden}
.rp-title-txt{display:inline-block; font-size:var(--text-sm); font-weight:var(--weight-medium); line-height:1.3;
  white-space:nowrap; pointer-events:none}
.rp-title-txt.marquee{animation: mq 5s linear infinite}
.rp-sub{font-size:var(--text-label); color:var(--muted); margin-top:2px}
.rp-btn{
  width:44px; height:44px; border-radius:var(--radius-full); border:none; cursor:pointer; flex-shrink:0;
  background:var(--accent); color:var(--accent-foreground);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--highlight-strong), var(--shadow-sm);
  transition:transform var(--duration-fast) var(--ease), background var(--duration) var(--ease);
}
.rp-btn:hover{background:var(--accent-hover)}
.rp-btn:active{transform:scale(.92)}
.rp-btn.sec{width:34px; height:34px; background:var(--card); border:1px solid var(--border-strong);
  color:var(--text); box-shadow:none}
.rp-btn.sec:hover{background:var(--surface); border-color:var(--border-hover)}
.rp-btn svg{width:18px; height:18px; fill:currentColor}
.rp-btn.sec svg{width:15px; height:15px}
/* Barras do equalizador: um pedaco da onda da marca.
   E a peca do app que se mexe sozinha, e ela existe para responder "qual
   delas esta tocando?" de canto de olho, sem ler nada. A primeira barra e
   coral e as outras creme, a mesma leitura do logo: o coral e o que ja saiu do
   play, sempre no comeco. Paradas (.paused), voltam ao cinza: cor parada
   promete movimento que nao existe. */
.eq{display:flex; align-items:flex-end; gap:2.5px; height:16px}
.eq i{width:3.5px; border-radius:2px; background:var(--muted); animation:eqb 1s ease-in-out infinite}
.eq i:nth-child(1){background:var(--coral)}
.eq i:nth-child(2){background:var(--foreground)}
.eq i:nth-child(3){background:var(--foreground)}
.eq.paused i{background:var(--muted)}
.eq i:nth-child(1){height:60%; animation-delay:0s}
.eq i:nth-child(2){height:100%; animation-delay:.25s}
.eq i:nth-child(3){height:45%; animation-delay:.5s}
@keyframes eqb{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
.eq.paused i{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){ .eq i{animation:none} }
/* Numero da faixa: monoespacado tabular, sem caixa colorida. A coluna de
   numeros so funciona se todos tiverem a mesma largura. */
.song-num{
  width:30px; height:30px; border-radius:var(--radius-sm); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--card-elevated); border:1px solid var(--border);
  font-weight:var(--weight-medium); font-size:var(--text-xs); color:var(--muted);
  font-variant-numeric:tabular-nums;
}
/* Faixa tocando: mesma marcacao do item de lista tocando. Duas telas mostram a
   mesma ideia, entao usam o mesmo sinal. */
.song.current{border-color:transparent}
.song.current:hover{border-color:transparent}
.song.current .song-num{background:var(--accent); color:var(--accent-foreground); border-color:transparent}
/* Sinal de adicionar na busca de musicas. Era um "＋" de largura cheia em
   rosa da marca com peso 800, escrito no atributo style. */
.li-add{
  color:var(--muted); font-size:var(--text-lg); font-weight:var(--weight-medium);
  line-height:1; padding:0 var(--space-1);
}
#newRepRow{display:none; margin-top:10px}
#newRepRow.on{display:flex}
#btnAddRep .ic-x{display:none}
#btnAddRep.on .ic-plus{display:none}
#btnAddRep.on .ic-x{display:inline}
/* Aberto: o botao vira "fechar", com o par de cor de recusa em contorno. Era
   fundo vermelho chapado com o X branco por cima, e o X ainda pulsava sem
   parar: cor cheia mais animacao infinita para um botao que so recolhe uma
   linha de formulario. */
#btnAddRep.on{
  background:var(--destructive-bg); border-color:var(--destructive-border); color:var(--destructive);
}

/* ---------------- busca de videos ---------------- */
.cloud_file-item{
  display:flex; gap:11px; align-items:center; width:100%;
  background:var(--card2); border:1px solid var(--line); border-radius:var(--radius-xl);
  padding:9px; margin-bottom:9px; cursor:pointer; color:var(--text);
  font-family:inherit; text-align:left; transition:transform .12s;
}
.cloud_file-item:active{transform:scale(.98)}
.cloud_file-thumb{width:80px; height:45px; border-radius:var(--radius-lg); object-fit:cover; flex-shrink:0; background:var(--video)}
.cloud_file-ic{width:44px; height:44px; flex:none; border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center;
  background:var(--line2); color:var(--muted)}
.cloud_file-ic svg{width:20px; height:20px}
.cloud_file-t{font-size:var(--text-sm); font-weight:var(--weight-medium); line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.cloud_file-c{font-size:var(--text-label); color:var(--muted2); margin-top:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.video-wrap{width:100%; aspect-ratio:16/9; border-radius:var(--radius-xl); overflow:hidden; background:var(--video); margin-bottom:14px}
.video-wrap iframe{width:100%; height:100%; border:0}
/* previa em audio: player compacto (o video fica fora da tela) */
.pv-player{display:flex; align-items:center; gap:12px; margin-bottom:14px;
  background:var(--card2); border:1px solid var(--line2); border-radius:var(--radius-xl); padding:12px 14px}
.pv-art{width:52px; height:52px; border-radius:var(--radius-lg); flex:none; background:var(--line2);
  display:flex; align-items:center; justify-content:center; color:var(--muted)}
.pv-art svg{width:24px; height:24px}
.pv-play{width:42px; height:42px; flex:none; border:none; border-radius:var(--radius-full); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--accent-foreground); background:var(--accent);
  box-shadow:var(--highlight-strong), var(--shadow-sm)}
.pv-play:hover{background:var(--accent-hover)}
.pv-play:active{transform:scale(.94)}
.pv-play svg{width:20px; height:20px; fill:currentColor}
.pv-mid{flex:1; min-width:0}
.pv-bar{height:5px; border-radius:var(--radius-full); background:var(--border-strong); cursor:pointer; overflow:hidden}
.pv-bar i{display:block; height:100%; width:0; border-radius:var(--radius-full); background:var(--accent)}
.pv-time{display:flex; justify-content:space-between; font-size:var(--text-label); color:var(--muted2); margin-top:5px}
.pv-host{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; left:-9999px}

/* ---------------- bottom sheet ---------------- */
.sheet{
  position:absolute; inset:0; background:rgb(var(--veu) / .55); z-index:50;
  display:flex; align-items:flex-end; opacity:0; pointer-events:none;
  visibility:hidden; transition:opacity .22s, visibility 0s linear .22s;
}
.sheet.on{opacity:1; pointer-events:auto; visibility:visible; transition:opacity .22s}
/* A CONFIRMACAO SOBE ACIMA DO CARTAO ABERTO.
   As folhas comuns vivem em z-index 50, e o fundo escuro do cartao de musica
   (#songBack) esta em 75: a pergunta "excluir?" nascia ATRAS dele, invisivel, e
   so aparecia depois de fechar o cartao - ou seja, era preciso voltar para
   responder algo que se perguntou ali. Ela fica abaixo do carregando (90) e do
   aviso (99), que sao os unicos que podem cobri-la. */
#confirmSheet{z-index:88}
.sheet-card{
  position:relative;
  width:100%; background:var(--card); border-top:1px solid var(--border-strong);
  border-radius:var(--radius-3xl) var(--radius-3xl) 0 0;
  padding:var(--space-6) var(--space-5) calc(var(--space-6) + var(--sab));
  transform:translateY(30px); transition:transform .25s var(--ease);
  box-shadow:var(--shadow-lg);
}
.sheet.on .sheet-card{transform:none}
/* NO MONITOR A FOLHA NAO E GAVETA. De ponta a ponta numa tela de 1440 (ou de
   2560), a pergunta virava uma faixa com um botao de um metro, longe de onde o
   olho estava. Ela vira cartao no meio da tela, com a largura de uma leitura. */
@media (min-width:1024px){
  .sheet{align-items:center; justify-content:center; padding:var(--space-6)}
  .sheet-card{max-width:560px; border:1px solid var(--noite-borda, var(--border-strong));
    border-radius:var(--radius-3xl); padding-bottom:var(--space-6)}
  #configSheet{align-items:flex-start}
}
.sheet-x{position:absolute; top:14px; right:14px; width:34px; height:34px; padding:0;
  background:none; border:none; cursor:pointer; color:var(--muted);
  border-radius:var(--radius-md);
  transition:background var(--duration) var(--ease), color var(--duration) var(--ease);
  display:flex; align-items:center; justify-content:center}
.sheet-x:hover{background:var(--card-elevated); color:var(--text)}
.sheet-x svg{width:20px; height:20px}
.sheet-x:active{opacity:.6}
.sheet-title{font-size:var(--text-md); font-weight:var(--weight-semibold); margin-bottom:4px}
.sheet-sub{font-size:var(--text-xs); color:var(--muted); margin-bottom:16px}
.sheet-opt{
  display:flex; align-items:center; gap:var(--space-3); width:100%; text-align:left;
  background:var(--card-elevated); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:var(--space-4); margin-bottom:var(--space-2); cursor:pointer; color:var(--text); font-family:inherit;
  transition:transform var(--duration-fast) var(--ease), background var(--duration) var(--ease),
             border-color var(--duration) var(--ease);
}
.sheet-opt:hover{background:var(--surface); border-color:var(--border-hover)}
.sheet-opt:active{transform:scale(.99)}
.so-title{font-size:var(--text-base); font-weight:var(--weight-medium)}
.so-sub{font-size:var(--text-xs); color:var(--muted); margin-top:3px}
/* menu Conta: popover pequeno colado no canto superior direito, com fundo embacado */
#userSheet{align-items:flex-start; justify-content:flex-end;
  background:rgb(var(--veu) / .3); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.acct-card{width:230px; max-width:76%; margin:56px 14px 0 0; padding:7px;
  background:var(--card); border:1px solid var(--line2); border-radius:var(--radius-xl);
  box-shadow:0 18px 46px rgb(var(--sombra) / .6); transform-origin:top right;
  transform:translateY(-8px) scale(.96); transition:transform .2s cubic-bezier(.2,.8,.2,1)}
#userSheet.on .acct-card{transform:none}
.acct-head{font-size:var(--text-xs); color:var(--muted); font-weight:var(--weight-medium); padding:6px 10px 8px}
.acct-opt{display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:none; border:none; border-radius:var(--radius-lg); padding:10px; cursor:pointer;
  color:var(--text); font-family:inherit}
.acct-opt:active{background:var(--card2)}
.acct-opt .so-title{font-size:var(--text-base); font-weight:var(--weight-medium)}
.acct-ic{width:19px; height:19px; flex-shrink:0; color:var(--muted)}
.acct-opt.sair{color:var(--danger); border-top:1px solid var(--line); border-radius:0; margin-top:4px; padding-top:12px}
.acct-opt.sair .acct-ic{color:var(--danger)}
.acct-opt.sair .so-title{color:var(--danger)}

/* ---------------- toast ---------------- */
/* O aviso passageiro. Era `#22263a`, um azul-ardosia escrito a mao que nao
   existe em nenhum outro lugar: a unica peca da interface fora da paleta.
   Retangulo com raio do sistema, e nao pilula: pilula era a ultima forma de
   999px que restava. */
#toast{
  position:absolute; left:50%; bottom:30px; transform:translateX(-50%) translateY(18px);
  background:var(--card-elevated); color:var(--text); font-size:var(--text-sm); font-weight:var(--weight-medium);
  padding:var(--space-3) var(--space-4); border-radius:var(--radius-lg); border:1px solid var(--border-strong);
  box-shadow:var(--shadow-lg); opacity:0; pointer-events:none;
  visibility:hidden; transition:opacity .25s, transform .25s, visibility 0s linear .25s;
  z-index:99; max-width:86%; text-align:center;
}
#toast.on{opacity:1; transform:translateX(-50%) translateY(0); visibility:visible;
  transition:opacity .25s, transform .25s}

/* ---------- TABLET (iPad e afins) ----------
   O app ja ocupa a tela toda; aqui o CONTEUDO fica numa coluna centralizada,
   senao os botoes esticam de ponta a ponta e fica ruim de ler.
   Precisa vir no fim da folha para vencer as regras base de .screen. */
@media (pointer:coarse) and (min-width:700px){
  .screen{padding-left:calc(max(20px, (100% - 620px)/2) + var(--sal));
          padding-right:calc(max(20px, (100% - 620px)/2) + var(--sar))}
  .rp-seek, .rep-player{left:calc(max(12px, (100% - 640px)/2) + var(--sal));
                        right:calc(max(12px, (100% - 640px)/2) + var(--sar))}
}

/* ---------- iOS: sem zoom por toque duplo ----------
   O toque duplo dava zoom e atrapalhava no palco (dois toques rapidos no play,
   por exemplo). "manipulation" mantem rolagem e pinca, e tira so o toque duplo.
   Vem no fim da folha e reafirma as excecoes logo abaixo. */
html, body, #app, .rep-player, .sheet, .sheet-card, .acct-card, .cfg-card, .song-form,
.dica, .bv, #songBack, #loadOv, .toast,
button, a, label, input, select, textarea, .song, .li-item, .cloud_file-item{
  touch-action:manipulation;
}
/* excecoes que precisam de gesto proprio */
.screen.active{touch-action:pan-y}     /* rolagem vertical da tela */
.rp-seek{touch-action:none}            /* arrastar a barra de progresso */
.drag-handle{touch-action:none}        /* reordenar musicas */
/* iOS nao aumenta a fonte sozinho ao girar a tela */
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}



/* ================= boot =================
   Tela de partida do app. Substitui a `scr-login` do prototipo, que era um
   formulario que nao autenticava nada e vinha marcada como active, entao era a
   primeira coisa que aparecia inclusive para quem tinha acabado de entrar.
   Aqui so existe a marca enquanto a porta de entrada resolve sessao e
   entitlement, mais o lugar onde um erro de configuracao fica VISIVEL em vez
   de virar tela branca. */
.boot{
  min-height:70vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:var(--space-4); text-align:center;
}
/* O QUE CARREGA E UMA LINHA, e nao uma roda.
 *
 * A roda girando e o desenho de "espere" de qualquer site desde 2010, e ela
 * dizia menos do que parecia: um aro de 24px com um quarto claro, girando ao
 * lado de uma marca de 72px, lia como uma engrenagem solta.
 *
 * A linha e da largura da palavra que esta em cima dela, e a luz atravessa de
 * ponta a ponta nas cores da marca - as mesmas do contorno da musica que toca e
 * do risco da aba ativa. A partida do app passa a falar a mesma lingua do resto
 * dele, em vez de um simbolo emprestado.
 *
 * E ela nao finge progresso: a varredura atravessa e recomeca, sem barra que
 * enche. Enquanto o app confere sessao e entitlement nao ha porcentagem
 * nenhuma para mostrar, e inventar uma e mentir para ganhar paciencia. */
/* O G CRESCE, porque agora e ele que abre a tela. Com o simbolo acima dele, os
   dois disputavam o mesmo papel: um dizia a marca parado, o outro dizia a marca
   se desenhando. Sobrou o que tambem informa - enquanto ele corre, o app esta
   conferindo sessao e entitlement. */
/* O simbolo da marca com a onda viva. O G vem do arquivo do simbolo, cortado
   logo acima da onda dele (o corte e a altura de .boot-g); a onda de baixo e
   a .onda-viva, nas mesmas proporcoes da onda do simbolo: 74% da largura, 18%
   de altura, a 8px do G. Quem olha ve o simbolo; so que a musica esta tocando. */
.boot-spin{display:flex; flex-direction:column; align-items:center; width:96px}
.boot-g{display:block; width:96px; height:64px; overflow:hidden}
.boot-g img{width:96px; height:96px; max-width:none}
.boot-spin .onda{--onda-w:71px; --onda-h:17px; --onda-vao:2.8px; margin-top:8px}
.boot-msg{
  max-width:32ch; color:var(--destructive);
  font-size:var(--text-sm); line-height:var(--leading-normal);
}
.boot-msg:empty{display:none}



/* ================= DESKTOP DE VERDADE (>=1024px) =================
   Fica no FIM do arquivo de proposito. Este CSS nao usa @layer, entao a ordem
   e a regra: colocado no topo, `.screen{position:absolute; inset:0}` da linha
   136 vencia e as telas cobriam a navegacao inteira.

   O que existia antes de tudo: #app travado em 434px de largura e 880px de
   altura, centralizado, com cantos e sombra. Num monitor de 1440 isso e meia
   tela de preto de cada lado: le como emulador de celular, nao como produto.

   Depois disso veio uma BARRA LATERAL de 248px, e ela tambem saiu. O app tem
   tres destinos (inicio, criar playback, todas as musicas) mais o menu de
   conta. Barra lateral existe para navegacao profunda, com secoes e
   subsecoes; com tres itens ela vira uma coluna de 248px permanentemente
   ocupada por tres palavras, tirando largura justamente das telas que mais
   precisam dela, que sao as grades de repertorio e de musicas.

   O que existe agora: BARRA DE TOPO. Marca a esquerda, os tres destinos no
   meio, conta a direita, e a tela inteira abaixo para o conteudo. E o padrao
   de app web de poucas telas, e devolve 248px de largura ao que interessa.

   O celular nao muda: abaixo de 1024 a barra nao existe e a navegacao continua
   sendo a dos cabecalhos de cada tela, com o botao de voltar. */
@media (min-width:1024px){
  /* ESCALA DE 90%, como se o navegador estivesse em 90%.
     Num monitor, tudo foi desenhado com medidas de celular (botao de 48px,
     corpo de 15px), e no desktop isso vira interface grande demais: cabe menos
     musica por tela e a lista parece feita para um aparelho que nao e este.
     `zoom` e o que reproduz o botao de zoom do navegador - encolhe TUDO junto,
     inclusive borda e espaco, sem cada medida ter que ser reescrita.

     MEDIDA DIVIDIDA PELA ESCALA. Primeiro tentei `width:100vw; height:100dvh`,
     supondo que o navegador ja devolvesse a unidade de tela corrigida. Nao
     devolve: 100vw dentro de zoom .9 vira 90% da janela, e sobrava uma faixa
     preta a direita e outra embaixo, com a barra de cima e a do player sem
     alcancar as bordas. Dividindo antes, o layout mede 111% e, encolhido a 90%,
     fecha exatamente na janela. */
  #app{
    --escala:.9;
    zoom:var(--escala);
    max-width:none;
    width:calc(100vw / var(--escala));
    height:calc(100dvh / var(--escala));
    margin:0; border:0; border-radius:0; box-shadow:none;
    display:grid;
    /* auto para a barra, o resto para o conteudo. minmax(0,1fr) e o que
       permite a tela rolar por dentro em vez de esticar a grade. */
    grid-template-rows:auto minmax(0,1fr);
    grid-template-columns:minmax(0,1fr);
    background:var(--bg2);
  }

  .app-nav{
    display:flex; flex-direction:row; align-items:center; gap:var(--space-1);
    padding:var(--space-3) var(--space-6);
    background:var(--surface); border-bottom:1px solid var(--line);
  }

  /* As telas deixam de ser camadas empilhadas sobre a moldura e viram o painel
     de conteudo da grade. `display` no lugar de opacidade/visibilidade porque
     no grid uma tela inativa em position:relative ainda OCUPA linha, e as oito
     empilhariam uma embaixo da outra. */
  /* `#app >` de proposito: a especificidade precisa vencer `#scr-stage`, que
     tem regra propria com seletor de id (1,0,0) declarando display:flex. Sem
     isso o palco continuava visivel, ocupava uma SEGUNDA linha da grade e
     espremia a primeira, deixando o resto da tela preto. Foi medido, nao
     deduzido, na epoca da barra lateral; vale igual na barra de topo. */
  #app > .screen{
    position:relative; inset:auto; display:none;
    padding:var(--space-8) var(--space-8) var(--space-10);
    background:var(--bg2); overflow-y:auto;
  }
  #app > .screen.active{
    display:block; opacity:1; transform:none; visibility:visible; pointer-events:auto;
  }
  /* O palco e a unica tela com layout proprio em coluna. Preserva o flex. */
  #app > #scr-stage.active{display:flex}
  /* GRADE DE CONTEUDO, no lugar de uma coluna de 880px encostada a esquerda.
     Com a coluna unica, um painel de 1192px ficava com metade vazia e o
     conteudo mal distribuido: os cartoes esticavam ate 880 e sobrava o resto.

     auto-fit com minmax deixa o navegador decidir quantas colunas cabem: uma
     no notebook estreito, duas ou tres no monitor grande, sem media query por
     largura. Cabecalho e titulo atravessam a grade inteira, porque sao da
     tela, nao um cartao. */
  #app > .screen.active{
    display:grid; align-content:start;
    grid-template-columns:repeat(auto-fit, minmax(340px, 1fr));
    gap:var(--space-5);
    /* 1360px era teto de notebook aplicado a qualquer monitor: num ultrawide
       sobravam mil pixels de preto a direita de tres cartoes espremidos.
       1600 com o painel centrado usa a tela sem esticar linha de texto alem
       da medida legivel, porque quem limita o texto e o cartao, nao a tela. */
    max-width:1600px; width:100%; justify-self:center;
  }
  #app > .screen.active > .header,
  #app > .screen.active > .hero,
  #app > .screen.active > .tela-hero,
  #app > .screen.active > .h-title,
  #app > .screen.active > .sub,
  #app > .screen.active > .row{grid-column:1 / -1}

  /* O titulo de tela dentro do bloco de abertura recebe a mesma escala. */
  #app > .screen.active > .tela-hero .h-title{
    font-size:clamp(30px, 2.4vw, 52px);
    letter-spacing:var(--tracking-brand);
    line-height:var(--leading-tight);
  }

  /* Botao que atravessa a tela inteira nao le como botao, le como faixa.
     A linha de acao da home ocupava 1128px num monitor de 1440 para dois
     rotulos de dez caracteres. O teto e generoso e mantem os dois lado a
     lado; o que ele impede e a faixa. */
  #app > .screen.active > .home-cta-row{max-width:560px}
  #app > .screen.active > .hero{max-width:820px}

  /* TITULO DE TELA, no mesmo degrau do titulo da tela de entrar.
     Era --text-2xl (27px) cravado, o mesmo tamanho em celular e em monitor de
     2553px: no celular ele abre a tela, no monitor ele desaparece no canto
     superior esquerdo de um painel de 2300px. O clamp faz o titulo acompanhar
     a largura de verdade.

     O teto e 52px, e nao os 92px da tela de entrar, de proposito: entrar e
     tela de marca e o titulo E a peca; estas sao telas de trabalho, e ali um
     titulo de cartaz rouba o lugar do conteudo. */
  #app > .screen.active > .h-title,
  #app > #scr-home.active > .hero .hero-ola{
    font-size:clamp(30px, 2.4vw, 52px);
    letter-spacing:var(--tracking-brand);
    line-height:var(--leading-tight);
  }
  /* O NOME DO SHOW NAO E O ASSUNTO DA TELA - as musicas sao. Ele chegou a 40px
     numa epoca em que dividia a linha com os botoes de acao e precisava
     sustentar aquela barra; os botoes foram para dentro do proprio nome, e o
     que sobrou foi um cartaz ocupando a primeira dobra de uma tela de lista.
     Em 21px ele continua sendo a primeira coisa que se le e devolve a altura
     para as musicas. */
  #app > #scr-rep.active > .h-title{
    font-size:var(--text-xl);
    letter-spacing:var(--tracking-brand);
  }
  /* E cola no alto: sem o "< Inicio" acima dele, os 20px de respiro da tela
     viravam um vao sem nada dentro. */
  #app > #scr-rep.active{padding-top:calc(8px + var(--sat))}

  /* ---------------- HOME NO DESKTOP ----------------
     A saudacao e as acoes dividem a MESMA linha, e os repertorios viram
     GRADE. Sem isso a home era uma coluna de 900px encostada na esquerda:
     num monitor de 2553px sobravam 1600px de preto, e nenhum acabamento de
     cartao salva uma tela que usa um terco do quadro.

     A grade nao e enfeite: repertorio e o objeto principal deste app, e uma
     lista de uma coluna so mostra tres itens onde cabem nove. */
  /* DUAS colunas: o conteudo a esquerda, as acoes a direita.
     `justify-self` no lugar de `margin-inline:auto`, que num grid item desliga
     o stretch e faz o painel inteiro encolher para o tamanho do conteudo. */
  #app > #scr-home.active{
    max-width:1600px; width:100%; justify-self:center;
    grid-template-columns:minmax(0,1fr) auto;
    row-gap:var(--space-6); column-gap:var(--space-8);
    align-content:start;
  }

  /* Saudacao a esquerda, acoes a direita, alinhadas pela base do texto. */
  #app > #scr-home.active > .hero{
    grid-column:1; grid-row:1; align-self:end; margin-bottom:0;
  }
  #app > #scr-home.active > .home-cta-row{
    grid-column:2; grid-row:1; align-self:end;
    margin-bottom:0; max-width:none; width:auto;
  }
  #app > #scr-home.active > .home-cta-row .btn{flex:0 0 auto; min-width:190px}

  /* "Todas as musicas" SAI da home no desktop: ele ja esta na barra de topo, a
     dois centimetros dali, e o mesmo destino oferecido duas vezes na mesma
     dobra faz a pessoa parar para decidir se sao a mesma coisa.

     A divisao passa a ser limpa: a barra de topo NAVEGA (ir a um lugar), a
     home tem a ACAO principal do produto, que e criar um playback.

     "Todas as musicas" nao precisa mais ser escondida aqui: ela deixou de ser um
     botao grande na home e virou o atalho ao lado do titulo dos repertorios, que
     cabe nas duas larguras. */
  /* O cartao atravessa as duas colunas: e ele que sustenta a largura da tela. */
  #app > #scr-home.active > .card{grid-column:1 / -1}

  /* Cartoes da mesma linha terminam na mesma altura. Alturas diferentes lado a
     lado sao o que faz uma grade parecer desalinhada mesmo com gap correto. */
  #app > .screen.active > .card{margin-bottom:0; align-self:stretch}

  /* Telas de lista continuam em coluna unica com largura de leitura: uma lista
     em tres colunas quebra a ordem do repertorio, que e o proprio dado. */
  #app > #scr-all.active,
  #app > #scr-rep.active,
  #app > #scr-lyrics.active{
    display:block; max-width:1100px;
  }

  /* A letra e o conteudo da tela de letra: no desktop a caixa cresce, em vez
     de manter os 180px de um campo de celular com 500px de vazio embaixo. */
  #scr-lyrics textarea.field{min-height:min(52vh, 520px)}
  /* Alturas iguais so importam em GRADE, onde itens lado a lado desalinhavam a
     fileira. Musica virou lista: cada uma ocupa a largura toda e a altura dela e
     a do conteudo, entao esticar e centralizar nao tem mais o que resolver -
     centralizar, alias, afastava o nome da nota numa linha baixa. */
  #repList{align-items:stretch}
  /* Respiro entre o titulo da tela e a linha de busca. */
  #scr-all > .row, #scr-lyrics > .card{margin-top:var(--space-5)}

  /* MODO PALCO: a letra e lida de longe, com o instrumento na mao. Num monitor
     ela continuava no corpo de celular. O nome da musica tambem sobe um degrau:
     e ele que diz o que esta tocando quando a tela fica so com a letra. */
  #scr-stage .stage-lyrics{font-size:clamp(21px, 1.9vw, 40px); line-height:1.65}
  #scr-stage .stage-title{font-size:var(--text-base)}
  #scr-stage .stage-time{font-size:var(--text-sm)}

  /* ---------------- PLAYER NO DESKTOP ----------------
     Capa a esquerda, tudo o que se opera a direita.

     Em coluna unica a capa virava uma FAIXA de 112px de altura com o simbolo
     pequeno no meio, ou seja um banner vazio ocupando o topo da tela onde a
     pessoa mais passa tempo, e os controles desciam para o meio do nada. Capa
     quadrada e o formato de capa; ao lado dela cabem titulo, transporte, tom e
     salvar sem que nada precise rolar. */
  #app > #scr-player.active{
    display:grid;
    grid-template-columns:minmax(260px, 340px) minmax(0, 1fr);
    column-gap:var(--space-10); row-gap:var(--space-4);
    align-content:start;
    max-width:1100px;
  }
  #scr-player > .header{grid-column:1 / -1}
  #scr-player > .artwork{
    grid-column:1; grid-row:2;
    height:auto; aspect-ratio:1; margin-bottom:0;
  }
  #scr-player > .artwork img{height:44%}
  /* A coluna de operacao e UM item de grade, e nao oito soltos: como oito, o
     primeiro deles caia na mesma linha da capa e esticava ate os 340px dela,
     abrindo um buraco entre o nome da musica e a barra de progresso. */
  #scr-player > .player-painel{
    grid-column:2; grid-row:2; align-self:start;
    display:flex; flex-direction:column; gap:var(--space-4);
  }
  #scr-player > .player-painel > *{margin-top:0; margin-bottom:0}

  /* O nome da musica e o assunto da tela: sai do tamanho de um rotulo de campo
     e passa a abrir a coluna. Alinhado a esquerda, junto do resto. */
  #scr-player .pl-title-input{
    font-size:var(--text-2xl); text-align:left; padding:var(--space-2) var(--space-8) var(--space-2) 0;
  }
  #scr-player .pl-title-pencil{right:auto; left:auto; margin-left:var(--space-2)}
  #scr-player .pl-title-wrap{margin-bottom:var(--space-2)}
  /* Transporte alinhado a esquerda: centrado, o botao ficava boiando no meio
     de uma coluna de 700px sem nada em volta. */
  #scr-player .controls{justify-content:flex-start; margin:var(--space-2) 0}
  #app > #scr-stage.active{display:flex; max-width:none}

  /* A marca e o atalho de conta ja vivem na barra de topo. Repetir no
     cabecalho da tela e dizer a mesma coisa duas vezes na mesma dobra. O
     relogio e o botao de voltar ficam: sao da tela, nao da navegacao. */
  .header .brand, .header .avatar{display:none}
  .header:empty{display:none}

  /* O cabecalho COLAPSA quando nao sobrou nada visivel nele.
     Na home ele ficava com `min-height:40px` mais margem e virava uma LINHA DE
     GRADE DE 64px completamente vazia entre a saudacao e os repertorios: foi
     medido, sao 89px de hero, 24 de gap, 64 de nada e mais 24 de gap antes do
     conteudo comecar. Ele nao casa em `:empty` porque os filhos continuam no
     DOM, so ocultos.

     Com min-height zero a altura passa a vir do conteudo: zero quando so ha
     elementos ocultos, e a altura do botao de voltar nas telas que o tem. */
  #app > .screen.active > .header{min-height:0; margin-bottom:0}
}

/* Aparencia da barra lateral. Fica junto da media query que a liga, no fim do
   arquivo, para nao se perder de novo numa mudanca de ordem. */
/* Aparencia da barra de topo. Fica junto da media query que a liga, no fim do
   arquivo, para nao se perder de novo numa mudanca de ordem. */
.app-nav-marca{
  display:flex; align-items:center; gap:var(--space-2);
  /* A marca ganha uma divisoria a direita: ela identifica o produto, os itens
     ao lado navegam. Sem a separacao, o logo vira o primeiro item de um
     menu de quatro. */
  margin-right:var(--space-4); padding-right:var(--space-5);
  border-right:1px solid var(--border);
  color:var(--text); text-decoration:none;
  font-size:var(--text-md); font-weight:var(--weight-semibold); letter-spacing:var(--tracking-tight);
  white-space:nowrap;
}
.app-nav-marca img{height:28px; width:auto; flex-shrink:0}

.app-nav-item{
  display:flex; align-items:center; gap:var(--space-2);
  padding:var(--space-2) var(--space-3);
  background:none; border:none; border-radius:var(--radius-md);
  color:var(--muted); font-family:inherit; font-size:var(--text-sm); font-weight:var(--weight-medium);
  cursor:pointer; white-space:nowrap;
  transition:background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.app-nav-item svg{
  width:17px; height:17px; flex-shrink:0;
  fill:none; stroke:currentColor; stroke-width:2;
}
.app-nav-item:hover{background:var(--card); color:var(--text)}
/* Onde voce esta: fundo mais claro e texto branco. A barra de acento que
   existia na lateral esquerda nao se traduz para uma barra horizontal, onde
   ela viraria um risco vertical no comeco do rotulo. */
.app-nav-item.on{background:var(--card-elevated); color:var(--text)}
/* Empurra o menu de conta para a direita da barra. */
.app-nav-fim{flex:1}

/* ---------------- grade de cartoes no desktop ---------------- */
@media (min-width:1024px){
  /* MUSICA E LISTA, uma abaixo da outra - tambem no desktop.
     Elas ja estiveram em grade de cartoes, e a grade tem um custo que so aparece
     em uso: com cinco colunas num monitor largo, achar a musica certa deixa de
     ser percorrer uma coluna e passa a ser varrer a tela nos dois eixos. Quem
     esta montando o show procura por NOME, e nome se le em fila.
     Repertorio continua em grade: sao poucos e cada um e um bloco, nao um item. */
  /* O repertorio e LISTA, como a musica. Ele ficou em grade enquanto era o unico
     na tela; agora divide a home com a lista de musicas, e uma grade ao lado de
     uma coluna e a diferenca mais visivel que poderia haver entre as duas. */
  #repList{display:flex; flex-direction:column; gap:var(--space-2)}
  #allList,
  #songList{
    display:flex;
    flex-direction:column;
    gap:var(--space-2);
  }
  #repList .list-item{margin-bottom:0; width:100%}
  /* O gap da coluna ja separa as linhas; a margem de baixo somaria por cima. */
  #allList .song,
  #songList .song{margin-bottom:0; width:100%}

  /* A SECAO de repertorios perde a caixa em volta.
     Cartao dentro de cartao e o que faz uma tela parecer painel de
     administracao: a moldura externa nao carrega informacao nenhuma, so
     estreita o conteudo e repete a borda que cada item ja tem. Fica o titulo
     de secao, a busca e a grade. */
  #app > #scr-home.active > .card{
    background:none; border:0; padding:0;
  }

  /* O REPERTORIO NAO TEM MAIS FORMA PROPRIA NO DESKTOP.
     Havia aqui um bloco inteiro que o transformava em cartao alto: coluna,
     132px de altura minima, icone de 44px e titulo um grau maior. Fazia sentido
     quando ele ocupava a tela sozinho, em grade de tres. Agora ele fica LADO A
     LADO com a lista de musicas, e esse mesmo bloco era toda a diferenca que se
     via entre as duas colunas - uma com linhas justas, a outra com cartoes do
     dobro da altura. Sem estas regras, ele herda o cartao da musica, que e o
     que se queria. */

  /* A lista de um repertorio ABERTO continua em coluna unica: ali a ordem das
     musicas e o proprio dado do show, e grade quebra a leitura de cima para
     baixo. Vale so para a home e para "todas as musicas", que sao acervo. */
  #scr-rep #songList{display:block}
  #scr-rep #songList .song{margin-bottom:var(--space-2)}

  /* O estado vazio ocupa a largura inteira da grade, senao ele vira uma
     coluna estreita com uma frase solta no canto. */
  #repList .empty,
  #allList .empty,
  #songList .empty{grid-column:1 / -1}

  #app > .screen.active > .card{
    display:flex; flex-direction:column;
  }
  /* O ultimo botao do cartao desce para a base. Sem isto, cartoes com textos de
     alturas diferentes deixam os botoes em linhas diferentes, e a grade parece
     desalinhada mesmo com o gap correto. */
  #app > .screen.active > .card > .btn:last-child{margin-top:auto}
}

/* Painel do Estudio para Windows */
.sheet-title-x{padding-right:34px}
.btn.cheio{display:flex;justify-content:center;width:100%;margin-top:12px;text-decoration:none}
/* display:flex acima venceria o [hidden] do navegador, e o botao de baixar
   apareceria sem instalador publicado, levando a um 404. */
.btn.cheio[hidden]{display:none}
.st-dica{margin-top:14px}

/* ================= LARGURA DO APP NO DESKTOP =================
   Num monitor ultrawide (3440px) a barra de topo e o player iam de borda a
   borda: logo num canto, "Conta" no outro, os botoes do player a tres mil
   pixels do titulo da musica, e o conteudo numa ilha no meio. Agora tudo vive
   numa largura so, centralizada, e os quatro andares (barra, titulo,
   conteudo, player) terminam no mesmo eixo. O fundo continua ocupando a tela;
   so o que se le e o que se toca fica dentro da coluna. */
@media (min-width:1024px){
  :root{--largura-app:1200px}
  .app-nav{padding-inline:max(var(--space-6), calc((100% - var(--largura-app)) / 2))}
  #app > .screen.active,
  #app > #scr-home.active{max-width:var(--largura-app)}
  #app > #scr-all.active,
  #app > #scr-rep.active,
  #app > #scr-lyrics.active,
  #app > #scr-player.active{max-width:960px}
  .rep-player, .rp-seek{
    left:max(var(--space-6), calc((100% - var(--largura-app)) / 2));
    right:max(var(--space-6), calc((100% - var(--largura-app)) / 2));
  }
}

/* Repertorio em blocos: vence as margens fixas de lista das regras de desktop
   acima (o vao entre os cartoes E a juncao, e nao pode ser engolido). */
#scr-rep #songList .song{margin-bottom:0; overflow:visible}
#scr-rep #songList .song.emenda{margin-bottom:26px}
#scr-rep #songList .song.pausa{margin-bottom:50px}

/* ---------------- letra sincronizada ----------------
   No palco a linha cantada acende e fica no centro; as outras apagam para o
   olho achar o lugar de relance, com o instrumento na mao. */
/* A FOLGA FICA EMBAIXO, e nao em cima.
   `padding:38vh 0` era do desenho antigo, em que a linha que toca ficava no
   CENTRO da tela: a folga de cima existia para a primeira linha alcancar o meio.
   Com a linha no alto ela virou um vazio de 38% da tela entre a barra e o comeco
   da letra - foi exatamente isso que apareceu em uso. Embaixo a folga continua
   fazendo falta, para a ULTIMA linha conseguir subir como todas as outras. */
.stage-lyrics.sinc{white-space:normal; padding:6px 0 72vh}
.stage-lyrics.sinc .lrc-linha{color:var(--muted); opacity:.8; padding:.18em 7%; transform:scale(.86);
  transition:color .25s ease, opacity .25s ease, transform .25s ease}
/* Mesma cor do painel: e a mesma informacao, e duas cores para a mesma coisa
   fariam duvidar se sao a mesma coisa. */
.stage-lyrics.sinc .lrc-linha.ativa{color:var(--brand-1); opacity:1; transform:scale(1.12)}
.selo-sinc{display:inline-block; margin-left:8px; padding:1px 7px; border-radius:var(--radius-full);
  border:1px solid var(--success-border); color:var(--success);
  font-size:10.5px; font-weight:var(--weight-semibold); vertical-align:1px}


/* ============ HOME EM DUAS COLUNAS (desktop) ============
   No celular as duas listas se alternam por aba: nao ha largura para as duas, e
   trocar de aba custa um toque.

   Num monitor essa alternancia e desperdicio - sobra largura dos dois lados - e
   custa mais que um toque: comparar "esta musica ja esta em algum repertorio?"
   exigia ir e voltar de memoria. Lado a lado a comparacao e so olhar.

   MUSICA A ESQUERDA porque e a lista longa, e a leitura comeca ali. */
@media (min-width:1024px){
  .home-colunas{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:var(--space-6);
    align-items:start;
  }
  /* A ordem no HTML e repertorios, depois musicas - porque no celular a aba
     padrao e a de repertorios. Aqui a musica vem primeiro, sem mexer no JS. */
  #blocoTodas{order:1}
  #blocoReps{order:2}
  /* Nenhuma das duas fica escondida: as abas existem para o celular. */
  #blocoTodas[hidden], #blocoReps[hidden]{display:block}
  .abas{display:none}
  /* Cada coluna ganha o proprio titulo, ja que as abas sairam. */
  #blocoTodas::before{content:'Todas as músicas'}
  #blocoReps::before{content:'Meus repertórios'}
  #blocoTodas::before, #blocoReps::before{
    display:block; margin-bottom:var(--space-3);
    font-size:var(--text-md); font-weight:var(--weight-semibold);
    letter-spacing:var(--tracking-tight); color:var(--text);
  }
}

/* O CARTAO DE REPERTORIO com a mesma medida do de musica: elas ficam lado a lado
   e duas formas diferentes para a mesma acao - escolher um item - fazem a tela
   parecer dois apps. Mesma altura de linha, mesmo respiro, mesmo numero. */
/* O REPERTORIO USA O CARTAO DA MUSICA (classes `song list-item`).
   `list-item` fica so como gancho - o destaque de "tocando agora" e as consultas
   do JS dependem dela - mas quem manda no desenho e `.song`. Sem isto as duas
   regras brigam: `.list-item` e um flex com padding proprio e `.song` e um
   cartao com o padding dentro de `.song-main`. */
/* Sem `background` aqui: ele existia para o cartao do repertorio nao pegar o
   fundo de `.list-item`, e era exatamente ele que segurava o cinza depois que os
   cartoes passaram ao azul-noite - especificidade (0,2,0) contra a (0,1,0) da
   regra de cor. Com os dois pintados pela mesma regra, esta declaracao so
   poderia divergir. */
.song.list-item{display:block; padding:0; gap:0}
.song.list-item:active{transform:none}
/* O selo NOVA encosta a direita, antes do lapis - o mesmo lugar em que a musica
   poe o dela. */
.song-main .new-badge{margin-left:auto}


/* Controle de rolagem no palco: so aparece na letra sem marcacao.
   Fica do tamanho dos botoes de transporte, ao lado deles, porque e a mesma
   familia de acao - reger o que anda na tela. */
.stage-rolagem{display:flex; align-items:center; gap:6px; flex:0 0 auto}
.stage-rolagem[hidden]{display:none}
.stage-rolagem button{
  width:24px; height:24px; border-radius:var(--radius-full); cursor:pointer;
  background:var(--card); color:var(--text); border:1px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center;
}
.stage-rolagem button svg{width:12px; height:12px}
.stage-rolagem button.on{background:var(--accent); color:var(--accent-foreground); border-color:transparent}
.stage-rolagem input[type=range]{width:74px}
@media (max-width:520px){ .stage-rolagem input[type=range]{width:54px} }


/* AS DUAS COLUNAS COMECAM NA MESMA LINHA.
   A busca de musica termina num botao de texto ("Recentes") e a de repertorio
   num quadrado de 48px: larguras diferentes deixavam os dois campos de tamanhos
   diferentes, e a linha de baixo - onde a lista comeca - caia em alturas
   diferentes. Duas colunas lado a lado com o conteudo desalinhado leem como duas
   telas coladas, que e justamente o que se estava corrigindo.

   O botao de ordenar ganha a mesma largura do outro, e as duas listas ganham a
   mesma folga acima. */
/* O BOTAO DE ORDENAR TINHA ESTILO INLINE, e `min-height:auto` junto: inline
   vence qualquer folha, entao ele ficava mais BAIXO que o campo de busca ao lado
   e a linha inteira desalinhava - inclusive contra a outra coluna. Agora e uma
   classe, e a altura e a mesma de todo botao. */
.btn-ordenar{
  flex:0 0 auto; width:104px; padding:0 16px; white-space:nowrap;
  font-size:calc(13px * var(--fs)); font-weight:700;
}
#blocoReps > .row > .btn.icon-only{
  flex:0 0 auto; width:104px;
}
#repList, #homeAllList{margin-top:13px}
/* A linha de "novo repertorio" abre ABAIXO das duas buscas, e por isso nao pode
   empurrar so a coluna dela: ela e um passo a parte, e nao parte do cabecalho. */
#newRepRow{margin-top:10px}


/* ============ LETRA AO LADO DA LISTA (repertorio) ============

   A lista nao "pula" para a esquerda: a coluna da letra e que CRESCE de zero ate
   metade, e a lista cede o espaco. E a mesma coisa vista de dois lados, mas o
   olho le como um deslizar, e nao como um salto - que e o que se pediu.

   O que anima e `flex-basis`, e nao `width` do filho: assim a lista continua
   sendo um item flexivel e nao precisa saber nada sobre a letra. */
.rep-palco{display:flex; gap:0; align-items:stretch; min-height:0}
.rep-palco > #songScroll{flex:1 1 auto; min-width:0; transition:none}

.rep-letra{
  flex:0 0 0; width:0; min-width:0; overflow:hidden;
  opacity:0; pointer-events:none;
  transition:flex-basis .38s var(--ease, cubic-bezier(.4,0,.2,1)),
             opacity .26s ease;
}
/* 30 DA LISTA, 70 DA LETRA. Meio a meio tratava as duas como se pedissem o
   mesmo espaco, e nao pedem: a lista sao linhas curtas (nome, tom, duracao) que
   cabem em pouca largura, e a letra e o texto que se LE, onde largura a mais
   vira menos quebra de verso e menos rolagem.
   Foi de 60 para 70 porque a lista e consulta e a letra e leitura continua: a
   coluna da esquerda nao ficou apertada - ela so parou de guardar largura que
   nao usava. O piso de 420px e o que impede a letra de virar uma tira estreita
   numa janela encostada na metade da tela. */
.rep-palco.com-letra > .rep-letra{
  flex-basis:clamp(420px, 70%, 1200px); opacity:1; pointer-events:auto;
}
.rep-letra-dentro{
  height:100%; margin-left:var(--space-5);
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-xl); padding:var(--space-4);
  display:flex; flex-direction:column; min-width:280px;
}
.rep-letra-titulo{
  font-weight:var(--weight-semibold); letter-spacing:var(--tracking-tight);
  margin-bottom:var(--space-3); color:var(--text);
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.rep-letra-texto{
  flex:1; overflow-y:auto; white-space:pre-wrap;
  font-size:var(--text-md); line-height:1.7; color:var(--muted);
  scrollbar-width:thin;
}
.rep-letra-texto.vazia{color:var(--muted2); font-style:italic}
/* O botao "Ver letra" da barra do player, aceso enquanto a tela esta dividida. */
.rp-btn.on{background:var(--accent); color:var(--accent-foreground); border-color:transparent}

/* Titulo a esquerda, tela cheia a direita. */
.rep-letra-topo{display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-3)}
.rep-letra-topo .rep-letra-titulo{flex:1; min-width:0; margin-bottom:0}
/* O topo do painel ficou so com o nome da musica: tamanho da letra e tela
   cheia subiram para a linha do resumo, alinhados com a borda desta coluna. */
/* O tamanho da letra saiu daqui para o alto da tela, ao lado do tamanho da
   lista: os dois fazem a mesma coisa em colunas diferentes e agora se leem como
   um par. */

/* Quem prefere menos movimento nao recebe o deslizar - so o resultado. */
@media (prefers-reduced-motion:reduce){
  .rep-letra{transition:none}
}


/* A TELA DO REPERTORIO ALARGA QUANDO A LETRA ENTRA.
   Ela e limitada para a linha de texto nao esticar alem da medida legivel. Com
   duas colunas, a medida passa a ser a de CADA coluna, e o teto de uma so
   espremeria as duas em metades estreitas. O teto continua existindo, so muda de
   valor - e a mudanca tambem desliza, junto com a coluna. */
@media (min-width:1024px){
  #app > #scr-rep.active{
    transition:max-width .38s cubic-bezier(.4,0,.2,1);
  }
  #app > #scr-rep.active.com-letra{max-width:1600px}
}
@media (prefers-reduced-motion:reduce){
  #app > #scr-rep.active{transition:none}
}


/* A letra do painel segue a musica, com a MESMA marcacao do modo palco: linha
   apagada, a que toca acesa e um pouco maior. Duas maneiras de acender a mesma
   letra na mesma tela seriam duas coisas para aprender. */
.rep-letra-texto.sinc{white-space:normal; padding-bottom:60%}
/* O QUE AINDA NAO FOI CANTADO PRECISA SER LIDO. Em `--muted2` a 55% o verso
   seguinte quase desaparecia contra o fundo escuro, e e justamente ele que se
   esta preparando para cantar - a linha acesa a pessoa ja sabe, esta cantando
   ela. Mais claro, o que vem continua legivel e a acesa continua sendo a que
   salta, pela cor e nao pela falta de contraste da vizinhanca. */
.rep-letra-texto.sinc .lrc-linha{
  color:var(--muted); opacity:.8; padding:.18em 7%; text-align:center; transform:scale(.86);
  transition:color .25s var(--ease), opacity .25s var(--ease), transform .25s var(--ease);
}
/* A LINHA QUE TOCA EM AZUL CLARO, e nao em branco.
   Branco era a mesma cor do texto comum, so que com mais opacidade: para saber
   onde estava era preciso comparar linha com linha. O azul da marca se acha sem
   procurar, mesmo de longe e mesmo com a tela de lado no palco. */
/* A LINHA QUE TOCA E MAIOR. Cor sozinha se perde quando a tela esta de lado
   num tripe, a tres metros, com luz de palco batendo: tamanho nao se perde.
   A escala vale mais que a cor porque ela muda a SILHUETA do bloco de texto -
   da para achar a linha sem chegar a ler nada. */
.rep-letra-texto.sinc .lrc-linha.ativa{
  color:var(--brand-1); opacity:1; transform:scale(1.14);
}

/* O botao do cabecalho, aceso enquanto a tela esta dividida. */




/* ============ CONTORNO QUE CORRE, NO CARTAO QUE ESTA TOCANDO ============

   O QUE ELE RESOLVE. Numa lista de trinta musicas, achar a que esta tocando era
   ler: o sinal eram uma borda um tom mais clara e um tracinho na esquerda, duas
   coisas discretas demais para o palco, onde se olha a tela de relance com o
   instrumento na mao. Um contorno que se MEXE se acha sem procurar - movimento e
   a unica coisa que a visao periferica pega sozinha.

   FINO DE PROPOSITO: 1.5px. A versao antiga disso gritava, e o cartao virava o
   assunto da tela em vez da musica.

   COMO E FEITO. Dois fundos: o de dentro (padding-box) pinta o cartao, o de fora
   (border-box) pinta a borda, que fica transparente para deixar ver. E o que
   permite canto arredondado - `border-image` com gradiente perde o raio - e
   dispensa posicionamento, que neste cartao e proibido: `position` aqui prende o
   modal de editar abaixo do fundo escurecido (ver .song, acima).

   O PRECO: o fundo do cartao passa a ser escrito aqui, entao hover e :active nao
   podem mais troca-lo por fora. Por isso o :hover vem junto, logo abaixo. */

/* O CONTORNO E O CORAL DA MARCA, parado. Era o arco-iris do simbolo antigo
   correndo em volta do cartao. Na marca nova o coral quer dizer "esta tocando"
   (e o trecho da onda que ja saiu do play), entao o cartao que toca ganha o
   coral chapado, e nada corre: a cor ja diz o que o movimento dizia. No claro
   o --brand-1 e o coral escuro, que se destaca do creme. */
:root{
  --fita-marca:linear-gradient(90deg, var(--brand-1), var(--brand-1));
}
.song.current, .list-item.current{
  border:1.2px solid transparent;
  /* O miolo em azul-noite, um degrau acima dos outros cartoes: o que esta
     tocando e a unica coisa da lista que se procura de longe, e ele ganha
     contorno E superficie. Em `--card-elevated` ele era o ultimo cinza
     sobrando no meio de uma lista inteira em azul. */
  background:
    var(--atual-fundo) padding-box,
    var(--fita-marca) border-box;
  background-size:auto, 300% 100%;
  background-position:0 0, 0 0;
}
.song.current:hover, .list-item.current:hover{
  background:
    var(--atual-fundo-hover) padding-box,
    var(--fita-marca) border-box;
  background-size:auto, 300% 100%;
}
/* Sem o tracinho na esquerda: o contorno ja cerca o cartao inteiro, e o traco
   ficava por dentro dele dizendo a mesma coisa duas vezes. */
.song.current, .list-item.current{box-shadow:none}



/* ============ CABECALHO DO REPERTORIO, BARRA DO PLAYER, LISTA ============ */

/* O nome do show e o botao que abre o que se faz com ele. Ele se parece com o
   titulo que era antes - o lapis so aparece de verdade no hover, porque o nome
   e para LER primeiro e clicar depois. */
.rep-nome{
  display:inline-flex; align-items:center; gap:10px; max-width:100%;
  background:none; border:0; padding:2px 8px 2px 0; margin-left:-2px;
  color:inherit; font:inherit; text-align:left; cursor:pointer;
  border-radius:var(--radius-md);
}
.rep-nome > span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rep-nome svg{width:17px; height:17px; flex:0 0 auto; opacity:0; color:var(--muted);
  transition:opacity var(--duration) var(--ease)}
.rep-nome:hover svg, .rep-nome:focus-visible svg{opacity:.85}

/* A linha do resumo se divide igual ao que ha embaixo dela: mesma proporcao,
   mesma animacao. E o que faz cada par de botoes terminar na borda da coluna
   que ele controla. */
.rep-linha-resumo{display:flex; align-items:center; gap:0; margin:-4px 0 16px}
.rlr-lista{flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:var(--space-3)}
.rlr-lista .rep-resumo{margin:0; flex:1; min-width:0}
.rlr-letra{
  flex:0 0 0; min-width:0; overflow:hidden; opacity:0; pointer-events:none;
  display:flex; justify-content:flex-end;
  transition:flex-basis .38s var(--ease, cubic-bezier(.4,0,.2,1)), opacity .26s ease;
}
/* O RECUO SO EXISTE COM A COLUNA ABERTA. Com `flex-basis:0` e `box-sizing`
   de borda, o padding nao cabe dentro de zero: o navegador estica a caixa ate
   caber, e a coluna "fechada" seguia roubando 20px da linha do resumo - no
   celular, onde ela nunca abre, 20px de largura que nunca seriam usados. */
#scr-rep.com-letra .rlr-letra{
  /* A MESMA CONTA DA COLUNA DE BAIXO, e nao um valor parecido: sao as duas
     metades da mesma divisa, e um pixel de diferenca aqui desalinha o titulo da
     letra do texto dela. */
  flex-basis:clamp(420px, 70%, 1200px); opacity:1; pointer-events:auto;
  padding-left:var(--space-5);
}
.lista-zoom{display:flex; gap:6px; flex:0 0 auto}
.lista-zoom button{
  width:28px; height:28px; border-radius:var(--radius-sm);
  background:var(--card-elevated); border:1px solid var(--border);
  color:var(--muted); cursor:pointer; opacity:.7;
  font:600 14px/1 var(--font-sans);
}
.lista-zoom button:hover:not(:disabled){opacity:1; color:var(--text); border-color:var(--border-hover)}
.lista-zoom button:disabled{opacity:.25; cursor:default}

/* O zoom vale para as duas listas de musica, e so para elas: o resto da tela
   (cabecalho, resumo, barra do player) nao muda de tamanho junto. */
#songList, #allList{zoom:var(--lista-zoom, 1)}

/* ---- modo palco: botoes de acao maiores ----
   Eles sao o que se aperta COM O INSTRUMENTO NA MAO, muitas vezes sem olhar
   direito. 26px era menor que o proprio icone de letra ao lado. */
.stage-ctrl.mini button{width:34px; height:34px}
.stage-ctrl.mini button.sec{width:31px; height:31px}
.stage-ctrl.mini button svg{width:17px; height:17px}
.stage-ctrl.mini button.sec svg{width:15px; height:15px}

/* O tempo na barra do player. */
.rp-hora{flex:0 0 auto; margin-left:var(--space-2); color:var(--muted)}

@media (min-width:1024px){
  /* A BARRA COLA NO FUNDO DA JANELA.
     Flutuando a 14px das bordas, com canto arredondado, ela lia como cartao
     solto por cima do conteudo, e sobrava uma faixa de fundo embaixo em que
     nada acontece. Colada, vira o rodape do aplicativo - que e o que ela e. */
  .rep-player{
    left:0; right:0; bottom:0;
    border-radius:0; border-left:0; border-right:0; border-bottom:0;
    padding-inline:max(var(--space-6), calc((100% - var(--largura-app)) / 2));
  }
  .rp-seek{left:0; right:0; bottom:var(--rp-h, 74px)}

  /* NOME E "A SEGUIR" SAEM DA BARRA. No monitor a lista esta na tela, com o
     cartao do que toca contornado, e o palco mostra os dois em letra grande:
     repetir aqui era escrever tres vezes a mesma coisa e roubar a largura do
     transporte. A barra fica com o que so ela tem: tempo e botoes. */
  .rep-player .rp-body{display:none}
  .rep-player .hd-time.on{display:block}
  /* O tempo do cabecalho sai junto: ele agora mora na barra. */
  #scr-rep .hd-time, #scr-all .hd-time, #scr-home .hd-time{display:none}
  /* Sem o texto no meio, o transporte vai para a direita. O empurrao vem do
     primeiro botao, e nao do tempo: o tempo some quando nao ha musica, e ai o
     empurrao sumiria com ele.
     O PRIMEIRO BOTAO JA MUDOU DE NOME DUAS VEZES: era o da letra, que saiu do
     rodape; depois o de voltar; agora o de parar, porque a ordem passou a ser a
     do palco. O que a regra quer e sempre o PRIMEIRO - trocar o id junto e o
     preco de escrever isso com nome proprio, e nome proprio e o que deixa claro
     de quem sai o empurrao. */
  .rep-player #rpStopBtn{margin-left:auto}
}

/* A- e A+ sao duas letras num botao de 28px: um ponto menor que o - e o + da
   lista, que sao um sinal so. */
.rlr-letra .lista-zoom button{font-size:12px}

/* O tres controles da letra sao do mesmo tamanho: o de tela cheia era um botao
   flutuante no canto do painel, com desenho proprio. */
.rlr-letra .lista-zoom #repLetraCheia{font-size:13px}


/* A margem saiu do atributo style para poder mudar no monitor. No celular ela
   continua a mesma. */
#repTituloLinha{margin-bottom:14px}

/* ---- o alto da tela de repertorio, no monitor ----

   O QUE HAVIA. Um "< Inicio" numa linha de 40px, o nome do show numa segunda
   linha em corpo 27, e o resumo numa terceira: tres linhas e quase 120px antes
   da primeira musica, numa tela que existe para mostrar a LISTA.

   O "< Inicio" e o primeiro a sair: a barra de topo ja tem Inicio, a dois
   centimetros dali, e um botao de voltar so faz sentido onde nao ha navegacao
   visivel - que e o celular, e la ele fica. Sem ele o cabecalho colapsa
   sozinho (a regra de min-height:0 acima ja cuida disso) e o nome sobe.

   E o nome encolhe de 27 para 21: ele diz em qual show voce esta, nao e o
   assunto da tela. O assunto sao as musicas. */
@media (min-width:1024px){
  #scr-rep > .header{display:none}
  #repTituloLinha{margin-bottom:var(--space-2)}

  /* A BARRA DO PLAYER MAIS BAIXA. Ela e fixa: cada pixel dela e um pixel a
     menos de lista, o tempo todo. Os botoes continuam grandes o bastante para
     acertar sem olhar - o que encolheu foi o vao em volta. */
  .rep-player{padding-block:6px}
  .rep-player .rp-btn{width:34px; height:34px}
  .rep-player .rp-btn.sec{width:28px; height:28px}
  .rep-player .rp-btn svg{width:15px; height:15px}
  .rep-player .rp-btn.sec svg{width:13px; height:13px}
  #app.has-bar .screen{padding-bottom:66px}
  #app.has-bar.has-seek .screen{padding-bottom:92px}
}


/* A regulagem de rolagem dentro da barra do player. Mesmo desenho da do palco:
   e o mesmo controle, e ver dois desenhos para a mesma coisa faz duvidar se
   fazem a mesma coisa. */
.rp-rolagem{display:flex; align-items:center; gap:var(--space-2); flex:0 0 auto;
  margin-left:var(--space-3)}
.rp-rolagem[hidden]{display:none}
.rp-rolagem input[type=range]{width:96px; accent-color:var(--accent); cursor:pointer}


/* ======== CADA COLUNA ROLA POR DENTRO, no monitor ========

   O QUE ESTAVA ERRADO. A tela inteira era um scroller so (`overflow-y:auto` em
   .screen.active) e a coluna da letra apenas CRESCIA com o texto. Duas coisas
   quebravam por causa disso:

   1. a letra descia ate o fim da pagina, e ler o fim dela empurrava a lista, o
      titulo e tudo mais para fora da tela;
   2. a rolagem automatica nao saia do lugar. Ela mede `scrollHeight` contra
      `clientHeight` para saber quando chegou ao fim; numa caixa que cresce
      junto com o conteudo esses dois numeros sao iguais desde o primeiro
      quadro, entao ela entendia "ja acabou" e parava antes de comecar. O botao
      acendia e apagava, e nada se movia.

   O CONSERTO. A tela vira uma coluna de altura fixa: titulo e resumo em cima,
   e embaixo a linha das duas colunas ocupando o que sobrou. Cada coluna rola
   por dentro de si - a lista sem levar a letra junto, a letra sem levar a
   lista. E a rolagem automatica passa a ter um fim de verdade para perseguir. */
@media (min-width:1024px){
  /* `gap:0` NAO E DETALHE. A regra geral das telas de desktop e uma GRADE com
     `gap:var(--space-5)`, e `gap` vale igual para flex: ao trocar o display por
     flex aqui, aqueles 20px continuaram valendo e passaram a se somar as
     margens de cada bloco. O resultado foi o nome, o resumo e a lista se
     afastando um do outro sem que nada tivesse pedido isso. */
  #app > #scr-rep.active{display:flex; flex-direction:column; overflow:hidden; gap:0}
  /* Os controles descem para junto do que eles controlam: o - e o + quase
     encostando no primeiro cartao, o A- e o A+ na borda de cima do painel. Um
     botao longe do seu alvo vira mais um enfeite na faixa de cima. */
  #repTituloLinha{margin-bottom:2px}
  #scr-rep .rep-linha-resumo{align-items:flex-end; margin:0 0 6px}
  /* O MESMO RECUO DA LISTA. `#songScroll` reserva 6px a direita para a barra de
     rolagem dela, entao o cartao termina 6px antes da borda da coluna. Sem
     repetir esse recuo aqui, o - e o + ficavam alinhados com a COLUNA e o
     cartao com outra linha - seis pixels de desencontro, que e pouco para se
     explicar e muito para nao se ver. */
  #scr-rep .rlr-lista{padding-right:6px}
  #scr-rep > .rep-palco{flex:1 1 auto; min-height:0}
  #scr-rep #songScroll{overflow-y:auto; min-height:0; padding-right:6px}
  #scr-rep .rep-letra-dentro{min-height:0}
}

/* ---- a barra de rolagem da letra ----
   Ela fica DENTRO de um cartao escuro e e a unica visivel do app, entao vale
   desenha-la: trilho invisivel e um polegar na cor da borda forte. Ja foi
   colorido; com a marca nova o coral so diz "tocando", e uma barra de rolagem
   coral diria isso de um lugar onde nada toca. Fina, arredondada e destacada do
   texto por uma margem transparente, para nao encostar na ultima palavra. */
.rep-letra-texto{scrollbar-width:thin; scrollbar-color:var(--border-hover) transparent}
.rep-letra-texto::-webkit-scrollbar{width:10px}
.rep-letra-texto::-webkit-scrollbar-track{background:transparent}
.rep-letra-texto::-webkit-scrollbar-thumb{
  border-radius:999px;
  border:3px solid transparent;
  background:var(--border-hover);
  background-clip:content-box;
}
.rep-letra-texto::-webkit-scrollbar-thumb:hover{border-width:2px}

/* A lista usa a mesma barra, em cinza: ela nao e o assunto, e duas barras
   coloridas lado a lado viram enfeite. */
#songScroll{scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent}
#songScroll::-webkit-scrollbar{width:10px}
#songScroll::-webkit-scrollbar-track{background:transparent}
#songScroll::-webkit-scrollbar-thumb{
  border-radius:999px; border:3px solid transparent;
  background:var(--border-strong); background-clip:content-box;
}
#songScroll::-webkit-scrollbar-thumb:hover{background:var(--border-hover); background-clip:content-box}


/* ================= TELA CHEIA DA LETRA, NO PROPRIO LUGAR =================

   A coluna da direita cresce para a esquerda ate ocupar a tela. Some a barra de
   navegacao, some o nome do show e some a lista - fica a letra, os tres botoes
   que a controlam e a barra do player, que e o que a mao precisa enquanto toca.

   Nao e uma tela nova: e a MESMA caixa, esticada. Por isso a posicao de
   rolagem, o tamanho da fonte e a linha acesa continuam de onde estavam - o
   modo palco, que e outra tela, recomecava tudo do zero a cada entrada e saida.
   A largura desliza pela mesma transicao de `flex-basis` que abre a coluna. */
@media (min-width:1024px){
  #app.letra-cheia .app-nav{display:none}

  /* Padding em cima e nos lados, e NADA embaixo: o de baixo e escrito por
     `#app.has-bar .screen`, que reserva a altura da barra do player. Escrever o
     atalho `padding:` aqui zerava aquele valor, e a letra passava a correr por
     baixo da barra - some justamente o ultimo verso, que e o que se esta
     cantando quando se olha para la. */
  #app > #scr-rep.active.letra-cheia{max-width:none}
  #app > #scr-rep.active.letra-cheia{padding-top:var(--space-4); padding-inline:var(--space-6)}
  #scr-rep.letra-cheia > .h-title,
  #scr-rep.letra-cheia .rlr-lista,
  #scr-rep.letra-cheia #songScroll{display:none}

  #scr-rep.letra-cheia .rlr-letra,
  #scr-rep.letra-cheia > .rep-palco > .rep-letra{flex-basis:100%; padding-left:0}
  #scr-rep.letra-cheia .rep-letra-dentro{margin-left:0}

  /* Sem a lista ao lado, a linha de texto passaria de ponta a ponta do monitor
     e o olho perde o comeco da linha seguinte. O cartao segura a medida. */
  #scr-rep.letra-cheia .rep-letra-dentro{max-width:1100px; margin-inline:auto}
}

/* O botao de tela cheia aceso enquanto ela esta ligada: e o unico caminho de
   volta visivel, entao ele nao pode parecer desligado. */
.rlr-letra .lista-zoom button.on{
  background:var(--accent); color:var(--accent-foreground);
  border-color:transparent; opacity:1;
}


/* As duas proximas dentro da barra do player. Mesma ideia do alto do palco:
   empilhadas, cada uma com a linha inteira. Elas cedem largura ao transporte
   quando o titulo e longo - o botao de play nunca encolhe. */
.rp-aseguir{
  display:flex; flex-direction:column; justify-content:center; gap:1px;
  min-width:0; flex:0 1 auto; margin-left:var(--space-4);
  font-size:var(--text-label); color:var(--muted); line-height:1.25;
}
.rp-aseguir[hidden]{display:none}
.rp-aseguir .vem{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rp-aseguir .vem:first-child{color:var(--text)}


/* O "Conta" vai para o CANTO da janela.
   A barra de topo e centrada numa coluna de leitura, e isso faz sentido para a
   marca e para os destinos - eles se leem junto com o conteudo que esta
   embaixo. Conta nao: e o canto onde todo app guarda o que e da pessoa, e
   parado no meio da tela ele parecia mais um item do menu. */
@media (min-width:1024px){
  .app-nav{padding-right:var(--space-6)}
}


/* ================= A COR DA BARRA DO PLAYER =================

   ELA PRECISA SER OUTRA SUPERFICIE. Antes era `--card-elevated`, exatamente o
   mesmo cinza dos cartoes de musica: a barra sumia contra a lista, e no palco,
   de relance e de longe, procurar o play era procurar um botao dentro de um
   cinza continuo.

   A ESCOLHA. Azul-noite, quase preto - o mesmo lado do circulo de onde vem o
   primeiro tom da marca. Nao e uma cor nova no app: e o `--brand-1` levado ate
   o fundo da escala, entao a barra parece a base de onde as cores da marca
   saem, e nao um adesivo colado embaixo. Dessaturada de proposito: ela fica na
   tela o show inteiro, e cor viva nesse lugar cansa antes do fim.

   As cores da marca nao ficam numa linha no alto dela: foram para a barra de
   progresso, onde tem o que dizer (ver .rp-seek-fill). Uma faixa colorida no
   topo era so enfeite - nao respondia a nenhuma pergunta.

   O degrade de cima para baixo escurece na direcao da borda da tela - o mesmo
   que faz a barra parecer apoiada e nao flutuando. */
/* A cor vira token porque duas pecas a usam: a barra e o painel de letra. Dois
   hex copiados divergem na primeira vez que alguem ajustar um deles - e este
   arquivo ja carrega a cicatriz de uma paleta escrita duas vezes (ver o topo de
   tokens.css). */
/* --noite, --noite-funda e --noite-borda moram no bloco de cores do topo deste
   arquivo, junto com a versao do tema claro. A funda e um degrau abaixo:
   superficie de LEITURA e de FOCO - o painel de letra, o que se abre por cima
   da tela. Quanto mais escuro o fundo, mais o que esta escrito nele se descola. */

/* O FUNDO DA TELA DESCE JUNTO. Cartao mais escuro so parece mais escuro se o
   que esta atras dele descer tambem - senao o que muda nao e a profundidade, e
   sim o contraste, e os dois vao ficando parecidos ate a lista virar um bloco
   so. Estes dois apelidos sao a camada do app (ver o bloco no topo do arquivo);
   a paleta de tokens.css, que as telas de conta tambem usam, fica como esta. */
/* (--bg e --bg2 do app: bloco de cores do topo.) */
.rep-player{
  background:var(--noite);
  border-color:var(--noite-borda);
  box-shadow:0 -10px 30px rgb(var(--sombra) / .45), var(--shadow-lg);
}

/* O trilho do progresso acompanha a barra: ele encosta nela, e um cinza claro
   ali em cima ficava mais forte que a propria linha da marca. */
.rp-seek-track{background:var(--noite-borda)}


/* ---- O TRECHO JA TOCADO E O CORAL DA MARCA ----

   E a onda do logo, ao vivo: na marca, o coral e o pedaco da musica que ja
   saiu do play, e o resto e creme. Aqui a barra diz exatamente isso - o que ja
   tocou em coral, o que falta no trilho neutro. Uma cor so, e sempre no
   comeco: o degrade de cinco cores que estava aqui dava a cada ponto da musica
   uma cor propria, e a marca nova reserva o coral para um papel so.

   O `pintarSeek` ainda fixa o tamanho do fundo em pixel (vinha do degrade);
   com cor chapada isso nao muda nada, e o app.js fica como esta. */
.rp-seek-fill{
  background:var(--coral);
  background-repeat:no-repeat;
}
/* A bolinha fica na cor do texto (creme no escuro): ela e a alca, e no meio
   de uma faixa coral uma alca da mesma cor vira um furo. */
.rp-seek-knob{background:var(--foreground)}


/* O PAINEL DE LETRA NA MESMA COR DA BARRA.

   Os dois sao a mesma coisa enquanto se toca: o que esta soando e a letra do
   que esta soando. Em `--card` o painel era o mesmo cinza dos cartoes de
   musica, e a tela ficava com duas listas de cartoes lado a lado - a letra
   parecia mais um item, e nao o lugar para onde se olha.

   Com o azul-noite da barra, o que toca e o que se canta formam uma coisa so,
   de um lado ao outro da tela, e os cartoes da esquerda voltam a ser a lista. */
/* MAIS FUNDO QUE A BARRA. As duas sao a mesma familia, mas o painel e uma
   superficie de LEITURA: quanto mais escuro o fundo, mais a letra clara se
   descola dele, e e a letra que se le de longe. A barra fica um degrau acima
   porque ela tem botoes, e botao precisa de superficie que se veja. */
.rep-letra-dentro{
  background:var(--noite-funda);
  border-color:var(--noite-borda);
}


/* --cantando, --cantando-onda e --cantando-meio: bloco de cores do topo. A
   linha que toca e coral pelo mesmo motivo da barra de progresso: na marca,
   coral e o que esta saindo do play. O alto da onda e o mesmo coral com mais
   luz, e nao branco. */
/* ---- A ONDA DE LUZ ATRAVESSA A LINHA QUE ESTA SENDO CANTADA ----

   Antes a linha inteira clareava e escurecia junto, e isso e um alarme: a linha
   toda diz "olhe para mim" ao mesmo tempo. Uma ONDA que caminha da esquerda
   para a direita diz outra coisa - diz que a frase esta SENDO PERCORRIDA, no
   mesmo sentido em que se le e em que se canta.

   COMO E FEITO. O gradiente e pintado no proprio texto (background-clip:text) e
   arrastado por baixo das letras. A imagem tem mais que o dobro da largura da
   linha, entao a parte clara chega como um ponto de luz que passa, e nao como
   uma piscada do conjunto.

   2,6 s por travessia. A onda nao acompanha silaba - ela nao sabe onde a voz
   esta dentro do verso -, entao o que ela precisa e PARECER respiracao, e nao
   corrida. Devagar ela vira um brilho que passa; rapida, uma listra piscando.

   O brilho vai por `drop-shadow`, e nao por `text-shadow`: com o texto
   transparente, a sombra de texto aparece como borrao por tras do vazio da
   letra. O filtro trabalha sobre o que foi de fato desenhado. */
@keyframes onda-cantando{
  from{ background-position:100% 0 }
  to  { background-position:0% 0 }
}
.rep-letra-texto.sinc .lrc-linha.ativa,
.stage-lyrics.sinc .lrc-linha.ativa{
  /* MAIS COR QUE BRANCO, a peso de 80 por 20. A janela que se ve por vez e
     pouco mais de 40% desta imagem; um branco largo demais deixava a linha
     quase toda clara e a onda sumia dentro do proprio brilho. Com a passagem
     entre 40% e 50%, o branco ocupa cerca de um quinto do que esta a vista - o
     bastante para ser um ponto de luz que anda, e nao um claro geral. */
  /* MAIS COR QUE BRANCO, e com a borda macia. O claro vive num ponto so
     (45%), e nao ha branco nenhum: o alto da onda e o mesmo coral com mais
     luz. Branco atravessava a letra como OUTRA cor passando por cima; coral
     claro le como a propria cor clareando de passagem. A
     subida ate o pico continua longa - passagem curta desenha um risco de
     contorno duro atravessando as letras, e e a subida longa que faz o claro se
     espalhar sem nenhum filtro no meio do caminho. */
  background-image:linear-gradient(100deg,
    var(--cantando) 0%,
    var(--cantando) 34%,
    var(--cantando-meio) 41%,
    var(--cantando-onda) 45%,
    var(--cantando-meio) 49%,
    var(--cantando) 56%,
    var(--cantando) 100%);
  background-size:240% 100%;
  background-repeat:no-repeat;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  /* O halo cresce junto: parte do "desfocado" e a luz que vaza para fora das
     letras, e nao so a suavidade dentro delas. */
  filter:drop-shadow(0 0 22px var(--cantando-halo));
  animation:onda-cantando 2.6s linear infinite;
}
/* Quem pediu menos movimento fica com a linha acesa e parada, no coral cheio -
   ela continua sendo a marca do lugar, so nao percorre. */
@media (prefers-reduced-motion:reduce){
  .rep-letra-texto.sinc .lrc-linha.ativa,
  .stage-lyrics.sinc .lrc-linha.ativa{
    animation:none; background-image:none; color:var(--cantando);
    -webkit-text-fill-color:var(--cantando); filter:none;
  }
}


/* O DEGRAU DE TAMANHO ENTRE O QUE SE CANTA E O RESTO.
   A linha acesa cresce e as outras encolhem: o salto entre as duas passa a ser
   de uns 30%, e nao de 14%, e a maior parte da diferenca vem de as outras
   recuarem, e nao de a acesa virar cartaz. Encolher tambem devolve verso a
   tela - cabe mais do que ainda vem, e e para o que vem que se olha.

   `transform` nao muda a altura da linha no layout, entao o espaco entre elas
   continua o mesmo e nada dança quando a linha acesa troca. */


/* =========================================================================
   CELULAR
   =========================================================================

   O que foi desenhado no monitor chega aqui TRADUZIDO, e nao copiado: metade
   daquelas decisoes existia porque havia 1600px de largura e um mouse. O que
   atravessa sao as que valem em qualquer tela - a barra do player como rodape
   de verdade, o nome do show como botao, o tamanho da lista no controle de quem
   olha - e o que fica para tras e o que depende de largura: a letra ao lado da
   lista nao existe num aparelho onde meia tela sao quatro palavras por linha.
   Ali a letra continua tendo a tela dela, pelo modo palco.
   ====================================================================== */
@media (max-width:1023.98px){

  /* ---- A BARRA DO PLAYER E O RODAPE, e nao um cartao flutuando ----
     Ela boiava a 12px das bordas, com canto arredondado e sombra: tres faixas
     de fundo em volta de uma peca que esta na tela o tempo todo, num aparelho
     onde a altura e o que falta. Colada, some a moldura e sobra lista.

     O `padding-bottom` carrega a area segura: no aparelho com barra de gestos,
     sem isso os botoes ficam embaixo dela. */
  .rp-seek, .rep-player{
    left:0; right:0;
  }
  .rep-player{
    bottom:0;
    border-radius:0; border-left:0; border-right:0; border-bottom:0;
    padding:8px calc(12px + var(--sar)) calc(8px + var(--sab)) calc(12px + var(--sal));
  }
  .rp-seek{bottom:var(--rp-h, 64px)}

  /* Botoes um pouco menores: o dedo ainda acerta com folga em 40px, e o que
     sobra vira altura de lista. */
  .rep-player .rp-btn{width:40px; height:40px}
  .rep-player .rp-btn.sec{width:32px; height:32px}
  .rep-player .rp-btn svg{width:16px; height:16px}
  .rep-player .rp-btn.sec svg{width:14px; height:14px}

  /* O que a lista reserva embaixo acompanha o novo chao: guardar a area segura
     inteira aqui devolveria, dentro da rolagem, o vazio que acabou de sair. */
  #app.has-bar .screen{padding-bottom:calc(72px + var(--chao))}
  #app.has-bar.has-seek .screen{padding-bottom:calc(98px + var(--chao))}

  /* O TEMPO CONTINUA NO CABECALHO no celular. Na barra ele teria que disputar
     largura com o nome da musica e com cinco botoes, e o nome e o que mais
     importa aqui - e a unica coisa na tela que diz o que esta tocando quando se
     esta em outra tela. No monitor e o contrario: la a lista esta a vista e o
     nome na barra seria a terceira copia. */
  .rep-player .rp-hora, .rep-player .rp-hora.on{display:none}

  /* A letra ao lado nao existe aqui, e nao e so questao de estar fechada: sem
     esta linha ela continua no fluxo, invisivel, recebendo transicao a toa. */
  .rep-palco > .rep-letra{display:none}

  /* ---- o alto da tela de repertorio ----
     O nome do show desce de 27px para 21px, como no monitor: numa tela de 360px
     um titulo de 27 come duas linhas inteiras antes da primeira musica. */
  /* O NOME DO SHOW SOBE E ENCOLHE. Ele e rotulo, e nao assunto: diz em qual
     show voce esta, e quem ocupa a tela sao as musicas. Entre o "< Inicio" e o
     nome havia 24px de respiro herdados do cabecalho de qualquer tela - respiro
     que num celular vale uma musica inteira de lista. */
  #scr-rep > .header{margin-bottom:var(--space-2)}
  #scr-rep{padding-top:calc(12px + var(--sat))}
  #scr-rep .h-title{font-size:var(--text-lg); letter-spacing:var(--tracking-brand)}
  #repTituloLinha{margin-bottom:2px}
  .rep-linha-resumo{margin:-2px 0 10px}
}

/* ---- TOQUE: o que o mouse revelava tem que estar sempre visivel ----

   O lapis do nome do show so aparecia no `:hover`. Num aparelho de toque nao ha
   hover NENHUM: o icone nunca apareceria, e com ele foram embora os botoes de
   editar e de adicionar musica que moravam no cabecalho. O nome viraria um
   texto comum que, por acaso, abre coisas - e ninguem descobre isso.

   Aqui ele fica aceso o tempo todo. E o alvo de toque cresce um pouco: 28px e
   menor que a ponta de um dedo, e errar o "-" e acertar o "+" e trocar o
   tamanho da lista ao contrario do que se quis. Nao mais que isso, porem - eles
   sao ajuste, e nao acao: grandes demais passam a competir com o primeiro
   cartao de musica, que e o que esta logo abaixo deles. */
@media (hover:none){
  .rep-nome svg{opacity:.6}
  .lista-zoom button{width:32px; height:32px; opacity:.85}
  .rep-nome{padding-block:6px}
}


/* O bloco que encolhia estes botoes em tela estreita saiu daqui: com o
   transporte preso no rodape (logo abaixo), quem manda e a regra com
   `#scr-stage`, de especificidade maior, e o encolhimento nunca chegaria a
   valer. Aperto de largura na faixa de cima deixou de ser problema no momento
   em que os botoes sairam dela. */


/* ============ O TRANSPORTE DO PALCO VAI PARA BAIXO, NO CELULAR ============

   No monitor os botoes moram na faixa de cima porque la o mouse ja esta - e
   porque o rodape, numa tela alta, sai de vista atras da letra.

   No aparelho e o contrario, e por um motivo que nao e estetico: quem segura o
   telefone alcança o terco de baixo com o polegar sem mudar a pegada. Pausar
   entre uma musica e outra, no palco, com a outra mao no instrumento, e um
   gesto de um dedo so - e la em cima ele obriga a trocar o telefone de posicao.

   E o mesmo grupo de botoes, so que preso embaixo: nao ha DOM novo nem handler
   novo, entao nao existe a chance de um dos dois caminhos envelhecer diferente
   do outro. Ele fica na cor da barra do player, que e onde o transporte mora no
   resto do app - a peca muda de lugar, nao de identidade.

   Maiores aqui: em cima dividem a faixa com dois textos e tem que caber; embaixo
   sao o unico assunto da fatia, e sao alvo de polegar em movimento. */
@media (max-width:1023.98px){
  /* ---- O RODAPE DO PALCO, EM TRES ANDARES ----

     De baixo para cima: o TEMPO, o TRANSPORTE e o REGULADOR DE VELOCIDADE. E a
     ordem da mao para o olho - o que se aperta fica no meio, ao alcance do
     polegar; o que so se le fica na borda de baixo, onde nao atrapalha; e o que
     se ajusta de vez em quando fica acima de tudo.

     Quem vira o rodape e a FAIXA inteira (`.stage-barra`), e nao so os botoes:
     os tres andares ja sao filhos dela, entao basta empilha-los. Antes so os
     botoes desciam, e o regulador ficava sozinho la em cima. */
  /* ESQUERDA: regulador em cima, tempo embaixo. DIREITA: o transporte.
     Uma grade de duas colunas, e nao tres linhas empilhadas: o que se LE - a
     velocidade escolhida e o ponto da musica - ocupa a coluna da esquerda, uma
     leitura sobre a outra, e o que se APERTA fica inteiro na direita, embaixo do
     polegar de quem segura o telefone. Empilhado, o rodape crescia para cima e
     comia altura da letra, que e o que se olha. */
  #scr-stage .stage-barra{
    position:fixed; left:0; right:0; bottom:0; z-index:41;
    display:grid; grid-template-columns:1fr auto; align-items:center;
    column-gap:var(--space-3); row-gap:2px;
    background:var(--noite); border-top:1px solid var(--noite-borda);
    border-bottom:0; margin-bottom:0; padding:8px calc(12px + var(--sar)) calc(8px + var(--sab)) calc(12px + var(--sal));
    box-shadow:0 -10px 30px rgb(var(--sombra) / .45);
  }
  /* O nome da fila nao cabe num rodape de celular - e a pessoa acabou de
     escolher qual e. */
  #scr-stage .stage-rep{display:none}
  #scr-stage .stage-rolagem{grid-column:1; grid-row:1; justify-content:flex-start}
  #scr-stage .stage-hora{grid-column:1; grid-row:2; display:block; text-align:left}
  /* O transporte ocupa as duas linhas da direita: assim ele fica centrado na
     altura do rodape, seja qual for o numero de linhas da esquerda. */
  /* OS BOTOES DESCEM ATE O FIM DA FAIXA. Ocupando as duas linhas da grade, eles
     ficavam centrados entre elas - e sobrava um vao embaixo, do tamanho da linha
     do tempo. Alinhados ao fim, encostam no chao do rodape, e o vao vira letra. */
  /* NA MESMA LINHA DA PASTILHA. Ocupando as duas linhas da grade, os botoes
     ficavam alinhados pelo fim da faixa, e o tempo - que esta na linha de baixo -
     ficava um degrau abaixo deles. Na mesma linha, os dois se leem como um
     conjunto: o que se aperta e o que se confere, lado a lado. */
  #scr-stage .stage-ctrl.mini{
    grid-column:2; grid-row:2; align-self:center;
    position:static; background:none; border:0; box-shadow:none; padding:0;
    justify-content:flex-end; gap:var(--space-4);
  }
  #scr-stage .stage-ctrl.mini button{width:46px; height:46px; box-shadow:var(--highlight-strong), var(--shadow-sm)}
  #scr-stage .stage-ctrl.mini button.sec{box-shadow:none}
  #scr-stage .stage-ctrl.mini button.sec{width:40px; height:40px; box-shadow:none}
  #scr-stage .stage-ctrl.mini button svg{width:20px; height:20px}
  #scr-stage .stage-ctrl.mini button.sec svg{width:17px; height:17px}

  /* A LETRA PARA ONDE O RODAPE COMECA. Sem isto o ultimo verso corre por baixo
     dos botoes - e o ultimo verso e justamente o que se esta cantando quando se
     olha para a tela. Dois valores porque o rodape tem dois tamanhos: com
     regulador (letra sem marcacao) e sem ele. */
  #scr-stage{padding-bottom:calc(98px + var(--sab))}
  #scr-stage.sem-rolagem{padding-bottom:calc(84px + var(--sab))}

  /* O NOME DA MUSICA NO CENTRO, e o que vem depois logo abaixo dele, tambem no
     centro. Sao a mesma pergunta - em que ponto do show estamos - e agora se
     leem numa olhada so, sem disputar largura com botao nenhum. */
  #scr-stage .stage-a-seguir{
    order:4; flex:1 0 100%; align-items:center; text-align:center;
    margin-top:1px;
    /* MENOR QUE O NOME DA MUSICA. Fora da faixa, que tinha corpo proprio de
       11px, estes dois passaram a herdar o corpo da tela e ficaram MAIORES que
       o titulo logo acima - o que vem depois lido antes do que esta tocando. */
    font-size:var(--text-xs); line-height:1.3;
  }
  #scr-stage .stage-centro .stage-title{font-size:var(--text-md)}
}


/* ---- O "Ola, fulano" no celular ----
   Ele e ponto de entrada para o olho, e no monitor um corpo de display cumpre
   esse papel sem custo - ha altura de sobra. Numa tela de 360px o mesmo corpo
   come a primeira dobra inteira para dizer o nome de quem ja sabe o proprio
   nome, e empurra para baixo o que a pessoa veio fazer. Um degrau abaixo ele
   continua sendo a primeira coisa que se le. */
@media (max-width:1023.98px){
  /* O "Ola, fulano" e uma saudacao, e nao um titulo: ele diz quem voce e para
     alguem que ja sabe. Em corpo de display ele tomava a primeira dobra inteira
     antes de a pessoa ver uma musica sequer. Em 17px continua sendo a primeira
     coisa que se le, e a tela comeca de verdade logo abaixo. */
  .hero-ola{font-size:var(--text-lg); letter-spacing:var(--tracking-brand)}
  .hero-sub{font-size:var(--text-sm); margin-top:2px}
  .hero{margin-bottom:var(--space-3)}

  /* E o "Criar playback" encolhe junto. Ele e o botao principal da tela, mas
     principal nao quer dizer grande: num celular ele dividia a largura com a
     barra de progresso e empurrava a lista para baixo da dobra. Continua sendo o
     unico botao cheio da home - e isso que diz que ele e o principal. */
  .create-cta{padding:10px var(--space-3); font-size:var(--text-xs)}
  .create-cta svg{width:15px; height:15px}

  /* ---- O NOME DA MUSICA DESCE, no palco ----
     Ele morava no centro exato da faixa de cima, entre os botoes de tamanho da
     letra e o de fechar. Isso funciona quando sobra largura; num celular, com
     um titulo de musica de verdade - nome do artista, nome da faixa, "(Ao
     Vivo)" - ele encosta nos dois lados e chega a passar por baixo deles.

     Numa linha propria ele tem a largura inteira, e o relogio vai junto: os
     dois respondem a mesma pergunta - o que esta tocando, e em que ponto. */
  .stage-top{flex-wrap:wrap; row-gap:2px}
  .stage-centro{
    position:static; transform:none; order:3;
    flex:1 0 100%; max-width:100%; align-items:center;
  }
  .stage-close{position:static; margin-left:auto; transform:none}
}

/* Sem a linha de baixo, o nome da musica fica sozinho na bandeja: centrado na
   altura, e nao empurrado para cima por um espaco que nao tem mais conteudo. */
.rp-sub:empty{display:none}


/* O relogio do rodape do palco. Nao existe no monitor: la o transporte fica na
   faixa de cima, a um centimetro do relogio que ja mora no centro do topo. */
.stage-hora{display:none}
@media (max-width:1023.98px){
  /* E o de cima sai. Dois relogios na mesma tela dizendo o mesmo numero nao
     somam nada: a linha de cima fica so com o nome da musica, que era o que
     estava apertado ali, e o tempo vive onde a mao ja esta. */
  #scr-stage .stage-time{display:none}

  #scr-stage .stage-hora{
    margin:0;
    font-size:var(--text-sm); font-weight:var(--weight-medium);
    font-variant-numeric:tabular-nums; letter-spacing:var(--tracking-normal);
    color:var(--muted); white-space:nowrap;
  }
}


/* ---- os dois botoes da linha de busca, no celular ----
   O "Recentes" e o "+" tem 104px de largura cada, e essa largura foi escolhida
   para que as DUAS COLUNAS da home comecassem na mesma linha no monitor. No
   celular nao ha duas colunas - as abas mostram uma de cada vez -, entao a
   largura casada nao compra nada e so tira espaco do campo de busca, que e o
   que se usa. Menores, e com a mesma altura do campo ao lado para a linha nao
   desalinhar. */
@media (max-width:1023.98px){
  /* A LINHA DE BUSCA E FERRAMENTA, e nao conteudo. Ela abre toda tela da home e
     estava com altura de botao principal: 44px de campo mais 44 de botao ao
     lado, antes do primeiro cartao de musica. Em 38 ela continua sendo alvo de
     dedo com folga - sao controles secundarios, usados uma vez e nao no meio da
     pressa - e devolve seis pixels em cada uma das duas abas. */
  .btn-ordenar{width:72px; min-height:38px; padding:0 8px; font-size:calc(11px * var(--fs))}
  #blocoReps > .row > .btn.icon-only{width:38px; min-height:38px}
  #blocoReps > .row > .btn.icon-only svg{width:16px; height:16px}
  .home-colunas .field{min-height:38px; padding-block:8px; font-size:var(--text-sm)}
  /* A linha de criar repertorio abre logo abaixo e usa o mesmo campo: o botao
     dela vai junto, senao a linha nova nasce mais alta que a de cima. */
  #newRepRow .btn{min-height:38px; font-size:var(--text-sm)}
}


/* ---- A LINHA QUE CRESCE NAO PODE SAIR PELA LATERAL ----

   A linha acesa e desenhada a 1,14 do tamanho, e a escala parte do CENTRO: uma
   linha que ja ocupa a largura toda passa a transbordar 7% para cada lado. No
   celular, onde a linha enche a tela com qualquer verso um pouco mais longo,
   isso era a regra e nao a excecao - a primeira e a ultima palavra ficavam
   cortadas justamente na linha que se esta cantando.

   A folga vem de um recuo de 7% em cada lado da linha (acima). O texto ocupa os
   86% do meio; crescido 14%, volta a caber na largura inteira, e nada e cortado
   em momento nenhum. O recuo cresce junto com a linha, entao a conta se mantem
   em qualquer tamanho de fonte.

   `overflow-x:hidden` fecha a porta: se um dia alguma linha ainda passar - uma
   palavra unica gigante, um link colado na letra -, ela e cortada em vez de
   abrir uma barra de rolagem horizontal na tela do palco. */
.rep-letra-texto.sinc, .stage-lyrics.sinc{overflow-x:hidden}


/* ---- O QUE ABRE POR CIMA DA TELA TAMBEM E AZUL-NOITE ----

   A ficha da musica e as folhas que sobem de baixo (editar repertorio, escolher
   idioma, confirmar) eram `--card`: o MESMO cinza dos cartoes da lista que
   ficam atras delas. Duas superficies do mesmo tom, uma sobre a outra, leem
   como um cartao que cresceu - e nao como uma camada nova que pede resposta.

   No azul mais fundo elas se separam do que ficou atras sem precisar de sombra
   mais pesada, e passam a ser da mesma familia da barra do player e do painel
   de letra: no app, azul-noite e a cor do que esta em primeiro plano agora. */
.song.expanded .song-form,
.sheet-card{
  background:var(--noite-funda);
  border-color:var(--noite-borda);
}


/* ============ OS CARTOES DA LISTA EM AZUL-NOITE ============

   Musica e repertorio sao o conteudo do app, e ate agora os cartoes deles eram
   `--card`: cinza neutro, a mesma superficie de qualquer caixa da tela. Com a
   barra do player, o painel de letra e as folhas todos em azul-noite, o cinza
   virou a excecao - e a excecao era justamente o que a pessoa mais olha.

   POR QUE O TOM DA BARRA, e nao o mais fundo. O fundo da tela ja e quase preto
   (#09090b): o azul mais fundo termina ABAIXO disso, e o cartao viraria um
   buraco em vez de uma superficie. Este e um degrau acima do fundo - e a mesma
   relacao que o cinza tinha, so que na familia certa.

   O degrade escurece para baixo, como na barra: e o que da a cada cartao um
   sentido de apoiado, e nao de recortado e colado. */
.song, .list-item{
  background:var(--noite-funda);
  border-color:var(--noite-borda);
}
.list-item:hover{background:var(--item-hover)}

/* A ficha aberta dentro do cartao herda o fundo dele, para nao aparecer um
   retangulo de outra cor quando o cartao expande. */
.song.expanded{border-color:var(--noite-borda)}


/* ---- O QUADRO QUE SEGURA AS LISTAS ----
   `.card` era o ultimo cinza grande da tela: as abas e a lista inteira vivem
   dentro dele, entao ele emoldurava cartoes azuis com uma borda cinza em volta.

   Fica no tom da barra do player, um degrau acima do fundo da tela, e os
   cartoes dentro dele ficam no tom mais fundo. Assim quem esta mais escuro e o
   CONTEUDO - a musica, o repertorio -, e o quadro e so o chao onde ele se
   apoia. */
.card{
  background:var(--noite);
  border-color:var(--noite-borda);
}


/* ---- A LISTA QUE NAO TEM QUADRO ATRAS ----

   Na tela inicial os cartoes vivem dentro de `.card`, que e um degrau mais
   claro: contra ele, o azul-noite fundo le como cartao. Nas telas de repertorio
   e de "Todas as musicas" nao ha quadro nenhum - os cartoes ficam direto sobre o
   fundo da tela -, e a MESMA cor passa a ler como cinza claro, porque agora o
   que esta atras dela e mais escuro, e nao mais claro.

   Nao e a cor que mudou, e a vizinhanca. Entao aqui ela desce mais um degrau,
   para o olho ver a mesma profundidade que ve na tela inicial. */
/* `:not(.current)` NAO E DETALHE. Esta regra tem id no seletor, entao ela vence
   com folga a do cartao que esta tocando - e foi o que aconteceu: ela pintou por
   cima do fundo que desenha a fita colorida em volta dele, e o contorno sumiu
   das duas telas onde ele mais serve. Quem toca tem cor propria e fica de fora
   daqui. */
#scr-rep #songList .song:not(.current),
#scr-all #allList .song:not(.current){
  background:var(--lista-solta);
}


/* Os A- e A+ do palco, menores no celular. Eles sao ajuste - mexe-se uma vez,
   no comeco - e estavam do tamanho de botao de acao, ao lado do nome da musica,
   que e o que de fato se le ali. */
@media (max-width:1023.98px){
  /* A regra que morava aqui apontava para o botao errado - `.fs-btn` e o par
     redondo da tela de letra (#fsMenos/#fsMais), e nao o do palco -, por isso
     eles continuavam grandes depois de "diminuir". O tamanho certo esta no fim
     desta folha, junto com o do monitor. */
  #scr-stage .stage-tools{gap:4px}
  /* O X de fechar acompanha: ele e vizinho dos dois na mesma linha, e um botao
     grande ao lado de dois pequenos vira o assunto da faixa. */
  #scr-stage .stage-close{width:30px; height:30px}
  #scr-stage .stage-close svg{width:15px; height:15px}
}


/* ---- NO CELULAR, A LISTA NAO MORA DENTRO DE UMA CAIXA ----

   No monitor o quadro faz sentido: ele agrupa as duas colunas - musicas e
   repertorios - e diz onde uma acaba e a outra comeca.

   No celular nao ha duas colunas: as abas mostram uma de cada vez, e o quadro
   vira uma moldura em volta da tela inteira. Ele cobra caro por isso - as duas
   bordas laterais mais o respiro de dentro comem largura de todo cartao de
   musica, que e onde o nome da faixa esta sendo cortado -, e nao separa nada de
   nada, porque nao ha nada ao lado.

   Some a caixa e ficam os cartoes direto sobre a tela, como ja acontece no
   repertorio e em "Todas as musicas". */
@media (max-width:1023.98px){
  #cardListas{
    background:none; border:0; border-radius:0;
    padding:0; margin-bottom:0;
  }
}


/* ======================= A TAB BAR DO CELULAR =======================

   A MESMA BARRA DO MONITOR, deitada no rodape. Nao ha marcacao nova nem
   handler novo: os tres destinos, o clique e o realce de "voce esta aqui" ja
   existem desde a barra de topo. Duas navegacoes separadas para o mesmo app
   seriam duas coisas para manter em acordo, e uma delas ficaria para tras.

   POR QUE ELA FALTAVA. No celular a navegacao era so pelos cabecalhos: para
   sair do repertorio e criar uma musica, era voltar ao inicio e procurar o
   botao. Tres destinos fixos ao alcance do polegar tiram esse caminho inteiro.

   ONDE ELA FICA. Encostada embaixo, e o player logo ACIMA dela. E a ordem que
   todo app de musica usa, e ela nao e arbitraria: as abas sao o esqueleto da
   tela e nunca mudam; o player e sobre o que esta tocando agora e vai e vem.
   O que e permanente fica na borda; o que e do momento fica em cima dele. */
@media (max-width:1023.98px){
  :root{--abas-h:54px}

  .app-nav{
    display:flex; align-items:stretch; gap:0;
    position:fixed; left:0; right:0; bottom:0; z-index:42;
    background:var(--noite); border-top:1px solid var(--noite-borda);
    padding:0 calc(6px + var(--sar)) var(--sab) calc(6px + var(--sal));
    box-shadow:0 -8px 24px rgb(var(--sombra) / .45);
  }
  #app.sem-abas .app-nav{display:none}

  /* A marca e o empurrao do "Conta" sao da barra deitada; em pe, os tres itens
     dividem a largura em partes iguais. */
  .app-nav-marca, .app-nav-fim{display:none}

  .app-nav-item{
    flex:1 1 0; flex-direction:column; justify-content:center; gap:3px;
    height:var(--abas-h); padding:0 2px; border-radius:0;
    font-size:var(--text-label); font-weight:var(--weight-medium);
    color:var(--muted2); white-space:nowrap;
  }
  .app-nav-item svg{width:21px; height:21px}
  /* Sem fundo no item ativo: numa faixa de tres, o retangulo claro pesa mais
     que o proprio icone. Cor cheia basta para dizer onde se esta. */
  .app-nav-item:hover{background:none}
  .app-nav-item.on{background:none; color:var(--foreground)}
  .app-nav-item:active{opacity:.6}

  /* O player sobe para cima das abas, e perde a area segura: quem encosta na
     borda do aparelho agora e a tab bar, e so ela precisa desviar do indicador
     de gestos. */
  .rep-player{
    bottom:var(--abas-h);
    padding-bottom:8px;
  }
  .rp-seek{bottom:calc(var(--abas-h) + var(--rp-h, 56px))}

  /* E a tela reserva o que os dois ocupam. Sem player, so as abas. */
  .screen{padding-bottom:calc(var(--abas-h) + 20px + var(--sab))}
  #app.has-bar .screen{padding-bottom:calc(var(--abas-h) + 72px + var(--sab))}
  #app.has-bar.has-seek .screen{padding-bottom:calc(var(--abas-h) + 98px + var(--sab))}

  /* O palco nao tem abas, entao o rodape dele continua colado na borda. */
  #app.sem-abas .rep-player{bottom:0; padding-bottom:calc(8px + var(--sab))}
}


/* ---- O BOTAO DE CRIAR SAI DO CELULAR ----

   Ele virou a terceira copia do mesmo caminho: a aba do rodape leva para criar,
   esta sempre na tela e fica embaixo do polegar. Um botao grande no alto
   dizendo a mesma coisa so empurra a lista para baixo da dobra.

   A MINI-BARRA FICA. Ela e outra coisa: e o sinal de que ha uma musica sendo
   feita agora, e some sozinha quando acaba. Sem o botao ela sai de baixo dele e
   entra na linha, senao ficaria flutuando por cima da saudacao. */
@media (max-width:1023.98px){
  .create-cta{display:none}
  .home-cta-row{margin-bottom:0}
  .mini-bar{position:static; bottom:auto; margin-bottom:var(--space-3)}
}

/* ---- ACABAMENTO DA TAB BAR ----

   O QUE MUDA. Um risco curto no alto da aba ativa, nas cores da marca; o icone
   e o rotulo em branco cheio quando ativos; e a aba inteira responde ao toque
   afundando um pouco.

   POR QUE O RISCO, e nao um fundo. Fundo preenchido numa faixa de tres vira
   botao - e aba nao e acao, e lugar. O risco fica na BORDA DE CIMA, encostado
   no conteudo, porque e para la que ele aponta: e dali que a tela vem.

   As cores da marca aparecem so aqui e no cartao que toca. Nos dois casos
   respondem a mesma pergunta - onde voce esta -, entao e a mesma linguagem. */
@media (max-width:1023.98px){
  .app-nav-item{
    position:relative;
    transition:color var(--duration) var(--ease), transform var(--duration-fast) var(--ease);
  }
  /* O risco da aba ativa, em branco. Colorido, ele competia com a cor que de
     fato informa - a do que esta tocando - e a barra inteira virava enfeite.
     Aqui basta dizer "voce esta nesta", e branco diz isso sem disputar nada. */
  .app-nav-item::before{
    content:''; position:absolute; top:0; left:50%;
    width:26px; height:3px; border-radius:0 0 3px 3px;
    background:var(--foreground);
    transform:translateX(-50%) scaleX(0); transform-origin:center;
    opacity:0; transition:transform .22s var(--ease), opacity .22s var(--ease);
  }
  .app-nav-item.on::before{transform:translateX(-50%) scaleX(1); opacity:1}
  .app-nav-item.on svg{stroke-width:2.2}
  /* Afunda ao toque. Num aparelho nao ha hover para dizer "peguei o seu dedo";
     o unico retorno possivel e o do proprio toque. */
  .app-nav-item:active{transform:scale(.94); opacity:1}
  /* O rotulo nao muda de peso ao ativar: texto que engorda empurra as letras e
     a aba inteira parece pular de lugar. Quem muda e a cor. */
  .app-nav-item.on{font-weight:var(--weight-medium)}
}


/* ===================== CARA DE APP, NO CELULAR =====================

   Quatro coisas, e nenhuma e enfeite: cada uma tira um pedaco de tela de quem
   nao precisa dele e devolve para a lista, que e o conteudo. */
.conta-nome{display:none}

@media (max-width:1023.98px){

  /* 1. O NOME NO ALTO, no lugar da chave.
        A chave nao dizia nada - um icone de ferramenta para abrir "Conta" -, e
        quem hoje leva para la e a aba do rodape. O nome, sim, diz de quem e o
        aparelho, que e a unica coisa que aquele canto precisa informar. E ele
        sobe: sai da abertura da tela, onde ocupava uma linha inteira, e vira
        uma etiqueta no cabecalho que ja existia. */
  #scr-home .avatar{display:none}
  .conta-nome{
    display:block; margin-left:auto;
    font-size:var(--text-sm); font-weight:var(--weight-medium);
    color:var(--muted); white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; max-width:52%;
  }
  /* Com o nome no alto, a abertura inteira sai: a saudacao estava duplicada e a
     linha de baixo e uma frase de apresentacao, que se le uma vez na vida. */
  #scr-home .hero{display:none}

  /* 2. A TAB MENOR. 54px era altura de rodape de site; 46 e o que basta para o
        icone, o rotulo e o dedo - e sao 8px que voltam para a lista, em toda
        tela do app. */
  :root{--abas-h:46px}
  .app-nav-item{font-size:10px; gap:2px}
  .app-nav-item svg{width:19px; height:19px}

  /* 3. A BARRA DE PROGRESSO COLA NO PLAYER.
        Ela flutuava separada, a doze pixels de distancia, como se fosse outra
        peca: duas faixas escuras empilhadas com um vao de fundo no meio. Colada
        no alto do player ela vira o que e - a borda superior dele, que por acaso
        mostra onde a musica esta. E fina, porque informacao que se le de relance
        nao precisa de corpo; a area de toque continua a mesma, no vao em volta. */
  .rp-seek{
    bottom:calc(var(--abas-h) + var(--rp-h, 56px) - 13px);
    height:26px; padding:0;
  }
  .rp-seek-track{height:3px; border-radius:0; background:rgb(var(--tinta) / .10)}
  .rp-seek-knob{width:11px; height:11px}
  .rep-player{border-top-color:transparent}

  /* 4. CANTOS E RESPIRO de app, e nao de pagina. Raio maior nos cartoes e nos
        campos: e o que distingue uma lista tocavel de uma tabela. */
  .song, .list-item{border-radius:16px}
  .field{border-radius:14px}
  .btn{border-radius:14px}
}


/* ============ O PLAYER COMO CARTAO FLUTUANTE, NO CELULAR ============

   Ele estava encostado de ponta a ponta, com canto reto - um rodape dentro de
   outro rodape, ja que a tab bar tambem esta la embaixo. Duas faixas retas
   empilhadas leem como uma coisa so, e nao da para dizer onde uma acaba.

   Solto das bordas e arredondado, ele volta a ser o que e: uma peca sobre o
   conteudo, que vai e vem conforme ha musica. A tab bar continua colada, porque
   ELA e o chao da tela - e a diferenca entre as duas passa a ser visivel.

   TRANSLUCIDO, com uma ressalva. O fundo semitransparente com desfoque e o que
   faz a lista continuar existindo por baixo, em vez de sumir atras de um bloco.
   Mas `backdrop-filter` e uma camada de composicao permanente, paga em toda
   rolagem - e este app roda no palco com audio decodificando junto. Por isso o
   desfoque e modesto (14px numa faixa de 56px de altura, e nao numa tela
   inteira) e, onde ele nao existe, o fundo cai para quase opaco: texto claro
   sobre transparencia sem desfoque, por cima de uma lista, nao se le. */
@media (max-width:1023.98px){
  .rep-player{
    left:10px; right:10px;
    bottom:calc(var(--abas-h) + 8px);
    border-radius:18px;
    border:1px solid rgb(var(--tinta) / .08);
    background:rgb(var(--vidro) / var(--vidro-alfa, .94));
    box-shadow:0 10px 30px rgb(var(--sombra) / .55);
    padding:8px 12px;
  }
  @supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
    .rep-player{
      background:rgb(var(--vidro) / var(--vidro-alfa, .66));
      backdrop-filter:blur(14px) saturate(1.4);
      -webkit-backdrop-filter:blur(14px) saturate(1.4);
    }
  }

  /* A barra de progresso acompanha o recuo e volta a ter ponta arredondada:
     linha reta terminando dentro de um canto curvo denuncia que sao duas pecas
     que nao se conhecem. */
  /* ACIMA do cartao, e nao em cima dele. Ela nasceu colada no topo do player,
     quando o player era uma faixa reta encostada na borda; com o player virando
     cartao solto e arredondado, "colada" passou a ser "por tras" - a barra
     sumia atras do canto curvo. Agora ela flutua logo acima, com a mesma
     largura do cartao, e os dois se leem como um conjunto. */
  .rp-seek{
    left:10px; right:10px;
    bottom:calc(var(--abas-h) + 8px + var(--rp-h, 56px) + 4px);
  }
  .rp-seek-track{border-radius:var(--radius-full)}

  /* O vao de 8px entra na conta do que a tela reserva embaixo. */
  #app.has-bar .screen{padding-bottom:calc(var(--abas-h) + 80px + var(--sab))}
  #app.has-bar.has-seek .screen{padding-bottom:calc(var(--abas-h) + 106px + var(--sab))}

  /* Sem abas (o palco), o cartao desce, mas nao encosta: ele continua sendo um
     cartao, e cartao colado na borda vira faixa. */
  #app.sem-abas .rep-player{bottom:calc(8px + var(--sab))}
}


/* ---- A TAB BAR, SEM COR ----

   A fumaca das cores da marca saiu daqui. Ela era clima, e clima no rodape
   disputava com a unica cor que INFORMA neste app - a do que esta tocando. Com
   a faixa neutra, quando algo acende ali e porque tem o que dizer.

   O `@keyframes` dela saiu junto: o palco, que era o ultimo a usar, passou a ter
   a fumaca que ATRAVESSA a tela (`fumaca-passa`), em vez de uma que vai e volta
   no lugar. */

@media (max-width:1023.98px){
  /* Mais baixa ainda: o icone e o rotulo cabem em 42, e cada pixel daqui e um
     pixel de lista em toda tela. */
  :root{--abas-h:42px}
  .app-nav-item{font-size:9.5px; gap:1px}
  .app-nav-item svg{width:18px; height:18px}
}


/* ---- O RODAPE DO PALCO TAMBEM E UM CARTAO ----

   Mesmo tratamento do player da lista, e pelo mesmo motivo: no palco a letra
   ocupa a tela inteira e passa por baixo dele. Faixa reta encostada na borda
   corta a letra com uma linha dura; cartao solto deixa o verso continuar
   existindo por tras, desfocado, e fica claro que ele e uma peca SOBRE o texto.

   Aqui nao ha tab bar - o palco nao tem o que navegar -, entao o cartao desce
   ate a borda, guardando so o respiro e a area segura do aparelho.

   As medidas sao as mesmas do outro cartao de propósito: dois controles com o
   mesmo papel, em duas telas, tem que parecer a mesma peca. */
@media (max-width:1023.98px){
  /* O RODAPE DO PALCO E ESTA FAIXA, E NAO O PLAYER.
     Anotado porque me custou caro: `.rep-player` e o rodape das LISTAS; no palco
     quem desce para o pe da tela e a `.stage-barra` - o nome do repertorio, o
     transporte e o relogio. Tirar o cartao "do player" nesta tela nao mexia em
     nada do que se ve aqui.
     Sem cartao: os controles ficam sobre o degrade e a fumaca, que ja escurecem o
     pe da letra, e cada um ganha a sombra que a superficie dava. Assim o palco
     tem UMA peca de interface a menos entre o olho e o texto. */
  /* E DESCE ATE O CHAO. Os 8px de respiro eram a margem de um CARTAO - peca solta
     nao encosta na borda. Sem cartao nao ha o que encostar: sao botoes sobre a
     propria tela, e cada pixel que eles devolvem e um pixel de letra, que e o que
     se le de longe. A area segura continua sendo respeitada, agora por dentro
     (`padding-bottom`), que e onde ela de fato importa - a barra de gestos do
     aparelho passa POR CIMA da tela, nao ao lado dela. */
  #scr-stage .stage-barra{
    left:0; right:0;
    bottom:0;
    border:0; border-radius:0; background:none; box-shadow:none;
    backdrop-filter:none; -webkit-backdrop-filter:none;
    /* O ULTIMO BOTAO ENCOSTA NA BORDA: 6px e o vao do dedo, nao margem de peca.
       Embaixo sobra so a area segura do aparelho - ela nao e respiro, e o lugar
       por onde a barra de gestos passa. */
    /* A AREA SEGURA ENTRA PELA METADE. Ela existe para a barra de gestos, que e
       uma faixa fina no centro da borda; respeita-la por inteiro deixava os
       botoes boiando bem acima do fim da tela. Metade e o suficiente para o dedo
       nao disputar com o gesto do sistema, e devolve o resto para a letra. */
    padding:6px 6px var(--chao);
  }
  #scr-stage .stage-barra .stage-rep,
  #scr-stage .stage-barra .stage-a-seguir{text-shadow:0 2px 8px rgb(var(--papel) / .9)}
  /* O TEMPO EM PRETO. Ele mora no canto onde a nevoa e mais densa e mais clara -
     branco sobre branco era o pior contraste da tela, justamente no numero que se
     confere de relance. Preto sobre a massa clara le-se de longe; e onde a nevoa
     abre, o halo claro em volta o segura. */
  #scr-stage .stage-barra .stage-hora{
    /* DESTACADO: ele e o unico numero da tela, e no palco e consulta de meio
       segundo - tem que ser lido de relance, de longe e de pe. Corpo maior, peso
       cheio e preto de verdade. */
    font-size:13px; font-weight:var(--weight-bold); letter-spacing:.01em;
    color:var(--palco-pastilha-texto);
    /* FUNDO BRANCO, E NAO HALO. O halo dependia de a nevoa estar clara naquele
       instante - e ela vai e vem; com uma pastilha propria o numero tem sempre o
       mesmo contraste, independente do que passa atras. Ela e um pouco maior que
       o texto de proposito: no palco isto se le de pe, a um metro da tela. */
    /* MENOS BRANCA E MENOR: ela precisa ser lida de relance, nao ser o objeto
       mais claro da tela. A 78% ela ainda ganha de qualquer nevoa que passe por
       tras, e para de disputar com o play, que e o unico branco que deve puxar
       o olho ali. */
    background:rgb(var(--tinta) / .78); border-radius:var(--radius-full);
    padding:3px 8px;
    /* O HALO BRANCO E O QUE O SEGURA. A nevoa vai e vem: no momento em que ela
       abre, preto sobre preto e nada. O brilho claro em volta das letras faz o
       numero continuar existindo nos dois fundos - e some sozinho quando a massa
       clara passa por tras, porque ai ja e branco sobre branco. */
    text-shadow:none;
  }
  /* TRANSLUCIDOS TAMBEM. Sem cartao atras deles, botao de cor cheia vira a
     unica superficie opaca da tela - tres discos solidos por cima da letra. Com
     o fundo passando por dentro, eles se leem como vidro sobre o texto, e o
     desenho de dentro continua nitido, que e o que importa para acertar no
     escuro. O play fica menos transparente que os outros: ele e o que se procura
     sem olhar. */
  /* O PLAY MAIS ESCURO. Branco a 82% sobre a nevoa clara virava um disco
     cintilante no meio do rodape - a peca mais luminosa de uma tela cujo assunto
     e a letra. A 66% ele continua sendo o unico claro dos tres, que e o que
     importa para a mao achar sem olhar, sem roubar o olho de quem esta lendo. */
  /* O PLAY VOLTA A SER CLARO. Escurece-lo resolveu o brilho, mas custou o que
     ele existe para dar: no palco, a mao acha o play sem olhar porque ele e a
     unica coisa clara do rodape - apagado, ele virou mais um circulo igual aos
     outros. O que continua contido e a fumaca em volta, nao ele. */
  #scr-stage .stage-ctrl button{
    background:var(--palco-play); box-shadow:0 6px 18px rgb(var(--sombra) / .5);
  }
  /* E os de apoio fecham junto: sobre a nevoa, vidro claro demais deixa de
     parecer botao e passa a parecer buraco na fumaca. */
  #scr-stage .stage-ctrl button.sec{
    background:rgb(var(--vidro-palco) / .68); border:1px solid rgb(var(--tinta) / .09);
  }
  @supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
    #scr-stage .stage-ctrl button.sec{
      background:rgb(var(--vidro-palco) / .5);
      backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    }
  }
  /* A letra para onde o cartao comeca, contando o respiro novo. */
  #scr-stage{padding-bottom:calc(112px + var(--chao))}
  #scr-stage.sem-rolagem{padding-bottom:calc(96px + var(--chao))}
}


/* ---- O FIM DA LISTA SE APAGA ANTES DO PLAYER ----

   Sem isto, o cartao de musica passa por tras do player e reaparece nas laterais
   e no vao de baixo: pedaco de borda, meia palavra, um numero cortado. Duas
   superficies arredondadas se cruzando em angulo qualquer nao leem como
   camadas - leem como defeito.

   Com o texto se dissolvendo no fundo antes de chegar la, o player passa a ter
   de onde emergir. E o mesmo recurso de qualquer lista que termina sob um
   controle fixo, e existe pela mesma razao: o corte seco denuncia que ha
   conteudo escondido, o degrade diz que ele continua.

   `pointer-events:none` porque isto e vidro, e nao tampa: rolar e tocar
   atravessam. */
@media (max-width:1023.98px){
  /* ELE VAI ATE O CHAO, E NAO ATE O PLAYER.
     Enquanto o player era um cartao opaco, parar no topo dele bastava: ele
     mesmo tampava a lista dali para baixo. Sem cartao, a faixa entre o player e
     a borda ficou aberta - e no celular a lista aparecia POR TRAS dos botoes,
     que e o que nao pode.
     Agora o veu cobre tudo isso: solido ate onde o player comeca e desbotando
     nos 96px acima, para o cartao de musica se apagar por inteiro antes de
     encostar nele (um cartao tem 60px; um degrade da mesma altura so comecaria a
     apagar com ele ja na metade do caminho). */
  /* O VEU EXISTE SEMPRE, E NAO SO QUANDO HA MUSICA.
     Ele nasceu para o player, e por isso morava em `.has-bar`: sem musica
     selecionada, a lista corria por tras da barra de baixo - que tambem perdeu o
     cartao e tambem e so um punhado de icones soltos. Sao dois tamanhos do mesmo
     veu, e nao dois veus: aqui o que ele cobre e a barra; abaixo, com player, ele
     cresce para cobrir os dois.
     NO PALCO ELE NAO ENTRA. La nao ha barra nem player, e o pe da tela ja tem
     veu e nevoa proprios - este passaria por cima dos dois. */
  #app::after{
    content:''; position:fixed; left:0; right:0; bottom:0; z-index:39;
    height:calc(var(--abas-flut) + 76px); pointer-events:none;
    background:linear-gradient(to top,
      var(--bg) 0,
      var(--bg) calc(100% - 76px),
      rgb(var(--fundo-rgb) / .6) calc(100% - 34px),
      transparent 100%);
  }
  #app.sem-abas::after{display:none}

  #app.has-bar::after{
    content:''; position:fixed; left:0; right:0; bottom:0; z-index:39;
    height:calc(var(--abas-h) + var(--sab) + 8px + var(--rp-h, 56px) + 96px);
    pointer-events:none;
    background:linear-gradient(to top,
      var(--bg) 0,
      var(--bg) calc(100% - 96px),
      rgb(var(--fundo-rgb) / .62) calc(100% - 44px),
      transparent 100%);
  }
  /* A barra de progresso fica ACIMA do vidro: ela e informacao, e nao conteudo
     de lista - apaga-la junto seria esconder justamente o que se quer ver. */
  .rp-seek{z-index:41}
}


/* ---- A MESMA FUMACA NO FUNDO DO PALCO ----

   No palco a tela e preta de ponta a ponta, com a letra flutuando no meio dela.
   Preto absoluto e chao sem profundidade: nada diz onde a tela termina, e o
   cartao do rodape parece colado num vazio. A fumaca da a esse fundo uma origem
   - a luz vem de baixo, de onde vem o transporte - e o cartao translucido passa
   a ter algo por tras para deixar ver.

   Mais aberta e mais lenta que a da tab: ali ela ocupa 42px de altura, aqui a
   tela inteira. Mesma cor, mesma ideia, escala diferente - senao, ampliada, ela
   viraria um degrade colorido no lugar de um clima.

   Fica so no celular, como a outra: e la que a tela e pequena e o preto chapado
   pesa. O keyframe e o mesmo, por isso este bloco mora dentro da mesma media
   query - dois keyframes iguais com o mesmo nome e a primeira coisa a divergir. */
@media all{
  /* `position:absolute`, E NAO `relative`. Com `relative` esta tela deixa de ter
     a altura do aparelho e passa a ter a altura da LETRA - um render de janela de
     760px media 930px de palco. E uma caixa sem altura definida nao tem o que
     rolar: `flex:1` na letra devolve a altura do proprio texto, `scrollHeight`
     fica igual a `clientHeight`, e o dedo nao encontra rolagem nenhuma.
     `absolute` e o que `.screen` ja define; a fumaca continua ancorando nela do
     mesmo jeito, porque absolute tambem e posicao. */
  #scr-stage{position:absolute}
  /* O CENTRO DO CLARAO PRECISA CABER DENTRO DA CAIXA.
     Na tab os gradientes ficam em `at 20% 110%` porque a faixa tem 42px de
     altura e 110% e logo abaixo dela - o claro entra pela borda de baixo. Copiei
     esses mesmos numeros para ca, onde a caixa tem 65% de uma TELA: 110% virou
     centenas de pixels fora do quadro, e o `overflow:hidden` do palco cortava o
     resto. A fumaca existia e nao aparecia.
     Aqui os centros ficam em 88% e 96% - dentro da caixa, perto do pe. */
  /* A CAIXA E A TELA INTEIRA, e a posicao do claro se mede nela.
     Duas vezes eu errei isto medindo a porcentagem dentro de uma caixa menor:
     "88%" de uma caixa de 68% de altura, ancorada 8% abaixo do rodape, cai NA
     BORDA de baixo - e o `overflow:hidden` do palco come o resto. Com a caixa
     cobrindo a tela, 88% e 88% da tela, e da para conferir a olho onde o claro
     vai parar. */
  /* A FUMACA VAI ATE O TETO DO RODAPE, E NAO MAIS ALTO.
     Ela cobria a tela inteira e desbotava para cima; o problema e que "desbotar"
     nao e preto - sobrava um roxo de fundo atras da letra, competindo com ela. A
     cor passa a viver so na faixa onde moram os controles: do teto deles para
     baixo ha clima, para cima ha preto e letra. Os claros ficam no pe dessa
     faixa, senao, numa caixa baixa, eles viram tres manchas no meio dela. */
  /* ELA PASSA, NAO VAI E VOLTA.
     Antes era `alternate` com `ease-in-out`: o movimento parava nas duas pontas e
     desacelerava no meio do caminho - ou seja, ficava parado quase o tempo todo,
     e o pouco que andava voltava depois. Fumaca nao volta.
     Agora e uma faixa de TRES TELAS de largura com o desenho repetido a cada
     tela, andando em linha reta e para sempre. Ao fim de uma tela de percurso o
     quadro e identico ao do comeco, entao o laco nao tem emenda: nao ha salto
     para procurar. `linear` de proposito - vento que acelera e freia e ventilador,
     nao corrente de ar. */
  /* NEVOA, E NAO COLUNAS.
     O desenho anterior era de bolhas ALTAS e estreitas: elas subiam, e o que se
     via eram morros de luz, um ao lado do outro. Nevoa e o contrario - ela se
     ESPALHA: as massas sao achatadas, muito mais largas do que altas, e se
     empilham em camadas horizontais de densidades diferentes.

     SAO DUAS COISAS SOMADAS:

       o BANCO, um degrade de baixo para cima, igual em toda a largura. E ele que
       da a densidade - e, por ser igual em toda parte, nao tem como criar
       emenda, por mais que a faixa ande;

       as MECHAS, elipses achatadas dentro do ladrilho, que sao o que se ve
       andar. Sozinhas elas deixariam vaos escuros; sobre o banco, elas sao
       variacoes de densidade dentro de uma massa que ja existe.

     ALTURA: ate o topo do botao do repertorio (74px do chao mais os 37 dele), e
     nem um pixel acima. A nevoa e do chao do palco; a letra e do resto da tela. */
  #scr-stage::before{
    content:''; position:fixed; left:-100%; right:-100%; bottom:0;
    height:calc(112px + var(--sab));
    pointer-events:none; z-index:3;
    background-repeat:repeat-x;
    background-size:33.333% 100%;        /* cada repeticao = uma tela */
    background-image:
      /* CADA MECHA TEM O SEU PROPRIO DEGRADE POR DENTRO.
         Antes era claro no centro e transparente na borda, em um passo so: o
         desenho fechava rapido demais e cada mecha tinha contorno - eram bolhas
         claras, nao fumaca. Com tres paradas (o nucleo, o corpo a 38% e o resto
         se abrindo ate 100%), a densidade cai devagar e a borda deixa de existir:
         nao ha onde uma acaba, so onde ela e menos. */
      radial-gradient(26% 34% at 32% 88%,
        rgb(var(--tinta) / .44) 0%, rgb(var(--tinta) / .24) 38%, rgb(var(--tinta) / .08) 70%, transparent 100%),
      radial-gradient(21% 28% at 63% 74%,
        rgb(var(--tinta) / .36) 0%, rgb(var(--tinta) / .19) 40%, rgb(var(--tinta) / .06) 72%, transparent 100%),
      radial-gradient(16% 22% at 46% 56%,
        rgb(var(--tinta) / .27) 0%, rgb(var(--tinta) / .14) 42%, rgb(var(--tinta) / .04) 74%, transparent 100%),
      radial-gradient(13% 22% at 80% 92%,
        rgb(var(--tinta) / .40) 0%, rgb(var(--tinta) / .21) 38%, rgb(var(--tinta) / .07) 70%, transparent 100%),
      radial-gradient(8% 16% at 14% 64%,
        rgb(var(--tinta) / .29) 0%, rgb(var(--tinta) / .15) 42%, rgb(var(--tinta) / .05) 74%, transparent 100%),
      radial-gradient(22% 30% at 50% 102%,
        rgb(var(--tinta) / .42) 0%, rgb(var(--tinta) / .23) 38%, rgb(var(--tinta) / .08) 70%, transparent 100%),
      /* A QUEDA E TARDIA, e nao logo acima do chao. Com o banco caindo depressa, a
         nevoa existia so nos ultimos quarenta pixels e o resto da faixa ficava
         preto - media-se com o conta-gotas e ela estava la, mas o olho via uma
         borda clara rente ao rodape, nao um banco de nevoa. Ela agora se mantem
         densa ate quase metade da faixa e so entao se abre. */
      /* O BANCO PESA MENOS QUE AS MECHAS, E ISSO E O PONTO.
         Ele e igual em toda a largura: por definicao, nao muda quando a faixa
         anda. Enquanto ele respondia pela maior parte do brilho, a nevoa podia
         atravessar a tela inteira que o olho continuava vendo o mesmo cinza -
         "nao esta passando". Agora ele so garante que nao ha buraco preto entre
         as mechas; o que se ve, e o que se ve ANDAR, sao elas. */
      linear-gradient(to top,
        rgb(var(--tinta) / .20) 0%,
        rgb(var(--tinta) / .17) 26%,
        rgb(var(--tinta) / .12) 50%,
        rgb(var(--tinta) / .06) 74%,
        transparent 100%);
    /* O PASSO: uma travessia de tela a cada 44s, uns 9px por segundo. Devagar o
       bastante para nao virar animacao de tela de espera, rapido o bastante para
       se perceber que ela anda sem ficar olhando de proposito. A respiracao
       acompanha na mesma proporcao. */
    animation:fumaca-passa 32s linear infinite,
              fumaca-respira 14s ease-in-out infinite alternate;
  }
  /* A letra e o topo vivem ACIMA dela. O rodape ja esta, por ser fixo. */
  #scr-stage > .stage-top, #scr-stage > .stage-lyrics{position:relative; z-index:1}
}


/* ---- O TEMPO DA MUSICA EMBAIXO DO NOME, na tela inicial ----

   Os dois dividiam a mesma linha do cabecalho, disputando largura com a marca:
   tres coisas numa faixa de celular, e o nome ficando sem espaco justamente
   porque um relogio de 11 caracteres nao cede.

   Empilhados, cada um tem a linha inteira - e a hierarquia fica certa: quem
   voce e primeiro, o que esta tocando embaixo. O relogio continua aparecendo so
   quando ha musica (a classe `.on` e de quem escreve o tempo), entao a segunda
   linha nasce e some junto com ele. */
@media (max-width:1023.98px){
  #scr-home .header{flex-wrap:wrap; row-gap:1px}
  #scr-home #helloTopo{order:2}
  #scr-home #hdTimeHome{
    order:3; flex:1 0 100%; text-align:right; margin:0;
    font-size:var(--text-xs);
  }
}


/* ================= AS TRES FONTES DE MUSICA =================

   O QUE ESTAVA ERRADO. Cada cartao trazia um titulo com icone e, ABAIXO dele,
   um paragrafo de apoio solto - tres blocos de texto em alturas diferentes, com
   o icone falando so com a primeira linha. O olho lia titulo, descia, lia a
   descricao, descia de novo para o botao: tres paradas para uma escolha que e
   uma so, "de onde vem a musica".

   AGORA sao duas colunas: o icone a esquerda e, a direita, nome e descricao
   empilhados. Um bloco so, que se le de cima a baixo numa passada - e o icone
   passa a pertencer ao conjunto, e nao a uma linha dele.

   O ICONE GANHA A COR DA FONTE. Tres quadrados cinza identicos nao ajudavam a
   distinguir nada; com um tom por caminho (o arquivo, a nuvem, o PC) a escolha
   se faz pela cor antes de ler o nome, que e como se escolhe numa tela ja
   conhecida. Sao as cores da marca, e nao cores novas. */
.fonte-topo{
  display:flex; align-items:flex-start; gap:var(--space-3);
  margin-bottom:var(--space-4);
}
.fonte-txt{display:flex; flex-direction:column; gap:3px; min-width:0}
.fonte-nome{
  font-size:var(--text-md); font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-tight); color:var(--text);
}
.fonte-sub{
  font-size:var(--text-sm); color:var(--muted); line-height:var(--leading-snug);
}
.fonte-topo .ic, .fonte-linha .ic{
  width:40px; height:40px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--card-elevated); border:1px solid var(--border);
  color:var(--muted);
}
.fonte-topo .ic svg, .fonte-linha .ic svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:2}

/* Um tom por caminho. O fundo e o mesmo tom a 12%, entao a cor aparece sem
   virar um bloco chapado no meio de uma tela escura. */
.ic-arquivo{background:rgb(var(--brand-1-rgb) / .12); border-color:rgb(var(--brand-1-rgb) / .28); color:var(--brand-1)}
.ic-nuvem  {background:rgb(var(--brand-3-rgb) / .12); border-color:rgb(var(--brand-3-rgb) / .28); color:var(--brand-3)}
.ic-pc     {background:rgb(var(--brand-5-rgb) / .12); border-color:rgb(var(--brand-5-rgb) / .28); color:var(--brand-5)}

/* ---- o X da ficha de conta ----
   Ela so fechava tocando fora, que e um gesto que ninguem descobre sozinho num
   celular: a pessoa toca na propria ficha, nada acontece, e conclui que travou. */
.acct-topo{display:flex; align-items:flex-start; gap:var(--space-2)}
.acct-topo .acct-head{flex:1; min-width:0}
.acct-x{
  flex:0 0 auto; width:26px; height:26px; margin:2px 2px 0 0;
  display:flex; align-items:center; justify-content:center;
  background:none; border:0; border-radius:var(--radius-sm);
  color:var(--muted2); cursor:pointer;
}
.acct-x svg{width:13px; height:13px}
.acct-x:hover{color:var(--text); background:var(--card-elevated)}
.acct-x:active{opacity:.6}


/* ---- A TROCA DE ABA TEM DIRECAO ----
   Trocar de aba trocava o conteudo num quadro, sem nada dizendo de onde a lista
   nova veio. Entrando pelo lado da aba tocada, o movimento conta o que
   aconteceu: a tela andou para la, e o caminho de volta e para ca.

   So no celular: no monitor as duas listas ficam lado a lado e nao ha troca
   nenhuma para explicar. Curto (0,24s) porque isto acompanha um toque - mais
   que isso vira espera. */
@media (max-width:1023.98px){
  /* ESMAECIMENTO, com um resto de direcao. O que conta a troca e a lista
     surgindo do nada; o deslocamento de 6px so diz de que lado ela veio, sem
     virar um empurrao. Antes eram 16px e o movimento mandava na cena - a lista
     parecia ser arrastada, e nao revelada. Mais longo tambem (0,34s): o
     esmaecimento precisa de tempo para ser visto como esmaecimento. */
  @keyframes aba-vem-da-direita{
    from{opacity:0; transform:translateX(6px)}
    to  {opacity:1; transform:none}
  }
  @keyframes aba-vem-da-esquerda{
    from{opacity:0; transform:translateX(-6px)}
    to  {opacity:1; transform:none}
  }
  .entra-dir{animation:aba-vem-da-direita .34s var(--ease) both}
  .entra-esq{animation:aba-vem-da-esquerda .34s var(--ease) both}
}
@media (prefers-reduced-motion:reduce){
  .entra-dir, .entra-esq{animation:none}
}


/* A fumaca do palco vai a 38/33/28 por cento. Na tab ela e clima atras de uma
   faixa de 42px, com o cinza do rodape logo abaixo para dar contraste; no palco
   ela se espalha por uma tela PRETA, onde 22% de azul sobre preto e quase nada -
   a mesma tinta rende muito menos numa area grande e sem nada em volta para
   comparar. */

/* ---- A LETRA SE APAGA ANTES DO RODAPE, no palco ----

   A letra rola por tras do cartao do transporte. Sem nada entre os dois, o verso
   chega inteiro ate a borda do cartao e some num corte reto - e como o cartao e
   translucido, o texto ainda aparece POR DENTRO dele, desfocado, competindo com
   o tempo e os botoes.

   O veu preto resolve as duas coisas de uma vez: o verso se dissolve antes de
   chegar la, e o que atravessa o vidro do cartao ja e fundo, e nao palavra.

   Fica no z-index 2 - acima da letra (1) e abaixo do cartao (41) -, e a fumaca
   sobe para o 3, para continuar aparecendo. E nao intercepta toque: rolar a
   letra com o dedo atravessa. */
@media all{
  /* MAIS ALTO E MAIS FECHADO DESDE QUE O RODAPE PERDEU O CARTAO. Antes o veu
     dividia o trabalho com uma superficie opaca atras dos botoes; agora e so
     ele - e um degrade que termina translucido deixaria o verso passando por
     entre o play e o tempo. */
  #scr-stage::after{
    content:''; position:fixed; left:0; right:0; bottom:0;
    height:calc(210px + var(--sab));
    z-index:2; pointer-events:none;
    background:linear-gradient(to top,
      rgb(var(--palco-preto)) 0%, rgb(var(--palco-preto)) 22%, rgb(var(--palco-preto) / .92) 45%, rgb(var(--palco-preto) / .55) 70%, transparent 100%);
  }
}


/* ============ SEM CAIXA EM VOLTA DE CADA ITEM, no celular ============

   Uma lista de dez musicas eram dez retangulos com borda, um embaixo do outro:
   vinte linhas desenhadas para separar o que o espaco entre eles ja separava. E
   cada caixa cobra dois lados de largura no aparelho onde o nome da musica e o
   que mais falta caber.

   Sem elas a lista vira o que e - uma sequencia de nomes -, e a leitura desce
   sem obstaculo.

   A CAIXA FICA NA QUE ESTA TOCANDO, e so nela. Numa lista plana, a unica com
   superficie e contorno se acha na hora, sem procurar: a excecao passa a ser o
   sinal. Era isso que o contorno colorido tentava fazer competindo com dez
   bordas iguais.

   E como nao ha mais caixa para responder ao dedo, o toque acende o proprio
   item por um instante. */
/* E VALE NO MONITOR TAMBEM. O argumento nunca foi o tamanho da tela: dez
   retangulos iguais nao dizem nada sobre dez musicas, num celular ou num
   monitor de 27 polegadas. No monitor e ate pior, porque a caixa fica larga e
   vazia. O que muda com o mouse e so o realce de passagem, logo abaixo. */
/* O CARTAO ABERTO NAO E ITEM DE LISTA, E UM MODAL.
   Quando o lapis expande a musica, aquele mesmo `.song` vira a ficha de editar,
   com fundo escurecido atras: ele PRECISA de superficie e de borda para se
   descolar da lista. Sem o `:not(.expanded)` esta regra achatava ele junto com
   os vizinhos - e como ela vem depois de `.song.expanded{border-color:...}` com
   a mesma especificidade, era ela quem ganhava. O modal abria transparente, sem
   moldura, misturado ao que estava atras. */
.song:not(.current):not(.expanded), .list-item:not(.current),
#scr-rep #songList .song:not(.current):not(.expanded),
#scr-all #allList .song:not(.current):not(.expanded){
  background:none; border-color:transparent; box-shadow:none;
}
.song:not(.current):active, .list-item:not(.current):active{
  background:rgb(var(--tinta) / .05);
}
/* COM MOUSE, O REALCE DE PASSAGEM VOLTA - e nao volta como era.
   Antes ele acendia sobre um cartao que ja existia; agora ele e a unica coisa
   que responde ao ponteiro numa lista plana, entao precisa ser visivel sem
   virar um bloco. Quatro por cento de branco e o suficiente para a linha
   inteira dizer "e esta". No toque isto nao existe: la quem responde e o
   `:active`. */
@media (hover:hover) and (pointer:fine){
  .song:not(.current):not(.expanded):hover, .list-item:not(.current):hover{
    background:rgb(var(--tinta) / .04);
  }
}
@media (max-width:1023.98px){
  /* O respiro entre os itens cresce um pouco: sem borda, e o vao que faz o
     trabalho de dizer onde um acaba e o outro comeca. */
  /* O vao entre os itens: o suficiente para separar, e nao mais. Ele foi
     calculado quando cada linha era um cartao com moldura - e cartao precisa de
     ar em volta para nao encostar no vizinho. Sem moldura, doze pixels entre
     nomes viram um buraco, e uma lista de quinze musicas passa a pedir duas
     rolagens onde cabia uma. */
  #homeAllList .song, #allList .song, #repList .list-item{margin-bottom:3px}
}


/* Sem caixa nos vizinhos, o item selecionado precisa de um pouco mais de corpo:
   antes ele se destacava por contraste com dez bordas iguais; agora ele e a
   unica coisa desenhada da lista, e a moldura dele e o que responde "qual e". */
@media (max-width:1023.98px){
  .song.current, .list-item.current{border-width:1.6px}
}


/* ---- AS ABAS SEM ICONE ----
   Uma nota e uma pasta ao lado das palavras "Musicas" e "Repertorios" nao
   acrescentam nada: o rotulo ja diz, e diz melhor. Eles existiam de quando o
   texto sumia em tela estreita e o icone era a unica pista - com os nomes
   curtos, o texto cabe sempre e o icone virou enfeite roubando largura da
   propria palavra. */
.aba svg{display:none}


/* O play que ocupa o lugar do numero. Do tamanho exato do numero que ele
   substitui - a linha nao pode mudar de altura quando a escolha troca - e sem
   area de toque alem do proprio desenho: o cartao inteiro ja tem um clique, e
   os dois gestos moram a milimetros um do outro. */
.row-play{
  padding:0; cursor:pointer;
  background:var(--card-elevated); border:1px solid var(--border-strong);
  color:var(--text);
  align-items:center; justify-content:center;
  transition:transform var(--duration-fast) var(--ease), background var(--duration) var(--ease);
}
.row-play svg{width:13px; height:13px; margin-left:1px}  /* o triangulo pesa a esquerda */
.row-play:hover{background:var(--accent); color:var(--accent-foreground); border-color:transparent}
.row-play:active{transform:scale(.88)}

/* O contorno do escolhido, mais fino. */
@media (max-width:1023.98px){
  .song.current, .list-item.current{border-width:1px}
}


/* ---- QUEM APARECE NA BARRA, EM CADA TELA ----
   No monitor as duas listas ficam lado a lado: uma entrada so, "Inicio", cobre
   as duas. No celular elas sao telas diferentes, entao viram destinos proprios
   e o "Inicio" perde a funcao - ele levaria a uma das duas de qualquer jeito. */
.so-celular{display:none}
@media (max-width:1023.98px){
  .so-celular{display:flex}
  .so-monitor{display:none}

  /* E AS ABAS DE CIMA SAEM. Elas faziam exatamente o que o rodape passa a
     fazer, e duas fileiras de navegacao para a mesma escolha - uma no alto,
     outra embaixo - e a pessoa perguntando qual das duas manda. */
  .abas{display:none}

  /* A ESCOLHIDA E UMA FAIXA, e nao uma caixa.
     Caixa tem quatro lados e volta a ser o unico retangulo de uma lista que
     deixou de ter retangulos - um aviso no meio de nomes. A faixa so troca o
     chao debaixo da linha: nao desenha nada, apenas diz "e esta".

     DE PONTA A PONTA. Ela sai pelas margens da tela com margem negativa e
     devolve o mesmo tanto em padding, entao o texto nao anda um pixel enquanto
     o fundo alcanca as bordas.

     A CONTA E DIVIDIDA PELO ZOOM da lista, que e ajustavel pelos botoes - e + do
     resumo. Sem isso, com a lista em 80% a faixa encolheria junto e pararia a
     quatro pixels da borda, do lado errado do "de ponta a ponta". */
  .song.current, .list-item.current,
  .song.current:hover, .list-item.current:hover{
    border-color:transparent; border-radius:0;
    background:var(--atual-hover);
    animation:none;
  }
  /* A FAIXA MEDE PELO RECUO DA TELA, e nao por um 20 escrito a mao. A tela do
     repertorio passou a recuar menos (ver `--recuo-lista`), e com o numero fixo
     a faixa saia 20px pela borda enquanto devolvia 20px de padding: o nome
     andava para a direita toda vez que a linha era escolhida. */
  #songList .song.current, #allList .song.current{
    margin-left:calc((0px - var(--recuo-lista, 20px) - var(--sal)) / var(--lista-zoom, 1));
    margin-right:calc((0px - var(--recuo-lista, 20px) - var(--sar)) / var(--lista-zoom, 1));
    padding-left:calc((var(--recuo-lista, 20px) + var(--sal)) / var(--lista-zoom, 1));
    padding-right:calc((var(--recuo-lista, 20px) + var(--sar)) / var(--lista-zoom, 1));
  }
  #homeAllList .song.current, #repList .list-item.current{
    /* `width:auto` NAO E ENFEITE. `.list-item` nasce com `width:100%`, e com
       largura fixa a margem negativa so EMPURRA a caixa para a esquerda: ela
       sai 20px pela borda esquerda e para 20px antes da direita. A faixa do
       repertorio ficava torta por isso, enquanto a da musica - que nao tem
       largura declarada - alcancava os dois lados. */
    width:auto;
    margin-left:calc(-20px - var(--sal));
    margin-right:calc(-20px - var(--sar));
    padding-left:calc(20px + var(--sal));
    padding-right:calc(20px + var(--sar));
  }

  /* O TRACO DA EMENDA LIGAVA DUAS CAIXAS que nao existem mais. Sem elas ele vira
     um risco vertical solto entre dois nomes, apontando para nada. O rotulo
     "Emenda" continua: e ele que diz o que acontece ali, e o vao maior da pausa
     continua dizendo o resto. */
  .song.emenda .junta-linha{display:none}
}


/* Os - e + do tamanho da lista, menores no celular. Eles ajustam a MOSTRAGEM,
   nao o show: ficam na linha do resumo, acima da primeira musica, e em 32px
   disputavam altura com ela. Em 26 continuam acertaveis - sao dois alvos
   separados por um vao, e errar um pelo outro so troca um degrau de tamanho,
   que se desfaz no toque seguinte. */
@media (max-width:1023.98px){
  .lista-zoom button{width:26px; height:26px; font-size:12px}
  .lista-zoom{gap:4px}
}


/* ================= A TELA DE CRIAR, NO CELULAR =================

   O QUE ESTAVA ERRADO. Tres caixas empilhadas, cada uma com um titulo, uma
   descricao e um botao dentro - e no caso do arquivo o botao repetia o mesmo
   icone e quase o mesmo texto do titulo logo acima. Para uma tela cujo unico
   trabalho e responder "de onde vem a musica", eram tres molduras, seis blocos
   de texto e dois alvos por fonte.

   AGORA SAO LINHAS. Sem caixa, separadas por um fio, cada uma com icone, nome,
   uma linha de explicacao e uma seta - o desenho que qualquer app usa para
   "escolha um destes". A busca na nuvem continua com campo, porque ali a acao
   e digitar; as outras viram um toque so. */
@media (max-width:1023.98px){
  /* Sem moldura: o fio entre as fontes ja diz onde uma acaba. */
  #scr-create > .card{
    background:none; border:0; border-radius:0;
    padding:var(--space-4) 0; margin:0;
    border-bottom:1px solid var(--line);
  }
  #scr-create > .card:last-of-type{border-bottom:0}

  /* O cabecalho e a legenda saem: a barra de baixo ja diz onde voce esta, e a
     frase de apresentacao se le uma vez na vida. */
  #scr-create > .header{display:none}
  #scr-create .tela-hero{margin-bottom:var(--space-2)}
  #scr-create .tela-hero .h-title{font-size:var(--text-lg)}
  #scr-create #createSub{display:none}

  .fonte-topo{margin-bottom:var(--space-3)}
}

/* A linha tocavel de uma fonte de musica: icone, texto e seta. Vale nas duas
   larguras - no monitor ela so ganha a moldura do cartao em volta. */
.fonte-linha{
  display:flex; align-items:center; gap:var(--space-3); width:100%;
  background:none; border:0; padding:0; cursor:pointer;
  color:var(--text); font-family:inherit; text-align:left;
}
.fonte-linha .fonte-txt{flex:1; min-width:0}
.fonte-seta{width:18px; height:18px; flex-shrink:0; color:var(--muted2)}
.fonte-linha:active{opacity:.6}
.fonte-linha:hover .fonte-seta{color:var(--text)}




/* ============ A BARRA FLUTUANTE, SO COM ICONES ============

   FLUTUANDO, como o player logo acima dela. Encostada de ponta a ponta e com
   canto reto, ela era a moldura inferior da tela - e o player, solto e
   arredondado, parecia nao ter nada a ver com ela. Soltas as duas, uma sobre a
   outra, leem como um conjunto: o que esta na frente da tela esta por cima.

   SO ICONES. Com cinco destinos, um rotulo embaixo de cada um daria cinco
   palavras de 9px espremidas - ilegiveis, e ocupando altura que a lista quer. O
   nome volta no TOQUE (ver `piscarRotulo`), que e quando ele de fato ajuda.

   O ATIVO GANHA UM CIRCULO. Com texto, a cor cheia no icone bastava, e um fundo
   preenchido pesava demais. Sem texto, sobra so a cor de um desenho de 21px para
   dizer onde se esta - pouco. O circulo e o que entra no lugar do rotulo.

   O MODO SHOW NO CENTRO, levantado e cheio. */
@media (max-width:1023.98px){
  /* O quanto a barra ocupa contando do chao: altura + o vao + a area segura do
     aparelho. Tudo que se empilha acima dela mede a partir daqui. */
  /* A BARRA DESCE ATE QUASE A BORDA. Ela nao tem mais cartao - sao icones soltos
     -, e icone solto nao precisa de margem para "nao encostar na moldura": nao ha
     moldura. Os 8px viraram 2, e o que separa de verdade continua sendo a area
     segura do aparelho (`--sab`), que e onde mora a barra de gestos.
     Tudo que se empilha acima dela mede por aqui, entao o player e o veu descem
     junto sem nenhuma outra conta. */
  /* QUANTO DA AREA SEGURA A GENTE GUARDA: TODA.
     `--sab` e a faixa que o iPhone reserva embaixo - e por onde ele puxa o gesto
     de voltar para a tela inicial. No aparelho de teste ela mede 31px.
     Ja se tentou nao guardar nada dela: os icones ficavam DENTRO da faixa do
     gesto, e o ultimo par de pixels do alvo do dedo disputava lugar com o
     sistema. E a barra desenhada por cima do risco branco do indicador nao fica
     bonita - fica errada.
     Guardando a faixa inteira, a barra para na borda a partir da qual a tela e
     do iPhone e nao do app - correto, e alto demais: a faixa do gesto e uma tira
     fina no MEIO da borda, e a barra inteira recuava por causa dela.
     SETENTA POR CENTO E O PONTO. Sobram uns 22px no aparelho de teste: a barra
     desce quase dez pixels, o risco do indicador continua livre, e os alvos do
     dedo tem 42px de altura - o toque acerta muito acima de onde o sistema
     escuta o deslize.
     Este numero e o unico botao de ajuste: `var(--sab)` devolve tudo, `0` encosta
     no vidro. Tudo que se empilha acima mede por aqui, entao o player, o veu e o
     rodape do palco acompanham sem nenhuma outra conta. */
  :root{--chao:calc(var(--sab) * .7)}
  :root{--abas-flut:calc(var(--abas-h) + var(--chao))}

  .app-nav{
    left:6px; right:6px; bottom:var(--chao);
    border-radius:20px; border:1px solid rgb(var(--tinta) / .08);
    background:rgb(var(--vidro) / var(--vidro-alfa, .94));
    box-shadow:0 12px 32px rgb(var(--sombra) / .6);
    padding:0 6px;
    overflow:visible;             /* o rotulo e o botao do meio saem para fora */
  }
  @supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
    .app-nav{
      background:rgb(var(--vidro) / var(--vidro-alfa, .7));
      backdrop-filter:blur(14px) saturate(1.4);
      -webkit-backdrop-filter:blur(14px) saturate(1.4);
    }
  }

  /* O texto sai do fluxo e vira uma pilula acima do icone, so no toque. */
  .app-nav-item{gap:0}
  .app-nav-item > span{
    position:absolute; bottom:calc(100% + 9px); left:50%;
    transform:translate(-50%, 6px);
    padding:4px 10px; border-radius:var(--radius-full);
    background:var(--noite-funda); border:1px solid var(--noite-borda);
    box-shadow:var(--shadow-lg);
    font-size:11px; font-weight:var(--weight-medium); color:var(--text);
    white-space:nowrap; opacity:0; pointer-events:none;
    transition:opacity .16s var(--ease), transform .16s var(--ease);
  }
  .app-nav-item.com-rotulo > span{opacity:1; transform:translate(-50%, 0)}

  /* O circulo do ativo, no lugar do risco que ficava na borda de cima - borda
     que esta barra nao tem mais, porque ela nao encosta em nada. */
  .app-nav-item::before{
    content:''; position:absolute; top:50%; left:50%;
    width:36px; height:36px; border-radius:50%;
    background:rgb(var(--tinta) / .1);
    transform:translate(-50%,-50%) scale(.6); opacity:0;
    transition:transform .22s var(--ease), opacity .22s var(--ease);
  }
  .app-nav-item.on::before{transform:translate(-50%,-50%) scale(1); opacity:1}
  .app-nav-item svg{position:relative}   /* o icone fica sobre o circulo */

  /* O botao do meio saiu da barra: o palco deixou de ser um destino, ele abre
     sozinho quando a musica comeca. */

  /* ---- O QUE SE EMPILHA ACIMA DELA ----
     Todas estas medidas existiam contando com a barra colada no chao; com ela
     solta, o chao de referencia subiu 8px mais a area segura. */
  .rep-player{bottom:calc(var(--abas-flut) + 8px)}
  .rp-seek{bottom:calc(var(--abas-flut) + 8px + var(--rp-h, 56px) + 4px)}
  .screen{padding-bottom:calc(var(--abas-flut) + 24px)}
  #app.has-bar .screen{padding-bottom:calc(var(--abas-flut) + 84px)}
  #app.has-bar.has-seek .screen{padding-bottom:calc(var(--abas-flut) + 110px)}
}


/* ============ A CONTA SOBE DE BAIXO, NO CELULAR ============

   Era um popover de 230px colado no canto de cima da direita, apontando para
   onde o botao de conta MORAVA - la no alto. Ele nao mora mais la: mora na barra
   de baixo. Um cartao que nasce no canto oposto ao dedo que o abriu nao tem
   relacao nenhuma com o gesto, e ainda deixa 76% da tela de fundo sem uso.

   Subindo de onde foi tocado, ele e a continuacao do proprio toque. E largura
   cheia com a alca em cima e a forma que todo aparelho usa para dizer "isto se
   puxa e se empurra" - inclusive as outras folhas deste app, que ja eram assim. */
@media (max-width:1023.98px){
  #userSheet{align-items:flex-end; justify-content:center; background:rgb(var(--veu) / .5)}
  .acct-card{
    width:100%; max-width:none; margin:0;
    padding:var(--space-2) var(--space-3) calc(var(--space-3) + var(--sab));
    border-radius:var(--radius-3xl) var(--radius-3xl) 0 0;
    border-bottom:0;
    transform-origin:bottom center;
    /* Fora da tela, e nao 8px acima dela: o que se ve e o cartao ENTRANDO, com a
       curva desacelerando no fim, como coisa que tem peso. */
    transform:translateY(100%);
    transition:transform .3s cubic-bezier(.16,.9,.24,1);
    box-shadow:0 -14px 40px rgb(var(--sombra) / .6);
  }
  /* O fundo escuro espera o cartao terminar de descer: senao a folha desaparece
     com o cartao ainda no meio do caminho. */
  #userSheet{transition:opacity .3s, visibility 0s linear .3s}
  #userSheet.on{transition:opacity .3s}

  /* A alca. Nao arrasta - e um sinal de forma, dizendo de onde a peca veio. */
  .acct-card::before{
    content:''; display:block; width:38px; height:4px; margin:2px auto 8px;
    border-radius:var(--radius-full); background:rgb(var(--tinta) / .22);
  }
  /* Com a largura da tela toda, as linhas podem ter o corpo de uma lista de
     verdade, em vez do de um menu apertado. */
  .acct-opt{padding:var(--space-4) var(--space-3); border-radius:var(--radius-lg)}
  .acct-ic{width:21px; height:21px}
  .acct-head{padding:6px 12px 10px; font-size:var(--text-sm)}
}


/* ============ A BUSCA NA NUVEM: UMA BARRA SO ============

   O campo ocupava uma linha, e o botao a linha de baixo, de ponta a ponta, para
   uma tarefa que e uma: digitar o nome e buscar. Em uma barra, o alvo da acao
   fica a um centimetro do que se acabou de escrever, e a tela de criar perde uma
   fileira inteira.

   O FOCO E DA BARRA, e nao do campo. Dentro dela o campo nao tem moldura propria
   - duas molduras concentricas a um pixel de distancia sao um erro de desenho -,
   entao quem acende ao receber o cursor e a barra inteira. */
.busca-barra{
  display:flex; align-items:center; gap:6px;
  background:var(--input); border:1px solid var(--border);
  border-radius:var(--radius-full); padding:5px 5px 5px var(--space-2);
  transition:border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.busca-barra:focus-within{border-color:var(--ring); box-shadow:0 0 0 3px var(--ring-halo)}
.busca-barra .field{
  flex:1; min-width:0; padding:0 var(--space-2);
  background:none; border:0; border-radius:0; box-shadow:none;
}
.busca-barra .field:focus{border:0; box-shadow:none; outline:none}
/* O X volta para o fluxo: dentro de uma barra deitada ele e so o vizinho da
   esquerda do botao, e nao mais uma peca solta por cima do campo. */
.busca-barra .cloud_file-clear{
  position:static; width:30px; height:30px; flex:none;
  align-items:center; justify-content:center; border-radius:50%;
}
.busca-barra .busca-ir{
  /* O `min-height:48px` do botao base e a medida de um botao que ocupa a linha
     sozinho; dentro de uma barra ele tem que caber NELA, senao a barra cresce
     para 58px de altura para acomodar um botao que ninguem pediu tao grande. */
  flex:none; height:38px; min-height:0; padding:0 var(--space-4);
  border-radius:var(--radius-full); white-space:nowrap;
}
.busca-barra .busca-ir svg{width:16px; height:16px}

/* Os resultados, em linha. Eram os unicos cartoes com moldura que sobraram na
   tela de criar depois que as fontes viraram linhas - e uma lista de escolhas
   emoldurada, logo abaixo de linhas sem moldura, parece outra coisa. A miniatura
   ja da estrutura de sobra para separar um resultado do seguinte. */
@media (max-width:1023.98px){
  .cloud_file-item{
    background:none; border:0; border-radius:0;
    padding:var(--space-3) 0; margin:0;
    border-bottom:1px solid var(--line);
  }
  .cloud_file-item:last-child{border-bottom:0}
  .cloud_file-item:active{transform:none; opacity:.6}
  .cloud_file-thumb{width:92px; height:52px}
}


/* ============ FLUTUANTE DE VERDADE: A BARRA SEM CARTAO ============

   Solta das bordas ela ainda era uma CAIXA - fundo escuro, borda, sombra - so
   que uma caixa menor. Cinco icones dentro de um retangulo cinza continuam
   parecendo um painel apoiado em cima da tela, e a tela inteira fica com uma
   faixa morta embaixo.

   Sem caixa, o que flutua sao os proprios icones. O que garante que eles se leem
   por cima de uma lista nao e mais um fundo atras deles - e:

     o DEGRADE para o preto que o fim da lista ja tem (ele existe desde que o
     player virou cartao, e e o que impede a ultima musica de encostar nos
     controles);

     uma SOMBRA em cada icone, que separa o desenho do que passa atras dele sem
     precisar de uma superficie;

     e o CIRCULO do ativo, que continua ali - agora ele e a unica superficie da
     barra, e por isso passa a ser tambem o que diz "esta faixa e a barra".

   O botao do meio nao muda: ele e cheio de proposito, porque e acao e nao lugar. */
@media (max-width:1023.98px){
  .app-nav{
    background:none; border:0; box-shadow:none;
    backdrop-filter:none; -webkit-backdrop-filter:none;
    padding:0 var(--space-2);
  }
  /* O @supports acima tambem pintava o fundo; sem isto ele volta a pintar. */
  @supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
    .app-nav{background:none; backdrop-filter:none; -webkit-backdrop-filter:none}
  }

  /* A sombra e o que substitui o fundo. Ela mora no icone, e nao no item, para
     acompanhar o desenho em vez de desenhar um quadrado invisivel em volta. */
  .app-nav-item svg{
    filter:drop-shadow(0 2px 6px rgb(var(--papel) / .85)) drop-shadow(0 0 2px rgb(var(--papel) / .7));
  }

  /* O circulo do ativo fecha mais e escurece: era um claro sobre um fundo escuro
     que existia; sem esse fundo, claro sobre a lista vira um borrao. */
  .app-nav-item::before{
    width:38px; height:38px;
    background:rgb(var(--vidro-escuro) / var(--vidro-alfa, .82));
    box-shadow:0 4px 14px rgb(var(--sombra) / .6), inset 0 0 0 1px rgb(var(--tinta) / .1);
  }
}


/* ---- A FOLHA DE CONTA, TRANSLUCIDA ----

   Ela e a unica peca do celular que ainda era um bloco opaco: o player e
   translucido, a barra agora nao tem fundo nenhum, e so a conta descia como uma
   parede. Com o fundo passando por tras, ela continua sendo uma camada POR CIMA
   da tela - e nao a tela seguinte -, o que e exatamente o que ela e: um menu que
   se fecha e devolve voce ao lugar onde estava.

   O desfoque e o que torna isso legivel; onde ele nao existe, o fundo volta a
   ser quase opaco, porque texto claro sobre transparencia sem desfoque, por cima
   de uma lista, nao se le. Mesmo contrato do player. */
@media (max-width:1023.98px){
  #userSheet{background:rgb(var(--veu) / .42)}
  .acct-card{
    background:rgb(var(--vidro) / var(--vidro-alfa, .92));
    border-color:rgb(var(--tinta) / .1);
  }
  @supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
    .acct-card{
      background:rgb(var(--vidro) / var(--vidro-alfa, .62));
      backdrop-filter:blur(22px) saturate(1.5);
      -webkit-backdrop-filter:blur(22px) saturate(1.5);
    }
  }
  /* Sobre fundo translucido, a linha tocada precisa de um claro que se veja: o
     `--card2` era pensado para viver sobre superficie opaca. */
  .acct-opt:active{background:rgb(var(--tinta) / .1)}
}


/* O botao do Estudio, do tamanho do proprio rotulo.

   Ele atravessava a tela de ponta a ponta porque `.row>*` estica os filhos - e
   um botao de 48px de altura e largura cheia, para uma acao que so existe quando
   ha um PC ligado na conta, pesava mais do que a busca na nuvem, que e o caminho
   de todo dia. Mesma medida do `Buscar`: os dois sao a acao de um campo. */
#btnPC{
  flex:0 0 auto; height:38px; min-height:0; padding:0 var(--space-4);
  border-radius:var(--radius-full); font-size:var(--text-sm); white-space:nowrap;
}


/* ================= A TELA DE CRIAR, ACABAMENTO =================

   O que esta tela faz e uma pergunta so - de onde vem a musica - com duas ou
   tres respostas. O que faltava nao era conteudo, era HIERARQUIA: titulo,
   respostas, e nada mais no mesmo peso.

   TITULO GRANDE. Ele e o unico texto grande da tela, e por isso nao precisa de
   moldura nem de legenda embaixo para se impor.

   ROTULO DE SECAO. Duas palavras em versal, pequenas e espacadas, no lugar do
   paragrafo de apresentacao. Elas separam o titulo das respostas sem virar mais
   um bloco de leitura - e e o mesmo recurso que qualquer tela de ajustes usa.

   SEPARADOR RECUADO. O fio entre as fontes comeca onde comeca o TEXTO, e nao na
   borda da tela: assim ele separa as linhas sem cortar a coluna dos icones ao
   meio. Um detalhe de meio pixel que e o que distingue uma lista desenhada de
   uma lista empilhada. */
@media (max-width:1023.98px){
  #scr-create .tela-hero{margin:var(--space-1) 0 var(--space-5)}
  #scr-create .tela-hero .h-title{
    font-size:26px; font-weight:var(--weight-bold);
    letter-spacing:var(--tracking-brand); line-height:1.14;
  }

  .secao{
    margin:0 0 var(--space-1); padding:0 2px;
    font-size:11px; font-weight:var(--weight-semibold);
    letter-spacing:.09em; text-transform:uppercase; color:var(--muted2);
  }

  /* As fontes: linhas mais altas, icone maior, e o fio recuado. */
  #scr-create > .card{
    padding:var(--space-4) 0 0; border-bottom:0; position:relative;
  }
  #scr-create > .card::after{
    content:''; display:block; height:1px; background:var(--line);
    margin:var(--space-4) 0 0 62px;
  }
  #scr-create > .card:last-of-type::after{display:none}

  .fonte-topo{margin-bottom:var(--space-4); align-items:center}
  .fonte-topo .ic, .fonte-linha .ic{width:46px; height:46px; border-radius:14px}
  .fonte-topo .ic svg, .fonte-linha .ic svg{width:21px; height:21px}
  .fonte-nome{font-size:15px}
  .fonte-sub{font-size:12.5px; line-height:1.45; color:var(--muted2)}
  .fonte-seta{width:17px; height:17px}

  /* A barra de busca, com a lupa dentro e mais ar. */
  .busca-barra{gap:8px; padding:6px 6px 6px var(--space-3)}
  .busca-barra .field{font-size:15px}
  .busca-barra .busca-ir{height:40px; font-size:13px; font-weight:var(--weight-semibold)}

  /* Os resultados. Miniatura maior e com o mesmo raio dos cartoes da lista: e a
     mesma coisa - uma musica que se pode tocar -, entao e a mesma forma. */
  .cloud_file-item{gap:var(--space-3); padding:10px 0}
  .cloud_file-thumb{width:96px; height:54px; border-radius:10px}
  .cloud_file-t{font-size:14px; font-weight:var(--weight-medium)}
  .cloud_file-c{font-size:11.5px; margin-top:4px}
}

/* A lupa dentro da barra. Ela nao e botao: e o desenho que diz para que serve o
   campo, e por isso nao pega o toque - quem quer digitar toca no campo, que
   ocupa todo o resto da barra. */
.busca-lupa{
  width:18px; height:18px; flex:none; color:var(--muted2); pointer-events:none;
}
.busca-barra:focus-within .busca-lupa{color:var(--text)}


/* Aqui ficava o RECORTE do player: a mascara que abria um buraco redondo no
   cartao para o botao do modo show, que subia da barra por cima dele. O botao
   saiu da barra - o palco abre sozinho quando a musica comeca -, e um buraco sem
   nada dentro e so um cartao mordido. */


/* ---- O PLAY DA DIREITA, e o lapis menor ----

   ONDE ELE APARECE: so na lista de musicas. Dentro do repertorio o toque no
   cartao ja toca e ja abre a letra, entao um botao repetindo isso seria um alvo
   a mais para o mesmo gesto.

   E ELE SOME NA LINHA ESCOLHIDA: la o play ocupa o lugar do numero, a esquerda.
   Dois botoes de play na mesma linha nao dizem coisas diferentes, so duplicam a
   pergunta "qual deles?".

   O LAPIS ENCOLHE. Ele era do tamanho de uma acao principal e fica ao lado de
   uma agora: editar nome e nota nao e o que se faz numa lista de musicas - e o
   que se faz de vez em quando, e por isso pode ser o menor dos dois. */
.song-play{
  /* SEM BOLINHA. Ele e vizinho do lapis, que tambem e so um desenho: um circulo
     preenchido ao lado de um traco solto faz dois pesos diferentes para duas
     acoes do mesmo nivel - e o circulo puxava o olho em TODAS as linhas da
     lista, disputando com o nome da musica, que e o que se procura ali. O play
     que pede destaque e o outro, o da linha escolhida, que ocupa o lugar do
     numero e por isso herda a caixa dele. */
  display:none; align-items:center; justify-content:center; flex-shrink:0;
  width:28px; height:28px; padding:0; cursor:pointer;
  background:none; border:0; box-shadow:none; color:var(--muted);
  transition:transform var(--duration-fast) var(--ease), color var(--duration) var(--ease);
}
.song-play svg{width:13px; height:13px}
.song-play:hover{color:var(--text)}
.song-play:active{transform:scale(.85); color:var(--text)}
#homeAllList .song .song-play, #allList .song .song-play{display:flex}
#homeAllList .song.current .song-play, #allList .song.current .song-play{display:none}

.song-edit{padding:7px}
.song-edit svg{width:15px; height:15px}


/* Os A- e A+ do palco, tambem menores no monitor. Eles ficam ao lado do nome da
   musica, que e o que se le ali - e sao ajuste de UMA vez, no comeco da noite,
   nao um controle que se usa tocando. */
#scr-stage .stage-tools button{
  height:24px; min-width:26px; padding:0 6px;
  border-radius:var(--radius-sm); font-size:11px; line-height:1;
}

@media (max-width:1023.98px){
  #scr-stage .stage-tools button{
    height:22px; min-width:24px; padding:0 5px; font-size:10px; letter-spacing:-.02em;
  }
}


/* ---- AS LINHAS USAM A LARGURA ATE A BORDA ----

   Sem caixa em volta, o recuo interno do cartao deixou de separar coisa alguma:
   ele so empurra o nome da musica para dentro, e soma com a margem da tela. Sao
   24px por linha que o titulo perde - e titulo de musica e o que mais corta com
   reticencias nesta lista.

   O CONTEUDO NAO ANDA QUANDO A LINHA E ESCOLHIDA. A faixa de ponta a ponta
   devolve em padding o mesmo que tira em margem, entao o nome fica no lugar
   enquanto o fundo alcanca as duas bordas - so que agora a conta bate a partir
   de zero, e nao de 12px. */
@media (max-width:1023.98px){
  .song-main{padding-left:0; padding-right:0}
  #repList .list-item{padding-left:0; padding-right:0}
  /* A alca de arrastar recuava 6px para dentro do antigo padding; sem ele, esse
     recuo jogaria a alca para FORA da coluna, desalinhada dos numeros. */
  .drag-handle{margin-left:0; padding-left:0}
}


/* ============ A FILA DENTRO DO PALCO ============

   A FOLHA COBRE A METADE DE BAIXO, sem empurrar nada: no palco a letra ja esta no
   lugar certo, e qualquer coisa que a desloque obriga quem esta lendo a
   reencontrar a linha. Meia tela basta para escolher e deixa a outra metade com o
   que estava ali; uma fila de vinte musicas rola dentro do proprio painel. */
/* O BOTAO DO REPERTORIO E UM BOTAO DA FILEIRA.
   Ele era uma pilula com a palavra escrita, flutuando acima dos controles: mais
   uma peca sobre a letra, com forma, lugar e tamanho proprios. Dentro da fileira
   ele herda tudo dos vizinhos (`.stage-ctrl button.sec`) e sobra so o que e dele
   - o icone de lista e o estado de aberto. Menos desenho para a mesma funcao. */
.palco-rep-btn svg{width:19px; height:19px}
/* ABERTO, ele acende em vez de sumir. Sumindo, a fileira encolhia e os outros
   quatro botoes andavam de lugar bem no momento em que a folha cobre a tela -
   e ao fechar andavam de volta. */
#scr-stage .stage-ctrl button.palco-rep-btn.on{
  background:var(--accent); border-color:transparent; color:var(--accent-foreground);
}

.palco-lista.on{
  transform:none; opacity:1; visibility:visible;
  transition:transform .32s cubic-bezier(.16,.9,.24,1), opacity .2s var(--ease);
}
.palco-lista{
  position:fixed; z-index:44;   /* acima do player (40): ela cobre a metade de baixo inteira */
  /* NO CHAO DA JANELA, COM ALTURA PROPRIA.
     Ela ja foi "da metade para baixo" (`top:50%`), e isso media a metade do
     #app - que nem sempre tem a altura do que se VE: com a barra de endereco do
     navegador aparecendo, com a moldura de janela do desktop, aquele 50% cai num
     lugar que nao e o meio da tela, e a folha nascia alta demais, comendo a
     letra.
     Agora o chao e o da JANELA, e a altura sai de `vh`: 46% do que a pessoa ve.
     Os dois valores existem porque `dvh` nao chega em todo aparelho, e onde ele
     nao chega a linha inteira seria descartada se fosse a unica. */
  left:var(--app-borda, 0px); right:var(--app-borda, 0px); top:auto; bottom:0;
  height:46vh; height:min(46dvh, 430px); max-height:430px;
  display:flex; flex-direction:column;
  /* ENTRA DE BAIXO E SAI POR BAIXO. A `visibility` e o que tira a folha do
     caminho do dedo no fim, e por isso ela espera a transicao inteira (duracao
     zero, atraso de 0,32s); sem esse atraso a folha sumiria do ar antes de
     terminar de descer. */
  transform:translateY(100%); opacity:0; visibility:hidden;
  transition:transform .32s cubic-bezier(.16,.9,.24,1), opacity .2s var(--ease),
             visibility 0s linear .32s;
  padding:0; border-radius:var(--radius-3xl) var(--radius-3xl) 0 0;
  /* TRANSLUCIDA: a letra continua existindo por tras dela. O desfoque e o que
     mantem os nomes legiveis sobre o texto que passa; onde ele nao existe, o
     fundo fecha quase de todo, senao e uma folha de nomes por cima de uma folha
     de versos. */
  background:rgb(var(--vidro-fundo) / var(--vidro-alfa, .94)); border:1px solid var(--noite-borda); border-bottom:0;
  /* A sombra sobe: ela e a separacao entre a folha e a letra, e a letra esta em
     cima. Apontando para baixo, ela caia na borda do aparelho e nao separava
     nada. */
  box-shadow:0 -18px 44px rgb(var(--sombra) / .66);
}
@supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  /* ESTA E OPACA, ao contrario das outras pecas de vidro do app. Por tras dela
     ha TEXTO em corpo grande e alto contraste, e nao uma lista de nomes curtos:
     em qualquer transparencia a letra atravessava o painel e disputava com o
     nome da musica que se estava tentando escolher. Quem diz que a letra
     continua ali e o desfoque DELA (`.com-fila`), e nao a translucidez desta. */
  .palco-lista{backdrop-filter:none; -webkit-backdrop-filter:none}
}
.palco-item{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:12px 12px; border:0; border-radius:var(--radius-lg); cursor:pointer;
  background:none; color:var(--muted); font-family:inherit;
}
.palco-item-n{
  flex:none; width:20px; font-size:12px; text-align:right;
  font-variant-numeric:tabular-nums; color:var(--muted2);
}
.palco-item-t{
  flex:1; min-width:0; font-size:15px; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.palco-item:active{background:rgb(var(--tinta) / .07)}
/* A QUE ESTA TOCANDO nao e so "a selecionada": ela e o ponto de onde se conta o
   que vem antes e o que vem depois, que e a unica coisa que se pergunta a esta
   lista no meio de um show. */
.palco-item.on{background:rgb(var(--tinta) / .1); color:var(--text); font-weight:var(--weight-medium)}
.palco-item.on .palco-item-n{color:var(--text)}
.palco-vazio{padding:var(--space-4); font-size:12px; color:var(--muted2); text-align:center}


/* A letra sai de foco enquanto a fila esta aberta. E o que diz que ela continua
   ali - nao foi para outra tela, so nao e o assunto agora - sem deixar duas
   leituras disputando o mesmo olho. */
#scr-stage .stage-lyrics{transition:filter .18s var(--ease), opacity .18s var(--ease)}
#scr-stage.com-fila .stage-lyrics{filter:blur(7px); opacity:.4}
@media (prefers-reduced-motion:reduce){
  #scr-stage .stage-lyrics{transition:none}
}

/* ---- O MODO SHOW SAI DO PLAYER, NO CELULAR ----

   Ele virou o botao do meio da barra de baixo - maior, redondo, no caminho do
   polegar. Dois caminhos para a mesma tela, a tres centimetros um do outro, so
   fazem a pessoa perguntar se sao a mesma coisa.

   E NO MONITOR ELE TAMBEM SAIU, depois: abrir e fechar a letra nunca foi uma
   escolha de verdade - a letra e o motivo de abrir um repertorio. Quem nao a
   quisesse tinha um botao para nunca usar; todos os outros tinham um clique a
   mais toda vez. A coluna abre sozinha onde ha largura, que e o que
   `podeDividir()` ja decidia sozinho. */
@media (max-width:1023.98px){
}


/* ============ O REPERTORIO ABRE LIMPO ============

   Fechado o modo de edicao, somem as tres coisas que so servem para MEXER na
   lista: a alca de arrastar, o lapis de cada musica e a pastilha de emenda entre
   elas. Nenhuma delas e lida no palco, e todas as tres ficavam entre o olho e o
   nome da musica, em cada uma das vinte linhas.

   Elas nao mudam de forma quando voltam - so aparecem. Um modo que REDESENHA a
   tela obriga a reaprender onde as coisas estao cada vez que se entra nele. */
#scr-rep:not(.editando) .drag-handle,
#scr-rep:not(.editando) .song-edit,
#scr-rep:not(.editando) .junta{display:none}

.rep-editar{
  display:flex; align-items:center; gap:6px; flex:0 0 auto;
  padding:5px 10px; cursor:pointer; font-family:inherit;
  font-size:var(--text-xs); font-weight:var(--weight-medium);
  background:var(--card-elevated); border:1px solid var(--border);
  border-radius:var(--radius-full); color:var(--muted);
  transition:background var(--duration) var(--ease), color var(--duration) var(--ease),
             border-color var(--duration) var(--ease);
}
.rep-editar svg{width:13px; height:13px}
.rep-editar:hover{color:var(--text); border-color:var(--border-hover)}
.rep-editar.on{background:var(--accent); border-color:transparent; color:var(--accent-foreground)}
.rep-editar:active{opacity:.6}


/* ---- O NUMERO PERDE A CAIXA ----

   Ele era um quadrado cinza com borda, do tamanho de um botao, ao lado de cada
   nome - e numero nao e acao: ninguem toca nele. A caixa dava a uma informacao
   de canto de olho o mesmo peso visual que um controle, e vinte delas
   empilhadas formavam uma coluna cinza que competia com a coluna dos nomes.

   O TAMANHO FICA. A largura continua reservada, senao os nomes dancam para a
   direita quando a lista passa de nove para dez musicas - e continua sendo o
   mesmo vao que o equalizador e o play ocupam quando entram no lugar dele. */
.song-num{background:none; border:0; color:var(--muted2)}
/* Sem a caixa, a cor de acento nao tem onde morar: quem diz qual esta tocando e
   a faixa de ponta a ponta, e o numero so acompanha em branco. */
.song.current .song-num{background:none; color:var(--text)}
.row-play{background:none; border:0; color:var(--text)}
.row-play:hover{background:none; color:var(--text)}


/* ---- A FOLHA DO REPERTORIO, POR DENTRO ----
   Cabecalho preso no alto e a lista rolando por baixo dele: numa folha de meia
   tela, com vinte musicas, o titulo sairia de vista no primeiro arrasto - e com
   ele o X, que e o unico jeito de fechar sem escolher nada. */
.palco-lista-topo{
  display:flex; align-items:center; gap:var(--space-2); flex:none;
  padding:12px 14px 8px;
}
.palco-lista-tit{
  flex:1; min-width:0; font-size:var(--text-sm); font-weight:var(--weight-semibold);
  color:var(--muted); letter-spacing:.06em; text-transform:uppercase;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.palco-lista-x{
  flex:none; width:32px; height:32px; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:var(--card-elevated); border:1px solid var(--border-strong);
  border-radius:50%; color:var(--text);
}
.palco-lista-x svg{width:15px; height:15px}
.palco-lista-x:active{opacity:.6}
.palco-lista-itens{
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:0 7px calc(12px + var(--sab));
}

/* A ESCOLHIDA QUE AINDA NAO ENTROU. Ela nao esta tocando e nao e a proxima da
   ordem: e uma terceira coisa, e sem dize-lo a pessoa escolhe, nao ouve nada
   acontecer e escolhe de novo. O rotulo diz o que vai acontecer, nao o estado. */
.palco-item-sel{
  flex:none; font-size:10px; font-weight:var(--weight-semibold);
  letter-spacing:.06em; text-transform:uppercase;
  padding:3px 7px; border-radius:var(--radius-full);
  background:var(--accent); color:var(--accent-foreground);
}
.palco-item.esperando{color:var(--text)}

/* A LETRA NAO SAI MAIS DE FOCO. Ela so era desfocada quando o painel cobria a
   tela inteira; cobrindo a metade de baixo, a metade de cima e justamente o que
   se pediu para continuar sendo lido. */
/* SEM `pointer-events:none` AQUI. Ele foi posto para impedir que a letra
   rolasse por tras do painel, e custou a unica coisa que se faz com o dedo nesta
   tela: rolar a letra. Pior, bastava a classe ficar grudada uma vez para a
   rolagem morrer com o painel fechado. Deixar rolar por tras nao atrapalha
   ninguem - o painel cobre a metade de baixo e nao se mexe. */
#scr-stage.com-fila .stage-lyrics{filter:none; opacity:1}


/* ---- AINDA NO REPERTORIO FECHADO: MENOS COISA, MENOS VAO ----

   O TIPO DA LETRA SOME. "com letra", "letra automatica", "sem letra" respondem a
   uma pergunta de quem esta MONTANDO o show - quais ainda faltam marcar -, e
   nenhuma de quem esta lendo a ordem. Em edicao ela volta, que e quando a
   pergunta existe.

   AS LINHAS CHEGAM MAIS PERTO. O vao entre elas foi calculado quando cada uma
   era um cartao com moldura, e cartao precisa de ar em volta para nao encostar
   no vizinho. Sem moldura, sem alca, sem lapis e sem pastilha, o que separa uma
   musica da outra e o proprio salto de linha - e oito pixels entre nomes viram
   um buraco que faz a lista parecer maior do que o show e.

   O LAPIS DO NOME SO EM EDICAO. Ele abre renomear, acrescentar musica e excluir
   o repertorio - as tres coisas que o modo de edicao existe para reunir. Fora
   dele o nome do show e so o nome do show. */
#scr-rep:not(.editando) .selo-letra{display:none}
#scr-rep:not(.editando) #songList .song{margin-bottom:2px}
#scr-rep:not(.editando) #songList .song .song-main{padding-top:8px; padding-bottom:8px}
#scr-rep:not(.editando) .rep-nome svg{display:none}
#scr-rep:not(.editando) .rep-nome{pointer-events:none; cursor:default}


/* ---- O CABECALHO DE UM BLOCO ----

   Ele e a unica coisa que separa dois blocos fora do modo de edicao, entao carrega
   as duas informacoes de uma vez: qual bloco e, e de quantas musicas ele e feito.

   O VAO ACIMA E O QUE MAIS SEPARA. Dentro do bloco as musicas ficam coladas -
   elas tocam coladas -, e entre um bloco e outro entra o respiro que no show e a
   pausa. A forma da lista passa a ser a forma do show.

   Em edicao ele sai: la quem conta a mesma coisa e a pastilha entre os cartoes,
   que alem de contar deixa mudar. */
.bloco-cabeca{
  display:flex; align-items:baseline; gap:var(--space-2);
  margin:var(--space-5) 0 var(--space-2);
  font-size:11px; font-weight:var(--weight-semibold);
  letter-spacing:.09em; text-transform:uppercase;
}
.bloco-cabeca:first-child{margin-top:0}
.bloco-tit{color:var(--muted)}
.bloco-inf{color:var(--muted2); font-weight:var(--weight-medium); letter-spacing:.04em}
#scr-rep.editando .bloco-cabeca{display:none}

/* Dentro de um bloco as linhas quase se tocam: e assim que elas tocam. */
#scr-rep:not(.editando) #songList .song{margin-bottom:1px}


/* ---- O LAPIS TEM QUE SER ACERTAVEL ----

   O play entrou ao lado dele e os dois ficaram colados, cada um com menos de
   30px, na beirada direita da linha - e do lado de fora ainda ha a margem da
   tela, que nao e alvo de nada. Resultado: mira-se no lapis e toca-se no play,
   que agora TOCA A MUSICA. O erro e silencioso e faz a coisa errada acontecer.

   Os dois voltam a 38px, que e o minimo de alvo de dedo, com um vao entre eles -
   e o lapis, que e o mais estreito de desenho, ganha o mesmo alvo do play. */
.song-main .song-play + .song-edit{margin-left:2px}
.song-play{width:38px; height:38px}
.song-edit{width:38px; height:38px; padding:0; display:flex; align-items:center; justify-content:center}
.song-edit svg{width:16px; height:16px}


/* ---- O RODAPE DO PALCO PERDE O CARTAO ----

   No palco a tela inteira e a letra, e o cartao do player era uma placa opaca
   por cima dela: uma peca de interface disputando espaco com o texto que se le
   de longe. O que o cartao resolvia - o verso passando por tras dos botoes - o
   degrade resolve sem colocar nada na frente: a letra escurece ate o preto onde
   os controles comecam, e eles ficam sobre o escuro, nao sobre uma superficie.

   O degrade e do PALCO, e nao do player: ele precisa comecar bem acima dos
   botoes para o escurecimento ser gradual. Preso ao cartao, ele teria a altura
   do cartao e viraria uma faixa dura de novo. */
@media (max-width:1023.98px){
  /* Aqui havia regras tirando o cartao "do player no palco". Elas nunca fizeram
     nada: `updateRepUI` esconde o player em `scr-stage` (`show = ... &&
     S.screen!=='scr-stage'`), e quem desce para o pe daquela tela e a
     `.stage-barra`. Mexer em `.rep-player` ali era mexer num elemento que nao
     esta na tela - e foi o que me fez insistir num conserto que nao aparecia. */
}


/* ---- O PLAY NA COLUNA DELE, E O NUMERO NA DELE ----

   Ele ocupava o lugar do numero: escolher uma musica apagava a ordem dela no
   show, justamente na linha que se acabou de tocar - e a ordem e a unica coisa
   que aquela coluna existe para dizer.

   Agora sao duas colunas. A do play fica sempre reservada (ele aparece por
   `visibility`, nao por `display`), senao os numeros andariam para a direita a
   cada troca de escolha - vinte linhas dancando por causa de um toque.

   SO NO REPERTORIO. Na lista de musicas quem toca e o play da direita, ao lado
   do lapis; dois plays na mesma linha seriam a mesma pergunta feita duas vezes. */
.row-play{
  width:26px; height:30px; flex:none; padding:0; cursor:pointer;
  background:none; border:0; color:var(--text);
  display:flex; align-items:center; justify-content:center;
  visibility:hidden;
  transition:transform var(--duration-fast) var(--ease);
}
.row-play svg{width:15px; height:15px}
.row-play:active{transform:scale(.85)}
#homeAllList .row-play, #allList .row-play{display:none}


/* ---- CADA BLOCO COM A SUA COR ----

   Em rodizio pelas tres da marca. A cor nao classifica nada - ela so separa: no
   meio do show, achar onde comeca o proximo bloco vira reconhecer um azul, um
   roxo, um laranja, sem ler numero nenhum. Tres bastam porque o que importa e
   que blocos VIZINHOS nunca repitam. */
.bloco-cabeca.cor1 .bloco-tit{color:var(--brand-1)}
.bloco-cabeca.cor2 .bloco-tit{color:var(--brand-3)}
.bloco-cabeca.cor3 .bloco-tit{color:var(--brand-5)}
/* Um risco curto na frente do nome, da mesma cor: a cor de um texto pequeno em
   versalete e pouca superficie para se enxergar de longe. */
.bloco-cabeca::before{
  content:''; width:14px; height:2px; border-radius:2px; flex:none;
  align-self:center; background:currentColor;
}
.bloco-cabeca.cor1::before{color:var(--brand-1)}
.bloco-cabeca.cor2::before{color:var(--brand-3)}
.bloco-cabeca.cor3::before{color:var(--brand-5)}


/* ---- O NOME DO REPERTORIO, MAIOR NA LISTA ----

   Na tela principal ele e o assunto: cada linha e um SHOW, e nao uma faixa. Em
   corpo de musica, uma lista de repertorios parecia uma lista de musicas com o
   subtitulo trocado. */
#repList .li-title-txt{font-size:17px; font-weight:var(--weight-semibold)}
#repList .li-sub{font-size:12px}


/* Os dois tempos empilhados no alto sairam: a duracao do show foi para junto do
   nome dele, que e de quem ela fala, e no cabecalho ficou so o relogio da musica.
   Dois numeros de tempo um sobre o outro liam como um par - e nao sao. */


/* ---- A LISTA DO SHOW ENCOSTA NA BORDA ----

   Entre a borda do aparelho e o nome da musica havia quatro coisas: o recuo da
   tela (20px), a coluna do play, o vao e a coluna do numero - quase um terco da
   largura util antes da primeira letra. Numa tela de 360px, com titulos que ja
   se cortam com reticencias, isso e caro.

   O recuo da tela cai para 10px NESTA tela, as colunas estreitam e o vao encolhe.
   O cabecalho, o nome do show e o resumo acompanham, porque recuo de tela e um
   so: uma lista encostada na borda com o titulo 10px mais para dentro leria como
   duas paginas coladas.

   `--recuo-lista` existe para a faixa de ponta a ponta saber disso: ela desconta
   exatamente o que a tela recua. */
@media (max-width:1023.98px){
  #scr-rep{
    --recuo-lista:10px;
    padding-left:calc(10px + var(--sal));
    padding-right:calc(10px + var(--sar));
  }
  /* As duas colunas da esquerda encolhem: o play cabe em 22 e o numero, sem a
     caixa cinza que tinha antes, cabe em 20 mesmo com dois digitos. */
  #scr-rep #songList .song-main{gap:7px}
  #scr-rep #songList .row-play{width:22px}
  #scr-rep #songList .song-num{width:20px}
}

/* Sem movimento, so o esmaecimento: a entrada continua existindo, sem o
   deslizamento que e o que incomoda quem pediu menos animacao. */
@media (prefers-reduced-motion:reduce){
  .palco-lista, .palco-lista.on, .palco-rep-btn{transition:opacity .15s linear}
  .palco-lista.on{transform:none}
  .palco-rep-btn.on{transform:none}
}

@supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .palco-lista{
    background:rgb(var(--vidro-fundo) / var(--vidro-alfa, .82));
    backdrop-filter:blur(24px) saturate(1.3);
    -webkit-backdrop-filter:blur(24px) saturate(1.3);
  }
}

/* O DEGRADE NO PE DA LETRA, agora que ela rola de verdade.
   Ele ja existia como veu da tela inteira; aqui ele fica um pouco mais alto e
   comeca mais cedo, porque o verso que desce precisa DESAPARECER antes de chegar
   nos botoes - cortado por uma linha dura, o texto parece ter sido tapado; sumindo
   no preto, parece ter passado. */
@media (max-width:1023.98px){
  #scr-stage::after{
    height:calc(230px + var(--sab));
    background:linear-gradient(to top,
      rgb(var(--palco-preto)) 0%, rgb(var(--palco-preto)) 26%, rgb(var(--palco-preto) / .94) 48%, rgb(var(--palco-preto) / .6) 72%, transparent 100%);
  }
}


/* Onde acaba o rodape do palco: o transporte, o tempo e as duas proximas
   musicas. Tres coisas medem daqui - a fumaca, que so existe nesta faixa; o
   botao do repertorio, que fica logo acima dela; e nada mais deve inventar um
   numero proprio. */
:root{--teto-rodape:104px}


/* ============ O PLAYER SEM CARTAO, NO CELULAR ============

   A tab bar ja tinha perdido o dela: sobrou o player como unica placa opaca
   sobre o conteudo, e duas linguagens no mesmo rodape - uma faixa com superficie
   e outra sem - leem como duas barras diferentes empilhadas.

   Sem cartao, o que garante que os controles se leem nao e mais um fundo atras
   deles: e o degrade que o fim da lista ja tem, e uma sombra em cada botao, que
   separa o desenho do que passa por tras sem precisar de superficie. Mesma
   receita da barra de baixo, pelo mesmo motivo. */
@media (max-width:1023.98px){
  .rep-player{
    background:none; border:0; box-shadow:none;
    backdrop-filter:none; -webkit-backdrop-filter:none;
    padding-left:6px; padding-right:6px;
  }
  @supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
    .rep-player{background:none; backdrop-filter:none; -webkit-backdrop-filter:none}
  }
  /* O texto e os botoes ganham a sombra que a superficie dava. */
  .rep-player .rp-title-txt, .rep-player .rp-sub, .rep-player .rp-hora{
    text-shadow:0 2px 8px rgb(var(--papel) / .9);
  }
  .rep-player .rp-btn{box-shadow:0 6px 18px rgb(var(--sombra) / .6)}
  .rep-player .rp-btn.sec{
    background:rgb(var(--vidro-claro) / var(--vidro-alfa, .6)); border-color:rgb(var(--tinta) / .1);
    box-shadow:0 4px 14px rgb(var(--sombra) / .55);
  }
  /* E a barra de progresso fica mais visivel: sem o cartao atras dela, o trilho
     escuro sobre lista escura sumia. */
  .rp-seek-track{background:rgb(var(--tinta) / .18)}
}


/* ============ FUMACA DE PALCO, E NAO UM BRILHO ============

   O que havia era UM claro colorido indo e voltando: por mais lento que fosse,
   um movimento so, de ida e volta, le-se como pulso - e pulso e sinal, nao
   clima.

   Fumaca de verdade nao tem uma forma: tem massas que se atravessam. Aqui sao
   duas camadas, com tamanhos, direcoes e tempos primos entre si (42s e 67s) -
   elas nunca voltam a mesma combinacao durante uma musica, e por isso nao se
   percebe o ciclo. A segunda camada e mais quente e mais baixa, como a que sai
   da maquina; a primeira e mais fria e mais aberta, como a que ja subiu.

   AS DUAS SO SE MOVEM POR `transform`, que a placa de video resolve sozinha.
   Animar o gradiente (posicao, cor, tamanho) obrigaria a repintar a faixa a cada
   quadro - e isto roda num celular que esta decodificando audio no palco. */
@media all{
  /* A SEGUNDA CORRENTE vem no sentido contrario e mais devagar, com o desenho
     repetindo a cada TELA E MEIA. Duas correntes cruzando em velocidades que nao
     sao multiplas uma da outra e o que faz a massa parecer se deformar - com uma
     camada so, por mais lenta que seja, ve-se um borrao deslizando inteiro. */
  /* A SEGUNDA CAMADA e a mesma nevoa vista mais de longe: mechas mais largas,
     mais fracas e mais altas dentro da mesma faixa, andando ao contrario. O
     cruzamento das duas e o que faz a massa parecer se abrir e fechar. Sem banco
     proprio - um so ja da a densidade; dois clareariam demais o pe da tela. */
  .palco-fumaca{
    position:fixed; left:-100%; right:-100%; bottom:0;
    height:calc(112px + var(--sab));
    pointer-events:none; z-index:3;
    /* A MESMA REPETICAO DA OUTRA CAMADA - E ERA AQUI A PISCADA.
       Com o ladrilho de uma tela e meia, o percurso tinha que ser de uma tela e
       meia tambem; mas a faixa so tem tres telas de largura, e ao andar 150% dela
       a BORDA DIREITA do proprio elemento entrava na tela. Meio ciclo com uma
       camada a menos, e um piscar a cada volta quando a borda cruzava a vista.
       Com ladrilho de uma tela, o percurso e de uma tela e sobram duas de folga -
       a borda nunca chega perto. O que distingue as duas camadas continua sendo o
       desenho e a velocidade, que e o que se ve. */
    background-repeat:repeat-x;
    background-size:33.333% 100%;        /* cada repeticao = uma tela */
    background-image:
      radial-gradient(20% 26% at 24% 80%,
        rgb(var(--tinta) / .27) 0%, rgb(var(--tinta) / .14) 40%, rgb(var(--tinta) / .05) 72%, transparent 100%),
      radial-gradient(15% 20% at 52% 62%,
        rgb(var(--tinta) / .22) 0%, rgb(var(--tinta) / .12) 42%, rgb(var(--tinta) / .04) 74%, transparent 100%),
      radial-gradient(21% 30% at 74% 90%,
        rgb(var(--tinta) / .26) 0%, rgb(var(--tinta) / .13) 40%, rgb(var(--tinta) / .05) 72%, transparent 100%),
      radial-gradient(11% 17% at 38% 46%,
        rgb(var(--tinta) / .16) 0%, rgb(var(--tinta) / .08) 44%, rgb(var(--tinta) / .03) 76%, transparent 100%),
      radial-gradient(9% 15% at 88% 66%,
        rgb(var(--tinta) / .19) 0%, rgb(var(--tinta) / .10) 44%, rgb(var(--tinta) / .03) 76%, transparent 100%);
    animation:fumaca-volta 49s linear infinite,
              fumaca-respira-2 19s ease-in-out infinite alternate;
  }
}
/* Uma tela de percurso: 33,333% de uma faixa de tres telas. E exatamente o
   tamanho de uma repeticao do desenho, e e isso que faz o laco fechar sem
   emenda. Mudar um dos dois numeros sem mudar o outro poe um salto no meio.

   A INFLADA DO MEIO DO CAMINHO. So andar de lado e um bloco deslizando; nevoa
   tambem cresce e assenta enquanto anda. O `scaleY` sobe ate 1,06 na metade do
   percurso e volta a 1 no fim - tem que VOLTAR, senao o quadro final deixa de ser
   igual ao inicial e o laco ganha um salto. Com `transform-origin` no chao, ela
   cresce para cima, como massa que sobe, em vez de se espalhar para os dois
   lados. */
/* SO ESCORREGAR, SEM INFLAR - E ERA A INFLADA QUE PISCAVA.
   Uma faixa de tres telas num aparelho de 3x e uma textura de uns tres mil e
   quinhentos pixels de largura. Enquanto o movimento e so `translate`, ela e
   desenhada UMA vez e a placa de video só a empurra de lado. Bastou o `scaleY`
   entrar na conta para o desenho deixar de servir: escala muda o tamanho do que
   tem que ser pintado, entao o navegador REDESENHA a faixa inteira a cada
   quadro. Ele faz isso por pedacos, e o pedaco que nao ficou pronto a tempo
   aparece VAZIO - os quadrados pretos piscando no canto, sempre na ponta que
   estava entrando na tela.
   O crescer e diminuir nao se perdeu: ele continua na respiracao (`opacity`),
   que a placa de video tambem resolve sozinha, em tempos diferentes dos da
   travessia. */
@keyframes fumaca-passa{
  0%  {transform:translate3d(0, 0, 0)}
  100%{transform:translate3d(-33.333%, 0, 0)}
}
/* Uma tela, no sentido contrario - mesma conta da outra, passo mais lento. */
@keyframes fumaca-volta{
  0%  {transform:translate3d(-33.333%, 0, 0)}
  100%{transform:translate3d(0, 0, 0)}
}
/* Parada, ela vira um claro fixo no pe da tela: continua dando profundidade ao
   preto, sem nada se mexendo. */
@media (prefers-reduced-motion:reduce){
  .palco-fumaca, #scr-stage::before{animation:none}
}

/* A respiracao: a massa adensa e rareia enquanto atravessa. Sao tempos primos
   entre si e diferentes dos da travessia, entao as quatro voltas nunca coincidem
   - e o olho nao acha ciclo nenhum para se agarrar. */
@keyframes fumaca-respira{
  from{opacity:.72}
  to  {opacity:1}
}
@keyframes fumaca-respira-2{
  from{opacity:1}
  to  {opacity:.6}
}


/* ============ A TELA DE CRIAR, EM VOZ BAIXA ============

   Ela estava correta e grossa: titulo de 26px, ladrilhos de 46, campo e botao com
   altura de acao principal. Nada disso e acao principal - esta tela e uma
   PERGUNTA de uma linha ("de onde vem a musica?") com duas ou tres respostas, e
   quem chega aqui ja sabe o que quer. Tudo encolhe um degrau: o que se le
   primeiro continua sendo o primeiro, so que sem gritar.

   E O CONTORNO DOS LADRILHOS ESFRIA. Um quadrado de cor a 28% ao lado de um nome
   em cinza claro fazia o icone pesar mais que a palavra que ele ilustra. */
@media (max-width:1023.98px){
  #scr-create .tela-hero{margin:var(--space-1) 0 var(--space-4)}
  #scr-create .tela-hero .h-title{font-size:22px; letter-spacing:var(--tracking-brand)}

  .secao{font-size:10px; letter-spacing:.11em; color:var(--muted2)}

  /* MAIS AR ENTRE AS TRES FONTES. Elas sao escolhas EXCLUDENTES - a pessoa vai
     usar uma -, e escolhas excludentes precisam de distancia entre si: coladas,
     as tres linhas leem como uma lista de itens de um mesmo assunto. O fio
     continua fino e recuado; quem separa de verdade e o vao em volta dele. */
  #scr-create > .card{padding:var(--space-6) 0 0}
  #scr-create > .card:first-of-type{padding-top:var(--space-3)}
  #scr-create > .card::after{margin:var(--space-6) 0 0 52px}

  .fonte-topo{margin-bottom:var(--space-3); gap:var(--space-3)}
  .fonte-topo .ic, .fonte-linha .ic{width:38px; height:38px; border-radius:12px}
  .fonte-topo .ic svg, .fonte-linha .ic svg{width:18px; height:18px; stroke-width:1.8}
  .ic-arquivo{background:rgb(var(--brand-1-rgb) / .09); border-color:rgb(var(--brand-1-rgb) / .18)}
  .ic-nuvem  {background:rgb(var(--brand-3-rgb) / .09); border-color:rgb(var(--brand-3-rgb) / .18)}
  .ic-pc     {background:rgb(var(--brand-5-rgb) / .09); border-color:rgb(var(--brand-5-rgb) / .18)}
  .fonte-nome{font-size:14px; letter-spacing:0}
  .fonte-sub{font-size:11.5px; line-height:1.4}
  .fonte-seta{width:15px; height:15px}

  /* A barra de busca perde altura: 34px e o suficiente para o dedo, e ela deixa
     de competir com o titulo da tela. */
  .busca-barra{gap:6px; padding:4px 4px 4px var(--space-2)}
  .busca-lupa{width:16px; height:16px}
  .busca-barra .field{font-size:13.5px}
  .busca-barra .busca-ir{
    height:34px; padding:0 var(--space-3); font-size:12px; font-weight:var(--weight-medium);
  }
  .busca-barra .cloud_file-clear{width:26px; height:26px}
  .busca-barra .cloud_file-clear svg{width:15px; height:15px}

  /* O campo do Estudio e o botao dele seguem a mesma medida. */
  #cardPC .field{padding:9px var(--space-3); font-size:13.5px}
  /* O botao do Estudio deixa de ser branco cheio. Numa tela com uma acao
     principal - buscar -, dois botoes brancos disputam o mesmo papel, e este
     caminho so existe quando ha um PC ligado na conta: ele e alternativa, nao
     destino. Contorno diz isso sem esconde-lo. */
  #btnPC{
    height:34px; font-size:12px; padding:0 var(--space-3);
    background:var(--card-elevated); border:1px solid var(--border-strong);
    color:var(--text);
  }

  /* E os resultados encolhem junto: eles sao a resposta da busca, nao a tela. */
  .cloud_file-item{gap:10px; padding:8px 0}
  .cloud_file-thumb{width:84px; height:47px; border-radius:9px}
  .cloud_file-t{font-size:13px}
  .cloud_file-c{font-size:11px; margin-top:3px}
}


/* O selo da proxima, na lista do repertorio. Mesma palavra e mesma forma do que
   a folha do palco mostra - e a MESMA informacao, e informacao que muda de
   desenho conforme a tela obriga a aprender duas vezes. Aqui ele e mais discreto:
   na folha, ele responde ao toque que a pessoa acabou de dar; nesta lista, ele e
   consulta. */
.linha-sel{
  flex:none; align-self:center; white-space:nowrap;
  font-size:9.5px; font-weight:var(--weight-semibold);
  letter-spacing:.07em; text-transform:uppercase;
  padding:3px 8px; border-radius:var(--radius-full);
  background:rgb(var(--tinta) / .1); color:var(--text);
}


/* ---- A BARRA DA ROLAGEM, SOZINHA ----

   O botao de play saiu: quem liga, acelera e para e ela. Entao ela precisa
   PARECER um controle, e nao um ajuste fino ao lado de um botao - ganha largura,
   trilho visivel e um pegador maior, do tamanho de um dedo.

   E ACENDE ENQUANTO ROLA. Sem o botao, a unica forma de saber se a letra esta
   andando sozinha seria olhar a letra - e no palco, olhar para conferir e
   justamente o que nao da tempo de fazer. */
.rp-rolagem input[type=range],
.stage-rolagem input[type=range]{
  width:110px; height:22px; margin:0; padding:0;
  appearance:none; -webkit-appearance:none;
  background:none; cursor:pointer; accent-color:var(--accent);
}
.rp-rolagem input[type=range]::-webkit-slider-runnable-track,
.stage-rolagem input[type=range]::-webkit-slider-runnable-track{
  height:4px; border-radius:var(--radius-full);
  background:rgb(var(--tinta) / .18);
}
.rp-rolagem input[type=range]::-moz-range-track,
.stage-rolagem input[type=range]::-moz-range-track{
  height:4px; border-radius:var(--radius-full); background:rgb(var(--tinta) / .18);
}
.rp-rolagem input[type=range]::-webkit-slider-thumb,
.stage-rolagem input[type=range]::-webkit-slider-thumb{
  appearance:none; -webkit-appearance:none;
  width:15px; height:15px; margin-top:-5.5px; border-radius:50%;
  background:var(--muted); border:0;
  transition:background var(--duration) var(--ease);
}
.rp-rolagem input[type=range]::-moz-range-thumb,
.stage-rolagem input[type=range]::-moz-range-thumb{
  width:15px; height:15px; border-radius:50%; background:var(--muted); border:0;
}
/* Rolando: o pegador acende. E o unico sinal de que a letra esta andando
   sozinha, agora que nao ha botao para ficar ligado. */
.rp-rolagem input[type=range].rolando::-webkit-slider-thumb,
.stage-rolagem input[type=range].rolando::-webkit-slider-thumb{background:var(--accent)}
.rp-rolagem input[type=range].rolando::-moz-range-thumb,
.stage-rolagem input[type=range].rolando::-moz-range-thumb{background:var(--accent)}


/* ---- O NOME DO SHOW, GRANDE NA TELA DE LER ----

   Fora do modo de edicao ele e o titulo da tela e nao divide a linha com nada: o
   lapis some, e o espaco que sobra e dele. Em edicao ele volta ao tamanho de
   antes, porque ali ele divide a linha com o lapis e com o que se esta mexendo -
   e o assunto passa a ser a lista, nao o nome. */
@media (max-width:1023.98px){
  #scr-rep:not(.editando) .h-title{font-size:26px; letter-spacing:var(--tracking-brand)}
  #scr-rep:not(.editando) #repTituloLinha{margin-bottom:4px}
}

/* ---- O TEMPO CENTRADO COM A BARRA DE ROLAGEM ----

   Os dois ocupam a mesma coluna do rodape, um sobre o outro. Com o tempo
   alinhado a esquerda, o numero corria conforme os digitos mudavam (1:09 e mais
   estreito que 11:09) e ficava sempre torto em relacao a barra. Dando a ele a
   MESMA largura da barra e centrando dentro dela, os dois passam a ter o mesmo
   centro - e o numero deixa de andar de lado enquanto a musica toca. */
@media (max-width:1023.98px){
  #scr-stage .stage-rolagem{width:110px}
  #scr-stage .stage-hora{width:110px; text-align:center}
}


/* ============ O ANEL DE PREPARO EM VOLTA DO PLAY ============

   COMO O ARCO E FEITO. Um `conic-gradient` que corre as cores da marca ate a
   porcentagem e vira trilho apagado dali em diante - o corte e uma parada dupla
   na mesma posicao (`var(--anel)` duas vezes), que e como se faz canto vivo em
   gradiente. A `mask` radial recorta o meio e deixa so o aro de 3px; sem ela
   seria um disco colorido cobrindo o botao.

   POR QUE EM VOLTA DO BOTAO, e nao no lugar do icone: o play continua ali,
   inteiro e apertavel - a espera nao tira da pessoa o controle que ela acabou de
   usar, so informa ao redor dele.

   Comeca em -90deg para o arco nascer no topo, que e onde todo mundo espera que
   um relogio comece. */
/* `--anel` PRECISA SER DECLARADA para poder ser animada: propriedade
   personalizada sem `@property` e texto para o navegador, e texto nao se
   interpola - o aro saltaria de um valor para o outro.
   `inherits:true` porque quem PINTA e o `::after`, e quem RECEBE o valor e o
   botao: sem herdar, o pseudo-elemento leria sempre o valor inicial e o aro nao
   sairia do lugar. */
@property --anel{ syntax:'<percentage>'; inherits:true; initial-value:0%; }

/* A transicao mora no botao, que e onde a propriedade muda. Ela faz duas coisas
   com uma regra: o salto inicial ate a metade vira um percurso, e cada leitura de
   progresso chega deslizando em vez de aos trancos. */
.rp-btn.preparando, #stagePlay.preparando,
.row-play.preparando, .song-play.preparando{
  position:relative;
  transition:--anel .42s cubic-bezier(.3,.9,.3,1);
}
.rp-btn.preparando::after,
#stagePlay.preparando::after,
.row-play.preparando::after,
.song-play.preparando::after{
  content:''; position:absolute; inset:-5px; border-radius:50%;
  pointer-events:none;
  /* COMECA AS SEIS HORAS. Em baixo, e nao no topo: o aro fecha justamente onde o
     olho ja esta - a barra do player, os controles, a linha que se acabou de
     tocar ficam todos abaixo dele -, e as duas pontas do arco se encontram no
     alto, que e onde o fecho e mais visivel.
     180deg, E NAO 90. Em `conic-gradient` o zero e MEIO-DIA e o giro e horario:
     90 e tres horas, 180 e seis. Escrevi 90 achando que era "um quarto de volta
     para baixo" e o arco nasceu na direita. */
  /* O aro e a onda da marca dando a volta: o que ja carregou em coral, a
     partir do comeco, e o resto no trilho neutro. */
  background:conic-gradient(from 180deg,
    var(--coral) 0%,
    var(--coral) var(--anel, 0%),
    rgb(var(--tinta) / .14) var(--anel, 0%),
    rgb(var(--tinta) / .14) 100%);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
/* FECHOU. O aro cheio cresce um pouco e se apaga - e o gesto de "pronto", e o
   que faz a pessoa saber que aquilo terminou em vez de ter sumido. */
.rp-btn.anel-pronto::after,
#stagePlay.anel-pronto::after,
.row-play.anel-pronto::after,
.song-play.anel-pronto::after{
  opacity:0; transform:scale(1.14);
  transition:opacity .38s var(--ease), transform .38s var(--ease);
}
@media (prefers-reduced-motion:reduce){
  .rp-btn.preparando::after, #stagePlay.preparando::after{transition:none}
}


/* ---- A LISTA DO SHOW VAI MAIS PARA A ESQUERDA QUE O RESTO DA TELA ----

   O titulo, o resumo e os botoes continuam no recuo da tela; quem sai dele e a
   lista, com uma margem negativa de 6px. Ela e a unica coisa ali que se le em
   COLUNA - cada linha comeca no mesmo x -, e por isso pode encostar mais na
   borda sem parecer torta: o olho segue a coluna, nao a margem.

   `--recuo-lista` cai junto, e nao por simetria: ele e o que a faixa de ponta a
   ponta desconta para alcancar a borda da tela. Com a lista ja 6px mais a
   esquerda, descontar os 10 de antes jogaria a faixa para FORA, e o nome andaria
   para a direita toda vez que a linha fosse escolhida. */
@media (max-width:1023.98px){
  #scr-rep{--recuo-lista:4px}
  #scr-rep #songScroll{margin-left:-6px}
  /* E as duas colunas da frente encolhem o que ainda da: o numero cabe em 18
     mesmo com dois digitos, agora que nao tem mais caixa em volta. */
  #scr-rep #songList .song-main{gap:6px}
  #scr-rep #songList .row-play{width:20px}
  #scr-rep #songList .song-num{width:18px}
}


/* O aro na linha da lista e menor, como o botao que ele cerca - e mais fino, para
   nao virar o assunto de uma linha cujo assunto e o nome da musica. */
.row-play.preparando::after, .song-play.preparando::after{
  inset:-3px;
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
}
/* Sem mexer no `overflow` da linha: com `inset:-3px`, o aro de 36px cabe dentro
   dos 46 da linha. Abrir o recorte do cartao por causa do aro seria mexer no que
   segura o cartao de edicao e a emenda - preco alto para tres pixels. */


/* ---- A FILEIRA COM CINCO BOTOES CABE NA TELA ----

   Eram quatro e passaram a cinco. Com o vao de 16px e todos do mesmo tamanho, a
   fileira pedia 294px so para ela, mais a coluna do tempo: passava dos 390 de um
   celular comum e o ultimo botao ficava cortado na borda.

   O PLAY NAO ENCOLHE. Ele e o que a mao procura sem olhar; quem cede sao os
   outros quatro (40px) e o vao entre eles (9px), que no palco ainda e alvo
   folgado - o dedo mira no circulo, nao no desenho. A coluna da esquerda cede
   junto: 92px bastam para "12:34 / 45:67" e para a barra de rolagem. */
@media (max-width:1023.98px){
  #scr-stage .stage-ctrl.mini{gap:9px}
  #scr-stage .stage-ctrl.mini button.sec{width:40px; height:40px}
  #scr-stage .stage-ctrl.mini button.sec svg{width:15px; height:15px}
  /* A PASTILHA SE AJUSTA AO TEXTO. Com largura fixa de 92px, "00:00 / 05:03"
     nao cabia: o texto saia por fora do branco e metade do numero ficava sem
     fundo. Os dois - barra e pastilha - passam a ter a largura do proprio
     conteudo e a ficar centrados na mesma coluna, que e o que os mantem
     alinhados entre si. */
  #scr-stage .stage-rolagem{width:auto; justify-self:center}
  #scr-stage .stage-hora{width:auto; justify-self:center}
  #scr-stage .stage-rolagem input[type=range]{width:92px}
  /* O RECUO LATERAL E O MINIMO: 6px mais a area segura das laterais (que so
     existe em aparelho com tela curva). Dez pixels eram margem de cartao, e aqui
     nao ha cartao - o ultimo botao pode encostar na borda. */
  #scr-stage .stage-barra{
    column-gap:var(--space-2);
    /* A direita ganha um pouco mais de recuo que a esquerda: e onde termina a
       fileira, e o ultimo botao encostado na beirada parece que vai cair fora. */
    padding-left:calc(6px + var(--sal)); padding-right:calc(14px + var(--sar));
  }
}


/* ---- A LETRA NAO ENCOSTA NO QUE ESTA NO ALTO ----

   A linha que esta sendo cantada cresce (`scale(1.12)`), e ao crescer ela passa
   da borda de cima da caixa e cai por cima do "A seguir" e do "Depois". O
   cabecalho passa a ficar ACIMA dela na pilha, e a letra se dissolve nos 22px
   finais antes de chegar la: assim o verso que sobe some em vez de atravessar o
   texto, que e o que uma letra rolando faz em qualquer lugar. */
@media (max-width:1023.98px){
  /* O TOPO GANHA FUNDO PROPRIO.
     So subir na pilha nao bastou: o verso continuava passando POR BAIXO do "A
     seguir" e os dois ficavam legiveis ao mesmo tempo, um sobre o outro. Com o
     preto da tela por tras do cabecalho, o que passa embaixo simplesmente nao
     aparece - e a questao deixa de depender de a altura do cabecalho bater com o
     comeco da letra, que e o que estava falhando no aparelho. */
  /* O CABECALHO DO PALCO E BLOCO, E NAO FLEX EMBRULHADO - E ISSO E O CONSERTO.
     Medido no aparelho e reproduzido aqui: com `flex-wrap`, a caixa do cabecalho
     fechava em 58px enquanto as tres linhas dentro dela somavam 86 - o "A
     seguir" transbordava 28px para fora e caia em cima do primeiro verso. Nao
     era pilha, nem fundo, nem margem: era a ALTURA da caixa estar errada.
     Em bloco, altura e soma: cada linha empurra a seguinte, e nao existe estado
     em que o conteudo saia da caixa. O desenho e o mesmo - ajustes a esquerda, X
     a direita, nome e proximas centrados. */
  #scr-stage > .stage-top{
    display:block; position:relative;
    /* `flex:0 0 auto` E O QUE FALTAVA - E ERA A CAUSA O TEMPO TODO.
       O cabecalho e ITEM FLEX do palco, e item flex encolhe por padrao. Medido:
       ele fechava em 30px com 80px de conteudo dentro, e o "A seguir" ficava 50px
       para fora da propria caixa, em cima da letra. Nao adiantava mexer em
       display, fundo, pilha ou margem: o navegador estava espremendo a caixa, e
       nao entortando o conteudo.
       Agora ele nao encolhe nem cresce - tem a altura do que carrega -, e quem
       cede espaco e a letra, que e quem tem rolagem para isso. */
    flex:0 0 auto;
    z-index:5; background:var(--bg); padding-bottom:6px;
  }
  #scr-stage .stage-tools{display:flex; gap:4px}
  #scr-stage .stage-close{position:absolute; right:0; top:0; transform:none; margin:0}
  #scr-stage .stage-centro{
    position:static; transform:none;
    display:flex; flex-direction:column; align-items:center;
    max-width:100%; margin-top:5px;
  }
  #scr-stage .stage-a-seguir{
    display:flex; flex-direction:column; align-items:center;
    margin-top:2px; max-width:100%;
  }
  /* FUNDO TAMBEM NOS PROPRIOS TEXTOS, e nao so no cabecalho que os contem.
     O cabecalho ja e opaco; isto e cinto e suspensorio para o dia em que alguem
     mexer no fundo dele: o nome da musica e as proximas sao a informacao que NAO
     pode dividir pixel com a letra, porque as duas sao texto claro do mesmo
     tamanho e ninguem le as duas ao mesmo tempo. */
  #scr-stage .stage-centro,
  #scr-stage .stage-a-seguir{background:var(--bg)}
  /* E A LETRA COMECA DUAS LINHAS ABAIXO DO CABECALHO. Encostar nao encosta mais -
     a altura agora fecha -, mas comecar rente ao "Depois" faz a primeira frase
     parecer parte do que esta escrito ali em cima. O vao diz que e outra coisa:
     ali termina o que informa e comeca o que se canta. */
  #scr-stage .stage-lyrics{margin-top:34px}
  #scr-stage .stage-lyrics{
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 22px);
    mask-image:linear-gradient(to bottom, transparent 0, #000 22px);
  }
}


/* A duracao ao lado do nome do show. Tipo pequeno e apagado: o nome e o assunto,
   ela e uma ficha tecnica dele - quem procura o show procura pelo nome, e quem
   ja escolheu quer saber quanto tempo ele tem. */
#repTituloLinha{display:flex; align-items:baseline; gap:var(--space-3); flex-wrap:wrap}
/* EXATAMENTE A TIPOGRAFIA DO RESUMO ("3 blocos · 6 musicas"), e nao a do titulo.
   Ela esta DENTRO da linha do nome, que e `.h-title` - e titulo tem corpo grande e
   peso cheio, que uma linha herda de graca. Repetir aqui as tres propriedades do
   resumo e o que faz as duas informacoes se lerem como o mesmo tipo de coisa:
   ficha do show, e nao nome dele. */
.rep-duracao{
  flex:0 0 auto; white-space:nowrap; font-variant-numeric:tabular-nums;
  font-size:var(--text-sm); font-weight:400;
  letter-spacing:normal; color:var(--muted2);
}
@media (max-width:1023.98px){
  /* Sem a coluna dos dois tempos no alto, o relogio da musica volta a ser um so
     elemento na ponta direita do cabecalho. */
  .hd-time{margin-left:auto}
}



/* ================= O PALCO NO MONITOR ==================

   Tudo o que o celular ganhou e que nao tinha razao nenhuma de ser exclusivo
   dele: o transporte no PE da tela em vez do canto de cima, a nevoa passando no
   chao, o veu que separa os controles da letra, e a pilula do tempo.

   O argumento e o mesmo nas duas larguras, e ele nao e sobre pixels: no palco a
   pessoa esta de pe, a um metro ou mais da tela, e o que ela olha e a LETRA. O
   que se aperta desce para a borda de baixo, perto da mao; o que se le fica no
   meio, limpo. Um transporte no alto a direita e desenho de quem esta sentado
   com o mouse - e ninguem faz show sentado com o mouse.

   O que muda do celular para o monitor e so a escala: a faixa e mais alta, a
   nevoa mais funda, e o nome do repertorio cabe a esquerda, onde no telefone
   ele tinha que sumir. */
@media (min-width:1024px){
  /* O RODAPE, NO PE E SEM CARTAO. `fixed` e nao `absolute`: no monitor o palco
     e um painel da grade do #app, e um rodape preso a ele subiria junto com a
     rolagem da letra. */
  #scr-stage .stage-barra{
    position:fixed; left:0; right:0; bottom:0; z-index:41;
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
    gap:var(--space-4);
    padding:14px var(--space-8) 18px;
    border:0; border-radius:0; background:none; box-shadow:none;
    backdrop-filter:none; -webkit-backdrop-filter:none;
    margin:0; font-size:12px;
  }
  /* AQUI O NOME DA FILA CABE. No telefone ele sumia por falta de largura; num
     monitor ele e a resposta de "que show e este" sem tirar nada de ninguem. */
  #scr-stage .stage-rep{
    grid-column:1; justify-self:start; display:block; max-width:100%;
    text-shadow:0 2px 8px rgb(var(--papel) / .9);
  }
  #scr-stage .stage-ctrl.mini{
    grid-column:2; justify-self:center;
    position:static; background:none; border:0; box-shadow:none; padding:0;
    gap:var(--space-5);
  }
  /* ALVOS DE PALCO, E NAO DE MOUSE. Continuam sendo apertados de pe, muitas
     vezes com o aparelho longe - o tamanho vem da distancia, nao do ponteiro. */
  #scr-stage .stage-ctrl.mini button{
    width:52px; height:52px; box-shadow:var(--highlight-strong), var(--shadow-sm);
  }
  #scr-stage .stage-ctrl.mini button.sec{width:46px; height:46px; box-shadow:none}
  #scr-stage .stage-ctrl.mini button svg{width:22px; height:22px}
  #scr-stage .stage-ctrl.mini button.sec svg{width:19px; height:19px}

  /* A DIREITA, O QUE SO SE LE: a velocidade escolhida e o ponto da musica. */
  #scr-stage .stage-rolagem{grid-column:3; justify-self:end; justify-content:flex-end}
  #scr-stage .stage-hora{
    grid-column:3; justify-self:end; display:block; width:auto;
    /* A PILULA BRANCA, pelo mesmo motivo do celular: ela mora onde a nevoa
       passa, e branco sobre branco e o pior contraste da tela justamente no
       numero que se confere de relance. */
    font-size:14px; font-weight:var(--weight-bold); letter-spacing:.01em;
    color:var(--palco-pastilha-texto); background:rgb(var(--tinta) / .78);
    border-radius:var(--radius-full); padding:4px 10px;
  }
  /* Com o tempo embaixo, o do cabecalho vira repeticao. */
  #scr-stage .stage-centro .stage-time{display:none}

  /* O X NAO DEITA MAIS SOBRE O TEXTO. Ele e absoluto no canto, entao quem
     precisa desviar e a coluna das proximas - com a largura dele mais o vao. */
  #scr-stage .stage-a-seguir{padding-right:64px}

  /* A letra reserva o que o rodape ocupa, senao o ultimo verso fica atras dos
     botoes - que e exatamente o verso que se esta cantando quando acaba. */
  #scr-stage{padding-bottom:132px}
  #scr-stage .stage-lyrics{padding-bottom:12px}

  /* A NEVOA E O VEU, NA ESCALA DO MONITOR. As regras sao as mesmas de cima;
     aqui so a altura muda, porque a tela e maior e uma faixa de 112px no pe de
     um monitor de 27 polegadas e um rodape iluminado, nao um banco de nevoa. */
  #scr-stage::before, .palco-fumaca{height:190px}
  #scr-stage::after{height:330px}
}


/* ============ A ROLAGEM E DAS LISTAS, E NAO DA TELA ============

   Na home do monitor, rolar para ver a decima musica levava junto a saudacao, o
   botao de criar e os titulos das duas colunas - some o cabecalho inteiro para
   revelar uma linha. E como as duas listas dividem a tela, rolar uma arrastava
   a outra sem ninguem ter pedido.

   Agora o que e permanente fica parado e o que e longo anda por dentro.

   A CADEIA INTEIRA PRECISA CEDER, e foi isto que me custou uma medicao: nao
   basta pendurar `overflow-y:auto` na lista. Se qualquer elo acima dela puder
   crescer com o conteudo, a lista nunca fica menor que ele e a rolagem volta
   para a tela. Sao cinco elos, da tela ate a lista:

     #scr-home  -> a linha do cartao vira `minmax(0,1fr)`. `1fr` sozinho nao
                   serve: ele e `minmax(auto,1fr)` e NAO encolhe abaixo do
                   conteudo, que e exatamente o que precisa acontecer aqui;
     #cardListas-> coluna flexivel, `min-height:0`;
     .home-colunas -> ocupa o que sobra, `min-height:0`, e as duas colunas
                   passam a esticar (`stretch`) em vez de medir pelo conteudo;
     #blocoReps / #blocoTodas -> colunas flexiveis, `min-height:0`;
     #repList / #homeAllList -> aqui, enfim, a rolagem.

   E a tela segue com `overflow-y:auto`, e nao `hidden`. Se algum dia um elo se
   perder, o pior caso passa a ser a pagina rolar como antes - e nao uma lista
   cortada com musicas que nao ha como alcancar. Custo zero enquanto a conta
   fecha, e a diferenca entre um incomodo e um bug que some com o acervo. */
@media (min-width:1024px){
  #app > #scr-home.active{
    grid-template-rows:auto minmax(0,1fr);
    align-content:stretch;
  }
  #app > #scr-home.active > #cardListas{
    grid-row:2; min-height:0; display:flex; flex-direction:column;
  }
  .home-colunas{flex:1 1 auto; min-height:0; align-items:stretch}
  #blocoReps, #blocoTodas{min-height:0; display:flex; flex-direction:column}
  #repList, #homeAllList{
    flex:1 1 auto; min-height:0; overflow-y:auto;
    padding-right:8px;   /* o vao da barra de rolagem, para o nome da musica
                            nao encostar nela */
  }
}


/* ============ CRIAR PLAYBACK, NO MONITOR ============

   A tela herdava a grade de colunas automaticas da home
   (`repeat(auto-fit, minmax(340px,1fr))`), que e certa para uma LISTA de cartoes
   iguais e errada aqui: ela conta quantos filhos ha e distribui. O rotulo "De
   onde vem a musica" e um paragrafo, nao um cartao - e virou o primeiro item da
   grade, sozinho numa coluna, empurrando as duas origens para as colunas 2 e 3.
   Sobrava um terco da tela preto a esquerda e o texto ficava a um palmo do que
   ele nomeia.

   Aqui as colunas sao DUAS e fixas, porque as origens sao duas e sempre serao:
   de onde o audio vem e uma escolha, nao uma lista que cresce. Titulo, rotulo,
   barra de progresso e bloco de erro atravessam as duas - sao da tela.

   E a tela ganha teto de largura. Sem ele, dois cartoes com quatro linhas de
   texto esticavam ate 1600px num monitor grande, e a escolha - que e de dois
   itens - ficava com a cara de tabela. 920px e o suficiente para os dois lado a
   lado sem que nenhum vire uma faixa. */
@media (min-width:1024px){
  #app > #scr-create.active{
    grid-template-columns:repeat(2, minmax(0,1fr));
    max-width:920px;
    align-content:start;
  }
  #app > #scr-create.active > .secao,
  #app > #scr-create.active > .erro-bloco,
  #app > #scr-create.active > .bar{grid-column:1 / -1}
  /* O ROTULO SAI. Ele diz "De onde vem a musica" e o subtitulo, cem pixels
     acima, diz "De onde vem a musica: busque na nuvem ou envie um arquivo seu"
     - a mesma frase duas vezes na mesma dobra. No celular eles ficam longe um do
     outro e o rotulo ainda ancora a secao; aqui a tela inteira cabe num olhar, e
     o subtitulo ja faz o trabalho. */
  #app > #scr-create.active > .secao{display:none}

  /* O BOTAO OCUPA O CARTAO INTEIRO. Os dois cartoes tem a mesma altura, mas o de
     importar tem uma linha de conteudo contra tres do outro - e o clique parava
     no meio, com meio cartao morto embaixo parecendo espaco por acabar. */
  #scr-create .card > .fonte-linha{height:100%}
  /* Os dois com a mesma altura: sao a mesma pergunta respondida de dois jeitos,
     e alturas diferentes fazem um parecer a opcao principal. */
  #app > #scr-create.active > .card{align-self:stretch; margin-bottom:0}
}


/* ============ A FILA, NO MONITOR, FICA NO CANTO DO TRANSPORTE ============

   No celular ela sobe do chao e ocupa a largura toda, e ali isso e certo: a mao
   esta embaixo e a tela e estreita.

   No monitor as duas premissas caem. Uma folha de borda a borda vira uma faixa
   de um metro com nomes de musica de quatro centimetros, e o olho percorre vazio
   de um lado ao outro para ler uma coluna. Estreita ela e o que precisa ser: uma
   COLUNA de nomes.

   E ela mora no canto de baixo a direita, logo acima do transporte, porque e de
   la que ela e chamada - o botao da fila e o ultimo da fileira. Peca que nasce
   longe do botao que a abriu obriga o olho a procurar o que acabou de acontecer;
   nascendo em cima dele, o painel e a continuacao do clique.

   A borda direita bate com a do rodape (`--space-8` nos dois), entao ela alinha
   com a pastilha do tempo e com o fim dos botoes, e nao flutua num lugar
   qualquer do canto.

   A altura e a do conteudo, com teto. Com quatro musicas, um painel de 46% da
   tela ficava tres quartos vazio. */
@media (min-width:1024px){
  .palco-lista{
    left:auto; right:var(--space-8); top:auto;
    /* Acima do transporte, e nao atras dele: 96px cobrem tanto o rodape do palco
       (botoes de 52 mais o respiro) quanto o player das listas. */
    bottom:96px;
    width:min(420px, 92vw);
    height:auto; max-height:min(52vh, 520px);
    /* Fechada dos quatro lados: ela nao encosta em borda nenhuma, e um canto
       reto aqui pareceria recorte, e nao peca. */
    border-radius:var(--radius-3xl); border-bottom:1px solid var(--noite-borda);
    /* A sombra desce: no chao ela subia para separar da letra, que ficava acima;
       solta no ar, sombra que sobe le como se a peca estivesse afundada. */
    box-shadow:0 26px 70px rgb(var(--sombra) / .72);
    /* Entra de baixo, curto: vinte e dois pixels, so o suficiente para dizer que
       chegou agora - e o mesmo sentido do botao que a chamou. */
    transform:translateY(22px);
  }
  .palco-lista.on{transform:none}
  /* A area segura e do aparelho, e aqui nao ha borda de aparelho embaixo. */
  .palco-lista-itens{padding-bottom:12px}
  /* A LETRA ABRE ESPACO PARA O PAINEL. No monitor ele fica no canto de baixo,
     e as linhas centradas passavam por tras dele: "canta ju" e o resto sumia.
     A letra recua a largura do painel e quebra antes dele. */
  #scr-stage.com-fila .stage-lyrics{padding-right:calc(min(420px, 92vw) + var(--space-8) + var(--space-6))}
}


/* ============ AS ORIGENS, NO MONITOR, RESPONDEM AO PONTEIRO ============

   Os dois cartoes de "Criar playback" eram superficies mudas: o clique valia no
   cartao inteiro, mas nada na tela dizia isso. Com mouse essa diferenca custa
   caro - a pessoa passa por cima, nada acontece, e ela vai procurar onde clicar.

   OS DOIS NAO SAO A MESMA COISA, e e por isso que nao ganham o mesmo tratamento:

     IMPORTAR ARQUIVO e um BOTAO. O cartao inteiro dispara uma acao, entao ele
     inteiro se levanta, pega a cor do proprio icone na borda e empurra a seta
     para a direita - o gesto que a seta ja promete.

     PESQUISAR NA NUVEM e um FORMULARIO. Levantar uma caixa onde se vai digitar
     seria mentira: nao ha nada para clicar nela, ha algo para preencher. Ela nao
     se mexe; acende quando o cursor entra no campo, que e quando ela de fato
     esta em uso.

   A cor de cada um e a que o icone ja usa - azul para o arquivo, roxo para a
   nuvem -, entao o realce nao introduz cor nova: ele acende a que ja estava ali.

   Tudo isso e de monitor. No toque nao existe "passar por cima", e o proprio
   `:active` que ja havia responde ao dedo. */
@media (min-width:1024px){
  #scr-create .card{
    transition:transform .18s var(--ease, cubic-bezier(.2,.8,.2,1)),
               border-color .18s ease, box-shadow .18s ease;
  }
  /* O cartao que E um botao. `:has` para nao depender de id: o que define o
     tratamento e ter um botao dentro, e nao o nome da peca. */
  #scr-create .card:has(> .fonte-linha):hover{
    transform:translateY(-2px);
    border-color:rgb(var(--brand-1-rgb) / .40);
    box-shadow:0 12px 32px rgb(var(--sombra) / .5), 0 0 0 1px rgb(var(--brand-1-rgb) / .18);
  }
  /* No clique ele volta ao chao: e o movimento que diz "apertou". */
  #scr-create .card:has(> .fonte-linha):active{transform:translateY(0)}
  /* E o mesmo realce pelo teclado, sem o levantamento - quem chega por Tab nao
     esta apontando para lugar nenhum. */
  #scr-create .card:has(> .fonte-linha):focus-within{
    border-color:rgb(var(--brand-1-rgb) / .50);
    box-shadow:0 0 0 3px rgb(var(--brand-1-rgb) / .22);
  }

  /* O cartao que e um formulario: so acende, e so quando esta em uso. */
  #scr-create #cardYT:focus-within{
    border-color:rgb(var(--brand-3-rgb) / .42);
    box-shadow:0 0 0 3px rgb(var(--brand-3-rgb) / .16);
  }

  /* A seta anda o tanto que promete - tres pixels. Mais que isso vira gracinha
     e menos nao se ve. */
  #scr-create .fonte-seta{
    transition:transform .18s var(--ease, cubic-bezier(.2,.8,.2,1)), color .18s ease;
  }
  #scr-create .card:has(> .fonte-linha):hover .fonte-seta{transform:translateX(3px)}

  /* O icone cresce de leve e ganha um halo da propria cor: e ele quem carrega a
     identidade de cada caminho, entao e nele que o realce faz sentido. */
  #scr-create .ic{
    transition:transform .18s var(--ease, cubic-bezier(.2,.8,.2,1)), box-shadow .18s ease;
  }
  #scr-create .card:hover .ic{transform:scale(1.05)}
  #scr-create .card:hover .ic-arquivo{box-shadow:0 0 0 5px rgb(var(--brand-1-rgb) / .10)}
  #scr-create #cardYT:focus-within .ic-nuvem{box-shadow:0 0 0 5px rgb(var(--brand-3-rgb) / .10)}

  /* Sem movimento, o realce continua: o que sai e o deslocamento, nao o aviso. */
  @media (prefers-reduced-motion:reduce){
    #scr-create .card, #scr-create .card:hover,
    #scr-create .fonte-seta, #scr-create .card:hover .fonte-seta,
    #scr-create .ic, #scr-create .card:hover .ic{transform:none; transition:none}
  }
}


/* ============ O CTA BRANCO SAI DA HOME, no monitor ============

   Era a peca mais clara da tela e dizia exatamente o que o item "Criar playback"
   da barra de topo diz, a dois centimetros dali, na mesma dobra. O mesmo destino
   oferecido duas vezes nao da duas chances: faz a pessoa parar para decidir se
   sao a mesma coisa.

   No celular ele ja tinha saido, pelo mesmo motivo, quando a tab de baixo virou
   o caminho (ver o bloco `max-width` la em cima). Entao a partir daqui ele nao
   aparece em largura nenhuma - e isso muda o que ele E.

   ELE DEIXA DE SER UM BOTAO E VIRA UM MECANISMO. Nao se esconde por capricho:
   tanto o item da barra de topo quanto a aba do celular disparam o clique DESTE
   botao (`data-alvo="btnGoCreate"`), justamente para nao existir uma segunda
   copia da regra de quando se pode criar. Tirar do HTML derruba os dois
   caminhos de uma vez.

   A `.home-cta-row` continua: e dela tambem a barrinha de progresso, que aparece
   enquanto uma musica esta sendo criada. */
@media (min-width:1024px){
  #scr-home .create-cta{display:none}
}


/* ============ A BARRA DE ROLAGEM, NO MONITOR ============

   POR QUE ELA SUMIA. `#repList` e `#homeAllList` nao tinham estilo nenhum de
   barra, e sem isso o Chrome usa a SOBREPOSTA - aquela que so aparece enquanto
   se rola e some depois. Numa lista que agora rola por dentro, isso esconde a
   unica pista de que ha mais coisa embaixo: a pessoa ve a lista cortada e nao
   sabe se acabou ou se falta. Basta declarar `::-webkit-scrollbar` para o
   navegador trocar pela barra classica, que fica.

   E UMA SO PARA TODAS. Havia duas receitas diferentes no app - a da letra, com
   o gradiente da marca em 10px, e a da lista do repertorio, cinza em 10px -, e
   nenhuma nas listas da home. Tres tratamentos para a mesma peca em telas
   vizinhas.

   AGORA: 8px de canal, e o polegar ocupa 4 deles - a borda transparente com
   `background-clip:content-box` e o que afina sem encostar no texto. Branco a
   13%, que e o mesmo peso das divisas do app: presente quando se procura,
   invisivel quando nao. No ponteiro em cima ele dobra, para dizer que da para
   arrastar.

   O GRADIENTE DA LETRA SAI JUNTO. Ele era bonito e era a coisa mais colorida de
   uma tela feita para ler texto - e a barra de rolagem nao e conteudo.

   So no monitor: no toque nao ha barra permanente, e forcar uma deixaria um
   risco fixo na lateral do celular o tempo todo. */
@media (min-width:1024px){
  #repList, #homeAllList, #songScroll, .palco-lista-itens, .rep-letra-texto{
    scrollbar-width:thin;
    scrollbar-color:rgb(var(--tinta) / .13) transparent;   /* Firefox */
  }
  #repList::-webkit-scrollbar,
  #homeAllList::-webkit-scrollbar,
  #songScroll::-webkit-scrollbar,
  .palco-lista-itens::-webkit-scrollbar,
  .rep-letra-texto::-webkit-scrollbar{width:8px}

  #repList::-webkit-scrollbar-track,
  #homeAllList::-webkit-scrollbar-track,
  #songScroll::-webkit-scrollbar-track,
  .palco-lista-itens::-webkit-scrollbar-track,
  .rep-letra-texto::-webkit-scrollbar-track{background:transparent}

  #repList::-webkit-scrollbar-thumb,
  #homeAllList::-webkit-scrollbar-thumb,
  #songScroll::-webkit-scrollbar-thumb,
  .palco-lista-itens::-webkit-scrollbar-thumb,
  .rep-letra-texto::-webkit-scrollbar-thumb{
    background:rgb(var(--tinta) / .13);
    border:2px solid transparent; background-clip:content-box;
    border-radius:999px;
  }
  #repList::-webkit-scrollbar-thumb:hover,
  #homeAllList::-webkit-scrollbar-thumb:hover,
  #songScroll::-webkit-scrollbar-thumb:hover,
  .palco-lista-itens::-webkit-scrollbar-thumb:hover,
  .rep-letra-texto::-webkit-scrollbar-thumb:hover{
    background:rgb(var(--tinta) / .26); background-clip:content-box;
  }
}


/* =====================================================================
   BOAS-VINDAS, DICAS E AJUDA (2026-10-06)
   Substituem a tela de tour, o guia de oito passos e o "Manual do Usuario".
   O porque esta em web/src/ui/boasvindas.js, dicas.js e ajuda.js.
   ===================================================================== */

/* ---- o cartao de boas-vindas ---- */
.bv{
  position:fixed; inset:0; z-index:90;
  display:flex; align-items:center; justify-content:center;
  padding:calc(16px + var(--sat)) calc(16px + var(--sar)) calc(16px + var(--sab)) calc(16px + var(--sal));
  background:rgb(var(--veu) / .62);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.bv[hidden]{display:none}
.bv-card{
  width:100%; max-width:400px; text-align:center;
  background:var(--card-elevated); border:1px solid var(--border-strong);
  border-radius:var(--radius-2xl); box-shadow:var(--shadow-lg);
  padding:var(--space-6) var(--space-5) var(--space-5);
}
/* O logo inteiro acima do titulo, a 40px de altura (172px de largura): bem
   acima do minimo de 120px, com o respiro de meio G em volta. */
.bv-logo{height:40px; width:auto; display:block; margin:var(--space-1) auto var(--space-5)}
.bv-titulo{
  margin:0; font-size:var(--text-2xl); font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-brand); line-height:var(--leading-tight);
}
.bv-texto{margin:var(--space-2) 0 var(--space-5); font-size:var(--text-sm); color:var(--muted); line-height:var(--leading-normal)}
.bv-passos{
  list-style:none; counter-reset:bv; margin:0 0 var(--space-5); padding:0;
  display:grid; gap:var(--space-3); text-align:left;
}
.bv-passos li{
  counter-increment:bv; display:flex; align-items:center; gap:var(--space-3);
  font-size:var(--text-sm); color:var(--text); line-height:var(--leading-snug);
}
.bv-passos li::before{
  content:counter(bv); flex:0 0 26px; width:26px; height:26px; border-radius:var(--radius-full);
  display:flex; align-items:center; justify-content:center;
  background:var(--card); border:1px solid var(--border-strong);
  font-size:var(--text-xs); font-weight:var(--weight-semibold); color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.bv-card .btn{width:100%; min-height:48px}
.bv-pular{margin-top:var(--space-2)}
.bv-criar{margin-top:var(--space-2)}
.bv-erro{margin:var(--space-3) 0 0; color:var(--danger)}

/* ---- a dica de uma linha ----
   Clara sobre o app escuro: e a unica coisa na tela que nao e do app, e
   precisa se descolar dele de relance. */
.dica{
  position:fixed; z-index:85; left:12px; top:12px; width:320px;
  display:flex; align-items:center; gap:var(--space-3);
  padding:10px 10px 10px 14px; border-radius:var(--radius-lg);
  background:var(--foreground); color:var(--background); box-shadow:var(--shadow-lg);
  font-size:var(--text-sm); line-height:var(--leading-snug);
  animation:dica-entra .22s var(--ease);
}
.dica[hidden]{display:none}
.dica-txt{flex:1 1 auto; min-width:0}
.dica-ok{
  flex:0 0 auto; min-height:40px; padding:6px 12px; border:0; cursor:pointer;
  border-radius:var(--radius-md); background:var(--background); color:var(--foreground);
  font:inherit; font-weight:var(--weight-semibold);
}
@media (pointer:coarse){ .dica-ok{min-height:44px} }
@keyframes dica-entra{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .dica{animation:none} }

/* ---- a tela de ajuda ---- */
/* Largura FIXA, e nao max-width com margem automatica: dentro da grade da tela
   no monitor, margem automatica faz o bloco encolher para a largura do
   conteudo, e abrir ou fechar uma pergunta mudava a largura da tela inteira
   (470px fechada, 602px aberta no notebook). */
.aj{width:min(100%, 760px); margin:0 auto}
.aj .tela-hero{margin-bottom:var(--space-4)}
.aj-busca{width:100%; margin-bottom:var(--space-3)}
.aj-item{
  margin-bottom:var(--space-3); border:1px solid var(--border);
  border-radius:var(--radius-lg); background:var(--card);
  scroll-margin-top:var(--space-4);
}
.aj-item[hidden]{display:none}
.aj-item > summary{
  list-style:none; cursor:pointer; min-height:52px;
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  font-size:var(--text-md); font-weight:var(--weight-semibold); line-height:var(--leading-snug);
}
.aj-item > summary::-webkit-details-marker{display:none}
.aj-item > summary::after{content:'+'; flex:0 0 auto; font-size:22px; font-weight:var(--weight-normal); color:var(--muted)}
.aj-item[open] > summary::after{content:'\2212'}
.aj-item > summary:focus-visible{outline:2px solid var(--ring); outline-offset:2px; border-radius:var(--radius-lg)}
.aj-item ol, .aj-item ul{
  margin:0; padding:0 var(--space-4) var(--space-4) calc(var(--space-4) + 22px);
  display:grid; gap:var(--space-2); max-width:68ch;
  font-size:var(--text-sm); line-height:var(--leading-relaxed); color:var(--muted);
}
.aj-item li b{color:var(--text); font-weight:var(--weight-semibold)}
.aj-nada{padding:var(--space-6) 0; text-align:center; color:var(--muted); font-size:var(--text-sm)}
.aj-nada[hidden]{display:none}


/* =====================================================================
   TABLET E JANELA MEDIA (600 a 1023px), com ou sem mouse.

   O QUE HAVIA. Com mouse, entre 520 e 1023px, o app virava uma maquete de
   celular de 434px boiando no meio da janela - mas a barra de abas e fixa na
   JANELA, entao ela ficava fora da maquete, esticada de ponta a ponta embaixo
   dela. Com toque, a coluna centralizada so valia acima de 700px.

   AGORA. O app ocupa a janela nos dois casos, e o que se le e o que se toca
   fica numa coluna de 680px no meio: telas, player e abas na mesma largura.
   ===================================================================== */
@media (min-width:520px) and (max-width:1023.98px) and (hover:hover) and (pointer:fine){
  #app{height:100%; margin:0; max-width:none; border:0; border-radius:0; box-shadow:none}
}
@media (min-width:600px) and (max-width:1023.98px){
  :root{--coluna-media:680px}
  #app > .screen:not(#scr-stage){
    padding-left:max(calc(20px + var(--sal)), calc((100% - var(--coluna-media)) / 2));
    padding-right:max(calc(20px + var(--sar)), calc((100% - var(--coluna-media)) / 2));
  }
  #app > .rp-seek, #app > .rep-player{
    left:max(calc(12px + var(--sal)), calc((100% - var(--coluna-media)) / 2 + 8px));
    right:max(calc(12px + var(--sar)), calc((100% - var(--coluna-media)) / 2 + 8px));
  }
  .app-nav{
    left:max(6px, calc((100% - var(--coluna-media)) / 2));
    right:max(6px, calc((100% - var(--coluna-media)) / 2));
  }
}


/* =====================================================================
   MONITOR E ULTRAWIDE (>= 1024px)

   O QUE O DONO VIU NUM MONITOR DE 3440px: a barra do player esticada de uma
   borda a outra, com o transporte num canto e o tempo no outro; a barra de
   topo com a marca no meio e o "Conta" no canto oposto; e a tela do repertorio
   mais larga que as duas. Quatro andares, quatro larguras.

   AGORA HA UMA COLUNA SO. `--largura-app` e a largura de tudo: barra de topo,
   telas e player terminam no mesmo eixo, centralizados. Fora dela so o fundo.
   O player deixa de ser faixa de rodape e vira uma doca da largura da coluna,
   com o nome do que toca de volta (sem ele sobrava uma barra vazia no meio).

   A ESCALA DE 90% so vale ate 1599px. Ela existe para caber mais musica num
   notebook; num monitor grande ela so deixava tudo miudo, com metade da tela
   preta dos lados. Acima de 1600px a escala e 1 e a coluna cresce para 1320px.
   ===================================================================== */
@media (min-width:1024px){
  :root{--largura-app:1200px; --doca-vao:var(--space-4)}

  /* A barra de topo comeca e termina onde o conteudo comeca e termina (as
     telas tem `--space-8` de respiro por dentro da coluna). */
  .app-nav{
    padding-left:max(var(--space-6), calc((100% - var(--largura-app)) / 2 + var(--space-8)));
    padding-right:max(var(--space-6), calc((100% - var(--largura-app)) / 2 + var(--space-8)));
  }

  /* O repertorio com letra ia a 1600px; agora tem o teto de todas. A letra
     fica com uns 60% da coluna, que e uma medida de leitura, e nao uma faixa. */
  #app > #scr-rep.active.com-letra{max-width:var(--largura-app)}

  /* ---- o player vira doca ---- */
  #app > .rep-player{
    left:max(var(--space-6), calc((100% - var(--largura-app)) / 2 + var(--space-8)));
    right:max(var(--space-6), calc((100% - var(--largura-app)) / 2 + var(--space-8)));
    bottom:var(--doca-vao);
    border:1px solid var(--noite-borda); border-radius:var(--radius-xl);
    padding:8px var(--space-3) 8px var(--space-4);
    gap:var(--space-3);
  }
  #app > .rp-seek{
    left:calc(max(var(--space-6), calc((100% - var(--largura-app)) / 2 + var(--space-8))) + var(--space-4));
    right:calc(max(var(--space-6), calc((100% - var(--largura-app)) / 2 + var(--space-8))) + var(--space-4));
    bottom:calc(var(--rp-h, 52px) + var(--doca-vao));
  }
  .rep-player .rp-body{display:block; flex:1 1 auto; min-width:0}
  .rep-player #rpStopBtn{margin-left:0}
  /* O vao que a tela guarda embaixo e o da doca inteira, nao so o da barra. */
  #app.has-bar .screen{padding-bottom:calc(var(--rp-h, 52px) + var(--doca-vao) + var(--space-6))}
  #app.has-bar.has-seek .screen{padding-bottom:calc(var(--rp-h, 52px) + var(--doca-vao) + 26px + var(--space-6))}

  /* Ajuda: coluna de leitura, e sem o "< Inicio" - a barra de topo ja tem. */
  #app > #scr-ajuda.active{max-width:880px}
  #app > #scr-ajuda.active > .aj{grid-column:1 / -1}
  #scr-ajuda > .header{display:none}
}
@media (min-width:1600px){
  :root{--largura-app:1320px}
  #app{--escala:1}
}
/* Ultrawide (2560px e acima): a coluna cresce mais um degrau. Continua
   centralizada; o resto da largura e fundo, de proposito, porque uma lista de
   nomes de musica com 3000px de largura e uma faixa, nao uma lista. */
@media (min-width:2400px){
  :root{--largura-app:1480px}
}

/* ALVO DE TOQUE DE 44px NO CELULAR, sem mudar o desenho.
   O transporte do player (32 e 40px), o - e o + da lista e da letra (26px), o
   "Editar" (27px de altura) e o play e o lapis das linhas (38px) ficavam
   abaixo dos 44px que o dedo precisa - e no palco, com o instrumento na mao,
   e onde mais se erra. A area que responde ao toque cresce por um
   pseudo-elemento invisivel; o botao continua do mesmo tamanho na tela.
   `::before`, porque o `::after` do play ja e o anel de "preparando o tom". */
@media (pointer:coarse){
  .rep-player .rp-btn, .lista-zoom button, .rep-editar, .song-play, .song-edit, .back{position:relative}
  .rep-player .rp-btn::before, .lista-zoom button::before, .rep-editar::before,
  .song-play::before, .song-edit::before, .back::before{
    content:''; position:absolute; left:50%; top:50%;
    /* Na largura cresce so ate o vao do vizinho (6px), para dois botoes lado a
       lado nao disputarem o mesmo toque; na altura, ate os 44px. */
    width:calc(100% + 6px); height:max(100%, 44px); transform:translate(-50%, -50%);
  }
}
@media (pointer:coarse) and (max-width:1023.98px){
  /* O transporte e o que se toca no escuro do palco: 44 e 38px desenhados,
     44 com a folga invisivel acima. */
  .rep-player .rp-btn{width:44px; height:44px}
  .rep-player .rp-btn.sec{width:38px; height:38px}
}

/* ================= MINHA CONTA E ESTUDIO =================
   Moram em web/styles/conta.css, folha propria das duas telas (#scr-conta,
   #scr-estudio), do convite do Estudio na home e das folhas de backup. */


/* =====================================================================
   LANCAMENTO: ESCALA DE TEXTO, CONTRASTE, PALCO, ANDAMENTO (w2-visual)

   Tudo aqui vem depois de proposito: o arquivo nao usa @layer, entao a ordem e
   a regra, e estas decisoes tem de vencer as camadas antigas sem caçar cada
   uma delas.
   ===================================================================== */

/* ---- CONTRASTE (UX-26) ----
   O cinza de apoio (#71717a sobre #0c0c0e) dava 4,0:1, abaixo dos 4,5:1 que
   texto pequeno precisa, e era justamente o cinza dos selos, do resumo do
   repertorio e dos rotulos. Este da 6,1:1 e continua lendo como secundario.
   O valor (#93939d) subiu para tokens.css: as telas de conta usavam o mesmo
   cinza nos rotulos de campo e reprovavam no mesmo ponto. */
.selo-letra.nada{opacity:1}

/* ---- ESCALA DE TEXTO NO MONITOR (UX-11) ----
   No notebook o app rodava a 90% e o titulo de musica chegava a 11-12 px; no
   ultrawide a coluna cresceu, mas a letra nao. Agora:
     - de 1024 a 1899 px a escala e 1 e os degraus de texto sobem um ponto
       (corpo 15, titulo de musica 16, rotulo 13);
     - acima disso a interface inteira cresce com a tela, pelo mesmo `zoom` que
       ja existia (que tambem leva icone, botao e altura de linha junto):
       1,12 a partir de 1900, 1,25 a partir de 2400 e 1,4 a partir de 3200.
   O celular nao muda. `--fs` (Configuracoes > Tamanho do texto) continua
   multiplicando tudo. */
@media (min-width:1024px){
  :root{
    --text-2xs:calc(12px * var(--fs)); --text-label:calc(12px * var(--fs));
    --text-xs:calc(13px * var(--fs)); --text-sm:calc(14px * var(--fs));
    --text-base:calc(15px * var(--fs)); --text-md:calc(16px * var(--fs));
    --text-lg:calc(18px * var(--fs)); --text-xl:calc(22px * var(--fs));
    --text-2xl:calc(29px * var(--fs)); --text-3xl:calc(40px * var(--fs));
  }
  #app{--escala:1}
  /* Linhas confortaveis: 52 px de alvo, com o titulo em 16. */
  .song-main{min-height:52px}
  #repList .li-title-txt{font-size:var(--text-lg)}
  #repList .li-sub{font-size:var(--text-xs)}
  .bloco-cabeca, .stage-barra{font-size:var(--text-sm)}
}
@media (min-width:1900px){ #app{--escala:1.12} }
@media (min-width:2400px){ #app{--escala:1.25} :root{--largura-app:1400px} }
@media (min-width:3200px){ #app{--escala:1.4} }

/* ---- LETREIRO SO NA LINHA QUE IMPORTA (UX-41) ----
   Titulo comprido rolava em TODAS as linhas ao mesmo tempo: a lista inteira em
   movimento, e o comeco do nome cortado. Agora so rola a linha escolhida (ou
   sob o mouse, ou com foco); as outras terminam em reticencias. */
.li-title-txt.marquee{animation:none; max-width:100%; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; vertical-align:top}
.song.current .li-title-txt.marquee, .list-item.current .li-title-txt.marquee,
.song:hover .li-title-txt.marquee, .song:focus-within .li-title-txt.marquee{
  animation:mq 5s linear infinite; max-width:none; overflow:visible}
@media (prefers-reduced-motion:reduce){ .li-title-txt.marquee, .rp-title-txt.marquee{animation:none !important} }

/* ---- REPERTORIO SEM "BLOCO N" (UX-22) ----
   Musicas que entram direto uma na outra ficam unidas por um traco na lateral.
   O traco e o grupo; a musica sozinha nao ganha nada. */
#scr-rep:not(.editando) #songList.com-grupos .song.emenda::after,
#scr-rep:not(.editando) #songList.com-grupos .song.emenda + .song::after{
  content:''; position:absolute; left:2px; top:4px; bottom:-3px; width:3px; border-radius:2px;
  background:var(--brand-2); pointer-events:none}
#scr-rep:not(.editando) #songList.com-grupos .song:not(.emenda)::after{bottom:4px}
.junta-pilula{font-size:var(--text-xs); text-transform:none; letter-spacing:0}
.song.emenda .junta-pilula{font-size:var(--text-xs); color:var(--text)}
.junta{min-height:44px}

/* ---- CELULAR E TABLET: CRIAR A VISTA E ABAS COM NOME (UX-25) ---- */
@media (max-width:1023.98px){
  /* O botao principal volta para o alto da home: e a acao do app, e o "+"
     sozinho na barra de baixo nao dizia isso. */
  .create-cta{display:flex; width:100%; justify-content:center; padding:12px var(--space-4);
    font-size:var(--text-md); min-height:48px}
  .create-cta svg{width:18px; height:18px}
  .home-cta-row{margin:var(--space-2) 0 var(--space-4)}
  /* Rotulo permanente embaixo de cada icone. Ele so piscava depois do toque,
     e icone de pasta, nota e "+" nao se explicam sozinhos. */
  :root{--abas-h:58px}
  .app-nav-item{gap:3px; justify-content:center}
  .app-nav-item > span{position:static; transform:none; opacity:1; padding:0; border:0;
    background:none; box-shadow:none; pointer-events:none;
    font-size:11px; font-weight:var(--weight-medium); color:inherit; line-height:1.1}
  .app-nav-item.com-rotulo > span{transform:none}
  .app-nav-item{color:var(--muted)}
  .app-nav-item.on{color:var(--foreground)}
  .app-nav-item::before{top:6px; transform:translate(-50%,0) scale(.6)}
  .app-nav-item.on::before{transform:translate(-50%,0) scale(1)}
  .app-nav-item > span{text-shadow:0 1px 4px rgb(var(--papel) / .9)}
  /* A barra flutuante ganha fundo para o rotulo ler sobre a lista. */
  .app-nav{background:rgb(var(--vidro-nav) / var(--vidro-alfa, .92)); border:1px solid var(--noite-borda); border-radius:20px}
  @supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
    .app-nav{background:rgb(var(--vidro-nav) / var(--vidro-alfa, .78)); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)}
  }
}

/* ---- ALVOS DE TOQUE DE 44 PX (UX-27) ---- */
@media (pointer:coarse){
  .lista-zoom button, .junta, .tom-btn, .stage-tools button, .stage-close,
  #homeAllSort, .field{min-height:44px}
  .lista-zoom button, .stage-tools button{min-width:44px}
  .rep-editar{min-height:44px}
}
@media (pointer:coarse) and (max-width:1023.98px){
  .rep-player .rp-btn.sec{width:44px; height:44px}
}

/* ---- SEM CONEXAO NAO MOSTRA A NAVEGACAO (UX-42) ----
   Parado na partida, sem assinatura confirmada, a barra levava a telas vazias. */
#app:has(#scr-boot.active) .app-nav{display:none}

/* ---- CRIAR (UX-23) ---- */
.pc-estado{margin:var(--space-2) 0 0; font-size:var(--text-sm); color:var(--muted); line-height:var(--leading-snug)}
.pc-estado:empty{display:none}
.pc-estado.ok{color:var(--success)}
.pc-acoes{margin-top:var(--space-3); flex-wrap:wrap; gap:var(--space-2)}
.pc-acoes .btn{flex:0 0 auto}
.fonte-principal{border-color:var(--border-hover)}
.lyr-aviso{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2) var(--space-3);
  margin:0 0 var(--space-3); padding:var(--space-3); border-radius:var(--radius-lg);
  border:1px solid var(--border-strong); background:var(--card2);
  font-size:var(--text-sm); color:var(--text); line-height:var(--leading-snug)}
.lyr-aviso p{flex:1 1 240px; margin:0}
.lyr-aviso[hidden]{display:none}
.rolagem-rot{font-size:var(--text-xs); color:var(--muted); margin-right:6px; white-space:nowrap}

/* ---- ANDAMENTO DE UM PLAYBACK (UX-24) ----
   Cartao fixo, de qualquer tela, logo acima do que estiver no pe dela (a conta
   da altura e de `posJob`, no app.js). No monitor ele mora no canto direito da
   coluna; no celular ocupa a largura. */
.job-card{
  position:fixed; z-index:41; left:8px; right:8px; bottom:72px;
  padding:var(--space-3) var(--space-4); border-radius:var(--radius-xl);
  background:var(--noite-funda); border:1px solid var(--border-strong);
  box-shadow:var(--shadow-lg); color:var(--text);
}
.job-card[hidden]{display:none}
#app.sem-abas .job-card{display:none}
.job-topo{display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3)}
.job-titulo{font-size:var(--text-sm); font-weight:var(--weight-semibold); min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.job-pct{font-size:var(--text-sm); color:var(--muted); font-variant-numeric:tabular-nums}
.job-trilho{height:6px; margin:var(--space-2) 0; border-radius:var(--radius-full); background:var(--card2); overflow:hidden}
.job-fill{height:100%; width:3%; border-radius:inherit; background:var(--accent); transition:width .4s ease}
.job-etapas{display:flex; gap:var(--space-2); list-style:none; margin:0; padding:0;
  font-size:var(--text-xs); color:var(--muted)}
.job-etapas li{flex:1 1 0; min-width:0; padding-top:5px; border-top:2px solid var(--border-strong);
  line-height:1.2; overflow-wrap:anywhere}
.job-etapas li[data-estado="feita"]{border-top-color:var(--accent); color:var(--muted)}
.job-etapas li[data-estado="atual"]{border-top-color:var(--accent); color:var(--text); font-weight:var(--weight-semibold)}
.job-pe{display:flex; align-items:center; gap:var(--space-3); margin-top:var(--space-2)}
.job-texto{flex:1; margin:0; font-size:var(--text-xs); color:var(--muted); line-height:var(--leading-snug)}
.job-cancelar{flex:0 0 auto; min-height:36px}
@media (pointer:coarse){ .job-cancelar{min-height:44px} }
#app.com-job .screen.active::after{content:''; display:block; height:var(--job-h, 120px); grid-column:1 / -1}
@media (min-width:1024px){
  .job-card{left:auto; width:420px;
    right:max(var(--space-6), calc((100% - var(--largura-app)) / 2 + var(--space-8)))}
}

/* ---- PALCO NO MONITOR (UX-35) ----
   A letra cresce com a tela (antes: 26 px cravados no app.js, ou no maximo
   40 px), com linha de ate 40 caracteres, e A- / A+ multiplicam esse tamanho.
   O vw/vh daqui e dividido pela escala porque o #app tem zoom no monitor. */
#scr-stage .stage-lyrics{
  --palco-base:clamp(22px, calc(2.4vh + 1.6vw), 34px);
  font-size:calc(var(--palco-base) * var(--palco-escala, 1));
}
@media (min-width:1024px){
  #scr-stage .stage-lyrics{
    --palco-base:clamp(28px, calc((3.2vh + 1vw) / var(--escala, 1)), 96px);
    line-height:1.45;
    padding-left:max(var(--space-6), calc((100% - 40ch) / 2));
    padding-right:max(var(--space-6), calc((100% - 40ch) / 2));
  }
  #scr-stage .stage-ctrl.mini{gap:var(--space-3)}
  #scr-stage .stage-ctrl.mini button{width:64px; height:64px}
  #scr-stage .stage-ctrl.mini button.sec{width:54px; height:54px}
  #scr-stage .stage-ctrl.mini button svg{width:26px; height:26px}
  #scr-stage .stage-ctrl.mini button.sec svg{width:22px; height:22px}
  #scr-stage .stage-tools button{min-width:48px; height:44px; font-size:var(--text-md)}
  #scr-stage .stage-close{width:48px; height:48px}
  #scr-stage .stage-title{font-size:var(--text-lg)}
  #scr-stage .stage-a-seguir, #scr-stage .stage-rep{font-size:var(--text-sm)}
  .stage-acesa{font-size:var(--text-xs); color:var(--muted)}
}
@media (max-width:1023.98px){ .stage-acesa{display:none} }

/* ---- ACABAMENTO DO LANCAMENTO ---- */
/* Os botoes de tamanho da letra e da lista ficavam a 70% de opacidade: cinza
   sobre cinza, abaixo do contraste minimo. */
.lista-zoom button{opacity:1; color:var(--text)}
.lista-zoom button:disabled{opacity:.4}
/* As duas acoes do link do YouTube com a mesma medida. */
#cardPC .pc-acoes .btn{height:auto; min-height:44px; padding:10px var(--space-4);
  font-size:var(--text-sm); border-radius:var(--radius-full)}
@media (min-width:1024px){
  .song-play svg{width:16px; height:16px}
  .song-edit svg{width:18px; height:18px}
}
@media (min-width:1024px){
  /* Enviar arquivo e o caminho principal: no monitor o cartao vira um alvo
     grande, com o icone em destaque e a acao escrita, e nao uma linha perdida
     no meio de um cartao alto. */
  #scr-create .fonte-principal{display:flex; align-items:center; justify-content:center}
  #scr-create .fonte-principal .fonte-linha{flex-direction:column; text-align:center; gap:var(--space-3); padding:var(--space-4)}
  #scr-create .fonte-principal .ic{width:56px; height:56px}
  #scr-create .fonte-principal .ic svg{width:26px; height:26px}
  #scr-create .fonte-principal .fonte-seta{display:none}
  #scr-create .fonte-principal .fonte-linha::after{content:'Escolher arquivo'; margin-top:var(--space-1);
    padding:10px var(--space-5); border-radius:var(--radius-full); background:var(--accent);
    color:var(--accent-foreground); font-size:var(--text-sm); font-weight:var(--weight-semibold)}
}
/* Alvos de toque que ainda ficavam abaixo de 44 px no celular, medidos com o
   harness (palco, busca de repertorio, nome editavel). */
@media (pointer:coarse){
  #app input.field, #app #repNome, #app .pl-title-input{min-height:44px}
  #app #btnAddRep{min-width:44px; min-height:44px}
  #app #scr-stage .stage-tools button{min-width:44px; min-height:44px}
  #app #scr-stage .stage-close{width:44px; height:44px}
  #app #scr-stage .stage-ctrl.mini button.sec{width:44px; height:44px}
  .row-play{position:relative}
  .row-play::before{content:''; position:absolute; left:50%; top:50%; width:44px; height:44px;
    transform:translate(-50%,-50%)}
}
/* No rodape do palco do celular nao cabem rotulo, slider e cinco botoes de
   44 px: o rotulo sai (o slider continua com nome acessivel) e o vao encolhe. */
@media (max-width:1023.98px){
  #scr-stage .rolagem-rot{display:none}
  #app #scr-stage .stage-ctrl.mini{gap:4px}
}

/* ---- O QUE ESTA A CAMINHO DESTE APARELHO (#syncCard) ----
   Mesmo lugar e mesma pele do #jobCard (posJob empilha os dois). Cada musica
   tem os cinco passos (fila do Estudio, separando, enviando, chegando, pronto)
   num traco cada; o passo atual enche com a porcentagem (--pct). A lista e
   montada por web/src/ui/sincronia.js, com atributos e sem classes. */
.sync-card{
  position:fixed; z-index:41; left:8px; right:8px; bottom:72px;
  max-height:50vh; overflow:auto;
  padding:var(--space-3) var(--space-4); border-radius:var(--radius-xl);
  background:var(--noite-funda); border:1px solid var(--border-strong);
  box-shadow:var(--shadow-lg); color:var(--text);
}
.sync-card[hidden]{display:none}
#app.sem-abas .sync-card{display:none}
.sync-topo{display:flex; align-items:center; justify-content:space-between; gap:var(--space-3)}
.sync-titulo{font-size:var(--text-sm); font-weight:var(--weight-semibold)}
.sync-recolher{background:none; border:0; padding:0 var(--space-1); min-height:32px;
  color:var(--muted); font:inherit; font-size:var(--text-xs); cursor:pointer}
@media (pointer:coarse){ .sync-recolher{min-height:44px} }
.sync-estudio{display:flex; align-items:center; gap:6px; margin:2px 0 0;
  font-size:var(--text-xs); color:var(--muted)}
.sync-estudio::before{content:''; flex:0 0 8px; height:8px; border-radius:50%; background:var(--muted2)}
.sync-estudio[data-online="sim"]::before{background:var(--success)}
.sync-estudio[hidden]{display:none}
.sync-lista{list-style:none; margin:var(--space-2) 0 0; padding:0; display:grid; gap:var(--space-3)}
.sync-lista > li > div:first-child b{display:block; font-size:var(--text-sm); font-weight:var(--weight-medium);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sync-lista [data-passos]{display:grid; grid-template-columns:repeat(5, 1fr); gap:4px; margin:6px 0 4px}
.sync-lista [data-passos] i{height:4px; border-radius:2px; background:var(--card2)}
.sync-lista [data-passos] i[data-estado="feita"]{background:var(--accent)}
.sync-lista [data-passos] i[data-estado="atual"]{
  background:linear-gradient(90deg, var(--accent) var(--pct, 40%), var(--card2) var(--pct, 40%))}
.sync-lista [data-passos] i[data-estado="atual"]:not([style]){animation:sync-pulso 1.1s ease-in-out infinite alternate}
@keyframes sync-pulso{from{opacity:.45}to{opacity:1}}
@media (prefers-reduced-motion: reduce){ .sync-lista [data-passos] i{animation:none} }
.sync-lista li > p{margin:0; font-size:var(--text-xs); color:var(--muted); line-height:var(--leading-snug)}
.sync-lista li[data-etapa="pronto"] > p{color:var(--success)}
.sync-lista li[data-etapa="erro"] > p:not([data-acoes]),
.sync-lista li[data-etapa="espera"] > p:not([data-acoes]){color:var(--warning)}
.sync-lista [data-acoes]{display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:6px}
.sync-lista [data-mais]{font-size:var(--text-xs); color:var(--muted)}
.sync-card[data-recolhido="sim"] .sync-lista > li:not(:first-child),
.sync-card[data-recolhido="sim"] .sync-estudio{display:none}
@media (min-width:1024px){
  .sync-card{left:auto; width:420px;
    right:max(var(--space-6), calc((100% - var(--largura-app)) / 2 + var(--space-8)))}
}
.pc-sync{display:block; background:none; border:0; padding:0; min-height:40px;
  color:var(--accent-text); font:inherit; font-size:var(--text-sm); text-decoration:underline; cursor:pointer}

/* ---- O TOQUE NO PLAY RESPONDE NA HORA (web/src/ui/preparo.js) ----
   A linha tocada mostra o giro no lugar do triangulo e a frase do preparo
   ("Carregando", "Ajustando o tom 40%"); erro fica na propria linha. Vale
   tambem para a linha ja escolhida, onde o play da direita costuma sumir. */
.li-preparo, .li-sync{margin-right:6px; color:var(--accent-text); font-weight:var(--weight-medium)}
.li-preparo[hidden], .li-sync[hidden]{display:none}
.song[data-preparo="erro"] .li-preparo{color:var(--danger)}
.song[data-preparo="carregando"] .li-preparo ~ .selo-aparelho,
.song[data-preparo] .li-preparo ~ .li-sync{display:none}
#homeAllList .song[data-preparo="carregando"] .song-play,
#allList .song[data-preparo="carregando"] .song-play,
.song[data-preparo="carregando"] .song-play{display:flex; position:relative}
.song[data-preparo="carregando"] .row-play{position:relative}
.song[data-preparo="carregando"] :is(.song-play, .row-play) svg{opacity:0}
.song[data-preparo="carregando"] :is(.song-play, .row-play)::before{
  content:''; position:absolute; inset:28%; border-radius:50%;
  border:2.5px solid currentColor; border-right-color:transparent;
  animation:spin .75s linear infinite}
@media (prefers-reduced-motion: reduce){
  .song[data-preparo="carregando"] :is(.song-play, .row-play)::before{animation-duration:2s}
}
.stage-preparo{flex:1 1 0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:var(--text-sm); color:var(--accent-text); font-weight:var(--weight-medium)}
.stage-preparo[hidden]{display:none}
.stage-preparo[data-estado="erro"]{color:var(--danger)}
#stageBarra:has(.stage-preparo:not([hidden])) .stage-rep{display:none}

/* ---------- iOS: sem zoom de foco ----------
   O Safari do iPhone da zoom na pagina ao focar campo com fonte computada
   abaixo de 16px, e o usuario tem que dar pinca para voltar. No toque, todo
   campo de texto fica com no minimo 16px; no desktop nada muda. Sem mexer no
   viewport: travar o zoom tira acessibilidade. */
@media (pointer:coarse){
  input.field, select.field, textarea.field, .pl-title-input,
  input[type=search], input[type=text], input[type=email], input[type=password],
  input[type=tel], input[type=url], input[type=number], select, textarea{
    font-size:max(16px, var(--text-base)) !important;   /* vence .busca-barra .field e #cardPC .field */
  }
}


/* ============ MARCA: TITULOS EM ARCHIVO ============
   A fonte da marca e para TITULO e so para titulo: nome de tela, a saudacao
   da home, o cartao de boas-vindas, o numero grande (o tom, o preco do plano)
   e o titulo de aviso. Archivo ExtraBold a 112% de largura e -4% de
   espacamento, os quatro juntos, que e a regra da marca. O corpo fica na fonte
   do sistema. O espacamento das regras de tamanho acima ja aponta para
   --tracking-brand; aqui ficam a familia, o peso e a largura. */
.h-title, .hero-ola, .bv-titulo, .tom-val, .notif-title,
.conta-oferta-titulo, .conta-opcao-preco{
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-stretch:var(--stretch-display);
  letter-spacing:var(--tracking-brand);
}
/* A duracao do show mora dentro da linha do titulo, mas e dado, nao titulo:
   volta para a fonte do corpo. */
.h-title .rep-duracao{
  font-family:var(--font-sans); font-stretch:normal; letter-spacing:normal;
  font-weight:var(--weight-normal);
}