/* library.css — the docs and learn shell. Loaded after /site.css on those pages only.
   It states the tokens import itself so the sheet is legible on its own and so a future page
   that links only this file still gets the three theme states. Colours come from tokens.css;
   this file defines none. */
@import url("/tokens.css");
.library-page{padding:clamp(40px,8vw,96px) 0}
.library-wrap{max-width:760px;margin:auto;padding:0 24px;min-width:0}
.library-main{inline-size:100%}
.library-layout{display:grid;grid-template-columns:minmax(200px,240px) minmax(0,1fr);gap:32px;align-items:start;max-width:1060px;margin:auto;padding:0 24px}
.library-layout>.library-wrap{padding:0}
.library-nav{display:flex;gap:18px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:48px}
.library-nav a{color:inherit}
.library-local ol{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:14px}
.library-local a{color:inherit;text-decoration:none}
.library-local a:hover{text-decoration:underline}
.library-local [aria-current="page"]{font-weight:600}
.library-index{list-style:none;padding:0;display:grid;gap:12px}
.library-card{border:1px solid var(--line);border-radius:var(--r-md);padding:16px}
.library-card a{display:grid;gap:6px;color:inherit;text-decoration:none}
.library-card span{color:var(--dim)}
.library-boundary{border-left:3px solid var(--brand-ink);padding:12px 16px;margin:20px 0}
.library-entry{line-height:1.7}
.library-entry li{margin:12px 0}
.library-faq{display:grid;gap:20px;margin:0}
.library-faq dt{font-weight:600}
.library-faq dd{margin:8px 0 0;color:var(--dim)}
.library-links{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0}
.library-links a{border:1px solid var(--line-2);border-radius:var(--r-xs);padding:8px 14px}
.library-evidence{border-top:1px solid var(--line);margin-top:32px;padding-top:16px}
.library-meta{color:var(--dim)}
.library-pager{display:flex;justify-content:space-between;margin-top:40px}
.breadcrumb{color:var(--dim)}
[data-library-search]{display:grid;gap:10px;margin-top:24px}
[data-library-search] label{font-weight:600}
[data-library-search] input{width:100%;min-height:48px;padding:0 16px;border:1px solid var(--line-2);border-radius:var(--r-in);background:var(--surface);color:inherit;font:inherit}
[data-library-search-state]{min-height:1.5em;margin:0;color:var(--dim);font-size:.9rem}
.library-results,[data-library-results]{list-style:none;padding:0;display:grid;gap:10px}
[data-library-results] a{display:grid;gap:4px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-in);color:inherit;text-decoration:none}
[data-library-results] span{color:var(--dim)}
[data-library-results][hidden],[data-library-more][hidden]{display:none!important}
.library-card small[data-status]{display:inline-flex;width:max-content;margin-top:10px;padding:3px 9px;border:1px solid var(--line);border-radius:var(--r-xs);color:var(--dim);font-size:.75rem}
html[data-page="learn"] .library-wrap,html[data-page="learn"] .ui-article,
html[data-page="learn-entry"] .library-wrap,html[data-page="learn-entry"] .ui-article{min-width:0;max-width:100%}
html[data-page="learn"] .ui-article,html[data-page="learn-entry"] .ui-article{overflow-wrap:anywhere}
html[data-page="learn"] .es-scroll,html[data-page="learn-entry"] .es-scroll{width:100%;max-width:100%;min-width:0;overflow-x:auto;contain:inline-size}
@media (max-width:760px){
  .library-layout{grid-template-columns:1fr;gap:24px}
}