/* =============================================================================
   Docs Tab — Library Documentation Browser

   Design goals (from user):
     - light, whitespace-forward, scroll-friendly
     - not dense; generous line-height and margins
     - feels native to the site, not like Doxygen's default chrome
   ============================================================================= */

/* Override the 800px cap .panel sets in main.css — docs needs room for
   the sidebar + content layout. Same pattern #panel-code uses. */
#panel-docs {
  max-width: none;
  color: var(--color-text);
  --docs-root-max-width: 1400px;
  --docs-root-x-padding: var(--space-xl);
  --docs-sidebar-width: 240px;
  --docs-sidebar-top: 88px;
  --docs-panels-top: 0px;
  --docs-sidebar-left: max(
    calc(var(--space-xl) + var(--docs-root-x-padding)),
    calc((100vw - var(--docs-root-max-width)) / 2 + var(--docs-root-x-padding))
  );
}

/* Reserve scrollbar space on the panels scroller so `.docs-root`'s
   `margin: 0 auto` doesn't jitter horizontally by ~3px every time the
   page height crosses the viewport-height threshold (long README → short
   symbol page). Scoped via :has() so other tabs keep their native layout. */
#panels:has(#panel-docs.active) {
  scrollbar-gutter: stable;
}

.docs-root {
  max-width: var(--docs-root-max-width);
  margin: 0 auto;
  /* No top padding — the topbar escapes upward with a negative margin
     so it sits flush at the top of the scroll viewport from page load
     and stays there without any scroll travel. */
  padding: 0 var(--docs-root-x-padding) var(--space-2xl);
}

.docs-loading,
.docs-empty {
  padding: var(--space-2xl);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
}

.docs-empty h2 {
  color: var(--color-text);
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-md);
}

.docs-empty code {
  display: inline-block;
  padding: 0.15em 0.5em;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--color-accent);
}

/* ── Breadcrumb / top bar ──────────────────────────────────────────────── */

.docs-topbar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 20;
  /* Escape .panels' top padding so the topbar is already pinned on load
     instead of travelling up the first ~56px of scroll. */
  margin-top: calc(-1 * var(--space-xl));
  padding: var(--space-md) 0;
  margin-bottom: var(--space-lg);
  /* Empty space in the topbar shouldn't intercept clicks — let them hit
     the content underneath. Children re-enable pointer events below. */
  pointer-events: none;
}

.docs-topbar > * {
  pointer-events: auto;
}

.docs-breadcrumb {
  flex: 1;
  min-width: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.docs-breadcrumb a {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.docs-breadcrumb a:hover {
  color: var(--color-accent);
}

.docs-breadcrumb-sep {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.docs-breadcrumb-current {
  color: var(--color-text);
}

/* ── Search input ──────────────────────────────────────────────────────── */

.docs-search {
  position: relative;
  width: 320px;
  max-width: 100%;
  min-width: 0;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-md);
}

.docs-search-input {
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  padding-left: 2.25rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.docs-search-input::placeholder {
  color: var(--color-text);
}

.docs-search-input:focus {
  outline: none;
  border-color: var(--color-primary-light);
  box-shadow: 0 0 0 3px rgba(139, 45, 180, 0.15);
}

.docs-search-input::-webkit-search-cancel-button {
  cursor: pointer;
}

.docs-search-icon {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.docs-search-icon svg {
  display: block;
}

.docs-search-results {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 0;
  right: 0;
  padding: 0.4rem;
  max-height: 360px;
  overflow-y: auto;
  background: rgba(13, 18, 30, 0.94);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: calc(var(--radius-md) + 2px);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.35);
  z-index: 50;
  display: none;
}

.docs-search-results.open {
  display: block;
}

.docs-search-result {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: calc(var(--radius-sm) + 2px);
  color: inherit;
  text-decoration: none;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}

.docs-search-result,
.docs-search-result * {
  cursor: pointer;
}

.docs-search-result:last-child {
  border-bottom: none;
}

.docs-search-result:hover,
.docs-search-result.focused {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

.docs-search-result-name {
  color: var(--color-text);
  font-weight: 500;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

.docs-search-result-meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  margin-top: 0.15em;
}

.docs-search-result-path {
  color: var(--color-accent);
  font-size: var(--font-size-xs);
  margin-top: 0.2rem;
}

.docs-search-result-meta strong {
  color: var(--color-text-secondary);
  font-weight: 500;
}

.docs-search-page {
  max-width: 960px;
}

.docs-search-page-summary {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-lg);
}

.docs-search-page-results {
  display: grid;
  gap: var(--space-md);
}

.docs-search-page-hit {
  display: block;
  padding: var(--space-md) var(--space-lg);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    background var(--transition-fast);
}

.docs-search-page-hit,
.docs-search-page-hit * {
  cursor: pointer;
}

.docs-content .docs-search-page-hit:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--color-accent);
}

.docs-search-page-hit-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-xs);
}

