/* ==========================================================================
   SuruX surface design: Flat  (key "flat")
   --------------------------------------------------------------------------
   Signature: no depth. No shadow except focus rings and one float shadow, no
   blur, near-square corners (0-.25rem; pills only for status chips and counts), structure from
   hairlines or colour fills. Colour style sets the mood:
     Soft / Monochrome  -> minimal: unfilled chrome, hairlines, outline
                           buttons (every button carries a 3:1 edge); accent
                           only on the primary action, focus and selection.
     Vivid              -> colour-block: header band, page hero, active tab,
                           selected rows and status chips filled; solid,
                           borderless buttons; cards are tonal blocks. The
                           fill's on-fill ink reaches only what sits on the
                           fill, never the floating layers inside it.
   Button states are three different marks: hover shifts the fill, pressed /
   open is a tint plus a 2px bar inside the bottom edge, keyboard focus is a
   2px ring 2px outside. Primary is a solid fill (inverted inside a fill).
   Round 2 (27 Sep 2026, commit 24802a791): see NOTES.md section 0.
   Contract (docs/ui-surface-style-standard.md):
   - every rule is gated on :is(html, [data-surux-preference-preview])
     [data-surux-surface-style="flat"]; Default (no attribute) never changes.
   - tokens first; selector rules only where a component hard-codes a value.
   - status, topic, workflow, proposal and --surux-primary pairs are consumed,
     never redefined. Surfaces derive from --surux-*-base.
   - High contrast, forced colours and print render Default chrome: the whole
     sheet sits in @media screen and (forced-colors: none), and the root gate
     excludes [data-surux-contrast="high"].
   - Live video, snapshots and map tiles are excluded by component.
   Load order: after surux.choices.css (and colour-swatch), before
   surux.accessibility.css.
   ========================================================================== */

@media screen and (forced-colors: none) {

/* --------------------------------------------------------------------------
   1. Tokens: shape, depth, blur (all appearances)
   -------------------------------------------------------------------------- */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) {
  /* Shape: near-square. Pills keep --surux-radius-pill (status chips and counts).
     The switch track and thumb are square. Vertical tabs are square; horizontal tabs keep the control radius. */
  --surux-radius-sm: .25rem;
  --surux-radius-md: .25rem;
  --surux-radius-lg: .25rem;
  --surux-band-radius: .25rem;
  --surux-radius-band: .25rem;
  --surux-radius-card: .25rem;
  --surux-radius-modal: .25rem;
  --surux-radius-field: .125rem;
  --surux-radius-control: .125rem;
  --surux-radius-chip: .125rem;
  --surux-radius-input: .125rem;
  --surux-radius-menu: .25rem;
  --surux-radius-hero: .25rem;

  /* Depth: none. One float shadow for menus, pickers, popovers, dialogs and toasts. */
  --surux-flat-float-shadow: 0 .75rem 2rem color-mix(in srgb, #000 48%, transparent);
  --surux-elevation-card: 0 0 transparent;
  --surux-elevation-raised: 0 0 transparent;
  --surux-elevation-float: var(--surux-flat-float-shadow, 0 0 transparent);
  --surux-elevation-modal: var(--surux-flat-float-shadow, 0 0 transparent);
  --surux-elevation-toast: var(--surux-flat-float-shadow, 0 0 transparent);

  /* Blur: none. */
  --surux-blur-shell: blur(0px);
  --surux-blur-overlay: blur(0px);
  --surux-blur-float: blur(0px);

  /* Design tokens. Hairline = structure (decorative, about 1.5:1). Edge = a control
     boundary (field frame, outline button, switch track), held at 3:1 or more. */
  --surux-flat-hairline: color-mix(in srgb, var(--surux-text) 17%, var(--surux-surface-base));
  --surux-flat-edge: color-mix(in srgb, var(--surux-text) 58%, var(--surux-surface-base));
  --surux-flat-focus: var(--surux-primary);
  /* Pressed / expanded / current: a translucent accent tint plus a 2px accent bar on the
     bottom edge (the active-tab language). Never a ring, so it cannot read as focus. */
  --surux-flat-pressed-plane: color-mix(in srgb, var(--surux-primary) 18%, transparent);
  --surux-flat-pressed: var(--surux-flat-pressed-plane, transparent);
  --surux-flat-bar: var(--surux-primary);
  --surux-flat-select: color-mix(in srgb, var(--surux-primary) 14%, var(--surux-surface-base));
  --surux-flat-on-fill: var(--surux-primary-contrast);
  --surux-flat-fill: var(--surux-primary-action-bg);
  --surux-flat-block: var(--surux-surface-base);
  --surux-flat-button-block: transparent;
  --surux-flat-tonal: color-mix(in srgb, var(--surux-text) 10%, var(--surux-surface-base));

  /* Surfaces (minimal): one plane. Cards, bars and fields share the page colour and are
     separated by hairlines. Text tokens are validated on surface-base, so contrast holds. */
  --surux-app-bg: var(--surux-surface-base);
  --surux-surface: var(--surux-surface-base);
  --surux-surface-2: color-mix(in srgb, var(--surux-surface-2-base) 55%, var(--surux-surface-base));
  --surux-border: var(--surux-flat-hairline, transparent);
  --bs-body-bg: var(--surux-surface-base);
  --bs-tertiary-bg: var(--surux-surface-base);
  --bs-border-color: var(--surux-flat-hairline, var(--surux-border));
}

:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-bs-theme="light"] {
  --surux-flat-float-shadow: 0 .75rem 2rem color-mix(in srgb, var(--surux-text) 16%, transparent);
  --surux-flat-hairline: color-mix(in srgb, var(--surux-text) 14%, var(--surux-surface-base));
  --surux-flat-edge: color-mix(in srgb, var(--surux-text) 60%, var(--surux-surface-base));
  --surux-flat-select: color-mix(in srgb, var(--surux-primary) 10%, var(--surux-surface-base));
  --surux-flat-tonal: color-mix(in srgb, var(--surux-text) 6%, var(--surux-surface-base));
}

