/* 21:15 Your dog's situation: four starting points ("What brings you
   here?"), the "Your Pooppy" chips of what each one switches on, and
   Bella's Home card on a phone, rebuilt from the modules the way the real
   card is (HomeSurfaces: alerts, check-in, strip, ONE hero, program lines,
   actions). Everything outside the phone uses page tokens (the sky is
   night here, but the ink can be either); the phone follows the visitor's
   appearance like the app.

   The morph is CSS: js/scenes/situations.js sets data-sit on .x-sit, and
   every optional part of the card (.x-part[data-on~=...]) folds open or
   shut on grid rows with the enter spring while it cross-fades, so the
   card's height glides and nothing cuts. The script only moves the
   selection lens, draws the chart and runs the autoplay. */

/* The phone's width is computed HERE against the stage, as a registered
   length: an unregistered value with cqw would be re-resolved inside the
   phone (its own container) by the kit's screen radius. */
@property --x-sit-pw { syntax: '<length>'; inherits: true; initial-value: 256px; }

#stage-situations {
  --stage-h: 840px;
  container: x-sit / inline-size;
  --x-acc: #5856D6;
  --x-acc-fill: rgba(88, 86, 214, 0.12);
  --x-acc-line: rgba(88, 86, 214, 0.2);
  --x-morph: var(--spring-enter-ms) var(--spring-enter);
}
html[data-ink="light"] #stage-situations {
  --x-acc: #C3C1FF;
  --x-acc-fill: rgba(185, 183, 255, 0.17);
  --x-acc-line: rgba(195, 193, 255, 0.24);
}
@media (min-width: 490px) { #stage-situations { --stage-h: 700px; } }

#stage-situations .x-sit {
  position: relative;
  width: 100%; max-width: 700px;
  display: grid; justify-items: center; row-gap: 14px;
}

/* ---- The four cards ------------------------------------------------- */
#stage-situations .x-sit-side { width: 100%; }
#stage-situations .x-sit-q,
#stage-situations .x-sit-sub { display: none; }
#stage-situations .x-sit-q {
  font: 400 27px/1.05 var(--font-display); color: var(--ink);
  letter-spacing: 0.005em;
}
#stage-situations .x-sit-sub { margin: 6px 0 16px; font-size: 15px; color: var(--ink-2); }

#stage-situations .x-sit-cards {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
#stage-situations .x-sit-c {
  position: relative;
  display: grid; grid-template-columns: 18px minmax(0, 1fr);
  grid-template-areas: "g t" "l l";
  column-gap: 8px; row-gap: 4px; align-content: start;
  margin: 0; padding: 9px 10px 10px;
  border-radius: var(--r-card);
  /* the strong glass: the moon and the stars sit right behind these cards
     at 21:15, and the words must stay readable over them */
  background: var(--glass-strong);
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: var(--shadow-1);
  color: var(--ink); text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.25s var(--ease-fade);
}
#stage-situations .x-sit-c:hover { border-color: color-mix(in srgb, var(--x-acc) 45%, transparent); }
/* Keyboard focus in the page's ink, outside the lens's own violet ring, so
   the two never read as one. */
#stage-situations .x-sit-c:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: var(--r-card); }
/* After Replay from the keyboard, focus waits on the demo itself (a
   programmatic target the loop never changes): a quiet ring around it. */
#stage-situations .x-sit:focus { outline: none; }
#stage-situations .x-sit:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ink) 40%, transparent);
  outline-offset: 10px; border-radius: var(--r-container);
}
#stage-situations .x-sit-g {
  grid-area: g;
  width: 18px; height: 18px; margin-top: 0;
  color: var(--x-acc);
}
#stage-situations .x-sit-t { grid-area: t; font: 650 14px/1.25 var(--font-body); letter-spacing: -0.005em; }
#stage-situations .x-sit-l { grid-area: l; font-size: 12.5px; line-height: 1.3; color: var(--ink-2); }

/* The selection lens: one ring that travels between the cards on the land
   spring. Before the script measures, the chosen card wears the ring. */
