/* UI Standard — components.css
 * Plain-CSS port of the Fluent 2 web components (@fluentui/react-components v9 *.styles.ts) for any stack.
 * Load order (each file is required by the next):
 *   <link rel="stylesheet" href="…/ui-standard/assets/theme-default/tokens.css">
 *   <link rel="stylesheet" href="…/ui-standard/assets/css/base.css">
 *   <link rel="stylesheet" href="…/ui-standard-components/assets/components.css">
 * Every colour, stroke, radius, duration and curve is a var(--token) from tokens.css, so light / dark / high contrast
 * follow <html data-theme> with no extra CSS. Pixel values without a token are Fluent's own literals (cited per block).
 * Defaults: medium size, secondary/default appearance. Disabled = [disabled] or [aria-disabled="true"].
 * Glyphs (checkmark, chevrons, dismiss, intent icons…) are Fluent System Icons (@fluentui/svg-icons 1.1.344, MIT)
 * embedded as data-URI masks, so this file is self-contained. Items marked (recommendation) are UI Standard
 * conventions, not Fluent source. Living style guide: ./gallery.html. Specs: ../references/*.md.
 *
 * State preview hooks: .is-hover / .is-active / .is-focus reproduce :hover / :active / :focus-visible on buttons,
 * links, fields, choice controls, tabs, menu items, nav items and cards (for galleries and screenshots only).
 *
 * Contents                                           Class contract (BEM; modifiers on the root)
 *   0. Glyphs ......................................  --ui-glyph-<name>-<style>-<size> custom properties
 *   1. Button ......................................  .ui-button --primary --outline --subtle --transparent --small --large
 *                                                       --icon-only --circular --square --compound --accessible;
 *                                                       __chevron __content __secondary; [aria-pressed] [aria-expanded];
 *                                                       .ui-split-button
 *   2. Link ........................................  .ui-link --subtle --inline
 *   3. Input family ................................  .ui-input (+ __content) .ui-textarea .ui-select .ui-search (+ __clear);
 *                                                       --underline --filled-darker --filled-lighter --small --large
 *   4. Field & Label ...............................  .ui-field __label __hint __message --error --warning --success
 *                                                       --horizontal --small --large; .ui-label (+ __required) --small --large --disabled
 *   5. Choice controls .............................  .ui-checkbox (--large --circular) .ui-radio .ui-radio-group (--horizontal)
 *                                                       .ui-switch (--small --before) .ui-slider (--small)
 *   6. Card ........................................  .ui-card --filled-alternative --outline --subtle --small --large --selectable
 *                                                       --interactive --horizontal; __header __title __description __action
 *                                                       __preview __footer __floating-action
 *   7. Badge .......................................  .ui-badge --filled --tint --outline --ghost; --brand --danger --important
 *                                                       --informative --severe --subtle --success --warning; --tiny --extra-small
 *                                                       --small --medium --large --extra-large; --rounded --circular --square
 *   8. Tag .........................................  .ui-tag --outline --brand --small --extra-small --circular; __dismiss; .ui-tag-group
 *   9. TabList / Tab ...............................  .ui-tablist --vertical --small --large --subtle --subtle-circular
 *                                                       --filled-circular; .ui-tab [aria-selected] (+ __label)
 *  10. Nav .........................................  .ui-nav (--small) __item [aria-current] __category (details) __section-header __divider
 *  11. Breadcrumb ..................................  .ui-breadcrumb (--small --large) > ol > li > a|button|span[aria-current]
 *  12. Toolbar .....................................  .ui-toolbar --small --large --vertical; __divider
 *  13. Divider .....................................  .ui-divider --subtle --strong --brand --start --end --inset --vertical
 *  14. Accordion ...................................  .ui-accordion (details/summary) --small --large --end; __panel
 *  15. Carousel ....................................  .ui-carousel --elevated; __viewport __card __controls __button(--prev --next)
 *                                                       __nav (--brand) __dot
 *  16. Menu ........................................  .ui-menu __item __label __secondary __group-header __divider
 *  17. Popover .....................................  .ui-popover --small --large --inverted --brand
 *  18. Tooltip .....................................  .ui-tooltip-host > .ui-tooltip --inverted --below
 *  19. Dialog ......................................  dialog.ui-dialog __title __close __body __actions
 *  20. Drawer ......................................  .ui-drawer --start --end --bottom --small --medium --large --full --inline
 *                                                       --separator; __header __title __close __body __footer
 *  21. MessageBar ..................................  .ui-message-bar --info --success --warning --error --multiline --square;
 *                                                       __body __title __actions __dismiss
 *  22. Toast .......................................  .ui-toaster (--top-end --top-start --bottom-start --top --bottom)
 *                                                       .ui-toast --info --success --warning --error --inverted;
 *                                                       __media __title __action __body __subtitle __footer
 *  23. ProgressBar .................................  .ui-progress --indeterminate --large --square --error --warning --success; __bar
 *  24. Spinner .....................................  .ui-spinner --extra-tiny --tiny --extra-small --small --medium --large
 *                                                       --extra-large --huge --inverted --below; __label
 *  25. Skeleton ....................................  .ui-skeleton --circle --square --pulse --translucent (size: --ui-skeleton-size)
 *  26. Table .......................................  table.ui-table --small --extra-small --neutral-selection;
 *                                                       __selection __primary __description __media; .ui-table-container
 *  27. Empty state (recommendation) ................  .ui-empty-state __icon __title __body __actions
 *  27a-c. Text roles (recommendation) ..............  .ui-caption .ui-text-secondary .ui-text-tertiary .ui-eyebrow;
 *                                                       .ui-page-header __title __description __actions;
 *                                                       .ui-section-header --marketing --subsection --center
 *                                                       __title __description __actions; .ui-hero-title --display .ui-hero-lede
 *  28. Forced colors ...............................  Windows contrast themes (system colours)
 *  29. Reduced motion ..............................  calmer loops for Spinner / ProgressBar (base.css stops the rest)
 *
 * Markup variants also accepted (used by the ../references/*.md recipes): Nav __header __body __footer __icon
 * __chevron __group __sub-item __app-item __hamburger with <button class="ui-nav__category" aria-expanded>;
 * Tab __icon; Breadcrumb explicit <li class="ui-breadcrumb__divider">; Accordion __chevron __icon, --chevron-end;
 * Carousel __slider __autoplay, --inline-wide; Menu __check; Drawer __title-row; Divider --align-start/--align-end;
 * MessageBar __icon, .ui-message-bar-group; Spinner __ring __tail __label, --vertical; Skeleton group + __item
 * (--circle --square); Table __sort-icon __layout(--primary) __main __num __state-row, .ui-table-scroll;
 * Card __checkbox __primary-action; Empty state --compact --page __media.
 */

/* ============================================================================ 0. Glyphs */
/* Fluent System Icons as masks: an element (or pseudo-element) shows the glyph in its background-color, which is
 * usually currentColor, so glyphs follow state tokens and theme. Same naming as avatar.css (no conflicts). */
:root {
  --ui-glyph-checkmark-filled-12: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M9.76 3.2c.3.29.32.76.04 1.06l-4.25 4.5a.75.75 0 0 1-1.08.02L2.22 6.53a.75.75 0 0 1 1.06-1.06l1.7 1.7L8.7 3.24a.75.75 0 0 1 1.06-.04'/%3E%3C/svg%3E");
  --ui-glyph-checkmark-filled-16: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14.05 3.49c.28.3.27.77-.04 1.06l-7.93 7.47A.85.85 0 0 1 4.9 12L2.22 9.28a.75.75 0 1 1 1.06-1.06l2.24 2.27 7.47-7.04a.75.75 0 0 1 1.06.04'/%3E%3C/svg%3E");
  --ui-glyph-checkmark-filled-20: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.03 13.9 3.56 10a.75.75 0 0 0-1.12 1l4 4.5c.29.32.79.34 1.09.03l10.5-10.5a.75.75 0 0 0-1.06-1.06z'/%3E%3C/svg%3E");
  --ui-glyph-square-filled-12: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4c0-1.1.9-2 2-2h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
  --ui-glyph-square-filled-16: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 4.5A2.5 2.5 0 0 1 4.5 2h7A2.5 2.5 0 0 1 14 4.5v7a2.5 2.5 0 0 1-2.5 2.5h-7A2.5 2.5 0 0 1 2 11.5z'/%3E%3C/svg%3E");
  --ui-glyph-circle-filled-20: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16'/%3E%3C/svg%3E");
  --ui-glyph-chevron-down-regular-20: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0'/%3E%3C/svg%3E");
  --ui-glyph-chevron-right-regular-20: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.65 4.15c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.47a.5.5 0 0 1-.7-.71L12.8 10 7.65 4.85a.5.5 0 0 1 0-.7'/%3E%3C/svg%3E");
  --ui-glyph-chevron-left-regular-20: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M12.35 15.85a.5.5 0 0 1-.7 0L6.16 10.4a.55.55 0 0 1 0-.78l5.49-5.46a.5.5 0 1 1 .7.7L7.2 10l5.16 5.15c.2.2.2.5 0 .7'/%3E%3C/svg%3E");
  --ui-glyph-chevron-right-regular-12: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.65 2.15a.5.5 0 0 0 0 .7L7.79 6 4.65 9.15a.5.5 0 1 0 .7.7l3.5-3.5a.5.5 0 0 0 0-.7l-3.5-3.5a.5.5 0 0 0-.7 0'/%3E%3C/svg%3E");
  --ui-glyph-chevron-right-regular-16: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.65 3.15a.5.5 0 0 0 0 .7L9.79 8l-4.14 4.15a.5.5 0 0 0 .7.7l4.5-4.5a.5.5 0 0 0 0-.7l-4.5-4.5a.5.5 0 0 0-.7 0'/%3E%3C/svg%3E");
  --ui-glyph-dismiss-regular-20: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07z'/%3E%3C/svg%3E");
  --ui-glyph-search-regular-20: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M13.73 14.44a6.5 6.5 0 1 1 .7-.7l3.42 3.4a.5.5 0 0 1-.63.77l-.07-.06zm-.71-.71A5.5 5.5 0 0 0 15 9.5a5.5 5.5 0 1 0-1.98 4.23'/%3E%3C/svg%3E");
  --ui-glyph-arrow-up-regular-20: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3.13 9.16a.5.5 0 1 0 .74.68L9.5 3.67V17.5a.5.5 0 1 0 1 0V3.67l5.63 6.17a.5.5 0 0 0 .74-.68l-6.32-6.92a.75.75 0 0 0-1.1 0z'/%3E%3C/svg%3E");
  --ui-glyph-arrow-down-regular-20: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M16.87 10.84a.5.5 0 1 0-.74-.68l-5.63 6.17V2.5a.5.5 0 0 0-1 0v13.83l-5.63-6.17a.5.5 0 0 0-.74.68l6.31 6.91a.75.75 0 0 0 1.11 0z'/%3E%3C/svg%3E");
  --ui-glyph-info-filled-20: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M18 10a8 8 0 1 0-16 0 8 8 0 0 0 16 0M9.5 8.91a.5.5 0 0 1 1 0v4.69a.5.5 0 0 1-1 0V8.9m-.25-2.16a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0'/%3E%3C/svg%3E");
  --ui-glyph-checkmark-circle-filled-20: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16m3.36 5.65a.5.5 0 0 0-.64-.06l-.07.06L9 11.3 7.35 9.65l-.07-.06a.5.5 0 0 0-.7.7l.07.07 2 2 .07.06c.17.11.4.11.56 0l.07-.06 4-4 .07-.08a.5.5 0 0 0-.06-.63'/%3E%3C/svg%3E");
  --ui-glyph-warning-filled-20: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.37 3.56a3 3 0 0 1 5.26 0l5.5 10A3 3 0 0 1 15.5 18h-11a3 3 0 0 1-2.63-4.44zM10 12.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5m0-6.25a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 1 0V7a.5.5 0 0 0-.5-.5'/%3E%3C/svg%3E");
  --ui-glyph-diamond-dismiss-filled-20: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.88 1.88a3 3 0 0 1 4.24 0l6 6a3 3 0 0 1 0 4.24l-6 6a3 3 0 0 1-4.24 0l-6-6a3 3 0 0 1 0-4.24zM13.1 6.9a.5.5 0 0 0-.7 0L10 9.3 7.6 6.9a.5.5 0 0 0-.7.7L9.3 10l-2.4 2.4a.5.5 0 0 0 .7.7l2.4-2.4 2.4 2.4a.5.5 0 0 0 .7-.7L10.7 10l2.4-2.4a.5.5 0 0 0 0-.7'/%3E%3C/svg%3E");
  --ui-glyph-diamond-dismiss-filled-12: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.59 1.09a2 2 0 0 1 2.82 0l3.5 3.5a2 2 0 0 1 0 2.82l-3.5 3.5a2 2 0 0 1-2.82 0l-3.5-3.5a2 2 0 0 1 0-2.83zm3.26 3.06a.5.5 0 0 0-.7 0L6 5.29 4.85 4.15a.5.5 0 0 0-.7.7L5.29 6 4.15 7.15a.5.5 0 0 0 .7.7L6 6.71l1.15 1.14a.5.5 0 1 0 .7-.7L6.71 6l1.14-1.15a.5.5 0 0 0 0-.7'/%3E%3C/svg%3E");
  --ui-glyph-warning-filled-12: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.28 1.97a2 2 0 0 1 3.43 0l3 5A2 2 0 0 1 9 10H3A2 2 0 0 1 1.3 6.98zM6 6.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5M6 3.5a.5.5 0 0 0-.5.5v1.5a.5.5 0 0 0 1 0V4a.5.5 0 0 0-.5-.5'/%3E%3C/svg%3E");
  --ui-glyph-checkmark-circle-filled-12: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6a5 5 0 1 1 10 0A5 5 0 0 1 1 6m7.35-.9a.5.5 0 1 0-.7-.7L5.5 6.54 4.35 5.4a.5.5 0 1 0-.7.7l1.5 1.5c.2.2.5.2.7 0z'/%3E%3C/svg%3E");
}

/* ============================================================================ 1. Button */
/* Fluent Button / ToggleButton / MenuButton / SplitButton / CompoundButton (react-button useButtonStyles.styles.ts).
 * Heights 24 / 32 / 40px = padding + line-height (or 20/24px icon) + 1px borders. min-width 64 / 96 / 96px.
 * Medium: padding 5px 12px, 14/20 semibold, icon 20px, icon gap 6px. Small: 3px 8px, 12/16 regular, gap 4px.
 * Large: 8px 16px, 16/22 semibold, icon 24px. Radius borderRadiusMedium 4px (circular / square shapes).
 * Motion: background, border, color 100ms (durationFaster) curveEasyEase.
 * Focus (keyboard): 1px colorStrokeFocus2 border + 1px inset ring of the same colour = 2px inner ring; radius
 * 2 / 4 / 6px by size; primary adds shadow2 and a 2px inner colorNeutralForegroundOnBrand ring.
 * One primary button per view; put it first (left), secondary actions after it. */
.ui-button {
  --ui-button-bg: var(--colorNeutralBackground1);
  --ui-button-bg-hover: var(--colorNeutralBackground1Hover);
  --ui-button-bg-pressed: var(--colorNeutralBackground1Pressed);
  --ui-button-border: var(--colorNeutralStroke1);
  --ui-button-border-hover: var(--colorNeutralStroke1Hover);
  --ui-button-border-pressed: var(--colorNeutralStroke1Pressed);
  --ui-button-fg: var(--colorNeutralForeground1);
  --ui-button-fg-hover: var(--colorNeutralForeground1Hover);
  --ui-button-fg-pressed: var(--colorNeutralForeground1Pressed);
  --ui-button-icon: currentColor;
  --ui-button-icon-hover: currentColor;
  --ui-button-icon-pressed: currentColor;
  --ui-button-gap: var(--spacingHorizontalSNudge);
  --ui-button-icon-size: 20px;
  --ui-button-focus-radius: var(--borderRadiusMedium);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-button-gap);
  vertical-align: middle;
  box-sizing: border-box;
  min-width: 96px;
  margin: 0;
  padding: 5px var(--spacingHorizontalM); /* ui-audit-ignore: Fluent buttonSpacingMedium 5px */
  overflow: hidden;
  border: var(--strokeWidthThin) solid var(--ui-button-border);
  border-radius: var(--borderRadiusMedium);
  background-color: var(--ui-button-bg);
  color: var(--ui-button-fg);
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase300);
  font-weight: var(--fontWeightSemibold);
  line-height: var(--lineHeightBase300);
  text-align: center;
  text-decoration-line: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition-property: background, border, color;
  transition-duration: var(--durationFaster);
  transition-timing-function: var(--curveEasyEase);
}

/* Icon slot: any direct SVG / .ui-icon / .ui-button__icon. Fluent sizes it 20px (24px large). */
.ui-button > :is(svg, .ui-icon, .ui-button__icon):not(.ui-button__chevron) {
  width: var(--ui-button-icon-size);
  height: var(--ui-button-icon-size);
  flex-shrink: 0;
  color: var(--ui-button-icon);
}

.ui-button:not(:disabled, [aria-disabled="true"]):is(:hover, .is-hover) {
  background-color: var(--ui-button-bg-hover);
  border-color: var(--ui-button-border-hover);
  color: var(--ui-button-fg-hover);
  --ui-button-icon: var(--ui-button-icon-hover);
}

.ui-button:not(:disabled, [aria-disabled="true"]):is(:active, .is-active) {
  background-color: var(--ui-button-bg-pressed);
  border-color: var(--ui-button-border-pressed);
  color: var(--ui-button-fg-pressed);
  --ui-button-icon: var(--ui-button-icon-pressed);
}

.ui-button:is(:focus-visible, .is-focus) {
  z-index: 1;
  border-color: var(--colorStrokeFocus2);
  border-radius: var(--ui-button-focus-radius);
  box-shadow: 0 0 0 var(--strokeWidthThin) var(--colorStrokeFocus2) inset;
  outline: var(--strokeWidthThick) solid var(--colorTransparentStroke); /* becomes visible in forced colors */
  outline-offset: 0;
}

/* --- appearances ------------------------------------------------------------------------------------------------ */
/* primary: brand fill (light #0f6cbd / dark #115ea3), white text; the one main action of a view. */
.ui-button--primary {
  --ui-button-bg: var(--colorBrandBackground);
  --ui-button-bg-hover: var(--colorBrandBackgroundHover);
  --ui-button-bg-pressed: var(--colorBrandBackgroundPressed);
  --ui-button-border: transparent;
  --ui-button-border-hover: transparent;
  --ui-button-border-pressed: transparent;
  --ui-button-fg: var(--colorNeutralForegroundOnBrand);
  --ui-button-fg-hover: var(--colorNeutralForegroundOnBrand);
  --ui-button-fg-pressed: var(--colorNeutralForegroundOnBrand);
}
.ui-button--primary:is(:focus-visible, .is-focus) {
  box-shadow: var(--shadow2), 0 0 0 var(--strokeWidthThin) var(--colorStrokeFocus2) inset,
    0 0 0 var(--strokeWidthThick) var(--colorNeutralForegroundOnBrand) inset;
}
.ui-button--primary:is(:focus-visible, .is-focus):is(:hover, .is-hover) {
  box-shadow: var(--shadow2), 0 0 0 var(--strokeWidthThin) var(--colorStrokeFocus2) inset;
}

/* outline: transparent fill, neutral 1px border — many minor actions side by side. */
.ui-button--outline {
  --ui-button-bg: var(--colorTransparentBackground);
  --ui-button-bg-hover: var(--colorTransparentBackgroundHover);
  --ui-button-bg-pressed: var(--colorTransparentBackgroundPressed);
}

/* subtle: no fill/border at rest, neutral hover fill; icon turns brand and filled on hover (toolbars, card actions). */
.ui-button--subtle {
  --ui-button-bg: var(--colorSubtleBackground);
  --ui-button-bg-hover: var(--colorSubtleBackgroundHover);
  --ui-button-bg-pressed: var(--colorSubtleBackgroundPressed);
  --ui-button-border: transparent;
  --ui-button-border-hover: transparent;
  --ui-button-border-pressed: transparent;
  --ui-button-fg: var(--colorNeutralForeground2);
  --ui-button-fg-hover: var(--colorNeutralForeground2Hover);
  --ui-button-fg-pressed: var(--colorNeutralForeground2Pressed);
  --ui-button-icon-hover: var(--colorNeutralForeground2BrandHover);
  --ui-button-icon-pressed: var(--colorNeutralForeground2BrandPressed);
}

/* transparent: never filled; text and icon turn brand on hover (lowest emphasis, actions on coloured surfaces). */
.ui-button--transparent {
  --ui-button-bg: var(--colorTransparentBackground);
  --ui-button-bg-hover: var(--colorTransparentBackgroundHover);
  --ui-button-bg-pressed: var(--colorTransparentBackgroundPressed);
  --ui-button-border: transparent;
  --ui-button-border-hover: transparent;
  --ui-button-border-pressed: transparent;
  --ui-button-fg: var(--colorNeutralForeground2);
  --ui-button-fg-hover: var(--colorNeutralForeground2BrandHover);
  --ui-button-fg-pressed: var(--colorNeutralForeground2BrandPressed);
}

/* --- sizes -------------------------------------------------------------------------------------------------------- */
.ui-button--small {
  --ui-button-gap: var(--spacingHorizontalXS);
  --ui-button-focus-radius: var(--borderRadiusSmall);
  min-width: 64px;
  padding: 3px var(--spacingHorizontalS); /* ui-audit-ignore: Fluent buttonSpacingSmall 3px */
  font-size: var(--fontSizeBase200);
  font-weight: var(--fontWeightRegular);
  line-height: var(--lineHeightBase200);
}
.ui-button--small:has(> :is(svg, .ui-icon, .ui-button__icon)) {
  padding-block: 1px; /* buttonSpacingSmallWithIcon: 1 + 20 + 1 + 2 = 24px */
}
.ui-button--large {
  --ui-button-icon-size: 24px;
  --ui-button-focus-radius: var(--borderRadiusLarge);
  padding: var(--spacingVerticalS) var(--spacingHorizontalL);
  font-size: var(--fontSizeBase400);
  line-height: var(--lineHeightBase400);
}
.ui-button--large:has(> :is(svg, .ui-icon, .ui-button__icon)) {
  padding-block: 7px; /* ui-audit-ignore: buttonSpacingLargeWithIcon: 7 + 24 + 7 + 2 = 40px */
}

/* --- icon-only: square 24 / 32 / 40px. Always give it aria-label (and a tooltip with the same text). --------------- */
.ui-button--icon-only {
  min-width: 32px;
  max-width: 32px;
  padding: 5px; /* ui-audit-ignore: Fluent icon-only medium */
}
.ui-button--icon-only.ui-button--small {
  min-width: 24px;
  max-width: 24px;
  padding: 1px;
}
.ui-button--icon-only.ui-button--large {
  min-width: 40px;
  max-width: 40px;
  padding: 7px; /* ui-audit-ignore: Fluent icon-only large */
}

/* --- shapes ------------------------------------------------------------------------------------------------------- */
.ui-button--circular,
.ui-button--circular:is(:focus-visible, .is-focus) {
  border-radius: var(--borderRadiusCircular);
}
.ui-button--square,
.ui-button--square:is(:focus-visible, .is-focus) {
  border-radius: var(--borderRadiusNone);
}

/* --- bundled icons: regular at rest, filled on hover (subtle/transparent) and when checked or expanded ------------ */
.ui-button:is(.ui-button--subtle, .ui-button--transparent):not(:disabled, [aria-disabled="true"]):is(:hover, .is-hover) .ui-icon--filled,
.ui-button:is([aria-pressed="true"], [aria-expanded="true"]) .ui-icon--filled {
  display: inline-block;
}
.ui-button:is(.ui-button--subtle, .ui-button--transparent):not(:disabled, [aria-disabled="true"]):is(:hover, .is-hover) .ui-icon--regular,
.ui-button:is([aria-pressed="true"], [aria-expanded="true"]) .ui-icon--regular {
  display: none;
}

/* --- ToggleButton: aria-pressed="true". Fluent's isAccessible look (brand fill) so "on" never relies on a subtle
 *     grey shift alone. Subtle/transparent toggles (toolbars) keep Fluent's selected look + filled brand icon. ------- */
.ui-button[aria-pressed="true"] {
  --ui-button-bg: var(--colorBrandBackground);
  --ui-button-bg-hover: var(--colorBrandBackgroundHover);
  --ui-button-bg-pressed: var(--colorBrandBackgroundPressed);
  --ui-button-border: transparent;
  --ui-button-border-hover: transparent;
  --ui-button-border-pressed: transparent;
  --ui-button-fg: var(--colorNeutralForegroundOnBrand);
  --ui-button-fg-hover: var(--colorNeutralForegroundOnBrand);
  --ui-button-fg-pressed: var(--colorNeutralForegroundOnBrand);
  --ui-button-icon: currentColor;
  --ui-button-icon-hover: currentColor;
  --ui-button-icon-pressed: currentColor;
}
/* checked primary keeps an inner white stroke so it differs from an unchecked primary */
.ui-button--primary[aria-pressed="true"] {
  outline: var(--strokeWidthThin) solid var(--colorNeutralForegroundOnBrand);
  outline-offset: -3px;
}
.ui-button--primary[aria-pressed="true"]:is(:focus-visible, .is-focus) {
  outline-offset: -4px;
}
.ui-button:is(.ui-button--subtle, .ui-button--transparent)[aria-pressed="true"] {
  --ui-button-bg: var(--colorSubtleBackgroundSelected);
  --ui-button-bg-hover: var(--colorSubtleBackgroundHover);
  --ui-button-bg-pressed: var(--colorSubtleBackgroundPressed);
  --ui-button-fg: var(--colorNeutralForeground2Selected);
  --ui-button-fg-hover: var(--colorNeutralForeground2Hover);
  --ui-button-fg-pressed: var(--colorNeutralForeground2Pressed);
  --ui-button-icon: var(--colorNeutralForeground2BrandSelected);
  --ui-button-icon-hover: var(--colorNeutralForeground2BrandHover);
  --ui-button-icon-pressed: var(--colorNeutralForeground2BrandPressed);
}
.ui-button--transparent[aria-pressed="true"] {
  --ui-button-bg: var(--colorTransparentBackgroundSelected);
  --ui-button-bg-hover: var(--colorTransparentBackgroundHover);
  --ui-button-bg-pressed: var(--colorTransparentBackgroundPressed);
  --ui-button-fg: var(--colorNeutralForeground2BrandSelected);
  --ui-button-fg-hover: var(--colorNeutralForeground2BrandHover);
  --ui-button-fg-pressed: var(--colorNeutralForeground2BrandPressed);
}
/* Opt into Fluent's default (non-accessible) checked look: neutral selected fill. Pair it with an icon swap. */
.ui-button--neutral-toggle[aria-pressed="true"]:not(.ui-button--subtle, .ui-button--transparent, .ui-button--primary) {
  --ui-button-bg: var(--colorNeutralBackground1Selected);
  --ui-button-bg-hover: var(--colorNeutralBackground1Hover);
  --ui-button-bg-pressed: var(--colorNeutralBackground1Pressed);
  --ui-button-border: var(--colorNeutralStroke1);
  --ui-button-border-hover: var(--colorNeutralStroke1Hover);
  --ui-button-border-pressed: var(--colorNeutralStroke1Pressed);
  --ui-button-fg: var(--colorNeutralForeground1Selected);
  --ui-button-fg-hover: var(--colorNeutralForeground1Hover);
  --ui-button-fg-pressed: var(--colorNeutralForeground1Pressed);
}

/* --- MenuButton: aria-haspopup + aria-expanded="true" while its menu is open; trailing .ui-button__chevron -------- */
.ui-button[aria-expanded="true"] {
  --ui-button-bg: var(--colorNeutralBackground1Selected);
  --ui-button-border: var(--colorNeutralStroke1Selected);
  --ui-button-fg: var(--colorNeutralForeground1Selected);
}
.ui-button--primary[aria-expanded="true"] {
  --ui-button-bg: var(--colorBrandBackgroundSelected);
  --ui-button-border: transparent;
  --ui-button-fg: var(--colorNeutralForegroundOnBrand);
}
.ui-button--outline[aria-expanded="true"] {
  --ui-button-bg: var(--colorTransparentBackgroundSelected);
  border-width: var(--strokeWidthThicker);
  padding-block: 3px; /* ui-audit-ignore: keeps 32px height with the 3px expanded border (recommendation) */
}
.ui-button--subtle[aria-expanded="true"] {
  --ui-button-bg: var(--colorSubtleBackgroundSelected);
  --ui-button-border: transparent;
  --ui-button-fg: var(--colorNeutralForeground2Selected);
  --ui-button-icon: var(--colorNeutralForeground2BrandSelected);
}
.ui-button--transparent[aria-expanded="true"] {
  --ui-button-bg: var(--colorTransparentBackgroundSelected);
  --ui-button-border: transparent;
  --ui-button-fg: var(--colorNeutralForeground2BrandSelected);
}

/* Chevron: an <svg class="ui-icon ui-button__chevron"> or an empty <span class="ui-button__chevron"> (draws
 * ChevronDownRegular). 12px (16px large); 4px from the label (Fluent menuIcon margin). */