/* Colour-block (Vivid): the page is a plane, cards are tonal blocks without borders,
   and the accent becomes a fill on the header band, hero, active tab and selection. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-surux-colour-style="vivid"] {
  --surux-flat-action-pressed-ink: var(--surux-flat-vivid-action-pressed-ink, var(--surux-primary-contrast));
  --surux-flat-block: var(--surux-surface-2-base);
  --surux-flat-tonal: color-mix(in srgb, var(--surux-text) 12%, var(--surux-surface-2-base));
  --surux-app-bg: var(--surux-surface-base);
  --surux-surface: var(--surux-surface-2-base);
  --surux-surface-2: color-mix(in srgb, var(--surux-text) 7%, var(--surux-surface-2-base));
  --surux-border: color-mix(in srgb, var(--surux-text) 12%, var(--surux-surface-2-base));
  --surux-flat-select: var(--surux-primary-action-bg);
  --surux-flat-button-block: var(--surux-flat-tonal, var(--surux-surface));
  --surux-flat-folder: var(--surux-flat-tonal, var(--surux-surface));
  --bs-body-bg: var(--surux-surface-base);
  --bs-tertiary-bg: var(--surux-surface-2-base);
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-surux-colour-style="vivid"][data-bs-theme="light"] {
  /* On light the surface pair is near-white on near-white; tint the plane from the palette
     so white blocks read as blocks. */
  --surux-flat-block: var(--surux-surface-base);
  --surux-flat-tonal: color-mix(in srgb, var(--surux-primary) 9%, var(--surux-surface-2-base));
  --surux-app-bg: color-mix(in srgb, var(--surux-primary) 7%, var(--surux-surface-2-base));
  --surux-surface: var(--surux-surface-base);
  --surux-surface-2: color-mix(in srgb, var(--surux-primary) 5%, var(--surux-surface-2-base));
  --surux-border: color-mix(in srgb, var(--surux-text) 10%, var(--surux-surface-base));
  --bs-body-bg: color-mix(in srgb, var(--surux-primary) 7%, var(--surux-surface-2-base));
  --bs-tertiary-bg: var(--surux-surface-base);
  /* Fields and the pager sit on the tinted plane as well as on white blocks; the edge holds
     3:1 against both (Warm Light plane measured 2.9:1 at 55%). */
  --surux-flat-edge: color-mix(in srgb, var(--surux-text) 64%, var(--surux-surface-base));
  /* Buttons on the tinted plane are white blocks; inside white blocks they are tonal (below). */
  --surux-flat-button-block: var(--surux-flat-block, var(--surux-surface));
  /* 16% primary on the light plane measured 1.14:1, under Default's own edge. 24% keeps the
     folder visible. The selected bar is a darker mix on the Vivid folder (not raw primary):
     primary at 24% drops that bar under 3:1 on Vivid Light #127a9e. */
  --surux-flat-folder: color-mix(in srgb, var(--surux-primary) 24%, var(--surux-surface-2-base));
  /* On-fill ink is white. The light appearance's band shadow is also white, so the type glowed. */
  --surux-band-shadow: rgb(0 0 0 / .4);
}
/* Light and Slate colour-block tint the plane away from the blocks, so buttons standing on the
   plane (topbar, page lead, list footer, command bar) are block-coloured and buttons inside
   blocks are tonal. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-surux-colour-style="vivid"]:is([data-bs-theme="light"], [data-surux-appearance="slate"]) :is(.surux-card, .card, .modal-content, .surux-modal-content, .surux-workflow-lane, .dropdown-menu, .surux-command-overflow-panel, .surux-toast, .surux-sidebar) {
  --surux-flat-button-block: var(--surux-flat-tonal, var(--surux-surface));
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-surux-colour-style="vivid"]:is([data-bs-theme="light"], [data-surux-appearance="slate"]) .surux-command-bar .surux-command-overflow-panel {
  --surux-flat-button-block: var(--surux-flat-block, var(--surux-surface));
}
/* Tonal headers (dialog header, lane header) hold block-coloured buttons in every appearance. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-surux-colour-style="vivid"] :is(.surux-modal-header, .surux-workflow-lane-header) {
  --surux-flat-button-block: var(--surux-flat-block, var(--surux-surface));
}

/* Slate is a mid-tone dark appearance: its muted ink reaches 4.5:1 only on surfaces no lighter
   than --surux-surface-2-base, so any tint that lightens (tonal blocks, selection, the
   colour-block card on surface-2-base, chips inside it) broke text. On Slate, Flat's tonal and
   pressed steps go darker instead, and colour-block cards sit on --surux-surface-base with the
   plane one step darker. Keyed on the appearance, as Default's own Slate hero rule is. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-surux-appearance="slate"] {
  --surux-flat-tonal: color-mix(in srgb, #000 16%, var(--surux-surface-base));
  --surux-flat-pressed-plane: color-mix(in srgb, #000 22%, transparent);
  --surux-flat-pressed: var(--surux-flat-pressed-plane, transparent);
  --surux-flat-select: color-mix(in srgb, #000 20%, var(--surux-surface-base));
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-surux-appearance="slate"][data-surux-colour-style="vivid"] {
  --surux-flat-block: var(--surux-surface-base);
  --surux-flat-tonal: color-mix(in srgb, #000 18%, var(--surux-surface-base));
  --surux-app-bg: color-mix(in srgb, #000 22%, var(--surux-surface-base));
  --surux-surface: var(--surux-surface-base);
  --surux-surface-2: color-mix(in srgb, #000 9%, var(--surux-surface-base));
  --surux-border: color-mix(in srgb, var(--surux-text) 14%, var(--surux-surface-base));
  --surux-flat-select: var(--surux-primary-action-bg);
  --surux-flat-button-block: var(--surux-flat-block, var(--surux-surface));
  --surux-flat-folder: var(--surux-surface-base);
  --bs-body-bg: color-mix(in srgb, #000 22%, var(--surux-surface-base));
  --bs-tertiary-bg: var(--surux-surface-base);
}
/* Night keeps near-black surfaces under Slate, so the surface-base folder disappears into
   the page (22% black over #0a0a0b). Dark's tonal step stays visible and keeps rest-child ink. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-surux-appearance="slate"][data-surux-theme="night"][data-surux-colour-style="vivid"] {
  --surux-flat-folder: color-mix(in srgb, var(--surux-text) 12%, var(--surux-surface-2-base));
}

/* --------------------------------------------------------------------------
   2. Selector rules: what the tokens cannot reach
   -------------------------------------------------------------------------- */

