/* Generated by npm run sync from styles/documentation.css and its @import lines, inlined in cascade order. Do not edit. */
/* styles/panel-toggle.css */
/* Panel toggle: the quiet show/hide control shared by the sidebar rail and split-pane side panes. Values match the sidebar toggle. */
@layer design {
  /* .btn.panel-toggle[data-variant] outranks the ghost button's canvas chip and border, so the toggle stays a bare icon. */
  :is(.panel-toggle, .btn.panel-toggle[data-variant]) {
    display: grid;
    place-items: center;
    width: var(--control-xs);
    height: var(--control-xs);
    min-width: var(--control-xs);
    min-height: var(--control-xs);
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    box-shadow: none;
    transition: color var(--motion-feedback) var(--motion-easing);
  }
  :is(.panel-toggle, .btn.panel-toggle[data-variant]):hover {
    background: transparent;
    color: var(--text-primary);
  }
  .panel-toggle:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 1px;
  }
  .panel-toggle svg {
    width: 18px;
    height: 18px;
  }
  @media (pointer: coarse) {
    :is(.panel-toggle, .btn.panel-toggle[data-variant]) {
      width: 44px;
      height: 44px;
      min-width: 44px;
      min-height: 44px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .panel-toggle {
      transition: none;
    }
  }
}

