/* ==========================================================================
   Order tracking (/tracking - app/Views/_Tracking, public/development/tracking.js).
   The shop's frame and palette (shop.css) around one narrow column: the code,
   then the order's journey as a timeline, newest step first.
   ========================================================================== */

.trk { max-width: calc(44rem + 2 * var(--gutter)); padding-block: var(--s7) var(--s8); }
.trk-eyebrow { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t0); font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: .06em; }
.trk-title { margin-top: var(--s2); font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); font-weight: 800; letter-spacing: -.03em; }
.trk-lead { margin-top: var(--s2); color: var(--ink-2); font-size: var(--t2); }

.shop--tracking .mast .tools { margin-left: auto; }

/* ── the code ─────────────────────────────────────────────────────────── */
.trk-form { margin-top: var(--s6); }
.trk-label { display: block; font-weight: 700; margin-bottom: var(--s1); }
.trk-row { display: flex; gap: var(--s2); }
.trk-row input {
	flex: 1; min-width: 0; min-height: 2.75rem; padding: 0 var(--s3);
	border: 1px solid var(--line-strong); border-radius: var(--r1); background: var(--paper);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--t1); letter-spacing: .02em;
}
.trk-row input::placeholder { color: var(--ink-3); font-family: inherit; letter-spacing: 0; }
.trk-row input:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-soft); }
.trk-row input[aria-invalid="true"] { border-color: var(--bad); }
.trk-row .btn { flex: none; }
.trk-form .field-hint, .trk-form .field-error { margin-top: var(--s1); }

/* ── the answer ───────────────────────────────────────────────────────── */
.trk-result { margin-top: var(--s6); }
.trk-how { list-style: none; margin: 0; padding: var(--s5); display: grid; gap: var(--s4); background: var(--wash); border-radius: var(--r2); }
.trk-how li { display: flex; gap: var(--s3); align-items: flex-start; color: var(--ink-2); }
.trk-how .ico { flex: none; color: var(--brand); margin-top: .1rem; }
.trk-how b { color: var(--ink); }

.trk-card { border: 1px solid var(--line); border-radius: var(--r2); background: var(--paper); overflow: hidden; }
.trk-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s5); border-bottom: 1px solid var(--line); background: var(--wash); }
.trk-order { font-size: var(--t0); color: var(--ink-2); }
.trk-order b { display: block; margin-top: .1rem; font-size: var(--t3); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.trk-now { display: inline-flex; align-items: center; gap: var(--s2); padding: .35rem .75rem; border-radius: var(--r1); background: var(--paper); border: 1px solid var(--line); font-weight: 700; }
.trk-now .ico { color: var(--brand); }
.trk-actions { display: flex; gap: var(--s2); }
.trk-actions .btn { min-height: 2.5rem; padding: 0 var(--s3); font-size: var(--t0); }

/* the journey: a line of dots, newest at the top; done steps filled, the
   current one ringed - and each says which it is in words, not only colour */
.trk-steps { list-style: none; margin: 0; padding: var(--s5); display: grid; }
.trk-step { position: relative; display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; gap: 0 var(--s3); padding-bottom: var(--s5); }
.trk-step:last-child { padding-bottom: 0; }
.trk-step::before { content: ""; position: absolute; left: calc(.75rem - .5px); top: 1.5rem; bottom: 0; width: 1px; background: var(--line); }
.trk-step:last-child::before { display: none; }
.trk-dot { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; }
.trk-dot .ico { width: .875rem; height: .875rem; }
.trk-step.is-current .trk-dot { background: var(--paper); box-shadow: inset 0 0 0 1px var(--brand), 0 0 0 4px var(--brand-soft); }
.trk-step.is-current .trk-dot::after { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--brand); }
.trk-step-name { font-weight: 700; }
.trk-step-state { margin-left: var(--s2); font-size: .75rem; font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: .05em; }
.trk-step-detail { grid-column: 2 / 4; margin-top: .15rem; color: var(--ink-2); }
.trk-step-time { font-size: var(--t0); color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* expired / not found / failed */
.trk-empty { padding: var(--s6) var(--s5); text-align: center; border: 1px solid var(--line); border-radius: var(--r2); }
.trk-empty .ico { color: var(--ink-3); }
.trk-empty h2 { margin-top: var(--s3); font-size: var(--t3); }
.trk-empty p { margin: var(--s2) auto 0; max-width: 34rem; color: var(--ink-2); }
.trk-empty .trk-actions { justify-content: center; margin-top: var(--s4); flex-wrap: wrap; }

/* loading: the shape of the answer, quietly */
.trk-skel { display: grid; gap: var(--s4); padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r2); }
.trk-skel span { display: block; height: .875rem; border-radius: var(--r1); background: linear-gradient(90deg, var(--shelf), var(--wash), var(--shelf)); background-size: 200% 100%; animation: trk-shimmer 1.2s linear infinite; }
.trk-skel span:nth-child(1) { width: 40%; height: 1.25rem; }
.trk-skel span:nth-child(2) { width: 85%; }
.trk-skel span:nth-child(3) { width: 70%; }
.trk-skel span:nth-child(4) { width: 55%; }
@keyframes trk-shimmer { from { background-position: 200% 0; } to { background-position: 0 0; } }

@media (max-width: 30rem) {
	.trk { padding-block: var(--s5) var(--s7); }
	.trk-row { flex-direction: column; }
	.trk-row .btn { width: 100%; }
	.trk-step { grid-template-columns: 1.5rem minmax(0, 1fr); }
	.trk-step-time { grid-column: 2; }
	.trk-step-detail { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { .trk-skel span { animation: none; } }
@media print {
	.mast .tools, .trk-form, .trk-actions, .foot { display: none; }
	.trk-card { border: 0; }
}