/**
 * Yusaso Teal — canonical universal presentation and UI primitives.
 *
 * css_catalog.css owns editable visual tokens. This file consumes those tokens
 * for shared presentation. Feature stylesheets own their empirical geometry.
 */

/* ========================================================================== 
   Document foundation
   ========================================================================== */
/* Form sizing is empirical geometry owned by page_actions.css. */

/* One teal glow, with borders removed from non-feature cards. 
:root {
    --card-glow-inner: #011417;
    --card-glow-outer: #011417;
}
*/

main.content {
    background-color: var(--primary-transparent);
}


/* Universal links retain one predictable state palette. */
a,a:link {
    color: var(--primary-link-color);
    text-decoration: none;
}

a:visited {
    color: var(--primary-link-color);
}

a:hover,a:focus-visible {
    color: var(--primary-link-hover-color);
}

a:active {
    color: var(--primary-link-active-color);
}

/* Unclassified content links use the same readable size as ordinary paragraphs. */
body.public_shell main.content a:not([class]) {
    font-size: var(--paragraph-font-size, 1.125rem);
}

:is(.page_content_header, .page_heading) {
    align-self: start;
    height: auto;
}

/* Ordinary paragraphs use their native spacing. Extra room belongs to the page header. */


/*

.page_heading > .page_content_top_actions,.page_content_header .page_content_top_actions {
    position: static;
    top: auto;
    margin: 0;
    min-height: 2.25rem;
    overflow: visible;
}

.page_heading:not(:has(> .page_content_top_actions)) > .page_content_top_actions,.page_content_header:not(:has(.page_content_top_actions)) .page_content_top_actions {
    height: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
}

.page_description,.page_header_description,.communication_page_description,.post_composer_page > .page_description {
    box-sizing: border-box;
    width: 100%;
    min-height: 3rem;
    margin: 0 0 1rem;
    padding: .35rem .5rem;
    clear: both;
}

:is(.page_description, .page_header_description, .communication_page_description):empty {
    height: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
}

*/



fieldset {
    padding-bottom: 5px;
}

legend {
    color: var(--primary-font-color);
}

/* One shared top-right close control for every public popup. */
.popup_corner_close {
    display: grid;
    position: relative;
    z-index: 2147483647;
    box-sizing: border-box;
    place-items: center;
    width: 2rem;
    min-width: 2rem;
    max-width: 2rem;
    height: 2rem;
    min-height: 2rem;
    max-height: 2rem;
    margin: 0 0 0 auto;
    padding: 0 0 .12rem;
    overflow: visible;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: var(--primary-color);
    background-image: none;
    border: 1px solid var(--primary-font-color);
    border-radius: 50%;
    pointer-events: auto;
    touch-action: manipulation;
    font: 700 1.35rem/1 Arial,Helvetica,sans-serif;
    text-decoration: none;
    cursor: pointer;
    float: right;
}

.popup_corner_close::before {
    content: none;
}

@media (max-width: 480px) {
    .popup_corner_close {
        font-size: 0;
    }

    .popup_corner_close::before {
        content: "";
        display: block;
        width: 1rem;
        height: 1rem;
        background:
            linear-gradient(45deg, transparent 44%, var(--primary-font-color) 45% 55%, transparent 56%),
            linear-gradient(-45deg, transparent 44%, var(--primary-font-color) 45% 55%, transparent 56%);
    }
}

.popup_corner_close:is(:hover,:focus-visible) {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: var(--primary-color);
    border-color: var(--focus-ring-color);
}

/* Shared page-widget MENU tab. Layout styles position and size this control;
   the Theme owns its complete appearance. */
