/* 3:00 Alarms (Pro): a house-training alarm rings through silent mode.
   The phone sits in a dark room; Bella's house-training card beside it
   (below it when the stage is narrow) is what the alarm is for: the app's
   own HouseTrainingCard (weekly accident bars, the dry streak, the last
   accident). js/scenes/alarms.js drives the states on .x-alarms[data-state]:
   lock (2:59), ring, snoozed, done. Sizes inside the phone and the card are
   iOS points (var(--pt)). */

/* Stacked below a 548 px stage, side by side above it. The stage is a
   single column below 960 px and the right-hand column above it, so the
   side-by-side heights apply to 600-959 px and from 1150 px. */
#stage-alarms { --stage-h: 790px; }
@media (min-width: 600px) and (max-width: 959.98px), (min-width: 1150px) {
  #stage-alarms { --stage-h: 690px; }
}

#stage-alarms .x-alarms {
  position: relative;
  width: 100%;
  container: xalarms / inline-size;
  display: grid; justify-items: center; gap: 22px;
}
#stage-alarms .x-alarms:focus { outline: none; }

/* ---- Layout -----------------------------------------------------------
   --xa-lp is the phone's left offset inside the stage; the Silent pill
   uses it to stay inside the stage at any width. */
#stage-alarms .x-alarms-row {
  --xa-pad: 0px; --xa-gap: 0px; --xa-side: 0px;
  display: flex; flex-direction: column; align-items: center; gap: 26px;
  width: 100%;
}
#stage-alarms .x-alarms-row { --phone-w: 208px; }
#stage-alarms .x-alarms-dev { --xa-lp: calc((100cqw - var(--phone-w)) / 2); }
#stage-alarms .x-alarms-side { width: min(300px, 100%); }
#stage-alarms .x-alarms-card { width: 100%; }
@container xalarms (min-width: 548px) {
  #stage-alarms .x-alarms-row {
    --xa-pad: 12px; --xa-gap: 20px; --xa-side: 256px;
    --phone-w: 232px;
    flex-direction: row; justify-content: center; align-items: center;
    gap: var(--xa-gap); padding-left: var(--xa-pad);
  }
  #stage-alarms .x-alarms-dev {
    --xa-lp: calc(var(--xa-pad) + (100cqw - var(--xa-pad) - var(--phone-w) - var(--xa-gap) - var(--xa-side)) / 2);
  }
  #stage-alarms .x-alarms-side { width: var(--xa-side); margin-top: calc(var(--phone-w) * 0.12); }
}
@container xalarms (min-width: 600px) {
  #stage-alarms .x-alarms-row { --xa-pad: 26px; --xa-gap: 24px; --xa-side: 272px; --phone-w: 256px; }
}
@container xalarms (min-width: 660px) {
  #stage-alarms .x-alarms-row { --xa-pad: 40px; --xa-gap: 30px; --xa-side: 290px; --phone-w: 268px; }
}

/* ---- The device, its glow and the sound rings ---------------------- */
#stage-alarms .x-alarms-dev { position: relative; isolation: isolate; flex: none; }
#stage-alarms .x-alarms-glow,
#stage-alarms .x-alarms-halo {
  position: absolute; z-index: -2; left: 50%; top: 50%;
  width: 190%; height: 120%;
  translate: -50% -50%;
  border-radius: 50%;
  pointer-events: none;
}
#stage-alarms .x-alarms-glow {     /* the screen lighting the dark room */
  background: radial-gradient(closest-side, rgba(139, 108, 255, 0.42), rgba(139, 108, 255, 0.12) 55%, transparent);
  opacity: 0.4;
  transition: opacity 0.9s var(--ease-fade);
}
#stage-alarms .x-alarms[data-state="ring"] .x-alarms-glow { opacity: 1; }
#stage-alarms .x-alarms-halo {     /* one breath per ring */
  background: radial-gradient(closest-side, rgba(170, 150, 255, 0.4), transparent 70%);
  opacity: 0;
}
/* The sound rings leave the phone's edge. The layer is larger than the
   phone (by --xa-rx, which js/scenes/alarms.js mirrors) and fades out
   above and below, so the waves read at the sides, like the brand's
   ringing clock, and never cross the caption under the phone. */
