/* 20:00 The daily check-in. A Lock Screen at 20:00 whose notification
   expands into its three answers (All normal, No poop today, Log now),
   Log now's check-in sheet inside the phone, and Bella's Home card row
   beside it with a 14-day strip of check-ins. The phone and the card follow
   the visitor's appearance like the app; everything outside them uses the
   page tokens (the sky is dusk here, the ink light). js/scenes/checkin.js
   drives it. Every real control reaches 44 px in its hit area at 390 px:
   isolated ones through a centred ::before that only grows what is short,
   side-by-side segments vertically only. */

#stage-checkin { --stage-h: 800px; }
@media (min-width: 960px) { #stage-checkin { --stage-h: 740px; } }

#stage-checkin .x-ci {
  position: relative;
  width: 100%; max-width: 640px;
  container: x-ci / inline-size;
  display: grid; justify-items: center; gap: 14px;
}

/* Composition: the phone, then the card tucked under its foot on narrow
   stages; side by side on wide ones. */
#stage-checkin .x-ci-comp {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
}
#stage-checkin .x-ci-phone { --phone-w: min(256px, 72cqw); z-index: 1; }
#stage-checkin .x-ci-side {
  position: relative; z-index: 2;
  width: min(320px, 92cqw);
  margin-top: -64px;
  display: grid; gap: 10px;
  transition: opacity 0.25s var(--ease-fade), transform var(--spring-enter-ms) var(--spring-enter), visibility 0s linear 0s;
}
@container x-ci (min-width: 580px) {
  #stage-checkin .x-ci-comp { flex-direction: row; align-items: flex-end; gap: 26px; }
  #stage-checkin .x-ci-phone { --phone-w: min(300px, 50cqw); }
  #stage-checkin .x-ci-side { width: min(292px, 46cqw); margin: 0 0 96px; }
  #stage-checkin .x-ci-days { padding: 12px 14px 11px; }
}
/* While the check-in sheet is up on a narrow stage the card would cover
   it: it steps aside and comes back with the answer. */
@container x-ci (max-width: 579px) {
  #stage-checkin .x-ci-side.is-away {
    opacity: 0; visibility: hidden; transform: translateY(14px) scale(0.98);
    transition: opacity 0.2s var(--ease-fade), transform 0.2s var(--ease-exit), visibility 0s linear 0.2s;
  }
}

/* ---- The Lock Screen ------------------------------------------------ */
#stage-checkin .x-ci-lock {
  z-index: 10; overflow: hidden;
  --wall: linear-gradient(180deg, #17104A 0%, #2D1B72 30%, #5E2F8E 55%, #A9478A 78%, #DE7A7A 100%);
}
#stage-checkin .x-ci-wall { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; }
#stage-checkin .x-ci-wall .moon { fill: #FFF4DC; filter: drop-shadow(0 0 7px rgba(255, 226, 180, 0.75)); }
#stage-checkin .x-ci-wall .h1 { fill: #3A1C66; opacity: 0.9; }
#stage-checkin .x-ci-wall .h2 { fill: #1B0F3E; }
#stage-checkin .x-ci-lock .lock-date,
#stage-checkin .x-ci-lock .lock-time { z-index: 1; }
#stage-checkin .x-ci-lock .lock-time { text-shadow: 0 calc(2 * var(--pt)) calc(20 * var(--pt)) rgba(30, 10, 70, 0.35); }

#stage-checkin .x-ci-qbtn {
  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(20, 10, 44, 0.34);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff;
}
#stage-checkin .x-ci-qbtn svg { width: calc(21 * var(--pt)); height: calc(21 * var(--pt)); }
#stage-checkin .x-ci-qbtn-l { left: calc(46 * var(--pt)); }
#stage-checkin .x-ci-qbtn-r { right: calc(46 * var(--pt)); }

/* Touch and hold: the Lock Screen blurs behind the expanded notification.
   The wallpaper, clock and buttons blur themselves (a plain filter, so it
   shows wherever backdrop-filter does not), and a dim layer settles on top. */
