/* The design system's tokens, from the Kompan.UI.Design package. Relative because both packages serve
   under _content/, so this resolves to _content/Kompan.UI.Design/css/variables.css. Imported by the
   library rather than linked per app: the tokens ride in with the package and the version pin is the
   opt-in (ADR-0039). It must precede kompan-tokens.css, which forwards to the names declared here. */
@import url("../Kompan.UI.Design/css/variables.css");
@import url("kompan-tokens.css");
/* The design system's component styles (.kompan-button, .kompan-badge, …), generated into this
   package at build time from the same Kompan.UI.Design version. Third, so the tokens it reads are
   already declared, and ahead of this file's own rules and of the consuming app's stylesheet, which
   both stay free to override it. Generated rather than imported from _content/Kompan.UI.Design/ui.css
   because that file is layered and MudBlazor's unlayered reset beats it — ADR-0049. */
@import url("kompan-components.css");
/* Checkbox and radio: this library's stand-in for the checkbox.css the design system does not ship
   yet, written against the same tokens and in the same .kompan-* idiom. Fourth, so it reads like one
   more component sheet; it goes when upstream's arrives (ADR-0053) - once the states it draws that
   Figma does not (forced colours, read-only, invalid) are carried across, since their browser tests
   fail if they are simply dropped (ADR-0056). */
@import url("kompan-checkbox.css");
/* Button tones - Destructive, Success, Warning, Info - which button.css has no classes for. A stand-in
   like the one above, but also the one place this library supplies tokens of its own, each under the
   name upstream would give it and each yielding to upstream's the moment it exists (ADR-0054). */
@import url("kompan-button-tones.css");
/* The tooltip - Figma's Tooltip (1052:489) - which the design system has no sheet for either. A stand-in
   like the checkbox's, worn by KompanTooltip on MudTooltip's popover, whose classes it keys on - so it
   is not deletable as a unit (ADR-0053 as amended by ADR-0060). */
@import url("kompan-tooltip.css");
/* A light tooltip on a dark page (Appearance=Light): the light value of every token the design system's .dark
   re-declares, generated at build time from the same Kompan.UI.Design version, because the package has .dark and
   no counterpart for a light subtree (G26). Right after the tooltip's own sheet, whose tokens it re-declares
   (ADR-0070). */
@import url("kompan-tooltip-light.css");
/* The three components that wear that tooltip - Figma's Help icon (1054:13), Info icon (22641:132) and Status
   marker (22643:1394) - which the design system has no sheets for either. Stand-ins like the checkbox's, last,
   because they read nothing the others do not declare (ADR-0053 as amended by ADR-0062). */
@import url("kompan-help-icon.css");
@import url("kompan-status-marker.css");
/* Figma's Button utility (8003:526508), the icon-only button a table's controls and a card's kebab wear, which
   button.css has no classes for. A stand-in like the ones above, after them because it too shows that tooltip
   (ADR-0053). */
@import url("kompan-button-utility.css");
/* Figma's Button close X (2763:420129), the close a dialog, a panel, a notification and a kept-open tooltip wear, which
   button.css has no classes for either (G11). A stand-in like the Button utility's, beside it (ADR-0053). */
@import url("kompan-button-close-x.css");
/* Figma's Pagination (14203:6196), which the design system has no sheet for either. A stand-in like the
   checkbox's; its Previous and Next are KompanButtons, so it reads nothing button.css does not (ADR-0053). */
@import url("kompan-pagination.css");
/* Figma's Pagination dot group (14203:6081), the dots or lines under a carousel, a gallery or a wizard, which the design
   system has no sheet for either. A stand-in like the pagination's, beside it, reading only design-system tokens; on a
   dark page its frame takes the light values kompan-tooltip-light.css declares (ADR-0053, ADR-0085). */
@import url("kompan-pagination-dot-group.css");
/* The table - Figma's Table design (5:486), Table Cell (6:13770) and Table Header Cell (6:13753) in the Application
   library - which the design system has no sheet for either: a stand-in like the checkbox's, worn by KompanTable, its
   header and text cells and KompanDataGrid. After everything its cells compose. Its values are Figma's, read
   2026-10-05 and pinned by KompanTableFigmaParityTests (ADR-0053). */
@import url("kompan-table.css");
/* Figma's Card header (Application library, 6:12619), which the design system has no sheet for either. A stand-in like
   the checkbox's; its badge is badge.css's, its actions are KompanButtons and its kebab a KompanButtonUtility, so it
   lays out what the sheets above draw and reads nothing they do not declare (ADR-0053). */
@import url("kompan-card-header.css");
/* Figma's Empty state (Application library, 6:11797), which the design system has no sheet for either. A stand-in
   like the checkbox's, after the others, because it reads nothing they do not declare (ADR-0053). */
@import url("kompan-empty-state.css");
/* Figma's Business Agreement Tag (22570:1251) and the Visual's Product functions overlay (16634:224015), which the
   design system has no sheets for either: stand-ins like the checkbox's. The tag wears that tooltip; the overlay's sheet
   draws a type visual.css lacks under its .kompan-visual block, and corrects none of the ones it has (ADR-0053). */
@import url("kompan-business-agreement-tag.css");
@import url("kompan-visual-product-functions.css");
/* Figma's Date picker dropdown (14192:37676), which the design system has no sheet for either. A stand-in like the
   checkbox's; its trigger, Today, Cancel and Apply are KompanButtons, its month arrows KompanButtonUtilities and its
   typed dates KompanInputFields, so it lays out what the sheets above draw and reads nothing they do not declare
   (ADR-0053, ADR-0073). */
@import url("kompan-date-picker.css");
/* Figma's Button group (1046:10171), which the design system has no sheet for either. A stand-in like the checkbox's,
   worn by KompanButtonGroup and its items; it reads nothing the sheets above do not declare (ADR-0053). */
@import url("kompan-button-group.css");
/* Figma's Input dropdown (3281:377673), its dropdown.Menu and its menu items, which the design system has no sheet for
   either: worn by KompanSelectField, a stand-in like the checkbox's, reading only design-system tokens (ADR-0053,
   ADR-0074). */
@import url("kompan-input-dropdown.css");
/* Figma's Dropdown (3281:383083), with its list items and list header, which the design system has no sheet for either:
   worn by KompanMenu and KompanDropdown, a stand-in like the checkbox's, reading only design-system tokens (ADR-0053,
   ADR-0078). */
@import url("kompan-dropdown.css");
/* Figma's Textarea input field (1238:278), which the design system has no sheet for either: worn by KompanInputField with
   more than one line. A stand-in like the checkbox's, written as one more type of input-fields.css's field, so it declares
   and reads that field's own variables and otherwise only design-system tokens (ADR-0053, ADR-0077). */
@import url("kompan-textarea.css");
/* What the design system's avatar.css does not draw of Figma's Avatar family (19:1012, 1274:812, 82:2793,
   1217:108477): the contrast border, the add button's states and the whole profile photo, worn by KompanAvatar and the
   components built on it. A stand-in like the checkbox's, reading only design-system tokens; avatar.css itself is worn
   as it stands and corrected below (ADR-0053, ADR-0081). */
@import url("kompan-avatar.css");
/* Figma's Slider (1086:534), with its control handle (3287:442783), which the design system has no sheet for either:
   worn by KompanSlider and KompanRangeSlider, a stand-in like the checkbox's that draws native range inputs and reads
   only design-system tokens (ADR-0053, ADR-0087). */
@import url("kompan-slider.css");
/* Figma's Loading indicator (14208:21370), which the design system has no sheet for either: worn by
   KompanLoadingIndicator, and drawing the Homo Ludens figure KompanLoadingLogomark is wherever the library shows it. A
   stand-in like the checkbox's, reading only design-system tokens (ADR-0053, ADR-0086). */
@import url("kompan-loading-indicator.css");
/* Figma's Progress bar (1085:57382), which the design system has no sheet for either: worn by KompanProgressBar, and by
   KompanProgressLinear, which lays out its caption under one. A stand-in like the checkbox's, reading only design-system
   tokens (ADR-0053, ADR-0088). */
@import url("kompan-progress-bar.css");
/* The stepper, worn by KompanStepper: the library's own, since Figma has no stepper (G147), drawn from design-system
   tokens; its connectors are pieces of the Progress bar above, so it follows that sheet (ADR-0089). */
@import url("kompan-stepper.css");
/* The notification card, and the snackbar as its frame (ADR-0068) - the library's own design, since Figma has no alert
   or toast (G6). Last, like the stand-ins above it reads only design-system tokens. */
@import url("kompan-notification.css");

/* The design system's typeface (ADR-0057). Its tokens name Figtree and nothing else, and neither
   Kompan.UI.Design nor any host but the Showcase ever loaded it - so on a machine without Figtree
   installed every design-system label fell to the browser's default serif. The four weights the type
   scale uses ship beside this file (fonts/, SIL Open Font License 1.1, fonts/OFL.txt), so every host
   that links this sheet has them with no change to its head.

   Served from here rather than from Google Fonts: no third-party request on every page view and no CSP
   allowance for one, it works offline, and the face cannot change under a layout the browser tests
   measured. The files were copied from an installed Figtree 2.001 (name table "Version 2.001;
   gftools[0.9.30]"); that they are byte-identical to the upstream release is not yet verified.
   ADR-0057 records their SHA-256s.
   There is deliberately no local(): a machine with Figtree installed renders these bytes too, and an
   installed copy is exactly what hid this on the machine it was found on. */
@font-face {
    font-family: Figtree;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/Figtree-Regular.ttf") format("truetype");
}

@font-face {
    font-family: Figtree;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/Figtree-Medium.ttf") format("truetype");
}

@font-face {
    font-family: Figtree;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/Figtree-SemiBold.ttf") format("truetype");
}

@font-face {
    font-family: Figtree;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/Figtree-Bold.ttf") format("truetype");
}

/* =============================================================================================
   Corrections to the design system's own rules and tokens. The rule that governs this section is
   ADR-0057's "The rule for KompanUI.min.css, in full" (it supersedes ADR-0052 and restates ADR-0055).

   Every rule in this section changes what a Kompan.UI.Design rule or token computes. Each one is
   temporary, names what deletes it, and is pinned by a test; they are numbered so that a comment, a test
   or docs/deferred-work.md can name one. Three kinds are admitted, and nothing else:

   - A value Figma specifies, restored against an upstream rule that says otherwise (first admitted
     by ADR-0052). Pinned against Figma, never against this file's own numbers: a colour, a radius, a
     type size or a gap against the token Figma binds, and a geometry that is a sum of several tokens -
     a height, an inset - against the value measured from Figma into Figma/input-geometry.figma.json
     (ADR-0053 rule 8, ADR-0055).
   - An accessibility failure, measured against a WCAG success criterion and corrected only behind the
     media query or state that exposes it, so a user without that setting sees no change (ADR-0057
     decision 3).
   - The font tokens' missing fallback, which Figma does not specify. It is pinned and deleted like the
     rest, but its test is the one exception below (ADR-0057 decision 2).

   All of them live here, one block per upstream sheet, and none in a component's scoped stylesheet -
   KompanStylesheetContractTests fails if a scoped sheet redeclares one of an upstream sheet's own
   variables. Each test keeps passing when a release fixes the defect (the rule is then redundant, and
   deleting it is the cleanup its comment describes) and fails only if upstream moves the value
   somewhere else - except block 1's, which fails the day the package ships a fallback, because a
   restated token left behind would be a second opinion rather than a harmless duplicate. The same
   list is the ask upstream, in docs/deferred-work.md: "Kompan.UI.Design's font tokens have no
   fallback", "What the design system's button.css still leaves out or gets wrong" and
   "input-fields.css disagrees with Figma".
   ============================================================================================= */

/* ---- variables.css ------------------------------------------------------------------------ */

/* 1. The font tokens have no generic fallback (ADR-0057). Kompan.UI.Design declares each as a bare
   `Figtree`, so the swap period, a blocked download, or a glyph Figtree lacks all fall to the
   browser's serif. These are the seventeen font tokens this library's stylesheets read, restated with
   KompanTheme's own stack behind them - so design-system text and MudBlazor text degrade alike.
   :not(.region-asia), because upstream's .region-asia swaps these for Arial at the same specificity
   as the :root it overrides: a plain :root here comes later and would win on <html class="region-asia">
   - where a host naturally puts it, as the library puts .dark - leaving the page half Arial and half
   Figtree. On a descendant, .region-asia wins inside its subtree either way. The exclusion sits in
   :where() so it adds nothing to the specificity: the rule stays a plain :root that beats upstream's by
   source order alone, and an app's own later :root override of these tokens still wins (ADR-0049).
   Delete this block when the package ships a fallback; KompanTypefaceTests fails that day, and fails
   too if the package moves to another family, which this restatement would otherwise silently keep. */
