/* Library surfaces use the site's existing type, colors, and card borders. */
.library-hero { padding-bottom: 1.5rem; }
.library-section { padding-top: 1.5rem; }
.library-nav, .library-actions, .library-toolbar, .library-tabs { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; }
.library-nav { margin-top: 1.5rem; gap: 1.3rem; }
.library-nav a { font-size: .9rem; }
.library-toolbar { justify-content: space-between; margin-bottom: 1.5rem; }
.library-tabs { gap: .2rem; padding: .25rem; border: 1px solid var(--line); border-radius: .65rem; background: var(--card); }
.library-tabs button { border: 0; border-radius: .4rem; padding: .65rem .85rem; background: transparent; color: var(--ink-soft); font: inherit; font-size: .85rem; cursor: pointer; }
.library-tabs button[aria-pressed="true"] { background: var(--moss); color: white; }
.library-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem; }
.library-card { border: 1px solid var(--line); border-radius: .8rem; background: var(--card); padding: 1.3rem; min-width: 0; overflow-wrap: anywhere; }
.library-card h2 { font-size: 1.2rem; margin: .4rem 0 .7rem; }
.library-card h2 a { color: var(--ink); text-decoration: none; }
.library-card p { font-size: .9rem; }
.library-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.library-tags span { padding: .15rem .5rem; background: var(--paper); border: 1px solid var(--line); border-radius: 1rem; font-size: .75rem; }
.library-usage { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1.5rem; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: .65rem; font-size: .85rem; background: var(--card); }
.library-usage label { min-width: min(100%, 20rem); }
.library-usage meter { display: block; width: 100%; height: .7rem; margin-top: .5rem; accent-color: var(--moss); }
.library-usage span { color: var(--ink-soft); }
.library-editor, .library-detail { display: grid; grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); gap: 1.5rem; align-items: start; }
.library-detail > *, .library-editor > * { min-width: 0; }
.library-detail .account-panel + .account-panel { margin-top: 1.2rem; }
.library-editor label, .library-form label, .library-detail form label, .library-card label, .library-inline label { display: grid; gap: .35rem; margin-bottom: 1rem; font-size: .9rem; font-weight: 600; }
.library-editor input:not([type="checkbox"]), .library-editor select, .library-editor textarea, .library-form input, .library-form select, .library-detail input, .library-detail select, .library-detail textarea, .library-card select, .library-inline input { width: 100%; min-height: 2.7rem; border: 1px solid var(--line); border-radius: .45rem; padding: .6rem .7rem; font: inherit; font-weight: 400; color: var(--ink); background: var(--paper-2); }
.library-editor textarea { resize: vertical; font: .9rem/1.6 ui-monospace, monospace; }
.library-field-row { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; }
.library-editor fieldset { border: 1px solid var(--line); border-radius: .45rem; margin: 1rem 0; padding: .8rem; }
.library-editor label.library-check { display: flex; align-items: center; gap: .5rem; font-weight: 400; margin-bottom: .4rem; }
.library-editor input[type="file"] { font-size: .8rem; }
.library-preview { overflow-wrap: anywhere; border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 1rem; }
.library-preview p { white-space: pre-wrap; }
.library-preview pre, .connect-guide pre { max-width: 100%; overflow: auto; background: var(--paper); border: 1px solid var(--line); border-radius: .5rem; padding: 1rem; font-size: .8rem; }
.library-preview h2 { font-size: 1.3rem; }
.library-preview h3 { font-size: 1.1rem; }
.library-files, .library-collection-list, .library-connection-list { list-style: none; padding: 0; }
.library-files li, .library-collection-list li { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; padding: .65rem 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.library-files span, .library-collection-list span { font-size: .8rem; color: var(--ink-soft); }
.library-connection-list li { padding: 1rem 0; border-top: 1px solid var(--line); }
.library-connection-list h3 { font-size: 1rem; margin: 0; }
.library-connection-list p { margin: .5rem 0; }
.library-inline { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-top: 1rem; }
.library-inline label { flex: 1; margin: 0; }
.library-error, .library-danger h2 { color: var(--terracotta-deep); }
.library-conflict, .library-token-secret { background: var(--paper); padding: 1rem; border: 1px solid var(--terracotta); border-radius: .5rem; margin: 1rem 0; }
.library-token-secret textarea { width: 100%; margin-bottom: .8rem; resize: none; font: .85rem/1.5 ui-monospace, monospace; }
.library-credit { font-size: .85rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.library-shared { max-width: 54rem; margin: 0 auto; }
.library-report { margin-top: 2rem; }
.library-report form { display: grid; gap: .7rem; margin-top: 1rem; }
.library-report label { display: grid; }
.library-actions { margin-block: 1rem; }
.library-actions .button { font-size: .8rem; }
.library-empty { grid-column: 1 / -1; }
.library-form button { margin-bottom: .5rem; }
.library-form :disabled, .library-editor :disabled, .library-actions :disabled { opacity: .6; cursor: wait; }
[data-library-app] [hidden] { display: none !important; }
[data-upload-progress] { width: 100%; accent-color: var(--moss); }
.connect-layout { display: grid; grid-template-columns: 13rem minmax(0, 48rem); gap: 3rem; }
.connect-toc { display: flex; flex-direction: column; gap: .7rem; align-self: start; position: sticky; top: 1rem; font-size: .9rem; }
.connect-guide section { scroll-margin-top: 2rem; border-bottom: 1px solid var(--line); padding: 0 0 1.5rem; margin-bottom: 2rem; }
.connect-guide h2 { margin-top: 0; }
.connect-guide code { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .library-editor, .library-detail, .connect-layout { grid-template-columns: 1fr; }
  .connect-toc { position: static; flex-direction: row; flex-wrap: wrap; }
  .library-field-row { grid-template-columns: 1fr; gap: 0; }
  .library-toolbar { align-items: stretch; }
  .library-tabs { width: 100%; }
  .library-tabs button { flex: 1 1 40%; }
}