/* ══════════════════════════════════════════════════════════
   زاگرس — پیگیری (/track)

   Only what /join's stylesheet does not already have: the two-way
   switch at the top of the card, and the result card an order lookup
   draws. Fields, buttons, cards, the error text and the timeline all
   come from join.css, which this page loads first.
   ══════════════════════════════════════════════════════════ */

/* `hidden` loses to a class that sets `display`, and most of this page's
   conditional parts have one — the call button is .jbtn (block), the cargo row
   is .trow (grid). Without this the button to ring the driver stays on screen
   after delivery, when the server has deliberately stopped sending his number.
   Scoped to this page rather than added to join.css, which does not need it. */
[hidden] { display: none !important; }

/* One column, not /join's form+aside grid. There is no aside here, and on a
   wide screen the result card would otherwise land in the narrow second column
   beside the form, where it reads as a second form rather than as the answer. */
.join__shell { max-width: 44rem; margin-inline: auto; }
@media (min-width: 60rem) {
  .join__shell { grid-template-columns: minmax(0, 1fr); }
}

/* ── the switch ──────────────────────────────────────────
   A segmented control rather than two links: both halves answer from
   the same card, and a page reload between them would throw away a
   half-typed order number. */
.ttabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .3rem;
  margin: 0 0 1.35rem;
  padding: .3rem;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
}

.ttab {
  padding: .6rem .5rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .87rem;
  font-weight: 650;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.ttab:hover { color: var(--ink); }
.ttab.is-on {
  background: var(--raised);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.tpanel:focus { outline: none; }

.thelp {
  margin: 1.1rem 0 0;
  font-size: .78rem;
  line-height: 1.9;
  color: var(--muted);
}
.thelp a { color: var(--accent); font-weight: 650; }

/* ── the result ──────────────────────────────────────────
   A second card under the form rather than a screen that replaces it:
   somebody checking on a load usually checks again, and the number
   they typed is still in the box above. */
.tresult { margin-top: 1.1rem; }

.tresult__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line-soft);
}

.tresult__eyebrow { margin: 0; font-size: .72rem; font-weight: 650; color: var(--muted); }
.tresult__num { margin: .15rem 0 0; font-size: 1.5rem; font-weight: 800; letter-spacing: .04em; }

.tchip {
  flex: 0 0 auto;
  padding: .4rem .75rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.7;
}
/* Delivered and cancelled are the two a customer reads as "done" — the accent
   would keep claiming something is still happening. */
.tchip.is-done { background: var(--line-soft); color: var(--muted); }
.tchip.is-off { background: color-mix(in srgb, #C0453A 12%, transparent); color: #C0453A; }
:root[data-theme='dark'] .tchip.is-off { color: #E0796D; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .tchip.is-off { color: #E0796D; }
}

.trows { margin: 1rem 0 0; padding: 0; }
.trow {
  display: grid;
  grid-template-columns: 4.2rem 1fr;
  gap: .6rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.trow:last-child { border-bottom: 0; }
.trow dt { margin: 0; font-size: .78rem; font-weight: 650; color: var(--muted); }
.trow dd { margin: 0; font-size: .85rem; line-height: 1.8; }

.tdriver {
  margin-top: 1.1rem;
  padding: .95rem 1rem;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
}
.tdriver__t { margin: 0; font-size: .78rem; font-weight: 650; color: var(--muted); }
.tdriver__name { margin: .3rem 0 0; font-size: .95rem; font-weight: 700; }
.tdriver__car { margin: .2rem 0 0; font-size: .82rem; color: var(--muted); line-height: 1.8; }
.tdriver__call { margin-top: .8rem; }

/* The timeline is join.css's, but there every row is a stage that will happen;
   here every row is an event that did, so the last one is the live one. */
.tresult .jtl { margin-top: 1.3rem; }