/* 17:50 Heads-up (Pro) - an iPhone Lock Screen in the warm late afternoon:
   the clock turns 17:50, the phone wakes and the bathroom reminder rises
   into the notification stack with a buzz. Beside it (below on a phone) a
   small card places 17:50 on Bella's day: the next poop window 18:05-19:15
   and the heads-up about 15 minutes before it; under the card, the Pause /
   Replay chip. Page tokens outside the phone, iOS points inside.
   The zoomed track spans 17:15-19:30 (135 min). */

#stage-headsup { --stage-h: 700px; }
@media (min-width: 960px) and (max-width: 1260px) { #stage-headsup { --stage-h: 580px; } }
@media (max-width: 600px) { #stage-headsup { --stage-h: 900px; } }

#stage-headsup .x-hu {
  container: xhu / inline-size;
  position: relative;
  width: 100%;
}
#stage-headsup .x-hu-scene {
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}
#stage-headsup .x-hu-phonewrap { position: relative; flex: none; }
#stage-headsup .x-hu-phone { --phone-w: min(272px, 70vw); }
@container xhu (min-width: 600px) {
  #stage-headsup .x-hu-scene { flex-direction: row; align-items: flex-start; justify-content: center; gap: 34px; }
  #stage-headsup .x-hu-phone { --phone-w: 300px; }
  #stage-headsup .x-hu-side { width: 268px; margin-top: 118px; }
}
/* A laptop's narrower stage column (viewports about 960-1260 wide): side by
   side, a size down, so the stage still fits one screen. */
@container xhu (min-width: 460px) and (max-width: 599px) {
  #stage-headsup .x-hu-scene { flex-direction: row; align-items: flex-start; justify-content: center; gap: 20px; }
  #stage-headsup .x-hu-phone { --phone-w: 222px; }
  #stage-headsup .x-hu-side { width: 218px; margin-top: 84px; }
  #stage-headsup .x-hu-strip { padding: 14px 13px 12px; }
  #stage-headsup .x-hu-shead { font-size: 13.5px; gap: 8px; line-height: 1.25; }
  #stage-headsup .x-hu-shead > span { display: grid; }
  #stage-headsup .x-hu-shead img { width: 26px; height: 26px; }
  #stage-headsup .x-hu-cap b { font-size: 13.5px; }
  #stage-headsup .x-hu-cap small { font-size: 12.5px; }
}
@container xhu (min-width: 484px) and (max-width: 599px) { #stage-headsup .x-hu-phone { --phone-w: 246px; } }
@container xhu (min-width: 530px) and (max-width: 599px) { #stage-headsup .x-hu-phone { --phone-w: 270px; } }

/* ---- The Lock Screen --------------------------------------------------- */
#stage-headsup .x-hu-lock {
  background: linear-gradient(180deg, #4B3D9C 0%, #8455A8 27%, #D9768C 54%, #FFA978 74%, #FFD08F 100%);
}
#stage-headsup .x-hu-wall { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
#stage-headsup .x-hu-dim { position: absolute; inset: 0; background: rgba(10, 6, 26, 0.68); }
/* Without scripts: the awake 17:50 screen with the reminder (the markup's
   state; the script starts the loop from the dimmed 17:49). */
html:not(.js) #stage-headsup .x-hu-dim { opacity: 0; }
#stage-headsup .lock-date, #stage-headsup .lock-time { text-shadow: 0 1px 10px rgba(40, 10, 60, 0.18); }
#stage-headsup .lock-time { overflow: hidden; height: calc(104 * var(--pt)); }
#stage-headsup .x-hu-time { display: inline-block; }
#stage-headsup .lock-stack { z-index: 2; }
#stage-headsup .x-hu-notif { transform-origin: 50% 100%; }
#stage-headsup .x-hu-qa {
  position: absolute; z-index: 2; bottom: calc(44 * var(--pt));
  width: calc(50 * var(--pt)); height: calc(50 * var(--pt));
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(30, 14, 50, 0.3); color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
#stage-headsup .x-hu-qa svg { width: calc(22 * var(--pt)); height: calc(22 * var(--pt)); }
#stage-headsup .x-hu-qa-l { left: calc(46 * var(--pt)); }
#stage-headsup .x-hu-qa-r { right: calc(46 * var(--pt)); }
#stage-headsup .x-hu-off {
  position: absolute; inset: 0; z-index: 40;
  background: #000; opacity: 0; pointer-events: none;
}

/* The buzz: two arcs each side, once, beside the notification. */
#stage-headsup .x-hu-buzz {
  position: absolute; z-index: 0; top: 74%;
  width: 30px; height: 70px; margin-top: -35px;
  pointer-events: none;
}
#stage-headsup .x-hu-buzz-l { left: -34px; }
#stage-headsup .x-hu-buzz-r { right: -34px; transform: scaleX(-1); }
#stage-headsup .x-hu-buzz i {
  position: absolute; top: 50%; right: 0;
  border: 2.5px solid transparent; border-left-color: var(--ink-3);
  border-radius: 50%; opacity: 0;
}
#stage-headsup .x-hu-buzz i:first-child { width: 22px; height: 34px; margin-top: -17px; right: 0; }
#stage-headsup .x-hu-buzz i:last-child { width: 34px; height: 58px; margin-top: -29px; right: 4px; }

