.sidebar-tree p.indented-block {
  padding: var(--sidebar-item-spacing-vertical) var(--sidebar-item-spacing-horizontal) 0
    var(--sidebar-item-spacing-horizontal);
  margin-bottom: 0;
}

.sidebar-tree p.indented-block span.indent {
  margin-left: var(--sidebar-item-spacing-horizontal);
  display: block;
}

.sidebar-tree p.indented-block .project-name {
  font-size: var(--sidebar-item-font-size);
  font-weight: bold;
  margin-right: calc(var(--sidebar-item-spacing-horizontal) / 2.5);
}

#sidebar-projects:not(.ready) {
  visibility: hidden;
}

.sidebar-tree .active {
  font-weight: bold;
}


/* ── Global heading refinements ─────────────────────────────
 * Biome-inspired scale: medium weight (500) throughout — size
 * and spacing carry hierarchy, not boldness. H4-H6 add eyebrow
 * treatment (uppercase, muted). `article` prefix overrides
 * Furo's bare h1-h6 selectors.
 * ────────────────────────────────────────────────────────── */
article h1 {
  font-size: 1.8em;
  font-weight: 500;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

article h2 {
  font-size: 1.6em;
  font-weight: 500;
  margin-top: 2.5rem;
  margin-bottom: 0.5rem;
}

article h3 {
  font-size: 1.15em;
  font-weight: 500;
  margin-top: 1.5rem;
  margin-bottom: 0.375rem;
}

article h4 {
  font-size: 0.85em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-foreground-secondary);
  margin-top: 1rem;
  margin-bottom: 0.25rem;
}

article h5 {
  font-size: 0.8em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-foreground-secondary);
}

article h6 {
  font-size: 0.75em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-foreground-secondary);
}

/* ── Changelog heading extras ───────────────────────────────
 * Vertical spacing separates consecutive version entries.
 * Category headings (h3) are muted. Item headings (h4) are
 * subtle. Targets #history section from CHANGES markdown.
 * ────────────────────────────────────────────────────────── */

/* Spacing between consecutive version entries */
#history > section + section {
  margin-top: 2.5rem;
}

/* Category headings — muted secondary color */
#history h3 {
  color: var(--color-foreground-secondary);
  margin-top: 1.25rem;
}

/* Item headings — subtle, same size as body */
#history h4 {
  font-size: 1em;
  margin-top: 1rem;
  text-transform: none;
  letter-spacing: normal;
  color: inherit;
}

/* ── Right-panel TOC refinements ────────────────────────────
 * Adjust Furo's table-of-contents proportions for better
 * readability. Inspired by Starlight defaults (Biome docs).
 * Uses Furo CSS variable overrides where possible.
 * ────────────────────────────────────────────────────────── */

/* TOC font sizes: override Furo defaults (75% → 87.5%) */
:root {
  --toc-font-size: var(--font-size--small);         /* 87.5% = 14px */
  --toc-title-font-size: var(--font-size--small);   /* 87.5% = 14px */
}

/* More generous line-height for wrapped TOC entries */
.toc-tree {
  line-height: 1.4;
}

/* ── Flexible right-panel TOC (inner-panel padding) ─────────
 * Furo hardcodes .toc-drawer to width: 15em (SASS, compiled).
 * min-width: 18em overrides it; long TOC entries wrap inside
 * the box instead of blowing past the viewport.
 *
 * Padding lives on .toc-sticky (the inner panel), not on
 * .toc-drawer (the outer aside). This matches Biome/Starlight
 * where the aside defines dimensions and an inner wrapper
 * (.right-sidebar-panel) controls content insets. The
 * scrollbar sits naturally between content and viewport edge.
 *
 * Content area gets flex: 1 to absorb extra space on wide
 * screens. At ≤82em Furo collapses the TOC to position: fixed;
 * override right offset so the drawer fully hides off-screen.
 * ────────────────────────────────────────────────────────── */
.toc-drawer {
  min-width: 18em;
  flex-shrink: 0;
  padding-right: 0;
}

.toc-sticky {
  padding-right: 1.5em;
}

.content {
  width: auto;
  max-width: 46em;
  flex: 1 1 46em;
  padding: 0 2em;
}

@media (max-width: 82em) {
  .toc-drawer {
    right: -18em;
  }
}

/* ── Body typography refinements ────────────────────────────
 * Improve paragraph readability with wider line-height and
 * sharper text rendering. Furo already sets font-smoothing.
 *
 * IBM Plex tracks slightly wide at default spacing; -0.01em
 * tightens it to feel more natural (matches tony.sh/tony.nl).
 * Kerning + ligatures polish AV/To pairs and fi/fl combos.
 * ────────────────────────────────────────────────────────── */
body {
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  letter-spacing: -0.01em;
}

/* ── Code block text rendering ────────────────────────────
 * Monospace needs fixed-width columns: disable kerning,
 * ligatures, and letter-spacing that body sets for prose.
 * optimizeSpeed skips heuristics that can shift the grid.
 * ────────────────────────────────────────────────────────── */
pre,
code,
kbd,
samp {
  text-rendering: optimizeSpeed;
  font-kerning: none;
  font-variant-ligatures: none;
  letter-spacing: normal;
}

article {
  line-height: 1.6;
}

/* ── Image layout shift prevention ────────────────────────
 * Reserve space for images before they load. Furo already
 * sets max-width: 100%; height: auto on img. We add
 * content-visibility and badge-specific height to prevent CLS.
 * ────────────────────────────────────────────────────────── */


img {
  content-visibility: auto;
}

/* Docutils emits :width:/:height: as inline CSS (style="width: Xpx;
 * height: Ypx;") rather than HTML attributes.  When Furo's
 * max-width: 100% constrains width below the declared value,
 * the fixed height causes distortion.  height: auto + aspect-ratio
 * lets the browser compute the correct height from the intrinsic
 * ratio once loaded; before load, aspect-ratio reserves space
 * at the intended proportion — preventing both CLS and distortion. */
article img[loading="lazy"] {
  height: auto !important;
}

img[src*="shields.io"],
img[src*="badge.svg"],
img[src*="codecov.io"] {
  height: 20px;
  width: auto;
  min-width: 60px;
  border-radius: 3px;
  background: var(--color-background-secondary);
}

/* ── View Transitions (SPA navigation) ────────────────────
 * Crossfade between pages during SPA navigation.
 * Browsers without View Transitions API get instant swap.
 * ────────────────────────────────────────────────────────── */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 150ms;
}