@media (max-width: 87.5rem) {
    html body button.bottom_tab {
        color: var(--primary-font-color) !important;
        -webkit-text-fill-color: var(--primary-font-color) !important;
        background: var(--primary-color) !important;
        background-color: var(--primary-color) !important;
        background-image: none !important;
        border: 1px solid var(--primary-accent-color) !important;
        border-top: 0 !important;
        border-radius: 0 0 var(--page-field-radius) var(--page-field-radius) !important;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
        box-shadow: none !important;
    }

    html body button.bottom_tab:is(:hover,:focus-visible,[aria-expanded="true"]) {
        color: var(--primary-font-color) !important;
        -webkit-text-fill-color: var(--primary-font-color) !important;
        background: var(--primary-color) !important;
        background-color: var(--primary-color) !important;
        border-color: var(--primary-accent-color) !important;
        border-top-color: transparent !important;
    }
}

/* Popup placement is owned by the stylesheet for the component that renders it. */

/* Shared small-text typography primitive. */
small {
    font-size: var(--font-sm);
}


/* One ordinary button presentation. Specialized controls remain explicitly excluded. 
:is(button, input[type="submit"], input[type="reset"], input[type="button"], a.button):not( .popup_corner_close, .public_widget_toggle, .widget_toggle, .widget_navigation_button, .toolbar_tooltip_control, .post_action_icon, .post_image_open, .post_see_more,
.mobile_navigation_button, .account_menu_button, .password_visibility_toggle, .persona_switcher_select, .button_danger, [role="tab"], [data-ui-icon-only="1"], [data-post-image-open], [data-color-choice], [data-background-choice], [data-message-background-choice], [data-composer-background-choice], [data-composer-frame-choice]):not([role="toolbar"] *, .quick_post *, .post_composer *, .post_composer_page *) {
    display: inline-flex;
    box-sizing: border-box;
    width: auto;
    min-width: 0;
    max-width: max-content;
    min-height: 2.25rem;
    margin: 0;
    padding: .45rem .75rem;
    align-items: center;
    justify-content: center;
    justify-self: start;
    color: #fff;
    background: #043945;
    background-image: none;
    border: 1px solid #06717d;
    border-radius: .25rem;
    font: 400 1rem/1.2 Arial, Helvetica, sans-serif;
    font-weight: 400;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
}
*/

/* Shared pointer primitive for semantic clickable areas. Disabled controls are
   excluded so their owning disabled presentation remains authoritative. */
:is(a[href],button,summary,select,label[for],input[type="button"],input[type="submit"],input[type="reset"],input[type="checkbox"],input[type="radio"],input[type="file"],input[type="range"],[role="button"],[role="link"],[role="tab"],[role="menuitem"],[popovertarget]):not(:disabled):not([aria-disabled="true"]){cursor:pointer}

/* Shared standard-button vertical spacing. Placement variants inherit the
   standard presentation; page_actions.css adds alignment and full width only. */
:is(.standard, .standard_left, .standard_center, .standard_right, .standard_full) {
    margin-block: 3px !important;
}

/* One shared standard-button presentation. Placement extensions add only
   alignment, while .standard_full additionally adds full width. */
:is(
    .standard,
    .standard_left,
    .standard_center,
    .standard_right,
    .standard_full,
    form button[type="submit"]:not(.sq_action_button):not(.post_action_icon):not(.post_reply_submit):not(.theme_color_trigger):not(.persona_switcher_select):not([data-ui-icon-only="1"]),
    form button[type="reset"]:not(.sq_action_button):not([data-ui-icon-only="1"]),
    form button[type="button"].button_danger:not(.sq_action_button),
    form input[type="submit"],
    form input[type="button"],
    form input[type="reset"],
    form a.button,
    .page_action_button,
    .content_action_bar.page_content_top_actions > :is(a, button, input[type="submit"], input[type="button"]),
    .content_action_bar.page_content_bottom_actions > :is(a, button, input[type="submit"], input[type="button"])
):not(.post_feed *:not(.standard)):not(.post_card *:not(.standard)):not(.post_composer *:not(.standard)):not(.post_composer_page *:not(.standard)) {
    display: inline-flex !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    width: auto;
    min-width: 0;
    min-height: 2.25rem !important;
    max-width: 100% !important;
    padding: .45rem .75rem !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .4rem !important;
    color: var(--color-button-text) !important;
    -webkit-text-fill-color: currentColor;
    background-color: var(--person-surface) !important;
    background-image: none !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    border: var(--color-button-border-width) solid var(--person-border) !important;
    border-radius: 5px !important;
    font: inherit !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: none !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    cursor: pointer !important;
}

