/* ── Documentation chrome ────────────────────────────────────────────────────
   One copy, loaded by every documentation page for both products. These rules
   lived inline in all 8 doc pages — 418 copies of ~95 rules — and had already
   drifted: Bulk Comments carried a 1.5rem h2 where Bulk Page Cloner carried
   1.3rem, the same component at two sizes. The scale here is Bulk Comments',
   which is the one that was being maintained.

   Not drift, and preserved: each product's accent. Two tokens, because the
   palette uses two different indigos — the accent TEXT and the FILL behind a
   callout are not the same colour, and collapsing them tints every tip box.
   ────────────────────────────────────────────────────────────────────────── */
:root { --doc-accent: #A5B4FC; --doc-accent-rgb: 165,180,252; --doc-fill-rgb: 99,102,241; --doc-fill: #6366F1; }
body[data-doc-product="bulkpagecloner"] { --doc-accent: var(--teal); --doc-accent-rgb: 5,206,240; --doc-fill-rgb: 5,206,240; --doc-fill: var(--teal); }

.doc-layout { display: grid; grid-template-columns: 220px 1fr; gap: 48px; max-width: 1100px; margin: 0 auto; padding: 56px 48px 80px; align-items: start; }
.doc-sidebar { position: sticky; top: 100px; }
.doc-toc-heading { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); margin: 0 0 12px; }
.doc-toc a { display: block; font-size: 0.84rem; color: var(--slate); text-decoration: none; padding: 5px 0 5px 12px; border-left: 2px solid var(--border); transition: color 0.15s, border-color 0.15s; line-height: 1.4; margin-bottom: 2px; }
.doc-toc a:hover { color: var(--doc-accent); border-left-color: var(--doc-accent); }
.doc-toc a.active { color: var(--doc-accent); border-left-color: var(--doc-accent); font-weight: 600; }
.doc-content h2 { color: var(--white); font-size: 1.5rem; font-weight: 700; margin: 64px 0 18px; padding-top: 8px; scroll-margin-top: 100px; }
.doc-content h2:first-child { margin-top: 0; }

/* A top-level section break has to read as bigger than the h3 breaks inside it.
   Every section's own h2 is a :first-child, so it drops the 64px heading margin
   above — which left a 20px gap between sections and 44px between subsections,
   exactly backwards. The break belongs to the section, not to the heading. */