#stage-alarms .x-alarms-rings {
  --xa-rx: 96px;
  position: absolute; inset: calc(-1 * var(--xa-rx)); z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 3%, #000 21%, #000 58%, transparent 84%);
  mask-image: linear-gradient(180deg, transparent 3%, #000 21%, #000 58%, transparent 84%);
}
#stage-alarms .x-alarms-rings i {
  position: absolute; inset: var(--xa-rx);
  border-radius: calc(var(--phone-w) * 0.165);
  border: 2.5px solid #B4A4FF;
  box-shadow: 0 0 14px rgba(150, 128, 255, 0.55), inset 0 0 10px rgba(150, 128, 255, 0.3);
  opacity: 0;
}
/* Reduced motion: the rings stand still around the ringing phone. */
#stage-alarms .is-still[data-state="ring"] .x-alarms-rings i:nth-child(1) { inset: calc(var(--xa-rx) - 14px); border-radius: calc(var(--phone-w) * 0.165 + 14px); opacity: 0.6; }
#stage-alarms .is-still[data-state="ring"] .x-alarms-rings i:nth-child(2) { inset: calc(var(--xa-rx) - 32px); border-radius: calc(var(--phone-w) * 0.165 + 32px); opacity: 0.34; }
#stage-alarms .is-still[data-state="ring"] .x-alarms-rings i:nth-child(3) { inset: calc(var(--xa-rx) - 50px); border-radius: calc(var(--phone-w) * 0.165 + 50px); opacity: 0.16; }
#stage-alarms .is-still .x-alarms-glow,
#stage-alarms .is-still .x-alarms-lb { transition: none; }

#stage-alarms .x-alarms-shake { position: relative; z-index: 1; }
#stage-alarms .x-alarms-phone { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.14), inset 0 0 0 calc(var(--w) * 0.012) #0A0A0C, 0 2px 6px rgba(0, 0, 0, 0.2), 0 40px 90px rgba(8, 4, 30, 0.45); }

/* The Silent pill, on the phone's switch side. It never leaves: the
   alarm rings with it on. It overlaps the phone by 26 px, and by more
   (up to 64 px, still clear of the clock) when the stage leaves less
   room beside the phone, so it never reaches past the stage's edge. */
#stage-alarms .x-alarms-silent {
  --xa-pill-w: 96px;
  position: absolute; z-index: 3;
  right: calc(100% - clamp(26px, calc(var(--xa-pill-w) + 4px - var(--xa-lp)), 64px));
  top: 19%;
  translate: 0 -50%;
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 14px 0 5px;
  border-radius: var(--r-pill);
  background: #FF3B30; color: #fff;
  font: 700 15px/1 var(--font-body); letter-spacing: -0.01em;
  box-shadow: 0 10px 26px rgba(255, 59, 48, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  white-space: nowrap;
  transition: opacity 0.25s var(--ease-fade);
}
#stage-alarms .x-alarms-silent-ic {
  display: grid; place-items: center;
  width: 25px; height: 25px; border-radius: 50%;
  background: #D92C22;
}
#stage-alarms .x-alarms-silent-ic svg { width: 15px; height: 15px; }
#stage-alarms .x-alarms:not(.is-silent) .x-alarms-silent { opacity: 0; }
/* The narrowest stages (320 px phones): a smaller phone and a compact
   pill, so the pill stays clear of the clock as well as of the edge. */
@container xalarms (max-width: 340px) {
  #stage-alarms .x-alarms-row { --phone-w: 200px; }
  #stage-alarms .x-alarms-silent { --xa-pill-w: 82px; height: 30px; gap: 5px; padding: 0 11px 0 4px; font-size: 13.5px; }
  #stage-alarms .x-alarms-silent-ic { width: 22px; height: 22px; }
  #stage-alarms .x-alarms-silent-ic svg { width: 13px; height: 13px; }
}

