/* ===========================================================================
   Sweep documentation — the design system's tokens, applied to Material.
   ---------------------------------------------------------------------------
   Same vocabulary as apps/web/src/app/globals.css: a near-black ground in
   dark, a near-white one in light, a panel raised on top of it, hairline
   borders instead of shadows, and one restrained accent (the design's brand
   blue) instead of a colour per category. No depth shadows anywhere below.

   Every literal colour here is copied from
   design/packages/tokens/dist/tokens.css — the Python image that builds this
   site has no Node, so it cannot import @sweep/tokens the way apps/web does.
   Each value carries the exact token name it was read from as a trailing
   comment, so a token change in ux-ui can be diffed against this file by
   hand. Re-copy this block whenever design/SOURCE moves.

   Host Grotesk and Geist Mono are loaded by Material itself from
   `theme.font` in mkdocs.yml (the same two families apps/web loads via
   next/font) — nothing to hand-load here.
   =========================================================================== */

:root,
[data-md-color-scheme="slate"] {
  /* -- surfaces -- */
  --sw-page: #08090a; /* --background-color-page */
  --sw-elevated: #141517; /* --background-color-elevated */
  --sw-raised: #1c1d1f; /* --background-color-action-secondary-raised */
  --sw-floating: #1c1d1f; /* --background-color-floating */
  --sw-input: #030304; /* --background-color-input */
  --sw-surface-hover: #ffffff0a; /* --background-color-surface-hover */
  --sw-surface-selected: #ffffff14; /* --background-color-surface-selected */
  --sw-surface-active: #ffffff14; /* --background-color-surface-active */

  /* -- borders -- */
  --sw-border-soft: #ffffff0f; /* --border-color-soft */
  --sw-border-subtle: #ffffff0a; /* --border-color-subtle */
  --sw-border-default: #ffffff29; /* --border-color-default */
  --sw-border-strong: #ffffff52; /* --border-color-strong */
  --sw-border-input: #1c1d1f; /* --border-color-input */
  --sw-border-hover: #ffffff3d; /* --border-color-hover */

  /* -- text ramp -- */
  --sw-text-primary: #f7f7f8; /* --text-color-primary */
  --sw-text-secondary: #d0d5e0; /* --text-color-secondary */
  --sw-text-tertiary: #8a8f98; /* --text-color-tertiary */
  --sw-text-quaternary: #757a83; /* --text-color-quaternary */
  --sw-text-disabled: #4c4f56; /* --text-color-disabled */

  /* -- links: the design's Link component is the text colour with an
     underline, not a brand colour, so the docs read the same way. -- */
  --sw-link: #f7f7f8; /* --text-color-link */
  --sw-link-hover: #afb5c0; /* --text-color-link-hover */
  --sw-link-visited: #757a83; /* --text-color-link-visited */

  /* -- the one restrained accent, used only for the focus ring and the
     brand mention, never for a hyperlink or a heading -- */
  --sw-brand: #83a1e2; /* --text-color-brand */

  /* -- semantic tones, used by admonitions only -- */
  --sw-success: #49e999; /* --text-color-success */
  --sw-success-bg: #0a291a; /* --background-color-success-subtle */
  --sw-success-border: #166534; /* --border-color-success */
  --sw-error: #ff7a80; /* --text-color-error */
  --sw-error-bg: #310c0d; /* --background-color-error-subtle */
  --sw-error-border: #991b1b; /* --border-color-error */
  --sw-warning: #fcd34d; /* --text-color-warning */
  --sw-warning-bg: #451a03; /* --background-color-warning-subtle */
  --sw-warning-border: #92400e; /* --border-color-warning */
  --sw-info: #7dd3fc; /* --text-color-info */
  --sw-info-bg: #0c4a6e; /* --background-color-info-subtle */
  --sw-info-border: #0369a1; /* --border-color-info */

  /* -- focus + selection -- */
  --sw-focus-ring: #3f6fd9; /* --color-focus-ring */
  --sw-focus-ring-offset: #030304; /* --color-focus-ring-offset */
  --sw-selection-bg: #34363a; /* --background-color-selection */
  --sw-selection-text: #f0f0f2; /* --text-color-selection */

  /* -- scrollbar -- */
  --sw-scrollbar-thumb: #232426; /* --color-scrollbar-thumb */
  --sw-scrollbar-track: #08090a; /* --color-scrollbar-track */
}

[data-md-color-scheme="default"] {
  --sw-page: #edeff3; /* --background-color-page (light) */
  --sw-elevated: #fafbfd; /* --background-color-elevated (light) */
  --sw-raised: #edeff3; /* --background-color-action-secondary-raised (light) */
  --sw-floating: #ffffff; /* --background-color-floating (light) */
  --sw-input: #ffffff; /* --background-color-input (light) */
  --sw-surface-hover: #0a0a0a0a; /* --background-color-surface-hover (light) */
  --sw-surface-selected: #0a0b0e14; /* --background-color-surface-selected (light) */
  --sw-surface-active: #0a0b0e14; /* --background-color-surface-active (light) */

  --sw-border-soft: #0a0b0e1a; /* --border-color-soft (light) */
  --sw-border-subtle: #0a0b0e0f; /* --border-color-subtle (light) */
  --sw-border-default: #0a0b0e29; /* --border-color-default (light) */
  --sw-border-strong: #0a0b0e52; /* --border-color-strong (light) */
  --sw-border-input: #e0e3e9; /* --border-color-input (light) */
  --sw-border-hover: #0a0b0e3d; /* --border-color-hover (light) */

  --sw-text-primary: #0a0b0e; /* --text-color-primary (light) */
  --sw-text-secondary: #262930; /* --text-color-secondary (light) */
  --sw-text-tertiary: #676d7a; /* --text-color-tertiary (light) */
  --sw-text-quaternary: #868d9a; /* --text-color-quaternary (light) */
  --sw-text-disabled: #c7cbd4; /* --text-color-disabled (light) */

  --sw-link: #0a0b0e; /* --text-color-link (light) */
  --sw-link-hover: #262930; /* --text-color-link-hover (light) */
  --sw-link-visited: #454a55; /* --text-color-link-visited (light) */

  --sw-brand: #2756b5; /* --text-color-brand (light) */

  --sw-success: #047857; /* --text-color-success (light) */
  --sw-success-bg: #dcfce7; /* --background-color-success-subtle (light) */
  --sw-success-border: #86efac; /* --border-color-success (light) */
  --sw-error: #c81e3a; /* --text-color-error (light) */
  --sw-error-bg: #ffe2e2; /* --background-color-error-subtle (light) */
  --sw-error-border: #fca5a5; /* --border-color-error (light) */
  --sw-warning: #92400e; /* --text-color-warning (light) */
  --sw-warning-bg: #fef3c7; /* --background-color-warning-subtle (light) */
  --sw-warning-border: #fcd34d; /* --border-color-warning (light) */
  --sw-info: #1e40af; /* --text-color-info (light) */
  --sw-info-bg: #dbeafe; /* --background-color-info-subtle (light) */
  --sw-info-border: #93c5fd; /* --border-color-info (light) */

  --sw-focus-ring: #3f6fd9; /* --color-focus-ring (unchanged in light) */
  --sw-focus-ring-offset: #ffffff; /* --color-focus-ring-offset (light) */
  --sw-selection-bg: #d8dae0; /* --background-color-selection (light) */
  --sw-selection-text: #0a0b0e; /* --text-color-selection (light) */

  --sw-scrollbar-thumb: #c7cbd4; /* --color-scrollbar-thumb (light) */
  --sw-scrollbar-track: #edeff3; /* --color-scrollbar-track (light) */
}

