/* =========================================================================
   biblioteca.css — Fase 5. Depende de design-system.css.
   ========================================================================= */
.lib-wrap { padding-top: calc(var(--header-h) + 30px); padding-bottom: 70px; }

/* caixa de pergunta livre */
.lib-ask-box { padding: 22px; margin: 1.2rem 0 1.8rem; }
.lib-ask-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.lib-ask-row input { flex: 1; min-width: 220px; background: var(--bg-700); border: 1px solid var(--stroke-strong);
  color: var(--text); border-radius: var(--radius-pill); padding: .7rem 1.1rem; font-size: .95rem; }
.lib-ask-row input:focus { outline: none; border-color: var(--pdca-plan); }
.lib-suggest { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.lib-suggest .chip { cursor: pointer; transition: all .25s; }
.lib-suggest .chip:hover { border-color: var(--pdca-plan); color: var(--brand); }
#lib-answer:not(:empty) { margin-top: 1.2rem; display: grid; gap: .6rem; }
.lib-q { font-weight: 600; }
.lib-a { padding: .9rem 1.1rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--stroke); border-left: 3px solid var(--pdca-plan); line-height: 1.55; font-size: .92rem; }
.lib-typing { color: var(--text-dim); }

.lib-search-wrap { margin-bottom: 1.4rem; }
#lib-search { width: 100%; background: var(--bg-700); border: 1px solid var(--stroke-strong); color: var(--text);
  border-radius: var(--radius-pill); padding: .65rem 1.1rem; font-size: .92rem; }
#lib-search:focus { outline: none; border-color: var(--pdca-check); }

.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 18px; }
.lib-card { cursor: pointer; border-top: 3px solid var(--c); display: flex; flex-direction: column; gap: .5rem; }
.lib-card__ic { font-size: 2rem; }
.lib-card h4 { margin: 0; font-size: 1.05rem; }
.lib-card p { font-size: .84rem; margin: 0; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lib-card__more { font-size: .76rem; color: var(--c); opacity: 0; transition: opacity .3s; }
.lib-card:hover .lib-card__more { opacity: 1; }

/* modal verbete */
.lib-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px;
  background: rgba(4,9,18,.7); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); }
.lib-modal.is-open { opacity: 1; pointer-events: auto; }
.lib-modal__panel { width: min(620px,96vw); max-height: 90vh; overflow: auto; background: var(--bg-800);
  border: 1px solid var(--stroke); border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
  transform: translateY(14px) scale(.98); transition: transform .3s var(--ease); }
.lib-modal.is-open .lib-modal__panel { transform: none; }
.lib-modal__head { display: flex; align-items: center; gap: 1rem; padding: 22px; border-bottom: 1px solid var(--stroke); background: var(--grad-command); }
.lib-modal__head .ic { font-size: 2.4rem; }
.lib-modal__head h3 { margin: .2rem 0; font-size: 1.4rem; }
#lib-m-close { margin-left: auto; background: none; border: 0; color: var(--text-dim); font-size: 1.6rem; cursor: pointer; }
.lib-modal__body { padding: 22px; }
.lib-modal__body p { color: var(--text-soft); line-height: 1.6; }
.lib-modal__body h5 { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); margin: 1.2rem 0 .5rem; }
.lib-modal__body ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .4rem; color: var(--text); font-size: .92rem; }