#stage-checkin .x-ci-wall,
#stage-checkin .x-ci-lock .lock-date,
#stage-checkin .x-ci-lock .lock-time,
#stage-checkin .x-ci-qbtn {
  transition: filter 0.32s var(--ease-fade), transform var(--spring-enter-ms) var(--spring-enter);
}
#stage-checkin .x-ci-lock.is-blur .x-ci-wall { filter: blur(calc(9 * var(--pt))); transform: scale(1.06); }
#stage-checkin .x-ci-lock.is-blur .lock-date,
#stage-checkin .x-ci-lock.is-blur .lock-time,
#stage-checkin .x-ci-lock.is-blur .x-ci-qbtn { filter: blur(calc(7 * var(--pt))); transform: scale(0.97); }
#stage-checkin .x-ci-blur {
  position: absolute; inset: 0; z-index: 5;
  margin: 0; padding: 0; border: 0;
  background: rgba(16, 8, 40, 0.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  cursor: default;
}

#stage-checkin .x-ci-group {
  position: absolute; z-index: 6;
  left: calc(10 * var(--pt)); right: calc(10 * var(--pt)); bottom: calc(118 * var(--pt));
  display: grid; gap: calc(8 * var(--pt));
}
#stage-checkin .x-ci-notif { position: relative; }
#stage-checkin .x-ci-notif .notif-head > span { min-width: 0; }
#stage-checkin .x-ci-hit {
  position: absolute; z-index: 2;
  top: min(0px, calc(50% - 22px)); bottom: min(0px, calc(50% - 22px)); left: 0; right: 0;
  margin: 0; padding: 0; border: 0; border-radius: inherit;
  background: transparent; color: transparent; font-size: 1px; overflow: hidden;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
#stage-checkin .x-ci-hit:focus-visible { outline-offset: 2px; border-radius: calc(24 * var(--pt)); }

/* The expanded notification's actions: iOS's list under the platter. */
#stage-checkin .x-ci-actions {
  display: grid;
  border-radius: calc(22 * var(--pt));
  overflow: hidden;
  background: rgba(246, 246, 250, 0.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8);
  box-shadow: 0 calc(6 * var(--pt)) calc(24 * var(--pt)) rgba(0, 0, 0, 0.16);
  transform-origin: 50% 0;
}
#stage-checkin .x-ci-actions button {
  display: flex; align-items: center;
  min-height: 44px;
  margin: 0; border: 0; border-top: 1px solid rgba(60, 60, 67, 0.16);
  padding: calc(13 * var(--pt)) calc(18 * var(--pt));
  background: transparent; color: #000; text-align: left;
  font: 400 calc(16.5 * var(--pt))/1.15 var(--font-body);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background 0.2s var(--ease-fade);
}
#stage-checkin .x-ci-actions button:first-child { border-top: 0; }
#stage-checkin .x-ci-actions button:hover,
#stage-checkin .x-ci-actions button.is-pressed { background: rgba(0, 0, 0, 0.08); }
#stage-checkin .x-ci-actions button:focus-visible { outline-offset: -3px; border-radius: calc(22 * var(--pt)); }

/* The answered notification: a capsule with a drawn check. */
#stage-checkin .x-ci-pill {
  justify-self: center;
  display: flex; align-items: center; gap: calc(8 * var(--pt));
  padding: calc(10 * var(--pt)) calc(18 * var(--pt)) calc(10 * var(--pt)) calc(11 * var(--pt));
  border-radius: var(--r-pill);
  background: rgba(246, 246, 250, 0.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8);
  box-shadow: 0 calc(6 * var(--pt)) calc(24 * var(--pt)) rgba(0, 0, 0, 0.16);
  color: #000; white-space: nowrap;
  font: 600 calc(16 * var(--pt))/1 var(--font-body);
}
#stage-checkin .x-ci-pill svg { width: calc(24 * var(--pt)); height: calc(24 * var(--pt)); flex: none; }
#stage-checkin .x-ci-pill .c { fill: #34C759; }
#stage-checkin .x-ci-pill .k { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }

@media (prefers-color-scheme: dark) {
  #stage-checkin .x-ci-actions, #stage-checkin .x-ci-pill { background: rgba(38, 36, 46, 0.8); }
  #stage-checkin .x-ci-pill { color: #fff; }
  #stage-checkin .x-ci-actions button { color: #fff; border-top-color: rgba(255, 255, 255, 0.12); }
  #stage-checkin .x-ci-actions button:hover,
  #stage-checkin .x-ci-actions button.is-pressed { background: rgba(255, 255, 255, 0.1); }
}

/* ---- The app under the Lock Screen ---------------------------------- */
#stage-checkin .x-ci-app { position: absolute; inset: 0; z-index: 1; }
#stage-checkin .x-ci-app .dogcard { gap: calc(10 * var(--pt)); }

/* Today's care on the Home card (TodayDosesBlock): Anna gave the 9:00
   insulin, the 21:00 dose is still to give. Passive here (the phone's app
   layer is a picture); #care lets the visitor give it. */
