/* The meal home owns the remaining app height; other screens keep their shell rules. */
.app-shell:not(.auth-gate):has(.member-meals-home > .diet-calendar-inline) .app-main {
  height: 100%;
  min-height: 0;
  flex: 1 1 0;
  overflow: hidden;
}

.app-shell:not(.auth-gate) .screen-content:has(.member-meals-home > .diet-calendar-inline) {
  height: 100%;
  min-height: 0;
  flex: 1 1 0;
  overflow: hidden !important;
  padding: 0 10px 4px !important;
}

.app-shell:not(.auth-gate) .screen-anchor:has(.member-meals-home > .diet-calendar-inline) {
  height: 100% !important;
  min-height: 0 !important;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
  padding: 4px 0 0 !important;
}

.app-shell:not(.auth-gate) [data-role="screen"]:has(.member-meals-home > .diet-calendar-inline) {
  height: 100% !important;
  min-height: 0 !important;
  flex: 1 1 0;
  display: flex !important;
  flex-direction: column;
  overflow: hidden !important;
}

.app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home:has(> .diet-calendar-inline) {
  box-sizing: border-box;
  width: 100%;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: 1 1 0;
  display: flex !important;
  flex-direction: column;
  align-items: stretch !important;
  justify-content: flex-start;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 2px 3px;
  overflow: hidden !important;
}

.app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home:has(> .diet-calendar-inline) > * {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  grid-column: auto !important;
  grid-row: auto !important;
  min-width: 0;
  width: 100% !important;
  margin: 0 !important;
}

.member-meals-home > .home-version-line {
  min-height: 30px;
  flex: 0 0 30px;
  align-items: center;
  gap: 5px;
  color: #715640;
  font-size: 11px;
  line-height: 1.15;
}

.member-meals-home .original-version-button {
  min-height: 28px;
  padding: 3px 7px;
  border: 1px solid #563d2c;
  border-radius: 11px 9px 12px 8px;
  background: #fff8e8;
  color: #563d2c;
  font-size: 11px;
}

.app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home:has(> .diet-calendar-inline) > .today-macro-balance {
  min-height: 48px !important;
  flex: 0 0 auto;
  padding: 4px 7px !important;
  border: 1.5px solid #493728;
  border-radius: 14px 12px 15px 11px;
  background: #fff9e9;
  box-shadow: 1px 2px 0 #edce8b;
  overflow: hidden !important;
}

.member-meals-home .today-macro-balance-head {
  min-height: 22px;
  gap: 5px;
}

.member-meals-home .today-macro-balance-head strong,
.member-meals-home .today-macro-balance-grid span,
.member-meals-home .today-macro-balance-grid strong {
  font-size: 11px !important;
  line-height: 1.2 !important;
}

.member-meals-home .today-macro-balance-head small { font-size: 11px !important; }