/* The Pro chip beside the notification. */
#stage-headsup .x-hu-pro {
  position: absolute; z-index: 3; right: -26px; top: 71%;
  gap: 8px; padding: 6px 13px 6px 6px;
  background: var(--surface-strong);
  box-shadow: var(--shadow-1);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font-size: 14px; white-space: nowrap;
}
#stage-headsup .x-hu-pro .pro { vertical-align: 0; }
@container xhu (max-width: 599px) {
  #stage-headsup .x-hu-pro { right: -12px; padding: 4px; gap: 0; }
  #stage-headsup .x-hu-protext { display: none; }
  #stage-headsup .x-hu-buzz-l { left: -26px; }
  #stage-headsup .x-hu-buzz-r { right: -26px; }
}

/* ---- The day strip (page tokens) --------------------------------------- */
#stage-headsup .x-hu-side {
  width: min(100%, 360px);
  display: flex; flex-direction: column; align-items: center;
}
#stage-headsup .x-hu-strip {
  width: 100%;
  padding: 16px 16px 14px;
  border-radius: var(--r-card);
  background: var(--surface-strong);
  border: 1px solid var(--surface-line);
  box-shadow: var(--shadow-1);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  --hu: #7C5CFF;
}
html[data-ink="light"] #stage-headsup .x-hu-strip { --hu: #A88BFF; }
#stage-headsup .x-hu-shead {
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  font-size: 15px; color: var(--ink-2); font-variant-numeric: tabular-nums;
}
#stage-headsup .x-hu-shead img { width: 24px; height: 24px; }
#stage-headsup .x-hu-shead b { color: var(--ink); font-weight: 650; margin-right: 2px; }

#stage-headsup .x-hu-day { margin-top: 12px; }
#stage-headsup .x-hu-dtrack {
  position: relative; height: 8px; border-radius: 4px;
  background: color-mix(in srgb, var(--ink) 9%, transparent);
}
#stage-headsup .x-hu-dband {
  position: absolute; top: 0; bottom: 0; left: 75.347%; width: 4.861%;
  border-radius: 3px; background: var(--hu);
}
#stage-headsup .x-hu-dfocus {
  position: absolute; top: -4px; bottom: -4px; left: 71.875%; width: 9.375%;
  border: 1.5px solid var(--ink-3); border-radius: 5px;
}
#stage-headsup .x-hu-dticks { position: relative; height: 12px; margin-bottom: 5px; font: 600 11px/1 var(--font-round); color: var(--ink-3); font-variant-numeric: tabular-nums; }
#stage-headsup .x-hu-dticks span { position: absolute; top: 0; transform: translateX(-50%); }
#stage-headsup .x-hu-dticks span:first-child { transform: none; }
#stage-headsup .x-hu-dticks span:last-child { transform: translateX(-100%); }
/* The lens: the focus box on the day widens into the zoomed track below. */
#stage-headsup .x-hu-link {
  position: absolute; left: 0; top: 0; z-index: 0;
  width: 100%; height: 50px; max-width: none; overflow: visible;
}
#stage-headsup .x-hu-linkfill { fill: color-mix(in srgb, var(--hu) 7%, transparent); }
#stage-headsup .x-hu-linkline { fill: none; stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }

#stage-headsup .x-hu-zoom { position: relative; margin-top: 4px; padding-top: 50px; }
#stage-headsup .x-hu-ztrack {
  position: relative; z-index: 1; height: 36px; border-radius: 11px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border: 1px solid var(--surface-line);
}
#stage-headsup .x-hu-zgrid { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--surface-line); }
#stage-headsup .x-hu-zband {
  position: absolute; top: 4px; bottom: 4px; left: 37.037%; width: 51.852%;
  display: grid; place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--hu) 22%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--hu) 62%, transparent);
  font: 700 12.5px/1 var(--font-round); color: var(--ink);
  font-variant-numeric: tabular-nums; font-style: normal;
}
#stage-headsup .x-hu-zline {
  position: absolute; left: 25.926%; top: -7px; bottom: -3px; width: 0;
  border-left: 1.5px dotted var(--hu);
}
#stage-headsup .x-hu-bell {
  position: absolute; left: 25.926%; top: -33px;
  width: 26px; height: 26px; margin-left: -13px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--pro-glow); color: #fff;
  box-shadow: 0 4px 12px rgba(139, 108, 255, 0.42);
}
#stage-headsup .x-hu-bell svg { width: 15px; height: 15px; transform-origin: 50% 12%; }
#stage-headsup .x-hu-ring {
  position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid var(--hu); opacity: 0; pointer-events: none;
}
#stage-headsup .x-hu-zticks {
  position: relative; height: 26px; margin-top: 5px;
  font: 600 11px/1 var(--font-round); color: var(--ink-3); font-variant-numeric: tabular-nums;
}
#stage-headsup .x-hu-zticks > span:not(.x-hu-gap) { position: absolute; top: 2px; transform: translateX(-50%); }
#stage-headsup .x-hu-gap {
  position: absolute; top: 0; left: 25.926%; width: 11.111%;
  display: grid; justify-items: center; gap: 4px;
}
#stage-headsup .x-hu-gap i {
  display: block; width: 100%; height: 6px;
  border: 1.5px solid var(--hu); border-top: 0; border-radius: 0 0 3px 3px;
}
#stage-headsup .x-hu-gap em { font-style: normal; color: var(--ink-2); white-space: nowrap; }
#stage-headsup .x-hu-cap {
  display: flex; align-items: center; gap: 10px;
  margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--surface-line);
}
#stage-headsup .x-hu-capbell {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--hu) 18%, transparent); color: var(--hu);
}
#stage-headsup .x-hu-capbell svg { width: 16px; height: 16px; }
#stage-headsup .x-hu-cap > span:last-child { display: grid; gap: 1px; }
#stage-headsup .x-hu-cap b { font-size: 14.5px; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
#stage-headsup .x-hu-cap small { font-size: 13px; color: var(--ink-2); }

/* ---- The control: Pause while the loop plays, Replay once stopped -------- */
#stage-headsup .x-hu-ctl {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 14px; min-width: 44px; height: 44px; padding: 0 17px 0 13px;
  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;
  transition: transform 0.45s var(--spring-pop);
}
#stage-headsup .x-hu-ctl[hidden] { display: none; }
#stage-headsup .x-hu-ctl svg { width: 16px; height: 16px; flex: none; }
#stage-headsup .x-hu-ctl[data-state="playing"] .x-hu-ic-replay,
#stage-headsup .x-hu-ctl[data-state="stopped"] .x-hu-ic-pause { display: none; }
#stage-headsup .x-hu-ctl:hover { transform: scale(1.04); }
#stage-headsup .x-hu-ctl:active { transform: scale(0.96); transition-duration: 0.12s; }
@media (prefers-reduced-motion: reduce) { #stage-headsup .x-hu-ctl { transition: none; } }