:is(.standard, .standard_left, .standard_center, .standard_right, .standard_full, .page_action_button):is(:hover, :focus-visible) {
    color: var(--popup-button-hover-text) !important;
    background-color: var(--person-surface) !important;
    border-color: color-mix(in srgb, var(--primary-accent-color) 20%, transparent) !important;
}

.small {
    display: inline-flex !important;
    box-sizing: border-box !important;
    width: auto !important;
    min-width: max-content !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: .45rem .75rem !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--color-button-text) !important;
    background-color: var(--person-surface) !important;
    border: var(--color-button-border-width) solid var(--person-border) !important;
    border-radius: 5px !important;
    font: inherit !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.small:is(:hover, :focus-visible) {
    color: var(--popup-button-hover-text) !important;
    background-color: var(--person-surface) !important;
    border-color: color-mix(in srgb, var(--primary-accent-color) 20%, transparent) !important;
}

button.button_danger {
    padding: .31rem !important;
    background-color: var(--color-button-bg) !important;
    border: var(--color-button-border-width) solid var(--button-decline-border) !important;
    border-radius: var(--color-button-radius) !important;
}

/* Shared small square action used by compact edit, delete, and remove controls. */
.sq_action_button {
    position: relative;
    display: inline-grid;
    box-sizing: border-box;
    width: 2.25rem;
    min-width: 2.25rem;
    max-width: 2.25rem;
    height: 2.25rem;
    min-height: 2.25rem;
    max-height: 2.25rem;
    margin: 0;
    padding: .15rem;
    place-items: center;
    justify-self: start;
    color: var(--primary-font-color);
    background: transparent;
    background-image: none;
    border: 0;
    border-radius: 0;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

/* Shared borderless overflow action for Persona and conversation menus. */
button.persona_action_menu_button {
    background: transparent;
    background-image: none;
    border: 0;
    box-shadow: none;
}


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


/* ========================================================================== 
   Shared images and swatches
   ========================================================================== */
/* Opt-in responsive images for ordinary public pages. Posts, Feed, Composer,   avatars, icons, swatches, and feature-card artwork keep their own contracts. */
/* RETIRED 2026-08-28: no current page opts into the legacy page_image helpers.
.page_image {
    box-sizing: border-box;
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.page_image--thumbnail {
    width: min(100%, 6.25rem);
    max-height: 6.25rem;
}

.page_image--small {
    width: min(100%, 12rem);
    max-height: 12rem;
}

.page_image--medium {
    width: min(100%, 24rem);
    max-height: 24rem;
}

.page_image--large {
    width: min(100%, 40rem);
    max-height: 40rem;
}
*/

/* Canonical square color swatch. Feature controls may provide their own size
   through --public-color-swatch-size, but not a different shape or frame. */
:is([data-color-swatch], .public_color_swatch_input, .theme_color_swatch_input, .messaging_color_swatch_input, .reply_color_swatch_input, [data-color-choice], .composer_background_swatch, .composer_overlay_frame_swatch) {
    box-sizing: border-box;
    width: var(--public-color-swatch-size, 2.75rem);
    min-width: var(--public-color-swatch-size, 2.75rem);
    max-width: var(--public-color-swatch-size, 2.75rem);
    height: var(--public-color-swatch-size, 2.75rem);
    min-height: var(--public-color-swatch-size, 2.75rem);
    max-height: var(--public-color-swatch-size, 2.75rem);
    aspect-ratio: 1 / 1;
    padding: 0;
    overflow: hidden;
    background-color: #fff;
    border: 2px solid #f4f7fa;
    border-radius: 0;
}

:is(.public_color_swatch_input, .theme_color_swatch_input, .messaging_color_swatch_input, .reply_color_swatch_input)::-webkit-color-swatch-wrapper {
    padding: 0;
}

:is(.public_color_swatch_input, .theme_color_swatch_input, .messaging_color_swatch_input, .reply_color_swatch_input)::-webkit-color-swatch,
:is(.public_color_swatch_input, .theme_color_swatch_input, .messaging_color_swatch_input, .reply_color_swatch_input)::-moz-color-swatch {
    border: 0;
    border-radius: 0;
}

/*
section.page_content_header,.page_content_header {
    padding: 5px;
    background: rgba(1, 16, 23, .70);
}
*/
/* Standard disclosure/dropdown presentation, sourced from Persona Interests. */
.dropdown {
    overflow: hidden;
    border: var(--page-card-border-width) solid var(--page-card-border);
    border-radius: var(--page-field-radius);
    color: var(--page-field-text);
    background: var(--page-field-background);
    font-family: var(--font-control-family);
    font-size: var(--font-md);
    font-weight: 400;
}

.dropdown > summary {
    padding: .7rem .85rem;
    cursor: pointer;
    color: var(--page-field-text);
    font-weight: 700;
}

.dropdown[open] > summary {
    border-bottom: var(--page-card-border-width) solid var(--page-card-border);
}


/* Edit Persona and every sibling section clear the page navigation. */
/* Page-content headers use their full solid surface color. 
section.page_content_header,.page_content_header {
    background: #011017;
}*/

/* ========================================================================== 
   Shared cards and surfaces
   ========================================================================== */


/*
:root {
    --shared-card-background: #030303;
    --shared-card-text: var(--page-card-text);
    --shared-card-radius: var(--page-card-radius);
    --shared-card-shadow: 0 0 .25rem #011417,0 0 .75rem #011417;
    --nested-card-background: rgba(1,16,23,.70);
    --nested-card-shadow: inset 0 0 .35rem rgba(6,113,125,.28);
    --left-column-background: transparent;
    --center-column-background: var(--shared-card-background);
    --right-column-background: transparent;
}

*/

/*
:is(.public_three_column_center,.content_card,.page_card,.public_widget,.widget_card,.dm_conversation_inbox) {
    box-sizing: border-box;
    min-width: 0;
    padding: 10px;
    color: var(--shared-card-text);  */
    /*background:var(--shared-card-background);*/
   /* background-image: none;
    border: 0;
    border-radius: var(--shared-card-radius);
    box-shadow: var(--shared-card-shadow);
}

:is(.public_three_column_center,.content_card,.page_card,.public_widget,.widget_card,.dm_conversation_inbox) > :is(.content_card,.page_card,.public_widget,.widget_card,.feature_card,.persona_profile_content_card,.dm_conversation_inbox) {
    color: var(--shared-card-text);
    padding: 5px;*/
    /*background:var(--nested-card-background);*/
   /* background-image: none;
    border: 0;
    border-radius: var(--shared-card-radius);
    box-shadow: var(--nested-card-shadow);
}*/

/** patterns added **/

/* ========================================================================== 
   Canonical UI patterns
   ========================================================================== */

/*
 * Canonical pattern vocabulary:
 * - public_tabs / public_tab_list / public_tab / public_tab_panel
 * - public_form_stack
 * - public_form_table_grid: label | controls
 * - public_two_column_grid: equal 50% | 50% columns
 * - public_content_grid / public_card_grid / public_action_grid
 * - public_form_row / public_form_label / public_form_control
 * - public_form_control_row / public_form_help
 * - public_control_extra_small / public_control_small
 * - public_control_medium / public_control_large
 * - public_checkbox_grid / public_content_list / public_empty_state
 *
 * Do not introduce aliases for these empirical patterns. Feature classes may
 * coexist in markup, but they must not duplicate this shared geometry.
 */

/* Canonical tab pattern. */
/* RETIRED 2026-08-28: canonical navigation uses public_tab/public_tab_list.
.public_tabs {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
}
*/

.public_tab_list {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0 0 1rem;
    padding: 0;
    align-items: end;
    gap: .35rem;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    border-bottom: 1px solid var(--tab-border-color, var(--page-divider-color));
}

.public_tab {
    box-sizing: border-box;
    flex: 0 0 auto;
    min-width: max-content;
    min-height: 2.75rem;
    margin: 0;
    padding: .65rem .9rem;
    align-items: center;
    justify-content: center;
    color: var(--tab-text-color, var(--page-card-text));
    background: var(--tab-background-color);
    border: 1px solid var(--tab-border-color, var(--page-divider-color));
    border-radius: var(--page-field-radius) var(--page-field-radius) 0 0;
    font: inherit;
    font-weight: var(--font-heading-weight);
    white-space: nowrap;
}

.public_tab:is(:hover, :focus-visible) {
    color: var(--tab-hover-text-color, var(--navigation-hover-text-color));
    background: var(--tab-hover-background-color, var(--navigation-hover-background-color));
    border-color: var(--tab-hover-border-color, var(--navigation-border-color));
}

.public_tab[aria-selected="true"] {
    color: var(--tab-active-text-color, var(--link-text-color));
    background: var(--tab-active-background-color, var(--page-card-background));
    border-color: var(--tab-active-border-color, var(--color-link));
    box-shadow: inset 0 -.15rem 0 var(--tab-active-indicator-color, var(--color-link));
}

.public_tab_panel {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 1rem;
    color: var(--page-card-text);
    background: var(--panel-background);
    border: var(--panel-border-width, 0) solid var(--panel-border-color);
    border-radius: var(--page-card-radius);
    overflow-wrap: anywhere;
    container-type: inline-size;
}

.public_tab_panel[hidden] {
    display: none !important;
}

/* Canonical non-form grid patterns. Form grids are owned by page_actions.css. */
.public_two_column_grid,
.public_content_grid,
.public_card_grid,
.public_action_grid,
.public_content_list,
.public_empty_state,
.empty {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

/* Equal 50/50 content grid; collapses to one column below 50rem. */
.public_two_column_grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--public-two-column-row-gap, .75rem) var(--public-two-column-column-gap, 1rem);
    align-items: var(--public-two-column-align, start);
}

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

