/* tracking-public.css — the ONE screen in this repository iMove's own
   customers ever touch: a family with a container at sea, opening a link on
   a phone. It does not load console.css (that is iMove STAFF chrome — a
   left-nav admin shell) or frame.css (that is the CreatiSoul proposal
   deck). Neither belongs here: this page must read as iMove's own product,
   with nothing on it hinting at the sales pitch that links to it. It DOES
   reuse imove.css's --imv-* colour tokens (this palette IS iMove's own, not
   a CreatiSoul one — console.css already establishes that same reasoning)
   and fonts.css's embedded typefaces.

   GOLD RULE, same as console.css: gold is background/border/SVG fill only,
   never `color`. Every gold moment below (header mark, done-step dot/rule)
   is a background or border. Where warm emphasis is needed in text,
   #8A6200 (--imv-gold-on-light) is used — not in G4's restricted hex list,
   safe as text on any surface. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--imv-bone);
  color: var(--imv-t1);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}
h1, h2 {
  font-family: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  line-height: 1.2;
}
p { margin: 0; }
svg { display: block; }

/* ---------- Header — iMove's own mark, not CreatiSoul's ---------- */
.tp-header {
  background: var(--imv-ink);
  color: var(--imv-bone);
  padding: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.tp-header__mark {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--imv-gold); /* background, not text — G4 does not apply */
  flex-shrink: 0;
}
.tp-header__word {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 1.0625rem;
}

/* ---------- Main column ---------- */
/* A narrow centred card, not a full-bleed layout, at every width on
   purpose: this is a lookup utility, not a page of reading content, and the
   shipping-tracker convention (a single vertical timeline, centred) reads
   correctly on a phone AND stays legible rather than sprawling thin content
   across a 1440px viewport. */
.tp-main {
  max-width: 32rem;
  margin-inline: auto;
  padding: 2rem 1.25rem 3rem;
}
.tp-intro { margin-bottom: 1.5rem; text-align: center; }
.tp-intro h1 { font-size: clamp(1.5rem, 1.3rem + 1vw, 1.875rem); margin-bottom: 0.5rem; }
.tp-intro p { color: var(--imv-t2); font-size: 1rem; }

.tp-card {
  background: #fff;
  border: 1px solid var(--imv-hairline);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}

/* ---------- Lookup form ---------- */
.tp-field-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--imv-t2);
  margin-bottom: 0.5rem;
}
.tp-lookup-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
/* Real box sizes, normal flex flow, no negative-margin hit-area tricks —
   the input and button cannot overlap each other or anything else
   regardless of how they wrap at narrow widths. */
.tp-input {
  flex: 1 1 180px;
  min-height: 48px;
  padding-inline: 1rem;
  border: 2px solid var(--imv-g3);
  border-radius: 10px;
  font-size: 16px; /* literal px, not rem/em — this page loads no root
                       font-size rule of its own, but 16px is written
                       literally anyway so it can never drift below the
                       iOS-zoom threshold if one is added later */
  font-family: inherit;
  color: var(--imv-t1);
  background: #fff;
}
.tp-input:focus-visible { outline: 2px solid var(--imv-ink); outline-offset: 1px; }
.tp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px; /* tap target floor */
  padding-inline: 1.5rem;
  border-radius: 10px;
  border: none;
  background: var(--imv-ink);
  color: var(--imv-bone);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  flex: 1 1 140px;
}
.tp-btn:focus-visible { outline: 2px solid var(--imv-ink); outline-offset: 2px; }
.tp-hint { margin-top: 0.75rem; font-size: 0.8125rem; color: var(--imv-t3); }

/* ---------- Result ---------- */
.tp-result__ref {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--imv-t2);
  margin-bottom: 0.25rem;
}
.tp-result__headline { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.25rem; }
.tp-result__detail { color: var(--imv-t2); font-size: 0.9375rem; margin-bottom: 1.5rem; }

/* ---------- Timeline: Booked -> Packed -> Departed -> In transit ->
   Customs -> Delivered. Vertical at every width on purpose — this is a
   phone-first read-top-to-bottom status, the way every parcel/shipment
   tracker already works, not a horizontal stepper that would need desktop
   space this page deliberately does not use. ---------- */
.tp-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tp-timeline__item {
  position: relative;
  padding-inline-start: 2rem;
  padding-block-end: 1.5rem;
  border-inline-start: 2px solid var(--imv-g3);
}
.tp-timeline__item:last-child { padding-block-end: 0; border-inline-start-color: transparent; }
/* The connecting rule and dot are decorative (aria-hidden, no text, not
   inside any a/button/input) so they are outside the hit-test's scope by
   construction — nothing to click, nothing that can misdirect a click. */
.tp-timeline__dot {
  position: absolute;
  left: -11px;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--imv-g3);
}
.tp-timeline__item.is-done { border-inline-start-color: var(--imv-gold); }
.tp-timeline__item.is-done .tp-timeline__dot {
  background: var(--imv-gold); /* background, not text */
  border-color: var(--imv-gold);
}
.tp-timeline__item.is-current { border-inline-start-color: var(--imv-gold); }
.tp-timeline__item.is-current .tp-timeline__dot {
  background: var(--imv-ink);
  border-color: var(--imv-ink);
}
.tp-timeline__name { font-weight: 700; font-size: 1rem; margin-bottom: 0.125rem; }
.tp-timeline__when { font-size: 0.875rem; color: var(--imv-t2); }
.tp-timeline__item.is-current .tp-timeline__when {
  color: var(--imv-gold-on-light); /* #8A6200 — text-safe on any surface, not in G4's restricted list */
  font-weight: 600;
}
.tp-timeline__item:not(.is-done):not(.is-current) .tp-timeline__name,
.tp-timeline__item:not(.is-done):not(.is-current) .tp-timeline__when {
  color: var(--imv-t3);
}

/* ---------- Footer ---------- */
/* No phone number or email is printed here — this build has fabricated a
   client contact detail before, and that is a hard stop, not a shortcut.
   The footer names only facts already established elsewhere in this
   proposal (company name, city) and points to "your move coordinator"
   rather than inventing a channel. */
.tp-footer {
  text-align: center;
  color: var(--imv-t3);
  font-size: 0.8125rem;
  padding: 0 1.25rem 2rem;
}
.tp-footer p + p { margin-top: 0.375rem; }