/* =============================================================================
   A BIBLIOTECA (SPEC 1.2.5, web/src/ui/bibliotecapub.js)

   Folha propria de quatro coisas, e so delas:
     1. a tela Biblioteca (#scr-bibpub);
     2. a busca no alto do Criar (#criarBib);
     3. o atalho discreto da home (#homeBiblioteca);
     4. a folha de adicionar (#bpSheet).

   NAO CONFUNDIR com static/biblioteca.css, que e o armario da conta (baixar de
   novo, a musica fora do aparelho). Esta e a Biblioteca pesquisavel.

   Carregada depois de conta.css e antes de visual.css: os componentes (.btn,
   .card, .field, .empty, .sheet) continuam com o desenho de visual.css, e tudo
   aqui comeca com um seletor destas pecas. Coral so na acao (o botao primario
   e o progresso, que e a onda tocando); a lista e neutra. Cor so por token
   (test_tema.py le esta folha).
   ============================================================================= */


/* ============ 0. COMUM ============ */

.bp [hidden], #criarBib [hidden], #bpSheet [hidden], .bp-atalho[hidden]{display:none !important}

/* A busca: lupa dentro do campo, e o X para limpar do outro lado. */
.bp-busca{position:relative; display:flex; align-items:center}
.bp-busca .field{width:100%; padding-left:42px; min-height:46px}
.bp-busca .field::-webkit-search-cancel-button{-webkit-appearance:none; appearance:none}
.bp-lupa{
  position:absolute; left:14px; top:50%; width:18px; height:18px; margin-top:-9px;
  color:var(--muted); pointer-events:none;
}
.bp-limpar{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:36px; height:36px; display:grid; place-items:center;
  border:0; border-radius:var(--raio-controle); background:transparent; color:var(--muted); cursor:pointer;
}
.bp-limpar:hover{color:var(--text); background:rgb(var(--tinta) / .06)}
.bp-limpar svg{width:16px; height:16px}
.bp-busca:has(.bp-limpar:not([hidden])) .field{padding-right:44px}

.bp-status{
  margin:0; min-height:1.3em; font-size:var(--text-xs); color:var(--muted);
  line-height:var(--leading-snug);
}
.bp-status:empty{min-height:0}

/* ---- a lista: uma linha por musica, como as listas do app ----
   Sem caixa, fio de cabelo entre as linhas, titulo firme, a linha de baixo
   miuda. A acao fica a direita, no contorno do secundario: coral so no
   botao da folha, que e onde a pessoa confirma. */