.docs-search-page-hit-name {
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  font-weight: 600;
}

.docs-search-page-hit-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-xs);
}

.docs-search-page-hit-badge {
  padding: 0.18rem 0.55rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
}

.docs-search-page-hit-location {
  color: var(--color-accent);
  font-size: var(--font-size-sm);
  margin-bottom: 0.2rem;
}

.docs-search-page-hit-meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.docs-search-page-hit-excerpt {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.55;
  margin-top: 0.45rem;
}

.docs-search-page-hit-excerpt mark {
  background: rgba(251, 241, 87, 0.18);
  color: var(--color-accent);
  padding: 0 0.14em;
  border-radius: 0.2em;
}

.docs-search-page-empty {
  padding: var(--space-xl) 0;
}

/* ── Landing page ──────────────────────────────────────────────────────── */

.docs-hero {
  text-align: center;
}

.docs-hero h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  margin: 0 0 var(--space-md);
  color: var(--color-text);
  letter-spacing: -0.02em;
}

.docs-hero p {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.6;
}

.docs-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

/* Per-category column caps. The `max(...)` trick raises the track floor so
   the grid never fits more columns than we want, while still collapsing to
   fewer columns on narrow screens. */

/* Core: at most 2 columns. Floor = 50% of container minus half a gap. */
.docs-category[data-category="Core"] .docs-card-grid {
  grid-template-columns:
    repeat(auto-fill, minmax(max(280px, calc(50% - var(--space-lg) / 2)), 1fr));
}

/* Helpers: at most 3 columns. Floor = 33.333% minus 2/3 of a gap. */
.docs-category[data-category="Helpers"] .docs-card-grid {
  grid-template-columns:
    repeat(auto-fill, minmax(max(280px, calc(33.333% - var(--space-lg) * 2 / 3)), 1fr));
}

/* Darker outer panel — acts as the "tray" that holds the floating title
   panel and the example tile area. Both children sit visually on top of
   this darker surface. */
.docs-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-lg);
  color: inherit;
  transition:
    transform var(--transition-smooth),
    border-color var(--transition-smooth),
    box-shadow var(--transition-smooth);
}

.docs-card:hover {
  /* --glass-shadow-lg stacks a 1px ring (`0 0 0 1px rgba(255,255,255,.05)`)
     on top of the drop shadow, which reads as a left/right hairline border
     over the darker card background. Use just a plain drop shadow so the
     lift is clean. */
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}

/* Title + summary live in a raised white-glass panel, so it reads as a
   floating "header" above the tile tray. Its own rounded corners and soft
   shadow sell the floating effect. The link semantics still apply — the
   example tiles below it stay independently clickable. */
.docs-card-link {
  display: block;
  padding: var(--space-md) var(--space-lg);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition:
    background var(--transition-smooth),
    border-color var(--transition-smooth);
}

.docs-card:hover .docs-card-link {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
}

/* Yellow accent on direct hover of the link region — border lights up and
   the library name shifts to the accent color, signaling that this region
   itself is the "go to library" target (vs. the example tiles below it).
   Selectors are scoped through `.docs-card` to match the (0,3,0) specificity
   of the white-glow rule above; source order then makes yellow win. */