/* 2.1 Page plane: Default paints a radial accent glow behind the shell. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) body {
  background: var(--surux-app-bg);
}

/* 2.2 Shell bars: topbar and command bar are planes with one hairline. The command bar
   hard-codes blur(14px), a 1.1rem top radius and a translucent dark mix. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-topbar {
  background: var(--surux-app-bg);
  border-bottom: var(--surux-border-width) solid var(--surux-border);
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-command-bar {
  border-radius: 0;
  background: var(--surux-app-bg);
  border-color: var(--surux-border);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* 2.3 Cards, sections, lanes: the literal translucent mix becomes the flat block. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) :is(.surux-card, .card, .surux-summary-bar, .surux-metric-strip):not(:where(.surux-whep-player, .surux-whep-player *, .surux-channel-gallery *, .surux-inspection-window *)) {
  background: var(--surux-flat-block, var(--surux-surface));
  box-shadow: none;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-surux-colour-style="vivid"] :is(.surux-card, .card):not(:where(.surux-whep-player, .surux-whep-player *, .surux-channel-gallery *, .surux-inspection-window *)) {
  border-color: transparent;
}

/* 2.4 Header band. Minimal: plane and hairline. Colour-block: filled with the action fill,
   ink from the palette's contrast pair.
   The on-fill ink is scoped to what sits on the fill: the heading block (eyebrow, title,
   back link, breadcrumb, record facts), the segment strip and the activity line. It is never
   set on the band itself, because the band also holds floating layers (the helper panel, band
   peeks, menus, hint popovers) that paint the plane colour and inherit colour; on-fill ink on
   the plane measured 1.3:1. Section 2.4b resets those layers explicitly as well. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-header-band {
  background: var(--surux-flat-block, var(--surux-surface));
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-surux-colour-style="vivid"] .surux-header-band {
  background: var(--surux-flat-fill, var(--surux-primary-action-bg));
  border-color: transparent;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-surux-colour-style="vivid"] .surux-header-band :is(.surux-band-top > .surux-page-header, .surux-band-top > .surux-band-heading, .surux-band-segments, .surux-band-activity) {
  --surux-band-ink: var(--surux-flat-on-fill, var(--surux-primary-contrast));
  --surux-band-fg: var(--surux-flat-on-fill, var(--surux-primary-contrast));
  color: var(--surux-band-fg);
}
/* Header-extra chips consume the composition's ink. Minimal remains muted;
   Vivid extras sit directly on the band fill. No page selector belongs here. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]):not([data-surux-colour-style="vivid"]) .surux-header-band :is(.surux-band-top > .surux-page-header, .surux-band-top > .surux-band-heading) {
  --surux-header-extra-ink: var(--surux-muted);
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-surux-colour-style="vivid"] .surux-header-band :is(.surux-band-top > .surux-page-header, .surux-band-top > .surux-band-heading) {
  --surux-header-extra-ink: var(--surux-flat-on-fill, var(--surux-primary-contrast));
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-surux-colour-style="vivid"] .surux-header-band :is(h1, .surux-eyebrow, .surux-page-title-copy, .surux-breadcrumb-back, .surux-breadcrumb-crumb, .surux-breadcrumb-name, .surux-breadcrumb-state, .surux-breadcrumb-caret, .surux-band-filter small, .surux-band-filter b, .surux-band-record-facts dt, .surux-band-record-facts dd):not(:where(.surux-command-overflow-panel, .dropdown-menu, .popover, .surux-field-hint-popover, .surux-breadcrumb-fork, [popover]) *) {
  color: var(--surux-flat-on-fill, var(--surux-primary-contrast));
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-surux-colour-style="vivid"] .surux-header-band :is(.surux-breadcrumb-trail-item + .surux-breadcrumb-trail-item, .surux-breadcrumb-fold + .surux-breadcrumb-trail-item)::before {
  background: var(--surux-flat-on-fill, var(--surux-primary-contrast));
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-surux-colour-style="vivid"] .surux-header-band .surux-band-segments {
  border-top-color: color-mix(in srgb, var(--surux-flat-on-fill, var(--surux-primary-contrast)) 22%, transparent);
}

/* Colour-block carries the accent as fill, not ink: eyebrows letter in the text colour, so
   they hold 4.5:1 on the tinted plane and on tonal headers. Links keep the palette ink. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-surux-colour-style="vivid"] .surux-eyebrow {
  color: var(--surux-text);
}
/* Inside a filled block the focus ring, the pressed tint and the pressed bar take the block's
   ink, so they hold 3:1 on the fill. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-surux-colour-style="vivid"] :is(.surux-header-band, .surux-page-hero, .surux-table tbody tr.surux-row-selected) {
  --surux-flat-focus: var(--surux-flat-on-fill, var(--surux-primary-contrast));
  --surux-flat-pressed: color-mix(in srgb, var(--surux-flat-on-fill, var(--surux-primary-contrast)) 22%, transparent);
  --surux-flat-bar: var(--surux-flat-on-fill, var(--surux-primary-contrast));
}

/* 2.4b Floating layers inside a colour block (helper and overflow panels, band peeks, menus,
   hint popovers, the breadcrumb fork, select lists) paint the plane, so they take the
   plane's ink, focus, pressed tint and hero variables back. Listed layers only; the block's own
   chrome keeps the on-fill ink. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-surux-colour-style="vivid"] :is(.surux-header-band, .surux-page-hero, .surux-table tbody tr.surux-row-selected) :is(.surux-command-overflow-panel, .dropdown-menu, .popover, .surux-field-hint-popover, .surux-breadcrumb-fork, .surux-select-list, [popover]) {
  --surux-band-ink: var(--surux-primary);
  --surux-flat-focus: var(--surux-primary);
  --surux-flat-pressed: var(--surux-flat-pressed-plane, transparent);
  --surux-flat-bar: var(--surux-primary);
  --surux-hero-text: var(--surux-text);
  --surux-hero-soft: var(--surux-muted);
  --surux-hero-label: var(--surux-primary);
  --surux-hero-bright: var(--surux-primary);
  --surux-hero-mark-ink: var(--surux-primary);
  --surux-hero-deep: var(--surux-surface-base);
  --surux-hero-panel: var(--surux-surface-base);
  --surux-hero-line: var(--surux-flat-hairline, var(--surux-border));
  --surux-hero-hover: color-mix(in srgb, var(--surux-text) 8%, transparent);
  color: var(--surux-text);
}

/* 2.5 Page hero (edit pages): the halo gradient, glow and art ring go; a flat block stays. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-page-hero:has(.surux-page-hero-halo) {
  --surux-hero-deep: var(--surux-flat-block, var(--surux-surface));
  --surux-hero-panel: var(--surux-flat-block, var(--surux-surface));
  --surux-hero-text: var(--surux-text);
  --surux-hero-soft: var(--surux-muted);
  --surux-hero-label: var(--surux-primary);
  --surux-hero-bright: var(--surux-primary);
  --surux-hero-line: var(--surux-border);
  --surux-hero-hover: color-mix(in srgb, var(--surux-text) 8%, transparent);
  --surux-hero-mark-background: transparent;
  --surux-hero-mark-shadow: none;
  --surux-hero-mark-ink: var(--surux-primary);
  border: var(--surux-border-width) solid var(--surux-border);
  border-radius: var(--surux-radius-card);
  background: var(--surux-flat-block, var(--surux-surface));
  box-shadow: none;
  color: var(--surux-text);
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-page-hero-halo .surux-page-hero-art {
  display: none;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-surux-colour-style="vivid"] .surux-page-hero:has(.surux-page-hero-halo) {
  --surux-hero-deep: var(--surux-flat-fill, var(--surux-primary-action-bg));
  --surux-hero-panel: var(--surux-flat-fill, var(--surux-primary-action-bg));
  --surux-hero-text: var(--surux-flat-on-fill, var(--surux-primary-contrast));
  --surux-hero-soft: var(--surux-flat-on-fill, var(--surux-primary-contrast));
  --surux-hero-label: var(--surux-flat-on-fill, var(--surux-primary-contrast));
  --surux-hero-mark-ink: var(--surux-flat-on-fill, var(--surux-primary-contrast));
  --surux-hero-line: color-mix(in srgb, var(--surux-flat-on-fill, var(--surux-primary-contrast)) 22%, transparent);
  --surux-hero-hover: color-mix(in srgb, var(--surux-flat-on-fill, var(--surux-primary-contrast)) 14%, transparent);
  border-color: transparent;
  background: var(--surux-flat-fill, var(--surux-primary-action-bg));
  color: var(--surux-flat-on-fill, var(--surux-primary-contrast));
}

/* 2.6 Tables: hairline rows; the header is type over a strong rule, not a panel. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-table {
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--surux-border);
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-table thead th {
  background: var(--surux-flat-block, var(--surux-surface));
  box-shadow: none;
  border-bottom: var(--surux-border-width-strong) solid var(--surux-flat-edge, var(--surux-border));
}
/* Column filter triggers are small buttons: minimal gives them the 3:1 edge on the plane,
   colour-block a tonal square; open is the pressed mark. Default's tint, .46rem corner and
   open-state glow go. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-column-filter-trigger {
  border-color: var(--surux-flat-edge, var(--surux-border));
  border-radius: var(--surux-radius-control);
  background: transparent;
  box-shadow: none;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-surux-colour-style="vivid"] .surux-column-filter-trigger {
  border-color: transparent;
  background: var(--surux-flat-tonal, var(--surux-surface));
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) :is(.surux-column-filter-root.is-open .surux-column-filter-trigger, .surux-column-filter-trigger[aria-expanded="true"]) {
  background: var(--surux-flat-pressed, transparent);
  box-shadow: inset 0 calc(-1 * var(--surux-border-width-strong)) 0 var(--surux-flat-bar, var(--surux-primary));
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-page-header .surux-page-title-copy {
  border-radius: var(--surux-radius-control);
}
/* Page totals: Default lifts the sticky footer with a drop shadow and a darkened fill. Flat
   closes the table with the same 2px edge rule that opens it. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-table tfoot {
  background: var(--surux-flat-block, var(--surux-surface));
  box-shadow: none;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-table tfoot :is(th, td) {
  border-top: var(--surux-border-width-strong) solid var(--surux-flat-edge, var(--surux-border));
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-table tbody tr.surux-row-selected > * {
  background: var(--surux-flat-select, var(--surux-surface));
  box-shadow: none;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-table tbody tr.surux-row-selected > :first-child {
  box-shadow: inset var(--surux-border-width-strong) 0 0 var(--surux-primary);
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-surux-colour-style="vivid"] .surux-table tbody tr.surux-row-selected > * {
  color: var(--surux-flat-on-fill, var(--surux-primary-contrast));
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-surux-colour-style="vivid"] .surux-table tbody tr.surux-row-selected > :first-child {
  box-shadow: none;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-surux-colour-style="vivid"] .surux-table tbody tr.surux-row-selected :is(a, .surux-record-code) {
  color: var(--surux-flat-on-fill, var(--surux-primary-contrast));
}
/* Every glyph on the colour-block row uses the block's on-fill ink.
   Default Vivid fill #18a7d8 against on-fill #0f172a measures 6.43:1.
   A status chip filled with its own ink (the brown workflow chip) failed 3:1 on that cyan,
   so on the block the chip is an on-fill outline: the same pair is the chip edge. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-surux-colour-style="vivid"] .surux-table tbody tr.surux-row-selected :is(.text-muted, small, i, b, strong, span, a, .surux-status-chip) {
  color: var(--surux-flat-on-fill, var(--surux-primary-contrast)) !important;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-surux-colour-style="vivid"] .surux-table tbody tr.surux-row-selected .surux-status-chip {
  background: transparent !important;
  border-color: var(--surux-flat-on-fill, var(--surux-primary-contrast)) !important;
}

/* 2.7 Tabs. Minimal: type over a 2px accent rule. Colour-block: the active tab is a fill. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-tab-button {
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) :is(.surux-tab-button.active, .surux-tab-button[aria-selected="true"]):not(:where([data-surux-tab-folder="drawn"] > .surux-tab-button)) {
  border-color: transparent;
  border-bottom-color: var(--surux-primary);
  background: transparent;
  box-shadow: inset 0 calc(-1 * var(--surux-border-width-strong)) 0 var(--surux-primary);
  color: var(--surux-text);
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-surux-colour-style="vivid"] :is(.surux-tab-button.active, .surux-tab-button[aria-selected="true"]):not(:where([data-surux-tab-folder="drawn"] > .surux-tab-button)) {
  background: var(--surux-flat-fill, var(--surux-primary-action-bg));
  border-color: var(--surux-flat-fill, var(--surux-primary-action-bg));
  box-shadow: none;
  color: var(--surux-flat-on-fill, var(--surux-primary-contrast));
}

:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-surux-colour-style="vivid"] :is(.surux-tab-button.active, .surux-tab-button[aria-selected="true"]):not(:where([data-surux-tab-folder="drawn"] > .surux-tab-button)) i {
  color: inherit;
}
/* Collapsed rail: the open parent's corner chevron is accent ink on an accent tile.
   On-fill ink keeps the only sub-tab mark visible. Heavier than the components rule (0,9,0). */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-surux-colour-style="vivid"] .surux-tabs.is-tab-rail-collapsed:not(.is-tab-rail-open) > .surux-tab-list > :is(.surux-tab-button.active, .surux-tab-button[aria-selected="true"]):not(:where([data-surux-tab-folder="drawn"] > .surux-tab-button)) > .surux-tab-disclosure {
  color: var(--surux-flat-on-fill, var(--surux-primary-contrast));
}

