/* ALOS · Biblioteca — barra de estantes (porta única de leitura). */
.alb-shelf{max-width:1180px;margin:0 auto 22px;padding:18px 20px 16px;background:var(--card);
  border:1px solid var(--border);border-radius:16px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.alb-shelf-head{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.alb-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--primary)}
.alb-eyebrow svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.9}
.alb-shelf-head p{margin:0;font-size:13px;line-height:1.55;color:var(--muted);max-width:76ch}

/* Uma coluna por estante, quantas houver (são quatro desde a estante Em vídeo). */
.alb-shelf-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px}
.alb-tab{display:flex;align-items:center;gap:11px;width:100%;padding:13px 14px;text-align:left;
  background:var(--bg2);border:1px solid var(--border);border-radius:12px;cursor:pointer;
  transition:border-color .16s var(--ease),background .16s var(--ease),transform .16s var(--ease)}
.alb-tab:hover{background:var(--card-hover);border-color:var(--primary);transform:translateY(-1px)}
.alb-tab:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.alb-tab>i{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;
  background:var(--accent-soft);color:var(--primary)}
.alb-tab>i svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8}
.alb-tab>span{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.alb-tab>span>b{font-size:14px;font-weight:750;color:var(--text-bright);line-height:1.25}
.alb-tab>span>small{font-size:11.5px;line-height:1.4;color:var(--muted)}
.alb-tab>em{flex:0 0 auto;align-self:flex-start;font-style:normal;font-size:10.5px;font-weight:750;
  padding:3px 7px;border-radius:999px;background:var(--card);border:1px solid var(--border);color:var(--muted)}

/* Sub-nível da estante "Comece aqui": Playbook Geral e Manual. */
.alb-docs{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--border)}
/* --muted2 aqui dava 3,3:1 no claro (AA pede 4,5 para texto de 10,5px). --muted
   passa nos dois temas (4,76 e 6,17:1) e continua discreto ao lado dos botoes. */
.alb-docs-lb{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.alb-doc{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;font-size:12.5px;font-weight:700;
  color:var(--text-soft);background:var(--bg2);border:1px solid var(--border);border-radius:999px;cursor:pointer;
  transition:border-color .16s var(--ease),color .16s var(--ease),background .16s var(--ease)}
.alb-doc:hover{border-color:var(--primary);color:var(--primary)}
.alb-doc:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.alb-doc>em{font-style:normal;font-size:10.5px;font-weight:700;color:var(--muted)}
.alb-doc.active{background:var(--accent-soft);border-color:var(--primary);color:var(--primary)}
.alb-doc.active>em{color:var(--primary)}

.alb-tab.active{background:var(--accent-soft);border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
.alb-tab.active>i{background:var(--primary);color:var(--on-primary)}
/* Titulo e selo da estante ativa sao TINTA: token --primary-ink (solido nos dois
   temas). --primary-dim nao serve aqui — ele e a superficie SOLIDA de hover, nao
   tinta; o halo de foco mora em --primary-ring, que no escuro e lavagem de 14%. */
.alb-tab.active>span>b{color:var(--primary-ink)}
.alb-tab.active>span>small{color:var(--text-soft)}
.alb-tab.active>em{background:var(--card);border-color:var(--primary);color:var(--primary-ink)}

body.dark .alb-shelf{box-shadow:none}
body.dark .alb-tab.active>i{color:var(--navy)}

@media(max-width:1280px){
  .alb-shelf-tabs{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .alb-shelf-tabs{grid-template-columns:1fr}
  .alb-shelf{padding:15px 15px 13px;border-radius:14px;margin-bottom:18px}
  .alb-tab>span>small{font-size:11px}
  /* No celular a barra empilha e come a tela toda. A frase de abertura sai:
     a descricao de cada estante diz a mesma coisa, e o selo diz o tamanho. */
  .alb-shelf-head p{display:none}
  .alb-shelf-head{margin-bottom:11px}
  .alb-docs{margin-top:10px;padding-top:10px}
}