/* 1401px and up — Full Desktop (also covers 1440 Laptop L, 1920, and 4K 2560): the base styles in this file are the Full Desktop CSS. Narrower sizes are overridden in the RESPONSIVE TIERS section at the bottom of this file. */

/* Responsive rules (moved from new_base_aesthetics.css) */
@media (min-width:1101px) {
        .page_heading :is(.content_action_bar,.page_content_top_actions), .page_content_header :is(.content_action_bar,.page_content_top_actions) {
            position: static;
            grid-column: 2;
            grid-row: 1;
            width: auto;
            min-width: 0;
            max-width: max-content;
            justify-self: end;
            align-self: center;
            margin: 0;
            transform: none;
        }
}

@media (max-width: 428px) {
        :is(dialog, [popover]) :is(.button_bar, .public_form_stack) { flex-wrap: wrap; }

        .content_action_bar, .card_header { flex-wrap: wrap; }

        .content_action_bar > :is(h1, h2, h3), .card_header > :is(h1, h2, h3) { min-width: 0; overflow-wrap: anywhere; }
}

@media (min-width: 429px) and (max-width: 767px) {
        :is(dialog, [popover]) .button_bar { flex-wrap: wrap; }

        .content_action_bar > :is(h1, h2, h3), .card_header > :is(h1, h2, h3) { min-width: 0; overflow-wrap: anywhere; }
}

@media (min-width: 1025px) and (max-width: 1400px) {
        .content_action_bar > :is(h1, h2, h3), .card_header > :is(h1, h2, h3) { min-width: 0; overflow-wrap: anywhere; }
}

/* Content action bar base (moved from new_base_aesthetics.css; kept first so this file's own rules still win ties) */
/* CANON, PERMANENT: ONE style for (x), everywhere, always - her direct instruction ("I should see this exact... */
.content_action_bar .popup_corner_close, .card_header .popup_corner_close {
    position: static;
    top: auto;
    right: auto;
    transform: none;
    z-index: auto;
    margin: 0 0 0 auto;
}

/* her report: persona FULL's header sat ~110px below the popup's top edge. The rule above only reaches a header... */
.content_action_bar:has(> :is(.popup_corner_close, .persona_popup_controls)),
.card_header:has(> :is(.popup_corner_close, .persona_popup_controls)) {
    margin-block: 0 var(--margin-bottom-15);
}

.content_action_bar:has(> :is(.popup_corner_close, .persona_popup_controls)) > :is(h1, h2, h3, button, .persona_popup_controls),
.card_header:has(> :is(.popup_corner_close, .persona_popup_controls)) > :is(h1, h2, h3, button, .persona_popup_controls) {
    margin-block: 0 !important; /* beats the button-ring margin on .standard_* */
}

/* Page top action bars have no divider outline. */
.content_action_bar.page_content_top_actions,.page_heading > .page_content_top_actions,.top_action_bar {
    border: 0;
    border-bottom: 0;
}

