synthos 0.7.2 → 0.9.0

package/static-files/fluentlm.css

@@ -0,0 +1,4844 @@
+/* ==========================================================================
+   FluentLM — Design Tokens
+   All raw palette values, typography, spacing, effects, and motion tokens.
+   These are theme-independent constants. Semantic (theme-aware) colors live
+   in theme-light.css / theme-dark.css.
+   ========================================================================== */
+
+:root {
+  /* -----------------------------------------------------------------------
+     PALETTE — Brand / Theme Colors
+     ----------------------------------------------------------------------- */
+  --themeDarker:      #004578;
+  --themeDark:        #005a9e;
+  --themeDarkAlt:     #106ebe;
+  --themePrimary:     #0078d4;
+  --themeSecondary:   #2b88d8;
+  --themeTertiary:    #71afe5;
+  --themeLight:       #c7e0f4;
+  --themeLighter:     #deecf9;
+  --themeLighterAlt:  #eff6fc;
+
+  /* -----------------------------------------------------------------------
+     PALETTE — Neutrals
+     ----------------------------------------------------------------------- */
+  --black:                #000000;
+  --blackTranslucent40:   rgba(0, 0, 0, 0.4);
+  --neutralDark:          #201f1e;
+  --neutralPrimary:       #323130;
+  --neutralPrimaryAlt:    #3b3a39;
+  --neutralSecondary:     #605e5c;
+  --neutralSecondaryAlt:  #8a8886;
+  --neutralTertiary:      #a19f9d;
+  --neutralTertiaryAlt:   #c8c6c4;
+  --neutralQuaternary:    #d2d0ce;
+  --neutralQuaternaryAlt: #e1dfdd;
+  --neutralLight:         #edebe9;
+  --neutralLighter:       #f3f2f1;
+  --neutralLighterAlt:    #faf9f8;
+  --white:                #ffffff;
+  --whiteTranslucent40:   rgba(255, 255, 255, 0.4);
+
+  /* -----------------------------------------------------------------------
+     PALETTE — Status / Accent Colors
+     ----------------------------------------------------------------------- */
+  --yellow:         #ffb900;
+  --yellowDark:     #d29200;
+  --yellowLight:    #fff100;
+  --orange:         #d83b01;
+  --orangeLight:    #ea4300;
+  --orangeLighter:  #ff8c00;
+  --redDark:        #a4262c;
+  --red:            #e81123;
+  --magentaDark:    #5c005c;
+  --magenta:        #b4009e;
+  --magentaLight:   #e3008c;
+  --purpleDark:     #32145a;
+  --purple:         #5c2d91;
+  --purpleLight:    #b4a0ff;
+  --blueDark:       #002050;
+  --blueMid:        #00188f;
+  --blue:           #0078d4;
+  --blueLight:      #00bcf2;
+  --tealDark:       #004b50;
+  --teal:           #008272;
+  --tealLight:      #00b294;
+  --greenDark:      #004b1c;
+  --green:          #107c10;
+  --greenLight:     #bad80a;
+
+  /* -----------------------------------------------------------------------
+     TYPOGRAPHY — Font Family
+     ----------------------------------------------------------------------- */
+  --fontFamily: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system,
+    BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+  --fontFamilyMonospace: 'Cascadia Code', 'Consolas', 'Courier New', monospace;
+
+  /* -----------------------------------------------------------------------
+     TYPOGRAPHY — Font Sizes
+     ----------------------------------------------------------------------- */
+  --fontSizeTiny:       10px;
+  --fontSizeXSmall:     10px;
+  --fontSizeSmall:      12px;
+  --fontSizeSmallPlus:  12px;
+  --fontSizeMedium:     14px;
+  --fontSizeMediumPlus: 16px;
+  --fontSizeLarge:      18px;
+  --fontSizeXLarge:     20px;
+  --fontSizeXXLarge:    28px;
+  --fontSizeSuperLarge: 42px;
+  --fontSizeMega:       68px;
+
+  /* -----------------------------------------------------------------------
+     TYPOGRAPHY — Font Weights
+     ----------------------------------------------------------------------- */
+  --fontWeightLight:     100;
+  --fontWeightSemilight: 300;
+  --fontWeightRegular:   400;
+  --fontWeightSemibold:  600;
+  --fontWeightBold:      700;
+
+  /* -----------------------------------------------------------------------
+     TYPOGRAPHY — Line Heights (matched to size ramp)
+     ----------------------------------------------------------------------- */
+  --lineHeightTiny:       14px;
+  --lineHeightXSmall:     14px;
+  --lineHeightSmall:      16px;
+  --lineHeightSmallPlus:  16px;
+  --lineHeightMedium:     20px;
+  --lineHeightMediumPlus: 22px;
+  --lineHeightLarge:      24px;
+  --lineHeightXLarge:     28px;
+  --lineHeightXXLarge:    36px;
+  --lineHeightSuperLarge: 52px;
+  --lineHeightMega:       80px;
+
+  /* -----------------------------------------------------------------------
+     SPACING
+     ----------------------------------------------------------------------- */
+  --spacingS2: 4px;
+  --spacingS1: 8px;
+  --spacingM:  16px;
+  --spacingL1: 20px;
+  --spacingL2: 32px;
+
+  /* -----------------------------------------------------------------------
+     EFFECTS — Elevation / Shadows
+     ----------------------------------------------------------------------- */
+  --elevation4:  0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132),
+                 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108);
+  --elevation8:  0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132),
+                 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108);
+  --elevation16: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132),
+                 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);
+  --elevation64: 0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22),
+                 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18);
+
+  /* -----------------------------------------------------------------------
+     EFFECTS — Border Radius
+     ----------------------------------------------------------------------- */
+  --roundedCorner2: 2px;
+  --roundedCorner4: 4px;
+  --roundedCorner6: 6px;
+
+  /* -----------------------------------------------------------------------
+     MOTION — Durations
+     ----------------------------------------------------------------------- */
+  --duration1: 100ms;
+  --duration2: 200ms;
+  --duration3: 300ms;
+  --duration4: 400ms;
+
+  /* -----------------------------------------------------------------------
+     MOTION — Easing Curves
+     ----------------------------------------------------------------------- */
+  --easeAccelerate: cubic-bezier(0.9, 0.1, 1, 0.2);
+  --easeDecelerate: cubic-bezier(0.1, 0.9, 0.2, 1);
+  --easeLinear:     cubic-bezier(0, 0, 1, 1);
+  --easeStandard:   cubic-bezier(0.8, 0, 0.2, 1);
+
+  /* -----------------------------------------------------------------------
+     FOCUS — Outline style used by all interactive components
+     ----------------------------------------------------------------------- */
+  --focusOutlineWidth: 2px;
+  --focusOutlineOffset: -1px;
+}
+
+/* ==========================================================================
+   FluentLM — Base Styles
+   Reset, box-sizing, font smoothing, global element defaults, and
+   typography utility classes.
+   ========================================================================== */
+
+/* -----------------------------------------------------------------------
+   RESET
+   ----------------------------------------------------------------------- */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-size-adjust: 100%;
+  tab-size: 4;
+}
+
+body {
+  margin: 0;
+  font-family: var(--fontFamily);
+  font-size: var(--fontSizeMedium);
+  font-weight: var(--fontWeightRegular);
+  line-height: var(--lineHeightMedium);
+  color: var(--bodyText);
+  background-color: var(--bodyBackground);
+}
+
+/* Remove default margins */
+h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
+  margin: 0;
+}
+
+/* Remove list styles on ul/ol with role="list" */
+ul[role='list'],
+ol[role='list'] {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+/* Sensible defaults for media */
+img, picture, video, canvas, svg {
+  display: block;
+  max-width: 100%;
+}
+
+/* Inherit fonts for form controls */
+input, button, textarea, select {
+  font: inherit;
+  color: inherit;
+}
+
+/* Remove default button styles */
+button {
+  cursor: pointer;
+  border: none;
+  background: none;
+  padding: 0;
+}
+
+/* Remove textarea resize handle (components control this) */
+textarea {
+  resize: vertical;
+}
+
+/* Anchor defaults */
+a {
+  color: var(--link);
+  text-decoration: none;
+}
+
+a:hover {
+  color: var(--linkHovered);
+  text-decoration: underline;
+}
+
+/* -----------------------------------------------------------------------
+   FOCUS STYLES
+   Visible keyboard focus ring matching Fluent v8.
+   Uses :focus-visible so mouse clicks don't trigger the outline.
+   ----------------------------------------------------------------------- */
+:focus-visible {
+  outline: var(--focusOutlineWidth) solid var(--focusBorder);
+  outline-offset: var(--focusOutlineOffset);
+}
+
+:focus:not(:focus-visible) {
+  outline: none;
+}
+
+/* -----------------------------------------------------------------------
+   SCROLLBAR (thin, neutral — matches Fluent aesthetic)
+   ----------------------------------------------------------------------- */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--neutralTertiaryAlt);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--neutralTertiary);
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+/* Firefox */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--neutralTertiaryAlt) transparent;
+}
+
+/* -----------------------------------------------------------------------
+   TYPOGRAPHY — Utility Classes
+   Usage: <span class="flm-text-large">Hello</span>
+   Each class sets font-size, line-height, and weight per the Fluent ramp.
+   ----------------------------------------------------------------------- */
+.flm-text-tiny {
+  font-size: var(--fontSizeTiny);
+  line-height: var(--lineHeightTiny);
+  font-weight: var(--fontWeightRegular);
+}
+
+.flm-text-xSmall {
+  font-size: var(--fontSizeXSmall);
+  line-height: var(--lineHeightXSmall);
+  font-weight: var(--fontWeightRegular);
+}
+
+.flm-text-small {
+  font-size: var(--fontSizeSmall);
+  line-height: var(--lineHeightSmall);
+  font-weight: var(--fontWeightRegular);
+}
+
+.flm-text-smallPlus {
+  font-size: var(--fontSizeSmallPlus);
+  line-height: var(--lineHeightSmallPlus);
+  font-weight: var(--fontWeightRegular);
+}
+
+.flm-text-medium {
+  font-size: var(--fontSizeMedium);
+  line-height: var(--lineHeightMedium);
+  font-weight: var(--fontWeightRegular);
+}
+
+.flm-text-mediumPlus {
+  font-size: var(--fontSizeMediumPlus);
+  line-height: var(--lineHeightMediumPlus);
+  font-weight: var(--fontWeightRegular);
+}
+
+.flm-text-large {
+  font-size: var(--fontSizeLarge);
+  line-height: var(--lineHeightLarge);
+  font-weight: var(--fontWeightRegular);
+}
+
+.flm-text-xLarge {
+  font-size: var(--fontSizeXLarge);
+  line-height: var(--lineHeightXLarge);
+  font-weight: var(--fontWeightSemibold);
+}
+
+.flm-text-xxLarge {
+  font-size: var(--fontSizeXXLarge);
+  line-height: var(--lineHeightXXLarge);
+  font-weight: var(--fontWeightSemibold);
+}
+
+.flm-text-superLarge {
+  font-size: var(--fontSizeSuperLarge);
+  line-height: var(--lineHeightSuperLarge);
+  font-weight: var(--fontWeightSemibold);
+}
+
+.flm-text-mega {
+  font-size: var(--fontSizeMega);
+  line-height: var(--lineHeightMega);
+  font-weight: var(--fontWeightSemibold);
+}
+
+/* Weight modifiers */
+.flm-weight-light     { font-weight: var(--fontWeightLight); }
+.flm-weight-semilight { font-weight: var(--fontWeightSemilight); }
+.flm-weight-regular   { font-weight: var(--fontWeightRegular); }
+.flm-weight-semibold  { font-weight: var(--fontWeightSemibold); }
+.flm-weight-bold      { font-weight: var(--fontWeightBold); }
+
+/* Monospace */
+.flm-text-mono {
+  font-family: var(--fontFamilyMonospace);
+}
+
+/* Text helpers */
+.flm-text-nowrap {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.flm-text-block {
+  display: block;
+}
+
+/* -----------------------------------------------------------------------
+   SELECTION HIGHLIGHT
+   ----------------------------------------------------------------------- */
+::selection {
+  background-color: var(--themePrimary);
+  color: var(--white);
+}
+
+/* -----------------------------------------------------------------------
+   SCREEN-READER ONLY (accessibility helper)
+   ----------------------------------------------------------------------- */
+.flm-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* -----------------------------------------------------------------------
+   THEME TRANSITION
+   Smooth color transition when switching themes at runtime.
+   ----------------------------------------------------------------------- */
+.fluent-theme-transition,
+.fluent-theme-transition *,
+.fluent-theme-transition *::before,
+.fluent-theme-transition *::after {
+  transition: background-color var(--duration2) var(--easeStandard),
+              color var(--duration2) var(--easeStandard),
+              border-color var(--duration2) var(--easeStandard),
+              box-shadow var(--duration2) var(--easeStandard);
+}
+
+/* Breadcrumb */
+
+.flm-breadcrumb {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  font-family: var(--fontFamily);
+  font-size: var(--fontSizeMedium);
+  line-height: var(--lineHeightMedium);
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.flm-breadcrumb-item {
+  display: inline-flex;
+  align-items: center;
+}
+
+.flm-breadcrumb-item + .flm-breadcrumb-item::before {
+  content: '';
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  margin: 0 var(--spacingS1);
+  border-right: 1.5px solid var(--neutralTertiary);
+  border-top: 1.5px solid var(--neutralTertiary);
+  transform: rotate(45deg);
+  flex-shrink: 0;
+}
+
+.flm-breadcrumb-link {
+  color: var(--bodyText);
+  text-decoration: none;
+  padding: var(--spacingS2) 0;
+  font-size: var(--fontSizeMedium);
+  cursor: pointer;
+}
+
+.flm-breadcrumb-link:hover {
+  color: var(--linkHovered);
+  text-decoration: underline;
+}
+
+/* Current (last) item */
+.flm-breadcrumb-item:last-child .flm-breadcrumb-link {
+  color: var(--bodyText);
+  font-weight: var(--fontWeightSemibold);
+  cursor: default;
+}
+
+.flm-breadcrumb-item:last-child .flm-breadcrumb-link:hover {
+  text-decoration: none;
+  color: var(--bodyText);
+}
+
+/* Overflow button */
+.flm-breadcrumb-overflow {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  color: var(--bodyText);
+  cursor: pointer;
+  padding: var(--spacingS2);
+  font-size: var(--fontSizeMedium);
+}
+
+.flm-breadcrumb-overflow:hover {
+  color: var(--linkHovered);
+}
+
+/* Size variants */
+.flm-breadcrumb--small .flm-breadcrumb-link { font-size: var(--fontSizeSmall); }
+.flm-breadcrumb--large .flm-breadcrumb-link {
+  font-size: var(--fontSizeLarge);
+  font-weight: var(--fontWeightSemibold);
+}
+
+/* Button */
+
+.flm-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacingS2);
+  min-width: 80px;
+  height: 32px;
+  padding: 0 20px;
+  border: 1px solid var(--buttonBorder);
+  border-radius: var(--roundedCorner2);
+  background-color: var(--buttonBackground);
+  color: var(--buttonText);
+  font-family: var(--fontFamily);
+  font-size: var(--fontSizeMedium);
+  font-weight: var(--fontWeightSemibold);
+  line-height: var(--lineHeightMedium);
+  cursor: pointer;
+  text-decoration: none;
+  white-space: nowrap;
+  user-select: none;
+  outline: none;
+  position: relative;
+  vertical-align: middle;
+  box-sizing: border-box;
+}
+
+.flm-button:hover {
+  background-color: var(--buttonBackgroundHovered);
+  color: var(--buttonTextHovered);
+}
+
+.flm-button:active {
+  background-color: var(--buttonBackgroundPressed);
+  color: var(--buttonTextPressed);
+}
+
+.flm-button:focus-visible {
+  outline: var(--focusOutlineWidth) solid var(--focusBorder);
+  outline-offset: var(--focusOutlineOffset);
+}
+
+/* Disabled */
+.flm-button:disabled,
+.flm-button[disabled] {
+  background-color: var(--buttonBackgroundDisabled);
+  border-color: var(--buttonBorderDisabled);
+  color: var(--buttonTextDisabled);
+  cursor: default;
+  pointer-events: none;
+}
+
+/* Primary */
+.flm-button--primary {
+  background-color: var(--primaryButtonBackground);
+  border-color: var(--primaryButtonBorder);
+  color: var(--primaryButtonText);
+}
+
+.flm-button--primary:hover {
+  background-color: var(--primaryButtonBackgroundHovered);
+  color: var(--primaryButtonTextHovered);
+}
+
+.flm-button--primary:active {
+  background-color: var(--primaryButtonBackgroundPressed);
+  color: var(--primaryButtonTextPressed);
+}
+
+.flm-button--primary:disabled,
+.flm-button--primary[disabled] {
+  background-color: var(--primaryButtonBackgroundDisabled);
+  color: var(--primaryButtonTextDisabled);
+  border-color: var(--primaryButtonBackgroundDisabled);
+}
+
+/* Subtle */
+.flm-button--subtle {
+  background-color: transparent;
+  border-color: transparent;
+  min-width: auto;
+}
+
+.flm-button--subtle:hover {
+  background-color: var(--buttonBackgroundHovered);
+  border-color: transparent;
+}
+
+.flm-button--subtle:active {
+  background-color: var(--buttonBackgroundPressed);
+}
+
+/* Icon-only */
+.flm-button--icon {
+  min-width: 32px;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--bodyText);
+}
+
+.flm-button--icon:hover {
+  background-color: var(--buttonBackgroundHovered);
+  color: var(--buttonTextHovered);
+}
+
+.flm-button--icon:active {
+  background-color: var(--buttonBackgroundPressed);
+}
+
+/* Compound */
+.flm-button--compound {
+  height: auto;
+  min-height: 40px;
+  padding: 8px 20px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0;
+}
+
+.flm-button-label {
+  font-size: var(--fontSizeMedium);
+  font-weight: var(--fontWeightSemibold);
+  line-height: var(--lineHeightMedium);
+}
+
+.flm-button-description {
+  font-size: var(--fontSizeSmall);
+  font-weight: var(--fontWeightRegular);
+  line-height: var(--lineHeightSmall);
+  color: var(--bodySubtext);
+}
+
+.flm-button--compound:hover .flm-button-description {
+  color: var(--bodyText);
+}
+
+.flm-button--primary.flm-button--compound .flm-button-description {
+  color: var(--whiteTranslucent40);
+}
+
+.flm-button--primary.flm-button--compound:hover .flm-button-description {
+  color: var(--white);
+}
+
+/* Split button */
+.flm-button-split {
+  display: inline-flex;
+  align-items: stretch;
+}
+
+.flm-button-split > .flm-button {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.flm-button-split-caret {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  border: 1px solid var(--buttonBorder);
+  border-left: none;
+  border-radius: 0 var(--roundedCorner2) var(--roundedCorner2) 0;
+  background-color: var(--buttonBackground);
+  color: var(--buttonText);
+  cursor: pointer;
+}
+
+.flm-button-split-caret:hover {
+  background-color: var(--buttonBackgroundHovered);
+  color: var(--buttonTextHovered);
+}
+
+.flm-button-split--primary > .flm-button {
+  border-right-color: var(--themeDark);
+}
+
+.flm-button-split--primary .flm-button-split-caret {
+  background-color: var(--primaryButtonBackground);
+  border-color: var(--primaryButtonBorder);
+  border-left-color: var(--themeDark);
+  color: var(--primaryButtonText);
+}
+
+.flm-button-split--primary .flm-button-split-caret:hover {
+  background-color: var(--primaryButtonBackgroundHovered);
+}
+
+/* Icon inside button */
+.flm-button > .flm-icon {
+  flex-shrink: 0;
+}
+
+/* Callout — positioned popup anchored to a target element */
+
+.flm-callout {
+  position: absolute;
+  z-index: 1000;
+  background-color: var(--bodyBackground);
+  border-radius: var(--roundedCorner2);
+  box-shadow: var(--elevation16);
+  border: 1px solid var(--variantBorder);
+  max-width: 364px;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(4px);
+  transition: opacity var(--duration1) var(--easeStandard),
+              transform var(--duration1) var(--easeDecelerate);
+}
+
+.flm-callout--visible {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+
+.flm-callout-body {
+  padding: var(--spacingM);
+}
+
+/* Beak / arrow */
+.flm-callout-beak {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  background-color: var(--bodyBackground);
+  border: 1px solid var(--variantBorder);
+  transform: rotate(45deg);
+  border-right: none;
+  border-bottom: none;
+  top: -9px;
+  left: 24px;
+}
+
+.flm-callout--below .flm-callout-beak {
+  top: -9px;
+}
+
+.flm-callout--above .flm-callout-beak {
+  top: auto;
+  bottom: -9px;
+  border: 1px solid var(--variantBorder);
+  border-left: none;
+  border-top: none;
+}
+
+/* Checkbox */
+
+.flm-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacingS2);
+  cursor: pointer;
+  user-select: none;
+  font-family: var(--fontFamily);
+  font-size: var(--fontSizeMedium);
+  line-height: var(--lineHeightMedium);
+  color: var(--bodyText);
+  position: relative;
+  padding: 2px 0;
+}
+
+/* Hide native checkbox */
+.flm-checkbox-input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+}
+
+/* Visual checkbox box */
+.flm-checkbox-mark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  min-width: 20px;
+  border: 1px solid var(--smallInputBorder);
+  border-radius: var(--roundedCorner2);
+  background-color: var(--inputBackground);
+  transition: background-color var(--duration1) var(--easeStandard),
+              border-color var(--duration1) var(--easeStandard);
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+
+/* Checkmark icon (CSS-drawn) */
+.flm-checkbox-mark::after {
+  content: '';
+  display: none;
+  width: 6px;
+  height: 10px;
+  border: solid var(--inputForegroundChecked);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+  margin-top: -2px;
+}
+
+/* Hover */
+.flm-checkbox:hover .flm-checkbox-mark {
+  border-color: var(--inputBorderHovered);
+}
+
+/* Checked */
+.flm-checkbox-input:checked + .flm-checkbox-mark {
+  background-color: var(--inputBackgroundChecked);
+  border-color: var(--inputBackgroundChecked);
+}
+
+.flm-checkbox-input:checked + .flm-checkbox-mark::after {
+  display: block;
+}
+
+/* Checked hover */
+.flm-checkbox:hover .flm-checkbox-input:checked + .flm-checkbox-mark {
+  background-color: var(--inputBackgroundCheckedHovered);
+  border-color: var(--inputBackgroundCheckedHovered);
+}
+
+/* Focus */
+.flm-checkbox-input:focus-visible + .flm-checkbox-mark {
+  outline: var(--focusOutlineWidth) solid var(--focusBorder);
+  outline-offset: var(--focusOutlineOffset);
+}
+
+/* Disabled */
+.flm-checkbox--disabled,
+.flm-checkbox:has(.flm-checkbox-input:disabled) {
+  cursor: default;
+  color: var(--disabledText);
+}
+
+.flm-checkbox-input:disabled + .flm-checkbox-mark {
+  background-color: var(--disabledBackground);
+  border-color: var(--disabledBorder);
+}
+
+.flm-checkbox-input:disabled:checked + .flm-checkbox-mark {
+  background-color: var(--disabledBackground);
+  border-color: var(--disabledBorder);
+}
+
+.flm-checkbox-input:disabled:checked + .flm-checkbox-mark::after {
+  border-color: var(--disabledText);
+}
+
+.flm-checkbox-label {
+  /* Inherits from parent */
+}
+
+/* ChoiceGroup — Radio button group */
+
+.flm-choicegroup {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacingS2);
+  font-family: var(--fontFamily);
+}
+
+/* Horizontal variant */
+.flm-choicegroup--horizontal {
+  flex-direction: row;
+  gap: var(--spacingM);
+}
+
+.flm-choicegroup-option {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacingS2);
+  cursor: pointer;
+  user-select: none;
+  font-size: var(--fontSizeMedium);
+  line-height: var(--lineHeightMedium);
+  color: var(--bodyText);
+  position: relative;
+  padding: 2px 0;
+}
+
+/* Hide native radio */
+.flm-choicegroup-input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+}
+
+/* Visual radio circle */
+.flm-choicegroup-mark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  min-width: 20px;
+  border: 1px solid var(--smallInputBorder);
+  border-radius: 50%;
+  background-color: var(--inputBackground);
+  transition: background-color var(--duration1) var(--easeStandard),
+              border-color var(--duration1) var(--easeStandard);
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+
+/* Inner dot */
+.flm-choicegroup-mark::after {
+  content: '';
+  display: none;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background-color: var(--inputBackgroundChecked);
+}
+
+/* Hover */
+.flm-choicegroup-option:hover .flm-choicegroup-mark {
+  border-color: var(--inputBorderHovered);
+}
+
+/* Checked */
+.flm-choicegroup-input:checked + .flm-choicegroup-mark {
+  border-color: var(--inputBackgroundChecked);
+}
+
+.flm-choicegroup-input:checked + .flm-choicegroup-mark::after {
+  display: block;
+}
+
+/* Checked hover */
+.flm-choicegroup-option:hover .flm-choicegroup-input:checked + .flm-choicegroup-mark {
+  border-color: var(--inputBackgroundCheckedHovered);
+}
+
+.flm-choicegroup-option:hover .flm-choicegroup-input:checked + .flm-choicegroup-mark::after {
+  background-color: var(--inputBackgroundCheckedHovered);
+}
+
+/* Focus */
+.flm-choicegroup-input:focus-visible + .flm-choicegroup-mark {
+  outline: var(--focusOutlineWidth) solid var(--focusBorder);
+  outline-offset: var(--focusOutlineOffset);
+}
+
+/* Disabled */
+.flm-choicegroup-option--disabled,
+.flm-choicegroup-option:has(.flm-choicegroup-input:disabled) {
+  cursor: default;
+  color: var(--disabledText);
+}
+
+.flm-choicegroup-input:disabled + .flm-choicegroup-mark {
+  background-color: var(--disabledBackground);
+  border-color: var(--disabledBorder);
+}
+
+.flm-choicegroup-input:disabled:checked + .flm-choicegroup-mark::after {
+  background-color: var(--disabledText);
+}
+
+.flm-choicegroup-label {
+  /* Inherits from parent */
+}
+
+/* Coachmark — Pulsing beacon that reveals a TeachingBubble */
+
+@keyframes flm-coachmark-pulse {
+  0% {
+    transform: scale(1);
+    opacity: 0.8;
+  }
+  100% {
+    transform: scale(2.5);
+    opacity: 0;
+  }
+}
+
+.flm-coachmark {
+  position: absolute;
+  z-index: 999;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+/* Central dot */
+.flm-coachmark-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background-color: var(--themePrimary);
+  position: relative;
+  z-index: 1;
+}
+
+/* Pulsing ring */
+.flm-coachmark-ring {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: 2px solid var(--themePrimary);
+  animation: flm-coachmark-pulse 1.5s ease-out infinite;
+  top: 50%;
+  left: 50%;
+  margin-top: -6px;
+  margin-left: -6px;
+  box-sizing: border-box;
+}
+
+/* Hidden state (after teaching bubble dismissed) */
+.flm-coachmark--hidden {
+  display: none;
+}
+
+/* Color variants */
+.flm-coachmark--dark .flm-coachmark-dot {
+  background-color: var(--themeDark);
+}
+
+.flm-coachmark--dark .flm-coachmark-ring {
+  border-color: var(--themeDark);
+}
+
+/* ComboBox — Filterable dropdown */
+
+.flm-combobox {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  position: relative;
+  font-family: var(--fontFamily);
+}
+
+.flm-combobox-wrapper {
+  display: flex;
+  align-items: stretch;
+  height: 32px;
+  border: 1px solid var(--inputBorder);
+  border-radius: var(--roundedCorner2);
+  background-color: var(--inputBackground);
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.flm-combobox-wrapper:hover {
+  border-color: var(--inputBorderHovered);
+}
+
+.flm-combobox-wrapper:focus-within {
+  border-color: var(--inputFocusBorderAlt);
+  border-bottom-width: 2px;
+}
+
+.flm-combobox-input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  color: var(--inputText);
+  font-family: var(--fontFamily);
+  font-size: var(--fontSizeMedium);
+  line-height: var(--lineHeightMedium);
+  padding: 0 8px;
+  outline: none;
+  min-width: 0;
+}
+
+.flm-combobox-input::placeholder {
+  color: var(--inputPlaceholderText);
+}
+
+/* Caret button */
+.flm-combobox-caret {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  border: none;
+  background: transparent;
+  color: var(--bodySubtext);
+  cursor: pointer;
+  padding: 0;
+  flex-shrink: 0;
+}
+
+.flm-combobox-caret:hover {
+  background-color: var(--listItemBackgroundHovered);
+  color: var(--bodyText);
+}
+
+/* Listbox (option dropdown) */
+.flm-combobox-listbox {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 100%;
+  margin-top: 2px;
+  z-index: 1000;
+  background-color: var(--bodyBackground);
+  border: 1px solid var(--variantBorder);
+  border-radius: var(--roundedCorner2);
+  box-shadow: var(--elevation8);
+  max-height: 220px;
+  overflow-y: auto;
+  display: none;
+}
+
+.flm-combobox-listbox--open {
+  display: block;
+}
+
+/* Flip above */
+.flm-combobox-listbox--above {
+  top: auto;
+  bottom: 100%;
+  margin-top: 0;
+  margin-bottom: 2px;
+}
+
+.flm-combobox-option {
+  display: flex;
+  align-items: center;
+  padding: 6px var(--spacingS1);
+  min-height: 32px;
+  cursor: pointer;
+  font-size: var(--fontSizeMedium);
+  line-height: var(--lineHeightMedium);
+  color: var(--bodyText);
+  box-sizing: border-box;
+}
+
+.flm-combobox-option:hover,
+.flm-combobox-option--highlighted {
+  background-color: var(--listItemBackgroundHovered);
+}
+
+.flm-combobox-option--selected {
+  background-color: var(--listItemBackgroundChecked);
+  font-weight: var(--fontWeightSemibold);
+}
+
+.flm-combobox-option--disabled {
+  color: var(--disabledText);
+  cursor: default;
+  pointer-events: none;
+}
+
+.flm-combobox-option--hidden {
+  display: none;
+}
+
+/* Multi-select checkbox inside option */
+.flm-combobox-option-check {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  min-width: 16px;
+  margin-right: var(--spacingS2);
+  border: 1px solid var(--smallInputBorder);
+  border-radius: var(--roundedCorner2);
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+
+.flm-combobox-option--selected .flm-combobox-option-check {
+  background-color: var(--inputBackgroundChecked);
+  border-color: var(--inputBackgroundChecked);
+}
+
+.flm-combobox-option--selected .flm-combobox-option-check::after {
+  content: '';
+  display: block;
+  width: 5px;
+  height: 8px;
+  border: solid var(--inputForegroundChecked);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+  margin-top: -2px;
+}
+
+/* Disabled combobox */
+.flm-combobox--disabled .flm-combobox-wrapper {
+  border-color: var(--disabledBorder);
+  background-color: var(--disabledBackground);
+}
+
+.flm-combobox--disabled .flm-combobox-input {
+  color: var(--disabledText);
+}
+
+.flm-combobox--disabled .flm-combobox-caret {
+  color: var(--disabledText);
+  cursor: default;
+  pointer-events: none;
+}
+
+/* Error */
+.flm-combobox--error .flm-combobox-wrapper {
+  border-color: var(--errorText);
+}
+
+.flm-combobox-error {
+  display: block;
+  font-size: var(--fontSizeSmall);
+  line-height: var(--lineHeightSmall);
+  color: var(--errorText);
+  padding-top: 5px;
+}
+
+/* CommandBar — horizontal toolbar */
+
+.flm-commandbar {
+  display: flex;
+  align-items: stretch;
+  height: 44px;
+  background-color: var(--bodyBackground);
+  border-bottom: 1px solid var(--bodyDivider);
+  padding: 0 var(--spacingS2);
+  font-family: var(--fontFamily);
+}
+
+.flm-commandbar-items {
+  display: flex;
+  align-items: stretch;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.flm-commandbar-far {
+  display: flex;
+  align-items: stretch;
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+.flm-commandbar-item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacingS2);
+  padding: 0 var(--spacingS1);
+  border: none;
+  background: transparent;
+  color: var(--bodyText);
+  font-family: var(--fontFamily);
+  font-size: var(--fontSizeMedium);
+  cursor: pointer;
+  white-space: nowrap;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.flm-commandbar-item:hover {
+  background-color: var(--buttonBackgroundHovered);
+  color: var(--buttonTextHovered);
+}
+
+.flm-commandbar-item:active {
+  background-color: var(--buttonBackgroundPressed);
+}
+
+.flm-commandbar-item[disabled] {
+  color: var(--disabledText);
+  cursor: default;
+  pointer-events: none;
+}
+
+.flm-commandbar-divider {
+  width: 1px;
+  align-self: stretch;
+  margin: 8px 4px;
+  background-color: var(--bodyDivider);
+}
+
+/* Overflow button */
+.flm-commandbar-overflow {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  border: none;
+  background: transparent;
+  color: var(--bodyText);
+  cursor: pointer;
+}
+
+.flm-commandbar-overflow:hover {
+  background-color: var(--buttonBackgroundHovered);
+}
+
+/* ContextualMenu */
+
+.flm-contextmenu {
+  position: absolute;
+  z-index: 1000;
+  background-color: var(--menuBackground);
+  border-radius: var(--roundedCorner2);
+  box-shadow: var(--elevation8);
+  border: 1px solid var(--variantBorder);
+  min-width: 180px;
+  max-width: 300px;
+  padding: var(--spacingS2) 0;
+  opacity: 0;
+  pointer-events: none;
+  transform: scaleY(0.95);
+  transform-origin: top left;
+  transition: opacity var(--duration1) var(--easeStandard),
+              transform var(--duration1) var(--easeDecelerate);
+  font-family: var(--fontFamily);
+}
+
+.flm-contextmenu--visible {
+  opacity: 1;
+  pointer-events: auto;
+  transform: scaleY(1);
+}
+
+.flm-contextmenu-item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacingS2);
+  padding: 6px var(--spacingS1);
+  border: none;
+  background: transparent;
+  color: var(--menuItemText);
+  font-family: var(--fontFamily);
+  font-size: var(--fontSizeMedium);
+  line-height: var(--lineHeightMedium);
+  cursor: pointer;
+  width: 100%;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.flm-contextmenu-item:hover {
+  background-color: var(--menuItemBackgroundHovered);
+  color: var(--menuItemTextHovered);
+}
+
+.flm-contextmenu-item:active {
+  background-color: var(--menuItemBackgroundPressed);
+}
+
+.flm-contextmenu-item[disabled] {
+  color: var(--disabledText);
+  cursor: default;
+  pointer-events: none;
+}
+
+.flm-contextmenu-item-icon {
+  display: inline-flex;
+  width: 16px;
+  height: 16px;
+  color: var(--menuIcon);
+  flex-shrink: 0;
+}
+
+.flm-contextmenu-item-icon > svg {
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+}
+
+.flm-contextmenu-item-text {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Submenu indicator */
+.flm-contextmenu-item-submenu {
+  display: inline-flex;
+  width: 12px;
+  height: 12px;
+  margin-left: auto;
+  color: var(--bodySubtext);
+  flex-shrink: 0;
+}
+
+.flm-contextmenu-divider {
+  height: 1px;
+  background-color: var(--menuDivider);
+  margin: var(--spacingS2) 0;
+}
+
+.flm-contextmenu-header {
+  padding: 6px var(--spacingS1);
+  font-size: var(--fontSizeSmall);
+  font-weight: var(--fontWeightSemibold);
+  color: var(--menuHeader);
+}
+
+/* Checkbox / radio items */
+.flm-contextmenu-item--checked::before {
+  content: '';
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%230078d4' d='M13.86 3.66a.5.5 0 0 1-.02.7l-7.93 7.48a.5.5 0 0 1-.7-.02L2.16 8.59a.5.5 0 0 1 .72-.7l2.7 2.88 7.58-7.13a.5.5 0 0 1 .7.02z'/%3E%3C/svg%3E");
+  background-size: contain;
+  flex-shrink: 0;
+}
+
+/* DatePicker — Date input with calendar dropdown */
+
+.flm-datepicker {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  position: relative;
+  font-family: var(--fontFamily);
+}
+
+.flm-datepicker-wrapper {
+  display: flex;
+  align-items: stretch;
+  height: 32px;
+  border: 1px solid var(--inputBorder);
+  border-radius: var(--roundedCorner2);
+  background-color: var(--inputBackground);
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.flm-datepicker-wrapper:hover {
+  border-color: var(--inputBorderHovered);
+}
+
+.flm-datepicker-wrapper:focus-within {
+  border-color: var(--inputFocusBorderAlt);
+  border-bottom-width: 2px;
+}
+
+.flm-datepicker-input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  color: var(--inputText);
+  font-family: var(--fontFamily);
+  font-size: var(--fontSizeMedium);
+  line-height: var(--lineHeightMedium);
+  padding: 0 8px;
+  outline: none;
+  min-width: 0;
+}
+
+.flm-datepicker-input::placeholder {
+  color: var(--inputPlaceholderText);
+}
+
+/* Calendar icon button */
+.flm-datepicker-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  border: none;
+  background: transparent;
+  color: var(--bodySubtext);
+  cursor: pointer;
+  padding: 0;
+  flex-shrink: 0;
+}
+
+.flm-datepicker-icon:hover {
+  background-color: var(--listItemBackgroundHovered);
+  color: var(--bodyText);
+}
+
+/* Calendar callout */
+.flm-datepicker-callout {
+  position: absolute;
+  left: 0;
+  top: 100%;
+  margin-top: 2px;
+  z-index: 1000;
+  background-color: var(--bodyBackground);
+  border: 1px solid var(--variantBorder);
+  border-radius: var(--roundedCorner2);
+  box-shadow: var(--elevation8);
+  padding: var(--spacingS1);
+  display: none;
+  width: 252px;
+}
+
+.flm-datepicker-callout--open {
+  display: block;
+}
+
+.flm-datepicker-callout--above {
+  top: auto;
+  bottom: 100%;
+  margin-top: 0;
+  margin-bottom: 2px;
+}
+
+/* Month navigation header */
+.flm-datepicker-nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacingS2) 0;
+  margin-bottom: var(--spacingS2);
+}
+
+.flm-datepicker-month {
+  font-size: var(--fontSizeMedium);
+  font-weight: var(--fontWeightSemibold);
+  color: var(--bodyText);
+  user-select: none;
+}
+
+.flm-datepicker-nav-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: transparent;
+  color: var(--bodySubtext);
+  cursor: pointer;
+  border-radius: var(--roundedCorner2);
+  padding: 0;
+}
+
+.flm-datepicker-nav-btn:hover {
+  background-color: var(--listItemBackgroundHovered);
+  color: var(--bodyText);
+}
+
+/* Day-of-week header row */
+.flm-datepicker-weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  text-align: center;
+  margin-bottom: 2px;
+}
+
+.flm-datepicker-weekday {
+  font-size: var(--fontSizeSmall);
+  line-height: 32px;
+  color: var(--bodySubtext);
+  font-weight: var(--fontWeightSemibold);
+  user-select: none;
+}
+
+/* Calendar grid (7×6 = 42 cells) */
+.flm-datepicker-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  text-align: center;
+}
+
+.flm-datepicker-day {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  margin: 1px auto;
+  border: none;
+  background: transparent;
+  color: var(--bodyText);
+  font-size: var(--fontSizeSmall);
+  cursor: pointer;
+  border-radius: 50%;
+  padding: 0;
+}
+
+.flm-datepicker-day:hover {
+  background-color: var(--listItemBackgroundHovered);
+}
+
+/* Today */
+.flm-datepicker-day--today {
+  font-weight: var(--fontWeightSemibold);
+  color: var(--themePrimary);
+  background-color: var(--themeLighterAlt);
+  border-radius: 50%;
+}
+
+/* Selected */
+.flm-datepicker-day--selected {
+  background-color: var(--themePrimary);
+  color: var(--white);
+}
+
+.flm-datepicker-day--selected:hover {
+  background-color: var(--themeDarkAlt);
+}
+
+/* Outside current month */
+.flm-datepicker-day--outside {
+  color: var(--neutralTertiary);
+}
+
+/* Disabled dates */
+.flm-datepicker-day--disabled {
+  color: var(--disabledText);
+  cursor: default;
+  pointer-events: none;
+}
+
+/* Disabled datepicker */
+.flm-datepicker--disabled .flm-datepicker-wrapper {
+  border-color: var(--disabledBorder);
+  background-color: var(--disabledBackground);
+}
+
+.flm-datepicker--disabled .flm-datepicker-input {
+  color: var(--disabledText);
+}
+
+.flm-datepicker--disabled .flm-datepicker-icon {
+  color: var(--disabledText);
+  cursor: default;
+  pointer-events: none;
+}
+
+/* Error */
+.flm-datepicker--error .flm-datepicker-wrapper {
+  border-color: var(--errorText);
+}
+
+.flm-datepicker-error {
+  display: block;
+  font-size: var(--fontSizeSmall);
+  line-height: var(--lineHeightSmall);
+  color: var(--errorText);
+  padding-top: 5px;
+}
+
+/* DetailsList — data table */
+
+.flm-detailslist {
+  width: 100%;
+  font-family: var(--fontFamily);
+  font-size: var(--fontSizeMedium);
+  border-collapse: collapse;
+}
+
+/* Header */
+.flm-detailslist-header {
+  display: flex;
+  align-items: stretch;
+  border-bottom: 1px solid var(--bodyDivider);
+  background-color: var(--bodyBackground);
+  min-height: 42px;
+  user-select: none;
+}
+
+.flm-detailslist-header-cell {
+  display: flex;
+  align-items: center;
+  gap: var(--spacingS2);
+  padding: 0 var(--spacingS1);
+  font-size: var(--fontSizeSmall);
+  font-weight: var(--fontWeightSemibold);
+  color: var(--bodyText);
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex-shrink: 0;
+}
+
+.flm-detailslist-header-cell:hover {
+  background-color: var(--listHeaderBackgroundHovered);
+}
+
+.flm-detailslist-header-cell:active {
+  background-color: var(--listHeaderBackgroundPressed);
+}
+
+/* Sort indicator */
+.flm-detailslist-sort {
+  display: inline-flex;
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+}
+
+/* Rows */
+.flm-detailslist-row {
+  display: flex;
+  align-items: center;
+  min-height: 42px;
+  border-bottom: 1px solid var(--bodyDivider);
+  background-color: var(--listBackground);
+  cursor: default;
+}
+
+.flm-detailslist-row:hover {
+  background-color: var(--listItemBackgroundHovered);
+}
+
+.flm-detailslist-row--selected {
+  background-color: var(--listItemBackgroundChecked);
+}
+
+.flm-detailslist-row--selected:hover {
+  background-color: var(--listItemBackgroundCheckedHovered);
+}
+
+.flm-detailslist-cell {
+  padding: 0 var(--spacingS1);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--fontSizeMedium);
+  color: var(--bodyText);
+  flex-shrink: 0;
+}
+
+/* Row checkbox */
+.flm-detailslist-check {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  flex-shrink: 0;
+}
+
+/* Compact mode */
+.flm-detailslist--compact .flm-detailslist-row,
+.flm-detailslist--compact .flm-detailslist-header {
+  min-height: 32px;
+}
+
+/* Empty state */
+.flm-detailslist-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacingL2);
+  color: var(--bodySubtext);
+  font-size: var(--fontSizeMedium);
+}
+
+/* Column resize handle */
+.flm-detailslist-resize {
+  width: 4px;
+  align-self: stretch;
+  cursor: col-resize;
+  margin-left: auto;
+  opacity: 0;
+  background-color: var(--themePrimary);
+  transition: opacity var(--duration1) var(--easeStandard);
+}
+
+.flm-detailslist-header-cell:hover .flm-detailslist-resize {
+  opacity: 1;
+}
+
+/* Dialog */
+
+.flm-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: var(--overlayBackground);
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--duration2) var(--easeStandard);
+}
+
+.flm-dialog-overlay--open {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.flm-dialog {
+  background-color: var(--bodyBackground);
+  border-radius: var(--roundedCorner4);
+  box-shadow: var(--elevation64);
+  min-width: 288px;
+  max-width: 560px;
+  width: 100%;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  transform: scale(0.95);
+  transition: transform var(--duration2) var(--easeDecelerate);
+}
+
+.flm-dialog-overlay--open .flm-dialog {
+  transform: scale(1);
+}
+
+.flm-dialog-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacingM) var(--spacingL1);
+  flex-shrink: 0;
+}
+
+.flm-dialog-title {
+  font-size: var(--fontSizeXLarge);
+  font-weight: var(--fontWeightSemibold);
+  line-height: var(--lineHeightXLarge);
+  color: var(--bodyText);
+  margin: 0;
+}
+
+.flm-dialog-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: var(--roundedCorner2);
+  background: transparent;
+  color: var(--bodySubtext);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.flm-dialog-close:hover {
+  background-color: var(--buttonBackgroundHovered);
+  color: var(--bodyText);
+}
+
+.flm-dialog-body {
+  padding: 0 var(--spacingL1);
+  overflow-y: auto;
+  flex: 1;
+  font-size: var(--fontSizeMedium);
+  line-height: var(--lineHeightMedium);
+  color: var(--bodySubtext);
+}
+
+.flm-dialog-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacingS1);
+  padding: var(--spacingM) var(--spacingL1);
+  flex-shrink: 0;
+}
+
+/* Large header variant */
+.flm-dialog--large-header .flm-dialog-title {
+  font-size: var(--fontSizeXXLarge);
+  line-height: var(--lineHeightXXLarge);
+}
+
+/* DocumentCard — File preview card */
+
+.flm-documentcard {
+  display: flex;
+  flex-direction: column;
+  width: 212px;
+  background-color: var(--bodyBackground);
+  border: 1px solid var(--variantBorder);
+  border-radius: var(--roundedCorner2);
+  box-shadow: var(--elevation4);
+  overflow: hidden;
+  cursor: pointer;
+  font-family: var(--fontFamily);
+  transition: box-shadow var(--duration2) var(--easeStandard);
+}
+
+.flm-documentcard:hover {
+  box-shadow: var(--elevation8);
+  border-color: var(--variantBorderHovered);
+}
+
+/* Preview image area */
+.flm-documentcard-preview {
+  position: relative;
+  height: 130px;
+  overflow: hidden;
+  background-color: var(--neutralLighter);
+}
+
+.flm-documentcard-preview img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* File type icon in preview */
+.flm-documentcard-preview-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--themePrimary);
+  font-size: 32px;
+}
+
+/* Card details */
+.flm-documentcard-details {
+  padding: var(--spacingS1);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.flm-documentcard-title {
+  font-size: var(--fontSizeMedium);
+  font-weight: var(--fontWeightSemibold);
+  line-height: var(--lineHeightMedium);
+  color: var(--bodyText);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Activity row (persona + timestamp) */
+.flm-documentcard-activity {
+  display: flex;
+  align-items: center;
+  gap: var(--spacingS2);
+  padding: 0 var(--spacingS1) var(--spacingS1);
+}
+
+.flm-documentcard-activity-name {
+  font-size: var(--fontSizeSmall);
+  line-height: var(--lineHeightSmall);
+  color: var(--bodyText);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.flm-documentcard-activity-date {
+  font-size: var(--fontSizeSmall);
+  line-height: var(--lineHeightSmall);
+  color: var(--bodySubtext);
+}
+
+/* Actions row */
+.flm-documentcard-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacingS2);
+  padding: var(--spacingS2) var(--spacingS1);
+  border-top: 1px solid var(--variantBorder);
+}
+
+/* Compact variant — horizontal layout */
+.flm-documentcard--compact {
+  flex-direction: row;
+  width: auto;
+  max-width: 480px;
+  height: 90px;
+}
+
+.flm-documentcard--compact .flm-documentcard-preview {
+  width: 90px;
+  height: 100%;
+  flex-shrink: 0;
+}
+
+.flm-documentcard--compact .flm-documentcard-details {
+  flex: 1;
+  min-width: 0;
+  justify-content: center;
+}
+
+.flm-documentcard--compact .flm-documentcard-activity {
+  padding: 0 var(--spacingS1);
+}
+
+/* Dropdown — custom dropdown (non-native) */
+
+.flm-dropdown {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  position: relative;
+  font-family: var(--fontFamily);
+}
+
+/* Trigger button — styled to match ComboBox wrapper */
+.flm-dropdown-trigger {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 32px;
+  border: 1px solid var(--inputBorder);
+  border-radius: var(--roundedCorner2);
+  background-color: var(--inputBackground);
+  box-sizing: border-box;
+  cursor: pointer;
+  padding: 0;
+  overflow: hidden;
+  text-align: left;
+  font-family: var(--fontFamily);
+}
+
+.flm-dropdown-trigger:hover {
+  border-color: var(--inputBorderHovered);
+}
+
+.flm-dropdown-trigger:focus {
+  border-color: var(--inputFocusBorderAlt);
+  border-bottom-width: 2px;
+  outline: none;
+}
+
+.flm-dropdown-title {
+  flex: 1;
+  padding: 0 8px;
+  font-size: var(--fontSizeMedium);
+  line-height: var(--lineHeightMedium);
+  color: var(--inputText);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.flm-dropdown-title--placeholder {
+  color: var(--inputPlaceholderText);
+}
+
+.flm-dropdown-caret {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 100%;
+  color: var(--bodySubtext);
+  flex-shrink: 0;
+  pointer-events: none;
+}
+
+/* Options listbox */
+.flm-dropdown-listbox {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 100%;
+  margin-top: 2px;
+  z-index: 1000;
+  background-color: var(--bodyBackground);
+  border: 1px solid var(--variantBorder);
+  border-radius: var(--roundedCorner2);
+  box-shadow: var(--elevation8);
+  max-height: 220px;
+  overflow-y: auto;
+  display: none;
+}
+
+.flm-dropdown-listbox--open {
+  display: block;
+}
+
+.flm-dropdown-listbox--above {
+  top: auto;
+  bottom: 100%;
+  margin-top: 0;
+  margin-bottom: 2px;
+}
+
+.flm-dropdown-option {
+  display: flex;
+  align-items: center;
+  padding: 6px var(--spacingS1);
+  min-height: 32px;
+  cursor: pointer;
+  font-size: var(--fontSizeMedium);
+  line-height: var(--lineHeightMedium);
+  color: var(--bodyText);
+  box-sizing: border-box;
+}
+
+.flm-dropdown-option:hover,
+.flm-dropdown-option--highlighted {
+  background-color: var(--listItemBackgroundHovered);
+}
+
+.flm-dropdown-option--selected {
+  background-color: var(--listItemBackgroundChecked);
+  font-weight: var(--fontWeightSemibold);
+}
+
+.flm-dropdown-option--disabled {
+  color: var(--disabledText);
+  cursor: default;
+  pointer-events: none;
+}
+
+/* Hidden input for form value */
+.flm-dropdown-value {
+  display: none;
+}
+
+/* Disabled */
+.flm-dropdown--disabled .flm-dropdown-trigger {
+  border-color: var(--disabledBorder);
+  background-color: var(--disabledBackground);
+  cursor: default;
+}
+
+.flm-dropdown--disabled .flm-dropdown-title {
+  color: var(--disabledText);
+}
+
+.flm-dropdown--disabled .flm-dropdown-caret {
+  color: var(--disabledText);
+}
+
+/* Error */
+.flm-dropdown--error .flm-dropdown-trigger {
+  border-color: var(--errorText);
+}
+
+.flm-dropdown-error {
+  display: block;
+  font-size: var(--fontSizeSmall);
+  line-height: var(--lineHeightSmall);
+  color: var(--errorText);
+  padding-top: 5px;
+}
+
+/* Facepile — Overlapping persona coin row */
+
+.flm-facepile {
+  display: inline-flex;
+  align-items: center;
+  font-family: var(--fontFamily);
+}
+
+/* Coins overlap via negative margin */
+.flm-facepile-member {
+  margin-left: -8px;
+  border: 2px solid var(--bodyBackground);
+  border-radius: 50%;
+  box-sizing: content-box;
+}
+
+.flm-facepile-member:first-child {
+  margin-left: 0;
+}
+
+/* Reuse persona coin sizing */
+.flm-facepile .flm-persona-coin {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background-color: var(--themePrimary);
+  color: var(--white);
+  font-size: 12px;
+  font-weight: var(--fontWeightSemibold);
+  flex-shrink: 0;
+  user-select: none;
+}
+
+.flm-facepile .flm-persona-coin img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+/* Overflow chip (+N) */
+.flm-facepile-overflow {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background-color: var(--defaultStateBackground);
+  color: var(--bodyText);
+  font-size: var(--fontSizeSmall);
+  font-weight: var(--fontWeightSemibold);
+  margin-left: -8px;
+  border: 2px solid var(--bodyBackground);
+  box-sizing: content-box;
+  flex-shrink: 0;
+  user-select: none;
+}
+
+/* Add button */
+.flm-facepile-add {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: 1px dashed var(--neutralTertiary);
+  background: transparent;
+  color: var(--themePrimary);
+  font-size: 16px;
+  cursor: pointer;
+  margin-left: var(--spacingS2);
+  flex-shrink: 0;
+}
+
+.flm-facepile-add:hover {
+  border-color: var(--themePrimary);
+  background-color: var(--themeLighterAlt);
+}
+
+/* GroupedList — Collapsible grouped items */
+
+.flm-groupedlist {
+  font-family: var(--fontFamily);
+  font-size: var(--fontSizeMedium);
+  width: 100%;
+}
+
+.flm-groupedlist-group {
+  margin-bottom: var(--spacingS2);
+}
+
+.flm-groupedlist-header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacingS2);
+  padding: var(--spacingS2) var(--spacingS1);
+  font-size: var(--fontSizeMedium);
+  font-weight: var(--fontWeightSemibold);
+  color: var(--bodyText);
+  cursor: pointer;
+  user-select: none;
+  border: none;
+  background: transparent;
+  width: 100%;
+  text-align: left;
+}
+
+.flm-groupedlist-header:hover {
+  background-color: var(--listItemBackgroundHovered);
+}
+
+/* Chevron */
+.flm-groupedlist-chevron {
+  display: inline-flex;
+  width: 16px;
+  height: 16px;
+  transition: transform var(--duration1) var(--easeStandard);
+  flex-shrink: 0;
+}
+
+.flm-groupedlist-chevron--expanded {
+  transform: rotate(90deg);
+}
+
+/* Items container */
+.flm-groupedlist-items {
+  overflow: hidden;
+}
+
+.flm-groupedlist-items--collapsed {
+  display: none;
+}
+
+/* Individual items */
+.flm-groupedlist-item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacingS1);
+  padding: 6px var(--spacingS1) 6px var(--spacingL2);
+  min-height: 36px;
+  color: var(--bodyText);
+  cursor: pointer;
+  user-select: none;
+  box-sizing: border-box;
+}
+
+.flm-groupedlist-item:hover {
+  background-color: var(--listItemBackgroundHovered);
+}
+
+.flm-groupedlist-item--selected {
+  background-color: var(--listItemBackgroundChecked);
+}
+
+.flm-groupedlist-item--disabled {
+  color: var(--disabledText);
+  cursor: default;
+  pointer-events: none;
+}
+
+/* Group count badge */
+.flm-groupedlist-count {
+  font-size: var(--fontSizeSmall);
+  color: var(--bodySubtext);
+  font-weight: var(--fontWeightRegular);
+  margin-left: var(--spacingS2);
+}
+
+/* HoverCard — Two-phase hover detail card */
+
+.flm-hovercard {
+  position: absolute;
+  z-index: 1000;
+  background-color: var(--bodyBackground);
+  border: 1px solid var(--variantBorder);
+  border-radius: var(--roundedCorner2);
+  box-shadow: var(--elevation16);
+  min-width: 260px;
+  max-width: 364px;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(4px);
+  transition: opacity var(--duration1) var(--easeStandard),
+              transform var(--duration1) var(--easeDecelerate);
+  font-family: var(--fontFamily);
+}
+
+.flm-hovercard--visible {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+
+/* Compact section (shows first on hover) */
+.flm-hovercard-compact {
+  padding: var(--spacingM);
+}
+
+/* Expanded section (shows after delay) */
+.flm-hovercard-expanded {
+  display: none;
+  padding: 0 var(--spacingM) var(--spacingM);
+  border-top: 1px solid var(--variantBorder);
+}
+
+.flm-hovercard-expanded--visible {
+  display: block;
+}
+
+/* Content sections */
+.flm-hovercard-title {
+  font-size: var(--fontSizeMediumPlus);
+  font-weight: var(--fontWeightSemibold);
+  line-height: var(--lineHeightMediumPlus);
+  color: var(--bodyText);
+  margin-bottom: var(--spacingS2);
+}
+
+.flm-hovercard-subtitle {
+  font-size: var(--fontSizeSmall);
+  line-height: var(--lineHeightSmall);
+  color: var(--bodySubtext);
+}
+
+.flm-hovercard-body {
+  font-size: var(--fontSizeMedium);
+  line-height: var(--lineHeightMedium);
+  color: var(--bodyText);
+  padding-top: var(--spacingS1);
+}
+
+/* Icon */
+
+.flm-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+  line-height: 1;
+  color: inherit;
+  vertical-align: middle;
+  flex-shrink: 0;
+}
+
+.flm-icon > svg {
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+}
+
+.flm-icon--small {
+  width: 12px;
+  height: 12px;
+  font-size: 12px;
+}
+
+.flm-icon--large {
+  width: 20px;
+  height: 20px;
+  font-size: 20px;
+}
+
+/* Image */
+
+.flm-image {
+  display: block;
+  max-width: 100%;
+  border: 0;
+}
+
+/* Fit variants */
+.flm-image--cover {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+
+.flm-image--contain {
+  object-fit: contain;
+  width: 100%;
+  height: 100%;
+}
+
+.flm-image--center {
+  object-fit: none;
+  object-position: center;
+}
+
+.flm-image--none {
+  object-fit: none;
+}
+
+/* Border */
+.flm-image--border {
+  border: 1px solid var(--variantBorder);
+  border-radius: var(--roundedCorner2);
+}
+
+/* Round (for avatars / thumbnails) */
+.flm-image--round {
+  border-radius: 50%;
+}
+
+/* Maximize frame — stretch to fill parent */
+.flm-image--maximize {
+  width: 100%;
+  height: 100%;
+}
+
+/* Label */
+
+.flm-label {
+  display: inline-block;
+  font-family: var(--fontFamily);
+  font-size: var(--fontSizeMedium);
+  line-height: var(--lineHeightMedium);
+  font-weight: var(--fontWeightSemibold);
+  color: var(--bodyText);
+  padding: 5px 0;
+}
+
+.flm-label--required::after {
+  content: ' *';
+  color: var(--errorText);
+  padding-left: 2px;
+}
+
+.flm-label--disabled {
+  color: var(--disabledText);
+}
+
+/* Link */
+
+.flm-link {
+  font-family: var(--fontFamily);
+  font-size: var(--fontSizeMedium);
+  color: var(--link);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.flm-link:hover {
+  color: var(--linkHovered);
+  text-decoration: underline;
+}
+
+.flm-link:active {
+  color: var(--linkHovered);
+}
+
+.flm-link--disabled,
+.flm-link--disabled:hover {
+  color: var(--disabledText);
+  text-decoration: none;
+  cursor: default;
+  pointer-events: none;
+}
+
+/* List — Simple scrollable list */
+
+.flm-list {
+  display: flex;
+  flex-direction: column;
+  font-family: var(--fontFamily);
+  font-size: var(--fontSizeMedium);
+  line-height: var(--lineHeightMedium);
+  color: var(--bodyText);
+}
+
+/* Bordered variant */
+.flm-list--bordered {
+  border: 1px solid var(--variantBorder);
+  border-radius: var(--roundedCorner2);
+}
+
+/* Scrollable variant */
+.flm-list--scrollable {
+  overflow-y: auto;
+  max-height: 300px;
+}
+
+/* Compact variant */
+.flm-list--compact .flm-list-item {
+  min-height: 28px;
+  padding: 2px var(--spacingS1);
+  font-size: var(--fontSizeSmall);
+}
+
+/* List items */
+.flm-list-item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacingS1);
+  min-height: 36px;
+  padding: 4px var(--spacingS1);
+  cursor: pointer;
+  user-select: none;
+  box-sizing: border-box;
+  border-bottom: 1px solid transparent;
+}
+
+.flm-list--bordered .flm-list-item {
+  border-bottom-color: var(--variantBorder);
+}
+
+.flm-list--bordered .flm-list-item:last-child {
+  border-bottom-color: transparent;
+}
+
+/* Hover */
+.flm-list-item:hover {
+  background-color: var(--listItemBackgroundHovered);
+}
+
+/* Selected */
+.flm-list-item--selected {
+  background-color: var(--listItemBackgroundChecked);
+}
+
+.flm-list-item--selected:hover {
+  background-color: var(--listItemBackgroundCheckedHovered);
+}
+
+/* Disabled */
+.flm-list-item--disabled {
+  color: var(--disabledText);
+  cursor: default;
+  pointer-events: none;
+}
+
+/* Icon slot */
+.flm-list-item-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  color: var(--bodySubtext);
+}
+
+/* Text content */
+.flm-list-item-content {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex: 1;
+}
+
+.flm-list-item-primary {
+  font-size: var(--fontSizeMedium);
+  line-height: var(--lineHeightMedium);
+  color: var(--bodyText);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.flm-list-item-secondary {
+  font-size: var(--fontSizeSmall);
+  line-height: var(--lineHeightSmall);
+  color: var(--bodySubtext);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* MessageBar */
+
+.flm-messagebar {
+  display: flex;
+  align-items: center;
+  gap: var(--spacingS1);
+  padding: var(--spacingS1) var(--spacingM);
+  font-family: var(--fontFamily);
+  font-size: var(--fontSizeMedium);
+  line-height: var(--lineHeightMedium);
+  color: var(--messageText);
+  border-radius: var(--roundedCorner2);
+  min-height: 32px;
+  box-sizing: border-box;
+}
+
+/* Icon slot */
+.flm-messagebar-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+}
+
+.flm-messagebar-icon > svg {
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+}
+
+/* Text fills remaining space */
+.flm-messagebar-text {
+  flex: 1;
+}
+
+/* Actions area */
+.flm-messagebar-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacingS2);
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+/* Dismiss button */
+.flm-messagebar-dismiss {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  border-radius: var(--roundedCorner2);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.flm-messagebar-dismiss:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+/* Type variants */
+.flm-messagebar--info {
+  background-color: var(--infoBackground);
+}
+
+.flm-messagebar--info .flm-messagebar-icon {
+  color: var(--infoIcon);
+}
+
+.flm-messagebar--success {
+  background-color: var(--successBackground);
+}
+
+.flm-messagebar--success .flm-messagebar-icon {
+  color: var(--successIcon);
+}
+
+.flm-messagebar--warning {
+  background-color: var(--warningBackground);
+}
+
+.flm-messagebar--warning .flm-messagebar-icon {
+  color: var(--warningIcon);
+}
+
+.flm-messagebar--severeWarning {
+  background-color: var(--severeWarningBackground);
+}
+
+.flm-messagebar--severeWarning .flm-messagebar-icon {
+  color: var(--severeWarningIcon);
+}
+
+.flm-messagebar--error {
+  background-color: var(--errorBackground);
+}
+
+.flm-messagebar--error .flm-messagebar-icon {
+  color: var(--errorIcon);
+}
+
+.flm-messagebar--blocked {
+  background-color: var(--blockingBackground);
+}
+
+.flm-messagebar--blocked .flm-messagebar-icon {
+  color: var(--blockingIcon);
+}
+
+/* Modal — generic modal container (uses overlay) */
+
+.flm-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: var(--overlayBackground);
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--duration2) var(--easeStandard);
+}
+
+.flm-modal-overlay--open {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.flm-modal {
+  background-color: var(--bodyBackground);
+  border-radius: var(--roundedCorner4);
+  box-shadow: var(--elevation64);
+  max-height: 90vh;
+  overflow-y: auto;
+  transform: translateY(16px);
+  transition: transform var(--duration2) var(--easeDecelerate);
+}
+
+.flm-modal-overlay--open .flm-modal {
+  transform: translateY(0);
+}
+
+/* Nav — hierarchical navigation */
+
+.flm-nav {
+  font-family: var(--fontFamily);
+  font-size: var(--fontSizeMedium);
+  width: 100%;
+}
+
+.flm-nav-group {
+  margin-bottom: var(--spacingS2);
+}
+
+.flm-nav-group-header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacingS2);
+  padding: var(--spacingS2) var(--spacingS1);
+  font-size: var(--fontSizeSmall);
+  font-weight: var(--fontWeightSemibold);
+  color: var(--bodySubtext);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  cursor: pointer;
+  user-select: none;
+  border: none;
+  background: transparent;
+  width: 100%;
+  text-align: left;
+}
+
+.flm-nav-group-header:hover {
+  color: var(--bodyText);
+}
+
+.flm-nav-link {
+  display: flex;
+  align-items: center;
+  gap: var(--spacingS1);
+  padding: 6px var(--spacingS1) 6px var(--spacingM);
+  color: var(--bodyText);
+  text-decoration: none;
+  border-radius: var(--roundedCorner2);
+  cursor: pointer;
+  border-left: 3px solid transparent;
+  font-size: var(--fontSizeMedium);
+  line-height: var(--lineHeightMedium);
+}
+
+.flm-nav-link:hover {
+  background-color: var(--listItemBackgroundHovered);
+  text-decoration: none;
+}
+
+.flm-nav-link--active {
+  border-left-color: var(--themePrimary);
+  background-color: var(--listItemBackgroundChecked);
+  font-weight: var(--fontWeightSemibold);
+  color: var(--themePrimary);
+}
+
+.flm-nav-link--disabled {
+  color: var(--disabledText);
+  cursor: default;
+  pointer-events: none;
+}
+
+/* Nested links (indented) */
+.flm-nav-link--nested {
+  padding-left: var(--spacingL2);
+}
+
+/* Chevron for expandable groups */
+.flm-nav-chevron {
+  display: inline-flex;
+  width: 16px;
+  height: 16px;
+  transition: transform var(--duration1) var(--easeStandard);
+  flex-shrink: 0;
+}
+
+.flm-nav-chevron--expanded {
+  transform: rotate(90deg);
+}
+
+/* Collapsible group content */
+.flm-nav-group-items {
+  overflow: hidden;
+}
+
+.flm-nav-group-items--collapsed {
+  display: none;
+}
+
+/* OverflowSet — responsive container that hides items into overflow menu */
+
+.flm-overflowset {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  position: relative;
+  font-family: var(--fontFamily);
+}
+
+.flm-overflowset-items {
+  display: flex;
+  align-items: center;
+  gap: var(--spacingS2);
+  overflow: hidden;
+  flex: 1;
+  min-width: 0;
+}
+
+.flm-overflowset-item {
+  flex-shrink: 0;
+}
+
+.flm-overflowset-item--hidden {
+  display: none;
+}
+
+/* Overflow "..." button */
+.flm-overflowset-overflow {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: transparent;
+  color: var(--bodySubtext);
+  cursor: pointer;
+  padding: 0;
+  border-radius: var(--roundedCorner2);
+  flex-shrink: 0;
+  font-size: var(--fontSizeMedium);
+}
+
+.flm-overflowset-overflow:hover {
+  background-color: var(--listItemBackgroundHovered);
+  color: var(--bodyText);
+}
+
+.flm-overflowset--has-overflow .flm-overflowset-overflow {
+  display: flex;
+}
+
+/* Far-side items — never overflow */
+.flm-overflowset-far {
+  display: flex;
+  align-items: center;
+  gap: var(--spacingS2);
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+/* Overlay — semi-transparent backdrop for modals/panels/dialogs */
+
+.flm-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: var(--overlayBackground);
+  z-index: 1000;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--duration2) var(--easeStandard);
+}
+
+.flm-overlay--visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* Panel — slide-out surface from the right */
+
+.flm-panel-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: var(--overlayBackground);
+  z-index: 1000;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--duration3) var(--easeStandard);
+}
+
+.flm-panel-overlay--open {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.flm-panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 340px;
+  max-width: 100vw;
+  background-color: var(--bodyBackground);
+  box-shadow: var(--elevation64);
+  z-index: 1001;
+  display: flex;
+  flex-direction: column;
+  transform: translateX(100%);
+  transition: transform var(--duration3) var(--easeDecelerate);
+}
+
+.flm-panel--open {
+  transform: translateX(0);
+}
+
+/* Size variants */
+.flm-panel--small       { width: 272px; }
+.flm-panel--medium      { width: 592px; }
+.flm-panel--large       { width: 940px; }
+.flm-panel--extraLarge  { width: 100%; max-width: 1200px; }
+.flm-panel--fluid       { width: 100%; }
+
+/* Left side variant */
+.flm-panel--left {
+  right: auto;
+  left: 0;
+  transform: translateX(-100%);
+}
+
+.flm-panel--left.flm-panel--open {
+  transform: translateX(0);
+}
+
+.flm-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacingM) var(--spacingL1);
+  flex-shrink: 0;
+}
+
+.flm-panel-title {
+  font-size: var(--fontSizeXLarge);
+  font-weight: var(--fontWeightSemibold);
+  line-height: var(--lineHeightXLarge);
+  color: var(--bodyText);
+  margin: 0;
+}
+
+.flm-panel-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: var(--roundedCorner2);
+  background: transparent;
+  color: var(--bodySubtext);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.flm-panel-close:hover {
+  background-color: var(--buttonBackgroundHovered);
+  color: var(--bodyText);
+}
+
+.flm-panel-body {
+  padding: 0 var(--spacingL1);
+  overflow-y: auto;
+  flex: 1;
+}
+
+.flm-panel-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacingS1);
+  padding: var(--spacingM) var(--spacingL1);
+  border-top: 1px solid var(--bodyDivider);
+  flex-shrink: 0;
+}
+
+/* Persona — avatar + text */
+
+.flm-persona {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacingS1);
+  font-family: var(--fontFamily);
+}
+
+/* Coin / avatar */
+.flm-persona-coin {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background-color: var(--themePrimary);
+  color: var(--white);
+  font-weight: var(--fontWeightSemibold);
+  flex-shrink: 0;
+  user-select: none;
+}
+
+.flm-persona-coin img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+/* Sizes */
+.flm-persona--size8 .flm-persona-coin   { width: 8px;  height: 8px;  font-size: 0; }
+.flm-persona--size24 .flm-persona-coin,
+.flm-persona-coin                       { width: 24px; height: 24px; font-size: 10px; }
+.flm-persona--size32 .flm-persona-coin   { width: 32px; height: 32px; font-size: 12px; }
+.flm-persona--size40 .flm-persona-coin   { width: 40px; height: 40px; font-size: 14px; }
+.flm-persona--size48 .flm-persona-coin   { width: 48px; height: 48px; font-size: 16px; }
+.flm-persona--size56 .flm-persona-coin   { width: 56px; height: 56px; font-size: 18px; }
+.flm-persona--size72 .flm-persona-coin   { width: 72px; height: 72px; font-size: 22px; }
+.flm-persona--size100 .flm-persona-coin  { width: 100px; height: 100px; font-size: 28px; }
+.flm-persona--size120 .flm-persona-coin  { width: 120px; height: 120px; font-size: 32px; }
+
+/* Presence indicator */
+.flm-persona-presence {
+  position: relative;
+}
+
+.flm-persona-presence::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  border: 2px solid var(--bodyBackground);
+  box-sizing: content-box;
+}
+
+.flm-persona-presence--available::after  { background-color: var(--green); }
+.flm-persona-presence--away::after       { background-color: var(--yellow); }
+.flm-persona-presence--busy::after       { background-color: var(--red); }
+.flm-persona-presence--dnd::after        { background-color: var(--red); }
+.flm-persona-presence--offline::after    { background-color: var(--neutralTertiary); }
+.flm-persona-presence--blocked::after    { background-color: var(--red); }
+
+/* Text details */
+.flm-persona-details {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.flm-persona-name {
+  font-size: var(--fontSizeMedium);
+  font-weight: var(--fontWeightSemibold);
+  line-height: var(--lineHeightMedium);
+  color: var(--bodyText);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.flm-persona-secondary {
+  font-size: var(--fontSizeSmall);
+  line-height: var(--lineHeightSmall);
+  color: var(--bodySubtext);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.flm-persona-tertiary {
+  font-size: var(--fontSizeSmall);
+  line-height: var(--lineHeightSmall);
+  color: var(--bodySubtext);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Pivot — tab navigation */
+
+.flm-pivot {
+  display: flex;
+  flex-direction: column;
+  font-family: var(--fontFamily);
+}
+
+.flm-pivot-tabs {
+  display: flex;
+  border-bottom: 1px solid var(--bodyDivider);
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;          /* Firefox */
+  -ms-overflow-style: none;       /* IE/Edge */
+  flex-shrink: 0;
+}
+
+.flm-pivot-tabs::-webkit-scrollbar { display: none; }
+
+.flm-pivot-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacingS2);
+  padding: var(--spacingS1) var(--spacingS1);
+  border: none;
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  color: var(--bodyText);
+  font-family: var(--fontFamily);
+  font-size: var(--fontSizeMedium);
+  font-weight: var(--fontWeightRegular);
+  line-height: var(--lineHeightMedium);
+  cursor: pointer;
+  white-space: nowrap;
+  margin-bottom: -1px;
+  transition: color var(--duration1) var(--easeStandard),
+              border-color var(--duration1) var(--easeStandard);
+}
+
+.flm-pivot-tab:hover {
+  color: var(--bodyText);
+  background-color: var(--buttonBackgroundHovered);
+}
+
+.flm-pivot-tab--active {
+  color: var(--themePrimary);
+  font-weight: var(--fontWeightSemibold);
+  border-bottom-color: var(--themePrimary);
+}
+
+.flm-pivot-tab--disabled {
+  color: var(--disabledText);
+  cursor: default;
+  pointer-events: none;
+}
+
+/* Pivot content panels */
+.flm-pivot-panel {
+  display: none;
+  padding: var(--spacingM) 0;
+}
+
+.flm-pivot-panel--active {
+  display: block;
+}
+
+/* Link-style variant (underline) */
+.flm-pivot--links .flm-pivot-tab {
+  padding: var(--spacingS1) var(--spacingM);
+}
+
+/* Tab-style variant (filled tabs) */
+.flm-pivot--tabs .flm-pivot-tab {
+  border-bottom: none;
+  border-radius: var(--roundedCorner2) var(--roundedCorner2) 0 0;
+}
+
+.flm-pivot--tabs .flm-pivot-tab--active {
+  background-color: var(--bodyBackground);
+  border: 1px solid var(--bodyDivider);
+  border-bottom-color: var(--bodyBackground);
+}
+
+/* ProgressIndicator */
+
+.flm-progress {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacingS2);
+  font-family: var(--fontFamily);
+  width: 100%;
+}
+
+.flm-progress-label {
+  font-size: var(--fontSizeMedium);
+  font-weight: var(--fontWeightSemibold);
+  color: var(--bodyText);
+}
+
+.flm-progress-description {
+  font-size: var(--fontSizeSmall);
+  color: var(--bodySubtext);
+}
+
+.flm-progress-track {
+  width: 100%;
+  height: 2px;
+  background-color: var(--disabledBackground);
+  border-radius: 1px;
+  overflow: hidden;
+}
+
+.flm-progress-bar {
+  height: 100%;
+  background-color: var(--themePrimary);
+  border-radius: 1px;
+  transition: width var(--duration3) var(--easeStandard);
+}
+
+/* Indeterminate animation */
+.flm-progress--indeterminate .flm-progress-bar {
+  width: 33%;
+  animation: flm-progress-indeterminate 2s var(--easeStandard) infinite;
+}
+
+@keyframes flm-progress-indeterminate {
+  0%   { transform: translateX(-100%); }
+  100% { transform: translateX(400%); }
+}
+
+/* Rating — Star rating control */
+
+.flm-rating {
+  display: inline-flex;
+  flex-direction: row-reverse;
+  align-items: center;
+  gap: 2px;
+  font-family: var(--fontFamily);
+}
+
+/* Hide native radio */
+.flm-rating-input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+}
+
+/* Star label */
+.flm-rating-star {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  color: var(--neutralTertiary);
+  transition: color var(--duration1) var(--easeStandard);
+}
+
+/* Star shape via clip-path */
+.flm-rating-star::before {
+  content: '';
+  display: block;
+  width: 18px;
+  height: 18px;
+  background-color: currentColor;
+  clip-path: polygon(
+    50% 0%,
+    63% 35%,
+    100% 35%,
+    69% 57%,
+    79% 91%,
+    50% 70%,
+    21% 91%,
+    31% 57%,
+    0% 35%,
+    37% 35%
+  );
+}
+
+/* Hover: current star and all lower via sibling combinator */
+.flm-rating-star:hover,
+.flm-rating-star:hover ~ .flm-rating-star {
+  color: var(--themePrimary);
+}
+
+/* Checked: fill current and all lower stars (row-reverse makes ~ go to lower values) */
+.flm-rating-input:checked + .flm-rating-star,
+.flm-rating-input:checked + .flm-rating-star ~ .flm-rating-star {
+  color: var(--themePrimary);
+}
+
+/* Focus */
+.flm-rating-input:focus-visible + .flm-rating-star {
+  outline: var(--focusOutlineWidth) solid var(--focusBorder);
+  outline-offset: var(--focusOutlineOffset);
+  border-radius: var(--roundedCorner2);
+}
+
+/* Readonly variant */
+.flm-rating--readonly .flm-rating-star {
+  cursor: default;
+  pointer-events: none;
+}
+
+.flm-rating--readonly .flm-rating-star--empty {
+  color: var(--neutralTertiary);
+}
+
+.flm-rating--readonly .flm-rating-star--filled {
+  color: var(--themePrimary);
+}
+
+/* Disabled */
+.flm-rating--disabled .flm-rating-star {
+  cursor: default;
+  pointer-events: none;
+  color: var(--disabledText);
+}
+
+.flm-rating--disabled .flm-rating-input:checked + .flm-rating-star,
+.flm-rating--disabled .flm-rating-input:checked + .flm-rating-star ~ .flm-rating-star {
+  color: var(--disabledText);
+}
+
+/* Large variant */
+.flm-rating--large .flm-rating-star {
+  width: 32px;
+  height: 32px;
+}
+
+.flm-rating--large .flm-rating-star::before {
+  width: 24px;
+  height: 24px;
+}
+
+/* SearchBox */
+
+.flm-searchbox {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  border: 1px solid var(--inputBorder);
+  border-radius: var(--roundedCorner2);
+  background-color: var(--inputBackground);
+  padding: 0 var(--spacingS1);
+  gap: var(--spacingS2);
+  box-sizing: border-box;
+}
+
+.flm-searchbox:hover {
+  border-color: var(--inputBorderHovered);
+}
+
+.flm-searchbox:focus-within {
+  border-color: var(--inputFocusBorderAlt);
+  border-bottom-width: 2px;
+}
+
+.flm-searchbox-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--inputIcon);
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+}
+
+.flm-searchbox-icon > svg {
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+}
+
+.flm-searchbox-input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  color: var(--inputText);
+  font-family: var(--fontFamily);
+  font-size: var(--fontSizeMedium);
+  outline: none;
+  min-width: 0;
+  padding: 0;
+}
+
+.flm-searchbox-input::placeholder {
+  color: var(--inputPlaceholderText);
+}
+
+.flm-searchbox-clear {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: none;
+  border-radius: var(--roundedCorner2);
+  background: transparent;
+  color: var(--bodySubtext);
+  cursor: pointer;
+  padding: 0;
+  flex-shrink: 0;
+}
+
+.flm-searchbox-clear:hover {
+  background-color: var(--buttonBackgroundHovered);
+  color: var(--bodyText);
+}
+
+/* Show clear button when input has value */
+.flm-searchbox--has-value .flm-searchbox-clear {
+  display: inline-flex;
+}
+
+/* Underlined variant */
+.flm-searchbox--underlined {
+  border: none;
+  border-bottom: 1px solid var(--inputBorder);
+  border-radius: 0;
+}
+
+.flm-searchbox--underlined:focus-within {
+  border-bottom: 2px solid var(--inputFocusBorderAlt);
+}
+
+/* Disabled */
+.flm-searchbox--disabled {
+  background-color: var(--disabledBackground);
+  border-color: var(--disabledBorder);
+  cursor: default;
+}
+
+.flm-searchbox--disabled .flm-searchbox-input {
+  color: var(--disabledText);
+}
+
+/* Separator */
+
+.flm-separator {
+  border: none;
+  border-top: 1px solid var(--bodyDivider);
+  margin: 0;
+  padding: 0;
+}
+
+.flm-separator--vertical {
+  border-top: none;
+  border-left: 1px solid var(--bodyDivider);
+  align-self: stretch;
+  width: 0;
+  min-height: 1em;
+}
+
+/* Shimmer — Loading skeleton placeholder */
+
+@keyframes flm-shimmer-wave {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+.flm-shimmer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacingS1);
+  font-family: var(--fontFamily);
+}
+
+/* Row variant for horizontal composition */
+.flm-shimmer--row {
+  flex-direction: row;
+  align-items: center;
+}
+
+/* Shared shimmer element base */
+.flm-shimmer-line,
+.flm-shimmer-circle,
+.flm-shimmer-rect {
+  background: linear-gradient(
+    90deg,
+    var(--neutralLighter) 25%,
+    var(--neutralLight) 50%,
+    var(--neutralLighter) 75%
+  );
+  background-size: 200% 100%;
+  animation: flm-shimmer-wave 2s ease-in-out infinite;
+  border-radius: var(--roundedCorner2);
+}
+
+/* Line — text placeholder (16px bar) */
+.flm-shimmer-line {
+  height: 16px;
+  width: 100%;
+}
+
+.flm-shimmer-line--short {
+  width: 40%;
+}
+
+.flm-shimmer-line--medium {
+  width: 70%;
+}
+
+/* Circle — avatar placeholder (40px) */
+.flm-shimmer-circle {
+  width: 40px;
+  height: 40px;
+  min-width: 40px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.flm-shimmer-circle--small {
+  width: 24px;
+  height: 24px;
+  min-width: 24px;
+}
+
+.flm-shimmer-circle--large {
+  width: 56px;
+  height: 56px;
+  min-width: 56px;
+}
+
+/* Rect — block placeholder (120px) */
+.flm-shimmer-rect {
+  width: 120px;
+  height: 120px;
+  min-width: 120px;
+  flex-shrink: 0;
+}
+
+.flm-shimmer-rect--wide {
+  width: 200px;
+}
+
+.flm-shimmer-rect--tall {
+  height: 200px;
+}
+
+/* Slider — Range input with custom styling */
+
+.flm-slider {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacingS2);
+  width: 100%;
+  font-family: var(--fontFamily);
+}
+
+.flm-slider-container {
+  display: flex;
+  align-items: center;
+  gap: var(--spacingS1);
+}
+
+.flm-slider-input {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 4px;
+  border-radius: 2px;
+  outline: none;
+  cursor: pointer;
+  background: linear-gradient(
+    to right,
+    var(--themePrimary) 0%,
+    var(--themePrimary) var(--flm-slider-fill, 50%),
+    var(--neutralLight) var(--flm-slider-fill, 50%),
+    var(--neutralLight) 100%
+  );
+}
+
+/* Webkit thumb */
+.flm-slider-input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: var(--themePrimary);
+  border: 2px solid var(--bodyBackground);
+  box-shadow: 0 0 0 1px var(--themePrimary);
+  cursor: pointer;
+  transition: transform var(--duration1) var(--easeStandard);
+}
+
+.flm-slider-input::-webkit-slider-thumb:hover {
+  transform: scale(1.2);
+}
+
+.flm-slider-input::-webkit-slider-thumb:active {
+  transform: scale(1.3);
+}
+
+/* Firefox thumb */
+.flm-slider-input::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: var(--themePrimary);
+  border: 2px solid var(--bodyBackground);
+  box-shadow: 0 0 0 1px var(--themePrimary);
+  cursor: pointer;
+}
+
+/* Firefox track */
+.flm-slider-input::-moz-range-track {
+  height: 4px;
+  border-radius: 2px;
+  background: var(--neutralLight);
+}
+
+.flm-slider-input::-moz-range-progress {
+  height: 4px;
+  border-radius: 2px;
+  background: var(--themePrimary);
+}
+
+/* Focus */
+.flm-slider-input:focus-visible::-webkit-slider-thumb {
+  outline: var(--focusOutlineWidth) solid var(--focusBorder);
+  outline-offset: var(--focusOutlineOffset);
+}
+
+.flm-slider-input:focus-visible::-moz-range-thumb {
+  outline: var(--focusOutlineWidth) solid var(--focusBorder);
+  outline-offset: var(--focusOutlineOffset);
+}
+
+/* Value display */
+.flm-slider-value {
+  font-size: var(--fontSizeSmall);
+  line-height: var(--lineHeightSmall);
+  color: var(--bodyText);
+  min-width: 32px;
+  text-align: right;
+  flex-shrink: 0;
+}
+
+/* Label */
+.flm-slider-label {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+/* Disabled */
+.flm-slider--disabled .flm-slider-input {
+  cursor: default;
+  background: var(--neutralLight);
+}
+
+.flm-slider--disabled .flm-slider-input::-webkit-slider-thumb {
+  background-color: var(--disabledText);
+  box-shadow: none;
+  cursor: default;
+  transform: none;
+}
+
+.flm-slider--disabled .flm-slider-input::-moz-range-thumb {
+  background-color: var(--disabledText);
+  box-shadow: none;
+  cursor: default;
+}
+
+.flm-slider--disabled .flm-slider-value {
+  color: var(--disabledText);
+}
+
+/* Vertical variant */
+.flm-slider--vertical {
+  width: auto;
+  height: 200px;
+}
+
+.flm-slider--vertical .flm-slider-container {
+  flex-direction: column;
+  height: 100%;
+}
+
+.flm-slider--vertical .flm-slider-input {
+  writing-mode: vertical-lr;
+  direction: rtl;
+  width: 4px;
+  height: 100%;
+}
+
+/* SpinButton — Numeric input with increment/decrement */
+
+.flm-spinbutton {
+  display: inline-flex;
+  align-items: stretch;
+  height: 32px;
+  border: 1px solid var(--inputBorder);
+  border-radius: var(--roundedCorner2);
+  background-color: var(--inputBackground);
+  font-family: var(--fontFamily);
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.flm-spinbutton:hover {
+  border-color: var(--inputBorderHovered);
+}
+
+.flm-spinbutton:focus-within {
+  border-color: var(--inputFocusBorderAlt);
+  border-bottom-width: 2px;
+}
+
+/* Label above the spinbutton */
+.flm-spinbutton-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+/* Hide native spinners */
+.flm-spinbutton-input {
+  border: none;
+  background: transparent;
+  color: var(--inputText);
+  font-family: var(--fontFamily);
+  font-size: var(--fontSizeMedium);
+  line-height: var(--lineHeightMedium);
+  padding: 0 8px;
+  width: 80px;
+  height: 100%;
+  outline: none;
+  box-sizing: border-box;
+  text-align: center;
+  -moz-appearance: textfield;
+}
+
+.flm-spinbutton-input::-webkit-outer-spin-button,
+.flm-spinbutton-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Buttons */
+.flm-spinbutton-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  border: none;
+  background: transparent;
+  color: var(--bodySubtext);
+  cursor: pointer;
+  padding: 0;
+  flex-shrink: 0;
+}
+
+.flm-spinbutton-btn:hover {
+  background-color: var(--listItemBackgroundHovered);
+  color: var(--bodyText);
+}
+
+.flm-spinbutton-btn:active {
+  background-color: var(--listItemBackgroundChecked);
+}
+
+.flm-spinbutton-btn--decrement {
+  border-right: 1px solid var(--variantBorder);
+}
+
+.flm-spinbutton-btn--increment {
+  border-left: 1px solid var(--variantBorder);
+}
+
+/* Disabled */
+.flm-spinbutton--disabled {
+  border-color: var(--disabledBorder);
+  background-color: var(--disabledBackground);
+}
+
+.flm-spinbutton--disabled .flm-spinbutton-input {
+  color: var(--disabledText);
+}
+
+.flm-spinbutton--disabled .flm-spinbutton-btn {
+  color: var(--disabledText);
+  cursor: default;
+  pointer-events: none;
+}
+
+/* Spinner */
+
+.flm-spinner {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacingS1);
+}
+
+.flm-spinner-circle {
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--themeLighter);
+  border-top-color: var(--themePrimary);
+  border-radius: 50%;
+  animation: flm-spin 0.6s linear infinite;
+  box-sizing: border-box;
+}
+
+/* Sizes */
+.flm-spinner--xSmall .flm-spinner-circle { width: 12px; height: 12px; border-width: 1.5px; }
+.flm-spinner--small  .flm-spinner-circle { width: 16px; height: 16px; border-width: 1.5px; }
+.flm-spinner--large  .flm-spinner-circle { width: 28px; height: 28px; border-width: 3px; }
+
+.flm-spinner-label {
+  font-family: var(--fontFamily);
+  font-size: var(--fontSizeSmall);
+  line-height: var(--lineHeightSmall);
+  color: var(--bodyText);
+}
+
+@keyframes flm-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Stack — Flexbox layout container */
+
+.flm-stack {
+  display: flex;
+  flex-direction: column;
+}
+
+.flm-stack--horizontal {
+  flex-direction: row;
+}
+
+.flm-stack--center {
+  justify-content: center;
+  align-items: center;
+}
+
+.flm-stack--end {
+  justify-content: flex-end;
+  align-items: flex-end;
+}
+
+.flm-stack--space-between {
+  justify-content: space-between;
+}
+
+.flm-stack--wrap {
+  flex-wrap: wrap;
+}
+
+/* Horizontal + center should only center cross-axis by default */
+.flm-stack--horizontal.flm-stack--center {
+  align-items: center;
+}
+
+/* Stack Items */
+.flm-stack-item--grow {
+  flex-grow: 1;
+}
+
+.flm-stack-item--shrink {
+  flex-shrink: 1;
+}
+
+.flm-stack-item--align-end {
+  align-self: flex-end;
+}
+
+.flm-stack-item--align-center {
+  align-self: center;
+}
+
+/* SwatchColorPicker — Color swatch grid */
+
+.flm-swatchcolorpicker {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  font-family: var(--fontFamily);
+}
+
+.flm-swatchcolorpicker-cell {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: none;
+  border-radius: var(--roundedCorner2);
+  cursor: pointer;
+  padding: 0;
+  box-sizing: border-box;
+  transition: box-shadow var(--duration1) var(--easeStandard),
+              transform var(--duration1) var(--easeStandard);
+}
+
+.flm-swatchcolorpicker-cell:hover {
+  transform: scale(1.15);
+}
+
+.flm-swatchcolorpicker-cell:focus-visible {
+  outline: var(--focusOutlineWidth) solid var(--focusBorder);
+  outline-offset: var(--focusOutlineOffset);
+}
+
+/* Selected swatch ring */
+.flm-swatchcolorpicker-cell--selected {
+  box-shadow: 0 0 0 2px var(--bodyBackground), 0 0 0 4px var(--bodyText);
+}
+
+/* Disabled */
+.flm-swatchcolorpicker-cell:disabled,
+.flm-swatchcolorpicker-cell--disabled {
+  opacity: 0.4;
+  cursor: default;
+  transform: none;
+}
+
+/* Circle variant */
+.flm-swatchcolorpicker--circle .flm-swatchcolorpicker-cell {
+  border-radius: 50%;
+}
+
+/* Large size variant */
+.flm-swatchcolorpicker--large .flm-swatchcolorpicker-cell {
+  width: 32px;
+  height: 32px;
+}
+
+/* TagPicker / PeoplePicker — multi-select input with chip/tag UI */
+
+.flm-tagpicker {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  position: relative;
+  font-family: var(--fontFamily);
+}
+
+/* Well — flex-wrap input area holding chips + input */
+.flm-tagpicker-well {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  min-height: 32px;
+  padding: 2px 4px;
+  border: 1px solid var(--inputBorder);
+  border-radius: var(--roundedCorner2);
+  background-color: var(--inputBackground);
+  box-sizing: border-box;
+  cursor: text;
+}
+
+.flm-tagpicker-well:hover {
+  border-color: var(--inputBorderHovered);
+}
+
+.flm-tagpicker-well:focus-within {
+  border-color: var(--inputFocusBorderAlt);
+  border-bottom-width: 2px;
+}
+
+/* Chip / Tag pill */
+.flm-tagpicker-chip {
+  display: inline-flex;
+  align-items: center;
+  height: 24px;
+  padding: 0 4px 0 8px;
+  background-color: var(--neutralLight);
+  border-radius: var(--roundedCorner4);
+  font-size: var(--fontSizeSmall);
+  line-height: var(--lineHeightSmall);
+  color: var(--bodyText);
+  max-width: 200px;
+  box-sizing: border-box;
+}
+
+.flm-tagpicker-chip-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.flm-tagpicker-chip-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin-left: 4px;
+  border: none;
+  background: transparent;
+  color: var(--bodySubtext);
+  cursor: pointer;
+  padding: 0;
+  border-radius: var(--roundedCorner2);
+  flex-shrink: 0;
+}
+
+.flm-tagpicker-chip-remove:hover {
+  background-color: var(--neutralQuaternary);
+  color: var(--bodyText);
+}
+
+.flm-tagpicker-chip-remove svg {
+  width: 8px;
+  height: 8px;
+  fill: currentColor;
+}
+
+/* Input inside the well */
+.flm-tagpicker-input {
+  flex: 1;
+  min-width: 80px;
+  border: none;
+  background: transparent;
+  color: var(--inputText);
+  font-family: var(--fontFamily);
+  font-size: var(--fontSizeMedium);
+  line-height: var(--lineHeightMedium);
+  padding: 2px 4px;
+  outline: none;
+}
+
+.flm-tagpicker-input::placeholder {
+  color: var(--inputPlaceholderText);
+}
+
+/* Listbox (option dropdown) */
+.flm-tagpicker-listbox {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 100%;
+  margin-top: 2px;
+  z-index: 1000;
+  background-color: var(--bodyBackground);
+  border: 1px solid var(--variantBorder);
+  border-radius: var(--roundedCorner2);
+  box-shadow: var(--elevation8);
+  max-height: 220px;
+  overflow-y: auto;
+  display: none;
+}
+
+.flm-tagpicker-listbox--open {
+  display: block;
+}
+
+.flm-tagpicker-listbox--above {
+  top: auto;
+  bottom: 100%;
+  margin-top: 0;
+  margin-bottom: 2px;
+}
+
+/* Option */
+.flm-tagpicker-option {
+  display: flex;
+  align-items: center;
+  padding: 6px var(--spacingS1);
+  min-height: 32px;
+  cursor: pointer;
+  font-size: var(--fontSizeMedium);
+  line-height: var(--lineHeightMedium);
+  color: var(--bodyText);
+  box-sizing: border-box;
+}
+
+.flm-tagpicker-option:hover,
+.flm-tagpicker-option--highlighted {
+  background-color: var(--listItemBackgroundHovered);
+}
+
+.flm-tagpicker-option--selected {
+  color: var(--disabledText);
+  cursor: default;
+}
+
+.flm-tagpicker-option--hidden {
+  display: none;
+}
+
+/* PeoplePicker variant — option with persona coin */
+.flm-tagpicker--people .flm-tagpicker-option {
+  gap: var(--spacingS2);
+}
+
+.flm-tagpicker-option-coin {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: var(--themePrimary);
+  color: var(--white);
+  font-size: 10px;
+  font-weight: var(--fontWeightSemibold);
+  flex-shrink: 0;
+}
+
+.flm-tagpicker-option-details {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.flm-tagpicker-option-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.flm-tagpicker-option-secondary {
+  font-size: var(--fontSizeSmall);
+  line-height: var(--lineHeightSmall);
+  color: var(--bodySubtext);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* PeoplePicker chip with small coin */
+.flm-tagpicker-chip-coin {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background-color: var(--themePrimary);
+  color: var(--white);
+  font-size: 8px;
+  font-weight: var(--fontWeightSemibold);
+  flex-shrink: 0;
+  margin-right: 4px;
+}
+
+/* Disabled state */
+.flm-tagpicker--disabled .flm-tagpicker-well {
+  border-color: var(--disabledBorder);
+  background-color: var(--disabledBackground);
+  cursor: default;
+}
+
+.flm-tagpicker--disabled .flm-tagpicker-input {
+  color: var(--disabledText);
+}
+
+.flm-tagpicker--disabled .flm-tagpicker-chip {
+  background-color: var(--neutralLighter);
+  color: var(--disabledText);
+}
+
+.flm-tagpicker--disabled .flm-tagpicker-chip-remove {
+  display: none;
+}
+
+/* Error state */
+.flm-tagpicker--error .flm-tagpicker-well {
+  border-color: var(--errorText);
+}
+
+.flm-tagpicker-error {
+  display: block;
+  font-size: var(--fontSizeSmall);
+  line-height: var(--lineHeightSmall);
+  color: var(--errorText);
+  padding-top: 5px;
+}
+
+/* TeachingBubble — Guided callout with inverted colors */
+
+.flm-teachingbubble {
+  position: absolute;
+  z-index: 1000;
+  background-color: var(--themePrimary);
+  color: var(--white);
+  border-radius: var(--roundedCorner2);
+  box-shadow: var(--elevation16);
+  max-width: 364px;
+  min-width: 240px;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(4px);
+  transition: opacity var(--duration1) var(--easeStandard),
+              transform var(--duration1) var(--easeDecelerate);
+  font-family: var(--fontFamily);
+}
+
+.flm-teachingbubble--visible {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+
+/* Header */
+.flm-teachingbubble-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: var(--spacingM) var(--spacingM) 0;
+}
+
+.flm-teachingbubble-headline {
+  font-size: var(--fontSizeMediumPlus);
+  font-weight: var(--fontWeightSemibold);
+  line-height: var(--lineHeightMediumPlus);
+  color: var(--white);
+  margin: 0;
+}
+
+/* Close button */
+.flm-teachingbubble-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: transparent;
+  color: var(--white);
+  cursor: pointer;
+  padding: 0;
+  border-radius: var(--roundedCorner2);
+  opacity: 0.8;
+  flex-shrink: 0;
+}
+
+.flm-teachingbubble-close:hover {
+  opacity: 1;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+/* Body text */
+.flm-teachingbubble-body {
+  padding: var(--spacingS1) var(--spacingM);
+  font-size: var(--fontSizeMedium);
+  line-height: var(--lineHeightMedium);
+  color: rgba(255, 255, 255, 0.9);
+}
+
+/* Footer with action buttons */
+.flm-teachingbubble-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacingS1);
+  padding: var(--spacingS1) var(--spacingM) var(--spacingM);
+}
+
+/* Button overrides inside teaching bubble */
+.flm-teachingbubble .flm-button {
+  border-color: var(--white);
+  color: var(--white);
+  background-color: transparent;
+}
+
+.flm-teachingbubble .flm-button:hover {
+  background-color: rgba(255, 255, 255, 0.15);
+}
+
+.flm-teachingbubble .flm-button--primary {
+  background-color: var(--white);
+  color: var(--themePrimary);
+  border-color: var(--white);
+}
+
+.flm-teachingbubble .flm-button--primary:hover {
+  background-color: rgba(255, 255, 255, 0.85);
+}
+
+/* Beak */
+.flm-teachingbubble-beak {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  background-color: var(--themePrimary);
+  transform: rotate(45deg);
+  top: -8px;
+  left: 24px; /* default; overridden by JS to point at target */
+}
+
+.flm-teachingbubble--above .flm-teachingbubble-beak {
+  top: auto;
+  bottom: -8px;
+}
+
+/* Text — Typography component */
+
+.flm-text {
+  font-family: var(--fontFamily);
+  font-size: var(--fontSizeMedium);
+  line-height: var(--lineHeightMedium);
+  font-weight: var(--fontWeightRegular);
+  color: var(--bodyText);
+}
+
+/* Size variants */
+.flm-text--tiny       { font-size: var(--fontSizeTiny);       line-height: var(--lineHeightTiny); }
+.flm-text--xSmall     { font-size: var(--fontSizeXSmall);     line-height: var(--lineHeightXSmall); }
+.flm-text--small      { font-size: var(--fontSizeSmall);      line-height: var(--lineHeightSmall); }
+.flm-text--smallPlus  { font-size: var(--fontSizeSmallPlus);  line-height: var(--lineHeightSmallPlus); }
+.flm-text--medium     { font-size: var(--fontSizeMedium);     line-height: var(--lineHeightMedium); }
+.flm-text--mediumPlus { font-size: var(--fontSizeMediumPlus); line-height: var(--lineHeightMediumPlus); }
+.flm-text--large      { font-size: var(--fontSizeLarge);      line-height: var(--lineHeightLarge); }
+
+.flm-text--xLarge {
+  font-size: var(--fontSizeXLarge);
+  line-height: var(--lineHeightXLarge);
+  font-weight: var(--fontWeightSemibold);
+}
+
+.flm-text--xxLarge {
+  font-size: var(--fontSizeXXLarge);
+  line-height: var(--lineHeightXXLarge);
+  font-weight: var(--fontWeightSemibold);
+}
+
+.flm-text--superLarge {
+  font-size: var(--fontSizeSuperLarge);
+  line-height: var(--lineHeightSuperLarge);
+  font-weight: var(--fontWeightSemibold);
+}
+
+.flm-text--mega {
+  font-size: var(--fontSizeMega);
+  line-height: var(--lineHeightMega);
+  font-weight: var(--fontWeightSemibold);
+}
+
+/* Color variants */
+.flm-text--secondary { color: var(--bodySubtext); }
+.flm-text--disabled  { color: var(--disabledText); }
+.flm-text--error     { color: var(--errorText); }
+.flm-text--success   { color: var(--successText); }
+
+/* Weight variants */
+.flm-text--semibold { font-weight: var(--fontWeightSemibold); }
+.flm-text--bold     { font-weight: var(--fontWeightBold); }
+
+/* Display variants */
+.flm-text--block { display: block; }
+
+.flm-text--nowrap {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* TextField */
+
+.flm-textfield {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.flm-textfield-input {
+  display: block;
+  width: 100%;
+  height: 32px;
+  padding: 0 8px;
+  border: 1px solid var(--inputBorder);
+  border-radius: var(--roundedCorner2);
+  background-color: var(--inputBackground);
+  color: var(--inputText);
+  font-family: var(--fontFamily);
+  font-size: var(--fontSizeMedium);
+  line-height: var(--lineHeightMedium);
+  outline: none;
+  box-sizing: border-box;
+}
+
+/* Textarea */
+textarea.flm-textfield-input {
+  height: auto;
+  padding: 6px 8px;
+  resize: none;
+}
+
+.flm-textfield-input::placeholder {
+  color: var(--inputPlaceholderText);
+}
+
+.flm-textfield-input:hover {
+  border-color: var(--inputBorderHovered);
+}
+
+.flm-textfield-input:focus {
+  border-color: var(--inputFocusBorderAlt);
+}
+
+/* Underlined variant */
+.flm-textfield--underlined .flm-textfield-input {
+  border: none;
+  border-bottom: 1px solid var(--inputBorder);
+  border-radius: 0;
+  padding-left: 0;
+}
+
+.flm-textfield--underlined .flm-textfield-input:focus {
+  border-bottom: 2px solid var(--inputFocusBorderAlt);
+}
+
+/* Borderless variant */
+.flm-textfield--borderless .flm-textfield-input {
+  border: none;
+}
+
+.flm-textfield--borderless .flm-textfield-input:focus {
+  border: none;
+  border-bottom: 2px solid var(--inputFocusBorderAlt);
+}
+
+/* Error state */
+.flm-textfield--error .flm-textfield-input {
+  border-color: var(--errorText);
+}
+
+.flm-textfield--error .flm-textfield-input:hover,
+.flm-textfield--error .flm-textfield-input:focus {
+  border-color: var(--errorText);
+}
+
+.flm-textfield-error {
+  display: block;
+  font-size: var(--fontSizeSmall);
+  line-height: var(--lineHeightSmall);
+  color: var(--errorText);
+  padding-top: 5px;
+}
+
+/* Disabled state */
+.flm-textfield--disabled .flm-textfield-input,
+.flm-textfield-input:disabled {
+  background-color: var(--disabledBackground);
+  border-color: var(--disabledBorder);
+  color: var(--disabledText);
+  cursor: default;
+}
+
+/* Prefix / Suffix wrapper */
+.flm-textfield-wrapper {
+  display: flex;
+  align-items: stretch;
+  border: 1px solid var(--inputBorder);
+  border-radius: var(--roundedCorner2);
+  background-color: var(--inputBackground);
+  overflow: hidden;
+}
+
+.flm-textfield-wrapper:hover {
+  border-color: var(--inputBorderHovered);
+}
+
+.flm-textfield-wrapper:focus-within {
+  border-color: var(--inputFocusBorderAlt);
+  border-bottom-width: 2px;
+}
+
+.flm-textfield-wrapper > .flm-textfield-input {
+  border: none;
+  border-radius: 0;
+  flex: 1;
+  min-width: 0;
+}
+
+.flm-textfield-wrapper > .flm-textfield-input:focus {
+  border: none;
+  padding-bottom: 0;
+}
+
+.flm-textfield-prefix,
+.flm-textfield-suffix {
+  display: flex;
+  align-items: center;
+  padding: 0 8px;
+  background-color: var(--bodyStandoutBackground);
+  color: var(--bodySubtext);
+  font-size: var(--fontSizeMedium);
+  white-space: nowrap;
+  user-select: none;
+}
+
+/* TimePicker — Time input with scrollable dropdown of time slots */
+
+.flm-timepicker {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  position: relative;
+  font-family: var(--fontFamily);
+}
+
+.flm-timepicker-wrapper {
+  display: flex;
+  align-items: stretch;
+  height: 32px;
+  border: 1px solid var(--inputBorder);
+  border-radius: var(--roundedCorner2);
+  background-color: var(--inputBackground);
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.flm-timepicker-wrapper:hover {
+  border-color: var(--inputBorderHovered);
+}
+
+.flm-timepicker-wrapper:focus-within {
+  border-color: var(--inputFocusBorderAlt);
+  border-bottom-width: 2px;
+}
+
+.flm-timepicker-input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  color: var(--inputText);
+  font-family: var(--fontFamily);
+  font-size: var(--fontSizeMedium);
+  line-height: var(--lineHeightMedium);
+  padding: 0 8px;
+  outline: none;
+  min-width: 0;
+}
+
+.flm-timepicker-input::placeholder {
+  color: var(--inputPlaceholderText);
+}
+
+/* Clock icon button */
+.flm-timepicker-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  border: none;
+  background: transparent;
+  color: var(--bodySubtext);
+  cursor: pointer;
+  padding: 0;
+  flex-shrink: 0;
+}
+
+.flm-timepicker-icon:hover {
+  background-color: var(--listItemBackgroundHovered);
+  color: var(--bodyText);
+}
+
+/* Dropdown listbox */
+.flm-timepicker-listbox {
+  position: absolute;
+  left: 0;
+  top: 100%;
+  margin-top: 2px;
+  z-index: 1000;
+  background-color: var(--bodyBackground);
+  border: 1px solid var(--variantBorder);
+  border-radius: var(--roundedCorner2);
+  box-shadow: var(--elevation8);
+  display: none;
+  width: 100%;
+  max-height: 220px;
+  overflow-y: auto;
+  box-sizing: border-box;
+}
+
+.flm-timepicker-listbox--open {
+  display: block;
+}
+
+.flm-timepicker-listbox--above {
+  top: auto;
+  bottom: 100%;
+  margin-top: 0;
+  margin-bottom: 2px;
+}
+
+/* Option rows */
+.flm-timepicker-option {
+  display: flex;
+  align-items: center;
+  min-height: 32px;
+  padding: 0 8px;
+  font-size: var(--fontSizeMedium);
+  line-height: var(--lineHeightMedium);
+  color: var(--bodyText);
+  cursor: pointer;
+  user-select: none;
+}
+
+.flm-timepicker-option:hover {
+  background-color: var(--listItemBackgroundHovered);
+}
+
+.flm-timepicker-option--highlighted {
+  background-color: var(--listItemBackgroundHovered);
+}
+
+.flm-timepicker-option--selected {
+  background-color: var(--listItemBackgroundChecked);
+  font-weight: var(--fontWeightSemibold);
+}
+
+.flm-timepicker-option--hidden {
+  display: none;
+}
+
+/* Disabled state */
+.flm-timepicker--disabled .flm-timepicker-wrapper {
+  border-color: var(--disabledBorder);
+  background-color: var(--disabledBackground);
+}
+
+.flm-timepicker--disabled .flm-timepicker-input {
+  color: var(--disabledText);
+}
+
+.flm-timepicker--disabled .flm-timepicker-icon {
+  color: var(--disabledText);
+  cursor: default;
+  pointer-events: none;
+}
+
+/* Error state */
+.flm-timepicker--error .flm-timepicker-wrapper {
+  border-color: var(--errorText);
+}
+
+.flm-timepicker-error {
+  display: block;
+  font-size: var(--fontSizeSmall);
+  line-height: var(--lineHeightSmall);
+  color: var(--errorText);
+  padding-top: 5px;
+}
+
+/* Toggle */
+
+.flm-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacingS1);
+  cursor: pointer;
+  user-select: none;
+  font-family: var(--fontFamily);
+  font-size: var(--fontSizeMedium);
+  line-height: var(--lineHeightMedium);
+  color: var(--bodyText);
+  position: relative;
+}
+
+/* Hide native checkbox */
+.flm-toggle-input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.flm-toggle-label {
+  font-weight: var(--fontWeightSemibold);
+}
+
+/* Track (pill shape) */
+.flm-toggle-track {
+  display: inline-flex;
+  align-items: center;
+  width: 40px;
+  height: 20px;
+  padding: 0 3px;
+  border: 1px solid var(--smallInputBorder);
+  border-radius: 10px;
+  background-color: var(--inputBackground);
+  transition: background-color var(--duration2) var(--easeStandard),
+              border-color var(--duration2) var(--easeStandard);
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+
+/* Thumb (circle) */
+.flm-toggle-thumb {
+  display: block;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background-color: var(--smallInputBorder);
+  transition: transform var(--duration2) var(--easeStandard),
+              background-color var(--duration2) var(--easeStandard);
+}
+
+/* Hover */
+.flm-toggle:hover .flm-toggle-track {
+  border-color: var(--inputBorderHovered);
+}
+
+.flm-toggle:hover .flm-toggle-thumb {
+  background-color: var(--inputBorderHovered);
+}
+
+/* Checked */
+.flm-toggle-input:checked ~ .flm-toggle-track {
+  background-color: var(--inputBackgroundChecked);
+  border-color: var(--inputBackgroundChecked);
+}
+
+.flm-toggle-input:checked ~ .flm-toggle-track .flm-toggle-thumb {
+  background-color: var(--inputForegroundChecked);
+  transform: translateX(20px);
+}
+
+/* Checked + hover */
+.flm-toggle:hover .flm-toggle-input:checked ~ .flm-toggle-track {
+  background-color: var(--inputBackgroundCheckedHovered);
+  border-color: var(--inputBackgroundCheckedHovered);
+}
+
+/* Focus */
+.flm-toggle-input:focus-visible ~ .flm-toggle-track {
+  outline: var(--focusOutlineWidth) solid var(--focusBorder);
+  outline-offset: var(--focusOutlineOffset);
+}
+
+/* State text */
+.flm-toggle-state {
+  font-size: var(--fontSizeMedium);
+  color: var(--bodySubtext);
+}
+
+/* Show data-off by default, data-on when checked */
+.flm-toggle-state::after {
+  content: attr(data-off);
+}
+
+.flm-toggle-input:checked ~ .flm-toggle-state::after {
+  content: attr(data-on);
+}
+
+/* Disabled */
+.flm-toggle--disabled,
+.flm-toggle:has(.flm-toggle-input:disabled) {
+  cursor: default;
+  color: var(--disabledText);
+}
+
+.flm-toggle-input:disabled ~ .flm-toggle-track {
+  background-color: var(--disabledBackground);
+  border-color: var(--disabledBorder);
+}
+
+.flm-toggle-input:disabled ~ .flm-toggle-track .flm-toggle-thumb {
+  background-color: var(--disabledText);
+}
+
+.flm-toggle-input:disabled:checked ~ .flm-toggle-track {
+  background-color: var(--disabledBackground);
+  border-color: var(--disabledBorder);
+}
+
+/* Inline variant */
+.flm-toggle--inline {
+  flex-direction: row;
+}
+
+/* Tooltip */
+
+.flm-tooltip {
+  position: absolute;
+  z-index: 1100;
+  background-color: var(--bodyBackground);
+  border: 1px solid var(--variantBorder);
+  border-radius: var(--roundedCorner4);
+  box-shadow: var(--elevation8);
+  padding: 6px var(--spacingS1);
+  font-family: var(--fontFamily);
+  font-size: var(--fontSizeSmall);
+  line-height: var(--lineHeightSmall);
+  color: var(--bodyText);
+  max-width: 276px;
+  white-space: normal;
+  word-wrap: break-word;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--duration1) var(--easeStandard);
+}
+
+.flm-tooltip--visible {
+  opacity: 1;
+}
+
+/* Tooltip host — wrapper around the trigger element */
+.flm-tooltip-host {
+  display: inline-block;
+  position: relative;
+}