/* Shared field material. Editable surfaces settle into a well on focus;
   inner controls retain native behavior and form semantics. */
:root {
  --surux-picker-edge-rest: color-mix(in srgb, var(--surux-primary) 38%, color-mix(in srgb, var(--surux-text) 40%, var(--surux-surface-2)));
}

/* Light and Warm Light keep master's 9px resting shadow. 59% text is the
   lowest mix that still clears 3:1 on every side against the rendered
   surround. Night stays on the dark halo. */
[data-bs-theme="light"]:not([data-surux-theme="night"]) {
  --surux-picker-edge-rest: color-mix(in srgb, var(--surux-primary) 38%, color-mix(in srgb, var(--surux-text) 59%, var(--surux-surface-2)));
}

/* TR-0000748. Charcoal's text/surface mix already clears 3:1, so the resting
   edge drops the 38% accent that Vivid ink paints onto every shared frame.
   The 38% rules above remain the high-contrast edge. Focus, validation,
   disabled and read-only keep their own edges. */
:is(:root, [data-surux-preference-preview]):not([data-surux-contrast="high"])[data-surux-appearance="charcoal"] {
  --surux-picker-edge-rest: color-mix(in srgb, var(--surux-text) 40%, var(--surux-surface-2));
}

:is(.surux-field-surface, .surux-picker-surface),
.surux-option-switch > :is(.surux-field-surface, .surux-picker-surface) {
  --surux-picker-accent: var(--surux-primary);
  --surux-picker-edge: var(--surux-picker-edge-rest, color-mix(in srgb, var(--surux-primary) 38%, color-mix(in srgb, var(--surux-text) 40%, var(--surux-surface-2))));
  --surux-picker-rest: color-mix(in srgb, var(--surux-surface-2) 97%, var(--surux-text));
  --surux-picker-well: color-mix(in srgb, var(--surux-app-bg) 80%, var(--surux-surface-2));
  --surux-picker-shadow: rgba(0, 0, 0, .70);
  --surux-picker-highlight: rgba(255, 255, 255, .055);
  --surux-picker-inset: rgba(0, 0, 0, .52);
  --surux-picker-glow: color-mix(in srgb, var(--surux-picker-accent) 20%, transparent);
  position: relative;
  min-width: 0;
  border: var(--surux-border-width) solid var(--surux-picker-edge);
  border-radius: var(--surux-radius-field);
  background: var(--surux-picker-rest);
  box-shadow: var(--surux-elevation-field, 0 9px 16px -5px var(--surux-picker-shadow), -2px -2px 9px var(--surux-picker-highlight), 0 0 10px var(--surux-picker-glow), inset 0 0 0 transparent, inset 0 0 0 transparent);
  transition: background-color 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
}

[data-bs-theme="light"] :is(.surux-field-surface, .surux-picker-surface) {
  --surux-picker-rest: var(--surux-surface);
  --surux-picker-well: var(--surux-app-bg);
  --surux-picker-shadow: rgba(78, 94, 115, .30);
  --surux-picker-highlight: rgba(255, 255, 255, .90);
  --surux-picker-inset: rgba(78, 94, 115, .24);
}

[data-bs-theme="light"][data-surux-theme="night"] :is(.surux-field-surface, .surux-picker-surface) {
  --surux-picker-highlight: rgba(255, 255, 255, .055);
  --surux-picker-shadow: rgba(0, 0, 0, .70);
  --surux-picker-inset: rgba(0, 0, 0, .52);
}

/* TR-0000173. Read-only is displayed information: the shared hairline and the
   surface plate, with the value's own text colour. It does not take the
   editable glow or the disabled well. A native readonly input that is also
   disabled falls through to the disabled rule below. */