.content_action_bar:not(.popup_zone_header):not(.popup_zone_footer):not(.page_content_top_actions),
.card_header,
.post_card_header {
    --zone-t: var(--zone-10);
    --zone-top-left-corner-img: var(--theme-zone-card-header-top-left-corner-background-image, none);
    --zone-top-left-corner-clr: var(--theme-zone-card-header-top-left-corner-background-color, transparent);
    --zone-top-left-corner-img-opacity: var(--theme-zone-card-header-top-left-corner-background-image-opacity, 1);
    --zone-top-left-corner-clr-opacity: var(--theme-zone-card-header-top-left-corner-background-color-opacity, 1);
    --zone-top-left-corner-inner-glow: var(--theme-zone-card-header-top-left-corner-inner-glow, none);
    --zone-top-left-corner-outer-glow: var(--theme-zone-card-header-top-left-corner-outer-glow, none);
    --zone-top-left-corner-shadow: var(--theme-zone-card-header-top-left-corner-shadow, none);
    --zone-top-right-corner-img: var(--theme-zone-card-header-top-right-corner-background-image, none);
    --zone-top-right-corner-clr: var(--theme-zone-card-header-top-right-corner-background-color, transparent);
    --zone-top-right-corner-img-opacity: var(--theme-zone-card-header-top-right-corner-background-image-opacity, 1);
    --zone-top-right-corner-clr-opacity: var(--theme-zone-card-header-top-right-corner-background-color-opacity, 1);
    --zone-top-right-corner-inner-glow: var(--theme-zone-card-header-top-right-corner-inner-glow, none);
    --zone-top-right-corner-outer-glow: var(--theme-zone-card-header-top-right-corner-outer-glow, none);
    --zone-top-right-corner-shadow: var(--theme-zone-card-header-top-right-corner-shadow, none);
    --zone-bottom-left-corner-img: var(--theme-zone-card-header-bottom-left-corner-background-image, none);
    --zone-bottom-left-corner-clr: var(--theme-zone-card-header-bottom-left-corner-background-color, transparent);
    --zone-bottom-left-corner-img-opacity: var(--theme-zone-card-header-bottom-left-corner-background-image-opacity, 1);
    --zone-bottom-left-corner-clr-opacity: var(--theme-zone-card-header-bottom-left-corner-background-color-opacity, 1);
    --zone-bottom-left-corner-inner-glow: var(--theme-zone-card-header-bottom-left-corner-inner-glow, none);
    --zone-bottom-left-corner-outer-glow: var(--theme-zone-card-header-bottom-left-corner-outer-glow, none);
    --zone-bottom-left-corner-shadow: var(--theme-zone-card-header-bottom-left-corner-shadow, none);
    --zone-bottom-right-corner-img: var(--theme-zone-card-header-bottom-right-corner-background-image, none);
    --zone-bottom-right-corner-clr: var(--theme-zone-card-header-bottom-right-corner-background-color, transparent);
    --zone-bottom-right-corner-img-opacity: var(--theme-zone-card-header-bottom-right-corner-background-image-opacity, 1);
    --zone-bottom-right-corner-clr-opacity: var(--theme-zone-card-header-bottom-right-corner-background-color-opacity, 1);
    --zone-bottom-right-corner-inner-glow: var(--theme-zone-card-header-bottom-right-corner-inner-glow, none);
    --zone-bottom-right-corner-outer-glow: var(--theme-zone-card-header-bottom-right-corner-outer-glow, none);
    --zone-bottom-right-corner-shadow: var(--theme-zone-card-header-bottom-right-corner-shadow, none);
    --zone-top-border-img: var(--theme-zone-card-header-top-border-background-image, none);
    --zone-top-border-clr: var(--theme-zone-card-header-top-border-background-color, transparent);
    --zone-top-border-img-opacity: var(--theme-zone-card-header-top-border-background-image-opacity, 1);
    --zone-top-border-clr-opacity: var(--theme-zone-card-header-top-border-background-color-opacity, 1);
    --zone-top-border-inner-glow: var(--theme-zone-card-header-top-border-inner-glow, none);
    --zone-top-border-outer-glow: var(--theme-zone-card-header-top-border-outer-glow, none);
    --zone-top-border-shadow: var(--theme-zone-card-header-top-border-shadow, none);
    --zone-right-border-img: var(--theme-zone-card-header-right-border-background-image, none);
    --zone-right-border-clr: var(--theme-zone-card-header-right-border-background-color, transparent);
    --zone-right-border-img-opacity: var(--theme-zone-card-header-right-border-background-image-opacity, 1);
    --zone-right-border-clr-opacity: var(--theme-zone-card-header-right-border-background-color-opacity, 1);
    --zone-right-border-inner-glow: var(--theme-zone-card-header-right-border-inner-glow, none);
    --zone-right-border-outer-glow: var(--theme-zone-card-header-right-border-outer-glow, none);
    --zone-right-border-shadow: var(--theme-zone-card-header-right-border-shadow, none);
    --zone-bottom-border-img: var(--theme-zone-card-header-bottom-border-background-image, none);
    --zone-bottom-border-clr: var(--theme-zone-card-header-bottom-border-background-color, transparent);
    --zone-bottom-border-img-opacity: var(--theme-zone-card-header-bottom-border-background-image-opacity, 1);
    --zone-bottom-border-clr-opacity: var(--theme-zone-card-header-bottom-border-background-color-opacity, 1);
    --zone-bottom-border-inner-glow: var(--theme-zone-card-header-bottom-border-inner-glow, none);
    --zone-bottom-border-outer-glow: var(--theme-zone-card-header-bottom-border-outer-glow, none);
    --zone-bottom-border-shadow: var(--theme-zone-card-header-bottom-border-shadow, none);
    --zone-left-border-img: var(--theme-zone-card-header-left-border-background-image, none);
    --zone-left-border-clr: var(--theme-zone-card-header-left-border-background-color, transparent);
    --zone-left-border-img-opacity: var(--theme-zone-card-header-left-border-background-image-opacity, 1);
    --zone-left-border-clr-opacity: var(--theme-zone-card-header-left-border-background-color-opacity, 1);
    --zone-left-border-inner-glow: var(--theme-zone-card-header-left-border-inner-glow, none);
    --zone-left-border-outer-glow: var(--theme-zone-card-header-left-border-outer-glow, none);
    --zone-left-border-shadow: var(--theme-zone-card-header-left-border-shadow, none);
}

