/* ============================================================================
   The shared-library catalogue (library.html, de/library.html).

   The rows are generated by tools/gen-library-page.mjs, so the class names here
   are a contract with that script: rename one and the catalogue loses its
   styling silently, because nothing else on the site uses these.

   Composers are <details> so a 500-row page opens as a readable index rather
   than a wall — no JavaScript, keyboard-accessible, and still findable with
   Ctrl+F once opened.
============================================================================ */

.sf-lib__group { margin-top: var(--sf-s-9); }
.sf-lib__group > h2 {
  font-family: var(--sf-font-display);
  font-size: 26px; font-weight: 500; letter-spacing: -0.01em;
  line-height: 1.2;
  scroll-margin-top: 96px;          /* clear of the sticky header */
}
.sf-lib__note {
  margin-top: var(--sf-s-2);
  color: var(--sf-on-surface-variant);
  font-size: 14px; line-height: 1.55;
}

.sf-lib__composer {
  border-bottom: 1px solid var(--sf-outline-variant);
}
.sf-lib__group > .sf-lib__composer:first-of-type {
  border-top: 1px solid var(--sf-outline-variant);
  margin-top: var(--sf-s-5);
}
.sf-lib__composer > summary {
  display: flex; align-items: baseline; gap: var(--sf-s-3);
  padding: var(--sf-s-4) 0;
  cursor: pointer;
  list-style: none;
  color: var(--sf-on-surface);
  font-size: 16px; font-weight: 600;
}
.sf-lib__composer > summary::-webkit-details-marker { display: none; }
.sf-lib__composer > summary:hover { color: var(--sf-primary); }
.sf-lib__composer > summary:focus-visible {
  outline: 2px solid var(--sf-primary);
  outline-offset: 4px;
  border-radius: var(--sf-r-xs);
}
/* The same chevron the FAQ uses, so an accordion behaves the way this site's
   accordions already do. */
.sf-lib__composer > summary::after {
  content: "";
  flex: none;
  width: 9px; height: 9px;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transform-origin: 60% 60%;
  opacity: 0.55;
  transition: transform var(--sf-dur-2) var(--sf-ease-out);
}
.sf-lib__composer[open] > summary::after { transform: rotate(-135deg); }
.sf-lib__composer[open] > summary { color: var(--sf-primary); }

.sf-lib__count {
  font-size: 12px; font-weight: 500;
  color: var(--sf-on-surface-variant);
}

.sf-lib__list {
  list-style: none;
  margin: 0; padding: 0 0 var(--sf-s-5) 0;
  display: flex; flex-direction: column; gap: var(--sf-s-2);
}
.sf-lib__list li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sf-s-2);
  font-size: 15px; line-height: 1.5;
  color: var(--sf-on-surface-variant);
}
.sf-lib__title { color: var(--sf-on-surface); }
.sf-lib__meta { font-size: 13px; }
.sf-lib__lic {
  font: 600 11px/1 var(--sf-font-ui);
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 4px 8px; border-radius: var(--sf-r-full);
  background: color-mix(in oklch, var(--sf-on-surface-variant) 12%, transparent);
  color: var(--sf-on-surface-variant);
}
/* A CC-BY credit is a licence condition, not a footnote: it stays on the row,
   readable, and is never truncated. */
.sf-lib__credit {
  flex-basis: 100%;
  font-size: 12px; line-height: 1.45;
  color: var(--sf-on-surface-variant);
}