/* Important rules in this layer take precedence over older unlayered page overrides. */
@layer tawsill-field-contrast {
  html[data-tawsill-theme="dark"] {
    --tawsill-control-bg: #ffffff;
    --tawsill-control-text: #18283f;
    --tawsill-control-muted: #596b82;
    --tawsill-control-border: #bccbdd;
    --tawsill-control-scheme: light;
  }
  html[data-tawsill-theme="light"] {
    --tawsill-control-bg: #0d1b32;
    --tawsill-control-text: #edf3fc;
    --tawsill-control-muted: #b6c5db;
    --tawsill-control-border: #526681;
    --tawsill-control-scheme: dark;
  }
  html[data-tawsill-theme] :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="file"]),
    select, textarea, [contenteditable="true"],
    .select2-selection, .select2-dropdown, .select2-search__field,
    .choices__inner, .choices__list--dropdown, .ts-control, .ts-dropdown,
    button[role="combobox"]
  ) {
    background: var(--tawsill-control-bg) !important;
    color: var(--tawsill-control-text) !important;
    -webkit-text-fill-color: var(--tawsill-control-text) !important;
    border-color: var(--tawsill-control-border) !important;
    color-scheme: var(--tawsill-control-scheme) !important;
    transition-property: border-color, box-shadow, outline-color !important;
  }
  html[data-tawsill-theme] :where(input, textarea)::placeholder {
    color: var(--tawsill-control-muted) !important;
    -webkit-text-fill-color: var(--tawsill-control-muted) !important;
    opacity: 1 !important;
  }
  html[data-tawsill-theme] select :is(option,optgroup) {
    background: var(--tawsill-control-bg) !important;
    color: var(--tawsill-control-text) !important;
  }
  html[data-tawsill-theme] :where(.select2-selection__rendered,.select2-selection__placeholder,.choices__placeholder,.ts-control > .item) {
    color: var(--tawsill-control-text) !important;
  }
  html[data-tawsill-theme] input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--tawsill-control-bg) inset !important;
    -webkit-text-fill-color: var(--tawsill-control-text) !important;
    caret-color: var(--tawsill-control-text) !important;
  }
  /* Treat the navigation icon and input as one rounded control. */
  html[data-tawsill-theme] .catalog-navigation-search {
    box-sizing: border-box !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 12px !important;
    align-items: center !important;
    background: var(--tawsill-control-bg) !important;
    color: var(--tawsill-control-text) !important;
    border-color: var(--tawsill-control-border) !important;
    transition-property: border-color, box-shadow !important;
  }
  html[data-tawsill-theme] .catalog-navigation-search input {
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    line-height: 24px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    min-width: 0 !important;
    padding: 0 !important;
    outline: none !important;
  }
  html[data-tawsill-theme] .catalog-navigation-search svg {
    color: var(--tawsill-control-muted) !important;
  }
  html[data-tawsill-theme] .catalog-navigation-search:focus-within {
    outline: none !important;
    outline-offset: 0 !important;
  }
}


/* Keep text entry visually steady when clicked or focused. Normal field borders
   and validation styling remain; buttons retain their keyboard focus treatment. */
@layer tawsill-field-contrast {
  html[data-tawsill-theme] :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="file"]),
    textarea, select, [contenteditable="true"], .select2-search__field
  ):is(:focus,:focus-visible) {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-ring-offset-shadow: 0 0 #0000 !important;
  }
  html[data-tawsill-theme] :where(label,.form-group,.input-group,.catalog-navigation-search):focus-within {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
  }
}