:root {
  --csm-control-height: 30px;
  --csm-control-font-size: 12px;
  --csm-control-padding: 10px;
  --csm-control-radius: 8px;
  --csm-control-border: #d9e0e8;
  --csm-control-background: #fbfcfe;
  --csm-control-text: #33445e;
  --csm-control-accent: #476c9d;
}

label, legend {
  color: var(--csm-control-text);
  font-size: var(--csm-control-font-size);
  line-height: 1.4;
}

:is(.csm-status-text, .empty-state, .mc-muted, .la-empty, p[role="status"]) {
  color: #586a81;
  font-size: var(--csm-control-font-size);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

:is(.csm-status-text, p[role="status"]) {
  margin-block: 0;
}

:is(p[role="alert"], span[role="alert"], .mc-message, .la-search-error, .csm-field-hint, label > small) {
  font-size: var(--csm-control-font-size);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

:is(input:not([type=hidden], [type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=button], [type=submit], [type=reset], [type=image]), select, textarea) {
  box-sizing: border-box;
  min-height: var(--field-height, var(--csm-control-height));
  max-width: 100%;
  padding: 0 var(--field-padding, var(--csm-control-padding));
  border: 1px solid var(--csm-control-border);
  border-radius: var(--csm-control-radius);
  background-color: var(--csm-control-background);
  color: var(--csm-control-text);
  font: inherit;
  font-size: var(--csm-control-font-size);
}

:is(input, textarea)::placeholder { color: #657387; opacity: 1; }

:is(input:not([type=hidden], [type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=button], [type=submit], [type=reset], [type=image]), select:not([multiple], [size]:not([size="1"]))) {
  height: var(--field-height, var(--csm-control-height));
}

:is(textarea, select[multiple], select[size]:not([size="1"])) {
  padding-block: 6px;
  line-height: 1.5;
}

textarea { min-height: 5rem; resize: vertical; }

:is(input, select, textarea)[aria-invalid="true"] { border-color: #c45a65; }
:is(input, select, textarea):focus-visible { outline: 2px solid #638cce; outline-offset: 2px; }
:is(input, select, textarea):disabled { opacity: .55; cursor: not-allowed; }

input:is([type=checkbox], [type=radio], [type=range]) { accent-color: var(--csm-control-accent); }

input[type=color] {
  box-sizing: border-box;
  height: var(--csm-control-height);
  padding: 3px;
  border: 1px solid var(--csm-control-border);
  border-radius: var(--csm-control-radius);
  background: var(--csm-control-background);
}

input[type=file] { max-width: 100%; color: var(--csm-control-text); font: inherit; font-size: var(--csm-control-font-size); }
input[type=file]::file-selector-button {
  min-height: var(--csm-control-height);
  padding-inline: var(--csm-control-padding);
  border: 1px solid var(--csm-control-border);
  border-radius: var(--csm-control-radius);
  background: var(--csm-control-background);
  color: var(--csm-control-text);
  font: inherit;
}
input[type=file]:not(:disabled)::file-selector-button { cursor: pointer; }

.pub-site :is(.la-enhanced, .la-face-option) { font-size: var(--csm-control-font-size); line-height: 1.4; }
.pub-site :is(.la-file-note, .la-upload-privacy, .la-photo-drop > [data-lookalike-file-hint]) { font-size: var(--csm-control-font-size); }