/* styles/sidebar.css */
/* Shared visual contract for every host that mounts sidebar-controller.js. */
@layer design {
  .sidebar-owner {
    --sidebar-panel-width: 240px;
    --sidebar-compact-width: 52px;
    --sidebar-control-lane: 0px;
    display: grid;
    grid-template-columns: var(--sidebar-panel-width) minmax(0, 1fr);
    transition: grid-template-columns var(--motion-transition) var(--motion-easing);
  }
  .sidebar-owner[data-sidebar-expanded='false'][data-sidebar-side='start'] {
    grid-template-columns: var(--sidebar-compact-width) minmax(0, 1fr);
  }
  .sidebar-owner[data-sidebar-side='end'] {
    grid-template-columns: minmax(0, 1fr) var(--sidebar-panel-width);
  }
  .sidebar-owner[data-sidebar-expanded='false'][data-sidebar-side='end'] {
    grid-template-columns: minmax(0, 1fr) var(--sidebar-compact-width);
  }
  .sidebar-rail {
    position: relative;
    grid-row: 1;
    min-width: 0;
    z-index: 1;
  }
  .sidebar-owner[data-sidebar-side='end'] > .sidebar-rail {
    grid-column: 2;
  }
  .sidebar-panel {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    height: 100%;
    transition: width var(--motion-transition) var(--motion-easing);
    overflow: hidden;
    background: var(--surface-panel);
    border-inline-end: 1px solid var(--border-default);
  }
  .sidebar-owner[data-sidebar-side='end'] > .sidebar-rail > .sidebar-panel,
  .sidebar-owner[data-sidebar-side='end'] > .sidebar-rail.sidebar-panel {
    inset-inline-start: auto;
    inset-inline-end: 0;
    border-inline-end: 0;
    border-inline-start: 1px solid var(--border-default);
  }
  /* Desktop exposure uses an absolute width, independent of the animating grid
     track. A visible automatic panel must never shrink while becoming pinned. */
  .sidebar-owner:not([data-sidebar-narrow='true']) > .sidebar-rail > .sidebar-panel,
  .sidebar-owner:not([data-sidebar-narrow='true']) > .sidebar-rail.sidebar-panel {
    width: var(--sidebar-panel-width);
  }
  .sidebar-owner[data-sidebar-peeking='true'] > .sidebar-rail > .sidebar-panel,
  .sidebar-owner[data-sidebar-peeking='true'] > .sidebar-rail.sidebar-panel {
    width: var(--sidebar-panel-width);
    box-shadow: var(--shadow-overlay);
  }
  .sidebar-owner:not([data-sidebar-narrow='true'])[data-sidebar-expanded='false']:not([data-sidebar-peeking='true'])
    > .sidebar-rail
    > .sidebar-panel,
  .sidebar-owner:not([data-sidebar-narrow='true'])[data-sidebar-expanded='false']:not([data-sidebar-peeking='true'])
    > .sidebar-rail.sidebar-panel {
    width: var(--sidebar-compact-width);
  }
  .sidebar-header {
    position: relative;
    display: flex;
    align-items: center;
    flex: none;
    height: 44px;
    min-height: 44px;
    min-width: 0;
    box-sizing: border-box;
    padding-inline: 12px 48px;
    margin-block-end: var(--space-1);
  }
  .sidebar-heading {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    font: var(--text-dense);
    font-weight: 700;
    color: var(--text-primary);
  }
  .sidebar-heading > :is(svg, img) {
    flex: none;
    width: 18px;
    height: 18px;
    object-fit: contain;
  }
  .sidebar-heading-label {
    min-width: 0;
    overflow: hidden;
  }
  .sidebar-header > .sidebar-toggle {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 4px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--text-muted);
  }
  /* Panel toggles share dense button markup; the header keeps its own stable 44px target even when button styles load later. */
  .sidebar-header > .btn.icon.sidebar-toggle {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
  .sidebar-header > .sidebar-toggle svg {
    width: 18px;
    height: 18px;
  }
  /* The expanded rail's heading starts where its row icons and group titles do: the content's 4px inset plus the rows'
     14px. */
  .sidebar-owner:not([data-sidebar-narrow='true']) > .sidebar-rail > .sidebar-panel > .sidebar-header,
  .sidebar-owner:not([data-sidebar-narrow='true']) > .sidebar-rail.sidebar-panel > .sidebar-header {
    padding-inline-start: 18px;
  }
  .sidebar-owner:not([data-sidebar-narrow='true']) > .sidebar-rail > .sidebar-panel > .sidebar-content,
  .sidebar-owner:not([data-sidebar-narrow='true']) > .sidebar-rail.sidebar-panel > .sidebar-content {
    flex-shrink: 0;
    width: var(--sidebar-panel-width);
    box-sizing: border-box;
    scrollbar-gutter: auto;
    overflow-x: hidden;
    padding-inline: 4px;
  }
  .sidebar-owner:not([data-sidebar-narrow='true'])
    > .sidebar-rail
    > .sidebar-panel
    > .sidebar-content
    .sidebar-link[data-sidebar-rail-item],
  .sidebar-owner:not([data-sidebar-narrow='true'])
    > .sidebar-rail.sidebar-panel
    > .sidebar-content
    .sidebar-link[data-sidebar-rail-item] {
    min-height: 44px;
    padding-inline: 14px var(--sidebar-link-end-padding, 14px);
    white-space: nowrap;
  }
  .sidebar-link-label {
    min-width: 0;
    overflow: hidden;
  }
  [data-sidebar-rail-hidden] {
    visibility: hidden;
    pointer-events: none;
  }
  .sidebar-owner:not([data-sidebar-narrow='true'])[data-sidebar-expanded='false']:not([data-sidebar-peeking='true'])
    > .sidebar-rail
    > .sidebar-panel
    > .sidebar-content
    .sidebar-link-label,
  .sidebar-owner:not([data-sidebar-narrow='true'])[data-sidebar-expanded='false']:not([data-sidebar-peeking='true'])
    > .sidebar-rail.sidebar-panel
    > .sidebar-content
    .sidebar-link-label {
    visibility: hidden;
  }
  .sidebar-owner:not([data-sidebar-narrow='true'])[data-sidebar-expanded='false']:not([data-sidebar-peeking='true'])
    > .sidebar-rail
    > .sidebar-panel
    > .sidebar-content
    .sidebar-link[data-sidebar-rail-item],
  .sidebar-owner:not([data-sidebar-narrow='true'])[data-sidebar-expanded='false']:not([data-sidebar-peeking='true'])
    > .sidebar-rail.sidebar-panel
    > .sidebar-content
    .sidebar-link[data-sidebar-rail-item] {
    width: 44px;
    overflow: hidden;
  }
  .sidebar-owner:not([data-sidebar-narrow='true'])[data-sidebar-expanded='false']:not([data-sidebar-peeking='true'])
    > .sidebar-rail
    > .sidebar-panel
    > .sidebar-content,
  .sidebar-owner:not([data-sidebar-narrow='true'])[data-sidebar-expanded='false']:not([data-sidebar-peeking='true'])
    > .sidebar-rail.sidebar-panel
    > .sidebar-content {
    scrollbar-width: none;
  }
  /* The compact server-rendered state is correct before controller hydration. Keep row
     slots, but expose only explicitly eligible primary destinations and the toggle. */
  .sidebar-owner:not([data-sidebar-narrow='true'])[data-sidebar-expanded='false']:not([data-sidebar-peeking='true'])
    > .sidebar-rail
    > .sidebar-panel
    > :not(.sidebar-header),
  .sidebar-owner:not([data-sidebar-narrow='true'])[data-sidebar-expanded='false']:not([data-sidebar-peeking='true'])
    > .sidebar-rail.sidebar-panel
    > :not(.sidebar-header),
  .sidebar-owner:not([data-sidebar-narrow='true'])[data-sidebar-expanded='false']:not([data-sidebar-peeking='true'])
    > .sidebar-rail
    > .sidebar-panel
    > .sidebar-header
    > :not(.sidebar-toggle),
  .sidebar-owner:not([data-sidebar-narrow='true'])[data-sidebar-expanded='false']:not([data-sidebar-peeking='true'])
    > .sidebar-rail.sidebar-panel
    > .sidebar-header
    > :not(.sidebar-toggle) {
    visibility: hidden;
  }
  .sidebar-owner:not([data-sidebar-narrow='true'])[data-sidebar-expanded='false']:not([data-sidebar-peeking='true'])
    > .sidebar-rail
    > .sidebar-panel
    > .sidebar-content
    [data-sidebar-rail-item],
  .sidebar-owner:not([data-sidebar-narrow='true'])[data-sidebar-expanded='false']:not([data-sidebar-peeking='true'])
    > .sidebar-rail.sidebar-panel
    > .sidebar-content
    [data-sidebar-rail-item] {
    visibility: visible;
  }
  .sidebar-owner:not([data-sidebar-narrow='true'])[data-sidebar-expanded='false']:not([data-sidebar-peeking='true'])
    > .sidebar-rail
    > .sidebar-panel
    > .sidebar-header,
  .sidebar-owner:not([data-sidebar-narrow='true'])[data-sidebar-expanded='false']:not([data-sidebar-peeking='true'])
    > .sidebar-rail.sidebar-panel
    > .sidebar-header {
    padding: 0;
    width: 100%;
    min-width: 0;
  }
  .sidebar-header > .sidebar-toggle:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
  }
  .sidebar-header > .sidebar-toggle:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: -2px;
  }
  .sidebar-content {
    position: relative;
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border-default) transparent;
    scrollbar-gutter: stable;
  }
  /* The last row scrolls clear of the panel edge instead of ending flush against it. */
  .sidebar-content {
    padding-block-end: var(--space-6);
  }
  /* The rail's closing line (sidebarFooterMarkup, or a shell's sidebarFooter): at the panel's bottom while the
     navigation fits, after it with a clear gap once the rail scrolls. */
  /* The footer closes the rail: a clear gap above it, close to the bottom edge below it. */
  .sidebar-content:has(> .sidebar-footer) {
    display: flex;
    flex-direction: column;
    padding-block-end: var(--space-3);
  }
  .sidebar-content:has(> .sidebar-footer) > * {
    flex: none;
  }
  .sidebar-content > .sidebar-footer {
    display: grid;
    gap: 2px;
    margin-block-start: auto;
    padding: var(--space-8) var(--space-3) 0;
    color: var(--text-muted);
    font: var(--text-caption);
  }
  /* The rail's bottom-aligned section (AppShell routes with placement: 'end'), by the footer's mechanism: at the panel's
     bottom while the navigation fits, after it with the same clear gap once the rail scrolls. A footer follows it at
     the gap between rail sections. */
  .sidebar-content:has(> .sidebar-end) {
    display: flex;
    flex-direction: column;
  }
  .sidebar-content:has(> .sidebar-end) > * {
    flex: none;
  }
  .sidebar-content > .sidebar-end {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-block-start: auto;
    padding-block-start: var(--space-8);
  }
  .sidebar-content > .sidebar-end + .sidebar-footer {
    margin-block-start: 0;
    padding-block-start: var(--space-3);
  }
  .sidebar-footer-copyright {
    margin: 0;
  }
  .sidebar-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  /* Links sit on one quiet line under the notice; nothing is stacked below them, so a 20px row keeps the target clear. */
  .sidebar-footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    color: inherit;
    text-decoration: none;
  }
  .sidebar-footer-links a:hover {
    color: var(--text-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .sidebar-footer-links a:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: 2px;
  }
  @media (pointer: coarse) {
    .sidebar-footer-links a {
      min-height: var(--control-md);
    }
  }
  .sidebar-content::-webkit-scrollbar {
    width: 6px;
  }
  .sidebar-content::-webkit-scrollbar-track {
    background: transparent;
  }
  .sidebar-content::-webkit-scrollbar-thumb {
    background: var(--border-default);
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: content-box;
  }
  .sidebar-content::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
    background-clip: content-box;
  }
  /* Rail links: one treatment for every host's navigation list (links or route buttons). The current item, or its section, is bold and underlined. */
  .sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 44px;
    min-height: 44px;
    padding: 6px 12px;
    padding-inline-end: var(--sidebar-link-end-padding, 12px);
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-secondary);
    font: var(--text-dense);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
  }
  .sidebar-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .sidebar-link[aria-current] {
    color: var(--text-primary);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  /* Primary destinations are rows; article and section links keep the quiet text treatment. */
  .sidebar-link[data-nav-emphasis='primary'] {
    margin-block-end: var(--space-1);
    border-radius: var(--radius);
    text-decoration: none;
    transition: background var(--motion-transition) var(--motion-easing);
  }
  .sidebar-link[data-nav-emphasis='primary']:not(:disabled):not([aria-disabled='true']):hover {
    background: var(--surface-hover);
    text-decoration: none;
  }
  .sidebar-link[data-nav-emphasis='primary'][aria-current] {
    background: var(--surface-selected);
    color: var(--text-primary);
    text-decoration: none;
  }
  /* Shortcut actions overlay the row like history actions. Revealing them never changes label geometry. */
  [data-sidebar-reorder-row] {
    --sidebar-action-surface: var(--surface-panel);
    position: relative;
    margin-block-end: var(--space-1);
  }
  [data-sidebar-reorder-row] > .sidebar-link {
    margin-block-end: 0;
  }
  [data-sidebar-reorder-row]:hover {
    --sidebar-action-surface: var(--surface-hover);
  }
  [data-sidebar-reorder-row]:hover
    > .sidebar-link[data-nav-emphasis='primary']:not(:disabled):not([aria-disabled='true']) {
    background: var(--surface-hover);
  }
  [data-sidebar-reorder-row]:has(> .sidebar-link[aria-current]) {
    --sidebar-action-surface: var(--surface-selected);
  }
  [data-sidebar-reorder-row]:hover > .sidebar-link[data-nav-emphasis='primary'][aria-current] {
    background: var(--surface-selected);
  }
  [data-sidebar-reorder-row] > :is([data-reorder-handle], [data-sidebar-reorder-actions]) {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    min-width: 44px;
    min-height: 44px;
    height: 100%;
    background: var(--sidebar-action-surface);
    border-radius: 0 var(--radius) var(--radius) 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-transition) var(--motion-easing);
  }
  [data-sidebar-reorder-row] > :is([data-reorder-handle], [data-sidebar-reorder-actions])::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-end: 100%;
    width: var(--space-4);
    background: linear-gradient(to right, transparent, var(--sidebar-action-surface));
    pointer-events: none;
  }
  :dir(rtl) [data-sidebar-reorder-row] > :is([data-reorder-handle], [data-sidebar-reorder-actions]) {
    border-radius: var(--radius) 0 0 var(--radius);
  }
  :dir(rtl) [data-sidebar-reorder-row] > :is([data-reorder-handle], [data-sidebar-reorder-actions])::before {
    background: linear-gradient(to left, transparent, var(--sidebar-action-surface));
  }
  [data-sidebar-reorder-row]:is(
      :hover,
      :focus-within,
      [data-menu-open='true'],
      .is-reorder-origin,
      .reorder-drag-preview
    )
    > :is([data-reorder-handle], [data-sidebar-reorder-actions]) {
    opacity: 1;
    pointer-events: auto;
  }
  [data-sidebar-reorder-actions] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }
  [data-sidebar-reorder-row] > [data-reorder-handle],
  [data-sidebar-reorder-actions] > button {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
  }
  @media (pointer: coarse) {
    [data-sidebar-reorder-row] > :is([data-reorder-handle], [data-sidebar-reorder-actions]) {
      opacity: 1;
      pointer-events: auto;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    [data-sidebar-reorder-row] > :is([data-reorder-handle], [data-sidebar-reorder-actions]) {
      transition: none;
    }
  }
  .sidebar-owner:not([data-sidebar-narrow='true'])[data-sidebar-expanded='false']:not([data-sidebar-peeking='true'])
    > .sidebar-rail
    > .sidebar-panel
    > .sidebar-content
    [data-sidebar-reorder-row]
    > :is([data-reorder-handle], [data-sidebar-reorder-actions]),
  .sidebar-owner:not([data-sidebar-narrow='true'])[data-sidebar-expanded='false']:not([data-sidebar-peeking='true'])
    > .sidebar-rail.sidebar-panel
    > .sidebar-content
    [data-sidebar-reorder-row]
    > :is([data-reorder-handle], [data-sidebar-reorder-actions]) {
    visibility: hidden;
    pointer-events: none;
  }
  .sidebar-section-divider {
    inline-size: 100%;
    border: 0;
    border-block-start: 1px solid var(--border-default);
    margin-block: var(--space-4);
  }
  /* Reference the panel width rather than the scrollport, whose scrollbar occupies
     only one edge. Keep the divider equally inset without moving navigation icons. */
  .sidebar-owner:not([data-sidebar-narrow='true'])
    > .sidebar-rail
    > .sidebar-panel
    > .sidebar-content
    .sidebar-section-divider,
  .sidebar-owner:not([data-sidebar-narrow='true'])
    > .sidebar-rail.sidebar-panel
    > .sidebar-content
    .sidebar-section-divider {
    inline-size: calc(var(--sidebar-panel-width) - 2 * var(--space-4));
    margin-inline: calc(var(--space-4) - 4px) 0;
  }
  /* Labelled rail sections, such as AppShell route groups: a quiet caption heads each, and a clear gap separates a
     section from its neighbours. Collapsed to the icon rail, the caption keeps its slot so icons never shift. */
  .sidebar-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  :is(.sidebar-link, .sidebar-group) + .sidebar-group,
  .sidebar-group + :is(.sidebar-link, .sidebar-group) {
    margin-block-start: var(--space-3);
  }
  .sidebar-group-title {
    margin: 0 0 var(--space-1);
    padding: var(--space-1) 12px;
    overflow: hidden;
    color: var(--text-muted);
    font: var(--text-caption);
    font-weight: 600;
    white-space: nowrap;
  }
  .sidebar-owner:not([data-sidebar-narrow='true'])
    > .sidebar-rail
    > .sidebar-panel
    > .sidebar-content
    .sidebar-group-title,
  .sidebar-owner:not([data-sidebar-narrow='true'])
    > .sidebar-rail.sidebar-panel
    > .sidebar-content
    .sidebar-group-title {
    padding-inline: 14px;
  }
  .sidebar-primary-action {
    width: 100%;
    margin-block-end: var(--space-3);
  }
  [data-reduced-motion='true'] .sidebar-link[data-nav-emphasis='primary'] {
    transition: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .sidebar-link[data-nav-emphasis='primary'] {
      transition: none;
    }
  }
  .sidebar-link > svg {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--text-muted);
  }
  .sidebar-link[aria-current] > svg {
    color: var(--text-primary);
  }
  .sidebar-link:is(:disabled, [aria-disabled='true']) {
    color: var(--text-disabled);
    cursor: default;
    text-decoration: none;
  }
  /* The frame's skip link (DocumentationFrame, AppShell): out of view until Tab reaches it, then above the bar and drawer. */
  .shell-skip {
    position: fixed;
    inset-inline-start: var(--space-4);
    inset-block-start: calc(-2 * var(--control-lg));
    z-index: calc(var(--layer-drawer) + 2);
    padding: var(--space-3);
    background: var(--surface-panel);
    color: var(--text-primary);
    font: var(--text-dense);
  }
  .shell-skip:focus {
    inset-block-start: var(--space-2);
  }
  /* A drawer scrim fades in from transparent when it appears, instead of replacing the viewport at once. */
  .sidebar-scrim {
    transition: opacity var(--motion-transition) var(--motion-easing);
  }
  @starting-style {
    .sidebar-scrim {
      opacity: 0;
    }
  }
  [data-reduced-motion='true'] .sidebar-owner,
  [data-reduced-motion='true'] .sidebar-panel,
  [data-reduced-motion='true'] .sidebar-toggle {
    transition: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .sidebar-owner,
    .sidebar-panel,
    .sidebar-toggle,
    .sidebar-scrim {
      transition: none;
    }
  }

  /* The catalog specimen owns its header and reading surface; mechanics above stay shared. */
  /* Like the app shell it shows (its bleed note), the example fills a frame of definite height: the workspace grows
     under the header and the page canvas fills the workspace. */
  .sidebar-example {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: max(520px, 100%);
    overflow: hidden;
    border: 1px solid var(--border-default);
    background: var(--surface-panel);
    color: var(--text-primary);
    container-type: inline-size;
  }
  .sidebar-example-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 56px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--border-default);
    background: var(--surface-panel);
  }
  .sidebar-example-header > div {
    display: grid;
    min-width: 0;
    gap: 2px;
  }
  .sidebar-example-header strong {
    font: var(--text-dense);
    color: var(--text-primary);
  }
  .sidebar-example-header span {
    color: var(--text-muted);
    font: var(--text-dense);
  }
  .sidebar-example-header > [data-sidebar-narrow-toggle] {
    display: none;
  }
  .sidebar-example-workspace {
    position: relative;
    flex: 1 1 auto;
    min-height: 464px;
    overflow: hidden;
  }
  .sidebar-example-panel {
    padding: 0;
  }
  .sidebar-example-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .sidebar-example-nav {
    display: grid;
    align-content: start;
  }
  .sidebar-example-content {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    padding: 32px;
    background: var(--surface-canvas);
  }
  .sidebar-example-workspace[data-sidebar-side='end'] .sidebar-example-content {
    grid-column: 1;
  }
  .sidebar-example-content h2 {
    margin: 0;
    font: var(--text-title);
    overflow-wrap: anywhere;
  }
  .sidebar-example-summary {
    display: flex;
    gap: 8px 20px;
    flex-wrap: wrap;
    margin-top: 24px;
    color: var(--text-muted);
    font: var(--text-dense);
  }
  .sidebar-example-summary span:first-child {
    color: var(--text-primary);
    font-weight: 600;
  }
  .sidebar-example-content [data-demo-items] {
    margin-top: var(--space-6);
  }
  .sidebar-example-result {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 640px;
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--border-default);
  }
  .sidebar-example-result-mark {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: var(--radius);
    background: var(--surface-hover);
    color: var(--text-primary);
  }
  .sidebar-example-result > div:last-child {
    display: grid;
    gap: 4px;
    min-width: 0;
  }
  .sidebar-example-result strong {
    font: var(--text-body);
    color: var(--text-primary);
  }
  .sidebar-example-result span {
    font: var(--text-dense);
    color: var(--text-secondary);
  }
  .sidebar-example-scrim {
    display: none;
  }
  @container (max-width:700px) {
    .sidebar-example-header > [data-sidebar-narrow-toggle] {
      display: inline-flex;
    }
    .sidebar-example-workspace {
      display: flex;
      flex-direction: column;
      min-height: 464px;
      transition: none;
    }
    /* The page's canvas fills the workspace under the bar, as it does beside the rail when wide. */
    .sidebar-example-content {
      flex: 1 1 auto;
    }
    .sidebar-example-rail {
      position: absolute;
      inset: 0;
      z-index: 5;
      width: 100%;
      min-height: 0;
      pointer-events: none;
    }
    .sidebar-example-workspace .sidebar-example-rail .sidebar-header > .sidebar-toggle {
      display: none;
    }
    .sidebar-example-panel {
      position: absolute;
      inset-block: 0;
      inset-inline-start: 0;
      inset-inline-end: auto;
      width: min(300px, calc(100% - 40px));
      height: 100%;
      padding: 12px 16px;
      border: 0;
      border-inline-end: 1px solid var(--border-default);
      box-shadow: var(--shadow-overlay);
      transform: translateX(-100%);
      visibility: hidden;
      pointer-events: none;
    }
    .sidebar-example-workspace[data-sidebar-side='end'] .sidebar-example-panel {
      inset-inline-start: auto;
      inset-inline-end: 0;
      transform: translateX(100%);
    }
    .sidebar-example-workspace[data-sidebar-open='true'] .sidebar-example-panel {
      transform: none;
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
    }
    .sidebar-example-workspace[data-sidebar-open='true'] .sidebar-example-scrim {
      display: block;
      position: absolute;
      inset: 0;
      z-index: 4;
      background: var(--surface-scrim);
    }
    .sidebar-example-panel-head {
      display: flex;
    }
    .sidebar-example-workspace[data-sidebar-mode='embedded'][data-sidebar-expanded='true'] .sidebar-example-rail {
      position: relative;
      inset: auto;
      padding: 0 16px 16px;
      border-bottom: 1px solid var(--border-default);
      background: var(--surface-panel);
      pointer-events: auto;
    }
    .sidebar-example-workspace[data-sidebar-mode='embedded'][data-sidebar-expanded='true'] .sidebar-example-panel {
      position: relative;
      inset: auto;
      width: 100%;
      height: auto;
      max-height: min(300px, 50dvh);
      padding: 8px 0 12px;
      border: 0;
      box-shadow: none;
      transform: none;
      visibility: visible;
      pointer-events: auto;
    }
    .sidebar-example-workspace[data-sidebar-mode='embedded'][data-sidebar-expanded='true'] .sidebar-example-panel-head {
      display: flex;
    }
    .sidebar-example-content {
      padding: 28px 24px;
    }
    .sidebar-example-workspace[data-sidebar-side='end'] .sidebar-example-content {
      grid-column: auto;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .sidebar-example-workspace {
      transition: none;
    }
  }
}