.surux-read-only-surface,
:is(.surux-field-surface, .surux-picker-surface).surux-field-static,
:is(.surux-field-surface, .surux-picker-surface):has(> [readonly]):not(:has(:disabled)) {
  --surux-picker-edge: var(--surux-border);
  border-color: var(--surux-border);
  background: var(--surux-surface);
  box-shadow: none;
}
.surux-read-only-field > .surux-read-only-surface::after,
.surux-read-only-field .surux-read-only-surface .surux-read-only-label::after {
  content: none;
}
/* TR-0000173 read-only warning border. The valid plate pins border-color to the
   hairline, so a later token-only owner cannot repaint it. Invalid read-only and
   static controls set the warning on the border itself. Disabled field controls
   and a focused native readonly control are excluded: their own borders win. */
:is(.surux-read-only-surface, :is(.surux-field-surface, .surux-picker-surface).surux-field-static, :is(.surux-field-surface, .surux-picker-surface):has(> [readonly])):has(:is([data-surux-picker-input], .surux-field-input, .surux-control-input, .surux-field-switch-input, .surux-option-switch-input):is(.surux-input-invalid, .is-invalid, [aria-invalid="true"])):not(:has(:is([data-surux-picker-input], .surux-field-input, .surux-control-input, .surux-field-switch-input, .surux-option-switch-input):is(:disabled, [aria-disabled="true"]))):not(:has(> [readonly]:focus-visible)) {
  --surux-picker-accent: color-mix(in srgb, var(--surux-warning) 72%, var(--surux-text));
  --surux-picker-edge: color-mix(in srgb, var(--surux-warning-fill) 72%, var(--surux-text));
  --surux-picker-glow: color-mix(in srgb, var(--surux-picker-edge) 20%, transparent);
  border-color: color-mix(in srgb, var(--surux-warning-fill) 72%, var(--surux-text));
}
.surux-read-only-label {
  font-weight: 600;
  letter-spacing: .02em;
}
.surux-read-only-inline > .surux-read-only-surface {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  align-items: center;
  gap: .5rem .75rem;
  min-height: 44px;
  padding: .5rem .75rem;
}
.surux-read-only-inline .surux-read-only-label {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.surux-read-only-inline .surux-read-only-value {
  min-height: 0;
  padding: 0;
  justify-content: flex-end;
  text-align: end;
}

/* Labels stay in normal flow so wrapping and larger type grow the field. */
.surux-picker-has-label .surux-picker-control-row,
.surux-field-frame:has(.surux-field-label:not(.visually-hidden)),
.surux-control-has-inset-label {
  padding-top: .5rem;
}
:is(.surux-field-surface, .surux-picker-surface) :is(.surux-field-label, .surux-picker-floating-label) {
  position: relative;
  display: block;
  width: fit-content;
  max-width: calc(100% - 3.85rem);
  margin: .4375rem 3.1rem 0 .75rem;
  color: var(--surux-control-label-color);
  font-size: var(--surux-control-label-size);
  line-height: var(--surux-control-label-leading);
  overflow-wrap: anywhere;
  cursor: text;
}

/* A suffix shares the inset label row without becoming part of its click target. */
.surux-control-inset-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: .4375rem 3.1rem 0 .75rem;
  min-width: 0;
}
:is(.surux-field-surface, .surux-picker-surface) > .surux-control-inset-label-row > :is(.surux-field-label, .surux-picker-floating-label) {
  margin: 0;
  min-width: 0;
  max-width: 94%;
}
.surux-control-inset-label-row > :not(:is(.surux-field-label, .surux-picker-floating-label)) {
  color: var(--surux-muted);
  font-size: .8125rem;
}

/* Hint mark sits in the label slot, immediately after the words, with the
   same inset as an ordinary field label. */
:is(.surux-field-surface, .surux-picker-surface) > .surux-field-label-cluster {
  margin: .4375rem 3.1rem 0 .75rem;
  max-width: calc(100% - 3.85rem);
}
.surux-picker-has-label .surux-picker-surface > .surux-field-label-cluster {
  margin: .4375rem 1.75rem 0 .75rem;
  max-width: calc(100% - 2.5rem);
}
:is(.surux-field-surface, .surux-picker-surface) .surux-field-label-cluster > :is(.surux-field-label, .surux-picker-floating-label, .surux-read-only-label) {
  margin: 0;
  max-width: none;
  width: fit-content;
}
.surux-field-label-cluster > :is(.surux-field-label, .surux-picker-floating-label)::after {
  content: none;
}

