/* ShineUI docs chrome. Tokens come from ../styles.css. */
* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); min-height: 100vh; display: flex; flex-direction: column; }
/* Above --z-dropdown so a page select cannot cover the app bar, and below --z-overlay so the
   theme picker panel, dialogs, toasts and tooltips still sit above it. Derived from the scale
   rather than written as a literal, so it tracks a change to the rungs. */
/* .sui-on-inverse: the bar paints the navy chrome, so the logo's quiet pills stay bright there
   instead of dimming toward the ground. It is the only thing an inverse container has to say. */
/* Off-screen until focused, then a real control at the top left. Not display:none and not
   visibility:hidden: either would take it out of the tab order, which is the one thing it exists
   for. z-index clears the sticky header it sits above. */
.sui-skip { position: fixed; top: -60px; left: 12px; z-index: calc(var(--z-dropdown) + 100); display: inline-flex; align-items: center; height: var(--control-md); padding: 0 var(--button-pad-x); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); border: 1px solid var(--border-strong); font: 650 13px var(--font-sans); text-decoration: none; }
/* No transition: a control that exists to be reached in one keypress should be there on the
   keypress, not 120ms later. It also means no reduced-motion carve-out to keep in step. */
.sui-skip:focus { top: 12px; box-shadow: var(--shadow-overlay); outline: 2px solid var(--focus-ring); outline-offset: 2px; text-decoration: none; color: var(--ink); }
/* A jump target should not draw a focus ring around the whole page when it receives focus. */
main:focus { outline: none; }
#top { height: 58px; }
.sui-top { position: sticky; top: 0; z-index: calc(var(--z-dropdown) + 50); display: flex; align-items: center; gap: 26px; height: 58px; padding: 0 26px; background: var(--surface-navy); color: var(--ink-inverse); }
/* color: inherit so the mark inside takes the bar's ink. The mark's strong pills are currentColor,
   and without this an anchor hands them the link color instead. */
.sui-wordmark, .sui-wordmark:hover { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: inherit; }
/* The mark's drawing is 76 by 68, so the box follows that rather than a square, which is what the
   old chip was. */
.sui-mark { width: 34px; height: 30px; display: block; flex-shrink: 0; }
.sui-wordmark b { font-size: 17px; font-weight: 730; color: var(--ink-inverse); letter-spacing: -0.01em; }
/* Top bar is inverse chrome: fit the accent to it, or a single-color theme hides the wordmark. */
.sui-wordmark b span { color: var(--accent-inverse); }
.sui-top nav { display: flex; gap: 4px; flex: 1; min-width: 0; }
.sui-top nav a { color: var(--ink-inverse-muted); font-size: 13px; font-weight: 600; text-decoration: none; padding: 7px 12px; border-radius: 8px; white-space: nowrap; }
/* Hover lifts the label on a faint wash; current is the fuller pill with a bold white label. No
   accent stripe on either: the wash and the weight are the whole signal. */
.sui-top nav a:hover { color: var(--ink-inverse); background: color-mix(in srgb, var(--ink-inverse) 5%, transparent); text-decoration: none; }
.sui-top nav a.on { color: var(--ink-inverse); background: color-mix(in srgb, var(--ink-inverse) 12%, transparent); font-weight: 700; }
.sui-top-end { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sui-top .sui-top-menu { display: none; }
/* A real link (navigation), sized to the same control height as the theme picker beside it. */
.sui-top .sui-cta { display: inline-flex; align-items: center; height: var(--control-md); box-sizing: border-box; background: var(--accent-inverse); color: var(--accent-inverse-contrast); font-size: 13px; font-weight: 700; padding: 0 var(--button-pad-x); border-radius: var(--radius-md); text-decoration: none; }
.sui-top .sui-cta:hover { background: color-mix(in srgb, var(--accent-inverse) 86%, var(--ink)); color: var(--accent-inverse-contrast); text-decoration: none; }
.sui-topsearch { display: inline-flex; align-items: center; gap: 8px; height: var(--control-md); padding: 0 8px 0 11px; border-radius: var(--radius-md); border: 1px solid color-mix(in srgb, var(--ink-inverse) 18%, transparent); background: color-mix(in srgb, var(--ink-inverse) 8%, transparent); color: var(--ink-inverse-muted); font: 550 12.5px var(--font-sans); cursor: pointer; white-space: nowrap; }
.sui-topsearch:hover { background: color-mix(in srgb, var(--ink-inverse) 14%, transparent); color: var(--ink-inverse); }
.sui-topsearch:focus-visible { outline: 2px solid var(--accent-inverse); outline-offset: 2px; }
.sui-topsearch i { font-size: 11px; }
.sui-topsearch kbd { font: 550 10.5px var(--font-mono); padding: 1px 5px; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--ink-inverse) 22%, transparent); color: var(--ink-inverse-muted); }
.sui-topsearch:hover kbd { color: var(--ink-inverse); }
@media (max-width: 900px) { .sui-top { gap: var(--space-4); padding: 0 var(--space-4); } .sui-top nav a { padding: 7px var(--space-2); } .sui-top .sui-cta { display: none; } .sui-topsearch { width: var(--control-md); padding: 0; justify-content: center; } .sui-topsearch .lbl, .sui-topsearch kbd { display: none; } }
@media (max-width: 680px) { .sui-top nav { display: none; } .sui-top-end { margin-left: auto; } .sui-top .sui-top-menu { display: inline-flex; } }
.sui-shellgrid { display: grid; grid-template-columns: 252px minmax(0, 1fr); max-width: 1412px; margin: 0 auto; gap: 0; align-items: start; }
/* No padding at the top: that band is inside the scrollport, so list items scroll through it, and
   a sticky header can only cover what is inside its own box. The 18px lives on .sui-sidetop below
   instead, which puts the filter in exactly the same place at rest and lets it cover the full width
   to the top edge once the list moves under it. */