/* Oct 10 2026 #399 - her request: no top/bottom margin or padding on a .content_action_bar inside a... */
.feature_wrapper .content_action_bar:not(.popup_zone_header):not(.popup_zone_footer),
.feature_wrapper .card_header,
.feature_wrapper .content_action_bar > :is(h1, h2, h3),
.feature_wrapper .card_header > :is(h1, h2, h3) {
    padding-block: 0 !important;
}

/* the margin reset above is for header bars only; the page's top/bottom action-button rows keep the shared... */
.feature_wrapper .content_action_bar:not(.popup_zone_header):not(.popup_zone_footer):not(.page_content_top_actions):not(.page_content_bottom_actions),
.feature_wrapper .card_header,
.feature_wrapper .content_action_bar > :is(h1, h2, h3),
.feature_wrapper .card_header > :is(h1, h2, h3) {
    margin-block: 0 !important;
}

.feature_wrapper .content_action_bar > :is(a, button, form),
.feature_wrapper .card_header > :is(a, button, form) {
    margin-block: 0 !important;
}

/**
 * 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: 0 solid var(--form-fieldset-border);
    border-radius: var(--radius-large);
}

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

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

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

/* Geometry only - box model and sizing for single-line text-style inputs.
   No color, background, border, or font here; see the shared appearance
   owner below for that. */
: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;
}

/* Geometry only - select and textarea need more room than a one-line text
   input by default (a picklist label, or a multi-line comment box). No
   color, background, border, or font here either. */
select,
textarea {
    box-sizing: border-box;
    width: 100%;
    max-width: 45rem;
    padding-block: .75rem;
    padding-inline: .75rem;
}

/* One shared appearance owner for every field control - input (every
   text-like type), select, and textarea all get the identical color,
   background, border, radius, and font. This is the single source of
   truth for form-control appearance; nothing else in this file may
   redeclare color, background, border, or font for these elements. */
: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,
    .persona_micro_select_trigger
):not(:where(.hex_color_control, [data-gradient-preview-text], .post_composer *, .visual_composer_editor *)) {
    color: var(--secondary-font-color);
    background: var(--secondary-color);
    border: 1px solid var(--secondary-border-color);
    border-radius: var(--radius-large);}

/* theme.php's special fields (hex code box, gradient test box) are excluded from the secondary* default above and stay primary*. */
:is(input.hex_color_control, textarea[data-gradient-preview-text]) {
    color: var(--primary-font-color);
    background: var(--primary-color);
    border: 1px solid var(--primary-accent-color);
    border-radius: var(--radius-large);}

/* 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;
}

/* Geometry only - select needs a hard max-height clamp the shared rule
   above doesn't set, so a native select never grows taller than a
   single-line field. No color or background here; that's owned above. */
select,
.persona_micro_select_trigger {
    height: 2.75rem;
    min-height: 2.75rem;
    max-height: 2.75rem;
    padding-block: .5rem;
}

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

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

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

select option:disabled,
select optgroup {
    color: var(--secondary-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(--border-1) solid var(--page-actions-input-type-file-file-selector-button-border-color);
    border-radius: calc(var(--radius-large) - var(--border-1)) var(--radius-none) var(--radius-none) calc(var(--radius-large) - var(--border-1));}

: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(--slider-left-color);
    background: transparent;
}

/* Oct 18 2026 - her request: left of the circle --slider-left-color, right of it --slider-right-color, circle center --slider-thumb-color, its ring --slider-thumb-ring-color (Theme Editor: Colors and Effects > Slider). */
input[type="range"]::-webkit-slider-runnable-track {
    height: var(--range-track-height);
    border-radius: 999px;
    background: linear-gradient(to right, var(--slider-left-color) 0 var(--range-progress), var(--slider-right-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(--slider-thumb-color);
    border: 3px solid var(--slider-thumb-ring-color);
    border-radius: 50%;
}

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

input[type="range"]::-moz-range-progress {
    height: var(--range-track-height);
    background-color: var(--slider-left-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(--slider-thumb-color);
    border: 3px solid var(--slider-thumb-ring-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;
}

.persona_username_prefix {
    color: var(--primary-font-color) !important;
    background: var(--primary-color) !important;
}

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;
}

/* Oct 6 2026 - her request: ONE compact control size, 15% smaller than a normal page control, shared by the Upgrade price dropdown (class control_compact)
   and every control inside a widget (.public_widget): text/search/date inputs, dropdowns, text areas, check/radio boxes and the ON/OFF toggle. The numbers are
   0.8 x the normal sizes (the compact toggle rules are in buttons.css and fonts.css). */
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="color"]):not([role="switch"]), select, textarea).control_compact,
:is(.control_compact, .public_widget) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="color"]):not([role="switch"]), select, textarea) {
    padding-inline: calc(0.75rem * 0.8);}

