/* Generated by npm run sync from styles/article-content.css and its @import lines, inlined in cascade order. Do not edit. */
/* styles/accordion.css */
@layer design {
  .accordion {
    min-width: 0;
    border-block: 1px solid var(--border-default);
  }
  .accordion + .accordion {
    border-top: 0;
  }
  .accordion > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 44px;
    padding: var(--space-3) var(--space-2);
    list-style: none;
    cursor: pointer;
    color: var(--text-primary);
    font: var(--text-dense);
    font-weight: 600;
    border-radius: 4px;
  }
  /* A question heading (headingLevel) reads as the summary's label: no heading margin or type of its own. */
  .accordion-heading {
    min-width: 0;
    margin: 0;
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
  }
  .accordion > summary::-webkit-details-marker {
    display: none;
  }
  .accordion > summary::marker {
    content: '';
  }
  .accordion > summary:hover {
    background: var(--surface-hover);
  }
  .accordion > summary:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
  }
  .accordion-indicator {
    position: relative;
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
  }
  .accordion-indicator::before,
  .accordion-indicator::after {
    content: '';
    position: absolute;
    inset: 7px 2px auto;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
  }
  .accordion-indicator::after {
    transform: rotate(90deg);
  }
  .accordion[open] > summary .accordion-indicator::after {
    display: none;
  }
  .accordion-content {
    padding: var(--space-2) var(--space-2) var(--space-4);
    min-width: 0;
  }
  .accordion-content > :first-child {
    margin-top: 0;
  }
  .accordion-content > :last-child {
    margin-bottom: 0;
  }
}

/* styles/rich-text-content.css */
/* The one prose system. Its canonical class is .rich-text (Markdown, rich text fields, chat); .article-copy is its
   article flow scope (block margins and secondary body text instead of a grid gap), and .explorer-section-content and
   .message-body host the same rules. No other sheet restyles prose inside them.
   Prose rules reach authored prose only: classless lists, paragraphs and headings, stopping at [data-prose-boundary]
   and embedded components (ui-icon-browser). Component markup always carries classes, so it keeps its own styles. */
