/* 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. */
/* Widget base (moved from new_base_aesthetics.css; kept first so this file's own rules still win ties) */
/* widgets, cards and popups have NO ring of their own any more: they are plain boxes (their normal background,... */
.public_widget, .widget_card {
    --zone-t: calc(10px * var(--layout-theme-zone-scale, 1));
}

/* The widget body is the scroller, so its ring is painted as the element's own background (a background does... */
.public_widget_content, .widget_content {
    --zone-ring-mode: overlay;
    --zone-ring-id: widget-body;
}

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

.public_widget_content, .widget_content, .theme_zone_ring[data-zone-id="widget-body"] {
    --zone-t: calc(10px * var(--layout-theme-zone-scale, 1));
    --zone-top-left-corner-img: var(--theme-zone-widget-body-top-left-corner-background-image, none);
    --zone-top-left-corner-clr: var(--theme-zone-widget-body-top-left-corner-background-color, transparent);
    --zone-top-left-corner-img-opacity: var(--theme-zone-widget-body-top-left-corner-background-image-opacity, 1);
    --zone-top-left-corner-clr-opacity: var(--theme-zone-widget-body-top-left-corner-background-color-opacity, 1);
    --zone-top-left-corner-inner-glow: var(--theme-zone-widget-body-top-left-corner-inner-glow, none);
    --zone-top-left-corner-outer-glow: var(--theme-zone-widget-body-top-left-corner-outer-glow, none);
    --zone-top-left-corner-shadow: var(--theme-zone-widget-body-top-left-corner-shadow, none);
    --zone-top-right-corner-img: var(--theme-zone-widget-body-top-right-corner-background-image, none);
    --zone-top-right-corner-clr: var(--theme-zone-widget-body-top-right-corner-background-color, transparent);
    --zone-top-right-corner-img-opacity: var(--theme-zone-widget-body-top-right-corner-background-image-opacity, 1);
    --zone-top-right-corner-clr-opacity: var(--theme-zone-widget-body-top-right-corner-background-color-opacity, 1);
    --zone-top-right-corner-inner-glow: var(--theme-zone-widget-body-top-right-corner-inner-glow, none);
    --zone-top-right-corner-outer-glow: var(--theme-zone-widget-body-top-right-corner-outer-glow, none);
    --zone-top-right-corner-shadow: var(--theme-zone-widget-body-top-right-corner-shadow, none);
    --zone-bottom-left-corner-img: var(--theme-zone-widget-body-bottom-left-corner-background-image, none);
    --zone-bottom-left-corner-clr: var(--theme-zone-widget-body-bottom-left-corner-background-color, transparent);
    --zone-bottom-left-corner-img-opacity: var(--theme-zone-widget-body-bottom-left-corner-background-image-opacity, 1);
    --zone-bottom-left-corner-clr-opacity: var(--theme-zone-widget-body-bottom-left-corner-background-color-opacity, 1);
    --zone-bottom-left-corner-inner-glow: var(--theme-zone-widget-body-bottom-left-corner-inner-glow, none);
    --zone-bottom-left-corner-outer-glow: var(--theme-zone-widget-body-bottom-left-corner-outer-glow, none);
    --zone-bottom-left-corner-shadow: var(--theme-zone-widget-body-bottom-left-corner-shadow, none);
    --zone-bottom-right-corner-img: var(--theme-zone-widget-body-bottom-right-corner-background-image, none);
    --zone-bottom-right-corner-clr: var(--theme-zone-widget-body-bottom-right-corner-background-color, transparent);
    --zone-bottom-right-corner-img-opacity: var(--theme-zone-widget-body-bottom-right-corner-background-image-opacity, 1);
    --zone-bottom-right-corner-clr-opacity: var(--theme-zone-widget-body-bottom-right-corner-background-color-opacity, 1);
    --zone-bottom-right-corner-inner-glow: var(--theme-zone-widget-body-bottom-right-corner-inner-glow, none);
    --zone-bottom-right-corner-outer-glow: var(--theme-zone-widget-body-bottom-right-corner-outer-glow, none);
    --zone-bottom-right-corner-shadow: var(--theme-zone-widget-body-bottom-right-corner-shadow, none);
    --zone-top-border-img: var(--theme-zone-widget-body-top-border-background-image, none);
    --zone-top-border-clr: var(--theme-zone-widget-body-top-border-background-color, transparent);
    --zone-top-border-img-opacity: var(--theme-zone-widget-body-top-border-background-image-opacity, 1);
    --zone-top-border-clr-opacity: var(--theme-zone-widget-body-top-border-background-color-opacity, 1);
    --zone-top-border-inner-glow: var(--theme-zone-widget-body-top-border-inner-glow, none);
    --zone-top-border-outer-glow: var(--theme-zone-widget-body-top-border-outer-glow, none);
    --zone-top-border-shadow: var(--theme-zone-widget-body-top-border-shadow, none);
    --zone-right-border-img: var(--theme-zone-widget-body-right-border-background-image, none);
    --zone-right-border-clr: var(--theme-zone-widget-body-right-border-background-color, transparent);
    --zone-right-border-img-opacity: var(--theme-zone-widget-body-right-border-background-image-opacity, 1);
    --zone-right-border-clr-opacity: var(--theme-zone-widget-body-right-border-background-color-opacity, 1);
    --zone-right-border-inner-glow: var(--theme-zone-widget-body-right-border-inner-glow, none);
    --zone-right-border-outer-glow: var(--theme-zone-widget-body-right-border-outer-glow, none);
    --zone-right-border-shadow: var(--theme-zone-widget-body-right-border-shadow, none);
    --zone-bottom-border-img: var(--theme-zone-widget-body-bottom-border-background-image, none);
    --zone-bottom-border-clr: var(--theme-zone-widget-body-bottom-border-background-color, transparent);
    --zone-bottom-border-img-opacity: var(--theme-zone-widget-body-bottom-border-background-image-opacity, 1);
    --zone-bottom-border-clr-opacity: var(--theme-zone-widget-body-bottom-border-background-color-opacity, 1);
    --zone-bottom-border-inner-glow: var(--theme-zone-widget-body-bottom-border-inner-glow, none);
    --zone-bottom-border-outer-glow: var(--theme-zone-widget-body-bottom-border-outer-glow, none);
    --zone-bottom-border-shadow: var(--theme-zone-widget-body-bottom-border-shadow, none);
    --zone-left-border-img: var(--theme-zone-widget-body-left-border-background-image, none);
    --zone-left-border-clr: var(--theme-zone-widget-body-left-border-background-color, transparent);
    --zone-left-border-img-opacity: var(--theme-zone-widget-body-left-border-background-image-opacity, 1);
    --zone-left-border-clr-opacity: var(--theme-zone-widget-body-left-border-background-color-opacity, 1);
    --zone-left-border-inner-glow: var(--theme-zone-widget-body-left-border-inner-glow, none);
    --zone-left-border-outer-glow: var(--theme-zone-widget-body-left-border-outer-glow, none);
    --zone-left-border-shadow: var(--theme-zone-widget-body-left-border-shadow, none);
}

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