/* styles/account-control.css */
/* The account trigger shared by headers: avatar sized by the header's --header-control, the name visually hidden unless shown, and the sign-out status for assistive technology only. Header colours stay in each header's sheet. */
@layer design {
  [data-account-control] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: inherit;
    font: var(--text-dense);
    text-decoration: none;
  }
  button[data-account-control] {
    cursor: pointer;
  }
  [data-account-control] .identity-avatar {
    display: block;
    flex: none;
    width: var(--header-control, var(--control-sm));
    height: var(--header-control, var(--control-sm));
    border-radius: 50%;
  }
  .account-control-name {
    min-width: 0;
    max-width: 16ch;
  }
  [data-account-control][data-name-hidden] .account-control-name,
  .account-control-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* The organization's mark in the account menu: a rounded square, so it never reads as a second person. The menu sets
     its size; initials sit on a sunken tile and a logo fills it, both inside a hairline. */
  .account-control-organization-mark {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--surface-sunken);
    color: var(--text-secondary);
    font: var(--text-dense);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
  }
  .account-control-organization-mark::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--border-default);
    pointer-events: none;
  }
  .account-control-organization-mark[data-mark='logo'] {
    background: var(--surface-panel);
  }
  .account-control-organization-mark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  @media (pointer: coarse) {
    [data-account-control] {
      min-width: var(--control-md);
      min-height: var(--control-md);
    }
  }
}

