/*
  🔁 "Spawned" cards (web/spawned.js, window.ChoreSpawned): a repeating task's next one, announced.
  The card springs up from the bottom, its 🔁 spins once, a light sweeps across it, and a thin bar
  counts down the 7 seconds (it pauses while you're on the card). Leaving, it slides off to the side.
  html[data-fx="subtle"] (fx.js): short fades only. html[data-fx="off"] and prefers-reduced-motion:
  nothing moves (the bar still shows the time left, standing still).
  Tokens: choreboy.css's.
*/

.spawn-stack {
  position: fixed; z-index: 390; right: 1rem; bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 3.4rem);
  display: flex; flex-direction: column; align-items: flex-end; gap: .5rem;
  width: min(25rem, calc(100% - 2rem)); pointer-events: none;
}
.spawn-card {
  --spawn-life: 7000ms;
  position: relative; overflow: hidden; pointer-events: auto;
  display: flex; align-items: center; gap: .7rem; width: 100%;
  padding: .7rem .7rem .8rem .85rem;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: spawn-in 460ms cubic-bezier(.2, 1.35, .4, 1) both;
}
/* A light that sweeps across once, just after it lands. */
.spawn-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--accent) 16%, transparent) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: spawn-sweep 900ms ease-out 320ms both;
}
.spawn-ico {
  flex-shrink: 0; display: grid; place-items: center; width: 2.2rem; height: 2.2rem;
  border-radius: 50%; background: var(--accent-soft); font-size: 1.15rem; line-height: 1;
  animation: spawn-spin 700ms cubic-bezier(.3, 1.5, .5, 1) 120ms both;
}
.spawn-body { flex: 1; min-width: 0; }
.spawn-kick { margin: 0 0 .1rem; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-text); }
.spawn-text { margin: 0; font-size: .9rem; line-height: 1.35; overflow-wrap: anywhere; }
.spawn-text b { font-weight: 650; }
.spawn-near {
  display: inline-block; margin: 0 .1rem; padding: 0 .4rem; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-text); font-size: .78rem; font-weight: 650; vertical-align: 1px;
}
.spawn-acts { flex-shrink: 0; display: flex; align-items: center; gap: .15rem; }
.spawn-see {
  padding: .4rem .7rem; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--accent); color: var(--accent-contrast); font: 650 .84rem var(--font); white-space: nowrap;
  transition: background-color .15s, transform .15s;
}
.spawn-see:hover { background: var(--accent-hover); }
.spawn-see:active { transform: scale(.96); }
.spawn-see span { display: inline-block; transition: transform .15s; }
.spawn-see:hover span { transform: translateX(2px); }
.spawn-x {
  width: 1.9rem; height: 1.9rem; border: 0; border-radius: 50%; cursor: pointer;
  background: none; color: var(--text-3); font-size: .85rem;
}
.spawn-x:hover { background: var(--surface-2); color: var(--text); }
.spawn-see:focus-visible, .spawn-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The time left: a thin bar that shrinks to nothing, standing still while you're on the card. */
.spawn-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--accent); opacity: .55; transform-origin: left center;
  animation: spawn-bar var(--spawn-life) linear both;
}
.spawn-card.is-held .spawn-bar { animation-play-state: paused; }

.spawn-card.is-leaving { animation: spawn-out 240ms ease-in both; pointer-events: none; }

@keyframes spawn-in {
  from { opacity: 0; transform: translateY(18px) scale(.94); }
  to { opacity: 1; transform: none; }
}
@keyframes spawn-out {
  to { opacity: 0; transform: translateX(28px) scale(.97); }
}
@keyframes spawn-spin {
  from { transform: rotate(-200deg) scale(.4); opacity: 0; }
  60% { opacity: 1; }
  to { transform: none; }
}
@keyframes spawn-sweep { to { transform: translateX(100%); } }
@keyframes spawn-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* A task row the card's "See task" brought you to: it glows for a moment (app.js adds the class). */
.spawn-flash { animation: spawn-flash 1.6s ease-out 1; border-radius: var(--radius); }
@keyframes spawn-flash {
  0%, 30% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); background-color: var(--accent-soft); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Phones: across the bottom, above the toast. */
@media (max-width: 640px) {
  .spawn-stack { right: .75rem; left: .75rem; width: auto; align-items: stretch; }
  .spawn-card { padding-right: .5rem; }
  .spawn-kick { display: none; }
}

/* Subtle: a short fade in and out, no spin, no sweep, the bar still runs. */
html[data-fx="subtle"] .spawn-card { animation: spawn-fade 180ms ease-out both; }
html[data-fx="subtle"] .spawn-card.is-leaving { animation: spawn-fade 160ms ease-in reverse both; }
html[data-fx="subtle"] .spawn-ico, html[data-fx="subtle"] .spawn-card::after { animation: none; }
html[data-fx="subtle"] .spawn-card::after { display: none; }
@keyframes spawn-fade { from { opacity: 0; } to { opacity: 1; } }

/* Off, or the device asks for less motion: nothing moves. */
html[data-fx="off"] .spawn-card, html[data-fx="off"] .spawn-card *, html[data-fx="off"] .spawn-card::after, html[data-fx="off"] .spawn-flash { animation: none !important; transition: none !important; }
html[data-fx="off"] .spawn-card::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  .spawn-card, .spawn-card *, .spawn-card::after, .spawn-flash { animation: none !important; transition: none !important; }
  .spawn-card::after { display: none; }
}