/* 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. */
/* Lists, empty states, notices and floating messages (moved from new_base_aesthetics.css) */
: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 {
    /* bullets and numbers follow the list text color (they were the link color). */
    color: var(--primary-font-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(--radius-large);
    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;
}

.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;
    border: 1px solid;
    border-radius: var(--radius-large);
}

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

/* Sept 22 2026 - "nearly every popup is NOT displaying correctly" audit: these dismissible error/success... */
.dismissible_notice {
    position: relative;
    padding-right: 2.25rem;
}

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

/* her request: every page message floats at the top of the page content viewport (just below the sticky header)... */
.floating_page_messages {
    position: fixed;
    top: calc(var(--sticky-site-header-bottom, 0px) + .5rem);
    left: var(--floating-messages-left, 0);
    z-index: 1100;
    display: grid;
    gap: .35rem;
    box-sizing: border-box;
    width: var(--floating-messages-width, 100vw);
    pointer-events: none;
}

.floating_page_messages > .floating_page_message > p {
    margin: 0;
}

.floating_page_messages:empty {
    display: none;
}

.floating_page_messages > .floating_page_message {
    margin: 0;
    padding: .45rem .75rem;
    pointer-events: auto;
    box-shadow:var(--shadow-backdrop);
    opacity: 1;
    transition: opacity .4s ease;
}

.floating_page_messages > .floating_page_message.floating_page_message_fading {
    opacity: 0;
}

