/* ==========================================================================
   biblioteca.css — página da Biblioteca .brain/ui

   A página é um catálogo de peças, não uma landing: um trilho de categorias
   à esquerda, seções nomeadas à direita e cada componente exposto numa
   bancada (o fundo pontilhado) para que peças transparentes também se leiam
   como objeto. Toda a chrome carrega informação — contagem por categoria,
   número de variações por peça, nome do arquivo no painel de código.

   Depende de css/style.css + css/kit/tokens.css + base.css + componentes.css
   ========================================================================== */
:root{
  --panel:#0b101c;          /* nesta página os painéis são opacos */
  --topo-h:68px;
}
body{min-height:100vh}
body::before{content:"";position:fixed;inset:0;z-index:-1;
  background:radial-gradient(60vmax 60vmax at -10% -10%,rgba(79,140,255,.15),transparent 60%),
             radial-gradient(55vmax 55vmax at 110% 110%,rgba(45,212,191,.12),transparent 60%)}

/* ---------- cabeçalho ---------- */
.top{position:sticky;top:0;z-index:30;display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;
  padding:12px 4vw;background:rgba(5,7,13,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top .logos{--logo-h:24px;flex:none}
.top__id{display:flex;flex-direction:column;gap:1px;min-width:0}
.top__id h1{margin:0;font-family:var(--fd);font-size:19px;font-weight:700;letter-spacing:-.015em;white-space:nowrap}
.top__id h1 em{font-style:normal;color:var(--accent2);font-family:var(--fm);font-size:15px;font-weight:400}
.top__id small{font-family:var(--fm);font-size:11px;color:var(--muted)}

.busca{flex:1 1 280px;position:relative;display:flex;align-items:center;max-width:460px}
.busca input{width:100%;height:38px;padding:0 44px 0 38px;border:1px solid var(--line);border-radius:10px;
  background:var(--panel);color:var(--text);font:14px var(--fb)}
.busca input::placeholder{color:var(--muted)}
.busca input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,140,255,.22)}
.busca svg{position:absolute;left:13px;width:15px;height:15px;color:var(--muted);pointer-events:none}
.busca__tecla{position:absolute;right:10px;display:grid;place-items:center;width:20px;height:20px;
  border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;
  color:var(--muted);font:600 11px var(--fm);pointer-events:none;transition:opacity .15s}
.busca input:focus~.busca__tecla,.busca input:not(:placeholder-shown)~.busca__tecla{opacity:0}

.tools{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.tbtn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border:1px solid var(--line);
  border-radius:10px;background:var(--panel);color:inherit;text-decoration:none;font-weight:600;font-size:13px;
  transition:background .2s,border-color .2s,color .2s}
.tbtn:hover{background:rgba(232,236,245,.07);border-color:rgba(232,236,245,.24)}
.tbtn--primary{background:var(--accent);border-color:var(--accent);color:#05070d}
.tbtn--primary:hover{background:#6ea0ff;border-color:#6ea0ff}
.tbtn--home{color:var(--muted)}
.tbtn--home:hover{color:var(--text)}

/* ---------- palco: trilho + galeria ---------- */
.palco{display:grid;grid-template-columns:216px minmax(0,1fr);gap:32px;padding:0 4vw 80px;align-items:start}

.rail{position:sticky;top:calc(var(--topo-h) + 20px);display:flex;flex-direction:column;gap:22px;padding-top:26px}
.rail__nav{display:flex;flex-direction:column;gap:2px}
.chip{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  height:34px;padding:0 10px 0 13px;border:0;border-radius:8px;background:none;color:var(--muted);
  font:600 13px var(--fb);text-align:left;transition:background .18s,color .18s}
.chip i{font:400 11px var(--fm);font-style:normal;opacity:.65}
.chip:hover{background:rgba(232,236,245,.05);color:var(--text)}
.chip.is-on{background:rgba(79,140,255,.13);color:var(--text)}
.chip.is-on::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--accent2)}
.chip.is-on i{color:var(--accent2);opacity:1}
.rail__nota{margin:0;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:12px;line-height:1.6}
.rail__nota code{font-family:var(--fm);font-size:11px;color:var(--accent2)}