/* -- radii, identical in both schemes -- */
:root {
  --sw-radius-sm: 4px; /* --radius-sm */
  --sw-radius-md: 6px; /* --radius-md */
  --sw-radius-lg: 8px; /* --radius-lg */
  --sw-radius-xl: 12px; /* --radius-xl */
  --sw-radius-2xl: 16px; /* --radius-2xl */
  --sw-radius-full: 999px; /* --radius-full */
}

/* --------------------------------------------------------------------------
   Material variable bridge — every place Material paints chrome from its
   own palette instead of ours gets redirected here, once, rather than
   fighting individual selectors further down.
   -------------------------------------------------------------------------- */
:root,
[data-md-color-scheme="slate"],
[data-md-color-scheme="default"] {
  --md-default-bg-color: var(--sw-page);
  --md-default-fg-color: var(--sw-text-secondary);
  --md-default-fg-color--light: var(--sw-text-tertiary);
  --md-default-fg-color--lighter: var(--sw-text-quaternary);
  --md-default-fg-color--lightest: var(--sw-border-soft);

  --md-primary-fg-color: var(--sw-page);
  --md-primary-bg-color: var(--sw-text-primary);

  --md-accent-fg-color: var(--sw-brand);
  --md-accent-fg-color--transparent: color-mix(in srgb, var(--sw-brand) 12%, transparent);
  --md-typeset-a-color: var(--sw-link);

  --md-code-bg-color: var(--sw-elevated);
  --md-code-fg-color: var(--sw-text-primary);
  --md-code-hl-color: var(--sw-brand);

  --md-footer-bg-color: var(--sw-page);
  --md-footer-bg-color--dark: var(--sw-page);
  --md-footer-fg-color: var(--sw-text-secondary);
  --md-footer-fg-color--light: var(--sw-text-tertiary);

  --md-typeset-table-color: var(--sw-border-soft);
}

/* ==========================================================================
   Action tokens: the pills and icon buttons the product's nav is built from,
   read from design/packages/tokens/dist/tokens.css like every value above.
   ========================================================================== */
:root,
[data-md-color-scheme="slate"] {
  --sw-action-secondary: #1c1d1f; /* --background-color-action-secondary */
  --sw-action-secondary-hover: #232426; /* --background-color-action-secondary-hover */
  --sw-action-secondary-active: #28292c; /* --background-color-action-secondary-active */
  --sw-action-secondary-border: #34363a; /* --border-color-action-secondary */
  --sw-action-secondary-border-hover: #3e4044; /* --border-color-action-secondary-hover */
  --sw-action-secondary-text: #f7f7f8; /* --text-color-action-secondary */
  --sw-action-primary: #f7f7f8; /* --background-color-action-primary */
  --sw-action-primary-hover: #d0d5e0; /* --background-color-action-primary-hover */
  --sw-action-primary-text: #030304; /* --text-color-action-primary */
  --sw-placeholder: #757a83; /* --text-color-placeholder */
  --sw-modal: #28292c; /* --background-color-modal */
}

[data-md-color-scheme="default"] {
  --sw-action-secondary: #ffffff; /* --background-color-action-secondary (light) */
  --sw-action-secondary-hover: #f6f7fa; /* --background-color-action-secondary-hover (light) */
  --sw-action-secondary-active: #edeff3; /* --background-color-action-secondary-active (light) */
  --sw-action-secondary-border: #e0e3e9; /* --border-color-action-secondary (light) */
  --sw-action-secondary-border-hover: #c7cbd4; /* --border-color-action-secondary-hover (light) */
  --sw-action-secondary-text: #0a0b0e; /* --text-color-action-secondary (light) */
  --sw-action-primary: #0a0b0e; /* --background-color-action-primary (light) */
  --sw-action-primary-hover: #191b20; /* --background-color-action-primary-hover (light) */
  --sw-action-primary-text: #ffffff; /* --text-color-action-primary (light) */
  --sw-placeholder: #868d9a; /* --text-color-placeholder (light) */
  --sw-modal: #fafbfd; /* --background-color-modal (light) */
}

/* The shell's geometry, from apps/web/src/components/shell/notch-frame.tsx:
   the gutter around the panel, the panel's corner, the notch's depth, and
   the notch's width, measured against the header so the floor and the gap
   the nav leaves for it are the same width. */
:root {
  --sw-radius-3xl: 20px; /* --radius-3xl */
  --sw-hairline: 0.5px; /* --border-width-0-5 */
  --sw-gutter: 12px; /* --spacing-3 */
  --sw-notch-d: 72px;
  --sw-notch-w: clamp(150px, 41.4cqw, 702px);
  --md-admonition-icon--note: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M12%2011.5V16.5%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M12%207.51L12.01%207.49889%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M12%2022C17.5228%2022%2022%2017.5228%2022%2012C22%206.47715%2017.5228%202%2012%202C6.47715%202%202%206.47715%202%2012C2%2017.5228%206.47715%2022%2012%2022Z%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E");
}

/* ==========================================================================
   The lockup. Both schemes' files sit in the DOM and the scheme hides one.
   The header, the drawer and the footer all carry a logo, so the swap is
   scoped to every slot that holds one; the selector outranks Material's
   own `.md-header__button.md-logo img { display: block }`.
   ========================================================================== */
.sweep-logo {
  display: block;
  height: auto;
}

[data-md-color-scheme="slate"] :is(.md-logo, .sw-footer__logo) .sweep-logo--light,
[data-md-color-scheme="default"] :is(.md-logo, .sw-footer__logo) .sweep-logo--dark {
  display: none;
}

/* Iconoir icons are strokes with `fill="none"`; Material paints every icon
   with `fill: currentcolor`, which would flood each stroke into a blob. */
:is(.md-header, .md-search, .md-sidebar, .md-top, .sw-footer, .sw-pager) svg[fill="none"] {
  fill: none;
}

/* ==========================================================================
   Page, panel and notch: the product's one shell.

   The header is the panel's top edge and `.md-main` its body, so the two
   read as one surface with the gutter around it. The header is not sticky,
   as in the product: the nav belongs to the panel, and a sticky notch would
   float over the prose. The notch is cut into the top edge in the page's
   own colour, and the lockup sits in it.
   ========================================================================== */
