/* Cyber City · Track your order /track/ (Rayan 21 Oct 2026, part of C21). Tokens only (tokens.css), the system's
   modules and fields; classes start with ecc-trk (used nowhere else) and every rule sits under .ecc-trk. The steps are
   four voxels on a line: done is lit, now is lit with a ring, next is an empty square. */

.ecc-trk { display: grid; gap: var(--ecc-gap); }
.ecc-trk > * { min-width: 0; }
.ecc-trk .ecc-trk__top { display: grid; gap: var(--ecc-s-3); padding-top: var(--ecc-s-7); padding-bottom: var(--ecc-s-6); }
.ecc-trk .ecc-trk__top > * { margin: 0; }
.ecc-trk .ecc-trk__kicker { display: flex; align-items: center; gap: var(--ecc-s-2); color: var(--ecc-on-panel-2); }
.ecc-trk .ecc-trk__title { max-width: 14em; text-wrap: balance; }
.ecc-trk .ecc-trk__lead { max-width: 38em; color: var(--ecc-on-panel-2); }
.ecc-trk .ecc-trk__main { display: grid; gap: var(--ecc-gap); align-items: start; }
.ecc-trk .ecc-trk__main > *, .ecc-trk .ecc-trk__body > * { min-width: 0; }
.ecc-trk .ecc-trk__body { display: grid; gap: var(--ecc-gap); }
.ecc-trk .ecc-trk__alert { margin: 0; }
.ecc-trk .ecc-trk__trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }

/* the form */
.ecc-trk .ecc-trk__form { display: grid; gap: var(--ecc-s-4); }
.ecc-trk .ecc-trk__formh { margin: 0; }
.ecc-trk .ecc-trk__fields { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: var(--ecc-s-4); }
.ecc-trk .ecc-trk__go { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ecc-s-3) var(--ecc-s-4); }
.ecc-trk .ecc-trk__go .ecc-help { margin: 0; }

/* one order */
.ecc-trk .ecc-trk__mine { display: grid; gap: var(--ecc-gap); }
.ecc-trk .ecc-trk__minehead { display: flex; align-items: center; gap: var(--ecc-s-2); margin: 0; color: var(--ecc-ink-2); }
.ecc-trk .ecc-trk__card { display: grid; gap: var(--ecc-s-5); }
.ecc-trk .ecc-trk__cardhead { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ecc-s-5); align-items: start; }
.ecc-trk .ecc-trk__num { display: grid; gap: var(--ecc-s-1); margin: 0; padding: var(--ecc-s-3) var(--ecc-s-4); border-radius: var(--ecc-r-sm); background: var(--ecc-panel); color: var(--ecc-on-panel-2); }
.ecc-trk .ecc-trk__num .ecc-dot { font-size: 28px; color: var(--ecc-lime); letter-spacing: .06em; }
.ecc-trk .ecc-trk__now { display: grid; gap: var(--ecc-s-2); }
.ecc-trk .ecc-trk__now > * { margin: 0; }
.ecc-trk .ecc-trk__line { max-width: 40em; line-height: 1.5; }
.ecc-trk .ecc-trk__date { color: var(--ecc-ink-2); }
.ecc-trk .ecc-trk__stopped { display: flex; align-items: center; gap: var(--ecc-s-2); margin: 0; padding: var(--ecc-s-3) var(--ecc-s-4); border-radius: var(--ecc-r-sm); background: var(--ecc-surface-2); font-weight: var(--ecc-fw-medium); }

.ecc-trk .ecc-trk__steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ecc-s-2); margin: 0; padding: 0; list-style: none; }
.ecc-trk .ecc-trk__steps::before { content: ""; position: absolute; top: 9px; left: 10px; right: 10px; height: 2px; background: var(--ecc-line-strong); }
.ecc-trk .ecc-trk__step { position: relative; display: grid; gap: var(--ecc-s-2); justify-items: start; }
.ecc-trk .ecc-trk__vox { position: relative; width: 20px; height: 20px; border-radius: var(--ecc-r-voxel); background: var(--ecc-surface); box-shadow: inset 0 0 0 2px var(--ecc-line-strong); }
.ecc-trk .ecc-trk__step.is-done .ecc-trk__vox, .ecc-trk .ecc-trk__step.is-now .ecc-trk__vox { background: var(--ecc-lime); box-shadow: inset 0 0 0 2px var(--ecc-spark); }
.ecc-trk .ecc-trk__step.is-now .ecc-trk__vox::after { content: ""; position: absolute; inset: -6px; border-radius: 3px; box-shadow: 0 0 0 2px var(--ecc-spark); }
.ecc-trk .ecc-trk__stepw { font-size: var(--ecc-t-small); font-weight: var(--ecc-fw-medium); color: var(--ecc-ink-2); line-height: 1.35; }
.ecc-trk .ecc-trk__step.is-done .ecc-trk__stepw, .ecc-trk .ecc-trk__step.is-now .ecc-trk__stepw { color: var(--ecc-ink); }
.ecc-trk .ecc-trk__step.is-now .ecc-trk__stepw { font-weight: var(--ecc-fw-strong); }
:root[data-theme="night"] .ecc-trk .ecc-trk__step.is-now .ecc-trk__vox { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ecc-lime) 55%, transparent)); }

