/* Page layout and documentation tools. Components live in css/components/. */
* { box-sizing: border-box; }
html { scroll-padding-top: 6rem; }
body { margin: 0; background: var(--vx-color-bg); color: var(--vx-color-text); font: var(--vx-text-md)/var(--vx-leading-relaxed) var(--vx-font-sans); }
a { color: var(--vx-color-primary); text-underline-offset: .2em; }
:focus-visible { outline: var(--vx-focus-width) solid var(--vx-color-focus); outline-offset: var(--vx-focus-offset); }
.docs-topbar > button { margin-left: auto; }
.docs-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); max-width: 90rem; margin: auto; }
.docs-sidebar { position: sticky; top: 5rem; align-self: start; max-height: calc(100dvh - 5rem); overflow: auto; padding: var(--vx-space-8) var(--vx-space-6); }
.docs-sidebar nav { display: grid; gap: var(--vx-space-1); }
.docs-sidebar a { padding: var(--vx-space-2) var(--vx-space-3); border-radius: var(--vx-radius-md); text-decoration: none; color: var(--vx-color-text-muted); }
.docs-sidebar a:hover, .docs-sidebar a[aria-current="location"] { background: var(--vx-color-primary); color: var(--vx-color-on-primary); }
main { min-width: 0; max-width: 65rem; padding: var(--vx-space-10) var(--vx-space-12); }
h1, h2, h3 { line-height: var(--vx-leading-tight); letter-spacing: -.025em; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); margin-block: var(--vx-space-6); }
h2 { font-size: var(--vx-text-3xl); margin-top: 0; }
h3 { font-size: var(--vx-text-xl); margin-top: var(--vx-space-8); }
.docs-hero { padding-block: var(--vx-space-8) var(--vx-space-12); }
.docs-hero > p { max-width: 42rem; font-size: var(--vx-text-lg); color: var(--vx-color-text-muted); }
main > section { padding-block: var(--vx-space-10); border-top: 1px solid var(--vx-color-border); }
code, pre { font-family: var(--vx-font-mono); font-size: var(--vx-text-sm); }
p code { overflow-wrap: anywhere; }
.docs-code { position: relative; margin-block: var(--vx-space-4) var(--vx-space-6); border: 1px solid var(--vx-color-border); border-radius: var(--vx-radius-md); background: var(--vx-color-surface-muted); }
.docs-code > button { display: block; margin: var(--vx-space-3) var(--vx-space-3) 0 auto; }
pre { overflow: auto; margin: 0; padding: var(--vx-space-4); line-height: var(--vx-leading-relaxed); tab-size: 2; }
.docs-preview { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vx-space-3); padding: var(--vx-space-6); border: 1px solid var(--vx-color-border); border-radius: var(--vx-radius-lg); background: var(--vx-color-surface); margin-top: var(--vx-space-6); }
.docs-preview > .vx-card { width: 100%; max-width: 30rem; }
.docs-preview > .vx-alert { width: 100%; }
.docs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vx-space-4); }
.docs-muted { color: var(--vx-color-text-muted); }
.docs-table { max-width: 100%; overflow: auto; margin-block: var(--vx-space-4) var(--vx-space-8); border: 1px solid var(--vx-color-border); border-radius: var(--vx-radius-md); }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: var(--vx-text-sm); }
caption { text-align: left; padding: var(--vx-space-3) var(--vx-space-4); color: var(--vx-color-text-muted); }
th, td { padding: var(--vx-space-3) var(--vx-space-4); border-top: 1px solid var(--vx-color-border); }
thead { background: var(--vx-color-surface-muted); }
tbody th { font-weight: var(--vx-font-normal); }
.docs-color { display: block; width: 2rem; height: 2rem; border: 1px solid var(--vx-color-border); border-radius: var(--vx-radius-sm); }
.docs-space { display: block; height: .75rem; background: var(--vx-color-primary); }
.docs-footer { padding-block: var(--vx-space-8); color: var(--vx-color-text-muted); font-size: var(--vx-text-sm); }
.docs-sr-only, .docs-skip:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.docs-skip:focus { position: fixed; top: 1rem; left: 1rem; z-index: 5; }
@media (max-width: 52rem) {
  .docs-layout { display: block; }
  .docs-sidebar { position: static; padding: var(--vx-space-4); max-height: none; border-bottom: 1px solid var(--vx-color-border); }
  .docs-sidebar nav { display: flex; overflow-x: auto; }
  .docs-sidebar a { white-space: nowrap; }
  .docs-sidebar > p { display: none; }
  main { padding: var(--vx-space-6) var(--vx-space-4); }
  .docs-grid { grid-template-columns: 1fr; }
  .docs-hero .vx-btn { margin-bottom: var(--vx-space-2); }
}
/* Catalog navigation and search. */
.docs-layout { grid-template-columns: 15rem minmax(0, 1fr) 11rem; max-width: 100rem; }
.docs-sidebar { border-inline-end: 1px solid var(--vx-color-border); }
.docs-sidebar nav { margin-top: var(--vx-space-6); }
.docs-nav-group a { display: block; }
.docs-toc { position: sticky; top: 6rem; align-self: start; display: grid; gap: var(--vx-space-3); padding: var(--vx-space-8) var(--vx-space-4); }
.docs-toc a { font-size: var(--vx-text-sm); }
[data-docs-menu] { display: none; }
.docs-preview > .vx-grid { width: 100%; }
.docs-preview .vx-field:last-child { margin-bottom: 0; }
.docs-preview h3 { margin-top: 0; }
.docs-preview .vx-accordion-heading { margin: 0; }
.docs-preview .vx-modal { width: 32rem; }
.docs-source { margin-left: auto; font-size: var(--vx-text-sm); }
.docs-topbar > button { margin-left: 0; }
@media (max-width: 75rem) {
  .docs-layout { grid-template-columns: 15rem minmax(0, 1fr); }
  .docs-toc { display: none; }
}
@media (max-width: 52rem) {
  .docs-layout { display: block; }
  .docs-source { display: none; }
  [data-docs-menu] { display: inline-flex; margin-left: auto; }
  .docs-sidebar { display: none; }
  .docs-sidebar.is-open { display: block; }
  .docs-sidebar nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .docs-sidebar a { white-space: normal; }
  .docs-hero h1 { font-size: var(--vx-text-3xl); }
}