body {
  background: var(--sw-page);
  -webkit-font-smoothing: antialiased;
}

html {
  scrollbar-color: var(--sw-scrollbar-thumb) var(--sw-scrollbar-track);
}

.md-header {
  position: relative;
  container-type: inline-size;
  height: var(--sw-notch-d);
  margin: var(--sw-gutter) var(--sw-gutter) 0;
  background: var(--sw-elevated);
  border: var(--sw-hairline) solid var(--sw-border-soft);
  border-bottom: 0;
  border-radius: var(--sw-radius-3xl) var(--sw-radius-3xl) 0 0;
  box-shadow: none;
  color: var(--sw-text-primary);
}

.md-header--shadow {
  box-shadow: none;
}

.sw-notch {
  position: absolute;
  top: calc(var(--sw-hairline) * -1);
  left: 50%;
  display: flex;
  width: var(--sw-notch-w);
  transform: translateX(-50%);
  pointer-events: none;
}

.sw-notch__flank {
  display: block;
  flex-shrink: 0;
}

.sw-notch__flank--mirrored {
  transform: scaleX(-1);
}

.sw-notch__fill {
  fill: var(--sw-page);
}

.sw-notch__stroke {
  fill: none;
  stroke: var(--sw-border-soft);
  stroke-width: 1;
}

.sw-notch__floor {
  flex: 1;
  height: calc(var(--sw-notch-d) + 1px);
  background: var(--sw-page);
  border-bottom: 1px solid var(--sw-border-soft);
}

.md-header .sw-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--sw-notch-d);
  padding: 0 16px;
}