.docs-card .docs-card-link:hover {
  border-color: var(--color-accent);
}

.docs-card .docs-card-link:hover .docs-card-name {
  color: var(--color-accent);
}

.docs-card-name {
  transition: color var(--transition-smooth);
}

.docs-card-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.docs-card-name {
  /* White title per design direction — no longer the accent yellow. */
  color: #ffffff;
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.docs-card-version {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
}

.docs-card-summary {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  margin: 0;
}

.docs-card-header {
  margin-top: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.docs-card-author {
  margin-top: var(--space-md);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Pointer cursor on the link region + example tiles. Scoped so nested
   non-clickable text (author, summary) inherits without getting the
   pointer from a blanket rule. Children of the button (icon + name)
   explicitly get the pointer too since UA styles on <span> can override
   inheritance on some browsers. */
.docs-card-link,
.docs-card-link *,
.docs-card-example,
.docs-card-example * {
  cursor: pointer;
}

/* ── Landing card: example sketch tile grid ──────────────────────────── */

/* Wrapper for the "Examples" header + tile grid. Holds the section's
   padding so the docs-card-link above can still span the full card width.
   No top padding (the card's gap already separates it from the link). */
.docs-card-examples-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: 0 var(--space-md) var(--space-md);
}

/* Small section label that sits between the floating title panel and the
   tile grid — mirrors the "Examples" sidebar entry on library pages. */
.docs-card-examples-header {
  margin: 0;
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  user-select: none;
}

/* Tile grid sits directly on the darker tray — no background of its own,
   parent wrapper handles the side padding. */
.docs-card-examples {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: var(--space-sm);
}

/* Each example tile — a clickable "Push to Code" button with a large emoji
   on top and the example's display name underneath. Background and border
   are intentionally absent; hover reveals a soft radial glow behind the
   tile so the interactivity cue is subtle. */
.docs-card-example {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-xs);
  padding: var(--space-sm) 4px;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: inherit;
  font: inherit;
  /* Tiles are now <a> elements — suppress the default link underline. */
  text-decoration: none;
  text-align: center;
  user-select: none;
  transition:
    transform var(--transition-smooth),
    background var(--transition-smooth);
}

/* Hide the native button chrome so our tile styling is the one that shows. */
button.docs-card-example {
  appearance: none;
  -webkit-appearance: none;
}

.docs-card-example:hover {
  transform: translateY(-2px);
}

/* Glow follows the emoji's contour by using `drop-shadow` filters on the
   icon itself — they read the glyph's alpha channel, so the halo isn't
   clipped to the tile's rectangle the way a `background` would be. Two
   stacked shadows give a soft inner + wider outer falloff. */
.docs-card-example:hover .docs-card-example-icon {
  text-shadow: 0 0 12px rgba(255, 220, 60, 0.7), 0 0 24px rgba(255, 200, 40, 0.4);
}

.docs-card-example:active {
  transform: translateY(0);
}

.docs-card-example:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ~2x the old 1.1rem strip: big emoji that dominates the tile. */
.docs-card-example-icon {
  font-size: 2.2rem;
  line-height: 1;
  transition: filter var(--transition-smooth);
}

.docs-card-example-name {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: 1.15;
  word-break: break-word;
}

/* ── Sidebar: example item emoji prefix ───────────────────────────────── */

.docs-sidebar-emoji {
  display: inline-block;
  margin-right: 6px;
  font-size: 0.95em;
  line-height: 1;
  user-select: none;
}

/* ── Example detail page ──────────────────────────────────────────────── */

.docs-example-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}

.docs-example-titleblock {
  min-width: 0;
  flex: 1 1 auto;
}

/* The emoji is rendered inline inside <h1> so it aligns with the title's
   optical center instead of floating above the kind chip. */
.docs-example-titleblock h1 {
  margin: var(--space-xs) 0 0;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  /* Override the 1.7 body line-height — otherwise the h1's content box
     extends ~0.35em below the visible glyphs, and the Push-to-Code button
     (flex-end aligned) sits well below the title baseline. */
  line-height: 1.15;
}

