/* ===================================================================
   Tables of contents (title/unit listings) and the notes page's own list.
   ================================================================== */

.toc ul { list-style: none; margin: 0 0 2rem; padding: 0; }
.toc li { border-bottom: 1px solid var(--rule); }
/* Scoped to the list rows: a bare ".toc a" also caught the breadcrumb links,
   turning each into a flex block so the trail stacked vertically. */
.toc li a {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  padding: var(--space-6) .2rem;
  text-decoration: none;
}
.toc li a:hover { background: var(--accent-soft); }
.toc .num { color: var(--accent); font-weight: 620; min-width: 4.5rem; }
.toc .name { flex: 1; }
/* The right-hand column of a listing row: how much a release or a title holds,
   and which sections a chapter or subchapter holds. */
.toc .count, .toc .range {
  color: var(--faint);
  font-family: var(--sans);
  font-size: var(--text-xs);
}
.toc .range { white-space: nowrap; }
.toc h2 {
  font-family: var(--sans);
  font-size: var(--text-xs);
  letter-spacing: .08em;
  color: var(--faint);
  margin: 2rem 0 var(--space-4);
}

/* ------------------------------------------------------- browse-by-date (releases) */

.toc .lede {
  font-family: var(--sans);
  font-size: var(--text-sm);
  color: var(--muted);
  max-width: 36rem;
  margin: 0 0 2rem;
}

.toc .jump-card { padding: var(--space-8); margin-bottom: 2.6rem; }
.toc .jump-row { display: flex; gap: var(--space-5); font-family: var(--sans); margin-top: var(--space-6); }
.toc .jump-row input {
  flex: 1;
  min-width: 0;
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-sm);
}
.toc .jump-row button {
  padding: var(--space-4) var(--space-8);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--bg);
  font-family: var(--sans);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}

.toc h2.group {
  display: flex;
  justify-content: space-between;
  margin: 2.2rem 0 var(--space-4);
}
.toc h2.group .range { font-weight: 500; letter-spacing: normal; text-transform: none; }

.toc ul.dates { margin: 0 0 1rem; }
.toc .date-row a { gap: var(--space-6); }
.toc .date-main {
  font-family: var(--sans);
  font-weight: 650;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  min-width: 11rem;
}
.toc .date-row a:hover .date-main { color: var(--accent); }
.toc .date-sub { flex: 1; }
.toc .date-flag {
  font-family: var(--sans);
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: .2em .6em;
  border-radius: 999px;
  background: var(--accent);
  color: #ffffff;
}

/* The folded decade groups reuse `.history-collapsed-group` (history.css)
   wholesale for the disclosure chrome; this is only the list padding that
   class's own nested list (`.history-items-nested`) supplies and `ul.dates`
   does not share a class with. */
.history-collapsed-group .dates { margin: 0; padding: 0 var(--space-5) var(--space-5); }

.releases-explainer {
  margin: 0 0 2.5rem;
  max-width: 38rem;
}
.releases-explainer h2 {
  font-family: var(--sans);
  font-size: var(--text-sm);
  font-weight: 650;
  color: var(--ink);
  letter-spacing: normal;
  text-transform: none;
  margin: 0 0 var(--space-4);
}
.releases-explainer p {
  font-family: var(--sans);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 var(--space-4);
}
.releases-explainer p:last-child {
  margin-bottom: 0;
}
.releases-explainer a {
  color: var(--accent);
  text-decoration: underline;
}
.releases-explainer strong {
  color: var(--ink);
  font-weight: 600;
}

.notes-page h2 {
  font-family: var(--sans);
  font-size: var(--text-xs);
  letter-spacing: .08em;
  color: var(--faint);
}

.notes-block {
  margin-top: 3rem;
  border-top: 1px solid var(--rule);
  padding-top: var(--space-8);
  font-size: .93rem;
  color: var(--muted);
}
.notes-block summary {
  cursor: pointer;
  font-family: var(--sans);
  font-size: var(--text-xs);
  color: var(--faint);
}
.notes-block h3 {
  font-family: var(--sans);
  font-size: var(--text-sm);
  color: var(--ink);
  margin: 1.5rem 0 var(--space-3);
}

.note-group { margin-bottom: 2rem; }
.note-group h2 a { color: var(--accent); text-decoration: none; }
.empty { color: var(--faint); }