/* Each theme boundary owns its contrast tokens, including an unsaved preview. */
[data-bs-theme][data-surux-contrast="high"] {
  --surux-text: #ffffff;
  --surux-band-fg: #ffffff;
  --surux-band-shadow: rgb(0 0 0 / .45);
  --surux-muted: #f1f1f1;
  --surux-border: #b8b8bc;
  --bs-body-color: var(--surux-text);
  --bs-secondary-color: var(--surux-muted);
  --bs-border-color: var(--surux-border);
}

[data-bs-theme="light"][data-surux-contrast="high"]:not([data-surux-theme="night"]) {
  --surux-text: #171717;
  --surux-band-fg: #171717;
  --surux-band-shadow: rgb(255 255 255 / .45);
  --surux-muted: #353535;
  --surux-border: #646464;
}

[data-bs-theme][data-surux-contrast="high"] .surux-tab-list-hierarchy {
  --surux-tab-folder-edge: var(--surux-border);
  --surux-tab-folder-ink: var(--surux-text);
}

/* The preview renders in an isolated document, so these rules also show draft settings. */
html[data-surux-contrast="high"][data-surux-theme][data-surux-button-style] :is(.surux-card, .surux-input, .dropdown-menu, .surux-modal, .surux-command-bar) {
  background: var(--surux-surface) !important;
  border-color: var(--surux-border) !important;
  backdrop-filter: none !important;
}

html[data-surux-contrast="high"][data-surux-theme][data-surux-button-style] :is(.surux-command-button, .surux-button, .surux-icon-btn) {
  background: var(--surux-surface) !important;
  border: 2px solid currentColor !important;
  color: var(--surux-text) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}

html[data-surux-contrast="high"][data-surux-theme][data-surux-button-style] :is(.surux-command-button, .surux-button, .surux-icon-btn)::before,
html[data-surux-contrast="high"][data-surux-theme][data-surux-button-style] :is(.surux-command-button, .surux-button, .surux-icon-btn)::after {
  display: none !important;
}

html[data-surux-contrast="high"][data-surux-theme][data-surux-button-style] .surux-button-tone-action:not(:disabled) {
  background: var(--surux-primary-action-bg) !important;
  color: var(--surux-primary-contrast) !important;
}

html[data-surux-contrast="high"][data-surux-theme][data-surux-button-style] .surux-button-tone-warning:not(:disabled) {
  color: var(--surux-workflow-submitted-color) !important;
}

html[data-surux-contrast="high"][data-surux-theme][data-surux-button-style] .surux-button-tone-destructive:not(:disabled) {
  color: var(--surux-workflow-rejected-color) !important;
}