/* styles/modal-layer.css */
/* Internal surface contract for components/modal-layer.js: an inline element shown as a layer attached to its header. */
@layer design {
  /* Placement defaults; openModalLayer sets the live values inline from the anchor's rect. */
  [data-modal-layer] {
    --layer-top: 0px;
    --layer-left: 0px;
    --layer-width: 100%;
  }
  [data-modal-layer]:popover-open {
    position: fixed;
    margin: 0;
    border: 0;
    padding: 0;
    inset: auto;
    top: var(--layer-top);
    left: var(--layer-left);
    width: var(--layer-width);
    max-width: none;
    max-height: none;
    height: calc(var(--visible-viewport-top, 0px) + var(--visible-viewport-height, 100dvh) - var(--layer-top));
    overflow: auto;
    overscroll-behavior: contain;
    animation: modal-layer-in var(--motion-transition) var(--motion-easing);
  }
  [data-modal-layer][data-modal-layer-scrim]:popover-open {
    background: var(--surface-scrim);
  }
  [data-modal-layer]::backdrop {
    background: transparent;
  }
  @keyframes modal-layer-in {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    [data-modal-layer]:popover-open {
      animation: none;
    }
  }
  :is([data-reduced-motion='true'] [data-modal-layer], [data-modal-layer][data-reduced-motion='true']):popover-open {
    animation: none;
  }
}

/* styles/app-bar.css */
/* How far the search field has been entered (0 at rest, 1 focused or open). Only this number animates, so the field's
   colours always come from the current theme: a theme change, or a dark theme sheet arriving after the field was first
   styled, applies at once instead of fading the resting field from light colours. */
