/* The clock stays in the meal's quiet metadata row; its hit target is generous. */
#mealDetailDialog button:is(.meal-detail-time,.meal-detail-meta-trigger) {
  display: inline-flex; align-items: center; gap: 4px; min-width: 58px; min-height: 44px;
  margin: -12px 0; padding: 0 3px 0 0; border: 0; background: transparent;
  border-radius: 8px; color: inherit; font: inherit;
}
#mealDetailDialog button:is(.meal-detail-time,.meal-detail-meta-trigger)::after {
  content: ''; width: 5px; height: 5px; border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg);
}
#mealDetailDialog button:is(.meal-detail-time,.meal-detail-meta-trigger)[aria-expanded="true"] { color: var(--brand, #ee6542); }
:is(#mealTimeDialog,.meal-detail-popover) {
  --meal-time-row: 44px;
  position: fixed; inset: auto; margin: 0; padding: 20px;
  width: 324px; border: 1px solid var(--line); border-radius: 20px;
  background: var(--surface); color: var(--ink); overflow: visible;
  box-shadow: 0 10px 32px #17171624;
}
:is(#mealTimeDialog,.meal-detail-popover)::backdrop { background: #1517100c; }
:is(#mealTimeDialog,.meal-detail-popover)[data-arrow="visible"]::before {
  content: ''; position: absolute; width: 12px; height: 12px; top: -7px;
  left: calc(var(--meal-time-arrow-left, 85px) - 6px);
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
  background: var(--surface); transform: rotate(45deg);
}
:is(#mealTimeDialog,.meal-detail-popover) h2 { margin: 0 0 16px; font-size: 16px; font-weight: 500; line-height: 1.4; letter-spacing: 0; }
:is(#mealTimeDialog,.meal-detail-popover) .meal-time-labels, :is(#mealTimeDialog,.meal-detail-popover) .meal-time-wheels, :is(#mealTimeDialog,.meal-detail-popover) .meal-time-actions {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 30px; width: 100%; max-width: 230px; margin-inline: auto;
}
:is(#mealTimeDialog,.meal-detail-popover) .meal-time-labels { margin-bottom: 4px; text-align: center; color: var(--muted); font-size: 12px; }
:is(#mealTimeDialog,.meal-detail-popover) .meal-time-wheels { position: relative; }
:is(#mealTimeDialog,.meal-detail-popover) .meal-time-center-line {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  height: 44px; border-radius: 12px; background: var(--brand-soft, #fff0e8); pointer-events: none;
}
:is(#mealTimeDialog,.meal-detail-popover) .meal-time-colon {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%);
  font-size: 25px; font-weight: 500; pointer-events: none; z-index: 1;
}
:is(#mealTimeDialog,.meal-detail-popover) .meal-time-wheel {
  position: relative; height: 220px; overflow-y: auto; overscroll-behavior: contain;
  scroll-snap-type: y mandatory; scrollbar-width: none; touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(transparent, #000 24%, #000 76%, transparent);
}
:is(#mealTimeDialog,.meal-detail-popover) .meal-time-wheel::-webkit-scrollbar { display: none; }
:is(#mealTimeDialog,.meal-detail-popover) .meal-time-wheel-spacer { height: 88px; }
:is(#mealTimeDialog,.meal-detail-popover) .meal-time-number {
  display: grid; place-items: center; width: 100%; min-height: 44px; height: 44px;
  margin: 0; padding: 0; background: transparent; border: 0; border-radius: 8px;
  color: var(--muted); font-size: 24px; font-weight: 400;
  font-variant-numeric: tabular-nums; scroll-snap-align: center;
  user-select: none; -webkit-user-select: none;
}
:is(#mealTimeDialog,.meal-detail-popover) .meal-time-number.is-selected { color: var(--ink); font-size: 30px; font-weight: 500; }
:is(#mealTimeDialog,.meal-detail-popover) .meal-time-actions { justify-items: center; margin-top: 16px; }
:is(#mealTimeDialog,.meal-detail-popover) .meal-time-actions button {
  display: grid; place-items: center; width: 48px; height: 48px; min-height: 48px;
  margin: 0; padding: 0; border-radius: 50%; border: 1px solid var(--line);
  background: var(--field); color: var(--muted);
}
:is(#mealTimeDialog,.meal-detail-popover) .meal-time-actions :is(#applyMealTime,#applyMealWeight) { border-color: transparent; background: var(--brand, #ee6542); color: #fff; }
:is(#mealTimeDialog,.meal-detail-popover) .meal-time-actions svg { display: block; width: 22px; height: 22px; }
:is(#mealTimeDialog,.meal-detail-popover) .meal-time-actions button:disabled { opacity: .5; }
:is(#mealTimeDialog,.meal-detail-popover) #mealTimeError { margin: 12px 0 0; color: var(--error); font-size: 13px; line-height: 1.4; }
:is(#mealTimeDialog,.meal-detail-popover) #mealTimeError[hidden] { display: none; }
:is(#mealTimeDialog,.meal-detail-popover) .meal-time-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html[data-theme="dark"] :is(#mealTimeDialog,.meal-detail-popover) { box-shadow: 0 10px 32px #0006; }
html[data-theme="dark"] :is(#mealTimeDialog,.meal-detail-popover)::backdrop { background: #0002; }
@media (max-height: 540px) {
  :is(#mealTimeDialog,.meal-detail-popover) .meal-time-wheel { height: 132px; }
  :is(#mealTimeDialog,.meal-detail-popover) .meal-time-wheel-spacer { height: 44px; }
}