/* Partners 3.0 form helpers. */

body.ss3-site-body input:not([type="checkbox"]):not([type="radio"]),
body.ss3-site-body select,
body.ss3-site-body textarea,
body.ss3-site-body .button,
body .ss3-identity-notice .button {
    border-radius: var(--ss3-radius-sm);
    font-size: var(--ss3-font-size-control);
}

/* One border-box height owns single-line fields and text buttons, including
   Foundation .small/.large buttons. Textareas, list selects and choice controls
   keep their content-appropriate geometry. */
body.ss3-site-body input:where(:not([type]), [type="text"], [type="search"], [type="email"], [type="url"], [type="tel"], [type="password"], [type="number"], [type="date"], [type="datetime-local"], [type="month"], [type="week"], [type="time"], [type="color"], [type="button"], [type="submit"], [type="reset"]),
body.ss3-site-body select:not([multiple]):not([size]),
body.ss3-site-body select[size="1"]:not([multiple]),
body.ss3-site-body .button,
body .ss3-identity-notice .button {
    height: var(--ss3-control-height);
    min-height: var(--ss3-control-height);
    padding-block: 0;
}

body.ss3-site-body :where(.button:not([hidden])),
body .ss3-identity-notice :where(.button:not([hidden])) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ss3-gap-inline);
    line-height: var(--ss3-line-height-tight);
}

/* Shared text-button icon slot: pair a decorative icon with a label span. */
body.ss3-site-body .button > :where(i[class*="fa-"]),
body .ss3-identity-notice .button > :where(i[class*="fa-"]) {
    flex: 0 0 1.5rem;
    width: 1.5rem;
    font-size: 1.5rem;
    line-height: 1;
    text-align: center;
}

/* Native file picker: match Foundation .button with Partners control geometry.
   Keep the real file input and browser-provided filename/picker behavior. */
body.ss3-site-body input[type="file"]:not([hidden]) {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: var(--ss3-control-height);
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--ss3-color-text);
}
body.ss3-site-body input[type="file"]::file-selector-button {
    display: inline-block;
    vertical-align: middle;
    height: var(--ss3-control-height);
    min-height: var(--ss3-control-height);
    margin: 0 var(--ss3-gap-inline) 0 0;
    padding: 0 1em;
    border: 1px solid transparent;
    border-radius: var(--ss3-radius-sm);
    background: #1779ba;
    color: #fefefe;
    font: inherit;
    font-size: var(--ss3-font-size-control);
    line-height: 1;
    text-align: center;
    cursor: pointer;
    transition: background-color .25s ease-out, color .25s ease-out;
}
body.ss3-site-body input[type="file"]:not(:disabled)::file-selector-button:hover,
body.ss3-site-body input[type="file"]:not(:disabled):focus-visible::file-selector-button {
    background: #14679e;
    color: #fefefe;
}
body.ss3-site-body input[type="file"]:focus { outline: 0; }
body.ss3-site-body input[type="file"]:focus-visible::file-selector-button {
    outline: auto;
    outline-offset: 2px;
}
body.ss3-site-body input[type="file"]:disabled,
body.ss3-site-body input[type="file"]:disabled::file-selector-button {
    cursor: not-allowed;
}
body.ss3-site-body input[type="file"]:disabled::file-selector-button {
    opacity: .25;
}

/* Opt-in trailing status for editable text/contact fields. Reserve one slot in
   every state so text and caret alignment do not move as feedback changes. */
.ss3-input-status-control {
    position: relative;
    min-width: 0;
}

body.ss3-site-body .ss3-input-status-control > input:not([type="hidden"]) {
    width: 100%;
    margin-bottom: 0;
    padding-inline-end: 2rem;
}

