/* 7:00 Log it in two taps - Bella's Home card and the New Entry sheet:
   the four kinds on a glass picker and the 7-step stool scale with its
   loupe (ConsistencySlider). Sizes inside the phone are iOS points via
   var(--pt). js/scenes/log.js drives it. */

#stage-log { --stage-h: 640px; }
@media (min-width: 960px) { #stage-log { --stage-h: 720px; } }

#stage-log .x-log {
  position: relative;
  display: grid; justify-items: center; gap: 14px;
}
#stage-log .x-log-phone { --phone-w: 270px; }
@media (min-width: 600px) { #stage-log .x-log-phone { --phone-w: 300px; } }

/* Behind the receding Home: iOS shows black around the card. */
#stage-log .x-log-screen { background: #000; }

/* ---- Home (presenting view) ------------------------------------------ */
#stage-log .x-log-home {
  position: absolute; inset: 0; overflow: hidden;
  background: linear-gradient(180deg, var(--scr-bg) 0%, var(--scr-bg-2) 100%);
  transform-origin: 50% 0;
  transition: transform var(--spring-enter-ms) var(--spring-enter),
              border-radius var(--spring-enter-ms) var(--spring-enter);
}
#stage-log .is-open .x-log-home {
  transform: translateY(calc(50 * var(--pt))) scale(0.92);
  border-radius: calc(40 * var(--pt));
}
#stage-log .x-log-dim {
  position: absolute; inset: 0; z-index: 25; pointer-events: none;
  background: #000; opacity: 0;
  transition: opacity 0.3s var(--ease-fade);
}
#stage-log .is-open .x-log-dim { opacity: 0.16; }
@media (prefers-color-scheme: dark) { #stage-log .is-open .x-log-dim { opacity: 0.4; } }
#stage-log .x-log-status { transition: color 0.3s var(--ease-fade); }
#stage-log .is-open .x-log-status { color: #fff; }
#stage-log .x-log-homeind { z-index: 40; pointer-events: none; }

#stage-log .x-log-logbtn {
  padding: 0; cursor: pointer; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
#stage-log .x-log-logbtn span { line-height: 1; }

/* The today strip: bathroom cells on top (poop, pee and, once one exists,
   vomit), meal and walk below - TodayStrip's two rows. */
#stage-log .x-log-strip { grid-template-columns: repeat(6, 1fr); }
#stage-log .x-log-strip .cell { grid-column: span 3; border-top: 0; }
#stage-log .x-log-strip .cell::after { content: none; }
#stage-log .x-log-strip [data-cell="food"],
#stage-log .x-log-strip [data-cell="walk"] { border-top: 1px solid var(--scr-sep); }
#stage-log .x-log-strip [data-cell="poop"]::after,
#stage-log .x-log-strip [data-cell="food"]::after,
#stage-log .x-log-strip.has-vomit [data-cell="pee"]::after {
  content: ""; position: absolute; right: 0; top: 18%; bottom: 18%; width: 1px; background: var(--scr-sep);
}
#stage-log .x-log-strip.has-vomit [data-cell="poop"],
#stage-log .x-log-strip.has-vomit [data-cell="pee"],
#stage-log .x-log-strip.has-vomit [data-cell="vomit"] {
  grid-column: span 2;
  grid-template-columns: calc(20 * var(--pt)) 1fr; column-gap: calc(6 * var(--pt));
  padding-left: calc(8 * var(--pt)); padding-right: calc(6 * var(--pt));
}
#stage-log .x-log-strip.has-vomit .cell:nth-child(-n+3) img { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); }
#stage-log .x-log-strip.has-vomit .cell:nth-child(-n+3) .cell-k { font-size: calc(11 * var(--pt)); white-space: nowrap; }
#stage-log .x-log-strip.has-vomit .cell:nth-child(-n+3) .cell-v { font-size: calc(14.5 * var(--pt)); white-space: nowrap; }
#stage-log .x-log-strip.has-vomit .cell:nth-child(-n+3) .cell-s { font-size: calc(11 * var(--pt)); white-space: nowrap; }
#stage-log .x-log-strip.has-vomit .cell:nth-child(-n+3) .land-ring { left: calc(8 * var(--pt)); width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); }
#stage-log .x-log-strip .cell-s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#stage-log .x-log-strip .land-ring {      /* sits on the glyph (StripLandingBeat) */
  left: calc(10 * var(--pt)); top: calc(10 * var(--pt));
  width: calc(22 * var(--pt)); height: calc(22 * var(--pt));
  border-width: calc(1.75 * var(--pt)); border-color: var(--ring, #8B6CFF);
}
#stage-log .x-log-rhythm .rh-mark { will-change: transform; }

