/* Shared application fields. The Appearance authority supplies every color;
 * component sheets retain dimensions, grids and spacing. */
body :is(.hssm-wrap, .hssm-form, .hssm-cc, .hssm-cc-form) :is(
 input:not([type]), input[type="text"], input[type="email"], input[type="number"],
 input[type="password"], input[type="search"], input[type="url"], input[type="tel"],
 input[type="date"], input[type="time"], input[type="datetime-local"],
 input[type="month"], input[type="week"], input[type="file"], select, textarea
) {
 background-color: var(--hssm-control-bg, var(--hssm-field-bg));
 border-color: var(--hssm-control-border, var(--hssm-field-border));
 color: var(--hssm-control-text, var(--hssm-field-text));
 -webkit-text-fill-color: currentColor;
 caret-color: var(--hssm-field-text);
 font-family: inherit;
 font-weight: 400;
 opacity: 1;
}

body :is(.hssm-wrap, .hssm-form, .hssm-cc, .hssm-cc-form) :is(
 input:not([type]), input[type="text"], input[type="email"], input[type="number"],
 input[type="password"], input[type="search"], input[type="url"], input[type="tel"],
 input[type="date"], input[type="time"], input[type="datetime-local"],
 input[type="month"], input[type="week"], input[type="file"], select, textarea
):focus {
 background-color: var(--hssm-control-bg, var(--hssm-field-bg));
 border-color: var(--hssm-field-focus);
 color: var(--hssm-control-text, var(--hssm-field-text));
 outline: 2px solid var(--hssm-focus-ring);
 outline-offset: 3px;
 box-shadow: 0 0 0 5px var(--hssm-focus-halo);
}

body :is(.hssm-wrap, .hssm-form, .hssm-cc, .hssm-cc-form) :is(input, textarea)[readonly] {
 cursor: default;
}

body :is(.hssm-wrap, .hssm-form, .hssm-cc, .hssm-cc-form) :is(input, select, textarea):disabled {
 --hssm-control-bg: var(--hssm-field-disabled-bg);
 --hssm-control-text: var(--hssm-field-disabled-text);
 --hssm-control-border: var(--hssm-field-disabled-border);
 cursor: not-allowed;
 opacity: 1;
}

body :is(.hssm-wrap, .hssm-form, .hssm-cc, .hssm-cc-form) :is(input, textarea)::placeholder {
 color: var(--hssm-field-placeholder);
 -webkit-text-fill-color: var(--hssm-field-placeholder);
 opacity: 1;
}

body :is(.hssm-form, .hssm-cc-form, .hssm-cc-auth) :is(.hssm-help, .hssm-field-help, .hssm-cc-help, label > small, .description) {
 --hssm-cc-muted: var(--hssm-field-help);
 color: var(--hssm-field-help);
}

/* The controls retain their native input semantics and keyboard behavior.
 * Explicit marks let both checked fill and checked foreground be configured. */
body :is(.hssm-wrap, .hssm-form, .hssm-cc, .hssm-cc-form) :is(input[type="checkbox"], input[type="radio"]) {
 appearance: none;
 align-self: flex-start;
 background-color: var(--hssm-control-bg, var(--hssm-field-bg));
 border: 2px solid var(--hssm-control-border, var(--hssm-field-border));
 border-radius: 4px;
 box-sizing: border-box;
 color: var(--hssm-field-checked-text);
 cursor: pointer;
 display: inline-grid;
 flex: 0 0 auto;
 font: inherit;
 height: 20px;
 min-height: 20px;
 min-width: 20px;
 padding: 0;
 place-content: center;
 vertical-align: middle;
 width: 20px;
}

body :is(.hssm-wrap, .hssm-form, .hssm-cc, .hssm-cc-form) input[type="radio"] { border-radius: 50%; }
body :is(.hssm-wrap, .hssm-form, .hssm-cc, .hssm-cc-form) :is(input[type="checkbox"], input[type="radio"]):checked {
 background-color: var(--hssm-field-checked-bg);
 border-color: var(--hssm-field-checked-bg);
}
body :is(.hssm-wrap, .hssm-form, .hssm-cc, .hssm-cc-form) input[type="checkbox"]:checked::before {
 border: solid currentColor;
 border-width: 0 2px 2px 0;
 content: "";
 height: 9px;
 margin-top: -2px;
 transform: rotate(45deg);
 width: 5px;
}
body :is(.hssm-wrap, .hssm-form, .hssm-cc, .hssm-cc-form) input[type="radio"]:checked::before {
 background-color: currentColor;
 border-radius: 50%;
 content: "";
 height: 8px;
 width: 8px;
}
body :is(.hssm-wrap, .hssm-form, .hssm-cc, .hssm-cc-form) :is(input[type="checkbox"], input[type="radio"]):disabled {
 background-color: var(--hssm-field-disabled-bg);
 border-color: var(--hssm-field-disabled-border);
 color: var(--hssm-field-disabled-text);
 cursor: not-allowed;
}

/* Chrome/Safari paint autofill in the user-agent sheet. An inset surface and
 * explicit text fill preserve the effective role values without !important. */
body :is(.hssm-wrap, .hssm-form, .hssm-cc, .hssm-cc-form) :is(input, select, textarea):is(:autofill, :-webkit-autofill) {
 box-shadow: 0 0 0 1000px var(--hssm-control-bg, var(--hssm-field-bg)) inset;
 -webkit-text-fill-color: var(--hssm-control-text, var(--hssm-field-text));
 caret-color: var(--hssm-field-text);
}

@media (forced-colors: active) {
 body :is(.hssm-wrap, .hssm-form, .hssm-cc, .hssm-cc-form) :is(input[type="checkbox"], input[type="radio"]) {
  appearance: auto;
 }
 body :is(.hssm-wrap, .hssm-form, .hssm-cc, .hssm-cc-form) :is(input[type="checkbox"], input[type="radio"])::before { content: none; }
}