/* MESA. PRIVATE — common mobile member foundation. */
@media screen and (max-width: 760px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .page-with-system-bar,
  .dashboard-shell,
  .recipes-shell,
  .recipe-detail-shell,
  .menus-shell,
  .menu-editor-shell,
  .notes-shell,
  .lists-shell,
  .member-settings-shell,
  .profile-shell {
    width: 100%;
    max-width: 100vw;
    min-width: 0;
  }

  /* A compact, touch-friendly header with a horizontally scrollable menu. */
  .page-with-system-bar .topbar {
    position: sticky;
    z-index: 30;
    top: 0;
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 66px auto;
    gap: 0;
    padding: 0 max(1rem, env(safe-area-inset-right)) .65rem max(1rem, env(safe-area-inset-left));
    background: rgb(240 238 232 / 96%);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

  .page-with-system-bar .topbar > .wordmark {
    width: max-content;
    max-width: 130px;
    min-width: 0;
    justify-self: start;
  }

  .page-with-system-bar .topbar .brand-wordmark-svg {
    width: 102px;
    max-width: 100%;
  }

  .page-with-system-bar .topbar .desktop-nav {
    display: flex;
    width: 100%;
    max-width: calc(100vw - 2rem);
    min-width: 0;
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
    justify-content: flex-start;
    gap: 1.15rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: .15rem 0 .4rem;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .page-with-system-bar .topbar .desktop-nav::-webkit-scrollbar { display: none; }
  .page-with-system-bar .topbar .nav-link { flex: 0 0 auto; min-height: 34px; display: flex; align-items: center; }
  .page-with-system-bar .topbar .member-menu { min-width: 38px; grid-column: 2; grid-row: 1; }
  .page-with-system-bar .topbar .quiet-link,
  .page-with-system-bar .topbar .member-copy { display: none; }

  /* Prevent iOS form zoom and keep controls large enough for touch. */
  input:not([type='checkbox']):not([type='radio']),
  select,
  textarea { font-size: 16px !important; }
  button,
  .primary-button,
  .secondary-button { min-height: 44px; touch-action: manipulation; }

  /* System footer remains complete, but no longer forces a wide row. */
  .system-bar {
    min-width: 0;
    grid-template-columns: 1fr auto;
    gap: .75rem 1rem;
    padding: 1.1rem max(1rem, env(safe-area-inset-right)) calc(1.1rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  }
  .system-bar-brand { min-width: 0; }
  .language-nav { justify-self: end; }
  .legal-nav { grid-column: 1 / -1; justify-self: start; flex-wrap: wrap; gap: .7rem 1rem; }

  /* Overview */
  .dashboard-main { width: calc(100% - 1.5rem); padding-top: 2rem; }
  .dashboard-heading { gap: 1.4rem; }
  .dashboard-heading h1 { font-size: clamp(3.4rem, 17vw, 4.8rem); }
  .dashboard-settings-button { width: 100%; min-width: 0; }
  .overview-layout,
  .overview-primary,
  .overview-aside { min-width: 0; }
  .overview-card { padding: 1.15rem; }
  .overview-metric strong { font-size: 2.8rem; }

  /* Recipes: results first, taxonomy second. */
  .recipes-main { width: 100%; min-width: 0; }
  .recipes-hero { min-height: 0; align-items: flex-start; flex-direction: column; gap: 1.5rem; padding: 2.2rem 1rem 1.5rem; }
  .recipes-hero h1 { font-size: clamp(3.6rem, 18vw, 5rem); }
  .recipes-hero .primary-button { width: 100%; }
  .recipes-layout { display: flex; min-width: 0; flex-direction: column; }
  .recipe-overview { min-width: 0; order: 1; padding: 1rem; }
  .recipe-taxonomy { min-width: 0; order: 2; border-top: 1px solid var(--mesa-line); border-right: 0; padding: 1.25rem 1rem; }
  .recipe-toolbar { grid-template-columns: 1fr; }
  .recipe-search { width: 100%; max-width: none; }
  .recipe-card-grid { grid-template-columns: 1fr; }
  .recipe-card { grid-template-columns: 108px minmax(0, 1fr); min-height: 142px; }
  .recipe-card > img,
  .recipe-card-placeholder { width: 108px; min-height: 142px; }
  .recipe-card-copy { padding: .85rem; }
  .recipe-view-tabs { gap: 1.25rem; overflow-x: auto; }

  /* Recipe detail stays readable without an oversized image. */
  .recipe-detail-main { width: 100%; padding: .85rem .75rem 2rem; }
  .recipe-detail-actions { align-items: flex-start; gap: 1rem; }
  .recipe-detail-hero,
  .recipe-detail-content { min-width: 0; grid-template-columns: 1fr; }
  .recipe-detail-cover,
  .recipe-detail-cover img,
  .recipe-detail-cover-placeholder { min-height: 210px; height: 210px; }
  .recipe-detail-heading { padding: 1.25rem; }
  .recipe-detail-heading h1 { font-size: clamp(2.5rem, 13vw, 3.5rem); }
  .recipe-detail-meta { grid-template-columns: 1fr; }
  .recipe-detail-section { min-width: 0; padding: 1.25rem; }
  .recipe-detail-section h2 { font-size: 2.35rem; }
  .recipe-ingredient-list li { grid-template-columns: 58px 48px minmax(0, 1fr); }
  .recipe-step-list li { grid-template-columns: 36px minmax(0, 1fr); }
  .recipe-step-duration { grid-column: 2; justify-self: start; }

  /* Menus: existing menus before the long library. */
  .menus-main,
  .menus-overview { width: 100%; max-width: 100%; min-width: 0; }
  .menus-hero { min-height: 0; padding: 2.2rem 1rem 1.5rem; }
  .menus-hero h1 { font-size: clamp(3.6rem, 18vw, 4.8rem); }
  .menus-overview { display: flex; flex-direction: column; }
  .menu-list-panel { min-width: 0; order: 1; padding: 1rem; }
  .menu-library { min-width: 0; order: 2; padding: 1.25rem 1rem; }
  .menu-create-panel { min-width: 0; order: 3; padding: 1.25rem 1rem; }
  .menu-list-head { align-items: stretch; flex-direction: column; }
  .menu-list-head form { width: 100%; }
  .menu-cards { min-width: 0; grid-template-columns: 1fr; }
  .menu-card,
  .menu-empty { min-width: 0; min-height: 0; }
  .menu-card-head h3 { overflow-wrap: anywhere; }
  .course-type-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
  .menu-meta-fields { grid-template-columns: 1fr; }
  .menu-season-options { overflow-x: auto; flex-wrap: nowrap; padding-bottom: .35rem; }
  .menu-season-options label { flex: 0 0 auto; }

  /* Notes: list first; an explicitly selected note moves its editor first. */
  .notes-main,
  .notes-workspace { width: 100%; max-width: 100%; min-width: 0; }
  .notes-hero { min-height: 0; padding: 2.2rem 1rem 1.5rem; }
  .notes-hero h1 { font-size: clamp(3.6rem, 18vw, 4.8rem); }
  .notes-workspace { display: flex; flex-direction: column; }
  .notes-list-panel { min-width: 0; order: 1; border-right: 0; padding: 1rem; }
  .notes-taxonomy { min-width: 0; order: 2; border-right: 0; padding: 1.25rem 1rem; }
  .note-editor-panel { min-width: 0; order: 3; padding: 1rem; }
  .note-selected .note-editor-panel { order: 1; }
  .note-selected .notes-list-panel { order: 2; }
  .note-selected .notes-taxonomy { order: 3; }
  .notes-list { grid-template-columns: 1fr; }
  .note-list-item { border-right: 0; }
  .note-title-input { width: calc(100% - 2rem); margin-inline: 1rem; }
  .note-body-input { min-height: 280px; padding: 1rem; }
  .note-editor-actions { grid-template-columns: 1fr 1fr; }

  /* Lists: overview first; a selected list moves its details first. */
  .lists-workspace { width: 100%; max-width: 100%; min-width: 0; display: flex; flex-direction: column; }
  .lists-hero { min-height: 0; padding: 2.2rem 1rem 1.5rem; }
  .lists-hero .primary-button { width: 100%; }
  .lists-index { min-width: 0; order: 1; border-right: 0; padding: 1rem; }
  .lists-taxonomy { min-width: 0; order: 2; border-right: 0; padding: 1.25rem 1rem; }
  .list-editor { min-width: 0; order: 3; padding: 1rem; }
  .list-selected .list-editor { order: 1; }
  .list-selected .lists-index { order: 2; }
  .list-selected .lists-taxonomy { order: 3; }
  .list-tabs { gap: 1.1rem; overflow-x: auto; }
  .list-title { max-width: 100%; overflow-wrap: anywhere; font-size: 2.35rem; }
  .editor-tools { align-items: stretch; flex-direction: column; }

  /* Member settings and profile. */
  .member-settings-main { width: 100%; min-width: 0; }
  .member-settings-hero { padding: 2.2rem 1rem 1.5rem; }
  .member-settings-hero h1 { font-size: clamp(3.3rem, 16vw, 4.6rem); }
  .member-settings-layout { width: 100%; min-width: 0; display: block; }
  .member-settings-nav {
    width: 100%;
    display: flex;
    gap: .35rem;
    overflow-x: auto;
    border-right: 0;
    padding: .75rem 1rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .member-settings-nav::-webkit-scrollbar { display: none; }
  .member-settings-nav a { flex: 0 0 auto; min-height: 44px; display: flex; align-items: center; padding: .75rem .9rem; border: 1px solid var(--mesa-line); }
  .member-settings-nav a::before { display: none; }
  .member-settings-nav a.active { border-color: var(--mesa-red); color: var(--mesa-red); }
  .member-settings-content { width: 100%; min-width: 0; padding: 2rem 1rem 3rem; }
  .settings-section-heading { grid-template-columns: 1fr; gap: 1.3rem; margin-bottom: 2rem; }
  .settings-section-heading h2 { font-size: clamp(2.5rem, 12vw, 3.5rem); }
  .settings-feature { grid-template-columns: 38px minmax(0, 1fr); gap: 1rem; padding: 1.25rem; }
  .settings-feature .primary-button { grid-column: 1 / -1; width: 100%; }
  .settings-overview-grid,
  .settings-planned-grid,
  .settings-data-grid { grid-template-columns: 1fr; }

  .profile-main { width: calc(100% - 2rem); padding: 2.5rem 0 4rem; }
  .profile-hero { grid-template-columns: 1fr; justify-items: center; gap: 2.5rem; padding-bottom: 3rem; text-align: center; }
  .profile-photo-wrap { justify-items: center; }
  .profile-photo { width: min(190px, 60vw); }
  .profile-heading h1 { font-size: clamp(3rem, 15vw, 4.4rem); overflow-wrap: anywhere; }
  .profile-grid,
  .email-change-card,
  .profile-section-heading { grid-template-columns: 1fr; }
  .profile-card { padding: 1.4rem; }
  .session-row { align-items: flex-start; flex-direction: column; gap: .8rem; padding: 1rem 0; }
}

@media screen and (max-width: 390px) {
  .page-with-system-bar .topbar .desktop-nav { max-width: calc(100vw - 2rem); gap: 1rem; }
  .course-type-list { grid-template-columns: 1fr; }
  .recipe-detail-actions { flex-direction: column; }
  .recipe-detail-pdf { width: 100%; }
}

@media screen and (max-height: 560px) and (orientation: landscape) {
  .page-with-system-bar .topbar { position: relative; }
}