/* Suppress Bootstrap, palette and validation rings on the inner input. The
   visible focus and validation treatments live on the enclosing surface. */
html :is(.surux-picker, .surux-control) :is(.surux-field-surface, .surux-picker-surface) > :is([data-surux-picker-input], .surux-field-input, .surux-control-input) {
  width: 100%;
  min-height: 44px;
  border: 0 !important;
  border-radius: inherit;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: none !important;
}

html :is(.surux-picker, .surux-control) :is(.surux-field-surface, .surux-picker-surface) > [data-surux-decimal] {
  text-align: end;
}
/* Search has no inset label: 32px input + field/card borders + 12px padding = 60px. */
html .surux-toolbar .surux-toolbar-search-control .surux-field-surface > .surux-control-input {
  min-height: 32px;
  padding-block: 4px;
}

/* Field Switch uses the same label/value stack; its native toggle retains
   its track and thumb while the enclosing surface owns the frame. */
.surux-field-switch > :is(.surux-field-surface, .surux-picker-surface) > .surux-control-switch {
  min-height: 44px;
  padding: .25rem .75rem .75rem;
  border: 0 !important;
  border-radius: inherit;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
}
.surux-field-switch > :is(.surux-field-surface, .surux-picker-surface) > .surux-control-switch:has(:disabled) {
  cursor: not-allowed;
}
/* Resting track edge only. Focus, checked, disabled and invalid keep their own borders. */
:is(.surux-field-switch, .surux-option-switch) > :is(.surux-field-surface, .surux-picker-surface) {
  --surux-switch-track-border: color-mix(in srgb, var(--surux-text) 62%, var(--surux-picker-rest));
}
:is(.surux-field-switch, .surux-option-switch) > :is(.surux-field-surface, .surux-picker-surface) .form-check-input:not(:checked):not(:focus):not(:disabled) {
  border-color: var(--surux-switch-track-border);
}

/* Preserve the native select affordance when disabled or high-contrast rules
   replace the input background. Validation belongs to the shared frame. */
html[data-surux-theme] :is(.surux-field-surface, .surux-picker-surface) > :is(select, .surux-select-trigger):is(.surux-field-input, .surux-control-input) {
  background-image: var(--bs-form-select-bg-img) !important;
  background-position: right .75rem center !important;
  background-repeat: no-repeat !important;
  background-size: 16px 12px !important;
}
.surux-picker-has-label .surux-picker-input,
.surux-control-has-inset-label .surux-control-input,
.surux-field-surface:has(> .surux-field-label:not(.visually-hidden)) > :is(input.surux-field-input, select.surux-field-input) {
  padding-top: .35rem;
  padding-bottom: .5rem;
}

:is(.surux-field-shell, .surux-picker-shell):focus-within:not(:has(:is([data-surux-picker-input], .surux-field-input, .surux-control-input, .surux-field-switch-input, .surux-option-switch-input):is(:disabled, [readonly], [aria-disabled="true"]))):not(:has(> .surux-field-static)) > :is(.surux-field-surface, .surux-picker-surface) {
  border-color: transparent;
  background: var(--surux-picker-well);
  box-shadow:
    0 1px 2px -1px color-mix(in srgb, var(--surux-picker-shadow) 26%, transparent),
    -1px -1px 2px var(--surux-picker-highlight),
    0 0 4px var(--surux-picker-glow),
    inset 3px 4px 8px var(--surux-picker-inset),
    inset -1px -1px 3px var(--surux-picker-highlight);
}
:is(.surux-field-shell, .surux-picker-shell):focus-within:not(:has(:is([data-surux-picker-input], .surux-field-input, .surux-control-input, .surux-field-switch-input, .surux-option-switch-input):is(:disabled, [readonly], [aria-disabled="true"]))):not(:has(> .surux-field-static)) > :is(.surux-field-surface, .surux-picker-surface) :is(:is(.surux-field-label, .surux-picker-floating-label), .surux-option-switch-label) {
  color: var(--surux-picker-accent);
}