/* THEME ZONES, spacing PART 5 (Q200: rings never overlap). A ring is drawn OUTSIDE its part, so each part needs... */
:where(.public_widget_content, .widget_content) {
    /* widget body: its own inside-edge ring (1 thickness) + room for the children's rings (1 thickness) +... */
    padding: calc(2 * var(--zone-t) + var(--layout-theme-zone-pad, 0px));
}

/** YUSASO Teal Widget presentation.
 *  Widget headers own typography; their HTML heading level does not alter it.
 */
/* ==========================================================================
 Standard Widget
 ========================================================================== */
.public_widget, .widget_card {
    color: var(--widget-text, var(--page-card-text));
    background-color: color-mix(in srgb, var(--widget-background-color) calc(var(--widget-background-color-opacity, 1) * 100%), transparent);
    background-image: var(--widget-wrapper-background-image), var(--widget-wrapper-background-gradient);
    background-repeat: var(--widget-wrapper-background-repeat), var(--widget-wrapper-background-repeat);
    box-shadow: var(--widget-wrapper-shadow);
    border: 0px solid var(--widget-border-color) !important;
    border-radius:var(--radius-large);
}

details.public_widget:not([open])>.theme_surface_frame {
    display:block
}

/* ==========================================================================
 Widget Header
 ========================================================================== */
/* Oct 5 2026 - Issue #52: `a` added to the header element list below (and in the
 mobile size rule) so a widget header rendered as a link (static_header_template.php
 header_link) gets this exact same header look instead of a bare inline link. */
:is(.public_widget, .widget_card) > :is(summary, header, a, h1, h2, h3):is(.public_widget_header, .widget_header) {
    display: flex !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 2.75rem !important;
    min-height: 2.75rem !important;
    max-height: 2.75rem !important;
    margin: 0 !important /* Oct 10 2026 #385 - no gap between a widget header and its content; the content padding supplies the breathing room (was one ring thickness, which showed as a bar) */;
    padding: max(0.45rem, calc(var(--zone-t, 0px) + var(--layout-theme-zone-pad, 0px))) max(0.65rem, calc(var(--zone-t, 0px) + var(--layout-theme-zone-pad, 0px))) !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: max(0.5rem, calc(2 * var(--zone-t, 0px))) !important;
    overflow: hidden !important;
    color: var(--widget-header-text-color, var(--yusaso-blue)) !important;
    background-color: color-mix(in srgb, var(--widget-header-background-color) calc(var(--widget-header-background-color-opacity, 1) * 100%), transparent) !important;
    background-image: var(--widget-header-background-image), var(--widget-header-background-gradient);
    background-repeat: var(--widget-header-background-repeat), var(--widget-header-background-repeat);
    box-shadow: var(--widget-header-shadow);
    border: 0 !important;
    text-decoration: none !important;
}

/* Standalone controls may intentionally use the canonical widget-header presentation. */
button.public_widget_header_action {
    height: 2.75rem;
    min-height: 2.75rem;
    max-height: 2.75rem;
    padding: 0.45rem 0.65rem;
    color: var(--widget-header-text-color, var(--yusaso-blue));
    background-color: color-mix(in srgb, var(--widget-header-background-color) calc(var(--widget-header-background-color-opacity, 1) * 100%), transparent);
    background-image: var(--widget-header-background-image), var(--widget-header-background-gradient);
    background-repeat: var(--widget-header-background-repeat), var(--widget-header-background-repeat);
    border: 0;
    border-bottom: 1px solid var(--widget-header-border-color);
    border-radius: var(--radius-none);
    text-decoration: none;
}

:is(summary.public_widget_header, summary.widget_header) {
    list-style: none !important;
}

/* ==========================================================================
 Widget Title
 ========================================================================== */
:is(.public_widget, .widget_card) > :is(.public_widget_header, .widget_header) > :is(h1, h2, h3, .public_widget_title, .widget_title), button.public_widget_header_action > .public_widget_title, .quick_post > h2 {
    display: block !important;
    box-sizing: border-box !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: var(--widget-header-text-color, var(--yusaso-blue)) !important;
    background: transparent !important;
    border: 0 !important;
    text-align: left !important;
    text-decoration: none !important;
    text-indent: 0 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* ==========================================================================
 Widget Toggle
 ========================================================================== */
:is(summary.public_widget_header, summary.widget_header):not(:has(> :is(.public_widget_toggle, .widget_toggle)))::after {
    content: "▴";
    /* Oct 10 2026 - open widget = arrow up */
    display: grid;
    flex: 0 0 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    margin-left: auto;
    place-items: center;
    color: var(--widget-header-text-color, var(--yusaso-blue)) !important;
}

details:not([open]) > :is(summary.public_widget_header, summary.widget_header):not(:has(> :is(.public_widget_toggle, .widget_toggle)))::after {
    content: "▾";
    /* Oct 10 2026 - closed widget = arrow down */
}

:is(.public_widget, .widget_card) > :is(.public_widget_header, .widget_header) :is(.public_widget_toggle, .widget_toggle) {
    flex: 0 0 1.5rem !important;
    width: 1.5rem !important;
    min-width: 1.5rem !important;
    max-width: 1.5rem !important;
    height: 1.5rem !important;
    min-height: 1.5rem !important;
    max-height: 1.5rem !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    color: var(--widget-header-text-color, var(--yusaso-blue)) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 50%;
}

:is(.public_widget_toggle, .widget_toggle) {
    position: relative;
    display: grid;
    box-sizing: border-box;
    place-items: center;
    /* Oct 10 2026 - the arrow is the same size as the widget header title (the header sets that size) */
}

.public_widget_arrow_closed, .public_widget:not([open]) .public_widget_arrow_open, .widget_card[aria-expanded="false"] .public_widget_arrow_open {
    display: none;
}

/* ==========================================================================
 Widget Content
 ========================================================================== */
:is(.public_widget, .widget_card) > :is(.public_widget_content, .widget_content) {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: max(0.75rem, calc(2 * var(--zone-t, 0px) + var(--layout-theme-zone-pad, 0px))) !important;
    color: var(--primary-font-color);
    text-align: left;
    /* Background is owned by the shared Widget and Persona Viewer surface in cards.css. */
    border: 0 !important;
}

/* Oct 10 2026 #384 - every widget body reserves a scrollbar gutter on its right (scrollbar-gutter: stable); the left side gets the same width on top of its normal padding so content sits centred. Widgets with their own padding rules below (tab menus) are unaffected. */
:is(.public_widget, .widget_card) > :is(.public_widget_content, .widget_content) {
    padding-left: calc(max(0.75rem, calc(2 * var(--zone-t, 0px) + var(--layout-theme-zone-pad, 0px))) + 0.65rem) !important;
}

/* Oct 10 2026 #387 - a collapsed widget shows only its header: the ring clearance under the header and the widget's bottom padding are for the body, so both go while it is closed. */
details.public_widget:not([open]) {
    padding-block-end: 0;
}

details.public_widget:not([open]) > :is(.public_widget_header, .widget_header) {
    margin-bottom: 0 !important;
}

:is(.public_widget_content, .widget_content) h2 {
    color: var(--widget-heading-text, var(--widget-content-text, var(--page-card-text)));
}

:is(.public_widget_content, .widget_content) > h2:first-child {
    margin-top: 0;
}

/* Oct 13 2026 - her request (Q830, Q832): widget text links use the global link tokens; the forced !important body color is gone so a widget header link can still style itself. */
/* ==========================================================================
 Widget Visibility
 ========================================================================== */
/* ==========================================================================
 Widget Form Controls
 ========================================================================== */
:is(.public_widget, .widget_card) > :is(.public_widget_content, .widget_content) :is( input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="reset"]):not([type="button"]):not([type="image"]):not([type="range"]):not([type="color"]), select, textarea ) {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

:is(.public_widget, .widget_card) :is( input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], input[type="number"] ) {
    width: min(100%, var(--widget-control-small-width));
    max-width: var(--widget-control-small-width);
}

:is(.public_widget, .widget_card) > :is(.public_widget_content, .widget_content) :is( input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="url"], input[type="tel"], input[type="file"], select ) {
    width: 100%;
    max-width: 100%;
}

:is(.public_widget, .widget_card) textarea {
    width: 100%;
    max-width: 100%;
}

:is(.public_widget, .widget_card) input[type="file"] {
    width: 100% !important;
    max-width: 100% !important;
    height: 2.45rem !important;
    min-height: 2.45rem !important;
    max-height: 2.45rem !important;
    padding: 0.2rem !important;
}

:is(.public_widget, .widget_card) input[type="file"]::file-selector-button {
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    margin-inline-end: 0.45rem !important;
    padding: 0.35rem 0.55rem !important;
}

/* Sept 26 2026 - her direct instructions for the "Search Communities"/
 "Join a Room" left-rail widgets (communities_page_widgets.php):
 1) shrink their input/select one size down from the generic widget
 rule above (which stretches every control to the widget's full
 content width) to the same --widget-control-small-width already
 used for date/number inputs in every widget.
 2) right-align each form's submit button (.standard_right class, same
 as everywhere else on the site).
 Scoped to these two widgets by id so nothing else is affected - an id
 selector outweighs the class-only rules above/below it, which is what
 lets both overrides win despite the generic rules' own !important. */
/* Oct 10 2026 #390/#391 - her request: the textbox (or dropdown) is wider - it fills the row - and stays inline with its button; the button keeps its size. Communities forms never wrap; the connections form may wrap its persona-type select and Clear button underneath. */
#communities-search-widget input[type="search"], #communities-join-room-widget select, #connections-search-widget input[type="search"] {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: none;
}

#communities-search-widget form, #communities-join-room-widget form, #connections-search-widget form {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--standard-button-gap, 0.4rem);
}

#connections-search-widget form {
    flex-wrap: wrap;
}

/* ==========================================================================
 Date-Range Controls
 ========================================================================== */
.widget_date_range, .widget_date_range_rows, .persona_date_filter_rows {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    margin: 0;
    gap: 0.65rem;
}

/* Platform widgets.css owns shared Widget action-bar geometry and alignment. */
/* ==========================================================================
 Advertisement Widget
 ========================================================================== */
.widget_advertisement_placement {
    color: var(--advertisement-text, var(--page-muted-text));
    background: var(--advertisement-background);
    border-color: var(--advertisement-border);
}

/* ==========================================================================
 Widget Navigation
 ========================================================================== */
.widget_navigation_button {
    color: var(--primary-font-color);
    background: transparent;
    border: 0;
    border-radius: var(--widget-navigation-radius, var(--radius-large));
    text-decoration: none !important;
}

.widget_navigation_submenu_button {
    color: var(--primary-font-color);
    background: transparent !important;
    border-radius: var(--radius-none) !important;
    text-decoration: none !important;
}

/* RETIRED 2026-08-30: the nested-menu rail positioned against the Widget
 * instead of an individual link and produced a full-height vertical line. */
.widget_navigation_button:is(:hover, :focus-visible, [aria-current="page"], [aria-selected="true"], .is_selected) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.widget_navigation_submenu_button:is(:hover, :focus-visible) {
    background: var(--widget-navigation-hover-background, transparent) !important;
}

/* Component-specific Widget presentation remains centralized here. */
:is(.post_composer_menu_widget, .post_composer_guide_widget) {
    border-width: 0 !important;
    box-shadow: none;
}

:is(.post_composer_menu_widget, .post_composer_guide_widget) > .public_widget_header {
    border-bottom-width: 0 !important;
}

.persona_identity_widget_avatar {
    border-radius: var(--radius-none);
}

.persona_identity_widget_names > span {
    color: var(--form-helper-color);
}

.widget_connections_search .connections_filter.connections_filter_compact {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 0.45rem;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0 0 1rem;
    padding: 0;
    color: inherit;
    background: transparent;
    background-image: none;
    border: 0;
    border-radius: var(--radius-none);
    box-shadow: none;
}

/* Oct 18 2026 - her request: the search box and the Persona Type dropdown each take the full width of the widget on their own row and share the standard input style. Lives here (global) so it does not depend on connections.css being registered for the page. */
.widget_connections_search .connections_filter.connections_filter_compact :is(input[type="search"], select) {
    grid-column: 1 / -1;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: none;
}

:is(.dm_workspace_connections, #chat-participants-panel) .public_widget_content {
    background-color: transparent !important;
    border: 0 !important;
}

:is(.public_widget.messaging_chat_options_widget, .calls_room) .messaging_chat_option_control {
    color: inherit;
    background: transparent;
    background-image: none;
    border: 0;
    border-radius: var(--radius-none);
    box-shadow: none;
}

:is(.public_widget.messaging_chat_options_widget, .calls_room) .messaging_chat_option_control:disabled, :is(.public_widget.messaging_chat_options_widget, .calls_room) .messaging_chat_option_control:disabled + .messaging_chat_option_name {
    color: var(--page-muted-text);
}

/* Sept 17 2026 - relocated from modules/messages/messages/assets/css/
 private_chat_page.css: call.php now reuses .messaging_chat_options for
 its own action-bar controls (previously a generic .public_form_table_grid),
 making this class genuinely shared between the messages and calls
 modules - per standing convention, a shared class's rules (color and
 geometry) live together in the theme file, not a single module's own
 stylesheet. Pure relocation - same rules, reformatted to this file's
 4-space style only. No visual/behavioral change on messages.php. */
.messaging_chat_options {
    display: grid;
    grid-template-columns: 1.5rem minmax(0,1fr);
    grid-auto-rows: minmax(1.5rem,auto);
    min-width: 0;
    column-gap: 2ch;
    row-gap: .25rem;
    align-items: center;
}

.messaging_chat_option_dynamic {
    display: contents;
}

/* Previous combined preference-form selector retained for rollback.
 .messaging_fancy_posts_preference,
 .messaging_playback_settings {
 display: grid;
 gap: 0.3rem;
 margin: 0;
 }
 */
.messaging_fancy_posts_preference {
    display: contents;
    margin: 0;
}

:is(.public_widget.messaging_chat_options_widget, .calls_room) .messaging_chat_option_control {
    grid-column: 1;
    display: inline-grid;
    inline-size: 1.5rem;
    min-inline-size: 1.5rem;
    block-size: 1.5rem;
    margin: 0;
    padding: 0;
    place-items: center;
    /* Oct 9 2026 - her request: the Disable Fancy Posts checkbox sits centered in its glyph column (it hugged the left edge of the column). Buttons already fill the column, so centering changes nothing for them. */
    justify-self: center;
}

:is(.public_widget.messaging_chat_options_widget, .calls_room) input[type="checkbox"].messaging_chat_option_control {
    align-self: center;
}

/* Dynamic Call controls remain direct children of the shared two-column
 options grid and disappear as complete control/name pairs. */
[data-messaging-call-controls] > [hidden] {
    display: none !important;
}

:is(.public_widget.messaging_chat_options_widget, .calls_room) .messaging_chat_option_control:disabled, :is(.public_widget.messaging_chat_options_widget, .calls_room) .messaging_chat_option_control:disabled + .messaging_chat_option_name {
    cursor: not-allowed;
}

.messaging_chat_option_name {
    grid-column: 2;
    min-width: 0;
    justify-self: start;
    text-align: left;
}

/* Active Chat Options are clickable; unavailable controls remain clearly disabled. */
:is(.public_widget.messaging_chat_options_widget, .calls_room) .messaging_chat_option_control:not(:disabled), :is(.public_widget.messaging_chat_options_widget, .calls_room) .messaging_chat_option_control:not(:disabled) + .messaging_chat_option_name, :is(.public_widget.messaging_chat_options_widget, .calls_room) .messaging_fancy_posts_preference :is(input,label) {
    cursor: pointer;
}

.widget_communication_recipient_chooser .communication_circle_connection_choice {
    color: inherit;
    background: transparent !important;
    border: 1px solid var(--page-divider-color);
}

.widget_communication_recipient_chooser .communication_circle_connection_choice:is(:hover, [aria-pressed="true"]) {
    background: var(--navigation-hover-background-color) !important;
}

.widget_recipient_chooser :is(.communication_specific_connection_choices, .connection_compact_list) {
    border: 0 !important;
}

.widget_recipient_chooser .communication_circle_connection_choice {
    border: 0 !important;
    border-bottom: 1px solid var(--page-divider-color) !important;
    border-radius: var(--radius-none) !important;
}

:is(.public_widget, .widget_card, .widget_page_navigation, .platform_page_menu) :is( .platform_page_menu_items, .widget_navigation_list, .public_widget_content, .widget_content ) {
    border-bottom: 0 !important;
    border-block-end: 0 !important;
}

.widget_page_navigation :is(.public_widget_content, .widget_content), .widget_page_navigation nav {
    display: grid;
    min-width: 0;
    gap: max(0.35rem, calc(2 * var(--zone-t, 0px)));
}

/* RETIRED 2026-08-28: page-menu renderers no longer emit widget_navigation_icon.
 .widget_navigation_icon {
 display: inline-grid;
 box-sizing: border-box;
 flex: 0 0 1em;
 width: 1em;
 height: 1em;
 place-items: center;
 font-size: 1em;
 font-style: normal;
 font-weight: 400;
 line-height: 1;
 }
 */
/* ==========================================================================
 Horizontal Page Navigation
 ========================================================================== */
.widget_presentation_horizontal_tabs, .horizontal_page_tab_menu {
    display: block !important;
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
    margin: 0 0 1rem;
    padding: 0;
    overflow: hidden !important;
    border: 0 !important;
    box-shadow: none !important;
}

:is(.widget_presentation_horizontal_tabs, .horizontal_page_tab_menu) > :is(.public_widget_header, .widget_header) {
    display: none !important;
}

:is(.widget_presentation_horizontal_tabs, .horizontal_page_tab_menu) > :is(.public_widget_content, .widget_content) {
    padding: max(0px, calc(2 * var(--zone-t, 0px) + var(--layout-theme-zone-pad, 0px))) !important;
    overflow: hidden !important;
}

:is(.widget_presentation_horizontal_tabs, .horizontal_page_tab_menu) .platform_page_menu_items {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 0.2rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    white-space: nowrap !important;
}

:is(.widget_presentation_horizontal_tabs, .horizontal_page_tab_menu) .widget_navigation_button {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    padding: 0.35rem 0.5rem !important;
    justify-content: center !important;
    white-space: nowrap !important;
}

.public_widget.platform_page_menu .platform_page_menu_items > .widget_navigation_button {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: var(--radius-none) !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* RETIRED 2026-08-30: nested page-menu geometry is owned by the shared
 * platform Widget stylesheet so every Theme and page uses one hierarchy. */
/* ==========================================================================
 Vertical Page-Navigation Widget
 ========================================================================== */
.public_widget.widget_page_navigation:not(.widget_presentation_horizontal_tabs):not(.persona_profile_tab_widget) .platform_page_menu_items > .widget_navigation_button {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: var(--radius-none) !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* ==========================================================================
 Persona Tab Widget
 Applies independently to persona.php and the Persona full-view dialog.
 ========================================================================== */
:is( .persona_profile_page, .persona_full_view_dialog ) .public_widget.widget_page_navigation.persona_profile_tab_widget {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    box-shadow: none !important;
}

:is( .persona_profile_page, .persona_full_view_dialog ) .public_widget.widget_page_navigation.persona_profile_tab_widget > :is(.public_widget_header, .widget_header) {
    display: none !important;
}

:is( .persona_profile_page, .persona_full_view_dialog ) .public_widget.widget_page_navigation.persona_profile_tab_widget > :is(.public_widget_content, .widget_content) {
    padding: max(0px, calc(2 * var(--zone-t, 0px) + var(--layout-theme-zone-pad, 0px))) !important;
    overflow: hidden !important;
}

:is( .persona_profile_page, .persona_full_view_dialog ) .public_widget.widget_page_navigation.persona_profile_tab_widget .platform_page_menu_items {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: nowrap !important;
    gap: 0.15rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border: 0 !important;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    white-space: nowrap !important;
}

.persona_profile_page .public_widget.widget_page_navigation.persona_profile_tab_widget, .persona_profile_page .public_widget.widget_page_navigation.persona_profile_tab_widget .platform_page_menu_items {
    background-color: var(--primary-color);
    background-image: none;
}

/* The widget body paints its own theme-zone ring as a background image (new_base_aesthetics.css), so only its color is set here. */
.persona_profile_page .public_widget.widget_page_navigation.persona_profile_tab_widget > :is(.public_widget_content, .widget_content) {
    background-color: var(--primary-color);
}

.persona_full_view_dialog .public_widget.widget_page_navigation.persona_profile_tab_widget, .persona_full_view_dialog .public_widget.widget_page_navigation.persona_profile_tab_widget > :is(.public_widget_content, .widget_content), .persona_full_view_dialog .public_widget.widget_page_navigation.persona_profile_tab_widget .platform_page_menu_items {
    background-color: color-mix(in srgb, var(--primary-color) 40%, transparent);
}

:is( .persona_profile_page, .persona_full_view_dialog ) .public_widget.widget_page_navigation.persona_profile_tab_widget .platform_page_menu_items > .widget_navigation_button {
    display: flex !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    min-height: 2rem !important;
    padding: 0.3rem 0.4rem !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
}

/* Widget containment must preserve the approved compact date-part sizes. */
:is(.public_widget,.widget_card) select.date_part_month_control, :is(.public_widget,.widget_card) select.date_part_day_control {
    flex: 0 0 4.5rem;
    width: 4.5rem;
    min-width: 4.5rem;
    max-width: 4.5rem;
}

:is(.public_widget,.widget_card) select.date_part_year_control {
    flex: 0 0 6rem;
    width: 6rem;
    min-width: 6rem;
    max-width: 6rem;
}

/* ==========================================================================
 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–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) {
    .public_widget_title, .quick_post > h2 {
        white-space: normal !important;
    }
}

/* 320–767px — every phone size and iPad Mini portrait (all Mobile tiers plus 429–767) */
@media (max-width: 767px) {
    .public_widget {
        min-width: 0;
        max-width: 100%;
    }
}

/* Oct 14 2026 - her ruling: widget footers wear the footer colors (header, content and footer each have their own catalog token). */
:is(.public_widget, .widget_card) > :is(.public_widget_footer, .widget_footer) {
    background-color: color-mix(in srgb, var(--widget-footer-background-color) calc(var(--widget-footer-background-color-opacity, 1) * 100%), transparent);
    background-image: var(--widget-footer-background-image), var(--widget-footer-background-gradient);
    background-repeat: var(--widget-footer-background-repeat), var(--widget-footer-background-repeat);
    box-shadow: var(--widget-footer-shadow);
    border-color: var(--widget-footer-border-color);
    color: var(--widget-footer-text-color);
}