/* Documentation-only components. Shared reading structure and tokens live in public.css/site.css. */
.docs-navigation { min-width: 0; font-size: var(--t-body) }
.docs-overview-link { display: block; min-height: 44px; margin: 6px 0 12px; padding: 10px; border-radius: 8px; text-decoration: none; font-weight: 600 }
.docs-navigation :is(.docs-overview-link, .public-content-nav a)[aria-current="page"] { position: relative; padding-left: 22px; background:var(--panel-2); color: var(--ink) }
.docs-navigation :is(.docs-overview-link, .public-content-nav a)[aria-current="page"]::before { content: ""; position: absolute; left: 9px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); transform: translateY(-50%) }
.docs-navigation .public-content-nav p { margin-top: 20px; padding-inline: 10px }

.docs-search { position: relative; margin: 18px 0 }
.docs-search-field { display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); cursor: text }
.docs-search-field:hover { border-color: var(--line-2) }
.docs-search-field:focus-within { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--panel) }
.docs-search-field svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--ink-3); stroke-width: 1.7; stroke-linecap: round }
.docs-search input { width: 100%; min-width: 0; min-height: 44px; padding: 10px 0; border: 0; border-radius: 0; background: transparent; color: var(--ink); font: var(--t-body)/1.5 var(--sans) }
.docs-search input:focus-visible { outline: none }
.docs-search input::placeholder { color: var(--ink-3); opacity: 1 }
.docs-search-compact { margin: 0 0 14px }
.docs-search-results { position: relative; z-index: 2; margin-top: 8px; padding: 8px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel) }
.docs-search-results[hidden] { display: none }
.docs-search-results p { margin: 4px; font-size: var(--t-body-2) }
.docs-search-results ul { list-style: none; margin: 0; padding: 0 }
.docs-search-results a { display: block; min-height: 44px; padding: 8px; border-radius: 6px; color: var(--ink); font-weight: 600; text-decoration: none }
.docs-search-results a:hover { background: var(--panel-2) }
.docs-search-results a span { display: block; margin-top: 2px; color: var(--ink-2); font-size: var(--t-body-2); font-weight: 400 }
.docs-search-count { color: var(--ink-2) }
.docs-search-empty { color: var(--ink-2) }

.docs-search-panel { margin: 0 0 28px }
.docs-search-panel .docs-search { margin: 0 }
.docs-search-panel input { min-height: 52px; font-size: var(--t-prose) }
.docs-search-panel .docs-search-results { box-shadow: none }
.docs-code-block { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; margin: 20px 0; min-width: 0; overflow: hidden; border:0; border-radius:.625rem; background:var(--panel-2) }
/* Copy sits beside the first line; its own column keeps long commands clear of the control. */
.docs-code-toolbar { grid-column: 2; grid-row: 1; align-self: start; display: flex; padding: 6px }
.docs-code-toolbar button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ink-2); cursor: pointer }
.docs-code-toolbar button:hover { background: var(--panel) }
.docs-code-toolbar button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.docs-code-toolbar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round }
.docs-copy-check, [data-copied] .docs-copy-icon { display: none }
[data-copied] .docs-copy-check { display: block }
.docs-copy-status:not([data-error]) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
.docs-copy-status[data-error] { grid-column: 1 / -1; display: block; padding: 0 16px 12px; color: var(--ink-2); font: var(--t-body-2)/1.5 var(--sans) }
.public-prose .docs-code-block pre, .np-result .docs-code-block pre { grid-column: 1; grid-row: 1; min-width: 0; margin: 0; border: 0; border-radius: 0 }
.docs-code-block:has(.language-text) pre { white-space: pre-wrap; overflow-wrap: anywhere }
.docs-section { margin-top: 28px }
.docs-product-preview { margin: 0 0 28px; min-width: 0 }
.docs-product-preview > a { display: block; border: 1px solid var(--line); border-radius: 10px; overflow: hidden }
.docs-product-preview img { display: block; width: 100%; height: auto }
.docs-product-preview figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 16px; padding-top: 8px; color: var(--ink-2); font-size: var(--t-body-2) }
.docs-product-preview figcaption a { display: inline-flex; align-items: center; min-height: 44px }
.docs-entry-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0 !important; padding: 0 !important }
.docs-entry-list li { display: flex; min-width: 0 }
.docs-entry-list a { display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 44px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); text-decoration: none }
.docs-entry-list a:hover, .docs-entry-list a:focus-visible { background: var(--panel-2); border-color: var(--line-2); text-decoration: none }
.docs-entry-card:focus-visible { outline: .125rem solid var(--ink); outline-offset: .1875rem }
.docs-entry-title { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: 1rem; font-weight: 600 }
.docs-entry-title svg { width: 1.125rem; height: 1.125rem; flex: none; color: var(--ink-3) }
.docs-entry-card:is(:hover, :focus-visible) .docs-entry-title svg { color: var(--ink) }
.docs-entry-list p { margin: 2px 0 0; color: var(--ink-2); font-size: var(--t-body-2) }