.sui-side { position: sticky; top: 58px; height: calc(100vh - 58px); overflow-y: auto; padding: 0 10px 40px 18px; border-right: 1px solid var(--border); background: var(--canvas); }
.sui-side::-webkit-scrollbar { width: 8px; }
.sui-side::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
/* The filter stays put while the list moves under it. A hundred and twenty-seven components is
   more than one screen by a wide margin, so the control that narrows them was the first thing to
   scroll away and the reader had to go back up to use it.

   The wrapper is what sticks, not the box: it paints the sidebar's own ground across the full
   content width so items pass behind it rather than through it, and its negative top margin
   cancels the sidebar's 18px padding so the box lands flush at the top edge instead of leaving a
   band of scrolling list above it. */
.sui-sidetop { position: sticky; top: 0; z-index: 2; background: var(--canvas); margin: 0 0 4px; padding: 18px 0 10px; }
.sui-search { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; background: var(--surface); border: 1px solid var(--control-border); border-radius: 8px; margin: 0 8px 0 0; }
.sui-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font: 550 12.5px var(--font-sans); color: var(--ink); }
.sui-search:focus-within { border-color: var(--brand); box-shadow: var(--focus-shadow); }
/* NOTHING ON THIS SITE READS --ink-faint ANY MORE, and that is deliberate rather than a sweep of
   the file. Every use of it here was small text a reader actually reads: the sidebar's group
   labels, the tag beside an example heading, the previous and next eyebrows, a tile's group label,
   the annotation in a keyboard table, the empty-state line, the token group count and the token
   role. On these grounds it read about 2.57:1 at 10 to 12.5px, and axe counted 4,234 serious
   nodes across the 137 pages for those nine rules together, which was four fifths of every
   contrast node the sweep found anywhere on the site.

   The faint tier is a real tier and it is right for text that is genuinely set aside. It was not
   right for any of these, and the smaller and lighter the type the less it could carry. They take
   --ink-muted, which the sidebar's own links already used, and read about 6.9:1. Sharing an ink
   with the links costs nothing: the labels are uppercase, letter-spaced, heavier and smaller, so
   the hierarchy here was never carried by the color. Both site modes were rendered and read
   before this went in.

   The heading anchor is in the set for a different reason. It is a control rather than text, and a
   control wants 3:1 for its own glyph; it was under that, on a button that is already invisible
   until its heading is hovered.

   This is docs CSS. The palette is exactly where the design owner left it. */
.sui-side h5 { font: 650 10.5px var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); margin: 16px 8px 5px 10px; }
.sui-side a.item { display: flex; align-items: center; gap: 7px; padding: 5.5px 10px; margin-right: 8px; border-radius: 7px; border-left: 3px solid transparent; font: 550 12.5px var(--font-sans); color: var(--ink-muted); text-decoration: none; }
/* The rail is already the sunken tone, so hover is a lighter wash of the brand soft and current the
   full soft with a bold label. No accent bar: the fill and the weight are the whole signal. */
