html, body {
  overflow-x: hidden;
}

#loader {
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 50%;
  margin: -33px 0 0 -33px;
}

/* === Navigation - TOC/Highlights ============================================================= */

/* Indent each node based on depth (level 2+) */
.toc-node {
  padding-left: calc((var(--level, 2) - 2) * 1rem);
}

/* Keep rows compact and aligned */
.toc-row {
  padding: .25rem .25rem;
  border-radius: .375rem;
}

/* Subtle hover without fighting Bootstrap */
.toc-row:hover {
  background: rgba(0,0,0,.03);
}

/* Make the disclosure button a consistent small square */
.toc-disclosure {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Placeholder keeps text aligned with nodes that have a disclosure button */
.toc-disclosure-placeholder {
  width: 1.0rem;
  height: 1.0rem;
  display: inline-block;
  flex: 0 0 auto;
}

/* Make link look like text but keep it clickable */
.toc-link {
  text-decoration: none;
}

/* Leaf top-level items (anchors styled as accordion headers) should not show the accordion caret. */
.toc-chapter-leaf::after {
  display: none !important;
}

/* Optional: keep right padding consistent with caret-bearing headers. */
.toc-chapter-leaf {
  padding-right: var(--bs-accordion-btn-padding-x);
}

/* === Bookshelf =============================================================================== */

.cover {
  aspect-ratio: 2 / 3;
  width: 100%;              /* ensure aspect-ratio has a definite inline size */
  background: rgb(224, 224, 224);
  display: grid;
  place-items: center;
  border: 1px solid rgba(0,0,0,.08);
}

/* make sure the img truly fills the cover box */
.cover > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* keep the card from stretching oddly in flex/grid contexts */
.book-card .card {
  border: 0;
  background: transparent;
  height: 100%; 
  box-shadow: 0 .35rem 0.95rem rgba(0,0,0,.55);
}

@media (min-width: 576px){ .book-card .card { box-shadow: 0 .15rem 1.25rem rgba(0,0,0,.55); } } /* sm ≥ 576px */
@media (min-width: 768px){ .book-card .card { box-shadow: 0 .25rem 1.25rem rgba(0,0,0,.55); } } /* md ≥ 768px */

.book-card {
  text-decoration: none;
  color: inherit;
}

.book-card:hover .cover {
  border-color: rgba(0,0,0,.18);
}

.book-title {
  font-size: .9rem;
  line-height: 1.2;
}

/* The recessed well (track) */
.progress-embossed{
  background: rgba(0,0,0,.90);
  border-radius: .375rem; /* matches bootstrap-ish rounding */
  overflow: hidden;
  /* inset shadows = "carved in" look */
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.55),   /* deeper inner shadow */
    inset 0 -1px 1px rgba(255,255,255,.18); /* subtle inner highlight */
  /* subtle rim to separate from cover */
  border: 1px solid rgba(255,255,255,.18);
}

/* The fill (bar) with a specular highlight */
.progress-bar-embossed{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),  /* highlight line */
    inset 0 -1px 0 rgba(0,0,0,.25);       /* slight depth */
}