/* Scale with the heading via `em`, so the icon tracks the title size. */
.docs-example-icon {
  font-size: 1em;
  line-height: 1;
  user-select: none;
  flex-shrink: 0;
}

.docs-example-actions {
  flex: 0 0 auto;
  margin: 0;
}

/* Push-to-Code CTA on example detail pages. Inherits the .btn .btn-accent
   look from components.css; this rule just upsizes it so it reads as a
   primary action rather than a toolbar-sized button. */
.docs-example-import {
  padding: var(--space-md) var(--space-xl);
  font-size: var(--font-size-base);
  gap: var(--space-sm);
  margin: 0 0 var(--space-sm);
}

.docs-example-import svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.docs-example-description {
  margin-bottom: var(--space-lg);
}

.docs-example-prose {
  margin: var(--space-md) 0;
}

.docs-example-file-title {
  margin-top: var(--space-xl);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--glass-border-color, rgba(255, 255, 255, 0.08));
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
}

.docs-example-file-title code {
  font-family: var(--font-mono);
}

.docs-example-variants {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-md);
}

.docs-example-variant-link {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: var(--glass-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition-smooth), border-color var(--transition-smooth);
}

.docs-example-variant-link:hover {
  transform: translateY(-1px);
  border-color: rgba(251, 241, 87, 0.3);
}

.docs-example-variant-name {
  color: var(--color-accent);
  font-weight: 600;
}

.docs-example-variant-brief {
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
}

.docs-example-files-list {
  margin-top: var(--space-2xl);
  padding: var(--space-md);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

.docs-example-files-list-label {
  margin-bottom: var(--space-xs);
  color: var(--color-text-secondary);
  font-weight: 600;
}

.docs-example-files-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
}

.docs-example-files-list code {
  font-family: var(--font-mono);
  color: var(--color-text-primary);
}

.docs-example-file-tag {
  margin-left: var(--space-xs);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

/* ── Landing page: category sections ──────────────────────────────────── */

.docs-category {
  margin-top: var(--space-2xl);
}

.docs-category:first-of-type {
  margin-top: var(--space-xl);
}

/* `.panel h2` in main.css has higher specificity than a plain class rule,
   so we scope through #panel-docs to win cleanly. */
#panel-docs .docs-category-title {
  /* Match the hero paragraph: same size and secondary text color. */
  font-size: var(--font-size-lg);
  font-weight: 400;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-md);
  padding-bottom: var(--space-sm);
}

.docs-category .docs-card-grid {
  margin-top: 0;
}

/* ── Library view: sidebar + content ──────────────────────────────────── */

.docs-layout {
  display: grid;
  /* minmax(0, 1fr) stops long signatures / code blocks from pushing the
     content cell wider than its share, which would otherwise shift the
     sidebar off its fixed 240px rail. */
  grid-template-columns: var(--docs-sidebar-width) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: start;
  /* Keep the content aligned with the fixed sidebar rail. */

}

.docs-sidebar {
  grid-column: 1;
  width: var(--docs-sidebar-width);
  position: fixed;
  /* Sits just below the sticky topbar. The panel top is measured in JS so
     this rail stays anchored even though #panels, not <body>, scrolls. */
  top: calc(var(--docs-panels-top) + var(--docs-sidebar-top));
  left: var(--docs-sidebar-left);
  z-index: 10;
  max-height: calc(100vh - var(--docs-panels-top) - var(--docs-sidebar-top) - var(--space-xl));
  overflow-y: auto;
  /* Reserve gutter even when no scrollbar is needed — otherwise the sidebar
     visibly narrows on pages tall enough to require scrolling (e.g. symbol
     pages) compared to shorter pages. */
  scrollbar-gutter: stable;
  padding-right: var(--space-sm);
}

.docs-sidebar-title {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin: var(--space-lg) 0 var(--space-sm);
  font-weight: 600;
}

.docs-sidebar-title:first-child {
  margin-top: 0;
}

/* Toolbar (Expand all / Collapse all) */
.docs-sidebar-toolbar {
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border-subtle);
}