.sui-side a.item:hover { background: color-mix(in srgb, var(--brand-soft) 55%, var(--surface)); color: var(--brand-soft-ink); text-decoration: none; }
.sui-side a.item.on { background: var(--brand-soft); color: var(--brand-soft-ink); font-weight: 680; }
/* The three surfaces below fill with --accent-soft and write on it in --accent-soft-ink, which is
   the token for exactly that ground. They wrote --accent-ink until 2026-09-09 and that reads 4.32:1
   on the shipped light theme, which the sweep counted 628 times on this pill alone because it
   repeats on every page. They then spent a day in --ink, which cleared the ground and lost the
   accent. --accent-soft-ink is the answer to both: it is the accent ink everywhere the accent ink
   already clears, and on the shipped light theme it is the engine's own deeper orange at 5.33:1
   against the canonical fill. */
.sui-side a.item .x { margin-left: auto; font-size: 8.5px; font-weight: 720; letter-spacing: 0.06em; color: var(--accent-soft-ink); background: var(--accent-soft); border-radius: 999px; padding: 1.5px 6px; }
/* One content geometry for every page: 1160px wide, 28px side padding, 36px above the title. Sidebar pages add the 252px rail to that width. */
.sui-wrap { max-width: 1160px; margin: 0 auto; padding: 36px 28px 70px; }
/* The body is a flex column (sticky footer); direct children must keep filling the row, or an auto-margin block shrinks to its content. */
body > main, body > section, body > header, body > footer, body > .sui-shellgrid { width: 100%; box-sizing: border-box; }
.sui-main { padding: 36px 28px 70px; min-width: 0; }
.sui-crumbs { font: 550 12px var(--font-sans); color: var(--ink); margin-bottom: 12px; }
/* Underlined, because the crumb links are the same ink as the separators and the current page
   beside them: without it there is nothing but position to say which words are links. */
.sui-crumbs a { color: var(--ink-muted); text-decoration: underline; text-underline-offset: 2px; }
.sui-crumbs a:hover { color: var(--link); }
.sui-h1 { font: 730 30px/1.1 var(--font-sans); letter-spacing: -0.018em; color: var(--ink); margin: 0 0 8px; }
.sui-tagline { font: 460 15px/1.5 var(--font-sans); color: var(--ink-muted); margin: 0 0 6px; max-width: 640px; }
.sui-badges { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 6px; }
.sui-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font: 650 11px var(--font-sans); background: var(--brand-soft); color: var(--brand-soft-ink); }
.sui-pill.warn { background: var(--accent-soft); color: var(--accent-soft-ink); }
.sui-h2 { font: 700 17px var(--font-sans); letter-spacing: -0.01em; color: var(--ink); margin: 34px 0 6px; display: flex; align-items: baseline; gap: 10px; }
.sui-h2 small { font: 550 12px var(--font-sans); color: var(--ink-muted); }
.sui-note { font: 460 13px/1.55 var(--font-sans); color: var(--ink-muted); margin: 0 0 12px; max-width: 680px; }
/* A link inside a paragraph is underlined. The shipped sheet drops the underline from every
   anchor, and --link against --ink-muted is 1.6:1, so inside prose the color alone is not
   enough to tell a link from the words around it (WCAG 1.4.1). */
.sui-note a, .sui-lede a, .sui-prose a, .sui-api .desc a, main p a, main li a { text-decoration: underline; text-underline-offset: 2px; }
/* Component overview prose. Body copy, not a footnote: the old API note rendered the class JSDoc
   as one muted 13px block with a hard break at every source line wrap. */
.sui-lede { font: 460 14px/1.65 var(--font-sans); color: var(--ink); margin: 0 0 10px; max-width: 680px; }
/* One inline-code treatment for every prose surface: a soft-brand chip in medium mono that never
   wraps mid-token. Prose outside .sui-lede fell back to the browser's Courier. */
