/* Shared browser baseline for every console, account and branding-preview page.
   Keep real form elements so keyboard input, validation and autofill still work. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:where(button, input, select, textarea) {
  box-sizing: border-box;
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  line-height: 1.5;
}

:where(button, input[type=button], input[type=submit], input[type=reset],
  input:not([type]), input[type=text], input[type=email], input[type=password],
  input[type=search], input[type=url], input[type=tel], input[type=number], textarea) {
  -webkit-appearance: none;
  appearance: none;
}

:where(input, textarea)::placeholder { opacity: 1; }
:where(input, select, textarea):disabled { -webkit-text-fill-color: currentColor; }
:where(textarea) { resize: vertical; }
:where(fieldset) { min-inline-size: 0; }
:where(input[type=search])::-webkit-search-decoration { -webkit-appearance: none; }
input:is([type=date], [type=datetime-local], [type=time], [type=month], [type=week]) {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  height: 46px;
  line-height: 1.5;
}
input::-webkit-date-and-time-value { min-height: 1.5em; text-align: start; }

input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 4px;
  background: var(--console-border, #c8d1e0);
}
input[type=range]::-moz-range-track {
  height: 4px;
  border-radius: 4px;
  background: var(--console-border, #c8d1e0);
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #326be6;
  box-shadow: 0 0 0 1px #326be6;
}
input[type=range]::-moz-range-thumb {
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #326be6;
  box-shadow: 0 0 0 1px #326be6;
}
input[type=color] { -webkit-appearance: none; appearance: none; }
input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
input[type=color]::-webkit-color-swatch { border: 1px solid var(--console-border, #dbe2ed); border-radius: 4px; }
input[type=color]::-moz-color-swatch { border: 1px solid var(--console-border, #dbe2ed); border-radius: 4px; }

/* These properties intentionally win over page-specific background/padding
   shorthands; the page still owns the control's color, border and width. */
select:not([multiple]):not([size]), select[size="1"] {
  -webkit-appearance: none;
  appearance: none;
  min-height: 40px;
  line-height: 1.5;
  padding-inline-end: 36px !important;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%) !important;
  background-position: right 17px center, right 12px center !important;
  background-size: 5px 5px !important;
  background-repeat: no-repeat !important;
  cursor: pointer;
}

:root :is(.connected-form, .editor-field, .brand-field) select { min-height: 44px; }
.connected-form input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
.connected-form textarea { min-height: 44px; }
:is(#auth-application, #enterprise-application) { min-height: 46px; }
select:disabled { cursor: not-allowed; }
select option { color: var(--console-text, #172236); background: var(--console-surface, #fff); }
[dir=rtl] select { background-position: left 12px center, left 17px center !important; }

/* Native checkbox/radio paint differs between engines. Preserve the existing
   switch component and normalize ordinary choices, including disabled forms. */
input:is([type=checkbox], [type=radio]):not(.native-toggle) {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  min-height: 18px;
  flex: 0 0 18px;
  padding: 0;
  border: 1px solid var(--console-border, #9cabc1);
  border-radius: 4px;
  background: var(--console-surface, #fff);
  vertical-align: middle;
  cursor: pointer;
}

input[type=radio]:not(.native-toggle) { border-radius: 50%; }
input:is([type=checkbox], [type=radio]):not(.native-toggle):checked,
input[type=checkbox]:not(.native-toggle):indeterminate {
  border-color: #326be6;
  background: #326be6;
}
input[type=checkbox]:not(.native-toggle):checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type=radio]:checked::after,
input[type=checkbox]:not(.native-toggle):indeterminate::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  transform: none;
}
input[type=checkbox]:not(.native-toggle):indeterminate::after {
  inset: 7px 3px;
  border-radius: 0;
  width: auto;
  height: 2px;
}
input:is([type=checkbox], [type=radio]):disabled { cursor: not-allowed; }
.native-toggle { -webkit-appearance: none; border: 0; padding: 0; }

:where(input, select, textarea, button):focus-visible {
  outline: 3px solid #75a7ff;
  outline-offset: 3px;
}

/* Keep platform accessibility controls in forced-color modes. */
@media (forced-colors: active) {
  select:not([multiple]):not([size]), select[size="1"],
  input:is([type=checkbox], [type=radio]):not(.native-toggle) {
    -webkit-appearance: auto;
    appearance: auto;
    background-image: none !important;
  }
  input:is([type=checkbox], [type=radio]):not(.native-toggle)::after { display: none; }
}

/* Avoid automatic form zoom on touch devices without disabling page zoom. */
@media (max-width: 640px) and (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
  select, textarea { font-size: 16px !important; }
}