#stage-situations .x-sit-lens {
  position: absolute; z-index: 2; left: 0; top: 0;
  width: 0; height: 0;
  border-radius: var(--r-card);
  border: 2px solid var(--x-acc);
  background: color-mix(in srgb, var(--x-acc) 8%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--x-acc) 15%, transparent),
              0 10px 26px color-mix(in srgb, var(--x-acc) 20%, transparent);
  pointer-events: none;
  opacity: 0;
  transition:
    transform var(--spring-land-ms) var(--spring-land),
    width var(--spring-land-ms) var(--spring-land),
    height var(--spring-land-ms) var(--spring-land),
    opacity var(--fade-ms) var(--ease-fade);
}
#stage-situations .x-ready .x-sit-lens { opacity: 1; }
#stage-situations .x-sit-lens.x-snap { transition: none; }
#stage-situations .x-sit:not(.x-ready) .x-sit-c[aria-checked="true"] {
  border-color: var(--x-acc);
  box-shadow: inset 0 0 0 1px var(--x-acc);
}

/* ---- Your Pooppy ------------------------------------------------------ */
#stage-situations .x-sit-yours { margin-top: 14px; }
#stage-situations .x-sit-yrow { position: relative; margin-bottom: 9px; }
#stage-situations .x-sit-yh {
  font: 400 20px/1 var(--font-display); color: var(--ink);
}
/* Replay, once the visitor has taken over: it floats at the end of the
   heading's row (absolute, so showing it never moves the chips), 34 px to
   the eye, 44 px to the finger. */
#stage-situations .x-sit-replay {
  position: absolute; right: 0; top: 50%;
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px 0 11px; margin: -17px 0 0;
  border-radius: var(--r-pill);
  background: var(--glass-strong); color: var(--ink);
  border: 1px solid var(--glass-line); box-shadow: var(--shadow-1);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font: 650 14px/1 var(--font-body); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--spring-pop-ms) var(--spring-pop);
}
#stage-situations .x-sit-replay[hidden] { display: none; }
#stage-situations .x-sit-replay::before { content: ""; position: absolute; inset: -5px -2px; }
#stage-situations .x-sit-replay svg { width: 16px; height: 16px; flex: none; }
#stage-situations .x-sit-replay:hover { transform: scale(1.04); }
#stage-situations .x-sit-replay:active { transform: scale(0.96); transition-duration: 0.12s; }
#stage-situations .x-sit-replay:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: var(--r-pill); }
#stage-situations .x-sit-sets { display: grid; }      /* the sets share one cell: the tallest sizes it */
#stage-situations .x-sit-chips {
  grid-area: 1 / 1;
  display: flex; flex-wrap: wrap; align-content: flex-start; gap: 7px 6px;
  margin: 0; padding: 0; list-style: none;
}
#stage-situations .x-sit-chips li {
  --d: calc(100ms + var(--i) * 70ms);
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px 5px 9px;
  border-radius: var(--r-pill);
  background: var(--x-acc-fill);
  box-shadow: inset 0 0 0 1px var(--x-acc-line);
  color: var(--x-acc);
  font: 600 13px/1.2 var(--font-body);
  white-space: nowrap;
  /* leaving: the old strip fades inside the new one's 0.1 s pause, then
     resets out of sight, so the two strips never overlap */
  opacity: 0;
  transform: translateY(4px) scale(0.8);
  transition: opacity 90ms var(--ease-exit), transform 0s linear 90ms;
}
#stage-situations .x-sit-chips li .glyph,
#stage-situations .x-sit-chips li svg { width: 14px; height: 14px; flex: none; }
/* arriving: a 0.1 s pause, then one chip every 70 ms on the pop spring */
#stage-situations [data-sit="puppy"] .x-sit-chips[data-for="puppy"] li,
#stage-situations [data-sit="tummy"] .x-sit-chips[data-for="tummy"] li,
#stage-situations [data-sit="condition"] .x-sit-chips[data-for="condition"] li,
#stage-situations [data-sit="tracking"] .x-sit-chips[data-for="tracking"] li {
  opacity: 1; transform: none;
  transition:
    opacity 0.22s var(--ease-fade) var(--d),
    transform var(--spring-pop-ms) var(--spring-pop) var(--d);
}
/* Before the first beat (autoplay only): the chosen strip waits unlit, so
   the stage opens on the puppy's chips popping in. */
#stage-situations .x-sit.x-pre .x-sit-chips[data-for] li {
  opacity: 0; transform: translateY(4px) scale(0.8); transition: none;
}