.ecc-trk .ecc-trk__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ecc-s-2) var(--ecc-s-4); }
.ecc-trk .ecc-trk__tnum { margin: 0; color: var(--ecc-ink-2); overflow-wrap: anywhere; }
.ecc-trk .ecc-trk__items { display: grid; gap: var(--ecc-s-2); margin: 0; padding: var(--ecc-s-4) 0 0; border-top: 1px solid var(--ecc-line); list-style: none; }
.ecc-trk .ecc-trk__item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--ecc-s-3); align-items: center; }
.ecc-trk .ecc-trk__thumb { display: grid; place-items: center; width: 64px; height: 64px; overflow: hidden; border-radius: 4px; background: var(--ecc-stage-bg, var(--ecc-surface-2)); }
.ecc-trk .ecc-trk__thumb img { width: 100%; height: 100%; object-fit: contain; }
.ecc-trk .ecc-trk__thumb:empty::before { content: ""; width: 8px; height: 8px; border-radius: var(--ecc-r-voxel); background: var(--ecc-spark); }
.ecc-trk .ecc-trk__iname { overflow-wrap: anywhere; line-height: 1.35; }
.ecc-trk .ecc-trk__iname a { color: var(--ecc-ink); text-underline-offset: 4px; }
.ecc-trk .ecc-trk__q { color: var(--ecc-ink-2); }
.ecc-trk .ecc-trk__store { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--ecc-s-3); align-items: center; padding: var(--ecc-s-3) var(--ecc-s-4); border-radius: var(--ecc-r-sm); background: var(--ecc-surface-2); }
.ecc-trk .ecc-trk__store p { margin: 0; line-height: 1.5; }

/* the side */
.ecc-trk .ecc-trk__help { display: grid; gap: var(--ecc-s-4); justify-items: start; }
.ecc-trk .ecc-trk__help > * { margin: 0; }
.ecc-trk .ecc-trk__list { display: grid; gap: var(--ecc-s-3); padding: 0; list-style: none; }
.ecc-trk .ecc-trk__list li { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: var(--ecc-s-3); align-items: baseline; line-height: 1.5; }
.ecc-trk .ecc-trk__list li::before { content: ""; width: 8px; height: 8px; border-radius: var(--ecc-r-voxel); background: var(--ecc-spark); translate: 0 -1px; }

@media (min-width: 1024px) {
  .ecc-trk .ecc-trk__main { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); }
  .ecc-trk .ecc-trk__side { position: sticky; top: var(--ecc-s-6); }
}
@media (max-width: 760px) {
  .ecc-trk .ecc-trk__top { padding-top: var(--ecc-s-6); }
  .ecc-trk .ecc-trk__fields { grid-template-columns: minmax(0, 1fr); }
  .ecc-trk .ecc-trk__cardhead { grid-template-columns: minmax(0, 1fr); gap: var(--ecc-s-3); }
  .ecc-trk .ecc-trk__num { justify-self: start; }
  .ecc-trk .ecc-trk__steps { grid-template-columns: minmax(0, 1fr); gap: var(--ecc-s-3); }
  .ecc-trk .ecc-trk__steps::before { top: 10px; bottom: 10px; left: 9px; right: auto; width: 2px; height: auto; }
  .ecc-trk .ecc-trk__step { grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: var(--ecc-s-3); }
  .ecc-trk .ecc-trk__store { grid-template-columns: auto minmax(0, 1fr); }
  .ecc-trk .ecc-trk__store .ecc-btn { grid-column: 1 / -1; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .ecc-trk * { transition: none !important; } }