/* Member food-flow layouts. Scoped to the new home and single-page plate only. */

/* Keep actions in view; food lists and notes own their scrolling. */
#app .app-shell:not(.auth-gate) :is(.screen-content, .screen-anchor, [data-role="screen"]):has(.member-plate-list) { box-sizing: border-box !important; height: 100% !important; min-height: 0 !important; overflow: hidden !important; padding-top: 0 !important; padding-bottom: 0 !important; }

/* Home fills the available screen; only the two previews scroll internally. */
#app .app-shell:not(.auth-gate):has(.member-meals-home[data-page="home"]) > .app-header { display: none !important; }
#app .app-shell:not(.auth-gate) .screen-content:has(.home-view.home-v3.member-meals-home[data-page="home"]),
#app .app-shell:not(.auth-gate) .screen-anchor:has(.home-view.home-v3.member-meals-home[data-page="home"]),
#app .app-shell:not(.auth-gate) [data-role="screen"]:has(.home-view.home-v3.member-meals-home[data-page="home"]) {
  box-sizing: border-box;
  height: 100% !important;
  min-height: 0 !important;
  flex: 1 1 0;
  display: flex !important;
  flex-direction: column;
  overflow: hidden !important;
}

#app .app-shell:not(.auth-gate) .screen-content:has(.home-view.home-v3.member-meals-home[data-page="home"]) { padding: 0 9px !important; }
#app .app-shell:not(.auth-gate) .screen-anchor:has(.home-view.home-v3.member-meals-home[data-page="home"]) { padding: 4px 0 0 !important; }

#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home[data-page="home"] {
  box-sizing: border-box;
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto 54px minmax(0, 1fr) !important;
  grid-auto-rows: auto !important;
  align-content: stretch !important;
  align-items: stretch !important;
  gap: 6px !important;
  width: 100%;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: 1 1 0;
  margin: 0 !important;
  padding: 0 0 2px !important;
  overflow: hidden !important;
  color: #26221d;
}

#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home[data-page="home"] > :not(.swipe-position) {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  min-width: 0;
  min-height: 0;
  margin: 0 !important;
}

#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home[data-page="home"] > .today-macro-balance {
  display: grid !important;
  grid-template-rows: auto auto;
  gap: 3px;
  min-height: 62px !important;
  padding: 5px 7px !important;
  overflow: visible !important;
  border: 1.5px solid #26221d;
  border-radius: 14px 12px 15px 11px;
  background: #fffaf4;
  box-shadow: 1px 2px 0 rgba(38, 34, 29, .12);
}

#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .today-macro-balance-head {
  display: flex;
  min-width: 0;
  min-height: 28px;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}

#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .today-macro-balance-head strong,
#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .today-macro-balance-grid span,
#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .today-macro-balance-grid strong {
  min-width: 0;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .today-macro-balance-head small { font-size: 10px !important; }
#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .today-macro-balance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .today-macro-balance-grid > div { display: flex; min-width: 0; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; }

#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .today-macro-balance .training-check {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 4px;
  padding: 0 5px;
  border: 1px solid #b7cdb7;
  border-radius: 10px;
  font-size: 11px;
  white-space: nowrap;
}

#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .today-macro-balance .training-check input { width: 16px; height: 16px; margin: 0; accent-color: #49765b; }
#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .today-macro-balance .training-check:has(input:checked) { background: #cbe5c7; border-color: #49765b; }

#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .home-meal-tabs {
  display: flex;
  height: 54px !important;
  min-height: 54px !important;
  gap: 4px;
  padding: 0;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  touch-action: pan-x;
}

#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .home-meal-tabs .meal-tab {
  box-sizing: border-box;
  flex: 1 0 calc((100% - 8px) / 3);
  min-width: 72px;
  height: 44px !important;
  min-height: 44px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 4px 6px;
  border: 1.5px solid #26221d;
  border-radius: 13px 11px 14px 10px !important;
  background: #fffaf4;
  color: #26221d;
}

#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .home-meal-tabs .meal-tab span { font-size: 13px; }
#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .home-meal-tabs .meal-tab small { display: none; }
#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .home-meal-tabs .meal-tab .meal-tab-checkin {
  display: block;
  margin: 0;
  color: #81796d;
  font-size: 10px;
  font-weight: 400;
  line-height: 12px;
  white-space: nowrap;
}
#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .home-meal-tabs .meal-tab.is-active { background: #ffd86e; box-shadow: 1px 2px 0 rgba(38, 34, 29, .16); }

/* The old decorative circle belongs to neither of the new preview panels. */
#app .member-meals-home .home-entry::after { display: none !important; }

#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home[data-page="home"] > .home-entry-grid {
  box-sizing: border-box;
  display: grid !important;
  flex: 1 1 0;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 6px !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: hidden !important;
}

#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home[data-page="home"] .home-entry {
  box-sizing: border-box;
  position: static !important;
  display: flex !important;
  min-width: 0;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  padding: 7px !important;
  overflow: hidden !important;
  border: 1.5px solid #26221d;
  border-radius: 15px 12px 16px 11px;
  background: #fffaf4;
  box-shadow: 1px 2px 0 rgba(38, 34, 29, .12) !important;
  color: #26221d;
  text-align: left;
}

#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .home-entry .home-card-head,
#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .home-entry .custom-entry-head {
  box-sizing: border-box;
  display: flex;
  min-width: 0;
  min-height: 44px;
  flex: 0 0 44px;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 0;
  border-bottom: 1px dashed #d8c8b7;
}