.public_content_grid,
.public_card_grid,
.public_action_grid,
.public_content_list {
    display: grid;
}

.public_content_list {
    grid-template-columns: minmax(0, 1fr);
    gap: .75rem;
}

.public_content_grid {
    grid-template-columns: var(--public-content-grid-columns, minmax(0, 1fr));
    gap: var(--public-content-grid-gap, .75rem);
    align-items: var(--public-content-grid-align, start);
}

.public_card_grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--public-card-grid-min, 15rem)), 1fr));
    gap: var(--public-card-grid-gap, 1rem);
    align-items: stretch;
}

.public_action_grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--public-action-grid-min, 8rem)), max-content));
    gap: var(--public-action-grid-gap, .5rem);
    align-items: center;
    justify-content: var(--public-action-grid-justify, start);
}


/* Canonical list pattern. */
.public_content_list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.public_content_list > * {
    color: var(--page-card-text);
    background: var(--list-item-background);
    border: var(--list-item-border-width, 1px) solid var(--list-item-border, var(--page-divider-color));
    border-radius: var(--page-field-radius);
}

:where(.public_three_column_center, .content_card, .page_card)
    :is(ul, ol):not(form ul):not(nav ul):not(nav ol):not([role="tablist"]) {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-block: .75rem;
    padding-inline-start: 1.4rem;
}