.sw-header__group {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.sw-header__group--end {
  justify-content: flex-end;
}

.sw-header__notch-gap {
  flex-shrink: 0;
  width: var(--sw-notch-w);
}

.md-header .md-header__button.md-logo.sw-header__logo {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  height: var(--sw-notch-d);
  margin: 0;
  padding: 0 8px;
  transform: translateX(-50%);
}

/* Material sizes the header's lockup by height (`1.2rem`) with `width: auto`,
   from a selector of two classes and an element. Ours names the button's three
   classes so the width leads instead and the height follows the file's own
   ratio: at 104 px the two agree to within a pixel, which is why nothing looked
   wrong until the width changed (23 Sept 2026). */
.md-header .md-header__button.md-logo.sw-header__logo .sweep-logo {
  width: 104px;
  height: auto;
}

.md-header .md-header__button.md-logo.sw-header__logo:hover {
  opacity: 0.8;
}

/* The lockup has to fit inside the notch, and the notch is a trapezoid: its
   floor is far narrower than its opening. At the phone's notch width the free
   space beside the flanks is about 77 px at the height the wordmark's baseline
   sits, so the 104 px of the desk overhung both slopes, the S on one and the p
   on the other (23 Sept 2026). 64 px clears the slope with air on each side at
   the narrowest the notch ever gets, which is its 150 px floor on a 320 px
   screen. The app answers the same problem by dropping the notch entirely
   below `sm` and setting the lockup in the flow; the docs keep the notch at
   every width, so the mark is what gives way. */
@media screen and (max-width: 44.984375em) {
  .md-header .md-header__button.md-logo.sw-header__logo .sweep-logo {
    width: 64px;
  }
}

/* ==========================================================================
   Pills and icon buttons: Button and IconButton, secondary, pill shape, md
   size (40 px), with the half-pixel border the nav gives every control.
   The primary pill is the one call to action, as in the product's nav.
   ========================================================================== */
.sw-pill,
.sw-icon-pill,
.md-header .md-header__button.md-icon,
.md-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
  box-sizing: border-box;
  height: 40px;
  margin: 0;
  border: var(--sw-hairline) solid var(--sw-action-secondary-border);
  border-radius: var(--sw-radius-full);
  background: var(--sw-action-secondary);
  color: var(--sw-action-secondary-text);
  font: 500 14px/1.15 var(--md-text-font-family);
  text-decoration: none;
  opacity: 1;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.sw-pill {
  padding: 0 16px;
}

.sw-icon-pill,
.md-header .md-header__button.md-icon {
  width: 40px;
  padding: 0;
}

.sw-pill:is(:hover, :focus-visible),
.sw-icon-pill:is(:hover, :focus-visible),
.md-header .md-header__button.md-icon:is(:hover, :focus-visible),
.md-top:is(:hover, :focus-visible) {
  background: var(--sw-action-secondary-hover);
  border-color: var(--sw-action-secondary-border-hover);
  color: var(--sw-action-secondary-text);
  opacity: 1;
}

.sw-pill--primary,
.sw-pill--primary:is(:hover, :focus-visible) {
  border-color: transparent;
  color: var(--sw-action-primary-text);
}

.sw-pill--primary {
  background: var(--sw-action-primary);
}

.sw-pill--primary:is(:hover, :focus-visible) {
  background: var(--sw-action-primary-hover);
}

:is(.sw-pill, .sw-icon-pill, .md-header .md-icon) svg {
  width: 20px;
  height: 20px;
}

.sw-icon-pill svg[fill="currentColor"] {
  width: 14px;
  height: 14px;
}

/* The theme toggle's glyphs, sized and centred by eye rather than by box.
   Iconoir's sun runs its rays to the edge of the 24 px grid, so at 20 px it
   reads larger than every other icon; the half moon carries its weight low
   and to the left, so a box-centred moon looks pushed into the corner. */
.md-header [data-md-component="palette"] .md-icon svg {
  width: 18px;
  height: 18px;
}

.md-header [data-md-component="palette"] label[for="__palette_0"] svg {
  transform: translate(0.75px, -0.75px);
}

/* Material shows and hides these two by breakpoint and the palette labels
   by the `hidden` attribute; the pill's `display` above must not undo it. */
.md-header .md-header__button[hidden] {
  display: none;
}

/* Once the scheme has been toggled, Material's
   `.md-option:checked + label:not([hidden])` (0,3,1) sets the visible label
   to `display: block`, beating the pill rule above, and the glyph jumps to
   the top-left corner of its circle. This restores the pill's flex centring
   with a selector that outranks it. */
.md-header [data-md-component="palette"] .md-option + .md-header__button.md-icon:not([hidden]) {
  display: inline-flex;
}

@media screen and (min-width: 60em) {
  .md-header .md-header__button[for="__search"] {
    display: none;
  }
}

@media screen and (min-width: 76.25em) {
  .md-header .md-header__button[for="__drawer"] {
    display: none;
  }
}

/* ==========================================================================
   Search: the product's search pill, with the `/` key it answers to.
   ========================================================================== */
@media screen and (min-width: 60em) {
  .sw-header__group .md-search {
    padding: 0;
  }

  .sw-header__group .md-search__inner {
    float: none;
    width: 240px;
  }

  [data-md-toggle="search"]:checked ~ .md-header .sw-header__group .md-search__inner {
    width: min(460px, 40cqw);
  }

  .md-search__form {
    height: 40px;
    border: var(--sw-hairline) solid var(--sw-action-secondary-border);
    border-radius: var(--sw-radius-full);
    background: var(--sw-action-secondary);
    box-shadow: none;
    transition: border-color 120ms ease, background-color 120ms ease;
  }

  .md-search__form:hover {
    background: var(--sw-action-secondary-hover);
    border-color: var(--sw-action-secondary-border-hover);
  }

  [data-md-toggle="search"]:checked ~ .md-header .md-search__form {
    border-radius: var(--sw-radius-2xl) var(--sw-radius-2xl) 0 0;
    background: var(--sw-floating);
    box-shadow: none;
  }

  .md-search__form::after {
    content: "/";
    position: absolute;
    top: 50%;
    right: 12px;
    padding: 2px 6px;
    border-radius: var(--sw-radius-sm);
    background: var(--sw-surface-hover);
    color: var(--sw-text-secondary);
    font: 500 11px/1.3 var(--md-text-font-family);
    transform: translateY(-50%);
    pointer-events: none;
  }

  [data-md-toggle="search"]:checked ~ .md-header .md-search__form::after {
    display: none;
  }

  .md-search__output {
    overflow: hidden;
    border: var(--sw-hairline) solid var(--sw-border-soft);
    border-top: 0;
    border-radius: 0 0 var(--sw-radius-2xl) var(--sw-radius-2xl);
    background: var(--sw-floating);
    box-shadow: none;
  }

  .md-search__form:focus-within {
    border-color: var(--sw-border-strong);
  }

  /* Material fixes the result list at 23.4 or 34.4 rem whatever the field
     measures; here the field is the pill above, so the list follows it. */
  .sw-header__group .md-search__scrollwrap {
    width: 100%;
  }
}

/* The field sits inside a pill that already shows focus through its border;
   Material's square accent outline around the bare input would sit outside
   that pill's rounded corners. */
.md-search__input:is(:focus, :focus-visible) {
  outline: none;
}

.md-search__input {
  height: 40px;
  padding: 0 44px 0 42px;
  background: transparent;
  color: var(--sw-text-primary);
  font: 400 14px/1.15 var(--md-text-font-family);
}

.md-search__input::placeholder,
.md-search__input ~ .md-search__icon {
  color: var(--sw-placeholder);
}

.md-search__icon[for="__search"] {
  top: 10px;
  left: 14px;
}

.md-search__icon svg {
  width: 20px;
  height: 20px;
}

/* Material sizes this row with its line-height; a `font` shorthand resets
   that, so the height comes back here as padding under a hairline that
   separates the status line from the field above it. */
.md-search-result__meta {
  padding: 12px 16px;
  border-top: var(--sw-hairline) solid var(--sw-border-soft);
  background: transparent;
  color: var(--sw-text-tertiary);
  font: 400 12px/1.4 var(--md-text-font-family);
}

@media screen and (min-width: 60em) {
  [dir="ltr"] .md-search-result__meta {
    padding-left: 16px;
  }
}

.md-search-result__link:is(:hover, :focus, [data-md-state="active"]) .md-search-result__article {
  background-color: var(--sw-surface-hover);
}

.md-search-result__article h1 {
  color: var(--sw-text-primary);
  font: 500 15px/1.3 var(--md-text-font-family);
}

.md-search-result__article h2 {
  color: var(--sw-text-secondary);
  font: 500 13px/1.3 var(--md-text-font-family);
}

.md-search-result mark {
  background: transparent;
  color: var(--sw-text-primary);
  text-decoration: underline;
  text-decoration-color: var(--sw-border-strong);
}

/* ==========================================================================
   The panel's body. Sidebars stick to the top of the viewport rather than
   below a header that no longer follows the page.
   ========================================================================== */
.md-main {
  margin: 0 var(--sw-gutter);
  background: var(--sw-elevated);
  border: var(--sw-hairline) solid var(--sw-border-soft);
  border-top: 0;
  border-radius: 0 0 var(--sw-radius-3xl) var(--sw-radius-3xl);
}

.md-main__inner {
  margin-top: 0;
  padding-top: 24px;
}

.md-sidebar {
  top: 12px;
}

/* ==========================================================================
   Primary nav: Sidebar and NavLink (md). Section titles are the sidebar's
   uppercase tag; the current page is the NavLink's `selected` surface.
   ========================================================================== */
.md-nav--primary .md-nav__item {
  padding: 0;
}

.md-nav--primary .md-nav__link[href] {
  display: flex;
  margin: 1px 4px;
  padding: 8px 12px;
  border-radius: var(--sw-radius-md);
  color: var(--sw-text-secondary);
  font: 500 13px/1.25 var(--md-text-font-family);
  transition: background-color 120ms ease, color 120ms ease;
}

.md-nav--primary .md-nav__link[href]:is(:hover, :focus-visible) {
  background: var(--sw-surface-hover);
  color: var(--sw-text-primary);
}

.md-nav--primary .md-nav__link--active,
.md-nav--primary .md-nav__link--active[href] {
  background: var(--sw-surface-selected);
  color: var(--sw-text-primary);
}

@media screen and (min-width: 76.25em) {
  .md-nav--primary > .md-nav__title {
    display: none;
  }

  .md-nav--primary .md-nav__item--section {
    margin: 24px 0 0;
  }

  .md-nav--primary .md-nav__item--section:first-child {
    margin-top: 0;
  }

  .md-nav--primary .md-nav__item--section > .md-nav__link,
  .md-nav--primary .md-nav__item--section > .md-nav__link:hover {
    margin: 0 4px;
    padding: 8px 12px;
    background: none;
    color: var(--sw-text-tertiary);
    font: 500 11px/1.3 var(--md-text-font-family);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: default;
  }
}

@media screen and (max-width: 76.234375em) {
  .md-sidebar--primary,
  .md-nav--primary .md-nav__title {
    background: var(--sw-elevated);
    color: var(--sw-text-primary);
  }

  .md-nav--primary .md-nav__title {
    border-bottom: var(--sw-hairline) solid var(--sw-border-soft);
  }

  /* Material dresses the drawer's lockup itself, with
     `.md-nav__title .md-nav__button.md-logo img { display: block; height: 2.4rem; width: auto }`.
     That selector carries four classes, one more than the swap above and than
     the rule this replaces, so it won both: `display: block` un-hid the copy
     the scheme had put away and `width: auto` let the file's own 210 px
     through. The drawer showed the white lockup and the black one on top of
     each other, four times the size of the header's (23 Sept 2026). These two
     rules carry five classes each, which is what it takes to be heard here;
     `height` is restated because Material's 2.4rem would otherwise stretch
     the mark against its new width. */
  .md-nav--primary .md-nav__title .md-nav__button.md-logo .sweep-logo {
    width: 88px;
    height: auto;
  }

  [data-md-color-scheme="slate"] .md-nav__title .md-nav__button.md-logo .sweep-logo--light,
  [data-md-color-scheme="default"] .md-nav__title .md-nav__button.md-logo .sweep-logo--dark {
    display: none;
  }
}

/* ==========================================================================
   On this page: OutlineRail's vocabulary without its JavaScript. Each entry
   carries the rail's 10 x 2 mark; the section in view is the bright one.
   ========================================================================== */
.md-nav--secondary .md-nav__title {
  background: transparent;
  box-shadow: none;
  color: var(--sw-text-tertiary);
  font: 500 11px/1.3 var(--md-text-font-family);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.md-nav--secondary .md-nav__link {
  position: relative;
  margin: 0;
  padding: 6px 8px 6px 24px;
  color: var(--sw-text-tertiary);
  font: 400 13px/1.4 var(--md-text-font-family);
  transition: color 160ms ease;
}

.md-nav--secondary .md-nav__link::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 6px;
  width: 10px;
  height: 2px;
  border-radius: var(--sw-radius-full);
  background: var(--sw-border-default);
  transform: translateY(-50%);
  transition: width 160ms ease, background-color 160ms ease;
}

.md-nav--secondary .md-nav .md-nav__link {
  padding-left: 36px;
}

.md-nav--secondary .md-nav .md-nav__link::before {
  left: 18px;
  width: 6px;
}

.md-nav--secondary .md-nav__link:is(:hover, :focus-visible),
.md-nav--secondary .md-nav__link--active {
  color: var(--sw-text-primary);
}

.md-nav--secondary .md-nav__link:is(:hover, :focus-visible)::before,
.md-nav--secondary .md-nav__link--active::before {
  width: 14px;
  background: var(--sw-text-primary);
}

/* ==========================================================================
   Prose: the design system's Markdown component, in the measure and the
   rhythm of the product's own long page (apps/web terms). A page title is
   `h1Page`, the line under it `leadParagraph`, a section opens on a hairline
   the way the terms page separates its sections, and body copy is `body`.
   Scoped to the article so search results keep their own sizes.
   ========================================================================== */
.md-content {
  max-width: none;
}

.md-content__inner {
  max-width: 672px;
  margin: 0 auto 64px;
  padding: 16px 24px 0;
}

.md-content__inner::before {
  display: none;
}

.md-content .md-typeset {
  color: var(--sw-text-secondary);
  font-size: 16px;
  line-height: 1.6;
}

.md-content .md-typeset ::selection {
  background: var(--sw-selection-bg);
  color: var(--sw-selection-text);
}

.md-content .md-typeset h1 {
  margin: 0 0 20px;
  color: var(--sw-text-primary);
  font-size: clamp(36px, calc(23.32px + 3.38vw), 64px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}

.md-content .md-typeset .lede {
  margin: 0 0 40px;
  color: var(--sw-text-secondary);
  font-size: clamp(17px, calc(15.24px + 0.47vw), 22px);
  line-height: 1.5;
}

.md-content .md-typeset h2 {
  margin: 48px 0 16px;
  padding-top: 24px;
  border-top: var(--sw-hairline) solid var(--sw-border-soft);
  color: var(--sw-text-primary);
  font-size: clamp(18px, calc(16.59px + 0.38vw), 22px);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
}

.md-content .md-typeset h3 {
  margin: 32px 0 12px;
  color: var(--sw-text-primary);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.25;
}

.md-content .md-typeset p {
  margin: 0 0 16px;
}

.md-content .md-typeset p:has(> strong:only-child) {
  margin: 28px 0 6px;
  color: var(--sw-text-primary);
}

.md-content .md-typeset strong {
  color: var(--sw-text-primary);
  font-weight: 500;
}

.md-content .md-typeset a {
  color: var(--sw-brand);
  text-decoration: none;
}

.md-content .md-typeset a:is(:hover, :focus-visible) {
  color: var(--sw-brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.md-content .md-typeset .headerlink {
  color: var(--sw-text-quaternary);
}

.md-content .md-typeset :is(ul, ol) {
  margin: 0 0 16px;
  padding-left: 24px;
}

.md-content .md-typeset li {
  margin: 0;
}

.md-content .md-typeset li + li {
  margin-top: 8px;
}

.md-content .md-typeset li::marker {
  color: var(--sw-text-tertiary);
}

.md-content .md-typeset code {
  padding: 2px 6px;
  border: var(--sw-hairline) solid var(--sw-border-subtle);
  border-radius: var(--sw-radius-sm);
  background: var(--sw-floating);
  color: var(--sw-text-primary);
  font-family: var(--md-code-font-family);
  font-size: 13px;
  line-height: 1.4;
}

.md-content .md-typeset pre {
  border: var(--sw-hairline) solid var(--sw-border-subtle);
  border-radius: var(--sw-radius-lg);
  background: var(--sw-raised);
}

.md-content .md-typeset pre > code {
  padding: 16px;
  border: 0;
  background: transparent;
}

.md-content .md-typeset hr {
  margin: 32px 0;
  border: 0;
  border-top: var(--sw-hairline) solid var(--sw-border-subtle);
}

/* ==========================================================================
   Tables: the design system's Table. Radius xl, a hairline, the header row
   on the modal surface, rows separated by the subtle border.
   ========================================================================== */
.md-content .md-typeset table:not([class]) {
  border: var(--sw-hairline) solid var(--sw-border-soft);
  border-radius: var(--sw-radius-xl);
  background: var(--sw-raised);
  box-shadow: none;
  font-size: 14px;
}

.md-content .md-typeset table:not([class]) th {
  min-width: 0;
  padding: 10px 16px;
  border-bottom: var(--sw-hairline) solid var(--sw-border-subtle);
  background: var(--sw-modal);
  color: var(--sw-text-tertiary);
  font: 500 13px/1.4 var(--md-text-font-family);
}

.md-content .md-typeset table:not([class]) td {
  padding: 12px 16px;
  border-top: var(--sw-hairline) solid var(--sw-border-subtle);
  color: var(--sw-text-secondary);
  vertical-align: top;
}

.md-content .md-typeset table:not([class]) td:first-child {
  color: var(--sw-text-primary);
}

.md-content .md-typeset table:not([class]) tbody tr:hover {
  background: var(--sw-surface-hover);
  box-shadow: none;
}

/* ==========================================================================
   Callouts: the design system's Banner. One layout for every type, the tone
   carried by the subtle surface, its border and the icon's colour. `note`
   is the neutral banner, which is what a plain statement of fact wants.
   ========================================================================== */
.md-content .md-typeset .admonition,
.md-content .md-typeset details {
  position: relative;
  margin: 28px 0;
  padding: 12px 16px 12px 48px;
  border: var(--sw-hairline) solid var(--sw-border-soft);
  border-radius: var(--sw-radius-lg);
  background: var(--sw-raised);
  box-shadow: none;
  color: var(--sw-text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

/* The title's line is exactly the icon's 20 px, so the text, the icon in
   front of it and a collapsible's chevron after it share one centre line. */
.md-content .md-typeset :is(.admonition, details) > :is(.admonition-title, summary) {
  position: static;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sw-text-primary);
  font: 500 13px/20px var(--md-text-font-family);
}

/* The icon sits 1 px above the title line's geometric centre. Host Grotesk
   rides high in its line box, and a question is mostly capitals and
   ascenders (I, T, b, k), so the eye reads the line's centre at the middle of
   the capitals. Measured in pixels on 15 Sept 2026, the circle centred 1 px
   below that middle on a 1x screen and read as hanging low beside its text. */
.md-content .md-typeset :is(.admonition, details) > :is(.admonition-title, summary)::before {
  top: 11px;
  left: 16px;
  width: 20px;
  height: 20px;
  background-color: var(--sw-text-secondary);
}

.md-content .md-typeset :is(.admonition, details) > p {
  margin: 4px 0 0;
}

.md-content .md-typeset :is(.info, .abstract, .tip, .example) {
  border-color: var(--sw-info-border);
  background: var(--sw-info-bg);
}

.md-content .md-typeset :is(.info, .abstract, .tip, .example) > :is(.admonition-title, summary)::before {
  background-color: var(--sw-info);
}

.md-content .md-typeset :is(.success, .check, .done) {
  border-color: var(--sw-success-border);
  background: var(--sw-success-bg);
}

.md-content .md-typeset :is(.success, .check, .done) > :is(.admonition-title, summary)::before {
  background-color: var(--sw-success);
}

.md-content .md-typeset :is(.warning, .caution, .attention, .question) {
  border-color: var(--sw-warning-border);
  background: var(--sw-warning-bg);
}

.md-content .md-typeset :is(.warning, .caution, .attention, .question) > :is(.admonition-title, summary)::before {
  background-color: var(--sw-warning);
}

.md-content .md-typeset :is(.danger, .error, .failure, .bug) {
  border-color: var(--sw-error-border);
  background: var(--sw-error-bg);
}

.md-content .md-typeset :is(.danger, .error, .failure, .bug) > :is(.admonition-title, summary)::before {
  background-color: var(--sw-error);
}

.md-content .md-typeset .note {
  border-color: var(--sw-border-soft);
  background: var(--sw-raised);
}

.md-content .md-typeset .note > :is(.admonition-title, summary)::before {
  background-color: var(--sw-text-secondary);
}

/* A collapsible's chevron is Material's accent by default; here it takes the
   banner's own icon colour, so a neutral question never shows a blue glyph.
   It sits 1 px high for the same reason as the icon in front of the title. */
.md-content .md-typeset details > summary::after {
  top: 11px;
  right: 14px;
  background-color: var(--sw-text-tertiary);
}

.md-content .md-typeset details:is(.warning, .caution, .attention, .question) > summary::after {
  background-color: var(--sw-warning);
}

.md-content .md-typeset details > summary {
  padding-right: 28px;
  cursor: pointer;
}

.md-content .md-typeset details[open] > summary {
  margin-bottom: 6px;
}

/* ==========================================================================
   Cards on a page: the design system's Card (radius xl, a hairline, no
   shadow), on the raised surface so they read against the panel.
   ========================================================================== */
.sw-cycle,
.sw-kinds,
.sw-stats {
  display: grid;
  gap: 12px;
  margin: 28px 0;
}

.sw-cycle {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sw-kinds,
.sw-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sw-cycle__step,
.sw-stat,
.md-content .md-typeset a.sw-kind {
  border: var(--sw-hairline) solid var(--sw-border-soft);
  border-radius: var(--sw-radius-xl);
  background: var(--sw-raised);
}

.sw-cycle__step {
  padding: 20px;
}

.sw-cycle__index {
  display: block;
  margin-bottom: 14px;
  color: var(--sw-text-tertiary);
  font: 500 12px/1.4 var(--md-code-font-family);
}

.sw-cycle__title {
  display: block;
  margin-bottom: 6px;
  color: var(--sw-text-primary);
  font: 500 17px/1.25 var(--md-text-font-family);
}

.md-content .md-typeset .sw-cycle__step p {
  margin: 0;
  color: var(--sw-text-tertiary);
  font-size: 14px;
  line-height: 1.5;
}

.md-content .md-typeset a.sw-kind {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  color: inherit;
  text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.md-content .md-typeset a.sw-kind:is(:hover, :focus-visible) {
  border-color: var(--sw-border-hover);
  background: var(--sw-action-secondary-hover);
  text-decoration: none;
}

.sw-kind__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 10px;
  border-radius: var(--sw-radius-lg);
  background: var(--sw-surface-hover);
}

.sw-kind__icon::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: var(--sw-text-primary);
  -webkit-mask: var(--sw-kind-icon) center / contain no-repeat;
  mask: var(--sw-kind-icon) center / contain no-repeat;
}

.sw-kind--nft {
  --sw-kind-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M21%203.6V20.4C21%2020.7314%2020.7314%2021%2020.4%2021H3.6C3.26863%2021%203%2020.7314%203%2020.4V3.6C3%203.26863%203.26863%203%203.6%203H20.4C20.7314%203%2021%203.26863%2021%203.6Z%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M3%2016L10%2013L21%2018%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M16%2010C14.8954%2010%2014%209.10457%2014%208C14%206.89543%2014.8954%206%2016%206C17.1046%206%2018%206.89543%2018%208C18%209.10457%2017.1046%2010%2016%2010Z%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E");
}

.sw-kind--token {
  --sw-kind-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M16%2013C13.2386%2013%2011%2011.8807%2011%2010.5C11%209.11929%2013.2386%208%2016%208C18.7614%208%2021%209.11929%2021%2010.5C21%2011.8807%2018.7614%2013%2016%2013Z%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M11%2014.5C11%2015.8807%2013.2386%2017%2016%2017C18.7614%2017%2021%2015.8807%2021%2014.5%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M3%209.5C3%2010.8807%205.23858%2012%208%2012C9.12583%2012%2010.1647%2011.814%2011.0005%2011.5%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M3%2013C3%2014.3807%205.23858%2015.5%208%2015.5C9.12561%2015.5%2010.1643%2015.314%2011%2015.0002%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M3%205.5V16.5C3%2017.8807%205.23858%2019%208%2019C9.12563%2019%2010.1643%2018.8139%2011%2018.5%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M13%208.5V5.5%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M11%2010.5V18.5C11%2019.8807%2013.2386%2021%2016%2021C18.7614%2021%2021%2019.8807%2021%2018.5V10.5%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M8%208C5.23858%208%203%206.88071%203%205.5C3%204.11929%205.23858%203%208%203C10.7614%203%2013%204.11929%2013%205.5C13%206.88071%2010.7614%208%208%208Z%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E");
}

.sw-kind--reflexive {
  --sw-kind-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M9.01894%209C9.00639%208.83498%209%208.66824%209%208.5C9%204.91015%2011.9101%202%2015.5%202C19.0899%202%2022%204.91015%2022%208.5C22%2012.0899%2019.0899%2015%2015.5%2015C15.3318%2015%2015.165%2014.9936%2015%2014.9811%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M8.5%2022C4.91015%2022%202%2019.0899%202%2015.5C2%2011.9101%204.91015%209%208.5%209C12.0899%209%2015%2011.9101%2015%2015.5C15%2019.0899%2012.0899%2022%208.5%2022Z%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M22%2017C22%2018.6569%2020.6569%2020%2019%2020H17M17%2020L19%2018M17%2020L19%2022%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M2%207C2%205.34315%203.34315%204%205%204H7M7%204L5%206M7%204L5%202%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E");
}

.sw-kind__title {
  color: var(--sw-text-primary);
  font: 500 15px/1.15 var(--md-text-font-family);
}

.sw-kind__line {
  color: var(--sw-text-tertiary);
  font: 400 13px/1.4 var(--md-text-font-family);
}

.sw-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 20px;
}

.sw-stat__value {
  color: var(--sw-text-primary);
  font: 500 24px/1 var(--md-text-font-family);
  font-variant-numeric: tabular-nums;
}

.sw-stat__label {
  color: var(--sw-text-tertiary);
  font: 400 13px/1.4 var(--md-text-font-family);
}

/* ==========================================================================
   A worked example: the design system's Card around a run of numbered steps,
   labelled like a nav section so it reads as an aside to the page rather
   than as more of its argument. Figures in it are illustrations, and the
   label says so.
   ========================================================================== */
.md-content .md-typeset .sw-example {
  margin: 28px 0;
  padding: 20px 24px 8px;
  border: var(--sw-hairline) solid var(--sw-border-soft);
  border-radius: var(--sw-radius-xl);
  background: var(--sw-raised);
}

.md-content .md-typeset .sw-example__label {
  display: block;
  margin: 0 0 12px;
  color: var(--sw-text-tertiary);
  font: 500 11px/1.4 var(--md-text-font-family);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.md-content .md-typeset .sw-example ol {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  counter-reset: sw-step;
}

.md-content .md-typeset .sw-example ol > li {
  position: relative;
  margin: 0;
  padding: 0 0 14px 36px;
  counter-increment: sw-step;
  font-size: 15px;
  line-height: 1.55;
}

.md-content .md-typeset .sw-example ol > li::before {
  content: counter(sw-step, decimal-leading-zero);
  position: absolute;
  top: 3px;
  left: 0;
  color: var(--sw-text-tertiary);
  font: 500 12px/1.4 var(--md-code-font-family);
}

.md-content .md-typeset .sw-example ol > li > p {
  margin: 0;
}

.md-content .md-typeset .sw-example table:not([class]) {
  margin: 4px 0 16px;
}

.md-content .md-typeset .sw-example > p {
  margin: 0 0 12px;
}

/* ==========================================================================
   The not-backed statement. The product never dresses this sentence as an
   alert: it states it, in secondary text, wherever a user can see it. So it
   is not an amber banner here either. It is the design system's neutral
   Banner grown into a Card: an IconBox and a title, then the three things a
   holder does not have, split by hairlines, then the one thing they do.
   Icons are the Iconoir glyphs Material already inlines as admonition
   variables (theme.icon.admonition), used as masks so they take the text
   colour of either scheme.
   ========================================================================== */
.md-content .md-typeset .sw-statement {
  margin: 32px 0;
  border: var(--sw-hairline) solid var(--sw-border-soft);
  border-radius: var(--sw-radius-xl);
  background: var(--sw-raised);
  overflow: hidden;
}

.md-content .md-typeset .sw-statement__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 20px 18px;
}

.md-content .md-typeset .sw-statement__icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 40px;
  height: 40px;
  border: var(--sw-hairline) solid var(--sw-border-soft);
  border-radius: var(--sw-radius-lg);
  background: var(--sw-floating);
}

.md-content .md-typeset .sw-statement__icon::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: var(--sw-text-primary);
  -webkit-mask: var(--md-admonition-icon--note) center / contain no-repeat;
  mask: var(--md-admonition-icon--note) center / contain no-repeat;
}

.md-content .md-typeset .sw-statement__heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.md-content .md-typeset .sw-statement__title {
  color: var(--sw-text-primary);
  font: 500 17px/1.25 var(--md-text-font-family);
}

.md-content .md-typeset .sw-statement__lede {
  color: var(--sw-text-secondary);
  font: 400 14px/1.5 var(--md-text-font-family);
}

.md-content .md-typeset ul.sw-statement__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-top: var(--sw-hairline) solid var(--sw-border-soft);
  list-style: none;
}

.md-content .md-typeset ul.sw-statement__facts > li.sw-statement__fact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 16px 20px 18px;
}