:root:not(:where(.region-asia)) {
    --type-font-family-body: Figtree, "Work Sans", Helvetica, Arial, sans-serif;
    --type-font-family-display: Figtree, "Work Sans", Helvetica, Arial, sans-serif;
    --typography-styles-text-lg-medium-font-family: Figtree, "Work Sans", Helvetica, Arial, sans-serif;
    --typography-styles-text-lg-semibold-font-family: Figtree, "Work Sans", Helvetica, Arial, sans-serif;
    --typography-styles-text-md-medium-font-family: Figtree, "Work Sans", Helvetica, Arial, sans-serif;
    --typography-styles-text-md-regular-font-family: Figtree, "Work Sans", Helvetica, Arial, sans-serif;
    --typography-styles-text-md-semibold-font-family: Figtree, "Work Sans", Helvetica, Arial, sans-serif;
    --typography-styles-text-sm-medium-font-family: Figtree, "Work Sans", Helvetica, Arial, sans-serif;
    --typography-styles-text-sm-regular-font-family: Figtree, "Work Sans", Helvetica, Arial, sans-serif;
    --typography-styles-text-sm-semibold-font-family: Figtree, "Work Sans", Helvetica, Arial, sans-serif;
    --typography-styles-text-xs-medium-font-family: Figtree, "Work Sans", Helvetica, Arial, sans-serif;
    --typography-styles-text-xs-regular-font-family: Figtree, "Work Sans", Helvetica, Arial, sans-serif;
    --typography-styles-text-xs-semibold-font-family: Figtree, "Work Sans", Helvetica, Arial, sans-serif;
    --typography-styles-text-xl-semibold-font-family: Figtree, "Work Sans", Helvetica, Arial, sans-serif;
    --typography-styles-display-xs-semibold-font-family: Figtree, "Work Sans", Helvetica, Arial, sans-serif;
    --typography-styles-display-sm-semibold-font-family: Figtree, "Work Sans", Helvetica, Arial, sans-serif;
    --typography-styles-display-md-semibold-font-family: Figtree, "Work Sans", Helvetica, Arial, sans-serif;
    --typography-styles-display-xl-semibold-font-family: Figtree, "Work Sans", Helvetica, Arial, sans-serif;
}

/* ---- button.css --------------------------------------------------------------------------- */

/* 2. An xs link is 16px tall where Figma says 18px (ADR-0052, PM-805). Delete it when a
   Kompan.UI.Design release carries the fix;
   KompanButtonDesignSystemStyleTests.A_link_is_exactly_as_tall_as_its_type_line_height keeps passing
   then, and fails only if upstream moves the value.

   .kompan-button clamps line-height to --kompan-button-icon so a label shares the icon's row. That is
   right for a framed button — Figma's xs button really is 28px = 6 + 16 + 6 — and wrong for a link,
   which has no icon row to share: Figma's Size=xs link-brand/link-dark are 18px and we rendered 16px.
   Only xs diverges, because sm/md/lg have an icon box equal to their type line-height (20/24/24), so
   upstream's clamp is invisible there and must stay untouched. Verified against Figma node
   3287:427074's full 384-variant matrix; see docs/design-system-alignment.md. */
.kompan-button_xs.kompan-button_link,
.kompan-button_xs.kompan-button_link-dark {
    line-height: var(--typography-styles-text-xs-semibold-line-height);
}

/* 3. Under forced colours a button has no frame and no focus indicator (ADR-0057). button.css draws both
   as box-shadows - the frame an inset shadow over border: 0, the ring a shadow with outline: none - and
   forced-colours mode (Windows High Contrast) discards every box-shadow, so a focused button showed
   nothing at all (WCAG 2.4.7) and a filled or outlined one read as a plain label. Outlines survive the
   mode and take no layout space, so both come back as outlines in system colours: a 1px frame inside
   the edge, where the inset shadow was, for the hierarchies that have a frame; and a 2px Highlight ring
   2px out, where the design system's ring sits. Tertiary and link buttons have no frame to restore.
   Nothing here applies outside the media query. Delete it when button.css keeps a transparent outline
   on :focus-visible and frames its buttons under forced colours; KompanButtonForcedColorsTests measures
   the outcome, so it stays green that day. */
@media (forced-colors: active) {
    .kompan-button:not(:is(.kompan-button_tertiary, .kompan-button_tertiary-dark, .kompan-button_link, .kompan-button_link-dark)) {
        outline: var(--stroke-sm) solid ButtonText;
        outline-offset: calc(-1 * var(--stroke-sm));
    }

    .kompan-button:focus-visible {
        outline: var(--stroke-md) solid Highlight;
        outline-offset: var(--stroke-md);
    }

    .kompan-button:disabled,
    .kompan-button[aria-disabled="true"] {
        color: GrayText;
        outline-color: GrayText;
    }
}

/* ---- input-fields.css --------------------------------------------------------------------- */

/* Measured against Figma's Input field set, node 1090:57817 (413 variants), and pinned by
   KompanInputFieldDesignSystemStyleTests and KompanInputFieldFigmaParityTests against
   Figma/input-geometry.figma.json. Delete each rule when a Kompan.UI.Design release carries its fix;
   the list upstream is the "input-fields.css disagrees with Figma" entry in docs/deferred-work.md. */

/* 4. The stroke sits inside Figma's frame. Figma draws the control 36/48/56px - spacing md/lg/xl, the
   line, the same spacing again - with its 1px stroke inside that height; input-fields.css pads by the
   full spacing token and then lays a real 1px border outside it, so every size rendered 2px taller
   (38/50/58), with the text 1px further in, and out of line with the same-size KompanButton beside it.
   The variable rather than the control's padding is corrected (ADR-0055 rule 4) because the add-on and
   the leading-text field read it too. Base first: an unqualified .kompan-input here would otherwise
   outrank upstream's own _sm and _lg by source order. Pinned by
   A_field_is_the_height_Figma_draws_with_the_stroke_inside_it. */
.kompan-input {
    --kompan-input-padding: calc(var(--spacing-lg) - var(--stroke-sm));
}

.kompan-input_sm {
    --kompan-input-padding: calc(var(--spacing-md) - var(--stroke-sm));
}

.kompan-input_lg {
    --kompan-input-padding: calc(var(--spacing-xl) - var(--stroke-sm));
}

/* 5. The label's gap. Figma nests label and control at --spacing-sm (6px) inside a group whose hint sits
   --spacing-xs (4px) below; input-fields.css flattens both into one grid gap of --spacing-xs, so the
   label sat 2px too close. The difference, as the label's own margin, restores both gaps inside the
   existing grid - no markup change. Pinned by The_label_sits_where_Figma_puts_it. */
.kompan-input__label {
    margin-block-end: calc(var(--spacing-sm) - var(--spacing-xs));
}

/* 6. Focus. Figma's Focused variants are the same height as every other state (all 413 of them) and keep
   the 1px stroke; what they add is the "Focus rings/focus-ring" effect style outside it, and the
   Initial one re-binds its stroke to border-primary (node 3531:403180). input-fields.css instead
   thickens the border to 2px - so a field grew 2px on focus, pushed everything below it down and moved
   its text 1px - and draws no ring at all, because --kompan-input-focus-ring is the resting shadow.
   ADR-0053 rule 5 already required a box-shadow ring for exactly this reason. The effect style's own
   token, not the colours it is composed of (ADR-0053 rule 4). Pinned by
   Focus_changes_neither_the_fields_size_nor_where_its_text_sits and
   Focus_keeps_the_treatments_border_and_draws_its_own_ring. */
.kompan-input:focus-within > .kompan-input__control,
.kompan-input_focused > .kompan-input__control {
    border-width: var(--stroke-sm);
    border-color: var(--color-border-primary);
    box-shadow: var(--effect-styles-focus-rings-focus-ring);
}

/* 7. Under forced colours a focused field has no focus indicator (ADR-0057 decision 3), which goes with
   correction 6. Forced colours (Windows High Contrast) discard every box-shadow, and with it the ring;
   upstream's 2px border at least changed on focus, and correction 6 took that away too, so a focused
   field showed nothing at all (WCAG 2.4.7). An outline survives the mode, in a system colour, and takes
   no layout space, so focus still changes no size: a 2px Highlight outline 2px out, where the ring sits,
   as block 3 draws for the button. Nothing here applies outside the media query. Delete it when
   input-fields.css draws a focus indicator that survives forced colours - not merely when it fixes
   correction 6, whose box-shadow ring would leave this failure in place. Pinned by
   KompanInputFieldForcedColoursTests.A_focused_field_shows_its_focus_in_forced_colours, which measures
   the focused control under emulated forced colours rather than reading this rule. */
@media (forced-colors: active) {
    .kompan-input:not(.kompan-input_disabled):focus-within > .kompan-input__control,
    .kompan-input_focused > .kompan-input__control {
        outline: var(--stroke-md) solid Highlight;
        outline-offset: var(--stroke-md);
    }
}

/* 8. Focus in a treatment. input-fields.css paints every state's focus in --color-input-border-brand-focus,
   so an error, success or warning field lost its colour the moment it was clicked. Figma's Focused
   variants (22436:97044 Error, 23328:2863 Success, 23331:11216 Warning, 3531:403199 Destructive)
   instead keep the state's own stroke and wear the state's own ring - and every one of them puts the
   field on the plain input surface, input/bg-primary under input/fg-primary text, so the state is
   carried by the border and the ring alone. Destructive is drawn with the pale border-error and the
   base ring; Error greys its label and hint (text-secondary, text-tertiary) where Warning keeps its
   colour. Both are followed as drawn and raised in docs/design-system-alignment.md.

   The ring is the effect style's own token, as in correction 6 - for success and warning too since
   Kompan.UI.Design 0.7.1, which added theirs. Destructive before the validation
   states, which win when both are set, as they do at rest. Pinned by
   Focus_keeps_the_treatments_border_and_draws_its_own_ring, Focus_puts_the_text_on_the_plain_input_surface
   and Focus_colours_the_label_and_the_hint_as_Figma_binds_them.

   The two rules that set the root's own variables - the surface and text here, the greyed label and hint
   below - ask for focus in the input field's control, not anywhere in the root: the select family and
   the date-time picker wear .kompan-input around a MudBlazor control that has no red border or ring, so
   on the root's :focus-within an emptied required select lost its only error cues, its label and its
   "Required" hint, the moment it was focused. For the input field the two are the same thing, since
   everything focusable in it is inside the control. Pinned by KompanSelectFamilyRequiredTests.

   KompanSelectField is the exception it no longer needs: as Figma's Input dropdown it draws this Focused
   Error on its own frame - the stroke kept, the error ring - when its combobox has keyboard focus
   (kompan-input-dropdown.css, docs/figma-gaps.md G94), so it greys its label and hint on that same
   :focus-visible, as the input field does, and keeps them red whenever its frame is at rest. The
   date-time picker and the obsolete MudBlazor selects keep theirs red. Pinned by
   KompanSelectFieldFocusTests.A_keyboard_focused_select_in_error_draws_the_input_fields_focused_error. */
.kompan-input:not(.kompan-input_disabled):has(> .kompan-input__control:focus-within),
.kompan-input_focused {
    --kompan-input-bg: var(--color-input-bg-primary);
    --kompan-input-fg: var(--color-input-fg-primary);
}

.kompan-input_destructive:focus-within > .kompan-input__control,
.kompan-input_destructive.kompan-input_focused > .kompan-input__control {
    border-color: var(--color-border-error);
}

.kompan-input_error:focus-within > .kompan-input__control,
.kompan-input_error.kompan-input_focused > .kompan-input__control {
    border-color: var(--kompan-input-border);
    box-shadow: var(--effect-styles-focus-rings-focus-ring-error);
}

.kompan-input_error:not(.kompan-input_disabled):has(> .kompan-input__control:focus-within),
.kompan-input_error.kompan-input_focused,
.kompan-input_error.kompan-input-dropdown:has(> .kompan-input-dropdown__anchor > .kompan-input-dropdown__control > [role="combobox"]:focus-visible) {
    --kompan-input-label: var(--color-text-secondary);
    --kompan-input-hint: var(--color-text-tertiary);
}

.kompan-input_success:focus-within > .kompan-input__control,
.kompan-input_success.kompan-input_focused > .kompan-input__control {
    border-color: var(--kompan-input-border);
    box-shadow: var(--effect-styles-focus-rings-focus-ring-success);
}

.kompan-input_warning:focus-within > .kompan-input__control,
.kompan-input_warning.kompan-input_focused > .kompan-input__control {
    border-color: var(--kompan-input-border);
    box-shadow: var(--effect-styles-focus-rings-focus-ring-warning);
}

/* 8a. Destructive at rest. input-fields.css gives .kompan-input_destructive border-error-solid (#db1a24) and
   nothing else; every resting Destructive variant Figma draws binds border-error, the pale #fde9ea its
   Focused variant binds (3531:403161 md, 22441:99039 sm, 1094:7182 lg, 3531:403104 Placeholder), and
   binds its hint to fg-error-primary, at rest and focused (3531:403168, 3531:403206), where upstream left
   it the Initial grey. So a destructive field was solid red at rest, turned pale when it was clicked, and
   said what it warns of in grey. The label keeps text-secondary. Figma draws Destructive in no validation
   treatment and never Disabled, and those keep what they had: a validation treatment wins, as it does in
   block 8. Pinned by At_rest_a_destructive_field_wears_Figmas_pale_border and
   The_hint_is_set_in_Figmas_hint_style_and_its_treatments_colour. */