/* ---- The sheet ---------------------------------------------------------- */
#stage-log .x-log-sheet {
  top: calc(62 * var(--pt));
  bottom: calc(-40 * var(--pt));          /* room for the land spring's overshoot */
  padding: 0 0 calc(40 * var(--pt));
  overflow: hidden;
  background: linear-gradient(180deg, var(--scr-bg) 0%, var(--scr-bg-2) 100%);
  transform: translateY(calc(100% + 24px));
  transition: transform var(--spring-enter-ms) var(--spring-enter);
}
#stage-log .is-open .x-log-sheet {
  transform: none;
  transition: transform var(--spring-land-ms) var(--spring-land);
}
#stage-log .x-log-bar { padding: calc(14 * var(--pt)) calc(16 * var(--pt)) calc(8 * var(--pt)); margin: 0; }
#stage-log .x-log-bar .gbtn {
  font: 600 calc(15 * var(--pt))/1 var(--font-body);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
#stage-log .x-log-title { font: 600 calc(17 * var(--pt))/1 var(--font-body); }
#stage-log .x-log-form { padding: calc(6 * var(--pt)) calc(16 * var(--pt)) 0; }
#stage-log .x-log-sec { margin-bottom: calc(14 * var(--pt)); }
#stage-log .x-log-sec .group { margin: 0; }
#stage-log .x-log-sec .group-k { margin: 0 0 calc(6 * var(--pt)) calc(16 * var(--pt)); font-weight: 500; }
#stage-log .x-log-foot { margin: calc(6 * var(--pt)) calc(16 * var(--pt)) 0; font-size: calc(12 * var(--pt)); line-height: 1.3; color: var(--scr-ink-2); }

/* Type: the kind picker (GlassChoicePicker), the lens tinted by the kind. */
#stage-log .x-log-sec .gpick { margin: 0 calc(2 * var(--pt)); }
#stage-log .gpick button { -webkit-tap-highlight-color: transparent; }
#stage-log .gpick-lens {
  left: calc(4 * var(--pt) + var(--k, 0) * (100% - 8 * var(--pt)) / var(--n, 4));
  width: calc((100% - 8 * var(--pt)) / var(--n, 4));
}
#stage-log .x-log-kinds button { padding: calc(7 * var(--pt)) 0 calc(6 * var(--pt)); gap: calc(3 * var(--pt)); font: 600 calc(13 * var(--pt))/1 var(--font-body); }
#stage-log .x-log-kinds img { width: calc(34 * var(--pt)); height: calc(34 * var(--pt)); }
#stage-log .gpick button[aria-pressed="false"] span { color: var(--scr-ink-2); font-weight: 500; }

/* Photo: preview placeholder, Take a Picture, Choose from Photos, Delete. */
#stage-log .x-log-photo {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: calc(12 * var(--pt)) calc(18 * var(--pt)) calc(10 * var(--pt));
}
#stage-log .x-log-prev {
  position: relative; flex: none;
  width: calc(58 * var(--pt)); height: calc(58 * var(--pt)); margin-top: calc(2 * var(--pt));
  border-radius: 50%;
  background: var(--scr-fill);
  box-shadow: 0 0 0 calc(3 * var(--pt)) var(--scr-card), 0 0 0 calc(4.5 * var(--pt)) var(--scr-sep);
}
#stage-log .x-log-prev img {
  position: absolute; left: 50%; top: 50%;
  width: calc(28 * var(--pt)); height: calc(28 * var(--pt));
  margin: calc(-14 * var(--pt)) 0 0 calc(-14 * var(--pt));
  opacity: 0.55;
}
#stage-log .x-log-act {
  display: grid; justify-items: center; gap: calc(5 * var(--pt));
  font-size: calc(11 * var(--pt)); line-height: 1.2; color: var(--scr-ink-2); text-align: center;
}
#stage-log .x-log-act.is-off { color: var(--scr-ink-3); }
#stage-log .x-log-act-c {
  display: grid; place-items: center;
  width: calc(44 * var(--pt)); height: calc(44 * var(--pt)); border-radius: 50%;
}
#stage-log .x-log-act-c svg { width: calc(19 * var(--pt)); height: calc(19 * var(--pt)); }
#stage-log .x-log-act-c.is-cam { background: linear-gradient(180deg, #7C7AF2, #5856D6); color: #fff; }
#stage-log .x-log-act-c.is-lib { background: color-mix(in srgb, var(--scr-tint) 12%, transparent); color: var(--scr-tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--scr-tint) 25%, transparent); }
#stage-log .x-log-act-c.is-del { width: calc(34 * var(--pt)); height: calc(34 * var(--pt)); margin: calc(5 * var(--pt)) 0; background: var(--scr-fill); color: var(--scr-ink-3); }
#stage-log .x-log-act-c.is-del svg { width: calc(15 * var(--pt)); height: calc(15 * var(--pt)); }