.member-meals-home .home-meal-tabs {
  min-height: 34px !important;
  height: 34px !important;
  flex: 0 0 34px;
  gap: 4px;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.member-meals-home .home-meal-tabs::-webkit-scrollbar { display: none; }

.member-meals-home .home-meal-tabs .meal-tab {
  min-width: 0;
  min-height: 32px !important;
  height: 32px !important;
  flex: 1 0 0;
  align-items: center;
  justify-content: center;
  padding: 3px 4px;
  border: 1.5px solid #493728;
  border-radius: 12px 10px 13px 9px !important;
  background: #fff9eb;
  color: #493728;
}

.member-meals-home .home-meal-tabs .meal-tab span { font-size: 11px !important; }
.member-meals-home .home-meal-tabs .meal-tab small { display: none; }
.member-meals-home .home-meal-tabs .meal-tab.is-active { background: #ffda70; box-shadow: 1px 2px 0 #e9b84d; }

.app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home:has(> .diet-calendar-inline) > .home-entry-grid {
  min-height: 0 !important;
  max-height: 76px;
  flex: 0 0 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: 76px !important;
  gap: 4px;
  overflow: visible !important;
}

.app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home:has(> .diet-calendar-inline) .home-entry {
  min-width: 0;
  min-height: 76px !important;
  height: 76px !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1px;
  padding: 4px 5px;
  border: 1.5px solid #493728;
  border-radius: 13px 11px 14px 10px;
  background: #fff9eb;
  box-shadow: 1px 2px 0 #edd59e !important;
  overflow: visible !important;
}

.app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home:has(> .diet-calendar-inline) .home-entry.coach-entry {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 22px minmax(0, 1fr);
  align-items: center;
  gap: 1px 4px;
  padding: 4px 5px;
}

.app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home[data-page="home"] .home-entry.coach-entry > span:nth-child(2) {
  position: static !important;
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-align: left;
}

.app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home[data-page="home"] .home-entry.coach-entry > i {
  position: static !important;
  grid-column: 2;
  grid-row: 1;
  padding: 2px 5px;
  border-radius: 7px;
  background: #ffd86e;
  color: #493728;
  font-size: 11px !important;
  line-height: 1.1;
}

.app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home[data-page="home"] .home-entry.coach-entry > .coach-meal-preview {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  grid-auto-rows: minmax(14px, 1fr) !important;
  gap: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

.app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home[data-page="home"] .coach-preview-food {
  min-height: 14px !important;
  grid-template-columns: 16px minmax(0, 1fr) auto !important;
  gap: 0 4px !important;
  padding: 0 2px !important;
}

.app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home[data-page="home"] .coach-preview-food > :is(.food-visual, strong, small) {
  min-width: 0 !important;
  overflow: hidden;
  font-size: 11px !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home[data-page="home"] .coach-preview-food > .food-visual { width: 15px !important; height: 15px !important; }

.app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home:has(> .diet-calendar-inline) .home-entry.custom-entry-card {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: 3px 5px;
}

.app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home:has(> .diet-calendar-inline) .custom-entry-card .common-meals-section {
  min-height: 0;
  flex: 1 1 0;
  margin: 0 !important;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home:has(> .diet-calendar-inline) .custom-entry-card .common-meal-row button {
  min-height: 26px;
  padding: 2px 3px;
  font-size: 11px;
}

.app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home:has(> .diet-calendar-inline) .custom-entry-head { min-height: 25px; flex: 0 0 25px; gap: 4px; }
.app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home:has(> .diet-calendar-inline) .custom-entry-head strong { font-size: 11px; white-space: nowrap; }
.app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home:has(> .diet-calendar-inline) .custom-entry-head button { min-width: 0; min-height: 28px; height: 28px; padding: 2px 5px; font-size: 11px; white-space: nowrap; }
.app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home:has(> .diet-calendar-inline) .custom-entry-card .common-meals-section > header { min-height: 16px; }
.app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home:has(> .diet-calendar-inline) .custom-entry-card .common-meal-row { grid-template-columns: minmax(0, 1fr) 28px; gap: 2px; }
.app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home:has(> .diet-calendar-inline) .custom-entry-card .common-meal-edit { width: 28px; min-width: 28px; height: 28px; padding: 2px; }

.app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home:has(> .diet-calendar-inline[data-calendar-focus="true"]) > .today-macro-balance,
.app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home:has(> .diet-calendar-inline[data-calendar-focus="true"]) > .home-meal-tabs,
.app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home:has(> .diet-calendar-inline[data-calendar-focus="true"]) > .home-entry-grid {
  display: none !important;
}

/* Calendar palette: paper cream, pencil-dark outlines, and a warm yellow date mark. */
.diet-calendar-inline {
  --calendar-ink: #493728;
  --calendar-muted: #735e4a;
  --calendar-line: #564332;
  --calendar-paper: #fff9eb;
  --calendar-yellow: #ffda70;
  --calendar-orange: #ed8b42;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  height: 100%;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 6px;
  overflow: hidden;
  border: 1.5px solid var(--calendar-line);
  border-radius: 18px 15px 19px 14px;
  background: linear-gradient(145deg, #fffdf4 0%, var(--calendar-paper) 72%, #fff3d8 100%);
  box-shadow: 2px 3px 0 #edc96f;
  color: var(--calendar-ink);
  font-family: var(--font-round, "PingFang SC", sans-serif);
  font-size: 11px;
  line-height: 1.2;
}

.diet-calendar-inline:not([data-calendar-focus="true"]):not([data-calendar-expanded="true"]):not([data-detail="true"]) {
  justify-content: flex-start;
  gap: 3px;
}

.diet-calendar-inline *,
.diet-record-dialog * { box-sizing: border-box; }

.diet-calendar-inline button,
.diet-record-dialog button {
  min-width: 0;
  min-height: 32px;
  padding: 3px 6px;
  border: 1.5px solid var(--calendar-line, #564332);
  border-radius: 10px 8px 11px 9px;
  background: #fffdf6;
  color: var(--calendar-ink, #493728);
  font: inherit;
  font-size: 11px;
  line-height: 1.1;
  touch-action: manipulation;
  cursor: pointer;
}

.diet-calendar-inline button:focus-visible,
.diet-record-dialog button:focus-visible {
  outline: 2px solid #b96636;
  outline-offset: 2px;
}

.diet-calendar-heading {
  min-width: 0;
  min-height: 30px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 5px;
}

.diet-calendar-heading h3 {
  flex: 0 0 auto;
  margin: 0;
  color: var(--calendar-ink);
  font-family: var(--font-hand, "PingFang SC", sans-serif);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.diet-calendar-heading > button { flex: 0 0 auto; }

.diet-calendar-month {
  min-width: 0;
  min-height: 30px;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  margin: 0;
}

.diet-calendar-month strong {
  min-width: 0;
  flex: 1 1 auto;
  color: var(--calendar-ink);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.diet-calendar-month button {
  flex: 0 0 auto;
  min-width: 30px;
  min-height: 30px;
  padding: 2px 4px;
  font-size: 11px;
}

.diet-calendar-month button[data-host-action="month-prev"],
.diet-calendar-month button[data-host-action="month-next"] {
  min-width: 30px;
  padding: 1px;
  color: #8a4d2b;
  font-size: 18px;
  font-weight: 700;
}

.diet-calendar-inline .diet-return-today { display: none; }
.diet-calendar-inline[data-calendar-focus="true"] .diet-return-today { display: inline-flex; }

.diet-calendar-inline > .diet-calendar-month { flex: 0 0 30px; }
.diet-calendar-inline > .diet-calendar-heading + .diet-calendar-month { justify-content: center; }

.diet-calendar-week {
  min-width: 0;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  padding: 1px 0;
}

.diet-calendar-day {
  min-width: 0;
  min-height: 38px;
  height: 40px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 2px 1px;
  border: 1px solid transparent;
  border-radius: 12px 9px 11px 8px;
  color: var(--calendar-ink);
  font-size: 11px;
  line-height: 1.05;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.diet-calendar-day strong { font-size: 13px; line-height: 1.05; }
.diet-calendar-day.is-selected { border-color: var(--calendar-line); background: var(--calendar-yellow); box-shadow: 1px 2px 0 #e7b64d; }
.diet-calendar-day.is-today { outline: 1px dashed #d77438; outline-offset: -3px; }

.calendar-grid {
  min-width: 0;
  min-height: 0;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: 18px repeat(6, 40px);
  gap: 2px;
  overflow: hidden;
  padding: 0 0 1px;
}

.calendar-weekday {
  min-width: 0;
  min-height: 18px;
  display: grid;
  place-items: center;
  color: var(--calendar-muted);
  font-size: 11px;
  line-height: 1;
}

.calendar-cell {
  min-width: 0;
  min-height: 38px;
  height: 40px;
  padding: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
}

.diet-calendar-inline .calendar-cell > button {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 1px;
  border-color: transparent;
  border-radius: 10px 8px 11px 9px;
  background: transparent;
  font-size: 11px;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.calendar-cell.has-record > button { background: #fff0c7; }
.calendar-cell.is-selected > button,
.calendar-cell > button[aria-pressed="true"] { border-color: var(--calendar-line); background: var(--calendar-yellow); box-shadow: 1px 2px 0 #e7b64d; }
.calendar-meal-dots,
.calendar-state-dots { min-height: 5px; display: flex; align-items: center; justify-content: center; gap: 2px; margin-top: 1px; }
.calendar-meal-dots i,
.calendar-state-dots b { width: 4px; height: 4px; flex: 0 0 4px; display: block; border-radius: 50%; background: #d8c4a1; }
.calendar-meal-dots .is-done,
.calendar-state-dots .is-done { background: #e17c3c; }
.calendar-state-dots .photo-dot { background: #7c8d55; }
.diet-calendar-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px 8px; padding: 1px 0; color: var(--calendar-muted); font-size: 11px; }
.diet-calendar-legend i { width: 7px; height: 7px; display: inline-block; margin-right: 3px; border: 1px solid #b66d3f; border-radius: 50%; vertical-align: 1px; }

.diet-calendar-summary {
  min-width: 0;
  min-height: 30px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding-top: 3px;
  border-top: 1px dashed #cbaa70;
  color: var(--calendar-muted);
  font-size: 11px;
}

.diet-calendar-summary > span:first-child {
  min-width: 0;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.diet-calendar-summary > strong {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  color: var(--calendar-ink);
  font-size: 11px;
  line-height: 1.1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diet-calendar-summary button { min-height: 30px; flex: 0 0 auto; padding: 3px 7px; background: #ffedb7; }

.diet-day-overview {
  min-width: 0;
  min-height: 36px;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.diet-day-overview > * {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 2px 4px;
  border: 1px solid #8d704c;
  border-radius: 10px 8px 11px 9px;
  background: #fff5d8;
  text-align: center;
}

.diet-day-overview :is(label, span) { min-width: 0; color: var(--calendar-muted); font-size: 11px; line-height: 1.1; }
.diet-day-overview strong { max-width: 100%; overflow: hidden; color: var(--calendar-ink); font-size: 12px; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }

.diet-calendar-glance {
  min-width: 0;
  min-height: 60px;
  height: clamp(60px, 8vh, 76px);
  flex: 0 0 clamp(60px, 8vh, 76px);
  display: flex;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.diet-calendar-glance::-webkit-scrollbar { display: none; }
.diet-calendar-glance > .diet-glance-meal { min-width: 96px; flex: 0 0 108px; }

.diet-calendar-glance .diet-glance-meal button,
.diet-calendar-glance > button.diet-glance-meal {
  width: 100%;
  height: 100%;
  min-height: 60px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 1px 5px;
  padding: 4px;
  text-align: left;
}

.diet-calendar-glance > button.diet-glance-meal:not(:has(figure)) { grid-template-columns: minmax(0, 1fr); }
.diet-glance-meal figure { grid-column: 1; grid-row: 1 / -1; width: 32px; height: 32px; margin: 0; }
.diet-glance-meal figure img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; }
.diet-glance-meal strong,
.diet-glance-meal small { min-width: 0; overflow: hidden; font-size: 11px; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.diet-glance-meal strong { grid-column: 2; grid-row: 1; }
.diet-glance-meal small { grid-column: 2; grid-row: 2; color: var(--calendar-muted); }
.diet-calendar-glance > button.diet-glance-meal:not(:has(figure)) :is(strong, small) { grid-column: 1; }

.diet-glance-states {
  min-width: 0;
  min-height: 30px;
  flex: 0 0 30px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.diet-glance-states > * { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 2px 4px; border: 1px solid #8d704c; border-radius: 9px 7px 10px 8px; background: #fff5d8; }
.diet-glance-states :is(label, span, strong, small) { min-width: 0; overflow: hidden; font-size: 11px; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.diet-glance-states :is(label, span, small) { color: var(--calendar-muted); }
.diet-calendar-inline[data-calendar-focus="true"] :is(.diet-calendar-glance, .diet-glance-states) { display: none; }

.diet-record-tabs {
  min-width: 0;
  min-height: 34px;
  flex: 0 0 34px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3px;
}

.diet-record-tabs button {
  min-width: 0;
  min-height: 32px;
  padding: 2px;
  border-radius: 10px 8px 11px 9px;
  background: #fffdf6;
  font-size: 11px;
  white-space: nowrap;
}

.diet-record-tabs button[aria-selected="true"],
.diet-record-tabs button.is-active { background: var(--calendar-yellow); box-shadow: 1px 2px 0 #e7b64d; }

.diet-record-viewport {
  position: relative;
  min-width: 0;
  min-height: 0;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.diet-meal-carousel,
.diet-metric-carousel {
  min-width: 0;
  min-height: 0;
  flex: 1 1 0;
  display: flex;
  gap: 5px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.diet-meal-carousel::-webkit-scrollbar,
.diet-metric-carousel::-webkit-scrollbar { display: none; }

.diet-metric-carousel { flex: 0 0 136px; height: 136px; align-items: flex-start; }

.diet-meal-card {
  min-width: 0;
  min-height: 0;
  height: 100%;
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  padding: 6px;
  border: 1.5px solid #604933;
  border-radius: 14px 12px 15px 11px;
  background: #fffdf5;
  scroll-snap-align: start;
}

.diet-meal-head {
  min-width: 0;
  min-height: 25px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}

.diet-meal-head :is(h4, strong) { min-width: 0; margin: 0; overflow: hidden; font-size: 12px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.diet-meal-head button { min-height: 30px; flex: 0 0 auto; padding: 2px 6px; }
.diet-meal-head .meal-status { flex: 0 0 auto; padding: 2px 5px; border-radius: 8px 7px 9px 6px; background: #edf1d8; color: #586540; font-size: 11px; white-space: nowrap; }
.diet-meal-head .meal-status:not(.is-done) { background: #f4e6d1; color: var(--calendar-muted); }
.diet-meal-head .meal-status.is-deviation { background: #f8d8cf; color: #8b382d; border: 1px solid #d78b78; }

.diet-meal-macros {
  min-width: 0;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
}

.diet-meal-macros > * {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 3px 4px;
  border-radius: 8px 7px 9px 7px;
  background: #fff1cb;
  text-align: center;
}

.diet-meal-macros :is(label, span) { color: var(--calendar-muted); font-size: 11px; line-height: 1.05; }
.diet-meal-macros :is(strong, b) { overflow: hidden; font-size: 11px; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.diet-meal-macros small { color: var(--calendar-muted); font-size: 11px; line-height: 1.05; }

.diet-meal-content {
  min-width: 0;
  min-height: 0;
  flex: 1 1 0;
  display: grid;
  grid-template-columns: minmax(76px, .72fr) minmax(0, 1.28fr);
  gap: 5px;
  overflow: hidden;
}

.diet-meal-content > :first-child {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: 100%;
}

.diet-meal-content > .meal-photo-preview { height: 150px; max-height: 150px; align-self: start; justify-content: flex-start; }

.diet-meal-content > span:first-child {
  display: grid;
  place-items: center;
  padding: 4px;
  border-radius: 9px;
  background: #fff5d9;
  color: var(--calendar-muted);
  font-size: 11px;
  text-align: center;
}

.meal-photo-preview {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 3px;
  margin: 0;
  overflow: hidden;
  color: var(--calendar-muted);
  font-size: 11px;
  text-align: center;
}

.meal-photo-open {
  min-width: 0;
  min-height: 0 !important;
  flex: 0 1 auto;
  max-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  overflow: hidden;
  padding: 3px !important;
  background: #fff5d9 !important;
  font-size: 11px !important;
}

.meal-photo-open img {
  display: block;
  width: 100%;
  min-height: 0;
  max-height: 112px;
  flex: 0 1 auto;
  object-fit: contain;
  border-radius: 8px;
}

.diet-food-preview {
  min-width: 0;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 2px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 3px 5px;
  border: 1px dashed #bd9b64;
  border-radius: 10px 8px 11px 9px;
  background: #fffaf0;
}

.diet-food-preview > * {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  min-height: 14px;
  gap: 1px;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.15;
}

.diet-food-preview :is(strong, b, span, small) { min-width: 0; overflow: hidden; font-size: 11px; line-height: 1.15; text-overflow: ellipsis; }
.diet-food-preview small { flex: 0 0 auto; color: var(--calendar-muted); white-space: nowrap; }

.diet-meal-footer {
  min-width: 0;
  min-height: 32px;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
}

.diet-meal-footer button {
  min-width: 0;
  min-height: 30px;
  overflow: hidden;
  padding: 2px 3px;
  background: #ffedbd;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diet-meal-footer .diet-meal-complete { background: #ffd77a; font-weight: 700; }

.diet-meal-pagination {
  min-height: 32px;
  flex: 0 0 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--calendar-muted);
  font-size: 11px;
  line-height: 1;
}

.diet-meal-pagination button { min-width: 30px; min-height: 30px; padding: 2px 6px; }
.diet-meal-pagination span { min-width: 0; font-size: 11px; text-align: center; }

.diet-record-metrics {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, 64px);
  grid-auto-rows: 64px;
  align-content: start;
  gap: 4px;
  overflow: hidden;
}

.diet-metric-page {
  min-width: 0;
  height: auto;
  align-self: flex-start;
  flex: 0 0 100%;
  display: block;
  scroll-snap-align: start;
}

.diet-metric-page > .diet-record-metrics {
  width: 100%;
  height: auto;
}

.diet-record-context {
  min-width: 0;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 60px;
  gap: 4px;
  margin-top: 6px;
}

.diet-calendar-inline .diet-record-context > button {
  min-width: 0;
  min-height: 48px;
  max-height: 64px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  overflow: hidden;
  padding: 4px 6px;
  border: 1.5px solid #755735;
  border-radius: 11px 9px 12px 8px;
  background: #fff5d8;
  box-shadow: 1px 2px 0 #ead49f;
  text-align: left;
}

.diet-record-context :is(label, span, small) {
  max-width: 100%;
  overflow: hidden;
  color: var(--calendar-muted);
  font-size: 11px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diet-record-context :is(strong, b) {
  max-width: 100%;
  overflow: hidden;
  color: var(--calendar-ink);
  font-size: 11px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diet-record-value {
  min-width: 0;
  min-height: 54px;
  max-height: 72px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
  overflow: hidden;
  padding: 4px 5px !important;
  border: 1.5px solid #755735 !important;
  border-radius: 11px 9px 12px 8px !important;
  background: #fff5d8 !important;
  box-shadow: 1px 2px 0 #ead49f;
  text-align: left;
}

.diet-record-value :is(label, span) {
  max-width: 100%;
  display: block;
  overflow: hidden;
  color: var(--calendar-muted);
  font-size: 12px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diet-record-value b {
  max-width: 100%;
  display: -webkit-box;
  overflow: hidden;
  color: var(--calendar-ink);
  font-size: 16px;
  line-height: 1.15;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
}

.diet-record-value[aria-expanded="true"] b,
.diet-record-value.is-expanded b { display: block; overflow: auto; -webkit-line-clamp: unset; }

.diet-calendar-empty {
  min-width: 0;
  min-height: 52px;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px;
  border: 1px dashed #b8945c;
  border-radius: 14px 11px 15px 10px;
  background: #fff8e4;
  color: var(--calendar-muted);
  font-size: 11px;
  text-align: center;
}

.diet-calendar-empty :is(strong, p) { margin: 0; color: var(--calendar-ink); font-size: 11px; line-height: 1.25; }

.diet-calendar-inline[data-calendar-expanded="false"] .calendar-grid,
.diet-calendar-inline[data-calendar-expanded="false"] .diet-calendar-legend { display: none; }
.diet-calendar-inline[data-calendar-expanded="true"] .diet-calendar-week { display: none; }

.diet-calendar-inline:not([data-detail="true"]) .diet-record-tabs,
.diet-calendar-inline:not([data-detail="true"]) .diet-record-viewport,
.diet-calendar-inline:not([data-detail="true"]) .diet-meal-pagination { display: none; }

.diet-record-dialog {
  width: min(430px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: 85dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 2px solid #493728;
  border-radius: 18px 15px 19px 14px;
  background: #fff9eb;
  color: #493728;
  box-shadow: 3px 4px 0 #e8c36a;
  font-size: 11px;
}

.diet-record-dialog[open] {
  position: fixed;
  inset: 50% auto auto 50%;
  display: flex;
  flex-direction: column;
  transform: translate(-50%, -50%);
}

.diet-record-dialog::backdrop { background: rgba(42, 30, 20, .48); }

.diet-record-dialog > header {
  min-width: 0;
  min-height: 42px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 9px;
  border-bottom: 1px dashed #b8945c;
  background: #fff0c9;
}

.diet-record-dialog > header :is(h2, h3, strong) { min-width: 0; margin: 0; overflow: hidden; font-size: 14px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.diet-record-dialog > header button { min-height: 32px; flex: 0 0 auto; }

.diet-record-dialog-content {
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px;
  font-size: 11px;
  line-height: 1.35;
  -webkit-overflow-scrolling: touch;
}

.diet-record-dialog-content dl {
  display: grid;
  grid-template-columns: minmax(72px, .45fr) minmax(0, 1fr);
  gap: 4px 8px;
  margin: 0;
}

.diet-record-dialog-content dt,
.diet-record-dialog-content dd { min-width: 0; margin: 0; font-size: 11px; overflow-wrap: anywhere; }
.diet-record-dialog-content dt { color: #735e4a; }
.diet-record-dialog-content dd { color: #493728; }

.diet-full-foods {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin-top: 8px;
}

.diet-full-foods > * {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px;
  overflow-wrap: anywhere;
  padding: 4px 5px;
  border: 1px solid #b8945c;
  border-radius: 9px 7px 10px 8px;
  background: #fffdf6;
  font-size: 11px;
}

.diet-full-foods :is(b, strong, span, small) { min-width: 0; font-size: 11px; overflow-wrap: anywhere; }

.diet-record-dialog-content dl.diet-full-foods {
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.diet-record-dialog-content dl.diet-full-foods > div {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  padding: 7px 8px;
}

.diet-record-dialog-content dl.diet-full-foods > div > dt,
.diet-record-dialog-content dl.diet-full-foods > div > dd {
  min-width: 0;
  margin: 0;
  font-size: 14px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.diet-record-dialog-content dl.diet-full-foods > div > dt { color: #493728; font-weight: 700; }
.diet-record-dialog-content dl.diet-full-foods > div > dd { color: #735e4a; }

.diet-record-dialog-content .meal-photo-preview {
  width: 100%;
  max-height: 180px;
  flex: 0 0 auto;
  align-items: center;
}

.diet-record-dialog-content .meal-photo-open { width: 100%; max-width: 100%; max-height: 180px; height: auto; }
.diet-record-dialog-content .meal-photo-open img { width: auto; max-width: 100%; max-height: 180px; }

.diet-pvt-history {
  min-width: 0;
  min-height: 0;
  flex: 0 0 48px;
  display: flex;
  align-items: stretch;
  gap: 5px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.diet-pvt-history:empty { display: none; }
.diet-pvt-history button { min-width: 104px; min-height: 42px; flex: 0 0 auto; padding: 4px 7px; background: #fff1cb; font-size: 11px; }
.diet-pvt-history::-webkit-scrollbar { display: none; }

@media (max-width: 359px) {
  .app-shell:not(.auth-gate) .screen-content:has(.member-meals-home > .diet-calendar-inline) { padding-inline: 7px !important; }
  .diet-calendar-inline { gap: 3px; padding: 5px; }
  .diet-calendar-heading { gap: 3px; }
  .diet-calendar-heading h3 { font-size: 13px; }
  .diet-calendar-month { gap: 1px; }
  .diet-calendar-month button { min-width: 28px; padding-inline: 2px; }
  .diet-calendar-month strong { font-size: 11px; }
  .diet-record-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, 64px); grid-auto-rows: 64px; }
  .diet-metric-carousel { flex-basis: 204px; height: 204px; }
  .diet-meal-content { grid-template-columns: minmax(70px, .62fr) minmax(0, 1.38fr); gap: 4px; }
}

@media (max-height: 600px) {
  .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home:has(> .diet-calendar-inline) { gap: 3px !important; padding-bottom: 2px; }
  .diet-calendar-inline { gap: 3px; padding: 5px; }
  .diet-calendar-heading { min-height: 28px; }
  .diet-calendar-month,
  .diet-calendar-month button { min-height: 28px; }
  .diet-day-overview { min-height: 34px; }
  .diet-record-tabs { min-height: 32px; flex-basis: 32px; }
  .diet-record-tabs button { min-height: 30px; }
  .diet-calendar-inline .diet-record-context { display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .diet-calendar-inline .diet-record-context > button { min-width: calc((100% - 4px) / 2); height: 60px; flex: 0 0 calc((100% - 4px) / 2); scroll-snap-align: start; }
  .diet-record-metrics { grid-template-rows: none; grid-auto-rows: 54px; }
  .diet-metric-carousel { flex-basis: 116px; height: 116px; }
  .diet-record-viewport:has(.diet-meal-pagination) .diet-record-context { display: none; }
  .diet-pvt-history { flex-basis: 34px; min-height: 34px; }
  .diet-pvt-history button { min-height: 30px; }
}

@media (max-width: 359px) and (min-height: 451px) and (max-height: 600px) {
  .diet-metric-carousel { flex-basis: 174px; height: 174px; }
}

@media (max-height: 500px) {
  .member-meals-home > .home-version-line { min-height: 30px; flex-basis: 30px; }
  .member-meals-home .today-macro-balance { min-height: 42px !important; padding: 2px 5px !important; }
  .member-meals-home .today-macro-balance-head { min-height: 16px; gap: 3px; }
  .member-meals-home .home-meal-tabs { min-height: 28px !important; height: 28px !important; flex-basis: 28px; }
  .member-meals-home .home-meal-tabs .meal-tab { min-height: 26px !important; height: 26px !important; padding: 2px; }
  .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home:has(> .diet-calendar-inline) > .home-entry-grid { max-height: 68px; grid-auto-rows: 68px !important; }
  .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home:has(> .diet-calendar-inline) .home-entry { min-height: 68px !important; height: 68px !important; }
  .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home[data-page="home"] .home-entry.coach-entry { grid-template-rows: 20px minmax(0, 1fr) !important; }
  .diet-calendar-inline { gap: 1px; padding: 4px; }
  .diet-calendar-heading,
  .diet-calendar-month { min-height: 26px; }
  .diet-calendar-month button { min-width: 26px; min-height: 26px; }
  .diet-calendar-summary { min-height: 24px; }
  .diet-calendar-summary button { min-height: 24px; padding: 2px 5px; }
  .diet-day-overview { display: none; }
  .diet-calendar-inline .diet-record-context { display: none; }
  .diet-food-preview > :nth-child(n + 5) { display: none; }
  .diet-glance-states { min-height: 24px; flex-basis: 24px; }
  .calendar-grid { grid-template-rows: 16px repeat(6, 24px); gap: 1px; }
  .calendar-weekday { min-height: 16px; }
  .calendar-cell,
  .diet-calendar-inline .calendar-cell > button { min-height: 24px; height: 24px; }
}

@media (max-height: 450px) {
  .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home:has(> .diet-calendar-inline) { gap: 2px !important; }
  .member-meals-home .today-macro-balance { min-height: 42px !important; }
  .member-meals-home .home-meal-tabs { min-height: 26px !important; height: 26px !important; flex-basis: 26px; }
  .member-meals-home .home-meal-tabs .meal-tab { min-height: 24px !important; height: 24px !important; }
  .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home:has(> .diet-calendar-inline) > .home-entry-grid { max-height: 54px; grid-auto-rows: 54px !important; }
  .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home:has(> .diet-calendar-inline) .home-entry { min-height: 54px !important; height: 54px !important; }
  .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home[data-page="home"] .home-entry.coach-entry { grid-template-rows: 16px minmax(0, 1fr) !important; }
  .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .home-entry.custom-entry-card .custom-entry-head { min-height: 22px; flex-basis: 22px; }
  .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .home-entry.custom-entry-card .custom-entry-head button { min-height: 26px; height: 26px; padding: 1px 4px; }
  .diet-calendar-week,
  .diet-day-overview { display: none; }
  .diet-calendar-legend { display: none; }
  .diet-calendar-heading,
  .diet-calendar-month { min-height: 24px; }
  .diet-calendar-month button { min-width: 24px; min-height: 24px; padding: 1px 3px; }
  .diet-calendar-summary { min-height: 24px; }
  .diet-calendar-inline:not([data-calendar-focus="true"]) { padding: 3px; }
  .diet-record-tabs { min-height: 28px; flex-basis: 28px; }
  .diet-record-tabs button,
  .diet-meal-head button,
  .diet-meal-footer button,
  .diet-meal-pagination button { min-height: 26px; }
  .diet-meal-head { min-height: 22px; }
  .diet-meal-footer { min-height: 28px; }
  .diet-meal-pagination { min-height: 28px; flex-basis: 28px; }
  .diet-meal-footer { grid-template-columns: minmax(0, 1fr); }
  .diet-meal-footer button:not(.diet-meal-complete) { display: none; }
  .diet-meal-footer .diet-meal-complete { min-height: 26px; }
  .diet-record-viewport { overflow: hidden; }
  .diet-meal-carousel { min-height: 0; }
  .diet-metric-carousel { min-height: 0; }
  .diet-meal-content > .meal-photo-preview { min-height: 36px; height: 100%; max-height: 100%; }
  .diet-meal-content > .meal-photo-preview .meal-photo-open { width: 100%; height: 100%; min-height: 36px !important; max-height: none; gap: 1px; padding: 2px !important; }
  .diet-meal-content > .meal-photo-preview .meal-photo-open img { max-height: 28px; flex: 0 1 28px; }
  .diet-meal-content > .meal-photo-preview .meal-photo-open span { max-width: 100%; overflow: hidden; font-size: 11px; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
  .diet-pvt-history { flex-basis: 42px; }
  .diet-pvt-history button { min-height: 38px; }
}

/* Short displays use explicit detail actions rather than cropping a photo. */
.diet-photo-short { display: none !important; }
.diet-record-dialog .meal-photo-preview { margin: 0 0 10px; }
.diet-record-dialog .meal-photo-open { display: flex; width: 100%; flex-direction: column; gap: 5px; }
.diet-record-dialog .meal-photo-open img { display: block; width: 100%; height: 160px; object-fit: contain; }
.diet-record-dialog .meal-photo-open span { font-size: 14px; }
.diet-calendar-inline .calendar-state-dots .is-done { background: #5d877e; }
.diet-calendar-inline .calendar-state-dots .photo-dot { background: #315c56; color: #315c56; }
.diet-calendar-inline .diet-calendar-day,
.diet-calendar-inline .calendar-cell > button { position: relative; }
.diet-calendar-inline .calendar-meal-count { position: absolute; top: 2px; right: 3px; color: #a0522d; font-style: normal; font-size: 11px; line-height: 1; }
.diet-calendar-inline .meal-status.is-deviation { background: #f7d2c7; color: #8a3c32; }
@media (max-height: 500px) {
  .diet-photo-short { display: inline-flex !important; min-width: 36px !important; }
  .diet-meal-content > .meal-photo-preview { display: none; }
  .diet-meal-content { grid-template-columns: minmax(0, 1fr); }
}
@media (max-height: 450px) {
  .diet-meal-content { display: none; }
  .diet-metric-page { height: 100%; align-self: stretch; }
  .diet-record-metrics { height: 100%; grid-template-rows: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .diet-record-value { min-height: 0 !important; }
  .diet-metric-carousel { flex: 1 1 0; height: auto; }
  .diet-pvt-history { display: none; }
  .diet-meal-macros { flex: 1 1 auto; min-height: 0; }
}

@media (max-height: 400px) {
  .diet-meal-macros { display: none; }
  .member-meals-home .today-macro-balance { min-height: 34px !important; }
  .member-meals-home .today-macro-balance-head { min-height: 14px; }
  .member-meals-home .home-meal-tabs { min-height: 24px !important; height: 24px !important; flex-basis: 24px; }
  .member-meals-home .home-meal-tabs .meal-tab { min-height: 22px !important; height: 22px !important; }
  .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home:has(> .diet-calendar-inline) > .home-entry-grid { max-height: 48px; grid-auto-rows: 48px !important; }
  .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home:has(> .diet-calendar-inline) .home-entry { min-height: 48px !important; height: 48px !important; }
  .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home[data-page="home"] .home-entry.coach-entry { grid-template-rows: 15px minmax(0, 1fr) !important; }
  .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home[data-page="home"] .home-entry.coach-entry > .coach-meal-preview { display: flex !important; grid-template-columns: none !important; overflow-x: auto !important; overflow-y: hidden !important; }
  .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home[data-page="home"] .coach-preview-food { min-width: 108px !important; min-height: 24px !important; flex: 0 0 108px !important; }
  .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .home-entry.custom-entry-card .custom-entry-head { min-height: 20px; flex-basis: 20px; }
  .app-shell:not(.auth-gate) .home-view.home-v3.member-meals-home .home-entry.custom-entry-card .custom-entry-head button { min-height: 24px; height: 24px; }
  .diet-calendar-heading { min-height: 22px; }
  .diet-calendar-summary { min-height: 22px; }
  .diet-calendar-inline:not([data-calendar-focus="true"]) { gap: 1px; padding: 3px; }
  .diet-glance-states { display: none; }
}

.diet-calendar-inline > .diet-calendar-glance,
.diet-calendar-inline .diet-pvt-history { width: 100%; max-width: 100%; overflow-x: auto !important; overflow-y: hidden !important; }
.diet-calendar-inline > .diet-calendar-glance { min-height: 60px; height: 60px; flex: 0 0 60px; padding-block: 0; }
.diet-calendar-inline > .diet-calendar-glance { gap: 6px; padding-inline: 0; }
.diet-calendar-inline > .diet-calendar-glance > button { min-width: 0; flex: 0 0 calc((100% - 6px) / 2); }
.diet-calendar-inline .diet-pvt-history { gap: 4px; padding-inline: 0; }
.diet-calendar-inline .diet-pvt-history > button { min-width: 0; flex: 0 0 calc((100% - 4px) / 2); }
.diet-calendar-inline > .diet-calendar-glance,
.diet-calendar-inline .diet-pvt-history { scroll-snap-type: x proximity; }
.diet-calendar-inline .diet-pvt-history > button,
.diet-calendar-inline > .diet-calendar-glance > button { scroll-snap-align: start; }
.member-meals-home .home-meal-tabs .meal-tab { flex: 1 0 calc((100% - 8px) / 3) !important; min-width: calc((100% - 8px) / 3); }
.diet-calendar-inline .diet-glance-meal small { white-space: normal !important; overflow-wrap: anywhere; font-size: 12px; line-height: 1.3; }
.diet-calendar-inline .diet-meal-macros span { font-size: 12px; }
.diet-calendar-inline .diet-meal-macros strong { font-size: 16px; line-height: 1.2; }
.diet-calendar-inline .diet-meal-macros small { font-size: 12px; }
.diet-calendar-inline .diet-food-preview :is(b, small, span) { font-size: 12px; line-height: 1.3; }
.diet-calendar-inline .diet-meal-content { flex: 0 1 180px; }
.diet-calendar-inline .diet-record-context span { font-size: 12px; line-height: 1.3; white-space: normal; }
.diet-calendar-inline .diet-record-viewport:has(.diet-pvt-history:not(:empty)) .diet-record-context { display: none; }
@media (max-height: 600px) {
  .diet-calendar-inline:not([data-calendar-focus="true"]) .diet-day-overview { min-height: 32px; }
  .diet-calendar-inline:not([data-calendar-focus="true"]) .diet-glance-states { min-height: 24px; flex-basis: 24px; }
  .diet-calendar-inline .diet-meal-content { flex: 1 1 0; }
}
@media (max-height: 600px) {
  .diet-photo-short { display: inline-flex !important; min-width: 36px !important; }
  .diet-meal-content > .meal-photo-preview { display: none; }
  .diet-meal-content { grid-template-columns: minmax(0, 1fr); }
  .diet-food-preview > :nth-child(n + 5) { display: none; }
}
@media (max-height: 450px) {
  .diet-calendar-inline .diet-metric-page > .diet-record-metrics { height: 100% !important; }
}
@media (max-height: 400px) {
  .diet-record-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); }
}

/* The data hub shares one Sunday-first weekday rail in both calendar modes. */
#app .member-data-panel .diet-calendar-inline { gap: 4px; padding: 6px; }
#app .member-data-panel .diet-calendar-heading { flex: 0 0 44px; height: 44px; min-height: 44px; flex-wrap: nowrap; gap: 5px; }
#app .member-data-panel .diet-calendar-month { flex: 1; min-width: 0; gap: 2px; }
#app .member-data-panel .diet-calendar-month strong { min-width: 0; flex: 1; font-size: 14px; line-height: 1.15; white-space: normal; overflow-wrap: anywhere; text-align: center; font-variant-numeric: tabular-nums; }
#app .member-data-panel .diet-calendar-month button { min-height: 44px; min-width: 32px; font-size: 14px; }
#app .calendar-mode { display: flex; flex: 0 0 auto; gap: 3px; }
#app .calendar-mode button { min-height: 44px; min-width: 36px; font-size: 14px; }
#app .calendar-mode [aria-pressed="true"] { background: #ffda70; border-color: #493728; font-weight: 800; box-shadow: 1px 2px 0 #493728; }
#app .diet-calendar-weekdays { flex: 0 0 22px; min-height: 22px; display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 2px; align-items: center; text-align: center; font-size: 13px; font-weight: 700; color: #735e4a; }
#app .member-data-panel .diet-calendar-week { display: grid; flex: 0 0 48px; gap: 2px; }
#app .member-data-panel .diet-calendar-inline[data-calendar-expanded="true"] .diet-calendar-week { display: none; }
#app .member-data-panel .diet-calendar-day { height: 48px; min-height: 48px; }
#app .member-data-panel .diet-calendar-day strong { font-size: 18px; line-height: 1.1; }
#app .member-data-panel .calendar-grid { flex: 1 1 0; min-height: 0; grid-template-rows: none; grid-auto-rows: 48px; align-content: start; overflow-y: auto; overscroll-behavior: contain; }
#app .member-data-panel .calendar-grid .calendar-cell { height: 48px; min-height: 48px; }
#app .member-data-panel .calendar-grid .calendar-cell > button { height: 48px; min-height: 48px; font-size: 18px; }
#app .member-data-panel .diet-calendar-legend { display: flex; flex: 0 0 auto; justify-content: flex-start; gap: 2px 9px; padding: 2px 0; color: #493728; font-size: 12px; line-height: 1.4; }
#app .diet-calendar-legend span { white-space: nowrap; }
#app .diet-calendar-legend .legend-saved-meal { background: #ed8b42; border-color: #a0522d; }
#app .diet-calendar-legend .legend-daily { background: #5d877e; border-color: #315c56; }
#app .diet-calendar-legend .legend-photo { background: #315c56; border-color: #315c56; }
#app .member-data-panel .diet-calendar-summary { flex: 0 0 44px; min-height: 44px; gap: 4px; }
#app .member-data-panel .diet-calendar-summary button { min-height: 44px; font-size: 13px; }
#app .member-data-panel .diet-calendar-summary strong { font-size: 14px; }
#app .member-data-panel .diet-record-tabs { flex: 0 0 44px; height: 44px; min-height: 44px; }
#app .member-data-panel .diet-record-tabs button { min-height: 44px; font-size: 13px; }
#app .member-data-panel .diet-calendar-inline[data-detail="true"] .diet-day-overview { display: none; }
#app .member-data-panel .diet-record-context { display: none; }
#app .member-data-panel .diet-record-viewport { flex: 1 1 0; min-height: 0; }
#app .member-data-panel .diet-metric-carousel { flex: 1 1 0; height: auto; min-height: 0; }
#app .member-data-panel .diet-metric-page { height: 100%; align-self: stretch; }
#app .member-data-panel .diet-record-metrics { height: 100%; grid-template-rows: none; grid-auto-rows: minmax(44px,1fr); }
#app .member-data-panel .diet-record-value { height: 100%; min-height: 44px !important; max-height: none; }
#app .member-data-panel .diet-meal-pagination { flex: 0 0 44px; height: 44px; min-height: 44px; }
#app .member-data-panel .diet-meal-pagination button { min-height: 44px; font-size: 14px; }
#app .member-data-panel .diet-meal-pagination span { font-size: 12px; }
#app .member-data-panel .diet-pvt-history > button { min-height: 44px; }
#app .member-data-panel .diet-meal-head button,
#app .member-data-panel .diet-meal-footer button { min-height: 44px; font-size: 13px; }
#app .member-data-panel .diet-meal-footer { min-height: 44px; }
#app .diet-record-dialog > header button { min-height: 44px; min-width: 44px; font-size: 18px; }
#app .diet-record-dialog-content { font-size: 14px; }
#app .diet-record-dialog-content :is(dt,dd) { font-size: 14px; line-height: 1.4; }

/* Numeric dates and named statuses remove the need to decode coloured dots. */
#app .member-data-panel .calendar-scroll { min-height: 0; flex: 1 1 0; display: flex; flex-direction: column; gap: 5px; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; padding: 0 1px 6px; }
#app .calendar-count-key { flex: 0 0 auto; margin: 0; color: #735e4a; font-size: 12px; line-height: 1.4; }
#app .calendar-selected-counts { flex: 0 0 auto; margin: 0; color: #493728; font-size: 13px; line-height: 1.4; }
#app .member-data-panel .calendar-scroll .diet-calendar-week { flex: 0 0 64px; }
#app .member-data-panel .calendar-scroll .diet-calendar-day { height: 64px; min-height: 64px; gap: 3px; }
#app .member-data-panel .calendar-scroll .calendar-grid { flex: 0 0 auto; grid-template-rows: none; grid-auto-rows: 64px; overflow: visible; }
#app .member-data-panel .calendar-scroll .calendar-grid .calendar-cell,
#app .member-data-panel .calendar-scroll .calendar-grid .calendar-cell > button { height: 64px; min-height: 64px; }
#app .calendar-scroll .calendar-cell strong { font-size: 18px; line-height: 1.1; }
#app .calendar-scroll :is(.calendar-meal-total,.calendar-category-total) { display: block; color: #735e4a; font-size: 12px; line-height: 1.1; white-space: nowrap; }
#app .calendar-scroll .calendar-meal-total { color: #a0522d; }
#app .calendar-record-states { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; color: #735e4a; font-size: 12px; line-height: 1.4; }
#app .calendar-record-states .has-record { color: #315c56; }
#app .calendar-record-states button { min-height: 44px; padding: 4px 6px; color: #315c56; border: 0; background: transparent; font-size: 12px; line-height: 1.3; }
#app .member-data-panel .calendar-scroll .diet-calendar-summary { border: 0; border-radius: 0; background: transparent; padding: 0; gap: 3px; }
#app .member-data-panel .calendar-scroll .diet-calendar-summary strong { font-size: 13px; }
#app .member-data-panel .calendar-scroll .diet-calendar-summary button { min-width: 28px; }
#app .member-data-panel .calendar-scroll .diet-record-tabs { border: 0; border-top: 1px solid #c8bba3; border-radius: 0; padding-top: 4px; }
#app .member-data-panel .calendar-scroll .diet-record-tabs button { border: 0; border-radius: 0; background: transparent; }
#app .member-data-panel .calendar-scroll .diet-record-tabs button.is-active { border-bottom: 3px solid #315c56; color: #493728; font-weight: 700; }
#app .member-data-panel .calendar-scroll .diet-record-viewport { flex: 1 0 230px; height: auto; min-height: 230px; }
#app .member-data-panel .calendar-scroll .diet-record-viewport:has(.diet-calendar-empty) { flex: 0 0 auto; height: auto; min-height: 0; }
#app .calendar-record-empty { min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 5px; color: #735e4a; font-size: 13px; }
#app .calendar-record-empty img { width: 36px; height: 36px; object-fit: contain; }
#app .member-data-panel .calendar-scroll .diet-calendar-glance { flex: 0 0 68px; height: 68px; min-height: 68px; display: flex; overflow-x: auto !important; gap: 6px; scroll-snap-type: x proximity; }
#app .member-data-panel .calendar-scroll .diet-calendar-glance > button { flex: 0 0 calc((100% - 6px)/2); min-width: 0; min-height: 64px; scroll-snap-align: start; }
#app .member-data-panel .calendar-scroll .diet-record-context { display: none; }
#app .calendar-return-selected { min-height: 44px; font-size: 13px; }

@media (max-height: 600px) {
  #app .member-data-panel .calendar-scroll .diet-record-viewport { flex-basis: 190px; min-height: 190px; height: auto; }
}

@media (max-height: 600px) {
  #app .member-data-panel .diet-calendar-inline { gap: 3px; }
  #app .member-data-panel .diet-day-overview { display: none; }
  #app .member-data-panel .diet-meal-content { display: none; }
  #app .member-data-panel .diet-meal-footer { grid-template-columns: minmax(0,1fr); }
  #app .member-data-panel .diet-meal-footer > button:not(.diet-meal-complete) { display: none; }
  #app .member-data-panel .diet-meal-head { min-height: 44px; }
}
@media (max-height: 400px) and (min-width: 500px) {
  #app .member-data-panel .diet-meal-macros { display: none; }
  #app .member-data-panel .diet-meal-head { display: none; }
  #app .member-data-panel .diet-meal-footer { display: flex; }
}

/* Compact hand-drawn meal cards fit inside the native vertical page rail. */
#app .member-data-panel .diet-meal-mini {
  box-sizing: border-box; position: relative; display: grid; grid-template-rows: 20px 18px minmax(0,1fr);
  gap: 3px; min-width: 0; min-height: 0; overflow: hidden; padding: 4px;
  border: 1.5px solid #604933; border-radius: 13px 10px 14px 11px; background: #fffdf5; color: #493728;
}
#app .member-data-panel .diet-meal-mini > header { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; min-height: 20px; }
#app .member-data-panel .diet-meal-mini > header strong { min-width: 0; margin: 0; overflow: hidden; font-size: 12px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
#app .member-data-panel .diet-meal-mini > header small { flex: 0 0 auto; padding: 2px 4px; border-radius: 7px; background: #edf1d8; color: #586540; font-size: 11px; line-height: 1.1; white-space: nowrap; }
#app .member-data-panel .meal-mini-macros { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 3px; min-width: 0; }
#app .member-data-panel .meal-mini-macros > span { box-sizing: border-box; display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; padding: 3px 2px; border-radius: 7px 6px 8px 6px; background: #fff1cb; color: #735e4a; font-size: 11px; font-weight: 700; line-height: 1.1; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
#app .member-data-panel .meal-mini-content { display: grid; grid-template-columns: 48px minmax(0,1fr); align-items: start; gap: 4px; min-width: 0; min-height: 48px; overflow: hidden; font-size: 11px; line-height: 1.2; }
#app .member-data-panel .meal-mini-content > :first-child { box-sizing: border-box; width: 48px; height: 48px; min-width: 48px; min-height: 48px; overflow: hidden; border-radius: 8px; }
#app .member-data-panel .meal-mini-content > :first-child :is(img,picture) { display: block; width: 48px; height: 48px; object-fit: cover; }
#app .member-data-panel .meal-mini-content > :first-child:not(.meal-photo-preview) { display: grid; place-items: center; padding: 3px; background: #fff7e7; color: #735e4a; font-size: 9px; line-height: 1.1; overflow-wrap: anywhere; }
#app .member-data-panel .meal-mini-content .meal-photo-preview { align-items: center; justify-content: center; }
#app .member-data-panel .meal-mini-content .photo-safe-mark { display: grid; width: 48px; height: 48px; place-items: center; padding: 3px; font-size: 9px; line-height: 1.1; overflow-wrap: anywhere; }
#app .member-data-panel .meal-mini-content > :nth-child(2) { display: flex; flex-direction: column; gap: 2px; min-width: 0; min-height: 0; overflow: hidden; color: #735e4a; overflow-wrap: anywhere; }
#app .member-data-panel .meal-mini-content > :nth-child(2) small { display: block; flex: 0 0 auto; color: #927a64; font-size: 10px; line-height: 1.1; }
#app .member-data-panel .diet-meal-mini :is(button,a,[role="button"]) { box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; min-height: 44px; margin: 0; padding: 3px 6px; border: 1.5px solid #604933; border-radius: 9px 7px 10px 8px; background: #fff2ca; color: #493728; font-size: 12px; line-height: 1.1; }
#app .member-data-panel .diet-meal-mini :is(button,a,[role="button"]):focus-visible { outline: 2px solid #d77438; outline-offset: 1px; }
#app .member-data-panel .meal-mini-content .meal-photo-open { box-sizing: border-box; width: 48px !important; height: 48px !important; min-width: 48px; min-height: 48px !important; max-height: 48px; flex: 0 0 48px; padding: 0 !important; border: 0; border-radius: 8px; background: transparent !important; }
#app .member-data-panel .meal-mini-content .meal-photo-open img { width: 100%; height: 100%; max-height: 48px; flex: 1 1 auto; object-fit: cover; }
#app .member-data-panel .meal-mini-content .meal-photo-open span { display: none; }
#app .member-data-panel .diet-meal-mini > .meal-mini-open { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; min-height: 44px; padding: 0; border: 0; border-radius: inherit; background: transparent; }
#app .member-data-panel .meal-mini-content { min-height: 0; }
#app .member-data-panel .meal-mini-content > :first-child { min-height: 0; }

@media (orientation: landscape) and (max-height: 450px) {
  #app .member-data-panel .meal-mini-content > :nth-child(2) { overflow: auto; overscroll-behavior-y: contain; }
}