/* Shared design contract. Per-design tokens and signatures live in surux.design.*.css.
   Every rule is gated on a non-default data-surux-surface-style. Default is the absence of the attribute.
   High contrast, forced colours and print keep Default, including Default's shadows.
   Design sheets and this contract apply only under @media screen and (forced-colors: none).
   There is no @media print override. An elevation token that must be zeroed uses 0 0 transparent, never none. */

@media screen and (forced-colors: none) {
  /* Clay, Flat, Skeuomorphism and Cyberpunk on every appearance. Neumorph only on Light and Warm Light (its own sheet condition). */
  :is(
    html:not([data-surux-contrast="high"]):is([data-surux-surface-style="clay"], [data-surux-surface-style="flat"], [data-surux-surface-style="skeuo"], [data-surux-surface-style="cyberpunk"], [data-surux-surface-style="neumorph"][data-bs-theme="light"]:not([data-surux-theme="night"])),
    [data-surux-preference-preview]:not([data-surux-contrast="high"]):is([data-surux-surface-style="clay"], [data-surux-surface-style="flat"], [data-surux-surface-style="skeuo"], [data-surux-surface-style="cyberpunk"], [data-surux-surface-style="neumorph"][data-bs-theme="light"]:not([data-surux-theme="night"]))
  ) {
    --surux-float-bg: var(--surux-surface, var(--surux-surface-base, #ffffff));
    --surux-float-border: var(--surux-border, currentColor);
    --surux-float-shadow: var(--surux-elevation-float);
  }

  /* Keep each non-default design's existing back-link paint. Its own later sheet
     still owns material ink; the base Light correction is Default's alone. */
  :where(
    html:not([data-surux-contrast="high"]):is([data-surux-surface-style="clay"], [data-surux-surface-style="flat"], [data-surux-surface-style="skeuo"], [data-surux-surface-style="cyberpunk"], [data-surux-surface-style="neumorph"][data-bs-theme="light"]:not([data-surux-theme="night"])),
    [data-surux-preference-preview]:not([data-surux-contrast="high"]):is([data-surux-surface-style="clay"], [data-surux-surface-style="flat"], [data-surux-surface-style="skeuo"], [data-surux-surface-style="cyberpunk"], [data-surux-surface-style="neumorph"][data-bs-theme="light"]:not([data-surux-theme="night"]))
  ) .surux-header-band .surux-breadcrumb-back,
  :where(
    html:not([data-surux-contrast="high"]):is([data-surux-surface-style="clay"], [data-surux-surface-style="flat"], [data-surux-surface-style="skeuo"], [data-surux-surface-style="cyberpunk"], [data-surux-surface-style="neumorph"][data-bs-theme="light"]:not([data-surux-theme="night"])),
    [data-surux-preference-preview]:not([data-surux-contrast="high"]):is([data-surux-surface-style="clay"], [data-surux-surface-style="flat"], [data-surux-surface-style="skeuo"], [data-surux-surface-style="cyberpunk"], [data-surux-surface-style="neumorph"][data-bs-theme="light"]:not([data-surux-theme="night"]))
  ) .surux-header-band .surux-breadcrumb-back:is(:hover, :focus-visible) {
    color: var(--surux-primary);
  }

  /* Opaque floating layers. Text never shows through. Component z-index is left alone. */
  :is(
    html:not([data-surux-contrast="high"]):is([data-surux-surface-style="clay"], [data-surux-surface-style="flat"], [data-surux-surface-style="skeuo"], [data-surux-surface-style="cyberpunk"], [data-surux-surface-style="neumorph"][data-bs-theme="light"]:not([data-surux-theme="night"])),
    [data-surux-preference-preview]:not([data-surux-contrast="high"]):is([data-surux-surface-style="clay"], [data-surux-surface-style="flat"], [data-surux-surface-style="skeuo"], [data-surux-surface-style="cyberpunk"], [data-surux-surface-style="neumorph"][data-bs-theme="light"]:not([data-surux-theme="night"]))
  ) :is(
    .dropdown-menu,
    .surux-picker-results,
    .surux-picker-results[popover],
    .surux-picker-actions-menu,
    .surux-field-hint-popover,
    .surux-select-list,
    .surux-select-list:popover-open,
    .surux-date-popover,
    .surux-column-filter-popover,
    .surux-toolbar-grid-filters,
    .surux-live-search-filter-menu,
    .surux-command-overflow-panel,
    .surux-hero-action-flyout
  ) {
    background-color: var(--surux-float-bg, var(--surux-surface, #ffffff));
    background-image: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: var(--surux-float-border, currentColor);
    box-shadow: var(--surux-float-shadow, var(--surux-elevation-float));
    color: var(--surux-text);
  }

  /* The date popover is the float: it takes the design's menu radius. The calendar inside follows it and paints nothing of its own. */
  :is(
    html:not([data-surux-contrast="high"]):is([data-surux-surface-style="clay"], [data-surux-surface-style="flat"], [data-surux-surface-style="skeuo"], [data-surux-surface-style="cyberpunk"], [data-surux-surface-style="neumorph"][data-bs-theme="light"]:not([data-surux-theme="night"])),
    [data-surux-preference-preview]:not([data-surux-contrast="high"]):is([data-surux-surface-style="clay"], [data-surux-surface-style="flat"], [data-surux-surface-style="skeuo"], [data-surux-surface-style="cyberpunk"], [data-surux-surface-style="neumorph"][data-bs-theme="light"]:not([data-surux-theme="night"]))
  ) .surux-date-popover {
    border-radius: var(--surux-radius-menu);
  }

  :is(
    html:not([data-surux-contrast="high"]):is([data-surux-surface-style="clay"], [data-surux-surface-style="flat"], [data-surux-surface-style="skeuo"], [data-surux-surface-style="cyberpunk"], [data-surux-surface-style="neumorph"][data-bs-theme="light"]:not([data-surux-theme="night"])),
    [data-surux-preference-preview]:not([data-surux-contrast="high"]):is([data-surux-surface-style="clay"], [data-surux-surface-style="flat"], [data-surux-surface-style="skeuo"], [data-surux-surface-style="cyberpunk"], [data-surux-surface-style="neumorph"][data-bs-theme="light"]:not([data-surux-theme="night"]))
  ) .surux-date-popover > .surux-date-calendar {
    border-color: var(--surux-float-border, currentColor);
    border-radius: inherit;
    background-color: transparent;
    background-image: none;
    box-shadow: 0 0 transparent;
  }

  :is(
    html:not([data-surux-contrast="high"]):is([data-surux-surface-style="clay"], [data-surux-surface-style="flat"], [data-surux-surface-style="skeuo"], [data-surux-surface-style="cyberpunk"], [data-surux-surface-style="neumorph"][data-bs-theme="light"]:not([data-surux-theme="night"])),
    [data-surux-preference-preview]:not([data-surux-contrast="high"]):is([data-surux-surface-style="clay"], [data-surux-surface-style="flat"], [data-surux-surface-style="skeuo"], [data-surux-surface-style="cyberpunk"], [data-surux-surface-style="neumorph"][data-bs-theme="light"]:not([data-surux-theme="night"]))
  ) .surux-date-popover :is(.surux-month-option, .surux-date-day, .surux-date-nav, .surux-date-today, .surux-date-clear) {
    border-radius: var(--surux-radius-control);
  }

  :is(
    html:not([data-surux-contrast="high"]):is([data-surux-surface-style="clay"], [data-surux-surface-style="flat"], [data-surux-surface-style="skeuo"], [data-surux-surface-style="cyberpunk"], [data-surux-surface-style="neumorph"][data-bs-theme="light"]:not([data-surux-theme="night"])),
    [data-surux-preference-preview]:not([data-surux-contrast="high"]):is([data-surux-surface-style="clay"], [data-surux-surface-style="flat"], [data-surux-surface-style="skeuo"], [data-surux-surface-style="cyberpunk"], [data-surux-surface-style="neumorph"][data-bs-theme="light"]:not([data-surux-theme="night"]))
  ) :is(select option, select optgroup) {
    background-color: var(--surux-float-bg, var(--surux-surface, #ffffff));
    background-image: none;
    color: var(--surux-text);
  }

  :is(
    html:not([data-surux-contrast="high"]):is([data-surux-surface-style="clay"], [data-surux-surface-style="flat"], [data-surux-surface-style="skeuo"], [data-surux-surface-style="cyberpunk"], [data-surux-surface-style="neumorph"][data-bs-theme="light"]:not([data-surux-theme="night"])),
    [data-surux-preference-preview]:not([data-surux-contrast="high"]):is([data-surux-surface-style="clay"], [data-surux-surface-style="flat"], [data-surux-surface-style="skeuo"], [data-surux-surface-style="cyberpunk"], [data-surux-surface-style="neumorph"][data-bs-theme="light"]:not([data-surux-theme="night"]))
  ) :is(
    .surux-picker-results:popover-open,
    .surux-picker-actions-menu:popover-open,
    .surux-field-hint-popover:popover-open
  ) {
    background-color: var(--surux-float-bg, var(--surux-surface, #ffffff));
    background-image: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: var(--surux-float-shadow, var(--surux-elevation-float));
  }

  /* Full-screen modals keep square docked edges. */
  :is(
    html:not([data-surux-contrast="high"]):is([data-surux-surface-style="clay"], [data-surux-surface-style="flat"], [data-surux-surface-style="skeuo"], [data-surux-surface-style="cyberpunk"], [data-surux-surface-style="neumorph"][data-bs-theme="light"]:not([data-surux-theme="night"])),
    [data-surux-preference-preview]:not([data-surux-contrast="high"]):is([data-surux-surface-style="clay"], [data-surux-surface-style="flat"], [data-surux-surface-style="skeuo"], [data-surux-surface-style="cyberpunk"], [data-surux-surface-style="neumorph"][data-bs-theme="light"]:not([data-surux-theme="night"]))
  ) .modal-fullscreen .modal-content {
    border-radius: 0;
  }
}

@media screen and (forced-colors: none) and (prefers-reduced-transparency: reduce) {
  /* Same root as the float contract: not high contrast, and Neumorph only on Light and Warm Light. */
  :is(
    html:not([data-surux-contrast="high"]):is([data-surux-surface-style="clay"], [data-surux-surface-style="flat"], [data-surux-surface-style="skeuo"], [data-surux-surface-style="cyberpunk"], [data-surux-surface-style="neumorph"][data-bs-theme="light"]:not([data-surux-theme="night"])),
    [data-surux-preference-preview]:not([data-surux-contrast="high"]):is([data-surux-surface-style="clay"], [data-surux-surface-style="flat"], [data-surux-surface-style="skeuo"], [data-surux-surface-style="cyberpunk"], [data-surux-surface-style="neumorph"][data-bs-theme="light"]:not([data-surux-theme="night"]))
  ) {
    --surux-blur-shell: blur(0px);
    --surux-blur-overlay: blur(0px);
    --surux-blur-float: blur(0px);
  }

  :is(
    html:not([data-surux-contrast="high"]):is([data-surux-surface-style="clay"], [data-surux-surface-style="flat"], [data-surux-surface-style="skeuo"], [data-surux-surface-style="cyberpunk"], [data-surux-surface-style="neumorph"][data-bs-theme="light"]:not([data-surux-theme="night"])),
    [data-surux-preference-preview]:not([data-surux-contrast="high"]):is([data-surux-surface-style="clay"], [data-surux-surface-style="flat"], [data-surux-surface-style="skeuo"], [data-surux-surface-style="cyberpunk"], [data-surux-surface-style="neumorph"][data-bs-theme="light"]:not([data-surux-theme="night"]))
  ) :is(
    .surux-card,
    .surux-edit-section,
    .surux-header-band,
    .surux-page-hero,
    .modal-content
  ) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: var(--surux-surface);
  }
}

@media screen and (forced-colors: none) and (prefers-reduced-motion: reduce) {
  /* Stop the press transform and the pressed shadow. Leave colour transitions, including the tab's. */
  :is(
    html:not([data-surux-contrast="high"]):is([data-surux-surface-style="clay"], [data-surux-surface-style="flat"], [data-surux-surface-style="skeuo"], [data-surux-surface-style="cyberpunk"], [data-surux-surface-style="neumorph"][data-bs-theme="light"]:not([data-surux-theme="night"])),
    [data-surux-preference-preview]:not([data-surux-contrast="high"]):is([data-surux-surface-style="clay"], [data-surux-surface-style="flat"], [data-surux-surface-style="skeuo"], [data-surux-surface-style="cyberpunk"], [data-surux-surface-style="neumorph"][data-bs-theme="light"]:not([data-surux-theme="night"]))
  ) :is(
    .surux-card,
    .surux-tab-button,
    .surux-chip,
    .surux-metric-strip-item,
    .surux-field-surface
  ) {
    transform: none;
  }

  :is(
    html:not([data-surux-contrast="high"]):is([data-surux-surface-style="clay"], [data-surux-surface-style="flat"], [data-surux-surface-style="skeuo"], [data-surux-surface-style="cyberpunk"], [data-surux-surface-style="neumorph"][data-bs-theme="light"]:not([data-surux-theme="night"])),
    [data-surux-preference-preview]:not([data-surux-contrast="high"]):is([data-surux-surface-style="clay"], [data-surux-surface-style="flat"], [data-surux-surface-style="skeuo"], [data-surux-surface-style="cyberpunk"], [data-surux-surface-style="neumorph"][data-bs-theme="light"]:not([data-surux-theme="night"]))
  ) :is(
    .surux-card,
    .surux-chip,
    .surux-metric-strip-item
  ):active {
    box-shadow: var(--surux-elevation-card);
    transform: none;
  }
}