/* A biblioteca do aparelho (web/src/ui/biblioteca.js): a lista sem internet,
   a musica que nao esta neste aparelho, a folha de baixar de novo e os avisos.

   Arquivo proprio, ao lado do app.css, para que o estado da biblioteca nao se
   misture com tipografia e palco. Estado vem em data-*, escrito pelo modulo:
   data-aparelho="sim"|"fora" no cartao, data-lugar="topo"|"base" no toast. */

/* ---------- sem internet ---------- */
.faixa-offline{
  margin:0 0 var(--space-3); padding:var(--space-2) var(--space-3);
  border:1px solid var(--warning-border); background:var(--warning-bg); color:var(--text);
  border-radius:var(--radius-lg); font-size:var(--text-xs); line-height:var(--leading-snug);
}
.faixa-offline[hidden]{display:none}
/* No monitor a home e uma grade de duas linhas (saudacao e listas). Com a faixa
   visivel ela ganha uma linha de cima, de ponta a ponta; sem isso a faixa caia
   no fim da grade, embaixo das listas, onde ninguem olha. */
@media (min-width:1024px){
  #app > #scr-home.active:has(> .faixa-offline:not([hidden])){grid-template-rows:auto auto minmax(0,1fr)}
  #app > #scr-home.active > .faixa-offline{grid-column:1 / -1; grid-row:1; margin:0}
  #app > #scr-home.active:has(> .faixa-offline:not([hidden])) > .hero,
  #app > #scr-home.active:has(> .faixa-offline:not([hidden])) > .home-cta-row,
  #app > #scr-home.active:has(> .faixa-offline:not([hidden])) > .estudio-convite{grid-row:2}
  #app > #scr-home.active:has(> .faixa-offline:not([hidden])) > #cardListas{grid-row:3}
}

/* ---------- a musica que nao esta aqui ---------- */
.selo-aparelho{display:none}
.song[data-aparelho="fora"] .selo-aparelho{
  display:inline; color:var(--warning); font-weight:var(--weight-semibold); letter-spacing:.02em;
}
.selo-aparelho svg{width:1.1em; height:1.1em; vertical-align:-.2em; margin-right:4px}
/* Os selos da linha nao sao vizinhos diretos (entre eles moram .li-preparo e
   .li-sync, escondidos), entao o separador e espaco do proprio selo: com "+"
   o texto colava ("aparelholetra parada"). */
.song[data-aparelho="fora"] .selo-aparelho{margin-right:10px}
.song[data-aparelho="fora"] .li-title-txt{opacity:.62}
/* O numero NAO apaga junto. A 55% ele caia para 2,7:1 no escuro e 2,3:1 no
   claro, abaixo do minimo de texto; o titulo apagado e o selo ja dizem que a
   musica nao esta aqui, e a ordem continua sendo dado que se le. */
/* O botao do menu da musica so aparece depois que o disco respondeu. */
.song:not([data-aparelho]) .b-aparelho{display:none}

/* ---------- faixa do repertorio: N nao estao aqui ---------- */
.rep-faltam{
  display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap;
  margin:0 0 var(--space-3); padding:var(--space-2) var(--space-3);
  border:1px solid var(--warning-border); background:var(--warning-bg);
  border-radius:var(--radius-lg); font-size:var(--text-xs); color:var(--text);
}
.rep-faltam[hidden]{display:none}
.rep-faltam svg{width:18px; height:18px; flex:0 0 auto; color:var(--warning)}
.rep-faltam span{flex:1 1 12em; min-width:0}
.rep-faltam .btn{flex:0 0 auto}

/* ---------- folha de baixar ---------- */
.bx-progresso{margin:0 0 var(--space-3)}
.bx-progresso[hidden]{display:none}
.bx-barra{height:6px; border-radius:var(--radius-full); background:var(--surface); overflow:hidden}
.bx-barra i{display:block; height:100%; width:4%; background:var(--accent); border-radius:inherit;
  transition:width var(--duration) var(--ease)}
.bx-fase{display:block; margin-top:var(--space-2); font-size:var(--text-xs); color:var(--muted)}
.bx-erro{
  margin:0 0 var(--space-3); padding:var(--space-2) var(--space-3);
  border:1px solid var(--destructive-border); background:var(--destructive-bg); color:var(--text);
  border-radius:var(--radius-md); font-size:var(--text-sm);
}
.bx-erro[hidden], .bx-opcoes[hidden], #bxLink[hidden], #bxBaixar[hidden], #sessaoAgoraNao[hidden]{display:none}
.bx-nota{margin:var(--space-3) 0 0; font-size:var(--text-xs); color:var(--muted); line-height:var(--leading-normal)}
#baixarSheet .btn.cheio:first-of-type{margin-top:0}

/* Avisos e sessao ficam acima de qualquer folha (o confirmar mora em 88). */
#avisoSheet{z-index:89}
#sessaoSheet{z-index:95}
#baixarSheet{z-index:87}

/* ---------- toast: no alto quando ha folha aberta ---------- */
#toast[data-lugar="topo"]{bottom:auto; top:calc(18px + var(--sat))}

@media (prefers-reduced-motion: reduce){
  .bx-barra i{transition:none}
}