:where(.public_three_column_center, .content_card, .page_card)
    :is(ul, ol):not(form ul):not(nav ul):not(nav ol):not([role="tablist"]) > li + li {
    margin-top: .45rem;
}

:where(.public_three_column_center, .content_card, .page_card)
    :is(ul, ol):not(form ul):not(nav ul):not(nav ol):not([role="tablist"]) > li::marker {
    color: var(--page-link-color);
}

body.public_shell :is(.public_empty_state, .empty) {
    margin: 0;
    padding: 1rem;
    color: var(--page-muted-text);
    background: var(--primary-accent-color);
    border: 1px dashed var(--empty-state-border, var(--page-divider-color));
    border-radius: var(--page-card-radius);
    font-family: inherit;
    font-size: inherit;
    font-style: normal;
    line-height: inherit;
    text-align: center;
    overflow-wrap: anywhere;
}


:is(.public_empty_state, .empty) > :first-child {
    margin-top: 0;
}

:is(.public_empty_state, .empty) > :last-child {
    margin-bottom: 0;
}

/* Canonical public content presentation formerly owned by content.css. */
.content_card,
.page_card {
    color: var(--page-card-text);
    background-image: var(--card-background-image, none);
    background-position: center;
    background-repeat: repeat;
    background-size: auto;
    border-radius: var(--page-card-radius);
    box-shadow: none;
    container-type: inline-size;
}