/* Card base (moved from new_base_aesthetics.css; kept first so this file's own rules still win ties) */
/* 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(--radius-large);
    box-shadow: none;
    container-type: inline-size;
}

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

.feature_wrapper, .post_card, .nested_card {
    --zone-t: var(--zone-10);
}

.card_wrapper, .post_card_body, .nested_card_content {
    --zone-t: calc(10px * var(--layout-theme-zone-scale, 1));
    --zone-top-left-corner-img: var(--theme-zone-card-body-top-left-corner-background-image, none);
    --zone-top-left-corner-clr: var(--theme-zone-card-body-top-left-corner-background-color, transparent);
    --zone-top-left-corner-img-opacity: var(--theme-zone-card-body-top-left-corner-background-image-opacity, 1);
    --zone-top-left-corner-clr-opacity: var(--theme-zone-card-body-top-left-corner-background-color-opacity, 1);
    --zone-top-left-corner-inner-glow: var(--theme-zone-card-body-top-left-corner-inner-glow, none);
    --zone-top-left-corner-outer-glow: var(--theme-zone-card-body-top-left-corner-outer-glow, none);
    --zone-top-left-corner-shadow: var(--theme-zone-card-body-top-left-corner-shadow, none);
    --zone-top-right-corner-img: var(--theme-zone-card-body-top-right-corner-background-image, none);
    --zone-top-right-corner-clr: var(--theme-zone-card-body-top-right-corner-background-color, transparent);
    --zone-top-right-corner-img-opacity: var(--theme-zone-card-body-top-right-corner-background-image-opacity, 1);
    --zone-top-right-corner-clr-opacity: var(--theme-zone-card-body-top-right-corner-background-color-opacity, 1);
    --zone-top-right-corner-inner-glow: var(--theme-zone-card-body-top-right-corner-inner-glow, none);
    --zone-top-right-corner-outer-glow: var(--theme-zone-card-body-top-right-corner-outer-glow, none);
    --zone-top-right-corner-shadow: var(--theme-zone-card-body-top-right-corner-shadow, none);
    --zone-bottom-left-corner-img: var(--theme-zone-card-body-bottom-left-corner-background-image, none);
    --zone-bottom-left-corner-clr: var(--theme-zone-card-body-bottom-left-corner-background-color, transparent);
    --zone-bottom-left-corner-img-opacity: var(--theme-zone-card-body-bottom-left-corner-background-image-opacity, 1);
    --zone-bottom-left-corner-clr-opacity: var(--theme-zone-card-body-bottom-left-corner-background-color-opacity, 1);
    --zone-bottom-left-corner-inner-glow: var(--theme-zone-card-body-bottom-left-corner-inner-glow, none);
    --zone-bottom-left-corner-outer-glow: var(--theme-zone-card-body-bottom-left-corner-outer-glow, none);
    --zone-bottom-left-corner-shadow: var(--theme-zone-card-body-bottom-left-corner-shadow, none);
    --zone-bottom-right-corner-img: var(--theme-zone-card-body-bottom-right-corner-background-image, none);
    --zone-bottom-right-corner-clr: var(--theme-zone-card-body-bottom-right-corner-background-color, transparent);
    --zone-bottom-right-corner-img-opacity: var(--theme-zone-card-body-bottom-right-corner-background-image-opacity, 1);
    --zone-bottom-right-corner-clr-opacity: var(--theme-zone-card-body-bottom-right-corner-background-color-opacity, 1);
    --zone-bottom-right-corner-inner-glow: var(--theme-zone-card-body-bottom-right-corner-inner-glow, none);
    --zone-bottom-right-corner-outer-glow: var(--theme-zone-card-body-bottom-right-corner-outer-glow, none);
    --zone-bottom-right-corner-shadow: var(--theme-zone-card-body-bottom-right-corner-shadow, none);
    --zone-top-border-img: var(--theme-zone-card-body-top-border-background-image, none);
    --zone-top-border-clr: var(--theme-zone-card-body-top-border-background-color, transparent);
    --zone-top-border-img-opacity: var(--theme-zone-card-body-top-border-background-image-opacity, 1);
    --zone-top-border-clr-opacity: var(--theme-zone-card-body-top-border-background-color-opacity, 1);
    --zone-top-border-inner-glow: var(--theme-zone-card-body-top-border-inner-glow, none);
    --zone-top-border-outer-glow: var(--theme-zone-card-body-top-border-outer-glow, none);
    --zone-top-border-shadow: var(--theme-zone-card-body-top-border-shadow, none);
    --zone-right-border-img: var(--theme-zone-card-body-right-border-background-image, none);
    --zone-right-border-clr: var(--theme-zone-card-body-right-border-background-color, transparent);
    --zone-right-border-img-opacity: var(--theme-zone-card-body-right-border-background-image-opacity, 1);
    --zone-right-border-clr-opacity: var(--theme-zone-card-body-right-border-background-color-opacity, 1);
    --zone-right-border-inner-glow: var(--theme-zone-card-body-right-border-inner-glow, none);
    --zone-right-border-outer-glow: var(--theme-zone-card-body-right-border-outer-glow, none);
    --zone-right-border-shadow: var(--theme-zone-card-body-right-border-shadow, none);
    --zone-bottom-border-img: var(--theme-zone-card-body-bottom-border-background-image, none);
    --zone-bottom-border-clr: var(--theme-zone-card-body-bottom-border-background-color, transparent);
    --zone-bottom-border-img-opacity: var(--theme-zone-card-body-bottom-border-background-image-opacity, 1);
    --zone-bottom-border-clr-opacity: var(--theme-zone-card-body-bottom-border-background-color-opacity, 1);
    --zone-bottom-border-inner-glow: var(--theme-zone-card-body-bottom-border-inner-glow, none);
    --zone-bottom-border-outer-glow: var(--theme-zone-card-body-bottom-border-outer-glow, none);
    --zone-bottom-border-shadow: var(--theme-zone-card-body-bottom-border-shadow, none);
    --zone-left-border-img: var(--theme-zone-card-body-left-border-background-image, none);
    --zone-left-border-clr: var(--theme-zone-card-body-left-border-background-color, transparent);
    --zone-left-border-img-opacity: var(--theme-zone-card-body-left-border-background-image-opacity, 1);
    --zone-left-border-clr-opacity: var(--theme-zone-card-body-left-border-background-color-opacity, 1);
    --zone-left-border-inner-glow: var(--theme-zone-card-body-left-border-inner-glow, none);
    --zone-left-border-outer-glow: var(--theme-zone-card-body-left-border-outer-glow, none);
    --zone-left-border-shadow: var(--theme-zone-card-body-left-border-shadow, none);
}

.post_card_actions {
    --zone-t: calc(10px * var(--layout-theme-zone-scale, 1));
    --zone-top-left-corner-img: var(--theme-zone-card-footer-top-left-corner-background-image, none);
    --zone-top-left-corner-clr: var(--theme-zone-card-footer-top-left-corner-background-color, transparent);
    --zone-top-left-corner-img-opacity: var(--theme-zone-card-footer-top-left-corner-background-image-opacity, 1);
    --zone-top-left-corner-clr-opacity: var(--theme-zone-card-footer-top-left-corner-background-color-opacity, 1);
    --zone-top-left-corner-inner-glow: var(--theme-zone-card-footer-top-left-corner-inner-glow, none);
    --zone-top-left-corner-outer-glow: var(--theme-zone-card-footer-top-left-corner-outer-glow, none);
    --zone-top-left-corner-shadow: var(--theme-zone-card-footer-top-left-corner-shadow, none);
    --zone-top-right-corner-img: var(--theme-zone-card-footer-top-right-corner-background-image, none);
    --zone-top-right-corner-clr: var(--theme-zone-card-footer-top-right-corner-background-color, transparent);
    --zone-top-right-corner-img-opacity: var(--theme-zone-card-footer-top-right-corner-background-image-opacity, 1);
    --zone-top-right-corner-clr-opacity: var(--theme-zone-card-footer-top-right-corner-background-color-opacity, 1);
    --zone-top-right-corner-inner-glow: var(--theme-zone-card-footer-top-right-corner-inner-glow, none);
    --zone-top-right-corner-outer-glow: var(--theme-zone-card-footer-top-right-corner-outer-glow, none);
    --zone-top-right-corner-shadow: var(--theme-zone-card-footer-top-right-corner-shadow, none);
    --zone-bottom-left-corner-img: var(--theme-zone-card-footer-bottom-left-corner-background-image, none);
    --zone-bottom-left-corner-clr: var(--theme-zone-card-footer-bottom-left-corner-background-color, transparent);
    --zone-bottom-left-corner-img-opacity: var(--theme-zone-card-footer-bottom-left-corner-background-image-opacity, 1);
    --zone-bottom-left-corner-clr-opacity: var(--theme-zone-card-footer-bottom-left-corner-background-color-opacity, 1);
    --zone-bottom-left-corner-inner-glow: var(--theme-zone-card-footer-bottom-left-corner-inner-glow, none);
    --zone-bottom-left-corner-outer-glow: var(--theme-zone-card-footer-bottom-left-corner-outer-glow, none);
    --zone-bottom-left-corner-shadow: var(--theme-zone-card-footer-bottom-left-corner-shadow, none);
    --zone-bottom-right-corner-img: var(--theme-zone-card-footer-bottom-right-corner-background-image, none);
    --zone-bottom-right-corner-clr: var(--theme-zone-card-footer-bottom-right-corner-background-color, transparent);
    --zone-bottom-right-corner-img-opacity: var(--theme-zone-card-footer-bottom-right-corner-background-image-opacity, 1);
    --zone-bottom-right-corner-clr-opacity: var(--theme-zone-card-footer-bottom-right-corner-background-color-opacity, 1);
    --zone-bottom-right-corner-inner-glow: var(--theme-zone-card-footer-bottom-right-corner-inner-glow, none);
    --zone-bottom-right-corner-outer-glow: var(--theme-zone-card-footer-bottom-right-corner-outer-glow, none);
    --zone-bottom-right-corner-shadow: var(--theme-zone-card-footer-bottom-right-corner-shadow, none);
    --zone-top-border-img: var(--theme-zone-card-footer-top-border-background-image, none);
    --zone-top-border-clr: var(--theme-zone-card-footer-top-border-background-color, transparent);
    --zone-top-border-img-opacity: var(--theme-zone-card-footer-top-border-background-image-opacity, 1);
    --zone-top-border-clr-opacity: var(--theme-zone-card-footer-top-border-background-color-opacity, 1);
    --zone-top-border-inner-glow: var(--theme-zone-card-footer-top-border-inner-glow, none);
    --zone-top-border-outer-glow: var(--theme-zone-card-footer-top-border-outer-glow, none);
    --zone-top-border-shadow: var(--theme-zone-card-footer-top-border-shadow, none);
    --zone-right-border-img: var(--theme-zone-card-footer-right-border-background-image, none);
    --zone-right-border-clr: var(--theme-zone-card-footer-right-border-background-color, transparent);
    --zone-right-border-img-opacity: var(--theme-zone-card-footer-right-border-background-image-opacity, 1);
    --zone-right-border-clr-opacity: var(--theme-zone-card-footer-right-border-background-color-opacity, 1);
    --zone-right-border-inner-glow: var(--theme-zone-card-footer-right-border-inner-glow, none);
    --zone-right-border-outer-glow: var(--theme-zone-card-footer-right-border-outer-glow, none);
    --zone-right-border-shadow: var(--theme-zone-card-footer-right-border-shadow, none);
    --zone-bottom-border-img: var(--theme-zone-card-footer-bottom-border-background-image, none);
    --zone-bottom-border-clr: var(--theme-zone-card-footer-bottom-border-background-color, transparent);
    --zone-bottom-border-img-opacity: var(--theme-zone-card-footer-bottom-border-background-image-opacity, 1);
    --zone-bottom-border-clr-opacity: var(--theme-zone-card-footer-bottom-border-background-color-opacity, 1);
    --zone-bottom-border-inner-glow: var(--theme-zone-card-footer-bottom-border-inner-glow, none);
    --zone-bottom-border-outer-glow: var(--theme-zone-card-footer-bottom-border-outer-glow, none);
    --zone-bottom-border-shadow: var(--theme-zone-card-footer-bottom-border-shadow, none);
    --zone-left-border-img: var(--theme-zone-card-footer-left-border-background-image, none);
    --zone-left-border-clr: var(--theme-zone-card-footer-left-border-background-color, transparent);
    --zone-left-border-img-opacity: var(--theme-zone-card-footer-left-border-background-image-opacity, 1);
    --zone-left-border-clr-opacity: var(--theme-zone-card-footer-left-border-background-color-opacity, 1);
    --zone-left-border-inner-glow: var(--theme-zone-card-footer-left-border-inner-glow, none);
    --zone-left-border-outer-glow: var(--theme-zone-card-footer-left-border-outer-glow, none);
    --zone-left-border-shadow: var(--theme-zone-card-footer-left-border-shadow, none);
}

/* her request: no top margin on div.card_wrapper. */
.card_wrapper {
    margin-block-start: 0;
}

