/* Component manuals read as part of Docs: the same page frame, the same
   #pgSideNav card, the same heading scale and the same content links.
   Every value comes from the shared --pg-* tokens. */
.component-layout {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr) 200px;
  column-gap: 34px;
  align-items: start;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 1.5rem 20px 4em;
}
.component-layout:not(:has(.component-outline)) { grid-template-columns: 224px minmax(0, 1fr); }

/* ---------------------------------------------------------- chapter card */
.component-sidebar, .component-outline {
  position: sticky;
  top: calc(var(--pg-nav-h, 60px) + 20px);
  min-width: 0;
  max-height: calc(100dvh - var(--pg-nav-h, 60px) - 40px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--pg-line-strong) transparent;
}
.component-sidebar {
  padding: 1rem 0.85rem 1.1rem;
  border: 1px solid var(--pg-line);
  border-radius: var(--pg-radius);
  background: var(--pg-surface);
  font-size: 14px;
}
.component-navigation > summary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0.5rem;
  color: var(--pg-heading);
  cursor: pointer;
}
.component-navigation__name { font-size: 15px; font-weight: 700; letter-spacing: -0.005em; }
.component-navigation__version { color: var(--pg-muted); font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.component-navigation__caption { margin-left: auto; color: var(--pg-muted); font-size: 12.5px; font-weight: 500; }
.component-navigation__body { padding-top: 14px; }

.component-search {
  display: flex;
  align-items: center;
  margin: 0 0 14px;
  border: 1px solid var(--pg-line-strong);
  border-radius: var(--pg-radius-sm);
  background: var(--pg-surface);
  transition: border-color var(--pg-dur) var(--pg-ease), box-shadow var(--pg-dur) var(--pg-ease);
}
.component-search input { width: 100%; min-width: 0; height: 34px; padding: 0 0 0 11px; border: 0; background: transparent; color: var(--pg-ink); font: 400 13px/1 var(--pg-font); }
.component-search input::placeholder { color: var(--pg-muted); }
.component-search input:focus { outline: none; }
.component-search button { display: inline-flex; align-items: center; padding: 0 10px; height: 34px; border: 0; background: transparent; color: var(--pg-muted); cursor: pointer; }
.component-search button:hover { color: var(--pg-heading); }
.component-search button svg { width: 16px; height: 16px; }
.component-search:focus-within { border-color: var(--pg-blue); box-shadow: 0 0 0 3px rgba(var(--pg-blue-rgb), 0.16); }

/* The same quiet label as "Documentation" in the Docs sidebar. */
.component-tree-tools { display: flex; align-items: baseline; gap: 8px; margin: 0 0 0.4rem 9px; color: var(--pg-muted); font-size: 12px; white-space: nowrap; }
.component-tree-tools[hidden] { display: none; }
.component-tree-tools > span { margin-right: auto; font-weight: 700; }
.component-tree-tools button { padding: 2px 0; border: 0; background: none; color: var(--pg-muted); font: 500 11.5px var(--pg-font); cursor: pointer; }
.component-tree-tools button:hover { color: var(--pg-heading); }

.component-tree, .component-tree ul, .component-projects ul, .component-outline ul { margin: 0; padding: 0; list-style: none; }
.component-tree { line-height: 1.45; }
.component-tree li { position: relative; margin: 1px 0; }
.component-tree a {
  display: block;
  padding: 5px 9px;
  border-radius: 6px;
  color: var(--pg-ink-2);
  font-weight: 500;
  overflow-wrap: anywhere;
  transition: background-color var(--pg-dur) var(--pg-ease), color var(--pg-dur) var(--pg-ease);
}
.component-tree a:hover { background: var(--pg-wash); color: var(--pg-heading); }
.component-tree a[aria-current] { background: var(--pg-wash-strong); color: var(--pg-heading); font-weight: 600; }
/* Nested chapters follow the Docs sidebar: a hairline rail, smaller and quieter. */
.component-tree ul { margin: 2px 0 4px 12px; padding-left: 8px; border-left: 1px solid var(--pg-line); }
.component-tree ul ul a { padding: 3px 8px; color: var(--pg-muted); font-size: 13px; font-weight: 400; }
.component-tree ul ul a[aria-current] { color: var(--pg-heading); font-weight: 600; }
/* Expanders sit at the right edge so every chapter title shares one left edge. */
.component-tree details { position: static; }
.component-tree summary {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 31px;
  padding: 0;
  border-radius: 6px;
  color: var(--pg-muted);
  list-style: none;
  cursor: pointer;
}
.component-tree ul ul summary { height: 26px; }
.component-tree summary::-webkit-details-marker { display: none; }
.component-tree summary:hover { background: var(--pg-wash); color: var(--pg-heading); }
.component-tree__caret { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateX(-1px) rotate(-45deg); transition: transform var(--pg-dur) var(--pg-ease); }
.component-tree details[open] > summary .component-tree__caret { transform: translateY(-1px) rotate(45deg); }
.component-tree .component-tree__parent { padding-right: 32px; }
/* Chapter links are siblings of details, so collapsing never hides a parent link. */
.component-tree__group > details { margin-top: 14px; }
.component-tree__group > details > summary {
  position: static;
  justify-content: flex-start;
  gap: 8px;
  width: auto;
  height: auto;
  padding: 4px 9px;
  color: var(--pg-muted);
  font-size: 12.5px;
  font-weight: 700;
}
.component-tree__group > details > summary .component-tree__caret { order: 2; margin-left: auto; }
.component-tree__group > span { display: block; margin-top: 14px; padding: 4px 9px; color: var(--pg-muted); font-size: 12.5px; font-weight: 700; }
.component-sidebar :is(a, button, summary):focus-visible,
.component-outline a:focus-visible,
.component-content a:focus-visible { outline: 2px solid var(--pg-azure); outline-offset: 2px; }

.component-projects { margin: 16px 0.5rem 0; padding-top: 12px; border-top: 1px solid var(--pg-line); font-size: 13px; }
.component-projects > summary { color: var(--pg-ink-2); font-weight: 600; cursor: pointer; }
.component-projects > summary:hover { color: var(--pg-heading); }
.component-projects ul { padding-top: 6px; }
.component-projects li { margin: 0; }
.component-projects a { display: block; padding: 3px 0; color: var(--pg-muted); font-weight: 500; }
.component-projects a:hover { color: var(--pg-heading); }

/* ------------------------------------------------------------ the page */
.component-content { min-width: 0; padding-top: 0.5rem; overflow-wrap: anywhere; }
.component-breadcrumb { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-bottom: 18px; color: var(--pg-line-strong); font-size: 13px; }
.component-breadcrumb a { color: var(--pg-muted); font-weight: 600; }
.component-breadcrumb a:last-child { color: var(--pg-ink-2); }
.component-breadcrumb a:hover { color: var(--pg-link-content); }
.component-heading { margin-bottom: 28px; }
.component-version { margin: 0 0 6px; color: var(--pg-muted); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.component-heading h1 { margin: 0 0 0.75rem; color: var(--pg-heading); font-size: 1.9rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
.component-heading > p:not(.component-version) { max-width: 70ch; margin: 0; color: var(--pg-ink-2); font-size: 17px; line-height: 1.6; }

/* Prose: the manual's reading rhythm and its wine-red content links. */
.component-prose { min-width: 0; }
.component-prose a { color: var(--pg-link-content); font-weight: 600; }
.component-prose a:hover { color: var(--pg-link-content-hover); }
.component-prose :is(h2, h3, h4, [id]) { scroll-margin-top: 8px; }
.component-prose h2, .component-prose h3, .component-prose h4 { color: var(--pg-heading); }
.component-prose h2 { overflow: hidden; margin: 2.2em 0 0.8em; font-size: 1.45rem; font-weight: 700; line-height: 1.25; }
/* The Docs heading rule: a hairline that runs from the last line to the edge. */
.component-prose h2::after { content: ""; display: inline-block; width: 100%; height: 1px; margin: 0 -100% 0 0.75em; vertical-align: middle; background: var(--pg-line); }
.component-prose h3 { margin: 1.8em 0 0.6em; font-size: 1.2rem; font-weight: 600; }
.component-prose h4 { margin: 1.5em 0 0.5em; font-size: 1.02rem; font-weight: 600; text-transform: none !important; }
.component-prose :is(h2, h3, h4) a { color: inherit; font-weight: inherit; }
.component-prose > :first-child { margin-top: 0; }
.component-prose hr { margin: 2em 0; border: 0; border-top: 1px solid var(--pg-line); }
.component-prose hr:has(+ h2) { display: none; }
.component-prose pre { max-width: 100%; overflow-x: auto; white-space: pre; }
.component-prose img { max-width: 100%; height: auto; }
.component-prose .anchor { text-decoration: none; }
/* Tables: the same frame as Docs tables. */
.component-prose table {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 1rem 0 1.5rem;
  overflow-x: auto;
  border: 1px solid var(--pg-line);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 10px;
  background: var(--pg-surface);
  font-size: 14.5px;
  line-height: 1.55;
}
.component-prose :is(th, td) { padding: 10px 16px; border: 0; vertical-align: top; text-align: left; }
.component-prose thead th { border-bottom: 1px solid var(--pg-line-strong); background: var(--pg-surface-2); font-size: 13px; font-weight: 600; white-space: nowrap; }
.component-prose tbody tr + tr > * { border-top: 1px solid var(--pg-line); }
/* Notes and callouts: the Wiki note — a wash with a single rule. */
.component-prose blockquote, .component-prose .markdown-alert {
  margin: 1.4em 0;
  padding: 12px 18px;
  border: 0;
  border-left: 3px solid var(--pg-line-strong);
  border-radius: 0 var(--pg-radius-sm) var(--pg-radius-sm) 0;
  background: var(--pg-wash);
  color: var(--pg-ink-2);
}
.component-prose :is(blockquote, .markdown-alert) > :last-child { margin-bottom: 0; }
/* Source theme decoration is not part of the document. Preserve its text and links. */
.component-prose .td-content-card__icon, .component-prose .td-callout__icon { display: none; }
.component-prose .td-section-index--cards, .component-prose ul.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; margin: 28px 0; padding: 0; list-style: none; }
.component-prose .td-content-card, .component-prose ul.cards > li {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 18px 20px;
  border: 1px solid var(--pg-line);
  border-radius: var(--pg-radius);
  background: var(--pg-surface);
  transition: border-color var(--pg-dur) var(--pg-ease), box-shadow var(--pg-dur) var(--pg-ease);
}
.component-prose .td-content-card:has(a):hover, .component-prose ul.cards > li:has(a):hover { border-color: var(--pg-line-strong); box-shadow: var(--pg-shadow-sm); }
.component-prose .td-content-card__title, .component-prose ul.cards > li > a { font-size: 16px; line-height: 1.45; font-weight: 600; }
.component-prose :is(a.td-content-card__title, .td-content-card__title a, ul.cards > li > a) { color: var(--pg-heading); }
.component-prose .td-content-card:hover :is(a.td-content-card__title, .td-content-card__title a), .component-prose ul.cards > li > a:hover { color: var(--pg-link-content); }
.component-prose .td-content-card__description, .component-prose ul.cards > li > p { margin: 6px 0 0; color: var(--pg-ink-2); font-size: 13.5px; line-height: 1.6; }
.component-prose .td-callout { margin: 1.4em 0; padding: 14px 18px; border: 0; border-left: 3px solid var(--pg-line-strong); border-radius: 0 var(--pg-radius-sm) var(--pg-radius-sm) 0; background: var(--pg-wash); }
.component-prose .td-callout__title { margin-bottom: 6px; color: var(--pg-heading); font-weight: 600; }
.component-prose .td-callout__body > :first-child { margin-top: 0; }
.component-prose .td-callout__body > :last-child { margin-bottom: 0; }

/* "On this page", as in Wiki readers. */
.component-outline { padding-top: 0.5rem; font-size: 13px; }
.component-outline summary { margin-bottom: 10px; color: var(--pg-ink-2); font-size: 12px; font-weight: 500; }
.component-outline ul { border-left: 1px solid var(--pg-line); }
.component-outline a { display: block; margin-left: -1px; padding: 4px 0 4px 14px; border-left: 1px solid transparent; color: var(--pg-muted); font-weight: 600; line-height: 1.375; overflow-wrap: anywhere; }
.component-outline a:hover { color: var(--pg-heading); }
.component-outline a[aria-current] { border-left-color: var(--pg-heading); color: var(--pg-heading); }
.component-outline__level-3 a { padding-left: 24px; font-size: 12.5px; font-weight: 500; overflow-wrap: break-word; }
.component-outline__level-4 a { padding-left: 34px; font-size: 12.5px; font-weight: 500; overflow-wrap: break-word; }

.component-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 48px 0 24px; }
.component-pager a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 18px;
  border: 1px solid var(--pg-line);
  border-radius: var(--pg-radius);
  background: var(--pg-surface);
  color: var(--pg-heading);
  font-weight: 600;
  transition: border-color var(--pg-dur) var(--pg-ease), box-shadow var(--pg-dur) var(--pg-ease);
}
.component-pager a:hover { border-color: var(--pg-line-strong); box-shadow: var(--pg-shadow-sm); color: var(--pg-link-content); }
.component-pager a[rel=next] { text-align: right; }
.component-pager small { color: var(--pg-muted); font-size: 12.5px; font-weight: 500; }
.component-provenance { padding-top: 16px; border-top: 1px solid var(--pg-line); color: var(--pg-muted); font-size: 13px; }
.component-provenance > summary { color: var(--pg-ink-2); font-weight: 500; cursor: pointer; }
.component-provenance a { color: var(--pg-link-content); font-weight: 600; }
.component-provenance dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; }
.component-provenance dt { font-weight: 500; }
.component-provenance dd { margin: 0; overflow-wrap: anywhere; color: var(--pg-ink-2); }
.component-results > p { color: var(--pg-ink-2); }
.component-results h2 { margin: 0 0 4px; font-size: 1.15rem; font-weight: 600; }
.component-results h2 a { color: var(--pg-link-content); }
.component-results article { margin: 0; padding: 16px 0; border-bottom: 1px solid var(--pg-line); }
.component-results article p { margin: 0; color: var(--pg-ink-2); font-size: 14.5px; }
.docs-components td:first-child { font-weight: 600; }