/* ---- The phone ---------------------------------------------------------- */
#stage-situations .x-sit-dev {
  --x-sit-pw: min(244px, 68cqw);
  display: grid; justify-items: center; gap: 12px;
}
#stage-situations .x-sit-phone { --phone-w: var(--x-sit-pw); }
#stage-situations .x-sit-note {
  max-width: 24em;
  font-size: 13.5px; line-height: 1.45; color: var(--ink-2); text-align: center;
  text-wrap: balance;
}
#stage-situations .x-sit-note span { white-space: nowrap; }
#stage-situations .x-sit-note svg {
  display: inline-block; vertical-align: -3px;
  width: 17px; height: 17px; margin-right: 6px; color: var(--ink-3);
}

/* Side by side once the stage is wide enough: cards stacked on the left,
   the phone beside them. */
@container x-sit (min-width: 450px) {
  #stage-situations .x-sit {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; justify-items: stretch;
    column-gap: clamp(20px, 5cqw, 44px);
  }
  #stage-situations .x-sit-q,
  #stage-situations .x-sit-sub { display: block; }
  #stage-situations .x-sit-q { font-size: clamp(23px, 4.4cqw, 27px); }
  #stage-situations .x-sit-cards { grid-template-columns: 1fr; gap: 9px; }
  #stage-situations .x-sit-c {
    grid-template-columns: clamp(22px, 4.2cqw, 26px) minmax(0, 1fr);
    column-gap: clamp(10px, 2cqw, 12px); row-gap: 3px;
    grid-template-areas: "g t" "g l";
    padding: 12px 14px 13px 13px;
  }
  #stage-situations .x-sit-g { width: clamp(22px, 4.2cqw, 26px); height: clamp(22px, 4.2cqw, 26px); margin-top: 1px; }
  #stage-situations .x-sit-t { font-size: clamp(14.5px, 2.65cqw, 16px); }
  #stage-situations .x-sit-l { font-size: clamp(12.5px, 2.25cqw, 13.5px); }
  #stage-situations .x-sit-yours { margin-top: 22px; }
  #stage-situations .x-sit-yh { font-size: 21px; }
  #stage-situations .x-sit-yrow { margin-bottom: 10px; }
  #stage-situations .x-sit-dev { --x-sit-pw: clamp(220px, 47cqw, 296px); }
  #stage-situations .x-sit-note { max-width: var(--x-sit-pw); font-size: 13.5px; }
}
@container x-sit (min-width: 560px) {
  #stage-situations .x-sit-chips { gap: 8px; }
  #stage-situations .x-sit-chips li { gap: 6px; padding: 6px 12px 6px 10px; font-size: 14px; }
  #stage-situations .x-sit-chips li .glyph,
  #stage-situations .x-sit-chips li svg { width: 15px; height: 15px; }
}

/* ---- Bella's card: the parts that come and go --------------------------- */
#stage-situations .x-card { gap: 0; }
#stage-situations .x-gap { padding-top: calc(10 * var(--pt)); }
#stage-situations .x-part {
  display: grid; grid-template-rows: 0fr;
  opacity: 0; visibility: hidden;
  transition:
    grid-template-rows var(--x-morph),
    opacity var(--exit-ms) var(--ease-exit),
    visibility 0s linear var(--spring-enter-ms);
}
#stage-situations .x-clip {
  min-height: 0; overflow: hidden;
  /* room for a part's own edge and shadow inside the clip (the slide's
     shadow falls 8 pt below it, the prediction block's 14 pt) */
  margin: 0 calc(-10 * var(--pt)) calc(-14 * var(--pt));
  padding: 0 calc(10 * var(--pt)) calc(14 * var(--pt));
}
#stage-situations [data-sit="puppy"] .x-part[data-on~="puppy"],
#stage-situations [data-sit="tummy"] .x-part[data-on~="tummy"],
#stage-situations [data-sit="condition"] .x-part[data-on~="condition"],
#stage-situations [data-sit="tracking"] .x-part[data-on~="tracking"] {
  grid-template-rows: 1fr;
  opacity: 1; visibility: visible;
  transition:
    grid-template-rows var(--x-morph),
    opacity 0.3s var(--ease-fade) 0.06s,
    visibility 0s;
}
/* An arriving part also rises 6 pt into place (the app's .rise), on the
   same spring as the fold; a leaving one only fades and folds. */
