/* The customer's order tracking page: one column, built for a phone. */
.tk-page { max-width: 560px; margin: 0 auto; }
.tk-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; margin-bottom: 14px; }
.tk-form .field { margin: 0; }
.tk-form input { text-transform: uppercase; font-family: ui-monospace, Menlo, monospace; font-weight: 700; }
.tk-form .btn { padding: 12px 20px; }
.tk-muted { color: var(--ink-2); font-size: 13px; }
.tk-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 12px; }
.tk-ref { font-family: ui-monospace, Menlo, monospace; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.tk-head { margin: 6px 0 4px; font-size: 22px; letter-spacing: -0.02em; }
.tk-sub { margin: 0 0 14px; color: var(--ink-2); line-height: 1.5; }
.tk-card.is-delivered .tk-head { color: var(--good); }
.tk-card.is-cancelled .tk-head, .tk-card.is-returned .tk-head { color: var(--sale); }
.tk-card.is-trouble .tk-head { color: #9a5f0b; }

/* Four steps down the card; done ones filled, the current one ringed. */
.tk-steps { list-style: none; margin: 0 0 14px; padding: 0; }
.tk-steps li { position: relative; padding: 0 0 14px 30px; display: flex; flex-direction: column; }
.tk-steps li::before {
  content: ''; position: absolute; left: 4px; top: 3px; width: 14px; height: 14px; border-radius: 999px;
  border: 2px solid var(--line); background: var(--surface);
}
.tk-steps li::after { content: ''; position: absolute; left: 11px; top: 21px; bottom: 0; width: 2px; background: var(--line); }
.tk-steps li:last-child { padding-bottom: 0; }
.tk-steps li:last-child::after { display: none; }
.tk-steps li.is-done::before { background: var(--brand-dark); border-color: var(--brand-dark); }
.tk-steps li.is-done::after { background: var(--brand-dark); }
.tk-steps li.is-now::before { background: var(--accent); border-color: var(--brand-dark); box-shadow: 0 0 0 4px var(--accent-soft); }
.tk-steps li.is-now::after { background: var(--line); }
.tk-step-label { font-weight: 700; font-size: 14.5px; }
.tk-steps li:not(.is-done) .tk-step-label { color: var(--ink-3); }
.tk-step-when { font-size: 12.5px; color: var(--ink-2); }

.tk-courier { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-weight: 650; font-size: 14px; margin-bottom: 12px; overflow-wrap: anywhere; }
.tk-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tk-actions .btn { flex: 1 1 auto; text-align: center; }
.tk-label { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.tk-item { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; margin-bottom: 10px; }
.tk-item img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; background: var(--surface-2); }
.tk-item:not(:has(img)) { grid-template-columns: 1fr; }
.tk-item-name { font-weight: 700; font-size: 14px; }
.tk-pay { margin: 4px 0 6px; padding-top: 10px; border-top: 1px dashed var(--line); font-weight: 800; font-size: 16px; }
@media (max-width: 420px) {
  .tk-form { grid-template-columns: 1fr; }
}