/* Two-level tabs: the folder is one flat tint with no line. Children rest plain.
   The selected child keeps its tint and a 2px bar. A drawn parent does not take the
   single-level colour block. The strip keeps its divider, with a gap under the neck.
   Horizontal folders keep these radii. Vertical orientation sets the three lengths to 0px below. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-tab-list-hierarchy {
  --surux-tab-folder-fill: var(--surux-flat-select, transparent);
  --surux-tab-folder-edge: transparent;
  --surux-tab-folder-radius: var(--surux-radius-md);
  --surux-tab-folder-shoulder: var(--surux-radius-sm);
  --surux-tab-folder-lane-radius: var(--surux-radius-md);
  --surux-tab-folder-ink: var(--surux-text);
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-surux-colour-style="vivid"] .surux-tab-list-hierarchy {
  --surux-tab-folder-fill: var(--surux-flat-folder, color-mix(in srgb, var(--surux-primary) 16%, var(--surux-surface-2-base)));
}
/* The 2px bar sits on the pressed chip over the folder. Raw primary falls under 3:1 on
   light folders, and on dark folders it sits too close to the pressed chip. 70% primary
   mixed into text darkens the bar on light text colours and lightens it on dark ones, and
   holds 3:1 on the pressed chip and on the fill for every Vivid appearance. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-surux-colour-style="vivid"] .surux-tab-list-hierarchy {
  --surux-flat-bar: color-mix(in srgb, var(--surux-primary) 70%, var(--surux-text));
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-surux-colour-style="vivid"] .surux-tab-sublist > .surux-tab-button:not(.active):not([aria-selected="true"]) {
  color: color-mix(in srgb, var(--surux-muted) 55%, var(--surux-text));
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-tab-sublist > .surux-tab-button {
  border-radius: var(--surux-radius-control);
  background: transparent;
  color: var(--surux-muted);
  border-color: transparent;
  box-shadow: none;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-tab-sublist > :is(.surux-tab-button.active, .surux-tab-button[aria-selected="true"]) {
  border-radius: var(--surux-radius-control);
  background: var(--surux-flat-pressed, transparent);
  color: var(--surux-text);
  border-color: transparent;
  box-shadow: inset 0 calc(-1 * var(--surux-border-width-strong)) 0 var(--surux-flat-bar, var(--surux-primary));
}
/* Vertical child tabs are square. The horizontal child rules above keep the control radius;
   this selector is heavier, so it wins on the rail and on the shared .5rem child. */
