/* ═══════════════════════════════════════════════
   Content lists — tables and lists after the description
   of an article or a page (views/partials/content-lists.ejs).
   Site tokens only, so the dark theme needs no rules here.
   ═══════════════════════════════════════════════ */

.content-list { margin-top: 32px; scroll-margin-top: var(--scroll-offset); }

.content-list-title {
  font-size: 20px; font-weight: 700; color: var(--text-heading);
  margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid var(--border-light);
}
.content-list-title .hidden-badge { vertical-align: middle; margin-inline-start: 6px; }
.content-list-badges { margin-bottom: 10px; }

.content-list-intro { margin-bottom: 16px; }
.content-list-outro { margin-top: 16px; }
.content-list-intro > :last-child,
.content-list-outro > :last-child { margin-bottom: 0; }

/* ── Frame ── */
.content-list-scroll,
.content-list-items {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
}
/* The only element allowed to scroll sideways, for a table too wide for the page. */
.content-list-scroll { overflow-x: auto; }
.content-list.is-hidden .content-list-scroll,
.content-list.is-hidden .content-list-items { border-style: dashed; border-color: var(--border-accent); }

/* ── Table ── */
.content-list-table {
  width: 100%; border-collapse: collapse;
  font-size: var(--font-size-rich); line-height: 1.6; color: var(--text-primary);
}
/* One or two columns share the width equally, so a narrow screen does not squeeze one
   of them and filtering never shifts the columns. */
.content-list-table:not(.cl-stack) { table-layout: fixed; }
.content-list-table th {
  padding: 12px 16px; text-align: start; vertical-align: bottom;
  background: var(--bg-accent-soft); border-bottom: 1px solid var(--border-light);
  font-size: 15px; font-weight: 700; color: var(--text-heading);
}
/* Separators on the top edge: they collapse into the header's border above the first
   visible row, and the last row needs none against the frame, however the filter hides rows. */
.content-list-table td {
  padding: 8px 16px; vertical-align: top;
  border-top: 1px solid var(--bg-accent-soft);
  overflow-wrap: break-word;
}
.content-list-table tbody tr { transition: background var(--transition); }
.content-list-table tbody tr:hover { background: var(--bg-accent-soft); }

/* ── List ── */
.content-list-items { list-style: none; overflow: hidden; }
.content-list-items li {
  padding: 8px 16px; margin-top: -1px;
  border-top: 1px solid var(--bg-accent-soft);
  font-size: var(--font-size-rich); line-height: 1.6; color: var(--text-primary);
  overflow-wrap: anywhere;
  transition: background var(--transition);
}
.content-list-items li:hover { background: var(--bg-accent-soft); }
.content-list-items .cl-cell:first-child { font-weight: 600; }
.content-list-items .cl-cell + .cl-cell::before { content: '·'; margin-inline: 8px; color: var(--text-muted); font-weight: 400; }
.content-list-items .cl-cell:first-child + .cl-cell::before { content: '—'; }

/* ── Cell content ── */
.content-list-table a:hover,
.content-list-items a:hover { background: rgba(160,88,36,0.1); border-radius: 3px; }
.content-list .cl-note { font-size: 14px; font-weight: 400; color: var(--text-muted); }
.content-list .cl-song-hidden { text-decoration: underline dashed; text-underline-offset: 3px; }
.content-list-table tr.is-hidden,
.content-list-items li.is-hidden { opacity: 0.5; }

/* ── Filter (content-lists.js) ── */
.content-list-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 10px; }
.content-list-toolbar .lazy-list-filter { flex: 1 1 220px; margin-bottom: 0; }
.content-list-toolbar .lazy-list-counter { margin-bottom: 0; }
.content-list-table tr.content-list-empty:hover { background: none; }
.content-list-empty td,
li.content-list-empty { padding: 16px; text-align: center; color: var(--text-muted); font-weight: 400; }
li.content-list-empty:hover { background: none; }

@media (max-width: 768px) {
  .content-list { margin-top: 24px; }
  .content-list-title { font-size: 18px; margin-bottom: 12px; }
  .content-list-table th { padding: 10px; }
  .content-list-table td,
  .content-list-items li { padding: 6px 10px; }

  /* More than two columns: one card per row, each cell labelled with its column. */
  .cl-stack, .cl-stack tbody, .cl-stack tr, .cl-stack td { display: block; }
  .cl-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cl-stack tr { padding: 8px 12px; margin-top: -1px; border-top: 1px solid var(--border-light); }
  .cl-stack td { padding: 2px 0; border: 0; }
  .cl-stack td:empty { display: none; }
  .cl-stack td:first-child { font-weight: 600; }
  .cl-stack td::before { content: attr(data-label) ':'; margin-inline-end: 6px; font-size: 14px; font-weight: 700; color: var(--text-heading); }
  .cl-stack .content-list-empty td { padding: 12px 0; }
  .cl-stack .content-list-empty td::before { content: none; }
}

@media print {
  .content-list-toolbar { display: none; }
  .content-list-scroll { overflow: visible; }
}