#stage-checkin .x-ci-care {
  display: grid; gap: calc(7 * var(--pt));
  padding: calc(10 * var(--pt)) calc(14 * var(--pt));
  border-radius: calc(16 * var(--pt));
  background: color-mix(in srgb, var(--scr-card) 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--scr-sep) 70%, transparent);
  font-size: calc(15 * var(--pt));
}
#stage-checkin .x-ci-care-h,
#stage-checkin .x-ci-care-sym { display: flex; align-items: center; gap: calc(8 * var(--pt)); font-weight: 600; }
#stage-checkin .x-ci-care-sym { color: var(--scr-tint); }
#stage-checkin .x-ci-care-h img,
#stage-checkin .x-ci-care-sym img { width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); object-fit: contain; }
#stage-checkin .x-ci-dose { display: flex; align-items: center; gap: calc(10 * var(--pt)); min-height: calc(26 * var(--pt)); }
#stage-checkin .x-ci-dose svg { width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); flex: none; overflow: visible; }
#stage-checkin .x-ci-dose .ring { fill: none; stroke: var(--scr-ink-2); stroke-width: 1.9; stroke-linecap: round; stroke-dasharray: 0 3.534; }
#stage-checkin .x-ci-dose .fill circle { fill: var(--scr-ok); }
#stage-checkin .x-ci-dose .fill path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#stage-checkin .x-ci-dose[data-status="upcoming"] .fill,
#stage-checkin .x-ci-dose[data-status="given"] .ring { display: none; }
#stage-checkin .x-ci-dose-l { flex: 1; min-width: 0; display: grid; gap: calc(1 * var(--pt)); white-space: nowrap; font-variant-numeric: tabular-nums; }
#stage-checkin .x-ci-dose-w { font-size: calc(12 * var(--pt)); color: var(--scr-ink-2); }
#stage-checkin .x-ci-dose-mark {
  flex: none;
  padding: calc(5 * var(--pt)) calc(11 * var(--pt));
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--scr-tint) 16%, transparent);
  color: var(--scr-tint);
  font-size: calc(14 * var(--pt)); font-weight: 600;
}
#stage-checkin .x-ci-care-sep { height: 1px; background: var(--scr-sep); }
#stage-checkin .x-ci-scrim {
  position: absolute; inset: 0; z-index: 25;
  background: rgba(0, 0, 0, 0.26);
}
/* A partial-height sheet: iOS 26's inset glass, sized to the questions. */
#stage-checkin .x-ci-sheet {
  top: auto; left: calc(8 * var(--pt)); right: calc(8 * var(--pt)); bottom: calc(8 * var(--pt));
  overflow: hidden;
  padding: calc(9 * var(--pt)) calc(14 * var(--pt)) calc(24 * var(--pt));
  border-radius: calc(44 * var(--pt));
  background: var(--scr-bg);
  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid var(--scr-glass-line);
  box-shadow: 0 calc(10 * var(--pt)) calc(44 * var(--pt)) rgba(0, 0, 0, 0.26);
}
#stage-checkin .x-ci-ind { z-index: 32; }
#stage-checkin .x-ci-sheet .sheet-bar { margin-bottom: calc(14 * var(--pt)); }
#stage-checkin .x-ci-sheet .sheet-bar .gbtn { position: relative; cursor: pointer; font-family: var(--font-body); }
#stage-checkin .x-ci-sheet .sheet-bar .gbtn::before,
#stage-checkin .x-ci-normal::before,
#stage-checkin button.x-ci-row::before,
#stage-checkin .x-ci-seg button::before {
  content: ""; position: absolute;
  top: min(0px, calc(50% - 22px)); bottom: min(0px, calc(50% - 22px));
  left: min(0px, calc(50% - 22px)); right: min(0px, calc(50% - 22px));
}
#stage-checkin .x-ci-seg button::before { left: 0; right: 0; }
#stage-checkin .x-ci-sheet .sheet-bar .gbtn.primary { background: #5856D6; }
#stage-checkin .x-ci-sheet .sheet-bar > span { font-weight: 600; }
#stage-checkin .x-ci-q {
  padding: calc(14 * var(--pt)) calc(16 * var(--pt));
  border-radius: calc(22 * var(--pt));
  background: var(--scr-card);
  font: 600 calc(20 * var(--pt))/1.2 var(--font-body);
  letter-spacing: -0.015em;
}
#stage-checkin .x-ci-normal {
  position: relative;
  display: block; width: 100%;
  margin: calc(14 * var(--pt)) 0 0; padding: 0;
  height: calc(48 * var(--pt));
  border: 0; border-radius: calc(22 * var(--pt));
  background: linear-gradient(180deg, #6D6BE2, #5856D6);
  color: #fff; font: 600 calc(17 * var(--pt))/1 var(--font-body);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: filter 0.2s var(--ease-fade), transform 0.3s var(--spring-pop);
}
#stage-checkin .x-ci-normal:hover { filter: brightness(1.08); }
#stage-checkin .x-ci-normal:active { transform: scale(0.98); }
#stage-checkin .x-ci-k {
  margin: calc(18 * var(--pt)) calc(16 * var(--pt)) calc(7 * var(--pt));
  font-size: calc(13.5 * var(--pt)); font-weight: 600; color: var(--scr-ink-2);
}
#stage-checkin .x-ci-qs {
  padding: calc(2 * var(--pt)) calc(14 * var(--pt));
  border-radius: calc(22 * var(--pt));
  background: var(--scr-card);
}
#stage-checkin .x-ci-qrow { padding: calc(10 * var(--pt)) 0 calc(12 * var(--pt)); border-bottom: 1px solid var(--scr-sep); }
#stage-checkin .x-ci-qrow:last-child { border-bottom: 0; }
#stage-checkin .x-ci-ql { display: block; margin-bottom: calc(7 * var(--pt)); font-weight: 600; font-size: calc(15 * var(--pt)); }

