/* The web manual: contents page, chapter layout, the building blocks chapters use (steps, callouts, notes). */

.manual-version {
  margin: var(--sp3) 0 0;
  color: var(--text-faint);
  font-weight: 700;
}

.manual-indexSection {
  padding-top: var(--sp5);
}

.manual-pdf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp4);
  margin-bottom: var(--sp6);
  border-color: var(--accent-line);
  background: var(--accent-tint);
}

.manual-pdfTitle {
  margin: 0 0 var(--sp1);
  font-size: var(--fs-lg);
}

.manual-pdfMeta {
  margin: 0;
  color: var(--text-dim);
}

.manual-contents {
  display: grid;
  gap: var(--sp2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.manual-contentsLink {
  display: block;
  padding: var(--sp3) var(--sp4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel-bg);
  color: var(--text-primary);
  text-decoration: none;
}

.manual-contentsLink:hover {
  border-color: var(--accent);
  background: var(--selection-bg);
  color: var(--text-primary);
}

.manual-contentsTitle {
  display: block;
  font-weight: 700;
}

.manual-contentsSummary {
  display: block;
  color: var(--text-dim);
  font-size: var(--fs-sm);
}

/* ---- Chapter layout --------------------------------------- */

.manual-layout {
  display: grid;
  gap: var(--sp4);
  padding-top: var(--sp5);
}

@media (min-width: 1024px) {
  .manual-layout {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: var(--sp7);
    align-items: start;
  }
}

.manual-tocToggle {
  width: 100%;
}

.js .manual-tocToggle[aria-expanded="false"] + .manual-toc {
  display: none;
}

.manual-toc {
  margin-top: var(--sp3);
  padding: var(--sp3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel-bg);
}

.manual-tocHome {
  display: block;
  padding: var(--sp2) var(--sp3);
  font-size: var(--fs-sm);
  color: var(--text-faint);
}

.manual-tocList {
  margin: 0;
  padding: 0;
  list-style: none;
}

.manual-tocList a {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: var(--sp1) var(--sp3);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  text-decoration: none;
}

.manual-tocList a:hover {
  background: var(--selection-bg);
}

.manual-tocList a[aria-current="page"] {
  background: var(--accent-tint);
  color: var(--accent-btn-hover);
  font-weight: 700;
}

@media (min-width: 1024px) {
  .manual-tocToggle {
    display: none;
  }

  .manual-side {
    position: sticky;
    top: 88px;
  }

  .manual-toc,
  .js .manual-tocToggle[aria-expanded="false"] + .manual-toc {
    display: block;
    margin-top: 0;
  }
}

.manual-eyebrow {
  margin: 0 0 var(--sp1);
  color: var(--text-faint);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.manual-title {
  margin-bottom: var(--sp5);
  padding-bottom: var(--sp3);
  border-bottom: 3px solid var(--accent);
}

.manual-body {
  max-width: 800px;
}

.manual-body h2 {
  margin-top: var(--sp6);
  padding-bottom: var(--sp1);
  border-bottom: 1px solid var(--border);
}

.manual-pager {
  display: grid;
  gap: var(--sp3);
  margin-top: var(--sp7);
}

@media (min-width: 600px) {
  .manual-pager {
    grid-template-columns: 1fr 1fr;
  }
}

.manual-pagerLink {
  display: block;
  padding: var(--sp3) var(--sp4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel-bg);
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 700;
}

.manual-pagerLink:hover {
  border-color: var(--accent);
  background: var(--selection-bg);
  color: var(--text-primary);
}

.manual-pagerNext {
  text-align: right;
  grid-column: 2;
}

.manual-pagerLabel {
  display: block;
  color: var(--text-faint);
  font-size: var(--fs-sm);
  font-weight: 400;
}

/* ---- Chapter building blocks (shared by the PDF through print.css) ----------- */

.steps-list {
  padding-left: 0;
  list-style: none;
  counter-reset: step;
}

.steps-list > li {
  position: relative;
  margin-bottom: var(--sp3);
  padding-left: 40px;
  counter-increment: step;
}

.steps-list > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-btn);
  color: var(--on-accent);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.callouts {
  padding-left: 0;
  list-style: none;
  counter-reset: callout;
}

.callouts > li {
  position: relative;
  margin-bottom: var(--sp2);
  padding-left: 36px;
  counter-increment: callout;
}

.callouts > li::before {
  content: counter(callout);
  position: absolute;
  left: 0;
  top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--support);
  color: var(--on-support);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.note {
  margin: var(--sp4) 0;
  padding: var(--sp3) var(--sp4);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent-tint);
}

.note-warn {
  border-left-color: var(--warn-text);
  background: var(--warn-fill);
  color: var(--warn-text);
}

.note > :last-child {
  margin-bottom: 0;
}

.note-title {
  display: block;
  margin-bottom: var(--sp1);
  font-weight: 700;
}