/* Edseth delivery demo (assets/js/demo.js). One sheet of paper: typed by the agent, read by the check, stamped by a person, dropped in your tray.
   Scoped to .delivery. Animation is transform and opacity only; nothing here changes layout after the first frame. */

.delivery .del-stage { --cw: min(560px, 100%); }

/* The host .task becomes a bare frame; the demo draws its own paper. Doubled class so it outranks the site's .task drop/dip rules. */
.delivery .task.dm.dm {
  display: block; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; scale: none; rotate: none; translate: none; opacity: 1; animation: none;
  color: var(--evergreen); container: dm / inline-size;
}
.delivery .dm-stage { position: relative; perspective: 1100px; }
.delivery .dm-defs { position: absolute; width: 0; height: 0; }
.delivery .dm-move { transform-origin: 50% 100%; will-change: transform; }

/* ---------- The sheet ---------- */
.delivery .dm-sheet {
  position: relative; padding: 20px 26px 22px 20px; border-radius: 4px; color: var(--evergreen);
  background: var(--fibre, none), var(--ivory);
  box-shadow: 0 0 0 1px rgba(20, 35, 33, .1), 0 2px 4px -2px rgba(20, 35, 33, .14), 0 34px 60px -34px rgba(20, 35, 33, .55);
  font: 400 15.5px/1.62 var(--sans); text-align: left;
}
.delivery .dm-head { display: flex; align-items: center; gap: 10px; min-height: 28px; font: 500 13px/1 var(--sans); color: rgba(20, 35, 33, .74); }
.delivery .dm-head img { width: 20px; height: auto; }
.delivery .dm-state { display: grid; }
.delivery .dm-state i { grid-area: 1 / 1; justify-self: start; padding: 6px 11px 5px; border-radius: 999px; background: rgba(20, 35, 33, .07); color: var(--evergreen); font-style: normal; white-space: nowrap; opacity: 0; transition: opacity .3s ease; }
.delivery .dm[data-dm="0"] .dm-state i:nth-child(1), .delivery .dm[data-dm="1"] .dm-state i:nth-child(2),
.delivery .dm[data-dm="2"] .dm-state i:nth-child(3), .delivery .dm[data-dm="3"] .dm-state i:nth-child(4) { opacity: 1; }

.delivery .dm-meta { display: grid; grid-template-columns: auto 1fr; gap: 1px 14px; margin: 14px 0 0 22px; padding-bottom: 11px; border-bottom: 1px solid rgba(20, 35, 33, .12); font-size: 14px; line-height: 1.6; }
.delivery .dm-k { color: rgba(20, 35, 33, .62); }
.delivery .dm-subj { font-weight: 500; }

/* ---------- Typed lines: every character is in place from the start (no reflow); typing only turns them on ---------- */
.delivery .dm-body { position: relative; margin-top: 9px; }
.delivery .dm-row { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: baseline; }
.delivery .dm-tw { position: relative; justify-self: start; }
.delivery .dm-c { position: relative; opacity: 0; }
.delivery .dm-c.on { opacity: 1; }
/* The agent's cursor: a caret and a name flag under it, like a collaborator in a shared document */
.delivery .dm-c.cr::after { content: ""; position: absolute; left: 100%; top: .14em; bottom: .06em; width: 2px; margin-left: 1px; background: var(--evergreen); animation: dm-blink 1.06s steps(1) infinite; }
/* The flag rides to the right of the caret, over characters not typed yet, so it never covers written text */
.delivery .dm-c.cr::before { content: var(--dm-agent); position: absolute; z-index: 2; left: calc(100% + 8px); top: 50%; translate: 0 -50%; padding: 3px 6px 3px; border-radius: 3px; background: var(--evergreen); color: var(--ivory); font: 600 10px/1.1 var(--sans); letter-spacing: .02em; white-space: nowrap; }
@keyframes dm-blink { 50% { opacity: 0; } }