.kompan-input_destructive:not(.kompan-input_error):not(.kompan-input_success):not(.kompan-input_warning):not(.kompan-input_disabled) {
    --kompan-input-border: var(--color-border-error);
    --kompan-input-hint: var(--color-fg-error-primary);
}

/* 9. A disabled field does not look focused. Its help button stays a tab stop, so that its text can still be
   read, and the root then matches :focus-within: input-fields.css thickens and recolours the border for
   it, and the rules above swapped in the enabled surface and text and drew the ring - a field that cannot
   be edited was drawn as a focused, enabled one. Figma's State axis has Disabled and Focused as two values
   of one property, so no variant is both; the field keeps its resting stroke and shadow, and the help
   button's own ring says where focus is. After every focus rule above, which it outranks by source
   order; the surface and text rules above exclude it themselves. Pinned by
   A_disabled_field_does_not_look_focused_while_its_help_button_has_focus. */
.kompan-input_disabled:focus-within > .kompan-input__control {
    border-width: var(--stroke-sm);
    border-color: var(--kompan-input-border);
    box-shadow: var(--kompan-input-shadow);
}

/* 9a. A field inside a field is focused only by its own focus. KompanField wears the design system's root
   around content of the caller's own, so a KompanInputField placed in one has a .kompan-input around its
   own: every rule above asks for the control that is the root's own child, and this undoes the one
   input-fields.css writes with a descendant combinator - so focusing a switch beside the input no longer
   drew the input's focus ring, nor an outer field in error its error ring. Only while the outer root has
   the focus, which is when that rule reaches the inner control, so at rest a caller's own look on the
   control stands; and at the upstream rule's own specificity, the outer root inside :where(), so that it
   wins by source order while a caller's ::deep rule, loaded after this sheet, still wins over both. After
   rules 6 to 9, whose focused look it leaves to the inner root's own focus. Pinned by
   KompanFieldNestedInputFocusTests. */
:where(.kompan-input:is(:focus-within, .kompan-input_focused)) .kompan-input:not(:focus-within, .kompan-input_focused) > .kompan-input__control {
    border-width: var(--stroke-sm);
    border-color: var(--kompan-input-border);
    box-shadow: var(--kompan-input-shadow);
}

/* 10. The Required asterisk's colour. input-fields.css draws it in --color-fg-error-secondary in every
   treatment, so a success or warning field's asterisk was red. Figma binds the treatment's own
   secondary foreground: fg-warning-secondary at rest and focused (23331:11096, 23331:11216), and
   fg-success-secondary in the Focused success render (23328:2863). Error and Initial keep upstream's.
   Pinned by The_required_asterisk_wears_its_treatments_colour. */
.kompan-input_success .kompan-input__required {
    color: var(--color-fg-success-secondary);
}

.kompan-input_warning .kompan-input__required {
    color: var(--color-fg-warning-secondary);
}

/* 11. The Leading text type's end. input-fields.css gives this type's control no padding and no gap - the
   add-on and the text pad themselves - as though the text were always the control's last part. So
   everything after the text (the help icon, the clear button, a refusal's mark, Edit, an End icon, the
   Updating spinner, a caller's ChildContent) sat flush against the border, 1px from the control's edge,
   and the corner radius clipped the help icon. Figma's md Leading text render (3531:403352, drawn beside
   the Icon leading one) insets its help icon exactly as the Default type does. Here the control takes the
   text's end padding back and each part after the text keeps the Default type's gap, so with nothing
   after the text its end inset is what it was - the inline padding, which block 17 tells apart from the
   block padding at lg. Before the trailing types below, which keep their cell flush to the end whatever
   leads. Pinned by
   In_the_leading_text_type_the_help_icon_is_inset_as_in_the_default_type and
   In_the_leading_text_type_the_text_keeps_its_end_inset_when_nothing_follows_it. */
.kompan-input_leading-text .kompan-input__control {
    padding-inline-end: var(--kompan-input-padding-inline, var(--kompan-input-padding));
}

.kompan-input_leading-text .kompan-input__field {
    padding-inline-end: 0;
}

.kompan-input_leading-text .kompan-input__field ~ * {
    margin-inline-start: var(--kompan-input-gap);
}

/* 12. The trailing types. Figma draws Trailing dropdown and Trailing button at the height of every other
   type (3531:403467, 3531:403362), with the end cell running the control's full inside height and flush
   to its end, and a divider before the button cell only. input-fields.css zeroes the control's padding
   for the leading-text type alone, so the end cell sat inset by the control's padding and then padded
   itself again - 54 and 62px at sm - and it divides the dropdown too. Here the control drops its block
   and end padding for both types, and the text takes the block padding itself.

   Each cell then sits where Figma puts it, by the inline padding (block 17). The button's divider is its
   Text input's own end stroke, inside that input's padding, so it starts the padding less the stroke -
   the variable - after the help icon: 7/11/11px (21928:22429, 3531:403366, 3309:409322). The dropdown
   has no divider, and its text is its Content's padding and then the Dropdown's own after the help icon:
   16/24px at sm and md (21928:22502, 3531:403467), and md's pattern at lg, whose frame Figma draws
   otherwise (docs/design-system-alignment.md). So its cell starts the full spacing - the variable plus
   the stroke - after the help icon and pads its text by the full spacing too, where input-fields.css pads
   it by the variable, as if it had a stroke to make up for; its end is the variable, which the control's
   stroke completes. Both cells used to keep the Default type's distance from its border, 8/12/16px, from
   the help icon, and the dropdown's text sat 1px short of the spacing again. The Leading text type
   zeroes the control's gap, so a field that has both an add-on and a trailing cell - a combination Figma
   does not draw (docs/figma-gaps.md, G15) - takes no gap off, or its cell sat 4px after the help icon or
   the text at md and flush at sm. How the cell lays out the caller's content is the component's own
   business, in KompanInputField.razor.css. Pinned by
   Every_type_is_the_height_Figma_draws_for_its_size,
   A_trailing_cell_runs_the_full_height_of_the_control_to_its_end,
   Only_the_trailing_button_is_divided_from_the_text,
   A_plain_button_in_the_trailing_button_cell_is_laid_out_as_Figmas_Button,
   Figmas_currency_cell_is_laid_out_as_Figma_draws_it,
   A_select_in_the_trailing_dropdown_sits_where_Figma_draws_the_dropdown and
   With_leading_text_a_trailing_cell_keeps_the_trailing_types_distance_from_what_precedes_it. */
.kompan-input_trailing-dropdown .kompan-input__control,
.kompan-input_trailing-button .kompan-input__control {
    padding-block: 0;
    padding-inline-end: 0;
}

.kompan-input_trailing-dropdown .kompan-input__field,
.kompan-input_trailing-button .kompan-input__field {
    padding-block: var(--kompan-input-padding);
}

.kompan-input_trailing-dropdown .kompan-input__select,
.kompan-input_trailing-button .kompan-input__button {
    align-self: stretch;
}

.kompan-input_trailing-dropdown .kompan-input__select {
    margin-inline-start: calc(var(--kompan-input-padding-inline, var(--kompan-input-padding)) + var(--stroke-sm) - var(--kompan-input-gap));
    padding-inline: calc(var(--kompan-input-padding-inline, var(--kompan-input-padding)) + var(--stroke-sm)) var(--kompan-input-padding-inline, var(--kompan-input-padding));
    border-inline-start: 0;
}

.kompan-input_trailing-button .kompan-input__button {
    margin-inline-start: calc(var(--kompan-input-padding-inline, var(--kompan-input-padding)) - var(--kompan-input-gap));
    padding-inline: var(--kompan-input-padding-inline, var(--kompan-input-padding));
}

.kompan-input_leading-text.kompan-input_trailing-dropdown .kompan-input__select {
    margin-inline-start: calc(var(--kompan-input-padding-inline, var(--kompan-input-padding)) + var(--stroke-sm));
}

.kompan-input_leading-text.kompan-input_trailing-button .kompan-input__button {
    margin-inline-start: var(--kompan-input-padding-inline, var(--kompan-input-padding));
}

/* 13. The leading icon's colour. input-fields.css sizes .kompan-input__icon and leaves its colour to
   inheritance, so the icon took the field's text colour (input/fg-primary, 0.8) - and a treatment's
   coloured text in an error, success or warning field. Figma's Icon leading type binds input/fg-tertiary
   (3531:403016; the md render's glyph is the same 0.4 alpha as the leading-text add-on). Pinned by
   The_leading_icon_sits_in_the_design_systems_icon_slot_where_Figma_puts_it. */
.kompan-input__icon {
    color: var(--color-input-fg-tertiary);
}

/* 14. The help icon's colour. input-fields.css draws .kompan-input__help in --color-text-tertiary (0.5
   alpha); outside a treatment Figma's field binds button/secondary-subtle/fg-secondary - 0.4 alpha - since the design
   review of 2026-10-19 moved the Help icon (1054:7, 1054:66) onto it, in the Filled types and the Focused variants
   alike (3531:403016, 22436:97044). It bound fg-tertiary, 0.2 - 1.54:1 on white, raised in
   docs/design-system-alignment.md - until then; fg-secondary is 2.6:1. Pinned by The_help_icon_is_drawn_in_Figmas_colour.

   In a validation treatment the resting icon - Placeholder, Hover and Filled - binds
   button/border-button-{state}-secondary instead (22436:96992, 22436:97002, 22436:97012; 23328:2741;
   23331:11096), and the focused one the grey again (22436:97044), with focus asked for as block 8 asks for
   it. It was the grey in every treatment. The warning one is about 1.1:1 on the warning fill, raised beside
   the grey's. Asked for through the field's own control and parts element, so a KompanField's treatment does
   not reach a field inside it; not the Info icon, which no Figma field draws (KompanInputField.razor.css,
   G25); and not while open, below. Pinned by In_a_validation_treatment_the_help_icon_wears_Figmas_colour.

   While its text shows the icon is Figma's Help icon Open=True (1054:63): fg-secondary-hover, where
   input-fields.css has no open or hover colour at all. _open is on the button exactly while the text
   shows - however it was shown, a hover, focus or a tap - so the icon never says open over text that has
   gone: not after a second tap (The_help_icon_darkens_while_a_tap_holds_its_text_and_not_once_a_second_tap_hides_it),
   and not after Escape with the pointer still on it
   (Escape_with_the_pointer_on_the_icon_puts_the_icon_back_at_rest), which a :hover rule got wrong. _open
   carries two classes so a consumer's colour for the resting icon gives way to it
   (A_consumer_colour_on_the_help_icon_gives_way_to_the_open_colour_however_its_text_was_shown). The Info
   icon's look is not a correction and lives in KompanInputField.razor.css. Pinned by
   The_help_icon_darkens_while_a_hover_shows_its_text and
   The_help_icon_darkens_while_keyboard_focus_shows_its_text_and_not_once_Escape_puts_it_away. */
.kompan-input__help {
    color: var(--color-button-secondary-subtle-fg-secondary);
}

.kompan-input_error > .kompan-input__control > .kompan-input__parts .kompan-input__help:not(.kompan-input__help_open):not(.kompan-input__help_info) {
    color: var(--color-button-border-button-error-secondary);
}

.kompan-input_success > .kompan-input__control > .kompan-input__parts .kompan-input__help:not(.kompan-input__help_open):not(.kompan-input__help_info) {
    color: var(--color-button-border-button-success-secondary);
}

.kompan-input_warning > .kompan-input__control > .kompan-input__parts .kompan-input__help:not(.kompan-input__help_open):not(.kompan-input__help_info) {
    color: var(--color-button-border-button-warning-secondary);
}

.kompan-input:not(.kompan-input_disabled):has(> .kompan-input__control:focus-within) > .kompan-input__control > .kompan-input__parts .kompan-input__help:not(.kompan-input__help_open):not(.kompan-input__help_info),
.kompan-input_focused > .kompan-input__control > .kompan-input__parts .kompan-input__help:not(.kompan-input__help_open):not(.kompan-input__help_info) {
    color: var(--color-button-secondary-subtle-fg-secondary);
}

.kompan-input__help.kompan-input__help_open {
    color: var(--color-button-secondary-subtle-fg-secondary-hover);
}

/* 15. The radius per size. Figma binds input-sm 4px, input-md 6px and input-lg 10px; input-fields.css
   hardcodes --radius-input-md on the base rule, so sm and lg are wrong and their tokens go unread.
   Pinned by Each_size_takes_the_radius_Figma_gives_it. */
.kompan-input_sm {
    --kompan-input-radius: var(--radius-input-sm);
}

.kompan-input_lg {
    --kompan-input-radius: var(--radius-input-lg);
}

/* 16. Figma's lg keeps md's Text md/Regular (16px/24px); input-fields.css promotes it to 18px/28px, which
   alone makes an lg control 4px taller than Figma's. Pinned by
   Lg_keeps_the_md_type_size_rather_than_growing_it. */
.kompan-input_lg {
    --kompan-input-font-size: var(--typography-styles-text-md-regular-font-size);
    --kompan-input-line-height: var(--typography-styles-text-md-regular-line-height);
}