/* Inline code gets a chip only when it sits in running prose; component UI code keeps its own treatment. */
@layer design {
  /* Article flow: body text in block rhythm; every value is a shared token. */
  .article-copy {
    min-width: 0;
    color: var(--text-secondary);
    font: var(--text-body);
  }
  .article-copy > :where(p) {
    margin: 0;
    overflow-wrap: break-word;
  }
  .article-copy > * + * {
    margin-top: var(--space-6);
  }
  .article-copy > p + p {
    margin-top: var(--space-4);
  }
  /* Markdown fragment destinations clear the documentation bar without reaching embedded component headings. */
  .article-copy > :is(h2, h3, h4)[id] {
    scroll-margin-block-start: calc(var(--documentation-rail-top, var(--control-lg)) + var(--space-6));
  }
  .article-copy
    :is(p, li, dd, dt, td, th, blockquote):not([class]):not(:is([data-prose-boundary], ui-icon-browser) *)
    > :is(strong, b) {
    font-weight: 600;
    color: var(--text-primary);
  }
  :is(.rich-text, .article-copy, .explorer-section-content, .message-body)
    :is(p, dd, dt, h1, h2, h3, h4, h5, h6, blockquote, figcaption, summary):not([class]):not(
      :is([data-prose-boundary], ui-icon-browser) *
    )
    > code,
  :is(.rich-text, .article-copy, .explorer-section-content, .message-body)
    :is(ul, ol):not([class]):not(:is([data-prose-boundary], ui-icon-browser) *)
    > li
    > code,
  :is(.rich-text, .article-copy, .explorer-section-content, .message-body)
    :is(p, dd, dt, h1, h2, h3, h4, h5, h6, blockquote, figcaption, summary):not([class]):not(
      :is([data-prose-boundary], ui-icon-browser) *
    )
    > :is(strong, em, b, i, mark)
    > code,
  :is(.rich-text, .article-copy, .explorer-section-content, .message-body)
    :is(ul, ol):not([class]):not(:is([data-prose-boundary], ui-icon-browser) *)
    > li
    > :is(strong, em, b, i, mark)
    > code {
    font-size: 0.9em;
    padding: 0.1em 0.35em;
    border-radius: calc(var(--radius) / 2);
    background: var(--code-inline-surface);
    color: var(--code-inline-text);
    overflow-wrap: anywhere;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
  :is(.rich-text, .article-copy, .explorer-section-content, .message-body)
    :is(ul, ol):not([class]):not(:is([data-prose-boundary], ui-icon-browser) *) {
    padding-inline-start: 1.75em;
    margin-block: var(--space-3);
    list-style-position: outside;
  }
  :is(.rich-text, .article-copy, .explorer-section-content, .message-body)
    :is(ul, ol):not([class]):not(:is([data-prose-boundary], ui-icon-browser) *)
    > li {
    padding-inline-start: 0.25em;
    overflow-wrap: anywhere;
  }
  :is(.rich-text, .article-copy, .explorer-section-content, .message-body)
    :is(ul, ol):not([class]):not(:is([data-prose-boundary], ui-icon-browser) *)
    > li
    + li {
    margin-block-start: var(--space-2);
  }
  :is(.rich-text, .article-copy, .explorer-section-content, .message-body)
    :is(ul, ol):not([class]):not(:is([data-prose-boundary], ui-icon-browser) *)
    > li
    > :is(ul, ol):not([class]):not(:is([data-prose-boundary], ui-icon-browser) *) {
    margin-block: var(--space-2);
  }
  :is(.rich-text, .article-copy, .explorer-section-content, .message-body)
    :is(ul, ol):not([class]):not(:is([data-prose-boundary], ui-icon-browser) *)
    > li
    > p:not([class]) {
    margin-block: var(--space-2);
  }
  :is(.rich-text, .article-copy, .explorer-section-content, .message-body) > ul {
    list-style-type: disc;
  }
  :is(.rich-text, .article-copy, .explorer-section-content, .message-body)
    :is(ul, ol):not([class]):not(:is([data-prose-boundary], ui-icon-browser) *)
    > li
    > ul:not([class]) {
    list-style-type: circle;
  }
  :is(.rich-text, .article-copy, .explorer-section-content, .message-body)
    :is(ul, ol):not([class]):not(:is([data-prose-boundary], ui-icon-browser) *)
    > li
    :is(ul, ol):not([class]):not(:is([data-prose-boundary], ui-icon-browser) *)
    > li
    > ul:not([class]) {
    list-style-type: square;
  }
  :is(.rich-text, .article-copy, .explorer-section-content, .message-body) > ol {
    list-style-type: decimal;
  }
  :is(.rich-text, .article-copy, .explorer-section-content, .message-body)
    :is(ul, ol):not([class]):not(:is([data-prose-boundary], ui-icon-browser) *)
    > li
    > ol:not([class]) {
    list-style-type: lower-alpha;
  }
  :is(.rich-text, .article-copy, .explorer-section-content, .message-body)
    :is(ul, ol):not([class]):not(:is([data-prose-boundary], ui-icon-browser) *)
    > li
    :is(ul, ol):not([class]):not(:is([data-prose-boundary], ui-icon-browser) *)
    > li
    > ol:not([class]) {
    list-style-type: lower-roman;
  }
  .rich-text .task-list-item {
    list-style: none;
    position: relative;
  }
  .rich-text .task-list-item > input[type='checkbox'] {
    position: absolute;
    inset-inline-start: -1.5em;
    top: 0.3em;
    width: 1em;
    height: 1em;
    margin: 0;
    accent-color: var(--text-primary);
  }
  .rich-text > img,
  .rich-text p:not([class]) > img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }
  /* Editorial media from renderArticleBody({media}): fits the measure, keeps its ratio and never overflows. */
  :is(.rich-text, .article-copy) :is(img, video, audio, iframe):not([class]) {
    display: block;
    max-width: 100%;
  }
  :is(.rich-text, .article-copy) :is(img, video):not([class]) {
    height: auto;
    object-fit: contain;
  }
  :is(.rich-text, .article-copy) audio:not([class]) {
    width: 100%;
  }
  :is(.rich-text, .article-copy) iframe:not([class]) {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
  }
  :is(.rich-text, .article-copy) > figure {
    display: grid;
    gap: var(--space-2);
    margin: 0;
  }
  :is(.rich-text, .article-copy) > figure > figcaption:not([class]) {
    color: var(--text-secondary);
    font: var(--text-dense);
  }
  /* Fenced code becomes a code block; only a bare <pre> from raw HTML falls back to the same surface. */
  .rich-text > pre {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow: auto;
    max-width: 100%;
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    background: var(--code-surface);
    color: var(--code-text);
    font-size: 14px;
    line-height: 22px;
  }
  .rich-text > blockquote {
    margin-inline: 0;
    padding-inline-start: var(--space-4);
    border-inline-start: 3px solid var(--border-strong);
  }
  /* Pull quote: a blockquote marked data-variant="pull" (renderArticleBody keeps that one attribute) sits apart from the
     text on a raised surface in the pull-quote role. It stays classless, so the prose rules for its strong and code
     still apply; the padding tightens with the viewport so a 320px screen keeps most of its width for the quote. */
  :is(.rich-text, .article-copy) > blockquote[data-variant='pull'] {
    margin-inline: 0;
    padding: clamp(var(--space-4), 4vw, var(--space-8));
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    background: var(--surface-raised);
    box-shadow: var(--shadow-raised);
    color: var(--text-primary);
    font: var(--text-pull-quote);
    overflow-wrap: break-word;
    text-wrap: pretty;
  }
  .rich-text-math-display {
    display: block;
    overflow-y: hidden;
    padding-block: 0.25em;
    position: relative;
    max-inline-size: 100%;
    overflow-x: auto;
  }
  .rich-text-table-scroll {
    max-width: 100%;
    overflow: auto;
    min-width: 0;
  }
  .rich-text-table-scroll table {
    width: 100%;
    border-collapse: collapse;
    font: inherit;
    text-align: start;
  }
  .rich-text-table-scroll :is(th, td) {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-default);
    text-align: start;
    vertical-align: top;
  }
  .rich-text-table-scroll th {
    font-weight: 600;
  }
  .rich-text-table-scroll [align='right'] {
    text-align: right;
  }
  .rich-text-table-scroll [align='center'] {
    text-align: center;
  }
  :is(.rich-text, .article-copy, .explorer-section-content) > :is(h1, h2, h3, h4, h5, h6) {
    color: var(--text-primary);
    overflow-wrap: anywhere;
    margin-block: var(--space-6) var(--space-3);
  }
  :is(.rich-text, .article-copy, .explorer-section-content) > h1 {
    font: var(--text-page);
  }
  :is(.rich-text, .article-copy, .explorer-section-content) > h2 {
    font: var(--text-title);
  }
  :is(.rich-text, .article-copy, .explorer-section-content) > h3 {
    font: var(--text-lede);
    font-weight: 600;
  }
  :is(.rich-text, .article-copy, .explorer-section-content) > h4 {
    font: var(--text-body);
    font-weight: 600;
  }
  :is(.rich-text, .article-copy, .explorer-section-content) > :is(h5, h6) {
    font: var(--text-dense);
    font-weight: 600;
  }
  :is(.rich-text, .article-copy, .explorer-section-content) > h6 {
    color: var(--text-secondary);
  }
  :is(.rich-text, .article-copy) > :first-child {
    margin-block-start: 0;
  }
  .rich-text > :last-child {
    margin-block-end: 0;
  }
  .rich-text
    :is(blockquote:not([class]), :is(ul, ol):not([class]):not(:is([data-prose-boundary], ui-icon-browser) *) > li)
    > blockquote {
    padding-inline-start: var(--space-4);
    border-inline-start: 3px solid var(--border-default);
    margin-inline: 0;
  }
  .rich-text details:not([class]) > summary {
    list-style: none;
  }
  .rich-text details:not([class]) > summary::-webkit-details-marker {
    display: none;
  }
  .rich-text details:not([class]) > summary::after {
    content: '+';
  }
  .rich-text details:not([class])[open] > summary::after {
    content: '−';
  }
  @container (max-width:480px) {
    .rich-text :is(ul, ol):not([class]):not(:is([data-prose-boundary], ui-icon-browser) *) {
      padding-inline-start: 1.4em;
    }
  }

  :is(.article-copy, .rich-text)[data-size='reading'] {
    max-inline-size: var(--measure);
    font: var(--text-reading);
  }
  :is(.article-copy, .rich-text)[data-size='reading'] > h2 {
    font: var(--text-reading-h2);
  }
  :is(.article-copy, .rich-text)[data-size='reading'] > h3 {
    font: var(--text-reading-h3);
  }
  :is(.article-copy, .rich-text)[data-size='reading'] > h4 {
    font: var(--text-reading-h4);
  }
}