/**
 * Yusaso Teal shared content presentation.
 *
 * This stylesheet owns reusable content-card geometry. User-editable visual
 * values remain in css_visual_catalog.css. Feature-specific artwork remains in each
 * feature's owning stylesheet.
 */
/* ==========================================================================
 Shared Widget and Persona Viewer Surface
 ========================================================================== */
:is(.public_widget, .widget_card) > :is(.public_widget_content, .widget_content) {
    background-color: color-mix(in srgb, var(--widget-content-background-color) calc(var(--widget-content-background-color-opacity, 1) * 100%), transparent);
    background-image: var(--widget-content-background-image), var(--widget-content-background-gradient);
    background-repeat: var(--widget-content-background-repeat), var(--widget-content-background-repeat);
    box-shadow: var(--widget-content-shadow);
}

:is(.persona_popup_surface, .persona_popup_surface.persona_full_view_content) {
    background-color: color-mix(in srgb, var(--content-surface-background-color) calc(var(--content-surface-background-color-opacity, 1) * 100%), transparent);
    background-image: var(--content-surface-background-image), var(--content-surface-background-gradient);
    box-shadow: var(--popup-content-shadow);
    background-position: center;
    background-repeat: var(--content-surface-background-repeat, no-repeat), var(--content-surface-background-repeat, no-repeat);
    background-size: cover;
}

