/**
 * Order tracking page shell (sections/order-tracking.liquid).
 *
 * Loaded AFTER section-customers.css and scoped entirely under
 * .section-tracking: the base file owns the shared machinery (the
 * .tracking-steps stepper also used by preorder-updates, .field controls,
 * .order-block__heading) and this file only dresses the shell around it.
 * Nothing here may restyle .tracking-steps - the stage key's muted stepper
 * must stay pixel-identical to the live steppers above it, because being the
 * same drawing is what makes it a key.
 *
 * The shell's grammar borrows the roadmap's line: SOLID borders frame real
 * data (a signed-in customer's orders, the lookup console), DASHED borders
 * frame what is not data (the guest explainer, the stage key legend) - the
 * same solid/dashed distinction the roadmap draws between shipped work and
 * plans. A visitor scanning the page can tell at a glance which cards are
 * about their parcel and which are about the page itself.
 *
 * All colours are theme tokens or color-mix() tints of them.
 */

/* ------------------------------------------------------------------ */
/* Signed-in orders: quiet outline cards, lifted on hover              */
/* ------------------------------------------------------------------ */
/* Same bones as .roadmap__body: hairline card at rest, ink-leaning border
   and a low shadow on hover/focus. The + divider rules from the base file
   restate the same 1px line the card border already draws, so no override
   is needed there. */
.section-tracking .tracking-order {
  padding: var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
  background-color: var(--color-bg);
}

.section-tracking .tracking-order:hover,
.section-tracking .tracking-order:focus-within {
  border-color: color-mix(in srgb, var(--color-ink) 22%, var(--color-line));
  box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--color-ink) 30%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .section-tracking .tracking-order {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  }

  .section-tracking .tracking-order:hover,
  .section-tracking .tracking-order:focus-within {
    transform: translateY(-2px);
  }
}

.section-tracking .tracking-order__header {
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-line);
}

/* ------------------------------------------------------------------ */
/* Guest state: the lookup console and the honest explainer            */
/* ------------------------------------------------------------------ */
/* The lookup is the action card, so it is the solid, faintly-tinted one -
   fields resting on the page ground read as slots cut into the console. */
.section-tracking .tracking-lookup {
  padding: var(--space-6);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
  background-color: color-mix(in srgb, var(--color-ink) 2%, var(--color-bg));
}

.section-tracking .tracking-lookup .order-block__heading {
  margin-bottom: var(--space-2);
}

/* The shared micro-label grammar (heading face, caption scale) that the
   contact form's fields wear, scoped to this console only. */
.section-tracking .tracking-lookup .field__label {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.section-tracking .tracking-lookup .field:focus-within .field__label {
  color: var(--color-ink);
}

.section-tracking .tracking-lookup .field__input {
  background-color: var(--color-bg);
}

@media (prefers-reduced-motion: no-preference) {
  .section-tracking .tracking-lookup .field__label {
    transition: color 0.15s ease;
  }
}

/* The explainer keeps its dashed frame - it is about the page, not a parcel
   - and gets a proper hierarchy: chip, title, routes. */
.section-tracking .tracking-empty {
  padding: var(--space-6);
}

/* The kicker becomes a tinted chip, echoing the roadmap's status chips:
   same height, same face, same tint arithmetic. */
.section-tracking .tracking-empty__label {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding-inline: var(--space-2);
  border-radius: var(--radius-pill);
  background-color: color-mix(in srgb, var(--color-brand) 10%, var(--color-bg));
  color: var(--color-brand);
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* The two routes that actually work for a guest are numbered like the
   procedure they are - index numerals in the heading face, hairline-ruled
   rows - not disc bullets. Do this, or do that. */
.section-tracking .tracking-empty__routes {
  width: 100%;
  list-style: none;
  padding-left: 0;
  gap: 0;
  counter-reset: tracking-route;
}

.section-tracking .tracking-empty__routes li {
  counter-increment: tracking-route;
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-top: 1px solid var(--color-line);
}

.section-tracking .tracking-empty__routes li:last-child {
  border-bottom: 1px solid var(--color-line);
}

.section-tracking .tracking-empty__routes li::before {
  content: counter(tracking-route, decimal-leading-zero);
  flex: 0 0 auto;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--color-brand);
}

/* ------------------------------------------------------------------ */
/* Stage key: a legend, drawn like one                                 */
/* ------------------------------------------------------------------ */
/* Dashed frame on the key card: the same "this is an outline of a thing,
   not the thing" stroke the roadmap gives planned entries. The muted
   stepper inside it comes from the shared styles and is not touched. */
.section-tracking .tracking-key {
  border-style: dashed;
  padding: var(--space-6);
}

.section-tracking .tracking-key .order-block__heading {
  margin-bottom: var(--space-4);
}

.section-tracking .tracking-key__note {
  margin-top: var(--space-4);
}

/* ------------------------------------------------------------------ */
/* Help footer                                                         */
/* ------------------------------------------------------------------ */
.section-tracking .tracking-help {
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line);
}