/* styles/article-content.css */
/* Article bodies: the block rhythm, tables, inline examples, section directories and continuation links around
   authored prose, and the article contents and series navigation beside it. Prose itself (text, headings, lists,
   inline code, emphasis) is the shared prose system in rich-text-content.css, whose canonical class is .rich-text;
   .article-copy is its article flow scope, not a second system, so nothing here restyles prose. Rules are scoped to
   rendered article markup; page layout stays with its owner. Narrow treatments follow the article column, the
   `article` container, not the viewport: 660px and 712px are the column widths of a 700px and 760px published
   viewport, and an explorer in a narrow panel matches too. */
@layer design {
  .table-overflow {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    margin: var(--space-6) 0;
  }
  .article-copy > .table-overflow:first-child {
    margin-top: 0;
  }
  .article-copy > .table-overflow:last-child {
    margin-bottom: 0;
  }
  .article-copy > .table-overflow table {
    width: 100%;
    border-collapse: collapse;
    text-align: start;
    font: var(--text-body);
  }
  .article-copy > .table-overflow th {
    text-align: start;
    font: var(--text-dense);
    color: var(--text-secondary);
    font-weight: 500;
    padding: 0 var(--space-4) var(--space-3) 0;
    border-bottom: 1px solid var(--border-strong);
    vertical-align: top;
  }
  .article-copy > .table-overflow td {
    padding: var(--space-4) var(--space-4) var(--space-4) 0;
    border-bottom: 1px solid var(--border-default);
    vertical-align: top;
    overflow-wrap: break-word;
  }
  .article-copy > .table-overflow th[scope='row'] {
    padding-block: var(--space-4);
    font: var(--text-dense);
    color: var(--text-primary);
    border-color: var(--border-default);
    font-weight: 500;
  }
  .article-copy > .table-overflow td:first-child {
    font-weight: 500;
    color: var(--text-primary);
  }
  .article-copy > .table-overflow td:last-child,
  .article-copy > .table-overflow th:last-child {
    padding-right: 0;
  }
  .article-copy > .table-overflow tr:last-child td,
  .article-copy > .table-overflow tr:last-child th[scope='row'] {
    border-bottom: 0;
  }
  .article-copy > .reference-table-host {
    margin-block: var(--space-6);
  }
  .article-copy > .reference-table-host:first-child {
    margin-top: 0;
  }
  .article-copy > .reference-table-host:last-child {
    margin-bottom: 0;
  }
  .article-inline-example {
    margin-block: var(--space-6);
  }
  .article-inline-example:last-child {
    margin-bottom: 0;
  }
  .article-embed {
    display: block;
    min-width: 0;
  }
  /* Example decisions, section directories and continuation links frame the article body. */
  .example-decisions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
    padding: var(--space-4) 0 0;
    margin: 0;
    font: var(--text-dense);
  }
  .example-decisions > div {
    min-width: 0;
  }
  .example-decisions a {
    font-weight: 500;
    text-decoration: underline;
  }
  .example-decisions p {
    margin: var(--space-1) 0 0;
    color: var(--text-muted);
    overflow-wrap: break-word;
  }
  .next-reading {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: var(--space-8);
    padding-top: var(--space-8);
  }
  .next-reading > h2 {
    font: var(--text-title);
  }
  .related-list {
    display: grid;
    gap: 0;
  }
  .related-list a {
    display: grid;
    grid-template-columns: minmax(120px, 0.65fr) minmax(0, 1fr);
    gap: var(--space-6);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--border-default);
    text-decoration: none;
  }
  .related-list strong {
    font: var(--text-dense);
    font-weight: 500;
  }
  .related-list span {
    font: var(--text-dense);
    color: var(--text-muted);
  }
  .related-list a:hover strong {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  /* Article contents: in-page links under a heading, the current section marked by mountAnchorSpy. On a coarse pointer
     each link keeps a 44px target; a fine pointer keeps the list compact. */
  .article-contents {
    min-width: 0;
  }
  .article-contents-title {
    font: var(--text-title);
    color: var(--text-primary);
    margin: 0 0 var(--space-2);
  }
  .article-contents ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .article-contents a {
    display: flex;
    align-items: center;
    min-height: 32px;
    padding-block: var(--space-1);
    font: var(--text-body);
    text-decoration: underline;
    overflow-wrap: anywhere;
  }
  .article-contents a[aria-current='location'] {
    color: var(--text-primary);
    font-weight: 600;
  }
  @media (pointer: coarse) {
    .article-contents a {
      min-height: 44px;
    }
  }
  /* Series navigation: Previous and Next side by side, each at least 16rem, so they stack in a narrow column. Next keeps
     the end of the row when it is alone. */
  .article-pager {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    min-width: 0;
  }
  .article-pager-link {
    flex: 1 1 16rem;
    display: grid;
    gap: var(--space-1);
    align-content: start;
    min-width: 0;
    min-height: 44px;
    padding: var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    text-decoration: none;
  }
  .article-pager-link[data-direction='next'] {
    margin-inline-start: auto;
    text-align: end;
  }
  .article-pager-direction {
    font: var(--text-dense);
    color: var(--text-secondary);
  }
  .article-pager-title {
    font: var(--text-body);
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
  }
  .article-pager-link:hover {
    border-color: var(--border-strong);
  }
  .article-pager-link:hover .article-pager-title {
    color: var(--link-hover);
  }
  .section-directory {
    padding-block: var(--space-6);
  }
  .section-directory h2 {
    font: var(--text-title);
    margin: 0 0 var(--space-4);
  }
  .section-directory ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-6);
  }
  .section-directory li {
    min-width: 0;
    border-top: 1px solid var(--border-default);
  }
  .section-directory a {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4) 0;
    text-decoration: none;
    min-width: 0;
  }
  .section-directory strong {
    font: var(--text-body);
    font-weight: 600;
    color: var(--text-primary);
  }
  .section-directory span {
    font: var(--text-dense);
    color: var(--text-secondary);
    overflow-wrap: anywhere;
  }
  .section-directory a:hover strong,
  .section-directory a:focus-visible strong {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  @container article (max-width:712px) {
    .section-directory ul {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  @container article (max-width:660px) {
    .article-copy > .table-overflow table {
      min-width: 400px;
    }
    .next-reading {
      grid-template-columns: 1fr;
      gap: var(--space-4);
      padding-block: var(--space-6);
    }
    .example-decisions {
      grid-template-columns: 1fr;
      gap: var(--space-4);
    }
    .related-list a {
      grid-template-columns: 1fr;
      gap: var(--space-1);
    }
  }

  /* Basic inline tables keep their native table structure but never inherit the wide-table minimum. */
  .article-copy > .table-overflow > table[data-table-mode='basic'] {
    min-width: 0;
    max-width: 100%;
  }
  .article-copy > .table-overflow > table[data-table-mode='basic'] :is(th, td) {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
  }
  @container article (max-width:660px) {
    .article-copy > .table-overflow > table[data-table-mode='basic'] {
      width: 100%;
      min-width: 0;
      table-layout: fixed;
    }
    .article-copy > .table-overflow > table[data-table-mode='basic'] th[scope='row'] {
      width: 36%;
    }
  }
  /* A subsection heading owns the gap to the block it titles (tables, lists, examples), whatever that block's own rhythm. */
  .article-copy > :is(h3, h4, h5, h6) + :is(*, .table-overflow, .reference-table-host, .article-inline-example) {
    margin-top: 0;
  }

  .article-opening {
    display: grid;
    gap: 24px;
    margin-bottom: 32px;
  }
  .article-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
  .article-title-row h1 {
    margin: 0;
    font: var(--text-page);
    letter-spacing: -0.01em;
  }
  .article-opening .edit-action {
    flex-shrink: 0;
  }
  .article-intro {
    font: var(--text-lede);
    color: var(--text-secondary);
  }
  .article-intro p {
    margin: 0;
    overflow-wrap: break-word;
  }
  .article-intro p + p {
    margin-top: 16px;
  }
  .article-meta {
    display: flex;
    align-items: center;
    gap: 12px 24px;
    flex-wrap: wrap;
    font: var(--text-dense);
    color: var(--text-muted);
  }
  .article-meta button {
    padding: 0;
    min-height: 24px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .article-meta a {
    color: inherit;
  }
  .article-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 32px 0;
    margin: 0;
    border-bottom: 1px solid var(--border-default);
    scroll-margin-top: 72px;
  }
  /* Section headings own their anchors; body subsection anchors belong to the shared prose system. */
  .article-section > h2[id],
  .article-section > .article-section-heading > h2[id] {
    scroll-margin-block-start: calc(var(--documentation-rail-top, var(--control-lg)) + var(--space-6));
  }
  .article-section > h2 {
    font: var(--text-title);
    letter-spacing: -0.01em;
    margin: 0;
    overflow-wrap: break-word;
  }
  @container article (max-width: 700px) {
    .article-title-row {
      align-items: flex-start;
      flex-wrap: wrap;
      gap: var(--space-3);
    }
    .article-section {
      gap: var(--space-4);
      padding-block: calc(var(--space-6) + var(--space-1));
    }
  }
}