/* ==========================================================================
 Feature Groups
 ========================================================================== */
.feature_wrapper {
    box-sizing: border-box;
    display: grid;
    width: 100%;
    min-width: 0;
    gap: max(0.75rem, calc(2 * var(--zone-t, 0px)));
    margin-bottom: 20px;
    /* Oct 5 2026 - Issue #66 (her direct request) */
    padding: max(0.85rem, calc(var(--zone-t, 0px) + var(--layout-theme-zone-pad, 0px))) max(0.85rem, calc(var(--zone-t, 0px) + var(--layout-theme-zone-pad, 0px))) max(calc(0.85rem + 5px), calc(var(--zone-t, 0px) + var(--layout-theme-zone-pad, 0px)));
    background-color: color-mix(in srgb, var(--feature-wrapper-background-color) calc(var(--feature-wrapper-background-color-opacity, 1) * 100%), transparent);
    background-image: var(--feature-wrapper-background-image), var(--feature-wrapper-background-gradient);
    background-repeat: var(--feature-wrapper-background-repeat), var(--feature-wrapper-background-repeat);
    border: var(--border-1) solid var(--primary-border-color);
    border-radius: var(--radius-large);
    box-shadow: var(--feature-wrapper-shadow);
}

/* Sept 26 2026 fix (her approval, Q1): same [hidden]-vs-display
 specificity tie as .feature_card[hidden] just below - this class's
 own `display: grid` above was silently overriding the browser's
 default `[hidden] { display: none }`, so a hidden .feature_wrapper
 (e.g. communities.php's Search Results section, which starts
 `hidden` until a search is actually submitted) stayed visible. */
.feature_wrapper[hidden] {
    display: none !important;
}

.feature_wrapper > h2 {
    min-width: 0;
    margin: 0 0 8px;
    color: var(--primary-font-color);
}

/* ==========================================================================
 Interior Feature Cards
 ========================================================================== */
.feature_card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    padding: 0.65rem 0.65rem calc(0.65rem + 10px);
    /* Oct 2 2026 - her direct instruction: add 15px margin below the card. */
    margin-bottom: 15px;
    background-color: color-mix(in srgb, var(--feature-card-background-color) calc(var(--feature-card-background-color-opacity, 1) * 100%), transparent);
    background-image: var(--feature-card-background-image), var(--feature-card-background-gradient);
    background-repeat: var(--feature-card-background-repeat), var(--feature-card-background-repeat);
    box-shadow: var(--feature-card-shadow);
    border: var(--tertiary-border-color);
    border-radius: var(--radius-large);
    text-align: center;
}

/* Sept 11 2026 fix: same [hidden]-vs-display specificity tie as the
 .public_content_grid family in new_base_aesthetics.css - this class's
 own `display: flex` above was silently overriding the browser's
 default `[hidden] { display: none }`, so any hidden feature_card
 (e.g. Max Theme Editor's workflow-picker options) stayed visible. */
.feature_card[hidden] {
    display: none !important;
}

.feature_card h2 {
    margin: 0 0 8px;
}