.public-prose :is(h2, h3, h4, h5, h6) { position: relative }
.docs-heading-anchor { display: inline-flex; width: 32px; min-height: 32px; margin-left: 4px; align-items: center; justify-content: center; border-radius: 6px; color: var(--ink-3); font-family: var(--mono); font-size: .75em; font-weight: 400; opacity: 0; text-decoration: none }
.public-prose :is(h2, h3, h4, h5, h6):hover .docs-heading-anchor, .docs-heading-anchor:focus-visible { opacity: 1 }
.docs-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top:3rem; padding-top:0; border-top:0 }
.docs-pager a { display: flex; min-height: 68px; flex-direction: column; justify-content: center; padding: 12px; border:0; border-radius:.625rem; background:var(--panel-2); text-decoration:none }
.docs-pager a:hover { border-color: var(--line-2); background: var(--panel-2) }
.docs-pager span { color: var(--ink-2); font-size: var(--t-body-2) }
.docs-pager strong { color: var(--ink); font-weight: 600 }
.docs-pager-next { text-align: right }

@media (max-width: 48rem) {
  .docs-entry-list { grid-template-columns: minmax(0, 1fr) }
  .docs-pager { grid-template-columns: minmax(0, 1fr) }
  .docs-pager [aria-hidden="true"] { display: none }
  .docs-pager-next { text-align: left }
  .docs-heading-anchor { opacity: 1 }
}

@media (prefers-reduced-motion: reduce) {
  .docs-search *, .docs-heading-anchor { scroll-behavior: auto; transition: none }
}

/* Category labels are headings, separated from the indented links they contain. */
.reading-nav-group { margin:0 0 2rem }
.public-page .public-content-nav .reading-category { margin:0 0 .5rem; padding:0 .625rem; color:var(--ink); font:650 var(--t-meta)/1.5 var(--sans); letter-spacing:0 }
.docs-navigation .public-content-nav a { padding:.625rem .875rem .625rem 1.25rem; color:var(--ink-2); font:400 var(--t-body-2)/1.5 var(--sans); border-radius:.5rem }
.docs-navigation .public-content-nav a:hover { color:var(--ink) }
.docs-navigation .public-content-nav a[aria-current="page"] { padding-left:1.25rem; color:var(--ink); font-weight:600; background:var(--panel-2) }
.docs-navigation .public-content-nav a[aria-current="page"]::before { display:none }
.docs-navigation .docs-overview-link { margin:0 0 1.75rem; font-size:var(--t-body-2) }
.docs-navigation .docs-search-compact { margin-bottom:1rem }

/* Docs and integrated articles use a full-width tool shell. Other public shelves
   keep their own chrome; the reading column stays bounded independently of it. */
