/* Meal nutrition sits beside one large ring, with portion controls below it. */
#mealDetailDialog .detail-sheet { touch-action: pan-y; }
#mealDetailDialog .meal-detail-dragging { user-select: none; }
#mealDetailDialog .detail-sheet {
  margin-top: 0;
  padding: 14px 20px 22px;
  border-radius: 0;
}

#mealDetailDialog .meal-detail-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 1px;
  color: #70736b;
  font-size: 14px;
  line-height: 1.4;
}

#mealDetailDialog .meal-detail-meta :is(#mealCategory,[data-detail-id="mealCategory"]):not([hidden]) + .meal-detail-time::before {
  content: '·';
  margin-right: 5px;
}

#mealDetailDialog .meal-detail-time { margin: 0; color: inherit; font-size: inherit; }
#mealDetailDialog :is(#mealName,[data-detail-id="mealName"]) {
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
  resize: none;
  overflow: hidden;
}

#mealDetailDialog .meal-nutrition-overview {
  display: grid;
  grid-template-columns: clamp(144px, 44.9vw, 185px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(12px, 3.58vw, 15px);
  margin-top: 12px;
}

#mealDetailDialog .meal-calorie-summary {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  min-width: 0;
  transform: translateX(-2px);
}

#mealDetailDialog .meal-calorie-ring { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#mealDetailDialog .meal-calorie-center {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 70%;
  min-width: 0;
  padding: 0;
}

#mealDetailDialog :is(#mealCalories,[data-detail-id="mealCalories"]) {
  display: block;
  width: 100%;
  height: 38px;
  margin: 0;
  padding: 8px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 32px;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: 0;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}

#mealDetailDialog :is(#mealCalories,[data-detail-id="mealCalories"])::-webkit-inner-spin-button,
#mealDetailDialog :is(#mealCalories,[data-detail-id="mealCalories"])::-webkit-outer-spin-button { appearance: none; margin: 0; }
#mealDetailDialog :is(#mealCalories,[data-detail-id="mealCalories"])::placeholder { color: var(--ink); opacity: 1; }
#mealDetailDialog .meal-calorie-unit { height: 18px; color: #70736b; font-size: 13px; line-height: 14px; letter-spacing: 0; }
#mealDetailDialog .meal-weight-divider { width: 56px; height: 1px; margin: 5px 0; background: #dfe2d9; }
#mealDetailDialog .meal-calorie-center .meal-weight {
  display: block;
  width: 100%;
  min-height: 44px;
  height: 44px;
  padding: 0 0 24px;
  margin-bottom: -16px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0;
  text-align: center;
}

#mealDetailDialog .meal-calorie-center .meal-weight.mixed-quantity {
  height: auto;
  padding: 0 0 16px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
}

#mealDetailDialog .meal-nutrition-macros { min-width: 0; }
#mealDetailDialog :is(#mealMacros,[data-detail-id="mealMacros"]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  margin: 0;
}

#mealDetailDialog .meal-nutrition-macros .macro-input {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}

#mealDetailDialog .meal-nutrition-macros .macro-input label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px 9px;
  align-items: baseline;
  column-gap: 3px;
  row-gap: 3px;
  margin: 0;
  color: #61665a;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  letter-spacing: 0;
  white-space: nowrap;
}

#mealDetailDialog .detail-macro-bar {
  position: relative;
  display: block;
  grid-column: 1 / -1;
  grid-row: 1;
  width: max-content;
  max-width: 100%;
  height: 5px;
  margin: 3px 0 0;
  border-radius: 4px;
  background: #edf0e8;
  overflow: hidden;
}

#mealDetailDialog .detail-macro-bar::before {
  content: 'Kohlenhydrate';
  display: block;
  height: 0;
  visibility: hidden;
  font: inherit;
  line-height: 0;
  letter-spacing: inherit;
}

