/* Contents page set like a printed فهرس: title, dotted leader, page number. */

.contents {
  max-inline-size: 46rem;
  margin-inline: auto;
  padding: var(--space-8) var(--space-5) 0;
}
.contents__header {
  text-align: center;
  margin-block-end: var(--space-6);
}
.contents__heading {
  font-size: var(--step-5);
}
.contents__header .divider {
  max-inline-size: 16rem;
  margin-inline: auto;
}
.contents__intro {
  max-inline-size: 34rem;
  margin-inline: auto;
  color: var(--color-ink-soft);
  font-size: var(--step-0);
}

.contents__list {
  list-style: none;
}
.contents__list[data-depth='0'] > .contents__item {
  padding-block: var(--space-3);
  border-block-end: var(--border-hair) solid var(--color-rule);
}
.contents__list[data-depth='0'] > .contents__item:first-child {
  border-block-start: var(--border-hair) solid var(--color-rule);
}
.contents__list[data-depth='1'],
.contents__list[data-depth='2'] {
  margin-block-start: var(--space-1);
  padding-inline-start: var(--space-6);
  font-size: var(--step-0);
}

.contents__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.contents__title {
  color: var(--color-ink);
  text-decoration: none;
  font-weight: var(--weight-bold);
}
[data-depth='1'] .contents__title,
[data-depth='2'] .contents__title {
  font-weight: var(--weight-regular);
}
a.contents__title:hover {
  color: var(--color-accent);
  text-decoration: underline;
}
.contents__row--soon .contents__title {
  color: var(--color-muted);
}
.contents__leader {
  flex: 1;
  min-inline-size: var(--space-5);
  border-block-end: 2px dotted var(--color-rule-strong);
  transform: translateY(-0.35em);
}
.contents__page {
  flex: none;
  color: var(--color-muted);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.contents__page:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

@media (max-width: 40em) {
  .contents {
    padding-block-start: var(--space-6);
    padding-inline: var(--space-4);
  }
  .contents__heading {
    font-size: var(--step-4);
  }
  .contents__list[data-depth='1'],
  .contents__list[data-depth='2'] {
    padding-inline-start: var(--space-4);
  }
}