/* `/apps/parcelpanel` — the order tracking page.
 *
 * Measured off aeke.com's Parcel Panel widget at 1440:
 *
 *   widget     1200px wide, centred, 24px above it (the section is 24 + 458 + 24 = 506)
 *   heading    the theme's h1 step — 50px/58px, weight 600 — with 20px below it
 *   inputs     264x50, `padding: 12px 17px`, a 0.8px border, a 6px radius, 13px text
 *   buttons    102x50 teal pills, `padding: 7px 30px`, a 25px radius, a 15px dark label
 *   "Or"        between the two modes, 17px
 *
 * The app renders its field labels as `<div>`s and its own stylesheet is injected at runtime; the
 * label *type* size (13px, matching the input) and the label-to-input gaps are therefore inferred
 * from the boxes around them rather than read. Everything else is measured, and the section's total
 * height is checked against live.
 *
 * The result panel has nothing to measure — live cannot show one without a real order — so it is
 * ours, built in the site's own language.
 */

.tracking-section {
  display: flow-root;
}

.tracking {
  /* Live: `width: 1200px` with `max-width: calc(100% - 32px)`, and `margin: 24px 112.4px`.
     Measured: 24 + 458 + 24 = 506 for the section. */
  width: min(1200px, calc(100% - 32px));
  margin: 24px auto;
  padding-bottom: 26px;
}

.tracking__title {
  margin: 0 0 20px;
  /* The size is the site's own h1 step, which is what the live widget renders: it sets the class
     `h1` on the heading and inherits 50/58 at 1440. */
}

.tracking__notice {
  margin: 0 0 24px;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: 6px;
  font-size: 15px;
  line-height: 1.6;
}

/* --------------------------------------------------------------- the two modes */

/* Measured: a 1158px row inside the 1200px widget, holding two 557px columns with a 44px divider
   between them — 557 + 44 + 557. Each column centres its 264px fields, which is why live's two
   inputs sit 600px apart rather than 264. */
.tracking__panel {
  display: flex;
  justify-content: space-between;
  width: min(1158px, 100%);
  margin: 0 auto;
  padding: 30px 0 32px;
}

.tracking__mode {
  width: min(557px, calc(50% - 22px));
  padding-bottom: 19px;
}

.tracking__form {
  display: flex;
  flex-direction: column;
  width: min(264px, 100%);
  margin: 0 auto;
  padding-top: 20px;
}

.tracking__label {
  /* Measured: 17px on a 27px line — the app's labels are 17px, not the 13px its inputs use. */
  margin: 0;
  font-size: 17px;
  line-height: 27px;
}

/* Measured: the field groups are 102px apart — a 77px group (27 label + 50 input) and a 25px gap. */
.tracking__input + .tracking__label {
  margin-top: 25px;
}

.tracking__input {
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  padding: 12px 17px;
  border: 0.8px solid var(--color-form-border);
  border-radius: 6px;
  background: transparent;
  font-family: inherit;
  font-size: 0.8125rem;
  color: inherit;
}

.tracking__input:focus {
  outline: 0;
  border-color: var(--color-accent);
}

.tracking__button {
  box-sizing: border-box;
  margin-top: 24px;
  width: 102px;
  height: 50px;
  padding: 7px 30px;
  border: 0;
  border-radius: var(--button-border-radius);
  /* The theme's own solid button, adopted verbatim: teal with a dark label, 6.37:1. */
  background: var(--solid-button-background);
  color: var(--solid-button-label);
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1;
  font-weight: 500;
  cursor: pointer;
}

.tracking__button:hover {
  background: var(--solid-button-background-hover);
}

.tracking__or {
  /* The divider column: 44px wide and 203px tall on live — the height of the two field groups —
     with the word at its centre. The vertical rule is inferred rather than measured: the element is
     named `line_center`, it is 44px wide, and without a rule that width has nothing to hold. */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 203px;
  margin-top: 20px;
  font-size: 17px;
  color: var(--color-body);
}

.tracking__or::before,
.tracking__or::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  background: var(--color-border);
}

/* Two segments rather than one rule behind the text, so the word needs no masking. */
.tracking__or::before {
  top: 0;
  height: calc(50% - 14px);
}

.tracking__or::after {
  bottom: 0;
  height: calc(50% - 14px);
}

/* --------------------------------------------------------------------- result */

.tracking__result {
  margin-top: 48px;
  padding: 30px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.tracking__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
}

.tracking__eyebrow {
  margin: 0;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-body);
}

.tracking__number {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--color-heading);
}

.tracking__status {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--color-accent);
}

.tracking__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.tracking__step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--color-body);
}

.tracking__step-dot {
  width: 10px;
  height: 10px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
}

.tracking__step.is-done .tracking__step-dot {
  border-color: var(--color-accent);
  background: var(--color-accent);
}

.tracking__step.is-current {
  color: var(--color-heading);
  font-weight: 600;
}

.tracking__step.is-current .tracking__step-dot {
  box-shadow: 0 0 0 3px rgb(var(--color-accent-rgb) / 25%);
}

.tracking__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 48px;
  margin: 24px 0 0;
}

.tracking__facts dt {
  margin: 0 0 4px;
  font-size: 0.8125rem;
  color: var(--color-body);
}

.tracking__facts dd {
  margin: 0;
  font-size: 15px;
  color: var(--color-heading);
}

.tracking__items {
  margin: 24px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--color-border);
  list-style: none;
}

.tracking__items li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 15px;
}

.tracking__item-meta {
  color: var(--color-body);
  font-size: 0.8125rem;
}

.tracking__source {
  margin: 24px 0 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--color-body);
}

.tracking__source a {
  color: var(--color-accent);
}

/* ------------------------------------------------------------------ breakpoints */

@media (max-width: 47.99em) {
  .tracking__panel {
    /* One mode under the other, and the word stops being a column separator. */
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 24px 0;
  }

  .tracking__mode {
    width: 100%;
    padding-bottom: 0;
  }

  .tracking__or {
    width: auto;
    height: auto;
    margin: 0;
  }

  /* No rule when the modes are stacked: there is no column boundary to mark. */
  .tracking__or::before,
  .tracking__or::after {
    display: none;
  }

  .tracking__result {
    padding: 20px;
  }
}