.md-content .md-typeset ul.sw-statement__facts > li.sw-statement__fact + li.sw-statement__fact {
  border-left: var(--sw-hairline) solid var(--sw-border-soft);
}

.md-content .md-typeset .sw-statement__fact-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--sw-text-primary);
  font: 500 14px/1.25 var(--md-text-font-family);
}

.md-content .md-typeset .sw-statement__fact-title::before {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background-color: var(--sw-text-tertiary);
  -webkit-mask: var(--md-admonition-icon--danger) center / contain no-repeat;
  mask: var(--md-admonition-icon--danger) center / contain no-repeat;
}

.md-content .md-typeset .sw-statement__fact-line {
  color: var(--sw-text-tertiary);
  font: 400 13px/1.5 var(--md-text-font-family);
}

.md-content .md-typeset .sw-statement__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  border-top: var(--sw-hairline) solid var(--sw-border-soft);
  background: var(--sw-surface-hover);
  color: var(--sw-text-secondary);
  font: 400 14px/1.5 var(--md-text-font-family);
}

.md-content .md-typeset .sw-statement__foot::before {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background-color: var(--sw-text-primary);
  -webkit-mask: var(--md-admonition-icon--success) center / contain no-repeat;
  mask: var(--md-admonition-icon--success) center / contain no-repeat;
}