/* Library author credit at the bottom of the sidebar (moved here from the
   landing card). Visually de-emphasized — it's a credit, not navigation. */
.docs-sidebar-author {
  margin-top: var(--space-lg);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border-subtle);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
}

.docs-sidebar-toggle-all {
  background: transparent;
  border: 0;
  padding: 0.2rem 0;
  cursor: pointer;
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  transition: color var(--transition-fast);
}

.docs-sidebar-toggle-all:hover {
  color: var(--color-accent);
}

.docs-sidebar-sublist {
  list-style: none;
  margin: 0;
  /* Visual indent for nested entries. `.docs-sidebar-group` (symbol members)
     keeps its own border-left + padding via a later rule. */
  padding-left: var(--space-md);
}

.docs-sidebar-item[data-has-children="true"]:not([data-expanded="true"])
  > .docs-sidebar-sublist {
  display: none;
}

/* Chevron container sits inside the link's reserved padding-left. Its own
   font-size stays at the link's size so width/height/positioning are stable;
   the glyph is enlarged on the ::before pseudo-element so the triangle
   reads at roughly 2× the original visual size. */
.docs-sidebar-chevron {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5em;
  height: 1.5em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  opacity: 0.55;
  cursor: pointer;
  border-radius: 3px;
  transition: opacity var(--transition-fast), background var(--transition-fast);
}

.docs-sidebar-chevron::before {
  content: '\25B8';        /* ▸ — collapsed */
  font-size: 1.8em;        /* ← this is what makes the triangle bigger */
  line-height: 1;
  cursor: pointer;
}

.docs-sidebar-item[data-expanded="true"] > .docs-sidebar-link > .docs-sidebar-chevron::before {
  content: '\25BE';        /* ▾ — expanded (down-pointing triangle) */
}

.docs-sidebar-chevron:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.08);
}

/* Badge next to inherited members (↑ arrow). */
.docs-sidebar-inherited {
  display: inline-block;
  font-size: 0.7em;
  color: var(--color-text-muted);
  opacity: 0.65;
  margin-left: 0.15em;
  vertical-align: 0.1em;
}

.docs-sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.docs-sidebar-item {
  margin: 0;
}

.docs-sidebar-link {
  display: block;
  position: relative;
  /* padding-left reserves room for the absolutely-positioned chevron so
     leaves and parents line up the same regardless of has-children state. */
  padding: 0.35rem var(--space-sm) 0.35rem 1.7em;
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.docs-sidebar-link:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text);
}

.docs-sidebar-link.active {
  background: rgba(251, 241, 87, 0.08);
  color: var(--color-accent);
}

/* Collapsible section header (Classes, Structs, Macros, Functions, Enums).
   Styled as a mild category label — uppercase + tracked letter spacing so
   it reads as a heading rather than a regular navigable entry. */
.docs-sidebar-section-link {
  cursor: pointer;
  color: var(--color-text);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--font-size-xs);
  user-select: none;
  margin-top: var(--space-sm);
}

.docs-sidebar-section-link:hover {
  color: var(--color-accent);
}

.docs-sidebar-group {
  padding-left: var(--space-md);
  margin: var(--space-xs) 0 var(--space-sm);
}

.docs-sidebar-group .docs-sidebar-link {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  padding-left: var(--space-sm);
}

.docs-sidebar-group .docs-sidebar-link.active {
  color: var(--color-accent);
}

/* ── Content column ───────────────────────────────────────────────────── */

.docs-content {
  grid-column: 2;
  min-width: 0;
  max-width: 960px;
  line-height: 1.7;
}

.docs-content h1 {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  color: var(--color-text);
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-md);
}

.docs-content h2 {
  font-size: 1.5rem;
  color: var(--color-text);
  margin: var(--space-2xl) 0 var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border-subtle);
}

