/* Biblioteca de hooks e descrições. Mesma linguagem do editor: acromática, acento único var(--accent) só na lacuna marcada e no botão de salvar, raio máximo 5px, sem gradiente nem sombra difusa grande. Todo valor vem de tokens.css. */ .modal.lib { width: min(920px, 92vw); max-width: none; padding: 0; max-height: 86vh; } /* O display só existe quando o diálogo está aberto. Solto, ele vencia a regra do navegador que esconde dialog:not([open]) — toda regra de autor vence a do agente — e o pop-up fechado ficava desenhado no fim do , esticando a página e criando uma segunda barra de rolagem. */ .modal.lib[open] { display: flex; flex-direction: column; } .lib-head { display: flex; align-items: center; gap: var(--s-5); padding: var(--s-5) var(--s-6); border-bottom: 1px solid var(--line); } .lib-head h2 { margin: 0; font-size: 14px; } .lib-head .modal-x { margin-left: auto; } .lib-tabs { display: flex; gap: 2px; padding: 3px; background: var(--e1); border: 1px solid var(--line); border-radius: var(--r-md); } .lib-tabs button { height: 24px; padding: 0 14px; background: transparent; border: 1px solid transparent; border-radius: var(--r-sm); color: var(--ink-soft); font: inherit; font-size: 12px; cursor: pointer; } .lib-tabs button.on { background: var(--e2); border-color: var(--line-strong); color: var(--ink); font-weight: 600; } /* duas colunas: formulário à esquerda, o que já está no banco à direita */ .lib-pane { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); padding: var(--s-6); /* O painel ocupa o que sobra da altura do diálogo e a lista rola por dentro. Antes a lista tinha max-height em vh, que não conversava com o max-height do