.gallery{min-width:0;padding-top:26px}
.contagem{margin:0;font-family:var(--fm);font-size:11.5px;color:var(--muted)}

/* ---------- seções ---------- */
.cat{margin-top:8px}
.cat[hidden]{display:none}
.cat__h{display:flex;align-items:baseline;gap:14px;margin:30px 0 14px;
  font-family:var(--fd);font-size:15px;font-weight:700;letter-spacing:.005em}
.cat__h i{font:400 11px var(--fm);font-style:normal;color:var(--muted);white-space:nowrap}
.cat__h::after{content:"";flex:1;height:1px;background:var(--line)}
.cat__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));grid-auto-flow:dense;gap:16px;align-items:start}

/* ---------- peça ---------- */
.tile{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;
  background:var(--panel);transition:border-color .22s,box-shadow .22s}
.tile:hover{border-color:rgba(79,140,255,.4);box-shadow:0 18px 44px rgba(0,0,0,.42)}
/* qualquer peça com popover aberto sobe acima das vizinhas */
.tile:hover,.tile:focus-within,.tile:has(.is-open){z-index:5}
.tile[hidden]{display:none}
.tile--wide{grid-column:span 2}

/* a bancada: fundo pontilhado que dá corpo a peças transparentes */
.tile__stage{display:flex;align-items:center;justify-content:center;padding:24px 22px;min-height:198px;
  border-bottom:1px solid var(--line);border-radius:13px 13px 0 0;background-color:var(--k-bg);
  background-image:radial-gradient(color-mix(in srgb,var(--k-muted) 15%,transparent) 1px,transparent 1px);
  background-size:19px 19px;background-position:-1px -1px}
.tile__stage .k-scope{width:100%;background:transparent}

.tile__foot{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:14px 16px 15px}
.tile__meta{min-width:0}
.tile__meta b{display:block;margin-bottom:3px;font-family:var(--fd);font-size:15px;letter-spacing:-.005em}
.tile__meta p{margin:0;max-width:54ch;color:var(--muted);font-size:12.5px;line-height:1.55}
.tile__tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:9px}
.tile__tags span{padding:2px 7px;border-radius:5px;background:rgba(45,212,191,.09);
  color:var(--accent2);font:400 10.5px var(--fm)}
.tile__side{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none}
.tile__count{padding:2px 8px;border:1px solid rgba(245,183,75,.3);border-radius:999px;
  background:rgba(245,183,75,.1);color:var(--warn);font:600 10.5px var(--fm);white-space:nowrap}
.tile__code{height:34px;padding:0 13px;border-radius:9px;border:1px solid rgba(232,236,245,.2);
  background:rgba(232,236,245,.05);font-weight:600;font-size:12.5px;transition:background .18s,color .18s,border-color .18s}