html[data-surux-contrast="high"][data-surux-theme][data-surux-button-style] :is(.surux-command-button, .surux-button, .surux-icon-btn) :is(i, .surux-command-button-icon) {
  color: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Subtle, tinted and the quieter button classes outrank the shared high-contrast rule. */
html[data-surux-contrast="high"][data-surux-theme][data-surux-button-style] :is(
  .btn.surux-command-button-subtle,
  .btn.surux-command-button-icon-only-tinted,
  .btn.surux-command-button-subtle-surface,
  .btn.surux-command-overflow-trigger,
  .btn.surux-search-submit-btn,
  .btn.surux-address-tool,
  .btn.surux-address-clear,
  .btn.surux-sidebar-close
):is(:hover, :focus, :focus-visible, :active, :not(:hover)) {
  background: var(--surux-surface) !important;
  border: 2px solid currentColor !important;
  color: var(--surux-text) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}
html[data-surux-contrast="high"][data-surux-theme][data-surux-button-style] :is(
  .btn.surux-command-button-subtle,
  .btn.surux-command-button-icon-only-tinted,
  .btn.surux-command-button-subtle-surface,
  .btn.surux-command-overflow-trigger,
  .btn.surux-search-submit-btn,
  .btn.surux-address-tool,
  .btn.surux-address-clear,
  .btn.surux-sidebar-close
).surux-button-tone-action {
  background: var(--surux-primary-action-bg) !important;
  color: var(--surux-primary-contrast) !important;
}
html[data-surux-contrast="high"][data-surux-theme][data-surux-button-style] :is(
  .btn.surux-command-button-subtle,
  .btn.surux-command-button-icon-only-tinted,
  .btn.surux-command-button-subtle-surface,
  .btn.surux-command-overflow-trigger,
  .btn.surux-search-submit-btn,
  .btn.surux-address-tool,
  .btn.surux-address-clear,
  .btn.surux-sidebar-close
).surux-button-tone-warning {
  color: var(--surux-workflow-submitted-color) !important;
}
html[data-surux-contrast="high"][data-surux-theme][data-surux-button-style] :is(
  .btn.surux-command-button-subtle,
  .btn.surux-command-button-icon-only-tinted,
  .btn.surux-command-button-subtle-surface,
  .btn.surux-command-overflow-trigger,
  .btn.surux-search-submit-btn,
  .btn.surux-address-tool,
  .btn.surux-address-clear,
  .btn.surux-sidebar-close
).surux-button-tone-destructive {
  color: var(--surux-workflow-rejected-color) !important;
}
html[data-surux-contrast="high"][data-surux-theme][data-surux-button-style] :is(
  .btn.surux-command-button-subtle,
  .btn.surux-command-button-icon-only-tinted,
  .btn.surux-command-button-subtle-surface,
  .btn.surux-command-overflow-trigger,
  .btn.surux-search-submit-btn,
  .btn.surux-address-tool,
  .btn.surux-address-clear,
  .btn.surux-sidebar-close
):is(.surux-button-pressed, [aria-pressed="true"]) {
  background: var(--surux-text) !important;
  color: var(--surux-surface) !important;
  border: 2px solid var(--surux-text) !important;
  box-shadow: inset 0 2px 0 var(--surux-border) !important;
  filter: none !important;
  transform: none !important;
}
html[data-surux-contrast="high"][data-surux-theme][data-surux-button-style] :is(
  .btn.surux-command-button,
  .btn.surux-button,
  .btn.surux-icon-btn,
  .btn.surux-command-overflow-trigger,
  .btn.surux-search-submit-btn,
  .btn.surux-address-tool,
  .btn.surux-address-clear,
  .btn.surux-sidebar-close
):is(:disabled, .disabled, [aria-disabled="true"]) {
  color: var(--surux-muted) !important;
  background: var(--surux-surface) !important;
  border: 2px dashed var(--surux-muted) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  opacity: 1 !important;
}
html[data-surux-contrast="high"][data-surux-theme][data-surux-button-style] :is(
  .surux-command-button-subtle,
  .surux-command-button-icon-only-tinted,
  .surux-command-button-subtle-surface,
  .surux-command-overflow-trigger,
  .surux-search-submit-btn,
  .surux-address-tool,
  .surux-address-clear,
  .surux-sidebar-close
)::before,
html[data-surux-contrast="high"][data-surux-theme][data-surux-button-style] :is(
  .surux-command-button-subtle,
  .surux-command-button-icon-only-tinted,
  .surux-command-button-subtle-surface,
  .surux-command-overflow-trigger,
  .surux-search-submit-btn,
  .surux-address-tool,
  .surux-address-clear,
  .surux-sidebar-close
)::after {
  display: none !important;
}
html[data-surux-contrast="high"][data-surux-theme][data-surux-button-style] :is(
  .surux-command-button-subtle,
  .surux-command-button-icon-only-tinted,
  .surux-command-button-subtle-surface,
  .surux-command-overflow-trigger,
  .surux-search-submit-btn,
  .surux-address-tool,
  .surux-address-clear,
  .surux-sidebar-close
) :is(i, .surux-command-button-icon) {
  color: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

html[data-surux-contrast="high"][data-surux-theme][data-surux-button-style] .surux-input.is-invalid {
  border-color: var(--surux-workflow-rejected-color) !important;
}

html[data-surux-contrast="high"][data-surux-theme][data-surux-button-style] :disabled {
  opacity: 1 !important;
  color: var(--surux-muted) !important;
  border-style: dashed !important;
}

html[data-surux-contrast="high"][data-surux-theme][data-surux-button-style] :focus-visible {
  outline: 3px solid var(--surux-text) !important;
  outline-offset: 4px !important;
}

@supports selector(:has(*)) {
  html[data-surux-contrast="high"][data-surux-theme][data-surux-button-style] .surux-data-table-card > .surux-data-table-desktop-shell > .surux-data-table-scroll[tabindex]:focus-visible {
    outline: none !important;
  }
}

html[data-surux-contrast="high"][data-surux-theme][data-surux-button-style] .surux-data-table-embedded .surux-data-table-scroll[tabindex]:focus-visible {
  outline: 3px solid var(--surux-text) !important;
  outline-offset: -3px !important;
}

html[data-surux-contrast="high"][data-surux-theme][data-surux-button-style] .surux-data-table-card:has(> .surux-data-table-desktop-shell > .surux-data-table-scroll[tabindex]:focus-visible) {
  outline: 3px solid var(--surux-text) !important;
  outline-offset: 2px !important;
}

/* Inset fields keep one visible frame, including in high contrast. */
html[data-surux-contrast="high"][data-surux-theme][data-surux-button-style] :is(.surux-field-surface, .surux-picker-surface) {
  background: var(--surux-surface);
  box-shadow: none;
}
html[data-surux-contrast="high"][data-surux-theme][data-surux-button-style] :is(.surux-field-surface, .surux-picker-surface):not(:has(.surux-input-invalid, .is-invalid, [aria-invalid="true"])) {
  --surux-picker-edge: var(--surux-border);
}
html[data-surux-contrast="high"][data-surux-theme][data-surux-button-style] :is(.surux-field-surface, .surux-picker-surface) > :is([data-surux-picker-input], .surux-field-input, .surux-control-input) {
  background-color: transparent !important;
  border: 0 !important;
  outline: none !important;
}
html[data-surux-contrast="high"][data-surux-theme][data-surux-button-style] :is(.surux-field-surface, .surux-picker-surface) > select:is(.surux-field-input, .surux-control-input) {
  background: transparent var(--bs-form-select-bg-img) right .75rem center / 16px 12px no-repeat !important;
}
html[data-surux-contrast="high"][data-surux-theme][data-surux-button-style] .surux-filter-control :is(.surux-field-surface, .surux-picker-surface) > select:is(.surux-field-input, .surux-control-input) {
  background-image: none !important;
}
html[data-surux-contrast="high"][data-surux-theme][data-surux-button-style] .surux-filter-control.is-filter-active > :is(.surux-field-surface, .surux-picker-surface) {
  border-color: var(--surux-text);
  outline: 2px solid var(--surux-text);
  outline-offset: 2px;
}
html[data-surux-contrast="high"][data-surux-theme][data-surux-button-style] :is(.surux-field-shell, .surux-picker-shell):focus-within > :is(.surux-field-surface, .surux-picker-surface):not(:has(:is([data-surux-picker-input], .surux-field-input, .surux-control-input, .surux-field-switch-input, .surux-option-switch-input):disabled)) {
  outline: 3px solid var(--surux-text);
  outline-offset: 4px;
}
html[data-surux-contrast="high"][data-surux-theme][data-surux-button-style] :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"])) {
  border-style: dashed;
  box-shadow: var(--surux-picker-disabled-shadow);
}

html[data-surux-contrast="high"][data-surux-theme][data-surux-button-style] :is(.surux-field-surface, .surux-picker-surface) :is(.surux-field-switch-input, .surux-option-switch-input) {
  outline: none !important;
}

/* The real controls share the preview's token boundary and never submit data. */
.surux-preference-samples {
  padding: 1rem;
  border: 1px solid var(--surux-border);
  border-radius: .85rem;
  background: var(--surux-surface);
  color: var(--surux-text);
  min-width: 0;
}
.surux-preference-samples-heading p { color: var(--surux-muted); margin: .3rem 0 1rem; font-size: .8125rem; }
.surux-preference-samples-fields { display: grid; gap: .75rem; }
.surux-preference-samples-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0; }
.surux-preference-sample-error { color: var(--surux-workflow-rejected-color); font-size: .8125rem; margin: -.4rem 0 0; }
.surux-preference-samples .surux-input.is-invalid { border-color: var(--surux-workflow-rejected-color) !important; }
.surux-preference-samples-table { overflow-x: auto; }
.surux-preference-samples-table .table {
  --bs-table-bg: var(--surux-surface);
  --bs-table-color: var(--surux-text);
  --bs-table-border-color: var(--surux-border);
  font-size: .8125rem;
}
.surux-preference-samples-table :is(th, td) { padding: .65rem .5rem; vertical-align: middle; }
.surux-preference-sample-selected { --bs-table-bg: color-mix(in srgb, var(--surux-primary) 10%, var(--surux-surface)); }
.surux-preference-sample-selected small { display: block; color: var(--surux-text); }
.surux-user-preference-preview-readout > span { background: var(--surux-surface-2); }
.surux-user-preference-preview-readout strong { white-space: normal; overflow-wrap: anywhere; }
.surux-user-preference-preview-window { height: 22rem; }
.surux-user-preference-preview-heading { flex-wrap: wrap; }
.surux-theme-trigger { text-decoration: none; }
.surux-preference-preview-frame { display: block; width: 100%; min-width: 0; height: 54rem; border: 0; }