/* ===========================================================================
   SetuHaul Tracking — the consignee's page.

   The brief's line for this party: "Reliable revised arrival information."
   Public, mobile-first, one input, one card. The stepper borrows the driver
   app's journey language so the two views of the same truck agree; the
   window shown is the CURRENT appointment, which is the whole point — it
   moves, and this page moves with it.
   =========================================================================== */

body { background: var(--concrete); }
.page { min-height: 100dvh; display: flex; flex-direction: column;
        max-width: 560px; margin: 0 auto; }

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative; overflow: hidden;
  padding: max(var(--s-7), env(safe-area-inset-top) + var(--s-5))
           var(--s-5) var(--s-6);
  background:
    radial-gradient(120% 90% at 85% -10%, #2C6DA4 0%, transparent 55%),
    linear-gradient(168deg, #1F4E79 0%, #14344F 78%);
  color: #fff;
}
.hero__arcs { position: absolute; inset: auto 0 0 0; width: 100%; height: 70%;
              opacity: .12; pointer-events: none; }
.hero__brand { position: relative; display: flex; align-items: center;
               gap: var(--s-4); }
.hero__logo { border-radius: 13px;
              box-shadow: 0 10px 28px rgba(0,0,0,.35),
                          0 0 0 1px rgba(255,255,255,.14); }
.hero__word { font-family: var(--font-display); font-size: 28px;
              font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.hero__word span { color: var(--hi-vis-pure); }
.hero__tag { color: #B9C9D8; font-size: var(--t-small); margin: 4px 0 0; }

/* ----------------------------------------------------------------- sheet */

.sheet {
  position: relative; flex: 1; margin-top: -16px;
  padding: var(--s-6) var(--s-5);
  background: var(--concrete);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -12px 32px rgba(10, 24, 38, .16);
}
.sheet h1 { font-size: 26px; letter-spacing: -.02em; margin: 0 0 var(--s-2); }
.sub { color: var(--ink-2); margin: 0 0 var(--s-5); }
.sub code { font-family: var(--font-data); background: var(--concrete-deep);
            padding: 1px 6px; border-radius: 5px; }

.trackrow { display: flex; gap: var(--s-2); }
.in {
  flex: 1; min-width: 0; min-height: 52px; padding: 0 var(--s-4);
  font-family: var(--font-data); font-size: 17px; letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--concrete-lit); color: var(--ink);
  border: 1.5px solid var(--rule); border-radius: var(--r-2);
}
.in:focus { border-color: var(--signal); outline: none; }
.btn-go {
  min-height: 52px; padding: 0 var(--s-5); border: 0;
  border-radius: var(--r-2); background: var(--signal); color: #fff;
  font-size: 16px; font-weight: 700;
}
.btn-go:disabled { opacity: .55; }
.fielderr { margin-top: var(--s-2); color: var(--stop);
            font-size: var(--t-small); font-weight: 600; }

/* ------------------------------------------------------------------ card */

.card {
  margin-top: var(--s-5); padding: var(--s-5);
  background: var(--concrete-lit); border: 1px solid var(--rule);
  border-radius: var(--r-3); box-shadow: var(--lift-2);
  animation: rise var(--dur-3) var(--ease);
}
.card__head { display: flex; align-items: baseline; gap: var(--s-3); }
.card__ref { font-family: var(--font-data); font-weight: 700; font-size: 17px; }
.card__stage {
  margin-left: auto; font-size: var(--t-micro); font-weight: 700;
  letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--signal);
}
.card__cancel {
  margin-top: var(--s-3); padding: var(--s-3);
  background: var(--stop-wash); color: var(--stop);
  border-radius: var(--r-2); font-weight: 600; font-size: var(--t-small);
}

.steps {
  list-style: none; display: flex; justify-content: space-between;
  margin: var(--s-5) 0; padding: 0; position: relative;
}
.steps::before {
  content: ""; position: absolute; left: 8%; right: 8%; top: 7px;
  height: 2px; background: var(--rule);
}
.steps li {
  position: relative; z-index: 1; flex: 1; text-align: center;
  font-size: var(--t-micro); color: var(--ink-4); padding-top: 22px;
}
.steps li::before {
  content: ""; position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--concrete-deep); border: 2px solid var(--rule);
}
.steps li.done { color: var(--ink-2); }
.steps li.done::before { background: var(--clearance); border-color: var(--clearance); }
.steps li.now { color: var(--signal); font-weight: 700; }
.steps li.now::before { background: var(--signal); border-color: var(--signal);
                        box-shadow: 0 0 0 4px var(--signal-wash); }

.card__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4);
  padding-top: var(--s-4); border-top: 1px dashed var(--rule);
}
.card__grid .k { display: block; font-size: var(--t-micro); color: var(--ink-3);
                 letter-spacing: var(--track-caps); text-transform: uppercase;
                 margin-bottom: 2px; }
.card__grid b { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.card__note { margin: var(--s-4) 0 0; color: var(--ink-2);
              font-size: var(--t-small); }
/* A late arrival is the one line on this page a customer must not skim past,
   so it gets the caution treatment rather than the quiet grey. */
.card__note--late { background: var(--hi-vis-wash); color: var(--ink-1);
                    border-left: 3px solid var(--hi-vis-pure);
                    border-radius: var(--r-1);
                    padding: var(--s-3) var(--s-4); }

.foot { padding: var(--s-4) var(--s-5) max(var(--s-5), env(safe-area-inset-bottom));
        color: var(--ink-3); font-size: var(--t-micro); text-align: center; }