.ui-button__chevron {
  display: inline-block;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin-inline-start: calc(var(--spacingHorizontalXS) - var(--ui-button-gap));
}
.ui-button__chevron:empty {
  background-color: currentColor;
  -webkit-mask: var(--ui-glyph-chevron-down-regular-20) center / 100% 100% no-repeat;
  mask: var(--ui-glyph-chevron-down-regular-20) center / 100% 100% no-repeat;
}
.ui-button--large .ui-button__chevron {
  width: 16px;
  height: 16px;
}
.ui-button--icon-only .ui-button__chevron {
  margin-inline-start: 0;
}

/* --- SplitButton: <div class="ui-split-button"> primary action button + chevron-only menu button ----------------- */
.ui-split-button {
  position: relative;
  display: inline-flex;
  justify-content: stretch;
  vertical-align: middle;
}
.ui-split-button > .ui-button:first-child,
.ui-split-button > .ui-button:first-child:is(:focus-visible, .is-focus) {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
.ui-split-button > .ui-button:nth-child(2),
.ui-split-button > .ui-button:nth-child(2):is(:focus-visible, .is-focus) {
  min-width: 24px; /* MIN_TARGET_SIZE (WCAG 2.5.8) */
  border-inline-start-width: 0;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}
.ui-split-button > .ui-button:nth-child(2) {
  padding-inline: 5px; /* ui-audit-ignore: icon-only MenuButton padding */
}
.ui-split-button > .ui-button--small:nth-child(2) { padding-inline: 1px; }
.ui-split-button > .ui-button--large:nth-child(2) { padding-inline: 7px; } /* ui-audit-ignore */
/* the seam = the action half's end border */
.ui-split-button > .ui-button--primary:first-child:not(:focus-visible, .is-focus) {
  border-inline-end-color: var(--colorNeutralStrokeOnBrand);
}
.ui-split-button > .ui-button:is(.ui-button--subtle, .ui-button--transparent):first-child:not(:focus-visible, .is-focus) {
  border-inline-end-color: transparent;
}
.ui-split-button > .ui-button:first-child:is(:disabled, [aria-disabled="true"]) {
  border-inline-end-color: var(--colorNeutralStrokeDisabled);
}

/* --- CompoundButton: icon (40px) + title + secondary line ------------------------------------------------------- */
/* Padding small 8 8 10 8, medium 14 12 16 12, large 18 16 20 16; height auto (medium text-only 64px). */
.ui-button--compound {
  --ui-button-gap: var(--spacingHorizontalM);
  --ui-button-icon-size: 40px;
  justify-content: flex-start;
  padding: 14px var(--spacingHorizontalM) var(--spacingVerticalL); /* ui-audit-ignore: Fluent compound 14px */
  text-align: start;
}
.ui-button--compound.ui-button--small {
  padding: var(--spacingVerticalS) var(--spacingHorizontalS) var(--spacingVerticalMNudge);
  font-size: var(--fontSizeBase300);
  line-height: var(--lineHeightBase300);
}
.ui-button--compound.ui-button--large {
  padding: 18px var(--spacingHorizontalL) var(--spacingVerticalXL); /* ui-audit-ignore: Fluent compound 18px */
}
.ui-button--compound.ui-button--icon-only {
  max-width: none;
}
.ui-button__content {
  display: flex;
  flex-direction: column;
  text-align: start;
}
.ui-button__secondary {
  font-size: var(--fontSizeBase200);
  font-weight: var(--fontWeightRegular);
  line-height: 100%;
  color: var(--colorNeutralForeground2);
}
.ui-button--large .ui-button__secondary {
  font-size: var(--fontSizeBase300);
}
.ui-button--compound:not(:disabled, [aria-disabled="true"]):is(:hover, .is-hover) .ui-button__secondary {
  color: var(--colorNeutralForeground2Hover);
}
.ui-button--compound:not(:disabled, [aria-disabled="true"]):is(:active, .is-active) .ui-button__secondary {
  color: var(--colorNeutralForeground2Pressed);
}
.ui-button--compound.ui-button--primary .ui-button__secondary,
.ui-button--compound[aria-pressed="true"] .ui-button__secondary {
  color: var(--colorNeutralForegroundOnBrand);
}
.ui-button--compound.ui-button--transparent:not(:disabled, [aria-disabled="true"]):is(:hover, .is-hover) .ui-button__secondary {
  color: var(--colorNeutralForeground2BrandHover);
}

/* --- disabled (native [disabled] removes it from the tab order; aria-disabled keeps it focusable) --------------- */
.ui-button:is(:disabled, [aria-disabled="true"]) {
  --ui-button-icon: currentColor;
  background-color: var(--colorNeutralBackgroundDisabled);
  border-color: var(--colorNeutralStrokeDisabled);
  color: var(--colorNeutralForegroundDisabled);
  cursor: not-allowed;
}
.ui-button:is(.ui-button--outline, .ui-button--subtle, .ui-button--transparent):is(:disabled, [aria-disabled="true"]) {
  background-color: var(--colorTransparentBackground);
}
.ui-button:is(.ui-button--primary, .ui-button--subtle, .ui-button--transparent):is(:disabled, [aria-disabled="true"]) {
  border-color: transparent;
}
.ui-button:is(:disabled, [aria-disabled="true"]) .ui-button__secondary {
  color: var(--colorNeutralForegroundDisabled);
}

/* ============================================================================ 2. Link */
/* Fluent Link (react-link useLinkStyles.styles.ts). colorBrandForegroundLink light #115ea3 / dark #479ef5;
 * underline on hover/pressed only, unless .ui-link--inline (always underline next to body text — required by
 * Fluent's link a11y rule). Keyboard focus = DOUBLE underline in colorStrokeFocus2 (no box ring).
 * <a href> inherits the surrounding font size; a <button class="ui-link"> is 14px. */
.ui-link {
  display: inline;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: none;
  background-color: transparent;
  color: var(--colorBrandForegroundLink);
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase300);
  font-weight: var(--fontWeightRegular);
  text-align: start;
  text-decoration-line: none;
  text-decoration-thickness: var(--strokeWidthThin);
  text-underline-offset: auto;
  overflow: inherit;
  text-overflow: inherit;
  user-select: text;
  cursor: pointer;
}
a.ui-link[href] {
  font-size: inherit;
}
.ui-link:is(:hover, .is-hover) {
  color: var(--colorBrandForegroundLinkHover);
  text-decoration-line: underline;
}
.ui-link:is(:active, .is-active) {
  color: var(--colorBrandForegroundLinkPressed);
  text-decoration-line: underline;
}
.ui-link:is(:focus-visible, .is-focus) {
  outline-style: none;
  text-decoration-line: underline;
  text-decoration-style: double;
  text-decoration-color: var(--colorStrokeFocus2);
}
.ui-link--inline {
  text-decoration-line: underline;
}
.ui-link--subtle {
  color: var(--colorNeutralForeground2Link);
}
.ui-link--subtle:is(:hover, .is-hover) {
  color: var(--colorNeutralForeground2LinkHover);
}
.ui-link--subtle:is(:active, .is-active) {
  color: var(--colorNeutralForeground2LinkPressed);
}
.ui-link > .ui-icon {
  margin-inline-start: var(--spacingHorizontalXXS);
  vertical-align: -0.2em;
}
.ui-link:is(:disabled, [aria-disabled="true"]),
.ui-link:is(:disabled, [aria-disabled="true"]):is(:hover, :active) {
  color: var(--colorNeutralForegroundDisabled);
  text-decoration-line: none;
  cursor: not-allowed;
}

/* ============================================================================ 3. Input family */
/* Fluent Input / Textarea / Select / SearchBox (react-input, react-textarea, react-select, react-search styles).
 * Shared geometry: heights 24 / 32 / 40px; text 12/16, 14/20, 16/22; text inset 8 / 12 / 18px; icons 16 / 20 / 24px;
 * radius 4px; 1px colorNeutralStroke1 border with a darker colorNeutralStrokeAccessible bottom (3:1 boundary);
 * focus = 2px colorCompoundBrandStroke bar that grows from the centre (scaleX 0→1, in 200ms curveDecelerateMid,
 * out 50ms curveAccelerateMid); invalid = colorPaletteRedBorder2 border; disabled = transparent fill,
 * colorNeutralStrokeDisabled border, colorNeutralForegroundDisabled text. Placeholder colorNeutralForeground4.
 * Appearances: outline (default) · underline (dense/inline) · filled-darker (on Background1 surfaces) ·
 * filled-lighter (on Background2/3 surfaces). A filled field needs 3:1 against its surface.
 * Markup: <span class="ui-input"><input …></span> — the wrapper draws border + focus bar; label it with .ui-field. */
.ui-input,
.ui-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--spacingHorizontalXXS);
  box-sizing: border-box;
  min-height: 32px;
  padding: 0;
  vertical-align: middle;
  border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
  border-bottom-color: var(--colorNeutralStrokeAccessible);
  border-radius: var(--borderRadiusMedium);
  background-color: var(--colorNeutralBackground1);
  color: var(--colorNeutralForeground1);
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase300);
  font-weight: var(--fontWeightRegular);
  line-height: var(--lineHeightBase300);
}

.ui-input > :is(input, textarea),
.ui-search > input {
  align-self: stretch;
  flex-grow: 1;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0 var(--spacingHorizontalM);
  border: none;
  border-radius: inherit;
  outline: none;
  background-color: transparent;
  color: var(--colorNeutralForeground1);
  font: inherit;
}
.ui-input > input:focus-visible,
.ui-search > input:focus-visible,
.ui-textarea > textarea:focus-visible,
.ui-select > select:focus-visible {
  outline: none; /* the brand bottom bar is the focus indicator */
}

:is(.ui-input, .ui-search, .ui-textarea) :is(input, textarea)::placeholder {
  color: var(--colorNeutralForeground4);
  opacity: 1;
}

/* The animated focus bar: 2px brand line on the bottom edge, square-clipped inside the 4px radius. */
.ui-input::after,
.ui-search::after,
.ui-textarea::after {
  content: "";
  position: absolute;
  inset-inline: -1px;
  bottom: -1px;
  box-sizing: border-box;
  height: max(var(--strokeWidthThick), var(--borderRadiusMedium));
  border-bottom: var(--strokeWidthThick) solid var(--colorCompoundBrandStroke);
  border-end-start-radius: var(--borderRadiusMedium);
  border-end-end-radius: var(--borderRadiusMedium);
  clip-path: inset(calc(100% - var(--strokeWidthThick)) 0 0 0);
  transform: scaleX(0);
  transition: transform var(--durationUltraFast) var(--curveAccelerateMid);
  pointer-events: none;
}
.ui-input:is(:focus-within, .is-focus)::after,
.ui-search:is(:focus-within, .is-focus)::after,
.ui-textarea:is(:focus-within, .is-focus)::after {
  transform: scaleX(1);
  transition: transform var(--durationNormal) var(--curveDecelerateMid);
}
.ui-input:focus-within:active::after,
.ui-search:focus-within:active::after,
.ui-textarea:focus-within:active::after {
  border-bottom-color: var(--colorCompoundBrandStrokePressed);
}

.ui-input:is(:hover, .is-hover),
.ui-search:is(:hover, .is-hover) {
  border-color: var(--colorNeutralStroke1Hover);
  border-bottom-color: var(--colorNeutralStrokeAccessibleHover);
}
.ui-input:is(:active, :focus-within, .is-focus),
.ui-search:is(:active, :focus-within, .is-focus) {
  border-color: var(--colorNeutralStroke1Pressed);
  border-bottom-color: var(--colorNeutralStrokeAccessiblePressed);
}
.ui-input:focus-within,
.ui-search:focus-within,
.ui-textarea:focus-within {
  outline: var(--strokeWidthThick) solid transparent; /* visible only in forced colors */
}

/* contentBefore / contentAfter: icons, prefixes ($), suffixes (.00), small transparent buttons. colorNeutralForeground3. */
.ui-input__content {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  color: var(--colorNeutralForeground3);
}
.ui-input__content > :is(svg, .ui-icon) {
  width: 20px;
  height: 20px;
}
.ui-input:has(> .ui-input__content:first-child) {
  padding-inline-start: var(--spacingHorizontalMNudge);
}
.ui-input:has(> .ui-input__content:first-child) > :is(input, textarea) {
  padding-inline-start: var(--spacingHorizontalXXS);
}
.ui-input:has(> .ui-input__content:last-child) {
  padding-inline-end: var(--spacingHorizontalMNudge);
}
.ui-input:has(> .ui-input__content:last-child) > :is(input, textarea) {
  padding-inline-end: var(--spacingHorizontalXXS);
}

/* sizes */
.ui-input--small,
.ui-search--small {
  min-height: 24px;
  font-size: var(--fontSizeBase200);
  line-height: var(--lineHeightBase200);
}
.ui-input--small > input {
  padding-inline: var(--spacingHorizontalS);
}
.ui-input--small > .ui-input__content > :is(svg, .ui-icon) {
  width: 16px;
  height: 16px;
}
.ui-input--small:has(> .ui-input__content:first-child) { padding-inline-start: var(--spacingHorizontalSNudge); }
.ui-input--small:has(> .ui-input__content:last-child) { padding-inline-end: var(--spacingHorizontalSNudge); }
.ui-input--large,
.ui-search--large {
  min-height: 40px;
  gap: var(--spacingHorizontalSNudge);
  font-size: var(--fontSizeBase400);
  line-height: var(--lineHeightBase400);
}
.ui-input--large > input {
  padding-inline: calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge)); /* 18px */
}
.ui-input--large > .ui-input__content > :is(svg, .ui-icon) {
  width: 24px;
  height: 24px;
}
.ui-input--large:has(> .ui-input__content:first-child) { padding-inline-start: var(--spacingHorizontalM); }
.ui-input--large:has(> .ui-input__content:first-child) > input { padding-inline-start: var(--spacingHorizontalSNudge); }
.ui-input--large:has(> .ui-input__content:last-child) { padding-inline-end: var(--spacingHorizontalM); }
.ui-input--large:has(> .ui-input__content:last-child) > input { padding-inline-end: var(--spacingHorizontalSNudge); }

/* appearances */
:is(.ui-input--underline, .ui-search--underline) {
  border-radius: var(--borderRadiusNone);
  border-top-color: transparent;
  border-inline-color: transparent;
  background-color: var(--colorTransparentBackground);
}
:is(.ui-input--underline, .ui-search--underline):is(:hover, :active, :focus-within, .is-hover, .is-focus) {
  border-top-color: transparent;
  border-inline-color: transparent;
}
:is(.ui-input--underline, .ui-search--underline)::after {
  inset-inline: 0;
  border-radius: 0;
}
:is(.ui-input--filled-darker, .ui-search--filled-darker, .ui-textarea--filled-darker) {
  background-color: var(--colorNeutralBackground3);
}
:is(.ui-input--filled-lighter, .ui-search--filled-lighter, .ui-textarea--filled-lighter) {
  background-color: var(--colorNeutralBackground1);
}
:is(.ui-input--filled-darker, .ui-search--filled-darker, .ui-textarea--filled-darker,
    .ui-input--filled-lighter, .ui-search--filled-lighter, .ui-textarea--filled-lighter) {
  border-color: var(--colorTransparentStroke);
}
:is(.ui-input--filled-darker, .ui-search--filled-darker, .ui-textarea--filled-darker,
    .ui-input--filled-lighter, .ui-search--filled-lighter, .ui-textarea--filled-lighter):is(:hover, :active, :focus-within, .is-hover, .is-focus) {
  border-color: var(--colorTransparentStrokeInteractive);
}

/* invalid: aria-invalid="true" on the control (or a .ui-field--error parent). Red border while not focused. */
:is(.ui-input, .ui-search, .ui-textarea):has(> [aria-invalid="true"]):not(:focus-within),
.ui-field--error :is(.ui-input, .ui-search, .ui-textarea):not(:focus-within) {
  border-color: var(--colorPaletteRedBorder2);
}
:is(.ui-input--underline, .ui-search--underline):has(> [aria-invalid="true"]):not(:focus-within),
.ui-field--error :is(.ui-input--underline, .ui-search--underline):not(:focus-within) {
  border-top-color: transparent;
  border-inline-color: transparent;
}

/* disabled */
:is(.ui-input, .ui-search, .ui-textarea):has(> :disabled),
:is(.ui-input, .ui-search, .ui-textarea):has(> :disabled):hover {
  border-color: var(--colorNeutralStrokeDisabled);
  background-color: var(--colorTransparentBackground);
  color: var(--colorNeutralForegroundDisabled);
  cursor: not-allowed;
}
:is(.ui-input--underline, .ui-search--underline):has(> :disabled) {
  border-top-color: transparent;
  border-inline-color: transparent;
}
:is(.ui-input, .ui-search, .ui-textarea):has(> :disabled)::after {
  content: none;
}
:is(.ui-input, .ui-search, .ui-textarea) > :disabled,
:is(.ui-input, .ui-search, .ui-textarea) > :disabled::placeholder,
.ui-input:has(> :disabled) > .ui-input__content {
  color: var(--colorNeutralForegroundDisabled);
  cursor: not-allowed;
}

/* --- Textarea: <span class="ui-textarea"><textarea></textarea></span> ----------------------------------------------
 * min-height 40 / 52 / 64px, max-height 200 / 260 / 320px (scrolls beyond), padding 4px 8px / 6px 12px / 8px 14px.
 * Not resizable by default (the resize handle has no keyboard equivalent): size it for the expected content. */
.ui-textarea {
  position: relative;
  display: inline-flex;
  box-sizing: border-box;
  margin: 0;
  padding: 0 0 var(--strokeWidthThick) 0; /* keeps the focus bar off the resize handle */
  vertical-align: top;
  border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
  border-bottom-color: var(--colorNeutralStrokeAccessible);
  border-radius: var(--borderRadiusMedium);
  background-color: var(--colorNeutralBackground1);
  color: var(--colorNeutralForeground1);
}
.ui-textarea > textarea {
  flex-grow: 1;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 52px;
  max-height: 260px;
  margin: 0;
  padding: var(--spacingVerticalSNudge) calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));
  border: none;
  outline: none;
  background-color: transparent;
  color: var(--colorNeutralForeground1);
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase300);
  font-weight: var(--fontWeightRegular);
  line-height: var(--lineHeightBase300);
  resize: none;
}
.ui-textarea:is(:hover, .is-hover) {
  border-color: var(--colorNeutralStroke1Hover);
  border-bottom-color: var(--colorNeutralStrokeAccessibleHover);
}
.ui-textarea:active {
  border-color: var(--colorNeutralStroke1Pressed);
  border-bottom-color: var(--colorNeutralStrokeAccessiblePressed);
}
.ui-textarea:is(:focus-within, .is-focus) {
  border-color: var(--colorNeutralStroke1Pressed);
  border-bottom-color: var(--colorCompoundBrandStroke);
}
.ui-textarea--small > textarea {
  min-height: 40px;
  max-height: 200px;
  padding: var(--spacingVerticalXS) calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));
  font-size: var(--fontSizeBase200);
  line-height: var(--lineHeightBase200);
}
.ui-textarea--large > textarea {
  min-height: 64px;
  max-height: 320px;
  padding: var(--spacingVerticalS) calc(var(--spacingHorizontalM) + var(--spacingHorizontalXXS));
  font-size: var(--fontSizeBase400);
  line-height: var(--lineHeightBase400);
}

/* --- Select (native): <span class="ui-select"><select>…</select></span> ---------------------------------------------
 * Native list = best a11y and mobile pickers; use it for one choice from 4+ simple options. Height 24 / 32 / 40px;
 * padding-inline 8|26, 12|34, 18|48px (end padding leaves room for the chevron); ChevronDownRegular 16 / 20 / 24px
 * in colorNeutralStrokeAccessible, 6 / 10 / 12px from the end. Root is a block-level flex row like Fluent's. */
.ui-select {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  box-sizing: border-box;
  font-family: var(--fontFamilyBase);
  color: var(--colorNeutralForeground1);
}
.ui-select > select {
  -webkit-appearance: none;
  appearance: none;
  flex-grow: 1;
  box-sizing: border-box;
  max-width: 100%;
  height: 32px;
  margin: 0;
  padding: 0 calc(var(--spacingHorizontalMNudge) + 20px + var(--spacingHorizontalXXS) * 2) 0 calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));
  border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
  border-bottom-color: var(--colorNeutralStrokeAccessible);
  border-radius: var(--borderRadiusMedium);
  background-color: var(--colorNeutralBackground1);
  box-shadow: none;
  color: var(--colorNeutralForeground1);
  font-family: inherit;
  font-size: var(--fontSizeBase300);
  line-height: var(--lineHeightBase300);
  cursor: pointer;
}
.ui-select > select option {
  background-color: var(--colorNeutralBackground1);
  color: var(--colorNeutralForeground1);
}
/* chevron */
.ui-select::before {
  content: "";
  position: absolute;
  inset-inline-end: var(--spacingHorizontalMNudge);
  width: 20px;
  height: 20px;
  background-color: var(--colorNeutralStrokeAccessible);
  -webkit-mask: var(--ui-glyph-chevron-down-regular-20) center / 100% 100% no-repeat;
  mask: var(--ui-glyph-chevron-down-regular-20) center / 100% 100% no-repeat;
  pointer-events: none;
}
/* focus bar: 4px box, lower half brand = 2px bar */
.ui-select::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  box-sizing: border-box;
  height: var(--borderRadiusMedium);
  border-radius: 0 0 var(--borderRadiusMedium) var(--borderRadiusMedium);
  background-image: linear-gradient(0deg, var(--colorCompoundBrandStroke) 0%, var(--colorCompoundBrandStroke) 50%, transparent 50%, transparent 100%);
  transform: scaleX(0);
  transition: transform var(--durationUltraFast) var(--curveAccelerateMid);
  pointer-events: none;
}
.ui-select:is(:focus-within, .is-focus)::after {
  transform: scaleX(1);
  transition: transform var(--durationNormal) var(--curveDecelerateMid);
}
.ui-select > select:is(:hover, .is-hover) {
  border-color: var(--colorNeutralStroke1Hover);
  border-bottom-color: var(--colorNeutralStrokeAccessible);
}
.ui-select > select:active {
  border-color: var(--colorNeutralStroke1Pressed);
  border-bottom-color: var(--colorNeutralStrokeAccessible);
}
.ui-select > select:focus {
  outline: var(--strokeWidthThick) solid transparent;
}
.ui-select > select[aria-invalid="true"]:not(:focus),
.ui-field--error .ui-select > select:not(:focus) {
  border-color: var(--colorPaletteRedBorder2);
}
.ui-select > select:disabled {
  border-color: var(--colorNeutralStrokeDisabled);
  background-color: var(--colorTransparentBackground);
  color: var(--colorNeutralForegroundDisabled);
  cursor: not-allowed;
}
.ui-select:has(> select:disabled)::before {
  background-color: var(--colorNeutralForegroundDisabled);
}
.ui-select:has(> select:disabled)::after {
  content: none;
}
.ui-select--small > select {
  height: 24px;
  padding: 0 calc(var(--spacingHorizontalSNudge) + 16px + var(--spacingHorizontalXXS) * 2) 0 calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));
  font-size: var(--fontSizeBase200);
  line-height: var(--lineHeightBase200);
}
.ui-select--small::before {
  inset-inline-end: var(--spacingHorizontalSNudge);
  width: 16px;
  height: 16px;
}
.ui-select--large > select {
  height: 40px;
  padding: 0 calc(var(--spacingHorizontalM) + 24px + var(--spacingHorizontalSNudge) * 2) 0 calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));
  font-size: var(--fontSizeBase400);
  line-height: var(--lineHeightBase400);
}
.ui-select--large::before {
  inset-inline-end: var(--spacingHorizontalM);
  width: 24px;
  height: 24px;
}
.ui-select--underline > select {
  border-color: transparent;
  border-bottom-color: var(--colorNeutralStrokeAccessible);
  border-radius: var(--borderRadiusNone);
  background-color: var(--colorTransparentBackground);
}
.ui-select--underline > select:disabled {
  border-color: var(--colorTransparentStrokeDisabled);
  border-bottom-color: var(--colorNeutralStrokeDisabled);
}
.ui-select--underline::after {
  border-radius: 0;
}
.ui-select--filled-darker > select {
  border-color: transparent;
  background-color: var(--colorNeutralBackground3);
}
.ui-select--filled-lighter > select {
  border-color: transparent;
  background-color: var(--colorNeutralBackground1);
}

/* --- SearchBox: <span class="ui-search"><input type="search" placeholder="Search" aria-label="Search">
 *     <button class="ui-search__clear" type="button" tabindex="-1" aria-label="Clear search"></button></span>
 * Input styles + magnifier (SearchRegular, colorNeutralForeground3) before the text; the clear (X) appears only
 * when there is text (give the input a placeholder so :placeholder-shown can detect "empty"). max-width 468px.
 * Wrap the app's primary search in role="search". */
.ui-search {
  max-width: 468px;
  column-gap: 0;
  padding-inline: var(--spacingHorizontalS);
}
.ui-search::before {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-color: var(--colorNeutralForeground3);
  -webkit-mask: var(--ui-glyph-search-regular-20) center / 100% 100% no-repeat;
  mask: var(--ui-glyph-search-regular-20) center / 100% 100% no-repeat;
}
.ui-search > input {
  padding-inline: var(--spacingHorizontalSNudge) var(--spacingHorizontalS);
}
.ui-search > input::-webkit-search-decoration,
.ui-search > input::-webkit-search-cancel-button {
  display: none;
  -webkit-appearance: none;
}
.ui-search__clear {
  display: inline-flex;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  margin: 0;
  margin-inline-start: var(--spacingHorizontalM);
  padding: 0;
  border: none;
  border-radius: var(--borderRadiusSmall);
  background-color: var(--colorNeutralForeground3);
  -webkit-mask: var(--ui-glyph-dismiss-regular-20) center / 100% 100% no-repeat;
  mask: var(--ui-glyph-dismiss-regular-20) center / 100% 100% no-repeat;
  cursor: pointer;
}
.ui-search:has(> input:placeholder-shown) > .ui-search__clear {
  display: none;
}
.ui-search:has(> input:not(:placeholder-shown)) > input {
  padding-inline-end: 0;
}
.ui-search--small {
  padding-inline: var(--spacingHorizontalSNudge);
}
.ui-search--small::before,
.ui-search--small > .ui-search__clear {
  width: 16px;
  height: 16px;
}
.ui-search--large {
  padding-inline: var(--spacingHorizontalMNudge);
}
.ui-search--large::before,
.ui-search--large > .ui-search__clear {
  width: 24px;
  height: 24px;
}
.ui-search--large > input {
  padding-inline-end: var(--spacingHorizontalMNudge);
}
.ui-search:has(> :disabled)::before,
.ui-search:has(> :disabled) > .ui-search__clear {
  background-color: var(--colorNeutralForegroundDisabled);
}

/* ============================================================================ 4. Field & Label */
/* Fluent Field (react-field useFieldStyles.styles.ts) + Label (react-label). One control per field.
 * Label 14/20 regular colorNeutralForeground1, padding 2px 0, 2px below (large: 1px 0 / 4px, 16/22 semibold).
 * Hint and validation message: caption1 12/16, colorNeutralForeground3, 2px above. Error text
 * colorPaletteRedForeground1 (light #bc2f32 / dark #e37d80). Message icons 12px in a 16px hanging gutter:
 * error DiamondDismiss12Filled (red), warning Warning12Filled (colorPaletteDarkOrangeForeground1),
 * success CheckmarkCircle12Filled (colorPaletteGreenForeground1). Only error recolours the control border.
 * Give error/warning messages role="alert"; connect hint + message with aria-describedby. Don't show a hint
 * and a validation message at the same time. Required = red asterisk (aria-hidden) + native `required`. */
.ui-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  min-width: 0;
}
.ui-field > .ui-checkbox,
.ui-field > .ui-radio,
.ui-field > .ui-switch,
.ui-field > .ui-radio-group {
  justify-self: start;
}

.ui-label,
.ui-field__label {
  color: var(--colorNeutralForeground1);
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase300);
  font-weight: var(--fontWeightRegular);
  line-height: var(--lineHeightBase300);
}
.ui-field__label {
  justify-self: start;
  max-width: max-content;
  padding: var(--spacingVerticalXXS) 0;
  margin-bottom: var(--spacingVerticalXXS);
}
.ui-label__required {
  padding-inline-start: var(--spacingHorizontalXS);
  color: var(--colorPaletteRedForeground3);
}
.ui-label--small,
.ui-field--small .ui-field__label {
  font-size: var(--fontSizeBase200);
  line-height: var(--lineHeightBase200);
}
.ui-label--large,
.ui-field--large .ui-field__label {
  font-size: var(--fontSizeBase400);
  font-weight: var(--fontWeightSemibold);
  line-height: var(--lineHeightBase400);
}
.ui-field--large .ui-field__label {
  padding: 1px 0;
  margin-bottom: var(--spacingVerticalXS);
}
.ui-label--semibold {
  font-weight: var(--fontWeightSemibold);
}
.ui-label--disabled,
.ui-label--disabled .ui-label__required {
  color: var(--colorNeutralForegroundDisabled);
}