/* 17. Figma's lg is inset 12px inline and 16px above and below: px lg, py xl, on the Input frame
   (3285:379987) and in every non-destructive type - Default 1091:61567, Icon leading 1091:61575, Leading
   text 1091:61553, Trailing button 3309:409322, Trailing dropdown 3285:380115. input-fields.css pads lg by
   --spacing-xl on every side, so an lg field's text, help icon, leading icon and add-on all sat 4px
   further in than Figma draws them. sm and md are inset alike both ways, so there the inline variable is
   declared by nobody, and every read falls back to --kompan-input-padding as the part reading it sees it:
   a consumer's --kompan-input-padding on an sm or md field sets both, wherever it is set - on the root, on
   the control (OuterStyle, OuterClass), on the add-on, or on KompanField's frame (InnerStyle). Declared on
   the root as var(--kompan-input-padding) instead, it was resolved there and inherited as a length, and an
   override below the root set the block padding alone. On an lg field --kompan-input-padding sets the block
   padding only, and --kompan-input-padding-inline, set anywhere from the root down, the inline: Figma's lg
   insets the two differently, so neither can be worked out from the other. The root resets the variable
   to nothing, so a field inside an lg KompanField does not take the outer field's. It is the inline
   padding of every part input-fields.css pads with its one variable: the control, the add-on and the
   leading-text field here, the leading-text control's end in block 11, the trailing cells in block 12 and
   the add-on's end in block 18 - and, outside these corrections, of KompanField's frame, with the
   library's own styles below, so that a framed field's content starts where the same-size input field's
   text does. The block padding - and with it the height and --kompan-field-control-height - is unchanged.
   Figma's lg Destructive variants (1094:7182, 1094:7166) are inset 16 all round; the five types are
   followed, and that pair is raised in docs/design-system-alignment.md. Delete the two declarations when
   input-fields.css pads lg by --spacing-lg inline; the reads, with their fallback, can stay or go back to
   --kompan-input-padding. Pinned by KompanInputFieldPaddingOverrideTests,
   A_field_is_the_height_Figma_draws_with_the_stroke_inside_it,
   The_row_ends_Figmas_inline_inset_from_the_controls_end,
   The_text_starts_Figmas_inline_inset_from_the_controls_start,
   The_leading_icon_sits_in_the_design_systems_icon_slot_where_Figma_puts_it,
   The_leading_text_add_on_is_inset_as_Figma_draws_it and
   A_framed_fields_content_starts_where_the_same_size_input_fields_text_does. */
.kompan-input {
    --kompan-input-padding-inline: initial;
}

.kompan-input_lg {
    --kompan-input-padding-inline: calc(var(--spacing-lg) - var(--stroke-sm));
}

.kompan-input__control,
.kompan-input__addon {
    padding-inline: var(--kompan-input-padding-inline, var(--kompan-input-padding));
}

.kompan-input_leading-text .kompan-input__field {
    padding-inline-start: var(--kompan-input-padding-inline, var(--kompan-input-padding));
}

/* 18. The Leading text add-on's end. Figma's add-on pads itself by the spacing on both sides and has no
   stroke - the divider is the Text input's own start stroke - so its text ends 8/12/12px before the
   divider (21928:22417, 3531:403356, 3285:380160). input-fields.css pads it by the control's padding all
   round, which block 4 makes the spacing less the stroke: right above, below and before the text, where
   the add-on meets the control's stroke, and 1px short after it, where it meets none. Delete it with block
   4. Pinned by The_leading_text_add_on_is_inset_as_Figma_draws_it. */
.kompan-input__addon {
    padding-inline-end: calc(var(--kompan-input-padding-inline, var(--kompan-input-padding)) + var(--stroke-sm));
}

/* 19. The trailing dropdown's text colour. Figma binds input/fg-secondary on the Dropdown's text at every
   size and in the Disabled variant (3531:403476, 21928:22513, 3285:380120; 3531:403463) - lighter than
   the value's input/fg-primary - and input-fields.css gives the cell color: inherit, the value's colour.
   A native select or a plain button in the cell takes the cell's; the chevron's colour is
   KompanInputField's own, since the chevron is the caller's content. A validation treatment at rest draws
   the text in its own text colour (22436:97241, 23328:3459, 23331:11812), which the cell inherits, so an
   unfocused treatment is left out. Focused, every treatment binds input/fg-secondary again (22436:97256,
   23328:3504, 23331:11857): block 8 puts a focused field on the plain surface, and the cell inherited the
   value's 0.8 from it. So the focus half asks for focus as block 8 does. Delete it when input-fields.css
   colours the cell. Pinned by
   The_trailing_dropdowns_text_and_chevron_wear_Figmas_colours and
   In_a_validation_treatment_the_trailing_dropdown_wears_Figmas_colours. */
.kompan-input_trailing-dropdown:not(.kompan-input_error):not(.kompan-input_success):not(.kompan-input_warning) .kompan-input__select,
.kompan-input_trailing-dropdown:not(.kompan-input_disabled):has(.kompan-input__control:focus-within) .kompan-input__select,
.kompan-input_trailing-dropdown.kompan-input_focused .kompan-input__select {
    color: var(--color-input-fg-secondary);
}

/* 20. Focus in the Leading text and Trailing button types rings the Text input, not the control. Figma's
   Focused variants of both put border-primary and the focus ring on the Text input frame alone, input-md on
   all four of its corners, and leave the Input its resting stroke and shadow, the add-on or the Button
   outside the ring (3531:403390 and 3531:403400: Text inputs 3531:403396 and 3531:403404, Input
   3531:403403; the sm 21928:22446 and the Error 22436:97188 and 22436:97200 alike). input-fields.css rings
   the whole control, and block 6 kept that, so the add-on and Copy sat inside the ring - and a Tab onto Copy
   drew two, the field's and the Button's own. KompanInputField renders its text and parts into one element in
   every type, .kompan-input__parts, and only these two make it the Text input frame, .kompan-input__text-input
   - in the others it draws no box. The frame moves nothing, and ends where its last part
   does, the inline padding and a stroke short of the control's outer edge or the far side of the Button's
   divider, and starts as far in from the control's edge - or, after an add-on, at the add-on's divider,
   which is the field's own start stroke. The ring is its ::before, laid over those edges, so that its
   stroke covers the control's and the dividers exactly, and at z-index 1, over the Button as Figma lays
   it: MudBlazor positions every button, and a positioned box later in the document is painted over one
   with no z-index. The control is isolated, so that z-index ranks the ring among the control's own parts
   and nowhere else. Without that, the ring was lifted into the stacking order of the page around the
   field and painted over what the page stacks above the field earlier in the document - a table's
   sticky column or fixed header (kompan-table.css, whose stacking keeps what a cell holds at z-index 1 or
   under) - which the control's box-shadow, every other type's ring, stays under. In a treatment the Text input keeps the
   treatment's stroke and wears its ring, as block 8 has the control do; Destructive keeps border-error and
   the base ring. Only while the Text input has the focus - a focused Button draws its own ring and no
   other - and not on a disabled field (block 9). After blocks 6 to 9a, which it undoes on the control for
   these two types. Pinned by
   Focus_rings_the_text_input_alone_in_the_leading_text_and_trailing_button_types,
   In_a_treatment_the_text_input_wears_the_treatments_ring,
   Keyboard_focus_on_the_trailing_button_draws_the_Buttons_ring_and_no_other and
   KompanInputFieldTextInputRingPaintTests, which reads what is painted where. */
.kompan-input__control:has(> .kompan-input__text-input) {
    isolation: isolate;
}

.kompan-input:focus-within > .kompan-input__control:has(> .kompan-input__text-input),
.kompan-input_focused > .kompan-input__control:has(> .kompan-input__text-input) {
    border-color: var(--kompan-input-border);
    box-shadow: var(--kompan-input-shadow);
}

.kompan-input:not(.kompan-input_disabled) > .kompan-input__control > .kompan-input__text-input:focus-within::before,
.kompan-input_focused > .kompan-input__control > .kompan-input__text-input::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset-block: calc(-1 * var(--stroke-sm));
    inset-inline: calc(-1 * (var(--kompan-input-padding-inline, var(--kompan-input-padding)) + var(--stroke-sm)));
    border: var(--stroke-sm) solid var(--color-border-primary);
    border-radius: var(--kompan-input-radius);
    box-shadow: var(--effect-styles-focus-rings-focus-ring);
    pointer-events: none;
}

.kompan-input_leading-text:not(.kompan-input_disabled) > .kompan-input__control > .kompan-input__text-input:focus-within::before,
.kompan-input_leading-text.kompan-input_focused > .kompan-input__control > .kompan-input__text-input::before {
    inset-inline-start: 0;
}

.kompan-input_destructive:not(.kompan-input_disabled) > .kompan-input__control > .kompan-input__text-input:focus-within::before,
.kompan-input_destructive.kompan-input_focused > .kompan-input__control > .kompan-input__text-input::before {
    border-color: var(--color-border-error);
}

.kompan-input_error:not(.kompan-input_disabled) > .kompan-input__control > .kompan-input__text-input:focus-within::before,
.kompan-input_error.kompan-input_focused > .kompan-input__control > .kompan-input__text-input::before {
    border-color: var(--kompan-input-border);
    box-shadow: var(--effect-styles-focus-rings-focus-ring-error);
}

.kompan-input_success:not(.kompan-input_disabled) > .kompan-input__control > .kompan-input__text-input:focus-within::before,
.kompan-input_success.kompan-input_focused > .kompan-input__control > .kompan-input__text-input::before {
    border-color: var(--kompan-input-border);
    box-shadow: var(--effect-styles-focus-rings-focus-ring-success);
}

.kompan-input_warning:not(.kompan-input_disabled) > .kompan-input__control > .kompan-input__text-input:focus-within::before,
.kompan-input_warning.kompan-input_focused > .kompan-input__control > .kompan-input__text-input::before {
    border-color: var(--kompan-input-border);
    box-shadow: var(--effect-styles-focus-rings-focus-ring-warning);
}

/* Forced colours discard the ring, so block 7's outline moves to the Text input with it. */
@media (forced-colors: active) {
    .kompan-input:not(.kompan-input_disabled):focus-within > .kompan-input__control:has(> .kompan-input__text-input),
    .kompan-input_focused > .kompan-input__control:has(> .kompan-input__text-input) {
        outline: none;
    }

    .kompan-input:not(.kompan-input_disabled) > .kompan-input__control > .kompan-input__text-input:focus-within::before,
    .kompan-input_focused > .kompan-input__control > .kompan-input__text-input::before {
        outline: var(--stroke-md) solid Highlight;
        outline-offset: var(--stroke-md);
    }
}

/* ---- badge.css ---------------------------------------------------------------------------- */

/* 21. Under forced colours a badge has no edge (ADR-0057 decision 3). badge.css draws it as an inset
   box-shadow, which the mode discards with the fill, so a count beside a heading - KompanCardHeader's
   Badge - read as bare text run on from it (WCAG 1.4.11). An outline survives the mode and takes no room:
   a 1px one in CanvasText, inside the edge, where the shadow was. Nothing here applies outside the media
   query. Delete it when badge.css frames its badges under forced colours;
   KompanCardHeaderFigmaParityTests.Under_forced_colours_the_badge_keeps_its_edge measures the outcome, so
   it stays green that day. */
@media (forced-colors: active) {
    .kompan-badge {
        outline: var(--stroke-sm) solid CanvasText;
        outline-offset: calc(-1 * var(--stroke-sm));
    }
}

/* 30. A badge's gaps beside a picture and before its remove button. Figma spaces a dot, a flag or an avatar from
   the text by spacing xs at sm and spacing sm at md and lg (1046:3858 and every Dot, Country and Avatar variant of
   the set), and the X close by spacing xxs at every size (1046:3970 and every X close variant); badge.css spaces
   every part by its gap, spacing xs, so md and lg's pictures sat 2px close and the remove button 2px far. Delete
   it when badge.css does the same; KompanBadgeFigmaParityTests.The_gaps_are_Figmas keeps passing then. */
.kompan-badge_md > .kompan-badge__dot,
.kompan-badge_md > .kompan-badge__avatar,
.kompan-badge_lg > .kompan-badge__dot,
.kompan-badge_lg > .kompan-badge__avatar {
    margin-right: calc(var(--spacing-sm) - var(--kompan-badge-gap));
}

.kompan-badge__close {
    margin-left: calc(var(--spacing-xxs) - var(--kompan-badge-gap));
}

/* 31. A square badge's leading insets. Figma's Badge color and Badge modern keep a dot at the badge's own inset -
   spacing sm, md and lg at sm, md and lg (4825:409849, 4825:411782) - and inset a flag or an avatar by the icon's
   inset, spacing xs, sm and md (the Country and Avatar variants of both types); badge.css pulls a dot in to the
   icon's inset and an image to the pill's 3, 4 and 6px, so a square badge's dot sat 2px out and its image 1 to 2px.
   Delete it when badge.css does the same; KompanBadgeFigmaParityTests.The_leading_part_sits_where_Figma_insets_it
   keeps passing then. */
.kompan-badge_square > .kompan-badge__dot {
    margin-left: 0;
}