.feature_card :is(h3, h4) {
    margin: 0.65rem 0 0.3rem;
    text-align: center;
}

.feature_card > p {
    margin: 0.2rem 0;
    text-align: center;
}

/* RETIRED 2026-08-29: no renderer or script emits feature_card_visual.
 .feature_card_visual {
 box-sizing: border-box;
 width: 100%;
 min-width: 0;
 overflow: hidden;
 }
 */
.card_wrapper {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    background: var(--interior-feature-card-background);
    border: 1px solid var(--feature-card-border-color);
    color: var(--feature-card-text-color);
    text-align: left;
}

.card_wrapper p {
    padding-bottom: 1lh;
}

/* Shared compact catalog cards. Shop, onboarding, and discovery catalogs use
 one equal-height title/description/action structure. */
.catalog_mini_card_grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 1rem;
    width: 100%;
    min-width: 0;
}

.catalog_mini_card_grid > .nested_card, .catalog_mini_card_grid > .nested_card > .nested_card_content {
    height: 100%;
    min-width: 0;
}

/* Oct 5 2026 - Issue #51: the content box is height:100% PLUS its own padding
 (content-box sizing), so it was always taller than the card by exactly that
 padding, and the card's overflow:hidden clipped the bottom (the price/gift
 area). border-box makes 100% include the padding. */
.catalog_mini_card_grid > .nested_card > .nested_card_content {
    box-sizing: border-box;
}

/* Oct 18 2026 - her report: shop.php nested cards ignored the Theme Editor's nested card settings. This rule used to paint its own gradient, border color and shadow over .nested_card's tokens (--nested-card-*); it now only sets the border width / style and radius, so the color, image, gradient, border color and shadow come from the nested card settings. */
.catalog_mini_card_grid > .nested_card {
    border-width: var(--border-1);
    border-style: solid;
    border-radius: var(--radius-large);
}

.catalog_mini_card_grid > .nested_card > .nested_card_content {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: max(0.75rem, calc(2 * var(--zone-t, 0px)));
    padding: max(0.65rem, calc(var(--zone-t, 0px) + var(--layout-theme-zone-pad, 0px)));
}

.catalog_mini_card_details {
    display: grid;
    grid-template-rows: 3rem auto 5.25rem 1.25rem 1.25rem;
    align-content: start;
    gap: 0.45rem;
    min-width: 0;
}

.catalog_mini_card_details > h3 {
    display: flex;
    grid-row: 1;
    align-items: center;
    justify-content: center;
    height: 3rem;
    margin: 0;
    overflow: hidden;
}

.catalog_mini_card_details > :is(img, .premium_shop_pack_art, .premium_shop_art_unavailable) {
    grid-row: 2;
}

.catalog_mini_card_description {
    box-sizing: border-box;
    grid-row: 3;
    height: 5.25rem;
    margin: 0;
    overflow: hidden;
    padding: 0;
}

.catalog_mini_card_details > .premium_shop_audience_note {
    grid-row: 4;
}

.catalog_mini_card_details > .premium_shop_requirement {
    grid-row: 5;
}

.catalog_mini_card_details > p {
    padding-bottom: 0;
}

.catalog_mini_card_empty_row {
    visibility: hidden;
}

.catalog_mini_card_actions {
    display: grid;
    grid-template-rows: auto auto;
    align-content: end;
    align-items: start;
    gap: 0.45rem;
    min-height: 4.75rem;
}

.catalog_mini_card_status, .catalog_mini_card_actions > .shop_gift_line_item {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
}

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

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

/* ==========================================================================
 Shared Processing Popup
 ========================================================================== */
.processing_dialog, [data-feed-queue-status].is_loading {
    z-index: 2147483646;
    box-sizing: border-box;
    width: min(24rem, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    padding: 0;
    color: var(--popup-text-color);
    background-color: color-mix(in srgb, var(--popup-background-color) calc(var(--popup-background-color-opacity, 1) * 100%), transparent);
    background-image: var(--popup-background-image), var(--popup-background-gradient);
    background-repeat: var(--popup-background-repeat), var(--popup-background-repeat);
    border: var(--border-1) solid color-mix(in srgb, var(--primary-accent-color) 20%, transparent);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-backdrop);
}

.processing_dialog {
    margin: auto;
}

.processing_dialog::backdrop, [data-feed-queue-status]::backdrop {
    background: var(--cards-processing-dialog-backdrop-background-color);
    background: rgb(from var(--popup-backdrop-color) r g b / var(--popup-backdrop-opacity));
}

.processing_dialog_content, [data-feed-queue-status].is_loading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .35rem .75rem;
}

[data-feed-queue-status].is_loading {
    margin: auto;
    padding: 1rem;
}

.processing_dialog_content {
    min-width: min(18rem, calc(100vw - 3rem));
    padding: 1rem;
}