.doc-content > section + section { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--border); }
.doc-content h3 { color: var(--white); font-size: 1.2rem; font-weight: 700; margin: 44px 0 12px; }
.doc-content h4 { color: var(--white); font-size: 1.02rem; font-weight: 700; margin: 32px 0 10px; }
.doc-content p { color: var(--slate); font-size: 0.93rem; line-height: 1.8; margin: 0 0 20px; max-width: 61ch; }
.doc-content li { max-width: 59ch; }
.doc-content ul, .doc-content ol { color: var(--slate); font-size: 0.93rem; line-height: 1.8; padding-left: 22px; margin: 0 0 16px; }
.doc-content li { margin-bottom: 9px; }
.doc-content strong { color: var(--white); }
.doc-content code { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; font-size: 0.85em; background: rgba(var(--doc-fill-rgb),0.10); border: 1px solid rgba(var(--doc-fill-rgb),0.18); border-radius: 4px; padding: 1px 5px; color: #C7D2FE; }
.doc-content .scope-flag { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; font-size: 0.78em; font-weight: 600; background: rgba(87,157,255,0.10); border: 1px solid rgba(87,157,255,0.26); border-radius: 4px; padding: 1px 6px; color: #93C5FD; white-space: nowrap; }
.doc-content kbd { font-family: inherit; font-size: 0.8rem; font-weight: 600; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); border-bottom-width: 2px; border-radius: 5px; padding: 2px 7px; color: var(--white); white-space: nowrap; }
.doc-content a { color: var(--doc-accent); text-decoration: none; }
.doc-content a:hover { text-decoration: underline; }
.doc-img-card { background: var(--black-3); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin: 16px 0; cursor: zoom-in; transition: border-color 0.2s; }
.doc-img-card:hover { border-color: rgba(var(--doc-fill-rgb),0.4); }
.doc-img-card img { width: 100%; height: auto; display: block; }
.doc-img-card--static { cursor: default; }
.doc-img-card--static svg { width: 100%; height: auto; display: block; }
.doc-figure { margin: 20px 0 26px; }
.doc-figure img { width: 100%; height: auto; display: block; border-radius: 10px; border: 1px solid var(--border); box-shadow: 0 14px 40px rgba(0,0,0,0.35); cursor: zoom-in; transition: border-color 0.2s; }
.doc-figure img:hover { border-color: rgba(var(--doc-fill-rgb),0.4); }
.doc-shot-todo { margin: 20px 0; border: 1px dashed rgba(5,206,240,0.35); border-radius: 12px; background: rgba(5,206,240,0.03); padding: 22px 20px; text-align: left; }
.doc-figure figcaption { margin-top: 11px; font-size: 0.84rem; color: var(--slate); line-height: 1.65; }
.doc-toc--pages { margin-bottom: 26px; }
.doc-toc--pages a { font-weight: 600; }
.doc-toc--pages a.is-current { color: var(--white); border-left-color: currentColor; }
.doc-toc-heading--sub { margin-top: 26px; }
.ts-item { border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; margin: 0 0 14px; background: rgba(255,255,255,0.015); }
.doc-content code { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 0.86em; background: rgba(255,255,255,0.06); border-radius: 4px; padding: 1px 5px; }
.doc-tip { background: rgba(var(--doc-fill-rgb),0.07); border-left: 3px solid var(--doc-fill); padding: 14px 18px; border-radius: 0 8px 8px 0; margin: 16px 0; }
.doc-tip p { color: var(--white); margin: 0; font-size: 0.9rem; }
.doc-warning { background: rgba(251,191,36,0.06); border-left: 3px solid #FBB924; padding: 14px 18px; border-radius: 0 8px 8px 0; margin: 16px 0; }
.doc-warning p { color: var(--white); margin: 0; font-size: 0.9rem; }
.spec-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 0.88rem; }
.spec-table th { background: rgba(var(--doc-fill-rgb),0.09); color: var(--white); padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); font-weight: 600; }
.spec-table td { padding: 10px 14px; color: var(--slate); border-bottom: 1px solid var(--border); }
.spec-table tbody tr:last-child td { border-bottom: none; }
.doc-support-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin: 20px 0; }
.doc-support-card { background: var(--black-3); border: 1px solid var(--border); border-radius: 10px; padding: 20px; text-align: center; }
.doc-support-card h3 { color: var(--white); font-size: 0.95rem; margin: 0 0 6px; }
.doc-support-card p { color: var(--slate); font-size: 0.82rem; margin: 0 0 12px; }
.doc-support-card a { color: var(--doc-accent); font-size: 0.84rem; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.doc-hero-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(var(--doc-fill-rgb),0.1); border: 1px solid rgba(var(--doc-fill-rgb),0.3); color: var(--doc-accent); font-size: 0.75rem; font-weight: 600; padding: 4px 10px; border-radius: 20px; margin-right: 6px; margin-bottom: 4px; }
.doc-hero-badge--roa { background: rgba(87,157,255,0.10); border-color: rgba(87,157,255,0.32); color: #579DFF; }
.doc-hero-badge--roa svg { fill: currentColor; flex-shrink: 0; }
.release-note { border: 1px solid rgba(255,255,255,0.09); border-radius: 10px; margin: 10px 0; background: rgba(255,255,255,0.02); overflow: hidden; }
.release-note > summary { cursor: pointer; padding: 14px 18px; display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--white); list-style: none; transition: background 0.15s ease; }
.release-note > summary::-webkit-details-marker { display: none; }
.release-note > summary:hover { background: rgba(255,255,255,0.03); }
.release-note > summary:focus-visible { outline: 2px solid #818CF8; outline-offset: -2px; }
.release-note .rn-chevron { flex-shrink: 0; color: #818CF8; transition: transform 0.2s ease; }
.release-note[open] .rn-chevron { transform: rotate(90deg); }
.release-note .rn-date { margin-left: auto; font-size: 0.8rem; font-weight: 500; color: rgba(255,255,255,0.45); }
.release-note .rn-tag { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: rgba(129,140,248,0.15); border: 1px solid rgba(129,140,248,0.3); color: #818CF8; padding: 2px 8px; border-radius: 20px; }
.release-note .rn-body { padding: 0 18px 16px 18px; }
.release-note .rn-body p { margin-top: 0; }
.release-note .rn-body ul { margin-bottom: 0; }
.ts-item .ts-msg { color: var(--white); font-weight: 600; font-size: 0.92rem; line-height: 1.6; margin: 0 0 10px; max-width: none; overflow-wrap: anywhere; }
.ts-item .ts-cause, .ts-item .ts-fix { font-size: 0.89rem; line-height: 1.75; margin: 0 0 8px; max-width: none; }
.ts-item .ts-fix { margin-bottom: 0; }
.ts-item .ts-cause::before { content: 'Why'; display: block; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #7C8698; margin-bottom: 3px; }
.ts-item .ts-fix::before { content: 'Fix'; display: block; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--doc-accent); margin-bottom: 3px; }
.doc-video { position: relative; aspect-ratio: 16 / 9; height: auto; padding: 0; cursor: default; }
.doc-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.doc-video-play { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: linear-gradient(160deg, rgba(5,206,240,0.09) 0%, var(--black-3) 62%); border: 0; cursor: pointer; font-family: inherit; color: var(--white); transition: background 0.25s; }
.doc-video-play:hover { background: linear-gradient(160deg, rgba(5,206,240,0.15) 0%, var(--black-3) 62%); }
.doc-video-play:focus-visible { outline: 2px solid var(--doc-accent); outline-offset: -4px; }
.doc-video-ring { width: 66px; height: 66px; border-radius: 50%; background: var(--doc-accent); color: var(--black); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 40px rgba(5,206,240,0.35); transition: transform 0.2s; }
.doc-video-play:hover .doc-video-ring { transform: scale(1.06); }
.doc-video-label { font-size: 0.92rem; font-weight: 600; }
.doc-video-sub { font-size: 0.76rem; color: var(--slate); }
.doc-video-gate { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px; text-align: center; background: var(--black-3); }
.doc-video-gate-title { font-size: 0.92rem; font-weight: 600; color: var(--white); margin: 0; }
.doc-video-gate-sub { font-size: 0.78rem; color: var(--slate); margin: 0; max-width: 34ch; }
.doc-video-gate-btn { margin-top: 4px; min-height: 44px; padding: 10px 18px; font-family: inherit; font-size: 0.84rem; font-weight: 600; color: var(--black); background: var(--doc-accent); border: 0; border-radius: 9px; cursor: pointer; }
.doc-video-gate-btn:hover { filter: brightness(1.08); }
.doc-video-fallback { font-size: 0.86rem; }

@media (max-width: 820px) {
  .doc-layout { grid-template-columns: 1fr; padding: 36px 24px 60px; gap: 0; }
  .doc-sidebar { position: static; display: flex; flex-direction: column; align-items: center; margin-bottom: 34px; padding-bottom: 28px; border-bottom: 1px solid var(--border); }
  .doc-sidebar .doc-toc-heading { text-align: center; margin-bottom: 10px; }
  .doc-sidebar .doc-toc { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; width: 100%; max-width: 100%; }
  .doc-sidebar .doc-toc a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 14px; margin-bottom: 0; border: 1px solid var(--border); border-left: 1px solid var(--border); border-radius: 9px; font-size: 0.78rem; line-height: 1.2; background: transparent; white-space: nowrap; transition: color 0.15s, border-color 0.15s, background 0.15s; }
  .doc-sidebar .doc-toc--pages a { background: rgba(var(--doc-fill-rgb),0.09); border-color: rgba(var(--doc-fill-rgb),0.28); color: #B9C2F0; font-weight: 600; }
  .doc-sidebar .doc-toc--pages a.is-current { background: rgba(var(--doc-fill-rgb),0.2); border-color: var(--doc-accent); color: #E8F4FF; }
  .doc-sidebar .doc-toc a:hover, .doc-sidebar .doc-toc a.active { color: var(--doc-accent); border-color: rgba(var(--doc-accent-rgb),0.5); background: rgba(var(--doc-fill-rgb),0.12); }
}

@media (prefers-reduced-motion: reduce) {
  .release-note .rn-chevron, .release-note > summary { transition: none; }
  .doc-video-play, .doc-video-ring { transition: none; }
  .doc-video-play:hover .doc-video-ring { transform: none; }
}

/* ── "On this page", two levels ──────────────────────────────────────────────
   Every section's subheadings are always visible. An earlier version revealed
   only the active section's, which left a hole where the collapsed ones had
   been — `grid-template-rows: 0fr` sizes the FIRST row only, so the remaining
   links dropped into auto-sized implicit rows and kept their height. Showing
   them all is also simply more useful: the whole complaint was that Step 2 was
   unreachable from the sidebar.

   Built by /js/docs-toc.js.
   ────────────────────────────────────────────────────────────────────────── */
.doc-toc-group { display: block; }
.doc-toc-sub { display: block; }
.doc-toc-sub a {
  font-size: 0.79rem;
  padding-top: 4px; padding-bottom: 4px; padding-left: 24px;
  border-left-color: transparent; opacity: .82;
}
.doc-toc-sub a:hover { opacity: 1; }
.doc-toc-sub a.active { opacity: 1; border-left-color: var(--doc-accent); }
/* The section you are in is marked on the parent too, so the group reads as a
   unit even when the active link is one of its children. */
.doc-toc-group.is-open > a { color: var(--doc-accent); }

/* ── Documentation hub cards ─────────────────────────────────────────────── */
.doc-hub { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 18px 0 8px; }
.doc-hub-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 18px; border-radius: 12px; text-decoration: none;
  background: rgba(var(--doc-fill-rgb),0.06); border: 1px solid rgba(var(--doc-accent-rgb),0.22);
  transition: background .15s, border-color .15s, transform .15s;
}
.doc-hub-card:hover { background: rgba(var(--doc-fill-rgb),0.12); border-color: var(--doc-accent); transform: translateY(-1px); }
.doc-hub-card-title { font-size: 0.95rem; font-weight: 700; color: var(--doc-accent); }
.doc-hub-card-sub { font-size: 0.84rem; color: var(--slate); line-height: 1.55; }
@media (max-width: 620px) { .doc-hub { grid-template-columns: 1fr; } }

/* A grid item will not shrink below its content unless told to, which let a
   long heading push the page sideways on a narrow phone. Belongs on the
   column, not on the heading — otherwise every new long word is a new bug. */
.doc-content, .doc-sidebar { min-width: 0; }
.doc-content h1, .doc-content h2, .doc-content h3, .doc-content h4 { overflow-wrap: break-word; }

/* A sticky sidebar taller than the viewport hides its own last entries. The
   Reference section alone carries sixteen, so give it its own scroll once it
   outgrows the screen — and hide the scrollbar until it is used. */
.doc-sidebar { max-height: calc(100vh - 120px); overflow-y: auto; scrollbar-width: thin; }
.doc-sidebar::-webkit-scrollbar { width: 6px; }
.doc-sidebar::-webkit-scrollbar-thumb { background: rgba(var(--doc-accent-rgb),0.25); border-radius: 3px; }
.doc-sidebar::-webkit-scrollbar-track { background: transparent; }
@media (max-width: 820px) { .doc-sidebar { max-height: none; overflow: visible; } }
@media (max-width: 820px) { .doc-content > section + section { margin-top: 40px; padding-top: 28px; } }

/* Third level: the comment editor's own parts, so "what is the shortcut for
   bold" is one click rather than a blind scroll through 1,100 words. */
.doc-toc-sub a.doc-toc-member { padding-left: 36px; font-size: 0.75rem; opacity: .7; }
.doc-toc-sub a.doc-toc-member:hover, .doc-toc-sub a.doc-toc-member.active { opacity: 1; }

/* ── Page tree, breadcrumbs, prev/next ───────────────────────────────────────
   All rendered by /js/docs-tree.js from one manifest. The tree replaces the
   flat page list that used to be duplicated byte-for-byte in every doc page. */
.doc-tree-row { display: flex; align-items: stretch; }
.doc-tree-row > a { flex: 1; min-width: 0; }
.doc-tree-toggle {
  flex: 0 0 auto; width: 20px; margin-right: -6px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; color: var(--slate);
  opacity: .55; transition: opacity .15s, transform .15s;
}
.doc-tree-toggle svg { transition: transform .15s; }
.doc-tree-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.doc-tree-toggle:hover { opacity: 1; color: var(--doc-accent); }
.doc-tree-toggle:focus-visible { outline: 2px solid var(--doc-accent); outline-offset: 2px; border-radius: 4px; opacity: 1; }
.doc-tree-children a { padding-left: 26px; font-size: 0.8rem; opacity: .78; }
.doc-tree-children a:hover, .doc-tree-children a.is-current { opacity: 1; }
.doc-toc--pages a.is-current { color: var(--doc-accent); border-left-color: var(--doc-accent); font-weight: 600; }


.doc-prevnext { display: flex; gap: 12px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--border); }
.doc-prevnext:empty { display: none; }
.doc-prevnext-link {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px;
  text-decoration: none; transition: background .15s, border-color .15s;
}
.doc-prevnext-link:hover { background: rgba(var(--doc-fill-rgb),0.12); border-color: var(--doc-accent); text-decoration: none; }
.doc-prevnext-link--next { text-align: right; }
.doc-prevnext-link--next:only-child { margin-left: auto; flex: 0 1 50%; }
.doc-prevnext-dir { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--slate); opacity: .8; }
.doc-prevnext-title { font-size: 0.9rem; font-weight: 600; color: var(--doc-accent); overflow-wrap: break-word; }

@media (max-width: 820px) {
  /* The rail becomes a wrapped pill row on mobile, where indentation reads as
     noise — so the tree flattens and the chevrons go away. */
  .doc-sidebar .doc-tree-row { display: contents; }
  .doc-sidebar .doc-tree-toggle { display: none; }
  .doc-sidebar .doc-tree-children { display: contents; }
  .doc-sidebar .doc-tree-children a { padding-left: 14px; font-size: 0.74rem; opacity: 1; }
  .doc-prevnext { flex-direction: column; margin-top: 40px; }
  .doc-prevnext-link--next { text-align: left; }
  .doc-prevnext-link--next:only-child { margin-left: 0; flex: 1; }
}


/* ── Sidebar, redesigned ──────────────────────────────────────────────────────
   Replaces the picket fence: every link used to carry a 2px border-left with a
   2px margin under it, so the rail read as a column of disconnected stubs and
   the current page was one stub among fifteen. Dropping the gap makes those
   borders contiguous — one continuous spine, with the current page a solid
   accent segment of it. Same two pixels, doing structural work instead of
   decorating each row.

   The other change is contrast. Depth used to be signalled by fading the text
   (opacity .78 on children, .70 on members), which put them at 3.6:1 and 3.1:1
   against the page — below the 4.5:1 floor. Depth is now indentation and the
   colours are explicit: 7.8:1 idle, 13.5:1 hover, 18:1 current.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  --doc-rail:      rgba(255,255,255,0.08);
  --doc-nav-idle:  #8FA3BC;
  --doc-nav-hover: #C7D2FE;
  --doc-nav-kid:   #859AB4;
}
body[data-doc-product="bulkpagecloner"] { --doc-nav-hover: #9FE9F7; }

.doc-layout { grid-template-columns: 236px 1fr; }

.doc-sidebar .doc-toc-heading { font-size: 0.66rem; letter-spacing: 0.12em; color: var(--doc-nav-idle); margin-bottom: 10px; }
.doc-sidebar .doc-toc-heading--sub { margin-top: 30px; }

/* One spine, no gaps. */
.doc-sidebar .doc-toc a {
  margin-bottom: 0;
  padding: 7px 8px 7px 13px;
  border-left: 2px solid var(--doc-rail);
  border-radius: 0 6px 6px 0;
  color: var(--doc-nav-idle);
  font-weight: 500;
  transition: color .15s, border-color .15s, background .15s;
}
.doc-sidebar .doc-toc a:hover { color: var(--doc-nav-hover); border-left-color: rgba(var(--doc-accent-rgb),0.55); background: rgba(var(--doc-fill-rgb),0.07); }
.doc-sidebar .doc-toc a:focus-visible { outline: 2px solid var(--doc-accent); outline-offset: -2px; border-radius: 6px; color: var(--doc-nav-hover); }

.doc-sidebar .doc-toc--pages a { font-weight: 600; }
.doc-sidebar .doc-toc--pages a.is-current,
.doc-sidebar .doc-toc--auto a.active {
  color: var(--white);
  border-left-color: var(--doc-accent);
  background: rgba(var(--doc-fill-rgb),0.13);
  font-weight: 600;
}

/* Children: indented, never faded. */
.doc-sidebar .doc-tree-children a { padding-left: 27px; font-size: 0.8rem; opacity: 1; color: var(--doc-nav-kid); font-weight: 500; }
.doc-sidebar .doc-tree-children a:hover { color: var(--doc-nav-hover); }
.doc-sidebar .doc-tree-children a.is-current { color: var(--white); }

/* The step number is the marker; the title beside it is the label. */
.doc-tree-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-right: 7px; margin-left: -20px;
  border-radius: 4px; background: rgba(var(--doc-fill-rgb),0.16);
  color: var(--doc-accent); font-size: 0.62rem; font-weight: 700;
  font-variant-numeric: tabular-nums; vertical-align: 1px;
}
.doc-sidebar .doc-tree-children a.is-current .doc-tree-num { background: var(--doc-accent); color: #0A1020; }

.doc-tree-toggle { opacity: .7; }

/* "On this page" is subordinate: a 1px spine against the pages' 2px. */
.doc-sidebar .doc-toc--auto a { border-left-width: 1px; padding-left: 14px; font-weight: 500; font-size: 0.82rem; }
.doc-sidebar .doc-toc--auto .doc-toc-sub a { padding-left: 26px; font-size: 0.78rem; opacity: 1; color: var(--doc-nav-kid); }
.doc-sidebar .doc-toc--auto .doc-toc-sub a.active { color: var(--white); }
.doc-sidebar .doc-toc--auto a.active { border-left-width: 2px; }


@media (max-width: 820px) {
  .doc-layout { grid-template-columns: 1fr; }
  .doc-sidebar .doc-toc a { border-left: 1px solid var(--border); border-radius: 9px; padding: 10px 14px; }
  .doc-sidebar .doc-tree-children a { padding-left: 14px; }
  .doc-tree-num { margin-left: 0; }
}

/* The chevron used to be a flex sibling of the link, so any row that had one
   pushed its link 14px right — and the "one continuous spine" above was in
   fact two columns, 166px and 180px. The toggle now sits in its own gutter on
   the right and every link starts at the same x. */
.doc-sidebar .doc-tree-row { position: relative; display: block; }
.doc-sidebar .doc-tree-row > a { padding-right: 26px; }
.doc-sidebar .doc-tree-toggle { position: absolute; right: 2px; top: 4px; width: 22px; height: 22px; margin: 0; }

@media (max-width: 820px) {
  .doc-sidebar .doc-tree-row { display: contents; }
  .doc-sidebar .doc-tree-row > a { padding-right: 14px; }
}

/* `hidden` is only display:none at specificity (0,1,0), so every explicit
   display rule above outranks it and the filter silently hid nothing. */
.doc-sidebar .doc-tree-row[hidden],
.doc-sidebar .doc-tree-children[hidden],
.doc-sidebar .doc-toc a[hidden],
 { display: none !important; }