:root {
  color-scheme: light dark;
  /* Apple Notes' very subtle off-white rather than pure white. */
  --bg: #f7f7f7;
  /* Cards sit on top of that, so they need to be lighter than the page. */
  --card: #ffffff;
  --text: #1c1c1e;
  --muted: #8e8e93;
  --accent: #ff6b35;
  /* Floating controls in the top bar: a faint gray fill with a white rim and
     a soft shadow, so they read as raised off the page (Apple Notes). */
  --chip-bg: rgba(0, 0, 0, 0.045);
  --chip-border: rgba(255, 255, 255, 0.9);
  --chip-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
  /* Card outlines read as drawn lines, so they need more contrast than a
     typical hairline separator. */
  --border: rgba(0, 0, 0, 0.3);
  --today-bg: #1c1c1e;
  --today-text: #ffffff;
  /* The meal letter sits behind the food list, so it has to stay faint
     enough that text remains readable where the two overlap. */
  --meal-letter: rgba(0, 0, 0, 0.16);

  --header-h: 52px;
  --gutter-w: 46px;
  /* Where the scroller's fade begins and ends, measured from below the safe
     area. Content is fully transparent above --fade-start and fully opaque
     below --fade-end. The ramp is deliberately long and reaches past the
     bottom of the bar, so cards stay faintly visible as they pass underneath
     rather than cutting out sharply. The controls are opaque, so the fade only
     has to keep content off the bare background between them, and can sit high
     up the bar rather than reaching below it. */
  --fade-start: 0px;
  --fade-end: 62px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --card: #1c1c1e;
    --text: #f2f2f7;
    --muted: #98989e;
    --border: rgba(255, 255, 255, 0.38);
    --today-bg: #f2f2f7;
    --today-text: #000000;
    --meal-letter: rgba(255, 255, 255, 0.2);
    --chip-bg: rgba(255, 255, 255, 0.12);
    --chip-border: rgba(255, 255, 255, 0.16);
    --chip-shadow: none;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

/* --------------------------------------------------------------------------
   Top bar
   -------------------------------------------------------------------------- */

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  /* Equal-width side columns keep the title centered on the viewport even
     though the back button and the pill are different widths, and their
     min-content floor means the title truncates rather than colliding. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 12px 0;
  /* Deliberately transparent: the scroller's mask fades content out before it
     reaches the bar, so no background or blur is needed to keep this legible. */
  background: transparent;
}

/* Raised-control surface shared by the back button, the title, and the pill.
   The fill has to be opaque or the schedule scrolling underneath shows through
   the controls: the gradient layer reproduces the chip's tint over a solid
   page-colored base, so it looks identical to a translucent fill but hides
   whatever is behind it. */
.chip {
  background-color: var(--bg);
  background-image: linear-gradient(var(--chip-bg), var(--chip-bg));
  border: 1px solid var(--chip-border);
  box-shadow: var(--chip-shadow);
}

.month-title {
  grid-column: 2;
  min-width: 0;
  margin: 0 4px;
  padding: 3px 20px;
  border-radius: 999px;
  font-size: 21px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.back-btn {
  justify-self: start;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  color: var(--text);
  cursor: pointer;
}

.back-btn svg {
  /* Nudged left so the chevron looks optically centered in the circle. */
  margin-right: 2px;
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pill {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 9px;
  /* Asymmetric: the ellipsis button carries its own visual inset inside its
     30px hit area, so a smaller right pad reads as even with the roomier left
     pad around the date box. */
  padding: 4px 6px 4px 12px;
  border-radius: 999px;
}

.icon-btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--text);
  cursor: pointer;
}

.icon-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.today-btn {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 2px;
  /* currentColor so the box is black in light mode and inverts in dark,
     rather than disappearing against the chip. */
  border: 1.5px solid currentColor;
  border-radius: 5px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 11px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.back-btn:active,
.icon-btn:active,
.today-btn:active {
  opacity: 0.55;
}

/* --------------------------------------------------------------------------
   Scrolling schedule
   -------------------------------------------------------------------------- */

.scroller {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  /* app.js compensates scrollTop itself when it adds or removes days above the
     viewport. Chrome's scroll anchoring would apply a second correction on top
     of that and shift the view by a whole page; Safari has no anchoring at all,
     so doing it manually is the only portable option. Turn anchoring off so
     both engines take the same path. */
  overflow-anchor: none;
  /* Content starts below the bar, then scrolls up underneath it. */
  padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  /* The fade: content is invisible behind the bar's title and controls, then
     ramps to fully opaque just below the bar. Because the mask is on the
     (fixed, viewport sized) scroller rather than on its contents, it stays put
     while the schedule scrolls through it. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent calc(var(--fade-start) + env(safe-area-inset-top, 0px)),
    #000 calc(var(--fade-end) + env(safe-area-inset-top, 0px))
  );
  mask-image: linear-gradient(
    to bottom,
    transparent calc(var(--fade-start) + env(safe-area-inset-top, 0px)),
    #000 calc(var(--fade-end) + env(safe-area-inset-top, 0px))
  );
}

.days {
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

.day {
  display: flex;
  gap: 10px;
  padding: 12px 16px 0;
}

.day-gutter {
  flex: none;
  width: var(--gutter-w);
  text-align: center;
  padding-top: 4px;
}

.day-weekday {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.day-number {
  margin-top: 1px;
  font-size: 20px;
  line-height: 32px;
  font-variant-numeric: tabular-nums;
}

/* Today is the only day that gets the filled circle. The number is set a size
   smaller than the other days' so it doesn't crowd the circle around it. */
.day-number.is-today {
  width: 32px;
  height: 32px;
  margin: 1px auto 0;
  border-radius: 50%;
  background: var(--today-bg);
  color: var(--today-text);
  font-size: 16px;
}

.day-meals {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* --------------------------------------------------------------------------
   Meal cards
   -------------------------------------------------------------------------- */

.meal {
  position: relative;
  min-height: 64px;
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--card);
}

/* Border style is the only thing separating a plan from a log. */
.meal.is-planned {
  border-style: dashed;
}

.meal.is-logged {
  border-style: solid;
}

.meal-letter {
  position: absolute;
  z-index: 0;
  top: 7px;
  right: 9px;
  color: var(--meal-letter);
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
}

/* Sits above the letter (no background), so a long food item just runs over
   the top of it rather than wrapping around it. */
.meal-items {
  position: relative;
  z-index: 1;
  margin: 0;
  padding-left: 17px;
}

.meal-items li {
  font-size: 15px;
  line-height: 1.5;
}

.meal-items li::marker {
  color: var(--muted);
}