:is(
  html[data-surux-desktop-tab-orientation="vertical"][data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-tabs:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list > .surux-tab-sublist > .surux-tab-button,
  [data-surux-preference-preview][data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-tabs.surux-tabs-orientation-vertical > .surux-tab-list > .surux-tab-sublist > .surux-tab-button
) {
  border-radius: 0;
}
:is(
  html[data-surux-desktop-tab-orientation="vertical"][data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-tabs:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list > .surux-tab-sublist > :is(.surux-tab-button.active, .surux-tab-button[aria-selected="true"]),
  [data-surux-preference-preview][data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-tabs.surux-tabs-orientation-vertical > .surux-tab-list > .surux-tab-sublist > :is(.surux-tab-button.active, .surux-tab-button[aria-selected="true"])
) {
  border-radius: 0;
  background: var(--surux-flat-pressed, transparent);
  color: var(--surux-text);
  border-color: transparent;
  box-shadow: inset 0 calc(-1 * var(--surux-border-width-strong)) 0 var(--surux-flat-bar, var(--surux-primary));
}

/* 2.8 Status chips. Minimal: outline pills, no tint. Colour-block: the chip is filled with
   its own status ink and lettered in the surface colour, so the contrast is the validated
   status-ink-on-surface pair turned inside out. Default's light rule uses !important. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-status-chip {
  background: transparent !important;
  box-shadow: none !important;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-surux-colour-style="vivid"] .surux-status-chip {
  background: var(--surux-status-color) !important;
  border-color: var(--surux-status-color) !important;
  color: var(--surux-surface-base) !important;
}

/* 2.9 Field frame: a flat frame on the plane, 3:1 edge, no inset well, no glow. Component
   variables are set through :where() so the invalid, disabled and read-only states (higher
   specificity in surux.fields.css) keep their own edges. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) :not(.surux-filter-control.is-filter-active) > :where(.surux-field-surface, .surux-picker-surface):not(:has(:is(.is-invalid, .surux-input-invalid, [aria-invalid="true"], :disabled, [readonly]))) {
  --surux-picker-edge: var(--surux-flat-edge, var(--surux-border));
  --surux-picker-rest: var(--surux-flat-block, var(--surux-surface));
  --surux-picker-well: var(--surux-flat-block, var(--surux-surface));
  --surux-picker-glow: transparent;
  --surux-picker-shadow: transparent;
  --surux-picker-highlight: transparent;
  --surux-picker-inset: transparent;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) :is(.surux-field-surface, .surux-picker-surface) {
  box-shadow: none;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) :is(.surux-field-surface, .surux-picker-surface)::after {
  content: none;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) :is(.surux-field-shell, .surux-picker-shell):focus-within > :is(.surux-field-surface, .surux-picker-surface):not(:has(:is(.is-invalid, .surux-input-invalid, [aria-invalid="true"], :disabled, [readonly]))) {
  --surux-picker-edge: var(--surux-flat-focus, var(--surux-primary));
  background: var(--surux-flat-block, var(--surux-surface));
  box-shadow: 0 0 0 1px var(--surux-flat-focus, var(--surux-primary));
}

/* Field states. Invalid keeps the warning edge. Read-only stays the tonal hairline
   plate. Disabled uses the shared disabled fill and rim, still with no shadow. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) :is(.surux-field-surface, .surux-picker-surface):has(:is([data-surux-picker-input], .surux-field-input, .surux-control-input, .surux-field-switch-input, .surux-option-switch-input):is(.surux-input-invalid, .is-invalid, [aria-invalid="true"])):not(:has(:disabled)):not(:has([readonly])) {
  --surux-picker-accent: color-mix(in srgb, var(--surux-warning) 72%, var(--surux-text));
  --surux-picker-edge: color-mix(in srgb, var(--surux-warning-fill) 72%, var(--surux-text));
}
/* TR-0000173 flat read-only plate */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) :is(.surux-read-only-surface, :is(.surux-field-surface, .surux-picker-surface).surux-field-static, :is(.surux-field-surface, .surux-picker-surface):has(> [readonly])):not(:has(:is([data-surux-picker-input], .surux-field-input, .surux-control-input, .surux-field-switch-input, .surux-option-switch-input):is(:disabled, [aria-disabled="true"]))):not(:has(:is(.is-invalid, .surux-input-invalid, [aria-invalid="true"]))):not(:has(> [readonly]:focus-visible)) {
  --surux-picker-edge: var(--surux-flat-hairline, var(--surux-border));
  border-color: var(--surux-picker-edge);
  background: var(--surux-flat-tonal, var(--surux-surface));
  box-shadow: none;
}
/* TR-0000173 flat disabled well */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) :is(.surux-field-surface, .surux-picker-surface):has(:is([data-surux-picker-input], .surux-field-input, .surux-control-input, .surux-field-switch-input, .surux-option-switch-input):is(:disabled, [aria-disabled="true"])):not(:has(:is(.is-invalid, .surux-input-invalid, [aria-invalid="true"]))) {
  --surux-picker-edge: color-mix(in srgb, var(--surux-disabled-control-border) 65%, var(--surux-muted));
  border-color: var(--surux-picker-edge);
  background: var(--surux-disabled-control-bg);
  box-shadow: none;
}
/* TR-0000173 flat read-only warning */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) :is(.surux-read-only-surface, :is(.surux-field-surface, .surux-picker-surface).surux-field-static, :is(.surux-field-surface, .surux-picker-surface):has(> [readonly])):has(:is([data-surux-picker-input], .surux-field-input, .surux-control-input, .surux-field-switch-input, .surux-option-switch-input):is(.surux-input-invalid, .is-invalid, [aria-invalid="true"])):not(:has(:is([data-surux-picker-input], .surux-field-input, .surux-control-input, .surux-field-switch-input, .surux-option-switch-input):is(:disabled, [aria-disabled="true"]))):not(:has(> [readonly]:focus-visible)) {
  --surux-picker-accent: color-mix(in srgb, var(--surux-warning) 72%, var(--surux-text));
  --surux-picker-edge: color-mix(in srgb, var(--surux-warning-fill) 72%, var(--surux-text));
  border-color: var(--surux-picker-edge);
}
/* TR-0000173 flat read-only focus */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) :is(.surux-field-surface, .surux-picker-surface):has(> [readonly]:focus-visible):not(:has(:is([data-surux-picker-input], .surux-field-input, .surux-control-input, .surux-field-switch-input, .surux-option-switch-input):is(:disabled, [aria-disabled="true"]))) {
  --surux-picker-edge: var(--surux-primary);
  border-color: var(--surux-primary);
  background: var(--surux-flat-tonal, var(--surux-surface));
  box-shadow: none;
}