.kompan-badge_square > .kompan-badge__avatar {
    margin-left: calc(var(--kompan-badge-px-icon) - var(--kompan-badge-px));
}

/* 47. A warning Pill outline keeps its fill. Figma fills every warning Pill outline variant with utility
   warning-100, as it does the Pill color (3918:426250, 3918:426273); badge.css empties every outline. Delete it
   when badge.css does the same; KompanBadgeFigmaParityTests.Each_type_and_colour_is_Figmas keeps passing then. */
.kompan-badge_warning.kompan-badge_outline {
    --kompan-badge-bg: var(--kompan-badge-tint);
}

/* 48. A dot's colour. Figma draws a Pill outline's dot in the outline's icon colour - utility 600, and blue and
   orange 500 (3918:426247, 3918:426259, 3921:402558) - and every other type's in the colour's 500, warning-500
   included (1046:4547, 4825:409819, 4825:411752); badge.css draws every dot in the colour's icon step, which is the
   500 except for warning, whose is the 600. Delete it when badge.css does the same;
   KompanBadgeFigmaParityTests.A_dot_is_Figmas_colour keeps passing then. */
.kompan-badge_warning > .kompan-badge__dot::before {
    background: var(--color-utility-warning-500);
}

.kompan-badge_outline > .kompan-badge__dot::before {
    background: var(--kompan-badge-icon-fg);
}

/* 49. The remove button's glyph is the colour's 400. Figma draws the X close's glyph in utility gray-400, brand-400
   and so on in the Pill color, Pill outline and Badge color types (1046:3970, 3918:426262, 4825:409852 and every
   X close variant of them); badge.css draws it in the icon's colour, 500 or 600. Badge modern draws it in its icon's
   colour, fg-quaternary (4825:411906), as badge.css does, and a dark badge, which Figma draws only without one,
   keeps badge.css's white. Delete it when badge.css does the same;
   KompanBadgeFigmaParityTests.The_remove_button_is_Figmas keeps passing then. */
.kompan-badge__close {
    color: var(--color-utility-gray-400);
}

.kompan-badge_brand .kompan-badge__close {
    color: var(--color-utility-brand-400);
}

.kompan-badge_error .kompan-badge__close {
    color: var(--color-utility-error-400);
}

.kompan-badge_warning .kompan-badge__close {
    color: var(--color-utility-warning-400);
}

.kompan-badge_success .kompan-badge__close {
    color: var(--color-utility-success-400);
}

.kompan-badge_blue .kompan-badge__close {
    color: var(--color-utility-blue-400);
}

.kompan-badge_orange .kompan-badge__close {
    color: var(--color-utility-orange-400);
}

.kompan-badge_dark .kompan-badge__close,
.kompan-badge_modern .kompan-badge__close {
    color: var(--kompan-badge-icon-fg);
}

/* 50. A square badge's remove button has a 3px corner. Figma rounds Badge color's and Badge modern's X close by
   3px at every size (4825:409852, 4825:409863), unbound; badge.css rounds it by radius xs, 4px. Delete it when
   badge.css does the same; KompanBadgeFigmaParityTests.The_remove_button_is_Figmas keeps passing then. */
.kompan-badge_square .kompan-badge__close {
    border-radius: 3px;
}

/* ---- visual.css --------------------------------------------------------------------------- */

/* 41. The overlay's action sits in the top-right corner, Figma's container padding-sm in. Figma's
   Visual.overlay.component set (16634:224014) draws both of its types that hold controls with them top right -
   Gallery (17102:19342) its full-screen Button utility in a container padded by container/padding-sm at the
   frame's end, Product functions (16634:224015) its function buttons the same way - and the page's design notes
   say "top right corner" for both. visual.css pins .kompan-visual__action top and left by --spacing-xl, which is
   16px like padding-sm on a desktop but 14px against 10px at 1024px and below. Delete it when a
   Kompan.UI.Design release does the same; The_action_sits_in_the_top_right_corner_Figma_draws and
   At_1024px_and_below_the_action_keeps_Figmas_container_padding keep passing then. */
.kompan-visual__action {
    top: var(--container-padding-sm);
    left: auto;
    right: var(--container-padding-sm);
}

/* 42. A video is dimmed only under the pointer. Figma's design note "Default hover" (17068:10315) says the 5%
   black is a hover effect, "added to both image and video media, but below other UI (Play button)", and its
   overlay set draws a resting video as Video/play (16724:27010) - the Play controller and no fill - beside
   Hover Video/play (16634:224013), the same over utility/alpha-black-5. visual.css shows a video's whole
   overlay, fill included, at all times. The overlay stays shown, since it holds the Play button; only its fill
   waits for the pointer, or for focus inside, which reveals what the pointer does here as it does in
   visual.css. transition-property rather than the shorthand, so that upstream's reduced-motion
   `transition: none` still zeroes the duration. Delete it when a Kompan.UI.Design release does the same;
   The_video_shows_its_centred_play_button_undimmed_at_rest and
   Hovering_a_video_dims_it_with_Figmas_alpha_black_5_below_the_play_button keep passing then. */
.kompan-visual_video > .kompan-visual__overlay {
    background-color: transparent;
    transition-property: opacity, background-color;
}

.kompan-visual_video:hover > .kompan-visual__overlay,
.kompan-visual_video:focus-within > .kompan-visual__overlay {
    background-color: var(--kompan-visual-overlay);
}

/* 43. The Play button's shadows are Figma's at its size. Figma's Video / Main Controller draws the 84px Play button
   as its 56px primary Button at 1.5x (22017:6133, in 16656:224171), so the drop shadow is 0 1.5px 3px and the
   bottom inset 3px, where button.css gives every button 0 1px 2px and 2px; the 1px alpha-black-20 ring is the
   same in both. visual.css enlarges the button and keeps button.css's shadow. The 1.5px white-12% stroke Figma
   also draws is the Button's empty gradient border (docs/design-system-alignment.md D-CH4), which no KompanButton
   draws, so it stays out. Delete it when a Kompan.UI.Design release does the same;
   The_play_buttons_shadows_are_Figmas_at_its_size keeps passing then. */
.kompan-visual__play {
    --kompan-button-shadow:
        0 1.5px 3px 0 var(--color-utility-alpha-black-5),
        inset 0 -3px 0 0 var(--color-utility-alpha-black-5),
        inset 0 0 0 1px var(--color-utility-alpha-black-20);
}

/* ---- tag.css ------------------------------------------------------------------------------ */

/* 38. The remove button sits 3px after the tag's content at every size. Figma's X close variants put their
   _Tag close X 3px after the Content at sm, md and lg alike (3307:418112, 3307:418115, 3307:418118 and every
   other X close variant of the set), and bind no variable to it; tag.css spaces every part by the size's gap,
   so the button sat 4, 5 and 6px after the text. Delete it when tag.css does the same;
   The_remove_button_sits_Figmas_3px_after_the_content keeps passing then. */
.kompan-tag__close {
    margin-inline-start: calc(3px - var(--kompan-tag-gap));
}

/* 39. The leading part's inset, per size, and none after a checkbox. Figma insets a tag's checkbox 5, 4 and 5px
   from its start at sm, md and lg (3309:407018, 3309:407029, 3309:407040), its dot 6, 7 and 9px (3307:417518,
   3307:417771, 3307:417933) and its flag or avatar 4, 5 and 7px (3307:417521, 3307:417775, 3307:417937;
   3307:417524, 3307:417779, 3307:417941), binding spacing xs at md for the checkbox, sm at sm for the dot and xs
   at sm for the image, and no variable otherwise. tag.css pulls each part in by one edge per part - 4px for the
   checkbox and the image, 6px for the dot - so md and lg sat 1 to 3px off. It pulls a dot or an image in after a
   checkbox too, where Figma keeps the content's gap (3309:406663, 3309:406705, 3309:406747): the two sat 2 to 6px
   apart where Figma has 4 to 6px. A subtle tag's parts sit at its 2px padding, as tag.css already draws them.
   Delete it when tag.css does the same; The_leading_part_sits_where_Figma_insets_it and
   A_dot_or_an_image_after_the_checkbox_keeps_the_contents_gap keep passing then. */
.kompan-tag:not(.kompan-tag_subtle) .kompan-tag__checkbox {
    margin-left: calc(5px - var(--kompan-tag-px));
}

.kompan-tag_md:not(.kompan-tag_subtle) .kompan-tag__checkbox {
    margin-left: calc(var(--spacing-xs) - var(--kompan-tag-px));
}

.kompan-tag:not(.kompan-tag_subtle) .kompan-tag__dot {
    margin-left: calc(var(--spacing-sm) - var(--kompan-tag-px));
}

.kompan-tag_md:not(.kompan-tag_subtle) .kompan-tag__dot {
    margin-left: calc(7px - var(--kompan-tag-px));
}

.kompan-tag_lg:not(.kompan-tag_subtle) .kompan-tag__dot {
    margin-left: calc(9px - var(--kompan-tag-px));
}

.kompan-tag:not(.kompan-tag_subtle) .kompan-tag__icon,
.kompan-tag:not(.kompan-tag_subtle) .kompan-tag__avatar {
    margin-left: calc(var(--spacing-xs) - var(--kompan-tag-px));
}

.kompan-tag_md:not(.kompan-tag_subtle) .kompan-tag__icon,
.kompan-tag_md:not(.kompan-tag_subtle) .kompan-tag__avatar {
    margin-left: calc(5px - var(--kompan-tag-px));
}

.kompan-tag_lg:not(.kompan-tag_subtle) .kompan-tag__icon,
.kompan-tag_lg:not(.kompan-tag_subtle) .kompan-tag__avatar {
    margin-left: calc(7px - var(--kompan-tag-px));
}

.kompan-tag .kompan-tag__checkbox ~ .kompan-tag__dot,
.kompan-tag .kompan-tag__checkbox ~ .kompan-tag__icon,
.kompan-tag .kompan-tag__checkbox ~ .kompan-tag__avatar {
    margin-left: 0;
}

/* 40. An md tag's count ends 3px from the tag's end. Figma's md Count variants end their count chip 3px in
   (3307:418370 and every md Count variant), unbound, where sm and lg bind xs; tag.css pulls every count in by one
   edge, 4px at every size. Delete it when tag.css does the same; The_count_ends_where_Figma_insets_it keeps
   passing then. */
.kompan-tag_md:not(.kompan-tag_subtle) .kompan-tag__count {
    margin-right: calc(3px - var(--kompan-tag-px));
}

/* 44. The checkbox's tick is 10, 12 and 14px. Figma's tag checkbox draws its check glyph 10px in the 14px box at
   sm, 12px in the 16px box at md and 14px in the 18px box at lg (23378:8683, 23378:8697, 23378:8711), unbound;
   tag.css scales it to 72% of the box, which is 10, 11.5 and 13px. Delete it when tag.css does the same;
   The_checkbox_tick_is_Figmas_size keeps passing then. */
.kompan-tag__checkbox {
    background-size: 10px;
}

.kompan-tag_md .kompan-tag__checkbox {
    background-size: 12px;
}

.kompan-tag_lg .kompan-tag__checkbox {
    background-size: 14px;
}

/* 45. A selected tag's remove button is 40% white. Figma sets the close's variable mode to Dark in every
   selected variant and binds button/secondary-subtle/fg-tertiary - rgba(255, 255, 255, 0.4) in that mode
   (23378:8691, 23378:8785); tag.css gives a selected tag's close fg-active, solid white. KompanTag puts the
   design system's .dark on a selected tag's close, as Figma does, and this reads the token there; tag.css's
   hover is kept. Delete it when tag.css does the same;
   A_selected_tags_remove_button_is_Figmas_dark_fg_tertiary keeps passing then. */
.kompan-tag__close.dark:not(:hover) {
    color: var(--color-button-secondary-subtle-fg-tertiary);
}

/* 46. Under forced colours a tag has no edge, a selected one looks like any other and focus shows nowhere
   (ADR-0057 decision 3). tag.css draws the edge, the checkbox's box, the selected surface and the focus rings with
   box-shadows and fills, which the mode discards or repaints, so a toggle tag read as plain text, a checked one as
   unchecked and a focused one as unfocused (WCAG 1.4.11, 2.4.7). System colours are the palette that survives: the
   text's colour for an edge, Highlight for a selection - as the platform's own controls and kompan-checkbox.css
   draw one - GrayText when disabled, and an outline for focus, which takes no room. Nothing here applies outside
   the media query. Delete it when tag.css draws the same under forced colours;
   Under_forced_colours_a_tag_keeps_its_edge_its_selection_and_its_focus measures the outcome. */