/* iOS 26's capsule segmented control: a thumb glides under the labels. */
#stage-checkin .x-ci-seg {
  --n: 3; --i: 1;
  position: relative;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: calc(2 * var(--pt));
  border-radius: var(--r-pill);
  background: var(--scr-fill);
}
#stage-checkin .x-ci-seg button {
  position: relative; z-index: 1;
  margin: 0; border: 0; background: none;
  padding: calc(7 * var(--pt)) 0;
  border-radius: var(--r-pill);
  font: 500 calc(13.5 * var(--pt))/1.1 var(--font-body); color: var(--scr-ink);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
#stage-checkin .x-ci-seg button[aria-checked="true"] { font-weight: 600; }
#stage-checkin .x-ci-seg button:focus-visible { outline-offset: 0; border-radius: var(--r-pill); }
#stage-checkin .x-ci-thumb {
  position: absolute; z-index: 0;
  top: calc(2 * var(--pt)); bottom: calc(2 * var(--pt));
  left: calc(2 * var(--pt) + (100% - 4 * var(--pt)) * var(--i) / var(--n));
  width: calc((100% - 4 * var(--pt)) / var(--n));
  border-radius: var(--r-pill);
  background: #fff;
  box-shadow: 0 calc(1 * var(--pt)) calc(4 * var(--pt)) rgba(0, 0, 0, 0.14), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  transition: left 0.5s var(--spring-land);
}
@media (prefers-color-scheme: dark) {
  #stage-checkin .x-ci-thumb { background: #5B5965; box-shadow: none; }
}

/* ---- The Home check-in row (DogCheckInRow), in the phone and the card -- */
#stage-checkin .x-ci-row {
  position: relative;
  display: flex; align-items: center; gap: calc(10 * var(--pt));
  width: 100%; margin: 0;
  padding: calc(10 * var(--pt)) calc(12 * var(--pt));
  border: 0; border-radius: calc(16 * var(--pt));
  background: color-mix(in srgb, var(--scr-tint) 13%, transparent);
  color: var(--scr-ink); text-align: left;
  font: 400 calc(15 * var(--pt))/1.2 var(--font-body);
  letter-spacing: -0.01em;
}
#stage-checkin button.x-ci-row { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.35s var(--spring-pop), background 0.2s var(--ease-fade); }
#stage-checkin button.x-ci-row:hover { background: color-mix(in srgb, var(--scr-tint) 18%, transparent); }
#stage-checkin button.x-ci-row:active { transform: scale(0.98); }
#stage-checkin button.x-ci-row:focus-visible { outline-offset: 3px; border-radius: calc(16 * var(--pt)); }
#stage-checkin .x-ci-glyph { width: calc(17 * var(--pt)); height: calc(17 * var(--pt)); flex: none; color: var(--scr-tint); overflow: visible; }
#stage-checkin .x-ci-glyph .ln path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
#stage-checkin .x-ci-glyph .bul circle { fill: currentColor; transform-box: fill-box; transform-origin: center; }
#stage-checkin .x-ci-glyph .tk path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
#stage-checkin .x-ci-row[data-state="done"] .bul circle { opacity: 0; }
#stage-checkin .x-ci-row[data-state="done"] .tk path { stroke-dashoffset: 0; }
#stage-checkin .x-ci-row-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#stage-checkin .x-ci-row[data-state="done"] .x-ci-row-t { color: var(--scr-ink-2); }
#stage-checkin .x-ci-row-a { flex: none; font-weight: 600; color: var(--scr-tint); }

