/* Mobile page composition. No body/section padding, viewport breakouts or
 * desktop rules. Existing page owners consume the one shared gutter token.
 * Cards, sheets, rails and intentional in-component scrolling remain owners. */
@media (max-width: 767px) {
  :root {
    --al-mobile-page-gutter-start: max(var(--al-mobile-page-gutter), env(safe-area-inset-left, 0px));
    --al-mobile-page-gutter-end: max(var(--al-mobile-page-gutter), env(safe-area-inset-right, 0px));
  }

  /* The hero paints edge to edge; its existing boxed content owns the gutter. */
  body .al-homepage > .al-homepage__hero { padding-inline: 0; }

  /* Elementor is only the host, never a second page gutter. */
  #content .elementor .e-parent:has(.al-toolsHub, #alLessonsLibrary, #alAquariumsIntro) {
    --al-page-gutter-x: 0px;
    padding-inline: 0;
  }
  .al-contextEntry.al-shell-page {
    inline-size: calc(100% - var(--al-mobile-page-gutter-start) - var(--al-mobile-page-gutter-end));
    margin-inline: auto;
  }
  :is(.pl-entry-hero__inner, .algae-entry-hero__inner) { --al-database-hero-padding: 16px; }
  :is(.al-page-header.pl-entry-hero, .al-page-header.algae-entry-hero) {
    --al-pageheader-pad-x: 0px;
  }

  /* Reading content has a single existing article column. */
  body.single-lessons .single-lesson > .content-area {
    width: calc(100% - var(--al-mobile-page-gutter-start) - var(--al-mobile-page-gutter-end));
    margin-inline: var(--al-mobile-page-gutter-start) var(--al-mobile-page-gutter-end);
    padding-inline: 0;
    min-width: 0;
  }

  /* Public page shells already use --al-layout-gutter in their owning width.
   * Logical margins preserve safe-area asymmetry without nested padding. */
  body :is(.al-homepage, .al-databases, .al-toolsHub, #alAquariumsIntro,
    #alLessonsLibrary.al-lessons-landing, .al-fish-archive,
    .al-page-header.pl-entry-hero, #plant-grid.pl-discovery-grid,
    .al-page-header.algae-entry-hero, #algae-grid.algae-discovery-grid,
    .al-equipment__wrap, #alLearningJourney.al-lj) {
    --al-layout-gutter: max(var(--al-mobile-page-gutter-start), var(--al-mobile-page-gutter-end));
    min-width: 0;
  }

  /* Workspaces retain their original frames and intentional full-width cards. */
  #alMemberArea .al-member-page-frame { min-width: 0; }

  /* Complex controls shrink inside the page, not outside the viewport. */
  .al-tools-app.al-tool-shell :is(.al-tool-workspace, .al-tool-card, .al-tool-field,
    .al-tool-input-group, .al-tool-result, .al-tool-hero__copy) { min-width: 0; }
  .al-tools-app.al-tool-shell :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea) {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  .al-tools-app.al-tool-shell :is(.al-tool-btn, .al-btn) {
    max-width: 100%;
    white-space: normal;
    word-break: normal;
    height: auto;
    min-height: 44px;
  }

  /* Explicit text roles only: normal word wrapping, no forced editorial breaks. */
  :is(.al-tool-title, .al-member-pagehead__title, .al-pagehead__title,
    .al-database-detail__hero h1, .al-equipment__header h1,
    .al-lessons-hero__title, .al-homepage__hero h1, .lesson-title) {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
  }
}