.processing_dialog_content :is(strong, p), [data-feed-queue-status].is_loading strong {
    color: inherit;
}

.processing_dialog_content p {
    grid-column: 2;
    margin: 0;
    padding: 0;
    color: var(--page-muted-text);
}

.processing_spinner {
    box-sizing: border-box;
    width: 2rem;
    height: 2rem;
    background: radial-gradient(circle at 50% 12%, var(--yusaso-green) 0 .16rem, color-mix(in srgb, var(--yusaso-green) 55%, transparent) .24rem, transparent .42rem), radial-gradient(circle at 84% 70%, var(--yusaso-blue) 0 .16rem, color-mix(in srgb, var(--yusaso-blue) 55%, transparent) .24rem, transparent .42rem), radial-gradient(circle at 16% 70%, var(--yusaso-purple) 0 .16rem, color-mix(in srgb, var(--yusaso-purple) 55%, transparent) .24rem, transparent .42rem);
    border: 0;
    border-radius: 50%;
    animation: yusaso_processing_spin .8s linear infinite;
}

.processing_dialog_content .processing_spinner {
    grid-row: 1 / 3;
}

@keyframes yusaso_processing_spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .processing_spinner {
        animation-duration: 1.8s;
    }
}

/* Standalone Call room dialing indicator: the same 3-dot palette as
 .processing_spinner, swept horizontally with a pause between passes
 instead of rotated, to simulate dialing. */