.public-page:is([data-section="docs"], [data-section="blog"]) {
  --site-nav: 17rem;
  --site-aside: 13rem;
  --site-gutter: 1.5rem;
  --t-prose: 1rem;
  --t-body-2: .875rem;
  --leading-prose: 1.7;
}
.public-page:is([data-section="docs"], [data-section="blog"]) .public-header {
  position: sticky; top: 0; z-index: 25; height: 4rem;
  border-bottom: .0625rem solid var(--line);
}
.public-page:is([data-section="docs"], [data-section="blog"]) .public-header-inner {
  max-width: none; gap: .75rem; padding-block: 0;
}
.public-page:is([data-section="docs"], [data-section="blog"]) .public-brand {
  justify-content: center; width: 2.75rem; min-height: 2.75rem;
}
.public-page:is([data-section="docs"], [data-section="blog"]) .docs-header-label {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  padding-left: 1rem; border-left: .0625rem solid var(--line);
  color: var(--ink); font: 500 1rem/1.5 var(--sans); text-decoration: none;
}
.public-page:is([data-section="docs"], [data-section="blog"]) .public-context { margin-left: auto }
.public-page:is([data-section="docs"], [data-section="blog"]) .public-header-actions { margin-left: 0 }
.public-page:is([data-section="docs"], [data-section="blog"]) .desk-resources { display: none }
.public-page:is([data-section="docs"], [data-section="blog"]) .public-header .wb-alerts { right: var(--site-gutter); top: 4rem }
.public-page:is([data-section="docs"], [data-section="blog"]) .public-reading {
  max-width: none; padding: 0; gap: 0;
  grid-template-columns: var(--site-nav) minmax(0, 1fr) var(--site-aside);
}
.public-page:is([data-section="docs"], [data-section="blog"]) .public-sidebar {
  position: sticky; top: 4rem; align-self: start;
  max-height: calc(100dvh - 4rem); overflow-y: auto; overscroll-behavior: contain;
  padding: 1.5rem 1.25rem 3rem; scrollbar-width: thin;
  border-right: .0625rem solid var(--line);
}
.public-page:is([data-section="docs"], [data-section="blog"]) .public-article {
  max-width: 49.5rem; margin-inline: auto; padding: 3rem 2.75rem 5rem;
}
.public-page:is([data-section="docs"], [data-section="blog"]) .public-article-header { margin: 0 0 2.5rem }
.public-page:is([data-section="docs"], [data-section="blog"]) h1 {
  font: 590 2rem/1.25 var(--sans); letter-spacing: -.035em; word-break: keep-all;
}
.public-page[data-section="docs"] .public-article:has(.docs-index) h1 { font-size: 2.5rem }
.public-page[data-section="docs"] .public-article:has(.docs-index) { max-width: 66rem }
.public-page:is([data-section="docs"], [data-section="blog"]) .public-lede { font-size: 1rem; line-height: 1.7 }
.public-page:is([data-section="docs"], [data-section="blog"]) .public-prose h2 {
  margin: 2.5rem 0 1rem; font-size: 1.375rem; line-height: 1.4; font-weight: 600;
}
.public-page:is([data-section="docs"], [data-section="blog"]) .public-prose h3 { font-size: 1.125rem }
.public-page:is([data-section="docs"], [data-section="blog"]) .public-prose :is(h2, h3, h4, h5, h6) { scroll-margin-top: 5.5rem }
.public-page:is([data-section="docs"], [data-section="blog"]) .public-toc-desktop {
  position: sticky; top: 4rem; align-self: start; max-height: calc(100dvh - 4rem);
  overflow-y: auto; padding: 3rem 1.5rem 2rem 0;
}
.public-page:is([data-section="docs"], [data-section="blog"]) .public-toc-desktop > p { margin: 0 0 .75rem; font-size: .8125rem }
.public-page:is([data-section="docs"], [data-section="blog"]) .public-toc a {
  padding: .5rem 0; min-height: 2.25rem; font-size: .8125rem; line-height: 1.5;
}
.public-page:is([data-section="docs"], [data-section="blog"]) .public-mobile-toc { display: none }
.public-page:is([data-section="docs"], [data-section="blog"]) .reading-nav-group { margin-bottom: 1.5rem }
.public-page:is([data-section="docs"], [data-section="blog"]) .public-content-nav .reading-category {
  margin: 0 0 .375rem; padding-inline: .625rem; font: 600 .875rem/1.5 var(--sans);
}
.public-page:is([data-section="docs"], [data-section="blog"]) .docs-navigation .public-content-nav a {
  min-height: 2.75rem; padding: .625rem .875rem; font-size: .875rem; line-height: 1.5;
}
.public-page:is([data-section="docs"], [data-section="blog"]) .docs-overview-link {
  min-height: 2.75rem; margin: 0 0 1.5rem; padding: .625rem .875rem;
  color: var(--ink-2); font-size: .875rem;
}
.public-page:is([data-section="docs"], [data-section="blog"]) .docs-overview-link[aria-current="page"] { color: var(--ink); padding-left: .875rem }
.public-page:is([data-section="docs"], [data-section="blog"]) .docs-overview-link::before { display: none }
.public-page:is([data-section="docs"], [data-section="blog"]) .docs-search-compact { margin: 0 0 1rem }
.public-page:is([data-section="docs"], [data-section="blog"]) .docs-search-field { border-radius: .5rem; padding-inline: .625rem; gap: .5rem }
.public-page:is([data-section="docs"], [data-section="blog"]) .docs-search input { min-height: 2.75rem; font-size: .875rem }
.public-page:is([data-section="docs"], [data-section="blog"]) .docs-search-results a { font-size: .875rem }
.public-page:is([data-section="docs"], [data-section="blog"]) .docs-entry-list { gap: .75rem }
.public-page:is([data-section="docs"], [data-section="blog"]) .docs-entry-list a { padding: 1rem; border-radius: .5rem }
.public-page:is([data-section="docs"], [data-section="blog"]) .docs-entry-title { min-height: 2.25rem; line-height: 1.5; font-size: .9375rem }
.public-page:is([data-section="docs"], [data-section="blog"]) .docs-entry-list p { font-size: .875rem; line-height: 1.6 }
.public-page:is([data-section="docs"], [data-section="blog"]) .docs-section:first-child { margin-top: 0 }
.public-page:is([data-section="docs"], [data-section="blog"]) .docs-section:first-child h2 { margin-top: 0 }
.public-page:is([data-section="docs"], [data-section="blog"]) .public-footer { max-width: none; padding: 1.5rem; font-size: .875rem }