#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .home-entry :is(.home-card-head, .custom-entry-head) strong {
  display: flex;
  min-width: 0;
  min-height: 44px;
  align-self: stretch;
  align-items: center;
  overflow: hidden;
  color: #26221d;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .home-entry :is(.home-card-head, .custom-entry-head) button {
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px !important;
  flex: 0 0 auto;
  padding: 3px 7px;
  border: 1px solid #26221d;
  border-radius: 10px 8px 11px 9px;
  background: #ffd86e;
  color: #26221d;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .coach-entry .coach-meal-preview {
  box-sizing: border-box;
  display: grid !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: 1 1 0;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: minmax(24px, auto) !important;
  align-content: start;
  gap: 2px !important;
  margin: 0 !important;
  padding: 0 1px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .coach-preview-food,
#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .yesterday-food-row {
  box-sizing: border-box;
  display: grid !important;
  min-width: 0 !important;
  min-height: 24px !important;
  grid-template-columns: 24px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 0 5px !important;
  padding: 0 2px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}

#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home :is(.coach-preview-food, .yesterday-food-row) > .food-visual {
  box-sizing: border-box;
  display: block;
  position: static !important;
  inset: auto !important;
  transform: none !important;
  flex: 0 0 24px !important;
  margin: 0 !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  object-fit: contain !important;
}

#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home :is(.coach-preview-food, .yesterday-food-row) > strong,
#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home :is(.coach-preview-food, .yesterday-food-row) > small {
  display: block;
  min-width: 0 !important;
  overflow: visible !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
}

#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home :is(.coach-preview-food, .yesterday-food-row) > strong { grid-column: 2 !important; color: #26221d; overflow-wrap: anywhere; white-space: normal !important; }
#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home :is(.coach-preview-food, .yesterday-food-row) > small { grid-column: 3 !important; color: #6d5a4d; white-space: nowrap !important; }
#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .coach-meal-preview > small { padding: 4px; color: #6d5a4d; font-size: 11px; }

#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .yesterday-meal-preview {
  box-sizing: border-box;
  display: grid;
  min-width: 0;
  min-height: 54px;
  max-height: min(38%, 136px);
  flex: 0 1 auto;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 2px;
  overflow: hidden;
  border-bottom: 1px dashed #d8c8b7;
}

#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .yesterday-meal-preview > header {
  display: flex;
  min-width: 0;
  min-height: 18px;
  align-items: center;
  color: #6d5a4d;
  font-size: 11px;
  font-weight: 700;
}

#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .yesterday-food-list {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 0;
  max-height: none;
  grid-auto-rows: minmax(24px, auto);
  align-content: start;
  gap: 2px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .yesterday-food-list > small {
  padding: 4px;
  color: #6d5a4d;
  font-size: 11px;
}

#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .custom-entry-card {
  display: flex !important;
  min-height: 0 !important;
  flex-direction: column !important;
  gap: 5px !important;
}

#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .custom-entry-card .common-meals-section {
  box-sizing: border-box;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100%;
  min-width: 0;
  min-height: 76px !important;
  max-height: none !important;
  flex: 1 1 0;
  align-content: start;
  gap: 4px;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  overscroll-behavior: contain;
}

#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .custom-entry-card .common-meals-section > header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  min-height: 22px;
  align-items: center;
  background: #fffaf4;
}

#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .custom-entry-card .common-meals-section > header strong { color: #6d5a4d; font-size: 11px; }
#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .custom-entry-card .common-meal-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}
#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .custom-entry-card .common-meal-row {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  border: 1px dashed #b79c82;
  border-radius: 9px;
  background: #fffdf8;
}
#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .custom-entry-card .common-meal-slot {
  display: grid;
  min-height: 98px;
  min-width: 0;
  place-items: center;
  border: 1px dashed #b79c82;
  border-radius: 9px;
  color: #806b59;
  font-size: 11px;
}
#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .custom-entry-card .common-meal-delete {
  justify-self: end;
  display: grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #9b5535;
}
#app .common-meal-delete:focus-visible, #app .common-meal-open:focus-visible {
  outline: 2px solid #9b5535;
  outline-offset: -2px;
}
#app .common-meal-delete:disabled { opacity: .45; }
#app .common-meal-dialog input, #app .common-meal-dialog select { font-size: 16px; }
#app .recipe-detail-dialog .common-meal-edit {
  min-width: 44px;
  min-height: 44px;
}
#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .custom-entry-card .common-meal-open {
  display: flex;
  min-width: 0;
  min-height: 44px;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 3px 5px;
  border: 0;
  border-radius: 10px 8px 11px 9px;
  background: transparent;
  color: #26221d;
  text-align: left;
}
#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .custom-entry-card .common-meal-open b,
#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .custom-entry-card .common-meal-open small {
  display: block;
  min-width: 0;
  width: 100%;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .custom-entry-card .common-meal-open b { font-size: 12px; line-height: 14px; }
#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .custom-entry-card .common-meal-open small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; color: #6d5a4d; }
#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .custom-entry-card .common-meal-edit {
  display: grid;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  place-items: center;
  border: 1px solid #26221d;
  border-radius: 10px 8px 11px 9px;
  background: #fff0e5;
  color: #9b5535;
}
#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .custom-entry-card .common-meal-edit svg { width: 18px; height: 18px; }
#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .custom-entry-card .common-meals-section > small { color: #6d5a4d; font-size: 11px; line-height: 1.35; }
#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .custom-entry-card .common-meals-section > p { margin: 0; color: #6d5a4d; font-size: 11px; }
#app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .custom-entry-card .common-meals-section > p button { min-width: 44px; min-height: 44px; }