@media screen and (max-width: 44.984375em) {
  .md-content .md-typeset .sw-statement__head {
    align-items: flex-start;
    padding: 16px;
  }

  .md-content .md-typeset ul.sw-statement__facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .md-content .md-typeset ul.sw-statement__facts > li.sw-statement__fact {
    padding: 14px 16px;
  }

  .md-content .md-typeset ul.sw-statement__facts > li.sw-statement__fact + li.sw-statement__fact {
    border-top: var(--sw-hairline) solid var(--sw-border-soft);
    border-left: 0;
  }

  .md-content .md-typeset .sw-statement__foot {
    align-items: flex-start;
    padding: 14px 16px;
  }

  .md-content .md-typeset .sw-statement__foot::before {
    margin-top: 3px;
  }
}

/* ==========================================================================
   Diagrams: hand-drawn SVG on the Card surface. Every colour comes from a
   token through a class, so a figure flips with the scheme like the text
   around it. Each figure ships a wide drawing and a tall one; a phone gets
   the tall one rather than a wide one shrunk to unreadable type.
   ========================================================================== */
.md-content .md-typeset .sw-figure {
  margin: 28px 0;
  padding: 24px 24px 16px;
  border: var(--sw-hairline) solid var(--sw-border-soft);
  border-radius: var(--sw-radius-xl);
  background: var(--sw-raised);
}