.ui-field__hint,
.ui-field__message {
  margin-top: var(--spacingVerticalXXS);
  color: var(--colorNeutralForeground3);
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase200);
  font-weight: var(--fontWeightRegular);
  line-height: var(--lineHeightBase200);
}
.ui-field--error .ui-field__message {
  color: var(--colorPaletteRedForeground1);
}
:is(.ui-field--error, .ui-field--warning, .ui-field--success) .ui-field__message {
  padding-inline-start: calc(12px + var(--spacingHorizontalXS));
}
:is(.ui-field--error, .ui-field--warning, .ui-field--success) .ui-field__message::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-inline: calc(-12px - var(--spacingHorizontalXS)) var(--spacingHorizontalXS);
  vertical-align: -1px;
  background-color: currentColor;
  -webkit-mask: var(--ui-glyph-diamond-dismiss-filled-12) center / 100% 100% no-repeat;
  mask: var(--ui-glyph-diamond-dismiss-filled-12) center / 100% 100% no-repeat;
}
.ui-field--warning .ui-field__message::before {
  background-color: var(--colorPaletteDarkOrangeForeground1);
  -webkit-mask-image: var(--ui-glyph-warning-filled-12);
  mask-image: var(--ui-glyph-warning-filled-12);
}
.ui-field--success .ui-field__message::before {
  background-color: var(--colorPaletteGreenForeground1);
  -webkit-mask-image: var(--ui-glyph-checkmark-circle-filled-12);
  mask-image: var(--ui-glyph-checkmark-circle-filled-12);
}

/* horizontal: label in a 33% column (only when space is tight and fields are uniform) */
.ui-field--horizontal {
  grid-template-columns: 33% minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr;
}
.ui-field--horizontal > .ui-field__label {
  grid-row: 1 / -1;
  margin: 0;
  margin-inline-end: var(--spacingHorizontalM);
  padding: var(--spacingVerticalSNudge) 0;
}
.ui-field--horizontal > :not(.ui-field__label) {
  grid-column: 2;
}
.ui-field--horizontal.ui-field--small > .ui-field__label { padding: var(--spacingVerticalXS) 0; }
.ui-field--horizontal.ui-field--large > .ui-field__label { padding: 9px 0; } /* ui-audit-ignore: centres 22px text in 40px */

/* ============================================================================ 5. Choice controls */
/* Checkbox / Radio / Switch as <label> wrappers around the native input (native semantics, Space toggles):
 *   <label class="ui-checkbox"><input type="checkbox" name="news"> Send me product updates</label>
 * The input stays in the DOM (opacity 0) over the indicator; the indicator and glyph are the label's ::before/::after.
 * Rich label text (links, <strong>) flows normally and wraps with a hanging indent.
 * Label-less controls (table selection): put the name on the input (aria-label/aria-labelledby) → 32×32px target.
 * Shared (Fluent): 8px margin around the indicator, 4px label inset, 32px row (36px for the medium Switch);
 * unchecked border colorNeutralStrokeAccessible → Hover → Pressed; checked colorCompoundBrandBackground/Stroke;
 * label colour Foreground3 → 2 (hover) → 1 (pressed/checked) for Checkbox and Radio; focus = 2px colorStrokeFocus2
 * ring around the whole control. Group them with role="group"/"radiogroup" + a visible group label. */
.ui-checkbox,
.ui-radio,
.ui-switch {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  min-width: 32px;
  min-height: 32px;
  padding: var(--spacingVerticalSNudge) var(--spacingHorizontalS) var(--spacingVerticalSNudge) calc(var(--spacingHorizontalS) * 2 + 16px + var(--spacingHorizontalXS));
  vertical-align: middle;
  color: var(--colorNeutralForeground3);
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase300);
  font-weight: var(--fontWeightRegular);
  line-height: var(--lineHeightBase300);
  text-align: start;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ui-checkbox > input,
.ui-radio > input,
.ui-switch > input {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 1;
  box-sizing: border-box;
  width: calc(16px + var(--spacingHorizontalS) * 2); /* hit area = indicator + margins */
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}
/* label-less: name comes from aria-label → just the 32×32 indicator target */
:is(.ui-checkbox, .ui-radio):has(> input:is([aria-label], [aria-labelledby])) {
  padding-inline: calc(var(--spacingHorizontalS) * 2 + 16px) 0;
}
:is(.ui-checkbox, .ui-radio, .ui-switch):has(> input:focus-visible),
:is(.ui-checkbox, .ui-radio, .ui-switch).is-focus {
  outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
  outline-offset: 0;
  border-radius: var(--borderRadiusMedium);
}
:is(.ui-checkbox, .ui-radio, .ui-switch):has(> input:disabled) {
  color: var(--colorNeutralForegroundDisabled);
  cursor: default;
}

/* --- Checkbox: 16px box (20px large), radius 2px, Checkmark12Filled / Square12Filled (mixed) ---------------------- */
.ui-checkbox {
  --ui-checkbox-border: var(--colorNeutralStrokeAccessible);
  --ui-checkbox-fill: transparent;
  --ui-checkbox-glyph: var(--colorNeutralForegroundInverted);
}
.ui-checkbox::before {
  content: "";
  position: absolute;
  top: var(--spacingVerticalS);
  inset-inline-start: var(--spacingHorizontalS);
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border: var(--strokeWidthThin) solid var(--ui-checkbox-border);
  border-radius: var(--borderRadiusSmall);
  background-color: var(--ui-checkbox-fill);
  pointer-events: none;
}
.ui-checkbox::after {
  content: "";
  position: absolute;
  top: calc(var(--spacingVerticalS) + 2px);
  inset-inline-start: calc(var(--spacingHorizontalS) + 2px);
  width: 12px;
  height: 12px;
  background-color: var(--ui-checkbox-glyph);
  -webkit-mask: var(--ui-glyph-checkmark-filled-12) center / 100% 100% no-repeat;
  mask: var(--ui-glyph-checkmark-filled-12) center / 100% 100% no-repeat;
  visibility: hidden;
  pointer-events: none;
}
.ui-checkbox:has(> input:enabled):is(:hover, .is-hover) {
  --ui-checkbox-border: var(--colorNeutralStrokeAccessibleHover);
  color: var(--colorNeutralForeground2);
}
.ui-checkbox:has(> input:enabled):is(:active, .is-active) {
  --ui-checkbox-border: var(--colorNeutralStrokeAccessiblePressed);
  color: var(--colorNeutralForeground1);
}
.ui-checkbox:has(> input:checked) {
  --ui-checkbox-border: var(--colorCompoundBrandBackground);
  --ui-checkbox-fill: var(--colorCompoundBrandBackground);
  color: var(--colorNeutralForeground1);
}
.ui-checkbox:has(> input:enabled:checked):is(:hover, .is-hover) {
  --ui-checkbox-border: var(--colorCompoundBrandBackgroundHover);
  --ui-checkbox-fill: var(--colorCompoundBrandBackgroundHover);
  color: var(--colorNeutralForeground1);
}
.ui-checkbox:has(> input:enabled:checked):is(:active, .is-active) {
  --ui-checkbox-border: var(--colorCompoundBrandBackgroundPressed);
  --ui-checkbox-fill: var(--colorCompoundBrandBackgroundPressed);
}
.ui-checkbox:has(> input:checked)::after,
.ui-checkbox:has(> input:indeterminate)::after {
  visibility: visible;
}
/* mixed (set input.indeterminate = true in script): brand border, brand square, no fill */
.ui-checkbox:has(> input:indeterminate) {
  --ui-checkbox-border: var(--colorCompoundBrandStroke);
  --ui-checkbox-fill: transparent;
  --ui-checkbox-glyph: var(--colorCompoundBrandForeground1);
  color: var(--colorNeutralForeground1);
}
.ui-checkbox:has(> input:enabled:indeterminate):is(:hover, .is-hover) {
  --ui-checkbox-border: var(--colorCompoundBrandStrokeHover);
  --ui-checkbox-fill: transparent;
  --ui-checkbox-glyph: var(--colorCompoundBrandForeground1Hover);
}
.ui-checkbox:has(> input:enabled:indeterminate):is(:active, .is-active) {
  --ui-checkbox-border: var(--colorCompoundBrandStrokePressed);
  --ui-checkbox-fill: transparent;
  --ui-checkbox-glyph: var(--colorCompoundBrandForeground1Pressed);
}
.ui-checkbox:has(> input:indeterminate)::after {
  -webkit-mask-image: var(--ui-glyph-square-filled-12);
  mask-image: var(--ui-glyph-square-filled-12);
}
.ui-checkbox:has(> input:disabled) {
  --ui-checkbox-border: var(--colorNeutralStrokeDisabled);
  --ui-checkbox-fill: transparent;
  --ui-checkbox-glyph: var(--colorNeutralForegroundDisabled);
  color: var(--colorNeutralForegroundDisabled);
}
/* large: 20px box, 16px glyph, 36px row */
.ui-checkbox--large {
  padding-block: var(--spacingVerticalS);
  padding-inline-start: calc(var(--spacingHorizontalS) * 2 + 20px + var(--spacingHorizontalXS));
}
.ui-checkbox--large::before {
  width: 20px;
  height: 20px;
}
.ui-checkbox--large::after {
  width: 16px;
  height: 16px;
  -webkit-mask-image: var(--ui-glyph-checkmark-filled-16);
  mask-image: var(--ui-glyph-checkmark-filled-16);
}
.ui-checkbox--large:has(> input:indeterminate)::after {
  -webkit-mask-image: var(--ui-glyph-square-filled-16);
  mask-image: var(--ui-glyph-square-filled-16);
}
.ui-checkbox--large > input {
  width: calc(20px + var(--spacingHorizontalS) * 2);
}
.ui-checkbox--large:has(> input:is([aria-label], [aria-labelledby])) {
  padding-inline: calc(var(--spacingHorizontalS) * 2 + 20px) 0;
  min-height: 36px;
}
/* circular: only for task/checklist UIs (otherwise it reads as a radio) */
.ui-checkbox--circular::before {
  border-radius: var(--borderRadiusCircular);
}
.ui-checkbox--circular:has(> input:indeterminate)::after {
  -webkit-mask-image: var(--ui-glyph-circle-filled-20);
  mask-image: var(--ui-glyph-circle-filled-20);
}

/* --- Radio: 16px ring, checked = brand ring + 10px brand dot (scale .625), no fill ------------------------------- */
.ui-radio {
  --ui-radio-border: var(--colorNeutralStrokeAccessible);
  --ui-radio-dot: var(--colorCompoundBrandForeground1);
}
.ui-radio::before {
  content: "";
  position: absolute;
  top: var(--spacingVerticalS);
  inset-inline-start: var(--spacingHorizontalS);
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border: var(--strokeWidthThin) solid var(--ui-radio-border);
  border-radius: var(--borderRadiusCircular);
  pointer-events: none;
}
.ui-radio::after {
  content: "";
  position: absolute;
  top: calc(var(--spacingVerticalS) + 3px); /* ui-audit-ignore: centres the 10px dot */
  inset-inline-start: calc(var(--spacingHorizontalS) + 3px); /* ui-audit-ignore */
  width: 10px;
  height: 10px;
  border-radius: var(--borderRadiusCircular);
  background-color: var(--ui-radio-dot);
  visibility: hidden;
  pointer-events: none;
}
.ui-radio:has(> input:enabled:not(:checked)):is(:hover, .is-hover) {
  --ui-radio-border: var(--colorNeutralStrokeAccessibleHover);
  color: var(--colorNeutralForeground2);
}
.ui-radio:has(> input:enabled:not(:checked)):is(:active, .is-active) {
  --ui-radio-border: var(--colorNeutralStrokeAccessiblePressed);
  color: var(--colorNeutralForeground1);
}
.ui-radio:has(> input:checked) {
  --ui-radio-border: var(--colorCompoundBrandStroke);
  color: var(--colorNeutralForeground1);
}
.ui-radio:has(> input:checked)::after {
  visibility: visible;
}
.ui-radio:has(> input:enabled:checked):is(:hover, .is-hover) {
  --ui-radio-border: var(--colorCompoundBrandStrokeHover);
  --ui-radio-dot: var(--colorCompoundBrandForeground1Hover);
}
.ui-radio:has(> input:enabled:checked):is(:active, .is-active) {
  --ui-radio-border: var(--colorCompoundBrandStrokePressed);
  --ui-radio-dot: var(--colorCompoundBrandForeground1Pressed);
}
.ui-radio:has(> input:disabled) {
  --ui-radio-border: var(--colorNeutralStrokeDisabled);
  --ui-radio-dot: var(--colorNeutralForegroundDisabled);
  color: var(--colorNeutralForegroundDisabled);
}
/* RadioGroup: vertical by default (best for scanning and long labels); horizontal for tight layouts.
 * Arrow keys move AND select within a native radio group sharing one name; Tab enters on the checked radio. */
.ui-radio-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.ui-radio-group--horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

/* --- Switch: track 40×20px (32×16 small), pill, 1px border; thumb CircleFilled 18px (14px) travels 20px (16px).
 *     Immediate effect only (otherwise Checkbox). Label = what is controlled ("Focused inbox"), never "Turn on". ------ */
.ui-switch {
  --ui-switch-track: transparent;
  --ui-switch-border: var(--colorNeutralStrokeAccessible);
  --ui-switch-thumb: var(--colorNeutralStrokeAccessible);
  padding: var(--spacingVerticalS) var(--spacingHorizontalS) var(--spacingVerticalS) calc(var(--spacingHorizontalS) * 2 + 40px + var(--spacingHorizontalXS));
  min-height: 36px;
  color: var(--colorNeutralForeground1);
}
.ui-switch > input {
  width: calc(40px + var(--spacingHorizontalS) * 2);
}
.ui-switch::before {
  content: "";
  position: absolute;
  top: var(--spacingVerticalS);
  inset-inline-start: var(--spacingHorizontalS);
  box-sizing: border-box;
  width: 40px;
  height: 20px;
  border: var(--strokeWidthThin) solid var(--ui-switch-border);
  border-radius: var(--borderRadiusCircular);
  background-color: var(--ui-switch-track);
  pointer-events: none;
  transition: background var(--durationNormal) var(--curveEasyEase), border var(--durationNormal) var(--curveEasyEase);
}
.ui-switch::after {
  content: "";
  position: absolute;
  top: calc(var(--spacingVerticalS) + 1px);
  inset-inline-start: calc(var(--spacingHorizontalS) + 1px);
  width: 18px;
  height: 18px;
  background-color: var(--ui-switch-thumb);
  -webkit-mask: var(--ui-glyph-circle-filled-20) center / 100% 100% no-repeat;
  mask: var(--ui-glyph-circle-filled-20) center / 100% 100% no-repeat;
  pointer-events: none;
  transition: transform var(--durationNormal) var(--curveEasyEase), background var(--durationNormal) var(--curveEasyEase);
}
.ui-switch:has(> input:enabled:not(:checked)):is(:hover, .is-hover) {
  --ui-switch-border: var(--colorNeutralStrokeAccessibleHover);
  --ui-switch-thumb: var(--colorNeutralStrokeAccessibleHover);
}
.ui-switch:has(> input:enabled:not(:checked)):is(:active, .is-active) {
  --ui-switch-border: var(--colorNeutralStrokeAccessiblePressed);
  --ui-switch-thumb: var(--colorNeutralStrokeAccessiblePressed);
}
.ui-switch:has(> input:checked) {
  --ui-switch-track: var(--colorCompoundBrandBackground);
  --ui-switch-border: var(--colorTransparentStroke);
  --ui-switch-thumb: var(--colorNeutralForegroundInverted);
}
.ui-switch:has(> input:checked)::after {
  transform: translateX(20px);
}
.ui-switch:has(> input:checked):dir(rtl)::after {
  transform: translateX(-20px);
}
.ui-switch:has(> input:enabled:checked):is(:hover, .is-hover) {
  --ui-switch-track: var(--colorCompoundBrandBackgroundHover);
  --ui-switch-border: var(--colorTransparentStrokeInteractive);
}
.ui-switch:has(> input:enabled:checked):is(:active, .is-active) {
  --ui-switch-track: var(--colorCompoundBrandBackgroundPressed);
  --ui-switch-border: var(--colorTransparentStrokeInteractive);
}
.ui-switch:has(> input:disabled) {
  --ui-switch-border: var(--colorNeutralStrokeDisabled);
  --ui-switch-thumb: var(--colorNeutralForegroundDisabled);
}
.ui-switch:has(> input:disabled:checked) {
  --ui-switch-track: var(--colorNeutralBackgroundDisabled);
  --ui-switch-border: var(--colorTransparentStrokeDisabled);
}
.ui-switch--small {
  min-height: 32px;
  padding-inline-start: calc(var(--spacingHorizontalS) * 2 + 32px + var(--spacingHorizontalXS));
  font-size: var(--fontSizeBase200);
  line-height: var(--lineHeightBase200);
}
.ui-switch--small > input {
  width: calc(32px + var(--spacingHorizontalS) * 2);
}
.ui-switch--small::before {
  width: 32px;
  height: 16px;
}
.ui-switch--small::after {
  width: 14px;
  height: 14px;
}
.ui-switch--small:has(> input:checked)::after {
  transform: translateX(16px);
}
.ui-switch--small:has(> input:checked):dir(rtl)::after {
  transform: translateX(-16px);
}
/* label before the switch (settings rows). Add style="display:block" to push the switch to the row end. */
.ui-switch--before {
  padding-inline: var(--spacingHorizontalS) calc(var(--spacingHorizontalS) * 2 + 40px + var(--spacingHorizontalXS));
}
.ui-switch--before > input {
  inset-inline: auto 0;
}
.ui-switch--before::before {
  inset-inline: auto var(--spacingHorizontalS);
}
.ui-switch--before::after {
  inset-inline: auto calc(var(--spacingHorizontalS) + 40px - 1px - 18px); /* ui-audit-ignore: thumb at track start */
}
.ui-switch--small.ui-switch--before {
  padding-inline-end: calc(var(--spacingHorizontalS) * 2 + 32px + var(--spacingHorizontalXS));
}
.ui-switch--small.ui-switch--before::after {
  inset-inline-end: calc(var(--spacingHorizontalS) + 32px - 1px - 14px); /* ui-audit-ignore */
}
.ui-switch:has(> input:is([aria-label], [aria-labelledby])) {
  padding-inline: calc(var(--spacingHorizontalS) * 2 + 40px) 0;
}
.ui-switch--small:has(> input:is([aria-label], [aria-labelledby])) {
  padding-inline: calc(var(--spacingHorizontalS) * 2 + 32px) 0;
}

/* --- Slider: native <input type="range" class="ui-slider"> (or a .ui-slider wrapper around one) --------------------
 * Thumb 20px (16px small): brand centre, 3px colorNeutralBackground1 ring, 1px colorNeutralStroke1 edge.
 * Rail 4px (2px small) colorNeutralStrokeAccessible, radius 8px; filled part colorCompoundBrandBackground.
 * Root 32px tall (24px small), min-width 120px. WebKit needs the filled share in --value (set on input events:
 * el.style.setProperty('--value', pct + '%')); Firefox draws it natively. Always label it; show min/max. */
:is(input.ui-slider, .ui-slider input[type="range"]) {
  --ui-slider-thumb: 20px;
  --ui-slider-rail: 4px;
  --ui-slider-rail-color: var(--colorNeutralStrokeAccessible);
  --ui-slider-progress: var(--colorCompoundBrandBackground);
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  min-width: 120px;
  height: 32px;
  margin: 0;
  padding: 0;
  border-radius: var(--borderRadiusMedium);
  background: transparent;
  cursor: pointer;
  touch-action: none;
}
:is(input.ui-slider, .ui-slider input[type="range"]):is(:hover, .is-hover) {
  --ui-slider-progress: var(--colorCompoundBrandBackgroundHover);
}
:is(input.ui-slider, .ui-slider input[type="range"]):active {
  --ui-slider-progress: var(--colorCompoundBrandBackgroundPressed);
}
:is(input.ui-slider, .ui-slider input[type="range"])::-webkit-slider-runnable-track {
  height: var(--ui-slider-rail);
  border-radius: var(--borderRadiusXLarge);
  background: linear-gradient(to right, var(--ui-slider-progress) 0%, var(--ui-slider-progress) var(--value, 0%), var(--ui-slider-rail-color) var(--value, 0%));
}
:is(input.ui-slider, .ui-slider input[type="range"]):dir(rtl)::-webkit-slider-runnable-track {
  background: linear-gradient(to left, var(--ui-slider-progress) 0%, var(--ui-slider-progress) var(--value, 0%), var(--ui-slider-rail-color) var(--value, 0%));
}
:is(input.ui-slider, .ui-slider input[type="range"])::-webkit-slider-thumb {
  -webkit-appearance: none;
  box-sizing: border-box;
  width: var(--ui-slider-thumb);
  height: var(--ui-slider-thumb);
  margin-top: calc((var(--ui-slider-rail) - var(--ui-slider-thumb)) / 2);
  border: calc(var(--ui-slider-thumb) * 0.05) solid var(--colorNeutralStroke1);
  border-radius: var(--borderRadiusCircular);
  background-color: var(--ui-slider-progress);
  box-shadow: 0 0 0 calc(var(--ui-slider-thumb) * 0.15) var(--colorNeutralBackground1) inset;
}
:is(input.ui-slider, .ui-slider input[type="range"])::-moz-range-track {
  height: var(--ui-slider-rail);
  border-radius: var(--borderRadiusXLarge);
  background-color: var(--ui-slider-rail-color);
}
:is(input.ui-slider, .ui-slider input[type="range"])::-moz-range-progress {
  height: var(--ui-slider-rail);
  border-radius: var(--borderRadiusXLarge);
  background-color: var(--ui-slider-progress);
}
:is(input.ui-slider, .ui-slider input[type="range"])::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--ui-slider-thumb);
  height: var(--ui-slider-thumb);
  border: calc(var(--ui-slider-thumb) * 0.05) solid var(--colorNeutralStroke1);
  border-radius: var(--borderRadiusCircular);
  background-color: var(--ui-slider-progress);
  box-shadow: 0 0 0 calc(var(--ui-slider-thumb) * 0.15) var(--colorNeutralBackground1) inset;
}
:is(input.ui-slider, .ui-slider input[type="range"]):is(:focus-visible, .is-focus) {
  outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
  outline-offset: 0;
}
:is(input.ui-slider, .ui-slider input[type="range"]):disabled {
  --ui-slider-rail-color: var(--colorNeutralBackgroundDisabled);
  --ui-slider-progress: var(--colorNeutralForegroundDisabled);
  cursor: default;
}
:is(input.ui-slider, .ui-slider input[type="range"]):disabled::-webkit-slider-thumb {
  border-color: var(--colorNeutralForegroundDisabled);
}
:is(input.ui-slider, .ui-slider input[type="range"]):disabled::-moz-range-thumb {
  border-color: var(--colorNeutralForegroundDisabled);
}
:is(input.ui-slider--small, .ui-slider--small input[type="range"]) {
  --ui-slider-thumb: 16px;
  --ui-slider-rail: 2px;
  height: 24px;
}

/* ============================================================================ 6. Card */
/* Fluent Card (react-card useCardStyles.styles.ts). Padding = gap = 8 / 12 / 16px (small / medium / large),
 * radius 2 / 4 / 6px. filled (default): colorNeutralBackground1 + shadow4 → hover Background1Hover + shadow8.
 * filled-alternative: Background2 + shadow4 (use on Background1 surfaces). outline: transparent, 1px Stroke1, no shadow.
 * subtle: transparent, no border, no shadow. Selected: *Selected background + 1px colorNeutralStroke1Selected border.
 * Disabled: BackgroundDisabled, StrokeDisabled, shadow2. Border is an ::after overlay so previews sit under it.
 * Keyboard focus: 2px colorStrokeFocus2 ring inside the card edge. Interactive = a[href].ui-card, button.ui-card,
 * label.ui-card, .ui-card--interactive or .ui-card--selectable. If the whole card is clickable, also give it a real
 * button/link inside that does the same thing (screen reader and voice users). */
.ui-card {
  --ui-card-size: var(--spacingHorizontalM);
  --ui-card-radius: var(--borderRadiusMedium);
  --ui-card-bg: var(--colorNeutralBackground1);
  --ui-card-bg-hover: var(--colorNeutralBackground1Hover);
  --ui-card-bg-pressed: var(--colorNeutralBackground1Pressed);
  --ui-card-bg-selected: var(--colorNeutralBackground1Selected);
  --ui-card-border: var(--colorTransparentStroke);
  --ui-card-border-hover: var(--colorTransparentStroke);
  --ui-card-border-pressed: var(--colorTransparentStroke);
  --ui-card-border-selected: var(--colorNeutralStroke1Selected);
  --ui-card-shadow: var(--shadow4);
  --ui-card-shadow-hover: var(--shadow8);
  --ui-card-fg-hover: var(--colorNeutralForeground1Hover);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ui-card-size);
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  padding: var(--ui-card-size);
  overflow: hidden;
  border: none;
  border-radius: var(--ui-card-radius);
  background-color: var(--ui-card-bg);
  box-shadow: var(--ui-card-shadow); /* ui-audit-ignore: shadow4 / none per appearance */
  color: var(--colorNeutralForeground1);
  font: inherit;
  text-align: start;
  text-decoration: none;
}
.ui-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--strokeWidthThin) solid var(--ui-card-border);
  border-radius: inherit;
  pointer-events: none;
}
.ui-card--small {
  --ui-card-size: var(--spacingHorizontalS);
  --ui-card-radius: var(--borderRadiusSmall);
}
.ui-card--large {
  --ui-card-size: var(--spacingHorizontalL);
  --ui-card-radius: var(--borderRadiusLarge);
}
.ui-card--filled-alternative {
  --ui-card-bg: var(--colorNeutralBackground2);
  --ui-card-bg-hover: var(--colorNeutralBackground2Hover);
  --ui-card-bg-pressed: var(--colorNeutralBackground2Pressed);
  --ui-card-bg-selected: var(--colorNeutralBackground2Selected);
  --ui-card-fg-hover: var(--colorNeutralForeground2Hover);
}
.ui-card--outline {
  --ui-card-bg: var(--colorTransparentBackground);
  --ui-card-bg-hover: var(--colorTransparentBackgroundHover);
  --ui-card-bg-pressed: var(--colorTransparentBackgroundPressed);
  --ui-card-bg-selected: var(--colorTransparentBackgroundSelected);
  --ui-card-border: var(--colorNeutralStroke1);
  --ui-card-border-hover: var(--colorNeutralStroke1Hover);
  --ui-card-border-pressed: var(--colorNeutralStroke1Pressed);
  --ui-card-shadow: none;
  --ui-card-shadow-hover: none;
}
.ui-card--subtle {
  --ui-card-bg: var(--colorSubtleBackground);
  --ui-card-bg-hover: var(--colorSubtleBackgroundHover);
  --ui-card-bg-pressed: var(--colorSubtleBackgroundPressed);
  --ui-card-bg-selected: var(--colorSubtleBackgroundSelected);
  --ui-card-shadow: none;
  --ui-card-shadow-hover: none;
}
/* interactive */
.ui-card:where(.ui-card--interactive, .ui-card--selectable, a[href], button, label) {
  cursor: pointer;
}
.ui-card:where(.ui-card--interactive, .ui-card--selectable, a[href], button, label):not([aria-disabled="true"], :disabled):is(:hover, .is-hover) {
  background-color: var(--ui-card-bg-hover);
  box-shadow: var(--ui-card-shadow-hover); /* ui-audit-ignore: shadow8 / none */
  color: var(--ui-card-fg-hover);
  --ui-card-border: var(--ui-card-border-hover);
}
.ui-card:where(.ui-card--interactive, .ui-card--selectable, a[href], button, label):not([aria-disabled="true"], :disabled):is(:active, .is-active) {
  background-color: var(--ui-card-bg-pressed);
  --ui-card-border: var(--ui-card-border-pressed);
}
/* selected (selectable cards): aria-selected / aria-pressed / aria-checked / .is-selected / a checked floating checkbox */
.ui-card:is([aria-selected="true"], [aria-pressed="true"], [aria-checked="true"], .is-selected),
.ui-card:has(> .ui-card__floating-action input:checked) {
  background-color: var(--ui-card-bg-selected);
  --ui-card-border: var(--ui-card-border-selected);
}
.ui-card:is(:focus-visible, .is-focus),
.ui-card:has(> .ui-card__floating-action input:focus-visible) {
  outline: none;
}
.ui-card:is(:focus-visible, .is-focus)::after,
.ui-card:has(> .ui-card__floating-action input:focus-visible)::after {
  border: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
}
.ui-card:is([aria-disabled="true"], :disabled) {
  background-color: var(--colorNeutralBackgroundDisabled);
  box-shadow: var(--shadow2);
  color: var(--colorNeutralForegroundDisabled);
  cursor: not-allowed;
  user-select: none;
  --ui-card-border: var(--colorNeutralStrokeDisabled);
}
.ui-card--outline:is([aria-disabled="true"], :disabled) {
  background-color: var(--colorTransparentBackground);
  box-shadow: none;
}

/* CardHeader: [image] title / description [action]. Image margin-end 12px, action margin-start 12px.
 * TEXT ROLES (ui-standard references/typography.md §4a, one definition for every card in every template):
 *   card title        Subtitle2 16/22 semibold, colorNeutralForeground1 (--small cards: Body1Strong 14/20, Fluent's CardHeader sample)
 *   card description  Caption1 12/16 regular, colorNeutralForeground2, 2px (spacingVerticalXXS) under the title
 *   card meta         Caption1 12/16 regular, colorNeutralForeground3 (source, "Updated 2 h ago"), see .ui-card__meta
 * FIXED SPACING per Card size (react-card useCardStyles): padding = gap between header, body and footer = 8 / 12 / 16px
 * for --small / (default) / --large, so a header never carries its own padding. Do not add per-page title classes. */