@property --app-bar-search-entered {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
@layer design {
  .app-bar-slot {
    display: block;
    min-width: 0;
    container-type: inline-size;
    container-name: app-bar-slot;
  }
  .app-bar-slot[data-app-bar-sticky='true'] {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--layer-sticky);
  }
  .app-bar {
    --app-bar-height: calc(var(--control-lg) + var(--space-2));
    --app-bar-control: var(--control-sm);
    --header-control: var(--app-bar-control);
    position: relative;
    display: grid;
    grid-template-columns: minmax(max-content, 1fr) minmax(180px, 440px) minmax(max-content, 1fr);
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
    min-height: var(--app-bar-height);
    padding: var(--space-1) var(--space-4);
    box-sizing: border-box;
    background: var(--surface-ink);
    color: var(--text-inverse);
  }
  /* The layout signal scripts read on interaction (wide, medium, narrow); the container queries below set it. */
  .app-bar {
    --app-bar-layout: wide;
  }
  /* Equal side tracks keep search centred on the bar while both sides fit them; a side that needs more keeps its content
     width and search yields, down to its minimum. Brand and links start, actions and user end. */
  .app-bar-start {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
  }
  .app-bar-search {
    grid-column: 2;
    grid-row: 1;
  }
  .app-bar-end {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    min-width: 0;
  }
  /* Without search the middle track closes, so links keep the space. */
  .app-bar:not(:has(> .app-bar-search)) {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .app-bar:not(:has(> .app-bar-search)) > .app-bar-end {
    grid-column: 2;
  }
  /* Links sit beside the brand while they fit and wrap below it when they don't, at any width; the first line keeps the bar's row height so the end stays level with the brand. */
  .app-bar:not(:has(> .app-bar-search)) {
    --app-bar-row: calc(var(--app-bar-height) - 2 * var(--space-1));
    align-items: start;
  }
  .app-bar:not(:has(> .app-bar-search)) > .app-bar-start {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    row-gap: 0;
    min-height: var(--app-bar-row);
  }
  .app-bar:not(:has(> .app-bar-search)) .app-bar-brand,
  .app-bar:not(:has(> .app-bar-search)) > .app-bar-end {
    min-height: var(--app-bar-row);
  }
  .app-bar:not(:has(> .app-bar-search)) .app-bar-links {
    flex: 1 1 auto;
  }
  .app-bar:not(:has(> .app-bar-search)) .app-bar-links ul {
    flex-wrap: wrap;
  }
  /* Height sets the bar and the controls inside it, so each size is visibly different. */
  .app-bar[data-height='compact'] {
    --app-bar-height: var(--control-lg);
    --app-bar-control: var(--control-xs);
  }
  .app-bar[data-height='standard'] {
    --app-bar-height: calc(var(--control-lg) + var(--space-2));
    --app-bar-control: var(--control-sm);
  }
  .app-bar[data-height='tall'] {
    --app-bar-height: calc(var(--control-lg) + var(--space-6));
    --app-bar-control: var(--control-lg);
  }
  .app-bar-brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    color: var(--text-inverse);
    font: var(--text-body);
    text-decoration: none;
    white-space: nowrap;
  }
  .app-bar-logo {
    display: block;
    width: var(--app-bar-control);
    height: var(--app-bar-control);
    flex: none;
    object-fit: contain;
    filter: brightness(0) invert(1);
  }
  .app-bar-brand-label {
    font: var(--text-wordmark);
  }
  .app-bar-brand[data-label-hidden] .app-bar-brand-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .app-bar-context,
  .app-bar-location {
    min-width: 0;
    max-width: 18ch;
    color: var(--text-inverse);
    font: var(--text-dense);
  }
  .app-bar-search {
    position: relative;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    min-height: var(--app-bar-control);
    padding-inline: var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    background: var(--surface-panel);
    color: var(--text-primary);
  }
  .app-bar-search-icon {
    display: grid;
    place-items: center;
    color: var(--text-muted);
    pointer-events: none;
  }
  .app-bar-search > .clearable-field {
    grid-column: 2;
    display: grid;
    min-width: 0;
    width: 100%;
  }
  .app-bar .app-bar-search input[type='search'] {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    min-height: calc(var(--app-bar-control) - 2px);
    padding-block: 0;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font: var(--text-dense);
    outline: 0;
  }
  .app-bar .app-bar-search > input[type='search'] {
    grid-column: 2;
  }
  .app-bar-search input::placeholder {
    color: var(--text-hint);
  }
  /* Search stays quiet until the user enters it; focused content uses the panel palette. Entering fades between the
     two through --app-bar-search-entered, never by transitioning the colours themselves. */
  .app-bar-search {
    --app-bar-search-entered: 0;
    background: color-mix(
      in srgb,
      var(--surface-panel) calc(var(--app-bar-search-entered) * 100%),
      var(--surface-ink-edge)
    );
    color: var(--text-on-ink-secondary);
    border-color: color-mix(
      in srgb,
      var(--border-default) calc(var(--app-bar-search-entered) * 100%),
      var(--surface-ink-edge)
    );
    transition: --app-bar-search-entered var(--motion-transition) var(--motion-easing);
  }
  .app-bar-search:is(:focus-within, :popover-open) {
    --app-bar-search-entered: 1;
    color: var(--text-primary);
  }
  .app-bar .app-bar-search input[type='search'],
  .app-bar-search .app-bar-search-icon,
  .app-bar-search .app-bar-search-shortcut,
  .app-bar-search input::placeholder {
    color: inherit;
  }
  .app-bar-search:is(:focus-within, :popover-open) input::placeholder {
    color: var(--text-hint);
  }
  [data-reduced-motion='true'] .app-bar-search {
    transition: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .app-bar-search {
      transition: none;
    }
  }
  .app-bar-search:has(.app-bar-search-shortcut) {
    grid-template-columns: 18px minmax(0, 1fr) auto;
  }
  .app-bar-search-shortcut {
    grid-column: 3;
    grid-row: 1;
    white-space: nowrap;
    color: var(--text-muted);
    font: var(--text-dense);
    pointer-events: none;
  }
  .app-bar-search:has([data-has-value='true']) .app-bar-search-shortcut {
    display: none;
  }
  .app-bar-search-results {
    position: absolute;
    inset-block-start: calc(100% + var(--space-1));
    inset-inline: 0;
    z-index: 1;
    max-height: min(560px, 70dvh);
    overflow: auto;
    padding: var(--space-2);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    background: var(--surface-panel);
    color: var(--text-primary);
    box-shadow: var(--shadow-overlay);
  }
  .app-bar-search-results > p {
    padding: var(--space-3);
  }
  .app-bar-search-results a {
    color: var(--text-primary);
  }
  .app-bar-search-result {
    display: block;
    width: 100%;
    min-height: var(--control-md);
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-primary);
    font: var(--text-body);
    text-align: start;
    text-decoration: none;
  }
  /* A route's or owner row's description, matching the shared search-result summary line; it wraps rather than clips
     because these rows have no overflow fade. */
  .app-bar-search-result-subtitle {
    display: block;
    color: var(--text-secondary);
    font: var(--text-dense);
  }
  .app-bar-search-results :is(a, .app-bar-search-result):is(:hover, :focus-visible) {
    background: var(--surface-hover);
    color: var(--text-primary);
  }
  .app-bar-search-results .empty-state .btn {
    color: var(--text-primary);
    background: var(--surface-panel);
  }
  .app-bar-search-more {
    width: 100%;
    margin-top: var(--space-2);
    color: var(--text-primary);
    background: var(--surface-panel);
    border-color: var(--border-default);
  }
  .app-bar-links {
    min-width: 0;
  }
  .app-bar-links ul {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .app-bar-links a {
    display: block;
    max-width: 24ch;
    padding: var(--space-2);
    overflow-wrap: anywhere;
    border-radius: var(--radius);
    color: var(--text-on-ink-secondary);
    font: var(--text-body);
    text-decoration: none;
  }
  /* In the row a link keeps its label on one line; when the row cannot hold the links, the bar moves them into its menu
     (data-links-menu), as at 880px and narrower. The sheet keeps wrapping long labels. */
  .app-bar-links:not(:popover-open) a {
    max-width: none;
    white-space: nowrap;
    overflow-wrap: normal;
  }
  .app-bar[data-links-menu] .app-bar-lead {
    display: flex;
  }
  .app-bar[data-links-menu] .app-bar-links:not(:popover-open) {
    display: none;
  }
  .app-bar-links a:hover {
    color: var(--text-inverse);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .app-bar-links a[aria-current='page'] {
    color: var(--text-inverse);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .app-bar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-1);
    min-width: 0;
  }
  /* Owner-mounted controls can have wrappers, but their popovers keep the panel palette and sizing.
     Top-layer rendering preserves DOM ancestry, so every header control rule respects that boundary. */
  .app-bar
    :is(.app-bar-actions, .app-bar-lead)
    .btn:not(.app-bar :is([popover], dialog), .app-bar :is([popover], dialog) *),
  .app-bar > .app-bar-search-toggle {
    --height: var(--app-bar-control);
    padding-block: 0;
  }
  .app-bar
    :is(.app-bar-actions, .app-bar-lead)
    .btn:not(.app-bar :is([popover], dialog), .app-bar :is([popover], dialog) *, :disabled, [aria-disabled='true']),
  .app-bar > .app-bar-search-toggle:not(:disabled, [aria-disabled='true']) {
    color: var(--text-inverse);
    border-color: var(--surface-ink-edge);
    background: var(--surface-ink-edge);
  }
  .app-bar
    :is(.app-bar-actions, .app-bar-lead)
    .btn:not(
      .app-bar :is([popover], dialog),
      .app-bar :is([popover], dialog) *,
      :disabled,
      [aria-disabled='true']
    ):hover,
  .app-bar > .app-bar-search-toggle:not(:disabled, [aria-disabled='true']):hover {
    color: var(--text-inverse);
    border-color: var(--surface-ink-edge);
    background: color-mix(in srgb, var(--surface-ink-edge), var(--text-inverse) 12%);
  }
  /* On the inverse header every progress phase follows its control's foreground. The ring shape still
     distinguishes completion and failure; marks inside the tray retain their normal semantic colours. */
  .app-bar
    :is(.app-bar-actions, .app-bar-lead)
    .btn
    > .progress-ring:not(.app-bar :is([popover], dialog), .app-bar :is([popover], dialog) *) {
    --progress-ring-color: currentColor;
  }
  /* Three classes outrank every .btn display rule whatever order stylesheets load in. */
  .app-bar .app-bar-actions .app-bar-action-narrow-only {
    display: none;
  }
  /* A group whose only actions moved to the lead stays for owners' own controls, taking no space until it has one. */
  .app-bar-actions:empty {
    display: none;
  }
  /* More actions appears only at 520px and narrower, where the actions it lists are hidden. */
  .app-bar .app-bar-actions .app-bar-actions-more {
    display: none;
  }
  /* The lead holds the narrow menu control (the owner's drawer toggle or the bar's own links button) before the brand. It
     shows from 880; owners whose drawer opens wider show it there too, inside the start track. */
  .app-bar-lead {
    display: none;
    flex: none;
    align-items: center;
    align-self: center;
  }
  .app-bar-nav-toggle[aria-expanded='true'] > .app-bar-nav-open,
  .app-bar-nav-toggle:not([aria-expanded='true']) > .app-bar-nav-close {
    display: none;
  }
  /* The search button and the sheet's close button exist whenever search does; only the narrow layout shows them. */
  .app-bar .app-bar-search .app-bar-search-close,
  .app-bar .app-bar-search ~ .app-bar-search-toggle {
    display: none;
  }
  /* Layout, the hidden name and the status come from account-control.css; the bar keeps its ink colour and control size. */
  .app-bar-user {
    color: var(--text-inverse);
  }
  .app-bar-user .identity-avatar {
    display: block;
    flex: none;
    width: var(--app-bar-control);
    height: var(--app-bar-control);
    border-radius: 50%;
  }
  /* A page that learns the user after first paint sets data-app-bar-user=expected on the root before paint; the end keeps the
     avatar's space until setUser() fills it or the page clears the hint. */
  :root[data-app-bar-user='expected'] .app-bar-end:not(:has(> .app-bar-user))::after {
    content: '';
    flex: none;
    width: var(--app-bar-control);
    height: var(--app-bar-control);
  }
  .app-bar-user[data-name-hidden] .app-bar-user-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .app-bar-sign-out-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* Ink focus belongs to the bar's own controls; the search frame and popovers anchored in the bar (the appearance menu) keep the page ring. */
  .app-bar :focus-visible:not(.app-bar :is([popover], dialog), .app-bar :is([popover], dialog) *, .app-bar-search *) {
    outline: 2px solid var(--focus-on-ink);
    outline-offset: 2px;
  }
  /* One row at every width. From 880 the bar is a flex row (lead · brand · search · end): links leave the row for a sheet
     opened from the leading menu button. [data-height] (always rendered) lifts the bar and start rules to the specificity of
     the wide no-search rules above, which they follow and so replace. */
  @container app-bar-slot (max-width:880px) {
    .app-bar[data-height] {
      --app-bar-layout: medium;
      display: flex;
      align-items: center;
      gap: var(--space-2);
      padding-inline: max(var(--space-3), env(safe-area-inset-left)) max(var(--space-3), env(safe-area-inset-right));
    }
    .app-bar-lead {
      display: flex;
    }
    .app-bar[data-height] > .app-bar-start {
      display: contents;
    }
    .app-bar-brand {
      flex: 0 1 auto;
      min-width: 0;
    }
    .app-bar-links:not(:popover-open) {
      display: none;
    }
    .app-bar-context {
      display: none;
    }
    .app-bar-search {
      flex: 1 1 240px;
      min-width: 160px;
      max-width: 440px;
      margin-inline: auto;
    }
    .app-bar-end {
      flex: none;
      margin-inline-start: auto;
    }
    .app-bar-search ~ .app-bar-end {
      margin-inline-start: 0;
    }
    .app-bar-user-name {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    .app-bar .app-bar-actions .app-bar-action-narrow-only {
      display: inline-flex;
    }
  }
  /* From 520 search sits behind a button that opens it as a sheet over the bar, and the brand pushes the rest to the end.
     Adjacent icon controls touch (44px targets carry their own space); groups are a space-1 apart. Labelled icon actions
     keep only their icon (the label stays the name and tooltip; the shared data-collapse rule keys on a tiny unnamed
     container the bar never is), and menu actions give way to More actions. */
  @container app-bar-slot (max-width:520px) {
    .app-bar[data-height] {
      --app-bar-layout: narrow;
      gap: var(--space-1);
      padding-inline: max(var(--space-2), env(safe-area-inset-left)) max(var(--space-2), env(safe-area-inset-right));
    }
    .app-bar-search:not(:popover-open) {
      display: none;
    }
    .app-bar .app-bar-search ~ .app-bar-search-toggle {
      display: inline-flex;
    }
    .app-bar-brand {
      margin-inline-end: auto;
    }
    .app-bar-location {
      display: none;
    }
    .app-bar-end {
      gap: var(--space-1);
    }
    .app-bar-actions {
      gap: 0;
    }
    .app-bar-search-shortcut {
      display: none;
    }
    .app-bar-actions .btn[data-collapse]:not(.app-bar :is([popover], dialog), .app-bar :is([popover], dialog) *) {
      --btn-min: 0px;
      width: var(--height);
      padding: 0;
      gap: 0;
    }
    .app-bar-actions
      .btn[data-collapse]:not(.app-bar :is([popover], dialog), .app-bar :is([popover], dialog) *)
      > .btn-label {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    .app-bar
      .app-bar-actions
      [data-narrow='menu']:not(.app-bar :is([popover], dialog), .app-bar :is([popover], dialog) *) {
      display: none;
    }
    .app-bar .app-bar-actions .app-bar-actions-more {
      display: inline-flex;
    }
  }
  /* Sheets: the links below the bar over a scrim, and search over the bar. These follow the narrow rules they undo and, at
     three or more classes, outrank the modal layer's own surface reset. */
  .app-bar .app-bar-links:popover-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .app-bar .app-bar-links:popover-open > ul {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    max-height: 100%;
    overflow: auto;
    overscroll-behavior: contain;
    padding: var(--space-2) 0 max(var(--space-4), env(safe-area-inset-bottom));
    background: var(--surface-panel);
    box-shadow: var(--shadow-overlay);
  }
  .app-bar .app-bar-links:popover-open a {
    display: flex;
    align-items: center;
    max-width: none;
    min-height: var(--control-lg);
    padding-block: 0;
    padding-inline: max(var(--space-4), env(safe-area-inset-left)) max(var(--space-4), env(safe-area-inset-right));
    border-inline-start: 3px solid transparent;
    border-radius: 0;
    color: var(--text-primary);
    font: var(--text-body);
    text-decoration: none;
  }
  .app-bar .app-bar-links:popover-open a:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
    text-decoration: none;
  }
  .app-bar .app-bar-links:popover-open a[aria-current='page'] {
    border-inline-start-color: var(--text-primary);
    background: var(--surface-selected);
    color: var(--text-primary);
    font-weight: 600;
    text-decoration: none;
  }
  .app-bar .app-bar-search:popover-open {
    display: grid;
    grid-template-columns: auto 18px minmax(0, 1fr);
    grid-template-rows: var(--app-bar-height) minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-2);
    row-gap: 0;
    padding: env(safe-area-inset-top) max(var(--space-2), env(safe-area-inset-right)) 0
      max(var(--space-2), env(safe-area-inset-left));
    border: 0;
    border-radius: 0;
    background: var(--surface-panel);
    color: var(--text-primary);
    overflow: hidden;
  }
  .app-bar .app-bar-search:popover-open > .app-bar-search-close {
    display: inline-flex;
    grid-column: 1;
    grid-row: 1;
  }
  .app-bar .app-bar-search:popover-open > .app-bar-search-icon {
    grid-column: 2;
    grid-row: 1;
  }
  .app-bar .app-bar-search:popover-open > :is(.clearable-field, input[type='search']) {
    grid-column: 3;
    grid-row: 1;
  }
  .app-bar .app-bar-search:popover-open > .app-bar-search-shortcut {
    display: none;
  }
  /* In flow in the sheet (relative with no offsets), still the containing block of its positioned results. */
  .app-bar .app-bar-search:popover-open > .app-bar-search-results {
    position: relative;
    inset: auto;
    grid-column: 1/-1;
    grid-row: 2;
    align-self: stretch;
    max-height: none;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding-block-end: max(var(--space-4), env(safe-area-inset-bottom));
    border: 0;
    border-block-start: 1px solid var(--border-default);
    border-radius: 0;
    box-shadow: none;
  }
  @media (pointer: coarse) {
    .app-bar
      :is(.app-bar-actions, .app-bar-lead)
      .btn:not(.app-bar :is([popover], dialog), .app-bar :is([popover], dialog) *),
    .app-bar > .app-bar-search-toggle,
    .app-bar .app-bar-search .app-bar-search-close {
      min-width: var(--control-md);
      min-height: var(--control-md);
    }
    .app-bar:not(:has(> .app-bar-search)) {
      --app-bar-row: max(calc(var(--app-bar-height) - 2 * var(--space-1)), var(--control-md));
    }
    .app-bar .app-bar-search input[type='search'] {
      font-size: 16px;
    }
    /* The account control is at least a 44px target, so the space an expected user keeps is too. */
    :root[data-app-bar-user='expected'] .app-bar-end:not(:has(> .app-bar-user))::after {
      width: max(var(--app-bar-control), var(--control-md));
      height: max(var(--app-bar-control), var(--control-md));
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .app-bar {
      scroll-behavior: auto;
    }
  }
}

/* styles/app-footer.css */
@layer design {
  .app-footer {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-6) 0;
    border-top: 1px solid var(--border-default);
    color: var(--text-muted);
    font: var(--text-dense);
  }
  .app-footer a {
    color: var(--text-secondary);
    text-decoration: none;
  }
  .app-footer a:hover {
    color: var(--text-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .app-footer a[aria-current='page'] {
    color: var(--text-primary);
  }
  .app-footer ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .app-footer-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    min-width: 0;
  }
  .app-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-secondary);
    font-weight: 600;
  }
  .app-footer-logo {
    display: block;
    width: 20px;
    height: 20px;
    object-fit: contain;
  }
  .app-footer-legal {
    margin: 0 0 0 auto;
  }
  .app-footer-appearance {
    display: inline-flex;
    align-items: center;
  }
  .app-footer-description {
    flex-basis: 100%;
    max-width: 60ch;
    margin: 0;
  }
  .app-footer-note {
    flex-basis: 100%;
    margin: 0;
  }
  /* A link inside the note's sentence keeps its underline: colour alone would not set it apart from the text. */
  .app-footer-note a {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .app-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--control-md);
    min-height: var(--control-md);
  }
  /* The app's form fills this slot; the footer only gives it a readable measure. */
  .app-footer-newsletter {
    min-width: 0;
    max-width: 28rem;
  }
  .app-footer-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-4) var(--space-6);
  }
  .app-footer-group h2 {
    margin: 0 0 var(--space-2);
    color: var(--text-secondary);
    font: var(--text-dense);
    font-weight: 600;
  }
  .app-footer-group ul {
    display: grid;
    gap: var(--space-1);
  }
  @media (max-width: 520px) {
    .app-footer-legal {
      margin-inline-start: 0;
      flex-basis: 100%;
    }
  }
}