@media (min-width: 960px) {
  .component-navigation > summary, .component-outline > details > summary { list-style: none; cursor: default; }
  .component-navigation > summary::-webkit-details-marker, .component-outline > details > summary::-webkit-details-marker { display: none; }
  .component-navigation__caption { display: none; }
}
@media (max-width: 1239px) and (min-width: 960px) {
  .component-layout, .component-layout:not(:has(.component-outline)) { grid-template-columns: 220px minmax(0, 1fr); column-gap: 30px; }
  .component-sidebar { grid-column: 1; grid-row: 1 / span 2; }
  .component-content { grid-column: 2; grid-row: 2; }
  .component-layout:not(:has(.component-outline)) .component-content { grid-row: 1; }
  .component-outline { grid-column: 2; grid-row: 1; position: static; max-height: 168px; margin-bottom: 20px; }
}
@media (max-width: 959px) {
  .component-layout, .component-layout:not(:has(.component-outline)) { grid-template-columns: minmax(0, 1fr); row-gap: 16px; padding: 1rem 16px 3em; }
  .component-sidebar, .component-outline { position: static; max-height: none; }
  .component-sidebar { grid-row: 1; padding: 12px 14px; }
  .component-navigation > summary { margin: 0; }
  .component-navigation__body { max-height: 60dvh; overflow: auto; }
  .component-tree a { padding: 9px 10px; }
  .component-tree summary { width: 40px; height: 39px; }
  .component-tree .component-tree__parent { padding-right: 44px; }
  .component-search input, .component-search button { height: 40px; }
  .component-outline { grid-row: 2; padding: 10px 14px; border: 1px solid var(--pg-line); border-radius: var(--pg-radius); background: var(--pg-surface); }
  .component-outline summary { margin: 0; cursor: pointer; }
  .component-outline details[open] summary { margin-bottom: 10px; }
  .component-outline nav { max-height: 40dvh; overflow: auto; }
  .component-content { grid-row: 3; padding-top: 0.25rem; }
  .component-layout:not(:has(.component-outline)) .component-content { grid-row: 2; }
  .component-breadcrumb { margin: 8px 0 14px; }
  .component-heading { margin-bottom: 20px; }
  .component-heading h1 { font-size: 1.65rem; }
  .component-pager { gap: 10px; }
  .component-pager a { padding: 12px 14px; font-size: 13.5px; }
}
@media print {
  .component-sidebar, .component-outline, .component-search, .component-pager { display: none; }
  .component-layout { display: block; padding: 0; }
  .component-content { max-width: 100%; }
  .component-prose table { display: table; }
  .component-prose pre { white-space: pre-wrap; }
}