/* ---- Inside the phone ---------------------------------------------- */
#stage-alarms .x-alarms-lock {
  --wall:
    radial-gradient(90% 46% at 78% 6%, rgba(150, 130, 255, 0.30), transparent 62%),
    radial-gradient(120% 60% at 10% 100%, rgba(90, 50, 170, 0.35), transparent 60%),
    linear-gradient(172deg, #1C1745 0%, #130F31 52%, #0A0919 100%);
  background:
    radial-gradient(circle at 18% 31%, rgba(255, 255, 255, 0.55) 0 0.12%, transparent 0.3%),
    radial-gradient(circle at 83% 27%, rgba(255, 255, 255, 0.45) 0 0.1%, transparent 0.26%),
    radial-gradient(circle at 71% 41%, rgba(255, 255, 255, 0.35) 0 0.08%, transparent 0.22%),
    radial-gradient(circle at 28% 47%, rgba(255, 255, 255, 0.3) 0 0.08%, transparent 0.22%),
    radial-gradient(circle at 88% 52%, rgba(255, 255, 255, 0.4) 0 0.1%, transparent 0.24%),
    var(--wall);
}
#stage-alarms .x-alarms-lock .lock-date { color: rgba(235, 230, 255, 0.86); }
#stage-alarms .x-alarms-time { color: rgba(240, 236, 255, 0.95); }
#stage-alarms .x-alarms-d,
#stage-alarms .x-alarms-colon { display: inline-block; }
#stage-alarms .x-alarms-colon { padding: 0 0.02em; translate: 0 -0.04em; }

#stage-alarms .x-alarms-lb {
  position: absolute; bottom: calc(46 * var(--pt));
  width: calc(50 * var(--pt)); height: calc(50 * var(--pt));
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  transition: opacity 0.35s var(--ease-fade);
}
#stage-alarms .x-alarms-lb svg { width: calc(22 * var(--pt)); height: calc(22 * var(--pt)); }
#stage-alarms .x-alarms-torch { left: calc(46 * var(--pt)); }
#stage-alarms .x-alarms-cam { right: calc(46 * var(--pt)); }
#stage-alarms .x-alarms[data-state="ring"] .x-alarms-lb { opacity: 0; }


/* The status bar: silent mode's bell beside the signal. */
#stage-alarms .x-alarms-sb { display: inline-flex; align-items: center; gap: calc(6 * var(--pt)); transition: opacity 0.2s var(--ease-fade); }
#stage-alarms .is-isl .x-alarms-sb { opacity: 0; }     /* the expanded Island takes the bar */
#stage-alarms .x-alarms-sb svg.x-alarms-bs { width: calc(15 * var(--pt)); height: calc(15 * var(--pt)); transition: opacity 0.25s var(--ease-fade); }
#stage-alarms .x-alarms:not(.is-silent) .x-alarms-bs { opacity: 0; }

/* The Dynamic Island's Silent moment. */
#stage-alarms .x-alarms-isl { overflow: hidden; }
#stage-alarms .is-isl .x-alarms-isl { width: calc(200 * var(--pt)); }
#stage-alarms .x-alarms-isl-in {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 calc(15 * var(--pt)) 0 calc(13 * var(--pt));
  color: #FF453A;
  font: 600 calc(15 * var(--pt))/1 var(--font-body);
  opacity: 0;
}
#stage-alarms .x-alarms-isl-in svg { width: calc(19 * var(--pt)); height: calc(19 * var(--pt)); }
#stage-alarms .is-isl .x-alarms-isl-in { opacity: 1; }

#stage-alarms .x-alarms-screen { cursor: pointer; }
#stage-alarms .x-alarms[data-state="ring"] .x-alarms-screen { cursor: default; }

/* The screen asleep (between loops). */
#stage-alarms .x-alarms-sleep {
  position: absolute; inset: 0; z-index: 40;
  background: #000; opacity: 0; pointer-events: none;
}
#stage-alarms .is-asleep .x-alarms-sleep { opacity: 1; }

