:root {
  --wb-nudge-ms: 3600;
  --wb-nudge-t: 1.2s;
  --wb-nudge-n: 3;
  --wb-nudge-pad: 6px;
  --wb-nudge-ring: 3px;
  --wb-nudge-c: var(--accent);
  --wb-nudge-halo: color-mix(in srgb, var(--accent) 30%, transparent);
  --wb-nudge-z: 29;
  --wb-next-bg: var(--accent-soft);
  --wb-next-ink: var(--accent-ink);
  --cel-calm-glow: color-mix(in srgb, var(--info) 24%, transparent);
  --cel-calm-stop: 70%;
  --g-how-nudge: 2px;
  --wb-nudge-scale: 1.12;
  --wb-nudge-fade: 0.7;
}

.welcome-back .list {
  width: 100%;
  text-align: start;
}

.welcome-back .wb-asleep,
.welcome-back .wb-gentle {
  flex-wrap: wrap;
}

.welcome-back .wb-asleep .grow,
.welcome-back .wb-gentle .grow {
  flex: 1 1 var(--row-text-min);
}

.welcome-back .wb-mail {
  color: var(--ink);
  text-align: start;
}

.wb-earned {
  color: var(--ink-soft);
  font-size: var(--fs-xs);
  font-weight: var(--fw-b);
}

.wb-next {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  width: 100%;
  margin: 0;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-m);
  background: var(--wb-next-bg);
  color: var(--wb-next-ink);
  text-align: start;
  font-weight: var(--fw-b);
}

.wb-next .i {
  flex: none;
  margin-top: var(--sp-1);
}

.wb-nudge {
  position: fixed;
  left: calc(var(--nudge-x) - var(--wb-nudge-pad));
  top: calc(var(--nudge-y) - var(--wb-nudge-pad));
  width: calc(var(--nudge-w) + var(--wb-nudge-pad) * 2);
  height: calc(var(--nudge-h) + var(--wb-nudge-pad) * 2);
  z-index: var(--wb-nudge-z);
  border-radius: var(--r-pill);
  box-shadow: 0 0 0 var(--wb-nudge-ring) var(--wb-nudge-c), 0 0 0 calc(var(--wb-nudge-ring) * 3) var(--wb-nudge-halo);
  pointer-events: none;
  animation: wb-pulse var(--wb-nudge-t) var(--ease) var(--wb-nudge-n);
}

@keyframes wb-pulse {
  50% { transform: scale(var(--wb-nudge-scale)); opacity: var(--wb-nudge-fade); }
}

.reduce-motion .wb-nudge {
  animation: none;
}

.cel-badge.calm::before {
  background: radial-gradient(circle, var(--cel-calm-glow), transparent var(--cel-calm-stop));
}

.g-how {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin: var(--sp-2) 0 0;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-m);
  background: var(--surface-2);
  color: var(--ink);
  font-size: var(--fs-s);
}

.g-how .i {
  flex: none;
  margin-top: var(--g-how-nudge);
  color: var(--accent-ink);
}

.g-more {
  margin-top: var(--sp-3);
  color: var(--ink);
  text-align: start;
}

.tray-id {
  container: tray-id / inline-size;
}

.tray-breed,
.tray-stage {
  white-space: nowrap;
}

@container tray-id (max-width: 10rem) {
  .tray-breed {
    display: none;
  }
}