/**
 * Yusaso Teal — shared form fields and command-button presentation.
 *
 * KEEP THIS: ordinary form commands and both Page action bars share one
 * visual contract. Platform and Modules retain
 * geometry; specialized toolbar, navigation, badge, and icon controls remain
 * independently owned.
 */

/* ========================================================================== 
   Form foundations
   ========================================================================== */

/* Every visible HTML audio player uses the same Theme-owned control surface.
   Module styles may size the player but must not recolor its controls. */
audio[controls] {
    color: var(--primary-font-color);
    accent-color: var(--primary-font-color);
    background-color: var(--primary-color);
    color-scheme: dark;
}

audio[controls]::-webkit-media-controls-enclosure,
audio[controls]::-webkit-media-controls-panel {
    color: var(--primary-font-color);
    background-color: var(--primary-color);
}

/* Bot-trap fields remain submitted without occupying visible space. */
.form_bot_honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

form,
fieldset {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-inline: 0;
    color: inherit;
    background-color: transparent;
    background-image: none;
    border: 0;
    text-align: left;
}

fieldset {
    margin-block: 0 1rem;
    padding: 1rem;
    background-color: var(--form-fieldset-background);
    border: var(--form-fieldset-border-width) solid var(--form-fieldset-border);
    border-radius: var(--form-fieldset-radius);
}

fieldset > legend {
    max-width: 100%;
    margin-inline: 0;
    padding-inline: .35rem;
    color: var(--form-legend-color);
    font-family: var(--font-heading-family);
    font-weight: var(--font-heading-weight);
    text-align: left;
    overflow-wrap: anywhere;
}

fieldset > legend > :is(h1, h2, h3, h4, h5, h6) {
    margin: 0;
    color: inherit;
    font: inherit;
}

/* ========================================================================== 
   Form controls and choices
   ========================================================================== */

:is(
    input:not([type]),
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    input[type="file"]
) {
    box-sizing: border-box;
    width: 100%;
    max-width: 25rem;
    height: 2.75rem;
    min-height: 2.75rem;
    padding-block: .5rem;
    padding-inline: .75rem;
    color: var(--primary-font-color);
   /* background: var(--page-field-background);
    border: var(--page-field-border-width) solid var(--page-field-border);*/	background: var(--primary-color);	border: 1px solid var(--primary-accent-color);
    border-radius: var(--page-field-radius);
    font-family: var(--font-control-family);
    font-size: var(--font-md);
    line-height: 1.25;
}

select,
textarea {
    box-sizing: border-box;
    width: 100%;
    max-width: 45rem;
    padding-block: .75rem;
    padding-inline: .75rem;
    color: var(--page-field-text);
    background: var(--page-field-background);
    border: var(--page-field-border-width) solid var(--page-field-border);
    border-radius: var(--page-field-radius);
    font-family: var(--font-control-family);
    font-size: var(--font-md);
    font-weight: 400;
    line-height: 1.25;
}

/* One shared spacing owner for text-entry controls. */
:is(
    input:not([type]),
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    input[type="file"],
    select,
    textarea
) {
    margin-block: 0 3px;
}

select {
    height: 2.75rem;
    min-height: 2.75rem;
    max-height: 2.75rem;
    padding-block: .5rem;
    color: var(--primary-font-color);
    background: var(--secondary-font-color);
}

select option {
    color: var(--primary-font-color);
    background: var(--secondary-font-color);
}

select option:checked {
    color: var(--primary-font-color);
    background: var(--primary-accent-color);
}

select option:is(:hover, :focus) {
    color: var(--primary-font-color);
    background: var(--secondary-accent-color);
}

select option:disabled,
select optgroup {
    color: var(--primary-font-color);
    background: var(--secondary-color);
}

input[type="file"] {
    padding: 0;
    overflow: hidden;
}