/* The alarm (AlarmKit's full-screen alert over the Lock Screen clock). */
#stage-alarms .x-alarms-alarm {
  position: absolute; inset: 0; z-index: 10;
  opacity: 0; pointer-events: none;
}
#stage-alarms .x-alarms[data-state="ring"] .x-alarms-alarm { opacity: 1; pointer-events: auto; }
#stage-alarms .x-alarms-alarm::before {    /* the indigo wash of a ringing alarm */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 52% at 50% 104%, rgba(94, 92, 230, 0.62), transparent 70%),
    linear-gradient(180deg, rgba(40, 30, 120, 0) 30%, rgba(40, 30, 120, 0.3) 100%);
}
#stage-alarms .x-alarms-bloom {
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(90% 46% at 50% 100%, rgba(140, 130, 255, 0.55), transparent 72%);
  opacity: 0;
}
#stage-alarms .x-alarms-app {
  position: absolute; left: 0; right: 0; top: calc(222 * var(--pt));
  display: flex; align-items: center; justify-content: center; gap: calc(7 * var(--pt));
  font: 600 calc(15 * var(--pt))/1 var(--font-body);
  color: rgba(235, 232, 255, 0.72);
}
#stage-alarms .x-alarms-app img { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); border-radius: calc(5 * var(--pt)); }
#stage-alarms .x-alarms-title {
  position: absolute; left: calc(30 * var(--pt)); right: calc(30 * var(--pt)); top: calc(254 * var(--pt));
  text-align: center;
  font: 600 calc(25 * var(--pt))/1.22 var(--font-body);
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}
#stage-alarms .x-alarms-snooze,
#stage-alarms .x-alarms-done {
  position: absolute;
  border: 0; border-radius: var(--r-pill);
  color: #fff; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: scale 0.3s var(--spring-pop), background-color 0.2s;
}
#stage-alarms .x-alarms-snooze {
  left: 50%; bottom: calc(180 * var(--pt));
  width: calc(196 * var(--pt)); height: calc(58 * var(--pt));
  margin-left: calc(-98 * var(--pt));
  background: #5856D6;
  font: 600 calc(21 * var(--pt))/1 var(--font-body);
  box-shadow: 0 calc(6 * var(--pt)) calc(20 * var(--pt)) rgba(60, 50, 200, 0.45);
}
#stage-alarms .x-alarms-snooze:hover { background: #6563E2; }
#stage-alarms .x-alarms-done {
  left: calc(24 * var(--pt)); right: calc(24 * var(--pt)); bottom: calc(72 * var(--pt));
  height: calc(84 * var(--pt));
  background: rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  font: 600 calc(27 * var(--pt))/1 var(--font-body);
}
#stage-alarms .x-alarms-done:hover { background: rgba(255, 255, 255, 0.27); }
#stage-alarms .x-alarms-snooze:active,
#stage-alarms .x-alarms-done:active { scale: 0.95; transition-duration: 0.1s; }
#stage-alarms .x-alarms-snooze:focus-visible,
#stage-alarms .x-alarms-done:focus-visible { outline: 3px solid #C9B8FF; outline-offset: 3px; border-radius: var(--r-pill); }
/* Hit areas of at least 44 px however small the phone is drawn: Snooze
   grows up and down (its gap to Done keeps them apart), Done only as far
   as it needs. */
#stage-alarms .x-alarms-snooze::before,
#stage-alarms .x-alarms-done::before { content: ""; position: absolute; }
#stage-alarms .x-alarms-snooze::before {
  inset: min(0px, calc((58 * var(--pt) - 46px) / 2)) min(0px, calc((196 * var(--pt) - 46px) / 2));
}
#stage-alarms .x-alarms-done::before {
  inset: min(0px, calc((84 * var(--pt) - 46px) / 2)) 0;
}