.ss3-input-status-control > .ss3-input-status-indicator {
    position: absolute;
    inset-block: 0;
    inset-inline-end: var(--ss3-space-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    font-size: 1rem;
    line-height: 1;
    color: var(--ss3-color-text-muted);
    pointer-events: none;
}

.ss3-input-status-indicator > i {
    width: 1rem;
    margin: 0;
    font-size: 1rem;
    line-height: 1;
    text-align: center;
}

.ss3-input-status-indicator[hidden],
.ss3-input-status-indicator:empty {
    display: none;
}

.ss3-input-status-control > .ss3-input-status-indicator.is-error,
.ss3-input-status-indicator > .ss3-phone-issue-icon.is-error,
.ss3-field-message.is-error {
    color: var(--ss3-color-error);
}

.ss3-input-status-control > .ss3-input-status-indicator.is-warning,
.ss3-input-status-indicator > .ss3-phone-issue-icon.is-warning,
.ss3-field-message.is-warning {
    color: var(--ss3-color-warning);
}

.ss3-input-status-control > .ss3-input-status-indicator.is-info,
.ss3-input-status-indicator > .ss3-phone-issue-icon.is-info,
.ss3-field-message.is-info {
    color: var(--ss3-color-info);
}

.ss3-input-status-control > input[aria-invalid="true"] {
    border-color: var(--ss3-color-error);
}

/* Action-capable trailing slot. Opt in once for every state; the shared action
   owner supplies target, glyph, palette and focus treatment. Status remains
   informational and centered in the same slot when it replaces an action. */
body.ss3-site-body .ss3-input-status-control[data-action="true"] > input:not([type="hidden"]) {
    padding-inline-end: calc(var(--ss3-control-height) + var(--ss3-space-2));
}

.ss3-input-status-control[data-action="true"] > .ss3-input-status-indicator {
    inset-inline-end: 0;
    width: var(--ss3-control-height);
}

.ss3-input-status-control[data-action="true"] > .ss3-icon-action {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
}

.ss3-input-status-control[data-action="true"] > .ss3-icon-action[hidden] {
    display: none;
}


/* Delayed feedback in an existing status slot. Reduced motion retains a static
   pending glyph; neither state changes the surrounding control geometry. */
.ss3-pending-indicator.is-pending {
    color: var(--ss3-color-action);
    pointer-events: none;
}
.ss3-pending-indicator.is-pending > i {
    display: inline-block;
    width: 1rem;
    margin: 0;
    font-size: 1rem;
    line-height: 1;
    text-align: center;
}
.ss3-pending-indicator[hidden] { display: none; }
/* An existing caption reserves this exact inline size while its pending glyph
   shares the same grid cell. Hiding the caption never collapses its track. */
.ss3-pending-slot { display: inline-grid; align-items: center; }
.ss3-pending-slot > * { grid-area: 1 / 1; }
.ss3-pending-slot.is-pending > :not(.ss3-pending-indicator) { visibility: hidden; }
.ss3-pending-slot > .ss3-pending-indicator { justify-self: center; align-self: center; }
.ss3-pending-content[aria-busy="true"] { visibility: hidden; }

@media (prefers-reduced-motion: no-preference) {
    .ss3-pending-indicator.is-pending > i { animation: ss3-pending-spin 1s linear infinite; }
}
@keyframes ss3-pending-spin { to { transform: rotate(1turn); } }

/* Input-group adornments share the single-line control geometry. */
body.ss3-site-body .input-group > .input-group-label {
    height: var(--ss3-control-height);
    min-height: var(--ss3-control-height);
}

body.ss3-site-body .input-group > .input-group-field:not(:first-child):not(:last-child) {
    border-radius: 0;
}

body.ss3-site-body .input-group > .input-group-field:first-child {
    border-radius: var(--ss3-radius-sm) 0 0 var(--ss3-radius-sm);
}

body.ss3-site-body .input-group > .input-group-button:last-child > .button {
    border-radius: 0 var(--ss3-radius-sm) var(--ss3-radius-sm) 0;
}

/* The shared field/form composition owns external row spacing. Foundation's
   input-group margin must not add a second allowance. */
.ss3-field > .input-group {
    margin-bottom: 0;
}

.ss3-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    align-content: start;
    align-items: start;
    gap: var(--ss3-gap-row) var(--ss3-gap-column);
}

.ss3-form-grid[data-columns="1"] {
    grid-template-columns: minmax(0, 1fr);
}

/* Explicit responsive cells use the familiar small/medium/large span vocabulary
   while the shared composition owns the 16px column gap and aligned outer edges.
   No Foundation padding/margin gutter is required around the form. */
.ss3-form-grid[data-layout="cells"] {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-content: start;
    align-items: start;
    gap: var(--ss3-gap-row) var(--ss3-gap-column);
}

.ss3-form-grid[data-layout="cells"] > .cell {
    grid-column: span 12;
    min-width: 0;
    width: auto;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
}

.ss3-form-grid[data-layout="cells"] > .cell.small-1 { grid-column: span 1; }
.ss3-form-grid[data-layout="cells"] > .cell.small-2 { grid-column: span 2; }
.ss3-form-grid[data-layout="cells"] > .cell.small-3 { grid-column: span 3; }
.ss3-form-grid[data-layout="cells"] > .cell.small-4 { grid-column: span 4; }
.ss3-form-grid[data-layout="cells"] > .cell.small-5 { grid-column: span 5; }
.ss3-form-grid[data-layout="cells"] > .cell.small-6 { grid-column: span 6; }
.ss3-form-grid[data-layout="cells"] > .cell.small-7 { grid-column: span 7; }
.ss3-form-grid[data-layout="cells"] > .cell.small-8 { grid-column: span 8; }
.ss3-form-grid[data-layout="cells"] > .cell.small-9 { grid-column: span 9; }
.ss3-form-grid[data-layout="cells"] > .cell.small-10 { grid-column: span 10; }
.ss3-form-grid[data-layout="cells"] > .cell.small-11 { grid-column: span 11; }
.ss3-form-grid[data-layout="cells"] > .cell.small-12 { grid-column: span 12; }