/* Plain inputs, the toolbar search box and switches read --surux-input-*, which
   surux.components.css declares on .surux-card and .surux-input as well as :root. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) :where(.surux-card, .surux-input, .surux-date-display, .surux-control-switch, .surux-private-switch) {
  --surux-input-bg: transparent;
  --surux-input-border: var(--surux-flat-edge, var(--surux-border));
  --surux-disabled-control-shadow: none;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-control-field.surux-search-input-box {
  border-color: var(--surux-flat-edge, var(--surux-border));
  border-radius: var(--surux-radius-field);
  background: var(--surux-flat-block, var(--surux-surface));
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-search-input-box:has(> .surux-input:focus) {
  border-color: var(--surux-flat-focus, var(--surux-primary));
  box-shadow: 0 0 0 1px var(--surux-flat-focus, var(--surux-primary));
}
/* Switch: a hairline-free physical track is not flat; the track is an edge at 3:1 and the
   checked state is the accent fill. The track is square in every state (off, on, focus,
   disabled, and checked-disabled): one radius on the track, and no state rule sets another.
   The thumb is one square layer. The track is twice as wide as it is tall, so 36% by 70%
   is a square. It sits on the left when off and on the right when on, centred on the cross
   axis by the background x and y longhands. Flat has no positioned decoration, so the sheet
   does not write a position declaration. A read-only switch keeps that travel, so on
   stays visibly different from off. Colour is a token, so light, dark, night and Soft /
   Monochrome / Vivid follow the theme. The repeated class and the !important on the image
   beat the palette sheet's checked thumb, which is painted important. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .form-check-input {
  border-color: var(--surux-flat-edge, var(--surux-border));
  box-shadow: none;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .form-switch.form-switch .form-check-input.form-check-input {
  --surux-flat-switch-thumb: var(--surux-flat-edge, var(--surux-border));
  border-radius: 0;
  background-image: linear-gradient(var(--surux-flat-switch-thumb), var(--surux-flat-switch-thumb)) !important;
  background-repeat: no-repeat;
  background-size: 36% 70%;
  background-position-x: left;
  background-position-y: center;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .form-switch.form-switch .form-check-input.form-check-input:checked {
  background-position-x: right;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .form-switch .form-check-input:checked:not(:disabled) {
  --surux-flat-switch-thumb: var(--surux-primary-contrast);
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .form-switch .form-check-input:disabled {
  --surux-flat-switch-thumb: var(--surux-disabled-control-color);
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) :is(.surux-control-switch, .surux-private-switch).form-switch .form-check-input {
  border-radius: 0;
  border-color: var(--surux-flat-edge, var(--surux-border));
  background-color: transparent;
  box-shadow: none;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) :is(.form-check-input, :is(.surux-control-switch, .surux-private-switch).form-switch .form-check-input):checked {
  border-color: var(--surux-primary);
  background-color: var(--surux-primary);
  box-shadow: none;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) :is(.form-check-input, :is(.surux-control-switch, .surux-private-switch).form-switch .form-check-input):focus-visible {
  box-shadow: none;
  outline: 2px solid var(--surux-flat-focus, var(--surux-primary));
  outline-offset: 2px;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-control-switch {
  border-radius: var(--surux-radius-field);
  background: transparent;
}

/* 2.10b Keyboard focus on everything else that takes focus in the shared owners: links (record
   links, sort links, the logo link, tabs, band filters), disclosure summaries, focusable regions
   and titles, the SuruX select trigger, choice tiles, segments, hint and column-filter
   triggers. One mark: the same 2px ring, 2px clear. Controls inside a field frame are excluded;
   the frame shows their focus (2.9). Menu rows, workflow-board scrollers, .table-responsive regions
   and embedded table scrollers draw the ring inset. Only a card-hosted list moves its ring to the
   card. A tab panel has no frame. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) :is(a[href], summary, [tabindex="0"]:not(.surux-data-table-card > .surux-data-table-desktop-shell > .surux-data-table-scroll, .surux-tab-panel), .surux-select-trigger, .surux-choice-tiles > button, .surux-segmented-control > button, .surux-column-filter-trigger, .surux-field-hint-trigger, .surux-tab-button):focus-visible:not(:where(.surux-field-surface, .surux-picker-surface, .surux-search-input-box) *) {
  outline: 2px solid var(--surux-flat-focus, var(--surux-primary));
  outline-offset: 2px;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) :is(.surux-workflow-board-scroll, .table-responsive, .dropdown-item, .surux-user-menu-item, .surux-select-option, [role="option"]):not(.surux-data-table-card > .surux-data-table-desktop-shell > .surux-data-table-scroll):focus-visible {
  outline: 2px solid var(--surux-flat-focus, var(--surux-primary));
  outline-offset: -2px;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-data-table-card:has(> .surux-data-table-desktop-shell > .surux-data-table-scroll[tabindex]:focus-visible) {
  outline: 2px solid var(--surux-flat-focus, var(--surux-primary));
  outline-offset: 3px;
}

/* 2.10c Pager: the page and page-size controls are not boxes; their select triggers are fields
   with the 3:1 edge. Default's light rule sets the trigger border with !important. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) :is(.surux-page-control, .surux-page-size-control) {
  border-color: transparent;
  border-radius: var(--surux-radius-control);
  background: transparent;
  box-shadow: none;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) :is(.surux-page-selector, .surux-page-size-selector) {
  border-color: var(--surux-flat-edge, var(--surux-border)) !important;
  border-radius: var(--surux-radius-field);
  background-color: var(--surux-flat-block, var(--surux-surface)) !important;
  color: var(--surux-text) !important;
  box-shadow: none;
}

/* 2.11 Back segment. The pill is the chip; Flat makes it an outline (minimal) or a tonal
   block (colour-block), and the knob is a bare arrow. The header band keeps the component pill. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-breadcrumb-pill:not(.surux-header-band *) {
  border: var(--surux-border-width) solid var(--surux-flat-edge, var(--surux-border));
  border-radius: var(--surux-radius-control);
  background: transparent;
  box-shadow: none;
  transform: none;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-surux-colour-style="vivid"] .surux-breadcrumb-pill:not(.surux-header-band *) {
  border-color: transparent;
  background: var(--surux-flat-tonal, var(--surux-surface));
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-breadcrumb-back:not(.surux-header-band *):is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--surux-text) 9%, transparent);
  box-shadow: none;
  transform: none;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-breadcrumb-back:not(.surux-header-band *):focus-visible {
  outline: 2px solid var(--surux-flat-focus, var(--surux-primary));
  outline-offset: 2px;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-breadcrumb-knob {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
}

/* Brand toggler (menu button): solid strokes, no depth, cast shadow, glow or drop shadow. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-sidebar-toggle .surux-toggler {
  filter: none;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-sidebar-toggle .surux-toggler::after {
  box-shadow: none;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-toggler-arm-face {
  fill: var(--surux-toggler-stroke-stop-2, var(--surux-primary));
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-toggler-arm-depth,
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-toggler-arm-cast {
  display: none;
}

/* Topbar count badge: a flat accent pill. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-topbar-badge,
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-topbar .surux-button-nav:has(.surux-topbar-badge:not([hidden])) .surux-topbar-badge {
  border-color: transparent;
  background: var(--surux-primary-action-bg);
  color: var(--surux-primary-contrast);
  box-shadow: none;
}

/* Section and dialog icon marks: square tiles, no rim light. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-edit-section-icon {
  border-radius: var(--surux-radius-control);
  border-color: transparent;
  background: var(--surux-flat-tonal, var(--surux-surface));
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-surux-colour-style="vivid"] .surux-edit-section-icon {
  background: var(--surux-flat-fill, var(--surux-primary-action-bg));
  color: var(--surux-flat-on-fill, var(--surux-primary-contrast));
}

/* Hero facts panel inside the hero block. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-page-hero-halo .surux-page-hero-summary-facts {
  border-radius: var(--surux-radius-control);
  border-color: color-mix(in srgb, currentColor 28%, transparent);
  background: transparent;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-page-hero-halo .surux-page-hero-mark {
  border-radius: var(--surux-radius-control);
  box-shadow: none;
}

/* Segmented controls: a hairline track and a filled segment; no inset or lifted thumb. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-segmented-control {
  border-radius: var(--surux-radius-control);
  box-shadow: none;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-segmented-control::before {
  border-radius: var(--surux-radius-control);
  box-shadow: none;
}

/* 2.12 Dialogs: plane, hairline, the one float shadow. The header tone accent keeps its colour. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) :is(.modal-content, .surux-modal-content) {
  background: var(--surux-flat-block, var(--surux-surface));
  border-color: var(--surux-flat-hairline, var(--surux-border));
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-modal-backdrop {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-modal-header {
  background: transparent;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-modal-header::before {
  inset: 0 auto 0 0;
  width: var(--surux-border-width-strong);
  border-radius: 0;
  background: var(--surux-modal-header-accent);
}
/* Header icon: the tone keeps its colour. Minimal: a square outline tile in the tone ink.
   Colour-block: a tile filled with the tone and lettered in the surface colour (the status chip
   inversion), because the tone ink on the tonal header measured 2.9:1. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-modal-header-icon {
  border-radius: var(--surux-radius-control);
  border-color: var(--surux-modal-header-accent);
  background: transparent;
  box-shadow: none;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-surux-colour-style="vivid"] .surux-modal-header-icon {
  background: var(--surux-modal-header-accent);
  color: var(--surux-surface-base);
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-surux-colour-style="vivid"] :is(.modal-content, .surux-modal-content) {
  border-color: transparent;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-surux-colour-style="vivid"] .surux-modal-header {
  background: var(--surux-flat-tonal, var(--surux-surface));
}

/* 2.13 Floating layers stay opaque and carry the one float shadow. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) :is(.dropdown-menu, .surux-command-overflow-panel, .surux-field-hint-popover, .surux-tab-rail-preferences, .surux-select-list) {
  background: var(--surux-surface-base);
  border-color: var(--surux-flat-hairline, var(--surux-border));
  border-radius: var(--surux-radius-card);
  box-shadow: var(--surux-flat-float-shadow, 0 0 transparent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* The phone select sheet is docked to the bottom of the viewport: square where it meets it. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-select-list[data-surux-select-sheet="true"] {
  border-radius: var(--surux-radius-card) var(--surux-radius-card) 0 0;
}

/* Toasts: an opaque plane with the tone as a solid left bar and the one float shadow. The
   tone bar is drawn here, where --surux-toast-tone exists (see NOTES: a token on :root that
   names it resolves to nothing). */