.sui-lede code, .sui-note code, .sui-tagline code, .sui-prose code, main p code, main li code {
  font: 560 12.5px var(--font-mono); background: var(--brand-soft); color: var(--brand-soft-ink); border-radius: 5px; padding: 1px 5px; white-space: nowrap;
}
@media (max-width: 680px) { .sui-lede code, .sui-note code, .sui-tagline code, .sui-prose code, main p code, main li code { white-space: normal; overflow-wrap: anywhere; } }
/* One example card: canvas, then the toolbar, then the code panel when opened. The card owns the border and corners, so nothing looks bolted on. */
.sui-example { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.sui-demo { background: var(--surface); padding: 22px; overflow-x: auto; }
.sui-demo.canvas { background: var(--canvas); }
.sui-demobar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 7px 10px; background: var(--surface-sunken); border-top: 1px solid var(--hairline); }
.sui-demobar .sui-fwtabs { display: none; margin-block: 0; margin-inline: 0 auto; }
.sui-demobar.open .sui-fwtabs { display: inline-flex; }
.site-tbtn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--control-border); background: var(--surface); color: var(--ink-muted); font: 620 11.5px var(--font-sans); padding: 5px 11px; border-radius: 6px; cursor: pointer; }
.site-tbtn:hover { color: var(--brand-soft-ink); background: var(--brand-soft); }
.site-tbtn i { font-size: 11px; }
/* The syntax ramp used to be re-declared here, a copy of the one sui-code-block.css carried. Both
   copies now live in global/shineui.css instead, on the elements that declare a theme, because the
   ramp gained a light set that data-sui-code switches between. A local copy here would have pinned
   the docs' own panes to the dark set and quietly excluded them from the switch, which is the one
   thing the option exists to do. shell.js still rewrites the Shiki literals into these same vars, so
   a pane follows the live theme exactly as before. */
.sui-pre { position: relative; margin: 0 0 12px; background: var(--sui-code-bg); color: var(--sui-code-fg); border-radius: 10px; font: 460 12px/1.65 var(--font-mono); font-variant-ligatures: none; overflow: hidden; white-space: pre; tab-size: 2; }
/* Code-pane tools: 26px icon squares in the same inverse chrome the three text chips used, sized
   and rounded off sui-icon-button's own recipe (--control-sm less the 2px the corner can spare,
   --radius-pill, --icon-size-sm). Focus is the accent ring, which is the only color with contrast
   against the navy pane. */
.sui-pre .sui-ibtn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 26px; height: 26px; padding: 0; line-height: 1; font-size: var(--icon-size-sm); border: 1px solid color-mix(in srgb, var(--sui-code-dark-ink) 18%, transparent); background: color-mix(in srgb, var(--sui-code-dark-head) 88%, var(--sui-code-dark-ink)); color: color-mix(in srgb, var(--sui-code-dark-ink) 75%, transparent); border-radius: var(--radius-pill); cursor: pointer; }
.sui-pre .sui-ibtn:hover { background: color-mix(in srgb, var(--sui-code-dark-head) 76%, var(--sui-code-dark-ink)); color: var(--sui-code-dark-ink); }
.sui-pre .sui-ibtn:focus-visible { outline: 2px solid var(--sui-code-dark-accent); outline-offset: 1px; }
.sui-code-wrap { display: none; margin-top: 0; }
.sui-code-wrap.open { display: block; }
.sui-code-wrap .sui-pre { margin: 0; border-radius: 0; border: none; }
.sui-code-wrap .sui-pre + .sui-pre { border-top: 1px solid color-mix(in srgb, var(--sui-code-dark-ink) 12%, transparent); }
.sui-md { font: 460 13.5px/1.6 var(--font-sans); color: var(--ink); max-width: 720px; }
.sui-md code { background: var(--brand-soft); border-radius: 4px; padding: 1px 5px; font: 460 12px var(--font-mono); }
.sui-md pre code { background: transparent; padding: 0; }
.sui-md h1, .sui-md h2, .sui-md h3 { font-size: 14px; font-weight: 700; margin: 14px 0 4px; }
.sui-md ul { margin: 6px 0; padding-left: 20px; }
.sui-related { display: flex; gap: 8px; flex-wrap: wrap; }
.sui-related a { display: inline-flex; padding: 6px 13px; border: 1px solid var(--border-strong); border-radius: 999px; font: 620 12.5px var(--font-sans); color: var(--ink); text-decoration: none; background: var(--surface); }
.sui-related a:hover { border-color: var(--brand); text-decoration: none; }
.sui-pn { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 44px; border-top: 1px solid var(--border); padding-top: 16px; }
.sui-pn a { display: flex; flex-direction: column; gap: 2px; text-decoration: none; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); min-width: 150px; }
.sui-pn a:last-child { margin-inline-start: auto; }
.sui-pn a:hover { border-color: var(--border-strong); text-decoration: none; }
.sui-pn a small { font: 620 10.5px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.sui-pn a b { font: 680 13.5px var(--font-sans); color: var(--ink); }
/* The body is a flex column, so the footer sits below the content and never floats above the viewport bottom on a short page. */
.sui-footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: auto; }
.sui-footer .in { max-width: 1160px; margin: 0 auto; padding: 26px 28px; display: flex; gap: 24px; align-items: baseline; flex-wrap: wrap; font: 460 12.5px var(--font-sans); color: var(--ink-muted); }
.sui-footer a { color: var(--ink-muted); }
/* Version and license: project facts a reader looks for before adopting anything, so they belong
   on every page rather than in a readme. --ink-muted, not --ink-faint, for the reason the long
   comment further down this file gives: 11.5px type that a reader actually reads is exactly the
   case the faint tier is wrong for. It went in as --ink-faint and an axe run over the finished
   site read it at 2.79:1, which is the same defect that comment was written to close. */