#stage-situations .x-part > .x-clip > .x-gap {
  transform: translateY(calc(6 * var(--pt)));
  transition: transform 0s linear var(--spring-enter-ms);
}
#stage-situations [data-sit="puppy"] .x-part[data-on~="puppy"] > .x-clip > .x-gap,
#stage-situations [data-sit="tummy"] .x-part[data-on~="tummy"] > .x-clip > .x-gap,
#stage-situations [data-sit="condition"] .x-part[data-on~="condition"] > .x-clip > .x-gap,
#stage-situations [data-sit="tracking"] .x-part[data-on~="tracking"] > .x-clip > .x-gap {
  transform: none;
  transition: transform var(--x-morph);
}

/* Today's care (a care alert: today's tracked dose slots). */
#stage-situations .x-care {
  display: grid; gap: calc(7 * var(--pt));
  padding: calc(10 * var(--pt)) calc(14 * var(--pt)) calc(11 * var(--pt));
  border-radius: calc(16 * var(--pt));
  background: var(--scr-card);
  border: 1px solid var(--scr-sep);
}
#stage-situations .x-care-h,
#stage-situations .x-sym { display: flex; align-items: center; gap: calc(8 * var(--pt)); font-weight: 600; }
#stage-situations .x-care-h img,
#stage-situations .x-sym img { width: calc(19 * var(--pt)); height: calc(19 * var(--pt)); object-fit: contain; }
#stage-situations .x-dose { display: flex; align-items: center; gap: calc(10 * var(--pt)); min-height: calc(32 * var(--pt)); }
#stage-situations .x-dose-g { width: calc(19 * var(--pt)); height: calc(19 * var(--pt)); flex: none; }
#stage-situations .x-given { color: var(--scr-ok); }
#stage-situations .x-due { color: var(--scr-ink-3); }
#stage-situations .x-dose-txt { display: grid; flex: 1; min-width: 0; }
#stage-situations .x-dose-t { font-variant-numeric: tabular-nums; white-space: nowrap; }
#stage-situations .x-dose-s { font-size: calc(12 * var(--pt)); color: var(--scr-ink-2); white-space: nowrap; }
#stage-situations .x-care-hr { display: block; height: 1px; background: var(--scr-sep); }
#stage-situations .x-sym { color: var(--scr-tint); }

/* The check-in row: today's answer (given at 20:00). */
#stage-situations .x-ci {
  display: grid;
  border-radius: calc(16 * var(--pt));
  background: color-mix(in srgb, var(--scr-tint) 12%, transparent);
}
#stage-situations .x-ci-v {
  display: flex; align-items: center; gap: calc(10 * var(--pt));
  padding: calc(10 * var(--pt)) calc(12 * var(--pt));
}
#stage-situations .x-ci-v svg { width: calc(17 * var(--pt)); height: calc(17 * var(--pt)); flex: none; color: var(--scr-tint); }
#stage-situations .x-ci-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#stage-situations .x-ci-done .x-ci-t { color: var(--scr-ink-2); }
#stage-situations .x-ci-v b { color: var(--scr-tint); font-weight: 600; }

/* The today strip in the app's two rows; without Meals the meal cell
   folds and the walk takes the row. */
#stage-situations .x-strip { display: block; }
#stage-situations .x-srow { display: flex; }
#stage-situations .x-srow + .x-srow { border-top: 1px solid var(--scr-sep); }
#stage-situations .x-srow .cell { flex: 1 1 0; min-width: 0; white-space: nowrap; }
#stage-situations .x-srow .x-meal {
  flex: 0 0 50%; overflow: hidden;
  transition: flex-basis var(--x-morph), padding var(--x-morph), opacity 0.3s var(--ease-fade) 0.06s;
}
#stage-situations [data-sit="tracking"] .x-srow .x-meal {
  flex-basis: 0%; padding-left: 0; padding-right: 0; opacity: 0;
  transition: flex-basis var(--x-morph), padding var(--x-morph), opacity var(--exit-ms) var(--ease-exit);
}

/* The kit's prediction block (Next poop | Next pee); its drop shadow is
   tightened to fit the fold's clip, so it never shows a cut edge. */