/* The check: a band that reads line by line, a tick per line, one strike, two margin notes */
.delivery .dm-scan { position: absolute; left: -10px; right: -12px; top: 0; height: 1.62em; border-radius: 3px; pointer-events: none; opacity: 0; will-change: transform, opacity;
  background: linear-gradient(90deg, rgba(113, 139, 123, .26), rgba(113, 139, 123, .1) 55%, rgba(113, 139, 123, 0)); box-shadow: inset 2px 0 0 var(--sage); }
.delivery .dm-mark { width: 14px; height: 14px; align-self: start; margin-top: calc((1lh - 14px) / 2); }
.delivery .dm-mark svg { width: 14px; height: 14px; fill: none; stroke: var(--evergreen); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.delivery .dm-mark path { opacity: 0; transform: scale(.4); transform-origin: 7px 7px; transition: opacity .18s ease, transform .35s var(--ease-out); }
.delivery .dm-row.is-ok .ok, .delivery .dm-claim.is-flag .no { opacity: 1; transform: none; }
.delivery .dm-claim.is-flag .ok { opacity: 0; }
.delivery .dm-strike { position: absolute; left: -2px; right: -3px; top: 54%; height: 1.5px; background: var(--evergreen); transform-origin: 0 50%; transform: scaleX(0); }
.delivery .dm-t { transition: opacity .4s ease; }
.delivery .dm-claim.is-struck .dm-t { opacity: .5; }
/* Each note has its own reserved line under the line it is about, so nothing moves when it appears */
.delivery .dm-claim, .delivery .dm-fix { padding-bottom: 21px; }
.delivery .dm-note { position: absolute; left: 22px; top: calc(100% - 10.5px); display: flex; align-items: center; gap: 8px; opacity: 0; transform: translate3d(8px, -50%, 0);
  font: italic 300 15px/1.15 var(--serif); color: rgba(20, 35, 33, .84); white-space: nowrap; }
.delivery .dm-note::before { content: ""; flex: none; width: 14px; height: 1px; background: currentColor; opacity: .6; }
.delivery .dm-claim .dm-t { white-space: nowrap; }

/* ---------- The stamp: Burnt Clay, Edseth Display, landing with weight ---------- */
.delivery .dm-stampbox { position: absolute; top: 18px; right: 24px; display: grid; place-items: center; font-size: 26px; pointer-events: none; }
.delivery .dm-stampbox > * { grid-area: 1 / 1; }
.delivery .dm-stamp { display: block; opacity: 0; transform: rotate(-8deg) scale(1.6); transition: opacity .16s ease; will-change: transform, opacity; }
.delivery .dm-ink { display: block; padding: .36em .5em .28em .66em; border: .11em solid var(--clay); border-radius: .26em; color: var(--clay);
  box-shadow: inset 0 0 0 .08em var(--ivory), inset 0 0 0 .14em var(--clay); font: 500 1em/1 var(--sign); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; filter: url(#dm-ink); }
.delivery .dm-shadow { width: 100%; height: 100%; border-radius: .3em; background: radial-gradient(closest-side, rgba(20, 35, 33, .26), rgba(20, 35, 33, 0)); opacity: 0; }
.delivery .dm-bloom { width: 128%; height: 190%; border-radius: 50%; background: radial-gradient(closest-side, rgba(155, 86, 61, .3), rgba(155, 86, 61, 0)); opacity: 0; }
.delivery .dm-dust { position: relative; width: 0; height: 0; }
.delivery .dm-dust i { position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%; background: var(--clay); opacity: 0; }

.delivery .dm.is-stamped .dm-stamp { opacity: 1; transform: rotate(-8deg); animation: dm-slam .56s both; }
.delivery .dm.is-stamped .dm-shake { animation: dm-shake .34s cubic-bezier(.3, .7, .4, 1) .21s both; }
.delivery .dm.is-stamped .dm-bloom { animation: dm-bloom .7s cubic-bezier(.1, .7, .3, 1) .21s forwards; }
.delivery .dm.is-stamped .dm-dust i { animation: dm-dust .62s cubic-bezier(.12, .7, .3, 1) calc(.21s + var(--d)) forwards; }
@keyframes dm-slam {
  0% { opacity: 0; transform: translate3d(0, -12px, 0) rotate(-15deg) scale(2.5); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  38% { opacity: 1; transform: rotate(-7deg) scale(.93); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  60% { transform: rotate(-8.6deg) scale(1.035); }
  80% { transform: rotate(-7.9deg) scale(.995); }
  100% { opacity: 1; transform: rotate(-8deg); }
}
@keyframes dm-shake {
  18% { transform: translate3d(-1px, 3px, 0) rotate(.45deg); }
  42% { transform: translate3d(2px, -1.5px, 0) rotate(-.3deg); }
  66% { transform: translate3d(-1px, .8px, 0) rotate(.12deg); }
}
@keyframes dm-bloom { 0% { opacity: .95; transform: scale(.55); } 100% { opacity: 0; transform: scale(1.3); } }
@keyframes dm-dust { 0% { opacity: .8; transform: translate3d(var(--x0), var(--y0), 0); } 100% { opacity: 0; transform: translate3d(var(--x1), var(--y1), 0) scale(.3); } }

/* ---------- The tray: the sheet drops in behind the front lip ---------- */
.delivery .dm-tray, .delivery .dm-lip { position: absolute; bottom: 0; left: 50%; width: min(400px, 84%); margin-left: max(-200px, -42%); opacity: 0; will-change: transform, opacity; pointer-events: none; }
.delivery .dm-tray { height: 104px; border-radius: 12px 12px 8px 8px; background: linear-gradient(#24342f, var(--evergreen)); box-shadow: inset 0 1px 0 rgba(244, 240, 232, .1); }
.delivery .dm-lip { z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 60px; padding: 0 14px 0 20px; border-radius: 6px 6px 12px 12px;
  background: linear-gradient(#2c3d38, var(--evergreen) 70%); color: var(--ivory); font: 500 14px/1.2 var(--sans);
  box-shadow: inset 0 1px 0 rgba(244, 240, 232, .16), 0 -10px 18px -12px rgba(20, 35, 33, .5), 0 22px 36px -20px rgba(20, 35, 33, .6); }
.delivery .dm-count { flex: none; display: block; height: 30px; min-width: 30px; overflow: hidden; border-radius: 999px; background: var(--ivory); color: var(--evergreen); font: 500 16px/30px var(--sign); text-align: center; }
.delivery .dm-roll { display: block; }
.delivery .dm-roll i { display: block; font-style: normal; }

.delivery .dm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Narrow card (phones) ---------- */
@container dm (max-width: 479px) {
  .delivery .dm-sheet { padding: 16px 16px 16px 12px; font-size: 14px; line-height: 1.58; }
  .delivery .dm-head { gap: 8px; font-size: 12px; }
  .delivery .dm-head img { width: 18px; }
  .delivery .dm-head > span:not(.dm-state) { display: none; } /* the pill names the station; the header's right side is the stamp's */
  .delivery .dm-meta { margin: 12px 0 0 20px; font-size: 13px; gap: 0 12px; }
  .delivery .dm-row { grid-template-columns: 20px minmax(0, 1fr); }
  .delivery .dm-claim, .delivery .dm-fix { padding-bottom: 18px; }
  .delivery .dm-note { left: 20px; top: calc(100% - 9px); gap: 6px; font-size: 13px; }
  .delivery .dm-note::before { width: 10px; }
  .delivery .dm-claim .dm-t { font-size: 13.5px; letter-spacing: -.005em; }
  .delivery .dm-stampbox { top: 8px; right: 10px; font-size: 15px; }
  .delivery .dm-tray { height: 88px; }
  .delivery .dm-lip { height: 52px; padding: 0 10px 0 14px; font-size: 13px; }
  .delivery .dm-count { height: 26px; min-width: 26px; font-size: 14px; line-height: 26px; }
}

/* Reduced motion (demo.js adds .dm-still when initDemo gets reduce: true): each station shows its final frame; no slam, shake, dust or blinking */
.delivery .dm-still *, .delivery .dm-still *::before, .delivery .dm-still *::after { animation: none !important; transition: none !important; }