:is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="color"]):not([role="switch"]), select).control_compact,
:is(.control_compact, .public_widget) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="color"]):not([role="switch"]), select) {
    height: calc(2.75rem * 0.8);
    min-height: calc(2.75rem * 0.8);
    max-height: calc(2.75rem * 0.8);
    padding-block: calc(0.5rem * 0.8);
}

textarea.control_compact,
:is(.control_compact, .public_widget) textarea {
    padding-block: calc(0.75rem * 0.8);
}

:is(.control_compact, .public_widget) :is(input[type="checkbox"], input[type="radio"]):not([role="switch"]) {
    flex-basis: calc(1.15rem * 0.8);
    width: calc(1.15rem * 0.8);
    min-width: calc(1.15rem * 0.8);
    max-width: calc(1.15rem * 0.8);
    height: calc(1.15rem * 0.8);
    min-height: calc(1.15rem * 0.8);
    max-height: calc(1.15rem * 0.8);
}

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, .persona_micro_select).public_control_medium {
    box-sizing: border-box;
    width: min(100%, 20rem);
    min-width: 0;
    max-width: 20rem;
}

:is(input, select, textarea, .persona_micro_select).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. */
/* UNUSED - disabled
: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(--secondary-font-color);
    opacity: .7;}

.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);
	padding-top: .4rem;}

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

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

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

:is(input, select, textarea):disabled {
    color: var(--secondary-font-color);
    background-color: var(--secondary-color);
    opacity: .6;
}

.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);
    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;
}

/* Sept 17 2026 - both places a visitor can filter their feed content
   (the Search & Filter widget on main_posts.php, and the Feed Content
   preferences panel) flag any category that embeds third-party content
   - currently YouTube Videos and GIPHY - via the catalog's tracks_user
   flag (global_includes/posts/post_feed_filter_catalog.php), not a
   hardcoded list of codes here. Same class name, same rule, both
   surfaces. */
.feed_preference_choice_tracks_user {
    color: var(--yusaso-purple);
}

.feed_preference_choice_tracks_user input[type="checkbox"] {
    accent-color: var(--yusaso-purple);
}

.feed_preference_tracking_notice {
    display: inline-grid;
    box-sizing: border-box;
    width: 1.1rem;
    min-width: 1.1rem;
    height: 1.1rem;
    min-height: 1.1rem;
    margin-inline-start: .3rem;
    overflow: visible;
    place-items: center;
    color: var(--yusaso-purple);
    border: 1px solid var(--yusaso-purple);
    border-radius: 50%;
    cursor: help;}

/* 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.
   Sept 24 2026 - her direct report: labels in this grid (e.g. "Public
   Directory Visibility") were being cut off / crowded at 18ch. Widened to
   24ch so longer labels have room; the label column itself already wraps
   (see .public_form_table_grid > .public_form_label below), so nothing
   overlaps the control column at either width. */
.public_form_table_grid {
    display: grid;
    grid-template-columns: 24ch minmax(0, 1fr);
    gap: .75rem 1rem;
    align-items: start;
}

/* Nested label/control grids reserve one stable label column.
   Sept 24 2026 - widened from 7.25rem to 10rem per her direct report (same
   fix as .public_form_table_grid above). The label column also switched
   from white-space: nowrap to a wrapping rule below, since a fixed width
   plus nowrap let long labels spill past the column and overlap the
   control column next to it - now a long label wraps onto a second line
   inside its own column instead. */
.nested_label_grid {
    grid-template-columns: 10rem minmax(0, 1fr);
}

.nested_label_grid > .public_form_label {
    width: 10rem;
    white-space: normal;
    overflow-wrap: break-word;
}