#mealDetailDialog .detail-macro-bar::after {
  content: '';
  display: block;
  width: var(--macro-fill, 0%);
  transform: scaleX(var(--value-reveal, 1));
  transform-origin: left;
  height: 100%;
  border-radius: inherit;
  background: var(--macro-color);
}

#mealDetailDialog .macro-input.protein { --macro-color: var(--protein); }
#mealDetailDialog .macro-input.fat { --macro-color: var(--fat); }
#mealDetailDialog .macro-input.carbs { --macro-color: var(--carbs); }
#mealDetailDialog .macro-input.fiber { --macro-color: var(--fiber); }
#mealDetailDialog .meal-nutrition-macros .macro-input input {
  display: block;
  grid-column: 2;
  grid-row: 2;
  width: 100%;
  min-width: 0;
  height: 19px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
  letter-spacing: 0;
  text-align: right;
}

#mealDetailDialog .meal-nutrition-macros .macro-unit { grid-column: 3; grid-row: 2; color: var(--ink); font-size: 14px; }
#mealDetailDialog .meal-ingredients-link,
.plan-shopping-entry .meal-ingredients-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  margin: 9px 0 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #be4c2e;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  text-align: left;
}

#mealDetailDialog .meal-ingredients-link :is(#ingredientCount,[data-detail-id="ingredientCount"]) { display: inline; height: auto; margin: 0; padding: 0; color: inherit; font: inherit; line-height: inherit; }
:is(#mealDetailDialog,.plan-shopping-entry) .meal-ingredients-arrow { display: grid; place-items: center; flex: none; width: 28px; height: 28px; font-size: 23px; font-weight: 400; line-height: 1; }
:is(#mealDetailDialog,.plan-shopping-entry) .meal-ingredients-arrow svg { display: block; width: 20px; height: 20px; }
#mealDetailDialog .detail-portion {
  margin: 10px 0 0;
  padding: 10px 0;
  border: 0;
  border-top: 1px solid var(--line, #e9e9e6);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
}

#mealDetailDialog .detail-portion .portion { position: relative; width: 144px; height: 40px; margin: 0; border: 0; border-radius: 0; background: transparent; grid-template-columns: 40px 1fr 40px; }
#mealDetailDialog .detail-portion .portion::before { content: ''; position: absolute; inset-inline: 14px; top: 50%; height: 28px; transform: translateY(-50%); border-radius: 14px; background: #f0f1ec; pointer-events: none; }
#mealDetailDialog .detail-portion .portion button { position: relative; display: grid; place-items: center; width: 40px; height: 40px; min-height: 40px; padding: 0; border: 1px solid #e0e3d9; border-radius: 50%; background: #fff; font-size: 20px; font-weight: 400; line-height: 1; }
#mealDetailDialog .detail-portion .portion button svg { display: block; width: 18px; height: 18px; }
#mealDetailDialog .detail-portion .portion output { position: relative; font-size: 19px; font-weight: 650; }
#mealDetailDialog .meal-detail-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#mealDetailDialog .meal-calorie-center .meal-weight:focus-visible,
#mealDetailDialog .meal-ingredients-link:focus-visible,
#mealDetailDialog .detail-portion button:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

@media (max-width: 360px) {
  #mealDetailDialog .detail-sheet { padding-inline: 16px; }
  #mealDetailDialog :is(#mealName,[data-detail-id="mealName"]) { font-size: 19px; }
  #mealDetailDialog .meal-nutrition-overview { gap: 12px; }
  #mealDetailDialog :is(#mealCalories,[data-detail-id="mealCalories"]) { height: 36px; font-size: 30px; line-height: 36px; }
  #mealDetailDialog .meal-calorie-center .meal-weight { font-size: 17px; }
  #mealDetailDialog .meal-calorie-center .meal-weight.mixed-quantity { font-size: 10px; line-height: 1.2; }
  #mealDetailDialog .meal-nutrition-macros .macro-input label { grid-template-columns: minmax(0, 1fr) 28px 8px; column-gap: 2px; font-size: 13px; }
  #mealDetailDialog .meal-nutrition-macros .macro-input input { font-size: 14px; }
  #mealDetailDialog .meal-nutrition-macros .macro-unit { font-size: 13px; }
}

/* Shared scrolling and compact nutrition for planned and eaten meals. */
#mealDetailDialog .meal-reading-summary{position:sticky;top:0;z-index:3;background:var(--paper);padding-top:32px;padding-bottom:8px}
#mealDetailDialog .meal-detail-scroll{overflow-anchor:none}
#mealDetailDialog .meal-chat{min-height:calc(var(--messenger-visible-height,100dvh) - 100px)}
#mealDetailDialog[data-reading-measure=true] :is(#ingredientsButton,[data-detail-id="ingredientsButton"]){display:none}
#mealDetailDialog[data-reading-measure=true] :is(#mealName,[data-detail-id="mealName"]){font-size:14px;line-height:1.25;flex:none}
#mealDetailDialog .meal-nutrition-overview[hidden]{display:none}
#mealDetailDialog[data-reading-measure=true] .meal-calorie-summary{width:64px;height:64px}
#mealDetailDialog[data-reading-measure=true] .meal-calorie-ring{width:64px;height:64px}
#mealDetailDialog[data-reading-measure=true] .meal-calorie-center{position:absolute;inset:0;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}
#mealDetailDialog[data-reading-measure=true] :is(#mealCalories,[data-detail-id="mealCalories"]){height:20px;line-height:20px;font-size:16px;padding:0}
#mealDetailDialog[data-reading-measure=true] .meal-calorie-unit{font-size:9px;height:11px;line-height:11px}
#mealDetailDialog[data-reading-measure=true] .meal-weight-divider,#mealDetailDialog[data-reading-measure=true] :is(#mealWeight,[data-detail-id="mealWeight"]){display:none}
#mealDetailDialog[data-reading-measure=true] .meal-chat{padding-top:12px;padding-bottom:0}
#mealDetailDialog[data-reading-measure=true] .meal-chat-heading{margin-bottom:0;padding-bottom:8px}
#mealDetailDialog[data-reading-measure=true] :is(#mealChatList,[data-detail-id="mealChatList"]){max-height:none;overflow:visible;padding-top:12px}
#mealDetailDialog[data-reading-measure=true] .meal-chat-message{flex:none}

#mealDetailDialog .meal-reading-summary>.meal-nutrition-card{margin:0;background:transparent}

/* Continuous, reversible reading layout: geometry is driven by scroll distance. */
:is(#mealDetailDialog[data-reading-morph],.meal-detail-snapshot[data-reading-morph]) .meal-reading-summary{overflow:clip}
:is(#mealDetailDialog[data-reading-morph],.meal-detail-snapshot[data-reading-morph]) .meal-nutrition-overview{position:absolute;margin:0}
:is(#mealDetailDialog[data-reading-morph],.meal-detail-snapshot[data-reading-morph]) .meal-nutrition-overview>.meal-nutrition-macros{grid-column:2}
:is(#mealDetailDialog[data-reading-morph],.meal-detail-snapshot[data-reading-morph]) .meal-nutrition-card{position:absolute;left:0;width:100%;margin:0;background:transparent}
#mealDetailDialog .meal-leading-space,#mealDetailDialog .meal-title-space{display:block;pointer-events:none}
:is(#mealDetailDialog[data-reading-morph],.meal-detail-snapshot[data-reading-morph]) .meal-nutrition-card :is(#mealName,[data-detail-id="mealName"]),:is(#mealDetailDialog[data-reading-morph],.meal-detail-snapshot[data-reading-morph]) .meal-nutrition-card .meal-calorie-summary{position:absolute;transform:none;margin:0}
:is(#mealDetailDialog[data-reading-morph],.meal-detail-snapshot[data-reading-morph]) .meal-nutrition-card .meal-meta,:is(#mealDetailDialog[data-reading-morph],.meal-detail-snapshot[data-reading-morph]) .meal-nutrition-card .meal-macro-chart{opacity:var(--meal-reading-progress);transform:translateY(calc((1 - var(--meal-reading-progress))*8px))}
:is(#mealDetailDialog[data-reading-morph],.meal-detail-snapshot[data-reading-morph]) .meal-calorie-center{position:absolute;inset:0;width:100%;justify-content:center}
:is(#mealDetailDialog[data-reading-morph],.meal-detail-snapshot[data-reading-morph]) :is(#mealCalories,[data-detail-id="mealCalories"]){font-size:var(--reading-calorie-font);height:var(--reading-calorie-height);line-height:var(--reading-calorie-height);padding:var(--reading-calorie-padding) 0 0}
:is(#mealDetailDialog[data-reading-morph],.meal-detail-snapshot[data-reading-morph]) .meal-calorie-unit{font-size:var(--reading-unit-font);height:var(--reading-unit-height);line-height:calc(14px - var(--meal-reading-progress)*3px)}
:is(#mealDetailDialog[data-reading-morph],.meal-detail-snapshot[data-reading-morph]) .meal-weight-divider{opacity:calc(1 - var(--meal-reading-progress));height:calc((1 - var(--meal-reading-progress))*1px);margin:calc((1 - var(--meal-reading-progress))*5px) 0}
:is(#mealDetailDialog[data-reading-morph],.meal-detail-snapshot[data-reading-morph]) .meal-calorie-center :is(#mealWeight,[data-detail-id="mealWeight"]){opacity:calc(1 - var(--meal-reading-progress));height:calc((1 - var(--meal-reading-progress))*44px);min-height:0;padding-bottom:calc((1 - var(--meal-reading-progress))*24px);margin-bottom:calc((1 - var(--meal-reading-progress))*-16px);overflow:hidden}
#mealDetailDialog .meal-chat{padding-top:12px;padding-bottom:0}
#mealDetailDialog .meal-chat-heading{margin-bottom:0;padding-bottom:8px}
#mealDetailDialog :is(#mealChatList,[data-detail-id="mealChatList"]){max-height:none;overflow:visible;padding-top:12px}
#mealDetailDialog .meal-chat-message{flex:none}
#mealDetailDialog .meal-reading-spacer{height:0;pointer-events:none}

#mealDetailDialog .meal-detail-scroll{will-change:transform}
#mealDetailDialog .meal-detail-snapshot{background:var(--paper,#f5f5f3)}
#mealDetailDialog .meal-photo-gallery:has(> :only-child){touch-action:pan-y}

/* Weight editing stays in the top layer and follows the visible keyboard viewport. */
#mealDetailDialog .meal-weight:not(:disabled)::after {
  content: ''; display: inline-block; width: 5px; height: 5px;
  margin-left: 7px; margin-bottom: 2px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
}
/* Surface, anchor arrow and action buttons share the time/cooking popup styles. */
#mealWeightDialog .weight-editor { padding: 0; }
#mealWeightDialog .meal-quantity-fields { display: flex; gap: 12px; }
#mealWeightDialog .meal-quantity-fields label { flex: 1; min-width: 0; color: var(--muted); font-size: 12px; }
#mealWeightDialog .meal-quantity-fields label[hidden] { display: none; }
#mealWeightDialog .meal-quantity-fields label span { display: block; margin-bottom: 6px; }
#mealWeightDialog input { width: 100%; min-width: 0; min-height: 48px; padding: 10px 12px; border: 1px solid var(--field-border); border-radius: 12px; background: var(--field); color: var(--ink); font-size: 20px; }
#mealWeightDialog .meal-weight-error { margin: 12px 0 0; color: var(--error); font-size: 13px; line-height: 1.4; }