/* The demo's finger. */
#stage-alarms .x-alarms-touch {
  position: absolute; left: 50%; bottom: calc(185 * var(--pt));
  width: calc(48 * var(--pt)); height: calc(48 * var(--pt));
  margin-left: calc(-24 * var(--pt));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.32);
  box-shadow: 0 0 0 calc(2 * var(--pt)) rgba(255, 255, 255, 0.6), 0 calc(4 * var(--pt)) calc(16 * var(--pt)) rgba(0, 0, 0, 0.3);
  opacity: 0; pointer-events: none;
}
#stage-alarms .x-alarms-touch.on-done { bottom: calc(90 * var(--pt)); }

/* ---- The house-training card (HouseTrainingCard.swift) -------------
   Authored 300 pt wide: header glyph + "House-training · since %@",
   eight weekly columns (count over an indigo bar, a green tick for a
   week without accidents, the current week at full strength), "This
   week", then the streak and the last accident. */
#stage-alarms .x-alarms-side { position: relative; flex: none; display: grid; justify-items: center; }
#stage-alarms .x-alarms-card { position: relative; z-index: 2; }
#stage-alarms .x-alarms-card > .screen {
  --pt: calc(100cqw / 300);
  --xa-indigo: #5856D6;
  display: grid; gap: calc(14 * var(--pt));
  padding: calc(16 * var(--pt));
  border-radius: calc(16 * var(--pt));
  background: var(--scr-card);
  border: 1px solid var(--scr-glass-line);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18), 0 30px 70px rgba(8, 4, 30, 0.42);
}
@media (prefers-color-scheme: dark) {
  #stage-alarms .x-alarms-card > .screen { --xa-indigo: #5E5CE6; }
}
#stage-alarms .x-alarms-ch {
  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;
}
#stage-alarms .x-alarms-hg { flex: none; width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); color: var(--xa-indigo); }

#stage-alarms .x-alarms-weeks { display: grid; justify-items: end; gap: calc(6 * var(--pt)); }
#stage-alarms .x-alarms-cols {
  width: 100%;
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: calc(8 * var(--pt));
  align-items: end;
}
#stage-alarms .x-alarms-col { position: relative; display: grid; justify-items: center; gap: calc(4 * var(--pt)); }
#stage-alarms .x-alarms-col b {
  font: 400 calc(11 * var(--pt))/1.1 var(--font-body); font-variant-numeric: tabular-nums;
  color: var(--scr-ink-2);
}
#stage-alarms .x-alarms-col > i:not(.x-alarms-burst) {
  display: block; width: 100%;
  height: max(calc(6 * var(--pt)), calc(48 * var(--pt) * var(--f, 0)));
  border-radius: calc(4 * var(--pt));
  background: color-mix(in srgb, var(--xa-indigo) 35%, transparent);
}
#stage-alarms .x-alarms-col.is-zero > i:not(.x-alarms-burst) {
  height: calc(3 * var(--pt)); border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--scr-ok) 50%, transparent);
}
#stage-alarms .x-alarms-col.is-now b { font-weight: 700; color: var(--scr-ink); }
#stage-alarms .x-alarms-col.is-now > i:not(.x-alarms-burst) { background: var(--xa-indigo); }
#stage-alarms .x-alarms-col.is-now.is-zero > i:not(.x-alarms-burst) { background: var(--scr-ok); }
#stage-alarms .x-alarms-tw { font-size: calc(11 * var(--pt)); line-height: 1.1; color: var(--scr-ink-2); }

/* The pee that lands on this week, and the ring it leaves. */
#stage-alarms .x-alarms-burst {
  position: absolute; left: 50%; bottom: calc(-12 * var(--pt));
  width: calc(26 * var(--pt)); height: calc(26 * var(--pt)); margin-left: calc(-13 * var(--pt));
  border-radius: 50%; border: calc(2 * var(--pt)) solid var(--scr-ok);
  opacity: 0; pointer-events: none;
}
#stage-alarms .x-alarms-drop {
  position: absolute; left: 50%; bottom: calc(2 * var(--pt));
  width: calc(28 * var(--pt)); height: calc(28 * var(--pt)); margin-left: calc(-14 * var(--pt));
  object-fit: contain; opacity: 0; pointer-events: none;
  filter: drop-shadow(0 calc(4 * var(--pt)) calc(6 * var(--pt)) rgba(0, 0, 0, 0.18));
}