.calls_dialing_bar {
    width: 15.625rem;
    height: 0.5rem;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.calls_dialing_balls {
    position: absolute;
    top: 0;
    left: 0;
    width: 1.6rem;
    height: 0.5rem;
    background: radial-gradient(circle at 10% 50%, var(--yusaso-green) 0 .16rem, color-mix(in srgb, var(--yusaso-green) 55%, transparent) .24rem, transparent .42rem), radial-gradient(circle at 50% 50%, var(--yusaso-blue) 0 .16rem, color-mix(in srgb, var(--yusaso-blue) 55%, transparent) .24rem, transparent .42rem), radial-gradient(circle at 90% 50%, var(--yusaso-purple) 0 .16rem, color-mix(in srgb, var(--yusaso-purple) 55%, transparent) .24rem, transparent .42rem);
    animation: yusaso_dialing_sweep 2.4s ease-in-out infinite;
}

@keyframes yusaso_dialing_sweep {
    0% {
        transform: translateX(-1.6rem);
        opacity: 1;
    }
    40% {
        transform: translateX(15.625rem);
        opacity: 1;
    }
    41% {
        opacity: 0;
    }
    100% {
        opacity: 0;
        transform: translateX(-1.6rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .calls_dialing_balls {
        animation-duration: 4.8s;
    }
}

/* Shared Post-header, Post-reply, and Private Chat datetime presentation. */
.shared_datetime_metadata {
    color: var(--metadata-color);
    white-space: nowrap;
}

/* ==========================================================================
 Mobile Card Layout
 ========================================================================== */
@media (max-width: 40rem) {
    .feature_wrapper, .feature_card, /* RETIRED 2026-08-29: feature_card_visual has no caller. .feature_card_visual, */ .card_wrapper {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
}

/* ==========================================================================
 Adaptive Theme Surface Frames
 ========================================================================== */
:is( .site_wrapper, .public_three_column_layout, .public_single_column_layout, .persona_profile_page, .persona_mini_content ) {
    position: relative;
    isolation: isolate;
}

/* Oct 3 2026 - her report: rotation removed. This block used to paint ONE
 corner image and ONE side image, then rotate copies of that same image
 into the other 3 corners/sides - fine when a theme has no border art, but
 wrong the moment a theme supplies real per-side images, since a rotated
 copy of (say) the top border is not a valid left border. Replaced with 8
 independent --surface-frame-<position>-<corner|border>-background-image
 tokens (named to match the existing --popup-mini-* zone-token convention
 in css_visual_catalog.css) - each position now points at its own image and no
 transform:rotate() is applied anywhere in this block. Also capped
 --theme-zone-surface-frame-corner-size/--theme-zone-surface-frame-side-thickness at 10px via
 min() per her spec (corners: 10px by 10px; sides: 10px thickness), so
 this wrapper can never grow past a thin 10px frame regardless of a
 theme's own rem-based defaults. */
.theme_surface_frame {
    /* Sept 26 2026 - new; see --theme-surface-frame-background-color in
     css_visual_catalog.css. Transparent by default, so this changes nothing
     until THE SWITCH overrides it for a viewed persona.
     Sept 28 2026 - explicit `, transparent` fallback added after a
     catalog-rebuild self-scan bug let this token silently corrupt to a
     non-transparent value sitewide (see adminServiceCatalogRebuildDirectory()
     in admin_service.php). This element can no longer go opaque just
     because the catalog is missing or wrong - it always has a safe
     fallback of its own. */
    background-color: var(--theme-surface-frame-background-color, transparent);
    position: absolute;
    z-index: 4;
    inset: 0;
    display: block;
    overflow: hidden;
    opacity: var(--theme-zone-surface-frame-opacity);
    border-radius: inherit;
    pointer-events: none;
}

.theme_surface_frame_corner, .theme_surface_frame_side {
    position: absolute;
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}

.theme_surface_frame_corner {
    width: min(2.5rem, 10px);
    height: min(2.5rem, 10px);
    background-size: 100% 100%;
}

.theme_surface_frame_corner_top_left {
    top: 0;
    left: 0;
    background-image: var(--theme-zone-surface-frame-top-left-corner-background-image);
}

.theme_surface_frame_corner_top_right {
    top: 0;
    right: 0;
    background-image: var(--theme-zone-surface-frame-top-right-corner-background-image);
}

.theme_surface_frame_corner_bottom_right {
    right: 0;
    bottom: 0;
    background-image: var(--theme-zone-surface-frame-bottom-right-corner-background-image);
}

.theme_surface_frame_corner_bottom_left {
    bottom: 0;
    left: 0;
    background-image: var(--theme-zone-surface-frame-bottom-left-corner-background-image);
}

.theme_surface_frame_side_top, .theme_surface_frame_side_bottom {
    right: min(2.5rem, 10px);
    left: min(2.5rem, 10px);
    height: min(0.2rem, 10px);
    background-repeat: repeat-x;
    background-size: auto 100%;
}

.theme_surface_frame_side_top {
    top: 0;
    background-image: var(--theme-zone-surface-frame-top-border-background-image);
}

.theme_surface_frame_side_bottom {
    bottom: 0;
    background-image: var(--theme-zone-surface-frame-bottom-border-background-image);
}

.theme_surface_frame_side_right, .theme_surface_frame_side_left {
    top: min(2.5rem, 10px);
    bottom: min(2.5rem, 10px);
    width: min(0.2rem, 10px);
    background-position: center;
    background-repeat: repeat-y;
    /* Size by tile height instead of the image's wide transparent canvas, then
     clip its centered rail to the canonical side thickness. */
    background-size: auto 6.25rem;
}

.theme_surface_frame_side_right {
    right: 0;
    background-image: var(--theme-zone-surface-frame-right-border-background-image);
}

.theme_surface_frame_side_left {
    left: 0;
    background-image: var(--theme-zone-surface-frame-left-border-background-image);
}

/* The whole-site instance must remain visible above the sticky shared header. */
.site_wrapper > .theme_surface_frame {
    z-index: 2000;
    /* Oct 5 2026 - Issue #79: the whole-page theme frame is 20px (corners + side thickness) on desktop, 10px on mobile - see the max-width:40rem block below */
}
/* Whole-page frame: 20px corners and sides on desktop, 10px on mobile (see the max-width:40rem block below). */
.site_wrapper > .theme_surface_frame .theme_surface_frame_corner {
    width: var(--layout-ring);
    height: var(--layout-ring);
}
.site_wrapper > .theme_surface_frame :is(.theme_surface_frame_side_top, .theme_surface_frame_side_bottom) {
    right: var(--layout-ring);
    left: var(--layout-ring);
    height: var(--layout-ring);
}
.site_wrapper > .theme_surface_frame :is(.theme_surface_frame_side_right, .theme_surface_frame_side_left) {
    top: var(--layout-ring);
    bottom: var(--layout-ring);
    width: var(--layout-ring);
}

/* Compact Persona badges reuse the canonical Theme frame artwork at badge
 scale. The shared badge renderer supplies this same frame to every consumer. */
/* Oct 1 2026 - her report (THEME ZONE wrappers overlapping their content):
 the frame here is already a correct direct child of this element (not
 the MINI/FULL bug pattern), but with no padding reserved its corners
 would still paint over the avatar/name underneath whenever it's
 visible. Unlike MINI/FULL/site_wrapper though, her explicit call for
 badges: don't give every badge sitewide a permanent padding tax for a
 zone nobody has configured artwork for yet - these sit in a lot of
 tight inline list rows (connections, chat participants, messages,
 directory) with zero spare height today. So --theme-zone-surface-frame-corner-size
 defaults to 0 here (was 0.875rem) - collapsing this padding to nothing
 until she actually sets up a themed badge frame. --surface-frame-side-
 thickness also defaults to 0 for the same reason (it only matters once
 corner-size is also real). Declared on THIS element (not the frame
 child below) so a plain custom-property inheritance down the DOM
 (.theme_surface_frame is a real child of .persona_list_badge) carries
 the same value both to this padding AND to the frame's own corner/
 border sizing - no duplicate declaration needed here, unlike the
 dialog-level fixes which had to duplicate the value because the var
 lived on a child the dialog isn't a descendant of.
 To turn a real badge frame on later: set a real
 --theme-zone-surface-frame-corner-size (and --theme-zone-surface-frame-side-thickness) HERE,
 on .persona_list_badge, at the same time as the image/color tokens -
 setting the images alone, without also raising corner-size off 0,
 will keep this collapsed with nothing visible no matter what the
 catalog's image tokens say. */
.persona_list_badge {
    padding: 0;
}

.persona_list_badge > .theme_surface_frame {
    opacity: 0;
}

.persona_list_badge:is(:hover, :focus-visible, :focus-within) > .theme_surface_frame {
    opacity: var(--theme-zone-surface-frame-opacity);
}

.persona_list_grid > .persona_compact_list_row > .persona_list_badge > .theme_surface_frame {
    inset: -0.1rem;
}

@media (max-width: 40rem) {
    .theme_surface_frame .theme_surface_frame_corner {
        width: 1.75rem;
        height: 1.75rem;
    }
    .theme_surface_frame :is(.theme_surface_frame_side_top, .theme_surface_frame_side_bottom) {
        right: 1.75rem;
        left: 1.75rem;
        height: 0.16rem;
    }
    .theme_surface_frame :is(.theme_surface_frame_side_right, .theme_surface_frame_side_left) {
        top: 1.75rem;
        bottom: 1.75rem;
        width: 0.16rem;
    }
    .site_wrapper > .theme_surface_frame .theme_surface_frame_corner {
        width: var(--layout-ring);
        height: var(--layout-ring);
    }
    .site_wrapper > .theme_surface_frame :is(.theme_surface_frame_side_top, .theme_surface_frame_side_bottom) {
        right: var(--layout-ring);
        left: var(--layout-ring);
        height: var(--layout-ring);
    }
    .site_wrapper > .theme_surface_frame :is(.theme_surface_frame_side_right, .theme_surface_frame_side_left) {
        top: var(--layout-ring);
        bottom: var(--layout-ring);
        width: var(--layout-ring);
    }
}

/* ==========================================================================
 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–767px — every phone size and iPad Mini portrait (all Mobile tiers plus 429–767) */
@media (max-width: 767px) {
    .feature_card, .content_card, .nested_card {
        min-width: 0;
        max-width: 100%;
    }
    .shared_datetime_metadata {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* 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) {
    .feature_card, .content_card, .nested_card {
        min-width: 0;
    }
}

/* 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) {
    .feature_card, .content_card, .nested_card {
        min-width: 0;
        max-width: 100%;
    }
}

/* Oct 14 2026 - her ruling: a card's header bar and footer bar wear the header/footer colors; nested cards have their own color. */
.feature_wrapper > .content_action_bar {
    background-color: transparent;
    border-color: var(--feature-card-header-border-color);
    color: var(--feature-card-header-text-color);
}

.feature_wrapper > .content_action_bar.page_content_bottom_actions {
    background-color: color-mix(in srgb, var(--feature-card-footer-background-color) calc(var(--feature-card-footer-background-color-opacity, 1) * 100%), transparent);
    background-image: var(--feature-card-footer-background-image), var(--feature-card-footer-background-gradient);
    background-repeat: var(--feature-card-footer-background-repeat), var(--feature-card-footer-background-repeat);
    box-shadow: var(--feature-card-footer-shadow);
    border-color: var(--feature-card-footer-border-color);
    color: var(--feature-card-footer-text-color);
}

/* Oct 16 2026 - her ruling: a card's header (.card_header, was .content_action_bar on cards) wears the secondary* settings. */
.feature_wrapper > .card_header {
    background-color: color-mix(in srgb, var(--feature-card-header-background-color) calc(var(--feature-card-header-background-color-opacity, 1) * 100%), transparent);
    background-image: var(--feature-card-header-background-image), var(--feature-card-header-background-gradient);
    background-repeat: var(--feature-card-header-background-repeat), var(--feature-card-header-background-repeat);
    box-shadow: var(--feature-card-header-shadow);
    border-color: var(--feature-card-header-border-color);
    color: var(--feature-card-header-text-color);
}

.feature_wrapper > .card_header > :is(h1, h2, h3) {
    color: var(--feature-card-header-text-color);
}

.nested_card {
    background-color: color-mix(in srgb, var(--nested-card-background-color) calc(var(--nested-card-background-color-opacity, 1) * 100%), transparent);
    background-image: var(--nested-card-background-image), var(--nested-card-background-gradient);
    background-repeat: var(--nested-card-background-repeat), var(--nested-card-background-repeat);
    box-shadow: var(--nested-card-shadow);
    border-color: var(--nested-card-border-color);
    color: var(--nested-card-text-color);
}