/* Active filters keep a primary frame. Invalid, disabled and read-only keep theirs. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-filter-control.is-filter-active > :is(.surux-field-surface, .surux-picker-surface):not(:has(:is(.is-invalid, .surux-input-invalid, [aria-invalid="true"], :disabled, [readonly]))) {
  --surux-picker-edge: color-mix(in srgb, var(--surux-primary) 42%, var(--surux-text));
}

/* Row tints paint the cell. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-table tbody tr.surux-row-link:hover > td,
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-table tbody tr.surux-row-activatable:hover > td,
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-table tbody tr.surux-row-link:hover > th,
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-table tbody tr.surux-row-activatable:hover > th {
  background-color: color-mix(in srgb, var(--surux-text) 6%, var(--surux-flat-block, var(--surux-surface)));
  background-image: none;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-table tbody tr.surux-row-selected > td,
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-table tbody tr.surux-row-selected > th {
  background-color: var(--surux-flat-select, var(--surux-surface));
  background-image: none;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-table tbody tr:has(.surux-row-actions-menu[open]) > td,
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-table tbody tr:has(.surux-row-actions-menu[open]) > th {
  background-color: color-mix(in srgb, var(--surux-primary) 8%, var(--surux-flat-block, var(--surux-surface)));
  background-image: none;
}

/* The Actions column is not a square plate. A closed menu stays clear; an open menu keeps the float. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-data-table-scroll {
  --surux-list-pin-bg: var(--surux-flat-block, var(--surux-surface));
  --surux-list-pin-edge: 0 0 transparent;
  --surux-thead-cell-shadow: 0 0 transparent;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-row-control-column :is(.surux-row-actions, .surux-row-actions-menu) {
  background-color: transparent;
  box-shadow: 0 0 transparent;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-table > :is(thead, tbody, tfoot) > tr > .surux-row-control-column + :is(th, td):not([colspan]:not([colspan="1"])):not(.surux-column-wrap),
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-table > :is(thead, tbody, tfoot) > tr > .surux-row-control-column:has(+ :is([colspan]:not([colspan="1"]), .surux-column-wrap)),
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-table:not(:has(> thead > tr > .surux-row-control-column)) > :is(thead, tbody, tfoot) > tr > :is(th, td):first-child:not([colspan]:not([colspan="1"])):not(.surux-column-wrap) {
  border-inline-end: 1px solid transparent;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-data-table-scroll[data-surux-scrolled-inline] .surux-table > :is(thead, tbody, tfoot) > tr > .surux-row-control-column + :is(th, td):not([colspan]:not([colspan="1"])):not(.surux-column-wrap),
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-data-table-scroll[data-surux-scrolled-inline] .surux-table > :is(thead, tbody, tfoot) > tr > .surux-row-control-column:has(+ :is([colspan]:not([colspan="1"]), .surux-column-wrap)),
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-data-table-scroll[data-surux-scrolled-inline] .surux-table:not(:has(> thead > tr > .surux-row-control-column)) > :is(thead, tbody, tfoot) > tr > :is(th, td):first-child:not([colspan]:not([colspan="1"])):not(.surux-column-wrap) {
  border-inline-end-color: var(--surux-flat-hairline, var(--surux-border));
}

/* Connection and list cards are flat blocks. The well behind the button is clear. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) :is(.surux-mobile-list-item, .surux-list-card) {
  background: var(--surux-flat-block, var(--surux-surface));
  background-image: none;
  border-radius: var(--surux-radius-card);
  box-shadow: 0 0 transparent;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) :is(.surux-mobile-list-item, .surux-list-card) :is(.surux-row-actions, .surux-row-actions-menu, .surux-mobile-list-item-actions) .surux-command-overflow-panel:not(:popover-open):where(:not([data-surux-row-sheet] > *)) {
  background-color: transparent;
  box-shadow: 0 0 transparent;
}

/* Search pills: no plate. The current pill uses the pressed bar. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-search-quick-filters {
  background: transparent;
  background-image: none;
  box-shadow: 0 0 transparent;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-search-quick-filter {
  background: transparent;
  box-shadow: 0 0 transparent;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) :is(.surux-search-quick-filter.is-active, .surux-search-quick-filter[aria-current="page"]) {
  background: var(--surux-flat-pressed, transparent);
  box-shadow: inset 0 calc(-1 * var(--surux-border-width-strong)) 0 var(--surux-quick-filter-accent, var(--surux-primary));
}

/* Two-level tabs: the vertical rail marks the current parent on the inline edge. The attribute
   lives on <html>, so it is not a descendant of the design gate. The rail, its folder and lane,
   and its buttons are square. The folder lengths are 0px, which the rail script reads as no
   curve. That overrides the shared rail shapes (a .7rem parent, a .5rem
   child and a 12px lane) for Flat vertical orientation only. Horizontal tabs keep the control
   radius. Rail controls have no plate. */