/* styles/badge.css */
@layer design {
  .badge {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-width: 20px;
    height: 20px;
    padding-inline: 6px;
    border-radius: 999px;
    background: var(--surface-selected);
    color: var(--text-primary);
    font: var(--text-dense);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .badge[data-emphasis='loud'] {
    background: var(--accent);
    color: var(--text-on-accent);
  }
  .badge[data-dot='true'] {
    width: 8px;
    min-width: 8px;
    height: 8px;
    padding: 0;
    background: var(--text-primary);
  }
  .badge[data-dot='true'][data-emphasis='loud'] {
    background: var(--accent);
    box-shadow: none;
  }
  .badge-anchor {
    position: relative;
    display: inline-flex;
    flex: none;
  }
  .badge-anchor:has(> .btn.icon),
  .btn.icon.badge-anchor {
    overflow: visible;
  }
  .badge-anchor:has(> .btn.icon) > .badge:not([data-emphasis='loud']),
  .btn.icon.badge-anchor > .badge:not([data-emphasis='loud']) {
    background: var(--surface-ink);
    color: var(--text-inverse);
    box-shadow: 0 0 0 1px var(--text-primary);
  }
  .badge-anchor:has(> .btn.icon) > .badge,
  .btn.icon.badge-anchor > .badge {
    position: absolute;
    inset-block-start: -5px;
    inset-inline-end: -5px;
    min-width: 20px;
    height: 20px;
    padding-inline: 5px;
    font-size: 12px;
    pointer-events: none;
  }
  .badge-examples {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
  }
  .badge-anchor:has(> .btn.icon) > .badge[data-dot='true'],
  .btn.icon.badge-anchor > .badge[data-dot='true'] {
    width: 8px;
    min-width: 8px;
    height: 8px;
    padding: 0;
  }
  .badge-demo [data-notifications] {
    margin: 5px;
  }
  .badge-demo .content-tabs [role='tab'] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .badge-demo-list {
    min-height: 228px;
    margin-top: 16px;
  }
  .badge-demo-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-block: 16px;
    border-bottom: 1px solid var(--border-default);
  }
  .badge-demo-item > div {
    min-width: 0;
  }
  .badge-demo-item strong {
    font: var(--text-body);
    font-weight: 600;
    overflow-wrap: anywhere;
  }
  .badge-demo-item p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font: var(--text-dense);
  }
  .badge-demo-item > .btn {
    flex: none;
  }
  @container (max-width:420px) {
    .badge-demo-item {
      align-items: flex-start;
      flex-wrap: wrap;
    }
  }

  /* A dot anchored on a control is cut out of it with the surface colour, never outlined. */
  .btn.icon.badge-anchor > .badge[data-dot='true'] {
    box-shadow: 0 0 0 2px var(--surface-panel);
  }
}