@media screen and (min-width: 40em) {
    .ss3-form-grid[data-layout="cells"] > .cell.medium-1 { grid-column: span 1; }
    .ss3-form-grid[data-layout="cells"] > .cell.medium-2 { grid-column: span 2; }
    .ss3-form-grid[data-layout="cells"] > .cell.medium-3 { grid-column: span 3; }
    .ss3-form-grid[data-layout="cells"] > .cell.medium-4 { grid-column: span 4; }
    .ss3-form-grid[data-layout="cells"] > .cell.medium-5 { grid-column: span 5; }
    .ss3-form-grid[data-layout="cells"] > .cell.medium-6 { grid-column: span 6; }
    .ss3-form-grid[data-layout="cells"] > .cell.medium-7 { grid-column: span 7; }
    .ss3-form-grid[data-layout="cells"] > .cell.medium-8 { grid-column: span 8; }
    .ss3-form-grid[data-layout="cells"] > .cell.medium-9 { grid-column: span 9; }
    .ss3-form-grid[data-layout="cells"] > .cell.medium-10 { grid-column: span 10; }
    .ss3-form-grid[data-layout="cells"] > .cell.medium-11 { grid-column: span 11; }
    .ss3-form-grid[data-layout="cells"] > .cell.medium-12 { grid-column: span 12; }
}

@media screen and (min-width: 64em) {
    .ss3-form-grid[data-layout="cells"] > .cell.large-1 { grid-column: span 1; }
    .ss3-form-grid[data-layout="cells"] > .cell.large-2 { grid-column: span 2; }
    .ss3-form-grid[data-layout="cells"] > .cell.large-3 { grid-column: span 3; }
    .ss3-form-grid[data-layout="cells"] > .cell.large-4 { grid-column: span 4; }
    .ss3-form-grid[data-layout="cells"] > .cell.large-5 { grid-column: span 5; }
    .ss3-form-grid[data-layout="cells"] > .cell.large-6 { grid-column: span 6; }
    .ss3-form-grid[data-layout="cells"] > .cell.large-7 { grid-column: span 7; }
    .ss3-form-grid[data-layout="cells"] > .cell.large-8 { grid-column: span 8; }
    .ss3-form-grid[data-layout="cells"] > .cell.large-9 { grid-column: span 9; }
    .ss3-form-grid[data-layout="cells"] > .cell.large-10 { grid-column: span 10; }
    .ss3-form-grid[data-layout="cells"] > .cell.large-11 { grid-column: span 11; }
    .ss3-form-grid[data-layout="cells"] > .cell.large-12 { grid-column: span 12; }
}

/* Standard Search field: one in-control Clear target, shared icon geometry.
   Consumers place this component in their field/caption; no leading decoration. */
.ss3-search-control,
.ss3-input-control {
    position: relative;
    min-width: 0;
    width: 100%;
}

.ss3-search-control > input[type="search"],
.ss3-input-control > input {
    width: 100%;
    min-width: 0;
    min-height: var(--ss3-control-height);
    margin: 0;
    padding-inline-end: calc(var(--ss3-clear-target) + var(--ss3-space-2));
}

.ss3-search-control > input[type="search"]::placeholder {
    color: var(--ss3-color-text-muted);
    opacity: 0.88;
}

.ss3-search-control > input[type="search"]::-webkit-search-decoration,
.ss3-search-control > input[type="search"]::-webkit-search-cancel-button,
.ss3-search-control > input[type="search"]::-webkit-search-results-button,
.ss3-search-control > input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

.ss3-password-control {
    position: relative;
}

.ss3-password-control > input {
    width: 100%;
    margin-bottom: 0;
    padding-right: 3rem;
}

.ss3-password-control > .ss3-icon-action {
    position: absolute;
    top: 50%;
    right: 0.35rem;
    z-index: 1;
    transform: translateY(-50%);
}

/* Component display modes must not override native hidden state. */
.ss3-form-grid[hidden],
.ss3-field[hidden],
.ss3-field-row[hidden] {
    display: none;
}

/* Form-level feedback/help occupies a complete row, never a stretched field cell. */
.ss3-form-grid > .ss3-error-summary,
.ss3-form-grid > .ss3-alert,
.ss3-form-grid > .ss3-help,
.ss3-form-grid > .ss3-action-bar,
.ss3-form-grid > .ss3-row-actions {
    grid-column: 1 / -1;
    align-self: start;
}

.ss3-field {
    display: flex;
    flex-direction: column;
    gap: var(--ss3-gap-label);
}

/* Field guidance participates in the field gap, not paragraph margins. */
.ss3-field > .ss3-help {
    margin: 0;
}

.ss3-field > .ss3-help:empty {
    display: none;
}

textarea[data-grow-rows] {
    resize: vertical;
}

.ss3-field > input:not([type="checkbox"]):not([type="radio"]),
.ss3-field > select,
.ss3-field > textarea {
    width: 100%;
    margin-bottom: 0;
}

/* Compact checkbox/label controls are one inline clickable unit. */
/* Vertical end alignment belongs only to a form-grid row. In a column-flex
   section, align-self:end would move the whole control to the right and can clip it. */
.ss3-form-grid > .ss3-field[data-control="checkbox"] {
    align-self: end;
}

.ss3-field[data-control="checkbox"] > label,
.ss3-field[data-control="radio"] > label {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    min-height: var(--ss3-control-height);
    align-items: center;
    gap: var(--ss3-space-2);
    margin: 0;
    cursor: pointer;
    font-size: var(--ss3-font-size-control);
    font-weight: var(--ss3-font-weight-regular);
    line-height: var(--ss3-line-height-tight);
}

