@layer modules {
  /* Reusable desktop action sidebar. Pages that set content_for :side_menu /
     :side_actions get a two-column layout on desktop: a scrolling main content
     column beside a fixed sidebar holding the menu + action items. On mobile the
     same items render as the footer-bar burger and the floating glass fab, so the
     sidebar is hidden and these mobile affordances take over. */
  .page__menu {
    /* The popup__btn item padding var is normally set on .popup (the dialog);
       the sidebar has no .popup ancestor, so set it here for matching padding. */
    --popup-item-padding-inline: 0.4rem;

    display: none;
  }

  .page__menu-title {
    color: var(--color-ink-light);
    font-size: var(--text-small);
    font-weight: 600;
    margin-block-end: var(--block-space-half);
    padding-inline: var(--popup-item-padding-inline);
    text-transform: uppercase;
  }

  /* The layout-rendered glass fab is a mobile affordance only. */
  .page-fab {
    @media (min-width: 640px) {
      display: none;
    }
  }

  @media (min-width: 640px) {
    /* The page itself stops scrolling — only the main content column does, so the
       sidebar stays put. Overrides .page's scroll + width (set in @layer
       components: layout.css / sidebar.css); @layer modules wins regardless of
       specificity. */
    .page:has(> .page__menu) {
      display: flex;
      flex-direction: row;
      gap: var(--block-space);
      max-inline-size: none;
      overflow: hidden;
      padding-block-end: var(--block-space);
    }

    .page__content {
      flex: 1 1 20rem;
      max-inline-size: var(--page-content-width, 35rem);
      min-inline-size: 0;
      min-block-size: 0;
      overflow-y: auto;
      padding-block-end: var(--block-space);
    }

    /* Opt out of the readable-width cap for content that wants the full column
       (wide tables, card grids) — set @body_class = "page--full" in the controller. */
    body.page--full .page__content {
      max-inline-size: none;
    }

    .page__menu {
      display: block;
      flex: 0 0 16rem;
      overflow-y: auto;
    }
  }

  /* Separator before the action (glass-fab) items in the sidebar. */
  .page__menu-actions {
    border-block-start: var(--border);
    margin-block-start: var(--block-space-half);
    padding-block-start: var(--block-space-half);
  }
}