/* Keep the label in its slot. A single sparkle and small scale bounce draw
   attention without moving it into the border or shifting neighbouring fields. */
:is(.surux-field-surface, .surux-picker-surface) :is(:is(.surux-field-label, .surux-picker-floating-label), .surux-option-switch-label),
.surux-control > .form-label,
.surux-control > .surux-control-label-row > .form-label {
  position: relative;
  width: fit-content;
  max-width: 94%;
  font-weight: var(--surux-control-label-weight);
  letter-spacing: var(--surux-control-label-tracking);
  transform-origin: left center;
  transition: transform 140ms ease-out, color 140ms ease-out;
}
:is(.surux-field-surface, .surux-picker-surface) :is(.surux-field-label, .surux-picker-floating-label) {
  max-width: calc(100% - 3.85rem);
}
:is(.surux-field-surface, .surux-picker-surface) :is(:is(.surux-field-label, .surux-picker-floating-label), .surux-option-switch-label)::after,
.surux-control > .form-label::after,
.surux-control > .surux-control-label-row > .form-label::after {
  content: "";
  position: absolute;
  inset-inline-start: calc(100% + .25em);
  top: .15em;
  width: .75em;
  height: .75em;
  background: currentColor;
  clip-path: polygon(50% 0, 62% 36%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 36%);
  opacity: 0;
  pointer-events: none;
}
:is(.surux-field-shell, .surux-picker-shell):focus-within:not(:has(:is([data-surux-picker-input], .surux-field-input, .surux-control-input, .surux-field-switch-input, .surux-option-switch-input):is(:disabled, [readonly], [aria-disabled="true"]))):not(:has(> .surux-field-static)) > :is(.surux-field-surface, .surux-picker-surface) :is(:is(.surux-field-label, .surux-picker-floating-label), .surux-option-switch-label),
.surux-control:has(> .surux-control-field > .surux-input:focus) > .form-label,
.surux-control:has(> .surux-control-field > .surux-input:focus) > .surux-control-label-row > .form-label {
  transform: scale(1.04);
  animation: surux-label-bounce 320ms ease-out;
}
:is(.surux-field-shell, .surux-picker-shell):focus-within:not(:has(:is([data-surux-picker-input], .surux-field-input, .surux-control-input, .surux-field-switch-input, .surux-option-switch-input):is(:disabled, [readonly], [aria-disabled="true"]))):not(:has(> .surux-field-static)) > :is(.surux-field-surface, .surux-picker-surface) :is(:is(.surux-field-label, .surux-picker-floating-label), .surux-option-switch-label)::after,
.surux-control:has(> .surux-control-field > .surux-input:focus) > .form-label::after,
.surux-control:has(> .surux-control-field > .surux-input:focus) > .surux-control-label-row > .form-label::after {
  animation: surux-label-sparkle 360ms ease-out;
}
/* Option Switch retains one compact row, with room for wrapped copy and
   the brief label sparkle. The toggle keeps its native track and thumb. */