.ss3-field[data-control="checkbox"] > label > span,
.ss3-field[data-control="radio"] > label > span,
.ss3-field[data-control="switch"] > label > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.ss3-field[data-control="checkbox"] input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    display: grid;
    flex: 0 0 auto;
    width: 1.375rem;
    height: 1.375rem;
    place-content: center;
    margin: 0;
    border: 2px solid var(--ss3-theme-border-strong, #7A8DA1);
    border-radius: var(--ss3-radius-sm);
    background: var(--ss3-theme-surface, #FFFFFF);
    cursor: pointer;
}

.ss3-field[data-control="checkbox"] input[type="checkbox"]::before {
    content: "";
    width: 0.38rem;
    height: 0.72rem;
    border: solid var(--ss3-theme-action-text, #FFFFFF);
    border-width: 0 0.15rem 0.15rem 0;
    transform: rotate(45deg) scale(0);
    transform-origin: center;
}

.ss3-field[data-control="checkbox"] input[type="checkbox"]:checked {
    border-color: var(--ss3-theme-action, #0069B4);
    background: var(--ss3-theme-action, #0069B4);
}

.ss3-field[data-control="checkbox"] input[type="checkbox"]:checked::before {
    transform: rotate(45deg) scale(1);
}

.ss3-field[data-control="checkbox"] input[type="checkbox"]:indeterminate {
    border-color: var(--ss3-theme-action, #0069B4);
    background: var(--ss3-theme-action, #0069B4);
}

.ss3-field[data-control="checkbox"] input[type="checkbox"]:indeterminate::before {
    width: 0.7rem;
    height: 0;
    border-width: 0 0 0.15rem 0;
    transform: none;
}

.ss3-field[data-control="checkbox"] input[type="checkbox"]:focus-visible,
.ss3-field[data-control="switch"] input[type="checkbox"]:focus-visible {
    outline: 3px solid rgb(0 105 180 / 0.30);
    outline-offset: 2px;
}

.ss3-field[data-control="checkbox"] input[type="checkbox"]:disabled,
.ss3-field[data-control="switch"] input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

/* Use a switch only for an immediately applied binary setting. */
.ss3-form-grid > .ss3-field[data-control="switch"] {
    align-self: end;
}

.ss3-field[data-control="switch"] > label {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    min-height: var(--ss3-control-height);
    align-items: center;
    gap: var(--ss3-space-2);
    margin: 0;
    cursor: pointer;
    font-size: var(--ss3-font-size-control);
    font-weight: var(--ss3-font-weight-regular);
    line-height: var(--ss3-line-height-tight);
}

.ss3-field[data-control="switch"] input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 1.5rem;
    margin: 0;
    border: 2px solid var(--ss3-theme-border-strong, #7A8DA1);
    border-radius: 999px;
    background: var(--ss3-theme-surface-muted, #EEF4F8);
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}

.ss3-field[data-control="switch"] input[type="checkbox"]::before {
    content: "";
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--ss3-theme-border-strong, #7A8DA1);
    transition: transform 120ms ease, background 120ms ease;
}

.ss3-field[data-control="switch"] input[type="checkbox"]:checked {
    border-color: var(--ss3-theme-action, #0069B4);
    background: var(--ss3-theme-action, #0069B4);
}

.ss3-field[data-control="switch"] input[type="checkbox"]:checked::before {
    transform: translateX(1.25rem);
    background: var(--ss3-theme-action-text, #FFFFFF);
}

.ss3-field-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ss3-space-2);
}

/* Input/action rows budget for both controls. The native 100% input width must
   not force a button onto another line when their usable widths fit. */
.ss3-field-row:has(> .button) > input:not([type="checkbox"]):not([type="radio"]) {
    flex: 1 1 14rem;
    min-inline-size: min(100%, 14rem);
}

/* A compact formatted phone still needs its digits, separators and helper slot.
   Preserve its compact upper bound; wrap before the helper consumes text space. */
.ss3-field-group > .ss3-field[data-field-size="compact"]:has(> .ss3-input-status-control[data-action="true"] > :is(input[type="tel"], input[inputmode="tel"])) {
    min-inline-size: min(100%, 14rem);
}

/* Two native date/time fields must fit before a neighbouring control shares
   their row. Inside a narrower container the pair can still wrap internally. */
.ss3-field-group > .ss3-field-pair[data-field-size="compact"]:has(> .ss3-field > input[type="datetime-local"]) {
    min-inline-size: min(100%, calc(28rem + var(--ss3-gap-column)));
}

.ss3-form-grid + .ss3-row-actions {
    margin-top: var(--ss3-space-3);
}

.ss3-field label,
.ss3-field-label {
    color: var(--ss3-color-text);
    font-size: var(--ss3-font-size-label);
    font-weight: var(--ss3-font-weight-strong);
    line-height: var(--ss3-line-height-tight);
}

.ss3-help {
    white-space: normal;
    color: var(--ss3-color-text-muted);
    font-size: var(--ss3-font-size-supporting);
    line-height: var(--ss3-line-height-body);
}

.ss3-error-summary {
    padding: var(--ss3-space-3) var(--ss3-space-4);
    border: 1px solid rgb(168 32 32 / 0.28);
    border-radius: var(--ss3-radius-md);
    background: var(--ss3-color-error-bg);
    color: var(--ss3-color-error);
}

.ss3-error-summary > :first-child {
    margin-top: 0;
}

.ss3-error-summary > :last-child {
    margin-bottom: 0;
}

.ss3-error-summary ul,
.ss3-error-summary ol {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 1.5rem;
}

.ss3-error-summary li + li {
    margin-top: var(--ss3-space-1);
}

/* One Clear control for opt-in text/Search, native select and Select2.
   Explicit text/Search wrappers work in legacy shells as well as V3.
   Native/select2 styling retains its existing theme scope.
   A 44px target centers on the existing field; field density stays unchanged. */
:is(.ss3-search-control > button[data-search-clear], .ss3-input-control > button[data-input-clear], :is(body.ss3-site-body, .ss3-navigation-header) :is(.ss3-select-clear, .select2-container--default .select2-selection__clear)) {
    position: absolute;
    top: 50%;
    inset-inline-end: var(--ss3-clear-inset, 0px);
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    float: none;
    box-sizing: border-box;
    width: var(--ss3-clear-target);
    min-width: var(--ss3-clear-target);
    height: var(--ss3-clear-target);
    min-height: var(--ss3-clear-target);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--ss3-radius-sm);
    background: transparent;
    box-shadow: none;
    color: var(--ss3-clear-color);
    font-size: 0;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}
:is(body.ss3-site-body, .ss3-navigation-header) :is(.ss3-select-clear, .select2-container--default .select2-selection__clear) { --ss3-clear-inset: var(--ss3-select-indicator-width); }
:is(body.ss3-site-body, .ss3-navigation-header) .select2-container--default .select2-selection--multiple .select2-selection__clear { top: calc((var(--ss3-control-height) - 2px) / 2); }
:is(.ss3-search-control > button[data-search-clear], .ss3-input-control > button[data-input-clear], :is(body.ss3-site-body, .ss3-navigation-header) :is(.ss3-select-clear, .select2-container--default .select2-selection__clear))::before {
    content: "";
    width: var(--ss3-clear-glyph);
    height: var(--ss3-clear-glyph);
    flex: 0 0 var(--ss3-clear-glyph);
    background: currentColor;
    -webkit-mask: var(--ss3-clear-mask) center / contain no-repeat;
    mask: var(--ss3-clear-mask) center / contain no-repeat;
}
:is(.ss3-search-control > button[data-search-clear], .ss3-input-control > button[data-input-clear], :is(body.ss3-site-body, .ss3-navigation-header) .select2-selection__clear) > :is(i, span) { display: none; }
/* The hit target may extend 2px beyond a 40px field. Paint hover/focus
   inside its border, never over the field edge. */
:is(.ss3-search-control > button[data-search-clear], .ss3-input-control > button[data-input-clear], :is(body.ss3-site-body, .ss3-navigation-header) :is(.ss3-select-clear, .select2-container--default .select2-selection__clear))::after {
    content: "";
    position: absolute;
    inset: var(--ss3-clear-state-inset);
    border-radius: var(--ss3-radius-sm);
    background: transparent;
    pointer-events: none;
    z-index: -1;
}
:is(.ss3-search-control > button[data-search-clear], .ss3-input-control > button[data-input-clear], :is(body.ss3-site-body, .ss3-navigation-header) :is(.ss3-select-clear, .select2-container--default .select2-selection__clear)):not(:disabled):not([aria-disabled="true"]):hover {
    color: var(--ss3-clear-color);
    background: transparent;
}
:is(.ss3-search-control > button[data-search-clear], .ss3-input-control > button[data-input-clear], :is(body.ss3-site-body, .ss3-navigation-header) :is(.ss3-select-clear, .select2-container--default .select2-selection__clear)):not(:disabled):not([aria-disabled="true"]):hover::after {
    background: var(--ss3-clear-hover-bg);
}
:is(.ss3-search-control > button[data-search-clear], .ss3-input-control > button[data-input-clear], :is(body.ss3-site-body, .ss3-navigation-header) :is(.ss3-select-clear, .select2-container--default .select2-selection__clear)):focus-visible {
    outline: 2px solid var(--ss3-color-action);
    outline-offset: calc(-1 * (var(--ss3-clear-state-inset) + 2px));
    box-shadow: none;
}
:is(.ss3-search-control > button[data-search-clear], .ss3-input-control > button[data-input-clear], :is(body.ss3-site-body, .ss3-navigation-header) :is(.ss3-select-clear, .select2-container--default .select2-selection__clear)):is(:disabled, [aria-disabled="true"]) {
    color: var(--ss3-clear-color);
    background: transparent;
    opacity: 0.5;
    cursor: default;
}
:is(.ss3-search-control > button[data-search-clear], .ss3-input-control > button[data-input-clear], :is(body.ss3-site-body, .ss3-navigation-header) :is(.ss3-select-clear, .select2-container--default .select2-selection__clear))[hidden] { display: none; }

.ss3-field.has-error input,
.ss3-field.has-error select,
.ss3-field.has-error textarea {
    border-color: var(--ss3-color-error);
}

.ss3-field.has-warning input,
.ss3-field.has-warning select,
.ss3-field.has-warning textarea {
    border-color: var(--ss3-color-warning);
}

/* Shared single-selection indicators: native and Select2 use the same geometry. */
body.ss3-site-body {
    --ss3-select-indicator-width: 2.25rem;
}

body.ss3-site-body select:not(.select2-hidden-accessible):not([multiple]):is(:not([size]), [size="1"]) {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%226%22%20viewBox%3D%220%200%2012%206%22%3E%3Cpath%20d%3D%22M0%200h12L6%206z%22%20fill%3D%22%234a5568%22%2F%3E%3C%2Fsvg%3E");
    background-size: 0.75rem 0.375rem;
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-origin: padding-box;
    padding-inline-end: calc(var(--ss3-select-indicator-width) + var(--ss3-gap-inline));
}

.ss3-select-control {
    position: relative;
    width: 100%;
}
.ss3-select-control > select { margin-bottom: 0; }
body.ss3-site-body .ss3-select-control > select:not(.select2-hidden-accessible):not([multiple]):is(:not([size]), [size="1"]) {
    padding-inline-end: calc(var(--ss3-clear-target) + var(--ss3-select-indicator-width) + var(--ss3-gap-inline));
}

body.ss3-site-body .select2-container--default .select2-selection--single {
    position: relative;
    min-height: var(--ss3-control-height);
    height: var(--ss3-control-height);
    border: 1px solid #cacaca;
    border-radius: var(--ss3-radius-sm);
}
body.ss3-site-body .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: var(--ss3-font-size-control);
    line-height: calc(var(--ss3-control-height) - 2px);
    padding-left: 0.6rem;
    padding-right: calc(var(--ss3-select-indicator-width) + var(--ss3-gap-inline));
}
body.ss3-site-body .select2-container--default .select2-selection--single.ss3-clearable-selection .select2-selection__rendered {
    padding-right: calc(var(--ss3-clear-target) + var(--ss3-select-indicator-width) + var(--ss3-gap-inline));
}
body.ss3-site-body .select2-container--default .select2-selection--single .select2-selection__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    right: 0;
    width: var(--ss3-select-indicator-width);
    height: calc(var(--ss3-control-height) - 2px);
}
body.ss3-site-body .select2-container--default .select2-selection--single .select2-selection__arrow b {
    position: static;
    width: 0;
    height: 0;
    margin: 0;
    border-color: #4a5568 transparent transparent transparent;
    border-width: 0.375rem 0.375rem 0 0.375rem;
}
body.ss3-site-body .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #4a5568 transparent;
    border-width: 0 0.375rem 0.375rem 0.375rem;
}

/* Select2 multiple selection uses the standard closed-field minimum, growing
   only when choices wrap. The inline search is a chip-row input, not a field. */
body.ss3-site-body .select2-container--default .select2-selection--multiple {
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: var(--ss3-control-height);
    height: auto;
    padding: var(--ss3-space-1) calc(var(--ss3-select-indicator-width) + var(--ss3-gap-inline)) var(--ss3-space-1) 0.6rem;
    border: 1px solid #cacaca;
    border-radius: var(--ss3-radius-sm);
    font-size: var(--ss3-font-size-control);
}
body.ss3-site-body .select2-container--default .select2-selection--multiple.ss3-clearable-selection {
    padding-inline-end: calc(var(--ss3-clear-target) + var(--ss3-select-indicator-width) + var(--ss3-gap-inline));
}
body.ss3-site-body .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ss3-space-1);
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: visible;
    white-space: normal;
}
body.ss3-site-body .select2-container--default .select2-selection--multiple .select2-selection__choice {
    float: none;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0 0.375rem;
    line-height: 1.625rem;
    overflow-wrap: anywhere;
}
body.ss3-site-body .select2-container--default .select2-selection--multiple .select2-search--inline {
    float: none;
    flex: 1 1 1.5rem;
    min-width: 1.5rem;
    max-width: 100%;
    margin: 0;
}
body.ss3-site-body .select2-container--default .select2-selection--multiple .select2-search__field {
    display: block;
    width: 100% !important;
    max-width: 100%;
    height: 1.75rem;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    font-size: inherit;
    line-height: 1.75rem;
    box-shadow: none;
}
body.ss3-site-body .select2-container--default .select2-selection--multiple::after {
    content: "";
    position: absolute;
    top: calc(var(--ss3-control-height) / 2 - 0.1875rem);
    right: calc(var(--ss3-select-indicator-width) / 2 - 0.375rem);
    width: 0;
    height: 0;
    border-style: solid;
    border-color: #4a5568 transparent transparent transparent;
    border-width: 0.375rem 0.375rem 0 0.375rem;
    pointer-events: none;
}
body.ss3-site-body .select2-container--default.select2-container--open .select2-selection--multiple::after {
    border-color: transparent transparent #4a5568 transparent;
    border-width: 0 0.375rem 0.375rem 0.375rem;
}
.ss3-field.has-error { --ss3-dropdown-focus-border: var(--ss3-color-error); }
.ss3-field.has-warning { --ss3-dropdown-focus-border: var(--ss3-color-warning); }

/* One focus treatment for native dropdowns and Select2 single/multiple.
   Select2 single moves focus into a detached dropdown; its open state carries
   the same treatment, without adding a widget-specific outline. */
body.ss3-site-body select:not(.select2-hidden-accessible):focus,
body.ss3-site-body .select2-container--default.select2-container--focus .select2-selection,
body.ss3-site-body .select2-container--default .select2-selection:focus-within,
body.ss3-site-body .select2-container--default.select2-container--open .select2-selection {
    border-color: var(--ss3-dropdown-focus-border, var(--ss3-control-focus-border));
    background-color: var(--ss3-control-focus-bg);
    box-shadow: var(--ss3-control-focus-shadow);
    transition: box-shadow .5s, border-color .25s ease-in-out;
    outline: 0;
}
body.ss3-site-body select:disabled,
body.ss3-site-body .select2-container--default.select2-container--disabled .select2-selection {
    box-shadow: none;
    outline: 0;
}
body.ss3-site-body .select2-container--default.select2-container--disabled .select2-selection--multiple {
    border-color: #cacaca;
    outline: 0;
    cursor: not-allowed;
}
body.ss3-site-body .select2-container--default.select2-container--disabled .select2-selection--multiple::after {
    border-top-color: var(--ss3-color-text-muted);
}

/* Shared key-free multi-selection: preserve listbox/aria-selected semantics.
   The decorative marker and Done action work for pointer, touch and keyboard. */
body.ss3-site-body .ss3-select2-multiple-dropdown .select2-results__option[aria-selected] {
    display: flex;
    align-items: center;
    gap: var(--ss3-space-2);
    min-height: var(--ss3-control-height);
    padding: var(--ss3-space-2) 0.625rem;
}
body.ss3-site-body .ss3-select2-multiple-dropdown .select2-results__option[aria-selected]::before {
    content: "";
    flex: 0 0 1.125rem;
    width: 1.125rem;
    height: 1.125rem;
    box-sizing: border-box;
    border: 1px solid currentColor;
    border-radius: var(--ss3-radius-sm);
    background: transparent;
}
body.ss3-site-body .ss3-select2-multiple-dropdown .select2-results__option[aria-selected="true"]::before {
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2018%2018%22%3E%3Cpath%20d%3D%22M3%209l4%204L15%205%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2018%2018%22%3E%3Cpath%20d%3D%22M3%209l4%204L15%205%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
    border: 0;
}
body.ss3-site-body .ss3-select2-multiple-actions {
    display: flex;
    justify-content: flex-end;
    padding: var(--ss3-space-1) var(--ss3-space-2);
    border-top: 1px solid var(--ss3-color-border);
    background: var(--ss3-color-surface);
}
body.ss3-site-body .select2-selection--multiple .select2-selection__clear:focus-visible {
    outline: 2px solid var(--ss3-theme-action, #1779BA);
    outline-offset: -3px;
}

body.ss3-site-body .ss3-field > .select2-container {
    display: block;
    width: 100% !important;
    min-width: 0;
    margin: 0;
}

body.ss3-site-body .ss3-field > .select2-container .select2-selection--single {
    margin-bottom: 0;
}

.ss3-select2-dropdown-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    background: var(--ss3-theme-shell, #3F72AF);
    color: var(--ss3-theme-shell-text, #FFFFFF);
    font-size: var(--ss3-font-size-supporting);
    font-style: italic;
    line-height: var(--ss3-line-height-body);
    padding: 0.45rem 0.75rem;
    text-align: center;
}

.ss3-field-footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ss3-gap-row) var(--ss3-gap-column);
    margin-top: var(--ss3-space-1);
    color: var(--ss3-color-text-muted);
    font-size: var(--ss3-font-size-supporting);
    line-height: var(--ss3-line-height-tight);
}

.ss3-field-footer .ss3-help {
    flex: 1 1 auto;
    min-width: 0;
}

.ss3-field-count {
    flex: 0 0 auto;
    color: var(--ss3-color-text-muted);
    white-space: nowrap;
}

.ss3-field-row > input:not([type="checkbox"]):not([type="radio"]),
.ss3-field-row > select,
.ss3-field-row > textarea {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
}

/* A select's associated helper remains at the control's right edge. */
.ss3-field-row[data-layout="helper"] {
    flex-wrap: nowrap;
    gap: 0;
    align-items: center;
}
.ss3-field-row[data-layout="helper"] > :is(input, select, .ss3-select-control, .select2-container) {
    flex: 1 1 0%;
    width: 0;
    min-width: 0;
    margin-bottom: 0;
}
.ss3-field-row[data-layout="helper"] > .ss3-icon-action {
    flex: 0 0 auto;
    margin: 0;
}

.ss3-field-row > .button {
    flex: 0 0 auto;
    margin-bottom: 0;
}

@media screen and (max-width: 39.9375em) {
    /* Opt-in full-width date/control rows where narrow paired controls would crowd. */
    .ss3-form-grid[data-stack="small"] {
        grid-template-columns: minmax(0, 1fr);
    }

    .ss3-field-footer {
        display: block;
    }

    .ss3-field-count {
        display: block;
        margin-top: var(--ss3-space-1);
    }
}

.ss3-technical-value {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ss3-space-2);
    padding: var(--ss3-space-2) var(--ss3-space-3);
    border: 1px solid var(--ss3-color-border);
    border-radius: var(--ss3-radius-sm);
    background: var(--ss3-color-surface-muted);
}

.ss3-technical-value code {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
}

.ss3-technical-value .button {
    flex: 0 0 auto;
    margin-bottom: 0;
}

/* Icon-bearing lookup rows place the icon beside a stacked text group.
   Plain strong/small lookup rows retain the shared components' block layout. */
.ss3-lookup-option:has(> i) {
    display: flex;
    align-items: flex-start;
    gap: var(--ss3-gap-row) var(--ss3-gap-column);
    min-width: 0;
    font-size: var(--ss3-font-size-body);
    line-height: var(--ss3-line-height-body);
    white-space: normal;
}
.ss3-lookup-option:has(> i) > i {
    flex: 0 0 auto;
    width: 1.15em;
    line-height: var(--ss3-line-height-body);
}
.ss3-lookup-option:has(> i) > div { min-width: 0; }
.ss3-lookup-option:has(> i) strong {
    display: block;
    font-weight: var(--ss3-font-weight-strong);
    overflow-wrap: anywhere;
}
.ss3-lookup-option:has(> i) small {
    display: block;
    font-size: var(--ss3-font-size-supporting);
    font-weight: var(--ss3-font-weight-regular);
    overflow-wrap: anywhere;
}
.ss3-lookup-option .ss3-status-pill { margin-top: var(--ss3-space-1); }


/* Native mutually exclusive choices share the labelled checkbox target. */
fieldset.ss3-field[data-control="radio"] {
    min-inline-size: 0;
    border: 0;
    padding: 0;
}
.ss3-field[data-control="radio"] > legend {
    margin: 0 0 var(--ss3-gap-label);
    padding: 0;
}
.ss3-field[data-control="radio"] input[type="radio"] {
    flex: 0 0 auto;
    width: 1.375rem;
    height: 1.375rem;
    margin: 0;
    accent-color: var(--ss3-color-action);
}
.ss3-field[data-control="radio"]:disabled > label {
    color: var(--ss3-color-text-muted);
    cursor: default;
}

/* Browser autofill signal for explicit another-person contact regions.
   Empty keyframes are nonvisual; input/change capture is the primary guard. */
@keyframes ss3-contact-autofill { from {} to {} }
[data-ss3-contact-field]:autofill {
    animation-name: ss3-contact-autofill;
    animation-duration: 0.001s;
}
[data-ss3-contact-field]:-webkit-autofill {
    animation-name: ss3-contact-autofill;
    animation-duration: 0.001s;
}

/* SearchPanes fields use the same single-line form owner as ordinary inputs;
   grid composition and available width remain owned by 50-grids.css. */
body.ss3-site-body div.dtsp-panesContainer div.dtsp-searchPane div.dtsp-topRow div.dtsp-searchCont input.dtsp-search {
    height: var(--ss3-control-height);
    min-height: var(--ss3-control-height);
    box-sizing: border-box;
    padding-block: 0;
    padding-inline: 0.5rem;
    border: 1px solid var(--ss3-color-border, #cacaca);
    border-radius: var(--ss3-radius-sm);
    font-family: inherit;
    font-size: var(--ss3-font-size-control);
    font-weight: normal;
    color: var(--ss3-color-text);
    background: var(--ss3-color-surface, #fff);
}

/* Content-sized field groups retain the common controls and field lifecycle. */
:is(.ss3-field-group, .ss3-field-pair) > .ss3-field[data-control="checkbox"],
:is(.ss3-field-group, .ss3-field-pair) > .ss3-field[data-control="radio"] {
    align-self: flex-end;
}
:is(.ss3-field-group, .ss3-field-pair) > .ss3-field > label {
    overflow-wrap: anywhere;
}
:is(.ss3-field-group, .ss3-field-pair) > .ss3-field[data-field-size="long"] > textarea {
    max-inline-size: 76ch;
}

/* Long-form editors may use the full allocated width when their content calls for it. */
:is(.ss3-field-group, .ss3-field-pair) > .ss3-field[data-field-width="available"] > textarea {
    inline-size: 100%;
    max-inline-size: 100%;
}

:is(.ss3-field-group,.ss3-field-pair) > .ss3-field[data-field-size="long"][data-field-content="code"] > textarea { max-inline-size:none; inline-size:100%; font-family:var(--ss3-font-mono,monospace); }