@media (forced-colors: active) {
    .kompan-tag:not(.kompan-tag_subtle) {
        outline: var(--stroke-sm) solid currentColor;
        outline-offset: calc(-1 * var(--stroke-sm));
    }

    .kompan-tag_selected,
    .kompan-tag[aria-pressed="true"],
    .kompan-tag:has(.kompan-tag__checkbox:checked) {
        forced-color-adjust: none;
        background: Highlight;
        color: HighlightText;
    }

    .kompan-tag:disabled,
    .kompan-tag[aria-disabled="true"],
    .kompan-tag:has(.kompan-tag__checkbox:disabled) {
        color: GrayText;
    }

    .kompan-tag_selected:disabled,
    .kompan-tag_selected[aria-disabled="true"],
    .kompan-tag[aria-pressed="true"]:disabled,
    .kompan-tag:has(.kompan-tag__checkbox:checked:disabled) {
        background: GrayText;
        color: Canvas;
    }

    .kompan-tag__checkbox {
        outline: var(--stroke-sm) solid currentColor;
        outline-offset: calc(-1 * var(--stroke-sm));
    }

    .kompan-tag__checkbox:checked {
        forced-color-adjust: none;
        background-color: Highlight;
    }

    .kompan-tag:focus-visible,
    .kompan-tag:has(.kompan-tag__checkbox:focus-visible),
    .kompan-tag:has(> .kompan-tag__main:focus-visible),
    .kompan-tag__close:focus-visible {
        outline: var(--stroke-md) solid Highlight;
        outline-offset: var(--stroke-md);
    }
}

/* ---- toggle.css --------------------------------------------------------------------------- */

/* Measured against Figma's Toggle set, node 1102:4208 (64 variants), and pinned by KompanSwitchFigmaParityTests
   against Figma/toggle.figma.json (PM-809). KompanSwitch and KompanTriStateSwitch wear toggle.css. */

/* 32. An on switch of Type=Default has no border round its knob. toggle.css gives every :checked knob a hairline
   border in the on track's colour, which is right for Slim - Figma rings its knob in input/bg-selected, and in
   bg-selected-hover under the pointer - and wrong for Default, whose knob Figma draws plain white in every
   Pressed=True variant (122:3301, 1102:4096 and their Hover and Focus twins): the red ring made the white knob read
   2px narrower than Figma's 16 and 20px. This restores the transparent border toggle.css itself declares for
   Default; the slim modifier may sit on the input or on its label. Delete it when toggle.css keeps the checked
   border to Slim; The_knob_of_an_on_Default_switch_has_no_border keeps passing then. */
.kompan-toggle__input:checked:not(.kompan-toggle_slim):not(.kompan-toggle_slim > *) {
    --kompan-toggle-knob-border: transparent;
}

/* 33. A switch with no text is the size of its track. toggle.css moves every track down by half the difference
   between the first line of text and the track, which centres it on that line - Figma's 2px "Toggle wrapper" round
   a Slim track beside text (7923:539854). With no text there is no line: Figma's Text=False variants are the track
   alone, 32x16 and 40x20 for Slim (7923:539746, 7923:539739), where the label measured 18 and 22px with the track
   2px down - and under 1024px, where the type scale shrinks, a Default track sat 1px above its own label. Delete it
   when toggle.css centres only beside text; A_switch_with_no_text_is_the_size_of_its_track keeps passing then. */
.kompan-toggle:not(:has(> .kompan-toggle__text)) > .kompan-toggle__input {
    margin-top: 0;
}

/* 34. Under forced colours a switch vanishes (ADR-0056, docs/figma-gaps.md G17). toggle.css paints the track and
   the knob with backgrounds and draws focus as a box-shadow with outline: none, and forced-colours mode repaints
   the first to the page colour and drops the second: track and knob were gone, on read as off, and focus showed
   nowhere (WCAG 1.4.11, 2.4.7). System colours are the palette that survives: the track gets a CanvasText edge
   and a CanvasText knob; on is Highlight with a HighlightText knob; disabled is GrayText, at the knob's full
   opacity, since halving a system colour makes one the user's palette does not name; and focus is the outline
   KompanButton, KompanInputField and the checkbox draw, which never moves the knob. Nothing here applies outside
   the media query. Delete it when toggle.css draws the same under forced colours; KompanSwitchForcedColorsTests
   measures the outcome. */
@media (forced-colors: active) {
    .kompan-toggle__input {
        outline: var(--stroke-sm) solid CanvasText;
        outline-offset: calc(-1 * var(--stroke-sm));
    }

    .kompan-toggle__input::before {
        background: CanvasText;
    }

    .kompan-toggle__input:checked,
    .kompan-toggle__input:checked:hover {
        outline-color: Highlight;
        background: Highlight;
    }

    .kompan-toggle__input:checked::before {
        background: HighlightText;
    }

    .kompan-toggle__input:disabled {
        outline-color: GrayText;
    }

    .kompan-toggle__input:disabled::before {
        background: GrayText;
        opacity: 1;
    }

    .kompan-toggle__input:disabled:checked {
        outline-color: GrayText;
        background: GrayText;
    }

    .kompan-toggle__input:disabled:checked::before {
        background: Canvas;
    }

    .kompan-toggle__input:focus-visible {
        outline: var(--stroke-md) solid Highlight;
        outline-offset: var(--stroke-md);
    }
}

/* ---- avatar.css --------------------------------------------------------------------------- */

/* Measured against Figma's Avatar (19:1012, 72 variants), Avatar group (1274:812), _Avatar add button (1102:4864) and
   Avatar label group (82:2793), read 2026-10-17, and pinned by KompanAvatarFigmaParityTests against
   Figma/avatar.figma.json (PM-821, ADR-0081). KompanAvatar, KompanAvatarGroup and KompanAvatarLabelGroup wear avatar.css;
   what it has no part for is kompan-avatar.css's. */

/* 51. The initials are the size's text style, in fg-quaternary. Figma sets them in Text xs, sm, md, lg and xl Semibold
   at xs to xl and in Display xs Semibold at 2xl (19:1261, 19:1259, 19:1257, 19:1255, 19:1253, 1217:104711), bound to
   fg-quaternary; avatar.css sizes them one step smaller - xxs at xs up to xl at 2xl - at the inherited line height, in
   fg-primary. Delete it when avatar.css does the same;
   The_initials_are_Figmas_text_style_and_colour_at_every_size keeps passing then. */
.kompan-avatar__initials {
    color: var(--color-fg-quaternary);
    white-space: nowrap;
}

.kompan-avatar_xs .kompan-avatar__initials {
    font-family: var(--typography-styles-text-xs-semibold-font-family);
    font-size: var(--typography-styles-text-xs-semibold-font-size);
    font-weight: var(--typography-styles-text-xs-semibold-font-weight);
    line-height: var(--typography-styles-text-xs-semibold-line-height);
    letter-spacing: var(--typography-styles-text-xs-semibold-letter-spacing);
}

.kompan-avatar_sm .kompan-avatar__initials {
    font-family: var(--typography-styles-text-sm-semibold-font-family);
    font-size: var(--typography-styles-text-sm-semibold-font-size);
    font-weight: var(--typography-styles-text-sm-semibold-font-weight);
    line-height: var(--typography-styles-text-sm-semibold-line-height);
    letter-spacing: var(--typography-styles-text-sm-semibold-letter-spacing);
}

.kompan-avatar_md .kompan-avatar__initials {
    font-family: var(--typography-styles-text-md-semibold-font-family);
    font-size: var(--typography-styles-text-md-semibold-font-size);
    font-weight: var(--typography-styles-text-md-semibold-font-weight);
    line-height: var(--typography-styles-text-md-semibold-line-height);
    letter-spacing: var(--typography-styles-text-md-semibold-letter-spacing);
}

.kompan-avatar_lg .kompan-avatar__initials {
    font-family: var(--typography-styles-text-lg-semibold-font-family);
    font-size: var(--typography-styles-text-lg-semibold-font-size);
    font-weight: var(--typography-styles-text-lg-semibold-font-weight);
    line-height: var(--typography-styles-text-lg-semibold-line-height);
    letter-spacing: var(--typography-styles-text-lg-semibold-letter-spacing);
}

.kompan-avatar_xl .kompan-avatar__initials {
    font-family: var(--typography-styles-text-xl-semibold-font-family);
    font-size: var(--typography-styles-text-xl-semibold-font-size);
    font-weight: var(--typography-styles-text-xl-semibold-font-weight);
    line-height: var(--typography-styles-text-xl-semibold-line-height);
    letter-spacing: var(--typography-styles-text-xl-semibold-letter-spacing);
}

.kompan-avatar_2xl .kompan-avatar__initials {
    font-family: var(--typography-styles-display-xs-semibold-font-family);
    font-size: var(--typography-styles-display-xs-semibold-font-size);
    font-weight: var(--typography-styles-display-xs-semibold-font-weight);
    line-height: var(--typography-styles-display-xs-semibold-line-height);
    letter-spacing: var(--typography-styles-display-xs-semibold-letter-spacing);
}

/* 52. Nothing rings the content but the contrast border, and nothing fills behind a photo. avatar.css gives the photo,
   the initials and the placeholder an always-on inset ring of 1px border-secondary and fills the photo's box with
   bg-secondary; Figma draws its Contrast border as a layer of its own, 0.5px or 0.75px of border-tertiary that the
   Contrast border property turns off (6578:297325), and fills only the initials' and the placeholder's circle. The
   layer is kompan-avatar.css's .kompan-avatar__border. Delete it when avatar.css draws the same;
   The_contrast_border_is_Figmas_hairline_and_nothing_else_rings_the_content keeps passing then. */
.kompan-avatar__image,
.kompan-avatar__initials,
.kompan-avatar__icon {
    box-shadow: none;
}

.kompan-avatar__image {
    background: none;
}

/* 53. The placeholder's glyph is 16, 20, 24, 28, 32 and 32px, in fg-quaternary. Figma draws user-01 - and the AI bot's
   message-smile-square, in the same place - 4, 6, 8, 10, 12 and 16px in from the edge at xs to 2xl (1034:394,
   1034:397, 1034:405, 1034:414, 1034:492, 1217:104682; 23983:13261 and its siblings), the placeholder's bound to
   fg-quaternary; avatar.css scales the glyph to 55% of the avatar - 13 to 35px - and draws the placeholder's in
   fg-tertiary. The AI bot's colour is avatar.css's already. Delete it when avatar.css does the same;
   The_placeholder_and_the_ai_bot_are_Figmas_glyph_at_every_size keeps passing then. */
.kompan-avatar__icon {
    color: var(--color-fg-quaternary);
}

.kompan-avatar_xs .kompan-avatar__icon > svg {
    width: 16px;
    height: 16px;
}

.kompan-avatar_sm .kompan-avatar__icon > svg {
    width: 20px;
    height: 20px;
}

.kompan-avatar_md .kompan-avatar__icon > svg {
    width: 24px;
    height: 24px;
}

.kompan-avatar_lg .kompan-avatar__icon > svg {
    width: 28px;
    height: 28px;
}

.kompan-avatar_xl .kompan-avatar__icon > svg,
.kompan-avatar_2xl .kompan-avatar__icon > svg {
    width: 32px;
    height: 32px;
}

/* 54. The online indicator is a quarter of the avatar, fg-success-secondary inside a 1.5px ring of bg-primary. Figma's
   Online indicator is 6, 8, 10, 12, 14 and 16px at xs to 2xl, in the corner, with its ring drawn inside it (1034:369,
   1034:366, 1034:365, 1034:367, 1034:364, 1216:2775) and bound to fg-success-secondary and bg-primary; avatar.css makes
   it 35% across, in bg-success-solid, with a 2px ring outside it. The ring is an inset shadow, not a border, because
   Chrome rounds a border down to whole device pixels and draws Figma's 1.5px as 1px. Delete it when avatar.css does the
   same; The_online_indicator_is_a_quarter_of_the_avatar_in_Figmas_colours keeps passing then. */
.kompan-avatar__status_online {
    width: 25%;
    height: 25%;
    background: var(--color-fg-success-secondary);
    box-shadow: inset 0 0 0 1.5px var(--color-bg-primary);
}

/* 55. The company badge is round, 10 to 20px, in a 1.5px ring of border-solid, 2px out of the corner. Figma's
   _Avatar company icon is 10, 12, 14, 16, 18 and 20px at xs to 2xl (1036:5, 1036:15, 1036:25, 1036:35, 1036:45,
   1216:2799), a circle with the logo inside a border-solid ring of 1.5px - 1.667px at 2xl - set 2px beyond the
   avatar's bottom and right; avatar.css makes it 35% across, a rounded square in bg-solid with a 2px ring of bg-primary,
   in the corner. The ring is the badge's padding over a border-solid fill, the logo inside it: a border would be drawn
   1px by Chrome, which rounds borders to whole device pixels, and an inset shadow would be painted under the logo. Delete
   it when avatar.css does the same; The_company_badge_is_Figmas_size_ring_and_offset keeps passing then. */
.kompan-avatar__status_company {
    box-sizing: border-box;
    right: -2px;
    bottom: -2px;
    overflow: hidden;
    padding: 1.5px;
    border-radius: var(--radius-full);
    background: var(--color-border-solid);
    box-shadow: none;
}

.kompan-avatar_xs .kompan-avatar__status_company {
    width: 10px;
    height: 10px;
}

.kompan-avatar_sm .kompan-avatar__status_company {
    width: 12px;
    height: 12px;
}

.kompan-avatar_md .kompan-avatar__status_company {
    width: 14px;
    height: 14px;
}