.tile__code:hover{background:var(--accent);border-color:var(--accent);color:#05070d}

/* ---------- nada encontrado ---------- */
.nada{padding:64px 20px;text-align:center;color:var(--muted)}
.nada h3{margin:0 0 6px;font-family:var(--fd);font-size:17px;color:var(--text)}
.nada p{margin:0;font-size:13.5px}
.nada button{border:0;background:none;color:var(--accent2);font:inherit;font-weight:600;
  text-decoration:underline;text-underline-offset:3px;padding:0}

/* ---------- gaveta de código ---------- */
.scrim{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.is-open{opacity:1;pointer-events:auto}
/* A gaveta fica estacionada fora da tela com translateX(100%), e isso alargaria
   o documento (scroll horizontal no celular). Este invólucro fixo recorta o
   excesso; `hidden` aqui é seguro porque ele não rola nada. */
.gaveta-area{position:fixed;inset:0;z-index:50;overflow:hidden;pointer-events:none}
.drawer{position:absolute;top:0;right:0;bottom:0;width:min(780px,100vw);display:flex;flex-direction:column;
  pointer-events:auto;background:#070a13;border-left:1px solid var(--line);box-shadow:-30px 0 80px rgba(0,0,0,.6);
  transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.drawer.is-open{transform:none}
.drawer__head{display:flex;align-items:flex-start;gap:12px;padding:16px 20px 14px;border-bottom:1px solid var(--line)}
.drawer__titulo{flex:1;min-width:0}
.drawer__titulo h2{margin:0 0 2px;font-family:var(--fd);font-size:17px}
.drawer__titulo code{font-family:var(--fm);font-size:11px;color:var(--accent2);word-break:break-all}
.drawer__x{flex:none;width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:transparent;font-size:18px;line-height:1}
.drawer__x:hover{background:rgba(232,236,245,.07)}
.drawer__tabs{display:flex;gap:4px;padding:10px 20px 0;border-bottom:1px solid var(--line)}
.drawer__tabs button{padding:8px 12px;border:0;border-bottom:2px solid transparent;background:none;
  color:var(--muted);font-weight:600;font-size:13px;margin-bottom:-1px}
.drawer__tabs button:hover{color:var(--text)}
.drawer__tabs button.is-on{color:var(--accent2);border-color:var(--accent2)}
.drawer__tools{display:flex;flex-wrap:wrap;gap:8px;padding:12px 20px;border-bottom:1px solid var(--line)}
/* sem ligaduras: a JetBrains Mono transforma "-->" em "—>" e o comentário
   copiado passa a parecer quebrado */
.drawer pre{flex:1;margin:0;padding:18px 20px;overflow:auto;
  font:12.5px/1.6 var(--fm);font-variant-ligatures:none;
  color:#dfe5f3;white-space:pre-wrap;word-break:break-word;tab-size:2}
.drawer__note{padding:11px 20px;border-top:1px solid var(--line);color:var(--muted);font-size:11.5px;line-height:1.55}
.drawer__note code{font-family:var(--fm);color:var(--accent2)}

.toast-ok{position:fixed;left:50%;bottom:24px;z-index:60;padding:10px 18px;border-radius:10px;
  background:var(--ok);color:#05070d;font-weight:700;font-size:13.5px;
  transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:.3s}
.toast-ok.show{opacity:1;transform:translate(-50%,0)}

/* ---------- responsivo ---------- */
@media (max-width:1080px){
  .palco{grid-template-columns:minmax(0,1fr);gap:0}
  /* min-width:0 nos dois: sem isso o trilho, como item de grid, cresce até
     caber todas as categorias e leva scroll horizontal para a página toda */
  .rail{position:sticky;top:var(--topo-h);z-index:20;min-width:0;padding:10px 0;gap:0;
    background:rgba(5,7,13,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  .rail__nav{flex-direction:row;gap:6px;min-width:0;overflow-x:auto;scrollbar-width:none;margin:0 -4vw;padding:0 4vw}
  .rail__nav::-webkit-scrollbar{display:none}
  .chip{width:auto;flex:none;height:32px;padding:0 13px;border:1px solid var(--line);border-radius:999px}
  .chip.is-on{border-color:var(--accent2)}
  .chip.is-on::before{display:none}
  .rail__nota{display:none}
  .gallery{padding-top:18px}
}
@media (max-width:760px){
  :root{--topo-h:0px}
  .top{position:static;gap:10px 14px}
  .top__id small{display:none}
  .tools{margin-left:0;width:100%}
  .tools .tbtn{flex:1 1 auto;justify-content:center}
  .rail{position:static}
  /* minmax(0,1fr) e não 1fr: um 1fr tem mínimo automático = min-content, então
     a peça mais larga da seção esticaria a coluna e a página inteira */
  .cat__grid{grid-template-columns:minmax(0,1fr)}
  .tile{min-width:0}
  /* No celular a bancada recorta o que a peça tiver de mais largo (tooltip,
     linha de etapas). Os popovers não se perdem: abaixo de 480px o .k-pop é
     position:fixed e sai como folha na base da tela. */
  .tile__stage{overflow:hidden}
  .tile--wide{grid-column:auto}
  .tile__foot{flex-direction:column}
  .tile__side{flex-direction:row-reverse;align-items:center;align-self:stretch;justify-content:flex-end}
}