/* The card: a piece of Bella's Home card, drawn a little larger
   (340 pt wide) than in the phone. */
#stage-checkin .x-ci-card .screen { --pt: calc(100cqw / 340); }
#stage-checkin .x-ci-cardin {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(12 * var(--pt));
  padding: calc(14 * var(--pt));
  border-radius: calc(30 * var(--pt));
  background: color-mix(in srgb, var(--scr-card-2) 64%, var(--scr-bg));
  border: 1px solid var(--scr-glass-line);
  box-shadow: 0 2px 6px rgba(20, 8, 60, 0.12), 0 26px 60px rgba(20, 8, 60, 0.34);
}

/* ---- Check-ins, last 14 days (page level) --------------------------- */
#stage-checkin .x-ci-days {
  padding: 10px 13px 9px;
  border-radius: var(--r-card);
  background: var(--glass);
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: var(--shadow-1);
  color: var(--ink);
}
#stage-checkin .x-ci-days-h {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  margin-bottom: 9px;
  font-size: 12.5px; font-weight: 650; color: var(--ink-2);
}
#stage-checkin .x-ci-dots {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 3px;
  justify-items: center;
}
#stage-checkin .x-ci-dots li {
  position: relative;
  width: 100%; max-width: 18px; aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid transparent;
}
#stage-checkin .x-ci-dots li[data-k="ok"] { background: var(--ok) url('/img/ui/check.svg') center / 100% no-repeat; }
#stage-checkin .x-ci-dots li[data-k="off"] { background: var(--amber); }
#stage-checkin .x-ci-dots li[data-k="zero"] { border-color: var(--ink-2); }
#stage-checkin .x-ci-dots li[data-k="zero"]::after {
  content: "0"; position: absolute; inset: 0;
  display: grid; place-items: center;
  font: 750 10px/1 var(--font-round); color: var(--ink);
}
#stage-checkin .x-ci-dots li[data-k="none"] { border: 1.5px dashed var(--ink-3); }
#stage-checkin .x-ci-dots li[data-k="todo"] { border: 1.5px dashed var(--ink-2); }
#stage-checkin .x-ci-ring {
  position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid var(--ok);
  opacity: 0; pointer-events: none;
}
#stage-checkin .x-ci-cap {
  margin-top: 9px; min-height: 1.4em;
  font-size: 13.5px; font-weight: 600; color: var(--ink-2);
}
#stage-checkin .x-ci-cap span { display: inline-block; }

/* ---- Hint, Replay, the touch ---------------------------------------- */
#stage-checkin .x-ci-foot {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 44px; text-align: center;
}
#stage-checkin .x-ci-hint { font-size: 14px; color: var(--ink-2); }
#stage-checkin .x-ci-replay {
  display: inline-flex; align-items: center; gap: 7px;
  height: 44px; padding: 0 18px 0 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-line);
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: var(--shadow-1);
  color: var(--ink); font: 650 14.5px/1 var(--font-body);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 0.4s var(--spring-pop);
}
#stage-checkin .x-ci-replay:hover { transform: scale(1.04); }
#stage-checkin .x-ci-replay:active { transform: scale(0.96); }
#stage-checkin .x-ci-replay svg { width: 16px; height: 16px; }

#stage-checkin .x-ci-touch {
  position: absolute; z-index: 40; left: 50%; top: 50%;
  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(170, 170, 182, 0.42);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.75), 0 2px 12px rgba(0, 0, 0, 0.18);
  opacity: 0; pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  #stage-checkin .x-ci-wall,
  #stage-checkin .x-ci-lock .lock-date,
  #stage-checkin .x-ci-lock .lock-time,
  #stage-checkin .x-ci-qbtn,
  #stage-checkin .x-ci-thumb,
  #stage-checkin .x-ci-side,
  #stage-checkin .x-ci-side.is-away,
  #stage-checkin button.x-ci-row,
  #stage-checkin .x-ci-normal,
  #stage-checkin .x-ci-replay { transition: none; }
}