.surux-option-switch > :is(.surux-field-surface, .surux-picker-surface) {
  min-height: 44px;
  padding: .5rem .75rem;
  cursor: pointer;
}
.surux-option-switch > :is(.surux-field-surface, .surux-picker-surface) > .surux-control-label {
  min-width: 0;
  flex: 1;
  display: inline-flex;
  align-items: center;
}
.surux-option-switch > :is(.surux-field-surface, .surux-picker-surface) .surux-option-switch-label {
  display: block;
  /* The flex row already reserves the toggle and gap outside this label. */
  width: fit-content;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.surux-option-switch .surux-field-label-cluster > .surux-option-switch-label::after {
  content: none;
}
.surux-option-switch > :is(.surux-field-surface, .surux-picker-surface):has(:disabled) {
  cursor: not-allowed;
}

/* List row: the switch only, at the row's own height. No option-row surface.
   Design surfaces still paint the track and thumb through .form-check-input. */
.surux-switch-list-row {
  display: flex;
  align-items: center;
  min-height: 0;
  margin: 0;
}
.surux-switch-list-row > .surux-control-switch {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

@keyframes surux-label-bounce {
  0% { transform: scale(1); }
  45% { transform: scale(1.09); }
  72% { transform: scale(1.015); }
  100% { transform: scale(1.04); }
}
@keyframes surux-label-sparkle {
  0%, 100% { opacity: 0; transform: scale(.35) rotate(-15deg); }
  38% { opacity: .95; transform: scale(1) rotate(10deg); }
  72% { opacity: .45; transform: scale(.7) rotate(25deg); }
}

/* Resting has one continuous solid border. Only focus reveals the fading line.
   No surface transform: the popover and icon hit areas must stay stationary. */
:is(.surux-field-surface, .surux-picker-surface)::after {
  content: "";
  position: absolute;
  pointer-events: none;
  left: .75rem;
  right: .75rem;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--surux-picker-accent) 24%, var(--surux-picker-accent) 76%, transparent);
  opacity: 0;
  transform: scaleX(.78);
  filter: drop-shadow(0 0 2px var(--surux-picker-glow));
  transition: opacity 280ms ease, transform 280ms ease, filter 280ms ease;
}
:is(.surux-field-shell, .surux-picker-shell):focus-within:not(:has(:is([data-surux-picker-input], .surux-field-input, .surux-control-input, .surux-field-switch-input, .surux-option-switch-input):is(:disabled, [readonly], [aria-disabled="true"]))):not(:has(> .surux-field-static)) > :is(.surux-field-surface, .surux-picker-surface)::after {
  opacity: 1;
  transform: scaleX(1);
  filter: drop-shadow(0 0 4px var(--surux-picker-glow));
}

/* Unlabelled lookups keep their actions centred in the single-row surface. */
:is(.surux-field-surface, .surux-picker-surface) > .surux-picker-action {
  top: 50%;
  transform: translateY(-50%);
}
:is(.surux-field-surface, .surux-picker-surface) > .surux-picker-action:focus-visible {
  outline: 2px solid var(--surux-picker-accent);
  outline-offset: -5px;
}
:is(.surux-field-surface, .surux-picker-surface):has(:is([data-surux-picker-input], .surux-field-input, .surux-control-input, .surux-field-switch-input, .surux-option-switch-input):is(.surux-input-invalid, .is-invalid, [aria-invalid="true"])) > .surux-picker-action:focus-visible {
  outline-color: var(--surux-picker-edge);
}

/* A labelled lookup has separate label and value rows. Reserve icon lanes only
   beside the value, so selecting a record cannot squeeze or move its label.
   The label still wraps naturally and keeps room for the focus sparkle. */