.md-content .md-typeset .sw-figure svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.md-content .md-typeset .sw-figure .sw-figure__tall {
  display: none;
}

.md-content .md-typeset .sw-figure figcaption {
  margin: 16px 0 0;
  color: var(--sw-text-tertiary);
  font: 400 13px/1.5 var(--md-text-font-family);
  text-align: left;
}

.sw-figure__node {
  fill: var(--sw-elevated);
  stroke: var(--sw-border-default);
  stroke-width: 1;
}

.sw-figure__node--accent {
  fill: var(--sw-surface-selected);
  stroke: var(--sw-border-strong);
}

.sw-figure__image-frame {
  fill: none;
  stroke: var(--sw-border-default);
  stroke-width: 1;
}

.sw-figure__t1 {
  fill: var(--sw-text-primary);
  font: 500 13px var(--md-text-font-family);
}

.sw-figure__t2 {
  fill: var(--sw-text-tertiary);
  font: 400 11px var(--md-text-font-family);
}

.sw-figure__label {
  fill: var(--sw-text-secondary);
  font: 400 11px var(--md-text-font-family);
  paint-order: stroke;
  stroke: var(--sw-raised);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.sw-figure__arrow {
  fill: none;
  stroke: var(--sw-text-tertiary);
  stroke-width: 1.25;
  stroke-linecap: round;
}

.sw-figure__arrow--strong {
  stroke: var(--sw-text-primary);
  stroke-width: 1.5;
}

.sw-figure__arrow--dashed {
  stroke-dasharray: 4 4;
}

.sw-figure__head {
  fill: var(--sw-text-tertiary);
}

.sw-figure__head--strong {
  fill: var(--sw-text-primary);
}

@media screen and (max-width: 44.984375em) {
  .md-content .md-typeset .sw-figure {
    padding: 16px 12px 12px;
  }

  .md-content .md-typeset .sw-figure .sw-figure__wide {
    display: none;
  }

  .md-content .md-typeset .sw-figure .sw-figure__tall {
    display: block;
  }
}

/* On a phone the card gives back its padding and the numbers their gutter,
   so a 4-column example table keeps every column on screen. */
@media screen and (max-width: 44.984375em) {
  .md-content .md-typeset .sw-example {
    padding: 16px 14px 4px;
  }

  .md-content .md-typeset .sw-example ol > li {
    padding-left: 28px;
    font-size: 14px;
  }

  .md-content .md-typeset .sw-example table:not([class]) {
    font-size: 12px;
  }

  .md-content .md-typeset .sw-example table:not([class]) :is(th, td) {
    padding: 8px 10px;
  }
}

/* ==========================================================================
   Previous and next: two horizontal Cards at the foot of the article.
   ========================================================================== */
.sw-pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 64px;
  padding-top: 24px;
  border-top: var(--sw-hairline) solid var(--sw-border-soft);
}