#stage-situations .predict { box-shadow: 0 calc(4 * var(--pt)) calc(10 * var(--pt)) rgba(79, 70, 229, 0.24); }

/* The walk hero: this week's walks and the slide that starts one. */
#stage-situations .x-walk { display: grid; gap: calc(10 * var(--pt)); }
#stage-situations .x-walk-h { display: flex; align-items: center; gap: calc(8 * var(--pt)); font-weight: 600; white-space: nowrap; }
#stage-situations .x-walk-h img { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); object-fit: contain; }
#stage-situations .x-slide {
  display: flex; align-items: center;
  height: calc(56 * var(--pt)); padding: calc(4 * var(--pt));
  border-radius: var(--r-pill);
  background: var(--scr-glass); border: 1px solid var(--scr-glass-line);
  box-shadow: var(--scr-shadow);
}
#stage-situations .x-thumb {
  flex: none; display: grid; place-items: center;
  width: calc(48 * var(--pt)); height: calc(48 * var(--pt));
  border-radius: 50%;
  background: var(--walk);
  color: #0E2A18;
}
#stage-situations .x-thumb .glyph { width: calc(25 * var(--pt)); height: calc(25 * var(--pt)); }
#stage-situations .x-slide-t {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--pt));
  padding-right: calc(22 * var(--pt));
  font-size: calc(17 * var(--pt)); font-weight: 500; color: var(--scr-ink-2); white-space: nowrap;
}
#stage-situations .x-slide-t svg { width: calc(15 * var(--pt)); height: calc(15 * var(--pt)); }

/* Program lines: one passive line each, flat tinted glyph. */
#stage-situations .x-prog {
  display: flex; align-items: flex-start; gap: calc(8 * var(--pt));
  font-size: calc(13 * var(--pt)); line-height: 1.3; color: var(--scr-ink-2);
}
#stage-situations .x-prog .glyph {
  flex: none; width: calc(16 * var(--pt)); height: calc(16 * var(--pt));
  color: var(--scr-tint);
}

/* The log button: its kinds follow the modules (no food without Meals),
   and photo first puts a camera on the poop. */
#stage-situations .x-plus { font-size: calc(26 * var(--pt)); font-weight: 300; line-height: 1; }
#stage-situations .x-poo { position: relative; display: block; flex: none; width: calc(28 * var(--pt)); height: calc(28 * var(--pt)); }
#stage-situations .x-poo img { display: block; }
#stage-situations .x-cam {
  position: absolute; right: calc(-7 * var(--pt)); bottom: calc(-4 * var(--pt));
  width: calc(15 * var(--pt)); height: calc(15 * var(--pt));
  opacity: 0; transform: scale(0.4);
  transition: opacity var(--exit-ms) var(--ease-exit), transform 0s linear var(--exit-ms);
}
#stage-situations [data-sit="tummy"] .x-cam {
  opacity: 1; transform: none;
  transition: opacity 0.2s var(--ease-fade) 0.2s, transform var(--spring-pop-ms) var(--spring-pop) 0.2s;
}
#stage-situations .x-caps .x-food {
  flex: none;
  transition: width var(--x-morph), margin var(--x-morph), opacity 0.3s var(--ease-fade) 0.06s, transform var(--spring-pop-ms) var(--spring-pop);
}
#stage-situations [data-sit="tracking"] .x-caps .x-food {
  width: 0; margin-left: calc(-9 * var(--pt)); opacity: 0; transform: scale(0.6);
  transition: width var(--x-morph), margin var(--x-morph), opacity var(--exit-ms) var(--ease-exit), transform var(--x-morph);
}

/* The tab bar: the Food tab hides while Meals is off. */
#stage-situations .x-tabs { display: flex; }
#stage-situations .x-tabs .tab { flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; }
#stage-situations .x-foodtab { transition: flex-grow var(--x-morph), opacity 0.3s var(--ease-fade) 0.06s; }
#stage-situations [data-sit="tracking"] .x-foodtab {
  flex-grow: 0; opacity: 0;
  transition: flex-grow var(--x-morph), opacity var(--exit-ms) var(--ease-exit);
}

/* Reduced motion, and the silent reset between autoplay entries: every
   state change lands at once. */
html.reduced #stage-situations *,
#stage-situations .x-still *,
#stage-situations .x-instant * { transition: none !important; }