.sui-footer .meta { color: var(--ink-muted); font: 550 11.5px var(--font-mono); }
.sui-tilegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
/* A group heading inside the tile grid. It takes the whole row, or it would sit in one cell and
   read as a tile with no link. The count tells a reader how much is under it before they scroll. */
.sui-catgroup { grid-column: 1 / -1; display: flex; align-items: center; gap: 9px; margin: 18px 0 0; font: 700 15px var(--font-sans); color: var(--ink); letter-spacing: -0.01em; }
.sui-catgroup:first-child { margin-top: 0; }
.sui-catgroup i { font-size: 12px; color: var(--brand-soft-ink); background: var(--brand-soft); width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; }
/* --ink-muted for the same reason as the footer meta above: a count a reader reads at 11.5px is
   not the "set aside" case the faint tier exists for. */
.sui-catgroup span { font: 550 11.5px var(--font-mono); color: var(--ink-muted); }
/* Related components at the foot of a component page. Prev and next are alphabetical neighbours;
   these are the ones a reader actually wants next. */
.sui-seealso { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 10px; }
.sui-seealso a { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; text-decoration: none; }
.sui-seealso a:hover { border-color: var(--border-strong); text-decoration: none; }
.sui-seealso b { display: block; font: 650 13.5px var(--font-sans); color: var(--ink); }
.sui-seealso span { display: block; font: 460 12px/1.45 var(--font-sans); color: var(--ink-muted); margin-top: 2px; }
.sui-tile { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; text-decoration: none; transition: box-shadow var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); }
.sui-tile:hover { border-color: var(--border-strong); background: var(--surface-sunken); box-shadow: var(--shadow-raised); text-decoration: none; }
.sui-tile:hover b { color: var(--link); }
.sui-tile .g { font: 650 10px var(--font-sans); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-muted); display: flex; align-items: center; gap: 6px; }
.sui-tile .g i { color: var(--brand-soft-ink); }
.sui-tile b { display: block; font: 700 15px var(--font-sans); color: var(--ink); margin: 7px 0 4px; }
.sui-tile p { font: 460 12px/1.5 var(--font-sans); color: var(--ink-muted); margin: 0; }
.site-chip { border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-muted); font: 620 12px var(--font-sans); padding: 6px 13px; border-radius: 999px; cursor: pointer; }
.site-chip.on { background: var(--brand); border-color: var(--brand); color: var(--brand-contrast); }
@media (max-width: 900px) { .sui-shellgrid { grid-template-columns: 1fr; } .sui-side { display: none; } }

/* Shiki output inside .sui-pre keeps our chrome; theme bg stays transparent. */
.sui-pre pre { margin: 0; padding: 0; background: transparent !important; font: inherit; white-space: pre; }
.sui-pre code { font: inherit; }
/* Dark-pane selection: translucent orange, white text stays readable. */
.sui-pre ::selection, .sui-pre::selection { background: color-mix(in srgb, var(--sui-code-dark-accent) 32%, transparent); color: var(--sui-code-dark-ink); }

/* Code-pane tools sit outside the scroll region, so they never move. */
.sui-pre .sui-tools { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; z-index: 2; }
.sui-pre[data-clash] .sui-scroll { padding-top: 42px; }
/* Code blocks open at one default height (override --sui-code-h on any ancestor); Expand shows the rest. Framework panes share a fixed height so switching tabs never moves the page. */
.sui-pre .sui-scroll { overflow: auto; padding: 14px 16px; max-height: var(--sui-code-h, 420px); box-sizing: border-box; }
.sui-fwpane { display: none; flex-direction: column; min-height: var(--sui-fw-h, auto); }
html:not([data-sui-fw]) .sui-fwpane[data-fw="wc"], html[data-sui-fw="wc"] .sui-fwpane[data-fw="wc"], html[data-sui-fw="react"] .sui-fwpane[data-fw="react"], html[data-sui-fw="vue"] .sui-fwpane[data-fw="vue"], html[data-sui-fw="angular"] .sui-fwpane[data-fw="angular"] { display: flex; }
.sui-fwpane > .sui-pre:only-child, .sui-code-wrap .sui-fwpane > .sui-pre:last-child { flex: 1; display: flex; flex-direction: column; margin: 0; }
.sui-fwpane > .sui-pre:only-child > .sui-scroll, .sui-code-wrap .sui-fwpane > .sui-pre:last-child > .sui-scroll { flex: 1; }
.sui-pre.expanded .sui-scroll { max-height: none; height: auto; }
.sui-pre .sui-expand-tip, .sui-pre sui-tooltip:has(> .sui-wrapbtn) { display: none; }
.sui-pre[data-overflow-x] sui-tooltip:has(> .sui-wrapbtn) { display: inline-flex; }
.sui-pre[data-overflow] .sui-expand-tip, .sui-pre.expanded .sui-expand-tip { display: inline-flex; }
/* The code pane is inverse chrome: a hardcoded panel ignored the theme entirely, and the plain
   accent is fitted to a white card. */
