/* Fluent UI bridge. Fluent UI Blazor is the component system now, and these are the variables its web components actually read. Every one of them points at a FarmOS token, so a Fluent control inherits this palette instead of shipping Microsoft's. That is the whole difference between adopting a component library and being reskinned by one. Loaded after tokens.css and before farmos.css. It defines no colour of its own: every value is a var(), so dark mode, the explicit data-theme override and prefers-contrast: more all flow through without being restated. The "a hex literal outside tokens.css is a bug" rule in design-system.md section 3 therefore still holds. Two mappings carry the design system's one rule (section 2) through the library: colorBrand* -> --fo-settled. Fluent calls its primary action "brand". Here the primary action is the commit button and the commit button is green, so brand resolves to settled rather than to Microsoft blue. A FluentButton Appearance="Primary" still means "this is done". colorStrokeFocus* -> --fo-focus. Blue stays quarantined for the focus ring and appears nowhere else, so a focus ring can never be mistaken for a state and a state can never be mistaken for focus. */ :root { /* ---- Text ---- */ --colorNeutralForeground1: var(--fo-ink); --colorNeutralForeground2: var(--fo-body); --colorNeutralForeground3: var(--fo-secondary); --colorNeutralForeground4: var(--fo-muted); --colorNeutralForegroundDisabled: var(--fo-muted); --colorNeutralForegroundInverted: var(--fo-on-accent); --colorNeutralForegroundInverted2: var(--fo-on-accent); --colorNeutralForegroundOnBrand: var(--fo-on-accent); /* ---- Surfaces ---- */ --colorNeutralBackground1: var(--fo-surface-1); --colorNeutralBackground2: var(--fo-surface-2); --colorNeutralBackground3: var(--fo-surface-2); --colorNeutralBackground4: var(--fo-surface-2); --colorNeutralBackgroundDisabled: var(--fo-surface-2); --colorNeutralBackgroundInverted: var(--fo-ink); --colorSubtleBackground: transparent; --colorSubtleBackgroundHover: var(--fo-surface-2); --colorSubtleBackgroundPressed: var(--fo-surface-2); --colorSubtleBackgroundSelected: var(--fo-surface-2); --colorTransparentBackground: transparent; /* The scrim behind a dialog. Steel rather than neutral black, and opaque enough that the figures behind it stop being readable: a dialog that asks "archive this?" should not leave the number it is about legible underneath, half-dimmed. */ --colorBackgroundOverlay: rgb(14 18 20 / 55%); /* Lines. Fluent's "accessible" strokes are the ones that sit on controls, so they take the 3:1 control-border token (WCAG 1.4.11) rather than the decorative hairline. */ --colorNeutralStroke1: var(--fo-line-input); --colorNeutralStroke2: var(--fo-line); --colorNeutralStroke3: var(--fo-line); --colorNeutralStrokeAccessible: var(--fo-line-input); --colorNeutralStrokeAccessibleHover: var(--fo-body); --colorNeutralStrokeAccessiblePressed: var(--fo-body); --colorNeutralStrokeDisabled: var(--fo-line); --colorNeutralStrokeOnBrand: var(--fo-settled); --colorNeutralStrokeOnBrand2: var(--fo-on-accent); --colorTransparentStroke: transparent; /* ---- Brand == settled. The rule, not a theme preference. ---- */ --colorBrandBackground: var(--fo-settled); --colorBrandBackgroundHover: var(--fo-settled); --colorBrandBackgroundPressed: var(--fo-settled); --colorBrandBackgroundSelected: var(--fo-settled); --colorBrandBackgroundStatic: var(--fo-settled); --colorBrandBackground2: var(--fo-settled-bg); --colorBrandForeground1: var(--fo-settled); --colorBrandForeground2: var(--fo-settled); --colorBrandForegroundInverted: var(--fo-on-accent); --colorBrandStroke1: var(--fo-settled); --colorBrandStroke2: var(--fo-settled-bg); --colorCompoundBrandBackground: var(--fo-settled); --colorCompoundBrandBackgroundHover: var(--fo-settled); --colorCompoundBrandBackgroundPressed: var(--fo-settled); --colorCompoundBrandForeground1: var(--fo-settled); --colorCompoundBrandForeground1Hover: var(--fo-settled); --colorCompoundBrandForeground1Pressed: var(--fo-settled); --colorCompoundBrandStroke: var(--fo-settled); --colorCompoundBrandStrokeHover: var(--fo-settled); --colorCompoundBrandStrokePressed: var(--fo-settled); /* A link is navigation, not a settled state, so links are deliberately not brand-coloured. Focus blue is the one colour a reader already reads as "interactive, not a status". */ --colorBrandForegroundLink: var(--fo-focus); --colorBrandForegroundLinkHover: var(--fo-focus); --colorBrandForegroundLinkPressed: var(--fo-focus); /* ---- State. The closed vocabulary, unchanged. ---- */ --colorStatusSuccessForeground1: var(--fo-settled); --colorStatusSuccessBackground1: var(--fo-settled-bg); --colorStatusSuccessForegroundInverted: var(--fo-on-accent); --colorStatusWarningForeground1: var(--fo-pending); --colorStatusWarningBackground1: var(--fo-pending-bg); --colorStatusWarningForegroundInverted: var(--fo-on-accent); --colorStatusDangerForeground1: var(--fo-held); --colorStatusDangerBackground1: var(--fo-held-bg); --colorStatusDangerForegroundInverted: var(--fo-on-accent); --colorPaletteRedForeground1: var(--fo-held); --colorPaletteRedBackground1: var(--fo-held-bg); --colorPaletteGreenForeground1: var(--fo-settled); --colorPaletteGreenBackground1: var(--fo-settled-bg); --colorPaletteYellowForeground1: var(--fo-pending); --colorPaletteYellowBackground1: var(--fo-pending-bg); /* ---- Focus, and only focus. ---- */ --colorStrokeFocus1: var(--fo-canvas); --colorStrokeFocus2: var(--fo-focus); /* Type. Fluent's numeric family resolves to the IBM Plex stack, so a grid column of weights is tabular by construction rather than by remembering a CSS class. */ --fontFamilyBase: var(--fo-font-ui); --fontFamilyNumeric: var(--fo-font-num); --fontFamilyMonospace: var(--fo-font-num); --fontSizeBase100: var(--fo-text-2xs); --fontSizeBase200: var(--fo-text-xs); --fontSizeBase300: var(--fo-text-base); --fontSizeBase400: var(--fo-text-lg); --fontSizeBase500: var(--fo-text-xl); --fontSizeBase600: var(--fo-text-2xl); --fontWeightRegular: var(--fo-weight-normal); --fontWeightMedium: var(--fo-weight-medium); --fontWeightSemibold: var(--fo-weight-bold); --fontWeightBold: var(--fo-weight-heavy); --lineHeightBase300: var(--fo-leading-body); /* ---- Shape and space ---- */ --borderRadiusNone: 0; /* --fo-radius-small, not --fo-radius-chip. The chip radius is fully round, and Fluent puts its small radius on checkboxes — a fully round checkbox is indistinguishable from a radio button, which is a correctness problem rather than a styling one. */ --borderRadiusSmall: var(--fo-radius-small); --borderRadiusMedium: var(--fo-radius-control); --borderRadiusLarge: var(--fo-radius-card); --borderRadiusXLarge: var(--fo-radius-card); --strokeWidthThin: var(--fo-border); --strokeWidthThick: var(--fo-border-heavy); --spacingHorizontalXS: var(--fo-s1); --spacingHorizontalS: var(--fo-s2); --spacingHorizontalM: var(--fo-s3); --spacingHorizontalL: var(--fo-s4); --spacingHorizontalXL: var(--fo-s6); --spacingHorizontalXXL: var(--fo-s8); --spacingVerticalNone: 0; --spacingVerticalXS: var(--fo-s1); --spacingVerticalS: var(--fo-s2); --spacingVerticalM: var(--fo-s3); --spacingVerticalL: var(--fo-s4); --spacingVerticalXL: var(--fo-s6); --spacingVerticalXXL: var(--fo-s8); } /* There is deliberately no `body { height: auto; overflow: visible }` override here, and it is worth saying why, because one lived here for three features and never once took effect. Measured on a real handset over CDP, 2026-10-26: no screen would scroll, body computed to `overflow: hidden; height: 832px`, and the document was 3896px tall inside an 832px viewport - clipped, not scrolled. The source was Fluent 5's `default-fuib.css`, which nothing links: its JS initializer fetches that file after boot and pushes it into `document.adoptedStyleSheets`, where it applies after every linked sheet at equal specificity. A plain `body` selector in this file could not win on cascade order no matter where in the file it sat. That whole sheet is switched off at `` in both hosts, where the reasoning is recorded. With it gone, farmos.css's own `body` rule governs and nothing needs overriding here. If a body-level override ever looks necessary again, check that attribute first - its absence is the likeliest cause, and an !important here would only paper over it. */ /* A notes box is as wide as the space it sits in, not as wide as its first line. Two Fluent v5 defaults shrink-wrap it, and on the edit-record page they stacked: Notes came out 180px wide in a 341px card, so a three-line note wrapped to seven and the box read as a narrow column. First, every accordion item carries `max-width: fit-content` on its host, so the "Breed, lineage and notes" panel was only as wide as its widest control. Second, the fluent-field wrapping a textarea is `inline-grid`, so outside a grid it takes its content width again inside that. A textarea with AutoResize then grows downward instead of across. Set here, once, because every textarea in the product is wrapped the same way — the location list met the same thing and patched it in its own sheet. A light-DOM rule beats a :host rule, so no !important is needed. */ fluent-accordion-item { max-width: none; } fluent-field:has(> fluent-textarea) { display: grid; } fluent-textarea { width: 100%; } /* Fluent sizes its controls for a mouse. The barn and the tailgate do not have one, and the design system's floor is 48px for anything a cold thumb has to hit (section 3, --fo-target-min). Applied to the interactive web components by tag, because the height lives on the custom element rather than on a class we could pass through a Blazor parameter. Coarse pointers only: on a desktop with a mouse, Fluent's own density is correct and roomier rows would just mean less of a herd list on screen at once. Check a tag against Fluent's own stylesheet before adding it here. This list carried fluent-text-area and fluent-number-field, and v5 renders neither: a textarea is fluent-textarea, one word, and FluentNumberInput is a fluent-text-input with a numeric input mode. Both sat here matching nothing, so no textarea on any touch surface ever got the 48px floor and nothing failed to say so. */ @media (pointer: coarse) { fluent-button, fluent-text-input, fluent-textarea, fluent-dropdown, fluent-combobox, fluent-search { min-height: var(--fo-target-min); } /* The checkbox was missing from the list above, and /grazing is the one screen whose whole job is picking animals in a yard. Its markup carries the comment "a 48px target each, because this is the one list ticked with gloves on" and the page has no stylesheet at all, so nothing implemented it: the box measured 16x16 and its label 41x25, about a third of what a thumb needs. The target is the field, not the checkbox. In v5 the host IS the box - its border and fill are drawn on :host - so the 48px min-height this rule used to put on it stretched every checkbox on a phone into a 16x48 pill. Measured in the gallery at 375px on the move picker and the grazing list, 2026-10-27. The field around it holds the label, whose for= points at the checkbox, so a press anywhere on the row ticks it. */ fluent-field:has(> fluent-checkbox) { min-height: var(--fo-target-min); align-items: center; } } /* The commit target, and it is NOT behind a coarse-pointer query. Section 9 asks for 56px on a commit action — capture, pay, confirm — everywhere, because a commit is the one control where a misclick costs something that has to be undone rather than merely retried. That argument does not weaken on a desk. It was asserted in fourteen component stylesheets and met by none of them. Every one wrote a rule against a bare `button` element in a component that renders only FluentButton, so the selector could not match: the product has 123 FluentButtons and 5 plain buttons. Fourteen copies of a rule, none live, and nothing failed to say so — the same way fluent-text-area and fluent-number-field sat in the list above matching nothing. So it lives here once, keyed on the attribute Size="ButtonSize.Large" actually renders. */ fluent-button[size="large"] { min-height: var(--fo-target-commit); }