.kompan-avatar_lg .kompan-avatar__status_company {
    width: 16px;
    height: 16px;
}

.kompan-avatar_xl .kompan-avatar__status_company {
    width: 18px;
    height: 18px;
}

.kompan-avatar_2xl .kompan-avatar__status_company {
    width: 20px;
    height: 20px;
    padding: 1.667px;
}

/* 56. The verified tick is Figma's rosette, 10 to 20px, in the corner. Figma's Verified tick is 10, 12, 14, 16, 18 and
   20px at xs to 2xl, with no ring and nothing behind it, in the avatar's bottom-right corner - 1px beyond it at xs
   (3302:420387, 3302:420376, 3302:420365, 3302:420354, 3302:420343, 3302:419216); avatar.css draws a 35% disc of
   utility/blue-600 in a 2px ring with a check character in it, and shrinks any svg it holds to 64%. The rosette's
   colours are kompan-avatar.css's. Delete it when avatar.css does the same;
   The_verified_tick_is_Figmas_size_and_offset keeps passing then. */
.kompan-avatar__status_verified {
    background: none;
    box-shadow: none;
}

.kompan-avatar__status_verified::after {
    content: none;
}

.kompan-avatar__status_verified > svg {
    width: 100%;
    height: 100%;
}

.kompan-avatar_xs .kompan-avatar__status_verified {
    right: -1px;
    bottom: -1px;
    width: 10px;
    height: 10px;
}

.kompan-avatar_sm .kompan-avatar__status_verified {
    width: 12px;
    height: 12px;
}

.kompan-avatar_md .kompan-avatar__status_verified {
    width: 14px;
    height: 14px;
}

.kompan-avatar_lg .kompan-avatar__status_verified {
    width: 16px;
    height: 16px;
}

.kompan-avatar_xl .kompan-avatar__status_verified {
    width: 18px;
    height: 18px;
}

.kompan-avatar_2xl .kompan-avatar__status_verified {
    width: 20px;
    height: 20px;
}

/* 57. A group overlaps its avatars by 4, 8 and 12px and rings each inside its own edge; the count is one more avatar.
   Figma's Avatar group pulls each avatar 4, 8 and 12px over the one before it at xs, sm and md, draws a 1.5px ring of
   bg-primary inside each avatar's 24, 32 or 40px and a 2px one inside the count's, and sets the count as the
   avatar's Text variant in text-tertiary (1274:786, 1274:816, 1274:930; 1274:805, 1274:835, 1274:949); avatar.css
   overlaps by 8px at every size and draws a 2px ring outside every child, and makes the count 40px at every size, in
   fg-primary. The add button sits 8px after the avatars - the group's gap md - where avatar.css overlaps and rings it
   too. RTL overlaps the other way. The ring is the avatar's padding over a bg-primary fill, with the contrast border
   moved in to the photo's edge, because Chrome draws a 1.5px border as 1px. The rules key on the avatar's markup, so a
   page writing avatar.css's own count - a plain span - keeps avatar.css's 40px and ring rather than losing both. Delete
   it when avatar.css does the same; The_group_overlaps_and_rings_its_avatars_as_Figma_draws_them,
   The_remaining_count_is_an_avatar_of_the_groups_size, The_add_button_alone_starts_the_row and
   A_right_to_left_group_overlaps_the_other_way keep passing then, and
   A_hand_written_avatar_groups_count_keeps_its_size_and_its_ring pins what it leaves alone. */
.kompan-avatar-group > .kompan-avatar,
.kompan-avatar-group > .kompan-avatar-group__add,
.kompan-avatar-group > .kompan-avatar-group__action {
    box-shadow: none;
}

.kompan-avatar-group > .kompan-avatar {
    --kompan-avatar-group-ring: 1.5px;
    box-sizing: border-box;
    padding: var(--kompan-avatar-group-ring);
    background: var(--color-bg-primary);
}

.kompan-avatar-group > .kompan-avatar-group__overflow {
    --kompan-avatar-group-ring: 2px;
}

.kompan-avatar-group > .kompan-avatar > .kompan-avatar__border {
    inset: var(--kompan-avatar-group-ring);
}

.kompan-avatar-group_xs > * + * {
    margin-left: 0;
    margin-inline-start: -4px;
}

.kompan-avatar-group_sm > * + * {
    margin-left: 0;
    margin-inline-start: -8px;
}

.kompan-avatar-group_md > * + * {
    margin-left: 0;
    margin-inline-start: -12px;
}

.kompan-avatar-group > * + .kompan-avatar-group__add,
.kompan-avatar-group > * + .kompan-avatar-group__action {
    margin-left: 0;
    margin-inline-start: var(--spacing-md);
}

.kompan-avatar.kompan-avatar-group__overflow {
    width: var(--kompan-avatar-size);
    height: var(--kompan-avatar-size);
}

.kompan-avatar-group__overflow .kompan-avatar__initials {
    color: var(--color-text-tertiary);
}

/* 58. The add button is the group's size, in the secondary-subtle button's colours, with a 16 or 20px plus. Figma's
   _Avatar add button is 24, 32 and 40px at xs, sm and md (1102:4863, 1274:686, 1274:883): a 1px dashed stroke of
   button/secondary-subtle/border round button/secondary-subtle/bg, the plus 16, 16 and 20px in
   button/secondary-subtle/fg-tertiary; avatar.css makes it 40px at every size, transparent, its dash in
   border-secondary, its glyph 45% across in fg-tertiary. Its other states are kompan-avatar.css's. Delete it when
   avatar.css does the same; The_add_button_is_Figmas_size_and_colours_at_rest keeps passing then. */
.kompan-avatar-group__add {
    border: var(--stroke-sm) dashed var(--color-button-secondary-subtle-border);
    background: var(--color-button-secondary-subtle-bg);
    color: var(--color-button-secondary-subtle-fg-tertiary);
}

.kompan-avatar-group__add > svg {
    width: 16px;
    height: 16px;
}

.kompan-avatar-group_xs .kompan-avatar-group__add {
    width: 1.5rem;
    height: 1.5rem;
}

.kompan-avatar-group_sm .kompan-avatar-group__add {
    width: 2rem;
    height: 2rem;
}

.kompan-avatar-group_md .kompan-avatar-group__add > svg {
    width: 20px;
    height: 20px;
}

/* 59. A label group's gap and two lines are the size's. Figma spaces the avatar from the text by spacing md, md, lg
   and xl at sm, md, lg and xl, and sets the name in Text sm, sm, md and lg Semibold over the supporting text in Text
   xs, sm, md and md Regular (1142:92901, 1109:487, 1142:93198, 1211:422); avatar.css spaces them by spacing lg and
   sets both lines in sm at a line height of 1.25 at every size. Its colours, fg-primary and fg-tertiary, equal Figma's
   text-primary and text-tertiary in both themes, so they stay. Delete it when avatar.css does the same;
   The_label_group_is_Figmas_gap_and_text_styles_at_every_size keeps passing then. */
.kompan-avatar-label_sm,
.kompan-avatar-label_md {
    gap: var(--spacing-md);
}

.kompan-avatar-label_xl {
    gap: var(--spacing-xl);
}

.kompan-avatar-label_sm .kompan-avatar-label__name,
.kompan-avatar-label_md .kompan-avatar-label__name {
    font-family: var(--typography-styles-text-sm-semibold-font-family);
    font-size: var(--typography-styles-text-sm-semibold-font-size);
    font-weight: var(--typography-styles-text-sm-semibold-font-weight);
    line-height: var(--typography-styles-text-sm-semibold-line-height);
    letter-spacing: var(--typography-styles-text-sm-semibold-letter-spacing);
}

.kompan-avatar-label_lg .kompan-avatar-label__name {
    font-family: var(--typography-styles-text-md-semibold-font-family);
    font-size: var(--typography-styles-text-md-semibold-font-size);
    font-weight: var(--typography-styles-text-md-semibold-font-weight);
    line-height: var(--typography-styles-text-md-semibold-line-height);
    letter-spacing: var(--typography-styles-text-md-semibold-letter-spacing);
}

.kompan-avatar-label_xl .kompan-avatar-label__name {
    font-family: var(--typography-styles-text-lg-semibold-font-family);
    font-size: var(--typography-styles-text-lg-semibold-font-size);
    font-weight: var(--typography-styles-text-lg-semibold-font-weight);
    line-height: var(--typography-styles-text-lg-semibold-line-height);
    letter-spacing: var(--typography-styles-text-lg-semibold-letter-spacing);
}

.kompan-avatar-label_sm .kompan-avatar-label__email {
    font-family: var(--typography-styles-text-xs-regular-font-family);
    font-size: var(--typography-styles-text-xs-regular-font-size);
    font-weight: var(--typography-styles-text-xs-regular-font-weight);
    line-height: var(--typography-styles-text-xs-regular-line-height);
    letter-spacing: var(--typography-styles-text-xs-regular-letter-spacing);
}

.kompan-avatar-label_md .kompan-avatar-label__email {
    font-family: var(--typography-styles-text-sm-regular-font-family);
    font-size: var(--typography-styles-text-sm-regular-font-size);
    font-weight: var(--typography-styles-text-sm-regular-font-weight);
    line-height: var(--typography-styles-text-sm-regular-line-height);
    letter-spacing: var(--typography-styles-text-sm-regular-letter-spacing);
}

.kompan-avatar-label_lg .kompan-avatar-label__email,
.kompan-avatar-label_xl .kompan-avatar-label__email {
    font-family: var(--typography-styles-text-md-regular-font-family);
    font-size: var(--typography-styles-text-md-regular-font-size);
    font-weight: var(--typography-styles-text-md-regular-font-weight);
    line-height: var(--typography-styles-text-md-regular-line-height);
    letter-spacing: var(--typography-styles-text-md-regular-letter-spacing);
}

/* 60. Under forced colours the online indicator vanishes (ADR-0057 decision 3). It is a fill with an inset ring, and
   the mode repaints a fill in the page's Canvas and discards a box-shadow, so on initials, the placeholder or the AI bot
   the dot was Canvas on Canvas, and on a photo a blank disc no different from an empty company badge (WCAG 1.4.11).
   The system palette is the design there: a CanvasText dot in a Canvas ring, as kompan-avatar.css draws a company
   badge without a logo. Nothing here applies outside the media query. Delete it when avatar.css draws the same;
   Under_forced_colours_every_status_still_shows measures the outcome. */
@media (forced-colors: active) {
    .kompan-avatar__status_online {
        forced-color-adjust: none;
        background: CanvasText;
        box-shadow: inset 0 0 0 1.5px Canvas;
    }
}

/* 61. The avatar itself is round. Figma rounds the Avatar's own frame with radius/full in every variant (19:1016,
   3302:419182, 1036:199, read 2026-10-19), not only the photo, the fill and the contrast border inside it; avatar.css
   rounds those and leaves the root square. Nothing of the avatar's own paints the root, so nothing looked wrong here,
   but a ring a page draws on the avatar - KompanSalesTools marks an editing viewer and a platform admin with a
   box-shadow - came out square round a round face. Delete it when avatar.css does the same;
   The_avatar_itself_is_round_so_a_ring_the_page_draws_on_it_is_round keeps passing then. */
.kompan-avatar {
    border-radius: var(--radius-full);
}

/* =============================================================================================
   Behaviour this library owns for the design system's components (ADR-0057 decision 4). Not
   corrections: Figma draws a component and never says what it does under pressure, or which element
   carries it, so no value Figma states is being restored here and nothing deletes these but a
   design-system rule that does the same.
   ============================================================================================= */

/* An anchor button and a <button> space their label alike. button.css never sets letter-spacing, so an
   anchor inherited whatever the page had (MudBlazor puts .01071em on body: 0.15px at 14px) while a
   <button> took the UA's `normal`, and the same button was set differently depending on whether it had
   an Href. Each size reads the letter spacing of the package's Text Semibold style at its type size -
   lg reads md's, because its type is md's (16px). That value is the package's, not a reading of Figma:
   the Button's Figma bindings (button-tokens.figma.json) carry no letter spacing, and the next read of
   node 3287:427074 is to record it (docs/deferred-work.md). KompanButtonDesignSystemStyleTests fails if
   the token disappears or the page's spacing leaks through. Goes when button.css sets it itself. */
.kompan-button_xs {
    letter-spacing: var(--typography-styles-text-xs-semibold-letter-spacing);
}

.kompan-button_sm {
    letter-spacing: var(--typography-styles-text-sm-semibold-letter-spacing);
}

.kompan-button_md,
.kompan-button_lg {
    letter-spacing: var(--typography-styles-text-md-semibold-letter-spacing);
}

/* A button label that does not fit is cut with an ellipsis. button.css sets white-space: nowrap - Figma's
   button is one line - and nothing else, so a long label painted past the button's own edges, and in a
   flex row the button would not shrink below its text. Only buttons with a Text label: an icon-only
   button must keep its size in a crowded row, and ChildContent is the caller's layout.
   max-width: 100% and deliberately not min-width: 0. A flex item's automatic minimum is its content
   size clamped by a definite max-width, so the button still shrinks to its container once it alone is
   wider than the container - but no sooner. With min-width: 0 it shared the shrinking with its
   neighbours in proportion to its width, and a label was cut beside a paragraph that could still have
   wrapped. overflow: clip rather than hidden, because nothing should ever scroll a label and a clip box
   is not a scroll container, whose baseline engines have not always taken - KompanButtonLayoutTests
   keeps an inline link on its sentence's line either way. The full label stays in the DOM, so it is
   still the button's accessible name. */