@media (min-width: 90rem) {
  .public-page[data-section="docs"] .docs-index .docs-entry-list { grid-template-columns: repeat(3, minmax(0, 1fr)) }
}
@media (max-width: 76rem) {
  .public-page:is([data-section="docs"], [data-section="blog"]) { --site-nav: 15.5rem }
  .public-page:is([data-section="docs"], [data-section="blog"]) .public-reading { grid-template-columns: var(--site-nav) minmax(0, 1fr) }
  .public-page:is([data-section="docs"], [data-section="blog"]) .public-toc-desktop { display: none }
  .public-page:is([data-section="docs"], [data-section="blog"]) .public-mobile-toc { display: block; margin-bottom: 1.5rem }
  .public-page:is([data-section="docs"], [data-section="blog"]) .public-article { padding-inline: 2rem }
}
@media (max-width: 48rem) {
  .public-page:is([data-section="docs"], [data-section="blog"]) { --site-gutter: 1rem }
  .public-page:is([data-section="docs"], [data-section="blog"]) .public-header { height: 4rem }
  .public-page:is([data-section="docs"], [data-section="blog"]) .public-header-inner { gap: .5rem }
  .public-page:is([data-section="docs"], [data-section="blog"]) .docs-header-label { padding-left: .75rem }
  .public-page:is([data-section="docs"], [data-section="blog"]) .public-header-actions { margin-left: auto }
  .public-page:is([data-section="docs"], [data-section="blog"]) .public-reading { grid-template-columns: minmax(0, 1fr) }
  .public-page:is([data-section="docs"], [data-section="blog"]) .public-article { grid-column: 1; padding: 1.5rem 1.25rem 3rem }
  .public-page:is([data-section="docs"], [data-section="blog"]) h1 { font-size: 1.875rem }
  .public-page[data-section="docs"] .public-article:has(.docs-index) h1 { font-size: 2.125rem }
  .public-page:is([data-section="docs"], [data-section="blog"]) .public-mobile-contents { padding: .25rem .75rem }
  .public-page:is([data-section="docs"], [data-section="blog"]) .public-mobile-contents .docs-navigation { padding-block: .5rem 1rem }
}

/* The brand cell and navigation share one boundary; page location belongs to
   the reading area, while account controls stay at the trailing edge. */