@media (orientation: landscape) and (max-height: 460px) {
  #app .app-shell:not(.auth-gate):has(.home-view.home-v3.member-meals-home[data-page="home"]) > .app-header {
    height: 48px !important;
    min-height: 48px !important;
    flex: 0 0 48px !important;
    padding-block: 1px;
  }

  #app .app-shell:not(.auth-gate):has(.home-view.home-v3.member-meals-home[data-page="home"]) .global-nav {
    box-sizing: border-box;
    height: calc(56px + env(safe-area-inset-bottom)) !important;
    min-height: calc(56px + env(safe-area-inset-bottom)) !important;
    flex: 0 0 calc(56px + env(safe-area-inset-bottom)) !important;
    padding: 2px 6px env(safe-area-inset-bottom) !important;
  }

  #app .app-shell:not(.auth-gate):has(.home-view.home-v3.member-meals-home[data-page="home"]) .global-nav .nav-item { min-height: 44px !important; }

  #app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home[data-page="home"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 4px !important;
  }

  #app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home[data-page="home"] > .today-macro-balance { grid-column: 1 !important; grid-row: 1 !important; min-height: 0 !important; padding: 3px 5px !important; }
  #app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .today-macro-balance-head,
  #app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .today-macro-balance .training-check { min-height: 28px; }
  #app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .home-meal-tabs { grid-column: 2 !important; grid-row: 1 !important; align-self: center; gap: 2px; }
  #app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home[data-page="home"] > .home-entry-grid { grid-column: 1 / -1 !important; grid-row: 2 !important; gap: 4px !important; }
  #app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .home-entry { gap: 4px; padding: 5px !important; }
  #app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .yesterday-meal-preview { min-height: 40px; max-height: 38%; }
  #app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .custom-entry-card .common-meals-section { min-height: 72px !important; }
}