.surux-picker-has-label .surux-picker-surface {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.surux-picker-has-label .surux-picker-surface > .surux-picker-floating-label {
  grid-area: 1 / 1;
  max-width: calc(100% - 2.5rem);
  margin: .4375rem 1.75rem 0 .75rem;
}
.surux-picker-has-label .surux-picker-surface > [data-surux-picker-input] {
  grid-area: 2 / 1;
  min-width: 0;
}
.surux-picker-has-label .surux-picker-surface > .surux-picker-action {
  grid-area: 2 / 1;
  position: relative;
  top: auto;
  align-self: center;
  transform: none;
}
.surux-picker-has-label .surux-picker-surface > .surux-picker-clear {
  justify-self: end;
}

.surux-control-has-inset-label > :is(.surux-field-surface, .surux-picker-surface) > .surux-control-trailing-action {
  inset-block: auto;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

/* Validation is still visible at rest and while focused, without a second rim. */
:is(.surux-field-surface, .surux-picker-surface):has(:is([data-surux-picker-input], .surux-field-input, .surux-control-input, .surux-field-switch-input, .surux-option-switch-input):is(.surux-input-invalid, .is-invalid, [aria-invalid="true"])) {
  --surux-picker-accent: color-mix(in srgb, var(--surux-warning) 72%, var(--surux-text));
  --surux-picker-edge: color-mix(in srgb, var(--surux-warning-fill) 72%, var(--surux-text));
  --surux-picker-glow: color-mix(in srgb, var(--surux-picker-edge) 20%, transparent);
}
:is(.surux-field-surface, .surux-picker-surface):has(:is([data-surux-picker-input], .surux-field-input, .surux-control-input, .surux-field-switch-input, .surux-option-switch-input):is(.surux-input-invalid, .is-invalid, [aria-invalid="true"]))::after {
  background: linear-gradient(90deg, transparent, var(--surux-picker-edge) 24%, var(--surux-picker-edge) 76%, transparent);
}
:is(.surux-field-surface, .surux-picker-surface):has(:is([data-surux-picker-input], .surux-field-input, .surux-control-input, .surux-field-switch-input, .surux-option-switch-input):is(.surux-input-invalid, .is-invalid, [aria-invalid="true"])) :is(:is(.surux-field-label, .surux-picker-floating-label), .surux-option-switch-label) {
  color: var(--surux-picker-accent);
}
: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"])) {
  --surux-picker-disabled-shadow:
    -1px -1px 2px 1px var(--surux-picker-highlight),
    0 3px 5px -1px color-mix(in srgb, var(--surux-picker-shadow) 60%, transparent),
    inset 1px 2px 4px color-mix(in srgb, var(--surux-picker-inset) 65%, transparent),
    inset -1px -1px 2px var(--surux-picker-highlight);
  border-color: color-mix(in srgb, var(--surux-disabled-control-border) 65%, var(--surux-muted));
  background: var(--surux-disabled-control-bg);
  box-shadow: var(--surux-picker-disabled-shadow);
}
: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"])) :is(:is(.surux-field-label, .surux-picker-floating-label), .surux-option-switch-label) {
  color: var(--surux-disabled-control-color);
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  :is(.surux-field-surface, .surux-picker-surface),
  .surux-option-switch > :is(.surux-field-surface, .surux-picker-surface),
  :is(.surux-field-surface, .surux-picker-surface)::after,
  :is(.surux-field-surface, .surux-picker-surface) :is(.surux-field-label, .surux-picker-floating-label) {
    transition: none;
  }
  :is(.surux-field-surface, .surux-picker-surface) :is(:is(.surux-field-label, .surux-picker-floating-label), .surux-option-switch-label),
  .surux-control > .form-label,
  .surux-control > .surux-control-label-row > .form-label {
    animation: none !important;
    transform: none !important;
    transition: none;
  }
  :is(.surux-field-label, .surux-picker-floating-label)::after,
  .surux-option-switch-label::after,
  .surux-control > .form-label::after,
  .surux-control > .surux-control-label-row > .form-label::after {
    animation: none !important;
  }
}

@media (forced-colors: active) {
  :is(.surux-field-surface, .surux-picker-surface) {
    border-color: ButtonText;
  }
  /* The warning border above is a colour mix. Forced colours keep the system border. */
  :is(.surux-read-only-surface, :is(.surux-field-surface, .surux-picker-surface).surux-field-static, :is(.surux-field-surface, .surux-picker-surface):has(> [readonly])):has(:is([data-surux-picker-input], .surux-field-input, .surux-control-input, .surux-field-switch-input, .surux-option-switch-input):is(.surux-input-invalid, .is-invalid, [aria-invalid="true"])):not(:has(:is([data-surux-picker-input], .surux-field-input, .surux-control-input, .surux-field-switch-input, .surux-option-switch-input):is(:disabled, [aria-disabled="true"]))):not(:has(> [readonly]:focus-visible)) {
    border-color: ButtonText;
  }
  :is(.surux-field-shell, .surux-picker-shell):focus-within:not(:has(:is([data-surux-picker-input], .surux-field-input, .surux-control-input, .surux-field-switch-input, .surux-option-switch-input):is(:disabled, [readonly], [aria-disabled="true"]))):not(:has(> .surux-field-static)) > :is(.surux-field-surface, .surux-picker-surface) {
    border-color: Highlight;
  }
  :is(.surux-field-surface, .surux-picker-surface)::after {
    content: none;
  }
  :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-color: GrayText;
    box-shadow: none;
  }
}