.kompan-button:has(> .kompan-button__label) {
    max-width: 100%;
}

.kompan-button__label {
    min-width: 0;
    overflow: clip;
    text-overflow: ellipsis;
}

/* The label's and the hint's letter spacing, from the text styles they are set in. input-fields.css
   declares none, so every .kompan-input__label and __hint inherited MudBlazor's body typography -
   0.01071em, 0.15px at 14px - where Figma's styles carry 0. Here, not in KompanInputField's scoped sheet,
   because the select family and the date-time picker wear the same label and hint and never match that
   sheet's selectors: their labels kept MudBlazor's spacing beside an input field's that had lost it.
   Behaviour, not a correction, since no design-system rule sets it. Pinned by
   A_fields_label_is_the_input_fields_label_the_same_distance_above_it,
   The_Required_hint_is_set_in_the_hint_style_not_MudBlazors_letter_spacing and
   No_part_of_the_field_takes_MudBlazors_letter_spacing. */
.kompan-input__label {
    letter-spacing: var(--typography-styles-text-sm-medium-letter-spacing);
}

.kompan-input__hint {
    letter-spacing: var(--typography-styles-text-sm-regular-letter-spacing);
}

/* And the field's own parts - the text, the add-on, the inline prefix and the trailing cells - each in its
   size's text style: Text sm at sm, Text md at md and at lg, which keeps md's type. Only KompanInputField
   renders them, but they are the design system's parts - the prefix is Figma's, which input-fields.css does
   not model yet - so they sit here with the label and the hint rather than in its scoped sheet (ADR-0057).
   Pinned by No_part_of_the_field_takes_MudBlazors_letter_spacing. */
.kompan-input__field,
.kompan-input__addon,
.kompan-input__prefix,
.kompan-input__select,
.kompan-input__button {
    letter-spacing: var(--typography-styles-text-md-regular-letter-spacing);
}

.kompan-input_sm .kompan-input__field,
.kompan-input_sm .kompan-input__addon,
.kompan-input_sm .kompan-input__prefix,
.kompan-input_sm .kompan-input__select,
.kompan-input_sm .kompan-input__button {
    letter-spacing: var(--typography-styles-text-sm-regular-letter-spacing);
}

/* A switch's label and supporting text in their text styles' letter spacing, as the field's are above. toggle.css
   sets their type and no letter spacing, so they inherited MudBlazor's body 0.15px where Figma's Text sm and md
   styles carry 0 (PM-809). Behaviour, not a correction, since no design-system rule sets it. Pinned by
   The_text_is_set_in_Figmas_text_styles. */
.kompan-toggle__label {
    letter-spacing: var(--typography-styles-text-sm-medium-letter-spacing);
}

.kompan-toggle__hint {
    letter-spacing: var(--typography-styles-text-sm-regular-letter-spacing);
}

.kompan-toggle_md .kompan-toggle__label {
    letter-spacing: var(--typography-styles-text-md-medium-letter-spacing);
}

.kompan-toggle_md .kompan-toggle__hint {
    letter-spacing: var(--typography-styles-text-md-regular-letter-spacing);
}

/* A tag that is removable as well as selectable. tag.css draws a tag as one element - a button, a label or a span
   - and a remove button inside the first two would nest interactive content, so KompanTag gives such a tag a span
   root holding the toggle button or the checkbox's label, .kompan-tag__main, beside the remove button. The main
   control lays its parts out as the tag would, in the tag's gap, and the tag's hover and focus ring - which tag.css
   draws for a button or label root - are drawn on the root when the main control has them. Pinned by
   A_removable_toggle_tag_rings_the_whole_tag_when_its_toggle_has_focus and
   A_removable_tag_has_two_tab_stops_the_tag_then_its_remove_button. */
.kompan-tag__main {
    display: inline-flex;
    align-items: center;
    gap: inherit;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    cursor: pointer;
}

.kompan-tag__main:focus-visible {
    outline: none;
}

.kompan-tag__main:disabled,
.kompan-tag[aria-disabled="true"] > .kompan-tag__main {
    cursor: not-allowed;
}

.kompan-tag:has(> .kompan-tag__main:hover) {
    background-image: linear-gradient(var(--kompan-tag-bg-hover), var(--kompan-tag-bg-hover));
}

.kompan-tag:has(> .kompan-tag__main:focus-visible) {
    box-shadow: inset 0 0 0 var(--stroke-sm) var(--kompan-tag-border), var(--kompan-tag-focus-ring);
}

/* tag.css pulls the count in to the tag's end, as the last part; with a remove button after it - a combination
   Figma does not draw, docs/figma-gaps.md G74 - the count keeps its place and the button its own gap. */
.kompan-tag__count:not(:last-child),
.kompan-tag__main:not(:last-child) > .kompan-tag__count:last-child {
    margin-right: 0;
}

/* A country flag is round, as every flag in Figma's Tag is (its DK is a 16px circle); a square image a caller
   supplies is cut to one, as the avatar is by tag.css. */
.kompan-tag__country {
    border-radius: var(--radius-full);
    object-fit: cover;
}

/* A label group's two lines keep to one line each, as Figma sets them (82:2790, whitespace no-wrap), and a name longer
   than the room ends in an ellipsis rather than wrapping under the avatar or pushing out of its container; the avatar
   keeps its size. avatar.css lets both wrap. A_long_name_or_supporting_text_ends_in_an_ellipsis pins it. */
.kompan-avatar-label {
    max-width: 100%;
}

.kompan-avatar-label__name,
.kompan-avatar-label__email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =============================================================================================
   The library's own styles (ADR-0057, kind C): for what it still builds itself. None of it changes what
   a design-system rule or token computes, and each block goes with what it serves.

   Control-row alignment (docs/control-row-alignment.md).

   The fields this library still builds on MudBlazor - KompanSelectField, KompanDateTimePicker and the
   obsolete KompanComboBox, KompanAutocomplete and KompanAutoSelectField - wear the design system's field
   root, .kompan-input with the input field's size modifier, so that their label is the input field's
   label, the same distance above the control. The control inside is still MudBlazor's, and this is the
   height each one draws it at: the input field's own sum - its padding and its stroke twice, around its
   line - read from the variables input-fields.css sizes the input field with. A select and the same-size
   KompanInputField therefore agree wherever those variables go: at every breakpoint, and whatever the
   corrections above or an upstream release do to the padding. Pinned by KompanControlRowAlignmentTests,
   which measures the pair rather than a number. KompanField reads the same height for its frame, so the
   variable outlives those MudBlazor fields.
   ============================================================================================= */
.kompan-input {
    --kompan-field-control-height: calc(2 * (var(--kompan-input-padding) + var(--stroke-sm)) + var(--kompan-input-line-height));
}

/* KompanField, the labelled field around a caller's own content, draws that content at the same height:
   in a box of the input field's border, radius, surface and shadow when framed, or in the same band
   without the box. At least the control height, and taller when the content is - wrapped chips grow it -
   with no block padding of its own: content is centred in the height, and a MudBlazor chip carries a 4px
   margin that makes a small chip row 32px, which any padding would push past a 36px Sm field (measured:
   42px with the small spacing step). Inline, the frame is padded as the input field's control is, by
   block 17's inline padding, so its content starts where the same-size input field's text does - 12px in at
   lg, where the block padding would put it 16px in - and an InnerStyle --kompan-input-padding pads it at sm
   and md as it would the control. Every child may shrink, so a chip set
   scrolls inside the frame rather than widening it, and none is stretched: a switch placed straight inside
   is only as wide as its label, not a click target across the whole band. A child that should fill says so
   itself. Not .kompan-input__control: the design system's focus-within rules on that class would ring the
   whole frame whenever a chip or a button inside it takes focus. */
.kompan-field__frame,
.kompan-field__content {
    display: flex;
    align-items: center;
    gap: var(--kompan-input-gap);
    min-width: 0;
    min-height: var(--kompan-field-control-height);
    box-sizing: border-box;
}

.kompan-field__frame {
    padding: 0 var(--kompan-input-padding-inline, var(--kompan-input-padding));
    border: var(--stroke-sm) solid var(--kompan-input-border);
    border-radius: var(--kompan-input-radius);
    background: var(--kompan-input-bg);
    box-shadow: var(--kompan-input-shadow);
}

.kompan-field__frame > *,
.kompan-field__content > * {
    min-width: 0;
}

/* The data grid, drag and drop, the tab group and the grid helpers - library styles for its
   MudBlazor-built components (ADR-0057, kind C). A MudBlazor button a page puts in a table row does not ripple:
   the row is the thing pressed. */
.kompan-table__row .mud-ripple:after {
    display: none !important;
    transform: none !important;
}

body.disable-selection {
    user-select: none;
}

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    /*background-color: #2196F3;*/
    padding: 10px;
}

.grid-item {
    /*background-color: rgba(255, 255, 255, 0.8);*/
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
}


.title-white {
    color: white;
}

.title-black {
    color: black;
}

/* No `background: transparent` here. It is the initial value for these elements — nothing in
   MudExtensions, which owns the .dd-* class names, paints them — so the only thing it could ever do is
   suppress a background some other rule sets. It did exactly that once MudBlazor moved into a cascade
   layer (ADR-0050): a draggable row in a striped grid also carries .dd-draggable, and this declaration
   started winning against the stripe that had always out-specified it. */
.dd-draggable {
    border: var(--stroke-sm) solid var(--color-border-primary);
    color: var(--color-text-primary);
    border-radius: var(--radius-sm);
}

.dd-dragging {
    cursor: grabbing;
    background-color: var(--color-bg-brand);
    color: var(--color-text-primary);
}
/*datagrid body dd ↓*/
/*dropzone style style*/
.dd-dropzone {
    min-height: 50px;
}

/* The drop-target indicator: where the dragged row would land. Drawn on the edge of the row that
   position falls against, by that row, so a drag never repaints the grid. It takes no space, so the
   rows under the pointer do not shift as the indicator moves between them.

   A PSEUDO-ELEMENT, not a box-shadow, and that is the difference between drawn and not drawn. The
   first version of this used `box-shadow: inset` on the cell, which loses outright to a consumer that
   styles its own row edges - box-shadow is one property, it does not compose across rules, and the
   later declaration simply wins. A consumer whose grid marks line status with a shadow on the cell
   therefore had no drop indicator at all, on every row, in both themes: the class was applied, the
   rule was live, and nothing painted. Their status bar was what a tester saw at the row edge, and it
   was mistaken for the indicator drawing in the refused colour. A pseudo-element is its own box, so
   nothing a consumer does to the cell's border, outline or shadow can take it away.

   The -text tokens, not the plain ones, and that is the difference between seen and not seen.
   --kompan-palette-success resolves to --color-bg-success-solid, a BACKGROUND colour meant to sit
   behind light text: in dark mode it is #033f2f, which against the #151516 row measures 1.53:1 and is
   invisible. The -text tokens are the design system's foreground colours, which is what a mark read
   AGAINST the surface needs - 9:1 light, ~11.7:1 dark. KompanDataGridRowReorderTests asserts the ratio
   in both modes, because "the class is applied" and "the user can see it" are not the same claim.

   The cells are positioned for the bar only where nothing else positions them, hence :where(): a frozen cell is
   sticky, which holds the bar as well, and at this rule's weight it lost that - while the pointer was over its row
   the frozen cells jumped back to where the table had scrolled them
   (The_frozen_cell_of_the_row_a_drop_indicator_is_drawn_on_stays_frozen).

   A row's cells are its th as well as its tds: a RowHeader column's cells are th scope="row", and a row header left
   out of these rules drew no bar, no edge and no dimming
   (A_row_header_takes_its_rows_drag_and_drop_styling_as_its_other_cells_do). */
:where(.dd-drop-before, .dd-drop-after) > :is(td, th) {
    position: relative;
}

.dd-drop-before > :is(td, th)::after,
.dd-drop-after > :is(td, th)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    background-color: var(--kompan-palette-success-text);
    pointer-events: none;
}

.dd-drop-before > :is(td, th)::after {
    top: 0;
}

.dd-drop-after > :is(td, th)::after {
    bottom: 0;
}

.dd-drop-denied > :is(td, th)::after {
    background-color: var(--kompan-palette-error-text);
}
.dd-dragging-originator > :is(td, th) {
    border-top: var(--stroke-lg) solid var(--color-border-error-solid);
    border-bottom: var(--stroke-lg) solid var(--color-border-error-solid);
}

.dd-in-transit {
    opacity: 0.5;
}

    .dd-in-transit > :is(td, th) {
        opacity: 0.5;
    }

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.blink_me {
    animation: blinker 1s linear infinite;
}

.dd-noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                supported by Chrome, Edge, Opera and Firefox */
}

.align-center .mud-alert-position {
    align-items: center !important;
}