.page_content > section:not(.public_widget),
.page_content_wrapper > section:not(.public_widget) {
    color: var(--section-text, var(--page-card-text));
    background: var(--section-background);
    border-color: var(--section-border);
    border-style: solid;
    border-width: var(--section-border-width, 0);
}

.page_notification,
.success_box,
.form_success,
.error_box,
.form_error,
.validation_error {
    display: flex;
    box-sizing: border-box;
    height: auto;
    min-height: 0;
    margin-block: .35rem;
    padding: .2rem .5rem;
    align-self: start;
    align-items: center;
    line-height: 1.25;
    border: 1px solid;
    border-radius: var(--page-field-radius);
}

.page_notification,
.success_box,
.form_success {
    color: var(--form-success-text);
    background: var(--form-success-background);
    border-color: var(--form-success-border);
}

.error_box,
.form_error,
.validation_error {
    color: var(--form-error-text);
    background: var(--form-error-background);
    border-color: var(--form-error-border);
}

.page_notification:empty {
    display: none;
}

:is(.page_notification, .success_box, .form_success, .error_box, .form_error, .validation_error) > p {
    margin: 0;
}

.content_card hr,
.page_card hr {
    border: 0;
    border-top: 1px solid var(--page-divider-color);
}

@media (max-width: 40rem) {
    .public_tab_panel {
        padding: .75rem;
    }
}

/* No universal table override is required. */

/* ========================================================================== 
   Responsive public-page presentation
   ========================================================================== */

/* Stable desktop header rows without positional offsets. */
@media (min-width: 1101px) {
    div.page_heading_titles {
        width: 80%;
    }

}

/* Desktop public template boundary. Content determines height; actions remain visible. */
@media (min-width:1101px) {
    :root {
        --sticky-site-header-height: 163px;
    }

    .page_content_wrapper > .page_heading,
    .page_content_wrapper > .page_content_header {
        display: grid;
        grid-template-columns: minmax(0,1fr) auto;
        box-sizing: border-box;
        width: 100%;
        min-height: 4rem;
        margin: 0 0 1rem;
        padding: .5rem;
        align-items: center;
        overflow: visible;
    }

    .page_content_header > .page_heading {
        display: grid;
        grid-template-columns: minmax(0,1fr) auto;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        min-height: 0;
        margin: 0;
        padding: 0;
        align-items: center;
        overflow: visible;
    }

    .page_heading_titles {
        min-width: 0;
        align-self: center;
    }

    .page_content_wrapper > .page_heading > :is(h1,h2,.page_heading_titles),
    .page_content_header > .page_heading > :is(h1,h2,.page_heading_titles) {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
        margin-block: 0;
    }

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

    .page_description, .page_header_description {
        height: auto;
        min-height: 0;
        max-height: none;
        margin: 0;
        overflow: visible;
    }

    /* RETIRED 2026-08-29: first/last-child no longer identifies physical
       rails after shared surface frames and responsive controls were added.
       layouts.css owns sticky rail positioning. */

}

/* ========================================================================== 
   Public page headings
   ========================================================================== */
/* Page headings grow when needed and never crop their action buttons. */
.page_content_header,.page_content_header > .page_heading {
    height: auto;
    max-height: none;
    overflow: visible;
}


/* Processing popup presentation moved to cards.css, the shared popup surface owner. */