/* Contents (vomit): four glass chips, one or none. */
#stage-log .x-log-vc { --n: 4; }
#stage-log .x-log-vc button { padding: calc(8 * var(--pt)) 0 calc(7 * var(--pt)); gap: calc(5 * var(--pt)); font: 600 calc(12 * var(--pt))/1 var(--font-body); }
#stage-log .x-log-vc svg { width: calc(22 * var(--pt)); height: calc(22 * var(--pt)); color: var(--scr-ink-2); transition: color 0.2s var(--ease-fade); }
#stage-log .x-log-vc button[aria-pressed="true"] svg { color: #6E8B3D; }
#stage-log .x-log-vc { --lens: #6E8B3D; }
#stage-log .x-log-vc .gpick-lens { transition: left 0.5s var(--spring-land), width 0.5s var(--spring-land), opacity 0.2s var(--ease-fade); }
#stage-log .x-log-vc.is-none .gpick-lens { opacity: 0; }
#stage-log .x-log-vc.is-snap .gpick-lens { transition: none; }
#stage-log .x-log-foot.is-caption { color: var(--scr-ink); font-weight: 500; }

/* Consistency: readout, tick row, track, loupe. */
#stage-log .x-log-cons { --c: var(--s3); padding: calc(12 * var(--pt)) calc(20 * var(--pt)) calc(8 * var(--pt)); }
#stage-log .x-log-ask { font-size: calc(13 * var(--pt)); color: var(--scr-ink-2); margin-bottom: calc(8 * var(--pt)); }
#stage-log .x-log-name {
  display: flex; align-items: center; gap: calc(8 * var(--pt));
  font: 600 calc(17 * var(--pt))/1.25 var(--font-body); letter-spacing: -0.02em;
  white-space: nowrap;
}
#stage-log .x-log-dot {
  flex: none; width: calc(10 * var(--pt)); height: calc(10 * var(--pt)); border-radius: 50%;
  background: var(--c, var(--s3));
}
#stage-log .x-log-desc {
  margin-top: calc(3 * var(--pt));
  height: calc(2 * 1.3 * 13 * var(--pt));     /* two lines reserved, every state */
  overflow: hidden;
  font-size: calc(13 * var(--pt)); line-height: 1.3; color: var(--scr-ink-2);
}