#stage-alarms .x-alarms-cf { display: flex; align-items: baseline; justify-content: space-between; gap: calc(8 * var(--pt)); }
#stage-alarms .x-alarms-dry {
  display: inline-flex; align-items: center; gap: calc(6 * var(--pt)); align-self: center;
  font: 700 calc(15 * var(--pt))/1.2 var(--font-body); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#stage-alarms .x-alarms-dry svg { width: calc(17 * var(--pt)); height: calc(17 * var(--pt)); color: var(--scr-ok); flex: none; }
#stage-alarms .x-alarms-dry span { display: inline-block; }
#stage-alarms .x-alarms-last {
  font-size: calc(12 * var(--pt)); line-height: 1.2; color: var(--scr-ink-2);
  text-align: right; white-space: nowrap;
}

/* ---- The narration chip (page UI, above the card) ----------------------
   One chip, three lines: the snooze, the walk-out, the logged pee. */
#stage-alarms .x-alarms-toast {
  position: absolute; z-index: 4; left: 50%; bottom: calc(100% + 14px);
  translate: -50% 0;
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 18px 0 8px;
  border-radius: var(--r-pill);
  background: var(--glass-strong); border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-1);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  color: var(--ink); font: 650 15px/1 var(--font-body);
  width: max-content; max-width: calc(100cqw - 8px); white-space: nowrap; pointer-events: none;
  opacity: 0;
}
#stage-alarms .x-alarms-ti { position: relative; flex: none; display: grid; width: 34px; height: 34px; }
#stage-alarms .x-alarms-ti > * { grid-area: 1 / 1; width: 34px; height: 34px; object-fit: contain; display: none; }
#stage-alarms .x-alarms-ti-zzz { padding: 6px; color: var(--pro-ink); }
#stage-alarms [data-toast="snooze"] .x-alarms-ti-zzz,
#stage-alarms [data-toast="walk"] .x-alarms-ti-walk,
#stage-alarms [data-toast="pee"] .x-alarms-ti-pee { display: block; }
#stage-alarms .is-toast .x-alarms-toast { opacity: 1; }
@container xalarms (max-width: 547.98px) {
  /* Stacked: the chip floats over the phone's quiet lower half. */
  #stage-alarms .x-alarms-toast { bottom: calc(100% + 120px); }
}

/* ---- Foot: the honest caption and Ring again ------------------------
   The chip's row is always reserved, so nothing moves when it appears.
   During autoplay it is invisible but still reachable by keyboard: it
   shows itself on focus. While the alarm rings, Snooze and Done are the
   controls and the chip steps aside. */
#stage-alarms .x-alarms-foot { display: grid; justify-items: center; gap: 10px; padding: 0 4px; }
#stage-alarms .x-alarms-note { font-size: 14px; line-height: 1.5; color: var(--ink-2); text-align: center; text-wrap: balance; }
#stage-alarms .x-alarms-note .pro { margin-right: 7px; }
#stage-alarms .x-alarms-again {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 15px 0 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-line);
  background: var(--glass-strong); color: var(--ink);
  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;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s var(--ease-fade), transform 0.45s var(--spring-pop);
}
#stage-alarms .x-alarms-again::before { content: ""; position: absolute; inset: -5px -4px; }   /* a 46 px hit area */
#stage-alarms .x-alarms-again:focus-visible,
#stage-alarms .is-taken:not([data-state="ring"]) .x-alarms-again { opacity: 1; pointer-events: auto; }
#stage-alarms .x-alarms[data-state="ring"] .x-alarms-again { visibility: hidden; transition: none; }
#stage-alarms .x-alarms-again:focus-visible { outline: 3px solid #8B6CFF; outline-offset: 3px; border-radius: var(--r-pill); }
#stage-alarms .x-alarms-again:hover { transform: scale(1.04); }
#stage-alarms .x-alarms-again:active { transform: scale(0.96); transition-duration: 0.1s; }
#stage-alarms .x-alarms-again svg { width: 16px; height: 16px; color: var(--pro-ink); }