input[type="file"]::file-selector-button {
    box-sizing: border-box;
    height: 100%;
    margin: 0 .75rem 0 0;
    padding: 0 .75rem;
    color: var(--primary-font-color);
    background: var(--primary-color);
    border: 0;
    border-right: var(--page-field-border-width) solid #fff;
    border-radius: calc(var(--page-field-radius) - var(--page-field-border-width)) 0 0 calc(var(--page-field-radius) - var(--page-field-border-width));
    font: inherit;
}

:is(input[type="checkbox"], input[type="radio"]) {
    box-sizing: border-box;
    flex: 0 0 1.15rem;
    width: 1.15rem;
    min-width: 1.15rem;
    max-width: 1.15rem;
    height: 1.15rem;
    min-height: 1.15rem;
    max-height: 1.15rem;
    margin: 0;
    accent-color: var(--form-choice-accent);
}

input[type="range"] {
    --range-progress: 50%;
    --range-track-height: 0.375rem;
    --range-thumb-size: 1.125rem;
    box-sizing: border-box;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: var(--range-thumb-size);
    -webkit-appearance: none;
    appearance: none;
    accent-color: var(--primary-accent-color);
    background: transparent;
}

input[type="range"]::-webkit-slider-runnable-track {
    height: var(--range-track-height);
    border-radius: 999px;
    background: linear-gradient(to right, var(--primary-accent-color) 0 var(--range-progress), var(--secondary-color) var(--range-progress) 100%);
}

input[type="range"]::-webkit-slider-thumb {
    box-sizing: border-box;
    width: var(--range-thumb-size);
    height: var(--range-thumb-size);
    margin-top: calc((var(--range-track-height) - var(--range-thumb-size)) / 2);
    -webkit-appearance: none;
    appearance: none;
    background: var(--primary-accent-color);
    border: 3px solid var(--primary-font-color);
    border-radius: 50%;
}

input[type="range"]::-moz-range-track {
    height: var(--range-track-height);
    background-color: var(--secondary-color);
    border-radius: 999px;
}

input[type="range"]::-moz-range-progress {
    height: var(--range-track-height);
    background-color: var(--primary-accent-color);
    border-radius: 999px;
}

input[type="range"]::-moz-range-thumb {
    box-sizing: border-box;
    width: var(--range-thumb-size);
    height: var(--range-thumb-size);
    background: var(--primary-accent-color);
    border: 3px solid var(--primary-font-color);
    border-radius: 50%;
}

input[type="range"] + output {
    flex: 0 0 4ch;
    min-width: 4ch;
    color: var(--primary-font-color);
    text-align: right;
}

:is(input, select, textarea).public_control_extra_small {
    box-sizing: border-box;
    width: min(100%, 5rem);
    min-width: 0;
    max-width: 5rem;
}

select.phone_calling_code_control {
    flex: 0 0 5rem;
    width: 5rem;
    min-width: 5rem;
    max-width: 5rem;
}

input.phone_number_control {
    width: min(100%, 14rem);
    max-width: 14rem;
}

:is(input, select).postal_code_control {
    width: min(100%, 9rem);
    max-width: 9rem;
}

select.time_part_control {
    flex: 0 0 5rem;
    width: 5rem;
    min-width: 5rem;
    max-width: 5rem;
}

select.date_part_month_control,
select.date_part_day_control {
    flex: 0 0 4.5rem;
    width: 4.5rem;
    min-width: 4.5rem;
    max-width: 4.5rem;
}

select.date_part_year_control {
    flex: 0 0 6rem;
    width: 6rem;
    min-width: 6rem;
    max-width: 6rem;
}

.compact_date_row {
    display: flex;
    width: max-content;
    max-width: 100%;
    align-items: center;
    flex-wrap: nowrap;
    gap: .35rem;
}

input.year_control {
    width: 6rem;
    min-width: 6rem;
    max-width: 6rem;
}

input.six_digit_code_control {
    width: 8rem;
    min-width: 8rem;
    max-width: 8rem;
}

input.hex_color_control {
    width: 8rem;
    min-width: 8rem;
    max-width: 8rem;
}