@media (orientation: landscape) and (max-height: 360px) {
  #app .app-shell:not(.auth-gate):has(.home-view.home-v3.member-meals-home[data-page="home"]) > .app-header {
    height: 46px !important;
    min-height: 46px !important;
    flex: 0 0 46px !important;
    padding-block: 1px;
  }

  #app .app-shell:not(.auth-gate):has(.home-view.home-v3.member-meals-home[data-page="home"]) .global-nav {
    box-sizing: border-box;
    height: calc(48px + env(safe-area-inset-bottom)) !important;
    min-height: calc(48px + env(safe-area-inset-bottom)) !important;
    flex: 0 0 calc(48px + env(safe-area-inset-bottom)) !important;
    padding: 1px 6px env(safe-area-inset-bottom) !important;
  }

  #app .app-shell:not(.auth-gate):has(.home-view.home-v3.member-meals-home[data-page="home"]) .global-nav .nav-item { min-height: 44px !important; }

  #app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .custom-entry-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 44px minmax(0, 1fr);
    align-items: stretch;
    gap: 4px !important;
  }

  #app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .custom-entry-card .custom-entry-head { grid-column: 1 / -1; grid-row: 1; }
  #app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .custom-entry-card .yesterday-meal-preview { grid-column: 1; grid-row: 2; min-width: 0; min-height: 0; max-height: none; }
  #app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .custom-entry-card .yesterday-meal-preview > header { min-height: 16px; }
  #app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .custom-entry-card .common-meals-section { grid-column: 2; grid-row: 2; min-width: 0; min-height: 0 !important; max-height: 100% !important; gap: 2px; }
  #app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .custom-entry-card .common-meals-section > header { min-height: 16px; }
  #app .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .custom-entry-card .common-meal-row { gap: 2px; }
}
.app-shell .global-nav .nav-item[data-host-target="calendar"] { display: none !important; }
.app-shell .global-nav { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.member-plate-list .board-macro-grid { gap: 4px; }
.member-plate-list .board-macro-row { padding: 6px 3px; border-radius: 10px; border-right: 0; }
.member-plate-list .board-macro-row.is-matched { background: #d6ebd2; color: #285a41; }
.member-plate-list .board-macro-row.is-under { background: #fff0ba; color: #805716; }
.member-plate-list .board-macro-row.is-over { background: #f7d2c7; color: #963c2f; }
.member-plate-list .board-macro-row.is-matched strong,
.member-plate-list .board-macro-row.is-under strong,
.member-plate-list .board-macro-row.is-over strong { color: inherit; }

/* Shared preset editor and picker styles stay separate from the home layout. */
.picker-view .picker-food-scroll .picker-common-meals { display: block; margin: 0 0 6px; padding: 6px; border: 1px solid #26221d; border-radius: 12px; background: #fffaf4; }
.picker-view .picker-food-scroll .picker-common-meals > summary { display: flex; min-height: 44px; align-items: center; padding: 5px 7px; color: #26221d; font-size: 12px; font-weight: 700; cursor: pointer; }
.picker-view .picker-food-scroll .picker-common-meals .common-meals-section { display: grid; gap: 5px; padding: 4px 0 0; border: 0; border-radius: 0; background: transparent; }
.picker-view .picker-common-meals .common-meals-section > header { min-height: 0; }
.picker-view .picker-common-meals .common-meals-section > header strong { font-size: 12px; }
.picker-view .picker-common-meals .common-meal-row { grid-template-columns: minmax(0, 1fr) 44px; gap: 5px; }
.picker-view .picker-common-meals .common-meal-open { min-height: 44px; padding: 4px 7px; background: #fffdf8; }
.picker-view .picker-common-meals .common-meal-open b,
.picker-view .picker-common-meals .common-meal-open small { font-size: 12px; }
.picker-view .picker-common-meals .common-meal-edit { width: 44px; min-height: 44px; }
.picker-view .picker-common-meals .common-meals-section > small,
.picker-view .picker-common-meals .common-meals-section > p { margin: 0; font-size: 12px; }

/* Single-page plate overrides the older absolute plate layouts. */
.app-shell:not(.auth-gate) .screen-anchor:has(.member-plate-list) { padding-top: 8px !important; }

.app-shell:not(.auth-gate) .plate-view.member-plate-list[data-page="plate"] {
  position: static !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: none !important;
  align-content: start !important;
  gap: 8px !important;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  margin: 0;
  padding: 0 2px 14px;
  overflow: visible !important;
}

.app-shell:not(.auth-gate) .plate-view.member-plate-list[data-page="plate"] > * { position: static !important; inset: auto !important; transform: none !important; grid-column: 1 / -1 !important; grid-row: auto !important; width: 100% !important; }

.app-shell:not(.auth-gate) .plate-view.member-plate-list[data-page="plate"] > .subhead { display: flex !important; min-height: 44px !important; height: auto !important; gap: 8px; margin: 0 !important; overflow: visible !important; }
.app-shell:not(.auth-gate) .plate-view.member-plate-list[data-page="plate"] > .subhead .back-button { width: 44px; height: 44px; flex: 0 0 44px; }
.app-shell:not(.auth-gate) .plate-view.member-plate-list[data-page="plate"] > .subhead h2 { font-size: 20px !important; line-height: 1.15; }
.app-shell:not(.auth-gate) .plate-view.member-plate-list[data-page="plate"] > .subhead .eyebrow { font-size: 10px; }
.app-shell:not(.auth-gate) .plate-view.member-plate-list[data-page="plate"] > .subhead .target-pill { padding: 7px 9px; font-size: 12px; }

.app-shell:not(.auth-gate) .plate-view.member-plate-list[data-page="plate"] .member-plate-frame { display: flex; width: 100%; min-width: 0; flex-direction: column; gap: 8px; padding: 8px; border: 1.5px solid #26221d; border-radius: 17px; background: #fffaf4; box-shadow: none; }

.member-plate-list .member-plate-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.member-plate-list .member-plate-tools button { min-width: 0; min-height: 44px; padding: 4px; border: 1px solid #26221d; border-radius: 10px; background: #fff0e5; color: #26221d; font-size: 12px; font-weight: 700; }
.member-plate-list .member-plate-tools .match-target-button { background: #ffd86e; }
.member-plate-list .member-plate-tools button svg { width: 16px; height: 16px; vertical-align: middle; }

.app-shell:not(.auth-gate) .plate-view.member-plate-list[data-page="plate"] .member-plate-targets { display: grid; width: 100%; min-width: 0; gap: 5px; }
.app-shell:not(.auth-gate) .plate-view.member-plate-list[data-page="plate"] .member-plate-targets .board-macro-panel { position: static !important; display: grid !important; width: 100% !important; min-width: 0; min-height: 0 !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto !important; grid-column: 1 / -1 !important; grid-row: auto !important; padding: 6px; border: 1px solid #d6c5b4; border-radius: 11px; background: #fffdf8; overflow: visible !important; }
.app-shell:not(.auth-gate) .plate-view.member-plate-list[data-page="plate"] .board-macro-title { display: flex !important; min-height: 20px; grid-column: 1 / -1 !important; grid-row: auto !important; justify-content: space-between; overflow: visible; }
.app-shell:not(.auth-gate) .plate-view.member-plate-list[data-page="plate"] .board-macro-title strong,
.app-shell:not(.auth-gate) .plate-view.member-plate-list[data-page="plate"] .board-macro-title span { font-size: 12px !important; line-height: 1.2 !important; white-space: nowrap; }
.app-shell:not(.auth-gate) .plate-view.member-plate-list[data-page="plate"] .board-macro-grid { display: grid !important; width: 100% !important; min-width: 0; min-height: 38px; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-column: 1 / -1 !important; grid-row: auto !important; overflow: visible !important; }
.app-shell:not(.auth-gate) .plate-view.member-plate-list[data-page="plate"] .board-macro-row { display: flex !important; min-width: 0; align-items: center; gap: 2px; padding: 3px; border-color: #d6c5b4; overflow: visible !important; text-align: center; }
.app-shell:not(.auth-gate) .plate-view.member-plate-list[data-page="plate"] .board-macro-row span,
.app-shell:not(.auth-gate) .plate-view.member-plate-list[data-page="plate"] .board-macro-row strong,
.app-shell:not(.auth-gate) .plate-view.member-plate-list[data-page="plate"] .board-macro-row small { max-width: 100%; font-size: 12px !important; line-height: 1.2 !important; white-space: normal !important; overflow-wrap: anywhere; }
.app-shell:not(.auth-gate) .plate-view.member-plate-list[data-page="plate"] .board-macro-row strong { color: #41665d; font-size: 14px !important; }
.app-shell:not(.auth-gate) .plate-view.member-plate-list[data-page="plate"] .match-status { font-size: 12px; line-height: 1.35; }

.member-plate-list .member-food-groups { display: flex; max-height: min(36dvh, 320px); min-height: 0; flex-direction: column; gap: 6px; overflow: auto; overscroll-behavior: contain; }
.member-plate-list .member-food-group { display: grid; min-width: 0; gap: 3px; }
.member-plate-list .member-food-group h3 { margin: 2px 0; color: #6d5a4d; font-size: 12px; line-height: 1.2; }

.member-plate-list .member-food-row { display: grid; min-width: 0; min-height: 44px; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 4px 7px; border: 1px solid #dfcfbf; border-radius: 10px; background: #fffdf8; color: #26221d; text-align: left; }

.member-plate-list .member-food-row.is-selected { border-color: #5d877e; background: #edf5ed; }
.member-plate-list .member-food-row { position: relative; grid-template-columns: 32px minmax(0, 1fr) auto auto; }
.member-plate-list .member-row-select { position: absolute; inset: 0; width: 100%; border: 0; border-radius: inherit; background: transparent; }
.member-plate-list .member-row-match { position: relative; z-index: 1; min-height: 44px; min-width: 44px; padding: 0 5px; border: 0; border-radius: 6px; background: #ffd86e; color: #26221d; font-size: 11px; }
.member-plate-list .member-row-select:focus-visible { outline: 2px solid #5d877e; outline-offset: 2px; }
.member-plate-list .member-row-warning { color: #a43825; font-size: 11px; max-width: 88px; }
.member-plate-list .member-row-manual { color: #6d5a4d; font-size: 11px; }
.member-plate-list .member-food-row .food-visual { width: 32px; height: 32px; object-fit: contain; }
.member-plate-list .member-food-row strong,
.member-plate-list .member-food-row small,
.member-plate-list .member-group-empty { min-width: 0; color: #26221d; font-size: 12px; line-height: 1.2; }
.member-plate-list .member-food-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-plate-list .member-food-row small { color: #6d5a4d; white-space: nowrap; }
.member-plate-list .member-group-empty { padding: 3px 0; color: #847165; }

.app-shell:not(.auth-gate) .plate-view.member-plate-list[data-page="plate"] > .board-panel { position: static !important; inset: auto !important; display: flex !important; grid-column: 1 / -1 !important; grid-row: auto !important; grid-template-rows: none !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; flex-direction: column; gap: 6px; padding: 7px; overflow: visible !important; border: 1px solid #9f6b45; border-radius: 15px; background: #f6eadb; }

.app-shell:not(.auth-gate) .plate-view.member-plate-list[data-page="plate"] .board-stage { position: static !important; display: flex !important; width: 100% !important; min-width: 0 !important; min-height: 58px !important; height: auto !important; align-items: center; justify-content: flex-start; gap: 8px; margin: 0 !important; padding: 5px 8px; overflow: visible !important; border: 0; border-radius: 10px; background: #ead7c1; box-shadow: none; }

.app-shell:not(.auth-gate) .plate-view.member-plate-list[data-page="plate"] .board-stage .board-food { position: static !important; width: 42px !important; height: 42px !important; flex: 0 0 42px; object-fit: contain; }
.app-shell:not(.auth-gate) .plate-view.member-plate-list[data-page="plate"] .board-stage .food-text-fallback { position: static !important; display: grid !important; min-width: 42px; min-height: 42px; place-items: center; border-radius: 50%; background: #fff0d4; color: #b5633f; font-size: 12px !important; }
.app-shell:not(.auth-gate) .plate-view.member-plate-list[data-page="plate"] .board-food-copy { position: static !important; left: auto !important; bottom: auto !important; transform: none !important; display: flex; min-width: 0; flex-direction: column; gap: 2px; text-align: left; }
.app-shell:not(.auth-gate) .plate-view.member-plate-list[data-page="plate"] .board-food-copy strong,
.app-shell:not(.auth-gate) .plate-view.member-plate-list[data-page="plate"] .board-food-copy small { max-width: 100%; overflow: hidden; color: #26221d; font-size: 12px !important; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.app-shell:not(.auth-gate) .plate-view.member-plate-list[data-page="plate"] .board-food-copy small { color: #6d5a4d; }

.app-shell:not(.auth-gate) .plate-view.member-plate-list[data-page="plate"] > .board-panel .gram-control { display: grid !important; width: 100% !important; min-width: 0 !important; min-height: 44px !important; height: auto !important; grid-template-columns: 44px 44px minmax(44px, 1fr) 18px 44px 44px !important; align-items: center; gap: 3px; margin: 0 !important; }

.app-shell:not(.auth-gate) .plate-view.member-plate-list[data-page="plate"] > .board-panel .gram-control button { width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; padding: 0; border-radius: 10px; background: #fffaf4; color: #754832; font-size: 15px !important; }
.app-shell:not(.auth-gate) .plate-view.member-plate-list[data-page="plate"] > .board-panel .gram-control input { width: 100% !important; min-width: 44px !important; height: 44px !important; border: 1px solid #cdb9a6; border-radius: 10px; background: #fffdf8; color: #26221d; font-size: 16px !important; }
.app-shell:not(.auth-gate) .plate-view.member-plate-list[data-page="plate"] > .board-panel .gram-control span { font-size: 12px !important; }

.app-shell:not(.auth-gate) .plate-view.member-plate-list[data-page="plate"] > .day-macro-inline { grid-column: 1 / -1 !important; grid-row: auto !important; width: 100% !important; min-height: 28px; height: auto !important; padding: 6px 8px; border-radius: 9px; background: #edf5ed; color: #315c56; font-size: 12px !important; line-height: 1.3; }
.app-shell:not(.auth-gate) .plate-view.member-plate-list[data-page="plate"] > .settlement-strip { position: static !important; display: grid !important; grid-column: 1 / -1 !important; grid-row: auto !important; width: 100% !important; min-height: 44px !important; height: auto !important; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 !important; padding: 0 !important; overflow: visible !important; }
.app-shell:not(.auth-gate) .plate-view.member-plate-list[data-page="plate"] > .settlement-strip button { min-width: 0; min-height: 44px !important; padding: 4px 8px; border: 1px solid #d6c5b4; border-radius: 11px; background: #fffaf4; color: #26221d; font-size: 12px !important; }
.app-shell:not(.auth-gate) .plate-view.member-plate-list[data-page="plate"] > .settlement-strip img { width: 26px; height: 26px; }
.app-shell:not(.auth-gate) .plate-view.member-plate-list[data-page="plate"] .supplement-preview { display: grid; gap: 5px; padding: 8px; border: 1px solid #d6c5b4; border-radius: 12px; background: #fffdf8; font-size: 12px; }

/* Common-meal editor: fixed backdrop, bounded card, scrollable food list. */
.common-meal-dialog { position: fixed !important; z-index: 30; inset: 0; display: grid; place-items: center; padding: 12px; background: rgba(38, 34, 29, .48); }
.common-meal-cards { display: grid; gap: 5px; align-content: start; min-width: 0; }
.common-meal-row { border: 1px solid #d6c5b4; border-radius: 10px; background: #fffdf8; }
#app .custom-entry-card .common-meal-row .common-meal-open { border: 0; background: transparent; }
#app .yesterday-meal-preview > header { display: flex; align-items: center; justify-content: space-between; gap: 2px; }
#app .yesterday-meal-preview > header > strong { min-width: 0; font-size: 10px; }
#app .yesterday-meal-preview > header > button { flex: 0 0 44px; min-height: 44px; padding: 2px; font-size: 11px; background: transparent; border: 0; color: #3e6c61; }
.coach-notes-open { display: flex; width: 100%; height: 100%; min-width: 0; min-height: 44px; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; }
.coach-notes-open .coach-notes-copy { min-width: 0; flex: 1; }
.food-detail-dialog { box-sizing: border-box; width: min(94vw, 460px); max-height: min(85dvh, 680px); margin: auto; padding: 12px; overflow: hidden; border: 2px solid #352b23; border-radius: 20px 17px 22px 19px; background: #fff9ed; color: #352b23; }
.food-detail-dialog[open] { display: flex; flex-direction: column; gap: 8px; }
.food-detail-dialog::backdrop { background: rgba(38, 34, 29, .4); }
.food-detail-dialog > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 0 0 auto; font-size: 15px; }
.food-detail-dialog button { min-height: 44px; min-width: 44px; padding: 5px 10px; border: 1px solid #cdb9a6; border-radius: 10px; background: #ffdc73; color: #352b23; font: inherit; }
.food-detail-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; font-size: 13px; }
.food-detail-content p { margin: 4px 0 10px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.food-detail-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 7px; align-items: center; min-height: 44px; padding: 3px 0; border-bottom: 1px solid #e6dac8; }
.food-detail-row .food-visual { width: 32px; height: 32px; object-fit: contain; }
.food-detail-row strong { overflow-wrap: anywhere; font-size: 13px; }
.food-detail-row > span:last-child { font-variant-numeric: tabular-nums; font-size: 12px; }
.food-detail-dialog > footer { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px; }
.food-detail-dialog .food-detail-error { flex-basis: 100%; margin: 0; color: #a04738; font-size: 12px; }
.food-detail-dialog button:focus-visible { outline: 3px solid #3e6c61; outline-offset: 2px; }

/* One compact heading and tactile supplement tiles, shared by both meal sources. */
#app .member-recommended-summary .summary-head { position: relative !important; gap: 6px !important; }
#app .member-recommended-summary .summary-heading { display: flex; flex: 1; min-width: 0; align-items: center; gap: 6px; }
#app .member-recommended-summary .summary-heading h2 { flex: 0 0 auto; margin: 0; font-size: 18px !important; color: #b85e35; white-space: nowrap; }
#app .member-recommended-summary .summary-notes-link { display: flex; min-height: 44px; min-width: 44px; margin-left: auto; padding: 2px; align-items: center; gap: 4px; color: #6e5948; background: transparent; border: 0; border-radius: 8px; }
#app .member-recommended-summary .summary-notes-link b { font-size: 12px; }
#app .member-recommended-summary .summary-notes-link small { font-size: 10px; color: #9a7455; }
#app .member-recommended-summary .summary-head .summary-status { position: absolute; bottom: -2px; left: 50%; min-height: 4px; margin: 0; padding: 0; font-size: 10px; line-height: 1; }
#app .member-recommended-summary .supplement-section { display: flex !important; flex-direction: column; gap: 4px; padding: 6px !important; min-height: 0; overflow: hidden !important; }
#app .member-recommended-summary .supplement-section > .compact-section-title { flex: 0 0 25px; display: flex; min-height: 25px; gap: 4px; }
#app .member-recommended-summary .supplement-section > .compact-section-title img { width: 24px; height: 24px; }
#app .member-recommended-summary .supplement-section > .compact-section-title strong { font-size: 12px; }
#app .member-recommended-summary .supplement-section > .compact-section-title small { margin-left: auto; font-size: 11px; color: #6e5948; }
#app .supplement-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 4px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
#app .supplement-card { position: relative; box-sizing: border-box; display: flex; flex-direction: column; gap: 3px; min-width: 0; min-height: 76px; padding: 6px; border: 1px solid #d8bea1; border-radius: 11px 8px 12px 9px; background: #fff2cf; color: #493728; cursor: pointer; }
#app .supplement-card.is-complete { background: #e6efdf; border-color: #74967e; }
#app .supplement-card input { position: absolute; top: 5px; right: 5px; width: 18px; height: 18px; min-width: 18px; min-height: 18px; margin: 0; accent-color: #477663; }
#app .supplement-card > b { padding-right: 19px; font-size: 12px; line-height: 1.2; overflow-wrap: anywhere; }
#app .supplement-card > strong { font-size: 12px; line-height: 1.2; }
#app .supplement-card > :is(span,small) { font-size: 10px; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; }
#app .supplement-card .supplement-required { align-self: flex-start; padding: 1px 4px; color: #a05335; background: #f6d8b5; border-radius: 4px; }
#app .supplement-card:focus-within { outline: 2px solid #477663; outline-offset: -2px; }

.recipe-detail-intro { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; column-gap: 8px; padding: 8px; border: 1px dashed #d5b58d; border-radius: 12px; background: #fff0d4; }
.recipe-detail-intro img { grid-row: span 2; width: 48px; height: 40px; object-fit: contain; }
.recipe-detail-intro strong { font-size: 15px; }
.recipe-detail-intro span { font-size: 11px; color: #8c6a4d; }
.recipe-detail-macros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 8px; }
.recipe-detail-macros > div { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 3px; background: #f6e7c5; border-radius: 10px 8px 11px 9px; font-variant-numeric: tabular-nums; }
.recipe-detail-macros > div:nth-child(2) { background: #e5eddf; }
.recipe-detail-macros > div:nth-child(3) { background: #f8dfcd; }
.recipe-detail-macros b { font-size: 18px; line-height: 1.15; }
.recipe-detail-macros small { font-size: 11px; }
.recipe-detail-macros b small { font-size: 10px; padding-left: 2px; }
.recipe-macro-caption { display: block; margin-top: 4px; color: #876c51; font-size: 10px; }
.recipe-detail-group { margin-top: 8px; padding: 6px; border: 1px solid #e0cfb4; border-radius: 11px; background: #fffdf6; }
.recipe-detail-group h4 { display: flex; align-items: center; justify-content: space-between; margin: 0 0 2px; color: #826244; font-size: 12px; }
.recipe-detail-group h4 small { font-size: 10px; }
.recipe-detail-group .food-detail-row:last-child { border-bottom: 0; }
.completed-meal-card { padding: 8px; border: 1px solid #d3c5ac; border-radius: 14px 11px 15px 12px; background: #fffdf5; }
.completed-meal-heading { display: flex; align-items: center; gap: 8px; }
.completed-meal-heading > div { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.completed-meal-heading b { font-size: 15px; }
.completed-meal-heading small { color: #8b7157; font-size: 11px; }
.completed-meal-heading > span:last-child { color: #477663; font-size: 12px; }
.completed-success-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #d7e9ca; color: #477663; font-size: 24px; }
.completed-meal-card details { padding: 5px 0; }
.completed-meal-card summary { min-height: 44px; line-height: 44px; cursor: pointer; font-size: 12px; }
.completed-supplements { display: flex; gap: 6px; align-items: center; padding: 7px 0; border-top: 1px dashed #e3d0b7; font-size: 12px; }
.completed-supplements small { margin-left: auto; color: #846b54; font-size: 11px; }
.completed-photos { display: flex; flex-wrap: wrap; gap: 5px; }
.completed-photos img { width: 52px; height: 52px; object-fit: cover; border: 1px solid #d8c5a8; border-radius: 8px; }
#app .food-detail-dialog.completion-dialog > footer { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; width: 100%; height: auto; min-height: 0; padding: 0; }
#app .completion-dialog > footer > button { position: static !important; width: 100% !important; min-width: 0 !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 6px !important; font-size: 13px !important; }
#app .completion-dialog > footer > .completed-preset-button { grid-column: 1 / -1; background: #f6e7c5; font-size: 12px !important; }
#app .completion-dialog .photo-file-input { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; clip-path: inset(50%); overflow: hidden; opacity: 0; }
@media (max-width: 350px) { #app .supplement-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-height: 450px) {
  #app .supplement-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.common-meal-dialog-card {
  display: flex;
  width: min(100%, 390px);
  max-height: 82dvh;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  overflow: hidden;
  border: 1.5px solid #26221d;
  border-radius: 17px;
  background: #fffaf4;
  color: #26221d;
}

.common-meal-dialog-card > header { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: 8px; }
.common-meal-dialog-card > header strong { min-width: 0; font-size: 15px; }
.common-meal-dialog-card > header button,
.common-meal-editor-row > button { width: 44px; min-width: 44px; height: 44px; border-radius: 10px; background: #fff0e5; color: #754832; font-size: 20px; }
.common-meal-dialog-card > label { display: grid; gap: 4px; color: #6d5a4d; font-size: 12px; }
.common-meal-dialog-card input,
.common-meal-dialog-card select { width: 100%; min-width: 0; min-height: 44px; padding: 6px 8px; border: 1px solid #cdb9a6; border-radius: 9px; background: #fffdf8; color: #26221d; font-size: 16px !important; }
.common-meal-dialog-card .common-meal-editor-list { display: grid; min-height: 0; gap: 5px; overflow-y: auto; overscroll-behavior: contain; }
.common-meal-dialog-card .common-meal-editor-row { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) 78px 20px auto; align-items: center; gap: 4px; }
.common-meal-dialog-card .common-meal-editor-row small { font-size: 12px; }
.common-meal-dialog-card > p { min-height: 0; margin: 0; color: #a34e3d; font-size: 12px; }
.common-meal-dialog-card > button[data-action="add-common-meal-food"] { min-height: 44px; border-radius: 10px; background: #fff0e5; color: #754832; font-size: 12px; }
.common-meal-dialog-card > footer { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.common-meal-dialog-card > footer button { min-height: 44px; border-radius: 10px; background: #f1e6dc; color: #26221d; font-size: 12px; }
.common-meal-dialog-card > footer .primary-button { padding: 8px; background: #df7f4d; color: #fff; }

/* Visible keyboard focus only; touch remains large without a permanent ring. */
.app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home[data-page="home"] :is(.coach-preview-food, .yesterday-food-row) .food-text-fallback {
  box-sizing: border-box;
  display: grid;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  place-items: center;
  padding: 0 !important;
  border-radius: 7px;
  background: #fff0d4;
  color: #8d6347;
  font-size: 10px !important;
  line-height: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis;
  white-space: nowrap !important;
}
.app-shell:not(.auth-gate) .plate-view.member-plate-list[data-page="plate"] > .day-macro-inline {
  display: block !important; white-space: normal !important; overflow: visible !important;
  overflow-wrap: anywhere; text-align: center; line-height: 1.5 !important;
}

.member-meals-home button:focus-visible,
.member-plate-list button:focus-visible,
.common-meal-dialog button:focus-visible,
.common-meal-dialog input:focus-visible,
.common-meal-dialog select:focus-visible,
.member-meals-home input:focus-visible,
.member-plate-list input:focus-visible {
  outline: 2px solid #5d877e;
  outline-offset: 2px;
}

@media (max-width: 375px) {
  .app-shell:not(.auth-gate) .plate-view.member-plate-list[data-page="plate"] { gap: 7px !important; }
  .member-plate-list > .board-panel .gram-control { grid-template-columns: 44px 44px minmax(38px, 1fr) 16px 44px 44px !important; gap: 2px; }
  .member-plate-list > .board-panel .gram-control input { min-width: 38px; }
}

/* Compact plate and read-only recommendation share the same four food groups. */
#app .app-shell:not(.auth-gate) .member-plate-list[data-page="plate"] {
  position: relative !important;
  height: 100% !important;
  grid-template-rows: 44px minmax(0, 1fr) auto auto 44px !important;
  gap: 4px !important;
  padding: 0 2px 4px !important;
  overflow: hidden !important;
}
#app .member-plate-list .member-plate-frame {
  display: flex !important;
  min-height: 0 !important;
  flex-direction: column;
  gap: 4px !important;
  padding: 6px !important;
  border: 1.5px solid #26221d;
  border-radius: 14px;
  background: #fffaf4;
  overflow: hidden;
}
#app .member-plate-list .member-plate-targets { flex: 0 0 auto; }
#app .member-plate-list .member-food-groups {
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
  gap: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#app .member-plate-list[data-page="plate"] > .board-panel { gap: 4px !important; padding: 5px !important; }
#app .member-plate-list[data-page="plate"] .board-stage { min-height: 44px !important; padding: 2px 6px !important; }
#app .member-plate-list[data-page="plate"] .board-stage .board-food { width: 34px !important; height: 34px !important; flex-basis: 34px; }
#app .member-plate-list[data-page="plate"] > .day-macro-inline { min-height: 0; padding: 4px 6px; line-height: 1.25 !important; }
#app .member-plate-list[data-page="plate"] > .supplement-preview {
  position: absolute !important;
  inset: auto 2px 52px !important;
  z-index: 5;
  max-height: 45%;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#app .app-shell:not(.auth-gate) .member-recommended-summary[data-page="summary"] {
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-template-rows: 44px minmax(0, 1fr) 64px minmax(72px, .7fr) 52px !important;
  grid-template-areas: "head head" "foods foods" "veg photo" "supplement supplement" "footer footer" !important;
  gap: 4px !important;
  overflow: hidden !important;
}
#app .member-recommended-summary > .member-recommended-foods { grid-area: foods !important; }
#app .member-recommended-summary > .subhead { grid-area: head !important; min-height: 44px !important; }
#app .member-recommended-summary .subhead h2 { font-size: 18px !important; }
#app .member-recommended-summary .board-macro-panel { position: static !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 4px; padding: 4px; }
#app .member-recommended-summary .board-macro-title { display: flex; justify-content: space-between; font-size: 12px; }
#app .member-recommended-summary .board-macro-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
#app .member-recommended-summary .board-macro-row { display: flex; flex-direction: column; padding: 3px; }
#app .member-recommended-summary .board-macro-row :is(span, strong, small) { font-size: 12px !important; line-height: 1.2 !important; }
#app .member-recommended-summary > .supplement-section { overflow-y: auto !important; overscroll-behavior: contain; }
#app .member-recommended-summary .coach-notes-copy { min-height: 0; max-height: 100%; overflow-y: auto !important; overscroll-behavior: contain; }
#app .member-recommended-summary .coach-notes-copy span { white-space: normal !important; overflow: visible !important; display: block !important; font-size: 12px !important; line-height: 1.3 !important; -webkit-line-clamp: unset !important; }
#app .member-recommended-summary .member-food-row .food-text-fallback { width: 32px; height: 32px; min-width: 0; min-height: 0; padding: 0; font-size: 11px; }

@media (max-height:450px) {
  /* Keep the page fixed on short screens; the plate frame owns long content. */
  #app .member-plate-list .member-plate-frame { overflow-y: auto !important; overscroll-behavior: contain; }
  #app .member-plate-list .member-plate-frame > * { flex: 0 0 auto !important; }
  #app .member-plate-list .member-food-groups { overflow: visible; }
  #app .app-shell:not(.auth-gate) .member-recommended-summary[data-page="summary"] {
    grid-template-rows:44px 44px 64px minmax(56px,1fr) 52px !important;
    grid-template-areas:"head head" "foods veg" "foods photo" "foods supplement" "footer footer" !important;
  }
}

/* Shared swipe markers: reserve their own bottom padding so dots never cover content. */
.swipe-position-host { position: relative; }
.has-swipe-position {
  box-sizing: border-box;
  padding-bottom: max(9px, var(--swipe-original-padding, 0px)) !important;
}
.swipe-position {
  position: absolute;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: 5px;
  pointer-events: none;
}
.swipe-position-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 8px;
  pointer-events: none;
}
.swipe-position i,
.swipe-position-inline i {
  box-sizing: border-box;
  display: block;
  width: 4px;
  height: 4px;
  flex: 0 0 4px;
  border-radius: 50%;
  background: #c9baaa;
}
.swipe-position i.is-active,
.swipe-position-inline i.is-active {
  width: 8px;
  flex-basis: 8px;
  background: #426e61;
}