/* Entrance stagger for the guest pair, same rhythm as the roadmap's card
   stagger: the console lands first, the explainer follows a beat later. */
@media (prefers-reduced-motion: no-preference) {
  .section-tracking .tracking-guest > [data-reveal]:nth-child(2) {
    transition-delay: 80ms;
  }
}

/* ------------------------------------------------------------------ */
/* Guest routes                                                        */
/* ------------------------------------------------------------------ */
/* Two ways in, drawn as rows rather than a form: the first is a link to
   sign in, the second is a note. Nothing here looks like a search. */
.section-tracking .tracking-guest__routes {
  display: grid;
  gap: var(--space-3);
  max-width: 640px;
}

.section-tracking .tracking-route {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
  color: inherit;
  text-decoration: none;
}

.section-tracking .tracking-route--primary {
  border-color: var(--color-ink);
  background-color: color-mix(in srgb, var(--color-ink) 4%, transparent);
}

.section-tracking .tracking-route--primary:hover,
.section-tracking .tracking-route--primary:focus-visible {
  background-color: color-mix(in srgb, var(--color-ink) 8%, transparent);
}

.section-tracking .tracking-route__icon,
.section-tracking .tracking-extra__icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-m);
  background-color: color-mix(in srgb, var(--color-brand) 12%, transparent);
  color: var(--color-brand);
}

.section-tracking .tracking-route__body,
.section-tracking .tracking-extra__body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.section-tracking .tracking-route__title {
  margin: 0;
}

.section-tracking .tracking-route__text,
.section-tracking .tracking-extra__text {
  color: var(--color-muted);
}

.section-tracking .tracking-route__arrow {
  margin-left: auto;
  color: var(--color-muted);
}

/* ------------------------------------------------------------------ */
/* Extras: preorder note, WhatsApp, Shop app                           */
/* ------------------------------------------------------------------ */
.section-tracking .tracking-extras {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

@media screen and (min-width: 750px) {
  .section-tracking .tracking-extras {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

.section-tracking .tracking-extra {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
  color: inherit;
  text-decoration: none;
}

.section-tracking .tracking-extra:hover,
.section-tracking .tracking-extra:focus-visible {
  border-color: var(--color-ink);
}

.section-tracking .tracking-extra__title {
  font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* FAQ                                                                 */
/* ------------------------------------------------------------------ */
.section-tracking .tracking-faq {
  margin-top: var(--space-8);
  max-width: 720px;
}

.section-tracking .tracking-faq__item {
  border-top: 1px solid var(--color-line);
}

.section-tracking .tracking-faq__item:last-child {
  border-bottom: 1px solid var(--color-line);
}

.section-tracking .tracking-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.section-tracking .tracking-faq__question::-webkit-details-marker {
  display: none;
}

.section-tracking .tracking-faq__chevron {
  flex: 0 0 auto;
  color: var(--color-muted);
  transition: rotate 0.2s ease;
}

.section-tracking .tracking-faq__item[open] .tracking-faq__chevron {
  rotate: 180deg;
}

.section-tracking .tracking-faq__answer {
  padding: 0 0 var(--space-4);
  color: var(--color-muted);
}

.section-tracking .badge--muted {
  opacity: 0.7;
}