/* AXD site — block styles (CUBE "B"). Contract: only --beam-* tokens, Beam utilities and
   compositions. No hex, no px, no colour functions — scripts/lint-site-css.mjs enforces it.
   Where no token exists for a value, the rule is left out and the gap is flagged in GAPS below. */
@layer beam.blocks {

  /* ── Shell ─────────────────────────────────────────────────────────────── */
  .b-marketing-shell { min-block-size: 100dvh; display: flex; flex-direction: column; }
  .b-marketing-shell > main { flex-grow: 1; }

  .b-site-header {
    background: var(--beam-surface-raised);
    border-block-end: var(--beam-border-width-2) solid var(--beam-border-neutral-separator);
    padding-block: var(--beam-inset-sm);
    position: sticky;
    inset-block-start: 0;
    z-index: var(--beam-z-index-sticky);
  }
  .b-site-footer {
    border-block-start: var(--beam-border-width-2) solid var(--beam-border-neutral-separator);
    padding-block: var(--beam-inset-lg);
    background: var(--beam-surface-raised);
  }
  .b-site-footer ul, .b-nav-list, .b-docs-nav ul, ul[role="list"] { list-style: none; padding: 0; margin: 0; }

  .b-brand-link { color: var(--beam-text-neutral-primary); text-decoration: none; }
  .b-brand-link:hover { color: var(--beam-text-neutral-primary); }
  /* The AXD mark is a white-fill SVG; it is used as a mask so it takes the current text colour in any theme. */
  .b-brand-mark {
    display: inline-block;
    block-size: var(--beam-icon-size-5);
    aspect-ratio: 3790 / 1853;
    background: var(--beam-fg-brand-primary);
    /* The AXD mark is the site's own logo (Brand/axd), whichever brand kit is being previewed. */
    -webkit-mask: url("../beam/brand/axd/axd-logo.svg") center / contain no-repeat;
    mask: url("../beam/brand/axd/axd-logo.svg") center / contain no-repeat;
  }

  .b-nav-link, .b-docs-nav-link {
    color: var(--beam-text-neutral-secondary);
    text-decoration: none;
    border-radius: var(--beam-radius-crisp);
    padding: var(--beam-inset-xs) var(--beam-inset-sm);
    display: inline-block;
  }
  .b-nav-link:hover, .b-docs-nav-link:hover { color: var(--beam-text-neutral-primary); background: var(--beam-background-neutral-primary_hover); }
  .b-nav-link[aria-current="page"] { color: var(--beam-text-brand); background: var(--beam-background-brand-faint); }

  .b-docs-nav {
    padding: var(--beam-inset-lg) var(--beam-inset-md);
    border-inline-end: var(--beam-border-width-2) solid var(--beam-border-neutral-separator);
    background: var(--beam-surface-default);
    position: sticky;
    inset-block-start: 0;
    align-self: start;
    max-block-size: 100dvh;
    overflow-y: auto;
  }
  .b-docs-nav-link { display: block; }
  .b-docs-nav-link[aria-current="page"] { color: var(--beam-text-brand); background: var(--beam-background-brand-faint); font-weight: var(--beam-font-weight-semibold); }

  .b-field-inline { display: inline-flex; align-items: center; gap: var(--beam-inline-sm); }
  .b-field-select {
    font: var(--beam-type-label-sm);
    padding: var(--beam-inset-xs) var(--beam-inset-sm);
    border: var(--beam-border-width-2) solid var(--beam-border-neutral-primary);
    border-radius: var(--beam-radius-soft);
    background: var(--beam-background-neutral-primary);
    color: var(--beam-text-neutral-primary);
  }

  .b-skip-link {
    position: absolute;
    inset-inline-start: var(--beam-inset-sm);
    inset-block-start: var(--beam-inset-sm);
    z-index: var(--beam-z-index-toast);
    padding: var(--beam-inset-sm) var(--beam-inset-md);
    background: var(--beam-background-brand-solid);
    color: var(--beam-text-on-accent);
    border-radius: var(--beam-radius-soft);
    transform: translateY(-200%);
  }
  .b-skip-link:focus { transform: none; }

  /* ── Shared blocks ─────────────────────────────────────────────────────── */
  .b-lede { font: var(--beam-type-body-lg); color: var(--beam-text-neutral-secondary); }
  .b-card {
    background: var(--beam-surface-raised);
    border: var(--beam-border-width-2) solid var(--beam-border-neutral-secondary);
    border-radius: var(--beam-radius-rounded);
    padding: var(--beam-inset-lg);
  }
  .b-card[data-tone="brand"] { background: var(--beam-background-brand-faint); border-color: var(--beam-border-brand_subtle); }
  .b-card[data-tone="sunken"] { background: var(--beam-surface-sunken); border-color: transparent; }
  .b-eyebrow { font: var(--beam-type-overline); letter-spacing: var(--beam-tracking-widest); text-transform: uppercase; color: var(--beam-text-brand); }
  .b-draft-banner {
    background: var(--beam-background-warning-primary);
    color: var(--beam-text-warning);
    border: var(--beam-border-width-2) solid var(--beam-border-warning);
    border-radius: var(--beam-radius-soft);
    padding: var(--beam-inset-sm) var(--beam-inset-md);
    font: var(--beam-type-label-sm);
  }
  .b-button {
    display: inline-block;
    font: var(--beam-type-label-lg);
    padding: var(--beam-inset-sm) var(--beam-inset-md);
    border-radius: var(--beam-radius-soft);
    border: var(--beam-border-width-2) solid transparent;
    text-decoration: none;
    transition: background var(--beam-duration-base) var(--beam-ease-standard);
  }
  .b-button[data-variant="solid"] { background: var(--beam-background-brand-solid); color: var(--beam-text-on-accent); }
  .b-button[data-variant="solid"]:hover { background: var(--beam-background-brand-solid_hover); color: var(--beam-text-on-accent); }
  .b-button[data-variant="outline"] { border-color: var(--beam-border-brand); color: var(--beam-text-brand); }
  .b-button[data-variant="outline"]:hover { background: var(--beam-background-brand-faint); }

  .b-copy-btn {
    font: var(--beam-type-code);
    font-family: var(--beam-font-family-mono);
    color: var(--beam-text-neutral-secondary);
    background: var(--beam-background-neutral-secondary);
    border: var(--beam-border-width-2) solid transparent;
    border-radius: var(--beam-radius-crisp);
    padding: var(--beam-inset-none) var(--beam-inset-xs);
    cursor: pointer;
    text-align: start;
    overflow-wrap: anywhere;
  }
  .b-copy-btn:hover { border-color: var(--beam-border-neutral-primary); color: var(--beam-text-neutral-primary); }
  .b-copy-btn[data-copied] { background: var(--beam-background-success-primary); color: var(--beam-text-success); }

  .b-badge {
    display: inline-block;
    font: var(--beam-type-label-sm);
    padding: var(--beam-inset-none) var(--beam-inset-xs);
    border-radius: var(--beam-radius-pill);
    background: var(--beam-background-neutral-secondary);
    color: var(--beam-text-neutral-secondary);
    white-space: nowrap;
  }
  .b-badge[data-status="pass"] { background: var(--beam-background-success-primary); color: var(--beam-text-success); }
  .b-badge[data-status="fail"] { background: var(--beam-background-error-primary); color: var(--beam-text-error); }

  /* ── Token docs ────────────────────────────────────────────────────────── */
  .b-table-scroll { overflow-x: auto; }
  .b-token-table { inline-size: 100%; border-collapse: collapse; }
  .b-token-table th {
    font: var(--beam-type-label-sm);
    color: var(--beam-text-neutral-tertiary);
    text-align: start;
    padding: var(--beam-inset-xs) var(--beam-inset-sm);
    border-block-end: var(--beam-border-width-2) solid var(--beam-border-neutral-primary);
  }
  .b-token-table td {
    padding: var(--beam-inset-sm);
    border-block-end: var(--beam-border-width-2) solid var(--beam-border-neutral-separator);
    vertical-align: top;
  }
  .b-token-table tr:hover td { background: var(--beam-background-neutral-primary_hover); }
  .b-token-name { font: var(--beam-type-label); overflow-wrap: anywhere; }
  .b-token-value { font: var(--beam-type-code); font-family: var(--beam-font-family-mono); }
  .b-alias-chain { font: var(--beam-type-caption); font-family: var(--beam-font-family-mono); color: var(--beam-text-neutral-tertiary); overflow-wrap: anywhere; }

  /* Swatches read --sw, always a --beam-* custom property set inline (style="--sw: var(--beam-…)") */
  .b-swatch {
    flex: none;
    inline-size: var(--beam-icon-size-5);
    block-size: var(--beam-icon-size-5);
    border-radius: var(--beam-radius-crisp);
    background: var(--sw);
    box-shadow: inset 0 0 0 var(--beam-border-width-2) var(--beam-border-neutral-tertiary);
  }
  .b-swatch[data-size="sm"] { inline-size: var(--beam-icon-size-3); block-size: var(--beam-icon-size-3); }
  /* Text / fg / border tokens: a sample "Aa" on the default surface rather than a filled chip */
  .b-swatch[data-kind="text"] { background: var(--beam-surface-default); color: var(--sw); display: grid; place-items: center; font: var(--beam-type-label); }
  .b-swatch[data-kind="border"] { background: var(--beam-surface-default); box-shadow: inset 0 0 0 var(--beam-border-width-5) var(--sw); }
  .b-swatch[data-kind="shadow"] { background: var(--beam-surface-raised); box-shadow: 0 0 0 var(--beam-border-width-5) var(--sw); }

  .b-scale-grid { display: grid; grid-template-columns: max-content repeat(12, minmax(0, 1fr)); gap: var(--beam-inline-xs); align-items: center; }
  .b-scale-grid > .b-scale-label { font: var(--beam-type-label-sm); color: var(--beam-text-neutral-secondary); padding-inline-end: var(--beam-inset-sm); }
  .b-scale-grid > .b-scale-head { font: var(--beam-type-caption); color: var(--beam-text-neutral-tertiary); text-align: center; }
  .b-scale-step {
    aspect-ratio: 1;
    min-block-size: var(--beam-icon-size-3);
    border: 0;
    border-radius: var(--beam-radius-crisp);
    background: var(--sw);
    box-shadow: inset 0 0 0 var(--beam-border-width-1) var(--beam-border-neutral-tertiary);
    cursor: pointer;
    padding: 0;
  }
  .b-scale-step:hover { outline: var(--beam-border-width-5) solid var(--beam-border-neutral-primary); outline-offset: var(--beam-border-width-2); }
  .b-scale-step[data-copied] { outline: var(--beam-border-width-5) solid var(--beam-border-success); }
  .b-scale-dark-stage { background: var(--beam-slate-dark-1); border-radius: var(--beam-radius-rounded); padding: var(--beam-inset-sm); }
  .b-scale-dark-stage .b-scale-label, .b-scale-dark-stage .b-scale-head { color: var(--beam-slate-dark-11); }

  .b-step-legend { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--beam-inline-xs); }
  .b-step-legend > * {
    font: var(--beam-type-caption);
    color: var(--beam-text-neutral-secondary);
    border-block-start: var(--beam-border-width-5) solid var(--beam-border-neutral-secondary);
    padding-block-start: var(--beam-inset-xs);
  }

  /* ── Business pages ────────────────────────────────────────────────────── */
  .b-band { background: var(--beam-surface-default); }
  .b-band[data-tone="raised"] { background: var(--beam-surface-raised); border-block: var(--beam-border-width-2) solid var(--beam-border-neutral-separator); }
  .b-band[data-tone="brand"] { background: var(--beam-background-brand-solid); color: var(--beam-text-on-accent); }
  .b-band[data-tone="brand"] :is(h2, p) { color: var(--beam-text-on-accent); }
  .b-band[data-tone="brand"] .b-button[data-variant="outline"] { border-color: var(--beam-text-on-accent); color: var(--beam-text-on-accent); }
  .b-band[data-tone="brand"] .b-button[data-variant="outline"]:hover { background: var(--beam-background-brand-solid_hover); }
  .b-band[data-tone="brand"] .b-button[data-variant="solid"] { background: var(--beam-surface-default); color: var(--beam-text-brand); }
  .b-placeholder {
    border: var(--beam-border-width-3) dashed var(--beam-border-neutral-primary);
    border-radius: var(--beam-radius-rounded);
    padding: var(--beam-inset-lg);
    color: var(--beam-text-neutral-tertiary);
    font: var(--beam-type-body-sm);
    background: var(--beam-surface-sunken);
  }
  .b-tbd { background: var(--beam-background-warning-primary); color: var(--beam-text-warning); border-radius: var(--beam-radius-crisp); padding-inline: var(--beam-inset-xs); }
  .b-steps { counter-reset: step; list-style: none; padding: 0; }
  .b-steps > li { counter-increment: step; }
  .b-steps > li::before { content: counter(step); font: var(--beam-type-h4); color: var(--beam-text-brand); display: block; }
  .b-check-list { list-style: none; padding: 0; }


  /* ── Token samples (live: they read the page's current modes) ──────────── */
  .b-sample-bar { display: block; inline-size: var(--v); max-inline-size: 100%; min-inline-size: var(--beam-border-width-2); block-size: var(--beam-icon-size-1); background: var(--beam-background-brand-subtle); border-inline-start: var(--beam-border-width-2) solid var(--beam-border-brand); }
  .b-sample-radius { display: block; inline-size: var(--beam-icon-size-7); block-size: var(--beam-icon-size-6); border-radius: var(--v); background: var(--beam-background-brand-subtle); border: var(--beam-border-width-2) solid var(--beam-border-brand_subtle); }
  .b-sample-border { display: block; inline-size: var(--beam-icon-size-6); block-size: var(--beam-icon-size-5); border: var(--v) solid var(--beam-border-neutral-primary); border-radius: var(--beam-radius-crisp); }
  .b-sample-icon { display: block; inline-size: var(--v); block-size: var(--v); max-inline-size: 100%; border-radius: var(--beam-radius-crisp); background: var(--beam-background-brand-subtle); border: var(--beam-border-width-2) dashed var(--beam-border-brand); }
  .b-sample-text { color: var(--beam-text-neutral-primary); max-inline-size: var(--beam-width-xs); }
  .b-sample-motion { display: block; inline-size: calc(var(--beam-icon-size-8) + var(--beam-icon-size-2)); block-size: var(--beam-icon-size-2); border-radius: var(--beam-radius-pill); background: var(--beam-background-neutral-secondary); }
  .b-sample-motion > span { display: block; inline-size: var(--beam-icon-size-2); block-size: var(--beam-icon-size-2); border-radius: var(--beam-radius-pill); background: var(--beam-background-brand-solid); transition: transform var(--d, var(--beam-duration-slow-2)) var(--e, var(--beam-ease-standard)); }
  tr:hover .b-sample-motion > span { transform: translateX(var(--beam-icon-size-8)); }

  .b-chip { font: var(--beam-type-label-sm); padding: var(--beam-inset-xs) var(--beam-inset-sm); border-radius: var(--beam-radius-pill); border: var(--beam-border-width-2) solid var(--beam-border-neutral-secondary); background: var(--beam-surface-raised); color: var(--beam-text-neutral-secondary); cursor: pointer; }
  .b-chip:hover { border-color: var(--beam-border-neutral-primary); color: var(--beam-text-neutral-primary); }
  .b-chip[aria-pressed="true"] { background: var(--beam-background-brand-faint); border-color: var(--beam-border-brand); color: var(--beam-text-brand); }

  .b-depth-sample { display: grid; place-items: center; min-block-size: var(--beam-icon-size-8); background: var(--beam-surface-raised); border-radius: var(--beam-radius-rounded); }
  .b-depth-sample[data-proj] { min-block-size: var(--beam-icon-size-7); margin: var(--beam-spacing-xl); }

  .b-type-role { padding-block-end: var(--beam-inset-md); border-block-end: var(--beam-border-width-2) solid var(--beam-border-neutral-separator); }
  .b-type-sample { max-inline-size: none; color: var(--beam-text-neutral-primary); }
  .b-type-props { --cluster-align: flex-start; }
  .b-type-props dt { font: var(--beam-type-caption); color: var(--beam-text-neutral-tertiary); }
  .b-type-props dd { margin: 0; }

  .b-guidance p, .b-guidance li { color: var(--beam-text-neutral-secondary); }

  /* ── Code + live demos ─────────────────────────────────────────────────── */
  pre.b-code {
    background: var(--beam-surface-sunken);
    border: var(--beam-border-width-2) solid var(--beam-border-neutral-separator);
    border-radius: var(--beam-radius-rounded);
    padding: var(--beam-inset-md);
    overflow-x: auto;
    white-space: pre;
  }
  .b-demo { border: var(--beam-border-width-2) solid var(--beam-border-neutral-secondary); border-radius: var(--beam-radius-rounded); overflow: hidden; }
  .b-demo-stage { padding: var(--beam-inset-lg); background: var(--beam-surface-default); }
  .b-demo-bar { padding: var(--beam-inset-xs) var(--beam-inset-sm); background: var(--beam-surface-raised); border-block-start: var(--beam-border-width-2) solid var(--beam-border-neutral-separator); }
  .b-demo { margin: 0; }
  .b-demo > pre.b-code { border: 0; border-radius: 0; border-block-start: var(--beam-border-width-2) solid var(--beam-border-neutral-separator); }
  :is(h1, h2, h3, h4) code { font: inherit; font-family: var(--beam-font-family-mono); }
  .b-box {
    background: var(--beam-background-brand-subtle); border: var(--beam-border-width-2) solid var(--beam-border-brand_subtle);
    border-radius: var(--beam-radius-soft); padding: var(--beam-inset-sm); font: var(--beam-type-label-sm); color: var(--beam-text-brand);
    text-align: center; min-block-size: var(--beam-icon-size-6); display: grid; place-items: center;
  }
  .b-box[data-tone="neutral"] { background: var(--beam-background-neutral-secondary); border-color: var(--beam-border-neutral-secondary); color: var(--beam-text-neutral-secondary); }
  .b-demo-shell { block-size: var(--beam-width-3xs); min-block-size: 0; border: var(--beam-border-width-2) solid var(--beam-border-neutral-secondary); border-radius: var(--beam-radius-rounded); overflow: hidden; }
  .b-demo-shell > * { padding: var(--beam-inset-sm); font: var(--beam-type-label-sm); }
  .b-demo-shell > [data-area="header"], .b-demo-shell > [data-area="footer"] { background: var(--beam-background-neutral-primary-solid); color: var(--beam-text-on-neutral-solid); }
  .b-demo-shell > [data-area="nav"] { background: var(--beam-surface-sunken); }
  .b-demo-shell > [data-area="aside"] { background: var(--beam-background-brand-faint); }

  /* ── Mobile menu (below md, where .app-shell hides the docs nav) ───────── */
  .b-mobile-menu > summary { list-style: none; cursor: pointer; }
  .b-mobile-menu > summary::-webkit-details-marker { display: none; }
  .b-mobile-menu[open] > .b-mobile-menu-panel {
    position: absolute; inset-inline: 0; inset-block-start: 100%;
    max-block-size: calc(100dvh - var(--beam-icon-size-7)); overflow-y: auto;
    background: var(--beam-surface-raised); border-block-end: var(--beam-border-width-2) solid var(--beam-border-neutral-separator);
    padding: var(--beam-inset-md) var(--beam-container-padding); box-shadow: var(--beam-depth-mid);
  }


  /* ── Pattern previews ──────────────────────────────────────────────────── */
  .b-preview { margin: 0; display: grid; gap: var(--beam-inline-sm); }
  .b-preview[hidden] { display: none; }
  .b-preview iframe {
    display: block; inline-size: 100%; block-size: var(--beam-width-lg); margin-inline: auto;
    border: var(--beam-border-width-2) solid var(--beam-border-neutral-secondary); border-radius: var(--beam-radius-rounded);
    background: var(--beam-surface-default);
  }
  .b-preview-stack[data-width="tablet"] iframe { inline-size: min(100%, var(--beam-width-xl)); }
  .b-preview-stack[data-width="phone"] iframe { inline-size: min(100%, var(--beam-width-xs)); }
  .b-pattern-card { position: relative; }
  .b-pattern-card .b-stretched::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .b-pattern-card:hover { border-color: var(--beam-border-brand_subtle); }
  .b-thumb { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--beam-radius-soft); border: var(--beam-border-width-2) solid var(--beam-border-neutral-separator); background: var(--beam-surface-default); }
  .b-thumb iframe { inline-size: 400%; block-size: 400%; transform: scale(0.25); transform-origin: 0 0; border: 0; pointer-events: none; }

  details.b-disclosure > summary { cursor: pointer; font: var(--beam-type-label); color: var(--beam-text-brand); }
  .b-toc a { font: var(--beam-type-label-sm); }
}