/* Native popover visibility contract. */
[popover] {
    display: none;
    box-sizing: border-box;
    width: min(20rem, calc(100vw - 1rem));
    max-width: calc(100vw - 1rem);
    max-height: calc(100dvh - 1rem);
    margin: 0;
    padding: .75rem;
    overflow: auto;
    background: var(--popup-background-color);
    border: var(--popup-border-width) solid color-mix(in srgb, var(--primary-accent-color) 20%, transparent);
    border-radius: var(--popup-radius);
    box-shadow: var(--popup-shadow);
}

[popover]:popover-open {
    display: block;
}

/* Shared message dialog used for Composer success notices and confirmations. */
.yusaso_message_dialog {
    box-sizing: border-box;
    width: min(24rem, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    margin: auto;
    padding: 0;
    color: var(--popup-text-color);
    background: var(--popup-background-color);
    border: var(--popup-border-width) solid color-mix(in srgb, var(--primary-accent-color) 20%, transparent);
    border-radius: var(--popup-radius);
    box-shadow: var(--popup-shadow);
}

.yusaso_message_dialog::backdrop {
    background: rgba(0, 0, 0, 0.72);
    background: rgb(from var(--popup-backdrop-color) r g b / var(--popup-backdrop-opacity));
}

.yusaso_message_dialog > form {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 1rem;
}

.yusaso_message_dialog :is(h2, p) {
    margin: 0;
    color: inherit;
}

.yusaso_message_dialog :is(button, input, select, textarea) {
    font: inherit;
}

.yusaso_message_dialog .button_bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.yusaso_message_dialog > .popup_corner_close {
    float: none !important;
    margin: .5rem .5rem 0 auto !important;
}

/* Persona presence belongs to the shared avatar shell. */
.persona_avatar_frame {
    position: relative;
}

.persona_presence_marker {
    position: absolute;
    right: -1px;
    bottom: -1px;
    z-index: 2;
    box-sizing: border-box;
    width: 10px;
    max-width: 10px;
    height: 10px;
    max-height: 10px;
    background: var(--persona-presence-color);
    border: 1px solid var(--primary-color);
    border-radius: .12rem;
}

/* Canonical Device Settings dialog shared by Calls and Messages. */
.messaging_call_device_settings {
    box-sizing: border-box;
    width: min(28rem, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    margin: auto;
    padding: 1rem;
    color: var(--primary-font-color);
    background: rgb(from var(--primary-color) r g b / .8);
    border: var(--popup-border-width) solid color-mix(in srgb, var(--primary-accent-color) 20%, transparent);
    border-radius: var(--popup-radius);
    box-shadow: var(--popup-shadow);
}

.messaging_call_device_settings::backdrop {
    background: rgb(from var(--primary-color) r g b / .72);
}

.messaging_call_device_settings > .popup_corner_close {
    position: absolute;
    top: .5rem;
    right: .5rem;
}




/* No universal time override is required. */

.ui_global_tooltip {
    position: fixed;
    z-index: 2147483647;
    box-sizing: border-box;
    width: max-content;
    max-width: min(18rem, calc(100vw - 1rem));
    padding: 0.35rem 0.5rem;
    color: var(--popup-text-color);
    background: var(--popup-background-color);
    border: var(--popup-border-width) solid color-mix(in srgb, var(--primary-accent-color) 20%, transparent);
    border-radius: min(var(--popup-radius), 8px);
    box-shadow: var(--popup-shadow);
    font-family: var(--font-control-family);
    font-size: var(--font-xs);
    font-style: normal;
    font-weight: 400;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
    pointer-events: none;
}

.ui_global_tooltip[hidden] {
    display: none !important;
}

/* The body-level tooltip replaces legacy generated-content tooltips. */
.ui_tooltips_ready :is(
    .toolbar_tooltip_control:not([data-post-action-count]),
    .post_action_icon:not([data-post-action-count]),
    .save_glyph_button,
    .post_reply_edit_toggle,
    .post_reply_toolbar button[aria-label],
    .composer_toolbar button[aria-label],
    .quick_post_toolbar button[aria-label],
    .message_delete_form button
)::after {
    display: none !important;
}