/* vyasa-docs: base styles. Everything reads the theme's custom properties
   and falls back to neutral values, so a theme that defines none still
   renders documentation acceptably. */
.docs-nav, .docs-toc, .docs-pager, .docs-crumbs, .docs-banner, .docs-search, .docs-versions,
.docs-tabs, .docs-steps, .docs-params, .docs-tree, .docs-drawer, .docs-toc__drawer {
  --docs-text: var(--vy-color-text, #1b1d21);
  --docs-muted: var(--vy-color-text-muted, #5f6672);
  --docs-border: var(--vy-color-border, #d9dce1);
  --docs-surface: var(--vy-color-surface, #f5f6f8);
  --docs-accent: var(--vy-color-primary, #2f5fd0);
  --docs-on-accent: var(--vy-color-on-primary, #fff);
  --docs-radius: var(--vy-radius, 6px);
  color: var(--docs-text);
  font-size: .95rem;
}

/* Layout: sidebar | content | on this page. */
.vy-section.vy-columns[data-section="docs-layout"] {
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr) minmax(0, 14rem);
  gap: 2rem;
  align-items: start;
  max-width: 90rem;
  margin-inline: auto;
}
.vy-section.vy-columns[data-section="docs-layout"] > * { min-width: 0; margin-inline: 0; }
[data-section="docs-side"], [data-section="docs-aside"] { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; }
@media (max-width: 64rem) {
  .vy-section.vy-columns[data-section="docs-layout"] { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  [data-section="docs-side"], [data-section="docs-aside"] { position: static; max-height: none; overflow: visible; }
  /* On a phone: search and the menu, then "On this page", then the page. */
  [data-section="docs-main"] { order: 1; }
}

/* A theme's section rules are written for full-width bands on a landing
   page (generous block padding, a gutter on every child). Applied again at
   every level inside the docs layout they stack into empty gaps and a page
   wider than the phone, so the layout keeps one gutter, its own. */
.vy-section.vy-columns[data-section="docs-layout"] { padding-block: 1.5rem; }
[data-section="docs-layout"] .vy-section { padding-block: 0; margin-block: 0; }
[data-section="docs-layout"] .vy-section > * { padding-inline: 0; max-width: none; }
[data-section="docs-layout"] > .vy-group { margin-block: 0; }
[data-section="docs-layout"] .vy-group > * + * { margin-top: 1rem; }
[data-section="docs-layout"] .vy-table, [data-section="docs-layout"] pre { max-width: 100%; overflow-x: auto; }
[data-section="docs-layout"] :not(pre) > code { overflow-wrap: anywhere; }
[data-section="docs-layout"] img, [data-section="docs-layout"] video { max-width: 100%; height: auto; }
/* No banner on the latest version: no empty band either. */
.vy-section--docs\/version-banner:not(:has(.docs-banner)) { display: none; }

.docs-title { margin: .5rem 0 1rem; font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem); line-height: 1.15; letter-spacing: -.02em; }

/* Drawers: always open on a wide screen; the script closes them on a phone. */
.docs-drawer > summary, .docs-toc__drawer > summary {
  list-style: none; cursor: pointer; font-weight: 600; padding: .5rem .75rem;
  border: 1px solid var(--docs-border); border-radius: var(--docs-radius);
}
.docs-drawer > summary::-webkit-details-marker, .docs-toc__drawer > summary::-webkit-details-marker { display: none; }
@media (min-width: 64.01rem) {
  .docs-drawer > summary, .docs-toc__drawer > summary { display: none; }
}
.docs-toc__drawer > summary { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--docs-muted); }

/* Sidebar */
.docs-nav__list { list-style: none; margin: 0; padding-left: 0; }
.docs-nav__list .docs-nav__list { padding-left: .9rem; border-left: 1px solid var(--docs-border); margin-left: .35rem; }
.docs-nav__item { margin: .1rem 0; }
.docs-nav__label { margin: 1rem 0 .25rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--docs-muted); }
.docs-nav__link { display: block; padding: .25rem .5rem; border-radius: var(--docs-radius); color: var(--docs-text); text-decoration: none; }
.docs-nav__link:hover { background: var(--docs-surface); }
.docs-nav__link.is-current { background: var(--docs-surface); color: var(--docs-accent); font-weight: 600; }
.docs-nav__group > details > summary { list-style: none; cursor: pointer; }
.docs-nav__group > details > summary::-webkit-details-marker { display: none; }

/* Versions, search, breadcrumbs, banner */
.docs-versions { margin: .75rem 0; }
.docs-versions ul { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; padding: 0; margin: .25rem 0 0; }
.docs-versions__label { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--docs-muted); }
.docs-versions__link { padding: .1rem .5rem; border: 1px solid var(--docs-border); border-radius: 999px; text-decoration: none; color: var(--docs-text); font-size: .8rem; }
.docs-versions__link.is-current { background: var(--docs-accent); color: var(--docs-on-accent); border-color: var(--docs-accent); }
.docs-search { display: flex; gap: .4rem; margin-bottom: .75rem; }
.docs-search__input { flex: 1; min-width: 0; padding: .4rem .6rem; border: 1px solid var(--docs-border); border-radius: var(--docs-radius); background: var(--vy-color-bg, #fff); color: var(--docs-text); }
.docs-search__button { padding: .4rem .8rem; border: 0; border-radius: var(--docs-radius); background: var(--docs-accent); color: var(--docs-on-accent); cursor: pointer; }
.docs-crumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0 0 1rem; color: var(--docs-muted); }
.docs-crumbs li + li::before { content: "/"; margin-right: .4rem; }
.docs-crumbs a { color: inherit; }
.docs-banner { padding: .75rem 1rem; margin-bottom: 1rem; border: 1px solid var(--docs-border); border-left: 4px solid #d29922; border-radius: var(--docs-radius); background: var(--docs-surface); }

/* On this page, pager */
.docs-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--docs-border); }
.docs-toc a { display: block; padding: .15rem .75rem; color: var(--docs-muted); text-decoration: none; }
.docs-toc a:hover, .docs-toc a.is-active { color: var(--docs-accent); }
.docs-toc__l3 a { padding-left: 1.5rem; }
.docs-pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; }
.docs-pager__link { flex: 1; display: flex; flex-direction: column; padding: .75rem 1rem; border: 1px solid var(--docs-border); border-radius: var(--docs-radius); text-decoration: none; color: var(--docs-text); }
.docs-pager__next { text-align: right; margin-left: auto; }
.docs-pager__hint { font-size: .75rem; color: var(--docs-muted); }
.docs-pager__title { font-weight: 600; color: var(--docs-accent); }

/* Blocks */
.docs-tabs { margin: 1rem 0; border: 1px solid var(--docs-border); border-radius: var(--docs-radius); overflow: hidden; }
.docs-tabs__list { display: none; background: var(--docs-surface); border-bottom: 1px solid var(--docs-border); }
.docs-tabs__tab { padding: .5rem 1rem; border: 0; background: none; color: var(--docs-muted); cursor: pointer; font: inherit; }
.docs-tabs__tab.is-active { color: var(--docs-accent); box-shadow: inset 0 -2px 0 var(--docs-accent); }
.docs-tabs__panel { padding: .75rem 1rem; }
.docs-tabs__label { margin: 0 0 .25rem; font-weight: 600; color: var(--docs-muted); }
.docs-tabs.is-enhanced .docs-tabs__list { display: flex; }
.docs-tabs.is-enhanced .docs-tabs__label { display: none; }
.docs-tabs.is-enhanced .docs-tabs__panel { display: none; }
.docs-tabs.is-enhanced .docs-tabs__panel.is-active { display: block; }
.docs-code { margin: 0; overflow: auto; padding: .75rem 1rem; background: var(--docs-surface); border-radius: var(--docs-radius); }
.docs-steps { list-style: none; counter-reset: docs-step; margin: 1rem 0; padding-left: 0; }
.docs-steps__item { position: relative; padding: 0 0 1.25rem 2.75rem; border-left: 1px solid var(--docs-border); margin-left: 1rem; counter-increment: docs-step; }
.docs-steps__item::before { content: counter(docs-step); position: absolute; left: -1rem; top: 0; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--docs-surface); border: 1px solid var(--docs-border); font-weight: 600; }
.docs-params { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.docs-params th, .docs-params td { padding: .5rem .6rem; border-bottom: 1px solid var(--docs-border); text-align: left; vertical-align: top; }
.docs-params__req { margin-left: .35rem; font-size: .7rem; color: #b42318; text-transform: uppercase; }
.docs-tree { margin: 1rem 0; padding: .75rem 1rem; background: var(--docs-surface); border-radius: var(--docs-radius); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; }
.docs-tree ul { list-style: none; margin: 0; padding-left: 1.1rem; }
.docs-tree > ul { padding-left: 0; }
.docs-tree__note { color: var(--docs-muted); }
.docs-copy { position: absolute; top: .4rem; right: .4rem; padding: .15rem .5rem; font-size: .75rem; border: 1px solid var(--docs-border); border-radius: var(--docs-radius); background: var(--vy-color-bg, #fff); cursor: pointer; }
.docs-placeholder { padding: .75rem 1rem; border: 1px dashed var(--docs-border); border-radius: var(--docs-radius); color: var(--docs-muted); font-size: .85rem; }
