/* The template library's pages (generated by scripts/pack-library.mjs from library/src).
   A library utility, not a web page: compact, scannable, clickable (owner, 2026-09-03). */
.page--library { padding-top: var(--space-6); }
.library-head { max-width: 860px; margin-bottom: var(--space-8); }
.library-head h1 { margin: 0 0 var(--space-5); }
.library-head .lede { margin: 0 0 var(--space-4); color: var(--muted-2); }
.library-head .lede--how { color: var(--fg); }
.library-head .eyebrow { margin: 0 0 var(--space-3); }
.library-head .eyebrow a { color: inherit; text-decoration: none; }
.holds-line { margin: var(--space-2) 0 0; color: var(--muted); font: var(--text-2) var(--font-mono); }
.get { margin: var(--space-2) 0 0; color: var(--muted-2); font-size: var(--text-3); }

.kinds { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.kinds + .shelf { margin-top: var(--space-6); }
.chip { display: inline-flex; align-items: center; gap: var(--space-2); border: var(--edge) solid var(--line-2); border-radius: var(--radius-xs); background: var(--panel); color: var(--muted-2); padding: var(--space-1) var(--space-3); cursor: pointer; font: var(--text-2) var(--font-ui); }
.chip:hover { border-color: var(--kaki); }
.chip[aria-pressed='true'] { border-color: var(--kaki); background: var(--raise); color: var(--kaki); }
.chip i { font-style: normal; line-height: 1; }

.shelf { margin-bottom: var(--space-7); border-top: var(--edge) solid var(--line); }
.shelf h2 { margin: var(--space-4) 0 var(--space-2); font: var(--text-2) var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.row { cursor: default; display: grid; grid-template-columns: 1.6em minmax(160px, 220px) minmax(0, 1fr) auto auto; gap: var(--space-4); align-items: center; padding: var(--space-2) var(--space-2); border-bottom: var(--edge) solid var(--line); color: var(--fg); text-decoration: none; font-size: var(--text-3); }
.row i { font-style: normal; font-size: var(--text-4); line-height: 1; text-align: center; }
.row b { font-weight: 500; color: var(--fg-strong); }
.row .blurb { color: var(--muted-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .holds, .row .kinds { color: var(--muted); font: var(--text-1) var(--font-mono); white-space: nowrap; }
.row[hidden], .shelf[hidden] { display: none; }
@media (max-width: 800px) {
  .row { grid-template-columns: 1.6em minmax(0, 1fr); }
  .row .blurb { white-space: normal; grid-column: 2; }
  .row .holds, .row .kinds { grid-column: 2; }
}

.how { margin-top: var(--space-6); padding: var(--space-6); border-radius: var(--radius-md); background: var(--raise); }
.how h2 { margin: 0 0 var(--space-3); font-size: var(--text-4); }
.how p { max-width: var(--measure); color: var(--muted-2); margin: 0; font-size: var(--text-3); }

.part { margin: 0 0 var(--space-6); }
.part h2 { margin: 0 0 var(--space-3); font: var(--text-3) var(--font-mono); color: var(--kaki); }
.part pre { margin: 0; padding: var(--space-5); border-radius: var(--radius-sm); background: var(--bg-2); color: var(--fg); font: var(--text-2) / 1.5 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }