/**
 * Yusaso Platform — public page layout geometry.
 *
 * This file owns column grids, rail positioning, layout gaps, and responsive
 * stacking. Widgets own only the content placed inside these regions.
 */

main.content {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: none;
    /* Oct 10 2026 #398 - was calc(100vh - 15rem), a guess at header + footer. The real header height (kept live by header.js) and the footer tokens decide how tall the content area is, so a short page fills the window exactly and its footer sits at the bottom of the viewport. */
    min-height: calc(100dvh - var(--sticky-site-header-height, var(--public-shell-header-height, 0px)) - var(--site-footer-height, 35px) - var(--site-footer-gap, 20px));
    align-content: start;
    padding: 0 15px;
}

/* Every normal page uses one explicit content surface. Physical layout
   templates own this wrapper; pages and feature styles must not recreate it. */
.page_content_wrapper {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: 0; /* Oct 10 2026 #398 - was calc(100vh - 18rem); main.content above already fills the window, and a second guess on top of it could only push the footer down */
    overflow: visible;
}

/* Public introductions live inside the content column so messages, headings,
   descriptions and top actions participate in the same responsive flow. */
.public_page_intro {
    display: grid;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding-top: 1rem;
    grid-template-columns: minmax(0, 1fr);
}

.public_page_intro_column {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

.public_page_intro > .public_page_intro_column {
    grid-column: 1;
}

/* RETIRED 2026-08-29: page introductions formerly recreated the outer
   two- and three-column tracks above the physical layout. */

/* Oct 1 2026 - her direct instruction, paired with raising
   --site-wrapper-max-width to 120rem (header.css/css_catalog.css): rails
   stay fixed at their existing 20rem, the center column was switched
   from fully flexible (minmax(0,1fr)) to a FIXED 42.25rem (see this
   file's git history/the memory tracking file for the derivation), with
   column-gap as a calc() meant to absorb whatever space was left.
   Oct 1 2026 (same day, 2nd pass) - her live-test report: "gutters not
   picking up spacing" / rails too close to center, "shrinking the
   screen is not responding/resizing cols correctly," "no longer working
   as responsive flex," plus a screenshot showing real horizontal
   overflow (header/nav cut off, content shifted left). Root cause: with
   BOTH rails (20rem each) and the center column now fixed, this grid's
   total track width is a hard 82.25rem no matter the viewport - between
   the full desktop width and this layout's own stacking breakpoint
   (@media max-width:87.5rem, further down this file), NOTHING in the
   grid actually resizes except column-gap, and that formula's "100%" is
   the grid's own content-box width (viewport minus .site_wrapper's
   padding minus main.content's padding) - well before the 87.5rem
   viewport breakpoint fires, that content-box width drops below the
   82.25rem the fixed tracks need, column-gap goes negative (clamped to
   0 by the browser), and the fixed tracks keep demanding 82.25rem+
   regardless, overflowing the viewport - exactly the cut-off/shifted
   screenshot. A fixed center column simply can't be responsive across
   that whole range by itself; reverted the center column back to
   minmax(0,1fr) (fully fluid, matches every other page's established
   behavior and what she's now asking for) and column-gap back to its
   original flat 1.875rem (no longer needs to be a formula once nothing
   else in the row is fixed-total). Rails stay at 20rem, unchanged - the
   120rem --site-wrapper-max-width raise is untouched too (a wider cap on
   a fluid center column is harmless on its own; it was only paired with
   the fixed-width center column, which is what's reverted here). */
.public_three_column_layout {
    position: relative;
    display: grid;
    /* Oct 2 2026 - her direct instruction: full screen keeps the rails at
       their actual 20rem width (no change there); narrow/tablet/mobile
       should scale the rails DOWN instead of leaving them rigid, which is
       what forced the center column (and, in header_condensed.css, the
       condensed nav row sharing this same column math) too narrow between
       this layout's own collapse-to-single-column point (<=50rem, a
       separate mechanism, untouched) and full desktop width. clamp()'s
       preferred value (18vw) shrinks smoothly as the viewport narrows,
       floors at 12rem so a rail never gets unusably thin, and ceilings at
       20rem so nothing changes at full desktop width - matches her "full
       screen shows actual width" instruction exactly. Kept in sync with
       the 2 other places this same grid is duplicated per the Oct 1
       center-column-width fix: private_chat_page.css's
       .messaging_private_chat_layout (both themes) and
       header_condensed.css's >=50.0625rem rail columns (both themes). */
    grid-template-columns: var(--layout-rail-width, 20rem) minmax(0, 1fr) var(--layout-rail-width, 20rem);
    align-items: start;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    transform: none;
    column-gap: 1.875rem;
    row-gap: 1.875rem;
}

/* Oct 6 2026 - her request: on full-width desktop the center column is 820px (--layout-center-column-width in the theme's css_catalog.css) and the space it
   gives up goes into the gutters on either side of it (space-between spreads the leftover between the rails and the center column), so the gap between
   the rails and the center column is wider. minmax(0, 820px) means the column still shrinks if the screen is narrower than the three tracks need (no
   overflow, unlike the Oct 1 fixed-width attempt). Frozen communication workspaces and the two-column layout keep their own tracks. */
@media (min-width: 87.501rem) {
    .public_three_column_layout:not(.public_two_column_layout):not(.public_frozen_three_column_layout) {
        grid-template-columns: var(--layout-rail-width, 20rem) minmax(0, var(--layout-center-column-width, 820px)) var(--layout-rail-width, 20rem);
        justify-content: space-between;
    }
}

/* Decorative Theme frames belong to the layout surface, not a grid track.
   Keep the shared frame out of flow even when a Theme provides no frame art. */
.public_three_column_layout > .theme_surface_frame {
    position: absolute;
    inset: 0;
}

.public_three_column_layout > * {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    justify-self: stretch;
}

/* Desktop spacing below the shared navigation belongs to the page surface,
   not to an optional center-column introduction. This gives every physical
   layout the same starting line before any page content is loaded. */
@media (min-width: 87.501rem) {
    .page_content_wrapper {
        padding-block-start: 1rem;
    }

    .page_content_wrapper .public_page_intro {
        padding-block-start: 0;
    }
}

.public_single_column_layout {
    position: relative;
    display: grid;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

.public_single_column_layout > .theme_surface_frame {
    position: absolute;
    inset: 0;
}

.public_single_column_center {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

.public_three_column_layout.public_two_column_layout {
    grid-template-columns: minmax(0, 1fr) var(--layout-rail-width, 20rem);
}

.public_three_column_layout.public_two_column_layout > .public_two_column_main {
    grid-column: 1;
    display: grid;
    min-width: 0;
    gap: 1rem;
}

.public_two_column_leading_widgets {
    display: grid;
    min-width: 0;
    gap: 1rem;
}

.public_responsive_widget_controls {
    display: none;
}

.public_three_column_layout.public_two_column_layout > .public_three_column_right {
    grid-column: 2;
}

.public_three_column_left {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}

.public_three_column_layout > .public_three_column_center,
.public_three_column_center {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

.public_three_column_right {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
}

.public_three_column_left,
.public_three_column_right {
    display: grid;
    align-self: start;
    margin-block-start: 0;
    padding-block-start: 0;
    gap: 1rem;
}

/* Advertisement placement is stable regardless of which database-generated
   menus or page widgets are also assigned to a rail. */
.public_three_column_left > .widget_advertisement_placement,
.public_three_column_right > .widget_advertisement_placement {
    order: -10000;
    margin-block-start: 0;
}

/* Frozen communication workspaces reuse the standard three-column widths and
   Widget presentation while containing all scrolling inside their regions. */
.public_frozen_three_column_layout {
    height: var(--public-frozen-workspace-height, calc(100dvh - 12rem));
    min-height: 0;
    align-items: stretch;
    overflow: hidden;
}

.public_frozen_three_column_layout > .public_three_column_left,
.public_frozen_three_column_layout > .public_three_column_right {
    display: flex;
    height: 100%;
    min-height: 0;
    max-height: none;
    flex-direction: column;
    align-self: stretch;
    overflow: hidden;
}

.public_frozen_three_column_layout > .public_three_column_center {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.public_frozen_three_column_layout > :is(.public_three_column_left,.public_three_column_right) > .public_widget {
    display: flex;
    flex: 1 1 0;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
}

.public_frozen_three_column_layout > :is(.public_three_column_left,.public_three_column_right) > details.public_widget:not([open]) {
    flex: 0 0 auto;
}

.public_frozen_three_column_layout > :is(.public_three_column_left,.public_three_column_right) > .public_widget > .public_widget_content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

@media (min-width: 50.0625rem) {
    .public_three_column_left,
    .public_three_column_right {
        position: sticky;
        display: flex;
        top: calc(var(--sticky-site-header-height, 0px) + 1rem);
        height: auto; /* Oct 10 2026 #398 - was a full-window height, which made every page with rails at least a window tall and pushed the footer below the fold; the rails now take their content height and scroll inside the same max-height */
        max-height: calc(100dvh - var(--sticky-site-header-height, 0px) - 2rem);
        min-height: 0;
        flex-direction: column;
        overflow: hidden;
        overscroll-behavior: contain;
        scrollbar-gutter: auto;
    }

    .public_three_column_layout .public_responsive_widget_region {
        display: flex;
        height: 100%;
        min-height: 0;
        flex-direction: column;
        overflow: hidden;
    }

    .public_three_column_layout .public_responsive_widget_region > .public_widget,
    .public_three_column_layout > .public_three_column_right > .public_widget {
        display: flex;
        min-height: 0;
        height: var(--public-widget-preferred-height, auto);
        max-height: calc(100dvh - var(--sticky-site-header-height, 0px) - 2rem);
        flex: 0 1 auto;
        flex-direction: column;
        overflow: hidden;
    }

    /* RETIRED 2026-08-30: growing every open Widget to fill the rail spread
       Widget headers apart and still clipped long content on short screens.
    .public_three_column_layout .public_responsive_widget_region > details.public_widget[open],
    .public_three_column_layout > .public_three_column_right > details.public_widget[open] {
        flex: 1 1 0;
    }
    */

    .public_three_column_layout:not(.public_frozen_three_column_layout) .public_responsive_widget_region > details.public_widget:not([open]),
    .public_three_column_layout:not(.public_frozen_three_column_layout) > .public_three_column_right > details.public_widget:not([open]) {
        flex: 0 0 auto;
    }

    .public_three_column_layout .public_responsive_widget_region > .public_widget > .public_widget_content,
    .public_three_column_layout > .public_three_column_right > .public_widget > .public_widget_content {
        flex: 1 1 auto;
        min-height: 0;
        max-height: var(--public-widget-content-max-height, none);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) .public_widget_content.is_widget_content_overflowing {
        overflow-y: scroll;
        scrollbar-width: thin;
    }
}

/* Tablet assignments use the same linear regions as mobile while retaining
   an independent database order. */
@media (min-width: 50.001rem) and (max-width: 87.5rem) {
    .public_three_column_layout:not(.public_frozen_three_column_layout) > .public_responsive_widget_controls {
        position: sticky; /* Oct 5 2026 - Issue #72b: was fixed, which sat on top of the header at scroll 0; sticky starts in the reserved space below the header, then sticks under it while scrolling */
        align-self: start;
        z-index: 875;
        top: calc(var(--sticky-site-header-height, 0px) + var(--responsive-widget-menu-gap, .5rem));
        left: max(.25rem, env(safe-area-inset-left));
        right: max(.25rem, env(safe-area-inset-right)); /* Oct 5 2026 - Issue #72: PAGE MENU spans the full width */
        display: flex;
        grid-column: 1;
        grid-row: 1;
        width: auto;
        min-width: 0;
        justify-content: flex-start;
    }

    .public_page_intro,
    .public_page_intro_three_column,
    .public_page_intro_two_column,
    .public_three_column_layout,
    .public_three_column_layout.public_two_column_layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .public_page_intro > .public_page_intro_column,
    .public_three_column_layout > .public_three_column_center,
    .public_three_column_layout.public_two_column_layout > .public_two_column_main {
        grid-column: 1;
        grid-row: 2;
    }

    .public_three_column_layout.public_layout_without_left_widgets > .public_three_column_center,
    .public_three_column_layout.public_layout_without_left_widgets > .public_two_column_main {
        grid-row: 1;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) > .public_three_column_left {
        position: sticky;
        z-index: 850;
        top: var(--sticky-site-header-height, 0px);
        grid-column: 1;
        grid-row: 1;
        height: auto;
        width: 100%;
        max-width: none;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) .public_responsive_widget_region {
        display: none;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-height: none;
        gap: .25rem;
        overflow: visible;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout).has_mobile_widget_menu_open .public_responsive_widget_region {
        display: grid;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout).has_mobile_widget_menu_open > .public_three_column_center {
        grid-row: 3;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) > .public_three_column_right {
        display: contents;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) .public_responsive_widget_region > details.public_widget {
        position: relative;
        z-index: 1;
        display: block;
        grid-column: auto;
        grid-row: auto;
        min-width: 0;
        height: auto;
        min-height: 2.25rem;
        max-height: none;
        flex: none;
        order: var(--widget-tablet-order, 1000);
        overflow: visible;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) .public_responsive_widget_region > details.public_widget[open] {
        z-index: 2;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) .public_responsive_widget_region > details.public_widget > .public_widget_header {
        box-sizing: border-box;
        height: auto;
        min-height: 2.25rem;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) .public_responsive_widget_region > details.public_widget > .public_widget_content {
        position: absolute;
        z-index: 860;
        top: calc(100% + .25rem);
        left: 0;
        box-sizing: border-box;
        width: calc(300% + .5rem);
        height: auto;
        min-height: 0;
        max-height: calc(100dvh - var(--sticky-site-header-height, 0px) - 4rem);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) .public_responsive_widget_region > details.public_widget:nth-of-type(3n + 2) > .public_widget_content {
        left: calc(-100% - .25rem);
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) .public_responsive_widget_region > details.public_widget:nth-of-type(3n) > .public_widget_content {
        left: calc(-200% - .5rem);
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) > .public_three_column_right > * {
        grid-column: 1;
        min-width: 0;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) [data-widget-tablet-region="before_content"] {
        grid-row: 1;
        order: var(--widget-tablet-order, 1000);
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) > .public_three_column_right > *,
    .public_three_column_layout:not(.public_frozen_three_column_layout) [data-widget-tablet-region="after_content"] {
        grid-row: 3;
        order: var(--widget-tablet-order, 1000);
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) :is(
        [data-widget-tablet-region="overlay"],
        .widget_advertisement_placement
    ) {
        position: fixed;
        z-index: 900;
        box-sizing: border-box;
        right: auto;
        bottom: 0;
        left: 50%;
        width: min(320px, 100vw);
        height: 50px;
        min-height: 50px;
        max-height: 50px;
        margin: 0;
        overflow: hidden;
        transform: translateX(-50%);
        order: var(--widget-tablet-order, 1000);
    }
}

@media (max-width: 50rem) {
    .public_page_intro,
    .public_page_intro_three_column,
    .public_page_intro_two_column {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
    }

    .public_page_intro > .public_page_intro_column {
        grid-column: 1;
    }

    .public_three_column_layout,
    .public_three_column_layout.public_two_column_layout {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
        transform: none;
        column-gap: 0;
        row-gap: 1rem;
    }

    .public_three_column_layout > *,
    .public_three_column_left,
    .public_three_column_center,
    .public_three_column_right,
    .public_three_column_layout.public_two_column_layout > .public_two_column_main,
    .public_three_column_layout.public_two_column_layout > .public_three_column_right {
        grid-column: 1;
        position: static;
        max-height: none;
        overflow: visible;
    }

    .public_frozen_three_column_layout {
        height: auto;
        overflow: visible;
    }

    .public_frozen_three_column_layout > .public_three_column_left,
    .public_frozen_three_column_layout > .public_three_column_center,
    .public_frozen_three_column_layout > .public_three_column_right {
        height: auto;
        overflow: visible;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) > .public_responsive_widget_controls {
        position: sticky; /* Oct 5 2026 - Issue #72b: was fixed, which sat on top of the header at scroll 0; sticky starts in the reserved space below the header, then sticks under it while scrolling */
        align-self: start;
        z-index: 875;
        top: calc(var(--sticky-site-header-height, 0px) + var(--responsive-widget-menu-gap, .5rem));
        left: max(.25rem, env(safe-area-inset-left));
        right: max(.25rem, env(safe-area-inset-right)); /* Oct 5 2026 - Issue #72: PAGE MENU spans the full width */
        display: flex;
        grid-area: auto !important;
        grid-column: 1;
        grid-row: 1;
        width: auto;
        min-width: 0;
        gap: .35rem;
        justify-content: flex-start;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) > .public_three_column_left {
        z-index: 850;
        grid-area: auto !important;
        grid-row: 1;
        width: 100%;
        max-width: none;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) .public_responsive_widget_region {
        display: none;
        grid-template-columns: minmax(0, 1fr);
        max-height: none;
        gap: .25rem;
        overflow: visible;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) .public_responsive_widget_region_shell {
        display: none;
        grid-area: auto !important;
        grid-column: 1;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout).has_mobile_widget_menu_open .public_responsive_widget_region {
        display: grid;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout).has_mobile_widget_menu_open .public_responsive_widget_region_shell {
        display: block;
        grid-row: 2;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout).has_mobile_widget_menu_open > .public_three_column_left {
        grid-row: 2;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) > .public_three_column_center {
        grid-area: auto !important;
        grid-row: 2;
    }

    .public_three_column_layout.public_layout_without_left_widgets > .public_three_column_center,
    .public_three_column_layout.public_layout_without_left_widgets > .public_two_column_main {
        grid-row: 1;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout):not(.public_two_column_layout).has_mobile_widget_menu_open > .public_three_column_center {
        grid-row: 3;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) > .public_three_column_right {
        display: contents;
        grid-row: 3;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) .public_responsive_widget_region > details.public_widget,
    .public_three_column_layout:not(.public_frozen_three_column_layout) > .public_three_column_right > * {
        grid-column: 1;
        min-width: 0;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) .public_responsive_widget_region > details.public_widget {
        position: relative;
        z-index: 1;
        display: block;
        grid-row: auto;
        width: 100%;
        height: auto;
        min-height: 2.25rem;
        max-height: none;
        flex: none;
        order: var(--widget-mobile-order, 1000);
        overflow: visible;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) .public_responsive_widget_region > details.public_widget[open] {
        z-index: 2;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) .public_responsive_widget_region > details.public_widget > .public_widget_content {
        position: static;
        box-sizing: border-box;
        width: 100%;
        height: auto;
        min-height: 0;
        max-height: calc(100dvh - var(--sticky-site-header-height, 0px) - 4rem);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) [data-widget-mobile-region="before_content"] {
        grid-row: 1;
        order: var(--widget-mobile-order, 1000);
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) > .public_three_column_right > *,
    .public_three_column_layout:not(.public_frozen_three_column_layout) [data-widget-mobile-region="after_content"] {
        grid-row: 3;
        order: var(--widget-mobile-order, 1000);
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) :is(
        [data-widget-mobile-region="overlay"],
        .widget_advertisement_placement
    ) {
        position: fixed;
        z-index: 900;
        box-sizing: border-box;
        right: auto;
        bottom: 0;
        left: 50%;
        width: min(320px, 100vw);
        height: 50px;
        min-height: 50px;
        max-height: 50px;
        margin: 0;
        overflow: hidden;
        transform: translateX(-50%);
        order: var(--widget-mobile-order, 1000);
    }

    /* RETIRED 2026-08-29: duplicate mobile overlay geometry was merged into
       the canonical overlay rule immediately above. */

    .public_three_column_layout:not(.public_frozen_three_column_layout) > .public_three_column_left > :is(a.button, button) {
        flex: 0 1 auto;
        width: auto;
        max-width: 100%;
    }
}

@media (max-width: 87.5rem) {
    .public_three_column_layout:not(.public_frozen_three_column_layout) {
        --responsive-widget-menu-tab-height: 1.5rem;
        --responsive-widget-menu-gap: .5rem;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) > .public_responsive_widget_controls {
        z-index: 902;
    }

    /* Sept 22 2026 - "the narrow/tablet/mobile MENU button... is too high
       up causing it to be hidden by the page header - it needs a fixed
       position at the bottom of the header wrapper with bottom padding
       below the MENU button so page content does not overlap it." The
       button is position:fixed (out of document flow), so nothing was
       reserving room for it - whatever content sat at the very top of the
       column rendered directly underneath it. Padding that column down by
       the button's own height plus the same gap used above gives the
       button its own breathing room and keeps content from sliding under
       it. */
    /* Oct 7 2026 - the PAGE MENU button is now in the grid flow (sticky), so
       reserving its height as padding too made a tall gap. Closed: the button
       row plus the grid's own row gap is all that is needed. Open: the button goes
       fixed (leaves the flow), so the padding stands in for it. */
    .public_three_column_layout:not(.public_frozen_three_column_layout) > .public_responsive_widget_controls {
        top: var(--sticky-site-header-height, 0px);
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) > .public_three_column_center,
    .public_three_column_layout.public_two_column_layout:not(.public_frozen_three_column_layout) > .public_two_column_main {
        padding-top: 0 !important;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout).has_mobile_widget_menu_open > .public_three_column_center,
    .public_three_column_layout.public_two_column_layout:not(.public_frozen_three_column_layout).has_mobile_widget_menu_open > .public_two_column_main {
        padding-top: calc(var(--responsive-widget-menu-tab-height) + var(--responsive-widget-menu-gap)) !important;
    }

    .public_page_intro:not(:is(.public_three_column_center, .public_two_column_main) *) > .public_page_intro_column { /* Issue #72b: skip when the intro already sits inside a padded column - was reserving the space twice (the tall gap under the header) */
        padding-top: calc(var(--responsive-widget-menu-tab-height) + var(--responsive-widget-menu-gap)) !important;
    }

    /* Oct 7 2026 - open menu covered the PAGE MENU button so it could not be
       toggled closed. While open the controls are fixed at the same spot and
       sit above the full-width panel (panel top = controls bottom). */
    .public_three_column_layout:not(.public_frozen_three_column_layout).has_mobile_widget_menu_open > .public_responsive_widget_controls {
        position: fixed !important;
        top: var(--sticky-site-header-height, 0px) !important;
        right: 0 !important;
        left: 0 !important;
        z-index: 902 !important;
    }

    .public_responsive_widget_controls .public_responsive_widget_menu_button {
        display: inline-flex !important;
        box-sizing: border-box;
        flex: 1 1 auto; /* Oct 5 2026 - Issue #72: full width */
        width: 100% !important;
        min-width: 3.25rem !important;
        height: var(--responsive-widget-menu-tab-height) !important;
        min-height: var(--responsive-widget-menu-tab-height) !important;
        margin: 0 !important;
        padding: .1rem .5rem !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: var(--font-sm) !important;
        line-height: 1 !important;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout).has_mobile_widget_menu_open > .public_three_column_left.public_responsive_widget_region {
        position: fixed !important;
        z-index: 901 !important;
        top: calc(var(--sticky-site-header-height, 0px) + var(--responsive-widget-menu-tab-height)) !important;
        right: 0 !important;
        left: 0 !important;
        display: grid !important;
        box-sizing: border-box !important;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100dvh - var(--sticky-site-header-height, 0px) - var(--responsive-widget-menu-tab-height)) !important;
        margin: 0 !important;
        padding: .5rem !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        color: var(--primary-font-color) !important;
        background: var(--primary-color) !important;
        border: 1px solid var(--primary-accent-color) !important;
        border-radius: var(--radius-none) !important;
        box-shadow: var(--box-shadow) !important;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout).has_mobile_widget_menu_open > .public_three_column_center {
        grid-row: 2 !important;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout).has_mobile_widget_menu_open > .public_three_column_left.public_responsive_widget_region > details.public_widget > .public_widget_content {
        position: static !important;
        inset: auto !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: none !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout).has_mobile_widget_menu_open > .public_three_column_left.public_responsive_widget_region_shell {
        position: fixed !important;
        z-index: 901 !important;
        top: calc(var(--sticky-site-header-height, 0px) + var(--responsive-widget-menu-tab-height)) !important;
        right: 0 !important;
        left: 0 !important;
        display: block !important;
        box-sizing: border-box !important;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100dvh - var(--sticky-site-header-height, 0px) - var(--responsive-widget-menu-tab-height)) !important;
        margin: 0 !important;
        padding: .5rem !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        color: var(--primary-font-color) !important;
        background: var(--primary-color) !important;
        border: 1px solid var(--primary-accent-color) !important;
        border-radius: var(--radius-none) !important;
        box-shadow: var(--box-shadow) !important;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout).has_mobile_widget_menu_open > .public_three_column_left.public_responsive_widget_region_shell > .public_responsive_widget_region,
    .public_three_column_layout:not(.public_frozen_three_column_layout).has_mobile_widget_menu_open > .public_three_column_left.public_responsive_widget_region_shell details.public_widget > .public_widget_content {
        position: static !important;
        inset: auto !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: none !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

/* Oct 7 2026 - narrow/tablet/mobile: left-rail widgets sit inline in the center
   column area, expanded and full width, instead of inside the PAGE MENU dropdown.
   Scoped to the standard layout; messages.php and community chat rooms use the
   frozen/private-chat layouts and are not affected. Placed last so it overrides
   the earlier PAGE MENU rules. */
@media (max-width: 87.5rem) {
    .public_three_column_layout:not(.public_frozen_three_column_layout) > .public_responsive_widget_controls {
        display: none !important;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) > .public_three_column_left.public_responsive_widget_region,
    .public_three_column_layout:not(.public_frozen_three_column_layout) > .public_three_column_left.public_responsive_widget_region_shell {
        position: static !important;
        z-index: auto !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: none !important;
        border: 0 !important;
        border-radius: var(--radius-none) !important;
        box-shadow: none !important;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) > .public_three_column_left.public_responsive_widget_region {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) > .public_three_column_left.public_responsive_widget_region_shell {
        display: block !important;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) > .public_three_column_left .public_responsive_widget_region {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) > .public_three_column_left details.public_widget > .public_widget_content {
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        max-width: none !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout) > .public_three_column_center,
    .public_three_column_layout:not(.public_frozen_three_column_layout).has_mobile_widget_menu_open > .public_three_column_center {
        grid-row: 2 !important;
        padding-top: 0 !important;
    }

    .public_three_column_layout:not(.public_frozen_three_column_layout).public_layout_without_left_widgets > .public_three_column_center {
        grid-row: 1 !important;
    }
}

/* RETIRED 2026-09-02: MENU tab presentation now belongs to the shared Theme
   contract in new_base_aesthetics.css. layouts.css retains geometry only.
@media (max-width: 87.5rem) {
    html body .public_responsive_widget_controls > button.public_responsive_widget_menu_button {
        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-top-left-radius: var(--radius-none) !important;
        border-top-right-radius: var(--radius-none) !important;
        border-bottom-left-radius: var(--page-field-radius) !important;
        border-bottom-right-radius: var(--page-field-radius) !important;
    }
}
*/

@media (max-width: 480px) {
    html body .public_responsive_widget_controls > button.public_responsive_widget_menu_button {
        font-size: var(--font-xs) !important;
        line-height: 1 !important;
    }
}