/* 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;}

.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;}

/* 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: normal;
    overflow-wrap: break-word;
}

.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: 767px) {
    .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);
    }
}

/* Sept 25 2026 - her direct report on communities.php: the "Find a
   Community" search button and the "Create / Enter Room" Join button were
   wrapping to their own row below the input/select. Root cause: a 3rd
   grid child (the button) in .public_form_table_grid's 2-column
   (label | control) layout always lands on a new row via CSS grid
   auto-placement - not the input being too wide. Scoped to just these 2
   forms via their IDs so .public_form_table_grid itself stays untouched
   for every other page that uses it. */
#communities-search-grid,
#communities-interest-room-form {
    grid-template-columns: 24ch minmax(0, 1fr) auto;
}

#communities-search-grid > button,
#communities-interest-room-form > button {
    align-self: center;
}

@media (max-width: 40rem) {
    #communities-search-grid,
    #communities-interest-room-form {
        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, .card_header, .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: max(var(--public-action-grid-gap, .5rem), calc(2 * var(--zone-t, 0px)));
}

/* Sept 27 2026 - same [hidden]-vs-display specificity tie as
   .feature_wrapper[hidden]/.feature_card[hidden] in cards.css: this
   rule's own `display: flex` was silently overriding the browser's
   default `[hidden] { display: none }` for any of these 3 classes,
   with no override anywhere to fix it (unlike .feature_wrapper/
   .feature_card, which already had one). Found while investigating her
   report of the Communities search Load More button
   (`data-communities-search-loadmore-wrap`, a `.page_content_bottom_actions`
   element that starts `hidden` until there's a next page) showing even
   with zero results - same equal-specificity + no-[hidden]-rule bug,
   just on a different class than the ones already covered. */
:is(.content_action_bar, .card_header, .page_content_top_actions, .page_content_bottom_actions)[hidden] {
    display: none !important;
}

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

/* Oct 13 2026 - her ruling (Q789): action buttons are never stuck to the content above or below them. One shared rule spaces every top/bottom action row, using the action-grid gap token. */
:is(.page_content_top_actions, .page_content_bottom_actions) {
    margin-block: calc(2 * var(--public-action-grid-gap, .5rem));
}

/* Full-width standard commands belong to stacked forms, popups and menus.
   They inherit the standard visual primitive and add width only. */

/* Fix 2026-09-08: when two .standard_right controls sit side by side in
   the same flex row (e.g. account.php's "Generate Recovery Token" /
   "Deactivate Account" pair), the base rule above gives BOTH an auto
   left margin. In a flex row that splits the available free space
   between the two auto margins instead of pushing the pair flush
   against the row's right edge, leaving an oversized gap between them.
   Only the first .standard_right should absorb the free space; any
   .standard_right after it just needs a small fixed gap from its
   predecessor. */

.content_action_bar > form:has(> .standard_right),
.card_header > 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)),
.card_header: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);
    }
}
*/

/* ==========================================================================
   RESPONSIVE TIERS (Oct 11 2026)
   Mobile-first hardening for every device size in the canon (see the DevTools
   preset list). Everything above this line is the normal CSS; these blocks
   only refine it for narrower or wider screens. Add new size fixes here.
   ========================================================================== */

/* 320–375px — Mobile Small: 320 minimum, Galaxy Z Fold 6 cover (~344), Pixel 9 Pro Fold cover (~360), iPhone SE (375) */
@media (max-width: 375px) {
    .micro_label_control_grid_three_column { grid-template-columns: minmax(0, 1fr) max-content; }
    .micro_label_control_value { min-width: 0; }
    .micro_label_control_grid_right_aligned > :last-child { white-space: normal; }
}

/* 320–428px — Mobile Small + Mobile Large (iPhone SE, iPhone 16, Pixel 9 / 9 Pro / 10, Galaxy A55, Galaxy Z Fold 6 cover, Pixel 9 Pro Fold cover) */
@media (max-width: 428px) {
    form :is(input, select, textarea) { max-width: 100%; }
}

/* 768–1024px — Tablet (own tier): iPad Mini landscape (768), Galaxy Z Fold 6 unfolded (~884), Pixel 9 Pro Fold unfolded (~841), Surface Pro 10 / 13 (~912), 1024 */
@media (min-width: 768px) and (max-width: 1024px) {
    form :is(input, select, textarea) { max-width: 100%; }
}

/* 1025–1400px — Narrow Desktop: any desktop browser window narrower than the full site width (Nest Hub Max 1280, laptops, resized windows); the three-column layout switches on at 1401 */
@media (min-width: 1025px) and (max-width: 1400px) {
    form :is(input, select, textarea) { max-width: 100%; }
}