/* Sources: every page keeps its references in one drawer at the bottom, a small pill that opens on click.
   Panels drawn by script use the same drawer, smaller and without the grid */
.sources { margin: 40px 0 0 }
.sources > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 0 12px 0 13px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 999px; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--soft); cursor: pointer; list-style: none; user-select: none; transition: color var(--duration-quick, .15s) var(--ease-smooth-out, ease), border-color var(--duration-quick, .15s) var(--ease-smooth-out, ease) }
.sources > summary::-webkit-details-marker { display: none }
/* a plus that turns to a cross when the drawer is open */
.sources > summary::after { content: '+'; font: 400 14px/1 var(--mono); letter-spacing: 0; transition: transform var(--duration-fast, .25s) var(--ease-smooth-out, ease) }
.sources[open] > summary::after { transform: rotate(45deg) }
.sources > summary:hover, .sources[open] > summary { color: var(--ink); border-color: var(--ink) }
.sources > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px }
.sources .by { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px 36px; margin: 22px 0 0 }
.sources h3 { margin: 0 0 8px; font: 500 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--soft) }
.sources ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font: 400 11px/1.6 var(--mono); color: var(--soft) }
.sources li, .sources p { overflow-wrap: anywhere }
.sources a { color: var(--ink); text-underline-offset: 3px }
.sources p { margin: 14px 0 0; font: 400 11px/1.6 var(--mono); color: var(--soft) }
.sources p.checked { margin-top: 22px; max-width: 720px }
/* inside a panel: no gap above, a tighter list */
.sources:not(#sources) { margin: 14px 0 0 }
.sources:not(#sources) > summary { min-height: 26px; padding: 0 10px 0 11px }
.sources:not(#sources) ul { margin: 10px 0 0; gap: 5px }
.sources:not(#sources) > p:first-of-type { margin-top: 10px }
@media (max-width: 640px) {
  .sources { margin-top: 32px }
  .sources .by { grid-template-columns: minmax(0, 1fr); gap: 20px }
}
@media (prefers-reduced-motion: reduce) { .sources > summary, .sources > summary::after { transition: none } }