.bp-lista{list-style:none; margin:0; padding:0}
.bp-item{
  display:flex; align-items:center; gap:var(--space-3);
  min-height:64px; padding:var(--space-3) var(--space-1);
  box-shadow:inset 0 -1px 0 var(--hairline);
}
.bp-item:last-child{box-shadow:none}
.bp-item-txt{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px}
.bp-item-tit{
  font-size:var(--text-base); font-weight:var(--weight-semibold); letter-spacing:-.008em;
  color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bp-item-sub{
  display:flex; flex-wrap:nowrap; align-items:center; gap:2px var(--space-2);
  font-size:var(--text-xs); color:var(--subtle-foreground); min-width:0;
}
.bp-item-sub > span:first-child:not(.bp-selo){overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:0 1 auto}
/* "com letra": o mesmo ponto creme do "acompanha a musica" da lista. */
.bp-selo{color:var(--muted); font-weight:var(--weight-medium); white-space:nowrap}
.bp-selo::before{
  content:''; display:inline-block; width:5px; height:5px; border-radius:50%;
  background:currentColor; margin-right:6px; vertical-align:.12em;
}
.bp-item .btn{flex:0 0 auto; min-height:36px; padding:0 var(--space-4); white-space:nowrap}
/* Adicionar e o secundario do sistema; o coral fica para a folha, que confirma. */
.bp-add{min-width:104px; justify-content:center}
.bp-tem{color:var(--muted); border-color:transparent !important; gap:6px; display:inline-flex; align-items:center}
.bp-tem svg{width:16px; height:16px}
.bp-tem:hover{color:var(--text)}
@media (hover:hover) and (pointer:fine){
  .bp-item:hover{background:rgb(var(--tinta) / .03)}
}
@media (pointer:coarse){
  .bp-item .btn{min-height:44px}
}

/* ---- esqueleto: duas barras que respiram, sem coral (nada tocou) ---- */
.bp-osso{pointer-events:none}
.bp-osso i{display:block; height:10px; border-radius:var(--radius-full); background:rgb(var(--tinta) / .07);
  animation:bp-respira 1.2s var(--ease) infinite alternate}
.bp-osso i:first-child{width:52%; height:12px}
.bp-osso i:last-child{width:30%; margin-top:8px}
.bp-osso{flex-direction:column; align-items:flex-start; justify-content:center; gap:0}
@keyframes bp-respira{from{opacity:.55} to{opacity:1}}


/* ============ 1. A TELA ============ */

.bp{
  width:100%; max-width:720px; margin-inline:auto;
  display:flex; flex-direction:column; gap:var(--space-4);
}
.bp-topo .eyebrow{margin:0 0 var(--space-2)}
.bp-topo .h-title{margin:0; font-size:clamp(30px, 8.4vw, 40px); line-height:var(--leading-display)}
.bp-topo .tela-sub{margin:var(--space-3) 0 0; max-width:52ch}

.bp-destaques{display:flex; flex-direction:column; gap:var(--space-6); margin-top:var(--space-2)}
.bp-grupo{min-width:0}
.bp-grupo-tit{
  margin:0 0 var(--space-1); font-family:var(--font-display); font-weight:var(--weight-display);
  font-stretch:var(--stretch-display); letter-spacing:var(--tracking-brand);
  font-size:var(--text-lg); line-height:var(--leading-tight); color:var(--text);
}

.bp-resultados{display:flex; flex-direction:column; gap:var(--space-3)}
.bp-fim{height:1px}
.bp-mais{align-self:center; min-height:44px; padding-inline:var(--space-6)}

.bp-vazio{display:flex; flex-direction:column; align-items:center; text-align:center}
.bp-vazio > span{max-width:42ch; line-height:var(--leading-normal)}
.bp-vazio-acoes{display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-2); margin-top:var(--space-3)}
.bp-vazio-acoes .btn{margin-top:0}

.bp-erro{
  display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap;
  padding:var(--space-3) var(--space-4); border:1px solid var(--hairline-strong);
  border-radius:var(--raio-cartao); background:var(--card); font-size:var(--text-sm); color:var(--text);
}
.bp-erro p{margin:0; flex:1 1 14em}

.bp-nota{
  margin:var(--space-4) 0 0; padding-top:var(--space-4); border-top:1px solid var(--hairline);
  font-size:var(--text-xs); color:var(--muted); line-height:var(--leading-normal); max-width:60ch;
}


/* ============ 2. O CRIAR COMECA PELA BIBLIOTECA ============ */

#criarBib{display:flex; flex-direction:column; gap:var(--space-3)}
.bp-criar-tit{
  margin:0; font-size:var(--text-md); font-weight:var(--weight-semibold); color:var(--text);
  letter-spacing:-.005em;
}
.bp-criar-sub{margin:-6px 0 0; font-size:var(--text-sm); color:var(--muted); line-height:var(--leading-snug)}
.bp-lista-curta:empty{display:none}
.bp-lista-curta .bp-item{min-height:56px; padding-inline:0}
.bp-ver-todos{
  align-self:flex-start; padding:var(--space-1) 0; border:0; background:none;
  font:inherit; font-size:var(--text-sm); font-weight:var(--weight-medium); cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;
}
/* No celular os cartoes do Criar viram linhas sem moldura (app.css); o da
   Biblioteca continua cartao (visual.css, 15) e sem o fio de baixo. */
#scr-create > #criarBib::after{display:none !important}


/* ============ 3. O ATALHO DA HOME ============
   Uma linha, sem coral, para quem ainda tem pouca musica. */