#stage-log .x-log-slider {
  --T: calc(40 * var(--pt));                  /* the grabber */
  --L: calc(64 * var(--pt));                  /* the lens */
  position: relative;
  height: calc(128 * var(--pt));
  margin-top: calc(2 * var(--pt));
  touch-action: pan-y;
  cursor: grab;
  border-radius: calc(12 * var(--pt));
}
#stage-log .x-log-slider.is-engaged { cursor: grabbing; }
#stage-log .x-log-slider:focus-visible { outline-offset: calc(4 * var(--pt)); }
#stage-log .x-log-ticks img {
  position: absolute;
  left: calc((var(--j) + 0.5) / 7 * 100%); top: calc(68.4 * var(--pt));
  width: calc(18 * var(--pt)); height: calc(18 * var(--pt));
  margin: calc(-9 * var(--pt)) 0 0 calc(-9 * var(--pt));
  opacity: 0.35;
  transform-origin: 50% 100%;
  transition: opacity 0.15s var(--ease-fade);
  pointer-events: none;
}
#stage-log .x-log-track {
  position: absolute; left: 0; right: 0; top: calc(102.4 * var(--pt));
  height: calc(12 * var(--pt)); border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--s1), var(--s2), var(--s3), var(--s4), var(--s5), var(--s6), var(--s7));
  box-shadow: inset 0 0 0 0.5px rgba(60, 60, 67, 0.3);
}
#stage-log .x-log-loupe {
  position: absolute; top: calc(36.4 * var(--pt));
  left: calc(var(--T) / 2 - var(--L) / 2 + var(--i, 2) * (100% - var(--T)) / 6);
  width: var(--L); height: calc(92 * var(--pt));
  transition: left var(--x-log-snap-ms, 260ms) var(--x-log-snap, cubic-bezier(.25, 1.2, .5, 1));
  pointer-events: none;
}
#stage-log .x-log-lens {
  position: absolute; inset: 0;
  transform-origin: 50% 78.26%;               /* the grabber's centre */
  transition: transform 0.2s var(--x-log-snap, cubic-bezier(.25, 1.2, .5, 1));
}
#stage-log .is-engaged .x-log-lens { transform: scale(1.25); }
#stage-log .x-log-drop { position: absolute; inset: 0; transform-origin: 50% 78.26%; }
#stage-log .x-log-drop svg {
  width: 100%; height: 100%; overflow: visible;
  filter: drop-shadow(0 calc(3 * var(--pt)) calc(7 * var(--pt)) rgba(0, 0, 0, 0.16));
}
#stage-log .x-log-lfill {
  fill: color-mix(in srgb, var(--c) 22%, rgba(255, 255, 255, 0.8));
  transition: fill 0.18s var(--ease-fade);
}
#stage-log .x-log-ledge {
  fill: none; stroke-width: 0.8;
  stroke: color-mix(in srgb, var(--c) 55%, transparent);
  transition: stroke 0.18s var(--ease-fade);
}
@media (prefers-color-scheme: dark) {
  #stage-log .x-log-lfill { fill: color-mix(in srgb, var(--c) 30%, rgba(52, 50, 66, 0.86)); }
}
#stage-log .x-log-art {
  position: absolute; left: 0; top: 0;
  width: var(--L); height: var(--L);
}
#stage-log .x-log-art img {
  position: absolute; left: 50%; top: 50%;
  width: calc(41 * var(--pt)); height: calc(41 * var(--pt));
  margin: calc(-20.5 * var(--pt)) 0 0 calc(-20.5 * var(--pt));
  opacity: 0;
  transition: opacity 0.12s var(--ease-fade);
}
#stage-log .x-log-art img.on { opacity: 1; }
#stage-log .x-log-chev {
  position: absolute;
  left: calc(50% - 9 * var(--pt)); top: calc(72 * var(--pt) - 9 * var(--pt));
  width: calc(18 * var(--pt)); height: calc(18 * var(--pt));
  color: var(--scr-ink-2);
}

/* Rows: Time, Notes, the meal form. */
#stage-log .x-log-rows { padding: 0 calc(16 * var(--pt)); }
#stage-log .x-log-rows .row { min-height: calc(44 * var(--pt)); padding: calc(8 * var(--pt)) 0; }
#stage-log .x-log-pill {
  padding: calc(5 * var(--pt)) calc(11 * var(--pt)); border-radius: calc(8 * var(--pt));
  background: var(--scr-fill); font-variant-numeric: tabular-nums;
}
#stage-log .x-log-ph { color: var(--scr-ink-3); }
#stage-log .x-log-grow { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#stage-log .x-log-food .glyph, #stage-log .x-log-ico { flex: none; width: calc(22 * var(--pt)); height: calc(22 * var(--pt)); color: var(--scr-tint); }
#stage-log .x-log-ico.is-2 { color: var(--scr-ink-2); }
#stage-log .x-log-food .glyph { margin-right: calc(4 * var(--pt)); }
#stage-log .x-log-rows .row > svg.x-log-ico + .x-log-grow { margin-left: calc(4 * var(--pt)); }
#stage-log .x-log-link { color: var(--scr-tint); font-size: calc(15 * var(--pt)); }
#stage-log .x-log-chr { flex: none; width: calc(12 * var(--pt)); height: calc(12 * var(--pt)); color: var(--scr-ink-3); }
#stage-log .x-log-num { font-variant-numeric: tabular-nums; }
#stage-log .x-log-step {
  display: inline-flex; align-items: center; margin-left: calc(6 * var(--pt));
  height: calc(32 * var(--pt)); border-radius: calc(9 * var(--pt)); background: var(--scr-fill);
}
#stage-log .x-log-step svg { width: calc(44 * var(--pt)); height: calc(18 * var(--pt)); }
#stage-log .x-log-step i { width: 1px; height: calc(18 * var(--pt)); background: var(--scr-sep); }