input.percentage_control {
    flex: 0 0 5rem;
    width: 5rem;
    min-width: 5rem;
    max-width: 5rem;
}

input.confirmation_keyword_control {
    width: 7rem;
    min-width: 7rem;
    max-width: 7rem;
}

input.confirmation_keyword_long_control {
    width: 10rem;
    min-width: 10rem;
    max-width: 10rem;
}

:is(input, select, textarea).public_control_small {
    box-sizing: border-box;
    width: min(100%, 8rem);
    min-width: 0;
    max-width: 8rem;
}

:is(input, select, textarea).public_control_medium {
    box-sizing: border-box;
    width: min(100%, 20rem);
    min-width: 0;
    max-width: 20rem;
}

:is(input, select, textarea).public_control_large {
    box-sizing: border-box;
    width: min(100%, 29rem);
    min-width: 0;
    max-width: 29rem;
}

/* Extra-large fields: long URLs, addresses, and extended single-line values. */
:is(input, select, textarea).public_control_extra_large {
    box-sizing: border-box;
    width: min(100%, 45rem);
    min-width: 0;
    max-width: 45rem;
}

/* Full-width fields: consume the complete width of their form control cell. */
:is(input, select, textarea).public_control_full {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

:is(input, textarea)::placeholder {
    color: var(--form-placeholder-color);
    font: inherit;
    font-weight: 400;
    font-style: normal;
    opacity: 1;
}

.public_form_table_grid :is(input, select, textarea) {
    max-width: 100%;
}

form label > :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]) {
    display: block;
    margin-top: .35rem;
}

label,
.public_form_label {
    color: var(--primary-font-color);
    font-family: var(--font-control-family);
    font-size: var(--font-md);
    font-weight: normal;
    line-height: 1.25;
}

label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) {
    color: var(--primary-font-color);
}

:is(input, select, textarea):hover {
    border-color: var(--form-field-hover-border);
}

:is(input, select, textarea):focus-visible {
    border-color: var(--form-field-focus-border);
    box-shadow: var(--form-field-focus-shadow);
}

:is(input, select, textarea):disabled {
    color: var(--form-field-disabled-text);
    background-color: var(--form-field-disabled-background);
}

.required {
    color: var(--form-required-color);
}

/* Form help text spans the available control width beneath its field. */
.public_form_help {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin: .35rem 0 .75rem;
    color: var(--form-helper-color);
    font-size: var(--font-sm);
    font-weight: 400;
    line-height: 1.45;
    overflow-wrap: normal;
}


/* ========================================================================== 
   Canonical form layouts
   ========================================================================== */