.bp-atalho{
  display:flex; align-items:center; gap:var(--space-3); width:100%;
  margin:0 0 var(--space-4); padding:var(--space-3) var(--space-4);
  border:1px solid var(--hairline); border-radius:var(--raio-cartao);
  background:rgb(var(--tinta) / .025); color:var(--text);
  font:inherit; text-align:left; cursor:pointer;
  transition:background var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.bp-atalho:hover{background:rgb(var(--tinta) / .05); border-color:var(--hairline-strong)}
.bp-atalho:focus-visible{outline:2px solid var(--ring); outline-offset:2px}
.bp-atalho > svg{flex:0 0 auto; width:20px; height:20px; color:var(--muted)}
.bp-atalho-txt{flex:1 1 auto; min-width:0; font-size:var(--text-sm); color:var(--muted); line-height:var(--leading-snug)}
.bp-atalho-txt b{color:var(--text); font-weight:var(--weight-semibold)}
.bp-atalho-seta{flex:0 0 auto; width:18px !important; height:18px !important}
/* Sem internet a Biblioteca nao responde: o atalho sai, e a faixa de sem
   internet fica sozinha no alto. */
#scr-home:has(> .faixa-offline:not([hidden])) > .bp-atalho{display:none !important}


/* ============ 4. A FOLHA ============ */

#bpSheet{z-index:86}
.bp-folha-musica{
  display:flex; flex-direction:column; gap:2px; margin:0 0 var(--space-3);
  padding:var(--space-3) var(--space-4); border:1px solid var(--hairline);
  border-radius:var(--raio-controle); background:rgb(var(--tinta) / .03);
}
.bp-folha-musica b{font-weight:var(--weight-semibold); color:var(--text); overflow-wrap:anywhere}
.bp-folha-musica span{font-size:var(--text-xs); color:var(--muted)}
.bp-folha-musica span:empty{display:none}
#bpSheet .sheet-sub:empty{display:none}
.bp-custo{
  margin:0 0 var(--space-3); padding-left:var(--space-3); border-left:2px solid var(--hairline-strong);
  font-size:var(--text-sm); color:var(--text); line-height:var(--leading-snug);
}
#bpSheet .btn.cheio:first-of-type{margin-top:0}


/* ============ 5. MONITOR (>= 1024 px) ============ */
@media (min-width:1024px){
  #scr-bibpub > .header{display:none}
  #app > #scr-bibpub.active > .bp{grid-column:1 / -1}
  .bp{max-width:1040px; gap:var(--space-5)}
  .bp-topo .h-title{font-size:clamp(36px, 3vw, 56px)}
  .bp-busca-grande{max-width:760px}
  .bp-busca-grande .field{min-height:52px; font-size:var(--text-md)}
  .bp-destaques{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-8)}
  .bp-resultados, .bp-vazio, .bp-erro, .bp-nota{max-width:760px}
  .bp-vazio{align-self:flex-start; width:100%}

  /* A folha vira cartao no meio da tela: uma pergunta de 520 px, e nao uma
     faixa de borda a borda com o botao a mil pixels do titulo. */
  #bpSheet{justify-content:center; align-items:center}
  #bpSheet .sheet-card{
    max-width:520px; border:1px solid var(--hairline-strong); border-radius:var(--raio-folha);
    padding-bottom:var(--space-6);
  }

  #app > #scr-create.active > #criarBib{grid-column:1 / -1}
  #criarBib .bp-busca{max-width:520px}

  /* Na home a grade tem duas linhas (saudacao e listas). Com o atalho a vista
     ela ganha uma no meio, como a faixa de sem internet (biblioteca.css). */
  #app > #scr-home.active:has(> .bp-atalho:not([hidden])){grid-template-rows:auto auto minmax(0,1fr)}
  #app > #scr-home.active > .bp-atalho{grid-column:1 / -1; grid-row:2; max-width:640px; margin:0}
  #app > #scr-home.active:has(> .bp-atalho:not([hidden])) > #cardListas{grid-row:3}
}

@media (prefers-reduced-motion:reduce){
  .bp-osso i{animation:none}
  .bp-atalho{transition:none}
}