/* Native readonly inputs can receive keyboard focus for selection. */
:is(.surux-field-surface, .surux-picker-surface):has(> [readonly]:focus-visible) { border-color: var(--surux-primary); }

/* Centre reveal actions, calendar icons and select carets in the full surface. */
.surux-field-surface:not(.surux-search-input-box):has(> .surux-field-input) > .surux-control-trailing-action {
  inset-block: auto;
  top: 50%;
  height: 44px;
  align-items: center;
  transform: translateY(-50%);
}
.surux-field-surface:not(.surux-search-input-box):has(> .surux-field-input) > .surux-control-trailing-action .surux-command-button-icon-only {
  height: 44px !important;
}
.surux-field-surface.surux-control-field-with-trailing-action > .surux-field-label {
  max-width: calc(100% - 3.75rem);
  margin-right: 3rem;
}
.surux-field-surface > .surux-date-display {
  padding-right: 2.75rem;
}
.surux-field-surface > .surux-date-display i {
  position: absolute;
  top: 50%;
  right: .85rem;
  transform: translateY(-50%);
  pointer-events: none;
}
.surux-field-surface:has(> :is(select.surux-field-input, .surux-date-display)) > .surux-field-label {
  max-width: calc(100% - 3.5rem);
  margin-right: 2.75rem;
}
.surux-field-surface > :is(.surux-tag-picker-chips, .surux-multi-picker-selected):not(:empty) {
  margin: .4rem .75rem 0;
}
.surux-tag-picker-surface > .surux-tag-picker-input {
  padding-left: .75rem;
  padding-right: 3.25rem;
}
.surux-tag-picker-surface > .surux-tag-picker-add {
  position: absolute;
  top: 50%;
  right: .25rem;
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
}
.surux-tag-picker-surface > :is(.surux-tag-picker-chips, .surux-field-label) {
  max-width: calc(100% - 4rem);
  margin-right: 3.25rem;
}

/* Suffix rows keep one animated label; their nested native label stays still. */
.surux-field-surface > div.surux-field-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .5rem;
}
.surux-field-surface .surux-field-label > label {
  position: static;
  width: auto;
  max-width: none;
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  transform: none;
  animation: none;
  transition: none;
}
.surux-field-surface .surux-field-label > label::after { content: none; }

/* Address controls share the field material, label spacing and centered action lanes. */
.surux-address-input {
  min-height: 44px;
  resize: vertical;
}

.surux-address-inline-clear {
  right: calc(.15rem + 44px);
}

.surux-address-surface {
  --surux-address-action-space: 0px;
}
.surux-address-surface:has(> [data-address-actions-trigger]) {
  --surux-address-action-space: 44px;
}
.surux-address-surface:has(> [data-address-clear]:not([hidden])) {
  --surux-address-action-space: 88px;
}
.surux-address-surface > .surux-address-input {
  padding-left: .75rem;
  padding-right: calc(.5rem + var(--surux-address-action-space));
}
.surux-address-surface > .surux-field-label {
  max-width: calc(100% - 1.75rem - var(--surux-address-action-space));
  margin-right: calc(1rem + var(--surux-address-action-space));
}
.surux-address-surface > .surux-address-action {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: .5rem;
  color: var(--surux-muted);
  background: transparent;
  cursor: pointer;
}
.surux-address-actions-trigger { right: .15rem; }
.surux-address-action:hover,
.surux-address-action:focus-visible {
  background: color-mix(in srgb, var(--surux-primary) 12%, transparent);
  color: var(--surux-text);
}
.surux-address-action:focus-visible {
  outline: 2px solid var(--surux-primary);
  outline-offset: -3px;
}
.surux-address-action[hidden] {
  display: none;
}