.sui-pre .sui-wrapbtn.on { background: color-mix(in srgb, var(--sui-code-dark-head) 82%, var(--sui-code-dark-ink)); color: var(--sui-code-dark-accent); }
/* Quarter turn clockwise, which is the whole icon. Upright, fa-arrow-turn-down is a stem that
   runs right and then points DOWN: it says "go down a level", which is what its other name,
   level-down-alt, is for. Turned, it is the return arrow: a line coming in, a turn, and the head
   pointing back LEFT, which is what a wrapped line does and what GitHub, CodePen and VS Code all
   draw for soft wrap. The rotation is CSS rather than Font Awesome's fa-rotate-90 utility, because
   this element must not depend on a utility class from a stylesheet a consumer may not load. */
.sui-pre .sui-wrapbtn i { transform: rotate(90deg); }
.sui-pre .sui-scroll.wrap, .sui-pre .sui-scroll.wrap pre { white-space: pre-wrap; word-break: break-word; }

/* Docs-chrome tooltip: same capsule as the React Tooltip component (navy default,
   light tone for navy panes). Plain CSS because the docs shell is not React. */
/* Additions over the v1 site.css: framework tabs, status pills. */
.sui-fwtabs { display: inline-flex; flex-wrap: wrap; max-width: 100%; gap: 3px; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: 999px; padding: 3px; margin: 4px 0 12px; }
.sui-fwtabs button { border: none; background: none; cursor: pointer; padding: 6px 15px; border-radius: 999px; font: 620 12.5px var(--font-sans); color: var(--ink-muted); }
html:not([data-sui-fw]) .sui-fwtabs button[data-fw="wc"], html[data-sui-fw="wc"] .sui-fwtabs button[data-fw="wc"], html[data-sui-fw="react"] .sui-fwtabs button[data-fw="react"], html[data-sui-fw="vue"] .sui-fwtabs button[data-fw="vue"], html[data-sui-fw="angular"] .sui-fwtabs button[data-fw="angular"] { background: var(--brand); color: var(--brand-contrast); }
.sui-fwtabs button:focus-visible { outline: 2px solid var(--accent); box-shadow: var(--focus-shadow); }
.sui-side .item .x.core { background: var(--brand); color: var(--brand-contrast); }
.sui-pill.core { background: var(--brand); color: var(--brand-contrast); border-color: var(--brand); }
.sui-pill.spec { background: var(--surface); color: var(--ink-muted); }
/* A ring and an accent glyph put the identity chips on a different plane from inline code, which
   shares their fill. */
.sui-tagchip { display: inline-flex; align-items: center; gap: 7px; font: 620 12px var(--font-mono); color: var(--brand-soft-ink); background: var(--brand-soft); border: 1px solid var(--border-strong); border-radius: 7px; padding: 4px 10px; white-space: nowrap; }
.sui-tagchip i { color: var(--accent-mark); }
.sui-statusnote { display: flex; gap: 10px; align-items: flex-start; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: 10px; padding: 11px 14px; font: 460 12.5px/1.55 var(--font-sans); color: var(--ink-muted); margin: 14px 0 4px; }
.sui-statusnote i { color: var(--brand-soft-ink); font-size: 13px; margin-top: 2px; }

/* Section anchors. The top bar is sticky and 58px tall, so a heading landed under it on every jump,
   whether the browser made it or scrollIntoView did; scroll-margin-top is the one place to say so. */
.sui-h2, .sui-h3 { scroll-margin-top: 74px; }
/* Quiet until wanted: revealed on hover of the heading, and on focus, which is what makes it usable
   without a mouse. Opacity, never display or visibility, because a hidden control is not focusable
   and the reader tabbing the page would never reach it. */