.ui-card__header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "image title action" "image description action";
  align-items: center;
  flex-shrink: 0;
}
.ui-card__header > :is(img, svg, picture, .ui-avatar, .ui-card__image):not(.ui-icon--filled) {
  grid-area: image;
  display: inline-flex;
  margin-inline-end: var(--spacingHorizontalM);
}
.ui-card__title {
  grid-area: title;
  margin: 0;
  color: inherit; /* the card sets colorNeutralForeground1, and its disabled state sets colorNeutralForegroundDisabled */
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase400);
  font-weight: var(--fontWeightSemibold); /* subtitle2 (recommendation; Fluent's CardHeader sample uses body1 with a bold name) */
  line-height: var(--lineHeightBase400);
  overflow-wrap: anywhere;
}
.ui-card--small .ui-card__title {
  font-size: var(--fontSizeBase300); /* body1Strong: compact cards */
  line-height: var(--lineHeightBase300);
}
.ui-card__description {
  grid-area: description;
  margin: var(--spacingVerticalXXS) 0 0;
  color: var(--colorNeutralForeground2);
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase200); /* caption1 (recommendation) */
  font-weight: var(--fontWeightRegular);
  line-height: var(--lineHeightBase200);
}
.ui-card__meta {
  margin: 0;
  color: var(--colorNeutralForeground3);
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase200); /* caption1: source lines, timestamps, footnotes under the card body */
  font-weight: var(--fontWeightRegular);
  line-height: var(--lineHeightBase200);
}
.ui-card:is([aria-disabled="true"], :disabled) :is(.ui-card__description, .ui-card__meta) {
  color: inherit;
}
.ui-card__header > .ui-card__action {
  grid-area: action;
  display: flex;
  align-items: center;
  gap: var(--spacingHorizontalXS);
  margin-inline-start: var(--spacingHorizontalM);
}
/* CardPreview: full-bleed media (negative margins = card padding) */
.ui-card__preview {
  position: relative;
  margin-inline: calc(var(--ui-card-size) * -1);
}
.ui-card__preview:first-child {
  margin-top: calc(var(--ui-card-size) * -1);
}
.ui-card__preview:last-child {
  margin-bottom: calc(var(--ui-card-size) * -1);
}
.ui-card__preview > :is(img, video, picture, svg) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* CardFooter: actions row, 12px gap; .ui-card__action inside it is pushed to the end */
.ui-card__footer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacingHorizontalM);
  flex-shrink: 0;
}
.ui-card__footer > .ui-card__action {
  margin-inline-start: auto;
}
/* variant: visually hidden native checkbox that makes the whole card selectable (name it after the card title) */
.ui-card__checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.ui-card:has(.ui-card__checkbox:checked) {
  background-color: var(--ui-card-bg-selected);
  --ui-card-border: var(--ui-card-border-selected);
}
/* variant: one obvious action — a real link in the title stretched over the card (inner controls stay clickable) */
.ui-card__primary-action {
  color: inherit;
  text-decoration: none;
}
.ui-card__primary-action::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}
.ui-card__primary-action:focus-visible {
  outline: none;
}
.ui-card:has(.ui-card__primary-action) {
  cursor: pointer;
}
.ui-card:has(.ui-card__primary-action) :is(button, input, select, textarea, label, a:not(.ui-card__primary-action)) {
  position: relative;
  z-index: 1;
}
.ui-card:has(:is(.ui-card__checkbox, .ui-card__primary-action):focus-visible)::after {
  border: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
}
.ui-card:has(.ui-card__primary-action):is(:hover, .is-hover) {
  background-color: var(--ui-card-bg-hover);
  box-shadow: var(--ui-card-shadow-hover); /* ui-audit-ignore */
  --ui-card-border: var(--ui-card-border-hover);
}
/* floatingAction: selection checkbox or quick action in the top-end corner */
.ui-card__floating-action {
  position: absolute;
  top: var(--spacingVerticalXS);
  inset-inline-end: var(--spacingHorizontalXS);
  z-index: var(--zIndexContent, 1);
}
/* horizontal orientation */
.ui-card--horizontal {
  flex-direction: row;
  align-items: center;
}
.ui-card--horizontal > .ui-card__preview {
  margin: calc(var(--ui-card-size) * -1) 0;
}
.ui-card--horizontal > .ui-card__preview:first-child {
  margin-inline-start: calc(var(--ui-card-size) * -1);
}
.ui-card--horizontal > .ui-card__preview:last-child {
  margin-inline-end: calc(var(--ui-card-size) * -1);
}
.ui-card--horizontal > :is(.ui-card__header, .ui-card__footer):last-child {
  flex-grow: 1;
}

/* ============================================================================ 7. Badge */
/* Fluent Badge / CounterBadge (react-badge useBadgeStyles.styles.ts). Default: filled, brand, medium, circular.
 * Sizes: tiny 6px · extra-small 10px (dots, no text) · small 16px (10/14 semibold, padding 4px) · medium 20px
 * (12/16 semibold, padding 6px) · large 24px · extra-large 32px (padding 8px). Icons 6/10/12/12/16/20px, 4px from text
 * (6px extra-large). Border is an ::after overlay (visible in forced colors). Not focusable; for a colour-only dot use
 * role="img" + aria-label; for counts put the meaning in the parent's name ("Inbox, 6 unread"). Avoid mixing sizes. */
.ui-badge {
  --ui-badge-bg: var(--colorBrandBackground);
  --ui-badge-fg: var(--colorNeutralForegroundOnBrand);
  --ui-badge-border: var(--colorTransparentStroke);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXS)); /* 4px visible: icon keeps -2px margins */
  box-sizing: border-box;
  min-width: 20px;
  height: 20px;
  padding: 0 calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));
  border-radius: var(--borderRadiusCircular);
  background-color: var(--ui-badge-bg);
  color: var(--ui-badge-fg);
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase200);
  font-weight: var(--fontWeightSemibold);
  line-height: var(--lineHeightBase200);
  white-space: nowrap;
  vertical-align: middle;
}
.ui-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--strokeWidthThin) solid var(--ui-badge-border);
  border-radius: inherit;
  pointer-events: none;
}
.ui-badge > :is(svg, .ui-icon, .ui-badge__icon) {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin-inline: calc(var(--spacingHorizontalXXS) * -1);
}
/* sizes */
.ui-badge--tiny {
  width: 6px;
  min-width: unset;
  height: 6px;
  padding: 0;
  font-size: 4px; /* ui-audit-ignore: Fluent tiny badge */
  line-height: 4px; /* ui-audit-ignore */
}
.ui-badge--extra-small {
  width: 10px;
  min-width: unset;
  height: 10px;
  padding: 0;
  font-size: 6px; /* ui-audit-ignore: Fluent extra-small badge */
  line-height: 6px; /* ui-audit-ignore */
}
.ui-badge--tiny > :is(svg, .ui-icon, .ui-badge__icon) { width: 6px; height: 6px; }
.ui-badge--extra-small > :is(svg, .ui-icon, .ui-badge__icon) { width: 10px; height: 10px; }
.ui-badge--small {
  min-width: 16px;
  height: 16px;
  padding: 0 calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));
  font-size: var(--fontSizeBase100);
  line-height: var(--lineHeightBase100);
}
.ui-badge--medium {
  min-width: 20px;
  height: 20px;
  padding: 0 calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));
}
.ui-badge--large {
  min-width: 24px;
  height: 24px;
  padding: 0 calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));
}
.ui-badge--large > :is(svg, .ui-icon, .ui-badge__icon) { width: 16px; height: 16px; }
.ui-badge--extra-large {
  min-width: 32px;
  height: 32px;
  gap: calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS) * 2); /* 6px visible */
  padding: 0 calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));
}
.ui-badge--extra-large > :is(svg, .ui-icon, .ui-badge__icon) { width: 20px; height: 20px; }
/* shapes */
.ui-badge--circular { border-radius: var(--borderRadiusCircular); }
.ui-badge--rounded { border-radius: var(--borderRadiusMedium); }
.ui-badge--rounded:is(.ui-badge--small, .ui-badge--extra-small, .ui-badge--tiny) { border-radius: var(--borderRadiusSmall); }
.ui-badge--square { border-radius: var(--borderRadiusNone); }

/* filled (default appearance) × colour */
.ui-badge--filled      { --ui-badge-bg: var(--colorBrandBackground);              --ui-badge-fg: var(--colorNeutralForegroundOnBrand); }
.ui-badge--brand       { --ui-badge-bg: var(--colorBrandBackground);              --ui-badge-fg: var(--colorNeutralForegroundOnBrand); }
.ui-badge--danger      { --ui-badge-bg: var(--colorPaletteRedBackground3);        --ui-badge-fg: var(--colorNeutralForegroundOnBrand); }
.ui-badge--important   { --ui-badge-bg: var(--colorNeutralForeground1);           --ui-badge-fg: var(--colorNeutralBackground1); }
.ui-badge--informative { --ui-badge-bg: var(--colorNeutralBackground5);           --ui-badge-fg: var(--colorNeutralForeground3); }
.ui-badge--severe      { --ui-badge-bg: var(--colorPaletteDarkOrangeBackground3); --ui-badge-fg: var(--colorNeutralForegroundOnBrand); }
.ui-badge--subtle      { --ui-badge-bg: var(--colorNeutralBackground1);           --ui-badge-fg: var(--colorNeutralForeground1); }
.ui-badge--success     { --ui-badge-bg: var(--colorPaletteGreenBackground3);      --ui-badge-fg: var(--colorNeutralForegroundOnBrand); }
.ui-badge--warning     { --ui-badge-bg: var(--colorPaletteYellowBackground3);     --ui-badge-fg: var(--colorNeutralForeground1Static); }

/* ghost: no fill, no border, coloured text (subtle = white, only on brand backgrounds) */
.ui-badge--ghost { --ui-badge-bg: transparent; --ui-badge-fg: var(--colorBrandForeground1); }
.ui-badge--ghost::after { display: none; }
.ui-badge--ghost.ui-badge--danger      { --ui-badge-fg: var(--colorPaletteRedForeground3); }
.ui-badge--ghost.ui-badge--important   { --ui-badge-fg: var(--colorNeutralForeground1); }
.ui-badge--ghost.ui-badge--informative { --ui-badge-fg: var(--colorNeutralForeground3); }
.ui-badge--ghost.ui-badge--severe      { --ui-badge-fg: var(--colorPaletteDarkOrangeForeground3); }
.ui-badge--ghost.ui-badge--subtle      { --ui-badge-fg: var(--colorNeutralForegroundStaticInverted); }
.ui-badge--ghost.ui-badge--success     { --ui-badge-fg: var(--colorPaletteGreenForeground3); }
.ui-badge--ghost.ui-badge--warning     { --ui-badge-fg: var(--colorPaletteYellowForeground2); }

/* outline: no fill, 1px border (currentColor unless a token is given) */
.ui-badge--outline { --ui-badge-bg: transparent; --ui-badge-fg: var(--colorBrandForeground1); --ui-badge-border: currentColor; }
.ui-badge--outline.ui-badge--danger      { --ui-badge-fg: var(--colorPaletteRedForeground3);        --ui-badge-border: var(--colorPaletteRedBorder2); }
.ui-badge--outline.ui-badge--important   { --ui-badge-fg: var(--colorNeutralForeground3);           --ui-badge-border: var(--colorNeutralStrokeAccessible); }
.ui-badge--outline.ui-badge--informative { --ui-badge-fg: var(--colorNeutralForeground3);           --ui-badge-border: var(--colorNeutralStroke2); }
.ui-badge--outline.ui-badge--severe      { --ui-badge-fg: var(--colorPaletteDarkOrangeForeground3); --ui-badge-border: currentColor; }
.ui-badge--outline.ui-badge--subtle      { --ui-badge-fg: var(--colorNeutralForegroundStaticInverted); --ui-badge-border: currentColor; }
.ui-badge--outline.ui-badge--success     { --ui-badge-fg: var(--colorPaletteGreenForeground3);      --ui-badge-border: var(--colorPaletteGreenBorder2); }
.ui-badge--outline.ui-badge--warning     { --ui-badge-fg: var(--colorPaletteYellowForeground2);     --ui-badge-border: currentColor; }

/* tint: light tinted fill + tinted border (status chips in dense tables and cards) */
.ui-badge--tint { --ui-badge-bg: var(--colorBrandBackground2); --ui-badge-fg: var(--colorBrandForeground2); --ui-badge-border: var(--colorBrandStroke2); }
.ui-badge--tint.ui-badge--danger      { --ui-badge-bg: var(--colorPaletteRedBackground1);        --ui-badge-fg: var(--colorPaletteRedForeground1);        --ui-badge-border: var(--colorPaletteRedBorder1); }
.ui-badge--tint.ui-badge--important   { --ui-badge-bg: var(--colorNeutralForeground3);           --ui-badge-fg: var(--colorNeutralBackground1);           --ui-badge-border: var(--colorTransparentStroke); }
.ui-badge--tint.ui-badge--informative { --ui-badge-bg: var(--colorNeutralBackground4);           --ui-badge-fg: var(--colorNeutralForeground3);           --ui-badge-border: var(--colorNeutralStroke2); }
.ui-badge--tint.ui-badge--severe      { --ui-badge-bg: var(--colorPaletteDarkOrangeBackground1); --ui-badge-fg: var(--colorPaletteDarkOrangeForeground1); --ui-badge-border: var(--colorPaletteDarkOrangeBorder1); }
.ui-badge--tint.ui-badge--subtle      { --ui-badge-bg: var(--colorNeutralBackground1);           --ui-badge-fg: var(--colorNeutralForeground3);           --ui-badge-border: var(--colorNeutralStroke2); }
.ui-badge--tint.ui-badge--success     { --ui-badge-bg: var(--colorPaletteGreenBackground1);      --ui-badge-fg: var(--colorPaletteGreenForeground1);      --ui-badge-border: var(--colorPaletteGreenBorder1); }
.ui-badge--tint.ui-badge--warning     { --ui-badge-bg: var(--colorPaletteYellowBackground1);     --ui-badge-fg: var(--colorPaletteYellowForeground1);     --ui-badge-border: var(--colorPaletteYellowBorder1); }
.ui-badge--tint.ui-badge--brand       { --ui-badge-bg: var(--colorBrandBackground2);             --ui-badge-fg: var(--colorBrandForeground2);             --ui-badge-border: var(--colorBrandStroke2); }

/* ============================================================================ 8. Tag */
/* Fluent Tag / InteractionTag (react-tags useTagStyles.styles.ts). A value someone picked (recipient, category) that
 * can be removed; system-generated status → Badge. Heights 32 / 24 / 20px (medium / small / extra-small), radius 4px
 * (circular optional), 1px transparent border. filled: colorNeutralBackground3 + Foreground2; outline: transparent +
 * colorNeutralStroke1; brand: colorBrandBackground2 + colorBrandForeground2; selected: colorBrandBackground +
 * OnBrand. Dismiss = DismissRegular 20 / 16 / 12px (hover colorCompoundBrandForeground1Hover).
 * Dismissible: <button class="ui-tag" aria-label="Design, remove">Design<span class="ui-tag__dismiss" aria-hidden="true"></span></button>
 * (Delete/Backspace also remove it). Never truncate tag text; groups wrap (.ui-tag-group). */
.ui-tag {
  --ui-tag-pad: 7px; /* ui-audit-ignore: Fluent tag side padding medium */
  --ui-tag-icon: 20px;
  --ui-tag-gap: var(--spacingHorizontalXS);
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 32px;
  margin: 0;
  padding: 0 calc(var(--ui-tag-pad) + var(--spacingHorizontalXXS));
  border: var(--strokeWidthThin) solid var(--colorTransparentStroke);
  border-radius: var(--borderRadiusMedium);
  background-color: var(--colorNeutralBackground3);
  color: var(--colorNeutralForeground2);
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase300);
  font-weight: var(--fontWeightRegular);
  line-height: var(--lineHeightBase300);
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
}
button.ui-tag,
a.ui-tag {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* leading icon / media (Avatar) */
.ui-tag > :is(svg, .ui-icon, .ui-avatar, img):first-child {
  flex-shrink: 0;
  width: var(--ui-tag-icon);
  height: var(--ui-tag-icon);
  margin-inline: calc(var(--spacingHorizontalXXS) * -1) calc(var(--ui-tag-gap) + var(--spacingHorizontalXXS));
}
.ui-tag__dismiss {
  display: inline-flex;
  flex-shrink: 0;
  box-sizing: border-box;
  width: var(--ui-tag-icon);
  height: var(--ui-tag-icon);
  margin: 0;
  margin-inline: calc(var(--ui-tag-gap) + var(--spacingHorizontalXXS)) calc(var(--spacingHorizontalXXS) * -1);
  padding: 0;
  border: none;
  border-radius: var(--borderRadiusSmall);
  background: none;
  color: inherit;
  cursor: pointer;
}
.ui-tag__dismiss::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: currentColor;
  -webkit-mask: var(--ui-glyph-dismiss-regular-20) center / 100% 100% no-repeat;
  mask: var(--ui-glyph-dismiss-regular-20) center / 100% 100% no-repeat;
}
.ui-tag__dismiss:is(:hover, .is-hover),
button.ui-tag:is(:hover, .is-hover) > .ui-tag__dismiss {
  color: var(--colorCompoundBrandForeground1Hover);
}
.ui-tag__dismiss:active,
button.ui-tag:active > .ui-tag__dismiss {
  color: var(--colorCompoundBrandForeground1Pressed);
}
/* interactive tags (button/link): InteractionTag hover / pressed fills */
:is(button, a).ui-tag:not(:disabled, [aria-disabled="true"]):is(:hover, .is-hover) {
  background-color: var(--colorNeutralBackground3Hover);
  color: var(--colorNeutralForeground2Hover);
}
:is(button, a).ui-tag:not(:disabled, [aria-disabled="true"]):active {
  background-color: var(--colorNeutralBackground3Pressed);
  color: var(--colorNeutralForeground2Pressed);
}
.ui-tag--outline {
  border-color: var(--colorNeutralStroke1);
  background-color: var(--colorSubtleBackground);
}
:is(button, a).ui-tag--outline:not(:disabled, [aria-disabled="true"]):is(:hover, .is-hover) {
  background-color: var(--colorSubtleBackgroundHover);
}
:is(button, a).ui-tag--outline:not(:disabled, [aria-disabled="true"]):active {
  background-color: var(--colorSubtleBackgroundPressed);
}
.ui-tag--brand {
  background-color: var(--colorBrandBackground2);
  color: var(--colorBrandForeground2);
}
:is(button, a).ui-tag--brand:not(:disabled, [aria-disabled="true"]):is(:hover, .is-hover) {
  background-color: var(--colorBrandBackground2Hover);
  color: var(--colorCompoundBrandForeground1Hover);
}
:is(button, a).ui-tag--brand:not(:disabled, [aria-disabled="true"]):active {
  background-color: var(--colorBrandBackground2Pressed);
  color: var(--colorCompoundBrandForeground1Pressed);
}
.ui-tag:is([aria-pressed="true"], [aria-selected="true"]),
.ui-tag:is([aria-pressed="true"], [aria-selected="true"]):is(:hover, :active, .is-hover) {
  border-color: var(--colorBrandStroke1);
  background-color: var(--colorBrandBackground);
  color: var(--colorNeutralForegroundOnBrand);
}
.ui-tag:is([aria-pressed="true"], [aria-selected="true"]):is(:hover, .is-hover) {
  background-color: var(--colorBrandBackgroundHover);
}
.ui-tag:is([aria-pressed="true"], [aria-selected="true"]) > .ui-tag__dismiss {
  color: var(--colorNeutralForegroundOnBrand);
}
.ui-tag:is(:disabled, [aria-disabled="true"]) {
  border-color: var(--colorTransparentStrokeDisabled);
  background-color: var(--colorNeutralBackgroundDisabled);
  color: var(--colorNeutralForegroundDisabled);
  cursor: not-allowed;
}
.ui-tag--outline:is(:disabled, [aria-disabled="true"]) {
  border-color: var(--colorNeutralStrokeDisabled);
  background-color: var(--colorTransparentBackground);
}
.ui-tag:is(:disabled, [aria-disabled="true"]) > .ui-tag__dismiss {
  color: inherit;
  cursor: not-allowed;
}
.ui-tag--circular {
  border-radius: var(--borderRadiusCircular);
}
.ui-tag--small,
.ui-tag--extra-small {
  --ui-tag-pad: 5px; /* ui-audit-ignore: Fluent tag side padding small */
  --ui-tag-icon: 16px;
  --ui-tag-gap: var(--spacingHorizontalXXS);
  height: 24px;
  font-size: var(--fontSizeBase200);
  line-height: var(--lineHeightBase200);
}
.ui-tag--extra-small {
  --ui-tag-icon: 12px;
  position: relative;
  height: 20px;
}
/* extra-small keeps a 24px target with an invisible 2px extension above and below */
.ui-tag--extra-small:is(button, a)::after {
  content: "";
  position: absolute;
  inset: -3px -1px; /* ui-audit-ignore: 24px target extension */
}
/* TagGroup: wraps by default (Fluent sets only the column gap; wrap + row gap = recommendation) */
.ui-tag-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacingHorizontalS);
}
.ui-tag-group--small { gap: var(--spacingHorizontalSNudge); }
.ui-tag-group--extra-small { gap: var(--spacingHorizontalXS); }

/* ============================================================================ 9. TabList / Tab */
/* Fluent TabList (react-tabs useTabStyles.styles.ts). Switch related views on one page (not routed app navigation —
 * use Nav). <div class="ui-tablist" role="tablist"><button class="ui-tab" role="tab" aria-selected="true">…
 * Medium: padding 12px 10px (+2px label inset), 14/20, icon 20px, gap 6px → 44px tall; selected = Foreground1
 * semibold + 3px colorCompoundBrandStroke bar inset 12px (pill radius); hover shows a grey "pending" bar
 * (colorNeutralStroke1Hover / Pressed). Small: 6px 6px, 2px bar inset 6px → 32px. Large: 16px 10px, 16/22, icon 24px.
 * Vertical: bar on the start edge, 3px wide. Circular appearances (pill buttons, 24/32/40px) show selection by fill.
 * Focus: shadow4 + 2px colorStrokeFocus2 ring. Roving tabindex: arrows move (wrap), Enter/Space select.
 * Optional <span class="ui-tab__label" data-text="Overview">Overview</span> reserves the bold width (no layout shift). */
.ui-tablist {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex-shrink: 0;
  align-items: stretch;
  max-width: 100%;
}
.ui-tablist--vertical {
  flex-direction: column;
}
/* Tabs never shrink or wrap (Fluent). When a horizontal list is wider than its container it scrolls sideways
 * (recommendation; better: move extra tabs into a "More" menu). The 2px padding keeps focus rings unclipped. */