.docs-content h2:first-child,
.docs-content > :first-child h2 {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.docs-content h3 {
  font-size: 1.2rem;
  color: var(--color-text);
  margin: var(--space-xl) 0 var(--space-sm);
}

.docs-content h4 {
  font-size: 1rem;
  color: var(--color-text-secondary);
  margin: var(--space-lg) 0 var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.docs-content p {
  margin: 0 0 var(--space-md);
  color: var(--color-text-secondary);
}

.docs-content a {
  color: var(--color-accent);
  text-decoration: none;
  transition: border-color var(--transition-fast);
}

.docs-content a:hover {
  border-bottom-color: var(--color-accent);
}

.docs-content ul,
.docs-content ol {
  margin: 0 0 var(--space-md);
  padding-left: var(--space-lg);
  color: var(--color-text-secondary);
}

.docs-content li {
  margin-bottom: var(--space-xs);
}

.docs-content blockquote {
  margin: var(--space-md) 0;
  padding: var(--space-sm) var(--space-md);
  border-left: 3px solid var(--color-primary);
  background: rgba(139, 45, 180, 0.06);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--color-text-secondary);
}

.docs-content code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  padding: 0.1em 0.35em;
  background: var(--color-bg-elevated);
  border-radius: var(--radius-sm);
  color: var(--color-accent);
}

.docs-content pre {
  position: relative;
  margin: var(--space-md) 0;
  padding: var(--space-md);
  padding-right: 3.5rem;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  line-height: 1.55;
  /* I-beam over code blocks so it's clear the text is selectable. */
  cursor: text;
}

.docs-content pre code {
  background: transparent;
  padding: 0;
  color: var(--color-text);
  font-size: inherit;
}

/* The global `span { cursor: default }` rule in main.css would otherwise
   revert the I-beam for every syntax-highlight span inside the code block. */
.docs-content pre,
.docs-content pre * {
  cursor: text;
}