.sui-anchor-tip { opacity: 0; transition: opacity var(--duration-fast) var(--ease-out); }
.sui-h2:hover .sui-anchor-tip, .sui-h3:hover .sui-anchor-tip, .sui-anchor-tip:focus-within { opacity: 1; }
.sui-h3 .sui-anchor-tip { margin-left: 6px; }
a.sui-anchor { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-pill); color: var(--ink-muted); font-size: 11px; text-decoration: none; }
a.sui-anchor:hover { color: var(--brand-soft-ink); background: var(--brand-soft); text-decoration: none; }
a.sui-anchor:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
/* The two outcomes are told apart by color as well as by glyph, and neither is the only channel:
   the tooltip and the live region both carry the words. */
a.sui-anchor.ok { color: var(--positive-ink); opacity: 1; }
a.sui-anchor.bad { color: var(--danger); opacity: 1; }
.sui-h2:has(.sui-anchor.ok) .sui-anchor-tip, .sui-h3:has(.sui-anchor.ok) .sui-anchor-tip,
.sui-h2:has(.sui-anchor.bad) .sui-anchor-tip, .sui-h3:has(.sui-anchor.bad) .sui-anchor-tip { opacity: 1; }
/* Announcements for screen readers only: taken out of the flow without being taken out of the
   accessibility tree, which display:none would do. */
.sui-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* v2 additions: live-demo frame, API tables, callouts. */
.sui-demo { position: relative; }
.sui-demo .sui-demo-note { font: 460 12.5px var(--font-sans); color: var(--ink-muted); margin: 0 0 12px; }
.sui-api { width: 100%; border-collapse: collapse; background: var(--surface); font: 460 12.5px/1.5 var(--font-sans); }
.sui-api-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--border); margin-bottom: 14px; }
.sui-api th { text-align: left; background: var(--surface-sunken); border-bottom: 1px solid var(--border); padding: 9px 12px; font: 650 10.5px var(--font-sans); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; }
.sui-api td { padding: 9px 12px; border-top: 1px solid var(--hairline); vertical-align: top; color: var(--ink); }
.sui-api tr:first-child td { border-top: none; }
.sui-api code, .sui-h2 code, .sui-h3 code { background: var(--brand-soft); border-radius: 4px; padding: 1px 5px; font: 460 11.5px var(--font-mono); color: var(--brand-soft-ink); }
.sui-api .type code { white-space: normal; word-break: break-word; }
.sui-api .name { font-weight: 650; white-space: nowrap; }
.sui-api .req { color: var(--danger); font-weight: 700; margin-left: 3px; }
.sui-api .desc { color: var(--ink-muted); max-width: 520px; }
.sui-api .desc p { margin: 0; }
.sui-api .desc p.sui-api-deprecated { margin-top: 4px; color: var(--accent-soft-ink); }
.sui-api .sui-deprecated { margin-left: 6px; font-size: 9.5px; padding: 1px 7px; vertical-align: middle; }
.sui-api .sui-api-only { color: var(--ink-muted); }
.sui-api .sui-api-resolved { display: block; margin-top: 3px; font: 460 11px/1.4 var(--font-mono); color: var(--ink-muted); word-break: break-word; }
.sui-api th .sui-api-kind { margin-left: 8px; font: 650 10px var(--font-sans); letter-spacing: 0.06em; color: var(--ink-muted); }
.sui-api th .sui-api-typedoc { display: block; margin-top: 4px; font: 460 12px/1.5 var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--ink-muted); white-space: normal; }
.sui-h3.sui-api-tag { font-size: 15px; margin-top: 26px; }
.sui-h3.sui-api-tag code { background: var(--brand-soft); border-radius: 6px; padding: 2px 8px; font: 620 13px var(--font-mono); color: var(--brand-soft-ink); }
html.sui-js .sui-demo[data-pending] { visibility: hidden; }
.sui-keys kbd { display: inline-block; padding: 1px 6px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 5px; background: var(--surface); font: 550 11.5px var(--font-mono); color: var(--ink); }
.sui-keys .name small { font: 460 11px var(--font-mono); color: var(--ink-muted); margin-left: 6px; }
.sui-callout { display: flex; gap: 10px; align-items: flex-start; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 10px; padding: 11px 14px; font: 460 12.5px/1.55 var(--font-sans); color: var(--accent-soft-ink); margin: 14px 0 4px; }
.sui-callout i { margin-top: 2px; }
/* A link inside the callout is told apart from the text around it by hue alone, and the two are
   about 2:1 apart, under the 3:1 a color-only distinction needs, so axe reads it as
   link-in-text-block. Underlining is the remedy the rule names and the one that does not need a
   color: it works for a reader who cannot separate the two hues at all. */