.ui-tablist:not(.ui-tablist--vertical) {
  max-width: calc(100% + 4px);
  margin: -2px;
  padding: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.ui-tablist:not(.ui-tablist--vertical)::-webkit-scrollbar {
  display: none;
}
.ui-tab {
  flex-shrink: 0;
  --ui-tab-pad-block: var(--spacingVerticalM);
  --ui-tab-pad-inline: var(--spacingHorizontalMNudge);
  --ui-tab-gap: var(--spacingHorizontalSNudge);
  --ui-tab-bar: var(--strokeWidthThicker);
  --ui-tab-bar-inset: var(--spacingHorizontalM);
  --ui-tab-icon: 20px;
  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
  column-gap: calc(var(--ui-tab-gap) + var(--spacingHorizontalXXS));
  box-sizing: border-box;
  margin: 0;
  padding: var(--ui-tab-pad-block) calc(var(--ui-tab-pad-inline) + var(--spacingHorizontalXXS));
  overflow: hidden;
  border: none;
  border-radius: var(--borderRadiusMedium);
  background-color: var(--colorTransparentBackground);
  color: var(--colorNeutralForeground2);
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase300);
  font-weight: var(--fontWeightRegular);
  line-height: var(--lineHeightBase300);
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ui-tab:has(> :is(svg, .ui-icon, .ui-tab__icon):first-child) {
  padding-inline-start: var(--ui-tab-pad-inline);
}
.ui-tab > :is(svg, .ui-icon, .ui-tab__icon) {
  width: var(--ui-tab-icon);
  height: var(--ui-tab-icon);
}
.ui-tab__icon {
  display: inline-flex;
}
.ui-tab__icon > svg {
  width: 100%;
  height: 100%;
}
.ui-tab__label {
  display: inline-flex;
  flex-direction: column;
}
.ui-tab__label[data-text]::after {
  content: attr(data-text);
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: var(--fontWeightSemibold);
  user-select: none;
  pointer-events: none;
}
/* selection bar (::after) and hover "pending" bar (::before) */
.ui-tab::before,
.ui-tab::after {
  content: "";
  position: absolute;
  inset-inline: var(--ui-tab-bar-inset);
  bottom: 0;
  height: var(--ui-tab-bar);
  border-radius: var(--borderRadiusCircular);
  background-color: transparent;
  pointer-events: none;
}
.ui-tab:not(:disabled, [aria-disabled="true"]):is(:hover, .is-hover) {
  background-color: var(--colorTransparentBackgroundHover);
  color: var(--colorNeutralForeground2Hover);
}
.ui-tab:not(:disabled, [aria-disabled="true"]):is(:hover, .is-hover)::before {
  background-color: var(--colorNeutralStroke1Hover);
}
.ui-tab:not(:disabled, [aria-disabled="true"]):is(:active, .is-active) {
  background-color: var(--colorTransparentBackgroundPressed);
  color: var(--colorNeutralForeground2Pressed);
}
.ui-tab:not(:disabled, [aria-disabled="true"]):is(:active, .is-active)::before {
  background-color: var(--colorNeutralStroke1Pressed);
}
.ui-tab[aria-selected="true"] {
  color: var(--colorNeutralForeground1);
  font-weight: var(--fontWeightSemibold);
}
.ui-tab[aria-selected="true"]::after {
  background-color: var(--colorCompoundBrandStroke);
}
.ui-tab[aria-selected="true"] > :is(svg, .ui-icon, .ui-tab__icon) {
  color: var(--colorCompoundBrandForeground1);
}
.ui-tab[aria-selected="true"]:not(:disabled):is(:hover, .is-hover) {
  color: var(--colorNeutralForeground1Hover);
}
.ui-tab[aria-selected="true"]:not(:disabled):is(:hover, .is-hover)::after {
  background-color: var(--colorCompoundBrandStrokeHover);
}
.ui-tab[aria-selected="true"]:not(:disabled):is(:hover, .is-hover) > :is(svg, .ui-icon, .ui-tab__icon) {
  color: var(--colorCompoundBrandForeground1Hover);
}
.ui-tab[aria-selected="true"]:not(:disabled):is(:active, .is-active)::after {
  background-color: var(--colorCompoundBrandStrokePressed);
}
.ui-tab[aria-selected="true"] .ui-icon--filled { display: inline-block; }
.ui-tab[aria-selected="true"] .ui-icon--regular { display: none; }
.ui-tab:is(:disabled, [aria-disabled="true"]) {
  color: var(--colorNeutralForegroundDisabled);
  cursor: not-allowed;
}
.ui-tab:is(:disabled, [aria-disabled="true"]) > :is(svg, .ui-icon, .ui-tab__icon) {
  color: inherit;
}
.ui-tab[aria-selected="true"]:is(:disabled, [aria-disabled="true"])::after {
  background-color: var(--colorNeutralForegroundDisabled);
}
.ui-tab:is(:focus-visible, .is-focus) {
  z-index: 1;
  outline: var(--strokeWidthThick) solid transparent;
  box-shadow: var(--shadow4), 0 0 0 var(--strokeWidthThick) var(--colorStrokeFocus2);
}
/* sizes */
.ui-tablist--small .ui-tab {
  --ui-tab-pad-block: var(--spacingVerticalSNudge);
  --ui-tab-pad-inline: var(--spacingHorizontalSNudge);
  --ui-tab-gap: var(--spacingHorizontalXXS);
  --ui-tab-bar: var(--strokeWidthThick);
  --ui-tab-bar-inset: var(--spacingHorizontalSNudge);
}
.ui-tablist--large .ui-tab {
  --ui-tab-pad-block: var(--spacingVerticalL);
  --ui-tab-icon: 24px;
  font-size: var(--fontSizeBase400);
  line-height: var(--lineHeightBase400);
}
/* vertical: bar on the start edge, 3px wide, inset 4 / 8 / 10px from top and bottom */
.ui-tablist--vertical .ui-tab {
  --ui-tab-pad-block: var(--spacingVerticalSNudge);
  justify-content: start;
}
.ui-tablist--vertical .ui-tab::before,
.ui-tablist--vertical .ui-tab::after {
  inset-inline: 0 auto;
  inset-block: var(--spacingVerticalS);
  width: var(--strokeWidthThicker);
  height: auto;
}
.ui-tablist--vertical.ui-tablist--small .ui-tab { --ui-tab-pad-block: var(--spacingVerticalXXS); }
.ui-tablist--vertical.ui-tablist--small .ui-tab::before,
.ui-tablist--vertical.ui-tablist--small .ui-tab::after { inset-block: var(--spacingVerticalXS); }
.ui-tablist--vertical.ui-tablist--large .ui-tab { --ui-tab-pad-block: var(--spacingVerticalS); }
.ui-tablist--vertical.ui-tablist--large .ui-tab::before,
.ui-tablist--vertical.ui-tablist--large .ui-tab::after { inset-block: var(--spacingVerticalMNudge); }
/* subtle: hover/pressed fill */
.ui-tablist--subtle .ui-tab:not(:disabled, [aria-disabled="true"]):is(:hover, .is-hover) {
  background-color: var(--colorSubtleBackgroundHover);
}
.ui-tablist--subtle .ui-tab:not(:disabled, [aria-disabled="true"]):is(:active, .is-active) {
  background-color: var(--colorSubtleBackgroundPressed);
}
/* circular appearances: 24 / 32 / 40px pills, 8px apart (6px small); no bars */
:is(.ui-tablist--subtle-circular, .ui-tablist--filled-circular) {
  gap: var(--spacingHorizontalS);
}
:is(.ui-tablist--subtle-circular, .ui-tablist--filled-circular).ui-tablist--small {
  gap: var(--spacingHorizontalSNudge);
}
:is(.ui-tablist--subtle-circular, .ui-tablist--filled-circular) .ui-tab {
  --ui-tab-pad-block: calc(var(--spacingVerticalSNudge) - var(--strokeWidthThin));
  border: var(--strokeWidthThin) solid var(--colorTransparentStroke);
  border-radius: var(--borderRadiusCircular);
}
:is(.ui-tablist--subtle-circular, .ui-tablist--filled-circular).ui-tablist--small .ui-tab {
  --ui-tab-pad-block: calc(var(--spacingVerticalXXS) - var(--strokeWidthThin));
}
:is(.ui-tablist--subtle-circular, .ui-tablist--filled-circular).ui-tablist--large .ui-tab {
  --ui-tab-pad-block: calc(var(--spacingVerticalS) - var(--strokeWidthThin));
}
:is(.ui-tablist--subtle-circular, .ui-tablist--filled-circular) .ui-tab::before,
:is(.ui-tablist--subtle-circular, .ui-tablist--filled-circular) .ui-tab::after {
  display: none;
}
:is(.ui-tablist--subtle-circular, .ui-tablist--filled-circular) .ui-tab[aria-selected="true"] > :is(svg, .ui-icon, .ui-tab__icon) {
  color: inherit;
}
:is(.ui-tablist--subtle-circular, .ui-tablist--filled-circular) .ui-tab:is(:focus-visible, .is-focus) {
  box-shadow: var(--shadow4), 0 0 0 var(--strokeWidthThick) var(--colorStrokeFocus2),
    0 0 0 var(--strokeWidthThin) var(--colorNeutralStrokeOnBrand) inset;
}
.ui-tablist--subtle-circular .ui-tab {
  background-color: var(--colorSubtleBackground);
}
.ui-tablist--subtle-circular .ui-tab:not(:disabled, [aria-disabled="true"]):is(:hover, .is-hover) {
  border-color: var(--colorNeutralStroke1Hover);
  background-color: var(--colorSubtleBackgroundHover);
}
.ui-tablist--subtle-circular .ui-tab:not(:disabled, [aria-disabled="true"]):is(:active, .is-active) {
  border-color: var(--colorNeutralStroke1Pressed);
  background-color: var(--colorSubtleBackgroundPressed);
}
.ui-tablist--subtle-circular .ui-tab[aria-selected="true"] {
  border-color: var(--colorCompoundBrandStroke);
  background-color: var(--colorBrandBackground2);
  color: var(--colorBrandForeground2);
}
.ui-tablist--subtle-circular .ui-tab[aria-selected="true"]:not(:disabled):is(:hover, .is-hover) {
  border-color: var(--colorCompoundBrandStrokeHover);
  background-color: var(--colorBrandBackground2Hover);
  color: var(--colorBrandForeground2Hover);
}
.ui-tablist--subtle-circular .ui-tab[aria-selected="true"]:not(:disabled):is(:active, .is-active) {
  border-color: var(--colorCompoundBrandStrokePressed);
  background-color: var(--colorBrandBackground2Pressed);
  color: var(--colorBrandForeground2Pressed);
}
.ui-tablist--filled-circular .ui-tab {
  background-color: var(--colorNeutralBackground3);
}
.ui-tablist--filled-circular .ui-tab:not(:disabled, [aria-disabled="true"]):is(:hover, .is-hover) {
  background-color: var(--colorNeutralBackground3Hover);
}
.ui-tablist--filled-circular .ui-tab:not(:disabled, [aria-disabled="true"]):is(:active, .is-active) {
  background-color: var(--colorNeutralBackground3Pressed);
}
.ui-tablist--filled-circular .ui-tab[aria-selected="true"] {
  background-color: var(--colorBrandBackground);
  color: var(--colorNeutralForegroundOnBrand);
}
.ui-tablist--filled-circular .ui-tab[aria-selected="true"]:not(:disabled):is(:hover, .is-hover) {
  background-color: var(--colorBrandBackgroundHover);
  color: var(--colorNeutralForegroundOnBrand);
}
.ui-tablist--filled-circular .ui-tab[aria-selected="true"]:not(:disabled):is(:active, .is-active) {
  background-color: var(--colorBrandBackgroundPressed);
  color: var(--colorNeutralForegroundOnBrand);
}
:is(.ui-tablist--subtle-circular, .ui-tablist--filled-circular) .ui-tab:is(:disabled, [aria-disabled="true"]) {
  background-color: var(--colorTransparentBackground);
  color: var(--colorNeutralForegroundDisabled);
}
:is(.ui-tablist--subtle-circular, .ui-tablist--filled-circular) .ui-tab[aria-selected="true"]:is(:disabled, [aria-disabled="true"]),
.ui-tablist--filled-circular .ui-tab:is(:disabled, [aria-disabled="true"]) {
  border-color: var(--colorNeutralStrokeDisabled);
  background-color: var(--colorNeutralBackgroundDisabled);
}

/* ============================================================================ 10. Nav */
/* Fluent Nav / NavDrawer (react-nav sharedNavStyles.styles.ts). App-level side navigation, 260px wide on
 * colorNeutralBackground4 (light #f0f0f0 / dark #0a0a0a); becomes an overlay drawer at ≤640px viewport width.
 * Item: padding 10px 8px 10px 10px (4px block when .ui-nav--small) → 40px row (28px small), 16px icon↔text gap,
 * body1, colorNeutralForeground2, radius 4px, hover colorNeutralBackground4Hover (100ms linear).
 * Selected (aria-current="page"): semibold, filled 20px icon in colorNeutralForeground2BrandSelected, and a 4×20px
 * colorCompoundBrandForeground1 pill 4px from the nav edge. Categories (<details>) expand like accordions and never
 * navigate; when a closed category holds the current page it shows the pill. Sub-items indent 46px.
 * Focus: inset 2px ring. Up/Down arrows move between items (roving tabindex) — or keep every link tabbable. */
.ui-nav {
  --ui-nav-item-pad-block: var(--spacingVerticalMNudge);
  display: flex;
  flex-direction: column;
  row-gap: var(--spacingVerticalXXS);
  box-sizing: border-box;
  width: var(--ui-nav-width, 260px);
  max-width: 100%;
  padding: var(--spacingVerticalS) var(--spacingHorizontalXS) var(--spacingVerticalS) var(--spacingHorizontalMNudge);
  background-color: var(--colorNeutralBackground4);
  color: var(--colorNeutralForeground1);
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase300);
  line-height: var(--lineHeightBase300);
}
.ui-nav--small {
  --ui-nav-item-pad-block: var(--spacingVerticalXS);
}
.ui-nav__item,
.ui-nav__category > summary {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--spacingVerticalL);
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: var(--ui-nav-item-pad-block) var(--spacingHorizontalS) var(--ui-nav-item-pad-block) var(--spacingHorizontalMNudge);
  border: none;
  border-radius: var(--borderRadiusMedium);
  background-color: var(--colorNeutralBackground4);
  color: var(--colorNeutralForeground2);
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase300);
  font-weight: var(--fontWeightRegular);
  line-height: var(--lineHeightBase300);
  text-align: start;
  text-decoration: none;
  text-transform: none;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--durationFaster) var(--curveLinear);
}
.ui-nav__category > summary::-webkit-details-marker {
  display: none;
}
.ui-nav__item:is(:hover, .is-hover),
.ui-nav__category > summary:is(:hover, .is-hover) {
  background-color: var(--colorNeutralBackground4Hover);
  color: var(--colorNeutralForeground2);
}
.ui-nav__item:is(:focus-visible, .is-focus),
.ui-nav__category > summary:is(:focus-visible, .is-focus) {
  outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
  outline-offset: calc(var(--strokeWidthThick) * -1);
}
.ui-nav__item > :is(svg, .ui-icon),
.ui-nav__category > summary > :is(svg, .ui-icon) {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
/* selected */
.ui-nav__item:is([aria-current]:not([aria-current="false"]), .is-selected),
.ui-nav__category:not([open]):has(.ui-nav__item[aria-current]:not([aria-current="false"])) > summary {
  font-weight: var(--fontWeightSemibold);
}
.ui-nav__item:is([aria-current]:not([aria-current="false"]), .is-selected)::before,
.ui-nav__category:not([open]):has(.ui-nav__item[aria-current]:not([aria-current="false"])) > summary::before {
  content: "";
  position: absolute;
  top: var(--ui-nav-item-pad-block);
  inset-inline-start: calc(var(--spacingHorizontalMNudge) - var(--spacingVerticalL));
  width: 4px;
  height: 20px;
  border-radius: var(--borderRadiusCircular);
  background-color: var(--colorCompoundBrandForeground1);
  animation: ui-nav-indicator var(--durationFaster) var(--curveLinear) both;
}
@keyframes ui-nav-indicator {
  from { background-color: transparent; }
}
.ui-nav__item:is([aria-current]:not([aria-current="false"]), .is-selected) > :is(svg, .ui-icon),
.ui-nav__category:not([open]):has(.ui-nav__item[aria-current]:not([aria-current="false"])) > summary > :is(svg, .ui-icon) {
  color: var(--colorNeutralForeground2BrandSelected);
}
.ui-nav__item:is([aria-current]:not([aria-current="false"]), .is-selected) .ui-icon--filled { display: inline-block; }
.ui-nav__item:is([aria-current]:not([aria-current="false"]), .is-selected) .ui-icon--regular { display: none; }
/* category chevron (ChevronDown 20px at the end, rotates 180° when open in 150ms) */
.ui-nav__category > summary::after {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-inline-start: auto;
  background-color: currentColor;
  -webkit-mask: var(--ui-glyph-chevron-down-regular-20) center / 100% 100% no-repeat;
  mask: var(--ui-glyph-chevron-down-regular-20) center / 100% 100% no-repeat;
  transition: transform var(--durationFast) var(--curveEasyEase);
}
.ui-nav__category[open] > summary::after {
  transform: rotate(180deg);
}
.ui-nav__category > .ui-nav__item {
  margin-top: var(--spacingVerticalXXS);
  padding-inline-start: 46px; /* ui-audit-ignore: Fluent NavSubItem indent */
}
/* variant: header / body / footer slots (NavDrawerHeader / Body / Footer). The root padding moves to the body. */
.ui-nav:has(> .ui-nav__body) {
  padding: 0;
  row-gap: 0;
}
.ui-nav__header {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-block: 5px; /* ui-audit-ignore: Fluent NavDrawerHeader */
  padding-inline: 14px var(--spacingHorizontalXXL); /* ui-audit-ignore: hamburger 14px from the edge */
}
.ui-nav__body,
.ui-nav__footer {
  display: flex;
  flex-direction: column;
  row-gap: var(--spacingVerticalXXS);
  padding: 0 var(--spacingHorizontalXS) 0 var(--spacingHorizontalMNudge);
}
.ui-nav__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
.ui-nav__body:first-child { padding-top: calc(var(--spacingVerticalXXL) + 1px); }
.ui-nav__body:last-child { padding-bottom: calc(var(--spacingVerticalXXL) + 1px); }
.ui-nav__footer { padding-block: var(--spacingVerticalXXS); }
/* variant: icon wrapper holding a regular and a filled SVG (filled fades in when selected) */
.ui-nav__icon {
  display: grid;
  flex-shrink: 0;
  min-width: 20px;
  min-height: 20px;
  overflow: hidden;
}
.ui-nav__icon > svg {
  grid-area: 1 / 1;
  width: 20px;
  height: 20px;
  transition: opacity var(--durationFaster) var(--curveLinear);
}
.ui-nav__icon > svg + svg { opacity: 0; }
.ui-nav__item:is([aria-current]:not([aria-current="false"]), .is-selected) > .ui-nav__icon > svg:first-child { opacity: 0; }
.ui-nav__item:is([aria-current]:not([aria-current="false"]), .is-selected) > .ui-nav__icon > svg + svg { opacity: 1; }
.ui-nav__item:is([aria-current]:not([aria-current="false"]), .is-selected) > .ui-nav__icon {
  color: var(--colorNeutralForeground2BrandSelected);
}
/* variant: <button class="ui-nav__item ui-nav__category" aria-expanded> + sibling <div class="ui-nav__group"> */
.ui-nav__chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-inline-start: auto;
  transition: transform var(--durationFast) var(--curveEasyEase);
}
.ui-nav__category[aria-expanded="true"] .ui-nav__chevron {
  transform: rotate(180deg);
}
.ui-nav__group {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  row-gap: var(--spacingVerticalXXS);
  overflow: hidden;
}
.ui-nav__sub-item {
  padding-inline-start: 46px; /* ui-audit-ignore: Fluent NavSubItem indent */
}
.ui-nav__item.ui-nav__category[aria-expanded="false"]:has(+ .ui-nav__group .ui-nav__item[aria-current]:not([aria-current="false"])) {
  font-weight: var(--fontWeightSemibold);
}
.ui-nav__item.ui-nav__category[aria-expanded="false"]:has(+ .ui-nav__group .ui-nav__item[aria-current]:not([aria-current="false"]))::before {
  content: "";
  position: absolute;
  top: var(--ui-nav-item-pad-block);
  inset-inline-start: calc(var(--spacingHorizontalMNudge) - var(--spacingVerticalL));
  width: 4px;
  height: 20px;
  border-radius: var(--borderRadiusCircular);
  background-color: var(--colorCompoundBrandForeground1);
}
/* AppItem: product name row (subtitle2), and the Hamburger toggle (32px transparent button on Background4) */
.ui-nav__app-item {
  align-items: center;
  gap: var(--spacingHorizontalMNudge);
  margin-inline-start: -6px; /* ui-audit-ignore: Fluent AppItem */
  padding: var(--spacingVerticalS) var(--spacingHorizontalS) var(--spacingVerticalS) var(--spacingHorizontalMNudge);
  font-size: var(--fontSizeBase400);
  font-weight: var(--fontWeightSemibold);
  line-height: var(--lineHeightBase400);
}
.ui-nav__app-item--static,
.ui-nav__app-item--static:hover {
  background-color: var(--colorNeutralBackground4);
  cursor: default;
}
.ui-nav__hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--borderRadiusMedium);
  background-color: var(--colorNeutralBackground4);
  color: var(--colorNeutralForeground2);
  cursor: pointer;
}
.ui-nav__hamburger > svg {
  width: 20px;
  height: 20px;
}
.ui-nav__hamburger:hover {
  background-color: var(--colorNeutralBackground4Hover);
  color: var(--colorNeutralForeground2BrandHover);
}
.ui-nav__hamburger:active {
  background-color: var(--colorNeutralBackground4Pressed);
  color: var(--colorNeutralForeground2BrandPressed);
}
.ui-nav__hamburger:focus-visible {
  outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
  outline-offset: calc(var(--strokeWidthThick) * -1);
}
.ui-nav__section-header {
  margin: var(--spacingVerticalS) 0;
  margin-inline-start: var(--spacingHorizontalMNudge);
  color: inherit;
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase200);
  font-weight: var(--fontWeightSemibold);
  line-height: var(--lineHeightBase200);
}
.ui-nav__divider {
  flex-grow: 0;
  width: 100%;
  height: 0;
  margin: var(--spacingVerticalXS) 0;
  border: 0;
  border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
}

/* ============================================================================ 11. Breadcrumb */
/* Fluent Breadcrumb (react-breadcrumb). Secondary navigation that shows hierarchy (never session history); always
 * pair it with Nav or a header. <nav class="ui-breadcrumb" aria-label="Breadcrumb"><ol><li><a href>…</a></li>…
 * <li><a aria-current="page">Current</a></li></ol></nav>. Items are subtle buttons 24 / 32 / 40px tall, padding 6px
 * (8px large), body1 colorNeutralForeground2; current item semibold with no hover. ChevronRight dividers 12/16/20px.
 * Labels never wrap; keep the trail to 30–50% of the width, truncate names over 30 characters (tooltip with the full
 * name), collapse middle items into a "…" menu, and at narrow widths show only the last level. */
.ui-breadcrumb {
  --ui-breadcrumb-height: 32px;
  --ui-breadcrumb-pad: var(--spacingHorizontalSNudge);
  --ui-breadcrumb-divider: 16px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase300);
  line-height: var(--lineHeightBase300);
}
.ui-breadcrumb > :is(ol, ul) {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ui-breadcrumb li {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  color: var(--colorNeutralForeground2);
  white-space: nowrap;
}
.ui-breadcrumb li + li::before {
  content: "";
  flex-shrink: 0;
  width: var(--ui-breadcrumb-divider);
  height: var(--ui-breadcrumb-divider);
  background-color: currentColor;
  -webkit-mask: var(--ui-glyph-chevron-right-regular-16) center / 100% 100% no-repeat;
  mask: var(--ui-glyph-chevron-right-regular-16) center / 100% 100% no-repeat;
}
.ui-breadcrumb li + li:dir(rtl)::before {
  transform: scaleX(-1);
}
/* variant: explicit <li class="ui-breadcrumb__divider" aria-hidden="true"><svg …></li> items (no drawn chevrons) */
.ui-breadcrumb:has(.ui-breadcrumb__divider) li + li::before {
  content: none;
}
.ui-breadcrumb__divider {
  color: var(--colorNeutralForeground2);
}
.ui-breadcrumb__divider > svg {
  width: var(--ui-breadcrumb-divider);
  height: var(--ui-breadcrumb-divider);
}
.ui-breadcrumb__divider:dir(rtl) > svg {
  transform: scaleX(-1);
}
.ui-breadcrumb li:not(.ui-breadcrumb__divider) > :is(a, button, span) {
  display: inline-flex;
  align-items: center;
  gap: var(--spacingHorizontalXS);
  box-sizing: border-box;
  height: var(--ui-breadcrumb-height);
  margin: 0;
  padding: 0 var(--ui-breadcrumb-pad);
  border: var(--strokeWidthThin) solid transparent;
  border-radius: var(--borderRadiusMedium);
  background-color: var(--colorSubtleBackground);
  color: var(--colorNeutralForeground2);
  font: inherit;
  font-weight: var(--fontWeightRegular);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--durationFaster) var(--curveEasyEase), color var(--durationFaster) var(--curveEasyEase);
}
.ui-breadcrumb li > :is(a[href], button):not([aria-current="page"], :disabled, [aria-disabled="true"]) {
  cursor: pointer;
}
.ui-breadcrumb li > :is(a[href], button):not([aria-current="page"], :disabled, [aria-disabled="true"]):is(:hover, .is-hover) {
  background-color: var(--colorSubtleBackgroundHover);
  color: var(--colorNeutralForeground2Hover);
}
.ui-breadcrumb li > :is(a[href], button):not([aria-current="page"], :disabled, [aria-disabled="true"]):is(:hover, .is-hover) > .ui-icon {
  color: var(--colorNeutralForeground2BrandHover);
}
.ui-breadcrumb li > :is(a[href], button):not([aria-current="page"], :disabled, [aria-disabled="true"]):active {
  background-color: var(--colorSubtleBackgroundPressed);
  color: var(--colorNeutralForeground2Pressed);
}
.ui-breadcrumb li > :is(a, button, span):focus-visible {
  outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
  outline-offset: calc(var(--strokeWidthThick) * -1);
}
.ui-breadcrumb li > [aria-current="page"] {
  font-weight: var(--fontWeightSemibold);
  cursor: auto;
}
.ui-breadcrumb li > :is(:disabled, [aria-disabled="true"]):not([aria-current="page"]) {
  color: var(--colorNeutralForegroundDisabled);
  cursor: not-allowed;
}
.ui-breadcrumb li > :is(a, button, span) > :is(svg, .ui-icon) {
  width: var(--ui-breadcrumb-divider);
  height: var(--ui-breadcrumb-divider);
}
.ui-breadcrumb--small {
  --ui-breadcrumb-height: 24px;
  --ui-breadcrumb-divider: 12px;
  font-size: var(--fontSizeBase200);
  line-height: var(--lineHeightBase200);
}
.ui-breadcrumb--small li + li::before {
  -webkit-mask-image: var(--ui-glyph-chevron-right-regular-12);
  mask-image: var(--ui-glyph-chevron-right-regular-12);
}
.ui-breadcrumb--large {
  --ui-breadcrumb-height: 40px;
  --ui-breadcrumb-pad: var(--spacingHorizontalS);
  --ui-breadcrumb-divider: 20px;
  font-size: var(--fontSizeBase400);
  line-height: var(--lineHeightBase400);
}
.ui-breadcrumb--large li + li::before {
  -webkit-mask-image: var(--ui-glyph-chevron-right-regular-20);
  mask-image: var(--ui-glyph-chevron-right-regular-20);
}

/* ============================================================================ 12. Toolbar */
/* Fluent Toolbar (react-toolbar). role="toolbar" + aria-label; 3+ controls; one Tab stop with arrow keys (roving
 * tabindex, wraps). Padding 4px 8px (small 0 4px, large 4px 20px); items are subtle medium buttons (32px), toggles use
 * aria-pressed. Divider: 1px colorNeutralStroke2 line, 20px tall, 12px each side. Never wraps: move trailing items into
 * a "More" menu instead (show icon + text there). Disabled items use aria-disabled so arrows still reach them. */
.ui-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  box-sizing: border-box;
  min-width: 0;
  padding: var(--spacingVerticalXS) var(--spacingHorizontalS);
}
.ui-toolbar--small {
  padding: 0 var(--spacingHorizontalXS);
}
.ui-toolbar--large {
  padding: var(--spacingVerticalXS) var(--spacingHorizontalXL);
}
.ui-toolbar--vertical {
  flex-direction: column;
  width: fit-content;
  padding: var(--spacingVerticalXS) var(--spacingHorizontalS);
}
.ui-toolbar__group {
  display: flex;
  align-items: center;
}
.ui-toolbar--vertical .ui-toolbar__group {
  flex-direction: column;
}
.ui-toolbar__divider {
  display: inline-block;
  flex-shrink: 0;
  align-self: center;
  width: var(--strokeWidthThin);
  height: 20px;
  margin-inline: var(--spacingHorizontalM);
  background-color: var(--colorNeutralStroke2);
}
.ui-toolbar--vertical .ui-toolbar__divider {
  width: 20px;
  height: var(--strokeWidthThin);
  margin: var(--spacingVerticalM) 0;
}
.ui-toolbar__spacer {
  flex: 1 1 auto;
}

/* ============================================================================ 13. Divider */
/* Fluent Divider (react-divider). 1px line; optional centred label 12/16 with 12px space each side (start/end
 * alignment leaves an 8px lead line). default colorNeutralStroke2 · subtle Stroke3 · strong Stroke1 · brand BrandStroke1.
 * No built-in margins: keep ≥12px above and below (8px when it carries an icon). Place dividers ABOVE headings,
 * never as heading underlines. role="separator" (aria-hidden="true" when purely decorative). */
.ui-divider {
  --ui-divider-line: var(--colorNeutralStroke2);
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-grow: 1;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  color: var(--colorNeutralForeground2);
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase200);
  font-weight: var(--fontWeightRegular);
  line-height: var(--lineHeightBase200);
  text-align: center;
}
.ui-divider::before,
.ui-divider::after {
  content: "";
  flex-grow: 1;
  box-sizing: border-box;
  min-width: 8px;
  border-top: var(--strokeWidthThin) solid var(--ui-divider-line);
}
.ui-divider:not(:empty)::before { margin-inline-end: var(--spacingHorizontalM); }
.ui-divider:not(:empty)::after { margin-inline-start: var(--spacingHorizontalM); }
.ui-divider:is(.ui-divider--start, .ui-divider--align-start)::before { flex-grow: 0; width: 8px; max-width: 8px; }
.ui-divider:is(.ui-divider--end, .ui-divider--align-end)::after { flex-grow: 0; width: 8px; max-width: 8px; }
.ui-divider--inset { padding-inline: var(--spacingHorizontalM); }
.ui-divider--subtle { --ui-divider-line: var(--colorNeutralStroke3); color: var(--colorNeutralForeground3); }
.ui-divider--strong { --ui-divider-line: var(--colorNeutralStroke1); color: var(--colorNeutralForeground1); }
.ui-divider--brand { --ui-divider-line: var(--colorBrandStroke1); color: var(--colorBrandForeground1); }
.ui-divider--vertical {
  flex-direction: column;
  flex-grow: 0;
  align-self: stretch;
  width: auto;
  min-height: 20px;
}
.ui-divider--vertical:not(:empty) { min-height: 84px; }
.ui-divider--vertical::before,
.ui-divider--vertical::after {
  min-width: 0;
  min-height: 8px;
  border-top: 0;
  border-inline-start: var(--strokeWidthThin) solid var(--ui-divider-line);
}
.ui-divider--vertical:not(:empty)::before { margin: 0 0 var(--spacingVerticalM); }
.ui-divider--vertical:not(:empty)::after { margin: var(--spacingVerticalM) 0 0; }
.ui-divider--vertical.ui-divider--inset { padding-inline: 0; margin-block: var(--spacingVerticalM); }
hr.ui-divider {
  display: block;
  flex-grow: 0;
  height: 0;
  border: 0;
  border-top: var(--strokeWidthThin) solid var(--ui-divider-line);
}
hr.ui-divider::before,
hr.ui-divider::after {
  content: none;
}

/* ============================================================================ 14. Accordion */
/* Fluent Accordion (react-accordion) on native <details>/<summary> (free keyboard + a11y):
 * <div class="ui-accordion"><details><summary>How do I reset my password</summary><div class="ui-accordion__panel">…
 * Header: min-height 44px (32px small), padding 0 12px 0 10px, body1 colorNeutralForeground1, radius 4px, no hover fill.
 * ChevronRight 20px before the text, rotates to 90° when open (200ms ease-out); --end puts it after the text
 * (90° closed, −90° open). Panel: 0 12px inset; expands with height in 200ms curveEasyEaseMax where supported.
 * Don't hide task-critical information in an accordion; wrap summaries in headings when the page needs structure. */
.ui-accordion {
  display: flex;
  flex-direction: column;
  interpolate-size: allow-keywords;
}
details.ui-accordion {
  display: block;
}
:is(.ui-accordion summary) {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 44px;
  margin: 0;
  padding: 0 var(--spacingHorizontalM) 0 var(--spacingHorizontalMNudge);
  border-radius: var(--borderRadiusMedium);
  background-color: var(--colorTransparentBackground);
  color: var(--colorNeutralForeground1);
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase300);
  font-weight: var(--fontWeightRegular);
  line-height: var(--lineHeightBase300);
  text-align: start;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ui-accordion summary::-webkit-details-marker {
  display: none;
}
.ui-accordion summary::before {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-inline-end: var(--spacingHorizontalS);
  background-color: currentColor;
  -webkit-mask: var(--ui-glyph-chevron-right-regular-20) center / 100% 100% no-repeat;
  mask: var(--ui-glyph-chevron-right-regular-20) center / 100% 100% no-repeat;
  transition: transform var(--durationNormal) ease-out;
}
.ui-accordion summary:dir(rtl)::before { transform: rotate(180deg); }
.ui-accordion details[open] > summary::before,
details.ui-accordion[open] > summary::before {
  transform: rotate(90deg);
}
.ui-accordion summary:is(:focus-visible, .is-focus) {
  outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
  outline-offset: 0;
}
.ui-accordion summary > :is(svg, .ui-icon) {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-inline-end: var(--spacingHorizontalS);
}
/* variant: an explicit <span class="ui-accordion__chevron"><svg …></span> in the summary (no drawn chevron) */
.ui-accordion summary:has(> .ui-accordion__chevron)::before {
  content: none;
}
.ui-accordion__chevron {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-inline-end: var(--spacingHorizontalS);
}
.ui-accordion__chevron > svg {
  width: 20px;
  height: 20px;
  transition: transform var(--durationNormal) ease-out;
}
.ui-accordion__chevron:dir(rtl) > svg { transform: rotate(180deg); }
.ui-accordion details[open] > summary > .ui-accordion__chevron > svg,
details.ui-accordion[open] > summary > .ui-accordion__chevron > svg { transform: rotate(90deg); }
.ui-accordion:is(.ui-accordion--end, .ui-accordion--chevron-end) .ui-accordion__chevron {
  order: 1;
  margin-inline-start: auto;
  padding-inline: var(--spacingHorizontalS) 0;
}
.ui-accordion:is(.ui-accordion--end, .ui-accordion--chevron-end) .ui-accordion__chevron > svg { transform: rotate(90deg); }
.ui-accordion:is(.ui-accordion--end, .ui-accordion--chevron-end) details[open] > summary > .ui-accordion__chevron > svg { transform: rotate(-90deg); }
.ui-accordion--chevron-end summary::before {
  order: 1;
  margin-inline: auto 0;
  transform: rotate(90deg);
}
.ui-accordion--chevron-end details[open] > summary::before { transform: rotate(-90deg); }
.ui-accordion--chevron-end summary { padding-inline: var(--spacingHorizontalM) var(--spacingHorizontalMNudge); }
.ui-accordion__icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-inline-end: var(--spacingHorizontalS);
}
.ui-accordion__icon > svg { width: 20px; height: 20px; }
.ui-accordion--end summary::before {
  order: 1;
  margin-inline: auto 0;
  padding: 0;
  transform: rotate(90deg);
}
.ui-accordion--end summary {
  padding-inline: var(--spacingHorizontalM) var(--spacingHorizontalMNudge);
}
.ui-accordion--end details[open] > summary::before,
details.ui-accordion--end[open] > summary::before {
  transform: rotate(-90deg);
}
.ui-accordion--small summary {
  min-height: 32px;
  font-size: var(--fontSizeBase200);
}
.ui-accordion--large summary {
  font-size: var(--fontSizeBase400);
  line-height: var(--lineHeightBase400);
}
.ui-accordion--extra-large summary {
  font-size: var(--fontSizeBase500);
  line-height: var(--lineHeightBase500);
}
.ui-accordion__panel {
  margin: 0 var(--spacingHorizontalM);
}
.ui-accordion details:has(> summary[aria-disabled="true"]) > summary {
  color: var(--colorNeutralForegroundDisabled);
  cursor: not-allowed;
}
@supports selector(::details-content) {
  .ui-accordion details::details-content,
  details.ui-accordion::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size var(--durationNormal) var(--curveEasyEaseMax),
      content-visibility var(--durationNormal) var(--curveEasyEaseMax) allow-discrete;
  }
  .ui-accordion details[open]::details-content,
  details.ui-accordion[open]::details-content {
    block-size: auto;
  }
}