/* The form's closing Save (saveFormSection: the indigo row). */
#stage-log .x-log-savesec { margin-top: calc(20 * var(--pt)); }
#stage-log .x-log-save2 {
  display: block; width: 100%; height: calc(50 * var(--pt));
  border: 0; border-radius: calc(16 * var(--pt));
  background: linear-gradient(180deg, #7472EE, #5856D6);
  color: #fff; font: 600 calc(17 * var(--pt))/1 var(--font-body);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}

/* The touch indicator (autoplay only). */
#stage-log .x-log-touch {
  position: absolute; z-index: 45; left: 0; top: 0;
  width: calc(46 * var(--pt)); height: calc(46 * var(--pt));
  margin: calc(-23 * var(--pt)) 0 0 calc(-23 * var(--pt));
  border-radius: 50%;
  background: rgba(64, 54, 110, 0.24);
  box-shadow:
    inset 0 0 0 calc(1.5 * var(--pt)) rgba(255, 255, 255, 0.9),
    0 0 0 calc(1 * var(--pt)) rgba(50, 40, 90, 0.22),
    0 calc(4 * var(--pt)) calc(14 * var(--pt)) rgba(20, 10, 60, 0.22);
  opacity: 0; pointer-events: none;
}

/* Under the phone: the hint and Replay (page tokens). */
#stage-log .x-log-under {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 44px;
}
#stage-log .x-log-cap { margin: 0; display: none; color: var(--ink-2); }
@media (min-width: 960px) { #stage-log .x-log-cap { display: block; } }
#stage-log .x-log-replay {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px 0 11px;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-line);
  background: var(--glass-strong);
  color: var(--ink);
  font: 650 14px/1 var(--font-body);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.45s var(--spring-pop);
}
#stage-log .x-log-replay:hover { transform: scale(1.04); }
#stage-log .x-log-replay:active { transform: scale(0.96); transition-duration: 0.12s; }
#stage-log .x-log-replay svg { width: 16px; height: 16px; }

/* Instant state changes: resets, and Reduced Motion (state without travel). */
#stage-log .x-log.is-instant *,
#stage-log .x-log.is-reduced * { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  #stage-log .x-log * { transition: none !important; }
}

/* The chart's window bands in their kind's colour (DogRhythmChart: a 16 %
   fill between two 50 % edge rules); the poop band travels to the evening
   window when the morning poop lands. */
#stage-log .x-log-rhythm .rh-band { outline: 0; }
#stage-log .x-log-rhythm .x-log-band-poop {
  background: rgba(139, 94, 60, 0.16);
  box-shadow: inset 1px 0 0 rgba(139, 94, 60, 0.5), inset -1px 0 0 rgba(139, 94, 60, 0.5);
}
#stage-log .x-log-rhythm .x-log-band-pee {
  background: rgba(60, 154, 216, 0.16);
  box-shadow: inset 1px 0 0 rgba(60, 154, 216, 0.5), inset -1px 0 0 rgba(60, 154, 216, 0.5);
}
@media (prefers-color-scheme: dark) {
  #stage-log .x-log-rhythm .x-log-band-poop { background: rgba(196, 140, 96, 0.24); box-shadow: inset 1px 0 0 rgba(196, 140, 96, 0.6), inset -1px 0 0 rgba(196, 140, 96, 0.6); }
  #stage-log .x-log-rhythm .x-log-band-pee { background: rgba(90, 176, 232, 0.22); box-shadow: inset 1px 0 0 rgba(90, 176, 232, 0.6), inset -1px 0 0 rgba(90, 176, 232, 0.6); }
}
#stage-log .x-log-predict .pr-now { flex: none; }

/* Hit areas: at least 44 px at 390 px wide, where the device frame scales
   every control down. Neighbouring segments (the kind and contents pickers)
   overhang vertically only, so no segment steals its neighbour's tap. */
#stage-log .x-log-logbtn,
#stage-log .x-log-bar .gbtn,
#stage-log .x-log-save2,
#stage-log .x-log-replay { position: relative; }
#stage-log .x-log-logbtn::before,
#stage-log .x-log-bar .gbtn::before,
#stage-log .gpick button::before,
#stage-log .x-log-save2::before,
#stage-log .x-log-replay::before { content: ""; position: absolute; }
#stage-log .x-log-logbtn::before { inset: -6px -2px; }
#stage-log .x-log-bar .gbtn::before { inset: -11px -6px; }
#stage-log .gpick button::before { inset: -6px 0; }
#stage-log .x-log-save2::before { inset: -10px 0 -6px; }
#stage-log .x-log-replay::before { inset: -6px -2px; }
/* The root takes focus only when Replay hands it back; no ring for that. */
#stage-log .x-log:focus { outline: none; }