/* TR-0000318: select presentation belongs to the shared field, including portal lists. */
html .surux-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
.surux-select-trigger {
  text-align: start;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: inherit;
}
.surux-select-trigger:disabled { cursor: not-allowed; }
.surux-select-list, .surux-select-list:popover-open {
  position: fixed;
  inset: auto;
  z-index: 2100;
  box-sizing: border-box;
  margin: 0;
  padding: .35rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: var(--surux-border-width) solid var(--surux-border);
  border-radius: var(--surux-radius-input);
  background: var(--surux-surface);
  color: var(--surux-text);
  box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, .24);
  font: inherit;
}
.surux-select-list[data-surux-select-sheet="true"] { border-radius: 1rem 1rem .5rem .5rem; }
.surux-select-list[data-surux-select-sheet="true"]::backdrop {
  background: var(--surux-sheet-backdrop, rgba(0, 0, 0, .32));
  pointer-events: auto;
}
.surux-select-list[hidden] { display: none !important; }
.surux-select-option {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-height: 44px;
  padding: .48rem .55rem;
  border-radius: .375rem;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.surux-select-option-text {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
}
.surux-select-option-meta {
  color: var(--surux-muted);
  font-size: .8em;
}
.surux-select-option > [aria-hidden] { width: 1rem; flex-shrink: 0; color: var(--surux-primary); }
.surux-select-option.is-active, .surux-select-option:not([aria-disabled="true"]):hover {
  background: color-mix(in srgb, var(--surux-primary) 14%, var(--surux-surface));
  outline: 2px solid var(--surux-primary);
  outline-offset: -2px;
}
.surux-select-option[aria-disabled="true"] { color: var(--surux-muted); cursor: not-allowed; }
@media (max-width: 767.98px) {
  .surux-select-list { border-radius: 1rem 1rem .5rem .5rem; padding-bottom: max(.5rem, env(safe-area-inset-bottom)); }
}
@media (forced-colors: active) {
  .surux-select-list { border-color: CanvasText; }
  .surux-select-option.is-active { outline-color: Highlight; }
  .surux-select-option[aria-selected="true"] { font-weight: bold; }
}

/* TR-0000226: a filter is the same inset field, with a funnel (or sort arrows)
   at the trailing edge instead of Bootstrap's chevron. */
.surux-filter-control > :is(.surux-field-surface, .surux-picker-surface) {
  padding-inline-end: 1.65rem;
}
html[data-surux-theme] .surux-filter-control :is(.surux-field-surface, .surux-picker-surface) > :is(select, .surux-select-trigger):is(.surux-field-input, .surux-control-input) {
  background-image: none !important;
  padding-inline-end: .5rem;
}
.surux-filter-mark {
  position: absolute;
  top: 50%;
  right: .55rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  transform: translateY(-50%);
  color: var(--surux-muted);
  font-size: .72rem;
  pointer-events: none;
}
.surux-filter-control.is-filter-active > :is(.surux-field-surface, .surux-picker-surface) {
  --surux-picker-rest: color-mix(in srgb, var(--surux-primary) 14%, var(--surux-surface));
  --surux-picker-edge: color-mix(in srgb, var(--surux-primary) 62%, var(--surux-border));
  border-color: var(--surux-picker-edge);
  background: var(--surux-picker-rest);
}
.surux-filter-control.is-filter-active :is(.surux-field-label, .surux-picker-floating-label),
.surux-filter-control.is-filter-active .surux-filter-mark {
  color: var(--surux-primary);
}
.surux-filter-control.is-filter-active :is(.surux-field-surface, .surux-picker-surface) > .surux-field-label-cluster > :is(.surux-field-label, .surux-picker-floating-label) {
  color: var(--surux-primary);
}
.surux-filter-clear-all.surux-command-button-icon-only {
  flex: 0 0 2.25rem;
  width: 2.25rem;
  min-width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--surux-skeuo-filter-clear-radius, 50%) !important;
  align-self: center;
  justify-self: start;
}
@media (max-width: 390px) {
  .surux-filter-clear-all.surux-command-button-icon-only {
    justify-self: start;
  }
}
@media (forced-colors: active) {
  .surux-filter-control.is-filter-active > :is(.surux-field-surface, .surux-picker-surface) {
    border-color: Highlight;
  }
  .surux-filter-control.is-filter-active .surux-filter-mark {
    color: Highlight;
  }
}