/* ============================================================================ 15. Carousel */
/* Fluent Carousel (react-carousel). Rotating featured content, card rows, galleries — never primary navigation.
 * Viewport = horizontal scroll-snap track (touch and trackpad friendly); cards fill it (flex 0 0 100%) or size to
 * content (.ui-carousel__card--auto). Controls row below (12px gap): prev/next = 32px subtle icon buttons on
 * colorNeutralBackgroundAlpha; dots = 8px colorNeutralForeground1 at 60% (75% hover), selected = 16×8px pill at 100%,
 * each with a 24×24px hit area, on a translucent pill track (radius 8px). Brand dots: .ui-carousel__nav--brand.
 * Autoplay is never on by default and always has a pause button. At ≤600px slides go full width.
 * ARIA: root role="region" + aria-label; cards role="group" aria-roledescription="slide" aria-label="2 of 5" (or
 * tabpanel); dots role="tablist" > role="tab" aria-selected aria-controls; announce "Slide 2 of 5" politely. */
.ui-carousel {
  --ui-carousel-gap: 0px;
  position: relative;
  overflow-anchor: none;
}
.ui-carousel__viewport {
  display: flex;
  gap: var(--ui-carousel-gap);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.ui-carousel__viewport::-webkit-scrollbar {
  display: none;
}
/* variant: cards inside a .ui-carousel__slider track (the viewport stays the scroll container) */
.ui-carousel__viewport:has(> .ui-carousel__slider) {
  display: block;
}
.ui-carousel__slider {
  display: flex;
  gap: var(--ui-carousel-gap);
  overflow-anchor: none;
}
.ui-carousel__card {
  flex: 0 0 100%;
  min-width: 0;
  max-width: 100%;
  scroll-snap-align: start;
}
.ui-carousel__card--auto {
  flex: 0 0 auto;
}
.ui-carousel--elevated .ui-carousel__viewport {
  --ui-carousel-gap: var(--spacingHorizontalXXL);
  padding: var(--spacingVerticalL);
  scroll-padding-inline: var(--spacingHorizontalL);
}
.ui-carousel--elevated .ui-carousel__card {
  overflow: hidden;
  border-radius: var(--borderRadiusXLarge);
  box-shadow: var(--shadow16);
}
.ui-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: var(--spacingVerticalM);
}
.ui-carousel__controls:is(.ui-carousel__controls--wide, .ui-carousel__controls--inline-wide) > .ui-carousel__button--prev { margin-inline-end: auto; }
.ui-carousel__controls:is(.ui-carousel__controls--wide, .ui-carousel__controls--inline-wide) > .ui-carousel__button--next { margin-inline-start: auto; }
.ui-carousel__button,
.ui-carousel__autoplay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  margin: auto 0;
  padding: 5px; /* ui-audit-ignore: icon-only medium button */
  border: var(--strokeWidthThin) solid transparent;
  border-radius: var(--borderRadiusMedium);
  background-color: var(--colorNeutralBackgroundAlpha);
  color: var(--colorNeutralForeground2);
  cursor: pointer;
  transition: background var(--durationFaster) var(--curveEasyEase), color var(--durationFaster) var(--curveEasyEase);
}
.ui-carousel__button::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: var(--ui-glyph-chevron-right-regular-20) center / 100% 100% no-repeat;
  mask: var(--ui-glyph-chevron-right-regular-20) center / 100% 100% no-repeat;
}
/* buttons that carry their own SVG skip the drawn chevron; .ui-carousel__autoplay = play/pause toggle (aria-pressed) */
.ui-carousel__button:not(:empty)::before {
  content: none;
}
:is(.ui-carousel__button, .ui-carousel__autoplay) > svg {
  width: 20px;
  height: 20px;
}
.ui-carousel__autoplay[aria-pressed="true"] .ui-carousel__icon-play,
.ui-carousel__autoplay:not([aria-pressed="true"]) .ui-carousel__icon-pause {
  display: none;
}
.ui-carousel__button--prev::before {
  -webkit-mask-image: var(--ui-glyph-chevron-left-regular-20);
  mask-image: var(--ui-glyph-chevron-left-regular-20);
}
.ui-carousel__button:dir(rtl)::before {
  transform: scaleX(-1);
}
.ui-carousel__button:not(:disabled):is(:hover, .is-hover),
.ui-carousel__autoplay:not(:disabled):is(:hover, .is-hover) {
  background-color: var(--colorSubtleBackgroundHover);
  color: var(--colorNeutralForeground2BrandHover);
}
.ui-carousel__button:not(:disabled):active,
.ui-carousel__autoplay:not(:disabled):active {
  background-color: var(--colorSubtleBackgroundPressed);
  color: var(--colorNeutralForeground2BrandPressed);
}
.ui-carousel__button:is(:focus-visible, .is-focus),
.ui-carousel__autoplay:is(:focus-visible, .is-focus) {
  border-color: var(--colorStrokeFocus2);
  box-shadow: 0 0 0 var(--strokeWidthThin) var(--colorStrokeFocus2) inset;
  outline: var(--strokeWidthThick) solid transparent;
}
.ui-carousel__button:disabled {
  background-color: transparent;
  color: var(--colorNeutralForegroundDisabled);
  cursor: not-allowed;
}
.ui-carousel__nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: auto var(--spacingHorizontalS);
  border-radius: var(--borderRadiusXLarge);
  background-color: var(--colorNeutralBackgroundAlpha);
}
.ui-carousel__dot {
  display: block;
  box-sizing: content-box;
  width: 8px;
  height: 8px;
  margin: 0;
  padding: var(--spacingVerticalS) var(--spacingHorizontalS);
  border: 0;
  background-color: transparent;
  cursor: pointer;
  outline: var(--strokeWidthThin) solid transparent;
}
.ui-carousel__dot::after {
  content: "";
  display: block;
  width: 100%;
  height: 8px;
  border-radius: 50%;
  background-color: var(--colorNeutralForeground1);
  opacity: 0.6;
}
.ui-carousel__dot:is(:hover, .is-hover)::after { opacity: 0.75; }
.ui-carousel__dot:active::after { opacity: 1; }
.ui-carousel__dot[aria-selected="true"] {
  width: 16px;
  padding: var(--spacingVerticalS) var(--spacingHorizontalXS);
}
.ui-carousel__dot[aria-selected="true"]::after {
  border-radius: var(--borderRadiusMedium);
  opacity: 1;
}
.ui-carousel__dot[aria-selected="true"]:is(:hover, .is-hover)::after { opacity: 0.75; }
.ui-carousel__dot[aria-selected="true"]:active::after { opacity: 0.65; }
.ui-carousel__nav--brand .ui-carousel__dot[aria-selected="true"]::after {
  background-color: var(--colorCompoundBrandBackground);
  opacity: 1;
}
.ui-carousel__nav--brand .ui-carousel__dot[aria-selected="true"]:is(:hover, .is-hover)::after {
  background-color: var(--colorCompoundBrandBackgroundHover);
}
.ui-carousel__nav--brand .ui-carousel__dot[aria-selected="true"]:active::after {
  background-color: var(--colorCompoundBrandBackgroundPressed);
}
.ui-carousel__dot:is(:focus-visible, .is-focus) {
  margin: -2px;
  border: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
  border-radius: var(--borderRadiusMedium);
  outline: none;
}

/* ============================================================================ 16. Menu */
/* Fluent Menu (react-menu). Actions or navigation revealed by a trigger (to collect form values use Select/Dropdown).
 * Surface: colorNeutralBackground1, radius 4px, shadow16, padding 4px, 2px between items, min-width 138px,
 * max-width 300px; enters with fade + 10px slide, 400ms curveDecelerateMid (no exit animation).
 * Item: min-height 32px, padding 6px, gap 4px, body1 colorNeutralForeground2; hover colorNeutralBackground1Hover +
 * Foreground2Hover, icon turns colorNeutralForeground2BrandSelected and filled. Checkable items (menuitemcheckbox /
 * menuitemradio) reserve a 16px Checkmark16Filled slot shown when aria-checked="true". Submenu triggers
 * (aria-haspopup) get a ChevronRight. Shortcut text: .ui-menu__secondary (caption1, Foreground3).
 * Position it yourself (absolute under the trigger, or the Popover API: <div class="ui-menu" popover>) and add
 * roving focus: Up/Down wrap, Home/End, type-ahead, Esc/Tab close and return focus to the trigger. */
.ui-menu {
  display: flex;
  flex-direction: column;
  gap: var(--spacingVerticalXXS);
  box-sizing: border-box;
  width: max-content;
  min-width: 138px;
  max-width: 300px;
  margin: 0;
  padding: var(--spacingVerticalXS);
  overflow-x: hidden;
  border: var(--strokeWidthThin) solid var(--colorTransparentStroke);
  border-radius: var(--borderRadiusMedium);
  background-color: var(--colorNeutralBackground1);
  box-shadow: var(--shadow16);
  color: var(--colorNeutralForeground1);
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase300);
  font-weight: var(--fontWeightRegular);
  line-height: var(--lineHeightBase300);
  text-align: start;
  z-index: var(--zIndexFloating, 4000);
  animation: ui-surface-enter var(--durationSlower) var(--curveDecelerateMid);
}
.ui-menu[popover] {
  position: fixed;
  inset: auto;
}
.ui-menu[popover]:not(:popover-open) {
  display: none;
}
@keyframes ui-surface-enter {
  from {
    opacity: 0;
    translate: 0 calc(var(--ui-enter-offset, -10px));
  }
}
.ui-menu__item {
  --ui-menu-icon: currentColor;
  position: relative;
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
  gap: var(--spacingHorizontalXS);
  box-sizing: border-box;
  width: 100%;
  max-width: 290px;
  min-height: 32px;
  margin: 0;
  padding: var(--spacingVerticalSNudge);
  border: none;
  border-radius: var(--borderRadiusMedium);
  background-color: var(--colorNeutralBackground1);
  color: var(--colorNeutralForeground2);
  font: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* text directly in the item (no .ui-menu__label): give it the label's 2px inset */
.ui-menu__item:not(:has(> .ui-menu__label)) {
  padding-inline: calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));
}
.ui-menu__item:not(:has(> .ui-menu__label)) > :is(svg, .ui-icon):first-of-type,
.ui-menu__item:not(:has(> .ui-menu__label)):is([role="menuitemcheckbox"], [role="menuitemradio"])::before {
  margin-inline: calc(var(--spacingHorizontalXXS) * -1) var(--spacingHorizontalXXS);
}
.ui-menu__item > :is(svg, .ui-icon) {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--ui-menu-icon);
}
.ui-menu__label {
  flex-grow: 1;
  padding: 0 var(--spacingHorizontalXXS);
}
.ui-menu__secondary {
  margin-inline-start: auto;
  padding: 0 var(--spacingHorizontalXXS);
  color: var(--colorNeutralForeground3);
  font-size: var(--fontSizeBase200);
  line-height: var(--lineHeightBase300);
}
.ui-menu__item:not([aria-disabled="true"]):is(:hover, .is-hover, [aria-expanded="true"]) {
  --ui-menu-icon: var(--colorNeutralForeground2BrandSelected);
  background-color: var(--colorNeutralBackground1Hover);
  color: var(--colorNeutralForeground2Hover);
}
.ui-menu__item:not([aria-disabled="true"]):is(:hover, .is-hover, [aria-expanded="true"]) .ui-icon--filled { display: inline-block; }
.ui-menu__item:not([aria-disabled="true"]):is(:hover, .is-hover, [aria-expanded="true"]) .ui-icon--regular { display: none; }
.ui-menu__item:not([aria-disabled="true"]):is(:hover, .is-hover, [aria-expanded="true"]) .ui-menu__secondary {
  color: var(--colorNeutralForeground3Hover);
}
.ui-menu__item:not([aria-disabled="true"]):is(:active, .is-active) {
  background-color: var(--colorNeutralBackground1Pressed);
  color: var(--colorNeutralForeground2Pressed);
}
.ui-menu__item:is(:focus-visible, .is-focus) {
  outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
  outline-offset: 0;
}
.ui-menu__item[aria-disabled="true"] {
  --ui-menu-icon: currentColor;
  color: var(--colorNeutralForegroundDisabled);
  cursor: not-allowed;
}
.ui-menu__item[aria-disabled="true"] .ui-menu__secondary {
  color: inherit;
}
/* checkmark slot for checkbox / radio items */
.ui-menu__item:is([role="menuitemcheckbox"], [role="menuitemradio"])::before {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: var(--spacingVerticalXXS);
  background-color: currentColor;
  -webkit-mask: var(--ui-glyph-checkmark-filled-16) center / 100% 100% no-repeat;
  mask: var(--ui-glyph-checkmark-filled-16) center / 100% 100% no-repeat;
  visibility: hidden;
}
.ui-menu__item[aria-checked="true"]::before {
  visibility: visible;
}
/* variant: an explicit <svg class="ui-menu__check"> (Checkmark16Filled) instead of the drawn slot */
.ui-menu__item:has(> .ui-menu__check)::before {
  content: none;
}
.ui-menu__check {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: var(--spacingVerticalXXS);
  visibility: hidden;
}
.ui-menu__item[aria-checked="true"] > .ui-menu__check {
  visibility: visible;
}
/* submenu indicator */
.ui-menu__item[aria-haspopup]:not([aria-haspopup="false"])::after {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-inline-start: auto;
  background-color: currentColor;
  -webkit-mask: var(--ui-glyph-chevron-right-regular-20) center / 100% 100% no-repeat;
  mask: var(--ui-glyph-chevron-right-regular-20) center / 100% 100% no-repeat;
}
.ui-menu__item[aria-haspopup]:dir(rtl)::after {
  transform: scaleX(-1);
}
.ui-menu__group-header {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 32px;
  margin: 0;
  padding: 0 var(--spacingHorizontalS);
  color: var(--colorNeutralForeground3);
  font-size: var(--fontSizeBase200);
  font-weight: var(--fontWeightSemibold);
  line-height: var(--lineHeightBase200);
}
.ui-menu__divider {
  flex-shrink: 0;
  width: auto;
  height: 0;
  margin: var(--spacingVerticalXS) -5px; /* ui-audit-ignore: Fluent MenuDivider bleeds to the surface edge */
  border: 0;
  border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
}
.ui-menu [role="group"] {
  display: flex;
  flex-direction: column;
  gap: var(--spacingVerticalXXS);
}

/* ============================================================================ 17. Popover */
/* Fluent Popover (react-popover usePopoverSurfaceStyles.styles.ts). Small, non-blocking, non-essential context that may
 * hold interactive content (plain hints → Tooltip; decisions → Dialog). colorNeutralBackground1, radius 4px,
 * 1px transparent border (visible in high contrast), shadow16 geometry as drop-shadow, body1. Padding 12 / 16 / 20px
 * (small / medium / large). inverted: colorNeutralBackgroundStatic + white text; brand: colorBrandBackground.
 * Enter: fade + 10px slide, 400ms curveDecelerateMid; no exit animation. Native: <div class="ui-popover" popover>
 * + <button popovertarget>; position it next to its trigger (anchor positioning or a few lines of script);
 * Esc and outside click close it; focus moves to its first focusable element when it holds actions. */
.ui-popover {
  box-sizing: border-box;
  max-width: calc(100vw - 2 * var(--spacingHorizontalL));
  margin: 0;
  padding: var(--spacingVerticalL);
  border: var(--strokeWidthThin) solid var(--colorTransparentStroke);
  border-radius: var(--borderRadiusMedium);
  background-color: var(--colorNeutralBackground1);
  color: var(--colorNeutralForeground1);
  filter: drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) drop-shadow(0 8px 16px var(--colorNeutralShadowKey));
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase300);
  font-weight: var(--fontWeightRegular);
  line-height: var(--lineHeightBase300);
  text-align: start;
  overflow: visible;
  z-index: var(--zIndexFloating, 4000);
  animation: ui-surface-enter var(--durationSlower) var(--curveDecelerateMid);
}
.ui-popover[popover] {
  position: fixed;
  inset: auto;
}
.ui-popover--small { padding: var(--spacingVerticalM); }
.ui-popover--large { padding: var(--spacingVerticalXL); }
.ui-popover--inverted {
  background-color: var(--colorNeutralBackgroundStatic);
  color: var(--colorNeutralForegroundStaticInverted);
}
.ui-popover--brand {
  background-color: var(--colorBrandBackground);
  color: var(--colorNeutralForegroundOnBrand);
}
:is(.ui-popover--inverted, .ui-popover--brand) .ui-link {
  color: var(--colorNeutralForegroundInvertedLink);
}

/* ============================================================================ 18. Tooltip */
/* Fluent Tooltip (react-tooltip useTooltipStyles.styles.ts). Plain, non-essential text on hover/keyboard focus of an
 * interactive element; it IS the accessible name for icon-only buttons (aria-labelledby → tooltip id) or a
 * description (aria-describedby). caption1 12/16, padding 4px 11px 6px (28px single line), max-width 240px,
 * radius 4px, colorNeutralBackground1 (inverted: colorNeutralBackgroundStatic), shadow8 geometry as drop-shadow,
 * 4px from the target, shows after 250ms and hides 250ms after the pointer leaves (hovering the tooltip keeps it).
 * No animation. Markup: <span class="ui-tooltip-host"><button aria-labelledby="t1">…</button>
 * <span class="ui-tooltip" role="tooltip" id="t1">Copy link</span></span>. Esc must hide it: set data-dismissed on
 * the host (remove on pointerleave/blur). */
.ui-tooltip-host {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}
.ui-tooltip {
  position: absolute;
  bottom: calc(100% + var(--spacingVerticalXS));
  left: 50%;
  z-index: var(--zIndexPriority, 5000);
  box-sizing: border-box;
  width: max-content;
  max-width: 240px;
  padding: var(--spacingVerticalXS) 11px 6px; /* ui-audit-ignore: Fluent 5px 12px 7px minus the 1px border */
  border: var(--strokeWidthThin) solid var(--colorTransparentStroke);
  border-radius: var(--borderRadiusMedium);
  background-color: var(--colorNeutralBackground1);
  color: var(--colorNeutralForeground1);
  filter: drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) drop-shadow(0 4px 8px var(--colorNeutralShadowKey));
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase200);
  font-weight: var(--fontWeightRegular);
  line-height: var(--lineHeightBase200);
  text-align: start;
  white-space: normal;
  overflow-wrap: break-word;
  cursor: default;
  transform: translateX(-50%);
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 250ms; /* hide delay */
}
.ui-tooltip-host:hover > .ui-tooltip,
.ui-tooltip-host:has(> :focus-visible) > .ui-tooltip,
.ui-tooltip.is-visible {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 250ms; /* show delay */
}
.ui-tooltip-host[data-dismissed] > .ui-tooltip {
  visibility: hidden;
  transition-delay: 0s;
}
.ui-tooltip--below {
  top: calc(100% + var(--spacingVerticalXS));
  bottom: auto;
}
.ui-tooltip--start {
  left: 0;
  transform: none;
}
.ui-tooltip--end {
  left: auto;
  right: 0;
  transform: none;
}
.ui-tooltip--inverted {
  background-color: var(--colorNeutralBackgroundStatic);
  color: var(--colorNeutralForegroundStaticInverted);
}

/* ============================================================================ 19. Dialog */
/* Fluent Dialog (react-dialog) on native <dialog> (showModal() gives focus trap, Esc, inert page):
 * <dialog class="ui-dialog" aria-labelledby="d-title"><h2 class="ui-dialog__title" id="d-title">Delete this file?</h2>
 * <div class="ui-dialog__body">…</div><div class="ui-dialog__actions"><button class="ui-button ui-button--primary">Delete
 * </button><button class="ui-button">Cancel</button></div></dialog>
 * Surface: max-width 600px (full width ≤480px with stacked actions), padding 24px, gap 8px, radius 8px, shadow64,
 * colorNeutralBackground1; title subtitle1 20/28 semibold; body body1, scrolls between a fixed title and actions;
 * actions end-aligned, primary first, at most 3 (prefer 2). Backdrop colorBackgroundOverlay (light 40% / dark 50%).
 * Motion: surface scale 0.85→1 + fade, 250ms curveDecelerateMid; backdrop fade 250ms curveEasyEase.
 * Modal = backdrop click closes; alert (role="alertdialog") = only the buttons close it. Never default-focus a
 * destructive button; return focus to the trigger on close. */
.ui-dialog {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  max-width: 600px;
  height: fit-content;
  max-height: 100vh;
  max-height: 100dvh;
  margin: auto;
  padding: var(--spacingVerticalXXL);
  border: var(--strokeWidthThin) solid var(--colorTransparentStroke);
  border-radius: var(--borderRadiusXLarge);
  background-color: var(--colorNeutralBackground1);
  box-shadow: var(--shadow64);
  color: var(--colorNeutralForeground1);
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase300);
  font-weight: var(--fontWeightRegular);
  line-height: var(--lineHeightBase300);
  text-align: start;
}
.ui-dialog[open] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(32px, 1fr) auto;
  gap: var(--spacingVerticalS);
  animation: ui-dialog-enter var(--durationGentle) var(--curveDecelerateMid);
}
.ui-dialog:not(:has(.ui-dialog__actions)) {
  padding-bottom: calc(var(--spacingVerticalXXL) * 2); /* F2: no footer → 24px extra bottom space */
}
.ui-dialog::backdrop {
  background-color: var(--colorBackgroundOverlay);
  animation: ui-fade-enter var(--durationGentle) var(--curveEasyEase);
}
@keyframes ui-dialog-enter {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
}
@keyframes ui-fade-enter {
  from { opacity: 0; }
}
.ui-dialog__title {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  margin: 0;
  color: inherit;
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase500);
  font-weight: var(--fontWeightSemibold);
  line-height: var(--lineHeightBase500);
}
.ui-dialog__close {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: start;
}
.ui-dialog__body {
  grid-column: 1 / -1;
  grid-row: 2;
  min-height: 32px;
  margin: -2px; /* room for focus rings of inner controls */
  padding: 2px;
  overflow-y: auto;
}
.ui-dialog__actions {
  grid-column: 1 / -1;
  grid-row: 3;
  justify-self: end;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacingHorizontalS);
  height: fit-content;
}
@media screen and (max-width: 480px) {
  .ui-dialog {
    max-width: 100vw;
  }
  .ui-dialog__actions {
    flex-direction: column;
    justify-self: stretch;
  }
}
@media screen and (max-height: 359px) {
  .ui-dialog {
    overflow-y: auto;
  }
  .ui-dialog__body {
    overflow-y: visible;
  }
}
html:has(dialog:is(.ui-dialog, .ui-drawer)[open]:modal) {
  overflow: hidden;
  scrollbar-gutter: stable;
}

/* Standalone close button (an empty <button class="ui-dialog__close" aria-label="Close">): 32px subtle icon button
 * with DismissRegular. You can also use .ui-button.ui-button--subtle.ui-button--icon-only with your own icon. */
:is(.ui-dialog__close, .ui-drawer__close):not(.ui-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  margin-block: 0;
  padding: 0;
  border: var(--strokeWidthThin) solid transparent;
  border-radius: var(--borderRadiusMedium);
  background-color: var(--colorSubtleBackground);
  color: var(--colorNeutralForeground2);
  cursor: pointer;
}
:is(.ui-dialog__close, .ui-drawer__close):not(.ui-button):empty::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: var(--ui-glyph-dismiss-regular-20) center / 100% 100% no-repeat;
  mask: var(--ui-glyph-dismiss-regular-20) center / 100% 100% no-repeat;
}
:is(.ui-dialog__close, .ui-drawer__close):not(.ui-button):is(:hover, .is-hover) {
  background-color: var(--colorSubtleBackgroundHover);
  color: var(--colorNeutralForeground2BrandHover);
}
:is(.ui-dialog__close, .ui-drawer__close):not(.ui-button):active {
  background-color: var(--colorSubtleBackgroundPressed);
  color: var(--colorNeutralForeground2BrandPressed);
}
:is(.ui-dialog__close, .ui-drawer__close):not(.ui-button):focus-visible {
  border-color: var(--colorStrokeFocus2);
  box-shadow: 0 0 0 var(--strokeWidthThin) var(--colorStrokeFocus2) inset;
  outline: var(--strokeWidthThick) solid transparent;
}

/* ============================================================================ 20. Drawer */
/* Fluent Drawer (react-drawer). Supplemental panel from an edge: overlay = native <dialog class="ui-drawer"> opened with
 * showModal() (dims the page, traps focus, Esc closes); inline = <aside class="ui-drawer ui-drawer--inline"> beside the
 * content. Sizes: small 320px (default) · medium 592px · large 940px · full 100vw; capped at 100vw.
 * Positions: start (default; navigation) · end (details, filters, notifications) · bottom.
 * Surface colorNeutralBackground1; overlay adds shadow64 and colorBackgroundOverlay backdrop.
 * Header 24px 24px 8px with title subtitle1 20/28 + close (Dismiss) aligned to the edge; body 0 24px, scrolls;
 * footer 16px 24px 24px, buttons start-aligned, primary first. Motion: slide + fade 250/300/400/500ms by size,
 * curveDecelerateMid in (backdrop fades linear). Keep tasks to 2–3 steps; confirm data loss with a Dialog. */
