.o-main { max-width: 860px; }
.o-intro { margin: -14px 0 26px; }
.o-list { display: flex; flex-direction: column; gap: 22px; }
.o-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 28px; border-radius: 22px; background: #fff; }
.o-card { padding: 24px clamp(16px, 4vw, 30px) 22px; border-radius: 24px; background: #fff; box-shadow: 0 10px 28px rgba(74, 18, 48, .08); }
.o-head h2 { font-size: 30px; color: var(--beet); }

/* the tracker: a knitted line that a yarn ball rolls along */
.track { position: relative; margin: 26px 0 8px; padding-top: 6px; }
.track-line { position: absolute; top: 20px; left: 10%; right: 10%; height: 8px; border-radius: 99px; background: repeating-linear-gradient(90deg, #EBD3DD 0 8px, transparent 8px 14px); }
.track-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 99px;
  background: repeating-linear-gradient(-55deg, var(--beet) 0 6px, #E0246F 6px 12px); background-size: 34px 100%;
  animation: knit 1.4s linear infinite; transition: width 1.4s cubic-bezier(.45, .05, .2, 1); }
@keyframes knit { to { background-position: 34px 0; } }
.track-ball { position: absolute; top: 50%; left: 0; z-index: 2; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .5), transparent 45%), repeating-linear-gradient(40deg, #E0246F 0 5px, #F49BBE 5px 9px);
  box-shadow: inset -4px -5px 0 rgba(74, 18, 48, .2), 0 6px 12px rgba(74, 18, 48, .25);
  transition: left 1.4s cubic-bezier(.45, .05, .2, 1), rotate 1.4s cubic-bezier(.45, .05, .2, 1); }
.track.no-anim .track-fill, .track.no-anim .track-ball { transition: none; }
.track-steps { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.track-step { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.track-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 3px dashed #E2C4D0; }
.track-step.done .track-dot { background: var(--beet); border: 3px solid var(--beet); }
.track-step.done .track-dot::after { content: ''; width: 9px; height: 5px; border-left: 3px solid #fff; border-bottom: 3px solid #fff; rotate: -45deg; translate: 0 -1px; }
.track-step.now .track-dot { opacity: 0; }
.track-label { font-weight: 700; font-size: 14px; line-height: 1.2; color: #9A7B88; }
.track-step.done .track-label, .track-step.now .track-label { color: var(--plum); }
.track-step.now .track-label { padding: 3px 9px; border-radius: 99px; background: var(--gold); color: var(--night); animation: now-pop .6s 1.2s cubic-bezier(.3, 1.8, .5, 1) both; }
@keyframes now-pop { from { scale: .6; opacity: 0; } }
.track-time { min-height: 1.3em; font-size: 12px; color: #9A7B88; }
.track.is-done .track-ball { box-shadow: inset -4px -5px 0 rgba(74, 18, 48, .2), 0 0 0 6px rgba(242, 167, 27, .35), 0 6px 12px rgba(74, 18, 48, .25); animation: cheer 1.6s 1.5s ease-in-out infinite; }
@keyframes cheer { 50% { translate: 0 -6px; } }
.track.is-cancelled .track-line, .track.is-cancelled .track-steps { filter: grayscale(1); opacity: .45; }
.track.is-cancelled .track-ball { display: none; }
.track-stamp { position: absolute; top: 2px; left: 50%; translate: -50% 0; rotate: -6deg; padding: 4px 16px; border: 3px solid #B3123C; border-radius: 10px; color: #B3123C; font-family: var(--display); font-size: 22px; background: rgba(255, 255, 255, .9); }

.o-say { position: relative; margin: 14px 0 6px; padding: 12px 16px; border-radius: 16px; background: #FCEEF3; color: var(--plum); font-weight: 600; }
.o-say::before { content: ''; position: absolute; top: -7px; left: 32px; width: 14px; height: 14px; background: inherit; rotate: 45deg; border-radius: 3px 0 0 0; }
.o-say.s-delivered { background: #E3F4DD; }
.o-say.s-cancelled { background: #F3E6E9; color: #6A4651; }

.o-items { display: flex; flex-direction: column; margin-top: 16px; border-top: 1px solid #F0E3E8; }
.o-items li { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 10px 0; border-bottom: 1px solid #F6EEF1; }
.o-item-name { font-weight: 600; }
.o-item-note { display: block; margin-top: 3px; padding: 3px 9px; border-radius: 8px; background: #FFF6DA; color: #6B4500; font-size: 14px; width: fit-content; }
.o-item-price { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
.o-price-line { display: flex; align-items: baseline; gap: 8px; }
.o-was { color: #9A7B88; font-size: 14px; text-decoration-thickness: 2px; text-decoration-color: #B3123C; }
.o-now { font-size: 17px; color: #C8102E; }
.o-now.plain { color: var(--plum); }
.o-off { padding: 1px 8px; border-radius: 99px; background: #FFE3E3; color: #B3123C; font-size: 12px; font-weight: 700; }
.o-note { margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: #FFF6DA; font-size: 15px; }
.o-totals { margin: 14px 0 0; display: flex; flex-direction: column; gap: 4px; }
.o-totals div { display: flex; justify-content: space-between; gap: 12px; }
.o-totals dt { color: #6A4651; }
.o-totals dd { margin: 0; font-weight: 600; }
.o-totals .pending dd { color: #8A5A00; }
.o-totals .saved dt, .o-totals .saved dd { color: #22561A; font-weight: 700; }
.o-totals .grand { margin-top: 6px; padding-top: 8px; border-top: 2px dashed #F0D7E0; font-size: 19px; }
.o-totals .grand dt { color: var(--plum); font-weight: 700; }
.o-totals .grand dd { font-family: var(--display); font-weight: 400; font-size: 24px; color: var(--beet); }
.o-ask { display: inline-block; margin-top: 14px; }

@media (max-width: 560px) {
  .track-step:not(.now) .track-label, .track-step:not(.now) .track-time { visibility: hidden; }
  .track-step.now .track-label, .track-step.now .track-time { white-space: nowrap; }
  .track-step.now:first-child { align-items: flex-start; }
  .track-step.now:last-child { align-items: flex-end; }
  .track-step:first-child .track-dot { margin-left: calc(50% - 12px); }
  .track-step:last-child .track-dot { margin-right: calc(50% - 12px); }
  .track-label { font-size: 13px; }
  .track-time { font-size: 11px; }
  .track-dot { width: 24px; height: 24px; }
  .track-line { top: 17px; }
  .track-ball { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
}
@media (prefers-reduced-motion: reduce) {
  .track-fill, .track-ball { transition: none; }
}