.sui-callout a { text-decoration: underline; text-underline-offset: 2px; }
.sui-h3 { font: 700 13.5px var(--font-sans); color: var(--ink); margin: 20px 0 6px; }
.sui-linkrow { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin: 10px 0 0; font: 550 12.5px var(--font-sans); }
.sui-linkrow a { color: var(--link); }
.sui-empty { padding: 18px; border: 1px dashed var(--border-strong); border-radius: 10px; font: 460 12.5px var(--font-sans); color: var(--ink-muted); }
sui-toast-host:not(:defined) { display: none; }

.sui-demo-block { margin-bottom: 8px; }
.sui-demobar a.site-tbtn { text-decoration: none; }

/* Theming section on a component page: the design tokens that element renders with, from
   docs/theming.json. Same row shape as the Foundations token browser so the two read as one idea.
   Multi-column rather than grid: the Color card is often ten times the height of the Motion card,
   and column balancing packs them without leaving a hole beside the tall one. break-inside keeps a
   card whole. */
.sui-them-host { min-height: 120px; }
.sui-them { columns: 2; column-gap: 14px; }
.sui-tokgroup { break-inside: avoid; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin: 0 0 14px; }
/* h2 rather than h4: the section titles above it are styled divs, so an h4 here skipped two
   levels of the page outline. The tag changed; the type did not. */
.sui-tokgroup h2 { display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding: 10px 14px; background: var(--surface-sunken); border-bottom: 1px solid var(--hairline); font: 700 12.5px var(--font-sans); color: var(--ink); }
.sui-tokgroup h2 span { font: 620 10.5px var(--font-sans); color: var(--ink-muted); }
.sui-tokrow { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 8px 12px; border-top: 1px solid var(--hairline); text-decoration: none; color: var(--ink); }
.sui-tokrow:first-of-type, sui-tooltip:first-child > .sui-tokrow { border-top: none; }
sui-tooltip:has(> .sui-tokrow) { display: block; }
.sui-tokrow:hover { background: var(--surface-hover); text-decoration: none; }
.sui-tokrow:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.sui-tokpv { width: 22px; height: 22px; border-radius: 5px; border: 1px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; overflow: hidden; }
.sui-tokpv.flat { border: none; font-size: 13px; font-weight: 700; color: var(--ink); }
.sui-tokpv.num { background: var(--surface-sunken); font: 650 9px var(--font-sans); color: var(--ink-muted); }
.sui-tokpv.bar { border: none; }
.sui-tokpv.bar i { display: block; height: 5px; border-radius: 3px; background: var(--accent); }
.sui-tokmain { min-width: 0; }
.sui-toknm { display: block; font: 620 12px var(--font-mono); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sui-tokrole { display: block; font: 460 11px var(--font-sans); color: var(--ink-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sui-tokval { font: 460 11px var(--font-mono); color: var(--ink-muted); max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
@media (max-width: 760px) { .sui-them { columns: 1; } }

@media (forced-colors: active) {
  .sui-search:focus-within { outline: 2px solid Highlight; outline-offset: 1px; }
  .sui-top { border-bottom: 1px solid CanvasText; }
  .sui-top nav a.on { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .sui-top .sui-cta { border: 1px solid LinkText; }
  .sui-topsearch { border: 1px solid ButtonText; }
  .sui-side a.item { border-left-color: Canvas; }
  .sui-side a.item.on { forced-color-adjust: none; background: Highlight; color: HighlightText; border-left-color: Highlight; }
  .sui-side a.item .x { background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
  .sui-pill { border: 1px solid CanvasText; }
  .sui-pre { border: 1px solid CanvasText; }
  .sui-pre .sui-wrapbtn.on { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  html:not([data-sui-fw]) .sui-fwtabs button[data-fw="wc"], html[data-sui-fw="wc"] .sui-fwtabs button[data-fw="wc"], html[data-sui-fw="react"] .sui-fwtabs button[data-fw="react"], html[data-sui-fw="vue"] .sui-fwtabs button[data-fw="vue"], html[data-sui-fw="angular"] .sui-fwtabs button[data-fw="angular"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .site-chip.on { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .sui-tokpv { forced-color-adjust: none; border-color: CanvasText; }
  .sui-tokpv.flat, .sui-tokpv.num, .sui-tokpv.bar { forced-color-adjust: auto; }
  .sui-tokpv.bar i { background: CanvasText; }
}