/* Breakpoint queries can't read custom properties. 48rem mirrors --beam-breakpoint (md = 768px) —
   the same value the generator writes into .app-shell. See GAPS. */
@layer beam.blocks {
  @media (min-width: 48rem) { .b-mobile-menu { display: none; } }
  @media (max-width: 47.99rem) { .b-primary-nav, .b-site-header > .b-wrapper > .b-switcher-form { display: none; } }
}

/* GAPS — values the site wanted but no token provides (flagged, not invented):
   - Nav / aside widths come from .app-shell defaults (16rem / 20rem) — candidates for 07. Layout.
   - No "border-width-hairline" semantic alias; site uses foundation --beam-border-width-2 (1px) directly.
   - No responsive show/hide helpers in beam.css; the site hard-codes 48rem (= md) for the mobile menu.
     Proposal: generator emits .hide-below-md / .hide-md-up (it already fills {{bp-md}} for compositions).
   - Swatch sizes reuse --beam-icon-size-*; a dedicated swatch/size token set would be cleaner. */

/* ── Pattern previews — STAND-INS for Cantina controls and pattern chrome ─────────────
   Site-only: in product code, use the Cantina component named on each pattern page. These rules
   exist so the preview iframes render; they are not part of Beam. */
@layer beam.blocks {
  .b-preview-page { background: var(--beam-surface-default); }

  /* Chrome */
  .b-appbar, .b-appfooter { background: var(--beam-surface-raised); padding-block: var(--beam-inset-sm); }
  .b-appbar { border-block-end: var(--beam-border-width-2) solid var(--beam-border-neutral-separator); }
  .b-appfooter { border-block-start: var(--beam-border-width-2) solid var(--beam-border-neutral-separator); }
  .b-sidenav { padding: var(--beam-inset-md); border-inline-end: var(--beam-border-width-2) solid var(--beam-border-neutral-separator); }
  .b-nav-item {
    display: block; font: var(--beam-type-label); color: var(--beam-text-neutral-secondary); text-decoration: none;
    padding: var(--beam-inset-xs) var(--beam-inset-sm); border-radius: var(--beam-radius-crisp);
  }
  .b-nav-item:hover { background: var(--beam-background-neutral-primary_hover); color: var(--beam-text-neutral-primary); }
  .b-nav-item[aria-current="page"] { background: var(--beam-background-brand-faint); color: var(--beam-text-brand); }
  .b-avatar {
    display: inline-grid; place-items: center; inline-size: var(--beam-icon-size-5); block-size: var(--beam-icon-size-5);
    border-radius: var(--beam-radius-pill); background: var(--beam-background-brand-soft); color: var(--beam-text-brand); font: var(--beam-type-label-sm);
  }
  .b-breadcrumb { list-style: none; padding: 0; font: var(--beam-type-body-sm); color: var(--beam-text-neutral-secondary); }
  .b-breadcrumb li + li::before { content: "/"; margin-inline-end: var(--beam-inline-sm); color: var(--beam-text-neutral-tertiary); }

  /* Controls (stand-ins) */
  .b-button[data-variant="ghost"] { color: var(--beam-text-neutral-secondary); }
  .b-button[data-variant="ghost"]:hover { background: var(--beam-background-neutral-primary_hover); color: var(--beam-text-neutral-primary); }
  .b-button[data-variant="danger"] { background: var(--beam-background-error-solid); color: var(--beam-text-white); }
  .b-button[data-variant="danger"]:hover { background: var(--beam-background-error-solid_hover); }
  .b-button { cursor: pointer; background: transparent; }
  .b-button[data-variant="solid"] { background: var(--beam-background-brand-solid); }
  .b-segmented .b-button[aria-pressed="true"] { background: var(--beam-background-brand-faint); }

  .b-field { display: grid; gap: var(--beam-inline-sm); }
  .b-input {
    font: var(--beam-type-body); padding: var(--beam-inset-xs) var(--beam-inset-sm);
    border: var(--beam-border-width-2) solid var(--beam-border-neutral-primary); border-radius: var(--beam-radius-soft);
    background: var(--beam-background-neutral-primary); color: var(--beam-text-neutral-primary); min-inline-size: 0;
  }
  .b-field > .b-input { inline-size: 100%; }
  .b-input[aria-invalid="true"] { border-color: var(--beam-border-error); box-shadow: var(--beam-ring-error); }
  .b-formsection { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
  .b-formsection > legend { padding: 0; margin-block-end: var(--beam-stack-sm); }

  .b-toggle {
    position: relative; inline-size: var(--beam-icon-size-6); block-size: var(--beam-icon-size-3); flex: none;
    border: 0; border-radius: var(--beam-radius-pill); background: var(--beam-background-neutral-quaternary); cursor: pointer; padding: 0;
    transition: background var(--beam-duration-fast-2) var(--beam-ease-standard);
  }
  .b-toggle::after {
    content: ""; position: absolute; inset-block: var(--beam-border-width-5); inset-inline-start: var(--beam-border-width-5);
    aspect-ratio: 1; border-radius: var(--beam-radius-pill); background: var(--beam-surface-raised); box-shadow: var(--beam-depth-low);
    transition: inset-inline-start var(--beam-duration-fast-2) var(--beam-ease-standard);
  }
  .b-toggle[aria-checked="true"] { background: var(--beam-background-brand-solid); }
  .b-toggle[aria-checked="true"]::after { inset-inline-start: calc(100% - var(--beam-icon-size-3) + var(--beam-border-width-5)); }

  .b-badge[data-tone="success"] { background: var(--beam-background-success-primary); color: var(--beam-text-success); }
  .b-badge[data-tone="warning"] { background: var(--beam-background-warning-primary); color: var(--beam-text-warning); }
  .b-badge[data-tone="error"] { background: var(--beam-background-error-primary); color: var(--beam-text-error); }
  .b-badge[data-tone="info"] { background: var(--beam-background-info-primary); color: var(--beam-text-info); }

  .b-tablewrap { overflow-x: auto; border: var(--beam-border-width-2) solid var(--beam-border-neutral-secondary); border-radius: var(--beam-radius-rounded); background: var(--beam-surface-raised); }
  .b-data-table { inline-size: 100%; border-collapse: collapse; }
  .b-data-table th { font: var(--beam-type-label-sm); color: var(--beam-text-neutral-tertiary); text-align: start; padding: var(--beam-inset-sm) var(--beam-inset-md); border-block-end: var(--beam-border-width-2) solid var(--beam-border-neutral-secondary); }
  .b-data-table td { padding: var(--beam-inset-sm) var(--beam-inset-md); border-block-end: var(--beam-border-width-2) solid var(--beam-border-neutral-separator); }
  .b-data-table tr:last-child td { border-block-end: 0; }
  .b-data-table tbody tr:hover { background: var(--beam-background-neutral-primary_hover); }

  .b-card[data-tone="danger"] { border-color: var(--beam-border-error_subtle); }
  .b-alert { padding: var(--beam-inset-sm) var(--beam-inset-md); border-radius: var(--beam-radius-soft); border: var(--beam-border-width-2) solid; }
  .b-alert[data-tone="error"] { background: var(--beam-background-error-primary); border-color: var(--beam-border-error_subtle); color: var(--beam-text-error); }
  .b-alert p { color: inherit; }

  .b-empty-mark { display: block; margin-inline: auto; inline-size: var(--beam-icon-size-6); block-size: var(--beam-icon-size-6); border-radius: var(--beam-radius-pill); background: var(--beam-background-brand-faint); border: var(--beam-border-width-3) dashed var(--beam-border-brand_subtle); }

  .b-skeleton { display: block; block-size: var(--beam-icon-size-1); border-radius: var(--beam-radius-crisp); background: var(--beam-background-neutral-tertiary); }
  .b-skeleton[data-size="title"] { block-size: var(--beam-icon-size-3); inline-size: 60%; }
  .b-skeleton[data-size="short"] { inline-size: 40%; }
  @media (prefers-reduced-motion: no-preference) {
    .b-skeleton { animation: beam-skeleton var(--beam-duration-deliberate) var(--beam-ease-standard) infinite alternate; }
  }
  @keyframes beam-skeleton { from { opacity: var(--beam-opacity-100); } to { opacity: var(--beam-opacity-40); } }

  .b-stepper { list-style: none; padding: 0; counter-reset: step; }
  .b-stepper > li { counter-increment: step; display: inline-flex; align-items: center; gap: var(--beam-inline-sm); font: var(--beam-type-label); color: var(--beam-text-neutral-tertiary); }
  .b-stepper > li::before {
    content: counter(step); display: inline-grid; place-items: center; inline-size: var(--beam-icon-size-3); block-size: var(--beam-icon-size-3);
    border-radius: var(--beam-radius-pill); border: var(--beam-border-width-2) solid var(--beam-border-neutral-primary); font: var(--beam-type-label-sm);
  }
  .b-stepper > li[data-state="done"] { color: var(--beam-text-neutral-secondary); }
  .b-stepper > li[data-state="done"]::before { content: "✓"; background: var(--beam-background-brand-soft); border-color: transparent; color: var(--beam-text-brand); }
  .b-stepper > li[aria-current="step"] { color: var(--beam-text-neutral-primary); }
  .b-stepper > li[aria-current="step"]::before { background: var(--beam-background-brand-solid); border-color: transparent; color: var(--beam-text-on-accent); }

  .b-meta dt { font: var(--beam-type-label-sm); color: var(--beam-text-neutral-tertiary); }
  .b-meta dd { margin: 0; }
  ol.b-flow { padding-inline-start: 0; list-style: none; }
}