/* styles/documentation.css */
/* DocumentationShell: layout for the shared frame only. The bar, rail links, toggle and footer keep their own sheets.
   One responsive component: at 1023px of shell width and below, the same rail becomes the drawer the bar's menu opens. */
@layer design {
  /* A rail link's count trails its label; the collapsed rail, which shows icons only, leaves it out. */
  .documentation-shell .sidebar-link > .badge {
    flex: none;
    margin-inline-start: auto;
  }
  .documentation-shell
    .sidebar-owner:not([data-sidebar-narrow='true'])[data-sidebar-expanded='false']:not([data-sidebar-peeking='true'])
    .sidebar-link
    > .badge {
    display: none;
  }
  .documentation-shell {
    --documentation-rail-top: calc(var(--control-lg) + var(--space-2));
    --documentation-main-width: 1360px;
    container: documentation-shell / inline-size;
    min-width: 0;
    background: var(--surface-canvas);
    color: var(--text-primary);
  }
  .documentation-shell[data-bar-height='compact'] {
    --documentation-rail-top: var(--control-lg);
  }
  .documentation-shell[data-bar-height='tall'] {
    --documentation-rail-top: calc(var(--control-lg) + var(--space-6));
  }
  .documentation-header[data-app-bar-sticky='false'] ~ .documentation-body {
    --documentation-rail-top: 0px;
  }
  /* Page to page, the identical bar and rail hold still while only the article cross-fades; unsupported browsers navigate
     normally. Linking this sheet opts the document into cross-document view transitions. The timing applies to the shell's
     own groups and the page (root), never to view transitions the app names. */
  @view-transition {
    navigation: auto;
  }
  .documentation-shell:not([data-scope='local']) > .documentation-header {
    view-transition-name: documentation-header;
  }
  .documentation-shell:not([data-scope='local']) > .documentation-body > .documentation-sidebar-rail {
    view-transition-name: documentation-rail;
  }
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-group(documentation-header),
  ::view-transition-old(documentation-header),
  ::view-transition-new(documentation-header),
  ::view-transition-group(documentation-rail),
  ::view-transition-old(documentation-rail),
  ::view-transition-new(documentation-rail) {
    animation-duration: var(--motion-transition);
  }
  /* Static starter markup agrees with the prepaint theme before its appearance control hydrates. */
  :root:not([data-theme='dark']) .documentation-appearance-dark,
  :root[data-theme='dark'] .documentation-appearance-light {
    display: none;
  }
  /* The rail stays under the bar and spans the rest of the viewport; its navigation scrolls on its own. */
  .documentation-body.sidebar-owner {
    overflow: clip;
  }
  .documentation-body > .documentation-sidebar-rail {
    position: sticky;
    inset-block-start: var(--documentation-rail-top);
    align-self: start;
    width: 100%;
    min-width: 0;
    height: calc(100dvh - var(--documentation-rail-top));
  }
  .documentation-body > .documentation-main {
    grid-column: 2;
    grid-row: 1;
  }
  .documentation-body[data-sidebar-side='end'] > .documentation-main {
    grid-column: 1;
  }
  .documentation-panel {
    overscroll-behavior: contain;
  }
  .documentation-sidebar-scrim {
    display: none;
  }
  /* Grouped article links under plain subject labels; the current page is bold and underlined (navigation.plain-article-list). */
  .documentation-nav {
    display: grid;
    align-content: start;
    gap: var(--space-3);
  }
  .documentation-nav-group {
    display: grid;
    min-width: 0;
  }
  .documentation-nav-title {
    margin: 0 var(--space-3) var(--space-1);
    color: var(--text-primary);
    font: var(--text-dense);
    font-weight: 600;
    letter-spacing: 0;
  }
  .documentation-nav-title > a {
    display: block;
    margin-inline: calc(-1 * var(--space-3));
    padding: var(--space-1) var(--space-3);
    color: var(--text-primary);
    text-decoration: none;
  }
  .documentation-nav-title > a:hover,
  .documentation-nav-title > a[aria-current] {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .documentation-nav-title > a[aria-current] {
    font-weight: 700;
  }
  /* Touch: a group title link is a 44px target. */
  @media (pointer: coarse) {
    .documentation-nav-title > a {
      display: flex;
      align-items: center;
      min-height: var(--control-md);
    }
  }
  .documentation-nav :is(.documentation-nav-links, .documentation-nav-anchors) {
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .documentation-nav-group[data-overview] > .documentation-nav-links,
  .documentation-nav-anchors {
    padding-inline-start: var(--space-3);
  }
  .documentation-nav li {
    min-width: 0;
    margin: 0;
    padding: 0;
  }
  .documentation-nav .sidebar-link {
    min-height: max(var(--density-row), var(--control-xs));
  }
  /* Collapsible groups (collapsibleGroups): the title row opens its links with a chevron, and an open group sits on a
     faintly different surface so it is clear which group you are inside. Two levels only. */
  details.documentation-nav-group {
    display: block;
  }
  /* A group row matches the rail's primary rows: 44px, the same inset, radius and hover. */
  .documentation-nav-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-2) 14px;
    list-style: none;
    cursor: pointer;
    border-radius: var(--radius);
    transition: background var(--motion-transition) var(--motion-easing);
  }
  .documentation-nav-summary::-webkit-details-marker {
    display: none;
  }
  .documentation-nav-summary::marker {
    content: '';
  }
  .documentation-nav-summary:hover {
    background: var(--surface-hover);
  }
  .documentation-nav-summary:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: -2px;
  }
  .documentation-nav-summary > .documentation-nav-title {
    margin: 0;
  }
  /* Physical borders draw the corner once: closed points to the inline end (› or ‹ in RTL), open points down. */
  .documentation-nav-indicator {
    flex: none;
    width: 7px;
    height: 7px;
    margin-inline-end: 2px;
    border-right: 1.5px solid var(--text-secondary);
    border-bottom: 1.5px solid var(--text-secondary);
    transform: rotate(-45deg);
  }
  .documentation-nav-indicator:dir(rtl) {
    transform: rotate(135deg);
  }
  details.documentation-nav-group[open] > .documentation-nav-summary > .documentation-nav-indicator {
    transform: rotate(45deg);
  }
  details.documentation-nav-group > .documentation-nav-links {
    padding-block: 2px var(--space-2);
  }
  details.documentation-nav-group[open] {
    margin-inline: var(--space-1);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--text-primary) 4%, transparent);
  }
  details.documentation-nav-group[open] > .documentation-nav-summary {
    padding-inline: 10px;
  }
  details.documentation-nav-group[open] > .documentation-nav-links > li > .sidebar-link {
    padding-inline-start: 10px;
  }
  /* A long open group ends with a quiet Collapse, aligned with its links. */
  .documentation-nav-end {
    margin-block-start: var(--space-1);
  }
  .documentation-nav-collapse {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 28px;
    padding: 2px var(--space-2);
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--text-muted);
    font: var(--text-caption);
    cursor: pointer;
  }
  .documentation-nav-collapse:hover {
    color: var(--text-primary);
  }
  .documentation-nav-collapse:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: -2px;
  }
  .documentation-nav-collapse-icon {
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(2px) rotate(-135deg);
  }
  @media (pointer: coarse) {
    .documentation-nav-summary,
    .documentation-nav-collapse {
      min-height: var(--control-md);
    }
  }
  .documentation-main {
    /* Keep the shell-specific name and the shared article-content query contract. */
    container: documentation-article article / inline-size;
    min-width: 0;
    width: 100%;
    max-width: var(--documentation-main-width);
    margin: 0 auto;
    padding: calc(var(--space-8) + var(--space-4)) clamp(var(--space-6), 4cqi, calc(2 * var(--space-8))) 0;
  }
  .documentation-main:focus {
    outline: none;
  }
  .documentation-main > .app-footer,
  .documentation-main > .documentation-footer-slot > .app-footer {
    margin-block-start: var(--space-8);
  }
  /* A preview holds the frame in its own box: the rail fills the body's height and the drawer stays inside the root. */
  .documentation-shell[data-scope='local'] {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: clip;
  }
  .documentation-shell[data-scope='local'] > .documentation-header {
    flex: none;
  }
  .documentation-shell[data-scope='local'] > .documentation-body {
    flex: 1 1 auto;
    min-height: 0;
  }
  .documentation-shell[data-scope='local'] > .documentation-body > .documentation-main {
    position: relative;
    min-height: 0;
    overflow: auto;
  }
  .documentation-shell[data-scope='local'] .documentation-skip {
    position: absolute;
  }
  .documentation-shell[data-scope='local'] > .documentation-body > .documentation-sidebar-rail {
    position: relative;
    inset-block-start: auto;
    align-self: stretch;
    height: auto;
  }
  /* Narrow: the rail is a drawer from the rail's side, opened by the bar's menu action; the edge toggle gives way to a close button. */
  @container documentation-shell (max-width:1023px) {
    .documentation-header .app-bar .app-bar-lead {
      display: flex;
    }
    .documentation-body.sidebar-owner {
      display: block;
      transition: none;
    }
    .documentation-body > .documentation-sidebar-rail {
      position: fixed;
      inset: 0;
      z-index: calc(var(--layer-drawer) + 1);
      height: 100dvh;
      pointer-events: none;
    }
    /* The local drawer's containing block is the clipping shell; the stacked body stops clipping so the drawer never crosses it. */
    .documentation-shell[data-scope='local'] > .documentation-body.sidebar-owner {
      overflow: visible;
    }
    .documentation-shell[data-scope='local'] > .documentation-body > .documentation-sidebar-rail {
      position: absolute;
      height: 100%;
    }
    .documentation-shell[data-scope='local'] > .documentation-body > .documentation-main {
      height: 100%;
    }
    .documentation-body > .documentation-sidebar-rail > .documentation-panel {
      inset-block: 0;
      inset-inline-start: 0;
      inset-inline-end: auto;
      width: min(280px, calc(100% - 3 * var(--space-4)));
      height: 100%;
      padding: max(var(--space-3), env(safe-area-inset-top)) var(--space-3)
        max(var(--space-3), env(safe-area-inset-bottom));
      border: 0;
      border-inline-end: 1px solid var(--border-default);
      box-shadow: var(--shadow-overlay);
      opacity: 1;
      visibility: hidden;
      transform: translateX(-100%);
      pointer-events: none;
    }
    .documentation-body[data-sidebar-side='end'] > .documentation-sidebar-rail > .documentation-panel {
      inset-inline-start: auto;
      inset-inline-end: 0;
      border-inline-end: 0;
      border-inline-start: 1px solid var(--border-default);
      transform: translateX(100%);
    }
    :dir(rtl) .documentation-body:not([data-sidebar-side='end']) > .documentation-sidebar-rail > .documentation-panel {
      transform: translateX(100%);
    }
    :dir(rtl) .documentation-body[data-sidebar-side='end'] > .documentation-sidebar-rail > .documentation-panel {
      transform: translateX(-100%);
    }
    .documentation-body[data-sidebar-open='true'] > .documentation-sidebar-rail > .documentation-panel {
      visibility: visible;
      transform: none;
      pointer-events: auto;
    }
    .documentation-body .sidebar-header > .sidebar-toggle {
      display: none;
    }
    .documentation-rail-head.sidebar-header {
      display: flex;
      justify-content: space-between;
      gap: var(--space-2);
      min-height: 44px;
      padding: 0;
      margin-block-end: var(--space-3);
    }
    .documentation-rail-head > .sidebar-heading {
      margin: 0;
      text-align: start;
    }
    .documentation-rail-head > [data-sidebar-close] {
      flex: none;
      margin-inline-start: auto;
    }
    .documentation-body[data-sidebar-open='true'] > .documentation-sidebar-scrim {
      display: block;
      position: fixed;
      inset: 0;
      z-index: var(--layer-drawer);
      background: var(--surface-scrim);
    }
    .documentation-shell[data-scope='local']
      .documentation-body[data-sidebar-open='true']
      > .documentation-sidebar-scrim {
      position: absolute;
    }
    .documentation-nav {
      scrollbar-gutter: auto;
    }
    .documentation-main {
      padding: var(--space-8) var(--space-6) 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    ::view-transition-group(root),
    ::view-transition-old(root),
    ::view-transition-new(root),
    ::view-transition-group(documentation-header),
    ::view-transition-old(documentation-header),
    ::view-transition-new(documentation-header),
    ::view-transition-group(documentation-rail),
    ::view-transition-old(documentation-rail),
    ::view-transition-new(documentation-rail) {
      animation: none;
    }
    .documentation-body.sidebar-owner {
      transition: none;
    }
  }

  .documentation-footer-slot {
    display: contents;
  }

  /* Without scripting, ordinary navigation remains reachable in document flow.
   This rule never participates in a JavaScript-enabled first paint. */
  @media (scripting: none) {
    .documentation-shell .documentation-body.sidebar-owner {
      display: block;
      overflow: visible;
    }
    .documentation-shell > .documentation-body > .documentation-sidebar-rail {
      position: static;
      inset: auto;
      width: 100%;
      height: auto;
      pointer-events: auto;
    }
    .documentation-shell .documentation-body > .documentation-sidebar-rail > .documentation-panel {
      position: static;
      inset: auto;
      width: 100%;
      height: auto;
      overflow: visible;
      visibility: visible;
      transform: none;
      pointer-events: auto;
      box-shadow: none;
      border: 0;
      padding: var(--space-4);
    }
    .documentation-shell .documentation-body > .documentation-sidebar-rail > .documentation-panel > .documentation-nav {
      flex: none;
      width: auto;
      min-height: auto;
      height: auto;
      max-height: none;
      overflow: visible;
      padding-block: var(--space-1);
    }
    .documentation-shell .documentation-sidebar-scrim,
    .documentation-shell [data-sidebar-pin],
    .documentation-shell [data-sidebar-close],
    .documentation-shell [data-action='documentation-menu'] {
      display: none;
    }
  }
}