/* Your orders and the address book: signing in on a luggage tag, and the signed-in pass beside the page. */
/* Signing in is a luggage tag on the desk: the email, then the code. Signed in, each order is a parcel slip. */
.lede { max-width: 34em; font-size: 19px; }
[hidden] { display: none !important; }
.tag { position: relative; max-width: 520px; margin: 32px 0 20px; padding: clamp(24px, 5vw, 36px); border-radius: 6px 28px 28px 6px; background: var(--grain), #fffdf8; box-shadow: 0 1px 0 var(--line), 0 18px 34px -22px rgba(26, 31, 58, .6); rotate: -.6deg; }
.tag::before { content: ""; position: absolute; top: 26px; left: 18px; width: 14px; height: 14px; border: 2.5px solid var(--ink); border-radius: 50%; background: var(--sun); }
.tag form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding-left: 22px; }
.tag label { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.tag input { width: 100%; min-width: 0; min-height: 52px; padding: 12px 20px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font: inherit; font-size: 17px; color: var(--ink); }
.tag input[inputmode="numeric"] { font-family: "Fraunces", Georgia, serif; font-size: 26px; letter-spacing: .3em; }
.tag .btn { justify-self: start; border: 0; font-family: inherit; cursor: pointer; }
.tag .btn[disabled] { opacity: .6; cursor: progress; }
.tag .note { margin: 0; font-size: 15px; color: var(--ink-soft); }
.links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.link { padding: 6px 0; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 700; color: var(--cobalt); text-decoration: underline; cursor: pointer; }
.status { min-height: 1.6em; margin: 0; font-size: 15px; font-weight: 700; }
.status.error { color: #b3261e; }

.who { margin: 24px 0 8px; }
.who strong { overflow-wrap: anywhere; }
/* Your snail, the same one as in the menu, picked from your email. */
.me { display: flex; align-items: center; gap: 12px; }
.me > span:last-child { min-width: 0; }
.avatar { flex: none; width: 56px; height: 56px; border: 2.5px solid var(--ink); border-radius: 50%; overflow: hidden; background: #fffdf8; rotate: -4deg; }
.avatar svg { display: block; width: 100%; height: 100%; }
/* Finding a card: a search across what each slip says, above the newest. */
.finding { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 20px 0 0; }
.finding[hidden] { display: none; }
.finding input { flex: 1 1 16em; min-width: 0; min-height: 48px; padding: 10px 20px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font: inherit; font-size: 16px; color: var(--ink); }
/* The sort is a quiet toggle: newest first, or turned round. */
.sorted { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 4px; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 700; color: var(--ink-soft); cursor: pointer; }
.sorted::after { content: "↓"; color: var(--cobalt); transition: rotate .25s; }
.sorted[data-sort="oldest"]::after { rotate: 180deg; }
.sorted:hover { color: var(--ink); }
.orders, .ghosts { display: grid; gap: 18px; margin: 20px 0 40px; padding: 0; list-style: none; }
.orders li, .ghosts li { margin: 0; }
.slip, .ghost-slip { padding: 22px 24px; border-left: 6px solid var(--c, var(--cobalt)); border-radius: 6px; background: #fffdf8; box-shadow: 0 1px 0 var(--line), 0 14px 28px -20px rgba(26, 31, 58, .55); }
.slip[data-status="posted"] { --c: var(--tomato); }
.slip[data-status="delivered"] { --c: #3f8f3a; }
.slip[data-status="archived"], .slip[data-status="cancelled"] { --c: var(--line); }
/* Calling off a card still in the queue. */
.edit { margin-top: 18px; }
.edit form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 8em); gap: 12px 14px; margin-top: 4px; }
.edit .field { display: grid; gap: 4px; margin: 0; grid-column: 1 / -1; }
.edit .field-suburb { grid-column: 1; }
.edit .field-postcode { grid-column: 2; }
.edit label { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.edit input, .edit textarea { width: 100%; min-width: 0; padding: 10px 14px; border: 2px solid var(--ink); border-radius: 12px; background: #fff; font: inherit; font-size: 16px; color: var(--ink); }
.edit textarea { resize: vertical; }
/* Addresses found as the street is typed, dropped down over the fields below. */
.edit .finder { position: relative; }
.suggestions { position: absolute; z-index: 5; top: 100%; left: 0; right: 0; margin: 4px 0 0; padding: 6px 0; list-style: none; background: #fff; border: 2px solid var(--ink); border-radius: 12px; box-shadow: 0 14px 28px -16px rgba(26, 31, 58, .55); }
.suggestions li { padding: 10px 14px; cursor: pointer; line-height: 1.35; }
.suggestions li[aria-selected="true"] { background: var(--desk); }
@media (hover: hover) { .suggestions li:hover { background: var(--desk); } }
.suggestions li.manual { color: var(--cobalt); font-weight: 700; }
.suggestions li.manual:not(:first-child) { margin-top: 6px; border-top: 2px dashed var(--line); }
.edit .note, .edit .links { grid-column: 1 / -1; }
.edit .note { margin: 0; font-size: 15px; color: #b3261e; }
.edit .note:empty { display: none; }
.edit .btn { border: 0; font-family: inherit; cursor: pointer; }
.edit .btn[disabled] { opacity: .6; cursor: progress; }
.book-save { margin-top: 14px; }
.book-save .link[disabled] { opacity: .6; cursor: progress; }
.cancel { margin-top: 18px; padding-top: 14px; border-top: 2px dashed var(--line); }
.cancel p { margin: 0 0 6px; font-size: 15px; }
.cancel .btn { border: 0; background: #b3261e; font-family: inherit; cursor: pointer; box-shadow: none; }
.cancel .btn[disabled] { opacity: .6; cursor: progress; }
.slip header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 12px; margin-bottom: 10px; }
.slip h3 { margin: 0; font-family: "Fraunces", Georgia, serif; font-size: 22px; font-weight: 600; line-height: 1.25; color: var(--ink); }
.pill { padding: 3px 12px; border-radius: 999px; background: var(--desk); font-size: 13px; font-weight: 700; white-space: nowrap; }
.slip dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 18px; margin: 0; font-size: 15.5px; line-height: 1.8; }
.slip dt { color: var(--ink-soft); }
.slip dd { margin: 0; overflow-wrap: anywhere; }
/* The card itself: its cover, googly eyes and all, beside the inside page the pen writes on. */
.card-view { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr); gap: 18px; align-items: start; margin: 6px 0 18px; }
.cover-pic { position: relative; margin: 0; aspect-ratio: 5 / 7; border-radius: 4px; overflow: hidden; background: var(--desk); box-shadow: 0 2px 4px rgba(26, 31, 58, .12), 0 22px 34px -20px rgba(26, 31, 58, .6); rotate: -1.5deg; }
.cover-pic img, .cover-eyes { position: absolute; inset: 0; width: 100%; height: 100%; }
.cover-pic img { object-fit: cover; }
.inside { grid-column: -2; padding: 18px 20px; border-radius: 4px; background: #fff; box-shadow: 0 1px 0 var(--line), 0 14px 24px -20px rgba(26, 31, 58, .5); }
.card-view:not(:has(.cover-pic)) .inside { grid-column: 1 / -1; }
.inside-label { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.hand { font-size: 23px; line-height: 1.5; color: var(--cobalt); overflow-wrap: anywhere; }
.hand p { margin: 0; white-space: pre-line; }
.hand p + p { margin-top: 14px; }
.inside.gone { font-size: 15px; color: var(--ink-soft); }
@media (max-width: 480px) { .card-view { grid-template-columns: minmax(0, 1fr); } .cover-pic { width: min(200px, 100%); } .inside { grid-column: 1; } }
/* Give $10, get $10: a coupon torn from a book, its code in a dashed box to copy. */
.refer { position: relative; margin: 32px 0 0; padding: 24px 24px 20px; border-radius: 18px; background: var(--grain), var(--sun); box-shadow: 0 1px 0 var(--line), 0 18px 30px -22px rgba(26, 31, 58, .6); rotate: .6deg; animation: fade-up .6s cubic-bezier(.2, .7, .2, 1) .3s backwards; }
.refer::before, .refer::after { content: ""; position: absolute; top: 50%; width: 22px; height: 22px; border-radius: 50%; background: var(--cotton); translate: 0 -50%; }
.refer::before { left: -11px; }
.refer::after { right: -11px; }
.refer h2 { margin: 0 0 6px; font-family: "Fraunces", Georgia, serif; font-size: 28px; line-height: 1.1; color: var(--ink); }
.refer h2::after { display: none; }
.refer p { margin: 0 0 14px; font-size: 15.5px; }
.refer-code { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; margin: 0 0 14px; padding: 12px 16px; border: 2.5px dashed var(--ink); border-radius: 12px; background: #fffdf8; }
.refer-code span { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.refer-code b { font-family: "Fraunces", Georgia, serif; font-size: 26px; letter-spacing: .14em; color: var(--cobalt); overflow-wrap: anywhere; }
.refer .links { align-items: center; }
.refer .btn { border: 0; font-family: inherit; cursor: pointer; }
.refer-credits { font-weight: 700; }
.refer .status { margin-top: 6px; }

.danger { margin-top: 48px; padding-top: 24px; border-top: 2px dashed var(--line); }
.danger .btn { border: 0; background: #b3261e; font-family: inherit; cursor: pointer; box-shadow: none; }
main h2 { margin-top: 40px; }
@media (max-width: 480px) { .slip dl { grid-template-columns: 1fr; } .slip dt { margin-top: 6px; } }

/* The motion: the heading writes itself in ink, the tag swings in on its string and flips over for the code, a wrong code shakes it, signing in thumps a postmark down, the slips are dealt onto the desk, and a snail crawls each order's trail to where it's up to. */
h1 { animation: ink-write 1.2s cubic-bezier(.45, .05, .55, .95) .1s backwards; }
@keyframes ink-write { from { clip-path: inset(-20% 100% -20% 0); } to { clip-path: inset(-20% -5% -20% 0); } }
.lede { animation: fade-up .8s cubic-bezier(.2, .7, .2, 1) .35s backwards; }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } }

.tag { transform-origin: 25px 33px; perspective: 900px; animation: swing-in 1.5s cubic-bezier(.3, 1.4, .5, 1) .45s backwards; }
.tag::after { content: ""; position: absolute; top: -46px; left: 24px; width: 2px; height: 66px; background: repeating-linear-gradient(#a39d8c 0 5px, #8a846f 5px 8px); rotate: 18deg; transform-origin: bottom; pointer-events: none; }
@keyframes swing-in {
  0% { opacity: 0; transform: translateY(-60px) rotate(-16deg); }
  35% { opacity: 1; transform: translateY(0) rotate(9deg); }
  55% { transform: rotate(-5deg); }
  72% { transform: rotate(2.5deg); }
  86% { transform: rotate(-1deg); }
}
.tag form > * { animation: fade-up .5s cubic-bezier(.2, .7, .2, 1) backwards; }
.tag form > :nth-child(2) { animation-delay: .06s; }
.tag form > :nth-child(3) { animation-delay: .12s; }
.tag form > :nth-child(4) { animation-delay: .18s; }
.tag form > :nth-child(5) { animation-delay: .24s; }
.tag input { transition: box-shadow .25s, transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.tag input:focus { box-shadow: 0 0 0 5px rgba(205, 236, 92, .7); transform: scale(1.015); }
.btn { transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s; }
.btn:not([disabled]):hover { transform: translateY(-2px) rotate(-1deg); box-shadow: 0 12px 22px -10px rgba(43, 59, 209, .8); }
.btn:not([disabled]):active { transform: scale(.95); }
.tag .btn[disabled] { background-image: linear-gradient(110deg, transparent 30%, rgba(255, 253, 248, .35) 50%, transparent 70%); background-size: 200% 100%; animation: shimmer 1s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

.crawler { display: inline-block; width: 34px; margin-right: 10px; vertical-align: middle; animation: crawl-on 2.4s linear infinite; }
.crawler svg { display: block; width: 100%; animation: inch .5s ease-in-out infinite alternate; transform-origin: 10% 100%; }
@keyframes crawl-on { from { translate: -6px 0; } 50% { translate: 18px 0; } to { translate: -6px 0; } }
@keyframes inch { from { scale: 1 1; } to { scale: 1.08 .94; } }

.who { position: relative; animation: fade-up .6s cubic-bezier(.2, .7, .2, 1) backwards; }
.stamped { display: inline-grid; place-items: center; width: 84px; height: 84px; margin: -18px 0 -18px 14px; border: 2.5px solid var(--tomato); border-radius: 50%; outline: 2.5px solid var(--tomato); outline-offset: -8px; vertical-align: middle; font: 800 10px/1.2 Georgia, serif; letter-spacing: .08em; text-align: center; text-transform: uppercase; color: #c9561f; rotate: -14deg; opacity: .8; animation: thump .7s cubic-bezier(.2, 1.6, .4, 1) .25s backwards; }
@keyframes thump { from { opacity: 0; scale: 2.6; rotate: 10deg; } 60% { opacity: .9; } }

.orders li, .ghosts li { animation: deal .75s cubic-bezier(.2, 1.1, .3, 1) backwards; animation-delay: calc(var(--i, 0) * .13s + .35s); }
@keyframes deal { from { opacity: 0; transform: translate(-40px, 70px) rotate(-7deg); } }
.slip { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s; }
.orders li:nth-child(odd) .slip { rotate: -.4deg; }
.orders li:nth-child(even) .slip { rotate: .5deg; }
@media (hover: hover) { .slip:hover { transform: translateY(-5px) rotate(-.6deg); box-shadow: 0 1px 0 var(--line), 0 26px 40px -24px rgba(26, 31, 58, .65); } }

/* Where the order's up to: a snail on a dotted trail, inching from the queue to the door. */
.trail { position: relative; margin: 6px 0 18px; padding: 30px 16px 0; --at: calc(var(--stage) / var(--last) * 100%); }
.trail-line { position: absolute; top: 44px; left: 16px; right: 16px; height: 3px; background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 11px); }
.trail-ink { position: absolute; inset: 0 auto 0 0; width: var(--at); border-radius: 2px; background: var(--c, var(--cobalt)); animation: ink-trail 1.6s cubic-bezier(.4, 0, .2, 1) backwards; animation-delay: calc(var(--i, 0) * .13s + .8s); }
@keyframes ink-trail { from { width: 0; } }
.trail-snail { position: absolute; top: 18px; left: calc(16px + (100% - 32px) * var(--stage) / var(--last)); width: 34px; translate: -50% 0; animation: snail-trail 1.6s cubic-bezier(.4, 0, .2, 1) backwards; animation-delay: calc(var(--i, 0) * .13s + .8s); }
@keyframes snail-trail { from { left: 16px; } }
.trail-snail svg { display: block; width: 100%; animation: inch .45s ease-in-out 4 alternate; animation-delay: calc(var(--i, 0) * .13s + .8s); transform-origin: 10% 100%; }
.trail-stops { display: flex; justify-content: space-between; margin: 26px -16px 0; padding: 0; list-style: none; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
/* The end stops take half a share each, so every label sits under its point on the trail. */
.trail-stops li { position: relative; flex: 1; min-width: 0; text-align: center; white-space: nowrap; }
.trail-stops li:first-child { flex: .5; text-align: left; }
.trail-stops li:last-child { flex: .5; text-align: right; }
@media (max-width: 480px) { .trail-stops { font-size: 11.5px; } }
.trail-stops li.reached { color: var(--ink); }
/* While a card can still be cancelled, the stretch from the queue to the pen is lit. */
.trail-window { position: absolute; top: 38px; left: 10px; width: calc((100% - 32px) / var(--last) + 12px); height: 15px; border-radius: 999px; background: var(--sun); }
.trail-note { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 13.5px; font-weight: 700; }
.trail-note::before { content: ""; flex: none; width: 22px; height: 10px; border-radius: 999px; background: var(--sun); }
.slip[data-status="delivered"] .pill { position: relative; background: #d8efc8; animation: pop .6s cubic-bezier(.2, 1.8, .4, 1) backwards; animation-delay: calc(var(--i, 0) * .13s + 2.2s); }
@keyframes pop { from { scale: .4; } }
.slip[data-status="delivered"] .pill::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 6px; height: 6px; border-radius: 50%; opacity: 0; box-shadow: 0 -26px 0 #e5482b, 22px -14px 0 var(--sun), 26px 10px 0 var(--cobalt), 0 26px 0 #3f8f3a, -22px 14px 0 var(--tomato), -26px -12px 0 var(--cobalt); animation: burst .9s ease-out forwards; animation-delay: calc(var(--i, 0) * .13s + 2.25s); }
@keyframes burst { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.2); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); } }

/* Two panels on a desktop: signing in, or who you are and your tally, on the left; the welcome scene, or your cards, on the right. One column on a phone, with deleting the account last. */
.desk { display: grid; grid-template-areas: "side" "main" "foot"; gap: 36px; width: min(1180px, 100% - 32px); margin-inline: auto; }
.panel-side { grid-area: side; min-width: 0; }
.panel-main { grid-area: main; min-width: 0; }
.panel-foot { grid-area: foot; min-width: 0; }
.panel-side .tag { max-width: none; }
@media (min-width: 960px) {
  .desk { grid-template-columns: minmax(340px, 420px) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "side main" "side foot"; column-gap: clamp(40px, 5vw, 80px); row-gap: 0; align-items: start; }
  .desk[data-state="signed-in"] { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); }
  .desk[data-state="signed-in"] .panel-main { padding-top: 12px; }
  .panel-main { animation: slide-in .9s cubic-bezier(.2, .9, .3, 1) .3s backwards; }
}
/* On a screen tall enough to hold all of it, the rail stays in reach while the cards scroll past. */
@media (min-width: 960px) and (min-height: 980px) { .desk[data-state="signed-in"] .panel-side { position: sticky; top: 24px; } }
@keyframes slide-in { from { opacity: 0; transform: translateX(60px) rotate(1.5deg); } }

.welcome { position: relative; overflow: hidden; padding: clamp(24px, 4vw, 40px); border-radius: 28px; background: var(--grain), var(--cobalt); color: #fffdf8; box-shadow: 0 30px 60px -34px rgba(26, 31, 58, .8); }
.welcome h2 { margin: 0 0 18px; font-family: "Fraunces", Georgia, serif; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.05; color: var(--sun); }
.welcome h2::after { display: none; }
.scene { position: relative; height: clamp(190px, 22vw, 250px); margin: -6px -10px 14px; }
.airmail { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.airmail path { fill: none; stroke: rgba(255, 253, 248, .55); stroke-width: 3; stroke-dasharray: 2 12; stroke-linecap: round; animation: march 1.2s linear infinite; }
@keyframes march { to { stroke-dashoffset: -28; } }
.env { position: absolute; left: 50%; top: 22%; width: clamp(170px, 18vw, 210px); aspect-ratio: 3 / 2; translate: -50% 0; border-radius: 6px; background: #ddd3bd; box-shadow: 0 24px 34px -18px rgba(10, 14, 40, .7); perspective: 600px; animation: bob 3.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-12px) rotate(-3deg); } }
.env::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 6px; background: #fffdf8; clip-path: polygon(0 32%, 50% 66%, 100% 32%, 100% 100%, 0 100%); }
.env::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 3; height: 62%; border-radius: 6px 6px 0 0; background: #f2ecdf; clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top; transition: transform .55s cubic-bezier(.4, 0, .2, 1), z-index 0s .28s; }
.letter { position: absolute; inset: 8% 8% auto; z-index: 1; opacity: 0; display: grid; gap: 4px; padding: 10px 12px 26px; border-radius: 4px; background: #fff; color: var(--ink); text-align: center; transition: transform .7s cubic-bezier(.2, 1.4, .4, 1) .25s, opacity .2s .25s; }
.letter span { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.letter b { font-family: "Fraunces", Georgia, serif; font-size: 22px; letter-spacing: .1em; color: var(--cobalt); }
.env-stamp { position: absolute; right: 10px; bottom: 10px; z-index: 4; width: 30px; height: 36px; background: var(--tomato); --r: 3px; mask: radial-gradient(var(--r), #0000 97%, #000) round calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)), linear-gradient(#000 0 0) no-repeat 50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r)); rotate: 6deg; }
/* Once the code's on its way, the envelope opens and the letter rises out of it. */
.welcome[data-step="code"] .env::before { z-index: 0; transform: rotateX(180deg); transition: transform .55s cubic-bezier(.4, 0, .2, 1), z-index 0s .28s; }
.welcome[data-step="code"] .letter { z-index: 1; opacity: 1; transform: translateY(-62%); }
.welcome[data-step="code"] .env { animation-duration: 1.8s; }
.scene-snail { position: absolute; bottom: 0; left: 0; width: 46px; animation: cross 16s linear infinite; }
.scene-snail svg { display: block; width: 100%; animation: inch .5s ease-in-out infinite alternate; transform-origin: 10% 100%; }
@keyframes cross { from { translate: -60px 0; } to { translate: calc(100cqw + 60px) 0; } }
.scene { container-type: inline-size; }
.steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.steps li { display: flex; align-items: center; gap: 14px; margin: 0; padding: 10px 14px; border-radius: 16px; font-weight: 600; color: rgba(255, 253, 248, .75); transition: background .4s, color .4s, transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.steps b { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 253, 248, .15); font-family: "Fraunces", Georgia, serif; font-size: 17px; color: #fffdf8; transition: background .4s, color .4s, scale .4s cubic-bezier(.34, 1.56, .64, 1); }
.welcome[data-step="email"] .steps [data-step="email"], .welcome[data-step="code"] .steps [data-step="code"] { background: rgba(255, 253, 248, .12); color: #fffdf8; transform: translateX(6px); }
.welcome[data-step="email"] .steps [data-step="email"] b, .welcome[data-step="code"] .steps [data-step="code"] b { background: var(--sun); color: var(--ink); scale: 1.12; }
.welcome[data-step="code"] .steps [data-step="email"] b { background: #fffdf8; color: var(--cobalt); }

/* Signed in, the left side is a pass: who you are at the top with a stamp across its corner, your cards sorted by where they're up to, and a stub along the dotted line for the account's own links. */
.pass, .ghost-pass { position: relative; margin: 26px 0 0; border-radius: 22px; background: var(--grain), #fffdf8; box-shadow: 0 1px 0 var(--line), 0 24px 40px -28px rgba(26, 31, 58, .65); animation: fade-up .6s cubic-bezier(.2, .7, .2, 1) .1s backwards; }
.pass .who, .ghost-pass .who { margin: 0; padding: 22px 22px 18px; }
.pass .me, .ghost-pass .me { padding-right: 56px; }
.avatar { width: 52px; height: 52px; }
.who-text { display: grid; min-width: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.who-text strong { overflow: hidden; margin-top: 2px; font-size: 16px; letter-spacing: normal; text-transform: none; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.pass .stamped, .ghost-pass .stamped { position: absolute; top: -20px; right: -16px; width: 78px; height: 78px; margin: 0; background: rgba(255, 253, 248, .75); }
.rail-cards { padding: 0 12px 14px; }
.rail-label { margin: 0 10px 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
/* The tally: how the cards split between the stages, each in its colour. */
.tally { display: flex; gap: 3px; height: 8px; margin: 0 10px 12px; border-radius: 999px; overflow: hidden; background: var(--line); }
.tally span { flex: 0 1 0; min-width: 0; transition: flex-grow 1s cubic-bezier(.2, .7, .2, 1) .3s; }
.tally span:nth-child(1) { background: var(--cobalt); }
.tally span:nth-child(2) { background: var(--tomato); }
.tally span:nth-child(3) { background: #3f8f3a; }
.tally span:nth-child(4) { background: var(--line); }
.rail-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.rail-list li { margin: 0; }
#filters li { --c: var(--cobalt); --on: #fffdf8; }
#filters li:nth-child(1) { --c: var(--ink); }
#filters li:nth-child(3) { --c: var(--tomato); --on: var(--ink); }
#filters li:nth-child(4) { --c: #3f8f3a; }
#filters button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 8px 10px 8px 12px; border: 0; border-radius: 14px; background: none; font: inherit; font-size: 16px; font-weight: 600; color: var(--ink); text-align: left; cursor: pointer; transition: background .2s; }
#filters button::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); transition: box-shadow .2s; }
#filters span { flex: 1; }
#filters b { min-width: 36px; padding: 1px 10px; border-radius: 999px; background: var(--cotton); font-family: "Fraunces", Georgia, serif; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; color: var(--ink-soft); transition: background .2s, color .2s; }
#filters button:hover { background: var(--cotton); }
#filters [aria-pressed="true"], #filters [aria-pressed="true"]:hover { background: color-mix(in srgb, var(--c) 11%, #fffdf8); }
#filters [aria-pressed="true"]::before { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent); }
#filters [aria-pressed="true"] b { background: var(--c); color: var(--on); }
.rail-hint { margin: 12px 10px 0; padding: 12px 14px; border-radius: 14px; background: rgba(205, 236, 92, .35); font-size: 14px; line-height: 1.5; }
.rail-hint[hidden] { display: none; }
/* The stub, with a notch bitten out of either end of the dotted line. */
.stub { position: relative; display: grid; gap: 10px; padding: 20px 22px 18px; border-top: 2px dashed var(--line); }
.stub::before, .stub::after { content: ""; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--cotton); }
.stub::before { left: -11px; }
.stub::after { right: -11px; }
.stub .btn { justify-content: center; }
.stub .rail-list { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 16px; }
.stub .rail-list :is(a, button) { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 700; color: var(--cobalt); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.panel-foot { font-size: 15px; }
/* On a phone the card filters run across as chips, and the hint waits until it's needed. */
@media (max-width: 959px) {
  .pass, .ghost-pass { margin-top: 18px; }
  .pass .who, .ghost-pass .who { padding: 18px 18px 14px; }
  .rail-cards { padding: 0 0 14px; }
  .rail-label, .tally { margin-inline: 18px; }
  #filters { display: flex; gap: 8px; overflow-x: auto; padding: 0 18px 4px; scrollbar-width: none; }
  #filters li { flex: none; }
  #filters button { min-height: 44px; padding: 6px 8px 6px 14px; border: 2px solid var(--line); border-radius: 999px; white-space: nowrap; }
  #filters [aria-pressed="true"] { border-color: var(--c); }
  .rail-hint { margin: 12px 18px 0; }
  .pass .stamped, .ghost-pass .stamped { right: -6px; width: 70px; height: 70px; }
  .stub { padding: 18px 18px 12px; }
}
@media (min-width: 960px) { .panel-foot { margin-top: 8px; } }

/* Checking a returning pass: the page already wears its signed-in shape, with the pass and three slips still being filled in, a stamp pressing down on the pass, and a snail crawling each slip's trail until the real cards are dealt over them. */
.desk:not([data-state="checking"]) [data-when~="checking"] { display: none; }
.desk[data-state="checking"] [data-when]:not([data-when~="checking"]) { display: none !important; }
.bone { display: block; height: 12px; border-radius: 999px; background: linear-gradient(100deg, var(--line) 40%, #f6f1e6 50%, var(--line) 60%) 100% 0 / 300% 100%; animation: bone 1.5s linear infinite; }
@keyframes bone { to { background-position: -50% 0; } }
.ghost .who-text { gap: 8px; }
.ghost .who-text .bone { width: min(180px, 100%); height: 14px; }
.ghost .stamped { animation: stamping 2.4s cubic-bezier(.2, 1.6, .4, 1) .4s infinite; }
@keyframes stamping { 0%, 12% { opacity: 0; scale: 2.2; rotate: 8deg; } 30%, 78% { opacity: .8; scale: 1; rotate: -14deg; } 100% { opacity: 0; scale: 1; rotate: -14deg; } }
.ghost .avatar:empty { background: var(--cotton); }
.ghost .tally { background: linear-gradient(90deg, var(--cobalt), var(--tomato), #3f8f3a, var(--line), var(--cobalt)) 0 0 / 400% 100%; opacity: .5; animation: tally-run 3s linear infinite; }
@keyframes tally-run { to { background-position: -400% 0; } }
.ghost .rail-list li { padding: 17px 12px 17px 34px; }
.ghost .rail-list li:nth-child(2) .bone { width: 70%; }
.ghost .rail-list li:nth-child(3) .bone { width: 45%; }
.ghost .rail-list li:nth-child(4) .bone { width: 58%; }

.sorting-line { min-height: 1.6em; margin: 0; font-family: "Fraunces", Georgia, serif; font-size: clamp(20px, 2.2vw, 26px); color: var(--ink); }
.sorting-line.turn { animation: line-in .45s cubic-bezier(.2, .7, .2, 1); }
@keyframes line-in { from { opacity: 0; translate: 0 10px; } }
.ghost-slip { display: grid; gap: 12px; }
.ghost-head { display: flex; justify-content: space-between; gap: 18px; }
.ghost-head .bone:first-child { width: 46%; height: 20px; }
.ghost-head .bone:last-child { width: 86px; height: 22px; }
.ghost-slip > .bone:nth-last-child(2) { width: 62%; }
.ghost-slip > .bone:last-child { width: 38%; }
.ghosts li:nth-child(2) .ghost-head .bone:first-child { width: 34%; }
.ghosts li:nth-child(3) .ghost-head .bone:first-child { width: 52%; }
.ghosts li:nth-child(n + 2) { opacity: calc(1 - var(--i) * .25); }
.ghosts .bone { animation-delay: calc(var(--i) * .15s); }
.ghost-trail { position: relative; height: 54px; margin: 0 0 4px; }
.ghost-trail .trail-line { top: 30px; }
.ghost-trail .trail-ink { animation: ink-run 3.2s cubic-bezier(.5, 0, .5, 1) calc(var(--i) * .5s) infinite backwards; }
.ghost-trail .trail-snail { animation: snail-run 3.2s cubic-bezier(.5, 0, .5, 1) calc(var(--i) * .5s) infinite backwards; }
.ghost-trail .trail-snail { top: 4px; left: 16px; }
.ghost-trail .trail-snail svg { animation: inch .45s ease-in-out infinite alternate; }
@keyframes ink-run { 0% { width: 0; opacity: 1; } 80% { width: 100%; opacity: 1; } 100% { width: 100%; opacity: 0; } }
@keyframes snail-run { 0% { left: 16px; opacity: 0; } 8% { opacity: 1; } 80% { left: calc(100% - 16px); opacity: 1; } 100% { left: calc(100% - 16px); opacity: 0; } }
@media (max-width: 959px) {
  .ghost .rail-list { display: flex; gap: 8px; padding: 0 18px 4px; }
  .ghost .rail-list li, .ghost .rail-list li:nth-child(n) { flex: 1; padding: 0; }
  .ghost .rail-list .bone { width: 100% !important; height: 44px; }
}
@media (min-width: 960px) {
  .desk[data-state="checking"] { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); }
  .desk[data-state="checking"] .panel-main { padding-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}