:root {
  --docs-sidebar-width: 17rem;
  --docs-toc-width: 13rem;
}

.docs-shell { display: grid; grid-template-columns: var(--docs-sidebar-width) minmax(0, 1fr) var(--docs-toc-width); min-height: calc(100vh - var(--ui-header-height)); }
.docs-shell-no-toc { grid-template-columns: var(--docs-sidebar-width) minmax(0, 1fr); }
.docs-sidebar { position: sticky; top: 0; align-self: start; max-height: 100vh; overflow: auto; border-right: 1px solid var(--ui-border); padding: 1.5rem; }
.docs-component { display: flex; flex-direction: column; margin-bottom: 1.5rem; }
.docs-component strong { font-size: 1.05rem; }
.docs-component small { color: var(--ui-text-muted); }
.docs-navigation ul { list-style: none; margin: 0; padding: 0; }
.docs-navigation ul ul { padding-left: .8rem; }
.docs-navigation li { margin: .12rem 0; }
.docs-nav-row { display: grid; grid-template-columns: 1.35rem minmax(0, 1fr); align-items: center; }
.docs-nav-row:not(.has-toggle) { grid-template-columns: minmax(0, 1fr); padding-left: 1.35rem; }
.docs-nav-row > a, .docs-nav-row > span, .docs-nav-label { min-width: 0; padding: .35rem .45rem; border-left: 2px solid transparent; color: var(--ui-text-muted); line-height: 1.45; text-decoration: none; overflow-wrap: anywhere; }
.docs-nav-row > span { color: var(--ui-text); }
.docs-nav-label { width: 100%; border-top: 0; border-right: 0; border-bottom: 0; background: transparent; color: var(--ui-text); cursor: pointer; text-align: left; }
.docs-nav-toggle { display: grid; place-items: center; width: 1.25rem; height: 2.15rem; border: 0; background: transparent; color: var(--ui-text-muted); cursor: pointer; padding: 0; }
.docs-nav-toggle > span::before { content: '›'; display: block; font-size: 1.15rem; line-height: 1; transform: rotate(90deg); transition: transform 120ms ease; }
.docs-nav-toggle[aria-expanded="false"] > span::before { transform: rotate(0); }
.docs-navigation .is-current > .docs-nav-row > a { border-left-color: var(--ui-accent); background: var(--ui-surface); color: var(--ui-text); font-weight: 600; }
.docs-navigation a:hover, .docs-nav-toggle:hover, .docs-nav-label:hover { color: var(--ui-accent); }
.docs-main { min-width: 0; padding: 2rem clamp(1.25rem, 6vw, 5rem) 5rem; }
.docs-breadcrumbs { color: var(--ui-text-muted); font-size: .82rem; margin-bottom: 1.5rem; }
.docs-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.docs-breadcrumbs li { display: flex; gap: .35rem; align-items: center; }
.docs-breadcrumbs li + li::before { content: '›'; color: var(--ui-text-muted); }
.docs-breadcrumbs a { color: var(--ui-text-muted); text-decoration: none; }
.docs-breadcrumbs a:hover { color: var(--ui-text); text-decoration: underline; text-decoration-color: var(--ui-accent); text-underline-offset: .22em; }
.docs-breadcrumbs [aria-current="page"] { color: var(--ui-text); font-weight: 600; }
.docs-breadcrumb-home a, .docs-breadcrumb-home span { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; }
.docs-breadcrumb-home a:hover { background: var(--ui-surface); text-decoration: none; }
.docs-article { margin: 0; }
.docs-article h1 { font-size: clamp(2.2rem, 5vw, 3.7rem); }
.docs-page-toc { position: sticky; top: 0; align-self: start; max-height: 100vh; overflow: auto; border-left: 1px solid var(--ui-border); padding: 2rem 1.2rem; display: flex; flex-direction: column; gap: .55rem; font-size: .88rem; }
.docs-page-toc[hidden] { display: none; }
.docs-page-toc-links { display: flex; flex-direction: column; gap: .4rem; }
.docs-page-toc a { border-left: 2px solid transparent; color: var(--ui-text-muted); text-decoration: none; }
.docs-page-toc a:hover { color: var(--ui-text); text-decoration: underline; text-decoration-color: var(--ui-accent); text-underline-offset: .2em; }
.docs-page-toc a[aria-current="location"] { border-left-color: var(--ui-accent); color: var(--ui-text); font-weight: 600; padding-left: 4px; }
.docs-page-toc-link-level-3 { padding-left: .75rem; }
.docs-page-toc-link-level-4 { padding-left: 1.5rem; }
.docs-page-toc-link-level-5, .docs-page-toc-link-level-6 { padding-left: 2.25rem; }
.docs-article-actions { max-width: var(--ui-content-width); margin-top: 2rem; color: var(--ui-text-muted); font-size: .9rem; }
.docs-pagination { max-width: var(--ui-content-width); display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--ui-border); }
.docs-pagination a { display: flex; flex-direction: column; text-decoration: none; }
.docs-pagination .next { margin-left: auto; text-align: right; }
.docs-pagination small { color: var(--ui-text-muted); text-transform: uppercase; letter-spacing: .08em; }

@media (max-width: 62rem) {
  .docs-shell { grid-template-columns: var(--docs-sidebar-width) minmax(0, 1fr); }
  .docs-page-toc { display: none; }
}

@media (max-width: 44rem) {
  .docs-shell { display: block; }
  .docs-sidebar { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--ui-border); }
  .docs-main { padding-inline: var(--ui-space-page); }
}

@media print {
  .docs-shell { display: block; }
  .docs-sidebar, .docs-page-toc, .docs-pagination, .docs-article-actions { display: none; }
  .docs-main { padding: 0; }
}