.ui-drawer {
  --ui-drawer-size: 320px;
  --ui-drawer-duration: var(--durationGentle);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-sizing: border-box;
  width: var(--ui-drawer-size);
  max-width: 100vw;
  overflow: hidden;
  background-color: var(--colorNeutralBackground1);
  color: var(--colorNeutralForeground1);
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase300);
  font-weight: var(--fontWeightRegular);
  line-height: var(--lineHeightBase300);
  text-align: start;
}
.ui-drawer--small { --ui-drawer-size: 320px; --ui-drawer-duration: var(--durationGentle); }
.ui-drawer--medium { --ui-drawer-size: 592px; --ui-drawer-duration: var(--durationSlow); }
.ui-drawer--large { --ui-drawer-size: 940px; --ui-drawer-duration: var(--durationSlower); }
.ui-drawer--full { --ui-drawer-size: 100vw; --ui-drawer-duration: var(--durationUltraSlow); }
dialog.ui-drawer {
  position: fixed;
  inset: 0 auto 0 0;
  height: 100%;
  max-height: 100vh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  border-inline-end: var(--strokeWidthThin) solid var(--colorTransparentStroke);
  box-shadow: var(--shadow64);
}
dialog.ui-drawer:not([open]) {
  display: none;
}
dialog.ui-drawer[open] {
  animation: ui-drawer-enter-start var(--ui-drawer-duration) var(--curveDecelerateMid) both;
}
dialog.ui-drawer::backdrop {
  background-color: var(--colorBackgroundOverlay);
  animation: ui-fade-enter var(--ui-drawer-duration) var(--curveLinear);
}
dialog.ui-drawer--start {
  inset: 0 auto 0 0;
}
dialog.ui-drawer--end {
  inset: 0 0 0 auto;
  border-inline-end: 0;
  border-inline-start: var(--strokeWidthThin) solid var(--colorTransparentStroke);
}
dialog.ui-drawer--end[open] {
  animation-name: ui-drawer-enter-end;
}
dialog.ui-drawer--bottom {
  inset: auto 0 0 0;
  width: 100%;
  max-width: none;
  height: var(--ui-drawer-size);
  border: 0;
  border-top: var(--strokeWidthThin) solid var(--colorTransparentStroke);
}
dialog.ui-drawer--bottom[open] {
  animation-name: ui-drawer-enter-bottom;
}
dialog.ui-drawer:dir(rtl)[open] { animation-name: ui-drawer-enter-end; }
dialog.ui-drawer--end:dir(rtl)[open] { animation-name: ui-drawer-enter-start; }
@keyframes ui-drawer-enter-start {
  from { opacity: 0; transform: translate3d(-100%, 0, 0); }
}
@keyframes ui-drawer-enter-end {
  from { opacity: 0; transform: translate3d(100%, 0, 0); }
}
@keyframes ui-drawer-enter-bottom {
  from { opacity: 0; transform: translate3d(0, 100%, 0); }
}
/* inline drawer: sits next to the content, no shadow; optional 1px separator */
.ui-drawer--inline {
  position: relative;
  flex-shrink: 0;
}
.ui-drawer--separator {
  border-inline-end: var(--strokeWidthThin) solid var(--colorNeutralBackground3);
}
.ui-drawer--separator.ui-drawer--end {
  border-inline-end: 0;
  border-inline-start: var(--strokeWidthThin) solid var(--colorNeutralBackground3);
}
.ui-drawer__header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--spacingHorizontalS);
  box-sizing: border-box;
  width: 100%;
  padding: var(--spacingVerticalXXL) var(--spacingHorizontalXXL) var(--spacingVerticalS);
}
/* variant: DrawerHeader as a column holding .ui-drawer__title-row (title + close) and optional navigation rows */
.ui-drawer__header:has(> .ui-drawer__title-row) {
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacingVerticalS);
}
.ui-drawer__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--spacingHorizontalS);
}
.ui-drawer__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: inherit;
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase500);
  font-weight: var(--fontWeightSemibold);
  line-height: var(--lineHeightBase500);
}
.ui-drawer__close {
  margin-inline-end: calc(var(--spacingHorizontalS) * -1);
}
.ui-drawer__body {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 var(--spacingHorizontalXXL);
  overflow: auto;
}
.ui-drawer__body:first-child { padding-top: calc(var(--spacingVerticalXXL) + 1px); }
.ui-drawer__body:last-child { padding-bottom: calc(var(--spacingVerticalXXL) + 1px); }
.ui-drawer__footer {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacingHorizontalS);
  box-sizing: border-box;
  width: 100%;
  padding: var(--spacingVerticalL) var(--spacingHorizontalXXL) var(--spacingVerticalXXL);
}

/* ============================================================================ 21. MessageBar */
/* Fluent MessageBar (react-message-bar). Persistent status for a page or container, until resolved or dismissed.
 * Grid: [intent icon 20px] [body] [actions] [dismiss]; min-height 36px, padding-start 12px, 1px border, radius 4px
 * (square for page-level bars under the command bar). Intents (background / border / icon):
 *   info     colorNeutralBackground3 / colorNeutralStroke1 / colorNeutralForeground3, InfoFilled
 *   success  colorStatusSuccessBackground1 / SuccessBorder1 / SuccessForeground1, CheckmarkCircleFilled
 *   warning  colorStatusWarningBackground1 / WarningBorder1 / WarningForeground3, WarningFilled
 *   error    colorStatusDangerBackground1 / DangerBorder1 / DangerForeground1, DiamondDismissFilled
 * Body body1 (title semibold, then the message); action buttons are small; dismiss = transparent 24px X.
 * Body text wraps; .ui-message-bar--multiline (and every bar under 480px) moves actions under the text, which is
 * Fluent's auto-reflow layout. Stack order: error → warning → success → info. Announce: info polite, others assertive. */
.ui-message-bar {
  --ui-message-bar-icon: var(--ui-glyph-info-filled-20);
  --ui-message-bar-icon-color: var(--colorNeutralForeground3);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "icon body actions dismiss";
  align-items: center;
  box-sizing: border-box;
  min-height: 36px;
  padding-inline-start: var(--spacingHorizontalM);
  border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
  border-radius: var(--borderRadiusMedium);
  background-color: var(--colorNeutralBackground3);
  color: var(--colorNeutralForeground1);
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase300);
  font-weight: var(--fontWeightRegular);
  line-height: var(--lineHeightBase300);
  text-align: start;
}
.ui-message-bar::before {
  content: "";
  grid-area: icon;
  align-self: center;
  width: 20px;
  height: 20px;
  margin-inline-end: var(--spacingHorizontalS);
  background-color: var(--ui-message-bar-icon-color);
  -webkit-mask: var(--ui-message-bar-icon) center / 100% 100% no-repeat;
  mask: var(--ui-message-bar-icon) center / 100% 100% no-repeat;
}
/* variant: an explicit <span class="ui-message-bar__icon"><svg …></span> instead of the drawn intent icon */
.ui-message-bar:has(> .ui-message-bar__icon)::before {
  content: none;
}
.ui-message-bar__icon {
  grid-area: icon;
  display: flex;
  align-items: center;
  align-self: center;
  margin-inline-end: var(--spacingHorizontalS);
  color: var(--ui-message-bar-icon-color);
}
.ui-message-bar__icon > svg {
  width: 20px;
  height: 20px;
}
.ui-message-bar--multiline .ui-message-bar__icon {
  align-self: start;
}
/* stack of bars: error → warning → success → info (gap = recommendation; Fluent stories use 8–10px) */
.ui-message-bar-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacingVerticalS);
}
.ui-message-bar--info {
  --ui-message-bar-icon: var(--ui-glyph-info-filled-20);
  --ui-message-bar-icon-color: var(--colorNeutralForeground3);
  border-color: var(--colorNeutralStroke1);
  background-color: var(--colorNeutralBackground3);
}
.ui-message-bar--success {
  --ui-message-bar-icon: var(--ui-glyph-checkmark-circle-filled-20);
  --ui-message-bar-icon-color: var(--colorStatusSuccessForeground1);
  border-color: var(--colorStatusSuccessBorder1);
  background-color: var(--colorStatusSuccessBackground1);
}
.ui-message-bar--warning {
  --ui-message-bar-icon: var(--ui-glyph-warning-filled-20);
  --ui-message-bar-icon-color: var(--colorStatusWarningForeground3);
  border-color: var(--colorStatusWarningBorder1);
  background-color: var(--colorStatusWarningBackground1);
}
.ui-message-bar--error {
  --ui-message-bar-icon: var(--ui-glyph-diamond-dismiss-filled-20);
  --ui-message-bar-icon-color: var(--colorStatusDangerForeground1);
  border-color: var(--colorStatusDangerBorder1);
  background-color: var(--colorStatusDangerBackground1);
}
.ui-message-bar--square {
  border-radius: var(--borderRadiusNone);
}
.ui-message-bar__body {
  grid-area: body;
  padding-block: calc((36px - 2 * var(--strokeWidthThin) - var(--lineHeightBase300)) / 2); /* 7px: one line = 36px bar */
  padding-inline-end: var(--spacingHorizontalM);
}
.ui-message-bar__title {
  font-weight: var(--fontWeightSemibold);
}
.ui-message-bar__title::after {
  content: " ";
}
.ui-message-bar__body .ui-link {
  font-size: inherit;
  text-decoration-line: underline; /* links inside a bar are inline links */
}
.ui-message-bar__actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--spacingHorizontalM);
  row-gap: var(--spacingVerticalS);
  padding-inline-end: var(--spacingHorizontalM);
}
.ui-message-bar__actions:empty {
  display: none;
}
/* action buttons are always small (Fluent forces size="small") */
.ui-message-bar__actions .ui-button {
  --ui-button-gap: var(--spacingHorizontalXS);
  --ui-button-focus-radius: var(--borderRadiusSmall);
  min-width: 64px;
  padding: 3px var(--spacingHorizontalS); /* ui-audit-ignore: small button */
  font-size: var(--fontSizeBase200);
  font-weight: var(--fontWeightRegular);
  line-height: var(--lineHeightBase200);
}
.ui-message-bar__dismiss {
  grid-area: dismiss;
  align-self: center;
  margin-inline-end: var(--spacingHorizontalM);
}
button.ui-message-bar__dismiss:not(.ui-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  padding: 0;
  border: var(--strokeWidthThin) solid transparent;
  border-radius: var(--borderRadiusSmall);
  background-color: transparent;
  color: var(--colorNeutralForeground2);
  cursor: pointer;
}
button.ui-message-bar__dismiss:not(.ui-button):empty::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: var(--ui-glyph-dismiss-regular-20) center / 100% 100% no-repeat;
  mask: var(--ui-glyph-dismiss-regular-20) center / 100% 100% no-repeat;
}
button.ui-message-bar__dismiss:not(.ui-button):is(:hover, .is-hover) {
  color: var(--colorNeutralForeground2BrandHover);
}
button.ui-message-bar__dismiss:not(.ui-button):active {
  color: var(--colorNeutralForeground2BrandPressed);
}
button.ui-message-bar__dismiss:not(.ui-button):focus-visible {
  border-color: var(--colorStrokeFocus2);
  box-shadow: 0 0 0 var(--strokeWidthThin) var(--colorStrokeFocus2) inset;
  outline: var(--strokeWidthThick) solid transparent;
}
/* multiline (Fluent auto-reflow layout): actions move to their own end-aligned row */
.ui-message-bar--multiline {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "icon body dismiss" "actions actions actions";
  align-items: start;
  padding-top: var(--spacingVerticalMNudge);
}
.ui-message-bar--multiline::before {
  align-self: start;
}
.ui-message-bar--multiline::after {
  content: "";
  grid-area: actions;
  margin-bottom: var(--spacingVerticalS);
}
.ui-message-bar--multiline .ui-message-bar__body {
  padding-block: 0;
}
.ui-message-bar--multiline .ui-message-bar__actions {
  justify-content: flex-end;
  margin: var(--spacingVerticalMNudge) 0 var(--spacingVerticalS);
}
.ui-message-bar--multiline .ui-message-bar__dismiss {
  align-self: start;
  margin-top: -2px;
}
@media (max-width: 479.98px) {
  .ui-message-bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "icon body dismiss" "actions actions actions";
    align-items: start;
    padding-top: var(--spacingVerticalMNudge);
  }
  .ui-message-bar::before,
  .ui-message-bar .ui-message-bar__icon { align-self: start; }
  .ui-message-bar::after { content: ""; grid-area: actions; margin-bottom: var(--spacingVerticalS); }
  .ui-message-bar .ui-message-bar__body { padding-block: 0; }
  .ui-message-bar .ui-message-bar__actions { justify-content: flex-end; margin: var(--spacingVerticalMNudge) 0 var(--spacingVerticalS); }
  .ui-message-bar .ui-message-bar__dismiss { align-self: start; margin-top: -2px; }
}

/* ============================================================================ 22. Toast */
/* Fluent Toast + Toaster (react-toast). Temporary, non-critical status about the user's action or a system event.
 * Toaster: fixed, 292px wide, bottom-end by default, 20px from the side and 16px from the edge, 16px between toasts,
 * newest at the screen edge, max 4 visible (queue the rest). Toast: padding 12px, radius 4px, shadow8,
 * colorNeutralBackground1; grid [icon 16px][title (body1 semibold)][action]; body body1 6px below; subtitle caption1;
 * footer links 16px below, 14px apart. Intent icon colours: success colorStatusSuccessForeground1, error
 * colorStatusDangerForeground1, warning colorStatusWarningForeground1, info colorNeutralForeground2.
 * Timeout: F2 says 7s without actions (code default 3s) — set it explicitly; pause on hover/focus; Esc closes all.
 * Announce through a live region (info polite, others assertive); keep the content reachable after it closes. */
.ui-toaster {
  position: fixed;
  inset-inline-end: var(--spacingHorizontalXL);
  bottom: var(--spacingVerticalL);
  z-index: var(--zIndexMessages, 3000);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 292px;
  max-width: calc(100vw - 2 * var(--spacingHorizontalXL));
  pointer-events: none;
}
/* position: a modifier class (.ui-toaster--top-end) or a data-position attribute (data-position="top-end"); default bottom-end */
.ui-toaster:is(.ui-toaster--bottom-start, [data-position="bottom-start"]) { inset-inline: var(--spacingHorizontalXL) auto; }
.ui-toaster:is(.ui-toaster--top-end, [data-position="top-end"]) { top: var(--spacingVerticalL); bottom: auto; }
.ui-toaster:is(.ui-toaster--top-start, [data-position="top-start"]) { top: var(--spacingVerticalL); bottom: auto; inset-inline: var(--spacingHorizontalXL) auto; }
.ui-toaster:is(.ui-toaster--top, .ui-toaster--bottom, [data-position="top"], [data-position="bottom"]) { inset-inline: 50% auto; transform: translateX(-50%); }
.ui-toaster:is(.ui-toaster--top, [data-position="top"]) { top: var(--spacingVerticalL); bottom: auto; }
/* top toasters stack newest first, so put new toasts at the start; the first one needs no top margin */
.ui-toaster:is(.ui-toaster--top, .ui-toaster--top-end, .ui-toaster--top-start, [data-position^="top"]) > .ui-toast { margin: 0 0 var(--spacingVerticalL); }
.ui-toast {
  --ui-toast-icon: var(--ui-glyph-info-filled-20);
  --ui-toast-icon-color: var(--colorNeutralForeground2);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  box-sizing: border-box;
  margin-top: var(--spacingVerticalL);
  padding: var(--spacingVerticalM);
  border: var(--strokeWidthThin) solid var(--colorTransparentStroke);
  border-radius: var(--borderRadiusMedium);
  background-color: var(--colorNeutralBackground1);
  box-shadow: var(--shadow8);
  color: var(--colorNeutralForeground1);
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase300);
  font-weight: var(--fontWeightSemibold);
  line-height: var(--lineHeightBase300);
  text-align: start;
  pointer-events: all;
  animation: ui-toast-enter var(--durationSlower) var(--curveEasyEase) var(--durationNormal) both;
}
@keyframes ui-toast-enter {
  from { opacity: 0; }
}
.ui-toast:is(:focus-visible, .is-focus) {
  outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
  outline-offset: 0;
}
.ui-toast::before {
  content: "";
  grid-row: 1;
  grid-column: 1;
  width: 16px;
  height: 16px;
  margin-top: var(--spacingVerticalXXS);
  margin-inline-end: var(--spacingHorizontalS);
  background-color: var(--ui-toast-icon-color);
  -webkit-mask: var(--ui-toast-icon) center / 100% 100% no-repeat;
  mask: var(--ui-toast-icon) center / 100% 100% no-repeat;
}
.ui-toast:has(> .ui-toast__media)::before {
  content: none;
}
.ui-toast__media {
  grid-row: 1;
  grid-column: 1;
  display: flex;
  padding-top: var(--spacingVerticalXXS);
  padding-inline-end: var(--spacingHorizontalS);
  color: var(--ui-toast-icon-color);
}
.ui-toast__media > svg { flex-shrink: 0; width: 16px; height: 16px; fill: currentColor; }
.ui-toast__title {
  grid-row: 1;
  grid-column: 2;
  display: flex;
  margin: 0;
  color: var(--colorNeutralForeground1);
  font: inherit;
  word-break: break-word;
}
.ui-toast__action {
  grid-row: 1;
  grid-column: 3;
  display: flex;
  align-items: flex-start;
  padding-inline-start: var(--spacingHorizontalM);
  color: var(--colorBrandForeground1);
  font-weight: var(--fontWeightRegular);
}
.ui-toast__body {
  grid-column: 2 / 3;
  margin: 0;
  padding-top: 6px; /* ui-audit-ignore: Fluent ToastBody 6px (spacingVerticalSNudge) */
  color: var(--colorNeutralForeground1);
  font-size: var(--fontSizeBase300);
  font-weight: var(--fontWeightRegular);
  line-height: var(--lineHeightBase300);
  word-break: break-word;
}
.ui-toast__subtitle {
  grid-column: 2 / 3;
  padding-top: var(--spacingVerticalXS);
  color: var(--colorNeutralForeground2);
  font-size: var(--fontSizeBase200);
  font-weight: var(--fontWeightRegular);
  line-height: var(--fontSizeBase200);
}
.ui-toast__footer {
  grid-column: 2 / 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px; /* ui-audit-ignore: Fluent ToastFooter gap */
  padding-top: var(--spacingVerticalL);
  font-weight: var(--fontWeightRegular);
}
.ui-toast--success { --ui-toast-icon: var(--ui-glyph-checkmark-circle-filled-20); --ui-toast-icon-color: var(--colorStatusSuccessForeground1); }
.ui-toast--error { --ui-toast-icon: var(--ui-glyph-diamond-dismiss-filled-20); --ui-toast-icon-color: var(--colorStatusDangerForeground1); }
.ui-toast--warning { --ui-toast-icon: var(--ui-glyph-warning-filled-20); --ui-toast-icon-color: var(--colorStatusWarningForeground1); }
.ui-toast--info { --ui-toast-icon: var(--ui-glyph-info-filled-20); --ui-toast-icon-color: var(--colorNeutralForeground2); }
/* inverted appearance */
.ui-toast--inverted {
  --ui-toast-icon-color: var(--colorNeutralForegroundInverted2);
  background-color: var(--colorNeutralBackgroundInverted);
  color: var(--colorNeutralForegroundInverted2);
}
.ui-toast--inverted :is(.ui-toast__title, .ui-toast__body, .ui-toast__subtitle) {
  color: var(--colorNeutralForegroundInverted2);
}
.ui-toast--inverted .ui-toast__action,
.ui-toast--inverted .ui-link {
  color: var(--colorBrandForegroundInverted);
}
.ui-toast--inverted.ui-toast--success { --ui-toast-icon-color: var(--colorStatusSuccessForegroundInverted); }
.ui-toast--inverted.ui-toast--error { --ui-toast-icon-color: var(--colorStatusDangerForegroundInverted); }
.ui-toast--inverted.ui-toast--warning { --ui-toast-icon-color: var(--colorStatusWarningForegroundInverted); }

/* ============================================================================ 23. ProgressBar */
/* Fluent ProgressBar (react-progress). Determinate whenever progress is measurable (tasks over 1s); indeterminate only
 * for short waits. Track colorNeutralBackground6, 2px (4px --large), radius 4px (0 --square); bar
 * colorCompoundBrandBackground, width transition 0.3s ease. Status colours (determinate): error colorPaletteRedBackground3,
 * warning colorPaletteDarkOrangeBackground3, success colorPaletteGreenBackground3. Indeterminate: 33% segment that fades
 * into the track, sliding −100% → 300% in 3s linear (reduced motion: full-width opacity pulse).
 * <div class="ui-progress" role="progressbar" aria-labelledby="l" aria-valuemin="0" aria-valuemax="100" aria-valuenow="30">
 * <div class="ui-progress__bar" style="width:30%"></div></div>. Labels/status text above or below, never beside. */
.ui-progress {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: var(--strokeWidthThick);
  overflow: hidden;
  border-radius: var(--borderRadiusMedium);
  background-color: var(--colorNeutralBackground6);
}
.ui-progress--large {
  height: var(--strokeWidthThickest);
}
.ui-progress--square {
  border-radius: var(--borderRadiusNone);
}
.ui-progress__bar {
  width: var(--value, 0%);
  max-width: 100%;
  height: 100%;
  border-radius: inherit;
  background-color: var(--colorCompoundBrandBackground);
  transition: width 0.3s ease;
}
.ui-progress--error .ui-progress__bar { background-color: var(--colorPaletteRedBackground3); }
.ui-progress--warning .ui-progress__bar { background-color: var(--colorPaletteDarkOrangeBackground3); }
.ui-progress--success .ui-progress__bar { background-color: var(--colorPaletteGreenBackground3); }
.ui-progress--indeterminate .ui-progress__bar,
.ui-progress--indeterminate:not(:has(> .ui-progress__bar))::after {
  content: "";
  position: relative;
  display: block;
  width: 100%;
  max-width: 33%;
  height: 100%;
  border-radius: inherit;
  background-color: var(--colorCompoundBrandBackground);
  background-image: linear-gradient(to right, var(--colorNeutralBackground6) 0%, var(--colorTransparentBackground) 50%, var(--colorNeutralBackground6) 100%);
  animation: ui-progress-indeterminate 3s var(--curveLinear) infinite;
}
.ui-progress--indeterminate:dir(rtl) .ui-progress__bar,
.ui-progress--indeterminate:dir(rtl):not(:has(> .ui-progress__bar))::after {
  animation-name: ui-progress-indeterminate-rtl;
}
@keyframes ui-progress-indeterminate {
  from { translate: -100% 0; }
  to { translate: 300% 0; }
}
@keyframes ui-progress-indeterminate-rtl {
  from { translate: 100% 0; }
  to { translate: -300% 0; }
}
@keyframes ui-progress-pulse {
  0% { opacity: 0.2; }
  50% { opacity: 1; }
  100% { opacity: 0.2; }
}

/* ============================================================================ 24. Spinner */
/* Fluent Spinner (react-spinner). Indeterminate wait over 1s when progress can't be measured; one at a time, centred on
 * the loading region. Ring diameter / stroke: extra-tiny 16/2, tiny 20/2, extra-small 24/2, small 28/2,
 * medium 32/3 (default), large 36/3, extra-large 40/3, huge 44/4px. Track colorBrandStroke2Contrast, arc
 * colorBrandStroke1 (inverted: colorNeutralStrokeAlpha2 / colorNeutralStrokeOnBrand2 on brand or dark media).
 * Motion: ring turns every 1.5s linear while the arc grows 30°→255°→30° (curveEasyEase); reduced motion: slower 1.8s
 * turn with a static fading arc. Label after the ring (8px gap): body1 up to small, subtitle2 medium–extra-large,
 * subtitle1 huge, e.g. "Saving …". <div class="ui-spinner" role="progressbar" aria-label="Loading reports"></div>
 * or with visible text: <div class="ui-spinner" role="progressbar" aria-labelledby="s1"><span id="s1">Saving …</span></div>. */
@property --ui-spinner-start {
  syntax: "<angle>";
  inherits: false;
  initial-value: -30deg;
}
@property --ui-spinner-sweep {
  syntax: "<angle>";
  inherits: false;
  initial-value: 30deg;
}
.ui-spinner {
  --ui-spinner-size: 32px;
  --ui-spinner-stroke: var(--strokeWidthThicker);
  --ui-spinner-track: var(--colorBrandStroke2Contrast);
  --ui-spinner-arc: var(--colorBrandStroke1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacingHorizontalS);
  min-width: min-content;
  vertical-align: middle;
  color: var(--colorNeutralForeground1);
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase400);
  font-weight: var(--fontWeightSemibold);
  line-height: var(--lineHeightBase400);
}
.ui-spinner::before {
  content: "";
  flex-shrink: 0;
  width: var(--ui-spinner-size);
  height: var(--ui-spinner-size);
  border-radius: 50%;
  background: conic-gradient(from var(--ui-spinner-start), var(--ui-spinner-arc) 0deg var(--ui-spinner-sweep), var(--ui-spinner-track) var(--ui-spinner-sweep) 360deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent calc(100% - var(--ui-spinner-stroke) - 1px), black calc(100% - var(--ui-spinner-stroke)) calc(100% - 1px), transparent 100%);
  mask-image: radial-gradient(closest-side, transparent calc(100% - var(--ui-spinner-stroke) - 1px), black calc(100% - var(--ui-spinner-stroke)) calc(100% - 1px), transparent 100%);
  animation: ui-spinner-rotate 1.5s linear infinite, ui-spinner-tail 1.5s var(--curveEasyEase) infinite;
}
@keyframes ui-spinner-rotate {
  to { transform: rotate(360deg); }
}
@keyframes ui-spinner-tail {
  0% { --ui-spinner-start: -30deg; --ui-spinner-sweep: 30deg; }
  50% { --ui-spinner-start: 105deg; --ui-spinner-sweep: 255deg; }
  100% { --ui-spinner-start: 330deg; --ui-spinner-sweep: 30deg; }
}
.ui-spinner:dir(rtl)::before {
  scale: -1 1;
}
.ui-spinner--extra-tiny,
.ui-spinner--tiny,
.ui-spinner--extra-small,
.ui-spinner--small {
  --ui-spinner-stroke: var(--strokeWidthThick);
  font-size: var(--fontSizeBase300);
  font-weight: var(--fontWeightRegular);
  line-height: var(--lineHeightBase300);
}
.ui-spinner--extra-tiny { --ui-spinner-size: 16px; }
.ui-spinner--tiny { --ui-spinner-size: 20px; }
.ui-spinner--extra-small { --ui-spinner-size: 24px; }
.ui-spinner--small { --ui-spinner-size: 28px; }
.ui-spinner--medium { --ui-spinner-size: 32px; }
.ui-spinner--large { --ui-spinner-size: 36px; }
.ui-spinner--extra-large { --ui-spinner-size: 40px; }
.ui-spinner--huge {
  --ui-spinner-size: 44px;
  --ui-spinner-stroke: var(--strokeWidthThickest);
  font-size: var(--fontSizeBase500);
  line-height: var(--lineHeightBase500);
}
.ui-spinner--below,
.ui-spinner--vertical {
  flex-direction: column;
}
/* variant: Fluent's own structure <span class="ui-spinner__ring"><span class="ui-spinner__tail"></span></span>
 * (+ .ui-spinner__label). Same look; the drawn ring is switched off. */
.ui-spinner:has(> .ui-spinner__ring)::before {
  content: none;
}
.ui-spinner__ring {
  position: relative;
  flex-shrink: 0;
  width: var(--ui-spinner-size);
  height: var(--ui-spinner-size);
  background-color: var(--ui-spinner-track);
  color: var(--ui-spinner-arc);
  -webkit-mask-image: radial-gradient(closest-side, transparent calc(100% - var(--ui-spinner-stroke) - 1px), black calc(100% - var(--ui-spinner-stroke)) calc(100% - 1px), transparent 100%);
  mask-image: radial-gradient(closest-side, transparent calc(100% - var(--ui-spinner-stroke) - 1px), black calc(100% - var(--ui-spinner-stroke)) calc(100% - 1px), transparent 100%);
  animation: ui-spinner-rotate 1.5s linear infinite;
}
.ui-spinner__tail {
  position: absolute;
  inset: 0;
  -webkit-mask-image: conic-gradient(transparent 105deg, black 105deg);
  mask-image: conic-gradient(transparent 105deg, black 105deg);
  animation: ui-spinner-tail-turn 1.5s var(--curveEasyEase) infinite;
}
.ui-spinner__tail::before,
.ui-spinner__tail::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: conic-gradient(currentColor 135deg, transparent 135deg);
  animation: inherit;
}
.ui-spinner__tail::before { animation-name: ui-spinner-tail-before; }
.ui-spinner__tail::after { animation-name: ui-spinner-tail-after; }
@keyframes ui-spinner-tail-turn { 0% { transform: rotate(-135deg); } 50% { transform: rotate(0deg); } 100% { transform: rotate(225deg); } }
@keyframes ui-spinner-tail-before { 0% { transform: rotate(0deg); } 50% { transform: rotate(105deg); } 100% { transform: rotate(0deg); } }
@keyframes ui-spinner-tail-after { 0% { transform: rotate(0deg); } 50% { transform: rotate(225deg); } 100% { transform: rotate(0deg); } }
.ui-spinner--inverted {
  --ui-spinner-track: var(--colorNeutralStrokeAlpha2);
  --ui-spinner-arc: var(--colorNeutralStrokeOnBrand2);
  color: var(--colorNeutralForegroundStaticInverted);
}

/* ============================================================================ 25. Skeleton */
/* Fluent Skeleton / SkeletonItem (react-skeleton). Placeholder for a region with a KNOWN structure while it loads (over
 * 1s); mirror only the high-level shapes (circles and rectangles), never every detail.
 * Rectangle: width 100%, height = size (8…128px, default 16px), radius 4px; circle / square: size × size.
 * colorNeutralStencil1 with a colorNeutralStencil2 highlight sweeping across (wave, 3s ease-in-out); pulse = opacity
 * 1 → 0.4 → 1 in 1s; translucent (Stencil1Alpha) on coloured or image surfaces. Reduced motion: static.
 * Put role="progressbar" aria-busy="true" aria-label="Loading people" on the group container, not on each item. */
.ui-skeleton {
  --ui-skeleton-size: 16px;
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: var(--ui-skeleton-size);
  overflow: hidden;
  border-radius: var(--borderRadiusMedium);
  background-color: var(--colorNeutralStencil1);
}
.ui-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  background-image: linear-gradient(to right, var(--colorNeutralStencil1) 0%, var(--colorNeutralStencil2) 50%, var(--colorNeutralStencil1) 100%);
  transform: translateX(-100%);
  animation: ui-skeleton-wave 3s ease-in-out infinite;
}
.ui-skeleton:dir(rtl)::after {
  animation-name: ui-skeleton-wave-rtl;
}
@keyframes ui-skeleton-wave {
  to { transform: translateX(100%); }
}
@keyframes ui-skeleton-wave-rtl {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}
/* variant: .ui-skeleton as the group (role="progressbar" aria-busy) holding .ui-skeleton__item shapes; modifiers
 * --pulse / --translucent on the group apply to every item. */