.md-content .md-typeset a.sw-pager__card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 20px;
  border: var(--sw-hairline) solid var(--sw-border-soft);
  border-radius: var(--sw-radius-xl);
  background: var(--sw-raised);
  color: inherit;
  text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.md-content .md-typeset a.sw-pager__card:is(:hover, :focus-visible) {
  border-color: var(--sw-border-hover);
  background: var(--sw-action-secondary-hover);
  text-decoration: none;
}

.md-content .md-typeset a.sw-pager__card--next {
  grid-column: 2;
  align-items: flex-end;
  text-align: right;
}

.sw-pager__dir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sw-text-tertiary);
  font: 500 11px/1.3 var(--md-text-font-family);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sw-pager__dir svg {
  width: 14px;
  height: 14px;
}

.sw-pager__title {
  color: var(--sw-text-primary);
  font: 500 15px/1.15 var(--md-text-font-family);
}

/* ==========================================================================
   Footer: the product's SiteFooter, a second panel flush with the bottom
   of the window, square at the bottom and open on that edge.
   ========================================================================== */
.md-footer.sw-footer {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 8px var(--sw-gutter) 0;
  padding: 32px 24px 24px;
  border: var(--sw-hairline) solid var(--sw-border-soft);
  border-bottom: 0;
  border-radius: var(--sw-radius-3xl) var(--sw-radius-3xl) 0 0;
  background: var(--sw-elevated);
  color: var(--sw-text-secondary);
}

.sw-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 32px;
}

.sw-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sw-footer__logo .sweep-logo {
  width: 96px;
}

.sw-footer__baseline {
  max-width: 420px;
  margin: 0;
  color: var(--sw-text-tertiary);
  font: 400 13px/1.4 var(--md-text-font-family);
}

.sw-footer__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.sw-footer__rule {
  width: var(--sw-hairline);
  height: 24px;
  margin: 0 4px;
  background: var(--sw-border-soft);
}

.sw-footer__divider {
  margin: 0;
  border: 0;
  border-top: var(--sw-hairline) solid var(--sw-border-soft);
}

.sw-footer__legal {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sw-footer__legal p {
  margin: 0;
  font: 400 12px/1.4 var(--md-text-font-family);
}

.sw-footer__not-backed {
  color: var(--sw-text-tertiary);
}

.sw-footer__notice {
  color: var(--sw-text-quaternary);
}

.md-top {
  padding: 0 16px 0 12px;
  font-size: 13px;
}

:focus-visible {
  outline: 2px solid var(--sw-focus-ring);
  outline-offset: 2px;
}

/* ==========================================================================
   Narrow screens. The gutter tightens and the call to action leaves the
   bar, so the drawer, search and theme controls keep their 40 px targets
   either side of a notch that never shrinks below the lockup.
   ========================================================================== */
@media screen and (max-width: 44.984375em) {
  :root {
    --sw-gutter: 8px;
  }

  .md-header .sw-header__inner {
    gap: 8px;
    padding: 0 12px;
  }

  .sw-header__group {
    gap: 8px;
  }

  .sw-pill--cta {
    display: none;
  }

  .md-content__inner {
    padding: 8px 16px 0;
  }

  .sw-cycle,
  .sw-kinds,
  .sw-stats,
  .sw-pager {
    grid-template-columns: minmax(0, 1fr);
  }

  .md-content .md-typeset a.sw-pager__card--next {
    grid-column: 1;
  }
}