/* Lightweight C/C++ syntax highlighting (from webtools/src/docs/markdown.js) */
.docs-content .hl-kw    { color: #C792EA; }   /* keywords */
.docs-content .hl-const { color: #FBF157; }   /* constants / macros */
.docs-content .hl-str   { color: #C3E88D; }   /* strings */
.docs-content .hl-num   { color: #F78C6C; }   /* numbers */
.docs-content .hl-com   { color: #676E95; font-style: italic; }  /* comments */
.docs-content .hl-pre   { color: #89DDFF; }   /* preprocessor */

.docs-copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.35rem 0.55rem;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}

.docs-content pre:hover .docs-copy-btn,
.docs-copy-btn:focus-visible {
  opacity: 1;
}

.docs-copy-btn:hover {
  color: var(--color-accent);
}

.docs-copy-btn.copied {
  color: var(--color-success);
  opacity: 1;
}

.docs-content table {
  width: 100%;
  margin: var(--space-md) 0;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.docs-content th,
.docs-content td {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  border-bottom: 1px solid var(--color-border-subtle);
}

.docs-content th {
  color: var(--color-text);
  font-weight: 600;
  background: var(--color-bg-elevated);
}

.docs-content td {
  color: var(--color-text-secondary);
}

.docs-content img {
  max-width: 100%;
  border-radius: var(--radius-md);
}

/* ── Collapsible sections (<details>) ──────────────────────────────────── */

.docs-content .docs-accordion {
  margin: var(--space-lg) 0;
  border-top: 1px solid var(--color-border-subtle);
  padding-top: var(--space-md);
}

.docs-content .docs-accordion-summary {
  cursor: pointer;
  list-style: none;
  font-size: 1.5rem;
  color: var(--color-text);
  padding: var(--space-xs) 0;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  user-select: none;
}

.docs-content .docs-accordion-summary::-webkit-details-marker { display: none; }

.docs-content .docs-accordion-summary::before {
  content: '';
  width: 0.6em;
  height: 0.6em;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: rotate(-45deg);
  transition: transform var(--transition-fast);
  flex: 0 0 auto;
  cursor: pointer;
}

.docs-content .docs-accordion[open] .docs-accordion-summary::before {
  transform: rotate(45deg);
}

.docs-content .docs-accordion-summary:hover {
  color: var(--color-accent);
}

.docs-content .docs-accordion-summary:hover::before {
  border-color: var(--color-accent);
}

.docs-content .docs-accordion[open] > :not(summary) {
  margin-top: var(--space-sm);
}

/* ── Symbol / member detail ───────────────────────────────────────────── */

.docs-symbol {
  margin-bottom: var(--space-2xl);
}

.docs-symbol-kind {
  display: inline-block;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary-light);
  background: rgba(139, 45, 180, 0.15);
  padding: 0.15em 0.6em;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-sm);
  font-weight: 600;
}

.docs-symbol-signature {
  margin: var(--space-sm) 0 var(--space-md);
  padding: var(--space-md);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  overflow-x: auto;
  white-space: pre;
  cursor: text;
}

.docs-symbol-brief {
  font-size: var(--font-size-lg);
  color: var(--color-text);
  line-height: 1.55;
  margin: 0 0 var(--space-md);
}

.docs-params {
  margin: var(--space-md) 0;
}

.docs-param {
  display: grid;
  grid-template-columns: minmax(120px, max-content) 1fr;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

.docs-param:last-child {
  border-bottom: none;
}

.docs-param-name {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-accent);
}

.docs-param-desc {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.docs-returns {
  padding: var(--space-sm) var(--space-md);
  background: rgba(52, 211, 153, 0.06);
  border-left: 3px solid var(--color-success);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: var(--space-md) 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.docs-note,
.docs-warning {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  margin: var(--space-md) 0;
  font-size: var(--font-size-sm);
}

.docs-note {
  background: rgba(96, 165, 250, 0.08);
  border-left: 3px solid var(--color-info);
  color: var(--color-text-secondary);
}

.docs-warning {
  background: rgba(251, 191, 36, 0.08);
  border-left: 3px solid var(--color-warning);
  color: var(--color-text-secondary);
}

.docs-see-also {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border-subtle);
}

.docs-see-also-label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
  font-weight: 600;
}

.docs-see-also-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}

.docs-see-also-list a,
.docs-see-also-missing {
  display: inline-block;
  padding: 0.25rem 0.65rem;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
}

.docs-see-also-list a:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.docs-see-also-missing {
  color: var(--color-text-muted);
  opacity: 0.75;
}

/* ── External link indicator (for Arduino core-lib links) ─────────────── */

.docs-external {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-top: var(--space-md);
  text-decoration: none;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  transition: border-color var(--transition-fast);
}

.docs-external:hover {
  border-color: var(--color-accent);
}

.docs-external::after {
  content: '↗';
  opacity: 0.6;
}

/* ── Overscroll indicator ──────────────────────────────────────────────── */

/* Progress pill shown when the user is pulling past the end (or start) of
   a scrollable docs page to jump to the next/previous sidebar entry. Only
   appears on pages whose content overflows — short pages still switch
   instantly without any feedback. */
.docs-overscroll-indicator {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: min(240px, 40vw);
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 240ms ease;
  pointer-events: none;
  z-index: 30;
}

.docs-overscroll-indicator.active {
  opacity: 1;
}

.docs-overscroll-indicator[data-edge="top"] {
  top: calc(var(--docs-panels-top, 0px) + 8px);
}

.docs-overscroll-indicator[data-edge="bottom"] {
  bottom: 12px;
}

.docs-overscroll-indicator-fill {
  height: 100%;
  width: 0%;
  background: var(--color-accent);
  border-radius: 999px;
  transition: width 80ms linear;
}

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .docs-layout {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .docs-sidebar {
    grid-column: 1;
    position: static;
    width: auto;
    max-height: none;
    order: 2;
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border-subtle);
  }

  .docs-content {
    grid-column: 1;
  }
}

@media (max-width: 600px) {
  .docs-root {
    padding: var(--space-md);
  }

  .docs-card-grid {
    grid-template-columns: 1fr;
  }

  .docs-topbar {
    flex-direction: column;
    align-items: stretch;
  }

  .docs-search {
    width: 100%;
  }

  .docs-search-page-hit-header {
    flex-direction: column;
  }

  .docs-search-page-hit-badges {
    justify-content: flex-start;
  }
}