/* Claymorphism. Palette-tinted pastel plates, one drop, dome highlight, largest radii, squish on press.
   Screen and forced-colours: none, so print and forced colours stay on Default chrome.
   High contrast is excluded on every root. */

@media screen and (forced-colors: none) {
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] {
    --surux-radius-sm: .85rem;
    --surux-radius-md: 1.35rem;
    --surux-radius-lg: 1.85rem;
    --surux-band-radius: 20px;
    --surux-radius-card: 1.85rem;
    --surux-radius-field: 1.35rem;
    --surux-radius-control: .85rem;
    --surux-radius-chip: 1.35rem;
    --surux-radius-modal: 1.85rem;
    --surux-radius-menu: 1.35rem;
    --surux-radius-input: .85rem;
    --surux-radius-hero: 1.85rem;
    --surux-radius-hero-halo: 1.85rem;
    --surux-clay-hue: color-mix(in srgb, var(--surux-surface-base) 55%, var(--surux-text) 45%);
    --surux-clay-outer: color-mix(in srgb, var(--surux-clay-hue, transparent) 38%, transparent);
    --surux-clay-outer-strong: color-mix(in srgb, var(--surux-clay-hue, transparent) 48%, transparent);
    --surux-clay-inset-light: color-mix(in srgb, #fff 72%, transparent);
    --surux-clay-inset-dark: color-mix(in srgb, var(--surux-clay-hue, transparent) 28%, transparent);
    --surux-elevation-card:
      10px 14px 28px var(--surux-clay-outer, transparent),
      inset 10px 12px 22px var(--surux-clay-inset-light, transparent),
      inset -8px -10px 18px var(--surux-clay-inset-dark, transparent);
    --surux-elevation-raised: var(--surux-elevation-card);
    --surux-elevation-float:
      12px 18px 34px var(--surux-clay-outer-strong, transparent),
      inset 8px 10px 18px var(--surux-clay-inset-light, transparent);
    --surux-elevation-modal: var(--surux-elevation-float);
    --surux-elevation-toast: var(--surux-elevation-float);
    --surux-elevation-field: var(--surux-elevation-card);
    --surux-clay-dome-sm:
      6px 8px 14px var(--surux-clay-outer, transparent),
      inset 3px 4px 8px var(--surux-clay-inset-light, transparent),
      inset -3px -4px 8px var(--surux-clay-inset-dark, transparent);
    --surux-clay-selected:
      6px 8px 14px var(--surux-clay-outer, transparent),
      inset -3px -4px 8px var(--surux-clay-inset-dark, transparent);
    /* Full-width shell lip. Same 6px / 8px / -6px edge as the list pin, aimed down, plus the
       small dome's vertical insets. Not the card drop. */
    --surux-clay-bar:
      0 6px 8px -6px var(--surux-clay-outer, transparent),
      inset 0 3px 8px var(--surux-clay-inset-light, transparent),
      inset 0 -3px 8px var(--surux-clay-inset-dark, transparent);
    --surux-clay-hover:
      12px 18px 34px var(--surux-clay-outer-strong, transparent),
      inset 11px 13px 24px color-mix(in srgb, #fff 78%, transparent),
      inset -9px -11px 20px color-mix(in srgb, var(--surux-clay-hue, transparent) 24%, transparent);
    --surux-clay-pressed:
      4px 6px 14px color-mix(in srgb, var(--surux-clay-hue, transparent) 32%, transparent),
      inset 4px 5px 12px color-mix(in srgb, var(--surux-clay-hue, transparent) 30%, transparent),
      inset -3px -4px 10px color-mix(in srgb, #fff 40%, transparent);
    --surux-clay-pressed-dark: color-mix(in srgb, var(--surux-clay-hue, transparent) 30%, transparent);
    --surux-clay-pressed-light: color-mix(in srgb, #fff 40%, transparent);
    --surux-clay-pressed-drop: color-mix(in srgb, var(--surux-clay-hue, transparent) 32%, transparent);
    --surux-clay-press-scale: 0.985;
    --surux-clay-gloss: linear-gradient(165deg, color-mix(in srgb, #fff 22%, transparent), transparent 46%, color-mix(in srgb, var(--surux-clay-hue, transparent) 16%, transparent));
    --surux-surface: color-mix(in srgb, var(--surux-surface-base) 82%, var(--surux-primary) 18%);
    --surux-surface-2: color-mix(in srgb, var(--surux-surface-2-base) 80%, var(--surux-primary) 20%);
    --surux-clay-page-bg: color-mix(in srgb, var(--surux-surface-base) 86%, var(--surux-primary) 14%);
    /* --surux-elevation-card reaches 14px + 28px below. The same outer layer reaches 28px - 14px
       above; dark's 26px blur reaches 12px up, so 14px covers both. Inset layers stay inside the
       card. Inline-end is 10px offset + 23px of the 28px blur (33px). Inline-start stays the base
       .35rem. 38px on both sides would put a pinned rail at 1536px under the 72rem workspace once
       a 17px scrollbar gutter is reserved. */
    --surux-tab-panel-shadow-room: 42px;
    --surux-tab-panel-shadow-start-room: 14px;
    --surux-tab-panel-shadow-inline-room: 33px;
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"][data-bs-theme="dark"],
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"][data-surux-theme="night"] {
    --surux-clay-hue: color-mix(in srgb, var(--surux-surface-base) 70%, var(--surux-primary) 30%);
    --surux-clay-outer: color-mix(in srgb, #000 52%, var(--surux-clay-hue, transparent) 18%);
    --surux-clay-outer-strong: color-mix(in srgb, #000 58%, var(--surux-clay-hue, transparent) 14%);
    --surux-clay-inset-light: color-mix(in srgb, #fff 8%, transparent);
    --surux-clay-inset-dark: color-mix(in srgb, #000 36%, transparent);
    --surux-clay-gloss: linear-gradient(165deg, color-mix(in srgb, #fff 8%, transparent), transparent 46%, color-mix(in srgb, var(--surux-clay-hue, transparent) 6%, transparent));
    --surux-surface: color-mix(in srgb, var(--surux-surface-base) 94%, var(--surux-primary) 6%);
    --surux-surface-2: color-mix(in srgb, var(--surux-surface-2-base) 94%, var(--surux-primary) 6%);
    --surux-clay-page-bg: var(--surux-app-bg);
    --surux-elevation-card:
      10px 14px 26px var(--surux-clay-outer, transparent),
      inset 8px 10px 18px var(--surux-clay-inset-light, transparent),
      inset -8px -10px 16px var(--surux-clay-inset-dark, transparent);
    --surux-elevation-float:
      12px 16px 30px var(--surux-clay-outer-strong, transparent),
      inset 9px 11px 20px color-mix(in srgb, #fff 8%, transparent);
    --surux-clay-hover:
      12px 16px 30px var(--surux-clay-outer-strong, transparent),
      inset 9px 11px 20px color-mix(in srgb, #fff 8%, transparent),
      inset -9px -11px 18px color-mix(in srgb, #000 40%, transparent);
    --surux-clay-pressed:
      3px 5px 12px color-mix(in srgb, #000 55%, transparent),
      inset 5px 6px 14px color-mix(in srgb, #000 40%, transparent),
      inset -3px -4px 10px color-mix(in srgb, #fff 8%, transparent);
    --surux-clay-pressed-dark: color-mix(in srgb, #000 40%, transparent);
    --surux-clay-pressed-light: color-mix(in srgb, #fff 8%, transparent);
    --surux-clay-pressed-drop: color-mix(in srgb, #000 55%, transparent);
    --surux-elevation-field:
      6px 8px 14px var(--surux-clay-outer, transparent),
      inset -3px -4px 8px var(--surux-clay-inset-dark, transparent);
    --surux-clay-dome-sm: var(--surux-elevation-field, 0 0 transparent);
    --surux-clay-selected:
      6px 8px 14px var(--surux-clay-outer, transparent),
      inset -3px -4px 8px var(--surux-clay-inset-dark, transparent);
  }

  /* Black and Night stay neutral. A palette tint on these bases reads brown. */
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"][data-surux-appearance="black"],
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"][data-surux-theme="night"] {
    --surux-clay-hue: color-mix(in srgb, var(--surux-surface-base) 72%, #d6d6dc 28%);
    --surux-clay-outer: color-mix(in srgb, #000 62%, transparent);
    --surux-clay-outer-strong: color-mix(in srgb, #000 70%, transparent);
    --surux-surface: color-mix(in srgb, var(--surux-surface-base) 84%, #fff 16%);
    --surux-surface-2: color-mix(in srgb, var(--surux-surface-2-base) 80%, #fff 20%);
    --surux-clay-page-bg: var(--surux-app-bg);
    --surux-clay-gloss: linear-gradient(165deg, transparent, transparent);
    --surux-clay-inset-light: transparent;
  }

  /* Preserve the contrast-tested Pastel and Monochrome plates. */
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"])):is([data-surux-colour-style="pastel"], [data-surux-colour-style="monochrome"])[data-surux-surface-style="clay"] {
    --surux-surface: color-mix(in srgb, var(--surux-surface-base) 82%, #fff 18%);
    --surux-surface-2: color-mix(in srgb, var(--surux-surface-2-base) 78%, #fff 22%);
    --surux-clay-page-bg: color-mix(in srgb, var(--surux-surface-base) 90%, var(--surux-primary) 10%);
  }
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"])):is([data-surux-colour-style="pastel"], [data-surux-colour-style="monochrome"])[data-surux-surface-style="clay"]:is([data-bs-theme="dark"], [data-surux-theme="night"]) {
    --surux-surface: color-mix(in srgb, var(--surux-surface-base) 94%, var(--surux-primary) 6%);
    --surux-surface-2: color-mix(in srgb, var(--surux-surface-2-base) 94%, var(--surux-primary) 6%);
    --surux-clay-page-bg: color-mix(in srgb, var(--surux-surface-base) 94%, var(--surux-primary) 6%);
  }
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-colour-style="pastel"][data-surux-surface-style="clay"]:is([data-bs-theme="dark"], [data-surux-theme="night"]) :is(.surux-control-switch, .surux-private-switch).form-switch .form-check-input:not(:checked) {
    border-color: var(--surux-primary);
  }

  /* Slate's mid-grey is close to its text. Keep the appearance surfaces and a gloss under 5%. */
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"][data-surux-appearance="slate"] {
    --surux-surface: var(--surux-surface-base);
    --surux-surface-2: var(--surux-surface-2-base);
    --surux-clay-page-bg: var(--surux-app-bg);
    --surux-clay-inset-light: color-mix(in srgb, #fff 4%, transparent);
    --surux-clay-gloss: linear-gradient(165deg, color-mix(in srgb, #fff 4%, transparent), transparent 46%, transparent 70%);
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-header-band :is(.surux-breadcrumb-back, .surux-breadcrumb-crumb, .surux-breadcrumb-name, .surux-breadcrumb-state:not(.surux-status-tone-warning, .surux-status-tone-danger, .surux-status-tone-success), h1, .surux-eyebrow) {
    color: var(--surux-band-fg, var(--surux-text));
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] :is(
    body,
    .surux-content,
    .surux-sidebar,
    .surux-header-band
  ) {
    background-color: var(--surux-clay-page-bg, var(--surux-surface));
    background-image: none;
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] :is(
    .surux-card,
    .surux-edit-section,
    .surux-header-band,
    .surux-page-hero,
    .surux-sidebar,
    .surux-toolbar,
    .surux-data-table-card,
    .surux-collection-results:not(:has(> .surux-card)),
    .surux-summary-bar,
    .surux-workflow-lane,
    .modal-content,
    .surux-drawer-content:not(.modal-fullscreen)
  ):not(:where(
    .surux-whep-player,
    .surux-whep-player *,
    .surux-inspection-window,
    .surux-inspection-window *,
    .surux-map-canvas,
    .surux-map-canvas *,
    .modal-fullscreen .modal-content,
    .surux-status-chip,
    .surux-report-section.is-spine
  )) {
    box-shadow: var(--surux-elevation-card);
  }

  /* Gloss is a background layer over the fill the component already painted, under the text. */
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] :is(
    .surux-card,
    .surux-edit-section,
    .surux-header-band,
    .surux-sidebar,
    .surux-toolbar,
    .surux-data-table-card,
    .surux-collection-results:not(:has(> .surux-card)),
    .surux-summary-bar,
    .surux-workflow-lane,
    .modal-content,
    .surux-drawer-content:not(.modal-fullscreen)
  ):not(:where(
    .surux-whep-player,
    .surux-whep-player *,
    .surux-inspection-window,
    .surux-inspection-window *,
    .surux-map-canvas,
    .surux-map-canvas *,
    .modal-fullscreen .modal-content,
    .surux-status-chip,
    .surux-report-section.is-spine
  )) {
    background-image: var(--surux-clay-gloss, none);
  }

  /* The gloss is a layer. Modal and drawer keep an opaque colour under it, including when the owner painted only a gradient. */
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] :is(
    .modal-content,
    .surux-drawer-content:not(.modal-fullscreen)
  ):not(:where(.modal-fullscreen .modal-content)) {
    background-color: var(--surux-float-bg, var(--surux-surface));
  }

  /* Metric tiles keep their tone gradient and lay the gloss over it. */

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] :is(
    .surux-table thead th,
    .surux-table tbody td,
    .surux-table tbody th,
    .surux-list-footer
  ) {
    background-color: var(--surux-surface);
    background-image: none;
  }

  /* Application bar only. Full width, square, and the layout height. The page plane and the
     flat cell group no longer paint it. Gloss and the short bar lip come from the clay root,
     so Black, Night and Slate keep the gloss and inset light those roots already set. */
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-topbar {
    background-color: var(--surux-surface);
    background-image: var(--surux-clay-gloss, none);
    border-bottom-color: transparent;
    box-shadow: var(--surux-clay-bar, 0 0 transparent);
  }

  /* Page tints set --surux-list-row-tint on the row. Clay cells are opaque, so the tint has to
     be painted on every body cell or it shows only where the pin layer still has an image. */
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-table > tbody > tr > :is(td, th) {
    background-color: var(--surux-surface);
    background-image:
      linear-gradient(
        color-mix(in srgb, var(--surux-primary) var(--surux-list-row-plain-hover, 0%), transparent) 0 100%
      ),
      linear-gradient(
      color-mix(in srgb, var(--surux-list-row-tint-colour, var(--surux-primary)) var(--surux-list-row-tint, 0%), transparent),
      color-mix(in srgb, var(--surux-list-row-tint-colour, var(--surux-primary)) var(--surux-list-row-tint, 0%), transparent)
    );
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] :is(
    .surux-tab-button:not(.active):not([aria-selected="true"]),
    .surux-chip:not([aria-pressed="true"]):not([aria-checked="true"]):not(.active):not(.is-selected),
    .surux-chip-chooser > button:not([aria-pressed="true"]):not([aria-checked="true"]):not(.active):not(.is-selected)
  ) {
    box-shadow: var(--surux-clay-dome-sm, 0 0 transparent);
    background-image: var(--surux-clay-gloss, none);
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] :is(
    .surux-tab-button.active:not(:where([data-surux-tab-folder="drawn"] > .surux-tab-button)),
    .surux-tab-button[aria-selected="true"]:not(:where([data-surux-tab-folder="drawn"] > .surux-tab-button)),
    .surux-chip[aria-pressed="true"],
    .surux-chip[aria-checked="true"],
    .surux-chip.active,
    .surux-chip.is-selected,
    .surux-chip-chooser > button[aria-pressed="true"],
    .surux-chip-chooser > button[aria-checked="true"],
    .surux-chip-chooser > button.active,
    .surux-chip-chooser > button.is-selected
  ) {
    box-shadow: var(--surux-clay-selected, 0 0 transparent);
    background-image: none;
  }

  /* A primary leaf must beat the vertical rail's selected wash. That rule is more specific
     than the shared clay wash, so the selected leaf stayed a flat tint with a side shadow.
     The outer shadow stays the resting 6px 8px 14px footprint; only the inset is a step
     stronger. A drawn folder heading stays the connected well. Settings and the collapsed
     icon rail keep their own geometry. --surux-clay-selected is unchanged because chips share it.
     This rule owns the resting shadow only. The same leaf repeats on the shared hover, press,
     and reduced-motion press rules so those existing shadows win while the pointer is there. */
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] :is(
    .surux-tabs:not(.surux-settings-tabs):where(:not(.is-tab-rail-collapsed:not(.is-tab-rail-open))) > .surux-tab-list > .surux-tab-button.active,
    .surux-tabs:not(.surux-settings-tabs):where(:not(.is-tab-rail-collapsed:not(.is-tab-rail-open))) > .surux-tab-list > .surux-tab-button[aria-selected="true"],
    html[data-surux-desktop-tab-orientation="vertical"] .surux-tabs:not(.surux-settings-tabs):not([data-surux-tabs-orientation-policy="horizontal-only"]):where(:not(.is-tab-rail-collapsed:not(.is-tab-rail-open))) > .surux-tab-list > .surux-tab-button.active,
    html[data-surux-desktop-tab-orientation="vertical"] .surux-tabs:not(.surux-settings-tabs):not([data-surux-tabs-orientation-policy="horizontal-only"]):where(:not(.is-tab-rail-collapsed:not(.is-tab-rail-open))) > .surux-tab-list > .surux-tab-button[aria-selected="true"],
    .surux-tabs.surux-tabs-orientation-vertical:not(.surux-settings-tabs):not([data-surux-tabs-orientation-policy="horizontal-only"]):where(:not(.is-tab-rail-collapsed:not(.is-tab-rail-open))) > .surux-tab-list > .surux-tab-button.active,
    .surux-tabs.surux-tabs-orientation-vertical:not(.surux-settings-tabs):not([data-surux-tabs-orientation-policy="horizontal-only"]):where(:not(.is-tab-rail-collapsed:not(.is-tab-rail-open))) > .surux-tab-list > .surux-tab-button[aria-selected="true"]
  ):not(:where([data-surux-tab-folder="drawn"] > .surux-tab-button)) {
    border-color: transparent;
    border-bottom-color: transparent;
    border-right-color: transparent;
    background-color: var(--surux-surface);
    background-image: var(--surux-clay-gloss, none);
    color: var(--surux-text);
    box-shadow:
      6px 8px 14px var(--surux-clay-outer, transparent),
      inset 4px 5px 10px var(--surux-clay-inset-light, transparent),
      inset -4px -5px 10px var(--surux-clay-inset-dark, transparent);
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-tab-button {
    border-radius: var(--surux-radius-control) var(--surux-radius-control) 0 0;
  }

  /* The folder is one pressed clay well. The selected child stays a small dome. */
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-tab-list-hierarchy {
    --surux-tab-folder-fill: var(--surux-surface);
    --surux-tab-folder-edge: transparent;
    --surux-tab-folder-inset-dark: var(--surux-clay-pressed-dark, transparent);
    --surux-tab-folder-inset-light: var(--surux-clay-pressed-light, transparent);
    --surux-tab-folder-shadow: drop-shadow(4px 6px 14px var(--surux-clay-pressed-drop, transparent));
    --surux-tab-folder-shadow-room: 20px;
    --surux-tab-folder-radius: 12px;
    --surux-tab-folder-shoulder: 9px;
    --surux-tab-folder-ink: color-mix(in srgb, var(--surux-primary) 42%, var(--surux-text));
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-tab-sublist > .surux-tab-button:not(.active):not([aria-selected="true"]) {
    border-width: 0 !important;
    border-bottom-width: 0 !important;
    border-radius: var(--surux-radius-chip);
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--surux-muted);
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-tab-sublist > .surux-tab-button:not(.active):not([aria-selected="true"]):hover {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--surux-text);
    transform: none;
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-tab-sublist > .surux-tab-button:focus-visible {
    outline: 2px solid var(--surux-primary);
    outline-offset: 2px;
    box-shadow: none;
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-tab-sublist > .surux-tab-button.active,
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-tab-sublist > .surux-tab-button[aria-selected="true"] {
    border-width: 0 !important;
    border-bottom-width: 0 !important;
    border-radius: var(--surux-radius-chip);
    background: var(--surux-surface) !important;
    background-color: var(--surux-surface) !important;
    background-image: var(--surux-clay-gloss, none) !important;
    color: var(--surux-text);
    /* Same outer footprint as the resting dome. The inset is one step stronger so the nested
       leaf meets the primary leaf without growing the shadow room. */
    box-shadow:
      6px 8px 14px var(--surux-clay-outer, transparent),
      inset 4px 5px 10px var(--surux-clay-inset-light, transparent),
      inset -4px -5px 10px var(--surux-clay-inset-dark, transparent) !important;
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-toast {
    border-radius: var(--surux-radius-md);
    border-color: color-mix(in srgb, var(--surux-toast-tone) 28%, var(--surux-border));
    background-color: color-mix(in srgb, var(--surux-surface) 96%, var(--surux-toast-tone) 4%);
    background-image: none;
    box-shadow: inset .16rem 0 0 color-mix(in srgb, var(--surux-toast-tone) 58%, transparent), var(--surux-elevation-toast, 0 0 transparent);
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-toast-icon {
    border-radius: 999px;
    background: color-mix(in srgb, var(--surux-toast-tone) 14%, var(--surux-surface));
    color: color-mix(in srgb, var(--surux-toast-tone) 82%, var(--surux-text));
    box-shadow: var(--surux-clay-dome-sm, 0 0 transparent);
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] :is(
    .surux-page-control,
    .surux-page-size-control
  ) {
    background: var(--surux-surface) !important;
    background-color: var(--surux-surface) !important;
    border-color: color-mix(in srgb, var(--surux-text) 62%, var(--surux-surface)) !important;
    box-shadow: var(--surux-clay-dome-sm, 0 0 transparent) !important;
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] :is(
    .surux-page-selector,
    .surux-page-size-selector
  ) {
    border-radius: var(--surux-radius-input);
    background: var(--surux-clay-gloss, none) center / 100% 100% no-repeat, var(--bs-form-select-bg-img) right .75rem center / 16px 12px no-repeat;
    background-color: var(--surux-surface) !important;
    border-color: color-mix(in srgb, var(--surux-text) 62%, var(--surux-surface)) !important;
    box-shadow: var(--surux-clay-dome-sm, 0 0 transparent);
    color: var(--surux-text);
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] :is(
    .surux-page-selector,
    .surux-page-size-selector
  ):focus-visible {
    border-color: color-mix(in srgb, var(--surux-primary) 42%, var(--surux-text)) !important;
    box-shadow:
      0 0 0 2px var(--surux-surface),
      0 0 0 4px color-mix(in srgb, var(--surux-primary) 42%, var(--surux-text)) !important;
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"][data-bs-theme="light"]:not([data-surux-theme="night"]),
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"][data-bs-theme="light"]:not([data-surux-theme="night"]) :is(
    .surux-card,
    .surux-input,
    .surux-date-display,
    .surux-control-switch,
    .surux-private-switch
  ) {
    --surux-disabled-control-bg: color-mix(in srgb, var(--surux-surface) 78%, var(--surux-text) 22%);
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"][data-bs-theme="light"]:not([data-surux-theme="night"]) {
    --surux-clay-primary-ink: color-mix(in srgb, var(--surux-primary) 62%, var(--surux-text));
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"][data-bs-theme="light"]:not([data-surux-theme="night"]) :not(.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]))) :is(.surux-field-label, .surux-picker-floating-label, .form-label),
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"][data-bs-theme="light"]:not([data-surux-theme="night"]) .surux-choice-label {
    --surux-control-label-color: var(--surux-clay-primary-ink, var(--surux-text));
    color: var(--surux-control-label-color);
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"][data-bs-theme="light"]:not([data-surux-theme="night"]) .surux-filter-control.is-filter-active :is(.surux-field-label, .surux-picker-floating-label, .surux-filter-mark, .form-label),

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"][data-bs-theme="light"]:not([data-surux-theme="night"]) :is(
    .surux-field-surface,
    .surux-picker-surface
  ):has(:is(.is-invalid, .surux-input-invalid, [aria-invalid="true"])):not(:has(:disabled)):not(:has([readonly])) {
    --surux-picker-edge: color-mix(in srgb, var(--surux-warning-fill) 58%, var(--surux-text));
  }

  /* Warm Light's drop shadow sits against the right and bottom of the frame. Half warning-fill clears 3:1 there. */
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"][data-bs-theme="light"][data-surux-appearance="warm-light"]:not([data-surux-theme="night"]) :is(
    .surux-field-surface,
    .surux-picker-surface
  ):has(:is(.is-invalid, .surux-input-invalid, [aria-invalid="true"])):not(:has(:disabled)):not(:has([readonly])) {
    --surux-picker-edge: color-mix(in srgb, var(--surux-warning-fill) 50%, var(--surux-text));
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"][data-bs-theme="light"]:not([data-surux-theme="night"]) .surux-band-filter {
    color: var(--surux-clay-primary-ink, var(--surux-text));
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] :is(
    .surux-nav-search .surux-input,
    .surux-search-input-box,
    .surux-toolbar .surux-search-input-box
  ) {
    --surux-picker-edge: color-mix(in srgb, var(--surux-text) 62%, var(--surux-surface));
    border-width: 1px;
    border-color: var(--surux-picker-edge);
  }

  /* Read-only keeps the lighter fill. The recessed disabled token is for disabled controls only. */
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"][data-bs-theme="light"]:not([data-surux-theme="night"]) :is(
    .surux-read-only-surface,
    .surux-field-static,
    :is([class~="surux-field-surface"], [class~="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"]))) {
    background: color-mix(in srgb, var(--surux-surface) 62%, var(--surux-app-bg) 38%);
    background-color: color-mix(in srgb, var(--surux-surface) 62%, var(--surux-app-bg) 38%);
  }

  /* TR-0000173 clay read-only frame. Invalid and native readonly focus set their own borders below. */
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] :is(
    .surux-read-only-surface,
    .surux-field-static,
    :is([class~="surux-field-surface"], [class~="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([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(> [readonly]:focus-visible)) {
    --surux-picker-edge: color-mix(in srgb, var(--surux-text) 62%, var(--surux-surface));
    border-color: var(--surux-picker-edge);
  }

  /* TR-0000173 clay read-only warning. Light uses the clay warning mix; the border follows that token. */
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"][data-bs-theme="light"]:not([data-surux-theme="night"]) :is(
    .surux-read-only-surface,
    .surux-field-static,
    :is([class~="surux-field-surface"], [class~="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-edge: color-mix(in srgb, var(--surux-warning-fill) 58%, var(--surux-text));
    border-color: var(--surux-picker-edge);
  }

  /* TR-0000173 clay warm-light read-only warning */
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"][data-bs-theme="light"][data-surux-appearance="warm-light"]:not([data-surux-theme="night"]) :is(
    .surux-read-only-surface,
    .surux-field-static,
    :is([class~="surux-field-surface"], [class~="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-edge: color-mix(in srgb, var(--surux-warning-fill) 50%, var(--surux-text));
    border-color: var(--surux-picker-edge);
  }

  /* TR-0000173 clay read-only focus. Direct-child readonly focus only; copy and links keep their own focus. */
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] :is([class~="surux-field-surface"], [class~="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);
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .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));
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"]:is([data-bs-theme="dark"], [data-surux-theme="night"], [data-surux-appearance="slate"], [data-surux-appearance="black"]) :is(
    .surux-summary-bar-summary,
    .surux-editor-summary,
    .surux-editor-summary-status-heading > span,
    .surux-editor-summary-primary > div > span,
    .surux-editor-summary-primary-toggle > div > span,
    .surux-editor-summary-primary small,
    .surux-editor-summary-primary-toggle small,
    .surux-choice-tiles > button[aria-checked="true"] small
  ) {
    color: color-mix(in srgb, var(--surux-muted) 40%, var(--surux-text));
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"]:is([data-bs-theme="dark"], [data-surux-theme="night"], [data-surux-appearance="slate"], [data-surux-appearance="black"]) :not(.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]))) :is(.surux-field-label, .surux-picker-floating-label),
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"]:is([data-bs-theme="dark"], [data-surux-theme="night"], [data-surux-appearance="slate"], [data-surux-appearance="black"]) .surux-choice-label {
    --surux-control-label-color: color-mix(in srgb, var(--surux-muted) 40%, var(--surux-text));
    color: var(--surux-control-label-color);
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-table :is(td, th) a {
    color: color-mix(in srgb, var(--surux-primary) 42%, var(--surux-text));
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"][data-surux-appearance="slate"] :is(
    .surux-header-band,
    .surux-summary-bar
  ) {
    background-image: none;
    box-shadow:
      10px 14px 26px var(--surux-clay-outer, transparent),
      inset -8px -10px 16px var(--surux-clay-inset-dark, transparent);
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"][data-surux-appearance="slate"] :is(
    .surux-card,
    .surux-edit-section,
    .surux-workflow-lane
  ),
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"][data-surux-appearance="slate"] :where(
    .surux-table thead th,
    .surux-table tbody td
  ) {
    background-color: var(--surux-surface);
    background-image:
      linear-gradient(
        color-mix(in srgb, var(--surux-primary) var(--surux-list-row-plain-hover, 0%), transparent) 0 100%
      ),
      linear-gradient(
      color-mix(in srgb, var(--surux-list-row-tint-colour, var(--surux-primary)) var(--surux-list-row-tint, 0%), transparent),
      color-mix(in srgb, var(--surux-list-row-tint-colour, var(--surux-primary)) var(--surux-list-row-tint, 0%), transparent)
    );
  }

  /* Slate header ink is the full text colour. Muted ink on the slate surface sits under Default. */
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"][data-surux-appearance="slate"] .surux-table thead th,
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"][data-surux-appearance="slate"] .surux-table thead .surux-sort-link {
    color: var(--surux-text);
  }

  /* Cells paint an opaque surface, so the row tints have to be mixed onto the cell itself. */
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-table tbody tr.surux-row-link:hover > td,
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-table tbody tr.surux-row-activatable:hover > td,
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-table tbody tr.surux-row-link:hover > th,
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-table tbody tr.surux-row-activatable:hover > th {
    background-color: color-mix(in srgb, var(--surux-primary) 8%, var(--surux-surface));
    background-image: none;
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-table tbody tr.surux-row-selected > td,
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-table tbody tr.surux-row-selected > th {
    background-color: color-mix(in srgb, var(--surux-primary) 10%, var(--surux-surface));
    background-image: none;
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-table tbody tr:has(.surux-row-actions-menu[open]) > td,
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-table tbody tr:has(.surux-row-actions-menu[open]) > th {
    background-color: color-mix(in srgb, var(--surux-primary) 4%, var(--surux-surface));
    background-image: none;
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] :not(.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-rest: var(--surux-surface);
    --surux-picker-edge: color-mix(in srgb, var(--surux-text) 62%, var(--surux-surface));
    background-color: var(--surux-picker-rest);
    background-image: var(--surux-clay-gloss, none);
  }

  /* TR-0000748. Clay's resting frame paints --surux-picker-edge directly, so the
     Charcoal rest token never reaches the border. Ordinary Charcoal keeps that
     token. Other appearances keep the 62% clay frame. */
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"][data-surux-appearance="charcoal"] :not(.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]))):not(.surux-read-only-surface):not(.surux-field-static) {
    --surux-picker-edge: var(--surux-picker-edge-rest);
  }

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

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

  @media (max-width: 991.98px) {
    :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] [data-surux-mobile-mode="cards"].surux-data-table-card:is(:not([data-surux-list-measured]), [data-surux-list-compact]) {
      background-color: transparent;
      background-image: none;
      box-shadow: none;
    }
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] [data-surux-mobile-mode="cards"][data-surux-list-compact].surux-data-table-card {
    background-color: transparent;
    background-image: none;
    box-shadow: none;
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-data-table-scroll {
    --surux-list-pin-edge: calc(var(--surux-list-pin-dir, 1) * 6px) 0 8px -6px var(--surux-clay-outer, rgba(0, 0, 0, .28));
  }

  /* Same float-panel owner as Neumorph: the inline actions wrapper is not a plate. */
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-table :is(td, th).surux-row-control-column:not(thead th),
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-row-control-column :is(.surux-row-actions, .surux-row-actions-menu) {
    box-shadow: 0 0 transparent;
    filter: none;
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-table .surux-planner-line-needs-review > :is(td, th).surux-row-control-column:not(thead th) {
    box-shadow: inset .2rem 0 0 color-mix(in srgb, var(--surux-planner-purple, var(--surux-primary)) 72%, transparent);
  }

  /* Same float plate as the row-actions wrapper: an inline footer panel is not a tile behind Delete. The delete dialog's action pill is the same plate. */
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-command-bar .surux-command-overflow[data-surux-command-overflow-inline-few] > .surux-command-overflow-panel,
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-command-bar .surux-command-form,
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-modal-delete-command-bar {
    background-color: transparent;
    background-image: none;
    border-color: transparent;
    box-shadow: 0 0 transparent;
    filter: none;
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] :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: 999px;
    border-color: transparent !important;
    background: var(--surux-surface) !important;
    background-image: var(--surux-clay-gloss, none) !important;
    color: var(--surux-text) !important;
    box-shadow: var(--surux-clay-dome-sm, 0 0 transparent) !important;
    filter: none !important;
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-command-bar .surux-command-button.surux-button-tone-action,
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-toolbar-search-actions .surux-command-button.surux-button-tone-action,
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-header-band .surux-page-helper .surux-command-button.surux-button-tone-action {
    border-radius: 999px;
    border-color: transparent !important;
    background: var(--surux-primary-action-bg) !important;
    background-image: none !important;
    color: var(--surux-primary-contrast, #fff) !important;
    box-shadow: var(--surux-clay-dome-sm, 0 0 transparent) !important;
    filter: none !important;
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] :is(
    .surux-command-bar,
    .surux-toolbar-search-actions,
    .surux-header-band .surux-page-helper
  ) :is(.surux-command-button, .surux-command-overflow-trigger, .surux-button-tone-warning, .surux-button-tone-destructive, .surux-button-tone-action):where(:not(.surux-command-button-icon-only-subtle))::before,
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] :is(
    .surux-command-bar,
    .surux-toolbar-search-actions,
    .surux-header-band .surux-page-helper
  ) :is(.surux-command-button, .surux-command-overflow-trigger, .surux-button-tone-warning, .surux-button-tone-destructive, .surux-button-tone-action):where(:not(.surux-command-button-icon-only-subtle))::after {
    content: none !important;
    background: none !important;
    background-image: none !important;
    box-shadow: 0 0 transparent !important;
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] :is(
    .surux-command-bar,
    .surux-toolbar-search-actions,
    .surux-header-band .surux-page-helper
  ) :is(.surux-command-button, .surux-command-overflow-trigger) :is(.surux-command-button-icon, .surux-command-button-icon i) {
    background: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: 0 0 transparent !important;
    color: inherit !important;
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-command-bar .surux-command-button.surux-button-tone-destructive {
    color: var(--surux-danger) !important;
    box-shadow:
      var(--surux-clay-dome-sm, 0 0 transparent),
      0 0 0 1px var(--surux-danger) !important;
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-command-bar .surux-command-button.surux-button-tone-destructive :is(.surux-command-button-icon, .surux-command-button-icon i) {
    color: var(--surux-danger) !important;
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-command-bar .surux-command-button.surux-button-tone-warning {
    color: var(--surux-warning) !important;
    box-shadow:
      var(--surux-clay-dome-sm, 0 0 transparent),
      0 0 0 1px var(--surux-warning) !important;
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-command-bar .surux-command-button.surux-button-tone-warning :is(.surux-command-button-icon, .surux-command-button-icon i) {
    color: var(--surux-warning) !important;
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] :is(
    .surux-command-bar .surux-command-button,
    .surux-toolbar-search-actions .surux-command-button,
    .surux-header-band .surux-page-helper .surux-command-overflow-trigger
  ):focus-visible {
    outline: none;
    box-shadow:
      var(--surux-clay-dome-sm, 0 0 transparent),
      0 0 0 2px var(--surux-surface),
      0 0 0 4px var(--surux-text) !important;
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-command-bar .surux-command-button.surux-button-tone-destructive:focus-visible {
    box-shadow:
      var(--surux-clay-dome-sm, 0 0 transparent),
      0 0 0 1px var(--surux-danger),
      0 0 0 2px var(--surux-surface),
      0 0 0 4px var(--surux-text) !important;
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-command-bar .surux-command-button.surux-button-tone-warning:focus-visible {
    box-shadow:
      var(--surux-clay-dome-sm, 0 0 transparent),
      0 0 0 1px var(--surux-warning),
      0 0 0 2px var(--surux-surface),
      0 0 0 4px var(--surux-text) !important;
  }

  @media (hover: hover) {
    :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] :is(
      .surux-command-bar,
      .surux-toolbar-search-actions,
      .surux-header-band .surux-page-helper
    ) :is(.surux-command-button, .surux-command-overflow-trigger):where(:not(.surux-button-tone-action, .surux-button-tone-warning, .surux-button-tone-destructive)):hover {
      box-shadow: var(--surux-clay-hover, 0 0 transparent) !important;
    }

    :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-command-bar .surux-button-tone-warning.surux-command-button:hover {
      box-shadow:
        var(--surux-clay-hover, 0 0 transparent),
        0 0 0 1px var(--surux-warning) !important;
    }

    :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-command-bar .surux-button-tone-destructive.surux-command-button:hover {
      box-shadow:
        var(--surux-clay-hover, 0 0 transparent),
        0 0 0 1px var(--surux-danger) !important;
    }

    :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-command-bar .surux-button-tone-action.surux-command-button:hover {
      box-shadow: var(--surux-clay-hover, 0 0 transparent) !important;
    }
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"][data-bs-theme="light"]:not([data-surux-theme="night"]) .surux-sidebar {
    background: var(--surux-clay-page-bg, var(--surux-surface)) !important;
    background-image: none !important;
    border-right-color: color-mix(in srgb, var(--surux-text) 22%, var(--surux-surface)) !important;
    box-shadow: 0 0 transparent !important;
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"][data-bs-theme="light"]:not([data-surux-theme="night"]) body.surux-sidebar-open .surux-sidebar {
    box-shadow: var(--surux-elevation-float, 0 0 transparent) !important;
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-row-control-column :is(.surux-command-button-icon-only, .surux-command-overflow-trigger):where(:not(.surux-row-capsule *)) {
    border-radius: 999px;
    border-color: transparent !important;
    background: var(--surux-surface) !important;
    background-image: var(--surux-clay-gloss, none) !important;
    box-shadow: var(--surux-clay-dome-sm, 0 0 transparent) !important;
    filter: none !important;
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-column-filter-trigger {
    border-color: transparent;
    background: var(--surux-surface);
    background-image: var(--surux-clay-gloss, none);
    color: var(--surux-text);
    box-shadow: var(--surux-clay-dome-sm, 0 0 transparent);
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] :is(
    .surux-column-filter-trigger.active,
    .surux-column-filter-root.is-open .surux-column-filter-trigger
  ) {
    background: var(--surux-surface);
    background-image: none;
    color: color-mix(in srgb, var(--surux-primary) 42%, var(--surux-text));
    box-shadow: var(--surux-clay-pressed, 0 0 transparent);
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-column-filter-trigger:focus-visible {
    outline: none;
    box-shadow:
      var(--surux-clay-dome-sm, 0 0 transparent),
      0 0 0 2px var(--surux-surface),
      0 0 0 4px color-mix(in srgb, var(--surux-primary) 42%, var(--surux-text));
  }

  @media (hover: hover) {
    :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] :is(
      .surux-tabs:not(.surux-settings-tabs):where(:not(.is-tab-rail-collapsed:not(.is-tab-rail-open))) > .surux-tab-list > .surux-tab-button.active,
      .surux-tabs:not(.surux-settings-tabs):where(:not(.is-tab-rail-collapsed:not(.is-tab-rail-open))) > .surux-tab-list > .surux-tab-button[aria-selected="true"],
      html[data-surux-desktop-tab-orientation="vertical"] .surux-tabs:not(.surux-settings-tabs):not([data-surux-tabs-orientation-policy="horizontal-only"]):where(:not(.is-tab-rail-collapsed:not(.is-tab-rail-open))) > .surux-tab-list > .surux-tab-button.active,
      html[data-surux-desktop-tab-orientation="vertical"] .surux-tabs:not(.surux-settings-tabs):not([data-surux-tabs-orientation-policy="horizontal-only"]):where(:not(.is-tab-rail-collapsed:not(.is-tab-rail-open))) > .surux-tab-list > .surux-tab-button[aria-selected="true"],
      .surux-tabs.surux-tabs-orientation-vertical:not(.surux-settings-tabs):not([data-surux-tabs-orientation-policy="horizontal-only"]):where(:not(.is-tab-rail-collapsed:not(.is-tab-rail-open))) > .surux-tab-list > .surux-tab-button.active,
      .surux-tabs.surux-tabs-orientation-vertical:not(.surux-settings-tabs):not([data-surux-tabs-orientation-policy="horizontal-only"]):where(:not(.is-tab-rail-collapsed:not(.is-tab-rail-open))) > .surux-tab-list > .surux-tab-button[aria-selected="true"]
    ):not(:where(.surux-whep-player *, .surux-inspection-window *, .surux-map-canvas *, :disabled, [data-surux-tab-folder="drawn"] > .surux-tab-button:is(.active, [aria-selected="true"]))):hover,
    :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] :is(
      a.surux-card,
      .surux-card[href],
      .surux-card[role="button"],
      .surux-tab-button,
      .surux-chip[href],
      .surux-chip[role="button"],
      .surux-chip-chooser > button
    ):not(:where(.surux-whep-player *, .surux-inspection-window *, .surux-map-canvas *, :disabled, [data-surux-tab-folder="drawn"] > .surux-tab-button:is(.active, [aria-selected="true"]))):hover {
      box-shadow: var(--surux-clay-hover, 0 0 transparent);
    }
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] :is(
    .surux-tabs:not(.surux-settings-tabs):where(:not(.is-tab-rail-collapsed:not(.is-tab-rail-open))) > .surux-tab-list > .surux-tab-button.active,
    .surux-tabs:not(.surux-settings-tabs):where(:not(.is-tab-rail-collapsed:not(.is-tab-rail-open))) > .surux-tab-list > .surux-tab-button[aria-selected="true"],
    html[data-surux-desktop-tab-orientation="vertical"] .surux-tabs:not(.surux-settings-tabs):not([data-surux-tabs-orientation-policy="horizontal-only"]):where(:not(.is-tab-rail-collapsed:not(.is-tab-rail-open))) > .surux-tab-list > .surux-tab-button.active,
    html[data-surux-desktop-tab-orientation="vertical"] .surux-tabs:not(.surux-settings-tabs):not([data-surux-tabs-orientation-policy="horizontal-only"]):where(:not(.is-tab-rail-collapsed:not(.is-tab-rail-open))) > .surux-tab-list > .surux-tab-button[aria-selected="true"],
    .surux-tabs.surux-tabs-orientation-vertical:not(.surux-settings-tabs):not([data-surux-tabs-orientation-policy="horizontal-only"]):where(:not(.is-tab-rail-collapsed:not(.is-tab-rail-open))) > .surux-tab-list > .surux-tab-button.active,
    .surux-tabs.surux-tabs-orientation-vertical:not(.surux-settings-tabs):not([data-surux-tabs-orientation-policy="horizontal-only"]):where(:not(.is-tab-rail-collapsed:not(.is-tab-rail-open))) > .surux-tab-list > .surux-tab-button[aria-selected="true"]
  ):not(:where(.surux-whep-player *, .surux-inspection-window *, .surux-map-canvas *, :disabled, [data-surux-tab-folder="drawn"] > .surux-tab-button:is(.active, [aria-selected="true"]))):active,
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] :is(
    a.surux-card,
    .surux-card[href],
    .surux-card[role="button"],
    .surux-tab-button,
    .surux-chip[href],
    .surux-chip[role="button"],
    .surux-chip-chooser > button
  ):not(:where(.surux-whep-player *, .surux-inspection-window *, .surux-map-canvas *, :disabled, [data-surux-tab-folder="drawn"] > .surux-tab-button:is(.active, [aria-selected="true"]))):active {
    transform: scale(var(--surux-clay-press-scale, 1));
    box-shadow: var(--surux-clay-pressed, 0 0 transparent);
  }

  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-month-option:not(.is-selected):not(:disabled) {
    box-shadow: var(--surux-clay-dome-sm, 0 0 transparent);
    background-image: var(--surux-clay-gloss, none);
  }

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

  @media (prefers-reduced-motion: reduce) {
    :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] :is(
      .surux-tabs:not(.surux-settings-tabs):where(:not(.is-tab-rail-collapsed:not(.is-tab-rail-open))) > .surux-tab-list > .surux-tab-button.active,
      .surux-tabs:not(.surux-settings-tabs):where(:not(.is-tab-rail-collapsed:not(.is-tab-rail-open))) > .surux-tab-list > .surux-tab-button[aria-selected="true"],
      html[data-surux-desktop-tab-orientation="vertical"] .surux-tabs:not(.surux-settings-tabs):not([data-surux-tabs-orientation-policy="horizontal-only"]):where(:not(.is-tab-rail-collapsed:not(.is-tab-rail-open))) > .surux-tab-list > .surux-tab-button.active,
      html[data-surux-desktop-tab-orientation="vertical"] .surux-tabs:not(.surux-settings-tabs):not([data-surux-tabs-orientation-policy="horizontal-only"]):where(:not(.is-tab-rail-collapsed:not(.is-tab-rail-open))) > .surux-tab-list > .surux-tab-button[aria-selected="true"],
      .surux-tabs.surux-tabs-orientation-vertical:not(.surux-settings-tabs):not([data-surux-tabs-orientation-policy="horizontal-only"]):where(:not(.is-tab-rail-collapsed:not(.is-tab-rail-open))) > .surux-tab-list > .surux-tab-button.active,
      .surux-tabs.surux-tabs-orientation-vertical:not(.surux-settings-tabs):not([data-surux-tabs-orientation-policy="horizontal-only"]):where(:not(.is-tab-rail-collapsed:not(.is-tab-rail-open))) > .surux-tab-list > .surux-tab-button[aria-selected="true"]
    ):not(:where([data-surux-tab-folder="drawn"] > .surux-tab-button:is(.active, [aria-selected="true"]))):active,
    :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] :is(
      a.surux-card,
      .surux-card[href],
      .surux-card[role="button"],
      .surux-tab-button,
      .surux-chip,
      .surux-chip-chooser > button
    ):not(:where([data-surux-tab-folder="drawn"] > .surux-tab-button:is(.active, [aria-selected="true"]))):active {
      transform: none;
      box-shadow: var(--surux-elevation-card);
    }
  }
  @media (min-width: 992px) {
    :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] :is(.surux-tabs.surux-tabs-orientation-vertical, html[data-surux-desktop-tab-orientation="vertical"] .surux-tabs):not([data-surux-tabs-orientation-policy="horizontal-only"]):where(:not(.is-tab-rail-collapsed:not(.is-tab-rail-open))) > .surux-tab-list > .surux-tab-button:where(:not(.active, [aria-selected="true"])) {
      border-radius: var(--surux-radius-control);
      width: calc(100% - 20px);
      margin-inline-end: 20px;
    }
  }
  /* External paging is page chrome, not a filled extension of the card. */
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-collection-footer > .surux-list-footer {
    background: transparent;
    border-color: transparent;
    padding-block-start: 1rem;
  }
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] :is(.surux-page-control, .surux-page-size-control) { border-radius: 999px; }
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-list-footer .surux-select-trigger { border-radius: 999px; }
  /* Locked switches retain the light read-only surface, without a raised disabled slab. */
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"][data-bs-theme="light"]:not([data-surux-theme="night"]) :is(.surux-field-surface, .surux-picker-surface):has(.surux-field-switch-input:disabled):not(:has(:is(.is-invalid, .surux-input-invalid, [aria-invalid="true"], [readonly]))) {
    background: color-mix(in srgb, var(--surux-surface) 62%, var(--surux-app-bg) 38%);
    box-shadow: none;
  }
  /* Header and footer close use the same clay key in both appearances. */
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-modal-header .btn.surux-button.surux-modal-close.surux-command-button-icon-only {
    --surux-button-radius-control: var(--surux-radius-control);
    --surux-button-radius-pill: var(--surux-radius-control);
    border-radius: var(--surux-radius-control);
    opacity: 1;
  }
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] .surux-modal-header .btn.surux-button.surux-modal-close.surux-command-button-icon-only:where(:not(:hover, :focus-visible, :active, :disabled, [aria-disabled="true"])) {
    border: 1px solid var(--surux-border) !important;
    background: var(--surux-surface) !important;
    box-shadow: var(--surux-clay-dome-sm, 0 0 transparent) !important;
  }

  /* Shared list composition maps raised tiles, one panel, and pressed keys. */
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] {
    --surux-list-shadow-inline-room: var(--surux-tab-panel-shadow-inline-room, 0px);
    --surux-list-shadow-bottom-room: var(--surux-tab-panel-shadow-room, 0px);
    --surux-list-panel-overflow: visible;
    --surux-list-panel-shadow: var(--surux-elevation-card);
    --surux-list-action-bg: var(--surux-surface);
    --surux-list-action-shadow: var(--surux-elevation-card);
    --surux-list-tile-shadow: var(--surux-elevation-card);
    --surux-list-tile-bg: var(--surux-surface);
    --surux-list-summary-bg: var(--surux-surface);
    --surux-list-panel-heading-radius: var(--surux-radius-control);
    --surux-list-summary-shadow: var(--surux-elevation-card);
    --surux-list-key-shadow: var(--surux-elevation-card);
    --surux-list-plate-radius: var(--surux-radius-control);
    --surux-list-selected-ink: var(--surux-clay-primary-ink, var(--surux-text));
    --surux-list-selected-bg: var(--surux-surface);
    --surux-list-selected-shadow: var(--surux-clay-pressed, 0 0 transparent);
  }
  /* Dark selected keys use the shared surface ink explicitly; light keeps its primary ink. */
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"]:is([data-bs-theme="dark"], [data-surux-theme="night"]) {
    --surux-list-selected-ink: var(--surux-text);
  }
  :is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"][data-bs-theme="light"] .surux-list-status-available {
    color: var(--surux-clay-primary-ink, var(--surux-text));
  }



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

@media screen and (forced-colors: none) {
  html[data-surux-surface-style="clay"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-command-button.surux-button-tone-secondary:is(.surux-button-pressed, [aria-pressed="true"]):not(:where(.surux-command-button-icon-only, .surux-command-button-subtle-surface, :disabled, [aria-disabled="true"])) {
    --surux-button-composed-bg: linear-gradient(145deg, #4b4b4b, #303030);
    --surux-button-fg: #fff;
  }
  html[data-surux-surface-style="clay"]:is([data-bs-theme="dark"], [data-surux-theme="night"]):not([data-surux-contrast="high"]) .surux-command-button.surux-button-tone-secondary:is(.surux-button-pressed, [aria-pressed="true"]):not(:where(.surux-command-button-icon-only, .surux-command-button-subtle-surface, :disabled, [aria-disabled="true"]))::before {
    opacity: 0;
  }

/* TR-0000982. The priority edge stays inside the clay radius, under the drop, not beside it. */
:is(html, [data-surux-preference-preview])[data-surux-surface-style="clay"]:not([data-surux-contrast="high"]) .surux-workflow-card-surface::before {
  border-start-start-radius: inherit;
  border-end-start-radius: inherit;
  inset-inline-start: 0;
}
}


@media screen and (forced-colors: none) {
:is(html:not([data-surux-contrast="high"]), [data-surux-preference-preview]:not([data-surux-contrast="high"]))[data-surux-surface-style="clay"] {
  --surux-metric-tile-bg: var(--surux-summary-bg, var(--surux-surface));
  --surux-metric-tile-edge: var(--surux-border);
  --surux-metric-tile-radius: var(--surux-radius-card, .75rem);
  --surux-metric-tile-shadow: inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent);
}
}