.ui-skeleton:has(.ui-skeleton__item) {
  height: auto;
  overflow: visible;
  border-radius: 0;
  background-color: transparent;
}
.ui-skeleton:has(.ui-skeleton__item)::after {
  content: none;
}
.ui-skeleton__item {
  --ui-skeleton-size: 16px;
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: var(--ui-skeleton-size);
  overflow: hidden;
  border-radius: var(--borderRadiusMedium);
  background-color: var(--colorNeutralStencil1);
}
.ui-skeleton__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, var(--colorNeutralStencil1) 0%, var(--colorNeutralStencil2) 50%, var(--colorNeutralStencil1) 100%);
  transform: translateX(-100%);
  animation: ui-skeleton-wave 3s ease-in-out infinite;
}
.ui-skeleton__item--circle,
.ui-skeleton__item--square {
  flex-shrink: 0;
  width: var(--ui-skeleton-size);
}
.ui-skeleton__item--circle { border-radius: 50%; }
.ui-skeleton__item--square { border-radius: var(--borderRadiusNone); }
.ui-skeleton--pulse .ui-skeleton__item { background-color: transparent; }
.ui-skeleton--pulse .ui-skeleton__item::after {
  background-color: var(--colorNeutralStencil1);
  background-image: none;
  transform: none;
  animation: ui-skeleton-pulse 1s ease-in-out infinite;
}
.ui-skeleton--translucent .ui-skeleton__item { background-color: var(--colorNeutralStencil1Alpha); }
.ui-skeleton--translucent .ui-skeleton__item::after {
  background-image: linear-gradient(to right, transparent 0%, var(--colorNeutralStencil1Alpha) 50%, transparent 100%);
}
.ui-skeleton--translucent.ui-skeleton--pulse .ui-skeleton__item { background-color: transparent; }
.ui-skeleton--translucent.ui-skeleton--pulse .ui-skeleton__item::after {
  background-color: var(--colorNeutralStencil1Alpha);
  background-image: none;
}
.ui-skeleton--circle,
.ui-skeleton--square {
  flex-shrink: 0;
  width: var(--ui-skeleton-size);
}
.ui-skeleton--circle {
  border-radius: 50%;
}
.ui-skeleton--square {
  border-radius: var(--borderRadiusNone);
}
.ui-skeleton--pulse {
  background-color: transparent;
}
.ui-skeleton--pulse::after {
  background-color: var(--colorNeutralStencil1);
  background-image: none;
  transform: none;
  animation: ui-skeleton-pulse 1s ease-in-out infinite;
}
@keyframes ui-skeleton-pulse {
  0% { opacity: 1; }
  50% { opacity: 0.4; }
  100% { opacity: 1; }
}
.ui-skeleton--translucent {
  background-color: var(--colorNeutralStencil1Alpha);
}
.ui-skeleton--translucent::after {
  background-image: linear-gradient(to right, transparent 0%, var(--colorNeutralStencil1Alpha) 50%, transparent 100%);
}
.ui-skeleton--translucent.ui-skeleton--pulse {
  background-color: transparent;
}
.ui-skeleton--translucent.ui-skeleton--pulse::after {
  background-color: var(--colorNeutralStencil1Alpha);
  background-image: none;
}

/* ============================================================================ 26. Table */
/* Fluent Table / DataGrid look on a native <table class="ui-table"> (best semantics; add a caption or aria-labelledby).
 * Row height 44px (medium) · 34px (--small) · 24px (--extra-small, 12px text, no row lines); cell padding 0 8px;
 * TEXT ROLES (typography.md §4a): table header = Body1Strong 14/20 semibold colorNeutralForeground1 (recommendation:
 * Fluent's TableHeaderCell is regular 400, but beside the semibold primary cell it reads lighter than the data, so
 * headers and primary cells share one weight); table cell = Body1 14/20 regular; primary cell (.ui-table__primary,
 * .ui-table__layout--primary .ui-table__main, <th scope="row">) = Body1Strong; cell description = Caption1
 * colorNeutralForeground2. Extra-small tables drop all of these to 12/16 (Caption1 / Caption1Strong).
 * Row separator 1px colorNeutralStroke2; body rows hover
 * colorSubtleBackgroundHover / pressed colorSubtleBackgroundPressed. Selected rows (aria-selected="true"):
 * colorBrandBackground2 (brand, DataGrid default) or colorSubtleBackgroundSelected (--neutral-selection).
 * Sortable header: <th aria-sort="ascending"><button>Name</button></th> → 12px ArrowUp/ArrowDown after the label.
 * Selection column: <th|td class="ui-table__selection"> (44px) holding a label-less .ui-checkbox.
 * Wrap wide tables in .ui-table-container (horizontal scroll, recommendation) and set a min-width on the table. */
.ui-table-container,
.ui-table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}
/* .ui-table-scroll also caps the height and keeps the header row visible (recommendation: Fluent has no sticky prop) */
.ui-table-scroll {
  max-height: 60vh;
  overflow-y: auto;
}
.ui-table-scroll thead :is(th, td) {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--colorNeutralBackground1);
}
.ui-table {
  --ui-table-row-height: 44px;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background-color: var(--colorSubtleBackground);
  color: var(--colorNeutralForeground1);
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase300);
  font-weight: var(--fontWeightRegular);
  line-height: var(--lineHeightBase300);
  text-align: start;
}
.ui-table--small { --ui-table-row-height: 34px; }
.ui-table--extra-small {
  --ui-table-row-height: 24px;
  font-size: var(--fontSizeBase200);
}
.ui-table > caption {
  padding-bottom: var(--spacingVerticalS);
  color: var(--colorNeutralForeground1);
  font-weight: var(--fontWeightSemibold);
  text-align: start;
}
.ui-table tr {
  box-sizing: border-box;
  border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
  color: var(--colorNeutralForeground1);
}
.ui-table--extra-small tr {
  border-bottom: none;
}
.ui-table :is(th, td) {
  position: relative;
  box-sizing: border-box;
  height: var(--ui-table-row-height);
  padding: 0 var(--spacingHorizontalS);
  font-weight: var(--fontWeightRegular);
  text-align: start;
  vertical-align: middle;
  overflow-wrap: anywhere;
}
/* header cells and row headers: semibold, same weight as the primary cell (see TEXT ROLES above) */
.ui-table th {
  color: var(--colorNeutralForeground1);
  font-weight: var(--fontWeightSemibold);
}
.ui-table tbody tr:is(:hover, .is-hover) {
  background-color: var(--colorSubtleBackgroundHover);
  color: var(--colorNeutralForeground1Hover);
}
.ui-table tbody tr:active {
  background-color: var(--colorSubtleBackgroundPressed);
  color: var(--colorNeutralForeground1Pressed);
}
.ui-table tbody tr[aria-selected="true"],
.ui-table tbody tr[aria-selected="true"]:is(:hover, :active) {
  background-color: var(--colorBrandBackground2);
  color: var(--colorNeutralForeground1);
}
.ui-table--neutral-selection tbody tr[aria-selected="true"],
.ui-table--neutral-selection tbody tr[aria-selected="true"]:is(:hover, :active) {
  background-color: var(--colorSubtleBackgroundSelected);
  color: var(--colorNeutralForeground1Hover);
}
.ui-table :is(tr, th, td):focus-visible {
  outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
  outline-offset: calc(var(--strokeWidthThick) * -1);
  border-radius: var(--borderRadiusMedium);
}
/* sortable header cells */
.ui-table th > button {
  display: flex;
  align-items: center;
  gap: var(--spacingHorizontalXS);
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 32px;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.ui-table th > button:focus-visible {
  outline: none;
}
.ui-table th:has(> button:focus-visible) {
  outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
  outline-offset: calc(var(--strokeWidthThick) * -1);
  border-radius: var(--borderRadiusMedium);
}
.ui-table th:has(> button):is(:hover, .is-hover) {
  background-color: var(--colorSubtleBackgroundHover);
  color: var(--colorNeutralForeground1Hover);
}
.ui-table th:has(> button):active {
  background-color: var(--colorSubtleBackgroundPressed);
  color: var(--colorNeutralForeground1Pressed);
}
.ui-table th:is([aria-sort="ascending"], [aria-sort="descending"]) > button::after {
  content: "";
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin-top: var(--spacingVerticalXXS);
  background-color: currentColor;
  -webkit-mask: var(--ui-glyph-arrow-up-regular-20) center / 100% 100% no-repeat;
  mask: var(--ui-glyph-arrow-up-regular-20) center / 100% 100% no-repeat;
}
/* variant: explicit <svg class="ui-table__sort-icon"> inside the sort button (no drawn arrow) */
.ui-table th > button:has(.ui-table__sort-icon)::after {
  content: none;
}
.ui-table__sort-icon {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  padding-top: var(--spacingVerticalXXS);
  box-sizing: content-box;
}
.ui-table th[aria-sort="descending"] > button::after {
  -webkit-mask-image: var(--ui-glyph-arrow-down-regular-20);
  mask-image: var(--ui-glyph-arrow-down-regular-20);
}
/* selection column (44px) */
.ui-table :is(th, td).ui-table__selection {
  width: 44px;
  padding: 0;
  text-align: center;
  white-space: nowrap;
}
/* numbers: end-aligned with tabular figures (recommendation) */
.ui-table :is(th, td).ui-table__num {
  text-align: end;
  font-variant-numeric: tabular-nums;
}
.ui-table th.ui-table__num > button {
  justify-content: flex-end;
}
/* full-width empty / loading / error row */
.ui-table tbody tr.ui-table__state-row,
.ui-table tbody tr.ui-table__state-row:is(:hover, :active) {
  background-color: transparent;
}
.ui-table tr.ui-table__state-row > td {
  height: auto;
  padding: var(--spacingVerticalXXL) var(--spacingHorizontalL);
}
/* a bare native checkbox in the selection column */
.ui-table__selection > input[type="checkbox"] {
  margin: 0;
  accent-color: var(--colorCompoundBrandBackground);
}
/* cell layout: media + primary text + description (.ui-table__layout is the same part) */
.ui-table__layout {
  display: flex;
  align-items: center;
  gap: var(--spacingHorizontalS);
  min-width: 0;
}
.ui-table__layout > .ui-table__media > svg {
  width: 20px;
  height: 20px;
}
.ui-table__layout--primary > .ui-table__media > svg {
  width: 24px;
  height: 24px;
}
.ui-table__layout--primary .ui-table__main {
  font-weight: var(--fontWeightSemibold);
}
.ui-table__main {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-table__media {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
}
.ui-table__cell {
  display: flex;
  align-items: center;
  gap: var(--spacingHorizontalS);
  min-width: 0;
}
.ui-table__cell > :is(svg, .ui-icon, .ui-table__media) {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.ui-table--extra-small .ui-table__cell > :is(svg, .ui-icon, .ui-table__media) {
  width: 16px;
  height: 16px;
}
.ui-table__primary {
  font-weight: var(--fontWeightSemibold);
}
.ui-table__description {
  display: block;
  color: var(--colorNeutralForeground2);
  font-size: var(--fontSizeBase200);
  line-height: var(--lineHeightBase200);
}
.ui-table__truncate {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================================ 27. Empty state (recommendation) */
/* Not a Fluent component: a pattern composed from Fluent tokens (Fabric UX System empty states; feedback-status.md §16).
 * Centred block: media (100px illustration; 200px with --page, 150px below 768px) or a 48px icon (colorNeutralForeground3),
 * title subtitle1 20/28 semibold (--compact: subtitle2 16/22), body1 14/20 colorNeutralForeground2 capped at 376px, one
 * primary action plus an optional link. Page padding 32px (recommendation); gaps media to title 16px (24px --page),
 * title to body 8px, body to actions 16px (24px --page). For "no results" use --compact, a subtle "Clear filters"
 * button, and keep the table header visible above it. */
.ui-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 100%;
  padding: var(--spacingVerticalXXXL) var(--spacingHorizontalL);
  text-align: center;
}
.ui-empty-state--compact {
  padding: var(--spacingVerticalXXL) var(--spacingHorizontalL);
}
.ui-empty-state--compact .ui-empty-state__title {
  font-size: var(--fontSizeBase400);
  line-height: var(--lineHeightBase400);
}
.ui-empty-state__media {
  display: block;
  width: 100px;
  height: 100px;
  margin-bottom: var(--spacingVerticalL);
}
.ui-empty-state--page .ui-empty-state__media {
  width: 200px;
  height: 200px;
  margin-bottom: var(--spacingVerticalXXL);
}
@media (max-width: 767px) {
  .ui-empty-state--page .ui-empty-state__media {
    width: 150px;
    height: 150px;
  }
}
.ui-empty-state__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  margin-bottom: var(--spacingVerticalL);
  color: var(--colorNeutralForeground3);
  fill: currentColor;
}
.ui-empty-state__title {
  margin: 0;
  color: var(--colorNeutralForeground1);
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase500);
  font-weight: var(--fontWeightSemibold);
  line-height: var(--lineHeightBase500);
}
.ui-empty-state__body {
  max-width: 376px;
  margin: var(--spacingVerticalS) 0 0;
  color: var(--colorNeutralForeground2);
  font-size: var(--fontSizeBase300);
  line-height: var(--lineHeightBase300);
  text-wrap: balance;
}
.ui-empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacingHorizontalM);
  margin-top: var(--spacingVerticalL);
}
.ui-empty-state--page .ui-empty-state__actions {
  margin-top: var(--spacingVerticalXXL);
}

/* ============================================================================ 27a. Text roles (shared utilities) */
/* One class per role that has no component of its own (typography.md §4a). Colour is part of the role, so these set it. */
.ui-caption {                          /* role: caption / metadata. Caption1 12/16, colorNeutralForeground3 */
  color: var(--colorNeutralForeground3);
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase200);
  font-weight: var(--fontWeightRegular);
  line-height: var(--lineHeightBase200);
}
.ui-text-secondary { color: var(--colorNeutralForeground2); }   /* supporting copy: descriptions, ledes, helper sentences */
.ui-text-tertiary { color: var(--colorNeutralForeground3); }    /* hints, timestamps, metadata */
.ui-eyebrow {                          /* role: overline / eyebrow. Body1Strong 14/20 in brand colour, sentence case (never ALL CAPS) */
  margin: 0;
  color: var(--colorBrandForeground1);
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase300);
  font-weight: var(--fontWeightSemibold);
  line-height: var(--lineHeightBase300);
}

/* ============================================================================ 27b. Page header and section header */
/* Text roles page title / page description / section title / section description (typography.md §4a). Pure grids: the
 * children sit in named areas, so a header needs no wrapper divs and no local title classes.
 *   <header class="ui-page-header">
 *     <nav class="ui-breadcrumb">…</nav>                         (optional, level 2 and deeper)
 *     <h1 class="ui-page-header__title">Settings</h1>            Title3 24/32 semibold, colorNeutralForeground1
 *     <p class="ui-page-header__description">…</p>               Body1 14/20, colorNeutralForeground2, max 60ch, 4px under the title
 *     <div class="ui-page-header__actions">…buttons…</div>       end side, on the title row
 *   </header>
 *   <div class="ui-section-header">
 *     <h2 class="ui-section-header__title">Recent activity</h2>  Subtitle1 20/28 semibold, colorNeutralForeground1
 *     <p class="ui-section-header__description">…</p>            Body1 14/20, colorNeutralForeground2, 4px under the title
 *     <div class="ui-section-header__actions">…</div>
 *   </div>
 * Spacing to the next element (recommendation): page header → content 16px (the page gap), section header → content
 * 12px, 24px above a section when it follows another. Marketing sections: add --marketing (Title1 → Large Title,
 * lede 16/22 → 20/28) or --subsection (Title3 → Title1) and an optional .ui-eyebrow first child; add --center to centre. */
.ui-page-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "crumb crumb" "title actions" "description description";
  align-items: start;
  min-width: 0;
}
.ui-page-header > .ui-breadcrumb {
  grid-area: crumb;
  margin-block-end: var(--spacingVerticalS);
  margin-inline-start: calc(var(--spacingHorizontalS) * -1); /* optically align the first crumb text with the title */
}
.ui-page-header__title {
  grid-area: title;
  min-width: 0;
  margin: 0;
  color: var(--colorNeutralForeground1);
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase600);   /* title3 24/32 */
  font-weight: var(--fontWeightSemibold);
  line-height: var(--lineHeightBase600);
  text-wrap: balance;
}
.ui-page-header__description {
  grid-area: description;
  max-width: 60ch;
  margin: var(--spacingVerticalXS) 0 0;
  color: var(--colorNeutralForeground2);
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase300);   /* body1 14/20 */
  font-weight: var(--fontWeightRegular);
  line-height: var(--lineHeightBase300);
  text-wrap: pretty;
}
.ui-page-header__actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacingHorizontalS);
  margin-inline-start: var(--spacingHorizontalL);
}
@media (max-width: 479.98px) {         /* phones: actions drop under the text */
  .ui-page-header {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "crumb" "title" "description" "actions";
  }
  .ui-page-header__actions { margin: var(--spacingVerticalM) 0 0; }
}

.ui-section-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "eyebrow eyebrow" "title actions" "description description";
  align-items: start;
  min-width: 0;
}
.ui-section-header > .ui-eyebrow {
  grid-area: eyebrow;
  margin-block-end: var(--spacingVerticalS);
}
.ui-section-header__title {
  grid-area: title;
  min-width: 0;
  margin: 0;
  color: var(--colorNeutralForeground1);
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase500);   /* subtitle1 20/28 */
  font-weight: var(--fontWeightSemibold);
  line-height: var(--lineHeightBase500);
  text-wrap: balance;
}
.ui-section-header__description {
  grid-area: description;
  max-width: 60ch;
  margin: var(--spacingVerticalXS) 0 0;
  color: var(--colorNeutralForeground2);
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase300);   /* body1 14/20 */
  font-weight: var(--fontWeightRegular);
  line-height: var(--lineHeightBase300);
  text-wrap: pretty;
}
.ui-section-header__actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacingHorizontalS);
  margin-inline-start: var(--spacingHorizontalL);
}
/* marketing sections (recommendation, typography.md §8): steps per Fluent size class, tokens only (no clamp()) */
.ui-section-header--marketing .ui-section-header__title {
  font-size: var(--fontSizeHero800);   /* title1 32/40 */
  line-height: var(--lineHeightHero800);
}
.ui-section-header--marketing .ui-section-header__description {
  margin-block-start: var(--spacingVerticalL);
  font-size: var(--fontSizeBase400);   /* body2 16/22 */
  line-height: var(--lineHeightBase400);
}
.ui-section-header--subsection .ui-section-header__title {
  font-size: var(--fontSizeBase600);   /* title3 24/32 */
  line-height: var(--lineHeightBase600);
}
.ui-section-header--subsection .ui-section-header__description {
  margin-block-start: var(--spacingVerticalL);
  font-size: var(--fontSizeBase400);
  line-height: var(--lineHeightBase400);
}
.ui-section-header--center {
  justify-items: center;
  text-align: center;
}
.ui-section-header--center .ui-section-header__description { margin-inline: auto; }
@media (min-width: 640px) {
  .ui-section-header--subsection .ui-section-header__title {
    font-size: var(--fontSizeHero700);   /* title2 28/36 */
    line-height: var(--lineHeightHero700);
  }
}
@media (min-width: 1024px) {
  .ui-section-header--marketing .ui-section-header__title {
    font-size: var(--fontSizeHero900);   /* large title 40/52 */
    line-height: var(--lineHeightHero900);
  }
  .ui-section-header--marketing .ui-section-header__description {
    font-size: var(--fontSizeBase500);   /* 20/28 regular lede */
    line-height: var(--lineHeightBase500);
  }
  .ui-section-header--subsection .ui-section-header__title {
    font-size: var(--fontSizeHero800);   /* title1 32/40 */
    line-height: var(--lineHeightHero800);
  }
}

/* ============================================================================ 27c. Hero headline and lede (marketing, recommendation) */
/* role display / hero. Title1 32/40 on phones → Large Title 40/52 from 640px; --display adds Display 68/92 from 1024px
 * for ONE short (6 words or fewer) headline in a centred hero. Semibold, colorNeutralForeground1, 16px to the lede. */
.ui-hero-title {
  margin: 0;
  color: var(--colorNeutralForeground1);
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeHero800);
  font-weight: var(--fontWeightSemibold);
  line-height: var(--lineHeightHero800);
  text-wrap: balance;
}
.ui-hero-lede {
  max-width: 60ch;
  margin: 0;
  color: var(--colorNeutralForeground2);
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase400);   /* body2 16/22 */
  font-weight: var(--fontWeightRegular);
  line-height: var(--lineHeightBase400);
  text-wrap: pretty;
}
@media (min-width: 640px) {
  .ui-hero-title { font-size: var(--fontSizeHero900); line-height: var(--lineHeightHero900); }
}
@media (min-width: 1024px) {
  .ui-hero-title--display { font-size: var(--fontSizeHero1000); line-height: var(--lineHeightHero1000); letter-spacing: -0.02em; }
  .ui-hero-lede { font-size: var(--fontSizeBase500); line-height: var(--lineHeightBase500); }
}

/* ============================================================================ 28. Forced colors */
/* Windows contrast themes: tokens are replaced by system colours. Glyph masks and indicator fills opt out of
 * forcing (forced-color-adjust: none) and use system colours explicitly so they never vanish. */
@media (forced-colors: active) {
  /* glyph masks follow the forced text colour */
  .ui-button__chevron:empty,
  .ui-search::before,
  .ui-search__clear,
  .ui-field__message::before,
  .ui-tag__dismiss::before,
  .ui-nav__category > summary::after,
  .ui-breadcrumb li + li::before,
  .ui-accordion summary::before,
  .ui-carousel__button::before,
  .ui-menu__item::before,
  .ui-menu__item::after,
  :is(.ui-dialog__close, .ui-drawer__close):not(.ui-button):empty::before,
  button.ui-message-bar__dismiss:not(.ui-button):empty::before,
  .ui-table th > button::after {
    forced-color-adjust: none;
    background-color: currentColor;
  }
  .ui-select::before,
  .ui-message-bar::before,
  .ui-toast::before {
    forced-color-adjust: none;
    background-color: CanvasText;
  }
  /* buttons */
  .ui-button:focus { border-color: ButtonText; }
  .ui-button:is(:focus-visible, .is-focus) { outline-color: Highlight; }
  .ui-button:not(:disabled, [aria-disabled="true"]):is(:hover, :active) {
    forced-color-adjust: none;
    border-color: Highlight;
    background-color: HighlightText;
    color: Highlight;
  }
  .ui-button--primary:not(:disabled, [aria-disabled="true"]),
  .ui-button[aria-pressed="true"]:not(:disabled, [aria-disabled="true"]) {
    forced-color-adjust: none;
    border-color: HighlightText;
    background-color: Highlight;
    color: HighlightText;
  }
  .ui-button:is(.ui-button--subtle, .ui-button--transparent):not(:disabled, [aria-disabled="true"]):is(:hover, :active) {
    border-color: transparent;
    background-color: transparent;
    color: Highlight;
  }
  .ui-button:is(:disabled, [aria-disabled="true"]) {
    border-color: GrayText;
    background-color: ButtonFace;
    color: GrayText;
  }
  .ui-link:is(:disabled, [aria-disabled="true"]) { color: GrayText; }
  /* fields */
  :is(.ui-input, .ui-search, .ui-textarea):has(> :disabled),
  .ui-select > select:disabled { border-color: GrayText; }
  /* choice controls */
  .ui-checkbox::before,
  .ui-radio::before,
  .ui-switch::before { forced-color-adjust: none; border-color: CanvasText; }
  .ui-checkbox::after,
  .ui-radio::after,
  .ui-switch::after { forced-color-adjust: none; background-color: CanvasText; }
  .ui-checkbox:has(> input:checked)::before { background-color: Highlight; border-color: Highlight; }
  .ui-checkbox:has(> input:checked)::after { background-color: HighlightText; }
  .ui-checkbox:has(> input:indeterminate)::before { background-color: transparent; border-color: Highlight; }
  .ui-checkbox:has(> input:indeterminate)::after,
  .ui-radio:has(> input:checked)::after { background-color: Highlight; }
  .ui-radio:has(> input:checked)::before { border-color: Highlight; }
  .ui-switch:has(> input:checked)::before { background-color: Highlight; border-color: Highlight; }
  .ui-switch:has(> input:checked)::after { background-color: HighlightText; }
  :is(.ui-checkbox, .ui-radio, .ui-switch):has(> input:disabled)::before { border-color: GrayText; background-color: transparent; }
  :is(.ui-checkbox, .ui-radio, .ui-switch):has(> input:disabled)::after { background-color: GrayText; }
  :is(.ui-checkbox, .ui-radio, .ui-switch):has(> input:focus-visible) { outline-color: Highlight; }
  :is(input.ui-slider, .ui-slider input[type="range"]) {
    forced-color-adjust: none;
    --ui-slider-rail-color: CanvasText;
    --ui-slider-progress: Highlight;
  }
  :is(input.ui-slider, .ui-slider input[type="range"]):disabled {
    --ui-slider-rail-color: GrayText;
    --ui-slider-progress: GrayText;
  }
  /* tabs, nav */
  .ui-tab::before,
  .ui-tab::after { forced-color-adjust: none; }
  .ui-tab[aria-selected="true"]::after { background-color: ButtonText; }
  .ui-tab:not(:disabled):hover::before { background-color: Highlight; }
  .ui-tab:is(:focus-visible, .is-focus) { outline-color: Highlight; }
  .ui-tablist--filled-circular .ui-tab[aria-selected="true"] {
    forced-color-adjust: none;
    background-color: ButtonText;
    color: ButtonFace;
  }
  .ui-tablist--subtle-circular .ui-tab[aria-selected="true"] { border-color: Highlight; }
  .ui-nav__item:is([aria-current]:not([aria-current="false"]), .is-selected)::before,
  .ui-nav__category > summary::before { forced-color-adjust: none; background-color: Highlight; }
  /* cards, badges, tags */
  .ui-card:where(.ui-card--interactive, .ui-card--selectable, a[href], button, label):is(:hover, :active),
  .ui-card:is([aria-selected="true"], [aria-pressed="true"], [aria-checked="true"], .is-selected) {
    forced-color-adjust: none;
    background-color: Highlight;
    color: HighlightText;
    --ui-card-border: Highlight;
  }
  .ui-badge::after { border-color: CanvasText; }
  .ui-tag { border-color: CanvasText; }
  .ui-tag:is([aria-pressed="true"], [aria-selected="true"]) {
    forced-color-adjust: none;
    background-color: Highlight;
    color: HighlightText;
  }
  /* menus, overlays */
  .ui-menu__item:not([aria-disabled="true"]):hover {
    forced-color-adjust: none;
    background-color: Canvas;
    color: Highlight;
    outline: var(--strokeWidthThin) solid Highlight;
  }
  .ui-menu__item[aria-disabled="true"] { color: GrayText; }
  :is(.ui-menu, .ui-popover, .ui-tooltip, .ui-dialog, .ui-toast, dialog.ui-drawer) { border-color: CanvasText; }
  /* carousel dots */
  .ui-carousel__dot::after { forced-color-adjust: none; background-color: CanvasText; }
  .ui-carousel__nav--brand .ui-carousel__dot[aria-selected="true"]::after { background-color: Highlight; }
  /* progress, spinner, skeleton */
  .ui-progress { forced-color-adjust: none; background-color: CanvasText; }
  .ui-progress__bar,
  .ui-progress--indeterminate:not(:has(> .ui-progress__bar))::after { forced-color-adjust: none; background-color: Highlight; background-image: none; }
  .ui-spinner::before { forced-color-adjust: none; --ui-spinner-track: HighlightText; --ui-spinner-arc: Highlight; }
  .ui-spinner__ring { forced-color-adjust: none; background-color: HighlightText; color: Highlight; }
  .ui-message-bar__icon { color: CanvasText; }
  .ui-skeleton:not(:has(.ui-skeleton__item)),
  .ui-skeleton__item { forced-color-adjust: none; background-color: Canvas; outline: var(--strokeWidthThin) solid CanvasText; }
  .ui-skeleton__item::after { forced-color-adjust: none; background-image: none; background-color: CanvasText; opacity: 0.3; }
  .ui-skeleton::after { forced-color-adjust: none; background-image: none; background-color: CanvasText; opacity: 0.3; }
  /* table */
  .ui-table tbody tr:hover { color: Highlight; }
  .ui-table tbody tr[aria-selected="true"] { outline: var(--strokeWidthThick) solid Highlight; outline-offset: -2px; }
}

/* ============================================================================ 29. Reduced motion */
/* base.css shortens every animation to 0.01ms. Fluent keeps loading indicators alive but calmer: the Spinner turns
 * slower (1.8s) with a static fading arc, and the indeterminate ProgressBar becomes a full-width opacity pulse. */
@media (prefers-reduced-motion: reduce) {
  .ui-spinner::before {
    background: conic-gradient(var(--ui-spinner-track) 120deg, var(--ui-spinner-arc) 360deg);
    animation: ui-spinner-rotate 1.8s linear infinite !important;
  }
  .ui-progress--indeterminate .ui-progress__bar,
  .ui-progress--indeterminate:not(:has(> .ui-progress__bar))::after {
    max-width: 100%;
    translate: none;
    animation: ui-progress-pulse 3s var(--curveLinear) infinite !important;
  }
  .ui-carousel__viewport {
    scroll-behavior: auto;
  }
  .ui-spinner__ring {
    animation: ui-spinner-rotate 1.8s linear infinite !important;
  }
  .ui-spinner__tail {
    background-image: conic-gradient(transparent 120deg, currentColor 360deg);
    -webkit-mask-image: none;
    mask-image: none;
  }
  .ui-spinner__tail::before,
  .ui-spinner__tail::after {
    content: none;
  }
}