.public_form_stack,
.public_form_table_grid,
.public_checkbox_grid {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.public_form_stack,
.public_checkbox_grid {
    display: grid;
}

/* One-column vertical form stack. */
.public_form_stack {
    grid-template-columns: minmax(0, 1fr);
    gap: .75rem;
}

/* Two-column form grid: label | control. Collapses to one column below 40rem. */
.public_form_table_grid {
    display: grid;
    grid-template-columns: 18ch minmax(0, 1fr);
    gap: .75rem 1rem;
    align-items: start;
}

/* Nested label/control grids reserve one stable label column. */
.nested_label_grid {
    grid-template-columns: 7.25rem minmax(0, 1fr);
}

.nested_label_grid > .public_form_label {
    width: 7.25rem;
    white-space: nowrap;
}

/* Compact label/control grids for structured values inside Widgets. */
.micro_label_control_grid {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: .3rem .65rem;
    align-items: baseline;
    font-size: .9em;
}

.micro_label_control_grid_three_column {
    grid-template-columns: minmax(4.75rem, 1fr) max-content max-content;
}

/* Two-column micro grid for compact Widget metadata whose value must share
   the right edge used by the final value column beneath it. */
.micro_label_control_grid_right_aligned {
    grid-template-columns: minmax(0, 1fr) max-content;
    margin-bottom: .5rem;
}

.micro_label_control_grid_right_aligned > :last-child {
    text-align: right;
    white-space: nowrap;
}

.micro_label_control_value {
    min-width: 7ch;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Checkbox array: four columns, then two, then one on narrow screens. */
.public_checkbox_grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .45rem .75rem;
}

/* Keep a choice grid clear of a structured field grid that follows it. */
.public_checkbox_grid + .public_form_table_grid {
    margin-top: .75rem;
}

.public_form_table_column_headers,
.public_form_table_grid > .public_form_row {
    display: contents;
}

.public_form_table_column_headers > :first-child,
.public_form_table_grid > .public_form_label,
.public_form_table_grid > .public_form_row > .public_form_label {
    grid-column: 1;
    min-width: 0;
    white-space: nowrap;
}

.public_form_table_column_headers > :last-child,
.public_form_table_grid > .public_form_control,
.public_form_table_grid > .public_form_row > .public_form_control {
    grid-column: 2;
    min-width: 0;
}

.public_form_table_grid > .content_action_bar {
    grid-column: 1 / -1;
}

.public_form_control_row,
.public_form_control:has(> :is(input, select, textarea) + :is(button, a.button)) {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
    align-items: flex-start;
    gap: .45rem;
}

.public_form_control_row > .public_form_help,
.public_form_control:has(> :is(input, select, textarea) + :is(button, a.button)) > .public_form_help {
    flex: 1 0 100%;
}

.public_checkbox_grid > .public_form_help {
    grid-column: 1 / -1;
}

@media (max-width: 50rem) {
    .public_checkbox_grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 40rem) {
    .public_form_table_grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .nested_label_grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .nested_label_grid > .public_form_label {
        width: auto;
    }

    .public_form_table_column_headers > :is(:first-child, :last-child),
    .public_form_table_grid > :is(.public_form_label, .public_form_control),
    .public_form_table_grid > .public_form_row > :is(.public_form_label, .public_form_control) {
        grid-column: 1;
    }

    fieldset {
        padding: .75rem;
    }
}

@media (max-width: 35rem) {
    .public_checkbox_grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ========================================================================== 
   Page actions and command buttons
   ========================================================================== */

/* Shared action rows provide geometry only. Each standard command declares
   left, center, right, or full-width placement explicitly. */
:is(.content_action_bar, .page_content_top_actions, .page_content_bottom_actions) {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    align-items: center;
    justify-content: flex-start;
    gap: var(--public-action-grid-gap, .5rem);
}

/* RETIRED 2026-09-01: action-bar containers must not resize standard
   controls. The shared button primitive owns height and padding everywhere. */

:is(.bottom_action_bar, .page_content_bottom_actions) > .standard_right {
    justify-self: end;
    margin-left: auto;
}


.standard,
.standard_left {
    justify-self: start;
}

.standard_center {
    justify-self: center;
    margin-inline: auto !important;
}

/* Full-width standard commands belong to stacked forms, popups and menus.
   They inherit the standard visual primitive and add width only. */
.standard_full,
.standard.standard_full {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
        justify-self: stretch;
}

.standard_right {
    justify-self: end !important;
    margin-inline-start: auto !important;
    margin-left: auto !important;
}

.content_action_bar > form:has(> .standard_right),
.page_content_top_actions > form:has(> .standard_right),
.page_content_bottom_actions > form:has(> .standard_right) {
    display: flex;
    width: auto;
    margin-left: auto;
}

/* A right-aligned command may be the only child of a nested form-control
   wrapper. The wrapper supplies the full row needed by auto margin. */
.public_form_control:has(> .standard_right),
.public_form_control:has(> .standard_center),
.public_form_control:has(> .standard_full),
.content_action_bar:has(> :is(.standard_right, .standard_center, .standard_full)) {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    align-items: center;
}




/* Temporarily hidden with the standard Theme button artwork.
@media (max-width: 40rem) {
    :root {
        --button-background-image: var(--button-mobile-set-image);
    }
}
*/