:is(
  html[data-surux-desktop-tab-orientation="vertical"][data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-tabs:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list,
  [data-surux-preference-preview][data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-tabs.surux-tabs-orientation-vertical:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list
) {
  --surux-tab-folder-radius: 0px;
  --surux-tab-folder-shoulder: 0px;
  --surux-tab-folder-lane-radius: 0px;
  border-radius: 0;
  border-inline-end-color: var(--surux-flat-edge, var(--surux-border));
}
:is(
  html[data-surux-desktop-tab-orientation="vertical"][data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-tabs:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list > .surux-tab-sublist,
  [data-surux-preference-preview][data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-tabs.surux-tabs-orientation-vertical:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list > .surux-tab-sublist
) {
  border-radius: 0;
}
:is(
  html[data-surux-desktop-tab-orientation="vertical"][data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-tabs:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list > .surux-tab-button,
  [data-surux-preference-preview][data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-tabs.surux-tabs-orientation-vertical:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list > .surux-tab-button
) {
  border-radius: 0;
}
:is(
  html[data-surux-desktop-tab-orientation="vertical"][data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-tabs:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list > .surux-tab-button.active:not(:where([data-surux-tab-folder="drawn"] > .surux-tab-button)),
  html[data-surux-desktop-tab-orientation="vertical"][data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-tabs:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list > .surux-tab-button[aria-selected="true"]:not(:where([data-surux-tab-folder="drawn"] > .surux-tab-button)),
  [data-surux-preference-preview][data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-tabs.surux-tabs-orientation-vertical:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list > .surux-tab-button.active:not(:where([data-surux-tab-folder="drawn"] > .surux-tab-button)),
  [data-surux-preference-preview][data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-tabs.surux-tabs-orientation-vertical:not([data-surux-tabs-orientation-policy="horizontal-only"]) > .surux-tab-list > .surux-tab-button[aria-selected="true"]:not(:where([data-surux-tab-folder="drawn"] > .surux-tab-button))
) {
  border-radius: 0;
  border-bottom-color: transparent;
  border-inline-end-color: var(--surux-primary);
  box-shadow: inset calc(-1 * var(--surux-border-width-strong)) 0 0 var(--surux-primary);
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-tab-rail-controls {
  background: transparent;
  box-shadow: 0 0 transparent;
}

/* Footer commands take the Flat finish. The inline panel and the command form are not a plate. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) :is(
  .surux-command-bar,
  .surux-toolbar-search-actions,
  .surux-header-band .surux-page-helper
) :is(
  .surux-command-button,
  .surux-command-overflow-trigger,
  .surux-command-button-icon-only,
  .surux-command-button-subtle-surface,
  .surux-command-overflow-trigger-icon-only-subtle,
  .surux-button-tone-standard,
  .surux-button-tone-secondary,
  .surux-button-tone-warning,
  .surux-button-tone-destructive
):where(:not(.surux-button-tone-action)) {
  border-radius: var(--surux-radius-control);
  background: var(--surux-button-bg, transparent);
  background-image: none;
  box-shadow: none;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-command-bar .surux-command-button.surux-button-tone-action {
  background: var(--surux-primary-action-bg);
  color: var(--surux-primary-contrast);
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-command-bar .surux-command-button.surux-button-tone-warning {
  color: var(--surux-warning);
  box-shadow: 0 0 0 1px var(--surux-warning);
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-command-bar .surux-command-button.surux-button-tone-destructive {
  color: var(--surux-danger);
  box-shadow: 0 0 0 1px var(--surux-danger);
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-command-bar .surux-command-button.surux-button-tone-warning:focus-visible {
  box-shadow: 0 0 0 1px var(--surux-warning), 0 0 0 2px var(--surux-surface), 0 0 0 4px var(--surux-flat-focus, var(--surux-primary));
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-command-bar .surux-command-button.surux-button-tone-destructive:focus-visible {
  box-shadow: 0 0 0 1px var(--surux-danger), 0 0 0 2px var(--surux-surface), 0 0 0 4px var(--surux-flat-focus, var(--surux-primary));
}
/* The delete dialog's action pill is the same clear plate as an inline footer panel. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-command-bar .surux-command-overflow[data-surux-command-overflow-inline-few] > .surux-command-overflow-panel,
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-command-bar .surux-command-form,
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-modal-delete-command-bar {
  background-color: transparent;
  background-image: none;
  border-color: transparent;
  box-shadow: 0 0 transparent;
}

/* Report spine keeps its tone. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-report-section.is-spine {
  box-shadow: inset var(--surux-border-width-strong) 0 0 var(--surux-primary);
}

@media (min-width: 768px) {
  :is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-drawer-content:not(.modal-fullscreen) {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
  }
}
@media (max-width: 767.98px) {
  :is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-drawer-content:not(.modal-fullscreen) {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }
}

:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) :is(.surux-page-selector, .surux-page-size-selector):focus-visible {
  outline: 2px solid var(--surux-flat-focus, var(--surux-primary));
  outline-offset: 2px;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-toast {
  border-radius: var(--surux-radius-card);
  border-color: var(--surux-flat-hairline, var(--surux-border));
  background: var(--surux-surface-base);
  background-image: none;
  box-shadow: inset .25rem 0 0 var(--surux-toast-tone), var(--surux-elevation-toast);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Toast icon: the tone glyph stands bare on the opaque plane. Default's 14% tone bubble put the
   success glyph at 2.8:1 on Light; bare, the same glyph measures above 3:1. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-toast-icon {
  border-radius: var(--surux-radius-control);
  background: transparent;
}
/* Off-canvas navigation: a docked, square-edged plane; the backdrop does not blur. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-sidebar {
  background: var(--surux-surface-base);
  border-right-color: var(--surux-border);
  border-radius: 0;
  box-shadow: var(--surux-flat-float-shadow, 0 0 transparent);
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-sidebar-backdrop,
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) body.surux-sidebar-open .surux-sidebar-backdrop {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) :is(.dropdown-item, .surux-user-menu-item, .surux-select-option) {
  border-radius: 0;
}

/* 2.14 Minimal accent discipline (Soft and Monochrome): the accent is reserved for the
   primary action, focus and selection. Eyebrows, tab glyphs and the band's back link letter
   in neutral ink. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]):not([data-surux-colour-style="vivid"]) .surux-eyebrow {
  color: var(--surux-muted);
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]):not([data-surux-colour-style="vivid"]) .surux-tab-button i {
  color: currentColor;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]):not([data-surux-colour-style="vivid"]) .surux-header-band :is(.surux-breadcrumb-back, .surux-eyebrow) {
  color: var(--surux-band-fg, var(--surux-text));
}
/* Both moods: record links in tables letter in text ink with an edge-coloured underline
   (minimal reserves the accent; colour-block carries it as fill, not ink). */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) :is(.surux-record-code, .surux-table a:not(.btn)) {
  color: var(--surux-text);
  text-decoration-color: var(--surux-flat-edge, var(--surux-border));
}

/* 2.15 Minimal framing: the toolbar is not a box (its search field is the frame), and the
   header band is a typographic header closed by one hairline rule. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]):not([data-surux-colour-style="vivid"]) .surux-card.surux-toolbar {
  border-color: transparent;
  background: transparent;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]):not([data-surux-colour-style="vivid"]) .surux-header-band {
  border-color: transparent;
  border-bottom-color: var(--surux-border);
  border-radius: 0;
  background: transparent;
}

/* Choice tiles (header texture, preference pickers): square tiles, square swatches. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-choice-tiles > button {
  border-radius: var(--surux-radius-control);
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-choice-swatch {
  border-radius: 0;
}
/* The chosen tile uses the pressed mark (tint plus accent bar) over an accent edge, instead of
   Default's 14% accent mix, which lightened the tile below 4.5:1 for its muted caption on
   Slate. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-choice-tiles > button[aria-checked="true"] {
  border-color: var(--surux-primary);
  background: var(--surux-flat-pressed, transparent);
  box-shadow: inset 0 calc(-1 * var(--surux-border-width-strong)) 0 var(--surux-flat-bar, var(--surux-primary));
}

/* 2.16 Workflow board lanes (scoped component CSS): flat blocks, no drop. The lane tone
   stripe on the header and the drag-over ring stay: they are colour, not depth. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-workflow-lane {
  background: var(--surux-flat-block, var(--surux-surface));
  box-shadow: none;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-workflow-lane.is-drag-over {
  box-shadow: inset 0 0 0 2px var(--surux-primary);
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-workflow-lane-header {
  background: var(--surux-flat-block, var(--surux-surface));
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-surux-colour-style="vivid"] .surux-workflow-lane {
  border-color: transparent;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-surux-colour-style="vivid"] .surux-workflow-lane-header {
  background: var(--surux-flat-tonal, var(--surux-surface));
  border-bottom-color: transparent;
}
/* Muted ink on the tonal lane header measured 4.3:1 on Blue night; the count and chevron
   letter between muted and text ink, which keeps them secondary and above 4.5:1. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-surux-colour-style="vivid"] .surux-workflow-lane-header :is(.surux-workflow-lane-count, .surux-workflow-lane-chevron) {
  color: color-mix(in srgb, var(--surux-muted) 55%, var(--surux-text));
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) :is(.surux-band-filter, .surux-band-segment, .surux-topbar-context) {
  border-radius: var(--surux-radius-control);
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-band-share {
  border-radius: 0;
}

:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-month-option:not(.is-selected):not(.is-current):not(:disabled):not(:hover):not(:focus-visible) {
  border-color: var(--surux-flat-edge, var(--surux-border));
}

:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) :is(.surux-month-option, .surux-date-day).is-selected {
  box-shadow: 0 0 transparent;
}

/* 2.17 Motion: Flat adds no transform, transition or animation of its own. Hover and press are
   colour changes on the components' existing transitions, so reduced motion needs no rule here. */

  /* A checked disabled switch keeps its locked cue, regardless of the design finish. */
  :is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .form-switch .form-check-input:checked:disabled {
    background-color: color-mix(in srgb, var(--surux-disabled-control-color) 54%, var(--surux-disabled-control-bg) 46%);
    border-color: var(--surux-disabled-control-border);
  }

/* Beta acceptance round A: shared controls omitted from the Flat coverage. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-surux-colour-style="vivid"] .surux-header-band .surux-breadcrumb-trail a {
  color: var(--surux-flat-on-fill, var(--surux-primary-contrast));
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-table .surux-record-code {
  overflow: visible;
  text-overflow: clip;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-tab-actions {
  background: var(--surux-app-bg);
  background-clip: content-box;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-tab-rail-controls .surux-command-button.surux-command-button-icon-only {
  --surux-button-radius-pill: var(--surux-radius-control);
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-breadcrumb-caret {
  border-radius: var(--surux-radius-control);
  border-color: var(--surux-flat-edge, var(--surux-border));
  background: var(--surux-flat-block, var(--surux-surface));
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-surux-colour-style="vivid"] .surux-header-band .surux-breadcrumb-pill .surux-breadcrumb-caret,
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-surux-colour-style="vivid"] .surux-header-band .surux-breadcrumb-pill .surux-breadcrumb-caret i {
  color: var(--surux-text);
}


/* Default Vivid Light's pressed primary accent is darker than action-bg.
   Its existing Vivid token composition selects white (4.88:1 on #127a9e).
   Other palettes and moods retain primary-contrast. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-bs-theme="light"][data-surux-theme="default"] {
  --surux-flat-vivid-action-pressed-ink: #fff;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-surux-button-style="flat"] .btn.surux-button.surux-command-button.surux-command-button-icon-only.surux-command-button-icon-only-toggle.surux-button-tone-action:is([aria-pressed="true"], .surux-button-pressed) {
  --surux-button-fg: var(--surux-flat-action-pressed-ink, var(--surux-primary-contrast)) !important;
  color: var(--surux-button-fg) !important;
}
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"])[data-surux-button-style="flat"] .btn.surux-button.surux-command-button.surux-command-button-icon-only.surux-command-button-icon-only-toggle.surux-button-tone-action:is([aria-pressed="true"], .surux-button-pressed) :is(.surux-command-button-icon, .surux-command-button-icon i) {
  color: var(--surux-button-fg) !important;
}

} /* @media screen and (forced-colors: none) */
@media screen and (forced-colors: none) {
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) {
  --surux-row-menu-shadow: var(--surux-flat-float-shadow, var(--surux-elevation-float));
  --surux-row-menu-border: var(--surux-flat-hairline, var(--surux-border));
}

/* TR-0000982. Flat clears the card shadow. The priority edge still follows the surface radius. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="flat"]:not([data-surux-contrast="high"]) .surux-workflow-card-surface::before {
  border-start-start-radius: inherit;
  border-end-start-radius: inherit;
  inset-inline-start: 0;
}
}