.public-page:is([data-section="docs"], [data-section="blog"]) { --docs-header-height: 4rem }
.public-page:is([data-section="docs"], [data-section="blog"]) .public-header { height: var(--docs-header-height) }
.public-page:is([data-section="docs"], [data-section="blog"]) .public-header-inner {
  display: grid; grid-template-columns: var(--site-nav) minmax(0, 1fr) auto auto;
  gap: 0; padding: 0;
}
.docs-brand-cell {
  display: flex; align-items: center; gap: .75rem; height: 100%;
  padding-inline: 1.5rem; border-right: .0625rem solid var(--line);
}
.public-page:is([data-section="docs"], [data-section="blog"]) .public-context { margin: 0 }
.public-page:is([data-section="docs"], [data-section="blog"]) .public-header-actions { padding-right: 1.5rem }
.docs-breadcrumb { min-width: 0; padding-inline: 1.5rem; font: 400 .875rem/1.5 var(--sans) }
.docs-breadcrumb ol { display: flex; justify-content: flex-start; align-items: center; gap: .625rem; list-style: none; margin: 0; padding: 0; min-width: 0 }
.docs-breadcrumb li { display: flex; align-items: center; gap: .625rem; min-width: 0 }
.docs-breadcrumb li + li::before { content: "/"; flex: none; color: var(--ink-3) }
.docs-breadcrumb li:last-child { flex: 0 1 auto }
.docs-breadcrumb li > :is(a, span) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2) }
.public-page .public-header .docs-breadcrumb a { min-height: 2.75rem; padding: 0; font-weight: 400 }
.docs-breadcrumb [aria-current="page"] { color: var(--ink) }
.public-page:is([data-section="docs"], [data-section="blog"]) .public-sidebar {
  top: var(--docs-header-height); height: calc(100dvh - var(--docs-header-height)); max-height: calc(100dvh - var(--docs-header-height));
  padding-right: 0;
}
.public-sidebar .docs-navigation > :is(.docs-search, .docs-overview-link) { margin-right: 1.25rem }
.public-page:is([data-section="docs"], [data-section="blog"]) .public-content-nav .reading-category {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  min-height: 2.75rem; margin: 0; padding: .625rem 1.25rem .625rem .625rem;
  list-style: none; cursor: pointer;
}
.reading-category::-webkit-details-marker { display: none }
.reading-category svg { flex: none; width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round }
.reading-nav-group[open] > .reading-category svg { transform: rotate(90deg) }
.public-page:is([data-section="docs"], [data-section="blog"]) .reading-nav-group { margin-bottom: .5rem }
.public-page:is([data-section="docs"], [data-section="blog"]) .public-sidebar .public-content-nav a {
  padding-right: 1.25rem; border-radius: .4375rem 0 0 .4375rem;
}
.public-page:is([data-section="docs"], [data-section="blog"]) .public-sidebar .docs-overview-link[aria-current="page"] {
  margin-right: 0; padding-right: 1.25rem; border-radius: .4375rem 0 0 .4375rem;
}
.docs-section { scroll-margin-top: calc(var(--docs-header-height) + 1.5rem) }
@media (min-width: 76.001rem) {
  .public-page:is([data-section="docs"], [data-section="blog"]) .public-reading.has-toc {
    grid-template-columns: var(--site-nav) minmax(0, 1fr) minmax(0, 49.5rem) var(--site-aside) minmax(0, 1fr);
  }
  .public-page:is([data-section="docs"], [data-section="blog"]) .public-reading.has-toc .public-article { grid-column: 3; padding-right: 2rem }
  .public-page:is([data-section="docs"], [data-section="blog"]) .public-reading.has-toc .public-toc-desktop { grid-column: 4 }
}
.public-page:is([data-section="docs"], [data-section="blog"]) .public-toc-desktop {
  top: var(--docs-header-height); max-height: calc(100dvh - var(--docs-header-height));
}
@media (max-width: 48rem) {
  .public-page:is([data-section="docs"], [data-section="blog"]) { --docs-header-height: 6.5rem }
  .public-page:is([data-section="docs"], [data-section="blog"]) .public-header-inner { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 4rem 2.5rem; gap: 0 }
  .docs-brand-cell { border: 0; padding-inline: 1rem; gap: .5rem }
  .public-page:is([data-section="docs"], [data-section="blog"]) .public-header-actions { grid-column: 2; grid-row: 1; padding-right: 1rem }
  .docs-breadcrumb { grid-column: 1 / -1; grid-row: 2; padding-inline: 1.25rem; border-top: .0625rem solid var(--line) }
  .docs-breadcrumb ol { justify-content: start; height: 2.5rem }
  .docs-breadcrumb li:not(:last-child) { display: none }
  .docs-breadcrumb li:last-child::before { display: none }
  .public-page:is([data-section="docs"], [data-section="blog"]) .public-prose :is(h2, h3, h4, h5, h6) { scroll-margin-top: calc(var(--docs-header-height) + 1.5rem) }
}

.public-content-nav .reading-category:hover { background: var(--panel-2); border-radius: .4375rem 0 0 .4375rem }
.public-content-nav .reading-category:focus-visible { outline: .125rem solid var(--ink); outline-offset: -.125rem }

/* The reading surface owns native elastic scrolling; chrome stays outside it. */
html:has(> body.public-page:is([data-section="docs"], [data-section="blog"]) > .public-reading) { overscroll-behavior-y: none; scrollbar-gutter: auto }
.public-page:is([data-section="docs"], [data-section="blog"]):has(> .public-reading) { height: 100dvh; overflow: hidden }
.public-page:is([data-section="docs"], [data-section="blog"]) .public-reading {
  height: calc(100dvh - var(--docs-header-height)); overflow: auto; overscroll-behavior-y: contain;
}
.public-page:is([data-section="docs"], [data-section="blog"]) .public-sidebar {
  position: fixed; left: 0; width: var(--site-nav); z-index: 20; background: var(--panel);
}
.public-page:is([data-section="docs"], [data-section="blog"]) .public-toc-desktop { top: 0 }
.public-page:is([data-section="docs"], [data-section="blog"]) :is(.docs-section, .public-prose :is(h2, h3, h4, h5, h6)) { scroll-margin-top: 1.5rem }
.public-page:is([data-section="docs"], [data-section="blog"]) :is(.public-sidebar, .public-toc-desktop) { overscroll-behavior-y: none }